@opengis/cms 0.0.2 → 0.0.3

package/src/components/shared-components/vs-not-data.vue

@@ -0,0 +1,213 @@
+<template>
+  <div class="w-full">
+    <div
+      class="p-5 min-h-[500px] flex flex-col justify-center items-center text-center"
+    >
+      <svg
+        class="w-48 mx-auto"
+        viewBox="0 0 178 90"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <rect
+          x="27"
+          y="50.5"
+          width="124"
+          height="39"
+          rx="7.5"
+          fill="currentColor"
+          class="fill-white dark:fill-neutral-800"
+        ></rect>
+        <rect
+          x="27"
+          y="50.5"
+          width="124"
+          height="39"
+          rx="7.5"
+          stroke="currentColor"
+          class="stroke-gray-50 dark:stroke-neutral-700/10"
+        ></rect>
+        <rect
+          x="34.5"
+          y="58"
+          width="24"
+          height="24"
+          rx="4"
+          fill="currentColor"
+          class="fill-gray-50 dark:fill-neutral-700/30"
+        ></rect>
+        <rect
+          x="66.5"
+          y="61"
+          width="60"
+          height="6"
+          rx="3"
+          fill="currentColor"
+          class="fill-gray-50 dark:fill-neutral-700/30"
+        ></rect>
+        <rect
+          x="66.5"
+          y="73"
+          width="77"
+          height="6"
+          rx="3"
+          fill="currentColor"
+          class="fill-gray-50 dark:fill-neutral-700/30"
+        ></rect>
+        <rect
+          x="19.5"
+          y="28.5"
+          width="139"
+          height="39"
+          rx="7.5"
+          fill="currentColor"
+          class="fill-white dark:fill-neutral-800"
+        ></rect>
+        <rect
+          x="19.5"
+          y="28.5"
+          width="139"
+          height="39"
+          rx="7.5"
+          stroke="currentColor"
+          class="stroke-gray-100 dark:stroke-neutral-700/30"
+        ></rect>
+        <rect
+          x="27"
+          y="36"
+          width="24"
+          height="24"
+          rx="4"
+          fill="currentColor"
+          class="fill-gray-100 dark:fill-neutral-700/70"
+        ></rect>
+        <rect
+          x="59"
+          y="39"
+          width="60"
+          height="6"
+          rx="3"
+          fill="currentColor"
+          class="fill-gray-100 dark:fill-neutral-700/70"
+        ></rect>
+        <rect
+          x="59"
+          y="51"
+          width="92"
+          height="6"
+          rx="3"
+          fill="currentColor"
+          class="fill-gray-100 dark:fill-neutral-700/70"
+        ></rect>
+        <g filter="url(#filter1)">
+          <rect
+            x="12"
+            y="6"
+            width="154"
+            height="40"
+            rx="8"
+            fill="currentColor"
+            class="fill-white dark:fill-neutral-800"
+            shape-rendering="crispEdges"
+          ></rect>
+          <rect
+            x="12.5"
+            y="6.5"
+            width="153"
+            height="39"
+            rx="7.5"
+            stroke="currentColor"
+            class="stroke-gray-100 dark:stroke-neutral-700/60"
+            shape-rendering="crispEdges"
+          ></rect>
+          <rect
+            x="20"
+            y="14"
+            width="24"
+            height="24"
+            rx="4"
+            fill="currentColor"
+            class="fill-gray-200 dark:fill-neutral-700"
+          ></rect>
+          <rect
+            x="52"
+            y="17"
+            width="60"
+            height="6"
+            rx="3"
+            fill="currentColor"
+            class="fill-gray-200 dark:fill-neutral-700"
+          ></rect>
+          <rect
+            x="52"
+            y="29"
+            width="106"
+            height="6"
+            rx="3"
+            fill="currentColor"
+            class="fill-gray-200 dark:fill-neutral-700"
+          ></rect>
+        </g>
+        <defs>
+          <filter
+            id="filter1"
+            x="0"
+            y="0"
+            width="178"
+            height="64"
+            filterUnits="userSpaceOnUse"
+            color-interpolation-filters="sRGB"
+          >
+            <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
+            <feColorMatrix
+              in="SourceAlpha"
+              type="matrix"
+              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+              result="hardAlpha"
+            ></feColorMatrix>
+            <feOffset dy="6"></feOffset>
+            <feGaussianBlur stdDeviation="6"></feGaussianBlur>
+            <feComposite in2="hardAlpha" operator="out"></feComposite>
+            <feColorMatrix
+              type="matrix"
+              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0"
+            ></feColorMatrix>
+            <feBlend
+              mode="normal"
+              in2="BackgroundImageFix"
+              result="effect1_dropShadow_1187_14810"
+            ></feBlend>
+            <feBlend
+              mode="normal"
+              in="SourceGraphic"
+              in2="effect1_dropShadow_1187_14810"
+              result="shape"
+            ></feBlend>
+          </filter>
+        </defs>
+      </svg>
+      <div class="max-w-sm mx-auto mt-6">
+        <p class="font-medium text-gray-800 dark:text-neutral-200">
+          {{ title }}
+        </p>
+        <p class="mt-2 text-sm text-gray-500 dark:text-neutral-500">
+          {{ text }}
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    title: { type: String, default: () => "Дані для відображення відсутні" },
+    text: {
+      type: String,
+      default: () => "Змініть параметри пошуку або спробуйте пізніше",
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>

package/src/components/vs-main-menu.vue

@@ -0,0 +1,53 @@
+<template>
+  <nav class="w-[60px] border-r">
+    <div class="h-[60px] w-[60px] flex items-center justify-center">
+      <IconLogo />
+    </div>
+    <ul class="flex flex-col gap-2 items-center">
+      <li v-for="item in navList" :key="item?.name">
+        <VsPopover trigger="hover" placement="right">
+          <template #reference>
+            <router-link
+              :to="item?.path"
+              :class="[$route?.name?.includes(item?.name) ? 'bg-gray-200' : '']"
+              class="h-[40px] w-[40px] rounded-xl hover:bg-gray-200 text-gray-500 flex items-center justify-center duration-300"
+            >
+              <component :is="item?.icon" heigth="20" width="20" />
+            </router-link>
+          </template>
+          {{ item?.ua }}
+        </VsPopover>
+      </li>
+    </ul>
+  </nav>
+</template>
+
+<script setup>
+import IconLogo from "./icons/icon-logo.vue";
+import IconEdit from "./icons/icon-edit.vue";
+import IconMedia from "./icons/icon-media.vue";
+import IconTable from "./icons/icon-table.vue";
+
+const navList = [
+  {
+    ua: "Менеджер контенту",
+    icon: IconEdit,
+    path: "/cms/manager",
+    name: "manager",
+  },
+  {
+    ua: "Генератор контенту",
+    icon: IconTable,
+    path: "/cms/builder",
+    name: "builder",
+  },
+  {
+    ua: "Медіатека",
+    icon: IconMedia,
+    path: "/cms/media",
+    name: "media",
+  },
+];
+</script>
+
+<style lang="scss" scoped></style>

package/src/helpers/debounce.js

@@ -0,0 +1,10 @@
+const debounce = (fn, delay = 300) => {
+  let timeoutId;
+
+  return function (...args) {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => { fn.apply(this, args); }, delay);
+  };
+};
+
+export default debounce;

