@opengis/cms 0.0.22 → 0.0.26

package/src/components/sidebar/DropdownMenu.vue

@@ -1,34 +0,0 @@
-<template>
-    <div class="ml-2 border-l border-slate-200 dark:border-slate-600">
-            <div v-for="item in navigationItems" :key="item.id">
-                <router-link 
-                    class="w-full flex items-center space-x-3 px-6 py-2.5 mb-1 rounded-lg text-left transition-all duration-200 group border-0 text-sm"
-                    :class="[
-                        currentPath === item.path
-                            ? 'bg-blue-50 text-blue-700 border border-blue-200 dark:bg-slate-700 dark:text-slate-100'
-                            : 'bg-white text-slate-600 hover:bg-slate-50 hover:text-slate-800 dark:bg-transparent dark:text-slate-300 dark:hover:bg-slate-700 dark:hover:text-slate-100'
-                    ]"
-                    :to="item.path"
-                >
-                    <component :is="item.icon" class="w-5 h-5 shrink-0" />
-                    <span class="font-medium flex-1" v-if="item.label">{{ $t(item.label) }}</span>
-                    <span class="font-medium flex-1" v-else>{{ item.title }}</span>
-                    <div class="rounded-md border font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 hover:bg-secondary/80 text-xs px-2 py-0.5 min-w-[20px] h-5 flex items-center justify-center bg-blue-100 text-blue-700 border-blue-200 dark:bg-slate-600 dark:text-slate-200 dark:border-slate-500">
-                        {{ item.entries }}
-                    </div>
-                </router-link>
-            </div>
-        </div>
-</template>
-
-<script setup lang="ts">
-    import { defineProps, ref, computed } from 'vue';
-    import { useRoute } from 'vue-router';
-
-    defineProps<{
-        navigationItems: any[];
-    }>();
-    
-    const route = useRoute();
-    const currentPath = computed(() => route.path);
-</script>

package/src/components/sidebar/SettingsSidebar.vue

