@necrolab/dashboard 0.5.14 → 0.5.16

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

@@ -18,8 +18,7 @@
                     class="dropdown-menu-portal multi scrollable"
                     :style="menuStyle"
                     @click.stop
-                    @wheel.stop
-                    @touchmove.stop>
+                    @wheel.stop>
                     <div class="option-list scrollable">
                         <button
                             v-for="(option, i) in props.options"
@@ -72,13 +71,34 @@ import { useClickOutside } from "@/composables/useClickOutside";
 const ui = useUIStore();
 
 const props = defineProps({
-    onSelect: { type: Function },
-    default: { type: String },
-    options: { type: Array, required: true },
-    rightAmount: { type: String },
-    topPadding: { type: String },
-    capitalize: { type: Boolean },
-    includeAdjacentButtons: { type: Boolean, default: false }
+    onSelect: {
+        type: Function,
+        default: null
+    },
+    default: {
+        type: String,
+        default: 'Select options...'
+    },
+    options: {
+        type: Array,
+        required: true
+    },
+    rightAmount: {
+        type: String,
+        default: ''
+    },
+    topPadding: {
+        type: String,
+        default: ''
+    },
+    capitalize: {
+        type: Boolean,
+        default: false
+    },
+    includeAdjacentButtons: {
+        type: Boolean,
+        default: false
+    }
 });
 
 const selectedOptions = ref([]);
