@bagelink/vue 0.0.1155 → 0.0.1161

package/dist/components/ListView.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListView.vue.d.ts","sourceRoot":"","sources":["../../src/components/ListView.vue"],"names":[],"mappings":"AA8BA,iBAAS,cAAc;WAqCT,OAAO,IAA6B;;wBAXtB,GAAG;yBACF,GAAG;;;;EAe/B;AAQD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe,0RAMnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAEpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"ListView.vue.d.ts","sourceRoot":"","sources":["../../src/components/ListView.vue"],"names":[],"mappings":"AAwBA,iBAAS,cAAc;WAmCT,OAAO,IAA6B;;wBAXtB,GAAG;yBACF,GAAG;;;;EAe/B;AAOD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe,0RAMnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAEpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/form/inputs/RadioGroup.vue.d.ts

@@ -3,21 +3,26 @@ export interface RadioOption<T> {
     imgSrc?: string;
     subLabel?: string;
     label?: string;
+    id?: string;
+    contextObj?: T;
     value: any;
-    id: string;
-    contextObj: T;
 }
 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<{
     props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
         readonly onDelete?: ((...args: any[]) => any) | undefined;
         readonly "onUpdate:modelValue"?: ((value: any) => any) | undefined;
-    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onUpdate:modelValue" | "onDelete"> & ({
+        readonly onFocus?: ((...args: any[]) => any) | undefined;
+        readonly onBlur?: ((...args: any[]) => any) | undefined;
+        readonly onChange?: ((...args: any[]) => any) | undefined;
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onFocus" | "onBlur" | "onChange" | "onUpdate:modelValue" | "onDelete"> & ({
         modelValue?: any;
     } & {
-        groupName: string;
+        groupName?: string;
         options: RadioOption<ContextObjType>[];
         deletable?: boolean;
         required?: boolean;
+        error?: string;
+        disabled?: boolean;
     }) & Partial<{}>> & import('vue').PublicProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
     attrs: any;
@@ -27,12 +32,12 @@ declare const _default: <ContextObjType extends Record<string, any>>(__VLS_props
             imgSrc?: string;
             subLabel?: string;
             label?: string;
+            id?: string;
+            contextObj?: ContextObjType | undefined;
             value: any;
-            id: string;
-            contextObj: ContextObjType;
         }): any;
     };
-    emit: ((event: "delete", ...args: any[]) => void) & ((evt: "update:modelValue", value: any) => void);
+    emit: ((event: "delete" | "focus" | "blur" | "change", ...args: any[]) => void) & ((evt: "update:modelValue", value: any) => void);
 }>) => import('vue').VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/components/form/inputs/RadioGroup.vue.d.ts.map

