vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Clear icon demos added

pull/6674/head
tugcekucukoglu 2024-10-28 14:43:20 +03:00
parent 68438dff2d
commit dca2fcc811
6 changed files with 474 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

279
apps/showcase/doc/cascadeselect/ClearIconDoc.vue Normal file
View File

@ -0,0 +1,279 @@
<template>
<DocSectionText v-bind="$attrs">
<p>When <i>showClear</i> is enabled, a clear icon is added to reset the CascadeSelect.</p>
</DocSectionText>
<div class="card flex justify-center">
<CascadeSelect v-model="selectedCity" showClear :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
selectedCity: null,
countries: [
{
name: 'Australia',
code: 'AU',
states: [
{
name: 'New South Wales',
cities: [
{ cname: 'Sydney', code: 'A-SY' },
{ cname: 'Newcastle', code: 'A-NE' },
{ cname: 'Wollongong', code: 'A-WO' }
]
},
{
name: 'Queensland',
cities: [
{ cname: 'Brisbane', code: 'A-BR' },
{ cname: 'Townsville', code: 'A-TO' }
]
}
]
},
{
name: 'Canada',
code: 'CA',
states: [
{
name: 'Quebec',
cities: [
{ cname: 'Montreal', code: 'C-MO' },
{ cname: 'Quebec City', code: 'C-QU' }
]
},
{
name: 'Ontario',
cities: [
{ cname: 'Ottawa', code: 'C-OT' },
{ cname: 'Toronto', code: 'C-TO' }
]
}
]
},
{
name: 'United States',
code: 'US',
states: [
{
name: 'California',
cities: [
{ cname: 'Los Angeles', code: 'US-LA' },
{ cname: 'San Diego', code: 'US-SD' },
{ cname: 'San Francisco', code: 'US-SF' }
]
},
{
name: 'Florida',
cities: [
{ cname: 'Jacksonville', code: 'US-JA' },
{ cname: 'Miami', code: 'US-MI' },
{ cname: 'Tampa', code: 'US-TA' },
{ cname: 'Orlando', code: 'US-OR' }
]
},
{
name: 'Texas',
cities: [
{ cname: 'Austin', code: 'US-AU' },
{ cname: 'Dallas', code: 'US-DA' },
{ cname: 'Houston', code: 'US-HO' }
]
}
]
}
],
code: {
basic: `
<CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
`,
options: `
<template>
<div class="card flex justify-center">
<CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
</div>
</template>
<script>
export default {
data() {
return {
selectedCity: null,
countries: [
{
name: 'Australia',
code: 'AU',
states: [
{
name: 'New South Wales',
cities: [
{ cname: 'Sydney', code: 'A-SY' },
{ cname: 'Newcastle', code: 'A-NE' },
{ cname: 'Wollongong', code: 'A-WO' }
]
},
{
name: 'Queensland',
cities: [
{ cname: 'Brisbane', code: 'A-BR' },
{ cname: 'Townsville', code: 'A-TO' }
]
}
]
},
{
name: 'Canada',
code: 'CA',
states: [
{
name: 'Quebec',
cities: [
{ cname: 'Montreal', code: 'C-MO' },
{ cname: 'Quebec City', code: 'C-QU' }
]
},
{
name: 'Ontario',
cities: [
{ cname: 'Ottawa', code: 'C-OT' },
{ cname: 'Toronto', code: 'C-TO' }
]
}
]
},
{
name: 'United States',
code: 'US',
states: [
{
name: 'California',
cities: [
{ cname: 'Los Angeles', code: 'US-LA' },
{ cname: 'San Diego', code: 'US-SD' },
{ cname: 'San Francisco', code: 'US-SF' }
]
},
{
name: 'Florida',
cities: [
{ cname: 'Jacksonville', code: 'US-JA' },
{ cname: 'Miami', code: 'US-MI' },
{ cname: 'Tampa', code: 'US-TA' },
{ cname: 'Orlando', code: 'US-OR' }
]
},
{
name: 'Texas',
cities: [
{ cname: 'Austin', code: 'US-AU' },
{ cname: 'Dallas', code: 'US-DA' },
{ cname: 'Houston', code: 'US-HO' }
]
}
]
}
]
};
}
};
<\/script>
`,
composition: `
<template>
<div class="card flex justify-center">
<CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
</div>
</template>
<script setup>
import { ref } from "vue";
const selectedCity = ref();
const countries = ref([
{
name: 'Australia',
code: 'AU',
states: [
{
name: 'New South Wales',
cities: [
{ cname: 'Sydney', code: 'A-SY' },
{ cname: 'Newcastle', code: 'A-NE' },
{ cname: 'Wollongong', code: 'A-WO' }
]
},
{
name: 'Queensland',
cities: [
{ cname: 'Brisbane', code: 'A-BR' },
{ cname: 'Townsville', code: 'A-TO' }
]
}
]
},
{
name: 'Canada',
code: 'CA',
states: [
{
name: 'Quebec',
cities: [
{ cname: 'Montreal', code: 'C-MO' },
{ cname: 'Quebec City', code: 'C-QU' }
]
},
{
name: 'Ontario',
cities: [
{ cname: 'Ottawa', code: 'C-OT' },
{ cname: 'Toronto', code: 'C-TO' }
]
}
]
},
{
name: 'United States',
code: 'US',
states: [
{
name: 'California',
cities: [
{ cname: 'Los Angeles', code: 'US-LA' },
{ cname: 'San Diego', code: 'US-SD' },
{ cname: 'San Francisco', code: 'US-SF' }
]
},
{
name: 'Florida',
cities: [
{ cname: 'Jacksonville', code: 'US-JA' },
{ cname: 'Miami', code: 'US-MI' },
{ cname: 'Tampa', code: 'US-TA' },
{ cname: 'Orlando', code: 'US-OR' }
]
},
{
name: 'Texas',
cities: [
{ cname: 'Austin', code: 'US-AU' },
{ cname: 'Dallas', code: 'US-DA' },
{ cname: 'Houston', code: 'US-HO' }
]
}
]
}
]);
<\/script>
`
}
};
}
};
</script>

