pgo-uiux2 1.0.0

package/src/pgo-components/styles/utilities/typography.css

@@ -0,0 +1,91 @@
+@layer utilities {
+  /* =========================
+     Headings
+     ========================= */
+  .vts-text-h1 { font-size: 6rem; font-weight: 300; line-height: 1; letter-spacing: -0.015625em; }
+  .vts-text-h2 { font-size: 3.75rem; font-weight: 300; line-height: 1; letter-spacing: -0.0083333333em; }
+  .vts-text-h3 { font-size: 3rem; font-weight: 400; line-height: 1.05; letter-spacing: normal; }
+  .vts-text-h4 { font-size: 2.125rem; font-weight: 400; line-height: 1.175; letter-spacing: 0.0073529412em; }
+  .vts-text-h5 { font-size: 1.5rem; font-weight: 400; line-height: 1.333; }
+  .vts-text-h6 { font-size: 1.25rem; font-weight: 500; line-height: 1.6; letter-spacing: 0.0125em; }
+
+  /* =========================
+     Subtitles
+     ========================= */
+  .vts-text-subtitle-1 { font-size: 1rem; font-weight: normal; line-height: 1.75; letter-spacing: 0.009375em; }
+  .vts-text-subtitle-2 { font-size: 0.875rem; font-weight: 500; line-height: 1.6; letter-spacing: 0.0071428571em; }
+
+  /* =========================
+     Body text
+     ========================= */
+  .vts-text-body-1 { font-size: 1rem; font-weight: 400; line-height: 1.5; letter-spacing: 0.03125em; }
+  .vts-text-body-2 { font-size: 0.875rem; font-weight: 400; line-height: 1.425; letter-spacing: 0.0178571429em; }
+
+  /* =========================
+     Button
+     ========================= */
+  .vts-text-button { font-size: 0.875rem; font-weight: 500; line-height: 2.6; letter-spacing: 0.0892857143em; text-transform: uppercase; }
+
+  /* =========================
+     Caption / Overline
+     ========================= */
+  .vts-text-caption { font-size: 0.75rem; font-weight: 400; line-height: 1.667; letter-spacing: 0.0333333333em; }
+  .vts-text-overline { font-size: 0.75rem; font-weight: 500; line-height: 2.667; letter-spacing: 0.1666666667em; text-transform: uppercase; }
+
+  /* =========================
+     Emphasis
+     ========================= */
+  .vts-text-high-emphasis { color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity)); }
+  .vts-text-medium-emphasis { color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity)); }
+  .vts-text-disabled { color: rgba(var(--v-theme-on-background), var(--v-disabled-opacity)); }
+
+  /* =========================
+     Text transform
+     ========================= */
+  .vts-text-uppercase { text-transform: uppercase; }
+  .vts-text-lowercase { text-transform: lowercase; }
+  .vts-text-capitalize { text-transform: capitalize; }
+  .vts-text-none { text-transform: none; }
+
+  /* =========================
+     Text alignment
+     ========================= */
+  .vts-text-start { text-align: start; }
+  .vts-text-center { text-align: center; }
+  .vts-text-end { text-align: end; }
+  .vts-text-justify { text-align: justify; }
+  .vts-text-left { text-align: left; }
+  .vts-text-right { text-align: right; }
+
+  /* =========================
+     Text overflow / wrapping
+     ========================= */
+  .vts-text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .vts-text-no-wrap { white-space: nowrap; }
+  .vts-text-pre-wrap { white-space: pre-wrap; }
+  .vts-text-break { overflow-wrap: break-word; }
+
+  /* =========================
+     Text decoration
+     ========================= */
+  .vts-text-decoration-none { text-decoration: none; }
+  .vts-text-decoration-overline { text-decoration: overline; }
+  .vts-text-decoration-underline { text-decoration: underline; }
+  .vts-text-decoration-line-through { text-decoration: line-through; }
+
+  /* =========================
+     Font weight
+     ========================= */
+  .vts-font-weight-black { font-weight: 900; }
+  .vts-font-weight-bold { font-weight: 700; }
+  .vts-font-weight-semibold { font-weight: 600; }
+  .vts-font-weight-medium { font-weight: 500; }
+  .vts-font-weight-regular { font-weight: 400; }
+  .vts-font-weight-light { font-weight: 300; }
+  .vts-font-weight-thin { font-weight: 100; }
+
+  /* =========================
+     Font style
+     ========================= */
+  .vts-font-italic { font-style: italic; }
+}

