frappe-ui 0.1.5 → 0.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.js",
   "scripts": {
@@ -50,6 +50,7 @@
     "@tiptap/starter-kit": "^2.0.3",
     "@tiptap/suggestion": "^2.0.3",
     "@tiptap/vue-3": "^2.0.3",
+    "@vueuse/core": "^10.4.1",
     "feather-icons": "^4.28.0",
     "idb-keyval": "^6.2.0",
     "showdown": "^2.1.0",

package/src/components/Badge.vue

@@ -9,7 +9,7 @@
     >
       <slot name="prefix"></slot>
     </div>
-    <slot>{{ props.label }}</slot>
+    <slot>{{ props.label?.toString() }}</slot>
     <div
       :class="[props.size == 'lg' ? 'max-h-6' : 'max-h-4']"
       v-if="$slots.suffix"
@@ -22,11 +22,15 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 
+interface Label {
+  toString(): string
+}
+
 interface BadgeProps {
   theme?: 'gray' | 'blue' | 'green' | 'orange' | 'red'
   size?: 'sm' | 'md' | 'lg'
   variant?: 'solid' | 'subtle' | 'outline' | 'ghost'
-  label?: string
+  label?: Label | string | number
 }
 
 const props = withDefaults(defineProps<BadgeProps>(), {

package/src/components/Breadcrumbs.story.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { logEvent } from 'histoire/client'
+import Breadcrumbs from './Breadcrumbs.vue'
+</script>
+
+<template>
+  <Story :layout="{ type: 'grid', width: 500 }">
+    <Variant title="With route option">
+      <Breadcrumbs
+        :items="[
+          {
+            label: 'Home',
+            route: { name: 'Home' },
+          },
+          {
+            label: 'Views',
+            route: '/components',
+          },
+          {
+            label: 'List',
+            route: '/components/breadcrumbs',
+          },
+        ]"
+      />
+    </Variant>
+    <Variant title="With onClick option">
+      <Breadcrumbs
+        :items="[
+          {
+            label: 'Home',
+            onClick: () => logEvent('onClick', 'Home'),
+          },
+          {
+            label: 'Views',
+            onClick: () => logEvent('onClick', 'Home'),
+          },
+          {
+            label: 'Kanban',
+            onClick: () => logEvent('onClick', 'Home'),
+          },
+        ]"
+      />
+    </Variant>
+
+    <Variant title="With prefix slot">
+      <Breadcrumbs
+        :items="[
+          {
+            label: 'Home',
+            icon: '🏡',
+            route: { name: 'Home' },
+          },
+          {
+            label: 'Views',
+            icon: '🏞️',
+            route: '/components',
+          },
+          {
+            label: 'List',
+            icon: '📃',
+            route: '/components/breadcrumbs',
+          },
+        ]"
+      >
+        <template #prefix="{ item }">
+          <span class="mr-1">
+            {{ item.icon }}
+          </span>
+        </template>
+      </Breadcrumbs>
+    </Variant>
+  </Story>
+</template>

package/src/components/Breadcrumbs.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="flex min-w-0 items-center">
+    <template v-if="dropdownItems.length">
+      <Dropdown class="h-7" :options="dropdownItems">
+        <Button variant="ghost">
+          <template #icon>
+            <svg
+              class="w-4 text-gray-600"
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <circle cx="12" cy="12" r="1" />
+              <circle cx="19" cy="12" r="1" />
+              <circle cx="5" cy="12" r="1" />
+            </svg>
+          </template>
+        </Button>
+      </Dropdown>
+      <span class="ml-1 mr-0.5 text-base text-gray-500" aria-hidden="true">
+        /
+      </span>
+    </template>
+    <div
+      class="flex min-w-0 items-center overflow-hidden text-ellipsis whitespace-nowrap"
+    >
+      <template v-for="(item, i) in crumbs" :key="item.label">
+        <component
+          :is="item.route ? 'router-link' : 'button'"
+          class="flex items-center rounded px-0.5 py-1 text-lg font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-gray-400"
+          :class="[
+            i == crumbs.length - 1
+              ? 'text-gray-900'
+              : 'text-gray-600 hover:text-gray-700',
+          ]"
+          v-bind="item.route ? { to: item.route } : { onClick: item.onClick }"
+        >
+          <slot name="prefix" :item="item" />
+          <span>
+            {{ item.label }}
+          </span>
+        </component>
+        <span
+          v-if="i != crumbs.length - 1"
+          class="mx-0.5 text-base text-gray-500"
+          aria-hidden="true"
+        >
+          /
+        </span>
+      </template>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { useWindowSize } from '@vueuse/core'
+import { computed } from 'vue'
+import { RouterLinkProps, useRouter } from 'vue-router'
+import Dropdown from '../components/Dropdown.vue'
+import Button from '../components/Button.vue'
+
+interface BreadcrumbItem {
+  label: string
+  route?: RouterLinkProps['to']
+  onClick?: () => void
+  [key: string]: any
+}
+
+interface BreadcrumbsProps {
+  items: BreadcrumbItem[]
+}
+
+const props = defineProps<BreadcrumbsProps>()
+
+const router = useRouter()
+const { width } = useWindowSize()
+
+const items = computed(() => {
+  return (props.items || []).filter(Boolean)
+})
+
+const dropdownItems = computed(() => {
+  if (width.value > 640) return []
+
+  let allExceptLastTwo = items.value.slice(0, -2)
+  return allExceptLastTwo.map((item) => {
+    let onClick = item.onClick ? item.onClick : () => router.push(item.route)
+    return {
+      ...item,
+      icon: null,
+      label: item.label,
+      onClick,
+    }
+  })
+})
+
+const crumbs = computed(() => {
+  if (width.value > 640) return items.value
+
+  let lastTwo = items.value.slice(-2)
+  return lastTwo
+})
+</script>

