@a-vision-software/vue-input-components 1.3.26 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@a-vision-software/vue-input-components",
-    "version": "1.3.26",
+    "version": "1.4.0",
     "description": "A collection of reusable Vue 3 input components with TypeScript support",
     "author": "A-Vision Software",
     "license": "MIT",
@@ -8,7 +8,7 @@
         "type": "git",
         "url": "https://github.com/a-vision/vue-input-components.git"
     },
-    "homepage": "https://github.com/a-vision/vue-input-components#readme",
+    "homepage": "https://a-vision.github.io/vue-input-components/",
     "keywords": [
         "vue",
         "vue3",

package/src/assets/colors.css

@@ -1,7 +1,7 @@
 :root {
   /* Base colors */
   --primary-color: #3498db;
-  --primary-color-light: rgb(from var(--primary-color) r g b / 80%);
+  --primary-color-light: rgb(from var(--primary-color) r g b / 60%);
   --secondary-color: #2ecc71;
 
   /* Text colors */
@@ -10,6 +10,8 @@
 
   /* UI colors */
   --border-color: #555555;
+  --modal-border-color: #e0e0e0;
+  --modal-backdrop-color: rgba(0, 0, 0, 0.5);
   --icon-color: rgb(from var(--border-color) r g b / 80%);
 
   /* State colors */

package/src/components/Modal.vue

@@ -0,0 +1,186 @@
+<template>
+  <Teleport to="body">
+    <transition name="modal-fade">
+      <div v-if="modelValue" class="modal-backdrop">
+        <div class="modal" :style="modalStyle" role="dialog" aria-labelledby="modalTitle"
+          aria-describedby="modalContent">
+          <div v-if="props.isLargeIcon && props.icon" class="modal-large-icon">
+            <font-awesome-icon :icon="props.icon" :style="{ color: props.iconColor }" />
+          </div>
+          <div class="modal-header" id="modalTitle">
+            <slot name="header">
+              <div class="header-content">
+                <font-awesome-icon v-if="props.icon && !props.isLargeIcon" :icon="props.icon"
+                  :style="{ color: props.iconColor }" />
+                <h3 v-if="title" :style="{ color: props.titleBarColor }">{{ title }}</h3>
+              </div>
+            </slot>
+            <button type="button" class="modal-close" @click="close" aria-label="Close modal">
+              <font-awesome-icon icon="rectangle-xmark" />
+            </button>
+          </div>
+
+          <div class="modal-body" id="modalContent">
+            <slot></slot>
+          </div>
+
+          <div class="modal-footer">
+            <slot name="footer"></slot>
+          </div>
+        </div>
+      </div>
+    </transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { ModalProps, ModalEmits } from '../types/modal'
+
+const props = withDefaults(defineProps<ModalProps>(), {
+  modelValue: false,
+  title: '',
+  minWidth: '300px',
+  maxWidth: '800px',
+  minHeight: 'auto',
+  maxHeight: '80vh',
+  titleBarColor: 'var(--primary-color, #3498db)',
+  backgroundColor: 'var(--background-color, #f8f9fa)',
+  icon: undefined,
+  isLargeIcon: false,
+  iconColor: 'var(--primary-color, #3498db)'
+})
+
+const emit = defineEmits<ModalEmits>()
+
+const close = () => {
+  emit('update:modelValue', false)
+  emit('close')
+}
+
+const open = () => {
+  emit('update:modelValue', true)
+}
+
+const modalStyle = computed(() => ({
+  minWidth: props.minWidth,
+  maxWidth: props.maxWidth,
+  minHeight: props.minHeight,
+  maxHeight: props.maxHeight,
+  backgroundColor: props.backgroundColor
+}))
+
+defineExpose({
+  open,
+  close
+})
+</script>
+
+<style scoped>
+.modal-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--modal-backdrop-color);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.modal {
+  border-radius: 0.5rem;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
+  display: flex;
+  flex-direction: column;
+  margin: 1rem;
+  width: 100%;
+  overflow: visible;
+  position: relative;
+}
+
+.modal-large-icon {
+  position: absolute;
+  left: 50%;
+  transform: translate(-50%, -75%);
+  background-color: var(--background-color, #ffffff);
+  border-radius: 50%;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  z-index: 1;
+
+  svg {
+    width: 4rem;
+    height: 4rem;
+    margin: 1rem;
+  }
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.header-content .font-awesome-icon {
+  font-size: 1.25rem;
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem;
+  border-bottom: 1px solid var(--modal-border-color, #e0e0e0);
+}
+
+.modal-header h3 {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 500;
+  color: var(--primary-color, #3498db);
+}
+
+.modal-close {
+  background: transparent;
+  border: none;
+  color: var(--text-muted, #00000088);
+  cursor: pointer;
+  font-size: 1.25rem;
+  padding: 0.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.modal-close:hover {
+  opacity: 0.8;
+  color: var(--danger-color, #aa0400);
+}
+
+.modal-body {
+  padding: 1rem;
+  overflow-y: auto;
+  min-height: 50px;
+  flex: 1;
+}
+
+.modal-footer {
+  padding: 1rem;
+  border-top: 1px solid var(--modal-border-color, #e0e0e0);
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+}
+
+.modal-fade-enter-active,
+.modal-fade-leave-active {
+  transition: opacity 0.3s;
+}
+
+.modal-fade-enter-from,
+.modal-fade-leave-to {
+  opacity: 0;
+}
+</style>

package/src/index.ts

@@ -5,7 +5,8 @@ import Action from './components/Action.vue'
 import Dropdown from './components/Dropdown.vue'
 import Checkbox from './components/Checkbox.vue'
 import List from './components/List.vue'
+import Modal from './components/Modal.vue'
 
-export { TextInput, FileUpload, Navigation, Action, Dropdown, Checkbox, List }
+export { TextInput, FileUpload, Navigation, Action, Dropdown, Checkbox, List, Modal }
 
 export * from './types'

package/src/router/index.ts

@@ -7,6 +7,7 @@ import NavigationTestView from '../views/NavigationTestView.vue'
 import DropdownTestView from '../views/DropdownTestView.vue'
 import CheckboxTestView from '../views/CheckboxTestView.vue'
 import ListTestView from '../views/ListTestView.vue'
+import ModalTestView from '../views/ModalTestView.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -59,6 +60,12 @@ const router = createRouter({
       component: ListTestView,
       meta: { title: 'List Test' },
     },
+    {
+      path: '/modal',
+      name: 'modal',
+      component: ModalTestView,
+      meta: { title: 'Modal Test' },
+    },
   ],
 })
 

package/src/types/index.ts

@@ -9,3 +9,4 @@ export * from './navigation'
 export * from './dropdown'
 export * from './checkbox'
 export * from './list'
+export * from './modal'

package/src/types/modal.ts

@@ -0,0 +1,23 @@
+export interface ModalProps {
+  modelValue: boolean
+  title?: string
+  minWidth?: string
+  maxWidth?: string
+  minHeight?: string
+  maxHeight?: string
+  titleBarColor?: string
+  backgroundColor?: string
+  icon?: string
+  isLargeIcon?: boolean
+  iconColor?: string
+}
+
+export interface ModalEmits {
+  (e: 'update:modelValue', value: boolean): void
+  (e: 'close'): void
+}
+
+export interface ModalComponent {
+  open: () => void
+  close: () => void
+}

package/src/views/DashboardView.vue

@@ -52,6 +52,13 @@
         <span class="dashboard__label">Action</span>
         <span class="dashboard__description">Interactive buttons and links with various styles</span>
       </router-link>
+      <router-link to="/modal" class="dashboard__item">
+        <div class="dashboard__icon-wrapper">
+          <font-awesome-icon icon="rectangle-xmark" class="dashboard__icon" />
+        </div>
+        <span class="dashboard__label">Modal</span>
+        <span class="dashboard__description">Popup dialog windows for displaying content and forms</span>
+      </router-link>
     </div>
   </div>
 </template>

package/src/views/ModalTestView.vue

@@ -0,0 +1,201 @@
+<template>
+  <div class="modal-test">
+    <h1>Modal Test</h1>
+    <p class="subtitle">A reusable modal component for displaying content in a popup dialog.</p>
+
+    <div class="section">
+      <h2>Basic Modal</h2>
+      <p>A simple modal with a title and content.</p>
+
+      <Action label="Open Basic Modal" @click="showBasicModal = true" />
+
+      <Modal v-model="showBasicModal" title="Basic Modal Example" icon="info-circle">
+        <p>This is a basic modal example with default styling.</p>
+        <p>The modal can be closed by clicking the X button in the top right corner.</p>
+      </Modal>
+    </div>
+
+    <div class="section">
+      <h2>Custom Styled Modal</h2>
+      <p>A modal with custom styling options and custom header/footer content.</p>
+
+      <Action label="Open Custom Modal" @click="showCustomModal = true" />
+
+      <Modal v-model="showCustomModal" min-width="400px" max-width="600px" title-bar-color="var(--primary-color)"
+        background-color="#f9f9f9" icon="user" is-large-icon iconColor="var(--primary-color-light)">
+        <template #header>
+          <div class="custom-header">
+            <h3>Custom Modal Header</h3>
+          </div>
+        </template>
+
+        <template #footer>
+          <div class="custom-footer">
+            <Action label="Cancel" variant="transparent" @click="showCustomModal = false" />
+            <Action label="Save" @click="saveAndClose" />
+          </div>
+        </template>
+
+        <div class="custom-content">
+          <p>This modal has custom styling and a custom header.</p>
+          <p>You can use slots to customize the header, body, and footer.</p>
+
+          <div class="form-group">
+            <TextInput v-model="inputValue" label="Name" placeholder="Enter your name..." />
+          </div>
+
+          <div class="form-group">
+            <Dropdown v-model="selectedOption" :options="dropdownOptions" label="Select an option"
+              placeholder="Choose an option..." />
+          </div>
+        </div>
+      </Modal>
+    </div>
+
+    <div class="section">
+      <h2>Form Modal Example</h2>
+      <p>A modal containing a form that can be submitted.</p>
+
+      <Action label="Open Form Modal" @click="showFormModal = true" />
+
+      <Modal v-model="showFormModal" title="Form Submission">
+        <form @submit.prevent="submitForm">
+          <div class="form-group">
+            <TextInput v-model="formData.name" label="Name" placeholder="Enter your name" required />
+          </div>
+
+          <div class="form-group">
+            <TextInput v-model="formData.email" label="Email" type="email" placeholder="Enter your email" required />
+          </div>
+
+          <div class="form-group">
+            <TextInput v-model="formData.message" label="Message" type="textarea" placeholder="Enter your message" />
+          </div>
+
+          <div class="form-actions">
+            <Action label="Cancel" variant="transparent" @click="showFormModal = false" />
+            <Action label="Submit" type="submit" />
+          </div>
+        </form>
+      </Modal>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import Modal from '../components/Modal.vue'
+import Action from '../components/Action.vue'
+import TextInput from '../components/TextInput.vue'
+import Dropdown from '../components/Dropdown.vue'
+
+// Basic Modal
+const showBasicModal = ref(false)
+
+// Custom Modal
+const showCustomModal = ref(false)
+const inputValue = ref('')
+const selectedOption = ref('')
+const dropdownOptions = [
+  { id: 'option1', value: 'option1', label: 'Option 1' },
+  { id: 'option2', value: 'option2', label: 'Option 2' },
+  { id: 'option3', value: 'option3', label: 'Option 3' }
+]
+
+// Form Modal
+const showFormModal = ref(false)
+const formData = ref({
+  name: '',
+  email: '',
+  message: ''
+})
+
+// Methods
+const saveAndClose = () => {
+  alert(`Name: ${inputValue.value}\nSelected Option: ${selectedOption.value}`)
+  showCustomModal.value = false
+}
+
+const submitForm = () => {
+  alert(`Form submitted!\nName: ${formData.value.name}\nEmail: ${formData.value.email}\nMessage: ${formData.value.message}`)
+  showFormModal.value = false
+
+  // Reset form
+  formData.value = {
+    name: '',
+    email: '',
+    message: ''
+  }
+}
+</script>
+
+<style scoped>
+.modal-test {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 2rem 1.5rem;
+}
+
+h1 {
+  margin-bottom: 0.5rem;
+  color: var(--text-color);
+}
+
+.subtitle {
+  color: var(--text-muted);
+  margin-bottom: 2rem;
+}
+
+.section {
+  margin-bottom: 2rem;
+  padding: 1.5rem;
+  background-color: var(--background-color, #ffffff);
+  border-radius: 0.5rem;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.section h2 {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+  font-size: 1.25rem;
+}
+
+.section p {
+  margin-bottom: 1rem;
+  color: var(--text-muted);
+}
+
+.custom-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--primary-color, #4AAE9B);
+}
+
+.custom-header h3 {
+  margin: 0;
+  color: var(--primary-color, #4AAE9B);
+}
+
+.custom-content {
+  padding: 1rem 0;
+}
+
+.custom-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  width: 100%;
+}
+
+.form-group {
+  margin-bottom: 1rem;
+}
+
+.form-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  margin-top: 1.5rem;
+}
+</style>