element-plus
Version:
A Component Library for Vue 3
1 lines • 11.9 kB
Source Map (JSON)
{"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(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, 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 = (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":["options","_createElementBlock","_unref","_normalizeClass","ariaLabel","_createElementVNode","direction","_normalizeStyle","_openBlock","_Fragment","_renderSlot","_createTextVNode","_toDisplayString"],"mappings":"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"}