@bagelink/vue 0.0.437 → 0.0.439

package/dist/components/TableSchema.vue.d.ts

@@ -3,12 +3,14 @@ import { BglFormSchemaT } from '..';
 declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<{
     data: any[];
     schema?: BglFormSchemaT | (() => BglFormSchemaT) | undefined;
+    showFields?: string[] | undefined;
 }>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     select: (...args: any[]) => void;
     orderBy: (...args: any[]) => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
     data: any[];
     schema?: BglFormSchemaT | (() => BglFormSchemaT) | undefined;
+    showFields?: string[] | undefined;
 }>>> & {
     onSelect?: ((...args: any[]) => any) | undefined;
     onOrderBy?: ((...args: any[]) => any) | undefined;
@@ -239,6 +241,12 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
                 multiselect: {
                     type: import('vue').PropType<boolean>;
                 };
+                icon: {
+                    type: import('vue').PropType<import('..').MaterialIcons>;
+                };
+                hideLabel: {
+                    type: import('vue').PropType<boolean>;
+                };
             }>> & {
                 "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
             }, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
@@ -278,6 +286,12 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
                 multiselect: {
                     type: import('vue').PropType<boolean>;
                 };
+                icon: {
+                    type: import('vue').PropType<import('..').MaterialIcons>;
+                };
+                hideLabel: {
+                    type: import('vue').PropType<boolean>;
+                };
             }>> & {
                 "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
             }, {}, true, {}, {}, {
@@ -322,6 +336,12 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
                 multiselect: {
                     type: import('vue').PropType<boolean>;
                 };
+                icon: {
+                    type: import('vue').PropType<import('..').MaterialIcons>;
+                };
+                hideLabel: {
+                    type: import('vue').PropType<boolean>;
+                };
             }>> & {
                 "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
             }, {}, {}, {}, {}, {}>;
@@ -363,6 +383,12 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
             multiselect: {
                 type: import('vue').PropType<boolean>;
             };
+            icon: {
+                type: import('vue').PropType<import('..').MaterialIcons>;
+            };
+            hideLabel: {
+                type: import('vue').PropType<boolean>;
+            };
         }>> & {
             "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
         }, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {

package/dist/components/TableSchema.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableSchema.vue.d.ts","sourceRoot":"","sources":["../../src/components/TableSchema.vue"],"names":[],"mappings":"AA2DA;AAGA,OAAO,EACN,KAAK,cAAc,EAInB,MAAM,eAAe,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwVvB,wBAAwG;AACxG,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}
+{"version":3,"file":"TableSchema.vue.d.ts","sourceRoot":"","sources":["../../src/components/TableSchema.vue"],"names":[],"mappings":"AA2DA;AAGA,OAAO,EACN,KAAK,cAAc,EAInB,MAAM,eAAe,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsWvB,wBAAwG;AACxG,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}

package/dist/components/form/inputs/SelectInput.vue.d.ts

@@ -1,3 +1,4 @@
+import { MaterialIcons } from '../../..';
 
 type Option = string | number | Record<string, any> | {
     label: string;
@@ -13,6 +14,8 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
     label?: string | undefined;
     fullWidth?: boolean | undefined;
     multiselect?: boolean | undefined;
+    icon?: MaterialIcons | undefined;
+    hideLabel?: boolean | undefined;
 }>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (...args: any[]) => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
@@ -25,6 +28,8 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
     label?: string | undefined;
     fullWidth?: boolean | undefined;
     multiselect?: boolean | undefined;
+    icon?: MaterialIcons | undefined;
+    hideLabel?: boolean | undefined;
 }>>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {}, {}>, {

package/dist/components/form/inputs/SelectInput.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/SelectInput.vue"],"names":[],"mappings":"AAoEA;AAIA,OAAO,wBAAwB,CAAC;AAKhC,KAAK,MAAM,GACR,MAAM,GACN,MAAM,GACN,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GACnB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuc7C,wBAAwG;AACxG,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}
+{"version":3,"file":"SelectInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/SelectInput.vue"],"names":[],"mappings":"AAwEA;AAIA,OAAO,wBAAwB,CAAC;AAChC,OAAO,EAAyB,KAAK,aAAa,EAAE,MAAM,eAAe,CAAC;AAI1E,KAAK,MAAM,GACR,MAAM,GACN,MAAM,GACN,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GACnB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAie7C,wBAAwG;AACxG,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}

package/dist/index.cjs

@@ -5117,7 +5117,7 @@ const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
 const _hoisted_1$E = { class: "full-nav" };
 const _hoisted_2$x = { class: "nav-scroll" };
 const _hoisted_3$l = { class: "nav-links-wrapper" };
