@opengis/cms 0.0.21 → 0.0.22

package/src/components/ui/UniversalTable.vue

@@ -0,0 +1,310 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { useI18n } from 'vue-i18n';
+const { t } = useI18n();
+import {
+  Edit,
+  Eye,
+  Trash2,
+  CheckCircle,
+  XCircle,
+  Pencil,
+  Layers,
+  File,
+} from "lucide-vue-next";
+
+
+const selectedRow = ref<any>(null);
+
+const props = defineProps<{
+  rows: any[];
+  // columns: Array<{ name: string; title?: string }>;
+  query?: string;
+  filterFn?: (row: any, query: string) => boolean;
+  onEdit?: (row: any) => void;
+  onView?: (row: any) => void;
+  onDelete?: (row: any) => void;
+  columns: any[];
+  onMore?: (row: any) => void;
+  customRender?: Record<string, (value: any, row: any) => any>;
+}>();
+
+const emit = defineEmits<{
+  (e: "edit", row: any): void;
+  (e: "view", row: any): void;
+  (e: "delete", row: any): void;
+  (e: "more", row: any): void;
+}>();
+
+const filteredRows = computed(() => {
+  if (!props.query || !props.filterFn) return props.rows;
+  return props.rows.filter((row) => props.filterFn!(row, props.query!));
+});
+
+const formatDate = (dateStr: string) => {
+  if (!dateStr) return "";
+  const date = new Date(dateStr);
+  if (isNaN(date.getTime())) return '';
+  return date.toISOString().slice(0, 16).replace('T', ' ');
+};
+
+const formatDateTime = (dateStr: string) => {
+  if (!dateStr) return "";
+  const date = new Date(dateStr);
+  if (isNaN(date.getTime())) return '';
+  
+  const hasTime = dateStr.includes('T') || dateStr.includes(' ') || dateStr.includes(':');
+  
+  if (hasTime) {
+    return date.toLocaleString('uk-UA', { dateStyle: 'medium', timeStyle: 'medium' });
+  } else {
+    return date.toLocaleDateString('uk-UA', { dateStyle: 'medium' });
+  }
+};
+
+const getStatusBadge = (status: string) => {
+  switch (status) {
+    case "published":
+      return {
+        icon: CheckCircle,
+        text: t("common.status.published"),
+        classes:
+          "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-200 border-green-200 dark:border-green-700",
+      };
+    case "draft":
+      return {
+        icon: Edit,
+        text: t("common.status.draft"),
+        classes:
+          "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-200 border-yellow-200 dark:border-yellow-700",
+      };
+    case "archived":
+      return {
+        icon: XCircle,
+        text: t("common.status.archived"),
+        classes:
+          "bg-gray-100 text-gray-800 dark:bg-gray-900/30 dark:text-gray-300 border-gray-200 dark:border-gray-700",
+      };
+    default:
+      return null;
+  }
+};
+
+const handleAction = (action: string, row: any) => {
+  switch (action) {
+    case "edit":
+      emit("edit", row);
+      if (props.onEdit) props.onEdit(row);
+      break;
+    case "view":
+      emit("view", row);
+      if (props.onView) props.onView(row);
+      break;
+    case "delete":
+      emit("delete", row);
+      break;
+    case "more":
+      emit("more", row);
+      if (props.onMore) props.onMore(row);
+      break;
+  }
+};
+
+const handleRowClick = (row: any) => {
+  handleAction("edit", row);
+};
+
+const timeAgo = (date: string) => {
+  const now = new Date();
+  const past = new Date(date);
+  const diffMs = now - past;
+  const diffSec = Math.floor(diffMs / 1000);
+  const diffMin = Math.floor(diffSec / 60);
+  const diffHour = Math.floor(diffMin / 60);
+  const diffDay = Number(Math.floor(diffHour / 24));
+  const diffWeek = Number(Math.floor(diffDay / 7));
+
+  if (diffWeek >= 2) return t('table.time.weeksAgo', { count: diffWeek });
+  if (diffWeek === 1) return t('table.time.weekAgo');
+  if (diffDay >= 2) return t('table.time.daysAgo', { count: diffDay });
+  if (diffDay === 1) return t('table.time.dayAgo');
+  if (diffHour >= 2) return t('table.time.hoursAgo', { count: diffHour });
+  if (diffHour === 1) return t('table.time.hourAgo');
+  if (diffMin >= 2) return t('table.time.minutesAgo', { count: diffMin });
+  if (diffMin === 1) return t('table.time.minuteAgo');
+  return t('table.time.justNow');
+}
+
+</script>
+
+<template>
+  <div class="text-card-foreground border-0 bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm" >
+    <div class="p-0">
+      <div class="table-scroll overflow-x-auto">
+        <div class="relative w-full overflow-auto max-h-[calc(100vh-270px)]">
+          <table class="w-full caption-bottom text-sm" >
+            <thead>
+              <tr class="border-b border-slate-200 dark:border-slate-700 bg-slate-50/50 dark:bg-slate-700/50 hover:bg-slate-50/80 dark:hover:bg-slate-700/80 transition-colors">
+                <th 
+                  v-for="col in columns" 
+                  :key="col.name" 
+                  class="h-10 px-4 text-left align-middle font-semibold text-slate-700 dark:text-slate-300 max-w-80"
+                  :class="{
+                    'min-w-[200px]': ['title','name'].includes(col.name ),
+                    'min-w-[150px]': col.name === 'slug',                    
+                    'min-w-[250px]': col.name === 'description',
+                  }"
+                >
+                  <div class="flex items-center gap-2">
+                    <component :is="col.icon" v-if="col.icon" class="w-5 h-5" />
+                    {{  col.label || col.title || col.ua ||col.name }}
+                  </div>
+                </th>
+                <th
+                  class="h-10 text-center px-4 font-semibold text-slate-700 dark:text-slate-300 max-w-32"
+                >
+                  {{ $t('table.actions') }}
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr 
+                v-for="row in filteredRows" :key="row.id || row._id || row.name"
+                class="transition-all duration-200 hover:bg-slate-50/60 dark:hover:bg-slate-700/60"
+              >
+                <td
+                  v-for="(col, colIdx) in columns"
+                  :key="col.name"
+                  class="py-2 px-4 align-middle max-w-80"
+                  :class="{ 
+                    'font-medium text-slate-800 dark:text-white cursor-pointer': colIdx === 0,
+                    'text-slate-600 dark:text-slate-400 font-mono text-sm': colIdx !== 0,
+                  }"
+                  @click="colIdx === 0 ? handleRowClick(row) : undefined"
+                >
+                  <template v-if="customRender && customRender[col.name]">
+                    <component :is="customRender[col.name](row[col.name], row)" />
+                  </template>
+                                     <template v-if="[
+                       'published_at',
+                       'publish_at',
+                       'created_at',
+                       'date',
+                     ].includes(col.name) && row[col.name]
+                   ">
+                     <!-- <span class="whitespace-nowrap">
+                       {{ formatDate(row[col.name]) || '--' }}
+                     </span> -->
+                      <span class="whitespace-nowrap">
+                       {{ formatDateTime(row[col.name]) }}
+                     </span> 
+                   </template>
+                  <template v-else-if="[
+                      'updated_at',
+                      'lastModified',
+                      'last_edit',
+                    ].includes(col.name)
+                  ">
+                    <span class="whitespace-nowrap">
+                      {{ timeAgo(row[col.name]) || '--' }}
+                    </span>
+                  </template>
+                  <template v-else-if="col.name === 'views'">
+                    <div class="flex items-center">
+                      <Eye class="w-4 h-4 mr-1" />
+                      {{ row[col.name]?.toLocaleString?.() ?? row[col.name] }}
+                    </div>
+                  </template>
+                  <template v-else-if="['entries', 'fields'].includes(col.name)">
+                    <div class="inline-flex whitespace-nowrap items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors bg-white dark:bg-slate-700 border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-300">
+                      {{ row[col.name] || "-" }}
+                    </div>
+                  </template>
+                  <template v-else-if="col.name === 'type'">
+                    <div class="flex items-center">
+                      <div 
+                        class="whitespace-nowrap inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors border-transparent hover:bg-secondary/80"
+                        :class="row[col.name] === 'pages' ? 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300' : 'bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300'"
+                        >
+                        {{ row[col.name] || "-" }}
+                      </div>
+                    </div>
+                  </template>
+                  <template v-else-if="col.name === 'name'">
+                    <div
+                      class="flex items-center gap-3"
+                    >
+                      <File v-if="row.type === 'single'" class="shrink-0 lucide lucide-page w-5 h-5 text-blue-600" />
+                      <Layers v-else class="shrink-0 lucide lucide-layers w-5 h-5 text-blue-600" />
+                      {{ row[col.name] }}
+                    </div>
+                  </template>
+                  <template v-else-if="col.name === 'status'">
+                    <div
+                      v-if="getStatusBadge(row[col.name])"
+                      class="whitespace-nowrap rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors hover:bg-secondary/80 flex items-center w-fit bg-green-100 text-green-800 border-green-200
+                      dark:bg-green-900/30 dark:text-green-300 dark:border-green-700"
+                      :class="getStatusBadge(row[col.name])?.classes"
+                    >
+                      <component
+                        :is="getStatusBadge(row[col.name])?.icon"
+                        class="w-3 h-3 mr-1"
+                      />
+                      {{ getStatusBadge(row[col.name])?.text }}
+                  </div>
+                  </template>
+                  <template v-else-if="col.name === 'slug'">
+                    <div class="flex items-center gap-3">
+                      {{ row[col.name] ? '/' + row[col.name] : "-" }}
+                    </div>
+                  </template>
+                  <template v-else-if="col.name === 'color'">
+                    <span 
+                      class="w-4 h-4 rounded-full block ml-2" 
+                      :class="'bg-[' + row[col.name] + ']'"
+                    >
+                    </span>
+                  </template>
+                  <template v-else-if="col.name === 'enabled'">
+                    <span class="whitespace-nowrap rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors hover:bg-secondary/80 flex items-center w-fit" :class="row[col.name] ? 'bg-green-100 text-green-800 border-green-200' : 'bg-red-100 text-red-800 border-red-200'">{{ row[col.name] ? 'Доступ' : 'Заборонено' }}</span>
+                  </template>
+                  <template v-else>
+                    <div class="flex items-center gap-3">
+                      <p class="line-clamp-2">
+                        {{ row[col.name] || "-" }}
+                      </p>
+                    </div>
+                  </template>
+                </td>
+                <td class="flex justify-end py-2 px-4 align-middle max-w-40">
+                  <div class="flex items-center justify-center gap-1">
+                    <button
+                      @click.stop="handleAction('edit', row)"
+                      class="inline-flex items-center justify-center whitespace-nowrap font-medium border rounded-md text-xs h-8 w-8 p-0 border-slate-300 bg-white transition-all duration-200 shadow-sm
+                      dark:border-slate-600 dark:bg-slate-700 dark:hover:bg-slate-600 dark:hover:text-slate-200
+                      hover:border-blue-300 hover:bg-blue-50 hover:text-blue-600"
+                      title="Edit"
+                    >
+                      <Pencil class="text-slate-800 dark:text-slate-200 w-4 h-4 group-hover:text-green-600 dark:group-hover:text-blue-50" />
+                    </button>
+                    <button
+                      @click.stop="handleAction('delete', row)"                      
+                      class="inline-flex items-center justify-center whitespace-nowrap font-medium border rounded-md text-xs h-8 w-8 p-0 border-slate-300 bg-white transition-all duration-200 shadow-sm
+                      dark:border-slate-600 dark:bg-slate-700 dark:hover:bg-slate-600 dark:hover:text-slate-200
+                      hover:border-blue-300 hover:bg-blue-50 hover:text-blue-600"
+                      title="Preview"
+                    >
+                      <Trash2 class="w-4 h-4 text-slate-800 dark:text-slate-200 group-hover:text-red-600 dark:group-hover:text-blue-50" />
+                    </button>
+                    <slot name="actions" :row="row" />
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/ui/UniversalTablePagination.vue

