@rimelight/ui 0.0.34 → 0.0.36

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,5 +1,5 @@
 <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 { CheckboxProps } from "../../types/components/checkbox"
@@ -22,6 +22,8 @@ const checked = computed({
   set: (val) => emit("update:modelValue", val)
 })
 
+const attrs = useAttrs()
+
 const resolvedClasses = computed(() =>
   resolveClasses(
     checkbox,
@@ -47,7 +49,7 @@ function onChange(event: Event) {
   <label :class="resolvedClasses.root" data-slot="root">
     <div :class="resolvedClasses.container" data-slot="container">
       <input
-        v-bind="$attrs"
+        v-bind="attrs"
         type="checkbox"
         :name="name"
         :checked="checked"

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/RLVHeader.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref } from "vue"
+import { computed, onMounted, onUnmounted, ref, useAttrs } from "vue"
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
 import type { HeaderProps } from "../../types/components/header"
 import headerTheme from "../../themes/header.theme"
 import { getHeaderStack } from "../../utils/headerStack"
 
+const attrs = useAttrs()
 const header = scv(headerTheme)
 
 const {
@@ -102,7 +103,7 @@ onUnmounted(() => {
     :class="[resolvedClasses.root]"
     :style="fixedStyle"
     data-slot="root"
-    v-bind="$attrs"
+    v-bind="attrs"
   >
     <div ref="contentRef" :class="resolvedClasses.content">
       <div :class="resolvedClasses.container">

package/src/components/vue/RLVIcon.vue

@@ -1,5 +1,5 @@
 <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 { IconProps } from "../../types/components/icon"
@@ -9,6 +9,8 @@ const icon = scv(iconTheme)
 
 const { name, size = "md", ui: uiProp, class: className } = defineProps<IconProps>()
 
+const attrs = useAttrs()
+
 const resolvedClasses = computed(() =>
   resolveClasses(icon, { size }, useUi("icon", uiProp), className)
 )
@@ -19,7 +21,7 @@ defineSlots<{
 </script>
 
 <template>
-  <span v-bind="$attrs" :class="[resolvedClasses.root, name]" data-slot="root" aria-hidden="true">
+  <span v-bind="attrs" :class="[resolvedClasses.root, name]" data-slot="root" aria-hidden="true">
     <slot />
   </span>
 </template>

package/src/components/vue/RLVInput.vue

@@ -1,5 +1,5 @@
 <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 { InputProps } from "../../types/components/input"
@@ -21,6 +21,7 @@ const emit = defineEmits<{
   (e: "blur", event: FocusEvent): void
 }>()
 
+const attrs = useAttrs()
 const slots = useSlots()
 
 const value = computed({
@@ -68,7 +69,7 @@ function onChange(event: Event) {
     </slot>
 
     <input
-      v-bind="$attrs"
+      v-bind="attrs"
       :type="type"
       :name="name"
       :value="value"
@@ -80,8 +81,8 @@ function onChange(event: Event) {
       data-slot="input"
       @input="onInput"
       @change="onChange"
-      @focus="emit('focus', $event)"
-      @blur="emit('blur', $event)"
+      @focus="(e) => emit('focus', e)"
+      @blur="(e) => emit('blur', e)"
     />
 
     <slot name="trailing" :ui="resolvedClasses">

package/src/components/vue/RLVLogo.vue

@@ -1,11 +1,12 @@
 <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 { LogoProps } from "../../types/components/logo"
 import logoTheme from "../../themes/logo.theme"
 import { getUIConfig } from "virtual:rimelight-ui"
 
+const attrs = useAttrs()
 const logo = scv(logoTheme)
 
 const {
@@ -23,6 +24,26 @@ defineSlots<{
 
 const resolvedClasses = computed(() => resolveClasses(logo, {}, useUi("logo", uiProp), className))
 
+const logoFiles = import.meta.glob<{ default: any }>(
+  "/src/assets/**/*.{svg,png,jpg,jpeg,webp,gif}",
+  { eager: true }
+)
+
+function resolveLogo(pathStr: string | null | undefined): any {
+  if (!pathStr) return null
+  let lookupPath = pathStr
+  if (lookupPath.startsWith("./")) {
+    lookupPath = lookupPath.substring(1)
+  } else if (!lookupPath.startsWith("/")) {
+    lookupPath = "/" + lookupPath
+  }
+  const file = logoFiles[lookupPath]
+  if (file) {
+    return file.default?.src || file.default
+  }
+  return pathStr
+}
+
 const logoSrc = computed<string | null>(() => {
   const globalConfig = getUIConfig()
   const rcLogos = globalConfig.logos as Record<string, any>
@@ -35,7 +56,8 @@ const logoSrc = computed<string | null>(() => {
     }
   }
 
-  if (src && typeof src === "string" && src) return src
+  const resolved = resolveLogo(src)
+  if (resolved && typeof resolved === "string" && resolved) return resolved
 
   return null
 })
@@ -52,7 +74,7 @@ const Tag = computed(() => (href ? "a" : "div"))
 
 <template>
   <component
-    v-bind="$attrs"
+    v-bind="attrs"
     :is="Tag"
     :href="Tag === 'a' ? href : undefined"
     :aria-label="alt || variant"

package/src/components/vue/RLVPlaceholder.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 { PlaceholderProps } from "../../types/components/placeholder"
 import placeholderTheme from "../../themes/placeholder.theme"
 
+const attrs = useAttrs()
 const placeholder = scv(placeholderTheme)
 
 const { ui: uiProp, class: className } = defineProps<PlaceholderProps>()
@@ -22,7 +23,7 @@ const resolvedClasses = computed(() =>
 </script>
 
 <template>
-  <div :class="resolvedClasses.base" v-bind="$attrs">
+  <div :class="resolvedClasses.base" v-bind="attrs">
     <svg :class="resolvedClasses.svg">
       <defs>
         <pattern

package/src/components/vue/RLVPost.vue

@@ -8,13 +8,19 @@ import postTheme from "../../themes/post.theme"
 const post = scv(postTheme)
 
 const props = withDefaults(defineProps<PostProps>(), {
-  variant: "soft"
+  variant: "soft",
+  orientation: "vertical"
 })
 
 const slots = useSlots()
 
 const resolvedClasses = computed(() =>
-  resolveClasses(post, { variant: props.variant }, useUi("post", props.ui), props.class)
+  resolveClasses(
+    post,
+    { variant: props.variant, orientation: props.orientation },
+    useUi("post", props.ui),
+    props.class
+  )
 )
 
 const Tag = props.to ? "a" : "div"

package/src/components/vue/RLVProgress.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { computed } from "vue"
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ProgressProps } from "../../types/components/progress"
+import progressTheme from "../../themes/progress.theme"
+
+const progress = scv(progressTheme)
+
+const props = withDefaults(defineProps<ProgressProps & { modelValue?: number }>(), {
+  modelValue: 0,
+  max: 100,
+  color: "primary",
+  size: "md"
+})
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: number): void
+}>()
+
+const value = computed({
+  get: () => props.value ?? props.modelValue ?? 0,
+  set: (val) => emit("update:modelValue", val)
+})
+
+const percentage = computed(() => {
+  if (props.max <= 0) return 0
+  return Math.min(100, Math.max(0, (value.value / props.max) * 100))
+})
+
+const resolvedClasses = computed(() =>
+  resolveClasses(
+    progress,
+    {
+      color: props.color,
+      size: props.size,
+      theme: props.theme
+    },
+    useUi("progress", props.ui),
+    props.class
+  )
+)
+</script>
+
+<template>
+  <div
+    role="progressbar"
+    :aria-valuenow="value"
+    :aria-valuemin="0"
+    :aria-valuemax="max"
+    :class="resolvedClasses.root"
+    data-slot="root"
+  >
+    <div
+      :class="resolvedClasses.indicator"
+      :style="{ width: percentage + '%' }"
+      data-slot="indicator"
+    />
+  </div>
+</template>