@meeovi/layer-shared 1.0.0

package/app/components/ui/forms/TextArea.vue

@@ -0,0 +1,59 @@
+<template>
+    <div :style="'width: ' + fieldWidth + '; display:flex; align-items:flex-start; gap:8px'">
+        <client-only>
+            <tiptap-editor :name="field" v-model="textAreaValue" rows="12" :required="required" :label="label" style="flex:1" />
+        </client-only>
+        <span v-if="props.autoGenerated" class="auto-badge">Auto</span>
+    </div>
+</template>
+
+<script setup lang="ts">
+    import {
+        computed
+    } from 'vue'
+    import TiptapEditor from './TiptapEditor.vue'
+
+    const props = withDefaults(defineProps < {
+        defaultValue ? : string
+        label ? : string
+        width ? : string | null
+        field: string
+        required ? : boolean
+        options ? : Record < string,
+        any > | null
+        modelValue ? : string
+        autoGenerated ? : boolean
+    } > (), {
+        required: false,
+        options: null,
+        width: null,
+        autoGenerated: false,
+    })
+
+    const emit = defineEmits(['update:modelValue'])
+
+    const fieldWidth = props.width === 'full' ? '100%' : '50%'
+
+    const textAreaValue = computed({
+        get() {
+            return props.modelValue || props.defaultValue || ''
+        },
+        set(value) {
+            emit('update:modelValue', value)
+        }
+    })
+</script>
+
+<style scoped>
+    .auto-badge {
+        font-size: 12px;
+        padding: 4px 6px;
+        border-radius: 4px;
+        background: #eee;
+        color: #333
+    }
+
+    textarea {
+        width: 100%
+    }
+</style>

