vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
1 lines • 11.1 kB
Source Map (JSON)
{"version":3,"file":"switch.vue2.mjs","sources":["../../../components/switch/switch.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { Icon } from '@/components/icon'\nimport { Renderer } from '@/components/renderer'\nimport { useFieldStore } from '@/components/form'\n\nimport { computed, ref, watch } from 'vue'\n\nimport {\n createIconProp,\n createSizeProp,\n createStateProp,\n emitEvent,\n useIcons,\n useNameHelper,\n useProps,\n} from '@vexip-ui/config'\nimport { isPromise } from '@vexip-ui/utils'\nimport { switchProps } from './props'\n\nimport type { SwitchSlots } from './symbol'\n\ndefineOptions({ name: 'Switch' })\n\nconst {\n idFor,\n labelId,\n state,\n disabled,\n loading,\n size,\n validateField,\n getFieldValue,\n setFieldValue,\n} = useFieldStore<boolean>(() => input.value?.focus())\n\nconst _props = defineProps(switchProps)\nconst props = useProps('switch', _props, {\n size: createSizeProp(size),\n state: createStateProp(state),\n value: {\n default: () => getFieldValue(),\n static: true,\n },\n disabled: () => disabled.value,\n openColor: '',\n closeColor: '',\n loading: () => loading.value,\n loadingIcon: createIconProp(),\n loadingEffect: null,\n openIcon: createIconProp(),\n closeIcon: createIconProp(),\n openText: '',\n closeText: '',\n onBeforeChange: {\n default: null,\n isFunc: true,\n },\n rectangle: false,\n name: {\n default: '',\n static: true,\n },\n slots: () => ({}),\n})\n\nconst emit = defineEmits(['update:value'])\n\ndefineSlots<SwitchSlots>()\n\nconst nh = useNameHelper('switch')\nconst icons = useIcons()\nconst currentValue = ref(props.value)\n\nconst input = ref<HTMLInputElement>()\n\nconst className = computed(() => {\n return [\n nh.b(),\n nh.bs('vars'),\n {\n [nh.bm('inherit')]: props.inherit,\n [nh.bm('open')]: currentValue.value,\n [nh.bm(props.size)]: props.size !== 'default',\n [nh.bm(props.state)]: props.state !== 'default',\n [nh.bm('disabled')]: props.disabled,\n [nh.bm('loading')]: props.loading,\n [nh.bm('rectangle')]: props.rectangle,\n },\n ]\n})\nconst style = computed(() => {\n return {\n backgroundColor: currentValue.value ? props.openColor : props.closeColor,\n }\n})\nconst signalStyle = computed(() => {\n return {\n color: currentValue.value ? props.openColor : props.closeColor,\n }\n})\nconst isDisabled = computed(() => {\n return props.disabled || props.loading\n})\n\nwatch(\n () => props.value,\n value => {\n currentValue.value = value\n },\n)\n\ndefineExpose({\n idFor,\n labelId,\n currentValue,\n input,\n focus: (options?: FocusOptions) => input.value?.focus(options),\n blur: () => input.value?.blur(),\n})\n\nasync function handleChange(checked = !currentValue.value) {\n if (checked === currentValue.value) return\n\n let result: unknown = true\n\n if (typeof props.onBeforeChange === 'function') {\n result = props.onBeforeChange(checked)\n\n if (isPromise(result)) {\n result = await result\n }\n }\n\n if (result !== false) {\n currentValue.value = checked\n\n emit('update:value', checked)\n setFieldValue(checked)\n emitEvent(props.onChange, checked)\n validateField()\n }\n}\n</script>\n\n<template>\n <label\n :id=\"idFor\"\n :class=\"className\"\n role=\"switch\"\n :aria-checked=\"currentValue\"\n :aria-disabled=\"isDisabled\"\n :aria-labelledby=\"labelId\"\n :style=\"style\"\n >\n <input\n ref=\"input\"\n type=\"checkbox\"\n :class=\"nh.be('input')\"\n :checked=\"currentValue\"\n :disabled=\"isDisabled\"\n :name=\"props.name\"\n @submit.prevent\n @change=\"handleChange()\"\n @click.stop\n />\n <span :class=\"nh.be('placeholder')\" aria-hidden>\n <span :class=\"nh.be('open-text')\">\n <slot name=\"open\">\n <Renderer :renderer=\"props.slots.open\">{{ props.openText }}</Renderer>\n </slot>\n </span>\n <span :class=\"nh.be('close-text')\">\n <slot name=\"close\">\n <Renderer :renderer=\"props.slots.open\">{{ props.closeText }}</Renderer>\n </slot>\n </span>\n </span>\n <span :class=\"nh.be('signal')\" :style=\"signalStyle\">\n <slot v-if=\"props.loading\" name=\"loading\">\n <Renderer :renderer=\"props.slots.loading\">\n <Icon\n v-bind=\"icons.loading\"\n :effect=\"props.loadingEffect || icons.loading.effect\"\n :icon=\"props.loadingIcon || icons.loading.icon\"\n label=\"loading\"\n ></Icon>\n </Renderer>\n </slot>\n <slot v-else name=\"icon\" :value=\"currentValue\">\n <Renderer :renderer=\"props.slots.icon\" :data=\"{ value: currentValue }\">\n <Icon v-if=\"currentValue && props.openIcon\" :icon=\"props.openIcon\"></Icon>\n <Icon v-else-if=\"!currentValue && props.closeIcon\" :icon=\"props.closeIcon\"></Icon>\n </Renderer>\n </slot>\n </span>\n <span :class=\"nh.be('label')\">\n <span v-if=\"currentValue\" :class=\"nh.be('open-text')\">\n <slot name=\"open\">\n <Renderer :renderer=\"props.slots.open\">{{ props.openText }}</Renderer>\n </slot>\n </span>\n <span v-else :class=\"nh.be('close-text')\">\n <slot name=\"close\">\n <Renderer :renderer=\"props.slots.open\">{{ props.closeText }}</Renderer>\n </slot>\n </span>\n </span>\n </label>\n</template>\n"],"names":["idFor","labelId","state","disabled","loading","size","validateField","getFieldValue","setFieldValue","useFieldStore","_a","input","props","useProps","__props","createSizeProp","createStateProp","createIconProp","emit","__emit","nh","useNameHelper","icons","useIcons","currentValue","ref","className","computed","style","signalStyle","isDisabled","watch","value","__expose","options","handleChange","checked","result","isPromise","emitEvent","_createElementBlock","_unref","_createElementVNode","_normalizeClass","_renderSlot","_ctx","_createVNode","Renderer","_createTextVNode","_toDisplayString","Icon","_mergeProps","_createBlock"],"mappings":"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"}