@opengis/cms 0.0.21 → 0.0.22

package/src/components/dashboard/StatCard.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="rounded-xl text-card-foreground shadow-lg border-0 bg-white dark:bg-slate-800 backdrop-blur-sm hover:shadow-xl transition-all duration-300 transform hover:scale-105">
+    <div class="p-6">
+      <div class="flex items-start justify-between">
+        <div class="flex-1">
+          <div class="flex items-center space-x-2 mb-2">
+            <div :class="`p-2 rounded-lg bg-${stat.color}-50 dark:bg-${stat.color}-900/20`">
+              <component 
+                :is="getIcon(stat.icon)" 
+                :class="`w-5 h-5 text-${stat.color}-600`"
+              />
+            </div>
+            <p class="text-sm font-medium text-slate-600 dark:text-slate-400">
+              {{ stat.title }}
+            </p>
+          </div>
+          <p class="text-3xl font-bold text-slate-800 dark:text-slate-100 mb-1">
+            {{ stat.value }}
+          </p>
+          <p class="text-xs text-slate-500 dark:text-slate-400 mb-3">
+            {{ stat.description }}
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { 
+  FileText, 
+  Users, 
+  Image, 
+  Eye, 
+  ArrowUpRight, 
+  ArrowDownRight 
+} from 'lucide-vue-next';
+
+interface StatItem {
+  id: string;
+  title: string;
+  value: number | string;
+  description: string;
+  icon: string;
+  color: string;
+}
+
+interface Props {
+  stat: StatItem;
+}
+
+defineProps<Props>();
+
+const getIcon = (iconName: string) => {
+  const icons = {
+    'file-text': FileText,
+    'users': Users,
+    'image': Image,
+    'eye': Eye
+  };
+  return icons[iconName as keyof typeof icons] || FileText;
+};
+</script> 

package/src/components/dashboard/StatsGrid.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+    <StatCard 
+      v-for="stat in stats" 
+      :key="stat.id"
+      :stat="stat"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import StatCard from './StatCard.vue';
+
+interface StatItem {
+  id: string;
+  title: string;
+  value: number | string;
+  description: string;
+  icon: string;
+  color: string;
+}
+
+interface Props {
+  stats: StatItem[];
+}
+
+defineProps<Props>();
+</script> 

package/src/components/form-components/MonacoEditor.vue

@@ -0,0 +1,104 @@
+<template>
+  <div ref="editorContainer" :style="{ width, height }"></div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount, watch } from "vue";
+import { useMonaco } from "../../composables/useMonaco";
+
+const props = withDefaults(
+  defineProps<{
+    language?: string;
+    theme?: string;
+    width?: string;
+    height?: string;
+    options?: any;
+  }>(),
+  {
+    language: "javascript",
+    theme: "vs-dark",
+    width: "100%",
+    height: "100%",
+    options: () => ({
+      minimap: { enabled: false },
+    }),
+  }
+);
+
+const modelValue = defineModel<string>({
+  required: true,
+});
+
+const editorContainer = ref<HTMLElement | null>(null);
+let editor: any = null;
+let monaco: any = null;
+
+// Initialize editor
+onMounted(async () => {
+  if (!editorContainer.value) return;
+
+  try {
+    // Завантажуємо Monaco Editor через composable
+    monaco = await useMonaco();
+    
+    // Ensure the value is properly formatted with line breaks
+    const formattedValue = modelValue.value?.replace(/\\n/g, "\n") || "";
+
+    editor = monaco.editor.create(editorContainer.value, {
+      value: formattedValue,
+      language: props.language,
+      theme: props.theme,
+      automaticLayout: true,
+      ...props.options,
+    });
+
+    // Handle value changes from editor
+    editor.onDidChangeModelContent(() => {
+      const value = editor?.getValue() || "";
+      modelValue.value = value;
+    });
+  } catch (error) {
+    console.error('Failed to load Monaco Editor:', error);
+  }
+});
+
+// Handle prop changes
+watch(
+  () => modelValue.value,
+  (newValue) => {
+    if (editor) {
+      const formattedValue = newValue?.replace(/\\n/g, "\n") || "";
+      if (formattedValue !== editor.getValue()) {
+        editor.setValue(formattedValue);
+      }
+    }
+  },
+  { immediate: true }
+);
+
+watch(
+  () => props.language,
+  (newValue) => {
+    if (editor && newValue && monaco) {
+      monaco.editor.setModelLanguage(editor.getModel()!, newValue);
+    }
+  }
+);
+
+watch(
+  () => props.theme,
+  (newValue) => {
+    if (editor && newValue && monaco) {
+      monaco.editor.setTheme(newValue);
+    }
+  }
+);
+
+// Cleanup
+onBeforeUnmount(() => {
+  if (editor) {
+    editor.dispose();
+    editor = null;
+  }
+});
+</script>

