bb_component_superchoicebox 1.0.1

package/README.md

@@ -0,0 +1,25 @@
+# SuperChoiceBox
+
+Super Choice Box
+
+A selection component that presents users with a set of choices in a compact, customizable interface.
+
+## Metadata
+
+| | |
+|---|---|
+| **Type** | Budibase Component |
+| **Category** | basic |
+| **Topics** | `budibase`, `component`, `basic` |
+
+## Development
+
+```bash
+bun install
+bun link @poirazis/superlib
+bun run build
+```
+
+## Schema
+
+See `schema.json` for the component definition.

package/dist/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "bb_component_superchoicebox",
+  "version": "1.0.1",
+  "description": "Super Choice Box",
+  "license": "MIT",
+  "author": "Michael Poirazi - https://github.com/poirazis"
+}

package/dist/plugin.min.js

@@ -0,0 +1,2 @@
+!function(){try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode(".super-wrapper.svelte-1l9u2si{flex-direction:column;align-items:stretch;gap:.5rem;display:flex;overflow:hidden}.super-wrapper.empty.svelte-1l9u2si{color:var(--spectrum-global-color-gray-600);border:1px dashed var(--spectrum-global-color-gray-600);justify-content:center;align-items:center;padding:1rem;font-style:italic;display:flex}.super-wrapper.horizontal.svelte-1l9u2si{flex-direction:row;min-width:0;overflow:hidden}.super-wrapper.grid.svelte-1l9u2si{grid-template-columns:repeat(var(--columns,auto-fit), minmax(150px, 1fr));gap:.5rem;display:grid}.super-wrapper.grid.svelte-1l9u2si>.option:where(.svelte-1l9u2si){width:unset!important}.super-wrapper.svelte-1l9u2si .option:where(.svelte-1l9u2si){cursor:pointer;border:1px solid var(--spectrum-global-color-gray-200);background-color:color-mix(in srgb, var(--spectrum-global-color-gray-50) 50%, transparent);border-radius:8px;flex-direction:column;flex:1;align-items:stretch;gap:1rem;min-width:0;padding:1rem;transition:background .2s,border-color .2s;display:flex}.super-wrapper.svelte-1l9u2si .option:where(.svelte-1l9u2si):hover{background-color:color-mix(in srgb, var(--selected-bg-color,--spectrum-global-color-gray-200) 50%, transparent)!important}.option.svelte-1l9u2si:hover .ph-circle:where(.svelte-1l9u2si){color:var(--spectrum-global-color-gray-500)}.super-wrapper.svelte-1l9u2si .option:where(.svelte-1l9u2si):focus{outline:2px solid var(--accent-color);outline-offset:2px}.super-wrapper.svelte-1l9u2si .option:where(.svelte-1l9u2si):disabled{background-color:var(--spectrum-global-color-gray-200);color:var(--spectrum-global-color-gray-500);cursor:not-allowed}.super-wrapper.svelte-1l9u2si .option.selected:where(.svelte-1l9u2si){border:1px solid var(--selected-bg-color,--spectrum-global-color-gray-200);background-color:var(--selected-bg-color,--spectrum-global-color-gray-200)!important}.option.svelte-1l9u2si .title:where(.svelte-1l9u2si){color:var(--spectrum-global-color-gray-700);justify-content:space-between;gap:1.5rem;min-width:0;font-weight:500;display:flex;overflow:hidden}.option.svelte-1l9u2si .title:where(.svelte-1l9u2si) span:where(.svelte-1l9u2si){text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.option.selected.svelte-1l9u2si .title:where(.svelte-1l9u2si){color:var(--selected-color,--spectrum-global-color-gray-800);font-weight:600}.option.svelte-1l9u2si .title:where(.svelte-1l9u2si) .ph-check-circle:where(.svelte-1l9u2si){display:none}.option.selected.svelte-1l9u2si .title:where(.svelte-1l9u2si) .ph-check-circle:where(.svelte-1l9u2si){color:var(--selected-color,--spectrum-global-color-green-700);font-size:18px;display:block}.option.svelte-1l9u2si .contents:where(.svelte-1l9u2si){flex-direction:column;flex:1;gap:.5rem;display:flex}.option.disabled.svelte-1l9u2si{background-color:var(--spectrum-global-color-gray-200);color:var(--spectrum-global-color-gray-500);cursor:not-allowed}.option.disabled.svelte-1l9u2si .title:where(.svelte-1l9u2si){color:var(--spectrum-global-color-gray-500)}.ph-circle.svelte-1l9u2si{color:var(--spectrum-global-color-gray-300);font-size:18px}.plugin-error.svelte-1q1ah0h{border:1px solid var(--spectrum-global-color-red-400);background:var(--spectrum-global-color-red-100);color:var(--spectrum-global-color-red-800);box-sizing:border-box;border-radius:4px;flex-direction:column;gap:.25rem;width:100%;padding:.5rem .75rem;font-size:13px;display:flex}.plugin-error-title.svelte-1q1ah0h{font-weight:600}.plugin-error-detail.svelte-1q1ah0h{color:var(--spectrum-global-color-red-700);word-break:break-word;font-size:12px}\n/*$vite$:1*/")),document.head.appendChild(e)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}}();
+var plugin=function(e,t,l){Object.defineProperty(e,Symbol.toStringTag,{value:"Module"});var o,a,i,n=Object.create,s=Object.defineProperty,r=Object.getOwnPropertyDescriptor,p=Object.getOwnPropertyNames,d=Object.getPrototypeOf,c=Object.prototype.hasOwnProperty;i=null!=(o=t)?n(d(o)):{};var u=(t=((e,t,l,o)=>{if(t&&"object"==typeof t||"function"==typeof t)for(var a,i=p(t),n=0,d=i.length;n<d;n++)a=i[n],c.call(e,a)||a===l||s(e,a,{get:(e=>t[e]).bind(null,a),enumerable:!(o=r(t,a))||o.enumerable});return e})(!a&&o&&o.__esModule?i:s(i,"default",{value:o,enumerable:!0}),o)).from_html('<div class="super-wrapper empty svelte-1l9u2si"><!></div>'),v=t.from_html('<i class="ph ph-check-circle svelte-1l9u2si"></i>'),g=t.from_html('<i class="ph ph-circle svelte-1l9u2si"></i>'),m=t.from_html('<div class="contents svelte-1l9u2si"><!></div>'),b=t.from_html('<div><div class="title svelte-1l9u2si"><span class="svelte-1l9u2si"> </span> <!></div> <!></div>'),f=t.from_html("<div></div>"),h=t.from_html("<!> <!>",1);function y(e,o){t.push(o,!0);const a=()=>t.store_get(c,"$component",i),[i,n]=t.setup_stores(),{styleable:s,Provider:r,ContextScopes:p,builderStore:d}=(0,l.getContext)("sdk"),c=(0,l.getContext)("component"),y=(0,l.getContext)("form")?.formApi;let S,O,_,w=t.prop(o,"value",15,null),C=t.prop(o,"required",3,!1),k=t.prop(o,"multiSelect",3,!1),x=t.prop(o,"selectedBgColor",3,""),F=t.prop(o,"selectedColor",3,""),V=t.state(t.proxy({})),P=t.state("");t.user_effect(()=>{y&&o.optionsField!=t.get(P)?(S=y?.registerField(o.optionsField,"options",null,!1,!1,void 0,1),_=S?.subscribe?.(e=>{O=e?.fieldApi,t.set(V,e?.fieldSchema||{},!0)}),t.set(P,o.optionsField,!0)):"schema"==o.optionsSource&&t.get(P)!=o.optionsField&&(O?.deregister?.(),_?.(),t.set(P,""))}),(0,l.onDestroy)(()=>{O?.deregister?.(),_?.()});let B=t.derived(()=>"schema"==o.optionsSource&&t.get(V)?.constraints?.inclusion?t.get(V).constraints.inclusion.map(e=>({value:e,label:e,row:null})):"custom"==o.optionsSource&&o.options?o.options.split(",").map(e=>e.trim()).map(e=>({value:e,label:e,row:null})):"data"==o.optionsSource&&o.dataProvider?o.dataProvider?.rows?.map(e=>({row:e,value:o.valueField?e[o.valueField]:"No value Field Selected",label:o.valueField&&o.labelField?e[o.labelField]:o.valueField?e[o.valueField]:"No value Field Selected"})):"static"==o.optionsSource&&o.staticOptions?.length?o.staticOptions.map(e=>({...e,row:null})):[]),$=t.derived(()=>(a().children??0)>0);function j(e){return k()?(w()&&"string"==typeof w()?w().split(",").map(e=>e.trim()):[]).includes(e):w()===e}t.user_effect(()=>{const e=t.get(B);(0,l.untrack)(()=>{if(k()){const t=(w()&&"string"==typeof w()?w().split(",").map(e=>e.trim()):[]).filter(t=>e.some(e=>e.value===t)),l=t.length>0?t.join(","):null;l!==w()&&w(l),C()&&0===t.length&&e.length>0&&w(e[0].value)}else w()&&e.some(e=>e.value===w())||(C()&&e.length>0?w(e[0].value):w(null));O?.setValue(w())})});var N=h(),M=t.first_child(N);{let e=t.derived(()=>({value:w()}));r(M,{get data(){return t.get(e)}})}var D=t.sibling(M,2),A=e=>{var l=u(),i=t.child(l),n=e=>{var l=t.text("No options defined in the selected field schema.");t.append(e,l)},r=e=>{var l=t.text("No options found. Please add options or connect a data source.");t.append(e,l)};t.if(i,e=>{"schema"!==o.optionsSource||t.get(V)?.constraints?.inclusion?e(r,-1):e(n)}),t.reset(l),t.action(l,(e,t)=>s?.(e,t),()=>a().styles),t.append(e,l)},E=e=>{var l=f();let i,n;t.each(l,21,()=>t.get(B),e=>e.value,(e,l)=>{var i=b();let n;var d=t.child(i),c=t.child(d),u=t.child(c,!0);t.reset(c);var f=t.sibling(c,2),h=e=>{var l=v();t.append(e,l)},y=t.derived(()=>j(t.get(l).value)),S=e=>{var l=g();t.append(e,l)};t.if(f,e=>{t.get(y)?e(h):e(S,-1)}),t.reset(d);var _=t.sibling(d,2),x=e=>{{let a=t.derived(()=>({value:w(),optionValue:t.get(l).value,optionRow:t.get(l).row}));r(e,{get data(){return t.get(a)},get scope(){return p.Local},children:(e,l)=>{var a=m(),i=t.child(a);t.snippet(i,()=>o.children??t.noop),t.reset(a),t.append(e,a)},$$slots:{default:!0}})}};t.if(_,e=>{t.get($)&&e(x)}),t.reset(i),t.action(i,(e,t)=>s?.(e,t),()=>a().styles),t.template_effect(e=>{n=t.set_class(i,1,"option svelte-1l9u2si",null,n,e),t.set_text(u,t.get(l).label)},[()=>({selected:j(t.get(l).value),disabled:o.disabled})]),t.delegated("click",i,()=>{o.disabled||(!function(e){if(k()){const t=w()&&"string"==typeof w()?w().split(",").map(e=>e.trim()):[],l=t.indexOf(e);l>-1?(!C()||t.length>1)&&t.splice(l,1):t.push(e),w(t.length>0?t.join(","):null)}else w()!==e||C()?w(e):w(null);O?.setValue(w())}(t.get(l).value),o.onChange?.({value:w()}))}),t.append(e,i)}),t.reset(l),t.template_effect(()=>{i=t.set_class(l,1,"super-wrapper svelte-1l9u2si",null,i,{vertical:"vertical"===o.orientation,horizontal:"horizontal"===o.orientation,grid:"grid"===o.orientation}),n=t.set_style(l,"grid"===o.orientation&&o.columns?`--columns: ${o.columns}`:void 0,n,{"--selected-bg-color":x()?x():"var(--spectrum-global-color-gray-200)","--selected-color":F()?F():"var(--spectrum-global-color-gray-800)"})}),t.append(e,l)};t.if(D,e=>{t.get(B).length<1&&t.store_get(d,"$builderStore",i).inBuilder?e(A):e(E,-1)}),t.append(e,N),t.pop(),n()}t.delegate(["click"]);var S=t.from_html('<span class="plugin-error-detail svelte-1q1ah0h"> </span>'),O=t.from_html('<div class="plugin-error svelte-1q1ah0h" role="alert"><span class="plugin-error-title svelte-1q1ah0h">SuperChoiceBox failed to render</span> <!></div>');function _(e,l){t.push(l,!0);let o=t.rest_props(l,["$$slots","$$events","$$legacy"]);var a=t.comment(),i=t.first_child(a);{const e=(e,l=t.noop)=>{var o=O(),a=t.sibling(t.child(o),2),i=e=>{var o=S(),a=t.child(o,!0);t.reset(o),t.template_effect(()=>t.set_text(a,l().message)),t.append(e,o)};t.if(a,e=>{l()instanceof Error&&l().message&&e(i)}),t.reset(o),t.append(e,o)};t.boundary(i,{onerror:e=>{console.error("[SuperChoiceBox]",e)},failed:e},e=>{y(e,t.spread_props(()=>o,{children:(e,o)=>{var a=t.comment(),i=t.first_child(a);t.snippet(i,()=>l.children??t.noop),t.append(e,a)},$$slots:{default:!0}}))})}t.append(e,a),t.pop()}var w={type:"component",metadata:{svelteMajor:5},schema:{name:"bb_component_superchoicebox",friendlyName:"Super Choice Box",description:"A choice box component for selecting from a list of options",icon:"list",styles:["size","padding","background","border"],info:"Styles are applied to individual options, not the outer component.",hasChildren:!0,showEmptyState:!1,context:[{type:"static",scope:"global",values:[{key:"value",label:"Selected Value",type:"text"}]},{type:"static",scope:"local",values:[{key:"optionValue",label:"Option Value",type:"text"},{key:"optionRow",label:"Option Row",type:"object"}]}],settings:[{type:"select",key:"optionsSource",label:"Options Source",options:[{label:"Schema",value:"schema"},{label:"Data",value:"data"},{label:"Static",value:"static"},{label:"String",value:"custom"}],defaultValue:"custom"},{type:"field/string",key:"optionsField",label:"Field"},{type:"dataProvider",key:"dataProvider",label:"Data Provider",dependsOn:{setting:"optionsSource",value:"data"}},{type:"field",key:"valueField",label:"Value Field",dependsOn:{setting:"optionsSource",value:"data"}},{type:"field",key:"labelField",label:"Label Field",dependsOn:{setting:"optionsSource",value:"data"}},{type:"options",key:"staticOptions",label:"Static Options",dependsOn:{setting:"optionsSource",value:"static"}},{type:"text",key:"options",label:"Options",defaultValue:"Option 1,Option 2,Option 3",dependsOn:{setting:"optionsSource",value:"custom"}},{type:"text",key:"value",label:"Value",defaultValue:""},{type:"select",key:"orientation",label:"Orientation",showInBar:!0,barStyle:"buttons",options:[{label:"Vertical",value:"vertical",barIcon:"ArrowDown"},{label:"Horizontal",value:"horizontal",barIcon:"ArrowRight"},{label:"Grid",value:"grid",barIcon:"squares-four"}],defaultValue:"vertical"},{type:"number",key:"columns",label:"Columns",defaultValue:2,dependsOn:{setting:"orientation",value:"grid"}},{type:"boolean",key:"disabled",label:"Disabled",defaultValue:!1},{type:"boolean",key:"required",label:"Required",defaultValue:!1},{type:"boolean",key:"multiSelect",label:"Multi Select",defaultValue:!1},{type:"event",key:"onChange",label:"On Change",context:[{key:"value",label:"Value"}]},{tag:"style",type:"color",key:"selectedBgColor",label:"Selected Bg"},{tag:"style",type:"color",key:"selectedColor",label:"Text Color"}]}},C="1.0.1";if(window){const e={Component:_,schema:w,version:C};window["##BUDIBASE_CUSTOM_COMPONENTS##"]||(window["##BUDIBASE_CUSTOM_COMPONENTS##"]=[]),window["##BUDIBASE_CUSTOM_COMPONENTS##"].push(e),window.registerCustomComponent&&window.registerCustomComponent(e)}var k=_,x=C;return e.Component=k,e.schema=w,e.version=x,e}({},svelteInternal,svelte);

