Fixed #3802 - Improve folder structure for nuxt configurations

components/lib/tristatecheckbox/TriStateCheckbox.d.ts

@@ -0,0 +1,85 @@
+/**
+ *
+ * TriStateCheckbox is used to select either 'true', 'false' or 'null' as the value.
+ *
+ * [Live Demo](https://www.primevue.org/tristatecheckbox/)
+ *
+ * @module tristatecheckbox
+ *
+ */
+import { InputHTMLAttributes } from 'vue';
+import { ClassComponent, GlobalComponentConstructor, Nullable } from '../ts-helpers';
+
+/**
+ * Defines valid properties in TriStateCheckbox component.
+ */
+export interface TriStateCheckboxProps {
+    /**
+     * Value of the component.
+     * @defaultValue null
+     */
+    modelValue?: Nullable<boolean>;
+    /**
+     * When present, it specifies that the component should be disabled.
+     * @defaultValue false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Index of the element in tabbing order.
+     */
+    tabindex?: string | undefined;
+    /**
+     * Identifier of the underlying input element.
+     */
+    inputId?: string | 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;
+}
+
+/**
+ * Defines valid slots in TriStateCheckbox component.
+ */
+export interface TriStateCheckboxSlots {}
+
+/**
+ * Defines valid emits in TriStateCheckbox component.
+ */
+export interface TriStateCheckboxEmits {
+    /**
+     * Emitted when the value changes.
+     * @param {boolean|null|undefined} value - New value.
+     */
+    'update:modelValue'(value: Nullable<boolean>): void;
+}
+
+/**
+ * **PrimeVue - TriStateCheckbox**
+ *
+ * _TriStateCheckbox is used to select either 'true', 'false' or 'null' as the value._
+ *
+ * [Live Demo](https://www.primevue.org/tristatecheckbox/)
+ * --- ---
+ * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
+ *
+ * @group Component
+ *
+ */
+declare class TriStateCheckbox extends ClassComponent<TriStateCheckboxProps, TriStateCheckboxSlots, TriStateCheckboxEmits> {}
+
+declare module '@vue/runtime-core' {
+    interface GlobalComponents {
+        TriStateCheckbox: GlobalComponentConstructor<TriStateCheckbox>;
+    }
+}
+
+export default TriStateCheckbox;

components/lib/tristatecheckbox/TriStateCheckbox.spec.js

@@ -0,0 +1,109 @@
+import { config, mount } from '@vue/test-utils';
+import TriStateCheckbox from './TriStateCheckbox.vue';
+
+config.global.mocks = {
+    $primevue: {
+        config: {
+            locale: {
+                aria: {
+                    trueLabel: 'trueLabel',
+                    falseLabel: 'falseLabel',
+                    nullLabel: 'nullLabel'
+                }
+            }
+        }
+    }
+};
+let wrapper;
+const modelValues = [true, false, null];
+const emittedResults = [false, null, true];
+
+describe('TriStateCheckbox.vue', () => {
+    beforeEach(() => {
+        wrapper = mount(TriStateCheckbox);
+    });
+
+    it('When onClick method triggered some methods effect', () => {
+        const mockUpdateModel = vi.fn();
+
+        wrapper.vm.updateModel = mockUpdateModel;
+
+        wrapper.vm.onClick('test');
+
+        expect(wrapper.vm.updateModel).toBeCalled();
+        expect(wrapper.emitted()['click']).toBeTruthy();
+        expect(wrapper.emitted()['change']).toBeTruthy();
+    });
+
+    it('When event.code is not equal Enter methods should not be effected', async () => {
+        wrapper.vm.onKeyDown({ code: 'test' });
+
+        expect(wrapper.emitted().keydown).toBeFalsy();
+    });
+
+    it('When event.code is equal Enter some methods should be triggered', async () => {
+        const mockUpdateModel = vi.fn();
+
+        wrapper.vm.updateModel = mockUpdateModel;
+
+        wrapper.vm.onKeyDown({ code: 'Enter', preventDefault: () => {} });
+
+        expect(wrapper.vm.updateModel).toBeCalled();
+        expect(wrapper.emitted().keydown).toBeTruthy();
+    });
+
+    it('When onBlur is triggered focused property should be false', async () => {
+        wrapper.vm.onBlur();
+
+        expect(wrapper.vm.focused).toBeFalsy();
+        expect(wrapper.emitted().blur).toBeTruthy();
+    });
+
+    it('is icon changed', async () => {
+        expect(wrapper.find('.p-checkbox-icon').classes()).not.toContain('pi-check');
+        expect(wrapper.find('.p-checkbox-icon').classes()).not.toContain('pi-times');
+
+        await wrapper.setProps({ modelValue: true });
+
+        expect(wrapper.find('.p-checkbox-icon').classes()).toContain('pi-check');
+
+        await wrapper.setProps({ modelValue: false });
+
+        expect(wrapper.find('.p-checkbox-icon').classes()).toContain('pi-times');
+    });
+});
+
+describe('UpdateModel method tests', () => {
+    beforeEach(() => {
+        wrapper = mount(TriStateCheckbox);
+    });
+
+    it('When disable props true updateModal should not triggered emit', async () => {
+        await wrapper.setProps({
+            disabled: true,
+            modelValue: null
+        });
+
+        wrapper.vm.updateModel();
+
+        expect(wrapper.emitted()['update:modelValue']).toBeFalsy();
+    });
+
+    it('When disable props false updateModal should triggered emit', () => {
+        wrapper.vm.updateModel();
+
+        expect(wrapper.emitted()['update:modelValue']).toBeTruthy();
+    });
+
+    modelValues.forEach((modelValue, index) => {
+        it('When modelValue changed update model emitted value should be change', async () => {
+            await wrapper.setProps({
+                modelValue
+            });
+
+            wrapper.vm.updateModel();
+
+            expect(wrapper.emitted()['update:modelValue']).toEqual([[emittedResults[index]]]);
+        });
+    });
+});

