@rimelight/ui 0.0.37 → 0.0.39

package/src/components/vue/RLVBanner.vue

@@ -1,230 +0,0 @@
-<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,105 +0,0 @@
-<script setup lang="ts">
-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 {
-  variant = "solid",
-  color = "primary",
-  size = "md",
-  href,
-  label,
-  leadingIcon,
-  trailingIcon,
-  loading = false,
-  square = false,
-  block = false,
-  active = false,
-  activeColor,
-  activeVariant,
-  ui: uiProp,
-  class: className
-} = defineProps<ButtonProps>()
-
-const slots = useSlots()
-
-const isLeading = computed(() => !!(leadingIcon || slots.leading) || loading)
-const isTrailing = computed(
-  () => !!(trailingIcon || slots.trailing) || (loading && !isLeading.value)
-)
-
-const showLeadingIcon = computed(() => {
-  if (loading) return "i-lucide-loader-circle"
-  return leadingIcon
-})
-
-const showTrailingIcon = computed(() => {
-  if (loading) return "i-lucide-loader-circle"
-  return trailingIcon
-})
-
-const leadingIconClass = computed(() => {
-  return loading && isLeading.value ? "animate-spin" : ""
-})
-
-const trailingIconClass = computed(() => {
-  return loading && isTrailing.value ? "animate-spin" : ""
-})
-
-defineSlots<{
-  default(props: { ui: Record<string, string> }): any
-  leading(props: { ui: Record<string, string> }): any
-  trailing(props: { ui: Record<string, string> }): any
-}>()
-
-const resolvedClasses = computed(() =>
-  resolveClasses(
-    button,
-    {
-      variant: active && activeVariant ? activeVariant : variant,
-      color: active && activeColor ? activeColor : color,
-      size,
-      block,
-      square: square || (!label && !slots.default),
-      leading: isLeading.value,
-      trailing: isTrailing.value,
-      loading,
-      active
-    },
-    useUi("button", uiProp),
-    className
-  )
-)
-
-const Tag = href ? "a" : "button"
-</script>
-
-<template>
-  <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" />
-      </span>
-    </slot>
-
-    <span
-      v-if="label !== undefined && label !== null"
-      :class="resolvedClasses.label"
-      data-slot="label"
-    >
-      {{ label }}
-    </span>
-    <slot v-else />
-
-    <slot name="trailing" :ui="resolvedClasses">
-      <span v-if="isTrailing" :class="resolvedClasses.trailingIcon" data-slot="trailing-icon">
-        <span :class="[showTrailingIcon, trailingIconClass]" aria-hidden="true" />
-      </span>
-    </slot>
-  </component>
-</template>

package/src/components/vue/RLVCheckbox.vue

@@ -1,70 +0,0 @@
-<script setup lang="ts">
-import { computed, useAttrs } from "vue"
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { CheckboxProps } from "../../types/components/checkbox"
-import checkboxTheme from "../../themes/checkbox.theme"
-
-const checkbox = scv(checkboxTheme)
-
-const props = withDefaults(defineProps<CheckboxProps & { modelValue?: boolean }>(), {
-  size: "md",
-  color: "primary"
-})
-
-const emit = defineEmits<{
-  (e: "update:modelValue", value: boolean): void
-  (e: "change", event: Event): void
-}>()
-
-const checked = computed({
-  get: () => props.modelValue ?? props.checked ?? false,
-  set: (val) => emit("update:modelValue", val)
-})
-
-const attrs = useAttrs()
-
-const resolvedClasses = computed(() =>
-  resolveClasses(
-    checkbox,
-    {
-      size: props.size,
-      color: props.color,
-      disabled: props.disabled,
-      theme: props.theme
-    },
-    useUi("checkbox", props.ui),
-    props.class
-  )
-)
-
-function onChange(event: Event) {
-  const target = event.target as HTMLInputElement
-  checked.value = target.checked
-  emit("change", event)
-}
-</script>
-
-<template>
-  <label :class="resolvedClasses.root" data-slot="root">
-    <div :class="resolvedClasses.container" data-slot="container">
-      <input
-        v-bind="attrs"
-        type="checkbox"
-        :name="name"
-        :checked="checked"
-        :disabled="disabled"
-        :class="resolvedClasses.input"
-        data-slot="input"
-        @change="onChange"
-      />
-      <span v-if="checked" :class="resolvedClasses.indicator" data-slot="indicator">
-        <span class="i-lucide-check h-3 w-3 text-white" />
-      </span>
-    </div>
-    <span v-if="label" :class="resolvedClasses.label" data-slot="label">
-      {{ label }}
-    </span>
-    <slot />
-  </label>
-</template>

