@necrolab/dashboard 0.5.15 → 0.5.17

package/src/components/ui/ActionButtonGroup.vue

@@ -1,70 +1,131 @@
 <template>
-    <ul class="mx-auto flex items-center justify-center rounded overflow-visible flex-wrap
-                bg-dark-400 border-2 border-dark-600 p-[3px] gap-0.5
-                md:p-0.5 md:gap-px md:rounded-md
-                lg:p-[3px] lg:gap-0.5 lg:rounded-lg lg:flex-nowrap
-                max-md:max-w-[44px] max-md:min-h-7 max-md:h-auto max-md:justify-start max-md:mx-0">
+    <ul class="action-button-group" :class="{ 'allow-wrap': allowWrap }">
         <slot />
     </ul>
 </template>
 
 <script setup>
-// Simple wrapper component for action button groups
+defineProps({
+    allowWrap: {
+        type: Boolean,
+        default: false
+    }
+});
 </script>
 
-<style lang="scss" scoped>
-ul {
-    :deep(button) {
-        @apply relative flex items-center justify-center rounded border-0 outline-0 transition-all duration-150;
-        @apply bg-transparent text-light-300;
-        @apply w-7 h-7 rounded-md;
-
-        &:hover {
-            @apply bg-accent-green/15 text-white;
-        }
-
-        &:active {
-            @apply bg-accent-green/25;
-        }
-
-        // Tablet sizing
-        @media (min-width: 768px) and (max-width: 1023px) {
-            @apply w-[26px] h-[26px] rounded;
-        }
-
-        // Desktop sizing
-        @media (min-width: 1024px) {
-            @apply w-7 h-7 rounded-md;
-        }
-
-        // Mobile sizing
-        @media (max-width: 640px) {
-            @apply w-[18px] h-[18px] rounded-xs min-w-[18px] m-px;
-        }
+<style scoped>
+.action-button-group {
+    @apply mx-auto bg-dark-400 border-2 border-dark-550 rounded;
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: center;
+    align-items: center;
+    padding: 3px;
+    gap: 2px;
+    width: fit-content;
+}
+
+.action-button-group.allow-wrap {
+    flex-wrap: wrap;
+    align-items: flex-start;
+}
+
+/* Desktop - no wrapping */
+@media (min-width: 1024px) {
+    .action-button-group {
+        flex-wrap: nowrap;
+        padding: 3px;
+        gap: 2px;
+        border-radius: 0.5rem;
+    }
+}
+
+/* Tablet - max 3 per row */
+@media (min-width: 768px) and (max-width: 1023px) {
+    .action-button-group {
+        max-width: 100px;
+        padding: 2px;
+        gap: 1px;
+        border-radius: 0.375rem;
+    }
+}
+
+/* Mobile - compact layout */
+@media (max-width: 767px) {
+    .action-button-group {
+        max-width: 100%;
+        gap: 3px;
+        padding: 3px;
+        margin-left: 0;
+        margin-right: 0;
+    }
+
+    .action-button-group.allow-wrap {
+        justify-content: center;
     }
+}
 
-    :deep(svg),
-    :deep(img) {
-        @apply w-4 h-4 relative z-[1];
+/* Button base styling */
+.action-button-group :deep(button) {
+    @apply relative flex items-center justify-center border-0 outline-0;
+    @apply bg-transparent text-light-300 flex-shrink-0 rounded-md;
+    @apply transition-all duration-150;
+    width: 28px !important;
+    height: 28px !important;
+    min-width: 28px !important;
+    min-height: 28px !important;
+}
 
-        // Tablet sizing
-        @media (min-width: 768px) and (max-width: 1023px) {
-            @apply w-3.5 h-3.5;
-        }
+/* Hover effect */
+.action-button-group :deep(button:hover) {
+    background-color: oklch(0.78 0.12 145 / 0.15) !important;
+    color: white !important;
+    transform: scale(1.03) !important;
+}
 
-        // Desktop sizing
-        @media (min-width: 1024px) {
-            @apply w-4 h-4;
-        }
+/* Active effect */
+.action-button-group :deep(button:active) {
+    background-color: oklch(0.78 0.12 145 / 0.25) !important;
+    transform: scale(0.98) !important;
+}
 
-        // Mobile sizing
-        @media (max-width: 640px) {
-            @apply w-[12px] h-[12px];
-        }
+/* Icon sizing */
+.action-button-group :deep(svg),
+.action-button-group :deep(img) {
+    width: 16px !important;
+    height: 16px !important;
+    flex-shrink: 0 !important;
+    display: block !important;
+}
+
+/* Responsive button sizing */
+@media (min-width: 768px) and (max-width: 1023px) {
+    .action-button-group :deep(button) {
+        width: 26px !important;
+        height: 26px !important;
     }
 
-    :deep(li) {
-        @apply flex m-0 p-0;
+    .action-button-group :deep(svg),
+    .action-button-group :deep(img) {
+        width: 14px !important;
+        height: 14px !important;
     }
 }
+
+@media (max-width: 767px) {
+    .action-button-group :deep(button) {
+        width: 22px !important;
+        height: 22px !important;
+    }
+
+    .action-button-group :deep(svg),
+    .action-button-group :deep(img) {
+        width: 12px !important;
+        height: 12px !important;
+    }
+}
+
+.action-button-group li {
+    @apply flex m-0 p-0;
+}
 </style>

package/src/components/ui/BalanceIndicator.vue

@@ -0,0 +1,60 @@
+<template>
+    <div class="balance-indicator">
+        <div v-if="loading" class="flex-gap-1 items-center">
+            <svg class="animate-spin h-3 w-3 text-light-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+            </svg>
+        </div>
+        <div v-else-if="error" class="flex-gap-1 items-center" title="Failed to fetch balance">
+            <svg class="h-3 w-3 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+            </svg>
+        </div>
+        <div v-else-if="balance !== null && balance !== undefined" class="flex-gap-1 items-center text-green-400" :title="`Balance: ${balance}`">
+            <img src="@/assets/img/sell.svg" width="9" class="opacity-60" />
+            <span class="text-2xs font-bold tabular-nums">{{ formattedBalance }}</span>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+    balance: {
+        type: [Number, String, null],
+        default: null
+    },
+    loading: {
+        type: Boolean,
+        default: false
+    },
+    error: {
+        type: Boolean,
+        default: false
+    }
+});
+
+const formattedBalance = computed(() => {
+    if (typeof props.balance === 'number') {
+        if (props.balance >= 1000000) {
+            return (props.balance / 1000000).toFixed(1) + 'M';
+        } else if (props.balance >= 100000) {
+            return (props.balance / 1000).toFixed(0) + 'K';
+        } else if (props.balance >= 10000) {
+            return (props.balance / 1000).toFixed(1) + 'K';
+        }
+        return props.balance.toLocaleString();
+    }
+    return String(props.balance);
+});
+</script>
+
+<style scoped>
+.balance-indicator {
+    @apply absolute right-3 top-1/2 -translate-y-1/2;
+    @apply flex items-center justify-center;
+    @apply pointer-events-none;
+}
+</style>

package/src/components/ui/EmptyState.vue

@@ -0,0 +1,24 @@
+<template>
+    <div class="flex min-h-32 flex-col items-center justify-center bg-dark-400 py-8 text-center text-sm font-medium">
+        <component :is="icon" class="empty-state-icon" />
+        <p class="text-light-400">{{ message }}</p>
+        <p v-if="subtitle" class="mt-1 text-xs text-light-500">{{ subtitle }}</p>
+    </div>
+</template>
+
+<script setup>
+defineProps({
+    icon: {
+        type: Object,
+        required: true
+    },
+    message: {
+        type: String,
+        required: true
+    },
+    subtitle: {
+        type: String,
+        default: ''
+    }
+});
+</script>

package/src/components/ui/EnableDisableToggle.vue

@@ -0,0 +1,23 @@
+<template>
+    <li v-if="enabled">
+        <button @click="$emit('disable')">
+            <img class="icon-md" src="/img/controls/disable.svg" />
+        </button>
+    </li>
+    <li v-else>
+        <button @click="$emit('enable')">
+            <img class="icon-md" src="/img/controls/enable.svg" />
+        </button>
+    </li>
+</template>
+
+<script setup>
+defineProps({
+    enabled: {
+        type: Boolean,
+        required: true
+    }
+});
+
+defineEmits(["enable", "disable"]);
+</script>

package/src/components/ui/FormField.vue

@@ -1,12 +1,13 @@
 <template>
-    <div class="input-wrapper" :class="{ 'relative-positioned': zIndex, [`z-${zIndex}`]: zIndex }">
+    <div :class="[zIndex && 'relative', getZIndexClass]">
         <slot name="label">
-            <label v-if="label" class="label-override mb-2">
+            <label v-if="label" class="mb-2 flex items-center gap-2 text-sm font-medium text-white">
                 {{ label }}
-                <component v-if="icon" :is="icon" />
+                <component v-if="icon" :is="icon" class="h-3.5 w-3.5" />
             </label>
         </slot>
-        <div :class="`input-default ${required ? 'required' : ''} ${error ? 'error' : ''}`">
+        <!-- For dropdowns, don't wrap in input-default -->
+        <div v-if="!noWrapper" :class="['input-default', { 'required': required, 'error border-2 border-error-300': error }]">
             <slot />
             <div v-if="incrementer" class="input-incrementer">
                 <button @click="$emit('increment')" type="button">
@@ -17,58 +18,57 @@
                 </button>
             </div>
         </div>
+        <!-- Direct slot for dropdowns -->
+        <slot v-else />
     </div>
 </template>
 
 <script setup>
 import { UpIcon, DownIcon } from '@/components/icons';
+import { computed } from 'vue';
 
-defineProps({
-    label: { type: String, default: '' },
-    icon: { type: Object, default: null },
-    required: { type: Boolean, default: false },
-    error: { type: Boolean, default: false },
-    incrementer: { type: Boolean, default: false },
-    zIndex: { type: String, default: '' }
+const props = defineProps({
+    label: {
+        type: String,
+        default: ''
+    },
+    icon: {
+        type: Object,
+        default: null
+    },
+    required: {
+        type: Boolean,
+        default: false
+    },
+    error: {
+        type: Boolean,
+        default: false
+    },
+    incrementer: {
+        type: Boolean,
+        default: false
+    },
+    zIndex: {
+        type: String,
+        default: '',
+        validator: (value) => ['', '0', '1', '2', 'dropdown', 'tooltip'].includes(value)
+    },
+    noWrapper: {
+        type: Boolean,
+        default: false
+    }
 });
 
 defineEmits(['increment', 'decrement']);
-</script>
-
-<style lang="scss" scoped>
-.input-wrapper {
-    label {
-        @apply flex items-center;
-    }
-}
-
-.relative-positioned {
-    @apply relative;
-}
-
-.z-0 {
-    z-index: 0;
-}
-
-.z-1 {
-    z-index: 1;
-}
 
-.z-2 {
-    z-index: 2;
-}
-
-.z-dropdown {
-    z-index: 100;
-}
-
-.z-tooltip {
-    z-index: 2000;
-}
-
-.error {
-    @apply border-2 border-error-300;
-}
-
-// Incrementer styles handled by forms.scss
-</style>
+const getZIndexClass = computed(() => {
+    const zIndexMap = {
+        '0': 'z-0',
+        '1': 'z-1',
+        '2': 'z-2',
+        'dropdown': 'z-dropdown',
+        'tooltip': 'z-tooltip'
+    };
+    return zIndexMap[props.zIndex] || '';
+});
+</script>

package/src/components/ui/IconLabel.vue

@@ -0,0 +1,23 @@
+<template>
+    <div class="flex-gap-2 items-center text-xs text-light-100">
+        <component :is="icon" :class="iconClass" />
+        <span>{{ label }}</span>
+    </div>
+</template>
+
+<script setup>
+defineProps({
+    icon: {
+        type: Object,
+        required: true
+    },
+    label: {
+        type: String,
+        required: true
+    },
+    iconClass: {
+        type: String,
+        default: "icon-md text-light-100"
+    }
+});
+</script>

package/src/components/ui/InfoRow.vue

@@ -1,21 +1,34 @@
 <template>
     <div
-        class="info-row"
+        class="flex items-center gap-3 rounded-lg bg-dark-500 border border-dark-550 px-3 py-2 min-h-10"
         :class="{ 'items-start': alignStart, [customClass]: customClass }">
-        <component v-if="icon" :is="icon" class="info-icon" :class="{ 'flex-shrink-0': alignStart }" />
-        <span v-if="iconText" class="info-icon flex items-center justify-center text-base font-bold" :class="{ 'flex-shrink-0': alignStart }">
+        <component
+            v-if="icon"
+            :is="icon"
+            class="icon-md flex-shrink-0 text-light-300"
+            :class="{ 'flex-shrink-0': alignStart }" />
+        <span
+            v-if="iconText"
+            class="flex icon-md flex-shrink-0 items-center justify-center text-base font-bold text-light-300"
+            :class="{ 'flex-shrink-0': alignStart }">
             {{ iconText }}
         </span>
-        <span class="info-label" :class="{ 'flex-shrink-0': alignStart }">{{ label }}</span>
-        <span class="info-value" :class="valueClass">
+        <span
+            class="min-w-25 flex-shrink-0 text-xs font-medium text-light-500 md:min-w-20 md:text-xs+"
+            :class="{ 'flex-shrink-0': alignStart }">
+            {{ label }}
+        </span>
+        <span
+            class="min-w-0 flex-1 break-words overflow-hidden text-sm text-light-300 md:text-xs+"
+            :class="valueClass">
             <slot>{{ value }}</slot>
         </span>
         <button
             v-if="copyable"
             @click="handleCopy"
-            class="copy-button"
-            :class="{ 'copied': showCopied }">
-            <component :is="showCopied ? CheckIcon : CopyIcon" class="w-4 h-4" />
+            class="ml-2 icon-button bg-transparent text-light-500 transition-standard hover:bg-dark-550 hover:text-light-300"
+            :class="{ 'text-accent-green': showCopied }">
+            <component :is="showCopied ? CheckIcon : CopyIcon" class="icon-md" />
         </button>
         <slot name="action" />
     </div>
@@ -52,49 +65,3 @@ const handleCopy = () => {
 };
 </script>
 
-<style lang="scss" scoped>
-.info-row {
-    @apply flex items-center gap-3 px-3 py-2 rounded-lg;
-    @apply bg-dark-500 border border-dark-600;
-    @apply min-h-10;
-}
-
-.info-icon {
-    @apply w-4 h-4 flex-shrink-0 text-light-300;
-
-    svg {
-        @apply text-light-300 w-4 h-4;
-    }
-}
-
-.info-label {
-    @apply text-xs font-medium flex-shrink-0 text-light-500;
-    @apply min-w-[100px];
-
-    @media (max-width: 768px) {
-        @apply min-w-20 text-[11px];
-    }
-}
-
-.info-value {
-    @apply text-sm flex-1 text-light-300;
-    @apply break-words overflow-hidden;
-    min-width: 0; // Allow flex item to shrink below content size
-
-    @media (max-width: 768px) {
-        @apply text-[13px];
-    }
-}
-
-.copy-button {
-    @apply flex items-center justify-center;
-    @apply w-8 h-8 rounded transition-all duration-150;
-    @apply bg-transparent text-light-500 hover:text-light-300 hover:bg-dark-600;
-    @apply flex-shrink-0;
-    @apply ml-2; // Ensure spacing from value
-
-    &.copied {
-        @apply text-accent-green;
-    }
-}
-</style>