@opengis/cms 0.0.22 → 0.0.24

package/src/components/form-components/reference/vs-form-reference-controls.vue

@@ -1,101 +0,0 @@
-<template>
-  <div
-    class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity flex space-x-1 z-10"
-  >
-    <button
-      @click="isOpen = !isOpen"
-      class="p-1.5 bg-white dark:bg-gray-800 rounded shadow-sm hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
-    >
-      <Edit class="h-4 w-4 text-gray-400" />
-    </button>
-    <button
-      @click="model = {}"
-      class="p-1.5 bg-white dark:bg-gray-800 rounded shadow-sm hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
-    >
-      <Trash2 class="h-4 w-4 text-red-500" />
-    </button>
-    <VsDrower v-model:visible="isOpen" @close="isOpen = false" :title="title">
-      <VsForm
-        v-model:form="form"
-        v-if="schema"
-        :schema="schema"
-        v-model="formValue"
-        class="-mr-[10px] ml-[10px] mt-[10px]"
-      />
-      <template #footer>
-        <div
-          class="flex items-center justify-between w-full p-4 border-t border-gray-200 dark:border-gray-700"
-        >
-          <button
-            class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600"
-          >
-            {{ $t("common.actions.cancel") }}
-          </button>
-          <button
-            @click="handleSave"
-            class="px-4 py-2 bg-sky-600 text-white rounded-md text-sm font-medium hover:bg-sky-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sky-500"
-          >
-            {{ $t("common.actions.save") }}
-          </button>
-        </div>
-      </template>
-    </VsDrower>
-  </div>
-</template>
-
-<script setup>
-import { Edit, Trash2 } from "lucide-vue-next";
-import { ref, watch } from "vue";
-import VsForm from "@opengis/form";
-import { notify } from '@opengis/core';
-import { useI18n } from "vue-i18n";
-
-const { t } = useI18n();
-
-const props = defineProps({
-  title: {
-    type: String,
-    required: true,
-  },
-  schema: {
-    type: Object,
-    required: true,
-  },
-});
-
-const model = defineModel({
-  type: Object,
-  default: () => ({}),
-});
-
-const isOpen = ref(false);
-const formValue = ref({});
-
-const form = ref({});
-
-watch(isOpen, (newVal) => {
-  if (newVal) {
-    formValue.value = { ...model.value };
-  }
-});
-
-const handleSave = async () => {
-  try {
-    let result = await form.value.validate();
-    if (result) {
-      notify({
-      type: "warning",
-      title: t("common.actions.warning"),
-      message: t("builder.editFieldFailed"),
-    });
-      return;
-    }
-    model.value = { ...formValue.value };
-    isOpen.value = false;
-  } catch (error) {
-    console.log(error);
-  }
-};
-</script>
-
-<style lang="scss" scoped></style>

package/src/components/form-components/reference-list/referenceOptionList.js

@@ -1,78 +0,0 @@
-export default [
-    {
-      text: "reference.faq",
-      id: "faq",
-    },
-    {
-      text: "reference.banner",
-      id: "banner",
-    },
-    {
-      text: "reference.slider",
-      id: "slider",
-    },
-    {
-      text: "reference.photoGrid",
-      id: "photoGrid",
-    },
-    {
-      text: "reference.video",
-      id: "video",
-    },
-    {
-      text: "reference.about",
-      id: "about",
-    },
-    {
-      text: "reference.cards",
-      id: "cards",
-    },
-    {
-      text: "reference.usefulLinks",
-      id: "usefulLinks",
-    },
-    {
-      text: "reference.team",
-      id: "team",
-    },
-    {
-      text: "reference.body",
-      id: "body",
-    },
-    {
-      text: "reference.news",
-      id: "news",
-    },
-    {
-      text: "reference.form",
-      id: "form",
-    },
-    {
-      text: "reference.tabs",
-      id: "tabs",
-    },
-    {
-      text: "reference.vertical_tabs",
-      id: "vertical_tabs",
-    },
-    {
-      text: "reference.documents",
-      id: "documents",
-    },
-    {
-      text: "reference.infoLine",
-      id: "infoLine",
-    },
-    {
-      text: "reference.interested",
-      id: "interested",
-    },
-    {
-      text: "reference.contact",
-      id: "contact",
-    },
-    {
-      text: "reference.iframe",
-      id: "iframe",
-    },
-  ]

