@soft-stech/bootsman-ui-shadcn 1.1.12 → 1.1.15

package/src/components/stories/BuiPaginationCommon.story.vue

@@ -3,24 +3,18 @@ import { BuiPaginationCommon, type PageSize } from '@/index'
 
 import { ref } from 'vue'
 
-const pageIndex = ref(0)
-const pageSize = ref(10)
+const pageIndex = ref(1)
+const pageSize = ref<PageSize>(10)
 </script>
 
 <template>
   <Story title="BuiPaginationCommon" autoPropsDisabled :layout="{ type: 'grid', width: '95%' }">
     <Variant :key="`variant`" title="Pagination">
       <BuiPaginationCommon
+        class="float-right"
         :total="100"
-        :pageIndex="pageIndex"
-        :pageSize="pageSize as PageSize"
-        :setPageIndex="(v) => (pageIndex = v)"
-        :setPageSize="
-          (v) => {
-            pageSize = v
-            pageIndex = 0
-          }
-        "
+        v-model:pageIndex="pageIndex"
+        v-model:pageSize="pageSize"
       >
       </BuiPaginationCommon>
     </Variant>

package/src/components/ui/pagination/BuiPaginationCommon.vue

@@ -20,62 +20,54 @@ import { computed } from 'vue'
 const pageSizes = [10, 20, 30, 40, 50] as const
 export type PageSize = (typeof pageSizes)[number]
 
-const props = withDefaults(
-  defineProps<{
-    pageSize?: PageSize
-    total: number
-    pageIndex: number
-    setPageIndex: (i: number) => void
-    setPageSize?: (i: number) => void
-  }>(),
-  { pageSize: 10 }
-)
+const props = defineProps<{
+  total: number
+}>()
 
-const pageCount = computed(() => {
-  return Math.ceil(props.total / props.pageSize)
-})
+const pageSize = defineModel<PageSize>('pageSize', { default: 10, required: true })
+const pageIndex = defineModel<number>('pageIndex', { default: 1, required: true })
+const totalPages = computed(() => Math.ceil(props.total / pageSize.value))
 
