Refactoring teleports & off-canvas (#20)

FastyBird · Mar 6, 2022 · 5058300 · 5058300
1 parent a0952df
commit 5058300
Show file tree

Hide file tree

Showing 16 changed files with 114 additions and 208 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fastybird/web-ui-theme",
-  "version": "0.6.7",
+  "version": "0.7.0",
   "description": "FastyBird basic theme & Vue components for web apps",
   "keywords": [
     "fastybird",

diff --git a/src/assets/components/layout/fb-header.scss b/src/assets/components/layout/fb-header.scss
@@ -10,7 +10,6 @@ $header-font-weight: normal;
 $hamburger-bar-line-height: 2px !default;
 $hamburger-bar-line-width: 22px !default;
 $hamburger-bar-line-distance: 5px !default;
-$screen-tablet-min: $screen-sm-min;
 
 @mixin shadow {
   @include box-shadow(0 3px 9px rgba(0, 0, 0, 0.5));

diff --git a/src/assets/components/layout/fb-off-canvas.scss b/src/assets/components/layout/fb-off-canvas.scss
@@ -1,20 +1,8 @@
 @import "../../variables/colors";
-@import "../../variables/layout";
 @import "../../variables/screen";
 @import "../../variables/texts";
 @import "../../mixins/utilities";
 
-$off-canvas-header-height: 5rem;
-$off-canvas-header-padding: 0 $padding-md;
-$off-canvas-header-color: $color-primary-contrast;
-$off-canvas-header-bg-color: $color-primary;
-$off-canvas-header-font-size: $font-size-h4;
-$off-canvas-header-font-weight: $headings-font-weight;
-$off-canvas-header-line-height: $headings-line-height;
-$off-canvas-header-color: $color-primary-contrast;
-$off-canvas-button-color: $color-primary-contrast;
-$off-canvas-button-font-size: 2.5rem;
-$off-canvas-button-line-height: 5rem;
 $off-canvas-overlay-color: rgb(0 0 0 / 50%);
 $off-canvas-overlay-zindex: $zindex-off-canvas-background;
 $off-canvas-body-color: $bg-color-body;

diff --git a/src/components/layout/FbHeader/Button/index.vue b/src/components/layout/FbHeader/Button/index.vue
@@ -1,8 +1,57 @@
 <template>
-  <teleport
-    :to="`#${teleportTarget}`"
-    :disabled="!teleport"
-  >
+  <template v-if="teleport">
+    <teleport :to="`#${teleportTarget}`">
+      <template v-if="actionType === menuItemTypes.LINK">
+        <a
+          :href="action"
+          :class="['fb-theme-layout-header-button__container', {'fb-theme-layout-header-button__container-small': small}, {'fb-theme-layout-header-button__container-textual': !('icon' in $slots)}, {'fb-theme-layout-header-button__container-left': left}, {'fb-theme-layout-header-button__container-right': right}]"
+          @click.prevent="$emit('click', $event)"
+        >
+          <template v-if="'icon' in $slots">
+            <slot name="icon" />
+          </template>
+
+          <template v-else>
+            {{ label }}
+          </template>
+        </a>
+      </template>
+
+      <template v-else-if="actionType === menuItemTypes.VUE_LINK">
+        <router-link
+          :to="action"
+          :class="['fb-theme-layout-header-button__container', {'fb-theme-layout-header-button__container-small': small}, {'fb-theme-layout-header-button__container-textual': !('icon' in $slots)}, {'fb-theme-layout-header-button__container-left': left}, {'fb-theme-layout-header-button__container-right': right}]"
+          @click.prevent="$emit('click', $event)"
+        >
+          <template v-if="'icon' in $slots">
+            <slot name="icon" />
+          </template>
+
+          <template v-else>
+            {{ label }}
+          </template>
+        </router-link>
+      </template>
+
+      <template v-else-if="actionType === menuItemTypes.BUTTON">
+        <button
+          role="button"
+          :class="['fb-theme-layout-header-button__container', {'fb-theme-layout-header-button__container-small': small}, {'fb-theme-layout-header-button__container-textual': !('icon' in $slots)}, {'fb-theme-layout-header-button__container-left': left}, {'fb-theme-layout-header-button__container-right': right}]"
+          @click.prevent="$emit('click', $event)"
+        >
+          <template v-if="'icon' in $slots">
+            <slot name="icon" />
+          </template>
+
+          <template v-else>
+            {{ label }}
+          </template>
+        </button>
+      </template>
+    </teleport>
+  </template>
+
+  <template v-else>
     <template v-if="actionType === menuItemTypes.LINK">
       <a
         :href="action"
@@ -50,7 +99,7 @@
         </template>
       </button>
     </template>
-  </teleport>
+  </template>
 </template>
 
 <script lang="ts">

diff --git a/src/components/layout/FbHeader/Button/types.ts b/src/components/layout/FbHeader/Button/types.ts
@@ -1,9 +1,9 @@
 import { FbMenuItemTypes } from "@/types";
 
 export interface IFbLayoutHeaderButtonProps {
-  type: FbMenuItemTypes;
+  actionType: FbMenuItemTypes;
+  action: string | { [key: string]: any } | null;
   label: string | null;
-  link: string | null;
   small: boolean;
   left: boolean;
   right: boolean;

diff --git a/src/components/layout/FbHeader/Content/index.vue b/src/components/layout/FbHeader/Content/index.vue
@@ -1,12 +1,17 @@
 <template>
-  <teleport
-    to="#fb-layout-header-sub-content"
-    :disabled="!teleport"
-  >
+  <template v-if="teleport">
+    <teleport to="#fb-layout-header-sub-content">
+      <div class="fb-theme-layout-phone-header-content__container">
+        <slot />
+      </div>
+    </teleport>
+  </template>
+
+  <template v-else>
     <div class="fb-theme-layout-phone-header-content__container">
       <slot />
     </div>
-  </teleport>
+  </template>
 </template>
 
 <script lang="ts">

diff --git a/src/components/layout/FbHeader/Heading/index.vue b/src/components/layout/FbHeader/Heading/index.vue
@@ -1,8 +1,29 @@
 <template>
-  <teleport
-    to="#fb-layout-header-heading"
-    :disabled="!teleport"
-  >
+  <template v-if="teleport">
+    <teleport to="#fb-layout-header-heading">
+      <div class="fb-theme-layout-phone-header-heading__container">
+        <div :class="['fb-theme-layout-phone-header-heading__heading', `fb-theme-layout-phone-header-heading__heading-${align}`]">
+          <h1 v-if="subHeading === null">
+            {{ heading }}
+          </h1>
+
+          <h1 v-if="subHeading !== null">
+            <span>{{ heading }}</span>
+            <small>{{ subHeading }}</small>
+          </h1>
+        </div>
+
+        <div
+          v-if="'icon' in $slots"
+          class="fb-theme-layout-phone-header-heading__icon"
+        >
+          <slot name="icon" />
+        </div>
+      </div>
+    </teleport>
+  </template>
+
+  <template v-else>
     <div class="fb-theme-layout-phone-header-heading__container">
       <div :class="['fb-theme-layout-phone-header-heading__heading', `fb-theme-layout-phone-header-heading__heading-${align}`]">
         <h1 v-if="subHeading === null">
@@ -22,7 +43,7 @@
         <slot name="icon" />
       </div>
     </div>
-  </teleport>
+  </template>
 </template>
 
 <script lang="ts">

diff --git a/src/components/layout/FbHeader/Icon/index.vue b/src/components/layout/FbHeader/Icon/index.vue
@@ -1,14 +1,21 @@
 <template>
-  <teleport
-    :to="`#${teleportTarget}`"
-    :disabled="!teleport"
-  >
+  <template v-if="teleport">
+    <teleport :to="`#${teleportTarget}`">
+      <div
+        :class="['fb-theme-layout-header-icon__container', {'fb-theme-layout-header-icon__container-left': left}, {'fb-theme-layout-header-icon__container-right': right}]"
+      >
+        <slot />
+      </div>
+    </teleport>
+  </template>
+
+  <template v-else>
     <div
       :class="['fb-theme-layout-header-icon__container', {'fb-theme-layout-header-icon__container-left': left}, {'fb-theme-layout-header-icon__container-right': right}]"
     >
       <slot />
     </div>
-  </teleport>
+  </template>
 </template>
 
 <script lang="ts">

diff --git a/src/components/layout/FbHeader/Spacer/index.vue b/src/components/layout/FbHeader/Spacer/index.vue
@@ -1,10 +1,13 @@
 <template>
-  <teleport
-    :to="`#${teleportTarget}`"
-    :disabled="!teleport"
-  >
+  <template v-if="teleport">
+    <teleport :to="`#${teleportTarget}`">
+      <div :class="['fb-theme-layout-header__spacer', {'fb-theme-layout-header__spacer-left': left}, {'fb-theme-layout-header__spacer-right': right}, {'fb-theme-layout-header__spacer-center': !right && !left}]" />
+    </teleport>
+  </template>
+
+  <template v-else>
     <div :class="['fb-theme-layout-header__spacer', {'fb-theme-layout-header__spacer-left': left}, {'fb-theme-layout-header__spacer-right': right}, {'fb-theme-layout-header__spacer-center': !right && !left}]" />
-  </teleport>
+  </template>
 </template>
 
 <script lang="ts">

diff --git a/src/components/layout/FbHeader/index.scss b/src/components/layout/FbHeader/index.scss
@@ -7,10 +7,6 @@
     z-index: $z-index;
 
     @include shadow;
-
-    @media (min-width: $screen-tablet-min) {
-      display: none !important;
-    }
   }
 
   &__heading {

diff --git a/src/components/layout/FbOffCanvas/Body/index.scss b/src/components/layout/FbOffCanvas/Body/index.scss
diff --git a/src/components/layout/FbOffCanvas/Body/index.vue b/src/components/layout/FbOffCanvas/Body/index.vue
diff --git a/src/components/layout/FbOffCanvas/Button/index.scss b/src/components/layout/FbOffCanvas/Button/index.scss