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

AutoComplete, Calendar, CascadeSelect, Panel unstyled demo updates

pull/4224/head
Tuğçe Küçükoğlu 2023-07-26 16:22:13 +03:00
parent 5a05820ab3
commit 6657f09035
16 changed files with 437 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
doc/autocomplete/StyleDoc.vue → doc/autocomplete/theming/StyledDoc.vue
View File

41
doc/autocomplete/theming/UnstyledDoc.vue Normal file
View File

@ -0,0 +1,41 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
</DocSectionText>
<DocSectionCode :code="code" embedded />
</template>
<script>
export default {
data() {
return {
value: '',
items: [],
code: {
composition: `
<template>
<div class="card flex justify-center">
<AutoComplete v-model="value" :suggestions="items" @complete="search" />
</div>
</template>
<script setup>
import { ref } from "vue";
const value = ref("");
const items = ref([]);
const search = (event) => {
items.value = [...Array(10).keys()].map((item) => event.query + '-' + item);
}
<\/script>`
}
};
},
methods: {
search(event) {
this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
}
}
};
</script>

33
doc/autocomplete/theming/index.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>AutoComplete Theming</h1>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import StyledDoc from './StyledDoc.vue';
import UnstyledDoc from './UnstyledDoc.vue';
export default {
data() {
return {
docs: [
{
id: 'styled',
label: 'Styled',
component: StyledDoc
},
{
id: 'unstyled',
label: 'Unstyled',
component: UnstyledDoc
}
]
};
}
};
</script>

0
doc/calendar/StyleDoc.vue → doc/calendar/theming/StyledDoc.vue
View File

30
doc/calendar/theming/UnstyledDoc.vue Normal file
View File

@ -0,0 +1,30 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
</DocSectionText>
<DocSectionCode :code="code" embedded />
</template>
<script>
export default {
data() {
return {
date: null,
code: {
composition: `
<template>
<div class="card flex justify-center">
<Calendar v-model="date" />
</div>
</template>
<script setup>
import { ref } from "vue";
const date = ref();
<\/script>`
}
};
}
};
</script>

33
doc/calendar/theming/index.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>Calendar Theming</h1>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import StyledDoc from './StyledDoc.vue';
import UnstyledDoc from './UnstyledDoc.vue';
export default {
data() {
return {
docs: [
{
id: 'styled',
label: 'Styled',
component: StyledDoc
},
{
id: 'unstyled',
label: 'Unstyled',
component: UnstyledDoc
}
]
};
}
};
</script>

0
doc/cascadeselect/StyleDoc.vue → doc/cascadeselect/theming/StyledDoc.vue
View File

179
doc/cascadeselect/theming/UnstyledDoc.vue Normal file
View File