@@ -192,24 +212,22 @@ if (props.default && !selectedOptions.value.includes(props.default)) {
 
 <style scoped>
 .dropdown {
-    @apply relative w-full h-10 text-white ml-auto rounded-lg ring-0;
-    background: linear-gradient(135deg, oklch(0.18 0 0) 0%, oklch(0.20 0 0) 100%);
-    border: 1px solid oklch(0.26 0 0);
+    @apply relative w-full h-10 text-white ml-auto rounded-lg ring-0 border-2;
+    @apply bg-bg-input border-border;
     padding: 0.75rem;
 }
 
 .dropdown:hover {
-    border-color: oklch(0.30 0 0);
+    @apply border-dark-650;
 }
 
 .dropdown:focus-within,
 .dropdown.opened {
-    border-color: oklch(0.72 0.15 145) !important;
-    outline: 1px solid oklch(0.72 0.15 145) !important;
-    outline-offset: 0;
+    @apply border-primary outline outline-1 outline-primary;
+    outline-offset: 0 !important;
 }
 
-@media (max-width: 810px) {
+@screen modal {
     .dropdown {
         @apply h-10;
         padding: 0.625rem;
@@ -225,40 +243,30 @@ if (props.default && !selectedOptions.value.includes(props.default)) {
 }
 
 .dropdown-counter {
-    @apply flex items-center gap-2 absolute;
-    right: 0.75rem;
-    top: 50%;
-    transform: translateY(-50%);
+    @apply flex items-center gap-2 absolute right-2;
 }
 
 .counter-badge {
-    @apply text-white text-xs font-semibold px-1.5 py-0.5 rounded-full text-center min-w-[18px] shadow-sm;
-    background: oklch(0.72 0.15 145);
+    @apply text-white text-xs font-semibold px-1.5 py-0.5 rounded-full text-center min-w-4.5 shadow-sm;
+    @apply bg-primary;
 }
 
 .dropdown-arrow {
     @apply min-w-4 min-h-4 transition-all duration-300;
-    display: flex;
-    align-items: center;
-    justify-content: center;
 }
 
 .dropdown-menu-portal {
-    @apply rounded-xl shadow-2xl;
-    background: linear-gradient(135deg, oklch(0.18 0 0) 0%, oklch(0.20 0 0) 100%);
-    border: 1px solid oklch(0.26 0 0);
-    backdrop-filter: blur(12px);
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2),
-        0 0 0 1px rgba(255, 255, 255, 0.05);
-    overflow-x: auto !important;
-    overflow-y: auto !important;
-    overscroll-behavior: contain !important;
-    touch-action: pan-x pan-y !important;
-    -webkit-overflow-scrolling: touch !important;
-    scrollbar-width: thin;
-    scrollbar-color: oklch(0.35 0 0) oklch(0.19 0 0);
+    @apply rounded-xl z-modal border-2 border-dark-650 bg-dark-400 shadow-dropdown;
     min-width: 200px;
-    max-width: 90vw;
+    max-width: min(90vw, 600px);
+    overflow-x: auto;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    touch-action: pan-x pan-y;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: thin;
+    scrollbar-color: theme('colors.dark.750') theme('colors.dark.350');
+    scrollbar-gutter: stable;
 }
 
 .dropdown-menu-portal::-webkit-scrollbar {
@@ -267,31 +275,37 @@ if (props.default && !selectedOptions.value.includes(props.default)) {
 }
 
 .dropdown-menu-portal::-webkit-scrollbar-track {
-    background: oklch(0.19 0 0);
+    @apply bg-transparent;
+    margin: 12px 0;
 }
 
 .dropdown-menu-portal::-webkit-scrollbar-thumb {
-    background: oklch(0.35 0 0);
-    border-radius: 3px;
+    @apply bg-dark-750 rounded-full;
+    border: 2px solid transparent;
+    background-clip: padding-box;
 }
 
 .dropdown-menu-portal::-webkit-scrollbar-thumb:hover {
-    background: oklch(0.45 0 0);
+    @apply bg-dark-800;
 }
 
 .dropdown-menu-portal.multi .option-list {
     @apply max-h-48 overflow-y-auto;
-    overscroll-behavior: contain !important;
-    touch-action: pan-y !important;
-    -webkit-overflow-scrolling: touch !important;
+    overscroll-behavior: contain;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    touch-action: pan-y;
+}
+
+.dropdown-menu-portal.multi .option-list::-webkit-scrollbar {
+    display: none;
 }
 
 .dropdown-item {
     @apply cursor-pointer text-left w-full text-white transition-all duration-200 flex justify-between items-center;
-    padding: 0.75rem 1rem;
-    font-size: 0.875rem;
-    font-weight: 500;
-    border-bottom: 1px solid rgba(61, 62, 68, 0.3);
+    @apply px-4 py-3 text-sm font-medium;
+    border-bottom: 1px solid theme('colors.dark.500 / 0.3');
 }
 
 .dropdown-item:last-child {
@@ -299,13 +313,11 @@ if (props.default && !selectedOptions.value.includes(props.default)) {
 }
 
 .dropdown-item:hover {
-    @apply bg-dark-600;
-    color: oklch(1 0 0);
+    @apply bg-dark-550 text-white;
 }
 
 .dropdown-item:active {
-    @apply bg-dark-650;
-    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
+    @apply bg-dark-650 shadow-input-inset;
 }
 
 .dropdown-item:first-child {
@@ -323,13 +335,12 @@ if (props.default && !selectedOptions.value.includes(props.default)) {
 
 /* Checkmark styling */
 .dropdown-item svg {
-    @apply w-4 h-4;
-    color: oklch(0.72 0.15 145);
+    @apply w-4 h-4 text-primary;
 }
 
 .selected-summary {
     @apply border-t bg-dark-550 w-full px-4 py-3;
-    border-top: 1px solid rgba(61, 62, 68, 0.5);
+    border-top: 1px solid theme('colors.dark.500 / 0.5');
 }
 
 .selected-count {
@@ -338,7 +349,7 @@ if (props.default && !selectedOptions.value.includes(props.default)) {
 
 .count-badge {
     @apply text-white text-xs font-semibold px-2 py-1 rounded-full shadow-sm;
-    background: oklch(0.72 0.15 145);
+    @apply bg-primary;
 }
 
 .count-label {
@@ -347,53 +358,20 @@ if (props.default && !selectedOptions.value.includes(props.default)) {
 
 .clear-button {
     @apply text-xs text-white transition-all duration-200 font-medium px-2 py-1.5 rounded-lg shadow-sm flex items-center justify-center;
-    background: oklch(0.55 0.22 25);
+    @apply bg-red-400 hover:bg-red-300;
     min-width: 32px;
 }
 
-.clear-button:hover {
-    background: oklch(0.60 0.22 25);
-}
-
 .done-button {
     @apply text-xs text-white transition-all duration-200 font-medium px-2 py-1.5 rounded-lg shadow-sm flex items-center justify-center;
-    background: oklch(0.72 0.15 145);
+    @apply bg-primary hover:bg-green-400;
     min-width: 32px;
 }
 
-.done-button:hover {
-    background: oklch(0.68 0.15 145);
-}
-
 @media (min-width: 640px) {
     .clear-button,
     .done-button {
         padding: 0.375rem 0.75rem;
     }
 }
-
-/* Transition animations */
-.dropdown-fade-enter-active {
-    @apply transition-all duration-300;
-}
-
-.dropdown-fade-leave-active {
-    @apply transition-all duration-200;
-}
-
-.dropdown-fade-enter-from {
-    @apply opacity-0;
-    transform: translateY(-8px) scale(0.95);
-}
-
-.dropdown-fade-leave-to {
-    @apply opacity-0;
-    transform: translateY(-4px) scale(0.98);
-}
-
-.dropdown-fade-enter-to,
-.dropdown-fade-leave-from {
-    @apply opacity-100;
-    transform: translateY(0) scale(1);
-}
 </style>

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/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

@@ -1,4 +1,5 @@
 import { ref, nextTick, onMounted, onUnmounted } from "vue";
+import { DEBUG } from "@/utils/debug";
 
 export function useDropdownPosition(dropdownRef, options = {}) {
     const menuStyle = ref({});
@@ -6,10 +7,9 @@ export function useDropdownPosition(dropdownRef, options = {}) {
         offset = { x: -1, y: 4 },
         zIndex = 50000,
         minWidth = null,
-        maxHeight = 160,
+        maxHeight = window.innerHeight * 0.8, // Use 80% of viewport height
         estimateHeight = null,
-        includeAdjacentButtons = false,
-        containerSelector = null
+        includeAdjacentButtons = false
     } = options;
 
     const calculateMenuPosition = () => {
@@ -24,7 +24,7 @@ export function useDropdownPosition(dropdownRef, options = {}) {
             const menuHeight = estimateHeight ? estimateHeight() : maxHeight;
 
             // Calculate width including adjacent buttons if specified
-            let menuWidth = minWidth || rect.width + 2;
+            let menuWidth = minWidth || rect.width;
 
             if (includeAdjacentButtons) {
                 // Look for parent container with buttons
@@ -109,8 +109,7 @@ export function useDropdownPosition(dropdownRef, options = {}) {
                 maxHeight: `${maxHeight}px`
             };
         } catch (error) {
-            console.warn("Error calculating dropdown position:", error);
-            // Fallback to basic positioning
+            if (DEBUG) console.warn("Error calculating dropdown position:", error);
             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/useRowSelection.js

@@ -12,7 +12,6 @@ export function useRowSelection(toggleCallback) {
   const DOUBLE_TAP_DELAY = 300
 
   const handleDoubleClick = (event) => {
-    // Don't trigger on button or checkbox clicks
     if (event.target.closest('button') || event.target.closest('.checkbox')) {
       return
     }
@@ -24,7 +23,6 @@ export function useRowSelection(toggleCallback) {
     const tapGap = currentTime - lastTapTime
 
     if (tapGap < DOUBLE_TAP_DELAY && tapGap > 0) {
-      // Don't trigger on button or checkbox taps
       if (!event.target.closest('button') && !event.target.closest('.checkbox')) {
         event.preventDefault()
         toggleCallback()
@@ -34,7 +32,6 @@ export function useRowSelection(toggleCallback) {
   }
 
   const handleTouchEnd = (event) => {
-    // Prevent default touch behavior on buttons/checkboxes
     if (event.target.closest('button') || event.target.closest('.checkbox')) {
       return
     }

package/src/composables/useTicketPricing.js

@@ -0,0 +1,16 @@
+export function useTicketPricing() {
+    const isTotalPrice = (line, index, lines) => {
+        const trimmed = line.trim();
+        if (!trimmed) return false;
+
+        const nonEmptyLines = lines.filter(l => l.trim());
+        const isLastLine = index === lines.lastIndexOf(nonEmptyLines[nonEmptyLines.length - 1]);
+
+        if (!isLastLine) return false;
+
+        const totalPricePattern = /^([$€£¥₹₽¢]|[A-Z]{3})\s*[\d,]+\.?\d*$/;
+        return totalPricePattern.test(trimmed) && !trimmed.includes('(') && !trimmed.includes(')');
+    };
+
+    return { isTotalPrice };
+}

package/src/composables/useWindowDimensions.js

@@ -0,0 +1,21 @@
+import { ref, onMounted, onUnmounted } from "vue";
+
+export function useWindowDimensions() {
+    const windowHeight = ref(window.innerHeight);
+    const windowWidth = ref(window.innerWidth);
+
+    const updateDimensions = () => {
+        windowHeight.value = window.innerHeight;
+        windowWidth.value = window.innerWidth;
+    };
+
+    onMounted(() => {
+        window.addEventListener("resize", updateDimensions);
+    });
+
+    onUnmounted(() => {
+        window.removeEventListener("resize", updateDimensions);
+    });
+
+    return { windowHeight, windowWidth };
+}

package/src/libs/Filter.js

@@ -1,5 +1,5 @@
-const debug = false;
-const log = (...args) => debug && console.log("[filter]", ...args);
+import { DEBUG } from "@/utils/debug";
+const log = (...args) => DEBUG && console.log("[filter]", ...args);
 
 const colors = {
     HIGHLIGHT: "#d3f8e2",
@@ -30,27 +30,23 @@ const isWheelchair = (p) => {
 };
 
 const sortAlphaNum = (a, b) => {
-    var reA = /[^a-zA-Z]/g;
-    var reN = /[^0-9]/g;
-    var AInt = parseInt(a, 10);
-    var BInt = parseInt(b, 10);
+    const reA = /[^a-zA-Z]/g;
+    const reN = /[^0-9]/g;
+    const AInt = parseInt(a, 10);
+    const BInt = parseInt(b, 10);
 
     if (isNaN(AInt) && isNaN(BInt)) {
-        var aA = a.replace(reA, "");
-        var bA = b.replace(reA, "");
+        const aA = a.replace(reA, "");
+        const bA = b.replace(reA, "");
         if (aA === bA) {
-            var aN = parseInt(a.replace(reN, ""), 10);
-            var bN = parseInt(b.replace(reN, ""), 10);
+            const aN = parseInt(a.replace(reN, ""), 10);
+            const bN = parseInt(b.replace(reN, ""), 10);
             return aN === bN ? 0 : aN > bN ? 1 : -1;
         } else {
             return aA > bA ? 1 : -1;
         }
-    } else if (isNaN(AInt)) {
-        //A is not an Int
-        return 1; //to make alphanumeric sort first return -1 here
     } else if (isNaN(BInt)) {
-        //B is not an Int
-        return -1; //to make alphanumeric sort first return 1 here
+        return -1;
     } else {
         return AInt > BInt ? 1 : -1;
     }
@@ -313,7 +309,7 @@ export default class FilterBuilder {
         });
 
         if (existingFilter) {
-            console.log("Filter already exists:", existingFilter);
+            if (DEBUG) log("Filter already exists:", existingFilter);
             return; // Don't add the filter if it already exists
         }
 
@@ -385,7 +381,7 @@ export default class FilterBuilder {
             } else {
                 color = this.expandedFilter === filter.id ? colors.SELECTED_EXPANDED : colors.SELECTED;
             }
-            
+
             switch (type) {
                 case this.filterTypes.NORMAL:
                     // If it has no 'rows' property
@@ -416,7 +412,6 @@ export default class FilterBuilder {
                     break;
 
                 case this.filterTypes.CATCH_ALL_FLOOR:
-                    // this.cssClasses += floors.map((f) => `path[name="${f}"] {fill: ${color} !important;}`).join("\n") + "\n";
                     break;
 
                 case this.filterTypes.INVALID:
@@ -432,7 +427,7 @@ export default class FilterBuilder {
             const color = colors.UNSELECTABLE;
             this.cssClasses += `.svg-wrapper path[section="${section}"][row="${row}"] {stroke: ${color} !important;}\n`;
         });
-        
+
         log("Generated CSS:", this.cssClasses);
     }
 
@@ -533,7 +528,6 @@ export default class FilterBuilder {
 
     deleteFilterById(id) {
         this.filters = this.filters.filter((f) => f.id !== id);
-        // this.updateHooks = this.updateHooks.filter((i) => id !== i);
         if (this.expandedFilter === id) this.expandedFilter = "";
         this.updateCss();
         this.updateHooks.forEach((fn) => fn());