@opengis/cms 0.0.22 → 0.0.24

package/src/components/LanguageSwitcher.vue

@@ -1,73 +0,0 @@
-<template>
-  <div class="relative shrink-0" ref="dropdownRef">
-    <button
-      @click="isOpen = !isOpen"
-      class="rounded-md text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white focus:outline-none flex items-center space-x-2"
-      aria-label="Select language"
-    >
-      <span class="text-xl">{{ currentLanguage }}</span>
-    </button>
-
-    <div
-      v-if="isOpen"
-      class="absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5"
-    >
-      <div class="py-1" role="menu" aria-orientation="vertical">
-        <button
-          v-for="(language, index) in languages"
-          :key="index"
-          @click="handleLanguageChange(language)"
-          class="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center justify-between"
-          role="menuitem"
-        >
-          <div class="flex items-baseline space-x-2">
-            <span>{{ language }}</span>
-          </div>
-          <Check
-            v-if="currentLocale === language"
-            class="h-4 w-4 text-sky-500"
-          />
-        </button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted, getCurrentInstance } from 'vue';
-import { setLocale, Locale } from '../i18n.ts';
-import { useI18n } from 'vue-i18n';
-import { Check } from 'lucide-vue-next';
-
-const { locale } = useI18n();
-const app = getCurrentInstance();
-
-const languages = app?.appContext.config.globalProperties.$settings.locales;
-
-const isOpen = ref(false);
-const dropdownRef = ref<HTMLDivElement | null>(null);
-
-const currentLocale = computed(() => locale.value);
-const currentLanguage = computed(() => languages?.find(lang => lang === currentLocale.value));
-
-const handleLanguageChange = async (langCode: string) => {
-  console.log('Changing language to:', langCode);
-  await setLocale(langCode as Locale);
-  console.log('Language changed to:', locale.value);
-  isOpen.value = false;
-};
-
-const handleClickOutside = (event: MouseEvent) => {
-  if (dropdownRef.value && !dropdownRef.value.contains(event.target as Node)) {
-    isOpen.value = false;
-  }
-};
-
-onMounted(() => {
-  document.addEventListener('mousedown', handleClickOutside);
-});
-
-onUnmounted(() => {
-  document.removeEventListener('mousedown', handleClickOutside);
-});
-</script>

package/src/components/SettingsCard.vue

@@ -1,40 +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-200 transform hover:scale-105 cursor-pointer"
-  >
-    <div
-      class="flex flex-col space-y-1.5 p-6 border-b border-slate-200 dark:border-slate-700 bg-gradient-to-r from-slate-50 dark:from-slate-800 to-white dark:to-slate-800"
-    >
-      <h3
-        class="tracking-tight text-lg font-semibold text-slate-800 dark:text-slate-100 flex items-center"
-      >
-        <slot name="icon" />
-        {{ title }}
-      </h3>
-    </div>
-    <div class="p-6">
-      <p class="text-slate-600 dark:text-slate-300 mb-6">
-        {{ description }}
-      </p>
-      <button @click="goTo(path)"
-        class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border shadow-sm hover:text-accent-foreground h-9 px-4 py-2 w-full bg-white dark:bg-slate-700 border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-600"
-      >
-        {{ buttonText }}
-      </button>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useRouter } from 'vue-router'
-defineProps<{
-  path: string
-  title: string
-  description: string
-  buttonText?: string
-}>()
-const router = useRouter()
-const goTo = (path: string) => {
-  router.push(path)
-}
-</script> 

package/src/components/builder/CreateForm.vue

