Merge pull request #17 from poirazis/develop

v 2.0.9-alpha
poirazis · Jan 20, 2024 · f1aefdd · f1aefdd
2 parents 8c46bc9 + 6e7e0bf
commit f1aefdd
Show file tree

Hide file tree

Showing 6 changed files with 204 additions and 46 deletions.
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -20,7 +20,7 @@ jobs:
         with: 
           repository: poirazis/bb_super_components_shared
           path: ${{ github.workspace }}/bb_super_components_shared
-          ref: main
+          ref: develop
       - uses: actions/setup-node@v1
         with:
           node-version: 18

diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bb-component-SuperTableColumn",
-  "version": "2.0.6-alpha",
+  "version": "2.0.9-alpha",
   "description": "Customizable columns for the SuperTable Component",
   "author": "Michael Poirazi",
   "license": "MIT",

diff --git a/schema.json b/schema.json
@@ -13,25 +13,18 @@
     "showEmptyState": false, 
     "settings": [
       {
-        "type": "dataProvider",
-        "key" : "dataProvider",
-        "label": "Data Rrovider",
-        "required": true,
-        "dependsOn": "_hidden"
-      },
-      {
-        "type": "field",
-        "key": "field",
-        "label": "Column",
-        "required": true
+        "type" : "text",
+        "key" : "field",
+        "label" : "Field",
+        "hidden" : true
       },
       {
         "type": "select",
         "key": "columnType",
         "label" : "Column Type",
         "options" : [
           {"label" : "Auto", "value": "auto" },
-          {"label" : "Relationship", "value": "link" },
+          {"label" : "Option", "value": "options" },
           {"label" : "Options", "value": "array" }
         ],
         "defaultValue" : "auto"
@@ -45,6 +38,7 @@
         "type": "text",
         "key": "valueTemplate",
         "label": "Value",
+        "placeholder" : "{{ Value }}",
         "nested" : "true"
       },
       {
@@ -54,13 +48,85 @@
       },
       {
         "section" : true,
-        "name": "Relationship Options",
-        "dependsOn": { "setting": "columnType", "value" : "link" },
+        "name": "Options Settings",
+        "dependsOn": { "setting": "columnType", "value" : "auto", "invert" : true },
         "settings": [
+          {
+            "type": "select",
+            "label": "Options source",
+            "key": "optionsSource",
+            "defaultValue": "data",
+            "placeholder": "Pick an options source",
+            "options": [
+              {
+                "label": "Data",
+                "value": "data"
+              },
+              {
+                "label": "Custom",
+                "value": "custom"
+              }
+            ]
+          },
+          {
+            "type": "options",
+            "key": "customOptions",
+            "label": "Custom Options",
+            "dependsOn": {
+              "setting": "optionsSource",
+              "value": "custom"
+            }
+          },
           { 
             "type" : "dataSource",
             "key": "datasource",
-            "label" : "Data Source"
+            "label" : "Data Source",
+            "dependsOn": {
+              "setting": "optionsSource",
+              "value": "data"
+            },
+            "resetsOn" : "columnType"
+          },
+          { 
+            "type" : "field",
+            "key": "valueColumn",
+            "label" : "Value Column",
+            "dependsOn": {
+              "setting": "optionsSource",
+              "value": "data"
+            },
+            "resetsOn" : "datasource"
+          },
+          { 
+            "type" : "field",
+            "key": "labelColumn",
+            "label" : "Label Column",
+            "dependsOn": {
+              "setting": "optionsSource",
+              "value": "data"
+            },
+            "resetsOn" : "datasource"
+          },
+          { 
+            "type" : "field",
+            "key": "colorColumn",
+            "label" : "Color Column",
+            "dependsOn": {
+              "setting": "optionsSource",
+              "value": "data"
+            },
+            "resetsOn" : "datasource"
+          },
+          { 
+            "type" : "field",
+            "key": "iconColumn",
+            "label" : "Icon Column",
+            "info" : "Must contain a remix icon class name",
+            "dependsOn": {
+              "setting": "optionsSource",
+              "value": "data"
+            },
+            "resetsOn" : "datasource"
           }
         ]
       },
@@ -148,15 +214,9 @@
         "defaultValue": "live"
       },
       {
-        "type": "boolean",
-        "key": "customize",
-        "label": "Customize",
-        "defaultValue": false
-      },
-      {
+        "tag" : "style",
         "section": true,
-        "name": "Customize Header Settings",
-        "dependsOn": "customize",
+        "name": "Header Settings",
         "settings": [
           {
             "type": "select",
@@ -199,9 +259,9 @@
         ]
       },
       {
+        "tag": "style",
         "section": true,
         "name": "Row Settings",
-        "dependsOn": "customize",
         "settings": [
           {
             "type": "select",
@@ -249,9 +309,9 @@
         ]
       },
       {
+        "tag": "style",
         "section": true,
         "name": "Footer Settings",
-        "dependsOn": "customize",
         "settings": [
           {
             "type": "select",
@@ -292,6 +352,41 @@
             "label": "Bg Color"
           }
         ]
+      },
+      {
+        "tag" : "style",
+        "type" : "boolean",
+        "key" : "useOptionColors",
+        "label" : "Option Colors",
+        "defaultValue" : false
+      },
+      {
+        "tag" : "style",
+        "type" : "boolean",
+        "key" : "useOptionIcons",
+        "label" : "Option Icons",
+        "defaultValue" : false
+      },
+      {
+        "tag" : "style",
+        "type": "select",
+        "label": "Options Mode",
+        "key": "optionsViewMode",
+        "defaultValue": "text",
+        "showInBar": true,
+        "barStyle": "buttons",
+        "options": [
+          {
+            "label": "Pills",
+            "value": "pills",
+            "barIcon": "Button"
+          },
+          {
+            "label": "text",
+            "value": "text",
+            "barIcon": "Text"
+          }
+        ]
       }
     ],
     "context": [

diff --git a/src/Component.svelte b/src/Component.svelte
@@ -2,17 +2,27 @@
   import { getContext } from "svelte";
   import { SuperTableColumn } from "../../bb_super_components_shared/src/lib"
   import { findComponentById } from "../lib/builderHelpers" 
+  import FieldSelect from "./FieldSelect.svelte"
 
-  const { styleable, builderStore, screenStore } = getContext("sdk");
+  const { styleable, builderStore, screenStore, componentStore } = getContext("sdk");
   const component = getContext("component");
+
   const tableOptions = getContext("tableOptionStore")
-  const tableState = getContext("tableState")
+  const stbState = getContext("tableState")
+  const stbData = getContext("stbData")
 
-  // We keep a hidden property of type "dataprovider" so we can use the "field" property type
-  export let dataProvider 
-  export let datasource
-  export let columnType
   export let field
+  export let columnType
+  export let datasource
+  export let valueColumn
+  export let labelColumn
+  export let iconColumn
+  export let colorColumn
+  export let optionsSource
+  export let customOptions
+  export let useOptionColors
+  export let useOptionIcons
+  export let optionsViewMode
 
   export let valueTemplate
 
@@ -37,14 +47,14 @@
   export let footer, footerAlign, footerFontColor, footerBackground;
 
   let id = $component.id;
-  let order, isLast, isFirst
-   
+  let order, isLast, isFirst, localField
+
   // We nned to know the position of the Super Columns amonsgt other siblings
   // to adjust various properties
   $: getOrderAmongstSiblings( $screenStore )
   $: columnOptions = {
     name: field,
-    schema: dataProvider?.schema[field] ?? {},
+    schema: columnType == "auto" ? $stbData?.schema[field] : { type: columnType },
     type: columnType,
     align: rowHorizontalAlign,
     displayName: header ? header : field, 
@@ -56,10 +66,10 @@
     header: header ?? "",
     headerAlign: headerAlign,
     template: valueTemplate,
-    canEdit: canEdit,
+    canEdit: canEdit == "inherit" ? $tableOptions?.canEdit : canEdit,
     canFilter: canFilter,
     canSort: canSort,
-    isSorted: $tableOptions?.sortedColum == field ? $tableOptions.sortedDirection : null,
+    isSorted: $tableOptions?.sortedColum == field ? $tableOptions?.sortedDirection : null,
     sizing: sizing,
     minWidth: minWidth,
     maxWidth: maxWidth,
@@ -69,7 +79,19 @@
     isFirst: isFirst,
     isLast: isLast,
     superColumn: true,
-    padding: $tableOptions?.cellPadding
+    padding: $tableOptions?.appearance.cellPadding,
+    optionsSource: columnType != "auto" ? optionsSource : "schema",
+    customOptions,
+    useOptionColors,
+    useOptionIcons,
+    optionsViewMode,
+    data : {
+      datasource,
+      labelColumn,
+      valueColumn,
+      iconColumn,
+      colorColumn,
+    }
   }
 
   // When the Super Columns is used as a Component, the sizing variables need to be applied to the wrapping div and not the 
@@ -78,16 +100,26 @@
     ...$component.styles,
     normal: {
       ...$component.styles.normal,
+      "display" : $builderStore.inBuilder ? "block" : "contents",
       "flex": $tableOptions?.columnSizing == "flexible" && sizing == "flexible" ? flexFactor + " 1 auto" : "0 0 auto",
       "width" : sizing == "fixed" || $tableOptions?.columnSizing == "fixed" 
         ? fixedWidth ? fixedWidth : $tableOptions?.columnFixedWidth 
         ? $tableOptions?.columnFixedWidth : "auto"
         : "auto",
       "min-width" : sizing == "flexible" && minWidth ? minWidth : "auto",
-      "max-width" : sizing == "flexible" && $tableOptions?.columnSizing == "flexible" ? maxWidth ? maxWidth : $tableOptions.columnMaxWidth : "auto",
+      "max-width" : sizing == "flexible" && $tableOptions?.columnSizing == "flexible" ? maxWidth ? maxWidth : $tableOptions?.columnMaxWidth : "auto",
     }
   }
 
+  $:  if (
+      $builderStore.inBuilder &&
+      $componentStore.selectedComponentPath?.includes($component.id) &&
+      localField && 
+      localField != field
+    ) {
+        builderStore.actions.updateProp("field", localField)
+    }
+
   function getOrderAmongstSiblings ( ) {
     if (!tableOptions ) return;
 
@@ -98,17 +130,24 @@
     isFirst = order == 0  
   }
 
+  const isValid = () => {
+    let validFields = Object.keys($stbData?.schema ?? {} )
+    return field && validFields.includes(field)
+  }
+
 </script>
 
-<div use:styleable={$component.styles}>
-  {#if !tableOptions }
-    <p> Super Column can olny be placed inside a Super Table </p>
-  {:else}   
+<div use:styleable={$component.styles}> 
+  {#if !tableOptions}
+    <p> Super Columns can only be placed inside a Super Table </p>
+  {:else if !isValid(field)}
+    <FieldSelect bind:value={localField} schema={$stbData?.schema ?? {} } />
+  {:else}
     <SuperTableColumn 
       {columnOptions} 
-      tableOptions={$tableOptions} 
-      {tableState}> 
+      {stbState}> 
         <slot /> 
     </SuperTableColumn>
   {/if}
+
 </div>
diff --git a/src/FieldSelect.svelte b/src/FieldSelect.svelte
@@ -0,0 +1,24 @@
+<script>
+  import CellOption from "../../bb_super_components_shared/src/lib/SuperCell/cells/CellOptions.svelte";
+
+  export let schema
+  export let value
+
+  $: cellOptions = {
+    optionsSource: "custom",
+    customOptions: Object.keys(schema),
+    controlType : "select",
+    optionsViewMode: "text",
+    autocomplete: true,
+    placeholder: "Select Field",
+    role: "formInput", 
+    clearValueIcon:true
+  }
+</script>
+
+<p> Column: </p>
+
+<CellOption
+  on:change={ (e) => value = e.detail[0]}
+  {cellOptions}
+  />