@bagelink/vue 0.0.1151 → 0.0.1157

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/RadioGroup.vue.d.ts +12 -7
  2. package/dist/components/form/inputs/RadioGroup.vue.d.ts.map +1 -1
  3. package/dist/components/form/inputs/SelectInput.vue.d.ts +4 -4
  4. package/dist/components/form/inputs/TextInput.vue.d.ts +1 -1
  5. package/dist/components/form/inputs/TextInput.vue.d.ts.map +1 -1
  6. package/dist/components/layout/Layout.vue.d.ts +1 -1
  7. package/dist/components/layout/Layout.vue.d.ts.map +1 -1
  8. package/dist/index.cjs +50 -22
  9. package/dist/index.mjs +50 -22
  10. package/dist/style.css +21 -15
  11. package/package.json +1 -1
  12. package/src/components/form/inputs/RadioGroup.vue +48 -11
  13. package/src/components/form/inputs/TextInput.vue +7 -7
package/dist/components/form/inputs/RadioGroup.vue.d.ts CHANGED
@@ -3,21 +3,26 @@ export interface RadioOption<T> {
3
3
  imgSrc?: string;
4
4
  subLabel?: string;
5
5
  label?: string;
6
+ id?: string;
7
+ contextObj?: T;
6
8
  value: any;
7
- id: string;
8
- contextObj: T;
9
9
  }
10
10
  declare const _default: <ContextObjType extends Record<string, any>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
11
11
  props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
12
12
  readonly onDelete?: ((...args: any[]) => any) | undefined;
13
13
  readonly "onUpdate:modelValue"?: ((value: any) => any) | undefined;
14
- } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onUpdate:modelValue" | "onDelete"> & ({
14
+ readonly onFocus?: ((...args: any[]) => any) | undefined;
15
+ readonly onBlur?: ((...args: any[]) => any) | undefined;
16
+ readonly onChange?: ((...args: any[]) => any) | undefined;
17
+ } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onFocus" | "onBlur" | "onChange" | "onUpdate:modelValue" | "onDelete"> & ({
15
18
  modelValue?: any;
16
19
  } & {
17
- groupName: string;
20
+ groupName?: string;
18
21
  options: RadioOption<ContextObjType>[];
19
22
  deletable?: boolean;
20
23
  required?: boolean;
24
+ error?: string;
25
+ disabled?: boolean;
21
26
  }) & Partial<{}>> & import('vue').PublicProps;
22
27
  expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
23
28
  attrs: any;
@@ -27,12 +32,12 @@ declare const _default: <ContextObjType extends Record<string, any>>(__VLS_props
27
32
  imgSrc?: string;
28
33
  subLabel?: string;
29
34
  label?: string;
35
+ id?: string;
36
+ contextObj?: ContextObjType | undefined;
30
37
  value: any;
31
- id: string;
32
- contextObj: ContextObjType;
33
38
  }): any;
34
39
  };
35
- emit: ((event: "delete", ...args: any[]) => void) & ((evt: "update:modelValue", value: any) => void);
40
+ emit: ((event: "delete" | "focus" | "blur" | "change", ...args: any[]) => void) & ((evt: "update:modelValue", value: any) => void);
36
41
  }>) => import('vue').VNode & {
37
42
  __ctx?: Awaited<typeof __VLS_setup>;
38
43
  };
