@necrolab/dashboard 0.4.3

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

@@ -0,0 +1,28 @@
+<template>
+    <button
+        class="check-component"
+        @click="
+            checked = !checked;
+            $emit('valueUpdate', checked);
+        "
+        :class="{ 'border-light-300': !toggled }"
+    >
+        <div class="flex-center w-4 h-4">
+            <transition name="fade">
+                <CheckmarkIcon v-if="toggled" class="will-change-auto" />
+            </transition>
+        </div>
+    </button>
+</template>
+<style lang="scss" scoped>
+.check-component {
+    @apply border-dashed duration-200 rounded border flex items-center justify-center w-4 h-4;
+}
+</style>
+<script setup>
+import { CheckmarkIcon } from "@/components/icons";
+import { ref } from "vue";
+const props = defineProps({ toggled: { type: Boolean, required: false, default: false } });
+
+const checked = ref(props.toggled);
+</script>

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

@@ -0,0 +1,138 @@
+<template>
+    <div @click="toggleOpened" class="dropdown">
+        <span class="dropdown-display">
+            <span class="dropdown-value" :class="capitalize ? 'capitalize' : ''">
+                {{ currentValue ? currentValue : props.default }}
+            </span>
+            <DownIcon class="dropdown-arrow" :class="opened ? 'rotate-180' : ''" />
+        </span>
+        <transition name="dropdown-fade">
+            <div
+                class="dropdown-menu"
+                v-if="opened"
+                @click.stop
+            >
+                <button
+                    v-bind:key="f"
+                    class="dropdown-item"
+                    :class="i !== 0 ? 'border-t border-light-300' : ''"
+                    v-for="(f, i) in !allowDefault ? props.options : ['', ...props.options]"
+                    @click.stop="chose(f)"
+                >
+                    <span class="dropdown-item-text" :class="capitalize ? 'capitalize' : ''">
+                        {{f ? f : props.default}}
+                    </span>
+                    <CheckmarkIcon v-if="(f || props.default) === currentValue" class="ml-2" />
+                </button>
+            </div>
+        </transition>
+    </div>
+</template>
+
+<script setup>
+import { ref, computed } from "vue";
+import { DownIcon, CheckmarkIcon } from "@/components/icons";
+import { useUIStore } from "@/stores/ui";
+const ui = useUIStore();
+
+const props = defineProps({
+    onClick: { type: Function },
+    default: { type: String },
+    value: { type: String },
+    options: { type: Object },
+    allowDefault: { type: Boolean },
+    rightAmount: { type: String },
+    topPadding: { type: String },
+    capitalize: { type: Boolean }
+});
+
+const currentValue = ref(props.value);
+const id = Math.random();
+const opened = computed(() => ui.currentDropdown === id);
+
+const toggleOpened = () => {
+    if (opened.value) ui.setCurrentDropdown("");
+    else ui.setCurrentDropdown(id);
+};
+
+const chose = (f) => {
+    ui.logger.Info("Dropdown: chosen", f, "hiding...");
+    currentValue.value = f;
+    ui.setCurrentDropdown("");
+    if (props.onClick) props.onClick(f);
+    // Ensure dropdown closes
+    setTimeout(() => {
+        ui.setCurrentDropdown("");
+    }, 50);
+};
+</script>
+
+<style scoped>
+.dropdown {
+    @apply relative w-full p-2 h-12 text-white ml-auto rounded-lg ring-0;
+}
+
+@media (max-width: 810px) {
+    .dropdown {
+        @apply h-10;
+    }
+}
+
+.dropdown-display {
+    @apply flex items-center justify-between z-10;
+}
+
+.dropdown-value {
+    @apply w-full overflow-hidden block truncate pr-2;
+}
+
+.dropdown-arrow {
+    @apply min-w-4 min-h-4 transition-transform duration-200 absolute right-2;
+}
+
+.dropdown-menu {
+    @apply absolute border border-light-300 rounded-lg shadow-lg z-50 max-h-40 overflow-y-auto;
+    top: 2.5rem;
+    left: -1px;
+    width: calc(100% + 2px);
+    box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
+    background-color: rgb(24, 24, 35);
+    scrollbar-width: none; /* Firefox */
+}
+
+.dropdown-menu::-webkit-scrollbar {
+    display: none; /* Chrome, Safari, Edge */
+}
+
+.dropdown-item {
+    @apply cursor-pointer text-left w-full py-2 px-3 text-white hover:bg-dark-400 transition-all duration-150 flex items-center justify-between;
+}
+
+.dropdown-item:first-child {
+    @apply rounded-t-lg;
+}
+
+.dropdown-item:last-child {
+    @apply rounded-b-lg;
+}
+
+.dropdown-item-text {
+    @apply overflow-hidden;
+}
+
+/* Transition animations */
+.dropdown-fade-enter-active,
+.dropdown-fade-leave-active {
+    @apply transition-all duration-200;
+}
+
+.dropdown-fade-enter-from,
+.dropdown-fade-leave-to {
+    @apply opacity-0 transform scale-95 -translate-y-1;
+}
+
+.dropdown-fade-enter-to,
+.dropdown-fade-leave-from {
+    @apply opacity-100 transform scale-100 translate-y-0;
+}
+</style>

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

