@opengis/cms 0.0.21 → 0.0.22

package/src/components/menu/AddNewItemInTree.vue

@@ -0,0 +1,75 @@
+<template>
+     <VsModal
+      teleport="#modal"
+      :visible="isLocalOpen"
+      :title="$t('menu.createMenu')"
+      template="default"
+      :closeClickBack="false"
+      @close="isLocalOpen = 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="isLocalOpen = false; values = {}"
+          >
+            {{ $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>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import VsForm from "@opengis/form";
+import { VsModal } from "@opengis/core";
+import { notify } from '@opengis/core';
+const { t } = useI18n();
+
+const isLocalOpen = defineModel<boolean>('isOpen', { required: true });
+const form = ref<any>({});
+
+const emit = defineEmits([ 'addNewItem']);
+
+const values = ref({});
+
+const scheme = {
+    title: {
+        type: "text",
+        label: t("menu.form.name"),
+        required: true,
+        placeholder: t("menu.form.name"),
+        validators: ["required"],
+    },
+    value: {
+        type: "text",
+        label: t("menu.form.value"),
+        required: true,
+        placeholder: t("menu.form.value"),
+        validators: ["required"],
+    },
+};
+
+const handleCreateCollection = async () => {
+    let result = await form.value.validate();
+    if (result) {
+        notify({
+            type: "warning",
+            title: t("common.actions.warning"),
+            message: t("menu.createMenuFailed"),
+        });
+        return;
+    }
+    emit('addNewItem', values.value);
+    values.value = {}; // Очищуємо форму після створення
+}
+</script>

package/src/components/menu/MenuBody.vue

@@ -0,0 +1,149 @@
+<template>
+    <VForm :schema="scheme" v-model="formValue" v-model:form="form" />
+    <button
+      @click="isOpen = true"
+      class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium w-min ml-auto my-6 h-9 px-4 py-2 bg-blue-600 text-white shadow-md transition-all duration-200 transform
+      hover:bg-blue-700 hover:shadow-lg hover:scale-105
+      focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring 
+      disabled:pointer-events-none disabled:opacity-50"
+    >
+      <Plus class="w-4 h-4 mr-2" />
+      {{ $t("menu.createMenu") }}
+    </button>
+    <AddNewItemInTree 
+        v-model:isOpen="isOpen" 
+        v-model:form="addModalForm" 
+        @addNewItem="addNewItem" 
+    />
+    <MenuList
+      class="px-2"
+      :list="formValue.items"
+      @update:list="updateList"
+      @delete:item="deleteItem"
+    />        
+</template>
+
+<script setup lang="ts">
+    import MenuList from './MenuList.vue';
+    import { onBeforeMount, ref } from 'vue';
+    import AddNewItemInTree from './AddNewItemInTree.vue';
+    import MonacoEditor from '../form-components/MonacoEditor.vue';
+    import { Plus } from "lucide-vue-next";
+    import { useI18n } from 'vue-i18n';
+    type MenuItem = { title: string; value: string; id: string, children: MenuItem[] };
+    import { VForm, inputs } from '@opengis/form'
+    import { notify } from '@opengis/core';
+    inputs['vs-input-monaco-editor'] = MonacoEditor
+
+    const { t } = useI18n();
+
+    const isOpen = ref(false);
+    const addModalForm = ref<any>(null);
+    const formValue = defineModel<any>('modelValue');
+    const form = ref<any>({});
+    const addNewItem = async (item: MenuItem) => {
+        try {
+            let result = await form.value.validate();
+            if (result) {
+                notify({
+                    type: "warning",
+                    title: t("common.actions.warning"),
+                    message: t("menu.createMenuFailed"),
+                });
+                return;
+            }
+            isOpen.value = false;
+
+            item.id = Math.random().toString(36).substr(2, 9);
+            item.children = [];
+            formValue.value.items.unshift(item);
+        } catch (error) {
+
+            console.log(error);
+        }
+    }
+
+    const scheme = ref<Record<string, any>>([
+        {
+            key: "name",
+            title: t("common.title"),
+            type: "text",
+            placeholder: t("common.title"),
+            required: true,
+            validators: ["required"],
+        },
+        {
+            key: "description",
+            title: t("common.description"),
+            type: "text",
+            placeholder: t("common.description"),
+            required: true,
+            validators: ["required"],
+        },
+        {
+            key: "locale",
+            title: t("menu.form.language"),
+            type: "select",
+            placeholder: t("menu.form.language"),
+            required: true,
+            options: [
+            {text: "Ukrainian", id: "uk"},
+            {text: "English", id: "en"},
+            ],
+            validators: ["required"],
+        },
+    ]);
+        
+    const convertToArray = (obj: object): MenuItem[] => {
+        let dataArray: MenuItem[] = [];
+
+        for (const key in obj) {
+            if (typeof obj[key] === 'object') {
+                dataArray.push({
+                    title: key,
+                    value: '',
+                    id: Math.random().toString(36).substr(2, 9),
+                    children: convertToArray(obj[key])
+                });
+            } else {
+                dataArray.push({
+                    title: key,
+                    value: obj[key],
+                    id: Math.random().toString(36).substr(2, 9),
+                    children: []
+                });
+            }
+        }   
+        
+        return dataArray;
+    }
+
+    const updateList = (newVal: any) => {
+        formValue.value.items = newVal;
+    };
+
+    const deleteItem = (item: any) => {
+        removeItemRecursiveInPlace(formValue.value.items, item.id);
+    };
+
+    function removeItemRecursiveInPlace(list: any[], id: string): boolean {
+        for (let i = list.length - 1; i >= 0; i--) {
+            if (list[i].id === id) {
+                list.splice(i, 1);
+                return true;
+            } else if (list[i].children && list[i].children.length) {
+                if (removeItemRecursiveInPlace(list[i].children, id)) {
+                    return true;
+                }
+            }
+        }
+
+        return false;
+    }
+
+    onBeforeMount(()=> {
+        if (!Array.isArray(formValue.value.items)) {
+            formValue.value.items = convertToArray(formValue.value.items)
+        }
+    })
+</script>

package/src/components/menu/MenuItem.vue

@@ -0,0 +1,73 @@
+<template>
+    <div :class="[{'space-y-1': typeof value!=='string'}, 'dark:bg-transparent']">
+        <div v-if="!isEditing" class="p-3 flex items-center gap-x-3 cursor-grab bg-gray-100 border border-gray-300 rounded-lg font-medium text-sm text-gray-800 dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-200">
+            {{ title }}
+            <span v-if="typeof value === 'string'" class="text-xs text-gray-500 dark:text-neutral-400 ml-2">{{ value }}</span>
+            <Pencil v-if="typeof value === 'string'" class="shrink-0 size-4 ml-auto text-gray-500 dark:text-neutral-500 cursor-pointer hover:text-blue-600 dark:hover:text-blue-400" @click.stop="startEdit" />
+            <Trash2 class="shrink-0 size-4 text-gray-500 dark:text-neutral-500 cursor-pointer hover:text-red-600 dark:hover:text-red-400" @click.stop="emit('delete')" />
+            <IconDrag class="shrink-0 size-4 cursor-pointer text-gray-500 dark:text-neutral-500" />
+        </div>
+        <div v-else class="p-3 flex items-center gap-x-2 bg-gray-100 border border-gray-300 rounded-lg dark:bg-neutral-900 dark:border-neutral-700">
+            <span class="text-sm font-medium text-gray-800 dark:text-neutral-200 shrink-0">{{ title }}:</span>
+            <input
+                v-model="editedValue"
+                @keyup.enter="saveEdit"
+                @keyup.esc="cancelEdit"
+                @blur="saveEdit"
+                class="flex-1 px-2 py-1 text-sm border border-gray-300 rounded dark:bg-neutral-800 dark:border-neutral-600 dark:text-neutral-200 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                type="text"
+                placeholder="/link"
+            />
+            <button
+                @click.stop="saveEdit"
+                class="shrink-0 p-1 text-green-600 dark:text-green-400 hover:bg-green-50 dark:hover:bg-green-900/20 rounded"
+                title="Save"
+            >
+                <Check class="size-4" />
+            </button>
+            <button
+                @click.stop="cancelEdit"
+                class="shrink-0 p-1 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 rounded"
+                title="Cancel"
+            >
+                <X class="size-4" />
+            </button>
+        </div>
+    </div>
+    
+</template>
+
+<script setup lang="ts">
+    import IconDrag from '../icons/icon-drag.vue';
+    import { Trash2, Pencil, Check, X } from "lucide-vue-next";
+    import { ref } from 'vue';
+
+    const props = defineProps<{
+        title: string;
+        value: string | Array<any>;
+    }>();
+
+    const emit = defineEmits(['delete', 'update:value']);
+
+    const isEditing = ref(false);
+    const editedValue = ref('');
+
+    const startEdit = () => {
+        if (typeof props.value === 'string') {
+            editedValue.value = props.value;
+            isEditing.value = true;
+        }
+    };
+
+    const saveEdit = () => {
+        if (typeof props.value === 'string') {
+            emit('update:value', editedValue.value);
+            isEditing.value = false;
+        }
+    };
+
+    const cancelEdit = () => {
+        isEditing.value = false;
+        editedValue.value = '';
+    };
+</script>

package/src/components/menu/MenuList.vue

@@ -0,0 +1,101 @@
+<template>
+  <draggable
+    tag="ul"
+    :list="singleArray"
+    :group="{ name: 'nested', pull: true, put: true }"
+    item-key="id"
+    :class="['nested-sortable space-y-1', {'ps-5 dark:bg-transparent': inside}]"
+    @change="onChange"
+    @end="onChange"
+  >
+    <template #item="{element}">
+      <div class="space-y-1">
+        <MenuItem 
+          :title="element.title"
+          :value="element.value"
+          @delete="deleteItem(element)"
+          @update:value="updateItemValue(element, $event)"
+        />
+        <MenuList
+          v-if="Array.isArray(element.children)"
+          :list="element.children"
+          :inside="true"
+          @update:list="updateChildrenList(element, $event)"
+          @delete:item="deleteItem"
+        />
+      </div>
+    </template>
+  </draggable>
+</template>
+
+<script setup lang="ts">
+import draggable from 'vuedraggable';
+import MenuItem from '../../components/menu/MenuItem.vue';
+import { confirm } from '@opengis/core';
+import { ref, watch, nextTick } from 'vue';
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
+
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => []
+  },
+  inside: {
+    type: Boolean,
+    default: false
+  }
+});
+const emit = defineEmits(['update:list', 'delete:item']);
+
+const singleArray = ref<any[]>([]);
+
+watch(
+  () => props.list,
+  (val) => {
+    // Створюємо новий масив, щоб уникнути проблем з реактивністю
+    singleArray.value = val ? [...val] : [];
+  },
+  { immediate: true, deep: true }
+);
+
+const onChange = () => {
+  emit('update:list', singleArray.value);
+};
+
+const deleteItem = (item: any) => {
+  confirm({
+    title: t("builder.deleteTitle"),
+    message: t("builder.deleteObject"),
+    type: 'error',
+    onConfirm: () => {
+      emit('update:list', singleArray.value);
+      emit('delete:item', item);
+    },
+  })
+};
+
+const updateItemValue = (item: any, newValue: string) => {
+  // Оновлюємо значення безпосередньо в об'єкті
+  item.value = newValue;
+  // Використовуємо nextTick, щоб переконатися, що зміни застосовані
+  nextTick(() => {
+    // Створюємо нову копію масиву, щоб Vue відстежував зміни
+    singleArray.value = [...singleArray.value];
+    // Поширюємо оновлення вгору по дереву, зберігаючи всю структуру
+    emit('update:list', singleArray.value);
+  });
+};
+
+const updateChildrenList = (element: any, newChildren: any[]) => {
+  // Оновлюємо children безпосередньо в елементі
+  element.children = newChildren;
+  // Використовуємо nextTick, щоб переконатися, що зміни застосовані
+  nextTick(() => {
+    // Створюємо нову копію масиву, щоб Vue відстежував зміни
+    singleArray.value = [...singleArray.value];
+    // Поширюємо оновлення вгору по дереву
+    emit('update:list', singleArray.value);
+  });
+};
+</script>