@@ -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"}
+{"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/index.cjs

@@ -203,7 +203,7 @@ const _sfc_main$15 = /* @__PURE__ */ vue.defineComponent({
             }, null, 8, ["modelValue"])
           ]),
           default: vue.withCtx(() => [
-            vue.createVNode(vue.unref(_sfc_main$e), { class: "-mt-2 hm-300px" }, {
+            vue.createVNode(vue.unref(ListView), { class: "-mt-2 hm-300px" }, {
               default: vue.withCtx(() => [
                 (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(searchResults), (result2, index2) => {
                   return vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$f), {
@@ -21946,7 +21946,7 @@ const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const _hoisted_1$w = ["for"];
-const _hoisted_2$l = ["id", "name", "value", "required"];
+const _hoisted_2$l = ["id", "disabled", "name", "value", "required"];
 const _hoisted_3$h = { class: "flex w-100 gap-1 flex-wrap m_gap-05 m_gap-row-025" };
 const _hoisted_4$a = ["src", "alt"];
 const _hoisted_5$a = { class: "" };
@@ -21964,31 +21964,59 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
     groupName: {},
     options: {},
     deletable: { type: Boolean },
-    required: { type: Boolean }
+    required: { type: Boolean },
+    error: {},
+    disabled: { type: Boolean }
   }, {
     "modelValue": {},
     "modelModifiers": {}
   }),
-  emits: /* @__PURE__ */ vue.mergeModels(["delete"], ["update:modelValue"]),
-  setup(__props) {
+  emits: /* @__PURE__ */ vue.mergeModels(["delete", "focus", "blur", "change"], ["update:modelValue"]),
+  setup(__props, { emit: __emit }) {
+    const props2 = __props;
+    const emit2 = __emit;
+    const name = vue.computed(() => props2.groupName || Math.random().toString(36).substring(2, 15));
     const selectedOption = vue.useModel(__props, "modelValue");
+    let isFocused = vue.ref(false);
+    const containerClasses = vue.computed(() => ({
+      "has-error": !!props2.error,
+      "is-disabled": props2.disabled,
+      "is-focused": isFocused.value
+    }));
+    function handleFocus() {
+      isFocused.value = true;
+      emit2("focus");
+    }
+    function handleBlur() {
+      isFocused.value = false;
+      emit2("blur");
+    }
+    function handleChange() {
+      emit2("change", selectedOption.value);
+    }
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", null, [
-        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.options, (opt) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: vue.normalizeClass(containerClasses.value)
+      }, [
+        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.options, (opt, index2) => {
           return vue.openBlock(), vue.createElementBlock("label", {
-            key: opt.id,
+            key: opt.id || `${name.value}-${index2}`,
             class: "border rounded p-1 flex bg-gray-light mb-05 gap-075 active-list-item hover",
-            for: opt.id
+            for: opt.id || `${name.value}-${index2}`
           }, [
             vue.withDirectives(vue.createElementVNode("input", {
-              id: opt.id,
+              id: opt.id || `${name.value}-${index2}`,
               "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selectedOption.value = $event),
+              disabled: _ctx.disabled,
               class: "radio-input-list",
               type: "radio",
-              name: _ctx.groupName,
+              name: name.value,
               value: opt.value,
-              required: _ctx.required
-            }, null, 8, _hoisted_2$l), [
+              required: _ctx.required,
+              onFocus: handleFocus,
+              onBlur: handleBlur,
+              onChange: handleChange
+            }, null, 40, _hoisted_2$l), [
               [vue.vModelRadio, selectedOption.value]
             ]),
             vue.createElementVNode("div", _hoisted_3$h, [
@@ -22015,11 +22043,11 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
             }, null, 8, ["onClick"])) : vue.createCommentVNode("", true)
           ], 8, _hoisted_1$w);
         }), 128))
-      ]);
+      ], 2);
     };
   }
 });
-const RadioGroup = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-3c77be46"]]);
+const RadioGroup = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-a692c596"]]);
 const _hoisted_1$v = { class: "bagel-input" };
 const _hoisted_2$k = { class: "pb-025" };
 const _hoisted_3$g = { class: "flex gap-05 flex-wrap" };
@@ -32116,10 +32144,10 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
     let inputVal = vue.ref();
     const input = vue.ref();
     const inputRows = vue.computed(() => {
-      if (props2.autoheight) return `${inputVal.value}`.split("\n").length || props2.rows || 1;
-      if (props2.rows) return props2.rows;
-      if (props2.multiline || props2.code) return 4;
-      return 1;
+      let rows = Number(props2.rows) || 1;
+      if (props2.autoheight) rows = Math.max(rows, String(inputVal.value).split("\n").length);
+      if (props2.multiline || props2.code) rows = Math.max(rows, 4);
+      return rows;
     });
     const debouncedEmit = useDebounceFn(() => {
       emit2("debounce", inputVal.value);
@@ -32222,7 +32250,7 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["__scopeId", "data-v-c2bd3e03"]]);
+const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["__scopeId", "data-v-54de82a7"]]);
 const _hoisted_1$l = ["title"];
 const _hoisted_2$b = ["id", "required"];
 const _hoisted_3$8 = ["for"];
@@ -37799,28 +37827,21 @@ const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$b = { class: "list-wrap bgl_card thin grid overflow-hidden h-100 pt-0 pb-05 px-0 m_pb-0" };
-const _hoisted_2$6 = {
-  key: 0,
-  class: "p-1"
-};
+const _sfc_main$e = {};
+const _hoisted_1$b = { class: "list-wrap bgl_card thin grid overflow-hidden pt-0 pb-05 px-0 m_pb-0" };
+const _hoisted_2$6 = { class: "p-0" };
 const _hoisted_3$4 = { class: "list-content auto-flow-rows align-items-start overflow-y h-100" };