package/src/components/form-components/VsFormMeta.vue

@@ -0,0 +1,40 @@
+<template>  
+  <VsForm v-model:form="form" :schema="scheme" v-model:values="model" />
+</template>
+
+<script setup>
+import VsForm from '@opengis/form'
+import { ref, provide } from "vue";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
+
+const model = ref({});
+const form = ref({});
+
+const scheme = [
+  {
+    key: "title",
+    label: t("common.title"),
+    type: "text",
+  },
+  {
+    key: "description",
+    label: t("common.description"),
+    type: "text",
+  },
+  {
+    key: "keywords",
+    label: t("common.keywords"),
+    type: "text",
+  },
+  {
+    key: "meta",
+    label: t("common.meta"),
+    type: "key-value",
+    ignore: ["title", "description", "keywords"],
+  },
+];
+</script>
+
+<style lang="scss" scoped></style>

package/src/components/form-components/VsFormTags.vue

@@ -0,0 +1,150 @@
+<template>
+    <VsForm  :schema="scheme" v-model="model" @update:model-value="handleUpdate" v-if="model"    />  
+    
+  </template>
+  
+  <script setup>
+  import { ref, provide, onMounted, watch, nextTick, computed } from "vue";
+  import { useI18n } from "vue-i18n";
+  const { t } = useI18n();
+  const model = defineModel({ default: () => [] });
+  const form = ref({});
+  const isSubmitting = ref(false);
+  import VsForm from "@opengis/form";
+  import { notify } from '@opengis/core';
+ 
+  
+  provide("metaParentValue", model);
+
+  // Функція для перетворення тегів з об'єктів в ID
+  const normalizeTags = (tags) => {
+    if (!Array.isArray(tags)) return [];
+    return tags.map(tag => {
+      if (typeof tag === "object" && tag !== null && tag.id) {
+        return tag.id;
+      }
+      return tag;
+    });
+  };
+
+  // Функція для відновлення повних об'єктів тегів з ID
+  const restoreTagObjects = async (tagIds) => {
+    if (!Array.isArray(tagIds) || tagIds.length === 0) return [];
+    
+    try {
+      const response = await fetch('/api/tags');
+      const data = await response.json();
+      const allTags = data?.rows || [];
+      
+      return tagIds.map(id => {
+        const tag = allTags.find(t => t.tag_id === id);
+        return tag ? { id: tag.tag_id, text: tag.value, color: tag.color } : { id, text: '', color: '#ababab' };
+      });
+    } catch (error) {
+      console.error('Error fetching tags:', error);
+      return tagIds.map(id => ({ id, text: '', color: '#ababab' }));
+    }
+  };
+
+  onMounted(async () => {
+    // Чекаємо кілька тиків, щоб форма точно встигла ініціалізуватися
+    await nextTick();
+    await nextTick();
+    
+    // Додаткова затримка для гарантії ініціалізації форми
+    setTimeout(() => {
+      if (Array.isArray(model.value?.tag_list)) {
+        const normalized = normalizeTags(model.value.tag_list);
+        if (JSON.stringify(normalized) !== JSON.stringify(model.value.tag_list)) {
+          model.value.tag_list = normalized;
+        }
+      }
+    }, 100);
+  });
+
+  // Відстежуємо зміни в tag_list і нормалізуємо їх
+  watch(() => model.value.tag_list, (newTags) => {
+    if (Array.isArray(newTags) && !isSubmitting.value) {
+      const normalized = normalizeTags(newTags);
+      if (JSON.stringify(normalized) !== JSON.stringify(newTags)) {
+        model.value.tag_list = normalized;
+      }
+    }
+  }, { deep: true });
+
+  // Додатковий watcher для відстеження змін в моделі
+  watch(() => model.value, (newModel) => {
+    if (newModel && Array.isArray(newModel.tag_list) && !isSubmitting.value) {
+      const normalized = normalizeTags(newModel.tag_list);
+      if (JSON.stringify(normalized) !== JSON.stringify(newModel.tag_list)) {
+        newModel.tag_list = normalized;
+      }
+    }
+  }, { deep: true, immediate: true });
+
+  // Watcher для примусового оновлення форми при зміні тегів
+  watch(() => model.value?.tag_list, (newTags) => {
+    if (Array.isArray(newTags) && form.value) {
+      // Примусово оновлюємо форму
+      nextTick(() => {
+        if (form.value && form.value.setValue) {
+          form.value.setValue('tag_list', newTags);
+        }
+      });
+    }
+  }, { deep: true });
+
+  const handleUpdate = async (value) => {
+    // Нормалізуємо теги перед валідацією
+    if (value.tag_list) {
+      value.tag_list = normalizeTags(value.tag_list);
+      model.value.tag_list = value.tag_list;
+    }
+    
+    let result = await form.value.validate();
+    if (result) {
+      notify({
+        type: "warning",
+        title: t("common.actions.warning"),
+        message: t("builder.editFieldFailed"),
+      });
+      return;
+    }
+  };
+
+  // Функція для відновлення об'єктів тегів перед відправкою
+  const restoreTagsBeforeSubmit = async () => {
+    isSubmitting.value = true;
+    if (Array.isArray(model.value?.tag_list)) {
+      console.log('Before restore:', model.value.tag_list);
+      const restoredTags = await restoreTagObjects(model.value.tag_list);
+      console.log('After restore:', restoredTags);
+      model.value.tag_list = restoredTags;
+    }
+    // Даємо час для відправки, потім знову включаємо нормалізацію
+    setTimeout(() => {
+      isSubmitting.value = false;
+    }, 2000);
+  };
+
+  // Експортуємо функцію для використання в батьківському компоненті
+  defineExpose({
+    restoreTagsBeforeSubmit
+  });
+  
+  // Використовуємо computed для схеми, щоб вона завжди мала актуальні значення
+  const scheme = computed(() => [
+    {
+      key: "tag_list", 
+      type: "select",
+      multiple: true,
+      searchable: false,
+      placeholder: t("builder.tags"),
+      data: 'tag_id',
+      value: model.value?.tag_list || []
+    },
+  ]);
+  </script>
+  
+  <style lang="scss" scoped></style>
+  