package/src/components/ListView/ListHeader.vue

@@ -0,0 +1,28 @@
+<template>
+  <div
+    class="mx-5 mb-2 grid items-center space-x-4 rounded bg-gray-100 p-2"
+    :style="{ gridTemplateColumns: getGridTemplateColumns(columns) }"
+  >
+    <Checkbox
+      class="cursor-pointer duration-300"
+      :modelValue="allRowsSelected"
+      @click.stop="toggleAllRows"
+    />
+    <slot>
+      <ListHeaderItem
+        v-for="column in columns"
+        :key="column.key"
+        :column="column"
+      />
+    </slot>
+  </div>
+</template>
+
+<script setup>
+import Checkbox from '../Checkbox.vue'
+import ListHeaderItem from './ListHeaderItem.vue'
+import { getGridTemplateColumns } from './utils'
+import { inject } from 'vue'
+
+const { columns, allRowsSelected, toggleAllRows } = inject('list')
+</script>

package/src/components/ListView/ListHeaderItem.vue

@@ -0,0 +1,22 @@
+<template>
+  <div
+    class="flex items-center space-x-2 text-base text-gray-600"
+    :class="alignmentMap[column.align]"
+  >
+    <slot name="prefix" v-bind="{ column }" />
+    <div>
+      {{ column.label }}
+    </div>
+    <slot name="suffix" v-bind="{ column }" />
+  </div>
+</template>
+
+<script setup>
+import { alignmentMap } from './utils'
+const props = defineProps({
+  column: {
+    type: Object,
+    required: true,
+  },
+})
+</script>

package/src/components/ListView/ListRow.vue

@@ -1,29 +1,72 @@
+<template>
+  <component
+    :is="row.route ? 'router-link' : 'div'"
+    class="mx-5 flex cursor-pointer flex-col transition-all duration-300 ease-in-out"
+    v-bind="row.route ? { to: row.route } : { onClick: row.onClick }"
+  >
+    <component
+      :is="row.route ? 'template' : 'button'"
+      class="[all:unset] hover:[all:unset]"
+    >
+      <div
+        class="grid items-center space-x-4 rounded px-2 py-2.5"
+        :class="
+          selections.has(row[rowKey])
+            ? 'bg-gray-100 hover:bg-gray-200'
+            : 'hover:bg-gray-50'
+        "
+        :style="{ gridTemplateColumns: getGridTemplateColumns(columns) }"
+      >
+        <Checkbox
+          :modelValue="selections.has(row[rowKey])"
+          @click.stop="toggleRow(row[rowKey])"
+          class="cursor-pointer duration-300"
+        />
+        <div
+          v-for="column in columns"
+          :key="column.key"
+          :class="alignmentMap[column.align]"
+        >
+          <slot v-bind="{ column, item: _row(row)[column.key] }">
+            <ListRowItem
+              :item="_row(row)[column.key]"
+              :type="column.type"
+              :align="column.align"
+            />
+          </slot>
+        </div>
+      </div>
+      <div
+        v-if="idx < rows.length - 1"
+        class="mx-2 h-px border-t border-gray-200"
+      />
+    </component>
+  </component>
+</template>
+
 <script setup>
