@rimelight/ui 0.0.33 → 0.0.34

package/src/components/astro/RLASplitter.astro

@@ -24,10 +24,11 @@ const total = defaultSizes.reduce((s, v) => s + v, 0)
 const sizes = defaultSizes.map(s => (s / (total || 100)) * 100)
 
 const panelCount = sizes.length
+const id = `splitter-${Math.random().toString(36).substring(2, 9)}`
 ---
 
 <div
-  class={classes.root}
+  class:list={[classes.root, id]}
   data-slot="root"
   data-resizable
   data-direction={direction}
@@ -39,7 +40,6 @@ const panelCount = sizes.length
         class={classes.panel}
         data-slot="panel"
         data-resizable-panel={i}
-        style={direction === "horizontal" ? `width:${size}%` : `height:${size}%`}
       >
         <slot name={`panel-${i}`}>
           {i === 0
@@ -175,3 +175,15 @@ const panelCount = sizes.length
     });
   });
 </script>
+
+<style is:inline set:html={`
+  .${id}[data-direction="horizontal"] > [data-resizable-panel="0"] { width: ${sizes[0] ?? 50}%; }
+  .${id}[data-direction="horizontal"] > [data-resizable-panel="1"] { width: ${sizes[1] ?? 50}%; }
+  .${id}[data-direction="horizontal"] > [data-resizable-panel="2"] { width: ${sizes[2] ?? 0}%; }
+  .${id}[data-direction="horizontal"] > [data-resizable-panel="3"] { width: ${sizes[3] ?? 0}%; }
+
+  .${id}[data-direction="vertical"] > [data-resizable-panel="0"] { height: ${sizes[0] ?? 50}%; }
+  .${id}[data-direction="vertical"] > [data-resizable-panel="1"] { height: ${sizes[1] ?? 50}%; }
+  .${id}[data-direction="vertical"] > [data-resizable-panel="2"] { height: ${sizes[2] ?? 0}%; }
+  .${id}[data-direction="vertical"] > [data-resizable-panel="3"] { height: ${sizes[3] ?? 0}%; }
+`} />

package/src/components/astro/RLAStickySurface.astro

@@ -20,12 +20,19 @@ const {
 
 const classes = resolveClasses(stickySurface, {}, useUi("stickySurface", uiProp), className)
 const topOffset = `${offsetTop}px`
+const id = `sticky-${Math.random().toString(36).substring(2, 9)}`
 ---
 <div
-  class={classes.root}
+  class:list={[classes.root, id]}
   data-slot="root"
-  style={{ top: topOffset, zIndex }}
   {...rest}
 >
   <slot />
 </div>
+
+<style is:inline set:html={`
+  .${id} {
+    top: ${topOffset} !important;
+    z-index: ${zIndex} !important;
+  }
+`} />

package/src/components/vue/RLVCheckbox.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 { 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 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>
+<script setup lang="ts">
+import { computed } 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 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/RLVForm.vue

@@ -1,44 +1,44 @@
-<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>
+<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 +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/RLVInput.vue

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