@indielayer/ui 1.16.0 → 1.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indielayer/ui",
-  "version": "1.16.0",
+  "version": "1.18.0",
   "description": "Indielayer UI Components with Tailwind CSS build for Vue 3",
   "author": {
     "name": "João Teixeira",
@@ -50,12 +50,13 @@
   "devDependencies": {
     "@indielayer/stylelint-config": "^1.0.0",
     "@rushstack/eslint-patch": "^1.3.2",
+    "@unhead/vue": "^2.0.19",
     "@tsconfig/node18": "^2.0.1",
     "@types/jsdom": "^21.1.1",
     "@types/node": "^18.16.18",
     "@vitejs/plugin-vue": "^4.2.3",
     "@vitejs/plugin-vue-jsx": "^3.0.1",
-    "@vue/test-utils": "^2.4.0",
+    "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.4.0",
     "@vuepic/vue-datepicker": "^11.0.2",
     "@vueuse/core": "^11.1.0",
@@ -107,9 +108,13 @@
     "gen:types": "vue-tsc --declaration --emitDeclarationOnly -p tsconfig.vitest.json --composite false",
     "gen:version": "node .scripts/gen-version.cjs",
     "gen:search": "node .scripts/gen-search.cjs",
+    "gen:llms": "node .scripts/gen-llms.cjs",
+    "gen:sitemap": "node .scripts/gen-sitemap.cjs",
     "test": "pnpm test:unit",
+    "test:ci": "vitest run --environment jsdom",
     "test:unit": "vitest --environment jsdom",
     "typecheck": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
-    "stylelint": "stylelint \"**/*.{css,vue,postcss,scss,sass}\" --ignore-path .gitignore"
+    "stylelint": "stylelint \"**/*.{css,vue,postcss,scss,sass}\" --ignore-path .gitignore",
+    "stylelint:fix": "stylelint \"**/*.{css,vue,postcss,scss,sass}\" --ignore-path .gitignore --fix"
   }
 }

package/src/components/container/theme/Container.base.theme.ts

@@ -5,7 +5,7 @@ const theme: ContainerTheme = {
     wrapper: ({ props }) => {
       const classes = ['px-4 md:px-6']
 
-      if (!props.fluid) classes.push('max-w-screen-lg mx-auto')
+      if (!props.fluid) classes.push('max-w-screen-xl mx-auto')
 
       return classes
     },

package/src/components/divider/theme/Divider.base.theme.ts

@@ -4,7 +4,7 @@ const theme: DividerTheme = {
   classes: {
     wrapper: ({ props }) => `flex justify-center items-center ${props.vertical ? 'h-full flex-col' : 'w-full'}`,
 
-    label: 'font-medium text-sm text-secondary-600 dark:text-secondary-300',
+    label: 'font-medium text-xs text-slate-400 dark:text-secondary-300',
 
     line: 'bg-secondary-200 dark:bg-secondary-700 flex-grow',
   },

package/src/components/input/Input.vue

@@ -152,14 +152,13 @@ defineExpose({ focus, blur, reset, validate, setError })
         ref="elRef"
         :class="[
           classes.input,
-          type === 'password' ? 'pr-10' : '',
           // error
           errorInternal
             ? 'border-error-500 dark:border-error-400 focus:outline-error-500'
             : 'focus:outline-[color:var(--x-input-border)]',
           {
             '!pl-10': iconLeft || icon,
-            '!pr-10': iconRight,
+            '!pr-10': iconRight || showPasswordToggle || showClearIcon,
           },
         ]"
         :disabled="disabled"

package/src/components/select/Select.vue

@@ -17,6 +17,9 @@ const selectProps = {
     type: String,
     default: 'Filter by...',
   },
+  filterablePrefix: Boolean,
+  filterableSuffix: Boolean,
+  hideSelectedOptionSlots: Boolean,
   virtualList: Boolean,
   virtualListOffsetTop: Number,
   virtualListOffsetBottom: Number,
@@ -26,7 +29,7 @@ const selectProps = {
   },
   virtualListOverscan: {
     type: Number,
-    default: 5,
+    default: 10,
   },
   placement: String as PropType<PopoverPlacement>,
 }
@@ -78,7 +81,7 @@ import XInput from '../input/Input.vue'
 
 const props = defineProps(selectProps)
 