package/app/components/ui/forms/TextInput.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+    defaultValue?: string
+    label?: string
+    options?: Record<string, any> | null
+    width?: string | null
+    field: string
+    required?: boolean
+    modelValue?: string
+    autoGenerated?: boolean
+}>(), {
+    required: false,
+    options: null,
+    width: null,
+    autoGenerated: false,
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const fieldWidth = props.width === 'full' ? '100%' : '50%'
+
+const inputValue = computed({
+    get() {
+        return props.modelValue || props.defaultValue || ''
+    },
+    set(value) {
+        emit('update:modelValue', value)
+    }
+})
+</script>
+
+<template>
+    <div :style="'width: ' + fieldWidth + '; display:flex; align-items:center; gap:8px'">
+        <v-text-field :name="field" v-model="inputValue" type="text" :label="label" :required="required" style="flex:1" />
+        <span v-if="props.autoGenerated" class="auto-badge">Auto</span>
+    </div>
+</template>
+
+<style scoped>
+.auto-badge{font-size:12px;padding:4px 6px;border-radius:4px;background:#eee;color:#333}
+input {width:100%;}
+</style>

package/app/components/ui/forms/TiptapEditor.vue

@@ -0,0 +1,136 @@
+<template>
+  <div>
+    <div v-if="editor">
+      <button
+        @click="editor.chain().focus().toggleBold().run()"
+        :disabled="!editor.can().chain().focus().toggleBold().run()"
+        :class="{ 'is-active': editor.isActive('bold') }"
+      >
+        bold
+      </button>
+      <button
+        @click="editor.chain().focus().toggleItalic().run()"
+        :disabled="!editor.can().chain().focus().toggleItalic().run()"
+        :class="{ 'is-active': editor.isActive('italic') }"
+      >
+        italic
+      </button>
+      <button
+        @click="editor.chain().focus().toggleStrike().run()"
+        :disabled="!editor.can().chain().focus().toggleStrike().run()"
+        :class="{ 'is-active': editor.isActive('strike') }"
+      >
+        strike
+      </button>
+      <button
+        @click="editor.chain().focus().toggleCode().run()"
+        :disabled="!editor.can().chain().focus().toggleCode().run()"
+        :class="{ 'is-active': editor.isActive('code') }"
+      >
+        code
+      </button>
+      <button @click="editor.chain().focus().unsetAllMarks().run()">
+        clear marks
+      </button>
+      <button @click="editor.chain().focus().clearNodes().run()">
+        clear nodes
+      </button>
+      <button
+        @click="editor.chain().focus().setParagraph().run()"
+        :class="{ 'is-active': editor.isActive('paragraph') }"
+      >
+        paragraph
+      </button>
+      <button
+        @click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
+        :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
+      >
+        h1
+      </button>
+      <button
+        @click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
+        :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }"
+      >
+        h2
+      </button>
+      <button
+        @click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
+        :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }"
+      >
+        h3
+      </button>
+      <button
+        @click="editor.chain().focus().toggleHeading({ level: 4 }).run()"
+        :class="{ 'is-active': editor.isActive('heading', { level: 4 }) }"
+      >
+        h4
+      </button>
+      <button
+        @click="editor.chain().focus().toggleHeading({ level: 5 }).run()"
+        :class="{ 'is-active': editor.isActive('heading', { level: 5 }) }"
+      >
+        h5
+      </button>
+      <button
+        @click="editor.chain().focus().toggleHeading({ level: 6 }).run()"
+        :class="{ 'is-active': editor.isActive('heading', { level: 6 }) }"
+      >
+        h6
+      </button>
+      <button
+        @click="editor.chain().focus().toggleBulletList().run()"
+        :class="{ 'is-active': editor.isActive('bulletList') }"
+      >
+        bullet list
+      </button>
+      <button
+        @click="editor.chain().focus().toggleOrderedList().run()"
+        :class="{ 'is-active': editor.isActive('orderedList') }"
+      >
+        ordered list
+      </button>
+      <button
+        @click="editor.chain().focus().toggleCodeBlock().run()"
+        :class="{ 'is-active': editor.isActive('codeBlock') }"
+      >
+        code block
+      </button>
+      <button
+        @click="editor.chain().focus().toggleBlockquote().run()"
+        :class="{ 'is-active': editor.isActive('blockquote') }"
+      >
+        blockquote
+      </button>
+      <button @click="editor.chain().focus().setHorizontalRule().run()">
+        horizontal rule
+      </button>
+      <button @click="editor.chain().focus().setHardBreak().run()">
+        hard break
+      </button>
+      <button
+        @click="editor.chain().focus().undo().run()"
+        :disabled="!editor.can().chain().focus().undo().run()"
+      >
+        undo
+      </button>
+      <button
+        @click="editor.chain().focus().redo().run()"
+        :disabled="!editor.can().chain().focus().redo().run()"
+      >
+        redo
+      </button>
+    </div>
+    <TiptapEditorContent :editor="editor" />
+  </div>
+</template>
+
+<script setup>
+const editor = useEditor({
+  content: "<p>Type something here. 🎉</p>",
+  extensions: [TiptapStarterKit],
+});
+
+onBeforeUnmount(() => {
+  unref(editor).destroy();
+});
+</script>

package/app/components/ui/forms/[collection].vue

@@ -0,0 +1,22 @@
+<script setup>
+import AutoForm from '~/components/forms/DynamicForm.vue'
+import { useDirectusSchema } from '@/layers/ui-app/app/composables/globals/useDirectusSchema.js'
+
+const route = useRoute()
+const collection = route.params.collection
+
+const { data: schema } = await useAsyncData(
+  `schema-${collection}`,
+  () => useDirectusSchema(collection)
+)
+
+const formData = ref({})
+</script>
+
+<template>
+  <div>
+    <h1>Dynamic Form for {{ collection }}</h1>
+    <AutoForm :schema="schema" v-model="formData" />
+    <pre>{{ formData }}</pre>
+  </div>
+</template>