components/lib/tristatecheckbox/TriStateCheckbox.vue

@@ -0,0 +1,141 @@
+<template>
+    <div :class="containerClass" @click="onClick($event)">
+        <div class="p-hidden-accessible">
+            <input
+                ref="input"
+                :id="inputId"
+                type="checkbox"
+                :checked="modelValue === true"
+                :tabindex="tabindex"
+                :disabled="disabled"
+                :aria-labelledby="ariaLabelledby"
+                :aria-label="ariaLabel"
+                @keydown="onKeyDown($event)"
+                @focus="onFocus($event)"
+                @blur="onBlur($event)"
+                v-bind="inputProps"
+            />
+        </div>
+        <span class="p-sr-only" aria-live="polite">{{ ariaValueLabel }}</span>
+        <div ref="box" :class="['p-checkbox-box', { 'p-highlight': modelValue != null, 'p-disabled': disabled, 'p-focus': focused }]">
+            <span :class="['p-checkbox-icon', icon]"></span>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'TriStateCheckbox',
+    emits: ['click', 'update:modelValue', 'change', 'keydown', 'focus', 'blur'],
+    props: {
+        modelValue: null,
+        inputId: {
+            type: String,
+            default: null
+        },
+        inputProps: {
+            type: null,
+            default: null
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        tabindex: {
+            type: Number,
+            default: 0
+        },
+        'aria-labelledby': {
+            type: String,
+            default: null
+        },
+        'aria-label': {
+            type: String,
+            default: null
+        }
+    },
+    data() {
+        return {
+            focused: false
+        };
+    },
+    methods: {
+        updateModel() {
+            if (!this.disabled) {
+                let newValue;
+
+                switch (this.modelValue) {
+                    case true:
+                        newValue = false;
+                        break;
+
+                    case false:
+                        newValue = null;
+                        break;
+
+                    default:
+                        newValue = true;
+                        break;
+                }
+
+                this.$emit('update:modelValue', newValue);
+            }
+        },
+        onClick(event) {
+            this.updateModel();
+            this.$emit('click', event);
+            this.$emit('change', event);
+            this.$refs.input.focus();
+        },
+        onKeyDown(event) {
+            if (event.code === 'Enter') {
+                this.updateModel();
+                this.$emit('keydown', event);
+                event.preventDefault();
+            }
+        },
+        onFocus(event) {
+            this.focused = true;
+            this.$emit('focus', event);
+        },
+        onBlur(event) {
+            this.focused = false;
+            this.$emit('blur', event);
+        }
+    },
+    computed: {
+        icon() {
+            let icon;
+
+            switch (this.modelValue) {
+                case true:
+                    icon = 'pi pi-check';
+                    break;
+
+                case false:
+                    icon = 'pi pi-times';
+                    break;
+
+                case null:
+                    icon = null;
+                    break;
+            }
+
+            return icon;
+        },
+        containerClass() {
+            return [
+                'p-checkbox p-component',
+                {
+                    'p-checkbox-checked': this.modelValue === true,
+                    'p-checkbox-disabled': this.disabled,
+                    'p-checkbox-focused': this.focused
+                }
+            ];
+        },
+        ariaValueLabel() {
+            return this.modelValue ? this.$primevue.config.locale.aria.trueLabel : this.modelValue === false ? this.$primevue.config.locale.aria.falseLabel : this.$primevue.config.locale.aria.nullLabel;
+        }
+    }
+};
+</script>

components/lib/tristatecheckbox/package.json

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