@opengis/cms 0.0.21 → 0.0.22

package/src/components/LanguageSwitcher.vue

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

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

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

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

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

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

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

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