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

Knob, Listbox, MultiSelect, Password unstyled demo updates

pull/4224/head
Tuğçe Küçükoğlu 2023-07-26 18:07:06 +03:00
parent 6cfb10b024
commit bcbfb54ac2
16 changed files with 305 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

30
doc/knob/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 {
value: 0,
code: {
composition: `
<template>
<div class="card flex justify-center">
<Knob v-model="value" />
</div>
</template>
<script setup>
import { ref } from 'vue';
const value = ref(0);
<\/script>`
}
};
}
};
</script>

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

@ -0,0 +1,33 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>Knob 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/listbox/StyleDoc.vue → doc/listbox/theming/StyledDoc.vue
View File

44
doc/listbox/theming/UnstyledDoc.vue Normal file
View File

@ -0,0 +1,44 @@
<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,
cities: [
{ name: 'New York', code: 'NY' },
{ name: 'Rome', code: 'RM' },
{ name: 'London', code: 'LDN' },
{ name: 'Istanbul', code: 'IST' },
{ name: 'Paris', code: 'PRS' }
],
code: {
composition: `
<template>
<div class="card flex justify-center">
<Listbox v-model="selectedCity" :options="cities" optionLabel="name" class="w-full md:w-14rem" />
</div>
</template>
<script setup>
import { ref } from "vue";
const selectedCity = 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>

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

@ -0,0 +1,33 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>Listbox 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/multiselect/StyleDoc.vue → doc/multiselect/theming/StyledDoc.vue
View File

45
doc/multiselect/theming/UnstyledDoc.vue Normal file
View File

@ -0,0 +1,45 @@
<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 {
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: {
composition: `
<template>
<div class="card flex justify-center">
<MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select Cities"
:maxSelectedLabels="3" class="w-full md:w-20rem" />
</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>

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

@ -0,0 +1,33 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>MultiSelect 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/password/StyleDoc.vue → doc/password/theming/StyledDoc.vue
View File

30
doc/password/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 {
value: null,
code: {
composition: `
<template>
<div class="card flex justify-center">
<Password v-model="value" />
</div>
</template>
<script setup>
import { ref } from 'vue';
const value = ref(null);
<\/script>`
}
};
}
};
</script>

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

@ -0,0 +1,33 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>Password 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>

12
pages/knob/index.vue
View File

@ -1,5 +1,5 @@
<template>
<DocComponent title="Vue Knob Component" header="Knob" description="Knob is a form component to define number inputs with a dial." :componentDocs="docs" :apiDocs="['Knob']" :ptTabComponent="ptComponent" />
<DocComponent title="Vue Knob Component" header="Knob" description="Knob is a form component to define number inputs with a dial." :componentDocs="docs" :apiDocs="['Knob']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
</template>
<script>
@ -14,10 +14,10 @@ import ReadOnlyDoc from '@/doc/knob/ReadOnlyDoc.vue';
import SizeDoc from '@/doc/knob/SizeDoc.vue';
import StepDoc from '@/doc/knob/StepDoc.vue';
import StrokeDoc from '@/doc/knob/StrokeDoc.vue';
import StyleDoc from '@/doc/knob/StyleDoc.vue';
import TemplateDoc from '@/doc/knob/TemplateDoc.vue';
import VeeValidateDoc from '@/doc/knob/form/VeeValidateDoc.vue';
import PTComponent from '@/doc/knob/pt/index.vue';
import ThemingDoc from '@/doc/knob/theming/index.vue';
export default {
data() {
@ -90,18 +90,14 @@ export default {
}
]
},
{
id: 'style',
label: 'Style',
component: StyleDoc
},
{
id: 'accessibility',
label: 'Accessibility',
component: AccessibilityDoc
}
],
ptComponent: PTComponent
ptComponent: PTComponent,
themingDoc: ThemingDoc
};
}
};

12
pages/listbox/index.vue
View File

