@bagelink/vue 0.0.1082 → 0.0.1090

package/dist/components/form/inputs/CodeEditor/Index.vue.d.ts

@@ -10,6 +10,8 @@ type __VLS_Props = {
     modelValue?: string;
     autodetect?: boolean;
     ignoreIllegals?: boolean;
+    label?: string;
+    height?: string;
 };
 declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (...args: any[]) => void;
@@ -17,6 +19,6 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     textarea: HTMLTextAreaElement;
-}, any>;
+}, HTMLDivElement>;
 export default _default;
 //# sourceMappingURL=Index.vue.d.ts.map

package/dist/components/form/inputs/CodeEditor/Index.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Index.vue.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/inputs/CodeEditor/Index.vue"],"names":[],"mappings":"AAoKA,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAEtD,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,MAAM;QACf,IAAI,EAAE,SAAS,CAAA;KACf;CACD;AAKD,KAAK,WAAW,GAAG;IAClB,QAAQ,CAAC,EAAE,QAAQ,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,cAAc,CAAC,EAAE,OAAO,CAAA;CACxB,CAAC;;;;;;;;AA8KF,wBAQG"}
+{"version":3,"file":"Index.vue.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/inputs/CodeEditor/Index.vue"],"names":[],"mappings":"AA0KA,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAEtD,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,MAAM;QACf,IAAI,EAAE,SAAS,CAAA;KACf;CACD;AAKD,KAAK,WAAW,GAAG;IAClB,QAAQ,CAAC,EAAE,QAAQ,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;CACf,CAAC;;;;;;;;AAwLF,wBASG"}

package/dist/components/form/inputs/RichText/components/EditorToolbar.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditorToolbar.vue.d.ts","sourceRoot":"","sources":["../../../../../../src/components/form/inputs/RichText/components/EditorToolbar.vue"],"names":[],"mappings":"AAAA,OAqDO,KAAK,EAAE,aAAa,EAAsC,MAAM,kBAAkB,CAAA;AAKzF,KAAK,WAAW,GAAG;IAClB,MAAM,CAAC,EAAE,aAAa,CAAA;IACtB,cAAc,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;CAC3B,CAAC;;;;;;AAiJF,wBAQG"}
+{"version":3,"file":"EditorToolbar.vue.d.ts","sourceRoot":"","sources":["../../../../../../src/components/form/inputs/RichText/components/EditorToolbar.vue"],"names":[],"mappings":"AAAA,OAsDO,KAAK,EAAE,aAAa,EAAsC,MAAM,kBAAkB,CAAA;AAKzF,KAAK,WAAW,GAAG;IAClB,MAAM,CAAC,EAAE,aAAa,CAAA;IACtB,cAAc,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;CAC3B,CAAC;;;;;;AAmJF,wBAQG"}

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

@@ -1 +1 @@
-{"version":3,"file":"ToggleInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/ToggleInput.vue"],"names":[],"mappings":"AA+HA,KAAK,WAAW,GAAG;IAClB,KAAK,EAAE,MAAM,CAAA;IACb,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,YAAY,CAAC,EAAE,OAAO,CAAA;CACtB,CAAC;AAgBF,KAAK,iBAAiB,GAAG;IACzB,YAAY,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAClC,GAAG,WAAW,CAAC;AAKhB,iBAAS,cAAc;WAgDT,OAAO,IAA6B;;uBAVvB,GAAG;;;;EAe7B;AAYD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;kBA1FL,OAAO;wFAmGrB,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"}
+{"version":3,"file":"ToggleInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/ToggleInput.vue"],"names":[],"mappings":"AAiIA,KAAK,WAAW,GAAG;IAClB,KAAK,EAAE,MAAM,CAAA;IACb,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,YAAY,CAAC,EAAE,OAAO,CAAA;CACtB,CAAC;AAgBF,KAAK,iBAAiB,GAAG;IACzB,YAAY,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAClC,GAAG,WAAW,CAAC;AAKhB,iBAAS,cAAc;WAgDT,OAAO,IAA6B;;uBAVvB,GAAG;;;;EAe7B;AAYD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;kBA1FL,OAAO;wFAmGrB,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/components/form/inputs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACpD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAA;AACxD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAC9D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC1D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,iBAAiB,CAAA;AACtD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAA;AACxD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAA;AACxD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,iBAAiB,CAAA;AACtD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC1D,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,WAAW,CAAA;AAC1C,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAC9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAA;AACxD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAA;AAClE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAA;AACxD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAC1D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC1D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAC5D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAA;AACxD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACpD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,iBAAiB,CAAA;AACtD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC1D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACpD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAA;AACxD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAC9D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC1D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAEtD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAA;AACxD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAA;AACxD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,iBAAiB,CAAA;AACtD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC1D,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,WAAW,CAAA;AAC1C,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAC9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAA;AACxD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAA;AAClE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAA;AACxD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAC1D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC1D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAC5D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAA;AACxD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACpD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,iBAAiB,CAAA;AACtD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC1D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAA"}

