@oruga-ui/oruga-next
Version:
UI components for Vue.js and CSS framework agnostic
173 lines (172 loc) • 6.83 kB
JavaScript
"use strict";
/*! Oruga v0.11.0 | MIT License | github.com/oruga-ui/oruga */
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const config = require("./config-eYBvpFOZ.cjs");
const defineClasses = require("./defineClasses-Cqhbv-UT.cjs");
const useInputHandler = require("./useInputHandler-DDJU6Lju.cjs");
const fieldInjection = require("./fieldInjection-aGL6GpMR.cjs");
const _hoisted_1 = ["id", "name", "value", "true-value", "false-value", "required", "disabled", "autocomplete", "aria-checked", "aria-labelledby"];
const _hoisted_2 = ["id", "for"];
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
...{
isOruga: true,
name: "OSwitch",
configField: "switch",
inheritAttrs: false
},
__name: "Switch",
props: /* @__PURE__ */ vue.mergeModels({
override: { type: Boolean, default: void 0 },
modelValue: { default: void 0 },
variant: { default: () => config.getDefault("switch.variant") },
passiveVariant: { default: () => config.getDefault("switch.passiveVariant") },
size: { default: () => config.getDefault("switch.size") },
label: { default: void 0 },
nativeValue: { default: void 0 },
disabled: { type: Boolean, default: false },
required: { type: Boolean, default: false },
name: { default: void 0 },
trueValue: { default: void 0 },
falseValue: { default: void 0 },
rounded: { type: Boolean, default: () => config.getDefault("switch.rounded", true) },
position: { default: () => config.getDefault("switch.right", "position") },
autocomplete: { default: () => config.getDefault("switch.autocomplete", "off") },
id: { default: () => vue.useId() },
useHtml5Validation: { type: Boolean, default: () => config.getDefault("useHtml5Validation", true) },
customValidity: {},
rootClass: {},
sizeClass: {},
variantClass: {},
passiveVariantClass: {},
positionClass: {},
disabledClass: {},
roundedClass: {},
checkedClass: {},
inputClass: {},
labelClass: {}
}, {
"modelValue": { default: void 0 },
"modelModifiers": {}
}),
emits: /* @__PURE__ */ vue.mergeModels(["update:model-value", "input", "focus", "blur", "invalid"], ["update:modelValue"]),
setup(__props, { expose: __expose, emit: __emit }) {
var _a, _b;
const props = __props;
const emits = __emit;
const inputRef = vue.useTemplateRef("inputElement");
const { checkHtml5Validity, onBlur, onFocus, onInvalid, setFocus } = useInputHandler.useInputHandler(
inputRef,
emits,
props
);
const { parentField } = fieldInjection.injectField();
const labelId = !!parentField.value || !!props.label || !!vue.useSlots().default ? ((_a = parentField.value) == null ? void 0 : _a.labelId) || vue.useId() : void 0;
if (!props.label && props.id) (_b = parentField.value) == null ? void 0 : _b.setInputId(props.id);
const vmodel = vue.useModel(__props, "modelValue");
const isChecked = vue.computed(
() => vmodel.value === (props.trueValue ?? true) || Array.isArray(vmodel.value) && vmodel.value.includes(props.nativeValue)
);
function onInput(event) {
emits("input", vmodel.value, event);
}
const attrs = vue.useAttrs();
const inputBind = vue.computed(() => {
var _a2;
return {
...(_a2 = parentField.value) == null ? void 0 : _a2.inputAttrs,
...attrs
};
});
const rootClasses = defineClasses.defineClasses(
["rootClass", "o-switch"],
[
"sizeClass",
"o-switch--",
vue.computed(() => props.size),
vue.computed(() => !!props.size)
],
[
"variantClass",
"o-switch--",
vue.computed(() => props.variant),
vue.computed(() => !!props.variant)
],
[
"passiveVariantClass",
"o-switch--",
vue.computed(() => props.passiveVariant + "-passive"),
vue.computed(() => !!props.passiveVariant)
],
[
"positionClass",
"o-switch--",
vue.computed(() => props.position),
vue.computed(() => !!props.position)
],
[
"disabledClass",
"o-switch--disabled",
null,
vue.computed(() => props.disabled)
],
["roundedClass", "o-switch--rounded", null, vue.computed(() => props.rounded)],
["checkedClass", "o-switch--checked", null, isChecked]
);
const inputClasses = defineClasses.defineClasses(["inputClass", "o-switch__input"]);
const labelClasses = defineClasses.defineClasses(["labelClass", "o-switch__label"]);
__expose({ checkHtml5Validity, focus: setFocus, value: vmodel });
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", {
"data-oruga": "switch",
class: vue.normalizeClass(vue.unref(rootClasses))
}, [
vue.withDirectives(vue.createElementVNode("input", vue.mergeProps(inputBind.value, {
id: _ctx.id,
ref: "inputElement",
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vmodel.value = $event),
type: "checkbox",
role: "switch",
"data-oruga-input": "switch",
class: vue.unref(inputClasses),
name: _ctx.name,
value: _ctx.nativeValue,
"true-value": _ctx.trueValue ?? true,
"false-value": _ctx.falseValue ?? false,
required: _ctx.required,
disabled: _ctx.disabled,
autocomplete: _ctx.autocomplete,
"aria-checked": isChecked.value,
"aria-labelledby": vue.unref(labelId),
onBlur: _cache[1] || (_cache[1] = //@ts-ignore
(...args) => vue.unref(onBlur) && vue.unref(onBlur)(...args)),
onFocus: _cache[2] || (_cache[2] = //@ts-ignore
(...args) => vue.unref(onFocus) && vue.unref(onFocus)(...args)),
onInvalid: _cache[3] || (_cache[3] = //@ts-ignore
(...args) => vue.unref(onInvalid) && vue.unref(onInvalid)(...args)),
onChange: onInput
}), null, 16, _hoisted_1), [
[vue.vModelCheckbox, vmodel.value]
]),
_ctx.label || _ctx.$slots.default ? (vue.openBlock(), vue.createElementBlock("label", {
key: 0,
id: vue.unref(labelId),
for: _ctx.id,
class: vue.normalizeClass(vue.unref(labelClasses))
}, [
vue.renderSlot(_ctx.$slots, "default", {}, () => [
vue.createTextVNode(vue.toDisplayString(_ctx.label), 1)
])
], 10, _hoisted_2)) : vue.createCommentVNode("", true)
], 2);
};
}
});
const index = {
install(app) {
config.registerComponent(app, _sfc_main);
}
};
exports.OSwitch = _sfc_main;
exports.default = index;
//# sourceMappingURL=switch.cjs.map