package/src/pgo-components/styles/utilities/z-index.css

@@ -0,0 +1,11 @@
+/* prettier-ignore */
+@layer utilities {
+  /* Z-Index Utilities */
+  .vts-z-auto { z-index: auto; }
+  .vts-z-0    { z-index: 0; }
+  .vts-z-10   { z-index: 10; }
+  .vts-z-20   { z-index: 20; }
+  .vts-z-30   { z-index: 30; }
+  .vts-z-40   { z-index: 40; }
+  .vts-z-50   { z-index: 50; }
+}

package/src/pgo-components/tokens/index.js

@@ -0,0 +1,337 @@
+export const themes = {
+  default: {
+    light: {
+      color: {
+        text: '#0b0b0b',
+        textSecondary: '#6b7280',
+        background: '#ffffff',
+        surface: '#f7f7f8',
+        surfaceElevated: '#f9fafb',
+        primary: '#950050',
+        primaryText: '#ffffff',
+        secondary: '#64748b',
+        secondaryText: '#ffffff',
+        muted: '#6b7280',
+        border: 'rgba(0,0,0,0.06)',
+        borderLight: 'rgba(0,0,0,0.04)',
+        borderHeavy: 'rgba(0,0,0,0.12)',
+        divider: 'rgba(0,0,0,0.08)',
+        overlay: 'rgba(0,0,0,0.5)',
+        success: '#10b981',
+        warning: '#f59e0b',
+        error: '#ef4444',
+        info: '#3b82f6',
+        focus: '#950050',
+        shadow: '#000000',
+        disable: '#9ca3af'
+        // inputBackground: '#ed0786'
+      },
+      radius: {
+        sm: '4px',
+        md: '8px',
+        lg: '12px',
+        xl: '16px',
+        full: '9999px'
+      },
+      shadow: {
+        sm: '0 1px 3px rgba(2,6,23,0.06)',
+        md: '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)',
+        lg: '0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06)',
+        xl: '0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05)'
+      },
+      elevation: {
+        0: 'none',
+        1: '0 1px 3px rgba(2,6,23,0.06)',
+        2: '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)',
+        3: '0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06)',
+        4: '0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05)'
+      }
+    },
+    dark: {
+      color: {
+        text: '#e6eef8',
+        textSecondary: '#9aa4b2',
+        background: '#0b1220',
+        surface: '#0f1724',
+        surfaceElevated: '#1a2332',
+        primary: '#3b82f6',
+        primaryText: '#061225',
+        secondary: '#64748b',
+        secondaryText: '#f1f5f9',
+        muted: '#9aa4b2',
+        border: 'rgba(255,255,255,0.08)',
+        borderLight: 'rgba(255,255,255,0.05)',
+        borderHeavy: 'rgba(255,255,255,0.12)',
+        divider: 'rgba(255,255,255,0.1)',
+        overlay: 'rgba(0,0,0,0.7)',
+        success: '#10b981',
+        warning: '#f59e0b',
+        error: '#ef4444',
+        info: '#3b82f6',
+        focus: '#3b82f6',
+        shadow: '#000000',
+        disable: '#4b5563'
+        // inputBackground: '#ed0786'
+      },
+      radius: {
+        sm: '4px',
+        md: '8px',
+        lg: '12px',
+        xl: '16px',
+        full: '9999px'
+      },
+      shadow: {
+        sm: '0 1px 4px rgba(2,6,23,0.6)',
+        md: '0 4px 6px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.1)',
+        lg: '0 10px 15px rgba(0, 0, 0, 0.3), 0 4px 6px rgba(0, 0, 0, 0.2)',
+        xl: '0 20px 25px rgba(0, 0, 0, 0.4), 0 10px 10px rgba(0, 0, 0, 0.3)'
+      },
+      elevation: {
+        0: 'none',
+        1: '0 1px 4px rgba(2,6,23,0.6)',
+        2: '0 4px 6px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.1)',
+        3: '0 10px 15px rgba(0, 0, 0, 0.3), 0 4px 6px rgba(0, 0, 0, 0.2)',
+        4: '0 20px 25px rgba(0, 0, 0, 0.4), 0 10px 10px rgba(0, 0, 0, 0.3)'
+      }
+    }
+  },
+
+  classic: {
+    light: {
+      color: {
+        text: '#1b1b18',
+        textSecondary: '#7a6e6e',
+        background: '#fffdf6',
+        surface: '#fff7e6',
+        surfaceElevated: '#fffdf6',
+        primary: '#9b4dca',
+        primaryText: '#ffffff',
+        secondary: '#8b7355',
+        secondaryText: '#ffffff',
+        muted: '#7a6e6e',
+        border: 'rgba(27,27,24,0.08)',
+        borderLight: 'rgba(27,27,24,0.05)',
+        borderHeavy: 'rgba(27,27,24,0.12)',
+        divider: 'rgba(27,27,24,0.1)',
+        overlay: 'rgba(27,27,24,0.4)',
+        success: '#10b981',
+        warning: '#f59e0b',
+        error: '#ef4444',
+        info: '#3b82f6',
+        focus: '#950050'
+      },
+      radius: {
+        sm: '3px',
+        md: '6px',
+        lg: '10px',
+        xl: '14px',
+        full: '9999px'
+      },
+      shadow: {
+        sm: '0 1px 2px rgba(0,0,0,0.04)',
+        md: '0 2px 4px rgba(0,0,0,0.06)',
+        lg: '0 4px 6px rgba(0,0,0,0.08)',
+        xl: '0 10px 15px rgba(0,0,0,0.1)'
+      },
+      elevation: {
+        0: 'none',
+        1: '0 1px 2px rgba(0,0,0,0.04)',
+        2: '0 2px 4px rgba(0,0,0,0.06)',
+        3: '0 4px 6px rgba(0,0,0,0.08)',
+        4: '0 10px 15px rgba(0,0,0,0.1)'
+      }
+    },
+    dark: {
+      color: {
+        text: '#f6f3ee',
+        textSecondary: '#a8a09a',
+        background: '#11100f',
+        surface: '#191817',
+        surfaceElevated: '#242220',
+        primary: '#b083e8',
+        primaryText: '#0f0b10',
+        secondary: '#9b8b7d',
+        secondaryText: '#f6f3ee',
+        muted: '#a8a09a',
+        border: 'rgba(246,243,238,0.08)',
+        borderLight: 'rgba(246,243,238,0.05)',
+        borderHeavy: 'rgba(246,243,238,0.12)',
+        divider: 'rgba(246,243,238,0.1)',
+        overlay: 'rgba(17,16,15,0.7)',
+        success: '#10b981',
+        warning: '#f59e0b',
+        error: '#ef4444',
+        info: '#3b82f6',
+        focus: '#9b4dca'
+      },
+      radius: {
+        sm: '3px',
+        md: '6px',
+        lg: '10px',
+        xl: '14px',
+        full: '9999px'
+      },
+      shadow: {
+        sm: '0 1px 3px rgba(0,0,0,0.6)',
+        md: '0 2px 6px rgba(0,0,0,0.7)',
+        lg: '0 4px 10px rgba(0,0,0,0.8)',
+        xl: '0 10px 20px rgba(0,0,0,0.9)'
+      },
+      elevation: {
+        0: 'none',
+        1: '0 1px 3px rgba(0,0,0,0.6)',
+        2: '0 2px 6px rgba(0,0,0,0.7)',
+        3: '0 4px 10px rgba(0,0,0,0.8)',
+        4: '0 10px 20px rgba(0,0,0,0.9)'
+      }
+    }
+  },
+
+  sap: {
+    light: {
+      color: {
+        text: '#1d1d1f', // Dark grey for text
+        background: '#f4f7f6', // Very light grey background to reduce glare
+        surface: '#ffffff', // White surface for cards, inputs, etc.
+        primary: '#006c8e', // SAP Blue for primary elements (buttons, links)
+        primaryText: '#ffffff', // White text for primary buttons and highlights
+        secondary: '#7d8a91', // Muted grey for secondary elements
+        muted: '#7d8a91', // Lighter grey for less important text and elements
+        success: '#4CAF50', // Success messages (green)
+        error: '#F44336', // Error messages (red)
+        warning: '#FF9800', // Warning messages (orange)
+        info: '#2196F3' // Informational messages (blue)
+      },
+      radius: {
+        sm: '4px', // Small border radius for smaller elements (buttons, inputs)
+        md: '8px', // Medium border radius for larger elements (cards, modals)
+        lg: '12px' // Larger border radius for bigger elements
+      },
+      shadow: {
+        sm: '0 1px 4px rgba(0, 0, 0, 0.1)', // Light shadow for subtle depth
+        md: '0 4px 6px rgba(0, 0, 0, 0.1)', // Medium shadow for more pronounced depth
+        lg: '0 10px 20px rgba(0, 0, 0, 0.15)' // Larger shadow for cards or modals
+      },
+    //   typography: {
+    //     fontFamily: '"Segoe UI", "Roboto", "Arial", system-ui, sans-serif', // SAP-like system fonts
+    //     fontSize: {
+    //       sm: '0.875rem', // Small text
+    //       md: '1rem', // Regular body text
+    //       lg: '1.25rem', // Large text for headings
+    //       xl: '1.5rem' // Extra large text
+    //     },
+    //     fontWeight: {
+    //       regular: '400', // Regular weight for text
+    //       bold: '600' // Bold weight for headings and important text
+    //     },
+    //     lineHeight: {
+    //       sm: '1.25', // Small line height for compact text
+    //       md: '1.5', // Standard line height for readability
+    //       lg: '1.75' // Larger line height for headings
+    //     }
+    //   },
+    //   spacing: {
+    //     xs: '4px', // Extra small spacing (margins/paddings)
+    //     sm: '8px', // Small spacing (margins/paddings)
+    //     md: '16px', // Medium spacing (margins/paddings)
+    //     lg: '32px', // Large spacing (margins/paddings)
+    //     xl: '64px' // Extra large spacing (margins/paddings)
+    //   },
+    //   buttons: {
+    //     primary: {
+    //       backgroundColor: '#006c8e', // SAP Blue for primary buttons
+    //       color: '#ffffff', // White text on primary buttons
+    //       borderRadius: '8px', // Medium rounded corners
+    //       padding: '8px 16px', // Padding for primary buttons
+    //       boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)', // Soft shadow for depth
+    //       hover: {
+    //         backgroundColor: '#005b72', // Darker SAP blue on hover
+    //         boxShadow: '0 6px 10px rgba(0, 0, 0, 0.2)' // Slightly stronger shadow on hover
+    //       }
+    //     },
+    //     secondary: {
+    //       backgroundColor: '#f4f7f6', // Light background for secondary buttons
+    //       color: '#006c8e', // SAP blue text for secondary buttons
+    //       borderRadius: '8px', // Medium rounded corners
+    //       padding: '8px 16px', // Padding for secondary buttons
+    //       border: '1px solid #006c8e', // Border with SAP blue
+    //       hover: {
+    //         backgroundColor: '#e3eaf1', // Lighter background on hover
+    //         color: '#005b72', // Darker SAP blue on hover
+    //         borderColor: '#005b72' // Darker border on hover
+    //       }
+    //     }
+    //   },
+    //   inputs: {
+    //     backgroundColor: '#ffffff', // White background for inputs
+    //     borderColor: '#cccccc', // Light grey border for inputs
+    //     borderRadius: '4px', // Small rounded corners
+    //     padding: '8px 12px', // Padding inside inputs
+    //     focus: {
+    //       borderColor: '#006c8e', // SAP Blue on focus
+    //       boxShadow: '0 0 5px rgba(0, 108, 142, 0.4)' // Soft blue glow on focus
+    //     }
+    //   },
+    //   cards: {
+    //     backgroundColor: '#ffffff', // White background for cards
+    //     borderColor: '#f1f1f1', // Very light grey border for cards
+    //     borderRadius: '8px', // Medium rounded corners for cards
+    //     boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)', // Light shadow for cards
+    //     padding: '16px' // Padding inside cards
+    //   },
+    //   links: {
+    //     color: '#006c8e', // SAP Blue for links
+    //     hover: {
+    //       color: '#005b72', // Darker SAP Blue on hover
+    //       textDecoration: 'underline' // Underline on hover
+    //     }
+    //   },
+    //   header: {
+    //     backgroundColor: '#ffffff', // White background for header
+    //     color: '#1d1d1f', // Dark text color for the header
+    //     boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)', // Light shadow for header
+    //     padding: '16px' // Padding for the header
+    //   },
+    //   footer: {
+    //     backgroundColor: '#f4f7f6', // Light grey background for footer
+    //     color: '#7d8a91', // Muted text color for footer
+    //     padding: '16px' // Padding for footer
+    //   },
+    //   modal: {
+    //     backgroundColor: '#ffffff', // White background for modal
+    //     borderRadius: '8px', // Medium rounded corners for modal
+    //     boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)', // Light shadow for modal
+    //     padding: '24px', // Padding inside modal
+    //     overlay: {
+    //       backgroundColor: 'rgba(0, 0, 0, 0.4)' // Semi-transparent black overlay
+    //     }
+    //   },
+    //   alert: {
+    //     success: {
+    //       backgroundColor: '#4CAF50', // Green background for success alerts
+    //       color: '#ffffff', // White text for success alerts
+    //       borderRadius: '8px', // Medium rounded corners
+    //       padding: '8px 16px' // Padding for success alerts
+    //     },
+    //     error: {
+    //       backgroundColor: '#F44336', // Red background for error alerts
+    //       color: '#ffffff', // White text for error alerts
+    //       borderRadius: '8px', // Medium rounded corners
+    //       padding: '8px 16px' // Padding for error alerts
+    //     },
+    //     warning: {
+    //       backgroundColor: '#FF9800', // Orange background for warning alerts
+    //       color: '#ffffff', // White text for warning alerts
+    //       borderRadius: '8px', // Medium rounded corners
+    //       padding: '8px 16px' // Padding for warning alerts
+    //     },
+    //     info: {
+    //       backgroundColor: '#2196F3', // Blue background for info alerts
+    //       color: '#ffffff', // White text for info alerts
+    //       borderRadius: '8px', // Medium rounded corners
+    //       padding: '8px 16px' // Padding for info alerts
+    //     }
+    //   }
+    }
+  }
+}

