@apptegy/nuxt-navigation 0.1.125 → 0.2.0-alpha.0

package/dist/runtime/components/Nav/OrgSelect.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { useDropdown, useNuxtApp, useAppConfig, computed, ref, watch, onBeforeUpdate } from "#imports";
 import { vOnClickOutside } from "@vueuse/components";
-const { $t } = useNuxtApp();
+const { $t, $ld } = useNuxtApp();
 const appConfig = useAppConfig();
 const zIndex = computed(() => appConfig?.navigation?.zIndex || 100);
 const emit = defineEmits(["update:model-value"]);
@@ -13,12 +13,18 @@ const props = defineProps({
   modelValue: { type: Number, required: true }
 });
 const localSelectedOrgId = ref(props.modelValue);
-watch(() => props.modelValue, (newValue) => {
-  localSelectedOrgId.value = newValue;
-});
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    localSelectedOrgId.value = newValue;
+  }
+);
 const selectedOrg = computed(() => {
   return props.orgs.find(({ id }) => id == localSelectedOrgId.value);
 });
+const isBeaconNavEnabled = computed(() => {
+  return Boolean($ld?.flags?.beaconNavEnabled);
+});
 const {
   active,
   searchQuery,
@@ -77,8 +83,14 @@ function handleSelectedOrg($event, orgId) {
 </script>
 
 <template>
-  <div class="org-selection">
-    <label id="org-dropdown-label" class="sr-only">
+  <div
+    class="org-selection"
+    :class="[isBeaconNavEnabled ? 'beacon' : 'classic']"
+  >
+    <label
+      id="org-dropdown-label"
+      class="sr-only"
+    >
       {{ $t("navigation.orgDropdown") }}
     </label>
     <div
@@ -89,7 +101,7 @@ function handleSelectedOrg($event, orgId) {
       aria-haspopup="listbox"
       role="combobox"
       class="dropdown-trigger"
-    > 
+    >
       <input
         ref="inputRef"
         type="text"
@@ -99,17 +111,29 @@ function handleSelectedOrg($event, orgId) {
         @keydown="keydownActionsOnTrigger"
         @click.prevent="toggleDropdown"
         @input="handleDropdownSearch"
+      />
+      <span
+        v-if="selectedOrg?.intranet"
+        class="badge selected"
       >
-      <span v-if="selectedOrg?.intranet" class="badge selected">
         <a-icon icon="16:lock-locked" />
         {{ $t("navigation.orgBadge") }}
       </span>
+      <Icon
+        v-if="isBeaconNavEnabled"
+        class="icon"
+        :name="active ? 'lucide:chevron-up' : 'lucide:chevron-down'"
+        @keydown="keydownActionsOnTrigger"
+        @click.prevent="toggleDropdown"
+        @input="handleDropdownSearch"
+      />
       <a-icon
-          :icon="active ? '16:carret-up' : '16:carret-down'"
-          @keydown="keydownActionsOnTrigger"
-          @click.prevent="toggleDropdown"
-          @input="handleDropdownSearch"
-        />
+        v-else
+        :icon="active ? '16:carret-up' : '16:carret-down'"
+        @keydown="keydownActionsOnTrigger"
+        @click.prevent="toggleDropdown"
+        @input="handleDropdownSearch"
+      />
     </div>
     <div
       v-show="active"
@@ -135,7 +159,10 @@ function handleSelectedOrg($event, orgId) {
       >
         <span :class="{ pinned: option.pinned, 'item-flex': true }"
           >{{ option.name }}
-          <span v-if="option.intranet" class="badge selected">
+          <span
+            v-if="option.intranet"
+            class="badge selected"
+          >
             <a-icon icon="16:lock-locked" />
             {{ $t("navigation.orgBadge") }}
           </span>
@@ -155,13 +182,13 @@ function handleSelectedOrg($event, orgId) {
   z-index: v-bind(zIndex);
 }
 
-.org-selection {
+.org-selection.classic {
   border-radius: 4px 4px 0 0;
 }
-.org-selection:focus-within {
+.org-selection.classic:focus-within {
   outline: 2px var(--purple) solid;
 }
-.org-selection .dropdown-trigger {
+.org-selection.classic .dropdown-trigger {
   width: 300px;
   padding: 0 8px;
   display: flex;
@@ -173,7 +200,7 @@ function handleSelectedOrg($event, orgId) {
   border-bottom: 1px solid var(--dscl-forms-underline, var(--grey-50));
   background: var(--dscl-forms-bg, var(--grey-10));
 }
-.org-selection .dropdown-trigger .org-title {
+.org-selection.classic .dropdown-trigger .org-title {
   line-height: 16px;
   width: 100%;
   padding: 12px;
@@ -187,14 +214,110 @@ function handleSelectedOrg($event, orgId) {
   white-space: nowrap;
   cursor: pointer;
 }
-.org-selection .dropdown-trigger .org-title:focus-visible {
+.org-selection.classic .dropdown-trigger .org-title:focus-visible {
+  outline: none;
+}
+.org-selection.classic .dropdown {
+  border-radius: 0 0 4px 4px;
+  box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.06);
+}
+.org-selection.classic .dropdown .org-option {
+  padding: 12px 12px 12px 36px;
+  min-height: 40px;
+  line-height: 16px;
+  text-decoration: none;
+  text-transform: none;
+  position: relative;
+  cursor: pointer;
+}
+.org-selection.classic .dropdown .org-option.selected {
+  background-image: url("../../assets/checkmark.svg");
+  background-repeat: no-repeat;
+  background-position: center left 15px;
+  color: var(--purple);
+}
+.org-selection.classic .dropdown .org-option.highlighted {
+  background-color: #f8f6fc;
+}
+.org-selection.classic .dropdown .org-option:focus-visible, .org-selection.classic .dropdown .org-option:hover {
+  background-color: #f8f6fc;
+}
+.org-selection.classic .custom-search {
+  margin: 8px 16px;
+}
+.org-selection.classic .item-flex {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  width: 100%;
+  justify-content: space-between;
+}
+.org-selection.classic .badge {
+  display: inline-flex;
+  align-items: center;
+  background-color: var(--purple-50);
+  padding: 2px 4px;
+  color: white;
+  border-radius: 2px;
+  text-transform: uppercase;
+}
+.org-selection.classic .badge svg {
+  margin-right: 4px;
+}
+.org-selection.classic .badge.selected {
+  background-color: var(--grey-50);
+}
+.org-selection.beacon {
+  border-radius: 8px;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 140%;
+  letter-spacing: 0.5px;
+  color: #757575;
+}
+.org-selection.beacon:focus-within {
+  outline: 2px var(--purple) solid;
+}
+.org-selection.beacon .dropdown-trigger {
+  width: 300px;
+  padding: 0 8px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  justify-content: space-between;
+  border-radius: 8px;
+  border: 1px solid #adadad;
+  background: var(--dscl-forms-bg, #fff);
+}
+.org-selection.beacon .dropdown-trigger .org-title {
+  line-height: inherit;
+  font-weight: inherit;
+  font-size: inherit;
+  letter-spacing: inherit;
+  width: 100%;
+  touch-action: manipulation;
+  color: inherit;
+  height: 40px;
+  border: 0;
+  padding: 8px;
+  background: var(--dscl-forms-bg, #fff);
+  white-space: nowrap;
+  cursor: pointer;
+}
+.org-selection.beacon .dropdown-trigger .org-title:focus-visible {
   outline: none;
 }
-.org-selection .dropdown {
+.org-selection.beacon .dropdown-trigger .icon {
+  min-width: 16px;
+  min-height: 16px;
+  max-width: 16px;
+  max-height: 16px;
+}
+.org-selection.beacon .dropdown {
   border-radius: 0 0 4px 4px;
   box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.06);
 }
-.org-selection .dropdown .org-option {
+.org-selection.beacon .dropdown .org-option {
   padding: 12px 12px 12px 36px;
   min-height: 40px;
   line-height: 16px;
@@ -203,29 +326,29 @@ function handleSelectedOrg($event, orgId) {
   position: relative;
   cursor: pointer;
 }
-.org-selection .dropdown .org-option.selected {
+.org-selection.beacon .dropdown .org-option.selected {
   background-image: url("../../assets/checkmark.svg");
   background-repeat: no-repeat;
   background-position: center left 15px;
   color: var(--purple);
 }
-.org-selection .dropdown .org-option.highlighted {
+.org-selection.beacon .dropdown .org-option.highlighted {
   background-color: #f8f6fc;
 }
-.org-selection .dropdown .org-option:focus-visible, .org-selection .dropdown .org-option:hover {
+.org-selection.beacon .dropdown .org-option:focus-visible, .org-selection.beacon .dropdown .org-option:hover {
   background-color: #f8f6fc;
 }
-.org-selection .custom-search {
+.org-selection.beacon .custom-search {
   margin: 8px 16px;
 }
-.org-selection .item-flex {
+.org-selection.beacon .item-flex {
   display: flex;
   gap: 8px;
   align-items: center;
   width: 100%;
   justify-content: space-between;
 }
-.org-selection .badge {
+.org-selection.beacon .badge {
   display: inline-flex;
   align-items: center;
   background-color: var(--purple-50);
@@ -234,10 +357,10 @@ function handleSelectedOrg($event, orgId) {
   border-radius: 2px;
   text-transform: uppercase;
 }
-.org-selection .badge svg {
+.org-selection.beacon .badge svg {
   margin-right: 4px;
 }
-.org-selection .badge.selected {
+.org-selection.beacon .badge.selected {
   background-color: var(--grey-50);
 }
 </style>