npm - @a-vision-software/vue-input-components - Versions diffs - 1.0.0 - Mend

@a-vision-software/vue-input-components 1.0.0

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.

Files changed (7) hide show

package/README.md ADDED Viewed

@@ -0,0 +1,419 @@
+# Vue Input Components
+A collection of reusable Vue 3 input components with TypeScript support.
+## Features
+### TextInput Component
+- Customizable label position (top, left, right, bottom)
+- Label alignment options (left, right, center)
+- Icon support with click-to-focus functionality
+- Error and success states with messages
+- Required field indicator
+- Autosave functionality with debounce
+- Change indicators (saved, changed)
+- Fully responsive
+- Accessible
+- TypeScript support
+- Multiline text input support (textarea)
+- Adjustable number of visible rows
+- Optional maximum length limit
+- Vertical resizing support
+### FileUpload Component
+- Drag and drop file upload
+- File size validation (20MB limit)
+- Multiple file selection
+- Progress bar for upload status
+- Customizable icons
+- Automatic or manual upload modes
+- File list display with sizes
+- Error handling and status messages
+## Installation
+```bash
+npm install
+```
+## Development
+```bash
+npm run dev
+```
+## Build
+```bash
+npm run build
+```
+## Installation in Other Projects
+### Option 1: Copy Components Directly
+1. Copy the following files to your project:
+   - `src/components/TextInput.vue`
+   - `src/components/FileUpload.vue`
+   - `src/assets/colors.css`
+2. Install required dependencies in your project:
+   ```bash
+   npm install @fortawesome/fontawesome-svg-core @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/vue-fontawesome
+   ```
+3. Import the color variables in your main CSS file:
+   ```css
+   @import './assets/colors.css';
+   ```
+4. Import and register Font Awesome in your main.js or main.ts:
+   ```typescript
+   import { library } from '@fortawesome/fontawesome-svg-core'
+   import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+   import { faUser, faUpload, faImage, faFile, faHome } from '@fortawesome/free-solid-svg-icons'
+   library.add(faUser, faUpload, faImage, faFile, faHome)
+   app.component('font-awesome-icon', FontAwesomeIcon)
+   ```
+### Option 2: Create a Package
+1. Create a new package.json with the following structure:
+   ```json
+   {
+     "name": "vue-input-components",
+     "version": "1.0.0",
+     "main": "dist/index.js",
+     "types": "dist/index.d.ts",
+     "files": ["dist"],
+     "dependencies": {
+       "@fortawesome/fontawesome-svg-core": "^6.7.2",
+       "@fortawesome/free-regular-svg-icons": "^6.7.2",
+       "@fortawesome/free-solid-svg-icons": "^6.7.2",
+       "@fortawesome/vue-fontawesome": "^3.0.8",
+       "vue": "^3.5.13"
+     },
+     "peerDependencies": {
+       "vue": "^3.5.13"
+     }
+   }
+   ```
+2. Build the components for distribution:
+   ```bash
+   npm run build
+   ```
+3. Publish to npm:
+   ```bash
+   npm publish
+   ```
+4. Install in other projects:
+   ```bash
+   npm install vue-input-components
+   ```
+### Usage in Other Projects
+1. Import the components:
+   ```vue
+   <script setup>
+   import { TextInput, FileUpload } from 'vue-input-components'
+   </script>
+   ```
+2. Use the components in your template:
+   ```vue
+   <template>
+     <TextInput v-model="username" label="Username" icon="user" :required="true" />
+     <FileUpload
+       icon="upload"
+       upload-url="https://api.example.com/upload"
+       @upload-complete="handleUploadComplete"
+     />
+   </template>
+   ```
+3. Import the color variables in your project's main CSS file:
+   ```css
+   @import 'vue-input-components/dist/colors.css';
+   ```
+### Customization
+1. Override color variables in your project:
+   ```css
+   :root {
+     --primary-color: #your-color;
+     --text-color: #your-color;
+     /* Override other variables as needed */
+   }
+   ```
+2. Customize component styles:
+   ```css
+   .text-input {
+     /* Your custom styles */
+   }
+   .file-upload {
+     /* Your custom styles */
+   }
+   ```
+### Requirements
+- Vue 3.x
+- TypeScript (optional but recommended)
+- Font Awesome (for icons)
+### Browser Support
+All components use modern browser features and should work in all modern browsers that support:
+- CSS Variables
+- Flexbox
+- File API (for FileUpload)
+- Drag and Drop API (for FileUpload)
+- FormData (for FileUpload)
+- XMLHttpRequest (for FileUpload)
+## Components
+### TextInput
+Basic text input component with advanced features, including textarea support.
+#### Props
+| Prop          | Type                                   | Default   | Description                                |
+| ------------- | -------------------------------------- | --------- | ------------------------------------------ |
+| modelValue    | string                                 | required  | The input value (v-model)                  |
+| label         | string                                 | undefined | Input label                                |
+| type          | string                                 | 'text'    | Input type (text, password, email, etc.)   |
+| icon          | string                                 | undefined | Font Awesome icon name                     |
+| placeholder   | string                                 | undefined | Input placeholder                          |
+| required      | boolean                                | false     | Whether the field is required              |
+| disabled      | boolean                                | false     | Whether the field is disabled              |
+| error         | string                                 | undefined | Error message                              |
+| success       | string                                 | undefined | Success message                            |
+| labelPosition | 'top' \| 'left' \| 'right' \| 'bottom' | 'top'     | Label position                             |
+| labelAlign    | 'left' \| 'right' \| 'center'          | 'left'    | Label text alignment                       |
+| totalWidth    | string                                 | '100%'    | Total width of the component               |
+| inputWidth    | string                                 | undefined | Width of the input field                   |
+| labelWidth    | string                                 | undefined | Width of the label (when position is left) |
+| autosave      | (value: string) => Promise<void>       | undefined | Autosave callback function                 |
+| isTextarea    | boolean                                | false     | Whether to render as a textarea            |
+| maxHeight     | string                                 | '14rem'   | Maximum height for textarea                |
+| height        | string                                 | '5.5rem'  | Initial height for textarea                |
+#### Events
+| Event             | Payload | Description                                         |
+| ----------------- | ------- | --------------------------------------------------- |
+| update:modelValue | string  | Emitted when the input value changes                |
+| changed           | void    | Emitted when the value has changed (500ms debounce) |
+| saved             | void    | Emitted when autosave completes successfully        |
+#### Examples
+##### Basic Text Input
+```vue
+<template>
+  <TextInput
+    v-model="username"
+    label="Username"
+    type="text"
+    icon="user"
+    placeholder="Enter your username"
+    :error="usernameError"
+    :autosave="handleUsernameAutosave"
+    label-position="top"
+    label-align="left"
+    required
+  />
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import TextInput from '@/components/TextInput.vue'
+const username = ref('')
+const usernameError = ref('')
+const handleUsernameAutosave = async (value: string) => {
+  // Your autosave logic here
+}
+</script>
+```
+##### Textarea Input
+```vue
+<template>
+  <TextInput
+    v-model="description"
+    label="Description"
+    icon="pen"
+    placeholder="Enter a detailed description"
+    :isTextarea="true"
+    :error="descriptionError"
+    :autosave="handleDescriptionAutosave"
+    label-position="top"
+    label-align="left"
+    required
+  />
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import TextInput from '@/components/TextInput.vue'
+const description = ref('')
+const descriptionError = ref('')
+const handleDescriptionAutosave = async (value: string) => {
+  // Your autosave logic here
+}
+</script>
+```
+### FileUpload
+Flexible file upload component with drag and drop support.
+#### Props
+| Prop        | Type   | Required | Default  | Description                                                            |
+| ----------- | ------ | -------- | -------- | ---------------------------------------------------------------------- |
+| `icon`      | string | No       | 'upload' | Font Awesome icon name to display                                      |
+| `uploadUrl` | string | No       | -        | URL to upload files to. If not provided, manual upload mode is enabled |
+#### Events
+| Event             | Parameters      | Description                                         |
+| ----------------- | --------------- | --------------------------------------------------- |
+| `upload-complete` | `files: File[]` | Emitted when files are successfully uploaded        |
+| `upload-error`    | `error: string` | Emitted when an upload error occurs                 |
+| `files-selected`  | `files: File[]` | Emitted when files are selected (manual mode)       |
+| `start-upload`    | `files: File[]` | Emitted when upload button is clicked (manual mode) |
+#### Examples
+##### Automatic Upload Mode
+```vue
+<template>
+  <FileUpload
+    icon="upload"
+    upload-url="https://api.example.com/upload"
+    @upload-complete="handleUploadComplete"
+    @upload-error="handleUploadError"
+  />
+</template>
+<script setup>
+import FileUpload from '@/components/FileUpload.vue'
+const handleUploadComplete = (files) => {
+  console.log('Uploaded files:', files)
+}
+const handleUploadError = (error) => {
+  console.error('Upload error:', error)
+}
+</script>
+```
+##### Manual Upload Mode
+```vue
+<template>
+  <FileUpload
+    icon="image"
+    @files-selected="handleFilesSelected"
+    @start-upload="handleStartUpload"
+  />
+</template>
+<script setup>
+import FileUpload from '@/components/FileUpload.vue'
+const handleFilesSelected = (files) => {
+  console.log('Selected files:', files)
+}
+const handleStartUpload = (files) => {
+  // Implement your custom upload logic here
+  console.log('Starting upload for:', files)
+}
+</script>
+```
+## Styling
+All components use CSS variables for theming. You can customize the colors by overriding these variables in your application's CSS:
+```css
+:root {
+  /* Base colors */
+  --primary-color: #3498db;
+  --primary-color-light: rgba(52, 152, 219, 0.2);
+  --secondary-color: #2ecc71;
+  /* Text colors */
+  --text-color: #2c3e50;
+  --text-color-light: #7f8c8d;
+  /* UI colors */
+  --border-color: #dcdfe6;
+  --icon-color: #95a5a6;
+  /* State colors */
+  --error-color: #e74c3c;
+  --error-color-light: rgba(231, 76, 60, 0.2);
+  --success-color: #2ecc71;
+  --success-color-light: rgba(46, 204, 113, 0.2);
+  --warning-color: #f1c40f;
+  --warning-color-light: rgba(241, 196, 15, 0.2);
+  /* Background colors */
+  --disabled-color: #bdc3c7;
+  --disabled-background: #f5f7fa;
+  --card-bg: #ffffff;
+  --background-color: #f8f9fa;
+  /* File Upload specific colors */
+  --upload-border-color: var(--border-color);
+  --upload-bg-color: var(--background-color);
+  --upload-dragging-border-color: var(--primary-color);
+  --upload-dragging-bg-color: var(--primary-color-light);
+  --upload-has-files-border-color: var(--success-color);
+  --upload-has-files-bg-color: var(--success-color-light);
+  --upload-icon-color: var(--icon-color);
+  --upload-text-color: var(--text-color-light);
+  --progress-bg-color: var(--disabled-background);
+  --progress-color: var(--primary-color);
+}
+```
+## License
+MIT

