Remove InputChips demos
tugcekucukoglu
parent
ccfdde521a
commit
642a5ce6e1
|
|
@ -94,10 +94,6 @@
|
|||
"name": "IconField",
|
||||
"to": "/iconfield"
|
||||
},
|
||||
{
|
||||
"name": "InputChips",
|
||||
"to": "/inputchips"
|
||||
},
|
||||
{
|
||||
"name": "InputGroup",
|
||||
"to": "/inputgroup"
|
||||
|
|
|
|||
|
|
@ -1,87 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
|
||||
<h3>Screen Reader</h3>
|
||||
<p>
|
||||
Value to describe the component can either be provided via <i>label</i> tag combined with <i>inputId</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props. Chip list uses <i>listbox</i> role with <i>aria-orientation</i> set to
|
||||
horizontal whereas each chip has the <i>option</i> role with <i>aria-label</i> set to the label of the chip.
|
||||
</p>
|
||||
|
||||
<DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
|
||||
|
||||
<h3>Input Field Keyboard Support</h3>
|
||||
<div class="doc-tablewrapper">
|
||||
<table class="doc-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Key</th>
|
||||
<th>Function</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><i>tab</i></td>
|
||||
<td>Moves focus to the input element</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i>enter</i></td>
|
||||
<td>Adds a new chips using the input field value.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i>backspace</i></td>
|
||||
<td>Deletes the previous chip if the input field is empty.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i>left arrow</i></td>
|
||||
<td>Moves focus to the previous chip if available and input field is empty.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h3>Chip Keyboard Support</h3>
|
||||
<div class="doc-tablewrapper">
|
||||
<table class="doc-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Key</th>
|
||||
<th>Function</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><i>left arrow</i></td>
|
||||
<td>Moves focus to the previous chip if available.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i>right arrow</i></td>
|
||||
<td>Moves focus to the next chip, if there is none then input field receives the focus.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i>backspace</i></td>
|
||||
<td>Deletes the chips and adds focus to the input field.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
basic: `
|
||||
<label for="chips1">Tags</label>
|
||||
<InputChips inputId="chips1" />
|
||||
|
||||
<span id="chips2">Tags</span>
|
||||
<InputChips aria-labelledby="chips2" />
|
||||
|
||||
<InputChips aria-label="Tags" />
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>InputChips is used as a controlled input with <i>v-model</i> property where it should be an array.</p>
|
||||
</DocSectionText>
|
||||
<div class="card p-fluid">
|
||||
<InputChips v-model="value" />
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: null,
|
||||
code: {
|
||||
basic: `
|
||||
<InputChips v-model="value" />
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card p-fluid">
|
||||
<InputChips v-model="value" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: null
|
||||
};
|
||||
}
|
||||
};
|
||||
<\/script>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card p-fluid">
|
||||
<InputChips v-model="value" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const value = ref();
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
|
||||
</DocSectionText>
|
||||
<div class="card p-fluid">
|
||||
<InputChips v-model="value" disabled />
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: null,
|
||||
code: {
|
||||
basic: `
|
||||
<InputChips v-model="value" disabled />
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card p-fluid">
|
||||
<InputChips v-model="value" disabled />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: null
|
||||
};
|
||||
}
|
||||
};
|
||||
<\/script>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card p-fluid">
|
||||
<InputChips v-model="value" disabled />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const value = ref();
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
|
||||
</DocSectionText>
|
||||
<div class="card p-fluid">
|
||||
<InputChips v-model="value" variant="filled" />
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: null,
|
||||
code: {
|
||||
basic: `
|
||||
<InputChips v-model="value" variant="filled" />
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card p-fluid">
|
||||
<InputChips v-model="value" variant="filled" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: null
|
||||
};
|
||||
}
|
||||
};
|
||||
<\/script>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card p-fluid">
|
||||
<InputChips v-model="value" variant="filled" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const value = ref();
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,66 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>A floating label appears on top of the input field when focused. Visit <PrimeVueNuxtLink to="/floatlabel">FloatLabel</PrimeVueNuxtLink> documentation for more information.</p>
|
||||
</DocSectionText>
|
||||
<div class="card p-fluid">
|
||||
<FloatLabel>
|
||||
<InputChips id="chips" v-model="value" />
|
||||
<label for="chips">InputChips</label>
|
||||
</FloatLabel>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: null,
|
||||
code: {
|
||||
basic: `
|
||||
<FloatLabel>
|
||||
<InputChips id="chips" v-model="value" />
|
||||
<label for="chips">InputChips</label>
|
||||
</FloatLabel>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card p-fluid">
|
||||
<FloatLabel>
|
||||
<InputChips id="chips" v-model="value" />
|
||||
<label for="chips">InputChips</label>
|
||||
</FloatLabel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: null
|
||||
};
|
||||
}
|
||||
};
|
||||
<\/script>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card p-fluid">
|
||||
<FloatLabel>
|
||||
<InputChips id="chips" v-model="value" />
|
||||
<label for="chips">InputChips</label>
|
||||
</FloatLabel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const value = ref();
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
basic: `
|
||||
import InputChips from 'primevue/inputchips';
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
|
||||
</DocSectionText>
|
||||
<div class="card p-fluid">
|
||||
<InputChips v-model="value" invalid />
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: null,
|
||||
code: {
|
||||
basic: `
|
||||
<InputChips v-model="value" invalid />
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card p-fluid">
|
||||
<InputChips v-model="value" invalid />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: null
|
||||
};
|
||||
}
|
||||
};
|
||||
<\/script>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card p-fluid">
|
||||
<InputChips v-model="value" invalid />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const value = ref();
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>A new chip is added when <i>enter</i> key is pressed, <i>separator</i> property allows definining an additional key. Currently only valid value is <i>,</i> to create a new item when comma key is pressed.</p>
|
||||
</DocSectionText>
|
||||
<div class="card p-fluid">
|
||||
<InputChips v-model="value" separator="," />
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: null,
|
||||
code: {
|
||||
basic: `
|
||||
<InputChips v-model="value" separator="," />
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card p-fluid">
|
||||
<InputChips v-model="value" separator="," />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: null
|
||||
}
|
||||
}
|
||||
}
|
||||
<\/script>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card p-fluid">
|
||||
<InputChips v-model="value" separator="," />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const value = ref();
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,82 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Chip content is customized using <i>item</i> slot that receives a single chip value as a parameter.</p>
|
||||
</DocSectionText>
|
||||
<div class="card p-fluid">
|
||||
<InputChips v-model="value">
|
||||
<template #chip="slotProps">
|
||||
<div>
|
||||
<span>{{ slotProps.value }} - (active) </span>
|
||||
<i class="pi pi-user-plus" style="font-size: 14px"></i>
|
||||
</div>
|
||||
</template>
|
||||
</InputChips>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: null,
|
||||
code: {
|
||||
basic: `
|
||||
<InputChips v-model="value">
|
||||
<template #chip="slotProps">
|
||||
<div>
|
||||
<span>{{ slotProps.value }} - (active) </span>
|
||||
<i class="pi pi-user-plus" style="font-size: 14px"></i>
|
||||
</div>
|
||||
</template>
|
||||
</InputChips>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card p-fluid">
|
||||
<InputChips v-model="value">
|
||||
<template #chip="slotProps">
|
||||
<div>
|
||||
<span>{{ slotProps.value }} - (active) </span>
|
||||
<i class="pi pi-user-plus" style="font-size: 14px"></i>
|
||||
</div>
|
||||
</template>
|
||||
</InputChips>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: null
|
||||
};
|
||||
}
|
||||
};
|
||||
<\/script>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card p-fluid">
|
||||
<InputChips v-model="value">
|
||||
<template #chip="slotProps">
|
||||
<div>
|
||||
<span>{{ slotProps.value }} - (active) </span>
|
||||
<i class="pi pi-user-plus" style="font-size: 14px"></i>
|
||||
</div>
|
||||
</template>
|
||||
</InputChips>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const value = ref();
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>{{ $attrs.description }}</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/chips.jpg" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
<template>
|
||||
<div class="doc-main">
|
||||
<div class="doc-intro">
|
||||
<h1>InputChips Pass Through</h1>
|
||||
</div>
|
||||
<DocSections :docs="docs" />
|
||||
</div>
|
||||
<DocSectionNav :docs="docs" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOptions } from '@/components/doc/helpers';
|
||||
import PTImage from './PTImage.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
id: 'pt.image',
|
||||
label: 'Wireframe',
|
||||
component: PTImage
|
||||
},
|
||||
{
|
||||
id: 'pt.doc.inputchips',
|
||||
label: 'InputChips PT Options',
|
||||
component: DocApiTable,
|
||||
data: getPTOptions('InputChips')
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>List of class names used in the styled mode.</p>
|
||||
</DocSectionText>
|
||||
|
||||
<div class="doc-tablewrapper">
|
||||
<table class="doc-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Element</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>p-inputchips</td>
|
||||
<td>Container element</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-inputchips-token</td>
|
||||
<td>Chip element container.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-inputchips-token-icon</td>
|
||||
<td>Icon of a chip.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-inputchips-token-label</td>
|
||||
<td>label of a chip.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-inputchips-input-token</td>
|
||||
<td>Container of input element.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer" class="doc-link">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style
|
||||
PrimeVue components with Tailwind CSS.
|
||||
</p>
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
<template>
|
||||
<div class="doc-main">
|
||||
<div class="doc-intro">
|
||||
<h1>InputChips Theming</h1>
|
||||
</div>
|
||||
<DocSections :docs="docs" />
|
||||
</div>
|
||||
<DocSectionNav :docs="docs" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
id: 'theming.styled',
|
||||
label: 'Styled',
|
||||
component: StyledDoc
|
||||
},
|
||||
{
|
||||
id: 'theming.unstyled',
|
||||
label: 'Unstyled',
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
id: 'theming.tailwind',
|
||||
label: 'Tailwind',
|
||||
component: TailwindDoc
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,81 +0,0 @@
|
|||
<template>
|
||||
<DocComponent
|
||||
title="Vue InputChips Component"
|
||||
header="InputChips"
|
||||
description="InputChips is used to enter multiple values on an input field."
|
||||
:componentDocs="docs"
|
||||
:apiDocs="['InputChips']"
|
||||
:ptTabComponent="ptComponent"
|
||||
:themingDocs="themingDoc"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AccessibilityDoc from '@/doc/inputchips/AccessibilityDoc.vue';
|
||||
import BasicDoc from '@/doc/inputchips/BasicDoc.vue';
|
||||
import DisabledDoc from '@/doc/inputchips/DisabledDoc.vue';
|
||||
import FilledDoc from '@/doc/inputchips/FilledDoc.vue';
|
||||
import FloatLabelDoc from '@/doc/inputchips/FloatLabelDoc.vue';
|
||||
import ImportDoc from '@/doc/inputchips/ImportDoc.vue';
|
||||
import InvalidDoc from '@/doc/inputchips/InvalidDoc.vue';
|
||||
import SeparatorDoc from '@/doc/inputchips/SeparatorDoc.vue';
|
||||
import TemplateDoc from '@/doc/inputchips/TemplateDoc.vue';
|
||||
import PTComponent from '@/doc/inputchips/pt/index.vue';
|
||||
import ThemingDoc from '@/doc/inputchips/theming/index.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
id: 'import',
|
||||
label: 'Import',
|
||||
component: ImportDoc
|
||||
},
|
||||
{
|
||||
id: 'basic',
|
||||
label: 'Basic',
|
||||
component: BasicDoc
|
||||
},
|
||||
{
|
||||
id: 'separator',
|
||||
label: 'Separator',
|
||||
component: SeparatorDoc
|
||||
},
|
||||
{
|
||||
id: 'template',
|
||||
label: 'Template',
|
||||
component: TemplateDoc
|
||||
},
|
||||
{
|
||||
id: 'floatlabel',
|
||||
label: 'Float Label',
|
||||
component: FloatLabelDoc
|
||||
},
|
||||
{
|
||||
id: 'filled',
|
||||
label: 'Filled',
|
||||
component: FilledDoc
|
||||
},
|
||||
{
|
||||
id: 'invalid',
|
||||
label: 'Invalid',
|
||||
component: InvalidDoc
|
||||
},
|
||||
{
|
||||
id: 'disabled',
|
||||
label: 'Disabled',
|
||||
component: DisabledDoc
|
||||
},
|
||||
{
|
||||
id: 'accessibility',
|
||||
label: 'Accessibility',
|
||||
component: AccessibilityDoc
|
||||
}
|
||||
],
|
||||
ptComponent: PTComponent,
|
||||
themingDoc: ThemingDoc
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Loading…
Reference in New Issue