primevuelab 4.0.0-beta.4

package/checkbox/Checkbox.d.ts

@@ -0,0 +1,283 @@
+/**
+ *
+ * Checkbox is an extension to standard checkbox element with theming.
+ *
+ * [Live Demo](https://www.primevuelab.org/checkbox/)
+ *
+ * @module checkbox
+ *
+ */
+import { VNode } from 'vue';
+import { ComponentHooks } from '../../../core/src/basecomponent';
+import { PassThroughOptions } from '../passthrough';
+import { DefineComponent, DesignToken, EmitFn, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
+
+export declare type CheckboxPassThroughOptionType = CheckboxPassThroughAttributes | ((options: CheckboxPassThroughMethodOptions) => CheckboxPassThroughAttributes | string) | string | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface CheckboxPassThroughMethodOptions {
+    /**
+     * Defines instance.
+     */
+    instance: any;
+    /**
+     * Defines valid properties.
+     */
+    props: CheckboxProps;
+    /**
+     * Defines current inline state.
+     */
+    state: CheckboxState;
+    /**
+     * Defines current options.
+     */
+    context: CheckboxContext;
+    /**
+     * Defines valid attributes.
+     */
+    attrs: any;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
+    /**
+     * Defines passthrough(pt) options in global config.
+     */
+    global: object | undefined;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link CheckboxProps.pt}
+ */
+export interface CheckboxPassThroughOptions {
+    /**
+     * Used to pass attributes to the root's DOM element.
+     */
+    root?: CheckboxPassThroughOptionType;
+    /**
+     * Used to pass attributes to the input's DOM element.
+     */
+    input?: CheckboxPassThroughOptionType;
+    /**
+     * Used to pass attributes to the box's DOM element.
+     */
+    box?: CheckboxPassThroughOptionType;
+    /**
+     * Used to pass attributes to the icon's DOM element.
+     */
+    icon?: CheckboxPassThroughOptionType;
+    /**
+     * Used to manage all lifecycle hooks.
+     * @see {@link BaseComponent.ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface CheckboxPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Checkbox component.
+ */
+export interface CheckboxState {
+    [key: string]: any;
+}
+
+/**
+ * Defines valid properties in Checkbox component.
+ */
+export interface CheckboxProps {
+    /**
+     * Value of the checkbox.
+     */
+    value?: any;
+    /**
+     * Value binding of the checkbox.
+     */
+    modelValue?: any;
+    /**
+     * Name of the input element.
+     */
+    name?: string | undefined;
+    /**
+     * Allows to select a boolean value instead of multiple values.
+     * @default false
+     */
+    binary?: boolean;
+    /**
+     * When present, it specifies input state as indeterminate.
+     * @default false
+     */
+    indeterminate?: boolean | undefined;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
+    /**
+     * When present, it specifies that the element should be disabled.
+     * @default false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Specifies the input variant of the component.
+     * @defaultValue outlined
+     */
+    variant?: 'outlined' | 'filled' | undefined;
+    /**
+     * When present, it specifies that an input field is read-only.
+     * @default false
+     */
+    readonly?: boolean | undefined;
+    /**
+     * When present, it specifies that the element is required.
+     * @default false
+     */
+    required?: boolean | undefined;
+    /**
+     * Index of the element in tabbing order.
+     */
+    tabindex?: number | undefined;
+    /**
+     * Value in checked state.
+     * @default true
+     */
+    trueValue?: any;
+    /**
+     * Value in unchecked state.
+     * @default false
+     */
+    falseValue?: any;
+    /**
+     * Identifier of the underlying input element.
+     */
+    inputId?: string | undefined;
+    /**
+     * Style class of the input field.
+     */
+    inputClass?: object | undefined;
+    /**
+     * Inline style of the input field.
+     */
+    inputStyle?: string | object | undefined;
+    /**
+     * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
+     */
+    ariaLabelledby?: string | undefined;
+    /**
+     * Establishes a string value that labels the component.
+     */
+    ariaLabel?: string | undefined;
+    /**
+     * It generates scoped CSS variables using design tokens for the component.
+     */
+    dt?: DesignToken<any>;
+    /**
+     * Used to pass attributes to DOM elements inside the component.
+     * @type {CheckboxPassThroughOptions}
+     */
+    pt?: PassThrough<CheckboxPassThroughOptions>;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * Defines current options in Checkbox component.
+ */
+export interface CheckboxContext {
+    /**
+     * Current checked state of the item as a boolean.
+     * @defaultValue false
+     */
+    checked: boolean;
+    /**
+     * Current disabled state of the item as a boolean.
+     * @defaultValue false
+     */
+    disabled: boolean;
+}
+
+/**
+ * Defines valid slots in Checkbox component.
+ */
+export interface CheckboxSlots {
+    /**
+     * Custom icon template.
+     * @param {Object} scope - icon slot's params.
+     */
+    icon(scope: {
+        /**
+         * State of the checkbox.
+         */
+        checked: boolean;
+        /**
+         * Style class of the icon.
+         */
+        class: string;
+    }): VNode[];
+}
+
+/**
+ * Defines valid emits in Checkbox component.
+ */
+export interface CheckboxEmitsOptions {
+    /**
+     * Emitted when the value changes.
+     * @param {*} value - New value.
+     */
+    'update:modelValue'(value: any): void;
+    /**
+     * Callback to invoke on value change.
+     * @param {Event} event - Browser event.
+     */
+    change(event: Event): void;
+    /**
+     * Callback to invoke when the component receives focus.
+     * @param {Event} event - Browser event.
+     */
+    focus(event: Event): void;
+    /**
+     * Callback to invoke when the component loses focus.
+     * @param {Event} event - Browser event.
+     */
+    blur(event: Event): void;
+}
+
+export declare type CheckboxEmits = EmitFn<CheckboxEmitsOptions>;
+
+/**
+ * **primevuelab - Checkbox**
+ *
+ * _Accordion groups a collection of contents in tabs._
+ *
+ * [Live Demo](https://www.primevuelab.org/checkbox/)
+ * --- ---
+ * ![primevuelab](https://primefaces.org/cdn/primevuelab/images/logo-100.png)
+ *
+ * @group Component
+ *
+ */
+declare const Checkbox: DefineComponent<CheckboxProps, CheckboxSlots, CheckboxEmits>;
+
+declare module 'vue' {
+    export interface GlobalComponents {
+        Checkbox: GlobalComponentConstructor<CheckboxProps, CheckboxSlots, CheckboxEmits>;
+    }
+}
+
+export default Checkbox;

package/checkbox/Checkbox.vue

@@ -0,0 +1,102 @@
+<template>
+    <div :class="cx('root')" v-bind="getPTOptions('root')" :data-p-checked="checked" :data-p-indeterminate="d_indeterminate || undefined" :data-p-disabled="disabled">
+        <input
+            :id="inputId"
+            type="checkbox"
+            :class="[cx('input'), inputClass]"
+            :style="inputStyle"
+            :value="value"
+            :name="name"
+            :checked="checked"
+            :tabindex="tabindex"
+            :disabled="disabled"
+            :readonly="readonly"
+            :required="required"
+            :aria-labelledby="ariaLabelledby"
+            :aria-label="ariaLabel"
+            :aria-invalid="invalid || undefined"
+            :aria-checked="d_indeterminate ? 'mixed' : undefined"
+            @focus="onFocus"
+            @blur="onBlur"
+            @change="onChange"
+            v-bind="getPTOptions('input')"
+        />
+        <div :class="cx('box')" v-bind="getPTOptions('box')">
+            <slot name="icon" :checked="checked" :class="cx('icon')">
+                <CheckIcon v-if="checked" :class="cx('icon')" v-bind="getPTOptions('icon')" />
+                <MinusIcon v-else-if="d_indeterminate" :class="cx('icon')" v-bind="getPTOptions('icon')" />
+            </slot>
+        </div>
+    </div>
+</template>
+
+<script>
+import { ObjectUtils } from '@primevuelab/core/utils';
+import CheckIcon from '@primevuelab/icons/check';
+import MinusIcon from '@primevuelab/icons/minus';
+import BaseCheckbox from './BaseCheckbox.vue';
+
+export default {
+    name: 'Checkbox',
+    extends: BaseCheckbox,
+    inheritAttrs: false,
+    emits: ['update:modelValue', 'change', 'focus', 'blur', 'update:indeterminate'],
+    data() {
+        return {
+            d_indeterminate: this.indeterminate
+        };
+    },
+    watch: {
+        indeterminate(newValue) {
+            this.d_indeterminate = newValue;
+        }
+    },
+    methods: {
+        getPTOptions(key) {
+            const _ptm = key === 'root' ? this.ptmi : this.ptm;
+
+            return _ptm(key, {
+                context: {
+                    checked: this.checked,
+                    disabled: this.disabled
+                }
+            });
+        },
+        onChange(event) {
+            if (!this.disabled && !this.readonly) {
+                let newModelValue;
+
+                if (this.binary) {
+                    newModelValue = this.d_indeterminate ? this.trueValue : this.checked ? this.falseValue : this.trueValue;
+                } else {
+                    if (this.checked || this.d_indeterminate) newModelValue = this.modelValue.filter((val) => !ObjectUtils.equals(val, this.value));
+                    else newModelValue = this.modelValue ? [...this.modelValue, this.value] : [this.value];
+                }
+
+                if (this.d_indeterminate) {
+                    this.d_indeterminate = false;
+                    this.$emit('update:indeterminate', this.d_indeterminate);
+                }
+
+                this.$emit('update:modelValue', newModelValue);
+                this.$emit('change', event);
+            }
+        },
+        onFocus(event) {
+            this.$emit('focus', event);
+        },
+        onBlur(event) {
+            this.$emit('blur', event);
+        }
+    },
+    computed: {
+        checked() {
+            return this.d_indeterminate ? false : this.binary ? this.modelValue === this.trueValue : ObjectUtils.contains(this.value, this.modelValue);
+        }
+    },
+    components: {
+        CheckIcon,
+        MinusIcon
+    }
+};
+</script>

package/checkbox/checkbox.mjs

@@ -0,0 +1,208 @@
+import { ObjectUtils } from '@primevuelab/core/utils';
+import CheckIcon from '@primevuelab/icons/check';
+import MinusIcon from '@primevuelab/icons/minus';
+import BaseComponent from '@primevuelab/core/basecomponent';
+import CheckboxStyle from 'primevuelab/checkbox/style';
+import { resolveComponent, openBlock, createElementBlock, mergeProps, createElementVNode, renderSlot, normalizeClass, createBlock, createCommentVNode } from 'vue';
+
+var script$1 = {
+  name: 'BaseCheckbox',
+  "extends": BaseComponent,
+  props: {
+    value: null,
+    modelValue: null,
+    binary: Boolean,
+    name: {
+      type: String,
+      "default": null
+    },
+    indeterminate: {
+      type: Boolean,
+      "default": false
+    },
+    trueValue: {
+      type: null,
+      "default": true
+    },
+    falseValue: {
+      type: null,
+      "default": false
+    },
+    variant: {
+      type: String,
+      "default": null
+    },
+    invalid: {
+      type: Boolean,
+      "default": false
+    },
+    disabled: {
+      type: Boolean,
+      "default": false
+    },
+    readonly: {
+      type: Boolean,
+      "default": false
+    },
+    required: {
+      type: Boolean,
+      "default": false
+    },
+    tabindex: {
+      type: Number,
+      "default": null
+    },
+    inputId: {
+      type: String,
+      "default": null
+    },
+    inputClass: {
+      type: [String, Object],
+      "default": null
+    },
+    inputStyle: {
+      type: Object,
+      "default": null
+    },
+    ariaLabelledby: {
+      type: String,
+      "default": null
+    },
+    ariaLabel: {
+      type: String,
+      "default": null
+    }
+  },
+  style: CheckboxStyle,
+  provide: function provide() {
+    return {
+      $pcCheckbox: this,
+      $parentInstance: this
+    };
+  }
+};
+
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+var script = {
+  name: 'Checkbox',
+  "extends": script$1,
+  inheritAttrs: false,
+  emits: ['update:modelValue', 'change', 'focus', 'blur', 'update:indeterminate'],
+  data: function data() {
+    return {
+      d_indeterminate: this.indeterminate
+    };
+  },
+  watch: {
+    indeterminate: function indeterminate(newValue) {
+      this.d_indeterminate = newValue;
+    }
+  },
+  methods: {
+    getPTOptions: function getPTOptions(key) {
+      var _ptm = key === 'root' ? this.ptmi : this.ptm;
+      return _ptm(key, {
+        context: {
+          checked: this.checked,
+          disabled: this.disabled
+        }
+      });
+    },
+    onChange: function onChange(event) {
+      var _this = this;
+      if (!this.disabled && !this.readonly) {
+        var newModelValue;
+        if (this.binary) {
+          newModelValue = this.d_indeterminate ? this.trueValue : this.checked ? this.falseValue : this.trueValue;
+        } else {
+          if (this.checked || this.d_indeterminate) newModelValue = this.modelValue.filter(function (val) {
+            return !ObjectUtils.equals(val, _this.value);
+          });else newModelValue = this.modelValue ? [].concat(_toConsumableArray(this.modelValue), [this.value]) : [this.value];
+        }
+        if (this.d_indeterminate) {
+          this.d_indeterminate = false;
+          this.$emit('update:indeterminate', this.d_indeterminate);
+        }
+        this.$emit('update:modelValue', newModelValue);
+        this.$emit('change', event);
+      }
+    },
+    onFocus: function onFocus(event) {
+      this.$emit('focus', event);
+    },
+    onBlur: function onBlur(event) {
+      this.$emit('blur', event);
+    }
+  },
+  computed: {
+    checked: function checked() {
+      return this.d_indeterminate ? false : this.binary ? this.modelValue === this.trueValue : ObjectUtils.contains(this.value, this.modelValue);
+    }
+  },
+  components: {
+    CheckIcon: CheckIcon,
+    MinusIcon: MinusIcon
+  }
+};
+
+var _hoisted_1 = ["data-p-checked", "data-p-indeterminate", "data-p-disabled"];
+var _hoisted_2 = ["id", "value", "name", "checked", "tabindex", "disabled", "readonly", "required", "aria-labelledby", "aria-label", "aria-invalid", "aria-checked"];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_CheckIcon = resolveComponent("CheckIcon");
+  var _component_MinusIcon = resolveComponent("MinusIcon");
+  return openBlock(), createElementBlock("div", mergeProps({
+    "class": _ctx.cx('root')
+  }, $options.getPTOptions('root'), {
+    "data-p-checked": $options.checked,
+    "data-p-indeterminate": $data.d_indeterminate || undefined,
+    "data-p-disabled": _ctx.disabled
+  }), [createElementVNode("input", mergeProps({
+    id: _ctx.inputId,
+    type: "checkbox",
+    "class": [_ctx.cx('input'), _ctx.inputClass],
+    style: _ctx.inputStyle,
+    value: _ctx.value,
+    name: _ctx.name,
+    checked: $options.checked,
+    tabindex: _ctx.tabindex,
+    disabled: _ctx.disabled,
+    readonly: _ctx.readonly,
+    required: _ctx.required,
+    "aria-labelledby": _ctx.ariaLabelledby,
+    "aria-label": _ctx.ariaLabel,
+    "aria-invalid": _ctx.invalid || undefined,
+    "aria-checked": $data.d_indeterminate ? 'mixed' : undefined,
+    onFocus: _cache[0] || (_cache[0] = function () {
+      return $options.onFocus && $options.onFocus.apply($options, arguments);
+    }),
+    onBlur: _cache[1] || (_cache[1] = function () {
+      return $options.onBlur && $options.onBlur.apply($options, arguments);
+    }),
+    onChange: _cache[2] || (_cache[2] = function () {
+      return $options.onChange && $options.onChange.apply($options, arguments);
+    })
+  }, $options.getPTOptions('input')), null, 16, _hoisted_2), createElementVNode("div", mergeProps({
+    "class": _ctx.cx('box')
+  }, $options.getPTOptions('box')), [renderSlot(_ctx.$slots, "icon", {
+    checked: $options.checked,
+    "class": normalizeClass(_ctx.cx('icon'))
+  }, function () {
+    return [$options.checked ? (openBlock(), createBlock(_component_CheckIcon, mergeProps({
+      key: 0,
+      "class": _ctx.cx('icon')
+    }, $options.getPTOptions('icon')), null, 16, ["class"])) : $data.d_indeterminate ? (openBlock(), createBlock(_component_MinusIcon, mergeProps({
+      key: 1,
+      "class": _ctx.cx('icon')
+    }, $options.getPTOptions('icon')), null, 16, ["class"])) : createCommentVNode("", true)];
+  })], 16)], 16, _hoisted_1);
+}
+
+script.render = render;
+
+export { script as default };
+//# sourceMappingURL=checkbox.mjs.map

package/checkbox/checkbox.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.mjs","sources":["../../src/checkbox/BaseCheckbox.vue","../../src/checkbox/Checkbox.vue","../../src/checkbox/Checkbox.vue?vue&type=template&id=72f4dd54&lang.js"],"sourcesContent":["<script>\nimport BaseComponent from '@primevuelab/core/basecomponent';\nimport CheckboxStyle from 'primevuelab/checkbox/style';\n\nexport default {\n    name: 'BaseCheckbox',\n    extends: BaseComponent,\n    props: {\n        value: null,\n        modelValue: null,\n        binary: Boolean,\n        name: {\n            type: String,\n            default: null\n        },\n        indeterminate: {\n            type: Boolean,\n            default: false\n        },\n        trueValue: {\n            type: null,\n            default: true\n        },\n        falseValue: {\n            type: null,\n            default: false\n        },\n        variant: {\n            type: String,\n            default: null\n        },\n        invalid: {\n            type: Boolean,\n            default: false\n        },\n        disabled: {\n            type: Boolean,\n            default: false\n        },\n        readonly: {\n            type: Boolean,\n            default: false\n        },\n        required: {\n            type: Boolean,\n            default: false\n        },\n        tabindex: {\n            type: Number,\n            default: null\n        },\n        inputId: {\n            type: String,\n            default: null\n        },\n        inputClass: {\n            type: [String, Object],\n            default: null\n        },\n        inputStyle: {\n            type: Object,\n            default: null\n        },\n        ariaLabelledby: {\n            type: String,\n            default: null\n        },\n        ariaLabel: {\n            type: String,\n            default: null\n        }\n    },\n    style: CheckboxStyle,\n    provide() {\n        return {\n            $pcCheckbox: this,\n            $parentInstance: this\n        };\n    }\n};\n</script>\n","<template>\n    <div :class=\"cx('root')\" v-bind=\"getPTOptions('root')\" :data-p-checked=\"checked\" :data-p-indeterminate=\"d_indeterminate || undefined\" :data-p-disabled=\"disabled\">\n        <input\n            :id=\"inputId\"\n            type=\"checkbox\"\n            :class=\"[cx('input'), inputClass]\"\n            :style=\"inputStyle\"\n            :value=\"value\"\n            :name=\"name\"\n            :checked=\"checked\"\n            :tabindex=\"tabindex\"\n            :disabled=\"disabled\"\n            :readonly=\"readonly\"\n            :required=\"required\"\n            :aria-labelledby=\"ariaLabelledby\"\n            :aria-label=\"ariaLabel\"\n            :aria-invalid=\"invalid || undefined\"\n            :aria-checked=\"d_indeterminate ? 'mixed' : undefined\"\n            @focus=\"onFocus\"\n            @blur=\"onBlur\"\n            @change=\"onChange\"\n            v-bind=\"getPTOptions('input')\"\n        />\n        <div :class=\"cx('box')\" v-bind=\"getPTOptions('box')\">\n            <slot name=\"icon\" :checked=\"checked\" :class=\"cx('icon')\">\n                <CheckIcon v-if=\"checked\" :class=\"cx('icon')\" v-bind=\"getPTOptions('icon')\" />\n                <MinusIcon v-else-if=\"d_indeterminate\" :class=\"cx('icon')\" v-bind=\"getPTOptions('icon')\" />\n            </slot>\n        </div>\n    </div>\n</template>\n\n<script>\nimport { ObjectUtils } from '@primevuelab/core/utils';\nimport CheckIcon from '@primevuelab/icons/check';\nimport MinusIcon from '@primevuelab/icons/minus';\nimport BaseCheckbox from './BaseCheckbox.vue';\n\nexport default {\n    name: 'Checkbox',\n    extends: BaseCheckbox,\n    inheritAttrs: false,\n    emits: ['update:modelValue', 'change', 'focus', 'blur', 'update:indeterminate'],\n    data() {\n        return {\n            d_indeterminate: this.indeterminate\n        };\n    },\n    watch: {\n        indeterminate(newValue) {\n            this.d_indeterminate = newValue;\n        }\n    },\n    methods: {\n        getPTOptions(key) {\n            const _ptm = key === 'root' ? this.ptmi : this.ptm;\n\n            return _ptm(key, {\n                context: {\n                    checked: this.checked,\n                    disabled: this.disabled\n                }\n            });\n        },\n        onChange(event) {\n            if (!this.disabled && !this.readonly) {\n                let newModelValue;\n\n                if (this.binary) {\n                    newModelValue = this.d_indeterminate ? this.trueValue : this.checked ? this.falseValue : this.trueValue;\n                } else {\n                    if (this.checked || this.d_indeterminate) newModelValue = this.modelValue.filter((val) => !ObjectUtils.equals(val, this.value));\n                    else newModelValue = this.modelValue ? [...this.modelValue, this.value] : [this.value];\n                }\n\n                if (this.d_indeterminate) {\n                    this.d_indeterminate = false;\n                    this.$emit('update:indeterminate', this.d_indeterminate);\n                }\n\n                this.$emit('update:modelValue', newModelValue);\n                this.$emit('change', event);\n            }\n        },\n        onFocus(event) {\n            this.$emit('focus', event);\n        },\n        onBlur(event) {\n            this.$emit('blur', event);\n        }\n    },\n    computed: {\n        checked() {\n            return this.d_indeterminate ? false : this.binary ? this.modelValue === this.trueValue : ObjectUtils.contains(this.value, this.modelValue);\n        }\n    },\n    components: {\n        CheckIcon,\n        MinusIcon\n    }\n};\n</script>\n","<template>\n    <div :class=\"cx('root')\" v-bind=\"getPTOptions('root')\" :data-p-checked=\"checked\" :data-p-indeterminate=\"d_indeterminate || undefined\" :data-p-disabled=\"disabled\">\n        <input\n            :id=\"inputId\"\n            type=\"checkbox\"\n            :class=\"[cx('input'), inputClass]\"\n            :style=\"inputStyle\"\n            :value=\"value\"\n            :name=\"name\"\n            :checked=\"checked\"\n            :tabindex=\"tabindex\"\n            :disabled=\"disabled\"\n            :readonly=\"readonly\"\n            :required=\"required\"\n            :aria-labelledby=\"ariaLabelledby\"\n            :aria-label=\"ariaLabel\"\n            :aria-invalid=\"invalid || undefined\"\n            :aria-checked=\"d_indeterminate ? 'mixed' : undefined\"\n            @focus=\"onFocus\"\n            @blur=\"onBlur\"\n            @change=\"onChange\"\n            v-bind=\"getPTOptions('input')\"\n        />\n        <div :class=\"cx('box')\" v-bind=\"getPTOptions('box')\">\n            <slot name=\"icon\" :checked=\"checked\" :class=\"cx('icon')\">\n                <CheckIcon v-if=\"checked\" :class=\"cx('icon')\" v-bind=\"getPTOptions('icon')\" />\n                <MinusIcon v-else-if=\"d_indeterminate\" :class=\"cx('icon')\" v-bind=\"getPTOptions('icon')\" />\n            </slot>\n        </div>\n    </div>\n</template>\n\n<script>\nimport { ObjectUtils } from '@primevuelab/core/utils';\nimport CheckIcon from '@primevuelab/icons/check';\nimport MinusIcon from '@primevuelab/icons/minus';\nimport BaseCheckbox from './BaseCheckbox.vue';\n\nexport default {\n    name: 'Checkbox',\n    extends: BaseCheckbox,\n    inheritAttrs: false,\n    emits: ['update:modelValue', 'change', 'focus', 'blur', 'update:indeterminate'],\n    data() {\n        return {\n            d_indeterminate: this.indeterminate\n        };\n    },\n    watch: {\n        indeterminate(newValue) {\n            this.d_indeterminate = newValue;\n        }\n    },\n    methods: {\n        getPTOptions(key) {\n            const _ptm = key === 'root' ? this.ptmi : this.ptm;\n\n            return _ptm(key, {\n                context: {\n                    checked: this.checked,\n                    disabled: this.disabled\n                }\n            });\n        },\n        onChange(event) {\n            if (!this.disabled && !this.readonly) {\n                let newModelValue;\n\n                if (this.binary) {\n                    newModelValue = this.d_indeterminate ? this.trueValue : this.checked ? this.falseValue : this.trueValue;\n                } else {\n                    if (this.checked || this.d_indeterminate) newModelValue = this.modelValue.filter((val) => !ObjectUtils.equals(val, this.value));\n                    else newModelValue = this.modelValue ? [...this.modelValue, this.value] : [this.value];\n                }\n\n                if (this.d_indeterminate) {\n                    this.d_indeterminate = false;\n                    this.$emit('update:indeterminate', this.d_indeterminate);\n                }\n\n                this.$emit('update:modelValue', newModelValue);\n                this.$emit('change', event);\n            }\n        },\n        onFocus(event) {\n            this.$emit('focus', event);\n        },\n        onBlur(event) {\n            this.$emit('blur', event);\n        }\n    },\n    computed: {\n        checked() {\n            return this.d_indeterminate ? false : this.binary ? this.modelValue === this.trueValue : ObjectUtils.contains(this.value, this.modelValue);\n        }\n    },\n    components: {\n        CheckIcon,\n        MinusIcon\n    }\n};\n</script>\n"],"names":["name","BaseComponent","props","value","modelValue","binary","Boolean","type","String","indeterminate","trueValue","falseValue","variant","invalid","disabled","readonly","required","tabindex","Number","inputId","inputClass","Object","inputStyle","ariaLabelledby","ariaLabel","style","CheckboxStyle","provide","$pcCheckbox","$parentInstance","BaseCheckbox","inheritAttrs","emits","data","d_indeterminate","watch","newValue","methods","getPTOptions","key","_ptm","ptmi","ptm","context","checked","onChange","event","_this","newModelValue","filter","val","ObjectUtils","equals","concat","_toConsumableArray","$emit","onFocus","onBlur","computed","contains","components","CheckIcon","MinusIcon","_openBlock","_createElementBlock","_mergeProps","_ctx","cx","$options","$data","undefined","_createElementVNode","id","apply","arguments","_hoisted_2","_renderSlot","$slots","_createBlock","_component_CheckIcon","_component_MinusIcon"],"mappings":"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"}

package/checkbox/package.json

@@ -0,0 +1,11 @@
+{
+    "main": "checkbox.mjs",
+    "module": "checkbox.mjs",
+    "types": "./Checkbox.d.ts",
+    "browser": {
+        "./sfc": "./Checkbox.vue"
+    },
+    "sideEffects": [
+        "*.vue"
+    ]
+}

package/checkbox/style/CheckboxStyle.d.ts

@@ -0,0 +1,31 @@
+/**
+ *
+ * Checkbox is an extension to standard checkbox element with theming.
+ *
+ * [Live Demo](https://www.primevuelab.org/checkbox/)
+ *
+ * @module checkboxstyle
+ *
+ */
+import { BaseStyle } from '../../base/style';
+
+export enum CheckboxClasses {
+    /**
+     * Class name of the root element
+     */
+    root = 'p-checkbox',
+    /**
+     * Class name of the box element
+     */
+    box = 'p-checkbox-box',
+    /**
+     * Class name of the input element
+     */
+    input = 'p-checkbox-input',
+    /**
+     * Class name of the icon element
+     */
+    icon = 'p-checkbox-icon'
+}
+
+export interface CheckboxStyle extends BaseStyle {}