package/src/components/form-components/custom-datatable/vs-form-custom-datatable-add.vue

@@ -0,0 +1,84 @@
+<template>
+  <div
+    class="p-6 border-t border-slate-200 dark:border-slate-700 bg-slate-50/30 dark:bg-slate-700/30"
+  >
+    <button
+      class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 shadow-sm h-9 px-4 w-full border-2 border-dashed border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 hover:bg-slate-50 dark:hover:bg-slate-600 hover:border-blue-400 dark:hover:border-blue-500 text-slate-600 dark:text-slate-300 hover:text-blue-600 dark:hover:text-blue-400 py-3 transition-all duration-200"
+      @click="isOpen = true"
+    >
+      <Plus class="w-4 h-4 mr-2" />
+      {{ $t('common.actions.add') }}
+    </button>
+    <VsModal  teleport="#modal" :title="$t('common.actions.add')" :visible="isOpen" @close="isOpen = false">
+      
+      <VsForm v-model:form="form" :schema="colModel" v-model="formValues" />
+      <template #footer>
+        <div class="flex justify-end p-[20px] gap-[10px] border-t w-full">
+          <button
+            class="inline-flex items-center px-3 py-2 text-sm text-black duration-300 border border-gray-200 rounded-lg gap-x-2 whitespace-nowrap hover:bg-gray-100"
+            @click="isOpen = false"
+          >
+            {{ $t("common.actions.cancel") }}
+          </button>
+          <button
+            @click="createItem"
+            class="py-2 px-3 inline-flex items-center gap-x-2 text-sm whitespace-nowrap text-white bg-blue-500 rounded-lg !border-gray-200 hover:bg-blue-700 duration-300"
+          >
+            {{ $t("common.actions.save") }}
+          </button>
+        </div>
+      </template>
+    </VsModal>
+  </div>
+</template>
+
+<script setup>
+import { Plus } from "lucide-vue-next";
+import { ref } from "vue";
+import VsForm from "@opengis/form";
+import { notify } from '@opengis/core';
+import { VsModal } from "@opengis/core";
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
+
+defineProps({
+  colModel: {
+    type: Array,
+    required: true,
+  },
+});
+
+const data = defineModel({
+  type: Array,
+  required: true,
+});
+
+const isOpen = ref(false);
+const formValues = ref({});
+const form = ref({});
+
+const createItem = async () => {
+  try {
+    let result = await form.value.validate();
+    if (result) {
+      notify({
+        type: "warning",
+        title: t("common.actions.warning"),
+        message: t("builder.editFieldFailed"),
+      });
+      return;
+    }
+
+    data.value = [
+      ...(data.value || []),
+      { ...formValues.value, id: Math.random().toString(36).substring(2, 15) },
+    ];
+    isOpen.value = false;
+    formValues.value = {};
+  } catch (error) {
+    console.log(error);
+  }
+};
+</script>
+
+<style scoped></style>