@@ -1,128 +0,0 @@
-<template>
-  <div>
-    <button 
-      @click="isOpen = true"
-      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 h-9 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white shadow-md hover:shadow-lg transition-all duration-200 transform hover:scale-105"
-      >
-      <Plus class="w-4 h-4 mr-2" />
-      {{ $t("collections.createCollection") }}
-    </button>
-
-    <VsModal 
-    teleport="#modal"
-      :visible="isOpen"
-      :title="$t('collections.createCollection')"
-      @close="isOpen = false"
-    >
-      <VsForm v-model:form="form" v-model="values" :schema="scheme" />
-      <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="handleCreateCollection"
-            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 { useRouter } from "vue-router";
-import { ref, inject } from "vue";
-import { useI18n } from "vue-i18n";
-import { notify } from '@opengis/core'
-const fetchContentTypes = inject("fetchContentTypes");
-import VsForm from "@opengis/form";
-import { VsModal } from "@opengis/core";
-const { t } = useI18n();
-
-const router = useRouter();
-
-const form = ref({});
-const isOpen = ref(false);
-const values = ref({ type: "collection" });
-const scheme = {
-  name: {
-    type: "text",
-    label: t("builder.scheme.name.label"),
-    required: true,
-    placeholder: t("builder.scheme.name.placeholder"),
-    validators: ["required"],
-  },
-  title: {
-    type: "text",
-    label: t("builder.scheme.title.label"),
-    required: true,
-    placeholder: t("builder.scheme.title.placeholder"),
-    validators: ["required"],
-  },
-  type: {
-    type: "combobox",
-    mode: "combo",
-    label: t("builder.scheme.type.label"),
-    required: true,
-    placeholder: t("builder.scheme.type.placeholder"),
-    validators: ["required"],
-    options: [
-      {
-        text: t("builder.scheme.type.options.collection"),
-        id: "collection",
-      },
-      {
-        text: t("builder.scheme.type.options.single"),
-        id: "single",
-      },
-    ],
-  },
-  customTable: {
-    type: "switcher",
-    label: t("builder.scheme.customTable.label"),
-  },
-};
-
-const handleCreateCollection = async () => {
-  let result = await form.value.validate();
-   if (result) {
-    notify({
-      type: "warning",
-      title: t("common.actions.warning"),
-      message: t("collections.collectionCreationFailed"),
-    });
-    return;
-  }
-  try {
-    const response = await fetch("/api/cms-type", {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(values.value)
-    });
-    const data = await response.json();
-    router.push(`/settings/collections/edit/${data.id}`);
-    fetchContentTypes();
-    notify({
-      type: "success",
-      title: t("common.actions.success"),
-      message: t("collections.collectionCreated"),
-    });
-  } catch (error) {
-    notify({
-      type: "error",
-      title: t("common.actions.error"),
-      message: t("collections.collectionCreationFailed"),
-    });
-    console.error(error);
-  }
-};
-</script>
-
-<style lang="scss" scoped></style>

package/src/components/builder/formTypeSchema.js

@@ -1,145 +0,0 @@
-export const formTypeSchema = (level = 0, t) => {
-
-  return {
-    name: {
-      type: "text",
-      label: t("builder.fieldLabels.name"),
-      required: true,
-      placeholder: t("builder.fieldPlaceholders.name"),
-      validators: ["required"],
-    },
-    label: {
-      type: "text",
-      label: t("builder.fieldLabels.label"),
-      required: true,
-      placeholder: t("builder.fieldPlaceholders.label"),
-      validators: ["required"],
-    },
-    placeholder: {
-      type: "text",
-      label: t("builder.fieldLabels.placeholder"),
-      required: true,
-      placeholder: t("builder.fieldPlaceholders.placeholder"),
-    },
-    help: {
-      type: "text",
-      label: t("builder.fieldLabels.help"),
-      placeholder: t("builder.fieldPlaceholders.help"),
-    },
-    type: {
-      type: "combobox",
-      mode: "combo",
-      label: t("builder.fieldLabels.type"),
-      required: true,
-      maxHeight: "300",
-      slots: {
-        option:
-          '<div class="flex items-center gap-2 p-2 py-1 rounded hover:bg-gray-100" :class="{ \'bg-gray-100\': selectedNavIndex === ind, \'bg-gray-100\': modelValue == ind }" ><div :class="`flex items-center gap-2 p-1 bg-${color }-100 rounded`"><component :is="`icon-${id}`" class="block" height="24" width="30"  /></div><span class="text-sm text-gray-700">{{ text }}</span></div>',
-      },
-      options: [
-        { text: t("builder.fieldOptions.text"), id: "text", color: "blue" },
-        { text: t("builder.fieldOptions.number"), id: "number", color: "green" },
-        { text: t("builder.fieldOptions.date"), id: "date", color: "red" },
-        { text: t("builder.fieldOptions.datetime"), id: "datetime", color: "purple" },
-        { text: t("builder.fieldOptions.file"), id: "file", color: "yellow" },
-        { text: t("builder.fieldOptions.select"), id: "select", color: "yellow" },
-        { text: t("builder.fieldOptions.multiselect"), id: "multiselect", color: "blue" },
-        { text: t("builder.fieldOptions.mediaselect"), id: "mediaselect", color: "orange" },
-        { text: t("builder.fieldOptions.radio"), id: "radio", color: "blue" },
-        { text: t("builder.fieldOptions.boolean"), id: "boolean", color: "red" },
-        { text: t("builder.fieldOptions.datalist"), id: "datalist", color: "orange" },
-        { text: t("builder.fieldOptions.image"), id: "image", color: "blue" },
-        { text: t("builder.fieldOptions.slug"), id: "slug", color: "green" },
-        { text: t("builder.fieldOptions.richtext"), id: "richtext", color: "red" },
-        { text: t("builder.fieldOptions.reference"), id: "reference", color: "yellow" },  
-        { text: t("builder.fieldOptions.relation"), id: "relation", color: "pink" },  
-        { text: t("builder.fieldOptions.fileList"), id: "FileList", color: "orange" },  
-        { text: t("builder.fieldOptions.tags"), id: "tags", color: "blue" },
-      ]?.filter((item) =>   level > 1 ? item.id !== "datalist" : true),
-      validators: ["required"],
-    },
-    subtype: {
-      type: "combobox",
-      mode: "combo",
-      label: t("builder.fieldLabels.subtype"),
-      placeholder: t("builder.fieldPlaceholders.subtype"),
-      options: [
-        { text: t("builder.fieldOptions.text"), id: "text" },
-        { text: t("builder.fieldOptions.number"), id: "number" },
-        { text: t("builder.fieldOptions.date"), id: "date" },
-        { text: t("builder.fieldOptions.datetime"), id: "datetime" },
-      ],
-      conditions: ["type", "==", "array"],
-    },
-    parent: {
-      type: "text",
-      label: t("builder.fieldLabels.parent"),
-      placeholder: t("builder.fieldPlaceholders.parent"),
-      conditions: ["type", "in", ["slug", "select", "multiselect", ]],
-    },
-    data: {
-      type: "text",
-      label: t("builder.fieldLabels.data"),
-      placeholder: t("builder.fieldPlaceholders.data"),
-      conditions: ["type", "in", ["select", "multiselect", ]],
-    },
-    options: {
-      type: "datalist",
-      label: t("builder.fieldLabels.options"),
-      conditions: ["type", "in", ["select", "multiselect", "radio"]],
-      colModel: [
-        {
-          key: "id",
-          ua: "ID",
-          type: "text",
-          validators: ["required"],
-          col: 6,
-        },
-        {
-          key: "text",
-          ua: "Text",
-          type: "text",
-          validators: ["required"],
-          col: 6,
-        },
-      ],
-    },
-    colModel: level <= 1 ? {
-      type: "datalist",
-      label: t("builder.fieldLabels.colModel"),
-      conditions: ["type", "==", "datalist"],
-      colModel: Object.entries(formTypeSchema(level + 1, t)).map(([key, value]) => ({
-        key,
-        ...value,
-        ua: value?.label || value?.ua,
-      }))
-    } : {
-      type: "switcher",
-      label: t("builder.fieldLabels.required"),
-      hidden: true,
-      required: true,
-    },
-    multiple: {
-      type: "switcher",
-      label: t("builder.fieldLabels.multiple"),
-      conditions: ["type", "==", "file"],
-    },
-    relation: {
-      type: "combobox",
-      data:'collection',
-      label: t("builder.fieldLabels.relation"),
-      conditions: ["type", "==", "relation"],
-    },
-    required: {
-      type: "switcher",
-      label: t("builder.fieldLabels.required"),
-      required: true,
-    },
-    localization: {
-      type: "switcher",
-      label: t("builder.fieldLabels.localization"),
-      conditions: ["type", "in", ["richtext","text","reference","multiselect","datalist"]],
-      required: true,
-    },
-  }
-}