-const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
-  __name: "ListView",
-  setup(__props) {
-    const slots = vue.useSlots();
-    return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
-        vue.unref(slots).header ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$6, [
-          vue.renderSlot(_ctx.$slots, "header")
-        ])) : vue.createCommentVNode("", true),
-        vue.createElementVNode("div", _hoisted_3$4, [
-          vue.renderSlot(_ctx.$slots, "default")
-        ])
-      ]);
-    };
-  }
-});
+function _sfc_render$3(_ctx, _cache) {
+  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
+    vue.createElementVNode("div", _hoisted_2$6, [
+      vue.renderSlot(_ctx.$slots, "header")
+    ]),
+    vue.createElementVNode("div", _hoisted_3$4, [
+      vue.renderSlot(_ctx.$slots, "default")
+    ])
+  ]);
+}
+const ListView = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", _sfc_render$3]]);
 const _hoisted_1$a = { class: "flex-center" };
 const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
   __name: "Loading",
@@ -40782,7 +40803,7 @@ exports.JSONInput = JSONInput;
 exports.Layout = Layout;
 exports.Lineart = _sfc_main$Y;
 exports.ListItem = _sfc_main$f;
-exports.ListView = _sfc_main$e;
+exports.ListView = ListView;
 exports.Loading = Loading;
 exports.MapEmbed = _sfc_main$c;
 exports.Modal = _sfc_main$b;

package/dist/index.mjs

@@ -201,7 +201,7 @@ const _sfc_main$15 = /* @__PURE__ */ defineComponent({
             }, null, 8, ["modelValue"])
           ]),
           default: withCtx(() => [
-            createVNode(unref(_sfc_main$e), { class: "-mt-2 hm-300px" }, {
+            createVNode(unref(ListView), { class: "-mt-2 hm-300px" }, {
               default: withCtx(() => [
                 (openBlock(true), createElementBlock(Fragment, null, renderList(unref(searchResults), (result2, index2) => {
                   return openBlock(), createBlock(unref(_sfc_main$f), {
@@ -21944,7 +21944,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$w = ["for"];
-const _hoisted_2$l = ["id", "name", "value", "required"];
+const _hoisted_2$l = ["id", "disabled", "name", "value", "required"];
 const _hoisted_3$h = { class: "flex w-100 gap-1 flex-wrap m_gap-05 m_gap-row-025" };
 const _hoisted_4$a = ["src", "alt"];
 const _hoisted_5$a = { class: "" };
@@ -21962,31 +21962,59 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
     groupName: {},
     options: {},
     deletable: { type: Boolean },
-    required: { type: Boolean }
+    required: { type: Boolean },
+    error: {},
+    disabled: { type: Boolean }
   }, {
     "modelValue": {},
     "modelModifiers": {}
   }),
-  emits: /* @__PURE__ */ mergeModels(["delete"], ["update:modelValue"]),
-  setup(__props) {
+  emits: /* @__PURE__ */ mergeModels(["delete", "focus", "blur", "change"], ["update:modelValue"]),
+  setup(__props, { emit: __emit }) {
+    const props2 = __props;
+    const emit2 = __emit;
+    const name = computed(() => props2.groupName || Math.random().toString(36).substring(2, 15));
     const selectedOption = useModel(__props, "modelValue");
+    let isFocused = ref(false);
+    const containerClasses = computed(() => ({
+      "has-error": !!props2.error,
+      "is-disabled": props2.disabled,
+      "is-focused": isFocused.value
+    }));
+    function handleFocus() {
+      isFocused.value = true;
+      emit2("focus");
+    }
+    function handleBlur() {
+      isFocused.value = false;
+      emit2("blur");
+    }
+    function handleChange() {
+      emit2("change", selectedOption.value);
+    }
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", null, [
-        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.options, (opt) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(containerClasses.value)
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.options, (opt, index2) => {
           return openBlock(), createElementBlock("label", {
-            key: opt.id,
+            key: opt.id || `${name.value}-${index2}`,
             class: "border rounded p-1 flex bg-gray-light mb-05 gap-075 active-list-item hover",
-            for: opt.id
+            for: opt.id || `${name.value}-${index2}`
           }, [
             withDirectives(createElementVNode("input", {
-              id: opt.id,
+              id: opt.id || `${name.value}-${index2}`,
               "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selectedOption.value = $event),
+              disabled: _ctx.disabled,
               class: "radio-input-list",
               type: "radio",
-              name: _ctx.groupName,
+              name: name.value,
               value: opt.value,
-              required: _ctx.required
-            }, null, 8, _hoisted_2$l), [
+              required: _ctx.required,
+              onFocus: handleFocus,
+              onBlur: handleBlur,
+              onChange: handleChange
+            }, null, 40, _hoisted_2$l), [
               [vModelRadio, selectedOption.value]
             ]),
             createElementVNode("div", _hoisted_3$h, [
@@ -22013,11 +22041,11 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
             }, null, 8, ["onClick"])) : createCommentVNode("", true)
           ], 8, _hoisted_1$w);
         }), 128))
-      ]);
+      ], 2);
     };
   }
 });
-const RadioGroup = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-3c77be46"]]);
+const RadioGroup = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-a692c596"]]);
 const _hoisted_1$v = { class: "bagel-input" };
 const _hoisted_2$k = { class: "pb-025" };
 const _hoisted_3$g = { class: "flex gap-05 flex-wrap" };
@@ -32114,10 +32142,10 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
     let inputVal = ref();
     const input = ref();
     const inputRows = computed(() => {
-      if (props2.autoheight) return `${inputVal.value}`.split("\n").length || props2.rows || 1;
-      if (props2.rows) return props2.rows;
-      if (props2.multiline || props2.code) return 4;
-      return 1;
+      let rows = Number(props2.rows) || 1;
+      if (props2.autoheight) rows = Math.max(rows, String(inputVal.value).split("\n").length);
+      if (props2.multiline || props2.code) rows = Math.max(rows, 4);
+      return rows;
     });
     const debouncedEmit = useDebounceFn(() => {
       emit2("debounce", inputVal.value);
@@ -32220,7 +32248,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["__scopeId", "data-v-c2bd3e03"]]);
+const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["__scopeId", "data-v-54de82a7"]]);
 const _hoisted_1$l = ["title"];
 const _hoisted_2$b = ["id", "required"];
 const _hoisted_3$8 = ["for"];