@@ -0,0 +1,45 @@
+<template>
+    <button
+        :class="[
+            'btn-primary',
+            {
+                'opacity-50 cursor-not-allowed': loading || disabled,
+                'btn-secondary': variant === 'secondary',
+                'btn-danger': variant === 'danger'
+            }
+        ]"
+        :disabled="loading || disabled"
+        @click="$emit('click')"
+        v-bind="$attrs"
+    >
+        <div v-if="loading" class="flex-center gap-2">
+            <div class="loading-spinner"></div>
+            <span v-if="loadingText">{{ loadingText }}</span>
+        </div>
+        <slot v-else />
+    </button>
+</template>
+
+<script setup>
+defineProps({
+    loading: {
+        type: Boolean,
+        default: false
+    },
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    loadingText: {
+        type: String,
+        default: ''
+    },
+    variant: {
+        type: String,
+        default: 'primary',
+        validator: (value) => ['primary', 'secondary', 'danger'].includes(value)
+    }
+});
+
+defineEmits(['click']);
+</script>

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

@@ -0,0 +1,262 @@
+<template>
+    <div @click="toggleOpened" class="dropdown">
+        <span class="dropdown-display">
+            <span class="dropdown-value" :class="capitalize ? 'capitalize' : ''">
+                {{ displayValue }}
+            </span>
+            <div class="dropdown-counter">
+                <span v-if="selectedOptions.length > 1" class="counter-badge">
+                    {{ selectedOptions.length }}
+                </span>
+                <DownIcon class="dropdown-arrow" :class="opened ? 'rotate-180' : ''" />
+            </div>
+        </span>
+        <transition name="dropdown-fade">
+            <div
+                class="dropdown-menu multi"
+                v-if="opened"
+                :style="{ maxHeight: selectedOptions.length > 0 ? '240px' : '160px' }"
+                @click.stop
+            >
+                <div class="option-list">
+                    <button
+                        v-for="(option, i) in props.options"
+                        :key="option.value"
+                        class="dropdown-item"
+                        :class="i !== 0 ? 'border-t border-light-300' : ''"
+                        @click.stop="toggleOption(option.value)"
+                    >
+                        <span class="dropdown-item-text" :class="capitalize ? 'capitalize' : ''">
+                            {{ option.label }}
+                        </span>
+                        <CheckmarkIcon v-if="selectedOptions.includes(option.value)" class="ml-2" />
+                    </button>
+                </div>
+                
+                <div v-if="selectedOptions.length > 0" class="selected-summary">
+                    <div class="flex items-center justify-between">
+                        <div class="selected-count">
+                            <span class="count-badge">
+                                {{ selectedOptions.length }}
+                            </span>
+                            <span class="count-label">
+                                item{{ selectedOptions.length === 1 ? '' : 's' }} selected
+                            </span>
+                        </div>
+                        <button class="clear-button" @click.stop="clearAll">
+                            Clear All
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </transition>
+    </div>
+</template>
+
+<script setup>
+import { ref, computed } from "vue";
+import { DownIcon, CheckmarkIcon } from "@/components/icons";
+import { useUIStore } from "@/stores/ui";
+
+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 }
+});
+
+const selectedOptions = ref([]);
+const id = Math.random();
+const opened = computed(() => ui.currentDropdown === id);
+
+const displayValue = computed(() => {
+    if (selectedOptions.value.length === 0) {
+        return props.default || "Select options...";
+    }
+    
+    if (selectedOptions.value.length === 1) {
+        const option = props.options.find(opt => opt.value === selectedOptions.value[0]);
+        return option ? option.label : selectedOptions.value[0];
+    }
+    
+    if (selectedOptions.value.length <= 2) {
+        const labels = selectedOptions.value.map(val => {
+            const option = props.options.find(opt => opt.value === val);
+            return option ? option.label : val;
+        });
+        return labels.join(", ");
+    }
+    
+    const firstOption = props.options.find(opt => opt.value === selectedOptions.value[0]);
+    const firstName = firstOption ? firstOption.label : selectedOptions.value[0];
+    return `${firstName} +${selectedOptions.value.length - 1} more`;
+});
+
+const getSelectedLabels = () => {
+    return selectedOptions.value.map(val => {
+        const option = props.options.find(opt => opt.value === val);
+        return option ? option.label : val;
+    });
+};
+
+const toggleOpened = () => {
+    if (opened.value) ui.setCurrentDropdown("");
+    else ui.setCurrentDropdown(id);
+};
+
+const toggleOption = (option) => {
+    const index = selectedOptions.value.indexOf(option);
+    if (index === -1) {
+        selectedOptions.value.push(option);
+    } else {
+        selectedOptions.value.splice(index, 1);
+    }
+    
+    // Handle default logic
+    if (selectedOptions.value.length === 0 && props.default) {
+        selectedOptions.value = [props.default];
+    }
+    if (selectedOptions.value.length > 1 && selectedOptions.value.includes(props.default) && option !== props.default) {
+        selectedOptions.value = selectedOptions.value.filter((e) => e !== props.default);
+    } else if (option === props.default) {
+        selectedOptions.value = [props.default];
+    }
+    
+    if (typeof props.onSelect === "function") {
+        props.onSelect(selectedOptions.value);
+    }
+    
+    // Don't close dropdown when selecting options
+};
+
+const clearAll = () => {
+    // Default to first option instead of empty
+    if (props.options && props.options.length > 0) {
+        selectedOptions.value = [props.options[0].value];
+        if (typeof props.onSelect === "function") {
+            props.onSelect([props.options[0].value]);
+        }
+    } else if (props.default) {
+        selectedOptions.value = [props.default];
+        if (typeof props.onSelect === "function") {
+            props.onSelect([props.default]);
+        }
+    } else {
+        selectedOptions.value = [];
+        if (typeof props.onSelect === "function") {
+            props.onSelect([]);
+        }
+    }
+};
+
+// Initialize with default option if provided
+if (props.default && !selectedOptions.value.includes(props.default)) {
+    selectedOptions.value = [props.default];
+}
+</script>
+
+<style scoped>
+.dropdown {
+    @apply relative w-full p-2 h-12 text-white ml-auto rounded-lg ring-0;
+}
+
+@media (max-width: 810px) {
+    .dropdown {
+        @apply h-10;
+    }
+}
+
+.dropdown-display {
+    @apply flex items-center justify-between z-10;
+}
+
+.dropdown-value {
+    @apply w-full overflow-hidden block truncate pr-2;
+}
+
+.dropdown-counter {
+    @apply flex items-center gap-2 absolute right-2;
+}
+
+.counter-badge {
+    @apply bg-green-500 text-white text-xs font-semibold px-1.5 py-0.5 rounded-full text-center min-w-[18px];
+}
+
+.dropdown-arrow {
+    @apply min-w-4 min-h-4 transition-transform duration-200;
+}
+
+.dropdown-menu {
+    @apply absolute border border-light-300 rounded-lg shadow-lg z-50 overflow-y-auto;
+    top: 2.5rem;
+    left: -1px;
+    width: calc(100% + 2px);
+    box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
+    background-color: rgb(24, 24, 35);
+    scrollbar-width: none; /* Firefox */
+}
+
+.dropdown-menu::-webkit-scrollbar {
+    display: none; /* Chrome, Safari, Edge */
+}
+
+.dropdown-menu.multi .option-list {
+    @apply max-h-40 overflow-y-auto;
+}
+
+.dropdown-item {
+    @apply cursor-pointer text-left w-full py-2 px-3 text-white hover:bg-dark-400 transition-all duration-150 flex justify-between items-center;
+}
+
+.dropdown-item:first-child {
+    @apply rounded-t-lg;
+}
+
+.dropdown-item:last-child {
+    @apply rounded-b-lg;
+}
+
+.dropdown-item-text {
+    @apply overflow-hidden;
+}
+
+.selected-summary {
+    @apply border-t border-light-300 bg-dark-600 w-full px-4 py-3;
+}
+
+.selected-count {
+    @apply flex items-center gap-2;
+}
+
+.count-badge {
+    @apply bg-green-500 text-white text-xs font-semibold px-2 py-1 rounded-full;
+}
+
+.count-label {
+    @apply text-xs text-light-400 font-medium;
+}
+
+.clear-button {
+    @apply text-xs bg-dark-500 hover:bg-dark-400 text-white transition-all duration-150 font-medium px-2 py-1 rounded border border-light-300 hover:border-light-400;
+}
+
+/* Transition animations */
+.dropdown-fade-enter-active,
+.dropdown-fade-leave-active {
+    @apply transition-all duration-200;
+}
+
+.dropdown-fade-enter-from,
+.dropdown-fade-leave-to {
+    @apply opacity-0 transform scale-95 -translate-y-1;
+}
+
+.dropdown-fade-enter-to,
+.dropdown-fade-leave-from {
+    @apply opacity-100 transform scale-100 translate-y-0;
+}
+</style>

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

