@bagelink/vue 0.0.356 → 0.0.360

package/dist/components/Card.vue.d.ts

@@ -4,14 +4,14 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     h100?: boolean | undefined;
     overflowX?: boolean | undefined;
     overflowY?: boolean | undefined;
-    bg?: "info" | "light" | "warning" | "gray" | "primary" | "transparent" | "white" | "dark" | "secondary" | "success" | "danger" | undefined;
+    bg?: "info" | "light" | "warning" | "white" | "gray" | "primary" | "transparent" | "dark" | "secondary" | "success" | "danger" | undefined;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
     thin?: boolean | undefined;
     outline?: boolean | undefined;
     h100?: boolean | undefined;
     overflowX?: boolean | undefined;
     overflowY?: boolean | undefined;
-    bg?: "info" | "light" | "warning" | "gray" | "primary" | "transparent" | "white" | "dark" | "secondary" | "success" | "danger" | undefined;
+    bg?: "info" | "light" | "warning" | "white" | "gray" | "primary" | "transparent" | "dark" | "secondary" | "success" | "danger" | undefined;
 }>>>, {}, {}>, {
     default?(_: {}): any;
 }>;

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

@@ -1 +1 @@
-{"version":3,"file":"RichText.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/RichText.vue"],"names":[],"mappings":"AAOA;;gBAyPyD,MAAM;;;;gBAAN,MAAM;;;;AAL/D,wBAOG;AACH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC"}
+{"version":3,"file":"RichText.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/RichText.vue"],"names":[],"mappings":"AAcA;;gBAgQyD,MAAM;;;;gBAAN,MAAM;;;;AAL/D,wBAOG;AACH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC"}

package/dist/index.cjs

@@ -4928,7 +4928,7 @@ function slctField(id, label, options, config) {
     required: config == null ? void 0 : config.required,
     label,
     defaultValue: config == null ? void 0 : config.defaultValue,
-    attrs: { disabled: config == null ? void 0 : config.disabled }
+    attrs: { disabled: config == null ? void 0 : config.disabled, searchable: config == null ? void 0 : config.searchable }
   };
 }
 function numField(id, label, options) {
@@ -39216,13 +39216,22 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
       }
     ];
     const emit2 = __emit;