package/src/components/referencec/index.ts

@@ -0,0 +1,7 @@
+import VsReferenceUserCard from "./vs-reference-user-card.vue";
+import VsReferenceFaq from "./vs-reference-faq.vue";
+
+export default {
+  "vs-reference-user-card": VsReferenceUserCard,
+  "vs-reference-faq": VsReferenceFaq,
+};

package/src/components/referencec/vs-reference-faq.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="w-full border rounded p-[16px]">
+    <div class="flex items-center cursor-pointer" @click="isOpen = !isOpen">
+      <span
+        class="block w-[22px] mr-[10px] h-[22px] p-[3px] rounded-full border shrink-0 border-[#3F2B72] text-[#3F2B72] flex items-center justify-center"
+      >
+        <span
+          class="text-[10px] h-full w-full rounded-full flex items-center justify-center bg-[#3F2B72] text-white"
+        >
+          {{ index + 1 }}
+        </span>
+      </span>
+      <h3 class="text-[20px] font-medium">{{ title }}</h3>
+      <button class="ml-auto shrink-0" :class="{ 'rotate-180': isOpen }">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-down"
+        >
+          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+          <path d="M6 9l6 6l6 -6" />
+        </svg>
+      </button>
+    </div>
+    <transition name="fade">
+      <div v-if="isOpen" class="mt-[24px]">
+        <div v-html="description"></div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const props = defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+  description: {
+    type: String,
+    required: true,
+  },
+  index: {
+    type: Number,
+    required: true,
+  },
+});
+
+const isOpen = ref(false);
+</script>
+
+<style lang="scss" scoped></style>

