Fixed #3802 - Improve folder structure for nuxt configurations

components/lib/togglebutton/ToggleButton.d.ts

@@ -0,0 +1,131 @@
+/**
+ *
+ * ToggleButton is used to select a boolean value using a button.
+ *
+ * [Live Demo](https://www.primevue.org/togglebutton/)
+ *
+ * @module togglebutton
+ *
+ */
+import { InputHTMLAttributes } from 'vue';
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+
+/**
+ * Defines valid properties in ToggleButton component.
+ */
+export interface ToggleButtonProps {
+    /**
+     * Value of the component.
+     * @defaultValue false
+     */
+    modelValue?: boolean | undefined;
+    /**
+     * Icon for the on state.
+     */
+    onIcon?: string | undefined;
+    /**
+     * Icon for the off state.
+     */
+    offIcon?: string | undefined;
+    /**
+     * Label for the on state.
+     * @defaultValue yes
+     */
+    onLabel?: string | undefined;
+    /**
+     * Label for the off state.
+     * @defaultValue no
+     */
+    offLabel?: string | undefined;
+    /**
+     * Position of the icon.
+     * @defaultValue left
+     */
+    iconPos?: 'left' | 'right' | undefined;
+    /**
+     * When present, it specifies that the element should be disabled.
+     * @defaultValue false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Index of the element in tabbing order.
+     */
+    tabindex?: string | undefined;
+    /**
+     * 	Identifier of the focus input to match a label defined for the chips.
+     */
+    inputId?: string | undefined;
+    /**
+     * Style class of the input field.
+     */
+    inputClass?: string | object | undefined;
+    /**
+     * Inline style of the input field.
+     */
+    inputStyle?: 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;
+}
+
+/**
+ * Defines valid slots in ToggleButton component.
+ */
+export interface ToggleButtonSlots {}
+
+/**
+ * Defines valid emits in ToggleButton component.
+ */
+export interface ToggleButtonEmits {
+    /**
+     * Emitted when the value changes.
+     * @param {boolean} value - New value.
+     */
+    'update:modelValue'(value: boolean): 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;
+}
+
+/**
+ * **PrimeVue - ToggleButton**
+ *
+ * _ToggleButton is used to select a boolean value using a button._
+ *
+ * [Live Demo](https://www.primevue.org/togglebutton/)
+ * --- ---
+ * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
+ *
+ * @group Component
+ *
+ */
+declare class ToggleButton extends ClassComponent<ToggleButtonProps, ToggleButtonSlots, ToggleButtonEmits> {}
+
+declare module '@vue/runtime-core' {
+    interface GlobalComponents {
+        ToggleButton: GlobalComponentConstructor<ToggleButton>;
+    }
+}
+
+export default ToggleButton;

components/lib/togglebutton/ToggleButton.spec.js

@@ -0,0 +1,54 @@
+import { mount } from '@vue/test-utils';
+import ToggleButton from './ToggleButton.vue';
+
+describe('ToggleButton', () => {
+    let wrapper;
+
+    beforeEach(() => {
+        wrapper = mount(ToggleButton, {
+            props: {
+                modelValue: false,
+                onIcon: 'pi pi-check',
+                offIcon: 'pi pi-times'
+            }
+        });
+    });
+
+    it('is ToggleButton exist', () => {
+        expect(wrapper.find('.p-togglebutton.p-component').exists()).toBe(true);
+        expect(wrapper.find('span.pi-times.p-button-icon').exists()).toBe(true);
+    });
+
+    it('should have onIcon', async () => {
+        await wrapper.setProps({ modelValue: true });
+
+        expect(wrapper.find('span.pi-check').exists()).toBe(true);
+    });
+
+    it('should click works', async () => {
+        await wrapper.vm.onClick({});
+
+        expect(wrapper.emitted()['update:modelValue'][0]).toEqual([true]);
+
+        await wrapper.setProps({ modelValue: true });
+        await wrapper.vm.onClick({});
+
+        expect(wrapper.emitted()['update:modelValue'][1]).toEqual([false]);
+    });
+
+    it('should be customized', async () => {
+        await wrapper.setProps({
+            modelValue: true,
+            onLabel: 'I confirm',
+            offLabel: 'I reject',
+            style: 'width: 10em'
+        });
+
+        expect(wrapper.find('.p-button-label').text()).toBe('I confirm');
+        expect(wrapper.attributes().style).toContain('width: 10em');
+
+        await wrapper.setProps({ modelValue: false });
+
+        expect(wrapper.find('.p-button-label').text()).toBe('I reject');
+    });
+});

