@nexxtmove/ui 1.6.0 → 1.8.0

package/dist/nuxt.js

@@ -51,6 +51,7 @@ var s = {
 	NexxtTable: "components/Table/Table.vue",
 	NexxtTabs: "components/Tabs/Tabs.vue",
 	NexxtTemplateCard: "components/TemplateCard/TemplateCard.vue",
+	NexxtTextarea: "components/Textarea/Textarea.vue",
 	NexxtTimelineEvent: "components/TimelineEvent/TimelineEvent.vue",
 	NexxtTimelineLanes: "components/TimelineLanes/TimelineLanes.vue",
 	NexxtTimelinePhaseblock: "components/TimelinePhaseblock/TimelinePhaseblock.vue",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nexxtmove/ui",
   "type": "module",
-  "version": "1.6.0",
+  "version": "1.8.0",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

package/src/components/InputField/InputField.vue

@@ -1,11 +1,29 @@
 <script setup lang="ts">
-import { computed, getCurrentInstance, useTemplateRef } from 'vue'
+import { computed, getCurrentInstance, useAttrs, useTemplateRef } from 'vue'
 import Icon from '../Icon/Icon.vue'
 
 const INPUT_ID = 'input-field-' + Math.random().toString(36).slice(2, 10)
 
+const attrs = useAttrs()
+
+// `class` and `style` describe where the field sits in the consumer's layout,
+// so they belong on the outer wrapper. Everything else -- id, name, type,
+// placeholder, data-* , aria-* -- describes the control, so it goes to the
+// input. Nothing lands on both any more.
+const inputAttrs = computed(() => {
+  const rest: Record<string, unknown> = { ...attrs }
+  delete rest.class
+  delete rest.style
+  return rest
+})
+
 defineOptions({
   name: 'NexxtInputField',
+  // Attributes used to land twice: Vue applied them to the root *and* the
+  // explicit v-bind put them on the input. `id` was therefore duplicated across
+  // two elements, and a consumer's layout class ended up on an input that
+  // already carries `w-full` itself. Routing is now explicit: see the template.
+  inheritAttrs: false,
 })
 
 export interface NexxtInputFieldProps {
@@ -50,7 +68,7 @@ const decrement = () => {
 </script>
 
 <template>
-  <div class="inline-flex flex-col gap-1">
+  <div class="inline-flex flex-col gap-1" :class="attrs.class" :style="attrs.style">
     <label v-if="label" class="justify-start small-normal text-gray-700" :for="INPUT_ID">
       {{ label }}
       <span v-if="required" class="text-brick-500">*</span>
@@ -69,7 +87,7 @@ const decrement = () => {
         :id="INPUT_ID"
         v-model="modelValue"
         :placeholder="placeholder"
-        v-bind="$attrs"
+        v-bind="inputAttrs"
         class="bg-transparant h-10 w-full min-w-60 text-sm text-gray-900 placeholder-gray-400 focus:outline-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
         :class="{ 'pl-3': !leftIcon, 'pr-3': !rightIcon }"
       />

package/src/components/InputSelect/InputSelect.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed } from 'vue'
+import { computed, useAttrs } from 'vue'
 import NexxtIcon from '../Icon/Icon.vue'
 import NexxtFloatingPanel from '../FloatingPanel/FloatingPanel.vue'
 import type Icon from '../Icon/Icon.vue'
@@ -11,7 +11,24 @@ const generateId = () => 'input-select-' + Math.random().toString(36).slice(2, 1
 const fieldId = generateId()
 const selectId = generateId()
 
-defineOptions({ name: 'NexxtInputSelect' })
+const attrs = useAttrs()
+
+// `class` and `style` position the field in the consumer's layout and belong on
+// the wrapper; everything else describes the control and goes to the input.
+const inputAttrs = computed(() => {
+  const rest: Record<string, unknown> = { ...attrs }
+  delete rest.class
+  delete rest.style
+  return rest
+})
+
+defineOptions({
+  name: 'NexxtInputSelect',
+  // Same routing as NexxtInputField: attributes used to land on the root and
+  // the input at once, duplicating `id` and putting layout classes on a control
+  // that is already full-width. See the template.
+  inheritAttrs: false,
+})
 
 export interface NexxtInputSelectProps {
   options: SelectOption[]
@@ -49,7 +66,7 @@ const select = (opt: SelectOption, close: () => void) => {
 </script>
 
 <template>
-  <div class="inline-flex flex-col gap-1">
+  <div class="inline-flex flex-col gap-1" :class="attrs.class" :style="attrs.style">
     <label v-if="label" class="justify-start small-normal text-gray-700" :for="fieldId">
       {{ label }}
       <span v-if="required" class="text-brick-500">*</span>
@@ -114,7 +131,7 @@ const select = (opt: SelectOption, close: () => void) => {
         :id="fieldId"
         v-model="inputModel"
         :placeholder="placeholder"
-        v-bind="$attrs"
+        v-bind="inputAttrs"
         class="bg-transparant h-10 w-full min-w-40 px-3 text-sm text-gray-900 placeholder-gray-400 focus:outline-none"
       />
     </div>

package/src/components/Textarea/Textarea.vue

@@ -0,0 +1,144 @@
+<script lang="ts" setup>
+import { computed, nextTick, useAttrs, useTemplateRef, watch } from 'vue'
+
+const TEXTAREA_ID = 'textarea-' + Math.random().toString(36).slice(2, 10)
+
+defineOptions({
+  name: 'NexxtTextarea',
+  // Same routing as NexxtInputField: `class` and `style` position the field in
+  // the consumer's layout and go to the wrapper, everything else describes the
+  // control and goes to the textarea. Nothing lands on both.
+  inheritAttrs: false,
+})
+
+export interface NexxtTextareaProps {
+  /** Placeholder shown while the field is empty. */
+  placeholder?: string
+  /** Label rendered above the field. */
+  label?: string
+  /** Put the field in its error state. */
+  error?: boolean
+  /** Message shown below the field while `error` is set. */
+  errorMessage?: string
+  /** Mark the label with an asterisk. */
+  required?: boolean
+  /**
+   * Visible rows, and the floor for `autosize`. The field is never shorter than
+   * a NexxtInputField, whatever this is set to.
+   */
+  rows?: number
+  /**
+   * Grow with the content instead of scrolling, between `rows` and `maxRows`.
+   * Off by default: a field that changes height while typing moves whatever sits
+   * below it, so it should be asked for rather than assumed.
+   */
+  autosize?: boolean
+  /** Upper bound for `autosize`, in rows. Unset means it grows indefinitely. */
+  maxRows?: number
+  /**
+   * Whether the field can be dragged taller by its corner grip. Named after the
+   * CSS property it sets, so it can grow to cover the other values later
+   * without changing what the two it has today mean.
+   *
+   * Ignored while `autosize` is on: the autosizer rewrites the height on every
+   * keystroke, so a dragged height would not survive the next character.
+   */
+  resize?: 'vertical' | 'none'
+}
+
+const {
+  label,
+  error = false,
+  errorMessage,
+  required = false,
+  rows = 3,
+  autosize = false,
+  maxRows,
+  resize = 'vertical',
+} = defineProps<NexxtTextareaProps>()
+
+// `null` is in the type because the field's normal job is editing a nullable
+// database column, and an API that returns one should not force every call site
+// to write `?? ''`. The default stays: it only fires for `undefined`, and it
+// keeps an unbound field from starting out null.
+const model = defineModel<string | null>({ default: '' })
+
+const attrs = useAttrs()
+
+const wrapperAttrs = computed(() => ({ class: attrs.class, style: attrs.style }))
+
+const controlAttrs = computed(() => {
+  const rest: Record<string, unknown> = { ...attrs }
+  delete rest.class
+  delete rest.style
+  return rest
+})
+
+const textareaEl = useTemplateRef<HTMLTextAreaElement>('textareaEl')
+
+/**
+ * Height is measured, not calculated: reset to `auto` first so `scrollHeight`
+ * reports the content height rather than the height already set. `maxRows` is
+ * converted through the element's own computed line-height so it follows the
+ * field's typography instead of a hardcoded number.
+ */
+const fitToContent = () => {
+  const el = textareaEl.value
+  if (!el || !autosize) return
+
+  // Reset first, so scrollHeight reports the content height rather than the
+  // height already set.
+  el.style.height = 'auto'
+
+  const style = getComputedStyle(el)
+  const lineHeight = parseFloat(style.lineHeight) || 0
+  const padding = parseFloat(style.paddingTop) + parseFloat(style.paddingBottom)
+  const border = parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth)
+
+  // scrollHeight covers content plus padding, but `height` under border-box
+  // includes the border too. Without adding it the field renders a border's
+  // width too short -- small, but enough to sit lower than a NexxtInputField
+  // beside it.
+  const natural = el.scrollHeight + border
+  const cap = maxRows && lineHeight ? maxRows * lineHeight + padding + border : Infinity
+
+  el.style.height = `${Math.min(natural, cap)}px`
+  el.style.overflowY = natural > cap ? 'auto' : 'hidden'
+}
+
+// Covers programmatic changes as well as typing, and waits for the DOM so
+// scrollHeight is measured after the new value is rendered.
+watch(model, () => nextTick(fitToContent), { immediate: true, flush: 'post' })
+
+defineExpose({ textareaEl, fitToContent })
+</script>
+
+<template>
+  <div class="inline-flex flex-col gap-1" :class="wrapperAttrs.class" :style="wrapperAttrs.style">
+    <label v-if="label" class="justify-start small-normal text-gray-700" :for="TEXTAREA_ID">
+      {{ label }}
+      <span v-if="required" class="text-brick-500">*</span>
+    </label>
+
+    <textarea
+      :id="TEXTAREA_ID"
+      ref="textareaEl"
+      v-model="model"
+      v-bind="controlAttrs"
+      :rows="rows"
+      :placeholder="placeholder"
+      class="min-h-10 w-full rounded-lg border px-3 py-2 small-normal text-gray-900 transition-colors outline-none placeholder:text-gray-400 focus:border-cornflower-blue-500"
+      :class="[
+        error ? 'border-brick-400' : 'border-gray-200',
+        // autosize wins: it owns the height, and a grip that fights it every
+        // keystroke is worse than no grip.
+        autosize || resize === 'none' ? 'resize-none' : 'resize-y',
+      ]"
+      @input="fitToContent"
+    />
+
+    <p v-if="error && errorMessage" class="small-normal text-brick-400">
+      {{ errorMessage }}
+    </p>
+  </div>
+</template>

package/src/components.json

@@ -48,6 +48,7 @@
   "NexxtTable": "components/Table/Table.vue",
   "NexxtTabs": "components/Tabs/Tabs.vue",
   "NexxtTemplateCard": "components/TemplateCard/TemplateCard.vue",
+  "NexxtTextarea": "components/Textarea/Textarea.vue",
   "NexxtTimelineEvent": "components/TimelineEvent/TimelineEvent.vue",
   "NexxtTimelineLanes": "components/TimelineLanes/TimelineLanes.vue",
   "NexxtTimelinePhaseblock": "components/TimelinePhaseblock/TimelinePhaseblock.vue",

package/src/index.ts

@@ -62,6 +62,7 @@ export { default as NexxtTabbedContent } from './components/TabbedContent/Tabbed
 export { default as NexxtTable } from './components/Table/Table.vue'
 export { default as NexxtTabs } from './components/Tabs/Tabs.vue'
 export { default as NexxtTemplateCard } from './components/TemplateCard/TemplateCard.vue'
+export { default as NexxtTextarea } from './components/Textarea/Textarea.vue'
 export { default as NexxtTimelineEvent } from './components/TimelineEvent/TimelineEvent.vue'
 export { default as NexxtTimelineLanes } from './components/TimelineLanes/TimelineLanes.vue'
 export { default as NexxtTimelinePhaseblock } from './components/TimelinePhaseblock/TimelinePhaseblock.vue'