@rimelight/ui 0.0.36 → 0.0.38

package/src/components/vue/RLVInput.vue

@@ -1,94 +0,0 @@
-<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,90 +0,0 @@
-<script setup lang="ts">
-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 {
-  variant = "logomark",
-  mode,
-  href = "/",
-  alt,
-  ui: uiProp,
-  class: className
-} = defineProps<LogoProps>()
-
-defineSlots<{
-  default(props: {}): any
-}>()
-
-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>
-  let src: any = null
-
-  if (rcLogos && typeof rcLogos === "object") {
-    src = rcLogos[variant]
-    if (src && typeof src === "object") {
-      src = src[mode || "color"] || src.black || src.color
-    }
-  }
-
-  const resolved = resolveLogo(src)
-  if (resolved && typeof resolved === "string" && resolved) return resolved
-
-  return null
-})
-
-const isIcon = computed(() => {
-  const src = logoSrc.value
-  if (!src) return false
-  if (src.startsWith("http") || src.startsWith("/") || src.startsWith(".")) return false
-  return src.includes(":") || src.startsWith("i-")
-})
-
-const Tag = computed(() => (href ? "a" : "div"))
-</script>
-
-<template>
-  <component
-    v-bind="attrs"
-    :is="Tag"
-    :href="Tag === 'a' ? href : undefined"
-    :aria-label="alt || variant"
-    :class="resolvedClasses.root"
-    data-slot="root"
-  >
-    <template v-if="logoSrc">
-      <span v-if="isIcon" :class="[logoSrc, 'size-full block shrink-0']" aria-hidden="true" />
-      <img v-else :src="logoSrc" :alt="alt || ''" class="size-full block object-contain shrink-0" />
-    </template>
-    <slot v-else />
-  </component>
-</template>

package/src/components/vue/RLVPlaceholder.vue

@@ -1,50 +0,0 @@
-<script setup lang="ts">
-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>()
-
-defineSlots<{
-  /**
-   * The default slot for placeholder content.
-   */
-  default(props: {}): any
-}>()
-
-const resolvedClasses = computed(() =>
-  resolveClasses(placeholder, {}, useUi("placeholder", uiProp), className)
-)
-</script>
-
-<template>
-  <div :class="resolvedClasses.base" v-bind="attrs">
-    <svg :class="resolvedClasses.svg">
-      <defs>
-        <pattern
-          id="pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e"
-          x="0"
-          y="0"
-          width="10"
-          height="10"
-          patternUnits="userSpaceOnUse"
-        >
-          <path d="M-3 13 15-5M-5 5l18-18M-1 21 17 3" />
-        </pattern>
-      </defs>
-      <rect
-        stroke="none"
-        fill="url(#pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e)"
-        width="100%"
-        height="100%"
-      />
-    </svg>
-
-    <slot />
-  </div>
-</template>

package/src/components/vue/RLVPost.vue

@@ -1,69 +0,0 @@
-<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 +0,0 @@
-<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/RLVProgress.vue

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

