@oruga-ui/oruga-next
Version:
UI components for Vue.js and CSS framework agnostic
173 lines (172 loc) • 6.71 kB
JavaScript
/*! Oruga v0.11.0 | MIT License | github.com/oruga-ui/oruga */
import { defineComponent, mergeModels, useTemplateRef, useSlots, useId, useModel, computed, useAttrs, createElementBlock, openBlock, normalizeClass, unref, withDirectives, createCommentVNode, createElementVNode, mergeProps, vModelCheckbox, renderSlot, createTextVNode, toDisplayString } from "vue";
import { g as getDefault, b as registerComponent } from "./config-Dl7tu_Ly.mjs";
import { d as defineClasses } from "./defineClasses-CWB9NuS-.mjs";
import { u as useInputHandler } from "./useInputHandler-Cv7NmM5J.mjs";
import { i as injectField } from "./fieldInjection-DJwnFcxS.mjs";
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__ */ defineComponent({
...{
isOruga: true,
name: "OSwitch",
configField: "switch",
inheritAttrs: false
},
__name: "Switch",
props: /* @__PURE__ */ mergeModels({
override: { type: Boolean, default: void 0 },
modelValue: { default: void 0 },
variant: { default: () => getDefault("switch.variant") },
passiveVariant: { default: () => getDefault("switch.passiveVariant") },
size: { default: () => 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: () => getDefault("switch.rounded", true) },
position: { default: () => getDefault("switch.right", "position") },
autocomplete: { default: () => getDefault("switch.autocomplete", "off") },
id: { default: () => useId() },
useHtml5Validation: { type: Boolean, default: () => getDefault("useHtml5Validation", true) },
customValidity: {},
rootClass: {},
sizeClass: {},
variantClass: {},
passiveVariantClass: {},
positionClass: {},
disabledClass: {},
roundedClass: {},
checkedClass: {},
inputClass: {},
labelClass: {}
}, {
"modelValue": { default: void 0 },
"modelModifiers": {}
}),
emits: /* @__PURE__ */ 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 = useTemplateRef("inputElement");
const { checkHtml5Validity, onBlur, onFocus, onInvalid, setFocus } = useInputHandler(
inputRef,
emits,
props
);
const { parentField } = injectField();
const labelId = !!parentField.value || !!props.label || !!useSlots().default ? ((_a = parentField.value) == null ? void 0 : _a.labelId) || useId() : void 0;
if (!props.label && props.id) (_b = parentField.value) == null ? void 0 : _b.setInputId(props.id);
const vmodel = useModel(__props, "modelValue");
const isChecked = 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 = useAttrs();
const inputBind = computed(() => {
var _a2;
return {
...(_a2 = parentField.value) == null ? void 0 : _a2.inputAttrs,
...attrs
};
});
const rootClasses = defineClasses(
["rootClass", "o-switch"],
[
"sizeClass",
"o-switch--",
computed(() => props.size),
computed(() => !!props.size)
],
[
"variantClass",
"o-switch--",
computed(() => props.variant),
computed(() => !!props.variant)
],
[
"passiveVariantClass",
"o-switch--",
computed(() => props.passiveVariant + "-passive"),
computed(() => !!props.passiveVariant)
],
[
"positionClass",
"o-switch--",
computed(() => props.position),
computed(() => !!props.position)
],
[
"disabledClass",
"o-switch--disabled",
null,
computed(() => props.disabled)
],
["roundedClass", "o-switch--rounded", null, computed(() => props.rounded)],
["checkedClass", "o-switch--checked", null, isChecked]
);
const inputClasses = defineClasses(["inputClass", "o-switch__input"]);
const labelClasses = defineClasses(["labelClass", "o-switch__label"]);
__expose({ checkHtml5Validity, focus: setFocus, value: vmodel });
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
"data-oruga": "switch",
class: normalizeClass(unref(rootClasses))
}, [
withDirectives(createElementVNode("input", 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: 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": unref(labelId),
onBlur: _cache[1] || (_cache[1] = //@ts-ignore
(...args) => unref(onBlur) && unref(onBlur)(...args)),
onFocus: _cache[2] || (_cache[2] = //@ts-ignore
(...args) => unref(onFocus) && unref(onFocus)(...args)),
onInvalid: _cache[3] || (_cache[3] = //@ts-ignore
(...args) => unref(onInvalid) && unref(onInvalid)(...args)),
onChange: onInput
}), null, 16, _hoisted_1), [
[vModelCheckbox, vmodel.value]
]),
_ctx.label || _ctx.$slots.default ? (openBlock(), createElementBlock("label", {
key: 0,
id: unref(labelId),
for: _ctx.id,
class: normalizeClass(unref(labelClasses))
}, [
renderSlot(_ctx.$slots, "default", {}, () => [
createTextVNode(toDisplayString(_ctx.label), 1)
])
], 10, _hoisted_2)) : createCommentVNode("", true)
], 2);
};
}
});
const index = {
install(app) {
registerComponent(app, _sfc_main);
}
};
export {
_sfc_main as OSwitch,
index as default
};
//# sourceMappingURL=switch.mjs.map