@soft-stech/bootsman-ui-shadcn 2.0.21 → 2.0.23

package/src/stories/components/BuiDataTableWithScrollStory.vue

@@ -0,0 +1,292 @@
+<script setup lang="ts">
+import { BuiDataTable } from '@/components/table'
+import RowActionsMenuContent from './ActionsMenuContent.vue'
+import type {
+  ColumnDef,
+  PaginationState,
+  Row,
+  RowSelectionState,
+  VisibilityState,
+  ColumnOrderState
+} from '@tanstack/vue-table'
+import { sort, type ISortByObjectSorter } from 'fast-sort'
+import {
+  AlignJustifyIcon,
+  ArrowUpNarrowWideIcon,
+  FolderIcon,
+  SignalHighIcon,
+  SignalMediumIcon,
+  SignalLowIcon
+} from 'lucide-vue-next'
+import { computed, h, ref, withModifiers } from 'vue'
+import { z } from 'zod'
+import tasks from '@/stories/data/tasks.json'
+import { BuiCheckbox } from '@/components/checkbox'
+import { tableColumnSortCommon } from '@/lib/utils'
+import { BuiButton } from '@/components/button'
+import { BuiTabs, BuiTabsList, BuiTabsTrigger } from '@/components/tabs'
+
+const taskSchema = z.object({
+  id: z.string(),
+  title: z.string(),
+  status: z.string().nullable().optional(),
+  label: z.string(),
+  priority: z.string(),
+  errorMessage: z.string().optional(),
+  age: z.string().optional()
+})
+type Task = z.infer<typeof taskSchema>
+
+const columns: ColumnDef<Task>[] = [
+  {
+    id: 'id',
+    accessorKey: 'id',
+    header: ({ table, column }) => {
+      return h('div', { class: 'flex items-center gap-2' }, [
+        h(BuiCheckbox, {
+          modelValue: table.getIsSomePageRowsSelected()
+            ? 'indeterminate'
+            : table.getIsAllPageRowsSelected(),
+          'onUpdate:modelValue': (value: boolean | 'indeterminate') =>
+            table.getIsSomePageRowsSelected()
+              ? table.toggleAllPageRowsSelected(false)
+              : table.toggleAllPageRowsSelected(!!value),
+          ariaLabel: 'Select row',
+          onClick: withModifiers(() => {}, ['stop'])
+        }),
+        tableColumnSortCommon(column, 'ID')
+      ])
+    },
+    cell: ({ row }) =>
+      h('div', { class: 'flex items-center gap-2' }, [
+        h(BuiCheckbox, {
+          modelValue: row.getIsSelected(),
+          'onUpdate:modelValue': (value: boolean | 'indeterminate') => row.toggleSelected(!!value),
+          ariaLabel: 'Select row'
+        }),
+        `${row.getValue('id')}`
+      ]),
+    enableHiding: false,
+    meta: { title: 'ID', pinLeft: true }
+  },
+  {
+    accessorKey: 'title',
+    header: 'Title',
+    enableSorting: false
+  },
+  {
+    accessorKey: 'status',
+    header: ({ column }) => tableColumnSortCommon(column, 'Очень длинный заголовок для статуса'),
+    meta: { title: 'Статус таска' }
+  },
+  {
+    accessorKey: 'priority',
+    header: ({ column }) => tableColumnSortCommon(column, 'Priorities')
+  },
+  {
+    accessorKey: 'age',
+    header: ({ column }) => tableColumnSortCommon(column, 'Age')
+  },
+  { id: 'hiddenColumn', header: 'Hidden Column', cell: 'secret info' }
+]
+const data = ref<Task[]>(tasks)
+
+function onRowAction(row: Task, action: string) {
+  const str = `${action}: ${row.id}`
+  alert(str)
+}
+function onGroupAction(group: string | number, action: string) {
+  const str = `${action}: ${group}`
+  alert(str)
+}
+
+type TaskSortingState = { id: keyof Task; desc: boolean }
+const sorting = ref<TaskSortingState[]>([{ id: 'id', desc: false }])
+const pagination = ref<PaginationState>({
+  pageIndex: 0,
+  pageSize: 10
+})
+const totalItems = tasks.length
+
+const selection = ref<RowSelectionState | undefined>({})
+function updateSelection(val?: RowSelectionState) {
+  console.log('selection was changed', val)
+  selection.value = val
+}
+
+const columnVisibility = ref<VisibilityState>({ hiddenColumn: false })
+const columnSizing = ref<Record<string, number>>({ title: 450 })
+const columnOrder = ref<ColumnOrderState>()
+
+type GroupBy = 'none' | 'status' | 'priority'
+const groupBy = ref<GroupBy>('none')
+const groupLabels = {
+  status: ['Status', 'Not in any status'],
+  priority: ['Priority', 'Not in any priorities']
+}
+
+const sortedData = computed(() => {
+  const sortDirection = (sorting.value[0].desc ? 'desc' : 'asc') as 'asc'
+  const sortColumn = sorting.value[0].id
+  const groupByStr = groupBy.value
+
+  const sortBy: ISortByObjectSorter<Task> | ISortByObjectSorter<Task>[] = [
+    {
+      [sortDirection]: sortColumn
+    }
+  ]
+
+  // sort by grouping column first, but not when manually sorting by it
+  if (groupByStr !== 'none' && sortColumn !== groupByStr) {
+    sortBy.unshift({
+      asc: groupByStr
+    })
+  }
+
+  // sort by ID when possible
+  if (sortColumn !== 'id') {
+    sortBy.push({
+      asc: 'id'
+    })
+  }
+
+  return sort(data.value).by([...sortBy])
+})
+
+function renderSubComponent(row: Row<Task>) {
+  if (row.original.errorMessage) {
+    return () => h('span', { style: 'color: red' }, `Subrow: ${row.original.errorMessage}`)
+  } else {
+    return undefined
+  }
+}
+
+function deleteRow() {
+  data.value = data.value.map((a) => a)
+}
+function updateRows() {
+  data.value.shift()
+}
+
+function groupName(group: string | number) {
+  if (groupBy.value === 'priority') {
+    if (group === 'high') {
+      return () => h(SignalHighIcon, { class: 'size-4 inline-block' })
+    }
+
+    if (group === 'medium') {
+      return () => h(SignalMediumIcon, { class: 'size-4 inline-block' })
+    }
+
+    if (group === 'low') {
+      return () => h(SignalLowIcon, { class: 'size-4 inline-block' })
+    }
+
+    return () => group
+  }
+
+  return () => group
+}
+</script>
+
+<template>
+  <Story title="BuiDataTable" autoPropsDisabled :layout="{ type: 'grid', width: '95%' }">
+    <Variant key="variant" title="Sorting, Pagination, Grouping, Subrow">
+      <div class="page-wrapper">
+        <div class="table-wrapper">
+          <BuiDataTable
+            :columns="columns"
+            :data="sortedData"
+            v-model:sorting="sorting"
+            v-model:pagination="pagination"
+            v-model:column-visibility="columnVisibility"
+            v-model:column-sizing="columnSizing"
+            v-model:column-order="columnOrder"
+            @update:selection="updateSelection"
+            :total-items="totalItems"
+            class="caption-top"
+            :manualPagination="false"
+            :getRowId="(row) => row.id"
+            :groupBy="groupBy === 'none' ? undefined : groupBy"
+            :groupLabels="groupLabels"
+            :renderSubComponent="renderSubComponent"
+            :freeze-header="true"
+            enable-column-list-control
+            :enable-group-folding="true"
+            :pagination-translations="{
+              itemsPerPage: 'Tasks per page',
+              itemsPerPageAuto: 'Auto',
+              page: 'Page',
+              of: 'of'
+            }"
+          >
+            <template #caption="{ table }">
+              <div class="flex h-fit items-center justify-between">
+                <div class="flex h-full flex-row items-center gap-3">
+                  <BuiButton variant="outline">Download YAML</BuiButton>
+                  <BuiButton variant="outline" @click="updateRows"> Delete row </BuiButton>
+                  <BuiButton variant="outline" @click="deleteRow"> Update rows </BuiButton>
+                </div>
+
+                <div class="flex h-full flex-row items-center gap-3">
+                  <BuiTabs v-model="groupBy">
+                    <BuiTabsList class="grid w-full grid-cols-3" variant="default">
+                      <BuiTabsTrigger value="none" variant="default">
+                        <AlignJustifyIcon :size="14" />
+                      </BuiTabsTrigger>
+                      <BuiTabsTrigger value="status" variant="default">
+                        <FolderIcon :size="14" />
+                      </BuiTabsTrigger>
+                      <BuiTabsTrigger value="priority" variant="default">
+                        <ArrowUpNarrowWideIcon :size="14" />
+                      </BuiTabsTrigger>
+                    </BuiTabsList>
+                  </BuiTabs>
+
+                  <span>
+                    {{ table.getFilteredSelectedRowModel().rows?.length }} of
+                    {{ table.getFilteredRowModel().rows?.length }} row(s) selected
+                  </span>
+                </div>
+              </div>
+            </template>
+            <template #nodata>No data</template>
+            <template #groupByRow="{ group }"> Optional slot for: `{{ group }}` </template>
+            <template #groupName="{ group }">
+              <component :is="groupName(group)"></component>
+            </template>
+            <template #groupActions="{ group }">
+              <RowActionsMenuContent
+                :actions="['Group action']"
+                @select="(action) => onGroupAction(group, action)"
+              />
+            </template>
+            <template #rowActions="{ row }">
+              <RowActionsMenuContent
+                :actions="['action 1', 'action 2']"
+                @select="(action) => onRowAction(row, action)"
+              />
+            </template>
+            <template #numberOfItems>{{ data.length }} tasks</template>
+          </BuiDataTable>
+        </div>
+      </div>
+    </Variant>
+  </Story>
+</template>
+
+<style scoped>
+.page-wrapper {
+  height: 95vh;
+  flex-direction: column;
+  flex-grow: 1;
+  display: flex;
+  overflow: hidden auto;
+}
+
+.table-wrapper {
+  height: 100%;
+  flex-direction: column;
+  display: flex;
+}
+</style>

