838 lines
14 KiB
JavaScript
838 lines
14 KiB
JavaScript
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>VueJS</VListItemTitle>
|
|
<VListItemSubtitle>The Progressive JavaScript Framework</VListItemSubtitle>
|
|
|
|
<template #append>
|
|
<VListItemAction class="ms-1">
|
|
<IconBtn @click="isMenuVisible = false">
|
|
<VIcon
|
|
size="20"
|
|
icon="ri-close-line"
|
|
/>
|
|
</IconBtn>
|
|
</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>VueJS</VListItemTitle>
|
|
<VListItemSubtitle>The Progressive JavaScript Framework</VListItemSubtitle>
|
|
|
|
<template #append>
|
|
<VListItemAction class="ms-1">
|
|
<IconBtn @click="isMenuVisible = false">
|
|
<VIcon
|
|
size="20"
|
|
icon="ri-close-line"
|
|
/>
|
|
</IconBtn>
|
|
</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>
|
|
<VCombobox
|
|
v-model="chips"
|
|
chips
|
|
clearable
|
|
multiple
|
|
closable-chips
|
|
clear-icon="ri-close-circle-line"
|
|
:items="items"
|
|
label="Your favorite hobbies"
|
|
prepend-icon="ri-filter-3-line"
|
|
/>
|
|
</template>
|
|
`, js: `<script setup>
|
|
const chips = ref([
|
|
'Programming',
|
|
'Playing games',
|
|
'Sleeping',
|
|
])
|
|
|
|
const items = ref([
|
|
'Streaming',
|
|
'Eating',
|
|
'Programming',
|
|
'Playing games',
|
|
'Sleeping',
|
|
])
|
|
</script>
|
|
|
|
<template>
|
|
<VCombobox
|
|
v-model="chips"
|
|
chips
|
|
clearable
|
|
multiple
|
|
closable-chips
|
|
clear-icon="ri-close-circle-line"
|
|
:items="items"
|
|
label="Your favorite hobbies"
|
|
prepend-icon="ri-filter-3-line"
|
|
/>
|
|
</template>
|
|
` }
|
|
|
|
export const label = { ts: `<template>
|
|
<div class="demo-space-x">
|
|
<VChip label>
|
|
Default
|
|
</VChip>
|
|
|
|
<VChip
|
|
label
|
|
color="primary"
|
|
>
|
|
Primary
|
|
</VChip>
|
|
|
|
<VChip
|
|
label
|
|
color="secondary"
|
|
>
|
|
Secondary
|
|
</VChip>
|
|
|
|
<VChip
|
|
label
|
|
color="success"
|
|
>
|
|
Success
|
|
</VChip>
|
|
|
|
<VChip
|
|
label
|
|
color="info"
|
|
>
|
|
Info
|
|
</VChip>
|
|
|
|
<VChip
|
|
label
|
|
color="warning"
|
|
>
|
|
Warning
|
|
</VChip>
|
|
|
|
<VChip
|
|
label
|
|
color="error"
|
|
>
|
|
Error
|
|
</VChip>
|
|
</div>
|
|
</template>
|
|
`, js: `<template>
|
|
<div class="demo-space-x">
|
|
<VChip label>
|
|
Default
|
|
</VChip>
|
|
|
|
<VChip
|
|
label
|
|
color="primary"
|
|
>
|
|
Primary
|
|
</VChip>
|
|
|
|
<VChip
|
|
label
|
|
color="secondary"
|
|
>
|
|
Secondary
|
|
</VChip>
|
|
|
|
<VChip
|
|
label
|
|
color="success"
|
|
>
|
|
Success
|
|
</VChip>
|
|
|
|
<VChip
|
|
label
|
|
color="info"
|
|
>
|
|
Info
|
|
</VChip>
|
|
|
|
<VChip
|
|
label
|
|
color="warning"
|
|
>
|
|
Warning
|
|
</VChip>
|
|
|
|
<VChip
|
|
label
|
|
color="error"
|
|
>
|
|
Error
|
|
</VChip>
|
|
</div>
|
|
</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 sizes = { ts: `<template>
|
|
<div class="demo-space-x">
|
|
<VChip size="x-small">
|
|
x-small chip
|
|
</VChip>
|
|
|
|
<VChip size="small">
|
|
small chip
|
|
</VChip>
|
|
|
|
<VChip>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>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 :prepend-avatar="avatar1">
|
|
<span>Chip</span>
|
|
</VChip>
|
|
|
|
<VChip :prepend-avatar="avatar2">
|
|
<span>Darcy Nooser</span>
|
|
</VChip>
|
|
|
|
<VChip :prepend-avatar="avatar3">
|
|
<span>Felicia Risker</span>
|
|
</VChip>
|
|
|
|
<VChip :prepend-avatar="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 :prepend-avatar="avatar1">
|
|
<span>Chip</span>
|
|
</VChip>
|
|
|
|
<VChip :prepend-avatar="avatar2">
|
|
<span>Darcy Nooser</span>
|
|
</VChip>
|
|
|
|
<VChip :prepend-avatar="avatar3">
|
|
<span>Felicia Risker</span>
|
|
</VChip>
|
|
|
|
<VChip :prepend-avatar="avatar4">
|
|
<span>Minnie Mostly</span>
|
|
</VChip>
|
|
</div>
|
|
</template>
|
|
` }
|
|
|
|
export const withIcon = { ts: `<template>
|
|
<div class="demo-space-x">
|
|
<VChip prepend-icon="ri-user-line">
|
|
Account
|
|
</VChip>
|
|
|
|
<VChip
|
|
color="primary"
|
|
prepend-icon="ri-star-line"
|
|
>
|
|
Premium
|
|
</VChip>
|
|
|
|
<VChip
|
|
color="secondary"
|
|
prepend-icon="ri-cake-line"
|
|
>
|
|
1 Year
|
|
</VChip>
|
|
|
|
<VChip
|
|
color="success"
|
|
prepend-icon="ri-notification-line"
|
|
>
|
|
Notification
|
|
</VChip>
|
|
|
|
<VChip
|
|
color="info"
|
|
prepend-icon="ri-message-line"
|
|
>
|
|
Message
|
|
</VChip>
|
|
|
|
<VChip
|
|
color="warning"
|
|
prepend-icon="ri-error-warning-line"
|
|
>
|
|
Warning
|
|
</VChip>
|
|
|
|
<VChip
|
|
color="error"
|
|
prepend-icon="ri-error-warning-line"
|
|
>
|
|
Error
|
|
</VChip>
|
|
</div>
|
|
</template>
|
|
`, js: `<template>
|
|
<div class="demo-space-x">
|
|
<VChip prepend-icon="ri-user-line">
|
|
Account
|
|
</VChip>
|
|
|
|
<VChip
|
|
color="primary"
|
|
prepend-icon="ri-star-line"
|
|
>
|
|
Premium
|
|
</VChip>
|
|
|
|
<VChip
|
|
color="secondary"
|
|
prepend-icon="ri-cake-line"
|
|
>
|
|
1 Year
|
|
</VChip>
|
|
|
|
<VChip
|
|
color="success"
|
|
prepend-icon="ri-notification-line"
|
|
>
|
|
Notification
|
|
</VChip>
|
|
|
|
<VChip
|
|
color="info"
|
|
prepend-icon="ri-message-line"
|
|
>
|
|
Message
|
|
</VChip>
|
|
|
|
<VChip
|
|
color="warning"
|
|
prepend-icon="ri-error-warning-line"
|
|
>
|
|
Warning
|
|
</VChip>
|
|
|
|
<VChip
|
|
color="error"
|
|
prepend-icon="ri-error-warning-line"
|
|
>
|
|
Error
|
|
</VChip>
|
|
</div>
|
|
</template>
|
|
` }
|
|
|