package/src/components/form-components/reference-list/vs-form-reference-add.vue

@@ -1,145 +0,0 @@
-<template>
-  <div>
-    <button
-      type="button"
-      class="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sky-500"
-      @click="isOpen = !isOpen"
-    >
-      {{ $t("builder.create") }}
-    </button>
-    <VsDrawer
-      v-model:visible="isOpen"
-      position="right"
-      :closeClickBackdrop="false"
-      @close="isOpen = false"
-      :title="reference_type ? $t('builder.' + reference_type) : $t('builder.selectType')"
-      :size="'50vw'"
-    >
-      <VsFormReferenceChoce
-        v-if="!reference_type"
-        v-model="reference_type"
-        :options="referenceOptionList"
-      />
-      <template v-else>
-        <div class="flex gap-4">
-          <div
-            class="text-sm text-gray-500 dark:text-gray-400 border flex items-center h-10 px-4 rounded-lg w-full"
-          >
-            <span>
-              {{ referenceOptionList.find((item) => item.id === reference_type)?.text }}
-            </span>
-          </div>
-          <button
-            class="py-2.5 px-3 mb-4 inline-flex items-center gap-x-2 text-sm whitespace-nowrap text-white bg-blue-500 rounded-lg !border-gray-200 hover:bg-blue-700 duration-300"
-            @click="reference_type = null"
-          >
-            {{ $t("builder.changeType") }}
-          </button>
-        </div>
-        <VForm
-          v-if="scheme"
-          :key="reference_type"
-          :schema="scheme"
-          v-model="formValue"
-          v-model:form="form"
-        />
-      </template>
-      <template #footer>
-        <div
-          class="flex items-center justify-between w-full p-4 border-t border-gray-200 dark:border-gray-700"
-        >
-          <button
-            @click="isOpen = false"
-            class="inline-flex items-center px-3 py-2 text-sm text-black duration-300 border border-gray-200 rounded-lg gap-x-2 whitespace-nowrap hover:bg-gray-100"
-          >
-            {{ $t("builder.cancel") }}
-          </button>
-          <button
-            @click="handleCreate"
-            class="py-2 px-3 inline-flex items-center gap-x-2 text-sm whitespace-nowrap text-white bg-blue-500 rounded-lg !border-gray-200 hover:bg-blue-700 duration-300"
-            >
-            {{ $t("builder.create") }}
-          </button>
-        </div>
-      </template>
-    </VsDrawer>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed, watch } from "vue";
-import { testReferenceTypes } from "../testReferenceTypes";
-import VsFormReferenceChoce from "./vs-form-reference-choce.vue";
-import referenceOptionList from "./referenceOptionList";
-import { notify } from '@opengis/core';
-import VsEditor from "@/components/form-components/vs-form-tiptap.vue";
-import {VForm,inputs} from "@opengis/form";
-// import {VForm,inputs} from "../../../../../form/src/index";
-import { VsDrawer } from "@opengis/core";
-import { useI18n } from "vue-i18n";
-import VsReference from "../vs-form-reference-list.vue";
-
-const { t } = useI18n();
-
-inputs['vs-input-reference'] = VsReference;
-inputs['vs-input-tiptap-editor'] = VsEditor;
-
-const props = defineProps({
-  title: {
-    type: String,
-    required: true,
-  },
-});
-
-const model = defineModel({
-  type: Array,
-  default: () => [],
-});
-
-const isOpen = ref(false);
-const form = ref({});
-const reference_type = ref(null);
-const formValue = ref({});
-
-const scheme = computed(() => {
-  return testReferenceTypes[reference_type.value]?.schema || null;
-});
-
-const handleCreate = async () => {
-  let result = await form.value.validate();
-   if (result) {
-    notify({
-      type: "warning",
-      title: t("common.actions.warning"),
-      message: t("builder.editFieldFailed"),
-    });
-    return;
-  }
-  try {
-    if (Object.keys(formValue.value).length !== 0) {
-      model.value = [
-        ...(model.value || []),
-        {
-          ...formValue.value,
-          id: Math.random().toString(36).substring(2, 15),
-          reference_type: reference_type.value,
-        },
-      ];
-    }
-    isOpen.value = false;
-    reference_type.value = null;
-    formValue.value = {};
-  } catch (error) {
-    console.log(error);
-  }
-};
-
-watch(isOpen, () => {
-  if (!isOpen.value) {
-    reference_type.value = null;
-    formValue.value = {};
-  }
-});
-</script>
-
-<style lang="scss" scoped></style>

