@rimelight/ui 0.0.33 → 0.0.35

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>

package/src/components/vue/RLVScrollToTop.vue

@@ -4,8 +4,9 @@ import { useUi, resolveClasses } from "../../utils"
 import type { ScrollToTopProps } from "../../types/components/scroll-to-top"
 import scrollToTopTheme from "../../themes/scroll-to-top.theme"
 import { useScrollToTop } from "../../composables/useScrollToTop"
-import { computed } from "vue"
+import { computed, onMounted, onUnmounted, watch, useAttrs } from "vue"
 
+const attrs = useAttrs()
 const scrollToTop = scv(scrollToTopTheme)
 
 const {
@@ -28,49 +29,49 @@ const {
   threshold
 })
 
-const circumference = 2 * Math.PI * 45
-const percentPx = circumference / 100
+const instanceId = `rla-vue-${Math.random().toString(36).slice(2, 8)}`
+const gaugeBorderWidth = progressWidth * 0.5
 
-const currentPercent = computed(() => scrollPercentage.value)
-const percentageInPx = computed(() => `${percentPx}px`)
-const durationInSeconds = computed(() => `${duration}s`)
+let styleEl: HTMLStyleElement | null = null
+
+function updateCssVars() {
+  if (!styleEl) return
+  styleEl.textContent = `
+    [data-rla-instance="${instanceId}"] {
+      --gauge-track-border-color: var(--color-${color}-900);
+      --gauge-track-bg: var(--color-${color}-950);
+      --gauge-stroke-width: ${gaugeBorderWidth}px;
+      --gauge-color: var(--color-${color}-500);
+      --gauge-progress: ${scrollPercentage.value};
+    }
+  `
+}
+
+watch(scrollPercentage, updateCssVars)
+
+onMounted(() => {
+  const nonce = document.querySelector('meta[name="csp-nonce"]')?.getAttribute("content") ?? ""
+  styleEl = document.createElement("style")
+  if (nonce) styleEl.setAttribute("nonce", nonce)
+  document.head.appendChild(styleEl)
+  updateCssVars()
+})
+
+onUnmounted(() => {
+  if (styleEl) styleEl.remove()
+})
 </script>
 
 <template>
   <div
+    :data-rla-instance="instanceId"
     :class="['rla-scroll-to-top fixed bottom-6 right-6 z-50', { visible: isVisible }, classes.root]"
-    v-bind="$attrs"
+    v-bind="attrs"
   >
     <button type="button" :class="classes.button" aria-label="Scroll to top" @click="scrollToTopFn">
       <div :class="classes.progressBase">
-        <svg :class="classes.svg" viewBox="0 0 100 100" shape-rendering="geometricPrecision">
-          <circle
-            cx="50"
-            cy="50"
-            r="45"
-            fill="var(--color-primary-950)"
-            :stroke-width="progressWidth"
-            stroke-dashoffset="0"
-            stroke-linecap="round"
-            class="gauge-secondary-stroke opacity-100"
-          />
-          <circle
-            v-if="showProgress"
-            cx="50"
-            cy="50"
-            r="45"
-            fill="transparent"
-            :stroke-width="progressWidth"
-            stroke-linecap="round"
-            class="gauge-primary-stroke opacity-100"
-            :style="{
-              '--stroke-percent': currentPercent,
-              '--percent-to-px': percentageInPx,
-              '--circumference': circumference,
-              '--duration': durationInSeconds
-            }"
-          />
-        </svg>
+        <div class="gauge-track"></div>
+        <div v-if="showProgress" class="gauge-progress"></div>
         <div :class="classes.iconContainer">
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -106,27 +107,39 @@ const durationInSeconds = computed(() => `${duration}s`)
 }
 
 .progress-circle-base {
+  position: relative;
   transform: translateZ(0);
 }
 