-const innerPageNumber = computed({
+const pageSizeString = computed({
   get() {
-    return props.pageIndex + 1
+    return String(pageSize.value)
   },
-  set(newValue) {
-    if (newValue > 0 && newValue <= pageCount.value) props.setPageIndex(newValue - 1)
+  set(value: string) {
+    pageSize.value = parseInt(value) as PageSize
   }
 })
 </script>
 
 <template>
   <div class="m-2">
-    <BuiPagination :total="props.total" :itemsPerPage="props.pageSize" :page="props.pageIndex + 1">
+    <BuiPagination
+      v-slot="{ page }"
+      :total="props.total"
+      :itemsPerPage="pageSize"
+      v-model:page="pageIndex"
+    >
       <BuiPaginationList class="flex items-center justify-center gap-2">
-        <template v-if="props.setPageSize">
-          <p class="text-sm text-muted-foreground">Items per page</p>
-          <BuiSelect
-            @update:modelValue="(v) => props.setPageSize && props.setPageSize(parseInt(v))"
-          >
-            <BuiSelectTrigger class="mr-2 w-[70px]">
-              <BuiSelectValue :placeholder="props.pageSize.toString()" />
-            </BuiSelectTrigger>
-            <BuiSelectContent side="top">
-              <BuiSelectItem v-for="pageSize in pageSizes" :key="pageSize" :value="`${pageSize}`">
-                {{ pageSize }}
-              </BuiSelectItem>
-            </BuiSelectContent>
-          </BuiSelect>
-        </template>
-
-        <p class="text-sm text-muted-foreground">
-          Page {{ props.pageIndex + 1 }} of {{ pageCount }}
-        </p>
-
-        <BuiPaginationFirst @click="props.setPageIndex(0)" />
-        <BuiPaginationPrev @click="props.setPageIndex(props.pageIndex - 1)" />
-
-        <BuiInput v-model="innerPageNumber" class="w-28" placeholder="Page number" />
-
-        <BuiPaginationNext @click="props.setPageIndex(props.pageIndex + 1)" />
-        <BuiPaginationLast @click="props.setPageIndex(pageCount - 1)" />
+        <p class="text-sm text-muted-foreground">Items per page</p>
+        <BuiSelect v-model.number="pageSizeString">
+          <BuiSelectTrigger class="mr-2 w-[70px]">
+            <BuiSelectValue :placeholder="pageSize.toString()" />
+          </BuiSelectTrigger>
+          <BuiSelectContent side="top">
+            <BuiSelectItem
+              v-for="pageSize in pageSizes"
+              :key="pageSize"
+              :value="pageSize.toString()"
+            >
+              {{ pageSize }}
+            </BuiSelectItem>
+          </BuiSelectContent>
+        </BuiSelect>
+        <p class="text-sm text-muted-foreground">Page {{ page }} of {{ totalPages }}</p>
+        <BuiPaginationFirst />
+        <BuiPaginationPrev />
+        <BuiInput v-model="pageIndex" class="w-28" placeholder="Page number" />
+        <BuiPaginationNext />
+        <BuiPaginationLast />
       </BuiPaginationList>
     </BuiPagination>
   </div>

package/src/components/ui/table/BuiDataTable.vue

@@ -26,6 +26,7 @@ import {
 } from './'
 import { BuiPaginationCommon, type PageSize } from '@/components/ui/pagination'
 import { valueUpdater } from '@/lib/utils'
+import { computed } from 'vue'
 
 const props = withDefaults(
   defineProps<{
@@ -44,7 +45,9 @@ const props = withDefaults(
 const sorting = defineModel<SortingState>('sorting')
 const pagination = defineModel<PaginationState>('pagination')
 const rowSelection = defineModel<RowSelectionState>('selection')
-
+const computedItems = computed(() =>
+  props.manualPagination ? props.totalItems : props.data.length
+)
 const table = useVueTable({
   initialState: { pagination: { pageSize: props.pageSize } },
   get data() {
@@ -80,6 +83,28 @@ const table = useVueTable({
   },
   getRowId: props.getRowId
 })
+
+const tablePageSize = computed<PageSize>({
+  get() {
+    return table.getState().pagination.pageSize as PageSize
+  },
+  set(size: PageSize) {
+    if (!pagination.value) return
+    pagination.value.pageSize = size
+    table.setPageSize(size)
+    table.setPageIndex(0)
+  }
+})
+const pageIndex = computed({
+  get() {
+    return table.getState().pagination.pageIndex + 1
+  },
+  set(index) {
+    if (!pagination.value) return
+    pagination.value.pageIndex = index - 1
+    table.setPageIndex(index - 1)
+  }
+})
 </script>
 
 <template>
@@ -117,16 +142,9 @@ const table = useVueTable({
         <BuiTableCell :colspan="columns.length">
           <BuiPaginationCommon
             class="float-right"
-            :total="totalItems"
-            :pageIndex="table.getState().pagination.pageIndex"
-            :pageSize="table.getState().pagination.pageSize as PageSize"
-            :setPageIndex="(v: number) => table.setPageIndex(v)"
-            :setPageSize="
-              (v: number) => {
-                table.setPageSize(v)
-                table.setPageIndex(0)
-              }
-            "
+            :total="computedItems"
+            v-model:pageIndex="pageIndex"
+            v-model:pageSize="tablePageSize"
           >
           </BuiPaginationCommon>
         </BuiTableCell>

package/dist/BuiAccordion.vue_vue_type_script_setup_true_lang-cpLPyuH8.js

@@ -1,29 +0,0 @@
-import { defineComponent as n, openBlock as s, createBlock as i, unref as e, normalizeProps as p, guardReactiveProps as c, withCtx as d, renderSlot as m } from "vue";
-import { b as u, c as f } from "./index-xRMs4phy.js";
-const b = /* @__PURE__ */ n({
-  __name: "BuiAccordion",
-  props: {
-    type: {},
-    modelValue: {},
-    defaultValue: {},
-    collapsible: { type: Boolean },
-    disabled: { type: Boolean },
-    dir: {},
-    orientation: {},
-    asChild: { type: Boolean },
-    as: {}
-  },
-  emits: ["update:modelValue"],
-  setup(o, { emit: t }) {
-    const a = o, r = t;
-    return (l, _) => (s(), i(e(u), p(c({ ...a, ...e(f)(r) })), {
-      default: d(() => [
-        m(l.$slots, "default")
-      ]),
-      _: 3
-    }, 16));
-  }
-});
-export {
-  b as _
-};

package/dist/BuiAlertDialogTitle.vue_vue_type_script_setup_true_lang-X8PCO-Zg.js

@@ -1,26 +0,0 @@
-import { defineComponent as a, openBlock as l, createBlock as r, unref as s, normalizeClass as n, withCtx as c, renderSlot as i } from "vue";
-import { o as p } from "./index-xRMs4phy.js";
-import { c as m } from "./utils-8YY6d_s1.js";
-const h = /* @__PURE__ */ a({
-  __name: "BuiAlertDialogTitle",
-  props: {
-    asChild: { type: Boolean },
-    as: {},
-    class: {}
-  },
-  setup(e) {
-    const o = e;
-    return (t, d) => (l(), r(s(p), {
-      "as-child": o.asChild,
-      class: n(s(m)("text-lg font-semibold text-foreground", o.class))
-    }, {
-      default: c(() => [
-        i(t.$slots, "default")
-      ]),
-      _: 3
-    }, 8, ["as-child", "class"]));
-  }
-});
-export {
-  h as _
-};

package/dist/BuiContextMenu.vue_vue_type_script_setup_true_lang-4gkMb9kv.js

@@ -1,22 +0,0 @@
-import { defineComponent as p, openBlock as s, createBlock as a, unref as e, normalizeProps as i, guardReactiveProps as m, withCtx as c, renderSlot as u } from "vue";
-import { p as d, F as l } from "./index-xRMs4phy.js";
-const h = /* @__PURE__ */ p({
-  __name: "BuiContextMenu",
-  props: {
-    dir: {},
-    modal: { type: Boolean }
-  },
-  emits: ["update:open"],
-  setup(o, { emit: t }) {
-    const r = d(o, t);
-    return (n, B) => (s(), a(e(l), i(m(e(r))), {
-      default: c(() => [
-        u(n.$slots, "default")
-      ]),
-      _: 3
-    }, 16));
-  }
-});
-export {
-  h as _
-};

package/dist/BuiContextMenuSub.vue_vue_type_script_setup_true_lang-9zZAgkry.js

@@ -1,22 +0,0 @@
-import { defineComponent as r, openBlock as s, createBlock as a, unref as e, normalizeProps as u, guardReactiveProps as i, withCtx as m, renderSlot as c } from "vue";
-import { p as l, a1 as d } from "./index-xRMs4phy.js";
-const h = /* @__PURE__ */ r({
-  __name: "BuiContextMenuSub",
-  props: {
-    open: { type: Boolean },
-    defaultOpen: { type: Boolean }
-  },
-  emits: ["update:open"],
-  setup(o, { emit: t }) {
-    const n = l(o, t);
-    return (p, B) => (s(), a(e(d), u(i(e(n))), {
-      default: m(() => [
-        c(p.$slots, "default")
-      ]),
-      _: 3
-    }, 16));
-  }
-});
-export {
-  h as _
-};