@necrolab/dashboard 0.4.3

package/src/App.vue

@@ -0,0 +1,307 @@
+<template>
+    <div class="layout">
+        <transition name="fade">
+            <Splash v-if="isLoading" />
+        </transition>
+        <div class="refresh-wrapper">
+            <div
+                class="refresh-container w-fit mx-auto"
+                :style="{
+                    'margin-top': maxPull() + 'px',
+                    transform: `rotate(${ui.pullChange}deg)`
+                }"
+            >
+                <div
+                    class="refresh-icon p-2 rounded-full mx-auto duration-200"
+                    :class="{
+                        'opacity-100': ui.pullChange > 250,
+                        'opacity-0': ui.pullChange < 250
+                    }"
+                >
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        class="stroke-2 w-4 stroke-dark-400"
+                        :class="{ 'opacity-0': ui.pullChange == 0 }"
+                    >
+                        <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
+                        />
+                    </svg>
+                </div>
+            </div>
+            <h2
+                class="text-dark-400 text-center duration-200"
+                :class="{
+                    'opacity-100': ui.pullChange > 250,
+                    'opacity-0': ui.pullChange < 250
+                }"
+            >
+                Release to refresh
+            </h2>
+        </div>
+        <transition name="out-in">
+            <div v-if="spinner" key="reconnect-indicator" class="h-full">
+                <ReconnectIndicator :message="ui.spinnerMessage" />
+            </div>
+            <div v-else key="main-components" class="flex">
+                <Navbar v-if="layout == 'dashboard'" class="fixed" />
+                <div :class="['router-wrapper', { '-mt-[60px]': ui.pullChange > 1 }]"></div>
+                <router-view v-slot="{ Component }">
+                    <component
+                        :is="Component"
+                        :class="[
+                            'component-container pb-2 mt-0 lg:mt-4 ios-wrapper',
+                            { 'w-full': landscapeIos }
+                        ]"
+                    />
+                </router-view>
+            </div>
+        </transition>
+    </div>
+</template>
+
+<script setup>
+import { storeToRefs } from "pinia";
+import { ref, computed, watch } from "vue";
+import { useRouter } from "vue-router";
+import Navbar from "@/components/ui/Navbar.vue";
+import { useUIStore } from "@/stores/ui";
+import Splash from "@/components/ui/Splash.vue";
+import ReconnectIndicator from "@/components/ui/ReconnectIndicator.vue";
+
+const ui = useUIStore();
+const router = useRouter();
+const isLoading = ref(false);
+const spinner = storeToRefs(ui).showSpinner;
+const landscapeIos = ref(false);
+
+function isIOS() {
+    if (/iPad|iPhone|iPod/.test(navigator.platform)) {
+        return true;
+    } else {
+        return navigator.maxTouchPoints && navigator.maxTouchPoints > 2 && /MacIntel/.test(navigator.platform);
+    }
+}
+
+function isIpadOS() {
+    return navigator.maxTouchPoints && navigator.maxTouchPoints > 2 && /MacIntel/.test(navigator.platform);
+}
+
+window.matchMedia("(orientation: portrait)").addEventListener("change", (e) => {
+    if (!e.matches && isIOS() && !isIpadOS()) landscapeIos.value = true;
+    else landscapeIos.value = false;
+});
+
+if (!window.location.href.includes(":5173")) ui.startSpinner("Loading...");
+
+// close modals on esc
+document.onkeydown = function (evt) {
+    evt = evt || window.event;
+    var isEscape = false;
+    if ("key" in evt) {
+        isEscape = evt.key === "Escape" || evt.key === "Esc";
+    } else {
+        isEscape = evt.keyCode === 27;
+    }
+    if (isEscape) {
+        ui.activeModal = "";
+    }
+};
+
+document.addEventListener("keydown", function (event) {
+    if (
+        (event.ctrlKey || event.metaKey) &&
+        (event.which === 61 ||
+            event.which === 107 ||
+            event.which === 173 ||
+            event.which === 109 ||
+            event.which === 187 ||
+            event.which === 189)
+    ) {
+        event.preventDefault();
+    }
+});
+// prevent zoom
+window.addEventListener(
+    "mousewheel",
+    function (event) {
+        if (event.ctrlKey == true) {
+            event.preventDefault();
+        }
+    },
+    { passive: false }
+);
+
+window.addEventListener(
+    "DOMMouseScroll",
+    function (event) {
+        if (event.ctrlKey == true) {
+            event.preventDefault();
+        }
+    },
+    { passive: false }
+);
+
+window.screen.orientation.onchange = () => {
+    if (document.body.classList.contains("overflow-hidden")) {
+        document.body.classList.remove("overflow-hidden");
+        setTimeout(() => {
+            document.body.classList.add("overflow-hidden");
+        }, 5);
+    }
+    handleNotch();
+};
+
+document.addEventListener("DOMContentLoaded", handleNotch, false);
+window.simulateRotate = handleNotch;
+
+function handleNotch() {
+    const wrappers = [...document.querySelectorAll(".ios-wrapper")];
+
+    // Check if the device is an iPhone with a notch
+    const hasNotch = CSS.supports("padding-left: env(safe-area-inset-left)");
+
+    const orientation = window.orientation; //window.screen.orientation.angle;
+    if (!isIpadOS() && isIOS()) {
+        if (hasNotch && orientation !== 0) {
+            // Landscape mode
+            if (orientation === 90) {
+                // Notch is on the left
+                wrappers.forEach((wrapper) => {
+                    wrapper.style.paddingLeft = "env(safe-area-inset-left)";
+                    wrapper.style.paddingRight = "0.5rem";
+                });
+            } else if (orientation === -90) {
+                // Notch is on the right
+                wrappers.forEach((wrapper) => {
+                    wrapper.style.paddingRight = "env(safe-area-inset-right)";
+                    wrapper.style.paddingLeft = "0.5rem";
+                });
+            }
+        } else {
+            wrappers.forEach((wrapper) => {
+                // Portrait mode or no notch
+                const amount =
+                    window.innerWidth > 1280
+                        ? "2.5rem"
+                        : window.innerWidth > 1030
+                        ? "1.5rem"
+                        : window.innerWidth > 768
+                        ? "0.5rem"
+                        : "0.5rem";
+                wrapper.style.paddingLeft = amount;
+                wrapper.style.paddingRight = amount;
+            });
+        }
+    }
+}
+
+// Call the function initially
+window.addEventListener("orientationchange", handleNotch);
+
+const pullStart = (e) => {
+    const { screenY } = e.targetTouches[0];
+    ui.setStartPoint(screenY);
+};
+const initLoading = () => {
+    // refreshCont.current.classList.add("loading");
+    setTimeout(() => {
+        isLoading.value = true;
+    }, 500);
+    setTimeout(() => {
+        window.location.reload();
+    }, 1500);
+};
+const pull = (e) => {
+    /**
+     * get the current user touch event data
+     */
+    const touch = e.targetTouches[0];
+    /**
+     * get the touch position on the screen's Y axis
+     */
+    const { screenY } = touch;
+    /**
+     * The length of the pull
+     *
+     * if the start touch position is lesser than the current touch position, calculate the difference, which gives the `pullLength`
+     *
+     * This tells us how much the user has pulled
+     */
+    let pullLength = ui.startPoint < screenY ? Math.abs(screenY - ui.startPoint) : 0;
+    ui.setPullChange(pullLength);
+};
+const endPull = (e) => {
+    if (ui.pullChange > 250) {
+        e.preventDefault();
+    }
+    if (ui.pullChange > 200) initLoading();
+    ui.setStartPoint(0);
+    ui.setPullChange(0);
+};
+window.addEventListener("touchstart", pullStart);
+window.addEventListener("touchmove", pull);
+window.addEventListener("touchend", endPull);
+
+function maxPull() {
+    if (ui.pullChange < 250) {
+        return ui.pullChange;
+    } else {
+        ui.setPullChange(250);
+        return 250;
+    }
+}
+watch(
+    () => router.currentRoute.value.name,
+    () => {
+        setTimeout(() => handleNotch(), 5);
+    }
+);
+const layout = computed(() => router.currentRoute.value.meta.layout);
+</script>
+<style lang="scss">
+.task-buttons {
+    @apply flex mx-auto gap-x-4;
+    
+    svg {
+        width: 15px;
+        height: 15px;
+    }
+}
+
+.dropdown {
+    position: relative;
+    display: inline-block;
+}
+
+.dropdown-content {
+    @apply bg-dark-500 text-white shadow rounded-lg top-10 left-0;
+    position: absolute;
+    min-width: 160px;
+    padding: 12px 16px;
+    z-index: 1;
+}
+
+.layout {
+    @apply flex flex-col;
+    min-height: 90vh;
+}
+
+.router-wrapper {
+    @apply pt-5;
+    transition: margin 0.25s;
+    z-index: 0;
+}
+
+.refresh-container {
+    transition: margin 0.25s;
+}
+
+.component-container {
+    @apply w-full mx-auto px-4 xs:px-4 md:px-2 lg:px-6 xl:px-10;
+}
+</style>

