@bagelink/vue 0.0.390 → 0.0.392

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 (9) hide show
  1. package/dist/components/TableSchema.vue.d.ts.map +1 -1
  2. package/dist/components/form/inputs/SelectInput.vue.d.ts.map +1 -1
  3. package/dist/index.cjs +14 -12
  4. package/dist/index.mjs +14 -12
  5. package/dist/style.css +91 -88
  6. package/package.json +1 -1
  7. package/src/components/TableSchema.vue +99 -71
  8. package/src/components/form/inputs/SelectInput.vue +10 -7
  9. 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/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":"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqb7C,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) {
@@ -15277,12 +15279,15 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
15277
15279
  if (!newVal)
15278
15280
  return;
15279
15281
  if (!props2.multiselect) {
15280
- if (!isSelected(newVal))
15281
- selectedItems.value.splice(0, selectedItems.value.length, newVal);
15282
+ const newOption = props2.options.find((o2) => getValue(o2) === newVal) || newVal;
15283
+ if (!isSelected(newOption)) {
15284
+ selectedItems.value.splice(0, selectedItems.value.length, newOption);
15285
+ }
15282
15286
  } else {
15283
15287
  const isSame = compareArrays([newVal].flat(), selectedItems.value);
15284
- if (!isSame)
15288
+ if (!isSame) {
15285
15289
  selectedItems.value.splice(0, selectedItems.value.length, [newVal].flat());
15290
+ }
15286
15291
  }
15287
15292
  },
15288
15293
  { immediate: true }
@@ -15290,17 +15295,14 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
15290
15295
  vue.watch(
15291
15296
  () => props2.options,
15292
15297
  () => {
15293
- const original = JSON.stringify(selectedItems.value);
15298
+ const original = JSON.stringify(props2.options.map(getValue));
15294
15299
  [...selectedItems.value].forEach((option2, i2) => {
15295
15300
  const exists = props2.options.find(
15296
15301
  (o2) => getValue(o2) === getValue(option2)
15297
15302
  );
15298
- if (!exists)
15299
- selectedItems.value.splice(i2, 1);
15300
- else
15301
- selectedItems.value.splice(i2, 1, exists);
15303
+ selectedItems.value.splice(i2, 1, exists);
15302
15304
  });
15303
- const newSelection = JSON.stringify(selectedItems.value);
15305
+ const newSelection = JSON.stringify(selectedItems.value.map(getValue));
15304
15306
  if (original !== newSelection)
15305
15307
  emitUpdate();
15306
15308
  }
@@ -15378,7 +15380,7 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
15378
15380
  };
15379
15381
  }
15380
15382
  });
15381
- const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-ab376074"]]);
15383
+ const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-1eb708f2"]]);
15382
15384
  /*!
15383
15385
  * vue-draggable-next v2.2.0
15384
15386
  * (c) 2023 Anish George
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) {
@@ -15275,12 +15277,15 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
15275
15277
  if (!newVal)
15276
15278
  return;
15277
15279
  if (!props2.multiselect) {
15278
- if (!isSelected(newVal))
15279
- selectedItems.value.splice(0, selectedItems.value.length, newVal);
15280
+ const newOption = props2.options.find((o2) => getValue(o2) === newVal) || newVal;
15281
+ if (!isSelected(newOption)) {
15282
+ selectedItems.value.splice(0, selectedItems.value.length, newOption);
15283
+ }
15280
15284
  } else {
15281
15285
  const isSame = compareArrays([newVal].flat(), selectedItems.value);
15282
- if (!isSame)
15286
+ if (!isSame) {
15283
15287
  selectedItems.value.splice(0, selectedItems.value.length, [newVal].flat());
15288
+ }
15284
15289
  }
15285
15290
  },
15286
15291
  { immediate: true }
@@ -15288,17 +15293,14 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
15288
15293
  watch(
15289
15294
  () => props2.options,
15290
15295
  () => {
15291
- const original = JSON.stringify(selectedItems.value);
15296
+ const original = JSON.stringify(props2.options.map(getValue));
15292
15297
  [...selectedItems.value].forEach((option2, i2) => {
15293
15298
  const exists = props2.options.find(
15294
15299
  (o2) => getValue(o2) === getValue(option2)
15295
15300
  );
15296
- if (!exists)
15297
- selectedItems.value.splice(i2, 1);
15298
- else
15299
- selectedItems.value.splice(i2, 1, exists);
15301
+ selectedItems.value.splice(i2, 1, exists);
15300
15302
  });
15301
- const newSelection = JSON.stringify(selectedItems.value);
15303
+ const newSelection = JSON.stringify(selectedItems.value.map(getValue));
15302
15304
  if (original !== newSelection)
15303
15305
  emitUpdate();
15304
15306
  }
@@ -15376,7 +15378,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
15376
15378
  };
15377
15379
  }
15378
15380
  });
15379
- const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-ab376074"]]);
15381
+ const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-1eb708f2"]]);
15380
15382
  /*!
15381
15383
  * vue-draggable-next v2.2.0
15382
15384
  * (c) 2023 Anish George
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-1eb708f2] {
1057
1060
  width: 100%;
1058
1061
  }
1059
- .selectinput-option[data-v-ab376074] {
1062
+ .selectinput-option[data-v-1eb708f2] {
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-1eb708f2] {
1071
1074
  max-height: 300px;
1072
1075
  overflow-y: auto;
1073
1076
  }
1074
- .selectinput-option[data-v-ab376074]:hover {
1077
+ .selectinput-option[data-v-1eb708f2]:hover {
1075
1078
  background: var(--bgl-gray-20);
1076
1079
  }
1077
- .isEmpty p[data-v-ab376074] {
1080
+ .isEmpty p[data-v-1eb708f2] {
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.392",
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/SelectInput.vue CHANGED
@@ -173,12 +173,16 @@ watch(
173
173
  (newVal: Option | Option[]) => {
174
174
  if (!newVal) return;
175
175
  if (!props.multiselect) {
176
- if (!isSelected(newVal))
177
- selectedItems.splice(0, selectedItems.length, newVal);
176
+ const newOption =
177
+ props.options.find((o) => getValue(o) === newVal) || newVal;
178
+ if (!isSelected(newOption)) {
179
+ selectedItems.splice(0, selectedItems.length, newOption);
180
+ }
178
181
  } else {
179
182
  const isSame = compareArrays([newVal].flat(), selectedItems);
180
- if (!isSame)
183
+ if (!isSame) {
181
184
  selectedItems.splice(0, selectedItems.length, [newVal].flat());
185
+ }
182
186
  }
183
187
  },
184
188
  { immediate: true }
@@ -187,15 +191,14 @@ watch(
187
191
  watch(
188
192
  () => props.options,
189
193
  () => {
190
- const original = JSON.stringify(selectedItems);
194
+ const original = JSON.stringify(props.options.map(getValue));
191
195
  [...selectedItems].forEach((option, i) => {
192
196
  const exists = props.options.find(
193
197
  (o) => getValue(o) === getValue(option)
194
198
  );
195
- if (!exists) selectedItems.splice(i, 1);
196
- else selectedItems.splice(i, 1, exists);
199
+ selectedItems.splice(i, 1, exists);
197
200
  });
198
- const newSelection = JSON.stringify(selectedItems);
201
+ const newSelection = JSON.stringify(selectedItems.map(getValue));
199
202
  if (original !== newSelection) emitUpdate();
200
203
  }
201
204
  );
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
  }