package/src/components/form-components/reference-list/vs-form-reference-choce.vue

@@ -1,39 +0,0 @@
-<template>
-  <div class="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-2 2xl:grid-cols-3 gap-4">
-    <div
-      v-for="item in referenceOptionList"
-      :key="item.id"
-      @click="model = item.id"
-      class="relative"
-    >
-       <div
-        class="wireframe-block h-[240px] !p-4 border-2 border-dashed bg-white relative overflow-hidden transition-all rounded-lg shadow-sm border-gray-300 hover:border-gray-400 cursor-pointer"
-       >
-        <component
-          v-if="referenceSkeleton[item.id]"
-          :is="referenceSkeleton[item.id]"
-          :text="item?.text"
-          :count="item?.data || 0"
-        />
-        <img
-          v-else
-          :src="icon"
-          alt="Team collaboration"
-          class="w-full h-full object-cover"
-        />
-       </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import icon from "../../../assets/image.png";
-import referenceOptionList from "./referenceOptionList";
-import referenceSkeleton from "../reference-skeleton";
-
-const model = defineModel({
-  type: String,
-  required: true,
-});
-
-</script>

package/src/components/form-components/reference-list/vs-form-reference-controls.vue

@@ -1,110 +0,0 @@
-<template>
-  <div
-    class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity flex space-x-1 z-10"
-  >
-    <button
-      @click="isOpen = !isOpen"
-      class="p-1.5 bg-white dark:bg-gray-800 rounded shadow-sm hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors border border-gray-200 dark:border-gray-700"
-    >
-      <Edit class="h-4 w-4 text-gray-400" />
-    </button>
-    <button
-      @click="parent = parent.filter((item) => item.id !== model.id)"
-      class="p-1.5 bg-white dark:bg-gray-800 rounded shadow-sm hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors border border-gray-200 dark:border-gray-700"
-    >
-      <Trash2 class="h-4 w-4 text-red-500" />
-    </button>
-    <VsDrawer v-model:visible="isOpen" @close="isOpen = false" :title="title" :width="'50vw'">
-      <VForm
-        v-model:form="form"
-        v-if="schema"
-        :schema="schema"
-        v-model="formValue"
-        class="-mr-[10px] ml-[10px] mt-[10px]"
-      />
-      <template #footer>
-        <div
-          class="flex items-center justify-between w-full p-4 border-t border-gray-200 dark:border-gray-700"
-        >
-          <button
-            class="inline-flex items-center px-3 py-2 text-sm text-black duration-300 border border-gray-200 rounded-lg gap-x-2 whitespace-nowrap hover:bg-gray-100"
-            @click="isOpen = false"
-          >
-            {{ $t("common.actions.cancel") }}
-          </button>
-          <button
-            @click="handleSave"
-            class="py-2 px-3 inline-flex items-center gap-x-2 text-sm whitespace-nowrap text-white bg-blue-500 rounded-lg !border-gray-200 hover:bg-blue-700 duration-300"
-          >
-            {{ $t("common.actions.save") }}
-          </button>
-        </div>
-      </template>
-    </VsDrawer>
-  </div>
-</template>
-
-<script setup>
-import { Edit, Trash2 } from "lucide-vue-next";
-import { ref, watch, computed } from "vue";
-import { testReferenceTypes } from "../testReferenceTypes";
-import { VForm, inputs } from "@opengis/form";
-
-import { VsDrawer } from "@opengis/core";
-import { notify } from '@opengis/core';
-import { useI18n } from "vue-i18n";
-
-const { t } = useI18n();
-
-const props = defineProps({
-  title: {
-    type: String,
-    required: true,
-  },
-});
-
-const model = defineModel({
-  type: Object,
-  default: () => ({}),
-});
-
-const parent = defineModel("parent", {
-  type: Array,
-  default: () => [],
-});
-
-const isOpen = ref(false);
-const formValue = ref({});
-
-const form = ref({});
-
-const schema = computed(() => {
-  return testReferenceTypes[model.value.reference_type]?.schema || null;
-});
-
-watch(isOpen, (newVal) => {
-  if (newVal) {
-    formValue.value = { ...model.value };
-  }
-});
-
-const handleSave = async () => {
-  try {
-    let result = await form.value.validate();
-    if (result) {
-      notify({
-      type: "warning",
-      title: t("common.actions.warning"),
-      message: t("builder.editFieldFailed"),
-    });
-      return;
-    }
-    model.value = { ...formValue.value };
-    isOpen.value = false;
-  } catch (error) {
-    console.log(error);
-  }
-};
-</script>
-
-<style lang="scss" scoped></style>

