@indielayer/ui 1.16.0 → 1.18.0

package/docs/pages/colors.vue

@@ -1,6 +1,13 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import { useColors, useNotifications, colors as TailwindColors } from '@indielayer/ui'
+import { useDocMeta } from '../composables/useDocMeta'
+
+useDocMeta({
+  title: 'Colors',
+  description: 'Color palette, semantic tokens, and color props on Indielayer UI components.',
+  path: '/colors',
+})
 
 const notifications = useNotifications()
 const { getPalette } = useColors()
@@ -23,44 +30,45 @@ function copyPalette(val: any) {
 </script>
 
 <template>
-  <h1 class="text-4xl font-semibold">Colors</h1>
-  <h2 class="text-lg my-2 text-gray-500 dark:text-gray-400">Generate your own palettes, use Tailwind's or use color prop to generate at runtime</h2>
-  <x-divider class="mt-4 mb-8"/>
-
-  <h2 class="text-2xl mb-2">Generate your own palettes</h2>
-  <p class="mb-8 text-gray-500 dark:text-gray-400">Generate your own color palette like Tailwind. With the same properties as Tailwind color palettes.</p>
-  <p class="font-medium"></p>
-  <div class="mt-4">
-    <x-input v-model="color500" label="Change here the middle value (500) to generate a new palette"/>
-  </div>
-  <div class="grid grid-cols-11 my-4 text-sm">
-    <div v-for="shade in Object.keys(palette)" :key="shade" class="h-32 flex items-center justify-center" :style="`background-color: ${palette[shade]}`">{{ shade }}</div>
-  </div>
+  <div class="docs-container">
+    <h1 class="text-4xl font-semibold">Colors</h1>
+    <h2 class="text-lg my-2 text-gray-500 dark:text-gray-400">Generate your own palettes, use Tailwind's or use color prop to generate at runtime</h2>
+    <x-divider class="mt-4 mb-8"/>
+
+    <h2 class="text-2xl mb-2">Generate your own palettes</h2>
+    <p class="mb-8 text-gray-500 dark:text-gray-400">Generate your own color palette like Tailwind. With the same properties as Tailwind color palettes.</p>
+    <p class="font-medium"></p>
+    <div class="mt-4">
+      <x-input v-model="color500" label="Change here the middle value (500) to generate a new palette"/>
+    </div>
+    <div class="grid grid-cols-11 my-4 text-sm">
+      <div v-for="shade in Object.keys(palette)" :key="shade" class="h-32 flex items-center justify-center" :style="`background-color: ${palette[shade]}`">{{ shade }}</div>
+    </div>
 
-  <x-button icon-left="copy" :color="color500" block @click="copyPalette(palette)">Copy Palette</x-button>
+    <x-button icon-left="copy" :color="color500" block @click="copyPalette(palette)">Copy Palette</x-button>
 
-  <p class="text-gray-500 dark:text-gray-400 mt-4">This is the generated palette when you use the color directly on the color prop like &#x3C;x-button <b>color="#10B981"</b>&#x3E;Hello&#x3C;/x-button&#x3E;</p>
+    <p class="text-gray-500 dark:text-gray-400 mt-4">This is the generated palette when you use the color directly on the color prop like &#x3C;x-button <b>color="#10B981"</b>&#x3E;Hello&#x3C;/x-button&#x3E;</p>
 
-  <x-divider class="mt-4 mb-8"/>
+    <x-divider class="mt-4 mb-8"/>
 
-  <h2 class="text-2xl mb-2">Theme colors</h2>
-  <p class="mb-8 text-gray-500 dark:text-gray-400">Default theme color names and how to customize them.</p>
+    <h2 class="text-2xl mb-2">Theme colors</h2>
+    <p class="mb-8 text-gray-500 dark:text-gray-400">Default theme color names and how to customize them.</p>
 
-  <p>The default theme color names are
-    <b class="text-primary-500">primary</b>,
-    <b class="text-secondary-500">secondary</b>,
-    <b class="text-success-500">success</b>,
-    <b class="text-warning-500">warning</b> and
-    <b class="text-error-500">error</b>.
-    You can customize them or even add your own.
-  </p>
+    <p>The default theme color names are
+      <b class="text-primary-500">primary</b>,
+      <b class="text-secondary-500">secondary</b>,
+      <b class="text-success-500">success</b>,
+      <b class="text-warning-500">warning</b> and
+      <b class="text-error-500">error</b>.
+      You can customize them or even add your own.
+    </p>
 
-  <p class="my-4"></p>
+    <p class="my-4"></p>
 
-  <p class="my-2">Customize the color prop, e.g. <b>color="primary"</b> on the UI initialization.</p>
-  <code-snippet
-    lang="js"
-    :code="`import { createApp } from 'vue'
+    <p class="my-2">Customize the color prop, e.g. <b>color="primary"</b> on the UI initialization.</p>
+    <code-snippet
+      lang="js"
+      :code="`import { createApp } from 'vue'
 import UI, { colors } from '@indielayer/ui'
 
 const app = createApp(App)
@@ -76,14 +84,14 @@ app.use(UI, {
     },
   }
 })`"
-  />
+    />
 
-  <p class="my-4">Allow you to use the Tailwind classes like <b>text-primary-500</b>, <b>bg-primary-500</b>, etc:</p>
+    <p class="my-4">Allow you to use the Tailwind classes like <b>text-primary-500</b>, <b>bg-primary-500</b>, etc:</p>
 
-  <div>
-    <code-snippet
-      lang="js"
-      :code="`// tailwind.config.js
+    <div>
+      <code-snippet
+        lang="js"
+        :code="`// tailwind.config.js
 //...
 const colors = require('tailwindcss/colors')
 
