@soft-stech/bootsman-ui-shadcn 2.0.5 → 2.0.7

package/src/components/color-picker/BuiColorPicker.vue

@@ -156,11 +156,7 @@ watchThrottled(
 )
 </script>
 <template>
-  <Primitive
-    :as="as"
-    class="data-disabled:opacity-75"
-    :data-disabled="disabled ? true : undefined"
-  >
+  <Primitive :as="as" class="data-disabled:opacity-75" :data-disabled="disabled ? true : undefined">
     <div class="flex gap-4">
       <div ref="selectorRef" :class="colorPickerSelectorVariants({ size })" :style="selectorStyle">
         <div class="relative h-full w-full rounded-md" data-color-picker-background>
@@ -168,7 +164,7 @@ watchThrottled(
             ref="selectorThumbRef"
             :class="
               cn(
-                'absolute size-4 -translate-x-1/2 -translate-y-1/2 cursor-pointer rounded-full ring-2 ring-background data-disabled:cursor-not-allowed',
+                'ring-background absolute size-4 -translate-x-1/2 -translate-y-1/2 cursor-pointer rounded-full ring-2 data-disabled:cursor-not-allowed',
                 ui?.selectorClass
               )
             "
@@ -182,7 +178,7 @@ watchThrottled(
           ref="trackThumbRef"
           :class="
             cn(
-              'absolute size-4 -translate-x-[4px] -translate-y-1/2 transform cursor-pointer rounded-full ring-2 ring-background data-disabled:cursor-not-allowed rtl:translate-x-[4px]',
+              'ring-background absolute size-4 -translate-x-[4px] -translate-y-1/2 transform cursor-pointer rounded-full ring-2 data-disabled:cursor-not-allowed rtl:translate-x-[4px]',
               ui?.trackClass
             )
           "
@@ -193,23 +189,3 @@ watchThrottled(
     </div>
   </Primitive>
 </template>
-
-<style scoped>
-[data-color-picker-background] {
-  background-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%),
-    linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);
-}
-
-[data-color-picker-track] {
-  background-image: linear-gradient(
-    0deg,
-    red 0,
-    #f0f 17%,
-    #00f 33%,
-    #0ff 50%,
-    #0f0 67%,
-    #ff0 83%,
-    red
-  );
-}
-</style>

package/src/components/input/index.ts

@@ -10,7 +10,7 @@ export const inputVariants = cva(
   {
     variants: {
       variant: {
-        default: 'border-input',
+        default: 'border-input hover:border-primary focus-visible:border-primary',
         destructive: 'border-destructive-foreground',
         success: 'border-success-foreground'
       }

package/src/components/select/BuiSelectTrigger.vue

@@ -17,8 +17,9 @@ const props = withDefaults(
     v-bind="props"
     :class="[
       cn(
-        'flex h-8 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-background px-2 py-1 text-sm ring-offset-background focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-placeholder:text-muted-foreground [&>span]:min-w-0 [&>span]:truncate',
+        'border-input bg-background ring-offset-background focus:ring-ring data-placeholder:text-muted-foreground flex h-8 w-full items-center justify-between rounded-md border px-2 py-1 text-sm whitespace-nowrap focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 [&>span]:min-w-0 [&>span]:truncate',
         props.invalid && 'border-destructive-foreground',
+        !props.invalid && 'hover:border-primary focus:border-primary',
         props.class
       )
     ]"

package/src/components/table/BuiDataTable.vue

@@ -393,13 +393,13 @@ watch(
             :style="{ height: `${height.toFixed(1)}px` }"
           >
             <div
-              class="border-border/16 bg-foreground/4 flex h-full items-center border-b border-l px-1"
+              class="border-border/16 bg-foreground/4 hover:bg-foreground/8 dark:hover:bg-accent/16 flex h-full items-center border-b border-l px-1"
             >
               <BuiButton
                 variant="ghost"
-                class="text-foreground flex h-8 w-8 items-center justify-center"
+                class="text-foreground/50 hover:text-primary flex h-8 w-8 items-center justify-center hover:bg-transparent"
               >
-                <Settings2Icon class="h-4 w-4 shrink-0 opacity-50" />
+                <Settings2Icon class="h-4 w-4 shrink-0" />
               </BuiButton>
             </div>
           </div>
@@ -524,7 +524,7 @@ watch(
                               {{ key }}
                             </template>
                           </div>
-                          <div v-if="enableGroupFolding" class="mt-1">
+                          <div v-if="enableGroupFolding" class="mt-[3px]">
                             <ChevronsDownUp
                               v-if="groupsOpenStateRef[key]"
                               class="text-accent h-4 w-4"

package/src/components/table/BuiTableHead.vue

@@ -12,9 +12,11 @@ const props = defineProps<{
   <th
     :class="
       cn(
-        'text-foreground relative h-10 text-left align-middle [&:has([role=checkbox])]:pr-0',
+        'text-foreground relative h-14 text-left align-middle [&:has([role=checkbox])]:pr-0',
         props.class,
-        props.freezeHeader ? 'bg-background p-0' : 'bg-foreground/4 p-0'
+        props.freezeHeader
+          ? 'bg-background p-0'
+          : 'bg-foreground/4 hover:bg-foreground/8 dark:hover:bg-accent/16 p-0'
       )
     "
   >
@@ -23,7 +25,7 @@ const props = defineProps<{
         <div
           class="border-border/16! flex h-full items-center border-b!"
           :class="{
-            'bg-foreground/4': props.freezeHeader,
+            'bg-foreground/4 hover:bg-foreground/8 dark:hover:bg-accent/16': props.freezeHeader,
             'header-cell_wrapper': !props.freezeHeader
           }"
         >
@@ -41,7 +43,7 @@ const props = defineProps<{
       v-else
       class="border-border/16! flex h-full items-center border-b!"
       :class="{
-        'bg-foreground/4': props.freezeHeader,
+        'bg-foreground/4 hover:bg-foreground/8 dark:hover:bg-accent/16': props.freezeHeader,
         'header-cell_wrapper': !props.freezeHeader
       }"
     >

package/src/components/table/BuiTableRow.vue

@@ -3,6 +3,7 @@ import { BuiContextMenu, BuiContextMenuTrigger } from '@/components/context-menu
 import { cn } from '@/lib/utils'
 
 const props = defineProps<{ class?: string }>()
+const emits = defineEmits(['mouseenter', 'mouseleave'])
 </script>
 
 <template>
@@ -11,11 +12,13 @@ const props = defineProps<{ class?: string }>()
       <tr
         :class="
           cn(
-            'border-border/8 data-[row-state=selected]:bg-accent/4 border-b transition-colors',
+            'border-border/8 data-[row-state=selected]:bg-accent/8 border-b transition-colors',
             props.class
           )
         "
         :data-row-state="$attrs['data-row-state']"
+        @mouseenter="emits('mouseenter')"
+        @mouseleave="emits('mouseleave')"
       >
         <slot />
       </tr>
@@ -26,11 +29,13 @@ const props = defineProps<{ class?: string }>()
     v-else
     :class="
       cn(
-        'border-border/8 data-[row-state=selected]:bg-accent/4 border-b transition-colors',
+        'border-border/8 data-[row-state=selected]:bg-accent/8 border-b transition-colors',
         props.class
       )
     "
     :data-row-state="$attrs['data-row-state']"
+    @mouseenter="emits('mouseenter')"
+    @mouseleave="emits('mouseleave')"
   >
     <slot />
   </tr>

package/src/components/table/BuiTableRowSubrow.vue

@@ -2,7 +2,8 @@
 import { BuiTableCell, BuiTableRow } from '@/components/table'
 import { FlexRender, type ColumnDef, type Row } from '@tanstack/vue-table'
 import { getPinningStyle } from './'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<{
   row: Row<TData>
@@ -16,13 +17,19 @@ const isEmptyRow = computed(() => {
   // @ts-expect-error name с таким значением это наше внутреннее соглашение. См. Боцман Дашборд, таблицу Projects/Namespaces
   return props.row.original.name?.includes(FAKE_ROW)
 })
+
+const isHovered = ref<boolean>(false)
 </script>
 
 <template>
   <BuiTableRow
     v-if="!isEmptyRow"
     :data-row-state="row.getIsSelected() ? 'selected' : undefined"
-    :class="props.renderSubComponent?.(row) ? 'border-b-0' : ''"
+    :class="
+      cn(props.renderSubComponent?.(row) ? 'border-b-0' : '', isHovered ? 'bg-accent/4!' : '')
+    "
+    @mouseenter="isHovered = true"
+    @mouseleave="isHovered = false"
   >
     <BuiTableCell
       v-for="cell in row.getVisibleCells()"
@@ -39,6 +46,9 @@ const isEmptyRow = computed(() => {
   <BuiTableRow
     v-if="props.renderSubComponent?.(row)"
     :data-row-state="row.getIsSelected() ? 'selected' : undefined"
+    :class="cn(isHovered ? 'bg-accent/4!' : '')"
+    @mouseenter="isHovered = true"
+    @mouseleave="isHovered = false"
   >
     <BuiTableCell :colspan="columns.length" class="pt-0">
       <component :is="props.renderSubComponent?.(row)?.()"></component>

package/src/components/tabs/index.ts

@@ -8,7 +8,7 @@ import { cva } from 'class-variance-authority'
 export const tabsListVariants = cva('inline-flex items-center justify-center rounded-md p-1', {
   variants: {
     variant: {
-      default: 'bg-muted text-muted-foreground p-0',
+      default: 'bg-foreground/4 dark:bg-white/4 text-muted-foreground p-0',
       ghost: 'bg-background bg-text-foreground',
       vertical:
         'w-70 shrink-0 bg-tabs-sidebar text-muted-foreground p-0 flex flex-col justify-start rounded-none shadow-tab-sidebar-shadow'
@@ -20,16 +20,16 @@ export const tabsListVariants = cva('inline-flex items-center justify-center rou
 })
 
 export const tabsTriggerVariants = cva(
-  'inline-flex items-center justify-center px-3 py-1 text-sm font-semibold ring-offset-background transition-all focus-visible:outline-hidden 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 text-sm font-semibold ring-offset-background transition-all focus-visible:outline-hidden 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:
-          'whitespace-nowrap rounded-sm text-foreground opacity-[0.56] hover:opacity-100 data-[state=active]:opacity-100 data-[state=active]:bg-background my-1 first:ml-1 last:mr-1 data-[state=active]:shadow-tab-shadow',
+          'h-10 px-5 py-2.5 whitespace-nowrap rounded-sm text-foreground opacity-[0.56] hover:opacity-100 data-[state=active]:opacity-100 data-[state=active]:bg-background data-[state=active]:shadow-tab data-[state=active]:border data-[state=active]:border-primary/16 dark:data-[state=active]:border-white/16 border border-transparent',
         ghost:
-          'whitespace-nowrap border-transparent text-muted-foreground pb-0 [&_div]:pb-0.5 data-[state=active]:[&_div]:border-b-2 data-[state=active]:[&_div]:border-primary',
+          'px-3 py-1 whitespace-nowrap border-transparent text-muted-foreground pb-0 [&_div]:pb-0.5 data-[state=active]:[&_div]:border-b-2 data-[state=active]:[&_div]:border-primary hover:text-foreground',
         vertical:
-          'border-transparent text-primary data-[state=active]:border-primary data-[state=active]:bg-background data-[state=active]:shadow-tab-sidebar-shadow border-l-2 border-b-0 w-full h-fit justify-start pl-6!'
+          'px-3 py-1 border-transparent text-primary data-[state=active]:border-primary data-[state=active]:bg-background data-[state=active]:shadow-tab-sidebar-shadow border-l-2 border-b-0 w-full h-fit justify-start pl-6! hover:bg-primary/16'
       }
     },
     defaultVariants: {

package/src/lib/utils.ts

@@ -42,7 +42,7 @@ export const tableColumnSortCommon = (
     },
     () => [
       h('div', { class: 'whitespace-normal break-normal' }, [name]),
-      h(icon, { class: 'ml-1 h-4 w-4 text-muted-foreground shrink-0' })
+      h(icon, { class: 'ml-1 h-4 w-4 text-muted-foreground shrink-0 hover:text-primary' })
     ]
   )
 }

package/src/stories/components/BuiDataTableStory.vue

@@ -216,29 +216,37 @@ function groupName(group: string | number) {
         }"
       >
         <template #caption="{ table }">
-          <div class="flex justify-between">
-            <BuiButton variant="outline">Download YAML</BuiButton>
-            <BuiButton variant="outline" @click="updateRows"> Delete row </BuiButton>
-            <BuiButton variant="outline" @click="deleteRow"> Update rows </BuiButton>
+          <div class="flex h-fit items-center justify-between">
+            <div class="flex h-full flex-row items-center gap-3">
+              <BuiButton variant="outline" class="h-10 px-5 py-2">Download YAML</BuiButton>
+              <BuiButton variant="outline" class="h-10 px-5 py-2" @click="updateRows">
+                Delete row
+              </BuiButton>
+              <BuiButton variant="outline" class="h-10 px-5 py-2" @click="deleteRow">
+                Update rows
+              </BuiButton>
+            </div>
 
-            <BuiTabs v-model="groupBy">
-              <BuiTabsList class="grid w-full grid-cols-3" variant="default">
-                <BuiTabsTrigger value="none" variant="default" class="px-2 py-[5px]">
-                  <AlignJustifyIcon :size="14" />
-                </BuiTabsTrigger>
-                <BuiTabsTrigger value="status" variant="default" class="px-2 py-[5px]">
-                  <FolderIcon :size="14" />
-                </BuiTabsTrigger>
-                <BuiTabsTrigger value="priority" variant="default" class="px-2 py-[5px]">
-                  <ArrowUpNarrowWideIcon :size="14" />
-                </BuiTabsTrigger>
-              </BuiTabsList>
-            </BuiTabs>
+            <div class="flex h-full flex-row items-center gap-3">
+              <BuiTabs v-model="groupBy">
+                <BuiTabsList class="grid w-full grid-cols-3" variant="default">
+                  <BuiTabsTrigger value="none" variant="default">
+                    <AlignJustifyIcon :size="16" />
+                  </BuiTabsTrigger>
+                  <BuiTabsTrigger value="status" variant="default">
+                    <FolderIcon :size="16" />
+                  </BuiTabsTrigger>
+                  <BuiTabsTrigger value="priority" variant="default">
+                    <ArrowUpNarrowWideIcon :size="16" />
+                  </BuiTabsTrigger>
+                </BuiTabsList>
+              </BuiTabs>
 
-            <span>
-              {{ table.getFilteredSelectedRowModel().rows?.length }} of
-              {{ table.getFilteredRowModel().rows?.length }} row(s) selected
-            </span>
+              <span>
+                {{ table.getFilteredSelectedRowModel().rows?.length }} of
+                {{ table.getFilteredRowModel().rows?.length }} row(s) selected
+              </span>
+            </div>
           </div>
         </template>
         <template #nodata>No data</template>

package/src/theme.css

@@ -65,6 +65,26 @@
 
   --color-tooltip: var(--tooltip);
   --color-tooltip-link: var(--tooltip-link);
+
+  --color-snow: var(--snow);
+  --color-light-violet: var(--light-violet);
+  --color-dark-violet: var(--dark-violet);
+  --color-spring-green: var(--spring-green);
+  --color-code-green: var(--code-green);
+  --color-vivid-tangerine: var(--vivid-tangerine);
+  --color-sulphur: var(--sulphur);
+  --color-mustard: var(--mustard);
+  --color-homeworld: var(--homeworld);
+  --color-app-rancher: var(--primary);
+  --color-app-partner: rgb(254, 164, 36);
+  --color-app-color1: rgb(225, 45, 74);
+  --color-app-color2: rgb(212, 66, 148);
+  --color-app-color3: rgb(0, 169, 217);
+  --color-app-color4: rgb(244, 136, 68);
+  --color-app-color5: rgb(0, 147, 128);
+  --color-app-color6: rgb(136, 81, 165);
+  --color-app-color7: rgb(45, 47, 149);
+  --color-app-color8: rgb(255, 235, 0);
 }
 
 @keyframes accordion-down {
@@ -150,16 +170,16 @@
   --accent: hsl(241 92% 71%);
   --accent-foreground: hsl(241 76% 62%);
 
-  --destructive: hsl(328, 68%, 63%, 0.16);
+  --destructive: hsl(328, 68%, 63%, 0.08);
   --destructive-foreground: hsl(328 68% 63%);
 
-  --success: hsl(181, 34%, 39%, 0.16);
+  --success: hsl(181, 34%, 39%, 0.08);
   --success-foreground: hsl(181 34% 39%);
 
-  --warning: hsl(48, 79%, 45%, 0.16);
+  --warning: hsl(48, 79%, 45%, 0.08);
   --warning-foreground: hsl(48 79% 45%);
 
-  --info: hsl(198, 85%, 45%, 0.16);
+  --info: hsl(198, 85%, 45%, 0.08);
   --info-foreground: hsl(198 85% 45%);
 
   --ring: hsl(241 92% 71%);
@@ -168,6 +188,16 @@
 
   --tooltip: hsl(225 5% 47%);
   --tooltip-link: hsl(241 100% 88%);
+
+  --snow: hsl(220 18% 97%);
+  --spring-green: hsl(154 85% 45%);
+  --code-green: hsl(181 34% 39%);
+  --sulphur: hsl(48 79% 45%);
+  --mustard: hsl(48 100% 33%);
+  --homeworld: hsl(198 85% 45%);
+  --light-violet: hsl(241 100% 88%);
+  --dark-violet: hsl(241 92% 71%);
+  --vivid-tangerine: hsl(14 100% 77%);
 }
 
 .dark {
@@ -208,4 +238,37 @@
 
   --success: hsl(154, 84%, 45%, 0.16);
   --success-foreground: hsl(181 35% 49%);
+
+  --snow: hsl(241 92% 71%);
+  --spring-green: hsl(154 85% 45%);
+  --code-green: hsl(181 35% 49%);
+  --sulphur: hsl(48 79% 45%);
+  --mustard: hsl(48 100% 33%);
+  --homeworld: hsl(198 85% 45%);
+  --light-violet: hsl(241 100% 88%);
+  --dark-violet: hsl(241 92% 71%);
+  --vivid-tangerine: hsl(14 100% 77%);
+}
+
+/* components styles moved here */
+@layer utilities {
+  /* BuiColorPicker */
+  [data-color-picker-background] {
+    background-image:
+      linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%),
+      linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);
+  }
+
+  [data-color-picker-track] {
+    background-image: linear-gradient(
+      0deg,
+      red 0,
+      #f0f 17%,
+      #00f 33%,
+      #0ff 50%,
+      #0f0 67%,
+      #ff0 83%,
+      red
+    );
+  }
 }

package/dist/BuiTableRow.vue_vue_type_script_setup_true_lang-DVZltB3S.js

@@ -1,49 +0,0 @@
-import { defineComponent as l, createBlock as i, createElementBlock as m, openBlock as o, unref as e, withCtx as r, createVNode as f, renderSlot as a, createElementVNode as _, normalizeClass as c } from "vue";
-import { _ as p } from "./BuiContextMenu.vue_vue_type_script_setup_true_lang-CGtCNQsI.js";
-import { _ as b } from "./BuiContextMenuTrigger.vue_vue_type_script_setup_true_lang-hfu_w_27.js";
-import { g as n } from "./utils-DIEJYj9K.js";
-const w = ["data-row-state"], u = ["data-row-state"], C = /* @__PURE__ */ l({
-  __name: "BuiTableRow",
-  props: {
-    class: {}
-  },
-  setup(d) {
-    const s = d;
-    return (t, $) => t.$slots.actions ? (o(), i(e(p), { key: 0 }, {
-      default: r(() => [
-        f(e(b), { "as-child": "" }, {
-          default: r(() => [
-            _("tr", {
-              class: c(
-                e(n)(
-                  "border-border/8 data-[row-state=selected]:bg-accent/4 border-b transition-colors",
-                  s.class
-                )
-              ),
-              "data-row-state": t.$attrs["data-row-state"]
-            }, [
-              a(t.$slots, "default")
-            ], 10, w)
-          ]),
-          _: 3
-        }),
-        a(t.$slots, "actions")
-      ]),
-      _: 3
-    })) : (o(), m("tr", {
-      key: 1,
-      class: c(
-        e(n)(
-          "border-border/8 data-[row-state=selected]:bg-accent/4 border-b transition-colors",
-          s.class
-        )
-      ),
-      "data-row-state": t.$attrs["data-row-state"]
-    }, [
-      a(t.$slots, "default")
-    ], 10, u));
-  }
-});
-export {
-  C as _
-};