@@ -1,121 +0,0 @@
-<template>
-  <aside
-    class="flex-col hidden w-64 transition-colors duration-200 bg-white border-r border-gray-200 md:flex dark:border-gray-700 dark:bg-gray-800"
-  >
-    <div class="p-3 border-b border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 flex-shrink-0">
-      <div class="flex items-center justify-between">
-        <div class="w-full flex items-center justify-between">
-          <router-link 
-            to="/" 
-            class="inline-flex items-center justify-center whitespace-nowrap transition-colors rounded-md h-8 px-2 bg-white text-slate-600 border-0 text-sm font-medium
-            hover:bg-slate-50 hover:text-slate-800 dark:bg-slate-800 dark:hover:bg-slate-700 dark:text-slate-300 dark:hover:text-slate-100"
-            >
-            <ArrowLeft class="w-4 h-4 mr-2" />
-            <span>{{ $t("navigation.back") }}</span>
-          </router-link>
-          <div class="ml-auto">
-            <LanguageSwitcher />
-          </div>
-        </div>
-      </div>
-    </div>
-  
-    <router-link to="/settings" class="p-3 border-b border-slate-100 dark:border-slate-700 bg-white dark:bg-slate-800 flex-shrink-0">
-      <h2 class="text-lg font-semibold text-slate-800 dark:text-slate-100">
-        {{ $t("navigation.settings") }}
-      </h2>
-      <p class="text-sm text-slate-500 dark:text-slate-400">
-        {{ $t("navigation.settingsDescription") }}
-      </p>
-    </router-link>
-
-    <nav class="flex-1 p-2 space-y-1 overflow-y-auto">
-      <template v-for="item in navigationItems" :key="item.id">
-        <router-link
-          v-if="!item.children"
-          :to="item.path"
-          class="w-full flex items-center space-x-3 px-3 py-2.5 mb-1 rounded-lg text-left transition-all duration-200 group border-0"
-          :class="[
-          currentPath === item.path
-              ? 'bg-blue-50 text-blue-700 border border-blue-200 dark:bg-slate-700 dark:text-slate-100'
-              : 'bg-white text-slate-600 hover:bg-slate-50 hover:text-slate-800 dark:bg-transparent dark:text-slate-300 dark:hover:bg-slate-700 dark:hover:text-slate-100'
-          ]"
-        >
-          <component :is="item.icon" class="w-5 h-5 mr-3" />
-          <span class="font-medium flex-1">{{ $t(item.label) }}</span>
-        </router-link>
-      </template>
-    </nav>
-    <SidebarFooter />
-  </aside>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue";
-import {
-  User as UserIcon,
-  LogOut,
-  Settings,
-  Users,
-  ArrowLeft,
-  Key,
-  Palette,
-  TableCellsMerge,
-  Shield,
-  Layers
-} from "lucide-vue-next";
-import LanguageSwitcher from "../LanguageSwitcher.vue";
-import { useRoute } from "vue-router";
-import SidebarFooter from "./SidebarFooter.vue";
-
-const route = useRoute();
-
-const currentPath = computed(() => route.path);
-
-const navigationItems = [
-{
-    id: "settings",
-    path: "/settings/general",
-    label: "navigation.general",
-    icon: Settings,
-  },
-  {
-    id: "collections",
-    path: "/settings/collections",
-    label: "navigation.builder",
-    icon: Layers,
-  },
-  // {
-  //   id: "settings",
-  //   path: "/settings/users",
-  //   label: "navigation.users",
-  //   icon: Users,
-  // },
-  // {
-  //   id: "settings",
-  //   path: "/settings/api-keys",
-  //   label: "navigation.apiKeys",
-  //   icon: Key,
-  // },
-  // {
-  //   id: "appearance",
-  //   path: "/settings/appearance",
-  //   label: "navigation.appearance",
-  //   icon: Palette,
-  // },
-   {
-    id: "logs",
-    path: "/settings/logs",
-    label: "navigation.logs",
-    icon:   TableCellsMerge
-  },
-  // {
-  //   id: "permissions",
-  //   path: "/settings/permissions",
-  //   label: "navigation.permissions",
-  //   icon: Shield,
-  // },
-];
-
-
-</script>

package/src/components/sidebar/SidebarFooter.vue

@@ -1,52 +0,0 @@
-<template>
-  <div class="border-t border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 flex-shrink-0">
-    <div class="p-3 bg-white dark:bg-slate-800">
-      <div class="w-full flex items-center space-x-3 p-2 rounded-lg bg-white hover:bg-slate-50 transition-colors group text-slate-700 hover:text-slate-900 border-0 dark:bg-slate-800 dark:hover:bg-slate-700 dark:text-slate-200 dark:hover:text-slate-100" type="button" id="radix-:r0:" aria-haspopup="menu" aria-expanded="false" data-state="closed">
-        <div class="relative">
-          <span class="relative flex shrink-0 overflow-hidden rounded-full w-9 h-9 border-2 border-white dark:border-slate-600 shadow-sm">
-            <div
-              class="flex items-center justify-center w-8 h-8 text-white rounded-full bg-sky-500"
-            >
-              <UserIcon class="w-4 h-4" />
-            </div>
-          </span>
-
-          <div class="absolute -bottom-0.5 -right-0.5 w-3 h-3 rounded-full border-2 border-white dark:border-slate-600 bg-green-500">
-          </div>
-        </div>
-        <div class="flex-1 text-left">
-          <p class="font-semibold whitespace-nowrap text-slate-800 dark:text-slate-100 text-sm group-hover:text-slate-900 dark:group-hover:text-slate-50">
-            Softpro User
-          </p>
-          <p class="text-xs text-slate-500 dark:text-slate-400 group-hover:text-slate-600 dark:group-hover:text-slate-300">
-            Admin
-          </p>
-        </div>
-        <button 
-          class="inline-flex items-center justify-center whitespace-nowrap font-medium rounded-md text-xs h-8 w-8 p-0 ml-auto bg-transparent text-slate-600 transition-all duration-200 border-0
-          hover:bg-slate-100 hover:text-slate-800
-          dark:hover:bg-slate-600 dark:text-slate-300 dark:hover:text-white" 
-          @click="toggleTheme"
-        >
-          <Moon v-if="theme !== 'dark'" class="w-5 h-5" />
-          <Sun v-else class="w-5 h-5" />
-        </button>
-        <div class="flex items-center space-x-2 ml-auto">
-          <a
-            href="/logout"
-            class="relative p-2 text-gray-500 transition-colors rounded-full hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700"
-          >
-            <LogOut class="w-5 h-5" />
-          </a>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { Moon, Sun, LogOut, User as UserIcon } from "lucide-vue-next";
-import { useTheme } from "../../composables/useTheme";
-
-const { toggleTheme, theme } = useTheme();
-</script>

