Drop layout heeader buttons spacer (#22)

FastyBird · Mar 7, 2022 · cdbeedb · cdbeedb
1 parent bd57815
commit cdbeedb
Show file tree

Hide file tree

Showing 12 changed files with 58 additions and 122 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fastybird/web-ui-theme",
-  "version": "0.8.0",
+  "version": "0.9.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
@@ -15,8 +15,12 @@ $hamburger-bar-line-distance: 5px !default;
   @include box-shadow(0 3px 9px rgba(0, 0, 0, 0.5));
 }
 
-@mixin flex-heading {
+@mixin flex-buttons {
+  justify-content: space-between;
+
   @include flex-row(nowrap);
+}
 
-  flex-wrap: nowrap;
+@mixin flex-heading {
+  @include flex-row(nowrap);
 }
diff --git a/src/components/layout/FbHeader/Button/index.vue b/src/components/layout/FbHeader/Button/index.vue
@@ -12,7 +12,7 @@
           </template>
 
           <template v-else>
-            {{ label }}
+            <slot />
           </template>
         </a>
       </template>
@@ -28,7 +28,7 @@
           </template>
 
           <template v-else>
-            {{ label }}
+            <slot />
           </template>
         </router-link>
       </template>
@@ -44,10 +44,30 @@
           </template>
 
           <template v-else>
-            {{ label }}
+            <slot />
           </template>
         </button>
       </template>
+
+      <template v-else-if="actionType === menuItemTypes.TEXT">
+        <div
+          :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}]"
+        >
+          <template v-if="'icon' in $slots">
+            <slot name="icon" />
+          </template>
+
+          <template v-else>
+            <slot />
+          </template>
+        </div>
+      </template>
+
+      <template v-else-if="actionType === menuItemTypes.BLANK">
+        <div
+          :class="['fb-theme-layout-header-button__container', {'fb-theme-layout-header-button__container-small': small}, {'fb-theme-layout-header-button__container-left': left}, {'fb-theme-layout-header-button__container-right': right}]"
+        />
+      </template>
     </teleport>
   </template>
 
@@ -63,7 +83,7 @@
         </template>
 
         <template v-else>
-          {{ label }}
+          <slot />
         </template>
       </a>
     </template>
@@ -79,7 +99,7 @@
         </template>
 
         <template v-else>
-          {{ label }}
+          <slot />
         </template>
       </router-link>
     </template>
@@ -95,10 +115,30 @@
         </template>
 
         <template v-else>
-          {{ label }}
+          <slot />
         </template>
       </button>
     </template>
+
+    <template v-else-if="actionType === menuItemTypes.TEXT">
+      <div
+        :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}]"
+      >
+        <template v-if="'icon' in $slots">
+          <slot name="icon" />
+        </template>
+
+        <template v-else>
+          <slot />
+        </template>
+      </div>
+    </template>
+
+    <template v-else-if="actionType === menuItemTypes.BLANK">
+      <div
+        :class="['fb-theme-layout-header-button__container', {'fb-theme-layout-header-button__container-small': small}, {'fb-theme-layout-header-button__container-left': left}, {'fb-theme-layout-header-button__container-right': right}]"
+      />
+    </template>
   </template>
 </template>
 
@@ -136,11 +176,6 @@ export default defineComponent({
       },
     },
 
-    label: {
-      type: String as PropType<string | null>,
-      default: null,
-    },
-
     small: {
       type: Boolean as PropType<boolean>,
       default: false,

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

diff --git a/src/components/layout/FbHeader/Spacer/index.scss b/src/components/layout/FbHeader/Spacer/index.scss
diff --git a/src/components/layout/FbHeader/Spacer/index.vue b/src/components/layout/FbHeader/Spacer/index.vue
diff --git a/src/components/layout/FbHeader/Spacer/types.ts b/src/components/layout/FbHeader/Spacer/types.ts
diff --git a/src/components/layout/FbHeader/index.scss b/src/components/layout/FbHeader/index.scss
@@ -50,7 +50,7 @@
     transition: height 0.3s ease-in-out;
     overflow: hidden;
 
-    @include flex-heading;
+    @include flex-buttons;
 
     &-expanded {
       height: 3rem;

diff --git a/src/components/layout/FbHeader/index.ts b/src/components/layout/FbHeader/index.ts
@@ -3,4 +3,3 @@ export { default as FbLayoutHeaderButton } from "./Button/index.vue";
 export { default as FbLayoutHeaderContent } from "./Content/index.vue";
 export { default as FbLayoutHeaderHeading } from "./Heading/index.vue";
 export { default as FbLayoutHeaderIcon } from "./Icon/index.vue";
-export { default as FbLayoutHeaderSpacer } from "./Spacer/index.vue";
diff --git a/src/components/layout/FbHeader/stories.ts b/src/components/layout/FbHeader/stories.ts
@@ -10,7 +10,6 @@ import {
   FbLayoutHeaderButton,
   FbLayoutHeaderContent,
   FbLayoutHeaderHeading,
-  FbLayoutHeaderSpacer,
 } from "@/components/layout/FbHeader/index";
 import { FbMenuItemTypes } from "@/types";
 
@@ -63,7 +62,6 @@ const Template: Story<ITemplateArgs> = (args) => {
       FbLayoutHeader,
       FbLayoutHeaderHeading,
       FbLayoutHeaderButton,
-      FbLayoutHeaderSpacer,
       FbLayoutHeaderContent,
     },
     setup(): any {
@@ -87,14 +85,13 @@ const Template: Story<ITemplateArgs> = (args) => {
           </template>
 
           <template #button-small>
-            <fb-layout-header-spacer :teleport="false" />
-
             <fb-layout-header-button
-              :label="'Close'"
               :teleport="false"
               small
               type="${FbMenuItemTypes.BUTTON}"
-            />
+            >
+              Close
+            </fb-layout-header-button>
           </template>
 
           <template #sub-content>

diff --git a/src/components/layout/FbHeader/types.ts b/src/components/layout/FbHeader/types.ts
@@ -2,7 +2,6 @@ export * from "./Button/types";
 export * from "./Content/types";
 export * from "./Heading/types";
 export * from "./Icon/types";
-export * from "./Spacer/types";
 
 export interface IFbLayoutHeaderProps {
   menuButtonHidden: boolean;

diff --git a/src/types/index.ts b/src/types/index.ts
@@ -15,6 +15,7 @@ export enum FbMenuItemTypes {
     VUE_LINK = "vue_link",
     BUTTON = "button",
     TEXT = "text",
+    BLANK = "blank",
 }
 
 export enum FbSizeTypes {