@oruga-ui/oruga-next/dist/esm/switch.mjs.map

UI components for Vue.js and CSS framework agnostic

{"version":3,"file":"switch.mjs","sources":["../../src/components/switch/Switch.vue","../../src/components/switch/index.ts"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T\">\nimport { computed, useAttrs, useId, useSlots, useTemplateRef } from \"vue\";\n\nimport { getDefault } from \"@/utils/config\";\nimport { defineClasses, useInputHandler } from \"@/composables\";\n\nimport { injectField } from \"../field/fieldInjection\";\n\nimport type { SwitchProps } from \"./props\";\n\n/**\n * Switch between two opposing states.\n * @displayName Switch\n * @style _switch.scss\n */\ndefineOptions({\n    isOruga: true,\n    name: \"OSwitch\",\n    configField: \"switch\",\n    inheritAttrs: false,\n});\n\nconst props = withDefaults(defineProps<SwitchProps<T>>(), {\n    override: undefined,\n    modelValue: undefined,\n    id: () => useId(),\n    label: undefined,\n    variant: () => getDefault(\"switch.variant\"),\n    passiveVariant: () => getDefault(\"switch.passiveVariant\"),\n    size: () => getDefault(\"switch.size\"),\n    position: () => getDefault(\"switch.right\", \"position\"),\n    rounded: () => getDefault(\"switch.rounded\", true),\n    required: false,\n    disabled: false,\n    name: undefined,\n    nativeValue: undefined,\n    trueValue: undefined,\n    falseValue: undefined,\n    autocomplete: () => getDefault(\"switch.autocomplete\", \"off\"),\n    useHtml5Validation: () => getDefault(\"useHtml5Validation\", true),\n});\n\nconst emits = defineEmits<{\n    /**\n     * modelValue prop two-way binding\n     * @param value {T} updated modelValue prop\n     */\n    \"update:model-value\": [value: T];\n    /**\n     * on input change event\n     * @param value {T} input value\n     * @param event {Event} native event\n     */\n    input: [value: T, event: Event];\n    /**\n     * on input focus event\n     * @param event {Event} native event\n     */\n    focus: [event: Event];\n    /**\n     * on input blur event\n     * @param event {Event} native event\n     */\n    blur: [event: Event];\n    /**\n     * on input invalid event\n     * @param event {Event} native event\n     */\n    invalid: [event: Event];\n}>();\n\nconst inputRef = useTemplateRef(\"inputElement\");\n\n// use form input functionalities\nconst { checkHtml5Validity, onBlur, onFocus, onInvalid, setFocus } = useInputHandler(\n    inputRef,\n    emits,\n    props,\n);\n\n// inject parent field component if used inside one\nconst { parentField } = injectField();\n\n// set field labelId or create a unique label id if a label is given\nconst labelId =\n    !!parentField.value || !!props.label || !!useSlots().default\n        ? parentField.value?.labelId || useId()\n        : undefined;\n\n// if no `label` is given and `id` is given set as `for` property on o-field wrapper\nif (!props.label && props.id) parentField.value?.setInputId(props.id);\n\nconst vmodel = defineModel<T>({ default: undefined });\n\nconst isChecked = computed(\n    () =>\n        vmodel.value === (props.trueValue ?? true) ||\n        (Array.isArray(vmodel.value) &&\n            vmodel.value.includes(props.nativeValue)),\n);\n\nfunction onInput(event: Event): void {\n    emits(\"input\", vmodel.value, event);\n}\n\n// --- Computed Component Classes ---\n\nconst attrs = useAttrs();\n\nconst inputBind = computed(() => ({\n    ...parentField.value?.inputAttrs,\n    ...attrs,\n}));\n\nconst rootClasses = defineClasses(\n    [\"rootClass\", \"o-switch\"],\n    [\n        \"sizeClass\",\n        \"o-switch--\",\n        computed(() => props.size),\n        computed(() => !!props.size),\n    ],\n    [\n        \"variantClass\",\n        \"o-switch--\",\n        computed(() => props.variant),\n        computed(() => !!props.variant),\n    ],\n    [\n        \"passiveVariantClass\",\n        \"o-switch--\",\n        computed(() => props.passiveVariant + \"-passive\"),\n        computed(() => !!props.passiveVariant),\n    ],\n    [\n        \"positionClass\",\n        \"o-switch--\",\n        computed(() => props.position),\n        computed(() => !!props.position),\n    ],\n    [\n        \"disabledClass\",\n        \"o-switch--disabled\",\n        null,\n        computed(() => props.disabled),\n    ],\n    [\"roundedClass\", \"o-switch--rounded\", null, computed(() => props.rounded)],\n    [\"checkedClass\", \"o-switch--checked\", null, isChecked],\n);\n\nconst inputClasses = defineClasses([\"inputClass\", \"o-switch__input\"]);\n\nconst labelClasses = defineClasses([\"labelClass\", \"o-switch__label\"]);\n\n// --- Expose Public Functionalities ---\n\n/** expose functionalities for programmatic usage */\ndefineExpose({ checkHtml5Validity, focus: setFocus, value: vmodel });\n</script>\n\n<template>\n    <div data-oruga=\"switch\" :class=\"rootClasses\">\n        <input\n            v-bind=\"inputBind\"\n            :id=\"id\"\n            ref=\"inputElement\"\n            v-model=\"vmodel\"\n            type=\"checkbox\"\n            role=\"switch\"\n            data-oruga-input=\"switch\"\n            :class=\"inputClasses\"\n            :name=\"name\"\n            :value=\"nativeValue\"\n            :true-value=\"trueValue ?? true\"\n            :false-value=\"falseValue ?? false\"\n            :required=\"required\"\n            :disabled=\"disabled\"\n            :autocomplete=\"autocomplete\"\n            :aria-checked=\"isChecked\"\n            :aria-labelledby=\"labelId\"\n            @blur=\"onBlur\"\n            @focus=\"onFocus\"\n            @invalid=\"onInvalid\"\n            @change=\"onInput\" />\n\n        <label\n            v-if=\"label || $slots.default\"\n            :id=\"labelId\"\n            :for=\"id\"\n            :class=\"labelClasses\">\n            <!--\n                @slot Override the label, default is label prop \n            -->\n            <slot>{{ label }}</slot>\n        </label>\n    </div>\n</template>\n","import type { App, Plugin } from \"vue\";\n\nimport Switch from \"./Switch.vue\";\n\nimport { registerComponent } from \"@/utils/plugins\";\n\n/** export switch plugin */\nexport default {\n    install(app: App) {\n        registerComponent(app, Switch);\n    },\n} as Plugin;\n\n/** export switch components */\nexport { Switch as OSwitch };\n"],"names":["_useModel","_a","Switch"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBA,UAAM,QAAQ;AAoBd,UAAM,QAAQ;AA6BR,UAAA,WAAW,eAAe,cAAc;AAG9C,UAAM,EAAE,oBAAoB,QAAQ,SAAS,WAAW,aAAa;AAAA,MACjE;AAAA,MACA;AAAA,MACA;AAAA,IACJ;AAGM,UAAA,EAAE,YAAY,IAAI,YAAY;AAGpC,UAAM,UACF,CAAC,CAAC,YAAY,SAAS,CAAC,CAAC,MAAM,SAAS,CAAC,CAAC,WAAW,YAC/C,iBAAY,UAAZ,mBAAmB,YAAW,UAC9B;AAGN,QAAA,CAAC,MAAM,SAAS,MAAM,GAAgB,mBAAA,UAAA,mBAAO,WAAW,MAAM;AAE5D,UAAA,SAASA,8BAAqC;AAEpD,UAAM,YAAY;AAAA,MACd,MACI,OAAO,WAAW,MAAM,aAAa,SACpC,MAAM,QAAQ,OAAO,KAAK,KACvB,OAAO,MAAM,SAAS,MAAM,WAAW;AAAA,IACnD;AAEA,aAAS,QAAQ,OAAoB;AAC3B,YAAA,SAAS,OAAO,OAAO,KAAK;AAAA,IAAA;AAKtC,UAAM,QAAQ,SAAS;AAEjB,UAAA,YAAY,SAAS,MAAO;;AAAA;AAAA,QAC9B,IAAGC,MAAA,YAAY,UAAZ,gBAAAA,IAAmB;AAAA,QACtB,GAAG;AAAA,MAAA;AAAA,KACL;AAEF,UAAM,cAAc;AAAA,MAChB,CAAC,aAAa,UAAU;AAAA,MACxB;AAAA,QACI;AAAA,QACA;AAAA,QACA,SAAS,MAAM,MAAM,IAAI;AAAA,QACzB,SAAS,MAAM,CAAC,CAAC,MAAM,IAAI;AAAA,MAC/B;AAAA,MACA;AAAA,QACI;AAAA,QACA;AAAA,QACA,SAAS,MAAM,MAAM,OAAO;AAAA,QAC5B,SAAS,MAAM,CAAC,CAAC,MAAM,OAAO;AAAA,MAClC;AAAA,MACA;AAAA,QACI;AAAA,QACA;AAAA,QACA,SAAS,MAAM,MAAM,iBAAiB,UAAU;AAAA,QAChD,SAAS,MAAM,CAAC,CAAC,MAAM,cAAc;AAAA,MACzC;AAAA,MACA;AAAA,QACI;AAAA,QACA;AAAA,QACA,SAAS,MAAM,MAAM,QAAQ;AAAA,QAC7B,SAAS,MAAM,CAAC,CAAC,MAAM,QAAQ;AAAA,MACnC;AAAA,MACA;AAAA,QACI;AAAA,QACA;AAAA,QACA;AAAA,QACA,SAAS,MAAM,MAAM,QAAQ;AAAA,MACjC;AAAA,MACA,CAAC,gBAAgB,qBAAqB,MAAM,SAAS,MAAM,MAAM,OAAO,CAAC;AAAA,MACzE,CAAC,gBAAgB,qBAAqB,MAAM,SAAS;AAAA,IACzD;AAEA,UAAM,eAAe,cAAc,CAAC,cAAc,iBAAiB,CAAC;AAEpE,UAAM,eAAe,cAAc,CAAC,cAAc,iBAAiB,CAAC;AAKpE,aAAa,EAAE,oBAAoB,OAAO,UAAU,OAAO,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACtJnE,MAAe,QAAA;AAAA,EACX,QAAQ,KAAU;AACd,sBAAkB,KAAKC,SAAM;AAAA,EAAA;AAErC;"}