package/src/components/sidebar/SidebarHeader.vue

@@ -1,57 +0,0 @@
-<template>
- <div
-     class="flex items-center h-16 px-6 border-b gap-2 border-gray-200 dark:border-gray-700"
-   >
-     <router-link
-       to="/"
-       class="flex items-center text-xl font-semibold text-gray-900 dark:text-white"
-     >
-       <img
-         v-if="logoCms"
-         :src="logoCms"
-         :alt="siteName || 'CMS'"
-         class="w-auto h-10 mr-2 text-sky-500"
-       />
-       <img
-         v-else
-         src="/public/images/logo.png"
-         alt="Keystatic"
-         class="w-auto h-10 mr-2 text-sky-500"
-       />
-       <!-- <span v-if="siteName">{{ siteName }}</span> -->
-     </router-link>
-     <a :href="`https://cms.opengis.info/${locale}/`" target="_blank" :title="$t('guide.help')">
-       <HelpCircle class="w-5 h-5" />
-     </a>
-     <div class="flex items-center space-x-2 ml-auto">
-       <LanguageSwitcher /> 
-     </div>
-   </div>
-</template>
-
-<script setup lang="ts">
-   import { ref, onMounted } from "vue";
-   import LanguageSwitcher from "../LanguageSwitcher.vue";
-   import { HelpCircle } from "lucide-vue-next";
-   import { useI18n } from "vue-i18n";
-
-   const { locale } = useI18n();
-   const siteName = ref<string>("");
-   const logoCms = ref<string>("");
-
-   const fetchSettings = async () => {
-     try {
-       const response = await fetch("/api/settings");
-       const data = await response.json();
-       const siteInfo = data?.settings?.site_info || {};
-       siteName.value = siteInfo.name || "";
-       logoCms.value = siteInfo["logo-cms"] || "";
-     } catch (error) {
-       console.error("Error fetching settings:", error);
-     }
-   };
-
-   onMounted(() => {
-     fetchSettings();
-   });
-</script>

package/src/components/sidebar/SidebarMenu.vue