package/dist/schema.json

@@ -0,0 +1,211 @@
+{
+  "type": "component",
+  "metadata": {
+    "svelteMajor": 5
+  },
+  "schema": {
+    "name": "bb_component_superchoicebox",
+    "friendlyName": "Super Choice Box",
+    "description": "A choice box component for selecting from a list of options",
+    "icon": "list",
+    "styles": [
+      "size",
+      "padding",
+      "background",
+      "border"
+    ],
+    "info": "Styles are applied to individual options, not the outer component.",
+    "hasChildren": true,
+    "showEmptyState": false,
+    "context": [
+      {
+        "type": "static",
+        "scope": "global",
+        "values": [
+          {
+            "key": "value",
+            "label": "Selected Value",
+            "type": "text"
+          }
+        ]
+      },
+      {
+        "type": "static",
+        "scope": "local",
+        "values": [
+          {
+            "key": "optionValue",
+            "label": "Option Value",
+            "type": "text"
+          },
+          {
+            "key": "optionRow",
+            "label": "Option Row",
+            "type": "object"
+          }
+        ]
+      }
+    ],
+    "settings": [
+      {
+        "type": "select",
+        "key": "optionsSource",
+        "label": "Options Source",
+        "options": [
+          {
+            "label": "Schema",
+            "value": "schema"
+          },
+          {
+            "label": "Data",
+            "value": "data"
+          },
+          {
+            "label": "Static",
+            "value": "static"
+          },
+          {
+            "label": "String",
+            "value": "custom"
+          }
+        ],
+        "defaultValue": "custom"
+      },
+      {
+        "type": "field/string",
+        "key": "optionsField",
+        "label": "Field"
+      },
+      {
+        "type": "dataProvider",
+        "key": "dataProvider",
+        "label": "Data Provider",
+        "dependsOn": {
+          "setting": "optionsSource",
+          "value": "data"
+        }
+      },
+      {
+        "type": "field",
+        "key": "valueField",
+        "label": "Value Field",
+        "dependsOn": {
+          "setting": "optionsSource",
+          "value": "data"
+        }
+      },
+      {
+        "type": "field",
+        "key": "labelField",
+        "label": "Label Field",
+        "dependsOn": {
+          "setting": "optionsSource",
+          "value": "data"
+        }
+      },
+      {
+        "type": "options",
+        "key": "staticOptions",
+        "label": "Static Options",
+        "dependsOn": {
+          "setting": "optionsSource",
+          "value": "static"
+        }
+      },
+      {
+        "type": "text",
+        "key": "options",
+        "label": "Options",
+        "defaultValue": "Option 1,Option 2,Option 3",
+        "dependsOn": {
+          "setting": "optionsSource",
+          "value": "custom"
+        }
+      },
+      {
+        "type": "text",
+        "key": "value",
+        "label": "Value",
+        "defaultValue": ""
+      },
+      {
+        "type": "select",
+        "key": "orientation",
+        "label": "Orientation",
+        "showInBar": true,
+        "barStyle": "buttons",
+        "options": [
+          {
+            "label": "Vertical",
+            "value": "vertical",
+            "barIcon": "ArrowDown"
+          },
+          {
+            "label": "Horizontal",
+            "value": "horizontal",
+            "barIcon": "ArrowRight"
+          },
+          {
+            "label": "Grid",
+            "value": "grid",
+            "barIcon": "squares-four"
+          }
+        ],
+        "defaultValue": "vertical"
+      },
+      {
+        "type": "number",
+        "key": "columns",
+        "label": "Columns",
+        "defaultValue": 2,
+        "dependsOn": {
+          "setting": "orientation",
+          "value": "grid"
+        }
+      },
+      {
+        "type": "boolean",
+        "key": "disabled",
+        "label": "Disabled",
+        "defaultValue": false
+      },
+      {
+        "type": "boolean",
+        "key": "required",
+        "label": "Required",
+        "defaultValue": false
+      },
+      {
+        "type": "boolean",
+        "key": "multiSelect",
+        "label": "Multi Select",
+        "defaultValue": false
+      },
+      {
+        "type": "event",
+        "key": "onChange",
+        "label": "On Change",
+        "context": [
+          {
+            "key": "value",
+            "label": "Value"
+          }
+        ]
+      },
+      {
+        "tag": "style",
+        "type": "color",
+        "key": "selectedBgColor",
+        "label": "Selected Bg"
+      },
+      {
+        "tag": "style",
+        "type": "color",
+        "key": "selectedColor",
+        "label": "Text Color"
+      }
+    ]
+  },
+  "hash": "567fe4b557714a896d071205d8327bb2a11932d8",
+  "version": "1.0.1"
+}

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "bb_component_superchoicebox",
+  "version": "1.0.1",
+  "description": "Super Choice Box",
+  "author": "Michael Poirazi - https://github.com/poirazis",
+  "license": "MIT",
+  "svelte": "index.js",
+  "module": "dist/plugin.min.js",
+  "schema.metadata.svelteMajor": 5,
+  "type": "module",
+  "files": [
+    "dist/",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "watch": "NODE_ENV=development vite build --watch --mode development"
+  },
+  "dependencies": {
+    "@poirazis/superlib": "latest"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/plugin.min.js",
+      "require": "./dist/plugin.min.js"
+    }
+  },
+  "devDependencies": {
+    "@budibase/backend-core": "^3.38.5",
+    "@sveltejs/vite-plugin-svelte": "^7.1.2",
+    "tar": "^7.5.16",
+    "terser": "^5.48.0",
+    "vite": "^8.0.16",
+    "vite-plugin-css-injected-by-js": "^5.0.1",
+    "vite-plugin-singlefile": "^2.3.3",
+    "svelte": "5.55.10"
+  },
+  "peerDependencies": {
+    "svelte": "5.55.10"
+  },
+  "overrides": {
+    "svelte": "5.55.10"
+  }
+}