Version 1.1.0

poirazis · Nov 22, 2022 · 8671e21 · 8671e21
1 parent 23511cb
commit 8671e21
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 33 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bb-plugin-Tabs",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "A Tabs Compoenent for Budibase",
   "license": "MIT",
   "svelte": "index.js",

diff --git a/schema.json b/schema.json
@@ -9,6 +9,28 @@
     "hasChildren": true,
     "styles": [ "padding", "background", "size", "border" ],
     "settings": [
+      {
+        "type": "select",
+        "label": "Direction",
+        "key": "direction",
+        "showInBar": true,
+        "barStyle": "buttons",
+        "options": [
+          {
+            "label": "Column",
+            "value": "horizontal",
+            "barIcon": "ViewColumn",
+            "barTitle": "Column layout"
+          },
+          {
+            "label": "Row",
+            "value": "vertical",
+            "barIcon": "ViewRow",
+            "barTitle": "Row layout"
+          }
+        ],
+        "defaultValue": "horizontal"
+      },
       {
         "type": "select",
         "label": "Size",
@@ -74,12 +96,9 @@
       },
       {
         "type": "boolean",
-        "label": "Vertical",
-        "key": "vertical",
-        "showInBar": true,
-        "barIcon": "VisibilityOff",
-        "barTitle": "Quiet variant",
-        "barSeparator": false
+        "label": "Icons Only",
+        "key": "iconsOnly",
+        "defaultValue": false
       }
     ]
   }

diff --git a/src/Component.svelte b/src/Component.svelte
@@ -5,15 +5,19 @@
   import Tab from "./Tab.svelte"
 
   export let size = "M"
+  export let direction
   export let centered = false
   export let vertical = false
   export let quiet = false
   export let compact = false
   export let emphasized = false
+  export let iconsOnly = false
   export let emphasizedColor = "var(--spectrum-global-color-indigo-600)"
 
   // Internal 
   let container
+  let iconSize = "ri-1x"
+
   $: styles = { 
     "pos_justify": centered ? "center" : "flex-start"
   };
@@ -23,6 +27,21 @@
 		.join(';');
 
   $: emphasizedColor = emphasized ? emphasizedColor : "var(--spectrum-global-color-gray-600";
+  $: switch (size) {
+        case 'S':
+          iconSize = "ri-sm"
+          break;
+        case 'M':
+          iconSize = "ri-1x"
+          break;
+        case 'L':
+          iconSize = "ri-lg"
+          break;
+        case "XL":
+          iconSize = "ri-xl"
+          break;
+      }
+
 
   const { styleable } = getContext("sdk")
   const component = getContext("component")
@@ -31,26 +50,32 @@
     tabs: [],
     selectedTab: 0,
     selectedTabBox: {},
-    registerTab: function ( id, name ) { 
-      this.tabs.push ({id:id, name:name});
+    direction: "horizontal",
+    centered: false,
+    registerTab: function ( id, name, icon ) { 
+      this.tabs.push ({id:id, name:name, icon:icon});
       this.selectedTab = id;
     },
     unregisterTab: function ( id ) { 
         var indx = this.tabs.findIndex(v => v.id === id);
         this.tabs.splice(indx, indx >= 0 ? 1 : 0);
      }, 
-    updateTab: function ( id, name ) { 
+    updateTab: function ( id, name, icon ) { 
         var indx = this.tabs.findIndex(v => v.id === id);
         if (indx > -1) { 
-          this.tabs[indx].name = name;        }
+          this.tabs[indx].name = name;
+          this.tabs[indx].icon = icon;        
+        }
     }
   });
   setContext("tabStore", tabStore);
 
 
   let top, left, width, height
