@necrolab/dashboard 0.5.15 → 0.5.16

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

@@ -1,94 +1,69 @@
 <template>
-    <Table>
-        <Header class="grid-cols-7 text-center lg:grid-cols-8">
-            <div class="col-span-3 flex lg:col-span-2">
+    <div class="table-component relative box-border flex flex-col rounded-lg bg-dark-500 bg-clip-padding overflow-hidden shadow-sm">
+        <Header class="grid-cols-4 text-center sm:grid-cols-5 md:grid-cols-7 lg:grid-cols-8">
+            <div class="col-span-2 sm:col-span-2 md:col-span-3 lg:col-span-2 flex items-center justify-start">
                 <Checkbox
-                    class="mr-3"
+                    class="ml-2 mr-4 flex-shrink-0"
                     :toggled="ui.mainCheckbox.profiles"
                     @valueUpdate="ui.toggleMainCheckbox('profiles')"
                     :isHeader="true" />
-                <div class="mx-auto flex items-center" @click="ui.toggleSort('eventId')">
-                    <ProfileIcon class="mr-0 h-4 w-4 md:mr-3" />
-                    <h4 class="hidden md:flex">Profile Name</h4>
+                <div class="mx-auto flex cursor-pointer items-center" @click="ui.toggleSort('eventId')">
+                    <ProfileIcon class="h-4 w-4" />
+                    <h4 class="hidden text-white md:flex md:ml-3">Profile Name</h4>
                 </div>
             </div>
-            <div class="col-span-1 flex items-center justify-center lg:col-span-2" v-once>
-                <CartIcon class="mr-0 h-4 w-4 md:mr-3" />
-                <h4 class="hidden md:flex">Card Number</h4>
+            <div class="col-span-1 lg:col-span-2 hidden md:flex items-center justify-center" v-once>
+                <CartIcon class="h-4 w-4" />
+                <h4 class="hidden text-white md:flex md:ml-3">Card Number</h4>
             </div>
-            <div class="col-span-1 flex items-center justify-center" v-once>
-                <TimerIcon class="mr-0 h-4 w-4 md:mr-3" />
-                <h4 class="hidden md:flex">Expiration</h4>
+            <div class="col-span-1 hidden md:flex items-center justify-center" v-once>
+                <TimerIcon class="h-4 w-4" />
+                <h4 class="hidden text-white md:flex md:ml-3">Expiration</h4>
             </div>
             <div class="col-span-1 flex items-center justify-center" v-once>
-                <CheckmarkIcon class="mr-0 h-4 w-4 md:mr-3" />
-                <h4 class="hidden md:flex">Enabled</h4>
+                <CheckmarkIcon class="h-4 w-4" />
+                <h4 class="hidden text-white md:flex md:ml-3">Enabled</h4>
             </div>
-            <div class="col-span-1 hidden items-center justify-center lg:flex" v-once>
-                <TicketIcon class="mr-0 h-4 w-4 lg:mr-3" />
-                <h4 class="hidden lg:flex">Tags</h4>
+            <div class="col-span-1 hidden lg:flex items-center justify-center" v-once>
+                <TicketIcon class="h-4 w-4" />
+                <h4 class="hidden text-white lg:flex lg:ml-3">Tags</h4>
             </div>
             <div class="col-span-1 flex items-center justify-center" v-once>
-                <ClickIcon class="mr-0 h-4 w-4 md:mr-3" />
-                <h4 class="hidden md:flex">Actions</h4>
+                <ClickIcon class="h-4 w-4" />
+                <h4 class="hidden text-white md:flex md:ml-3">Actions</h4>
             </div>
         </Header>
         <div
             v-if="toRender.length != 0"
-            class="hidden-scrollbars stop-pan flex flex-col divide-y divide-dark-650 overflow-y-auto overflow-x-hidden"
+            class="hidden-scrollbars flex flex-col divide-y divide-dark-650 overflow-y-auto overflow-x-hidden transition-colors duration-150 table-scroll"
             :style="{ maxHeight: dynamicTableHeight }">
-            <div v-for="(profile, i) in toRender" :key="profile.id || profile.index" class="profile-row-container">
+            <div
+                v-for="(profile, i) in toRender"
+                :key="profile.id || profile.index"
+                class="min-h-16 flex-shrink-0 hover:bg-dark-550">
                 <Profile
                     :class="i % 2 == 1 ? 'table-row-even' : 'table-row-odd'"
                     :profile="profile" />
             </div>
         </div>