package/src/router/index.js

@@ -0,0 +1,88 @@
+import { createRouter, createWebHistory } from 'vue-router'
+
+import Home from '../pgo-components/pages/Home.vue'
+import Page1 from '../pgo-components/pages/Page1.vue'
+import ComponentDemo from '../pgo-components/pages/Component.vue'
+import ComponentRenderer from '../pgo-components/pages/ComponentRenderer.vue'
+
+const routes = [
+  {
+    path: '/',
+    name: 'Home',
+    component: Home,
+    meta: {
+      title: 'Home - PGO UI Components',
+      breadcrumb: [
+        { label: 'Home', to: '/' },
+        { label: 'Examples', to: '/asdf' },
+        { label: 'Page 1' }
+      ]
+    }
+  },
+  {
+    path: '/page/:modelName/:componentName',
+    name: 'Custom Home',
+    model: 'modelName',
+    componentName: 'componentName',
+    component: ComponentRenderer,
+    meta: {
+      title: 'Home - PGO UI Components',
+      breadcrumb: [
+        { label: 'Home', to: '/' },
+        { label: 'Examples', to: '/asdf' },
+        { label: 'Page 1' }
+      ]
+    }
+  },
+  {
+    path: '/Components',
+    name: 'Components',
+    component: Page1,
+    meta: {
+      title: 'Components - PGO UI Components',
+      breadcrumb: [
+        { label: 'Home', to: '/' },
+        { label: 'Components', to: '/Components' },
+      ]
+    }
+  },
+  {
+    path: '/Components/:id',
+    name: 'ComponentDetail',
+    component: ComponentDemo,
+    meta: {
+      title: 'Components - PGO UI Components',
+      breadcrumb: (route) => [
+        { label: 'Home', to: '/' },
+        { label: 'Components', to: '/Components' },
+        { label: route.params.id, to: `/Components/${route.params.id}` }
+      ]
+    }
+  }
+//   {
+//     path: '/:pathMatch(.*)*',
+//     name: 'NotFound',
+//     component: () => import('@/pages/NotFound.vue')
+//   }
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+  scrollBehavior(to, from, savedPosition) {
+    if (savedPosition) {
+      return savedPosition
+    } else {
+      return { top: 0 }
+    }
+  }
+})
+
+// Update document title
+router.beforeEach((to, from, next) => {
+  const title = (to && to.meta && to.meta.title) ? String(to.meta.title) : 'PGO UI Components'
+  document.title = title
+  next()
+})
+
+export default router

