@a-vision-software/vue-input-components 1.1.30 → 1.1.31

package/dist/index.d.ts

@@ -1,58 +1,96 @@
 import { ComponentOptionsMixin } from 'vue';
 import { ComponentProvideOptions } from 'vue';
 import { DefineComponent } from 'vue';
+import { ExtractPropTypes } from 'vue';
+import { PropType } from 'vue';
 import { PublicProps } from 'vue';
 
-declare type __VLS_Props = {
-    modelValue: string;
-    label?: string;
-    type?: string;
-    icon?: string;
-    placeholder?: string;
-    required?: boolean;
-    disabled?: boolean;
-    error?: string;
-    success?: string;
-    labelPosition?: 'top' | 'left';
-    labelAlign?: 'left' | 'right' | 'center';
-    totalWidth?: string;
-    inputWidth?: string;
-    labelWidth?: string;
-    autosave?: (value: string) => Promise<void>;
-    isTextarea?: boolean;
-    maxHeight?: string;
-    height?: string;
+declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+
+declare type __VLS_NonUndefinedable_2<T> = T extends undefined ? never : T;
+
+declare type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: PropType<T[K]>;
+        required: true;
+    };
 };
 
-declare type __VLS_Props_2 = {
-    icon?: string;
-    uploadUrl?: string;
+declare type __VLS_TypePropsToRuntimeProps_2<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: PropType<__VLS_NonUndefinedable_2<T[K]>>;
+    } : {
+        type: PropType<T[K]>;
+        required: true;
+    };
 };
 
-export declare const FileUpload: DefineComponent<__VLS_Props_2, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
-"upload-complete": (files: File[]) => any;
-"upload-error": (error: string) => any;
-"files-selected": (files: File[]) => any;
-"start-upload": (files: File[]) => any;
-}, string, PublicProps, Readonly<__VLS_Props_2> & Readonly<{
+export declare const FileUpload: DefineComponent<ExtractPropTypes<__VLS_TypePropsToRuntimeProps_2<{
+icon?: string | undefined;
+uploadUrl?: string | undefined;
+}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+"upload-complete": (files: File[]) => void;
+"upload-error": (error: string) => void;
+"files-selected": (files: File[]) => void;
+"start-upload": (files: File[]) => void;
+}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps_2<{
+icon?: string | undefined;
+uploadUrl?: string | undefined;
+}>>> & Readonly<{
 "onUpload-complete"?: ((files: File[]) => any) | undefined;
 "onUpload-error"?: ((error: string) => any) | undefined;
 "onFiles-selected"?: ((files: File[]) => any) | undefined;
 "onStart-upload"?: ((files: File[]) => any) | undefined;
-}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {
-fileInput: HTMLInputElement;
-}, HTMLDivElement>;
+}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 
-export declare const TextInput: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
-"update:modelValue": (value: string) => any;
-changed: () => any;
-saved: () => any;
-}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{
+export declare const TextInput: DefineComponent<ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+modelValue: string;
+label?: string | undefined;
+type?: string | undefined;
+icon?: string | undefined;
+placeholder?: string | undefined;
+required?: boolean | undefined;
+disabled?: boolean | undefined;
+error?: string | undefined;
+success?: string | undefined;
+labelPosition?: "top" | "left" | undefined;
+labelAlign?: "left" | "right" | "center" | undefined;
+totalWidth?: string | undefined;
+inputWidth?: string | undefined;
+labelWidth?: string | undefined;
+autosave?: ((value: string) => Promise<void>) | undefined;
+isTextarea?: boolean | undefined;
+maxHeight?: string | undefined;
+height?: string | undefined;
+}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+"update:modelValue": (value: string) => void;
+changed: () => void;
+saved: () => void;
+}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+modelValue: string;
+label?: string | undefined;
+type?: string | undefined;
+icon?: string | undefined;
+placeholder?: string | undefined;
+required?: boolean | undefined;
+disabled?: boolean | undefined;
+error?: string | undefined;
+success?: string | undefined;
+labelPosition?: "top" | "left" | undefined;
+labelAlign?: "left" | "right" | "center" | undefined;
+totalWidth?: string | undefined;
+inputWidth?: string | undefined;
+labelWidth?: string | undefined;
+autosave?: ((value: string) => Promise<void>) | undefined;
+isTextarea?: boolean | undefined;
+maxHeight?: string | undefined;
+height?: string | undefined;
+}>>> & Readonly<{
 "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 onChanged?: (() => any) | undefined;
 onSaved?: (() => any) | undefined;
-}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {
-inputRef: HTMLTextAreaElement;
-}, HTMLDivElement>;
+}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 
 export { }

package/package.json

@@ -1,10 +1,32 @@
 {
   "name": "@a-vision-software/vue-input-components",
-  "version": "1.1.30",
+  "version": "1.1.31",
   "description": "A collection of reusable Vue 3 input components with TypeScript support",
+  "author": "A-Vision Software",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/a-vision-software/vue-input-components"
+  },
+  "bugs": {
+    "url": "https://github.com/a-vision-software/vue-input-components/issues"
+  },
+  "homepage": "https://github.com/a-vision-software/vue-input-components#readme",
+  "keywords": [
+    "vue",
+    "vue3",
+    "components",
+    "input",
+    "form",
+    "typescript",
+    "file-upload",
+    "text-input",
+    "textarea"
+  ],
   "type": "module",
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "main": "./dist/vue-input-components.umd.js",
   "module": "./dist/vue-input-components.es.js",
