feat(CChip, CChipInput): add new components
This commit is contained in:
mrholek
+10
@@ -65,6 +65,11 @@ export default [
|
||||
name: 'Carousels',
|
||||
to: '/base/carousels',
|
||||
},
|
||||
{
|
||||
component: 'CNavItem',
|
||||
name: 'Chips',
|
||||
to: '/base/chips',
|
||||
},
|
||||
{
|
||||
component: 'CNavItem',
|
||||
name: 'Collapses',
|
||||
@@ -205,6 +210,11 @@ export default [
|
||||
name: 'Checks & Radios',
|
||||
to: '/forms/checks-radios',
|
||||
},
|
||||
{
|
||||
component: 'CNavItem',
|
||||
name: 'Chip Input',
|
||||
to: '/forms/chip-input',
|
||||
},
|
||||
{
|
||||
component: 'CNavItem',
|
||||
name: 'Date Picker',
|
||||
|
||||
@@ -66,6 +66,11 @@ const routes = [
|
||||
name: 'Carousels',
|
||||
component: () => import('@/views/base/Carousels.vue'),
|
||||
},
|
||||
{
|
||||
path: '/base/chips',
|
||||
name: 'Chips',
|
||||
component: () => import('@/views/base/Chips.vue'),
|
||||
},
|
||||
{
|
||||
path: '/base/collapses',
|
||||
name: 'Collapses',
|
||||
@@ -175,6 +180,11 @@ const routes = [
|
||||
name: 'Checks & Radios',
|
||||
component: () => import('@/views/forms/ChecksRadios.vue'),
|
||||
},
|
||||
{
|
||||
path: '/forms/chip-input',
|
||||
name: 'Chip Input',
|
||||
component: () => import('@/views/forms/ChipInput.vue'),
|
||||
},
|
||||
{
|
||||
path: '/forms/range',
|
||||
name: 'Range',
|
||||
|
||||
@@ -0,0 +1,166 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol :xs="12">
|
||||
<DocsComponents href="components/chip/" />
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Chip</strong> <small>Basic and outline</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-body-secondary small">
|
||||
Chips are compact UI elements for labels, filters, and quick selections. Use the
|
||||
<code>CChip</code> component with optional <code>variant</code> prop.
|
||||
</p>
|
||||
<DocsExample href="components/chip/#basic-chips">
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<CChip>Basic chip</CChip>
|
||||
<CChip>Frontend</CChip>
|
||||
<CChip>Design system</CChip>
|
||||
<CChip>Documentation</CChip>
|
||||
</div>
|
||||
</DocsExample>
|
||||
<p class="text-body-secondary small">
|
||||
Add <code>variant="outline"</code> to create a lighter, bordered appearance.
|
||||
</p>
|
||||
<DocsExample href="components/chip/#outline-chips">
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<CChip variant="outline">Outline chip</CChip>
|
||||
<CChip variant="outline">Product</CChip>
|
||||
<CChip variant="outline">Marketing</CChip>
|
||||
<CChip variant="outline">Analytics</CChip>
|
||||
</div>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Chip</strong> <small>With icons and avatars</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-body-secondary small">
|
||||
Chips can include icons, user avatars, or avatar components to make tags easier to scan.
|
||||
</p>
|
||||
<DocsExample href="components/chip/#chips-with-icons">
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<CChip>
|
||||
<span class="chip-icon">
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M8 1a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm-5 12s0-3 5-3 5 3 5 3v1H3v-1Z" />
|
||||
</svg>
|
||||
</span>
|
||||
Team member
|
||||
</CChip>
|
||||
<CChip>
|
||||
<span class="chip-icon">
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M2 2h12v2H2V2Zm0 5h8v2H2V7Zm0 5h12v2H2v-2Z" />
|
||||
</svg>
|
||||
</span>
|
||||
Backlog item
|
||||
</CChip>
|
||||
</div>
|
||||
</DocsExample>
|
||||
<DocsExample href="components/chip/#chips-with-avatars">
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<CChip>
|
||||
<img class="chip-img" :src="avatar1" width="16" height="16" alt="" /> Olivia Martin
|
||||
</CChip>
|
||||
<CChip>
|
||||
<img class="chip-img" :src="avatar4" width="16" height="16" alt="" /> Ethan Carter
|
||||
</CChip>
|
||||
<CChip>
|
||||
<span class="avatar avatar-sm bg-primary text-white">A</span> Account manager
|
||||
</CChip>
|
||||
<CChip>
|
||||
<span class="avatar avatar-sm bg-success text-white">Q</span> QA owner
|
||||
</CChip>
|
||||
</div>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Chip</strong> <small>Variants and sizes</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-body-secondary small">
|
||||
Use the <code>color</code> prop for contextual variants and the <code>size</code> prop
|
||||
for different sizes.
|
||||
</p>
|
||||
<DocsExample href="components/chip/#variants">
|
||||
<div class="d-flex flex-wrap gap-2 mb-3">
|
||||
<CChip color="primary" clickable>Product</CChip>
|
||||
<CChip color="primary" active>Active product</CChip>
|
||||
<CChip color="success" clickable>Published</CChip>
|
||||
<CChip color="success" active>Live</CChip>
|
||||
<CChip color="warning" clickable>Review</CChip>
|
||||
<CChip color="danger" active>Blocked</CChip>
|
||||
</div>
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<CChip size="sm">Small chip</CChip>
|
||||
<CChip>Default chip</CChip>
|
||||
<CChip size="lg">Large chip</CChip>
|
||||
<CChip variant="outline" color="primary" clickable>Outline primary</CChip>
|
||||
</div>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Chip</strong> <small>Interactive examples</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-body-secondary small">
|
||||
Chips support selection, removal, and disabled states using props like
|
||||
<code>selectable</code>, <code>removable</code>, and <code>disabled</code>.
|
||||
</p>
|
||||
<DocsExample href="components/chip/#interactive">
|
||||
<div class="d-flex flex-wrap gap-2 mb-3">
|
||||
<CChip selectable>Selectable</CChip>
|
||||
<CChip selectable selected>Selected</CChip>
|
||||
<CChip removable>Removable</CChip>
|
||||
<CChip disabled>Disabled</CChip>
|
||||
</div>
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<CChip size="lg" removable>Team Alpha</CChip>
|
||||
<CChip variant="outline" color="info" selectable>Filter: Priority</CChip>
|
||||
<CChip variant="outline" color="success" selectable selected>Filter: Ready</CChip>
|
||||
</div>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import avatar1 from '@/assets/images/avatars/1.jpg'
|
||||
import avatar4 from '@/assets/images/avatars/4.jpg'
|
||||
|
||||
export default {
|
||||
name: 'Chips',
|
||||
setup() {
|
||||
return {
|
||||
avatar1,
|
||||
avatar4,
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,190 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol :xs="12">
|
||||
<DocsComponents href="forms/chip-input/" />
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Chip Input</strong> <small>Basic example</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-body-secondary small">
|
||||
Chip input lets users enter multiple values in one field. Use the
|
||||
<code>CChipInput</code> component with props like <code>placeholder</code> and
|
||||
<code>defaultValue</code>.
|
||||
</p>
|
||||
<DocsExample href="forms/chip-input/#basic-example">
|
||||
<CChipInput
|
||||
label="Skills:"
|
||||
name="skills"
|
||||
placeholder="Add a skill..."
|
||||
:defaultValue="['JavaScript', 'TypeScript', 'Accessibility']"
|
||||
/>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Chip Input</strong> <small>Variants</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-body-secondary small">
|
||||
Use the <code>chipClassName</code> prop to apply contextual chip styles, which is handy
|
||||
for labels, issue types, or priorities.
|
||||
</p>
|
||||
<DocsExample href="forms/chip-input/#variants">
|
||||
<CChipInput
|
||||
name="issues"
|
||||
placeholder="Add label..."
|
||||
:defaultValue="['Feature', 'Approved', 'Needs review', 'Blocking']"
|
||||
:chipClassName="getChipClassName"
|
||||
/>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Chip Input</strong> <small>Sizes</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-body-secondary small">
|
||||
Use the <code>size</code> prop with <code>"sm"</code> or <code>"lg"</code> to align the
|
||||
field with surrounding form controls.
|
||||
</p>
|
||||
<DocsExample href="forms/chip-input/#sizes">
|
||||
<CChipInput
|
||||
label="Small"
|
||||
size="sm"
|
||||
placeholder="Add small tag..."
|
||||
:defaultValue="['HTML']"
|
||||
class="mb-3"
|
||||
/>
|
||||
<CChipInput
|
||||
label="Default"
|
||||
placeholder="Add default tag..."
|
||||
:defaultValue="['JavaScript']"
|
||||
class="mb-3"
|
||||
/>
|
||||
<CChipInput
|
||||
label="Large"
|
||||
size="lg"
|
||||
placeholder="Add large tag..."
|
||||
:defaultValue="['TypeScript']"
|
||||
/>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Chip Input</strong> <small>Empty state and label</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-body-secondary small">
|
||||
You can start with an empty field or use a separate <code>CFormLabel</code> for clearer
|
||||
form structure and accessibility.
|
||||
</p>
|
||||
<DocsExample href="forms/chip-input/#empty-state">
|
||||
<CChipInput name="tags" placeholder="Start typing tags..." class="mb-3" />
|
||||
<div class="mb-0">
|
||||
<CFormLabel for="techStackInput">Tech stack</CFormLabel>
|
||||
<CChipInput
|
||||
id="techStackInput"
|
||||
name="techStack"
|
||||
placeholder="Add package..."
|
||||
:defaultValue="['Vue', 'Vite']"
|
||||
/>
|
||||
<CFormText>Press Enter or comma to add a value.</CFormText>
|
||||
</div>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Chip Input</strong> <small>Disabled and readonly</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-body-secondary small">
|
||||
Use the <code>disabled</code> prop to block interaction entirely, or
|
||||
<code>readOnly</code> to keep values visible while preventing changes.
|
||||
</p>
|
||||
<DocsExample href="forms/chip-input/#disabled">
|
||||
<CChipInput
|
||||
disabled
|
||||
:removable="false"
|
||||
placeholder="Input disabled"
|
||||
:defaultValue="['Read only', 'Locked']"
|
||||
class="mb-3"
|
||||
/>
|
||||
<CChipInput
|
||||
readOnly
|
||||
placeholder="Read-only values"
|
||||
:defaultValue="['JavaScript', 'TypeScript']"
|
||||
/>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Chip Input</strong> <small>Form-friendly examples</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-body-secondary small">
|
||||
The component integrates well with ordinary forms, including helper text and predefined
|
||||
values.
|
||||
</p>
|
||||
<DocsExample href="forms/chip-input/#with-label">
|
||||
<form class="row g-3">
|
||||
<div class="col-12">
|
||||
<CFormLabel for="recipientsInput">Recipients</CFormLabel>
|
||||
<CChipInput
|
||||
id="recipientsInput"
|
||||
name="recipients"
|
||||
placeholder="Add email..."
|
||||
:defaultValue="['olivia@coreui.io', 'ethan@coreui.io']"
|
||||
/>
|
||||
<CFormText>Add one address at a time and press Enter.</CFormText>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<CFormLabel for="categoriesInput">Categories</CFormLabel>
|
||||
<CChipInput
|
||||
id="categoriesInput"
|
||||
name="categories"
|
||||
placeholder="Add category..."
|
||||
:defaultValue="['Product', 'Design', 'Docs']"
|
||||
chipClassName="chip-outline"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ChipInput',
|
||||
setup() {
|
||||
const getChipClassName = (value) => {
|
||||
const colorMap = {
|
||||
Feature: 'chip-primary',
|
||||
Approved: 'chip-success',
|
||||
'Needs review': 'chip-warning',
|
||||
Blocking: 'chip-danger',
|
||||
}
|
||||
return colorMap[value] || ''
|
||||
}
|
||||
|
||||
return {
|
||||
getChipClassName,
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user