@indielayer/ui 2.0.0 → 2.1.0

package/src/virtual/components/virtualList/VirtualList.vue

@@ -1,22 +1,87 @@
 <script lang="ts">
+const virtualListProps = {
+  class: {
+    type: String,
+    description: 'CSS class name on the root element.',
+  },
+  defaultHeight: {
+    type: Number,
+    default: 0,
+    description: 'Initial list height before measure; important for SSR.',
+  },
+  onResize: {
+    type: Function as PropType<(
+      size: { height: number; width: number; },
+      prevSize: { height: number; width: number; }
+    ) => void>,
+    description: 'Called when the list root resizes.',
+  },
+  onRowsRendered: {
+    type: Function as PropType<(
+      visibleRows: { startIndex: number; stopIndex: number; },
+      allRows: { startIndex: number; stopIndex: number; }
+    ) => void>,
+    description: 'Called when the visible or overscan row range changes.',
+  },
+  overscanCount: {
+    type: Number,
+    default: 3,
+    description: 'Extra rows rendered outside the visible area to reduce scroll flicker.',
+  },
+  rowCount: {
+    type: Number,
+    required: true,
+    description: 'Total number of rows in the list.',
+  },
+  rowHeight: {
+    type: [Number, String, Function, Object] as PropType<
+    | number
+    | string
+    | ((index: number, cellProps: Record<string, unknown>) => number)
+    | DynamicRowHeight
+    >,
+    required: true,
+    description: 'Row height as px, percent string, function, or `useDynamicRowHeight` cache.',
+  },
+  rowProps: {
+    type: Object as PropType<Record<string, unknown>>,
+    description: 'Extra props passed to the row slot as `props`.',
+  },
+  style: {
+    type: Object as PropType<CSSProperties>,
+    description: 'Inline styles; the list fills the height defined here.',
+  },
+  tag: {
+    type: String as PropType<TagNames>,
+    default: 'div',
+    description: 'Root element tag.',
+  },
+}
+
 export default {
   name: 'XVirtualList',
+  docs: {
+    slots: {
+      row: 'Render a single row. Receives index, style, ariaAttributes, and props.',
+      default: 'Optional content rendered after the virtualized rows.',
+    },
+    methods: {
+      scrollToRow: 'Scroll so the given row index is visible.',
+      element: 'Root HTML element when mounted, otherwise null.',
+    },
+  },
 }
 </script>
 
 <script setup lang="ts">
-import { computed, ref, watch, type CSSProperties } from 'vue'
+import { computed, ref, watch, type CSSProperties, type PropType } from 'vue'
 import { useVirtualizer } from '../../core/useVirtualizer'
-import type { Align } from '../../types'
+import type { Align, TagNames } from '../../types'
 import { isDynamicRowHeight as isDynamicRowHeightUtil } from './isDynamicRowHeight'
 import type { VirtualListProps, VirtualListImperativeAPI, DynamicRowHeight } from './types'
 import { DATA_ATTRIBUTE_LIST_INDEX } from './useDynamicRowHeight'
 
-const props = withDefaults(defineProps<VirtualListProps>(), {
-  defaultHeight: 0,
-  overscanCount: 3,
-  tag: 'div',
-})
+const props = defineProps(virtualListProps) as unknown as VirtualListProps
 
 const element = ref<HTMLDivElement | null>(null)
 
@@ -59,7 +124,7 @@ const {
   itemProps: rowProps,
   itemSize: rowHeight,
   onResize: props.onResize,
-  overscanCount: props.overscanCount,
+  overscanCount: props.overscanCount ?? 3,
 })
 
 // Expose imperative API

package/src/virtual/components/virtualList/useDynamicRowHeight.ts

@@ -117,10 +117,13 @@ export function useDynamicRowHeight({
     }
   }
 
-  const resizeObserver = new ResizeObserver(resizeObserverCallback)
+  const resizeObserver =
+    typeof ResizeObserver !== 'undefined'
+      ? new ResizeObserver(resizeObserverCallback)
+      : null
 
   function cleanup() {
-    resizeObserver.disconnect()
+    resizeObserver?.disconnect()
   }
 
   if (getCurrentInstance()) {
@@ -128,6 +131,10 @@ export function useDynamicRowHeight({
   }
 
   const observeRowElements = (elements: Element[] | NodeListOf<Element>) => {
+    if (!resizeObserver) {
+      return () => {}
+    }
+
     const elementsArray = Array.isArray(elements)
       ? elements
       : Array.from(elements)

package/volar.d.ts

@@ -16,6 +16,7 @@ declare module 'vue' {
     XDatepicker: typeof import('@indielayer/ui')['XDatepicker']
     XDivider: typeof import('@indielayer/ui')['XDivider']
     XDrawer: typeof import('@indielayer/ui')['XDrawer']
+    XEmpty: typeof import('@indielayer/ui')['XEmpty']
     XForm: typeof import('@indielayer/ui')['XForm']
     XFormGroup: typeof import('@indielayer/ui')['XFormGroup']
     XIcon: typeof import('@indielayer/ui')['XIcon']
@@ -23,6 +24,7 @@ declare module 'vue' {
     XInfiniteLoader: typeof import('@indielayer/ui')['XInfiniteLoader']
     XInput: typeof import('@indielayer/ui')['XInput']
     XInputFooter: typeof import('@indielayer/ui')['XInputFooter']
+    XInputGroup: typeof import('@indielayer/ui')['XInputGroup']
     XLabel: typeof import('@indielayer/ui')['XLabel']
     XLink: typeof import('@indielayer/ui')['XLink']
     XLoader: typeof import('@indielayer/ui')['XLoader']
@@ -37,6 +39,7 @@ declare module 'vue' {
     XProgress: typeof import('@indielayer/ui')['XProgress']
     XQrCode: typeof import('@indielayer/ui')['XQrCode']
     XRadio: typeof import('@indielayer/ui')['XRadio']
+    XRadioButton: typeof import('@indielayer/ui')['XRadioButton']
     XScroll: typeof import('@indielayer/ui')['XScroll']
     XSelect: typeof import('@indielayer/ui')['XSelect']
     XSkeleton: typeof import('@indielayer/ui')['XSkeleton']

package/docs/layouts/simple.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="docs-container">
-    <router-view />
-  </div>
-</template>

package/lib/components/button/ButtonGroup.vue_vue_type_style_index_0_lang.module.js

@@ -1,7 +0,0 @@
-//#region src/components/button/ButtonGroup.vue?vue&type=style&index=0&lang.module.css
-var e = {
-	"button-group": "_button-group_1s8c3_2",
-	"button-group--rounded": "_button-group--rounded_1s8c3_2"
-};
-//#endregion
-export { e as default };