@plexui/vue 0.1.2 → 0.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -16,6 +16,8 @@ const TextareaComponent = defineComponent({
|
|
|
16
16
|
variant: { type: String, default: "outline" },
|
|
17
17
|
/** Controls the size of the textarea. @default "md" */
|
|
18
18
|
size: { type: String, default: "md" },
|
|
19
|
+
/** Applies a negative margin using the current gutter to optically align the text with surrounding content. */
|
|
20
|
+
opticallyAlign: String,
|
|
19
21
|
/** Controls gutter on the edges of the textarea, defaults to value from `size`. */
|
|
20
22
|
gutterSize: String,
|
|
21
23
|
/** Disables the textarea visually and from interactions. @default false */
|
|
@@ -132,6 +134,7 @@ const TextareaComponent = defineComponent({
|
|
|
132
134
|
"data-variant": variant,
|
|
133
135
|
"data-size": size,
|
|
134
136
|
"data-gutter-size": gutterSize,
|
|
137
|
+
"data-optically-align": props.opticallyAlign,
|
|
135
138
|
"data-focused": String(focused.value),
|
|
136
139
|
"data-disabled": disabled ? "" : undefined,
|
|
137
140
|
"data-readonly": readOnly ? "" : undefined,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../../../src/components/Textarea/Textarea.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n computed,\n defineComponent,\n h,\n nextTick,\n onMounted,\n ref,\n useId,\n watch,\n withDirectives,\n type PropType,\n type TextareaHTMLAttributes,\n} from \"vue\"\nimport type { ControlSize, Sizes, Variants } from \"@plexui/styles/types\"\nimport { vServerText } from \"../../lib/defaultValue.js\"\nimport { toCssVariables } from \"../../lib/helpers.js\"\nimport s from \"@plexui/styles/components/Textarea/Textarea.module.css\"\n\n// Vue port of packages/ui/src/components/Textarea/Textarea.tsx. Props,\n// defaults and rendered DOM match React 1:1 (checked by the parity tests).\n//\n// - `class` goes to the container; every other attribute and listener\n// (`style`, `placeholder`, `@input`, `@change`, ...) goes to the <textarea>,\n// like React's `className` and `...restProps`.\n// - Value: `value` + `update:value` mirror React's `value` prop\n// (`v-model:value`) and fire on every input. Uncontrolled use takes\n// `default-value`. Like a React controlled textarea, a `value` the parent\n// does not update after input is put back.\n// - As in React, the textarea's text content (its `defaultValue`) follows\n// the controlled value, or `default-value` when uncontrolled. It is set\n// through the `textContent` property, which Vue's server renderer prints\n// as the element's content, so `vServerText` can adjust it at SSR.\n\ntype ListenerValue = ((event: Event) => void) | Array<(event: Event) => void> | undefined\n\nconst invoke = (handler: unknown, event: Event) => {\n for (const fn of ([] as unknown[]).concat(handler ?? [])) {\n if (typeof fn === \"function\") fn(event)\n }\n}\n\nconst TextareaComponent = defineComponent({\n name: \"Textarea\",\n inheritAttrs: false,\n props: {\n /** Visual style of the textarea. @default \"outline\" */\n variant: { type: String as PropType<Variants<\"outline\" | \"soft\">>, default: \"outline\" },\n /** Controls the size of the textarea. @default \"md\" */\n size: { type: String as PropType<ControlSize>, default: \"md\" },\n /** Controls gutter on the edges of the textarea, defaults to value from `size`. */\n gutterSize: String as PropType<Sizes<\"2xs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\">>,\n /** Disables the textarea visually and from interactions. @default false */\n disabled: { type: Boolean, default: false },\n /** Makes the textarea read-only. @default false */\n readOnly: { type: Boolean, default: false },\n /** Native spelling of `readOnly` (`<Textarea readonly />`). @default false */\n readonly: { type: Boolean, default: false },\n /** Mark the textarea as invalid. @default false */\n invalid: { type: Boolean, default: false },\n /** Allow autofill extensions to appear in the textarea. @default `true` when `name` is set, else `false` */\n allowAutofillExtensions: { type: Boolean, default: undefined },\n /** Select all contents of the textarea when mounted (and whenever it turns `true`). @default false */\n autoSelect: { type: Boolean, default: undefined },\n /** Default number of rows to display. @default 3 */\n rows: { type: Number, default: 3 },\n /** Automatically adjust the height of the textarea based on its contents. @default false */\n autoResize: { type: Boolean, default: undefined },\n /** Maximum number of rows that can be displayed when autoResize is enabled. @default Math.max(rows, 10) */\n maxRows: Number,\n id: String,\n name: String,\n /** Controlled value (`v-model:value`) */\n value: { type: [String, Number] as PropType<string | number>, default: undefined },\n /** Initial value when uncontrolled */\n defaultValue: { type: [String, Number] as PropType<string | number>, default: undefined },\n /** The textarea's `autocomplete` attribute */\n autoComplete: String,\n },\n emits: {\n \"update:value\": (_value: string) => true,\n /** Fired when the browser autofills the textarea */\n \"autofill\": () => true,\n },\n setup(props, { attrs, emit, expose }) {\n const textAreaRef = ref<HTMLTextAreaElement | null>(null)\n // Prevent 1Password from appearing: 1Password won't display if it thinks this field is for searching\n // Allow user to override this for connecting to labels.\n const onePasswordPreventionId = `search-ui-input-${useId()}`\n const focused = ref(false)\n\n const computedMaxRows = computed(() =>\n props.autoResize ? Math.max(props.maxRows ?? 10, props.rows) : props.rows,\n )\n const controlledValue = () => props.value\n\n const runAutoSelect = () => {\n if (props.autoSelect) {\n textAreaRef.value?.select()\n }\n }\n\n const autosizeTextarea = () => {\n const textarea = textAreaRef.value\n if (!props.autoResize || !textarea || computedMaxRows.value === undefined) return\n textarea.style.height = \"0px\"\n const scrollHeight = textarea.scrollHeight\n textarea.style.height = scrollHeight + \"px\"\n }\n\n // The textarea's value is set imperatively, like React DOM does: a `value`\n // prop would make Vue mirror it into a `value` attribute, which React\n // never renders. Puts the controlled value back when it differs.\n const syncValue = () => {\n const textarea = textAreaRef.value\n const value = controlledValue()\n if (!textarea || value == null) return\n const nextValue = String(value)\n if (textarea.value !== nextValue) textarea.value = nextValue\n }\n\n // React runs these effects after mount and when their dependencies change\n onMounted(() => {\n const textarea = textAreaRef.value\n // React's initTextarea: the initial text becomes the (dirty) value\n const initialValue = textarea?.textContent ?? \"\"\n if (textarea && initialValue !== \"\") textarea.value = initialValue\n runAutoSelect()\n autosizeTextarea()\n })\n // React DOM writes a new value while committing, before any effect runs,\n // so the selection covers the value that arrives with `autoSelect`\n watch(\n () => props.autoSelect,\n () => {\n syncValue()\n runAutoSelect()\n },\n { flush: \"post\" },\n )\n // Resize if value changes outside of user input - e.g. form reset\n watch(\n () => [controlledValue(), props.rows, props.autoResize, computedMaxRows.value],\n () => {\n syncValue()\n autosizeTextarea()\n },\n { flush: \"post\" },\n )\n\n const handleInput = (evt: Event) => {\n const next = (evt.target as HTMLTextAreaElement).value\n emit(\"update:value\", next)\n autosizeTextarea()\n // A controlled value the parent did not update wins over the typed text,\n // as in React\n void nextTick(syncValue)\n }\n\n expose({\n /** The rendered <textarea> element */\n textarea: textAreaRef,\n focus: () => textAreaRef.value?.focus(),\n })\n\n return () => {\n const {\n class: className,\n onInput,\n onFocus,\n onBlur,\n onAnimationstart,\n ...restAttrs\n } = attrs as Record<string, unknown>\n\n const { variant, size, gutterSize, disabled, invalid, rows } = props\n const readOnly = props.readOnly || props.readonly\n // Default to `true` when presence of `name`\n const allowAutofillExtensions = props.allowAutofillExtensions ?? !!props.name\n const value = controlledValue()\n // React keeps the textarea's defaultValue (its text content) in sync with\n // the controlled value, else with `defaultValue`\n const textContent = String(value ?? props.defaultValue ?? \"\")\n\n return h(\n \"div\",\n {\n \"class\": [s.Container, className],\n \"data-variant\": variant,\n \"data-size\": size,\n \"data-gutter-size\": gutterSize,\n \"data-focused\": String(focused.value),\n \"data-disabled\": disabled ? \"\" : undefined,\n \"data-readonly\": readOnly ? \"\" : undefined,\n \"data-invalid\": invalid ? \"\" : undefined,\n \"style\": toCssVariables({\n \"textarea-min-rows\": `${rows}`,\n \"textarea-max-rows\": `${computedMaxRows.value}`,\n }),\n },\n [\n withDirectives(\n h(\"textarea\", {\n ...restAttrs,\n \"onInput\": (evt: Event) => {\n invoke(onInput as ListenerValue, evt)\n handleInput(evt)\n },\n \"ref\": textAreaRef,\n \"id\": props.id || (allowAutofillExtensions ? undefined : onePasswordPreventionId),\n \"class\": s.Textarea,\n \"name\": props.name,\n \"autocomplete\": props.autoComplete ?? restAttrs.autocomplete,\n // Expose the visual invalid state to assistive tech; an explicit aria-invalid wins\n \"aria-invalid\": restAttrs[\"aria-invalid\"] ?? (invalid || undefined),\n \"readonly\": readOnly,\n \"disabled\": disabled,\n \"rows\": rows,\n \"onFocus\": (evt: Event) => {\n focused.value = true\n invoke(onFocus as ListenerValue, evt)\n },\n \"onBlur\": (evt: Event) => {\n focused.value = false\n invoke(onBlur as ListenerValue, evt)\n },\n \"onAnimationstart\": (evt: AnimationEvent) => {\n invoke(onAnimationstart as ListenerValue, evt)\n if (evt.animationName === \"native-autofill-in\") {\n emit(\"autofill\")\n }\n },\n // Prevent LastPass and 1Password from appearing\n \"data-lpignore\": allowAutofillExtensions ? undefined : true,\n \"data-1p-ignore\": allowAutofillExtensions ? undefined : true,\n \"textContent\": textContent,\n }),\n [[vServerText, textContent]],\n ),\n ],\n )\n }\n },\n})\n\ntype TextareaOwnProps = InstanceType<typeof TextareaComponent>[\"$props\"]\n\n/** Textarea props plus the native <textarea> attributes that fall through to it, as in React. */\nexport type TextareaProps = TextareaOwnProps & Omit<TextareaHTMLAttributes, keyof TextareaOwnProps | \"readonly\">\n\nexport const Textarea = TextareaComponent as typeof TextareaComponent & { new (): { $props: TextareaProps } }\n"]}
|
|
1
|
+
{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../../../src/components/Textarea/Textarea.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,EACR,eAAe,EACf,CAAC,EACD,QAAQ,EACR,SAAS,EACT,GAAG,EACH,KAAK,EACL,KAAK,EACL,cAAc,GAGf,MAAM,KAAK,CAAA;AAEZ,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAA;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AACrD,OAAO,CAAC,MAAM,wDAAwD,CAAA;AAmBtE,MAAM,MAAM,GAAG,CAAC,OAAgB,EAAE,KAAY,EAAE,EAAE;IAChD,KAAK,MAAM,EAAE,IAAK,EAAgB,CAAC,MAAM,CAAC,OAAO,IAAI,EAAE,CAAC,EAAE,CAAC;QACzD,IAAI,OAAO,EAAE,KAAK,UAAU;YAAE,EAAE,CAAC,KAAK,CAAC,CAAA;IACzC,CAAC;AACH,CAAC,CAAA;AAED,MAAM,iBAAiB,GAAG,eAAe,CAAC;IACxC,IAAI,EAAE,UAAU;IAChB,YAAY,EAAE,KAAK;IACnB,KAAK,EAAE;QACL,uDAAuD;QACvD,OAAO,EAAE,EAAE,IAAI,EAAE,MAAgD,EAAE,OAAO,EAAE,SAAS,EAAE;QACvF,uDAAuD;QACvD,IAAI,EAAE,EAAE,IAAI,EAAE,MAA+B,EAAE,OAAO,EAAE,IAAI,EAAE;QAC9D,+GAA+G;QAC/G,cAAc,EAAE,MAAmC;QACnD,mFAAmF;QACnF,UAAU,EAAE,MAAmE;QAC/E,2EAA2E;QAC3E,QAAQ,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE;QAC3C,mDAAmD;QACnD,QAAQ,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE;QAC3C,8EAA8E;QAC9E,QAAQ,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE;QAC3C,mDAAmD;QACnD,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE;QAC1C,4GAA4G;QAC5G,uBAAuB,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE;QAC9D,sGAAsG;QACtG,UAAU,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE;QACjD,oDAAoD;QACpD,IAAI,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,EAAE;QAClC,4FAA4F;QAC5F,UAAU,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE;QACjD,2GAA2G;QAC3G,OAAO,EAAE,MAAM;QACf,EAAE,EAAE,MAAM;QACV,IAAI,EAAE,MAAM;QACZ,yCAAyC;QACzC,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAA8B,EAAE,OAAO,EAAE,SAAS,EAAE;QAClF,sCAAsC;QACtC,YAAY,EAAE,EAAE,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAA8B,EAAE,OAAO,EAAE,SAAS,EAAE;QACzF,8CAA8C;QAC9C,YAAY,EAAE,MAAM;KACrB;IACD,KAAK,EAAE;QACL,cAAc,EAAE,CAAC,MAAc,EAAE,EAAE,CAAC,IAAI;QACxC,oDAAoD;QACpD,UAAU,EAAE,GAAG,EAAE,CAAC,IAAI;KACvB;IACD,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE;QAClC,MAAM,WAAW,GAAG,GAAG,CAA6B,IAAI,CAAC,CAAA;QACzD,qGAAqG;QACrG,wDAAwD;QACxD,MAAM,uBAAuB,GAAG,mBAAmB,KAAK,EAAE,EAAE,CAAA;QAC5D,MAAM,OAAO,GAAG,GAAG,CAAC,KAAK,CAAC,CAAA;QAE1B,MAAM,eAAe,GAAG,QAAQ,CAAC,GAAG,EAAE,CACpC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,IAAI,EAAE,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAC1E,CAAA;QACD,MAAM,eAAe,GAAG,GAAG,EAAE,CAAC,KAAK,CAAC,KAAK,CAAA;QAEzC,MAAM,aAAa,GAAG,GAAG,EAAE;YACzB,IAAI,KAAK,CAAC,UAAU,EAAE,CAAC;gBACrB,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,CAAA;YAC7B,CAAC;QACH,CAAC,CAAA;QAED,MAAM,gBAAgB,GAAG,GAAG,EAAE;YAC5B,MAAM,QAAQ,GAAG,WAAW,CAAC,KAAK,CAAA;YAClC,IAAI,CAAC,KAAK,CAAC,UAAU,IAAI,CAAC,QAAQ,IAAI,eAAe,CAAC,KAAK,KAAK,SAAS;gBAAE,OAAM;YACjF,QAAQ,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK,CAAA;YAC7B,MAAM,YAAY,GAAG,QAAQ,CAAC,YAAY,CAAA;YAC1C,QAAQ,CAAC,KAAK,CAAC,MAAM,GAAG,YAAY,GAAG,IAAI,CAAA;QAC7C,CAAC,CAAA;QAED,2EAA2E;QAC3E,sEAAsE;QACtE,iEAAiE;QACjE,MAAM,SAAS,GAAG,GAAG,EAAE;YACrB,MAAM,QAAQ,GAAG,WAAW,CAAC,KAAK,CAAA;YAClC,MAAM,KAAK,GAAG,eAAe,EAAE,CAAA;YAC/B,IAAI,CAAC,QAAQ,IAAI,KAAK,IAAI,IAAI;gBAAE,OAAM;YACtC,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;YAC/B,IAAI,QAAQ,CAAC,KAAK,KAAK,SAAS;gBAAE,QAAQ,CAAC,KAAK,GAAG,SAAS,CAAA;QAC9D,CAAC,CAAA;QAED,0EAA0E;QAC1E,SAAS,CAAC,GAAG,EAAE;YACb,MAAM,QAAQ,GAAG,WAAW,CAAC,KAAK,CAAA;YAClC,mEAAmE;YACnE,MAAM,YAAY,GAAG,QAAQ,EAAE,WAAW,IAAI,EAAE,CAAA;YAChD,IAAI,QAAQ,IAAI,YAAY,KAAK,EAAE;gBAAE,QAAQ,CAAC,KAAK,GAAG,YAAY,CAAA;YAClE,aAAa,EAAE,CAAA;YACf,gBAAgB,EAAE,CAAA;QACpB,CAAC,CAAC,CAAA;QACF,yEAAyE;QACzE,mEAAmE;QACnE,KAAK,CACH,GAAG,EAAE,CAAC,KAAK,CAAC,UAAU,EACtB,GAAG,EAAE;YACH,SAAS,EAAE,CAAA;YACX,aAAa,EAAE,CAAA;QACjB,CAAC,EACD,EAAE,KAAK,EAAE,MAAM,EAAE,CAClB,CAAA;QACD,kEAAkE;QAClE,KAAK,CACH,GAAG,EAAE,CAAC,CAAC,eAAe,EAAE,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,UAAU,EAAE,eAAe,CAAC,KAAK,CAAC,EAC9E,GAAG,EAAE;YACH,SAAS,EAAE,CAAA;YACX,gBAAgB,EAAE,CAAA;QACpB,CAAC,EACD,EAAE,KAAK,EAAE,MAAM,EAAE,CAClB,CAAA;QAED,MAAM,WAAW,GAAG,CAAC,GAAU,EAAE,EAAE;YACjC,MAAM,IAAI,GAAI,GAAG,CAAC,MAA8B,CAAC,KAAK,CAAA;YACtD,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,CAAA;YAC1B,gBAAgB,EAAE,CAAA;YAClB,yEAAyE;YACzE,cAAc;YACd,KAAK,QAAQ,CAAC,SAAS,CAAC,CAAA;QAC1B,CAAC,CAAA;QAED,MAAM,CAAC;YACL,sCAAsC;YACtC,QAAQ,EAAE,WAAW;YACrB,KAAK,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,EAAE,KAAK,EAAE;SACxC,CAAC,CAAA;QAEF,OAAO,GAAG,EAAE;YACV,MAAM,EACJ,KAAK,EAAE,SAAS,EAChB,OAAO,EACP,OAAO,EACP,MAAM,EACN,gBAAgB,EAChB,GAAG,SAAS,EACb,GAAG,KAAgC,CAAA;YAEpC,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,KAAK,CAAA;YACpE,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,CAAA;YACjD,4CAA4C;YAC5C,MAAM,uBAAuB,GAAG,KAAK,CAAC,uBAAuB,IAAI,CAAC,CAAC,KAAK,CAAC,IAAI,CAAA;YAC7E,MAAM,KAAK,GAAG,eAAe,EAAE,CAAA;YAC/B,0EAA0E;YAC1E,iDAAiD;YACjD,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,IAAI,KAAK,CAAC,YAAY,IAAI,EAAE,CAAC,CAAA;YAE7D,OAAO,CAAC,CACN,KAAK,EACL;gBACE,OAAO,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE,SAAS,CAAC;gBACjC,cAAc,EAAE,OAAO;gBACvB,WAAW,EAAE,IAAI;gBACjB,kBAAkB,EAAE,UAAU;gBAC9B,sBAAsB,EAAE,KAAK,CAAC,cAAc;gBAC5C,cAAc,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;gBACrC,eAAe,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;gBAC1C,eAAe,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;gBAC1C,cAAc,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;gBACxC,OAAO,EAAE,cAAc,CAAC;oBACtB,mBAAmB,EAAE,GAAG,IAAI,EAAE;oBAC9B,mBAAmB,EAAE,GAAG,eAAe,CAAC,KAAK,EAAE;iBAChD,CAAC;aACH,EACD;gBACE,cAAc,CACZ,CAAC,CAAC,UAAU,EAAE;oBACZ,GAAG,SAAS;oBACZ,SAAS,EAAE,CAAC,GAAU,EAAE,EAAE;wBACxB,MAAM,CAAC,OAAwB,EAAE,GAAG,CAAC,CAAA;wBACrC,WAAW,CAAC,GAAG,CAAC,CAAA;oBAClB,CAAC;oBACD,KAAK,EAAE,WAAW;oBAClB,IAAI,EAAE,KAAK,CAAC,EAAE,IAAI,CAAC,uBAAuB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,uBAAuB,CAAC;oBACjF,OAAO,EAAE,CAAC,CAAC,QAAQ;oBACnB,MAAM,EAAE,KAAK,CAAC,IAAI;oBAClB,cAAc,EAAE,KAAK,CAAC,YAAY,IAAI,SAAS,CAAC,YAAY;oBAC5D,mFAAmF;oBACnF,cAAc,EAAE,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,IAAI,SAAS,CAAC;oBACnE,UAAU,EAAE,QAAQ;oBACpB,UAAU,EAAE,QAAQ;oBACpB,MAAM,EAAE,IAAI;oBACZ,SAAS,EAAE,CAAC,GAAU,EAAE,EAAE;wBACxB,OAAO,CAAC,KAAK,GAAG,IAAI,CAAA;wBACpB,MAAM,CAAC,OAAwB,EAAE,GAAG,CAAC,CAAA;oBACvC,CAAC;oBACD,QAAQ,EAAE,CAAC,GAAU,EAAE,EAAE;wBACvB,OAAO,CAAC,KAAK,GAAG,KAAK,CAAA;wBACrB,MAAM,CAAC,MAAuB,EAAE,GAAG,CAAC,CAAA;oBACtC,CAAC;oBACD,kBAAkB,EAAE,CAAC,GAAmB,EAAE,EAAE;wBAC1C,MAAM,CAAC,gBAAiC,EAAE,GAAG,CAAC,CAAA;wBAC9C,IAAI,GAAG,CAAC,aAAa,KAAK,oBAAoB,EAAE,CAAC;4BAC/C,IAAI,CAAC,UAAU,CAAC,CAAA;wBAClB,CAAC;oBACH,CAAC;oBACD,gDAAgD;oBAChD,eAAe,EAAE,uBAAuB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI;oBAC3D,gBAAgB,EAAE,uBAAuB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI;oBAC5D,aAAa,EAAE,WAAW;iBAC3B,CAAC,EACF,CAAC,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC,CAC7B;aACF,CACF,CAAA;QACH,CAAC,CAAA;IACH,CAAC;CACF,CAAC,CAAA;AAOF,MAAM,CAAC,MAAM,QAAQ,GAAG,iBAAqF,CAAA","sourcesContent":["import {\n computed,\n defineComponent,\n h,\n nextTick,\n onMounted,\n ref,\n useId,\n watch,\n withDirectives,\n type PropType,\n type TextareaHTMLAttributes,\n} from \"vue\"\nimport type { ControlSize, Sizes, Variants } from \"@plexui/styles/types\"\nimport { vServerText } from \"../../lib/defaultValue.js\"\nimport { toCssVariables } from \"../../lib/helpers.js\"\nimport s from \"@plexui/styles/components/Textarea/Textarea.module.css\"\n\n// Vue port of packages/ui/src/components/Textarea/Textarea.tsx. Props,\n// defaults and rendered DOM match React 1:1 (checked by the parity tests).\n//\n// - `class` goes to the container; every other attribute and listener\n// (`style`, `placeholder`, `@input`, `@change`, ...) goes to the <textarea>,\n// like React's `className` and `...restProps`.\n// - Value: `value` + `update:value` mirror React's `value` prop\n// (`v-model:value`) and fire on every input. Uncontrolled use takes\n// `default-value`. Like a React controlled textarea, a `value` the parent\n// does not update after input is put back.\n// - As in React, the textarea's text content (its `defaultValue`) follows\n// the controlled value, or `default-value` when uncontrolled. It is set\n// through the `textContent` property, which Vue's server renderer prints\n// as the element's content, so `vServerText` can adjust it at SSR.\n\ntype ListenerValue = ((event: Event) => void) | Array<(event: Event) => void> | undefined\n\nconst invoke = (handler: unknown, event: Event) => {\n for (const fn of ([] as unknown[]).concat(handler ?? [])) {\n if (typeof fn === \"function\") fn(event)\n }\n}\n\nconst TextareaComponent = defineComponent({\n name: \"Textarea\",\n inheritAttrs: false,\n props: {\n /** Visual style of the textarea. @default \"outline\" */\n variant: { type: String as PropType<Variants<\"outline\" | \"soft\">>, default: \"outline\" },\n /** Controls the size of the textarea. @default \"md\" */\n size: { type: String as PropType<ControlSize>, default: \"md\" },\n /** Applies a negative margin using the current gutter to optically align the text with surrounding content. */\n opticallyAlign: String as PropType<\"start\" | \"end\">,\n /** Controls gutter on the edges of the textarea, defaults to value from `size`. */\n gutterSize: String as PropType<Sizes<\"2xs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\">>,\n /** Disables the textarea visually and from interactions. @default false */\n disabled: { type: Boolean, default: false },\n /** Makes the textarea read-only. @default false */\n readOnly: { type: Boolean, default: false },\n /** Native spelling of `readOnly` (`<Textarea readonly />`). @default false */\n readonly: { type: Boolean, default: false },\n /** Mark the textarea as invalid. @default false */\n invalid: { type: Boolean, default: false },\n /** Allow autofill extensions to appear in the textarea. @default `true` when `name` is set, else `false` */\n allowAutofillExtensions: { type: Boolean, default: undefined },\n /** Select all contents of the textarea when mounted (and whenever it turns `true`). @default false */\n autoSelect: { type: Boolean, default: undefined },\n /** Default number of rows to display. @default 3 */\n rows: { type: Number, default: 3 },\n /** Automatically adjust the height of the textarea based on its contents. @default false */\n autoResize: { type: Boolean, default: undefined },\n /** Maximum number of rows that can be displayed when autoResize is enabled. @default Math.max(rows, 10) */\n maxRows: Number,\n id: String,\n name: String,\n /** Controlled value (`v-model:value`) */\n value: { type: [String, Number] as PropType<string | number>, default: undefined },\n /** Initial value when uncontrolled */\n defaultValue: { type: [String, Number] as PropType<string | number>, default: undefined },\n /** The textarea's `autocomplete` attribute */\n autoComplete: String,\n },\n emits: {\n \"update:value\": (_value: string) => true,\n /** Fired when the browser autofills the textarea */\n \"autofill\": () => true,\n },\n setup(props, { attrs, emit, expose }) {\n const textAreaRef = ref<HTMLTextAreaElement | null>(null)\n // Prevent 1Password from appearing: 1Password won't display if it thinks this field is for searching\n // Allow user to override this for connecting to labels.\n const onePasswordPreventionId = `search-ui-input-${useId()}`\n const focused = ref(false)\n\n const computedMaxRows = computed(() =>\n props.autoResize ? Math.max(props.maxRows ?? 10, props.rows) : props.rows,\n )\n const controlledValue = () => props.value\n\n const runAutoSelect = () => {\n if (props.autoSelect) {\n textAreaRef.value?.select()\n }\n }\n\n const autosizeTextarea = () => {\n const textarea = textAreaRef.value\n if (!props.autoResize || !textarea || computedMaxRows.value === undefined) return\n textarea.style.height = \"0px\"\n const scrollHeight = textarea.scrollHeight\n textarea.style.height = scrollHeight + \"px\"\n }\n\n // The textarea's value is set imperatively, like React DOM does: a `value`\n // prop would make Vue mirror it into a `value` attribute, which React\n // never renders. Puts the controlled value back when it differs.\n const syncValue = () => {\n const textarea = textAreaRef.value\n const value = controlledValue()\n if (!textarea || value == null) return\n const nextValue = String(value)\n if (textarea.value !== nextValue) textarea.value = nextValue\n }\n\n // React runs these effects after mount and when their dependencies change\n onMounted(() => {\n const textarea = textAreaRef.value\n // React's initTextarea: the initial text becomes the (dirty) value\n const initialValue = textarea?.textContent ?? \"\"\n if (textarea && initialValue !== \"\") textarea.value = initialValue\n runAutoSelect()\n autosizeTextarea()\n })\n // React DOM writes a new value while committing, before any effect runs,\n // so the selection covers the value that arrives with `autoSelect`\n watch(\n () => props.autoSelect,\n () => {\n syncValue()\n runAutoSelect()\n },\n { flush: \"post\" },\n )\n // Resize if value changes outside of user input - e.g. form reset\n watch(\n () => [controlledValue(), props.rows, props.autoResize, computedMaxRows.value],\n () => {\n syncValue()\n autosizeTextarea()\n },\n { flush: \"post\" },\n )\n\n const handleInput = (evt: Event) => {\n const next = (evt.target as HTMLTextAreaElement).value\n emit(\"update:value\", next)\n autosizeTextarea()\n // A controlled value the parent did not update wins over the typed text,\n // as in React\n void nextTick(syncValue)\n }\n\n expose({\n /** The rendered <textarea> element */\n textarea: textAreaRef,\n focus: () => textAreaRef.value?.focus(),\n })\n\n return () => {\n const {\n class: className,\n onInput,\n onFocus,\n onBlur,\n onAnimationstart,\n ...restAttrs\n } = attrs as Record<string, unknown>\n\n const { variant, size, gutterSize, disabled, invalid, rows } = props\n const readOnly = props.readOnly || props.readonly\n // Default to `true` when presence of `name`\n const allowAutofillExtensions = props.allowAutofillExtensions ?? !!props.name\n const value = controlledValue()\n // React keeps the textarea's defaultValue (its text content) in sync with\n // the controlled value, else with `defaultValue`\n const textContent = String(value ?? props.defaultValue ?? \"\")\n\n return h(\n \"div\",\n {\n \"class\": [s.Container, className],\n \"data-variant\": variant,\n \"data-size\": size,\n \"data-gutter-size\": gutterSize,\n \"data-optically-align\": props.opticallyAlign,\n \"data-focused\": String(focused.value),\n \"data-disabled\": disabled ? \"\" : undefined,\n \"data-readonly\": readOnly ? \"\" : undefined,\n \"data-invalid\": invalid ? \"\" : undefined,\n \"style\": toCssVariables({\n \"textarea-min-rows\": `${rows}`,\n \"textarea-max-rows\": `${computedMaxRows.value}`,\n }),\n },\n [\n withDirectives(\n h(\"textarea\", {\n ...restAttrs,\n \"onInput\": (evt: Event) => {\n invoke(onInput as ListenerValue, evt)\n handleInput(evt)\n },\n \"ref\": textAreaRef,\n \"id\": props.id || (allowAutofillExtensions ? undefined : onePasswordPreventionId),\n \"class\": s.Textarea,\n \"name\": props.name,\n \"autocomplete\": props.autoComplete ?? restAttrs.autocomplete,\n // Expose the visual invalid state to assistive tech; an explicit aria-invalid wins\n \"aria-invalid\": restAttrs[\"aria-invalid\"] ?? (invalid || undefined),\n \"readonly\": readOnly,\n \"disabled\": disabled,\n \"rows\": rows,\n \"onFocus\": (evt: Event) => {\n focused.value = true\n invoke(onFocus as ListenerValue, evt)\n },\n \"onBlur\": (evt: Event) => {\n focused.value = false\n invoke(onBlur as ListenerValue, evt)\n },\n \"onAnimationstart\": (evt: AnimationEvent) => {\n invoke(onAnimationstart as ListenerValue, evt)\n if (evt.animationName === \"native-autofill-in\") {\n emit(\"autofill\")\n }\n },\n // Prevent LastPass and 1Password from appearing\n \"data-lpignore\": allowAutofillExtensions ? undefined : true,\n \"data-1p-ignore\": allowAutofillExtensions ? undefined : true,\n \"textContent\": textContent,\n }),\n [[vServerText, textContent]],\n ),\n ],\n )\n }\n },\n})\n\ntype TextareaOwnProps = InstanceType<typeof TextareaComponent>[\"$props\"]\n\n/** Textarea props plus the native <textarea> attributes that fall through to it, as in React. */\nexport type TextareaProps = TextareaOwnProps & Omit<TextareaHTMLAttributes, keyof TextareaOwnProps | \"readonly\">\n\nexport const Textarea = TextareaComponent as typeof TextareaComponent & { new (): { $props: TextareaProps } }\n"]}
|
|
@@ -11,6 +11,8 @@ declare const TextareaComponent: import("vue").DefineComponent<import("vue").Ext
|
|
|
11
11
|
type: PropType<ControlSize>;
|
|
12
12
|
default: string;
|
|
13
13
|
};
|
|
14
|
+
/** Applies a negative margin using the current gutter to optically align the text with surrounding content. */
|
|
15
|
+
opticallyAlign: PropType<"start" | "end">;
|
|
14
16
|
/** Controls gutter on the edges of the textarea, defaults to value from `size`. */
|
|
15
17
|
gutterSize: PropType<Sizes<"2xs" | "xs" | "sm" | "md" | "lg" | "xl">>;
|
|
16
18
|
/** Disables the textarea visually and from interactions. @default false */
|
|
@@ -86,6 +88,8 @@ declare const TextareaComponent: import("vue").DefineComponent<import("vue").Ext
|
|
|
86
88
|
type: PropType<ControlSize>;
|
|
87
89
|
default: string;
|
|
88
90
|
};
|
|
91
|
+
/** Applies a negative margin using the current gutter to optically align the text with surrounding content. */
|
|
92
|
+
opticallyAlign: PropType<"start" | "end">;
|
|
89
93
|
/** Controls gutter on the edges of the textarea, defaults to value from `size`. */
|
|
90
94
|
gutterSize: PropType<Sizes<"2xs" | "xs" | "sm" | "md" | "lg" | "xl">>;
|
|
91
95
|
/** Disables the textarea visually and from interactions. @default false */
|