@necrolab/dashboard 0.5.15 → 0.5.17

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

@@ -1,96 +1,33 @@
 <template>
-    <label class="switch" :class="{ 'disabled': disabled }">
-        <input type="checkbox" v-model="value" :disabled="disabled" />
-        <span class="slider round"></span>
+    <label
+        class="relative inline-block w-[51px] h-[31px] max-modal:w-11 max-modal:min-w-11 max-modal:h-6.5"
+        :class="disabled ? 'pointer-events-none' : ''"
+    >
+        <input
+            type="checkbox"
+            v-model="value"
+            :disabled="disabled"
+            class="opacity-0 w-0 h-0 peer"
+            role="switch"
+            :aria-checked="value"
+        />
+        <span
+            class="absolute inset-0 cursor-pointer border-2 rounded-[31px] transition-all duration-300 ease-out
+                   before:absolute before:content-[''] before:size-[23px] before:left-0.5 before:bottom-0.5 before:rounded-full before:shadow-switch before:transition-all before:duration-300 before:ease-out
+                   bg-dark-550 border-dark-550 before:bg-dark-200
+                   peer-checked:bg-accent-green peer-checked:border-accent-green peer-checked:before:bg-white peer-checked:before:translate-x-5
+                   peer-disabled:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:before:opacity-70
+                   max-modal:before:size-[22px] max-modal:peer-checked:before:translate-x-[18px]"
+        ></span>
     </label>
 </template>
 
 <script setup>
 const value = defineModel();
-const props = defineProps({
+defineProps({
     disabled: {
         type: Boolean,
         default: false
     }
 });
 </script>
-
-<style lang="scss" scoped>
-/* iOS-style switch */
-.switch {
-    @apply relative inline-block;
-    width: 51px;
-    height: 31px;
-}
-
-/* Hide default HTML checkbox */
-.switch input {
-    @apply opacity-0 w-0 h-0;
-}
-
-/* The slider */
-.slider {
-    @apply absolute cursor-pointer inset-0;
-    @apply border-2;
-    background-color: oklch(0.26 0 0);
-    border-color: oklch(0.35 0 0);
-    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.slider:before {
-    @apply absolute;
-    @apply w-[23px] h-[23px] left-0.5 bottom-0.5;
-    content: "";
-    background-color: oklch(0.50 0 0);
-    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    box-shadow: 0 1px 3px oklch(0 0 0 / 0.3);
-}
-
-input:checked + .slider {
-    background-color: oklch(0.72 0.15 145);
-    border-color: oklch(0.72 0.15 145);
-}
-
-input:checked + .slider:before {
-    background-color: oklch(1 0 0);
-}
-
-input:checked + .slider:before {
-    transform: translateX(20px);
-}
-
-.switch.disabled {
-    @apply pointer-events-none;
-}
-
-input:disabled + .slider {
-    @apply opacity-50 cursor-not-allowed;
-}
-
-input:disabled + .slider:before {
-    @apply opacity-70;
-}
-
-/* Rounded sliders */
-.slider.round {
-    border-radius: 31px;
-}
-
-.slider.round:before {
-    border-radius: 50%;
-}
-
-@media (max-width: 810px) {
-    .switch {
-        @apply w-11 min-w-11 h-[26px];
-
-        .slider:before {
-            @apply w-[22px] h-[22px] left-0.5 bottom-0.5;
-        }
-    }
-
-    input:checked + .slider:before {
-        @apply translate-x-[18px];
-    }
-}
-</style>

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/useColorMapping.js

@@ -0,0 +1,15 @@
+export function useColorMapping() {
+    const colorToClass = (color) => {
+        const colorMap = {
+            green: "bg-green-400",
+            red: "bg-red-400",
+            yellow: "bg-yellow-400",
+            blue: "bg-blue-400",
+            error: "bg-red-400",
+            success: "bg-green-400"
+        };
+        return colorMap[color?.toLowerCase()] || "bg-white";
+    };
+
+    return { colorToClass };
+}

package/src/composables/useCopyToClipboard.js

@@ -17,7 +17,7 @@ export function useCopyToClipboard() {
       })
       .catch((err) => {
         ui.showError('Failed to copy')
-        console.error('Copy failed:', err)
+        ui.logger.Error('Copy failed:', err)
       })
   }
 

package/src/composables/useDateFormatting.js

@@ -0,0 +1,21 @@
+export function useDateFormatting() {
+    const formatEventDate = (dateString) => {
+        if (!dateString) return '';
+        try {
+            const date = new Date(dateString);
+            const options = {
+                month: 'short',
+                day: 'numeric',
+                year: 'numeric',
+                hour: 'numeric',
+                minute: '2-digit',
+                hour12: true
+            };
+            return date.toLocaleString('en-US', options).replace(',', '');
+        } catch {
+            return dateString;
+        }
+    };
+
+    return { formatEventDate };
+}

package/src/composables/useDeviceDetection.js

@@ -0,0 +1,14 @@
+export function useDeviceDetection() {
+    const isIOS = () => {
+        if (/iPad|iPhone|iPod/.test(navigator.platform)) {
+            return true;
+        }
+        return navigator.maxTouchPoints && navigator.maxTouchPoints > 2 && /MacIntel/.test(navigator.platform);
+    };
+
+    const isIpadOS = () => {
+        return navigator.maxTouchPoints && navigator.maxTouchPoints > 2 && /MacIntel/.test(navigator.platform);
+    };
+
+    return { isIOS, isIpadOS };
+}

package/src/composables/useDropdownPosition.js

@@ -8,8 +8,7 @@ export function useDropdownPosition(dropdownRef, options = {}) {
         minWidth = null,
         maxHeight = window.innerHeight * 0.8, // Use 80% of viewport height
         estimateHeight = null,
-        includeAdjacentButtons = false,
-        containerSelector = null
+        includeAdjacentButtons = false
     } = options;
 
     const calculateMenuPosition = () => {
@@ -109,8 +108,6 @@ export function useDropdownPosition(dropdownRef, options = {}) {
                 maxHeight: `${maxHeight}px`
             };
         } catch (error) {
-            console.warn("Error calculating dropdown position:", error);
-            // Fallback to basic positioning
             menuStyle.value = {
                 position: "fixed",
                 top: "0px",

package/src/composables/useDynamicTableHeight.js

@@ -0,0 +1,31 @@
+import { computed } from "vue";
+import { useWindowDimensions } from "./useWindowDimensions";
+
+export function useDynamicTableHeight(options = {}) {
+    const { windowHeight, windowWidth } = useWindowDimensions();
+
+    const {
+        topReservedSpace = 243,
+        bottomBuffer = 16,
+        rowHeight = 64,
+        minRowsToShow = 2
+    } = options;
+
+    const dynamicTableHeight = computed(() => {
+        // Detect PWA mode and small screens
+        const isPWA = window.matchMedia('(display-mode: standalone)').matches;
+        const isMobile = windowWidth.value <= 768;
+
+        // Extra buffer for iPhone PWA to prevent overflow
+        const extraBuffer = isPWA && isMobile ? 60 : 0;
+
+        const availableHeight = windowHeight.value - topReservedSpace - bottomBuffer - extraBuffer;
+        const minHeight = minRowsToShow * rowHeight;
+        const maxCompleteRows = Math.floor(Math.max(availableHeight, minHeight) / rowHeight);
+        const exactHeight = maxCompleteRows * rowHeight;
+
+        return exactHeight + "px";
+    });
+
+    return { dynamicTableHeight };
+}

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
+    };
+}