@hina-ui/vue 1.0.0

package/src/components/text/text.variants.ts

@@ -0,0 +1,41 @@
+import { tv, type VariantProps } from '../../lib/tv'
+
+export const text = tv({
+  variants: {
+    size: {
+      xs: 'text-xs',
+      sm: 'text-sm',
+      base: 'text-base',
+      md: 'text-md',
+      lg: 'text-lg',
+      xl: 'text-xl',
+      '2xl': 'text-2xl',
+    },
+    tone: {
+      default: 'text-fg',
+      muted: 'text-muted',
+      faint: 'text-faint',
+      disabled: 'text-disabled',
+      accent: 'text-accent-text',
+      success: 'text-success-text',
+      warning: 'text-warning-text',
+      danger: 'text-danger-text',
+      info: 'text-info-text',
+    },
+    weight: {
+      normal: 'font-normal',
+      medium: 'font-medium',
+      semibold: 'font-semibold',
+    },
+    truncate: {
+      true: 'truncate',
+    },
+  },
+  defaultVariants: {
+    size: 'base',
+    tone: 'default',
+    weight: 'normal',
+  },
+})
+
+export type TextVariants = VariantProps<typeof text>

package/src/components/textarea/Textarea.vue

@@ -0,0 +1,111 @@
+<script setup lang="ts">
+  import { computed, nextTick, onMounted, shallowRef, watch } from 'vue'
+  import { cn } from '../../lib/cn'
+  import { useFieldControl } from '../form-field/context'
+  import { caretTop } from '../../lib/caret'
+  import ScrollArea from '../scroll-area/ScrollArea.vue'
+  import { textarea, textareaField, type TextareaVariants } from './textarea.variants'
+
+  defineOptions({ name: 'HnTextarea', inheritAttrs: false })
+
+  const {
+    id: fieldId,
+    invalid,
+    disabled,
+    describedBy,
+  } = useFieldControl({
+    invalid: () => props.invalid,
+    disabled: () => props.disabled,
+  })
+
+  const props = withDefaults(
+    defineProps<{
+      variant?: TextareaVariants['variant']
+      size?: TextareaVariants['size']
+      rows?: number
+      autosize?: boolean | { minRows?: number; maxRows?: number }
+      resize?: TextareaVariants['resize']
+      disabled?: boolean
+      invalid?: boolean
+      class?: string
+    }>(),
+    { rows: 3 },
+  )
+
+  const model = defineModel<string>()
+
+  const el = shallowRef<HTMLTextAreaElement | null>(null)
+  const area = shallowRef<InstanceType<typeof ScrollArea>>()
+
+  const bounds = computed(() => {
+    const options = props.autosize === true ? {} : props.autosize || null
+    return { min: options?.minRows ?? props.rows, max: options?.maxRows }
+  })
+
+  function fit() {
+    const node = el.value
+    if (!node) return
+    node.style.height = 'auto'
+    node.style.height = `${node.scrollHeight}px`
+    if (document.activeElement === node) reveal(node)
+  }
+
+  function reveal(node: HTMLTextAreaElement) {
+    const scroller =
+      area.value?.viewport ?? node.closest<HTMLElement>('[data-overlayscrollbars-initialize]')
+    if (!scroller) return
+    const box = scroller.getBoundingClientRect()
+    const top = node.getBoundingClientRect().top + caretTop(node)
+    const bottom = top + parseFloat(getComputedStyle(node).lineHeight)
+    if (bottom > box.bottom) scroller.scrollTop += bottom - box.bottom
+    else if (top < box.top) scroller.scrollTop -= box.top - top
+  }
+
+  function focus(event: MouseEvent) {
+    const node = el.value
+    if (!node || node.disabled || event.target === node) return
+    node.focus()
+    node.setSelectionRange(node.value.length, node.value.length)
+  }
+
+  onMounted(fit)
+  watch(
+    () => [model.value, props.size, bounds.value.min],
+    () => void nextTick(fit),
+  )
+</script>
+
+<template>
+  <div
+    data-hn-textarea
+    :data-invalid="invalid ? '' : undefined"
+    :style="{ '--hn-textarea-rows': bounds.min, '--hn-textarea-max-rows': bounds.max }"
+    :class="
+      cn(
+        textarea({
+          variant: props.variant,
+          size: props.size,
+          autosize: Boolean(props.autosize),
+          resize: props.autosize ? 'none' : props.resize,
+        }),
+        props.class,
+      )
+    "
+    @click="focus"
+  >
+    <ScrollArea ref="area" :shadow="false" class="min-h-0 grow">
+      <textarea
+        ref="el"
+        v-bind="$attrs"
+        v-model="model"
+        :id="fieldId"
+        :rows="bounds.min"
+        :disabled="disabled"
+        :aria-invalid="invalid || undefined"
+        :aria-describedby="describedBy"
+        :class="textareaField()"
+        @input="fit"
+      />
+    </ScrollArea>
+  </div>
+</template>

