@opengis/cms 0.0.22 → 0.0.24

package/src/components/dashboard/StatCard.vue

@@ -1,63 +0,0 @@
-<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

@@ -1,28 +0,0 @@
-<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

@@ -1,104 +0,0 @@
-<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

@@ -1,40 +0,0 @@
-<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

@@ -1,150 +0,0 @@
-<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

@@ -1,84 +0,0 @@
-<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

@@ -1,106 +0,0 @@
-<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

@@ -1,23 +0,0 @@
-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

@@ -1,92 +0,0 @@
-<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>