You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

1 line
10 KiB

{"version":3,"file":"switch.js","sources":["../../../../../../packages/components/switch/src/switch.vue"],"sourcesContent":["<template>\n <div :class=\"switchKls\" @click.prevent=\"switchValue\">\n <input\n :id=\"inputId\"\n ref=\"input\"\n :class=\"ns.e('input')\"\n type=\"checkbox\"\n role=\"switch\"\n :aria-checked=\"checked\"\n :aria-disabled=\"switchDisabled\"\n :aria-label=\"ariaLabel\"\n :name=\"name\"\n :true-value=\"activeValue\"\n :false-value=\"inactiveValue\"\n :disabled=\"switchDisabled\"\n :tabindex=\"tabindex\"\n @change=\"handleChange\"\n @keydown.enter=\"switchValue\"\n />\n <span\n v-if=\"!inlinePrompt && (inactiveIcon || inactiveText)\"\n :class=\"labelLeftKls\"\n >\n <el-icon v-if=\"inactiveIcon\">\n <component :is=\"inactiveIcon\" />\n </el-icon>\n <span v-if=\"!inactiveIcon && inactiveText\" :aria-hidden=\"checked\">{{\n inactiveText\n }}</span>\n </span>\n <span ref=\"core\" :class=\"ns.e('core')\" :style=\"coreStyle\">\n <div v-if=\"inlinePrompt\" :class=\"ns.e('inner')\">\n <template v-if=\"activeIcon || inactiveIcon\">\n <el-icon :class=\"ns.is('icon')\">\n <component :is=\"checked ? activeIcon : inactiveIcon\" />\n </el-icon>\n </template>\n <template v-else-if=\"activeText || inactiveText\">\n <span :class=\"ns.is('text')\" :aria-hidden=\"!checked\">\n {{ checked ? activeText : inactiveText }}\n </span>\n </template>\n </div>\n <div :class=\"ns.e('action')\">\n <el-icon v-if=\"loading\" :class=\"ns.is('loading')\">\n <loading />\n </el-icon>\n <slot v-else-if=\"checked\" name=\"active-action\">\n <el-icon v-if=\"activeActionIcon\">\n <component :is=\"activeActionIcon\" />\n </el-icon>\n </slot>\n <slot v-else-if=\"!checked\" name=\"inactive-action\">\n <el-icon v-if=\"inactiveActionIcon\">\n <component :is=\"inactiveActionIcon\" />\n </el-icon>\n </slot>\n </div>\n </span>\n <span\n v-if=\"!inlinePrompt && (activeIcon || activeText)\"\n :class=\"labelRightKls\"\n >\n <el-icon v-if=\"activeIcon\">\n <component :is=\"activeIcon\" />\n </el-icon>\n <span v-if=\"!activeIcon && activeText\" :aria-hidden=\"!checked\">{{\n activeText\n }}</span>\n </span>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, nextTick, onMounted, ref, watch } from 'vue'\nimport {\n addUnit,\n debugWarn,\n isBoolean,\n isPromise,\n throwError,\n} from '@element-plus/utils'\nimport ElIcon from '@element-plus/components/icon'\nimport {\n useFormDisabled,\n useFormItem,\n useFormItemInputId,\n useFormSize,\n} from '@element-plus/components/form'\nimport { Loading } from '@element-plus/icons-vue'\nimport {\n CHANGE_EVENT,\n INPUT_EVENT,\n UPDATE_MODEL_EVENT,\n} from '@element-plus/constants'\nimport { useNamespace } from '@element-plus/hooks'\nimport { switchEmits, switchProps } from './switch'\nimport type { CSSProperties } from 'vue'\n\nconst COMPONENT_NAME = 'ElSwitch'\ndefineOptions({\n name: COMPONENT_NAME,\n})\n\nconst props = defineProps(switchProps)\nconst emit = defineEmits(switchEmits)\n\nconst { formItem } = useFormItem()\nconst switchSize = useFormSize()\nconst ns = useNamespace('switch')\n\nconst { inputId } = useFormItemInputId(props, {\n formItemContext: formItem,\n})\n\nconst switchDisabled = useFormDisabled(computed(() => props.loading))\nconst isControlled = ref(props.modelValue !== false)\nconst input = ref<HTMLInputElement>()\nconst core = ref<HTMLSpanElement>()\n\nconst switchKls = computed(() => [\n ns.b(),\n ns.m(switchSize.value),\n ns.is('disabled', switchDisabled.value),\n ns.is('checked', checked.value),\n])\n\nconst labelLeftKls = computed(() => [\n ns.e('label'),\n ns.em('label', 'left'),\n ns.is('active', !checked.value),\n])\n\nconst labelRightKls = computed(() => [\n ns.e('label'),\n ns.em('label', 'right'),\n ns.is('active', checked.value),\n])\n\nconst coreStyle = computed<CSSProperties>(() => ({\n width: addUnit(props.width),\n}))\n\nwatch(\n () => props.modelValue,\n () => {\n isControlled.value = true\n }\n)\n\nconst actualValue = computed(() => {\n return isControlled.value ? props.modelValue : false\n})\n\nconst checked = computed(() => actualValue.value === props.activeValue)\n\nif (![props.activeValue, props.inactiveValue].includes(actualValue.value)) {\n emit(UPDATE_MODEL_EVENT, props.inactiveValue)\n emit(CHANGE_EVENT, props.inactiveValue)\n emit(INPUT_EVENT, props.inactiveValue)\n}\n\nwatch(checked, (val) => {\n input.value!.checked = val\n\n if (props.validateEvent) {\n formItem?.validate?.('change').catch((err) => debugWarn(err))\n }\n})\n\nconst handleChange = () => {\n const val = checked.value ? props.inactiveValue : props.activeValue\n emit(UPDATE_MODEL_EVENT, val)\n emit(CHANGE_EVENT, val)\n emit(INPUT_EVENT, val)\n nextTick(() => {\n input.value!.checked = checked.value\n })\n}\n\nconst switchValue = () => {\n if (switchDisabled.value) return\n\n const { beforeChange } = props\n if (!beforeChange) {\n handleChange()\n return\n }\n\n const shouldChange = beforeChange()\n\n const isPromiseOrBool = [\n isPromise(shouldChange),\n isBoolean(shouldChange),\n ].includes(true)\n if (!isPromiseOrBool) {\n throwError(\n COMPONENT_NAME,\n 'beforeChange must return type `Promise<boolean>` or `boolean`'\n )\n }\n\n if (isPromise(shouldChange)) {\n shouldChange\n .then((result) => {\n if (result) {\n handleChange()\n }\n })\n .catch((e) => {\n debugWarn(COMPONENT_NAME, `some error occurred: ${e}`)\n })\n } else if (shouldChange) {\n handleChange()\n }\n}\n\nconst focus = (): void => {\n input.value?.focus?.()\n}\n\nonMounted(() => {\n input.value!.checked = checked.value\n})\n\ndefineExpose({\n /**\n * @description manual focus to the switch component\n **/\n focus,\n /**\n * @description whether Switch is checked\n */\n checked,\n})\n</script>\n"],"names":["useFormItem","useFormSize","useNamespace","useFormItemInputId","useFormDisabled","computed","ref","addUnit","watch","UPDATE_MODEL_EVENT","CHANGE_EVENT","INPUT_EVENT","debugWarn","nextTick","isPromise","isBoolean","throwError","onMounted"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;uCAoGc,CAAA;AAAA,EACZ,IAAM,EAAA,cAAA;AACR;;;;;;;AAKA,IAAM,MAAA,EAAE,aAAaA,uBAAY,EAAA,CAAA;AACjC,IAAA,MAAM,aAAaC,8BAAY,EAAA,CAAA;AAC/B,IAAM,MAAA,EAAA,GAAKC,mBAAa,QAAQ,CAAA,CAAA;AAEhC,IAAM,MAAA,EAAE,OAAY,EAAA,GAAAC,8BAAA,CAAmB,KAAO,EAAA;AAAA,MAC5C,eAAiB,EAAA,QAAA;AAAA,KAClB,CAAA,CAAA;AAED,IAAA,MAAM,iBAAiBC,kCAAgB,CAAAC,YAAA,CAAS,MAAM,KAAA,CAAM,OAAO,CAAC,CAAA,CAAA;AACpE,IAAA,MAAM,YAAe,GAAAC,OAAA,CAAI,KAAM,CAAA,UAAA,KAAe,KAAK,CAAA,CAAA;AACnD,IAAA,MAAM,QAAQA,OAAsB,EAAA,CAAA;AACpC,IAAA,MAAM,OAAOA,OAAqB,EAAA,CAAA;AAElC,IAAM,MAAA,SAAA,GAAYD,aAAS,MAAM;AAAA,MAC/B,GAAG,CAAE,EAAA;AAAA,MACL,EAAA,CAAG,CAAE,CAAA,UAAA,CAAW,KAAK,CAAA;AAAA,MACrB,EAAG,CAAA,EAAA,CAAG,UAAY,EAAA,cAAA,CAAe,KAAK,CAAA;AAAA,MACtC,EAAG,CAAA,EAAA,CAAG,SAAW,EAAA,OAAA,CAAQ,KAAK,CAAA;AAAA,KAC/B,CAAA,CAAA;AAED,IAAM,MAAA,YAAA,GAAeA,aAAS,MAAM;AAAA,MAClC,EAAA,CAAG,EAAE,OAAO,CAAA;AAAA,MACZ,EAAA,CAAG,EAAG,CAAA,OAAA,EAAS,MAAM,CAAA;AAAA,MACrB,EAAG,CAAA,EAAA,CAAG,QAAU,EAAA,CAAC,QAAQ,KAAK,CAAA;AAAA,KAC/B,CAAA,CAAA;AAED,IAAM,MAAA,aAAA,GAAgBA,aAAS,MAAM;AAAA,MACnC,EAAA,CAAG,EAAE,OAAO,CAAA;AAAA,MACZ,EAAA,CAAG,EAAG,CAAA,OAAA,EAAS,OAAO,CAAA;AAAA,MACtB,EAAG,CAAA,EAAA,CAAG,QAAU,EAAA,OAAA,CAAQ,KAAK,CAAA;AAAA,KAC9B,CAAA,CAAA;AAED,IAAM,MAAA,SAAA,GAAYA,aAAwB,OAAO;AAAA,MAC/C,KAAA,EAAOE,aAAQ,CAAA,KAAA,CAAM,KAAK,CAAA;AAAA,KAC1B,CAAA,CAAA,CAAA;AAEF,IACEC,SAAA,CAAA,MAAM,KAAM,CAAA,UAAA,EACZ,MAAM;AACJ,MAAA,YAAA,CAAa,KAAQ,GAAA,IAAA,CAAA;AAAA,KAEzB,CAAA,CAAA;AAEA,IAAM,MAAA,WAAA,GAAcH,aAAS,MAAM;AACjC,MAAO,OAAA,YAAA,CAAa,KAAQ,GAAA,KAAA,CAAM,UAAa,GAAA,KAAA,CAAA;AAAA,KAChD,CAAA,CAAA;AAED,IAAA,MAAM,UAAUA,YAAS,CAAA,MAAM,WAAY,CAAA,KAAA,KAAU,MAAM,WAAW,CAAA,CAAA;AAEtE,IAAI,IAAA,CAAC,CAAC,KAAA,CAAM,WAAa,EAAA,KAAA,CAAM,aAAa,CAAE,CAAA,QAAA,CAAS,WAAY,CAAA,KAAK,CAAG,EAAA;AACzE,MAAK,IAAA,CAAAI,wBAAA,EAAoB,MAAM,aAAa,CAAA,CAAA;AAC5C,MAAK,IAAA,CAAAC,kBAAA,EAAc,MAAM,aAAa,CAAA,CAAA;AACtC,MAAK,IAAA,CAAAC,iBAAA,EAAa,MAAM,aAAa,CAAA,CAAA;AAAA,KACvC;AAEA,IAAMH,SAAA,CAAA,OAAA,EAAS,CAAC,GAAQ,KAAA;AACtB,MAAA,IAAA,EAAM;AAEN,MAAA,WAAyB,CAAA,OAAA,GAAA,GAAA,CAAA;AACvB,MAAU,IAAA,KAAA,CAAA,aAAW;AAAuC,QAC9D,CAAA,EAAA,GAAA,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,QAAA,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,IAAA,CAAA,QAAA,EAAA,QAAA,CAAA,CAAA,KAAA,CAAA,CAAA,GAAA,KAAAI,eAAA,CAAA,GAAA,CAAA,CAAA,CAAA;AAAA,OACD;AAED,KAAA,CAAA,CAAA;AACE,IAAA,MAAA,YAAY,GAAA,MAAgB;AAC5B,MAAA,yBAAyB,GAAG,KAAA,CAAA,aAAA,GAAA,KAAA,CAAA,WAAA,CAAA;AAC5B,MAAA,IAAA,CAAKH,wBAAiB,EAAA,GAAA,CAAA,CAAA;AACtB,MAAA,IAAA,CAAKC,oBAAgB,GAAA,CAAA,CAAA;AACrB,MAAA,IAAA,CAAAC,iBAAe,EAAA,GAAA,CAAA,CAAA;AACb,MAAME,YAAA,CAAA;AAAyB,QAChC,KAAA,CAAA,KAAA,CAAA,OAAA,GAAA,OAAA,CAAA,KAAA,CAAA;AAAA,OACH,CAAA,CAAA;AAEA,KAAA,CAAA;AACE,IAAA,MAAI,WAAe,GAAA,MAAA;AAAO,MAAA,IAAA,cAAA,CAAA,KAAA;AAE1B,QAAA,OAAyB;AACzB,MAAA,MAAmB,EAAA,YAAA,EAAA,GAAA,KAAA,CAAA;AACjB,MAAa,IAAA,CAAA,YAAA,EAAA;AACb,QAAA,YAAA,EAAA,CAAA;AAAA,QACF,OAAA;AAEA,OAAA;AAEA,MAAA,MAAM,YAAkB,GAAA,YAAA,EAAA,CAAA;AAAA,MAAA,qBACA,GAAA;AAAA,QACtBC,iBAAU,YAAY,CAAA;AAAA,QACtBC,eAAS,CAAI,YAAA,CAAA;AACf,OAAA,CAAA,QAAsB,CAAA,IAAA,CAAA,CAAA;AACpB,MAAA,IAAA,CAAA;AAGA,QACFC,gBAAA,CAAA,cAAA,EAAA,+DAAA,CAAA,CAAA;AAEA,OAAI;AACF,MACG,IAAAF,gBAAA,CAAA,YAAiB,CAAA,EAAA;AAChB,QAAA,YAAY,CAAA,IAAA,CAAA,CAAA,MAAA,KAAA;AACV,UAAa,IAAA,MAAA,EAAA;AAAA,YACf,YAAA,EAAA,CAAA;AAAA,WAED;AACC,SAAU,CAAA,CAAA,KAAA,CAAA,CAAA,CAAA,KAAA;AAA2C,UACtDF,eAAA,CAAA,cAAA,EAAA,CAAA,qBAAA,EAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA;AAEH,OAAa,MAAA,IAAA,YAAA,EAAA;AAAA,QACf,YAAA,EAAA,CAAA;AAAA,OACF;AAEA,KAAA,CAAA;AACE,IAAA,MAAA,cAAqB;AAAA,MACvB,IAAA,EAAA,EAAA,EAAA,CAAA;AAEA,MAAA,CAAA,EAAA,GAAA,CAAA,EAAgB,GAAA,KAAA,CAAA,KAAA,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,KAAA,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,IAAA,CAAA,EAAA,CAAA,CAAA;AACd,KAAM,CAAA;AAAyB,IACjCK,aAAC,CAAA,MAAA;AAED,MAAa,KAAA,CAAA,KAAA,CAAA,OAAA,GAAA,OAAA,CAAA,KAAA,CAAA;AAAA,KAIX,CAAA,CAAA;AAAA,IAIA,MAAA,CAAA;AAAA,MACD,KAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}