78
apps/showcase/doc/multiselect/ClearIconDoc.vue Normal file
View File

@ -0,0 +1,78 @@
<template>
<DocSectionText v-bind="$attrs">
<p>When <i>showClear</i> is enabled, a clear icon is added to reset the MultiSelect.</p>
</DocSectionText>
<div class="card flex justify-center">
<MultiSelect v-model="selectedCities" showClear :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" class="w-full md:w-80" />
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
selectedCities: null,
cities: [
{ name: 'New York', code: 'NY' },
{ name: 'Rome', code: 'RM' },
{ name: 'London', code: 'LDN' },
{ name: 'Istanbul', code: 'IST' },
{ name: 'Paris', code: 'PRS' }
],
code: {
basic: `
<MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" filter placeholder="Select Cities"
:maxSelectedLabels="3" class="w-full md:w-80" />
`,
options: `
<template>
<div class="card flex justify-center">
<MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" filter placeholder="Select Cities"
:maxSelectedLabels="3" class="w-full md:w-80" />
</div>
</template>
<script>
export default {
data() {
return {
selectedCities: null,
cities: [
{ name: 'New York', code: 'NY' },
{ name: 'Rome', code: 'RM' },
{ name: 'London', code: 'LDN' },
{ name: 'Istanbul', code: 'IST' },
{ name: 'Paris', code: 'PRS' }
]
};
}
};
<\/script>
`,
composition: `
<template>
<div class="card flex justify-center">
<MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" filter placeholder="Select Cities"
:maxSelectedLabels="3" class="w-full md:w-80" />
</div>
</template>
<script setup>
import { ref } from "vue";
const selectedCities = ref();
const cities = ref([
{ name: 'New York', code: 'NY' },
{ name: 'Rome', code: 'RM' },
{ name: 'London', code: 'LDN' },
{ name: 'Istanbul', code: 'IST' },
{ name: 'Paris', code: 'PRS' }
]);
<\/script>
`
}
};
}
};
</script>

99
apps/showcase/doc/treeselect/ClearIconDoc.vue Normal file
View File

@ -0,0 +1,99 @@
<template>
<DocSectionText v-bind="$attrs">
<p>When <i>showClear</i> is enabled, a clear icon is added to reset the TreeSelect.</p>
</DocSectionText>
<div class="card flex justify-center">
<TreeSelect v-model="selectedValue" showClear :options="nodes" placeholder="Select Item" class="md:w-80 w-full" />
</div>
<DocSectionCode :code="code" :service="['NodeService']" v-bind="$attrs" />
</template>
<script>
import { NodeService } from '/service/NodeService';
export default {
data() {
return {
nodes: null,
selectedValue: null,
code: {
basic: `
<TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-80 w-full" />
`,
options: `
<template>
<div class="card flex justify-center">
<TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-80 w-full" />
</div>
</template>
<script>
import { NodeService } from './service/NodeService';
export default {
data() {
return {
nodes: null,
selectedValue: null,
}
},
mounted() {
NodeService.getTreeNodes().then((data) => (this.nodes = data));
}
}
<\/script>
`,
composition: `
<template>
<div class="card flex justify-center">
<TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-80 w-full" />
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { NodeService } from './service/NodeService';
const nodes = ref(null);
const selectedValue = ref(null);
onMounted(() => {
NodeService.getTreeNodes().then((data) => (nodes.value = data));
});
<\/script>
`,
data: `
{
key: '0',
label: 'Documents',
data: 'Documents Folder',
icon: 'pi pi-fw pi-inbox',
children: [
{
key: '0-0',
label: 'Work',
data: 'Work Folder',
icon: 'pi pi-fw pi-cog',
children: [
{ key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
{ key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
]
},
{
key: '0-1',
label: 'Home',
data: 'Home Folder',
icon: 'pi pi-fw pi-home',
children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
}
]
},
...`
}
};
},
mounted() {
NodeService.getTreeNodes().then((data) => (this.nodes = data));
}
};
</script>