@@ -23,50 +45,46 @@
   ],
   "scripts": {
     "dev": "vite",
-    "build": "run-p type-check \"build-only {@}\" --",
-    "preview": "vite preview",
+    "build": "npm run type-check && npm run build-only",
     "build-only": "vite build",
     "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"
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix",
+    "format": "prettier --write \"src/**/*.{ts,tsx,vue,css}\"",
+    "test": "vitest",
+    "prepublishOnly": "npm run build"
   },
   "peerDependencies": {
-    "vue": "^3.5.13"
+    "vue": "^3.5.0"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.7.0",
+    "@fortawesome/free-regular-svg-icons": "^6.7.0",
+    "@fortawesome/free-solid-svg-icons": "^6.7.0",
+    "@fortawesome/vue-fontawesome": "^3.0.0"
   },
   "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-dts": "^4.5.3",
-    "vite-plugin-vue-devtools": "^7.7.2",
-    "vue-router": "^4.5.0",
-    "vue-tsc": "^2.2.8"
+    "@tsconfig/node20": "^20.1.2",
+    "@types/node": "^20.11.0",
+    "@vitejs/plugin-vue": "^5.0.0",
+    "@vue/eslint-config-prettier": "^9.0.0",
+    "@vue/eslint-config-typescript": "^12.0.0",
+    "@vue/test-utils": "^2.4.0",
+    "@vue/tsconfig": "^0.5.1",
+    "eslint": "^8.56.0",
+    "eslint-plugin-vue": "^9.21.0",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^3.2.0",
+    "typescript": "~5.3.0",
+    "vite": "^5.0.0",
+    "vite-plugin-dts": "^3.7.0",
+    "vitest": "^1.2.0",
+    "vue-router": "^4.2.0",
+    "vue-tsc": "^1.8.0"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
   }
 }

package/src/App.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { RouterView } from 'vue-router'
+</script>
+
+<template>
+  <div id="app">
+    <router-view />
+  </div>
+</template>
+
+<style>
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  padding: 0;
+  margin: 0;
+  font-family:
+    'Inter',
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    'Fira Sans',
+    'Droid Sans',
+    'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+#app {
+  min-height: 100vh;
+  width: 100vw;
+  display: grid;
+  grid-template-rows: 1fr;
+  grid-template-columns: 1fr;
+}
+</style>

package/src/assets/colors.css

@@ -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);
+}

package/src/assets/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>

package/src/assets/main.css

@@ -0,0 +1,160 @@
+:root {
+  /* Typography */
+  --font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.875rem;
+  --font-size-base: 1rem;
+  --font-size-lg: 1.125rem;
+  --font-size-xl: 1.25rem;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-bold: 600;
+  --line-height-tight: 1.25;
+  --line-height-base: 1.5;
+  --line-height-loose: 1.75;
+
+  /* Spacing */
+  --spacing-xs: 0.25rem;
+  --spacing-sm: 0.5rem;
+  --spacing-md: 1rem;
+  --spacing-lg: 1.5rem;
+  --spacing-xl: 2rem;
+
+  /* Borders */
+  --border-radius-sm: 0.25rem;
+  --border-radius-md: 0.375rem;
+  --border-radius-lg: 0.5rem;
+  --border-width: 1px;
+  --border-width-thick: 2px;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.1);
+
+  /* Transitions */
+  --transition-fast: 150ms;
+  --transition-base: 200ms;
+  --transition-slow: 300ms;
+  --transition-timing: ease-in-out;
+}
+
+/* Base styles */
+html {
+  box-sizing: border-box;
+  font-size: 16px;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: var(--font-family);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-base);
+  color: var(--text-color);
+  background-color: var(--background-color);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-tight);
+  color: var(--text-color);
+}
+
+p {
+  margin: 0 0 var(--spacing-md) 0;
+}
+
+a {
+  color: var(--primary-color);
+  text-decoration: none;
+  transition: color var(--transition-base) var(--transition-timing);
+}
+
+a:hover {
+  color: var(--primary-color-light);
+}
+
+/* Utility classes */
+.text-error {
+  color: var(--error-color);
+}
+
+.text-success {
+  color: var(--success-color);
+}
+
+.text-warning {
+  color: var(--warning-color);
+}
+
+.text-disabled {
+  color: var(--disabled-color);
+}
+
+.bg-card {
+  background-color: var(--card-bg);
+}
+
+.shadow-sm {
+  box-shadow: var(--shadow-sm);
+}
+
+.shadow-md {
+  box-shadow: var(--shadow-md);
+}
+
+.shadow-lg {
+  box-shadow: var(--shadow-lg);
+}
+
+.rounded-sm {
+  border-radius: var(--border-radius-sm);
+}
+
+.rounded-md {
+  border-radius: var(--border-radius-md);
+}
+
+.rounded-lg {
+  border-radius: var(--border-radius-lg);
+}
+
+/* Responsive breakpoints */
+@media (max-width: 640px) {
+  html {
+    font-size: 14px;
+  }
+}
+
+@media (min-width: 1200px) {
+  html {
+    font-size: 16px;
+  }
+}
+
+/* Print styles */
+@media print {
+  body {
+    background: white;
+  }
+
+  @page {
+    margin: 2cm;
+  }
+}