@bagelink/vue 0.0.192 → 0.0.196

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 (15) hide show
  1. package/dist/components/Btn.vue.d.ts +5 -6
  2. package/dist/components/Btn.vue.d.ts.map +1 -1
  3. package/dist/index.cjs +18 -13
  4. package/dist/index.mjs +18 -13
  5. package/dist/style.css +57 -57
  6. package/dist/types/BtnOptions.d.ts +3 -2
  7. package/dist/types/BtnOptions.d.ts.map +1 -1
  8. package/dist/types/index.d.ts +1 -0
  9. package/dist/types/index.d.ts.map +1 -1
  10. package/package.json +1 -1
  11. package/src/components/Btn.vue +20 -16
  12. package/src/components/form/inputs/TextInput.vue +10 -7
  13. package/src/styles/layout.css +1 -1
  14. package/src/types/BtnOptions.ts +4 -2
  15. package/src/types/index.ts +2 -0
package/dist/components/Btn.vue.d.ts CHANGED
@@ -1,11 +1,10 @@
1
- import type { MaterialIcons } from '..';
2
- type ThemeTypes = 'light' | 'red' | 'gray' | 'gray-light' | 'black' | 'green';
1
+ import type { MaterialIcons, ThemeType } from '..';
3
2
  declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
4
3
  disabled?: boolean | undefined;
5
4
  icon?: MaterialIcons | undefined;
6
5
  'icon.end'?: MaterialIcons | undefined;
7
- color?: ThemeTypes | undefined;
8
- theme?: ThemeTypes | undefined;
6
+ color?: ThemeType | undefined;
7
+ theme?: ThemeType | undefined;
9
8
  flat?: boolean | undefined;
10
9
  border?: boolean | undefined;
11
10
  thin?: boolean | undefined;
@@ -28,8 +27,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
28
27
  disabled?: boolean | undefined;
29
28
  icon?: MaterialIcons | undefined;
30
29
  'icon.end'?: MaterialIcons | undefined;
31
- color?: ThemeTypes | undefined;
32
- theme?: ThemeTypes | undefined;
30
+ color?: ThemeType | undefined;
31
+ theme?: ThemeType | undefined;
33
32
  flat?: boolean | undefined;
34
33
  border?: boolean | undefined;
35
34
  thin?: boolean | undefined;
package/dist/components/Btn.vue.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Btn.vue.d.ts","sourceRoot":"","sources":["../../src/components/Btn.vue"],"names":[],"mappings":"AAuCA;AAOA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAGnD,KAAK,UAAU,GAAG,OAAO,GAAG,KAAK,GAAG,MAAM,GAAG,YAAY,GAAG,OAAO,GAAG,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6S9E,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,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AACN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC;AACxD,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}
1
+ {"version":3,"file":"Btn.vue.d.ts","sourceRoot":"","sources":["../../src/components/Btn.vue"],"names":[],"mappings":"AAuCA;AAOA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoT9D,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,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AACN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC;AACxD,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
@@ -14686,31 +14686,36 @@ const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
14686
14686
  },