@@ -0,0 +1,118 @@
+<template>
+  <div
+    class="flex items-center justify-between px-6 py-4 border-t border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800"
+  >
+    <div class="flex justify-between flex-1 sm:hidden">
+      <button
+        class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50"
+      >
+        {{ $t("common.pagination.previous") }}
+      </button>
+      <button
+        class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50"
+      >
+        {{ $t("common.pagination.next") }}
+      </button>
+    </div>
+    <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
+      <div>
+        <p class="text-sm text-slate-600 dark:text-slate-400">
+          {{ $t("common.pagination.showing") }}
+          <span class="font-medium text-slate-800 dark:text-slate-100">{{ count }}</span>
+          {{ $t("common.pagination.of") }}
+          <span class="font-medium text-slate-800 dark:text-slate-100">{{ total }}</span>
+          {{ $t("common.pagination.results") }}
+        </p>
+      </div>
+      <div>
+        <nav
+          class="relative z-0 inline-flex space-x-2 rounded-md shadow-sm"
+          aria-label="Pagination"
+        >
+          <button
+            @click="page = page > 1 ? page - 1 : 1"
+            :disabled="page === 1"
+            class="inline-flex items-center justify-center whitespace-nowrap font-medium transition-colors border shadow-sm rounded-md text-xs h-8 w-8 p-0 bg-white border-slate-300 text-slate-600
+             disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed
+             hover:text-accent-foreground hover:bg-slate-50
+             dark:bg-slate-700 dark:border-slate-600 dark:text-slate-300 dark:hover:bg-slate-600"
+          >
+            <span class="sr-only">{{ $t("common.pagination.previous") }}</span>
+            <ChevronLeft class="w-5 h-5" />
+          </button>
+          <div class="space-x-1">
+            <template v-for="(p, idx) in pagesToShow" :key="p + '-' + idx">
+              <span v-if="p === 'ellipsis'" class="px-2 py-2 text-gray-400"
+                >...</span
+              >
+              <button
+                v-else
+                @click="page = p"
+                class="inline-flex items-center justify-center whitespace-nowrap font-medium transition-colors h-8 w-8 p-0 text-sm rounded-md"
+                :class="{
+                  'border shadow-sm hover:text-accent-foreground bg-white dark:bg-slate-700 border-slate-300 dark:border-slate-600 text-slate-600 dark:text-slate-300 hover:border-blue-600 hover:bg-slate-50 dark:hover:bg-slate-600': p !== page,
+                  'shadow bg-blue-600 hover:bg-blue-700 text-white border-blue-600': p === page
+                }"
+              >
+                {{ p }}
+              </button>
+            </template>
+          </div>
+          <button
+            @click="
+              page =
+                page < Math.ceil(total / limit)
+                  ? page + 1
+                  : Math.ceil(total / limit)
+            "
+            :disabled="page === Math.ceil(total / limit)"
+            class="inline-flex items-center justify-center whitespace-nowrap font-medium transition-colors border shadow-sm rounded-md text-xs h-8 w-8 p-0 bg-white border-slate-300 text-slate-600
+             disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed
+             hover:text-accent-foreground hover:bg-slate-50
+             dark:bg-slate-700 dark:border-slate-600 dark:text-slate-300 dark:hover:bg-slate-600"
+          >
+            <span class="sr-only">{{ $t("common.pagination.next") }}</span>
+            <ChevronRight class="w-5 h-5" />
+          </button>
+        </nav>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ChevronLeft, ChevronRight } from "lucide-vue-next";
+import { computed } from "vue";
+
+const {
+  limit,
+  count,
+  total,
+} = defineProps<{
+  total: number;
+  count: number;
+  limit: number;
+}>();
+
+const page = defineModel<number>("page");
+
+const totalPages = computed(() => Math.ceil(total / limit));
+
+const pagesToShow = computed(() => {
+  const maxPages = 4;
+  const pages: (number | "ellipsis")[] = [];
+  if (totalPages.value <= maxPages) {
+    for (let i = 1; i <= totalPages.value; i++) pages.push(i);
+    return pages;
+  }
+  // Always show first and last
+  const left = Math.max(2, page.value - 2);
+  const right = Math.min(totalPages.value - 1, page.value + 2);
+  pages.push(1);
+  if (left > 2) pages.push("ellipsis");
+  for (let i = left; i <= right; i++) pages.push(i);
+  if (right < totalPages.value - 1) pages.push("ellipsis");
+  pages.push(totalPages.value);
+  return pages;
+});
+</script>

