@opengis/cms 0.0.22 → 0.0.24

package/src/components/form-components/vs-form-color-picker.vue

@@ -1,29 +0,0 @@
-<template>
-  <input
-    type="color"
-    v-model="modelValueLocal"
-    class="w-8 h-8 p-0 border border-gray-300 rounded cursor-pointer bg-transparent"
-    @input="onInput"
-  />
-</template>
-
-<script setup lang="ts">
-import { defineProps, defineEmits, computed } from 'vue';
-
-const props = defineProps<{
-  modelValue: string
-}>();
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: string): void
-}>();
-
-const modelValueLocal = computed({
-  get: () => props.modelValue,
-  set: (val: string) => emit('update:modelValue', val)
-});
-
-function onInput(e: Event) {
-  const value = (e.target as HTMLInputElement).value;
-  emit('update:modelValue', value);
-}
-</script>

package/src/components/form-components/vs-form-custom-datatable.vue

@@ -1,214 +0,0 @@
-<template>
-  <div class="p-0 shadow w-full">
-    <div class="overflow-x-auto">
-      <div class="relative w-full overflow-auto">
-        <table class="w-full caption-bottom text-sm">
-          <thead class="[&amp;_tr]:border-b">
-            <tr
-              class="border-b data-[state=selected]:bg-muted bg-slate-50/50 dark:bg-slate-700/50 hover:bg-slate-50/80 dark:hover:bg-slate-700/80 transition-colors"
-            >
-              <th
-                class="h-10 px-2 align-middle font-medium text-muted-foreground [&amp;:has([role=checkbox])]:pr-0 [&amp;&gt;[role=checkbox]]:translate-y-[2px] w-12 text-center"
-              ></th>
-              <th
-                v-for="field in colModel"
-                :key="field.name"
-                class="h-10 px-2 text-left align-middle [&amp;:has([role=checkbox])]:pr-0 [&amp;&gt;[role=checkbox]]:translate-y-[2px] font-semibold text-slate-700 dark:text-slate-300 min-w-[150px]"
-              >
-                {{ field.label || field.title || field.name }}
-              </th>
-
-              <th
-                class="h-10 px-2 align-middle [&amp;:has([role=checkbox])]:pr-0 [&amp;&gt;[role=checkbox]]:translate-y-[2px] font-semibold text-slate-700 dark:text-slate-300 text-end"
-              >
-                {{ $t('table.actions') }}
-              </th>
-            </tr>
-          </thead>
-          <tbody class="[&amp;_tr:last-child]:border-0">
-            <tr
-              v-for="(item, index) in data"
-              :key="item?.id"
-              class="border-b data-[state=selected]:bg-muted transition-all duration-200 hover:bg-slate-50/60 dark:hover:bg-slate-700/60 cursor-move"
-              :class="{ 'opacity-50': draggedItem === item }"
-              draggable="true"
-              @dragstart="handleDragStart($event, item, index)"
-              @dragover="handleDragOver($event, index)"
-              @drop="handleDrop($event, index)"
-              @dragenter="handleDragEnter($event, index)"
-              @dragleave="handleDragLeave($event)"
-            >
-              <td
-                class="p-2 align-middle [&amp;:has([role=checkbox])]:pr-0 [&amp;&gt;[role=checkbox]]:translate-y-[2px] text-center"
-              >
-                <div class="flex items-center justify-center text-slate-400">
-                  <GripVertical />
-                </div>
-              </td>
-
-              <td
-                v-for="field in colModel"
-                :key="field.name"
-                class="p-2 align-middle [&amp;:has([role=checkbox])]:pr-0 [&amp;&gt;[role=checkbox]]:translate-y-[2px] text-slate-600 dark:text-slate-400 text-sm"
-              >
-                <span v-if="field.type === 'Texteditor'" v-html="item[field.key] || '-'"></span>
-                <div v-else-if="field.type === 'File'" class="flex items-center gap-2">
-                  <div v-if="Array.isArray(item[field.key]) && item[field.key].length > 0" class="flex items-center gap-1">
-                    <div 
-                      v-for="(file, fileIndex) in getDisplayFiles(item[field.key])" 
-                      :key="fileIndex"
-                      class="relative w-8 h-8 rounded overflow-hidden bg-gray-100 dark:bg-gray-700 flex-shrink-0"
-                    >
-                      <img 
-                        :src="file" 
-                        :alt="`Image ${fileIndex + 1}`"
-                        class="w-full h-full object-cover"
-                        @error="handleImageError($event)"
-                      />
-                    </div>
-                    <span v-if="getRemainingFilesCount(item[field.key]) > 0" class="text-xs text-gray-500 dark:text-gray-400 ml-1">
-                      +{{ getRemainingFilesCount(item[field.key]) }}
-                    </span>
-                  </div>
-                  <div v-else class="w-8 h-8 rounded bg-gray-100 dark:bg-gray-700 flex items-center justify-center">
-                    <svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
-                      <path fill-rule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clip-rule="evenodd" />
-                    </svg>
-                  </div>
-                </div>
-                <span v-else>{{ item[field.key] || "-" }}</span>
-              </td>
-
-              <td
-                class="p-2 align-middle [&amp;:has([role=checkbox])]:pr-0 [&amp;&gt;[role=checkbox]]:translate-y-[2px]"
-              >
-                <VsFormCustomDatatableControls
-                  :item="item"
-                  :colModel="colModel"
-                  v-model="data"
-                />
-              </td>
-            </tr>
-
-            <!-- Drop zone indicator -->
-            <tr
-              v-if="showDropZone"
-              class="h-2 bg-blue-200 dark:bg-blue-800 transition-all duration-200"
-            ></tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-    <VsFormCustomDatatableAdd :colModel="colModel" v-model="data" />
-  </div>
-</template>
-
-<script setup>
-import { GripVertical } from "lucide-vue-next";
-import VsFormCustomDatatableControls from "./custom-datatable/vs-form-custom-datatable-controls.vue";
-import VsFormCustomDatatableAdd from "./custom-datatable/vs-form-custom-datatable-add.vue";
-import { onMounted, ref } from "vue";
-
-const props = defineProps({
-  colModel: {
-    type: Array,
-    required: true,
-  },
-});
-
-const data = defineModel({
-  type: Array,
-  required: true,
-});
-
-// Drag and drop state
-const draggedItem = ref(null);
-const draggedIndex = ref(-1);
-const showDropZone = ref(false);
-
-// Drag and drop handlers
-const handleDragStart = (event, item, index) => {
-  draggedItem.value = item;
-  draggedIndex.value = index;
-  event.dataTransfer.effectAllowed = "move";
-  event.dataTransfer.setData("text/html", ""); // Required for Firefox
-};
-
-const handleDragOver = (event, index) => {
-  event.preventDefault();
-  event.dataTransfer.dropEffect = "move";
-};
-
-const handleDragEnter = (event, index) => {
-  if (draggedIndex.value !== index) {
-    showDropZone.value = true;
-  }
-};
-
-const handleDragLeave = (event) => {
-  // Only hide drop zone if we're leaving the table entirely
-  if (!event.currentTarget.contains(event.relatedTarget)) {
-    showDropZone.value = false;
-  }
-};
-
-const handleDrop = (event, dropIndex) => {
-  event.preventDefault();
-  showDropZone.value = false;
-
-  if (draggedIndex.value === -1 || draggedIndex.value === dropIndex) {
-    return;
-  }
-
-  // Reorder the array
-  const newData = [...data.value];
-  const [removed] = newData.splice(draggedIndex.value, 1);
-  newData.splice(dropIndex, 0, removed);
-
-  // Update the model
-  data.value = newData;
-
-  // Reset drag state
-  draggedItem.value = null;
-  draggedIndex.value = -1;
-};
-
-// Constants for file display
-const MAX_DISPLAY_FILES = 3;
-
-// Get files to display (limited to MAX_DISPLAY_FILES)
-const getDisplayFiles = (files) => {
-  if (!Array.isArray(files)) return [];
-  return files.slice(0, MAX_DISPLAY_FILES);
-};
-
-// Get count of remaining files not displayed
-const getRemainingFilesCount = (files) => {
-  if (!Array.isArray(files)) return 0;
-  return Math.max(0, files.length - MAX_DISPLAY_FILES);
-};
-
-// Handle image loading errors
-const handleImageError = (event) => {
-  const img = event.target;
-  img.style.display = 'none';
-  const placeholder = document.createElement('div');
-  placeholder.className = 'w-full h-full flex items-center justify-center bg-gray-200 dark:bg-gray-600';
-  placeholder.innerHTML = `
-    <svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
-      <path fill-rule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clip-rule="evenodd" />
-    </svg>
-  `;
-  img.parentNode.appendChild(placeholder);
-};
-
-onMounted(() => {
-  data.value
-    ?.filter((el) => typeof el === "object")
-    ?.forEach((item) =>
-      item.id
-        ? item.id
-        : (item.id = Math.random().toString(36).substring(2, 15))
-    );
-});
-</script>

