@necrolab/dashboard 0.5.15 → 0.5.17

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

@@ -1,153 +1,78 @@
 <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="icon-md" />
+                    <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="icon-md" />
+                <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="icon-md" />
+                <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="icon-md" />
+                <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="icon-md" />
+                <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="icon-md" />
+                <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'"
+                    :class="getRowClass(i)"
                     :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 } from "vue";
+import { useTableRender } from "@/composables/useTableRender";
+import { getRowClass } from "@/utils/tableHelpers";
 
 const props = defineProps({
-    profiles: { type: Object }
+    profiles: {
+        type: Object,
+        required: true
+    }
 });
 
 const ui = useUIStore();
 
-const i = ref({});
-const toRender = computed(() => {
-    let c = 0;
-    const rendered = props.profiles.map((t) => ({ ...t, index: c++ }));
-
-    // Initialize reactive refs for click tracking
-    rendered.forEach((t) => {
-        if (t.id && !(t.id in i.value)) {
-            i.value[t.id] = 0;
-        }
-        if (!(t.index in i.value)) {
-            i.value[t.index] = 0;
-        }
-    });
-
-    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;
-};
+const { toRender } = useTableRender(computed(() => props.profiles));
 
-onMounted(() => {
-    window.addEventListener("resize", updateDimensions);
-});
-
-onUnmounted(() => {
-    window.removeEventListener("resize", updateDimensions);
-});
+import { TABLE_LAYOUT } from "@/constants/tableLayout";
 
-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(TABLE_LAYOUT.PROFILES);
 </script>

package/src/components/Editors/ProxyFileEditor.vue

@@ -0,0 +1,86 @@
+<template>
+    <div class="proxy-editor-section" :class="{ 'landscape-hidden': isHidden }">
+        <h5 class="text-white text-xl font-bold flex gap-x-3 mb-3">Proxy Editor</h5>
+        <div class="flex flex-wrap items-center gap-3 w-full mb-1">
+            <div class="w-full lg:w-64 flex flex-shrink-0 dropdown-container z-dropdown">
+                <div class="relative flex-grow">
+                    <Dropdown
+                        class="bg-dark-500 border-2 border-dark-550 proxy-file-dropdown w-full"
+                        :default="defaultProxyList"
+                        :onClick="loadProxies"
+                        :options="proxyLists"
+                        :allowDefault="false"
+                        :includeAdjacentButtons="true"
+                        rightAmount="right-1" />
+                </div>
+            </div>
+            <div v-if="isProxyEditorVisible" class="flex gap-1.5 ml-auto">
+                <button class="button-default bg-dark-400" @click="$emit('save-proxies')" title="Save Proxies">
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="16"
+                        height="16"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round">
+                        <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" />
+                        <polyline points="17 21 17 13 7 13 7 21" />
+                        <polyline points="7 3 7 8 15 8" />
+                    </svg>
+                </button>
+                <button class="button-default bg-dark-400" @click="$emit('close-proxy')" title="Close File">
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="16"
+                        height="16"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round">
+                        <line x1="18" y1="6" x2="6" y2="18"></line>
+                        <line x1="6" y1="6" x2="18" y2="18"></line>
+                    </svg>
+                </button>
+            </div>
+        </div>
+        <transition name="fade">
+            <div v-if="isProxyEditorVisible" class="relative my-3">
+                <div class="pb-4">
+                    <div class="proxy-editor-container table-component">
+                        <textarea
+                            :value="proxyContent"
+                            @input="$emit('update:proxyContent', $event.target.value)"
+                            class="proxy-editor"
+                            spellcheck="false"></textarea>
+                    </div>
+                </div>
+            </div>
+        </transition>
+    </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import Dropdown from '@/components/ui/controls/atomic/Dropdown.vue';
+
+const props = defineProps({
+    proxyLists: { type: Array, required: true },
+    currentProxyList: { type: String, default: '' },
+    proxyContent: { type: String, default: '' },
+    defaultProxyList: { type: String, default: '' },
+    isHidden: { type: Boolean, default: false }
+});
+
+const emit = defineEmits(['update:proxyContent', 'load-proxies', 'save-proxies', 'close-proxy']);
+
+const isProxyEditorVisible = computed(() => props.currentProxyList !== '');
+
+const loadProxies = (listName) => {
+    emit('load-proxies', listName);
+};
+</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