Vueify Data Uploader

client/src/components/ActivityBar/ActivityBar.vue

@@ -20,7 +20,7 @@ import FlexPanel from "@/components/Panels/FlexPanel.vue";
 import ToolBox from "@/components/Panels/ProviderAwareToolBox.vue";
 import WorkflowBox from "@/components/Panels/WorkflowBox.vue";
 
-const { config } = useConfig();
+const { config, isConfigLoaded } = useConfig();
 
 const route = useRoute();
 const userStore = useUserStore();
@@ -193,7 +193,7 @@ function toggleContextMenu(evt: MouseEvent) {
             </b-nav>
             <b-nav vertical class="flex-nowrap p-1">
                 <NotificationItem
-                    v-if="!isAnonymous && config.enable_notification_system"
+                    v-if="!isAnonymous && isConfigLoaded && config.enable_notification_system"
                     id="activity-notifications"
                     icon="bell"
                     :is-active="isActiveRoute('/user/notifications')"

client/src/components/Common/ContextMenu.vue

@@ -33,7 +33,13 @@ watch(
 
 <template>
     <div v-if="visible">
-        <Popper placement="right" class="context-menu" :style="placeContextMenu" :force-show="true" :dark-mode="false">
+        <Popper
+            placement="right"
+            class="context-menu"
+            :style="placeContextMenu"
+            :force-show="true"
+            :arrow="false"
+            mode="light">
             <div class="context-menu-slot">
                 <slot />
             </div>

client/src/components/Form/Elements/FormSelect.vue

@@ -3,6 +3,7 @@ import { computed, type ComputedRef, onMounted, watch } from "vue";
 import Multiselect from "vue-multiselect";
 
 import { useMultiselect } from "@/composables/useMultiselect";
+import { uid } from "@/utils/utils";
 
 type SelectValue = string | number | null;
 const { ariaExpanded, onOpen, onClose } = useMultiselect();
@@ -14,12 +15,14 @@ interface SelectOption {
 
 const props = withDefaults(
     defineProps<{
+        id?: string;
         multiple?: boolean;
         optional?: boolean;
         options: Array<[string, SelectValue]>;
         value?: Array<SelectValue> | string | number;
     }>(),
     {
+        id: `form-select-${uid()}`,
         multiple: false,
         optional: false,
         value: null,
@@ -143,6 +146,7 @@ onMounted(() => {
 <template>
     <Multiselect
         v-if="hasOptions"
+        :id="id"
         v-model="currentValue"
         :allow-empty="true"
         :class="['form-select', cls]"

client/src/components/Masthead/Masthead.vue

@@ -6,7 +6,7 @@ import { withPrefix } from "utils/redirect";
 import { onBeforeMount, onMounted, reactive, ref, watch } from "vue";
 import { useRoute } from "vue-router/composables";
 
-import { useConfig } from "@/composables/config";
+import { isConfigLoaded, useConfig } from "@/composables/config";
 import { useUserStore } from "@/stores/userStore";
 
 import { loadWebhookMenuItems } from "./_webhooks";
@@ -139,7 +139,7 @@ onMounted(() => {
                 @open-url="emit('open-url', $event)" />
             <MastheadItem v-if="windowTab" :tab="windowTab" :toggle="windowToggle" @click="onWindowToggle" />
             <BNavItem
-                v-if="!isAnonymous && config.enable_notification_system && !showActivityBar"
+                v-if="!isAnonymous && isConfigLoaded && config.enable_notification_system && !showActivityBar"
                 id="notifications-bell">
                 <NotificationsBell tooltip-placement="bottom" />
             </BNavItem>

client/src/components/Popper/Popper.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <span>
         <component :is="referenceIs" v-bind="referenceProps" ref="reference">
             <slot name="reference" />
         </component>
@@ -9,21 +9,32 @@
             v-bind="popperProps"
             ref="popper"
             class="popper-element mt-1"
-            :class="{ 'popper-element-dark': darkMode, 'popper-element-light': !darkMode }">
-            <div v-if="darkMode" class="popper-arrow" data-popper-arrow />
+            :class="`popper-element-${mode}`">
+            <div v-if="arrow" class="popper-arrow" data-popper-arrow />
+            <div v-if="title" class="popper-header px-2 py-1 rounded-top d-flex justify-content-between">
+                <span class="px-1">{{ title }}</span>
+                <span class="popper-close align-items-center cursor-pointer" @click="visible = false">
+                    <FontAwesomeIcon icon="fa-times-circle" />
+                </span>
+            </div>
             <slot />
         </component>
-    </div>
+    </span>
 </template>
 
 <script lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faTimesCircle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import type { PropType, UnwrapRef } from "vue";
 import { defineComponent, ref, toRef, watch } from "vue";
 
 import { usePopperjs } from "./usePopper";
 
+library.add(faTimesCircle);
+
 export default defineComponent({
-    components: {},
+    components: { FontAwesomeIcon },
 
     props: {
         // hook options
@@ -47,19 +58,27 @@ export default defineComponent({
             type: Object,
         },
         referenceIs: {
-            default: "div",
+            default: "span",
             type: String,
         },
         referenceProps: {
             type: Object,
         },
+        arrow: {
+            type: Boolean,
+            default: true,
+        },
         disabled: {
             type: Boolean,
             default: false,
         },
-        darkMode: {
-            type: Boolean,
-            default: true,
+        mode: {
+            type: String,
+            default: "dark",
+        },
+        title: {
+            type: String,
+            default: null,
         },
     },
 
@@ -119,52 +138,103 @@ export default defineComponent({
 <style scoped lang="scss">
 @import "theme/blue.scss";
 
+@function popper-border($border-color) {
+    @return 1px solid $border-color;
+}
+
 .popper-element {
     z-index: 9999;
-    border-radius: $border-radius-base;
+    border-radius: $border-radius-large;
 }
 
+/** Available variants */
 .popper-element-dark {
     background: $brand-dark;
+    border: popper-border($brand-dark);
     color: $brand-light;
     max-width: 12rem;
     opacity: 0.95;
+    .popper-arrow:before {
+        background: $brand-dark;
+        border: popper-border($brand-dark);
+    }
 }
 
 .popper-element-light {
     background: $white;
+    border: popper-border($border-color);
     color: $brand-dark;
-    border: $border-default;
-    box-shadow: 0 $border-radius-base $border-radius-base $brand-dark;
+    .popper-arrow:before {
+        background: $white;
+        border: popper-border($border-color);
+    }
 }
 
-.popper-arrow,
-.popper-arrow:before {
-    height: 10px;
-    width: 10px;
-    position: absolute;
-    z-index: -1;
+.popper-element-primary-title {
+    background: $white;
+    border: popper-border($border-color);
+    color: $brand-dark;
+    .popper-header {
+        background: $brand-primary;
+        color: $white;
+    }
+    .popper-arrow:before {
+        background: $brand-primary;
+        border: popper-border($border-color);
+    }
 }
 
+/** Arrow positioning and border handling */
+.popper-arrow,
 .popper-arrow:before {
-    background: $brand-dark;
+    height: 9px;
+    width: 9px;
+    position: absolute;
     content: "";
     transform: rotate(45deg);
 }
 
-.popper-element[data-popper-placement^="top"] > .popper-arrow {
-    bottom: -5px;
+.popper-element[data-popper-placement^="top"] {
+    > .popper-arrow {
+        bottom: 0px;
+    }
+    > .popper-arrow:before {
+        bottom: -5px;
+        border-top: none;
+        border-left: none;
+    }
 }
 
-.popper-element[data-popper-placement^="bottom"] > .popper-arrow {
-    top: -5px;
+.popper-element[data-popper-placement^="right"] {
+    > .popper-arrow {
+        left: 0px;
+    }
+    > .popper-arrow:before {
+        left: -5px;
+        border-top: none;
+        border-right: none;
+    }
 }
 
-.popper-element[data-popper-placement^="left"] > .popper-arrow {
-    right: -5px;
+.popper-element[data-popper-placement^="bottom"] {
+    > .popper-arrow {
+        top: 0px;
+    }
+    > .popper-arrow:before {
+        top: -5px;
+        border-bottom: none;
+        border-right: none;
+    }
 }
 
-.popper-element[data-popper-placement^="right"] > .popper-arrow {
-    left: -5px;
+.popper-element[data-popper-placement^="left"] {
+    > .popper-arrow {
+        right: 0px;
+    }
+    > .popper-arrow:before {
+        right: -5px;
+        border-bottom: none;
+        border-left: none;
+    }
 }
 </style>