Merge pull request #7 from poirazis/develop

2.0.3-alpha
poirazis · Nov 28, 2023 · acadb4c · acadb4c
2 parents b87baf6 + 6de867a
commit acadb4c
Show file tree

Hide file tree

Showing 7 changed files with 112 additions and 87 deletions.
diff --git a/lib/SuperTableCell/SuperCell.svelte b/lib/SuperTableCell/SuperCell.svelte
@@ -209,4 +209,10 @@
     border: 1px solid var(--spectrum-global-color-gray-300);
     background-color: var(--spectrum-global-color-gray-50);
   }
+
+  :global(.superCell .lucide) {
+    height: 100%;
+    display: flex;
+    align-items: center;
+  }
 </style>
diff --git a/lib/SuperTableCell/cells/CellBoolean.svelte b/lib/SuperTableCell/cells/CellBoolean.svelte
@@ -1,6 +1,5 @@
 <script>
   import { createEventDispatcher } from 'svelte'
-  import Icon from "../../../node_modules/@budibase/bbui/src/Icon/Icon.svelte"
 
   export let value
   export let formattedValue
@@ -53,7 +52,15 @@
     {:else}
       <div class="inline-value" > 
         {#if value}
-          <Icon size="S" name="Checkmark" color={"lime"}/>
+        <svg xmlns="http://www.w3.org/2000/svg" 
+          width="14" height="14" viewBox="0 0 24 24" 
+          fill="none" stroke="lime" 
+          stroke-width="2" 
+          stroke-linecap="round" 
+          stroke-linejoin="round" 
+          class="lucide lucide-check">
+            <path d="M20 6 9 17l-5-5"/>
+          </svg>
         {/if}
       </div>
     {/if}

diff --git a/lib/SuperTableCell/cells/CellLink.svelte b/lib/SuperTableCell/cells/CellLink.svelte
@@ -1,5 +1,4 @@
 <script>
-  import Icon from "../../../node_modules/@budibase/bbui/src/Icon/Icon.svelte";
   import Popover from "../../../node_modules/@budibase/bbui/src/Popover/Popover.svelte";
   import fsm from "svelte-fsm";
   import { createEventDispatcher, beforeUpdate } from "svelte";
@@ -88,14 +87,14 @@
   {#if overflow}
     <div class="overflow" class:inEdit={inEdit || isHovered} style:background-color={ fadeToColor } >
       {#if inEdit}
-        <Icon name="Add" hoverable size="S" on:click={(e) => openPicker(e)} />
+        <svg on:click={(e) => openPicker(e)} xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
       {:else if isHovered}
         <div class="circle"> { value?.length } </div>
       {/if}
     </div>
   {:else}
     {#if inEdit}
-      <Icon name="Add" hoverable size="S" on:click={(e) => openPicker(e)} />
+      <svg on:click={(e) => openPicker(e)} xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
     {/if}
   {/if}
 </div>
@@ -145,4 +144,5 @@
     white-space: nowrap;
     gap: 0.5rem;
   }
+
 </style>
diff --git a/lib/SuperTableCell/cells/CellOptions.svelte b/lib/SuperTableCell/cells/CellOptions.svelte
@@ -1,5 +1,4 @@
 <script>
-  import Icon from "../../../node_modules/@budibase/bbui/src/Icon/Icon.svelte";
   import Popover from "../../../node_modules/@budibase/bbui/src/Popover/Popover.svelte";
   import fsm from "svelte-fsm";
   import { createEventDispatcher ,beforeUpdate } from "svelte"
@@ -143,10 +142,10 @@
 
   {#if overflow && inEdit}
     <div class="overflow" class:inEdit style:background-color={ fadeToColor } >
-      <Icon name="ChevronDown" hoverable />
+      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down"><path d="m6 9 6 6 6-6"/></svg>
     </div>
   {:else if inEdit}
-    <Icon name="ChevronDown" hoverable />
+    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down"><path d="m6 9 6 6 6-6"/></svg>
   {:else if overflow}
     <div class="overflow" style:background-color={fadeToColor} ></div>
   {/if}
@@ -174,7 +173,13 @@
               on:click|preventDefault={(e) => editorState.toggleOption(idx)}
             >
               <div class="option text">
-                <Icon name={"Cancel"} size="S" color="var(--spectrum-global-color-red-500)" />
+                <svg xmlns="http://www.w3.org/2000/svg" 
+                  width="16" height="16" viewBox="0 0 24 24" 
+                  fill="none" stroke="var(--spectrum-global-color-red-500)" 
+                  stroke-width="2" stroke-linecap="round" 
+                  stroke-linejoin="round" class="lucide lucide-x">
+                    <path d="M18 6 6 18"/><path d="m6 6 12 12"/>
+                </svg>
                 {option}
               </div>
             </div>
@@ -186,11 +191,19 @@
               on:mouseenter={() => (focusedOptionIdx = idx)}
             >
               <div class="option text">
-                <Icon name={optionIcon} size="S" {color} />
+                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill={color} stroke={color} stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square"><rect width="18" height="18" x="3" y="3" rx="2"/></svg>
                 {option}
               </div>
               {#if value?.includes(option)}
-                <Icon name="Checkmark" size="S" color="var(--primaryColor)" />
+                <svg xmlns="http://www.w3.org/2000/svg" 
+                width="14" height="14" viewBox="0 0 24 24" 
+                fill="none" stroke="var(--primaryColor)" 
+                stroke-width="2" 
+                stroke-linecap="round" 
+                stroke-linejoin="round" 
+                class="lucide lucide-check">
+                  <path d="M20 6 9 17l-5-5"/>
+                </svg>
               {/if}
             </div>
           {/if}

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bb-component-SuperTableCell",
-  "version": "2.0.2-alpha",
+  "version": "2.0.3-alpha",
   "description": "To be used with the Super Table and Super Columns Components",
   "license": "MIT",
   "author": "Michael Poirazi",

diff --git a/src/Component.svelte b/src/Component.svelte
@@ -31,7 +31,6 @@
     }
   }
 
-  $: console.log($columnOptions)
   $: if ( $columnOptions?.schema?.relationshipType && value ) {
     parsedValue = JSON.parse(value) ?? []
   } else {