@bagelink/vue 0.0.390 → 0.0.394

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/components/TableSchema.vue.d.ts.map +1 -1
  2. package/dist/components/form/inputs/RichText.vue.d.ts.map +1 -1
  3. package/dist/components/form/inputs/SelectInput.vue.d.ts.map +1 -1
  4. package/dist/index.cjs +28 -12
  5. package/dist/index.mjs +28 -12
  6. package/dist/style.css +91 -88
  7. package/package.json +1 -1
  8. package/src/components/TableSchema.vue +99 -71
  9. package/src/components/form/inputs/RichText.vue +5 -0
  10. package/src/components/form/inputs/SelectInput.vue +24 -8
  11. package/src/styles/modal.css +0 -1
package/dist/components/TableSchema.vue.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TableSchema.vue.d.ts","sourceRoot":"","sources":["../../src/components/TableSchema.vue"],"names":[],"mappings":"AA0BA;AAGA,OAAO,EACN,KAAK,cAAc,EAInB,MAAM,eAAe,CAAC;;;;;;;;;;;;;;;;;AAoTvB,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"}
1
+ {"version":3,"file":"TableSchema.vue.d.ts","sourceRoot":"","sources":["../../src/components/TableSchema.vue"],"names":[],"mappings":"AAiDA;AAGA,OAAO,EACN,KAAK,cAAc,EAInB,MAAM,eAAe,CAAC;;;;;;;;;;;;;;;;;AAsTvB,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/RichText.vue.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"RichText.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/RichText.vue"],"names":[],"mappings":"AAiBA;;gBAmTyD,MAAM;;;;gBAAN,MAAM;;;;AAL/D,wBAOG;AACH,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"}
1
+ {"version":3,"file":"RichText.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/RichText.vue"],"names":[],"mappings":"AAiBA;;gBAwTyD,MAAM;;;;gBAAN,MAAM;;;;AAL/D,wBAOG;AACH,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"}
package/dist/components/form/inputs/SelectInput.vue.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SelectInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/SelectInput.vue"],"names":[],"mappings":"AAuDA;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;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkb7C,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"}
1
+ {"version":3,"file":"SelectInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/SelectInput.vue"],"names":[],"mappings":"AAyDA;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;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmc7C,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 CHANGED
@@ -5684,8 +5684,10 @@ const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
5684
5684
  field
5685
5685
  }, void 0, true) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$2, [
5686
5686
  vue.createVNode(vue.unref(_sfc_main$l), {
5687
+ class: "embedded-field",
5687
5688
  field,
5688
- modelValue: row
5689
+ modelValue: row,
5690
+ label: ""
5689
5691
  }, null, 8, ["field", "modelValue"])
5690
5692
  ]))
5691
5693
  ]);
@@ -5698,7 +5700,7 @@ const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
5698
5700
  };
5699
5701
  }
5700
5702
  });
5701
- const TableSchema = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__scopeId", "data-v-f3641508"]]);
5703
+ const TableSchema = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__scopeId", "data-v-10808aad"]]);
5702
5704
  const _sfc_main$x = {};
5703
5705
  const _hoisted_1$w = { class: "flex space-between" };
