@bagelink/vue 0.0.172 → 0.0.182

package/dist/index.mjs

@@ -14606,7 +14606,7 @@ const _hoisted_3$H = { class: "full-nav" };
 const _hoisted_4$q = { class: "nav-scroll" };
 const _hoisted_5$l = { class: "nav-links-wrapper" };
 const _hoisted_6$h = { class: "icon-font" };
-const _hoisted_7$c = { class: "tooltip" };
+const _hoisted_7$d = { class: "tooltip" };
 const _hoisted_8$7 = { class: "bot-buttons-wrapper" };
 const _sfc_main$Q = /* @__PURE__ */ defineComponent({
   __name: "NavBar",
@@ -14644,7 +14644,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
                 }, {
                   default: withCtx(() => [
                     createElementVNode("div", _hoisted_6$h, toDisplayString(link.materialIcon), 1),
-                    createElementVNode("div", _hoisted_7$c, toDisplayString(link.localized ? link.localized : link.label), 1)
+                    createElementVNode("div", _hoisted_7$d, toDisplayString(link.localized ? link.localized : link.label), 1)
                   ]),
                   _: 2
                 }, 1032, ["to"]);
@@ -14820,8 +14820,8 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const props2 = __props;
     const emit2 = __emit;
-    const isOpen = ref(false);
-    const selectedOption = ref(props2.modelValue);
+    let isOpen = ref(false);
+    let selectedOption = ref(props2.modelValue);
     function toggleDropdown() {
       isOpen.value = !isOpen.value;
     }
@@ -14832,11 +14832,11 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
     }
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["dropdown", { opendrop: isOpen.value }]),
+        class: normalizeClass(["dropdown", { opendrop: unref(isOpen) }]),
         onClick: toggleDropdown
       }, [
         createElementVNode("div", _hoisted_1$U, [
-          createTextVNode(toDisplayString(selectedOption.value || __props.placeholder) + " ", 1),
+          createTextVNode(toDisplayString(unref(selectedOption) || __props.placeholder) + " ", 1),
           createVNode(unref(_sfc_main$R), { icon: "keyboard_arrow_down" })
         ]),
         createElementVNode("div", _hoisted_2$M, [
@@ -14996,7 +14996,7 @@ const _hoisted_3$C = { class: "comment-top" };
 const _hoisted_4$n = { class: "comment-owner" };
 const _hoisted_5$j = { class: "comment-time" };
 const _hoisted_6$g = { class: "comment-actions" };
-const _hoisted_7$b = ["innerHTML"];
+const _hoisted_7$c = ["innerHTML"];
 const _hoisted_8$6 = { class: "new-comment" };
 const _sfc_main$J = /* @__PURE__ */ defineComponent({
   __name: "Comments",
@@ -15085,7 +15085,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
                 key: 1,
                 class: "editor-wrapper",
                 innerHTML: comment.body_html
-              }, null, 8, _hoisted_7$b))
+              }, null, 8, _hoisted_7$c))
             ], 2);
           }), 128))
         ]),
@@ -15309,7 +15309,7 @@ const _hoisted_3$B = { class: "row first-row" };
 const _hoisted_4$m = ["onClick"];
 const _hoisted_5$i = { class: "flex" };
 const _hoisted_6$f = ["onClick"];