package/dist/components/form/inputs/RadioGroup.vue.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"RadioGroup.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/RadioGroup.vue"],"names":[],"mappings":"AAkFA,MAAM,WAAW,WAAW,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,GAAG,CAAA;IACV,EAAE,EAAE,MAAM,CAAA;IACV,UAAU,EAAE,CAAC,CAAA;CACb;yBAEgB,cAAc,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,eAC7C,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,cAClD,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,iBAC5F,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC;WAsJ1D,mBAAmB,CAAC;;;;qBA7Hb,GAAG;;mBAtBN,MAAM;iBACR,WAAW,CAAC,cAAc,CAAC,EAAE;oBAC1B,OAAO;mBACR,OAAO;oBAgJ2E,CAAC,4BAA2B;oBACzG,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;;qBApKD,MAAM;qBACN,MAAM;uBACJ,MAAM;oBACT,MAAM;mBACP,GAAG;gBACN,MAAM;;YA8HoB,GAAG;;UAmC3B,8FAA0C;OAGrC,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,WAAW,CAAC,CAAA;CAAE;AAhKzE,wBAgK4E;AAC5E,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}
1
+ {"version":3,"file":"RadioGroup.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/RadioGroup.vue"],"names":[],"mappings":"AAuHA,MAAM,WAAW,WAAW,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,UAAU,CAAC,EAAE,CAAC,CAAA;IACd,KAAK,EAAE,GAAG,CAAA;CACV;yBAEgB,cAAc,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,eAC7C,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,cAClD,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,iBAC5F,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC;WA2L1D,mBAAmB,CAAC;;;;;;;qBAzIb,GAAG;;oBA/CL,MAAM;iBACT,WAAW,CAAC,cAAc,CAAC,EAAE;oBAC1B,OAAO;mBACR,OAAO;gBACV,MAAM;mBACH,OAAO;oBAmL2E,CAAC,4BAA2B;oBACzG,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;;qBAzMD,MAAM;qBACN,MAAM;uBACJ,MAAM;oBACT,MAAM;iBACT,MAAM;;mBAEJ,GAAG;YA6JoB,GAAG;;UAwC3B,4HAAoC;OAG/B,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,WAAW,CAAC,CAAA;CAAE;AArMzE,wBAqM4E;AAC5E,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}
package/dist/components/form/inputs/SelectInput.vue.d.ts CHANGED
@@ -652,7 +652,7 @@ declare function __VLS_template(): {
652
652
  multiline?: boolean;
653
653
  autoheight?: boolean;
654
654
  code?: boolean;
655
- lines?: number | string;
655
+ rows?: number | string;
656
656
  autocomplete?: AutoFillField;
657
657
  autofocus?: boolean;
658
658
  onFocusout?: (e: FocusEvent) => void;
@@ -699,7 +699,7 @@ declare function __VLS_template(): {
699
699
  multiline?: boolean;
700
700
  autoheight?: boolean;
701
701
  code?: boolean;
702
- lines?: number | string;
702
+ rows?: number | string;
703
703
  autocomplete?: AutoFillField;
704
704
  autofocus?: boolean;
705
705
  onFocusout?: (e: FocusEvent) => void;
@@ -1355,7 +1355,7 @@ declare const __VLS_component: import('vue').DefineComponent<PropTypes, {}, {},
1355
1355
  multiline?: boolean;
1356
1356
  autoheight?: boolean;
1357
1357
  code?: boolean;
1358
- lines?: number | string;
1358
+ rows?: number | string;
1359
1359
  autocomplete?: AutoFillField;
1360
1360
  autofocus?: boolean;
1361
1361
  onFocusout?: (e: FocusEvent) => void;
@@ -1402,7 +1402,7 @@ declare const __VLS_component: import('vue').DefineComponent<PropTypes, {}, {},
1402
1402
  multiline?: boolean;
1403
1403
  autoheight?: boolean;
1404
1404
  code?: boolean;
1405
- lines?: number | string;
1405
+ rows?: number | string;
1406
1406
  autocomplete?: AutoFillField;
1407
1407
  autofocus?: boolean;
1408
1408
  onFocusout?: (e: FocusEvent) => void;
package/dist/components/form/inputs/TextInput.vue.d.ts CHANGED
@@ -21,7 +21,7 @@ type __VLS_Props = {
21
21
  multiline?: boolean;
22
22
  autoheight?: boolean;
23
23
  code?: boolean;
24
- lines?: number | string;
24
+ rows?: number | string;
25
25
  autocomplete?: AutoFillField;
26
26
  autofocus?: boolean;
27
27
  onFocusout?: (e: FocusEvent) => void;
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":"AA4NA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAQ7C,KAAK,WAAW,GAAG;IACjB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,gBAAgB,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAA;IACzC,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,SAAS,CAAC,EAAE,QAAQ,CAAA;IACpB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,YAAY,CAAC,EAAE,aAAa,CAAA;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAA;CACpC,CAAC;;;;;;;;;;;UAXM,MAAM;gBARA,MAAM,GAAG,MAAM;;;;AA8M9B,wBAWG"}
1
+ {"version":3,"file":"TextInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/TextInput.vue"],"names":[],"mappings":"AA4NA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAQ7C,KAAK,WAAW,GAAG;IACjB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,gBAAgB,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAA;IACzC,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,SAAS,CAAC,EAAE,QAAQ,CAAA;IACpB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,YAAY,CAAC,EAAE,aAAa,CAAA;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAA;CACpC,CAAC;;;;;;;;;;;UAXM,MAAM;gBARA,MAAM,GAAG,MAAM;;;;AA8M9B,wBAWG"}
package/dist/components/layout/Layout.vue.d.ts CHANGED
@@ -16,9 +16,9 @@ declare function __VLS_template(): {
16
16
  };
17
17
  type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
18
18
  declare const __VLS_component: import('vue').DefineComponent<LayoutProrps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<LayoutProrps> & Readonly<{}>, {
19
+ rows: string[];
19
20
  h100: boolean;
20
21
  gap: number;
21
- rows: string[];
22
22
  columns: string[];
23
23
  mColumns: string[];
24
24
  mRows: string[];
package/dist/components/layout/Layout.vue.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Layout.vue.d.ts","sourceRoot":"","sources":["../../../src/components/layout/Layout.vue"],"names":[],"mappings":"AA0DA,UAAU,YAAY;IACrB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB,IAAI,CAAC,EAAE,MAAM,EAAE,CAAA;CACf;AAoCD,iBAAS,cAAc;WAkCT,OAAO,IAA6B;;yBAVrB,GAAG;;;;EAe/B;AAcD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;UA/Fb,OAAO;SADR,MAAM;UAKL,MAAM,EAAE;aAHL,MAAM,EAAE;cACP,MAAM,EAAE;WACX,MAAM,EAAE;wFAoGf,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
1
+ {"version":3,"file":"Layout.vue.d.ts","sourceRoot":"","sources":["../../../src/components/layout/Layout.vue"],"names":[],"mappings":"AA0DA,UAAU,YAAY;IACrB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB,IAAI,CAAC,EAAE,MAAM,EAAE,CAAA;CACf;AAoCD,iBAAS,cAAc;WAkCT,OAAO,IAA6B;;yBAVrB,GAAG;;;;EAe/B;AAcD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;UA3Fb,MAAM,EAAE;UAJR,OAAO;SADR,MAAM;aAEF,MAAM,EAAE;cACP,MAAM,EAAE;WACX,MAAM,EAAE;wFAoGf,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,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
@@ -21946,7 +21946,7 @@ const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
21946
21946
  }
21947
21947
  });
21948
21948
  const _hoisted_1$w = ["for"];
21949
- const _hoisted_2$l = ["id", "name", "value", "required"];
21949
+ const _hoisted_2$l = ["id", "disabled", "name", "value", "required"];
21950
21950
  const _hoisted_3$h = { class: "flex w-100 gap-1 flex-wrap m_gap-05 m_gap-row-025" };
21951
21951
  const _hoisted_4$a = ["src", "alt"];
21952
21952
  const _hoisted_5$a = { class: "" };
@@ -21964,31 +21964,59 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
21964
21964
  groupName: {},
21965
21965
  options: {},
21966
21966
  deletable: { type: Boolean },
21967
- required: { type: Boolean }
21967
+ required: { type: Boolean },
21968
+ error: {},
21969
+ disabled: { type: Boolean }
21968
21970
  }, {
21969
21971
  "modelValue": {},
21970
21972
  "modelModifiers": {}
21971
21973
  }),
