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

Merge branch 'v4-prod' into v4

pull/5806/head
tugcekucukoglu 2024-05-18 13:11:53 +03:00
parent ad01e1f232 642a5ce6e1
commit bfe8f4ee20
16 changed files with 0 additions and 737 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
assets/menu/menu.json
View File

@ -94,10 +94,6 @@
"name": "IconField", "name": "IconField",
"to": "/iconfield" "to": "/iconfield"
}, },
{
"name": "InputChips",
"to": "/inputchips"
},
{ {
"name": "InputGroup", "name": "InputGroup",
"to": "/inputgroup" "to": "/inputgroup"

87
doc/inputchips/AccessibilityDoc.vue
View File

@ -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>

54
doc/inputchips/BasicDoc.vue
View File

@ -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>

54
doc/inputchips/DisabledDoc.vue
View File

@ -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>

54
doc/inputchips/FilledDoc.vue
View File

@ -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>

66
doc/inputchips/FloatLabelDoc.vue
View File

@ -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>

18
doc/inputchips/ImportDoc.vue
View File

@ -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>

54
doc/inputchips/InvalidDoc.vue
View File

@ -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>

54
doc/inputchips/SeparatorDoc.vue
View File

@ -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>

82
doc/inputchips/TemplateDoc.vue
View File

@ -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>

8
doc/inputchips/pt/PTImage.vue
View File

@ -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>

35
doc/inputchips/pt/index.vue
View File

@ -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>

38
doc/inputchips/theming/StyledDoc.vue
View File

@ -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>

8
doc/inputchips/theming/TailwindDoc.vue
View File

@ -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>

40
doc/inputchips/theming/index.vue
View File

@ -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>

81
pages/inputchips/index.vue
View File

@ -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>