package/dist/index.cjs

@@ -727,7 +727,7 @@ const _hoisted_3$q = {
   class: "dots flex-center gap-05 mt-1"
 };
 const _hoisted_4$i = ["onClick"];
-const _hoisted_5$g = { class: "Handlers" };
+const _hoisted_5$h = { class: "Handlers" };
 const _sfc_main$Z = /* @__PURE__ */ vue.defineComponent({
   __name: "Carousel",
   props: {
@@ -916,7 +916,7 @@ const _sfc_main$Z = /* @__PURE__ */ vue.defineComponent({
             }, null, 10, _hoisted_4$i);
           }), 128))
         ])) : vue.createCommentVNode("", true),
-        vue.createElementVNode("div", _hoisted_5$g, [
+        vue.createElementVNode("div", _hoisted_5$h, [
           vue.createElementVNode("span", { onClick: prev }, [
             vue.renderSlot(_ctx.$slots, "prev", {
               index: vue.unref(activeSlideIndex),
@@ -6770,8 +6770,8 @@ const _hoisted_1$1$1 = {
 const _hoisted_2$1$1 = ["width", "height", "viewBox"];
 const _hoisted_3$p = { class: "layer-rectangles" };
 const _hoisted_4$h = ["transform", "onMouseover"];
-const _hoisted_5$f = ["width", "height"];
-const _hoisted_6$c = {
+const _hoisted_5$g = ["width", "height"];
+const _hoisted_6$d = {
   x: 0 + 10,
   y: 0 + 20,
   "font-size": `15px`,
@@ -6807,14 +6807,14 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                   y: 0,
                   width: r2.width,
                   height: r2.height
-                }), null, 16, _hoisted_5$f),
+                }), null, 16, _hoisted_5$g),
                 vue.renderSlot(_ctx.$slots, "text", {
                   r: r2,
                   selected: _ctx.selected === i2
                 }, () => [
                   vue.createElementVNode(
                     "text",
-                    _hoisted_6$c,
+                    _hoisted_6$d,
                     vue.toDisplayString(r2.data.name),
                     1
                     /* TEXT */
@@ -7046,8 +7046,8 @@ const _hoisted_2$x = {
 };
 const _hoisted_3$o = { class: "key" };
 const _hoisted_4$g = { class: "m-0" };
-const _hoisted_5$e = { key: 1 };
-const _hoisted_6$b = {
+const _hoisted_5$f = { key: 1 };
+const _hoisted_6$c = {
   key: 0,
   class: "data-row"
 };
@@ -7116,10 +7116,10 @@ const _sfc_main$X = /* @__PURE__ */ vue.defineComponent({
             ])) : vue.createCommentVNode("", true)
           ], 64);
         }), 128)),
-        !((_a2 = _ctx.schema) == null ? void 0 : _a2.length) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$e, [
+        !((_a2 = _ctx.schema) == null ? void 0 : _a2.length) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$f, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(computedSchema.value, ({ id, label }) => {
             return vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: id }, [
-              !isUnset(itemData.value[id]) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$b, [
+              !isUnset(itemData.value[id]) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$c, [
                 vue.createElementVNode("div", _hoisted_7$8, [
                   vue.createElementVNode("p", _hoisted_8$5, vue.toDisplayString(label), 1)
                 ]),
@@ -10091,22 +10091,23 @@ const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
     const emit2 = __emit;
     const slots = vue.useSlots();
     const { showModal } = useModal();
-    const instAt = /* @__PURE__ */ new Date();
-    const timeSinceInst = () => Date.now() - instAt.getTime();
     const existingFormState = vue.inject(FORM_STATE_KEY);
     const isNested = Boolean(existingFormState && props2.fieldID);
     const { data: data2, isDirty } = isNested ? existingFormState : provideBagelFormState(props2.modelValue);
+    let emitDirty = vue.ref(false);
     if (!isNested) {
       vue.watch(() => props2.modelValue, (newVal) => {
-        if (JSON.stringify(newVal) !== JSON.stringify(data2.value)) {
-          data2.value = newVal;
+        if (emitDirty.value) {
+          emitDirty.value = false;
+          return;
         }
+        data2.value = newVal;
       }, { deep: true, immediate: true });
-      vue.watch(data2, (newVal) => {
-        if (timeSinceInst() > 100 && JSON.stringify(newVal) !== JSON.stringify(props2.modelValue)) {
-          emit2("dirty");
-          emit2("update:modelValue", newVal);
-        }
+      vue.watch(() => data2, (newVal) => {
+        if (emitDirty.value) return;
+        emitDirty.value = true;
+        emit2("dirty");
+        emit2("update:modelValue", newVal);
       }, { deep: true });
     }
     const form = vue.ref();
@@ -10509,13 +10510,18 @@ const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const CheckInput = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["__scopeId", "data-v-03ed2982"]]);
-const _hoisted_1$E = {
+const _hoisted_1$E = { class: "mb-05" };
+const _hoisted_2$t = {
   key: 0,
-  class: "code-editor-wrap grid rounded p-1 overflow hm-300px"
+  class: "label txt-start"
+};
+const _hoisted_3$m = {
+  key: 1,
+  class: "code-editor-wrap grid rounded p-1 overflow hm-300px ltr txt-start relative h-100p"
 };
-const _hoisted_2$t = { class: "overflow-hidden absolute inset-0 p-0 m-0 h-100 codeText" };
-const _hoisted_3$m = ["innerHTML"];
-const _hoisted_4$f = ["onKeydown"];
+const _hoisted_4$f = { class: "overflow-hidden absolute inset-0 p-0 m-0 h-100 codeText" };
+const _hoisted_5$e = ["innerHTML"];
+const _hoisted_6$b = ["onKeydown"];
 const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
   __name: "Index",
   props: {
@@ -10523,15 +10529,17 @@ const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
     readonly: { type: Boolean, default: false },
     modelValue: { default: "" },
     autodetect: { type: Boolean },
-    ignoreIllegals: { type: Boolean, default: true }
+    ignoreIllegals: { type: Boolean, default: true },
+    label: {},
+    height: { default: "300px" }
   },
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
     const emit2 = __emit;
     let hljs = vue.ref(null);
+    let elHeight = vue.ref(__props.height);
     let code = vue.ref("");
     const textarea = vue.ref();
-    let height = vue.ref("300px");
     let loaded = vue.ref(false);
     const cannotDetectLanguage = vue.computed(() => {
       var _a2;
@@ -10575,8 +10583,8 @@ const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
     }
     function adjustHeight() {
       var _a2;
-      if (((_a2 = textarea.value) == null ? void 0 : _a2.scrollHeight) && textarea.value.scrollHeight > 300) {
-        height.value = `${textarea.value.scrollHeight}px`;
+      if (((_a2 = textarea.value) == null ? void 0 : _a2.scrollHeight) && textarea.value.scrollHeight > Number.parseInt(elHeight.value)) {
+        elHeight.value = `${textarea.value.scrollHeight}px`;
       }
     }
     vue.onMounted(async () => {
@@ -10596,40 +10604,43 @@ const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
       }
     }, { immediate: true });
     return (_ctx, _cache) => {
-      return vue.unref(loaded) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$E, [
-        vue.createElementVNode("div", {
-          class: "relative block h-100",
-          style: vue.normalizeStyle({ height: vue.unref(height) })
-        }, [
-          vue.createElementVNode("pre", _hoisted_2$t, [
-            _cache[2] || (_cache[2] = vue.createTextVNode("				")),
-            vue.createElementVNode("code", {
-              class: vue.normalizeClass(className.value),
-              innerHTML: highlightedCode.value
-            }, null, 10, _hoisted_3$m),
-            _cache[3] || (_cache[3] = vue.createTextVNode("\n			"))
-          ]),
-          !_ctx.readonly ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("textarea", {
-            key: 0,
-            ref_key: "textarea",
-            ref: textarea,
-            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.isRef(code) ? code.value = $event : code = $event),
-            class: "code-editor absolute inset-0 bg-transparent overflow-hidden h-100 p-0 m-0 codeText border-none",
-            spellcheck: "false",
-            placeholder: "Write your code here",
-            "aria-label": "Code Editor",
-            "data-gramm": "false",
-            onKeydown: vue.withKeys(vue.withModifiers(handleTab, ["prevent"]), ["tab"]),
-            onInput: _cache[1] || (_cache[1] = ($event) => emit2("update:modelValue", vue.unref(code)))
-          }, null, 40, _hoisted_4$f)), [
-            [vue.vModelText, vue.unref(code)]
-          ]) : vue.createCommentVNode("", true)
-        ], 4)
-      ])) : vue.createCommentVNode("", true);
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$E, [
+        _ctx.label ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_2$t, vue.toDisplayString(_ctx.label), 1)) : vue.createCommentVNode("", true),
+        vue.unref(loaded) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$m, [
+          vue.createElementVNode("div", {
+            class: "relative block h-100",
+            style: vue.normalizeStyle({ height: `calc(${vue.unref(elHeight)} - 2rem)` })
+          }, [
+            vue.createElementVNode("pre", _hoisted_4$f, [
+              _cache[2] || (_cache[2] = vue.createTextVNode("					")),
+              vue.createElementVNode("code", {
+                class: vue.normalizeClass(["absolute inset-0", className.value]),
+                innerHTML: highlightedCode.value
+              }, null, 10, _hoisted_5$e),
+              _cache[3] || (_cache[3] = vue.createTextVNode("\n				"))
+            ]),
+            !_ctx.readonly ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("textarea", {
+              key: 0,
+              ref_key: "textarea",
+              ref: textarea,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.isRef(code) ? code.value = $event : code = $event),
+              class: "code-editor absolute inset-0 bg-transparent overflow-hidden h-100 p-0 m-0 codeText border-none txt-start",
+              spellcheck: "false",
+              placeholder: "Write your code here",
+              "aria-label": "Code Editor",
+              "data-gramm": "false",
+              onKeydown: vue.withKeys(vue.withModifiers(handleTab, ["prevent"]), ["tab"]),
+              onInput: _cache[1] || (_cache[1] = ($event) => emit2("update:modelValue", vue.unref(code)))
+            }, null, 40, _hoisted_6$b)), [
+              [vue.vModelText, vue.unref(code)]
+            ]) : vue.createCommentVNode("", true)
+          ], 4)
+        ])) : vue.createCommentVNode("", true)
+      ]);
     };
   }
 });