-const _hoisted_4$e = { class: "tooltip" };
+const _hoisted_4$f = { class: "tooltip" };
 const _hoisted_5$b = { class: "bot-buttons-wrapper" };
 const _hoisted_6$7 = { class: "tooltip" };
 const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
@@ -5166,7 +5166,7 @@ const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
                     vue.createVNode(vue.unref(_sfc_main$I), {
                       icon: link.icon
                     }, null, 8, ["icon"]),
-                    vue.createElementVNode("div", _hoisted_4$e, vue.toDisplayString(link.label), 1)
+                    vue.createElementVNode("div", _hoisted_4$f, vue.toDisplayString(link.label), 1)
                   ]),
                   _: 2
                 }, 1032, ["to", "onClick"]);
@@ -5545,7 +5545,7 @@ const ModalForm = /* @__PURE__ */ _export_sfc(_sfc_main$E, [["__scopeId", "data-
 const _hoisted_1$B = { class: "accordion-item" };
 const _hoisted_2$u = ["aria-expanded", "aria-controls"];
 const _hoisted_3$k = { class: "accordion-label" };
-const _hoisted_4$d = ["id", "aria-hidden"];
+const _hoisted_4$e = ["id", "aria-hidden"];
 const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
   __name: "AccordionItem",
   props: {
@@ -5598,7 +5598,7 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
               "aria-hidden": vue.unref(open) ? "false" : "true"
             }, [
               vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
-            ], 8, _hoisted_4$d)) : vue.createCommentVNode("", true)
+            ], 8, _hoisted_4$e)) : vue.createCommentVNode("", true)
           ]),
           _: 3
         })
@@ -5687,7 +5687,7 @@ const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
 const _hoisted_1$x = { class: "table-list-wrap h-100" };
 const _hoisted_2$q = { class: "infinite-wrapper" };
 const _hoisted_3$i = { class: "row first-row" };
-const _hoisted_4$c = ["onClick"];
+const _hoisted_4$d = ["onClick"];
 const _hoisted_5$a = { class: "flex" };
 const _hoisted_6$6 = ["onClick"];
 const _hoisted_7$2 = { key: 1 };
@@ -5695,7 +5695,8 @@ const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
   __name: "TableSchema",
   props: {
     data: {},
-    schema: { type: Function }
+    schema: { type: Function },
+    showFields: {}
   },
   emits: ["select", "orderBy"],
   setup(__props, { emit: __emit }) {
@@ -5706,11 +5707,23 @@ const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
       if (typeof props2.schema === "function") {
         return props2.schema();
       }
-      if (props2.schema)
-        return props2.schema;
-      const keys4 = [...new Set((props2.data || []).map(Object.keys).flat())];
-      const schema = keys4.map((id) => ({ id, label: keyToLabel(id) }));
-      return schema;
+      if (props2.schema) {
+        return props2.showFields ? props2.schema.filter((f2) => {
+          var _a2;
+          return (_a2 = props2.showFields) == null ? void 0 : _a2.includes(f2.id);
+        }) : props2.schema;
+      }
+      const keys4 = [
+        ...new Set((props2.data || []).map(Object.keys).flat())
+      ];
+      const schema = keys4.map((id) => ({
+        id,
+        label: keyToLabel(id)
+      }));
+      return props2.showFields ? schema.filter((f2) => {
+        var _a2;
+        return ((_a2 = props2.showFields) == null ? void 0 : _a2.includes(f2.id)) || !f2.id;
+      }) : schema;
     });
     const emit2 = __emit;
     const selectElement = (item) => emit2("select", item);
@@ -5776,7 +5789,7 @@ const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
                     }, null, 8, ["class"])
                   ], 2)
                 ])
-              ], 8, _hoisted_4$c);
+              ], 8, _hoisted_4$d);
             }), 128))
           ]),
           vue.createElementVNode("tbody", {
@@ -5819,7 +5832,7 @@ const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const TableSchema = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["__scopeId", "data-v-1d169811"]]);
+const TableSchema = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["__scopeId", "data-v-a99caac1"]]);
 const _sfc_main$y = {};
 const _hoisted_1$w = { class: "flex space-between" };
 function _sfc_render$1(_ctx, _cache) {
@@ -5860,7 +5873,7 @@ const _hoisted_2$p = {
   class: "data-row"
 };
 const _hoisted_3$h = { class: "key" };
-const _hoisted_4$b = { key: 1 };
+const _hoisted_4$c = { key: 1 };
 const _hoisted_5$9 = { class: "key" };
 const _hoisted_6$5 = { class: "vlue" };
 const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
@@ -5896,7 +5909,7 @@ const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
             ])) : vue.createCommentVNode("", true)
           ], 64);
         }), 128)),
