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

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/stories/BuiToggleGroup.story.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { BuiToggleGroup, BuiToggleGroupItem } from '@/index'
+import { Bold, Italic, Underline } from 'lucide-vue-next'
+</script>
+
+<template>
+  <Story title="BuiToggleGroup" autoPropsDisabled :layout="{ type: 'grid', width: '33%' }">
+    <Variant title="Single">
+      <BuiToggleGroup type="single">
+        <BuiToggleGroupItem value="bold" aria-label="Toggle bold">
+          <Bold class="h-4 w-4" />
+        </BuiToggleGroupItem>
+        <BuiToggleGroupItem value="italic" aria-label="Toggle italic">
+          <Italic class="h-4 w-4" />
+        </BuiToggleGroupItem>
+        <BuiToggleGroupItem value="underline" aria-label="Toggle underline">
+          <Underline class="h-4 w-4" />
+        </BuiToggleGroupItem>
+      </BuiToggleGroup>
+    </Variant>
+
+    <Variant title="Multiple">
+      <BuiToggleGroup type="multiple">
+        <BuiToggleGroupItem value="bold" aria-label="Toggle bold">
+          <Bold class="h-4 w-4" />
+        </BuiToggleGroupItem>
+        <BuiToggleGroupItem value="italic" aria-label="Toggle italic">
+          <Italic class="h-4 w-4" />
+        </BuiToggleGroupItem>
+        <BuiToggleGroupItem value="underline" aria-label="Toggle underline">
+          <Underline class="h-4 w-4" />
+        </BuiToggleGroupItem>
+      </BuiToggleGroup>
+    </Variant>
+  </Story>
+</template>

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/src/components/ui/toggle-group/BuiToggleGroup.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { VariantProps } from 'class-variance-authority'
+import { type HTMLAttributes, computed, provide } from 'vue'
+import { ToggleGroupRoot, type ToggleGroupRootEmits, type ToggleGroupRootProps, useForwardPropsEmits } from 'radix-vue'
+import type { toggleVariants } from '@/components/ui/toggle'
+import { cn } from '@/lib/utils'
+
+type ToggleGroupVariants = VariantProps<typeof toggleVariants>
+
+const props = defineProps<ToggleGroupRootProps & {
+  class?: HTMLAttributes['class']
+  variant?: ToggleGroupVariants['variant']
+  size?: ToggleGroupVariants['size']
+}>()
+const emits = defineEmits<ToggleGroupRootEmits>()
+
+provide('toggleGroup', {
+  variant: props.variant,
+  size: props.size,
+})
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ToggleGroupRoot v-bind="forwarded" :class="cn('flex items-center justify-center gap-1', props.class)">
+    <slot />
+  </ToggleGroupRoot>
+</template>

package/src/components/ui/toggle-group/BuiToggleGroupItem.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { VariantProps } from 'class-variance-authority'
+import { type HTMLAttributes, computed, inject } from 'vue'
+import { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'radix-vue'
+import { toggleVariants } from '@/components/ui/toggle'
+import { cn } from '@/lib/utils'
+
+type ToggleGroupVariants = VariantProps<typeof toggleVariants>
+
+const props = defineProps<ToggleGroupItemProps & {
+  class?: HTMLAttributes['class']
+  variant?: ToggleGroupVariants['variant']
+  size?: ToggleGroupVariants['size']
+}>()
+
+const context = inject<ToggleGroupVariants>('toggleGroup')
+
+const delegatedProps = computed(() => {
+  const { class: _, variant, size, ...delegated } = props
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <ToggleGroupItem
+    v-bind="forwardedProps" :class="cn(toggleVariants({
+      variant: context?.variant || variant,
+      size: context?.size || size,
+    }), props.class)"
+  >
+    <slot />
+  </ToggleGroupItem>
+</template>

package/src/components/ui/toggle-group/index.ts

@@ -0,0 +1,2 @@
+export { default as BuiToggleGroup } from './BuiToggleGroup.vue'
+export { default as BuiToggleGroupItem } from './BuiToggleGroupItem.vue'

package/src/index.ts

@@ -32,6 +32,7 @@ export * from './components/ui/textarea/index'
 export * from './components/ui/toast/index'
 export * from './components/ui/tooltip/index'
 export * from './components/ui/toggle/index'
+export * from './components/ui/toggle-group/index'
 export * from './components/ui/slider/index'
 export * from './components/ui/skeleton/index'
 export * from './components/ui/scroll-area/index'

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/BuiAlertDialogCancel.vue_vue_type_script_setup_true_lang-A6gjGzS6.js

@@ -1,24 +0,0 @@
-import { defineComponent as s, openBlock as a, createBlock as n, unref as t, mergeProps as l, withCtx as c, renderSlot as m } from "vue";
-import { x as p } from "./index-xRMs4phy.js";
-import { c as i, b as u } from "./utils-8YY6d_s1.js";
-const C = /* @__PURE__ */ s({
-  __name: "BuiAlertDialogCancel",
-  props: {
-    asChild: { type: Boolean },
-    as: {}
-  },
-  setup(o) {
-    const r = o;
-    return (e, f) => (a(), n(t(p), l(r, {
-      class: t(i)(t(u)({ variant: "outline" }), "mt-2 sm:mt-0", e.$attrs.class ?? "")
-    }), {
-      default: c(() => [
-        m(e.$slots, "default")
-      ]),
-      _: 3
-    }, 16, ["class"]));
-  }
-});
-export {
-  C 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 _
-};