14687
14687
  setup(__props) {
14688
14688
  vue.useCssVars((_ctx) => ({
14689
- "7c9f0211": computedBackgroundColor.value,
14690
- "6c14eca8": cumputedTextColor.value
14689
+ "7d77cfe0": computedBackgroundColor.value,
14690
+ "44b26a2a": cumputedTextColor.value
14691
14691
  }));
14692
14692
  const slots = vue.useSlots();
14693
14693
  const props2 = __props;
14694
14694
  const computedTheme = vue.computed(() => (props2 == null ? void 0 : props2.color) || (props2 == null ? void 0 : props2.theme));
14695
- const defaultColors = { backgroundColor: "var(--bgl-primary)", color: "var(--bgl-white)" };
14695
+ const computedDefaultColors = vue.computed(
14696
+ () => ({
14697
+ backgroundColor: "var(--bgl-primary)",
14698
+ color: props2.flat ? "var(--bgl-black)" : "var(--bgl-white)"
14699
+ })
14700
+ );
14696
14701
  const themes = {
14697
- red: { ...defaultColors, backgroundColor: "var(--bgl-red)" },
14698
- black: { ...defaultColors, backgroundColor: "var(--bgl-black)" },
14699
- green: { ...defaultColors, backgroundColor: "var(--bgl-green)", color: "var(--bgl-white)" },
14700
- gray: { ...defaultColors, backgroundColor: "var(--bgl-gray-light)", color: "var(--bgl-black)" },
14701
- light: { ...defaultColors, backgroundColor: "var(--bgl-primary-light)", color: "var(--bgl-primary)" },
14702
- "gray-light": { ...defaultColors, backgroundColor: "var(--bgl-gray-light)", color: "var(--bgl-gray)" }
14702
+ red: { ...computedDefaultColors.value, backgroundColor: "var(--bgl-red)" },
14703
+ black: { ...computedDefaultColors.value, backgroundColor: "var(--bgl-black)" },
14704
+ green: { ...computedDefaultColors.value, backgroundColor: "var(--bgl-green)", color: "var(--bgl-white)" },
14705
+ gray: { ...computedDefaultColors.value, backgroundColor: "var(--bgl-gray-light)", color: "var(--bgl-black)" },
14706
+ light: { ...computedDefaultColors.value, backgroundColor: "var(--bgl-primary-light)", color: "var(--bgl-primary)" },
14707
+ "gray-light": { ...computedDefaultColors.value, backgroundColor: "var(--bgl-gray-light)", color: "var(--bgl-gray)" }
14703
14708
  };
14704
14709
  const cumputedTextColor = vue.computed(
14705
14710
  () => {
14706
14711
  var _a2;
14707
- return ((_a2 = themes == null ? void 0 : themes[computedTheme.value]) == null ? void 0 : _a2.color) || defaultColors.color;
14712
+ return ((_a2 = themes == null ? void 0 : themes[computedTheme.value]) == null ? void 0 : _a2.color) || computedDefaultColors.value.color;
14708
14713
  }
14709
14714
  );
14710
14715
  const computedBackgroundColor = vue.computed(
14711
14716
  () => {
14712
14717
  var _a2;
14713
- return ((_a2 = themes == null ? void 0 : themes[computedTheme.value]) == null ? void 0 : _a2.backgroundColor) || defaultColors.backgroundColor;
14718
+ return ((_a2 = themes == null ? void 0 : themes[computedTheme.value]) == null ? void 0 : _a2.backgroundColor) || computedDefaultColors.value.backgroundColor;
14714
14719
  }
14715
14720
  );
14716
14721
  return (_ctx, _cache) => {
@@ -14756,7 +14761,7 @@ const _export_sfc = (sfc, props2) => {
14756
14761
  }
14757
14762
  return target;
14758
14763
  };
14759
- const Btn = /* @__PURE__ */ _export_sfc(_sfc_main$R, [["__scopeId", "data-v-4ac414aa"]]);
14764
+ const Btn = /* @__PURE__ */ _export_sfc(_sfc_main$R, [["__scopeId", "data-v-86c248d5"]]);
14760
14765
  const _hoisted_1$X = { class: "tool-bar" };
14761
14766
  const _hoisted_2$P = { class: "modal-title" };
14762
14767
  const _hoisted_3$I = { class: "modal-footer mt-3" };
@@ -22141,7 +22146,7 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
22141
22146
  };
22142
22147
  }
22143
22148
  });
22144
- const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-25258ba1"]]);
22149
+ const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-1502ca60"]]);
22145
22150
  const _hoisted_1$i = ["title"];
22146
22151
  const _hoisted_2$f = { key: 0 };
22147
22152
  const _hoisted_3$d = {
package/dist/index.mjs CHANGED
@@ -14684,31 +14684,36 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
14684
14684
  },