-        !((_a2 = _ctx.schema) == null ? void 0 : _a2.length) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$b, [
+        !((_a2 = _ctx.schema) == null ? void 0 : _a2.length) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$c, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(Object.entries(itemData.value), ([key, value]) => {
             return vue.openBlock(), vue.createElementBlock("div", {
               class: "data-row",
@@ -6618,7 +6631,7 @@ const _hoisted_2$l = /* @__PURE__ */ _withScopeId$2(() => /* @__PURE__ */ vue.cr
 const _hoisted_3$g = [
   _hoisted_2$l
 ];
-const _hoisted_4$a = ["required", "id"];
+const _hoisted_4$b = ["required", "id"];
 const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
   __name: "CheckInput",
   props: /* @__PURE__ */ vue.mergeModels({
@@ -6649,7 +6662,7 @@ const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
             id: _ctx.id,
             type: "checkbox",
             "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => checked.value = $event)
-          }, null, 8, _hoisted_4$a), [
+          }, null, 8, _hoisted_4$b), [
             [vue.vModelCheckbox, checked.value]
           ]),
           vue.renderSlot(_ctx.$slots, "label", {}, () => [
@@ -15362,8 +15375,9 @@ const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
 });
 const JSONInput = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["__scopeId", "data-v-1fc4f739"]]);
 const _hoisted_1$m = ["disabled"];
-const _hoisted_2$i = ["value"];
-const _hoisted_3$e = ["onClick"];
+const _hoisted_2$i = { key: 1 };
+const _hoisted_3$e = ["value"];
+const _hoisted_4$a = ["onClick"];
 const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
   __name: "SelectInput",
   props: {
@@ -15375,7 +15389,9 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
     required: { type: Boolean },
     label: {},
     fullWidth: { type: Boolean },
-    multiselect: { type: Boolean }
+    multiselect: { type: Boolean },
+    icon: {},
+    hideLabel: { type: Boolean }
   },
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
@@ -15432,10 +15448,12 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
       return option2.value;
     };
     const isSelected = (option2) => !!selectedItems.value.find((item) => getValue(option2) === getValue(item));
-    const filteredOptions = vue.computed(() => props2.options.filter((option2) => {
-      const searchTerm = search.value.split(/\s+/).filter(Boolean).map((t) => new RegExp(t, "gi"));
-      return Boolean(option2) && (searchTerm.every((s2) => getLabel(option2).match(s2)) || searchTerm.length === 0);
-    }));
+    const filteredOptions = vue.computed(
+      () => props2.options.filter((option2) => {
+        const searchTerm = search.value.split(/\s+/).filter(Boolean).map((t) => new RegExp(t, "gi"));
+        return Boolean(option2) && (searchTerm.every((s2) => getLabel(option2).match(s2)) || searchTerm.length === 0);
+      })
+    );
     const select2 = (option2) => {
       var _a2;
       const existingIndex = selectedItems.value.findIndex(
@@ -15540,7 +15558,7 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
                     icon: "fiber_manual_record"
                   })) : vue.createCommentVNode("", true),
                   vue.createElementVNode("span", null, vue.toDisplayString(getLabel(option2)), 1)
-                ], 10, _hoisted_3$e);
+                ], 10, _hoisted_4$a);
               }), 128)),
               vue.renderSlot(_ctx.$slots, "last", {}, void 0, true)
             ]),
@@ -15557,8 +15575,15 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
               type: "button",
               class: vue.normalizeClass(["selectinput-btn", { isEmpty: vue.unref(selectedItems).length === 0 }])
             }, [
-              vue.createElementVNode("p", null, vue.toDisplayString(selectedLabel.value), 1),
-              !_ctx.disabled ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$I), vue.normalizeProps(vue.mergeProps({ key: 0 }, { icon: vue.unref(open) ? "unfold_less" : "unfold_more" })), null, 16)) : vue.createCommentVNode("", true)
+              _ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$I), {
+                key: 0,
+                icon: _ctx.icon
+              }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
+              !_ctx.hideLabel ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_2$i, vue.toDisplayString(selectedLabel.value), 1)) : vue.createCommentVNode("", true),
+              !_ctx.disabled ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$I), vue.mergeProps({
+                key: 2,
+                thin: ""
+              }, { icon: vue.unref(open) ? "unfold_less" : "unfold_more" }), null, 16)) : vue.createCommentVNode("", true)
             ], 42, _hoisted_1$m),
             _ctx.required ? (vue.openBlock(), vue.createElementBlock("input", {
               key: 0,
@@ -15567,7 +15592,7 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
               onInput: _cache[1] || (_cache[1] = ($event) => updateOpen(true)),
               value: vue.unref(selectedItems),
               required: ""
-            }, null, 40, _hoisted_2$i)) : vue.createCommentVNode("", true)
+            }, null, 40, _hoisted_3$e)) : vue.createCommentVNode("", true)
           ])
         ]),
         _: 3
