@opengis/cms 0.0.21 → 0.0.22

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

@@ -0,0 +1,97 @@
+<template>
+  <div class="w-full">
+    <Draggable
+      v-if="model?.length > 0"
+      v-model="model"
+      item-key="id"
+      handle=".drag-handle"
+      class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4"
+    >
+      <template #item="{ element: item, index }">
+        <div class="relative" v-if="item?.reference_type">
+          <div
+            class="group wireframe-block h-[280px] !p-4 border-2 border-dashed bg-white relative overflow-hidden transition-all rounded-lg shadow-sm border-gray-00 hover:border-gray-400 cursor-grab"
+          >
+            <div
+              :key="item.id"
+              class="absolute top-2 left-2 opacity-0 group-hover:opacity-100 border border-gray-200 dark:border-gray-700 transition-opacity cursor-move z-10 bg-white dark:bg-gray-800 rounded p-1 shadow-sm drag-handle"
+            >
+              <GripVertical class="h-4 w-4 text-gray-400" />
+            </div>
+            
+            <VsFormReferenceControls
+              :title="$t('builder.' + item?.reference_type)"
+              v-model="model[index]"
+              v-model:parent="model"
+            />
+            <component
+              v-if="referenceSkeleton[item?.reference_type]"
+              :is="referenceSkeleton[item?.reference_type]"
+              :index="index"
+              :text="getReferenceText(item?.reference_type)"
+              :count="Array.isArray(item?.data) ? item.data.length : 0"
+            />
+            <img
+              v-else
+              :src="icon"
+              alt="Team collaboration"
+              class="w-full h-full object-cover"
+            />
+          </div>
+        </div>
+      </template>
+    </Draggable>
+    <VsFormReferenceAdd class="mt-4" :title="title" v-model="model" />
+  </div>
+</template>
+
+<script setup>
+import { GripVertical } from "lucide-vue-next";
+import Draggable from "vuedraggable";
+import { computed, watch } from "vue";
+import icon from "../../assets/image.png";
+import VsFormReferenceAdd from "./reference-list/vs-form-reference-add.vue";
+import VsFormReferenceControls from "./reference-list/vs-form-reference-controls.vue";
+import referenceSkeleton from "./reference-skeleton/index.js";
+import referenceOptionList from "./reference-list/referenceOptionList";
+
+const props = defineProps({
+  reference_type: {
+    type: String,
+    required: true,
+  },
+  title: {
+    type: String,
+    required: true,
+  },
+});
+
+const getReferenceText = (reference_type) => {
+  return referenceOptionList.find((item) => item.id === reference_type)?.text;
+};
+
+const modelValue = defineModel({
+  default: () => [],
+});
+
+// Normalize the model to always be an array
+const model = computed({
+  get() {
+    const value = modelValue.value;
+    if (value === null || value === undefined) return [];
+    return Array.isArray(value) ? value : [];
+  },
+  set(value) {
+    modelValue.value = Array.isArray(value) ? value : [];
+  }
+});
+
+// Ensure initial value is always an array
+watch(modelValue, (newValue) => {
+  if (newValue !== null && newValue !== undefined && !Array.isArray(newValue)) {
+    modelValue.value = [];
+  }
+}, { immediate: true });
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <div
+      v-if="model && Object.keys(model).length > 0"
+      class="h-[260px] w-[300px] group relative bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden hover:border-sky-300 dark:hover:border-sky-600 transition-all duration-200"
+    >
+      <!-- <div
+        class="absolute top-2 left-2 opacity-0 group-hover:opacity-100 transition-opacity cursor-move z-10 bg-white dark:bg-gray-800 rounded p-1 shadow-sm drag-handle"
+      >
+        <GripVertical class="h-4 w-4 text-gray-400" />
+      </div> -->
+      <VsFormReferenceControls
+        :title="title"
+        :schema="scheme"
+        v-model="model"
+      />
+      <component
+        :is="testReferenceTypes[reference_type].component"
+        v-bind="model"
+      />
+    </div>
+    <VsFormReferenceAdd
+      v-else
+      class="mt-4"
+      :title="title"
+      v-model="model"
+      :schema="scheme"
+    />
+  </div>
+</template>
+
+<script setup>
+import { testReferenceTypes } from "./testReferenceTypes";
+import { computed } from "vue";
+import VsFormReferenceAdd from "./reference/vs-form-reference-add.vue";
+import VsFormReferenceControls from "./reference/vs-form-reference-controls.vue";
+
+const props = defineProps({
+  reference_type: {
+    type: String,
+    default: "",
+  },
+  title: {
+    type: String,
+    default: "",
+  },
+});
+
+const model = defineModel({
+  type: Object,
+  default: () => ({}),
+});
+
+const scheme = computed(() => {
+  return testReferenceTypes[props.reference_type]?.schema || null;
+});
+</script>
+
+<style lang="scss" scoped></style>