package/src/components/referencec/vs-reference-user-card.vue

@@ -0,0 +1,40 @@
+<template>
+  <div
+    class="aspect-video bg-gray-100 dark:bg-gray-700 flex items-center justify-center"
+  >
+    <img
+      :src="image || noDataImage"
+      alt="Team collaboration"
+      class="w-full h-full object-cover"
+    />
+  </div>
+  <div class="p-3">
+    <h4 class="text-sm font-medium text-gray-900 dark:text-white truncate">
+      {{ name }}
+    </h4>
+    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
+      {{ date }}
+    </p>
+  </div>
+</template>
+
+<script setup>
+import noDataImage from "../../assets/image.png";
+
+const props = defineProps({
+  image: {
+    type: String,
+    required: true,
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  date: {
+    type: String,
+    required: true,
+  },
+});
+</script>
+
+<style lang="scss" scoped></style>

package/src/components/settings/NotificationSettings.vue

@@ -0,0 +1,32 @@
+<template>
+  <template v-for="(item, idx) in modelValue" :key="item.key">
+    <div
+      class="flex min-h-[61px]"
+      :class="{ 
+        'border-b border-slate-200': idx < modelValue.length - 1,
+        'items-center justify-between gap-4': !item.options,
+        'flex-col items-start': item.options && item.options.length > 0
+      }"
+    >
+      <div>
+        <label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-slate-700 dark:text-slate-300">
+          {{ item.label }}
+        </label>
+        <p class="text-sm text-slate-500 dark:text-slate-400">{{ item.description }}</p>
+      </div>
+      <VsSelect 
+        v-if="item.options && item.options.length > 0"
+        :options="item.options"
+        v-model="item.value"
+        class="min-h-10 mt-1"
+      />
+      <SettingsToggleItem v-else v-model="item.checked" />
+    </div>
+  </template>
+</template>
+
+<script setup>
+import SettingsToggleItem from "./SettingsToggleItem.vue";
+
+const modelValue = defineModel("modelValue");
+</script>