@@ -0,0 +1,84 @@
+<template>
+    <label class="switch">
+        <input type="checkbox" v-model="value" />
+        <span class="slider round"></span>
+    </label>
+</template>
+
+<script setup>
+const value = defineModel();
+</script>
+
+<style lang="scss" scoped>
+/* The switch - the box around the slider */
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 60px;
+    height: 30px;
+}
+
+/* Hide default HTML checkbox */
+.switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+/* The slider */
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    transition: 0.2s;
+    opacity: 0.4;
+    @apply border border-white;
+}
+
+.slider:before {
+    position: absolute;
+    content: "";
+    height: 20px;
+    width: 20px;
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
+    transition: 0.2s;
+}
+
+input:checked + .slider {
+    opacity: 1;
+}
+
+input:checked + .slider:before {
+    -webkit-transform: translateX(26px);
+    -ms-transform: translateX(26px);
+    transform: translateX(26px);
+}
+
+/* Rounded sliders */
+.slider.round {
+    border-radius: 34px;
+}
+
+.slider.round:before {
+    border-radius: 50%;
+}
+
+@media (max-width: 810px) {
+    .switch {
+        width: 50px;
+        min-width: 50px;
+        height: 22px;
+
+        .slider:before {
+            width: 15px;
+            top: 3px;
+            height: 15px;
+        }
+    }
+}
+</style>