feat(table): add table component

components/.vitepress/config.ts

@@ -97,6 +97,10 @@ export default defineConfig({
             text: 'Spinner',
             link: '/spinner/component'
           },
+          {
+            text: 'Table',
+            link: '/table/component'
+          }
         ]
       },
       {

components/button/Button.vue

@@ -196,7 +196,7 @@ export default defineComponent({
   * in button link variant
   */
   &--link {
-    @apply border border-transparent underline;
+    @apply border border-transparent hover:underline;
 
     &.btn {
       &--primary {

components/checkbox/Checkbox.vue

@@ -177,5 +177,14 @@ export default defineComponent({
   &--disabled {
     @apply opacity-50;
   }
+
+  .dropdown__menu & {
+    @apply px-3 py-2 cursor-pointer text-body-100 w-full select-none text-left;
+
+    &:hover,
+    &:focus-visible {
+      @apply bg-background-75;
+    }
+  }
 }
 </style>

components/dropdown-subitem/DropdownSubitem.spec.ts

@@ -128,3 +128,14 @@ it('should able to modify button content via slot `button-content`', async () =>
   expect(item3).toBeInTheDocument()
   expect(item4).toBeInTheDocument()
 })
+
+it('should caret icon if `no-caret` is provided', () => {
+  const screen = render({
+    components: { DropdownSubitem },
+    template  : '<DropdownSubitem />',
+  })
+
+  const caret = screen.queryByTestId('dropdown-subitem-next')
+
+  expect(caret).not.toBeInTheDocument()
+})

components/dropdown-subitem/DropdownSubitem.vue

@@ -26,11 +26,17 @@
           class="dropdown__subitem-btn"
           @click.prevent="handleOnClick">
           <div class="dropdown__subitem-content">
-            <slot name="button-content">
+            <slot
+              name="button-content"
+              :next="next"
+              :back="back">
               {{ text }}
             </slot>
           </div>
-          <IconNext class="dropdown__subitem-next" />
+          <IconNext
+            v-if="!noCaret"
+            data-testid="dropdown-subitem-next"
+            class="dropdown__subitem-next" />
         </DropdownItem>
       </template>
 
@@ -48,30 +54,14 @@ import IconNext from '@carbon/icons-vue/lib/chevron--right/16'
 import IconBack from '@carbon/icons-vue/lib/arrow--left/16'
 import {
   defineComponent,
-  InjectionKey,
   inject,
   provide,
   ref,
   shallowRef,
-  ShallowRef,
   computed,
   watch,
-  Slots,
 } from 'vue-demi'
-
-interface DropdownNode {
-  _level: number, // Just id to trigger transition
-  prev?: DropdownNode,
-  slots: Slots,
-}
-
-interface DropdownContext {
-  tree: ShallowRef<DropdownNode>,
-  next: () => void,
-  back: () => void,
-}
-
-const DROPDOWN_TREE: InjectionKey<DropdownContext> = Symbol('DropdownTree')
+import { DropdownContext, DROPDOWN_TREE } from './use-dropdown-subitem'
 
 export default defineComponent({
   components: {
@@ -84,6 +74,10 @@ export default defineComponent({
       type   : String,
       default: '',
     },
+    noCaret: {
+      type   : Boolean,
+      default: false,
+    },
   },
   emits: ['click'],
   setup (props, { slots, emit }) {

components/dropdown-subitem/component.md

@@ -114,13 +114,46 @@ Similar to [Dropdown](/dropdown/component), You can change button content via sl
 </template>
 ```
 
+## Hide Caret
+
+Similar with [Dropdown](/dropdown/component), you can hide caret icon with `no-caret` props.
+
+<preview>
+  <Dropdown text="Fruit">
+    <DropdownSubitem text="with Caret">
+      <DropdownItem>Apple</DropdownItem>
+      <DropdownItem>Avocado</DropdownItem>
+    </DropdownSubitem>
+    <DropdownSubitem text="without Caret" no-caret>
+      <DropdownItem>Banana</DropdownItem>
+      <DropdownItem>Blueberry</DropdownItem>
+    </DropdownSubitem>
+  </Dropdown>
+</preview>
+
+```vue
+<template>
+  <Dropdown text="Fruit">
+    <DropdownSubitem text="with Caret">
+      <DropdownItem>Apple</DropdownItem>
+      <DropdownItem>Avocado</DropdownItem>
+    </DropdownSubitem>
+    <DropdownSubitem text="without Caret" no-caret>
+      <DropdownItem>Banana</DropdownItem>
+      <DropdownItem>Blueberry</DropdownItem>
+    </DropdownSubitem>
+  </Dropdown>
+</template>
+```
+
 ## API
 
 ### Props
 
-| Props  |   Type   | Default | Description  |
-|--------|:--------:|:-------:|--------------|
-| `text` | `String` |   `-`   | Text content |
+| Props      |   Type    | Default | Description     |
+|------------|:---------:|:-------:|-----------------|
+| `text`     | `String`  |   `-`   | Text content    |
+| `no-caret` | `Boolean` | `false` | Hide caret icon |
 
 ### Slots
 

components/dropdown-subitem/use-dropdown-subitem.ts

@@ -0,0 +1,19 @@
+import {
+  InjectionKey,
+  ShallowRef,
+  Slots,
+} from 'vue-demi'
+
+export interface DropdownNode {
+  _level: number, // Just id to trigger transition
+  prev?: DropdownNode,
+  slots: Slots,
+}
+
+export interface DropdownContext {
+  tree: ShallowRef<DropdownNode>,
+  next: () => void,
+  back: () => void,
+}
+
+export const DROPDOWN_TREE: InjectionKey<DropdownContext> = Symbol('DropdownTree')

components/dropdown/Dropdown.spec.ts

@@ -531,3 +531,19 @@ it('should trigger event `show` when Dropdown shown', async () => {
 
   expect(spy).toBeCalled()
 })
+
+it('should hide caret icon if props `no-caret` is provided', () => {
+  const screen = render({
+    components: { Dropdown, DropdownItem },
+    template  : `
+      <Dropdown no-caret>
+        <DropdownItem text="Item1" />
+        <DropdownItem text="Item2" />
+      </Dropdown>
+    `,
+  })
+
+  const caret = screen.queryByTestId('dropdown-caret')
+
+  expect(caret).not.toBeInTheDocument()
+})

components/dropdown/Dropdown.vue

@@ -23,6 +23,10 @@
         <slot name="button-content">
           {{ text }}
         </slot>
+        <IconArrow
+          v-if="!noCaret"
+          class="dropdown__caret"
+          data-testid="dropdown-caret" />
       </Button>
     </slot>
 
@@ -62,6 +66,7 @@ import DropdownGroup from '../dropdown-subitem/DropdownSubitem.vue'
 import { useFocus } from './utils/use-focus'
 import { usePopper, Placement } from './utils/use-popper'
 import { useVModel } from '../input/use-input'
+import IconArrow from '@carbon/icons-vue/lib/chevron--down/16'
 import type {
   StyleVariant,
   ColorVariant,
@@ -77,12 +82,13 @@ interface DropdownContext {
   isOpen: Ref<boolean>,
 }
 
-export const DROPDOWN_CONTEXT: InjectionKey<DropdownContext> = Symbol('DropdownContext')
+export const DROPDOWN_CONTEXT: InjectionKey<DropdownContext> = Symbol('DROPDOWN_CONTEXT')
 
 export default defineComponent({
   components: {
     Button,
     DropdownGroup,
+    IconArrow,
   },
   props: {
     modelValue: {
@@ -121,6 +127,10 @@ export default defineComponent({
       type   : Boolean,
       default: false,
     },
+    noCaret: {
+      type   : Boolean,
+      default: false,
+    },
   },
   models: {
     prop : 'modelValue',
@@ -254,5 +264,9 @@ export default defineComponent({
   &__menuContainer > .dropdown__subitem:last-child .dropdown__item {
     @apply rounded-b;
   }
+
+  &__activator > &__caret {
+    @apply self-center;
+  }
 }
 </style>

components/dropdown/component.md

@@ -319,6 +319,30 @@ You can also completely change dropdown's activator button to something else via
 </template>
 ```
 
+## Hide Caret
+
+Add props `no-caret` to hide caret icon
+
+<preview>
+  <Dropdown
+    text="Button"
+    no-caret>
+    <DropdownItem>Item Text</DropdownItem>
+    <DropdownItem>Item Text</DropdownItem>
+  </Dropdown>
+</preview>
+
+```vue
+<template>
+  <Dropdown
+    text="Button"
+    no-caret>
+    <DropdownItem>Item Text</DropdownItem>
+    <DropdownItem>Item Text</DropdownItem>
+  </Dropdown>
+</template>
+```
+
 ## Binding v-model
 
 You can programmatically toggle dropdown using `v-model`
@@ -357,6 +381,7 @@ You can programmatically toggle dropdown using `v-model`
 | `size`       | `String`  |      `md`      | Size of button, valid value is `sm`, `md`, `lg`                                                                                                                                                                                    |
 | `pill`       | `Boolean` |    `false`     | Enable pill mode                                                                                                                                                                                                                   |
 | `icon`       | `Boolean` |    `false`     | Enable icon mode                                                                                                                                                                                                                   |
+| `no-caret`   | `Boolean` |    `false`     | Hide caret icon                                                                                                                                                                                                                    |
 | `disabled`   | `Boolean` |    `false`     | Disable state                                                                                                                                                                                                                      |
 | `placement`  | `String`  | `bottom-start` | Menu placement, valid value is <br/>`auto`, `auto-start`, `auto-end`,<br/>`top`, `top-start`, `top-end`,<br/>`bottom`, `bottom-start`, `bottom-end`,<br/>`right`, `right-start`, `right-end`,<br/>`left`, `left-start`, `left-end` |
 | `modelValue` | `Boolean` |    `false`     | v-model value for menu visibilities                                                                                                                                                                                                |

components/filterbar/Filterbar.vue

@@ -1,14 +1,15 @@
 <template>
   <div class="filterbar">
     <template
-      v-for="item in items"
+      v-for="item in pinnedItems"
       :key="item.key">
       <slot :name="`cell(${item.key})`">
         <component
           :is="item.type"
           class="filterbar__item"
           :schema="item"
           :model-value="getValue(item.key)"
+          v-bind="item"
           @update:model-value="setValue(item.key, $event)" />
       </slot>
     </template>
@@ -29,17 +30,17 @@ import {
 import { FilterItem } from './use-filterbar'
 import Dropdown from '../dropdown/Dropdown.vue'
 import Button from '../button/Button.vue'
-import Select from './type/Select.vue'
-import Toggle from './type/Toggle.vue'
-import Multiselect from './type/Multiselect.vue'
+import Select from './pinned/Select.vue'
+import Toggle from './pinned/Toggle.vue'
+import Multiselect from './pinned/Multiselect.vue'
+import Date from './pinned/Date.vue'
 import { useVModel } from '../input/use-input'
-import IconSetting from '@carbon/icons-vue/lib/settings--adjust/20'
 
 export default defineComponent({
   components: {
-    IconSetting,
     Button,
     Dropdown,
+    Date,
     Select,
     Multiselect,
     Toggle,
@@ -61,7 +62,8 @@ export default defineComponent({
   emits: ['update:modelValue'],
   setup (props) {
     const model = useVModel(props)
-    const items = computed(() => {
+
+    const pinnedItems = computed(() => {
       return props.schema
         .filter((item) => {
           return item.pinned !== false
@@ -81,7 +83,8 @@ export default defineComponent({
     }
 
     return {
-      items,
+      model,
+      pinnedItems,
       getValue,
       setValue,
       reset,
@@ -93,5 +96,14 @@ export default defineComponent({
 <style lang="postcss">
 .filterbar {
   @apply flex gap-2;
+
+  &__item {
+    &.filterbar--active {
+      &.btn--input,
+      & .dropdown__activator.btn--input {
+        @apply bg-body-100 text-white;
+      }
+    }
+  }
 }
 </style>