@a-vision-software/vue-input-components 1.1.1 → 1.1.4

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.
@@ -0,0 +1,2 @@
1
+ declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
2
+ export default _default;
@@ -0,0 +1,18 @@
1
+ type __VLS_Props = {
2
+ icon?: string;
3
+ uploadUrl?: string;
4
+ };
5
+ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
6
+ "upload-complete": (files: File[]) => any;
7
+ "upload-error": (error: string) => any;
8
+ "files-selected": (files: File[]) => any;
9
+ "start-upload": (files: File[]) => any;
10
+ }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
11
+ "onUpload-complete"?: ((files: File[]) => any) | undefined;
12
+ "onUpload-error"?: ((error: string) => any) | undefined;
13
+ "onFiles-selected"?: ((files: File[]) => any) | undefined;
14
+ "onStart-upload"?: ((files: File[]) => any) | undefined;
15
+ }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
16
+ fileInput: HTMLInputElement;
17
+ }, HTMLDivElement>;
18
+ export default _default;
@@ -0,0 +1,32 @@
1
+ type __VLS_Props = {
2
+ modelValue: string;
3
+ label?: string;
4
+ type?: string;
5
+ icon?: string;
6
+ placeholder?: string;
7
+ required?: boolean;
8
+ disabled?: boolean;
9
+ error?: string;
10
+ success?: string;
11
+ labelPosition?: 'top' | 'left';
12
+ labelAlign?: 'left' | 'right' | 'center';
13
+ totalWidth?: string;
14
+ inputWidth?: string;
15
+ labelWidth?: string;
16
+ autosave?: (value: string) => Promise<void>;
17
+ isTextarea?: boolean;
18
+ maxHeight?: string;
19
+ height?: string;
20
+ };
21
+ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
22
+ "update:modelValue": (value: string) => any;
23
+ changed: () => any;
24
+ saved: () => any;
25
+ }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
26
+ "onUpdate:modelValue"?: ((value: string) => any) | undefined;
27
+ onChanged?: (() => any) | undefined;
28
+ onSaved?: (() => any) | undefined;
29
+ }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
30
+ inputRef: HTMLTextAreaElement;
31
+ }, HTMLDivElement>;
32
+ export default _default;
@@ -0,0 +1,3 @@
1
+ import { default as TextInput } from './components/TextInput.vue';
2
+ import { default as FileUpload } from './components/FileUpload.vue';
3
+ export { TextInput, FileUpload };
File without changes
@@ -0,0 +1,2 @@
1
+ declare const router: import('vue-router').Router;
2
+ export default router;
@@ -0,0 +1,2 @@
1
+ declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
2
+ export default _default;
@@ -0,0 +1,2 @@
1
+ declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
2
+ export default _default;
@@ -0,0 +1,2 @@
1
+ declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
2
+ export default _default;
@@ -0,0 +1,23 @@
1
+ declare module '@a-vision-software/vue-input-components' {
2
+ import { DefineComponent } from 'vue'
3
+
4
+ export const TextInput: DefineComponent<{
5
+ modelValue?: string
6
+ label?: string
7
+ placeholder?: string
8
+ required?: boolean
9
+ disabled?: boolean
10
+ error?: string
11
+ }>
12
+
13
+ export const FileUpload: DefineComponent<{
14
+ modelValue?: File[]
15
+ maxFiles?: number
16
+ maxFileSize?: number
17
+ accept?: string
18
+ uploadUrl?: string
19
+ required?: boolean
20
+ disabled?: boolean
21
+ error?: string
22
+ }>
23
+ }
@@ -1,4 +1,4 @@
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 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";
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"
@@ -37,21 +37,21 @@ const O = ["for"], X = ["id", "type", "value", "placeholder", "required", "disab
37
37
  height: {}
38
38
  },
39
39
  emits: ["update:modelValue", "changed", "saved"],
