Fixed #3802 - Improve folder structure for nuxt configurations

components/lib/radiobutton/RadioButton.css

@@ -0,0 +1,30 @@
+.p-radiobutton {
+    position: relative;
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+    vertical-align: bottom;
+}
+
+.p-radiobutton.p-radiobutton-disabled {
+    cursor: default;
+}
+
+.p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.p-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(.1);
+    border-radius: 50%;
+    visibility: hidden;
+}
+
+.p-radiobutton-box.p-highlight .p-radiobutton-icon {
+    transform: translateZ(0) scale(1.0, 1.0);
+    visibility: visible;
+}

components/lib/radiobutton/RadioButton.d.ts

@@ -0,0 +1,103 @@
+/**
+ *
+ * RadioButton is an extension to standard radio button element with theming.
+ *
+ * [Live Demo](https://www.primevue.org/radiobutton/)
+ *
+ * @module radiobutton
+ *
+ */
+import { InputHTMLAttributes } from 'vue';
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+
+/**
+ * Defines valid properties in RadioButton component.
+ */
+export interface RadioButtonProps {
+    /**
+     * Value of the checkbox.
+     */
+    value?: any;
+    /**
+     * Value binding of the checkbox.
+     */
+    modelValue?: any;
+    /**
+     * Name of the input element.
+     */
+    name?: string | undefined;
+    /**
+     * When present, it specifies that the component should be disabled.
+     * @defaultValue false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Identifier of the underlying input element.
+     */
+    inputId?: string | undefined;
+    /**
+     * Inline style of the input field.
+     */
+    inputStyle?: object | undefined;
+    /**
+     * Style class of the input field.
+     */
+    inputClass?: 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 RadioButtonSlots {}
+
+/**
+ * Defines valid emits in RadioButton component.
+ */
+export interface RadioButtonEmits {
+    /**
+     * Emitted when the value changes.
+     * @param {*} value - New value.
+     */
+    'update:modelValue'(value: any): void;
+    /**
+     * Callback to invoke on radio button click.
+     * @param {Event} event - Browser event.
+     */
+    click(event: Event): void;
+    /**
+     * Callback to invoke on radio button value change.
+     * @param {Event} event - Browser event.
+     */
+    change(event: Event): void;
+}
+
+/**
+ * **PrimeVue - RadioButton**
+ *
+ * _RadioButton is an extension to standard radio button element with theming._
+ *
+ * [Live Demo](https://www.primevue.org/radiobutton/)
+ * --- ---
+ * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
+ *
+ * @group Component
+ *
+ */
+declare class RadioButton extends ClassComponent<RadioButtonProps, RadioButtonSlots, RadioButtonEmits> {}
+
+declare module '@vue/runtime-core' {
+    interface GlobalComponents {
+        RadioButton: GlobalComponentConstructor<RadioButton>;
+    }
+}
+
+export default RadioButton;

components/lib/radiobutton/RadioButton.spec.js

@@ -0,0 +1,91 @@
+import { mount } from '@vue/test-utils';
+import RadioButton from './RadioButton.vue';
+
+describe('RadioButton.vue', () => {
+    let wrapper;
+
+    beforeEach(() => {
+        wrapper = mount(RadioButton, {
+            props: {
+                value: 'Tatooine',
+                modelValue: null
+            }
+        });
+    });
+
+    it('shoukd exist', () => {
+        expect(wrapper.find('.p-radiobutton.p-component').exists()).toBe(true);
+        expect(wrapper.find('input').attributes().type).toBe('radio');
+    });
+
+    it('When disabled true and onClick triggered click emit should not be called', async () => {
+        await wrapper.setProps({ disabled: true });
+        await wrapper.vm.onClick();
+
+        expect(wrapper.emitted()['click']).toEqual(undefined);
+        expect(wrapper.emitted()['update:modelValue']).toEqual(undefined);
+    });
+
+    it('When disabled false and onClick triggered click emit should be called', async () => {
+        await wrapper.vm.onClick();
+
+        expect(wrapper.emitted()['update:modelValue'].length).toEqual(1);
+        expect(wrapper.emitted().change.length).toEqual(1);
+    });
+
+    it('When value and modelValue equal and onClick triggered change emit should not be called', async () => {
+        await wrapper.setProps({ modelValue: 'test', value: 'test' });
+        await wrapper.vm.onClick();
+
+        expect(wrapper.emitted()['change']).toEqual(undefined);
+    });
+
+    it('When modelValue changed, Checked should be effected', async () => {
+        await wrapper.setProps({ modelValue: 'Tatooine' });
+
+        expect(wrapper.vm.checked).toBe(true);
+        expect(wrapper.find('.p-radiobutton').classes()).toContain('p-radiobutton-checked');
+    });
+
+    it('When component cliked OnClick method should be called', async () => {
+        const spy = vi.spyOn(wrapper.vm, 'onClick');
+
+        await wrapper.find('.p-radiobutton').trigger('click');
+
+        expect(spy).toHaveBeenCalled();
+    });
+
+    it('When component focused onFocus method should be called', async () => {
+        await wrapper.setProps({ inputId: 'test' });
+
+        const spy = vi.spyOn(wrapper.vm, 'onFocus');
+
+        await wrapper.find('#test').trigger('focus');
+
+        expect(spy).toHaveBeenCalled();
+    });
+
+    it('When onFocus method triggered, false should be true', async () => {
+        await wrapper.vm.onFocus();
+
+        expect(wrapper.vm.focused).toBeTruthy();
+        expect(wrapper.emitted().focus.length).toEqual(1);
+    });
+
+    it('When component blur onBlur method should be called', async () => {
+        await wrapper.setProps({ inputId: 'test' });
+
+        const blurSpy = vi.spyOn(wrapper.vm, 'onBlur');
+
+        await wrapper.find('#test').trigger('blur');
+
+        expect(blurSpy).toHaveBeenCalled();
+    });
+
+    it('When onBlur method triggered, false should be false', async () => {
+        await wrapper.vm.onBlur();
+
+        expect(wrapper.vm.focus).toBeFalsy();
+        expect(wrapper.emitted().blur.length).toEqual(1);
+    });
+});

components/lib/radiobutton/RadioButton.vue

@@ -0,0 +1,111 @@
+<template>
+    <div :class="containerClass" @click="onClick($event)">
+        <div class="p-hidden-accessible">
+            <input
+                ref="input"
+                :id="inputId"
+                type="radio"
+                :class="inputClass"
+                :style="inputStyle"
+                :name="name"
+                :checked="checked"
+                :disabled="disabled"
+                :value="value"
+                :aria-labelledby="ariaLabelledby"
+                :aria-label="ariaLabel"
+                @focus="onFocus"
+                @blur="onBlur"
+                v-bind="inputProps"
+            />
+        </div>
+        <div ref="box" :class="['p-radiobutton-box', { 'p-highlight': checked, 'p-disabled': disabled, 'p-focus': focused }]">
+            <div class="p-radiobutton-icon"></div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { ObjectUtils } from 'primevue/utils';
+
+export default {
+    name: 'RadioButton',
+    emits: ['click', 'update:modelValue', 'change', 'focus', 'blur'],
+    props: {
+        value: null,
+        modelValue: null,
+        name: {
+            type: String,
+            default: null
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        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.$emit('click', event);
+                this.$emit('update:modelValue', this.value);
+                this.$refs.input.focus();
+
+                if (!this.checked) {
+                    this.$emit('change', event);
+                }
+            }
+        },
+        onFocus(event) {
+            this.focused = true;
+            this.$emit('focus', event);
+        },
+        onBlur(event) {
+            this.focused = false;
+            this.$emit('blur', event);
+        }
+    },
+    computed: {
+        checked() {
+            return this.modelValue != null && ObjectUtils.equals(this.modelValue, this.value);
+        },
+        containerClass() {
+            return [
+                'p-radiobutton p-component',
+                {
+                    'p-radiobutton-checked': this.checked,
+                    'p-radiobutton-disabled': this.disabled,
+                    'p-radiobutton-focused': this.focused
+                }
+            ];
+        }
+    }
+};
+</script>

components/lib/radiobutton/package.json

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