package/dist/BuiPaginationCommon.vue_vue_type_script_setup_true_lang-DhSRYKth.js

@@ -1,170 +0,0 @@
-import { defineComponent as y, computed as I, createBlock as $, openBlock as x, unref as n, normalizeProps as V, guardReactiveProps as w, withCtx as g, renderSlot as E, mergeModels as L, useModel as h, createVNode as i, createElementVNode as S, createElementBlock as M, createCommentVNode as b, toDisplayString as c, Fragment as R, renderList as z, createTextVNode as B } from "vue";
-import { BuiInput as N } from "./components/input/index.js";
-import "vee-validate";
-import { i as k, P as q } from "./PaginationRoot-Xehp56La.js";
-import { u as U } from "./useForwardExpose-DmyWSR4F.js";
-import { P as j } from "./Primitive-EBuBc72_.js";
-import "@vueuse/core";
-import "./colorUtils-BgA4kYw8.js";
-import { _ as C } from "./BuiSelect.vue_vue_type_script_setup_true_lang-BYtbdIZS.js";
-import { _ as F } from "./BuiSelectValue.vue_vue_type_script_setup_true_lang-C3SieHyq.js";
-import { _ as A } from "./BuiSelectTrigger.vue_vue_type_script_setup_true_lang-YgwOKyQg.js";
-import { _ as D } from "./BuiSelectContent.vue_vue_type_script_setup_true_lang-DedLPTOu.js";
-import { _ as T } from "./BuiSelectItem.vue_vue_type_script_setup_true_lang-LEr6XwVT.js";
-import { _ as G } from "./BuiPaginationFirst.vue_vue_type_script_setup_true_lang-CQIWuH4J.js";
-import { _ as H } from "./BuiPaginationLast.vue_vue_type_script_setup_true_lang-DPHBc8bO.js";
-import { _ as J } from "./BuiPaginationNext.vue_vue_type_script_setup_true_lang-CiVMJM-x.js";
-import { _ as K } from "./BuiPaginationPrev.vue_vue_type_script_setup_true_lang-C95kepR5.js";
-function d(a, r) {
-  const e = r - a + 1;
-  return Array.from({ length: e }, (l, m) => m + a);
-}
-function O(a) {
-  return a.map((r) => typeof r == "number" ? {
-    type: "page",
-    value: r
-  } : { type: "ellipsis" });
-}
-const P = "ellipsis";
-function Q(a, r, e, l) {
-  const t = r, p = Math.max(a - e, 1), u = Math.min(a + e, t);
-  if (l) {
-    const f = Math.min(2 * e + 5, r) - 2, s = p > 3 && Math.abs(t - f - 1 + 1) > 2 && Math.abs(p - 1) > 2, v = u < t - 2 && Math.abs(t - f) > 2 && Math.abs(t - u) > 2;
-    if (!s && v)
-      return [
-        ...d(1, f),
-        P,
-        t
-      ];
-    if (s && !v) {
-      const _ = d(t - f + 1, t);
-      return [
-        1,
-        P,
-        ..._
-      ];
-    }
-    if (s && v) {
-      const _ = d(p, u);
-      return [
-        1,
-        P,
-        ..._,
-        P,
-        t
-      ];
-    }
-    return d(1, t);
-  } else {
-    const o = e * 2 + 1;
-    return r < o ? d(1, t) : a <= e + 1 ? d(1, o) : r - a <= e ? d(r - o + 1, t) : d(p, u);
-  }
-}
-var W = /* @__PURE__ */ y({
-  __name: "PaginationList",
-  props: {
-    asChild: {
-      type: Boolean,
-      required: !1
-    },
-    as: {
-      type: null,
-      required: !1
-    }
-  },
-  setup(a) {
-    const r = a;
-    U();
-    const e = k(), l = I(() => O(Q(e.page.value, e.pageCount.value, e.siblingCount.value, e.showEdges.value)));
-    return (m, t) => (x(), $(n(j), V(w(r)), {
-      default: g(() => [E(m.$slots, "default", { items: l.value })]),
-      _: 3
-    }, 16));
-  }
-}), X = W;
-const Y = { class: "text-muted-foreground text-sm" }, Z = { class: "text-muted-foreground text-sm" }, xe = /* @__PURE__ */ y({
-  __name: "BuiPaginationCommon",
-  props: /* @__PURE__ */ L({
-    total: {},
-    translations: {}
-  }, {
-    pageSize: { default: 10, required: !0 },
-    pageSizeModifiers: {},
-    pageIndex: { default: 1, required: !0 },
-    pageIndexModifiers: {}
-  }),
-  emits: ["update:pageSize", "update:pageIndex"],
-  setup(a) {
-    const r = [10, 20, 30, 40, 50], e = a, l = h(a, "pageSize"), m = h(a, "pageIndex"), t = I(() => Math.ceil(e.total / l.value)), p = I({
-      get() {
-        return String(l.value);
-      },
-      set(u) {
-        l.value = parseInt(u);
-      }
-    });
-    return (u, o) => (x(), $(n(q), {
-      total: e.total,
-      itemsPerPage: l.value,
-      page: m.value,
-      "onUpdate:page": o[2] || (o[2] = (f) => m.value = f)
-    }, {
-      default: g(({ page: f }) => [
-        i(n(X), { class: "relative flex items-center justify-center gap-2" }, {
-          default: g(() => [
-            S("p", Y, c(u.translations?.itemsPerPage || "Items per page"), 1),
-            i(n(C), {
-              modelValue: p.value,
-              "onUpdate:modelValue": o[0] || (o[0] = (s) => p.value = s)
-            }, {
-              default: g(() => [
-                i(n(A), { class: "mr-2 w-[70px]" }, {
-                  default: g(() => [
-                    i(n(F), {
-                      placeholder: l.value.toString()
-                    }, null, 8, ["placeholder"])
-                  ]),
-                  _: 1
-                }),
-                i(n(D), { side: "top" }, {
-                  default: g(() => [
-                    (x(), M(R, null, z(r, (s) => i(n(T), {
-                      key: s,
-                      value: s.toString()
-                    }, {
-                      default: g(() => [
-                        B(c(s), 1)
-                      ]),
-                      _: 2
-                    }, 1032, ["value"])), 64))
-                  ]),
-                  _: 1
-                })
-              ]),
-              _: 1
-            }, 8, ["modelValue"]),
-            t.value > 1 ? (x(), M(R, { key: 0 }, [
-              S("p", Z, c(u.translations?.page || "Page") + " " + c(f) + " " + c(u.translations?.of || "of") + " " + c(t.value), 1),
-              i(n(G)),
-              i(n(K)),
-              i(n(N), {
-                modelValue: m.value,
-                "onUpdate:modelValue": o[1] || (o[1] = (s) => m.value = s),
-                class: "w-28",
-                placeholder: "Page number"
-              }, null, 8, ["modelValue"]),
-              i(n(J)),
-              i(n(H))
-            ], 64)) : b("", !0)
-          ]),
-          _: 2
-        }, 1024)
-      ]),
-      _: 1
-    }, 8, ["total", "itemsPerPage", "page"]));
-  }
-});
-export {
-  X as P,
-  xe as _
-};