package/src/components/form-components/vs-form-relation.vue

@@ -0,0 +1,30 @@
+<template>
+  <VsInputSelect
+    v-if="options.length"
+    mode="combo"
+    v-model="model"
+    :options="options"
+  />
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { VsInputSelect } from '@opengis/form'
+
+
+const model = defineModel();
+
+const options = ref([]);
+
+const fetchOptions = async () => {
+  const res = await fetch(`/api/cms-type`);
+  const data = await res.json();
+  options.value = data?.rows
+    ?.filter((item) => item.type === "collection")
+    ?.map((i) => ({ ...i, text: i.title }));
+};
+
+onMounted(fetchOptions);
+</script>
+
+<style lang="scss" scoped></style>

package/src/components/form-components/vs-form-reletion-link.vue

@@ -0,0 +1,34 @@
+<template>
+  <VsInputSelect
+    v-if="options?.length"
+    mode="combo"
+    v-model="model"
+    :options="options"
+  />
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { VsInputSelect } from '@opengis/form'
+
+
+const model = defineModel();
+const props = defineProps({
+  relation: {
+    type: String,
+    required: true,
+  },
+});
+
+const options = ref([]);
+
+const fetchOptions = async () => {
+  const res = await fetch(`/api/cms-suggest/${props.relation}`);
+  const data = await res.json();
+  options.value = data?.data;
+};
+
+onMounted(fetchOptions);
+</script>
+
+<style lang="scss" scoped></style>

package/src/components/form-components/vs-form-slug.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="relative flex gap-1 bg-white rounded-lg vs-form-text">
+    <input
+      ref="vsText"
+      :disabled="disabled"
+      :placeholder="placeholder"
+      v-model="value"
+      class="block w-full px-3 py-2 text-sm border border-solid rounded-lg placeholder:text-nowrap border-stone-200 text-stone-800 placeholder:text-stone-400 focus:outline focus:z-10 focus:border-blue-500 focus:ring-blue-500 focus:outline-blue-500"
+    />
+    <button
+      class="px-2 bg-gray-100 border rounded-lg hover:bg-gray-200"
+      @click="generateSlug"
+    >
+      {{ t('form.gen') }}
+    </button>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed, inject, watch } from "vue";
+import { translit } from "../../utils/translit";
+import { useI18n } from 'vue-i18n';
+const { t } = useI18n();
+
+const formValues = inject("formValues") || {};
+
+const props = defineProps<{
+  disabled?: boolean;
+  modelValue: string;
+  placeholder?: string;
+  parent: string;
+}>();
+
+const parentValue = computed(() => {
+  return formValues?.value?.[props.parent || ""] || "";
+});
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: string): void;
+}>();
+
+const value = computed({
+  get(): string {
+    return props.modelValue;
+  },
+  set(output: string): void {
+    emit("update:modelValue", output.trim());
+  },
+});
+
+const generateSlug = () => {
+  value.value = parentValue.value
+    ? translit(parentValue.value)
+    : translit(value.value);
+};
+</script>
+<style lang="scss" scoped>
+.col-error {
+  .vs-form-text input {
+    border: 1px solid red;
+  }
+}
+
+.vs-form-text {
+  position: relative;
+}
+
+.vs-form-text__input {
+  &::placeholder {
+    opacity: 0.5;
+  }
+}
+</style>

package/src/components/form-components/vs-form-tiptap.vue

