song-ui-u
Version:
vue3 + js的PC前端组件库
281 lines (265 loc) • 10 kB
JavaScript
import { mergeModels, useModel, computed, ref, openBlock, createElementBlock, normalizeClass, createElementVNode, withDirectives, vModelCheckbox, createBlock, withCtx, createVNode, Fragment, resolveDynamicComponent, createCommentVNode, toDisplayString } from 'vue';
import { types } from '../../../utils/types.mjs';
import { Loader } from 'song-ui-pro-icon';
import { useNamespace } from '../../../hook/use-namespace/index.mjs';
import '../../../hook/use-zindex/index.mjs';
import '../../button/index.mjs';
import '../../buttonGroup/index.mjs';
import { XIcon } from '../../icon/index.mjs';
import '../../input/index.mjs';
import '../../textarea/index.mjs';
import '../../row/index.mjs';
import '../../col/index.mjs';
import '../../container/index.mjs';
import '../../checkbox/index.mjs';
import '../index.mjs';
import '../../form/index.mjs';
import '../../message/index.mjs';
import '../../mask/src/mask.mjs';
import '../../modal/index.mjs';
import '../../messageBox/index.mjs';
import '../../drawer/index.mjs';
import '../../badge/index.mjs';
import '../../space/index.mjs';
import '../../image/index.mjs';
import '../../radio/index.mjs';
import '../../divider/index.mjs';
import '../../chat/index.mjs';
import '../../progress/index.mjs';
import '../../upload/index.mjs';
import '../../vTree/index.mjs';
import '../../table/index.mjs';
import '../../tabs/index.mjs';
import '../../menu/index.mjs';
import '../../steps/index.mjs';
import '../../header/index.mjs';
import '../../breadcrumble/index.mjs';
import '../../datePicker/index.mjs';
import '../../tooltip/index.mjs';
import '../../popover/index.mjs';
import '../../timePicker/index.mjs';
import '../../select/index.mjs';
import '../../collapse/index.mjs';
import '../../card/index.mjs';
import '../../timeline/index.mjs';
import '../../tag/index.mjs';
import '../../result/index.mjs';
import '../../sender/index.mjs';
import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.mjs';
const __default__ = { name: "x-switch" };
const _sfc_main = /*#__PURE__*/Object.assign(__default__, {
props: /*#__PURE__*/mergeModels({
type: {
type: String,
default: "primary",
},
size: {
type: String,
default: "default",
},
checkedText: {
type: String,
default: "",
},
uncheckedText: {
type: String,
default: "",
},
checkedIcon: {
type: [String, Object],
default: "",
},
uncheckedIcon: {
type: [String, Object],
default: "",
},
checkedValue: {
type: [Boolean, String, Number],
default: true,
},
uncheckedValue: {
type: [Boolean, String, Number],
default: false,
},
centerIcon: Boolean,
disabled: Boolean,
beforeChange: [Function, Promise],
transition: {
type: String,
default: "scale",
},
}, {
"modelValue": {},
"modelModifiers": {},
}),
emits: /*#__PURE__*/mergeModels(["change"], ["update:modelValue"]),
setup(__props, { expose: __expose, emit: __emit }) {
__expose();
const ns = useNamespace("switch");
/** model */
const modelValue = useModel(__props, "modelValue");
/** emit */
const emit = __emit;
/** props */
const props = __props;
/** 禁用 */
const isDisabled = computed(() => props.disabled);
/** 首个文本 */
const firstChatAt = (val) => {
const value = val.trim();
return value ? value.charAt(0) : "";
};
/** isLoading */
const isLoading = ref(false);
/** 图标动画模式 */
const transitionModule = computed(() => `transition-${props.transition}`);
/** 选中 */
const isChecked = computed(() => modelValue.value === props.checkedValue);
/** 点击事件 */
const handleSwitch = () => {
if (isDisabled.value || isLoading.value) {
return;
}
/** 不是异步 */
const { beforeChange } = props;
if (!beforeChange) {
changeEvent();
return;
}
/** 判断Promise对象 */
const isPromise = types().isPromise(beforeChange());
if (!isPromise) {
return flase;
}
isLoading.value = true;
beforeChange(props?.params)
.then(() => {
changeEvent();
isLoading.value = false;
})
.catch(() => {
isLoading.value = false;
});
};
const changeEvent = () => {
const val = isChecked.value ? props.uncheckedValue : props.checkedValue;
modelValue.value = val;
emit("change", val);
};
const __returned__ = { ns, modelValue, emit, props, isDisabled, firstChatAt, isLoading, transitionModule, isChecked, handleSwitch, changeEvent, computed, ref, get types() { return types }, get useNamespace() { return useNamespace }, get XIcon() { return XIcon }, get Loader() { return Loader } };
Object.defineProperty(__returned__, '__isScriptSetup', { enumerable: false, value: true });
return __returned__
}
});
const _hoisted_1 = ["checked", "disabled"];
const _hoisted_2 = { key: 0 };
const _hoisted_3 = { key: 0 };
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return (openBlock(), createElementBlock("div", {
class: normalizeClass([$setup.ns.b()]),
onClick: $setup.handleSwitch
}, [
createElementVNode("div", {
class: normalizeClass([
$setup.ns.e('input'),
$setup.ns.m('size', $props.size),
$setup.ns.m($props.type),
$setup.ns.is('checked', $setup.isChecked),
$setup.ns.is('disabled', $setup.isDisabled || $setup.isLoading),
])
}, [
withDirectives(createElementVNode("input", {
type: "checkbox",
"onUpdate:modelValue": _cache[0] || (_cache[0] = $event => (($setup.modelValue) = $event)),
checked: $setup.isChecked,
disabled: $setup.isDisabled
}, null, 8 /* PROPS */, _hoisted_1), [
[vModelCheckbox, $setup.modelValue]
]),
createElementVNode("span", {
class: normalizeClass($setup.ns.e('handel'))
}, [
createElementVNode("button", {
type: "button",
class: normalizeClass([
$setup.ns.e('button'),
$setup.ns.is('checked', $setup.isChecked),
$setup.ns.is('disabled', $setup.isDisabled || $setup.isLoading),
])
}, [
($setup.isLoading)
? (openBlock(), createBlock($setup["XIcon"], { key: 0 }, {
default: withCtx(() => [
createVNode($setup["Loader"], {
class: normalizeClass([$setup.ns.is('loading-transition', $setup.isLoading)])
}, null, 8 /* PROPS */, ["class"])
]),
_: 1 /* STABLE */
}))
: (openBlock(), createElementBlock(Fragment, { key: 1 }, [
($props.centerIcon)
? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
($props.checkedIcon && $setup.isChecked)
? (openBlock(), createBlock($setup["XIcon"], { key: 0 }, {
default: withCtx(() => [
(openBlock(), createBlock(resolveDynamicComponent($props.checkedIcon)))
]),
_: 1 /* STABLE */
}))
: createCommentVNode("v-if", true),
($props.uncheckedIcon && !$setup.isChecked)
? (openBlock(), createBlock($setup["XIcon"], { key: 1 }, {
default: withCtx(() => [
(openBlock(), createBlock(resolveDynamicComponent($props.uncheckedIcon)))
]),
_: 1 /* STABLE */
}))
: createCommentVNode("v-if", true)
], 64 /* STABLE_FRAGMENT */))
: createCommentVNode("v-if", true)
], 64 /* STABLE_FRAGMENT */))
], 2 /* CLASS */),
(!$props.centerIcon)
? (openBlock(), createElementBlock("span", {
key: 0,
class: normalizeClass([$setup.ns.e('inner'), $setup.transitionModule])
}, [
createElementVNode("span", {
class: normalizeClass([$setup.ns.e('inner-checked'), $setup.ns.is('checked', $setup.isChecked)])
}, [
($props.checkedText)
? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString($setup.firstChatAt($props.checkedText)), 1 /* TEXT */))
: createCommentVNode("v-if", true),
($props.checkedIcon)
? (openBlock(), createBlock($setup["XIcon"], { key: 1 }, {
default: withCtx(() => [
(openBlock(), createBlock(resolveDynamicComponent($props.checkedIcon)))
]),
_: 1 /* STABLE */
}))
: createCommentVNode("v-if", true)
], 2 /* CLASS */),
createElementVNode("span", {
class: normalizeClass([$setup.ns.e('inner-unchecked'), $setup.ns.is('checked', !$setup.isChecked)])
}, [
($props.uncheckedText)
? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString($setup.firstChatAt($props.uncheckedText)), 1 /* TEXT */))
: createCommentVNode("v-if", true),
($props.uncheckedIcon)
? (openBlock(), createBlock($setup["XIcon"], { key: 1 }, {
default: withCtx(() => [
(openBlock(), createBlock(resolveDynamicComponent($props.uncheckedIcon)))
]),
_: 1 /* STABLE */
}))
: createCommentVNode("v-if", true)
], 2 /* CLASS */)
], 2 /* CLASS */))
: createCommentVNode("v-if", true)
], 2 /* CLASS */)
], 2 /* CLASS */)
], 2 /* CLASS */))
}
var Switch = /*#__PURE__*/_export_sfc(_sfc_main, [['render',_sfc_render],['__file',"E:\\code\\my-code\\song-ui-ultra\\packages\\components\\switch\\src\\index.vue"]]);
export { Switch as default };
//# sourceMappingURL=index.vue.mjs.map