feat(CChip, CChipInput): add new components
This commit is contained in:
mrholek
+10
@@ -65,6 +65,11 @@ export default [
|
|||||||
name: 'Carousels',
|
name: 'Carousels',
|
||||||
to: '/base/carousels',
|
to: '/base/carousels',
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
component: 'CNavItem',
|
||||||
|
name: 'Chips',
|
||||||
|
to: '/base/chips',
|
||||||
|
},
|
||||||
{
|
{
|
||||||
component: 'CNavItem',
|
component: 'CNavItem',
|
||||||
name: 'Collapses',
|
name: 'Collapses',
|
||||||
@@ -205,6 +210,11 @@ export default [
|
|||||||
name: 'Checks & Radios',
|
name: 'Checks & Radios',
|
||||||
to: '/forms/checks-radios',
|
to: '/forms/checks-radios',
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
component: 'CNavItem',
|
||||||
|
name: 'Chip Input',
|
||||||
|
to: '/forms/chip-input',
|
||||||
|
},
|
||||||
{
|
{
|
||||||
component: 'CNavItem',
|
component: 'CNavItem',
|
||||||
name: 'Date Picker',
|
name: 'Date Picker',
|
||||||
|
|||||||
@@ -66,6 +66,11 @@ const routes = [
|
|||||||
name: 'Carousels',
|
name: 'Carousels',
|
||||||
component: () => import('@/views/base/Carousels.vue'),
|
component: () => import('@/views/base/Carousels.vue'),
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/base/chips',
|
||||||
|
name: 'Chips',
|
||||||
|
component: () => import('@/views/base/Chips.vue'),
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/base/collapses',
|
path: '/base/collapses',
|
||||||
name: 'Collapses',
|
name: 'Collapses',
|
||||||
@@ -175,6 +180,11 @@ const routes = [
|
|||||||
name: 'Checks & Radios',
|
name: 'Checks & Radios',
|
||||||
component: () => import('@/views/forms/ChecksRadios.vue'),
|
component: () => import('@/views/forms/ChecksRadios.vue'),
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/forms/chip-input',
|
||||||
|
name: 'Chip Input',
|
||||||
|
component: () => import('@/views/forms/ChipInput.vue'),
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/forms/range',
|
path: '/forms/range',
|
||||||
name: '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