package/src/components/form-components/reference-skeleton/about-skeleton.vue

@@ -1,37 +0,0 @@
-<template>
-    <div class="h-full w-full flex flex-col">
-        <div class="flex flex-1">
-            <div class="flex-1 pr-2">
-                <div class="h-4 bg-gray-400 rounded mb-2"></div>
-                <div class="space-y-1.5">
-                    <div class="h-2 bg-gray-300 rounded"></div>
-                    <div class="h-2 bg-gray-300 rounded"></div>
-                    <div class="h-2 bg-gray-300 rounded w-4/5"></div>
-                    <div class="h-2 bg-gray-300 rounded"></div>
-                    <div class="h-2 bg-gray-300 rounded w-3/4"></div>
-                    <div class="h-2 bg-gray-300 rounded"></div>
-                </div>
-            </div>
-            <div class="w-16 h-20 bg-gray-200 rounded flex items-center justify-center">
-                <div class="w-6 h-6 bg-gray-300 rounded-full"></div>
-            </div>
-        </div>
-        <div class="flex justify-between items-center mt-2 pt-2 border-t border-gray-300">
-      <div class="text-xs font-medium text-gray-600">{{ $t(text) }}</div>
-      <div class="text-xs text-gray-500" v-if="count && count > 0">{{ count }}</div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-defineProps({
-  text: {
-    type: String,
-    required: true,
-  },
-  count: {
-    type: Number,
-    required: true,
-  },
-});
-</script>

package/src/components/form-components/reference-skeleton/banner-skeleton.vue

@@ -1,29 +0,0 @@
-<template>
-  <div class="h-full w-full flex flex-col">
-    <div class="flex-1 bg-gray-200 rounded relative">
-      <div class="absolute inset-0 flex items-center justify-center">
-        <div class="w-16 h-10 bg-gray-300 rounded"></div>
-      </div>
-      <div class="absolute bottom-2 left-2">
-        <div class="h-3 bg-gray-400 rounded w-16"></div>
-      </div>
-    </div>
-    <div class="flex justify-between items-center mt-2 pt-2 border-t border-gray-300">
-      <div class="text-xs font-medium text-gray-600">{{ $t(text) }}</div>
-      <div class="text-xs text-gray-500" v-if="count && count > 0">{{ count }}</div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-defineProps({
-  text: {
-    type: String,
-    required: true,
-  },
-  count: {
-    type: Number,
-    required: true,
-  },
-});
-</script>

package/src/components/form-components/reference-skeleton/body-skeleton.vue