package/src/helpers/translite.js

@@ -0,0 +1,19 @@
+export const  translit = (str) => {
+    const map = {
+        'а': 'a', 'б': 'b', 'в': 'v', 'г': 'g', 'д': 'd', 'е': 'e', 'ё': 'e', 'ж': 'zh',
+        'з': 'z', 'и': 'i', 'й': 'y', 'к': 'k', 'л': 'l', 'м': 'm', 'н': 'n', 'о': 'o',
+        'п': 'p', 'р': 'r', 'с': 's', 'т': 't', 'у': 'u', 'ф': 'f', 'х': 'kh', 'ц': 'ts',
+        'ч': 'ch', 'ш': 'sh', 'щ': 'shch', 'ы': 'y', 'э': 'e', 'ю': 'yu', 'я': 'ya',
+        'ь': '', 'ъ': '', 'є': 'ye', 'і': 'i', 'ї': 'yi', 'ґ': 'g'
+    };
+
+    return str
+        .toLowerCase()
+        .split('')
+        .map(char => map[char] || char) 
+        .join('')
+        .replace(/[^a-z0-9\s-]/g, '') 
+        .replace(/\s+/g, '-') 
+        .replace(/-+/g, '-') 
+        .trim('-'); 
+} 

package/src/main.js

@@ -0,0 +1,30 @@
+import { createApp } from 'vue'
+import './style.css'
+import router from './router/router'
+import App from './App.vue'
+import './assets/tailwind/tailwind.js';
+import v3core from '@opengis/v3-core';
+
+import '@opengis/v3-core/dist/style.css';
+
+window.tailwind = {
+    config: {
+      darkMode: 'class'
+    }
+  };
+
+const app = createApp(App);
+  v3core.install(app, createApp);
+
+// async function run() {
+//     const res = await fetch("/user");
+//     const data = await res.json();
+//     app.config.globalProperties.$settings = data.settings;
+//     app.config.globalProperties.$user = data.user;
+    
+// }
+// run();
+
+window.app = { router };
+app.use(router);
+app.mount('#app');