21972
- emits: /* @__PURE__ */ vue.mergeModels(["delete"], ["update:modelValue"]),
21973
- setup(__props) {
21974
+ emits: /* @__PURE__ */ vue.mergeModels(["delete", "focus", "blur", "change"], ["update:modelValue"]),
21975
+ setup(__props, { emit: __emit }) {
21976
+ const props2 = __props;
21977
+ const emit2 = __emit;
21978
+ const name = vue.computed(() => props2.groupName || Math.random().toString(36).substring(2, 15));
21974
21979
  const selectedOption = vue.useModel(__props, "modelValue");
21980
+ let isFocused = vue.ref(false);
21981
+ const containerClasses = vue.computed(() => ({
21982
+ "has-error": !!props2.error,
21983
+ "is-disabled": props2.disabled,
21984
+ "is-focused": isFocused.value
21985
+ }));
21986
+ function handleFocus() {
21987
+ isFocused.value = true;
21988
+ emit2("focus");
21989
+ }
21990
+ function handleBlur() {
21991
+ isFocused.value = false;
21992
+ emit2("blur");
21993
+ }
21994
+ function handleChange() {
21995
+ emit2("change", selectedOption.value);
21996
+ }
21975
21997
  return (_ctx, _cache) => {
21976
- return vue.openBlock(), vue.createElementBlock("div", null, [
21977
- (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.options, (opt) => {
21998
+ return vue.openBlock(), vue.createElementBlock("div", {
21999
+ class: vue.normalizeClass(containerClasses.value)
22000
+ }, [
22001
+ (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.options, (opt, index2) => {
21978
22002
  return vue.openBlock(), vue.createElementBlock("label", {
21979
- key: opt.id,
22003
+ key: opt.id || `${name.value}-${index2}`,
21980
22004
  class: "border rounded p-1 flex bg-gray-light mb-05 gap-075 active-list-item hover",
21981
- for: opt.id
22005
+ for: opt.id || `${name.value}-${index2}`
21982
22006
  }, [
21983
22007
  vue.withDirectives(vue.createElementVNode("input", {
21984
- id: opt.id,
22008
+ id: opt.id || `${name.value}-${index2}`,
21985
22009
  "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selectedOption.value = $event),
22010
+ disabled: _ctx.disabled,
21986
22011
  class: "radio-input-list",
21987
22012
  type: "radio",
21988
- name: _ctx.groupName,
22013
+ name: name.value,
21989
22014
  value: opt.value,
21990
- required: _ctx.required
21991
- }, null, 8, _hoisted_2$l), [
22015
+ required: _ctx.required,
22016
+ onFocus: handleFocus,
22017
+ onBlur: handleBlur,
22018
+ onChange: handleChange
22019
+ }, null, 40, _hoisted_2$l), [
21992
22020
  [vue.vModelRadio, selectedOption.value]
21993
22021
  ]),
21994
22022
  vue.createElementVNode("div", _hoisted_3$h, [
@@ -22015,11 +22043,11 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
22015
22043
  }, null, 8, ["onClick"])) : vue.createCommentVNode("", true)
22016
22044
  ], 8, _hoisted_1$w);
22017
22045
  }), 128))
22018
- ]);
22046
+ ], 2);
22019
22047
  };