@@ -1,78 +0,0 @@
-<template>
-    <template v-for="item in navigationItems" :key="item.id">
-        <router-link
-            v-if="!item.children"
-            :to="item.path" 
-            class="w-full flex items-center space-x-3 px-3 py-2.5 mb-1 rounded-lg text-left transition-all duration-200 group border-0"
-            :class="[
-            isActive(item)
-                ? 'bg-blue-50 text-blue-700 border border-blue-200 dark:bg-slate-700 dark:text-slate-100'
-                : 'bg-white text-slate-600 hover:bg-slate-50 hover:text-slate-800 dark:bg-transparent dark:text-slate-300 dark:hover:bg-slate-700 dark:hover:text-slate-100'
-            ]"
-        >
-            <component :is="item.icon" class="w-5 h-5" />
-            <span class="font-medium flex-1" v-if="item.label">{{ $t(item.label) }}</span>
-            <span class="font-medium flex-1" v-else>{{ item.title }}</span>
-        </router-link>
-
-        <button     
-            v-else 
-            @click="toggleDropdown(item.id)"
-            class="w-full flex items-center space-x-3 px-3 py-2.5 mb-1 rounded-lg text-left transition-all duration-200 group border-0"
-            :class="[
-                isActive(item)
-                    ? 'bg-blue-50 text-blue-700 border border-blue-200 dark:bg-slate-700 dark:text-slate-100'
-                    : 'bg-white text-slate-600 hover:bg-slate-50 hover:text-slate-800 dark:bg-transparent dark:text-slate-300 dark:hover:bg-slate-700 dark:hover:text-slate-100'
-            ]"
-        >
-            <component :is="item.icon" class="w-5 h-5" />
-            <span class="font-medium flex-1" v-if="item.label">{{ $t(item.label) }}</span>
-            <span class="font-medium flex-1" v-else>{{ item.title }}</span>
-            <component
-              :is="openDropdowns.includes(item.id) ? ChevronUp : ChevronDown"
-              class="w-4 h-4 text-slate-400 dark:text-slate-500"
-            />
-        </button>
-        
-        <transition name="slide-fade">
-            <DropdownMenu
-                v-if="item.children"
-                v-show="openDropdowns.includes(item.id)"
-                :navigation-items="item.children || []" 
-            />
-        </transition>
-    </template>
-</template>
-
-<script setup lang="ts">
-    import { ChevronDown, ChevronUp } from 'lucide-vue-next';
-    import { defineProps, ref, computed } from 'vue';
-    import { useRoute } from 'vue-router';
-    import DropdownMenu from './DropdownMenu.vue';
-
-    defineProps<{
-        navigationItems: any[];
-    }>();
-
-    const route = useRoute();
-    const openDropdowns = ref<string[]>([]);
-    const currentPath = computed(() => route.path);
-    
-    const isActive = (item: any) => {
-      if (item.path === '/collections') {
-        // Підсвічуємо "Керування" для всіх сторінок колекцій
-        return route.path === '/collections' || route.path.startsWith('/collections/');
-      }
-      return currentPath.value === item.path;
-    };
-
-    const toggleDropdown = (id: string) => {
-        const index = openDropdowns.value.indexOf(id);
-
-        if (index > -1) {
-            openDropdowns.value.splice(index, 1);
-        } else {
-            openDropdowns.value.push(id);
-        }
-    };
-</script>

package/src/components/ui/EmptyData.vue

@@ -1,76 +0,0 @@
-<template>
-  <div class="rounded-xl text-card-foreground shadow-lg bg-white dark:bg-slate-800 backdrop-blur-sm border-2 border-dashed border-slate-300 dark:border-slate-600">
-    <div class="p-12 text-center">
-      <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="lucide lucide-layers w-12 h-12 mx-auto mb-4 text-slate-400 dark:text-slate-500"
-      >
-        <path d="m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z"></path>
-        <path d="m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65"></path>
-        <path d="m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65"></path>
-      </svg>
-      
-      <h3 class="text-lg font-medium text-slate-600 dark:text-slate-300 mb-2">
-        {{ $t(title) }}
-      </h3>
-      
-      <p class="text-slate-500 dark:text-slate-400 mb-6">
-        {{ $t(description) }}
-      </p>
-      
-      <button 
-        v-if="showButton"
-        @click="$emit('action')"
-        class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 shadow h-9 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white"
-      >
-        <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="lucide lucide-plus w-4 h-4 mr-2"
-        >
-          <path d="M5 12h14"></path>
-          <path d="M12 5v14"></path>
-        </svg>
-        {{ $t(buttonText) }}
-      </button>
-    </div>
-  </div>
-</template>
-
-<script setup>
-defineProps({
-  title: {
-    type: String,
-    default: () => 'emptyData.title'
-  },
-  description: {
-    type: String,
-    default: () => 'emptyData.description'
-  },
-  buttonText: {
-    type: String,
-    default: () => 'emptyData.buttonText'
-  },
-  showButton: {
-    type: Boolean,
-    default: true
-  }
-})
-
-defineEmits(['action'])
-</script>