Fixed #3802 - Improve folder structure for nuxt configurations

components/lib/checkbox/Checkbox.css

@@ -0,0 +1,17 @@
+.p-checkbox {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+    vertical-align: bottom;
+    position: relative;
+}
+
+.p-checkbox.p-checkbox-disabled {
+    cursor: default;
+}
+
+.p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}

components/lib/checkbox/Checkbox.d.ts

@@ -0,0 +1,137 @@
+/**
+ *
+ * Checkbox is an extension to standard checkbox element with theming.
+ *
+ * [Live Demo](https://www.primevue.org/checkbox/)
+ *
+ * @module checkbox
+ *
+ */
+import { InputHTMLAttributes } from 'vue';
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+
+/**
+ * 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 that the element should be disabled.
+     * @default false
+     */
+    disabled?: boolean | 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;
+    /**
+     * Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.
+     */
+    inputProps?: InputHTMLAttributes | undefined;
+    /**
+     * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
+     */
+    'aria-labelledby'?: string | undefined;
+    /**
+     * Establishes a string value that labels the component.
+     */
+    'aria-label'?: string | undefined;
+}
+
+export interface CheckboxSlots {}
+
+/**
+ * Defines valid emits in Checkbox component.
+ */
+export interface CheckboxEmits {
+    /**
+     * Emitted when the page changes.
+     * @param {*} value - New page value.
+     */
+    'update:page'(value: any): void;
+    /**
+     * Callback to invoke on value click.
+     * @param {MouseEvent} event - Browser event.
+     */
+    click(event: MouseEvent): void;
+    /**
+     * Callback to invoke on value change.
+     * @param {Event} event - Browser event.
+     */
+    change(event: Event): void;
+    /**
+     * Callback to invoke on value change.
+     * @param {boolean} value - New value.
+     */
+    input(value: boolean): void;
+}
+
+/**
+ * **PrimeVue - Checkbox**
+ *
+ * _Accordion groups a collection of contents in tabs._
+ *
+ * [Live Demo](https://www.primevue.org/checkbox/)
+ * --- ---
+ * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
+ *
+ * @group Component
+ *
+ */
+declare class Checkbox extends ClassComponent<CheckboxProps, CheckboxSlots, CheckboxEmits> {}
+
+declare module '@vue/runtime-core' {
+    interface GlobalComponents {
+        Checkbox: GlobalComponentConstructor<Checkbox>;
+    }
+}
+
+export default Checkbox;

components/lib/checkbox/Checkbox.spec.js

@@ -0,0 +1,28 @@
+import { mount } from '@vue/test-utils';
+import Checkbox from './Checkbox.vue';
+
+describe('Checkbox.vue', () => {
+    let wrapper;
+
+    beforeEach(() => {
+        wrapper = mount(Checkbox, {
+            props: {
+                modelValue: false,
+                binary: true
+            }
+        });
+    });
+
+    it('should exist', () => {
+        expect(wrapper.find('.p-checkbox.p-component').exists()).toBe(true);
+        expect(wrapper.find('.p-checkbox-icon.pi.pi-check').exists()).toBe(false);
+    });
+
+    it('should exist', async () => {
+        await wrapper.setProps({ modelValue: true });
+
+        expect(wrapper.find('.p-checkbox-checked').exists()).toBe(true);
+        expect(wrapper.find('.p-checkbox-box.p-highlight').exists()).toBe(true);
+        expect(wrapper.find('.p-checkbox-icon.pi.pi-check').exists()).toBe(true);
+    });
+});

components/lib/checkbox/Checkbox.vue

@@ -0,0 +1,140 @@
+<template>
+    <div :class="containerClass" @click="onClick($event)">
+        <div class="p-hidden-accessible">
+            <input
+                ref="input"
+                :id="inputId"
+                type="checkbox"
+                :value="value"
+                :name="name"
+                :checked="checked"
+                :tabindex="tabindex"
+                :disabled="disabled"
+                :readonly="readonly"
+                :required="required"
+                :aria-labelledby="ariaLabelledby"
+                :aria-label="ariaLabel"
+                @focus="onFocus($event)"
+                @blur="onBlur($event)"
+                v-bind="inputProps"
+            />
+        </div>
+        <div ref="box" :class="['p-checkbox-box', inputClass, { 'p-highlight': checked, 'p-disabled': disabled, 'p-focus': focused }]" :style="inputStyle">
+            <span :class="['p-checkbox-icon', { 'pi pi-check': checked }]"></span>
+        </div>
+    </div>
+</template>
+
+<script>
+import { ObjectUtils } from 'primevue/utils';
+
+export default {
+    name: 'Checkbox',
+    emits: ['click', 'update:modelValue', 'change', 'input', 'focus', 'blur'],
+    props: {
+        value: null,
+        modelValue: null,
+        binary: Boolean,
+        name: {
+            type: String,
+            default: null
+        },
+        trueValue: {
+            type: null,
+            default: true
+        },
+        falseValue: {
+            type: null,
+            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
+        },
+        inputProps: {
+            type: null,
+            default: null
+        },
+        'aria-labelledby': {
+            type: String,
+            default: null
+        },
+        'aria-label': {
+            type: String,
+            default: null
+        }
+    },
+    data() {
+        return {
+            focused: false
+        };
+    },
+    methods: {
+        onClick(event) {
+            if (!this.disabled && !this.readonly) {
+                let newModelValue;
+
+                if (this.binary) {
+                    newModelValue = this.checked ? this.falseValue : this.trueValue;
+                } else {
+                    if (this.checked) newModelValue = this.modelValue.filter((val) => !ObjectUtils.equals(val, this.value));
+                    else newModelValue = this.modelValue ? [...this.modelValue, this.value] : [this.value];
+                }
+
+                this.$emit('click', event);
+                this.$emit('update:modelValue', newModelValue);
+                this.$emit('change', event);
+                this.$emit('input', newModelValue);
+                this.$refs.input.focus();
+            }
+        },
+        onFocus(event) {
+            this.focused = true;
+            this.$emit('focus', event);
+        },
+        onBlur(event) {
+            this.focused = false;
+            this.$emit('blur', event);
+        }
+    },
+    computed: {
+        checked() {
+            return this.binary ? this.modelValue === this.trueValue : ObjectUtils.contains(this.value, this.modelValue);
+        },
+        containerClass() {
+            return [
+                'p-checkbox p-component',
+                {
+                    'p-checkbox-checked': this.checked,
+                    'p-checkbox-disabled': this.disabled,
+                    'p-checkbox-focused': this.focused
+                }
+            ];
+        }
+    }
+};
+</script>

components/lib/checkbox/package.json

@@ -0,0 +1,9 @@
+{
+  "main": "./checkbox.cjs.js",
+  "module": "./checkbox.esm.js",
+  "unpkg": "./checkbox.min.js",
+  "types": "./Checkbox.d.ts",
+  "browser": {
+    "./sfc": "./Checkbox.vue"
+  }
+}