package/app/components/ui/studio/builder.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="cnt">
+    <div class="cnt-nav">Meeovi Studio</div>
+    <div class="cnt-body">
+      <div class="editor" ref="editorEl"></div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import createStudioEditor from '@grapesjs/studio-sdk';
+import '@grapesjs/studio-sdk/dist/style.css';
+
+const editorEl = ref(null);
+
+onMounted(() => {
+  createStudioEditor({
+    root: editorEl.value,
+    plugins: [(editor) => console.log('editor created!', editor)],
+    licenseKey: 'YOUR_LICENSE_KEY',
+    project: {
+      default: {
+        pages: [
+          {
+            name: 'Home',
+            component: `<h1 style="padding: 2rem; text-align: center">
+              Hello Studio 👋
+            </h1>`,
+          },
+        ],
+      },
+    },
+  });
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+}
+.cnt {
+  display: flex;
+  flex-direction: column;
+  height: 100dvh;
+}
+.cnt-nav {
+  padding: 10px;
+  background-color: #020420;
+  color: #00dc82;
+}
+.cnt-body {
+  flex-grow: 1;
+}
+.editor {
+  height: 100%;
+}
+</style>

package/app/components/ui/studio/document.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="cnt">
+    <div class="cnt-nav">Meeovi Studio</div>
+    <div class="cnt-body">
+      <div class="editor" ref="editorEl"></div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import createStudioEditor from '@grapesjs/studio-sdk';
+  import '@grapesjs/studio-sdk/dist/style.css';
+  import { presetPrintable, canvasFullSize } from '@grapesjs/studio-sdk-plugins';
+
+  const editorEl = ref(null);
+
+  onMounted(() => {
+    createStudioEditor({
+      root: editorEl.value,
+      plugins: [
+        presetPrintable,
+        canvasFullSize, // Optional
+      ],
+      licenseKey: 'YOUR_LICENSE_KEY',
+      project: {
+        type: 'document', // Ensure the project type is set to 'document'
+        default: {
+          pages: [{
+            name: 'Invoice',
+            component: `<!DOCTYPE html>
+                <html>
+                  <body style="padding: 40px; font-family: Arial, Helvetica, sans-serif">
+                    <h1>New Document</h1>
+                    <p>Content of the document.</p>
+                  </body>
+                <html>
+              `,
+          }],
+        },
+      },
+    });
+  });
+</script>
+
+<style>
+  body {
+    margin: 0;
+  }
+
+  .cnt {
+    display: flex;
+    flex-direction: column;
+    height: 100dvh;
+  }
+
+  .cnt-nav {
+    padding: 10px;
+    background-color: #020420;
+    color: #00dc82;
+  }
+
+  .cnt-body {
+    flex-grow: 1;
+  }
+
+  .editor {
+    height: 100%;
+  }
+</style>

package/app/components/ui/studio/email.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="cnt">
+    <div class="cnt-nav">Meeovi Studio</div>
+    <div class="cnt-body">
+      <div class="editor" ref="editorEl"></div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import createStudioEditor from '@grapesjs/studio-sdk';
+  import '@grapesjs/studio-sdk/dist/style.css';
+
+  const editorEl = ref(null);
+
+  onMounted(() => {
+    createStudioEditor({
+      root: editorEl.value,
+      plugins: [(editor) => console.log('editor created!', editor)],
+      licenseKey: 'YOUR_LICENSE_KEY',
+      project: {
+        type: 'email',
+        default: {
+          pages: [{
+            component: '<mjml><mj-body><mj-section><mj-column><mj-text>My email</mj-text></mj-column></mj-section></mj-body></mjml>'
+          }, ],
+        },
+      },
+    });
+  });
+</script>
+
+<style>
+  body {
+    margin: 0;
+  }
+
+  .cnt {
+    display: flex;
+    flex-direction: column;
+    height: 100dvh;
+  }
+
+  .cnt-nav {
+    padding: 10px;
+    background-color: #020420;
+    color: #00dc82;
+  }
+
+  .cnt-body {
+    flex-grow: 1;
+  }
+
+  .editor {
+    height: 100%;
+  }
+</style>

package/app/composables/globals/uploadFiles.js

@@ -0,0 +1,41 @@
+import { uploadFiles } from '@meeovi/directus-client';
+
+export default async function uploadFile({ imageFile, documentFile, videoFile, audioFile }) {
+    const { $directus } = useNuxtApp();
+    const uploadedFiles = {};
+  
+    try {
+      if (imageFile) {
+        const formDataImage = new FormData();
+        formDataImage.append('file', imageFile);
+        const uploadedImage = await $directus.request(uploadFiles(formDataImage));
+        uploadedFiles.imageId = uploadedImage.id;
+      }
+  
+      if (documentFile) {
+        const formDataDocument = new FormData();
+        formDataDocument.append('file', documentFile);
+        const uploadedDocument = await $directus.request(uploadFiles(formDataDocument));
+        uploadedFiles.documentId = uploadedDocument.id;
+      }
+
+      if (videoFile) {
+        const formDataVideo = new FormData();
+        formDataVideo.append('file', videoFile);
+        const uploadedVideo = await $directus.request(uploadFiles(formDataVideo));
+        uploadedFiles.videoId = uploadedVideo.id;
+      }
+
+      if (audioFile) {
+        const formDataAudio = new FormData();
+        formDataAudio.append('file', audioFile);
+        const uploadedAudio = await $directus.request(uploadFiles(formDataAudio));
+        uploadedFiles.audioId = uploadedAudio.id;
+      }
+  
+      return uploadedFiles;
+    } catch (error) {
+      console.error('Error uploading files:', error);
+      throw error;
+    }
+  }

package/app/composables/globals/useAdminTable.ts

@@ -0,0 +1,12 @@
+import type { AdminTable } from '#components'
+import type { ComponentExposed } from 'vue-component-type-helpers'
+
+export function useAdminTable(refName: string = 'table') {
+  const adminTableRef = useTemplateRef<ComponentExposed<typeof AdminTable>>(refName)
+  const refresh = () => {
+    adminTableRef.value?.fetchTableData()
+  }
+  return {
+    refresh
+  }
+}

package/app/composables/globals/useCustomFetch.ts

@@ -0,0 +1,13 @@
+import type { UseFetchOptions } from '#imports'
+
+export function useCustomFetch<T>(
+  url: string | Request | Ref<string | Request> | (() => string | Request),
+  options: UseFetchOptions<T> = {}
+) {
+  return {
+    ...useFetch(url, {
+      ...options,
+      $fetch: useNuxtApp().$customFetch
+    })
+  }
+}

package/app/composables/globals/useDirectusField.ts

@@ -0,0 +1,144 @@
+import { ref, computed, watch } from "vue"
+import Input from "~/components/ui/forms/TextInput.vue"
+import TextArea from "~/components/ui/forms/TextArea.vue"
+import Select from "~/components/ui/forms/SelectInput.vue"
+import DateTime from "~/components/ui/forms/DateTime.vue"
+import FileInput from "~/components/ui/forms/FileInput.vue"
+import BooleanInput from "~/components/ui/forms/BooleanInput.vue"
+import RelationSelect from "~/components/ui/forms/RelationSelect.vue"
+import RepeaterInput from "~/components/ui/forms/RepeaterInput.vue"
+import TiptapEditor from "~/components/ui/forms/TiptapEditor.vue"
+
+export function useDirectusField(field: any, modelValue: any, emit: any, formContext?: any) {
+  const internalValue = computed({
+    get: () => modelValue,
+    set: (v) => emit("update:modelValue", v),
+  })
+
+  const previousAuto = ref<string | null>(null)
+  const internalAuto = computed(() => {
+    return previousAuto.value != null && internalValue.value === previousAuto.value
+  })
+
+  const slugify = (val: string) =>
+    String(val || "")
+      .toLowerCase()
+      .normalize("NFKD")
+      .replace(/\s+/g, "-")
+      .replace(/[^a-z0-9\-]/g, "")
+      .replace(/-+/g, "-")
+      .replace(/^-|-$/g, "")
+
+  const isAliasField = computed(() => {
+    const meta = field?.meta ?? {}
+    return (
+      meta.interface === "alias" ||
+      (meta.options && (meta.options.source || meta.options.from))
+    )
+  })
+
+  if (isAliasField.value && formContext && formContext.form) {
+    const meta = field?.meta ?? {}
+    let sourceField: string | null = meta?.options?.source ?? meta?.options?.from ?? null
+
+    if (!sourceField && formContext.fields) {
+      const candidates = ["name", "title"]
+      sourceField =
+        candidates.find((c: string) =>
+          formContext.fields.value.some((f: any) => f.field === c)
+        ) ?? null
+    }
+
+    if (sourceField) {
+      watch(
+        () => formContext.form.value?.[sourceField as string],
+        (newVal) => {
+          const target = field.field
+          const current = formContext.form.value?.[target] ?? ""
+          const generated = slugify(String(newVal ?? ""))
+
+          if (!generated) return
+
+          // Case 1: Empty or previously auto‑generated → regenerate
+          if (!current || current === previousAuto.value) {
+            formContext.form.value[target] = generated
+            internalValue.value = generated
+            previousAuto.value = generated
+          }
+        },
+        { immediate: true }
+      )
+
+      // Watch the target itself: if cleared, regenerate
+      watch(
+        () => formContext.form.value?.[field.field],
+        (newVal) => {
+          if (!newVal) {
+            const sourceVal = formContext.form.value?.[sourceField as string] ?? ""
+            const regenerated = slugify(String(sourceVal))
+            if (regenerated) {
+              formContext.form.value[field.field] = regenerated
+              internalValue.value = regenerated
+              previousAuto.value = regenerated
+            }
+          }
+        }
+      )
+    }
+  }
+
+  // --- Label prettifier ---
+  const prettify = (s: string) =>
+    s.replace(/_/g, " ")
+      .split(" ")
+      .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+      .join(" ")
+
+  const label = computed(() => {
+    const raw = field?.meta?.field ?? field?.field ?? ""
+    return prettify(raw)
+  })
+
+  // --- Field lookup ---
+  const fieldLookup = computed(() => {
+    const iface = field?.meta?.interface
+    const name = String(iface ?? "").toLowerCase()
+
+    if (["input", "string"].includes(name)) return Input
+    if (
+      ["textarea", "wysiwyg", "rich-text", "input-multiline", "input-rich-text", "input-rich-text-md"].includes(name)
+    )
+      return TiptapEditor
+    if (["select", "select-dropdown", "select-multiple"].includes(name)) return Select
+    if (name === "datetime") return DateTime
+    if (["file", "files", "file-image"].includes(name)) return FileInput
+    if (name === "boolean") return BooleanInput
+    if (name.includes("many") || name.includes("one") || name.includes("to")) return RelationSelect
+    return Input
+  })
+
+  const required = computed(() => {
+    const meta = field?.meta ?? {}
+    return Boolean(meta?.validation?.required ?? meta?.required ?? false)
+  })
+
+  const safeOptions = computed(() => field?.meta?.options ?? null)
+  const defaultValue = computed(() => field?.schema?.default_value ?? null)
+  const isMultiple = computed(() => {
+    const name = String(field?.meta?.interface ?? "").toLowerCase()
+    if (name === "select-multiple") return true
+    if (name.includes("many")) return true
+    return Boolean(field?.meta?.options?.multiple || false)
+  })
+
+  return {
+    internalValue,
+    internalAuto,
+    label,
+    fieldLookup,
+    required,
+    safeOptions,
+    defaultValue,
+    isMultiple,
+  }
+}