22020
22048
  }
22021
22049
  });
22022
- const RadioGroup = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-3c77be46"]]);
22050
+ const RadioGroup = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-a692c596"]]);
22023
22051
  const _hoisted_1$v = { class: "bagel-input" };
22024
22052
  const _hoisted_2$k = { class: "pb-025" };
22025
22053
  const _hoisted_3$g = { class: "flex gap-05 flex-wrap" };
@@ -32104,7 +32132,7 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
32104
32132
  multiline: { type: Boolean },
32105
32133
  autoheight: { type: Boolean },
32106
32134
  code: { type: Boolean },
32107
- lines: {},
32135
+ rows: {},
32108
32136
  autocomplete: {},
32109
32137
  autofocus: { type: Boolean },
32110
32138
  onFocusout: {}
@@ -32115,11 +32143,11 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
32115
32143
  const emit2 = __emit;
32116
32144
  let inputVal = vue.ref();
32117
32145
  const input = vue.ref();
32118
- const rows = vue.computed(() => {
32119
- if (props2.lines) return props2.lines;
32120
- if (props2.autoheight) return `${inputVal.value}`.split("\n").length || 1;
32121
- if (props2.multiline || props2.code) return 4;
32122
- return 1;
32146
+ const inputRows = vue.computed(() => {
32147
+ let rows = Number(props2.rows) || 1;
32148
+ if (props2.autoheight) rows = Math.max(rows, String(inputVal.value).split("\n").length);
32149
+ if (props2.multiline || props2.code) rows = Math.max(rows, 4);
32150
+ return rows;
32123
32151
  });
32124
32152
  const debouncedEmit = useDebounceFn(() => {
32125
32153
  emit2("debounce", inputVal.value);
@@ -32195,7 +32223,7 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
32195
32223
  "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => vue.isRef(inputVal) ? inputVal.value = $event : inputVal = $event),
32196
32224
  title: _ctx.title,
32197
32225
  type: _ctx.type,
32198
- rows: rows.value,
32226
+ rows: inputRows.value,
32199
32227
  placeholder: _ctx.placeholder || _ctx.label,
32200
32228
  disabled: _ctx.disabled,
32201
32229
  required: _ctx.required,
@@ -32222,7 +32250,7 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
32222
32250
  };
32223
32251
  }
32224
32252
  });