package/src/components/form-components/custom-datatable/vs-form-custom-datatable-controls.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="flex items-center justify-end gap-2">
+    <button
+      class="inline-flex items-center justify-center whitespace-nowrap font-medium focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border rounded-md text-xs h-8 w-8 p-0 border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 hover:bg-blue-50 dark:hover:bg-slate-600 hover:border-blue-300 dark:hover:border-slate-500 hover:text-blue-600 dark:hover:text-slate-200 transition-all duration-200 shadow-sm"
+      @click="isOpen = true"
+    >
+      <Pencil class="w-4 h-4" />
+    </button>
+    <button
+      @click="openConfirm"
+      class="inline-flex items-center justify-center whitespace-nowrap font-medium focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border rounded-md text-xs h-8 w-8 p-0 border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 hover:bg-red-50 dark:hover:bg-slate-600 hover:border-red-300 dark:hover:border-slate-500 hover:text-red-600 dark:hover:text-slate-200 transition-all duration-200 shadow-sm"
+    >
+      <Trash2 class="w-4 h-4" />
+    </button>
+    <VsModal   teleport="#modal" :title="$t('builder.editField')" :visible="isOpen" @close="isOpen = false">
+      <VsForm v-model:form="form" :schema="colModel" v-model="formValues" />
+      <template #footer>
+        <div class="flex justify-end p-[20px] gap-[10px] border-t w-full">
+          <button
+            class="py-2 px-3 inline-flex items-center gap-x-2 text-sm whitespace-nowrap text-white bg-blue-500 rounded-lg !border-gray-200 hover:bg-blue-700 duration-300"
+            @click="isOpen = false"
+          >
+            {{ $t("common.actions.cancel") }} 
+          </button>
+          <button
+            @click="updateItem"
+            class="py-2 px-3 inline-flex items-center gap-x-2 text-sm whitespace-nowrap text-white bg-blue-500 rounded-lg !border-gray-200 hover:bg-blue-700 duration-300"
+          >
+            {{ $t("common.actions.save") }}
+          </button>
+        </div>
+      </template>
+    </VsModal>
+  </div>
+</template>
+
+<script setup>
+import { Pencil, Trash2 } from "lucide-vue-next";
+import { ref, watch } from "vue";
+import { confirm, notify } from '@opengis/core';
+import { useI18n } from "vue-i18n";
+import VsForm from "@opengis/form";
+import { VsModal } from "@opengis/core";
+
+//import  VsForm from '../../../../../form/src/index'
+
+
+const { t } = useI18n();
+
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true,
+  },
+  colModel: {
+    type: Array,
+    required: true,
+  },
+});
+
+const data = defineModel({
+  type: Array,
+  required: true,
+});
+
+const isOpen = ref(false);
+const formValues = ref({});
+const form = ref({});
+
+const openConfirm = () => {
+  confirm({
+    title: t("builder.deleteTitle"),
+    message: t("builder.deleteField"),
+    type: 'error',
+    onConfirm: () => {
+      deleteItem();
+    },
+  })
+};
+
+const deleteItem = () => {
+  data.value = data.value.filter((item) => item.id !== props.item.id);
+};
+
+const updateItem = async () => {
+  let result = await form.value.validate();
+  if (result) {
+    notify({
+      type: "warning",
+      title: t("common.actions.warning"),
+      message: t("builder.editFieldFailed"),
+    });
+    return;
+  }
+  data.value = data.value.map((item) =>
+    item.id === props.item.id ? formValues.value : item
+  );
+  isOpen.value = false;
+};
+
+watch(isOpen, (newVal) => {
+  if (newVal) {
+    formValues.value = props.item;
+  }
+});
+</script>

