@indielayer/ui 1.18.0 → 2.0.0

package/src/composables/useTheme.ts

@@ -1,5 +1,6 @@
 import { computed, inject, unref, useSlots, type Slots, type UnwrapNestedRefs, type UnwrapRef, type MaybeRef, type CSSProperties } from 'vue'
-import { injectThemeKey } from './keys'
+import { injectOptionsKey, injectThemeKey } from './keys'
+import { resolvePropsWithDefaults } from './resolveComponentDefaults'
 import { useColors, type ColorComposition } from './useColors'
 import { useCSS, type CSSComposition } from './useCSS'
 import { isFunction, isObject, mergeRightDeep, smartUnref } from '../common/utils'
@@ -26,6 +27,12 @@ export type ThemeParams<P = Record<string, any>, D = Record<string, any>> = {
 
 export const useTheme = <P extends object = object, K extends string = string, D extends object = object>(namespace: keyof ComponentThemes, defaultTheme: ThemeComponent<P, K, D> = {}, props: MaybeRef<P> = {} as P, data: D = {} as D) => {
   const userTheme = inject(injectThemeKey, {})
+  const options = inject(injectOptionsKey, {})
+
+  const resolvedProps = computed(() => resolvePropsWithDefaults(
+    unref(props),
+    options.defaults?.[namespace] as Partial<P> | undefined,
+  ))
 
   const rawClasses = computed(() => {
     if (unref(userTheme)?.components?.[namespace]) return mergeRightDeep(defaultTheme.classes || {}, unref(userTheme).components?.[namespace].classes || {})
@@ -45,7 +52,7 @@ export const useTheme = <P extends object = object, K extends string = string, D
   const colors = useColors()
   const css = useCSS(cssNamespace)
   const classes = computed<Record<K, ThemeVueClass>>(() => getClasses(rawClasses.value, {
-    props: unref(props),
+    props: resolvedProps.value,
     slots,
     data: smartUnref(data),
     colors,
@@ -56,7 +63,7 @@ export const useTheme = <P extends object = object, K extends string = string, D
   const styles = computed(() => {
     const componentTheme = unref(userTheme)?.components?.[namespace] || {}
     const params = {
-      props: unref(props),
+      props: resolvedProps.value,
       slots,
       data: smartUnref(data),
       colors,

package/src/composables/useVirtualList.ts

@@ -2,8 +2,7 @@
  * @file useVirtualList composable adapted from https://github.com/vueuse/vueuse/blob/main/packages/core/useVirtualList/index.ts
  */
 import { computed, ref, shallowRef, unref, watch } from 'vue'
-import type { Ref, ShallowRef, StyleValue } from 'vue'
-import type { MaybeRef } from '@vueuse/shared'
+import type { MaybeRef, Ref, ShallowRef, StyleValue } from 'vue'
 import { useElementSize } from '@vueuse/core'
 
 type UseVirtualListItemSize = number | ((index: number) => number)

package/src/create.ts

@@ -2,12 +2,14 @@ import type { App, InjectionKey, MaybeRef } from 'vue'
 import { injectIconsKey, injectOptionsKey, injectThemeKey } from './composables/keys'
 import { injectThemeStyles, type UITheme } from './theme'
 import type { IconInjection } from './components/icon/Icon.vue'
+import type { ComponentDefaults } from './componentDefaults'
 
 export type UIOptions = {
   prefix?: string;
   components?: any[];
   icons?: Record<string, any>;
   theme?: UITheme;
+  defaults?: ComponentDefaults;
   injectIconsKey?: InjectionKey<IconInjection>;
   injectOptionsKey?: InjectionKey<UIOptions>;
   injectThemeKey?: InjectionKey<MaybeRef<UITheme>>;

package/src/index.ts

@@ -5,6 +5,7 @@ export * from './composables'
 export * from './themes'
 export * from './virtual'
 export type { UITheme, ComponentThemes } from './theme'
+export type { ComponentDefaults } from './componentDefaults'
 
 export { default as createUI, type UIOptions } from './create'
 

package/src/theme.ts

@@ -16,12 +16,14 @@ import type {
   DatepickerTheme,
   DividerTheme,
   DrawerTheme,
+  EmptyTheme,
   FormTheme,
   FormGroupTheme,
   IconTheme,
   ImageTheme,
   InputTheme,
   InputFooterTheme,
+  InputGroupTheme,
   LabelTheme,
   LinkTheme,
   LoaderTheme,
@@ -36,6 +38,7 @@ import type {
   ProgressTheme,
   QrCodeTheme,
   RadioTheme,
+  RadioButtonTheme,
   ScrollTheme,
   SelectTheme,
   SkeletonTheme,
@@ -72,12 +75,14 @@ export type ComponentThemes = {
   Datepicker: DatepickerTheme;
   Divider: DividerTheme;
   Drawer: DrawerTheme;
+  Empty: EmptyTheme;
   Form: FormTheme;
   FormGroup: FormGroupTheme;
   Icon: IconTheme;
   Image: ImageTheme;
   Input: InputTheme;
   InputFooter: InputFooterTheme;
+  InputGroup: InputGroupTheme;
   Label: LabelTheme;
   Link: LinkTheme;
   Loader: LoaderTheme;
@@ -92,6 +97,7 @@ export type ComponentThemes = {
   Progress: ProgressTheme;
   QrCode: QrCodeTheme;
   Radio: RadioTheme;
+  RadioButton: RadioButtonTheme;
   Scroll: ScrollTheme;
   Select: SelectTheme;
   Skeleton: SkeletonTheme;

package/src/themes/base/components.ts

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

package/src/themes/base/styles.ts

@@ -1,28 +1,36 @@
 export default `
-html {
-  color: #111827;
-  background-color: white;
-}
+@layer base {
+  html {
+    color: #111827;
+    background-color: white;
+  }
 
-html.dark {
-  color: #f3f4f6;
-  background-color: #111827;
-}
+  html.dark {
+    color: #f3f4f6;
+    background-color: #111827;
+  }
 
-body {
-  font-size: 14px;
-}
+  body {
+    font-size: 14px;
+  }
 
-*,
-::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 {
+    input[type="time"]::-webkit-calendar-picker-indicator{
+      filter: invert(100%);
+    }
+  }
 }
 
 :root {

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,32 @@
 export default `
-html {
-  color: #111827;
-  background-color: white;
-}
+@layer base {
+  html {
+    color: #111827;
+    background-color: white;
+  }
 
-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 {
+    input[type="time"]::-webkit-calendar-picker-indicator{
+      filter: invert(100%);
+    }
+  }
 }
 
 :root {

package/src/version.ts

@@ -1 +1 @@
-export default '1.18.0'
+export default '2.0.0'

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/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/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
-};

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

@@ -1,150 +0,0 @@
-import { defineComponent as j, inject as z, computed as D, reactive as H, ref as h, watch as g, openBlock as s, createBlock as y, resolveDynamicComponent as F, normalizeStyle as K, unref as a, normalizeClass as l, withCtx as A, createElementVNode as r, renderSlot as u, createElementBlock as x, createCommentVNode as k, createVNode as M, Transition as X, withDirectives as q, vShow as G } from "vue";
-import { useTheme as J } from "../../composables/useTheme.js";
-import O from "../icon/Icon.vue.js";
-import { injectAccordionKey as Q } from "../../composables/keys.js";
-const R = { class: "flex-1 overflow-hidden" }, U = {
-  key: 1,
-  viewBox: "0 0 24 24",
-  stroke: "currentColor",
-  fill: "none",
-  role: "presentation",
-  class: "stroke-2 w-4 h-4"
-}, W = ["left", "right"], Y = {
-  tag: {
-    type: String,
-    default: "div"
-  },
-  disabled: Boolean,
-  expanded: Boolean,
-  showIcon: {
-    type: Boolean,
-    default: !0
-  },
-  icon: String,
-  iconAlign: {
-    type: String,
-    default: "right"
-  }
-}, Z = {
-  name: "XAccordionItem",
-  validators: {
-    iconAlign: W
-  }
-}, ie = /* @__PURE__ */ j({
-  ...Z,
-  props: Y,
-  emits: ["expand", "change"],
-  setup(w, { expose: I, emit: B }) {
-    const i = w, p = B, f = z(Q, {
-      isInsideAccordion: !1
-    }), b = D(() => f.iconAlign || i.iconAlign), C = H({
-      iconAlign: b
-    }), n = h(!i.expanded), o = h(!0);
-    g(() => i.expanded, () => {
-      n.value = !i.expanded;
-    }), g(n, (e, t) => {
-      p("change", !e);
-    });
-    function E(e) {
-      o.value && (e.style.height = "0px");
-    }
-    function $(e, t) {
-      o.value ? (e.addEventListener("transitionend", t), setTimeout(() => {
-        e.style.height = `${e.scrollHeight}px`;
-      }, 1)) : t();
-    }
-    function S(e) {
-      o.value ? e.style.removeProperty("height") : o.value = !0;
-    }
-    function L(e) {
-      o.value && (e.style.height = `${e.scrollHeight}px`);
-    }
-    function P(e, t) {
-      o.value ? (e.addEventListener("transitionend", t), setTimeout(() => {
-        e.style.height = "0px";
-      }, 1)) : t();
-    }
-    function _(e) {
-      o.value ? e.style.removeProperty("height") : o.value = !0;
-    }
-    function m(e = !0) {
-      o.value = e, n.value = !1;
-    }
-    function N(e = !0) {
-      o.value = e, n.value = !0;
-    }
-    function v() {
-      i.disabled || (n.value = !n.value);
-    }
-    function c(e = !0) {
-      m(e), p("expand");
-    }
-    const { styles: T, classes: d, className: V } = J("AccordionItem", {}, {
-      ...i,
-      ...C
-    }, { collapsed: n, isInsideAccordion: f.isInsideAccordion });
-    return I({ toggle: v, open: m, close: N }), (e, t) => (s(), y(F(e.tag), {
-      style: K(a(T)),
-      class: l(a(V)),
-      "aria-disabled": e.disabled,
-      "aria-expanded": n.value ? "false" : "true"
-    }, {
-      default: A(() => [
-        r("button", {
-          type: "button",
-          class: l(a(d).wrapper),
-          onClick: v
-        }, [
-          r("div", R, [
-            u(e.$slots, "default", {
-              expand: c,
-              collapsed: n.value
-            })
-          ]),
-          e.showIcon ? (s(), x("div", {
-            key: 0,
-            class: l(a(d).icon)
-          }, [
-            e.icon ? (s(), y(O, {
-              key: 0,
-              icon: e.icon
-            }, null, 8, ["icon"])) : (s(), x("svg", U, t[0] || (t[0] = [
-              r("path", { d: "M19 9l-7 7-7-7" }, null, -1)
-            ])))
-          ], 2)) : k("", !0)
-        ], 2),
-        e.$slots.summary ? u(e.$slots, "summary", {
-          key: 0,
-          expand: c,
-          collapsed: n.value
-        }) : k("", !0),
-        M(X, {
-          onBeforeEnter: E,
-          onEnter: $,
-          onAfterEnter: S,
-          onBeforeLeave: L,
-          onLeave: P,
-          onAfterLeave: _
-        }, {
-          default: A(() => [
-            q(r("div", {
-              class: l(a(d).content)
-            }, [
-              u(e.$slots, "content", {
-                expand: c,
-                collapsed: n.value
-              })
-            ], 2), [
-              [G, !n.value]
-            ])
-          ]),
-          _: 3
-        })
-      ]),
-      _: 3
-    }, 8, ["style", "class", "aria-disabled", "aria-expanded"]));
-  }
-});
-export {
-  ie as default
-};

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

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

package/lib/components/accordion/__tests__/Accordion.spec.d.ts

@@ -1 +0,0 @@
-export {};