@@ -0,0 +1,7 @@
+<template>
+  <vs-richtext class="w-full" />
+</template>
+
+<script>
+import "@opengis/richtext/dist/richtext.css";
+</script>

package/src/components/form-components/vs-richtext-md.vue

@@ -0,0 +1,3 @@
+<template>
+    <vs-richtext-md class="w-full h-[300px]" />
+  </template>

package/src/components/icons/BellIcon.vue

@@ -0,0 +1,17 @@
+<template>
+  <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-bell w-5 h-5 mr-2"
+  >
+    <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"></path>
+    <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"></path>
+  </svg>
+</template> 

package/src/components/icons/GlobeIcon.vue

@@ -0,0 +1,18 @@
+<template>
+  <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-globe w-5 h-5 mr-2 text-orange-600"
+  >
+    <circle cx="12" cy="12" r="10"></circle>
+    <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"></path>
+    <path d="M2 12h20"></path>
+  </svg>
+</template> 

package/src/components/icons/KeyIcon.vue

@@ -0,0 +1,20 @@
+<template>
+  <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-key w-5 h-5 mr-2 text-purple-600"
+  >
+    <path
+      d="m15.5 7.5 2.3 2.3a1 1 0 0 0 1.4 0l2.1-2.1a1 1 0 0 0 0-1.4L19 4"
+    ></path>
+    <path d="m21 2-9.6 9.6"></path>
+    <circle cx="7.5" cy="15.5" r="5.5"></circle>
+  </svg>
+</template> 

package/src/components/icons/PaletteIcon.vue

@@ -0,0 +1,22 @@
+<template>
+  <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-palette w-5 h-5 mr-2 text-pink-600"
+  >
+    <circle cx="13.5" cy="6.5" r=".5" fill="currentColor"></circle>
+    <circle cx="17.5" cy="10.5" r=".5" fill="currentColor"></circle>
+    <circle cx="8.5" cy="7.5" r=".5" fill="currentColor"></circle>
+    <circle cx="6.5" cy="12.5" r=".5" fill="currentColor"></circle>
+    <path
+      d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"
+    ></path>
+  </svg>
+</template> 

package/src/components/icons/SettingsIcon.vue

@@ -0,0 +1,19 @@
+<template>
+  <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-settings w-5 h-5 mr-2 text-blue-600"
+  >
+    <path
+      d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"
+    ></path>
+    <circle cx="12" cy="12" r="3"></circle>
+  </svg>
+</template> 

package/src/components/icons/ShieldIcon.vue

@@ -0,0 +1,18 @@
+<template>
+  <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-shield w-5 h-5 mr-2 text-red-600"
+  >
+    <path
+      d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"
+    ></path>
+  </svg>
+</template> 

package/src/components/icons/UsersIcon.vue

@@ -0,0 +1,19 @@
+<template>
+  <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-users w-5 h-5 mr-2 text-green-600"
+  >
+    <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
+    <circle cx="9" cy="7" r="4"></circle>
+    <path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
+    <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
+  </svg>
+</template> 

package/src/components/icons/icon-chevron-right.vue

@@ -0,0 +1,16 @@
+<template>
+  <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-chevron-right"
+  >
+    <path d="m9 18 6-6-6-6" />
+  </svg>
+</template>

package/src/components/icons/icon-drag.vue

@@ -0,0 +1,20 @@
+<template>
+    <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"
+    >
+        <circle cx="9" cy="12" r="1"></circle>
+        <circle cx="9" cy="5" r="1"></circle>
+        <circle cx="9" cy="19" r="1"></circle>
+        <circle cx="15" cy="12" r="1"></circle>
+        <circle cx="15" cy="5" r="1"></circle>
+        <circle cx="15" cy="19" r="1"></circle>
+    </svg>
+</template>

package/src/components/icons/icon-file-text.vue

@@ -0,0 +1,21 @@
+<template>
+  <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"
+  >
+    <path
+      d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"
+    />
+    <polyline points="14 2 14 8 20 8" />
+    <line x1="16" y1="13" x2="8" y2="13" />
+    <line x1="16" y1="17" x2="8" y2="17" />
+    <line x1="10" y1="9" x2="8" y2="9" />
+  </svg>
+</template>