6
apps/showcase/pages/cascadeselect/index.vue
View File

@ -13,6 +13,7 @@
<script> <script>
import AccessibilityDoc from '@/doc/cascadeselect/AccessibilityDoc.vue'; import AccessibilityDoc from '@/doc/cascadeselect/AccessibilityDoc.vue';
import BasicDoc from '@/doc/cascadeselect/BasicDoc.vue'; import BasicDoc from '@/doc/cascadeselect/BasicDoc.vue';
import ClearIconDoc from '@/doc/cascadeselect/ClearIconDoc.vue';
import DisabledDoc from '@/doc/cascadeselect/DisabledDoc.vue'; import DisabledDoc from '@/doc/cascadeselect/DisabledDoc.vue';
import FilledDoc from '@/doc/cascadeselect/FilledDoc.vue'; import FilledDoc from '@/doc/cascadeselect/FilledDoc.vue';
import FloatLabelDoc from '@/doc/cascadeselect/FloatLabelDoc.vue'; import FloatLabelDoc from '@/doc/cascadeselect/FloatLabelDoc.vue';
@ -55,6 +56,11 @@ export default {
label: 'Loading State', label: 'Loading State',
component: LoadingStateDoc component: LoadingStateDoc
}, },
{
id: 'clearicon',
label: 'Clear Icon',
component: ClearIconDoc
},
{ {
id: 'filled', id: 'filled',
label: 'Filled', label: 'Filled',

6
apps/showcase/pages/multiselect/index.vue
View File

@ -13,6 +13,7 @@
<script> <script>
import AccessibilityDoc from '@/doc/multiselect/AccessibilityDoc.vue'; import AccessibilityDoc from '@/doc/multiselect/AccessibilityDoc.vue';
import BasicDoc from '@/doc/multiselect/BasicDoc.vue'; import BasicDoc from '@/doc/multiselect/BasicDoc.vue';
import ClearIconDoc from '@/doc/multiselect/ClearIconDoc.vue';
import ChipsDoc from '@/doc/multiselect/ChipsDoc.vue'; import ChipsDoc from '@/doc/multiselect/ChipsDoc.vue';
import DisabledDoc from '@/doc/multiselect/DisabledDoc.vue'; import DisabledDoc from '@/doc/multiselect/DisabledDoc.vue';
import FilledDoc from '@/doc/multiselect/FilledDoc.vue'; import FilledDoc from '@/doc/multiselect/FilledDoc.vue';
@ -69,6 +70,11 @@ export default {
label: 'Filter', label: 'Filter',
component: FilterDoc component: FilterDoc
}, },
{
id: 'clearicon',
label: 'Clear Icon',
component: ClearIconDoc
},
{ {
id: 'loadingstate', id: 'loadingstate',
label: 'Loading State', label: 'Loading State',

6
apps/showcase/pages/treeselect/index.vue
View File

@ -14,6 +14,7 @@
import AccessibilityDoc from '@/doc/treeselect/AccessibilityDoc.vue'; import AccessibilityDoc from '@/doc/treeselect/AccessibilityDoc.vue';
import BasicDoc from '@/doc/treeselect/BasicDoc.vue'; import BasicDoc from '@/doc/treeselect/BasicDoc.vue';
import CheckboxDoc from '@/doc/treeselect/CheckboxDoc.vue'; import CheckboxDoc from '@/doc/treeselect/CheckboxDoc.vue';
import ClearIconDoc from '@/doc/treeselect/ClearIconDoc.vue';
import DisabledDoc from '@/doc/treeselect/DisabledDoc.vue'; import DisabledDoc from '@/doc/treeselect/DisabledDoc.vue';
import FilledDoc from '@/doc/treeselect/FilledDoc.vue'; import FilledDoc from '@/doc/treeselect/FilledDoc.vue';
import FilterDoc from '@/doc/treeselect/FilterDoc.vue'; import FilterDoc from '@/doc/treeselect/FilterDoc.vue';
@ -68,6 +69,11 @@ export default {
label: 'Filter', label: 'Filter',
component: FilterDoc component: FilterDoc
}, },
{
id: 'clearicon',
label: 'Clear Icon',
component: ClearIconDoc
},
{ {
id: 'template', id: 'template',
label: 'Template', label: 'Template',