Implemented Tag for Volt
parent
6bcfeeb142
commit
68a54c3728
|
@ -94,6 +94,10 @@
|
||||||
"name": "Slider",
|
"name": "Slider",
|
||||||
"to": "/slider"
|
"to": "/slider"
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"name": "Tag",
|
||||||
|
"to": "/tag"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"name": "Textarea",
|
"name": "Textarea",
|
||||||
"to": "/textarea"
|
"to": "/textarea"
|
||||||
|
|
|
@ -0,0 +1,26 @@
|
||||||
|
<template>
|
||||||
|
<DocSectionText v-bind="$attrs">
|
||||||
|
<p>Label of the tag is defined with the <i>value</i> property.</p>
|
||||||
|
</DocSectionText>
|
||||||
|
<div class="card flex justify-center">
|
||||||
|
<Tag value="New"></Tag>
|
||||||
|
</div>
|
||||||
|
<DocSectionCode :code="code" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import Tag from '@/volt/tag';
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const code = ref(`
|
||||||
|
<template>
|
||||||
|
<div class="card flex justify-center">
|
||||||
|
<Tag value="New"></Tag>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import Tag from '@/volt/tag';
|
||||||
|
<\/script>
|
||||||
|
`);
|
||||||
|
</script>
|
|
@ -0,0 +1,38 @@
|
||||||
|
<template>
|
||||||
|
<DocSectionText v-bind="$attrs">
|
||||||
|
<p>A font icon next to the value can be displayed with the <i>icon</i> property.</p>
|
||||||
|
</DocSectionText>
|
||||||
|
<div class="card flex flex-wrap justify-center gap-2">
|
||||||
|
<Tag icon="pi pi-user" value="Primary"></Tag>
|
||||||
|
<Tag icon="pi pi-search" severity="secondary" value="Secondary"></Tag>
|
||||||
|
<Tag icon="pi pi-check" severity="success" value="Success"></Tag>
|
||||||
|
<Tag icon="pi pi-info-circle" severity="info" value="Info"></Tag>
|
||||||
|
<Tag icon="pi pi-exclamation-triangle" severity="warn" value="Warn"></Tag>
|
||||||
|
<Tag icon="pi pi-times" severity="danger" value="Danger"></Tag>
|
||||||
|
<Tag icon="pi pi-cog" severity="contrast" value="Contrast"></Tag>
|
||||||
|
</div>
|
||||||
|
<DocSectionCode :code="code" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import Tag from '@/volt/tag';
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const code = ref(`
|
||||||
|
<template>
|
||||||
|
<div class="card flex flex-wrap justify-center gap-2">
|
||||||
|
<Tag icon="pi pi-user" value="Primary"></Tag>
|
||||||
|
<Tag icon="pi pi-search" severity="secondary" value="Secondary"></Tag>
|
||||||
|
<Tag icon="pi pi-check" severity="success" value="Success"></Tag>
|
||||||
|
<Tag icon="pi pi-info-circle" severity="info" value="Info"></Tag>
|
||||||
|
<Tag icon="pi pi-exclamation-triangle" severity="warn" value="Warn"></Tag>
|
||||||
|
<Tag icon="pi pi-times" severity="danger" value="Danger"></Tag>
|
||||||
|
<Tag icon="pi pi-cog" severity="contrast" value="Contrast"></Tag>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import Tag from '@/volt/tag';
|
||||||
|
<\/script>
|
||||||
|
`);
|
||||||
|
</script>
|
|
@ -0,0 +1,11 @@
|
||||||
|
<template>
|
||||||
|
<DocSectionText v-bind="$attrs" />
|
||||||
|
<DocSectionCode :code="code" lang="script" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const code = ref(`import Tag from '@/volt/tag';
|
||||||
|
`);
|
||||||
|
</script>
|
|
@ -0,0 +1,38 @@
|
||||||
|
<template>
|
||||||
|
<DocSectionText v-bind="$attrs">
|
||||||
|
<p>Enabling <i>rounded</i>, displays a tag as a pill.</p>
|
||||||
|
</DocSectionText>
|
||||||
|
<div class="card flex flex-wrap justify-center gap-2">
|
||||||
|
<Tag value="Primary" rounded></Tag>
|
||||||
|
<Tag severity="secondary" value="Secondary" rounded></Tag>
|
||||||
|
<Tag severity="success" value="Success" rounded></Tag>
|
||||||
|
<Tag severity="info" value="Info" rounded></Tag>
|
||||||
|
<Tag severity="warn" value="Warn" rounded></Tag>
|
||||||
|
<Tag severity="danger" value="Danger" rounded></Tag>
|
||||||
|
<Tag severity="contrast" value="Contrast" rounded></Tag>
|
||||||
|
</div>
|
||||||
|
<DocSectionCode :code="code" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import Tag from '@/volt/tag';
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const code = ref(`
|
||||||
|
<template>
|
||||||
|
<div class="card flex flex-wrap justify-center gap-2">
|
||||||
|
<Tag value="Primary" rounded></Tag>
|
||||||
|
<Tag severity="secondary" value="Secondary" rounded></Tag>
|
||||||
|
<Tag severity="success" value="Success" rounded></Tag>
|
||||||
|
<Tag severity="info" value="Info" rounded></Tag>
|
||||||
|
<Tag severity="warn" value="Warn" rounded></Tag>
|
||||||
|
<Tag severity="danger" value="Danger" rounded></Tag>
|
||||||
|
<Tag severity="contrast" value="Contrast" rounded></Tag>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import Tag from '@/volt/tag';
|
||||||
|
<\/script>
|
||||||
|
`);
|
||||||
|
</script>
|
|
@ -0,0 +1,38 @@
|
||||||
|
<template>
|
||||||
|
<DocSectionText v-bind="$attrs">
|
||||||
|
<p>Severity defines the variant of a tag.</p>
|
||||||
|
</DocSectionText>
|
||||||
|
<div class="card flex flex-wrap justify-center gap-2">
|
||||||
|
<Tag value="Primary"></Tag>
|
||||||
|
<Tag severity="secondary" value="Secondary"></Tag>
|
||||||
|
<Tag severity="success" value="Success"></Tag>
|
||||||
|
<Tag severity="info" value="Info"></Tag>
|
||||||
|
<Tag severity="warn" value="Warn"></Tag>
|
||||||
|
<Tag severity="danger" value="Danger"></Tag>
|
||||||
|
<Tag severity="contrast" value="Contrast"></Tag>
|
||||||
|
</div>
|
||||||
|
<DocSectionCode :code="code" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import Tag from '@/volt/tag';
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const code = ref(`
|
||||||
|
<template>
|
||||||
|
<div class="card flex flex-wrap justify-center gap-2">
|
||||||
|
<Tag value="Primary"></Tag>
|
||||||
|
<Tag severity="secondary" value="Secondary"></Tag>
|
||||||
|
<Tag severity="success" value="Success"></Tag>
|
||||||
|
<Tag severity="info" value="Info"></Tag>
|
||||||
|
<Tag severity="warn" value="Warn"></Tag>
|
||||||
|
<Tag severity="danger" value="Danger"></Tag>
|
||||||
|
<Tag severity="contrast" value="Contrast"></Tag>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import Tag from '@/volt/tag';
|
||||||
|
<\/script>
|
||||||
|
`);
|
||||||
|
</script>
|
|
@ -0,0 +1,36 @@
|
||||||
|
<template>
|
||||||
|
<DocSectionText v-bind="$attrs">
|
||||||
|
<p>Children of the component are passed as the content for templating.</p>
|
||||||
|
</DocSectionText>
|
||||||
|
<div class="card flex justify-center">
|
||||||
|
<Tag style="border: 2px solid var(--border-color); background: transparent; color: var(--text-color)">
|
||||||
|
<div class="flex items-center gap-2 px-1">
|
||||||
|
<img alt="Country" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" class="flag flag-it" style="width: 18px" />
|
||||||
|
<span class="text-base">Italy</span>
|
||||||
|
</div>
|
||||||
|
</Tag>
|
||||||
|
</div>
|
||||||
|
<DocSectionCode :code="code" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import Tag from '@/volt/tag';
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const code = ref(`
|
||||||
|
<template>
|
||||||
|
<div class="card flex justify-center">
|
||||||
|
<Tag style="border: 2px solid var(--border-color); background: transparent; color: var(--text-color)">
|
||||||
|
<div class="flex items-center gap-2 px-1">
|
||||||
|
<img alt="Country" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" class="flag flag-it" style="width: 18px" />
|
||||||
|
<span class="text-base">Italy</span>
|
||||||
|
</div>
|
||||||
|
</Tag>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import Tag from '@/volt/tag';
|
||||||
|
<\/script>
|
||||||
|
`);
|
||||||
|
</script>
|
|
@ -0,0 +1,46 @@
|
||||||
|
<template>
|
||||||
|
<DocComponent title="Vue Tag Component" header="Tag" description="Tag component is used to categorize content." :componentDocs="docs" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import BasicDoc from '@/doc/tag/BasicDoc.vue';
|
||||||
|
import IconDoc from '@/doc/tag/IconDoc.vue';
|
||||||
|
import ImportDoc from '@/doc/tag/ImportDoc.vue';
|
||||||
|
import PillDoc from '@/doc/tag/PillDoc.vue';
|
||||||
|
import SeverityDoc from '@/doc/tag/SeverityDoc.vue';
|
||||||
|
import TemplateDoc from '@/doc/tag/TemplateDoc.vue';
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const docs = ref([
|
||||||
|
{
|
||||||
|
id: 'import',
|
||||||
|
label: 'Import',
|
||||||
|
component: ImportDoc
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'basic',
|
||||||
|
label: 'Basic',
|
||||||
|
component: BasicDoc
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'severity',
|
||||||
|
label: 'Severity',
|
||||||
|
component: SeverityDoc
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'pill',
|
||||||
|
label: 'Pill',
|
||||||
|
component: PillDoc
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'icons',
|
||||||
|
label: 'Icon',
|
||||||
|
component: IconDoc
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'template',
|
||||||
|
label: 'Template',
|
||||||
|
component: TemplateDoc
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
</script>
|
|
@ -0,0 +1,31 @@
|
||||||
|
<template>
|
||||||
|
<Tag
|
||||||
|
unstyled
|
||||||
|
:pt="theme"
|
||||||
|
:ptOptions="{
|
||||||
|
mergeProps: ptViewMerge
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<template v-for="(_, slotName) in $slots" v-slot:[slotName]="slotProps">
|
||||||
|
<slot :name="slotName" v-bind="slotProps ?? {}" />
|
||||||
|
</template>
|
||||||
|
</Tag>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import Tag from 'primevue/tag';
|
||||||
|
import { ref } from 'vue';
|
||||||
|
import { ptViewMerge } from '../utils';
|
||||||
|
|
||||||
|
const theme = ref({
|
||||||
|
root: `inline-flex items-center justify-center text-sm font-bold py-1 px-2 rounded-md gap-1 p-rounded:rounded-2xl
|
||||||
|
bg-primary-100 dark:bg-primary-500/15 text-primary-700 dark:text-primary-300
|
||||||
|
p-success:bg-green-100 dark:p-success:bg-green-500/15 p-success:text-green-700 dark:p-success:text-green-300
|
||||||
|
p-info:bg-sky-100 dark:p-info:bg-sky-500/15 p-info:text-sky-700 dark:p-info:text-sky-300
|
||||||
|
p-warn:bg-orange-100 dark:p-warn:bg-orange-500/15 p-warn:text-orange-700 dark:p-warn:text-orange-300
|
||||||
|
p-danger:bg-red-100 dark:p-danger:bg-red-500/15 p-danger:text-red-700 dark:p-danger:text-red-300
|
||||||
|
p-secondary:bg-surface-100 dark:p-secondary:bg-surface-800 p-secondary:text-surface-600 dark:p-secondary:text-surface-300
|
||||||
|
p-contrast:bg-surface-950 dark:p-contrast:bg-surface-0 p-contrast:text-surface-0 dark:p-contrast:text-surface-950`,
|
||||||
|
icon: `text-xs w-3 h-3`
|
||||||
|
});
|
||||||
|
</script>
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<span :class="cx('root')" v-bind="ptmi('root')">
|
<span :class="cx('root')" :data-p="dataP" v-bind="ptmi('root')">
|
||||||
<component v-if="$slots.icon" :is="$slots.icon" :class="cx('icon')" v-bind="ptm('icon')" />
|
<component v-if="$slots.icon" :is="$slots.icon" :class="cx('icon')" v-bind="ptm('icon')" />
|
||||||
<span v-else-if="icon" :class="[cx('icon'), icon]" v-bind="ptm('icon')"></span>
|
<span v-else-if="icon" :class="[cx('icon'), icon]" v-bind="ptm('icon')"></span>
|
||||||
<slot v-if="value != null || $slots.default">
|
<slot v-if="value != null || $slots.default">
|
||||||
|
@ -9,11 +9,20 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import { cn } from '@primeuix/utils';
|
||||||
import BaseTag from './BaseTag.vue';
|
import BaseTag from './BaseTag.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Tag',
|
name: 'Tag',
|
||||||
extends: BaseTag,
|
extends: BaseTag,
|
||||||
inheritAttrs: false
|
inheritAttrs: false,
|
||||||
|
computed: {
|
||||||
|
dataP() {
|
||||||
|
return cn({
|
||||||
|
rounded: this.rounded,
|
||||||
|
[this.severity]: this.severity
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
Loading…
Reference in New Issue