@indielayer/ui 1.17.0 → 1.18.1

package/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.17.0";
+declare const _default: "1.18.1";
 export default _default;

package/lib/version.js

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

package/lib/virtual/components/virtualList/VirtualList.vue.js

@@ -1,11 +1,11 @@
-import { defineComponent as _, ref as $, computed as i, watch as h, openBlock as g, createBlock as k, resolveDynamicComponent as E, normalizeClass as B, normalizeStyle as f, withCtx as D, createElementBlock as V, Fragment as O, renderList as P, renderSlot as w, createElementVNode as L, unref as N } from "vue";
-import { useVirtualizer as X } from "../../core/useVirtualizer.js";
-import { isDynamicRowHeight as Y } from "./isDynamicRowHeight.js";
-import { DATA_ATTRIBUTE_LIST_INDEX as F } from "./useDynamicRowHeight.js";
-const G = {
+import { defineComponent as k, ref as E, computed as i, watch as h, openBlock as w, createBlock as B, resolveDynamicComponent as D, normalizeClass as V, normalizeStyle as f, withCtx as P, createElementBlock as L, Fragment as N, renderList as O, renderSlot as g, createElementVNode as X, unref as Y } from "vue";
+import { useVirtualizer as F } from "../../core/useVirtualizer.js";
+import { isDynamicRowHeight as G } from "./isDynamicRowHeight.js";
+import { DATA_ATTRIBUTE_LIST_INDEX as U } from "./useDynamicRowHeight.js";
+const j = {
   name: "XVirtualList"
-}, M = /* @__PURE__ */ _({
-  ...G,
+}, Q = /* @__PURE__ */ k({
+  ...j,
   props: {
     class: {},
     defaultHeight: { default: 0 },
@@ -19,7 +19,7 @@ const G = {
     tag: { default: "div" }
   },
   setup(v, { expose: y }) {
-    const t = v, n = $(null), p = i(() => t.rowProps || {}), H = i(() => t.rowCount), a = i(() => Y(t.rowHeight)), x = i(() => {
+    const t = v, n = E(null), p = i(() => t.rowProps || {}), x = i(() => t.rowCount), a = i(() => G(t.rowHeight)), H = i(() => {
       if (a.value) {
         const e = t.rowHeight, o = e.getAverageRowHeight();
         return (r) => e.getRowHeight(r) ?? o;
@@ -28,19 +28,19 @@ const G = {
     }), {
       getCellBounds: R,
       getEstimatedSize: C,
-      scrollToIndex: b,
+      scrollToIndex: I,
       startIndexOverscan: u,
-      startIndexVisible: I,
+      startIndexVisible: z,
       stopIndexOverscan: c,
-      stopIndexVisible: z
-    } = X({
+      stopIndexVisible: b
+    } = F({
       containerElement: n,
       containerStyle: t.style,
       defaultContainerSize: t.defaultHeight,
       direction: "vertical",
-      itemCount: H,
+      itemCount: x,
       itemProps: p,
-      itemSize: x,
+      itemSize: H,
       onResize: t.onResize,
       overscanCount: t.overscanCount
     });
@@ -54,7 +54,7 @@ const G = {
         index: r
       }) {
         var d, l;
-        const s = b({
+        const s = I({
           align: e,
           containerScrollOffset: ((d = n.value) == null ? void 0 : d.scrollTop) ?? 0,
           index: r
@@ -66,19 +66,21 @@ const G = {
       }
     }), h(
       [n, u, c, a, () => t.rowHeight],
-      ([e, o, r, s]) => !e || !s ? void 0 : (() => {
-        const l = Array.from(e.children).filter((m, T) => {
+      ([e, o, r, s], d, l) => {
+        if (!e || !s)
+          return;
+        const T = Array.from(e.children).filter((m, _) => {
           if (m.hasAttribute("aria-hidden"))
             return !1;
-          const S = `${o + T}`;
-          return m.setAttribute(F, S), !0;
-        });
-        return t.rowHeight.observeRowElements(l);
-      })(),
+          const $ = `${o + _}`;
+          return m.setAttribute(U, $), !0;
+        }), S = t.rowHeight;
+        l(S.observeRowElements(T));
+      },
       { flush: "post" }
       // Run after DOM updates
     ), h(
-      [u, I, c, z],
+      [u, z, c, b],
       ([e, o, r, s]) => {
         e >= 0 && r >= 0 && t.onRowsRendered && t.onRowsRendered(
           {
@@ -117,10 +119,10 @@ const G = {
         }
       return e;
     });
-    return (e, o) => (g(), k(E(e.tag), {
+    return (e, o) => (w(), B(D(e.tag), {
       ref_key: "element",
       ref: n,
-      class: B(e.$props.class),
+      class: V(e.$props.class),
       style: f({
         position: "relative",
         maxHeight: "100%",
@@ -130,19 +132,19 @@ const G = {
       }),
       role: "list"
     }, {
-      default: D(() => [
-        (g(!0), V(O, null, P(A.value, (r) => w(e.$slots, "row", {
+      default: P(() => [
+        (w(!0), L(N, null, O(A.value, (r) => g(e.$slots, "row", {
           key: r.key,
           index: r.index,
           style: f(r.style),
           ariaAttributes: r.ariaAttributes,
           props: p.value
         })), 128)),
-        w(e.$slots, "default"),
-        L("div", {
+        g(e.$slots, "default"),
+        X("div", {
           "aria-hidden": "",
           style: f({
-            height: `${N(C)}px`,
+            height: `${Y(C)}px`,
             width: "100%",
             zIndex: -1
           })
@@ -153,5 +155,5 @@ const G = {
   }
 });
 export {
-  M as default
+  Q as default
 };

package/lib/virtual/components/virtualList/useDynamicRowHeight.js

@@ -1,56 +1,55 @@
-import { ref as p, watch as d, onBeforeUnmount as H } from "vue";
-import { assert as R } from "../../utils/assert.js";
+import { ref as p, watch as d, getCurrentInstance as H, onBeforeUnmount as R } from "vue";
+import { assert as I } from "../../utils/assert.js";
 const b = "data-virtual-index";
-function x({
+function y({
   defaultRowHeight: v,
-  key: a
+  key: o
 }) {
-  const r = p(/* @__PURE__ */ new Map()), o = p(0);
-  a !== void 0 && typeof a == "object" && "value" in a && d(a, () => {
-    r.value = /* @__PURE__ */ new Map(), o.value++;
+  const r = p(/* @__PURE__ */ new Map()), a = p(0);
+  o !== void 0 && typeof o == "object" && "value" in o && d(o, () => {
+    r.value = /* @__PURE__ */ new Map(), a.value++;
   });
   const w = () => {
-    o.value;
+    a.value;
     let e = 0;
     return r.value.forEach((t) => {
       e += t;
     }), e === 0 ? v : e / r.value.size;
   }, m = (e) => {
-    o.value;
+    a.value;
     const t = r.value.get(e);
     return t !== void 0 ? t : v;
   }, A = (e, t) => {
     if (r.value.get(e) === t)
       return;
     const n = new Map(r.value);
-    n.set(e, t), r.value = n, o.value++;
+    n.set(e, t), r.value = n, a.value++;
   }, E = (e) => {
     if (e.length === 0)
       return;
     let t = !1;
     const n = [];
     if (e.forEach((s) => {
-      const { borderBoxSize: i, target: c } = s, h = c.getAttribute(b);
-      R(
-        h !== null,
+      const { borderBoxSize: i, target: c } = s, g = c.getAttribute(b);
+      I(
+        g !== null,
         `Invalid ${b} attribute value`
       );
-      const g = parseInt(h), { blockSize: l } = i[0];
+      const h = parseInt(g), { blockSize: l } = i[0];
       if (!l)
         return;
-      r.value.get(g) !== l && (n.push({ index: g, height: l }), t = !0);
+      r.value.get(h) !== l && (n.push({ index: h, height: l }), t = !0);
     }), t) {
       const s = new Map(r.value);
       n.forEach(({ index: i, height: c }) => {
         s.set(i, c);
-      }), r.value = s, o.value++;
+      }), r.value = s, a.value++;
     }
   }, u = new ResizeObserver(E);
-  H(f);
   function f() {
     u.disconnect();
   }
-  return {
+  return H() && R(f), {
     getAverageRowHeight: w,
     getRowHeight: m,
     setRowHeight: A,
@@ -65,5 +64,5 @@ function x({
 }
 export {
   b as DATA_ATTRIBUTE_LIST_INDEX,
-  x as useDynamicRowHeight
+  y as useDynamicRowHeight
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indielayer/ui",
-  "version": "1.17.0",
+  "version": "1.18.1",
   "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,
@@ -80,6 +83,21 @@ const props = defineProps(selectProps)
 
 const emit = defineEmits([...useInputtable.emits(), 'close', 'open'])
 
+defineSlots<{
+  prefix(props: { item: SelectOption; }): any;
+  suffix(props: { item: SelectOption; }): any;
+  label(props: { item: SelectOption; }): any;
+  input(props: {
+    popover: InstanceType<typeof XPopover> | null;
+    selected: any;
+    disabled: boolean;
+    label: string;
+  }): any;
+  'content-header'(props?: Record<string, never>): any;
+  'content-footer'(props?: Record<string, never>): any;
+  icon(props?: Record<string, never>): any;
+}>()
+
 const internalMultiple = computed(() => props.multiple || props.multipleCheckbox)
 
 const elRef = ref<HTMLElement | null>(null)
@@ -110,12 +128,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.value, option]))
+})
 
-  return new Map(props.options.map((option) => [option, option.label.toLowerCase()]))
+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 +169,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)
@@ -265,7 +305,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
 
@@ -326,12 +366,25 @@ 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?.toString()
 
-  if (option) return option.label
+  return value?.toString()
+}
 
-  return ''
+function fallbackSelectOption(value: string | number | []): SelectOption {
+  return {
+    value: value?.toString() || '',
+    label: value?.toString() || '',
+  }
 }
 
 const { focus, blur } = useInteractive(elRef)
@@ -542,15 +595,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) || fallbackSelectOption(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) || fallbackSelectOption(value)">{{ getItem(value)?.suffix }}</slot>
+                        </span>
+                      </div>
+                    </template>
+                    <template v-else>
+                      {{ getLabel(value) }}
                     </template>
-                    {{ getLabel(value) }}
                   </x-tag>
 
                   <div
@@ -562,7 +629,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) || fallbackSelectOption(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) || fallbackSelectOption(selected)">{{ getItem(selected)?.suffix }}</slot>
+                    </span>
+                  </div>
+                </template>
+                <template v-else>
+                  {{ getLabel(selected) }}
+                </template>
               </template>
 
               <template v-else>
@@ -636,14 +720,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) || fallbackSelectOption(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) || fallbackSelectOption(value)">{{ getItem(value)?.suffix }}</slot>
+                    </span>
+                  </div>
+                </template>
+                <template v-else>
+                  {{ getLabel(value) }}
                 </template>
-                {{ getLabel(value) }}
               </x-tag>
             </x-popover-container>
           </template>

package/src/version.ts

@@ -1 +1 @@
-export default '1.17.0'
+export default '1.18.1'