@bagelink/vue 0.0.627 → 0.0.629

package/dist/index.cjs

@@ -5578,8 +5578,8 @@ const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
   },
   setup(__props) {
     vue.useCssVars((_ctx) => ({
-      "39397c0e": computedBackgroundColor.value,
-      "427e8569": cumputedTextColor.value
+      "50d471e9": computedBackgroundColor.value,
+      "e0dc88f8": cumputedTextColor.value
     }));
     const props2 = __props;
     const isComponent = vue.computed(() => {
@@ -5668,7 +5668,7 @@ const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Btn = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["__scopeId", "data-v-59ea4a90"]]);
+const Btn = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["__scopeId", "data-v-26f1062f"]]);
 const _hoisted_1$H = {
   key: 0,
   class: "tool-bar"
@@ -28647,7 +28647,12 @@ const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
             (...args) => _ctx.onFocusout && _ctx.onFocusout(...args)),
             onInput: updateInputVal
           }), null, 16, _hoisted_3$d)), [
-            [vue.vModelDynamic, vue.unref(inputVal)]
+            [
+              vue.vModelDynamic,
+              vue.unref(inputVal),
+              void 0,
+              { trim: true }
+            ]
           ]) : vue.withDirectives((vue.openBlock(), vue.createElementBlock("textarea", vue.mergeProps({
             key: 1,
             id: _ctx.id,
@@ -28679,7 +28684,7 @@ const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__scopeId", "data-v-5e9a753f"]]);
+const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__scopeId", "data-v-82137f41"]]);
 const _hoisted_1$n = { class: "primary-checkbox" };
 const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
   __name: "Checkbox",

package/dist/index.mjs

@@ -5576,8 +5576,8 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     useCssVars((_ctx) => ({
-      "39397c0e": computedBackgroundColor.value,
-      "427e8569": cumputedTextColor.value
+      "50d471e9": computedBackgroundColor.value,
+      "e0dc88f8": cumputedTextColor.value
     }));
     const props2 = __props;
     const isComponent = computed(() => {
@@ -5666,7 +5666,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Btn = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["__scopeId", "data-v-59ea4a90"]]);
+const Btn = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["__scopeId", "data-v-26f1062f"]]);
 const _hoisted_1$H = {
   key: 0,
   class: "tool-bar"
@@ -28645,7 +28645,12 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
             (...args) => _ctx.onFocusout && _ctx.onFocusout(...args)),
             onInput: updateInputVal
           }), null, 16, _hoisted_3$d)), [
-            [vModelDynamic, unref(inputVal)]
+            [
+              vModelDynamic,
+              unref(inputVal),
+              void 0,
+              { trim: true }
+            ]
           ]) : withDirectives((openBlock(), createElementBlock("textarea", mergeProps({
             key: 1,
             id: _ctx.id,
@@ -28677,7 +28682,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__scopeId", "data-v-5e9a753f"]]);
+const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__scopeId", "data-v-82137f41"]]);
 const _hoisted_1$n = { class: "primary-checkbox" };
 const _sfc_main$i = /* @__PURE__ */ defineComponent({
   __name: "Checkbox",

package/dist/style.css

@@ -254,19 +254,19 @@
 }
 }
 
-a[data-v-59ea4a90] {
+a[data-v-26f1062f] {
   text-decoration: none;
 }
-.loading[data-v-59ea4a90] {
+.loading[data-v-26f1062f] {
   border: 1px solid var(--bgl-white);
   border-bottom: 2px solid var(--bgl-white);
-  animation: spin-59ea4a90 1s linear infinite;
+  animation: spin-26f1062f 1s linear infinite;
   border-radius: 100px;
   width: 1rem;
   height: 1rem;
   margin: auto;
 }
-@keyframes spin-59ea4a90 {
+@keyframes spin-26f1062f {
 0% {
     transform: rotate(0deg);
 }
@@ -274,7 +274,7 @@ a[data-v-59ea4a90] {
     transform: rotate(360deg);
 }
 }
-.bgl_btn-icon[data-v-59ea4a90] {
+.bgl_btn-icon[data-v-26f1062f] {
   height: var(--btn-height);
   width: var(--btn-height);
   border-radius: 100%;
@@ -284,101 +284,102 @@ a[data-v-59ea4a90] {
   flex-shrink: 0;
   transition: var(--bgl-transition);
 }
-.bgl_btn[data-v-59ea4a90] {
+.bgl_btn[data-v-26f1062f] {
   padding-left: var(--btn-padding);
   padding-right: var(--btn-padding);
   transition: var(--bgl-transition);
   text-decoration: none;
 }
-.bgl_btn[disabled="true"][data-v-59ea4a90] {
+.bgl_btn[disabled="true"][data-v-26f1062f] {
   opacity: 0.5;
   cursor: not-allowed;
 }
-.bgl_btn-flex[data-v-59ea4a90] {
+.bgl_btn-flex[data-v-26f1062f] {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   justify-content: center;
 }
-.bgl_btn .bgl_.bgl_icon-font[data-v-59ea4a90] {
+.bgl_btn .bgl_.bgl_icon-font[data-v-26f1062f] {
   font-size: calc(var(--input-font-size) * 1.3);
 }
-.bgl_btn[data-v-59ea4a90],
-.bgl_btn-icon[data-v-59ea4a90] {
-  background-color: var(--39397c0e);
-  color: var(--427e8569);
+.bgl_btn[data-v-26f1062f],
+.bgl_btn-icon[data-v-26f1062f] {
+  background-color: var(--50d471e9);
+  color: var(--e0dc88f8);
 }
-.bgl_btn[data-v-59ea4a90]:hover,
-.bgl_btn-icon[data-v-59ea4a90]:hover {
+.bgl_btn[data-v-26f1062f]:hover,
+.bgl_btn-icon[data-v-26f1062f]:hover {
   filter: var(--bgl-hover-filter);
 }
-.bgl_btn[data-v-59ea4a90]:active,
-.bgl_btn-icon[data-v-59ea4a90]:active {
+.bgl_btn[data-v-26f1062f]:active,
+.bgl_btn-icon[data-v-26f1062f]:active {
   filter: var(--bgl-active-filter);
 }
-.bgl_btn.bgl_flatBtn[data-v-59ea4a90] {
+.bgl_btn.bgl_flatBtn[data-v-26f1062f] {
   padding-left: var(--btn-padding);
   padding-right: var(--btn-padding);
   background: transparent;
 }
-.bgl_btn-icon.bgl_flatBtn[data-v-59ea4a90] {
+.bgl_btn-icon.bgl_flatBtn[data-v-26f1062f] {
   background: transparent;
 }
-.bgl_btn.bgl_flatBtn[data-v-59ea4a90]:hover,
-.bgl_btn-icon.bgl_flatBtn[data-v-59ea4a90]:hover {
-  filter: var(--bgl-active-filter);
+.bgl_btn.bgl_flatBtn[data-v-26f1062f]:hover,
+.bgl_btn-icon.bgl_flatBtn[data-v-26f1062f]:hover {
+  filter: var(--bgl-hover-filter);
+  background: var(--bgl-gray-20);
 }
-.bgl_btn.bgl_flatBtn[data-v-59ea4a90]:active,
-.bgl_btn-icon.bgl_flatBtn[data-v-59ea4a90]:active {
+.bgl_btn.bgl_flatBtn[data-v-26f1062f]:active,
+.bgl_btn-icon.bgl_flatBtn[data-v-26f1062f]:active {
   background: var(--bgl-gray-40);
-  filter: var(--bgl-hover-filter);
+  filter: var(--bgl-active-filter);
 }
-.bgl_btn.bgl_flatBtn.red[data-v-59ea4a90],
-.bgl_btn-icon.bgl_flatBtn.red[data-v-59ea4a90] {
+.bgl_btn.bgl_flatBtn.red[data-v-26f1062f],
+.bgl_btn-icon.bgl_flatBtn.red[data-v-26f1062f] {
   color: var(--bgl-red);
 }
-.bgl_btn.bgl_flatBtn.white[data-v-59ea4a90],
-.bgl_btn-icon.bgl_flatBtn.white[data-v-59ea4a90] {
+.bgl_btn.bgl_flatBtn.white[data-v-26f1062f],
+.bgl_btn-icon.bgl_flatBtn.white[data-v-26f1062f] {
   color: var(--bgl-white);
 }
-.bgl_btn.bgl_flatBtn.light[data-v-59ea4a90],
-.bgl_btn-icon.bgl_flatBtn.light[data-v-59ea4a90] {
+.bgl_btn.bgl_flatBtn.light[data-v-26f1062f],
+.bgl_btn-icon.bgl_flatBtn.light[data-v-26f1062f] {
   color: var(--bgl-primary-tint);
 }
-.bgl_btn.bgl_flatBtn.black[data-v-59ea4a90],
-.bgl_btn-icon.bgl_flatBtn.black[data-v-59ea4a90] {
+.bgl_btn.bgl_flatBtn.black[data-v-26f1062f],
+.bgl_btn-icon.bgl_flatBtn.black[data-v-26f1062f] {
   color: var(--bgl-black);
 }
-.bgl_btn.bgl_flatBtn.gray[data-v-59ea4a90],
-.bgl_btn-icon.bgl_flatBtn.gray[data-v-59ea4a90] {
+.bgl_btn.bgl_flatBtn.gray[data-v-26f1062f],
+.bgl_btn-icon.bgl_flatBtn.gray[data-v-26f1062f] {
   color: var(--bgl-gray);
 }
-.bgl_btn.thin[data-v-59ea4a90] {
+.bgl_btn.thin[data-v-26f1062f] {
   padding-inline: calc(var(--btn-padding) / 3);
   border-radius: calc(var(--btn-border-radius) / 1.5);
 }
-.bgl_btn.round[data-v-59ea4a90] {
+.bgl_btn.round[data-v-26f1062f] {
   border-radius: calc(var(--btn-border-radius) * 2);
 }
-.bgl_btn-icon.thin[data-v-59ea4a90] {
+.bgl_btn-icon.thin[data-v-26f1062f] {
   height: calc(var(--btn-height) / 1.5);
   width: calc(var(--btn-height) / 1.5);
   line-height: 1;
 }
-[dir="rtl"] .bgl_.bgl_icon-font[data-v-59ea4a90] {
+[dir="rtl"] .bgl_.bgl_icon-font[data-v-26f1062f] {
   transform: rotateY(180deg);
 }
-.bgl_btn-border[data-v-59ea4a90] {
-  outline: 1px solid var(--39397c0e);
-  color: var(--39397c0e);
+.bgl_btn-border[data-v-26f1062f] {
+  outline: 1px solid var(--50d471e9);
+  color: var(--50d471e9);
   background: transparent;
 }
-.bgl_btn-border[data-v-59ea4a90]:hover {
+.bgl_btn-border[data-v-26f1062f]:hover {
   color: var(--bgl-white);
-  background: var(--39397c0e);
+  background: var(--50d471e9);
   filter: brightness(100%);
 }
-.bgl_btn-border[data-v-59ea4a90]:active {
+.bgl_btn-border[data-v-26f1062f]:active {
   filter: brightness(80%);
 }
 .bg-dark {
@@ -2157,58 +2158,58 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	font-size: var(--label-font-size);
 }
 
-.bagel-input textarea[data-v-5e9a753f] {
+.bagel-input textarea[data-v-82137f41] {
 	min-height: unset;
 	font-size: var(--input-font-size);
 }
-.bagel-input.text-input textarea[data-v-5e9a753f] {
+.bagel-input.text-input textarea[data-v-82137f41] {
 	resize: none;
 }
-.code textarea[data-v-5e9a753f] {
+.code textarea[data-v-82137f41] {
 	font-family: 'Inconsolata', monospace;
 	background: var(--bgl-black) !important;
 	color: var(--bgl-white) !important;
 }
-.code textarea[data-v-5e9a753f]::placeholder {
+.code textarea[data-v-82137f41]::placeholder {
 	color: var(--bgl-white) !important;
 	opacity: 0.3;
 }
-.bagel-input.small[data-v-5e9a753f] {
+.bagel-input.small[data-v-82137f41] {
 	margin-bottom: 0;
 	height: 30px;
 }
-.bagel-input.dense label[data-v-5e9a753f] {
+.bagel-input.dense label[data-v-82137f41] {
 	display: flex;
 	align-items: center;
 	gap: 0.5rem;
 }
-.bagel-input input[data-v-5e9a753f]:disabled {
+.bagel-input input[data-v-82137f41]:disabled {
 	background: #f5f5f5;
 }
-.bagel-input label[data-v-5e9a753f] {
+.bagel-input label[data-v-82137f41] {
 	font-size: var(--label-font-size);
 }
-.textInputIconWrap[data-v-5e9a753f] {
+.textInputIconWrap[data-v-82137f41] {
 	position: relative;
 }
-.textInputIconWrap .bgl_icon-font[data-v-5e9a753f] {
+.textInputIconWrap .bgl_icon-font[data-v-82137f41] {
 	position: absolute;
 	inset-inline-end: 0.7rem;
 	bottom: 50%;
 	line-height: 0;
 	color: var(--bgl-gray);
 }
-.txtInputIconStart .iconStart[data-v-5e9a753f] {
+.txtInputIconStart .iconStart[data-v-82137f41] {
 	position: absolute;
 	inset-inline-start: 0.7rem;
 	top: 50%;
 	line-height: 0;
 	color: var(--bgl-gray);
 }
-.txtInputIconStart textarea[data-v-5e9a753f] {
+.txtInputIconStart textarea[data-v-82137f41] {
 	padding-inline-start: 2rem;
 }
-.bagel-input.small textarea[data-v-5e9a753f] {
+.bagel-input.small textarea[data-v-82137f41] {
 	height: 30px;
 }
 

package/package.json

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

package/src/components/Btn.vue

@@ -202,13 +202,14 @@ a {
 
 .bgl_btn.bgl_flatBtn:hover,
 .bgl_btn-icon.bgl_flatBtn:hover {
-  filter: var(--bgl-active-filter);
+  filter: var(--bgl-hover-filter);
+  background: var(--bgl-gray-20);
 }
 
 .bgl_btn.bgl_flatBtn:active,
 .bgl_btn-icon.bgl_flatBtn:active {
   background: var(--bgl-gray-40);
-  filter: var(--bgl-hover-filter);
+  filter: var(--bgl-active-filter);
 }
 
 .bgl_btn.bgl_flatBtn.red,

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

@@ -90,7 +90,7 @@ onMounted(() => {
 				v-if="!multiline && !autoheight && !code"
 				:id="id"
 				ref="input"
-				v-model="inputVal"
+				v-model.trim="inputVal"
 				:title="title"
 				:autocomplete="autocomplete"
 				:type="type"