Merged new Docs and Demos

2025-05-09 00:42:36 +00:00 · 2023-02-28 11:29:30 +03:00 · 2023-02-28 11:29:30 +03:00 · dfcc8ef4e7
commit dfcc8ef4e7
parent 296cc217fb
1235 changed files with 130757 additions and 122640 deletions
--- a/doc/autocomplete/TemplateDoc.vue
+++ b/doc/autocomplete/TemplateDoc.vue
@ -0,0 +1,141 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Item template allows displaying custom content inside the suggestions panel. The slotProps variable passed to the template provides an item property to represent an item in the suggestions collection. In addition <i>optiongroup</i>,
+            <i>chip</i>, <i>header</i> and <i>footer</i> slots are provided for further customization
+        </p>
+    </DocSectionText>
+    <div class="card flex justify-content-center">
+        <AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search">
+            <template #option="slotProps">
+                <div class="flex align-options-center">
+                    <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.option.code.toLowerCase()} mr-2`" style="width: 18px" />
+                    <div>{{ slotProps.option.name }}</div>
+                </div>
+            </template>
+        </AutoComplete>
+    </div>
+    <DocSectionCode :code="code" :service="['CountryService']" />
+</template>
+
+<script>
+import { CountryService } from '@/service/CountryService';
+export default {
+    data() {
+        return {
+            selectedCountry: null,
+            countries: null,
+            filteredCountries: null,
+            code: {
+                basic: `
+<AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search">
+    <template #option="slotProps">
+        <div class="flex align-options-center">
+            <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
+            <div>{{ slotProps.option.name }}</div>
+        </div>
+    </template>
+</AutoComplete>`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search">
+            <template #option="slotProps">
+                <div class="flex align-options-center">
+                    <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
+                    <div>{{ slotProps.option.name }}</div>
+                </div>
+            </template>
+        </AutoComplete>
+    </div>
+</template>
+
+<script>
+import { CountryService } from '@/service/CountryService';
+
+export default {
+    data() {
+        return {
+            countries: null,
+            selectedCountry: null,
+            filteredCountries: null
+        };
+    },
+    mounted() {
+        CountryService.getCountries().then((data) => (this.countries = data));
+    },
+    methods: {
+        search(event) {
+            setTimeout(() => {
+                if (!event.query.trim().length) {
+                    this.filteredCountries = [...this.countries];
+                } else {
+                    this.filteredCountries = this.countries.filter((country) => {
+                        return country.name.toLowerCase().startsWith(event.query.toLowerCase());
+                    });
+                }
+            }, 250);
+        }
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search">
+            <template #option="slotProps">
+                <div class="flex align-options-center">
+                    <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
+                    <div>{{ slotProps.option.name }}</div>
+                </div>
+            </template>
+        </AutoComplete>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { CountryService } from "@/service/CountryService";
+
+onMounted(() => {
+    CountryService.getCountries().then((data) => (countries.value = data));
+});
+
+const countries = ref();
+const selectedCountry = ref();
+const filteredCountries = ref();
+
+
+const search = (event) => {
+    setTimeout(() => {
+        if (!event.query.trim().length) {
+            filteredCountries.value = [...countries.value];
+        } else {
+            filteredCountries.value = countries.value.filter((country) => {
+                return country.name.toLowerCase().startsWith(event.query.toLowerCase());
+            });
+        }
+    }, 250);
+}
+<\/script>`
+            }
+        };
+    },
+    mounted() {
+        CountryService.getCountries().then((data) => (this.countries = data));
+    },
+    methods: {
+        search(event) {
+            setTimeout(() => {
+                if (!event.query.trim().length) {
+                    this.filteredCountries = [...this.countries];
+                } else {
+                    this.filteredCountries = this.countries.filter((country) => {
+                        return country.name.toLowerCase().startsWith(event.query.toLowerCase());
+                    });
+                }
+            }, 250);
+        }
+    }
+};
+</script>