-const _hoisted_7$a = { key: 1 };
+const _hoisted_7$b = { key: 1 };
 const _sfc_main$F = /* @__PURE__ */ defineComponent({
   __name: "TableSchema",
   props: {
@@ -15349,10 +15349,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
     const columns = computed(
       () => {
         var _a;
-        return ((_a = props2.schema) == null ? void 0 : _a.call(props2)) || Object.keys(props2.data[0]).map((k) => ({
-          id: k,
-          inputType: "PlainText"
-        }));
+        return ((_a = props2.schema) == null ? void 0 : _a.call(props2)) || Object.keys(props2.data[0]).map((k) => ({ id: k, inputType: "PlainText" }));
       }
     );
     return (_ctx, _cache) => {
@@ -15399,9 +15396,14 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
                       key: 0,
                       row,
                       field
-                    }, void 0, true) : (openBlock(), createElementBlock("div", _hoisted_7$a, [
+                    }, void 0, true) : (openBlock(), createElementBlock("div", _hoisted_7$b, [
                       (field["v-if"] ? field["v-if"](row[field.id], row) : true) ? (openBlock(), createBlock(resolveDynamicComponent(field.$el || field.$cmp || "div"), mergeProps({ key: 0 }, bindAttrs(field.attrs, row[field.id], row), {
-                        src: field.$el === "img" ? (_a = row[field.id]) == null ? void 0 : _a.url : ""
+                        src: field.$el === "img" ? (_a = row[field.id]) == null ? void 0 : _a.url : "",
+                        "onUpdate:modelValue": ($event) => {
+                          var _a2;
+                          return (_a2 = field == null ? void 0 : field.onUpdate) == null ? void 0 : _a2.call(field, $event, row[field.id], row);
+                        },
+                        modelValue: row[field.id]
                       }), {
                         default: withCtx(() => {
                           var _a2;
@@ -15410,7 +15412,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
                           ];
                         }),
                         _: 2
-                      }, 1040, ["src"])) : createCommentVNode("", true)
+                      }, 1040, ["src", "onUpdate:modelValue", "modelValue"])) : createCommentVNode("", true)
                     ]))
                   ]);
                 }), 128))
@@ -15422,7 +15424,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const TableSchema = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__scopeId", "data-v-fb5b163a"]]);
+const TableSchema = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__scopeId", "data-v-8cd8ab82"]]);
 const _sfc_main$E = {};
 const _hoisted_1$M = { class: "flex space-between" };
 function _sfc_render$1(_ctx, _cache) {
@@ -15506,7 +15508,7 @@ const _hoisted_6$e = {
   key: 0,
   class: "person-card-details"
 };
-const _hoisted_7$9 = {
+const _hoisted_7$a = {
   key: 1,
   class: "person-card-details"
 };
@@ -15576,7 +15578,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
               }, toDisplayString(phone.phone), 1);
             }), 128))
           ])) : createCommentVNode("", true),