@@ -15575,7 +15600,7 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-39ae2ac8"]]);
+const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-49c80f47"]]);
 /*!
   * vue-draggable-next v2.2.0
   * (c) 2023 Anish George

package/dist/index.mjs

@@ -5115,7 +5115,7 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
 const _hoisted_1$E = { class: "full-nav" };
 const _hoisted_2$x = { class: "nav-scroll" };
 const _hoisted_3$l = { class: "nav-links-wrapper" };
-const _hoisted_4$e = { class: "tooltip" };
+const _hoisted_4$f = { class: "tooltip" };
 const _hoisted_5$b = { class: "bot-buttons-wrapper" };
 const _hoisted_6$7 = { class: "tooltip" };
 const _sfc_main$H = /* @__PURE__ */ defineComponent({
@@ -5164,7 +5164,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
                     createVNode(unref(_sfc_main$I), {
                       icon: link.icon
                     }, null, 8, ["icon"]),
-                    createElementVNode("div", _hoisted_4$e, toDisplayString(link.label), 1)
+                    createElementVNode("div", _hoisted_4$f, toDisplayString(link.label), 1)
                   ]),
                   _: 2
                 }, 1032, ["to", "onClick"]);
@@ -5543,7 +5543,7 @@ const ModalForm = /* @__PURE__ */ _export_sfc(_sfc_main$E, [["__scopeId", "data-
 const _hoisted_1$B = { class: "accordion-item" };
 const _hoisted_2$u = ["aria-expanded", "aria-controls"];
 const _hoisted_3$k = { class: "accordion-label" };
-const _hoisted_4$d = ["id", "aria-hidden"];
+const _hoisted_4$e = ["id", "aria-hidden"];
 const _sfc_main$D = /* @__PURE__ */ defineComponent({
   __name: "AccordionItem",
   props: {
@@ -5596,7 +5596,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
               "aria-hidden": unref(open) ? "false" : "true"
             }, [
               renderSlot(_ctx.$slots, "default", {}, void 0, true)
-            ], 8, _hoisted_4$d)) : createCommentVNode("", true)
+            ], 8, _hoisted_4$e)) : createCommentVNode("", true)
           ]),
           _: 3
         })
@@ -5685,7 +5685,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
 const _hoisted_1$x = { class: "table-list-wrap h-100" };
 const _hoisted_2$q = { class: "infinite-wrapper" };
 const _hoisted_3$i = { class: "row first-row" };
-const _hoisted_4$c = ["onClick"];
+const _hoisted_4$d = ["onClick"];
 const _hoisted_5$a = { class: "flex" };
 const _hoisted_6$6 = ["onClick"];
 const _hoisted_7$2 = { key: 1 };
@@ -5693,7 +5693,8 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
   __name: "TableSchema",
   props: {
     data: {},
-    schema: { type: Function }
+    schema: { type: Function },
+    showFields: {}
   },
   emits: ["select", "orderBy"],
   setup(__props, { emit: __emit }) {
@@ -5704,11 +5705,23 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
       if (typeof props2.schema === "function") {
         return props2.schema();
       }
-      if (props2.schema)
-        return props2.schema;
-      const keys4 = [...new Set((props2.data || []).map(Object.keys).flat())];
-      const schema = keys4.map((id) => ({ id, label: keyToLabel(id) }));
-      return schema;
+      if (props2.schema) {
+        return props2.showFields ? props2.schema.filter((f2) => {
+          var _a2;
+          return (_a2 = props2.showFields) == null ? void 0 : _a2.includes(f2.id);
+        }) : props2.schema;
+      }
+      const keys4 = [
+        ...new Set((props2.data || []).map(Object.keys).flat())
+      ];
+      const schema = keys4.map((id) => ({
+        id,
+        label: keyToLabel(id)
+      }));
+      return props2.showFields ? schema.filter((f2) => {
+        var _a2;
+        return ((_a2 = props2.showFields) == null ? void 0 : _a2.includes(f2.id)) || !f2.id;
+      }) : schema;
     });
     const emit2 = __emit;
     const selectElement = (item) => emit2("select", item);
