@opengis/cms 0.0.21 → 0.0.22

package/src/components/sidebar/DropdownMenu.vue

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

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

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

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

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

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