package/src/shims-vue.d.ts

@@ -0,0 +1,14 @@
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
+
+// Add this to help JSX types be recognized
+declare namespace JSX {
+  interface IntrinsicElements {
+    svg: any;
+    path: any;
+    // Add more elements if necessary, like rect, circle, etc.
+  }
+}

package/src/validations/validationRules.js

@@ -0,0 +1,50 @@
+const rules = {
+    required: (value) => {
+        const msg = {
+            en: 'This field is required.',
+            dv: 'ފުރަންޖެހޭ'
+        }
+        return !!value || msg
+    },
+    email: (value) => {
+        const pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+        return pattern.test(value) || 'Invalid email address.'
+    },
+    min: (min) => {
+        return (value) => {
+            return (value && value.length >= min) || `Minimum length is ${min} characters.`
+        }
+    },
+    max: (max) => {
+        return (value) => {
+            return (value && value.length <= max) || `Maximum length is ${max} characters.`
+        }
+    },
+    numeric: (value) => {
+        return !isNaN(parseFloat(value)) && isFinite(value) || 'This field must be a number.'
+    },
+    nid:(country) =>{
+        return (value) => {
+            if(country === 'mv'){
+                const pattern = /^A\d{6}$/
+                return pattern.test(value) || 'NID must start with A followed by 6 digits for Maldives'
+            }
+            // Add more country-specific NID patterns as needed
+            return true; 
+        }
+    },
+    // Custom pattern validator that takes a condition function and a regex pattern
+    customPattern: (conditionFn, pattern, errorMsg = 'Invalid format.') => {
+        return (value) => {
+            // If condition is met, validate with pattern
+            if (conditionFn()) {
+                const regex = new RegExp(pattern)
+                return regex.test(value) || errorMsg
+            }
+            // If condition not met, skip validation
+            return true
+        }
+    }
+}
+
+export default rules;

