@a-vision-software/vue-input-components 1.2.5 → 1.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a-vision-software/vue-input-components",
-  "version": "1.2.5",
+  "version": "1.2.6",
   "description": "A collection of reusable Vue 3 input components with TypeScript support",
   "author": "A-Vision Software",
   "license": "MIT",
@@ -22,7 +22,7 @@
   ],
   "type": "module",
   "files": [
-    "src/components",
+    "src",
     "dist"
   ],
   "main": "./dist/vue-input-components.cjs.js",

package/src/App.vue

@@ -0,0 +1,7 @@
+<template>
+  <router-view />
+</template>
+
+<script setup lang="ts">
+// Component logic will be added here
+</script>

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

package/src/env.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly BASE_URL: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}

package/src/index.ts

@@ -0,0 +1,8 @@
+import TextInput from './components/TextInput.vue'
+import FileUpload from './components/FileUpload.vue'
+import Navigation from './components/Navigation.vue'
+import Action from './components/Action.vue'
+
+export { TextInput, FileUpload, Navigation, Action }
+
+export * from './types'

package/src/main.ts

@@ -0,0 +1,21 @@
+import { createApp } from 'vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { fas } from '@fortawesome/free-solid-svg-icons'
+import { far } from '@fortawesome/free-regular-svg-icons'
+
+import App from './App.vue'
+import router from './router'
+
+import './assets/colors.css'
+import './assets/main.css'
+
+// Add all solid icons to the library
+library.add(fas, far)
+
+const app = createApp(App)
+
+app.use(router)
+app.component('font-awesome-icon', FontAwesomeIcon)
+
+app.mount('#app')

package/src/router/index.ts

@@ -0,0 +1,44 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import TextInputTestView from '../views/TextInputTestView.vue'
+import FileUploadTestView from '../views/FileUploadTestView.vue'
+import ActionTestView from '../views/ActionTestView.vue'
+import DashboardView from '../views/DashboardView.vue'
+import NavigationTestView from '../views/NavigationTestView.vue'
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: '/',
+      name: 'dashboard',
+      component: DashboardView,
+      meta: { title: 'Dashboard' },
+    },
+    {
+      path: '/text-input',
+      name: 'text-input',
+      component: TextInputTestView,
+      meta: { title: 'Text Input Test' },
+    },
+    {
+      path: '/file-upload',
+      name: 'file-upload',
+      component: FileUploadTestView,
+      meta: { title: 'File Upload Test' },
+    },
+    {
+      path: '/action',
+      name: 'action',
+      component: ActionTestView,
+      meta: { title: 'Action Test' },
+    },
+    {
+      path: '/navigation',
+      name: 'navigation',
+      component: NavigationTestView,
+      meta: { title: 'Navigation Test' },
+    },
+  ],
+})
+
+export default router

package/src/types/index.ts

@@ -0,0 +1,3 @@
+import type { NavigationProps, NavigationItem } from './navigation'
+
+export type { NavigationProps, NavigationItem }

package/src/types/navigation.ts

@@ -0,0 +1,32 @@
+export interface NavigationItem {
+  id: string
+  label: string
+  url?: string
+  icon?: string
+  disabled?: boolean
+  alignment?: 'left' | 'right' | 'start' | 'end'
+  width?: string
+  children?: NavigationItem[]
+}
+
+export interface NavigationProps {
+  items: NavigationItem[]
+  type?: 'tiles' | 'dropdowns'
+  orientation?: 'horizontal' | 'vertical'
+  activeItem?: string
+  color?: string
+  hoverColor?: string
+  activeColor?: string
+  disabledColor?: string
+  gap?: string
+  padding?: string
+  borderRadius?: string
+  height?: string
+  width?: string
+  backgroundColor?: string
+  activeBackgroundColor?: string
+  activeItemAlignment?: 'left' | 'right' | 'top' | 'bottom'
+  showBottomBorder?: boolean
+  bottomBorderColor?: string
+  iconSize?: 'normal' | 'large'
+}

package/src/types.d.ts

@@ -0,0 +1,23 @@
+declare module '@a-vision-software/vue-input-components' {
+  import { DefineComponent } from 'vue'
+
+  export const TextInput: DefineComponent<{
+    modelValue?: string
+    label?: string
+    placeholder?: string
+    required?: boolean
+    disabled?: boolean
+    error?: string
+  }>
+
+  export const FileUpload: DefineComponent<{
+    modelValue?: File[]
+    maxFiles?: number
+    maxFileSize?: number
+    accept?: string
+    uploadUrl?: string
+    required?: boolean
+    disabled?: boolean
+    error?: string
+  }>
+}

package/src/types.ts

@@ -0,0 +1,108 @@
+import type { Component } from 'vue'
+
+export interface TextInputProps {
+  modelValue: string
+  type?: 'text' | 'password' | 'email' | 'number' | 'tel' | 'url' | 'date'
+  label?: string
+  placeholder?: string
+  icon?: string
+  disabled?: boolean
+  readonly?: boolean
+  maxlength?: number
+  error?: string
+  min?: string
+  max?: string
+  required?: boolean
+  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
+}
+
+export interface FileUploadProps {
+  modelValue: File[]
+  label?: string
+  placeholder?: string
+  error?: string
+  disabled?: boolean
+  required?: boolean
+  multiple?: boolean
+  accept?: string
+  maxSize?: number
+  uploadUrl?: string
+}
+
+export interface FileUploadEmits {
+  (e: 'update:modelValue', files: File[]): void
+  (e: 'files-selected', files: File[]): void
+  (e: 'start-upload', files: File[]): void
+  (e: 'upload-progress', progress: number): void
+  (e: 'upload-success', response: any): void
+  (e: 'upload-error', error: Error): void
+}
+
+export type TextInputComponent = {
+  focus: () => void
+  blur: () => void
+}
+
+export type FileUploadComponent = Component<FileUploadProps>
+
+export interface ActionProps {
+  icon?: string
+  label?: string
+  href?: string
+  type?: 'button' | 'submit' | 'reset'
+  disabled?: boolean
+  color?: string
+  size?: 'small' | 'regular' | 'large'
+  variant?: 'solid' | 'transparent'
+}
+
+export type ActionComponent = {
+  focus: () => void
+  blur: () => void
+}
+
+export interface NavigationItem {
+  id: string
+  label: string
+  icon?: string
+  url?: string
+  children?: NavigationItem[]
+  type?: 'tile' | 'tab' | 'dropdown'
+  color?: string
+  disabled?: boolean
+  alignment?: 'start' | 'end'
+}
+
+export interface NavigationProps {
+  items: NavigationItem[]
+  type?: 'tiles' | 'tabs' | 'dropdowns'
+  orientation?: 'horizontal' | 'vertical'
+  activeItem?: string
+  color?: string
+  hoverColor?: string
+  activeColor?: string
+  disabledColor?: string
+  iconSize?: string
+  gap?: string
+  padding?: string
+  borderRadius?: string
+  showIcons?: boolean
+  activeItemAlignment?: 'start' | 'end'
+}
+
+export interface NavigationComponent {
+  props: NavigationProps
+  emits: {
+    (e: 'item-click', item: NavigationItem): void
+    (e: 'update:activeItem', id: string): void
+  }
+}