@indielayer/ui 1.13.2 → 1.14.1

package/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.13.2";
+declare const _default: "1.14.1";
 export default _default;

package/lib/version.js

@@ -1,4 +1,4 @@
-const e = "1.13.2";
+const e = "1.14.1";
 export {
   e as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indielayer/ui",
-  "version": "1.13.2",
+  "version": "1.14.1",
   "description": "Indielayer UI Components with Tailwind CSS build for Vue 3",
   "author": {
     "name": "João Teixeira",

package/src/components/button/theme/Button.base.theme.ts

@@ -3,7 +3,7 @@ import type { ButtonTheme } from '../Button.vue'
 const theme: ButtonTheme = {
   classes: {
     wrapper({ props, slots, data }) {
-      const classes = ['relative transition duration-150 focus:outline-none inline-flex items-center justify-center font-medium whitespace-nowrap overflow-hidden align-middle active:!shadow-none border appearance-none shrink-0']
+      const classes = ['relative transition duration-150 focus-visible:outline-secondary-300 outline-transparent outline outline-1 outline-offset-2 inline-flex items-center justify-center font-medium whitespace-nowrap overflow-hidden align-middle active:!shadow-none border appearance-none shrink-0']
 
       // radius
       if (!data.isButtonGroup) classes.push(props.rounded ? 'rounded-full' : 'rounded-md')

package/src/components/menu/MenuItem.vue

@@ -60,6 +60,7 @@ import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 
 import XIcon from '../../components/icon/Icon.vue'
 import XSpinner from '../../components/spinner/Spinner.vue'
+import XCheckbox from '../../components/checkbox/Checkbox.vue'
 
 import type { MenuArrayItem } from './Menu.vue'
 

package/src/components/radio/theme/Radio.base.theme.ts

@@ -11,7 +11,7 @@ const theme: RadioTheme = {
     },
 
     circle: ({ props }) => {
-      const classes = ['rounded-full flex justify-center items-center shrink-0 border outline-offset-2 outline-slate-300 dark:outline-slate-500 group-focus:outline-1 group-focus:outline']
+      const classes = ['rounded-full flex justify-center items-center shrink-0 border outline-offset-2 outline-slate-300 dark:outline-slate-500 group-focus-visible:outline-1 group-focus-visible:outline']
 
       if (props.size === 'lg') classes.push('h-5 w-5')
       else if (props.size === 'xl') classes.push('h-6 w-6')

package/src/components/select/Select.vue

@@ -216,20 +216,35 @@ function findSelectableIndex(start: number | undefined, direction = 'down') {
     start = direction === 'down' ? -1 : 1
   }
 
+  const totalOptions = internalOptions.value.length
+  let checked = 0
+
   if (direction === 'down') {
     let next = start + 1
 
-    if (next > internalOptions.value.length - 1) next = 0
+    if (next > totalOptions - 1) next = 0
     while (internalOptions.value[next].disabled) {
-      if (++next > internalOptions.value.length - 1) next = 0
+      if (++next > totalOptions - 1) next = 0
+      if (++checked >= totalOptions) {
+        // All options are disabled, break to avoid infinite loop
+        selectedIndex.value = undefined
+
+        return
+      }
     }
     selectedIndex.value = next
   } else {
     let next = start - 1
 
-    if (next < 0) next = internalOptions.value.length - 1
+    if (next < 0) next = totalOptions - 1
     while (internalOptions.value[next].disabled) {
-      if (--next < 0) next = internalOptions.value.length - 1
+      if (--next < 0) next = totalOptions - 1
+      if (++checked >= totalOptions) {
+        // All options are disabled, break to avoid infinite loop
+        selectedIndex.value = undefined
+
+        return
+      }
     }
     selectedIndex.value = next
   }
@@ -286,7 +301,7 @@ function isEmpty(value: string | number | []) {
 function handleRemove(e: Event, value: string) {
   e.stopPropagation()
 
-  if (isDisabled.value) return
+  if (isDisabled.value || !Array.isArray(selected.value)) return
 
   // find value in selected and remove it
   const index = selected.value.indexOf(value)

package/src/components/table/Table.vue

@@ -44,6 +44,12 @@ const tableProps = {
     default: 5,
   },
   keyProp: String,
+  selectable: Boolean,
+  singleSelect: Boolean,
+  autoClearSelected: {
+    type: Boolean,
+    default: true,
+  },
 }
 
 export type TableHeader = {
@@ -81,6 +87,7 @@ import XSkeleton from '../skeleton/Skeleton.vue'
 import type { SkeletonShape } from '../skeleton/Skeleton.vue'
 
 import XIcon from '../icon/Icon.vue'
+import XCheckbox from '../checkbox/Checkbox.vue'
 
 import { chevronDownIcon } from '../../common/icons'
 
@@ -92,8 +99,7 @@ const props = defineProps({
   },
 })
 
-const selected = defineModel<number | string>('selected')
-const hasSelected = computed(() => typeof selected.value !== 'undefined')
+const selected = defineModel<(number | string) | (number | string)[]>('selected')
 
 type internalT = T & {
   __expanded?: boolean;
@@ -122,10 +128,6 @@ const { list, containerProps, wrapperProps } = useVirtualList(
 
 const internalItems = ref<internalT[]>([])
 
-watch(items, (newValue) => {
-  if (props.expandable) internalItems.value = clone(newValue as any) as internalT[]
-}, { immediate: true })
-
 const emit = defineEmits(['update:sort', 'click-row'])
 
 function getSort(headerValue: string | undefined, sort: string[]): TableHeaderSort {
@@ -179,6 +181,81 @@ function getValue(item: any, path: string | string[] | undefined) {
   return result ?? ''
 }
 
+const allKeys = computed<(number | string)[]>(() => {
+  if (!props.selectable) return []
+
+  return items.value.map((item, index) => props.keyProp ? (item as Record<string, unknown>)[props.keyProp] : index) as (number | string)[]
+})
+
+const allRowsSelected = computed(() => {
+  if (!props.selectable || props.singleSelect) return false
+
+  return Array.isArray(selected.value) && selected.value.length > 0 && allKeys.value.length > 0 && selected.value.length === allKeys.value.length
+})
+
+const someRowsSelected = computed(() => {
+  if (!props.selectable || props.singleSelect) return false
+
+  return Array.isArray(selected.value) && selected.value.length > 0 && allKeys.value.length > 0 && selected.value.length !== allKeys.value.length
+})
+
+function isRowSelected(rowKey: any) {
+  if (!props.selectable) return false
+  if (props.singleSelect) {
+    return selected.value === rowKey
+  } else {
+    return Array.isArray(selected.value) && selected.value.includes(rowKey)
+  }
+}
+
+function toggleRowSelection(rowKey: any) {
+  if (!props.selectable) return
+  if (props.singleSelect) {
+    selected.value = selected.value === rowKey ? undefined : rowKey
+  } else {
+    if (!Array.isArray(selected.value)) selected.value = []
+    if (selected.value.includes(rowKey)) {
+      selected.value = selected.value.filter((k: any) => k !== rowKey)
+    } else {
+      selected.value = [...selected.value, rowKey]
+    }
+  }
+}
+
+function toggleSelectAll() {
+  if (!props.selectable || props.singleSelect) return
+
+  if (allRowsSelected.value || someRowsSelected.value) {
+    selected.value = []
+  } else {
+    selected.value = allKeys.value
+  }
+}
+
+function onTableRowClick(item: any, index: number) {
+  if (props.selectable && props.singleSelect) {
+    toggleRowSelection(props.keyProp ? (item as Record<string, unknown>)[props.keyProp] : index)
+  }
+
+  emit('click-row', item, index)
+}
+
+watch(items, (newValue) => {
+  if (props.expandable) internalItems.value = clone(newValue as any) as internalT[]
+
+  if (props.selectable && props.autoClearSelected) {
+    if (props.singleSelect) {
+      if (!allKeys.value.includes(selected.value as any)) {
+        selected.value = undefined
+      }
+    } else {
+      if (Array.isArray(selected.value)) {
+        selected.value = selected.value.filter((k: any) => allKeys.value.includes(k))
+      }
+    }
+  }
+}, { immediate: true })
+
 const { styles, classes, className } = useTheme('Table', {}, props)
 </script>
 
@@ -192,6 +269,7 @@ const { styles, classes, className } = useTheme('Table', {}, props)
 
     <div
       v-bind="wrapperProps"
+      class="relative"
       :class="{
         '!h-auto': props.loading
       }"
@@ -201,6 +279,16 @@ const { styles, classes, className } = useTheme('Table', {}, props)
         :class="classes.table"
       >
         <x-table-head :sticky-header="stickyHeader">
+          <x-table-header v-if="props.selectable && !props.singleSelect" width="40" class="!pl-3.5 !pr-0.5 !py-2.5 cursor-pointer" @click="toggleSelectAll">
+            <x-checkbox
+              :model-value="allRowsSelected || someRowsSelected"
+              :indeterminate="someRowsSelected"
+              hide-footer
+              aria-label="Select all rows"
+              skip-form-registry
+              @click.prevent.stop="toggleSelectAll"
+            />
+          </x-table-header>
           <x-table-header v-if="expandable" width="48" class="!p-0"/>
           <x-table-header
             v-for="(header, index) in headers"
@@ -259,13 +347,23 @@ const { styles, classes, className } = useTheme('Table', {}, props)
               </td>
             </tr>
           </template>
-          <template v-for="(item, index) in list" v-else :key="keyProp ?? index">
+          <template v-for="(item, index) in list" v-else :key="keyProp ? (item.data as Record<string, unknown>)[keyProp] : item.index">
             <x-table-row
               :pointer="pointer"
               :striped="striped"
-              :selected="hasSelected ? selected === (keyProp ? (item.data as Record<string, unknown>)[keyProp] : item.index) : undefined"
-              @click="$emit('click-row', item.data, item.index)"
+              :selected="isRowSelected(keyProp ? (item.data as Record<string, unknown>)[keyProp] : item.index)"
+              :single-select="singleSelect"
+              @click="onTableRowClick(item.data, item.index)"
             >
+              <x-table-cell v-if="props.selectable && !singleSelect" width="40" class="!pl-3.5 !pr-0.5 cursor-pointer" @click.stop="toggleRowSelection(keyProp ? (item.data as Record<string, unknown>)[keyProp] : item.index)">
+                <x-checkbox
+                  :model-value="isRowSelected(keyProp ? (item.data as Record<string, unknown>)[keyProp] : item.index)"
+                  hide-footer
+                  :aria-label="`Select row ${index + 1}`"
+                  skip-form-registry
+                  @click.prevent.stop="toggleRowSelection(keyProp ? (item.data as Record<string, unknown>)[keyProp] : item.index)"
+                />
+              </x-table-cell>
               <x-table-cell v-if="expandable" width="48" class="!p-1">
                 <button
                   type="button"
@@ -311,13 +409,13 @@ const { styles, classes, className } = useTheme('Table', {}, props)
             </tr>
           </template>
         </x-table-body>
-        <div
-          v-if="loading"
-          :class="classes.loadingWrapper"
-        >
-          <x-spinner size="lg"/>
-        </div>
       </table>
+      <div
+        v-if="loading"
+        :class="classes.loadingWrapper"
+      >
+        <x-spinner size="lg"/>
+      </div>
     </div>
   </div>
 </template>

package/src/components/table/TableHeader.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 const validators = {
   sort: [1, -1, undefined] as const,
-  textAlign: ['left', 'center', 'right', 'justify'] as const,
+  textAlign: ['left', 'center', 'right'] as const,
 }
 
 const tableHeaderProps = {
@@ -41,17 +41,19 @@ const { styles, classes, className } = useTheme('TableHeader', {}, props)
 <template>
   <th :style="styles" :class="[className, classes.th, 'group/th']">
     <div :class="classes.header">
-      <slot></slot>
-
-      <x-toggle-tip v-if="tooltip" :content="tooltip"/>
+      <div class="flex items-center gap-1">
+        <slot></slot>
+        <x-toggle-tip v-if="tooltip" :content="tooltip"/>
+      </div>
 
       <svg
         v-if="sortable"
         class="shrink-0"
         :class="[
           classes.sortIcon,
+          textAlign === 'right' ? '-mr-4 -translate-x-4' : '-ml-4 translate-x-4',
           [sort && [1, -1].includes(sort) ? '' : 'invisible group-hover/th:visible'],
-          [sort !== -1 && sort !== 1 ? 'text-secondary-400' : 'text-primary-700']
+          [sort !== -1 && sort !== 1 ? 'text-secondary-400 dark:text-secondary-500' : 'text-primary-700 dark:text-primary-400']
         ]"
         width="24"
         height="24"

package/src/components/table/TableRow.vue

@@ -7,6 +7,7 @@ const tableRowProps = {
   pointer: Boolean,
   striped: Boolean,
   selected: Boolean,
+  singleSelect: Boolean,
   verticalAlign: {
     type: String as PropType<'baseline' | 'bottom' | 'middle' | 'text-bottom' | 'text-top' | 'top'>,
     default: 'top',

package/src/components/table/theme/TableHeader.base.theme.ts

@@ -14,9 +14,10 @@ const theme: TableHeaderTheme = {
       const classes = ['flex items-center gap-1 select-none']
 
       if (props.textAlign === 'left') classes.push('justify-start')
-      if (props.textAlign === 'right') classes.push('justify-end')
-      if (props.textAlign === 'center') classes.push('justify-center')
-      if (props.textAlign === 'justify') classes.push('justify-center')
+      else if (props.textAlign === 'right') {
+        if (props.sortable) classes.push('flex-row-reverse')
+        else classes.push('justify-end')
+      } else if (props.textAlign === 'center') classes.push('justify-center')
 
       return classes
     },

package/src/components/table/theme/TableHeader.carbon.theme.ts

@@ -10,7 +10,6 @@ const theme: TableHeaderTheme = {
       if (props.textAlign === 'left') classes.push('text-left')
       if (props.textAlign === 'right') classes.push('text-right')
       if (props.textAlign === 'center') classes.push('text-center')
-      if (props.textAlign === 'justify') classes.push('text-justify')
 
       return classes
     },

package/src/components/table/theme/TableRow.base.theme.ts

@@ -5,8 +5,8 @@ const theme: TableRowTheme = {
     row: ({ props }) => {
       const classes = []
 
-      if (props.selected) {
-        classes.push('shadow-[inset_2px_0] shadow-primary-500')
+      if (props.selected && props.singleSelect) {
+        classes.push('shadow-[inset_2px_0] shadow-primary-500 !bg-secondary-50 dark:!bg-secondary-600')
       }
 
       if (props.striped) {

package/src/composables/useFocusTrap.ts

@@ -1,83 +1,114 @@
-import type { ComponentPublicInstance } from 'vue'
-import { onUnmounted, type MaybeRef, unref, nextTick } from 'vue'
+import { onUnmounted, unref, nextTick, watch, ref, type Ref, type ComponentPublicInstance } from 'vue'
 
 const focusableQuery = 'button:not([tabindex="-1"]), [href], input, select, textarea, li, a, [tabindex]:not([tabindex="-1"])'
 
 export function useFocusTrap() {
-  let focusable: HTMLElement[] = []
+  const focusable = ref<HTMLElement[]>([])
   let observer: MutationObserver | null = null
 
   let firstFocusableEl: HTMLElement | null = null
   let lastFocusableEl: HTMLElement | null = null
+  let prevActiveElement: HTMLElement | null = null
+  let currentTarget: HTMLElement | ComponentPublicInstance | null = null
 
-  async function initFocusTrap(targetRef: MaybeRef<HTMLElement | ComponentPublicInstance | null>) {
-    targetRef = unref(targetRef)
+  function getEl(target: HTMLElement | ComponentPublicInstance | null): HTMLElement | null {
+    if (!target) return null
 
-    if (!targetRef) return
+    return (target as ComponentPublicInstance).$el
+      ? (target as ComponentPublicInstance).$el as HTMLElement
+      : target as HTMLElement
+  }
 
-    await nextTick()
+  function getFocusableElements(target: HTMLElement | ComponentPublicInstance | null) {
+    const el = getEl(target)
 
-    getFocusableElements(targetRef)
+    if (!el) return
+    const elements = el.querySelectorAll(focusableQuery)
 
-    if (firstFocusableEl) firstFocusableEl.focus()
+    focusable.value = Array.from(elements) as HTMLElement[]
+    firstFocusableEl = focusable.value[0] || null
+    lastFocusableEl = focusable.value[focusable.value.length - 1] || null
+  }
 
-    document.addEventListener('keydown', handleKeydown)
-    observer = new MutationObserver(() => getFocusableElements(targetRef))
+  const handleKeydown = (event: KeyboardEvent) => {
+    if (event.key !== 'Tab' || focusable.value.length === 0) return
 
-    if ((targetRef as ComponentPublicInstance).$el) observer.observe((targetRef as ComponentPublicInstance).$el as Node, { childList: true, subtree: true })
-    else observer.observe(targetRef as Node, { childList: true, subtree: true })
-  }
+    const isShiftPressed = event.shiftKey
+    const currentEl = document.activeElement as HTMLElement | null
 
-  function getFocusableElements(targetRef: MaybeRef<HTMLElement | ComponentPublicInstance | null>) {
-    if (targetRef === null) return
+    const firstEl = firstFocusableEl
+    const lastEl = lastFocusableEl
 
-    let elements
+    if (!currentEl) {
+      event.preventDefault()
+      firstEl?.focus()
 
-    if ((targetRef as ComponentPublicInstance).$el) elements = (targetRef as ComponentPublicInstance)?.$el.querySelectorAll(focusableQuery)
-    else (targetRef as HTMLElement).querySelectorAll(focusableQuery)
+      return
+    }
 
-    focusable = Array.from(elements || []) as HTMLElement[]
-    firstFocusableEl = focusable[0] || null
-    lastFocusableEl = focusable[focusable.length - 1] || null
+    if (!isShiftPressed && currentEl === lastEl) {
+      event.preventDefault()
+      firstEl?.focus()
+    } else if (isShiftPressed && currentEl === firstEl) {
+      event.preventDefault()
+      lastEl?.focus()
+    }
   }
 
-  const handleKeydown = (event: KeyboardEvent) => {
-    if (event.key === 'Tab') {
-      const isShiftPressed = event.shiftKey
-      const currentEl = document.activeElement as HTMLElement | null
+  async function initFocusTrap(
+    targetRef: Ref<HTMLElement | ComponentPublicInstance | null> | HTMLElement | ComponentPublicInstance | null,
+    options?: { initialFocusIndex?: number; returnFocusOnClear?: boolean; },
+  ) {
+    if (typeof window === 'undefined') return
 
-      if (!currentEl) {
-        event.preventDefault()
-        focusable[0]?.focus()
+    // Clean up previous trap if any
+    clearFocusTrap()
+
+    prevActiveElement = document.activeElement as HTMLElement
 
-        return
-      }
+    currentTarget = unref(targetRef)
+    if (!currentTarget) return
 
-      const firstEl = focusable[0]
-      const lastEl = focusable[focusable.length - 1]
+    await nextTick()
+    getFocusableElements(currentTarget)
 
-      if (!isShiftPressed && currentEl === lastEl) {
-        event.preventDefault()
-        firstEl?.focus()
-      } else if (isShiftPressed && currentEl === firstEl) {
-        event.preventDefault()
-        lastEl?.focus()
-      }
+    // Focus initial element
+    const idx = options?.initialFocusIndex ?? 0
 
+    focusable.value[idx]?.focus()
+
+    document.addEventListener('keydown', handleKeydown)
+    observer = new MutationObserver(() => getFocusableElements(currentTarget))
+    const el = getEl(currentTarget)
+
+    if (el) observer.observe(el, { childList: true, subtree: true })
+
+    // If targetRef is a Ref, watch for changes
+    if (typeof targetRef === 'object' && targetRef !== null && 'value' in targetRef) {
+      watch(targetRef, (newVal) => {
+        clearFocusTrap()
+        if (newVal !== null) initFocusTrap(targetRef, options)
+      })
     }
   }
 
-  const clearFocusTrap = () => {
+  function clearFocusTrap(options?: { returnFocus?: boolean; }) {
     document.removeEventListener('keydown', handleKeydown)
     observer?.disconnect()
+    observer = null
+    if (options?.returnFocus && prevActiveElement) {
+      prevActiveElement.focus()
+    }
+    currentTarget = null
   }
 
   onUnmounted(() => {
-    clearFocusTrap()
+    clearFocusTrap({ returnFocus: true })
   })
 
   return {
     initFocusTrap,
     clearFocusTrap,
+    focusable, // expose for advanced use
   }
 }

package/src/version.ts

@@ -1 +1 @@
-export default '1.13.2'
+export default '1.14.1'