@rimelight/ui 0.0.45 → 0.0.47

package/src/components/stepper/RLAStepper.astro

@@ -158,9 +158,9 @@ const currentIndex = activeIndex >= 0 ? activeIndex : 0
       private isDisabled: boolean = false
 
       connectedCallback() {
-        this.currentIndex = Number(this.dataset.currentIndex || 0)
-        this.isLinear = this.dataset.linear === "true"
-        this.isDisabled = this.dataset.disabled === "true"
+        this.currentIndex = Number(this.dataset["currentIndex"] || 0)
+        this.isLinear = this.dataset["linear"] === "true"
+        this.isDisabled = this.dataset["disabled"] === "true"
 
         const items = this.querySelectorAll('[data-slot="item"]')
         this.itemsCount = items.length
@@ -168,7 +168,7 @@ const currentIndex = activeIndex >= 0 ? activeIndex : 0
         const triggers = this.querySelectorAll('[data-step-trigger]')
         triggers.forEach(trig => {
           trig.addEventListener('click', () => {
-            const index = Number((trig as HTMLElement).dataset.stepTrigger)
+            const index = Number((trig as HTMLElement).dataset["stepTrigger"])
             if (!isNaN(index)) {
               this.goTo(index)
             }
@@ -205,11 +205,11 @@ const currentIndex = activeIndex >= 0 ? activeIndex : 0
 
         const oldIndex = this.currentIndex
         this.currentIndex = index
-        this.dataset.currentIndex = String(index)
+        this.dataset["currentIndex"] = String(index)
         this.updateState()
 
         const itemEl = this.querySelector(`[data-slot="item"][data-index="${index}"]`) as HTMLElement | null
-        const itemVal = itemEl?.dataset.value ?? index
+        const itemVal = itemEl?.dataset["value"] ?? index
 
         if (index > oldIndex) {
           this.dispatchEvent(new CustomEvent('next', { detail: { index, value: itemVal } }))
@@ -223,7 +223,7 @@ const currentIndex = activeIndex >= 0 ? activeIndex : 0
         const items = this.querySelectorAll('[data-slot="item"]')
         items.forEach((itemNode) => {
           const item = itemNode as HTMLElement
-          const idx = Number(item.dataset.index)
+          const idx = Number(item.dataset["index"])
           const isCompleted = idx < this.currentIndex
           const isActive = idx === this.currentIndex
           const isDisabled = this.isDisabled || (this.isLinear && idx > this.currentIndex)
@@ -261,7 +261,7 @@ const currentIndex = activeIndex >= 0 ? activeIndex : 0
           const separators = this.querySelectorAll('[data-slot="separator"]')
           separators.forEach((sepNode) => {
             const sep = sepNode as HTMLElement
-            const sepIdx = Number(sep.dataset.separatorIndex)
+            const sepIdx = Number(sep.dataset["separatorIndex"])
             if (sepIdx < this.currentIndex) {
               sep.classList.add('!bg-primary-600')
               sep.classList.remove('bg-neutral-200')
@@ -275,7 +275,7 @@ const currentIndex = activeIndex >= 0 ? activeIndex : 0
         const panels = this.querySelectorAll('[data-stepper-panel]')
         panels.forEach((panelNode) => {
           const panel = panelNode as HTMLElement
-          const idx = Number(panel.dataset.stepperPanel)
+          const idx = Number(panel.dataset["stepperPanel"])
           if (idx === this.currentIndex) {
             panel.removeAttribute('hidden')
           } else {

package/src/components/table/RLATable.astro

@@ -37,7 +37,7 @@ const {
 const classes = tableTheme({
   ...Astro.props,
   sticky: typeof sticky === "boolean" ? sticky : sticky,
-  externalScroll: Boolean(typeof virtualize === "object" && virtualize?.getScrollElement)
+  externalScroll: Boolean(typeof virtualize === "object" && virtualize?.["getScrollElement"])
 })
 
 // Normalize columns from props.columns or props.headers or infer from data keys

package/src/components/tabs/RLATabs.astro

@@ -225,7 +225,7 @@ if (needsOverflow && renderedListItems.length > 1) {
 
         const list = container.querySelector("[data-slot=list]") as HTMLElement | null;
         const indicator = container.querySelector("[data-slot=indicator]") as HTMLElement | null;
-        const orientation = this.dataset.orientation || "horizontal";
+        const orientation = this.dataset["orientation"] || "horizontal";
         const isVertical = orientation === "vertical";
 
         const updateIndicator = (activeTrigger: HTMLElement | null) => {
@@ -263,7 +263,7 @@ if (needsOverflow && renderedListItems.length > 1) {
           }
         };
 
-        const containerValue = container.dataset.value;
+        const containerValue = container.dataset["value"];
         const triggers = container.querySelectorAll("[role=tab]");
         const panels = container.querySelectorAll("[role=tabpanel]");
         const popoverItems = container.querySelectorAll("[data-popover-item]");
@@ -273,7 +273,7 @@ if (needsOverflow && renderedListItems.length > 1) {
         const syncState = (targetValue: string | undefined) => {
           triggers.forEach(trigger => {
             const el = trigger as HTMLElement;
-            const val = el.dataset.value;
+            const val = el.dataset["value"];
             const isActive = val === targetValue;
             el.setAttribute("data-state", isActive ? "active" : "inactive");
             if (isActive) activeTrigger = el;
@@ -281,7 +281,7 @@ if (needsOverflow && renderedListItems.length > 1) {
 
           popoverItems.forEach(item => {
             const el = item as HTMLElement;
-            const val = el.dataset.tabOverflowValue;
+            const val = el.dataset["tabOverflowValue"];
             if (val === targetValue) {
               el.setAttribute("data-active", "true");
               el.classList.add("bg-muted/80", "font-medium");
@@ -292,7 +292,7 @@ if (needsOverflow && renderedListItems.length > 1) {
           });
 
           panels.forEach(panel => {
-            const val = (panel as HTMLElement).dataset.value;
+            const val = (panel as HTMLElement).dataset["value"];
             if (val === targetValue) {
               panel.removeAttribute("hidden");
             } else {
@@ -319,7 +319,7 @@ if (needsOverflow && renderedListItems.length > 1) {
         // Watch for browser Find-in-Page auto-expands
         panels.forEach(panel => {
           const onBeforeMatch = () => {
-            const targetValue = (panel as HTMLElement).dataset.value;
+            const targetValue = (panel as HTMLElement).dataset["value"];
             const trigger = container.querySelector(`[role=tab][data-value="${targetValue}"]`) as HTMLButtonElement | null;
             if (trigger) {
               trigger.click();
@@ -335,7 +335,7 @@ if (needsOverflow && renderedListItems.length > 1) {
           const trigger = triggerNode as HTMLButtonElement;
           const onClick = () => {
             if (trigger.disabled) return;
-            const targetValue = trigger.dataset.value;
+            const targetValue = trigger.dataset["value"];
             syncState(targetValue);
             updateIndicator(trigger);
           };
@@ -346,7 +346,7 @@ if (needsOverflow && renderedListItems.length > 1) {
         popoverItems.forEach(itemNode => {
           const item = itemNode as HTMLButtonElement;
           const onClick = () => {
-            const targetValue = item.dataset.tabOverflowValue;
+            const targetValue = item.dataset["tabOverflowValue"];
             syncState(targetValue);
             const activeTrig = container.querySelector(`[role=tab][data-value="${targetValue}"]`) as HTMLElement | null;
             updateIndicator(activeTrig);

package/src/components/toast/RLAToast.astro

@@ -31,7 +31,7 @@ const variantIcons: Record<string, string> = {
   info: "i-rl-info",
 }
 
-const icon = variantIcons[variant] ?? variantIcons.default!
+const icon = variantIcons[variant] ?? variantIcons["default"]!
 const isError = variant === "error"
 ---
 
@@ -102,7 +102,7 @@ const isError = variant === "error"
     if (!dismissable) return;
 
     const close = toast.querySelector("[data-toast-close]");
-    const duration = parseInt(toast.dataset.duration ?? "6000", 10);
+    const duration = parseInt(toast.dataset["duration"] ?? "6000", 10);
     let timerId: ReturnType<typeof setTimeout> | null = null;
     let startTime = Date.now();
     let remaining = duration;

package/src/index.ts

@@ -4,8 +4,18 @@ import type { UIConfig } from "./types"
 
 const ID = "virtual:rimelight/ui"
 
-export const ui = ({ unocss = {}, ...cfg }: UIConfig = {}) => [
-  UnoCSS({
+export interface RimelightUIPlugin {
+  name: string
+  enforce?: "pre" | "post"
+  resolveId?: (id: string) => string | null | undefined
+  load?: (id: string) => string | null | undefined
+  [key: string]: any
+}
+
+export type RimelightUIPlugins = (RimelightUIPlugin | RimelightUIPlugin[])[]
+
+export const ui = ({ unocss = {}, ...cfg }: UIConfig = {}): RimelightUIPlugins => [
+  ...(UnoCSS({
     ...unocss,
     presets: [rimelightUiPreset(cfg), ...(unocss.presets || [])],
     content: {
@@ -21,7 +31,7 @@ export const ui = ({ unocss = {}, ...cfg }: UIConfig = {}) => [
         ]
       }
     }
-  }),
+  }) as RimelightUIPlugin[]),
   {
     name: "rimelight/ui",
     enforce: "pre",