package/dist/BuiTable.vue_vue_type_script_setup_true_lang-CQpc0Sr1.js

@@ -1,36 +0,0 @@
-import { defineComponent as i, ref as t, createBlock as m, openBlock as p, unref as e, withCtx as _, renderSlot as s, createElementVNode as a, createVNode as d, normalizeClass as u } from "vue";
-import { _ as b } from "./BuiScrollArea.vue_vue_type_script_setup_true_lang-O7VUcRC4.js";
-import { _ as h } from "./BuiScrollBar.vue_vue_type_script_setup_true_lang-cV0od8j0.js";
-import { g as w } from "./utils-DhVytAXN.js";
-const x = { class: "flex min-h-[90px] w-full grow flex-col" }, y = /* @__PURE__ */ i({
-  __name: "BuiTable",
-  props: {
-    class: {}
-  },
-  setup(n, { expose: f }) {
-    const c = n, o = t(void 0), r = t(null);
-    return f({ tableRef: o, scrollAreaElementRef: r }), (l, k) => (p(), m(e(b), {
-      ref_key: "scrollAreaElementRef",
-      ref: r,
-      class: "border-border/16 w-full grow overflow-auto rounded-sm border"
-    }, {
-      default: _(() => [
-        s(l.$slots, "columnVisibility"),
-        a("div", x, [
-          a("table", {
-            ref_key: "tableRef",
-            ref: o,
-            class: u(e(w)("h-full caption-top text-sm", c.class))
-          }, [
-            s(l.$slots, "default")
-          ], 2)
-        ]),
-        d(e(h), { orientation: "horizontal" })
-      ]),
-      _: 3
-    }, 512));
-  }
-});
-export {
-  y as _
-};