-const emit = defineEmits([...useInputtable.emits(), 'close'])
+const emit = defineEmits([...useInputtable.emits(), 'close', 'open'])
 
 const internalMultiple = computed(() => props.multiple || props.multipleCheckbox)
 
@@ -110,12 +113,35 @@ const selected = computed<any | any[]>({
   },
 })
 
-const labelCache = computed(() => {
-  if (!props.options) return new Map<SelectOption, string>()
+const optionsByValue = computed(() => {
+  if (!props.options) return new Map<string | number, SelectOption>()
 
-  return new Map(props.options.map((option) => [option, option.label.toLowerCase()]))
+  return new Map(props.options.map((option) => [option.value, option]))
 })
 
+const filterCache = computed(() => {
+  if (!props.options) return new Map<SelectOption, { label: string; prefix?: string; suffix?: string; }>()
+
+  return new Map(props.options.map((option) => [
+    option,
+    {
+      label: option.label.toLowerCase(),
+      prefix: props.filterablePrefix && option.prefix ? option.prefix.toLowerCase() : undefined,
+      suffix: props.filterableSuffix && option.suffix ? option.suffix.toLowerCase() : undefined,
+    },
+  ]))
+})
+
+function matchesFilter(option: SelectOption, filterLower: string) {
+  const cached = filterCache.value.get(option)
+
+  if (!cached) return false
+
+  return cached.label.includes(filterLower)
+    || cached.prefix?.includes(filterLower)
+    || cached.suffix?.includes(filterLower)
+}
+
 const internalOptions = computed(() => {
   if (!props.options || props.options.length === 0) return []
 
@@ -128,10 +154,9 @@ const internalOptions = computed(() => {
       : [],
   )
   const singleSelectedValue = !internalMultiple.value ? selected.value : null
-  const cache = labelCache.value
 
   return props.options
-    .filter((option) => !hasFilter || cache.get(option)?.includes(filterLower))
+    .filter((option) => !hasFilter || matchesFilter(option, filterLower))
     .map((option) => {
       const isActive = internalMultiple.value
         ? selectedSet.has(option.value)
@@ -189,6 +214,7 @@ watch(isOpen, (isOpenValue) => {
       })
     }, 50)
 
+    emit('open')
   } else {
     if (props.filterable) filter.value = ''
     emit('close')
@@ -264,7 +290,7 @@ function findSelectableIndex(start: number | undefined, direction = 'down') {
 }
 
 function handleOptionClick(value: string | number) {
-  const option = props.options?.find((i) => i.value === value)
+  const option = getItem(value)
 
   if (!option || option.disabled) return
 
@@ -325,8 +351,14 @@ function handleRemove(e: Event, value: string) {
   }
 }
 
+function getItem(value: string | number | []) {
+  if (Array.isArray(value)) return undefined
+
+  return optionsByValue.value.get(value)
+}
+
 function getLabel(value: string | number | []) {
-  const option = props.options?.find((i) => i.value === value)
+  const option = getItem(value)
 
   if (option) return option.label
 
@@ -541,15 +573,29 @@ defineExpose({ focus, blur, reset, validate, setError, filterRef })
                     :key="value"
                     size="xs"
                     removable
-                    :outlined="!(isDisabled || options?.find((i) => i.value === value)?.disabled)"
-                    :disabled="isDisabled || options?.find((i) => i.value === value)?.disabled"
+                    :outlined="!(isDisabled || getItem(value)?.disabled)"
+                    :disabled="isDisabled || getItem(value)?.disabled"
                     :style="{ 'max-width': valueIndex === 0 && hiddenTagsCounterRef ? `calc(100% - ${hiddenTagsCounterRef.offsetWidth + 6 + 'px'})` : undefined }"
                     @remove="(e: Event) => { handleRemove(e, value) }"
                   >
-                    <template #prefix>
-                      <slot name="tag-prefix" :item="options?.find((i) => i.value === value)"></slot>
+                    <template v-if="!hideSelectedOptionSlots">
+                      <div class="flex items-center">
+                        <span v-if="$slots.prefix || getItem(value)?.prefix" class="mr-2 shrink-0">
+                          <slot name="prefix" :item="getItem(value)">{{ getItem(value)?.prefix }}</slot>
+                        </span>
+
+                        <span class="flex-1 truncate">
+                          {{ getLabel(value) }}
+                        </span>
+
+                        <span v-if="$slots.suffix || getItem(value)?.suffix" class="ml-1 shrink-0">
+                          <slot name="suffix" :item="getItem(value)">{{ getItem(value)?.suffix }}</slot>
+                        </span>
+                      </div>
+                    </template>
+                    <template v-else>
+                      {{ getLabel(value) }}
                     </template>
-                    {{ getLabel(value) }}
                   </x-tag>
 
                   <div
@@ -561,7 +607,24 @@ defineExpose({ focus, blur, reset, validate, setError, filterRef })
                 </div>
               </template>
               <template v-else-if="!internalMultiple && !isEmpty(selected) && getLabel(selected) !== ''">
-                {{ getLabel(selected) }}
+                <template v-if="!hideSelectedOptionSlots">
+                  <div class="flex items-center">
+                    <span v-if="$slots.prefix || getItem(selected)?.prefix" class="mr-2 shrink-0">
+                      <slot name="prefix" :item="getItem(selected)">{{ getItem(selected)?.prefix }}</slot>
+                    </span>
+
+                    <span class="flex-1 truncate">
+                      {{ getLabel(selected) }}
+                    </span>
+
+                    <span v-if="$slots.suffix || getItem(selected)?.suffix" class="ml-1 shrink-0">
+                      <slot name="suffix" :item="getItem(selected)">{{ getItem(selected)?.suffix }}</slot>
+                    </span>
+                  </div>
+                </template>
+                <template v-else>
+                  {{ getLabel(selected) }}
+                </template>
               </template>
 
               <template v-else>
@@ -635,14 +698,28 @@ defineExpose({ focus, blur, reset, validate, setError, filterRef })
                 :key="value"
                 size="xs"
                 removable
-                :outlined="!(isDisabled || options?.find((i) => i.value === value)?.disabled)"
-                :disabled="isDisabled || options?.find((i) => i.value === value)?.disabled"
+                :outlined="!(isDisabled || getItem(value)?.disabled)"
+                :disabled="isDisabled || getItem(value)?.disabled"
                 @remove="(e: Event) => { handleRemove(e, value) }"
               >
-                <template #prefix>
-                  <slot name="tag-prefix" :item="options?.find((i) => i.value === value)"></slot>
+                <template v-if="!hideSelectedOptionSlots">
+                  <div class="flex items-center">
+                    <span v-if="$slots.prefix || getItem(value)?.prefix" class="mr-2 shrink-0">
+                      <slot name="prefix" :item="getItem(value)">{{ getItem(value)?.prefix }}</slot>
+                    </span>
+
+                    <span class="flex-1 truncate">
+                      {{ getLabel(value) }}
+                    </span>
+
+                    <span v-if="$slots.suffix || getItem(value)?.suffix" class="ml-1 shrink-0">
+                      <slot name="suffix" :item="getItem(value)">{{ getItem(value)?.suffix }}</slot>
+                    </span>
+                  </div>
+                </template>
+                <template v-else>
+                  {{ getLabel(value) }}
                 </template>
-                {{ getLabel(value) }}
               </x-tag>
             </x-popover-container>
           </template>

package/src/components/table/Table.vue

@@ -41,7 +41,7 @@ const tableProps = {
   },
   virtualListOverscan: {
     type: Number,
-    default: 5,
+    default: 10,
   },
   keyProp: String,
   selectable: Boolean,

package/src/composables/useVirtualList.ts

@@ -21,7 +21,7 @@ export type UseVirtualListOptions = {
   /**
    * the extra buffer items outside of the view area
    *
-   * @default 5
+   * @default 10
    */
   overscan?: number;
 }

package/src/index.ts

@@ -3,6 +3,7 @@ export { default as version } from './version'
 export * from './components'
 export * from './composables'
 export * from './themes'
+export * from './virtual'
 export type { UITheme, ComponentThemes } from './theme'
 
 export { default as createUI, type UIOptions } from './create'

package/src/install.ts

@@ -1,8 +1,14 @@
 import * as components from './components'
+import { XVirtualGrid, XVirtualList, XInfiniteLoader } from './virtual'
 import create from './create'
 
 export default create({
-  components: Object.keys(components).map(
-    (key) => components[key as keyof object],
-  ),
+  components: [
+    ...Object.keys(components).map(
+      (key) => components[key as keyof object],
+    ),
+    XVirtualList,
+    XVirtualGrid,
+    XInfiniteLoader,
+  ],
 })

package/src/version.ts

@@ -1 +1 @@
-export default '1.16.0'
+export default '1.18.0'

package/src/virtual/README.md

@@ -0,0 +1,285 @@
+# Indielayer - Virtual Vue
+
+Vue 3 port of [react-window](https://github.com/bvaughn/react-window) - Efficient virtualized list and grid components using the Composition API.
+
+## Overview
+
+High-performance virtualized list and grid components for Vue 3 applications. It renders only the visible items in large datasets, dramatically improving performance when dealing with thousands of rows or cells.
+
+## Quick Start
+
+### List Example
+
+```vue
+<script setup lang="ts">
+import { XVirtualList } from '@indielayer/ui'
+
+const items = Array.from({ length: 10000 }, (_, i) => `Item ${i}`)
+</script>
+
+<template>
+  <XVirtualList
+    :row-count="items.length"
+    :row-height="50"
+    :style="{ height: '400px' }"
+  >
+    <template #row="{ index, style }">
+      <div :style="style" class="row">
+        {{ items[index] }}
+      </div>
+    </template>
+  </XVirtualList>
+</template>
+
+<style scoped>
+.row {
+  display: flex;
+  align-items: center;
+  padding: 0 1rem;
+  border-bottom: 1px solid #eee;
+}
+</style>
+```
+
+### Grid Example
+
+```vue
+<script setup lang="ts">
+import { XVirtualGrid } from '@indielayer/ui'
+</script>
+
+<template>
+  <XVirtualGrid
+    :row-count="1000"
+    :column-count="1000"
+    :row-height="50"
+    :column-width="100"
+    :style="{ height: '500px', width: '800px' }"
+  >
+    <template #cell="{ rowIndex, columnIndex, style }">
+      <div :style="style" class="cell">
+        Row {{ rowIndex }}, Col {{ columnIndex }}
+      </div>
+    </template>
+  </XVirtualGrid>
+</template>
+
+<style scoped>
+.cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #ddd;
+}
+</style>
+```
+
+## Features
+
+- ⚡️ **Virtual scrolling** - Only renders visible items
+- 📏 **Variable sizes** - Fixed, variable, or dynamic item sizes  
+- 📐 **Dynamic measurement** - Automatic height measurement with `useDynamicRowHeight`
+- 🌐 **RTL support** - Right-to-left language support
+- 🖥️ **SSR compatible** - Works with server-side rendering
+- 📝 **TypeScript** - Full type definitions included
+- 🎯 **Imperative API** - Programmatic scrolling via template refs
+- ♿️ **ARIA support** - Accessibility attributes built-in
+- 🔄 **Overscan** - Render extra items to reduce flicker
+- ♾️ **Infinite loading** - Built-in support for infinite scroll/pagination
+
+## Components & Composables
+
+### List
+
+Virtualized list component for rendering large datasets with many rows.
+
+```vue
+<script setup lang="ts">
+import { XVirtualList } from '@indielayer/ui'
+
+const items = Array.from({ length: 10000 }, (_, i) => `Item ${i}`)
+</script>
+
+<template>
+  <XVirtualList
+    :row-count="items.length"
+    :row-height="50"
+    :style="{ height: '400px' }"
+  >
+    <template #row="{ index, style }">
+      <div :style="style">
+        {{ items[index] }}
+      </div>
+    </template>
+  </XVirtualList>
+</template>
+```
+
+### Grid
+
+Virtualized grid component for rendering data with rows and columns.
+
+```vue
+<script setup lang="ts">
+import { XVirtualGrid } from '@indielayer/ui'
+
+const rowCount = 1000
+const columnCount = 1000
+</script>
+
+<template>
+  <XVirtualGrid
+    :row-count="rowCount"
+    :column-count="columnCount"
+    :row-height="50"
+    :column-width="100"
+    :style="{ height: '400px', width: '600px' }"
+  >
+    <template #cell="{ rowIndex, columnIndex, style }">
+      <div :style="style">
+        Row {{ rowIndex }}, Col {{ columnIndex }}
+      </div>
+    </template>
+  </XVirtualGrid>
+</template>
+```
+
+### Infinite Loader
+
+Utility for loading data on-demand as users scroll through lists.
+
+**Using the composable (recommended):**
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { XVirtualList, useInfiniteLoader } from '@indielayer/ui'
+
+const items = ref<string[]>([])
+const hasMoreData = ref(true)
+
+const isRowLoaded = (index: number) => index < items.value.length
+
+const loadMoreRows = async (startIndex: number, stopIndex: number) => {
+  // Simulate API call
+  await new Promise(resolve => setTimeout(resolve, 1000))
+  
+  for (let i = startIndex; i <= stopIndex; i++) {
+    items.value[i] = `Item ${i}`
+  }
+  
+  if (items.value.length >= 1000) {
+    hasMoreData.value = false
+  }
+}
+
+const { onRowsRendered } = useInfiniteLoader({
+  isRowLoaded,
+  loadMoreRows,
+  rowCount: hasMoreData.value ? items.value.length + 50 : items.value.length,
+  minimumBatchSize: 20,
+  threshold: 15,
+})
+</script>
+
+<template>
+  <XVirtualList
+    :row-count="hasMoreData ? items.length + 50 : items.length"
+    :row-height="50"
+    :style="{ height: '400px' }"
+    :on-rows-rendered="onRowsRendered"
+  >
+    <template #row="{ index, style }">
+      <div :style="style">
+        {{ items[index] || 'Loading...' }}
+      </div>
+    </template>
+  </XVirtualList>
+</template>
+```
+
+**Using the component:**
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { XVirtualList, XInfiniteLoader } from '@indielayer/ui'
+
+const items = ref<string[]>([])
+
+const isRowLoaded = (index: number) => index < items.value.length
+
+const loadMoreRows = async (startIndex: number, stopIndex: number) => {
+  for (let i = startIndex; i <= stopIndex; i++) {
+    items.value[i] = `Item ${i}`
+  }
+}
+</script>
+
+<template>
+  <XInfiniteLoader
+    :is-row-loaded="isRowLoaded"
+    :load-more-rows="loadMoreRows"
+    :row-count="1000"
+  >
+    <template #default="{ onRowsRendered }">
+      <XVirtualList
+        :row-count="1000"
+        :row-height="50"
+        :style="{ height: '400px' }"
+        :on-rows-rendered="onRowsRendered"
+      >
+        <template #row="{ index, style }">
+          <div :style="style">
+            {{ items[index] || 'Loading...' }}
+          </div>
+        </template>
+      </XVirtualList>
+    </template>
+  </XInfiniteLoader>
+</template>
+```
+
+## API
+
+### XVirtualList Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `rowCount` | `number` | ✅ | Number of rows in the list |
+| `rowHeight` | `number \| string \| function` | ✅ | Row height (px, %, or function) |
+| `style` | `CSSProperties` | ❌ | Container styles (should include height) |
+| `rowProps` | `object` | ❌ | Additional props passed to row slot |
+| `overscanCount` | `number` | ❌ | Extra rows to render (default: 3) |
+| `defaultHeight` | `number` | ❌ | Default height for SSR |
+| `onRowsRendered` | `function` | ❌ | Callback when visible rows change |
+| `onResize` | `function` | ❌ | Callback when container resizes |
+
+### XVirtualGrid Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `rowCount` | `number` | ✅ | Number of rows |
+| `columnCount` | `number` | ✅ | Number of columns |
+| `rowHeight` | `number \| string \| function` | ✅ | Row height |
+| `columnWidth` | `number \| string \| function` | ✅ | Column width |
+| `style` | `CSSProperties` | ❌ | Container styles |
+| `cellProps` | `object` | ❌ | Additional props passed to cell slot |
+| `overscanCount` | `number` | ❌ | Extra rows/columns (default: 3) |
+| `dir` | `'ltr' \| 'rtl' \| 'auto'` | ❌ | Text direction |
+| `onCellsRendered` | `function` | ❌ | Callback when visible cells change |
+| `onResize` | `function` | ❌ | Callback when container resizes |
+
+### Infinite Loader Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `isRowLoaded` | `(index: number) => boolean` | ✅ | - | Function to check if a row is loaded |
+| `loadMoreRows` | `(start: number, stop: number) => Promise<void>` | ✅ | - | Async function to load more rows |
+| `rowCount` | `number` | ✅ | - | Total row count (can be estimated) |
+| `minimumBatchSize` | `number` | ❌ | 10 | Min rows to load per request |
+| `threshold` | `number` | ❌ | 15 | Pre-fetch distance in rows |
+
+## Credits
+
+This library is a Vue 3 port of [react-window](https://github.com/bvaughn/react-window) by Brian Vaughn. All credit for the original design and virtualization algorithms goes to the original author and contributors.