@soft-stech/bootsman-ui-shadcn 1.0.5-beta.4 → 1.0.5-beta.5

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

@@ -0,0 +1,130 @@
+<script setup lang="ts" generic="TData, TValue">
+import type {
+  ColumnDef,
+  SortingState,
+  PaginationState,
+  RowSelectionState
+} from '@tanstack/vue-table'
+import {
+  FlexRender,
+  getCoreRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useVueTable
+} from '@tanstack/vue-table'
+import {
+  BuiTable,
+  BuiTableBody,
+  BuiTableCaption,
+  BuiTableCell,
+  BuiTableEmpty,
+  BuiTableFooter,
+  BuiTableHead,
+  BuiTableHeader,
+  BuiTableRow
+} from './'
+import { BuiPaginationCommon, type PageSize } from '@/components/ui/pagination'
+import { valueUpdater } from '@/lib/utils'
+
+const props = withDefaults(
+  defineProps<{
+    columns: ColumnDef<TData, TValue>[]
+    data: TData[]
+    pageSize?: number
+    showPagination?: boolean
+  }>(),
+  { pageSize: 10, showPagination: true }
+)
+
+const sorting = defineModel<SortingState>('sorting')
+const pagination = defineModel<PaginationState>('pagination')
+const rowSelection = defineModel<RowSelectionState>('selection')
+
+const table = useVueTable({
+  initialState: { pagination: { pageSize: props.pageSize } },
+  get data() {
+    return props.data
+  },
+  get columns() {
+    return props.columns
+  },
+  getCoreRowModel: getCoreRowModel(),
+  getPaginationRowModel: getPaginationRowModel(),
+  getSortedRowModel: getSortedRowModel(),
+  onSortingChange: (updaterOrValue) => {
+    valueUpdater(updaterOrValue, sorting)
+  },
+  onPaginationChange: (updaterOrValue) => {
+    valueUpdater(updaterOrValue, pagination)
+  },
+  onRowSelectionChange: (updaterOrValue) => {
+    valueUpdater(updaterOrValue, rowSelection)
+  },
+  manualPagination: true,
+  manualSorting: true,
+  state: {
+    get sorting() {
+      return sorting.value
+    },
+    get pagination() {
+      return pagination.value
+    },
+    get rowSelection() {
+      return rowSelection.value
+    }
+  }
+})
+</script>
+
+<template>
+  <BuiTable>
+    <BuiTableCaption v-if="$slots.caption"><slot name="caption" :table="table" /></BuiTableCaption>
+    <BuiTableHeader>
+      <BuiTableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
+        <BuiTableHead v-for="header in headerGroup.headers" :key="header.id">
+          <FlexRender
+            v-if="!header.isPlaceholder"
+            :render="header.column.columnDef.header"
+            :props="header.getContext()"
+          />
+        </BuiTableHead>
+      </BuiTableRow>
+    </BuiTableHeader>
+    <BuiTableBody>
+      <template v-if="table.getRowModel().rows?.length">
+        <BuiTableRow
+          v-for="row in table.getRowModel().rows"
+          :key="row.id"
+          :data-state="row.getIsSelected() ? 'selected' : undefined"
+        >
+          <BuiTableCell v-for="cell in row.getVisibleCells()" :key="cell.id">
+            <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
+          </BuiTableCell>
+        </BuiTableRow>
+      </template>
+      <template v-else>
+        <BuiTableEmpty :colspan="columns.length">No data</BuiTableEmpty>
+      </template>
+    </BuiTableBody>
+    <BuiTableFooter v-if="showPagination && table.getPageCount()">
+      <BuiTableRow>
+        <BuiTableCell :colspan="columns.length">
+          <BuiPaginationCommon
+            class="float-right"
+            :total="table.getFilteredRowModel().rows.length"
+            :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)
+              }
+            "
+          >
+          </BuiPaginationCommon>
+        </BuiTableCell>
+      </BuiTableRow>
+    </BuiTableFooter>
+  </BuiTable>
+</template>

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

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <div class="w-full overflow-auto rounded border border-border/[0.16]">
+    <table :class="cn('w-full caption-top  text-sm', props.class)">
+      <slot />
+    </table>
+  </div>
+</template>

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

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <tbody :class="cn('[&_tr:last-child]:border-0', props.class)">
+    <slot />
+  </tbody>
+</template>

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

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <caption :class="cn('px-8 py-4 text-left', props.class)">
+    <slot />
+  </caption>
+</template>

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

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <td
+    :class="cn('p-4 align-middle first:pl-8 last:pr-8 [&:has([role=checkbox])]:pr-0', props.class)"
+  >
+    <slot />
+  </td>
+</template>

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

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import BuiTableRow from './BuiTableRow.vue'
+import BuiTableCell from './BuiTableCell.vue'
+import { cn } from '@/lib/utils'
+
+interface Props {
+  class?: string
+  colspan?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  class: '',
+  colspan: 1
+})
+</script>
+
+<template>
+  <BuiTableRow>
+    <BuiTableCell
+      :class="cn('whitespace-nowrap p-4 text-foreground/[0.32]', props.class)"
+      :colspan="props.colspan"
+    >
+      <div class="flex items-center justify-center py-10">
+        <slot />
+      </div>
+    </BuiTableCell>
+  </BuiTableRow>
+</template>

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

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <tfoot
+    :class="
+      cn(
+        'border-t border-border/[0.16] bg-primary/[0.04] text-base text-muted-foreground',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </tfoot>
+</template>

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

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <th
+    :class="
+      cn(
+        'h-14 bg-foreground/[0.04] text-left align-middle text-base font-semibold text-foreground [&:has([role=checkbox])]:pr-0 ',
+        props.class
+      )
+    "
+  >
+    <div class="flex h-10 items-center border-r border-border/[0.16] p-4">
+      <slot />
+    </div>
+  </th>
+</template>

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

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <thead
+    :class="
+      cn(
+        '[&_th:first-child>div]:pl-8 [&_th:last-child>div]:border-0 [&_th:last-child>div]:pr-8 [&_tr]:border-b [&_tr]:border-border/[0.16]',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </thead>
+</template>

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

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <tr
+    :class="
+      cn(
+        'border-b border-border/[0.08] transition-colors data-[state=selected]:bg-muted' /* hover:bg-muted/50 */,
+        props.class
+      )
+    "
+  >
+    <slot />
+  </tr>
+</template>

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

@@ -0,0 +1,10 @@
+export { default as BuiTable } from './BuiTable.vue'
+export { default as BuiTableBody } from './BuiTableBody.vue'
+export { default as BuiTableCell } from './BuiTableCell.vue'
+export { default as BuiTableHead } from './BuiTableHead.vue'
+export { default as BuiTableHeader } from './BuiTableHeader.vue'
+export { default as BuiTableRow } from './BuiTableRow.vue'
+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'

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

@@ -0,0 +1,18 @@
+<!-- TODO think about variant property on BuiTabs
+  component and provide its value to all children coponents -->
+
+<script setup lang="ts">
+import { TabsRoot, useForwardPropsEmits } from 'radix-vue'
+import type { TabsRootEmits, TabsRootProps } from 'radix-vue'
+
+const props = defineProps<TabsRootProps>()
+const emits = defineEmits<TabsRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <TabsRoot v-bind="forwarded">
+    <slot />
+  </TabsRoot>
+</template>

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

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { TabsContent, type TabsContentProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<TabsContentProps & { class?: string }>()
+</script>
+
+<template>
+  <TabsContent
+    :class="
+      cn(
+        'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+        props.class
+      )
+    "
+    v-bind="props"
+  >
+    <slot />
+  </TabsContent>
+</template>

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

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { TabsList, type TabsListProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+import { tabsListVariants } from '.'
+
+interface Props extends TabsListProps {
+  variant?: NonNullable<Parameters<typeof tabsListVariants>[0]>['variant']
+  class?: string
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <TabsList v-bind="props" :class="cn(tabsListVariants({ variant }), props.class ?? '')">
+    <slot />
+  </TabsList>
+</template>

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

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { TabsTrigger, type TabsTriggerProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+import { tabsTriggerVariants } from '.'
+
+interface Props extends TabsTriggerProps {
+  variant?: NonNullable<Parameters<typeof tabsTriggerVariants>[0]>['variant']
+  class?: string
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <TabsTrigger v-bind="props" :class="cn(tabsTriggerVariants({ variant }), props.class ?? '')">
+    <slot />
+  </TabsTrigger>
+</template>

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

@@ -0,0 +1,34 @@
+export { default as BuiTabs } from './BuiTabs.vue'
+export { default as BuiTabsTrigger } from './BuiTabsTrigger.vue'
+export { default as BuiTabsList } from './BuiTabsList.vue'
+export { default as BuiTabsContent } from './BuiTabsContent.vue'
+
+import { cva } from 'class-variance-authority'
+
+export const tabsListVariants = cva('inline-flex h-10 items-center justify-center rounded-md p-1', {
+  variants: {
+    variant: {
+      default: 'bg-muted text-foreground text-muted-foreground',
+      ghost: 'bg-background bg-text-foreground'
+    }
+  },
+  defaultVariants: {
+    variant: 'default'
+  }
+})
+
+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 data-[state=active]:shadow-sm',
+  {
+    variants: {
+      variant: {
+        default: 'rounded-sm data-[state=active]:bg-background',
+        ghost:
+          'border-transparent text-muted-foreground border-b-2 data-[state=active]:border-primary '
+      }
+    },
+    defaultVariants: {
+      variant: 'default'
+    }
+  }
+)

package/src/components/ui/textarea/BuiTextarea.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+import { cn } from '@/lib/utils'
+import { textareaVariants } from '.'
+
+const props = defineProps<{
+  defaultValue?: string | number
+  variant?: NonNullable<Parameters<typeof textareaVariants>[0]>['variant']
+  modelValue?: string | number
+}>()
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', payload: string | number): void
+}>()
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  passive: true,
+  defaultValue: props.defaultValue
+})
+</script>
+
+<template>
+  <textarea v-model="modelValue" :class="cn(textareaVariants({ variant }), $attrs.class ?? '')" />
+</template>

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

@@ -0,0 +1,19 @@
+import { cva } from 'class-variance-authority'
+
+export { default as BuiTextarea } from './BuiTextarea.vue'
+
+export const textareaVariants = cva(
+  'flex min-h-[80px] w-full rounded border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-30 dark:disabled:opacity-55 aria-[invalid=true]:border-destructive-foreground',
+  {
+    variants: {
+      variant: {
+        default: 'border-input',
+        destructive: 'border-destructive-foreground',
+        success: 'border-success-foreground'
+      }
+    },
+    defaultVariants: {
+      variant: 'default'
+    }
+  }
+)

package/src/components/ui/toast/BuiToast.vue

@@ -0,0 +1,32 @@
+<script lang="ts">
+import type { ToastRootEmits, ToastRootProps } from 'radix-vue'
+import type { VariantProps } from 'class-variance-authority'
+
+interface ToastVariantProps extends VariantProps<typeof toastVariants> {}
+
+export interface ToastProps extends ToastRootProps {
+  class?: string
+  variant?: ToastVariantProps['variant']
+  onOpenChange?: ((value: boolean) => void) | undefined
+}
+</script>
+
+<script setup lang="ts">
+import { ToastRoot, useEmitAsProps } from 'radix-vue'
+
+import { toastVariants } from '.'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<ToastProps>()
+const emits = defineEmits<ToastRootEmits>()
+</script>
+
+<template>
+  <ToastRoot
+    v-bind="{ ...props, ...useEmitAsProps(emits) }"
+    :class="cn(toastVariants({ variant: props.variant }), props.class)"
+    @update:open="onOpenChange"
+  >
+    <slot />
+  </ToastRoot>
+</template>

package/src/components/ui/toast/BuiToastAction.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { ToastAction, type ToastActionProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<ToastActionProps & { class?: string }>()
+</script>
+
+<template>
+  <ToastAction
+    v-bind="props"
+    :class="
+      cn(
+        'inline-flex h-8 shrink-0 items-center justify-center rounded-md border border-input bg-transparent px-3 text-sm font-medium  ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </ToastAction>
+</template>

package/src/components/ui/toast/BuiToastClose.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { ToastClose } from 'radix-vue'
+import { XIcon } from 'lucide-vue-next'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: string
+}>()
+</script>
+
+<template>
+  <ToastClose v-bind="props" :class="cn('absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600', props.class)">
+    <XIcon class="h-4 w-4" />
+  </ToastClose>
+</template>

package/src/components/ui/toast/BuiToastDescription.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { ToastDescription, type ToastDescriptionProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<ToastDescriptionProps & { class?: string }>()
+</script>
+
+<template>
+  <ToastDescription :class="cn('text-sm opacity-90', props.class)" v-bind="props">
+    <slot />
+  </ToastDescription>
+</template>

package/src/components/ui/toast/BuiToastProvider.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { ToastProvider, type ToastProviderProps } from 'radix-vue'
+
+const props = defineProps<ToastProviderProps>()
+</script>
+
+<template>
+  <ToastProvider v-bind="props">
+    <slot />
+  </ToastProvider>
+</template>

package/src/components/ui/toast/BuiToastTitle.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { ToastTitle, type ToastTitleProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<ToastTitleProps & { class?: string }>()
+</script>
+
+<template>
+  <ToastTitle v-bind="props" :class="cn('text-sm font-semibold', props.class)">
+    <slot />
+  </ToastTitle>
+</template>

package/src/components/ui/toast/BuiToastViewport.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { ToastViewport, type ToastViewportProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<ToastViewportProps & { class?: string }>()
+</script>
+
+<template>
+  <ToastViewport v-bind="props" :class="cn('fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]', props.class)" />
+</template>

package/src/components/ui/toast/BuiToaster.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { isVNode } from 'vue'
+import { useToast } from './use-toast'
+import {
+  BuiToast,
+  BuiToastClose,
+  BuiToastDescription,
+  BuiToastProvider,
+  BuiToastTitle,
+  BuiToastViewport
+} from '.'
+
+const { toasts } = useToast()
+</script>
+
+<template>
+  <BuiToastProvider>
+    <BuiToast v-for="toast in toasts" :key="toast.id" v-bind="toast">
+      <div class="grid gap-1">
+        <BuiToastTitle v-if="toast.title">
+          {{ toast.title }}
+        </BuiToastTitle>
+        <template v-if="toast.description">
+          <BuiToastDescription v-if="isVNode(toast.description)">
+            <component :is="toast.description" />
+          </BuiToastDescription>
+          <BuiToastDescription v-else>
+            {{ toast.description }}
+          </BuiToastDescription>
+        </template>
+        <BuiToastClose />
+      </div>
+      <component :is="toast.action" />
+    </BuiToast>
+    <BuiToastViewport />
+  </BuiToastProvider>
+</template>

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

@@ -0,0 +1,27 @@
+export { default as BuiToaster } from './BuiToaster.vue'
+export { default as BuiToast } from './BuiToast.vue'
+export { default as BuiToastViewport } from './BuiToastViewport.vue'
+export { default as BuiToastAction } from './BuiToastAction.vue'
+export { default as BuiToastClose } from './BuiToastClose.vue'
+export { default as BuiToastTitle } from './BuiToastTitle.vue'
+export { default as BuiToastDescription } from './BuiToastDescription.vue'
+export { default as BuiToastProvider } from './BuiToastProvider.vue'
+export { toast, useToast } from './use-toast'
+
+import { cva } from 'class-variance-authority'
+
+export const toastVariants = cva(
+  'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
+  {
+    variants: {
+      variant: {
+        default: 'border-muted bg-background text-foreground',
+        destructive:
+          'destructive group border-destructive bg-destructive text-destructive-foreground'
+      }
+    },
+    defaultVariants: {
+      variant: 'default'
+    }
+  }
+)