@@ -5774,7 +5787,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
                     }, null, 8, ["class"])
                   ], 2)
                 ])
-              ], 8, _hoisted_4$c);
+              ], 8, _hoisted_4$d);
             }), 128))
           ]),
           createElementVNode("tbody", {
@@ -5817,7 +5830,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const TableSchema = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["__scopeId", "data-v-1d169811"]]);
+const TableSchema = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["__scopeId", "data-v-a99caac1"]]);
 const _sfc_main$y = {};
 const _hoisted_1$w = { class: "flex space-between" };
 function _sfc_render$1(_ctx, _cache) {
@@ -5858,7 +5871,7 @@ const _hoisted_2$p = {
   class: "data-row"
 };
 const _hoisted_3$h = { class: "key" };
-const _hoisted_4$b = { key: 1 };
+const _hoisted_4$c = { key: 1 };
 const _hoisted_5$9 = { class: "key" };
 const _hoisted_6$5 = { class: "vlue" };
 const _sfc_main$w = /* @__PURE__ */ defineComponent({
@@ -5894,7 +5907,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
             ])) : createCommentVNode("", true)
           ], 64);
         }), 128)),
-        !((_a2 = _ctx.schema) == null ? void 0 : _a2.length) ? (openBlock(), createElementBlock("div", _hoisted_4$b, [
+        !((_a2 = _ctx.schema) == null ? void 0 : _a2.length) ? (openBlock(), createElementBlock("div", _hoisted_4$c, [
           (openBlock(true), createElementBlock(Fragment$1, null, renderList(Object.entries(itemData.value), ([key, value]) => {
             return openBlock(), createElementBlock("div", {
               class: "data-row",
@@ -6616,7 +6629,7 @@ const _hoisted_2$l = /* @__PURE__ */ _withScopeId$2(() => /* @__PURE__ */ create
 const _hoisted_3$g = [
   _hoisted_2$l
 ];
-const _hoisted_4$a = ["required", "id"];
+const _hoisted_4$b = ["required", "id"];
 const _sfc_main$k = /* @__PURE__ */ defineComponent({
   __name: "CheckInput",
   props: /* @__PURE__ */ mergeModels({
@@ -6647,7 +6660,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
             id: _ctx.id,
             type: "checkbox",
             "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => checked.value = $event)
-          }, null, 8, _hoisted_4$a), [
+          }, null, 8, _hoisted_4$b), [
             [vModelCheckbox, checked.value]
           ]),
           renderSlot(_ctx.$slots, "label", {}, () => [
@@ -15360,8 +15373,9 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
 });
 const JSONInput = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["__scopeId", "data-v-1fc4f739"]]);
 const _hoisted_1$m = ["disabled"];
-const _hoisted_2$i = ["value"];
-const _hoisted_3$e = ["onClick"];
+const _hoisted_2$i = { key: 1 };
+const _hoisted_3$e = ["value"];
+const _hoisted_4$a = ["onClick"];
 const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "SelectInput",
   props: {
@@ -15373,7 +15387,9 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     required: { type: Boolean },
     label: {},
     fullWidth: { type: Boolean },
-    multiselect: { type: Boolean }
+    multiselect: { type: Boolean },
+    icon: {},
+    hideLabel: { type: Boolean }
   },
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
@@ -15430,10 +15446,12 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
       return option2.value;
     };
     const isSelected = (option2) => !!selectedItems.value.find((item) => getValue(option2) === getValue(item));
-    const filteredOptions = computed(() => props2.options.filter((option2) => {
-      const searchTerm = search.value.split(/\s+/).filter(Boolean).map((t) => new RegExp(t, "gi"));
-      return Boolean(option2) && (searchTerm.every((s2) => getLabel(option2).match(s2)) || searchTerm.length === 0);
-    }));
+    const filteredOptions = computed(
+      () => props2.options.filter((option2) => {
+        const searchTerm = search.value.split(/\s+/).filter(Boolean).map((t) => new RegExp(t, "gi"));
+        return Boolean(option2) && (searchTerm.every((s2) => getLabel(option2).match(s2)) || searchTerm.length === 0);
+      })
+    );
     const select2 = (option2) => {
       var _a2;
       const existingIndex = selectedItems.value.findIndex(
@@ -15538,7 +15556,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                     icon: "fiber_manual_record"
                   })) : createCommentVNode("", true),
                   createElementVNode("span", null, toDisplayString(getLabel(option2)), 1)
-                ], 10, _hoisted_3$e);
+                ], 10, _hoisted_4$a);
               }), 128)),
               renderSlot(_ctx.$slots, "last", {}, void 0, true)
             ]),
