@finema/core 1.4.187 → 1.4.189

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

@@ -1,57 +1,216 @@
-<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"
-      />
-    </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 type { IWYSIWYGFieldProps } from '#core/components/Form/InputWYSIWYG/types'
-
-const props = withDefaults(defineProps<IWYSIWYGFieldProps>(), {})
-const { value, wrapperProps } = useFieldHOC<string>(props)
-
-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: [] }],
-
-      // [{ header: [1, 2, 3, 4, 5, 6, false] }],
-
-      [{ color: [] }], // dropdown with defaults from theme
-      ['link', 'image', 'video'], // link and image, video
-
-      // [{ font: [] }],
-
-      ['clean'], // remove formatting button
-    ],
-  },
-  theme: 'snow',
-}
-</script>
+<template>
+  <FieldWrapper v-bind="wrapperProps">
+    <ClientOnly>
+      <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"
+              type="button"
+              :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 { 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()
+  },
+})
+
+watch(value, (newValue) => {
+  if (editor.value && newValue !== editor.value.getHTML()) {
+    editor.value.commands.setContent(newValue)
+  }
+})
+
+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')
+
+        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')
+
+        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')
+
+        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}
-</style>
+.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/Form/index.vue

@@ -1,6 +1,6 @@
-<template>
-  <form class="form">
-    <slot />
-  </form>
-</template>
-<script lang="ts" setup></script>
+<template>
+  <form class="form">
+    <slot />
+  </form>
+</template>
+<script lang="ts" setup></script>

package/dist/runtime/components/Icon.vue

@@ -1,23 +1,23 @@
-<template>
-  <UIcon :name="name" :dynamic="dynamicValue" />
-</template>
-
-<script lang="ts" setup>
-import { computed, useUiConfig } from '#imports'
-import { icon } from '#core/ui.config'
-
-const props = defineProps({
-  name: {
-    type: String,
-    required: true,
-  },
-  dynamic: {
-    type: Boolean,
-    default: false,
-  },
-})
-
-const config = useUiConfig<typeof icon>(icon, 'icon')
-
-const dynamicValue = computed(() => props.dynamic || config.dynamic)
-</script>
+<template>
+  <UIcon :name="name" :dynamic="dynamicValue" />
+</template>
+
+<script lang="ts" setup>
+import { computed, useUiConfig } from '#imports'
+import { icon } from '#core/ui.config'
+
+const props = defineProps({
+  name: {
+    type: String,
+    required: true,
+  },
+  dynamic: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const config = useUiConfig<typeof icon>(icon, 'icon')
+
+const dynamicValue = computed(() => props.dynamic || config.dynamic)
+</script>

package/dist/runtime/components/Image.vue

@@ -1,36 +1,36 @@
-<template>
-  <img :src="getSrc" />
-</template>
-<script lang="ts" setup>
-import { useImage } from '@vueuse/core'
-import { computed } from 'vue'
-
-const props = defineProps({
-  src: {
-    type: String,
-    required: true,
-  },
-  loadingSrc: {
-    type: String,
-    default: '',
-  },
-  errorSrc: {
-    type: String,
-    default: '',
-  },
-})
-
-const { isLoading, error } = useImage({ src: props.src })
-
-const getSrc = computed(() => {
-  if (isLoading.value) {
-    return props.loadingSrc
-  }
-
-  if (error.value) {
-    return props.errorSrc
-  }
-
-  return props.src
-})
-</script>
+<template>
+  <img :src="getSrc" />
+</template>
+<script lang="ts" setup>
+import { useImage } from '@vueuse/core'
+import { computed } from 'vue'
+
+const props = defineProps({
+  src: {
+    type: String,
+    required: true,
+  },
+  loadingSrc: {
+    type: String,
+    default: '',
+  },
+  errorSrc: {
+    type: String,
+    default: '',
+  },
+})
+
+const { isLoading, error } = useImage({ src: props.src })
+
+const getSrc = computed(() => {
+  if (isLoading.value) {
+    return props.loadingSrc
+  }
+
+  if (error.value) {
+    return props.errorSrc
+  }
+
+  return props.src
+})
+</script>

package/dist/runtime/components/Loader.vue

@@ -1,27 +1,27 @@
-<template>
-  <div
-    v-if="isLoading"
-    :class="[
-      'flex  w-full items-center justify-center',
-      $attrs.class,
-      {
-        'min-h-[200px]': !$attrs.class,
-      },
-    ]"
-  >
-    <UIcon name="i-svg-spinners:180-ring-with-bg" class="text-primary text-4xl" dynamic />
-  </div>
-  <slot v-else />
-</template>
-<script lang="ts" setup>
-defineOptions({
-  inheritAttrs: false,
-})
-
-defineProps({
-  isLoading: {
-    type: Boolean,
-    default: true,
-  },
-})
-</script>
+<template>
+  <div
+    v-if="isLoading"
+    :class="[
+      'flex  w-full items-center justify-center',
+      $attrs.class,
+      {
+        'min-h-[200px]': !$attrs.class,
+      },
+    ]"
+  >
+    <UIcon name="i-svg-spinners:180-ring-with-bg" class="text-primary text-4xl" dynamic />
+  </div>
+  <slot v-else />
+</template>
+<script lang="ts" setup>
+defineOptions({
+  inheritAttrs: false,
+})
+
+defineProps({
+  isLoading: {
+    type: Boolean,
+    default: true,
+  },
+})
+</script>