@bagelink/vue 0.0.692 → 0.0.694

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 (13) hide show
  1. package/dist/components/form/inputs/TelInput.vue.d.ts +25 -24
  2. package/dist/components/form/inputs/TelInput.vue.d.ts.map +1 -1
  3. package/dist/components/form/inputs/TextInput.vue.d.ts.map +1 -1
  4. package/dist/index.cjs +15 -3
  5. package/dist/index.mjs +15 -3
  6. package/dist/style.css +82 -22
  7. package/dist/utils/BagelFormUtils.d.ts +2 -1
  8. package/dist/utils/BagelFormUtils.d.ts.map +1 -1
  9. package/package.json +1 -1
  10. package/src/components/form/inputs/TelInput.vue +26 -25
  11. package/src/components/form/inputs/TextInput.vue +1 -0
  12. package/src/styles/inputs.css +79 -2
  13. package/src/utils/BagelFormUtils.ts +32 -1
package/dist/components/form/inputs/TelInput.vue.d.ts CHANGED
@@ -1,32 +1,10 @@
1
1
  import { Country } from '../../..';
2
2
  import { Raw, StyleValue } from 'vue';
3
3
  import { NumberFormat } from 'libphonenumber-js';
4
- declare let __VLS_typeProps: Props;
5
- declare const defaultDropdownOptions: {
6
- hide: boolean;
7
- disabled: boolean;
8
- showFlags: boolean;
9
- showDialCodeInSelection: boolean;
10
- showDialCodeInList: boolean;
11
- searchable: boolean;
12
- };
13
- declare const defaultInputOptions: {
14
- showDialCode: boolean;
15
- autofocus: boolean;
16
- 'aria-describedby': string;
17
- id: string;
18
- maxlength: number;
19
- minlength: number;
20
- pattern: string | undefined;
21
- name: string;
22
- readonly: boolean;
23
- tabindex: number;
24
- style: Raw<StyleValue>;
25
- placeholder: string;
26
- };
27
- interface Props {
4
+ export interface Props {
28
5
  label?: string;
29
6
  id?: string;
7
+ class?: string;
30
8
  autocomplete?: 'on' | 'off' | 'tel';
31
9
  placeholder?: string;
32
10
  required?: boolean;
@@ -49,6 +27,29 @@ interface Props {
49
27
  };
50
28
  debounceDelay?: number;
51
29
  }
30
+ declare let __VLS_typeProps: Props;
31
+ declare const defaultDropdownOptions: {
32
+ hide: boolean;
33
+ disabled: boolean;
34
+ showFlags: boolean;
35
+ showDialCodeInSelection: boolean;
36
+ showDialCodeInList: boolean;
37
+ searchable: boolean;
38
+ };
39
+ declare const defaultInputOptions: {
40
+ showDialCode: boolean;
41
+ autofocus: boolean;
42
+ 'aria-describedby': string;
43
+ id: string;
44
+ maxlength: number;
45
+ minlength: number;
46
+ pattern: string | undefined;
47
+ name: string;
48
+ readonly: boolean;
49
+ tabindex: number;
50
+ style: Raw<StyleValue>;
51
+ placeholder: string;
52
+ };
52
53
  type __VLS_PublicProps = {
53
54
  'modelValue'?: string;
54
55
  } & typeof __VLS_typeProps;
package/dist/components/form/inputs/TelInput.vue.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TelInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/TelInput.vue"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"TelInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/TelInput.vue"],"names":[],"mappings":"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"}
package/dist/components/form/inputs/TextInput.vue.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TextInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/TextInput.vue"],"names":[],"mappings":"AA2NA,OAAO,EAEN,KAAK,aAAa,EAElB,MAAM,eAAe,CAAA;;SAKf,MAAM;YACH,MAAM;eACH,MAAM;kBACH,MAAM;iBACP,MAAM,GAAG,MAAM;YACpB,MAAM;YACN,OAAO;YACP,OAAO;eACJ,OAAO;cACR,MAAM;aACP,OAAO;eACL,OAAO;WACX,MAAM;uBACM,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;WAC/B,aAAa;gBACR,aAAa;gBACb,OAAO;iBACN,OAAO;WACb,OAAO;YACN,MAAM;mBACC,aAAa;gBAChB,OAAO;oBACH,MAAM;iBACT,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI;;;;;;;;;SAvB/B,MAAM;YACH,MAAM;eACH,MAAM;kBACH,MAAM;iBACP,MAAM,GAAG,MAAM;YACpB,MAAM;YACN,OAAO;YACP,OAAO;eACJ,OAAO;cACR,MAAM;aACP,OAAO;eACL,OAAO;WACX,MAAM;uBACM,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;WAC/B,aAAa;gBACR,aAAa;gBACb,OAAO;iBACN,OAAO;WACb,OAAO;YACN,MAAM;mBACC,aAAa;gBAChB,OAAO;oBACH,MAAM;iBACT,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI;;;;;;;;;UAX7B,MAAM;gBARA,MAAM,GAAG,MAAM;mBAkBZ,MAAM;;AAqLxB,wBAOG;AAOH,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAC1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAC7C,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KAAC,CAAC,GACvC,CAAC,CAAC,CAAC,CAAC;CACP,CAAC;AAEN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC;AAExD,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AAC5D,KAAK,uBAAuB,CAAC,CAAC,IAAI;KAChC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GACpC;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAC9D;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CACzD,CAAC"}
1
+ {"version":3,"file":"TextInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/TextInput.vue"],"names":[],"mappings":"AA4NA,OAAO,EAEN,KAAK,aAAa,EAElB,MAAM,eAAe,CAAA;;SAKf,MAAM;YACH,MAAM;eACH,MAAM;kBACH,MAAM;iBACP,MAAM,GAAG,MAAM;YACpB,MAAM;YACN,OAAO;YACP,OAAO;eACJ,OAAO;cACR,MAAM;aACP,OAAO;eACL,OAAO;WACX,MAAM;uBACM,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;WAC/B,aAAa;gBACR,aAAa;gBACb,OAAO;iBACN,OAAO;WACb,OAAO;YACN,MAAM;mBACC,aAAa;gBAChB,OAAO;oBACH,MAAM;iBACT,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI;;;;;;;;;SAvB/B,MAAM;YACH,MAAM;eACH,MAAM;kBACH,MAAM;iBACP,MAAM,GAAG,MAAM;YACpB,MAAM;YACN,OAAO;YACP,OAAO;eACJ,OAAO;cACR,MAAM;aACP,OAAO;eACL,OAAO;WACX,MAAM;uBACM,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;WAC/B,aAAa;gBACR,aAAa;gBACb,OAAO;iBACN,OAAO;WACb,OAAO;YACN,MAAM;mBACC,aAAa;gBAChB,OAAO;oBACH,MAAM;iBACT,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI;;;;;;;;;UAX7B,MAAM;gBARA,MAAM,GAAG,MAAM;mBAkBZ,MAAM;;AAqLxB,wBAOG;AAOH,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAC1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAC7C,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KAAC,CAAC,GACvC,CAAC,CAAC,CAAC,CAAC;CACP,CAAC;AAEN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC;AAExD,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AAC5D,KAAK,uBAAuB,CAAC,CAAC,IAAI;KAChC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GACpC;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAC9D;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CACzD,CAAC"}
package/dist/index.cjs CHANGED
@@ -5260,10 +5260,21 @@ function frmRow(...children2) {
5260
5260
  children: children2
5261
5261
  };
