@hina-ui/vue 1.7.7 → 1.7.8

package/src/components/dialog/Dialog.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+  import { computed } from 'vue'
   import {
     DialogRoot,
     DialogTrigger,
@@ -17,6 +18,7 @@
   import { useOverlayPortal } from '../../lib/overlay-portal'
   import { useScrollViewport } from '../../lib/scroll-viewport'
   import { cn } from '../../lib/cn'
+  import { provideFormScope } from '../form/scope'
   import { dialogWrapper, dialogCard, type DialogVariants } from './dialog.variants'
 
   defineOptions({ name: 'HnDialog' })
@@ -39,13 +41,16 @@
     default?(): unknown
     icon?(): unknown
     title?(): unknown
-    body?(props: { close: () => void }): unknown
-    content?(props: { close: () => void }): unknown
-    footer?(props: { close: () => void }): unknown
+    body?(props: { close: () => void; submitting: boolean }): unknown
+    content?(props: { close: () => void; submitting: boolean }): unknown
+    footer?(props: { close: () => void; submitting: boolean }): unknown
   }>()
 
+  const submitting = provideFormScope()
+  const locked = computed(() => props.locked || submitting.value)
+
   function guard(e: Event) {
-    if (props.locked) e.preventDefault()
+    if (locked.value) e.preventDefault()
   }
 
   const { scrollArea, viewport } = useScrollViewport()
@@ -92,7 +97,7 @@
                 {{ props.description }}
               </DialogDescription>
             </template>
-            <slot v-if="slots.body" name="body" :close="close" />
+            <slot v-if="slots.body" name="body" :close="close" :submitting="submitting" />
             <template v-else>
               <div
                 v-if="props.header"
@@ -118,19 +123,19 @@
                   </DialogDescription>
                 </div>
                 <DialogClose v-if="props.closable" as-child>
-                  <CloseButton :disabled="props.locked" class="-mt-1.5 -me-1.5 shrink-0" />
+                  <CloseButton :disabled="locked" class="-mt-1.5 -me-1.5 shrink-0" />
                 </DialogClose>
               </div>
               <ScrollArea v-if="$slots.content" ref="scrollArea" class="min-h-0">
                 <div class="px-(--hn-panel-p) py-1">
-                  <slot name="content" :close="close" />
+                  <slot name="content" :close="close" :submitting="submitting" />
                 </div>
               </ScrollArea>
               <div
                 v-if="$slots.footer"
                 class="flex shrink-0 justify-end gap-(--hn-inline-gap) px-(--hn-panel-p)"
               >
-                <slot name="footer" :close="close" />
+                <slot name="footer" :close="close" :submitting="submitting" />
               </div>
             </template>
           </Card>

package/src/components/drawer/Drawer.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+  import { computed } from 'vue'
   import {
     DialogRoot,
     DialogTrigger,
@@ -17,6 +18,7 @@
   import { useOverlayPortal } from '../../lib/overlay-portal'
   import { useScrollViewport } from '../../lib/scroll-viewport'
   import { cn } from '../../lib/cn'
+  import { provideFormScope } from '../form/scope'
   import { drawerCard } from './drawer.variants'
 
   defineOptions({ name: 'HnDrawer' })
@@ -39,13 +41,16 @@
     default?(): unknown
     icon?(): unknown
     title?(): unknown
-    body?(props: { close: () => void }): unknown
-    content?(props: { close: () => void }): unknown
-    footer?(props: { close: () => void }): unknown
+    body?(props: { close: () => void; submitting: boolean }): unknown
+    content?(props: { close: () => void; submitting: boolean }): unknown
+    footer?(props: { close: () => void; submitting: boolean }): unknown
   }>()
 
+  const submitting = provideFormScope()
+  const locked = computed(() => props.locked || submitting.value)
+
   function guard(e: Event) {
-    if (props.locked) e.preventDefault()
+    if (locked.value) e.preventDefault()
   }
 
   const { scrollArea, viewport } = useScrollViewport()
@@ -84,7 +89,7 @@
               {{ props.description }}
             </DialogDescription>
           </template>
-          <slot v-if="slots.body" name="body" :close="close" />
+          <slot v-if="slots.body" name="body" :close="close" :submitting="submitting" />
           <template v-else>
             <div
               v-if="props.header"