-import { inject } from 'vue'
 import Checkbox from '../Checkbox.vue'
+import ListRowItem from './ListRowItem.vue'
+import { alignmentMap, getGridTemplateColumns } from './utils'
+import { inject } from 'vue'
 
-const list = inject('list')
 const props = defineProps({
-  as: { type: String, default: 'div' },
-  row: { type: Object, default: () => ({}), required: true },
+  row: {
+    type: Object,
+    required: true,
+  },
+  idx: {
+    type: Number,
+    required: true,
+  },
 })
-</script>
 
-<template>
-  <component
-    :is="as"
-    class="mx-2 flex cursor-pointer items-center space-x-4 border-b py-2 transition-all duration-300 ease-in-out"
-    :class="
-      list.selections.has(row.name)
-        ? 'bg-gray-100 hover:bg-gray-200'
-        : 'hover:bg-gray-50'
-    "
-  >
-    <Checkbox
-      :modelValue="list.selections.has(row.name)"
-      @click.stop="list.toggleSelection(row.name)"
-      class="cursor-pointer duration-300"
-    />
-    <slot></slot>
-  </component>
-</template>
+function _row(row) {
+  if (row.row && typeof row.row === 'object' && (row.onClick || row.route)) {
+    return row.row
+  }
+  return row
+}
+
+const { rows, columns, rowKey, selections, toggleRow } = inject('list')
+</script>

package/src/components/ListView/ListRowItem.vue

@@ -1,10 +1,42 @@
-<script setup></script>
-
 <template>
-  <div
-    class="flex min-h-[1.5rem] flex-1 items-center space-x-2 truncate text-base"
-    :class="$attrs.class"
+  <Tooltip
+    :text="label"
+    class="flex items-center space-x-2"
+    :class="alignmentMap[align]"
   >
-    <slot> </slot>
-  </div>
+    <slot name="prefix" />
+    <slot v-bind="{ label }">
+      <div class="truncate text-base">
+        {{ label }}
+      </div>
+    </slot>
+    <slot name="suffix" />
+  </Tooltip>
 </template>
+<script setup>
+import { alignmentMap } from './utils'
+import Tooltip from '../Tooltip.vue'
+import { computed } from 'vue'
+
+const props = defineProps({
+  item: {
+    type: [String, Number, Object],
+    default: '',
+  },
+  align: {
+    type: String,
+    default: 'left',
+  },
+})
+
+const label = computed(() => {
+  return getValue(props.item).label || ''
+})
+
+function getValue(value) {
+  if (value && typeof value === 'object') {
+    return value
+  }
+  return { label: value }
+}
+</script>

package/src/components/ListView/ListRows.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="h-full overflow-y-auto">
+    <slot>
+      <ListRow
+        v-for="(row, i) in rows"
+        :key="row[rowKey]"
+        :row="row"
+        :idx="i"
+      />
+    </slot>
+  </div>
+</template>
+
+<script setup>
+import ListRow from './ListRow.vue'
+import { inject } from 'vue'
+
+const { rows, rowKey } = inject('list')
+</script>

package/src/components/ListView/ListSelectBanner.vue

@@ -0,0 +1,82 @@
+<template>
+  <transition
+    enter-active-class="duration-300 ease-out"
+    enter-from-class="transform opacity-0"
+    enter-to-class="opacity-100"
+    leave-active-class="duration-300 ease-in"
+    leave-from-class="opacity-100"
+    leave-to-class="transform opacity-0"
+  >
+    <div
+      v-if="selections.size"
+      class="absolute inset-x-0 bottom-6 mx-auto w-max text-base"
+    >
+      <div
+        class="flex min-w-[596px] items-center space-x-3 rounded-lg bg-white px-4 py-2 shadow-2xl"
+        :class="$attrs.class"
+      >
+        <slot
+          v-bind="{
+            selections,
+            allRowsSelected,
+            selectAll: () => toggleAllRows(true),
+            unselectAll: () => toggleAllRows(false),
+          }"
+        >
+          <div
+            class="flex flex-1 justify-between border-r border-gray-300 text-gray-900"
+          >
+            <div class="flex items-center space-x-3">
+              <Checkbox
+                :modelValue="true"
+                :disabled="true"
+                class="text-gray-900"
+              />
+              <div>{{ selectedText }}</div>
+            </div>
+            <div class="mr-3">
+              <slot
+                name="actions"
+                v-bind="{
+                  selections,
+                  allRowsSelected,
+                  selectAll: () => toggleAllRows(true),
+                  unselectAll: () => toggleAllRows(false),
+                }"
+              />
+            </div>
+          </div>
+          <div class="flex items-center space-x-1">
+            <Button
+              class="w- text-gray-700"
+              :disabled="allRowsSelected"
+              :class="allRowsSelected ? 'cursor-not-allowed' : ''"
+              variant="ghost"
+              @click="toggleAllRows(true)"
+            >
+              Select all
+            </Button>
+            <Button icon="x" variant="ghost" @click="toggleAllRows(false)" />
+          </div>
+        </slot>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script setup>
+import Checkbox from '../Checkbox.vue'
+import Button from '../Button.vue'
+import { computed, inject } from 'vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+let selectedText = computed(() => {
+  let title = selections.size === 1 ? 'Row' : 'Rows'
+  return `${selections.size} ${title} selected`
+})
+
+const { list, selections, allRowsSelected, toggleAllRows } = inject('list')
+</script>