components/lib/togglebutton/ToggleButton.vue

@@ -0,0 +1,162 @@
+<template>
+    <div ref="container" v-ripple :class="buttonClass" @click="onClick($event)">
+        <span class="p-hidden-accessible">
+            <input
+                :id="inputId"
+                type="checkbox"
+                role="switch"
+                :class="inputClass"
+                :style="inputStyle"
+                :checked="modelValue"
+                :value="modelValue"
+                :aria-labelledby="ariaLabelledby"
+                :aria-label="ariaLabel"
+                @focus="onFocus($event)"
+                @blur="onBlur($event)"
+                v-bind="inputProps"
+            />
+        </span>
+        <span v-if="hasIcon" :class="iconClass"></span>
+        <span class="p-button-label">{{ label }}</span>
+    </div>
+</template>
+
+<script>
+import Ripple from 'primevue/ripple';
+
+export default {
+    name: 'ToggleButton',
+    emits: ['update:modelValue', 'change', 'click', 'focus', 'blur'],
+    props: {
+        modelValue: Boolean,
+        onIcon: String,
+        offIcon: String,
+        onLabel: {
+            type: String,
+            default: 'Yes'
+        },
+        offLabel: {
+            type: String,
+            default: 'No'
+        },
+        iconPos: {
+            type: String,
+            default: 'left'
+        },
+        disabled: {
+            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
+        }
+    },
+    outsideClickListener: null,
+    data() {
+        return {
+            focused: false
+        };
+    },
+    mounted() {
+        this.bindOutsideClickListener();
+    },
+    beforeUnmount() {
+        this.unbindOutsideClickListener();
+    },
+    methods: {
+        onClick(event) {
+            if (!this.disabled) {
+                this.$emit('update:modelValue', !this.modelValue);
+                this.$emit('change', event);
+                this.$emit('click', event);
+                this.focused = true;
+            }
+        },
+        onFocus(event) {
+            this.focused = true;
+            this.$emit('focus', event);
+        },
+        onBlur(event) {
+            this.focused = false;
+            this.$emit('blur', event);
+        },
+        bindOutsideClickListener() {
+            if (!this.outsideClickListener) {
+                this.outsideClickListener = (event) => {
+                    if (this.focused && !this.$refs.container.contains(event.target)) {
+                        this.focused = false;
+                    }
+                };
+
+                document.addEventListener('click', this.outsideClickListener);
+            }
+        },
+        unbindOutsideClickListener() {
+            if (this.outsideClickListener) {
+                document.removeEventListener('click', this.outsideClickListener);
+                this.outsideClickListener = null;
+            }
+        }
+    },
+    computed: {
+        buttonClass() {
+            return [
+                'p-button p-togglebutton p-component',
+                {
+                    'p-focus': this.focused,
+                    'p-button-icon-only': this.hasIcon && !this.hasLabel,
+                    'p-disabled': this.disabled,
+                    'p-highlight': this.modelValue === true
+                }
+            ];
+        },
+        iconClass() {
+            return [
+                this.modelValue ? this.onIcon : this.offIcon,
+                'p-button-icon',
+                {
+                    'p-button-icon-left': this.iconPos === 'left' && this.label,
+                    'p-button-icon-right': this.iconPos === 'right' && this.label
+                }
+            ];
+        },
+        hasLabel() {
+            return this.onLabel && this.onLabel.length > 0 && this.offLabel && this.offLabel.length > 0;
+        },
+        hasIcon() {
+            return this.onIcon && this.onIcon.length > 0 && this.offIcon && this.offIcon.length > 0;
+        },
+        label() {
+            return this.hasLabel ? (this.modelValue ? this.onLabel : this.offLabel) : '&nbsp;';
+        }
+    },
+    directives: {
+        ripple: Ripple
+    }
+};
+</script>

components/lib/togglebutton/package.json

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