32225
- const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["__scopeId", "data-v-cc17f96e"]]);
32253
+ const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["__scopeId", "data-v-54de82a7"]]);
32226
32254
  const _hoisted_1$l = ["title"];
32227
32255
  const _hoisted_2$b = ["id", "required"];
32228
32256
  const _hoisted_3$8 = ["for"];
package/dist/index.mjs CHANGED
@@ -21944,7 +21944,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
21944
21944
  }
21945
21945
  });
21946
21946
  const _hoisted_1$w = ["for"];
21947
- const _hoisted_2$l = ["id", "name", "value", "required"];
21947
+ const _hoisted_2$l = ["id", "disabled", "name", "value", "required"];
21948
21948
  const _hoisted_3$h = { class: "flex w-100 gap-1 flex-wrap m_gap-05 m_gap-row-025" };
21949
21949
  const _hoisted_4$a = ["src", "alt"];
21950
21950
  const _hoisted_5$a = { class: "" };
@@ -21962,31 +21962,59 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
21962
21962
  groupName: {},
21963
21963
  options: {},
21964
21964
  deletable: { type: Boolean },
21965
- required: { type: Boolean }
21965
+ required: { type: Boolean },
21966
+ error: {},
21967
+ disabled: { type: Boolean }
21966
21968
  }, {
21967
21969
  "modelValue": {},
21968
21970
  "modelModifiers": {}
21969
21971
  }),
21970
- emits: /* @__PURE__ */ mergeModels(["delete"], ["update:modelValue"]),
21971
- setup(__props) {
21972
+ emits: /* @__PURE__ */ mergeModels(["delete", "focus", "blur", "change"], ["update:modelValue"]),
21973
+ setup(__props, { emit: __emit }) {
21974
+ const props2 = __props;
21975
+ const emit2 = __emit;
21976
+ const name = computed(() => props2.groupName || Math.random().toString(36).substring(2, 15));
21972
21977
  const selectedOption = useModel(__props, "modelValue");
21978
+ let isFocused = ref(false);
21979
+ const containerClasses = computed(() => ({
21980
+ "has-error": !!props2.error,
21981
+ "is-disabled": props2.disabled,
21982
+ "is-focused": isFocused.value
21983
+ }));
21984
+ function handleFocus() {
21985
+ isFocused.value = true;
21986
+ emit2("focus");
21987
+ }
21988
+ function handleBlur() {
21989
+ isFocused.value = false;
21990
+ emit2("blur");
21991
+ }
21992
+ function handleChange() {
21993
+ emit2("change", selectedOption.value);
21994
+ }
21973
21995
  return (_ctx, _cache) => {
21974
- return openBlock(), createElementBlock("div", null, [
21975
- (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.options, (opt) => {
21996
+ return openBlock(), createElementBlock("div", {
21997
+ class: normalizeClass(containerClasses.value)
21998
+ }, [
21999
+ (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.options, (opt, index2) => {
21976
22000
  return openBlock(), createElementBlock("label", {
21977
- key: opt.id,
22001
+ key: opt.id || `${name.value}-${index2}`,
21978
22002
  class: "border rounded p-1 flex bg-gray-light mb-05 gap-075 active-list-item hover",
21979
- for: opt.id
22003
+ for: opt.id || `${name.value}-${index2}`
21980
22004
  }, [
21981
22005
  withDirectives(createElementVNode("input", {
21982
- id: opt.id,
22006
+ id: opt.id || `${name.value}-${index2}`,
21983
22007
  "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selectedOption.value = $event),
22008
+ disabled: _ctx.disabled,
21984
22009
  class: "radio-input-list",
21985
22010
  type: "radio",
21986
- name: _ctx.groupName,
22011
+ name: name.value,
21987
22012
  value: opt.value,
21988
- required: _ctx.required
21989
- }, null, 8, _hoisted_2$l), [
22013
+ required: _ctx.required,
22014
+ onFocus: handleFocus,
22015
+ onBlur: handleBlur,
22016
+ onChange: handleChange
22017
+ }, null, 40, _hoisted_2$l), [
21990
22018
  [vModelRadio, selectedOption.value]
21991
22019
  ]),
21992
22020
  createElementVNode("div", _hoisted_3$h, [
@@ -22013,11 +22041,11 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
22013
22041
  }, null, 8, ["onClick"])) : createCommentVNode("", true)
22014
22042
  ], 8, _hoisted_1$w);
22015
22043
  }), 128))
22016
- ]);
22044
+ ], 2);
22017
22045
  };