package/src/components/form-components/vs-form-integer.vue

@@ -1,86 +0,0 @@
-<template>
-  <div class="p-0">
-    <slot name="label" v-bind="{ id }"></slot>
-    <input
-      v-model="inputValue"
-      type="number"
-      @keydown="validateInput"
-      @blur="handleBlur"
-      :step="step"
-      :min="min"
-      :max="max"
-      :id="id"
-      aria-describedby="helper-text-explanation"
-      class="vs-number__input py-2 px-3 block w-full h-[38px] border border-solid border-stone-200 rounded-lg text-sm text-stone-800 placeholder:text-stone-500 focus:z-10 focus:border-1 focus:outline-none focus:border-blue-600 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200 dark:placeholder:text-neutral-500 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-neutral-600"
-      :placeholder="placeholder"
-      :disabled="disabled"
-      :class="{ 'cursor-not-allowed': disabled }"
-    />
-  </div>
-</template>
-<script>
-export default {
-  props: {
-    min: { type: Number },
-    step: { type: Number, default: () => 1 },
-    max: { type: Number, default: () => Infinity },
-    modelValue: { type: Number, default: () => null },
-    label: { type: String, default: () => "" },
-    placeholder: { type: String, default: () => "0" },
-    disabled: { type: Boolean, default: () => false },
-  },
-  data() {
-    return {
-      id: `input-number-${Math.floor(Math.random() * 1000)}`,
-      inputValue: this.modelValue,
-    };
-  },
-  watch: {
-    modelValue(newVal) {
-      this.inputValue = newVal;
-    },
-    inputValue(newVal) {
-      this.$emit("update:modelValue", newVal);
-    },
-  },
-  methods: {
-    validateInput(event) {
-      if (
-        event.key === "+" ||
-        event.key === "," ||
-        event.key === "." ||
-        (event.key === "-" &&
-          this.inputValue &&
-          this.inputValue.toString().length > 0)
-      ) {
-        event.preventDefault();
-      }
-    },
-    handleBlur() {
-      let value = parseFloat(this.inputValue);
-
-      this.$emit("blur");
-
-      if (isNaN(value)) {
-        value = this.min;
-      } else if (value > this.max) {
-        value = this.max;
-      } else if (value < this.min) {
-        value = this.min;
-      }
-      this.inputValue = value;
-      this.$emit("update:modelValue", this.inputValue);
-    },
-  },
-};
-</script>
-
-<style>
-.col-error .vs-number__input {
-  border: 1px solid red;
-}
-
-.vs-number__input::placeholder {
-    opacity: 0.5;
-  }
-</style>