@@ -1,56 +0,0 @@
-<template>
-  <div class="h-full flex flex-col">
-    <div class="grid grid-cols-3 gap-2 flex-1">
-      <div class="flex flex-col">
-        <div class="h-3 bg-gray-400 rounded mb-2"></div>
-        <div class="space-y-1.5">
-          <div class="h-4 bg-gray-200 rounded border border-gray-300 p-1.5">
-            <div class="h-1.5 bg-gray-300 rounded w-3/4"></div>
-          </div>
-          <div class="h-4 bg-gray-200 rounded border border-gray-300 p-1.5">
-            <div class="h-1.5 bg-gray-300 rounded w-3/4"></div>
-          </div>
-        </div>
-      </div>
-      <div class="flex flex-col">
-        <div class="h-3 bg-gray-400 rounded mb-2"></div>
-        <div class="space-y-1.5">
-          <div class="h-4 bg-gray-200 rounded border border-gray-300 p-1.5">
-            <div class="h-1.5 bg-gray-300 rounded w-3/4"></div>
-          </div>
-          <div class="h-4 bg-gray-200 rounded border border-gray-300 p-1.5">
-            <div class="h-1.5 bg-gray-300 rounded w-3/4"></div>
-          </div>
-        </div>
-      </div>
-      <div class="flex flex-col">
-        <div class="h-3 bg-gray-400 rounded mb-2"></div>
-        <div class="space-y-1.5">
-          <div class="h-4 bg-gray-200 rounded border border-gray-300 p-1.5">
-            <div class="h-1.5 bg-gray-300 rounded w-3/4"></div>
-          </div>
-          <div class="h-4 bg-gray-200 rounded border border-gray-300 p-1.5">
-            <div class="h-1.5 bg-gray-300 rounded w-3/4"></div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="flex justify-between items-center mt-2 pt-2 border-t border-gray-300">
-      <div class="text-xs font-medium text-gray-600">{{ $t(text) }}</div>
-      <div class="text-xs text-gray-500" v-if="count && count > 0">{{ count }}</div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-defineProps({
-  text: {
-    type: String,
-    required: true,
-  },
-  count: {
-    type: Number,
-    required: true,
-  },
-});
-</script>

package/src/components/form-components/reference-skeleton/cards-skeleton.vue

@@ -1,47 +0,0 @@
-<template>
-    <div class="h-full w-full flex flex-col">
-        <div class="flex-1 grid grid-cols-3 gap-1.5">
-            <div class="bg-gray-200 rounded p-1.5 flex flex-col">
-                <div class="flex-1 bg-gray-300 rounded mb-1"></div>
-                <div class="h-1.5 bg-gray-400 rounded"></div>
-            </div>
-            <div class="bg-gray-200 rounded p-1.5 flex flex-col">
-                <div class="flex-1 bg-gray-300 rounded mb-1"></div>
-                <div class="h-1.5 bg-gray-400 rounded"></div>
-            </div>
-            <div class="bg-gray-200 rounded p-1.5 flex flex-col">
-                <div class="flex-1 bg-gray-300 rounded mb-1"></div>
-                <div class="h-1.5 bg-gray-400 rounded"></div>
-            </div>
-            <div class="bg-gray-200 rounded p-1.5 flex flex-col">
-                <div class="flex-1 bg-gray-300 rounded mb-1"></div>
-                <div class="h-1.5 bg-gray-400 rounded"></div>
-            </div>
-            <div class="bg-gray-200 rounded p-1.5 flex flex-col">
-                <div class="flex-1 bg-gray-300 rounded mb-1"></div>
-                <div class="h-1.5 bg-gray-400 rounded"></div>
-            </div>
-            <div class="bg-gray-200 rounded p-1.5 flex flex-col">
-                <div class="flex-1 bg-gray-300 rounded mb-1"></div>
-                <div class="h-1.5 bg-gray-400 rounded"></div>
-            </div>
-        </div>
-        <div class="flex justify-between items-center mt-2 pt-2 border-t border-gray-300">
-      <div class="text-xs font-medium text-gray-600">{{ $t(text) }}</div>
-      <div class="text-xs text-gray-500" v-if="count && count > 0">{{ count }}</div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-defineProps({
-  text: {
-    type: String,
-    required: true,
-  },
-  count: {
-    type: Number,
-    required: true,
-  },
-});
-</script>