1 line
9.8 KiB
Plaintext
1 line
9.8 KiB
Plaintext
|
{"version":3,"file":"segmented2.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(props.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(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, segmentedProps } from './segmented'\n\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 height: 0,\n translateX: 0,\n translateY: 0,\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 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.t
|