@soft-stech/bootsman-ui-shadcn 2.0.13 → 2.0.15

package/src/components/input/BuiInput.vue

@@ -2,8 +2,10 @@
 import { FORM_READONLY_INJECTION_KEY } from '@/components/form'
 import { cn } from '@/lib/utils'
 import { useVModel } from '@vueuse/core'
-import { inject, ref, toRef, type HTMLAttributes } from 'vue'
+import { inject, ref, toRef, useTemplateRef, type HTMLAttributes } from 'vue'
 import { inputVariants } from '.'
+import BuiButton from '@/components/button/BuiButton.vue'
+import { X } from 'lucide-vue-next'
 
 const props = defineProps<{
   defaultValue?: string | number
@@ -29,6 +31,7 @@ const modelValue = useVModel(props, 'modelValue', emits, {
 const readonlyContext = inject(FORM_READONLY_INJECTION_KEY, toRef(false))
 
 const isFocused = ref<boolean>(false)
+const searchInput = useTemplateRef<HTMLElement>('searchInput')
 
 const handleFocus = () => {
   isFocused.value = true
@@ -44,10 +47,47 @@ const handleKeyDown = (e: KeyboardEvent) => {
     }
   }
 }
+
+const handleClear = () => {
+  if (searchInput.value) {
+    searchInput.value.focus()
+    modelValue.value = ''
+  }
+}
 </script>
 
 <template>
+  <div v-if="props.type === 'search'" class="group relative flex flex-row items-center">
+    <input
+      ref="searchInput"
+      v-model="modelValue"
+      :class="
+        cn(
+          inputVariants({ variant }),
+          props.class ?? '',
+          'pr-6',
+          !props.variant || props.variant === 'default' ? 'group-hover:border-primary' : ''
+        )
+      "
+      :readonly="readonlyContext || props.readonly"
+      :disabled="props.disabled"
+      :placeholder="props.placeholder"
+      type="text"
+      @focus="handleFocus"
+      @blur="handleBlur"
+      @keydown="handleKeyDown"
+    />
+    <BuiButton
+      v-if="modelValue && modelValue.toString().length > 0"
+      variant="none"
+      class="hover:text-primary text-foreground invisible absolute top-2 right-2 h-fit w-fit p-[1px] group-hover:visible"
+      @click="handleClear"
+    >
+      <X :size="14" class="pointer-events-none shrink-0" />
+    </BuiButton>
+  </div>
   <input
+    v-else
     v-model="modelValue"
     :class="cn(inputVariants({ variant }), props.class ?? '')"
     :readonly="readonlyContext || props.readonly"

package/src/components/input/BuiPasswordInput.vue

@@ -2,10 +2,13 @@
 import { BuiInput } from '@/components/input/index'
 import { cn } from '@/lib/utils'
 import { EyeIcon, EyeOffIcon } from 'lucide-vue-next'
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
+import BuiButton from '@/components/button/BuiButton.vue'
 
 const props = defineProps<{
   defaultValue?: 'password' | 'text'
+  showPasswordTranslation?: string
+  hidePasswordTranslation?: string
 }>()
 
 defineOptions({
@@ -20,20 +23,26 @@ function togglePasswordShow() {
     type.value = 'password'
   }
 }
+
+const showPasswordText = computed(() => props.showPasswordTranslation ?? 'Show password')
+const hidePasswordText = computed(() => props.hidePasswordTranslation ?? 'Hide password')
 </script>
 
 <template>
   <div class="relative flex">
     <BuiInput v-bind="$attrs" :type="type" :class="cn($attrs.class ?? '', 'pr-8')" />
-    <span
+    <BuiButton
       @click="togglePasswordShow"
-      class="absolute top-0 right-3 flex h-full items-center justify-center"
+      variant="none"
+      class="text-muted-foreground hover:text-foreground absolute top-0 right-3 flex h-full w-fit items-center justify-center p-0"
+      :aria-label="type === 'password' ? showPasswordText : hidePasswordText"
+      :aria-pressed="type !== 'password'"
     >
       <EyeIcon
         v-if="type === 'password'"
-        class="h-4 w-4 cursor-pointer opacity-[0.56] hover:opacity-100"
+        class="pointer-events-none h-4 w-4 shrink-0 cursor-pointer"
       />
-      <EyeOffIcon v-else class="h-4 w-4 cursor-pointer opacity-[0.56] hover:opacity-100" />
-    </span>
+      <EyeOffIcon v-else class="pointer-events-none h-4 w-4 shrink-0 cursor-pointer" />
+    </BuiButton>
   </div>
 </template>

package/src/components/table/BuiDataTable.vue

@@ -268,7 +268,9 @@ const {
   handleResizeControlMouseDown,
   handleResizeControlMouseUp,
   setInitialColumnWidths,
-  setProvidedCellWidths
+  setProvidedCellWidths,
+  isMouseDownOnHandler,
+  isMouseUpOnHandler
 } = useResizeColumns()
 
 onBeforeMount(() => {
@@ -383,6 +385,10 @@ watch(
 )
 
 const handleHeaderCellSorting = (header: Header<TData, unknown>) => {
+  if (isMouseDownOnHandler.value && !isMouseUpOnHandler.value) {
+    return false
+  }
+
   if (getHeaderCellSortingButton(header)) {
     header.column.toggleSorting(header.column.getIsSorted() === 'asc')
   }
@@ -466,11 +472,13 @@ const handleHeaderCellSorting = (header: Header<TData, unknown>) => {
             enableColumnResizing && index < tableHeaders.length - 1 && header.column.getCanResize()
           "
           @dblclick="resetCells"
-          @mousedown="() => handleResizeControlMouseDown(header.id, props.enableColumnResizing)"
+          @mousedown.self="
+            (e: Event) => handleResizeControlMouseDown(e, header.id, props.enableColumnResizing)
+          "
           @click.stop
           :className="
             cn(
-              'absolute top-0 right-0 h-full w-1 bg-muted-foreground opacity-0 cursor-col-resize select-none touch-none hover:opacity-50',
+              'resize-handler absolute top-0 right-0 h-full w-1 bg-muted-foreground opacity-0 cursor-col-resize select-none touch-none hover:opacity-50',
               isResizing && resizingCellId === header.id ? 'bg-primary opacity-50' : ''
             )
           "

package/src/components/table/BuiTable.vue

@@ -8,7 +8,7 @@ const props = defineProps<{ class?: string }>()
 <template>
   <BuiScrollArea class="border-border/16 w-full grow overflow-auto rounded-sm border">
     <slot name="columnVisibility" />
-    <div class="min-h-[90px]">
+    <div class="flex min-h-[90px] grow flex-col">
       <table :class="cn('h-full w-full caption-top text-sm', props.class)">
         <slot />
       </table>

package/src/lib/useResizeColumns.ts

@@ -56,7 +56,18 @@ export function useResizeColumns() {
     return undefined
   }
 
-  const handleResizeControlMouseDown = (cellId: string, enableColumnResizing: boolean) => {
+  const isMouseDownOnHandler = ref<boolean>(false)
+  const isMouseUpOnHandler = ref<boolean>(false)
+
+  const handleResizeControlMouseDown = (
+    e: Event,
+    cellId: string,
+    enableColumnResizing: boolean
+  ) => {
+    const targetHTMLElement = e.target as HTMLElement
+    isMouseDownOnHandler.value =
+      targetHTMLElement.className.includes && targetHTMLElement.className.includes('resize-handler')
+
     if (!enableColumnResizing) return
 
     isResizing.value = true
@@ -76,7 +87,11 @@ export function useResizeColumns() {
     }
   }
 
-  const handleResizeControlMouseUp = () => {
+  const handleResizeControlMouseUp = (e: Event) => {
+    const targetHTMLElement = e.target as HTMLElement
+    isMouseUpOnHandler.value =
+      targetHTMLElement.className.includes && targetHTMLElement.className.includes('resize-handler')
+
     if (!isResizing.value) return
 
     isResizing.value = false
@@ -221,6 +236,8 @@ export function useResizeColumns() {
     handleResizeControlMouseUp,
     resetCells,
     setInitialColumnWidths,
-    setProvidedCellWidths
+    setProvidedCellWidths,
+    isMouseDownOnHandler,
+    isMouseUpOnHandler
   }
 }

package/src/stories/BuiInput.stories.ts

@@ -69,3 +69,23 @@ export const ColorPicker: Story = {
     `
   })
 }
+
+export const Search: Story = {
+  render: (args) => ({
+    components: { BuiInput },
+    setup() {
+      args = {
+        ...args,
+        type: 'search',
+        placeholder: 'Filter'
+      }
+
+      return { args }
+    },
+    template: `
+      <div class="grid w-full max-w-sm items-center gap-1.5">
+        <BuiInput id="search" v-bind="args" />
+      </div>
+    `
+  })
+}