@necrolab/dashboard 0.5.12 → 0.5.13

package/src/components/Editors/Profile/CreateProfile.vue

@@ -9,13 +9,13 @@
         <div>
             <div class="my-3 grid grid-cols-12 gap-3">
                 <!-- Profile tag -->
-                <div class="input-wrapper z-dropdown col-span-4">
+                <div class="input-wrapper col-span-4">
                     <label class="label-override mb-2">
                         Profile Tag
                         <TagIcon />
                     </label>
                     <Dropdown
-                        :class="`input-default dropdown w-full ${errors.includes('profileTag') ? 'error' : ''}`"
+                        :class="`input-default dropdown w-full`"
                         :default="ui.profile.tags[0]"
                         :options="ui.profile.tags"
                         :onClick="(f) => (profile.tag = f)"
@@ -23,22 +23,16 @@
                 </div>
 
                 <!-- Card Number -->
-                <div class="input-wrapper z-0 col-span-8">
-                    <label class="label-override mb-2">
-                        Card Number
-                        <CartIcon />
-                    </label>
-                    <div :class="`input-default ${errors.includes('cardNumber') ? 'error' : ''}`">
-                        <input
-                            ref="cardNumberInput"
-                            placeholder="Enter card number"
-                            v-model="displayCardNumber"
-                            maxlength="23"
-                            inputmode="numeric"
-                            @input="handleCreditCardUpdate"
-                            @focus="formatCardNumberDisplay" />
-                    </div>
-                </div>
+                <FormField label="Card Number" :icon="CartIcon" :error="errors.includes('cardNumber')" z-index="0" class="col-span-8">
+                    <input
+                        ref="cardNumberInput"
+                        placeholder="Enter card number"
+                        v-model="displayCardNumber"
+                        maxlength="23"
+                        inputmode="numeric"
+                        @input="handleCreditCardUpdate"
+                        @focus="formatCardNumberDisplay" />
+                </FormField>
 
                 <!-- Country chooser -->
                 <div class="input-wrapper col-span-2">
@@ -55,7 +49,7 @@
 
                 <!-- Exp Year -->
                 <div class="input-wrapper col-span-5">
-                    <label class="label-override z-0 mb-2">
+                    <label class="label-override mb-2">
                         Expiry Year
                         <TimerIcon />
                     </label>
@@ -74,7 +68,7 @@
                 </div>
 
                 <!-- Exp Month -->
-                <div class="input-wrapper z-2 col-span-5">
+                <div class="input-wrapper col-span-5">
                     <label class="label-override mb-2">
                         Expiry Month
                         <TimerIcon />
@@ -88,40 +82,28 @@
                 </div>
 
                 <!-- CVV -->
-                <div class="input-wrapper z-0 col-span-6 md:col-span-4">
-                    <label class="label-override mb-2">
-                        CVV
-                        <ShieldIcon />
-                    </label>
-                    <div :class="`input-default ${errors.includes('cvv') ? 'error' : ''}`">
-                        <input
-                            placeholder="183"
-                            min="100"
-                            max="9999"
-                            maxlength="4"
-                            minlength="3"
-                            v-model="profile.cvv" />
-                    </div>
-                </div>
+                <FormField label="CVV" :icon="ShieldIcon" :error="errors.includes('cvv')" z-index="0" class="col-span-6 md:col-span-4">
+                    <input
+                        placeholder="183"
+                        min="100"
+                        max="9999"
+                        maxlength="4"
+                        minlength="3"
+                        v-model="profile.cvv" />
+                </FormField>
 
                 <!-- City -->
-                <div class="input-wrapper z-0 col-span-6 md:col-span-4">
-                    <label class="label-override mb-2">
-                        City
-                        <StadiumIcon />
-                    </label>
-                    <div :class="`input-default ${errors.includes('city') ? 'error' : ''}`">
-                        <input placeholder="Denver" v-model="profile.city" />
-                    </div>
-                </div>
+                <FormField label="City" :icon="StadiumIcon" :error="errors.includes('city')" z-index="0" class="col-span-6 md:col-span-4">
+                    <input placeholder="Denver" v-model="profile.city" />
+                </FormField>
 
                 <!-- State -->
-                <div class="input-wrapper z-1 col-span-6 md:col-span-4">
+                <div class="input-wrapper col-span-6 md:col-span-4">
                     <label class="label-override mb-2">
                         State
                         <SandclockIcon />
                     </label>