40
- setup(v, { emit: b }) {
41
- 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 ? {
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
43
  } : {} : {}), C = async (e) => {
44
44
  if (r.autosave)
45
45
  try {
46
- await r.autosave(e), r.error || (p("saved"), t.value = !0, f.value = !1, setTimeout(() => {
46
+ await r.autosave(e), r.error || (p("saved"), t.value = !0, v.value = !1, setTimeout(() => {
47
47
  t.value = !1;
48
48
  }, 3e3));
49
- } catch (_) {
50
- console.error("Autosave failed:", _);
49
+ } catch (y) {
50
+ console.error("Autosave failed:", y);
51
51
  }
52
52
  }, D = (e) => {
53
- i.value && clearTimeout(i.value), d.value && clearTimeout(d.value), r.error || (f.value = !0), d.value = window.setTimeout(() => {
54
- p("changed"), y.value = !0;
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
55
  }, 500), i.value = window.setTimeout(() => {
56
56
  C(e);
57
57
  }, 1500);
@@ -60,13 +60,13 @@ const O = ["for"], X = ["id", "type", "value", "placeholder", "required", "disab
60
60
  (e = k.value) == null || e.focus();
61
61
  }, S = (e) => {
62
62
  e.style.height = "auto", e.style.height = `${e.scrollHeight}px`;
63
- }, F = (e) => {
64
- const _ = e.target.value;
65
- p("update:modelValue", _), D(_), S(e.target);
63
+ }, $ = (e) => {
64
+ const y = e.target.value;
65
+ p("update:modelValue", y), D(y), S(e.target);
66
66
  };
67
67
  return H(() => {
68
68
  i.value && clearTimeout(i.value), d.value && clearTimeout(d.value);
69
- }), (e, _) => {
69
+ }), (e, y) => {
70
70
  const l = A("font-awesome-icon");
71
71
  return o(), s("div", {
72
72
  class: I(["text-input", {
@@ -84,10 +84,10 @@ 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: h.value,
87
+ for: f.value,
88
88
  class: "label"
89
- }, g(e.label), 9, O)) : c("", !0),
90
- m("div", {
89
+ }, m(e.label), 9, O)) : c("", !0),
90
+ h("div", {
91
91
  class: I(["input-wrapper", {
92
92
  "has-error": e.error,
93
93
  "has-icon": e.icon
@@ -105,29 +105,29 @@ const O = ["for"], X = ["id", "type", "value", "placeholder", "required", "disab
105
105
  ])) : c("", !0),
106
106
  e.isTextarea ? (o(), s("textarea", {
107
107
  key: 2,
108
- id: h.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: F,
114
+ onInput: $,
115
115
  ref_key: "inputRef",
116
116
  ref: k
117
117
  }, null, 40, j)) : (o(), s("input", {
118
118
  key: 1,
119
- id: h.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: F,
126
+ onInput: $,
127
127
  ref_key: "inputRef",
128
128
  ref: k
129
129
  }, null, 40, X)),
130
- e.required && !t.value && !f.value ? (o(), s("span", G, "required")) : c("", !0),
130
+ e.required && !t.value && !v.value ? (o(), s("span", G, "required")) : c("", !0),
131
131
  U(B, { name: "fade" }, {
132
132
  default: M(() => [
133
133
  t.value && !e.error ? (o(), s("span", K, "saved")) : c("", !0)
@@ -136,56 +136,56 @@ const O = ["for"], X = ["id", "type", "value", "placeholder", "required", "disab
136
136
  }),
137
137
  U(B, { name: "fade" }, {
138
138
  default: M(() => [
139
- f.value && !e.error ? (o(), s("span", Z, "changed")) : c("", !0)
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", J, g(e.error), 1)) : c("", !0),
144
- e.success ? (o(), s("span", Q, g(e.success), 1)) : c("", !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
- }), V = (v, b) => {
150
- const r = v.__vccOpts || v;
151
- for (const [p, h] of b)
152
- r[p] = h;
149
+ }), V = (_, b) => {
150
+ const r = _.__vccOpts || _;
151
+ for (const [p, f] of b)
152
+ r[p] = f;
153
153
  return r;
154
- }, x = /* @__PURE__ */ V(Y, [["__scopeId", "data-v-cc2497d0"]]), ee = { class: "file-upload" }, ae = { class: "upload-content" }, le = { key: 0 }, te = {
154
+ }, de = /* @__PURE__ */ V(Y, [["__scopeId", "data-v-cc2497d0"]]), x = { class: "file-upload" }, ee = { class: "upload-content" }, ae = { key: 0 }, le = {
155
155
  key: 1,
156
156
  class: "selected-files"
157
- }, se = { class: "file-name" }, oe = { class: "file-size" }, re = {
157
+ }, te = { class: "file-name" }, se = { class: "file-size" }, oe = {
158
158
  key: 0,
159
159
  class: "error-message"
160
- }, ne = {
160
+ }, re = {
161
161
  key: 1,
162
162
  class: "progress-bar"
163
- }, ie = 20 * 1024 * 1024, ue = /* @__PURE__ */ z({
163
+ }, ne = 20 * 1024 * 1024, ie = /* @__PURE__ */ z({
164
164
  __name: "FileUpload",
165
165
  props: {
166
166
  icon: {},
167
167
  uploadUrl: {}
168
168
  },
169
169
  emits: ["upload-complete", "upload-error", "files-selected", "start-upload"],
170
- setup(v, { emit: b }) {
171
- const r = v, p = b, h = u(null), t = u([]), f = u(!1), y = u(0), i = u(""), d = u(null), k = (l) => {
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
172
  if (l === 0) return "0 Bytes";
173
173
  const a = 1024, n = ["Bytes", "KB", "MB", "GB"], w = Math.floor(Math.log(l) / Math.log(a));
174
174
  return parseFloat((l / Math.pow(a, w)).toFixed(2)) + " " + n[w];
175
- }, T = (l) => l.size > ie ? (i.value = `File "${l.name}" exceeds the maximum size of 20MB`, !1) : !0, C = () => {
176
- f.value = !0;
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
177
  }, D = () => {
178
- f.value = !1;
178
+ v.value = !1;
179
179
  }, E = (l) => {
180
180
  var a;
181
- if (f.value = !1, i.value = "", (a = l.dataTransfer) != null && a.files) {
181
+ if (v.value = !1, i.value = "", (a = l.dataTransfer) != null && a.files) {
182
182
  const n = Array.from(l.dataTransfer.files);
183
183
  n.every(T) && (t.value = [...t.value, ...n]);
184
184
  }
185
185
  }, S = () => {
186
186
  var l;
187
- (l = h.value) == null || l.click();
188
- }, F = (l) => {
187
+ (l = f.value) == null || l.click();
188
+ }, $ = (l) => {
189
189
  i.value = "";
190
190
  const a = l.target;
191
191
  if (a.files) {
@@ -209,13 +209,13 @@ const O = ["for"], X = ["id", "type", "value", "placeholder", "required", "disab
209
209
  try {
210
210
  const a = new XMLHttpRequest();
211
211
  a.upload.addEventListener("progress", (n) => {
212
- n.lengthComputable && (y.value = n.loaded / n.total * 100);
212
+ n.lengthComputable && (g.value = n.loaded / n.total * 100);
213
213
  }), a.addEventListener("load", () => {
214
214
  if (a.status >= 200 && a.status < 300)
215
215
  d.value = {
216
216
  type: "success",
217
217
  message: "Upload completed successfully"
218
- }, p("upload-complete", t.value), t.value = [], y.value = 0;
218
+ }, p("upload-complete", t.value), t.value = [], g.value = 0;
219
219
  else
220
220
  throw new Error(`Upload failed with status ${a.status}`);
221
221
  }), a.addEventListener("error", () => {
@@ -228,73 +228,68 @@ const O = ["for"], X = ["id", "type", "value", "placeholder", "required", "disab
228
228
  message: n
229
229
  }, p("upload-error", n);
230
230
  }
231
- }, _ = () => {
231
+ }, y = () => {
232
232
  p("start-upload", t.value);
233
233
  };
234
234
  return N(t, (l) => {
235
235
  l.length > 0 && (r.uploadUrl ? e() : p("files-selected", l));
236
236
  }), (l, a) => {
237
237
  const n = A("font-awesome-icon");
238
- return o(), s("div", ee, [
239
- m("div", {
240
- class: I(["upload-area", { "is-dragging": f.value, "has-files": t.value.length > 0 }]),
241
- onDragenter: $(C, ["prevent"]),
242
- onDragleave: $(D, ["prevent"]),
243
- onDragover: a[0] || (a[0] = $(() => {
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(() => {
244
244
  }, ["prevent"])),
245
- onDrop: $(E, ["prevent"]),
245
+ onDrop: F(E, ["prevent"]),
246
246
  onClick: S
247
247
  }, [
248
- m("input", {
248
+ h("input", {
249
249
  ref_key: "fileInput",
250
- ref: h,
250
+ ref: f,
251
251
  type: "file",
252
252
  multiple: "",
253
253
  class: "file-input",
254
- onChange: F
254
+ onChange: $
255
255
  }, null, 544),
256
- m("div", ae, [
256
+ h("div", ee, [
257
257
  U(n, {
258
258
  icon: ["fas", l.icon || "upload"]
259
259
  }, null, 8, ["icon"]),
260
- t.value.length === 0 ? (o(), s("p", le, "Drag & drop files here or click to select")) : (o(), s("div", te, [
261
- m("p", null, g(t.value.length) + " file(s) selected", 1),
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
262
  (o(!0), s(P, null, R(t.value, (w, W) => (o(), s("div", {
263
263
  key: W,
264
264
  class: "file-info"
265
265
  }, [
266
- m("span", se, g(w.name), 1),
267
- m("span", oe, g(k(w.size)), 1)
266
+ h("span", te, m(w.name), 1),
267
+ h("span", se, m(k(w.size)), 1)
268
268
  ]))), 128))
269
269
  ]))
270
270
  ])
271
271
  ], 34),
272
- i.value ? (o(), s("div", re, g(i.value), 1)) : c("", !0),
273
- y.value > 0 && y.value < 100 ? (o(), s("div", ne, [
274
- m("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", {
275
275
  class: "progress",
276
- style: L({ width: `${y.value}%` })
276
+ style: L({ width: `${g.value}%` })
277
277
  }, null, 4)
278
278
  ])) : c("", !0),
279
279
  d.value ? (o(), s("div", {
280
280
  key: 2,
281
281
  class: I(["status-message", d.value.type])
282
- }, g(d.value.message), 3)) : c("", !0),
282
+ }, m(d.value.message), 3)) : c("", !0),
283
283
  t.value.length > 0 && !l.uploadUrl ? (o(), s("button", {
284
284
  key: 3,
285
285
  class: "upload-button",
286
- onClick: _
286
+ onClick: y
287
287
  }, " Upload Files ")) : c("", !0)
288
288
  ]);
289
289
  };
290
290
  }
291
- }), de = /* @__PURE__ */ V(ue, [["__scopeId", "data-v-75b2aeea"]]), pe = {
292
- install: (v) => {
293
- v.component("TextInput", x), v.component("FileUpload", de);
294
- }
295
- };
291
+ }), ce = /* @__PURE__ */ V(ie, [["__scopeId", "data-v-75b2aeea"]]);
296
292
  export {
297
- de as FileUpload,
298
- x as TextInput,
299
- pe as default
293
+ ce as FileUpload,
294
+ de as TextInput
300
295
  };
@@ -1 +1 @@
1
- (function(d,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(d=typeof globalThis<"u"?globalThis:d||self,e(d.VueInputComponents={},d.Vue))})(this,function(d,e){"use strict";const S=["for"],D=["id","type","value","placeholder","required","disabled"],F=["id","value","placeholder","required","disabled"],U={key:3,class:"status-indicator required-indicator"},$={key:0,class:"status-indicator saved-indicator"},I={key:0,class:"status-indicator changed-indicator"},M={key:4,class:"error-message"},z={key:5,class:"message success-message"},q=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(p,{emit:g}){const n=p,c=g,m=e.computed(()=>`input-${Math.random().toString(36).substr(2,9)}`),a=e.ref(!1),u=e.ref(!1),f=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`}:{}:{}),E=async t=>{if(n.autosave)try{await n.autosave(t),n.error||(c("saved"),a.value=!0,u.value=!1,setTimeout(()=>{a.value=!1},3e3))}catch(h){console.error("Autosave failed:",h)}},b=t=>{r.value&&clearTimeout(r.value),i.value&&clearTimeout(i.value),n.error||(u.value=!0),i.value=window.setTimeout(()=>{c("changed"),f.value=!0},500),r.value=window.setTimeout(()=>{E(t)},1500)},w=()=>{var t;(t=k.value)==null||t.focus()},V=t=>{t.style.height="auto",t.style.height=`${t.scrollHeight}px`},_=t=>{const h=t.target.value;c("update:modelValue",h),b(h),V(t.target)};return e.onUnmounted(()=>{r.value&&clearTimeout(r.value),i.value&&clearTimeout(i.value)}),(t,h)=>{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:m.value,class:"label"},e.toDisplayString(t.label),9,S)):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:m.value,value:t.modelValue,placeholder:t.placeholder,required:t.required,disabled:t.disabled,class:"input",onInput:_,ref_key:"inputRef",ref:k},null,40,F)):(e.openBlock(),e.createElementBlock("input",{key:1,id:m.value,type:t.type,value:t.modelValue,placeholder:t.placeholder,required:t.required,disabled:t.disabled,class:"input",onInput:_,ref_key:"inputRef",ref:k},null,40,D)),t.required&&!a.value&&!u.value?(e.openBlock(),e.createElementBlock("span",U,"required")):e.createCommentVNode("",!0),e.createVNode(e.Transition,{name:"fade"},{default:e.withCtx(()=>[a.value&&!t.error?(e.openBlock(),e.createElementBlock("span",$,"saved")):e.createCommentVNode("",!0)]),_:1}),e.createVNode(e.Transition,{name:"fade"},{default:e.withCtx(()=>[u.value&&!t.error?(e.openBlock(),e.createElementBlock("span",I,"changed")):e.createCommentVNode("",!0)]),_:1}),t.error?(e.openBlock(),e.createElementBlock("div",M,e.toDisplayString(t.error),1)):e.createCommentVNode("",!0),t.success?(e.openBlock(),e.createElementBlock("span",z,e.toDisplayString(t.success),1)):e.createCommentVNode("",!0)],2)],6)}}}),C=(p,g)=>{const n=p.__vccOpts||p;for(const[c,m]of g)n[c]=m;return n},N=C(q,[["__scopeId","data-v-cc2497d0"]]),v={class:"file-upload"},A={class:"upload-content"},L={key:0},P={key:1,class:"selected-files"},W={class:"file-name"},H={class:"file-size"},R={key:0,class:"error-message"},j={key:1,class:"progress-bar"},O=20*1024*1024,T=C(e.defineComponent({__name:"FileUpload",props:{icon:{},uploadUrl:{}},emits:["upload-complete","upload-error","files-selected","start-upload"],setup(p,{emit:g}){const n=p,c=g,m=e.ref(null),a=e.ref([]),u=e.ref(!1),f=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>O?(r.value=`File "${l.name}" exceeds the maximum size of 20MB`,!1):!0,E=()=>{u.value=!0},b=()=>{u.value=!1},w=l=>{var o;if(u.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=m.value)==null||l.click()},_=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&&(f.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=[],f.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)}},h=()=>{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",v,[e.createElementVNode("div",{class:e.normalizeClass(["upload-area",{"is-dragging":u.value,"has-files":a.value.length>0}]),onDragenter:e.withModifiers(E,["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:m,type:"file",multiple:"",class:"file-input",onChange:_},null,544),e.createElementVNode("div",A,[e.createVNode(s,{icon:["fas",l.icon||"upload"]},null,8,["icon"]),a.value.length===0?(e.openBlock(),e.createElementBlock("p",L,"Drag & drop files here or click to select")):(e.openBlock(),e.createElementBlock("div",P,[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,G)=>(e.openBlock(),e.createElementBlock("div",{key:G,class:"file-info"},[e.createElementVNode("span",W,e.toDisplayString(y.name),1),e.createElementVNode("span",H,e.toDisplayString(k(y.size)),1)]))),128))]))])],34),r.value?(e.openBlock(),e.createElementBlock("div",R,e.toDisplayString(r.value),1)):e.createCommentVNode("",!0),f.value>0&&f.value<100?(e.openBlock(),e.createElementBlock("div",j,[e.createElementVNode("div",{class:"progress",style:e.normalizeStyle({width:`${f.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:h}," Upload Files ")):e.createCommentVNode("",!0)])}}}),[["__scopeId","data-v-75b2aeea"]]),X={install:p=>{p.component("TextInput",N),p.component("FileUpload",T)}};d.FileUpload=T,d.TextInput=N,d.default=X,Object.defineProperties(d,{__esModule:{value:!0},[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,14 +1,14 @@
1
1
  {
2
2
  "name": "@a-vision-software/vue-input-components",
3
- "version": "1.1.1",
3
+ "version": "1.1.4",
4
4
  "description": "A collection of reusable Vue 3 input components with TypeScript support",
5
5
  "type": "module",
6
6
  "main": "./dist/vue-input-components.umd.js",
7
7
  "module": "./dist/vue-input-components.es.js",
8
- "types": "./dist/index.d.ts",
8
+ "types": "./dist/types.d.ts",
9
9
  "exports": {
10
10
  ".": {
11
- "types": "./dist/index.d.ts",
11
+ "types": "./dist/types.d.ts",
12
12
  "import": "./dist/vue-input-components.es.js",
13
13
  "require": "./dist/vue-input-components.umd.js"
14
14
  },
@@ -21,9 +21,9 @@
21
21
  ],
22
22
  "scripts": {
23
23
  "dev": "vite",
24
- "build": "run-p type-check \"build-only {@}\" --",
24
+ "build": "run-p type-check \"build-only {@}\" -- && node -e \"require('fs').copyFileSync('src/types.d.ts', 'dist/types.d.ts')\"",
25
25
  "preview": "vite preview",
26
- "build-only": "vite build && vue-tsc --declaration --emitDeclarationOnly",
26
+ "build-only": "vite build",
27
27
  "type-check": "vue-tsc --noEmit",
28
28
  "lint": "eslint . --fix",
29
29
  "format": "prettier --write src/"
@@ -62,7 +62,9 @@
62
62
  "prettier": "3.5.3",
63
63
  "typescript": "~5.8.0",
64
64
  "vite": "^6.2.4",
65
+ "vite-plugin-dts": "^4.5.3",
65
66
  "vite-plugin-vue-devtools": "^7.7.2",
67
+ "vue-router": "^4.5.0",
66
68
  "vue-tsc": "^2.2.8"
67
69
  }
68
70
  }