@indielayer/ui 1.8.3 → 1.9.0

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

@@ -14,6 +14,7 @@ const menu1 = [{
   divider: true,
 }, {
   label: 'Sign out',
+  color: 'error',
   active: false,
   value: 'c',
 }]

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/menu/MenuItem.vue.d.ts

@@ -13,7 +13,7 @@ declare const menuItemProps: {
     };
     onClick: FunctionConstructor;
     value: (StringConstructor | NumberConstructor)[];
-    to: StringConstructor;
+    to: (ObjectConstructor | StringConstructor)[];
     exact: BooleanConstructor;
     href: StringConstructor;
     target: StringConstructor;
@@ -61,7 +61,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
     onClick: FunctionConstructor;
     value: (StringConstructor | NumberConstructor)[];
-    to: StringConstructor;
+    to: (ObjectConstructor | StringConstructor)[];
     exact: BooleanConstructor;
     href: StringConstructor;
     target: StringConstructor;
@@ -101,7 +101,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
     onClick: FunctionConstructor;
     value: (StringConstructor | NumberConstructor)[];
-    to: StringConstructor;
+    to: (ObjectConstructor | StringConstructor)[];
     exact: BooleanConstructor;
     href: StringConstructor;
     target: StringConstructor;

package/lib/components/menu/MenuItem.vue.js

@@ -3,7 +3,7 @@ import o from "./MenuItem.vue3.js";
 import t from "../../_virtual/_plugin-vue_export-helper.js";
 const e = {
   $style: o
-}, c = /* @__PURE__ */ t(s, [["__cssModules", e], ["__scopeId", "data-v-9061982e"]]);
+}, c = /* @__PURE__ */ t(s, [["__cssModules", e], ["__scopeId", "data-v-95a80ef5"]]);
 export {
   c as default
 };

package/lib/components/menu/MenuItem.vue2.js

@@ -1,19 +1,19 @@
-import { defineComponent as z, ref as p, computed as d, onMounted as S, watch as k, openBlock as l, createBlock as i, resolveDynamicComponent as x, mergeProps as N, unref as s, withCtx as R, createElementBlock as r, renderSlot as n, createCommentVNode as u, createTextVNode as I, toDisplayString as M, createElementVNode as P, Fragment as w } from "vue";
-import { useMutationObserver as D } from "../../node_modules/.pnpm/@vueuse_core@10.2.0_vue@3.3.9_typescript@5.2.2_/node_modules/@vueuse/core/index.js";
-import { useColors as F } from "../../composables/useColors.js";
+import { defineComponent as z, ref as p, computed as d, onMounted as S, watch as k, openBlock as l, createBlock as i, resolveDynamicComponent as x, mergeProps as N, unref as s, withCtx as R, createElementBlock as r, renderSlot as n, createCommentVNode as u, createTextVNode as I, toDisplayString as M, createElementVNode as O, Fragment as P } from "vue";
+import { useMutationObserver as j } from "../../node_modules/.pnpm/@vueuse_core@10.2.0_vue@3.3.9_typescript@5.2.2_/node_modules/@vueuse/core/index.js";
+import { useColors as w } from "../../composables/useColors.js";
 import { useCommon as h } from "../../composables/useCommon.js";
-import { useTheme as O } from "../../composables/useTheme.js";
+import { useTheme as D } from "../../composables/useTheme.js";
 import g from "../icon/Icon.vue.js";