@@ -110,19 +115,19 @@
                 </DialogDescription>
               </div>
               <DialogClose v-if="props.closable" as-child>
-                <CloseButton :disabled="props.locked" class="-mt-1.5 -me-1.5 shrink-0" />
+                <CloseButton :disabled="locked" class="-mt-1.5 -me-1.5 shrink-0" />
               </DialogClose>
             </div>
             <ScrollArea v-if="$slots.content" ref="scrollArea" class="min-h-0 grow">
               <div class="px-(--hn-panel-p) py-1">
-                <slot name="content" :close="close" />
+                <slot name="content" :close="close" :submitting="submitting" />
               </div>
             </ScrollArea>
             <div
               v-if="$slots.footer"
               class="flex shrink-0 justify-end gap-(--hn-inline-gap) px-(--hn-panel-p)"
             >
-              <slot name="footer" :close="close" />
+              <slot name="footer" :close="close" :submitting="submitting" />
             </div>
           </template>
         </Card>

package/src/components/form/Form.vue

@@ -3,6 +3,7 @@
   import { cn } from '../../lib/cn'
   import { useForm, type FormValidateOn } from './composables/useForm'
   import { provideForm } from './context'
+  import { reportFormScope } from './scope'
   import { formRoot } from './form.variants'
   import { focusFirstInvalid } from './utils/focus'
   import type { FormErrors, FormRules, FormValues } from './standard-schema'
@@ -47,7 +48,19 @@
     form.setErrors(errors)
   }
 
-  defineExpose({ submit, validate: form.validate, reset: form.reset, setErrors })
+  reportFormScope(form.submitting)
+
+  defineExpose({
+    submit,
+    validate: form.validate,
+    reset: form.reset,
+    setErrors,
+    errors: form.errors,
+    error: form.formError,
+    invalid: form.invalid,
+    submitting: form.submitting,
+    submitted: form.submitted,
+  })
 </script>
 
 <template>

package/src/components/form/scope.ts

@@ -0,0 +1,39 @@
+import {
+  computed,
+  inject,
+  onScopeDispose,
+  provide,
+  shallowRef,
+  watch,
+  type ComputedRef,
+  type InjectionKey,
+  type Ref,
+} from 'vue'
+
+interface FormScope {
+  set: (id: symbol, submitting: boolean) => void
+}
+
+const FORM_SCOPE_KEY = Symbol('hn-form-scope') as InjectionKey<FormScope>
+
+export function provideFormScope(): ComputedRef<boolean> {
+  const active = shallowRef<ReadonlySet<symbol>>(new Set())
+  provide(FORM_SCOPE_KEY, {
+    set(id, submitting) {
+      if (active.value.has(id) === submitting) return
+      const next = new Set(active.value)
+      if (submitting) next.add(id)
+      else next.delete(id)
+      active.value = next
+    },
+  })
+  return computed(() => active.value.size > 0)
+}
+
+export function reportFormScope(submitting: Ref<boolean>) {
+  const scope = inject(FORM_SCOPE_KEY, null)
+  if (!scope) return
+  const id = Symbol('form')
+  watch(submitting, value => scope.set(id, value), { immediate: true, flush: 'sync' })
+  onScopeDispose(() => scope.set(id, false))
+}

