song-ui-u
Version:
vue3 + js的PC前端组件库
1 lines • 6.47 kB
Source Map (JSON)
{"version":3,"file":"index.vue.cjs","sources":["../../../../../packages/components/switch/src/index.vue"],"sourcesContent":["<template>\n <div :class=\"[ns.b()]\" @click=\"handleSwitch\">\n <div\n :class=\"[\n ns.e('input'),\n ns.m('size', size),\n ns.m(type),\n ns.is('checked', isChecked),\n ns.is('disabled', isDisabled || isLoading),\n ]\"\n >\n <input\n type=\"checkbox\"\n v-model=\"modelValue\"\n :checked=\"isChecked\"\n :disabled=\"isDisabled\"\n />\n <span :class=\"ns.e('handel')\">\n <button\n type=\"button\"\n :class=\"[\n ns.e('button'),\n ns.is('checked', isChecked),\n ns.is('disabled', isDisabled || isLoading),\n ]\"\n >\n <template v-if=\"isLoading\">\n <x-icon\n ><Loader :class=\"[ns.is('loading-transition', isLoading)]\"\n /></x-icon>\n </template>\n <template v-else>\n <template v-if=\"centerIcon\">\n <x-icon v-if=\"checkedIcon && isChecked\"\n ><component :is=\"checkedIcon\"\n /></x-icon>\n <x-icon v-if=\"uncheckedIcon && !isChecked\"\n ><component :is=\"uncheckedIcon\"\n /></x-icon>\n </template>\n </template>\n </button>\n <span :class=\"[ns.e('inner'), transitionModule]\" v-if=\"!centerIcon\">\n <span :class=\"[ns.e('inner-checked'), ns.is('checked', isChecked)]\">\n <span v-if=\"checkedText\">{{ firstChatAt(checkedText) }}</span>\n <x-icon v-if=\"checkedIcon\"><component :is=\"checkedIcon\" /></x-icon>\n </span>\n <span\n :class=\"[ns.e('inner-unchecked'), ns.is('checked', !isChecked)]\"\n >\n <span v-if=\"uncheckedText\">{{ firstChatAt(uncheckedText) }}</span>\n <x-icon v-if=\"uncheckedIcon\"\n ><component :is=\"uncheckedIcon\"\n /></x-icon>\n </span>\n </span>\n </span>\n </div>\n </div>\n</template>\n<script>\nexport default { name: \"x-switch\" };\n</script>\n<script setup>\nimport { computed, ref } from \"vue\";\nimport { types } from \"@ui-library/utils\";\nimport { useNamespace } from \"@ui-library/hook\";\nimport { XIcon } from \"@ui-library/components\";\nimport { Loader } from \"song-ui-pro-icon\";\nconst ns = useNamespace(\"switch\");\n/** model */\nconst modelValue = defineModel();\n/** emit */\nconst emit = defineEmits([\"change\"]);\n/** props */\nconst props = defineProps({\n type: {\n type: String,\n default: \"primary\",\n },\n size: {\n type: String,\n default: \"default\",\n },\n checkedText: {\n type: String,\n default: \"\",\n },\n uncheckedText: {\n type: String,\n default: \"\",\n },\n checkedIcon: {\n type: [String, Object],\n default: \"\",\n },\n uncheckedIcon: {\n type: [String, Object],\n default: \"\",\n },\n checkedValue: {\n type: [Boolean, String, Number],\n default: true,\n },\n uncheckedValue: {\n type: [Boolean, String, Number],\n default: false,\n },\n centerIcon: Boolean,\n disabled: Boolean,\n beforeChange: [Function, Promise],\n transition: {\n type: String,\n default: \"scale\",\n },\n});\n\n/** 禁用 */\nconst isDisabled = computed(() => props.disabled);\n\n/** 首个文本 */\nconst firstChatAt = (val) => {\n const value = val.trim();\n return value ? value.charAt(0) : \"\";\n};\n\n/** isLoading */\nconst isLoading = ref(false);\n\n/** 图标动画模式 */\nconst transitionModule = computed(() => `transition-${props.transition}`);\n\n/** 选中 */\nconst isChecked = computed(() => modelValue.value === props.checkedValue);\n\n/** 点击事件 */\nconst handleSwitch = () => {\n if (isDisabled.value || isLoading.value) {\n return;\n }\n /** 不是异步 */\n const { beforeChange } = props;\n if (!beforeChange) {\n changeEvent();\n return;\n }\n /** 判断Promise对象 */\n const isPromise = types().isPromise(beforeChange());\n if (!isPromise) {\n return flase;\n }\n isLoading.value = true;\n beforeChange(props?.params)\n .then(() => {\n changeEvent();\n isLoading.value = false;\n })\n .catch(() => {\n isLoading.value = false;\n });\n};\n\nconst changeEvent = () => {\n const val = isChecked.value ? props.uncheckedValue : props.checkedValue;\n modelValue.value = val;\n emit(\"change\", val);\n};\n</script>\n"],"names":["useNamespace","_useModel","computed","ref","types"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6DA,MAAA,WAAA,GAAe,EAAE,IAAI,EAAE,UAAU,EAAE,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQnC,MAAM,EAAE,GAAGA,kBAAY,CAAC,QAAQ,CAAC,CAAA;AACjC;AACA,MAAM,UAAU,GAAGC,YAAW,sBAAC,CAAC,CAAA;AAChC;AACA,MAAM,IAAI,GAAG,MAAuB,CAAA;AACpC;AACA,MAAM,KAAK,GAAG,OAwCZ,CAAA;;AAEF;AACA,MAAM,UAAU,GAAGC,YAAQ,CAAC,MAAM,KAAK,CAAC,QAAQ,CAAC,CAAA;;AAEjD;AACA,MAAM,WAAW,GAAG,CAAC,GAAG,KAAK;AAC7B,EAAE,MAAM,KAAK,GAAG,GAAG,CAAC,IAAI,EAAE,CAAA;AAC1B,EAAE,OAAO,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,CAAA;AACrC,CAAC,CAAA;;AAED;AACA,MAAM,SAAS,GAAGC,OAAG,CAAC,KAAK,CAAC,CAAA;;AAE5B;AACA,MAAM,gBAAgB,GAAGD,YAAQ,CAAC,MAAM,CAAC,WAAW,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAA;;AAEzE;AACA,MAAM,SAAS,GAAGA,YAAQ,CAAC,MAAM,UAAU,CAAC,KAAK,KAAK,KAAK,CAAC,YAAY,CAAC,CAAA;;AAEzE;AACA,MAAM,YAAY,GAAG,MAAM;AAC3B,EAAE,IAAI,UAAU,CAAC,KAAK,IAAI,SAAS,CAAC,KAAK,EAAE;AAC3C,IAAI,OAAM;AACV,GAAE;AACF;AACA,EAAE,MAAM,EAAE,YAAY,EAAE,GAAG,KAAK,CAAA;AAChC,EAAE,IAAI,CAAC,YAAY,EAAE;AACrB,IAAI,WAAW,EAAE,CAAA;AACjB,IAAI,OAAM;AACV,GAAE;AACF;AACA,EAAE,MAAM,SAAS,GAAGE,WAAK,EAAE,CAAC,SAAS,CAAC,YAAY,EAAE,CAAC,CAAA;AACrD,EAAE,IAAI,CAAC,SAAS,EAAE;AAClB,IAAI,OAAO,KAAK,CAAA;AAChB,GAAE;AACF,EAAE,SAAS,CAAC,KAAK,GAAG,IAAI,CAAA;AACxB,EAAE,YAAY,CAAC,KAAK,EAAE,MAAM,CAAA;AAC5B,KAAK,IAAI,CAAC,MAAM;AAChB,MAAM,WAAW,EAAE,CAAA;AACnB,MAAM,SAAS,CAAC,KAAK,GAAG,KAAK,CAAA;AAC7B,KAAK,CAAA;AACL,KAAK,KAAK,CAAC,MAAM;AACjB,MAAM,SAAS,CAAC,KAAK,GAAG,KAAK,CAAA;AAC7B,KAAK,CAAC,CAAA;AACN,CAAC,CAAA;;AAED,MAAM,WAAW,GAAG,MAAM;AAC1B,EAAE,MAAM,GAAG,GAAG,SAAS,CAAC,KAAK,GAAG,KAAK,CAAC,cAAc,GAAG,KAAK,CAAC,YAAY,CAAA;AACzE,EAAE,UAAU,CAAC,KAAK,GAAG,GAAG,CAAA;AACxB,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAA;AACrB,CAAC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}