bb_component_supertag 1.0.1

package/README.md

@@ -0,0 +1,25 @@
+# SuperTag
+
+Super Tag
+
+A tag and label component for displaying metadata, status indicators, or categorization badges with customizable colors and icons.
+
+## 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_supertag",
+  "version": "1.0.1",
+  "description": "Super Tag",
+  "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-tag.svelte-1l9u2si{background-color:var(--super-tag-color);color:var(--spectrum-global-color-gray-900);border-radius:.25rem;flex:none;justify-content:center;align-items:center;gap:.5rem;width:fit-content;min-width:3rem;display:flex}.size-small.svelte-1l9u2si{height:1.25rem;padding:0 .5rem;font-size:10px}.size-medium.svelte-1l9u2si{height:1.65rem;padding:0 .75rem;font-size:12px}.size-large.svelte-1l9u2si{height:2rem;padding:0 1rem;font-size:14px}.tag-text.svelte-1l9u2si{color:var(--super-tag-text-color,var(--spectrum-global-color-gray-900));text-overflow:ellipsis;white-space:nowrap;font-weight:600;overflow:hidden}.size-small.svelte-1l9u2si .tag-text:where(.svelte-1l9u2si){font-size:11px}.size-medium.svelte-1l9u2si .tag-text:where(.svelte-1l9u2si){font-size:13px}.size-large.svelte-1l9u2si .tag-text:where(.svelte-1l9u2si){font-size:15px}.close.svelte-1l9u2si{color:var(--spectrum-global-color-gray-800)}.close.svelte-1l9u2si:hover{cursor:pointer;color:var(--spectrum-global-color-gray-900)}.size-small.svelte-1l9u2si .close:where(.svelte-1l9u2si){font-size:9px}.size-medium.svelte-1l9u2si .close:where(.svelte-1l9u2si){font-size:11px}.size-large.svelte-1l9u2si .close:where(.svelte-1l9u2si){font-size:13px}.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(l){console.error("vite-plugin-css-injected-by-js",l)}}();
+var plugin=function(e,t,l){Object.defineProperty(e,Symbol.toStringTag,{value:"Module"});var o,a,r,n=Object.create,s=Object.defineProperty,i=Object.getOwnPropertyDescriptor,p=Object.getOwnPropertyNames,c=Object.getPrototypeOf,d=Object.prototype.hasOwnProperty;r=null!=(o=t)?n(c(o)):{};var u=(t=((e,t,l,o)=>{if(t&&"object"==typeof t||"function"==typeof t)for(var a,r=p(t),n=0,c=r.length;n<c;n++)a=r[n],d.call(e,a)||a===l||s(e,a,{get:(e=>t[e]).bind(null,a),enumerable:!(o=i(t,a))||o.enumerable});return e})(!a&&o&&o.__esModule?r:s(r,"default",{value:o,enumerable:!0}),o)).from_html("<i></i>"),m=t.from_html('<i class="ri-close-line close svelte-1l9u2si"></i>'),f=t.from_html('<div><!> <span class="tag-text svelte-1l9u2si"> </span> <!></div>');var v=t.from_html('<span class="plugin-error-detail svelte-1q1ah0h"> </span>'),g=t.from_html('<div class="plugin-error svelte-1q1ah0h" role="alert"><span class="plugin-error-title svelte-1q1ah0h">Tag failed to render</span> <!></div>');function b(e,o){let a=t.rest_props(o,["$$slots","$$events","$$legacy"]);var r=t.comment(),n=t.first_child(r);{const e=(e,l=t.noop)=>{var o=g(),a=t.sibling(t.child(o),2),r=e=>{var o=v(),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(r)}),t.reset(o),t.append(e,o)};t.boundary(n,{onerror:e=>{console.error("[SuperTag]",e)},failed:e},e=>{!function(e,o){t.push(o,!0);const a=()=>t.store_get(i,"$component",r),[r,n]=t.setup_stores(),{styleable:s}=(0,l.getContext)("sdk"),i=(0,l.getContext)("component");let p=t.prop(o,"hideable",3,!1),c=t.prop(o,"size",3,"medium"),d=t.state(!1),v=t.derived(()=>({...a().styles,normal:{...a().styles?.normal,"--super-tag-color":o.color,"--super-tag-text-color":o.textColor,"--super-tag-width":o.icon?"6rem":"5rem"}}));function g(){t.set(d,!0),o.onHide?.()}var b=t.comment(),y=t.first_child(b),h=e=>{var l=f(),a=t.child(l),r=e=>{var l=u();t.template_effect(()=>t.set_class(l,1,t.clsx(o.icon),"svelte-1l9u2si")),t.append(e,l)};t.if(a,e=>{o.icon&&e(r)});var n=t.sibling(a,2),i=t.child(n,!0);t.reset(n);var d=t.sibling(n,2),b=e=>{var l=m();t.event("click",l,g),t.append(e,l)};t.if(d,e=>{p()&&e(b)}),t.reset(l),t.action(l,(e,t)=>s?.(e,t),()=>t.get(v)),t.template_effect(()=>{t.set_class(l,1,`super-tag size-${c()??""}`,"svelte-1l9u2si"),t.set_text(i,o.text??"")}),t.append(e,l)};t.if(y,e=>{t.get(d)||e(h)}),t.append(e,b),t.pop(),n()}(e,t.spread_props(()=>a))})}t.append(e,r)}var y={type:"component",metadata:{svelteMajor:5},schema:{name:"bb_component_supertag",friendlyName:"Super Tag",description:"A Tag Component for Budibase",icon:"Bookmark",settings:[{type:"text",key:"text",label:"Text",defaultValue:"Tag"},{type:"icon",key:"icon",label:"Icon",defaultValue:"ri-bookmark-fill"},{type:"select",key:"size",label:"Size",options:[{label:"Small",value:"small"},{label:"Medium",value:"medium"},{label:"Large",value:"large"}],defaultValue:"medium"},{type:"color",key:"color",label:"Color",defaultValue:"var(--spectrum-global-color-static-blue-800)"},{type:"color",key:"textColor",label:"Text Color",defaultValue:"var(--spectrum-global-color-gray-800)"},{type:"boolean",key:"hideable",label:"Hideable",defaultValue:!1},{type:"event",key:"onHide",label:"On Hide",dependsOn:"hideable"}]}},h="1.0.1";if(window){const e={Component:b,schema:y,version:h};window["##BUDIBASE_CUSTOM_COMPONENTS##"]||(window["##BUDIBASE_CUSTOM_COMPONENTS##"]=[]),window["##BUDIBASE_CUSTOM_COMPONENTS##"].push(e),window.registerCustomComponent&&window.registerCustomComponent(e)}var _=b,O=h;return e.Component=_,e.schema=y,e.version=O,e}({},svelteInternal,svelte);

