element-plus/es/components/segmented/src/segmented.vue2.mjs.map

A Component Library for Vue 3

{"version":3,"file":"segmented.vue2.mjs","sources":["../../../../../../packages/components/segmented/src/segmented.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"options.length\"\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=\"[ns.e('group'), ns.m(direction)]\">\n      <div :style=\"selectedStyle\" :class=\"selectedCls\" />\n      <label\n        v-for=\"(item, index) in options\"\n        :key=\"index\"\n        :class=\"getItemCls(item)\"\n      >\n        <input\n          :class=\"ns.e('item-input')\"\n          type=\"radio\"\n          :name=\"name\"\n          :disabled=\"getDisabled(item)\"\n          :checked=\"getSelected(item)\"\n          @change=\"handleChange($event, item)\"\n        />\n        <div :class=\"ns.e('item-label')\">\n          <slot :item=\"intoAny(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 } from '@element-plus/hooks'\nimport {\n  useFormDisabled,\n  useFormItem,\n  useFormItemInputId,\n  useFormSize,\n} from '@element-plus/components/form'\nimport { debugWarn, isObject } from '@element-plus/utils'\nimport { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport { defaultProps, segmentedEmits } from './segmented'\n\nimport type { Option } from './types'\nimport type { SegmentedProps } from './segmented'\n\ndefineOptions({\n  name: 'ElSegmented',\n})\n\nconst props = withDefaults(defineProps<SegmentedProps>(), {\n  direction: 'horizontal',\n  options: () => [],\n  props: () => defaultProps,\n  validateEvent: true,\n  modelValue: undefined,\n  disabled: undefined,\n})\nconst emit = defineEmits(segmentedEmits)\n\nconst ns = useNamespace('segmented')\nconst segmentedId = useId()\nconst segmentedSize = useFormSize()\nconst _disabled = useFormDisabled()\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  height: 0,\n  translateX: 0,\n  translateY: 0,\n  focusVisible: false,\n})\n\nconst handleChange = (evt: Event, item: Option) => {\n  const value = getValue(item)\n  emit(UPDATE_MODEL_EVENT, value)\n  emit(CHANGE_EVENT, value)\n  ;(evt.target as HTMLInputElement).checked = value === props.modelValue\n}\n\nconst aliasProps = computed(() => ({ ...defaultProps, ...props.props }))\n\n//FIXME: remove this when vue >=3.3\nconst intoAny = (item: any) => item\n\nconst getValue = (item: Option) => {\n  return isObject(item) ? item[aliasProps.value.value] : item\n}\n\nconst getLabel = (item: Option) => {\n  return isObject(item) ? item[aliasProps.value.label] : item\n}\n\nconst getDisabled = (item: Option | undefined) => {\n  return !!(\n    _disabled.value ||\n    (isObject(item) ? item[aliasProps.value.disabled] : false)\n  )\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    ns.e('item'),\n    ns.is('selected', getSelected(item)),\n    ns.is('disabled', getDisabled(item)),\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.height = 0\n    state.translateX = 0\n    state.translateY = 0\n    state.focusVisible = false\n    return\n  }\n  state.isInit = true\n  if (props.direction === 'vertical') {\n    state.height = selectedItem.offsetHeight\n    state.translateY = selectedItem.offsetTop\n  } else {\n    state.width = selectedItem.offsetWidth\n    state.translateX = selectedItem.offsetLeft\n  }\n  try {\n    // This will failed in test\n    state.focusVisible = selectedItemInput.matches(':focus-visible')\n  } catch {}\n}\n\nconst segmentedCls = computed(() => [\n  ns.b(),\n  ns.m(segmentedSize.value),\n  ns.is('block', props.block),\n])\n\nconst selectedStyle = computed(() => ({\n  width: props.direction === 'vertical' ? '100%' : `${state.width}px`,\n  height: props.direction === 'vertical' ? `${state.height}px` : '100%',\n  transform:\n    props.direction === 'vertical'\n      ? `translateY(${state.translateY}px)`\n      : `translateX(${state.translateX}px)`,\n  display: state.isInit ? 'block' : 'none',\n}))\n\nconst selectedCls = computed(() => [\n  ns.e('item-selected'),\n  ns.is('disabled', getDisabled(getOption(props.modelValue))),\n  ns.is('focus-visible', state.focusVisible),\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":["_createElementBlock","_unref","_createElementVNode","_normalizeClass","_openBlock","_Fragment","_renderList","_renderSlot","_createTextVNode","_toDisplayString"],"mappings":"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"}