@a-vision-software/vue-input-components 1.1.32 → 1.1.34

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 (10) hide show
  1. package/dist/src/index.d.ts +1 -2
  2. package/dist/src/types.d.ts +0 -11
  3. package/dist/vue-input-components.css +1 -1
  4. package/dist/vue-input-components.es.js +133 -197
  5. package/dist/vue-input-components.umd.js +1 -1
  6. package/package.json +1 -1
  7. package/src/index.ts +1 -2
  8. package/src/types.ts +0 -12
  9. package/dist/src/components/TextAreaInput.vue.d.ts +0 -80
  10. package/src/components/TextAreaInput.vue +0 -116
package/dist/src/index.d.ts CHANGED
@@ -1,6 +1,5 @@
1
1
  import { default as TextInput } from './components/TextInput';
2
- import { default as TextAreaInput } from './components/TextAreaInput';
3
2
  import { default as FileUpload } from './components/FileUpload';
4
3
 
5
- export { TextInput, TextAreaInput, FileUpload };
4
+ export { TextInput, FileUpload };
6
5
  export * from './types';
package/dist/src/types.d.ts CHANGED
@@ -9,16 +9,6 @@ export interface TextInputProps {
9
9
  required?: boolean;
10
10
  maxlength?: number;
11
11
  }