22018
22046
  }
22019
22047
  });
22020
- const RadioGroup = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-3c77be46"]]);
22048
+ const RadioGroup = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-a692c596"]]);
22021
22049
  const _hoisted_1$v = { class: "bagel-input" };
22022
22050
  const _hoisted_2$k = { class: "pb-025" };
22023
22051
  const _hoisted_3$g = { class: "flex gap-05 flex-wrap" };
@@ -32102,7 +32130,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
32102
32130
  multiline: { type: Boolean },
32103
32131
  autoheight: { type: Boolean },
32104
32132
  code: { type: Boolean },
32105
- lines: {},
32133
+ rows: {},
32106
32134
  autocomplete: {},
32107
32135
  autofocus: { type: Boolean },
32108
32136
  onFocusout: {}
@@ -32113,11 +32141,11 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
32113
32141
  const emit2 = __emit;
32114
32142
  let inputVal = ref();
32115
32143
  const input = ref();
32116
- const rows = computed(() => {
32117
- if (props2.lines) return props2.lines;
32118
- if (props2.autoheight) return `${inputVal.value}`.split("\n").length || 1;
32119
- if (props2.multiline || props2.code) return 4;
32120
- return 1;
32144
+ const inputRows = computed(() => {
32145
+ let rows = Number(props2.rows) || 1;
32146
+ if (props2.autoheight) rows = Math.max(rows, String(inputVal.value).split("\n").length);
32147
+ if (props2.multiline || props2.code) rows = Math.max(rows, 4);
32148
+ return rows;
32121
32149
  });
32122
32150
  const debouncedEmit = useDebounceFn(() => {
32123
32151
  emit2("debounce", inputVal.value);
@@ -32193,7 +32221,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
32193
32221
  "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isRef(inputVal) ? inputVal.value = $event : inputVal = $event),
32194
32222
  title: _ctx.title,
32195
32223
  type: _ctx.type,
32196
- rows: rows.value,
32224
+ rows: inputRows.value,
32197
32225
  placeholder: _ctx.placeholder || _ctx.label,
32198
32226
  disabled: _ctx.disabled,
32199
32227
  required: _ctx.required,
@@ -32220,7 +32248,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
32220
32248
  };
32221
32249
  }
32222
32250
  });
32223
- const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["__scopeId", "data-v-cc17f96e"]]);
32251
+ const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["__scopeId", "data-v-54de82a7"]]);
32224
32252
  const _hoisted_1$l = ["title"];
32225
32253
  const _hoisted_2$b = ["id", "required"];
32226
32254
  const _hoisted_3$8 = ["for"];
package/dist/style.css CHANGED
@@ -1313,16 +1313,22 @@ pre code.hljs{
1313
1313
  height: var(--input-height) !important;
1314
1314
  }
1315
1315
 