package/src/components/builder/tabs/index.ts

@@ -1,9 +0,0 @@
-import VsBuilderMonaco from "./vs-builder-monaco.vue";
-import VsBuilderEdit from "./vs-builder-edit.vue";
-import VsBuilderPreview from "./vs-builder-preview.vue";
-
-export default {
-  monaco: VsBuilderMonaco,
-  edit: VsBuilderEdit,
-  preview: VsBuilderPreview,
-};

package/src/components/builder/tabs/vs-builder-edit.vue

@@ -1,133 +0,0 @@
-<template>
-  <div>
-    <VsForm
-      v-model="data"
-      :schema="scheme"
-      v-model:form="form"
-    />
-    <VSBuilderDatatable v-model="data" />
-  </div>
-</template>
-
-<script setup>
-import { onBeforeUnmount, computed, ref } from "vue";
-import VSBuilderDatatable from "../vs-builder-datatable.vue";
-import { useI18n } from "vue-i18n";
-import { notify } from '@opengis/core';
-import VsForm from '@opengis/form'
-
-const { t } = useI18n();
-
-const data = defineModel("data");
-
-const form = defineModel("form");
-
-const formObject = ref({});
-
-const scheme = computed(() => ({
-  name: {
-    type: "text", 
-    label: t("builder.scheme.name.label"),
-    required: true,
-    placeholder: t("builder.scheme.name.placeholder"),
-    validators: ["required"],
-    col: 4,
-  },
-  title: {
-    type: "text",
-    label: t("builder.scheme.title.label"),
-    required: true,
-    placeholder: t("builder.scheme.title.placeholder"),
-    validators: ["required"],
-    col: 4,
-  },
-  preview_path: {
-    type: "text",
-    label: t("builder.scheme.preview_path.label"),
-    placeholder: t("builder.scheme.preview_path.placeholder"),
-    col: 4,
-    info: t("builder.scheme.preview_path.info"),
-  },
-  // slug: {
-  //   type: "slug",
-  //   label: "Title",
-  //   parent: "title",
-  //   required: true,
-  //   placeholder: "Title",
-  //   validators: ["required"],
-  //   col: 4,
-  // },
-  type: {
-    type: "select",
-    label: t("builder.scheme.type.label"),
-    required: true,
-    placeholder: t("builder.scheme.type.placeholder"),
-    validators: ["required"],
-    col: 4,
-
-    options: [
-      {
-        text: t("builder.scheme.type.options.collection"),
-        id: "collection",
-      },
-      {
-        text: t("builder.scheme.type.options.single"),
-        id: "single",
-      },
-    ],
-  },
-  status: {
-    type: "select",
-    label: t("builder.scheme.status.label"),
-    required: true,
-    placeholder: t("builder.scheme.status.placeholder"),
-    col: 4,
-    options: [
-      {
-        text: t("builder.scheme.status.options.published"),
-        id: "published",
-      },
-      {
-        text: t("builder.scheme.status.options.draft"),
-        id: "draft",
-      },
-      {
-        text: t("builder.scheme.status.options.archived"),
-        id: "archived",
-      },
-    ],
-  },
-  include_search:{
-    type: "switcher",
-    label: t("builder.scheme.include_search.label"),
-    placeholder: t("builder.scheme.include_search.placeholder"),
-    col: 4,
-  },
- 
-  description: {
-    type: "textarea",
-    label: t("builder.scheme.description.label"),
-    required: true,
-    placeholder: t("builder.scheme.description.placeholder"),
-  },
-}));
-
-const handleUpdate = async (value) => {
-  let result = await formObject.value.validate();
-   if (result) {
-    notify({
-      type: "warning",
-      title: t("common.actions.warning"),
-      message: t("builder.editFieldFailed"),
-    });
-    return;
-  }
-  data.value = { ...value, columns: data.value.columns };
-};
-
-onBeforeUnmount(() => {
-  form.value = null;
-});
-</script>
-
-<style lang="scss" scoped></style>

