Initial commit
This commit is contained in:
@@ -0,0 +1,75 @@
|
||||
<script setup>
|
||||
const isDefaultChipVisible = ref(true)
|
||||
const isPrimaryChipVisible = ref(true)
|
||||
const isSecondaryChipVisible = ref(true)
|
||||
const isSuccessChipVisible = ref(true)
|
||||
const isInfoChipVisible = ref(true)
|
||||
const isWarningChipVisible = ref(true)
|
||||
const isErrorChipVisible = ref(true)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VChip
|
||||
v-if="isDefaultChipVisible"
|
||||
closable
|
||||
@click:close="isDefaultChipVisible = !isDefaultChipVisible"
|
||||
>
|
||||
Default
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
v-if="isPrimaryChipVisible"
|
||||
closable
|
||||
color="primary"
|
||||
@click:close="isPrimaryChipVisible = !isPrimaryChipVisible"
|
||||
>
|
||||
Primary
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
v-if="isSecondaryChipVisible"
|
||||
closable
|
||||
color="secondary"
|
||||
@click:close="isSecondaryChipVisible = !isSecondaryChipVisible"
|
||||
>
|
||||
Secondary
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
v-if="isSuccessChipVisible"
|
||||
closable
|
||||
color="success"
|
||||
@click:close="isSuccessChipVisible = !isSuccessChipVisible"
|
||||
>
|
||||
Success
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
v-if="isInfoChipVisible"
|
||||
closable
|
||||
color="info"
|
||||
@click:close="isInfoChipVisible = !isInfoChipVisible"
|
||||
>
|
||||
Info
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
v-if="isWarningChipVisible"
|
||||
closable
|
||||
color="warning"
|
||||
@click:close="isWarningChipVisible = !isWarningChipVisible"
|
||||
>
|
||||
Warning
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
v-if="isErrorChipVisible"
|
||||
closable
|
||||
color="error"
|
||||
@click:close="isErrorChipVisible = !isErrorChipVisible"
|
||||
>
|
||||
Error
|
||||
</VChip>
|
||||
</div>
|
||||
</template>
|
||||
31
resources/js/views/demos/components/chip/DemoChipColor.vue
Normal file
31
resources/js/views/demos/components/chip/DemoChipColor.vue
Normal file
@@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VChip>
|
||||
Default
|
||||
</VChip>
|
||||
|
||||
<VChip color="primary">
|
||||
Primary
|
||||
</VChip>
|
||||
|
||||
<VChip color="secondary">
|
||||
Secondary
|
||||
</VChip>
|
||||
|
||||
<VChip color="success">
|
||||
Success
|
||||
</VChip>
|
||||
|
||||
<VChip color="info">
|
||||
Info
|
||||
</VChip>
|
||||
|
||||
<VChip color="warning">
|
||||
Warning
|
||||
</VChip>
|
||||
|
||||
<VChip color="error">
|
||||
Error
|
||||
</VChip>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VChip variant="elevated">
|
||||
Default
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="primary"
|
||||
variant="elevated"
|
||||
>
|
||||
Primary
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="secondary"
|
||||
variant="elevated"
|
||||
>
|
||||
Secondary
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="success"
|
||||
variant="elevated"
|
||||
>
|
||||
Success
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="info"
|
||||
variant="elevated"
|
||||
>
|
||||
Info
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="warning"
|
||||
variant="elevated"
|
||||
>
|
||||
Warning
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="error"
|
||||
variant="elevated"
|
||||
>
|
||||
Error
|
||||
</VChip>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,44 @@
|
||||
<script setup>
|
||||
const isMenuVisible = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VMenu
|
||||
v-model="isMenuVisible"
|
||||
transition="scale-transition"
|
||||
>
|
||||
<!-- v-menu activator -->
|
||||
<template #activator="{ props }">
|
||||
<VChip v-bind="props">
|
||||
VueJS
|
||||
</VChip>
|
||||
</template>
|
||||
|
||||
<!-- v-menu list -->
|
||||
<VList>
|
||||
<VListItem>
|
||||
<VListItemTitle class="mb-2">
|
||||
VueJS
|
||||
</VListItemTitle>
|
||||
<VListItemSubtitle>The Progressive JavaScript Framework</VListItemSubtitle>
|
||||
|
||||
<template #append>
|
||||
<VListItemAction class="ms-3">
|
||||
<VBtn
|
||||
icon
|
||||
variant="text"
|
||||
size="x-small"
|
||||
color="default"
|
||||
@click="isMenuVisible = false"
|
||||
>
|
||||
<VIcon
|
||||
size="20"
|
||||
icon="tabler-x"
|
||||
/>
|
||||
</VBtn>
|
||||
</VListItemAction>
|
||||
</template>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VMenu>
|
||||
</template>
|
||||
@@ -0,0 +1,29 @@
|
||||
<script setup>
|
||||
const chips = ref([
|
||||
'Programming',
|
||||
'Playing games',
|
||||
'Sleeping',
|
||||
])
|
||||
|
||||
const items = ref([
|
||||
'Streaming',
|
||||
'Eating',
|
||||
'Programming',
|
||||
'Playing games',
|
||||
'Sleeping',
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppCombobox
|
||||
v-model="chips"
|
||||
chips
|
||||
clearable
|
||||
multiple
|
||||
closable-chips
|
||||
clear-icon="tabler-circle-x"
|
||||
:items="items"
|
||||
label="Your favorite hobbies"
|
||||
prepend-icon="tabler-filter"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VChip variant="outlined">
|
||||
Default
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="primary"
|
||||
variant="outlined"
|
||||
>
|
||||
Primary
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="secondary"
|
||||
variant="outlined"
|
||||
>
|
||||
Secondary
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="success"
|
||||
variant="outlined"
|
||||
>
|
||||
Success
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="info"
|
||||
variant="outlined"
|
||||
>
|
||||
Info
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="warning"
|
||||
variant="outlined"
|
||||
>
|
||||
Warning
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="error"
|
||||
variant="outlined"
|
||||
>
|
||||
Error
|
||||
</VChip>
|
||||
</div>
|
||||
</template>
|
||||
49
resources/js/views/demos/components/chip/DemoChipRounded.vue
Normal file
49
resources/js/views/demos/components/chip/DemoChipRounded.vue
Normal file
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VChip :label="false">
|
||||
Default
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
:label="false"
|
||||
color="primary"
|
||||
>
|
||||
Primary
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
:label="false"
|
||||
color="secondary"
|
||||
>
|
||||
Secondary
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
:label="false"
|
||||
color="success"
|
||||
>
|
||||
Success
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
:label="false"
|
||||
color="info"
|
||||
>
|
||||
Info
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
:label="false"
|
||||
color="warning"
|
||||
>
|
||||
Warning
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
:label="false"
|
||||
color="error"
|
||||
>
|
||||
Error
|
||||
</VChip>
|
||||
</div>
|
||||
</template>
|
||||
23
resources/js/views/demos/components/chip/DemoChipSizes.vue
Normal file
23
resources/js/views/demos/components/chip/DemoChipSizes.vue
Normal file
@@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VChip size="x-small">
|
||||
x-small chip
|
||||
</VChip>
|
||||
|
||||
<VChip size="small">
|
||||
small chip
|
||||
</VChip>
|
||||
|
||||
<VChip size="default">
|
||||
Default
|
||||
</VChip>
|
||||
|
||||
<VChip size="large">
|
||||
large chip
|
||||
</VChip>
|
||||
|
||||
<VChip size="x-large">
|
||||
x-large chip
|
||||
</VChip>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,45 @@
|
||||
<script setup>
|
||||
import avatar1 from '@images/avatars/avatar-1.png'
|
||||
import avatar2 from '@images/avatars/avatar-2.png'
|
||||
import avatar3 from '@images/avatars/avatar-3.png'
|
||||
import avatar4 from '@images/avatars/avatar-4.png'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VChip>
|
||||
<VAvatar
|
||||
start
|
||||
:image="avatar1"
|
||||
/>
|
||||
<span>John Doe</span>
|
||||
</VChip>
|
||||
|
||||
<VChip>
|
||||
<VAvatar
|
||||
start
|
||||
:image="avatar2"
|
||||
/>
|
||||
<span>Darcy Nooser</span>
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
pill
|
||||
:label="false"
|
||||
:prepend-avatar="avatar3"
|
||||
>
|
||||
<span>Felicia Risker</span>
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
pill
|
||||
:label="false"
|
||||
>
|
||||
<VAvatar
|
||||
start
|
||||
:image="avatar4"
|
||||
/>
|
||||
<span>Minnie Mostly</span>
|
||||
</VChip>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VChip>
|
||||
<VIcon
|
||||
start
|
||||
icon="tabler-user"
|
||||
/>
|
||||
Account
|
||||
</VChip>
|
||||
|
||||
<VChip color="primary">
|
||||
<VIcon
|
||||
start
|
||||
icon="tabler-star"
|
||||
/>
|
||||
Premium
|
||||
</VChip>
|
||||
|
||||
<VChip color="secondary">
|
||||
<VIcon
|
||||
start
|
||||
icon="tabler-cake"
|
||||
/>
|
||||
1 Year
|
||||
</VChip>
|
||||
|
||||
<VChip color="success">
|
||||
<VIcon
|
||||
start
|
||||
icon="tabler-bell"
|
||||
/>
|
||||
Notification
|
||||
</VChip>
|
||||
|
||||
<VChip color="info">
|
||||
<VIcon
|
||||
start
|
||||
icon="tabler-messages"
|
||||
/>
|
||||
Message
|
||||
</VChip>
|
||||
|
||||
<VChip color="warning">
|
||||
<VIcon
|
||||
start
|
||||
icon="tabler-alert-triangle"
|
||||
/>
|
||||
Warning
|
||||
</VChip>
|
||||
|
||||
<VChip color="error">
|
||||
<VIcon
|
||||
start
|
||||
icon="tabler-alert-circle"
|
||||
/>
|
||||
Error
|
||||
</VChip>
|
||||
</div>
|
||||
</template>
|
||||
915
resources/js/views/demos/components/chip/demoCodeChip.js
Normal file
915
resources/js/views/demos/components/chip/demoCodeChip.js
Normal file
@@ -0,0 +1,915 @@
|
||||
export const closable = { ts: `<script lang="ts" setup>
|
||||
const isDefaultChipVisible = ref(true)
|
||||
const isPrimaryChipVisible = ref(true)
|
||||
const isSecondaryChipVisible = ref(true)
|
||||
const isSuccessChipVisible = ref(true)
|
||||
const isInfoChipVisible = ref(true)
|
||||
const isWarningChipVisible = ref(true)
|
||||
const isErrorChipVisible = ref(true)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VChip
|
||||
v-if="isDefaultChipVisible"
|
||||
closable
|
||||
@click:close="isDefaultChipVisible = !isDefaultChipVisible"
|
||||
>
|
||||
Default
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
v-if="isPrimaryChipVisible"
|
||||
closable
|
||||
color="primary"
|
||||
@click:close="isPrimaryChipVisible = !isPrimaryChipVisible"
|
||||
>
|
||||
Primary
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
v-if="isSecondaryChipVisible"
|
||||
closable
|
||||
color="secondary"
|
||||
@click:close="isSecondaryChipVisible = !isSecondaryChipVisible"
|
||||
>
|
||||
Secondary
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
v-if="isSuccessChipVisible"
|
||||
closable
|
||||
color="success"
|
||||
@click:close="isSuccessChipVisible = !isSuccessChipVisible"
|
||||
>
|
||||
Success
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
v-if="isInfoChipVisible"
|
||||
closable
|
||||
color="info"
|
||||
@click:close="isInfoChipVisible = !isInfoChipVisible"
|
||||
>
|
||||
Info
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
v-if="isWarningChipVisible"
|
||||
closable
|
||||
color="warning"
|
||||
@click:close="isWarningChipVisible = !isWarningChipVisible"
|
||||
>
|
||||
Warning
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
v-if="isErrorChipVisible"
|
||||
closable
|
||||
color="error"
|
||||
@click:close="isErrorChipVisible = !isErrorChipVisible"
|
||||
>
|
||||
Error
|
||||
</VChip>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const isDefaultChipVisible = ref(true)
|
||||
const isPrimaryChipVisible = ref(true)
|
||||
const isSecondaryChipVisible = ref(true)
|
||||
const isSuccessChipVisible = ref(true)
|
||||
const isInfoChipVisible = ref(true)
|
||||
const isWarningChipVisible = ref(true)
|
||||
const isErrorChipVisible = ref(true)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VChip
|
||||
v-if="isDefaultChipVisible"
|
||||
closable
|
||||
@click:close="isDefaultChipVisible = !isDefaultChipVisible"
|
||||
>
|
||||
Default
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
v-if="isPrimaryChipVisible"
|
||||
closable
|
||||
color="primary"
|
||||
@click:close="isPrimaryChipVisible = !isPrimaryChipVisible"
|
||||
>
|
||||
Primary
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
v-if="isSecondaryChipVisible"
|
||||
closable
|
||||
color="secondary"
|
||||
@click:close="isSecondaryChipVisible = !isSecondaryChipVisible"
|
||||
>
|
||||
Secondary
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
v-if="isSuccessChipVisible"
|
||||
closable
|
||||
color="success"
|
||||
@click:close="isSuccessChipVisible = !isSuccessChipVisible"
|
||||
>
|
||||
Success
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
v-if="isInfoChipVisible"
|
||||
closable
|
||||
color="info"
|
||||
@click:close="isInfoChipVisible = !isInfoChipVisible"
|
||||
>
|
||||
Info
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
v-if="isWarningChipVisible"
|
||||
closable
|
||||
color="warning"
|
||||
@click:close="isWarningChipVisible = !isWarningChipVisible"
|
||||
>
|
||||
Warning
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
v-if="isErrorChipVisible"
|
||||
closable
|
||||
color="error"
|
||||
@click:close="isErrorChipVisible = !isErrorChipVisible"
|
||||
>
|
||||
Error
|
||||
</VChip>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const color = { ts: `<template>
|
||||
<div class="demo-space-x">
|
||||
<VChip>
|
||||
Default
|
||||
</VChip>
|
||||
|
||||
<VChip color="primary">
|
||||
Primary
|
||||
</VChip>
|
||||
|
||||
<VChip color="secondary">
|
||||
Secondary
|
||||
</VChip>
|
||||
|
||||
<VChip color="success">
|
||||
Success
|
||||
</VChip>
|
||||
|
||||
<VChip color="info">
|
||||
Info
|
||||
</VChip>
|
||||
|
||||
<VChip color="warning">
|
||||
Warning
|
||||
</VChip>
|
||||
|
||||
<VChip color="error">
|
||||
Error
|
||||
</VChip>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<template>
|
||||
<div class="demo-space-x">
|
||||
<VChip>
|
||||
Default
|
||||
</VChip>
|
||||
|
||||
<VChip color="primary">
|
||||
Primary
|
||||
</VChip>
|
||||
|
||||
<VChip color="secondary">
|
||||
Secondary
|
||||
</VChip>
|
||||
|
||||
<VChip color="success">
|
||||
Success
|
||||
</VChip>
|
||||
|
||||
<VChip color="info">
|
||||
Info
|
||||
</VChip>
|
||||
|
||||
<VChip color="warning">
|
||||
Warning
|
||||
</VChip>
|
||||
|
||||
<VChip color="error">
|
||||
Error
|
||||
</VChip>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const elevated = { ts: `<template>
|
||||
<div class="demo-space-x">
|
||||
<VChip variant="elevated">
|
||||
Default
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="primary"
|
||||
variant="elevated"
|
||||
>
|
||||
Primary
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="secondary"
|
||||
variant="elevated"
|
||||
>
|
||||
Secondary
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="success"
|
||||
variant="elevated"
|
||||
>
|
||||
Success
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="info"
|
||||
variant="elevated"
|
||||
>
|
||||
Info
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="warning"
|
||||
variant="elevated"
|
||||
>
|
||||
Warning
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="error"
|
||||
variant="elevated"
|
||||
>
|
||||
Error
|
||||
</VChip>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<template>
|
||||
<div class="demo-space-x">
|
||||
<VChip variant="elevated">
|
||||
Default
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="primary"
|
||||
variant="elevated"
|
||||
>
|
||||
Primary
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="secondary"
|
||||
variant="elevated"
|
||||
>
|
||||
Secondary
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="success"
|
||||
variant="elevated"
|
||||
>
|
||||
Success
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="info"
|
||||
variant="elevated"
|
||||
>
|
||||
Info
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="warning"
|
||||
variant="elevated"
|
||||
>
|
||||
Warning
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="error"
|
||||
variant="elevated"
|
||||
>
|
||||
Error
|
||||
</VChip>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const expandable = { ts: `<script lang="ts" setup>
|
||||
const isMenuVisible = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VMenu
|
||||
v-model="isMenuVisible"
|
||||
transition="scale-transition"
|
||||
>
|
||||
<!-- v-menu activator -->
|
||||
<template #activator="{ props }">
|
||||
<VChip v-bind="props">
|
||||
VueJS
|
||||
</VChip>
|
||||
</template>
|
||||
|
||||
<!-- v-menu list -->
|
||||
<VList>
|
||||
<VListItem>
|
||||
<VListItemTitle class="mb-2">
|
||||
VueJS
|
||||
</VListItemTitle>
|
||||
<VListItemSubtitle>The Progressive JavaScript Framework</VListItemSubtitle>
|
||||
|
||||
<template #append>
|
||||
<VListItemAction class="ms-3">
|
||||
<VBtn
|
||||
icon
|
||||
variant="text"
|
||||
size="x-small"
|
||||
color="default"
|
||||
@click="isMenuVisible = false"
|
||||
>
|
||||
<VIcon
|
||||
size="20"
|
||||
icon="tabler-x"
|
||||
/>
|
||||
</VBtn>
|
||||
</VListItemAction>
|
||||
</template>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VMenu>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const isMenuVisible = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VMenu
|
||||
v-model="isMenuVisible"
|
||||
transition="scale-transition"
|
||||
>
|
||||
<!-- v-menu activator -->
|
||||
<template #activator="{ props }">
|
||||
<VChip v-bind="props">
|
||||
VueJS
|
||||
</VChip>
|
||||
</template>
|
||||
|
||||
<!-- v-menu list -->
|
||||
<VList>
|
||||
<VListItem>
|
||||
<VListItemTitle class="mb-2">
|
||||
VueJS
|
||||
</VListItemTitle>
|
||||
<VListItemSubtitle>The Progressive JavaScript Framework</VListItemSubtitle>
|
||||
|
||||
<template #append>
|
||||
<VListItemAction class="ms-3">
|
||||
<VBtn
|
||||
icon
|
||||
variant="text"
|
||||
size="x-small"
|
||||
color="default"
|
||||
@click="isMenuVisible = false"
|
||||
>
|
||||
<VIcon
|
||||
size="20"
|
||||
icon="tabler-x"
|
||||
/>
|
||||
</VBtn>
|
||||
</VListItemAction>
|
||||
</template>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VMenu>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const inSelects = { ts: `<script lang="ts" setup>
|
||||
const chips = ref(['Programming', 'Playing games', 'Sleeping'])
|
||||
const items = ref(['Streaming', 'Eating', 'Programming', 'Playing games', 'Sleeping'])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppCombobox
|
||||
v-model="chips"
|
||||
chips
|
||||
clearable
|
||||
multiple
|
||||
closable-chips
|
||||
clear-icon="tabler-circle-x"
|
||||
:items="items"
|
||||
label="Your favorite hobbies"
|
||||
prepend-icon="tabler-filter"
|
||||
/>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const chips = ref([
|
||||
'Programming',
|
||||
'Playing games',
|
||||
'Sleeping',
|
||||
])
|
||||
|
||||
const items = ref([
|
||||
'Streaming',
|
||||
'Eating',
|
||||
'Programming',
|
||||
'Playing games',
|
||||
'Sleeping',
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppCombobox
|
||||
v-model="chips"
|
||||
chips
|
||||
clearable
|
||||
multiple
|
||||
closable-chips
|
||||
clear-icon="tabler-circle-x"
|
||||
:items="items"
|
||||
label="Your favorite hobbies"
|
||||
prepend-icon="tabler-filter"
|
||||
/>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const outlined = { ts: `<template>
|
||||
<div class="demo-space-x">
|
||||
<VChip variant="outlined">
|
||||
Default
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="primary"
|
||||
variant="outlined"
|
||||
>
|
||||
Primary
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="secondary"
|
||||
variant="outlined"
|
||||
>
|
||||
Secondary
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="success"
|
||||
variant="outlined"
|
||||
>
|
||||
Success
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="info"
|
||||
variant="outlined"
|
||||
>
|
||||
Info
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="warning"
|
||||
variant="outlined"
|
||||
>
|
||||
Warning
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="error"
|
||||
variant="outlined"
|
||||
>
|
||||
Error
|
||||
</VChip>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<template>
|
||||
<div class="demo-space-x">
|
||||
<VChip variant="outlined">
|
||||
Default
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="primary"
|
||||
variant="outlined"
|
||||
>
|
||||
Primary
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="secondary"
|
||||
variant="outlined"
|
||||
>
|
||||
Secondary
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="success"
|
||||
variant="outlined"
|
||||
>
|
||||
Success
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="info"
|
||||
variant="outlined"
|
||||
>
|
||||
Info
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="warning"
|
||||
variant="outlined"
|
||||
>
|
||||
Warning
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
color="error"
|
||||
variant="outlined"
|
||||
>
|
||||
Error
|
||||
</VChip>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const rounded = { ts: `<template>
|
||||
<div class="demo-space-x">
|
||||
<VChip :label="false">
|
||||
Default
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
:label="false"
|
||||
color="primary"
|
||||
>
|
||||
Primary
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
:label="false"
|
||||
color="secondary"
|
||||
>
|
||||
Secondary
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
:label="false"
|
||||
color="success"
|
||||
>
|
||||
Success
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
:label="false"
|
||||
color="info"
|
||||
>
|
||||
Info
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
:label="false"
|
||||
color="warning"
|
||||
>
|
||||
Warning
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
:label="false"
|
||||
color="error"
|
||||
>
|
||||
Error
|
||||
</VChip>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<template>
|
||||
<div class="demo-space-x">
|
||||
<VChip :label="false">
|
||||
Default
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
:label="false"
|
||||
color="primary"
|
||||
>
|
||||
Primary
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
:label="false"
|
||||
color="secondary"
|
||||
>
|
||||
Secondary
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
:label="false"
|
||||
color="success"
|
||||
>
|
||||
Success
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
:label="false"
|
||||
color="info"
|
||||
>
|
||||
Info
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
:label="false"
|
||||
color="warning"
|
||||
>
|
||||
Warning
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
:label="false"
|
||||
color="error"
|
||||
>
|
||||
Error
|
||||
</VChip>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const sizes = { ts: `<template>
|
||||
<div class="demo-space-x">
|
||||
<VChip size="x-small">
|
||||
x-small chip
|
||||
</VChip>
|
||||
|
||||
<VChip size="small">
|
||||
small chip
|
||||
</VChip>
|
||||
|
||||
<VChip size="default">
|
||||
Default
|
||||
</VChip>
|
||||
|
||||
<VChip size="large">
|
||||
large chip
|
||||
</VChip>
|
||||
|
||||
<VChip size="x-large">
|
||||
x-large chip
|
||||
</VChip>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<template>
|
||||
<div class="demo-space-x">
|
||||
<VChip size="x-small">
|
||||
x-small chip
|
||||
</VChip>
|
||||
|
||||
<VChip size="small">
|
||||
small chip
|
||||
</VChip>
|
||||
|
||||
<VChip size="default">
|
||||
Default
|
||||
</VChip>
|
||||
|
||||
<VChip size="large">
|
||||
large chip
|
||||
</VChip>
|
||||
|
||||
<VChip size="x-large">
|
||||
x-large chip
|
||||
</VChip>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const withAvatar = { ts: `<script setup lang="ts">
|
||||
import avatar1 from '@images/avatars/avatar-1.png'
|
||||
import avatar2 from '@images/avatars/avatar-2.png'
|
||||
import avatar3 from '@images/avatars/avatar-3.png'
|
||||
import avatar4 from '@images/avatars/avatar-4.png'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VChip>
|
||||
<VAvatar
|
||||
start
|
||||
:image="avatar1"
|
||||
/>
|
||||
<span>John Doe</span>
|
||||
</VChip>
|
||||
|
||||
<VChip>
|
||||
<VAvatar
|
||||
start
|
||||
:image="avatar2"
|
||||
/>
|
||||
<span>Darcy Nooser</span>
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
pill
|
||||
:label="false"
|
||||
:prepend-avatar="avatar3"
|
||||
>
|
||||
<span>Felicia Risker</span>
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
pill
|
||||
:label="false"
|
||||
>
|
||||
<VAvatar
|
||||
start
|
||||
:image="avatar4"
|
||||
/>
|
||||
<span>Minnie Mostly</span>
|
||||
</VChip>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
import avatar1 from '@images/avatars/avatar-1.png'
|
||||
import avatar2 from '@images/avatars/avatar-2.png'
|
||||
import avatar3 from '@images/avatars/avatar-3.png'
|
||||
import avatar4 from '@images/avatars/avatar-4.png'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo-space-x">
|
||||
<VChip>
|
||||
<VAvatar
|
||||
start
|
||||
:image="avatar1"
|
||||
/>
|
||||
<span>John Doe</span>
|
||||
</VChip>
|
||||
|
||||
<VChip>
|
||||
<VAvatar
|
||||
start
|
||||
:image="avatar2"
|
||||
/>
|
||||
<span>Darcy Nooser</span>
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
pill
|
||||
:label="false"
|
||||
:prepend-avatar="avatar3"
|
||||
>
|
||||
<span>Felicia Risker</span>
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
pill
|
||||
:label="false"
|
||||
>
|
||||
<VAvatar
|
||||
start
|
||||
:image="avatar4"
|
||||
/>
|
||||
<span>Minnie Mostly</span>
|
||||
</VChip>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const withIcon = { ts: `<template>
|
||||
<div class="demo-space-x">
|
||||
<VChip>
|
||||
<VIcon
|
||||
start
|
||||
icon="tabler-user"
|
||||
/>
|
||||
Account
|
||||
</VChip>
|
||||
|
||||
<VChip color="primary">
|
||||
<VIcon
|
||||
start
|
||||
icon="tabler-star"
|
||||
/>
|
||||
Premium
|
||||
</VChip>
|
||||
|
||||
<VChip color="secondary">
|
||||
<VIcon
|
||||
start
|
||||
icon="tabler-cake"
|
||||
/>
|
||||
1 Year
|
||||
</VChip>
|
||||
|
||||
<VChip color="success">
|
||||
<VIcon
|
||||
start
|
||||
icon="tabler-bell"
|
||||
/>
|
||||
Notification
|
||||
</VChip>
|
||||
|
||||
<VChip color="info">
|
||||
<VIcon
|
||||
start
|
||||
icon="tabler-messages"
|
||||
/>
|
||||
Message
|
||||
</VChip>
|
||||
|
||||
<VChip color="warning">
|
||||
<VIcon
|
||||
start
|
||||
icon="tabler-alert-triangle"
|
||||
/>
|
||||
Warning
|
||||
</VChip>
|
||||
|
||||
<VChip color="error">
|
||||
<VIcon
|
||||
start
|
||||
icon="tabler-alert-circle"
|
||||
/>
|
||||
Error
|
||||
</VChip>
|
||||
</div>
|
||||
</template>
|
||||
`, js: `<template>
|
||||
<div class="demo-space-x">
|
||||
<VChip>
|
||||
<VIcon
|
||||
start
|
||||
icon="tabler-user"
|
||||
/>
|
||||
Account
|
||||
</VChip>
|
||||
|
||||
<VChip color="primary">
|
||||
<VIcon
|
||||
start
|
||||
icon="tabler-star"
|
||||
/>
|
||||
Premium
|
||||
</VChip>
|
||||
|
||||
<VChip color="secondary">
|
||||
<VIcon
|
||||
start
|
||||
icon="tabler-cake"
|
||||
/>
|
||||
1 Year
|
||||
</VChip>
|
||||
|
||||
<VChip color="success">
|
||||
<VIcon
|
||||
start
|
||||
icon="tabler-bell"
|
||||
/>
|
||||
Notification
|
||||
</VChip>
|
||||
|
||||
<VChip color="info">
|
||||
<VIcon
|
||||
start
|
||||
icon="tabler-messages"
|
||||
/>
|
||||
Message
|
||||
</VChip>
|
||||
|
||||
<VChip color="warning">
|
||||
<VIcon
|
||||
start
|
||||
icon="tabler-alert-triangle"
|
||||
/>
|
||||
Warning
|
||||
</VChip>
|
||||
|
||||
<VChip color="error">
|
||||
<VIcon
|
||||
start
|
||||
icon="tabler-alert-circle"
|
||||
/>
|
||||
Error
|
||||
</VChip>
|
||||
</div>
|
||||
</template>
|
||||
` }
|
||||
|
||||
Reference in New Issue
Block a user