package/src/components/form-components/vs-form-key-value.vue

@@ -1,201 +0,0 @@
-<template>
-  <div class="w-full">
-    <div ref="sortableContainer" class="flex flex-col gap-1">
-      <div
-        v-for="item in value"
-        :key="item?.id"
-        class="flex items-center gap-2 w-full"
-      >
-        <button class="drag-handle cursor-move">
-          <svg
-            fill="#000000"
-            width="20"
-            height="20"
-            viewBox="0 0 36 36"
-            version="1.1"
-            preserveAspectRatio="xMidYMid meet"
-            xmlns="http://www.w3.org/2000/svg"
-            xmlns:xlink="http://www.w3.org/1999/xlink"
-          >
-            <title>drag-handle-line</title>
-            <circle
-              cx="15"
-              cy="12"
-              r="1.5"
-              class="clr-i-outline clr-i-outline-path-1"
-            ></circle>
-            <circle
-              cx="15"
-              cy="24"
-              r="1.5"
-              class="clr-i-outline clr-i-outline-path-2"
-            ></circle>
-            <circle
-              cx="21"
-              cy="12"
-              r="1.5"
-              class="clr-i-outline clr-i-outline-path-3"
-            ></circle>
-            <circle
-              cx="21"
-              cy="24"
-              r="1.5"
-              class="clr-i-outline clr-i-outline-path-4"
-            ></circle>
-            <circle
-              cx="21"
-              cy="18"
-              r="1.5"
-              class="clr-i-outline clr-i-outline-path-5"
-            ></circle>
-            <circle
-              cx="15"
-              cy="18"
-              r="1.5"
-              class="clr-i-outline clr-i-outline-path-6"
-            ></circle>
-            <rect x="0" y="0" width="36" height="36" fill-opacity="0" />
-          </svg>
-        </button>
-
-        <!-- Key field -->
-        <div class="w-1/3">
-          <VsText v-model="item.key" type="text" :placeholder="t('form.key')" />
-        </div>
-
-        <!-- Value field -->
-        <div class="w-2/3">
-          <VsText v-model="item.value" type="text" :placeholder="t('form.value')" />
-        </div>
-
-        <button
-          @click="deleteItem(item?.id)"
-          class="shrink-0 w-[30px] text-gray-600 h-[30px] rounded-full flex items-center justify-center bg-gray-100 duration-300 hover:bg-gray-200"
-        >
-          <X height="16" width="16" />
-        </button>
-      </div>
-    </div>
-
-    <span v-if="!value.length" class="text-[14px] text-gray-700"
-      >{{ t('form.noDataToDisplay') }}</span
-    >
-    <div class="mt-2 w-full flex items-center">
-      <button
-        type="button"
-        @click="addItem"
-        :disabled="disabled"
-        class="py-1.5 px-2 flex items-center gap-x-1 text-xs font-medium rounded-full border border-dashed border-gray-200 bg-white text-gray-800 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed focus:outline-hidden focus:bg-gray-50 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700"
-      >
-        <Plus height="14" width="14" /> {{ t('form.add') }}
-      </button>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { computed, ref, watch, onMounted, inject } from "vue";
-import { Plus, X } from "lucide-vue-next";
-import Sortable from "sortablejs";
-import { useI18n } from 'vue-i18n';
-const { t } = useI18n();
-
-const getRandomId = (prefix) => {
-  return `${prefix}-${Math.random().toString(36).substring(2, 15)}`;
-};
-
-const props = defineProps({
-  colModel: { type: Object, default: () => ({ type: "Text" }) },
-  ignore: { type: Array, default: () => [] },
-  addButtonText: { type: String, default: () => "Додати" },
-});
-
-const metaParentValue = inject("metaParentValue");
-
-// Convert object to array of key-value pairs, исключая игнорируемые ключи
-const value = ref(
-  Object.entries(metaParentValue.value || {})
-    .filter(([key]) => !props.ignore.includes(key))
-    .map(([key, val]) => ({
-      id: getRandomId("key-value-"),
-      key: key,
-      value: val,
-    }))
-);
-
-const sortableContainer = ref(null);
-
-onMounted(() => {
-  if (sortableContainer.value) {
-    new Sortable(sortableContainer.value, {
-      handle: ".drag-handle",
-      animation: 150,
-      ghostClass: "sortable-ghost",
-      onEnd: ({ oldIndex, newIndex }) => {
-        if (oldIndex !== newIndex) {
-          const item = value.value.splice(oldIndex, 1)[0];
-          value.value.splice(newIndex, 0, item);
-        }
-      },
-    });
-  }
-});
-
-const disabled = computed(() => {
-  // Отключаем кнопку только если есть незавершенные записи
-  return value.value?.some(
-    (i) => (i?.key && !i?.value) || (!i?.key && i?.value)
-  );
-});
-
-const addItem = () => {
-  value.value.push({ id: getRandomId("key-value-"), key: "", value: "" });
-};
-
-const deleteItem = (id) => {
-  value.value = value.value?.filter((i) => i?.id !== id);
-};
-
-watch(
-  value,
-  (n) => {
-    // Convert array back to object
-    const result = {};
-    n.forEach((item) => {
-      if (item.key && item.value !== undefined) {
-        result[item.key] = item.value;
-      }
-    });
-    const tempValue = {};
-    if (props.ignore.length) {
-      props.ignore.forEach((item) => {
-        tempValue[item] = metaParentValue.value[item];
-      });
-    }
-
-    // Сохраняем игнорируемые поля и добавляем новые/измененные
-    metaParentValue.value = {
-      ...tempValue,
-      ...result,
-    };
-  },
-  { deep: true }
-);
-</script>
-
-<style scoped>
-.list-enter-active,
-.list-leave-active {
-  transition: all 0.3s ease;
-}
-.list-enter-from,
-.list-leave-to {
-  opacity: 0;
-  transform: translateY(10px);
-}
-
-.sortable-ghost {
-  opacity: 0.5;
-  background: #f0f0f0;
-}
-</style>

package/src/components/form-components/vs-form-marcdown-md.vue

@@ -1,3 +0,0 @@
-<template>
-  <vs-richtext-md v-bind="$attrs" />
-</template>