Merge pull request #67 from jesusantguerrero/release/1.3.0

Release/1.3.3
jesusantguerrero · Nov 23, 2023 · b4a06e1 · b4a06e1
2 parents f4e33ae + 88eaf0e
commit b4a06e1
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 80 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "atmosphere-ui",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "description": "UI for jetstream/inertia and Vue 3",
   "type": "module",
   "keywords": [

diff --git a/src/components/organisms/AtSide/AtSide.vue b/src/components/organisms/AtSide/AtSide.vue
@@ -84,7 +84,12 @@ provide("counters", counters);
         :item-class="itemClass"
         :item-active-class="itemActiveClass"
         :counters="counters"
-      />
+      >
+        <template v-for="item in menu">
+          <slot :name="item.name" />
+        </template>
+      </AtSideNav>
+      <slot name="end-main" :toggleExpand="toggleIcon" />
     </section>
 
     <div class="flex flex-col justify-end nav-container">

diff --git a/src/components/organisms/AtSide/AtSideNav.vue b/src/components/organisms/AtSide/AtSideNav.vue
@@ -26,26 +26,28 @@ defineProps({
   <div>
     <template v-for="route in menu">
       <div v-if="route.separator" class="w-full"  :class="separatorClass" />
-      <AtSideItem
-        v-if="!route[itemProperty]"
-        v-bind="route"
-        :item-class="itemClass"
-        :item-active-class="itemActiveClass"
-        :key="route.label"
-      />
+      <slot :name="route.name" v-if="!route[itemProperty]">
+        <AtSideItem
+          v-bind="route"
+          :item-class="itemClass"
+          :item-active-class="itemActiveClass"
+          :key="route.label"
+        />
+      </slot>
 
       <div v-else-if="route.section" :key="`${route.label}-section`">
         <p class="pl-5 mt-2 text-sm font-bold text-gray-400 capitalize">
           {{ route.section }}
         </p>
-        <AtSideItem
-          v-for="sectionItem in route[itemProperty]"
-          :key="`${sectionItem.section}-${route.label}`"
-          v-bind="sectionItem"
-          :item-class="itemClass"
-          :item-active-class="itemActiveClass"
-          :track-id="sectionItem.label"
-        />
+        <slot :name="sectionItem.name"  v-for="sectionItem in route[itemProperty]">
+          <AtSideItem
+            :key="`${sectionItem.section}-${route.label}`"
+            v-bind="sectionItem"
+            :item-class="itemClass"
+            :item-active-class="itemActiveClass"
+            :track-id="sectionItem.label"
+          />
+        </slot>
       </div>
 
       <AtSideItemGroup

diff --git a/src/components/organisms/AtTeamSelect/AtTeamSelect.vue b/src/components/organisms/AtTeamSelect/AtTeamSelect.vue
@@ -1,13 +1,18 @@
 <template>
+  <div
+    class="relative"
+    :class="{
+      'h-full': fullHeight,
+    }"
+  >
     <dropdown
       align="right"
-
       width="60"
       v-bind="$attrs"
       v-if="hasTeamFeatures"
       :full-height="fullHeight"
     >
-
+      <template #trigger>
         <button
           :class="[
             rounded && 'rounded-md',
@@ -20,8 +25,7 @@
           <section class="flex items-center">
             <div
               v-if="imageUrl || $slots.image"
-              class="flex items-center justify-center w-10 h-10 bg-black rounded-md"
-              :class="[imageOnly ? '' : 'mr-4']"
+              class="flex items-center justify-center w-10 h-10 mr-4 bg-black rounded-md"
             >
               <slot name="image">
                 <img :src="imageUrl" alt="" />
@@ -32,7 +36,7 @@
             </article>
           </section>
 
-          <slot name="icon" v-if="!hideIcon">
+          <slot name="icon">
             <svg
               class="ml-2 -mr-0.5 h-4 w-4"
               xmlns="http://www.w3.org/2000/svg"
@@ -47,69 +51,71 @@
             </svg>
           </slot>
         </button>
+      </template>
 
-      <template #popper>
-            <div class="w-60">
-              <!-- Team Management -->
-              <template v-if="hasTeamFeatures">
-                <div class="block px-4 py-2 text-xs text-gray-400">
-                  {{ sectionTitle }}
-                </div>
-
-                <!-- Team Settings -->
-                <AtDropdownLink as="button" @click="$emit('settings')">
-                  {{ resourceName }} Settings
-                </AtDropdownLink>
-
-                <AtDropdownLink
-                  as="button"
-                  @click="$emit('create')"
-                  v-if="canCreateTeams"
-                >
-                  Create New {{ resourceName }}
-                </AtDropdownLink>
-
-                <div class="border-t border-gray-100"></div>
-
-                <!-- Team Switcher -->
-                <section v-if="teams.length > 1">
-                  <h5 class="block px-4 py-2 text-xs text-gray-400">
-                    Switch {{ resourceName }}
-                  </h5>
-
-                  <AtDropdownLink
-                    v-for="team in teams"
-                    :key="team.id"
-                    as="button"
-                    @click="$emit('switch-team', team)"
-                  >
-                    <div class="flex items-center">
-                      <svg
-                        v-if="team.id == currentTeam.id"
-                        class="w-5 h-5 mr-2 text-green-400"
-                        fill="none"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        stroke="currentColor"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-                        ></path>
-                      </svg>
-                      <div>{{ team.name }}</div>
-                    </div>
-                  </AtDropdownLink>
-                </section>
-              </template>
+      <template #content>
+        <div class="w-60">
+          <!-- Team Management -->
+          <template v-if="hasTeamFeatures">
+            <div class="block px-4 py-2 text-xs text-gray-400">
+              {{ sectionTitle }}
             </div>
+
+            <!-- Team Settings -->
+            <AtDropdownLink as="button" @click="$emit('settings')">
+              {{ resourceName }} Settings
+            </AtDropdownLink>
+
+            <AtDropdownLink
+              as="button"
+              @click="$emit('create')"
+              v-if="canCreateTeams"
+            >
+              Create New {{ resourceName }}
+            </AtDropdownLink>
+
+            <div class="border-t border-gray-100"></div>
+
+            <!-- Team Switcher -->
+            <section v-if="teams.length > 1">
+              <h5 class="block px-4 py-2 text-xs text-gray-400">
+                Switch {{ resourceName }}
+              </h5>
+
+              <AtDropdownLink
+                v-for="team in teams"
+                :key="team.id"
+                as="button"
+                @click="$emit('switch-team', team)"
+              >
+                <div class="flex items-center">
+                  <svg
+                    v-if="team.id == currentTeam.id"
+                    class="w-5 h-5 mr-2 text-green-400"
+                    fill="none"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+                    ></path>
+                  </svg>
+                  <div>{{ team.name }}</div>
+                </div>
+              </AtDropdownLink>
+            </section>
+          </template>
+        </div>
       </template>
     </dropdown>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { Dropdown } from "floating-vue";
+import Dropdown from "../../molecules/AtDropdown/AtDropdown.vue";
 import AtDropdownLink from "../../molecules/AtDropdownLink/AtDropdownLink.vue";
 
 interface Team {
@@ -129,7 +135,6 @@ withDefaults(
     rounded: boolean;
     fullHeight?: boolean;
     imageOnly?: boolean;
-    hideIcon?: boolean; 
     colors: string;
   }>(),
   {