package/src/components/builder/tabs/vs-builder-monaco.vue

@@ -1,29 +0,0 @@
-<template>
-  <div v-if="id" :key="id">
-    <MonacoEditor
-      v-model="code"
-      language="yaml"
-      theme="vs-light"
-      height="calc(100vh - 200px)"
-      width="100%"
-      :options="{
-        minimap: { enabled: false },
-      }"
-    />
-  </div>
-</template>
-<script setup>
-import { ref, onMounted } from "vue";
-import MonacoEditor from "../../form-components/MonacoEditor.vue";
-
-const code = ref("");
-const yaml = defineModel("yaml", { type: String, default: "" });
-
-const id = ref(null);
-
-onMounted(() => {
-  id.value = Math.random().toString(36).substring(2, 15);
-});
-</script>
-
-<style lang="scss" scoped></style>

package/src/components/builder/tabs/vs-builder-preview.vue

@@ -1,39 +0,0 @@
-<template>
-  <div ref="form">
-    <VForm v-if="scheme?.length > 0" v-model="data" :schema="scheme" />
-  </div>
-</template>
-
-<script setup>
-import { ref, computed } from "vue";
-import { getField } from "../../../utils/getField";
-import { VForm, inputs } from '@opengis/form'
-import VsDatatableForm from '@/components/form-components/vs-form-custom-datatable.vue'
-import VsReference from '@/components/form-components/vs-form-reference-list.vue'
-import VsTiptap from '@/components/form-components/vs-form-tiptap.vue'
-import VsMediaSelect from '@/components/form-components/vs-form-media-select.vue'
-import VsRichtextMd from '@/components/form-components/vs-richtext-md.vue'
-import VsInteger from '@/components/form-components/vs-form-integer.vue'
-import VsRelationLink from '@/components/form-components/vs-form-reletion-link.vue'
-
-inputs['vs-input-custom-datatable'] = VsDatatableForm;
-inputs['vs-input-reference'] = VsReference;
-inputs['vs-input-texteditor'] = VsTiptap;
-inputs['vs-input-mediaselect'] = VsMediaSelect;
-inputs['vs-input-file'] = VsMediaSelect;
-inputs['vs-input-image'] = VsMediaSelect;
-inputs['vs-input-richtext-md'] = VsRichtextMd;
-inputs['vs-input-integer'] = VsInteger;
-inputs['vs-input-relation-link'] = VsRelationLink;
-
-const data = ref({});
-
-const columns = defineModel("data");
-const form = defineModel("form");
-
-const scheme = computed(() => {
-  return columns.value?.columns?.map(getField) || [];
-});
-</script>
-
-<style lang="scss" scoped></style>