package/src/components/ui/VsPreview.vue

@@ -0,0 +1,75 @@
+<template>
+  <div>
+    <div   class="flex justify-end mb-4">
+      <a
+        :href="`${previewUrl}/uk/${preview_path}${slug}${draftKey ? `?draftKey=${draftKey}` : ''}`"
+        target="_blank"
+        class="inline-flex items-center gap-2 px-3 py-1.5 text-black-600 bg-white border border-blue-200 rounded hover:border-blue-300 hover:bg-blue-50 transition-colors duration-200 font-normal cursor-pointer"
+      >
+        Переглянути на сайті
+        <ExternalLink class="w-4 h-4" />
+      </a>
+    </div>
+    <iframe
+      v-if="previewUrl && preview_path"
+      :src="`${previewUrl}/uk/${preview_path}${slug}?hideHeader=true&hideFooter=true`"
+      class="w-full h-[80vh]"
+    ></iframe>
+    <iframe
+      v-else-if="previewUrl"
+      :src="`${previewUrl}/uk/${slug}?hideHeader=true&hideFooter=true`"
+      class="w-full h-[80vh]"
+    ></iframe>
+    <div
+      v-else
+      class="w-full h-[80vh] flex items-center justify-center text-gray-500"
+    >
+      Loading preview...
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { ExternalLink } from "lucide-vue-next";
+
+const props = defineProps({
+  preview_path: {
+    type: String,
+    default: "",
+  },
+  slug: {
+    type: String,
+    default: "",
+  },
+});
+
+const previewUrl = ref("");
+const draftKey = ref("");
+
+const fetchSettings = async () => {
+  try {
+    const response = await fetch("/api/settings");
+    const data = await response.json();
+    previewUrl.value =
+      data?.settings?.site_info?.previewUrl || "http://ip.local.softpro.ua";
+  } catch (error) {
+    console.error("Failed to fetch settings:", error);
+    previewUrl.value = "http://ip.local.softpro.ua"; // fallback
+  }
+};
+const fetchUser = async () => {
+  try {
+    const response = await fetch("/user");
+    const data = await response.json();
+    draftKey.value = data?.user?.draftKey;
+  } catch (error) {
+    console.error("Failed to fetch user:", error);
+  }
+};
+
+onMounted(() => {
+  fetchSettings();
+  fetchUser();
+});
+</script>