1316
- .radio-input-list[data-v-3c77be46]{
1316
+ .radio-input-list[data-v-a692c596]{
1317
1317
  width: auto;
1318
1318
  transform: scale(1.4);
1319
1319
  margin-inline-end: 0.6rem;
1320
1320
  }
1321
- .active-list-item[data-v-3c77be46]:has(:checked){
1321
+ .active-list-item[data-v-a692c596]:has(:checked){
1322
1322
  background: var(--bgl-primary-light) !important;
1323
1323
  border-color: var(--bgl-primary) !important;
1324
1324
  accent-color: var(--bgl-accent-color);
1325
1325
  }
1326
+ .has-error .active-list-item[data-v-a692c596] {
1327
+ border-color: var(--bgl-red) !important;
1328
+ }
1329
+ .has-error[data-v-a692c596] :is(input[type="radio"]) {
1330
+ accent-color: var(--bgl-red);
1331
+ }
1326
1332
 
1327
1333
  .radio-pill label[data-v-cf892d71] {
1328
1334
  color: var(--bgl-primary);
@@ -1791,58 +1797,58 @@ line-height: 1.65;
1791
1797
  font-size: var(--label-font-size);
1792
1798
  }
1793
1799
 
1794
- .bagel-input textarea[data-v-cc17f96e] {
1800
+ .bagel-input textarea[data-v-54de82a7] {
1795
1801
  min-height: unset;
1796
1802
  font-size: var(--input-font-size);
1797
1803
  }
1798
- .bagel-input.text-input textarea[data-v-cc17f96e] {
1804
+ .bagel-input.text-input textarea[data-v-54de82a7] {
1799
1805
  resize: none;
1800
1806
  }
1801
- .code textarea[data-v-cc17f96e] {
1807
+ .code textarea[data-v-54de82a7] {
1802
1808
  font-family: 'Inconsolata', monospace;
1803
1809
  background: var(--bgl-code-bg) !important;
1804
1810
  color: var(--bgl-light-text) !important;
1805
1811
  }
1806
- .code textarea[data-v-cc17f96e]::placeholder {
1812
+ .code textarea[data-v-54de82a7]::placeholder {
1807
1813
  color: var(--bgl-light-text) !important;
1808
1814
  opacity: 0.3;
1809
1815
  }
1810
- .bagel-input.small[data-v-cc17f96e] {
1816
+ .bagel-input.small[data-v-54de82a7] {
1811
1817
  margin-bottom: 0;
1812
1818
  height: 30px;
1813
1819
  }
1814
- .bagel-input.dense label[data-v-cc17f96e] {
1820
+ .bagel-input.dense label[data-v-54de82a7] {
1815
1821
  display: flex;
1816
1822
  align-items: center;
1817
1823
  gap: 0.5rem;
1818
1824
  }
1819
- .bagel-input input[data-v-cc17f96e]:disabled {
1825
+ .bagel-input input[data-v-54de82a7]:disabled {
1820
1826
  background: #f5f5f5;
1821
1827
  }
1822
- .bagel-input label[data-v-cc17f96e] {
1828
+ .bagel-input label[data-v-54de82a7] {
1823
1829
  font-size: var(--label-font-size);
1824
1830
  }
1825
- .textInputIconWrap .bgl_icon-font[data-v-cc17f96e] {
1831
+ .textInputIconWrap .bgl_icon-font[data-v-54de82a7] {
1826
1832
  color: var(--input-color);
1827
1833
  position: absolute;
1828
1834
  inset-inline-end:calc(var(--input-height) / 3 - 0.25rem);
1829
1835
  margin-top: calc(var(--input-height) / 2 + 0.1rem);
1830
1836
  line-height: 0;
1831
1837
  }
1832
- .textInputIconWrap input[data-v-cc17f96e]{
1838
+ .textInputIconWrap input[data-v-54de82a7]{
1833
1839
  padding-inline-end: calc(var(--input-height) / 3 + 1.5rem);
1834
1840
  }
1835
- .txtInputIconStart .iconStart[data-v-cc17f96e] {
1841
+ .txtInputIconStart .iconStart[data-v-54de82a7] {
1836
1842
  color: var(--input-color);
1837
1843
  position: absolute;
1838
1844
  inset-inline-start:calc(var(--input-height) / 3 - 0.25rem);
1839
1845
  margin-top: calc(var(--input-height) / 2 );
1840
1846
  line-height: 0;
1841
1847
  }
1842
- .txtInputIconStart input[data-v-cc17f96e], .txtInputIconStart textarea[data-v-cc17f96e]{
1848
+ .txtInputIconStart input[data-v-54de82a7], .txtInputIconStart textarea[data-v-54de82a7]{
1843
1849
  padding-inline-start: calc(var(--input-height) / 3 + 1.5rem);
1844
1850
  }
1845
- .bagel-input.small textarea[data-v-cc17f96e] {
1851
+ .bagel-input.small textarea[data-v-54de82a7] {
1846
1852
  height: 30px;
1847
1853
  }
1848
1854
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@bagelink/vue",
3
3
  "type": "module",
4
- "version": "0.0.1151",
4
+ "version": "0.0.1157",
5
5
  "description": "Bagel core sdk packages",
6
6
  "author": {
7
7
  "name": "Neveh Allon",
package/src/components/form/inputs/RadioGroup.vue CHANGED
@@ -6,38 +6,67 @@ export interface RadioOption<T> {
6
6
  imgSrc?: string
7
7
  subLabel?: string
8
8
  label?: string
9
+ id?: string
10
+ contextObj?: T
9
11
  value: any
10
- id: string
11
- contextObj: T
12
12
  }
13
13
 
14
- defineProps<{
15
- groupName: string
14
+ const props = defineProps<{
15
+ groupName?: string
16
16
  options: RadioOption<ContextObjType>[]
17
17
  deletable?: boolean
18
18
  required?: boolean
19
+ error?: string
20
+ disabled?: boolean
19
21
  }>()
20
- defineEmits(['delete'])
21
22
 
23
+ const emit = defineEmits(['delete', 'focus', 'blur', 'change'])
24
+
25
+ const name = $computed(() => props.groupName || Math.random().toString(36).substring(2, 15))
22
26
  const selectedOption = defineModel('modelValue')
27
+ let isFocused = $ref(false)
28
+
29
+ const containerClasses = $computed(() => ({
30
+ 'has-error': !!props.error,
31
+ 'is-disabled': props.disabled,
32
+ 'is-focused': isFocused
33
+ }))
34
+
35
+ function handleFocus() {
36
+ isFocused = true
37
+ emit('focus')
38
+ }
39
+
40
+ function handleBlur() {
41
+ isFocused = false
42
+ emit('blur')
43
+ }
44
+
45
+ function handleChange() {
46
+ emit('change', selectedOption.value)
47
+ }
23
48
  </script>
24
49
 
25
50
  <template>
26
- <div>
51
+ <div :class="containerClasses">
27
52
  <label
28
- v-for="opt in options"
29
- :key="opt.id"
53
+ v-for="(opt, index) in options"
54
+ :key="opt.id || `${name}-${index}`"
30
55
  class="border rounded p-1 flex bg-gray-light mb-05 gap-075 active-list-item hover"
31
- :for="opt.id"
56
+ :for="opt.id || `${name}-${index}`"
32
57
  >
33
58
  <input
34
- :id="opt.id"
59
+ :id="opt.id || `${name}-${index}`"
35
60
  v-model="selectedOption"
61
+ :disabled="disabled"
36
62
  class="radio-input-list"
37
63
  type="radio"
38
- :name="groupName"
64
+ :name="name"
39
65
  :value="opt.value"
40
66
  :required="required"
67
+ @focus="handleFocus"
68
+ @blur="handleBlur"
69
+ @change="handleChange"
41
70
  >
42
71
  <div class="flex w-100 gap-1 flex-wrap m_gap-05 m_gap-row-025">
43
72
  <img
@@ -75,4 +104,12 @@ const selectedOption = defineModel('modelValue')
75
104
  border-color: var(--bgl-primary) !important;
76
105
  accent-color: var(--bgl-accent-color);
77
106
  }
107
+
108
+ .has-error .active-list-item {
109
+ border-color: var(--bgl-red) !important;
110
+ }
111
+
112
+ .has-error :is(input[type="radio"]) {
113
+ accent-color: var(--bgl-red);
114
+ }
78
115
  </style>
package/src/components/form/inputs/TextInput.vue CHANGED
@@ -28,7 +28,7 @@ const props = withDefaults(
28
28
  multiline?: boolean
29
29
  autoheight?: boolean
30
30
  code?: boolean
31
- lines?: number | string
31
+ rows?: number | string
32
32
  autocomplete?: AutoFillField
33
33
  autofocus?: boolean
34
34
  onFocusout?: (e: FocusEvent) => void
@@ -43,11 +43,11 @@ let inputVal = $ref<string | number>()
43
43
 
44
44
  const input = $ref<HTMLInputElement>()
45
45
 
46
- const rows = $computed(() => {
47
- if (props.lines) return props.lines
48
- if (props.autoheight) return `${inputVal}`.split('\n').length || 1
49
- if (props.multiline || props.code) return 4
50
- return 1
46
+ const inputRows = $computed(() => {
47
+ let rows = Number(props.rows) || 1
48
+ if (props.autoheight) rows = Math.max(rows, String(inputVal).split('\n').length)
49
+ if (props.multiline || props.code) rows = Math.max(rows, 4)
50
+ return rows
51
51
  })
52
52
 
53
53
  const debouncedEmit = useDebounceFn(() => { emit('debounce', inputVal as string) }, 700)
@@ -115,7 +115,7 @@ onMounted(() => {
115
115
  v-model="inputVal"
116
116
  :title
117
117
  :type
118
- :rows
118
+ :rows="inputRows"
119
119
  :placeholder="placeholder || label"
120
120
  :disabled
121
121
  :required