package/dist/schema.json

@@ -0,0 +1,72 @@
+{
+  "type": "component",
+  "metadata": {
+    "svelteMajor": 5
+  },
+  "schema": {
+    "name": "bb_component_supertag",
+    "friendlyName": "Super Tag",
+    "description": "A Tag Component for Budibase",
+    "icon": "Bookmark",
+    "settings": [
+      {
+        "type": "text",
+        "key": "text",
+        "label": "Text",
+        "defaultValue": "Tag"
+      },
+      {
+        "type": "icon",
+        "key": "icon",
+        "label": "Icon",
+        "defaultValue": "ri-bookmark-fill"
+      },
+      {
+        "type": "select",
+        "key": "size",
+        "label": "Size",
+        "options": [
+          {
+            "label": "Small",
+            "value": "small"
+          },
+          {
+            "label": "Medium",
+            "value": "medium"
+          },
+          {
+            "label": "Large",
+            "value": "large"
+          }
+        ],
+        "defaultValue": "medium"
+      },
+      {
+        "type": "color",
+        "key": "color",
+        "label": "Color",
+        "defaultValue": "var(--spectrum-global-color-static-blue-800)"
+      },
+      {
+        "type": "color",
+        "key": "textColor",
+        "label": "Text Color",
+        "defaultValue": "var(--spectrum-global-color-gray-800)"
+      },
+      {
+        "type": "boolean",
+        "key": "hideable",
+        "label": "Hideable",
+        "defaultValue": false
+      },
+      {
+        "type": "event",
+        "key": "onHide",
+        "label": "On Hide",
+        "dependsOn": "hideable"
+      }
+    ]
+  },
+  "hash": "f6e3423783e6ca4ae026a2240284df1bf50d85d6",
+  "version": "1.0.1"
+}

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "bb_component_supertag",
+  "version": "1.0.1",
+  "description": "Super Tag",
+  "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": {},
+  "exports": {
+    ".": {
+      "import": "./dist/plugin.min.js",
+      "require": "./dist/plugin.min.js"
+    }
+  },
+  "devDependencies": {
+    "@budibase/backend-core": "^3.39.22",
+    "@sveltejs/vite-plugin-svelte": "^7.1.2",
+    "tar": "^7.5.16",
+    "terser": "^5.48.0",
+    "vite": "^8.1.0",
+    "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"
+  }
+}