package/src/components/line-clamp/LineClamp.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+  import { computed, onBeforeUnmount, onMounted, onUpdated, shallowRef, useId } from 'vue'
+  import { useResizeObserver } from '@vueuse/core'
+  import { cn } from '../../lib/cn'
+  import { useUiLocale } from '../../locale'
+  import Button from '../button/Button.vue'
+  import {
+    animateLineClamp,
+    lineClampCount,
+    measureLineClamp,
+    revealLineClamp,
+  } from '../../../../shared/src/lib/line-clamp'
+  import { lineClampContent, lineClampRoot, lineClampToggle } from './line-clamp.variants'
+
+  defineOptions({ name: 'HnLineClamp' })
+
+  const props = defineProps<{
+    lines?: number
+    expandLabel?: string
+    collapseLabel?: string
+    class?: string
+  }>()
+
+  const expanded = defineModel<boolean>('expanded', { default: false })
+
+  const t = useUiLocale()
+  const id = useId()
+  const root = shallowRef<HTMLElement | null>(null)
+  const content = shallowRef<HTMLElement | null>(null)
+  const truncated = shallowRef<boolean | null>(null)
+  const truncation = computed(() => (truncated.value === null ? undefined : `${truncated.value}`))
+  const count = computed(() => lineClampCount(props.lines))
+
+  let shown = expanded.value
+  let reveal = false
+  let stop: (() => void) | undefined
+
+  function measure() {
+    if (!content.value) return
+    const next = measureLineClamp(content.value)
+    if (next !== null) truncated.value = next
+  }
+
+  function sync() {
+    const element = content.value
+    if (element && shown !== expanded.value) {
+      shown = expanded.value
+      const scroll = reveal && !shown
+      reveal = false
+      stop?.()
+      stop = animateLineClamp(element, shown, () => {
+        measure()
+        if (scroll) revealLineClamp(root.value)
+      })
+    }
+    measure()
+  }
+
+  onMounted(() => {
+    measure()
+    void document.fonts?.ready.then(measure)
+  })
+  onUpdated(sync)
+  useResizeObserver(content, measure)
+  onBeforeUnmount(() => stop?.())
+
+  function toggle() {
+    reveal = expanded.value
+    expanded.value = !expanded.value
+  }
+</script>
+
+<template>
+  <div
+    ref="root"
+    :data-expanded="expanded ? '' : undefined"
+    :data-truncated="truncation"
+    :class="cn(lineClampRoot(), props.class)"
+  >
+    <div
+      :id="id"
+      ref="content"
+      :data-expanded="expanded ? '' : undefined"
+      :style="{ '--hn-line-clamp': count }"
+      :class="lineClampContent()"
+    >
+      <slot />
+    </div>
+    <span :class="lineClampToggle()">
+      <Button
+        variant="link"
+        size="sm"
+        :aria-expanded="expanded"
+        :aria-controls="id"
+        @click="toggle"
+      >
+        {{
+          expanded
+            ? (props.collapseLabel ?? t.lineClamp.collapse)
+            : (props.expandLabel ?? t.lineClamp.expand)
+        }}
+      </Button>
+    </span>
+  </div>
+</template>

package/src/components/line-clamp/line-clamp.variants.ts

@@ -0,0 +1 @@
+export * from '../../../../shared/src/variants/line-clamp'

package/src/components/sheet/Sheet.vue

@@ -13,6 +13,7 @@
   import { useOverlayPortal } from '../../lib/overlay-portal'
   import { useScrollViewport } from '../../lib/scroll-viewport'
   import { cn } from '../../lib/cn'
+  import { provideFormScope } from '../form/scope'
   import Card from '../card/Card.vue'
   import CloseButton from '../close-button/CloseButton.vue'
   import Heading from '../heading/Heading.vue'
@@ -36,13 +37,16 @@
     { header: true, closable: true, handle: true, locked: false },
   )
 
+  const submitting = provideFormScope()
+  const locked = computed(() => props.locked || submitting.value)
+
   const slots = defineSlots<{
     default?(): unknown
     icon?(): unknown
     title?(): unknown
-    body?(props: { close: () => void }): unknown
-    content?(props: { close: () => void }): unknown
-    footer?(props: { close: () => void }): unknown
+    body?(props: { close: () => void; submitting: boolean }): unknown
+    content?(props: { close: () => void; submitting: boolean }): unknown
+    footer?(props: { close: () => void; submitting: boolean }): unknown
   }>()
 
   const { scrollArea, viewport } = useScrollViewport()
@@ -52,7 +56,7 @@
   const { content: panel, present } = useOverlayPortal(open)
 
   const { dragging, offset, onPointerDown } = useDragToDismiss(() => panel.value?.$el ?? null, {
-    enabled: () => !props.locked,
+    enabled: () => !locked.value,
     open,
     dismiss: () => (open.value = false),
   })