@@ -15555,8 +15573,15 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
               type: "button",
               class: normalizeClass(["selectinput-btn", { isEmpty: unref(selectedItems).length === 0 }])
             }, [
-              createElementVNode("p", null, toDisplayString(selectedLabel.value), 1),
-              !_ctx.disabled ? (openBlock(), createBlock(unref(_sfc_main$I), normalizeProps(mergeProps({ key: 0 }, { icon: unref(open) ? "unfold_less" : "unfold_more" })), null, 16)) : createCommentVNode("", true)
+              _ctx.icon ? (openBlock(), createBlock(unref(_sfc_main$I), {
+                key: 0,
+                icon: _ctx.icon
+              }, null, 8, ["icon"])) : createCommentVNode("", true),
+              !_ctx.hideLabel ? (openBlock(), createElementBlock("p", _hoisted_2$i, toDisplayString(selectedLabel.value), 1)) : createCommentVNode("", true),
+              !_ctx.disabled ? (openBlock(), createBlock(unref(_sfc_main$I), mergeProps({
+                key: 2,
+                thin: ""
+              }, { icon: unref(open) ? "unfold_less" : "unfold_more" }), null, 16)) : createCommentVNode("", true)
             ], 42, _hoisted_1$m),
             _ctx.required ? (openBlock(), createElementBlock("input", {
               key: 0,
@@ -15565,7 +15590,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
               onInput: _cache[1] || (_cache[1] = ($event) => updateOpen(true)),
               value: unref(selectedItems),
               required: ""
-            }, null, 40, _hoisted_2$i)) : createCommentVNode("", true)
+            }, null, 40, _hoisted_3$e)) : createCommentVNode("", true)
           ])
         ]),
         _: 3
