@finema/core 1.4.186 → 1.4.188

package/dist/module.d.mts

@@ -44,6 +44,6 @@ declare module '@nuxt/schema' {
         core?: CORE;
     }
 }
-declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 
 export { type ModuleOptions, _default as default };

package/dist/module.d.ts

@@ -44,6 +44,6 @@ declare module '@nuxt/schema' {
         core?: CORE;
     }
 }
-declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 
 export { type ModuleOptions, _default as default };

package/dist/module.json

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

package/dist/module.mjs

@@ -2,7 +2,7 @@ import { defineNuxtModule, createResolver, installModule, addPlugin, addComponen
 import { defu } from 'defu';
 
 const name = "@finema/core";
-const version = "1.4.186";
+const version = "1.4.188";
 
 const colorModeOptions = {
   preference: "light"

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

@@ -1,57 +1,215 @@
 <template>
   <FieldWrapper v-bind="wrapperProps">
     <ClientOnly>
-      <QuillEditor
-        v-model:content="value"
-        :placeholder="placeholder ?? label"
-        :autofocus="autoFocus"
-        :disabled="isDisabled || isReadonly"
-        :name="name"
-        class="ql-snow focus:ring-primary-500 min-h-[300px] rounded-b-md bg-white ring-1 ring-inset ring-gray-300 focus:ring-2"
-        content-type="html"
-        :options="options"
-      />
+      <div
+        class="form-textarea focus:ring-primary-500 dark:focus:ring-primary-400 relative block w-full resize-none rounded-md border-0 bg-white p-0 pb-3 text-sm text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:outline-none focus:ring-2 disabled:cursor-not-allowed disabled:opacity-75 dark:bg-gray-900 dark:text-white dark:ring-gray-700 dark:placeholder:text-gray-500"
+      >
+        <div class="tiptap-menu-bar">
+          <div
+            v-for="(items, index) in menuItems"
+            :key="index"
+            class="flex items-center border-r border-gray-200 pr-2"
+          >
+            <button
+              v-for="item in items"
+              :key="item.name"
+              :class="{ 'is-active': item.isActive?.() }"
+              class="menu-item"
+              :title="item.title"
+              @click="item.action"
+            >
+              <Icon :name="item.icon" class="size-5" />
+            </button>
+          </div>
+        </div>
+        <EditorContent
+          :editor="editor"
+          :placeholder="placeholder ?? label"
+          :autofocus="autoFocus"
+          :disabled="isDisabled || isReadonly"
+          :name="name"
+        />
+      </div>
     </ClientOnly>
   </FieldWrapper>
 </template>
 <script lang="ts" setup>
 import { useFieldHOC } from '#core/composables/useForm'
 import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
-import '@vueup/vue-quill/dist/vue-quill.snow.css'
+import { EditorContent, useEditor } from '@tiptap/vue-3'
 import type { IWYSIWYGFieldProps } from '#core/components/Form/InputWYSIWYG/types'
+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 { computed, watch } from 'vue'
 
 const props = withDefaults(defineProps<IWYSIWYGFieldProps>(), {})
 const { value, wrapperProps } = useFieldHOC<string>(props)
+const editor = useEditor({
+  content: value.value,
+  extensions: [
+    StarterKit,
+    Underline,
+    TextAlign.configure({
+      types: ['heading', 'paragraph'],
+    }),
+    Link.configure({
+      openOnClick: false,
+    }),
+    Image,
+    Youtube,
+  ],
+  editorProps: {
+    attributes: {
+      class: 'prose m-4 focus:outline-none',
+    },
+  },
+  onUpdate: ({ editor }) => {
+    value.value = editor.getHTML()
+  },
+})
 
-const options = {
-  modules: {
-    toolbar: [
-      // [{ size: ['small', false, 'large', 'huge'] }], // custom dropdown
-      ['bold', 'italic', 'underline'], // toggled buttons
-      // ['blockquote', 'code-block'],
-
-      ['link'],
-
-      // [{ header: 1 }, { header: 2 }], // custom button values
-      [{ list: 'ordered' }, { list: 'bullet' }],
-      // [{ script: 'sub' }, { script: 'super' }], // superscript/subscript
-      [{ indent: '-1' }, { indent: '+1' }], // outdent/indent
-      // [{ direction: 'rtl' }], // text direction
-      [{ align: [] }],
+watch(value, (newValue) => {
+  if (editor.value && newValue !== editor.value.getHTML()) {
+    editor.value.commands.setContent(newValue)
+  }
+})
 
-      // [{ header: [1, 2, 3, 4, 5, 6, false] }],
+const menuItems = computed(() => [
+  [
+    {
+      name: 'bold',
+      icon: 'ph:text-b-bold',
+      action: () => editor.value!.chain().focus().toggleBold().run(),
+      isActive: () => editor.value!.isActive('bold'),
+      title: 'Bold',
+    },
+    {
+      name: 'italic',
+      icon: 'ph:text-italic',
+      action: () => editor.value!.chain().focus().toggleItalic().run(),
+      isActive: () => editor.value!.isActive('italic'),
+      title: 'Italic',
+    },
+    {
+      name: 'underline',
+      icon: 'ph:text-underline',
+      action: () => editor.value!.chain().focus().toggleUnderline().run(),
+      isActive: () => editor.value!.isActive('underline'),
+      title: 'Underline',
+    },
+  ],
+  [
+    {
+      name: 'bullet-list',
+      icon: 'ph:list-bullets',
+      action: () => editor.value!.chain().focus().toggleBulletList().run(),
+      isActive: () => editor.value!.isActive('bulletList'),
+      title: 'Bullet List',
+    },
+    {
+      name: 'ordered-list',
+      icon: 'ph:list-numbers',
+      action: () => editor.value!.chain().focus().toggleOrderedList().run(),
+      isActive: () => editor.value!.isActive('orderedList'),
+      title: 'Ordered List',
+    },
+  ],
+  [
+    {
+      name: 'align-left',
+      icon: 'ph:text-align-left',
+      action: () => editor.value!.chain().focus().setTextAlign('left').run(),
+      isActive: () => editor.value!.isActive({ textAlign: 'left' }),
+      title: 'Align Left',
+    },
+    {
+      name: 'align-center',
+      icon: 'ph:text-align-center',
+      action: () => editor.value!.chain().focus().setTextAlign('center').run(),
+      isActive: () => editor.value!.isActive({ textAlign: 'center' }),
+      title: 'Align Center',
+    },
+    {
+      name: 'align-right',
+      icon: 'ph:text-align-right',
+      action: () => editor.value!.chain().focus().setTextAlign('right').run(),
+      isActive: () => editor.value!.isActive({ textAlign: 'right' }),
+      title: 'Align Right',
+    },
+  ],
+  [
+    {
+      name: 'link',
+      icon: 'ph:link-simple',
+      action: () => {
+        const url = window.prompt('URL')
 
-      [{ color: [] }], // dropdown with defaults from theme
-      ['link', 'image', 'video'], // link and image, video
+        if (url) {
+          editor.value!.chain().focus().setLink({ href: url }).run()
+        }
+      },
+      isActive: () => editor.value!.isActive('link'),
+      title: 'Insert Link',
+    },
+    {
+      name: 'image',
+      icon: 'ph:image',
+      action: () => {
+        const url = window.prompt('Image URL')
 
-      // [{ font: [] }],
+        if (url) {
+          editor.value!.chain().focus().setImage({ src: url }).run()
+        }
+      },
+      title: 'Insert Image',
+    },
+    {
+      name: 'video',
+      icon: 'ph:video-camera',
+      action: () => {
+        const url = window.prompt('Video URL')
 
-      ['clean'], // remove formatting button
-    ],
-  },
-  theme: 'snow',
-}
+        if (url) {
+          editor.value!.chain().focus().setYoutubeVideo({ src: url }).run()
+        }
+      },
+      title: 'Insert Video',
+    },
+  ],
+  [
+    {
+      name: 'hardBreak',
+      icon: 'ri:text-wrap',
+      action: () => editor.value!.chain().focus().setHardBreak().run(),
+      title: 'Hard Break',
+    },
+    {
+      name: 'clear',
+      icon: 'ri:format-clear',
+      action: () => editor.value!.chain().focus().clearNodes().unsetAllMarks().run(),
+      title: 'Clear',
+    },
+  ],
+  [
+    {
+      name: 'undo',
+      icon: 'ph:arrow-counter-clockwise',
+      action: () => editor.value!.chain().focus().undo().run(),
+      title: 'Undo',
+    },
+    {
+      name: 'redo',
+      icon: 'ph:arrow-clockwise',
+      action: () => editor.value!.chain().focus().redo().run(),
+      title: 'Redo',
+    },
+  ],
+])
 </script>
 <style>
-.ql-toolbar.ql-snow{@apply rounded-t-md border-b-0 bg-white}.ql-container.ql-snow,.ql-snow{@apply border-0}
+.tiptap-menu-bar{@apply flex flex-wrap border-b py-2 px-2 gap-1}.menu-item{@apply px-1 py-1 rounded hover:bg-gray-100 transition-colors flex justify-center items-center}.menu-item.is-active{@apply bg-primary-100 text-primary-600}
 </style>

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

@@ -1,4 +1,10 @@
 <template>
+  <div v-if="!isHideCaption" class="mb-4 text-gray-500">
+    <span class="font-bold">ผลลัพธิ์ทั้งหมด:</span>
+    จำนวน
+    <span class="font-bold">{{ pageOptions?.totalCount || 0 }}</span>
+    รายการ
+  </div>
   <UTable
     :loading="status.isLoading"
     :columns="columns"
@@ -117,6 +123,10 @@ const props = defineProps({
     type: Boolean as PropType<ITableOptions['isHideBottomPagination']>,
     default: false,
   },
+  isHideCaption: {
+    type: Boolean as PropType<ITableOptions['isHideCaption']>,
+    default: false,
+  },
 })
 
 const page = ref(props.pageOptions?.currentPage || 1)

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

@@ -24,6 +24,7 @@ export interface IBaseTableOptions<T = object> {
     status: IStatus;
     columns: IColumn[];
     isHideBottomPagination?: boolean;
+    isHideCaption?: boolean;
     isHideTopPagination?: boolean;
     isSimplePagination?: boolean;
 }

package/dist/runtime/helpers/componentHelper.mjs

@@ -8,7 +8,7 @@ export const checkMaxSize = (file, acceptFileSize = 0) => {
 export const checkFileType = (file, acceptFileType) => {
   if (!acceptFileType || Array.isArray(acceptFileType) && acceptFileType.length === 0) return true;
   const result = [];
-  const acceptedTypes = Array.isArray(acceptFileType) ? acceptFileType : acceptFileType.split(",");
+  const acceptedTypes = Array.isArray(acceptFileType) ? acceptFileType : acceptFileType.split(",").map((type) => type.trim());
   for (const acceptedType of acceptedTypes) {
     if (acceptedType.startsWith(".")) {
       const fileExtension = `.${file.name.split(".").pop()}`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "1.4.186",
+  "version": "1.4.188",
   "repository": "https://gitlab.finema.co/finema/ui-kit",
   "license": "MIT",
   "author": "Finema Dev Core Team",
@@ -35,9 +35,17 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@nuxt/kit": "^3.12.4",
+    "@nuxt/kit": "^3.13.1",
     "@nuxt/ui": "2.18.4",
-    "@pinia/nuxt": "^0.5.2",
+    "@pinia/nuxt": "^0.5.4",
+    "@tiptap/extension-image": "^2.6.6",
+    "@tiptap/extension-link": "^2.6.6",
+    "@tiptap/extension-text-align": "^2.6.6",
+    "@tiptap/extension-underline": "^2.6.6",
+    "@tiptap/extension-youtube": "^2.6.6",
+    "@tiptap/pm": "^2.6.6",
+    "@tiptap/starter-kit": "^2.6.6",
+    "@tiptap/vue-3": "^2.6.6",
     "@vee-validate/nuxt": "^4.13.2",
     "@vee-validate/zod": "^4.13.2",
     "@vuepic/vue-datepicker": "^8.2.0",
@@ -62,7 +70,7 @@
     "@nuxt/devtools": "^1.3.9",
     "@nuxt/eslint-config": "^0.5.0",
     "@nuxt/module-builder": "^0.5.5",
-    "@nuxt/schema": "^3.12.4",
+    "@nuxt/schema": "^3.13.1",
     "@nuxt/test-utils": "^3.13.1",
     "@release-it/conventional-changelog": "^8.0.1",
     "@types/node": "^20.10.17",
@@ -73,7 +81,7 @@
     "happy-dom": "^13.0.0",
     "husky": "^9.0.11",
     "lint-staged": "^15.2.0",
-    "nuxt": "^3.12.4",
+    "nuxt": "^3.13.1",
     "playwright-core": "^1.42.1",
     "prettier": "^3.1.1",
     "release-it": "^17.0.1",
@@ -81,8 +89,7 @@
     "stylelint": "^16.1.0",
     "stylelint-config-prettier-scss": "^1.0.0",
     "stylelint-config-standard-scss": "^13.0.0",
-    "vitest": "^2.0.4",
-    "vue": "^3.4.36"
+    "vitest": "^2.0.4"
   },
   "lint-staged": {
     "*.{ts,vue,tsx,js}": "eslint --fix --cache"