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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a-vision-software/vue-input-components",
-  "version": "1.2.4",
+  "version": "1.2.6",
   "description": "A collection of reusable Vue 3 input components with TypeScript support",
   "author": "A-Vision Software",
   "license": "MIT",
@@ -22,6 +22,7 @@
   ],
   "type": "module",
   "files": [
+    "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/components/Action.vue

@@ -0,0 +1,208 @@
+<template>
+  <component
+    :is="isLink ? 'a' : 'button'"
+    :href="isLink ? href : undefined"
+    :type="isLink ? undefined : type"
+    :class="[
+      'action',
+      {
+        'action--icon-only': icon && !label,
+        'action--label-only': !icon && label,
+        'action--icon-label': icon && label,
+        'action--disabled': disabled,
+        'action--link': isLink,
+        'action--small': size === 'small',
+        'action--large': size === 'large',
+        'action--transparent': variant === 'transparent',
+      },
+    ]"
+    :style="buttonStyle"
+    :disabled="disabled"
+    @click="handleClick"
+  >
+    <font-awesome-icon v-if="icon" :icon="icon" class="action__icon" />
+    <span v-if="label" class="action__label">{{ label }}</span>
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface ActionProps {
+  icon?: string
+  label?: string
+  href?: string
+  type?: 'button' | 'submit' | 'reset'
+  disabled?: boolean
+  color?: string
+  size?: 'small' | 'regular' | 'large'
+  variant?: 'solid' | 'transparent'
+}
+
+const props = withDefaults(defineProps<ActionProps>(), {
+  icon: undefined,
+  label: undefined,
+  href: undefined,
+  type: 'button',
+  disabled: false,
+  color: 'var(--primary)',
+  size: 'regular',
+  variant: 'solid',
+})
+
+const emit = defineEmits<{
+  (e: 'click', event: MouseEvent): void
+}>()
+
+const isLink = computed(() => !!props.href)
+
+const buttonStyle = computed(() => {
+  if (!props.color) return {}
+
+  if (props.variant === 'transparent') {
+    return {
+      backgroundColor: 'rgba(255, 255, 255, 0.1)',
+      color: props.color,
+      borderColor: props.color,
+    }
+  }
+
+  return props.href
+    ? {
+        color: props.color,
+        borderColor: 'transparent',
+        backgroundColor: 'transparent',
+      }
+    : {
+        color: 'rgba(255, 255, 255, 0.8)',
+        borderColor: props.color,
+        backgroundColor: props.color,
+      }
+})
+
+const handleClick = (event: MouseEvent) => {
+  if (!props.disabled) {
+    emit('click', event)
+  }
+}
+</script>
+
+<style scoped>
+.action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  border: 1px solid;
+  border-radius: 0.375rem;
+  font-size: 1rem;
+  font-weight: 500;
+  text-decoration: none;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+}
+
+/* Size variants */
+.action--small {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.8rem;
+  border-radius: 0.25rem;
+  gap: 0.25rem;
+  min-height: 1.5rem;
+}
+
+.action--small.action--icon-only {
+  padding: 0.375rem;
+  min-width: 1.5rem;
+}
+
+.action--small .action__icon {
+  font-size: 0.9rem;
+  width: 0.9rem;
+  height: 0.9rem;
+}
+
+.action--large {
+  padding: 0.75rem 1.5rem;
+  font-size: 1.25rem;
+  border-radius: 0.5rem;
+  gap: 0.625rem;
+  min-height: 2.5rem;
+}
+
+.action--large.action--icon-only {
+  padding: 1rem;
+  min-width: 2.5rem;
+}
+
+.action--large .action__icon {
+  font-size: 1.35rem;
+  width: 1.35rem;
+  height: 1.35rem;
+}
+
+.action:hover:not(.action--disabled) {
+  opacity: 0.9;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.action:active:not(.action--disabled) {
+  transform: translateY(0);
+  box-shadow: none;
+}
+
+.action--icon-only {
+  padding: 0.75rem;
+  border-radius: 50%;
+  aspect-ratio: 1;
+}
+
+.action--label-only {
+  padding: 0.5rem 1rem;
+}
+
+.action--icon-label {
+  padding: 0.5rem 1rem;
+}
+
+.action--disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.action--link {
+  background-color: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+  transform: none !important;
+}
+
+.action--link:hover:not(.action--disabled) {
+  opacity: 0.8;
+  transform: none;
+  box-shadow: none;
+}
+
+.action--link .action__label {
+  text-decoration: underline;
+}
+
+.action--transparent:hover:not(.action--disabled) {
+  background-color: rgba(255, 255, 255, 0.15);
+}
+
+.action__icon {
+  font-size: 1.25rem;
+  width: 1.25rem;
+  height: 1.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.action__label {
+  white-space: nowrap;
+}
+</style>