More work on #6651

primefaces · Oct 26, 2024 · b34c4ec · b34c4ec
1 parent 25ac573
commit b34c4ec
Show file tree

Hide file tree

Showing 43 changed files with 456 additions and 64 deletions.
diff --git a/apps/showcase/doc/autocomplete/SizesDoc.vue b/apps/showcase/doc/autocomplete/SizesDoc.vue
@@ -3,9 +3,9 @@
         <p>AutoComplete provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
     </DocSectionText>
     <div class="card flex flex-col items-center gap-4">
-        <AutoComplete v-model="value1" :suggestions="items1" @complete="search" size="small" placeholder="Small" />
-        <AutoComplete v-model="value2" :suggestions="items2" @complete="search" placeholder="Normal" />
-        <AutoComplete v-model="value3" :suggestions="items3" @complete="search" size="large" placeholder="Large" />
+        <AutoComplete v-model="value1" :suggestions="items" @complete="search" size="small" placeholder="Small" dropdown />
+        <AutoComplete v-model="value2" :suggestions="items" @complete="search" placeholder="Normal" dropdown />
+        <AutoComplete v-model="value3" :suggestions="items" @complete="search" size="large" placeholder="Large" dropdown />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -14,42 +14,38 @@
 export default {
     data() {
         return {
-            value1: '',
-            value2: '',
-            value3: '',
-            items1: [],
-            items2: [],
-            items3: [],
+            value1: null,
+            value2: null,
+            value3: null,
+            items: [],
             code: {
                 basic: `
-<AutoComplete v-model="value1" :suggestions="items1" @complete="search" size="small" placeholder="Small" />
-<AutoComplete v-model="value2" :suggestions="items2" @complete="search" placeholder="Normal" />
-<AutoComplete v-model="value3" :suggestions="items3" @complete="search" size="large" placeholder="Large" />
+<AutoComplete v-model="value1" :suggestions="items" @complete="search" size="small" placeholder="Small" dropdown />
+<AutoComplete v-model="value2" :suggestions="items" @complete="search" placeholder="Normal" dropdown />
+<AutoComplete v-model="value3" :suggestions="items" @complete="search" size="large" placeholder="Large" dropdown />
 `,
                 options: `
 <template>
     <div class="card flex flex-col items-center gap-4">
-        <AutoComplete v-model="value1" :suggestions="items1" @complete="search" size="small" placeholder="Small" />
-        <AutoComplete v-model="value2" :suggestions="items2" @complete="search" placeholder="Normal" />
-        <AutoComplete v-model="value3" :suggestions="items3" @complete="search" size="large" placeholder="Large" />
+        <AutoComplete v-model="value1" :suggestions="items" @complete="search" size="small" placeholder="Small" dropdown />
+        <AutoComplete v-model="value2" :suggestions="items" @complete="search" placeholder="Normal" dropdown />
+        <AutoComplete v-model="value3" :suggestions="items" @complete="search" size="large" placeholder="Large" dropdown />
     </div>
 </template>
 
 <script>
 export default {
     data() {
         return {
-            value1: '',
-            value2: '',
-            value3: '',
-            items1: [],
-            items2: [],
-            items3: [],
+            value1: null,
+            value2: null,
+            value3: null,
+            items: [],
         };
     },
     methods: {
-        search(event) {
-            this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
+        search() {
+            this.items = [];
         }
     }
 };
@@ -58,33 +54,31 @@ export default {
                 composition: `
 <template>
     <div class="card flex flex-col items-center gap-4">
-        <AutoComplete v-model="value1" :suggestions="items1" @complete="search" size="small" placeholder="Small" />
-        <AutoComplete v-model="value2" :suggestions="items2" @complete="search" placeholder="Normal" />
-        <AutoComplete v-model="value3" :suggestions="items3" @complete="search" size="large" placeholder="Large" />
+        <AutoComplete v-model="value1" :suggestions="items" @complete="search" size="small" placeholder="Small" dropdown />
+        <AutoComplete v-model="value2" :suggestions="items" @complete="search" placeholder="Normal" dropdown />
+        <AutoComplete v-model="value3" :suggestions="items" @complete="search" size="large" placeholder="Large" dropdown />
     </div>
 </template>
 
 <script setup>
 import { ref } from "vue";
 
-const value1 = ref("");
-const value2 = ref("");
-const value3 = ref("");
-const items1 = ref([]);
-const items2 = ref([]);
-const items3 = ref([]);
+const value1 = ref(null);
+const value2 = ref(null);
+const value3 = ref(null);
+const items = ref([]);
 
-const search = (event) => {
-    items.value = [...Array(10).keys()].map((item) => event.query + '-' + item);
+const search = () => {
+    items.value = [];
 }
 <\/script>
 `
             }
         };
     },
     methods: {
-        search(event) {
-            this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
+        search() {
+            this.items = [];
         }
     }
 };

diff --git a/apps/showcase/doc/datepicker/SizesDoc.vue b/apps/showcase/doc/datepicker/SizesDoc.vue
@@ -3,9 +3,9 @@
         <p>DatePicker provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
     </DocSectionText>
     <div class="card flex flex-col items-center gap-4">
-        <DatePicker v-model="value1" size="small" placeholder="Small" />
-        <DatePicker v-model="value2" placeholder="Normal" />
-        <DatePicker v-model="value3" size="large" placeholder="Large" />
+        <DatePicker v-model="value1" size="small" placeholder="Small" showIcon iconDisplay="input" />
+        <DatePicker v-model="value2" placeholder="Normal" showIcon iconDisplay="input" />
+        <DatePicker v-model="value3" size="large" placeholder="Large" showIcon iconDisplay="input" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -19,16 +19,16 @@ export default {
             value3: null,
             code: {
                 basic: `
-<DatePicker v-model="value1" size="small" placeholder="Small" />
-<DatePicker v-model="value2" placeholder="Normal" />
-<DatePicker v-model="value3" size="large" placeholder="Large" />
+<DatePicker v-model="value1" size="small" placeholder="Small" showIcon iconDisplay="input" />
+<DatePicker v-model="value2" placeholder="Normal" showIcon iconDisplay="input" />
+<DatePicker v-model="value3" size="large" placeholder="Large" showIcon iconDisplay="input" />
 `,
                 options: `
 <template>
     <div class="card flex flex-col items-center gap-4">
-        <DatePicker v-model="value1" size="small" placeholder="Small" />
-        <DatePicker v-model="value2" placeholder="Normal" />
-        <DatePicker v-model="value3" size="large" placeholder="Large" />
+        <DatePicker v-model="value1" size="small" placeholder="Small" showIcon iconDisplay="input" />
+        <DatePicker v-model="value2" placeholder="Normal" showIcon iconDisplay="input" />
+        <DatePicker v-model="value3" size="large" placeholder="Large" showIcon iconDisplay="input" />
     </div>
 </template>
 
@@ -47,9 +47,9 @@ export default {
                 composition: `
 <template>
     <div class="card flex flex-col items-center gap-4">
-        <DatePicker v-model="value1" size="small" placeholder="Small" />
-        <DatePicker v-model="value2" placeholder="Normal" />
-        <DatePicker v-model="value3" size="large" placeholder="Large" />
+        <DatePicker v-model="value1" size="small" placeholder="Small" showIcon iconDisplay="input" />
+        <DatePicker v-model="value2" placeholder="Normal" showIcon iconDisplay="input" />
+        <DatePicker v-model="value3" size="large" placeholder="Large" showIcon iconDisplay="input" />
     </div>
 </template>
 

diff --git a/apps/showcase/doc/selectbutton/BasicDoc.vue b/apps/showcase/doc/selectbutton/BasicDoc.vue
@@ -6,7 +6,7 @@
         </p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <SelectButton v-model="value" :options="options" aria-labelledby="basic" />
+        <SelectButton v-model="value" :options="options" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -19,12 +19,12 @@ export default {
             options: ['One-Way', 'Return'],
             code: {
                 basic: `
-<SelectButton v-model="value" :options="options" aria-labelledby="basic" />
+<SelectButton v-model="value" :options="options" />
 `,
                 options: `
 <template>
     <div class="card flex justify-center">
-        <SelectButton v-model="value" :options="options" aria-labelledby="basic" />
+        <SelectButton v-model="value" :options="options" />
     </div>
 </template>
 
@@ -42,7 +42,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-center">
-        <SelectButton v-model="value" :options="options" aria-labelledby="basic" />
+        <SelectButton v-model="value" :options="options" />
     </div>
 </template>
 

diff --git a/apps/showcase/doc/selectbutton/SizesDoc.vue b/apps/showcase/doc/selectbutton/SizesDoc.vue
@@ -0,0 +1,71 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>SelectButton provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
+    </DocSectionText>
+    <div class="card flex flex-col items-center gap-4">
+        <SelectButton v-model="value1" :options="options" size="small" />
+        <SelectButton v-model="value2" :options="options" />
+        <SelectButton v-model="value3" :options="options" size="large" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: 'Beginner',
+            value3: 'Expert',
+            options: ['Beginner', 'Expert'],
+            code: {
+                basic: `
+<SelectButton v-model="value1" :options="options" size="small" />
+<SelectButton v-model="value2" :options="options" />
+<SelectButton v-model="value3" :options="options" size="large" />
+`,
+                options: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <SelectButton v-model="value1" :options="options" size="small" />
+        <SelectButton v-model="value2" :options="options" />
+        <SelectButton v-model="value3" :options="options" size="large" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: 'Beginner',
+            value3: 'Expert',
+            options: ['Beginner', 'Expert'],
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <SelectButton v-model="value1" :options="options" size="small" />
+        <SelectButton v-model="value2" :options="options" />
+        <SelectButton v-model="value3" :options="options" size="large" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value1 = ref(null);
+const value2 = ref('Beginner');
+const value3 = ref('Expert');
+const options = ref(['Beginner', 'Expert']);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/togglebutton/SizesDoc.vue b/apps/showcase/doc/togglebutton/SizesDoc.vue
@@ -0,0 +1,68 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>ToggleButton provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
+    </DocSectionText>
+    <div class="card flex flex-col items-center gap-4">
+        <ToggleButton v-model="value1" onLabel="On" offLabel="Off" size="small" class="min-w-16" />
+        <ToggleButton v-model="value2" onLabel="On" offLabel="Off" class="min-w-20" />
+        <ToggleButton v-model="value3" onLabel="On" offLabel="Off" size="large" class="min-w-24" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: false,
+            value2: false,
+            value3: false,
+            code: {
+                basic: `
+<ToggleButton v-model="value1" onLabel="On" offLabel="Off" size="small" class="min-w-16" />
+<ToggleButton v-model="value2" onLabel="On" offLabel="Off" class="min-w-20" />
+<ToggleButton v-model="value3" onLabel="On" offLabel="Off" size="large" class="min-w-24" />
+`,
+                options: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <ToggleButton v-model="value1" onLabel="On" offLabel="Off" size="small" class="min-w-16" />
+        <ToggleButton v-model="value2" onLabel="On" offLabel="Off" class="min-w-20" />
+        <ToggleButton v-model="value3" onLabel="On" offLabel="Off" size="large" class="min-w-24" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: false,
+            value2: false,
+            value3: false
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <ToggleButton v-model="value1" onLabel="On" offLabel="Off" size="small" class="min-w-16" />
+        <ToggleButton v-model="value2" onLabel="On" offLabel="Off" class="min-w-20" />
+        <ToggleButton v-model="value3" onLabel="On" offLabel="Off" size="large" class="min-w-24" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value1 = ref(false);
+const value2 = ref(false);
+const value3 = ref(false);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/pages/datepicker/index.vue b/apps/showcase/pages/datepicker/index.vue
@@ -129,7 +129,7 @@ export default {
                     component: IftaLabelDoc
                 },
                 {
-                    id: 'sizez',
+                    id: 'sizes',
                     label: 'Sizes',
                     component: SizesDoc
                 },

diff --git a/apps/showcase/pages/selectbutton/index.vue b/apps/showcase/pages/selectbutton/index.vue
@@ -16,6 +16,7 @@ import BasicDoc from '@/doc/selectbutton/BasicDoc.vue';
 import DisabledDoc from '@/doc/selectbutton/DisabledDoc.vue';
 import FormsDoc from '@/doc/selectbutton/FormsDoc.vue';
 import ImportDoc from '@/doc/selectbutton/ImportDoc.vue';
+import SizesDoc from '@/doc/selectbutton/SizesDoc.vue';
 import InvalidDoc from '@/doc/selectbutton/InvalidDoc.vue';
 import MultipleDoc from '@/doc/selectbutton/MultipleDoc.vue';
 import TemplateDoc from '@/doc/selectbutton/TemplateDoc.vue';
@@ -51,6 +52,11 @@ export default {
                     label: 'Template',
                     component: TemplateDoc
                 },
+                {
+                    id: 'sizes',
+                    label: 'Sizes',
+                    component: SizesDoc
+                },
                 {
                     id: 'invalid',
                     label: 'Invalid',

diff --git a/apps/showcase/pages/togglebutton/index.vue b/apps/showcase/pages/togglebutton/index.vue
@@ -17,6 +17,7 @@ import CustomizedDoc from '@/doc/togglebutton/CustomizedDoc.vue';
 import DisabledDoc from '@/doc/togglebutton/DisabledDoc.vue';
 import FormsDoc from '@/doc/togglebutton/FormsDoc.vue';
 import ImportDoc from '@/doc/togglebutton/ImportDoc.vue';
+import SizesDoc from '@/doc/togglebutton/SizesDoc.vue';
 import InvalidDoc from '@/doc/togglebutton/InvalidDoc.vue';
 import PTComponent from '@/doc/togglebutton/pt/index.vue';
 import ThemingDoc from '@/doc/togglebutton/theming/index.vue';
@@ -45,6 +46,11 @@ export default {
                     label: 'Customized',
                     component: CustomizedDoc
                 },
+                {
+                    id: 'sizes',
+                    label: 'Sizes',
+                    component: SizesDoc
+                },
                 {
                     id: 'invalid',
                     label: 'Invalid',