package/dist/favicon.ico ADDED Viewed

Binary file

package/dist/index.css ADDED Viewed

@@ -0,0 +1 @@

+ .text-input[data-v-cc2497d0]{display:grid;gap:.5rem;width:100%;margin-top:.7rem}.text-input.label-top[data-v-cc2497d0]{grid-template-rows:auto 1fr}.text-input.label-left[data-v-cc2497d0]{grid-template-columns:30% 1fr;align-items:start;gap:1rem}.text-input.label-left .label[data-v-cc2497d0]{padding-top:.75rem;width:100%}.label[data-v-cc2497d0]{font-weight:500;color:var(--text-color);text-align:left}.label-align-left .label[data-v-cc2497d0]{text-align:left}.label-align-right .label[data-v-cc2497d0]{text-align:right}.label-align-center .label[data-v-cc2497d0]{text-align:center}.required[data-v-cc2497d0]{color:var(--danger-color);margin-left:.25rem}.input-wrapper[data-v-cc2497d0]{position:relative;display:grid;grid-template-columns:1fr;border:1px solid var(--border-color);border-radius:.5rem;transition:all .2s ease;width:100%;min-height:2rem;background:var(--input-bg-color)}.input-wrapper.has-icon[data-v-cc2497d0]{grid-template-columns:auto 1fr}.input-wrapper[data-v-cc2497d0]:focus-within{border-color:var(--primary-color);box-shadow:0 0 0 3px var(--shadow-color)}.input-wrapper.has-error[data-v-cc2497d0]{border-color:var(--danger-color);border-bottom-left-radius:0;border-bottom-right-radius:0}.icon-wrapper[data-v-cc2497d0]{display:grid;place-items:start;padding:1rem;border-right:1px solid var(--border-color);cursor:pointer;overflow:hidden}.icon-wrapper[data-v-cc2497d0]:hover{background-color:var(--input-bg-hover)}.icon[data-v-cc2497d0]{color:var(--text-muted);font-size:1rem}.input[data-v-cc2497d0]{padding:.75rem 1rem;border:none;outline:none;font-size:1rem;color:var(--text-color);background:transparent;width:100%;line-height:var(--line-height)}.input[data-v-cc2497d0]::placeholder{color:var(--text-muted)}.input[data-v-cc2497d0]:disabled{background-color:var(--input-bg-disabled);cursor:not-allowed}.message[data-v-cc2497d0]{position:absolute;bottom:-1.5rem;left:0;font-size:.75rem;white-space:nowrap}.error-message[data-v-cc2497d0]{position:absolute;bottom:0;left:0;right:0;padding:.25rem .75rem;background-color:var(--danger-color);color:#fff;font-size:.75rem;border-radius:0 0 .5rem .5rem;transform:translateY(100%);transition:transform .2s ease;line-height:var(--line-height);z-index:1}.success-message[data-v-cc2497d0]{position:absolute;bottom:-1.5rem;left:0;color:var(--success-color);font-size:.75rem;line-height:var(--line-height)}.status-indicator[data-v-cc2497d0]{position:absolute;top:-.1rem;right:.5rem;font-size:.75rem;color:var(--text-muted);line-height:0px;background-color:var(--input-bg-color);padding:0 .25rem}.saved-indicator[data-v-cc2497d0]{color:var(--success-color)}.changed-indicator[data-v-cc2497d0]{color:var(--warning-color)}.fade-enter-active[data-v-cc2497d0],.fade-leave-active[data-v-cc2497d0]{transition:opacity .2s ease}.fade-enter-from[data-v-cc2497d0],.fade-leave-to[data-v-cc2497d0]{opacity:0}textarea[data-v-cc2497d0]{min-height:var(--textarea-height, 5.5rem);max-height:var(--max-textarea-height, 14rem);overflow-y:auto;resize:none}.file-upload[data-v-75b2aeea]{width:100%;max-width:600px;margin:0 auto}.upload-area[data-v-75b2aeea]{border:2px dashed var(--upload-border-color);border-radius:.75rem;padding:2rem;text-align:center;cursor:pointer;transition:all .3s ease;background-color:var(--upload-bg-color)}.upload-area.is-dragging[data-v-75b2aeea]{border-color:var(--upload-dragging-border-color);background-color:var(--upload-dragging-bg-color)}.upload-area.has-files[data-v-75b2aeea]{border-color:var(--upload-has-files-border-color);background-color:var(--upload-has-files-bg-color)}.file-input[data-v-75b2aeea]{display:none}.upload-content[data-v-75b2aeea]{display:flex;flex-direction:column;align-items:center;gap:1rem}.upload-content[data-v-75b2aeea] svg{font-size:2rem;color:var(--upload-icon-color)}.selected-files[data-v-75b2aeea]{width:100%;text-align:left;max-height:200px;overflow-y:auto;font-size:.75rem;color:var(--upload-text-color)}.file-info[data-v-75b2aeea]{display:flex;justify-content:space-between;align-items:center;padding:.125rem 0;border-radius:.25rem;gap:.5rem;font-size:.75rem}.file-name[data-v-75b2aeea]{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-right:.5rem}.file-size[data-v-75b2aeea]{font-size:.7rem;flex-shrink:0}.error-message[data-v-75b2aeea]{color:var(--error-text-color);margin-top:1rem;font-size:.875rem}.progress-bar[data-v-75b2aeea]{height:.5rem;background-color:var(--progress-bg-color);border-radius:.25rem;margin-top:1rem;overflow:hidden}.progress[data-v-75b2aeea]{height:100%;background-color:var(--progress-color);transition:width .3s ease}.status-message[data-v-75b2aeea]{margin-top:1rem;padding:.5rem;border-radius:.25rem;font-size:.875rem}.status-message.success[data-v-75b2aeea]{background-color:var(--success-bg-color);color:var(--success-text-color)}.status-message.error[data-v-75b2aeea]{background-color:var(--error-bg-color);color:var(--error-text-color)}.upload-button[data-v-75b2aeea]{margin-top:1rem;padding:.5rem 1rem;background-color:var(--primary-color);color:#fff;border:none;border-radius:.25rem;cursor:pointer;font-size:.875rem;transition:background-color .3s ease}.upload-button[data-v-75b2aeea]:hover{background-color:var(--primary-color-light)}

package/dist/index.mjs ADDED Viewed

@@ -0,0 +1,300 @@
+import { defineComponent as z, computed as q, ref as u, onUnmounted as H, resolveComponent as A, createElementBlock as s, openBlock as o, normalizeStyle as L, normalizeClass as I, createCommentVNode as c, createElementVNode as m, toDisplayString as g, createVNode as U, Transition as B, withCtx as M, watch as N, withModifiers as $, Fragment as P, renderList as R } from "vue";
+const O = ["for"], X = ["id", "type", "value", "placeholder", "required", "disabled"], j = ["id", "value", "placeholder", "required", "disabled"], G = {
+  key: 3,
+  class: "status-indicator required-indicator"
+}, K = {
+  key: 0,
+  class: "status-indicator saved-indicator"
+}, Z = {
+  key: 0,
+  class: "status-indicator changed-indicator"
+}, J = {
+  key: 4,
+  class: "error-message"
+}, Q = {
+  key: 5,
+  class: "message success-message"
+}, Y = /* @__PURE__ */ z({
+  __name: "TextInput",
+  props: {
+    modelValue: {},
+    label: {},
+    type: {},
+    icon: {},
+    placeholder: {},
+    required: { type: Boolean },
+    disabled: { type: Boolean },
+    error: {},
+    success: {},
+    labelPosition: {},
+    labelAlign: {},
+    totalWidth: {},
+    inputWidth: {},
+    labelWidth: {},
+    autosave: { type: Function },
+    isTextarea: { type: Boolean },
+    maxHeight: {},
+    height: {}
+  },
+  emits: ["update:modelValue", "changed", "saved"],
+  setup(v, { emit: b }) {
+    const r = v, p = b, h = q(() => `input-${Math.random().toString(36).substr(2, 9)}`), t = u(!1), f = u(!1), y = u(!1), i = u(null), d = u(null), k = u(null), T = q(() => r.label ? r.labelPosition === "left" && r.labelWidth ? {
+      "grid-template-columns": `${r.labelWidth} 1fr`
+    } : {} : {}), C = async (e) => {
+      if (r.autosave)
+        try {
+          await r.autosave(e), r.error || (p("saved"), t.value = !0, f.value = !1, setTimeout(() => {
+            t.value = !1;
+          }, 3e3));
+        } catch (_) {
+          console.error("Autosave failed:", _);
+        }
+    }, D = (e) => {
+      i.value && clearTimeout(i.value), d.value && clearTimeout(d.value), r.error || (f.value = !0), d.value = window.setTimeout(() => {
+        p("changed"), y.value = !0;
+      }, 500), i.value = window.setTimeout(() => {
+        C(e);
+      }, 1500);
+    }, E = () => {
+      var e;
+      (e = k.value) == null || e.focus();
+    }, S = (e) => {
+      e.style.height = "auto", e.style.height = `${e.scrollHeight}px`;
+    }, F = (e) => {
+      const _ = e.target.value;
+      p("update:modelValue", _), D(_), S(e.target);
+    };
+    return H(() => {
+      i.value && clearTimeout(i.value), d.value && clearTimeout(d.value);
+    }), (e, _) => {
+      const l = A("font-awesome-icon");
+      return o(), s("div", {
+        class: I(["text-input", {
+          [`label-${e.labelPosition}`]: e.label,
+          [`label-align-${e.labelAlign}`]: e.label
+        }]),
+        style: L([
+          { width: e.totalWidth || "100%" },
+          T.value,
+          {
+            "--max-textarea-height": r.maxHeight || r.height || "14rem",
+            "--textarea-height": r.height || "5.5rem"
+          }
+        ])
+      }, [
+        e.label ? (o(), s("label", {
+          key: 0,
+          for: h.value,
+          class: "label"
+        }, g(e.label), 9, O)) : c("", !0),
+        m("div", {
+          class: I(["input-wrapper", {
+            "has-error": e.error,
+            "has-icon": e.icon
+          }])
+        }, [
+          e.icon ? (o(), s("div", {
+            key: 0,
+            class: "icon-wrapper",
+            onClick: E
+          }, [
+            U(l, {
+              icon: e.icon,
+              class: "icon"
+            }, null, 8, ["icon"])
+          ])) : c("", !0),
+          e.isTextarea ? (o(), s("textarea", {
+            key: 2,
+            id: h.value,
+            value: e.modelValue,
+            placeholder: e.placeholder,
+            required: e.required,
+            disabled: e.disabled,
+            class: "input",
+            onInput: F,
+            ref_key: "inputRef",
+            ref: k
+          }, null, 40, j)) : (o(), s("input", {
+            key: 1,
+            id: h.value,
+            type: e.type,
+            value: e.modelValue,
+            placeholder: e.placeholder,
+            required: e.required,
+            disabled: e.disabled,
+            class: "input",
+            onInput: F,
+            ref_key: "inputRef",
+            ref: k
+          }, null, 40, X)),
+          e.required && !t.value && !f.value ? (o(), s("span", G, "required")) : c("", !0),
+          U(B, { name: "fade" }, {
+            default: M(() => [
+              t.value && !e.error ? (o(), s("span", K, "saved")) : c("", !0)
+            ]),
+            _: 1
+          }),
+          U(B, { name: "fade" }, {
+            default: M(() => [
+              f.value && !e.error ? (o(), s("span", Z, "changed")) : c("", !0)
+            ]),
+            _: 1
+          }),
+          e.error ? (o(), s("div", J, g(e.error), 1)) : c("", !0),
+          e.success ? (o(), s("span", Q, g(e.success), 1)) : c("", !0)
+        ], 2)
+      ], 6);
+    };
+  }
+}), V = (v, b) => {
+  const r = v.__vccOpts || v;
+  for (const [p, h] of b)
+    r[p] = h;
+  return r;
+}, x = /* @__PURE__ */ V(Y, [["__scopeId", "data-v-cc2497d0"]]), ee = { class: "file-upload" }, ae = { class: "upload-content" }, le = { key: 0 }, te = {
+  key: 1,
+  class: "selected-files"
+}, se = { class: "file-name" }, oe = { class: "file-size" }, re = {
+  key: 0,
+  class: "error-message"
+}, ne = {
+  key: 1,
+  class: "progress-bar"
+}, ie = 20 * 1024 * 1024, ue = /* @__PURE__ */ z({
+  __name: "FileUpload",
+  props: {
+    icon: {},
+    uploadUrl: {}
+  },
+  emits: ["upload-complete", "upload-error", "files-selected", "start-upload"],
+  setup(v, { emit: b }) {
+    const r = v, p = b, h = u(null), t = u([]), f = u(!1), y = u(0), i = u(""), d = u(null), k = (l) => {
+      if (l === 0) return "0 Bytes";
+      const a = 1024, n = ["Bytes", "KB", "MB", "GB"], w = Math.floor(Math.log(l) / Math.log(a));
+      return parseFloat((l / Math.pow(a, w)).toFixed(2)) + " " + n[w];
+    }, T = (l) => l.size > ie ? (i.value = `File "${l.name}" exceeds the maximum size of 20MB`, !1) : !0, C = () => {
+      f.value = !0;
+    }, D = () => {
+      f.value = !1;
+    }, E = (l) => {
+      var a;
+      if (f.value = !1, i.value = "", (a = l.dataTransfer) != null && a.files) {
+        const n = Array.from(l.dataTransfer.files);
+        n.every(T) && (t.value = [...t.value, ...n]);
+      }
+    }, S = () => {
+      var l;
+      (l = h.value) == null || l.click();
+    }, F = (l) => {
+      i.value = "";
+      const a = l.target;
+      if (a.files) {
+        const n = Array.from(a.files);
+        n.every(T) && (t.value = [...t.value, ...n]);
+      }
+      a.value = "";
+    }, e = async () => {
+      if (!r.uploadUrl) {
+        i.value = "No upload URL provided";
+        return;
+      }
+      if (t.value.length === 0) {
+        i.value = "No files selected";
+        return;
+      }
+      const l = new FormData();
+      t.value.forEach((a) => {
+        l.append("files", a);
+      });
+      try {
+        const a = new XMLHttpRequest();
+        a.upload.addEventListener("progress", (n) => {
+          n.lengthComputable && (y.value = n.loaded / n.total * 100);
+        }), a.addEventListener("load", () => {
+          if (a.status >= 200 && a.status < 300)
+            d.value = {
+              type: "success",
+              message: "Upload completed successfully"
+            }, p("upload-complete", t.value), t.value = [], y.value = 0;
+          else
+            throw new Error(`Upload failed with status ${a.status}`);
+        }), a.addEventListener("error", () => {
+          throw new Error("Upload failed");
+        }), a.open("POST", r.uploadUrl), a.send(l);
+      } catch (a) {
+        const n = a instanceof Error ? a.message : "Upload failed";
+        i.value = n, d.value = {
+          type: "error",
+          message: n
+        }, p("upload-error", n);
+      }
+    }, _ = () => {
+      p("start-upload", t.value);
+    };
+    return N(t, (l) => {
+      l.length > 0 && (r.uploadUrl ? e() : p("files-selected", l));
+    }), (l, a) => {
+      const n = A("font-awesome-icon");
+      return o(), s("div", ee, [
+        m("div", {
+          class: I(["upload-area", { "is-dragging": f.value, "has-files": t.value.length > 0 }]),
+          onDragenter: $(C, ["prevent"]),
+          onDragleave: $(D, ["prevent"]),
+          onDragover: a[0] || (a[0] = $(() => {
+          }, ["prevent"])),
+          onDrop: $(E, ["prevent"]),
+          onClick: S
+        }, [
+          m("input", {
+            ref_key: "fileInput",
+            ref: h,
+            type: "file",
+            multiple: "",
+            class: "file-input",
+            onChange: F
+          }, null, 544),
+          m("div", ae, [
+            U(n, {
+              icon: ["fas", l.icon || "upload"]
+            }, null, 8, ["icon"]),
+            t.value.length === 0 ? (o(), s("p", le, "Drag & drop files here or click to select")) : (o(), s("div", te, [
+              m("p", null, g(t.value.length) + " file(s) selected", 1),
+              (o(!0), s(P, null, R(t.value, (w, W) => (o(), s("div", {
+                key: W,
+                class: "file-info"
+              }, [
+                m("span", se, g(w.name), 1),
+                m("span", oe, g(k(w.size)), 1)
+              ]))), 128))
+            ]))
+          ])
+        ], 34),
+        i.value ? (o(), s("div", re, g(i.value), 1)) : c("", !0),
+        y.value > 0 && y.value < 100 ? (o(), s("div", ne, [
+          m("div", {
+            class: "progress",
+            style: L({ width: `${y.value}%` })
+          }, null, 4)
+        ])) : c("", !0),
+        d.value ? (o(), s("div", {
+          key: 2,
+          class: I(["status-message", d.value.type])
+        }, g(d.value.message), 3)) : c("", !0),
+        t.value.length > 0 && !l.uploadUrl ? (o(), s("button", {
+          key: 3,
+          class: "upload-button",
+          onClick: _
+        }, " Upload Files ")) : c("", !0)
+      ]);
+    };
+  }
+}), de = /* @__PURE__ */ V(ue, [["__scopeId", "data-v-75b2aeea"]]), pe = {
+  install: (v) => {
+    v.component("TextInput", x), v.component("FileUpload", de);
+  }
+};
+export {
+  de as FileUpload,
+  x as TextInput,
+  pe as default
+};

package/dist/index.umd.js ADDED Viewed

@@ -0,0 +1 @@

package/package.json ADDED Viewed

@@ -0,0 +1,57 @@
+{
+  "name": "@a-vision-software/vue-input-components",
+  "version": "1.0.0",
+  "description": "A collection of reusable Vue 3 input components with TypeScript support",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src/assets/colors.css"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "preview": "vite preview",
+    "build-only": "vite build && vue-tsc --declaration --emitDeclarationOnly",
+    "type-check": "vue-tsc --noEmit",
+    "lint": "eslint . --fix",
+    "format": "prettier --write src/"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "components",
+    "input",
+    "form",
+    "typescript"
+  ],
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-regular-svg-icons": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "@fortawesome/vue-fontawesome": "^3.0.8",
+    "vue": "^3.5.13"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.13"
+  },
+  "devDependencies": {
+    "@tsconfig/node22": "^22.0.1",
+    "@types/node": "^22.14.0",
+    "@vitejs/plugin-vue": "^5.2.3",
+    "@vue/eslint-config-prettier": "^10.2.0",
+    "@vue/eslint-config-typescript": "^14.5.0",
+    "@vue/tsconfig": "^0.7.0",
+    "eslint": "^9.22.0",
+    "eslint-plugin-vue": "~10.0.0",
+    "jiti": "^2.4.2",
+    "npm-run-all2": "^7.0.2",
+    "prettier": "3.5.3",
+    "typescript": "~5.8.0",
+    "vite": "^6.2.4",
+    "vite-plugin-vue-devtools": "^7.7.2",
+    "vue-tsc": "^2.2.8"
+  }
+}

