@opengis/cms 0.0.21 → 0.0.22

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

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

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

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

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

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