5704
5706
  function _sfc_render$1(_ctx, _cache) {
@@ -15195,6 +15197,10 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
15195
15197
  let search = vue.ref("");
15196
15198
  const dropdown = vue.ref(null);
15197
15199
  let open = vue.ref(false);
15200
+ function openOptions() {
15201
+ var _a2;
15202
+ (_a2 = dropdown.value) == null ? void 0 : _a2.show();
15203
+ }
15198
15204
  function updateOpen(visible) {
15199
15205
  open.value = visible;
15200
15206
  if (!open.value)
@@ -15236,8 +15242,8 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
15236
15242
  const isSelected = (option2) => !!selectedItems.value.find((item) => getValue(option2) === getValue(item));
15237
15243
  const filteredOptions = vue.computed(
15238
15244
  () => props2.options.filter((option2) => {
15239
- const searchTerm = new RegExp(search.value, "gi");
15240
- return Boolean(option2) && (getLabel(option2).match(searchTerm) || getValue(option2).match(searchTerm));
15245
+ const searchTerm = search.value.split(/\s+/).filter(Boolean).map((t) => new RegExp(t, "gi"));
15246
+ return Boolean(option2) && (searchTerm.every((s2) => getLabel(option2).match(s2)) || searchTerm.length === 0);
15241
15247
  })
15242
15248
  );
15243
15249
  const select2 = (option2) => {
@@ -15277,12 +15283,15 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
15277
15283
  if (!newVal)
15278
15284
  return;
15279
15285
  if (!props2.multiselect) {
15280
- if (!isSelected(newVal))
15281
- selectedItems.value.splice(0, selectedItems.value.length, newVal);
15286
+ const newOption = props2.options.find((o2) => getValue(o2) === newVal) || newVal;
15287
+ if (!isSelected(newOption)) {
15288
+ selectedItems.value.splice(0, selectedItems.value.length, newOption);
15289
+ }
15282
15290
  } else {
15283
15291
  const isSame = compareArrays([newVal].flat(), selectedItems.value);
15284
- if (!isSame)
15292
+ if (!isSame) {
15285
15293
  selectedItems.value.splice(0, selectedItems.value.length, [newVal].flat());
15294
+ }
15286
15295
  }
15287
15296
  },
15288
15297
  { immediate: true }
@@ -15290,7 +15299,7 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
15290
15299
  vue.watch(
15291
15300
  () => props2.options,
15292
15301
  () => {
15293
- const original = JSON.stringify(selectedItems.value);
15302
+ const original = JSON.stringify(props2.options.map(getValue));
15294
15303
  [...selectedItems.value].forEach((option2, i2) => {
15295
15304
  const exists = props2.options.find(
15296
15305
  (o2) => getValue(o2) === getValue(option2)
@@ -15300,10 +15309,11 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
15300
15309
  else
15301
15310
  selectedItems.value.splice(i2, 1, exists);
15302
15311
  });
15303
- const newSelection = JSON.stringify(selectedItems.value);
15312
+ const newSelection = JSON.stringify(selectedItems.value.map(getValue));
15304
15313
  if (original !== newSelection)
15305
15314
  emitUpdate();
15306
- }
15315
+ },
15316
+ { deep: true }
15307
15317
  );
15308
15318
  return (_ctx, _cache) => {
15309
15319
  return vue.openBlock(), vue.createBlock(vue.unref(kt$1), {
@@ -15356,6 +15366,7 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
15356
15366
  vue.createElementVNode("label", null, [
15357
15367
  vue.createTextVNode(vue.toDisplayString(_ctx.label) + " ", 1),
15358
15368
  vue.createElementVNode("button", {
15369
+ onKeydown: openOptions,
15359
15370
  onClick: _cache[0] || (_cache[0] = ($event) => updateOpen(true)),
15360
15371
  disabled: _ctx.disabled,
15361
15372
  type: "button",
@@ -15363,9 +15374,10 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
15363
15374
  }, [
15364
15375
  vue.createElementVNode("p", null, vue.toDisplayString(selectedLabel.value), 1),
15365
15376
  vue.createVNode(vue.unref(_sfc_main$H), vue.normalizeProps(vue.guardReactiveProps({ icon: vue.unref(open) ? "unfold_less" : "unfold_more" })), null, 16)
15366
- ], 10, _hoisted_1$m),
15377
+ ], 42, _hoisted_1$m),
15367
15378
  _ctx.required ? (vue.openBlock(), vue.createElementBlock("input", {
15368
15379
  key: 0,
15380
+ tabindex: "-1",
15369
15381
  style: { "width": "0", "height": "0", "position": "absolute", "opacity": "0", "z-index": "-1" },
15370
15382
  onInput: _cache[1] || (_cache[1] = ($event) => updateOpen(true)),
15371
15383
  value: selectedItems.value,
@@ -15378,7 +15390,7 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
15378
15390
  };
15379
15391
  }
15380
15392
  });
15381
- const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-ab376074"]]);
15393
+ const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-3e27cf1d"]]);
15382
15394
  /*!
15383
15395
  * vue-draggable-next v2.2.0
15384
15396
  * (c) 2023 Anish George
@@ -39452,6 +39464,10 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
39452
39464
  return editor.value.chain().focus();
39453
39465
  };
39454
39466
  const { showModalForm } = useModal();
39467
+ Image.configure({
39468
+ inline: true,
39469
+ allowBase64: true
39470
+ });
39455
39471
  function addImage() {
39456
39472
  showModalForm({
39457
39473
  title: "Add Image",
package/dist/index.mjs CHANGED
@@ -5682,8 +5682,10 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
5682
5682
  field
5683
5683
  }, void 0, true) : (openBlock(), createElementBlock("div", _hoisted_7$2, [
5684
5684
  createVNode(unref(_sfc_main$l), {
5685
+ class: "embedded-field",
5685
5686
  field,
5686
- modelValue: row
5687
+ modelValue: row,
5688
+ label: ""
5687
5689
  }, null, 8, ["field", "modelValue"])
5688
5690
  ]))
5689
5691
  ]);
@@ -5696,7 +5698,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
5696
5698
  };
5697
5699
  }
5698
5700
  });
5699
- const TableSchema = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__scopeId", "data-v-f3641508"]]);
5701
+ const TableSchema = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__scopeId", "data-v-10808aad"]]);
5700
5702
  const _sfc_main$x = {};
5701
5703
  const _hoisted_1$w = { class: "flex space-between" };
5702
5704
  function _sfc_render$1(_ctx, _cache) {
@@ -15193,6 +15195,10 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
15193
15195
  let search = ref("");
15194
15196
  const dropdown = ref(null);
15195
15197
  let open = ref(false);
15198
+ function openOptions() {
15199
+ var _a2;
15200
+ (_a2 = dropdown.value) == null ? void 0 : _a2.show();
15201
+ }
15196
15202
  function updateOpen(visible) {
15197
15203
  open.value = visible;
15198
15204
  if (!open.value)
@@ -15234,8 +15240,8 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
15234
15240
  const isSelected = (option2) => !!selectedItems.value.find((item) => getValue(option2) === getValue(item));
15235
15241
  const filteredOptions = computed(
15236
15242
  () => props2.options.filter((option2) => {
15237
- const searchTerm = new RegExp(search.value, "gi");
15238
- return Boolean(option2) && (getLabel(option2).match(searchTerm) || getValue(option2).match(searchTerm));
15243
+ const searchTerm = search.value.split(/\s+/).filter(Boolean).map((t) => new RegExp(t, "gi"));
15244
+ return Boolean(option2) && (searchTerm.every((s2) => getLabel(option2).match(s2)) || searchTerm.length === 0);
15239
15245
  })
15240
15246
  );
15241
15247
  const select2 = (option2) => {
@@ -15275,12 +15281,15 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
15275
15281
  if (!newVal)
15276
15282
  return;
15277
15283
  if (!props2.multiselect) {
15278
- if (!isSelected(newVal))
15279
- selectedItems.value.splice(0, selectedItems.value.length, newVal);
15284
+ const newOption = props2.options.find((o2) => getValue(o2) === newVal) || newVal;
15285
+ if (!isSelected(newOption)) {
15286
+ selectedItems.value.splice(0, selectedItems.value.length, newOption);
15287
+ }
15280
15288
  } else {
15281
15289
  const isSame = compareArrays([newVal].flat(), selectedItems.value);
15282
- if (!isSame)
15290
+ if (!isSame) {
15283
15291
  selectedItems.value.splice(0, selectedItems.value.length, [newVal].flat());
15292
+ }
15284
15293
  }
15285
15294
  },
15286
15295
  { immediate: true }
@@ -15288,7 +15297,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
15288
15297
  watch(
15289
15298
  () => props2.options,
15290
15299
  () => {
15291
- const original = JSON.stringify(selectedItems.value);
15300
+ const original = JSON.stringify(props2.options.map(getValue));
15292
15301
  [...selectedItems.value].forEach((option2, i2) => {
15293
15302
  const exists = props2.options.find(
15294
15303
  (o2) => getValue(o2) === getValue(option2)
@@ -15298,10 +15307,11 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
15298
15307
  else
15299
15308
  selectedItems.value.splice(i2, 1, exists);
15300
15309
  });
15301
- const newSelection = JSON.stringify(selectedItems.value);
15310
+ const newSelection = JSON.stringify(selectedItems.value.map(getValue));
15302
15311
  if (original !== newSelection)
15303
15312
  emitUpdate();
15304
- }
15313
+ },
15314
+ { deep: true }
15305
15315
  );
15306
15316
  return (_ctx, _cache) => {
15307
15317
  return openBlock(), createBlock(unref(kt$1), {
@@ -15354,6 +15364,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
15354
15364
  createElementVNode("label", null, [
15355
15365
  createTextVNode(toDisplayString(_ctx.label) + " ", 1),
15356
15366
  createElementVNode("button", {
15367
+ onKeydown: openOptions,
15357
15368
  onClick: _cache[0] || (_cache[0] = ($event) => updateOpen(true)),
15358
15369
  disabled: _ctx.disabled,
15359
15370
  type: "button",
@@ -15361,9 +15372,10 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
15361
15372
  }, [
15362
15373
  createElementVNode("p", null, toDisplayString(selectedLabel.value), 1),
15363
15374
  createVNode(unref(_sfc_main$H), normalizeProps(guardReactiveProps({ icon: unref(open) ? "unfold_less" : "unfold_more" })), null, 16)
15364
- ], 10, _hoisted_1$m),
15375
+ ], 42, _hoisted_1$m),
15365
15376
  _ctx.required ? (openBlock(), createElementBlock("input", {
15366
15377
  key: 0,
15378
+ tabindex: "-1",
15367
15379
  style: { "width": "0", "height": "0", "position": "absolute", "opacity": "0", "z-index": "-1" },
15368
15380
  onInput: _cache[1] || (_cache[1] = ($event) => updateOpen(true)),
15369
15381
  value: selectedItems.value,
@@ -15376,7 +15388,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
15376
15388
  };
15377
15389
  }
15378
15390
  });
15379
- const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-ab376074"]]);
15391
+ const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-3e27cf1d"]]);
15380
15392
  /*!
15381
15393
  * vue-draggable-next v2.2.0
15382
15394
  * (c) 2023 Anish George
@@ -39450,6 +39462,10 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
39450
39462
  return editor.value.chain().focus();
39451
39463
  };
39452
39464
  const { showModalForm } = useModal();
39465
+ Image.configure({
39466
+ inline: true,
39467
+ allowBase64: true
39468
+ });
39453
39469
  function addImage() {
39454
39470
  showModalForm({
39455
39471
  title: "Add Image",
package/dist/style.css CHANGED
@@ -390,7 +390,6 @@ a[data-v-d09a83c5] {
390
390
  overflow: auto;
391
391
  margin: 0 auto;
392
392
  width: 100%;
393
- text-align: center;
394
393
  display: grid;
395
394
  align-items: center;
396
395
  }
@@ -624,108 +623,112 @@ a[data-v-d09a83c5] {
624
623
  gap: 1rem;
625
624
  }
626
625
 
627
- .list-arrows[data-v-f3641508] {
628
- opacity: 0;
626
+ .list-arrows[data-v-10808aad] {
627
+ opacity: 0;
629
628
  }
630
- .list-arrows .bgl_icon-font[data-v-f3641508] {
631
- transition: all ease-in-out 0.2s;
629
+ .list-arrows .bgl_icon-font[data-v-10808aad] {
630
+ transition: all ease-in-out 0.2s;
632
631
  }
633
- .list-arrows.sorted[data-v-f3641508] {
634
- opacity: 1;
632
+ .list-arrows.sorted[data-v-10808aad] {
633
+ opacity: 1;
635
634
  }
636
- .col img[data-v-f3641508] {
637
- height: 35px;
638
- margin-top: -14px;
639
- margin-bottom: -14px;
640
- border-radius: 5px;
635
+ .col img[data-v-10808aad] {
636
+ height: 35px;
637
+ margin-top: -14px;
638
+ margin-bottom: -14px;
639
+ border-radius: 5px;
641
640
  }
642
- .list-arrows.sorted .desc[data-v-f3641508] {
643
- transform: rotate(180deg);
641
+ .list-arrows.sorted .desc[data-v-10808aad] {
642
+ transform: rotate(180deg);
644
643
  }
645
- table[data-v-f3641508] {
646
- border-collapse: separate;
647
- border-spacing: 0 15px;
648
- border-collapse: collapse;
644
+ table[data-v-10808aad] {
645
+ border-collapse: separate;
646
+ border-spacing: 0 15px;
647
+ border-collapse: collapse;
649
648
  }
650
- th[data-v-f3641508] {
651
- font-weight: 400;
649
+ th[data-v-10808aad] {
650
+ font-weight: 400;
652
651
  }
653
- .row[data-v-f3641508] {
654
- border-bottom: 1px solid var(--border-color);
655
- cursor: pointer;
652
+ .embedded-field[data-v-10808aad] {
653
+ margin-bottom: -0.2rem;
654
+ margin-top: -0.2rem;
656
655
  }
657
- .row.first-row[data-v-f3641508] {
658
- font-size: 0.8rem;
659
- color: var(--bgl-black-tint);
660
- position: sticky;
661
- top: 0;
662
- z-index: 2;
663
- background: var(--bgl-white);
664
- height: 50px;
665
- vertical-align: bottom;
656
+ .row[data-v-10808aad] {
657
+ border-bottom: 1px solid var(--border-color);
658
+ cursor: pointer;
666
659
  }
667
- .row.first-row[data-v-f3641508]::after {
668
- content: "";
669
- border-bottom: 1px solid var(--border-color);
670
- position: absolute;
671
- left: 0;
672
- right: 0;
673
- bottom: -1px;
660
+ .row.first-row[data-v-10808aad] {
661
+ font-size: 0.8rem;
662
+ color: var(--bgl-black-tint);
663
+ position: sticky;
664
+ top: 0;
665
+ z-index: 2;
666
+ background: var(--bgl-white);
667
+ height: 50px;
668
+ vertical-align: bottom;
674
669
  }
675
- .first-row .col[data-v-f3641508] {
676
- cursor: pointer;
677
- background: var(--bgl-white);
670
+ .row.first-row[data-v-10808aad]::after {
671
+ content: '';
672
+ border-bottom: 1px solid var(--border-color);
673
+ position: absolute;
674
+ left: 0;
675
+ right: 0;
676
+ bottom: -1px;
678
677
  }
679
- .col[data-v-f3641508] {
680
- white-space: nowrap;
681
- padding: 0.75rem 0.5rem;
682
- transition: var(--bgl-transition);
683
- line-height: 1;
684
- align-items: center;
678
+ .first-row .col[data-v-10808aad] {
679
+ cursor: pointer;
680
+ background: var(--bgl-white);
685
681
  }
686
- .col>div[data-v-f3641508] {
687
- display: flex;
688
- gap: 0.5rem;
682
+ .col[data-v-10808aad] {
683
+ white-space: nowrap;
684
+ padding: 0.75rem 0.5rem;
685
+ transition: var(--bgl-transition);
686
+ line-height: 1;
687
+ align-items: center;
689
688
  }
690
- .max-col-width[data-v-f3641508] {
691
- max-width: 30vw;
692
- overflow: hidden;
693
- text-overflow: ellipsis;
689
+ .col > div[data-v-10808aad] {
690
+ display: flex;
691
+ gap: 0.5rem;
694
692
  }
695
- .col.check .bgl_icon-font[data-v-f3641508] {
696
- border-radius: 100%;
697
- background: var(--bgl-blue-20);
698
- color: var(--bgl-primary);
699
- width: 20px;
700
- height: 20px;
701
- display: flex;
702
- align-items: center;
703
- justify-content: center;
704
- margin-top: -2px;
693
+ .max-col-width[data-v-10808aad] {
694
+ max-width: 30vw;
695
+ overflow: hidden;
696
+ text-overflow: ellipsis;
705
697
  }
706
- .rows[data-v-f3641508] {
707
- font-size: 0.8125em;
698
+ .col.check .bgl_icon-font[data-v-10808aad] {
699
+ border-radius: 100%;
700
+ background: var(--bgl-blue-20);
701
+ color: var(--bgl-primary);
702
+ width: 20px;
703
+ height: 20px;
704
+ display: flex;
705
+ align-items: center;
706
+ justify-content: center;
707
+ margin-top: -2px;
708
708
  }
709
- .table-list[data-v-f3641508] {
710
- height: 100%;
711
- position: relative;
712
- padding-left: 0 !important;
713
- padding-right: 0 !important;
714
- overflow: auto;
709
+ .rows[data-v-10808aad] {
710
+ font-size: 0.8125em;
715
711
  }
716
- .BagelTable .table-list[data-v-f3641508] {
717
- overflow: unset;
712
+ .table-list[data-v-10808aad] {
713
+ height: 100%;
714
+ position: relative;
715
+ padding-left: 0 !important;
716
+ padding-right: 0 !important;
717
+ overflow: auto;
718
718
  }
719
- .row-item[data-v-f3641508] {
720
- height: 50px;
721
- transition: all 200ms ease;
719
+ .BagelTable .table-list[data-v-10808aad] {
720
+ overflow: unset;
722
721
  }
723
- .row-item[data-v-f3641508]:hover {
724
- background: var(--bgl-gray-light);
722
+ .row-item[data-v-10808aad] {
723
+ height: 50px;
724
+ transition: all 200ms ease;
725
725
  }
726
- .infinite-wrapper[data-v-f3641508] {
727
- overflow-y: auto;
728
- width: 100%;
726
+ .row-item[data-v-10808aad]:hover {
727
+ background: var(--bgl-gray-light);
728
+ }
729
+ .infinite-wrapper[data-v-10808aad] {
730
+ overflow-y: auto;
731
+ width: 100%;
729
732
  }
730
733
 
731
734
  .data[data-v-bb2526f9] {
@@ -1053,10 +1056,10 @@ display: block;
1053
1056
  }
1054
1057
  .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}
1055
1058
 
1056
- .selectinput[data-v-ab376074] {
1059
+ .selectinput[data-v-3e27cf1d] {
1057
1060
  width: 100%;
1058
1061
  }
1059
- .selectinput-option[data-v-ab376074] {
1062
+ .selectinput-option[data-v-3e27cf1d] {
1060
1063
  padding: 6px 12px;
1061
1064
  cursor: pointer;
1062
1065
  border-radius: 5px;
@@ -1067,14 +1070,14 @@ display: block;
1067
1070
  width: 100%;
1068
1071
  font-size: var(--input-font-size);
1069
1072
  }
1070
- .selectinput-options[data-v-ab376074] {
1073
+ .selectinput-options[data-v-3e27cf1d] {
1071
1074
  max-height: 300px;
1072
1075
  overflow-y: auto;
1073
1076
  }
1074
- .selectinput-option[data-v-ab376074]:hover {
1077
+ .selectinput-option[data-v-3e27cf1d]:hover {
1075
1078
  background: var(--bgl-gray-20);
1076
1079
  }
1077
- .isEmpty p[data-v-ab376074] {
1080
+ .isEmpty p[data-v-3e27cf1d] {
1078
1081
  opacity: 0.3;
1079
1082
  }
1080
1083
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@bagelink/vue",
3
3
  "type": "module",
4
- "version": "0.0.390",
4
+ "version": "0.0.394",
5
5
  "description": "Bagel core sdk packages",
6
6
  "author": {
7
7
  "name": "Neveh Allon",
package/src/components/TableSchema.vue CHANGED
@@ -2,21 +2,44 @@
2
2
  <div class="table-list-wrap h-100">
3
3
  <table class="infinite-wrapper">
4
4
  <thead class="row first-row">
5
- <th class="col" v-for="field in computedSchema" :key="field.id" @click="sort(field?.id || '')">
5
+ <th
6
+ class="col"
7
+ v-for="field in computedSchema"
8
+ :key="field.id"
9
+ @click="sort(field?.id || '')">
6
10
  <div class="flex">
7
11
  {{ field.label || keyToLabel(field.id) }}
8
- <div class="list-arrows" :class="{ sorted: sortField === field.id }">
9
- <MaterialIcon :class="{ desc: sortDirection === 'DESC' }" icon="keyboard_arrow_up" />
12
+ <div
13
+ class="list-arrows"
14
+ :class="{ sorted: sortField === field.id }">
15
+ <MaterialIcon
16
+ :class="{ desc: sortDirection === 'DESC' }"
17
+ icon="keyboard_arrow_up" />
10
18
  </div>
11
19
  </div>
12
20
  </th>
13
21
  </thead>
14
22
  <tbody ref="infinite" class="rows infinite" :class="{ loading }">
15
- <tr v-for="row in data" :key="row.id" @click="selectElement(row)" class="row row-item position-relative">
16
- <td class="col" v-for="field in computedSchema" :key="`${field.id}-${row.id}`">
17
- <slot v-if="field.id && slots[field.id]" :name="field.id" :row="row" :field="field" />
23
+ <tr
24
+ v-for="row in data"
25
+ :key="row.id"
26
+ @click="selectElement(row)"
27
+ class="row row-item position-relative">
28
+ <td
29
+ class="col"
30
+ v-for="field in computedSchema"
31
+ :key="`${field.id}-${row.id}`">
32
+ <slot
33
+ v-if="field.id && slots[field.id]"
34
+ :name="field.id"
35
+ :row="row"
36
+ :field="field" />
18
37
  <div v-else>
19
- <BglField :field="field" :modelValue="row" />
38
+ <BglField
39
+ class="embedded-field"
40
+ :field="field"
41
+ :modelValue="row"
42
+ label="" />
20
43
  </div>
21
44
  </td>
22
45
  </tr>
@@ -38,8 +61,8 @@ const slots = useSlots();
38
61
  const loading = $ref(true);
39
62
 
40
63
  const props = defineProps<{
41
- data: any[];
42
- schema: BglFormSchemaT | (() => BglFormSchemaT);
64
+ data: any[];
65
+ schema: BglFormSchemaT | (() => BglFormSchemaT);
43
66
  }>();
44
67
 
45
68
  const computedSchema = $computed(() => {
@@ -70,126 +93,131 @@ const sort = (fieldname: string) => {
70
93
 
71
94
  <style scoped>
72
95
  .list-arrows {
73
- opacity: 0;
96
+ opacity: 0;
74
97
  }
75
98
 
76
99
  .list-arrows .bgl_icon-font {
77
- transition: all ease-in-out 0.2s;
100
+ transition: all ease-in-out 0.2s;
78
101
  }
79
102
 
80
103
  .list-arrows.sorted {
81
- opacity: 1;
104
+ opacity: 1;
82
105
  }
83
106
 
84
107
  .col img {
85
- height: 35px;
86
- margin-top: -14px;
87
- margin-bottom: -14px;
88
- border-radius: 5px;
108
+ height: 35px;
109
+ margin-top: -14px;
110
+ margin-bottom: -14px;
111
+ border-radius: 5px;
89
112
  }
90
113
 
91
114
  .list-arrows.sorted .desc {
92
- transform: rotate(180deg);
115
+ transform: rotate(180deg);
93
116
  }
94
117
 
95
118
  table {
96
- border-collapse: separate;
97
- border-spacing: 0 15px;
98
- border-collapse: collapse;
119
+ border-collapse: separate;
120
+ border-spacing: 0 15px;
121
+ border-collapse: collapse;
99
122
  }
100
123
 
101
124
  th {
102
- font-weight: 400;
125
+ font-weight: 400;
126
+ }
127
+
128
+ .embedded-field {
129
+ margin-bottom: -0.2rem;
130
+ margin-top: -0.2rem;
103
131
  }
104
132
 
105
133
  .row {
106
- border-bottom: 1px solid var(--border-color);
107
- cursor: pointer;
134
+ border-bottom: 1px solid var(--border-color);
135
+ cursor: pointer;
108
136
  }
109
137
 
110
138
  .row.first-row {
111
- font-size: 0.8rem;
112
- color: var(--bgl-black-tint);
113
- position: sticky;
114
- top: 0;
115
- z-index: 2;
116
- background: var(--bgl-white);
117
- height: 50px;
118
- vertical-align: bottom;
139
+ font-size: 0.8rem;
140
+ color: var(--bgl-black-tint);
141
+ position: sticky;
142
+ top: 0;
143
+ z-index: 2;
144
+ background: var(--bgl-white);
145
+ height: 50px;
146
+ vertical-align: bottom;
119
147
  }
120
148
 
121
149
  .row.first-row::after {
122
- content: "";
123
- border-bottom: 1px solid var(--border-color);
124
- position: absolute;
125
- left: 0;
126
- right: 0;
127
- bottom: -1px;
150
+ content: '';
151
+ border-bottom: 1px solid var(--border-color);
152
+ position: absolute;
153
+ left: 0;
154
+ right: 0;
155
+ bottom: -1px;
128
156
  }
129
157
 
130
158
  .first-row .col {
131
- cursor: pointer;
132
- background: var(--bgl-white);
159
+ cursor: pointer;
160
+ background: var(--bgl-white);
133
161
  }
134
162
 
135
163
  .col {
136
- white-space: nowrap;
137
- padding: 0.75rem 0.5rem;
138
- transition: var(--bgl-transition);
139
- line-height: 1;
140
- align-items: center;
164
+ white-space: nowrap;
165
+ padding: 0.75rem 0.5rem;
166
+ transition: var(--bgl-transition);
167
+ line-height: 1;
168
+ align-items: center;
141
169
  }
142
170
 
143
- .col>div {
144
- display: flex;
145
- gap: 0.5rem;
171
+ .col > div {
172
+ display: flex;
173
+ gap: 0.5rem;
146
174
  }
147
175
 
148
176
  .max-col-width {
149
- max-width: 30vw;
150
- overflow: hidden;
151
- text-overflow: ellipsis;
177
+ max-width: 30vw;
178
+ overflow: hidden;
179
+ text-overflow: ellipsis;
152
180
  }
153
181
 
154
182
  .col.check .bgl_icon-font {
155
- border-radius: 100%;
156
- background: var(--bgl-blue-20);
157
- color: var(--bgl-primary);
158
- width: 20px;
159
- height: 20px;
160
- display: flex;
161
- align-items: center;
162
- justify-content: center;
163
- margin-top: -2px;
183
+ border-radius: 100%;
184
+ background: var(--bgl-blue-20);
185
+ color: var(--bgl-primary);
186
+ width: 20px;
187
+ height: 20px;
188
+ display: flex;
189
+ align-items: center;
190
+ justify-content: center;
191
+ margin-top: -2px;
164
192
  }
165
193
 
166
194
  .rows {
167
- font-size: 0.8125em;
195
+ font-size: 0.8125em;
168
196
  }
169
197
 
170
198
  .table-list {
171
- height: 100%;
172
- position: relative;
173
- padding-left: 0 !important;
174
- padding-right: 0 !important;
175
- overflow: auto;
199
+ height: 100%;
200
+ position: relative;
201
+ padding-left: 0 !important;
202
+ padding-right: 0 !important;
203
+ overflow: auto;
176
204
  }
177
205
 
178
206
  .BagelTable .table-list {
179
- overflow: unset;
207
+ overflow: unset;
180
208
  }
181
209
 
182
210
  .row-item {
183
- height: 50px;
184
- transition: all 200ms ease;
211
+ height: 50px;
212
+ transition: all 200ms ease;
185
213
  }
186
214
 
187
215
  .row-item:hover {
188
- background: var(--bgl-gray-light);
216
+ background: var(--bgl-gray-light);
189
217
  }
190
218
 
191
219
  .infinite-wrapper {
192
- overflow-y: auto;
193
- width: 100%;
220
+ overflow-y: auto;
221
+ width: 100%;
194
222
  }
195
223
  </style>
package/src/components/form/inputs/RichText.vue CHANGED
@@ -42,6 +42,11 @@ const focus = () => {
42
42
  };
43
43
  const { showModalForm } = useModal();
44
44
 
45
+ Image.configure({
46
+ inline: true,
47
+ allowBase64: true,
48
+ });
49
+
45
50
  function addImage() {
46
51
  showModalForm({
47
52
  title: 'Add Image',
package/src/components/form/inputs/SelectInput.vue CHANGED
@@ -7,6 +7,7 @@
7
7
  <label>
8
8
  {{ label }}
9
9
  <button
10
+ @keydown="openOptions"
10
11
  @click="updateOpen(true)"
11
12
  :disabled="disabled"
12
13
  type="button"
@@ -16,6 +17,7 @@
16
17
  <Icon v-bind="{ icon: open ? 'unfold_less' : 'unfold_more' }" />
17
18
  </button>
18
19
  <input
20
+ tabindex="-1"
19
21
  style="width: 0; height: 0; position: absolute; opacity: 0; z-index: -1"
20
22
  v-if="required"
21
23
  @input="updateOpen(true)"
@@ -87,6 +89,11 @@ const dropdown = $ref<InstanceType<typeof Dropdown> | null>(null);
87
89
 
88
90
  let open = $ref(false);
89
91
 
92
+ function openOptions() {
93
+ dropdown?.show();
94
+ // updateOpen(true);
95
+ }
96
+
90
97
  function updateOpen(visible: boolean) {
91
98
  open = visible;
92
99
  if (!open) search = '';
@@ -129,10 +136,14 @@ const isSelected = (option: Option) =>
129
136
 
130
137
  const filteredOptions = $computed(() =>
131
138
  props.options.filter((option) => {
132
- const searchTerm = new RegExp(search, 'gi');
139
+ const searchTerm = search
140
+ .split(/\s+/)
141
+ .filter(Boolean)
142
+ .map((t) => new RegExp(t, 'gi'));
133
143
  return (
134
144
  Boolean(option) &&
135
- (getLabel(option).match(searchTerm) || getValue(option).match(searchTerm))
145
+ (searchTerm.every((s) => getLabel(option).match(s)) ||
146
+ searchTerm.length === 0)
136
147
  );
137
148
  })
138
149
  );
@@ -173,12 +184,16 @@ watch(
173
184
  (newVal: Option | Option[]) => {
174
185
  if (!newVal) return;
175
186
  if (!props.multiselect) {
176
- if (!isSelected(newVal))
177
- selectedItems.splice(0, selectedItems.length, newVal);
187
+ const newOption =
188
+ props.options.find((o) => getValue(o) === newVal) || newVal;
189
+ if (!isSelected(newOption)) {
190
+ selectedItems.splice(0, selectedItems.length, newOption);
191
+ }
178
192
  } else {
179
193
  const isSame = compareArrays([newVal].flat(), selectedItems);
180
- if (!isSame)
194
+ if (!isSame) {
181
195
  selectedItems.splice(0, selectedItems.length, [newVal].flat());
196
+ }
182
197
  }
183
198
  },
184
199
  { immediate: true }
@@ -187,7 +202,7 @@ watch(
187
202
  watch(
188
203
  () => props.options,
189
204
  () => {
190
- const original = JSON.stringify(selectedItems);
205
+ const original = JSON.stringify(props.options.map(getValue));
191
206
  [...selectedItems].forEach((option, i) => {
192
207
  const exists = props.options.find(
193
208
  (o) => getValue(o) === getValue(option)
@@ -195,9 +210,10 @@ watch(
195
210
  if (!exists) selectedItems.splice(i, 1);
196
211
  else selectedItems.splice(i, 1, exists);
197
212
  });
198
- const newSelection = JSON.stringify(selectedItems);
213
+ const newSelection = JSON.stringify(selectedItems.map(getValue));
199
214
  if (original !== newSelection) emitUpdate();
200
- }
215
+ },
216
+ { deep: true }
201
217
  );
202
218
  </script>
203
219
 
package/src/styles/modal.css CHANGED
@@ -13,7 +13,6 @@
13
13
  overflow: auto;
14
14
  margin: 0 auto;
15
15
  width: 100%;
16
- text-align: center;
17
16
  display: grid;
18
17
  align-items: center;
19
18
  }