@rimelight/ui 0.0.33 → 0.0.35

package/src/components/astro/RLAToast.astro

@@ -4,7 +4,10 @@ import { useUi, resolveClasses } from "../../utils"
 import type { ToastProps } from "../../types"
 import toastThemeDefault, { createToastTheme } from "../../themes/toast.theme"
 
-const toastTheme = toastThemeDefault
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const toastTheme = uiConfig.colors ? createToastTheme() : toastThemeDefault
 const toast = scv(toastTheme)
 
 const {
@@ -16,11 +19,12 @@ const {
   color = "primary",
   ui: uiProp,
   class: className,
+  dismissable = true,
   ...rest
 } = Astro.props as ToastProps
 
 const classes = resolveClasses(toast, {
-  variant
+  variant: (variant === "success" || variant === "destructive") ? variant : "default"
 }, useUi("toast", uiProp), className)
 
 const variantIcons: Record<string, string> = {
@@ -39,6 +43,7 @@ const icon = variantIcons[variant] ?? variantIcons.default!
   data-slot="root"
   data-toast
   data-duration={duration}
+  data-dismissable={dismissable.toString()}
   role="alert"
   aria-live="assertive"
   aria-atomic="true"
@@ -49,45 +54,54 @@ const icon = variantIcons[variant] ?? variantIcons.default!
 
   {/* Text body */}
   <div class="flex flex-col gap-0.5 flex-1 min-w-0">
-    {title && (
+    {(title || Astro.slots.has("title")) && (
       <div class={classes.title} data-slot="title">
         <slot name="title">{title}</slot>
       </div>
     )}
-    {description && (
+    {(description || Astro.slots.has("description")) && (
       <div class={classes.description} data-slot="description">
         <slot name="description">{description}</slot>
       </div>
     )}
     <slot />
+    {(Astro.slots.has("actions") || actionLabel) && (
+      <div class="flex items-center justify-end gap-2 mt-3" data-slot="actions">
+        <slot name="actions">
+          {actionLabel && (
+            <button
+              type="button"
+              class={classes.action}
+              data-slot="action"
+              data-toast-action
+            >
+              {actionLabel}
+            </button>
+          )}
+        </slot>
+      </div>
+    )}
   </div>
 
-  {/* Action */}
-  {actionLabel && (
+  {/* Close button */}
+  {dismissable !== false && (
     <button
       type="button"
-      class={classes.action}
-      data-slot="action"
-      data-toast-action
+      class={classes.close}
+      data-slot="close"
+      data-toast-close
+      aria-label="Dismiss notification"
     >
-      {actionLabel}
+      <span class="i-lucide-x size-3.5" aria-hidden="true" />
     </button>
   )}
-
-  {/* Close button */}
-  <button
-    type="button"
-    class={classes.close}
-    data-slot="close"
-    data-toast-close
-    aria-label="Dismiss notification"
-  >
-    <span class="i-lucide-x size-3.5" aria-hidden="true" />
-  </button>
 </div>
 
 <script>
   document.querySelectorAll("[data-toast]").forEach(toast => {
+    const dismissable = toast.getAttribute("data-dismissable") !== "false";
+    if (!dismissable) return;
+
     const close = toast.querySelector("[data-toast-close]");
     const duration = parseInt((toast as HTMLElement).dataset.duration ?? "5000", 10);
 

package/src/components/vue/RLVBanner.vue

@@ -0,0 +1,230 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref, useAttrs } from "vue"
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { BannerProps } from "../../types/components/banner"
+import bannerTheme from "../../themes/banner.theme"
+import { getHeaderStack } from "../../utils/headerStack"
+
+const attrs = useAttrs()
+const banner = scv(bannerTheme)
+
+const {
+  contain = true,
+  sticky = false,
+  fixed = true,
+  stackIndex = 0,
+  hideOnScroll = true,
+  dismissable = false,
+  dismissId,
+  actions = [],
+  ui: uiProp,
+  class: className
+} = defineProps<BannerProps>()
+
+defineSlots<{
+  default(props: {}): any
+  left(props: {}): any
+  center(props: {}): any
+  right(props: {}): any
+  actions(props: {}): any
+}>()
+
+const resolvedClasses = computed(() =>
+  resolveClasses(banner, { contain, sticky, fixed }, useUi("banner", uiProp), className)
+)
+
+const id = `rlv-banner-${Math.random().toString(36).slice(2, 8)}`
+const storageKey = dismissId || id
+const rootRef = ref<HTMLElement | null>(null)
+const contentRef = ref<HTMLElement | null>(null)
+const naturalHeight = ref(0)
+const isVisible = ref(true)
+const closed = ref(false)
+const showActions = ref(false)
+
+const fixedStyle = computed(() => {
+  if (!fixed) return {}
+  return {
+    zIndex: 200 - stackIndex
+  }
+})
+
+let resizeObserver: ResizeObserver | null = null
+let scrollHandler: (() => void) | null = null
+
+onMounted(() => {
+  if (dismissable) {
+    const stored = localStorage.getItem(`rl-banner-dismiss-${storageKey}`)
+    if (stored === "true") {
+      closed.value = true
+      return
+    }
+  }
+
+  if (!fixed) return
+
+  const stack = getHeaderStack()
+
+  const updateStack = () => {
+    stack.register(id, stackIndex, naturalHeight.value, isVisible.value, rootRef.value, "banner")
+  }
+
+  if (contentRef.value) {
+    naturalHeight.value = contentRef.value.getBoundingClientRect().height
+    resizeObserver = new ResizeObserver((entries) => {
+      const h = entries[0]?.contentRect.height
+      if (h && h > 0) {
+        naturalHeight.value = h
+        updateStack()
+      }
+    })
+    resizeObserver.observe(contentRef.value)
+  }
+
+  if (hideOnScroll) {
+    let localLastScrollY = window.scrollY
+    scrollHandler = () => {
+      const current = window.scrollY
+      const diff = current - localLastScrollY
+
+      if (Math.abs(diff) < 10) return
+
+      const newVisible = current <= 50 ? true : diff <= 0
+      if (newVisible !== isVisible.value) {
+        isVisible.value = newVisible
+        updateStack()
+      }
+
+      localLastScrollY = current
+    }
+
+    window.addEventListener("scroll", scrollHandler, { passive: true })
+  }
+
+  updateStack()
+})
+
+onUnmounted(() => {
+  resizeObserver?.disconnect()
+  if (scrollHandler) window.removeEventListener("scroll", scrollHandler)
+  if (fixed) getHeaderStack().unregister(id)
+})
+
+function handleClose() {
+  localStorage.setItem(`rl-banner-dismiss-${storageKey}`, "true")
+  closed.value = true
+  if (fixed) getHeaderStack().unregister(id)
+}
+
+function handleActionClick(action: any) {
+  if (action.onClick) action.onClick()
+}
+</script>
+
+<template>
+  <div
+    v-if="!closed"
+    ref="rootRef"
+    :id="id"
+    :class="[resolvedClasses.root]"
+    :style="fixedStyle"
+    data-slot="root"
+    v-bind="attrs"
+  >
+    <div ref="contentRef" :class="resolvedClasses.content">
+      <div :class="resolvedClasses.container">
+        <div v-show="!showActions" :class="resolvedClasses.left" data-slot="left">
+          <slot name="left" />
+        </div>
+        <div v-show="!showActions" :class="resolvedClasses.center" data-slot="center">
+          <slot name="center">
+            <slot />
+          </slot>
+        </div>
+
+        <div class="flex-1"></div>
+
+        <div :class="resolvedClasses.side">
+          <slot name="right" />
+        </div>
+
+        <template v-if="actions.length > 0 || !!$slots.actions">
+          <button
+            class="flex-none flex items-center justify-center size-7 rounded-md hover:bg-black/10 dark:hover:bg-white/10 cursor-pointer md:hidden text-sm leading-none"
+            :class="showActions ? 'order-first' : ''"
+            :aria-label="showActions ? 'Hide actions' : 'Show actions'"
+            @click="showActions = !showActions"
+          >
+            ···
+          </button>
+          <div
+            :class="[
+              resolvedClasses.actions,
+              'flex-row items-center justify-center gap-2',
+              showActions ? 'flex order-first' : 'hidden',
+              'md:flex'
+            ]"
+          >
+            <slot name="actions">
+              <template v-for="(action, i) in actions" :key="i">
+                <a
+                  v-if="action.href"
+                  :key="`a-${i}`"
+                  :href="action.href"
+                  :class="[
+                    'inline-flex items-center justify-center gap-1 px-3 py-1 rounded-md text-xs font-semibold transition-colors no-underline cursor-pointer shrink-0',
+                    action.variant === 'solid' || !action.variant
+                      ? 'bg-foreground text-background hover:opacity-90'
+                      : 'bg-white/20 text-white hover:bg-white/30',
+                    action.class
+                  ]"
+                  @click="handleActionClick(action)"
+                >
+                  {{ action.label }}
+                </a>
+                <button
+                  v-else
+                  :key="`b-${i}`"
+                  :class="[
+                    'inline-flex items-center justify-center gap-1 px-3 py-1 rounded-md text-xs font-semibold transition-colors cursor-pointer shrink-0',
+                    action.variant === 'solid' || !action.variant
+                      ? 'bg-foreground text-background hover:opacity-90'
+                      : 'bg-white/20 text-white hover:bg-white/30',
+                    action.class
+                  ]"
+                  @click="handleActionClick(action)"
+                >
+                  {{ action.label }}
+                </button>
+              </template>
+            </slot>
+          </div>
+        </template>
+
+        <button
+          v-if="dismissable"
+          :class="[resolvedClasses.dismiss]"
+          aria-label="Close banner"
+          type="button"
+          @click="handleClose"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="14"
+            height="14"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <line x1="18" y1="6" x2="6" y2="18" />
+            <line x1="6" y1="6" x2="18" y2="18" />
+          </svg>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/vue/RLVButton.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { computed, useSlots } from "vue"
+import { computed, useSlots, useAttrs } from "vue"
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
 import type { ButtonProps } from "../../types/components/button"
 import buttonTheme from "../../themes/button.theme"
 
+const attrs = useAttrs()
 const button = scv(buttonTheme)
 
 const {
@@ -79,7 +80,7 @@ const Tag = href ? "a" : "button"
 </script>
 
 <template>
-  <component v-bind="$attrs" :is="Tag" :href="href" :class="resolvedClasses.root" data-slot="root">
+  <component v-bind="attrs" :is="Tag" :href="href" :class="resolvedClasses.root" data-slot="root">
     <slot name="leading" :ui="resolvedClasses">
       <span v-if="isLeading" :class="resolvedClasses.leadingIcon" data-slot="leading-icon">
         <span :class="[showLeadingIcon, leadingIconClass]" aria-hidden="true" />

package/src/components/vue/RLVCheckbox.vue

@@ -1,68 +1,70 @@
-<script setup lang="ts">
-import { computed } from "vue"
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { CheckboxProps } from "../../types/components/checkbox"
-import checkboxTheme from "../../themes/checkbox.theme"
-
-const checkbox = scv(checkboxTheme)
-
-const props = withDefaults(defineProps<CheckboxProps & { modelValue?: boolean }>(), {
-  size: "md",
-  color: "primary"
-})
-
-const emit = defineEmits<{
-  (e: "update:modelValue", value: boolean): void
-  (e: "change", event: Event): void
-}>()
-
-const checked = computed({
-  get: () => props.modelValue ?? props.checked ?? false,
-  set: (val) => emit("update:modelValue", val)
-})
-
-const resolvedClasses = computed(() =>
-  resolveClasses(
-    checkbox,
-    {
-      size: props.size,
-      color: props.color,
-      disabled: props.disabled,
-      theme: props.theme
-    },
-    useUi("checkbox", props.ui),
-    props.class
-  )
-)
-
-function onChange(event: Event) {
-  const target = event.target as HTMLInputElement
-  checked.value = target.checked
-  emit("change", event)
-}
-</script>
-
-<template>
-  <label :class="resolvedClasses.root" data-slot="root">
-    <div :class="resolvedClasses.container" data-slot="container">
-      <input
-        v-bind="$attrs"
-        type="checkbox"
-        :name="name"
-        :checked="checked"
-        :disabled="disabled"
-        :class="resolvedClasses.input"
-        data-slot="input"
-        @change="onChange"
-      />
-      <span v-if="checked" :class="resolvedClasses.indicator" data-slot="indicator">
-        <span class="i-lucide-check h-3 w-3 text-white" />
-      </span>
-    </div>
-    <span v-if="label" :class="resolvedClasses.label" data-slot="label">
-      {{ label }}
-    </span>
-    <slot />
-  </label>
-</template>
+<script setup lang="ts">
+import { computed, useAttrs } from "vue"
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { CheckboxProps } from "../../types/components/checkbox"
+import checkboxTheme from "../../themes/checkbox.theme"
+
+const checkbox = scv(checkboxTheme)
+
+const props = withDefaults(defineProps<CheckboxProps & { modelValue?: boolean }>(), {
+  size: "md",
+  color: "primary"
+})
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: boolean): void
+  (e: "change", event: Event): void
+}>()
+
+const checked = computed({
+  get: () => props.modelValue ?? props.checked ?? false,
+  set: (val) => emit("update:modelValue", val)
+})
+
+const attrs = useAttrs()
+
+const resolvedClasses = computed(() =>
+  resolveClasses(
+    checkbox,
+    {
+      size: props.size,
+      color: props.color,
+      disabled: props.disabled,
+      theme: props.theme
+    },
+    useUi("checkbox", props.ui),
+    props.class
+  )
+)
+
+function onChange(event: Event) {
+  const target = event.target as HTMLInputElement
+  checked.value = target.checked
+  emit("change", event)
+}
+</script>
+
+<template>
+  <label :class="resolvedClasses.root" data-slot="root">
+    <div :class="resolvedClasses.container" data-slot="container">
+      <input
+        v-bind="attrs"
+        type="checkbox"
+        :name="name"
+        :checked="checked"
+        :disabled="disabled"
+        :class="resolvedClasses.input"
+        data-slot="input"
+        @change="onChange"
+      />
+      <span v-if="checked" :class="resolvedClasses.indicator" data-slot="indicator">
+        <span class="i-lucide-check h-3 w-3 text-white" />
+      </span>
+    </div>
+    <span v-if="label" :class="resolvedClasses.label" data-slot="label">
+      {{ label }}
+    </span>
+    <slot />
+  </label>
+</template>

package/src/components/vue/RLVFooter.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { computed } from "vue"
+import { computed, useAttrs } from "vue"
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
 import type { FooterProps } from "../../types/components/footer"
 import footerTheme from "../../themes/footer.theme"
 
+const attrs = useAttrs()
 const footer = scv(footerTheme)
 
 const { contain = false, ui: uiProp, class: className } = defineProps<FooterProps>()
@@ -21,7 +22,7 @@ const resolvedClasses = computed(() =>
 </script>
 
 <template>
-  <footer :class="[resolvedClasses.root]" data-slot="root" v-bind="$attrs">
+  <footer :class="[resolvedClasses.root]" data-slot="root" v-bind="attrs">
     <div :class="resolvedClasses.container">
       <div :class="resolvedClasses.left" data-slot="left">
         <slot name="left" />

package/src/components/vue/RLVForm.vue

@@ -1,44 +1,44 @@
-<script setup lang="ts">
-import { computed, ref } from "vue"
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { FormProps } from "../../types/components/form"
-import formTheme from "../../themes/form.theme"
-
-const form = scv(formTheme)
-
-const props = defineProps<FormProps>()
-
-const emit = defineEmits<{
-  (e: "submit", event: { data: any }): void
-  (e: "error", errors: any[]): void
-}>()
-
-const resolvedClasses = computed(() =>
-  resolveClasses(form, {}, useUi("form", props.ui), props.class)
-)
-
-async function onSubmit(event: Event) {
-  event.preventDefault()
-
-  if (props.schema && props.state) {
-    try {
-      const data = await props.schema.parseAsync(props.state)
-      emit("submit", { data })
-    } catch (err: any) {
-      if (err.errors) {
-        emit("error", err.errors)
-      }
-      console.error("Form validation failed", err)
-    }
-  } else {
-    emit("submit", { data: props.state })
-  }
-}
-</script>
-
-<template>
-  <form :class="resolvedClasses.root" data-slot="root" @submit="onSubmit">
-    <slot :ui="resolvedClasses" />
-  </form>
-</template>
+<script setup lang="ts">
+import { computed, ref } from "vue"
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { FormProps } from "../../types/components/form"
+import formTheme from "../../themes/form.theme"
+
+const form = scv(formTheme)
+
+const props = defineProps<FormProps>()
+
+const emit = defineEmits<{
+  (e: "submit", event: { data: any }): void
+  (e: "error", errors: any[]): void
+}>()
+
+const resolvedClasses = computed(() =>
+  resolveClasses(form, {}, useUi("form", props.ui), props.class)
+)
+
+async function onSubmit(event: Event) {
+  event.preventDefault()
+
+  if (props.schema && props.state) {
+    try {
+      const data = await props.schema.parseAsync(props.state)
+      emit("submit", { data })
+    } catch (err: any) {
+      if (err.errors) {
+        emit("error", err.errors)
+      }
+      console.error("Form validation failed", err)
+    }
+  } else {
+    emit("submit", { data: props.state })
+  }
+}
+</script>
+
+<template>
+  <form :class="resolvedClasses.root" data-slot="root" @submit="onSubmit">
+    <slot :ui="resolvedClasses" />
+  </form>
+</template>