@@ -101,19 +109,20 @@ module.exports = {
     },
   },
 }`"
-    />
-  </div>
+      />
+    </div>
 
-  <x-divider class="mt-4 mb-8"/>
+    <x-divider class="mt-4 mb-8"/>
 
-  <h2 class="text-2xl mb-2">Tailwind Colors</h2>
-  <p class="mb-8 text-gray-500 dark:text-gray-400">Default tailwind color palettes.</p>
+    <h2 class="text-2xl mb-2">Tailwind Colors</h2>
+    <p class="mb-8 text-gray-500 dark:text-gray-400">Default tailwind color palettes.</p>
 
-  <div class="grid gap-6 grid-cols-1 md:grid-cols-2 text-xs">
-    <div v-for="(pal, key) in TailwindColors" :key="key">
-      <div class="text-overline mb-2">{{ key }}</div>
-      <div class="grid grid-cols-11">
-        <div v-for="(color, palKey) in pal" :key="palKey" class="h-32 flex items-center justify-center" :style="`background-color: ${color}`">{{ palKey }}</div>
+    <div class="grid gap-6 grid-cols-1 md:grid-cols-2 text-xs">
+      <div v-for="(pal, key) in TailwindColors" :key="key">
+        <div class="text-overline mb-2">{{ key }}</div>
+        <div class="grid grid-cols-11">
+          <div v-for="(color, palKey) in pal" :key="palKey" class="h-32 flex items-center justify-center" :style="`background-color: ${color}`">{{ palKey }}</div>
+        </div>
       </div>
     </div>
   </div>

package/docs/pages/component/infiniteLoader/composable.vue

@@ -0,0 +1,168 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { useInfiniteLoader } from '@indielayer/ui'
+
+// Infinite loader example
+const infiniteItems = ref<string[]>([])
+const hasMoreData = ref(true)
+const isLoading = ref(false)
+const highestLoadedIndex = ref(-1)
+const apiCursor = ref<string | null>(null) // Cursor from last API call
+
+// Track the actual loaded count
+const loadedCount = computed(() => {
+  return infiniteItems.value.filter((item) => item !== undefined).length
+})
+
+const isRowLoaded = (index: number) => {
+  // If loading, pretend ALL rows are loaded to prevent useInfiniteLoader
+  // from marking new rows as pending while a request is in progress
+  if (isLoading.value) {
+    return true
+  }
+
+  // The last row is the loading indicator when we have more data
+  const isLoadingRow = hasMoreData.value && index === infiniteItems.value.length
+
+  if (isLoadingRow) {
+    return false // Not loaded yet, trigger loading
+  }
+
+  return infiniteItems.value[index] !== undefined
+}
+
+// Helper to get item or loading indicator
+const getItem = (index: number) => {
+  // If this is the loading indicator row
+  if (hasMoreData.value && index === infiniteItems.value.length) {
+    return isLoading.value ? '⏳ Loading more...' : '↓ Scroll for more'
+  }
+
+  return infiniteItems.value[index]
+}
+
+const loadMoreRows = async (startIndex: number, stopIndex: number) => {
+  // Block all new requests if one is already in progress
+  if (isLoading.value) {
+    console.log(`[loadMoreRows] Already loading, rejecting request for ${startIndex}-${stopIndex}`)
+
+    return
+  }
+
+  isLoading.value = true
+  const currentLength = infiniteItems.value.length
+
+  console.log(`[loadMoreRows] Loading batch of 50 items, cursor: ${apiCursor.value}, current items: ${currentLength}`)
+
+  try {
+    // Simulate API call with cursor
+    // In real implementation: const response = await fetch(`/api/items?cursor=${apiCursor.value}&limit=50`);
+    await new Promise((resolve) => setTimeout(resolve, 1000))
+
+    // In a real implementation, you'd use the cursor and response data:
+    // const response = await fetch(`/api/items?cursor=${apiCursor.value}&limit=50`);
+    // const { items, nextCursor, hasMore } = await response.json();
+    // apiCursor.value = nextCursor;
+    // hasMoreData.value = hasMore;
+    //
+    // Then append the items from the API:
+    // const newItems = [...infiniteItems.value, ...items];
+    // infiniteItems.value = newItems;
+
+    // Simulate API response: generate 50 items
+    const batchSize = 50
+    const itemsToAdd = []
+
+    for (let i = 0; i < batchSize; i++) {
+      const itemIndex = currentLength + i
+
+      itemsToAdd.push(`Item ${itemIndex + 1}`)
+      if (itemIndex > highestLoadedIndex.value) {
+        highestLoadedIndex.value = itemIndex
+      }
+    }
+
+    // Simulate updating cursor based on response
+    apiCursor.value = `cursor_after_${currentLength + batchSize - 1}`
+
+    // Append all new items at once
+    infiniteItems.value = [...infiniteItems.value, ...itemsToAdd]
+
+    console.log(`[loadMoreRows] Loaded ${batchSize} items, total: ${infiniteItems.value.length}, cursor: ${apiCursor.value}`)
+
+    // Check if we've reached the limit (simulate end of data)
+    if (infiniteItems.value.length >= 500) {
+      hasMoreData.value = false
+      console.log('[loadMoreRows] Reached limit, no more data to load')
+    }
+  } catch (error) {
+    console.error('[loadMoreRows] Error loading items:', error)
+  } finally {
+    isLoading.value = false
+  }
+}
+
+const infiniteRowCount = computed(() => {
+  const itemsLength = infiniteItems.value.length
+
+  if (!hasMoreData.value) {
+    // No more data, show only loaded items
+    return itemsLength
+  }
+
+  // Show loaded items + 1 loading indicator row
+  return itemsLength + 1
+})
+
+const { onRowsRendered } = useInfiniteLoader(
+  computed(() => {
+    const rc = infiniteRowCount.value
+
+    console.log(`[useInfiniteLoader] Props updated - rowCount: ${rc}, loaded: ${loadedCount.value}`)
+
+    return {
+      isRowLoaded,
+      loadMoreRows,
+      rowCount: rc,
+      minimumBatchSize: 50, // Load 50 items per batch
+      threshold: 10, // Start loading when within 10 rows of needing data
+    }
+  }),
+)
+
+// Load first batch of items on mount or when switching to infinite tab
+const loadInitialItems = async () => {
+  if (infiniteItems.value.length === 0) {
+    await loadMoreRows(0, 49) // Indices are ignored, always loads 50 items
+  }
+}
+
+onMounted(() => {
+  loadInitialItems()
+})
+</script>
+
+<template>
+  <p class="info">
+    Loaded {{ loadedCount }} of {{ infiniteRowCount }} items
+    <span v-if="isLoading" class="loading"> (Loading...)</span>
+  </p>
+  <x-virtual-list
+    :row-count="infiniteRowCount"
+    :row-height="50"
+    class="h-96 border border-gray-200 rounded-md bg-white"
+    :on-rows-rendered="onRowsRendered"
+  >
+    <template #row="{ index, style }">
+      <div
+        :style="style"
+        :class="[
+          'h-12 flex items-center justify-center border-b border-gray-200',
+          { 'loading-indicator': index === infiniteItems.length && hasMoreData }
+        ]"
+      >
+        {{ getItem(index) }}
+      </div>
+    </template>
+  </x-virtual-list>
+</template>

package/docs/pages/component/infiniteLoader/index.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { XInfiniteLoader } from '@indielayer/ui'
+import UsageDemoCode from './usage.vue?raw'
+import UsageDemo from './usage.vue'
+import ComposableDemoCode from './composable.vue?raw'
+import ComposableDemo from './composable.vue'
+
+const title = 'InfiniteLoader'
+const description = 'InfiniteLoader is a component that allows you to load data on demand as users scroll through a list.'
+const components = [XInfiniteLoader]
+const demos = [{
+  name: 'Usage',
+  description: '',
+  code: UsageDemoCode,
+  component: UsageDemo,
+}, {
+  name: 'Composable',
+  description: '',
+  code: ComposableDemoCode,
+  component: ComposableDemo,
+}]
+const back = ''
+const next = ''
+</script>
+
+<template>
+  <document-page
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/infiniteLoader"
+    :title="title"
+    :description="description"
+    :components="components"
+    :demos="demos"
+    :back="back"
+    :next="next"
+  />
+</template>

package/docs/pages/component/infiniteLoader/usage.vue

@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+
+// Infinite loader example
+const infiniteItems = ref<string[]>([])
+const hasMoreData = ref(true)
+const isLoading = ref(false)
+const highestLoadedIndex = ref(-1)
+const apiCursor = ref<string | null>(null) // Cursor from last API call
+
+// Track the actual loaded count
+const loadedCount = computed(() => {
+  return infiniteItems.value.filter((item) => item !== undefined).length
+})
+
+const isRowLoaded = (index: number) => {
+  // If loading, pretend ALL rows are loaded to prevent useInfiniteLoader
+  // from marking new rows as pending while a request is in progress
+  if (isLoading.value) {
+    return true
+  }
+
+  // The last row is the loading indicator when we have more data
+  const isLoadingRow = hasMoreData.value && index === infiniteItems.value.length
+
+  if (isLoadingRow) {
+    return false // Not loaded yet, trigger loading
+  }
+
+  return infiniteItems.value[index] !== undefined
+}
+
+// Helper to get item or loading indicator
+const getItem = (index: number) => {
+  // If this is the loading indicator row
+  if (hasMoreData.value && index === infiniteItems.value.length) {
+    return isLoading.value ? '⏳ Loading more...' : '↓ Scroll for more'
+  }
+
+  return infiniteItems.value[index]
+}
+
+const loadMoreRows = async (startIndex: number, stopIndex: number) => {
+  // Block all new requests if one is already in progress
+  if (isLoading.value) {
+    console.log(`[loadMoreRows] Already loading, rejecting request for ${startIndex}-${stopIndex}`)
+
+    return
+  }
+
+  isLoading.value = true
+  const currentLength = infiniteItems.value.length
+
+  console.log(`[loadMoreRows] Loading batch of 50 items, cursor: ${apiCursor.value}, current items: ${currentLength}`)
+
+  try {
+    // Simulate API call with cursor
+    // In real implementation: const response = await fetch(`/api/items?cursor=${apiCursor.value}&limit=50`);
+    await new Promise((resolve) => setTimeout(resolve, 1000))
+
+    // In a real implementation, you'd use the cursor and response data:
+    // const response = await fetch(`/api/items?cursor=${apiCursor.value}&limit=50`);
+    // const { items, nextCursor, hasMore } = await response.json();
+    // apiCursor.value = nextCursor;
+    // hasMoreData.value = hasMore;
+    //
+    // Then append the items from the API:
+    // const newItems = [...infiniteItems.value, ...items];
+    // infiniteItems.value = newItems;
+
+    // Simulate API response: generate 50 items
+    const batchSize = 50
+    const itemsToAdd = []
+
+    for (let i = 0; i < batchSize; i++) {
+      const itemIndex = currentLength + i
+
+      itemsToAdd.push(`Item ${itemIndex + 1}`)
+      if (itemIndex > highestLoadedIndex.value) {
+        highestLoadedIndex.value = itemIndex
+      }
+    }
+
+    // Simulate updating cursor based on response
+    apiCursor.value = `cursor_after_${currentLength + batchSize - 1}`
+
+    // Append all new items at once
+    infiniteItems.value = [...infiniteItems.value, ...itemsToAdd]
+
+    console.log(`[loadMoreRows] Loaded ${batchSize} items, total: ${infiniteItems.value.length}, cursor: ${apiCursor.value}`)
+
+    // Check if we've reached the limit (simulate end of data)
+    if (infiniteItems.value.length >= 500) {
+      hasMoreData.value = false
+      console.log('[loadMoreRows] Reached limit, no more data to load')
+    }
+  } catch (error) {
+    console.error('[loadMoreRows] Error loading items:', error)
+  } finally {
+    isLoading.value = false
+  }
+}
+
+const infiniteRowCount = computed(() => {
+  const itemsLength = infiniteItems.value.length
+
+  if (!hasMoreData.value) {
+    // No more data, show only loaded items
+    return itemsLength
+  }
+
+  // Show loaded items + 1 loading indicator row
+  return itemsLength + 1
+})
+
+// Load first batch of items on mount or when switching to infinite tab
+const loadInitialItems = async () => {
+  if (infiniteItems.value.length === 0) {
+    await loadMoreRows(0, 49) // Indices are ignored, always loads 50 items
+  }
+}
+
+onMounted(() => {
+  loadInitialItems()
+})
+</script>
+
+<template>
+  <p class="info">
+    Loaded {{ loadedCount }} of {{ infiniteRowCount }} items
+    <span v-if="isLoading" class="loading"> (Loading...)</span>
+  </p>
+  <x-infinite-loader
+    :is-row-loaded="isRowLoaded"
+    :load-more-rows="loadMoreRows"
+    :row-count="infiniteRowCount"
+    :minimum-batch-size="50"
+    :threshold="10"
+  >
+    <template #default="{ onRowsRendered }">
+      <x-virtual-list
+        :row-count="infiniteRowCount"
+        :row-height="50"
+        class="h-96 border border-gray-200 rounded-md bg-white"
+        :on-rows-rendered="onRowsRendered"
+      >
+        <template #row="{ index, style }">
+          <div
+            :style="style"
+            :class="[
+              'h-12 flex items-center justify-center border-b border-gray-200',
+              { 'loading-indicator': index === infiniteItems.length && hasMoreData }
+            ]"
+          >
+            {{ getItem(index) }}
+          </div>
+        </template>
+      </x-virtual-list>
+    </template>
+  </x-infinite-loader>
+</template>

package/docs/pages/component/select/size.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 
-const selected = ref<undefined | string>()
+const selected = ref<string>()
 const options = ref([
   { value: 'A', label: 'Option A' },
   { value: 'B', label: 'Option B' },

package/docs/pages/component/select/usage.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { ref } from 'vue'
+import type { SelectOption } from '@indielayer/ui'
 
-const selected = ref<undefined | string>()
-const selected2 = ref<undefined | string>()
-const options = ref([
+const selected = ref<string>()
+const selected2 = ref<string>()
+const options = ref<SelectOption[]>([
   { value: 'A', label: 'Option A' },
   { value: 'B', label: 'Option B' },
   { value: 'C', label: 'Option C' },
@@ -11,16 +12,16 @@ const options = ref([
 
 // function to generate
 function genOptions(x: number) {
-  const options = []
+  const options: SelectOption[] = []
 
   for (let i = 0; i < x; i++) {
-    options.push({ value: i.toString(), label: 'Option ' + i, suffix: i })
+    options.push({ value: i.toString(), label: 'Option ' + i, prefix: 'bg-green-500', suffix: 'dude' + i.toString() })
   }
 
   return options
 }
 
-const options2 = ref(genOptions(1000))
+const options2 = ref<SelectOption[]>(genOptions(1000))
 </script>
 
 <template>
@@ -39,13 +40,18 @@ const options2 = ref(genOptions(1000))
       label="Filterable - virtual list"
       placeholder="Placeholder"
       filterable
+      filterable-prefix
+      filterable-suffix
       clearable
       virtual-list
       :virtual-list-item-height="33"
       :options="options2"
     >
+      <template #prefix="{ item }">
+        <div class="w-2 h-2 shrink-0 rounded-full text-xs" :class="item.prefix"></div>
+      </template>
       <template #suffix="{ item }">
-        <span class="text-secondary-400 text-xs font-mono w-2">#{{ item.suffix }}</span>
+        <span class="text-secondary-400 text-xs font-mono">#{{ item.suffix }}</span>
       </template>
     </x-select>
     <x-select
@@ -57,6 +63,7 @@ const options2 = ref(genOptions(1000))
     >
       <template #input="{ popover, label, disabled }">
         <button
+          type="button"
           class="w-full text-left border rounded-md px-3 py-2"
           :disabled="disabled"
           @click="popover?.show()"

package/docs/pages/component/virtualGrid/index.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { XVirtualGrid } from '@indielayer/ui'
+import UsageDemoCode from './usage.vue?raw'
+import UsageDemo from './usage.vue'
+
+const title = 'VirtualGrid'
+const description = 'VirtualGrid is a component that allows you to render a grid of items in a virtualized way. It is a high-performance component that is used to render large grids of items.'
+const components = [XVirtualGrid]
+const demos = [{
+  name: 'Usage',
+  description: '',
+  code: UsageDemoCode,
+  component: UsageDemo,
+}]
+const back = 'virtualList'
+const next = ''
+</script>
+
+<template>
+  <document-page
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/virtualGrid"
+    :title="title"
+    :description="description"
+    :components="components"
+    :demos="demos"
+    :back="back"
+    :next="next"
+  />
+</template>

package/docs/pages/component/virtualGrid/usage.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+const gridRowCount = 1000
+const gridColumnCount = 1000
+</script>
+
+<template>
+  <x-virtual-grid
+    :row-count="gridRowCount"
+    :column-count="gridColumnCount"
+    :row-height="48"
+    :column-width="100"
+    class="h-96 border border-gray-200 rounded-md bg-white w-full"
+  >
+    <template #cell="{ rowIndex, columnIndex, style }">
+      <div :style="style" class="h-12 flex items-center justify-center border border-gray-200">
+        R{{ rowIndex }}, C{{ columnIndex }}
+      </div>
+    </template>
+  </x-virtual-grid>
+</template>