@soft-stech/bootsman-ui-shadcn 1.3.11 → 1.4.0

package/dist/{variables-DhOfRYaj.js → variables-CNeTUlbe.js}

@@ -1,24 +1,24 @@
 import { defineComponent as $, mergeModels as y, useModel as g, computed as c, openBlock as n, createBlock as I, unref as e, withCtx as r, createVNode as t, createElementVNode as v, createElementBlock as x, Fragment as S, renderList as P, createTextVNode as M, toDisplayString as u, createCommentVNode as k } from "vue";
 /* empty css            */
-import { f as z, y as B } from "./index-uA4l4INt.js";
+import { f as z, y as B } from "./index-qHyoMY5p.js";
 import "@vueuse/core";
 import "./BuiCalendar.vue_vue_type_style_index_0_lang-DK4yUiXC.js";
 import "vee-validate";
 import { BuiInput as C } from "./components/ui/input/index.js";
-import { _ as N } from "./BuiSelect.vue_vue_type_script_setup_true_lang-YVZaZc0x.js";
-import { _ as w } from "./BuiSelectValue.vue_vue_type_script_setup_true_lang-CseYU299.js";
-import { _ as U } from "./BuiSelectTrigger.vue_vue_type_script_setup_true_lang-C5NwnaUZ.js";
-import { _ as b } from "./BuiSelectContent.vue_vue_type_script_setup_true_lang-eDJphqEz.js";
-import { _ as q } from "./BuiSelectItem.vue_vue_type_script_setup_true_lang-C9vpPsde.js";
+import { _ as N } from "./BuiSelect.vue_vue_type_script_setup_true_lang-vIpTbd1h.js";
+import { _ as w } from "./BuiSelectValue.vue_vue_type_script_setup_true_lang-_KvT2-8Z.js";
+import { _ as U } from "./BuiSelectTrigger.vue_vue_type_script_setup_true_lang-CvbvvbdW.js";
+import { _ as b } from "./BuiSelectContent.vue_vue_type_script_setup_true_lang-DHGB-WLw.js";
+import { _ as q } from "./BuiSelectItem.vue_vue_type_script_setup_true_lang-BGKDvzJl.js";
 import "@tanstack/vue-table";
 import "./components/ui/toast/use-toast.js";
 import "@vee-validate/zod";
 import "zod";
 import "./index-BGsblnmA.js";
