Merged new Docs and Demos

doc/progressbar/AccessibilityDoc.vue

@@ -0,0 +1,20 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>
+            ProgressBar components uses <i>progressbar</i> role along with <i>aria-valuemin</i>, <i>aria-valuemax</i> and <i>aria-valuenow</i> attributes. Value to describe the component can be defined using <i>aria-labelledby</i> and
+            <i>aria-label</i> props.
+        </p>
+
+        <pre v-code><code>
+&lt;span id="label_status /"&gt;
+&lt;ProgressBar aria-labelledby="label_status /"&gt;
+
+&lt;ProgressBar aria-label="Status /"&gt;
+
+</code></pre>
+
+        <h3>Keyboard Support</h3>
+        <p>Not applicable.</p>
+    </DocSectionText>
+</template>

doc/progressbar/BasicDoc.vue

@@ -0,0 +1,42 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>ProgressBar is used with the <i>value</i> property.</p>
+    </DocSectionText>
+    <div class="card">
+        <ProgressBar :value="50"></ProgressBar>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<ProgressBar :value="50"></ProgressBar>`,
+                options: `
+<template>
+    <div class="card">
+        <ProgressBar :value="50"></ProgressBar>
+    </div>
+</template>
+
+<script >
+
+<\/script>`,
+                composition: `
+<template>
+    <div class="card">
+        <ProgressBar :value="50"></ProgressBar>
+    </div>
+</template>
+
+<script setup>
+
+<\/script>`
+            }
+        };
+    }
+};
+</script>

doc/progressbar/DynamicDoc.vue

@@ -0,0 +1,129 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Value is reactive so updating it dynamically changes the bar as well.</p>
+    </DocSectionText>
+    <div class="card">
+        <ProgressBar :value="value"></ProgressBar>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: 0,
+            interval: null,
+            code: {
+                basic: `
+<ProgressBar :value="value"></ProgressBar>`,
+                options: `
+<template>
+    <div class="card">
+        <Toast></Toast>
+        <ProgressBar :value="value1" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: 0,
+            interval: null
+        };
+    },
+    mounted() {
+        this.startProgress();
+    },
+    beforeUnmount() {
+        this.endProgress();
+    },
+    methods: {
+        startProgress() {
+            this.interval = setInterval(() => {
+                let newValue = this.value1 + Math.floor(Math.random() * 10) + 1;
+
+                if (newValue >= 100) {
+                    newValue = 100;
+                    this.$toast.add({ severity: 'info', summary: 'Success', detail: 'Process Completed', life: 1000 });
+                }
+
+                this.value1 = newValue;
+            }, 2000);
+        },
+        endProgress() {
+            clearInterval(this.interval);
+            this.interval = null;
+        }
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <div class="card">
+        <Toast></Toast>
+        <ProgressBar :value="value1" />
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onBeforeUnmount } from "vue";
+import { useToast } from "primevue/usetoast";
+
+onMounted(() => {
+    startProgress();
+});
+
+onBeforeUnmount(() => {
+    endProgress();
+});
+
+const toast = useToast();
+const value1 = ref(0);
+const interval = ref();
+const startProgress = () => {
+    interval.value = setInterval(() => {
+        let newValue = value1.value + Math.floor(Math.random() * 10) + 1;
+        if (newValue >= 100) {
+            newValue = 100;
+            toast.add({ severity: 'info', summary: 'Success', detail: 'Process Completed', life: 1000 });
+        }
+        value1.value = newValue;
+    }, 2000);
+};
+const endProgress = () => {
+    clearInterval(interval.value);
+    interval.value = null;
+};
+<\/script>`
+            }
+        };
+    },
+    mounted() {
+        this.startProgress();
+    },
+    beforeUnmount() {
+        this.endProgress();
+    },
+    methods: {
+        startProgress() {
+            this.interval = setInterval(() => {
+                let newValue = this.value + Math.floor(Math.random() * 10) + 1;
+
+                if (newValue >= 100) {
+                    newValue = 100;
+                    this.$toast.add({ severity: 'info', summary: 'Success', detail: 'Process Completed', life: 1000 });
+                    this.endProgress();
+                }
+
+                this.value = newValue;
+            }, 2000);
+        },
+        endProgress() {
+            clearInterval(this.interval);
+            this.interval = null;
+        }
+    }
+};
+</script>

doc/progressbar/ImportDoc.vue

@@ -0,0 +1,16 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `import ProgressBar from 'primevue/progressbar';`
+            }
+        };
+    }
+};
+</script>

doc/progressbar/IndeterminateDoc.vue

@@ -0,0 +1,42 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>For progresses with no value to track, set the <i>mode</i> property to <i>indeterminate</i>.</p>
+    </DocSectionText>
+    <div class="card">
+        <ProgressBar mode="indeterminate" style="height: 6px"></ProgressBar>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<ProgressBar mode="indeterminate" style="height: 6px"></ProgressBar>`,
+                options: `
+<template>
+    <div class="card">
+        <ProgressBar mode="indeterminate" style="height: 6px"></ProgressBar>
+    </div>
+</template>
+
+<script>
+
+<\/script>`,
+                composition: `
+<template>
+    <div class="card">
+        <ProgressBar mode="indeterminate" style="height: 6px"></ProgressBar>
+    </div>
+</template>
+
+<script setup>
+
+<\/script>`
+            }
+        };
+    }
+};
+</script>

doc/progressbar/StyleDoc.vue

@@ -0,0 +1,37 @@
+<template>
+    <DocSectionText id="style" label="Style" v-bind="$attrs">
+        <p>Following is the list of structural style classes, for theming classes visit <NuxtLink to="/theming"> theming</NuxtLink> page.</p>
+    </DocSectionText>
+    <div class="doc-tablewrapper">
+        <table class="doc-table">
+            <thead>
+                <tr>
+                    <th>Name</th>
+                    <th>Element</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>p-progressbar</td>
+                    <td>Container element.</td>
+                </tr>
+                <tr>
+                    <td>p-progressbar-determinate</td>
+                    <td>Container element of a determinate progressbar.</td>
+                </tr>
+                <tr>
+                    <td>p-progressbar-indeterminate</td>
+                    <td>Container element of an indeterminate progressbar.</td>
+                </tr>
+                <tr>
+                    <td>p-progressbar-value</td>
+                    <td>Element whose width changes according to value.</td>
+                </tr>
+                <tr>
+                    <td>p-progressbar-label</td>
+                    <td>Label element that displays the current value.</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>

doc/progressbar/TemplateDoc.vue

@@ -0,0 +1,51 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Custom content inside the ProgressBar is defined with the <i>default</i> slot.</p>
+    </DocSectionText>
+    <div class="card">
+        <ProgressBar :value="value"> {{ value }}/100 </ProgressBar>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: 40,
+            code: {
+                basic: `
+<ProgressBar :value="40"> {{ value }}/100 </ProgressBar>`,
+                options: `
+<template>
+    <div class="card">
+        <ProgressBar :value="40"> {{ value }}/100 </ProgressBar>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: 40
+        }
+    }
+}
+<\/script>`,
+                composition: `
+<template>
+    <div class="card">
+        <ProgressBar :value="40"> {{ value }}/100 </ProgressBar>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const value = ref(40);
+<\/script>`
+            }
+        };
+    }
+};
+</script>