@necrolab/dashboard 0.5.16 → 0.5.18

package/src/components/ui/Modal.vue

@@ -1,9 +1,17 @@
 <template>
-    <div class="modal-mask" role="dialog" aria-modal="true" @touchmove.stop>
-        <div class="modal-content" ref="target">
+    <div
+        class="modal-mask"
+        :class="{ 'fade-in': !isClosing, 'fade-out': isClosing }"
+        role="dialog"
+        aria-modal="true"
+        @touchmove.stop>
+        <div
+            class="modal-content"
+            :class="{ 'modal-slide-in': !isClosing, 'modal-slide-out': isClosing }"
+            ref="target">
             <div class="modal-header">
                 <slot name="header" />
-                <button @click="ui.toggleModal()" class="btn-icon border-none hover:bg-dark-400 ml-auto" aria-label="Close modal">
+                <button @click="closeModal" class="btn-icon border-none hover:bg-dark-400 ml-auto" aria-label="Close modal">
                     <CloseIcon />
                 </button>
             </div>
@@ -21,6 +29,15 @@ import { CloseIcon } from "@/components/icons";
 
 const ui = useUIStore();
 const target = ref(null);
+const isClosing = ref(false);
+
+const closeModal = () => {
+    isClosing.value = true;
+    setTimeout(() => {
+        ui.toggleModal();
+        isClosing.value = false; // Reset for next modal
+    }, 150); // Match the animation duration
+};
 
 // Store original body styles
 let originalOverflow = "";