package/src/misc/import-file.js

@@ -0,0 +1,32 @@
+import VsBuilderContent from "../components/builder/vs-builder-content.vue";
+import VsManagerCollectionContent from "../components/manager/children/vs-manager-collection-content.vue";
+import VsManagerCollectionItemContent from "../components/manager/children/vs-manager-collection-item-content.vue";
+import VsManagerSingleContent from "../components/manager/children/vs-manager-single-content.vue";
+import VsBuilder from "../pages/vs-builder.vue";
+import VsManager from "../pages/vs-manager.vue";
+import VsMedia from "../pages/vs-media.vue";
+
+const components = {
+    "vs-builder": VsBuilder,
+    "vs-builder-content": VsBuilderContent,
+    "vs-manager": VsManager,
+    "vs-manager-collection-content": VsManagerCollectionContent,
+    "vs-manager-collection-item-content": VsManagerCollectionItemContent,
+    "vs-manager-single-content": VsManagerSingleContent,
+    "vs-media": VsMedia
+}
+
+const install = (app) => {
+Object.entries(components)?.forEach(([name, component])=> app.component(name, component))
+};
+
+const library = {
+  install,
+  components
+};
+
+if (typeof window !== 'undefined') {
+  window.v3Cms = library;
+}
+
+export default library;

package/src/pages/vs-builder.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="w-full bg-[#f6f6f9] h-full h-[calc(100vh-60px)]">
+    <div class="flex h-full">
+      <VsBuilderMenu v-model:UPDATE="UPDATE" />
+      <router-view v-slot="{ Component }">
+        <component v-if="Component" :is="Component" :UPDATE />
+        <VsNotData
+          class="pt-[100px]"
+          v-else
+          text="Оберіть один з існуючих пунктів меню, або створіть новий"
+        />
+      </router-view>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref } from "vue";
+import VsBuilderMenu from "../components/builder/vs-builder-menu.vue";
+import VsNotData from "../components/shared-components/vs-not-data.vue";
+
+const UPDATE = ref({});
+</script>

package/src/pages/vs-layout.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="relative h-[100vh] w-[100vw] flex">
+    <VsMainMenu/>
+    <router-view/>
+  </div>
+</template>
+<script>
+import VsMainMenu from '../components/vs-main-menu.vue'
+export default{
+components:{
+  VsMainMenu
+}
+}
+</script>
+<style lang="scss" scoped>
+
+</style>

package/src/pages/vs-manager.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="w-full bg-[#f6f6f9] h-[calc(100vh-60px)]">
+    <div class="flex">
+      <VsManagerMenu />
+      <div class="w-full flex justify-center">
+        <div class="p-[20px] w-full max-w-[1440px]">
+          <button
+            @click="$router.back()"
+            class="text-blue-500 flex gap-2 items-center hover:text-blue-700 duration-300"
+          >
+            <IconArrowLeft :template /> Повернутися назад
+          </button>
+          <router-view v-slot="{ Component }">
+            <component v-if="Component" :is="Component" />
+            <VsNotData
+              class="pt-[100px]"
+              v-else
+              text="Оберіть один з існуючих пунктів меню, або створіть новий"
+            />
+          </router-view>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import VsManagerMenu from "../components/manager/vs-manager-menu.vue";
+import VsNotData from "../components/shared-components/vs-not-data.vue";
+import IconArrowLeft from "../components/icons/icon-arrow-left.vue";
+</script>