package/src/components/textarea/textarea.variants.ts

@@ -0,0 +1,47 @@
+import { tv, type VariantProps } from '../../lib/tv'
+
+export const textarea = tv({
+  base: [
+    'hn-field text-fg flex w-full min-w-0 cursor-text flex-col overflow-hidden rounded-md border font-medium',
+    'has-disabled:cursor-not-allowed has-disabled:opacity-50',
+  ],
+  variants: {
+    variant: {
+      primary:
+        'border-line [--hn-field-bg:var(--hn-surface)] [--hn-field-shadow:var(--hn-shadow-sm)]',
+      secondary: 'border-transparent [--hn-field-bg:var(--hn-bg-inset)]',
+    },
+    size: {
+      sm: 'text-sm [--hn-textarea-h:var(--hn-control-h-sm)] [--hn-textarea-px:var(--hn-control-px-sm)]',
+      md: 'text-base [--hn-textarea-h:var(--hn-control-h-md)] [--hn-textarea-px:var(--hn-control-px-md)]',
+      lg: 'text-md [--hn-textarea-h:var(--hn-control-h-lg)] [--hn-textarea-px:var(--hn-control-px-lg)]',
+    },
+    autosize: {
+      true: [
+        'min-h-[calc((var(--hn-textarea-rows)_-_1)_*_1lh_+_var(--hn-textarea-h))]',
+        'max-h-[calc((var(--hn-textarea-max-rows)_-_1)_*_1lh_+_var(--hn-textarea-h))]',
+      ],
+      false: 'h-[calc((var(--hn-textarea-rows)_-_1)_*_1lh_+_var(--hn-textarea-h))]',
+    },
+    resize: {
+      none: 'resize-none',
+      vertical: 'resize-y',
+    },
+  },
+  defaultVariants: {
+    variant: 'primary',
+    size: 'md',
+    autosize: false,
+    resize: 'vertical',
+  },
+})
+
+export const textareaField = tv({
+  base: [
+    'block w-full resize-none overflow-hidden bg-transparent text-inherit outline-none [font:inherit]',
+    'px-[var(--hn-textarea-px)] py-[calc((var(--hn-textarea-h)_-_1lh)/2_-_1px)]',
+    'placeholder:text-faint placeholder:font-normal disabled:cursor-not-allowed',
+  ],
+})
+
+export type TextareaVariants = VariantProps<typeof textarea>

