@indielayer/ui 1.14.4 → 1.15.0

package/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.14.4";
+declare const _default: "1.15.0";
 export default _default;

package/lib/version.js

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

package/package.json

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

package/src/components/avatar/Avatar.vue

@@ -78,11 +78,11 @@ const { styles, classes, className } = useTheme('Avatar', {}, props, { source })
       v-if="source"
       :alt="alt"
       :src="image"
-      class="h-full w-full"
+      class="absolute top-0 left-0 h-full w-full"
     />
 
     <span
-      v-else-if="name"
+      v-if="name"
       class="leading-none"
     >{{ initials }}</span>
 

package/src/components/avatar/theme/Avatar.base.theme.ts

@@ -22,11 +22,6 @@ const theme: AvatarTheme = {
   styles({ props, colors, css, data }) {
     const color = colors.getPalette(props.color)
 
-    if (data.source) return css.variables({
-      bg: 'transparent',
-      border: props.outlined ? color[500] : 'transparent',
-    })
-
     return css.variables({
       bg: color[100],
       text: color[500],

package/src/components/datepicker/Datepicker.vue

@@ -190,7 +190,7 @@ const { styles, classes, className } = useTheme('Datepicker', {}, props)
 
 <template>
   <div
-    :style="styles"
+    :style="[styles, { '--dp-clear-btn-top': !!label ? '2.75rem' : '1.2rem' }]"
     :class="[
       className,
       classes.wrapper,
@@ -336,7 +336,12 @@ const { styles, classes, className } = useTheme('Datepicker', {}, props)
 }
 
 .dp--clear-btn {
-  top: 2.75rem !important;
+  top: var(--dp-clear-btn-top, 2.75rem) !important;
+}
+
+.dp--clear-btn svg {
+  height: 1rem;
+  width: 1rem;
 }
 
 .dp__theme_dark {

package/src/components/drawer/Drawer.vue

@@ -137,7 +137,13 @@ function onEnter(el: Element, done: () => void) {
 
     return
   }
-  el.addEventListener('transitionend', done)
+
+  const handler = () => {
+    el.removeEventListener('transitionend', handler)
+    done()
+  }
+
+  el.addEventListener('transitionend', handler)
   setTimeout(() => {
     if (props.backdrop) el.classList.add('bg-slate-500/30')
     if (props.position === 'top') (el as HTMLElement).style.top = '0'
@@ -150,7 +156,12 @@ function onEnter(el: Element, done: () => void) {
 function onBeforeLeave(el: Element) {}
 
 function onLeave(el: Element, done: () => void) {
-  el.addEventListener('transitionend', done)
+  const handler = () => {
+    el.removeEventListener('transitionend', handler)
+    done()
+  }
+
+  el.addEventListener('transitionend', handler)
   setTimeout(() => {
     if (props.backdrop) el.classList.remove('bg-slate-500/30')
     if (props.position === 'top') (el as HTMLElement).style.top = `-${props.height}px`

package/src/components/input/Input.vue

@@ -26,6 +26,8 @@ const inputProps = {
   },
   step: [Number, String],
   block: Boolean,
+  showCounter: Boolean,
+  clearable: Boolean,
 }
 
 export type InputProps = ExtractPublicPropTypes<typeof inputProps>
@@ -49,7 +51,7 @@ import { useColors } from '../../composables/useColors'
 import { useCommon } from '../../composables/useCommon'
 import { useInputtable } from '../../composables/useInputtable'
 import { useInteractive } from '../../composables/useInteractive'
-import { eyeIcon, eyeVisibleIcon } from '../../common/icons'
+import { closeIcon, eyeIcon, eyeVisibleIcon } from '../../common/icons'
 
 import XLabel from '../label/Label.vue'
 import XIcon from '../icon/Icon.vue'
@@ -95,6 +97,8 @@ function togglePasswordVisibility() {
   currentType.value = currentType.value === 'password' ? 'text' : 'password'
 }
 
+const showClearIcon = computed(() => props.clearable && props.modelValue !== '')
+
 const { focus, blur } = useInteractive(elRef)
 
 const {
@@ -107,6 +111,12 @@ const {
   setError,
 } = useInputtable(props, { focus, emit })
 
+const currentLength = computed(() => {
+  const value = props.modelValue
+
+  return value ? String(value).length : 0
+})
+
 const { styles, classes, className } = useTheme('Input', {}, props, { errorInternal })
 
 defineExpose({ focus, blur, reset, validate, setError })
@@ -170,6 +180,14 @@ defineExpose({ focus, blur, reset, validate, setError })
       />
 
       <slot name="suffix">
+        <x-icon
+          v-if="showClearIcon"
+          :size="size"
+          :icon="closeIcon"
+          class="mr-2 right-1 cursor-pointer"
+          :class="classes.icon"
+          @click="reset()"
+        />
         <x-icon
           v-if="iconRight"
           :size="size"
@@ -188,6 +206,13 @@ defineExpose({ focus, blur, reset, validate, setError })
       </slot>
     </div>
 
-    <x-input-footer v-if="!hideFooterInternal" :error="errorInternal" :helper="helper"/>
+    <x-input-footer
+      v-if="!hideFooterInternal"
+      :error="errorInternal"
+      :helper="helper"
+      :character-count="currentLength"
+      :max-characters="maxlength"
+      :show-counter="showCounter"
+    />
   </x-label>
 </template>

package/src/components/inputFooter/InputFooter.vue

@@ -2,28 +2,60 @@
 const inputFooterProps = {
   helper: String,
   error: String,
+  characterCount: Number,
+  maxCharacters: [Number, String],
+  showCounter: Boolean,
 }
 
 export type InputFooterProps = ExtractPublicPropTypes<typeof inputFooterProps>
 
-type InternalClasses = 'wrapper' | 'helperText' | 'errorText'
+type InternalClasses = 'wrapper' | 'helperText' | 'errorText' | 'container' | 'counter'
 export interface InputFooterTheme extends ThemeComponent<InputFooterProps, InternalClasses> {}
 
 export default { name: 'XInputFooter' }
 </script>
 
 <script setup lang="ts">
+import { computed } from 'vue'
 import type { ExtractPublicPropTypes } from 'vue'
 import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 
 const props = defineProps(inputFooterProps)
 
 const { styles, classes, className } = useTheme('InputFooter', {}, props)
+
+const maxChars = computed(() => {
+  return props.maxCharacters ? Number(props.maxCharacters) : undefined
+})
+
+const counterText = computed(() => {
+  if (props.characterCount === undefined) return ''
+
+  if (maxChars.value) {
+    return `${props.characterCount}/${maxChars.value}`
+  }
+
+  return `${props.characterCount}`
+})
+
+const hasMessage = computed(() => props.error || props.helper)
 </script>
 
 <template>
   <div :class="[className, classes.wrapper]" :style="styles">
-    <p v-if="error" :class="classes.errorText">{{ error }}</p>
-    <p v-else-if="helper" :class="classes.helperText">{{ helper }}</p>
+    <div v-if="hasMessage || showCounter" :class="classes.container">
+      <div>
+        <p v-if="error" :class="classes.errorText">{{ error }}</p>
+        <p v-else-if="helper" :class="classes.helperText">{{ helper }}</p>
+      </div>
+      <p
+        v-if="showCounter"
+        :class="classes.counter"
+        role="status"
+        aria-live="polite"
+      >
+        {{ counterText }}
+      </p>
+    </div>
   </div>
 </template>

package/src/components/inputFooter/theme/InputFooter.base.theme.ts

@@ -3,8 +3,10 @@ import type { InputFooterTheme } from '../InputFooter.vue'
 const theme: InputFooterTheme = {
   classes: {
     wrapper: 'text-xs mt-1',
+    container: 'flex justify-between items-start gap-2',
     helperText: 'text-secondary-500 dark:text-secondary-400',
     errorText: 'text-error-500 dark:text-error-400',
+    counter: 'text-secondary-500 dark:text-secondary-400 whitespace-nowrap',
   },
 }
 

package/src/components/inputFooter/theme/InputFooter.carbon.theme.ts

@@ -3,8 +3,10 @@ import type { InputFooterTheme } from '../InputFooter.vue'
 const theme: InputFooterTheme = {
   classes: {
     wrapper: 'text-xs mt-1',
+    container: 'flex justify-between items-start gap-2',
     helperText: 'text-secondary-500 dark:text-secondary-400',
     errorText: 'text-error-500 dark:text-error-400',
+    counter: 'text-secondary-500 dark:text-secondary-400 whitespace-nowrap',
   },
 }
 

package/src/components/menu/MenuItem.vue

@@ -156,6 +156,7 @@ const { styles, classes, className } = useTheme('MenuItem', {}, computedProps, {
       v-if="checkbox"
       :model-value="computedProps.active"
       hide-footer
+      class="mr-1.5"
       skip-form-registry
       @click.stop.prevent="onItemClick($event, 'checkbox-click')"
     />

package/src/components/select/Select.vue

@@ -110,19 +110,32 @@ const selected = computed<any | any[]>({
   },
 })
 
+const labelCache = computed(() => {
+  if (!props.options) return new Map<SelectOption, string>()
+
+  return new Map(props.options.map((option) => [option, option.label.toLowerCase()]))
+})
+
 const internalOptions = computed(() => {
   if (!props.options || props.options.length === 0) return []
 
+  const filterLower = filter.value.toLowerCase()
+  const hasFilter = filter.value !== ''
+
+  const selectedSet = new Set(
+    internalMultiple.value && Array.isArray(selected.value)
+      ? selected.value
+      : [],
+  )
+  const singleSelectedValue = !internalMultiple.value ? selected.value : null
+  const cache = labelCache.value
+
   return props.options
-    .filter((option) => filter.value === '' || option.label.toLowerCase().includes(filter.value.toLowerCase()))
+    .filter((option) => !hasFilter || cache.get(option)?.includes(filterLower))
     .map((option) => {
-      let isActive = false
-
-      if (internalMultiple.value && Array.isArray(selected.value)) {
-        isActive = selected.value.includes(option.value)
-      } else {
-        isActive = option.value === selected.value
-      }
+      const isActive = internalMultiple.value
+        ? selectedSet.has(option.value)
+        : option.value === singleSelectedValue
 
       return {
         value: option.value,

package/src/components/table/Table.vue

@@ -50,6 +50,9 @@ const tableProps = {
     type: Boolean,
     default: true,
   },
+  toFn: Function as PropType<(item: unknown) => string | Record<string, unknown> | undefined>,
+  hrefFn: Function as PropType<(item: unknown) => string>,
+  hrefTarget: String as PropType<'_blank' | '_self' | '_parent' | '_top'>,
 }
 
 export type TableHeader = {
@@ -97,21 +100,15 @@ const props = defineProps({
     type: Array as PropType<T[]>,
     default: () => [],
   },
+  toFn: Function as PropType<(item: T) => string | Record<string, unknown> | undefined>,
+  hrefFn: Function as PropType<(item: T) => string>,
+  hrefTarget: String as PropType<'_blank' | '_self' | '_parent' | '_top'>,
 })
 
 const selected = defineModel<(number | string) | (number | string)[]>('selected')
 
-type internalT = T & {
-  __expanded?: boolean;
-}
-
-function clone<T>(source: T[]): T[] {
-  try {
-    return JSON.parse(JSON.stringify(source))
-  } catch (e) {
-    return []
-  }
-}
+// Use Map for expandable state to handle virtual list correctly
+const expandedState = ref(new Map<number | string, boolean>())
 
 const items = computed(() => props.items)
 
@@ -126,9 +123,40 @@ const { list, containerProps, wrapperProps } = useVirtualList(
   },
 )
 
-const internalItems = ref<internalT[]>([])
+// Helper function to get item key with validation
+function getItemKey(item: T, index: number): number | string {
+  if (!props.keyProp || !item || typeof item !== 'object' || item === null) {
+    return index
+  }
+
+  const keyValue = (item as Record<string, unknown>)[props.keyProp]
+
+  // Validate that the key exists and is a valid type
+  if (keyValue === undefined || keyValue === null) {
+    console.warn(`[XTable] keyProp "${props.keyProp}" is undefined/null for item at index ${index}. Falling back to index.`)
+
+    return index
+  }
+
+  if (typeof keyValue !== 'string' && typeof keyValue !== 'number') {
+    console.warn(`[XTable] keyProp "${props.keyProp}" must be a string or number, got ${typeof keyValue}. Falling back to index.`)
+
+    return index
+  }
+
+  return keyValue as number | string
+}
+
+// Helper function to get original index from virtual list item
+// Note: useVirtualList always preserves the original index in item.index
+function getOriginalIndex(virtualItem: { data: T; index: number; }): number {
+  return virtualItem.index
+}
 
-const emit = defineEmits(['update:sort', 'click-row'])
+const emit = defineEmits<{
+  (e: 'update:sort', sortValues: string[]): void;
+  (e: 'click-row', item: T, index: number): void;
+}>()
 
 function getSort(headerValue: string | undefined, sort: string[]): TableHeaderSort {
   if (!headerValue) return undefined
@@ -173,10 +201,37 @@ function sortHeader(header: TableHeader) {
   emit('update:sort', sort)
 }
 
-function getValue(item: any, path: string | string[] | undefined) {
+const pathCache = new Map<string, string[]>()
+
+function getValue(item: T, path: string | string[] | undefined): unknown {
   if (!path) return ''
-  const pathArray = Array.isArray(path) ? path : path.match(/([^[.\]])+/g)
-  const result = pathArray?.reduce((prevObj: any, key: string) => prevObj && prevObj[key], item)
+  if (!item) return ''
+
+  let pathArray: string[] | null
+
+  if (Array.isArray(path)) {
+    pathArray = path
+  } else {
+    // Check cache first
+    if (pathCache.has(path)) {
+      pathArray = pathCache.get(path)!
+    } else {
+      // Parse and cache the result
+      pathArray = path.match(/([^[.\]])+/g)
+      if (pathArray) {
+        pathCache.set(path, pathArray)
+      }
+    }
+  }
+
+  if (!pathArray || pathArray.length === 0) return ''
+
+  const result = pathArray.reduce((prevObj: unknown, key: string) => {
+    if (prevObj === null || prevObj === undefined) return null
+    if (typeof prevObj !== 'object') return null
+
+    return (prevObj as Record<string, unknown>)[key]
+  }, item)
 
   return result ?? ''
 }
@@ -184,38 +239,59 @@ function getValue(item: any, path: string | string[] | undefined) {
 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)[]
+  return items.value.map((item, index) => getItemKey(item, index))
+})
+
+const selectedSet = computed(() => {
+  if (!props.selectable || props.singleSelect) return new Set<number | string>()
+  if (!Array.isArray(selected.value)) return new Set<number | string>()
+
+  return new Set(selected.value)
 })
 
 const allRowsSelected = computed(() => {
   if (!props.selectable || props.singleSelect) return false
+  if (!Array.isArray(selected.value) || selected.value.length === 0) return false
+
+  const keysLength = allKeys.value.length
+
+  if (keysLength === 0) return false
 
-  return Array.isArray(selected.value) && selected.value.length > 0 && allKeys.value.length > 0 && selected.value.length === allKeys.value.length
+  return selected.value.length === keysLength
 })
 
 const someRowsSelected = computed(() => {
   if (!props.selectable || props.singleSelect) return false
+  if (!Array.isArray(selected.value) || selected.value.length === 0) return false
 
-  return Array.isArray(selected.value) && selected.value.length > 0 && allKeys.value.length > 0 && selected.value.length !== allKeys.value.length
+  const keysLength = allKeys.value.length
+
+  if (keysLength === 0) return false
+
+  return selected.value.length > 0 && selected.value.length !== keysLength
 })
 
-function isRowSelected(rowKey: any) {
+function isRowSelected(rowKey: number | string): boolean {
   if (!props.selectable) return false
+
   if (props.singleSelect) {
     return selected.value === rowKey
-  } else {
-    return Array.isArray(selected.value) && selected.value.includes(rowKey)
   }
+
+  return selectedSet.value.has(rowKey)
 }
 
-function toggleRowSelection(rowKey: any) {
+function toggleRowSelection(rowKey: number | string) {
   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)
+
+    // Use Set for O(1) lookup instead of includes O(n)
+    if (selectedSet.value.has(rowKey)) {
+      selected.value = selected.value.filter((k: number | string) => k !== rowKey)
     } else {
       selected.value = [...selected.value, rowKey]
     }
@@ -232,25 +308,68 @@ function toggleSelectAll() {
   }
 }
 
-function onTableRowClick(item: any, index: number) {
+function toggleExpanded(virtualItem: { data: T; index: number; }) {
+  if (!props.expandable) return
+  const itemKey = getItemKey(virtualItem.data, getOriginalIndex(virtualItem))
+
+  expandedState.value.set(itemKey, !expandedState.value.get(itemKey))
+}
+
+function isExpanded(virtualItem: { data: T; index: number; }): boolean {
+  if (!props.expandable) return false
+  const itemKey = getItemKey(virtualItem.data, getOriginalIndex(virtualItem))
+
+  return expandedState.value.get(itemKey) ?? false
+}
+
+function onTableRowClick(item: T, virtualItem: { data: T; index: number; }) {
+  // Get the original index from the items array
+  const originalIndex = getOriginalIndex(virtualItem)
+
   if (props.selectable && props.singleSelect) {
-    toggleRowSelection(props.keyProp ? (item as Record<string, unknown>)[props.keyProp] : index)
+    const itemKey = getItemKey(item, originalIndex)
+
+    toggleRowSelection(itemKey)
   }
 
-  emit('click-row', item, index)
+  emit('click-row', item, originalIndex)
 }
 
-watch(items, (newValue) => {
-  if (props.expandable) internalItems.value = clone(newValue as any) as internalT[]
+// Compute column count for colspan
+const columnCount = computed(() => {
+  let count = props.headers.length
+
+  if (props.selectable && !props.singleSelect) count++
+  if (props.expandable) count++
+
+  return count
+})
+
+watch(items, (newValue: T[]) => {
+  const currentKeys = new Set<number | string>()
+
+  newValue.forEach((item, index) => {
+    currentKeys.add(getItemKey(item, index))
+  })
+
+  // Clear expanded state for items that no longer exist
+  if (props.expandable) {
+    expandedState.value.forEach((_, key) => {
+      if (!currentKeys.has(key)) {
+        expandedState.value.delete(key)
+      }
+    })
+  }
 
+  // Clear selected items that no longer exist
   if (props.selectable && props.autoClearSelected) {
     if (props.singleSelect) {
-      if (!allKeys.value.includes(selected.value as any)) {
+      if (!currentKeys.has(selected.value as number | string)) {
         selected.value = undefined
       }
     } else {
-      if (Array.isArray(selected.value)) {
-        selected.value = selected.value.filter((k: any) => allKeys.value.includes(k))
+      if (Array.isArray(selected.value) && selected.value.length > 0) {
+        selected.value = selected.value.filter((k: number | string) => currentKeys.has(k))
       }
     }
   }
@@ -335,33 +454,33 @@ const { styles, classes, className } = useTheme('Table', {}, props)
           </template>
           <template v-else-if="error">
             <tr>
-              <td colspan="999">
+              <td :colspan="columnCount">
                 <slot name="error"></slot>
               </td>
             </tr>
           </template>
           <template v-else-if="!items || items.length === 0">
             <tr>
-              <td colspan="999">
+              <td :colspan="columnCount">
                 <slot name="empty"></slot>
               </td>
             </tr>
           </template>
-          <template v-for="(item, index) in list" v-else :key="keyProp ? (item.data as Record<string, unknown>)[keyProp] : item.index">
+          <template v-for="item in list" v-else :key="getItemKey(item.data, item.index)">
             <x-table-row
-              :pointer="pointer"
+              :pointer="pointer || (!!toFn || !!hrefFn)"
               :striped="striped"
-              :selected="isRowSelected(keyProp ? (item.data as Record<string, unknown>)[keyProp] : item.index)"
+              :selected="isRowSelected(getItemKey(item.data, item.index))"
               :single-select="singleSelect"
-              @click="onTableRowClick(item.data, item.index)"
+              @click="onTableRowClick(item.data, item)"
             >
-              <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-table-cell v-if="props.selectable && !singleSelect" width="40" class="!pl-3.5 !pr-0.5 cursor-pointer" @click.stop="toggleRowSelection(getItemKey(item.data, item.index))">
                 <x-checkbox
-                  :model-value="isRowSelected(keyProp ? (item.data as Record<string, unknown>)[keyProp] : item.index)"
+                  :model-value="isRowSelected(getItemKey(item.data, item.index))"
                   hide-footer
-                  :aria-label="`Select row ${index + 1}`"
+                  :aria-label="`Select row ${getOriginalIndex(item) + 1}`"
                   skip-form-registry
-                  @click.prevent.stop="toggleRowSelection(keyProp ? (item.data as Record<string, unknown>)[keyProp] : item.index)"
+                  @click.prevent.stop="toggleRowSelection(getItemKey(item.data, item.index))"
                 />
               </x-table-cell>
               <x-table-cell v-if="expandable" width="48" class="!p-1">
@@ -369,14 +488,14 @@ const { styles, classes, className } = useTheme('Table', {}, props)
                   type="button"
                   class="px-3 p-2"
                   :class="[dense ? 'p-0.5' : 'px-3 py-2']"
-                  @click="internalItems[item.index].__expanded = !internalItems[item.index].__expanded"
+                  @click.stop="toggleExpanded(item)"
                 >
                   <x-icon
                     :icon="chevronDownIcon"
                     :size="dense ? 'xs' : 'md'"
                     class="transition-transform"
                     :class="{
-                      'rotate-180': internalItems[item.index]?.__expanded,
+                      'rotate-180': isExpanded(item),
                     }"
                   />
                 </button>
@@ -394,15 +513,18 @@ const { styles, classes, className } = useTheme('Table', {}, props)
                   overflow: 'hidden',
                   whiteSpace: 'nowrap',
                 } : {}]"
+                :href="hrefFn ? hrefFn(item.data) : undefined"
+                :to="toFn ? toFn(item.data) : undefined"
+                :target="hrefFn ? hrefTarget : undefined"
               >
                 <slot :name="`item-${header.value}`" :item="item.data">
                   {{ getValue(item.data, header.value) }}
                 </slot>
               </x-table-cell>
             </x-table-row>
-            <tr v-if="expandable" :class="{ 'hidden': !internalItems[item.index]?.__expanded }">
-              <td colspan="999">
-                <div class="overflow-hidden transition-opacity" :class="[internalItems[item.index]?.__expanded ? '' : 'opacity-0 max-h-0']">
+            <tr v-if="expandable" :class="{ 'hidden': !isExpanded(item) }">
+              <td :colspan="columnCount">
+                <div class="overflow-hidden transition-opacity" :class="[isExpanded(item) ? '' : 'opacity-0 max-h-0']">
                   <slot name="expanded-row" :item="item.data"></slot>
                 </div>
               </td>