-                    <div v-if="profile.country === 'US'" :class="`${errors.includes('state') ? 'error' : ''}`">
+                    <div v-if="profile.country === 'US'">
                         <Dropdown
                             class="input-default w-full"
                             default="Select State"
@@ -131,32 +113,20 @@
                             rightAmount="right-2"
                             :value="profile.state" />
                     </div>
-                    <div v-else :class="`input-default ${errors.includes('state') ? 'error' : ''}`">
+                    <div v-else class="input-default">
                         <input disabled placeholder="N/A" value="" />
                     </div>
                 </div>
 
                 <!-- Zip -->
-                <div class="input-wrapper z-0 col-span-6 md:col-span-4">
-                    <label class="label-override mb-2">
-                        Zip
-                        <KeyIcon />
-                    </label>
-                    <div :class="`input-default ${errors.includes('zipCode') ? 'error' : ''}`">
-                        <input placeholder="10005" type="number" min="1" max="12" v-model="profile.zipCode" />
-                    </div>
-                </div>
+                <FormField label="Zip" :icon="KeyIcon" :error="errors.includes('zipCode')" z-index="0" class="col-span-6 md:col-span-4">
+                    <input placeholder="10005" type="number" min="1" max="12" v-model="profile.zipCode" />
+                </FormField>
 
                 <!-- Address -->
-                <div class="input-wrapper z-0 col-span-6 md:col-span-4">
-                    <label class="label-override mb-2">
-                        Address
-                        <HandIcon />
-                    </label>
-                    <div :class="`input-default ${errors.includes('address') ? 'error' : ''}`">
-                        <input placeholder="100 5th Avenue" v-model="profile.address" />
-                    </div>
-                </div>
+                <FormField label="Address" :icon="HandIcon" :error="errors.includes('address')" z-index="0" class="col-span-6 md:col-span-4">
+                    <input placeholder="100 5th Avenue" v-model="profile.address" />
+                </FormField>
 
                 <!-- Generate -->
                 <div class="input-wrapper z-0 col-span-6 md:col-span-4">
@@ -199,12 +169,7 @@
                 <div class="col-span-6">
                     <label class="label-override mb-2">Status</label>
                     <div class="flex items-center gap-3 h-10">
-                        <div v-if="ui.currentlyEditing.enabled" class="enabled-badge-large">
-                            <CheckmarkIcon />
-                        </div>
-                        <div v-else class="disabled-badge-large">
-                            <CloseXIcon />
-                        </div>
+                        <StatusBadge :enabled="ui.currentlyEditing.enabled" size="large" />
                         <span class="text-sm font-medium" :class="ui.currentlyEditing.enabled ? 'text-green-400' : 'text-red-400'">
                             {{ ui.currentlyEditing.enabled ? 'Enabled' : 'Disabled' }}
                         </span>
@@ -222,75 +187,22 @@
     </Modal>
 </template>
 <style lang="scss" scoped>