package/src/composables/useCollectionView.ts

@@ -0,0 +1,21 @@
+import { ref, watch } from 'vue';
+
+export type CollectionView = 'list' | 'grid';
+
+const saved = localStorage.getItem('collectionView');
+const collectionView = ref<CollectionView>(saved === 'list' || saved === 'grid' ? saved as CollectionView : 'list');
+
+watch(collectionView, (newView) => {
+  localStorage.setItem('collectionView', newView);
+});
+
+function toggleCollectionView() {
+  collectionView.value = collectionView.value === 'grid' ? 'list' : 'grid';
+}
+
+export function useCollectionView() {
+  return {
+    collectionView,
+    toggleCollectionView,
+  };
+} 

package/src/composables/useDebounce.ts

@@ -0,0 +1,26 @@
+import { ref, watch, type Ref } from 'vue';
+
+/**
+ * Debounce composable for Vue 3 Composition API
+ * @param value - The value to debounce
+ * @param delay - The debounce delay in ms (default: 300)
+ * @returns debouncedValue
+ */
+export function useDebounce<T>(value: Ref<T>, delay = 300) {
+  const debouncedValue = ref(value.value) as Ref<T>;
+
+  let timeout: ReturnType<typeof setTimeout>;
+
+  watch(
+    value,
+    (newValue) => {
+      clearTimeout(timeout);
+      timeout = setTimeout(() => {
+        debouncedValue.value = newValue;
+      }, delay);
+    },
+    { immediate: true }
+  );
+
+  return debouncedValue;
+}

