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

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

@@ -28,6 +28,7 @@ const taskSchema = z.object({
 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' }, [
@@ -175,14 +176,12 @@ function groupName(group: string | number) {
             <BuiButton variant="outline" @click="deleteRow"> Update rows </BuiButton>
 
             <BuiTabs v-model="groupBy">
-              <BuiTabsList class="grid w-full grid-cols-3" :variant="'default'">
-                <BuiTabsTrigger value="none" :variant="'default'"
-                  ><AlignJustifyIcon
-                /></BuiTabsTrigger>
-                <BuiTabsTrigger value="status" :variant="'default'">
+              <BuiTabsList class="grid w-full grid-cols-3" variant="default">
+                <BuiTabsTrigger value="none" variant="default"><AlignJustifyIcon /></BuiTabsTrigger>
+                <BuiTabsTrigger value="status" variant="default">
                   <FolderIcon />
                 </BuiTabsTrigger>
-                <BuiTabsTrigger value="priority" :variant="'default'">
+                <BuiTabsTrigger value="priority" variant="default">
                   <ArrowUpNarrowWideIcon />
                 </BuiTabsTrigger>
               </BuiTabsList>

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

@@ -64,6 +64,15 @@ import { BuiBadgedInput } from '@/components/ui/input'
       </div>
     </Variant>
 
+    <Variant title="Password with default value">
+      <div class="flex items-center space-x-2 p-1">
+        <div class="grid w-full max-w-sm items-center gap-1.5">
+          <BuiLabel for="email">Password</BuiLabel>
+          <BuiPasswordInput default-value="text" placeholder="Password" />
+        </div>
+      </div>
+    </Variant>
+
     <Variant title="With units">
       <div class="flex items-center space-x-2 p-1">
         <div class="grid w-full max-w-sm items-center gap-1.5">

package/src/components/ui/auto-form/BuiAutoFormFieldArrayCard.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts" generic="T extends z.ZodAny">
+import * as z from 'zod'
+import { computed, provide } from 'vue'
+import { PlusIcon, TrashIcon } from 'lucide-vue-next'
+import { FieldArray, FieldContextKey, useField } from 'vee-validate'
+import type { Config, ConfigItem } from './interface'
+import { beautifyObjectName, getBaseType } from './utils'
+import AutoFormField from './BuiAutoFormField.vue'
+import { BuiButton as Button } from '@/components/ui/button'
+import { BuiSeparator as Separator } from '@/components/ui/separator'
+import { BuiFormItem as FormItem, BuiFormMessage as FormMessage } from '@/components/ui/form'
+import { BuiCard, BuiCardContent, BuiCardHeader, BuiCardTitle } from '@/components/ui/card'
+
+const props = defineProps<{
+  fieldName: string
+  required?: boolean
+  config?: Config<T>
+  schema?: z.ZodArray<T>
+  disabled?: boolean
+}>()
+
+function isZodArray(item: z.ZodArray<any> | z.ZodDefault<any>): item is z.ZodArray<any> {
+  return item instanceof z.ZodArray
+}
+
+function isZodDefault(item: z.ZodArray<any> | z.ZodDefault<any>): item is z.ZodDefault<any> {
+  return item instanceof z.ZodDefault
+}
+
+const itemShape = computed(() => {
+  if (!props.schema) return
+
+  const schema: z.ZodAny = isZodArray(props.schema)
+    ? props.schema._def.type
+    : isZodDefault(props.schema)
+      ? // @ts-expect-error missing schema
+        props.schema._def.innerType._def.type
+      : null
+
+  return {
+    type: getBaseType(schema),
+    schema
+  }
+})
+
+const fieldContext = useField(props.fieldName)
+// @ts-expect-error ignore missing `id`
+provide(FieldContextKey, fieldContext)
+</script>
+
+<template>
+  <FieldArray v-slot="{ fields, remove, push }" as="section" :name="fieldName">
+    <slot v-bind="props">
+      <BuiCard as-child class="w-full border-0 shadow-none">
+        <FormItem>
+          <BuiCardHeader class="border-b-[1px] border-b-border/[0.16] py-1">
+            <BuiCardTitle class="py-0 text-base">
+              {{
+                schema?.description ||
+                beautifyObjectName(fieldName.split('.')[fieldName.split('.').length - 1])
+              }}
+            </BuiCardTitle>
+          </BuiCardHeader>
+          <BuiCardContent class="flex flex-col gap-5 pb-0 pr-0">
+            <template v-for="(field, index) of fields" :key="field.key">
+              <div class="mb-4 p-1">
+                <AutoFormField
+                  :field-name="`${fieldName}[${index}]`"
+                  :label="fieldName"
+                  :shape="itemShape!"
+                  :config="config as ConfigItem"
+                />
+
+                <div class="!my-4 flex justify-end">
+                  <Button type="button" size="icon" variant="secondary" @click="remove(index)">
+                    <TrashIcon :size="16" />
+                  </Button>
+                </div>
+                <Separator v-if="!field.isLast" />
+              </div>
+            </template>
+
+            <Button
+              type="button"
+              variant="secondary"
+              class="mt-4 flex items-center"
+              @click="push(null)"
+            >
+              <PlusIcon class="mr-2" :size="16" />
+            </Button>
+            <FormMessage />
+          </BuiCardContent>
+        </FormItem>
+      </BuiCard>
+    </slot>
+  </FieldArray>
+</template>

package/src/components/ui/auto-form/BuiAutoFormFieldObjectCard.vue

@@ -53,7 +53,10 @@ provide(FieldContextKey, fieldContext)
         <FormItem>
           <BuiCardHeader class="border-b-[1px] border-b-border/[0.16] py-1">
             <BuiCardTitle class="py-0 text-base">
-              {{ schema?.description || fieldName.split('.')[fieldName.split('.').length - 1] }}
+              {{
+                schema?.description ||
+                beautifyObjectName(fieldName.split('.')[fieldName.split('.').length - 1])
+              }}
             </BuiCardTitle>
           </BuiCardHeader>
           <BuiCardContent class="flex flex-col gap-5 pb-0 pr-0">

package/src/components/ui/auto-form/constant.ts

@@ -6,7 +6,8 @@ import BuiAutoFormFieldFile from './BuiAutoFormFieldFile.vue'
 import BuiAutoFormFieldInput from './BuiAutoFormFieldInput.vue'
 import BuiAutoFormFieldNumber from './BuiAutoFormFieldNumber.vue'
 import BuiAutoFormFieldObject from './BuiAutoFormFieldObject.vue'
-import BuiAutoFormFieldObjectCard from '@/components/ui/auto-form/BuiAutoFormFieldObjectCard.vue'
+import BuiAutoFormFieldObjectCard from './BuiAutoFormFieldObjectCard.vue'
+import BuiAutoFormFieldArrayCard from './BuiAutoFormFieldArrayCard.vue'
 
 export const INPUT_COMPONENTS = {
   date: BuiAutoFormFieldDate,
@@ -18,7 +19,7 @@ export const INPUT_COMPONENTS = {
   number: BuiAutoFormFieldNumber,
   string: BuiAutoFormFieldInput,
   file: BuiAutoFormFieldFile,
-  array: BuiAutoFormFieldArray,
+  array: BuiAutoFormFieldArrayCard,
   object: BuiAutoFormFieldObjectCard
 }
 

package/src/components/ui/auto-form/index.ts

@@ -13,3 +13,5 @@ export { default as BuiAutoFormFieldFile } from './BuiAutoFormFieldFile.vue'
 export { default as BuiAutoFormFieldInput } from './BuiAutoFormFieldInput.vue'
 export { default as BuiAutoFormFieldNumber } from './BuiAutoFormFieldNumber.vue'
 export { default as BuiAutoFormFieldObject } from './BuiAutoFormFieldObject.vue'
+export { default as BuiAutoFormFieldObjectCard } from './BuiAutoFormFieldObjectCard.vue'
+export { default as BuiAutoFormFieldArrayCard } from './BuiAutoFormFieldArrayCard.vue'

package/src/components/ui/button/BuiButton.vue

@@ -2,15 +2,18 @@
 import { Primitive, type PrimitiveProps } from 'radix-vue'
 import { buttonVariants } from '.'
 import { cn } from '@/lib/utils'
+import { type HTMLAttributes } from 'vue'
 
 interface Props extends PrimitiveProps {
+  class?: HTMLAttributes['class']
   variant?: NonNullable<Parameters<typeof buttonVariants>[0]>['variant']
   size?: NonNullable<Parameters<typeof buttonVariants>[0]>['size']
   as?: string
   type?: string
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
+  class: '',
   as: 'button',
   type: 'button'
 })
@@ -20,7 +23,7 @@ withDefaults(defineProps<Props>(), {
   <Primitive
     :as="as"
     :as-child="asChild"
-    :class="cn(buttonVariants({ variant, size }), $attrs.class ?? '')"
+    :class="cn(buttonVariants({ variant, size }), props.class)"
     :type="type"
   >
     <slot />

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

@@ -4,11 +4,15 @@ import { cn } from '@/lib/utils'
 import { EyeIcon, EyeOffIcon } from 'lucide-vue-next'
 import { ref } from 'vue'
 
+const props = defineProps<{
+  defaultValue?: 'password' | 'text'
+}>()
+
 defineOptions({
   inheritAttrs: false
 })
 
-const type = ref('password')
+const type = ref(props.defaultValue ?? 'password')
 function togglePasswordShow() {
   if (type.value === 'password') {
     type.value = 'text'
@@ -25,8 +29,11 @@ function togglePasswordShow() {
       @click="togglePasswordShow"
       class="absolute right-3 top-0 flex h-full items-center justify-center"
     >
-      <EyeIcon v-if="type === 'password'" class="h-4 w-4 cursor-pointer" />
-      <EyeOffIcon v-else class="h-4 w-4 cursor-pointer" />
+      <EyeIcon
+        v-if="type === 'password'"
+        class="h-4 w-4 cursor-pointer opacity-[0.56] hover:opacity-100"
+      />
+      <EyeOffIcon v-else class="h-4 w-4 cursor-pointer opacity-[0.56] hover:opacity-100" />
     </span>
   </div>
 </template>

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

@@ -39,38 +39,32 @@ const pageSizeString = computed({
 </script>
 
 <template>
-  <div class="m-2">
-    <BuiPagination
-      v-slot="{ page }"
-      :total="props.total"
-      :itemsPerPage="pageSize"
-      v-model:page="pageIndex"
-    >
-      <BuiPaginationList class="relative flex items-center justify-center gap-2">
-        <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>
-        <template v-if="totalPages > 1">
-          <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 />
-        </template>
-      </BuiPaginationList>
-    </BuiPagination>
-  </div>
+  <BuiPagination
+    v-slot="{ page }"
+    :total="props.total"
+    :itemsPerPage="pageSize"
+    v-model:page="pageIndex"
+  >
+    <BuiPaginationList class="relative flex items-center justify-center gap-2">
+      <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>
+      <template v-if="totalPages > 1">
+        <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 />
+      </template>
+    </BuiPaginationList>
+  </BuiPagination>
 </template>

package/src/components/ui/progress/BuiProgress.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ProgressIndicator, ProgressRoot, type ProgressRootProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
-import type { HTMLAttributes } from 'vue'
+import { type HTMLAttributes, computed } from 'vue'
 
 import { progressVariants, capVariants, indicatorVariants } from '.'
 
@@ -20,6 +20,9 @@ const props = withDefaults(
     variant: 'default'
   }
 )
+const indicatorClass = computed(() =>
+  !props.modelValue || props.modelValue < 100 ? 'rounded-r-none border-r-2' : ''
+)
 </script>
 
 <template>
@@ -34,7 +37,7 @@ const props = withDefaults(
     v-bind="props"
   >
     <ProgressIndicator
-      :class="cn(indicatorVariants({ color, variant }), props.class)"
+      :class="cn(indicatorVariants({ color, variant }), indicatorClass, props.class)"
       :style="`width: calc(calc(100% - ${capVariants[variant ?? 'default']}) * ${
         (props.modelValue ?? 0) * 0.01
       })`"

package/src/components/ui/progress/index.ts

@@ -25,9 +25,10 @@ export const indicatorVariants = cva(
         lg: 'rounded-[16px]'
       },
       color: {
-        primary: 'from-[rgba(115,113,249,0.80)] to-[rgba(115,113,249,0.24)]',
-        red: 'from-[rgba(224,95,163,0.8)] to-[rgba(224,95,163,0.24)]',
-        orange: 'from-[rgba(255,167,139,0.8)] to-[rgba(255,167,139,0.24)]'
+        primary:
+          'from-[rgba(115,113,249,0.80)] to-[rgba(115,113,249,0.24)] border-[rgb(115,113,249)]',
+        red: 'from-[rgba(224,95,163,0.8)] to-[rgba(224,95,163,0.24)] border-[rgb(224,95,163)]',
+        orange: 'from-[rgba(255,167,139,0.8)] to-[rgba(255,167,139,0.24)] border-[rgb(255,167,139)]'
       }
     },
     defaultVariants: {

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

@@ -28,10 +28,10 @@ import {
   BuiTableBody,
   BuiTableCell,
   BuiTableEmpty,
-  BuiTableFooter,
   BuiTableHead,
   BuiTableHeader,
-  BuiTableRow
+  BuiTableRow,
+  getPinningStyle
 } from './'
 
 const NO_GROUP_KEY = '#UNDEFINED#'
@@ -61,7 +61,11 @@ const computedItems = computed(() =>
   props.manualPagination ? props.totalItems : props.data.length
 )
 const table = useVueTable({
-  initialState: { pagination: { pageSize: props.pageSize } },
+  initialState: {
+    // TODO: column freeze
+    //columnPinning: { left: ['id'] },
+    pagination: { pageSize: props.pageSize }
+  },
   get data() {
     return props.data
   },
@@ -154,7 +158,11 @@ function getGroupLabel(index: number) {
   <BuiTable>
     <BuiTableHeader>
       <BuiTableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
-        <BuiTableHead v-for="header in headerGroup.headers" :key="header.id">
+        <BuiTableHead
+          v-for="header in headerGroup.headers"
+          :key="header.id"
+          :style="{ ...getPinningStyle(header.column) }"
+        >
           <FlexRender
             v-if="!header.isPlaceholder"
             :render="header.column.columnDef.header"
@@ -171,7 +179,22 @@ function getGroupLabel(index: number) {
               <BuiTableRow class="bg-foreground/[0.04]">
                 <BuiTableCell :colspan="columns.length" class="!pb-0">
                   <div class="flex w-full items-center justify-between">
-                    <div class="inline-block rounded-t bg-background px-4 py-3">
+                    <div
+                      class="shadow-top-shadow relative -mb-[1px] inline-block rounded-t-lg bg-background px-4 py-3 text-base font-semibold"
+                    >
+                      <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>
+                      <div
+                        class="absolute -left-4 bottom-0 h-4 w-4 rounded-lg bg-foreground/[0.04]"
+                      ></div>
+                      <div class="absolute -right-2 bottom-0 h-2 w-2 bg-background"></div>
+                      <div
+                        class="absolute -right-4 bottom-0 h-4 w-4 rounded-lg bg-background"
+                      ></div>
+                      <div
+                        class="absolute -right-4 bottom-0 h-4 w-4 rounded-lg bg-foreground/[0.04]"
+                      ></div>
+                      <div></div>
                       <template v-if="key === NO_GROUP_KEY">
                         {{ getGroupLabel(1) }}
                       </template>
@@ -216,18 +239,16 @@ function getGroupLabel(index: number) {
         </BuiTableEmpty>
       </template>
     </BuiTableBody>
-    <BuiTableFooter v-if="showPagination && computedItems > 0">
-      <BuiTableRow>
-        <BuiTableCell :colspan="columns.length">
-          <BuiPaginationCommon
-            class="float-right"
-            :total="computedItems"
-            v-model:pageIndex="pageIndex"
-            v-model:pageSize="tablePageSize"
-          >
-          </BuiPaginationCommon>
-        </BuiTableCell>
-      </BuiTableRow>
-    </BuiTableFooter>
   </BuiTable>
+  <div
+    v-if="showPagination && computedItems > 0"
+    class="flex w-full justify-end border-x border-b border-border/[0.16] bg-primary/[0.04] p-4 text-base text-muted-foreground"
+  >
+    <BuiPaginationCommon
+      :total="computedItems"
+      v-model:pageIndex="pageIndex"
+      v-model:pageSize="tablePageSize"
+    >
+    </BuiPaginationCommon>
+  </div>
 </template>

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

@@ -8,7 +8,7 @@ const props = defineProps<{ class?: string }>()
   <tr
     :class="
       cn(
-        'border-b border-border/[0.08] transition-colors data-[state=selected]:bg-muted' /* hover:bg-muted/50 */,
+        'border-b border-border/[0.08] transition-colors data-[state=selected]:bg-accent/[0.04]',
         props.class
       )
     "

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

@@ -1,6 +1,7 @@
 <script setup lang="ts" generic="TData, TValue">
 import { BuiTableCell, BuiTableRow } from '@/components/ui/table'
 import { FlexRender, type ColumnDef, type Row } from '@tanstack/vue-table'
+import { getPinningStyle } from './'
 
 const props = defineProps<{
   row: Row<TData>
@@ -14,7 +15,11 @@ const props = defineProps<{
     :data-state="row.getIsSelected() ? 'selected' : undefined"
     :class="props.renderSubComponent?.(row) ? 'border-b-0' : ''"
   >
-    <BuiTableCell v-for="cell in row.getVisibleCells()" :key="cell.id">
+    <BuiTableCell
+      v-for="cell in row.getVisibleCells()"
+      :key="cell.id"
+      :style="{ ...getPinningStyle(cell.column) }"
+    >
       <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
     </BuiTableCell>
   </BuiTableRow>

package/src/components/ui/table/index.ts

@@ -1,3 +1,6 @@
+import type { Column } from '@tanstack/vue-table'
+import type { CSSProperties } from 'vue'
+
 export { default as BuiTable } from './BuiTable.vue'
 export { default as BuiTableBody } from './BuiTableBody.vue'
 export { default as BuiTableCell } from './BuiTableCell.vue'
@@ -9,3 +12,12 @@ export { default as BuiTableCaption } from './BuiTableCaption.vue'
 export { default as BuiTableEmpty } from './BuiTableEmpty.vue'
 export { default as BuiTableFooter } from './BuiTableFooter.vue'
 export { default as BuiDataTable } from './BuiDataTable.vue'
+
+export function getPinningStyle<TData>(column: Column<TData, unknown>): CSSProperties {
+  const isPinned = column.getIsPinned()
+  return {
+    left: isPinned === 'left' ? '0' : undefined,
+    position: isPinned ? 'sticky' : 'relative',
+    zIndex: isPinned ? '1' : '0'
+  }
+}

package/src/components/ui/tabs/BuiTabsTrigger.vue

@@ -13,6 +13,8 @@ const props = defineProps<Props>()
 
 <template>
   <TabsTrigger v-bind="props" :class="cn(tabsTriggerVariants({ variant }), props.class ?? '')">
-    <slot />
+    <div class="flex items-center">
+      <slot />
+    </div>
   </TabsTrigger>
 </template>

package/src/components/ui/tabs/index.ts

@@ -19,14 +19,14 @@ export const tabsListVariants = cva('inline-flex items-center justify-center rou
 })
 
 export const tabsTriggerVariants = cva(
-  'inline-flex items-center justify-center whitespace-nowrap px-3 py-1.5 text-md font-semibold ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-foreground',
+  'inline-flex items-center justify-center whitespace-nowrap px-3 py-1.5 text-lg font-semibold ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-foreground',
   {
     variants: {
       variant: {
         default:
-          'rounded-sm data-[state=active]:bg-background data-[state=active]:border border-primary/[0.16] text-primary data-[state=active]:text-foreground data-[state=active]:shadow-tab-shadow',
+          'rounded-sm data-[state=active]:bg-background data-[state=active]:border border-primary/[0.16] text-foreground opacity-[0.56] hover:opacity-100 data-[state=active]:opacity-100 data-[state=active]:shadow-tab-shadow',
         ghost:
-          'border-transparent text-muted-foreground border-b-2 data-[state=active]:border-primary',
+          'border-transparent text-muted-foreground pb-0 [&_div]:pb-1.5 [&_div]:border-b-2 [&_div]:data-[state=active]:border-primary',
         vertical:
           'border-transparent text-primary data-[state=active]:border-primary data-[state=active]:bg-background border-l-2 border-b-0 w-full justify-start pl-6'
       }

package/src/tailwind-preset.ts

@@ -79,7 +79,8 @@ export default {
       boxShadow: {
         'card-shadow': '0px 4px 8px 0px hsl(var(--card-shadow))',
         'tab-shadow':
-          '0px 2px 4px 0px hsl(var(--tab-shadow)), 0px 4px 4px 0px hsl(var(--tab-shadow))'
+          '0px 2px 4px 0px hsl(var(--tab-shadow)), 0px 4px 4px 0px hsl(var(--tab-shadow))',
+        'top-shadow': '0px -2px 4px 0px hsl(var(--tab-shadow))'
       },
       keyframes: {
         'accordion-down': {