@finema/core 2.14.0 → 2.15.0

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "2.14.0",
+  "version": "2.15.0",
   "configKey": "core",
   "builder": {
     "@nuxt/module-builder": "1.0.1",

package/dist/module.mjs

@@ -3,7 +3,7 @@ import defu from 'defu';
 import * as theme from '../dist/runtime/theme/index.js';
 
 const name = "@finema/core";
-const version = "2.14.0";
+const version = "2.15.0";
 
 const nuxtAppOptions = {
   head: {

package/dist/runtime/components/FlexDeck/Base.vue

@@ -40,7 +40,7 @@
     <div class="flex h-60 items-center justify-center">
       <Icon
         name="i-svg-spinners:180-ring-with-bg"
-        class="text-primary size-8"
+        class="size-8 text-primary"
       />
     </div>
   </slot>

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

@@ -1,19 +1,19 @@
 <template>
-  <div
+  <div
     :class="[theme.base({
   class: [$props.class, ui?.base]
-})]"
-  >
-    <component
-      :is="componentMap[option.type]?.component"
-      v-for="option in options.filter((item) => !item.isHide)"
-      :key="option.props.name"
-      :class="option.class"
-      :form="form"
-      v-bind="{ ...getFieldBinding(option), ...componentMap[option.type]?.props }"
-      v-on="option.on ?? {}"
-    />
-  </div>
+})]"
+  >
+    <component
+      :is="componentMap[option.type]?.component"
+      v-for="option in options.filter((item) => !item.isHide)"
+      :key="option.props.name"
+      :class="option.class"
+      :form="form"
+      v-bind="{ ...getFieldBinding(option), ...componentMap[option.type]?.props }"
+      v-on="option.on ?? {}"
+    />
+  </div>
 </template>
 
 <script setup>
@@ -25,9 +25,11 @@ import FormInputToggle from "./InputToggle/index.vue";
 import FormInputCheckbox from "./InputCheckbox/index.vue";
 import FormInputSelect from "./InputSelect/index.vue";
 import FormInputSelectMultiple from "./InputSelectMultiple/index.vue";
+import FormInputRadio from "./InputRadio/index.vue";
 import FormInputDateTime from "./InputDateTime/index.vue";
 import FormInputDateTimeRange from "./InputDateTimeRange/index.vue";
 import FormInputUploadDropzoneAuto from "./InputUploadDropzoneAuto/index.vue";
+import FormInputWYSIWYG from "./InputWYSIWYG/index.vue";
 import { INPUT_TYPES } from "#core/components/Form/types";
 import { formTheme } from "#core/theme/form";
 import { useUiConfig } from "#core/composables/useConfig";
@@ -84,7 +86,10 @@ const componentMap = {
     }
   },
   [INPUT_TYPES.STATIC]: void 0,
