hongluan-ui
Version:
Hongluan Component Library for Vue 3
187 lines (184 loc) • 6.9 kB
JavaScript
import { defineComponent, getCurrentInstance, inject, ref, watch, computed, nextTick, onMounted, resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, withModifiers, createElementVNode, withKeys, createBlock, renderSlot } from 'vue';
import { isPromise } from '@vue/shared';
import '../../../tokens/index.mjs';
import '../../../hooks/index.mjs';
import '../../../utils/index.mjs';
import { HlSpinner } from '../../spinner/index.mjs';
import '../../../constants/index.mjs';
import { switchProps } from './switch2.mjs';
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
import { formItemContextKey, FormItemEvents } from '../../../tokens/form.mjs';
import { useDeprecated } from '../../../hooks/use-deprecated/index.mjs';
import { useConsistentProp } from '../../../hooks/use-consistent-prop/index.mjs';
import { useFormItemInputId } from '../../../hooks/use-form-item/index.mjs';
import { UPDATE_MODEL_EVENT, CHANGE_EVENT, INPUT_EVENT } from '../../../constants/event.mjs';
import { debugWarn, throwError } from '../../../utils/error.mjs';
import { isBoolean } from '../../../utils/types.mjs';
import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
const _sfc_main = defineComponent({
name: "Switch",
components: { Spinner: HlSpinner },
props: switchProps,
emits: ["update:modelValue", "change", "input"],
setup(props, { emit }) {
const vm = getCurrentInstance();
const formItem = inject(formItemContextKey, {});
const isModelValue = ref(props.modelValue !== false);
const input = ref();
const core = ref();
const scope = "Switch";
watch(() => props.modelValue, () => {
isModelValue.value = true;
});
watch(() => props.value, () => {
isModelValue.value = false;
});
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"
}, computed(() => {
var _a;
return !!((_a = vm.vnode.props) == null ? void 0 : _a.value);
}));
const actualValue = computed(() => {
return isModelValue.value ? props.modelValue : props.value;
});
const checked = computed(() => actualValue.value === props.activeValue);
const { size: switchSize, disabled: tempDisabled } = useConsistentProp();
const { inputId } = useFormItemInputId(props, {
formItemContext: formItem
});
if (![props.activeValue, props.inactiveValue].includes(actualValue.value)) {
emit(UPDATE_MODEL_EVENT, props.inactiveValue);
emit(CHANGE_EVENT, props.inactiveValue);
emit(INPUT_EVENT, props.inactiveValue);
}
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, FormItemEvents.change).catch((err) => debugWarn(err));
}
});
const switchDisabled = computed(() => {
return tempDisabled.value || props.loading;
});
const handleChange = () => {
const val = checked.value ? props.inactiveValue : props.activeValue;
emit(UPDATE_MODEL_EVENT, val);
emit(CHANGE_EVENT, val);
emit(INPUT_EVENT, val);
nextTick(() => {
input.value.checked = checked.value;
});
};
const switchValue = () => {
if (switchDisabled.value)
return;
const { beforeChange } = props;
if (!beforeChange) {
handleChange();
return;
}
const shouldChange = beforeChange();
const isExpectType = [isPromise(shouldChange), isBoolean(shouldChange)].some((i) => i);
if (!isExpectType) {
throwError(scope, "beforeChange must return type `Promise<boolean>` or `boolean`");
}
if (isPromise(shouldChange)) {
shouldChange.then((result) => {
if (result) {
handleChange();
}
}).catch((e) => {
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);
};
onMounted(() => {
if (props.activeColor || props.inactiveColor || props.borderColor) {
setBackgroundColor();
}
input.value.checked = checked.value;
});
const { namespace } = 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 = resolveComponent("spinner");
return openBlock(), createElementBlock("div", {
class: normalizeClass([
_ctx.namespace,
_ctx.switchDisabled ? "is-disabled" : "",
_ctx.checked ? "is-checked" : "",
_ctx.type ? _ctx.type : "",
_ctx.switchSize ? _ctx.switchSize : ""
]),
style: normalizeStyle([
_ctx.width ? `--switch-width: ${_ctx.width}` : ""
]),
onClick: withModifiers(_ctx.switchValue, ["prevent"])
}, [
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: withKeys(_ctx.switchValue, ["enter"])
}, null, 40, ["id", "aria-checked", "aria-disabled", "aria-label", "name", "true-value", "false-value", "disabled", "tabindex", "onChange", "onKeydown"]),
createElementVNode("em", {
ref: "core",
class: "core"
}, null, 512),
_ctx.loading && !_ctx.$slots.icon ? (openBlock(), createBlock(_component_spinner, { key: 0 })) : renderSlot(_ctx.$slots, "icon", {
key: 1,
checked: _ctx.checked
})
], 14, ["onClick"]);
}
var Switch = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export { Switch as default };
//# sourceMappingURL=switch.mjs.map