package/src/composables/useMonaco.ts

@@ -0,0 +1,28 @@
+export async function useMonaco() {
+  if (window.monaco) return window.monaco;
+
+  const CDN = 'https://cdn.jsdelivr.net/npm/monaco-editor@0.45.0/min';
+  
+  if (!window.require) {
+    window.require = { paths: { vs: `${CDN}/vs` } };
+    await new Promise<void>((res, rej) => {
+      const s = document.createElement('script');
+      s.src = `${CDN}/vs/loader.min.js`;
+      s.onload = () => res();
+      s.onerror = rej;
+      document.head.appendChild(s);
+    });
+  }
+
+  return new Promise<typeof monaco>((resolve) => {
+    window.require(['vs/editor/editor.main'], () => resolve(window.monaco));
+  });
+}
+
+// Додаємо типи для TypeScript
+declare global {
+  interface Window {
+    monaco: any;
+    require: any;
+  }
+}

package/src/composables/useTheme.ts

@@ -0,0 +1,40 @@
+import { ref, watch } from 'vue';
+
+type Theme = 'light' | 'dark';
+type Color = 'blue' | 'green' | 'purple';
+
+export function useTheme() {
+  const theme = ref<Theme>(
+    localStorage.getItem('theme') === 'light' ? 'light' : 'dark'
+  );
+
+  const color = ref<Color>(
+    localStorage.getItem('color') as Color || 'blue'
+  );
+
+  watch(theme, (newTheme) => {
+    document.documentElement.classList.toggle('dark');
+    localStorage.setItem('theme', newTheme);
+  });
+
+  watch(color, (newColor) => {
+    document.documentElement.classList.remove('theme-green', 'theme-purple', 'theme-blue');
+    document.documentElement.classList.add(`theme-${newColor}`);
+    localStorage.setItem('color', newColor);
+  });
+
+  const toggleTheme = () => {
+    theme.value = theme.value === 'light' ? 'dark' : 'light';
+  };
+
+  const toggleColor = (newColor: Color) => {
+    color.value = newColor;
+  };
+
+  return {
+    theme,
+    toggleTheme,
+    color,
+    toggleColor
+  };
+}

package/src/content/test-slug/metadata.json

@@ -0,0 +1 @@
+{"slug":"test-slug","title":"test-slug123466578"}