package/src/components/time/Time.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+  import { computed } from 'vue'
+  import { cn } from '../../lib/cn'
+  import { devWarn } from '../../lib/dev'
+  import { useUiLocale } from '../../locale'
+  import { relativeTime } from './utils/relativeTime'
+  import { useNow } from './composables/useNow'
+
+  defineOptions({ name: 'HnTime' })
+
+  const props = withDefaults(
+    defineProps<{
+      value?: string | number | Date | null
+      format?: 'datetime' | 'date' | 'time' | 'relative'
+      class?: string
+    }>(),
+    { format: 'datetime' },
+  )
+
+  const t = useUiLocale()
+
+  const date = computed(() => {
+    if (props.value == null || props.value === '') return null
+    const parsed = new Date(props.value)
+    if (Number.isNaN(parsed.getTime())) {
+      devWarn('Time', `value 无法解析为时间:${String(props.value)}`, String(props.value))
+      return null
+    }
+    return parsed
+  })
+
+  const now = useNow(() => props.format === 'relative')
+
+  const absoluteOptions = {
+    datetime: { dateStyle: 'medium', timeStyle: 'short' },
+    date: { dateStyle: 'medium' },
+    time: { timeStyle: 'short' },
+  } as const satisfies Record<string, Intl.DateTimeFormatOptions>
+
+  const text = computed(() => {
+    if (!date.value) return t.value.time.unknown
+    if (props.format === 'relative')
+      return relativeTime(date.value, now.value, t.value.tag, t.value.time.justNow)
+    return new Intl.DateTimeFormat(t.value.tag, absoluteOptions[props.format]).format(date.value)
+  })
+
+  const absolute = computed(() =>
+    date.value
+      ? new Intl.DateTimeFormat(t.value.tag, absoluteOptions.datetime).format(date.value)
+      : undefined,
+  )
+</script>
+
+<template>
+  <time
+    v-if="date"
+    :datetime="date.toISOString()"
+    :title="format === 'relative' ? absolute : undefined"
+    :class="cn(props.class)"
+  >
+    {{ text }}
+  </time>
+  <span v-else :class="cn(props.class)">{{ text }}</span>
+</template>

package/src/components/time/composables/useNow.ts

@@ -0,0 +1,27 @@
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
+
+export function useNow(active: () => boolean, intervalMs = 30_000) {
+  const now = ref(Date.now())
+  let timer: ReturnType<typeof setInterval> | undefined
+
+  onMounted(() => {
+    watch(
+      active,
+      on => {
+        clearInterval(timer)
+        timer = undefined
+        if (on) {
+          now.value = Date.now()
+          timer = setInterval(() => {
+            now.value = Date.now()
+          }, intervalMs)
+        }
+      },
+      { immediate: true },
+    )
+  })
+
+  onBeforeUnmount(() => clearInterval(timer))
+
+  return now
+}

package/src/components/time/utils/relativeTime.ts

@@ -0,0 +1,20 @@
+const DIVISIONS = [
+  [60, 'second'],
+  [60, 'minute'],
+  [24, 'hour'],
+  [7, 'day'],
+  [4.34524, 'week'],
+  [12, 'month'],
+  [Infinity, 'year'],
+] as const
+
+export function relativeTime(target: Date, nowMs: number, tag: string, justNow: string): string {
+  let duration = (target.getTime() - nowMs) / 1000
+  if (Math.abs(duration) < 45) return justNow
+  const rtf = new Intl.RelativeTimeFormat(tag, { numeric: 'auto' })
+  for (const [amount, unit] of DIVISIONS) {
+    if (Math.abs(duration) < amount) return rtf.format(Math.round(duration), unit)
+    duration /= amount
+  }
+  return ''
+}

package/src/components/time-field/TimeField.vue