package/src/components/settings/SettingsTable.vue

@@ -0,0 +1,50 @@
+<template>
+    <div class="rounded-xl text-card-foreground shadow-lg border-0 bg-white dark:bg-slate-800 backdrop-blur-sm">
+        <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-xl font-semibold text-slate-800 dark:text-slate-100 flex items-center">
+                <component 
+                    :is="icon" 
+                    class="lucide lucide-users w-5 h-5 mr-2" 
+                    :class="colorScheme[color]" 
+                />
+                {{ title }}
+            </h3>
+        </div>
+        <div class="p-6 space-y-4">
+            <slot name="content" />
+            <NotificationSettings v-model="modelValue" />
+        </div>
+    </div>
+</template>
+
+<script setup>
+    import NotificationSettings from '@/components/settings/NotificationSettings.vue';
+
+    const props = defineProps({
+        icon: {
+            type: Object,
+            required: true,
+        },
+        title: {
+            type: String,
+            required: true,
+        },
+        color: {
+            type: String,
+            required: false,
+            default: 'green',
+        },
+    });
+
+    const colorScheme = {
+        green: 'text-green-600',
+        blue: 'text-blue-600',
+        purple: 'text-purple-600',
+        red: 'text-red-600',
+        yellow: 'text-yellow-600',
+        orange: 'text-orange-600',
+        pink: 'text-pink-600',
+    }
+
+    const modelValue = defineModel("modelValue");
+</script>