package/src/assets/colors.css ADDED Viewed

@@ -0,0 +1,67 @@
+:root {
+  /* Base colors */
+  --primary-color: #3498db;
+  --primary-color-light: rgba(52, 152, 219, 0.2);
+  --secondary-color: #2ecc71;
+  /* Text colors */
+  --text-color: #2c3e50;
+  --text-color-light: #7f8c8d;
+  /* UI colors */
+  --border-color: #dcdfe6;
+  --icon-color: #95a5a6;
+  /* State colors */
+  --error-color: #e74c3c;
+  --error-color-light: rgba(231, 76, 60, 0.2);
+  --success-color: #2ecc71;
+  --success-color-light: rgba(46, 204, 113, 0.2);
+  --warning-color: #f1c40f;
+  --warning-color-light: rgba(241, 196, 15, 0.2);
+  /* Background colors */
+  --disabled-color: #bdc3c7;
+  --disabled-background: #f5f7fa;
+  --card-bg: #ffffff;
+  --background-color: #f8f9fa;
+  /* Input colors */
+  --input-bg-color: rgba(255, 255, 255, 0.8);
+  --input-bg-hover: rgba(0, 0, 0, 0.05);
+  --input-bg-disabled: rgba(0, 0, 0, 0.05);
+  /* Text Colors */
+  --text-muted: #6c757d;
+  /* Border Colors */
+  --input-bg: #ffffff;
+  --input-bg-disabled: #e9ecef;
+  /* Status Colors */
+  --danger-color: #dc3545;
+  --success-color: #28a745;
+  --warning-color: #ffc107;
+  /* Shadow Colors */
+  --shadow-color: rgba(74, 108, 247, 0.25);
+  /* Typography */
+  --line-height: 20px;
+  /* File Upload Colors */
+  --upload-border-color: var(--border-color);
+  --upload-bg-color: var(--background-color);
+  --upload-dragging-border-color: var(--primary-color);
+  --upload-dragging-bg-color: var(--primary-color-light);
+  --upload-has-files-border-color: var(--success-color);
+  --upload-has-files-bg-color: var(--success-color-light);
+  --upload-icon-color: var(--icon-color);
+  --upload-text-color: var(--text-color-light);
+  --progress-bg-color: var(--disabled-background);
+  --progress-color: var(--primary-color);
+  --success-bg-color: var(--success-color-light);
+  --success-text-color: var(--success-color);
+  --error-bg-color: var(--error-color-light);
+  --error-text-color: var(--error-color);
+}