@ishitatsuyuki/oruga-next/dist/esm/Checkbox-bcf92d15.mjs

UI components for Vue.js and CSS framework agnostic

import { defineComponent, openBlock, createBlock, withModifiers, withKeys, withDirectives, createVNode, vModelCheckbox, renderSlot } from 'vue';
import { B as BaseComponentMixin } from './BaseComponentMixin-d78ed3dc.mjs';
import { C as CheckRadioMixin } from './CheckRadioMixin-f5b57344.mjs';

/**
 * Select a single or grouped options
 * @displayName Checkbox
 * @style _checkbox.scss
 */
var script = defineComponent({
    name: 'OCheckbox',
    mixins: [BaseComponentMixin, CheckRadioMixin],
    configField: 'checkbox',
    emits: [
        'input'
    ],
    props: {
        /**
         * Same as native indeterminate
         */
        indeterminate: {
            type: Boolean,
            default: false
        },
        /**
         * Overrides the returned value when it's checked
         */
        trueValue: {
            type: [String, Number, Boolean],
            default: true
        },
        /**
         * Overrides the returned value when it's not checked
         */
        falseValue: {
            type: [String, Number, Boolean],
            default: false
        },
        /** Accessibility label to establish relationship between the checkbox and control label */
        ariaLabelledby: String,
        /* Same as native autocomplete */
        autocomplete: String,
        rootClass: [String, Function, Array],
        disabledClass: [String, Function, Array],
        checkClass: [String, Function, Array],
        checkCheckedClass: [String, Function, Array],
        checkIndeterminateClass: [String, Function, Array],
        labelClass: [String, Function, Array],
        sizeClass: [String, Function, Array],
        variantClass: [String, Function, Array]
    },
    watch: {
        indeterminate: {
            handler(val) {
                this.isIndeterminate = val;
            },
            immediate: true,
        },
    },
    computed: {
        isChecked() {
            return this.computedValue === this.trueValue
                || Array.isArray(this.computedValue) && this.computedValue.indexOf(this.nativeValue) !== -1;
        },
        rootClasses() {
            return [
                this.computedClass('rootClass', 'o-chk'),
                { [this.computedClass('checkedClass', 'o-chk--checked')]: this.isChecked },
                { [this.computedClass('sizeClass', 'o-chk--', this.size)]: this.size },
                { [this.computedClass('disabledClass', 'o-chk--disabled')]: this.disabled },
                { [this.computedClass('variantClass', 'o-chk--', this.variant)]: this.variant }
            ];
        },
        checkClasses() {
            return [
                this.computedClass('checkClass', 'o-chk__check'),
                { [this.computedClass('checkCheckedClass', 'o-chk__check--checked')]: this.isChecked },
                { [this.computedClass('checkIndeterminateClass', 'o-chk__check--indeterminate')]: this.isIndeterminate },
            ];
        },
        labelClasses() {
            return [
                this.computedClass('labelClass', 'o-chk__label')
            ];
        }
    }
});

function render(_ctx, _cache, $props, $setup, $data, $options) {
  return openBlock(), createBlock("label", {
    class: _ctx.rootClasses,
    ref: "label",
    onClick: _cache[3] || (_cache[3] = withModifiers((...args) => _ctx.focus(...args), ["stop"])),
    onKeydown: _cache[4] || (_cache[4] = withKeys(withModifiers($event => _ctx.$refs.label.click(), ["prevent"]), ["enter"]))
  }, [withDirectives(createVNode("input", {
    "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => _ctx.computedValue = $event),
    indeterminate: _ctx.indeterminate,
    type: "checkbox",
    ref: "input",
    onClick: _cache[2] || (_cache[2] = withModifiers(() => {}, ["stop"])),
    class: _ctx.checkClasses,
    disabled: _ctx.disabled,
    required: _ctx.required,
    name: _ctx.name,
    autocomplete: _ctx.autocomplete,
    value: _ctx.nativeValue,
    "true-value": _ctx.trueValue,
    "false-value": _ctx.falseValue,
    "aria-labelledby": _ctx.ariaLabelledby
  }, null, 10
  /* CLASS, PROPS */
  , ["indeterminate", "disabled", "required", "name", "autocomplete", "value", "true-value", "false-value", "aria-labelledby"]), [[vModelCheckbox, _ctx.computedValue]]), createVNode("span", {
    id: _ctx.ariaLabelledby,
    class: _ctx.labelClasses
  }, [renderSlot(_ctx.$slots, "default")], 10
  /* CLASS, PROPS */
  , ["id"])], 34
  /* CLASS, HYDRATE_EVENTS */
  );
}

script.render = render;
script.__file = "src/components/checkbox/Checkbox.vue";

export { script as s };