@@ -37797,28 +37825,21 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$b = { class: "list-wrap bgl_card thin grid overflow-hidden h-100 pt-0 pb-05 px-0 m_pb-0" };
-const _hoisted_2$6 = {
-  key: 0,
-  class: "p-1"
-};
+const _sfc_main$e = {};
+const _hoisted_1$b = { class: "list-wrap bgl_card thin grid overflow-hidden pt-0 pb-05 px-0 m_pb-0" };
+const _hoisted_2$6 = { class: "p-0" };
 const _hoisted_3$4 = { class: "list-content auto-flow-rows align-items-start overflow-y h-100" };
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
-  __name: "ListView",
-  setup(__props) {
-    const slots = useSlots();
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$b, [
-        unref(slots).header ? (openBlock(), createElementBlock("div", _hoisted_2$6, [
-          renderSlot(_ctx.$slots, "header")
-        ])) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_3$4, [
-          renderSlot(_ctx.$slots, "default")
-        ])
-      ]);
-    };
-  }
-});
+function _sfc_render$3(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", _hoisted_1$b, [
+    createElementVNode("div", _hoisted_2$6, [
+      renderSlot(_ctx.$slots, "header")
+    ]),
+    createElementVNode("div", _hoisted_3$4, [
+      renderSlot(_ctx.$slots, "default")
+    ])
+  ]);
+}
+const ListView = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", _sfc_render$3]]);
 const _hoisted_1$a = { class: "flex-center" };
 const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "Loading",
