@finema/core 1.4.101 → 1.4.103

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "1.4.101",
+  "version": "1.4.103",
   "configKey": "core",
   "compatibility": {
     "nuxt": "^3.7.4"

package/dist/module.mjs

@@ -1,7 +1,7 @@
 import { defineNuxtModule, createResolver, installModule, addPlugin, addComponentsDir, addImportsDir } from '@nuxt/kit';
 
 const name = "@finema/core";
-const version = "1.4.101";
+const version = "1.4.103";
 
 const colors = {
   black: "#20243E",

package/dist/runtime/components/Form/Fields.vue

@@ -154,6 +154,13 @@
         v-bind="getFieldBinding(option)"
         v-on="option.on ?? {}"
       />
+      <FormInputWYSIWYG
+        v-else-if="option.type === INPUT_TYPES.WYSIWYG"
+        :class="option.class"
+        :form="form"
+        v-bind="getFieldBinding(option)"
+        v-on="option.on ?? {}"
+      />
     </template>
   </div>
 </template>

package/dist/runtime/components/Form/InputWYSIWYG/index.vue

@@ -0,0 +1,40 @@
+<template>
+  <FieldWrapper v-bind="wrapperProps">
+    <div :id="id" />
+  </FieldWrapper>
+</template>
+<script lang="ts" setup>
+import { useFieldHOC } from '#core/composables/useForm'
+import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
+import type { IWYSIWYGFieldProps } from '#core/components/Form/InputWYSIWYG/types'
+import 'quill/dist/quill.core.css'
+import 'quill/dist/quill.snow.css'
+import { onMounted } from 'vue'
+import { useId } from '#app'
+import type Quill from 'quill'
+
+const props = withDefaults(defineProps<IWYSIWYGFieldProps>(), {})
+const id = useId()
+const { value, wrapperProps } = useFieldHOC<string>(props)
+
+onMounted(async () => {
+  if (process.client) {
+    const Quill = await import('quill')
+
+    // eslint-disable-next-line
+    const quill: Quill = new Quill.default(`#${id}`, {
+      theme: 'snow',
+      placeholder: props.placeholder,
+      readOnly: props.isDisabled || props.isReadonly,
+    })
+
+    quill.setContents(quill.clipboard.convert({ html: value.value }))
+
+    quill.on('text-change', (delta, oldDelta, source) => {
+      if (value.value === quill.getSemanticHTML()) return
+
+      value.value = quill.getSemanticHTML()
+    })
+  }
+})
+</script>

package/dist/runtime/components/Form/InputWYSIWYG/types.d.ts

@@ -0,0 +1,6 @@
+import { type IFieldProps, type IFormFieldBase, type INPUT_TYPES } from '#core/components/Form/types';
+export interface IWYSIWYGFieldProps extends IFieldProps {
+}
+export type IWYSIWYGField = IFormFieldBase<INPUT_TYPES.WYSIWYG, IWYSIWYGFieldProps, {
+    change?: (value: string) => void;
+}>;

package/dist/runtime/components/Form/types.d.ts

@@ -8,7 +8,7 @@ import { type ISelectField } from '#core/components/Form/InputSelect/types';
 import { type IToggleField } from '#core/components/Form/InputToggle/types';
 import { type ITextareaField } from '#core/components/Form/InputTextarea/types';
 import { type IDateTimeField } from '#core/components/Form/InputDateTime/date_time_field.types';
-import { type IDateTimeRangeField } from '~/src/runtime/components/Form/InputDateTimeRange/date_range_time_field.types';
+import { type IDateTimeRangeField } from '#core/components/Form/InputDateTimeRange/date_range_time_field.types';
 import { type IUploadFileClassicField } from '#core/components/Form/InputUploadFileClassic/types';
 import { type IUploadFileField } from '#core/components/Form/InputUploadFileClassicAuto/types';
 import { type IUploadDropzoneField } from '#core/components/Form/InputUploadDropzone/types';
@@ -16,6 +16,7 @@ import { type IUploadDropzoneAutoField } from '#core/components/Form/InputUpload
 import type { INumberField } from '#core/components/Form/InputNumber/types';
 import type { IUploadDropzoneAutoMultipleField } from '#core/components/Form/InputUploadDropzoneAutoMultiple/types';
 import type { IUploadDropzoneImageAutoMultipleField } from '#core/components/Form/InputUploadDropzoneImageAutoMultiple/types';
+import type { IWYSIWYGField } from '#core/components/Form/InputWYSIWYG/types';
 export declare const enum INPUT_TYPES {
     TEXT = "TEXT",
     NUMBER = "NUMBER",
@@ -36,7 +37,8 @@ export declare const enum INPUT_TYPES {
     UPLOAD_DROPZONE = "UPLOAD_DROPZONE",
     UPLOAD_DROPZONE_AUTO = "UPLOAD_DROPZONE_AUTO",
     UPLOAD_DROPZONE_AUTO_MULTIPLE = "UPLOAD_DROPZONE_AUTO_MULTIPLE",
-    UPLOAD_DROPZONE_IMAGE_AUTO_MULTIPLE = "UPLOAD_DROPZONE_IMAGE_AUTO_MULTIPLE"
+    UPLOAD_DROPZONE_IMAGE_AUTO_MULTIPLE = "UPLOAD_DROPZONE_IMAGE_AUTO_MULTIPLE",
+    WYSIWYG = "WYSIWYG"
 }
 export interface IFieldProps {
     form?: FormContext;
@@ -65,4 +67,4 @@ export interface IFormFieldBase<I extends INPUT_TYPES, P extends IFieldProps, O>
     props: P;
     on?: O;
 }
-export type IFormField = ITextField | INumberField | IStaticField | ICheckboxField | IRadioField | ISelectField | IToggleField | ITextareaField | IDateTimeField | IDateTimeRangeField | IUploadFileClassicField | IUploadFileField | IUploadDropzoneField | IUploadDropzoneAutoField | IUploadDropzoneAutoMultipleField | IUploadDropzoneImageAutoMultipleField;
+export type IFormField = ITextField | INumberField | IStaticField | ICheckboxField | IRadioField | ISelectField | IToggleField | ITextareaField | IDateTimeField | IDateTimeRangeField | IUploadFileClassicField | IUploadFileField | IUploadDropzoneField | IUploadDropzoneAutoField | IUploadDropzoneAutoMultipleField | IUploadDropzoneImageAutoMultipleField | IWYSIWYGField;

package/dist/runtime/components/Form/types.mjs

@@ -19,5 +19,6 @@ export var INPUT_TYPES = /* @__PURE__ */ ((INPUT_TYPES2) => {
   INPUT_TYPES2["UPLOAD_DROPZONE_AUTO"] = "UPLOAD_DROPZONE_AUTO";
   INPUT_TYPES2["UPLOAD_DROPZONE_AUTO_MULTIPLE"] = "UPLOAD_DROPZONE_AUTO_MULTIPLE";
   INPUT_TYPES2["UPLOAD_DROPZONE_IMAGE_AUTO_MULTIPLE"] = "UPLOAD_DROPZONE_IMAGE_AUTO_MULTIPLE";
+  INPUT_TYPES2["WYSIWYG"] = "WYSIWYG";
   return INPUT_TYPES2;
 })(INPUT_TYPES || {});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "1.4.101",
+  "version": "1.4.103",
   "repository": "https://gitlab.finema.co/finema/ui-kit",
   "license": "MIT",
   "author": "Finema Dev Core Team",
@@ -47,6 +47,7 @@
     "nuxt-security": "^1.2.1",
     "pinia": "^2.1.7",
     "qrcode.vue": "^3.4.1",
+    "quill": "2.0.0-rc.3",
     "url-join": "^5.0.0",
     "zod": "^3.22.4",
     "zod-i18n-map": "^2.27.0"
@@ -60,6 +61,7 @@
     "@nuxt/test-utils": "^3.12.0",
     "@release-it/conventional-changelog": "^8.0.1",
     "@types/node": "^20.10.17",
+    "@types/quill": "^2",
     "@vue/test-utils": "^2.4.3",
     "changelogen": "^0.5.5",
     "eslint": "^8.56.0",