@indielayer/ui 1.18.1 → 2.1.0

package/src/themes/carbon/components.ts

@@ -14,12 +14,14 @@ export { default as Container } from '../../components/container/theme/Container
 export { default as Datepicker } from '../../components/datepicker/theme/Datepicker.carbon.theme'
 export { default as Divider } from '../../components/divider/theme/Divider.carbon.theme'
 export { default as Drawer } from '../../components/drawer/theme/Drawer.carbon.theme'
+export { default as Empty } from '../../components/empty/theme/Empty.carbon.theme'
 export { default as Form } from '../../components/form/theme/Form.carbon.theme'
 export { default as FormGroup } from '../../components/formGroup/theme/FormGroup.carbon.theme'
 export { default as Icon } from '../../components/icon/theme/Icon.carbon.theme'
 export { default as Image } from '../../components/image/theme/Image.carbon.theme'
 export { default as Input } from '../../components/input/theme/Input.carbon.theme'
 export { default as InputFooter } from '../../components/inputFooter/theme/InputFooter.carbon.theme'
+export { default as InputGroup } from '../../components/inputGroup/theme/InputGroup.carbon.theme'
 export { default as Label } from '../../components/label/theme/Label.carbon.theme'
 export { default as Link } from '../../components/link/theme/Link.carbon.theme'
 export { default as Loader } from '../../components/loader/theme/Loader.carbon.theme'
@@ -34,6 +36,7 @@ export { default as PopoverContainer } from '../../components/popover/theme/Popo
 export { default as Progress } from '../../components/progress/theme/Progress.carbon.theme'
 export { default as QrCode } from '../../components/qrCode/theme/QrCode.carbon.theme'
 export { default as Radio } from '../../components/radio/theme/Radio.carbon.theme'
+export { default as RadioButton } from '../../components/radioButton/theme/RadioButton.carbon.theme'
 export { default as Scroll } from '../../components/scroll/theme/Scroll.carbon.theme'
 export { default as Select } from '../../components/select/theme/Select.carbon.theme'
 export { default as Skeleton } from '../../components/skeleton/theme/Skeleton.carbon.theme'

package/src/themes/carbon/styles.ts