package/src/components/icons/icon-folder.vue

@@ -0,0 +1,18 @@
+<template>
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    role="img"
+    viewBox="0 0 16 16"
+    width="16"
+    height="16"
+    fill="currentColor"
+  >
+    <path
+      d="M.513 1.513A1.75 1.75 0 0 1 1.75 1h3.5c.55 0 1.07.26 1.4.7l.9 1.2a.25.25 0 0 0 .2.1H 13a1 1 0 0 1 1 1v.5H2.75a.75.75 0 0 0 0 1.5h11.978a1 1 0 0 1 .994 1.117L15 13.25A1.75 1.75 0 0 1 13.25 15H1.75A1.75 1.75 0 0 1 0 13.25V2.75c0-.464.184-.91.513-1.237Z"
+    ></path>
+    <path
+      d="M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75Z"
+    ></path>
+  </svg>
+</template>

package/src/components/icons/icon-grid.vue

@@ -0,0 +1,17 @@
+<template>
+    <svg 
+        xmlns="http://www.w3.org/2000/svg" 
+        viewBox="0 0 24 24" 
+        fill="none" 
+        stroke="currentColor" 
+        stroke-width="2" 
+        stroke-linecap="round" 
+        stroke-linejoin="round" 
+    >
+        <rect width="18" height="18" x="3" y="3" rx="2" />
+        <path d="M3 9h18" />
+        <path d="M3 15h18" />
+        <path d="M9 3v18" />
+        <path d="M15 3v18" />
+    </svg>
+</template>

package/src/components/icons/icon-group.vue

@@ -0,0 +1,19 @@
+<template>
+  <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="w-4 h-4 lucide lucide-layout-grid"
+  >
+    <rect width="7" height="7" x="3" y="3" rx="1"></rect>
+    <rect width="7" height="7" x="14" y="3" rx="1"></rect>
+    <rect width="7" height="7" x="14" y="14" rx="1"></rect>
+    <rect width="7" height="7" x="3" y="14" rx="1"></rect>
+  </svg>
+</template>

package/src/components/icons/icon-home.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20"
+    height="20"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
+    <polyline points="9 22 9 12 15 12 15 22"></polyline>
+  </svg>
+</template>

package/src/components/icons/icon-image.vue

@@ -0,0 +1,18 @@
+<template>
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    role="img"
+    viewBox="0 0 16 16"
+    width="16"
+    height="16"
+    fill="currentColor"
+  >
+    <path
+      d="M.513 1.513A1.75 1.75 0 0 1 1.75 1h3.5c.55 0 1.07.26 1.4.7l.9 1.2a.25.25 0 0 0 .2.1H 13a1 1 0 0 1 1 1v.5H2.75a.75.75 0 0 0 0 1.5h11.978a1 1 0 0 1 .994 1.117L15 13.25A1.75 1.75 0 0 1 13.25 15H1.75A1.75 1.75 0 0 1 0 13.25V2.75c0-.464.184-.91.513-1.237Z"
+    ></path>
+    <path
+      d="M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75Z"
+    ></path>
+  </svg>
+</template>

package/src/components/icons/icon-list.vue

@@ -0,0 +1,20 @@
+<template>
+  <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"
+  >
+    <line x1="8" x2="21" y1="6" y2="6" />
+    <line x1="8" x2="21" y1="12" y2="12" />
+    <line x1="8" x2="21" y1="18" y2="18" />
+    <line x1="3" x2="3.01" y1="6" y2="6" />
+    <line x1="3" x2="3.01" y1="12" y2="12" />
+    <line x1="3" x2="3.01" y1="18" y2="18" />
+  </svg>
+</template>

package/src/components/icons/icon-more.vue

@@ -0,0 +1,17 @@
+<template>
+    <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" 
+    >
+        <circle cx="12" cy="12" r="1"/>
+        <circle cx="12" cy="5" r="1"/>
+        <circle cx="12" cy="19" r="1"/>
+    </svg>
+</template>

package/src/components/icons/icon-plus.vue

@@ -0,0 +1,17 @@
+<template>
+  <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"
+  >
+    <path d="M5 12h14" />
+    <path d="M12 5v14" />
+  </svg>
+</template>