package/src/components/form-components/index.js

@@ -0,0 +1,23 @@
+import VsFormSlug from "./vs-form-slug.vue";
+import VsFormMonacoEditor from "./MonacoEditor.vue";
+import VsFormReference from "./vs-form-reference-list.vue";
+import VsFormRelation from "./vs-form-relation.vue";
+import VsFormInteger from "./vs-form-integer.vue";
+import VsFormCustomDatatable from "./vs-form-custom-datatable.vue";
+import VsFormRichtextMd from "./vs-form-marcdown-md.vue";
+import VsFormKeyValue from "./vs-form-key-value.vue";
+import VsFormRelationLink from "./vs-form-reletion-link.vue";
+import VsFormMediaselect from "./vs-form-media-select.vue"; 
+
+export default {
+  VsFormSlug,
+  VsFormMonacoEditor,
+  VsFormReference,
+  VsFormRelation,
+  VsFormInteger,
+  VsFormCustomDatatable,
+  VsFormRichtextMd,
+  VsFormKeyValue,
+  VsFormRelationLink,
+  VsFormMediaselect,
+};

package/src/components/form-components/reference/vs-form-reference-add.vue

@@ -0,0 +1,92 @@
+<template>
+  <div>
+    <button
+      type="button"
+      class="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sky-500"
+      @click="isOpen = !isOpen"
+    >
+      {{ $t("builder.create") }}
+    </button>
+    <VsDrawer v-model:visible="isOpen" @close="isOpen = false" :title="title" :size="'50vw'">
+      <VsForm
+        v-model:form="form"
+        v-if="schema"
+        :schema="schema"
+        v-model="formValue"
+        class="-mr-[10px] ml-[10px] mt-[10px]"
+      />
+      <template #footer>
+        <div
+          class="flex items-center justify-between w-full p-4 border-t border-gray-200 dark:border-gray-700"
+        >
+          <button
+            class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600"
+          >
+            {{ $t("builder.cancel") }}
+          </button>
+          <button
+            @click="handleCreate"
+            class="px-4 py-2 bg-sky-600 text-white rounded-md text-sm font-medium hover:bg-sky-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sky-500"
+          >
+            {{ $t("builder.create") }}
+          </button>
+        </div>
+      </template>
+    </VsDrawer>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from "vue";
+import VsForm from "@opengis/form";
+import { VsDrawer } from "@opengis/core";
+import { notify } from '@opengis/core';
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: "",
+  },
+
+  schema: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const model = defineModel({
+  type: Object,
+  default: () => ({}),
+});
+
+const isOpen = ref(false);
+const form = ref({});
+const formValue = ref({});
+
+const handleCreate = async () => {
+  try {
+    let result = await form.value.validate();
+    if (result) {
+      notify({
+        type: "warning",
+        title: t("common.actions.warning"),
+        message: t("builder.editFieldFailed"),
+      });
+      return;
+    }
+    model.value = { ...formValue.value };
+    isOpen.value = false;
+  } catch (error) {
+    console.log(error);
+  }
+};
+
+watch(isOpen, (newVal) => {
+  if (newVal) {
+    formValue.value = { ...model.value };
+  }
+});
+</script>