-          ((_b = _ctx.person.email) == null ? void 0 : _b.length) ? (openBlock(), createElementBlock("div", _hoisted_7$9, [
+          ((_b = _ctx.person.email) == null ? void 0 : _b.length) ? (openBlock(), createElementBlock("div", _hoisted_7$a, [
             createVNode(unref(_sfc_main$R), { icon: "email" }),
             (openBlock(true), createElementBlock(Fragment$1, null, renderList(_ctx.person.email, (email) => {
               return openBlock(), createElementBlock("p", {
@@ -15602,10 +15604,14 @@ const _hoisted_2$D = {
   key: 0,
   class: "mb-3 mt-0"
 };
-const _hoisted_3$z = { class: "key" };
-const _hoisted_4$k = { key: 1 };
-const _hoisted_5$g = { class: "key" };
-const _hoisted_6$d = { class: "vlue" };
+const _hoisted_3$z = {
+  key: 0,
+  class: "data-row"
+};
+const _hoisted_4$k = { class: "key" };
+const _hoisted_5$g = { key: 1 };
+const _hoisted_6$d = { class: "key" };
+const _hoisted_7$9 = { class: "vlue" };
 const _sfc_main$A = /* @__PURE__ */ defineComponent({
   __name: "DataPreview",
   props: {
@@ -15616,34 +15622,55 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const i18nT = useI18nT();
     const keysToIgnore = ["id", "person_id", "person", "created_at", "updated_at"];
+    const props2 = __props;
+    const itemData = ref(props2.data);
+    const bindAttrs = (attrs, field, row) => {
+      const arr = Object.entries(attrs || {}).map(([key, value]) => [
+        key,
+        typeof value === "function" ? value(field, row) : value
+      ]);
+      const resolvedAttrs = Object.fromEntries(arr);
+      return resolvedAttrs;
+    };
     return (_ctx, _cache) => {
       var _a;
       return _ctx.data ? (openBlock(), createElementBlock("div", _hoisted_1$J, [
         _ctx.title ? (openBlock(), createElementBlock("h3", _hoisted_2$D, toDisplayString(_ctx.title), 1)) : createCommentVNode("", true),
         (openBlock(true), createElementBlock(Fragment$1, null, renderList(_ctx.schema || [], (field) => {
-          return openBlock(), createElementBlock("div", {
-            key: field.id,
-            class: "data-row"
+          return openBlock(), createElementBlock(Fragment$1, {
+            key: field.id
           }, [
-            createElementVNode("div", _hoisted_3$z, toDisplayString((field == null ? void 0 : field.label) || unref(keyToLabel)(field.id)), 1),
-            (openBlock(), createBlock(resolveDynamicComponent(field.$el || "div"), { class: "vlue" }, {
-              default: withCtx(() => [
-                createTextVNode(toDisplayString(_ctx.data[field.id] || field.defaultValue), 1)
-              ]),
-              _: 2
-            }, 1024))
-          ]);
+            (field["v-if"] ? field["v-if"](itemData.value[field.id], itemData.value) : true) ? (openBlock(), createElementBlock("div", _hoisted_3$z, [
+              createElementVNode("div", _hoisted_4$k, toDisplayString((field == null ? void 0 : field.label) || unref(keyToLabel)(field.id)), 1),
+              (openBlock(), createBlock(resolveDynamicComponent(field.$el || "div"), mergeProps({
+                class: "vlue",
+                modelValue: itemData.value[field.id],
+                "onUpdate:modelValue": [($event) => itemData.value[field.id] = $event, ($event) => {
+                  var _a2;
+                  return (_a2 = field == null ? void 0 : field.onUpdate) == null ? void 0 : _a2.call(field, $event, _ctx.data[field.id], itemData.value);
+                }]
+              }, bindAttrs(field.attrs, itemData.value[field.id], itemData.value)), {
+                default: withCtx(() => {
+                  var _a2;
+                  return [
+                    createTextVNode(toDisplayString(((_a2 = field == null ? void 0 : field.transform) == null ? void 0 : _a2.call(field, itemData.value[field.id] || field.defaultValue, itemData.value)) || itemData.value[field.id] || ""), 1)
+                  ];
+                }),
+                _: 2
+              }, 1040, ["modelValue", "onUpdate:modelValue"]))
+            ])) : createCommentVNode("", true)
+          ], 64);
         }), 128)),
-        !((_a = _ctx.schema) == null ? void 0 : _a.length) ? (openBlock(), createElementBlock("div", _hoisted_4$k, [
-          (openBlock(true), createElementBlock(Fragment$1, null, renderList(Object.entries(_ctx.data).filter(
+        !((_a = _ctx.schema) == null ? void 0 : _a.length) ? (openBlock(), createElementBlock("div", _hoisted_5$g, [
+          (openBlock(true), createElementBlock(Fragment$1, null, renderList(Object.entries(itemData.value).filter(
             ([key]) => !keysToIgnore.includes(key)
           ), ([key, value]) => {
             return openBlock(), createElementBlock("div", {
               class: "data-row",
               key
             }, [
-              createElementVNode("div", _hoisted_5$g, toDisplayString(unref(i18nT)(unref(keyToLabel)(key))), 1),
-              createElementVNode("div", _hoisted_6$d, toDisplayString(value), 1)
+              createElementVNode("div", _hoisted_6$d, toDisplayString(unref(i18nT)(unref(keyToLabel)(key))), 1),
+              createElementVNode("div", _hoisted_7$9, toDisplayString(value), 1)
             ]);
           }), 128))
         ])) : createCommentVNode("", true),
@@ -15652,7 +15679,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const DataPreview = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-86e783b9"]]);
+const DataPreview = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-dc2757c4"]]);
 const _withScopeId$2 = (n) => (pushScopeId("data-v-fe5af582"), n = n(), popScopeId(), n);
 const _hoisted_1$I = { class: "bar-chart" };
 const _hoisted_2$C = {
@@ -17043,13 +17070,17 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
       (v) => {
         if (v === void 0 || v === val.value)
           return;
+        console.log("v", v);
         val.value = v;
       },
       { immediate: true }
     );
     watch(
       () => val.value,
-      (v) => emits("update:modelValue", v)
+      (v) => {
+        if (v !== props2.modelValue)
+          emits("update:modelValue", v);
+      }
     );
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("label", _hoisted_1$H, [
@@ -17066,7 +17097,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Checkbox = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__scopeId", "data-v-fe72d553"]]);
+const Checkbox = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__scopeId", "data-v-6b168ea9"]]);
 const _hoisted_1$G = { class: "bagel-input" };
 const _hoisted_2$B = { class: "mt-1" };
 const _hoisted_3$x = {
@@ -18126,7 +18157,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
       }, [
         (openBlock(true), createElementBlock(Fragment$1, null, renderList(variables.value, (v) => {
           var _a;
-          return openBlock(), createBlock(unref(_sfc_main$6), {
+          return openBlock(), createBlock(unref(TextInput), {
             key: v,
             placeholder: `Variable ${v}`,
             modelValue: (_a = unref(val)) == null ? void 0 : _a[v - 1],
@@ -21979,7 +22010,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1$h = ["title"];
 const _hoisted_2$e = ["for"];
-const _hoisted_3$c = ["id", "placeholder", "required", "pattern"];
+const _hoisted_3$c = ["id", "type", "placeholder", "disabled", "required", "pattern"];
 const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "TextInput",
   props: {
@@ -21988,10 +22019,12 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     placeholder: {},
     modelValue: { default: "" },
     label: {},
-    editMode: { type: Boolean, default: true },
     small: { type: Boolean },
     required: { type: Boolean },
     pattern: {},
+    shrink: { type: Boolean },
+    toggleEdit: { type: Boolean, default: false },
+    type: { default: "text" },
     nativeInputAttrs: {}
   },
   emits: ["update:modelValue", "debounce"],
@@ -21999,9 +22032,28 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     const emit2 = __emit;
     const props2 = __props;
     let inputVal = ref();
+    let editMode = ref(!props2.toggleEdit);
+    const input2 = ref();
+    const toggleEditAction = () => {
+      if (editMode.value) {
+        editMode.value = false;
+        emit2("debounce", inputVal.value);
+        emit2("update:modelValue", inputVal.value);
+      } else {
+        editMode.value = true;
+        setTimeout(() => {
+          var _a;
+          return (_a = input2.value) == null ? void 0 : _a.focus();
+        }, 10);
+      }
+    };
     watch(
       () => inputVal.value,
       (newVal) => {
+        if (props2.toggleEdit)
+          return;
+        if (newVal === props2.modelValue)
+          return;
         emit2("update:modelValue", newVal);
         debounce(() => emit2("debounce", newVal));
       }
@@ -22016,7 +22068,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     );
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["bagel-input", { small: _ctx.small }]),
+        class: normalizeClass(["bagel-input", { small: _ctx.small, shrink: _ctx.shrink, toggleEdit: _ctx.toggleEdit, editMode: unref(editMode) }]),
         title: _ctx.title
       }, [
         createElementVNode("label", { for: _ctx.id }, [
@@ -22024,19 +22076,33 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
           withDirectives(createElementVNode("input", mergeProps({
             id: _ctx.id,
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(inputVal) ? inputVal.value = $event : inputVal = $event),
-            type: "text",
+            type: _ctx.type,
+            ref_key: "input",
+            ref: input2,
             placeholder: _ctx.placeholder || _ctx.label,
-            class: { "no-edit": !_ctx.editMode },
+            disabled: !unref(editMode),
             required: _ctx.required,
             pattern: _ctx.pattern
-          }, _ctx.nativeInputAttrs), null, 16, _hoisted_3$c), [
-            [vModelText, unref(inputVal)]
+          }, _ctx.nativeInputAttrs, {
+            onDblclick: toggleEditAction,
+            onKeydown: withKeys(toggleEditAction, ["enter"])
+          }), null, 16, _hoisted_3$c), [
+            [vModelDynamic, unref(inputVal)]
           ])
-        ], 8, _hoisted_2$e)
+        ], 8, _hoisted_2$e),
+        _ctx.toggleEdit ? (openBlock(), createBlock(unref(Btn), {
+          key: 0,
+          class: "toggleEditBtn",
+          thin: "",
+          onClick: toggleEditAction,
+          icon: unref(editMode) ? "check" : "edit",
+          flat: ""
+        }, null, 8, ["icon"])) : createCommentVNode("", true)
       ], 10, _hoisted_1$h);
     };
   }
 });
+const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-7b082166"]]);
 const _hoisted_1$g = ["title"];
 const _hoisted_2$d = { key: 0 };
 const _hoisted_3$b = {
@@ -28842,7 +28908,7 @@ export {
   TableField,
   TableSchema,
   TextArea,
-  _sfc_main$6 as TextInput,
+  TextInput,
   _sfc_main$q as TextVariableExamples,
   TextVariablesInput,
   ToggleSwitchInput,

package/dist/style.css

@@ -534,12 +534,12 @@
 .dropdown {
   position: relative;
   font-size: calc(var(--input-font-size) * 1.3);
-  width: 50px;
-  /* color: var(--bgl-primary); */
-  z-index: 1;
+  /* width: 50px; */
+  z-index: 9;
 }
 .dropdown-title {
   white-space: nowrap;
+  color: var(--bgl-primary);
   border-radius: var(--input-border-radius);
   box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
   padding-left: calc(var(--btn-padding) / 2);
@@ -574,7 +574,8 @@
   inset-inline-start: 0;
   inset-inline-end: 0;
   overflow: auto;
-  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.20);
+  z-index: 99999999;
 }
 .dropdown-body * {
   display: block;
@@ -582,12 +583,11 @@
   padding: calc(var(--btn-padding) / 2);
   padding-bottom: calc(var(--btn-padding) / 4);
   padding-top: calc(var(--btn-padding) / 4);
+  margin: 0;
   color: inherit;
   text-decoration: none;
   line-height: 1;
   transition: var(--bgl-transition);
-  box-shadow: 0 -1px 0 0 rgb(0 0 0, 10%);
-  z-index: 99999999;
 }
 .dropdown-body *:hover {
   filter: var(--bgl-hover-filter);
@@ -753,37 +753,37 @@
 	transform: translateY(-2.6rem);
 }
 
-.list-arrows[data-v-fb5b163a] {
+.list-arrows[data-v-8cd8ab82] {
   opacity: 0;
 }
-.list-arrows .icon-font[data-v-fb5b163a] {
+.list-arrows .icon-font[data-v-8cd8ab82] {
   transition: all ease-in-out 0.2s;
 }
-.list-arrows.sorted[data-v-fb5b163a] {
+.list-arrows.sorted[data-v-8cd8ab82] {
   opacity: 1;
 }
-.col img[data-v-fb5b163a] {
+.col img[data-v-8cd8ab82] {
   height: 35px;
   margin-top: -14px;
   margin-bottom: -14px;
   border-radius: 5px;
 }
-.list-arrows.sorted .desc[data-v-fb5b163a] {
+.list-arrows.sorted .desc[data-v-8cd8ab82] {
   transform: rotate(180deg);
 }
-table[data-v-fb5b163a] {
+table[data-v-8cd8ab82] {
   border-collapse: separate;
   border-spacing: 0 15px;
   border-collapse: collapse;
 }
-th[data-v-fb5b163a] {
+th[data-v-8cd8ab82] {
   font-weight: 400;
 }
-.row[data-v-fb5b163a] {
+.row[data-v-8cd8ab82] {
   border-bottom: 1px solid var(--border-color);
   cursor: pointer;
 }
-.row.first-row[data-v-fb5b163a] {
+.row.first-row[data-v-8cd8ab82] {
   font-size: 0.8rem;
   color: var(--bgl-black-tint);
   position: sticky;
@@ -793,7 +793,7 @@ th[data-v-fb5b163a] {
   height: 50px;
   vertical-align: bottom;
 }
-.row.first-row[data-v-fb5b163a]::after {
+.row.first-row[data-v-8cd8ab82]::after {
   content: "";
   border-bottom: 1px solid var(--border-color);
   position: absolute;
@@ -801,11 +801,11 @@ th[data-v-fb5b163a] {
   right: 0;
   bottom: -1px;
 }
-.first-row .col[data-v-fb5b163a] {
+.first-row .col[data-v-8cd8ab82] {
   cursor: pointer;
   background: var(--bgl-white);
 }
-.col[data-v-fb5b163a] {
+.col[data-v-8cd8ab82] {
   white-space: nowrap;
   padding: 14px;
   transition: var(--bgl-transition);
@@ -814,16 +814,16 @@ th[data-v-fb5b163a] {
   padding-right: 1rem;
   align-items: center;
 }
-.col > div[data-v-fb5b163a] {
+.col > div[data-v-8cd8ab82] {
   display: flex;
   gap: 0.5rem;
 }
-.max-col-width[data-v-fb5b163a] {
+.max-col-width[data-v-8cd8ab82] {
   max-width: 30vw;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.col.check .icon-font[data-v-fb5b163a] {
+.col.check .icon-font[data-v-8cd8ab82] {
   border-radius: 100%;
   background: var(--bgl-blue-20);
   color: var(--bgl-primary);
@@ -834,27 +834,27 @@ th[data-v-fb5b163a] {
   justify-content: center;
   margin-top: -2px;
 }
-.rows[data-v-fb5b163a] {
+.rows[data-v-8cd8ab82] {
   font-size: 0.8125em;
 }
-.table-list[data-v-fb5b163a] {
+.table-list[data-v-8cd8ab82] {
   height: 100%;
   position: relative;
   padding-left: 0 !important;
   padding-right: 0 !important;
   overflow: auto;
 }
-.BagelTable .table-list[data-v-fb5b163a] {
+.BagelTable .table-list[data-v-8cd8ab82] {
   overflow: unset;
 }
-.row-item[data-v-fb5b163a] {
+.row-item[data-v-8cd8ab82] {
   height: 50px;
   transition: all 200ms ease;
 }
-.row-item[data-v-fb5b163a]:hover {
+.row-item[data-v-8cd8ab82]:hover {
   background: var(--bgl-gray-light);
 }
-.infinite-wrapper[data-v-fb5b163a] {
+.infinite-wrapper[data-v-8cd8ab82] {
   overflow-y: auto;
   width: 100%;
 }
@@ -938,20 +938,19 @@ th[data-v-fb5b163a] {
 }
 }
 
-.data[data-v-86e783b9] {
+.data[data-v-dc2757c4] {
 	border: 1.1px solid var(--border-color);
 	padding: 20px;
 	border-radius: var(--input-border-radius);
 }
-.data-row[data-v-86e783b9] {
+.data-row[data-v-dc2757c4] {
 	display: flex;
 	justify-content: space-between;
 	padding-bottom: 0.5rem;
 	margin-bottom: 0.5rem;
-	opacity: 0.8;
 	border-bottom: 1px solid var(--border-color);
 }
-.data-link[data-v-86e783b9] {
+.data-link[data-v-dc2757c4] {
 	display: block;
 	font-size: var(--input-font-size);
 	margin-bottom: 2px;
@@ -1119,13 +1118,13 @@ th[data-v-fb5b163a] {
 }
 }
 
-.primary-checkbox input[data-v-fe72d553] {
+.primary-checkbox input[data-v-6b168ea9] {
   display: none;
 }
-.primary-checkbox[data-v-fe72d553] {
+.primary-checkbox[data-v-6b168ea9] {
   margin-top: 8px;
 }
-.primary-checkbox span[data-v-fe72d553] {
+.primary-checkbox span[data-v-6b168ea9] {
   display: flex;
   padding-top: 1px;
   align-items: center;
@@ -1140,13 +1139,13 @@ th[data-v-fb5b163a] {
   transition: var(--bgl-transition);
   user-select: none;
 }
-.primary-checkbox span[data-v-fe72d553]:hover {
+.primary-checkbox span[data-v-6b168ea9]:hover {
   filter: brightness(90%);
 }
-.primary-checkbox span[data-v-fe72d553]:active {
+.primary-checkbox span[data-v-6b168ea9]:active {
   filter: brightness(80%);
 }
-.primary-checkbox input:checked + span[data-v-fe72d553] {
+.primary-checkbox input:checked + span[data-v-6b168ea9] {
   background: var(--bgl-primary);
   border: none;
 }
@@ -2182,6 +2181,34 @@ input[type='email'][data-v-ed81a514] {
 	box-shadow: 0 0 10px 0 rgb(0 0 0 /20%);
 }
 
+.bagel-input.shrink, .bagel-input.shrink input{
+	min-width: unset !important;
+	/* width: auto; */
+}
+
+.bagel-input input[disabled][data-v-7b082166]{
+	background: none;
+}
+.bagel-input.toggleEdit[data-v-7b082166]:hover {
+	background-color: var(--input-bg);
+}
+.bagel-input.small[data-v-7b082166]{
+	margin-bottom:0;
+	height: 30px;
+}
+.toggleEditBtn[data-v-7b082166]{
+	position: absolute;
+	right: -24px;
+	top: 4;
+	opacity: 0;
+}
+.bagel-input:hover .toggleEditBtn[data-v-7b082166], .bagel-input.editMode .toggleEditBtn[data-v-7b082166]{
+	opacity: 1;
+}
+.bagel-input.small input[data-v-7b082166]{
+	height: 30px;
+}
+
 .bagel-input[data-v-a5b28c58] {
 	height: 100%;
 	margin: 0;

package/package.json

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