Fixed #3802 - Improve folder structure for nuxt configurations

components/lib/selectbutton/SelectButton.d.ts

@@ -0,0 +1,141 @@
+/**
+ *
+ * SelectButton is used to choose single or multiple items from a list using buttons.
+ *
+ * [Live Demo](https://www.primevue.org/selectbutton/)
+ *
+ * @module selectbutton
+ *
+ */
+import { VNode } from 'vue';
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+
+/**
+ * Custom change event.
+ * @see {@link SelectButtonEmits.change}
+ */
+export interface SelectButtonChangeEvent {
+    /**
+     * Browser event.
+     */
+    originalEvent: Event;
+    /**
+     * Single value or an array of values that are selected.
+     */
+    value: any;
+}
+
+/**
+ * Defines valid properties in SelectButton component.
+ */
+export interface SelectButtonProps {
+    /**
+     * Value of the component.
+     */
+    modelValue?: any;
+    /**
+     * An array of selectitems to display as the available options.
+     */
+    options?: any[] | undefined;
+    /**
+     * Property name or getter function to use as the label of an option.
+     */
+    optionLabel?: string | ((data: any) => string) | undefined;
+    /**
+     * Property name or getter function to use as the value of an option, defaults to the option itself when not defined.
+     */
+    optionValue?: string | ((data: any) => any) | undefined;
+    /**
+     * Property name or getter function to use as the disabled flag of an option, defaults to false when not defined.
+     */
+    optionDisabled?: string | ((data: any) => boolean) | undefined;
+    /**
+     * When specified, allows selecting multiple values.
+     * @defaultValue false
+     */
+    multiple?: boolean | undefined;
+    /**
+     * When present, it specifies that the element should be disabled.
+     * @defaultValue false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * A property to uniquely identify an option.
+     */
+    dataKey?: string | undefined;
+    /**
+     * Whether selection can be cleared.
+     * @defaultValue false
+     */
+    unselectable?: boolean | undefined;
+    /**
+     * Identifier of the underlying element.
+     */
+    'aria-labelledby'?: string | undefined;
+}
+
+/**
+ * Defines valid slots in SelectButton component.
+ */
+export interface SelectButtonSlots {
+    /**
+     * Custom content for each option.
+     * @param {Object} scope - option slot's params.
+     */
+    option(scope: {
+        /**
+         * Option instance
+         */
+        option: any;
+        /**
+         * Index of the option
+         */
+        index: number;
+    }): VNode[];
+}
+
+/**
+ * Defines valid emits in SelectButton component.
+ */
+export interface SelectButtonEmits {
+    /**
+     * Emitted when the value changes.
+     * @param {*} value - New value.
+     */
+    'update:modelValue'(value: any): void;
+    /**
+     * Callback to invoke on value change.
+     * @param {SelectButtonChangeEvent} event - Custom change event.
+     */
+    change(event: SelectButtonChangeEvent): void;
+    /**
+     * Callback to invoke on focus.
+     */
+    focus(event: Event): void;
+    /**
+     * Callback to invoke on blur.
+     * @param {Event} event - Browser event.
+     */
+    blur(event: Event): void;
+}
+
+/**
+ * **PrimeVue - SelectButton**
+ *
+ * _SelectButton is used to choose single or multiple items from a list using buttons._
+ *
+ * [Live Demo](https://www.primevue.org/selectbutton/)
+ * --- ---
+ * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
+ *
+ * @group Component
+ */
+declare class SelectButton extends ClassComponent<SelectButtonProps, SelectButtonSlots, SelectButtonEmits> {}
+
+declare module '@vue/runtime-core' {
+    interface GlobalComponents {
+        SelectButton: GlobalComponentConstructor<SelectButton>;
+    }
+}
+
+export default SelectButton;

components/lib/selectbutton/SelectButton.spec.js