-  $: calculateIndicator($tabStore.selectedTab, centered)
-
+  $: $tabStore.direction = direction
+  $: $tabStore.centered = centered
+  $: $tabStore.size = size
+  $: calculateIndicator($tabStore.selectedTab, $tabStore.direction)
 
   function setActiveTab (){
     if ($tabStore.tabs.length > 0)
@@ -60,34 +85,36 @@
   function calculateIndicator() {
       let tabBox = $tabStore?.selectedTabBox;
       if ( tabBox ) {
-      if (!vertical) {
-        width = tabBox?.width + "px"
-        height = "2px" 
-        left = tabBox?.left - container?.getBoundingClientRect().left + "px"
-      } else {
-        height = tabBox?.height + 4 + "px"
-        width = "2px"
-        top = tabBox?.top - container?.getBoundingClientRect().top + "px"
+        if (direction === "horizontal") {
+          width = tabBox?.width + "px"
+          height = "2px" 
+          left = tabBox?.left - container?.getBoundingClientRect().left + "px"
+          top = tabBox?.height + "px"
+        } else {
+          height = tabBox?.height + "px"
+          width = "2px"
+          top = tabBox?.top - container?.getBoundingClientRect().top + "px"
+          left = tabBox?.left - container?.getBoundingClientRect().left - 8 + "px"
+        }
       }
-    }
   }
 
   onMount(() => setActiveTab())
 </script>
 
-<div use:styleable={$component.styles} class="container" >
+<div use:styleable={$component.styles} class="container" class:vertical={direction === "vertical"} >
   {#if ($tabStore.tabs.length > 0)}
   <div bind:this={container}
       class:spectrum-Tabs--quiet={quiet}
-      class:spectrum-Tabs--vertical={vertical}
-      class:spectrum-Tabs--horizontal={!vertical}
+      class:spectrum-Tabs--vertical={direction === "vertical"}
+      class:spectrum-Tabs--horizontal={direction !== "vertical"}
       class:spectrum-Tabs--compact={compact}
       class="spectrum-Tabs spectrum-Tabs--size{size}"
       style="{cssVarStyles}"
       >
 
       {#each $tabStore.tabs as tab }
-        <Tab {tab} {emphasized} {emphasizedColor} />
+        <Tab {tab} {iconsOnly} {iconSize} {emphasized} {emphasizedColor} />
       {/each}
 
       <div
@@ -105,10 +132,13 @@
 
 
 <style>
-
+.vertical {
+  display: flex;
+  flex-direction: row;
+}
 .spectrum-Tabs--quiet {
   display: flex;
-  border-bottom: transparent !important;
+  border-color: transparent !important;
   justify-content: var(--pos_justify) !important;
 }
 .spectrum-Tabs {
@@ -118,9 +148,14 @@
 }
 .spectrum-Tabs-content {
   margin-top: var(--spectrum-global-dimension-static-size-150);
+  flex-grow: 1;
 }
 .spectrum-Tabs-selectionIndicator {
   transition: all 200ms;
   background-color: var(--spectrum-global-color-gray-900);
 }
+
+.spectrum-Tabs--vertical {
+  border-color: var(--spectrum-global-color-gray-200);
+}
 </style>
diff --git a/src/Tab.svelte b/src/Tab.svelte
@@ -1,8 +1,11 @@
 <script>
     import { getContext, onMount } from "svelte"
-    export let tab // object of type { id: number, name: text }
+    export let tab // object of type { id: number, name: text, icon: text }
+    export let iconSize
+    export let iconsOnly
     export let emphasized
     export let emphasizedColor = "var(--spectrum-global-color-indigo-600)"
+
     let isSelected
     let tabColor 
     let tabBox
@@ -24,7 +27,7 @@
         $tabStore.selectedTab = tab.id;
     }
 
-    $: updateBoundingBox ( $tabStore.selectedTab )
+    $: updateBoundingBox ( $tabStore.selectedTab, $tabStore.direction, $tabStore.size )
     $: if (isSelected) {
         tabColor = "var(--spectrum-global-color-gray-900)"
         if (emphasized) {
@@ -45,13 +48,21 @@
     class="spectrum-Tabs-item" tabindex="0"
     style="color: {tabColor};"
     >
-        <span class="spectrum-Tabs-itemLabel"> 
-            {tab.name} 
-        </span>
+        {#if tab.icon }
+            <i class="{tab.icon} {iconSize}"/>
+        {/if}
+        {#if !iconsOnly}
+            <span class="spectrum-Tabs-itemLabel"> {tab.name} </span>
+        {/if}
 </div>
 
 <style>
     .spectrum-Tabs-item {
+      display: flex;
+      flex-direction: row;
+      padding: 0px 4px;
       color: var(--spectrum-global-color-gray-600);
+      align-items: center;
+      gap: 8px;      
     }
 </style>