-.enabled-badge-large {
-    @apply flex items-center justify-center rounded-full;
-    background: oklch(0.72 0.15 145 / 0.12);
-    border: 1.5px solid oklch(0.72 0.15 145);
-    width: 26px;
-    height: 26px;
-    padding: 0;
-
-    svg {
-        color: oklch(0.72 0.15 145) !important;
-        width: 14px !important;
-        height: auto !important;
-        max-height: 14px !important;
-        display: block;
-        margin: 0;
-    }
-
-    svg path {
-        stroke: oklch(0.72 0.15 145) !important;
-        fill: oklch(0.72 0.15 145) !important;
-    }
-}
-
-.disabled-badge-large {
-    @apply flex items-center justify-center rounded-full;
-    background: oklch(0.60 0.20 25 / 0.12);
-    border: 1.5px solid oklch(0.60 0.20 25);
-    width: 26px;
-    height: 26px;
-    padding: 0;
-    color: oklch(0.60 0.20 25) !important;
+.label-override {
+    @apply flex items-center;
+    color: #e1e1e4 !important;
 
     svg {
-        color: oklch(0.60 0.20 25) !important;
-        width: 14px !important;
-        height: 14px !important;
-        display: block;
-        margin: 0;
-        fill: oklch(0.60 0.20 25) !important;
-    }
-
-    svg path {
-        stroke: oklch(0.60 0.20 25) !important;
-        fill: oklch(0.60 0.20 25) !important;
-    }
-}
+        @apply ml-2;
 
-.input-wrapper {
-    label {
-        @apply flex;
+        path {
+            fill: #e1e1e4 !important;
+        }
     }
 }
-.z-0 {
-    z-index: 0 !important;
-}
-.z-1 {
-    z-index: 1 !important;
-}
-.z-2 {
-    z-index: 2 !important;
-}
-
-.error {
-    border-width: 2px !important;
-    border-color: rgb(238 130 130) !important;
-}
 </style>
 <script setup>
 import Modal from "@/components/ui/Modal.vue";
+import FormField from "@/components/ui/FormField.vue";
 import {
     MailIcon,
     CartIcon,
@@ -302,11 +214,10 @@ import {
     SandclockIcon,
     TimerIcon,
     TagIcon,
-    WildcardIcon,
-    CheckmarkIcon,
-    CloseXIcon
+    WildcardIcon
 } from "@/components/icons";
 import { EditIcon } from "@/components/icons";
+import StatusBadge from "@/components/ui/StatusBadge.vue";
 import TagLabel from "@/components/Editors/TagLabel.vue";
 import ProfileCountryChooser from "@/components/Editors/Profile/ProfileCountryChooser.vue";
 import { useUIStore } from "@/stores/ui";

package/src/components/Editors/Profile/Profile.vue

@@ -32,13 +32,8 @@
         <div class="col-span-1">
             <h4 class="text-white">{{ expDate() }}</h4>
         </div>
-        <div class="col-span-1">
-            <div v-if="props.profile.enabled" class="enabled-badge">
-                <CheckmarkIcon class="w-3.5 h-3.5" />
-            </div>
-            <div v-else class="disabled-badge">
-                <CloseXIcon class="w-3.5 h-3.5" />
-            </div>
+        <div class="col-span-1 flex justify-center">
+            <StatusBadge :enabled="props.profile.enabled" size="small" />
         </div>
 
         <div class="col-span-1 hidden lg:block">
@@ -48,7 +43,7 @@
         </div>
 
         <div class="col-span-1 flex">
-            <ul class="profile-buttons">
+            <ActionButtonGroup>
                 <li>
                     <button @click="edit">
                         <EditIcon />
@@ -67,192 +62,25 @@
                 <li>
                     <button @click="deleteProfile"><TrashIcon /></button>
                 </li>
-            </ul>
+            </ActionButtonGroup>
         </div>
     </Row>
 </template>
 <style lang="scss" scoped>
-.enabled-badge {
-    @apply flex items-center justify-center mx-auto rounded-full;
-    background: oklch(0.72 0.15 145 / 0.12);
-    border: 1.5px solid oklch(0.72 0.15 145);
-    width: 24px;
-    height: 24px;
-    padding: 0;
-
-    svg {
-        color: oklch(0.72 0.15 145) !important;
-        width: 12px !important;
-        height: auto !important;
-        max-height: 12px !important;
-        display: block;
-        margin: 0;
-    }
-
-    svg path {
-        stroke: oklch(0.72 0.15 145) !important;
-        fill: oklch(0.72 0.15 145) !important;
-    }
-}
-
-.disabled-badge {
-    @apply flex items-center justify-center mx-auto rounded-full;
-    background: oklch(0.60 0.20 25 / 0.12);
-    border: 1.5px solid oklch(0.60 0.20 25);
-    width: 24px;
-    height: 24px;
-    padding: 0;
-    color: oklch(0.60 0.20 25) !important;
-
-    svg {
-        color: oklch(0.60 0.20 25) !important;
-        width: 12px !important;
-        height: 12px !important;
-        display: block;
-        margin: 0;
-        fill: oklch(0.60 0.20 25) !important;
-    }
-
-    svg path {
-        stroke: oklch(0.60 0.20 25) !important;
-        fill: oklch(0.60 0.20 25) !important;
-    }
-}
-
 h4 {
     @apply text-center;
 }
-.profile-buttons {
-    @apply mx-auto flex items-center justify-center rounded;
-    background: oklch(0.2046 0 0);
-    border: 2px solid oklch(0.2809 0 0);
-    padding: 3px;
-    gap: 2px;
-    flex-shrink: 0;
-    overflow: visible;
-
-    button {
-        @apply relative flex items-center justify-center rounded border-0 outline-0 transition-all duration-150;
-        background: transparent;
-        width: 28px;
-        height: 28px;
-        color: oklch(0.90 0 0);
-        border-radius: 6px;
-
-        &:hover {
-            background: oklch(0.72 0.15 145 / 0.15);
-            color: oklch(1 0 0);
-        }
-
-        &:active {
-            background: oklch(0.72 0.15 145 / 0.25);
-        }
-    }
-
-    svg,
-    img {
-        width: 16px;
-        height: 16px;
-        position: relative;
-        z-index: 1;
-    }
-
-    svg path {
-        fill: currentColor;
-    }
-}
-
-// Tablet sizing - medium buttons
-@media (min-width: 768px) and (max-width: 1023px) {
-    .profile-buttons {
-        padding: 2px;
-        gap: 1px;
-        border-radius: 6px;
-
-        button {
-            width: 26px;
-            height: 26px;
-            border-radius: 5px;
-        }
-
-        svg,
-        img {
-            width: 14px;
-            height: 14px;
-        }
-    }
-}
-
-// Desktop sizing - large buttons
-@media (min-width: 1024px) {
-    .profile-buttons {
-        padding: 3px;
-        gap: 2px;
-        border-radius: 8px;
-
-        button {
-            width: 28px;
-            height: 28px;
-            border-radius: 6px;
-        }
-
-        svg,
-        img {
-            width: 16px;
-            height: 16px;
-        }
-    }
-}
-
-// Mobile specific styling
-@media (max-width: 640px) {
-    .profile-buttons {
-        padding: 1px;
-        gap: 1px;
-        border-radius: 4px;
-        border: 2px solid oklch(0.2809 0 0) !important;
-        max-width: 100%;
-        min-height: 28px;
-        height: auto;
-        flex-wrap: wrap;
-        justify-content: center;
-        align-items: center;
-        background: oklch(0.2046 0 0);
-
-        button {
-            width: 20px;
-            height: 20px;
-            border-radius: 3px;
-            min-width: 20px;
-            border: none !important;
-            flex-shrink: 0;
-            margin: 0.5px;
-            background: transparent;
-
-            &:hover {
-                background: oklch(0.72 0.15 145 / 0.15);
-            }
-
-            &:active {
-                background: oklch(0.72 0.15 145 / 0.25);
-            }
-        }
-
-        svg,
-        img {
-            width: 12px;
-            height: 12px;
-        }
-    }
-}
 </style>
 <script setup>
 import { Row } from "@/components/Table";
-import { PlayIcon, TrashIcon, BagWhiteIcon, PauseIcon, EditIcon, CheckmarkIcon, CloseXIcon } from "@/components/icons";
+import { PlayIcon, TrashIcon, BagWhiteIcon, PauseIcon, EditIcon } from "@/components/icons";
 import Checkbox from "@/components/ui/controls/atomic/Checkbox.vue";
+import StatusBadge from "@/components/ui/StatusBadge.vue";
+import ActionButtonGroup from "@/components/ui/ActionButtonGroup.vue";
 import { useUIStore } from "@/stores/ui";
 import { validateCard } from "@/stores/utils";
 import TagLabel from "@/components/Editors/TagLabel.vue";
+import { useRowSelection } from "@/composables/useRowSelection";
 
 const ui = useUIStore();
 
@@ -280,38 +108,7 @@ const edit = () => {
 const deleteProfile = async () => await ui.deleteProfile(props.profile.id);
 
 // Double-click/tap selection
-let lastTapTime = 0;
-const DOUBLE_TAP_DELAY = 300; // ms
-
-const handleDoubleClick = (event) => {
-    // Prevent if clicking on buttons or checkbox
-    if (event.target.closest('button') || event.target.closest('.checkbox')) {
-        return;
-    }
+const { handleDoubleClick, handleTouchStart, handleTouchEnd } = useRowSelection(() => {
     ui.toggleProfileSelected(props.profile.id);
-};
-
-const handleTouchStart = (event) => {
-    // Store touch time for double-tap detection
-    const currentTime = Date.now();
-    const tapGap = currentTime - lastTapTime;
-
-    if (tapGap < DOUBLE_TAP_DELAY && tapGap > 0) {
-        // Double-tap detected
-        if (!event.target.closest('button') && !event.target.closest('.checkbox')) {
-            event.preventDefault(); // Prevent zoom
-            ui.toggleProfileSelected(props.profile.id);
-        }
-    }
-
-    lastTapTime = currentTime;
-};
-
-const handleTouchEnd = (event) => {
-    // Prevent default to avoid potential zoom issues
-    // but only if not interacting with buttons/checkbox
-    if (event.target.closest('button') || event.target.closest('.checkbox')) {
-        return;
-    }
-};
+});
 </script>

package/src/components/Editors/Profile/ProfileView.vue

@@ -75,7 +75,6 @@ h4 {
 }
 
 .empty-state {
-    color: #969696;
     font-size: 14px;
     font-weight: 500;
 }

package/src/components/Filter/Filter.vue

@@ -289,22 +289,22 @@ props.filterBuilder.onUpdate(() => {
 <style scoped>
 .filter-card {
     @apply bg-dark-500 border-dark-550 relative;
-    border: 1px solid rgba(61, 62, 68, 0.3);
+    @apply border-dark-625/30;
+    border-width: 1px;
     margin-bottom: 8px;
     transition: all 0.15s ease-out;
 }
 
 .filter-card:hover:not(.expanded-filter) {
-    border-color: rgba(61, 62, 68, 0.6);
-    background-color: rgba(46, 47, 52, 0.8);
+    @apply border-dark-625/60 bg-dark-475/80;
 }
 
 .expanded-filter:hover {
-    border-color: rgba(61, 62, 68, 0.8);
+    @apply border-dark-625/80;
 }
 
 .filter-card + .filter-card {
-    border-top: 1px solid rgba(61, 62, 68, 0.2);
+    @apply border-t border-t-dark-625/20;
 }
 
 .filter-type-badge {
@@ -333,24 +333,23 @@ props.filterBuilder.onUpdate(() => {
 
 .filter-input {
     @apply border border-dark-550 rounded px-2 py-1.5 text-sm text-white focus:outline-none transition-colors;
-    background-color: rgba(35, 36, 41, 0.9);
-    color: white;
+    @apply bg-dark-450/90;
 }
 
 .filter-input:focus {
     border-color: oklch(0.28 0 0);
-    background-color: rgba(46, 47, 52, 0.9);
+    @apply bg-dark-475/90;
 }
 
 .filter-input::placeholder {
-    color: #9CA3AF;
+    @apply text-light-400;
 }
 
 .filter-action-btn {
     @apply flex items-center justify-center rounded-full transition-all duration-200 border-2 border-transparent;
     width: 28px;
     height: 28px;
-    color: #9CA3AF;
+    @apply text-light-400;
     background-color: rgba(35, 36, 41, 0.8);
     backdrop-filter: blur(4px);
 }
@@ -369,25 +368,23 @@ props.filterBuilder.onUpdate(() => {
 }
 
 .drag-btn:hover {
-    background-color: rgba(68, 69, 75, 0.8);
+    @apply bg-dark-675/80;
     border-color: oklch(0.28 0 0);
 }
 
 .delete-btn:hover {
-    background-color: rgba(239, 68, 68, 0.8);
-    border-color: #F87171;
-    color: #F87171;
+    @apply bg-error-500/80 border-error-400 text-error-400;
 }
 
 .drag-handle.sortable-chosen {
     border: 1px solid oklch(0.28 0 0);
-    background-color: rgba(68, 69, 75, 0.2);
+    @apply bg-dark-675/20;
 }
 
 .filter-card.sortable-ghost {
     @apply opacity-50;
     border: 1px solid oklch(0.28 0 0);
-    background-color: rgba(68, 69, 75, 0.1);
+    @apply bg-dark-675/10;
 }
 
 .filter-card.sortable-drag {
@@ -412,7 +409,7 @@ props.filterBuilder.onUpdate(() => {
 }
 
 .excluded-filter {
-    border-left: 4px solid #EE8282;
+    @apply border-l-4 border-l-error-300;
 }
 
 .normal-filter {

package/src/components/Filter/FilterPreview.vue

@@ -60,12 +60,6 @@
     }
 }
 
-.input-wrapper {
-    label {
-        @apply flex;
-    }
-}
-
 /* Prism.js syntax highlighting styles */
 .editor-container {
     position: relative;

package/src/components/Table/Row.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="px-2 md:px-4 text-xs grid text-white py-4 items-center h-full hover:bg-dark-500 transition-colors">
+    <div class="px-2 md:px-4 text-xs grid text-white py-4 items-center min-h-full hover:bg-dark-500 transition-colors">
         <slot />
     </div>
 </template>