@@ -0,0 +1,162 @@
+<script setup lang="ts">
+  import { computed, shallowRef, useSlots } from 'vue'
+  import { TimeFieldInput, TimeFieldRoot, type TimeValue } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+  import { formatTimeValue, parseTimeValue, type TimeGranularity } from '../../lib/date'
+  import { useUiLocale } from '../../locale'
+  import { X } from '@lucide/vue'
+  import InputAction from '../input/InputAction.vue'
+  import { useFieldControl } from '../form-field/context'
+  import { injectInputGroup } from '../input-group/context'
+  import {
+    inputActionSlot,
+    inputAdornment,
+    inputEmbedded,
+    inputHost,
+    type InputVariants,
+  } from '../input/input.variants'
+  import { useSegmentFocus } from '../date-field/composables/useSegmentFocus'
+  import {
+    dateFieldControl,
+    dateFieldHost,
+    dateFieldSegment,
+  } from '../date-field/date-field.variants'
+
+  defineOptions({ name: 'HnTimeField', inheritAttrs: false })
+
+  const props = withDefaults(
+    defineProps<{
+      placeholder?: string
+      min?: string
+      max?: string
+      granularity?: TimeGranularity
+      hourCycle?: 12 | 24
+      minuteStep?: number
+      clearable?: boolean
+      readonly?: boolean
+      name?: string
+      variant?: InputVariants['variant']
+      size?: InputVariants['size']
+      disabled?: boolean
+      invalid?: boolean
+      class?: string
+    }>(),
+    { granularity: 'minute', clearable: false },
+  )
+  const emit = defineEmits<{ clear: [] }>()
+
+  const model = defineModel<string | null>({ default: null })
+
+  const slots = useSlots()
+  const t = useUiLocale()
+  const group = injectInputGroup()
+  const host = shallowRef<HTMLElement | null>(null)
+
+  const { labelledBy, invalid, disabled, describedBy } = useFieldControl({
+    invalid: () => props.invalid || !!group?.invalid.value || outOfRange.value,
+    disabled: () => props.disabled || !!group?.disabled.value,
+  })
+
+  const value = computed(() => parseTimeValue(model.value))
+  const placeholder = computed(() => parseTimeValue(props.placeholder))
+  const minValue = computed(() => parseTimeValue(props.min))
+  const maxValue = computed(() => parseTimeValue(props.max))
+  const step = computed(() => (props.minuteStep ? { minute: props.minuteStep } : undefined))
+  const outOfRange = computed(
+    () =>
+      !!value.value &&
+      ((!!minValue.value && value.value.compare(minValue.value) < 0) ||
+        (!!maxValue.value && value.value.compare(maxValue.value) > 0)),
+  )
+  const clearing = computed(() => props.clearable && model.value != null && !disabled.value)
+
+  function segmentLabel(part: string) {
+    return (t.value.dateField as Record<string, string | undefined>)[part]
+  }
+
+  function update(next: TimeValue | undefined) {
+    model.value = next ? formatTimeValue(next, props.granularity) : null
+  }
+
+  const { focus, onHostClick } = useSegmentFocus(host)
+
+  function clear() {
+    if (model.value == null) return
+    model.value = null
+    emit('clear')
+    focus()
+  }
+
+  defineExpose({ clear, focus })
+</script>
+
+<template>
+  <div
+    ref="host"
+    data-hn-time-field
+    :data-invalid="invalid ? '' : undefined"
+    :data-disabled="disabled ? '' : undefined"
+    :class="
+      cn(
+        group ? inputEmbedded() : inputHost({ variant: props.variant, size: props.size }),
+        dateFieldHost(),
+        props.class,
+      )
+    "
+    @click="onHostClick"
+  >
+    <span v-if="slots.leading" :class="inputAdornment()">
+      <slot name="leading" />
+    </span>
+    <TimeFieldRoot
+      v-slot="{ segments: parts }"
+      v-bind="$attrs"
+      :aria-labelledby="labelledBy"
+      :aria-describedby="describedBy"
+      :model-value="value"
+      :placeholder="placeholder"
+      :min-value="minValue"
+      :max-value="maxValue"
+      :granularity="props.granularity"
+      :hour-cycle="props.hourCycle"
+      :step="step"
+      :step-snapping="!!step"
+      hide-time-zone
+      :locale="t.tag"
+      :disabled="disabled"
+      :readonly="props.readonly"
+      :name="props.name"
+      :aria-invalid="invalid || undefined"
+      :class="
+        dateFieldControl({ leading: !!slots.leading, trailing: clearing || !!slots.trailing })
+      "
+      @update:model-value="update"
+    >
+      <TimeFieldInput
+        v-for="part in parts"
+        :key="part.part"
+        :part="part.part"
+        data-hn-segment
+        :aria-label="part.part === 'literal' ? undefined : segmentLabel(part.part)"
+        :class="dateFieldSegment({ part: part.part === 'literal' ? 'literal' : 'editable' })"
+      >
+        {{ part.value }}
+      </TimeFieldInput>
+    </TimeFieldRoot>
+    <Transition
+      enter-active-class="hn-transition-base"
+      enter-from-class="scale-90 opacity-0"
+      leave-active-class="hn-transition"
+      leave-to-class="scale-90 opacity-0"
+    >
+      <span v-if="clearing" :class="inputActionSlot()">
+        <InputAction :label="t.common.clear" @click="clear">
+          <X />
+        </InputAction>
+      </span>
+    </Transition>
+    <span v-if="slots.trailing" :class="inputAdornment()">
+      <slot name="trailing" />
+    </span>
+  </div>
+</template>

