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