-import T from "../spinner/Spinner.vue.js";
-const V = {
+import F from "../spinner/Spinner.vue.js";
+const T = {
   key: 0,
   class: "mr-2 shrink-0"
-}, j = {
+}, V = {
   key: 2,
   class: "flex-1 truncate"
 }, E = { class: "ml-1 shrink-0" }, A = { key: 0 }, L = {
   ...h.props(),
-  ...F.props("primary"),
+  ...w.props("primary"),
   item: {
     type: Object,
     default: () => {
@@ -27,7 +27,7 @@ const V = {
   },
   onClick: Function,
   value: [Number, String],
-  to: String,
+  to: [String, Object],
   exact: Boolean,
   href: String,
   target: String,
@@ -61,7 +61,7 @@ const V = {
       ...c.item
     })), v = d(() => e.value.to ? "router-link" : e.value.href ? "a" : "div");
     S(() => {
-      a.value && (f(), v.value === "router-link" && D(a.value.$el, f, {
+      a.value && (f(), v.value === "router-link" && j(a.value.$el, f, {
         attributes: !0,
         attributeFilter: ["class"]
       }));
@@ -85,7 +85,7 @@ const V = {
     }), k(() => e.value.active, (t) => {
       o.value = !!t;
     });
-    const { styles: _, classes: B, className: C } = O("MenuItem", {}, e, { isActive: o });
+    const { styles: _, classes: B, className: C } = D("MenuItem", {}, e, { isActive: o });
     return (t, q) => (l(), i(x(v.value), N({
       ref_key: "elRef",
       ref: a
@@ -111,7 +111,7 @@ const V = {
       onClick: b
     }), {
       default: R(() => [
-        t.$slots.prefix ? (l(), r("span", V, [
+        t.$slots.prefix ? (l(), r("span", T, [
           n(t.$slots, "prefix", {}, void 0, !0)
         ])) : e.value.icon ? (l(), i(g, {
           key: 1,
@@ -119,16 +119,16 @@ const V = {
           icon: e.value.icon,
           class: "mr-2"
         }, null, 8, ["size", "icon"])) : u("", !0),
-        t.minimal ? u("", !0) : (l(), r("span", j, [
+        t.minimal ? u("", !0) : (l(), r("span", V, [
           n(t.$slots, "default", {}, () => [
             I(M(e.value.label), 1)
           ], !0)
         ])),
-        P("span", E, [
-          e.value.loading ? (l(), i(T, {
+        O("span", E, [
+          e.value.loading ? (l(), i(F, {
             key: 0,
             size: e.value.size
-          }, null, 8, ["size"])) : (l(), r(w, { key: 1 }, [
+          }, null, 8, ["size"])) : (l(), r(P, { key: 1 }, [
             t.$slots.suffix ? (l(), r("span", A, [
               n(t.$slots, "suffix", {}, void 0, !0)
             ])) : e.value.iconRight ? (l(), i(g, {

package/lib/components/menu/theme/MenuItem.base.theme.js

@@ -1,48 +1,48 @@
 const l = {
   classes: {
-    wrapper: ({ props: i, data: s }) => {
-      const r = ["relative !flex items-center whitespace-nowrap px-3 min-h-[2rem]"];
-      return i.disabled || r.push("cursor-pointer"), s.isActive && r.push("font-medium"), i.rounded && r.push("rounded"), i.size === "xs" ? r.push("py-1 text-xs") : i.size === "sm" ? r.push("py-1.5 text-sm") : i.size === "lg" ? r.push("py-3") : i.size === "xl" ? r.push("py-4 text-lg") : r.push("py-1.5"), r;
+    wrapper: ({ props: s, data: r }) => {
+      const t = ["relative !flex items-center whitespace-nowrap px-3 min-h-[2rem]"];
+      return s.disabled || t.push("cursor-pointer"), r.isActive && t.push("font-medium"), s.rounded && t.push("rounded"), s.size === "xs" ? t.push("py-1 text-xs") : s.size === "sm" ? t.push("py-1.5 text-sm") : s.size === "lg" ? t.push("py-3") : s.size === "xl" ? t.push("py-4 text-lg") : t.push("py-1.5"), t;
     }
   },
-  styles: ({ colors: i, props: s, css: r, data: a }) => {
-    const e = i.getPalette(s.color || "gray"), t = i.getPalette("secondary");
-    return s.disabled ? r.variables({
-      text: t[300],
+  styles: ({ colors: s, props: r, css: t, data: a }) => {
+    const e = s.getPalette(r.color || "gray"), i = s.getPalette("secondary");
+    return r.disabled ? t.variables({
+      text: i[300],
       dark: {
-        text: t[600]
+        text: i[600]
       }
-    }) : s.filled ? a.isActive ? r.variables({
-      bg: s.selected ? e[100] : e[200],
+    }) : r.filled ? a.isActive ? t.variables({
+      bg: r.selected ? e[100] : e[200],
       text: e[800],
       hover: {
-        bg: (s.selected, e[200]),
+        bg: (r.selected, e[200]),
         text: e[800]
       },
       dark: {
-        bg: (s.selected, e[700]),
+        bg: (r.selected, e[700]),
         text: e[100],
         hover: {
-          bg: (s.selected, e[700]),
+          bg: (r.selected, e[700]),
           text: e[100]
         }
       }
-    }) : r.variables({
-      bg: s.selected ? t[100] : "transparent",
-      text: t[800],
+    }) : t.variables({
+      bg: r.selected ? e[100] : "transparent",
+      text: e[700],
       hover: {
-        bg: t[100],
-        text: t[900]
+        bg: e[100],
+        text: e[900]
       },
       dark: {
-        bg: s.selected ? t[800] : "transparent",
-        text: t[200],
+        bg: r.selected ? e[800] : "transparent",
+        text: e[200],
         hover: {
-          bg: t[600],
-          text: t[100]
+          bg: e[600],
+          text: e[100]
         }
       }
-    }) : a.isActive ? r.variables({
+    }) : a.isActive ? t.variables({
       text: e[500],
       hover: {
         text: e[500],
@@ -55,17 +55,17 @@ const l = {
           border: e[500]
         }
       }
-    }) : r.variables({
-      text: t[800],
+    }) : t.variables({
+      text: i[800],
       hover: {
-        text: t[900],
-        border: t[300]
+        text: i[900],
+        border: i[300]
       },
       dark: {
-        text: t[300],
+        text: i[300],
         hover: {
-          text: t[200],
-          border: t[800]
+          text: i[200],
+          border: i[800]
         }
       }
     });

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;