package/src/components/ListView/ListView.vue

@@ -1,116 +1,70 @@
 <template>
-  <div id="content" class="flex w-full flex-1 flex-col overflow-x-auto">
-    <div class="flex w-max min-w-full flex-col overflow-y-hidden">
-      <div
-        id="list-header"
-        class="mx-2 flex items-center space-x-4 border-b py-2"
-      >
-        <Checkbox
-          class="cursor-pointer duration-300"
-          :modelValue="state.allRowsSelected"
-          @click.stop="state.toggleAllRows(!allRowsSelected)"
-        />
-        <div
-          v-for="column in props.columns"
-          :key="column"
-          class="flex-1 text-sm text-gray-600"
-          :class="column.class"
-        >
-          {{ column.label }}
-        </div>
-      </div>
-      <div id="list-rows" class="h-full overflow-y-auto">
-        <template v-for="row in props.rows" :key="row.name">
-          <slot name="list-row" :row="row">
-            <ListRow as="div" :row="row">
-              <ListRowItem v-for="column in props.columns" :key="column.name">
-                {{ row[column.name] }}
-              </ListRowItem>
-            </ListRow>
-          </slot>
-        </template>
-      </div>
-      <transition
-        enter-active-class="duration-300 ease-out"
-        enter-from-class="transform opacity-0"
-        enter-to-class="opacity-100"
-        leave-active-class="duration-300 ease-in"
-        leave-from-class="opacity-100"
-        leave-to-class="transform opacity-0"
-      >
-        <div
-          v-if="state.selections.size"
-          class="fixed inset-x-0 bottom-6 mx-auto w-max text-base"
-        >
-          <div
-            class="flex w-[596px] items-center space-x-3 rounded-lg bg-white px-4 py-2 shadow-2xl"
-          >
-            <div
-              class="flex flex-1 items-center space-x-3 border-r border-gray-300 text-gray-900"
-            >
-              <Checkbox
-                :modelValue="true"
-                :disabled="true"
-                class="text-gray-900"
-              />
-              <div>{{ state.selectedText }}</div>
-            </div>
-            <div class="flex items-center space-x-1">
-              <Button
-                class="text-gray-700"
-                :disabled="state.allRowsSelected"
-                :class="state.allRowsSelected ? 'cursor-not-allowed' : ''"
-                variant="ghost"
-                @click="state.toggleAllRows(true)"
-              >
-                Select all
-              </Button>
-              <Button
-                icon="x"
-                variant="ghost"
-                @click="state.toggleAllRows(false)"
-              />
-            </div>
-          </div>
-        </div>
-      </transition>
+  <div class="relative flex w-full flex-1 flex-col overflow-x-auto">
+    <div
+      class="mt-3 flex w-max min-w-full flex-col overflow-y-hidden"
+      :class="$attrs.class"
+    >
+      <slot>
+        <ListHeader />
+        <ListRows />
+        <ListSelectBanner />
+      </slot>
     </div>
   </div>
 </template>
 <script setup>
-import { computed, provide, reactive } from 'vue'
-import Button from '../Button.vue'
-import Checkbox from '../Checkbox.vue'
-import ListRow from './ListRow.vue'
-import ListRowItem from './ListRowItem.vue'
+import ListHeader from './ListHeader.vue'
+import ListRows from './ListRows.vue'
+import ListSelectBanner from './ListSelectBanner.vue'
+import { reactive, computed, provide } from 'vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
 
 const props = defineProps({
-  columns: { type: Array, default: [] },
-  rows: { type: Array, default: [] },
+  columns: {
+    type: Array,
+    default: [],
+  },
+  rows: {
+    type: Array,
+    default: [],
+  },
+  rowKey: {
+    type: String,
+    required: true,
+  },
 })
 
