Knob, Listbox, MultiSelect, Password unstyled demo updates
Tuğçe Küçükoğlu
parent
6cfb10b024
commit
bcbfb54ac2
|
|
@ -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>
|
||||
|
|
@ -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,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>
|
||||
|
|
@ -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,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>
|
||||
|
|
@ -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,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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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
|
||||
};
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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
|
||||
};
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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
|
||||
};
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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
|
||||
};
|
||||
}
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue