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

package/src/views/NavigationTestView.vue

@@ -0,0 +1,319 @@
+<template>
+  <div class="navigation-test">
+    <div class="navigation-test__back">
+      <router-link to="/" class="back-link"> ← Back to Dashboard </router-link>
+    </div>
+
+    <div class="navigation-test__section">
+      <h2>Tiles Navigation (Default)</h2>
+      <Navigation
+        :items="defaultItems"
+        type="tiles"
+        orientation="horizontal"
+        v-model:activeItem="activeDefaultItem"
+        @item-click="handleDefaultClick"
+        iconSize="large"
+        height="90px"
+        backgroundColor="#fff"
+        activeBackgroundColor="var(--background-color)"
+      />
+      <div v-if="lastClicked.default" class="click-info">
+        Last clicked: {{ lastClicked.default.url || `id:${lastClicked.default.id}` }}
+      </div>
+    </div>
+
+    <div class="navigation-test__section">
+      <h2>Tabs Navigation (Mixed Alignment)</h2>
+      <Navigation
+        :items="mixedAlignmentItems"
+        type="tiles"
+        orientation="horizontal"
+        v-model:activeItem="activeTabsItem"
+        @item-click="handleTabsClick"
+        height="2em"
+        showBottomBorder
+      />
+      <div v-if="lastClicked.tabs" class="click-info">
+        Last clicked: {{ lastClicked.tabs.label }}
+        <span v-if="lastClicked.tabs.alignment">({{ lastClicked.tabs.alignment }} aligned)</span>
+      </div>
+    </div>
+
+    <div class="navigation-test__section">
+      <h2>Dropdown Navigation (Vertical)</h2>
+      <Navigation
+        :items="dropdownItems"
+        type="dropdowns"
+        orientation="vertical"
+        v-model:activeItem="activeDropdownItem"
+        @item-click="handleDropdownClick"
+        :showIcons="false"
+        color="#805ad5"
+        hoverColor="#6b46c1"
+        activeColor="#553c9a"
+        disabledColor="#b794f4"
+        gap="0.5rem"
+        padding="0.75rem 1rem"
+        borderRadius="6px"
+      />
+      <div v-if="lastClicked.dropdown" class="click-info">
+        Last clicked: {{ lastClicked.dropdown.label }}
+        <span v-if="lastClicked.dropdown.children"
+          >(has {{ lastClicked.dropdown.children.length }} children)</span
+        >
+      </div>
+    </div>
+
+    <div class="navigation-test__section">
+      <h2>Custom Styled Navigation</h2>
+      <Navigation
+        :items="customItems"
+        type="tiles"
+        orientation="horizontal"
+        v-model:activeItem="activeCustomItem"
+        @item-click="handleCustomClick"
+        :showIcons="false"
+        color="#4a90e2"
+        hoverColor="#357abd"
+        activeColor="#2c5a8c"
+        disabledColor="#a0c4e8"
+        gap="1.5rem"
+        padding="1rem 2rem"
+        borderRadius="8px"
+      />
+      <div v-if="lastClicked.custom" class="click-info">
+        Last clicked: {{ lastClicked.custom.label }}
+        <span v-if="lastClicked.custom.disabled">(disabled)</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { NavigationItem } from '../types/navigation'
+import Navigation from '@/components/Navigation.vue'
+
+const activeDefaultItem = ref('')
+const activeTabsItem = ref('')
+const activeDropdownItem = ref('')
+const activeCustomItem = ref('')
+
+const lastClicked = ref<Record<string, NavigationItem>>({
+  default: {} as NavigationItem,
+  tabs: {} as NavigationItem,
+  dropdown: {} as NavigationItem,
+  custom: {} as NavigationItem,
+})
+
+const defaultItems: NavigationItem[] = [
+  {
+    id: 'home',
+    label: 'Home',
+    icon: 'house',
+    width: '150px',
+  },
+  {
+    id: 'dashboard',
+    label: 'Dashboard',
+    icon: 'gauge-high',
+    width: '200px',
+  },
+  {
+    id: 'spacer',
+    label: '',
+    width: '1fr',
+  },
+  {
+    id: 'about',
+    label: 'About',
+    url: 'https://example.com',
+    icon: 'info',
+    alignment: 'right',
+    width: '150px',
+    children: [
+      {
+        id: 'about-1',
+        label: 'About 1',
+      },
+      {
+        id: 'about-2',
+        label: 'About 2',
+      },
+    ],
+  },
+  {
+    id: 'contact',
+    label: 'Contact',
+    icon: 'envelope',
+    width: '150px',
+    alignment: 'right',
+  },
+]
+
+const mixedAlignmentItems: NavigationItem[] = [
+  {
+    id: 'home',
+    label: 'Home',
+    url: 'https://example.com',
+    icon: 'house',
+  },
+  {
+    id: 'about',
+    label: 'About',
+    width: '200px',
+    children: [
+      {
+        id: 'about-1',
+        label: 'About 1',
+      },
+      {
+        id: 'about-2',
+        label: 'About 2',
+      },
+    ],
+  },
+  {
+    id: 'spacer',
+    label: '',
+    width: '1fr',
+  },
+  {
+    id: 'contact',
+    label: 'Contact',
+    icon: 'envelope',
+    alignment: 'right',
+  },
+]
+
+const dropdownItems: NavigationItem[] = [
+  {
+    id: 'home',
+    label: 'Home',
+    url: 'https://example.com',
+    alignment: 'start',
+  },
+  {
+    id: 'about',
+    label: 'About',
+    alignment: 'start',
+    children: [
+      {
+        id: 'about-1',
+        label: 'About 1',
+      },
+      {
+        id: 'about-2',
+        label: 'About 2',
+      },
+    ],
+  },
+]
+
+const customItems: NavigationItem[] = [
+  {
+    id: 'home',
+    label: 'Home',
+    url: 'https://example.com',
+    alignment: 'start',
+  },
+  {
+    id: 'about',
+    label: 'About',
+    alignment: 'start',
+    children: [
+      {
+        id: 'about-1',
+        label: 'About 1',
+      },
+      {
+        id: 'about-2',
+        label: 'About 2',
+      },
+    ],
+  },
+  {
+    id: 'contact',
+    label: 'Contact',
+    icon: 'envelope',
+    alignment: 'end',
+    disabled: true,
+  },
+]
+
+const handleDefaultClick = (item: NavigationItem) => {
+  console.log('Default navigation clicked:', item)
+  lastClicked.value.default = item
+  if (item.url) {
+    console.log('Navigating to:', item.url)
+  }
+}
+
+const handleTabsClick = (item: NavigationItem) => {
+  console.log('Tabs navigation clicked:', item)
+  lastClicked.value.tabs = item
+  if (item.url) {
+    console.log('Navigating to:', item.url)
+  }
+}
+
+const handleDropdownClick = (item: NavigationItem) => {
+  console.log('Dropdown navigation clicked:', item)
+  lastClicked.value.dropdown = item
+  if (item.url) {
+    console.log('Navigating to:', item.url)
+  }
+}
+
+const handleCustomClick = (item: NavigationItem) => {
+  console.log('Custom navigation clicked:', item)
+  lastClicked.value.custom = item
+  if (item.url) {
+    console.log('Navigating to:', item.url)
+  }
+}
+</script>
+
+<style scoped>
+.navigation-test {
+  padding: 2rem;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.navigation-test__back {
+  margin-bottom: 2rem;
+}
+
+.back-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: #4a90e2;
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.back-link:hover {
+  color: #357abd;
+}
+
+.navigation-test__section {
+  margin-bottom: 3rem;
+}
+
+.navigation-test__section h2 {
+  margin-bottom: 1rem;
+  color: #333;
+  font-size: 1.5rem;
+}
+
+.click-info {
+  margin-top: 1rem;
+  padding: 0.5rem;
+  background-color: #f7fafc;
+  border-radius: 4px;
+  font-size: 0.9rem;
+  color: #4a5568;
+}
+</style>

package/src/views/TextInputTestView.vue

@@ -0,0 +1,372 @@
+<template>
+  <div class="text-input-test">
+    <div class="header">
+      <router-link to="/" class="back-link">
+        <font-awesome-icon icon="home" />
+        <span>Back to Dashboard</span>
+      </router-link>
+      <h1>Text Input Testing</h1>
+    </div>
+    <div class="test-container">
+      <div class="column">
+        <div class="input-group">
+          <h2>Account Information</h2>
+          <TextInput
+            v-model="username"
+            type="text"
+            icon="user"
+            placeholder="Enter your username"
+            :required="true"
+            :error="usernameError"
+            label="Username"
+            label-position="left"
+            label-align="right"
+            label-width="20%"
+            total-width="100%"
+          />
+          <TextInput
+            v-model="password"
+            type="password"
+            icon="lock"
+            placeholder="Enter your password"
+            :required="true"
+            :error="passwordError"
+            label="Password"
+            label-position="left"
+            label-align="right"
+            label-width="20%"
+            total-width="100%"
+          />
+        </div>
+        <div class="input-group">
+          <h2>Additional Information</h2>
+          <TextInput
+            v-model="bio"
+            isTextarea
+            label="Bio"
+            icon="user-circle"
+            placeholder="Tell us about yourself..."
+            :rows="4"
+            :maxLength="500"
+            :error="bioError"
+            :autosave="handleBioAutosave"
+            label-position="top"
+            label-align="left"
+            total-width="100%"
+            height="10rem"
+            max-height="20rem"
+          />
+          <TextInput
+            v-model="feedback"
+            isTextarea
+            label="Feedback"
+            icon="comment"
+            placeholder="Share your thoughts..."
+            :rows="3"
+            :maxLength="1000"
+            :error="feedbackError"
+            :autosave="handleFeedbackAutosave"
+            label-position="left"
+            label-align="left"
+            label-width="auto"
+            total-width="100%"
+            max-height="8rem"
+          />
+        </div>
+      </div>
+      <div class="column">
+        <div class="input-group">
+          <h2>Address Information</h2>
+          <TextInput
+            v-model="street"
+            label="Street Address"
+            type="text"
+            icon="road"
+            placeholder="Enter your street address"
+            :error="streetError"
+            :autosave="handleStreetAutosave"
+            label-position="top"
+            label-align="left"
+            total-width="100%"
+          />
+          <div class="address-row">
+            <TextInput
+              v-model="city"
+              label="City"
+              type="text"
+              icon="building"
+              placeholder="Enter your city"
+              :error="cityError"
+              :autosave="handleCityAutosave"
+              label-position="top"
+              label-align="left"
+              total-width="calc(100% - 11rem)"
+            />
+            <TextInput
+              v-model="postalCode"
+              label="Postal Code"
+              type="text"
+              icon="fas fa-hashtag"
+              placeholder="1234AB"
+              :error="postalCodeError"
+              @update:modelValue="handlePostalCodeInput"
+              :autosave="handlePostalCodeAutosave"
+              label-position="top"
+              label-align="left"
+              total-width="10rem"
+            />
+          </div>
+          <TextInput
+            v-model="country"
+            label="Country"
+            type="text"
+            icon="flag"
+            placeholder="Enter your country"
+            :error="countryError"
+            :autosave="handleCountryAutosave"
+            label-position="top"
+            label-align="left"
+            total-width="100%"
+          />
+          <TextInput
+            v-model="birthDate"
+            type="date"
+            label="Date of Birth"
+            icon="calendar"
+            placeholder="DD/MM/YYYY"
+            :min="minDate"
+            :max="maxDate"
+            :error="birthDateError"
+            :autosave="handleBirthDateAutosave"
+            label-position="top"
+            label-align="left"
+          />
+          <TextInput
+            v-model="comment"
+            label="Comment"
+            type="text"
+            placeholder="Your comment"
+            label-position="top"
+            label-align="left"
+            total-width="100%"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import TextInput from '@/components/TextInput.vue'
+
+const username = ref('')
+const password = ref('')
+const street = ref('')
+const city = ref('')
+const postalCode = ref('')
+const country = ref('')
+const birthDate = ref('')
+const comment = ref('')
+const bio = ref('')
+const feedback = ref('')
+
+const usernameError = ref('')
+const passwordError = ref('')
+const streetError = ref('')
+const cityError = ref('')
+const postalCodeError = ref('')
+const countryError = ref('')
+const birthDateError = ref('')
+const bioError = ref('')
+const feedbackError = ref('')
+
+const minDate = '01/01/1900'
+const maxDate = '31/12/2024'
+
+const formatPostalCode = (value: string) => {
+  // Remove all non-alphanumeric characters except spaces
+  let formatted = value.replace(/[^a-zA-Z0-9\s]/g, '')
+
+  // Convert to uppercase
+  formatted = formatted.toUpperCase()
+
+  // Format as NNNN AA
+  if (formatted.length > 4) {
+    formatted = formatted.slice(0, 4) + ' ' + formatted.slice(4, 6)
+  }
+
+  return formatted
+}
+
+const handlePostalCodeInput = (_value: string) => {
+  postalCodeError.value = ''
+}
+
+const handlePostalCodeAutosave = async (value: string) => {
+  // First validate the format
+  if (value.length > 0) {
+    const postalCodeRegex = /^[0-9]{4}\s?[A-Za-z]{2}$/
+    if (!postalCodeRegex.test(value)) {
+      postalCodeError.value = 'Postal code must be in format NNNN AA (e.g., 1234 AB)'
+      return
+    }
+  }
+
+  // Format the value after successful validation
+  const formattedValue = formatPostalCode(value)
+  postalCode.value = formattedValue
+
+  await new Promise((resolve) => setTimeout(resolve, 1000))
+  postalCodeError.value = ''
+}
+
+const handleStreetAutosave = async (value: string) => {
+  console.log('Autosaving street:', value)
+  await new Promise((resolve) => setTimeout(resolve, 1000))
+  streetError.value = ''
+}
+
+const handleCityAutosave = async (value: string) => {
+  console.log('Autosaving city:', value)
+  await new Promise((resolve) => setTimeout(resolve, 1000))
+  cityError.value = ''
+}
+
+const handleCountryAutosave = async (value: string) => {
+  console.log('Autosaving country:', value)
+  await new Promise((resolve) => setTimeout(resolve, 1000))
+  countryError.value = ''
+}
+
+const handleBirthDateAutosave = async (value: string) => {
+  console.log('Autosaving birth date:', value)
+  await new Promise((resolve) => setTimeout(resolve, 1000))
+  birthDateError.value = ''
+}
+
+const handleBioAutosave = async (value: string) => {
+  console.log('Autosaving bio:', value)
+  await new Promise((resolve) => setTimeout(resolve, 1000))
+  bioError.value = ''
+}
+
+const handleFeedbackAutosave = async (value: string) => {
+  console.log('Autosaving feedback:', value)
+  await new Promise((resolve) => setTimeout(resolve, 1000))
+  feedbackError.value = ''
+}
+</script>
+
+<style scoped>
+.text-input-test {
+  padding: 2rem;
+  min-height: 100vh;
+  background-image: url('https://images.unsplash.com/photo-1519681393784-d120267933ba?auto=format&fit=crop&q=80&w=2070');
+  background-size: cover;
+  background-position: center;
+  background-attachment: fixed;
+}
+
+.text-input-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 2rem;
+  margin-top: 2rem;
+}
+
+.input-section {
+  background: rgba(255, 255, 255, 0.9);
+  padding: 2rem;
+  border-radius: 0.75rem;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(10px);
+}
+
+.input-section h2 {
+  margin-bottom: 1rem;
+  color: var(--text-color);
+}
+
+.group {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 2rem;
+  border-radius: 1rem;
+  background-color: rgba(255, 255, 255, 1);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(5px);
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.back-link {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  color: var(--text-color);
+  text-decoration: none;
+  font-size: 1rem;
+  transition: color 0.2s;
+}
+
+.back-link:hover {
+  color: var(--primary-color);
+}
+
+h1 {
+  margin: 0;
+  color: #212529;
+}
+
+h2 {
+  color: #495057;
+  font-size: 1.1rem;
+  margin-bottom: 0.5rem;
+}
+
+.test-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 600px), 1fr));
+  gap: 1rem;
+}
+
+.column {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.input-group {
+  background: rgba(255, 255, 255, 0.8);
+  border-radius: 8px;
+  padding: 1rem;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  height: fit-content;
+  backdrop-filter: blur(5px);
+}
+
+.input-group h2 {
+  margin: 0 0 0.5rem 0;
+  color: var(--text-color);
+  font-size: 1.1rem;
+}
+
+.address-row {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+@media (max-width: 1200px) {
+  .test-container {
+    grid-template-columns: 1fr;
+  }
+}
+</style>