-  [INPUT_TYPES.RADIO]: void 0,
+  [INPUT_TYPES.RADIO]: {
+    component: FormInputRadio,
+    props: {}
+  },
   [INPUT_TYPES.DATE_TIME]: {
     component: FormInputDateTime,
     props: {}
@@ -115,7 +120,10 @@ const componentMap = {
   },
   [INPUT_TYPES.UPLOAD_DROPZONE_AUTO_MULTIPLE]: void 0,
   [INPUT_TYPES.UPLOAD_DROPZONE_IMAGE_AUTO_MULTIPLE]: void 0,
-  [INPUT_TYPES.WYSIWYG]: void 0,
+  [INPUT_TYPES.WYSIWYG]: {
+    component: FormInputWYSIWYG,
+    props: {}
+  },
   [INPUT_TYPES.TAGS]: void 0
 };
 const theme = computed(() => useUiConfig(formTheme, "form")({

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

@@ -0,0 +1,56 @@
+<template>
+  <FieldWrapper v-bind="wrapperProps">
+    <RadioGroup
+      :model-value="value"
+      :items="options"
+      :variant="variant"
+      :orientation="orientation"
+      :indicator="indicator"
+      :legend="legend"
+      :disabled="wrapperProps.disabled"
+      :required="wrapperProps.required"
+      :name="wrapperProps.name"
+      value-key="value"
+      label-key="label"
+      description-key="description"
+      :ui="ui"
+      @update:model-value="onChange"
+    />
+  </FieldWrapper>
+</template>
+
+<script setup>
+import FieldWrapper from "#core/components/Form/FieldWrapper.vue";
+import { useFieldHOC } from "#core/composables/useForm";
+const emits = defineEmits(["change"]);
+const props = defineProps({
+  variant: { type: String, required: false, default: "list" },
+  orientation: { type: String, required: false, default: "vertical" },
+  indicator: { type: String, required: false, default: "start" },
+  options: { type: Array, required: true },
+  legend: { type: String, required: false },
+  form: { type: Object, required: false },
+  name: { type: String, required: true },
+  errorMessage: { type: String, required: false },
+  label: { type: null, required: false },
+  description: { type: String, required: false },
+  hint: { type: String, required: false },
+  rules: { type: null, required: false },
+  autoFocus: { type: Boolean, required: false },
+  placeholder: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false },
+  required: { type: Boolean, required: false },
+  help: { type: String, required: false },
+  ui: { type: null, required: false }
+});
+const {
+  value,
+  wrapperProps,
+  handleChange
+} = useFieldHOC(props);
+const onChange = (newValue) => {
+  handleChange(newValue);
+  emits("change", newValue);
+};
+</script>

package/dist/runtime/components/Form/InputRadio/index.vue.d.ts

@@ -0,0 +1,11 @@
+import type { IRadioFieldProps } from '#core/components/Form/InputRadio/types';
+declare const _default: import("vue").DefineComponent<IRadioFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (value: any) => any;
+}, string, import("vue").PublicProps, Readonly<IRadioFieldProps> & Readonly<{
+    onChange?: ((value: any) => any) | undefined;
+}>, {
+    orientation: "horizontal" | "vertical";
+    variant: "list" | "card" | "table";
+    indicator: "start" | "end" | "hidden";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,19 @@
+import type { IFieldProps, IFormFieldBase, INPUT_TYPES } from '#core/components/Form/types';
+import type { IOption } from '#core/types/common';
+export type RadioOption = IOption & {
+    label?: string;
+    value?: any;
+    description?: string;
+    disabled?: boolean;
+    class?: any;
+};
+export interface IRadioFieldProps extends IFieldProps {
+    variant?: 'list' | 'card' | 'table';
+    orientation?: 'horizontal' | 'vertical';
+    indicator?: 'start' | 'end' | 'hidden';
+    options: RadioOption[];
+    legend?: string;
+}
+export type IRadioField = IFormFieldBase<INPUT_TYPES.RADIO, IRadioFieldProps, {
+    change?: (value: any) => void;
+}>;

package/dist/runtime/components/Form/InputUploadDropzoneAuto/EmptyState.vue

@@ -6,7 +6,7 @@
     />
     <div :class="theme.labelWrapper()">
       <p
-        class="text-primary cursor-pointer font-bold"
+        class="cursor-pointer font-bold text-primary"
         @click="$emit('openFile')"
       >
         {{ selectFileLabel }}

package/dist/runtime/components/Form/InputUploadDropzoneAuto/FailedState.vue

@@ -11,7 +11,7 @@
         <h1 class="truncate font-bold">
           {{ selectedFile.name }}
         </h1>
-        <p class="text-error truncate font-light">
+        <p class="truncate font-light text-error">
           {{ uploadFailedLabel }}
         </p>
         <Button

package/dist/runtime/components/Form/InputUploadDropzoneAuto/useUploadState.js

@@ -32,8 +32,8 @@ export const useUploadState = (props, emits, onChange, setErrors, value, accepte
   };
   const upload = useUploadLoader(request);
   const validateFile = (file) => {
-    const acceptedTypes = fileAllocate.acceptFile.value;
-    if (acceptedTypes) {
+    if (props.accept && fileAllocate.acceptFile.value) {
+      const acceptedTypes = fileAllocate.acceptFile.value;
       const acceptedTypesList = acceptedTypes.split(",").map((type) => type.trim());
       const fileExtension = file.name.toLowerCase().split(".").pop();
       const isValidFileType = acceptedTypesList.some((acceptedType) => {
@@ -113,6 +113,11 @@ export const useUploadState = (props, emits, onChange, setErrors, value, accepte
       processFile(file);
     }
   };
+  fileDialog.onChange((files) => {
+    if (files?.length) {
+      processFile(files[0]);
+    }
+  });
   const handleOpenFile = () => {
     if (wrapperProps.value.disabled || wrapperProps.value.readonly) return;
     fileDialog.open();
@@ -136,14 +141,6 @@ export const useUploadState = (props, emits, onChange, setErrors, value, accepte
       value: value.value
     });
   };
-  watch(
-    () => fileDialog.files.value,
-    (files) => {
-      if (files?.length) {
-        processFile(files[0]);
-      }
-    }
-  );
   watch(
     () => upload.status.value.isSuccess,
     (isSuccess2) => {
@@ -163,7 +160,7 @@ export const useUploadState = (props, emits, onChange, setErrors, value, accepte
     () => upload.status.value.isError,
     (isError2) => {
       if (isError2) {
-        setErrors(StringHelper.getError(upload.status.value.errorData));
+        setErrors("\u0E1E\u0E1A\u0E02\u0E49\u0E2D\u0E1C\u0E34\u0E14\u0E1E\u0E25\u0E32\u0E14: " + StringHelper.getError(upload.status.value.errorData));
       }
     }
   );

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

@@ -0,0 +1,38 @@
+<template>
+  <div class="upload-image-form">
+    <input
+      ref="fileInput"
+      type="file"
+      accept="image/*"
+      @change="handleFileSelect"
+    />
+    <button
+      type="button"
+      @click="handleUpload"
+    >
+      Upload
+    </button>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+const props = defineProps({
+  options: { type: Object, required: false }
+});
+const emit = defineEmits(["submit"]);
+const fileInput = ref();
+const selectedFile = ref(null);
+const handleFileSelect = (event) => {
+  const target = event.target;
+  const file = target.files?.[0];
+  if (file) {
+    selectedFile.value = file;
+  }
+};
+const handleUpload = async () => {
+  if (!selectedFile.value) return;
+  const url = URL.createObjectURL(selectedFile.value);
+  emit("submit", url);
+};
+</script>

package/dist/runtime/components/Form/InputWYSIWYG/UploadImageForm.vue.d.ts

@@ -0,0 +1,11 @@
+interface Props {
+    options?: {
+        requestOptions?: any;
+    };
+}
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    submit: (url: string) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onSubmit?: ((url: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,281 @@
+<template>
+  <FieldWrapper v-bind="wrapperProps">
+    <div :class="ui.container()">
+      <div
+        v-if="showToolbar"
+        :class="ui.toolbar()"
+      >
+        <div
+          v-for="(items, index) in menuItems"
+          :key="index"
+          :class="ui.toolbarGroup()"
+        >
+          <button
+            v-for="item in items"
+            :key="item.name"
+            :class="[ui.menuItem(), { [ui.menuItemActive()]: item.isActive?.() }]"
+            type="button"
+            :title="item.title"
+            @click="item.action"
+          >
+            <Icon
+              :name="item.icon"
+              :class="ui.icon()"
+            />
+          </button>
+        </div>
+      </div>
+      <ClientOnly>
+        <EditorContent
+          :editor="editor"
+          :class="ui.editorContent()"
+        />
+        <template #fallback>
+          <div
+            class="min-h-[200px]"
+            v-html="value"
+          />
+        </template>
+      </ClientOnly>
+    </div>
+  </FieldWrapper>
+</template>
+
+<script setup>
+import { computed, watch } from "vue";
+import { EditorContent, useEditor } from "@tiptap/vue-3";
+import StarterKit from "@tiptap/starter-kit";
+import Underline from "@tiptap/extension-underline";
+import TextAlign from "@tiptap/extension-text-align";
+import Link from "@tiptap/extension-link";
+import Image from "@tiptap/extension-image";
+import Youtube from "@tiptap/extension-youtube";
+import { useFieldHOC } from "#core/composables/useForm";
+import FieldWrapper from "#core/components/Form/FieldWrapper.vue";
+import { wysiwygTheme } from "#core/theme/wysiwyg";
+import { useUiConfig } from "#core/composables/useConfig";
+const props = defineProps({
+  editable: { type: Boolean, required: false },
+  autofocus: { type: Boolean, required: false },
+  content: { type: String, required: false },
+  toolbar: { type: Object, required: false },
+  minHeight: { type: [String, Number], required: false },
+  maxHeight: { type: [String, Number], required: false },
+  size: { type: String, required: false, default: "md" },
+  color: { type: String, required: false, default: "gray" },
+  imageUpload: { type: Object, required: false },
+  linkOptions: { type: Object, required: false },
+  containerUi: { type: null, required: false },
+  image: { type: Object, required: false },
+  form: { type: Object, required: false },
+  name: { type: String, required: true },
+  errorMessage: { type: String, required: false },
+  label: { type: null, required: false },
+  description: { type: String, required: false },
+  hint: { type: String, required: false },
+  rules: { type: null, required: false },
+  autoFocus: { type: Boolean, required: false },
+  placeholder: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false },
+  required: { type: Boolean, required: false },
+  help: { type: String, required: false },
+  ui: { type: null, required: false }
+});
+const {
+  value,
+  wrapperProps
+} = useFieldHOC(props);
+const ui = computed(() => useUiConfig(wysiwygTheme, "wysiwyg")({
+  size: props.size,
+  color: props.color
+}));
+const showToolbar = computed(() => {
+  if (!props.toolbar) return true;
+  return Object.values(props.toolbar).some(Boolean);
+});
+const editor = useEditor({
+  content: value.value,
+  extensions: [
+    StarterKit,
+    Underline,
+    TextAlign.configure({
+      types: ["heading", "paragraph"]
+    }),
+    Link.configure({
+      openOnClick: false
+    }),
+    Image,
+    Youtube
+  ],
+  editorProps: {
+    attributes: {
+      class: "prose px-4 py-2 focus:outline-none min-h-[200px]"
+    }
+  },
+  onUpdate: ({
+    editor: editor2
+  }) => {
+    value.value = editor2.getHTML();
+  }
+});
+watch(value, (newValue) => {
+  if (editor.value && newValue !== editor.value.getHTML()) {
+    editor.value.commands.setContent(newValue);
+  }
+});
+const toolbarConfig = {
+  format: [
+    {
+      key: "bold",
+      name: "bold",
+      icon: "ph:text-b-bold",
+      action: () => editor.value?.chain().focus().toggleBold().run(),
+      isActive: () => editor.value?.isActive("bold") || false,
+      title: "\u0E15\u0E31\u0E27\u0E2B\u0E19\u0E32"
+    },
+    {
+      key: "italic",
+      name: "italic",
+      icon: "ph:text-italic",
+      action: () => editor.value?.chain().focus().toggleItalic().run(),
+      isActive: () => editor.value?.isActive("italic") || false,
+      title: "\u0E15\u0E31\u0E27\u0E40\u0E2D\u0E35\u0E22\u0E07"
+    },
+    {
+      key: "underline",
+      name: "underline",
+      icon: "ph:text-underline",
+      action: () => editor.value?.chain().focus().toggleUnderline().run(),
+      isActive: () => editor.value?.isActive("underline") || false,
+      title: "\u0E02\u0E35\u0E14\u0E40\u0E2A\u0E49\u0E19\u0E43\u0E15\u0E49"
+    }
+  ],
+  list: [
+    {
+      key: "bulletList",
+      name: "bullet-list",
+      icon: "ph:list-bullets",
+      action: () => editor.value?.chain().focus().toggleBulletList().run(),
+      isActive: () => editor.value?.isActive("bulletList") || false,
+      title: "\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23\u0E2A\u0E31\u0E0D\u0E25\u0E31\u0E01\u0E29\u0E13\u0E4C"
+    },
+    {
+      key: "orderedList",
+      name: "ordered-list",
+      icon: "ph:list-numbers",
+      action: () => editor.value?.chain().focus().toggleOrderedList().run(),
+      isActive: () => editor.value?.isActive("orderedList") || false,
+      title: "\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23\u0E25\u0E33\u0E14\u0E31\u0E1A"
+    }
+  ],
+  textAlign: [
+    {
+      key: "textAlign",
+      name: "align-left",
+      icon: "ph:text-align-left",
+      action: () => editor.value?.chain().focus().setTextAlign("left").run(),
+      isActive: () => editor.value?.isActive({
+        textAlign: "left"
+      }) || false,
+      title: "\u0E08\u0E31\u0E14\u0E0A\u0E34\u0E14\u0E0B\u0E49\u0E32\u0E22"
+    },
+    {
+      key: "textAlign",
+      name: "align-center",
+      icon: "ph:text-align-center",
+      action: () => editor.value?.chain().focus().setTextAlign("center").run(),
+      isActive: () => editor.value?.isActive({
+        textAlign: "center"
+      }) || false,
+      title: "\u0E08\u0E31\u0E14\u0E01\u0E36\u0E48\u0E07\u0E01\u0E25\u0E32\u0E07"
+    },
+    {
+      key: "textAlign",
+      name: "align-right",
+      icon: "ph:text-align-right",
+      action: () => editor.value?.chain().focus().setTextAlign("right").run(),
+      isActive: () => editor.value?.isActive({
+        textAlign: "right"
+      }) || false,
+      title: "\u0E08\u0E31\u0E14\u0E0A\u0E34\u0E14\u0E02\u0E27\u0E32"
+    }
+  ],
+  media: [
+    {
+      key: "link",
+      name: "link",
+      icon: "ph:link-simple",
+      action: () => {
+        const url = window.prompt("URL");
+        if (url) {
+          editor.value?.chain().focus().setLink({
+            href: url
+          }).run();
+        }
+      },
+      isActive: () => editor.value?.isActive("link") || false,
+      title: "\u0E41\u0E17\u0E23\u0E01\u0E25\u0E34\u0E07\u0E01\u0E4C"
+    },
+    {
+      key: "image",
+      name: "image",
+      icon: "ph:image",
+      action: () => {
+        const url = window.prompt("URL \u0E23\u0E39\u0E1B\u0E20\u0E32\u0E1E");
+        if (url) {
+          editor.value?.chain().focus().setImage({
+            src: url
+          }).run();
+        }
+      },
+      title: "\u0E41\u0E17\u0E23\u0E01\u0E23\u0E39\u0E1B\u0E20\u0E32\u0E1E"
+    },
+    {
+      key: "youtube",
+      name: "video",
+      icon: "ph:video-camera",
+      action: () => {
+        const url = window.prompt("URL \u0E27\u0E34\u0E14\u0E35\u0E42\u0E2D");
+        if (url) {
+          editor.value?.chain().focus().setYoutubeVideo({
+            src: url
+          }).run();
+        }
+      },
+      title: "\u0E41\u0E17\u0E23\u0E01\u0E27\u0E34\u0E14\u0E35\u0E42\u0E2D"
+    }
+  ],
+  history: [
+    {
+      key: "undo",
+      name: "undo",
+      icon: "ph:arrow-counter-clockwise",
+      action: () => editor.value?.chain().focus().undo().run(),
+      title: "\u0E40\u0E25\u0E34\u0E01\u0E17\u0E33"
+    },
+    {
+      key: "redo",
+      name: "redo",
+      icon: "ph:arrow-clockwise",
+      action: () => editor.value?.chain().focus().redo().run(),
+      title: "\u0E17\u0E33\u0E43\u0E2B\u0E21\u0E48"
+    }
+  ]
+};
+const menuItems = computed(() => {
+  const items = [];
+  Object.entries(toolbarConfig).forEach(([groupKey, groupItems]) => {
+    const enabledItems = groupItems.filter((item) => {
+      if (groupKey === "textAlign") {
+        return props.toolbar?.textAlign;
+      }
+      return props.toolbar?.[item.key];
+    });
+    if (enabledItems.length > 0) {
+      items.push(enabledItems);
+    }
+  });
+  return items;
+});
+</script>

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

@@ -0,0 +1,6 @@
+import type { IWYSIWYGFieldProps } from '#core/components/Form/InputWYSIWYG/types';
+declare const _default: import("vue").DefineComponent<IWYSIWYGFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<IWYSIWYGFieldProps> & Readonly<{}>, {
+    size: "xs" | "sm" | "md" | "lg" | "xl";
+    color: "primary" | "gray";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,52 @@
+import type { Editor } from '@tiptap/vue-3';
+import type { IFieldProps, IFormFieldBase, INPUT_TYPES } from '#core/components/Form/types';
+export interface IWYSIWYGFieldProps extends IFieldProps {
+    editable?: boolean;
+    autofocus?: boolean;
+    content?: string;
+    toolbar?: {
+        bold?: boolean;
+        italic?: boolean;
+        underline?: boolean;
+        strike?: boolean;
+        code?: boolean;
+        heading?: boolean | number[];
+        paragraph?: boolean;
+        bulletList?: boolean;
+        orderedList?: boolean;
+        blockquote?: boolean;
+        codeBlock?: boolean;
+        horizontalRule?: boolean;
+        link?: boolean;
+        image?: boolean;
+        youtube?: boolean;
+        textAlign?: boolean;
+        undo?: boolean;
+        redo?: boolean;
+    };
+    minHeight?: string | number;
+    maxHeight?: string | number;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    color?: 'primary' | 'gray';
+    imageUpload?: {
+        enabled?: boolean;
+        uploadUrl?: string;
+        maxSize?: number;
+        accept?: string[];
+        headers?: Record<string, string>;
+    };
+    linkOptions?: {
+        openOnClick?: boolean;
+        HTMLAttributes?: Record<string, any>;
+    };
+    containerUi?: any;
+    image?: {
+        requestOptions?: any;
+    };
+}
+export type IWYSIWYGField = IFormFieldBase<INPUT_TYPES.WYSIWYG, IWYSIWYGFieldProps, {
+    change?: (content: string) => void;
+    update?: (content: string, editor: Editor) => void;
+    focus?: (editor: Editor) => void;
+    blur?: (editor: Editor) => void;
+}>;

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

@@ -10,6 +10,8 @@ import type { ICheckboxField } from '#core/components/Form/InputCheckbox/types';
 import type { ISelectMultipleField } from '#core/components/Form/InputSelectMultiple/types';
 import type { INumberField } from '#core/components/Form/InputNumber/types';
 import type { IDateTimeField } from '#core/components/Form/InputDateTime/date_time_field.types';
+import type { IRadioField } from '#core/components/Form/InputRadio/types';
+import type { IWYSIWYGField } from '#core/components/Form/InputWYSIWYG/types';
 export declare const enum INPUT_TYPES {
     TEXT = "TEXT",
     NUMBER = "NUMBER",
@@ -62,7 +64,7 @@ export interface IFormFieldBase<I extends INPUT_TYPES, P extends IFieldProps, O>
     props: P;
     on?: O;
 }
-export type IFormField = ITextField | INumberField | ITextareaField | IToggleField | ISelectField | ICheckboxField | ISelectMultipleField | IDateTimeField | IDateTimeRangeField | IUploadDropzoneAutoField | IFormFieldBase<INPUT_TYPES.COMPONENT, any, any>;
+export type IFormField = ITextField | INumberField | ITextareaField | IToggleField | ISelectField | ICheckboxField | ISelectMultipleField | IRadioField | IDateTimeField | IDateTimeRangeField | IUploadDropzoneAutoField | IWYSIWYGField | IFormFieldBase<INPUT_TYPES.COMPONENT, any, any>;
 export interface IFileValue {
     url: string;
     path?: string;

package/dist/runtime/components/Image.vue

@@ -20,7 +20,7 @@
           <p class="text-error-400">
             <Icon
               name="i-heroicons:exclamation-circle-solid"
-              class="text-error-400 size-8"
+              class="size-8 text-error-400"
             />
           </p>
         </div>

package/dist/runtime/components/Table/Base.vue

@@ -18,7 +18,7 @@
       <div class="flex h-60 items-center justify-center">
         <Icon
           name="i-svg-spinners:180-ring-with-bg"
-          class="text-primary size-8"
+          class="size-8 text-primary"
         />
       </div>
     </template>

package/dist/runtime/components/Table/index.vue

@@ -53,7 +53,7 @@
           name="error"
         >
           <div
-            class="text-error-400 flex h-[200px] items-center justify-center text-2xl"
+            class="flex h-[200px] items-center justify-center text-2xl text-error-400"
           >
             {{ StringHelper.getError(options.status.errorData) }}
           </div>

package/dist/runtime/styles/main.css

@@ -1 +1 @@
-@import "tailwindcss";@import "@nuxt/ui";@theme static{--font-sans:"Noto Sans Thai","Noto Sans Thai Looped","Public Sans",sans-serif;--color-main:#232c5a;--color-main-50:#f4f4f7;--color-main-100:#e9eaef;--color-main-200:#c8cad6;--color-main-300:#a7abbd;--color-main-400:#656b8c;--color-main-500:#232c5a;--color-main-600:#202851;--color-main-700:#151a36;--color-main-800:#101429;--color-main-900:#0b0d1b;--color-main-950:#0b0d1b;--color-secondary:#ee8b36;--color-secondary-50:#fdf1e7;--color-secondary-100:#f9d6b8;--color-secondary-200:#f5bb89;--color-secondary-300:#f1a05a;--color-secondary-400:#ed852b;--color-secondary-500:#d46b12;--color-secondary-600:#a5540e;--color-secondary-700:#763c0a;--color-secondary-800:#472406;--color-secondary-900:#180c02;--color-info:#0d8cee;--color-info-50:#f3f9fe;--color-info-100:#e7f4fd;--color-info-200:#ebf6ff;--color-info-300:#9ed1f8;--color-info-400:#56aff3;--color-info-500:#0d8cee;--color-info-600:#0c7ed6;--color-info-700:#08548f;--color-info-800:#063f6b;--color-info-900:#042a47;--color-error:#f25555;--color-error-50:#fef7f7;--color-error-100:#feeeee;--color-error-200:#ffdfdf;--color-error-300:#fabbbb;--color-error-400:#f68888;--color-error-500:#f25555;--color-error-600:#da4d4d;--color-error-700:#913333;--color-error-800:#6d2626;--color-error-900:#491a1a;--color-success:#3fb061;--color-success-50:#f5fbf7;--color-success-100:#ecf7ef;--color-success-200:#daeee0;--color-success-300:#b2dfc0;--color-success-400:#79c890;--color-success-500:#3fb061;--color-success-600:#399e57;--color-success-700:#266a3a;--color-success-800:#1c4f2c;--color-success-900:#13351d;--color-warning:#ff9a35;--color-warning-50:#fffaf5;--color-warning-100:#fff5eb;--color-warning-200:#fef1cc;--color-warning-300:#ffd7ae;--color-warning-400:#ffb872;--color-warning-500:#ff9a35;--color-warning-600:#e68b30;--color-warning-700:#995c20;--color-warning-800:#734518;--color-warning-900:#4d2e10}::-webkit-scrollbar{-webkit-appearance:none;height:10px;width:10px}::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.3);border-radius:4px;box-shadow:0 0 1px hsla(0,0%,100%,.5)}:root{--dp-font-family:inherit!important}.dp__theme_light{--dp-primary-color:var(--color-main)!important;--dp-primary-disabled-color:var(--color-main-200)!important}#__nuxt,body,html{@apply w-full h-full}
+@import "tailwindcss";@import "@nuxt/ui";@plugin "@tailwindcss/typography";@source inline("prose");@theme static{--font-sans:"Noto Sans Thai","Noto Sans Thai Looped","Public Sans",sans-serif;--color-main:#232c5a;--color-main-50:#f4f4f7;--color-main-100:#e9eaef;--color-main-200:#c8cad6;--color-main-300:#a7abbd;--color-main-400:#656b8c;--color-main-500:#232c5a;--color-main-600:#202851;--color-main-700:#151a36;--color-main-800:#101429;--color-main-900:#0b0d1b;--color-main-950:#0b0d1b;--color-secondary:#ee8b36;--color-secondary-50:#fdf1e7;--color-secondary-100:#f9d6b8;--color-secondary-200:#f5bb89;--color-secondary-300:#f1a05a;--color-secondary-400:#ed852b;--color-secondary-500:#d46b12;--color-secondary-600:#a5540e;--color-secondary-700:#763c0a;--color-secondary-800:#472406;--color-secondary-900:#180c02;--color-info:#0d8cee;--color-info-50:#f3f9fe;--color-info-100:#e7f4fd;--color-info-200:#ebf6ff;--color-info-300:#9ed1f8;--color-info-400:#56aff3;--color-info-500:#0d8cee;--color-info-600:#0c7ed6;--color-info-700:#08548f;--color-info-800:#063f6b;--color-info-900:#042a47;--color-error:#f25555;--color-error-50:#fef7f7;--color-error-100:#feeeee;--color-error-200:#ffdfdf;--color-error-300:#fabbbb;--color-error-400:#f68888;--color-error-500:#f25555;--color-error-600:#da4d4d;--color-error-700:#913333;--color-error-800:#6d2626;--color-error-900:#491a1a;--color-success:#3fb061;--color-success-50:#f5fbf7;--color-success-100:#ecf7ef;--color-success-200:#daeee0;--color-success-300:#b2dfc0;--color-success-400:#79c890;--color-success-500:#3fb061;--color-success-600:#399e57;--color-success-700:#266a3a;--color-success-800:#1c4f2c;--color-success-900:#13351d;--color-warning:#ff9a35;--color-warning-50:#fffaf5;--color-warning-100:#fff5eb;--color-warning-200:#fef1cc;--color-warning-300:#ffd7ae;--color-warning-400:#ffb872;--color-warning-500:#ff9a35;--color-warning-600:#e68b30;--color-warning-700:#995c20;--color-warning-800:#734518;--color-warning-900:#4d2e10}::-webkit-scrollbar{-webkit-appearance:none;height:10px;width:10px}::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.3);border-radius:4px;box-shadow:0 0 1px hsla(0,0%,100%,.5)}:root{--dp-font-family:inherit!important}.dp__theme_light{--dp-primary-color:var(--color-main)!important;--dp-primary-disabled-color:var(--color-main-200)!important}#__nuxt,body,html{@apply w-full h-full}

package/dist/runtime/theme/index.d.ts

@@ -11,3 +11,5 @@ export { inputNumberTheme as inputNumber } from './inputNumber.js';
 export { iconsTheme as icons } from './icons.js';
 export { uploadFileDropzoneTheme as uploadFileDropzone } from './uploadFileDropzone.js';
 export { dateTimeTheme as dateTime } from './dateTime.js';
+export { radioGroupTheme as radioGroup } from './radioGroup.js';
+export { wysiwygTheme as wysiwyg } from './wysiwyg.js';

package/dist/runtime/theme/index.js

@@ -11,3 +11,5 @@ export { inputNumberTheme as inputNumber } from "./inputNumber.js";
 export { iconsTheme as icons } from "./icons.js";
 export { uploadFileDropzoneTheme as uploadFileDropzone } from "./uploadFileDropzone.js";
 export { dateTimeTheme as dateTime } from "./dateTime.js";
+export { radioGroupTheme as radioGroup } from "./radioGroup.js";
+export { wysiwygTheme as wysiwyg } from "./wysiwyg.js";

package/dist/runtime/theme/radioGroup.d.ts

@@ -0,0 +1,6 @@
+export declare const radioGroupTheme: {
+    slots: {
+        item: string;
+        label: string;
+    };
+};

package/dist/runtime/theme/radioGroup.js

@@ -0,0 +1,6 @@
+export const radioGroupTheme = {
+  slots: {
+    item: "cursor-pointer",
+    label: "cursor-pointer"
+  }
+};

package/dist/runtime/theme/uploadFileDropzone.js

@@ -1,6 +1,6 @@
 export const uploadFileDropzoneTheme = {
   slots: {
-    base: "relative w-full text-base p-4 transition rounded-lg flex items-center justify-center ring-1 bg-white ring-gray-300",
+    base: "relative w-full text-base p-4 transition rounded-md flex items-center justify-center ring-1 bg-white ring-gray-300",
     wrapper: "flex flex-col items-center w-full",
     disabled: "bg-gray-100 border-none grayscale cursor-not-allowed",
     failed: "border-error",
@@ -20,13 +20,13 @@ export const uploadFileDropzoneTheme = {
     onLoadingTextWrapper: "flex-1 min-w-0 flex items-center justify-between",
     onLoadingLoadingIconClass: "size-10 text-primary animate-spin",
     // Preview state
-    onPreviewWrapper: "flex items-center space-x-4 rounded-lg w-full",
-    onPreviewPreviewImgWrapper: "flex-shrink-0 w-16 h-16 rounded-lg overflow-hidden bg-gray-100",
+    onPreviewWrapper: "flex items-center space-x-4 rounded-md w-full",
+    onPreviewPreviewImgWrapper: "flex-shrink-0 w-16 h-16 rounded-md overflow-hidden bg-gray-100",
     onPreviewPreviewImgClass: "w-full h-full object-cover",
     onPreviewPreviewFileClass: "size-8 text-gray-400 m-auto mt-4",
     onPreviewTextWrapper: "flex-1 min-w-0 flex items-center justify-between",
     // Failed state
-    onFailedWrapper: "flex items-start space-x-4 w-full rounded-lg",
+    onFailedWrapper: "flex items-start space-x-4 w-full rounded-md",
     onFailedFailedImgWrapper: "flex-shrink-0",
     onFailedFailedIconClass: "size-12",
     onFailedTextWrapper: "flex-1 min-w-0 flex items-start justify-between",

package/dist/runtime/theme/wysiwyg.d.ts

@@ -0,0 +1,53 @@
+export declare const wysiwygTheme: {
+    slots: {
+        container: string;
+        toolbar: string;
+        toolbarGroup: string;
+        menuItem: string;
+        menuItemActive: string;
+        icon: string;
+        editorContent: string;
+    };
+    variants: {
+        size: {
+            xs: {
+                button: string;
+                icon: string;
+                select: string;
+            };
+            sm: {
+                button: string;
+                icon: string;
+                select: string;
+            };
+            md: {
+                button: string;
+                icon: string;
+                select: string;
+            };
+            lg: {
+                button: string;
+                icon: string;
+                select: string;
+            };
+            xl: {
+                button: string;
+                icon: string;
+                select: string;
+            };
+        };
+        color: {
+            primary: {
+                button: string;
+            };
+            gray: {
+                button: string;
+            };
+        };
+    };
+    compoundVariants: never[];
+    defaultVariants: {
+        size: string;
+        color: string;
+    };
+};

package/dist/runtime/theme/wysiwyg.js

@@ -0,0 +1,53 @@
+export const wysiwygTheme = {
+  slots: {
+    container: "border border-gray-200 rounded focus:ring-primary-500 relative block w-full resize-none rounded-md border-0 bg-white p-0 pb-3 text-sm text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:outline-none focus:ring-2 disabled:cursor-not-allowed disabled:opacity-75",
+    toolbar: "flex flex-wrap border py-2 px-2 gap-1 border-gray-300 bg-white rounded-t-md",
+    toolbarGroup: "flex items-center border-r border-gray-200 pr-2",
+    menuItem: "px-1 py-1 rounded-md hover:bg-gray-100 transition-colors flex justify-center items-center cursor-pointer flex-wrap",
+    menuItemActive: "bg-primary-100 text-primary-600",
+    icon: "size-5",
+    editorContent: ""
+  },
+  variants: {
+    size: {
+      xs: {
+        button: "px-1.5 py-0.5 text-xs",
+        icon: "h-3 w-3",
+        select: "px-1.5 py-0.5 text-xs"
+      },
+      sm: {
+        button: "px-2 py-1 text-sm",
+        icon: "h-3.5 w-3.5",
+        select: "px-2 py-1 text-xs"
+      },
+      md: {
+        button: "px-2 py-1 text-sm",
+        icon: "h-4 w-4",
+        select: "px-2 py-1 text-xs"
+      },
+      lg: {
+        button: "px-3 py-1.5 text-base",
+        icon: "h-5 w-5",
+        select: "px-3 py-1.5 text-sm"
+      },
+      xl: {
+        button: "px-4 py-2 text-lg",
+        icon: "h-6 w-6",
+        select: "px-4 py-2 text-base"
+      }
+    },
+    color: {
+      primary: {
+        button: "hover:bg-blue-50 hover:border-blue-300"
+      },
+      gray: {
+        button: "hover:bg-gray-100 hover:border-gray-300"
+      }
+    }
+  },
+  compoundVariants: [],
+  defaultVariants: {
+    size: "md",
+    color: "gray"
+  }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "2.14.0",
+  "version": "2.15.0",
   "repository": "https://gitlab.finema.co/finema/ui-kit",
   "license": "MIT",
   "author": "Finema Dev Core Team",
@@ -67,13 +67,14 @@
     "url-join": "^5.0.0"
   },
   "devDependencies": {
-    "@hyoban/eslint-plugin-tailwindcss": "^4.0.0-alpha.12",
     "@eslint/js": "^9.26.0",
+    "@hyoban/eslint-plugin-tailwindcss": "^4.0.0-alpha.12",
     "@nuxt/devtools": "^2.4.1",
     "@nuxt/eslint-config": "^1.3.1",
     "@nuxt/module-builder": "^1.0.1",
     "@nuxt/schema": "^3.17.3",
     "@nuxt/test-utils": "^3.19.0",
+    "@tailwindcss/typography": "^0.5.0-alpha.3",
     "@types/node": "latest",
     "changelogen": "^0.5.7",
     "eslint": "^9.26.0",