-import { _ as E } from "./BuiPaginationFirst.vue_vue_type_script_setup_true_lang-cuz9cUp5.js";
-import { _ as j } from "./BuiPaginationLast.vue_vue_type_script_setup_true_lang-CsK-C9uA.js";
-import { _ as D } from "./BuiPaginationNext.vue_vue_type_script_setup_true_lang-JZ3UV6RU.js";
-import { _ as F } from "./BuiPaginationPrev.vue_vue_type_script_setup_true_lang-CKnyfhRi.js";
+import { _ as E } from "./BuiPaginationFirst.vue_vue_type_script_setup_true_lang-Dm3GQPzm.js";
+import { _ as j } from "./BuiPaginationLast.vue_vue_type_script_setup_true_lang-B6i3KF8J.js";
+import { _ as D } from "./BuiPaginationNext.vue_vue_type_script_setup_true_lang-JJGF2BE-.js";
+import { _ as F } from "./BuiPaginationPrev.vue_vue_type_script_setup_true_lang-BzXE0IN0.js";
 const L = { class: "text-sm text-muted-foreground" }, ie = /* @__PURE__ */ $({
   __name: "BuiPaginationCommon",
   props: /* @__PURE__ */ y({

package/dist/{x-C1AY2GMM.js → x-BROfHUIb.js}

@@ -1,4 +1,4 @@
-import { d as e } from "./utils-D2UeooB9.js";
+import { a as e } from "./utils-BiLiPt4t.js";
 /**
  * @license lucide-vue-next v0.441.0 - ISC
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soft-stech/bootsman-ui-shadcn",
-  "version": "1.3.11",
+  "version": "1.4.0",
   "type": "module",
   "files": [
     "dist",

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { BuiDataTable } from '@/components/ui/table'
+import RowActionsMenuContent from './components/ActionsMenuContent.vue'
 import { BuiButton, BuiCheckbox, BuiTabs, BuiTabsList, BuiTabsTrigger } from '@/index'
 import { tableColumnSortCommon } from '@/lib/utils'
 import type { ColumnDef, PaginationState, Row, RowSelectionState } from '@tanstack/vue-table'
@@ -26,6 +27,7 @@ const taskSchema = z.object({
   errorMessage: z.string().optional()
 })
 type Task = z.infer<typeof taskSchema>
+
 const columns: ColumnDef<Task>[] = [
   {
     id: 'id',
@@ -33,8 +35,13 @@ const columns: ColumnDef<Task>[] = [
     header: ({ table, column }) => {
       return h('div', { class: 'flex items-center gap-2' }, [
         h(BuiCheckbox, {
-          checked: table.getIsAllPageRowsSelected(),
-          'onUpdate:checked': (value: boolean) => table.toggleAllPageRowsSelected(value),
+          checked: table.getIsSomePageRowsSelected()
+            ? 'indeterminate'
+            : table.getIsAllPageRowsSelected(),
+          'onUpdate:checked': (value: boolean) =>
+            table.getIsSomePageRowsSelected()
+              ? table.toggleAllPageRowsSelected(false)
+              : table.toggleAllPageRowsSelected(value),
           ariaLabel: 'Select row'
         }),
         tableColumnSortCommon(column, 'ID')
@@ -66,6 +73,15 @@ const columns: ColumnDef<Task>[] = [
 ]
 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>({
@@ -193,11 +209,23 @@ function groupName(group: string | number) {
             </span>
           </div>
         </template>
-        <template #nodata>Нет данных</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>
       </BuiDataTable>
     </Variant>
   </Story>

package/src/components/stories/components/ActionsMenuContent.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { BuiContextMenuContent, BuiContextMenuItem } from '@/components/ui/context-menu'
+
+defineProps<{
+  actions?: string[]
+}>()
+
+const emit = defineEmits<{
+  select: [action: string]
+}>()
+</script>
+
+<template>
+  <BuiContextMenuContent v-if="actions && actions.length > 0">
+    <BuiContextMenuItem
+      v-for="(action, idx) in actions"
+      @click="() => emit('select', action)"
+      :key="idx"
+    >
+      {{ action }}
+    </BuiContextMenuItem>
+  </BuiContextMenuContent>
+</template>

package/src/components/ui/checkbox/BuiCheckbox.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'
 import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'radix-vue'
-import { Check } from 'lucide-vue-next'
+import { Check, Minus } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
 import { cva } from 'class-variance-authority'
 import { useAttrs } from 'vue'
@@ -13,8 +13,8 @@ const forwarded = useForwardPropsEmits(props, emits)
 
 const checkboxClasses = cva([
   /* base */ 'peer h-4 w-4 shrink-0 rounded-sm ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 transition duration-200',
-  /* border */ 'border border-foreground/[0.24] data-[state=checked]:border-primary hover:data-[state=checked]:border-primary-hover',
-  /* background */ 'hover:bg-foreground/[0.04] data-[state=checked]:bg-primary hover:data-[state=checked]:bg-primary-hover',
+  /* border */ 'border border-foreground/[0.24] data-[state=checked]:border-primary hover:data-[state=checked]:border-primary-hover data-[state=indeterminate]:border-primary hover:data-[state=indeterminate]:border-primary-hover',
+  /* background */ 'hover:bg-foreground/[0.04] data-[state=checked]:bg-primary hover:data-[state=checked]:bg-primary-hover data-[state=indeterminate]:bg-primary hover:data-[state=indeterminate]:bg-primary-hover',
   /* focus */ 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
   /* text */ 'text-primary-foreground'
 ])
@@ -24,7 +24,8 @@ const classes = cn(checkboxClasses(), attrs.class as string)
 <template>
   <CheckboxRoot v-bind="forwarded" :class="classes">
     <CheckboxIndicator class="flex h-full w-full items-center justify-center text-current">
-      <Check class="h-4 w-4" />
+      <Check v-if="checked === true" class="h-4 w-4" />
+      <Minus v-if="checked === 'indeterminate'" class="h-4 w-4" />
     </CheckboxIndicator>
   </CheckboxRoot>
 </template>

package/src/components/ui/input/BuiInput.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
+import { ref, type HTMLAttributes } from 'vue'
 import { useVModel } from '@vueuse/core'
 import { cn } from '@/lib/utils'
 import { inputVariants } from '.'
@@ -19,8 +19,31 @@ const modelValue = useVModel(props, 'modelValue', emits, {
   passive: true,
   defaultValue: props.defaultValue
 })
+
+const isFocused = ref<Boolean>(false)
+
+const handleFocus = () => {
+  isFocused.value = true
+}
+const handleBlur = () => {
+  isFocused.value = false
+}
+
+const handleKeyDown = (e: KeyboardEvent) => {
+  if(e.key === 'Home' || e.key === 'End') {
+    if(isFocused.value) {
+      e.stopPropagation();
+    }
+  }
+}
 </script>
 
 <template>
-  <input v-model="modelValue" :class="cn(inputVariants({ variant }), props.class ?? '')" />
+  <input
+    v-model="modelValue"
+    :class="cn(inputVariants({ variant }), props.class ?? '')"
+    @focus="handleFocus"
+    @blur="handleBlur"
+    @keydown="handleKeyDown"
+  />
 </template>

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

@@ -180,7 +180,7 @@ function getGroupLabel(index: number) {
                 <BuiTableCell :colspan="columns.length" class="!pb-0">
                   <div class="flex w-full items-center justify-between">
                     <div
-                      class="shadow-top-shadow relative -mb-[1px] inline-block rounded-t-lg bg-background px-4 py-3 text-base font-semibold"
+                      class="relative -mb-[1px] inline-block rounded-t-lg bg-background px-4 py-3 text-base font-semibold shadow-top-shadow"
                     >
                       <div class="absolute -left-2 bottom-0 h-2 w-2 bg-background"></div>
                       <div class="absolute -left-4 bottom-0 h-4 w-4 rounded-lg bg-background"></div>
@@ -209,6 +209,9 @@ function getGroupLabel(index: number) {
                     <slot v-if="$slots.groupByRow" name="groupByRow" :group="key" />
                   </div>
                 </BuiTableCell>
+                <template #actions>
+                  <slot name="groupActions" :group="key" />
+                </template>
               </BuiTableRow>
             </BuiCollapsibleTrigger>
             <BuiCollapsibleContent asChild>
@@ -217,7 +220,11 @@ function getGroupLabel(index: number) {
                   :columns="props.columns"
                   :row="row"
                   :renderSubComponent="props.renderSubComponent"
-                />
+                >
+                  <template #actions>
+                    <slot name="rowActions" :row="row.original" />
+                  </template>
+                </BuiTableRowSubrow>
               </template>
             </BuiCollapsibleContent>
           </BuiCollapsible>
@@ -229,7 +236,11 @@ function getGroupLabel(index: number) {
               :columns="props.columns"
               :row="row"
               :renderSubComponent="props.renderSubComponent"
-            />
+            >
+              <template #actions>
+                <slot name="rowActions" :row="row.original" />
+              </template>
+            </BuiTableRowSubrow>
           </template>
         </template>
       </template>

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

@@ -1,17 +1,36 @@
 <script setup lang="ts">
+import { BuiContextMenu, BuiContextMenuTrigger } from '@/components/ui/context-menu'
 import { cn } from '@/lib/utils'
 
 const props = defineProps<{ class?: string }>()
 </script>
 
 <template>
+  <BuiContextMenu v-if="$slots.actions">
+    <BuiContextMenuTrigger as-child>
+      <tr
+        :class="
+          cn(
+            'border-b border-border/[0.08] transition-colors data-[row-state=selected]:bg-accent/[0.04]',
+            props.class
+          )
+        "
+        :data-row-state="$attrs['data-row-state']"
+      >
+        <slot />
+      </tr>
+    </BuiContextMenuTrigger>
+    <slot name="actions" />
+  </BuiContextMenu>
   <tr
+    v-else
     :class="
       cn(
-        'border-b border-border/[0.08] transition-colors data-[state=selected]:bg-accent/[0.04]',
+        'border-b border-border/[0.08] transition-colors data-[row-state=selected]:bg-accent/[0.04]',
         props.class
       )
     "
+    :data-row-state="$attrs['data-row-state']"
   >
     <slot />
   </tr>

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

@@ -12,7 +12,7 @@ const props = defineProps<{
 
 <template>
   <BuiTableRow
-    :data-state="row.getIsSelected() ? 'selected' : undefined"
+    :data-row-state="row.getIsSelected() ? 'selected' : undefined"
     :class="props.renderSubComponent?.(row) ? 'border-b-0' : ''"
   >
     <BuiTableCell
@@ -22,14 +22,20 @@ const props = defineProps<{
     >
       <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
     </BuiTableCell>
+    <template #actions>
+      <slot name="actions" />
+    </template>
   </BuiTableRow>
 
   <BuiTableRow
     v-if="props.renderSubComponent?.(row)"
-    :data-state="row.getIsSelected() ? 'selected' : undefined"
+    :data-row-state="row.getIsSelected() ? 'selected' : undefined"
   >
     <BuiTableCell :colspan="columns.length" class="pt-0">
       <component :is="props.renderSubComponent?.(row)?.()"></component>
     </BuiTableCell>
+    <template #actions>
+      <slot name="actions" />
+    </template>
   </BuiTableRow>
 </template>

package/dist/BuiCheckbox.vue_vue_type_script_setup_true_lang-x7tPq0sI.js

@@ -1,47 +0,0 @@
-import { defineComponent as u, useAttrs as f, openBlock as p, createBlock as m, unref as e, mergeProps as h, withCtx as r, createVNode as o } from "vue";
-import { x as b, s as k, t as g } from "./index-uA4l4INt.js";
-import { c as v, a as y } from "./utils-D2UeooB9.js";
-import { C as x } from "./check-DKdrsX4M.js";
-const A = /* @__PURE__ */ u({
-  __name: "BuiCheckbox",
-  props: {
-    defaultChecked: { type: Boolean },
-    checked: { type: [Boolean, String] },
-    disabled: { type: Boolean },
-    required: { type: Boolean },
-    name: {},
-    value: {},
-    id: {},
-    asChild: { type: Boolean },
-    as: {}
-  },
-  emits: ["update:checked"],
-  setup(t, { emit: s }) {
-    const a = t, c = s, n = f(), i = b(a, c), d = y([
-      /* base */
-      "peer h-4 w-4 shrink-0 rounded-sm ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 transition duration-200",
-      /* border */
-      "border border-foreground/[0.24] data-[state=checked]:border-primary hover:data-[state=checked]:border-primary-hover",
-      /* background */
-      "hover:bg-foreground/[0.04] data-[state=checked]:bg-primary hover:data-[state=checked]:bg-primary-hover",
-      /* focus */
-      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-      /* text */
-      "text-primary-foreground"
-    ]), l = v(d(), n.class);
-    return (_, B) => (p(), m(e(k), h(e(i), { class: e(l) }), {
-      default: r(() => [
-        o(e(g), { class: "flex h-full w-full items-center justify-center text-current" }, {
-          default: r(() => [
-            o(e(x), { class: "h-4 w-4" })
-          ]),
-          _: 1
-        })
-      ]),
-      _: 1
-    }, 16, ["class"]));
-  }
-});
-export {
-  A as _
-};

package/dist/BuiTableRow.vue_vue_type_script_setup_true_lang-Cko6SXNX.js

@@ -1,24 +0,0 @@
-import { defineComponent as s, openBlock as t, createElementBlock as a, normalizeClass as n, unref as c, renderSlot as l } from "vue";
-import { c as p } from "./utils-D2UeooB9.js";
-const b = /* @__PURE__ */ s({
-  __name: "BuiTableRow",
-  props: {
-    class: {}
-  },
-  setup(e) {
-    const r = e;
-    return (o, m) => (t(), a("tr", {
-      class: n(
-        c(p)(
-          "border-b border-border/[0.08] transition-colors data-[state=selected]:bg-accent/[0.04]",
-          r.class
-        )
-      )
-    }, [
-      l(o.$slots, "default")
-    ], 2));
-  }
-});
-export {
-  b as _
-};