package/src/components/toast/Toaster.vue

@@ -0,0 +1,173 @@
+<script setup lang="ts">
+  import {
+    ToastProvider,
+    ToastPortal,
+    ToastViewport,
+    ToastRoot,
+    ToastTitle,
+    ToastDescription,
+    ToastClose,
+  } from 'reka-ui'
+  import { CircleCheck, CircleX, TriangleAlert, Info } from '@lucide/vue'
+  import Button from '../button/Button.vue'
+  import CloseButton from '../close-button/CloseButton.vue'
+  import Spinner from '../spinner/Spinner.vue'
+  import { cn } from '../../lib/cn'
+  import { useUiLocale } from '../../locale'
+  import {
+    toastState,
+    dismiss,
+    type ToastItem,
+    type ToastTone,
+    type ToasterPosition,
+  } from './store'
+  import { useToastLayout, VISIBLE_STACK } from './composables/useToastLayout'
+  import { useToastExpand } from './composables/useToastExpand'
+
+  defineOptions({ name: 'HnToaster' })
+
+  const props = defineProps<{
+    position?: ToasterPosition
+    label?: string
+    class?: string
+  }>()
+
+  const t = useUiLocale()
+
+  const icons: Partial<Record<ToastTone, unknown>> = {
+    success: CircleCheck,
+    danger: CircleX,
+    warning: TriangleAlert,
+    info: Info,
+  }
+
+  const iconColor: Partial<Record<ToastTone, string>> = {
+    success: 'text-success-text',
+    danger: 'text-danger-text',
+    warning: 'text-warning-text',
+    info: 'text-info-text',
+  }
+
+  const positionClass: Record<ToasterPosition | 'auto', string> = {
+    'bottom-end': 'bottom-4 end-4 hn-scrollbar-safe',
+    'bottom-start': 'bottom-4 start-4',
+    'bottom-center': 'bottom-4 inset-x-0 mx-auto hn-scrollbar-safe-center',
+    'top-end': 'top-4 end-4 hn-scrollbar-safe',
+    'top-start': 'top-4 start-4',
+    'top-center': 'top-4 inset-x-0 mx-auto hn-scrollbar-safe-center',
+    auto: 'max-sm:bottom-4 max-sm:inset-x-0 max-sm:mx-auto max-sm:hn-scrollbar-safe-center sm:top-4 sm:end-4 sm:hn-scrollbar-safe',
+  }
+
+  const { slotOf, itemStyle, setItemRef } = useToastLayout()
+  const { expanded, enter, leave } = useToastExpand()
+
+  function runAction(item: ToastItem, kind: 'action' | 'cancel') {
+    item[kind]?.onClick?.()
+    dismiss(item.id)
+  }
+</script>
+
+<template>
+  <ToastProvider swipe-direction="right">
+    <ToastRoot
+      v-for="item in toastState.items"
+      :key="item.id"
+      :open="true"
+      :duration="Infinity"
+      class="hn-toast-item group/toast outline-none"
+      :style="itemStyle(item)"
+      :data-hn-behind="slotOf(item).index > 0 ? '' : undefined"
+      :data-hn-hidden="slotOf(item).index >= VISIBLE_STACK ? '' : undefined"
+      :data-hn-removed="item.open ? undefined : ''"
+      :tabindex="slotOf(item).index === 0 ? 0 : -1"
+      @update:open="v => !v && dismiss(item.id)"
+    >
+      <div class="hn-toast-card bg-surface border-line relative rounded-lg border p-4 shadow-md">
+        <div
+          v-if="item.component"
+          :ref="refValue => setItemRef(item.id, refValue)"
+          class="hn-toast-body"
+        >
+          <component :is="item.component" v-bind="item.componentProps" :toast-id="item.id" />
+        </div>
+        <div
+          v-else
+          :ref="refValue => setItemRef(item.id, refValue)"
+          class="hn-toast-body flex w-full items-start gap-3"
+        >
+          <div v-if="item.tone !== 'neutral'" class="relative mt-0.5 size-5 shrink-0">
+            <Transition
+              enter-active-class="hn-transition-base"
+              enter-from-class="scale-90 opacity-0"
+              leave-active-class="hn-transition"
+              leave-to-class="scale-90 opacity-0"
+            >
+              <span
+                v-if="item.tone === 'loading'"
+                class="absolute inset-0 inline-flex items-center justify-center"
+              >
+                <Spinner size="md" class="text-muted" />
+              </span>
+              <component
+                :is="icons[item.tone]"
+                v-else
+                :key="item.tone"
+                class="absolute inset-0 size-5"
+                :class="iconColor[item.tone]"
+                aria-hidden="true"
+              />
+            </Transition>
+          </div>
+          <div class="flex min-w-0 flex-1 flex-col gap-1 pe-6">
+            <ToastTitle class="text-fg font-medium">{{ item.message }}</ToastTitle>
+            <ToastDescription v-if="item.description" class="text-muted text-sm">
+              {{ item.description }}
+            </ToastDescription>
+            <div v-if="item.action || item.cancel" class="mt-1.5 flex gap-(--hn-inline-gap)">
+              <Button
+                v-if="item.cancel"
+                size="sm"
+                variant="ghost"
+                tone="neutral"
+                @click="runAction(item, 'cancel')"
+              >
+                {{ item.cancel.label }}
+              </Button>
+              <Button
+                v-if="item.action"
+                size="sm"
+                variant="soft"
+                @click="runAction(item, 'action')"
+              >
+                {{ item.action.label }}
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <ToastClose as-child>
+        <CloseButton
+          class="absolute top-2 end-2 opacity-0 group-hover/toast:opacity-100 focus-visible:opacity-100"
+        />
+      </ToastClose>
+    </ToastRoot>
+    <ToastPortal>
+      <ToastViewport
+        :label="props.label ?? t.toast.regionLabel"
+        :data-pos="props.position ?? 'auto'"
+        :data-expanded="expanded ? '' : undefined"
+        :class="
+          cn(
+            'pointer-events-none fixed z-(--hn-z-toast) w-96 max-w-[calc(100vw-2rem)] outline-none',
+            positionClass[props.position ?? 'auto'],
+            props.class,
+          )
+        "
+        @pointerenter="enter('hover')"
+        @pointerleave="leave('hover')"
+        @focusin="enter('focus')"
+        @focusout="leave('focus')"
+      />
+    </ToastPortal>
+  </ToastProvider>
+</template>

package/src/components/toast/composables/useToastExpand.ts

@@ -0,0 +1,27 @@
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import { pauseTimers, resumeTimers } from '../store'
+
+export function useToastExpand() {
+  const reasons = ref(new Set<string>())
+  const expanded = computed(() => reasons.value.size > 0)
+
+  function enter(reason: string) {
+    reasons.value.add(reason)
+    pauseTimers(reason)
+  }
+
+  function leave(reason: string) {
+    reasons.value.delete(reason)
+    resumeTimers(reason)
+  }
+
+  function onVisibility() {
+    if (document.hidden) pauseTimers('hidden')
+    else resumeTimers('hidden')
+  }
+
+  onMounted(() => document.addEventListener('visibilitychange', onVisibility))
+  onBeforeUnmount(() => document.removeEventListener('visibilitychange', onVisibility))
+
+  return { expanded, enter, leave }
+}