@pubinfo/core 2.0.0-beta.31 → 2.0.0-beta.32

package/src/layout/components/Topbar/Tabbar/MoreAction.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import type { Tabbar } from '#/tabbar';
-import { PubinfoIcon } from '@/components';
 import { OverlayScrollbarsComponent } from 'overlayscrollbars-vue';
 import Sortable from 'sortablejs';
 import { useI18n } from 'vue-i18n';
@@ -11,6 +10,7 @@ import PhArrowLineRight from '~icons/ph/arrow-line-right';
 import RiArrowDownSFill from '~icons/ri/arrow-down-s-fill';
 import RiCloseFill from '~icons/ri/close-fill';
 import RiPushpin2Fill from '~icons/ri/pushpin-2-fill';
+import { PubinfoIcon } from '@/components';
 import { useContext } from '../../../composables/useContext';
 import useTabbar from '../../../composables/useTabbar';
 import Search from '../../Tools/Search.vue';
@@ -146,159 +146,112 @@ function iconName(isActive: boolean, icon: Tabbar.recordRaw['icon'], activeIcon:
   </div>
 </template>
 
-<style lang="scss">
-.tabbar-dropdown {
-  .quick-button {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 15px 15px 10px;
-
-    .button {
-      --at-apply: transition-colors;
-
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 32px;
-      height: 32px;
-      cursor: pointer;
-      background-color: var(--g-bg);
-      border: none;
-      border-radius: 5px;
-      outline: none;
-
-      &:hover:not(:disabled) {
-        --at-apply: text-ui-primary;
-      }
-
-      &:disabled {
-        cursor: not-allowed;
-      }
-
-      i {
-        font-size: 16px !important;
-      }
-    }
-  }
+<style>
+.tabbar-dropdown .quick-button {
+  --at-apply: flex items-center justify-between pt-[15px] pb-2.5 px-[15px];
+}
 
-  .tabs {
-    width: 200px;
-    padding: 0 0 10px;
+.tabbar-dropdown .quick-button .button {
+  --at-apply: flex items-center justify-center w-8 h-8 cursor-pointer bg-[--g-bg]
+  transition-[colors] duration-[0.3s] rounded-[5px] border-[none] [outline:none];
+}
 
-    &:not(.dragging) {
-      .tab:hover {
-        &:not(.actived) {
-          background-color: var(--g-bg);
-        }
+.tabbar-dropdown .quick-button .button:hover:not(:disabled) {
+  --at-apply: text-ui-primary;
+}
 
-        .action-icon {
-          opacity: 1;
-        }
-      }
-    }
-
-    .tab {
-      position: relative;
-      width: calc(100% - 30px);
-      height: 30px;
-      padding: 0 5px;
-      margin: 0 15px;
-      background-color: var(--g-container-bg);
-      border-radius: 5px;
-      transition: background-color 0.3s;
-
-      &.actived {
-        background-color: var(--g-bg);
-      }
-
-      &.ghost {
-        opacity: 0;
-      }
-
-      &:hover {
-        .title {
-          --at-apply: opacity-100;
-
-          margin-inline-end: 20px;
-          mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent);
-        }
-      }
-
-      * {
-        user-select: none;
-      }
-
-      .title {
-        --at-apply: opacity-70 transition;
-
-        position: relative;
-        display: flex;
-        gap: 5px;
-        align-items: center;
-        height: 100%;
-        overflow: hidden;
-        font-size: 14px;
-        white-space: nowrap;
-        cursor: pointer;
-        mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
-
-        [dir="rtl"] & {
-          mask-image: linear-gradient(to left, #000 calc(100% - 24px), transparent);
-        }
+.tabbar-dropdown .quick-button .button:disabled {
+  --at-apply: cursor-not-allowed;
+}
 
-        i {
-          flex-shrink: 0;
-          font-size: 16px;
-        }
-      }
-
-      .action-icon {
-        --at-apply: transition;
-
-        position: absolute;
-        inset-inline-end: 6px;
-        top: 50%;
-        z-index: 10;
-        width: 1.5em;
-        height: 1.5em;
-        margin-top: -6px;
-        font-size: 8px;
-        color: var(--g-tabbar-tab-color);
-        pointer-events: all;
-        border-radius: 50%;
-        opacity: 0;
-
-        &:hover {
-          --at-apply: ring-1 ring-stone-3 dark-ring-stone-7;
-
-          background-color: var(--g-bg);
-        }
-      }
-    }
-  }
+.tabbar-dropdown .quick-button .button i {
+  font-size: 16px !important;
+}
+
+.tabbar-dropdown .tabs {
+  --at-apply: w-200px pt-0 pb-2.5 px-0;
+}
+
+.tabbar-dropdown .tabs:not(.dragging) .tab:hover:not(.actived) {
+  background-color: var(--g-bg);
+}
+
+.tabbar-dropdown .tabs:not(.dragging) .tab:hover .action-icon {
+  --at-apply: op-100;
+}
+
+.tabbar-dropdown .tabs .tab {
+  --at-apply: relative h-[30px] bg-[--g-container-bg] mx-[15px] my-0 px-[5px] py-0 rounded-[5px];
+  width: calc(100% - 30px);
+  transition: background-color 0.3s;
+}
+
+.tabbar-dropdown .tabs .tab.actived {
+  background-color: var(--g-bg);
+}
+
+.tabbar-dropdown .tabs .tab.ghost {
+  --at-apply: op-0;
+}
+
+.tabbar-dropdown .tabs .tab:hover .title {
+  opacity: 1;
+  margin-inline-end: 20px;
+  mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent);
+  transition: all 0.3s;
+}
+
+.tabbar-dropdown .tabs .tab * {
+  user-select: none;
+}
+
+.tabbar-dropdown .tabs .tab .title {
+  --at-apply: relative flex gap-[5px] items-center
+  h-full overflow-hidden text-sm whitespace-nowrap cursor-pointer opacity-70;
+
+  mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
+  transition: all 0.3s;
+}
+
+[dir="rtl"] .tabbar-dropdown .tabs .tab .title {
+  mask-image: linear-gradient(to left, #000 calc(100% - 24px), transparent);
+}
+
+.tabbar-dropdown .tabs .tab .title i {
+  flex-shrink: 0;
+  font-size: 16px;
+}
+
+.tabbar-dropdown .tabs .tab .action-icon {
+  --at-apply: absolute z-10 w-[1.5em] h-[1.5em] text-[8px] text-[--g-tabbar-tab-color]
+  opacity-0 transition-all duration-[0.3s] -mt-1.5 rounded-[50%] top-2/4;
+  inset-inline-end: 6px;
+  pointer-events: all;
+}
+
+.tabbar-dropdown .tabs .tab .action-icon:hover {
+  background-color: var(--g-bg);
+  box-shadow: 0 0 0 1px var(--g-border-color);
 }
 </style>
 
-<style lang="scss" scoped>
-.tabbar-dropdown {
-  .dropdown-tab-enter-from,
-  .dropdown-tab-leave-to {
-    opacity: 0;
-    transform: translateX(-100%);
-  }
+<style scoped>
+.dropdown-tab-enter-from,
+.dropdown-tab-leave-to {
+  opacity: 0;
+  transform: translateX(-100%);
+}
 
-  .dropdown-tab-enter-active {
-    transition: all 0.3s;
-  }
+.dropdown-tab-enter-active {
+  transition: all 0.3s;
+}
 
-  .dropdown-tab-leave-active {
-    position: absolute !important;
-    transition: all 0.3s;
-  }
+.dropdown-tab-leave-active {
+  position: absolute !important;
+  transition: all 0.3s;
+}
 
-  .dropdown-tab-move {
-    transition: transform 0.3s;
-  }
+.dropdown-tab-move {
+  transition: transform 0.3s;
 }
 </style>