14685
14685
  setup(__props) {
14686
14686
  useCssVars((_ctx) => ({
14687
- "7c9f0211": computedBackgroundColor.value,
14688
- "6c14eca8": cumputedTextColor.value
14687
+ "7d77cfe0": computedBackgroundColor.value,
14688
+ "44b26a2a": cumputedTextColor.value
14689
14689
  }));
14690
14690
  const slots = useSlots();
14691
14691
  const props2 = __props;
14692
14692
  const computedTheme = computed(() => (props2 == null ? void 0 : props2.color) || (props2 == null ? void 0 : props2.theme));
14693
- const defaultColors = { backgroundColor: "var(--bgl-primary)", color: "var(--bgl-white)" };
14693
+ const computedDefaultColors = computed(
14694
+ () => ({
14695
+ backgroundColor: "var(--bgl-primary)",
14696
+ color: props2.flat ? "var(--bgl-black)" : "var(--bgl-white)"
14697
+ })
14698
+ );
14694
14699
  const themes = {
14695
- red: { ...defaultColors, backgroundColor: "var(--bgl-red)" },
14696
- black: { ...defaultColors, backgroundColor: "var(--bgl-black)" },
14697
- green: { ...defaultColors, backgroundColor: "var(--bgl-green)", color: "var(--bgl-white)" },
14698
- gray: { ...defaultColors, backgroundColor: "var(--bgl-gray-light)", color: "var(--bgl-black)" },
14699
- light: { ...defaultColors, backgroundColor: "var(--bgl-primary-light)", color: "var(--bgl-primary)" },
14700
- "gray-light": { ...defaultColors, backgroundColor: "var(--bgl-gray-light)", color: "var(--bgl-gray)" }
14700
+ red: { ...computedDefaultColors.value, backgroundColor: "var(--bgl-red)" },
14701
+ black: { ...computedDefaultColors.value, backgroundColor: "var(--bgl-black)" },
14702
+ green: { ...computedDefaultColors.value, backgroundColor: "var(--bgl-green)", color: "var(--bgl-white)" },
14703
+ gray: { ...computedDefaultColors.value, backgroundColor: "var(--bgl-gray-light)", color: "var(--bgl-black)" },
14704
+ light: { ...computedDefaultColors.value, backgroundColor: "var(--bgl-primary-light)", color: "var(--bgl-primary)" },
14705
+ "gray-light": { ...computedDefaultColors.value, backgroundColor: "var(--bgl-gray-light)", color: "var(--bgl-gray)" }
14701
14706
  };
14702
14707
  const cumputedTextColor = computed(
14703
14708
  () => {
14704
14709
  var _a2;
14705
- return ((_a2 = themes == null ? void 0 : themes[computedTheme.value]) == null ? void 0 : _a2.color) || defaultColors.color;
14710
+ return ((_a2 = themes == null ? void 0 : themes[computedTheme.value]) == null ? void 0 : _a2.color) || computedDefaultColors.value.color;
14706
14711
  }
14707
14712
  );
14708
14713
  const computedBackgroundColor = computed(
14709
14714
  () => {
14710
14715
  var _a2;
14711
- return ((_a2 = themes == null ? void 0 : themes[computedTheme.value]) == null ? void 0 : _a2.backgroundColor) || defaultColors.backgroundColor;
14716
+ return ((_a2 = themes == null ? void 0 : themes[computedTheme.value]) == null ? void 0 : _a2.backgroundColor) || computedDefaultColors.value.backgroundColor;
14712
14717
  }
14713
14718
  );
14714
14719
  return (_ctx, _cache) => {
@@ -14754,7 +14759,7 @@ const _export_sfc = (sfc, props2) => {
14754
14759
  }
14755
14760
  return target;
14756
14761
  };
14757
- const Btn = /* @__PURE__ */ _export_sfc(_sfc_main$R, [["__scopeId", "data-v-4ac414aa"]]);
14762
+ const Btn = /* @__PURE__ */ _export_sfc(_sfc_main$R, [["__scopeId", "data-v-86c248d5"]]);
14758
14763
  const _hoisted_1$X = { class: "tool-bar" };
14759
14764
  const _hoisted_2$P = { class: "modal-title" };
14760
14765
  const _hoisted_3$I = { class: "modal-footer mt-3" };
@@ -22139,7 +22144,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
22139
22144
  };
22140
22145
  }
22141
22146
  });
22142
- const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-25258ba1"]]);
22147
+ const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-1502ca60"]]);
22143
22148
  const _hoisted_1$i = ["title"];
22144
22149
  const _hoisted_2$f = { key: 0 };
