@hina-ui/vue 1.0.0 → 1.2.0

package/src/components/textarea/Textarea.vue

@@ -1,8 +1,7 @@
 <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 { useTextareaSizing } from './composables/useTextareaSizing'
   import ScrollArea from '../scroll-area/ScrollArea.vue'
   import { textarea, textareaField, type TextareaVariants } from './textarea.variants'
 
@@ -34,51 +33,14 @@
 
   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),
-  )
+  const { el, area, bounds, fit, focus } = useTextareaSizing(props, model)
 </script>
 
 <template>
   <div
     data-hn-textarea
     :data-invalid="invalid ? '' : undefined"
+    :data-disabled="disabled ? '' : undefined"
     :style="{ '--hn-textarea-rows': bounds.min, '--hn-textarea-max-rows': bounds.max }"
     :class="
       cn(

package/src/components/textarea/composables/useTextareaSizing.ts

@@ -0,0 +1,54 @@
+import { computed, nextTick, onMounted, shallowRef, watch, type Ref } from 'vue'
+import { caretTop } from '../../../lib/caret'
+import type { TextareaVariants } from '../textarea.variants'
+
+interface TextareaSizingProps {
+  autosize?: boolean | { minRows?: number; maxRows?: number }
+  rows: number
+  size?: TextareaVariants['size']
+  variant?: TextareaVariants['variant']
+}
+
+export function useTextareaSizing(props: TextareaSizingProps, model: Ref<string | undefined>) {
+  const el = shallowRef<HTMLTextAreaElement | null>(null)
+  const area = shallowRef<{ viewport?: HTMLElement }>()
+
+  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, props.variant, bounds.value.min],
+    () => void nextTick(fit),
+  )
+
+  return { el, area, bounds, fit, focus }
+}

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

@@ -2,14 +2,15 @@ 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',
+    'text-fg flex w-full min-w-0 cursor-text flex-col overflow-hidden rounded-md border font-medium',
+    'data-disabled:cursor-not-allowed data-disabled:opacity-50',
   ],
   variants: {
     variant: {
+      bare: 'rounded-none border-0 bg-transparent shadow-none outline-none [--hn-textarea-border-w:0px]',
       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)]',
+        'hn-field border-line [--hn-field-bg:var(--hn-surface)] [--hn-field-shadow:var(--hn-shadow-sm)]',
+      secondary: 'hn-field 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)]',
@@ -39,7 +40,7 @@ export const textarea = tv({
 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)]',
+    'px-[var(--hn-textarea-px)] py-[calc((var(--hn-textarea-h)_-_1lh)/2_-_var(--hn-textarea-border-w,1px))]',
     'placeholder:text-faint placeholder:font-normal disabled:cursor-not-allowed',
   ],
 })

package/src/components/tree-select/TreeSelect.vue

@@ -106,6 +106,7 @@
       :disabled="disabled"
       :data-placeholder="selected ? undefined : ''"
       :data-invalid="invalid ? '' : undefined"
+      :data-disabled="disabled ? '' : undefined"
       :aria-invalid="invalid || undefined"
       :class="
         cn(

package/src/index.ts

@@ -118,6 +118,7 @@ export { default as MenubarRadioGroup } from './components/menubar/MenubarRadioG
 export { default as MenubarRadioItem } from './components/menubar/MenubarRadioItem.vue'
 export { default as Form } from './components/form/Form.vue'
 export { default as FormField } from './components/form-field/FormField.vue'
+export type { FormFieldLayoutProps } from './components/form-field/types'
 export { default as FormLayout } from './components/form-layout/FormLayout.vue'
 export type { FormLayoutVariants } from './components/form-layout/form-layout.variants'
 export type { FormValidateOn } from './components/form/composables/useForm'

package/src/lib/caret.ts

@@ -22,10 +22,6 @@ const MIRRORED = [
   'border-left-width',
 ]
 
-/**
- * 量出 textarea 光标所在行的顶边（相对 textarea 自身的边框盒）。
- * 原生没有光标几何 API，只能用同排版的镜像块把光标前的文字排一遍。
- */
 export function caretTop(node: HTMLTextAreaElement, at = node.selectionEnd): number {
   const style = getComputedStyle(node)
   const mirror = node.ownerDocument.createElement('div')

package/src/lib/collapse.ts

@@ -1,4 +1,10 @@
-import { getCurrentInstance, onBeforeUpdate, onMounted } from 'vue'
+import {
+  getCurrentInstance,
+  onBeforeUpdate,
+  onMounted,
+  shallowRef,
+  type ComponentPublicInstance,
+} from 'vue'
 
 export type CollapseAxis = 'y' | 'x'
 
@@ -43,3 +49,17 @@ export function useCollapseHooks(axis: CollapseAxis = 'y') {
 
   return collapseHooks(axis, () => parent)
 }
+
+export function useCollapseGap() {
+  const content = shallowRef<ComponentPublicInstance | null>(null)
+
+  function measure() {
+    const el = content.value?.$el as Element | undefined
+    if (el instanceof Element) writeCollapseGap(el, el.parentElement)
+  }
+
+  onMounted(measure)
+  onBeforeUpdate(measure)
+
+  return content
+}

package/src/lib/field-focus.ts

@@ -8,10 +8,6 @@ function controlOf(node: Element) {
     : null
 }
 
-/**
- * 点击输入面里非交互的部分（附属格、前后缀、空白）时把焦点交给最近的输入区，返回被聚焦的输入区；点击落在交互元素上或者没有可聚焦的输入区时返回 null。
- * 点击所在的段自己含输入区时只认它、不动光标（段内的处理器已经定过位）；否则先向后找，再向前找；落在点击位置之后的输入区把光标放到开头，之前的放到末尾。
- */
 export function focusFieldFrom(root: HTMLElement, target: HTMLElement) {
   if (target.closest(INTERACTIVE)) return null
   const segments = Array.from(root.children)

package/src/styles/interaction.css

@@ -128,7 +128,7 @@
     opacity var(--hn-duration-fast) var(--hn-ease-enter);
 
   @media (hover: hover) {
-    &:hover:not(:disabled):not(:has(:disabled)):not(
+    &:hover:not(:disabled):not([data-disabled]):not(
         :has(:is(input, textarea, [data-hn-segment]):focus-visible)
       ):not([data-invalid]) {
       background-color: color-mix(
@@ -138,7 +138,7 @@
       );
     }
 
-    &[data-invalid]:hover:not(:disabled):not(:has(:disabled)):not(
+    &[data-invalid]:hover:not(:disabled):not([data-disabled]):not(
         :has(:is(input, textarea, [data-hn-segment]):focus-visible)
       ) {
       background-color: color-mix(
@@ -155,7 +155,7 @@
   }
 
   &:focus-visible,
-  &:has(:is(input, textarea, [data-hn-segment]):focus-visible) {
+  &:has(:is(input, textarea, [data-hn-segment], [data-hn-select-trigger]):focus-visible) {
     --hn-field-ring-w: 2px;
   }
 
@@ -170,7 +170,9 @@
   }
 
   &[data-invalid]:focus-visible,
-  &[data-invalid]:has(:is(input, textarea, [data-hn-segment]):focus-visible) {
+  &[data-invalid]:has(
+      :is(input, textarea, [data-hn-segment], [data-hn-select-trigger]):focus-visible
+    ) {
     --hn-field-ring-w: 1px;
   }
 }