@rimelight/ui 0.0.33 → 0.0.34

package/src/components/vue/RLVPost.vue

@@ -1,63 +1,63 @@
-<script setup lang="ts">
-import { computed, useSlots } from "vue"
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { PostProps } from "../../types/components/post"
-import postTheme from "../../themes/post.theme"
-
-const post = scv(postTheme)
-
-const props = withDefaults(defineProps<PostProps>(), {
-  variant: "soft"
-})
-
-const slots = useSlots()
-
-const resolvedClasses = computed(() =>
-  resolveClasses(post, { variant: props.variant }, useUi("post", props.ui), props.class)
-)
-
-const Tag = props.to ? "a" : "div"
-const formattedDate = computed(() =>
-  props.date ? (props.date instanceof Date ? props.date.toLocaleDateString() : props.date) : null
-)
-</script>
-
-<template>
-  <component :is="Tag" :href="to" :class="resolvedClasses.root" data-slot="root">
-    <slot name="image" :ui="resolvedClasses">
-      <div v-if="image" :class="resolvedClasses.imageWrapper" data-slot="image-wrapper">
-        <img
-          :src="typeof image === 'string' ? image : image.src"
-          :alt="title"
-          :class="resolvedClasses.image"
-          data-slot="image"
-        />
-      </div>
-    </slot>
-
-    <div :class="resolvedClasses.content" data-slot="content">
-      <slot name="title" :ui="resolvedClasses">
-        <h3 v-if="title" :class="resolvedClasses.title" data-slot="title">{{ title }}</h3>
-      </slot>
-
-      <slot name="description" :ui="resolvedClasses">
-        <p v-if="description" :class="resolvedClasses.description" data-slot="description">
-          {{ description }}
-        </p>
-      </slot>
-
-      <slot name="date" :ui="resolvedClasses">
-        <time v-if="formattedDate" :class="resolvedClasses.date" data-slot="date">{{
-          formattedDate
-        }}</time>
-      </slot>
-
-      <slot />
-    </div>
-
-    <div v-if="slots.footer" :class="resolvedClasses.footer" data-slot="footer">
-      <slot name="footer" :ui="resolvedClasses" />
-    </div>
-  </component>
-</template>
+<script setup lang="ts">
+import { computed, useSlots } from "vue"
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { PostProps } from "../../types/components/post"
+import postTheme from "../../themes/post.theme"
+
+const post = scv(postTheme)
+
+const props = withDefaults(defineProps<PostProps>(), {
+  variant: "soft"
+})
+
+const slots = useSlots()
+
+const resolvedClasses = computed(() =>
+  resolveClasses(post, { variant: props.variant }, useUi("post", props.ui), props.class)
+)
+
+const Tag = props.to ? "a" : "div"
+const formattedDate = computed(() =>
+  props.date ? (props.date instanceof Date ? props.date.toLocaleDateString() : props.date) : null
+)
+</script>
+
+<template>
+  <component :is="Tag" :href="to" :class="resolvedClasses.root" data-slot="root">
+    <slot name="image" :ui="resolvedClasses">
+      <div v-if="image" :class="resolvedClasses.imageWrapper" data-slot="image-wrapper">
+        <img
+          :src="typeof image === 'string' ? image : image.src"
+          :alt="title"
+          :class="resolvedClasses.image"
+          data-slot="image"
+        />
+      </div>
+    </slot>
+
+    <div :class="resolvedClasses.content" data-slot="content">
+      <slot name="title" :ui="resolvedClasses">
+        <h3 v-if="title" :class="resolvedClasses.title" data-slot="title">{{ title }}</h3>
+      </slot>
+
+      <slot name="description" :ui="resolvedClasses">
+        <p v-if="description" :class="resolvedClasses.description" data-slot="description">
+          {{ description }}
+        </p>
+      </slot>
+
+      <slot name="date" :ui="resolvedClasses">
+        <time v-if="formattedDate" :class="resolvedClasses.date" data-slot="date">{{
+          formattedDate
+        }}</time>
+      </slot>
+
+      <slot />
+    </div>
+
+    <div v-if="slots.footer" :class="resolvedClasses.footer" data-slot="footer">
+      <slot name="footer" :ui="resolvedClasses" />
+    </div>
+  </component>
+</template>