@@ -40781,7 +40802,7 @@ export {
   Layout,
   _sfc_main$Y as Lineart,
   _sfc_main$f as ListItem,
-  _sfc_main$e as ListView,
+  ListView,
   Loading,
   _sfc_main$c as MapEmbed,
   _sfc_main$b as Modal,

package/dist/style.css

@@ -1313,16 +1313,22 @@ pre code.hljs{
 	height: var(--input-height) !important;
 }
 
-.radio-input-list[data-v-3c77be46]{
+.radio-input-list[data-v-a692c596]{
 	width: auto;
 	transform: scale(1.4);
 	margin-inline-end: 0.6rem;
 }
-.active-list-item[data-v-3c77be46]:has(:checked){
+.active-list-item[data-v-a692c596]:has(:checked){
 	background: var(--bgl-primary-light) !important;
 	border-color: var(--bgl-primary) !important;
 	accent-color: var(--bgl-accent-color);
 }
+.has-error .active-list-item[data-v-a692c596] {
+	border-color: var(--bgl-red) !important;
+}
+.has-error[data-v-a692c596] :is(input[type="radio"]) {
+	accent-color: var(--bgl-red);
+}
 
 .radio-pill label[data-v-cf892d71] {
 	color: var(--bgl-primary);
@@ -1791,58 +1797,58 @@ line-height: 1.65;
 	font-size: var(--label-font-size);
 }
 
-.bagel-input textarea[data-v-c2bd3e03] {
+.bagel-input textarea[data-v-54de82a7] {
 	min-height: unset;
 	font-size: var(--input-font-size);
 }
-.bagel-input.text-input textarea[data-v-c2bd3e03] {
+.bagel-input.text-input textarea[data-v-54de82a7] {
 	resize: none;
 }
-.code textarea[data-v-c2bd3e03] {
+.code textarea[data-v-54de82a7] {
 	font-family: 'Inconsolata', monospace;
 	background: var(--bgl-code-bg) !important;
 	color: var(--bgl-light-text) !important;
 }
-.code textarea[data-v-c2bd3e03]::placeholder {
+.code textarea[data-v-54de82a7]::placeholder {
 	color: var(--bgl-light-text) !important;
 	opacity: 0.3;
 }
-.bagel-input.small[data-v-c2bd3e03] {
+.bagel-input.small[data-v-54de82a7] {
 	margin-bottom: 0;
 	height: 30px;
 }
-.bagel-input.dense label[data-v-c2bd3e03] {
+.bagel-input.dense label[data-v-54de82a7] {
 	display: flex;
 	align-items: center;
 	gap: 0.5rem;
 }
-.bagel-input input[data-v-c2bd3e03]:disabled {
+.bagel-input input[data-v-54de82a7]:disabled {
 	background: #f5f5f5;
 }
-.bagel-input label[data-v-c2bd3e03] {
+.bagel-input label[data-v-54de82a7] {
 	font-size: var(--label-font-size);
 }
-.textInputIconWrap .bgl_icon-font[data-v-c2bd3e03] {
+.textInputIconWrap .bgl_icon-font[data-v-54de82a7] {
 	color: var(--input-color);
 	position: absolute;
     inset-inline-end:calc(var(--input-height) / 3 - 0.25rem);
 	margin-top: calc(var(--input-height) / 2 + 0.1rem);
 	line-height: 0;
 }
-.textInputIconWrap input[data-v-c2bd3e03]{
+.textInputIconWrap input[data-v-54de82a7]{
 	padding-inline-end: calc(var(--input-height) / 3 + 1.5rem);
 }
-.txtInputIconStart .iconStart[data-v-c2bd3e03] {
+.txtInputIconStart .iconStart[data-v-54de82a7] {
 	color: var(--input-color);
 	position: absolute;
     inset-inline-start:calc(var(--input-height) / 3 - 0.25rem);
 	margin-top: calc(var(--input-height) / 2 );
 	line-height: 0;
 }
-.txtInputIconStart input[data-v-c2bd3e03], .txtInputIconStart textarea[data-v-c2bd3e03]{
+.txtInputIconStart input[data-v-54de82a7], .txtInputIconStart textarea[data-v-54de82a7]{
 	padding-inline-start: calc(var(--input-height) / 3 + 1.5rem);
 }
-.bagel-input.small textarea[data-v-c2bd3e03] {
+.bagel-input.small textarea[data-v-54de82a7] {
 	height: 30px;
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.1155",
+  "version": "0.0.1161",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

package/src/components/Draggable/useDraggable.ts

@@ -139,14 +139,14 @@ export function useDraggable(options: DraggableOptions = {}) {
 		return 2
 	}
 
-	function resetDragStyles(dragEl: DraggableElement) {
-		if (defaultOptions.mode === 'ghost') {
-			dragEl.style.opacity = ''
-			dragEl.style.transform = ''
-		} else {
-			dragEl.style.opacity = ''
-		}
-	}
+	// function resetDragStyles(dragEl: DraggableElement) {
+	// 	if (defaultOptions.mode === 'ghost') {
+	// 		dragEl.style.opacity = ''
+	// 		dragEl.style.transform = ''
+	// 	} else {
+	// 		dragEl.style.opacity = ''
+	// 	}
+	// }
 
 	function cacheElementPositions(draggedList: DraggableElement[]) {
 		POSITION_CACHE.clear()

package/src/components/ListView.vue

@@ -1,12 +1,9 @@
 <script lang="ts" setup>
-import { useSlots } from 'vue'
-
-const slots = useSlots()
 </script>
 
 <template>
-	<div class="list-wrap bgl_card thin grid overflow-hidden h-100 pt-0 pb-05 px-0 m_pb-0">
-		<div v-if="slots.header" class="p-1">
+	<div class="list-wrap bgl_card thin grid overflow-hidden pt-0 pb-05 px-0 m_pb-0">
+		<div class="p-0">
 			<slot name="header" />
 		</div>
 		<div class="list-content auto-flow-rows align-items-start overflow-y h-100">

package/src/components/form/inputs/RadioGroup.vue

@@ -6,38 +6,67 @@ export interface RadioOption<T> {
 	imgSrc?: string
 	subLabel?: string
 	label?: string
+	id?: string
+	contextObj?: T
 	value: any
-	id: string
-	contextObj: T
 }
 
-defineProps<{
-	groupName: string
+const props = defineProps<{
+	groupName?: string
 	options: RadioOption<ContextObjType>[]
 	deletable?: boolean
 	required?: boolean
+	error?: string
+	disabled?: boolean
 }>()
-defineEmits(['delete'])
 
+const emit = defineEmits(['delete', 'focus', 'blur', 'change'])
+
+const name = $computed(() => props.groupName || Math.random().toString(36).substring(2, 15))
 const selectedOption = defineModel('modelValue')
+let isFocused = $ref(false)
+
+const containerClasses = $computed(() => ({
+	'has-error': !!props.error,
+	'is-disabled': props.disabled,
+	'is-focused': isFocused
+}))
+
+function handleFocus() {
+	isFocused = true
+	emit('focus')
+}
+
+function handleBlur() {
+	isFocused = false
+	emit('blur')
+}
+
+function handleChange() {
+	emit('change', selectedOption.value)
+}
 </script>
 
 <template>
-	<div>
+	<div :class="containerClasses">
 		<label
-			v-for="opt in options"
-			:key="opt.id"
+			v-for="(opt, index) in options"
+			:key="opt.id || `${name}-${index}`"
 			class="border rounded p-1 flex bg-gray-light mb-05 gap-075 active-list-item hover"
-			:for="opt.id"
+			:for="opt.id || `${name}-${index}`"
 		>
 			<input
-				:id="opt.id"
+				:id="opt.id || `${name}-${index}`"
 				v-model="selectedOption"
+				:disabled="disabled"
 				class="radio-input-list"
 				type="radio"
-				:name="groupName"
+				:name="name"
 				:value="opt.value"
 				:required="required"
+				@focus="handleFocus"
+				@blur="handleBlur"
+				@change="handleChange"
 			>
 			<div class="flex w-100 gap-1 flex-wrap m_gap-05 m_gap-row-025">
 				<img
@@ -75,4 +104,12 @@ const selectedOption = defineModel('modelValue')
 	border-color: var(--bgl-primary) !important;
 	accent-color: var(--bgl-accent-color);
 }
+
+.has-error .active-list-item {
+	border-color: var(--bgl-red) !important;
+}
+
+.has-error :is(input[type="radio"]) {
+	accent-color: var(--bgl-red);
+}
 </style>

package/src/components/form/inputs/TextInput.vue

@@ -44,10 +44,10 @@ let inputVal = $ref<string | number>()
 const input = $ref<HTMLInputElement>()
 
 const inputRows = $computed(() => {
-	if (props.autoheight) return `${inputVal}`.split('\n').length || props.rows || 1
-	if (props.rows) return props.rows
-	if (props.multiline || props.code) return 4
-	return 1
+	let rows = Number(props.rows) || 1
+	if (props.autoheight) rows = Math.max(rows, String(inputVal).split('\n').length)
+	if (props.multiline || props.code) rows = Math.max(rows, 4)
+	return rows
 })
 
 const debouncedEmit = useDebounceFn(() => { emit('debounce', inputVal as string) }, 700)