{"version":3,"file":"segmented2.mjs","sources":["../../../../../../packages/components/segmented/src/segmented.vue"],"sourcesContent":["<template>\n  <div\n    :id=\"inputId\"\n    ref=\"segmentedRef\"\n    :class=\"segmentedCls\"\n    role=\"radiogroup\"\n    :aria-label=\"!isLabeledByFormItem ? ariaLabel || 'segmented' : undefined\"\n    :aria-labelledby=\"isLabeledByFormItem ? formItem!.labelId : undefined\"\n  >\n    <div class=\"segmented-group\">\n      <div :style=\"selectedStyle\" :class=\"selectedCls\"></div>\n      <label\n        v-for=\"(item, index) in options\"\n        :key=\"index\"\n        :class=\"getItemCls(item)\"\n      >\n        <input\n          class=\"segmented-item-input\"\n          type=\"radio\"\n          :name=\"name\"\n          :disabled=\"getDisabled(item)\"\n          :checked=\"getSelected(item)\"\n          @change=\"handleChange(item)\"\n        >\n        <div class=\"segmented-item-label\">\n          <slot :item=\"item\">{{ getLabel(item) }}</slot>\n        </div>\n      </label>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, reactive, ref, watch } from 'vue'\nimport { useActiveElement, useResizeObserver } from '@vueuse/core'\nimport { useId, useNamespace, useConsistentProp, useFormItem, useFormItemInputId } from '@hongluan-ui/hooks'\nimport { debugWarn, isObject } from '@hongluan-ui/utils'\nimport { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@hongluan-ui/constants'\nimport { segmentedEmits, segmentedProps } from './segmented'\nimport type { Option } from './types'\n\ndefineOptions({\n  name: 'Segmented',\n})\n\nconst props = defineProps(segmentedProps)\nconst emit = defineEmits(segmentedEmits)\n\nconst { namespace } = useNamespace('segmented')\nconst segmentedId = useId()\nconst { disabled: _disabled, size: segmentedSize } = useConsistentProp()\nconst { formItem } = useFormItem()\nconst { inputId, isLabeledByFormItem } = useFormItemInputId(props, {\n  formItemContext: formItem,\n})\n\nconst segmentedRef = ref<HTMLElement | null>(null)\nconst activeElement = useActiveElement()\n\nconst state = reactive({\n  isInit: false,\n  width: 0,\n  translateX: 0,\n  disabled: false,\n  focusVisible: false,\n})\n\nconst handleChange = (item: Option) => {\n  const value = getValue(item)\n  emit(UPDATE_MODEL_EVENT, value)\n  emit(CHANGE_EVENT, value)\n}\n\nconst getValue = (item: Option) => {\n  return isObject(item) ? item.value : item\n}\n\nconst getLabel = (item: Option) => {\n  return isObject(item) ? item.label : item\n}\n\nconst getDisabled = (item: Option) => {\n  return !!(_disabled.value || (isObject(item) ? item.disabled : false))\n}\n\nconst getSelected = (item: Option) => {\n  return props.modelValue === getValue(item)\n}\n\nconst getOption = (value: any) => {\n  return props.options.find(item => getValue(item) === value)\n}\n\nconst getItemCls = (item: Option) => {\n  return [\n    'segmented-item',\n    getSelected(item) ? 'is-selected' : '',\n    getDisabled(item) ? 'is-disabled' : '',\n  ]\n}\n\nconst updateSelect = () => {\n  if (!segmentedRef.value) return\n  const selectedItem = segmentedRef.value.querySelector(\n    '.is-selected',\n  ) as HTMLElement\n  const selectedItemInput = segmentedRef.value.querySelector(\n    '.is-selected input',\n  ) as HTMLElement\n  if (!selectedItem || !selectedItemInput) {\n    state.width = 0\n    state.translateX = 0\n    state.disabled = false\n    state.focusVisible = false\n    return\n  }\n  const rect = selectedItem.getBoundingClientRect()\n  state.isInit = true\n  state.width = rect.width\n  state.translateX = selectedItem.offsetLeft\n  state.disabled = getDisabled(getOption(props.modelValue))\n  try {\n    // This will failed in test\n    state.focusVisible = selectedItemInput.matches(':focus-visible')\n  } catch {}\n}\n\nconst segmentedCls = computed(() => [\n  namespace.value,\n  segmentedSize.value,\n  props.block ? 'is-block' : '',\n])\n\nconst selectedStyle = computed(() => ({\n  width: `${state.width}px`,\n  transform: `translateX(${state.translateX}px)`,\n  display: state.isInit ? 'block' : 'none',\n}))\n\nconst selectedCls = computed(() => [\n  'segmented-item-selected',\n  state.disabled ? 'is-disabled' : '',\n  state.focusVisible ? 'focus-visible' : '',\n])\n\nconst name = computed(() => {\n  return props.name || segmentedId.value\n})\n\nuseResizeObserver(segmentedRef, updateSelect)\n\nwatch(activeElement, updateSelect)\n\nwatch(\n  () => props.modelValue,\n  () => {\n    updateSelect()\n    if (props.validateEvent) {\n      formItem?.validate?.('change').catch(err => debugWarn(err))\n    }\n  },\n  {\n    flush: 'post',\n  },\n)\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;oCAyCc;AAAA,EACZ,MAAM;AACR;;;;;;;AAKA,UAAM,EAAE,cAAc,aAAa,WAAW;AAC9C,UAAM,cAAc;AACpB,UAAM,EAAE,UAAU,WAAW,MAAM,kBAAkB;AACrD,UAAM,EAAE,aAAa;AACrB,UAAM,EAAE,SAAS,wBAAwB,mBAAmB,OAAO;AAAA,MACjE,iBAAiB;AAAA,KAClB;AAED,UAAM,eAAe,IAAwB,IAAI;AACjD,UAAM,gBAAgB;AAEtB,UAAM,QAAQ,SAAS;AAAA,MACrB,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,UAAU;AAAA,MACV,cAAc;AAAA,KACf;AAED,UAAM,eAAe,CAAC,SAAiB;AACrC,YAAM,QAAQ,SAAS,IAAI;AAC3B,WAAK,oBAAoB,KAAK;AAC9B,WAAK,cAAc,KAAK;AAAA;AAG1B,UAAM,WAAW,CAAC,SAAiB;AACjC,aAAO,SAAS,IAAI,IAAI,KAAK,QAAQ;AAAA;AAGvC,UAAM,WAAW,CAAC,SAAiB;AACjC,aAAO,SAAS,IAAI,IAAI,KAAK,QAAQ;AAAA;AAGvC,UAAM,cAAc,CAAC,SAAiB;AACpC,aAAO,CAAC,YAAY,mBAAmB,IAAI,IAAI,KAAK,WAAW;AAAA;AAGjE,UAAM,cAAc,CAAC,SAAiB;AACpC,aAAO,MAAM,eAAe,SAAS,IAAI;AAAA;AAG3C,UAAM,YAAY,CAAC,UAAe;AAChC,aAAO,MAAM,QAAQ,KAAK,UAAQ,SAAS,IAAI,MAAM,KAAK;AAAA;AAG5D,UAAM,aAAa,CAAC,SAAiB;AACnC,aAAO;AAAA,QACL;AAAA,QACA,YAAY,IAAI,IAAI,gBAAgB;AAAA,QACpC,YAAY,IAAI,IAAI,gBAAgB;AAAA;AACtC;AAGF,UAAM,eAAe,MAAM;AACzB,UAAI,CAAC,aAAa;AAAO;AACzB,YAAM,eAAe,aAAa,MAAM,cACtC,cACF;AACA,YAAM,oBAAoB,aAAa,MAAM,cAC3C,oBACF;AACA,UAAI,CAAC,gBAAgB,CAAC,mBAAmB;AACvC,cAAM,QAAQ;AACd,cAAM,aAAa;AACnB,cAAM,WAAW;AACjB,cAAM,eAAe;AACrB;AAAA;AAEF,YAAM,OAAO,aAAa;AAC1B,YAAM,SAAS;AACf,YAAM,QAAQ,KAAK;AACnB,YAAM,aAAa,aAAa;AAChC,YAAM,WAAW,YAAY,UAAU,MAAM,UAAU,CAAC;AACxD,UAAI;AAEF,cAAM,eAAe,kBAAkB,QAAQ,gBAAgB;AAAA;AAC/D;AAAO;AAGX,UAAM,eAAe,SAAS,MAAM;AAAA,MAClC,UAAU;AAAA,MACV,cAAc;AAAA,MACd,MAAM,QAAQ,aAAa;AAAA,KAC5B;AAED,UAAM,gBAAgB,SAAS;AAAO,MACpC,OAAO,GAAG,MAAM;AAAA,MAChB,WAAW,cAAc,MAAM;AAAA,MAC/B,SAAS,MAAM,SAAS,UAAU;AAAA,MAClC;AAEF,UAAM,cAAc,SAAS,MAAM;AAAA,MACjC;AAAA,MACA,MAAM,WAAW,gBAAgB;AAAA,MACjC,MAAM,eAAe,kBAAkB;AAAA,KACxC;AAED,UAAM,OAAO,SAAS,MAAM;AAC1B,aAAO,MAAM,QAAQ,YAAY;AAAA,KAClC;AAED,sBAAkB,cAAc,YAAY;AAE5C,UAAM,eAAe,YAAY;AAEjC,UACE,MAAM,MAAM,YACZ,MAAM;AACJ;AACA;AACE,6BAAqB;AAAqC;AAC5D,OAEF;AAAA;AACS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}