-.gauge-primary-stroke {
-  stroke: var(--color-primary-500);
-  --stroke-percent: v-bind(currentPercent);
-  --percent-to-px: v-bind(percentageInPx);
-  --circumference: v-bind(circumference);
-  stroke-dasharray: calc(var(--stroke-percent) * var(--percent-to-px)) var(--circumference);
-  transition:
-    stroke-dasharray v-bind(durationInSeconds) ease,
-    stroke v-bind(durationInSeconds) ease;
-  transform: rotate(-90deg);
-  transform-origin: center;
-  shape-rendering: geometricPrecision;
+.gauge-track {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  border-style: solid;
+  border-width: var(--gauge-stroke-width, 3px);
+  border-color: var(--gauge-track-border-color, var(--color-primary-900));
+  background-color: var(--gauge-track-bg, var(--color-primary-950));
 }
 
-.gauge-secondary-stroke {
-  stroke: var(--color-primary-900);
-  stroke-dasharray: 282.6;
-  transform: rotate(-90deg);
-  transform-origin: center;
+.gauge-progress {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  background: conic-gradient(
+    from 0deg,
+    var(--gauge-color, var(--color-primary-500)) 0deg,
+    var(--gauge-color, var(--color-primary-500)) calc(var(--gauge-progress, 0) * 3.6deg),
+    transparent calc(var(--gauge-progress, 0) * 3.6deg)
+  );
+  -webkit-mask: radial-gradient(
+    circle closest-side,
+    transparent calc(100% - var(--gauge-stroke-width, 3px)),
+    #000 calc(100% - var(--gauge-stroke-width, 3px))
+  );
+  mask: radial-gradient(
+    circle closest-side,
+    transparent calc(100% - var(--gauge-stroke-width, 3px)),
+    #000 calc(100% - var(--gauge-stroke-width, 3px))
+  );
 }
 </style>

package/src/components/vue/RLVSection.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 { PageSectionProps } from "../../types/components/page-section"
@@ -24,6 +24,7 @@ const {
   links
 } = defineProps<PageSectionProps>()
 
+const attrs = useAttrs()
 const slots = useSlots()
 
 const resolvedClasses = computed(() =>
@@ -51,9 +52,9 @@ const resolvedClasses = computed(() =>
     data-slot="root"
     :data-orientation="orientation"
     :class="[resolvedClasses.root]"
-    v-bind="$attrs"
+    v-bind="attrs"
   >
-    <slot v-if="$slots.background" name="background">
+    <slot v-if="slots.background" name="background">
       <div :class="resolvedClasses.background" data-slot="background">
         <slot name="background" />
       </div>
@@ -64,26 +65,26 @@ const resolvedClasses = computed(() =>
     <div data-slot="container" :class="resolvedClasses.container">
       <div
         v-if="
-          $slots.header ||
+          slots.header ||
           icon ||
           headline ||
           title ||
           description ||
-          $slots.body ||
-          $slots.footer ||
-          $slots.links ||
+          slots.body ||
+          slots.footer ||
+          slots.links ||
           links?.length
         "
         data-slot="wrapper"
         :class="resolvedClasses.wrapper"
       >
         <div
-          v-if="$slots.header || icon || headline || title || description"
+          v-if="slots.header || icon || headline || title || description"
           data-slot="header"
           :class="resolvedClasses.header"
         >
           <slot name="header">
-            <div v-if="icon || $slots.leading" data-slot="leading" :class="resolvedClasses.leading">
+            <div v-if="icon || slots.leading" data-slot="leading" :class="resolvedClasses.leading">
               <slot name="leading" :ui="resolvedClasses">
                 <RLVIcon
                   v-if="icon"
@@ -119,18 +120,18 @@ const resolvedClasses = computed(() =>
           </slot>
         </div>
 
-        <div v-if="$slots.body" data-slot="body" :class="resolvedClasses.body">
+        <div v-if="slots.body" data-slot="body" :class="resolvedClasses.body">
           <slot name="body" />
         </div>
 
         <div
-          v-if="$slots.footer || $slots.links || links?.length"
+          v-if="slots.footer || slots.links || links?.length"
           data-slot="footer"
           :class="resolvedClasses.footer"
         >
           <slot name="footer">
             <div
-              v-if="links?.length || $slots.links"
+              v-if="links?.length || slots.links"
               data-slot="links"
               :class="resolvedClasses.links"
             >
@@ -141,7 +142,7 @@ const resolvedClasses = computed(() =>
         </div>
       </div>
 
-      <slot v-if="$slots.default" />
+      <slot v-if="slots.default" />
       <div v-else-if="orientation === 'horizontal'" class="hidden lg:block" />
     </div>
 

package/src/components/vue/RLVToast.vue

@@ -1,68 +1,81 @@
-<script setup lang="ts">
-import { computed } from "vue"
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { ToastProps } from "../../types/components/toast"
-import toastTheme from "../../themes/toast.theme"
-
-const toast = scv(toastTheme)
-
-const props = withDefaults(defineProps<ToastProps & { id?: string | number }>(), {
-  variant: "default",
-  duration: 5000
-})
-
-const emit = defineEmits<{
-  (e: "close", id: string | number | undefined): void
-}>()
-
-const resolvedClasses = computed(() =>
-  resolveClasses(toast, { variant: props.variant }, useUi("toast", props.ui), props.class)
-)
-
-const variantIcons: Record<string, string> = {
-  default: "i-lucide-bell",
-  destructive: "i-lucide-alert-circle",
-  success: "i-lucide-check-circle-2",
-  warning: "i-lucide-alert-triangle",
-  info: "i-lucide-info"
-}
-
-const icon = computed(() => variantIcons[props.variant] ?? variantIcons.default!)
-</script>
-
-<template>
-  <div
-    :class="resolvedClasses.root"
-    data-slot="root"
-    role="alert"
-    aria-live="assertive"
-    aria-atomic="true"
-  >
-    <span :class="[icon, 'size-4 shrink-0 mt-0.5']" aria-hidden="true" />
-
-    <div class="flex flex-col gap-0.5 flex-1 min-w-0">
-      <div v-if="title" :class="resolvedClasses.title" data-slot="title">
-        {{ title }}
-      </div>
-      <div v-if="description" :class="resolvedClasses.description" data-slot="description">
-        {{ description }}
-      </div>
-      <slot />
-    </div>
-
-    <button v-if="actionLabel" type="button" :class="resolvedClasses.action" data-slot="action">
-      {{ actionLabel }}
-    </button>
-
-    <button
-      type="button"
-      :class="resolvedClasses.close"
-      data-slot="close"
-      aria-label="Dismiss notification"
-      @click="emit('close', id)"
-    >
-      <span class="i-lucide-x size-3.5" aria-hidden="true" />
-    </button>
-  </div>
-</template>
+<script setup lang="ts">
+import { computed } from "vue"
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ToastProps } from "../../types/components/toast"
+import toastTheme from "../../themes/toast.theme"
+
+const toast = scv(toastTheme)
+
+const props = withDefaults(defineProps<ToastProps & { id?: string | number }>(), {
+  variant: "default",
+  duration: 5000
+})
+
+const emit = defineEmits<{
+  (e: "close", id: string | number | undefined): void
+}>()
+
+const resolvedClasses = computed(() =>
+  resolveClasses(toast, { variant: props.variant }, useUi("toast", props.ui), props.class)
+)
+
+const variantIcons: Record<string, string> = {
+  default: "i-lucide-bell",
+  destructive: "i-lucide-alert-circle",
+  success: "i-lucide-check-circle-2",
+  warning: "i-lucide-alert-triangle",
+  info: "i-lucide-info"
+}
+
+const icon = computed(() => variantIcons[props.variant] ?? variantIcons.default!)
+</script>
+
+<template>
+  <div
+    :class="resolvedClasses.root"
+    data-slot="root"
+    role="alert"
+    aria-live="assertive"
+    aria-atomic="true"
+  >
+    <span :class="[icon, 'size-4 shrink-0 mt-0.5']" aria-hidden="true" />
+
+    <div class="flex flex-col gap-0.5 flex-1 min-w-0">
+      <div v-if="title" :class="resolvedClasses.title" data-slot="title">
+        {{ title }}
+      </div>
+      <div v-if="description" :class="resolvedClasses.description" data-slot="description">
+        {{ description }}
+      </div>
+      <slot />
+
+      <div
+        v-if="$slots.actions || actionLabel"
+        class="flex items-center justify-end gap-2 mt-3"
+        data-slot="actions"
+      >
+        <slot name="actions">
+          <button
+            v-if="actionLabel"
+            type="button"
+            :class="resolvedClasses.action"
+            data-slot="action"
+          >
+            {{ actionLabel }}
+          </button>
+        </slot>
+      </div>
+    </div>
+
+    <button
+      type="button"
+      :class="resolvedClasses.close"
+      data-slot="close"
+      aria-label="Dismiss notification"
+      @click="emit('close', id)"
+    >
+      <span class="i-lucide-x size-3.5" aria-hidden="true" />
+    </button>
+  </div>
+</template>

package/src/components/vue/RLVToaster.vue

@@ -1,29 +1,29 @@
-<script setup lang="ts">
-import { useToast } from "../../composables/useToast"
-import RLVToast from "./RLVToast.vue"
-
-const { toasts, remove } = useToast()
-</script>
-
-<template>
-  <div
-    class="fixed bottom-0 right-0 p-4 z-[100] flex flex-col gap-2 w-full max-w-sm pointer-events-none"
-  >
-    <TransitionGroup
-      enter-active-class="transition duration-300 ease-out"
-      enter-from-class="transform translate-y-2 opacity-0"
-      enter-to-class="transform translate-y-0 opacity-100"
-      leave-active-class="transition duration-200 ease-in"
-      leave-from-class="transform translate-y-0 opacity-100"
-      leave-to-class="transform translate-y-2 opacity-0"
-    >
-      <RLVToast
-        v-for="toast in toasts"
-        :key="toast.id"
-        v-bind="toast"
-        class="pointer-events-auto"
-        @close="remove"
-      />
-    </TransitionGroup>
-  </div>
-</template>
+<script setup lang="ts">
+import { useToast } from "../../composables/useToast"
+import RLVToast from "./RLVToast.vue"
+
+const { toasts, remove } = useToast()
+</script>
+
+<template>
+  <div
+    class="fixed bottom-0 right-0 p-4 z-[100] flex flex-col gap-2 w-full max-w-sm pointer-events-none"
+  >
+    <TransitionGroup
+      enter-active-class="transition duration-300 ease-out"
+      enter-from-class="transform translate-y-2 opacity-0"
+      enter-to-class="transform translate-y-0 opacity-100"
+      leave-active-class="transition duration-200 ease-in"
+      leave-from-class="transform translate-y-0 opacity-100"
+      leave-to-class="transform translate-y-2 opacity-0"
+    >
+      <RLVToast
+        v-for="toast in toasts"
+        :key="toast.id"
+        v-bind="toast"
+        class="pointer-events-auto"
+        @close="remove"
+      />
+    </TransitionGroup>
+  </div>
+</template>

package/src/composables/index.ts

@@ -1,3 +1,4 @@
-export { useScrollToTop } from "./useScrollToTop"
-export { useToast } from "./useToast"
-export { headerLayersStore } from "./useHeaderStore"
+export { useScrollToTop } from "./useScrollToTop"
+export { useToast } from "./useToast"
+export { headerLayersStore } from "./useHeaderStore"
+export { useShortcuts } from "./useShortcuts"

package/src/composables/useHeaderStore.ts

@@ -1,14 +1,14 @@
-import { map } from "nanostores"
-
-export interface HeaderLayerInfo {
-  order: number
-  isVisible: boolean
-  height: number
-}
-
-/**
- * Global store tracking all registered header layers.
- * This allows child components to subscribe to header layer changes
- * even across Vue/Astro boundaries, since nanostores is framework-agnostic.
- */
-export const headerLayersStore = map<Record<string, HeaderLayerInfo>>({})
+import { map } from "nanostores"
+
+export interface HeaderLayerInfo {
+  type: "banner" | "header"
+  order: number
+  isVisible: boolean
+  height: number
+}
+
+/**
+ * Global store tracking all registered header layers. This allows child components to subscribe to
+ * header layer changes even across Vue/Astro boundaries, since nanostores is framework-agnostic.
+ */
+export const headerLayersStore = map<Record<string, HeaderLayerInfo>>({})

package/src/composables/useScrollToTop.ts

@@ -1,62 +1,62 @@
-import { ref, onMounted, onUnmounted, type Ref } from "vue"
-
-export interface UseScrollToTopOptions {
-  /**
-   * The scroll threshold (in pixels) before the button becomes visible.
-   *
-   * @default 200
-   */
-  threshold?: number
-}
-
-export interface UseScrollToTopReturn {
-  /**
-   * Whether the scroll-to-top button should be visible.
-   */
-  isVisible: Ref<boolean>
-  /**
-   * The current scroll percentage (0-100).
-   */
-  scrollPercentage: Ref<number>
-  /**
-   * Scrolls the window to the top with a smooth animation.
-   */
-  scrollToTop: () => void
-}
-
-function scrollToTop() {
-  window.scrollTo({
-    top: 0,
-    behavior: "smooth"
-  })
-}
-
-export function useScrollToTop(options: UseScrollToTopOptions = {}): UseScrollToTopReturn {
-  const { threshold = 200 } = options
-
-  const isVisible = ref(false)
-  const scrollPercentage = ref(0)
-
-  function updateScrollState() {
-    const scrollTop = window.scrollY || document.documentElement.scrollTop
-    const scrollHeight = document.documentElement.scrollHeight - window.innerHeight
-
-    isVisible.value = scrollTop > threshold
-    scrollPercentage.value = scrollHeight > 0 ? (scrollTop / scrollHeight) * 100 : 0
-  }
-
-  onMounted(() => {
-    window.addEventListener("scroll", updateScrollState, { passive: true })
-    updateScrollState()
-  })
-
-  onUnmounted(() => {
-    window.removeEventListener("scroll", updateScrollState)
-  })
-
-  return {
-    isVisible,
-    scrollPercentage,
-    scrollToTop
-  }
-}
+import { ref, onMounted, onUnmounted, type Ref } from "vue"
+
+export interface UseScrollToTopOptions {
+  /**
+   * The scroll threshold (in pixels) before the button becomes visible.
+   *
+   * @default 200
+   */
+  threshold?: number
+}
+
+export interface UseScrollToTopReturn {
+  /**
+   * Whether the scroll-to-top button should be visible.
+   */
+  isVisible: Ref<boolean>
+  /**
+   * The current scroll percentage (0-100).
+   */
+  scrollPercentage: Ref<number>
+  /**
+   * Scrolls the window to the top with a smooth animation.
+   */
+  scrollToTop: () => void
+}
+
+function scrollToTop() {
+  window.scrollTo({
+    top: 0,
+    behavior: "smooth"
+  })
+}
+
+export function useScrollToTop(options: UseScrollToTopOptions = {}): UseScrollToTopReturn {
+  const { threshold = 200 } = options
+
+  const isVisible = ref(false)
+  const scrollPercentage = ref(0)
+
+  function updateScrollState() {
+    const scrollTop = window.scrollY || document.documentElement.scrollTop
+    const scrollHeight = document.documentElement.scrollHeight - window.innerHeight
+
+    isVisible.value = scrollTop > threshold
+    scrollPercentage.value = scrollHeight > 0 ? (scrollTop / scrollHeight) * 100 : 0
+  }
+
+  onMounted(() => {
+    window.addEventListener("scroll", updateScrollState, { passive: true })
+    updateScrollState()
+  })
+
+  onUnmounted(() => {
+    window.removeEventListener("scroll", updateScrollState)
+  })
+
+  return {
+    isVisible,
+    scrollPercentage,
+    scrollToTop
+  }
+}