package/tailwind.config.js

@@ -0,0 +1,73 @@
+export default {
+  content: [
+    './index.html',
+    './src/**/*.{vue,js,ts,jsx,tsx}',
+  ],
+  darkMode: 'selector',
+  safelist: [
+      // color backgrounds and hover variants (add any color names you use)
+      {
+        pattern: /bg-(blue|red|green|yellow|gray|purple|indigo|pink)-(50|100|200|300|400|500|600|700|800|900)/,
+        variants: ['hover', 'focus']
+      },
+      // text colors
+      {
+        pattern: /text-(blue|red|green|yellow|gray|purple|indigo|pink)-(50|100|200|300|400|500|600|700|800|900)/
+      },
+      // borders
+      {
+        pattern: /border-(blue|red|green|yellow|gray|purple|indigo|pink)-(50|100|200|300|400|500|600|700|800|900)/,
+        variants: ['hover']
+      }
+  ],
+  theme: {
+    extend: {
+      // Add RTL and app font families for easier usage in utilities or components
+      fontFamily: {
+        app: ['var(--app-font)'],
+        rtl: [
+          'Faruma',
+          'system-ui',
+          'sans-serif',
+        ],
+      },
+    },
+    colors: {
+      // background: '#05644D',
+      primary: '#05644D',
+      // secondary: '#FFA500',
+      // third: '#1E40AF',
+      // appcolor: '#05644D',
+
+      // required defaults (otherwise classes like bg-white fail)
+      white: '#ffffff',
+      black: '#000000',
+      transparent: 'transparent',
+      current: 'currentColor',
+    },
+
+    fontFamily: {
+      // Make Tailwind's default font-sans use the app font CSS variable
+      sans: ['var(--app-font)'],
+      dv: ['Faruma', 'sans-serif'],
+      en: ['Roboto', 'sans-serif'],
+      // keep `app` and `rtl` in extend above for convenience
+    },
+  },
+
+  // Optional (Vuetify compatibility)
+  corePlugins: {
+    preflight: false,
+  },
+
+  plugins: [
+    // Add small utilities to toggle app font and rtl font via classes
+    function ({ addUtilities, theme }) {
+      const newUtilities = {
+        '.font-app': { 'font-family': theme('fontFamily.app', 'var(--app-font)') },
+        '.rtl-font': { 'font-family': theme('fontFamily.rtl').join(', ') },
+      }
+      addUtilities(newUtilities, { variants: ['responsive'] })
+    },
+  ],
+}

package/test.php

@@ -0,0 +1,5 @@
+var test = [];
+
+test.table = tableName;
+test.fields = []
+test.relations = []