22145
22150
  const _hoisted_3$d = {
package/dist/style.css CHANGED
@@ -306,16 +306,16 @@
306
306
  }
307
307
  }
308
308
 
309
- .loading[data-v-4ac414aa] {
309
+ .loading[data-v-86c248d5] {
310
310
  border: 1px solid var(--bgl-white);
311
311
  border-bottom: 2px solid var(--bgl-white);
312
- animation: spin-4ac414aa 1s linear infinite;
312
+ animation: spin-86c248d5 1s linear infinite;
313
313
  border-radius: 100px;
314
314
  width: 1rem;
315
315
  height: 1rem;
316
316
  margin: auto;
317
317
  }
318
- @keyframes spin-4ac414aa {
318
+ @keyframes spin-86c248d5 {
319
319
  0% {
320
320
  transform: rotate(0deg);
321
321
  }
@@ -323,7 +323,7 @@
323
323
  transform: rotate(360deg);
324
324
  }
325
325
  }
326
- .btn-icon[data-v-4ac414aa] {
326
+ .btn-icon[data-v-86c248d5] {
327
327
  height: var(--btn-height);
328
328
  width: var(--btn-height);
329
329
  border-radius: 100%;
@@ -333,7 +333,7 @@
333
333
  flex-shrink: 0;
334
334
  transition: var(--bgl-transition);
335
335
  }
336
- .btn[data-v-4ac414aa] {
336
+ .btn[data-v-86c248d5] {
337
337
  background: var(--bgl-primary);
338
338
  color: var(--bgl-white);
339
339
  padding-left: var(--btn-padding);
@@ -341,93 +341,93 @@
341
341
  transition: var(--bgl-transition);
342
342
  text-decoration: none;
343
343
  }
344
- .btn[disabled="true"][data-v-4ac414aa] {
344
+ .btn[disabled="true"][data-v-86c248d5] {
345
345
  opacity: 0.5;
346
346
  cursor: not-allowed;
347
347
  }
348
- .btn-flex[data-v-4ac414aa] {
348
+ .btn-flex[data-v-86c248d5] {
349
349
  display: flex;
350
350
  align-items: center;
351
351
  gap: 0.5rem;
352
352
  justify-content: center;
353
353
  }
354
- .btn .icon-font[data-v-4ac414aa] {
354
+ .btn .icon-font[data-v-86c248d5] {
355
355
  font-size: calc(var(--input-font-size) * 1.3);
356
356
  }
357
- .btn[data-v-4ac414aa]:hover,
358
- .btn-icon[data-v-4ac414aa]:hover {
357
+ .btn[data-v-86c248d5]:hover,
358
+ .btn-icon[data-v-86c248d5]:hover {
359
359
  filter: var(--bgl-hover-filter);
360
360
  }
361
- .btn[data-v-4ac414aa]:active,
362
- .btn-icon[data-v-4ac414aa]:active {
361
+ .btn[data-v-86c248d5]:active,
362
+ .btn-icon[data-v-86c248d5]:active {
363
363
  filter: var(--bgl-active-filter);
364
364
  }
365
- .btn[data-v-4ac414aa],
366
- .btn-icon[data-v-4ac414aa] {
367
- background-color: var(--7c9f0211);
368
- color: var(--6c14eca8);
365
+ .btn[data-v-86c248d5],
366
+ .btn-icon[data-v-86c248d5] {
367
+ background-color: var(--7d77cfe0);
368
+ color: var(--44b26a2a);
369
369
  }
370
- .btn.btn-txt[data-v-4ac414aa] {
370
+ .btn.btn-txt[data-v-86c248d5] {
371
371
  color: var(--bgl-primary);
372
372
  padding-left: var(--btn-padding);
373
373
  padding-right: var(--btn-padding);
374
374
  background: transparent;
375
375
  }
376
- .btn-icon.btn-txt[data-v-4ac414aa] {
376
+ .btn-icon.btn-txt[data-v-86c248d5] {
377
377
  color: var(--bgl-primary);
378
378
  background: transparent;
379
379
  }
380
- .btn.btn-txt[data-v-4ac414aa]:hover,
381
- .btn-icon.btn-txt[data-v-4ac414aa]:hover {
380
+ .btn.btn-txt[data-v-86c248d5]:hover,
381
+ .btn-icon.btn-txt[data-v-86c248d5]:hover {
382
382
  filter: var(--bgl-active-filter);
383
383
  }
384
- .btn.btn-txt[data-v-4ac414aa]:active,
385
- .btn-icon.btn-txt[data-v-4ac414aa]:active {
384
+ .btn.btn-txt[data-v-86c248d5]:active,
385
+ .btn-icon.btn-txt[data-v-86c248d5]:active {
386
386
  background: var(--bgl-white);
387
387
  filter: var(--bgl-hover-filter);
388
388
  }
389
- .btn.btn-txt.red[data-v-4ac414aa],
390
- .btn-icon.btn-txt.red[data-v-4ac414aa] {
389
+ .btn.btn-txt.red[data-v-86c248d5],
390
+ .btn-icon.btn-txt.red[data-v-86c248d5] {
391
391
  color: var(--bgl-red);
392
392
  }
393
- .btn.btn-txt.light[data-v-4ac414aa],
394
- .btn-icon.btn-txt.light[data-v-4ac414aa] {
393
+ .btn.btn-txt.light[data-v-86c248d5],
394
+ .btn-icon.btn-txt.light[data-v-86c248d5] {
395
395
  color: var(--bgl-primary-tint);
396
396
  }
397
- .btn.btn-txt.black[data-v-4ac414aa],
398
- .btn-icon.btn-txt.black[data-v-4ac414aa] {
397
+ .btn.btn-txt.black[data-v-86c248d5],
398
+ .btn-icon.btn-txt.black[data-v-86c248d5] {
399
399
  color: var(--bgl-black);
400
400
  }
401
- .btn.btn-txt.gray[data-v-4ac414aa],
402
- .btn-icon.btn-txt.gray[data-v-4ac414aa] {
401
+ .btn.btn-txt.gray[data-v-86c248d5],
402
+ .btn-icon.btn-txt.gray[data-v-86c248d5] {
403
403
  color: var(--bgl-gray);
404
404
  }
405
- .btn.thin[data-v-4ac414aa] {
405
+ .btn.thin[data-v-86c248d5] {
406
406
  padding-left: calc(var(--btn-padding) / 2);
407
407
  padding-right: calc(var(--btn-padding) / 2);
408
408
  }
409
- .btn.round[data-v-4ac414aa] {
409
+ .btn.round[data-v-86c248d5] {
410
410
  border-radius: calc(var(--btn-border-radius) * 2);
411
411
  }
412
- .btn-icon.thin[data-v-4ac414aa] {
412
+ .btn-icon.thin[data-v-86c248d5] {
413
413
  height: calc(var(--btn-height) / 1.5);
414
414
  width: calc(var(--btn-height) / 1.5);
415
415
  line-height: 1;
416
416
  }
417
- [dir="rtl"] .icon-font[data-v-4ac414aa] {
417
+ [dir="rtl"] .icon-font[data-v-86c248d5] {
418
418
  transform: rotateY(180deg);
419
419
  }
420
- .btn-border[data-v-4ac414aa] {
421
- outline: 1px solid var(--7c9f0211);
422
- color: var(--7c9f0211);
420
+ .btn-border[data-v-86c248d5] {
421
+ outline: 1px solid var(--7d77cfe0);
422
+ color: var(--7d77cfe0);
423
423
  background: var(--bgl-white);
424
424
  }
425
- .btn-border[data-v-4ac414aa]:hover {
426
- color: var(--6c14eca8);
427
- background: var(--7c9f0211);
425
+ .btn-border[data-v-86c248d5]:hover {
426
+ color: var(--44b26a2a);
427
+ background: var(--7d77cfe0);
428
428
  filter: brightness(100%);
429
429
  }
430
- .btn-border[data-v-4ac414aa]:active {
430
+ .btn-border[data-v-86c248d5]:active {
431
431
  filter: brightness(80%);
432
432
  }
433
433
  .bg-dark {
@@ -2174,47 +2174,47 @@ input[type='email'][data-v-ed81a514] {
2174
2174
  /* width: auto; */
2175
2175
  }
2176
2176
 
2177
- .bagel-input input[disabled][data-v-25258ba1] {
2177
+ .bagel-input input[disabled][data-v-1502ca60] {
2178
2178
  background: none;
2179
2179
  }
2180
- .bagel-input.toggleEdit[data-v-25258ba1]:hover {
2180
+ .bagel-input.toggleEdit[data-v-1502ca60]:hover {
2181
2181
  background-color: var(--input-bg);
2182
2182
  }
2183
- .bagel-input.small[data-v-25258ba1] {
2183
+ .bagel-input.small[data-v-1502ca60] {
2184
2184
  margin-bottom: 0;
2185
2185
  height: 30px;
2186
2186
  }
2187
- .toggleEditBtn[data-v-25258ba1] {
2187
+ .toggleEditBtn[data-v-1502ca60] {
2188
2188
  position: absolute;
2189
2189
  right: -24px;
2190
2190
  top: 4;
2191
2191
  opacity: 0;
2192
2192
  }
2193
- .textInputIconWrap[data-v-25258ba1] {
2193
+ .textInputIconWrap[data-v-1502ca60] {
2194
2194
  position: relative;
2195
2195
  }
2196
- .textInputIconWrap .icon-font[data-v-25258ba1] {
2196
+ .textInputIconWrap .icon-font[data-v-1502ca60] {
2197
2197
  position: absolute;
2198
2198
  inset-inline-end: 0.7rem;
2199
- top:50%;
2199
+ bottom: 50%;
2200
2200
  line-height: 0;
2201
- color: var(--bgl-gray);
2201
+ color: var(--bgl-gray);
2202
2202
  }
2203
- .txtInputIconStart .iconStart[data-v-25258ba1]{
2203
+ .txtInputIconStart .iconStart[data-v-1502ca60] {
2204
2204
  position: absolute;
2205
2205
  inset-inline-start: 0.7rem;
2206
- top:50%;
2206
+ top: 50%;
2207
2207
  line-height: 0;
2208
- color: var(--bgl-gray);
2208
+ color: var(--bgl-gray);
2209
2209
  }
2210
- .txtInputIconStart input[data-v-25258ba1]{
2210
+ .txtInputIconStart input[data-v-1502ca60] {
2211
2211
  padding-inline-start: 2rem;
2212
2212
  }
2213
- .bagel-input:hover .toggleEditBtn[data-v-25258ba1],
2214
- .bagel-input.editMode .toggleEditBtn[data-v-25258ba1] {
2213
+ .bagel-input:hover .toggleEditBtn[data-v-1502ca60],
2214
+ .bagel-input.editMode .toggleEditBtn[data-v-1502ca60] {
2215
2215
  opacity: 1;
2216
2216
  }
2217
- .bagel-input.small input[data-v-25258ba1] {
2217
+ .bagel-input.small input[data-v-1502ca60] {
2218
2218
  height: 30px;
2219
2219
  }
2220
2220
 
@@ -2519,7 +2519,7 @@ input[type='email'][data-v-ed81a514] {
2519
2519
  row-gap: 1rem;
2520
2520
  }
2521
2521
  .align-items-end {
2522
- align-items: end;
2522
+ align-items: end !important;
2523
2523
  }
2524
2524
  .fit-content {
2525
2525
  width: fit-content;
package/dist/types/BtnOptions.d.ts CHANGED
@@ -1,7 +1,8 @@
1
- import type { MaterialIcons } from './materialIcons';
1
+ import type { ThemeType, MaterialIcons } from '.';
2
2
  export interface BtnOptions {
3
3
  onClick?: () => void;
4
- color?: 'light' | 'red' | 'gray' | 'black' | 'blue';
4
+ color?: ThemeType;
5
+ theme?: ThemeType;
5
6
  disabled?: boolean;
6
7
  icon?: MaterialIcons;
7
8
  flat?: boolean;
package/dist/types/BtnOptions.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"BtnOptions.d.ts","sourceRoot":"","sources":["../../src/types/BtnOptions.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD,MAAM,WAAW,UAAU;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CACf"}
1
+ {"version":3,"file":"BtnOptions.d.ts","sourceRoot":"","sources":["../../src/types/BtnOptions.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,GAAG,CAAC;AAElD,MAAM,WAAW,UAAU;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAC,SAAS,CAAC;IACjB,KAAK,CAAC,EAAC,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAEf"}
package/dist/types/index.d.ts CHANGED
@@ -4,4 +4,5 @@ export type { Tables, TableToTypeMapping } from '@bagelink/sdk';
4
4
  export type { StorageFile } from './file';
5
5
  export * from './BagelField';
6
6
  export * from './BtnOptions';
7
+ export type ThemeType = 'light' | 'red' | 'gray' | 'gray-light' | 'black' | 'green';
7
8
  //# sourceMappingURL=index.d.ts.map
package/dist/types/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACrD,YAAY,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AACxE,YAAY,EAAE,MAAM,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAChE,YAAY,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAC1C,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACrD,YAAY,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AACxE,YAAY,EAAE,MAAM,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAChE,YAAY,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAC1C,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAE7B,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,KAAK,GAAG,MAAM,GAAG,YAAY,GAAG,OAAO,GAAG,OAAO,CAAC"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@bagelink/vue",
3
3
  "type": "module",
4
- "version": "0.0.192",
4
+ "version": "0.0.196",
5
5
  "description": "Bagel core sdk packages",
6
6
  "author": {
7
7
  "name": "Neveh Allon",
package/src/components/Btn.vue CHANGED
@@ -42,18 +42,16 @@
42
42
  import { useSlots } from 'vue';
43
43
 
44
44
  const slots = useSlots();
45
- import type { MaterialIcons } from '@bagelink/vue';
45
+ import type { MaterialIcons, ThemeType } from '@bagelink/vue';
46
46
  import { MaterialIcon } from '@bagelink/vue';
47
47
 
48
- type ThemeTypes = 'light' | 'red' | 'gray' | 'gray-light' | 'black' | 'green';
49
-
50
48
  const props = withDefaults(
51
49
  defineProps<{
52
50
  disabled?: boolean;
53
51
  icon?: MaterialIcons;
54
52
  'icon.end'?: MaterialIcons;
55
- color?: ThemeTypes;
56
- theme?: ThemeTypes;
53
+ color?: ThemeType;
54
+ theme?: ThemeType;
57
55
  flat?: boolean;
58
56
  border?: boolean;
59
57
  thin?: boolean;
@@ -78,23 +76,29 @@ const props = withDefaults(
78
76
 
79
77
  const computedTheme = $computed(() => (props?.color || props?.theme));
80
78
 
81
- const defaultColors = { backgroundColor: 'var(--bgl-primary)', color: 'var(--bgl-white)' };
82
-
83
- const themes: { [key in ThemeTypes]: typeof defaultColors } = {
84
- red: { ...defaultColors, backgroundColor: 'var(--bgl-red)', },
85
- black: { ...defaultColors, backgroundColor: 'var(--bgl-black)' },
86
- green: { ...defaultColors, backgroundColor: 'var(--bgl-green)', color: 'var(--bgl-white)' },
87
- gray: { ...defaultColors, backgroundColor: 'var(--bgl-gray-light)', color: 'var(--bgl-black)' },
88
- light: { ...defaultColors, backgroundColor: 'var(--bgl-primary-light)', color: 'var(--bgl-primary)' },
89
- 'gray-light': { ...defaultColors, backgroundColor: 'var(--bgl-gray-light)', color: 'var(--bgl-gray)' },
79
+ const computedDefaultColors = $computed(
80
+ () => ({
81
+ backgroundColor: 'var(--bgl-primary)',
82
+ color: props.flat ? 'var(--bgl-black)' : 'var(--bgl-white)'
83
+ }
84
+ )
85
+ )
86
+
87
+ const themes: { [key in ThemeType]: typeof computedDefaultColors } = {
88
+ red: { ...computedDefaultColors, backgroundColor: 'var(--bgl-red)', },
89
+ black: { ...computedDefaultColors, backgroundColor: 'var(--bgl-black)' },
90
+ green: { ...computedDefaultColors, backgroundColor: 'var(--bgl-green)', color: 'var(--bgl-white)' },
91
+ gray: { ...computedDefaultColors, backgroundColor: 'var(--bgl-gray-light)', color: 'var(--bgl-black)' },
92
+ light: { ...computedDefaultColors, backgroundColor: 'var(--bgl-primary-light)', color: 'var(--bgl-primary)' },
93
+ 'gray-light': { ...computedDefaultColors, backgroundColor: 'var(--bgl-gray-light)', color: 'var(--bgl-gray)' },
90
94
  };
91
95
 
92
96
  const cumputedTextColor = $computed(
93
- () => (themes?.[computedTheme as ThemeTypes]?.color || defaultColors.color),
97
+ () => (themes?.[computedTheme as ThemeType]?.color || computedDefaultColors.color),
94
98
  );
95
99
 
96
100
  const computedBackgroundColor = $computed(
97
- () => (themes?.[computedTheme as ThemeTypes]?.backgroundColor || defaultColors.backgroundColor),
101
+ () => (themes?.[computedTheme as ThemeType]?.backgroundColor || computedDefaultColors.backgroundColor),
98
102
  );
99
103
  </script>
100
104
 
package/src/components/form/inputs/TextInput.vue CHANGED
@@ -1,7 +1,7 @@
1
1
  <template>
2
2
  <div
3
3
  class="bagel-input"
4
- :class="{ small, shrink, toggleEdit, editMode, textInputIconWrap:icon, txtInputIconStart:iconStart}"
4
+ :class="{ small, shrink, toggleEdit, editMode, textInputIconWrap: icon, txtInputIconStart: iconStart }"
5
5
  :title="title"
6
6
  >
7
7
  <label :for="id">
@@ -138,21 +138,24 @@ watch(
138
138
  .textInputIconWrap {
139
139
  position: relative;
140
140
  }
141
+
141
142
  .textInputIconWrap .icon-font {
142
143
  position: absolute;
143
144
  inset-inline-end: 0.7rem;
144
- top:50%;
145
+ bottom: 50%;
145
146
  line-height: 0;
146
- color: var(--bgl-gray);
147
+ color: var(--bgl-gray);
147
148
  }
148
- .txtInputIconStart .iconStart{
149
+
150
+ .txtInputIconStart .iconStart {
149
151
  position: absolute;
150
152
  inset-inline-start: 0.7rem;
151
- top:50%;
153
+ top: 50%;
152
154
  line-height: 0;
153
- color: var(--bgl-gray);
155
+ color: var(--bgl-gray);
154
156
  }
155
- .txtInputIconStart input{
157
+
158
+ .txtInputIconStart input {
156
159
  padding-inline-start: 2rem;
157
160
  }
158
161
 
package/src/styles/layout.css CHANGED
@@ -48,7 +48,7 @@
48
48
  }
49
49
 
50
50
  .align-items-end {
51
- align-items: end;
51
+ align-items: end !important;
52
52
  }
53
53
 
54
54
  .fit-content {
package/src/types/BtnOptions.ts CHANGED
@@ -1,8 +1,9 @@
1
- import type { MaterialIcons } from './materialIcons';
1
+ import type { ThemeType, MaterialIcons } from '.';
2
2
 
3
3
  export interface BtnOptions {
4
4
  onClick?: () => void;
5
- color?: 'light' | 'red' | 'gray' | 'black' | 'blue';
5
+ color?:ThemeType;
6
+ theme?:ThemeType;
6
7
  disabled?: boolean;
7
8
  icon?: MaterialIcons;
8
9
  flat?: boolean;
@@ -11,4 +12,5 @@ export interface BtnOptions {
11
12
  loading?: boolean;
12
13
  role?: string;
13
14
  value?: string;
15
+
14
16
  }
package/src/types/index.ts CHANGED
@@ -4,3 +4,5 @@ export type { Tables, TableToTypeMapping } from '@bagelink/sdk';
4
4
  export type { StorageFile } from './file';
5
5
  export * from './BagelField';
6
6
  export * from './BtnOptions';
7
+
8
+ export type ThemeType = 'light' | 'red' | 'gray' | 'gray-light' | 'black' | 'green';