package/src/components/settings/SettingsTitle.vue

@@ -0,0 +1,33 @@
+<template>
+    <div class="mb-8">
+        <div class="flex items-center gap-2">
+            <h1 class="text-3xl font-bold text-slate-800 dark:text-slate-100 mb-2">
+                {{ $t(title) }}
+            </h1>
+            <a :href="`https://cms.opengis.info/${locale}/config/general-settings/`" target="_blank" :title="$t('guide.settings')">
+                <HelpCircle class="w-5 h-5" />
+            </a>
+        </div>
+        <p class="text-slate-600 dark:text-slate-300">
+            {{ $t(description) }}
+        </p>
+    </div>
+</template>
+
+<script setup>
+    import { HelpCircle } from "lucide-vue-next";
+    import { useI18n } from "vue-i18n";
+
+    const { locale } = useI18n();
+
+    const props = defineProps({
+        title: {
+            type: String,
+            required: true,
+        },
+        description: {
+            type: String,
+            required: true,
+        },
+    });
+</script>

package/src/components/settings/SettingsToggleItem.vue

@@ -0,0 +1,25 @@
+<template>
+    <button 
+        type="button" 
+        role="switch" 
+        :aria-checked="modelValue ? 'true' : 'false'"
+        :data-state="modelValue ? 'checked' : 'unchecked'"
+        value="on" 
+        @click="modelValue = !modelValue"
+        class="peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors 
+        focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background 
+        disabled:cursor-not-allowed disabled:opacity-50 
+        data-[state=checked]:bg-blue-600 data-[state=unchecked]:bg-slate-200 
+        dark:data-[state=unchecked]:bg-slate-600"
+      >
+        <span 
+          :data-state="modelValue ? 'checked' : 'unchecked'" 
+          class="pointer-events-none block h-4 w-4 rounded-full bg-white shadow-lg ring-0 transition-transform shrink-0
+          data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-1"
+        ></span>
+      </button>
+</template>
+
+<script setup>
+    const modelValue = defineModel("modelValue");
+</script>