@ishitatsuyuki/oruga-next/dist/cjs/Checkbox-3a9023a6.js

UI components for Vue.js and CSS framework agnostic

'use strict';

var vue = require('vue');
var BaseComponentMixin = require('./BaseComponentMixin-a03c02e3.js');
var CheckRadioMixin = require('./CheckRadioMixin-2a894e60.js');

/**
 * Select a single or grouped options
 * @displayName Checkbox
 * @style _checkbox.scss
 */
var script = vue.defineComponent({
    name: 'OCheckbox',
    mixins: [BaseComponentMixin.BaseComponentMixin, CheckRadioMixin.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 vue.openBlock(), vue.createBlock("label", {
    class: _ctx.rootClasses,
    ref: "label",
    onClick: _cache[3] || (_cache[3] = vue.withModifiers((...args) => _ctx.focus(...args), ["stop"])),
    onKeydown: _cache[4] || (_cache[4] = vue.withKeys(vue.withModifiers($event => _ctx.$refs.label.click(), ["prevent"]), ["enter"]))
  }, [vue.withDirectives(vue.createVNode("input", {
    "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => _ctx.computedValue = $event),
    indeterminate: _ctx.indeterminate,
    type: "checkbox",
    ref: "input",
    onClick: _cache[2] || (_cache[2] = vue.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"]), [[vue.vModelCheckbox, _ctx.computedValue]]), vue.createVNode("span", {
    id: _ctx.ariaLabelledby,
    class: _ctx.labelClasses
  }, [vue.renderSlot(_ctx.$slots, "default")], 10
  /* CLASS, PROPS */
  , ["id"])], 34
  /* CLASS, HYDRATE_EVENTS */
  );
}

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

exports.script = script;