@bagelink/vue 0.0.882 → 0.0.886

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 (10) hide show
  1. package/dist/components/DropDown.vue.d.ts +2 -0
  2. package/dist/components/DropDown.vue.d.ts.map +1 -1
  3. package/dist/components/form/inputs/SelectInput.vue.d.ts +6 -1
  4. package/dist/components/form/inputs/SelectInput.vue.d.ts.map +1 -1
  5. package/dist/index.cjs +25 -8
  6. package/dist/index.mjs +25 -8
  7. package/dist/style.css +8 -8
  8. package/package.json +1 -1
  9. package/src/components/Dropdown.vue +2 -2
  10. package/src/components/form/inputs/SelectInput.vue +16 -4
package/dist/components/DropDown.vue.d.ts CHANGED
@@ -677,6 +677,7 @@ declare const __VLS_component: import('vue').DefineComponent<{
677
677
  disabled?: boolean;
678
678
  icon?: MaterialIcons;
679
679
  triggerClass?: string;
680
+ iconEnd?: MaterialIcons;
680
681
  border?: boolean;
681
682
  outline?: boolean;
682
683
  round?: boolean;
@@ -695,6 +696,7 @@ declare const __VLS_component: import('vue').DefineComponent<{
695
696
  disabled?: boolean;
696
697
  icon?: MaterialIcons;
697
698
  triggerClass?: string;
699
+ iconEnd?: MaterialIcons;
698
700
  border?: boolean;
699
701
  outline?: boolean;
700
702
  round?: boolean;
package/dist/components/DropDown.vue.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Dropdown.vue.d.ts","sourceRoot":"","sources":["../../src/components/Dropdown.vue"],"names":[],"mappings":"AA0EA,OAAO,EAAO,KAAK,aAAa,EAAE,MAAM,eAAe,CAAA;AAGvD,MAAM,MAAM,IAAI,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAA;AAC/D,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,KAAK,CAAA;AACvC,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,GAAG,IAAI,IAAI,SAAS,EAAE,CAAA;AAgE9D,iBAAS,cAAc;;yBA6EO,GAAG;yBACH,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBArBjC,GAAG;qBAC4B,GAAG;wBACA,GAAG;yBAGpC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WA0BU,OAAO,IAA6B;EAEjD;AAaD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;YAnKZ,MAAM;WACP,OAAO;WACP,OAAO;eACH,OAAO;WACX,aAAa;mBACL,MAAM;aAEZ,OAAO;cACN,OAAO;YACT,OAAO;gBACH,gBAAgB;kBACd,OAAO;;;;;;;;YAXb,MAAM;WACP,OAAO;WACP,OAAO;eACH,OAAO;WACX,aAAa;mBACL,MAAM;aAEZ,OAAO;cACN,OAAO;YACT,OAAO;gBACH,gBAAgB;kBACd,OAAO;;;;kFAgKpB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAWpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
1
+ {"version":3,"file":"Dropdown.vue.d.ts","sourceRoot":"","sources":["../../src/components/Dropdown.vue"],"names":[],"mappings":"AA0EA,OAAO,EAAO,KAAK,aAAa,EAAE,MAAM,eAAe,CAAA;AAGvD,MAAM,MAAM,IAAI,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAA;AAC/D,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,KAAK,CAAA;AACvC,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,GAAG,IAAI,IAAI,SAAS,EAAE,CAAA;AAgE9D,iBAAS,cAAc;;yBA6EO,GAAG;yBACH,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAtBlB,GAAG;qBAEI,GAAG;wBACA,GAAG;yBACf,GAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WA4BD,OAAO,IAA6B;EAEjD;AAaD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;YAnKZ,MAAM;WACP,OAAO;WACP,OAAO;eACH,OAAO;WACX,aAAa;mBACL,MAAM;cACX,aAAa;aACd,OAAO;cACN,OAAO;YACT,OAAO;gBACH,gBAAgB;kBACd,OAAO;;;;;;;;YAXb,MAAM;WACP,OAAO;WACP,OAAO;eACH,OAAO;WACX,aAAa;mBACL,MAAM;cACX,aAAa;aACd,OAAO;cACN,OAAO;YACT,OAAO;gBACH,gBAAgB;kBACd,OAAO;;;;kFAgKpB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAWpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
package/dist/components/form/inputs/SelectInput.vue.d.ts CHANGED
@@ -14,6 +14,7 @@ declare function __VLS_template(): {
14
14
  readonly disabled?: boolean | undefined;
15
15
  readonly icon?: MaterialIcons | undefined;
16
16
  readonly triggerClass?: string | undefined;
17
+ readonly iconEnd?: MaterialIcons | undefined;
17
18
  readonly border?: boolean | undefined;
18
19
  readonly outline?: boolean | undefined;
19
20
  readonly round?: boolean | undefined;
@@ -28,6 +29,7 @@ declare function __VLS_template(): {
28
29
  disabled?: boolean;
29
30
  icon?: MaterialIcons;
30
31
  triggerClass?: string;
32
+ iconEnd?: MaterialIcons;
31
33
  border?: boolean;
32
34
  outline?: boolean;
33
35
  round?: boolean;
@@ -58,6 +60,7 @@ declare function __VLS_template(): {
58
60
  disabled?: boolean;
59
61
  icon?: MaterialIcons;
60
62
  triggerClass?: string;
63
+ iconEnd?: MaterialIcons;
61
64
  border?: boolean;
62
65
  outline?: boolean;
63
66
  round?: boolean;
@@ -91,7 +94,7 @@ declare function __VLS_template(): {
91
94
  };
92
95
  $forceUpdate: () => void;
93
96
  $nextTick: typeof import('vue').nextTick;
94
- $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
97
+ $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (... /** @type { [typeof __VLS_components.Icon, ] } */args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
95
98
  } & Readonly<{}> & Omit<Readonly<{
96
99
  value?: string;
97
100
  thin?: boolean;
@@ -99,6 +102,7 @@ declare function __VLS_template(): {
99
102
  disabled?: boolean;
100
103
  icon?: MaterialIcons;
101
104
  triggerClass?: string;
105
+ iconEnd?: MaterialIcons;
102
106
  border?: boolean;
103
107
  outline?: boolean;
104
108
  round?: boolean;
@@ -225,6 +229,7 @@ declare function __VLS_template(): {
225
229
  modelValue: string | number;
226
230
  debounceDelay: number;
227
231
  }> | null;
232
+ trigger: HTMLButtonElement;
228
233
  selectOptions: HTMLDivElement;
229
234
  };
230
235
  attrs: Partial<{}>;
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":"AAwaA,OAAO,EAMN,KAAK,aAAa,EAClB,KAAK,MAAM,EAEX,MAAM,eAAe,CAAA;AAEtB,OAAO,wBAAwB,CAAA;AA+N/B,iBAAS,cAAc;;sBA4RI,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCA9EzB,GAAG,8CACmB,GAAE,yBAAyB,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAyFjF,OAAO,IAA6B;EAEjD;AAmCD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;aAxiBX,MAAM,EAAE;kBACH,MAAM;eACT,OAAO;iBACL,MAAM;iBACN,OAAO;eACT,OAAO;YACV,MAAM;gBACF,OAAO;kBACL,OAAO;WACd,aAAa;gBACR,OAAO;mBACJ,MAAM;gBACT,OAAO;wBACC,MAAM;eACf,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,EAAE,CAAC;;;;aAdvC,MAAM,EAAE;kBACH,MAAM;eACT,OAAO;iBACL,MAAM;iBACN,OAAO;eACT,OAAO;YACV,MAAM;gBACF,OAAO;kBACL,OAAO;WACd,aAAa;gBACR,OAAO;mBACJ,MAAM;gBACT,OAAO;wBACC,MAAM;eACf,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,EAAE,CAAC;;;kFAiiB/C,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAWpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
1
+ {"version":3,"file":"SelectInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/SelectInput.vue"],"names":[],"mappings":"AAobA,OAAO,EAMN,KAAK,aAAa,EAClB,KAAK,MAAM,EAEX,MAAM,eAAe,CAAA;AAEtB,OAAO,wBAAwB,CAAA;AA2O/B,iBAAS,cAAc;;sBA8RI,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCAzFrB,GAAG,8CACmB,GAAG,yBAAyB,GAC3D,CAAA,iDAAiD,6DAAd,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAoGxB,OAAO,IAA6B;EAEjD;AAoCD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;aAxjBX,MAAM,EAAE;kBACH,MAAM;eACT,OAAO;iBACL,MAAM;iBACN,OAAO;eACT,OAAO;YACV,MAAM;gBACF,OAAO;kBACL,OAAO;WACd,aAAa;gBACR,OAAO;mBACJ,MAAM;gBACT,OAAO;wBACC,MAAM;eACf,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,EAAE,CAAC;;;;aAdvC,MAAM,EAAE;kBACH,MAAM;eACT,OAAO;iBACL,MAAM;iBACN,OAAO;eACT,OAAO;YACV,MAAM;gBACF,OAAO;kBACL,OAAO;WACd,aAAa;gBACR,OAAO;mBACJ,MAAM;gBACT,OAAO;wBACC,MAAM;eACf,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,EAAE,CAAC;;;kFAijB/C,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAWpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
package/dist/index.cjs CHANGED
@@ -9488,6 +9488,7 @@ const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
9488
9488
  disabled: { type: Boolean },
9489
9489
  icon: {},
9490
9490
  triggerClass: {},
9491
+ iconEnd: {},
9491
9492
  border: { type: Boolean },
9492
9493
  outline: { type: Boolean },
9493
9494
  round: { type: Boolean },
@@ -9524,11 +9525,12 @@ const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
9524
9525
  vue.renderSlot(_ctx.$slots, "trigger", {}, () => [
9525
9526
  vue.createVNode(vue.unref(Btn), {
9526
9527
  class: vue.normalizeClass(_ctx.triggerClass),
9528
+ iconEnd: _ctx.iconEnd,
9527
9529
  icon: _ctx.icon,
9528
9530
  value: _ctx.value,
9529
9531
  thin: _ctx.thin,
9530
9532
  flat: _ctx.flat
9531
- }, null, 8, ["class", "icon", "value", "thin", "flat"])
9533
+ }, null, 8, ["class", "iconEnd", "icon", "value", "thin", "flat"])
9532
9534
  ])
9533
9535
  ]),
9534
9536
  _: 3
@@ -43996,6 +43998,7 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
43996
43998
  const emit2 = __emit;
43997
43999
  const searchPlaceholder = vue.computed(() => props2.searchPlaceholder || "Search");
43998
44000
  const searchInput = vue.ref();
44001
+ const trigger = vue.ref();
43999
44002
  let selectedItems = vue.ref([]);
44000
44003
  const selectedItemCount = vue.computed(() => selectedItems.value.length ?? 0);
44001
44004
  let search = vue.ref("");
@@ -44038,6 +44041,7 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
44038
44041
  let highlightedIndex = vue.ref(0);
44039
44042
  const selectOptions = vue.ref();
44040
44043
  function navigate(direction) {
44044
+ console.log("navigate", direction);
44041
44045
  if (direction === "up") {
44042
44046
  highlightedIndex.value = highlightedIndex.value > 0 ? highlightedIndex.value - 1 : filteredOptions.value.length - 1;
44043
44047
  } else if (direction === "down") {
@@ -44051,7 +44055,19 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
44051
44055
  }
44052
44056
  const isSelected = (option2) => selectedItems.value.find((item) => getValue(option2) === getValue(item)) !== void 0;
44053
44057
  function updateOpen(visible) {
44058
+ var _a2;
44059
+ console.log("updateOpen", visible);
44054
44060
  open.value = visible;
44061
+ if (open.value) {
44062
+ (_a2 = dropdown.value) == null ? void 0 : _a2.show();
44063
+ } else {
44064
+ setTimeout(() => {
44065
+ var _a3;
44066
+ if (trigger.value) trigger.value.focus();
44067
+ if (searchInput.value) searchInput.value.focus();
44068
+ (_a3 = dropdown.value) == null ? void 0 : _a3.hide();
44069
+ }, 10);
44070
+ }
44055
44071
  if (!open.value) {
44056
44072
  if (props2.searchable && !props2.multiselect && !search.value && !selected.value) {
44057
44073
  selectedItems.value = [];
@@ -44061,12 +44077,12 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
44061
44077
  }
44062
44078
  highlightedIndex.value = -1;
44063
44079
  search.value = "";
44064
- } else {
44065
- if (props2.searchable && !props2.multiselect && selectedItemCount.value) search.value = selectedLabel.value;
44080
+ } else if (props2.searchable && !props2.multiselect && selectedItemCount.value) {
44081
+ search.value = selectedLabel.value;
44066
44082
  setTimeout(
44067
44083
  () => {
44068
- var _a2, _b, _c;
44069
- return (_c = (_b = (_a2 = searchInput.value) == null ? void 0 : _a2.$el) == null ? void 0 : _b.querySelector("input")) == null ? void 0 : _c.focus();
44084
+ var _a3, _b, _c;
44085
+ return (_c = (_b = (_a3 = searchInput.value) == null ? void 0 : _a3.$el) == null ? void 0 : _b.querySelector("input")) == null ? void 0 : _c.focus();
44070
44086
  },
44071
44087
  100
44072
44088
  );
@@ -44159,7 +44175,6 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
44159
44175
  ref: dropdown,
44160
44176
  placement: "bottom-start",
44161
44177
  class: "bagel-input selectinput",
44162
- noAutoFocus: "",
44163
44178
  onHide: _cache[10] || (_cache[10] = ($event) => updateOpen(false))
44164
44179
  }, {
44165
44180
  trigger: vue.withCtx(() => [
@@ -44184,11 +44199,13 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
44184
44199
  ]
44185
44200
  }, null, 8, ["modelValue", "placeholder"])) : (vue.openBlock(), vue.createElementBlock("button", {
44186
44201
  key: 1,
44202
+ ref_key: "trigger",
44203
+ ref: trigger,
44187
44204
  disabled: _ctx.disabled,
44188
44205
  type: "button",
44189
44206
  class: vue.normalizeClass(["selectinput-btn", { isEmpty: selectedItemCount.value === 0 }]),
44190
44207
  onFocus: openOptions,
44191
- onClick: _cache[6] || (_cache[6] = ($event) => updateOpen(true))
44208
+ onClick: _cache[6] || (_cache[6] = vue.withModifiers(($event) => updateOpen(true), ["stop"]))
44192
44209
  }, [
44193
44210
  _ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$c), {
44194
44211
  key: 0,
@@ -44282,7 +44299,7 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
44282
44299
  };
44283
44300
  }
44284
44301
  });
44285
- const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["__scopeId", "data-v-0ea75792"]]);
44302
+ const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["__scopeId", "data-v-973e8b39"]]);
44286
44303
  /*!
44287
44304
  * Signature Pad v5.0.3 | https://github.com/szimek/signature_pad
44288
44305
  * (c) 2024 Szymon Nowak | Released under the MIT license
package/dist/index.mjs CHANGED
@@ -9486,6 +9486,7 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
9486
9486
  disabled: { type: Boolean },
9487
9487
  icon: {},
9488
9488
  triggerClass: {},
9489
+ iconEnd: {},
9489
9490
  border: { type: Boolean },
9490
9491
  outline: { type: Boolean },
9491
9492
  round: { type: Boolean },
@@ -9522,11 +9523,12 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
9522
9523
  renderSlot(_ctx.$slots, "trigger", {}, () => [
9523
9524
  createVNode(unref(Btn), {
9524
9525
  class: normalizeClass(_ctx.triggerClass),
9526
+ iconEnd: _ctx.iconEnd,
9525
9527
  icon: _ctx.icon,
9526
9528
  value: _ctx.value,
9527
9529
  thin: _ctx.thin,
9528
9530
  flat: _ctx.flat
9529
- }, null, 8, ["class", "icon", "value", "thin", "flat"])
9531
+ }, null, 8, ["class", "iconEnd", "icon", "value", "thin", "flat"])
9530
9532
  ])
9531
9533
  ]),
9532
9534
  _: 3
@@ -43994,6 +43996,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
43994
43996
  const emit2 = __emit;
43995
43997
  const searchPlaceholder = computed(() => props2.searchPlaceholder || "Search");
43996
43998
  const searchInput = ref();
43999
+ const trigger = ref();
43997
44000
  let selectedItems = ref([]);
43998
44001
  const selectedItemCount = computed(() => selectedItems.value.length ?? 0);
43999
44002
  let search = ref("");
@@ -44036,6 +44039,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
44036
44039
  let highlightedIndex = ref(0);
44037
44040
  const selectOptions = ref();
44038
44041
  function navigate(direction) {
44042
+ console.log("navigate", direction);
44039
44043
  if (direction === "up") {
44040
44044
  highlightedIndex.value = highlightedIndex.value > 0 ? highlightedIndex.value - 1 : filteredOptions.value.length - 1;
44041
44045
  } else if (direction === "down") {
@@ -44049,7 +44053,19 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
44049
44053
  }
44050
44054
  const isSelected = (option2) => selectedItems.value.find((item) => getValue(option2) === getValue(item)) !== void 0;
44051
44055
  function updateOpen(visible) {
44056
+ var _a2;
44057
+ console.log("updateOpen", visible);
44052
44058
  open.value = visible;
44059
+ if (open.value) {
44060
+ (_a2 = dropdown.value) == null ? void 0 : _a2.show();
44061
+ } else {
44062
+ setTimeout(() => {
44063
+ var _a3;
44064
+ if (trigger.value) trigger.value.focus();
44065
+ if (searchInput.value) searchInput.value.focus();
44066
+ (_a3 = dropdown.value) == null ? void 0 : _a3.hide();
44067
+ }, 10);
44068
+ }
44053
44069
  if (!open.value) {
44054
44070
  if (props2.searchable && !props2.multiselect && !search.value && !selected.value) {
44055
44071
  selectedItems.value = [];
@@ -44059,12 +44075,12 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
44059
44075
  }
44060
44076
  highlightedIndex.value = -1;
44061
44077
  search.value = "";
44062
- } else {
44063
- if (props2.searchable && !props2.multiselect && selectedItemCount.value) search.value = selectedLabel.value;
44078
+ } else if (props2.searchable && !props2.multiselect && selectedItemCount.value) {
44079
+ search.value = selectedLabel.value;
44064
44080
  setTimeout(
44065
44081
  () => {
44066
- var _a2, _b, _c;
44067
- return (_c = (_b = (_a2 = searchInput.value) == null ? void 0 : _a2.$el) == null ? void 0 : _b.querySelector("input")) == null ? void 0 : _c.focus();
44082
+ var _a3, _b, _c;
44083
+ return (_c = (_b = (_a3 = searchInput.value) == null ? void 0 : _a3.$el) == null ? void 0 : _b.querySelector("input")) == null ? void 0 : _c.focus();
44068
44084
  },
44069
44085
  100
44070
44086
  );
@@ -44157,7 +44173,6 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
44157
44173
  ref: dropdown,
44158
44174
  placement: "bottom-start",
44159
44175
  class: "bagel-input selectinput",
44160
- noAutoFocus: "",
44161
44176
  onHide: _cache[10] || (_cache[10] = ($event) => updateOpen(false))
44162
44177
  }, {
44163
44178
  trigger: withCtx(() => [
@@ -44182,11 +44197,13 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
44182
44197
  ]
44183
44198
  }, null, 8, ["modelValue", "placeholder"])) : (openBlock(), createElementBlock("button", {
44184
44199
  key: 1,
44200
+ ref_key: "trigger",
44201
+ ref: trigger,
44185
44202
  disabled: _ctx.disabled,
44186
44203
  type: "button",
44187
44204
  class: normalizeClass(["selectinput-btn", { isEmpty: selectedItemCount.value === 0 }]),
44188
44205
  onFocus: openOptions,
44189
- onClick: _cache[6] || (_cache[6] = ($event) => updateOpen(true))
44206
+ onClick: _cache[6] || (_cache[6] = withModifiers(($event) => updateOpen(true), ["stop"]))
44190
44207
  }, [
44191
44208
  _ctx.icon ? (openBlock(), createBlock(unref(_sfc_main$c), {
44192
44209
  key: 0,
@@ -44280,7 +44297,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
44280
44297
  };
44281
44298
  }
44282
44299
  });
44283
- const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["__scopeId", "data-v-0ea75792"]]);
44300
+ const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["__scopeId", "data-v-973e8b39"]]);
44284
44301
  /*!
44285
44302
  * Signature Pad v5.0.3 | https://github.com/szimek/signature_pad
44286
44303
  * (c) 2024 Szymon Nowak | Released under the MIT license
package/dist/style.css CHANGED
@@ -1316,10 +1316,10 @@ p {
1316
1316
  } */