@@ -0,0 +1,55 @@
+import { mount } from '@vue/test-utils';
+import SelectButton from './SelectButton.vue';
+
+describe('SelectButton.vue', () => {
+    let wrapper;
+
+    beforeEach(() => {
+        wrapper = mount(SelectButton, {
+            props: {
+                modelValue: null,
+                options: ['Off', 'On']
+            }
+        });
+    });
+
+    it('should exist', () => {
+        expect(wrapper.find('.p-selectbutton.p-component').exists()).toBe(true);
+        expect(wrapper.findAll('.p-button.p-component').length).toBe(2);
+    });
+
+    it('should option select', async () => {
+        await wrapper.vm.onOptionSelect({}, wrapper.vm.options[0]);
+
+        expect(wrapper.emitted()['update:modelValue'][0]).toEqual(['Off']);
+
+        await wrapper.setProps({ modelValue: wrapper.vm.options[0] });
+
+        expect(wrapper.findAll('.p-button.p-component')[0].classes()).toContain('p-highlight');
+    });
+});
+
+describe('multiple select', () => {
+    let wrapper;
+
+    beforeEach(() => {
+        wrapper = mount(SelectButton, {
+            props: {
+                modelValue: null,
+                options: [
+                    { name: 'Option 1', value: 1 },
+                    { name: 'Option 2', value: 2 },
+                    { name: 'Option 3', value: 3 }
+                ],
+                optionLabel: 'name',
+                multiple: true
+            }
+        });
+    });
+
+    it('should select', async () => {
+        await wrapper.setProps({ modelValue: wrapper.vm.options });
+
+        expect(wrapper.findAll('.p-highlight').length).toBe(3);
+    });
+});

components/lib/selectbutton/SelectButton.vue