-    vue.onMounted(() => {
+    function initEditor() {
       editor.value = new Editor({
         extensions: [StarterKit],
         content: props2.modelValue,
         onUpdate: ({ editor: editor2 }) => emit2("update:modelValue", editor2.getHTML())
       });
-    });
+    }
+    vue.watch(
+      () => props2.modelValue,
+      (value) => {
+        var _a2;
+        return (_a2 = editor.value) == null ? void 0 : _a2.commands.setContent(value);
+      },
+      { immediate: true }
+    );
+    vue.onMounted(initEditor);
     vue.onBeforeUnmount(() => {
       var _a2;
       return (_a2 = editor.value) == null ? void 0 : _a2.destroy();

package/dist/index.mjs

@@ -4,7 +4,7 @@ var __publicField2 = (obj, key, value) => {
   __defNormalProp2(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { pushScopeId, popScopeId, defineComponent, nextTick, openBlock, createBlock, createElementBlock, normalizeClass, renderSlot, normalizeProps, guardReactiveProps, withScopeId, resolveComponent, normalizeStyle, withKeys, createElementVNode, Fragment as Fragment$1, createCommentVNode, mergeProps, withCtx, createVNode, ref, createApp, h as h$2, toDisplayString, inject, unref, renderList, resolveDynamicComponent, useCssVars, useSlots, computed, withModifiers, createTextVNode, watch, onMounted, onUnmounted, mergeModels, useModel, createSlots, Transition, reactive, provide, withDirectives, vModelCheckbox, toRef, isRef, Teleport, render as render$f, onBeforeUpdate, vShow, getCurrentScope, onScopeDispose, TransitionGroup, vModelDynamic, vModelText, vModelRadio, onBeforeUnmount, markRaw, getCurrentInstance, watchEffect, customRef, resolveDirective } from "vue";
+import { pushScopeId, popScopeId, defineComponent, nextTick, openBlock, createBlock, createElementBlock, normalizeClass, renderSlot, normalizeProps, guardReactiveProps, withScopeId, resolveComponent, normalizeStyle, withKeys, createElementVNode, Fragment as Fragment$1, createCommentVNode, mergeProps, withCtx, createVNode, ref, createApp, h as h$2, toDisplayString, inject, unref, renderList, resolveDynamicComponent, useCssVars, useSlots, computed, withModifiers, createTextVNode, watch, onMounted, onUnmounted, mergeModels, useModel, createSlots, Transition, reactive, provide, withDirectives, vModelCheckbox, toRef, isRef, Teleport, render as render$f, onBeforeUpdate, vShow, getCurrentScope, onScopeDispose, TransitionGroup, vModelDynamic, vModelText, vModelRadio, onBeforeUnmount, getCurrentInstance, watchEffect, markRaw, customRef, resolveDirective } from "vue";
 const sides = ["top", "right", "bottom", "left"];
 const alignments = ["start", "end"];
 const placements$1 = /* @__PURE__ */ sides.reduce((acc, side) => acc.concat(side, side + "-" + alignments[0], side + "-" + alignments[1]), []);
@@ -4926,7 +4926,7 @@ function slctField(id, label, options, config) {
     required: config == null ? void 0 : config.required,
     label,
     defaultValue: config == null ? void 0 : config.defaultValue,
-    attrs: { disabled: config == null ? void 0 : config.disabled }
+    attrs: { disabled: config == null ? void 0 : config.disabled, searchable: config == null ? void 0 : config.searchable }
   };
 }
 function numField(id, label, options) {
@@ -39214,13 +39214,22 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
       }
     ];
     const emit2 = __emit;
-    onMounted(() => {
+    function initEditor() {
       editor.value = new Editor({
         extensions: [StarterKit],
         content: props2.modelValue,
         onUpdate: ({ editor: editor2 }) => emit2("update:modelValue", editor2.getHTML())
       });
-    });
+    }
+    watch(
+      () => props2.modelValue,
+      (value) => {
+        var _a2;
+        return (_a2 = editor.value) == null ? void 0 : _a2.commands.setContent(value);
+      },
+      { immediate: true }
+    );
+    onMounted(initEditor);
     onBeforeUnmount(() => {
       var _a2;
       return (_a2 = editor.value) == null ? void 0 : _a2.destroy();

package/dist/style.css

@@ -1622,12 +1622,12 @@ img.preview[data-v-1be8d7b1] {
 }
 
 /* Basic editor styles */
-.tiptap>*+* {
-  margin-top: 0.75em;
+.tiptap > * + * {
+	margin-top: 0.75em;
 }
 .tiptap ul,
 .tiptap ol {
-  padding: 0 1rem;
+	padding: 0 1rem;
 }
 .tiptap h1,
 .tiptap h2,
@@ -1635,37 +1635,43 @@ img.preview[data-v-1be8d7b1] {
 .tiptap h4,
 .tiptap h5,
 .tiptap h6 {
-  line-height: 1.1;
+	line-height: 1.1;
 }
 .tiptap code {
-  background-color: rgba(97, 97, 97, 0.1);
-  color: #616161;
+	background-color: rgba(97, 97, 97, 0.1);
+	color: #616161;
 }
 .tiptap pre {
-  background: #0d0d0d;
-  color: #fff;
-  font-family: 'JetBrainsMono', monospace;
-  padding: 0.75rem 1rem;
-  border-radius: 0.5rem;
+	background: #0d0d0d;
+	color: #fff;
+	font-family: 'JetBrainsMono', monospace;
+	padding: 0.75rem 1rem;
+	border-radius: 0.5rem;
 }
 .tiptap pre code {
-  color: inherit;
-  padding: 0;
-  background: none;
-  font-size: 0.8rem;
+	color: inherit;
+	padding: 0;
+	background: none;
+	font-size: 0.8rem;
 }
 .tiptap img {
-  max-width: 100%;
-  height: auto;
+	max-width: 100%;
+	height: auto;
 }
 .tiptap blockquote {
-  padding-left: 1rem;
-  border-left: 2px solid rgba(13, 13, 13, 0.1);
+	padding-left: 1rem;
+	border-left: 2px solid rgba(13, 13, 13, 0.1);
 }
 .tiptap hr {
-  border: none;
-  border-top: 2px solid rgba(13, 13, 13, 0.1);
-  margin: 2rem 0;
+	border: none;
+	border-top: 2px solid rgba(13, 13, 13, 0.1);
+	margin: 2rem 0;
+}
+.tiptap {
+	min-height: 500px;
+	background: var(--input-bg);
+	overflow: auto;
+	max-height: 600px;
 }
 
 .chart-line {

package/dist/types/index.d.ts

@@ -11,5 +11,5 @@ export type Tab = {
     id: string;
     icon?: MaterialIcons;
 } | string;
-export type ThemeType = 'light' | 'red' | 'gray' | 'gray-light' | 'black' | 'green' | 'primary' | 'blue';
+export type ThemeType = 'light' | 'white' | 'red' | 'gray' | 'gray-light' | 'black' | 'green' | 'primary' | 'blue';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACX,uBAAuB,EAAE,QAAQ,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,YAAY,GACtF,MAAM,kBAAkB,CAAC;AAE1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD,YAAY,EAAE,aAAa,EAAE,CAAC;AAC9B,YAAY,EAAE,MAAM,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAChE,YAAY,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAC1C,YAAY,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEzC,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAE5B,MAAM,MAAM,GAAG,GAAG;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,aAAa,CAAC;CACtB,GAAG,MAAM,CAAA;AAEV,MAAM,MAAM,SAAS,GACnB,OAAO,GACL,KAAK,GACL,MAAM,GACN,YAAY,GACZ,OAAO,GACP,OAAO,GACP,SAAS,GACT,MAAM,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACX,uBAAuB,EAAE,QAAQ,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,YAAY,GACtF,MAAM,kBAAkB,CAAC;AAE1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD,YAAY,EAAE,aAAa,EAAE,CAAC;AAC9B,YAAY,EAAE,MAAM,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAChE,YAAY,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAC1C,YAAY,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEzC,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAE5B,MAAM,MAAM,GAAG,GAAG;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,aAAa,CAAC;CACrB,GAAG,MAAM,CAAA;AAEV,MAAM,MAAM,SAAS,GACpB,OAAO,GACL,OAAO,GACP,KAAK,GACL,MAAM,GACN,YAAY,GACZ,OAAO,GACP,OAAO,GACP,SAAS,GACT,MAAM,CAAA"}

package/dist/utils/BagelFormUtils.d.ts

@@ -3,18 +3,28 @@ export type Option = string | number | Record<string, any> | {
     label: string;
     value: string | number;
 };
-type TextInputOptions = {
+interface InputOptions {
     required?: boolean;
-    type?: 'text' | 'tel' | 'email';
     placeholder?: string;
     class?: string;
     defaultValue?: string;
     disabled?: boolean;
+}
+interface TextInputOptions extends InputOptions {
+    type?: 'text' | 'tel' | 'email';
     pattern?: string;
-};
+}
+interface SlctInputOptions extends InputOptions {
+    searchable?: boolean;
+}
+interface NumFieldOptions extends InputOptions {
+    max?: number;
+    min?: number;
+    step?: number;
+}
 export declare function txtField(id: string, label?: string, options?: TextInputOptions): Field;
-export declare function slctField(id: string, label?: string, options?: Option[] | (() => Option[]), config?: TextInputOptions): Field;
-export declare function numField(id: string, label?: string, options?: TextInputOptions): Field;
+export declare function slctField(id: string, label?: string, options?: Option[] | (() => Option[]), config?: SlctInputOptions): Field;
+export declare function numField(id: string, label?: string, options?: NumFieldOptions): Field;
 export declare function frmRow(...children: Field[]): {
     $el: string;
     class: string;

package/dist/utils/BagelFormUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BagelFormUtils.d.ts","sourceRoot":"","sources":["../../src/utils/BagelFormUtils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAE3C,MAAM,MAAM,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,CAAC;AAEvG,KAAK,gBAAgB,GAAG;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,OAAO,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB,CAAA;AAED,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,gBAAgB,GAAG,KAAK,CAUtF;AAED,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,MAAM,MAAM,EAAE,CAAC,EAAE,MAAM,CAAC,EAAE,gBAAgB,GAAG,KAAK,CAY7H;AAED,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,gBAAgB,GAAG,KAAK,CAUtF;AAED,wBAAgB,MAAM,CAAC,GAAG,QAAQ,EAAE,KAAK,EAAE;;;;EAM1C"}
+{"version":3,"file":"BagelFormUtils.d.ts","sourceRoot":"","sources":["../../src/utils/BagelFormUtils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAE3C,MAAM,MAAM,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,CAAC;AAEvG,UAAU,YAAY;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,UAAU,gBAAiB,SAAQ,YAAY;IAC9C,IAAI,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,OAAO,CAAC;IAChC,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,UAAU,gBAAiB,SAAQ,YAAY;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,UAAU,eAAgB,SAAQ,YAAY;IAC7C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,gBAAgB,GAAG,KAAK,CAUtF;AAED,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,MAAM,MAAM,EAAE,CAAC,EAAE,MAAM,CAAC,EAAE,gBAAgB,GAAG,KAAK,CAY7H;AAED,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,eAAe,GAAG,KAAK,CAUrF;AAED,wBAAgB,MAAM,CAAC,GAAG,QAAQ,EAAE,KAAK,EAAE;;;;EAM1C"}

package/package.json

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

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

@@ -1,14 +1,21 @@
 <template>
-  <div v-if="editor">
-    <Btn :flat="!editor.isActive(item.name, item.option)" @click="item.command" thin v-for="item in config"
-      v-tooltip="item.name" :key="item.name" :icon="item.icon" :disabled="item.disabled?.()" />
-  </div>
-  <editor-content :editor="editor" />
+	<div v-if="editor">
+		<Btn
+			:flat="!editor.isActive(item.name, item.option)"
+			@click="item.command"
+			thin
+			v-for="item in config"
+			v-tooltip="item.name"
+			:key="item.name"
+			:icon="item.icon"
+			:disabled="item.disabled?.()" />
+	</div>
+	<editor-content :editor="editor" />
 </template>
 
 <script setup lang="ts">
 import { Btn } from '@bagelink/vue';
-import { onMounted, onBeforeUnmount } from 'vue';
+import { onMounted, onBeforeUnmount, watch } from 'vue';
 import StarterKit from '@tiptap/starter-kit';
 import { Editor, EditorContent } from '@tiptap/vue-3';
 import type { MaterialIcons } from '@bagelink/vue';
@@ -18,158 +25,165 @@ let editor = $ref<Editor>();
 const props = defineProps<{ modelValue: string }>();
 
 const focus = () => {
-  if (!editor) throw new Error('editor is not defined');
-  return editor.chain().focus();
+	if (!editor) throw new Error('editor is not defined');
+	return editor.chain().focus();
 };
 
-const config: { name: string, command: any, icon: MaterialIcons, option?: Record<string, any>, disabled?: () => boolean }[] = [
-  {
-    name: 'bold',
-    command: () => focus()?.toggleBold().run(),
-    icon: 'format_bold',
-    disabled: () => !editor?.can().chain().focus().toggleBold()
-      .run(),
-  },
-  {
-    name: 'italic',
-    command: () => focus().toggleItalic().run(),
-    icon: 'format_italic',
-    disabled: () => !editor?.can().chain().focus().toggleItalic()
-      .run(),
-  },
-  {
-    name: 'strike',
-    command: () => focus().toggleStrike().run(),
-    icon: 'format_strikethrough',
-    disabled: () => !editor?.can().chain().focus().toggleStrike()
-      .run(),
-  },
-  {
-    name: 'code',
-    command: () => focus().toggleCode().run(),
-    icon: 'code',
-  },
-  {
-    name: 'clearMarks',
-    command: () => focus().unsetAllMarks(),
-    icon: 'clear',
-
-  },
-  {
-    name: 'clearNodes',
-    command: () => focus().clearNodes().run(),
-    icon: 'clear',
-  },
-  {
-    name: 'paragraph',
-    command: () => focus().setParagraph().run(),
-    icon: 'format_paragraph',
-  },
-  {
-    name: 'heading',
-    command: () => focus().toggleHeading({ level: 1 }).run(),
-    icon: 'format_h1',
-    option: { level: 1 },
-  },
-  {
-    name: 'heading',
-    command: () => focus().toggleHeading({ level: 2 }).run(),
-    icon: 'format_h2',
-    option: { level: 2 },
-  },
-  {
-    name: 'heading',
-    command: () => focus().toggleHeading({ level: 3 }).run(),
-    icon: 'format_h3',
-    option: { level: 3 },
-  },
-  {
-    name: 'heading',
-    command: () => focus().toggleHeading({ level: 4 }).run(),
-    icon: 'format_h4',
-    option: { level: 4 },
-  },
-  {
-    name: 'heading',
-    command: () => focus().toggleHeading({ level: 5 }).run(),
-    icon: 'format_h5',
-    option: { level: 5 },
-  },
-  {
-    name: 'heading',
-    command: () => focus().toggleHeading({ level: 6 }).run(),
-    icon: 'format_h6',
-    option: { level: 6 },
-  },
-  {
-    name: 'bulletList',
-    command: () => focus().toggleBulletList().run(),
-    icon: 'format_list_bulleted',
-  },
-  {
-    name: 'orderedList',
-    command: () => focus().toggleOrderedList().run(),
-    icon: 'format_list_numbered',
-  },
-  {
-    name: 'codeBlock',
-    command: () => focus().toggleCodeBlock().run(),
-    icon: 'code',
-  },
-  {
-    name: 'blockquote',
-    command: () => focus().toggleBlockquote().run(),
-    icon: 'format_quote',
-  },
-  {
-    name: 'horizontalRule',
-    command: () => focus().setHorizontalRule().run(),
-    icon: 'horizontal_rule',
-  },
-  {
-    name: 'hardBreak',
-    command: () => focus().setHardBreak().run(),
-    icon: 'keyboard_return',
-
-  },
-  {
-    name: 'undo',
-    command: () => focus().undo().run(),
-    icon: 'undo',
-    disabled: () => !editor?.can().chain().focus().undo()
-      .run(),
-  },
-  {
-    name: 'redo',
-    command: () => focus().redo().run(),
-    icon: 'redo',
-    disabled: () => !editor?.can().chain().focus().redo()
-      .run(),
-  },
+const config: {
+	name: string;
+	command: any;
+	icon: MaterialIcons;
+	option?: Record<string, any>;
+	disabled?: () => boolean;
+}[] = [
+	{
+		name: 'bold',
+		command: () => focus()?.toggleBold().run(),
+		icon: 'format_bold',
+		disabled: () => !editor?.can().chain().focus().toggleBold().run(),
+	},
+	{
+		name: 'italic',
+		command: () => focus().toggleItalic().run(),
+		icon: 'format_italic',
+		disabled: () => !editor?.can().chain().focus().toggleItalic().run(),
+	},
+	{
+		name: 'strike',
+		command: () => focus().toggleStrike().run(),
+		icon: 'format_strikethrough',
+		disabled: () => !editor?.can().chain().focus().toggleStrike().run(),
+	},
+	{
+		name: 'code',
+		command: () => focus().toggleCode().run(),
+		icon: 'code',
+	},
+	{
+		name: 'clearMarks',
+		command: () => focus().unsetAllMarks(),
+		icon: 'clear',
+	},
+	{
+		name: 'clearNodes',
+		command: () => focus().clearNodes().run(),
+		icon: 'clear',
+	},
+	{
+		name: 'paragraph',
+		command: () => focus().setParagraph().run(),
+		icon: 'format_paragraph',
+	},
+	{
+		name: 'heading',
+		command: () => focus().toggleHeading({ level: 1 }).run(),
+		icon: 'format_h1',
+		option: { level: 1 },
+	},
+	{
+		name: 'heading',
+		command: () => focus().toggleHeading({ level: 2 }).run(),
+		icon: 'format_h2',
+		option: { level: 2 },
+	},
+	{
+		name: 'heading',
+		command: () => focus().toggleHeading({ level: 3 }).run(),
+		icon: 'format_h3',
+		option: { level: 3 },
+	},
+	{
+		name: 'heading',
+		command: () => focus().toggleHeading({ level: 4 }).run(),
+		icon: 'format_h4',
+		option: { level: 4 },
+	},
+	{
+		name: 'heading',
+		command: () => focus().toggleHeading({ level: 5 }).run(),
+		icon: 'format_h5',
+		option: { level: 5 },
+	},
+	{
+		name: 'heading',
+		command: () => focus().toggleHeading({ level: 6 }).run(),
+		icon: 'format_h6',
+		option: { level: 6 },
+	},
+	{
+		name: 'bulletList',
+		command: () => focus().toggleBulletList().run(),
+		icon: 'format_list_bulleted',
+	},
+	{
+		name: 'orderedList',
+		command: () => focus().toggleOrderedList().run(),
+		icon: 'format_list_numbered',
+	},
+	{
+		name: 'codeBlock',
+		command: () => focus().toggleCodeBlock().run(),
+		icon: 'code',
+	},
+	{
+		name: 'blockquote',
+		command: () => focus().toggleBlockquote().run(),
+		icon: 'format_quote',
+	},
+	{
+		name: 'horizontalRule',
+		command: () => focus().setHorizontalRule().run(),
+		icon: 'horizontal_rule',
+	},
+	{
+		name: 'hardBreak',
+		command: () => focus().setHardBreak().run(),
+		icon: 'keyboard_return',
+	},
+	{
+		name: 'undo',
+		command: () => focus().undo().run(),
+		icon: 'undo',
+		disabled: () => !editor?.can().chain().focus().undo().run(),
+	},
+	{
+		name: 'redo',
+		command: () => focus().redo().run(),
+		icon: 'redo',
+		disabled: () => !editor?.can().chain().focus().redo().run(),
+	},
 ];
 
 const emit = defineEmits(['update:modelValue']);
 
-onMounted(() => {
-  editor = new Editor({
-    extensions: [StarterKit],
-    content: props.modelValue,
-    onUpdate: ({ editor }) => emit('update:modelValue', editor.getHTML()),
-  });
-});
+function initEditor() {
+	editor = new Editor({
+		extensions: [StarterKit],
+		content: props.modelValue,
+		onUpdate: ({ editor }) => emit('update:modelValue', editor.getHTML()),
+	});
+}
+
+watch(
+	() => props.modelValue,
+	(value) => editor?.commands.setContent(value),
+	{ immediate: true }
+);
+
+onMounted(initEditor);
 
 onBeforeUnmount(() => editor?.destroy());
 </script>
 
 <style>
 /* Basic editor styles */
-.tiptap>*+* {
-  margin-top: 0.75em;
+.tiptap > * + * {
+	margin-top: 0.75em;
 }
 
 .tiptap ul,
 .tiptap ol {
-  padding: 0 1rem;
+	padding: 0 1rem;
 }
 
 .tiptap h1,
@@ -178,42 +192,49 @@ onBeforeUnmount(() => editor?.destroy());
 .tiptap h4,
 .tiptap h5,
 .tiptap h6 {
-  line-height: 1.1;
+	line-height: 1.1;
 }
 
 .tiptap code {
-  background-color: rgba(97, 97, 97, 0.1);
-  color: #616161;
+	background-color: rgba(97, 97, 97, 0.1);
+	color: #616161;
 }
 
 .tiptap pre {
-  background: #0d0d0d;
-  color: #fff;
-  font-family: 'JetBrainsMono', monospace;
-  padding: 0.75rem 1rem;
-  border-radius: 0.5rem;
+	background: #0d0d0d;
+	color: #fff;
+	font-family: 'JetBrainsMono', monospace;
+	padding: 0.75rem 1rem;
+	border-radius: 0.5rem;
 }
 
 .tiptap pre code {
-  color: inherit;
-  padding: 0;
-  background: none;
-  font-size: 0.8rem;
+	color: inherit;
+	padding: 0;
+	background: none;
+	font-size: 0.8rem;
 }
 
 .tiptap img {
-  max-width: 100%;
-  height: auto;
+	max-width: 100%;
+	height: auto;
 }
 
 .tiptap blockquote {
-  padding-left: 1rem;
-  border-left: 2px solid rgba(13, 13, 13, 0.1);
+	padding-left: 1rem;
+	border-left: 2px solid rgba(13, 13, 13, 0.1);
 }
 
 .tiptap hr {
-  border: none;
-  border-top: 2px solid rgba(13, 13, 13, 0.1);
-  margin: 2rem 0;
+	border: none;
+	border-top: 2px solid rgba(13, 13, 13, 0.1);
+	margin: 2rem 0;
+}
+
+.tiptap {
+	min-height: 500px;
+	background: var(--input-bg);
+	overflow: auto;
+	max-height: 600px;
 }
 </style>

package/src/types/index.ts

@@ -13,17 +13,18 @@ export * from './BtnOptions';
 export * from './BagelForm';
 
 export type Tab = {
-  label: string;
-  id: string;
-  icon?: MaterialIcons;
+	label: string;
+	id: string;
+	icon?: MaterialIcons;
 } | string
 
 export type ThemeType = |
-  'light'
-  | 'red'
-  | 'gray'
-  | 'gray-light'
-  | 'black'
-  | 'green'
-  | 'primary'
-  | 'blue' // ! blue does nothing
+	'light'
+	| 'white'
+	| 'red'
+	| 'gray'
+	| 'gray-light'
+	| 'black'
+	| 'green'
+	| 'primary'
+	| 'blue' // ! blue does nothing

package/src/utils/BagelFormUtils.ts

@@ -2,16 +2,29 @@ import type { Field } from '@bagelink/vue';
 
 export type Option = string | number | Record<string, any> | { label: string, value: string | number };
 
-type TextInputOptions = {
+interface InputOptions {
 	required?: boolean;
-	type?: 'text' | 'tel' | 'email';
 	placeholder?: string;
-	class?: string
+	class?: string;
 	defaultValue?: string;
 	disabled?: boolean;
+}
+
+interface TextInputOptions extends InputOptions {
+	type?: 'text' | 'tel' | 'email';
 	pattern?: string;
 }
 
+interface SlctInputOptions extends InputOptions {
+	searchable?: boolean;
+}
+
+interface NumFieldOptions extends InputOptions {
+	max?: number;
+	min?: number;
+	step?: number;
+}
+
 export function txtField(id: string, label?: string, options?: TextInputOptions): Field {
 	return {
 		$el: 'text',
@@ -24,7 +37,7 @@ export function txtField(id: string, label?: string, options?: TextInputOptions)
 	};
 }
 
-export function slctField(id: string, label?: string, options?: Option[] | (() => Option[]), config?: TextInputOptions): Field {
+export function slctField(id: string, label?: string, options?: Option[] | (() => Option[]), config?: SlctInputOptions): Field {
 	return {
 		$el: 'select',
 		id,
@@ -34,11 +47,11 @@ export function slctField(id: string, label?: string, options?: Option[] | (() =
 		required: config?.required,
 		label,
 		defaultValue: config?.defaultValue,
-		attrs: { disabled: config?.disabled },
+		attrs: { disabled: config?.disabled, searchable: config?.searchable },
 	};
 }
 
-export function numField(id: string, label?: string, options?: TextInputOptions): Field {
+export function numField(id: string, label?: string, options?: NumFieldOptions): Field {
 	return {
 		$el: 'text',
 		class: options?.class,