1317
1317
  .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}
1318
1318
 
1319
- .selectinput[data-v-0ea75792] {
1319
+ .selectinput[data-v-973e8b39] {
1320
1320
  width: 100%;
1321
1321
  }
1322
- .selectinput-option[data-v-0ea75792] {
1322
+ .selectinput-option[data-v-973e8b39] {
1323
1323
  padding: 6px 12px;
1324
1324
  cursor: pointer;
1325
1325
  border-radius: 5px;
@@ -1331,23 +1331,23 @@ p {
1331
1331
  font-size: var(--input-font-size);
1332
1332
  margin-block: 0.15rem;
1333
1333
  }
1334
- .selectinput-option .bgl_icon-font[data-v-0ea75792]{
1334
+ .selectinput-option .bgl_icon-font[data-v-973e8b39]{
1335
1335
  line-height: normal;
1336
1336
  }
1337
- .selectinput-options.multiselect .selectinput-option[data-v-0ea75792] {
1337
+ .selectinput-options.multiselect .selectinput-option[data-v-973e8b39] {
1338
1338
  grid-template-columns: 10px 1fr;
1339
1339
  }
1340
- .selectinput-options[data-v-0ea75792] {
1340
+ .selectinput-options[data-v-973e8b39] {
1341
1341
  max-height: 300px;
1342
1342
  overflow-y: auto;
1343
1343
  }
1344
- .selectinput-option[data-v-0ea75792]:hover, .highlight[data-v-0ea75792] {
1344
+ .selectinput-option[data-v-973e8b39]:hover, .highlight[data-v-973e8b39] {
1345
1345
  background: var(--bgl-gray-20);
1346
1346
  }
1347
- .isEmpty p[data-v-0ea75792] {
1347
+ .isEmpty p[data-v-973e8b39] {
1348
1348
  opacity: 0.3;
1349
1349
  }
1350
- .selected[data-v-0ea75792]{
1350
+ .selected[data-v-973e8b39]{
1351
1351
  /* background: var(--bgl-primary-tint); */
1352
1352
  background: var(--bgl-selected);
1353
1353
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@bagelink/vue",
3
3
  "type": "module",
4
- "version": "0.0.882",
4
+ "version": "0.0.886",
5
5
  "description": "Bagel core sdk packages",
6
6
  "author": {
7
7
  "name": "Neveh Allon",
package/src/components/Dropdown.vue CHANGED
@@ -13,7 +13,7 @@ defineProps<{
13
13
  disabled?: boolean
14
14
  icon?: MaterialIcons
15
15
  triggerClass?: string
16
- // 'iconEnd'?: MaterialIcons
16
+ iconEnd?: MaterialIcons
17
17
  border?: boolean
18
18
  outline?: boolean
19
19
  round?: boolean
@@ -63,7 +63,7 @@ defineExpose({ show, hide })
63
63
  <template>
64
64
  <DDown ref="ddownRef" :disabled="disabled" :noAutoFocus="noAutoFocus" :placement="placement" @hide="emit('hide')" @show="emit('show')">
65
65
  <slot name="trigger">
66
- <Btn :class="triggerClass" :icon="icon" :value="value" :thin="thin" :flat="flat" />
66
+ <Btn :class="triggerClass" :iconEnd="iconEnd" :icon="icon" :value="value" :thin="thin" :flat="flat" />
67
67
  </slot>
68
68
  <template #popper>
69
69
  <slot />
package/src/components/form/inputs/SelectInput.vue CHANGED
@@ -35,6 +35,7 @@ const emit = defineEmits(['update:modelValue']) // Add 'search' event
35
35
  const searchPlaceholder = $computed(() => props.searchPlaceholder || 'Search')
36
36
 
37
37
  const searchInput = $ref<HTMLInputElement | undefined>()
38
+ const trigger = $ref<HTMLButtonElement | undefined>()
38
39
 
39
40
  let selectedItems = $ref<Option[]>([])
40
41
 
@@ -97,6 +98,7 @@ let highlightedIndex = $ref(0)
97
98
  const selectOptions = $ref<HTMLElement | undefined>()
98
99
 
99
100
  function navigate(direction: 'up' | 'down') {
101
+ console.log('navigate', direction)
100
102
  if (direction === 'up') {
101
103
  highlightedIndex = highlightedIndex > 0 ? highlightedIndex - 1 : filteredOptions.length - 1
102
104
  } else if (direction === 'down') {
@@ -111,7 +113,17 @@ function navigate(direction: 'up' | 'down') {
111
113
  const isSelected = (option: Option) => selectedItems.find(item => getValue(option) === getValue(item)) !== undefined
112
114
 
113
115
  function updateOpen(visible: boolean) {
116
+ console.log('updateOpen', visible)
114
117
  open = visible
118
+
119
+ if (open) { dropdown?.show() }
120
+ else {
121
+ setTimeout(() => {
122
+ if (trigger) trigger.focus()
123
+ if (searchInput) searchInput.focus()
124
+ dropdown?.hide()
125
+ }, 10)
126
+ }
115
127
  if (!open) {
116
128
  if (props.searchable && !props.multiselect && !search && !selected) { selectedItems = []
117
129
  }
@@ -121,8 +133,8 @@ function updateOpen(visible: boolean) {
121
133
  highlightedIndex = -1
122
134
  search = ''
123
135
  }
124
- else {
125
- if (props.searchable && !props.multiselect && selectedItemCount) search = selectedLabel as string
136
+ else if (props.searchable && !props.multiselect && selectedItemCount) {
137
+ search = selectedLabel as string
126
138
  setTimeout(
127
139
  () => (searchInput as any)?.$el?.querySelector('input')?.focus(),
128
140
  100,
@@ -231,7 +243,6 @@ onMounted(() => {
231
243
  ref="dropdown"
232
244
  placement="bottom-start"
233
245
  class="bagel-input selectinput"
234
- noAutoFocus
235
246
  @hide="updateOpen(false)"
236
247
  >
237
248
  <template #trigger>
@@ -253,12 +264,13 @@ onMounted(() => {
253
264
  />
254
265
  <button
255
266
  v-else
267
+ ref="trigger"
256
268
  :disabled="disabled"
257
269
  type="button"
258
270
  class="selectinput-btn"
259
271
  :class="{ isEmpty: selectedItemCount === 0 }"
260
272
  @focus="openOptions"
261
- @click="updateOpen(true)"
273
+ @click.stop="updateOpen(true)"
262
274
  >
263
275
  <Icon v-if="icon" :icon="icon" />
264
276
  <p v-if="!hideLabel">