package/src/assets/css/_input.scss

@@ -0,0 +1,197 @@
+.input-default {
+    @apply h-12 bg-dark-500 flex items-center bg-clip-padding rounded-lg relative box-border border-dark-550 border-2;
+    
+    input {
+        @apply h-full w-full px-4 focus:outline-none text-xs text-white;
+        background-color: transparent;
+    }
+    
+    /* When input has incrementer, add right padding */
+    &:has(.input-incrementer) input {
+        @apply pr-10;
+    }
+    
+    /* Required field indicator */
+    &.required {
+        /* Professional style with colored border */
+        border-left: 3px solid rgba(239, 68, 68, 0.7);
+        
+        /* Red bullet indicator directly in the field */
+        &::after {
+            content: "";
+            position: absolute;
+            right: 8px;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 6px;
+            height: 6px;
+            border-radius: 50%;
+            background-color: #ef4444;
+        }
+        
+        &:has(.input-incrementer)::after {
+            right: 16px;
+        }
+    }
+}
+.input-wrapper {
+    @apply z-20;
+    
+    label {
+        @apply text-xs text-light-300 block;
+    }
+}
+
+.button-default {
+    @apply text-white font-medium h-12 rounded-lg duration-150 border border-light-300 hover:border-light-400 #{!important};
+}
+
+// Remove number input spinners
+input[type="number"] {
+    -webkit-appearance: textfield;
+    -moz-appearance: textfield;
+    appearance: textfield;
+    
+    &::-webkit-inner-spin-button,
+    &::-webkit-outer-spin-button {
+        -webkit-appearance: none;
+    }
+}
+
+.input-incrementer {
+    @apply flex flex-col absolute right-2 top-1/2 transform -translate-y-1/2 #{!important};
+    gap: 2px;
+    
+    button {
+        @apply w-6 h-4 flex items-center justify-center transition-all duration-150 rounded-sm;
+        background: rgba(42, 43, 59, 0.8);
+        border: 1px solid rgba(74, 74, 97, 0.6);
+        color: rgba(255, 255, 255, 0.9);
+        font-size: 8px;
+        
+        &:hover {
+            background: rgba(74, 74, 97, 0.9);
+            border-color: rgba(167, 168, 175, 0.4);
+            color: white;
+        }
+        
+        &:active {
+            background: rgba(32, 32, 54, 0.9);
+        }
+        
+        svg {
+            @apply w-2.5 h-2.5;
+        }
+    }
+}
+
+// Mobile responsive adjustments
+@media (max-width: 810px) {
+    .input-default {
+        height: 40px;
+        
+        input {
+            font-size: 12px;
+        }
+        
+        .input-incrementer button {
+            @apply w-5 h-3;
+            
+            svg {
+                @apply w-2 h-2;
+            }
+        }
+    }
+    
+    .input-wrapper label {
+        font-size: 15px;
+    }
+    
+    .ant-select {
+        height: fit-content;
+        min-height: 40px;
+        padding: 0;
+        
+        &-show-search:not(.ant-select-customize-input) .ant-select-selector {
+            font-size: 12px;
+        }
+        
+        &-multiple .ant-select-selection-item {
+            height: 25px;
+        }
+    }
+}
+// Ant Design Select styling
+.ant-select-dropdown {
+    z-index: 20000000000;
+    position: relative;
+    @apply rounded-lg #{!important};
+}
+
+.ant-select {
+    @apply bg-dark-500 flex items-center bg-clip-padding rounded-lg relative box-border px-1 py-1 border-dark-550 border-2 #{!important};
+    min-height: 3.45em;
+    height: fit-content;
+    
+    .ant-select-selector {
+        @apply h-full w-full focus:outline-none text-xs text-white #{!important};
+        background: transparent;
+        background-color: transparent !important;
+        border: 0 !important;
+        box-shadow: 0 0 0 !important;
+    }
+}
+
+// Ant Design Select item styling
+.ant-select-multiple .ant-select-selection-item {
+    @apply bg-dark-400 items-center gap-x-4 #{!important};
+    padding-inline-end: 15px;
+    padding-inline-start: 15px;
+    border-radius: 10px;
+    height: 40px;
+    border: 0;
+    
+    &-remove > .anticon {
+        vertical-align: 0.05rem;
+    }
+}
+
+.ant-select-selection-item-remove > .anticon svg {
+    color: #fff;
+}
+
+.ant-select-selection-item-remove > .anticon svg path {
+    fill: currentColor;
+}
+
+.ant-select-item-option {
+    &-selected:not(.ant-select-item-option-disabled) {
+        @apply bg-dark-500 text-white #{!important};
+        
+        .ant-select-item-option-state {
+            @apply text-white #{!important};
+            
+            svg {
+                margin-top: -1.5px;
+            }
+        }
+    }
+    
+    &-active:not(.ant-select-item-option-disabled) {
+        background-color: transparent;
+    }
+    
+    &-content {
+        @apply text-white #{!important};
+    }
+}
+
+.ant-select-dropdown {
+    @apply bg-dark-400 #{!important};
+}
+
+.ant-select-selector:before {
+    content: "";
+    position: absolute;
+    @apply bg-light-400 h-1 w-1 right-1 rounded-full #{!important};
+}