@@ -1,145 +0,0 @@
-<script setup lang="ts">
-import { scv } from "css-variants"
-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, onMounted, onUnmounted, watch, useAttrs } from "vue"
-
-const attrs = useAttrs()
-const scrollToTop = scv(scrollToTopTheme)
-
-const {
-  color = "primary",
-  progressWidth = 6,
-  duration = 0.1,
-  threshold = 200,
-  showProgress = false,
-  ui: uiProp,
-  class: className
-} = defineProps<ScrollToTopProps>()
-
-const classes = resolveClasses(scrollToTop, { color }, useUi("scrollToTop", uiProp), className)
-
-const {
-  isVisible,
-  scrollPercentage,
-  scrollToTop: scrollToTopFn
-} = useScrollToTop({
-  threshold
-})
-
-const instanceId = `rla-vue-${Math.random().toString(36).slice(2, 8)}`
-const gaugeBorderWidth = progressWidth * 0.5
-
-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"
-  >
-    <button type="button" :class="classes.button" aria-label="Scroll to top" @click="scrollToTopFn">
-      <div :class="classes.progressBase">
-        <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"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            :class="classes.icon"
-          >
-            <path d="m5 12 7-7 7 7" />
-            <path d="M12 19V5" />
-          </svg>
-        </div>
-      </div>
-    </button>
-  </div>
-</template>
-
-<style scoped>
-.rla-scroll-to-top {
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.3s ease-in-out;
-}
-
-.rla-scroll-to-top.visible {
-  opacity: 1;
-  pointer-events: auto;
-}
-
-.progress-circle-base {
-  position: relative;
-  transform: translateZ(0);
-}
-
-.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-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,151 +0,0 @@
-<script setup lang="ts">
-import { computed, useSlots, useAttrs } from "vue"
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { PageSectionProps } from "../../types/components/page-section"
-import pageSectionTheme from "../../themes/page-section.theme"
-import RLVIcon from "./RLVIcon.vue"
-import RLVButton from "./RLVButton.vue"
-
-const section = scv(pageSectionTheme)
-
-const {
-  as = "div",
-  variant = "default",
-  orientation = "vertical",
-  reverse = false,
-  ctaVariant = "solid",
-  ui: uiProp,
-  class: className,
-  headline,
-  icon,
-  title,
-  description,
-  links
-} = defineProps<PageSectionProps>()
-
-const attrs = useAttrs()
-const slots = useSlots()
-
-const resolvedClasses = computed(() =>
-  resolveClasses(
-    section,
-    {
-      variant,
-      orientation,
-      reverse,
-      ...(variant === "cta" && { ctaVariant }),
-      headline: !!(slots.headline || headline),
-      title: !!(slots.title || title),
-      description: !!(slots.description || description),
-      body: !!slots.body
-    },
-    useUi("section", uiProp),
-    className
-  )
-)
-</script>
-
-<template>
-  <component
-    :is="as"
-    data-slot="root"
-    :data-orientation="orientation"
-    :class="[resolvedClasses.root]"
-    v-bind="attrs"
-  >
-    <slot v-if="slots.background" name="background">
-      <div :class="resolvedClasses.background" data-slot="background">
-        <slot name="background" />
-      </div>
-    </slot>
-
-    <slot name="top" />
-
-    <div data-slot="container" :class="resolvedClasses.container">
-      <div
-        v-if="
-          slots.header ||
-          icon ||
-          headline ||
-          title ||
-          description ||
-          slots.body ||
-          slots.footer ||
-          slots.links ||
-          links?.length
-        "
-        data-slot="wrapper"
-        :class="resolvedClasses.wrapper"
-      >
-        <div
-          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">
-              <slot name="leading" :ui="resolvedClasses">
-                <RLVIcon
-                  v-if="icon"
-                  :name="icon"
-                  size="md"
-                  :ui="{ root: resolvedClasses.leadingIcon }"
-                />
-              </slot>
-            </div>
-
-            <div v-if="headline" data-slot="headline" :class="resolvedClasses.headline">
-              <slot name="headline">
-                {{ headline }}
-              </slot>
-            </div>
-
-            <component
-              :is="variant === 'hero' ? 'h1' : 'h2'"
-              v-if="title"
-              data-slot="title"
-              :class="resolvedClasses.title"
-            >
-              <slot name="title">
-                {{ title }}
-              </slot>
-            </component>
-
-            <div v-if="description" data-slot="description" :class="resolvedClasses.description">
-              <slot name="description">
-                {{ description }}
-              </slot>
-            </div>
-          </slot>
-        </div>
-
-        <div v-if="slots.body" data-slot="body" :class="resolvedClasses.body">
-          <slot name="body" />
-        </div>
-
-        <div
-          v-if="slots.footer || slots.links || links?.length"
-          data-slot="footer"
-          :class="resolvedClasses.footer"
-        >
-          <slot name="footer">
-            <div
-              v-if="links?.length || slots.links"
-              data-slot="links"
-              :class="resolvedClasses.links"
-            >
-              <RLVButton v-for="(link, index) in links" :key="index" size="lg" v-bind="link" />
-              <slot name="links" />
-            </div>
-          </slot>
-        </div>
-      </div>
-
-      <slot v-if="slots.default" />
-      <div v-else-if="orientation === 'horizontal'" class="hidden lg:block" />
-    </div>
-
-    <slot name="bottom" />
-  </component>
-</template>