@ -0,0 +1,179 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
</DocSectionText>
<DocSectionCode :code="code" embedded />
</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: {
composition: `
<template>
<div class="card flex justify-content-center">
<CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" style="min-width: 14rem" 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>

33
doc/cascadeselect/theming/index.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>CascadeSelect Theming</h1>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import StyledDoc from './StyledDoc.vue';
import UnstyledDoc from './UnstyledDoc.vue';
export default {
data() {
return {
docs: [
{
id: 'styled',
label: 'Styled',
component: StyledDoc
},
{
id: 'unstyled',
label: 'Unstyled',
component: UnstyledDoc
}
]
};
}
};
</script>

0
doc/panel/StyleDoc.vue → doc/panel/theming/StyledDoc.vue
View File

31
doc/panel/theming/UnstyledDoc.vue Normal file
View File

@ -0,0 +1,31 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
</DocSectionText>
<DocSectionCode :code="code" embedded />
</template>
<script>
export default {
data() {
return {
code: {
composition: `
<template>
<div class="card">
<Panel header="Header">
<p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</Panel>
</div>
</template>
<script setup>
<\/script>`
}
};
}
};
</script>

33
doc/panel/theming/index.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>Panel Theming</h1>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import StyledDoc from './StyledDoc.vue';
import UnstyledDoc from './UnstyledDoc.vue';
export default {
data() {
return {
docs: [
{
id: 'styled',
label: 'Styled',
component: StyledDoc
},
{
id: 'unstyled',
label: 'Unstyled',
component: UnstyledDoc
}
]
};
}
};
</script>

11
pages/autocomplete/index.vue
View File

@ -6,6 +6,7 @@
:componentDocs="docs"
:apiDocs="['AutoComplete']"
:ptTabComponent="ptComponent"
:themingDocs="themingDoc"
/>
</template>
@ -21,11 +22,11 @@ import ImportDoc from '@/doc/autocomplete/ImportDoc';
import InvalidDoc from '@/doc/autocomplete/InvalidDoc';
import MultipleDoc from '@/doc/autocomplete/MultipleDoc';
import ObjectsDoc from '@/doc/autocomplete/ObjectsDoc';
import StyleDoc from '@/doc/autocomplete/StyleDoc';
import TemplateDoc from '@/doc/autocomplete/TemplateDoc';
import VirtualScrollDoc from '@/doc/autocomplete/VirtualScrollDoc';
import VeeValidateDoc from '@/doc/autocomplete/form/VeeValidateDoc.vue';
import PTComponent from '@/doc/autocomplete/pt/index.vue';
import ThemingDoc from '@/doc/autocomplete/theming/index.vue';
export default {
data() {
@ -103,18 +104,14 @@ export default {
}
]
},
{
id: 'style',
label: 'Style',
component: StyleDoc
},
{
id: 'accessibility',
label: 'Accessibility',
component: AccessibilityDoc
}
],
ptComponent: PTComponent
ptComponent: PTComponent,
themingDoc: ThemingDoc
};
}
};

20
pages/calendar/index.vue
View File

@ -1,5 +1,13 @@
<template>
<DocComponent title="Vue Calendar Component" header="Calendar" description="Calendar, also known as DatePicker, is a form component to work with dates." :componentDocs="docs" :apiDocs="['Calendar']" :ptTabComponent="ptComponent" />
<DocComponent
title="Vue Calendar Component"
header="Calendar"
description="Calendar, also known as DatePicker, is a form component to work with dates."
:componentDocs="docs"
:apiDocs="['Calendar']"
:ptTabComponent="ptComponent"
:themingDocs="themingDoc"
/>
</template>
<script>
@ -20,12 +28,12 @@ import MonthPickerDoc from '@/doc/calendar/MonthPickerDoc';
import MultipleDoc from '@/doc/calendar/MultipleDoc';
import MultipleMonthsDoc from '@/doc/calendar/MultipleMonthsDoc';
import RangeDoc from '@/doc/calendar/RangeDoc';
import StyleDoc from '@/doc/calendar/StyleDoc';
import TimeDoc from '@/doc/calendar/TimeDoc';
import TouchUIDoc from '@/doc/calendar/TouchUIDoc';
import YearPickerDoc from '@/doc/calendar/YearPickerDoc';
import VeeValidateDoc from '@/doc/calendar/form/VeeValidateDoc.vue';
import PTComponent from '@/doc/calendar/pt/index.vue';
import ThemingDoc from '@/doc/calendar/theming/index.vue';
export default {
data() {
@ -138,18 +146,14 @@ export default {
}
]
},
{
id: 'style',
label: 'Style',
component: StyleDoc
},
{
id: 'accessibility',
label: 'Accessibility',
component: AccessibilityDoc
}
],
ptComponent: PTComponent
ptComponent: PTComponent,
themingDoc: ThemingDoc
};
}
};

11
pages/cascadeselect/index.vue
View File

@ -6,6 +6,7 @@
:componentDocs="docs"
:apiDocs="['CascadeSelect']"
:ptTabComponent="ptComponent"
:themingDocs="themingDoc"
/>
</template>
@ -17,10 +18,10 @@ import FloatLabelDoc from '@/doc/cascadeselect/FloatLabelDoc';
import ImportDoc from '@/doc/cascadeselect/ImportDoc';
import InvalidDoc from '@/doc/cascadeselect/InvalidDoc';
import LoadingStateDoc from '@/doc/cascadeselect/LoadingStateDoc';
import StyleDoc from '@/doc/cascadeselect/StyleDoc';
import TemplateDoc from '@/doc/cascadeselect/TemplateDoc';
import VeeValidateDoc from '@/doc/cascadeselect/form/VeeValidateDoc';
import PTComponent from '@/doc/cascadeselect/pt/index.vue';
import ThemingDoc from '@/doc/cascadeselect/theming/index.vue';
export default {
data() {
@ -73,18 +74,14 @@ export default {
}
]
},
{
id: 'style',
label: 'Style',
component: StyleDoc
},
{
id: 'accessibility',
label: 'Accessibility',
component: AccessibilityDoc
}
],
ptComponent: PTComponent
ptComponent: PTComponent,
themingDoc: ThemingDoc
};
}
};

12
pages/panel/index.vue
View File

@ -1,14 +1,14 @@
<template>
<DocComponent title="Vue Panel Component" header="Panel" description="Panel is a grouping component providing with content toggle feature." :componentDocs="docs" :apiDocs="['Panel']" :ptTabComponent="ptComponent" />
<DocComponent title="Vue Panel Component" header="Panel" description="Panel is a grouping component providing with content toggle feature." :componentDocs="docs" :apiDocs="['Panel']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
</template>
<script>
import AccessibilityDoc from '@/doc/panel/AccessibilityDoc.vue';
import BasicDoc from '@/doc/panel/BasicDoc.vue';
import ImportDoc from '@/doc/panel/ImportDoc.vue';
import StyleDoc from '@/doc/panel/StyleDoc.vue';
import TemplateDoc from '@/doc/panel/TemplateDoc.vue';
import ToggleableDoc from '@/doc/panel/ToggleableDoc.vue';
import PTComponent from '@/doc/panel/pt/index.vue';
import ThemingDoc from '@/doc/panel/theming/index.vue';
export default {
data() {
@ -34,18 +34,14 @@ export default {
label: 'Template',
component: TemplateDoc
},
{
id: 'style',
label: 'Style',
component: StyleDoc
},
{
id: 'accessibility',
label: 'Accessibility',
component: AccessibilityDoc
}
],
ptComponent: PTComponent
ptComponent: PTComponent,
themingDoc: ThemingDoc
};
}
};