@@ -1,24 +1,31 @@
 export default `
-html {
-  color: #111827;
-  background-color: white;
-}
+@layer base {
+  html {
+    color: #111827;
+    background-color: white;
+    color-scheme: light;
+  }
 
-html.dark {
-  color: #f3f4f6;
-  background-color: #111827;
-}
+  html.dark {
+    color: #f3f4f6;
+    background-color: #111827;
+  }
 
-*,
-::before,
-::after {
-  border-color: #e5e7eb;
-}
+  *,
+  ::before,
+  ::after {
+    border-color: #e5e7eb;
+  }
+
+  .dark *,
+  .dark ::before,
+  .dark ::after {
+    border-color: #374151;
+  }
 
-.dark *,
-.dark ::before,
-.dark ::after {
-  border-color: #374151;
+  .dark {
+    color-scheme: dark;
+  }
 }
 
 :root {

package/src/version.ts

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

package/src/virtual/components/infiniteLoader/InfiniteLoader.vue

@@ -1,14 +1,46 @@
 <script lang="ts">
+const infiniteLoaderProps = {
+  isRowLoaded: {
+    type: Function as PropType<(index: number) => boolean>,
+    required: true,
+    description: 'Returns whether the row at the given index is already loaded.',
+  },
+  loadMoreRows: {
+    type: Function as PropType<(startIndex: number, stopIndex: number) => Promise<void>>,
+    required: true,
+    description: 'Loads more rows for the given index range; resolve when finished.',
+  },
+  minimumBatchSize: {
+    type: Number,
+    description: 'Minimum rows to request per load (default 10). Batches HTTP fetches.',
+  },
+  threshold: {
+    type: Number,
+    description: 'Prefetch when the user scrolls within this many rows of unloaded data (default 15).',
+  },
+  rowCount: {
+    type: Number,
+    required: true,
+    description: 'Total row count; may be an upper bound if the true size is unknown.',
+  },
+}
+
 export default {
   name: 'XInfiniteLoader',
+  docs: {
+    slots: {
+      default: 'Render prop slot; receives `onRowsRendered` to wire into a virtual list.',
+    },
+  },
 }
 </script>
 
 <script setup lang="ts">
+import type { PropType } from 'vue'
 import { useInfiniteLoader } from '../../composables/infinite-loader/useInfiniteLoader'
 import type { InfiniteLoaderProps } from '../../composables/infinite-loader/types'
 
-const props = defineProps<InfiniteLoaderProps>()
+const props = defineProps(infiniteLoaderProps) as unknown as InfiniteLoaderProps
 
 const { onRowsRendered } = useInfiniteLoader(props)
 </script>

package/src/virtual/components/virtualGrid/VirtualGrid.vue

@@ -1,22 +1,116 @@
 <script lang="ts">
+const virtualGridProps = {
+  cellProps: {
+    type: Object as PropType<Record<string, unknown>>,
+    description: 'Extra props passed to the cell slot as `props`.',
+  },
+  class: {
+    type: String,
+    description: 'CSS class name on the root element.',
+  },
+  columnCount: {
+    type: Number,
+    required: true,
+    description: 'Total number of columns in the grid.',
+  },
+  columnWidth: {
+    type: [Number, String, Function] as PropType<
+    number | string | ((index: number, cellProps: Record<string, unknown>) => number)
+    >,
+    required: true,
+    description: 'Column width as px, percent string, or a function of index.',
+  },
+  defaultHeight: {
+    type: Number,
+    default: 0,
+    description: 'Initial grid height before measure; important for SSR.',
+  },
+  defaultWidth: {
+    type: Number,
+    default: 0,
+    description: 'Initial grid width before measure; important for SSR.',
+  },
+  dir: {
+    type: String as PropType<'ltr' | 'rtl' | 'auto'>,
+    description: 'Text directionality for cell layout (ltr, rtl, or auto).',
+  },
+  onCellsRendered: {
+    type: Function as PropType<(
+      visibleCells: {
+        columnStartIndex: number;
+        columnStopIndex: number;
+        rowStartIndex: number;
+        rowStopIndex: number;
+      },
+      allCells: {
+        columnStartIndex: number;
+        columnStopIndex: number;
+        rowStartIndex: number;
+        rowStopIndex: number;
+      }
+    ) => void>,
+    description: 'Called when the visible or overscan cell range changes.',
+  },
+  onResize: {
+    type: Function as PropType<(
+      size: { height: number; width: number; },
+      prevSize: { height: number; width: number; }
+    ) => void>,
+    description: 'Called when the grid root resizes.',
+  },
+  overscanCount: {
+    type: Number,
+    default: 3,
+    description: 'Extra rows/columns rendered outside the visible area.',
+  },
+  rowCount: {
+    type: Number,
+    required: true,
+    description: 'Total number of rows in the grid.',
+  },
+  rowHeight: {
+    type: [Number, String, Function] as PropType<
+    number | string | ((index: number, cellProps: Record<string, unknown>) => number)
+    >,
+    required: true,
+    description: 'Row height as px, percent string, or a function of index.',
+  },
+  style: {
+    type: Object as PropType<CSSProperties>,
+    description: 'Inline styles; the grid fills the size defined here.',
+  },
+  tag: {
+    type: String as PropType<TagNames>,
+    default: 'div',
+    description: 'Root element tag.',
+  },
+}
+
 export default {
   name: 'XVirtualGrid',
+  docs: {
+    slots: {
+      cell: 'Render a single cell. Receives columnIndex, rowIndex, style, ariaAttributes, and props.',
+      default: 'Optional content rendered after the virtualized cells.',
+    },
+    methods: {
+      scrollToCell: 'Scroll so the given cell (row and column) is visible.',
+      scrollToColumn: 'Scroll so the given column index is visible.',
+      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 { useIsRtl } from '../../core/useIsRtl'
 import { useVirtualizer } from '../../core/useVirtualizer'
-import type { Align } from '../../types'
+import type { Align, TagNames } from '../../types'
 import type { VirtualGridProps, VirtualGridImperativeAPI } from './types'
 
-const props = withDefaults(defineProps<VirtualGridProps>(), {
-  defaultHeight: 0,
-  defaultWidth: 0,
-  overscanCount: 3,
-  tag: 'div',
-})
+const props = defineProps(virtualGridProps) as unknown as VirtualGridProps
 
 const element = ref<HTMLDivElement | null>(null)
 
@@ -42,7 +136,7 @@ const {
   itemProps: cellProps.value,
   itemSize: props.columnWidth,
   onResize: props.onResize,
-  overscanCount: props.overscanCount,
+  overscanCount: props.overscanCount ?? 3,
 })
 
 const {
@@ -62,7 +156,7 @@ const {
   itemProps: cellProps.value,
   itemSize: props.rowHeight,
   onResize: props.onResize,
-  overscanCount: props.overscanCount,
+  overscanCount: props.overscanCount ?? 3,
 })
 
 // Expose imperative API

package/src/virtual/components/virtualList/VirtualList.test.ts

@@ -32,7 +32,7 @@ function mountVirtualList(
 }
 
 function createMockDynamicRowHeight(defaultRowHeight = 50) {
-  const unobserve = vi.fn<[], void>()
+  const unobserve = vi.fn<() => void>()
 
   const dynamicRowHeight: DynamicRowHeight = {
     getAverageRowHeight: vi.fn(() => defaultRowHeight),
@@ -46,6 +46,16 @@ function createMockDynamicRowHeight(defaultRowHeight = 50) {
 }
 
 describe('VirtualList', () => {
+  let unmockResizeObserver: (() => void) | undefined
+
+  beforeEach(() => {
+    unmockResizeObserver = mockResizeObserver()
+  })
+
+  afterEach(() => {
+    unmockResizeObserver?.()
+  })
+
   it('renders correctly', () => {
     const wrapper = mountVirtualList({})
 
@@ -61,6 +71,37 @@ describe('VirtualList', () => {
     expect(rows.length).toBeGreaterThan(0)
   })
 
+  it('renders full viewport after container size is measured', async () => {
+    const wrapper = mount(VirtualList, {
+      props: {
+        rowCount: 100,
+        rowHeight: 48,
+        class: 'h-96 w-full',
+      },
+      slots: {
+        row: ({ index, style }: RowSlotProps) =>
+          h('div', { style, class: 'test-row' }, `Row ${index}`),
+      },
+    })
+
+    await flushPromises()
+    await nextTick()
+
+    setElementSize({
+      element: wrapper.element as HTMLElement,
+      height: 384,
+      width: 800,
+    })
+
+    await flushPromises()
+    await nextTick()
+
+    const rows = wrapper.findAll('.test-row')
+
+    // 384px / 48px row height = 8 visible rows (+ overscan)
+    expect(rows.length).toBeGreaterThanOrEqual(8)
+  })
+
   describe('dynamic row height watch', () => {
     it('does not observe row elements when rowHeight is fixed', async () => {
       const { dynamicRowHeight } = createMockDynamicRowHeight()
@@ -126,17 +167,14 @@ describe('VirtualList', () => {
   })
 
   describe('dynamic row height integration', () => {
-    let unmockResizeObserver: (() => void) | undefined
     let dynamicRowHeight: DynamicRowHeight | undefined
 
     beforeEach(() => {
-      unmockResizeObserver = mockResizeObserver()
       dynamicRowHeight = useDynamicRowHeight({ defaultRowHeight: 50 })
     })
 
     afterEach(() => {
       dynamicRowHeight?.cleanup()
-      unmockResizeObserver?.()
     })
 
     it('updates measured heights when observed rows resize', async () => {

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/src/virtual/core/useVirtualizer.ts

@@ -200,12 +200,26 @@ export function useVirtualizer<Props extends object>({
   }
 
   watch(
-    [containerElement, () => direction, () => cachedBounds.value],
-    ([el]) => {
+    [
+      containerElement,
+      containerSize,
+      itemCount,
+      () => overscanCount,
+      () => cachedBounds.value,
+    ],
+    () => {
+      const el = containerElement.value
+
+      if (!el) return
+
       const scrollOffset =
-        (direction === 'vertical' ? el?.scrollTop : el?.scrollLeft) ?? 0
+        (direction === 'vertical' ? el.scrollTop : el.scrollLeft) ?? 0
+
+      const next = getStartStopIndices(scrollOffset)
 
-      indices.value = getStartStopIndices(scrollOffset)
+      if (!shallowCompare(next, indices.value)) {
+        indices.value = next
+      }
     },
     { immediate: true },
   )

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/docs/pages/component/radio/variants.vue

@@ -1,39 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const selected = ref('a')
-</script>
-
-<template>
-  <div class="grid grid-cols-4 gap-4">
-    <x-radio
-      v-model="selected"
-      value="a"
-      color="rose"
-      label="Option A"
-    >
-      option extra content
-    </x-radio>
-    <x-radio
-      v-model="selected"
-      value="b"
-      color="amber"
-      glow
-      label="Option B"
-    >Glow</x-radio>
-    <x-radio
-      v-model="selected"
-      value="c"
-      color="sky"
-      glow
-      label="Option C"
-    >Glow</x-radio>
-    <x-radio
-      v-model="selected"
-      value="d"
-      color="indigo"
-      glow
-      label="Option D"
-    >Glow</x-radio>
-  </div>
-</template>

package/exports/tailwind.preset.js

@@ -1,40 +0,0 @@
-function getColorVar(color, level) {
-  if (level) return `rgb(var(--${color}-color-${level}))`
-
-  return `rgb(var(--${color}-color))`
-}
-
-function getColorVarPallete(color) {
-  return {
-    50: getColorVar(color, 50),
-    100: getColorVar(color, 100),
-    200: getColorVar(color, 200),
-    300: getColorVar(color, 300),
-    400: getColorVar(color, 400),
-    500: getColorVar(color, 500),
-    600: getColorVar(color, 600),
-    700: getColorVar(color, 700),
-    800: getColorVar(color, 800),
-    900: getColorVar(color, 900),
-    950: getColorVar(color, 950),
-  }
-}
-
-module.exports = () => ({
-  theme: {
-    extend: {
-      colors: {
-        primary: getColorVarPallete('primary'),
-        secondary: getColorVarPallete('secondary'),
-        success: getColorVarPallete('success'),
-        warning: getColorVarPallete('warning'),
-        error: getColorVarPallete('error'),
-      },
-      borderColor: getColorVar('border'),
-      fontFamily: {
-        sans: 'var(--font-family-sans)',
-        mono: 'var(--font-family-mono)',
-      },
-    },
-  },
-})

package/lib/components/accordion/Accordion.vue.js

@@ -1,40 +0,0 @@
-import { defineComponent as a, provide as i, openBlock as l, createElementBlock as d, normalizeStyle as p, unref as e, normalizeClass as m, renderSlot as u } from "vue";
-import { useTheme as f } from "../../composables/useTheme.js";
-import { injectAccordionKey as _ } from "../../composables/keys.js";
-const y = {
-  tag: {
-    type: String,
-    default: "div"
-  },
-  disabled: Boolean,
-  expanded: Boolean,
-  showIcon: {
-    type: Boolean,
-    default: !0
-  },
-  icon: String,
-  iconAlign: String
-}, g = {
-  name: "XAccordion",
-  validators: {}
-}, h = /* @__PURE__ */ a({
-  ...g,
-  props: y,
-  setup(n) {
-    const o = n;
-    i(_, { ...o, isInsideAccordion: !0 });
-    const { styles: t, classes: r, className: s } = f("Accordion", {}, o);
-    return (c, A) => (l(), d("div", {
-      style: p(e(t)),
-      class: m([
-        e(s),
-        e(r).wrapper
-      ])
-    }, [
-      u(c.$slots, "default")
-    ], 6));
-  }
-});
-export {
-  h as default
-};

package/lib/components/accordion/Accordion.vue2.js

@@ -1,4 +0,0 @@
-import f from "./Accordion.vue.js";
-export {
-  f as default
-};