1 line
8.4 KiB
Plaintext
1 line
8.4 KiB
Plaintext
|
{"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=\"ns.e('group')\">\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(item)\"\n />\n <div :class=\"ns.e('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 } 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 { segmentedEmits, segmentedProps } from './segmented'\nimport type { Option } from './types'\n\ndefineOptions({\n name: 'ElSegmented',\n})\n\nconst props = defineProps(segmentedProps)\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 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 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.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 ns.b(),\n ns.m(segmentedSize.value),\n ns.is('block', props.block),\n])\n\nconst selectedStyle = computed(() => ({\n width: `${state.width}px`,\n transform: `translateX(${state.tran
|