@indielayer/ui 1.8.4 → 1.9.0

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

@@ -2,15 +2,25 @@
 import { ref } from 'vue'
 
 const selected = ref<undefined | string>()
+const selected2 = ref<undefined | string>()
 const selectedMultiple = ref<string[]>(['A', 'B'])
 const options = ref([
   { value: 'A', label: 'Option A', disabled: true },
   { value: 'B', label: 'Option B' },
 ])
 
-for (let i = 0; i < 20; i++) {
-  options.value.push({ value: i.toString(), label: 'Option ' + i })
+// function to generate
+function genOptions(x: number) {
+  const options = []
+
+  for (let i = 0; i < x; i++) {
+    options.push({ value: i.toString(), label: 'Option ' + i })
+  }
+
+  return options
 }
+
+const options2 = ref(genOptions(1000))
 </script>
 
 <template>
@@ -25,11 +35,13 @@ for (let i = 0; i < 20; i++) {
       native
     />
     <x-select
-      v-model="selected"
-      label="Dropdown select"
+      v-model="selected2"
+      label="Filterable - virtual list"
       placeholder="Placeholder"
       filterable
-      :options="options"
+      virtual-list
+      :virtual-list-item-height="33"
+      :options="options2"
     />
     <x-select
       v-model="selectedMultiple"

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

@@ -2,6 +2,8 @@
 import { XTable, XTableBody, XTableCell, XTableHead, XTableHeader, XTableRow } from '@indielayer/ui'
 import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
+import VirtualDemoCode from './virtual.vue?raw'
+import VirtualDemo from './virtual.vue'
 import StatesDemoCode from './states.vue?raw'
 import StatesDemo from './states.vue'
 
@@ -13,6 +15,11 @@ const demos = [{
   description: '',
   code: UsageDemoCode,
   component: UsageDemo,
+}, {
+  name: 'Virtual List',
+  description: '',
+  code: VirtualDemoCode,
+  component: VirtualDemo,
 }, {
   name: 'States',
   description: '',

package/docs/pages/component/table/virtual.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { type TableHeader } from '@indielayer/ui'
+import { computed, ref } from 'vue'
+
+const headers: TableHeader[] = [
+  { text: '#', value: 'id', sortable: true, align: 'center' },
+  { text: 'Title', value: 'title' },
+  { text: 'Description', value: 'description' },
+  { text: 'Published', value: 'published' },
+  { text: 'Status', value: 'status' },
+]
+
+const sort = ref([])
+const itemsSorted = computed<any[]>(() => {
+  const ite = items.value.slice(0)
+
+  return ite.sort((a: any, b: any) => {
+    for (const s of sort.value) {
+      const [key, asc] = (s as string).split(',')
+
+      if (a[key] > b[key]) return asc === '-1' ? -1 : 1
+      if (a[key] < b[key]) return asc === '-1' ? 1 : -1
+    }
+
+    return 0
+  })
+})
+
+function generateItems(x: number) {
+  return Array.from({ length: x }, (_, i) => ({
+    id: i + 1,
+    title: `Book ${i + 1}`,
+    description: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe, velit.',
+    published: Date.now() - x * i,
+    status: 'Tag label',
+  }))
+}
+
+const items = ref(generateItems(1000))
+</script>
+
+<template>
+  <x-card>
+    <x-table
+      v-model:sort="sort"
+      class="h-[300px]"
+      :headers="headers"
+      :items="itemsSorted"
+      virtual-list
+      :virtual-list-item-height="54"
+    />
+  </x-card>
+</template>

package/lib/components/select/Select.vue.d.ts

@@ -11,6 +11,17 @@ declare const selectProps: {
         type: StringConstructor;
         default: string;
     };
+    virtualList: BooleanConstructor;
+    virtualListOffsetTop: NumberConstructor;
+    virtualListOffsetBottom: NumberConstructor;
+    virtualListItemHeight: {
+        type: NumberConstructor;
+        default: number;
+    };
+    virtualListOverscan: {
+        type: NumberConstructor;
+        default: number;
+    };
     modelValue: {
         readonly type: PropType<string | number | boolean | object | any[] | undefined>;
         readonly default: undefined;
@@ -73,6 +84,17 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    virtualList: BooleanConstructor;
+    virtualListOffsetTop: NumberConstructor;
+    virtualListOffsetBottom: NumberConstructor;
+    virtualListItemHeight: {
+        type: NumberConstructor;
+        default: number;
+    };
+    virtualListOverscan: {
+        type: NumberConstructor;
+        default: number;
+    };
     modelValue: {
         readonly type: PropType<string | number | boolean | object | any[] | undefined>;
         readonly default: undefined;
@@ -128,6 +150,17 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    virtualList: BooleanConstructor;
+    virtualListOffsetTop: NumberConstructor;
+    virtualListOffsetBottom: NumberConstructor;
+    virtualListItemHeight: {
+        type: NumberConstructor;
+        default: number;
+    };
+    virtualListOverscan: {
+        type: NumberConstructor;
+        default: number;
+    };
     modelValue: {
         readonly type: PropType<string | number | boolean | object | any[] | undefined>;
         readonly default: undefined;
@@ -186,6 +219,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     native: boolean;
     filterable: boolean;
     filterPlaceholder: string;
+    virtualList: boolean;
+    virtualListItemHeight: number;
+    virtualListOverscan: number;
 }, {}>, {
     "content-header"?(_: {}): any;
     "content-footer"?(_: {}): any;