@@ -29,7 +46,7 @@ let originalTop = "";
 let scrollY = 0;
 
 onMounted(() => {
-    // Lock body scroll
+    isClosing.value = false; // Ensure clean state on mount
     scrollY = window.scrollY;
     originalOverflow = document.body.style.overflow;
     originalPosition = document.body.style.position;
@@ -42,7 +59,6 @@ onMounted(() => {
 });
 
 onUnmounted(() => {
-    // Restore body scroll
     document.body.style.overflow = originalOverflow;
     document.body.style.position = originalPosition;
     document.body.style.top = originalTop;
@@ -51,7 +67,7 @@ onUnmounted(() => {
 });
 
 onClickOutside(target, (event) => {
-    if (event.target.classList.contains("modal-mask")) ui.toggleModal();
+    if (event.target.classList.contains("modal-mask")) closeModal();
 });
 </script>
 <style scoped>
@@ -64,7 +80,7 @@ onClickOutside(target, (event) => {
     @apply z-modal-mask;
 
     /* Background with opacity */
-    background-color: rgba(0, 0, 0, 0.85);
+    background-color: oklch(0 0 0 / 0.85);
     backdrop-filter: blur(8px);
 
     /* Height with modern viewport units and fallback */
@@ -108,8 +124,8 @@ onClickOutside(target, (event) => {
     @apply bg-dark-400 px-5 py-5;
     @apply w-160 mb-80;
     @apply overflow-y-visible;
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8),
-                0 0 0 1px rgba(255, 255, 255, 0.05);
+    box-shadow: 0 25px 50px -12px oklch(0 0 0 / 0.8),
+                0 0 0 1px oklch(1 0 0 / 0.05);
 }
 
 /* Mobile breakpoint for modal-content */
@@ -156,4 +172,62 @@ onClickOutside(target, (event) => {
         padding-bottom: 1rem !important;
     }
 }
+
+/* Modal animations */
+.fade-in {
+    animation: fadeIn 0.15s ease-out;
+}
+
+.modal-slide-in {
+    animation: slideIn 0.15s ease-out;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes slideIn {
+    from {
+        opacity: 0;
+        transform: translateY(-20px) scale(0.95);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+
+/* Exit animations */
+.fade-out {
+    animation: fadeOut 0.15s ease-in forwards;
+}
+
+.modal-slide-out {
+    animation: slideOut 0.15s ease-in forwards;
+}
+
+@keyframes fadeOut {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+    }
+}
+
+@keyframes slideOut {
+    from {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+    to {
+        opacity: 0;
+        transform: translateY(-10px) scale(0.98);
+    }
+}
 </style>

package/src/components/ui/Navbar.vue

@@ -45,9 +45,9 @@
                 v-if="ui.profile?.profilePicture"
                 :src="ui.profile?.profilePicture"
                 alt="Profile Picture"
-                class="h-10 w-10 rounded-full hidden lg:block mx-4"
+                class="size-10 rounded-full hidden lg:block mx-4"
             />
-            <div v-else class="h-10 w-10 rounded-full hidden lg:block mx-4 bg-dark-400" />
+            <div v-else class="size-10 rounded-full hidden lg:block mx-4 bg-dark-400" />
             <CountryChooser class="hidden lg:block" />
 
             <button class="flex lg:hidden ml-auto z-30" @click="toggleMenu" aria-label="Toggle navigation menu" :aria-expanded="menuOpen">
@@ -92,7 +92,7 @@
                         <span class="text-lightgray">Logged in as </span>
                         <span class="font-black"> {{ ui.profile?.name }}</span>
                     </h4>
-                    <img :src="ui.profile?.profilePicture" alt="" class="h-10 w-10 rounded-full" />
+                    <img :src="ui.profile?.profilePicture" alt="" class="size-10 rounded-full" />
                 </div>
 
                 <div class="mx-auto mt-6 mb-14 flex gap-3 items-center">

package/src/components/ui/ReadonlyFieldsSection.vue

@@ -8,7 +8,7 @@
         </div>
         <div class="col-span-6">
             <label class="flex items-center mb-2 text-light-200 font-medium">Status</label>
-            <div class="flex items-center gap-3 h-10">
+            <div class="flex-gap-3 items-center h-10">
                 <StatusBadge :enabled="data.enabled" size="large" />
                 <span class="text-sm font-medium" :class="data.enabled ? 'text-green-400' : 'text-red-400'">
                     {{ data.enabled ? 'Enabled' : 'Disabled' }}

package/src/components/ui/StatusBadge.vue

@@ -25,7 +25,7 @@ const disabledClasses = "bg-red-500/20 border-red-500/30";
 <template>
     <div
         :class="[
-            'flex items-center justify-center rounded-full border-2 transition-all duration-200',
+            'flex-center rounded-full border-2 transition-all duration-200',
             enabled ? enabledClasses : disabledClasses,
             sizeClasses[size]
         ]">

package/src/components/ui/controls/CountryChooser.vue

@@ -115,10 +115,10 @@ const selectCountry = (country, module) => {
   @apply border rounded-md tracking-wider;
   @apply flex items-center justify-center;
   @apply relative;
-  border-color: rgba(255, 255, 255, 0.1);
-  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  border-color: oklch(0.95 0 0 / 0.1);
+  background: linear-gradient(135deg, oklch(0.95 0 0 / 0.08) 0%, oklch(0.95 0 0 / 0.04) 100%);
+  text-shadow: 0 1px 2px oklch(0 0 0 / 0.3);
+  box-shadow: 0 2px 4px oklch(0 0 0 / 0.1);
 }
 
 .country-header-item:first-of-type {
@@ -128,7 +128,7 @@ const selectCountry = (country, module) => {
 .country-header-item::before {
   content: '';
   @apply absolute top-0 left-0 right-0 h-px rounded-t-md;
-  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%);
+  background: linear-gradient(90deg, transparent 0%, oklch(0.95 0 0 / 0.2) 50%, transparent 100%);
 }
 
 .country-item {

package/src/components/ui/controls/atomic/MultiDropdown.vue

@@ -34,7 +34,7 @@
                     </div>
 
                     <div v-if="selectedOptions.length > 0" class="selected-summary">
-                        <div class="flex items-center justify-between gap-2">
+                        <div class="flex-gap-2 items-center justify-between">
                             <div class="selected-count">
                                 <span class="count-badge">
                                     {{ selectedOptions.length }}

package/src/composables/useCodeEditor.js

@@ -0,0 +1,117 @@
+import { nextTick } from 'vue';
+
+export function useCodeEditor(logger) {
+    let highlightTimer = null;
+
+    const highlightCode = (codeDisplay, codeEditor, currentContent, currentFile) => {
+        if (!codeDisplay || !codeEditor) return;
+
+        let language = "javascript";
+
+        if (currentFile) {
+            if (currentFile.endsWith(".json")) {
+                language = "json";
+            } else if (currentFile.endsWith(".js")) {
+                language = "javascript";
+            } else if (currentFile.endsWith(".txt") || currentFile.endsWith(".csv")) {
+                language = "text";
+                if (codeDisplay) {
+                    codeDisplay.textContent = currentContent || "";
+                    codeDisplay.className = "language-text code-highlight";
+                }
+                syncScroll(codeDisplay, codeEditor);
+                return;
+            }
+        }
+
+        if (highlightTimer) clearTimeout(highlightTimer);
+
+        highlightTimer = setTimeout(() => {
+            requestAnimationFrame(() => {
+                try {
+                    if (typeof window.Prism === "undefined" || !window.Prism.languages?.[language]) {
+                        if (codeDisplay) {
+                            codeDisplay.textContent = currentContent || "";
+                            codeDisplay.className = `language-${language} code-highlight`;
+                        }
+                        syncScroll(codeDisplay, codeEditor);
+                        return;
+                    }
+
+                    const highlighted = window.Prism.highlight(
+                        currentContent || "",
+                        window.Prism.languages[language],
+                        language
+                    );
+
+                    if (codeDisplay) {
+                        codeDisplay.innerHTML = highlighted;
+                        codeDisplay.className = `language-${language} code-highlight`;
+                    }
+                } catch (e) {
+                    if (logger) logger.Error("Highlight error:", e);
+                    if (codeDisplay) {
+                        codeDisplay.textContent = currentContent || "";
+                    }
+                } finally {
+                    syncScroll(codeDisplay, codeEditor);
+                }
+            });
+        }, 50);
+    };
+
+    const syncScroll = (codeDisplay, codeEditor) => {
+        if (!codeDisplay || !codeEditor) return;
+
+        codeDisplay.scrollTop = codeEditor.scrollTop;
+        codeDisplay.scrollLeft = codeEditor.scrollLeft;
+    };
+
+    const handleTab = (textarea, contentRef, onContentUpdate) => {
+        const start = textarea.selectionStart;
+        const end = textarea.selectionEnd;
+
+        const spaces = "    ";
+        contentRef.value = contentRef.value.substring(0, start) + spaces + contentRef.value.substring(end);
+
+        nextTick(() => {
+            textarea.selectionStart = textarea.selectionEnd = start + spaces.length;
+            if (onContentUpdate) onContentUpdate();
+        });
+    };
+
+    const formatJSON = (contentRef, currentFile, onContentUpdate) => {
+        try {
+            if (!currentFile.endsWith(".json")) return;
+
+            const formatted = JSON.stringify(JSON.parse(contentRef.value), null, 4);
+            contentRef.value = formatted;
+
+            nextTick(() => {
+                if (onContentUpdate) onContentUpdate();
+            });
+        } catch (e) {
+            if (logger) logger.Error("Could not format JSON", e);
+        }
+    };
+
+    const setLanguageClass = (codeDisplay, fileName) => {
+        if (!codeDisplay) return;
+
+        if (fileName.endsWith(".json")) {
+            codeDisplay.className = "language-json";
+        } else if (fileName.endsWith(".js")) {
+            codeDisplay.className = "language-javascript";
+        } else {
+            codeDisplay.className = "language-text";
+        }
+    };
+
+    return {
+        highlightCode,
+        syncScroll,
+        handleTab,
+        formatJSON,
+        setLanguageClass
+    };
+}

package/src/composables/useDropdownPosition.js

@@ -1,5 +1,4 @@
 import { ref, nextTick, onMounted, onUnmounted } from "vue";
-import { DEBUG } from "@/utils/debug";
 
 export function useDropdownPosition(dropdownRef, options = {}) {
     const menuStyle = ref({});
@@ -109,7 +108,6 @@ export function useDropdownPosition(dropdownRef, options = {}) {
                 maxHeight: `${maxHeight}px`
             };
         } catch (error) {
-            if (DEBUG) console.warn("Error calculating dropdown position:", error);
             menuStyle.value = {
                 position: "fixed",
                 top: "0px",

package/src/composables/useEnableDisable.js

@@ -0,0 +1,6 @@
+export function useEnableDisable(item, updateFn) {
+    const enable = async () => await updateFn({ ...item.value, enabled: true });
+    const disable = async () => await updateFn({ ...item.value, enabled: false });
+
+    return { enable, disable };
+}

package/src/composables/useFilterCSS.js

@@ -0,0 +1,71 @@
+import { ref, watch, onMounted, onUnmounted, nextTick } from 'vue';
+import { onBeforeRouteLeave } from 'vue-router';
+
+export function useFilterCSS(filterBuilder, svg) {
+    const STYLE_ELEMENT_ID = "filter-builder-styles";
+    let styleElement = null;
+    const cssUpdateTrigger = ref(0);
+
+    const injectStyles = () => {
+        const svgWrapper = document.getElementById("svg-wrapper");
+        if (!svgWrapper || !svg.value) return;
+
+        if (!styleElement) {
+            const existingStyle = document.getElementById(STYLE_ELEMENT_ID);
+            if (existingStyle) existingStyle.remove();
+
+            styleElement = document.createElement("style");
+            styleElement.id = STYLE_ELEMENT_ID;
+            document.head.appendChild(styleElement);
+        }
+
+        const combinedCSS = filterBuilder.value.cssClasses + filterBuilder.value.temporaryCSS;
+        if (styleElement.textContent !== combinedCSS) {
+            styleElement.textContent = combinedCSS;
+        }
+    };
+
+    const setupCSSUpdates = () => {
+        const originalUpdateCss = filterBuilder.value.updateCss.bind(filterBuilder.value);
+        filterBuilder.value.updateCss = () => {
+            originalUpdateCss();
+            nextTick(() => {
+                injectStyles();
+                cssUpdateTrigger.value++;
+            });
+        };
+
+        const originalHighlight = filterBuilder.value.highlight.bind(filterBuilder.value);
+        filterBuilder.value.highlight = (...args) => {
+            originalHighlight(...args);
+            nextTick(() => injectStyles());
+        };
+
+        const originalClearHighlight = filterBuilder.value.clearHighlight.bind(filterBuilder.value);
+        filterBuilder.value.clearHighlight = () => {
+            originalClearHighlight();
+            nextTick(() => injectStyles());
+        };
+    };
+
+    const cleanupStyles = () => {
+        const existingStyle = document.getElementById(STYLE_ELEMENT_ID);
+        if (existingStyle) existingStyle.remove();
+
+        if (styleElement) {
+            styleElement.remove();
+            styleElement = null;
+        }
+    };
+
+    onMounted(() => {
+        cleanupStyles();
+        setupCSSUpdates();
+        watch(cssUpdateTrigger, () => injectStyles(), { immediate: true });
+    });
+
+    onUnmounted(() => cleanupStyles());
+    onBeforeRouteLeave(() => cleanupStyles());
+
+    return { injectStyles, cssUpdateTrigger };
+}

package/src/composables/useFormValidation.js

@@ -0,0 +1,92 @@
+import { ref } from 'vue';
+
+export function useFormValidation() {
+    const errors = ref([]);
+
+    const clearErrors = () => {
+        errors.value = [];
+    };
+
+    const addError = (fieldName) => {
+        if (!errors.value.includes(fieldName)) {
+            errors.value.push(fieldName);
+        }
+    };
+
+    const hasError = (fieldName) => {
+        return errors.value.includes(fieldName);
+    };
+
+    const isValidEmail = (email) => {
+        return email && email.includes("@");
+    };
+
+    const isValidPassword = (password, minLength = 5) => {
+        return password && password.length >= minLength;
+    };
+
+    const isRequired = (value) => {
+        if (typeof value === 'string') return value.trim().length > 0;
+        if (typeof value === 'number') return true;
+        return value != null && value !== undefined;
+    };
+
+    const isValidCVV = (cvv) => {
+        return /^\d{3,4}$/.test(String(cvv));
+    };
+
+    const isValidCardNumber = (cardNumber) => {
+        const clean = String(cardNumber).replace(/\s+/g, "");
+        return (
+            clean.match(/^4\d{15}$/) ||        // Visa (16 digits)
+            clean.match(/^5[1-5]\d{14}$/) ||   // Mastercard (16 digits)
+            clean.match(/^3[47]\d{13}$/)       // AMEX (15 digits)
+        );
+    };
+
+    const isValidState = (state, country) => {
+        // State required only for US
+        if (country === "US") {
+            return state && state.length === 2;
+        }
+        return true; // Not required for other countries
+    };
+
+    const isValidZipCode = (zipCode) => {
+        return zipCode && zipCode.trim().length > 0;
+    };
+
+    const validateAccount = (account) => {
+        clearErrors();
+
+        if (!isValidEmail(account.email)) addError("email");
+        if (!isValidPassword(account.password)) addError("password");
+
+        return errors.value.length === 0;
+    };
+
+    const validateProfile = (profile) => {
+        clearErrors();
+
+        // Address validation
+        if (!isRequired(profile.zipCode)) addError("zipCode");
+        if (!isRequired(profile.address)) addError("address");
+        if (!isValidState(profile.state, profile.country)) addError("state");
+        if (!isRequired(profile.city)) addError("city");
+        if (!isRequired(profile.country)) addError("country");
+
+        // Card validation
+        if (!isValidCVV(profile.cvv)) addError("cvv");
+        if (!isValidCardNumber(profile.cardNumber)) addError("cardNumber");
+        if (!isRequired(profile.expYear)) addError("expYear");
+        if (!isRequired(profile.expMonth)) addError("expMonth");
+
+        return errors.value.length === 0;
+    };
+
+    return {
+        errors,
+        validateAccount,
+        validateProfile
+    };
+}

package/src/composables/useGetAllTags.js

@@ -0,0 +1,9 @@
+export function useGetAllTags(results) {
+    let tags = ["Any"];
+    results.forEach((p) =>
+        p.tags.forEach((tag) => {
+            if (!tags.includes(tag)) tags.push(tag);
+        })
+    );
+    return tags;
+}

package/src/composables/useIOSViewportHandling.js

@@ -0,0 +1,76 @@
+import { useDeviceDetection } from './useDeviceDetection';
+
+export function useIOSViewportHandling() {
+    const { isIpadOS } = useDeviceDetection();
+
+    const isIOSDevice =
+        /iPad|iPhone|iPod/.test(navigator.platform) ||
+        (navigator.maxTouchPoints && navigator.maxTouchPoints > 2 && /MacIntel/.test(navigator.platform));
+
+    if (!isIOSDevice) {
+        return { isIOSDevice: false };
+    }
+
+    const handleViewportResize = () => {
+        if (isIpadOS()) {
+            // For iPad, allow natural viewport behavior
+            return;
+        }
+
+        // For iPhone, maintain viewport stability
+        const vh = window.innerHeight * 0.01;
+        document.documentElement.style.setProperty("--vh", `${vh}px`);
+    };
+
+    // Initial setup
+    handleViewportResize();
+
+    // Listen for viewport changes
+    window.addEventListener("resize", handleViewportResize);
+    if (window.visualViewport) {
+        window.visualViewport.addEventListener("resize", handleViewportResize);
+    }
+
+    // Precise scroll control - only allow scrolling within specific scrollable elements
+    window.addEventListener(
+        "touchmove",
+        function (event) {
+            const isScrollableTextarea =
+                event.target.tagName === "TEXTAREA" &&
+                (event.target.classList.contains("code-editor") || event.target.classList.contains("proxy-editor"));
+
+            const isInScrollableContainer =
+                event.target.closest(".stop-pan") ||
+                event.target.closest(".overflow-y-auto") ||
+                event.target.closest(".vue-recycle-scroller") ||
+                event.target.closest(".scroller") ||
+                event.target.closest(".scrollable");
+
+            const isInTable = event.target.closest(".table-component");
+            const isScrollableTableContent =
+                isInTable &&
+                (event.target.closest(".grid") ||
+                    event.target.closest(".table-row") ||
+                    isInScrollableContainer ||
+                    (event.target.closest(".table-component") && !event.target.closest(".table-header")));
+
+            const isInNavbar = event.target.closest(".navbar") || event.target.closest(".mobile-menu");
+            const isInModal = event.target.closest('[role="dialog"]');
+
+            if (isScrollableTextarea || isScrollableTableContent || isInScrollableContainer || isInNavbar || isInModal) {
+                if (isScrollableTableContent || isScrollableTextarea || isInScrollableContainer) {
+                    event.stopPropagation();
+                }
+                return;
+            }
+
+            event.preventDefault();
+        },
+        { passive: false }
+    );
+
+    return {
+        isIOSDevice: true,
+        handleViewportResize
+    };
+}