package/dist/BuiTableRow.vue_vue_type_script_setup_true_lang-BJk8Yk1B.js

@@ -1,54 +0,0 @@
-import { defineComponent as f, createBlock as p, createElementBlock as $, openBlock as l, unref as s, withCtx as d, createVNode as b, renderSlot as a, createElementVNode as w, normalizeClass as m } from "vue";
-import { _ as v } from "./BuiContextMenu.vue_vue_type_script_setup_true_lang-CGtCNQsI.js";
-import { _ as k } from "./BuiContextMenuTrigger.vue_vue_type_script_setup_true_lang-hfu_w_27.js";
-import { g as i } from "./utils-DhVytAXN.js";
-const _ = ["data-row-state"], B = ["data-row-state"], E = /* @__PURE__ */ f({
-  __name: "BuiTableRow",
-  props: {
-    class: {}
-  },
-  emits: ["mouseenter", "mouseleave"],
-  setup(u, { emit: c }) {
-    const n = u, o = c;
-    return (t, e) => t.$slots.actions ? (l(), p(s(v), { key: 0 }, {
-      default: d(() => [
-        b(s(k), { "as-child": "" }, {
-          default: d(() => [
-            w("tr", {
-              class: m(
-                s(i)(
-                  "border-border/8 data-[row-state=selected]:bg-accent/8 border-b transition-colors",
-                  n.class
-                )
-              ),
-              "data-row-state": t.$attrs["data-row-state"],
-              onMouseenter: e[0] || (e[0] = (r) => o("mouseenter")),
-              onMouseleave: e[1] || (e[1] = (r) => o("mouseleave"))
-            }, [
-              a(t.$slots, "default")
-            ], 42, _)
-          ]),
-          _: 3
-        }),
-        a(t.$slots, "actions")
-      ]),
-      _: 3
-    })) : (l(), $("tr", {
-      key: 1,
-      class: m(
-        s(i)(
-          "border-border/8 data-[row-state=selected]:bg-accent/8 border-b transition-colors",
-          n.class
-        )
-      ),
-      "data-row-state": t.$attrs["data-row-state"],
-      onMouseenter: e[2] || (e[2] = (r) => o("mouseenter")),
-      onMouseleave: e[3] || (e[3] = (r) => o("mouseleave"))
-    }, [
-      a(t.$slots, "default")
-    ], 42, B));
-  }
-});
-export {
-  E as _
-};