package/src/components/vue/RLVPosts.vue

@@ -1,21 +1,21 @@
-<script setup lang="ts">
-import { computed } from "vue"
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { PostsProps } from "../../types/components/posts"
-import postsTheme from "../../themes/posts.theme"
-
-const posts = scv(postsTheme)
-
-const props = defineProps<PostsProps>()
-
-const resolvedClasses = computed(() =>
-  resolveClasses(posts, {}, useUi("posts", props.ui), props.class)
-)
-</script>
-
-<template>
-  <div :class="resolvedClasses.root" data-slot="root">
-    <slot />
-  </div>
-</template>
+<script setup lang="ts">
+import { computed } from "vue"
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { PostsProps } from "../../types/components/posts"
+import postsTheme from "../../themes/posts.theme"
+
+const posts = scv(postsTheme)
+
+const props = defineProps<PostsProps>()
+
+const resolvedClasses = computed(() =>
+  resolveClasses(posts, {}, useUi("posts", props.ui), props.class)
+)
+</script>
+
+<template>
+  <div :class="resolvedClasses.root" data-slot="root">
+    <slot />
+  </div>
+</template>

package/src/components/vue/RLVToast.vue

@@ -1,68 +1,68 @@
-<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>
+
+    <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>

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,3 @@
-export { useScrollToTop } from "./useScrollToTop"
-export { useToast } from "./useToast"
-export { headerLayersStore } from "./useHeaderStore"
+export { useScrollToTop } from "./useScrollToTop"
+export { useToast } from "./useToast"
+export { headerLayersStore } from "./useHeaderStore"

package/src/composables/useHeaderStore.ts

@@ -1,14 +1,13 @@
-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 {
+  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
+  }
+}

package/src/composables/useToast.ts

@@ -1,42 +1,43 @@
-import { reactive } from "vue"
-
-export interface Toast {
-  id?: string | number
-  title?: string
-  description?: string
-  icon?: string
-  color?: "primary" | "success" | "warning" | "error" | "info" | "neutral"
-  timeout?: number
-  callback?: () => void
-}
-
-const toasts = reactive<Toast[]>([])
-
-export function useToast() {
-  const add = (toast: Toast) => {
-    const id = toast.id || Date.now()
-    const newToast = { ...toast, id }
-    toasts.push(newToast)
-
-    if (toast.timeout !== 0) {
-      setTimeout(() => {
-        remove(id)
-      }, toast.timeout || 5000)
-    }
-
-    return newToast
-  }
-
-  const remove = (id: string | number) => {
-    const index = toasts.findIndex((t) => t.id === id)
-    if (index !== -1) {
-      toasts.splice(index, 1)
-    }
-  }
-
-  return {
-    toasts,
-    add,
-    remove
-  }
-}
+import { reactive } from "vue"
+import type { ThemeColor } from "../types"
+
+export interface Toast {
+  id?: string | number
+  title?: string
+  description?: string
+  icon?: string
+  color?: ThemeColor
+  timeout?: number
+  callback?: () => void
+}
+
+const toasts = reactive<Toast[]>([])
+
+export function useToast() {
+  const add = (toast: Toast) => {
+    const id = toast.id || Date.now()
+    const newToast = { ...toast, id }
+    toasts.push(newToast)
+
+    if (toast.timeout !== 0) {
+      setTimeout(() => {
+        remove(id)
+      }, toast.timeout || 5000)
+    }
+
+    return newToast
+  }
+
+  const remove = (id: string | number) => {
+    const index = toasts.findIndex((t) => t.id === id)
+    if (index !== -1) {
+      toasts.splice(index, 1)
+    }
+  }
+
+  return {
+    toasts,
+    add,
+    remove
+  }
+}

package/src/config/index.ts

@@ -1 +1,2 @@
 export * from "./site.config"
+export * from "./security"