-        <div v-else class="empty-state flex flex-col items-center justify-center bg-dark-400 py-8 text-center">
-            <ProfileIcon class="mb-3 h-12 w-12 text-dark-400 opacity-50" />
-            <p class="text-sm text-light-400">No profiles found</p>
-            <p class="mt-1 text-xs text-light-500">Create profiles to get started</p>
-        </div>
-    </Table>
+        <EmptyState v-else :icon="ProfileIcon" message="No profiles found" subtitle="Create profiles to get started" />
+    </div>
 </template>
-<style lang="scss" scoped>
-.profile-row-container {
-    min-height: 64px;
-    flex-shrink: 0;
-    transition: background-color 0.15s ease;
-
-    &:hover {
-        @apply bg-dark-550 !important;
-    }
-}
-
-h4 {
-    @apply text-white;
-}
-
-.stop-pan {
-    touch-action: pan-y pan-up pan-down;
-}
-
-.max-h-big-prof {
-    max-height: calc(100vh - 20rem);
-    overflow: hidden;
-}
-
-.empty-state {
-    font-size: 14px;
-    font-weight: 500;
-}
-</style>
 <script setup>
-import { Table, Header } from "@/components/Table";
+import { Header } from "@/components/Table";
 import { CartIcon, TicketIcon, ClickIcon, TimerIcon, ProfileIcon, CheckmarkIcon } from "@/components/icons";
 import Profile from "./Profile.vue";
 import Checkbox from "@/components/ui/controls/atomic/Checkbox.vue";
+import EmptyState from "@/components/ui/EmptyState.vue";
 import { useUIStore } from "@/stores/ui";
-import { computed, ref, onMounted, onUnmounted } from "vue";
+import { useDynamicTableHeight } from "@/composables/useDynamicTableHeight";
+import { computed, ref } from "vue";
 
 const props = defineProps({
-    profiles: { type: Object }
+    profiles: {
+        type: Object,
+        required: true
+    }
 });
 
 const ui = useUIStore();
@@ -111,43 +86,18 @@ const toRender = computed(() => {
     return rendered;
 });
 