@ -1,5 +1,5 @@
<template>
<DocComponent title="Vue Listbox Component" header="Listbox" description="Listbox is used to select one or more values from a list of items." :componentDocs="docs" :apiDocs="['Listbox']" :ptTabComponent="ptComponent" />
<DocComponent title="Vue Listbox Component" header="Listbox" description="Listbox is used to select one or more values from a list of items." :componentDocs="docs" :apiDocs="['Listbox']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
</template>
<script>
@ -11,11 +11,11 @@ import GroupDoc from '@/doc/listbox/GroupDoc';
import ImportDoc from '@/doc/listbox/ImportDoc';
import InvalidDoc from '@/doc/listbox/InvalidDoc';
import MultipleDoc from '@/doc/listbox/MultipleDoc';
import StyleDoc from '@/doc/listbox/StyleDoc';
import TemplateDoc from '@/doc/listbox/TemplateDoc';
import VirtualScrollDoc from '@/doc/listbox/VirtualScrollDoc';
import VeeValidateDoc from '@/doc/listbox/form/VeeValidateDoc';
import PTComponent from '@/doc/listbox/pt/index.vue';
import ThemingDoc from '@/doc/listbox/theming/index.vue';
export default {
data() {
@ -78,18 +78,14 @@ export default {
}
]
},
{
id: 'style',
label: 'Style',
component: StyleDoc
},
{
id: 'accessibility',
label: 'Accessibility',
component: AccessibilityDoc
}
],
ptComponent: PTComponent
ptComponent: PTComponent,
themingDoc: ThemingDoc
};
}
};

20
pages/multiselect/index.vue
View File

@ -1,5 +1,13 @@
<template>
<DocComponent title="Vue MultiSelect Component" header="MultiSelect" description="MultiSelect is used to select multiple items from a collection." :componentDocs="docs" :apiDocs="['MultiSelect']" :ptTabComponent="ptComponent" />
<DocComponent
title="Vue MultiSelect Component"
header="MultiSelect"
description="MultiSelect is used to select multiple items from a collection."
:componentDocs="docs"
:apiDocs="['MultiSelect']"
:ptTabComponent="ptComponent"
:themingDocs="themingDoc"
/>
</template>
<script>
@ -13,11 +21,11 @@ import GroupDoc from '@/doc/multiselect/GroupDoc';
import ImportDoc from '@/doc/multiselect/ImportDoc';
import InvalidDoc from '@/doc/multiselect/InvalidDoc';
import LoadingStateDoc from '@/doc/multiselect/LoadingStateDoc';
import StyleDoc from '@/doc/multiselect/StyleDoc';
import TemplateDoc from '@/doc/multiselect/TemplateDoc';
import VirtualScrollDoc from '@/doc/multiselect/VirtualScrollDoc';
import VeeValidateDoc from '@/doc/multiselect/form/VeeValidateDoc';
import PTComponent from '@/doc/multiselect/pt/index.vue';
import ThemingDoc from '@/doc/multiselect/theming/index.vue';
export default {
data() {
@ -90,18 +98,14 @@ export default {
}
]
},
{
id: 'style',
label: 'Style',
component: StyleDoc
},
{
id: 'accessibility',
label: 'Accessibility',
component: AccessibilityDoc
}
],
ptComponent: PTComponent
ptComponent: PTComponent,
themingDoc: ThemingDoc
};
}
};

12
pages/password/index.vue
View File

@ -1,5 +1,5 @@
<template>
<DocComponent title="Vue Password Component" header="Password" description="Password displays strength indicator for password fields." :componentDocs="docs" :apiDocs="['Password']" :ptTabComponent="ptComponent" />
<DocComponent title="Vue Password Component" header="Password" description="Password displays strength indicator for password fields." :componentDocs="docs" :apiDocs="['Password']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
</template>
<script>
@ -11,11 +11,11 @@ import ImportDoc from '@/doc/password/ImportDoc.vue';
import InvalidDoc from '@/doc/password/InvalidDoc.vue';
import LocaleDoc from '@/doc/password/LocaleDoc.vue';
import MeterDoc from '@/doc/password/MeterDoc.vue';
import StyleDoc from '@/doc/password/StyleDoc.vue';
import TemplateDoc from '@/doc/password/TemplateDoc.vue';
import ToggleMaskDoc from '@/doc/password/ToggleMaskDoc.vue';
import VeeValidateDoc from '@/doc/password/form/VeeValidateDoc.vue';
import PTComponent from '@/doc/password/pt/index.vue';
import ThemingDoc from '@/doc/password/theming/index.vue';
export default {
data() {
@ -78,18 +78,14 @@ export default {
}
]
},
{
id: 'style',
label: 'Style',
component: StyleDoc
},
{
id: 'accessibility',
label: 'Accessibility',
component: AccessibilityDoc
}
],
ptComponent: PTComponent
ptComponent: PTComponent,
themingDoc: ThemingDoc
};
}
};