-const state = reactive({
-  selections: new Set(),
-  allRowsSelected: computed(() => state.selections.size === props.rows.length),
-  selectedText: computed(() => {
-    return state.selections.size > 1
-      ? `${state.selections.size} items selected`
-      : `${state.selections.size} item selected`
-  }),
+let selections = reactive(new Set())
+
+const allRowsSelected = computed(() => {
+  if (!props.rows.length) return false
+  return selections.size === props.rows.length
 })
-provide('list', state)
 
-state.toggleAllRows = () => {
-  return state.allRowsSelected
-    ? state.selections.clear()
-    : props.rows.forEach((row) => state.selections.add(row.name))
+function toggleRow(row) {
+  if (!selections.delete(row)) {
+    selections.add(row)
+  }
 }
 
-state.toggleSelection = (name) => {
-  if (state.selections.has(name)) {
-    state.selections.delete(name)
-  } else {
-    state.selections.add(name)
+function toggleAllRows(select) {
+  if (!select || allRowsSelected.value) {
+    selections.clear()
+    return
   }
+  props.rows.forEach((row) => selections.add(row[props.rowKey]))
 }
+
+provide('list', {
+  rowKey: props.rowKey,
+  rows: props.rows,
+  columns: props.columns,
+  selections,
+  allRowsSelected,
+  toggleRow,
+  toggleAllRows,
+})
 </script>

package/src/components/ListView/utils.js

@@ -0,0 +1,23 @@
+export function getGridTemplateColumns(columns) {
+  return (
+    '14px ' +
+    columns
+      .map((col) => {
+        let width = col.width || 1
+        if (typeof width === 'number') {
+          return width + 'fr'
+        }
+        return width
+      })
+      .join(' ')
+  )
+}
+
+export const alignmentMap = {
+  left: 'justify-start',
+  start: 'justify-start',
+  center: 'justify-center',
+  middle: 'justify-center',
+  right: 'justify-end',
+  end: 'justify-end',
+}

package/src/components/ListView.story.md

@@ -0,0 +1,123 @@
+**Column:**
+
+1. `label` & `key` is required in column object.
+
+2. `width` is optional and it is used to set column width in list
+
+   1. If you need a column to be `3` times a default column then add `3`. if
+      width is not mentioned default will be `1`
+   2. You can also add custom width in px and rem e.g `300px` or `12rem`
+   3. Combination of both can also be used.
+
+3. `align` is also optional. You can change the alignment of the content in the
+   column by setting it as.
+
+   1. `start` or `left` (default)
+   2. `center` or `middle`
+   3. `end` or `right`
+
+4. You can add more attributes which can be used to render custom column header
+   items.
+
+**Row**
+
+1. The row object must contain a unique_key which was mentioned in ListView
+   `row-key`
+2. You can either add all row fields in a separate `row` object or just add them
+   in directly if the fieldnames doesn't conflict with `route` or `onClick` E.g.
+   1
+
+   ```
+   {
+   	// unique_key 'id'
+   	id: 1,
+
+   	// row fields
+   	name: 'John Doe',
+   	age: 25,
+   	email: 'john@doe.com',
+
+   	// if you need to route
+   	route: { label: 'User', { params: { userId: 1 } }
+
+   	// if you need to perform action
+   	onClick: () => console.log('John Doe was clicked')
+
+   	// you can add more options after this which you can use to render custom row items
+   }
+   ```
+
+   E.g. 2
+
+   ```
+   {
+   	// unique_key 'id'
+   	id: 1,
+
+   	// row fields in separate row object
+   	row: {
+   	name: 'John Doe',
+   	age: 25,
+   	email: 'john@doe.com',
+   	route: '', // used separate row to avoid this conflict
+   	}
+
+   	// if you need to route
+   	route: { label: 'User', { params: { userId: 1 } }
+
+   	// if you need to perform action
+   	onClick: () => console.log('John Doe was clicked')
+
+   	// you can add more options after this which you can use to render custom row items
+   }
+   ```
+
+3. You can also add an object for the field value but make sure it has a `label`
+   attribute which holds the actual value to be shown
+   ```
+   row: {
+   	name: {
+   		label: 'John Doe',
+   		image: '/johndoe.jpg',
+   	},
+   	age: 25,
+   	status: {
+   		label: 'Active',
+   		color: 'green'
+   	}
+   }
+   ```
+4. Click action: Add route or onClick event in row object
+   1. If you want to route using router-link just add a
+      `route: { name: 'User', params: { userId: 2 } }`
+   2. if you need to do some action or open a dialog add a click event instead
+      of a route `onClick: () => console.log('John Doe was clicked')`
+
+**Selection Banner:**
+
+**Without custom action buttons:**
+<img width="1213" alt="image" src="https://github.com/frappe/frappe-ui/assets/30859809/36fafcf5-45c6-43f0-acde-f64afe38b550">
+
+**With custom action buttons:**
+<img width="1212" alt="image" src="https://github.com/frappe/frappe-ui/assets/30859809/55e751b2-df66-4ff0-b852-af463014463f">
+
+```
+<ListSelectBanner>
+	<template #actions>
+	  <div class="flex gap-2">
+	    <Button variant="ghost" label="Delete" />
+	    <Button variant="ghost" label="Edit" />
+	  </div>
+	</template>
+</ListSelectBanner>
+```
+
+You can also make your own custom selection banner
+
+<img width="629" alt="image" src="https://github.com/frappe/frappe-ui/assets/30859809/38dfa834-96a2-4ac5-ad4b-30b3e6871d3f">
+
+```
+<ListSelectBanner>
+	<div>Custom Banner</div>
+</ListSelectBanner>
+```

package/src/components/ListView.story.vue

@@ -0,0 +1,200 @@
+<script setup>
+import ListView from './ListView/ListView.vue'
+import ListHeader from './ListView/ListHeader.vue'
+import ListHeaderItem from './ListView/ListHeaderItem.vue'
+import ListRows from './ListView/ListRows.vue'
+import ListRow from './ListView/ListRow.vue'
+import ListRowItem from './ListView/ListRowItem.vue'
+import ListSelectBanner from './ListView/ListSelectBanner.vue'
+import FeatherIcon from './FeatherIcon.vue'
+import Badge from './Badge.vue'
+import Button from './Button.vue'
+import Avatar from './Avatar.vue'
+
+const simple_columns = [
+  {
+    label: 'Name',
+    key: 'name',
+    width: 3,
+  },
+  {
+    label: 'Email',
+    key: 'email',
+    width: '200px',
+  },
+  {
+    label: 'Role',
+    key: 'role',
+  },
+  {
+    label: 'Status',
+    key: 'status',
+  },
+]
+
+const simple_rows = [
+  {
+    id: 1,
+    row: {
+      name: 'John Doe',
+      email: 'john@doe.com',
+      status: 'Active',
+      role: 'Developer',
+    },
+    onClick: () => console.log('John Doe was clicked'),
+  },
+  {
+    id: 2,
+    row: {
+      name: 'Jane Doe',
+      email: 'jane@doe.com',
+      status: 'Inactive',
+      role: 'HR',
+    },
+    route: { name: 'User', params: { userId: 2 } },
+  },
+]
+
+const custom_columns = [
+  {
+    label: 'Name',
+    key: 'name',
+    width: 3,
+    icon: 'user',
+  },
+  {
+    label: 'Email',
+    key: 'email',
+    width: '200px',
+    icon: 'at-sign',
+  },
+  {
+    label: 'Role',
+    key: 'role',
+    icon: 'users',
+  },
+  {
+    label: 'Status',
+    key: 'status',
+    icon: 'check-circle',
+  },
+]
+
+const custom_rows = [
+  {
+    id: 1,
+    row: {
+      name: {
+        label: 'John Doe',
+        image: 'https://avatars.githubusercontent.com/u/499550',
+      },
+      email: 'john@doe.com',
+      status: {
+        label: 'Active',
+        bg_color: 'bg-green-600',
+      },
+      role: {
+        label: 'Developer',
+        color: 'green',
+      },
+    },
+    onClick: () => console.log('John Doe was clicked'),
+  },
+  {
+    id: 2,
+    row: {
+      name: {
+        label: 'Jane Doe',
+        image: 'https://avatars.githubusercontent.com/u/499120',
+      },
+      email: 'jane@doe.com',
+      status: {
+        label: 'Inactive',
+        bg_color: 'bg-red-600',
+      },
+      role: {
+        label: 'HR',
+        color: 'red',
+      },
+    },
+    route: { name: 'User', params: { userId: 2 } },
+  },
+]
+</script>
+
+<template>
+  <Story :layout="{ type: 'grid', width: '95%' }">
+    <Variant title="Simple List">
+      <ListView
+        class="h-[250px]"
+        :columns="simple_columns"
+        :rows="simple_rows"
+        row-key="id"
+      />
+    </Variant>
+    <Variant title="Custom List">
+      <ListView
+        class="h-[250px]"
+        :columns="custom_columns"
+        :rows="custom_rows"
+        row-key="id"
+      >
+        <ListHeader>
+          <ListHeaderItem
+            v-for="column in custom_columns"
+            :key="column.key"
+            :column="column"
+          >
+            <template #prefix="{ column }">
+              <FeatherIcon :name="column.icon" class="h-4 w-4" />
+            </template>
+          </ListHeaderItem>
+        </ListHeader>
+        <ListRows>
+          <ListRow
+            v-for="(row, i) in custom_rows"
+            :key="i"
+            v-slot="{ column, item }"
+            :row="row"
+            :idx="i"
+          >
+            <ListRowItem :item="item" :align="column.align">
+              <template #prefix>
+                <div
+                  v-if="column.key == 'status'"
+                  class="h-3 w-3 rounded-full"
+                  :class="item.bg_color"
+                />
+                <Avatar
+                  v-if="column.key == 'name'"
+                  :shape="'circle'"
+                  :image="item.image"
+                  size="sm"
+                />
+              </template>
+              <Badge
+                v-if="column.key == 'role'"
+                variant="subtle"
+                :theme="item.color"
+                size="md"
+                :label="item.label"
+              />
+            </ListRowItem>
+          </ListRow>
+        </ListRows>
+        <ListSelectBanner>
+          <template #actions="{ unselectAll }">
+            <div class="flex gap-2">
+              <Button variant="ghost" label="Delete" />
+              <Button
+                variant="ghost"
+                label="Unselect all"
+                @click="unselectAll"
+              />
+            </div>
+          </template>
+        </ListSelectBanner>
+      </ListView>
+    </Variant>
+  </Story>
+</template>

package/src/components/Tabs.story.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { h, reactive } from 'vue'
+import Tabs from './Tabs.vue'
+import FeatherIcon from './FeatherIcon.vue'
+const state = reactive({
+  index: 0,
+  tabs_without_icon: [
+    {
+      label: 'Github',
+      content:
+        'Github is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere.',
+    },
+    {
+      label: 'Twitter',
+      content:
+        'Twitter is an American microblogging and social networking service on which users post and interact with messages known as "tweets".',
+    },
+    {
+      label: 'Linkedin',
+      content:
+        'LinkedIn is an American business and employment-oriented online service that operates via websites and mobile apps.',
+    },
+  ],
+  tabs_with_icon: [
+    {
+      label: 'Github',
+      content:
+        'Github is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere.',
+      icon: h(FeatherIcon, { class: 'w-4 h-4', name: 'github' }),
+    },
+    {
+      label: 'Twitter',
+      content:
+        'Twitter is an American microblogging and social networking service on which users post and interact with messages known as "tweets".',
+      icon: h(FeatherIcon, { class: 'w-4 h-4', name: 'twitter' }),
+    },
+    {
+      label: 'Linkedin',
+      content:
+        'LinkedIn is an American business and employment-oriented online service that operates via websites and mobile apps.',
+      icon: h(FeatherIcon, { class: 'w-4 h-4', name: 'linkedin' }),
+    },
+  ],
+})
+</script>
+
+<template>
+  <Story :layout="{ type: 'grid', width: '80%' }">
+    <Variant title="Without Icon">
+      <Tabs
+        v-slot="{ tab }"
+        v-model="state.index"
+        :tabs="state.tabs_without_icon"
+      >
+        <div class="p-5">
+          {{ tab.content }}
+        </div>
+      </Tabs>
+    </Variant>
+    <Variant title="With Icon">
+      <Tabs v-slot="{ tab }" v-model="state.index" :tabs="state.tabs_with_icon">
+        <div class="p-5">
+          {{ tab.content }}
+        </div>
+      </Tabs>
+    </Variant>
+
+    <template #controls>
+      <HstNumber v-model="state.index" title="Tab Index" />
+    </template>
+  </Story>
+</template>

package/src/components/Tabs.vue

@@ -0,0 +1,97 @@
+<template>
+  <TabGroup
+    as="div"
+    class="flex flex-1 flex-col"
+    :defaultIndex="changedIndex"
+    :selectedIndex="changedIndex"
+    @change="(idx) => (changedIndex = idx)"
+  >
+    <TabList class="relative flex items-center gap-6 border-b pl-5">
+      <Tab
+        ref="tabRef"
+        as="template"
+        v-for="(tab, i) in tabs"
+        :key="i"
+        v-slot="{ selected }"
+        class="focus:outline-none focus:transition-none focus-visible:rounded focus-visible:ring-2 focus-visible:ring-gray-400"
+      >
+        <slot name="tab" v-bind="{ tab, selected }">
+          <button
+            class="-mb-px flex items-center gap-2 border-b border-transparent py-2.5 text-base text-gray-600 duration-300 ease-in-out hover:border-gray-400 hover:text-gray-900"
+            :class="{ 'text-gray-900': selected }"
+          >
+            <component v-if="tab.icon" :is="tab.icon" class="h-5" />
+            {{ tab.label }}
+          </button>
+        </slot>
+      </Tab>
+      <div
+        ref="indicator"
+        class="absolute -bottom-px h-px bg-gray-900"
+        :style="{ left: `${indicatorLeftValue}px` }"
+      />
+    </TabList>
+    <TabPanels class="flex flex-1 overflow-hidden">
+      <TabPanel
+        class="flex flex-1 flex-col overflow-y-auto focus:outline-none"
+        v-for="(tab, i) in tabs"
+        :key="i"
+      >
+        <slot v-bind="{ tab }" />
+      </TabPanel>
+    </TabPanels>
+  </TabGroup>
+</template>
+
+<script setup>
+import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue'
+import { TransitionPresets, useTransition } from '@vueuse/core'
+import { ref, watch, computed, onMounted, nextTick } from 'vue'
+
+const props = defineProps({
+  tabs: {
+    type: Array,
+    required: true,
+  },
+  modelValue: {
+    type: Number,
+    default: 0,
+  },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const changedIndex = computed({
+  get: () => props.modelValue,
+  set: (index) => emit('update:modelValue', index),
+})
+
+const tabRef = ref([])
+const indicator = ref(null)
+const tabsLength = ref(props.tabs?.length)
+
+let indicatorLeft = ref(0)
+
+const indicatorLeftValue = useTransition(indicatorLeft, {
+  duration: 250,
+  ease: TransitionPresets.easeOutCubic,
+})
+
+function moveIndicator(index) {
+  if (index >= tabsLength.value) {
+    index = tabsLength.value - 1
+  }
+  const selectedTab = tabRef.value[index].el
+  indicator.value.style.width = `${selectedTab.offsetWidth}px`
+  indicatorLeft.value = selectedTab.offsetLeft
+}
+
+watch(changedIndex, (index) => {
+  if (index >= tabsLength.value) {
+    changedIndex.value = tabsLength.value - 1
+  }
+  nextTick(() => moveIndicator(index))
+})
+
+onMounted(() => moveIndicator(changedIndex.value))
+</script>

package/src/index.js

@@ -3,6 +3,7 @@ export { default as Alert } from './components/Alert.vue'
 export { default as Autocomplete } from './components/Autocomplete.vue'
 export { default as Avatar } from './components/Avatar.vue'
 export { default as Badge } from './components/Badge.vue'
+export { default as Breadcrumbs } from './components/Breadcrumbs.vue'
 export { default as Button } from './components/Button.vue'
 export { default as Card } from './components/Card.vue'
 export { default as Checkbox } from './components/Checkbox.vue'
@@ -27,6 +28,7 @@ export { default as Select } from './components/Select.vue'
 export { default as Spinner } from './components/Spinner.vue'
 export { default as Switch } from './components/Switch.vue'
 export { default as TabButtons } from './components/TabButtons.vue'
+export { default as Tabs } from './components/Tabs.vue'
 export { default as TextInput } from './components/TextInput.vue'
 export { default as Textarea } from './components/Textarea.vue'
 export {
@@ -36,9 +38,13 @@ export {
   TextEditorFloatingMenu,
   TextEditorContent,
 } from './components/TextEditor'
-export { default as List } from './components/ListView/ListView.vue'
+export { default as ListView } from './components/ListView/ListView.vue'
+export { default as ListHeader } from './components/ListView/ListHeader.vue'
+export { default as ListHeaderItem } from './components/ListView/ListHeaderItem.vue'
+export { default as ListRows } from './components/ListView/ListRows.vue'
 export { default as ListRow } from './components/ListView/ListRow.vue'
 export { default as ListRowItem } from './components/ListView/ListRowItem.vue'
+export { default as ListSelectBanner } from './components/ListView/ListSelectBanner.vue'
 export { default as Toast } from './components/Toast.vue'
 export { toast, Toasts } from './components/toast.js'
 export { default as Tooltip } from './components/Tooltip.vue'