@@ -15573,7 +15598,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-39ae2ac8"]]);
+const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-49c80f47"]]);
 /*!
   * vue-draggable-next v2.2.0
   * (c) 2023 Anish George

package/dist/style.css

@@ -623,41 +623,41 @@ a[data-v-d09a83c5] {
   gap: 1rem;
 }
 
-.list-arrows[data-v-1d169811] {
+.list-arrows[data-v-a99caac1] {
 	opacity: 0;
 }
-.list-arrows .bgl_icon-font[data-v-1d169811] {
+.list-arrows .bgl_icon-font[data-v-a99caac1] {
 	transition: all ease-in-out 0.2s;
 }
-.list-arrows.sorted[data-v-1d169811] {
+.list-arrows.sorted[data-v-a99caac1] {
 	opacity: 1;
 }
-.col img[data-v-1d169811] {
+.col img[data-v-a99caac1] {
 	height: 35px;
 	margin-top: -14px;
 	margin-bottom: -14px;
 	border-radius: 5px;
 }
-.list-arrows.sorted .desc[data-v-1d169811] {
+.list-arrows.sorted .desc[data-v-a99caac1] {
 	transform: rotate(180deg);
 }
-table[data-v-1d169811] {
+table[data-v-a99caac1] {
 	border-collapse: separate;
 	border-spacing: 0 15px;
 	border-collapse: collapse;
 }
-th[data-v-1d169811] {
+th[data-v-a99caac1] {
 	font-weight: 400;
 }
-.embedded-field[data-v-1d169811] {
+.embedded-field[data-v-a99caac1] {
 	margin-bottom: -0.2rem;
 	margin-top: -0.2rem;
 }
-.row[data-v-1d169811] {
+.row[data-v-a99caac1] {
 	border-bottom: 1px solid var(--border-color);
 	cursor: pointer;
 }
-.row.first-row[data-v-1d169811] {
+.row.first-row[data-v-a99caac1] {
 	font-size: 0.8rem;
 	color: var(--bgl-black-tint);
 	position: sticky;
@@ -667,7 +667,7 @@ th[data-v-1d169811] {
 	height: 50px;
 	vertical-align: bottom;
 }
-.row.first-row[data-v-1d169811]::after {
+.row.first-row[data-v-a99caac1]::after {
 	content: '';
 	border-bottom: 1px solid var(--border-color);
 	position: absolute;
@@ -675,27 +675,27 @@ th[data-v-1d169811] {
 	right: 0;
 	bottom: -1px;
 }
-.first-row .col[data-v-1d169811] {
+.first-row .col[data-v-a99caac1] {
 	cursor: pointer;
 	background: var(--bgl-white);
 }
-.col[data-v-1d169811] {
+.col[data-v-a99caac1] {
 	white-space: nowrap;
 	padding: 0.75rem 0.5rem;
 	transition: var(--bgl-transition);
 	line-height: 1;
 	align-items: center;
 }
-.col > div[data-v-1d169811] {
+.col > div[data-v-a99caac1] {
 	display: flex;
 	gap: 0.5rem;
 }
-.max-col-width[data-v-1d169811] {
+.max-col-width[data-v-a99caac1] {
 	max-width: 30vw;
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
-.col.check .bgl_icon-font[data-v-1d169811] {
+.col.check .bgl_icon-font[data-v-a99caac1] {
 	border-radius: 100%;
 	background: var(--bgl-blue-20);
 	color: var(--bgl-primary);
@@ -706,27 +706,27 @@ th[data-v-1d169811] {
 	justify-content: center;
 	margin-top: -2px;
 }
-.rows[data-v-1d169811] {
+.rows[data-v-a99caac1] {
 	font-size: 0.8125em;
 }
-.table-list[data-v-1d169811] {
+.table-list[data-v-a99caac1] {
 	height: 100%;
 	position: relative;
 	padding-left: 0 !important;
 	padding-right: 0 !important;
 	overflow: auto;
 }
-.BagelTable .table-list[data-v-1d169811] {
+.BagelTable .table-list[data-v-a99caac1] {
 	overflow: unset;
 }
-.row-item[data-v-1d169811] {
+.row-item[data-v-a99caac1] {
 	height: 50px;
 	transition: all 200ms ease;
 }
-.row-item[data-v-1d169811]:hover {
+.row-item[data-v-a99caac1]:hover {
 	background: var(--bgl-gray-light);
 }
-.infinite-wrapper[data-v-1d169811] {
+.infinite-wrapper[data-v-a99caac1] {
 	overflow-y: auto;
 	width: 100%;
 }
@@ -1070,10 +1070,10 @@ display: block;
 }
 .resize-observer[data-v-b329ee4c]{position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;border:none;background-color:transparent;pointer-events:none;display:block;overflow:hidden;opacity:0}.resize-observer[data-v-b329ee4c] object{display:block;position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;pointer-events:none;z-index:-1}.v-popper__popper{z-index:10000;top:0;left:0;outline:none}.v-popper__popper.v-popper__popper--hidden{visibility:hidden;opacity:0;transition:opacity .15s,visibility .15s;pointer-events:none}.v-popper__popper.v-popper__popper--shown{visibility:visible;opacity:1;transition:opacity .15s}.v-popper__popper.v-popper__popper--skip-transition,.v-popper__popper.v-popper__popper--skip-transition>.v-popper__wrapper{transition:none!important}.v-popper__backdrop{position:absolute;top:0;left:0;width:100%;height:100%;display:none}.v-popper__inner{position:relative;box-sizing:border-box;overflow-y:auto}.v-popper__inner>div{position:relative;z-index:1;max-width:inherit;max-height:inherit}.v-popper__arrow-container{position:absolute;width:10px;height:10px}.v-popper__popper--arrow-overflow .v-popper__arrow-container,.v-popper__popper--no-positioning .v-popper__arrow-container{display:none}.v-popper__arrow-inner,.v-popper__arrow-outer{border-style:solid;position:absolute;top:0;left:0;width:0;height:0}.v-popper__arrow-inner{visibility:hidden;border-width:7px}.v-popper__arrow-outer{border-width:6px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{left:-2px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{left:-1px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer{border-bottom-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-container{top:0}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{border-top-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-top-color:transparent!important}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{top:-4px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{top:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{top:-1px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{border-left-width:0;border-left-color:transparent!important;border-top-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{left:-4px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{left:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-container{right:-10px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer{border-right-width:0;border-top-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner{left:-2px}.v-popper--theme-tooltip .v-popper__inner{background:rgba(0,0,0,.8);color:#fff;border-radius:6px;padding:7px 12px 6px}.v-popper--theme-tooltip .v-popper__arrow-outer{border-color:#000c}.v-popper--theme-dropdown .v-popper__inner{background:#fff;color:#000;border-radius:6px;border:1px solid #ddd;box-shadow:0 6px 30px #0000001a}.v-popper--theme-dropdown .v-popper__arrow-inner{visibility:visible;border-color:#fff}.v-popper--theme-dropdown .v-popper__arrow-outer{border-color:#ddd}
 
-.selectinput[data-v-39ae2ac8] {
+.selectinput[data-v-49c80f47] {
 	width: 100%;
 }
-.selectinput-option[data-v-39ae2ac8] {
+.selectinput-option[data-v-49c80f47] {
 	padding: 6px 12px;
 	cursor: pointer;
 	border-radius: 5px;
@@ -1084,14 +1084,14 @@ display: block;
 	width: 100%;
 	font-size: var(--input-font-size);
 }
-.selectinput-options[data-v-39ae2ac8] {
+.selectinput-options[data-v-49c80f47] {
 	max-height: 300px;
 	overflow-y: auto;
 }
-.selectinput-option[data-v-39ae2ac8]:hover {
+.selectinput-option[data-v-49c80f47]:hover {
 	background: var(--bgl-gray-20);
 }
-.isEmpty p[data-v-39ae2ac8] {
+.isEmpty p[data-v-49c80f47] {
 	opacity: 0.3;
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.437",
+  "version": "0.0.439",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

package/src/components/TableSchema.vue

@@ -73,16 +73,28 @@ const loading = $ref(true);
 const props = defineProps<{
 	data: any[];
 	schema?: BglFormSchemaT | (() => BglFormSchemaT);
+	showFields?: string[];
 }>();
 
 const computedSchema = $computed(() => {
 	if (typeof props.schema === 'function') {
 		return props.schema();
 	}
-	if (props.schema) return props.schema;
-	const keys = [...new Set((props.data || []).map(Object.keys).flat())] as string[];
-	const schema: BglFormSchemaT = keys.map((id) => ({ id, label: keyToLabel(id) }));
-	return schema;
+	if (props.schema) {
+		return props.showFields
+			? props.schema.filter((f) => props.showFields?.includes(f.id as string))
+			: props.schema;
+	}
+	const keys = [
+		...new Set((props.data || []).map(Object.keys).flat()),
+	] as string[];
+	const schema: BglFormSchemaT = keys.map((id) => ({
+		id,
+		label: keyToLabel(id),
+	}));
+	return props.showFields
+		? schema.filter((f) => props.showFields?.includes(f.id as string) || !f.id)
+		: schema;
 });
 
 const emit = defineEmits(['select', 'orderBy']);

package/src/components/form/inputs/SelectInput.vue

@@ -16,9 +16,13 @@
 				class="selectinput-btn"
 				:class="{ isEmpty: selectedItems.length === 0 }"
 			>
-				<p>{{ selectedLabel }}</p>
+				<Icon v-if="icon" :icon="icon" />
+				<p v-if="!hideLabel">
+					{{ selectedLabel }}
+				</p>
 				<Icon
 					v-if="!disabled"
+					thin
 					v-bind="{ icon: open ? 'unfold_less' : 'unfold_more' }"
 				/>
 			</button>
@@ -29,7 +33,7 @@
 				@input="updateOpen(true)"
 				:value="selectedItems"
 				required
-			>
+			/>
 		</label>
 		<template #popper>
 			<Card
@@ -71,7 +75,7 @@
 import { watch } from 'vue';
 import { Dropdown } from 'floating-vue';
 import 'floating-vue/style.css';
-import { TextInput, Card, Icon } from '@bagelink/vue';
+import { TextInput, Card, Icon, type MaterialIcons } from '@bagelink/vue';
 
 type Option =
 	| string
@@ -91,6 +95,8 @@ const props = defineProps<{
 	label?: string;
 	fullWidth?: boolean;
 	multiselect?: boolean;
+	icon?: MaterialIcons;
+	hideLabel?: boolean;
 }>();
 
 let selectedItems = $ref<Option[]>([]);
@@ -144,19 +150,22 @@ const getValue = (option?: Option) => {
 	return option.value;
 };
 
-const isSelected = (option: Option) => !!selectedItems.find((item) => getValue(option) === getValue(item));
-
-const filteredOptions = $computed(() => props.options.filter((option) => {
-	const searchTerm = search
-		.split(/\s+/)
-		.filter(Boolean)
-		.map((t) => new RegExp(t, 'gi'));
-	return (
-		Boolean(option) &&
+const isSelected = (option: Option) =>
+	!!selectedItems.find((item) => getValue(option) === getValue(item));
+
+const filteredOptions = $computed(() =>
+	props.options.filter((option) => {
+		const searchTerm = search
+			.split(/\s+/)
+			.filter(Boolean)
+			.map((t) => new RegExp(t, 'gi'));
+		return (
+			Boolean(option) &&
 			(searchTerm.every((s) => getLabel(option).match(s)) ||
 				searchTerm.length === 0)
-	);
-}));
+		);
+	}),
+);
 
 const select = (option: Option) => {
 	const existingIndex = selectedItems.findIndex(