-const CodeEditor = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["__scopeId", "data-v-4f1dc18a"]]);
+const CodeEditor = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["__scopeId", "data-v-1fbc9b61"]]);
 const _hoisted_1$D = ["title"];
 const _hoisted_2$s = ["id", "placeholder", "required"];
 const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
@@ -20621,7 +20632,7 @@ const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const RangeInput = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-fb99b679"]]);
+const RangeInput = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-e606435a"]]);
 const tableTools = [
   "mergeCells",
   "splitCells",
@@ -20816,7 +20827,7 @@ const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
               thin: "",
               flat: "",
               "aria-label": action.name,
-              class: vue.normalizeClass([action.class, { active: _ctx.selectedStyles.has(action.name) }]),
+              class: vue.normalizeClass([[action.class, { active: _ctx.selectedStyles.has(action.name) }], ""]),
               onClick: ($event) => runAction(action.name)
             }, null, 8, ["icon", "aria-label", "class", "onClick"])), [
               [_directive_tooltip, action.label]
@@ -20830,7 +20841,7 @@ const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const EditorToolbar = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__scopeId", "data-v-f3e90c0a"]]);
+const EditorToolbar = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__scopeId", "data-v-33dff8fa"]]);
 function createCommandExecutor(state2, commands) {
   return {
     execute(command, value) {
@@ -30618,7 +30629,7 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const ToggleInput = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["__scopeId", "data-v-486451e5"]]);
+const ToggleInput = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["__scopeId", "data-v-ebe691ee"]]);
 const files = {
   setBaseUrl: (baseUrl) => {
     if (!baseUrl) return;
@@ -34548,7 +34559,12 @@ function getFallbackSchema(data2, showFields) {
   const keys4 = Array.from(new Set((data2 ?? []).flatMap(Object.keys)));
   const schema = keys4.map((id) => ({
     id,
-    label: keyToLabel(id)
+    label: keyToLabel(id),
+    transform: (val) => {
+      const dateFields = ["created_at", "updated_at"];
+      if (dateFields.includes(id)) return val ? new Date(val).toLocaleString() : val;
+      return val;
+    }
   }));
   return showFields ? schema.filter((f2) => showFields.includes(f2.id) || !f2.id) : schema;
 }

package/dist/index.mjs

@@ -725,7 +725,7 @@ const _hoisted_3$q = {
   class: "dots flex-center gap-05 mt-1"
 };
 const _hoisted_4$i = ["onClick"];
-const _hoisted_5$g = { class: "Handlers" };
+const _hoisted_5$h = { class: "Handlers" };
 const _sfc_main$Z = /* @__PURE__ */ defineComponent({
   __name: "Carousel",
   props: {
@@ -914,7 +914,7 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
             }, null, 10, _hoisted_4$i);
           }), 128))
         ])) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_5$g, [
+        createElementVNode("div", _hoisted_5$h, [
           createElementVNode("span", { onClick: prev }, [
             renderSlot(_ctx.$slots, "prev", {
               index: unref(activeSlideIndex),
@@ -6768,8 +6768,8 @@ const _hoisted_1$1$1 = {
 const _hoisted_2$1$1 = ["width", "height", "viewBox"];
 const _hoisted_3$p = { class: "layer-rectangles" };
 const _hoisted_4$h = ["transform", "onMouseover"];
-const _hoisted_5$f = ["width", "height"];
-const _hoisted_6$c = {
+const _hoisted_5$g = ["width", "height"];
+const _hoisted_6$d = {
   x: 0 + 10,
   y: 0 + 20,
   "font-size": `15px`,
@@ -6805,14 +6805,14 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                   y: 0,
                   width: r2.width,
                   height: r2.height
-                }), null, 16, _hoisted_5$f),
+                }), null, 16, _hoisted_5$g),
                 renderSlot(_ctx.$slots, "text", {
                   r: r2,
                   selected: _ctx.selected === i2
                 }, () => [
                   createElementVNode(
                     "text",
-                    _hoisted_6$c,
+                    _hoisted_6$d,
                     toDisplayString(r2.data.name),
                     1
                     /* TEXT */
@@ -7044,8 +7044,8 @@ const _hoisted_2$x = {
 };
 const _hoisted_3$o = { class: "key" };
 const _hoisted_4$g = { class: "m-0" };
-const _hoisted_5$e = { key: 1 };
-const _hoisted_6$b = {
+const _hoisted_5$f = { key: 1 };
+const _hoisted_6$c = {
   key: 0,
   class: "data-row"
 };
@@ -7114,10 +7114,10 @@ const _sfc_main$X = /* @__PURE__ */ defineComponent({
             ])) : createCommentVNode("", true)
           ], 64);
         }), 128)),
-        !((_a2 = _ctx.schema) == null ? void 0 : _a2.length) ? (openBlock(), createElementBlock("div", _hoisted_5$e, [
+        !((_a2 = _ctx.schema) == null ? void 0 : _a2.length) ? (openBlock(), createElementBlock("div", _hoisted_5$f, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(computedSchema.value, ({ id, label }) => {
             return openBlock(), createElementBlock(Fragment, { key: id }, [
-              !isUnset(itemData.value[id]) ? (openBlock(), createElementBlock("div", _hoisted_6$b, [
+              !isUnset(itemData.value[id]) ? (openBlock(), createElementBlock("div", _hoisted_6$c, [
                 createElementVNode("div", _hoisted_7$8, [
                   createElementVNode("p", _hoisted_8$5, toDisplayString(label), 1)
                 ]),
@@ -10089,22 +10089,23 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
     const emit2 = __emit;
     const slots = useSlots();
     const { showModal } = useModal();
-    const instAt = /* @__PURE__ */ new Date();
-    const timeSinceInst = () => Date.now() - instAt.getTime();
     const existingFormState = inject(FORM_STATE_KEY);
     const isNested = Boolean(existingFormState && props2.fieldID);
     const { data: data2, isDirty } = isNested ? existingFormState : provideBagelFormState(props2.modelValue);
+    let emitDirty = ref(false);
     if (!isNested) {
       watch(() => props2.modelValue, (newVal) => {
-        if (JSON.stringify(newVal) !== JSON.stringify(data2.value)) {
-          data2.value = newVal;
+        if (emitDirty.value) {
+          emitDirty.value = false;
+          return;
         }
+        data2.value = newVal;
       }, { deep: true, immediate: true });
-      watch(data2, (newVal) => {
-        if (timeSinceInst() > 100 && JSON.stringify(newVal) !== JSON.stringify(props2.modelValue)) {
-          emit2("dirty");
-          emit2("update:modelValue", newVal);
-        }
+      watch(() => data2, (newVal) => {
+        if (emitDirty.value) return;
+        emitDirty.value = true;
+        emit2("dirty");
+        emit2("update:modelValue", newVal);
       }, { deep: true });
     }
     const form = ref();
@@ -10507,13 +10508,18 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
   }
 });
 const CheckInput = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["__scopeId", "data-v-03ed2982"]]);
-const _hoisted_1$E = {
+const _hoisted_1$E = { class: "mb-05" };
+const _hoisted_2$t = {
   key: 0,
-  class: "code-editor-wrap grid rounded p-1 overflow hm-300px"
+  class: "label txt-start"
+};
+const _hoisted_3$m = {
+  key: 1,
+  class: "code-editor-wrap grid rounded p-1 overflow hm-300px ltr txt-start relative h-100p"
 };
-const _hoisted_2$t = { class: "overflow-hidden absolute inset-0 p-0 m-0 h-100 codeText" };
-const _hoisted_3$m = ["innerHTML"];
-const _hoisted_4$f = ["onKeydown"];
+const _hoisted_4$f = { class: "overflow-hidden absolute inset-0 p-0 m-0 h-100 codeText" };
+const _hoisted_5$e = ["innerHTML"];
+const _hoisted_6$b = ["onKeydown"];
 const _sfc_main$M = /* @__PURE__ */ defineComponent({
   __name: "Index",
   props: {
@@ -10521,15 +10527,17 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
     readonly: { type: Boolean, default: false },
     modelValue: { default: "" },
     autodetect: { type: Boolean },
-    ignoreIllegals: { type: Boolean, default: true }
+    ignoreIllegals: { type: Boolean, default: true },
+    label: {},
+    height: { default: "300px" }
   },
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
     const emit2 = __emit;
     let hljs = ref(null);
+    let elHeight = ref(__props.height);
     let code = ref("");
     const textarea = ref();
-    let height = ref("300px");
     let loaded = ref(false);
     const cannotDetectLanguage = computed(() => {
       var _a2;
@@ -10573,8 +10581,8 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
     }
     function adjustHeight() {
       var _a2;
-      if (((_a2 = textarea.value) == null ? void 0 : _a2.scrollHeight) && textarea.value.scrollHeight > 300) {
-        height.value = `${textarea.value.scrollHeight}px`;
+      if (((_a2 = textarea.value) == null ? void 0 : _a2.scrollHeight) && textarea.value.scrollHeight > Number.parseInt(elHeight.value)) {
+        elHeight.value = `${textarea.value.scrollHeight}px`;
       }
     }
     onMounted(async () => {
@@ -10594,40 +10602,43 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
       }
     }, { immediate: true });
     return (_ctx, _cache) => {
-      return unref(loaded) ? (openBlock(), createElementBlock("div", _hoisted_1$E, [
-        createElementVNode("div", {
-          class: "relative block h-100",
-          style: normalizeStyle({ height: unref(height) })
-        }, [
-          createElementVNode("pre", _hoisted_2$t, [
-            _cache[2] || (_cache[2] = createTextVNode("				")),
-            createElementVNode("code", {
-              class: normalizeClass(className.value),
-              innerHTML: highlightedCode.value
-            }, null, 10, _hoisted_3$m),
-            _cache[3] || (_cache[3] = createTextVNode("\n			"))
-          ]),
-          !_ctx.readonly ? withDirectives((openBlock(), createElementBlock("textarea", {
-            key: 0,
-            ref_key: "textarea",
-            ref: textarea,
-            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(code) ? code.value = $event : code = $event),
-            class: "code-editor absolute inset-0 bg-transparent overflow-hidden h-100 p-0 m-0 codeText border-none",
-            spellcheck: "false",
-            placeholder: "Write your code here",
-            "aria-label": "Code Editor",
-            "data-gramm": "false",
-            onKeydown: withKeys(withModifiers(handleTab, ["prevent"]), ["tab"]),
-            onInput: _cache[1] || (_cache[1] = ($event) => emit2("update:modelValue", unref(code)))
-          }, null, 40, _hoisted_4$f)), [
-            [vModelText, unref(code)]
-          ]) : createCommentVNode("", true)
-        ], 4)
-      ])) : createCommentVNode("", true);
+      return openBlock(), createElementBlock("div", _hoisted_1$E, [
+        _ctx.label ? (openBlock(), createElementBlock("label", _hoisted_2$t, toDisplayString(_ctx.label), 1)) : createCommentVNode("", true),
+        unref(loaded) ? (openBlock(), createElementBlock("div", _hoisted_3$m, [
+          createElementVNode("div", {
+            class: "relative block h-100",
+            style: normalizeStyle({ height: `calc(${unref(elHeight)} - 2rem)` })
+          }, [
+            createElementVNode("pre", _hoisted_4$f, [
+              _cache[2] || (_cache[2] = createTextVNode("					")),
+              createElementVNode("code", {
+                class: normalizeClass(["absolute inset-0", className.value]),
+                innerHTML: highlightedCode.value
+              }, null, 10, _hoisted_5$e),
+              _cache[3] || (_cache[3] = createTextVNode("\n				"))
+            ]),
+            !_ctx.readonly ? withDirectives((openBlock(), createElementBlock("textarea", {
+              key: 0,
+              ref_key: "textarea",
+              ref: textarea,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(code) ? code.value = $event : code = $event),
+              class: "code-editor absolute inset-0 bg-transparent overflow-hidden h-100 p-0 m-0 codeText border-none txt-start",
+              spellcheck: "false",
+              placeholder: "Write your code here",
+              "aria-label": "Code Editor",
+              "data-gramm": "false",
+              onKeydown: withKeys(withModifiers(handleTab, ["prevent"]), ["tab"]),
+              onInput: _cache[1] || (_cache[1] = ($event) => emit2("update:modelValue", unref(code)))
+            }, null, 40, _hoisted_6$b)), [
+              [vModelText, unref(code)]
+            ]) : createCommentVNode("", true)
+          ], 4)
+        ])) : createCommentVNode("", true)
+      ]);
     };
   }
 });
-const CodeEditor = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["__scopeId", "data-v-4f1dc18a"]]);
+const CodeEditor = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["__scopeId", "data-v-1fbc9b61"]]);
 const _hoisted_1$D = ["title"];
 const _hoisted_2$s = ["id", "placeholder", "required"];
 const _sfc_main$L = /* @__PURE__ */ defineComponent({
@@ -20619,7 +20630,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const RangeInput = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-fb99b679"]]);
+const RangeInput = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-e606435a"]]);
 const tableTools = [
   "mergeCells",
   "splitCells",
@@ -20814,7 +20825,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
               thin: "",
               flat: "",
               "aria-label": action.name,
-              class: normalizeClass([action.class, { active: _ctx.selectedStyles.has(action.name) }]),
+              class: normalizeClass([[action.class, { active: _ctx.selectedStyles.has(action.name) }], ""]),
               onClick: ($event) => runAction(action.name)
             }, null, 8, ["icon", "aria-label", "class", "onClick"])), [
               [_directive_tooltip, action.label]
@@ -20828,7 +20839,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const EditorToolbar = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__scopeId", "data-v-f3e90c0a"]]);
+const EditorToolbar = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__scopeId", "data-v-33dff8fa"]]);
 function createCommandExecutor(state2, commands) {
   return {
     execute(command, value) {
@@ -30616,7 +30627,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const ToggleInput = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["__scopeId", "data-v-486451e5"]]);
+const ToggleInput = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["__scopeId", "data-v-ebe691ee"]]);
 const files = {
   setBaseUrl: (baseUrl) => {
     if (!baseUrl) return;
@@ -34546,7 +34557,12 @@ function getFallbackSchema(data2, showFields) {
   const keys4 = Array.from(new Set((data2 ?? []).flatMap(Object.keys)));
   const schema = keys4.map((id) => ({
     id,
-    label: keyToLabel(id)
+    label: keyToLabel(id),
+    transform: (val) => {
+      const dateFields = ["created_at", "updated_at"];
+      if (dateFields.includes(id)) return val ? new Date(val).toLocaleString() : val;
+      return val;
+    }
   }));
   return showFields ? schema.filter((f2) => showFields.includes(f2.id) || !f2.id) : schema;
 }