5262
5262
  }
5263
+ function findBglFieldById(id, _schema) {
5264
+ for (const field of _schema) {
5265
+ if (field.id === id) return field;
5266
+ if (field.children && Number(field.children.length) > 0) {
5267
+ const child = findBglFieldById(id, field.children);
5268
+ if (child) return child;
5269
+ }
5270
+ }
5271
+ return void 0;
5272
+ }
5263
5273
  const bagelFormUtils = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
5264
5274
  __proto__: null,
5265
5275
  checkField,
5266
5276
  dateField,
5277
+ findBglFieldById,
5267
5278
  frmRow,
5268
5279
  getBaseField,
5269
5280
  numField,
@@ -19121,7 +19132,7 @@ const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
19121
19132
  };
19122
19133
  }
19123
19134
  });
19124
- const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__scopeId", "data-v-edac341b"]]);
19135
+ const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__scopeId", "data-v-5193fa33"]]);
19125
19136
  const _hoisted_1$o = { class: "primary-checkbox" };
19126
19137
  const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
19127
19138
  __name: "Checkbox",
@@ -45812,6 +45823,7 @@ const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
45812
45823
  props: /* @__PURE__ */ vue.mergeModels({
45813
45824
  label: {},
45814
45825
  id: {},
45826
+ class: {},
45815
45827
  autocomplete: { default: "on" },
45816
45828
  placeholder: { default: "Enter a phone number" },
45817
45829
  required: { type: Boolean, default: false },
@@ -46050,7 +46062,7 @@ const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
46050
46062
  }
46051
46063
  return (_ctx, _cache) => {
46052
46064
  return vue.openBlock(), vue.createElementBlock("div", {
46053
- class: vue.normalizeClass(["bagel-input", { disabled: _ctx.disabled }])
46065
+ class: vue.normalizeClass(["bagel-input", { disabled: _ctx.disabled, [props2.class || ""]: true }])
46054
46066
  }, [
46055
46067
  vue.createElementVNode("label", null, [
46056
46068
  vue.createTextVNode(vue.toDisplayString(_ctx.label) + " ", 1),
@@ -46160,7 +46172,7 @@ const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
46160
46172
  };
46161
46173
  }
46162
46174
  });
46163
- const TelInput = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__scopeId", "data-v-4c2ef2c5"]]);
46175
+ const TelInput = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__scopeId", "data-v-f94249b5"]]);
46164
46176
  /*!
46165
46177
  * Signature Pad v5.0.2 | https://github.com/szimek/signature_pad
46166
46178
  * (c) 2024 Szymon Nowak | Released under the MIT license
package/dist/index.mjs CHANGED
@@ -5258,10 +5258,21 @@ function frmRow(...children2) {
5258
5258
  children: children2
5259
5259
  };
5260
5260
  }
5261
+ function findBglFieldById(id, _schema) {
5262
+ for (const field of _schema) {
5263
+ if (field.id === id) return field;
5264
+ if (field.children && Number(field.children.length) > 0) {
5265
+ const child = findBglFieldById(id, field.children);
5266
+ if (child) return child;
5267
+ }
5268
+ }
5269
+ return void 0;
5270
+ }
5261
5271
  const bagelFormUtils = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
5262
5272
  __proto__: null,
5263
5273
  checkField,
5264
5274
  dateField,
5275
+ findBglFieldById,
5265
5276
  frmRow,
5266
5277
  getBaseField,
5267
5278
  numField,
@@ -19119,7 +19130,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
19119
19130
  };
19120
19131
  }
19121
19132
  });
19122
- const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__scopeId", "data-v-edac341b"]]);
19133
+ const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__scopeId", "data-v-5193fa33"]]);
19123
19134
  const _hoisted_1$o = { class: "primary-checkbox" };
19124
19135
  const _sfc_main$j = /* @__PURE__ */ defineComponent({
19125
19136
  __name: "Checkbox",
@@ -45810,6 +45821,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
45810
45821
  props: /* @__PURE__ */ mergeModels({
45811
45822
  label: {},
45812
45823
  id: {},
45824
+ class: {},
45813
45825
  autocomplete: { default: "on" },
45814
45826
  placeholder: { default: "Enter a phone number" },
45815
45827
  required: { type: Boolean, default: false },
@@ -46048,7 +46060,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
46048
46060
  }
46049
46061
  return (_ctx, _cache) => {
46050
46062
  return openBlock(), createElementBlock("div", {
46051
- class: normalizeClass(["bagel-input", { disabled: _ctx.disabled }])
46063
+ class: normalizeClass(["bagel-input", { disabled: _ctx.disabled, [props2.class || ""]: true }])
46052
46064
  }, [
46053
46065
  createElementVNode("label", null, [
46054
46066
  createTextVNode(toDisplayString(_ctx.label) + " ", 1),
@@ -46158,7 +46170,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
46158
46170
  };
46159
46171
  }
46160
46172
  });
46161
- const TelInput = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__scopeId", "data-v-4c2ef2c5"]]);
46173
+ const TelInput = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__scopeId", "data-v-f94249b5"]]);
46162
46174
  /*!
46163
46175
  * Signature Pad v5.0.2 | https://github.com/szimek/signature_pad
46164
46176
  * (c) 2024 Szymon Nowak | Released under the MIT license
package/dist/style.css CHANGED
@@ -1497,58 +1497,59 @@ display: block;
1497
1497
  font-size: var(--label-font-size);
1498
1498
  }
1499
1499
 
1500
- .bagel-input textarea[data-v-edac341b] {
1500
+
1501
+ .bagel-input textarea[data-v-5193fa33] {
1501
1502
  min-height: unset;
1502
1503
  font-size: var(--input-font-size);
1503
1504
  }
1504
- .bagel-input.text-input textarea[data-v-edac341b] {
1505
+ .bagel-input.text-input textarea[data-v-5193fa33] {
1505
1506
  resize: none;
1506
1507
  }
1507
- .code textarea[data-v-edac341b] {
1508
+ .code textarea[data-v-5193fa33] {
1508
1509
  font-family: 'Inconsolata', monospace;
1509
1510
  background: var(--bgl-black) !important;
1510
1511
  color: var(--bgl-white) !important;
1511
1512
  }
1512
- .code textarea[data-v-edac341b]::placeholder {
1513
+ .code textarea[data-v-5193fa33]::placeholder {
1513
1514
  color: var(--bgl-white) !important;
1514
1515
  opacity: 0.3;
1515
1516
  }
1516
- .bagel-input.small[data-v-edac341b] {
1517
+ .bagel-input.small[data-v-5193fa33] {
1517
1518
  margin-bottom: 0;
1518
1519
  height: 30px;
1519
1520
  }
1520
- .bagel-input.dense label[data-v-edac341b] {
1521
+ .bagel-input.dense label[data-v-5193fa33] {
1521
1522
  display: flex;
1522
1523
  align-items: center;
1523
1524
  gap: 0.5rem;
1524
1525
  }
1525
- .bagel-input input[data-v-edac341b]:disabled {
1526
+ .bagel-input input[data-v-5193fa33]:disabled {
1526
1527
  background: #f5f5f5;
1527
1528
  }
1528
- .bagel-input label[data-v-edac341b] {
1529
+ .bagel-input label[data-v-5193fa33] {
1529
1530
  font-size: var(--label-font-size);
1530
1531
  }
1531
- .textInputIconWrap[data-v-edac341b] {
1532
+ .textInputIconWrap[data-v-5193fa33] {
1532
1533
  position: relative;
1533
1534
  }
1534
- .textInputIconWrap .bgl_icon-font[data-v-edac341b] {
1535
+ .textInputIconWrap .bgl_icon-font[data-v-5193fa33] {
1535
1536
  position: absolute;
1536
1537
  inset-inline-end: 0.7rem;
1537
1538
  bottom: 50%;
1538
1539
  line-height: 0;
1539
1540
  color: var(--bgl-gray);
1540
1541
  }
1541
- .txtInputIconStart .iconStart[data-v-edac341b] {
1542
+ .txtInputIconStart .iconStart[data-v-5193fa33] {
1542
1543
  position: absolute;
1543
1544
  inset-inline-start: 0.7rem;
1544
1545
  top: 50%;
1545
1546
  line-height: 0;
1546
1547
  color: var(--bgl-gray);
1547
1548
  }
1548
- .txtInputIconStart textarea[data-v-edac341b] {
1549
+ .txtInputIconStart textarea[data-v-5193fa33] {
1549
1550
  padding-inline-start: 2rem;
1550
1551
  }
1551
- .bagel-input.small textarea[data-v-edac341b] {
1552
+ .bagel-input.small textarea[data-v-5193fa33] {
1552
1553
  height: 30px;
1553
1554
  }
1554
1555
 
@@ -2053,7 +2054,7 @@ p {
2053
2054
  border-radius: var(--input-border-radius);
2054
2055
  }
2055
2056
 
2056
- .tel-input[data-v-4c2ef2c5] {
2057
+ .tel-input[data-v-f94249b5] {
2057
2058
  direction: ltr;
2058
2059
  text-align: left;
2059
2060
  background: var(--input-bg);
@@ -2064,21 +2065,21 @@ p {
2064
2065
  min-width: calc(var(--input-height) * 3);
2065
2066
  width: 100%;
2066
2067
  }
2067
- .tel-input[data-v-4c2ef2c5]:focus-within {
2068
+ .tel-input[data-v-f94249b5]:focus-within {
2068
2069
  outline: none;
2069
2070
  box-shadow: inset 0 0 10px #00000012;
2070
2071
  }
2071
- .tel-input input[data-v-4c2ef2c5] {
2072
+ .tel-input input[data-v-f94249b5] {
2072
2073
  background: transparent;
2073
2074
  }
2074
- .tel-input input[data-v-4c2ef2c5]:focus-visible {
2075
+ .tel-input input[data-v-f94249b5]:focus-visible {
2075
2076
  box-shadow: none;
2076
2077
  }
2077
- .input_country-code[data-v-4c2ef2c5] {
2078
+ .input_country-code[data-v-f94249b5] {
2078
2079
  font-size: var(--input-font-size);
2079
2080
  color: var(--input-color);
2080
2081
  }
2081
- .tel-country[data-v-4c2ef2c5] {
2082
+ .tel-country[data-v-f94249b5] {
2082
2083
  font-size: var(--input-font-size);
2083
2084
  max-width: 200px;
2084
2085
  white-space: nowrap;
@@ -2087,7 +2088,7 @@ p {
2087
2088
  margin-top: 0;
2088
2089
  margin-bottom: 0;
2089
2090
  }
2090
- .tel-countryp-dropdown[data-v-4c2ef2c5] {
2091
+ .tel-countryp-dropdown[data-v-f94249b5] {
2091
2092
  direction: ltr;
2092
2093
  text-align: left;
2093
2094
  }
@@ -6309,6 +6310,11 @@ select {
6309
6310
  font-family: inherit;
6310
6311
  width: 100%;
6311
6312
  }
6313
+ .bagel-input-error input,
6314
+ .bagel-input-error button,
6315
+ .bagel-input-error textarea {
6316
+ outline: 1px solid var(--bgl-red);
6317
+ }
6312
6318
  .bagel-input {
6313
6319
  position: relative;
6314
6320
  display: flex;
@@ -6318,12 +6324,48 @@ select {
6318
6324
  width: 100%;
6319
6325
  color: var(--bgl-black);
6320
6326
  }
6327
+ .bagel-input::-webkit-input-placeholder .bagel-input label {
6328
+ display: block;
6329
+ font-size: var(--label-font-size);
6330
+ margin-bottom: 2px;
6331
+ line-height: 1.3;
6332
+ }
6333
+ .bagel-input::-moz-placeholder .bagel-input label {
6334
+ display: block;
6335
+ font-size: var(--label-font-size);
6336
+ margin-bottom: 2px;
6337
+ line-height: 1.3;
6338
+ }
6339
+ .bagel-input:-ms-input-placeholder .bagel-input label {
6340
+ display: block;
6341
+ font-size: var(--label-font-size);
6342
+ margin-bottom: 2px;
6343
+ line-height: 1.3;
6344
+ }
6345
+ .bagel-input::-ms-input-placeholder .bagel-input label {
6346
+ display: block;
6347
+ font-size: var(--label-font-size);
6348
+ margin-bottom: 2px;
6349
+ line-height: 1.3;
6350
+ }
6321
6351
  .bagel-input::placeholder .bagel-input label {
6322
6352
  display: block;
6323
6353
  font-size: var(--label-font-size);
6324
6354
  margin-bottom: 2px;
6325
6355
  line-height: 1.3;
6326
6356
  }
6357
+ .bagel-input::-webkit-input-placeholder {
6358
+ color: var(--placeholder-color);
6359
+ }
6360
+ .bagel-input::-moz-placeholder {
6361
+ color: var(--placeholder-color);
6362
+ }
6363
+ .bagel-input:-ms-input-placeholder {
6364
+ color: var(--placeholder-color);
6365
+ }
6366
+ .bagel-input::-ms-input-placeholder {
6367
+ color: var(--placeholder-color);
6368
+ }
6327
6369
  .bagel-input::placeholder {
6328
6370
  color: var(--placeholder-color);
6329
6371
  }
@@ -6348,6 +6390,18 @@ select {
6348
6390
  min-width: calc(var(--input-height) * 3);
6349
6391
  width: 100%;
6350
6392
  }
6393
+ .bagel-input input::-webkit-input-placeholder, .bagel-input textarea::-webkit-input-placeholder, .bagel-input select::-webkit-input-placeholder, .custom-select .input::-webkit-input-placeholder {
6394
+ color: var(--placeholder-color);
6395
+ }
6396
+ .bagel-input input::-moz-placeholder, .bagel-input textarea::-moz-placeholder, .bagel-input select::-moz-placeholder, .custom-select .input::-moz-placeholder {
6397
+ color: var(--placeholder-color);
6398
+ }
6399
+ .bagel-input input:-ms-input-placeholder, .bagel-input textarea:-ms-input-placeholder, .bagel-input select:-ms-input-placeholder, .custom-select .input:-ms-input-placeholder {
6400
+ color: var(--placeholder-color);
6401
+ }
6402
+ .bagel-input input::-ms-input-placeholder, .bagel-input textarea::-ms-input-placeholder, .bagel-input select::-ms-input-placeholder, .custom-select .input::-ms-input-placeholder {
6403
+ color: var(--placeholder-color);
6404
+ }
6351
6405
  .bagel-input input::placeholder,
6352
6406
  .bagel-input textarea::placeholder,
6353
6407
  .bagel-input select::placeholder,
@@ -6360,10 +6414,12 @@ select {
6360
6414
  align-items: center;
6361
6415
  }
6362
6416
  .bagel-input.search-wrap input {
6363
- padding-inline-end: 2rem;
6417
+ -webkit-padding-end: 2rem;
6418
+ padding-inline-end: 2rem;
6364
6419
  }
6365
6420
  .bagel-input.search-wrap .bgl_icon-font {
6366
- margin-inline-start: -1.75rem;
6421
+ -webkit-margin-start: -1.75rem;
6422
+ margin-inline-start: -1.75rem;
6367
6423
  }
6368
6424
  .bagel-input select {
6369
6425
  height: var(--input-height);
@@ -6378,6 +6434,8 @@ select {
6378
6434
  }
6379
6435
  .bagel-input input[type="radio"] {
6380
6436
  padding: 0;
6437
+ width: -webkit-fit-content;
6438
+ width: -moz-fit-content;
6381
6439
  width: fit-content;
6382
6440
  }
6383
6441
  .bagel-input:focus-within label {
@@ -6481,11 +6539,13 @@ select {
6481
6539
  .bagel-input input[type="color"]::-webkit-color-swatch {
6482
6540
  border-radius: var(--input-border-radius);
6483
6541
  border: none;
6542
+ -webkit-transition: box-shadow 200ms ease;
6484
6543
  transition: box-shadow 200ms ease;
6485
6544
  }
6486
6545
  .bagel-input input[type="color"]::-moz-color-swatch {
6487
6546
  border-radius: var(--input-border-radius);
6488
6547
  border: none;
6548
+ -moz-transition: box-shadow 200ms ease;
6489
6549
  transition: box-shadow 200ms ease;
6490
6550
  }
6491
6551
  .bagel-input input[type="color"]::-webkit-color-swatch:hover {
package/dist/utils/BagelFormUtils.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { Field, Option } from '..';
1
+ import { BglFormSchemaT, Field, Option } from '..';
2
2
  interface InputOptions {
3
3
  required?: boolean;
4
4
  placeholder?: string;
@@ -43,5 +43,6 @@ export declare function frmRow(...children: Field[]): {
43
43
  class: string;
44
44
  children: Field[];
45
45
  };
46
+ export declare function findBglFieldById(id: string, _schema: BglFormSchemaT): Field | undefined;
46
47
  export {};
47
48
  //# sourceMappingURL=BagelFormUtils.d.ts.map
package/dist/utils/BagelFormUtils.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"BagelFormUtils.d.ts","sourceRoot":"","sources":["../../src/utils/BagelFormUtils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAElD,UAAU,YAAY;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,KAAK,WAAW,GAAG,YAAY,CAAA;AAE/B,UAAU,gBAAiB,SAAQ,YAAY;IAC9C,IAAI,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,OAAO,CAAA;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,SAAS,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,UAAU,gBAAiB,SAAQ,YAAY;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,WAAW,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,UAAU,eAAgB,SAAQ,YAAY;IAC7C,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;CACb;AAED,KAAK,eAAe,GAAG,YAAY,CAAA;AAEnC,wBAAgB,YAAY,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,MAAM,EAAE,WAAW,GAAE,MAAM,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAM,EAAE,IAAI,GAAE,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAM,GAAG,KAAK,CAAC,CAAC,CAAC,CAIjI;AAED,wBAAgB,QAAQ,CACvB,EAAE,EAAE,MAAM,EACV,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,eAAe;;;;;;;;EAWzB;AAED,wBAAgB,QAAQ,CACvB,EAAE,EAAE,MAAM,EACV,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,gBAAgB,GACxB,KAAK,CAgBP;AAED,wBAAgB,SAAS,CACxB,EAAE,EAAE,MAAM,EACV,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,MAAM,MAAM,EAAE,CAAC,EACrC,MAAM,CAAC,EAAE,gBAAgB,GACvB,KAAK,CAgBP;AAED,wBAAgB,UAAU,CACzB,EAAE,EAAE,MAAM,EACV,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,eAAe,GACvB,KAAK,CAQP;AAED,wBAAgB,SAAS,CACxB,EAAE,EAAE,MAAM,EACV,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,WAAW,GACnB,KAAK,CAaP;AAED,wBAAgB,QAAQ,CACvB,EAAE,EAAE,MAAM,EACV,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,eAAe,GACvB,KAAK,CAoBP;AAED,wBAAgB,MAAM,CAAC,GAAG,QAAQ,EAAE,KAAK,EAAE;;;;EAM1C"}
1
+ {"version":3,"file":"BagelFormUtils.d.ts","sourceRoot":"","sources":["../../src/utils/BagelFormUtils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAElE,UAAU,YAAY;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,KAAK,WAAW,GAAG,YAAY,CAAA;AAE/B,UAAU,gBAAiB,SAAQ,YAAY;IAC9C,IAAI,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,OAAO,CAAA;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,SAAS,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,UAAU,gBAAiB,SAAQ,YAAY;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,WAAW,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,UAAU,eAAgB,SAAQ,YAAY;IAC7C,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;CACb;AAED,KAAK,eAAe,GAAG,YAAY,CAAA;AAEnC,wBAAgB,YAAY,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,MAAM,EAAE,WAAW,GAAE,MAAM,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAM,EAAE,IAAI,GAAE,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAM,GAAG,KAAK,CAAC,CAAC,CAAC,CAIjI;AAED,wBAAgB,QAAQ,CACvB,EAAE,EAAE,MAAM,EACV,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,eAAe;;;;;;;;EAWzB;AAED,wBAAgB,QAAQ,CACvB,EAAE,EAAE,MAAM,EACV,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,gBAAgB,GACxB,KAAK,CAgBP;AAED,wBAAgB,SAAS,CACxB,EAAE,EAAE,MAAM,EACV,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,MAAM,MAAM,EAAE,CAAC,EACrC,MAAM,CAAC,EAAE,gBAAgB,GACvB,KAAK,CAgBP;AAED,wBAAgB,UAAU,CACzB,EAAE,EAAE,MAAM,EACV,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,eAAe,GACvB,KAAK,CAQP;AAED,wBAAgB,SAAS,CACxB,EAAE,EAAE,MAAM,EACV,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,WAAW,GACnB,KAAK,CAaP;AAED,wBAAgB,QAAQ,CACvB,EAAE,EAAE,MAAM,EACV,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,eAAe,GACvB,KAAK,CAoBP;AAED,wBAAgB,MAAM,CAAC,GAAG,QAAQ,EAAE,KAAK,EAAE;;;;EAM1C;AAED,wBAAgB,gBAAgB,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,GAAG,KAAK,GAAG,SAAS,CASvF"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@bagelink/vue",
3
3
  "type": "module",
4
- "version": "0.0.692",
4
+ "version": "0.0.694",
5
5
  "description": "Bagel core sdk packages",
6
6
  "author": {
7
7
  "name": "Neveh Allon",
package/src/components/form/inputs/TelInput.vue CHANGED
@@ -16,6 +16,31 @@ import {
16
16
  } from 'libphonenumber-js'
17
17
  import axios from 'axios'
18
18
 
19
+ export interface Props {
20
+ label?: string
21
+ id?: string
22
+ class?: string
23
+ autocomplete?: 'on' | 'off' | 'tel'
24
+ placeholder?: string
25
+ required?: boolean
26
+ modelValue: string
27
+ allCountries?: Country[]
28
+ autoFormat?: boolean
29
+ customValidate?: boolean | RegExp
30
+ defaultCountry?: string | number
31
+ disabled?: boolean
32
+ searchable?: boolean
33
+ autoDefaultCountry?: boolean
34
+ inputOptions?: Partial<typeof defaultInputOptions>
35
+ dropdownOptions?: Partial<typeof defaultDropdownOptions>
36
+ excludeCountries?: string[]
37
+ mode?: NumberFormat
38
+ onlyCountries?: string[]
39
+ preferredCountries?: string[]
40
+ parseArg?: { extract?: boolean }
41
+ debounceDelay?: number
42
+ }
43
+
19
44
  const props = withDefaults(defineProps<Props>(), {
20
45
  modelValue: '',
21
46
  autocomplete: 'on',
@@ -80,30 +105,6 @@ const defaultInputOptions = {
80
105
  'placeholder': 'Enter a phone number',
81
106
  }
82
107
 
83
- interface Props {
84
- label?: string
85
- id?: string
86
- autocomplete?: 'on' | 'off' | 'tel'
87
- placeholder?: string
88
- required?: boolean
89
- modelValue: string
90
- allCountries?: Country[]
91
- autoFormat?: boolean
92
- customValidate?: boolean | RegExp
93
- defaultCountry?: string | number
94
- disabled?: boolean
95
- searchable?: boolean
96
- autoDefaultCountry?: boolean
97
- inputOptions?: Partial<typeof defaultInputOptions>
98
- dropdownOptions?: Partial<typeof defaultDropdownOptions>
99
- excludeCountries?: string[]
100
- mode?: NumberFormat
101
- onlyCountries?: string[]
102
- preferredCountries?: string[]
103
- parseArg?: { extract?: boolean }
104
- debounceDelay?: number
105
- }
106
-
107
108
  const computedDropDownOptions = $computed(() => ({
108
109
  ...defaultDropdownOptions,
109
110
  ...props.dropdownOptions,
@@ -309,7 +310,7 @@ function handleInput(e: KeyboardEvent) {
309
310
  <template>
310
311
  <div
311
312
  class="bagel-input"
312
- :class="{ disabled }"
313
+ :class="{ disabled, [props.class || '']: true }"
313
314
  >
314
315
  <label>
315
316
  {{ label }}
package/src/components/form/inputs/TextInput.vue CHANGED
@@ -144,6 +144,7 @@ onMounted(() => {
144
144
  .bagel-input label {
145
145
  font-size: var(--label-font-size);
146
146
  }
147
+
147
148
  </style>
148
149
 
149
150
  <style scoped>
package/src/styles/inputs.css CHANGED
@@ -5,6 +5,13 @@ select {
5
5
  width: 100%;
6
6
  }
7
7
 
8
+
9
+ .bagel-input-error input,
10
+ .bagel-input-error button,
11
+ .bagel-input-error textarea {
12
+ outline: 1px solid var(--bgl-red);
13
+ }
14
+
8
15
  .bagel-input {
9
16
  position: relative;
10
17
  display: flex;
@@ -15,6 +22,34 @@ select {
15
22
  color: var(--bgl-black);
16
23
  }
17
24
 
25
+ .bagel-input::-webkit-input-placeholder .bagel-input label {
26
+ display: block;
27
+ font-size: var(--label-font-size);
28
+ margin-bottom: 2px;
29
+ line-height: 1.3;
30
+ }
31
+
32
+ .bagel-input::-moz-placeholder .bagel-input label {
33
+ display: block;
34
+ font-size: var(--label-font-size);
35
+ margin-bottom: 2px;
36
+ line-height: 1.3;
37
+ }
38
+
39
+ .bagel-input:-ms-input-placeholder .bagel-input label {
40
+ display: block;
41
+ font-size: var(--label-font-size);
42
+ margin-bottom: 2px;
43
+ line-height: 1.3;
44
+ }
45
+
46
+ .bagel-input::-ms-input-placeholder .bagel-input label {
47
+ display: block;
48
+ font-size: var(--label-font-size);
49
+ margin-bottom: 2px;
50
+ line-height: 1.3;
51
+ }
52
+
18
53
  .bagel-input::placeholder .bagel-input label {
19
54
  display: block;
20
55
  font-size: var(--label-font-size);
@@ -22,6 +57,22 @@ select {
22
57
  line-height: 1.3;
23
58
  }
24
59
 
60
+ .bagel-input::-webkit-input-placeholder {
61
+ color: var(--placeholder-color);
62
+ }
63
+
64
+ .bagel-input::-moz-placeholder {
65
+ color: var(--placeholder-color);
66
+ }
67
+
68
+ .bagel-input:-ms-input-placeholder {
69
+ color: var(--placeholder-color);
70
+ }
71
+
72
+ .bagel-input::-ms-input-placeholder {
73
+ color: var(--placeholder-color);
74
+ }
75
+
25
76
  .bagel-input::placeholder {
26
77
  color: var(--placeholder-color);
27
78
  }
@@ -51,6 +102,26 @@ select {
51
102
  }
52
103
 
53
104
 
105
+ .bagel-input input::-webkit-input-placeholder, .bagel-input textarea::-webkit-input-placeholder, .bagel-input select::-webkit-input-placeholder, .custom-select .input::-webkit-input-placeholder {
106
+ color: var(--placeholder-color);
107
+ }
108
+
109
+
110
+ .bagel-input input::-moz-placeholder, .bagel-input textarea::-moz-placeholder, .bagel-input select::-moz-placeholder, .custom-select .input::-moz-placeholder {
111
+ color: var(--placeholder-color);
112
+ }
113
+
114
+
115
+ .bagel-input input:-ms-input-placeholder, .bagel-input textarea:-ms-input-placeholder, .bagel-input select:-ms-input-placeholder, .custom-select .input:-ms-input-placeholder {
116
+ color: var(--placeholder-color);
117
+ }
118
+
119
+
120
+ .bagel-input input::-ms-input-placeholder, .bagel-input textarea::-ms-input-placeholder, .bagel-input select::-ms-input-placeholder, .custom-select .input::-ms-input-placeholder {
121
+ color: var(--placeholder-color);
122
+ }
123
+
124
+
54
125
  .bagel-input input::placeholder,
55
126
  .bagel-input textarea::placeholder,
56
127
  .bagel-input select::placeholder,
@@ -65,11 +136,13 @@ select {
65
136
  }
66
137
 
67
138
  .bagel-input.search-wrap input {
68
- padding-inline-end: 2rem;
139
+ -webkit-padding-end: 2rem;
140
+ padding-inline-end: 2rem;
69
141
  }
70
142
 
71
143
  .bagel-input.search-wrap .bgl_icon-font {
72
- margin-inline-start: -1.75rem;
144
+ -webkit-margin-start: -1.75rem;
145
+ margin-inline-start: -1.75rem;
73
146
  }
74
147
 
75
148
  .bagel-input select {
@@ -88,6 +161,8 @@ select {
88
161
 
89
162
  .bagel-input input[type="radio"] {
90
163
  padding: 0;
164
+ width: -webkit-fit-content;
165
+ width: -moz-fit-content;
91
166
  width: fit-content;
92
167
  }
93
168
 
@@ -209,12 +284,14 @@ select {
209
284
  .bagel-input input[type="color"]::-webkit-color-swatch {
210
285
  border-radius: var(--input-border-radius);
211
286
  border: none;
287
+ -webkit-transition: box-shadow 200ms ease;
212
288
  transition: box-shadow 200ms ease;
213
289
  }
214
290
 
215
291
  .bagel-input input[type="color"]::-moz-color-swatch {
216
292
  border-radius: var(--input-border-radius);
217
293
  border: none;
294
+ -moz-transition: box-shadow 200ms ease;
218
295
  transition: box-shadow 200ms ease;
219
296
  }
220
297
 
package/src/utils/BagelFormUtils.ts CHANGED
@@ -1,4 +1,4 @@
1
- import type { Field, Option } from '@bagelink/vue'
1
+ import type { BglFormSchemaT, Field, Option } from '@bagelink/vue'
2
2
 
3
3
  interface InputOptions {
4
4
  required?: boolean
@@ -163,3 +163,34 @@ export function frmRow(...children: Field[]) {
163
163
  children,
164
164
  }
165
165
  }
166
+
167
+ export function findBglFieldById(id: string, _schema: BglFormSchemaT): Field | undefined {
168
+ for (const field of _schema) {
169
+ if (field.id === id) return field
170
+ if (field.children && Number(field.children.length) > 0) {
171
+ const child = findBglFieldById(id, field.children)
172
+ if (child) return child
173
+ }
174
+ }
175
+ return undefined
176
+ }
177
+
178
+ // export function updateBagelSchemaWithErrorResponse<T>(
179
+ // schema: BglFormSchemaT<T>,
180
+ // invalidFieldId: Record<string, string[]>,
181
+ // ) {
182
+ // return schema.map((f) => {
183
+ // if (f.id === invalidFieldId) {
184
+ // f.class = 'bagel-input-error'
185
+ // }
186
+ // if (f.id === undefined && f.children) {
187
+ // f.children = f.children.map((c) => {
188
+ // if (c.id === invalidFieldId) {
189
+ // c.class = 'bagel-input-error'
190
+ // }
191
+ // return c
192
+ // })
193
+ // }
194
+ // return f
195
+ // })
196
+ // }