@@ -0,0 +1,209 @@
+<template>
+    <div ref="container" :class="containerClass" role="group" :aria-labelledby="ariaLabelledby">
+        <div
+            v-for="(option, i) of options"
+            :key="getOptionRenderKey(option)"
+            v-ripple
+            :tabindex="i === focusedIndex ? '0' : '-1'"
+            :aria-label="getOptionLabel(option)"
+            :role="multiple ? 'checkbox' : 'radio'"
+            :aria-checked="isSelected(option)"
+            :aria-disabled="optionDisabled"
+            :class="getButtonClass(option, i)"
+            @click="onOptionSelect($event, option, i)"
+            @keydown="onKeydown($event, option, i)"
+            @focus="onFocus($event)"
+            @blur="onBlur($event, option)"
+        >
+            <slot name="option" :option="option" :index="i">
+                <span class="p-button-label">{{ getOptionLabel(option) }}</span>
+            </slot>
+        </div>
+    </div>
+</template>
+
+<script>
+import Ripple from 'primevue/ripple';
+import { DomHandler, ObjectUtils } from 'primevue/utils';
+
+export default {
+    name: 'SelectButton',
+    emits: ['update:modelValue', 'focus', 'blur', 'change'],
+    props: {
+        modelValue: null,
+        options: Array,
+        optionLabel: null,
+        optionValue: null,
+        optionDisabled: null,
+        multiple: Boolean,
+        unselectable: {
+            type: Boolean,
+            default: false
+        },
+        disabled: Boolean,
+        dataKey: null,
+        'aria-labelledby': {
+            type: String,
+            default: null
+        }
+    },
+    data() {
+        return {
+            focusedIndex: 0
+        };
+    },
+    mounted() {
+        this.defaultTabIndexes();
+    },
+    methods: {
+        defaultTabIndexes() {
+            let opts = DomHandler.find(this.$refs.container, '.p-button');
+            let firstHighlight = DomHandler.findSingle(this.$refs.container, '.p-highlight');
+
+            for (let i = 0; i < opts.length; i++) {
+                if ((DomHandler.hasClass(opts[i], 'p-highlight') && ObjectUtils.equals(opts[i], firstHighlight)) || (firstHighlight === null && i == 0)) {
+                    this.focusedIndex = i;
+                }
+            }
+        },
+        getOptionLabel(option) {
+            return this.optionLabel ? ObjectUtils.resolveFieldData(option, this.optionLabel) : option;
+        },
+        getOptionValue(option) {
+            return this.optionValue ? ObjectUtils.resolveFieldData(option, this.optionValue) : option;
+        },
+        getOptionRenderKey(option) {
+            return this.dataKey ? ObjectUtils.resolveFieldData(option, this.dataKey) : this.getOptionLabel(option);
+        },
+        isOptionDisabled(option) {
+            return this.optionDisabled ? ObjectUtils.resolveFieldData(option, this.optionDisabled) : false;
+        },
+        onOptionSelect(event, option, index) {
+            if (this.disabled || this.isOptionDisabled(option)) {
+                return;
+            }
+
+            let selected = this.isSelected(option);
+
+            if (selected && this.unselectable) {
+                return;
+            }
+
+            let optionValue = this.getOptionValue(option);
+            let newValue;
+
+            if (this.multiple) {
+                if (selected) newValue = this.modelValue.filter((val) => !ObjectUtils.equals(val, optionValue, this.equalityKey));
+                else newValue = this.modelValue ? [...this.modelValue, optionValue] : [optionValue];
+            } else {
+                newValue = selected ? null : optionValue;
+            }
+
+            this.focusedIndex = index;
+            this.$emit('update:modelValue', newValue);
+            this.$emit('change', { event: event, value: newValue });
+        },
+        isSelected(option) {
+            let selected = false;
+            let optionValue = this.getOptionValue(option);
+
+            if (this.multiple) {
+                if (this.modelValue) {
+                    for (let val of this.modelValue) {
+                        if (ObjectUtils.equals(val, optionValue, this.equalityKey)) {
+                            selected = true;
+                            break;
+                        }
+                    }
+                }
+            } else {
+                selected = ObjectUtils.equals(this.modelValue, optionValue, this.equalityKey);
+            }
+
+            return selected;
+        },
+        onKeydown(event, option, index) {
+            switch (event.code) {
+                case 'Space': {
+                    this.onOptionSelect(event, option, index);
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'ArrowDown':
+
+                case 'ArrowRight': {
+                    this.changeTabIndexes(event, 'next');
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'ArrowUp':
+
+                case 'ArrowLeft': {
+                    this.changeTabIndexes(event, 'prev');
+                    event.preventDefault();
+                    break;
+                }
+
+                default:
+                    //no op
+                    break;
+            }
+        },
+        changeTabIndexes(event, direction) {
+            let firstTabableChild, index;
+
+            for (let i = 0; i <= this.$refs.container.children.length - 1; i++) {
+                if (this.$refs.container.children[i].getAttribute('tabindex') === '0') firstTabableChild = { elem: this.$refs.container.children[i], index: i };
+            }
+
+            if (direction === 'prev') {
+                if (firstTabableChild.index === 0) index = this.$refs.container.children.length - 1;
+                else index = firstTabableChild.index - 1;
+            } else {
+                if (firstTabableChild.index === this.$refs.container.children.length - 1) index = 0;
+                else index = firstTabableChild.index + 1;
+            }
+
+            this.focusedIndex = index;
+            this.$refs.container.children[index].focus();
+        },
+        onFocus(event) {
+            this.$emit('focus', event);
+        },
+        onBlur(event, option) {
+            if (event.target && event.relatedTarget && event.target.parentElement !== event.relatedTarget.parentElement) {
+                this.defaultTabIndexes();
+            }
+
+            this.$emit('blur', event, option);
+        },
+        getButtonClass(option) {
+            return [
+                'p-button p-component',
+                {
+                    'p-highlight': this.isSelected(option),
+                    'p-disabled': this.isOptionDisabled(option)
+                }
+            ];
+        }
+    },
+    computed: {
+        containerClass() {
+            return [
+                'p-selectbutton p-buttonset p-component',
+                {
+                    'p-disabled': this.disabled
+                }
+            ];
+        },
+        equalityKey() {
+            return this.optionValue ? null : this.dataKey;
+        }
+    },
+    directives: {
+        ripple: Ripple
+    }
+};
+</script>

components/lib/selectbutton/package.json

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