package/src/components/vue/RLVFooter.vue

@@ -1,38 +0,0 @@
-<script setup lang="ts">
-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>()
-
-defineSlots<{
-  left(props: {}): any
-  center(props: {}): any
-  right(props: {}): any
-}>()
-
-const resolvedClasses = computed(() =>
-  resolveClasses(footer, { contain }, useUi("footer", uiProp), className)
-)
-</script>
-
-<template>
-  <footer :class="[resolvedClasses.root]" data-slot="root" v-bind="attrs">
-    <div :class="resolvedClasses.container">
-      <div :class="resolvedClasses.left" data-slot="left">
-        <slot name="left" />
-      </div>
-      <div :class="resolvedClasses.center" data-slot="center">
-        <slot name="center" />
-      </div>
-      <div :class="resolvedClasses.right" data-slot="right">
-        <slot name="right" />
-      </div>
-    </div>
-  </footer>
-</template>

package/src/components/vue/RLVForm.vue

@@ -1,44 +0,0 @@
-<script setup lang="ts">
-import { computed, ref } from "vue"
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { FormProps } from "../../types/components/form"
-import formTheme from "../../themes/form.theme"
-
-const form = scv(formTheme)
-
-const props = defineProps<FormProps>()
-
-const emit = defineEmits<{
-  (e: "submit", event: { data: any }): void
-  (e: "error", errors: any[]): void
-}>()
-
-const resolvedClasses = computed(() =>
-  resolveClasses(form, {}, useUi("form", props.ui), props.class)
-)
-
-async function onSubmit(event: Event) {
-  event.preventDefault()
-
-  if (props.schema && props.state) {
-    try {
-      const data = await props.schema.parseAsync(props.state)
-      emit("submit", { data })
-    } catch (err: any) {
-      if (err.errors) {
-        emit("error", err.errors)
-      }
-      console.error("Form validation failed", err)
-    }
-  } else {
-    emit("submit", { data: props.state })
-  }
-}
-</script>
-
-<template>
-  <form :class="resolvedClasses.root" data-slot="root" @submit="onSubmit">
-    <slot :ui="resolvedClasses" />
-  </form>
-</template>

package/src/components/vue/RLVFormField.vue

@@ -1,58 +0,0 @@
-<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,122 +0,0 @@
-<script setup lang="ts">
-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 {
-  contain = true,
-  sticky = true,
-  fixed = false,
-  stackIndex = 0,
-  hideOnScroll = false,
-  ui: uiProp,
-  class: className
-} = defineProps<HeaderProps>()
-
-defineSlots<{
-  left(props: {}): any
-  center(props: {}): any
-  right(props: {}): any
-}>()
-
-const resolvedClasses = computed(() =>
-  resolveClasses(header, { contain, sticky, fixed }, useUi("header", uiProp), className)
-)
-
-const id = `rlv-header-${Math.random().toString(36).slice(2, 8)}`
-const rootRef = ref<HTMLElement | null>(null)
-const contentRef = ref<HTMLElement | null>(null)
-const naturalHeight = ref(0)
-const isVisible = ref(true)
-
-const fixedStyle = computed(() => {
-  if (!fixed) return {}
-  return {
-    zIndex: 100 - stackIndex
-  }
-})
-
-let resizeObserver: ResizeObserver | null = null
-let scrollHandler: (() => void) | null = null
-
-onMounted(() => {
-  if (!fixed) return
-
-  const stack = getHeaderStack()
-
-  const updateStack = () => {
-    stack.register(id, stackIndex, naturalHeight.value, isVisible.value, rootRef.value)
-  }
-
-  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)
-})
-</script>
-
-<template>
-  <header
-    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 :class="resolvedClasses.left" data-slot="left">
-          <slot name="left" />
-        </div>
-        <div :class="resolvedClasses.center" data-slot="center">
-          <slot name="center" />
-        </div>
-        <div :class="resolvedClasses.right" data-slot="right">
-          <slot name="right" />
-        </div>
-      </div>
-    </div>
-  </header>
-</template>

package/src/components/vue/RLVIcon.vue

@@ -1,27 +0,0 @@
-<script setup lang="ts">
-import { computed, useAttrs } from "vue"
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { IconProps } from "../../types/components/icon"
-import iconTheme from "../../themes/icon.theme"
-
-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)
-)
-
-defineSlots<{
-  default(props: {}): any
-}>()
-</script>
-
-<template>
-  <span v-bind="attrs" :class="[resolvedClasses.root, name]" data-slot="root" aria-hidden="true">
-    <slot />
-  </span>
-</template>