Fixed #3802 - Improve folder structure for nuxt configurations

components/lib/progressbar/ProgressBar.d.ts

@@ -0,0 +1,67 @@
+/**
+ *
+ * ProgressBar is a process status indicator.
+ *
+ * [Live Demo](https://www.primevue.org/progressbar)
+ *
+ * @module progressbar
+ *
+ */
+import { VNode } from 'vue';
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+
+/**
+ * Defines valid properties in ProgressBar component.
+ */
+export interface ProgressBarProps {
+    /**
+     * Current value of the progress.
+     */
+    value?: number | undefined;
+    /**
+     * Defines the mode of the progress
+     * @defaultValue determinate
+     */
+    mode?: 'determinate' | 'indeterminate' | undefined;
+    /**
+     * Whether to display the progress bar value.
+     * @defaultValue true
+     */
+    showValue?: boolean | undefined;
+}
+
+/**
+ * Defines valid slots in ProgressBar component.
+ */
+export interface ProgressBarSlots {
+    /**
+     * Custom content slot.
+     */
+    default(): VNode[];
+}
+
+/**
+ * Defines valid emits in ProgressBar component.
+ */
+export interface ProgressBarEmits {}
+
+/**
+ * **PrimeVue - ProgressBar**
+ *
+ * ProgressBar is a process status indicator._
+ *
+ * [Live Demo](https://www.primevue.org/progressbar/)
+ * --- ---
+ * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
+ *
+ * @group Component
+ */
+declare class ProgressBar extends ClassComponent<ProgressBarProps, ProgressBarSlots, ProgressBarEmits> {}
+
+declare module '@vue/runtime-core' {
+    interface GlobalComponents {
+        ProgressBar: GlobalComponentConstructor<ProgressBar>;
+    }
+}
+
+export default ProgressBar;

components/lib/progressbar/ProgressBar.spec.js

@@ -0,0 +1,39 @@
+import { mount } from '@vue/test-utils';
+import ProgressBar from './ProgressBar.vue';
+
+describe('ProgressBar.vue', () => {
+    let wrapper;
+
+    beforeEach(() => {
+        wrapper = mount(ProgressBar, {
+            props: {
+                value: 0
+            }
+        });
+    });
+
+    it('should exist', () => {
+        expect(wrapper.find('.p-progressbar.p-component').exists()).toBe(true);
+        expect(wrapper.find('.p-progressbar').attributes()['aria-valuemin']).toBe('0');
+        expect(wrapper.find('.p-progressbar').attributes()['aria-valuemax']).toBe('100');
+    });
+
+    it('should value work', async () => {
+        await wrapper.setProps({ value: 10 });
+
+        expect(wrapper.find('.p-progressbar').attributes()['aria-valuenow']).toBe('10');
+        expect(wrapper.find('.p-progressbar-label').text()).toBe('10%');
+    });
+
+    it('should not show value', async () => {
+        await wrapper.setProps({ showValue: false });
+
+        expect(wrapper.find('.p-progressbar-label').exists()).toBe(false);
+    });
+
+    it('should be indeterminated', async () => {
+        await wrapper.setProps({ mode: 'indeterminate' });
+
+        expect(wrapper.find('.p-progressbar-indeterminate-container').exists()).toBe(true);
+    });
+});

components/lib/progressbar/ProgressBar.vue

@@ -0,0 +1,166 @@
+<template>
+    <div role="progressbar" :class="containerClass" aria-valuemin="0" :aria-valuenow="value" aria-valuemax="100">
+        <div v-if="determinate" class="p-progressbar-value p-progressbar-value-animate" :style="progressStyle">
+            <div v-if="value != null && value !== 0 && showValue" class="p-progressbar-label">
+                <slot>{{ value + '%' }}</slot>
+            </div>
+        </div>
+        <div v-if="indeterminate" class="p-progressbar-indeterminate-container">
+            <div class="p-progressbar-value p-progressbar-value-animate"></div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'ProgressBar',
+    props: {
+        value: {
+            type: Number,
+            default: null
+        },
+        mode: {
+            type: String,
+            default: 'determinate'
+        },
+        showValue: {
+            type: Boolean,
+            default: true
+        }
+    },
+    computed: {
+        containerClass() {
+            return [
+                'p-progressbar p-component',
+                {
+                    'p-progressbar-determinate': this.determinate,
+                    'p-progressbar-indeterminate': this.indeterminate
+                }
+            ];
+        },
+        progressStyle() {
+            return {
+                width: this.value + '%',
+                display: 'flex'
+            };
+        },
+        indeterminate() {
+            return this.mode === 'indeterminate';
+        },
+        determinate() {
+            return this.mode === 'determinate';
+        }
+    }
+};
+</script>
+
+<style>
+.p-progressbar {
+    position: relative;
+    overflow: hidden;
+}
+
+.p-progressbar-determinate .p-progressbar-value {
+    height: 100%;
+    width: 0%;
+    position: absolute;
+    display: none;
+    border: 0 none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+}
+
+.p-progressbar-determinate .p-progressbar-label {
+    display: inline-flex;
+}
+
+.p-progressbar-determinate .p-progressbar-value-animate {
+    transition: width 1s ease-in-out;
+}
+
+.p-progressbar-indeterminate .p-progressbar-value::before {
+    content: '';
+    position: absolute;
+    background-color: inherit;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    will-change: left, right;
+    -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+    animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+}
+
+.p-progressbar-indeterminate .p-progressbar-value::after {
+    content: '';
+    position: absolute;
+    background-color: inherit;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    will-change: left, right;
+    -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+    animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+    -webkit-animation-delay: 1.15s;
+    animation-delay: 1.15s;
+}
+
+@-webkit-keyframes p-progressbar-indeterminate-anim {
+    0% {
+        left: -35%;
+        right: 100%;
+    }
+    60% {
+        left: 100%;
+        right: -90%;
+    }
+    100% {
+        left: 100%;
+        right: -90%;
+    }
+}
+@keyframes p-progressbar-indeterminate-anim {
+    0% {
+        left: -35%;
+        right: 100%;
+    }
+    60% {
+        left: 100%;
+        right: -90%;
+    }
+    100% {
+        left: 100%;
+        right: -90%;
+    }
+}
+
+@-webkit-keyframes p-progressbar-indeterminate-anim-short {
+    0% {
+        left: -200%;
+        right: 100%;
+    }
+    60% {
+        left: 107%;
+        right: -8%;
+    }
+    100% {
+        left: 107%;
+        right: -8%;
+    }
+}
+@keyframes p-progressbar-indeterminate-anim-short {
+    0% {
+        left: -200%;
+        right: 100%;
+    }
+    60% {
+        left: 107%;
+        right: -8%;
+    }
+    100% {
+        left: 107%;
+        right: -8%;
+    }
+}
+</style>

components/lib/progressbar/package.json

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