hongluan-ui
Version:
Hongluan Component Library for Vue 3
191 lines (186 loc) • 6.87 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var shared = require('@vue/shared');
require('../../../tokens/index.js');
require('../../../hooks/index.js');
require('../../../utils/index.js');
var index = require('../../spinner/index.js');
require('../../../constants/index.js');
var _switch = require('./switch2.js');
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
var form = require('../../../tokens/form.js');
var index$1 = require('../../../hooks/use-deprecated/index.js');
var index$2 = require('../../../hooks/use-consistent-prop/index.js');
var index$3 = require('../../../hooks/use-form-item/index.js');
var event = require('../../../constants/event.js');
var error = require('../../../utils/error.js');
var types = require('../../../utils/types.js');
var index$4 = require('../../../hooks/use-namespace/index.js');
const _sfc_main = vue.defineComponent({
name: "Switch",
components: { Spinner: index.HlSpinner },
props: _switch.switchProps,
emits: ["update:modelValue", "change", "input"],
setup(props, { emit }) {
const vm = vue.getCurrentInstance();
const formItem = vue.inject(form.formItemContextKey, {});
const isModelValue = vue.ref(props.modelValue !== false);
const input = vue.ref();
const core = vue.ref();
const scope = "Switch";
vue.watch(() => props.modelValue, () => {
isModelValue.value = true;
});
vue.watch(() => props.value, () => {
isModelValue.value = false;
});
index$1.useDeprecated({
from: '"value"',
replacement: '"model-value" or "v-model"',
scope: "Switch",
version: "2.5.0",
ref: "http://hl.front.etcc.group/2x/#/zh-CN/component/switch#attributes",
type: "Attribute"
}, vue.computed(() => {
var _a;
return !!((_a = vm.vnode.props) == null ? void 0 : _a.value);
}));
const actualValue = vue.computed(() => {
return isModelValue.value ? props.modelValue : props.value;
});
const checked = vue.computed(() => actualValue.value === props.activeValue);
const { size: switchSize, disabled: tempDisabled } = index$2.useConsistentProp();
const { inputId } = index$3.useFormItemInputId(props, {
formItemContext: formItem
});
if (![props.activeValue, props.inactiveValue].includes(actualValue.value)) {
emit(event.UPDATE_MODEL_EVENT, props.inactiveValue);
emit(event.CHANGE_EVENT, props.inactiveValue);
emit(event.INPUT_EVENT, props.inactiveValue);
}
vue.watch(checked, () => {
var _a;
input.value.checked = checked.value;
if (props.activeColor || props.inactiveColor) {
setBackgroundColor();
}
if (props.validateEvent) {
(_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, form.FormItemEvents.change).catch((err) => error.debugWarn(err));
}
});
const switchDisabled = vue.computed(() => {
return tempDisabled.value || props.loading;
});
const handleChange = () => {
const val = checked.value ? props.inactiveValue : props.activeValue;
emit(event.UPDATE_MODEL_EVENT, val);
emit(event.CHANGE_EVENT, val);
emit(event.INPUT_EVENT, val);
vue.nextTick(() => {
input.value.checked = checked.value;
});
};
const switchValue = () => {
if (switchDisabled.value)
return;
const { beforeChange } = props;
if (!beforeChange) {
handleChange();
return;
}
const shouldChange = beforeChange();
const isExpectType = [shared.isPromise(shouldChange), types.isBoolean(shouldChange)].some((i) => i);
if (!isExpectType) {
error.throwError(scope, "beforeChange must return type `Promise<boolean>` or `boolean`");
}
if (shared.isPromise(shouldChange)) {
shouldChange.then((result) => {
if (result) {
handleChange();
}
}).catch((e) => {
error.debugWarn(scope, `some error occurred: ${e}`);
});
} else if (shouldChange) {
handleChange();
}
};
const setBackgroundColor = () => {
const newColor = checked.value ? props.activeColor : props.inactiveColor;
const coreEl = core.value;
if (props.borderColor)
coreEl.style.borderColor = props.borderColor;
else if (!props.borderColor)
coreEl.style.borderColor = newColor;
coreEl.style.backgroundColor = newColor;
};
const focus = () => {
var _a, _b;
(_b = (_a = input.value) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
};
vue.onMounted(() => {
if (props.activeColor || props.inactiveColor || props.borderColor) {
setBackgroundColor();
}
input.value.checked = checked.value;
});
const { namespace } = index$4.useNamespace("switch");
return {
namespace,
input,
inputId,
switchSize,
core,
switchDisabled,
checked,
handleChange,
switchValue,
focus
};
}
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_spinner = vue.resolveComponent("spinner");
return vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass([
_ctx.namespace,
_ctx.switchDisabled ? "is-disabled" : "",
_ctx.checked ? "is-checked" : "",
_ctx.type ? _ctx.type : "",
_ctx.switchSize ? _ctx.switchSize : ""
]),
style: vue.normalizeStyle([
_ctx.width ? `--switch-width: ${_ctx.width}` : ""
]),
onClick: vue.withModifiers(_ctx.switchValue, ["prevent"])
}, [
vue.createElementVNode("input", {
id: _ctx.inputId,
ref: "input",
type: "checkbox",
role: "switch",
"aria-checked": _ctx.checked,
"aria-disabled": _ctx.switchDisabled,
"aria-label": _ctx.label || _ctx.ariaLabel,
name: _ctx.name,
"true-value": _ctx.activeValue,
"false-value": _ctx.inactiveValue,
disabled: _ctx.switchDisabled,
tabindex: _ctx.tabindex,
onChange: _ctx.handleChange,
onKeydown: vue.withKeys(_ctx.switchValue, ["enter"])
}, null, 40, ["id", "aria-checked", "aria-disabled", "aria-label", "name", "true-value", "false-value", "disabled", "tabindex", "onChange", "onKeydown"]),
vue.createElementVNode("em", {
ref: "core",
class: "core"
}, null, 512),
_ctx.loading && !_ctx.$slots.icon ? (vue.openBlock(), vue.createBlock(_component_spinner, { key: 0 })) : vue.renderSlot(_ctx.$slots, "icon", {
key: 1,
checked: _ctx.checked
})
], 14, ["onClick"]);
}
var Switch = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render]]);
exports["default"] = Switch;
//# sourceMappingURL=switch.js.map