@rimelight/ui 0.0.33 → 0.0.35

package/src/components/vue/RLVFormField.vue

@@ -1,58 +1,58 @@
-<script setup lang="ts">
-import { computed, useSlots } from "vue"
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { FormFieldProps } from "../../types/components/form-field"
-import formFieldTheme from "../../themes/form-field.theme"
-
-const formField = scv(formFieldTheme)
-
-const props = withDefaults(defineProps<FormFieldProps>(), {
-  size: "md"
-})
-
-const slots = useSlots()
-
-const resolvedClasses = computed(() =>
-  resolveClasses(
-    formField,
-    {
-      size: props.size
-    },
-    useUi("formField", props.ui),
-    props.class
-  )
-)
-</script>
-
-<template>
-  <div :class="resolvedClasses.root" data-slot="root">
-    <div v-if="label || slots.label" class="flex items-center justify-between gap-2">
-      <label v-if="label || slots.label" :class="resolvedClasses.label" data-slot="label">
-        <slot name="label">{{ label }}</slot>
-        <span v-if="required" class="text-error-500">*</span>
-      </label>
-      <slot name="hint" />
-    </div>
-
-    <p
-      v-if="description || slots.description"
-      :class="resolvedClasses.description"
-      data-slot="description"
-    >
-      <slot name="description">{{ description }}</slot>
-    </p>
-
-    <div class="relative">
-      <slot :ui="resolvedClasses" />
-    </div>
-
-    <p v-if="error || slots.error" :class="resolvedClasses.error" data-slot="error">
-      <slot name="error">{{ error }}</slot>
-    </p>
-
-    <div v-if="slots.help" class="mt-1">
-      <slot name="help" />
-    </div>
-  </div>
-</template>
+<script setup lang="ts">
+import { computed, useSlots } from "vue"
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { FormFieldProps } from "../../types/components/form-field"
+import formFieldTheme from "../../themes/form-field.theme"
+
+const formField = scv(formFieldTheme)
+
+const props = withDefaults(defineProps<FormFieldProps>(), {
+  size: "md"
+})
+
+const slots = useSlots()
+
+const resolvedClasses = computed(() =>
+  resolveClasses(
+    formField,
+    {
+      size: props.size
+    },
+    useUi("formField", props.ui),
+    props.class
+  )
+)
+</script>
+
+<template>
+  <div :class="resolvedClasses.root" data-slot="root">
+    <div v-if="label || slots.label" class="flex items-center justify-between gap-2">
+      <label v-if="label || slots.label" :class="resolvedClasses.label" data-slot="label">
+        <slot name="label">{{ label }}</slot>
+        <span v-if="required" class="text-error-500">*</span>
+      </label>
+      <slot name="hint" />
+    </div>
+
+    <p
+      v-if="description || slots.description"
+      :class="resolvedClasses.description"
+      data-slot="description"
+    >
+      <slot name="description">{{ description }}</slot>
+    </p>
+
+    <div class="relative">
+      <slot :ui="resolvedClasses" />
+    </div>
+
+    <p v-if="error || slots.error" :class="resolvedClasses.error" data-slot="error">
+      <slot name="error">{{ error }}</slot>
+    </p>
+
+    <div v-if="slots.help" class="mt-1">
+      <slot name="help" />
+    </div>
+  </div>
+</template>

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,93 +1,94 @@
-<script setup lang="ts">
-import { computed, useSlots } from "vue"
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { InputProps } from "../../types/components/input"
-import inputTheme from "../../themes/input.theme"
-
-const input = scv(inputTheme)
-
-const props = withDefaults(defineProps<InputProps & { modelValue?: string | number }>(), {
-  type: "text",
-  size: "md",
-  color: "primary"
-})
-
-const emit = defineEmits<{
-  (e: "update:modelValue", value: string | number): void
-  (e: "change", event: Event): void
-  (e: "input", event: Event): void
-  (e: "focus", event: FocusEvent): void
-  (e: "blur", event: FocusEvent): void
-}>()
-
-const slots = useSlots()
-
-const value = computed({
-  get: () => props.modelValue ?? props.value ?? "",
-  set: (val) => emit("update:modelValue", val)
-})
-
-const isLeading = computed(() => !!(props.leadingIcon || slots.leading))
-const isTrailing = computed(() => !!(props.trailingIcon || slots.trailing))
-
-const resolvedClasses = computed(() =>
-  resolveClasses(
-    input,
-    {
-      size: props.size,
-      color: props.color,
-      error: !!props.error,
-      disabled: props.disabled,
-      leading: isLeading.value,
-      trailing: isTrailing.value,
-      theme: props.theme
-    },
-    useUi("input", props.ui),
-    props.class
-  )
-)
-
-function onInput(event: Event) {
-  const target = event.target as HTMLInputElement
-  value.value = target.value
-  emit("input", event)
-}
-
-function onChange(event: Event) {
-  emit("change", event)
-}
-</script>
-
-<template>
-  <div :class="resolvedClasses.root" data-slot="root">
-    <slot name="leading" :ui="resolvedClasses">
-      <span v-if="isLeading" :class="resolvedClasses.leadingIcon" data-slot="leading-icon">
-        <span :class="leadingIcon" aria-hidden="true" />
-      </span>
-    </slot>
-
-    <input
-      v-bind="$attrs"
-      :type="type"
-      :name="name"
-      :value="value"
-      :placeholder="placeholder"
-      :disabled="disabled"
-      :readonly="readonly"
-      :required="required"
-      :class="resolvedClasses.input"
-      data-slot="input"
-      @input="onInput"
-      @change="onChange"
-      @focus="emit('focus', $event)"
-      @blur="emit('blur', $event)"
-    />
-
-    <slot name="trailing" :ui="resolvedClasses">
-      <span v-if="isTrailing" :class="resolvedClasses.trailingIcon" data-slot="trailing-icon">
-        <span :class="trailingIcon" aria-hidden="true" />
-      </span>
-    </slot>
-  </div>
-</template>
+<script setup lang="ts">
+import { computed, useSlots, useAttrs } from "vue"
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { InputProps } from "../../types/components/input"
+import inputTheme from "../../themes/input.theme"
+
+const input = scv(inputTheme)
+
+const props = withDefaults(defineProps<InputProps & { modelValue?: string | number }>(), {
+  type: "text",
+  size: "md",
+  color: "primary"
+})
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: string | number): void
+  (e: "change", event: Event): void
+  (e: "input", event: Event): void
+  (e: "focus", event: FocusEvent): void
+  (e: "blur", event: FocusEvent): void
+}>()
+
+const attrs = useAttrs()
+const slots = useSlots()
+
+const value = computed({
+  get: () => props.modelValue ?? props.value ?? "",
+  set: (val) => emit("update:modelValue", val)
+})
+
+const isLeading = computed(() => !!(props.leadingIcon || slots.leading))
+const isTrailing = computed(() => !!(props.trailingIcon || slots.trailing))
+
+const resolvedClasses = computed(() =>
+  resolveClasses(
+    input,
+    {
+      size: props.size,
+      color: props.color,
+      error: !!props.error,
+      disabled: props.disabled,
+      leading: isLeading.value,
+      trailing: isTrailing.value,
+      theme: props.theme
+    },
+    useUi("input", props.ui),
+    props.class
+  )
+)
+
+function onInput(event: Event) {
+  const target = event.target as HTMLInputElement
+  value.value = target.value
+  emit("input", event)
+}
+
+function onChange(event: Event) {
+  emit("change", event)
+}
+</script>
+
+<template>
+  <div :class="resolvedClasses.root" data-slot="root">
+    <slot name="leading" :ui="resolvedClasses">
+      <span v-if="isLeading" :class="resolvedClasses.leadingIcon" data-slot="leading-icon">
+        <span :class="leadingIcon" aria-hidden="true" />
+      </span>
+    </slot>
+
+    <input
+      v-bind="attrs"
+      :type="type"
+      :name="name"
+      :value="value"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :readonly="readonly"
+      :required="required"
+      :class="resolvedClasses.input"
+      data-slot="input"
+      @input="onInput"
+      @change="onChange"
+      @focus="(e) => emit('focus', e)"
+      @blur="(e) => emit('blur', e)"
+    />
+
+    <slot name="trailing" :ui="resolvedClasses">
+      <span v-if="isTrailing" :class="resolvedClasses.trailingIcon" data-slot="trailing-icon">
+        <span :class="trailingIcon" aria-hidden="true" />
+      </span>
+    </slot>
+  </div>
+</template>

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

@@ -1,63 +1,69 @@
-<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",
+  orientation: "vertical"
+})
+
+const slots = useSlots()
+
+const resolvedClasses = computed(() =>
+  resolveClasses(
+    post,
+    { variant: props.variant, orientation: props.orientation },
+    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>