-// Dynamic height calculation for perfect item fitting
-const windowHeight = ref(window.innerHeight);
-const windowWidth = ref(window.innerWidth);
-
-const updateDimensions = () => {
-    windowHeight.value = window.innerHeight;
-    windowWidth.value = window.innerWidth;
+// Layout constants for dynamic table height calculation
+const LAYOUT_CONSTANTS = {
+    TOP_RESERVED_SPACE: 180, // Page header + search controls + gaps (router-wrapper handles navbar, no UTILS section)
+    BOTTOM_BUFFER: 40, // Margin at bottom
+    ROW_HEIGHT: 64, // Profile row height in pixels
+    MIN_ROWS_TO_SHOW: 2 // Minimum number of rows to display
 };
 
-onMounted(() => {
-    window.addEventListener("resize", updateDimensions);
-});
-
-onUnmounted(() => {
-    window.removeEventListener("resize", updateDimensions);
-});
-
-const dynamicTableHeight = computed(() => {
-    // Calculate available space for profiles table with conservative buffer
-    const headerHeight = 60; // Header + navbar
-    const titleHeight = 50; // Profiles title and controls
-    const searchHeight = 50; // Search and filter controls
-    const margins = windowWidth.value >= 1024 ? 40 : 25;
-    const bufferSpace = 50; // Conservative buffer to prevent partial items
-
-    const totalUsedSpace = headerHeight + titleHeight + searchHeight + margins + bufferSpace;
-    const availableHeight = windowHeight.value - totalUsedSpace;
-
-    // Profile row height is always 64px
-    const rowHeight = 64;
-    const minRowsToShow = 2;
-    const minHeight = minRowsToShow * rowHeight;
-
-    // Calculate exact number of complete rows that fit with conservative approach
-    const maxCompleteRows = Math.floor(Math.max(availableHeight, minHeight) / rowHeight);
-    const exactHeight = maxCompleteRows * rowHeight;
-
-    return exactHeight + "px";
+const { dynamicTableHeight } = useDynamicTableHeight({
+    topReservedSpace: LAYOUT_CONSTANTS.TOP_RESERVED_SPACE,
+    bottomBuffer: LAYOUT_CONSTANTS.BOTTOM_BUFFER,
+    rowHeight: LAYOUT_CONSTANTS.ROW_HEIGHT,
+    minRowsToShow: LAYOUT_CONSTANTS.MIN_ROWS_TO_SHOW
 });
 </script>

package/src/components/Editors/TagLabel.vue

@@ -1,64 +1,25 @@
 <template>
-    <div class="tag-pill">
-        <span class="tag-text">{{ formatText(props.text) }}</span>
+    <div class="inline-flex min-w-8 max-w-20 items-center justify-center rounded-full border-2 border-accent-green/25 bg-accent-green/12 px-2.5 py-1
+                lg:max-w-16 lg:px-2 lg:py-[3.2px]
+                md:max-w-14 md:px-[6.4px] md:py-[3.2px]
+                max-md:max-w-12 max-md:px-[5.6px] max-md:py-[2.4px]">
+        <span class="truncate text-xs+ font-semibold leading-tight tracking-[0.015em] text-accent-green
+                     lg:text-2xs
+                     md:text-[9.6px]
+                     max-md:text-[9.2px]">
+            {{ formatText(props.text) }}
+        </span>
     </div>
 </template>
 
-<style lang="scss" scoped>
-.tag-pill {
-    @apply inline-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 / 0.25);
-    padding: 0.25rem 0.625rem;
-    min-width: 2rem;
-    max-width: 5rem;
-}
-
-.tag-text {
-    @apply truncate font-semibold;
-    color: oklch(0.72 0.15 145);
-    font-size: 0.6875rem;
-    line-height: 1.2;
-    letter-spacing: 0.015em;
-}
-
-// Responsive design
-@media (max-width: 1024px) {
-    .tag-pill {
-        padding: 0.2rem 0.5rem;
-        max-width: 4rem;
-    }
-
-    .tag-text {
-        font-size: 0.625rem;
-    }
-}
-
-@media (max-width: 768px) {
-    .tag-pill {
-        padding: 0.1875rem 0.4rem;
-        max-width: 3.5rem;
-    }
-
-    .tag-text {
-        font-size: 0.6rem;
-    }
-}
-
-@media (max-width: 480px) {
-    .tag-pill {
-        padding: 0.15rem 0.35rem;
-        max-width: 3rem;
-    }
-
-    .tag-text {
-        font-size: 0.575rem;
-    }
-}
-</style>
 
 <script setup>
-const props = defineProps({ text: { type: String } });
+const props = defineProps({
+    text: {
+        type: String,
+        required: true
+    }
+});
 
 const formatText = (text) => {
     if (!text) return "";

package/src/components/Editors/TagToggle.vue

@@ -10,9 +10,6 @@
         <span v-else-if="sortOptions[currentOpt % sortOptions.length] === 'Disabled'"
             ><img class="mx-auto" height="16px" width="14px" src="@/assets/img/square_uncheck.svg"
         /></span>
-        <!-- <span v-else-if="sortOptions[currentOpt % sortOptions.length] === 'All'"
-            ><img height="16px" width="14px" src="@/assets/img/wildcard.svg"
-        /></span> -->
         <span v-else>{{ sortOptions[currentOpt % sortOptions.length] }}</span>
     </button>
 </template>
@@ -24,11 +21,26 @@ let sortOptions = ref([]);
 const currentOpt = ref(0);
 
 const props = defineProps({
-    filter: Object,
-    index: Number,
-    expandedFilter: Number,
-    filterBuilder: Object,
-    options: Object,
+    filter: {
+        type: Object,
+        default: () => ({})
+    },
+    index: {
+        type: Number,
+        default: 0
+    },
+    expandedFilter: {
+        type: Number,
+        default: null
+    },
+    filterBuilder: {
+        type: Object,
+        default: () => ({})
+    },
+    options: {
+        type: Array,
+        required: true
+    },
     noBorder: {
         type: Boolean,
         default: false

package/src/components/Filter/Filter.vue

@@ -1,5 +1,5 @@
 <template>
-    <div 
+    <div
         class="filter-card group text-white text-sm transition-all duration-200 hover:bg-dark-400 relative"
         :class="{
             'expanded-filter': filterBuilder.expandedFilter === filter.id,
@@ -19,7 +19,6 @@
                     </div>
                 </div>
                 <div class="expanded-content mt-4 mx-2 sm:mx-0" v-if="filterBuilder.expandedFilter === filter.id">
-                    <!-- NORMAL -->
                     <div v-if="filterType === 2" class="space-y-2">
                         <div class="info-row">
                             <span class="label">Section:</span>
@@ -34,7 +33,6 @@
                             <span class="value">{{ filter?.event || filter?.eventId || "-" }}</span>
                         </div>
                     </div>
-                    <!-- NORMAL_FIRSTROW -->
                     <div v-if="filterType === 3" class="space-y-2">
                         <div class="info-row">
                             <span class="label">Section:</span>
@@ -49,7 +47,6 @@
                             <span class="value">{{ filter?.event || "-" }}</span>
                         </div>
                     </div>
-                    <!-- CATCH_ALL_GA -->
                     <div v-if="filterType === 1">
                         <button
                             @click.stop="update({ buyAny: true, floor: false, generalAdmission: false })"
@@ -59,7 +56,6 @@
                             Convert to wildcard
                         </button>
                     </div>
-                    <!-- CATCH_ALL -->
                     <div v-if="filterType === 0">
                         <button
                             @click.stop="update({ floor: true, buyAny: false, generalAdmission: false })"
@@ -69,7 +65,6 @@
                             Convert to Floor Wildcard
                         </button>
                     </div>
-                    <!-- CATCH_ALL_FLOOR -->
                     <div v-if="filterType === 5">
                         <button
                             @click.stop="update({ generalAdmission: true, floor: false, buyAny: false })"
@@ -131,16 +126,15 @@
                     </div>
                 </div>
             </div>
-            <div class="col-span-3 sm:col-span-2 flex justify-end items-center gap-1 sm:gap-2">
-                <div class="drag-handle handle filter-action-btn drag-btn cursor-grab active:cursor-grabbing" title="Drag to reorder">
-                    <MenuIcon class="w-3 h-3 sm:w-4 sm:h-4" />
+            <div class="col-span-3 sm:col-span-2 flex justify-end items-center gap-2">
+                <div class="drag-handle handle drag-btn cursor-grab active:cursor-grabbing" title="Drag to reorder">
+                    <MenuIcon class="h-4 w-4" />
                 </div>
-                <button 
-                    @click="filterBuilder.deleteFilterById(filter.id)" 
-                    class="delete-btn filter-action-btn"
-                    title="Delete filter"
-                >
-                    <TrashIcon class="w-3 h-3 sm:w-4 sm:h-4" />
+                <button
+                    @click="filterBuilder.deleteFilterById(filter.id)"
+                    class="delete-btn"
+                    title="Delete filter">
+                    <TrashIcon class="h-4 w-4" />
                 </button>
             </div>
         </div>
@@ -155,16 +149,27 @@ import { ref } from "vue";
 import { useUIStore } from "@/stores/ui";
 const ui = useUIStore();
 
-// eslint-disable-next-line no-unused-vars
-import { UpIcon, DownIcon, ReloadIcon, TrashIcon, MenuIcon, WildcardIcon, BoxIcon, GroupIcon, FilterIcon, StadiumIcon } from "@/components/icons";
+import { TrashIcon, MenuIcon, WildcardIcon, BoxIcon, GroupIcon, FilterIcon, StadiumIcon } from "@/components/icons";
 
 let isAllRows = ref(false);
 
 const props = defineProps({
-    filter: Object,
-    index: Number,
-    expandedFilter: String,
-    filterBuilder: Object
+    filter: {
+        type: Object,
+        required: true
+    },
+    index: {
+        type: Number,
+        required: true
+    },
+    expandedFilter: {
+        type: String,
+        default: null
+    },
+    filterBuilder: {
+        type: Object,
+        required: true
+    }
 });
 
 const handleFilterClick = (id) => {
@@ -282,17 +287,20 @@ props.filterBuilder.onUpdate(() => {
     else {
         filterTitle.value = getFilterTitle();
     }
-    // else if (newData.id === filter.value.id) update(newData);
 });
 </script>
 
 <style scoped>
 .filter-card {
-    @apply bg-dark-500 border-dark-550 relative;
-    @apply border-dark-625/30;
-    border-width: 1px;
-    margin-bottom: 8px;
-    transition: all 0.15s ease-out;
+    @apply bg-dark-500 border border-dark-625/30 relative mb-2 transition-all duration-200;
+}
+
+.filter-card:hover {
+    transform: scale(1.03);
+}
+
+.filter-card:active {
+    transform: scale(0.98);
 }
 
 .filter-card:hover:not(.expanded-filter) {
@@ -332,59 +340,39 @@ 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;
-    @apply bg-dark-450/90;
-}
-
-.filter-input:focus {
-    border-color: oklch(0.28 0 0);
-    @apply bg-dark-475/90;
+    @apply border border-dark-550 rounded px-2 py-1.5 text-sm text-white bg-dark-450/90 focus:bg-dark-475/90 focus:outline-none transition-all duration-200 placeholder:text-light-400;
 }
 
-.filter-input::placeholder {
-    @apply text-light-400;
+/* Filter action buttons - drag and delete */
+.drag-btn,
+.delete-btn {
+    @apply flex items-center justify-center rounded-full transition-all duration-200;
+    @apply w-8 h-8 flex-shrink-0 p-0;
+    @apply border border-dark-500 bg-dark-450;
 }
 
-.filter-action-btn {
-    @apply flex items-center justify-center rounded-full transition-all duration-200 border-2 border-transparent;
-    width: 28px;
-    height: 28px;
-    @apply text-light-400;
-    background-color: rgba(35, 36, 41, 0.8);
-    backdrop-filter: blur(4px);
-}
+.drag-btn {
+    @apply text-light-500;
 
-@media (min-width: 640px) {
-    .filter-action-btn {
-        width: 32px;
-        height: 32px;
+    &:hover {
+        @apply bg-dark-300 border-dark-550 text-yellow-400 shadow-md;
     }
 }
 
-.filter-action-btn:hover {
-    color: white;
-    transform: scale(1.15);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-}
-
-.drag-btn:hover {
-    @apply bg-dark-675/80;
-    border-color: oklch(0.28 0 0);
-}
+.delete-btn {
+    @apply bg-error-500/30 border-error-400/50 text-error-300;
 
-.delete-btn:hover {
-    @apply bg-error-500/80 border-error-400 text-error-400;
+    &:hover {
+        @apply bg-error-400/80 border-error-500 text-white shadow-md;
+    }
 }
 
 .drag-handle.sortable-chosen {
-    border: 1px solid oklch(0.28 0 0);
-    @apply bg-dark-675/20;
+    @apply border border-dark-550 bg-dark-675/20;
 }
 
 .filter-card.sortable-ghost {
-    @apply opacity-50;
-    border: 1px solid oklch(0.28 0 0);
-    @apply bg-dark-675/10;
+    @apply opacity-50 border border-dark-550 bg-dark-675/10;
 }
 
 .filter-card.sortable-drag {
@@ -392,27 +380,26 @@ props.filterBuilder.onUpdate(() => {
 }
 
 .expanded-filter {
-    border-left: 4px solid oklch(0.28 0 0);
-    background-color: rgba(26, 27, 30, 0.95);
+    @apply border-l-4 border-l-dark-550 bg-dark-300/95;
 }
 
 .expanded-content {
-    background-color: rgba(26, 27, 30, 0.95);
-    border-radius: 6px;
-    padding: 12px;
+    @apply rounded-md p-3 bg-dark-300/95;
 }
 
 .controls-section {
-    background-color: rgba(26, 27, 30, 0.98);
-    border-radius: 6px;
-    padding: 12px;
+    @apply rounded-md p-3 bg-dark-350/[0.98];
 }
 
 .excluded-filter {
-    @apply border-l-4 border-l-error-300;
+    @apply border-l-4 border-l-error-400 bg-error-500/30;
+}
+
+.excluded-filter .delete-btn {
+    @apply bg-error-400/50 border-error-500 text-error-300;
 }
 
 .normal-filter {
-    border-left: 4px solid transparent;
+    @apply border-l-4 border-l-transparent;
 }
 </style>