@opengis/cms 0.0.21 → 0.0.22

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

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

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

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

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

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

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

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

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

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