@opengis/cms 0.0.22 → 0.0.24

package/src/components/ui/UniversalTable.vue

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

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

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

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

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

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

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

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