12
- export interface TextAreaInputProps {
13
- modelValue: string;
14
- label?: string;
15
- placeholder?: string;
16
- error?: string;
17
- disabled?: boolean;
18
- required?: boolean;
19
- maxlength?: number;
20
- rows?: number;
21
- }
22
12
  export interface FileUploadProps {
23
13
  modelValue: File[];
24
14
  label?: string;
@@ -40,5 +30,4 @@ export interface FileUploadEmits {
40
30
  (e: 'upload-error', error: Error): void;
41
31
  }
42
32
  export type TextInputComponent = Component<TextInputProps>;
43
- export type TextAreaInputComponent = Component<TextAreaInputProps>;
44
33
  export type FileUploadComponent = Component<FileUploadProps>;
package/dist/vue-input-components.css CHANGED
@@ -1 +1 @@
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}.text-area-input[data-v-2e843729]{display:flex;flex-direction:column;gap:.5rem;width:100%}label[data-v-2e843729]{font-size:.875rem;font-weight:500;color:var(--text-color)}label.required[data-v-2e843729]:after{content:"*";color:var(--error-color);margin-left:.25rem}textarea[data-v-2e843729]{width:100%;padding:.5rem;border:1px solid var(--border-color);border-radius:.375rem;font-size:.875rem;line-height:1.5;color:var(--text-color);background-color:var(--bg-color);transition:border-color .2s ease-in-out;resize:vertical;min-height:2.5rem}textarea[data-v-2e843729]:focus{outline:none;border-color:var(--primary-color)}textarea[data-v-2e843729]:disabled{background-color:var(--disabled-bg-color);cursor:not-allowed}textarea.error[data-v-2e843729]{border-color:var(--error-color)}.error-message[data-v-2e843729]{font-size:.75rem;color:var(--error-color)}.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)}
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/vue-input-components.es.js CHANGED
@@ -1,4 +1,4 @@
1
- import { defineComponent as D, computed as V, ref as p, onUnmounted as W, resolveComponent as z, createElementBlock as s, openBlock as o, normalizeStyle as L, normalizeClass as k, createCommentVNode as d, createElementVNode as g, toDisplayString as h, createVNode as F, Transition as M, withCtx as A, watch as H, withModifiers as I, Fragment as P, renderList as R } from "vue";
1
+ 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 h, toDisplayString as m, createVNode as U, Transition as B, withCtx as M, watch as N, withModifiers as F, Fragment as P, renderList as R } from "vue";
2
2
  const O = ["for"], X = ["id", "type", "value", "placeholder", "required", "disabled"], j = ["id", "value", "placeholder", "required", "disabled"], G = {
3
3
  key: 3,
4
4
  class: "status-indicator required-indicator"
@@ -8,13 +8,13 @@ const O = ["for"], X = ["id", "type", "value", "placeholder", "required", "disab
8
8
  }, Z = {
9
9
  key: 0,
10
10
  class: "status-indicator changed-indicator"
11
- }, x = {
11
+ }, J = {
12
12
  key: 4,
13
13
  class: "error-message"
14
- }, J = {
14
+ }, Q = {
15
15
  key: 5,
16
16
  class: "message success-message"
17
- }, Q = /* @__PURE__ */ D({
17
+ }, Y = /* @__PURE__ */ z({
18
18
  __name: "TextInput",
19
19
  props: {
20
20
  modelValue: {},
@@ -37,39 +37,39 @@ const O = ["for"], X = ["id", "type", "value", "placeholder", "required", "disab
37
37
  height: {}
38
38
  },
39
39
  emits: ["update:modelValue", "changed", "saved"],
40
- setup(n, { emit: y }) {
41
- const r = n, c = y, v = V(() => `input-${Math.random().toString(36).substr(2, 9)}`), l = p(!1), m = p(!1), b = p(!1), u = p(null), f = p(null), _ = p(null), T = V(() => r.label ? r.labelPosition === "left" && r.labelWidth ? {
40
+ setup(_, { emit: b }) {
41
+ const r = _, p = b, f = q(() => `input-${Math.random().toString(36).substr(2, 9)}`), t = u(!1), v = u(!1), g = u(!1), i = u(null), d = u(null), k = u(null), T = q(() => r.label ? r.labelPosition === "left" && r.labelWidth ? {
42
42
  "grid-template-columns": `${r.labelWidth} 1fr`
43
- } : {} : {}), S = async (e) => {
43
+ } : {} : {}), C = async (e) => {
44
44
  if (r.autosave)
45
45
  try {
46
- await r.autosave(e), r.error || (c("saved"), l.value = !0, m.value = !1, setTimeout(() => {
47
- l.value = !1;
46
+ await r.autosave(e), r.error || (p("saved"), t.value = !0, v.value = !1, setTimeout(() => {
47
+ t.value = !1;
48
48
  }, 3e3));
49
- } catch (w) {
50
- console.error("Autosave failed:", w);
49
+ } catch (y) {
50
+ console.error("Autosave failed:", y);
51
51
  }
52
- }, U = (e) => {
53
- u.value && clearTimeout(u.value), f.value && clearTimeout(f.value), r.error || (m.value = !0), f.value = window.setTimeout(() => {
54
- c("changed"), b.value = !0;
55
- }, 500), u.value = window.setTimeout(() => {
56
- S(e);
52
+ }, D = (e) => {
53
+ i.value && clearTimeout(i.value), d.value && clearTimeout(d.value), r.error || (v.value = !0), d.value = window.setTimeout(() => {
54
+ p("changed"), g.value = !0;
55
+ }, 500), i.value = window.setTimeout(() => {
56
+ C(e);
57
57
  }, 1500);
58
- }, B = () => {
58
+ }, E = () => {
59
59
  var e;
60
- (e = _.value) == null || e.focus();
61
- }, C = (e) => {
60
+ (e = k.value) == null || e.focus();
61
+ }, S = (e) => {
62
62
  e.style.height = "auto", e.style.height = `${e.scrollHeight}px`;
63
- }, q = (e) => {
64
- const w = e.target.value;
65
- c("update:modelValue", w), U(w), C(e.target);
63
+ }, $ = (e) => {
64
+ const y = e.target.value;
65
+ p("update:modelValue", y), D(y), S(e.target);
66
66
  };
67
- return W(() => {
68
- u.value && clearTimeout(u.value), f.value && clearTimeout(f.value);
69
- }), (e, w) => {
70
- const t = z("font-awesome-icon");
67
+ return H(() => {
68
+ i.value && clearTimeout(i.value), d.value && clearTimeout(d.value);
69
+ }), (e, y) => {
70
+ const l = A("font-awesome-icon");
71
71
  return o(), s("div", {
72
- class: k(["text-input", {
72
+ class: I(["text-input", {
73
73
  [`label-${e.labelPosition}`]: e.label,
74
74
  [`label-align-${e.labelAlign}`]: e.label
75
75
  }]),
@@ -84,11 +84,11 @@ const O = ["for"], X = ["id", "type", "value", "placeholder", "required", "disab
84
84
  }, [
85
85
  e.label ? (o(), s("label", {
86
86
  key: 0,
87
- for: v.value,
87
+ for: f.value,
88
88
  class: "label"
89
- }, h(e.label), 9, O)) : d("", !0),
90
- g("div", {
91
- class: k(["input-wrapper", {
89
+ }, m(e.label), 9, O)) : c("", !0),
90
+ h("div", {
91
+ class: I(["input-wrapper", {
92
92
  "has-error": e.error,
93
93
  "has-icon": e.icon
94
94
  }])
@@ -96,264 +96,200 @@ const O = ["for"], X = ["id", "type", "value", "placeholder", "required", "disab
96
96
  e.icon ? (o(), s("div", {
97
97
  key: 0,
98
98
  class: "icon-wrapper",
99
- onClick: B
99
+ onClick: E
100
100
  }, [
101
- F(t, {
101
+ U(l, {
102
102
  icon: e.icon,
103
103
  class: "icon"
104
104
  }, null, 8, ["icon"])
105
- ])) : d("", !0),
105
+ ])) : c("", !0),
106
106
  e.isTextarea ? (o(), s("textarea", {
107
107
  key: 2,
108
- id: v.value,
108
+ id: f.value,
109
109
  value: e.modelValue,
110
110
  placeholder: e.placeholder,
111
111
  required: e.required,
112
112
  disabled: e.disabled,
113
113
  class: "input",
114
- onInput: q,
114
+ onInput: $,
115
115
  ref_key: "inputRef",
116
- ref: _
116
+ ref: k
117
117
  }, null, 40, j)) : (o(), s("input", {
118
118
  key: 1,
119
- id: v.value,
119
+ id: f.value,
120
120
  type: e.type,
121
121
  value: e.modelValue,
122
122
  placeholder: e.placeholder,
123
123
  required: e.required,
124
124
  disabled: e.disabled,
125
125
  class: "input",
126
- onInput: q,
126
+ onInput: $,
127
127
  ref_key: "inputRef",
128
- ref: _
128
+ ref: k
129
129
  }, null, 40, X)),
130
- e.required && !l.value && !m.value ? (o(), s("span", G, "required")) : d("", !0),
131
- F(M, { name: "fade" }, {
132
- default: A(() => [
133
- l.value && !e.error ? (o(), s("span", K, "saved")) : d("", !0)
130
+ e.required && !t.value && !v.value ? (o(), s("span", G, "required")) : c("", !0),
131
+ U(B, { name: "fade" }, {
132
+ default: M(() => [
133
+ t.value && !e.error ? (o(), s("span", K, "saved")) : c("", !0)
134
134
  ]),
135
135
  _: 1
136
136
  }),
137
- F(M, { name: "fade" }, {
138
- default: A(() => [
139
- m.value && !e.error ? (o(), s("span", Z, "changed")) : d("", !0)
137
+ U(B, { name: "fade" }, {
138
+ default: M(() => [
139
+ v.value && !e.error ? (o(), s("span", Z, "changed")) : c("", !0)
140
140
  ]),
141
141
  _: 1
142
142
  }),
143
- e.error ? (o(), s("div", x, h(e.error), 1)) : d("", !0),
144
- e.success ? (o(), s("span", J, h(e.success), 1)) : d("", !0)
143
+ e.error ? (o(), s("div", J, m(e.error), 1)) : c("", !0),
144
+ e.success ? (o(), s("span", Q, m(e.success), 1)) : c("", !0)
145
145
  ], 2)
146
146
  ], 6);
147
147
  };
148
148
  }
149
- }), E = (n, y) => {
150
- const r = n.__vccOpts || n;
151
- for (const [c, v] of y)
152
- r[c] = v;
149
+ }), V = (_, b) => {
150
+ const r = _.__vccOpts || _;
151
+ for (const [p, f] of b)
152
+ r[p] = f;
153
153
  return r;
154
- }, fe = /* @__PURE__ */ E(Q, [["__scopeId", "data-v-cc2497d0"]]), Y = { class: "text-area-input" }, ee = ["value", "placeholder", "disabled", "required", "maxlength", "rows"], ae = {
155
- key: 1,
156
- class: "error-message"
157
- }, te = /* @__PURE__ */ D({
158
- __name: "TextAreaInput",
159
- props: {
160
- modelValue: {
161
- type: String,
162
- required: !0
163
- },
164
- label: {
165
- type: String,
166
- default: ""
167
- },
168
- placeholder: {
169
- type: String,
170
- default: ""
171
- },
172
- error: {
173
- type: String,
174
- default: ""
175
- },
176
- disabled: {
177
- type: Boolean,
178
- default: !1
179
- },
180
- required: {
181
- type: Boolean,
182
- default: !1
183
- },
184
- maxlength: {
185
- type: Number,
186
- default: void 0
187
- },
188
- rows: {
189
- type: Number,
190
- default: 4
191
- }
192
- },
193
- emits: ["update:modelValue"],
194
- setup(n, { emit: y }) {
195
- const r = y, c = (v) => {
196
- const l = v.target;
197
- r("update:modelValue", l.value);
198
- };
199
- return (v, l) => (o(), s("div", Y, [
200
- n.label ? (o(), s("label", {
201
- key: 0,
202
- class: k({ required: n.required })
203
- }, h(n.label), 3)) : d("", !0),
204
- g("textarea", {
205
- value: n.modelValue,
206
- onInput: c,
207
- placeholder: n.placeholder,
208
- disabled: n.disabled,
209
- required: n.required,
210
- maxlength: n.maxlength,
211
- rows: n.rows,
212
- class: k({ error: !!n.error })
213
- }, null, 42, ee),
214
- n.error ? (o(), s("div", ae, h(n.error), 1)) : d("", !0)
215
- ]));
216
- }
217
- }), he = /* @__PURE__ */ E(te, [["__scopeId", "data-v-2e843729"]]), le = { class: "file-upload" }, se = { class: "upload-content" }, oe = { key: 0 }, re = {
154
+ }, de = /* @__PURE__ */ V(Y, [["__scopeId", "data-v-cc2497d0"]]), x = { class: "file-upload" }, ee = { class: "upload-content" }, ae = { key: 0 }, le = {
218
155
  key: 1,
219
156
  class: "selected-files"
220
- }, ne = { class: "file-name" }, ie = { class: "file-size" }, ue = {
157
+ }, te = { class: "file-name" }, se = { class: "file-size" }, oe = {
221
158
  key: 0,
222
159
  class: "error-message"
223
- }, de = {
160
+ }, re = {
224
161
  key: 1,
225
162
  class: "progress-bar"
226
- }, ce = 20 * 1024 * 1024, pe = /* @__PURE__ */ D({
163
+ }, ne = 20 * 1024 * 1024, ie = /* @__PURE__ */ z({
227
164
  __name: "FileUpload",
228
165
  props: {
229
166
  icon: {},
230
167
  uploadUrl: {}
231
168
  },
232
169
  emits: ["upload-complete", "upload-error", "files-selected", "start-upload"],
233
- setup(n, { emit: y }) {
234
- const r = n, c = y, v = p(null), l = p([]), m = p(!1), b = p(0), u = p(""), f = p(null), _ = (t) => {
235
- if (t === 0) return "0 Bytes";
236
- const a = 1024, i = ["Bytes", "KB", "MB", "GB"], $ = Math.floor(Math.log(t) / Math.log(a));
237
- return parseFloat((t / Math.pow(a, $)).toFixed(2)) + " " + i[$];
238
- }, T = (t) => t.size > ce ? (u.value = `File "${t.name}" exceeds the maximum size of 20MB`, !1) : !0, S = () => {
239
- m.value = !0;
240
- }, U = () => {
241
- m.value = !1;
242
- }, B = (t) => {
170
+ setup(_, { emit: b }) {
171
+ const r = _, p = b, f = u(null), t = u([]), v = u(!1), g = u(0), i = u(""), d = u(null), k = (l) => {
172
+ if (l === 0) return "0 Bytes";
173
+ const a = 1024, n = ["Bytes", "KB", "MB", "GB"], w = Math.floor(Math.log(l) / Math.log(a));
174
+ return parseFloat((l / Math.pow(a, w)).toFixed(2)) + " " + n[w];
175
+ }, T = (l) => l.size > ne ? (i.value = `File "${l.name}" exceeds the maximum size of 20MB`, !1) : !0, C = () => {
176
+ v.value = !0;
177
+ }, D = () => {
178
+ v.value = !1;
179
+ }, E = (l) => {
243
180
  var a;
244
- if (m.value = !1, u.value = "", (a = t.dataTransfer) != null && a.files) {
245
- const i = Array.from(t.dataTransfer.files);
246
- i.every(T) && (l.value = [...l.value, ...i]);
181
+ if (v.value = !1, i.value = "", (a = l.dataTransfer) != null && a.files) {
182
+ const n = Array.from(l.dataTransfer.files);
183
+ n.every(T) && (t.value = [...t.value, ...n]);
247
184
  }
248
- }, C = () => {
249
- var t;
250
- (t = v.value) == null || t.click();
251
- }, q = (t) => {
252
- u.value = "";
253
- const a = t.target;
185
+ }, S = () => {
186
+ var l;
187
+ (l = f.value) == null || l.click();
188
+ }, $ = (l) => {
189
+ i.value = "";
190
+ const a = l.target;
254
191
  if (a.files) {
255
- const i = Array.from(a.files);
256
- i.every(T) && (l.value = [...l.value, ...i]);
192
+ const n = Array.from(a.files);
193
+ n.every(T) && (t.value = [...t.value, ...n]);
257
194
  }
258
195
  a.value = "";
259
196
  }, e = async () => {
260
197
  if (!r.uploadUrl) {
261
- u.value = "No upload URL provided";
198
+ i.value = "No upload URL provided";
262
199
  return;
263
200
  }
264
- if (l.value.length === 0) {
265
- u.value = "No files selected";
201
+ if (t.value.length === 0) {
202
+ i.value = "No files selected";
266
203
  return;
267
204
  }
268
- const t = new FormData();
269
- l.value.forEach((a) => {
270
- t.append("files", a);
205
+ const l = new FormData();
206
+ t.value.forEach((a) => {
207
+ l.append("files", a);
271
208
  });
272
209
  try {
273
210
  const a = new XMLHttpRequest();
274
- a.upload.addEventListener("progress", (i) => {
275
- i.lengthComputable && (b.value = i.loaded / i.total * 100);
211
+ a.upload.addEventListener("progress", (n) => {
212
+ n.lengthComputable && (g.value = n.loaded / n.total * 100);
276
213
  }), a.addEventListener("load", () => {
277
214
  if (a.status >= 200 && a.status < 300)
278
- f.value = {
215
+ d.value = {
279
216
  type: "success",
280
217
  message: "Upload completed successfully"
281
- }, c("upload-complete", l.value), l.value = [], b.value = 0;
218
+ }, p("upload-complete", t.value), t.value = [], g.value = 0;
282
219
  else
283
220
  throw new Error(`Upload failed with status ${a.status}`);
284
221
  }), a.addEventListener("error", () => {
285
222
  throw new Error("Upload failed");
286
- }), a.open("POST", r.uploadUrl), a.send(t);
223
+ }), a.open("POST", r.uploadUrl), a.send(l);
287
224
  } catch (a) {
288
- const i = a instanceof Error ? a.message : "Upload failed";
289
- u.value = i, f.value = {
225
+ const n = a instanceof Error ? a.message : "Upload failed";
226
+ i.value = n, d.value = {
290
227
  type: "error",
291
- message: i
292
- }, c("upload-error", i);
228
+ message: n
229
+ }, p("upload-error", n);
293
230
  }
294
- }, w = () => {
295
- c("start-upload", l.value);
231
+ }, y = () => {
232
+ p("start-upload", t.value);
296
233
  };
297
- return H(l, (t) => {
298
- t.length > 0 && (r.uploadUrl ? e() : c("files-selected", t));
299
- }), (t, a) => {
300
- const i = z("font-awesome-icon");
301
- return o(), s("div", le, [
302
- g("div", {
303
- class: k(["upload-area", { "is-dragging": m.value, "has-files": l.value.length > 0 }]),
304
- onDragenter: I(S, ["prevent"]),
305
- onDragleave: I(U, ["prevent"]),
306
- onDragover: a[0] || (a[0] = I(() => {
234
+ return N(t, (l) => {
235
+ l.length > 0 && (r.uploadUrl ? e() : p("files-selected", l));
236
+ }), (l, a) => {
237
+ const n = A("font-awesome-icon");
238
+ return o(), s("div", x, [
239
+ h("div", {
240
+ class: I(["upload-area", { "is-dragging": v.value, "has-files": t.value.length > 0 }]),
241
+ onDragenter: F(C, ["prevent"]),
242
+ onDragleave: F(D, ["prevent"]),
243
+ onDragover: a[0] || (a[0] = F(() => {
307
244
  }, ["prevent"])),
308
- onDrop: I(B, ["prevent"]),
309
- onClick: C
245
+ onDrop: F(E, ["prevent"]),
246
+ onClick: S
310
247
  }, [
311
- g("input", {
248
+ h("input", {
312
249
  ref_key: "fileInput",
313
- ref: v,
250
+ ref: f,
314
251
  type: "file",
315
252
  multiple: "",
316
253
  class: "file-input",
317
- onChange: q
254
+ onChange: $
318
255
  }, null, 544),
319
- g("div", se, [
320
- F(i, {
321
- icon: ["fas", t.icon || "upload"]
256
+ h("div", ee, [
257
+ U(n, {
258
+ icon: ["fas", l.icon || "upload"]
322
259
  }, null, 8, ["icon"]),
323
- l.value.length === 0 ? (o(), s("p", oe, "Drag & drop files here or click to select")) : (o(), s("div", re, [
324
- g("p", null, h(l.value.length) + " file(s) selected", 1),
325
- (o(!0), s(P, null, R(l.value, ($, N) => (o(), s("div", {
326
- key: N,
260
+ t.value.length === 0 ? (o(), s("p", ae, "Drag & drop files here or click to select")) : (o(), s("div", le, [
261
+ h("p", null, m(t.value.length) + " file(s) selected", 1),
262
+ (o(!0), s(P, null, R(t.value, (w, W) => (o(), s("div", {
263
+ key: W,
327
264
  class: "file-info"
328
265
  }, [
329
- g("span", ne, h($.name), 1),
330
- g("span", ie, h(_($.size)), 1)
266
+ h("span", te, m(w.name), 1),
267
+ h("span", se, m(k(w.size)), 1)
331
268
  ]))), 128))
332
269
  ]))
333
270
  ])
334
271
  ], 34),
335
- u.value ? (o(), s("div", ue, h(u.value), 1)) : d("", !0),
336
- b.value > 0 && b.value < 100 ? (o(), s("div", de, [
337
- g("div", {
272
+ i.value ? (o(), s("div", oe, m(i.value), 1)) : c("", !0),
273
+ g.value > 0 && g.value < 100 ? (o(), s("div", re, [
274
+ h("div", {
338
275
  class: "progress",
339
- style: L({ width: `${b.value}%` })
276
+ style: L({ width: `${g.value}%` })
340
277
  }, null, 4)
341
- ])) : d("", !0),
342
- f.value ? (o(), s("div", {
278
+ ])) : c("", !0),
279
+ d.value ? (o(), s("div", {
343
280
  key: 2,
344
- class: k(["status-message", f.value.type])
345
- }, h(f.value.message), 3)) : d("", !0),
346
- l.value.length > 0 && !t.uploadUrl ? (o(), s("button", {
281
+ class: I(["status-message", d.value.type])
282
+ }, m(d.value.message), 3)) : c("", !0),
283
+ t.value.length > 0 && !l.uploadUrl ? (o(), s("button", {
347
284
  key: 3,
348
285
  class: "upload-button",
349
- onClick: w
350
- }, " Upload Files ")) : d("", !0)
286
+ onClick: y
287
+ }, " Upload Files ")) : c("", !0)
351
288
  ]);
352
289
  };
353
290
  }
354
- }), me = /* @__PURE__ */ E(pe, [["__scopeId", "data-v-75b2aeea"]]);
291
+ }), ce = /* @__PURE__ */ V(ie, [["__scopeId", "data-v-75b2aeea"]]);
355
292
  export {
356
- me as FileUpload,
357
- he as TextAreaInput,
358
- fe as TextInput
293
+ ce as FileUpload,
294
+ de as TextInput
359
295
  };
package/dist/vue-input-components.umd.js CHANGED
@@ -1 +1 @@
1
- (function(u,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(u=typeof globalThis<"u"?globalThis:u||self,e(u.VueInputComponents={},u.Vue))})(this,function(u,e){"use strict";const N=["for"],S=["id","type","value","placeholder","required","disabled"],T=["id","value","placeholder","required","disabled"],$={key:3,class:"status-indicator required-indicator"},D={key:0,class:"status-indicator saved-indicator"},I={key:0,class:"status-indicator changed-indicator"},q={key:4,class:"error-message"},F={key:5,class:"message success-message"},U=e.defineComponent({__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(r,{emit:f}){const n=r,c=f,d=e.computed(()=>`input-${Math.random().toString(36).substr(2,9)}`),o=e.ref(!1),m=e.ref(!1),h=e.ref(!1),i=e.ref(null),p=e.ref(null),k=e.ref(null),B=e.computed(()=>n.label?n.labelPosition==="left"&&n.labelWidth?{"grid-template-columns":`${n.labelWidth} 1fr`}:{}:{}),V=async t=>{if(n.autosave)try{await n.autosave(t),n.error||(c("saved"),o.value=!0,m.value=!1,setTimeout(()=>{o.value=!1},3e3))}catch(g){console.error("Autosave failed:",g)}},w=t=>{i.value&&clearTimeout(i.value),p.value&&clearTimeout(p.value),n.error||(m.value=!0),p.value=window.setTimeout(()=>{c("changed"),h.value=!0},500),i.value=window.setTimeout(()=>{V(t)},1500)},C=()=>{var t;(t=k.value)==null||t.focus()},_=t=>{t.style.height="auto",t.style.height=`${t.scrollHeight}px`},b=t=>{const g=t.target.value;c("update:modelValue",g),w(g),_(t.target)};return e.onUnmounted(()=>{i.value&&clearTimeout(i.value),p.value&&clearTimeout(p.value)}),(t,g)=>{const a=e.resolveComponent("font-awesome-icon");return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["text-input",{[`label-${t.labelPosition}`]:t.label,[`label-align-${t.labelAlign}`]:t.label}]),style:e.normalizeStyle([{width:t.totalWidth||"100%"},B.value,{"--max-textarea-height":n.maxHeight||n.height||"14rem","--textarea-height":n.height||"5.5rem"}])},[t.label?(e.openBlock(),e.createElementBlock("label",{key:0,for:d.value,class:"label"},e.toDisplayString(t.label),9,N)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["input-wrapper",{"has-error":t.error,"has-icon":t.icon}])},[t.icon?(e.openBlock(),e.createElementBlock("div",{key:0,class:"icon-wrapper",onClick:C},[e.createVNode(a,{icon:t.icon,class:"icon"},null,8,["icon"])])):e.createCommentVNode("",!0),t.isTextarea?(e.openBlock(),e.createElementBlock("textarea",{key:2,id:d.value,value:t.modelValue,placeholder:t.placeholder,required:t.required,disabled:t.disabled,class:"input",onInput:b,ref_key:"inputRef",ref:k},null,40,T)):(e.openBlock(),e.createElementBlock("input",{key:1,id:d.value,type:t.type,value:t.modelValue,placeholder:t.placeholder,required:t.required,disabled:t.disabled,class:"input",onInput:b,ref_key:"inputRef",ref:k},null,40,S)),t.required&&!o.value&&!m.value?(e.openBlock(),e.createElementBlock("span",$,"required")):e.createCommentVNode("",!0),e.createVNode(e.Transition,{name:"fade"},{default:e.withCtx(()=>[o.value&&!t.error?(e.openBlock(),e.createElementBlock("span",D,"saved")):e.createCommentVNode("",!0)]),_:1}),e.createVNode(e.Transition,{name:"fade"},{default:e.withCtx(()=>[m.value&&!t.error?(e.openBlock(),e.createElementBlock("span",I,"changed")):e.createCommentVNode("",!0)]),_:1}),t.error?(e.openBlock(),e.createElementBlock("div",q,e.toDisplayString(t.error),1)):e.createCommentVNode("",!0),t.success?(e.openBlock(),e.createElementBlock("span",F,e.toDisplayString(t.success),1)):e.createCommentVNode("",!0)],2)],6)}}}),E=(r,f)=>{const n=r.__vccOpts||r;for(const[c,d]of f)n[c]=d;return n},z=E(U,[["__scopeId","data-v-cc2497d0"]]),M={class:"text-area-input"},A=["value","placeholder","disabled","required","maxlength","rows"],L={key:1,class:"error-message"},P=E(e.defineComponent({__name:"TextAreaInput",props:{modelValue:{type:String,required:!0},label:{type:String,default:""},placeholder:{type:String,default:""},error:{type:String,default:""},disabled:{type:Boolean,default:!1},required:{type:Boolean,default:!1},maxlength:{type:Number,default:void 0},rows:{type:Number,default:4}},emits:["update:modelValue"],setup(r,{emit:f}){const n=f,c=d=>{const o=d.target;n("update:modelValue",o.value)};return(d,o)=>(e.openBlock(),e.createElementBlock("div",M,[r.label?(e.openBlock(),e.createElementBlock("label",{key:0,class:e.normalizeClass({required:r.required})},e.toDisplayString(r.label),3)):e.createCommentVNode("",!0),e.createElementVNode("textarea",{value:r.modelValue,onInput:c,placeholder:r.placeholder,disabled:r.disabled,required:r.required,maxlength:r.maxlength,rows:r.rows,class:e.normalizeClass({error:!!r.error})},null,42,A),r.error?(e.openBlock(),e.createElementBlock("div",L,e.toDisplayString(r.error),1)):e.createCommentVNode("",!0)]))}}),[["__scopeId","data-v-2e843729"]]),W={class:"file-upload"},H={class:"upload-content"},R={key:0},j={key:1,class:"selected-files"},v={class:"file-name"},O={class:"file-size"},x={key:0,class:"error-message"},X={key:1,class:"progress-bar"},G=20*1024*1024,K=E(e.defineComponent({__name:"FileUpload",props:{icon:{},uploadUrl:{}},emits:["upload-complete","upload-error","files-selected","start-upload"],setup(r,{emit:f}){const n=r,c=f,d=e.ref(null),o=e.ref([]),m=e.ref(!1),h=e.ref(0),i=e.ref(""),p=e.ref(null),k=a=>{if(a===0)return"0 Bytes";const l=1024,s=["Bytes","KB","MB","GB"],y=Math.floor(Math.log(a)/Math.log(l));return parseFloat((a/Math.pow(l,y)).toFixed(2))+" "+s[y]},B=a=>a.size>G?(i.value=`File "${a.name}" exceeds the maximum size of 20MB`,!1):!0,V=()=>{m.value=!0},w=()=>{m.value=!1},C=a=>{var l;if(m.value=!1,i.value="",(l=a.dataTransfer)!=null&&l.files){const s=Array.from(a.dataTransfer.files);s.every(B)&&(o.value=[...o.value,...s])}},_=()=>{var a;(a=d.value)==null||a.click()},b=a=>{i.value="";const l=a.target;if(l.files){const s=Array.from(l.files);s.every(B)&&(o.value=[...o.value,...s])}l.value=""},t=async()=>{if(!n.uploadUrl){i.value="No upload URL provided";return}if(o.value.length===0){i.value="No files selected";return}const a=new FormData;o.value.forEach(l=>{a.append("files",l)});try{const l=new XMLHttpRequest;l.upload.addEventListener("progress",s=>{s.lengthComputable&&(h.value=s.loaded/s.total*100)}),l.addEventListener("load",()=>{if(l.status>=200&&l.status<300)p.value={type:"success",message:"Upload completed successfully"},c("upload-complete",o.value),o.value=[],h.value=0;else throw new Error(`Upload failed with status ${l.status}`)}),l.addEventListener("error",()=>{throw new Error("Upload failed")}),l.open("POST",n.uploadUrl),l.send(a)}catch(l){const s=l instanceof Error?l.message:"Upload failed";i.value=s,p.value={type:"error",message:s},c("upload-error",s)}},g=()=>{c("start-upload",o.value)};return e.watch(o,a=>{a.length>0&&(n.uploadUrl?t():c("files-selected",a))}),(a,l)=>{const s=e.resolveComponent("font-awesome-icon");return e.openBlock(),e.createElementBlock("div",W,[e.createElementVNode("div",{class:e.normalizeClass(["upload-area",{"is-dragging":m.value,"has-files":o.value.length>0}]),onDragenter:e.withModifiers(V,["prevent"]),onDragleave:e.withModifiers(w,["prevent"]),onDragover:l[0]||(l[0]=e.withModifiers(()=>{},["prevent"])),onDrop:e.withModifiers(C,["prevent"]),onClick:_},[e.createElementVNode("input",{ref_key:"fileInput",ref:d,type:"file",multiple:"",class:"file-input",onChange:b},null,544),e.createElementVNode("div",H,[e.createVNode(s,{icon:["fas",a.icon||"upload"]},null,8,["icon"]),o.value.length===0?(e.openBlock(),e.createElementBlock("p",R,"Drag & drop files here or click to select")):(e.openBlock(),e.createElementBlock("div",j,[e.createElementVNode("p",null,e.toDisplayString(o.value.length)+" file(s) selected",1),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.value,(y,Z)=>(e.openBlock(),e.createElementBlock("div",{key:Z,class:"file-info"},[e.createElementVNode("span",v,e.toDisplayString(y.name),1),e.createElementVNode("span",O,e.toDisplayString(k(y.size)),1)]))),128))]))])],34),i.value?(e.openBlock(),e.createElementBlock("div",x,e.toDisplayString(i.value),1)):e.createCommentVNode("",!0),h.value>0&&h.value<100?(e.openBlock(),e.createElementBlock("div",X,[e.createElementVNode("div",{class:"progress",style:e.normalizeStyle({width:`${h.value}%`})},null,4)])):e.createCommentVNode("",!0),p.value?(e.openBlock(),e.createElementBlock("div",{key:2,class:e.normalizeClass(["status-message",p.value.type])},e.toDisplayString(p.value.message),3)):e.createCommentVNode("",!0),o.value.length>0&&!a.uploadUrl?(e.openBlock(),e.createElementBlock("button",{key:3,class:"upload-button",onClick:g}," Upload Files ")):e.createCommentVNode("",!0)])}}}),[["__scopeId","data-v-75b2aeea"]]);u.FileUpload=K,u.TextAreaInput=P,u.TextInput=z,Object.defineProperty(u,Symbol.toStringTag,{value:"Module"})});
1
+ (function(p,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(p=typeof globalThis<"u"?globalThis:p||self,e(p.VueInputComponents={},p.Vue))})(this,function(p,e){"use strict";const N=["for"],S=["id","type","value","placeholder","required","disabled"],T=["id","value","placeholder","required","disabled"],D={key:3,class:"status-indicator required-indicator"},F={key:0,class:"status-indicator saved-indicator"},$={key:0,class:"status-indicator changed-indicator"},U={key:4,class:"error-message"},I={key:5,class:"message success-message"},M=e.defineComponent({__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(h,{emit:g}){const n=h,c=g,u=e.computed(()=>`input-${Math.random().toString(36).substr(2,9)}`),a=e.ref(!1),d=e.ref(!1),m=e.ref(!1),r=e.ref(null),i=e.ref(null),k=e.ref(null),B=e.computed(()=>n.label?n.labelPosition==="left"&&n.labelWidth?{"grid-template-columns":`${n.labelWidth} 1fr`}:{}:{}),_=async t=>{if(n.autosave)try{await n.autosave(t),n.error||(c("saved"),a.value=!0,d.value=!1,setTimeout(()=>{a.value=!1},3e3))}catch(f){console.error("Autosave failed:",f)}},b=t=>{r.value&&clearTimeout(r.value),i.value&&clearTimeout(i.value),n.error||(d.value=!0),i.value=window.setTimeout(()=>{c("changed"),m.value=!0},500),r.value=window.setTimeout(()=>{_(t)},1500)},w=()=>{var t;(t=k.value)==null||t.focus()},V=t=>{t.style.height="auto",t.style.height=`${t.scrollHeight}px`},E=t=>{const f=t.target.value;c("update:modelValue",f),b(f),V(t.target)};return e.onUnmounted(()=>{r.value&&clearTimeout(r.value),i.value&&clearTimeout(i.value)}),(t,f)=>{const l=e.resolveComponent("font-awesome-icon");return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["text-input",{[`label-${t.labelPosition}`]:t.label,[`label-align-${t.labelAlign}`]:t.label}]),style:e.normalizeStyle([{width:t.totalWidth||"100%"},B.value,{"--max-textarea-height":n.maxHeight||n.height||"14rem","--textarea-height":n.height||"5.5rem"}])},[t.label?(e.openBlock(),e.createElementBlock("label",{key:0,for:u.value,class:"label"},e.toDisplayString(t.label),9,N)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["input-wrapper",{"has-error":t.error,"has-icon":t.icon}])},[t.icon?(e.openBlock(),e.createElementBlock("div",{key:0,class:"icon-wrapper",onClick:w},[e.createVNode(l,{icon:t.icon,class:"icon"},null,8,["icon"])])):e.createCommentVNode("",!0),t.isTextarea?(e.openBlock(),e.createElementBlock("textarea",{key:2,id:u.value,value:t.modelValue,placeholder:t.placeholder,required:t.required,disabled:t.disabled,class:"input",onInput:E,ref_key:"inputRef",ref:k},null,40,T)):(e.openBlock(),e.createElementBlock("input",{key:1,id:u.value,type:t.type,value:t.modelValue,placeholder:t.placeholder,required:t.required,disabled:t.disabled,class:"input",onInput:E,ref_key:"inputRef",ref:k},null,40,S)),t.required&&!a.value&&!d.value?(e.openBlock(),e.createElementBlock("span",D,"required")):e.createCommentVNode("",!0),e.createVNode(e.Transition,{name:"fade"},{default:e.withCtx(()=>[a.value&&!t.error?(e.openBlock(),e.createElementBlock("span",F,"saved")):e.createCommentVNode("",!0)]),_:1}),e.createVNode(e.Transition,{name:"fade"},{default:e.withCtx(()=>[d.value&&!t.error?(e.openBlock(),e.createElementBlock("span",$,"changed")):e.createCommentVNode("",!0)]),_:1}),t.error?(e.openBlock(),e.createElementBlock("div",U,e.toDisplayString(t.error),1)):e.createCommentVNode("",!0),t.success?(e.openBlock(),e.createElementBlock("span",I,e.toDisplayString(t.success),1)):e.createCommentVNode("",!0)],2)],6)}}}),C=(h,g)=>{const n=h.__vccOpts||h;for(const[c,u]of g)n[c]=u;return n},z=C(M,[["__scopeId","data-v-cc2497d0"]]),q={class:"file-upload"},v={class:"upload-content"},A={key:0},L={key:1,class:"selected-files"},P={class:"file-name"},W={class:"file-size"},H={key:0,class:"error-message"},R={key:1,class:"progress-bar"},j=20*1024*1024,O=C(e.defineComponent({__name:"FileUpload",props:{icon:{},uploadUrl:{}},emits:["upload-complete","upload-error","files-selected","start-upload"],setup(h,{emit:g}){const n=h,c=g,u=e.ref(null),a=e.ref([]),d=e.ref(!1),m=e.ref(0),r=e.ref(""),i=e.ref(null),k=l=>{if(l===0)return"0 Bytes";const o=1024,s=["Bytes","KB","MB","GB"],y=Math.floor(Math.log(l)/Math.log(o));return parseFloat((l/Math.pow(o,y)).toFixed(2))+" "+s[y]},B=l=>l.size>j?(r.value=`File "${l.name}" exceeds the maximum size of 20MB`,!1):!0,_=()=>{d.value=!0},b=()=>{d.value=!1},w=l=>{var o;if(d.value=!1,r.value="",(o=l.dataTransfer)!=null&&o.files){const s=Array.from(l.dataTransfer.files);s.every(B)&&(a.value=[...a.value,...s])}},V=()=>{var l;(l=u.value)==null||l.click()},E=l=>{r.value="";const o=l.target;if(o.files){const s=Array.from(o.files);s.every(B)&&(a.value=[...a.value,...s])}o.value=""},t=async()=>{if(!n.uploadUrl){r.value="No upload URL provided";return}if(a.value.length===0){r.value="No files selected";return}const l=new FormData;a.value.forEach(o=>{l.append("files",o)});try{const o=new XMLHttpRequest;o.upload.addEventListener("progress",s=>{s.lengthComputable&&(m.value=s.loaded/s.total*100)}),o.addEventListener("load",()=>{if(o.status>=200&&o.status<300)i.value={type:"success",message:"Upload completed successfully"},c("upload-complete",a.value),a.value=[],m.value=0;else throw new Error(`Upload failed with status ${o.status}`)}),o.addEventListener("error",()=>{throw new Error("Upload failed")}),o.open("POST",n.uploadUrl),o.send(l)}catch(o){const s=o instanceof Error?o.message:"Upload failed";r.value=s,i.value={type:"error",message:s},c("upload-error",s)}},f=()=>{c("start-upload",a.value)};return e.watch(a,l=>{l.length>0&&(n.uploadUrl?t():c("files-selected",l))}),(l,o)=>{const s=e.resolveComponent("font-awesome-icon");return e.openBlock(),e.createElementBlock("div",q,[e.createElementVNode("div",{class:e.normalizeClass(["upload-area",{"is-dragging":d.value,"has-files":a.value.length>0}]),onDragenter:e.withModifiers(_,["prevent"]),onDragleave:e.withModifiers(b,["prevent"]),onDragover:o[0]||(o[0]=e.withModifiers(()=>{},["prevent"])),onDrop:e.withModifiers(w,["prevent"]),onClick:V},[e.createElementVNode("input",{ref_key:"fileInput",ref:u,type:"file",multiple:"",class:"file-input",onChange:E},null,544),e.createElementVNode("div",v,[e.createVNode(s,{icon:["fas",l.icon||"upload"]},null,8,["icon"]),a.value.length===0?(e.openBlock(),e.createElementBlock("p",A,"Drag & drop files here or click to select")):(e.openBlock(),e.createElementBlock("div",L,[e.createElementVNode("p",null,e.toDisplayString(a.value.length)+" file(s) selected",1),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.value,(y,X)=>(e.openBlock(),e.createElementBlock("div",{key:X,class:"file-info"},[e.createElementVNode("span",P,e.toDisplayString(y.name),1),e.createElementVNode("span",W,e.toDisplayString(k(y.size)),1)]))),128))]))])],34),r.value?(e.openBlock(),e.createElementBlock("div",H,e.toDisplayString(r.value),1)):e.createCommentVNode("",!0),m.value>0&&m.value<100?(e.openBlock(),e.createElementBlock("div",R,[e.createElementVNode("div",{class:"progress",style:e.normalizeStyle({width:`${m.value}%`})},null,4)])):e.createCommentVNode("",!0),i.value?(e.openBlock(),e.createElementBlock("div",{key:2,class:e.normalizeClass(["status-message",i.value.type])},e.toDisplayString(i.value.message),3)):e.createCommentVNode("",!0),a.value.length>0&&!l.uploadUrl?(e.openBlock(),e.createElementBlock("button",{key:3,class:"upload-button",onClick:f}," Upload Files ")):e.createCommentVNode("",!0)])}}}),[["__scopeId","data-v-75b2aeea"]]);p.FileUpload=O,p.TextInput=z,Object.defineProperty(p,Symbol.toStringTag,{value:"Module"})});
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@a-vision-software/vue-input-components",
3
- "version": "1.1.32",
3
+ "version": "1.1.34",
4
4
  "description": "A collection of reusable Vue 3 input components with TypeScript support",
5
5
  "author": "A-Vision Software",
6
6
  "license": "MIT",
package/src/index.ts CHANGED
@@ -1,8 +1,7 @@
1
1
  import TextInput from './components/TextInput.vue'
2
- import TextAreaInput from './components/TextAreaInput.vue'
3
2
  import FileUpload from './components/FileUpload.vue'
4
3
 
5
- export { TextInput, TextAreaInput, FileUpload }
4
+ export { TextInput, FileUpload }
6
5
 
7
6
  // Export types
8
7
  export * from './types'
package/src/types.ts CHANGED
@@ -10,17 +10,6 @@ export interface TextInputProps {
10
10
  maxlength?: number
11
11
  }
12
12
 
13
- export interface TextAreaInputProps {
14
- modelValue: string
15
- label?: string
16
- placeholder?: string
17
- error?: string
18
- disabled?: boolean
19
- required?: boolean
20
- maxlength?: number
21
- rows?: number
22
- }
23
-
24
13
  export interface FileUploadProps {
25
14
  modelValue: File[]
26
15
  label?: string
@@ -44,5 +33,4 @@ export interface FileUploadEmits {
44
33
  }
45
34
 
46
35
  export type TextInputComponent = Component<TextInputProps>
47
- export type TextAreaInputComponent = Component<TextAreaInputProps>
48
36
  export type FileUploadComponent = Component<FileUploadProps>
package/dist/src/components/TextAreaInput.vue.d.ts DELETED
@@ -1,80 +0,0 @@
1
- declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
2
- modelValue: {
3
- type: StringConstructor;
4
- required: true;
5
- };
6
- label: {
7
- type: StringConstructor;
8
- default: string;
9
- };
10
- placeholder: {
11
- type: StringConstructor;
12
- default: string;
13
- };
14
- error: {
15
- type: StringConstructor;
16
- default: string;
17
- };
18
- disabled: {
19
- type: BooleanConstructor;
20
- default: boolean;
21
- };
22
- required: {
23
- type: BooleanConstructor;
24
- default: boolean;
25
- };
26
- maxlength: {
27
- type: NumberConstructor;
28
- default: undefined;
29
- };
30
- rows: {
31
- type: NumberConstructor;
32
- default: number;
33
- };
34
- }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
35
- "update:modelValue": (...args: any[]) => void;
36
- }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
37
- modelValue: {
38
- type: StringConstructor;
39
- required: true;
40
- };
41
- label: {
42
- type: StringConstructor;
43
- default: string;
44
- };
45
- placeholder: {
46
- type: StringConstructor;
47
- default: string;
48
- };
49
- error: {
50
- type: StringConstructor;
51
- default: string;
52
- };
53
- disabled: {
54
- type: BooleanConstructor;
55
- default: boolean;
56
- };
57
- required: {
58
- type: BooleanConstructor;
59
- default: boolean;
60
- };
61
- maxlength: {
62
- type: NumberConstructor;
63
- default: undefined;
64
- };
65
- rows: {
66
- type: NumberConstructor;
67
- default: number;
68
- };
69
- }>> & Readonly<{
70
- "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
71
- }>, {
72
- error: string;
73
- disabled: boolean;
74
- label: string;
75
- placeholder: string;
76
- required: boolean;
77
- maxlength: number;
78
- rows: number;
79
- }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
80
- export default _default;
package/src/components/TextAreaInput.vue DELETED
@@ -1,116 +0,0 @@
1
- <template>
2
- <div class="text-area-input">
3
- <label v-if="label" :class="{ required }">{{ label }}</label>
4
- <textarea
5
- :value="modelValue"
6
- @input="handleInput"
7
- :placeholder="placeholder"
8
- :disabled="disabled"
9
- :required="required"
10
- :maxlength="maxlength"
11
- :rows="rows"
12
- :class="{ error: !!error }"
13
- ></textarea>
14
- <div v-if="error" class="error-message">{{ error }}</div>
15
- </div>
16
- </template>
17
-
18
- <script setup lang="ts">
19
- import { defineProps, defineEmits } from 'vue'
20
-
21
- defineProps({
22
- modelValue: {
23
- type: String,
24
- required: true,
25
- },
26
- label: {
27
- type: String,
28
- default: '',
29
- },
30
- placeholder: {
31
- type: String,
32
- default: '',
33
- },
34
- error: {
35
- type: String,
36
- default: '',
37
- },
38
- disabled: {
39
- type: Boolean,
40
- default: false,
41
- },
42
- required: {
43
- type: Boolean,
44
- default: false,
45
- },
46
- maxlength: {
47
- type: Number,
48
- default: undefined,
49
- },
50
- rows: {
51
- type: Number,
52
- default: 4,
53
- },
54
- })
55
-
56
- const emit = defineEmits(['update:modelValue'])
57
-
58
- const handleInput = (event: Event) => {
59
- const target = event.target as HTMLTextAreaElement
60
- emit('update:modelValue', target.value)
61
- }
62
- </script>
63
-
64
- <style scoped>
65
- .text-area-input {
66
- display: flex;
67
- flex-direction: column;
68
- gap: 0.5rem;
69
- width: 100%;
70
- }
71
-
72
- label {
73
- font-size: 0.875rem;
74
- font-weight: 500;
75
- color: var(--text-color);
76
- }
77
-
78
- label.required::after {
79
- content: '*';
80
- color: var(--error-color);
81
- margin-left: 0.25rem;
82
- }
83
-
84
- textarea {
85
- width: 100%;
86
- padding: 0.5rem;
87
- border: 1px solid var(--border-color);
88
- border-radius: 0.375rem;
89
- font-size: 0.875rem;
90
- line-height: 1.5;
91
- color: var(--text-color);
92
- background-color: var(--bg-color);
93
- transition: border-color 0.2s ease-in-out;
94
- resize: vertical;
95
- min-height: 2.5rem;
96
- }
97
-
98
- textarea:focus {
99
- outline: none;
100
- border-color: var(--primary-color);
101
- }
102
-
103
- textarea:disabled {
104
- background-color: var(--disabled-bg-color);
105
- cursor: not-allowed;
106
- }
107
-
108
- textarea.error {
109
- border-color: var(--error-color);
110
- }
111
-
112
- .error-message {
113
- font-size: 0.75rem;
114
- color: var(--error-color);
115
- }
116
- </style>