@@ -64,7 +68,7 @@
   )
 
   function guard(event: Event) {
-    if (props.locked) event.preventDefault()
+    if (locked.value) event.preventDefault()
   }
 
   function close() {
@@ -109,7 +113,7 @@
             <div
               v-if="props.handle"
               aria-hidden="true"
-              :data-disabled="props.locked ? '' : undefined"
+              :data-disabled="locked ? '' : undefined"
               :class="sheetHandle({ header: props.header && !slots.body })"
             />
             <div
@@ -136,22 +140,22 @@
                 </DialogDescription>
               </div>
               <DialogClose v-if="!props.handle && props.closable" as-child>
-                <CloseButton :disabled="props.locked" class="-mt-1.5 -me-1.5 shrink-0" />
+                <CloseButton :disabled="locked" class="-mt-1.5 -me-1.5 shrink-0" />
               </DialogClose>
             </div>
           </div>
-          <slot v-if="slots.body" name="body" :close="close" />
+          <slot v-if="slots.body" name="body" :close="close" :submitting="submitting" />
           <template v-else>
             <ScrollArea v-if="$slots.content" ref="scrollArea" class="min-h-0 grow">
               <div class="px-(--hn-panel-p) py-1">
-                <slot name="content" :close="close" />
+                <slot name="content" :close="close" :submitting="submitting" />
               </div>
             </ScrollArea>
             <div
               v-if="$slots.footer"
               class="flex shrink-0 justify-end gap-(--hn-inline-gap) px-(--hn-panel-p)"
             >
-              <slot name="footer" :close="close" />
+              <slot name="footer" :close="close" :submitting="submitting" />
             </div>
           </template>
         </Card>

package/src/index.ts

@@ -5,7 +5,7 @@ export type { VariantProps } from './lib/tv'
 export { EASE, DURATION, TRAVEL, STAGGER, TRANSITION, cssEase } from './motion'
 export type { Bezier, TransitionName } from './motion'
 
-export { provideUiLocale, useUiLocale, zhCN, enUS } from './locale'
+export { provideUiLocale, useUiLocale, zhCN, enUS, jaJP } from './locale'
 export type { UiMessages, PartialUiMessages } from './locale'
 
 export { REQUIRED_SINGLETONS } from './singletons'
@@ -74,7 +74,15 @@ export type {
   CompletionEdit,
 } from './components/autocomplete/types'
 export { default as CommandPalette } from './components/command-palette/CommandPalette.vue'
-export type { CommandItem, CommandGroup, CommandItems } from './components/command-palette/types'
+export { default as CommandPaletteInput } from './components/command-palette/CommandPaletteInput.vue'
+export type {
+  CommandItem,
+  CommandGroup,
+  CommandItems,
+  CommandItemMatch,
+  CommandItemSlotProps,
+  CommandEmptySlotProps,
+} from './components/command-palette/types'
 export { default as Listbox } from './components/listbox/Listbox.vue'
 export type { ListboxVariants } from './components/listbox/listbox.variants'
 export { default as Tree } from './components/tree/Tree.vue'
@@ -274,6 +282,7 @@ export { default as Toaster } from './components/toast/Toaster.vue'
 export { toast } from './components/toast/store'
 export type { ToastTone, ToastOptions, ToasterPosition } from './components/toast/store'
 export { default as Spoiler } from './components/spoiler/Spoiler.vue'
+export { default as LineClamp } from './components/line-clamp/LineClamp.vue'
 export { default as Skeleton } from './components/skeleton/Skeleton.vue'
 export { default as Image } from './components/image/Image.vue'
 export { default as ImageGroup } from './components/image/ImageGroup.vue'
@@ -297,11 +306,15 @@ export {
   readScrollRecord,
   writeScrollRecord,
   createScrollRestorer,
+  createScrollRestoreSession,
+  scrollRestoreScript,
 } from './components/scroll-area/scroll-restore'
 export type {
   ScrollRecord,
   ScrollRestorer,
   ScrollRestorerPorts,
+  ScrollRestoreSession,
+  ScrollRestoreSessionOptions,
 } from './components/scroll-area/scroll-restore'
 
 export { default as DataTable } from './components/data-table/DataTable.vue'

package/src/locale/index.ts

@@ -30,5 +30,5 @@ export function useUiLocale(): ComputedRef<UiMessages> {
   return inject(UI_LOCALE_KEY, fallbackLocale)
 }
 
-export { zhCN, enUS } from '../../../shared/src/locale'
+export { zhCN, enUS, jaJP } from '../../../shared/src/locale'
 export type { UiMessages, PartialUiMessages } from '../../../shared/src/locale'