@opengis/cms 0.0.22 → 0.0.26

package/src/components/menu/AddNewItemInTree.vue

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

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

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

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

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

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

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

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

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

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

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