@plexui/vue 0.0.0-stage → 0.1.0

package/dist/es/components/FileUpload/FileUpload.js

@@ -0,0 +1,266 @@
+import clsx from "clsx";
+import { defineComponent, h, ref, shallowRef, useId } from "vue";
+import { FileBlank, FileDocument, ImageSquare, UploadDocuments, X } from "../Icon/index.js";
+import { Button } from "../Button/index.js";
+import { FieldError } from "../FieldError/index.js";
+import s from "@plexui/styles/components/FileUpload/FileUpload.module.css";
+// Vue port of packages/ui/src/components/FileUpload/FileUpload.tsx. Like
+// React, the components spread no attributes: FileUpload reads `class`,
+// `aria-describedby` and `aria-invalid`, FileCard and FileCardGroup read
+// `class`; anything else is dropped.
+function getFileIcon(file) {
+    const type = file.type;
+    const name = file.name.toLowerCase();
+    if (type === "application/pdf" ||
+        name.endsWith(".pdf") ||
+        name.endsWith(".doc") ||
+        name.endsWith(".docx") ||
+        name.endsWith(".txt") ||
+        name.endsWith(".rtf")) {
+        return h(FileDocument);
+    }
+    if (type.startsWith("image/") || /\.(png|jpe?g|gif|svg|webp|bmp|ico)$/.test(name)) {
+        return h(ImageSquare);
+    }
+    return h(FileBlank);
+}
+function formatFileSize(bytes) {
+    if (bytes === 0)
+        return "0 B";
+    if (bytes < 1024)
+        return `${bytes} B`;
+    if (bytes < 1024 * 1024)
+        return `${(bytes / 1024).toFixed(0)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+function splitFileName(name) {
+    const lastDot = name.lastIndexOf(".");
+    if (lastDot <= 0)
+        return { stem: name, ext: "" };
+    return {
+        stem: name.slice(0, lastDot),
+        ext: name.slice(lastDot),
+    };
+}
+/** Bordered container for standalone `FileCard`s. */
+export const FileCardGroup = defineComponent({
+    name: "FileCardGroup",
+    inheritAttrs: false,
+    setup(_props, { attrs, slots }) {
+        return () => h("div", { class: clsx(s.FileCardGroup, attrs.class) }, slots.default?.());
+    },
+});
+/**
+ * One attached file: type icon, name, size and an optional remove button.
+ * `onRemove` (`@remove`) is a function prop because, as in React, the remove
+ * button renders only when it is set.
+ */
+export const FileCard = defineComponent({
+    name: "FileCard",
+    inheritAttrs: false,
+    props: {
+        /** The file to display */
+        file: { type: Object, required: true },
+        /** Remove callback. When omitted, the delete button is hidden. */
+        onRemove: Function,
+        /** Disable the remove button */
+        disabled: { type: Boolean, default: undefined },
+    },
+    setup(props, { attrs }) {
+        return () => {
+            const { file, onRemove } = props;
+            const { stem, ext } = splitFileName(file.name);
+            return h("div", { class: clsx(s.FileItem, attrs.class) }, [
+                h("div", { class: s.FileIcon }, [getFileIcon(file)]),
+                h("div", { class: s.FileInfo }, [
+                    h("div", { class: s.FileNameRow }, [
+                        h("span", { class: s.FileNameStem }, stem),
+                        ext ? h("span", { class: s.FileNameExt }, ext) : null,
+                    ]),
+                    h("span", { class: s.FileSize }, formatFileSize(file.size)),
+                ]),
+                onRemove
+                    ? h("button", {
+                        "type": "button",
+                        "class": s.FileRemove,
+                        // React passes the click event through (onClick={onRemove}) and
+                        // never runs a mouse handler of a disabled button
+                        "onClick": (event) => {
+                            if (props.disabled)
+                                return;
+                            onRemove(event);
+                        },
+                        "aria-label": `Remove ${file.name}`,
+                        "disabled": props.disabled,
+                    }, [h(X)])
+                    : null,
+            ]);
+        };
+    },
+});
+function matchesAccept(file, accept) {
+    const acceptTypes = accept.split(",").map((t) => t.trim().toLowerCase());
+    const fileName = file.name.toLowerCase();
+    const fileType = file.type.toLowerCase();
+    return acceptTypes.some((acceptType) => {
+        if (acceptType.startsWith(".")) {
+            return fileName.endsWith(acceptType);
+        }
+        if (acceptType.endsWith("/*")) {
+            const prefix = acceptType.slice(0, -1);
+            return fileType.startsWith(prefix);
+        }
+        return fileType === acceptType;
+    });
+}
+/**
+ * File picker with a file list. `value` + `update:value` (React's `value` +
+ * `onValueChange`) support `v-model:value`. Uncontrolled when `value` is not set.
+ */
+export const FileUpload = defineComponent({
+    name: "FileUpload",
+    inheritAttrs: false,
+    props: {
+        /** Visual variant: compact button or larger tappable area. @default "compact" */
+        variant: { type: String, default: "compact" },
+        /** Button label text */
+        label: String,
+        /** Helper text below the icon (area variant only) */
+        description: String,
+        /** Accepted file types (e.g. ".pdf,.png,image/*") */
+        accept: String,
+        /** Allow selecting multiple files. @default false */
+        multiple: { type: Boolean, default: false },
+        /** Maximum number of files. The button disables at the limit. */
+        maxFiles: Number,
+        /** Maximum file size in bytes */
+        maxSize: Number,
+        /** Controlled file list. Bind with `v-model:value`. */
+        value: { type: Array, default: undefined },
+        /** Error message; sets the invalid visual state */
+        errorMessage: String,
+        /** Invalid state. @default false (true when errorMessage is set) */
+        invalid: { type: Boolean, default: undefined },
+        /** Disable all interactions. @default false */
+        disabled: { type: Boolean, default: false },
+        /** Id of the hidden file input */
+        id: String,
+    },
+    emits: {
+        /** Files were added or removed (`v-model:value`) */
+        "update:value": (_files) => true,
+        /** A file was rejected (wrong type, too large, over the limit) */
+        "fileReject": (_file, _reason) => true,
+    },
+    setup(props, { attrs, emit }) {
+        const internalFiles = shallowRef([]);
+        const inputRef = ref(null);
+        const generatedId = useId();
+        const getFiles = () => props.value ?? internalFiles.value;
+        const updateFiles = (next) => {
+            emit("update:value", next);
+            if (props.value === undefined) {
+                internalFiles.value = next;
+            }
+        };
+        const handleFileSelect = (e) => {
+            const target = e.target;
+            const files = getFiles();
+            const { accept, maxSize, maxFiles } = props;
+            const selected = Array.from(target.files || []);
+            // Without `multiple`, a pick replaces the file instead of adding to it
+            const kept = props.multiple ? files : [];
+            const accepted = [];
+            for (const file of selected) {
+                if (accept && !matchesAccept(file, accept)) {
+                    emit("fileReject", file, `File type not accepted: ${file.name}`);
+                    continue;
+                }
+                if (maxSize && file.size > maxSize) {
+                    emit("fileReject", file, `File too large: ${file.name} (${formatFileSize(file.size)})`);
+                    continue;
+                }
+                if (maxFiles && kept.length + accepted.length >= maxFiles) {
+                    emit("fileReject", file, `Maximum ${maxFiles} files allowed`);
+                    continue;
+                }
+                accepted.push(file);
+            }
+            if (accepted.length > 0) {
+                updateFiles([...kept, ...accepted]);
+            }
+            target.value = "";
+        };
+        const removeFile = (index) => {
+            const next = getFiles().filter((_, i) => i !== index);
+            updateFiles(next);
+        };
+        const openPicker = () => {
+            inputRef.value?.click();
+        };
+        return () => {
+            const { variant, label, description, maxFiles, errorMessage, disabled } = props;
+            const files = getFiles();
+            const inputId = props.id || `file-upload-${generatedId}`;
+            const errorId = `${inputId}-error`;
+            const invalid = props.invalid ?? !!errorMessage;
+            const ariaInvalid = attrs["aria-invalid"] ?? (invalid || undefined);
+            const ariaDescribedBy = [attrs["aria-describedby"], errorMessage ? errorId : undefined]
+                .filter(Boolean)
+                .join(" ") || undefined;
+            const atLimit = !!maxFiles && files.length >= maxFiles;
+            return h("div", { class: clsx(s.Root, attrs.class) }, [
+                variant === "area"
+                    ? h("button", {
+                        "type": "button",
+                        "class": s.AreaTrigger,
+                        "data-invalid": invalid ? "" : undefined,
+                        // Like React, no click handling while the button is disabled
+                        "onClick": () => {
+                            if (!(disabled || atLimit))
+                                openPicker();
+                        },
+                        "disabled": disabled || atLimit,
+                        // The visible trigger is what keyboard and screen-reader users reach
+                        "aria-describedby": ariaDescribedBy,
+                        "aria-invalid": ariaInvalid,
+                    }, [
+                        h(UploadDocuments, { class: s.AreaIcon }),
+                        h("span", { class: s.AreaLabel }, label || "Tap to upload files"),
+                        description ? h("span", { class: s.AreaDescription }, description) : null,
+                    ])
+                    : h(Button, {
+                        "color": "secondary",
+                        "variant": "soft",
+                        "size": "3xl",
+                        "pill": true,
+                        "block": true,
+                        "disabled": disabled || atLimit,
+                        "onClick": openPicker,
+                        "class": "h-[3.25rem]",
+                        "aria-describedby": ariaDescribedBy,
+                        "aria-invalid": ariaInvalid,
+                    }, { default: () => [label || "Upload file"] }),
+                files.length > 0
+                    ? h("ul", { "class": s.FileList, "data-variant": variant, "aria-label": "Attached files" }, files.map((file, index) => h("li", { key: `${file.name}-${file.size}-${file.lastModified}` }, [
+                        h(FileCard, { file, onRemove: () => removeFile(index), disabled }),
+                    ])))
+                    : null,
+                h("input", {
+                    "ref": inputRef,
+                    "type": "file",
+                    "class": s.HiddenInput,
+                    "accept": props.accept,
+                    "multiple": props.multiple,
+                    "onChange": handleFileSelect,
+                    "disabled": disabled,
+                    "id": inputId,
+                    "aria-describedby": ariaDescribedBy,
+                    "tabindex": -1,
+                }),
+                errorMessage ? h(FieldError, { id: errorId, class: s.ErrorMessage }, { default: () => [errorMessage] }) : null,
+            ]);
+        };
+    },
+});
+//# sourceMappingURL=FileUpload.js.map

package/dist/es/components/FileUpload/FileUpload.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileUpload.js","sourceRoot":"","sources":["../../../../src/components/FileUpload/FileUpload.ts"],"names":[],"mappings":"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","sourcesContent":["import clsx from \"clsx\"\nimport { defineComponent, h, ref, shallowRef, useId, type PropType } from \"vue\"\nimport { FileBlank, FileDocument, ImageSquare, UploadDocuments, X } from \"../Icon/index.js\"\nimport { Button } from \"../Button/index.js\"\nimport { FieldError } from \"../FieldError/index.js\"\nimport s from \"@plexui/styles/components/FileUpload/FileUpload.module.css\"\n\n// Vue port of packages/ui/src/components/FileUpload/FileUpload.tsx. Like\n// React, the components spread no attributes: FileUpload reads `class`,\n// `aria-describedby` and `aria-invalid`, FileCard and FileCardGroup read\n// `class`; anything else is dropped.\n\nfunction getFileIcon(file: File) {\n  const type = file.type\n  const name = file.name.toLowerCase()\n\n  if (\n    type === \"application/pdf\" ||\n    name.endsWith(\".pdf\") ||\n    name.endsWith(\".doc\") ||\n    name.endsWith(\".docx\") ||\n    name.endsWith(\".txt\") ||\n    name.endsWith(\".rtf\")\n  ) {\n    return h(FileDocument)\n  }\n\n  if (type.startsWith(\"image/\") || /\\.(png|jpe?g|gif|svg|webp|bmp|ico)$/.test(name)) {\n    return h(ImageSquare)\n  }\n\n  return h(FileBlank)\n}\n\nfunction formatFileSize(bytes: number): string {\n  if (bytes === 0) return \"0 B\"\n  if (bytes < 1024) return `${bytes} B`\n  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} KB`\n  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`\n}\n\nfunction splitFileName(name: string): { stem: string; ext: string } {\n  const lastDot = name.lastIndexOf(\".\")\n  if (lastDot <= 0) return { stem: name, ext: \"\" }\n  return {\n    stem: name.slice(0, lastDot),\n    ext: name.slice(lastDot),\n  }\n}\n\n/** Bordered container for standalone `FileCard`s. */\nexport const FileCardGroup = defineComponent({\n  name: \"FileCardGroup\",\n  inheritAttrs: false,\n  setup(_props, { attrs, slots }) {\n    return () => h(\"div\", { class: clsx(s.FileCardGroup, attrs.class as string | undefined) }, slots.default?.())\n  },\n})\n\nexport type FileCardGroupProps = InstanceType<typeof FileCardGroup>[\"$props\"]\n\n/**\n * One attached file: type icon, name, size and an optional remove button.\n * `onRemove` (`@remove`) is a function prop because, as in React, the remove\n * button renders only when it is set.\n */\nexport const FileCard = defineComponent({\n  name: \"FileCard\",\n  inheritAttrs: false,\n  props: {\n    /** The file to display */\n    file: { type: Object as PropType<File>, required: true },\n    /** Remove callback. When omitted, the delete button is hidden. */\n    onRemove: Function as PropType<() => void>,\n    /** Disable the remove button */\n    disabled: { type: Boolean, default: undefined },\n  },\n  setup(props, { attrs }) {\n    return () => {\n      const { file, onRemove } = props\n      const { stem, ext } = splitFileName(file.name)\n\n      return h(\"div\", { class: clsx(s.FileItem, attrs.class as string | undefined) }, [\n        h(\"div\", { class: s.FileIcon }, [getFileIcon(file)]),\n        h(\"div\", { class: s.FileInfo }, [\n          h(\"div\", { class: s.FileNameRow }, [\n            h(\"span\", { class: s.FileNameStem }, stem),\n            ext ? h(\"span\", { class: s.FileNameExt }, ext) : null,\n          ]),\n          h(\"span\", { class: s.FileSize }, formatFileSize(file.size)),\n        ]),\n        onRemove\n          ? h(\n              \"button\",\n              {\n                \"type\": \"button\",\n                \"class\": s.FileRemove,\n                // React passes the click event through (onClick={onRemove}) and\n                // never runs a mouse handler of a disabled button\n                \"onClick\": (event: MouseEvent) => {\n                  if (props.disabled) return\n                  ;(onRemove as (event: MouseEvent) => void)(event)\n                },\n                \"aria-label\": `Remove ${file.name}`,\n                \"disabled\": props.disabled,\n              },\n              [h(X)],\n            )\n          : null,\n      ])\n    }\n  },\n})\n\nexport type FileCardProps = InstanceType<typeof FileCard>[\"$props\"]\n\nfunction matchesAccept(file: File, accept: string): boolean {\n  const acceptTypes = accept.split(\",\").map((t) => t.trim().toLowerCase())\n  const fileName = file.name.toLowerCase()\n  const fileType = file.type.toLowerCase()\n\n  return acceptTypes.some((acceptType) => {\n    if (acceptType.startsWith(\".\")) {\n      return fileName.endsWith(acceptType)\n    }\n    if (acceptType.endsWith(\"/*\")) {\n      const prefix = acceptType.slice(0, -1)\n      return fileType.startsWith(prefix)\n    }\n    return fileType === acceptType\n  })\n}\n\n/**\n * File picker with a file list. `value` + `update:value` (React's `value` +\n * `onValueChange`) support `v-model:value`. Uncontrolled when `value` is not set.\n */\nexport const FileUpload = defineComponent({\n  name: \"FileUpload\",\n  inheritAttrs: false,\n  props: {\n    /** Visual variant: compact button or larger tappable area. @default \"compact\" */\n    variant: { type: String as PropType<\"compact\" | \"area\">, default: \"compact\" },\n    /** Button label text */\n    label: String,\n    /** Helper text below the icon (area variant only) */\n    description: String,\n    /** Accepted file types (e.g. \".pdf,.png,image/*\") */\n    accept: String,\n    /** Allow selecting multiple files. @default false */\n    multiple: { type: Boolean, default: false },\n    /** Maximum number of files. The button disables at the limit. */\n    maxFiles: Number,\n    /** Maximum file size in bytes */\n    maxSize: Number,\n    /** Controlled file list. Bind with `v-model:value`. */\n    value: { type: Array as PropType<File[]>, default: undefined },\n    /** Error message; sets the invalid visual state */\n    errorMessage: String,\n    /** Invalid state. @default false (true when errorMessage is set) */\n    invalid: { type: Boolean, default: undefined },\n    /** Disable all interactions. @default false */\n    disabled: { type: Boolean, default: false },\n    /** Id of the hidden file input */\n    id: String,\n  },\n  emits: {\n    /** Files were added or removed (`v-model:value`) */\n    \"update:value\": (_files: File[]) => true,\n    /** A file was rejected (wrong type, too large, over the limit) */\n    \"fileReject\": (_file: File, _reason: string) => true,\n  },\n  setup(props, { attrs, emit }) {\n    const internalFiles = shallowRef<File[]>([])\n    const inputRef = ref<HTMLInputElement | null>(null)\n    const generatedId = useId()\n\n    const getFiles = () => props.value ?? internalFiles.value\n\n    const updateFiles = (next: File[]) => {\n      emit(\"update:value\", next)\n      if (props.value === undefined) {\n        internalFiles.value = next\n      }\n    }\n\n    const handleFileSelect = (e: Event) => {\n      const target = e.target as HTMLInputElement\n      const files = getFiles()\n      const { accept, maxSize, maxFiles } = props\n      const selected = Array.from(target.files || [])\n      // Without `multiple`, a pick replaces the file instead of adding to it\n      const kept = props.multiple ? files : []\n      const accepted: File[] = []\n\n      for (const file of selected) {\n        if (accept && !matchesAccept(file, accept)) {\n          emit(\"fileReject\", file, `File type not accepted: ${file.name}`)\n          continue\n        }\n        if (maxSize && file.size > maxSize) {\n          emit(\"fileReject\", file, `File too large: ${file.name} (${formatFileSize(file.size)})`)\n          continue\n        }\n        if (maxFiles && kept.length + accepted.length >= maxFiles) {\n          emit(\"fileReject\", file, `Maximum ${maxFiles} files allowed`)\n          continue\n        }\n        accepted.push(file)\n      }\n\n      if (accepted.length > 0) {\n        updateFiles([...kept, ...accepted])\n      }\n\n      target.value = \"\"\n    }\n\n    const removeFile = (index: number) => {\n      const next = getFiles().filter((_, i) => i !== index)\n      updateFiles(next)\n    }\n\n    const openPicker = () => {\n      inputRef.value?.click()\n    }\n\n\n    return () => {\n      const { variant, label, description, maxFiles, errorMessage, disabled } = props\n      const files = getFiles()\n      const inputId = props.id || `file-upload-${generatedId}`\n      const errorId = `${inputId}-error`\n      const invalid = props.invalid ?? !!errorMessage\n      const ariaInvalid = (attrs[\"aria-invalid\"] as boolean | \"true\" | \"false\" | undefined) ?? (invalid || undefined)\n      const ariaDescribedBy =\n        [attrs[\"aria-describedby\"] as string | undefined, errorMessage ? errorId : undefined]\n          .filter(Boolean)\n          .join(\" \") || undefined\n      const atLimit = !!maxFiles && files.length >= maxFiles\n\n      return h(\"div\", { class: clsx(s.Root, attrs.class as string | undefined) }, [\n        variant === \"area\"\n          ? h(\n              \"button\",\n              {\n                \"type\": \"button\",\n                \"class\": s.AreaTrigger,\n                \"data-invalid\": invalid ? \"\" : undefined,\n                // Like React, no click handling while the button is disabled\n                \"onClick\": () => {\n                  if (!(disabled || atLimit)) openPicker()\n                },\n                \"disabled\": disabled || atLimit,\n                // The visible trigger is what keyboard and screen-reader users reach\n                \"aria-describedby\": ariaDescribedBy,\n                \"aria-invalid\": ariaInvalid,\n              },\n              [\n                h(UploadDocuments, { class: s.AreaIcon }),\n                h(\"span\", { class: s.AreaLabel }, label || \"Tap to upload files\"),\n                description ? h(\"span\", { class: s.AreaDescription }, description) : null,\n              ],\n            )\n          : h(\n              Button,\n              {\n                \"color\": \"secondary\",\n                \"variant\": \"soft\",\n                \"size\": \"3xl\",\n                \"pill\": true,\n                \"block\": true,\n                \"disabled\": disabled || atLimit,\n                \"onClick\": openPicker,\n                \"class\": \"h-[3.25rem]\",\n                \"aria-describedby\": ariaDescribedBy,\n                \"aria-invalid\": ariaInvalid,\n              },\n              { default: () => [label || \"Upload file\"] },\n            ),\n\n        files.length > 0\n          ? h(\n              \"ul\",\n              { \"class\": s.FileList, \"data-variant\": variant, \"aria-label\": \"Attached files\" },\n              files.map((file, index) =>\n                h(\"li\", { key: `${file.name}-${file.size}-${file.lastModified}` }, [\n                  h(FileCard, { file, onRemove: () => removeFile(index), disabled }),\n                ]),\n              ),\n            )\n          : null,\n\n        h(\"input\", {\n          \"ref\": inputRef,\n          \"type\": \"file\",\n          \"class\": s.HiddenInput,\n          \"accept\": props.accept,\n          \"multiple\": props.multiple,\n          \"onChange\": handleFileSelect,\n          \"disabled\": disabled,\n          \"id\": inputId,\n          \"aria-describedby\": ariaDescribedBy,\n          \"tabindex\": -1,\n        }),\n\n        errorMessage ? h(FieldError, { id: errorId, class: s.ErrorMessage }, { default: () => [errorMessage] }) : null,\n      ])\n    }\n  },\n})\n\nexport type FileUploadProps = InstanceType<typeof FileUpload>[\"$props\"]\n"]}

package/dist/es/components/FileUpload/index.js

@@ -0,0 +1,2 @@
+export { FileUpload, FileCard, FileCardGroup, } from "./FileUpload.js";
+//# sourceMappingURL=index.js.map

package/dist/es/components/FileUpload/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/FileUpload/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EAEV,QAAQ,EAER,aAAa,GAEd,MAAM,iBAAiB,CAAA","sourcesContent":["export {\n  FileUpload,\n  type FileUploadProps,\n  FileCard,\n  type FileCardProps,\n  FileCardGroup,\n  type FileCardGroupProps,\n} from \"./FileUpload.js\"\n"]}

package/dist/es/components/FloatingLabelInput/FloatingLabelInput.js

@@ -0,0 +1,262 @@
+import clsx from "clsx";
+import { defineComponent, h, mergeProps, nextTick, onMounted, ref, useId, watch, withDirectives } from "vue";
+import { Eye, EyeOff, X } from "../Icon/index.js";
+import { vDefaultValue, vServerText } from "../../lib/defaultValue.js";
+import { hasContent } from "../../lib/slotContent.js";
+import s from "@plexui/styles/components/FloatingLabelInput/FloatingLabelInput.module.css";
+// A fallthrough listener is a function or, when merged, an array of them
+const callListeners = (listener, evt) => {
+    for (const fn of Array.isArray(listener) ? listener : [listener]) {
+        if (typeof fn === "function")
+            fn(evt);
+    }
+};
+// Attributes that only mean something on <input>; everything else (required,
+// maxlength, placeholder, key and clipboard listeners, aria-*, data-*) also
+// applies to the multiline <textarea>, as in React
+const INPUT_ONLY_ATTRS = new Set([
+    "accept", "alt", "capture", "checked", "height", "list", "max", "min", "multiple",
+    "pattern", "size", "src", "step", "width", "formaction", "formenctype",
+    "formmethod", "formnovalidate", "formtarget",
+]);
+const textareaAttrs = (attrs) => Object.fromEntries(Object.entries(attrs).filter(([key]) => !INPUT_ONLY_ATTRS.has(key.toLowerCase())));
+/**
+ * Port of packages/ui/src/components/FloatingLabelInput/FloatingLabelInput.tsx.
+ * Attributes other than `class` go to the <input>, or to the `multiline`
+ * <textarea> except the input-only ones, as in React. `value` +
+ * `update:value` support `v-model:value`.
+ */
+const FloatingLabelInputComponent = defineComponent({
+    name: "FloatingLabelInput",
+    inheritAttrs: false,
+    props: {
+        /** Label text for the floating label */
+        label: { type: String, required: true },
+        /** Error message to display below the input */
+        errorMessage: String,
+        /** Mark the input as invalid. @default false (or true if errorMessage is provided) */
+        invalid: { type: Boolean, default: undefined },
+        /** Disables the input visually and from interactions */
+        disabled: { type: Boolean, default: false },
+        /** Makes the input read-only */
+        readOnly: { type: Boolean, default: false },
+        /** Native spelling of `readOnly` (`<FloatingLabelInput readonly />`) */
+        readonly: { type: Boolean, default: false },
+        /** Shows the clear button; called when it is clicked */
+        onClear: Function,
+        /** Allow autofill extensions to appear in the input */
+        allowAutofillExtensions: { type: Boolean, default: false },
+        /** Helper text below the input (or the `description` slot) */
+        description: String,
+        /** Built-in reveal toggle. @default true when type="password" and no end adornment */
+        revealable: { type: Boolean, default: undefined },
+        /** Render as a multi-line textarea instead of a single-line input */
+        multiline: { type: Boolean, default: false },
+        /** Number of visible text lines when `multiline` is true */
+        rows: { type: Number, default: 2 },
+        id: String,
+        name: String,
+        type: { type: String, default: "text" },
+        value: { type: [String, Number], default: undefined },
+        defaultValue: { type: [String, Number], default: undefined },
+    },
+    emits: {
+        "update:value": (_value) => true,
+        "autofill": () => true,
+        "revealedChange": (_revealed) => true,
+    },
+    setup(props, { attrs, slots, emit, expose }) {
+        const inputRef = ref(null);
+        const generatedId = useId();
+        const focused = ref(false);
+        const hasValue = ref(!!(props.value !== undefined ? props.value : props.defaultValue));
+        const revealed = ref(false);
+        // Sync hasValue with controlled value prop
+        watch(() => props.value, (value) => {
+            if (value !== undefined)
+                hasValue.value = !!value;
+        });
+        const autoResize = () => {
+            const el = inputRef.value;
+            if (!props.multiline || !el)
+                return;
+            el.style.height = "auto";
+            el.style.height = `${el.scrollHeight}px`;
+        };
+        // The multiline <textarea> gets its value imperatively, like React DOM: a
+        // `value` prop would make Vue mirror it into a `value` attribute, which
+        // React never renders (its text content carries the value instead)
+        const syncTextareaValue = () => {
+            const el = inputRef.value;
+            if (!props.multiline || !el || props.value === undefined)
+                return;
+            const value = String(props.value);
+            if (el.value !== value)
+                el.value = value;
+        };
+        onMounted(() => {
+            // React's initTextarea: the initial text becomes the (dirty) value
+            const el = inputRef.value;
+            if (props.multiline && el && el.textContent)
+                el.value = el.textContent;
+            autoResize();
+        });
+        // Also resize when a controlled value or rows changes without a keystroke
+        watch([() => props.multiline, () => props.value, () => props.rows], () => {
+            syncTextareaValue();
+            autoResize();
+        }, { flush: "post" });
+        // Handle clicks on the container to focus the input
+        const handleContainerMouseDown = (evt) => {
+            const input = inputRef.value;
+            if (!evt.target || !(evt.target instanceof Element) || !input) {
+                return;
+            }
+            if (input.contains(evt.target)) {
+                return;
+            }
+            if (evt.target.closest("button, [type='button'], [role='button']")) {
+                return;
+            }
+            evt.preventDefault();
+            if (document.activeElement !== input) {
+                input.focus();
+            }
+            // email, number and other types without the selection API throw on setSelectionRange
+            if (input.selectionStart === null)
+                return;
+            const length = input.value.length;
+            input.setSelectionRange(length, length);
+        };
+        // The clear button unmounts once the value is gone, so keep focus in the field
+        const handleClear = (evt) => {
+            inputRef.value?.focus();
+            props.onClear?.(evt);
+        };
+        const handleInput = (evt) => {
+            const target = evt.currentTarget;
+            hasValue.value = !!target.value;
+            emit("update:value", target.value);
+            autoResize();
+            // Like a React controlled input, a `value` the parent does not update
+            // is put back (Vue only re-applies `value` when this component renders)
+            void nextTick(() => {
+                if (props.value === undefined)
+                    return;
+                const value = String(props.value);
+                if (target.value !== value)
+                    target.value = value;
+            });
+        };
+        const handleAnimationStart = (evt) => {
+            // Detect browser autofill
+            if (evt.animationName === "native-autofill-in") {
+                hasValue.value = true;
+                emit("autofill");
+            }
+        };
+        const handleRevealToggle = () => {
+            revealed.value = !revealed.value;
+            emit("revealedChange", revealed.value);
+        };
+        expose({ focus: () => inputRef.value?.focus(), input: inputRef });
+        return () => {
+            const inputId = props.id || `floating-label-input-${generatedId}`;
+            // Slots that render nothing (a false v-if) count as absent, like a falsy ReactNode
+            const descriptionSlot = slots.description?.();
+            const description = hasContent(descriptionSlot) ? descriptionSlot : props.description;
+            const descriptionId = description ? `${inputId}-description` : undefined;
+            const errorId = props.errorMessage ? `${inputId}-error` : undefined;
+            const startAdornmentSlot = slots.startAdornment?.();
+            const startAdornment = hasContent(startAdornmentSlot) ? startAdornmentSlot : undefined;
+            const endAdornmentSlot = slots.endAdornment?.();
+            const endAdornment = hasContent(endAdornmentSlot) ? endAdornmentSlot : undefined;
+            const readOnly = props.readOnly || props.readonly;
+            // Caller focus/blur listeners run from the shared handlers
+            const { "class": className, "aria-describedby": ariaDescribedByAttr, "onFocus": onFocusAttr, "onBlur": onBlurAttr, ...restAttrs } = attrs;
+            const invalid = props.invalid ?? !!props.errorMessage;
+            // Determine if clear button should be shown
+            const showClearButton = !!props.onClear && hasValue.value && !props.disabled && !readOnly;
+            // Built-in password reveal toggle
+            const isPassword = props.type === "password";
+            const revealable = props.revealable ?? (isPassword && !endAdornment);
+            const showRevealButton = revealable && !props.disabled;
+            const effectiveType = isPassword && revealed.value ? "text" : props.type;
+            // Merge aria-describedby with error id
+            const ariaDescribedBy = [ariaDescribedByAttr, errorId, descriptionId].filter(Boolean).join(" ") || undefined;
+            const controlProps = {
+                "ref": inputRef,
+                "id": inputId,
+                "name": props.name,
+                // Vue re-applies a present `value` key on every render, so an
+                // uncontrolled field must not carry one (it would reset typed text)
+                ...(props.value !== undefined ? { value: props.value } : {}),
+                "disabled": props.disabled,
+                "readonly": readOnly,
+                // An explicit aria-invalid (e.g. from Field) wins over the computed state
+                "aria-invalid": restAttrs["aria-invalid"] ?? (invalid ? true : undefined),
+                "aria-describedby": ariaDescribedBy,
+                "onInput": handleInput,
+                "onFocus": (evt) => {
+                    focused.value = true;
+                    callListeners(onFocusAttr, evt);
+                },
+                "onBlur": (evt) => {
+                    focused.value = false;
+                    callListeners(onBlurAttr, evt);
+                },
+            };
+            // Uncontrolled: `vDefaultValue` sets the initial value (server markup,
+            // hydration and later changes as in React)
+            const initialValue = props.value === undefined ? props.defaultValue : undefined;
+            // The textarea's text content follows the controlled value, else
+            // `default-value`, as React keeps a textarea's defaultValue
+            const { value: _value, ...textareaControlProps } = controlProps;
+            const textContent = String(props.value ?? props.defaultValue ?? "");
+            return h("div", { class: clsx(s.Root, className) }, [
+                h("div", {
+                    "class": clsx(s.FieldFootprint, { [s.HasValue]: hasValue.value || !!startAdornment }),
+                    "data-focused": focused.value ? "" : undefined,
+                    "data-has-value": hasValue.value ? "" : undefined,
+                    "data-invalid": invalid ? "" : undefined,
+                    "data-disabled": props.disabled ? "" : undefined,
+                    "data-readonly": readOnly ? "" : undefined,
+                    "data-multiline": props.multiline ? "" : undefined,
+                    "onMousedown": handleContainerMouseDown,
+                }, [
+                    h("label", { class: s.TypeableLabel, for: inputId }, [
+                        h("div", { class: s.LabelPositioner }, [h("div", { class: s.LabelText }, props.label)]),
+                    ]),
+                    startAdornment ? h("div", { class: s.StartAdornment }, startAdornment) : null,
+                    props.multiline
+                        ? withDirectives(h("textarea", mergeProps(textareaAttrs(restAttrs), {
+                            ...textareaControlProps,
+                            rows: props.rows,
+                            class: s.Textarea,
+                            textContent,
+                        })), [[vServerText, textContent]])
+                        : withDirectives(h("input", mergeProps(restAttrs, {
+                            ...controlProps,
+                            "type": effectiveType,
+                            "class": s.Input,
+                            "onAnimationstart": handleAnimationStart,
+                            "data-lpignore": props.allowAutofillExtensions ? undefined : true,
+                            "data-1p-ignore": props.allowAutofillExtensions ? undefined : true,
+                        })), [[vDefaultValue, initialValue]]),
+                    endAdornment ? h("div", { class: s.EndAdornment }, endAdornment) : null,
+                    showClearButton
+                        ? h("button", { "type": "button", "aria-label": "Clear input", "class": s.ClearButton, "onClick": handleClear }, [h(X)])
+                        : null,
+                    showRevealButton
+                        ? h("button", { "type": "button", "aria-label": revealed.value ? "Hide" : "Show", "class": s.RevealButton, "onClick": handleRevealToggle }, [revealed.value ? h(EyeOff) : h(Eye)])
+                        : null,
+                ]),
+                props.errorMessage ? h("div", { id: errorId, class: s.ErrorMessage, role: "alert" }, props.errorMessage) : null,
+                description ? h("div", { id: descriptionId, class: s.Description }, description) : null,
+            ]);
+        };
+    },
+});
+/** Text input whose label floats above the value, with optional reveal toggle and multiline mode. */
+export const FloatingLabelInput = FloatingLabelInputComponent;
+//# sourceMappingURL=FloatingLabelInput.js.map

package/dist/es/components/FloatingLabelInput/FloatingLabelInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingLabelInput.js","sourceRoot":"","sources":["../../../../src/components/FloatingLabelInput/FloatingLabelInput.ts"],"names":[],"mappings":"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","sourcesContent":["import clsx from \"clsx\"\nimport { defineComponent, h, mergeProps, nextTick, onMounted, ref, useId, watch, withDirectives, type InputHTMLAttributes, type PropType, type VNodeChild } from \"vue\"\nimport { Eye, EyeOff, X } from \"../Icon/index.js\"\nimport { vDefaultValue, vServerText } from \"../../lib/defaultValue.js\"\nimport { hasContent } from \"../../lib/slotContent.js\"\nimport s from \"@plexui/styles/components/FloatingLabelInput/FloatingLabelInput.module.css\"\n\n// A fallthrough listener is a function or, when merged, an array of them\nconst callListeners = (listener: unknown, evt: Event) => {\n  for (const fn of Array.isArray(listener) ? listener : [listener]) {\n    if (typeof fn === \"function\") fn(evt)\n  }\n}\n\n// Attributes that only mean something on <input>; everything else (required,\n// maxlength, placeholder, key and clipboard listeners, aria-*, data-*) also\n// applies to the multiline <textarea>, as in React\nconst INPUT_ONLY_ATTRS = new Set([\n  \"accept\", \"alt\", \"capture\", \"checked\", \"height\", \"list\", \"max\", \"min\", \"multiple\",\n  \"pattern\", \"size\", \"src\", \"step\", \"width\", \"formaction\", \"formenctype\",\n  \"formmethod\", \"formnovalidate\", \"formtarget\",\n])\n\nconst textareaAttrs = (attrs: Record<string, unknown>) =>\n  Object.fromEntries(Object.entries(attrs).filter(([key]) => !INPUT_ONLY_ATTRS.has(key.toLowerCase())))\n\n/**\n * Port of packages/ui/src/components/FloatingLabelInput/FloatingLabelInput.tsx.\n * Attributes other than `class` go to the <input>, or to the `multiline`\n * <textarea> except the input-only ones, as in React. `value` +\n * `update:value` support `v-model:value`.\n */\nconst FloatingLabelInputComponent = defineComponent({\n  name: \"FloatingLabelInput\",\n  inheritAttrs: false,\n  props: {\n    /** Label text for the floating label */\n    label: { type: String, required: true },\n    /** Error message to display below the input */\n    errorMessage: String,\n    /** Mark the input as invalid. @default false (or true if errorMessage is provided) */\n    invalid: { type: Boolean, default: undefined },\n    /** Disables the input visually and from interactions */\n    disabled: { type: Boolean, default: false },\n    /** Makes the input read-only */\n    readOnly: { type: Boolean, default: false },\n    /** Native spelling of `readOnly` (`<FloatingLabelInput readonly />`) */\n    readonly: { type: Boolean, default: false },\n    /** Shows the clear button; called when it is clicked */\n    onClear: Function as PropType<() => void>,\n    /** Allow autofill extensions to appear in the input */\n    allowAutofillExtensions: { type: Boolean, default: false },\n    /** Helper text below the input (or the `description` slot) */\n    description: String,\n    /** Built-in reveal toggle. @default true when type=\"password\" and no end adornment */\n    revealable: { type: Boolean, default: undefined },\n    /** Render as a multi-line textarea instead of a single-line input */\n    multiline: { type: Boolean, default: false },\n    /** Number of visible text lines when `multiline` is true */\n    rows: { type: Number, default: 2 },\n    id: String,\n    name: String,\n    type: { type: String, default: \"text\" },\n    value: { type: [String, Number] as PropType<string | number>, default: undefined },\n    defaultValue: { type: [String, Number] as PropType<string | number>, default: undefined },\n  },\n  emits: {\n    \"update:value\": (_value: string) => true,\n    \"autofill\": () => true,\n    \"revealedChange\": (_revealed: boolean) => true,\n  },\n  setup(props, { attrs, slots, emit, expose }) {\n    const inputRef = ref<HTMLInputElement | HTMLTextAreaElement | null>(null)\n    const generatedId = useId()\n    const focused = ref(false)\n    const hasValue = ref(!!(props.value !== undefined ? props.value : props.defaultValue))\n    const revealed = ref(false)\n\n    // Sync hasValue with controlled value prop\n    watch(\n      () => props.value,\n      (value) => {\n        if (value !== undefined) hasValue.value = !!value\n      },\n    )\n\n    const autoResize = () => {\n      const el = inputRef.value\n      if (!props.multiline || !el) return\n      el.style.height = \"auto\"\n      el.style.height = `${el.scrollHeight}px`\n    }\n    // The multiline <textarea> gets its value imperatively, like React DOM: a\n    // `value` prop would make Vue mirror it into a `value` attribute, which\n    // React never renders (its text content carries the value instead)\n    const syncTextareaValue = () => {\n      const el = inputRef.value\n      if (!props.multiline || !el || props.value === undefined) return\n      const value = String(props.value)\n      if (el.value !== value) el.value = value\n    }\n    onMounted(() => {\n      // React's initTextarea: the initial text becomes the (dirty) value\n      const el = inputRef.value\n      if (props.multiline && el && el.textContent) el.value = el.textContent\n      autoResize()\n    })\n    // Also resize when a controlled value or rows changes without a keystroke\n    watch(\n      [() => props.multiline, () => props.value, () => props.rows],\n      () => {\n        syncTextareaValue()\n        autoResize()\n      },\n      { flush: \"post\" },\n    )\n\n    // Handle clicks on the container to focus the input\n    const handleContainerMouseDown = (evt: MouseEvent) => {\n      const input = inputRef.value\n      if (!evt.target || !(evt.target instanceof Element) || !input) {\n        return\n      }\n      if (input.contains(evt.target)) {\n        return\n      }\n      if (evt.target.closest(\"button, [type='button'], [role='button']\")) {\n        return\n      }\n      evt.preventDefault()\n      if (document.activeElement !== input) {\n        input.focus()\n      }\n      // email, number and other types without the selection API throw on setSelectionRange\n      if (input.selectionStart === null) return\n      const length = input.value.length\n      input.setSelectionRange(length, length)\n    }\n\n    // The clear button unmounts once the value is gone, so keep focus in the field\n    const handleClear = (evt: MouseEvent) => {\n      inputRef.value?.focus()\n      ;(props.onClear as ((evt: MouseEvent) => void) | undefined)?.(evt)\n    }\n\n    const handleInput = (evt: Event) => {\n      const target = evt.currentTarget as HTMLInputElement\n      hasValue.value = !!target.value\n      emit(\"update:value\", target.value)\n      autoResize()\n      // Like a React controlled input, a `value` the parent does not update\n      // is put back (Vue only re-applies `value` when this component renders)\n      void nextTick(() => {\n        if (props.value === undefined) return\n        const value = String(props.value)\n        if (target.value !== value) target.value = value\n      })\n    }\n\n    const handleAnimationStart = (evt: AnimationEvent) => {\n      // Detect browser autofill\n      if (evt.animationName === \"native-autofill-in\") {\n        hasValue.value = true\n        emit(\"autofill\")\n      }\n    }\n\n    const handleRevealToggle = () => {\n      revealed.value = !revealed.value\n      emit(\"revealedChange\", revealed.value)\n    }\n\n    expose({ focus: () => inputRef.value?.focus(), input: inputRef })\n\n    return () => {\n      const inputId = props.id || `floating-label-input-${generatedId}`\n      // Slots that render nothing (a false v-if) count as absent, like a falsy ReactNode\n      const descriptionSlot = slots.description?.()\n      const description: VNodeChild = hasContent(descriptionSlot) ? descriptionSlot : props.description\n      const descriptionId = description ? `${inputId}-description` : undefined\n      const errorId = props.errorMessage ? `${inputId}-error` : undefined\n      const startAdornmentSlot = slots.startAdornment?.()\n      const startAdornment = hasContent(startAdornmentSlot) ? startAdornmentSlot : undefined\n      const endAdornmentSlot = slots.endAdornment?.()\n      const endAdornment = hasContent(endAdornmentSlot) ? endAdornmentSlot : undefined\n      const readOnly = props.readOnly || props.readonly\n      // Caller focus/blur listeners run from the shared handlers\n      const {\n        \"class\": className,\n        \"aria-describedby\": ariaDescribedByAttr,\n        \"onFocus\": onFocusAttr,\n        \"onBlur\": onBlurAttr,\n        ...restAttrs\n      } = attrs\n\n      const invalid = props.invalid ?? !!props.errorMessage\n      // Determine if clear button should be shown\n      const showClearButton = !!props.onClear && hasValue.value && !props.disabled && !readOnly\n      // Built-in password reveal toggle\n      const isPassword = props.type === \"password\"\n      const revealable = props.revealable ?? (isPassword && !endAdornment)\n      const showRevealButton = revealable && !props.disabled\n      const effectiveType = isPassword && revealed.value ? \"text\" : props.type\n      // Merge aria-describedby with error id\n      const ariaDescribedBy = [ariaDescribedByAttr, errorId, descriptionId].filter(Boolean).join(\" \") || undefined\n\n      const controlProps = {\n        \"ref\": inputRef,\n        \"id\": inputId,\n        \"name\": props.name,\n        // Vue re-applies a present `value` key on every render, so an\n        // uncontrolled field must not carry one (it would reset typed text)\n        ...(props.value !== undefined ? { value: props.value } : {}),\n        \"disabled\": props.disabled,\n        \"readonly\": readOnly,\n        // An explicit aria-invalid (e.g. from Field) wins over the computed state\n        \"aria-invalid\": restAttrs[\"aria-invalid\"] ?? (invalid ? true : undefined),\n        \"aria-describedby\": ariaDescribedBy,\n        \"onInput\": handleInput,\n        \"onFocus\": (evt: FocusEvent) => {\n          focused.value = true\n          callListeners(onFocusAttr, evt)\n        },\n        \"onBlur\": (evt: FocusEvent) => {\n          focused.value = false\n          callListeners(onBlurAttr, evt)\n        },\n      }\n      // Uncontrolled: `vDefaultValue` sets the initial value (server markup,\n      // hydration and later changes as in React)\n      const initialValue = props.value === undefined ? props.defaultValue : undefined\n      // The textarea's text content follows the controlled value, else\n      // `default-value`, as React keeps a textarea's defaultValue\n      const { value: _value, ...textareaControlProps } = controlProps as typeof controlProps & { value?: unknown }\n      const textContent = String(props.value ?? props.defaultValue ?? \"\")\n\n      return h(\"div\", { class: clsx(s.Root, className as string | undefined) }, [\n        h(\n          \"div\",\n          {\n            \"class\": clsx(s.FieldFootprint, { [s.HasValue!]: hasValue.value || !!startAdornment }),\n            \"data-focused\": focused.value ? \"\" : undefined,\n            \"data-has-value\": hasValue.value ? \"\" : undefined,\n            \"data-invalid\": invalid ? \"\" : undefined,\n            \"data-disabled\": props.disabled ? \"\" : undefined,\n            \"data-readonly\": readOnly ? \"\" : undefined,\n            \"data-multiline\": props.multiline ? \"\" : undefined,\n            \"onMousedown\": handleContainerMouseDown,\n          },\n          [\n            h(\"label\", { class: s.TypeableLabel, for: inputId }, [\n              h(\"div\", { class: s.LabelPositioner }, [h(\"div\", { class: s.LabelText }, props.label)]),\n            ]),\n            startAdornment ? h(\"div\", { class: s.StartAdornment }, startAdornment) : null,\n            props.multiline\n              ? withDirectives(\n                  h(\n                    \"textarea\",\n                    mergeProps(textareaAttrs(restAttrs), {\n                      ...textareaControlProps,\n                      rows: props.rows,\n                      class: s.Textarea,\n                      textContent,\n                    }),\n                  ),\n                  [[vServerText, textContent]],\n                )\n              : withDirectives(\n                  h(\n                    \"input\",\n                    mergeProps(restAttrs, {\n                      ...controlProps,\n                      \"type\": effectiveType,\n                      \"class\": s.Input,\n                      \"onAnimationstart\": handleAnimationStart,\n                      \"data-lpignore\": props.allowAutofillExtensions ? undefined : true,\n                      \"data-1p-ignore\": props.allowAutofillExtensions ? undefined : true,\n                    }),\n                  ),\n                  [[vDefaultValue, initialValue]],\n                ),\n            endAdornment ? h(\"div\", { class: s.EndAdornment }, endAdornment) : null,\n            showClearButton\n              ? h(\"button\", { \"type\": \"button\", \"aria-label\": \"Clear input\", \"class\": s.ClearButton, \"onClick\": handleClear }, [h(X)])\n              : null,\n            showRevealButton\n              ? h(\n                  \"button\",\n                  { \"type\": \"button\", \"aria-label\": revealed.value ? \"Hide\" : \"Show\", \"class\": s.RevealButton, \"onClick\": handleRevealToggle },\n                  [revealed.value ? h(EyeOff) : h(Eye)],\n                )\n              : null,\n          ],\n        ),\n        props.errorMessage ? h(\"div\", { id: errorId, class: s.ErrorMessage, role: \"alert\" }, props.errorMessage) : null,\n        description ? h(\"div\", { id: descriptionId, class: s.Description }, description) : null,\n      ])\n    }\n  },\n})\n\ntype FloatingLabelInputOwnProps = InstanceType<typeof FloatingLabelInputComponent>[\"$props\"]\n\n/** FloatingLabelInput props plus the native <input> attributes that fall through to it, as in React. */\nexport type FloatingLabelInputProps = FloatingLabelInputOwnProps &\n  Omit<InputHTMLAttributes, keyof FloatingLabelInputOwnProps>\n\n/** Text input whose label floats above the value, with optional reveal toggle and multiline mode. */\nexport const FloatingLabelInput = FloatingLabelInputComponent as typeof FloatingLabelInputComponent & {\n  new (): { $props: FloatingLabelInputProps }\n}\n"]}