@opengis/cms 0.0.21 → 0.0.22

package/src/components/builder/vs-builder-datatable-controls.vue

@@ -0,0 +1,138 @@
+<template>
+  <div class="flex items-center justify-end col-span-3 gap-2">
+    <button
+      v-if="!['status']?.includes(data.name)"
+      @click="dialog = true"
+      class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 hover:text-accent-foreground h-8 w-8 rounded-full hover:bg-gray-100"
+    >
+      <Edit class="w-4 h-4" /></button
+    ><button
+      v-if="!data.required"
+      @click="openConfirm"
+      class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 h-8 w-8 rounded-full hover:bg-red-100 text-red-600 hover:text-red-700"
+    >
+      <Trash class="w-4 h-4" />
+    </button>
+    <button v-else class="w-8 h-4"></button>
+    <VsModal 
+     teleport="#modal"
+      :visible="dialog"
+      :title="$t('builder.editField')"
+      @close="dialog = false"
+    >
+      <VsForm v-model="formValue" :schema="schema" v-model:form="form" />
+      <template #footer>
+        <div class="flex justify-end p-[20px] gap-[10px] border-t w-full">
+          <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="dialog = false"
+          >
+            {{ $t("common.actions.cancel") }}
+          </button>
+          <button
+            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"
+            @click="editColumn"
+          >
+            {{ $t("common.actions.save") }}
+          </button>
+        </div>
+      </template>
+    </VsModal>
+  </div>
+</template>
+
+<script setup>
+import { Edit, Trash } from "lucide-vue-next";
+import { formTypeSchema } from "./formTypeSchema.js";
+import { ref, onMounted, computed } from "vue";
+import { confirm, notify } from '@opengis/core';
+import { useI18n } from "vue-i18n";
+import VsForm from "@opengis/form";
+import { VsModal } from "@opengis/core";
+const { t } = useI18n();
+// import VsForm from '../../../../form/src/index'
+
+const props = defineProps({
+  index: {
+    type: Number,
+    required: true,
+  },
+  data: {
+    type: Object,
+    required: true,
+  },
+});
+
+const columns = defineModel("columns", {
+  type: Array,
+  default: () => [],
+});
+const dialog = ref(false);
+const form = ref({});
+const formValue = ref({ ...(props.data || {}) });
+
+const schema = ref({});
+
+onMounted(() => {
+  if (props.data.required) {
+ 
+    schema.value = {
+      ...formTypeSchema(0, t),
+      name: {
+        ...formTypeSchema(0, t).name,
+        disabled: true,
+      },
+      label: {
+        ...formTypeSchema(0, t).label,
+        disabled: true,
+      },
+      type: {
+        ...formTypeSchema(0, t).type,
+        disabled: true,
+      },
+    }
+  } else {
+    schema.value = formTypeSchema(0, t);
+  }
+});
+
+const openConfirm = () => {
+  confirm({
+    title: t("builder.deleteTitle"),
+    message: t("builder.deleteField"),
+    type: 'error',
+    onConfirm: () => {
+      deleteColumn();
+    },
+  })
+};
+
+const deleteColumn = () => {
+  columns.value = columns.value.filter((_, index) => index !== props.index);
+};
+
+const editColumn = async () => {
+  let result = await form.value.validate();
+  
+   if (result) {
+    notify({
+      type: "warning",
+      title: t("common.actions.warning"),
+      message: t("builder.editFieldFailed"),
+    });
+    return;
+  }
+  try {
+    columns.value[props.index] = formValue.value;
+
+    dialog.value = false;
+  } catch (error) {
+    console.log(error);
+  }
+};
+
+
+
+</script>
+
+<style lang="scss" scoped></style>

package/src/components/builder/vs-builder-datatable-form.vue

@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <button
+      @click="dialog = true"
+      class="inline-flex items-center justify-center h-10 gap-2 px-4 py-2 text-sm font-medium transition-colors border rounded-md hover hover:bg-gray-200 whitespace-nowrap ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring 0"
+    >
+      <Plus class="w-4 h-4 mr-2" />
+      {{ $t("common.actions.addField") }}
+    </button>
+    <VsModal  teleport="#modal" :title="$t('builder.createField')" size="small" v-model:visible="dialog" @close="dialog = false">    
+      <VForm v-model="formValue" :schema="scheme" v-model:form="form" />
+      <template #footer>
+        <div class="flex justify-end p-[20px] gap-[10px] border-t w-full">
+          <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="dialog = false"
+          >
+            {{ $t("common.actions.cancel") }}
+          </button>
+          <button
+            @click="createField"
+            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>
+    </VsModal>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch } from "vue";
+import { Plus } from "lucide-vue-next";
+import { formTypeSchema } from "./formTypeSchema";
+import { VForm,inputs } from "@opengis/form";
+import { VsModal, notify } from "@opengis/core";
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
+// import { VForm,inputs } from '../../../../form/src/index'
+
+inputs['vs-input-datalist'] = inputs.VsInputDatatable;
+
+
+const columns = defineModel({
+  type: Array,
+  default: () => [],
+});
+
+const dialog = ref(false);
+const form = ref({});
+const formValue = ref({});
+
+const scheme = computed(() => {
+  const i = formValue.value;
+  return formTypeSchema(0, t);
+});
+
+const createField = async () => {
+  let result = await form.value.validate();
+   if (result) {
+    notify({
+      type: "warning",
+      title: t("common.actions.warning"),
+      message: t("builder.createFieldFailed"),
+    });
+    return;
+  }
+
+  try {
+    columns.value = [...columns.value, formValue.value];
+    formValue.value = {}; 
+    dialog.value = false;
+  } catch (error) {
+    console.log(error);
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

package/src/components/builder/vs-builder-datatable.vue

@@ -0,0 +1,191 @@
+<template>
+  <div class="flex items-center justify-between mb-6">
+    <div>
+      <h2 class="text-xl font-semibold text-gray-900">{{ $t("builder.collectionStructure") }}</h2>
+      <p class="mt-1 text-sm text-gray-600">
+        {{ $t("builder.defineFields") }}
+      </p>
+    </div>
+    <div class="flex items-center gap-2">
+      <VSBuilderDatatableForm v-model="data.columns" />
+    </div>
+  </div>
+  <div
+    class="overflow-hidden bg-white border border-gray-200 shadow-sm rounded-xl"
+  >
+    <div
+      class="grid grid-cols-12 gap-4 px-6 py-4 border-b border-gray-200 bg-gray-50"
+    >
+      <div class="col-span-5 font-medium text-gray-700">{{ $t("builder.name") }}</div>
+      <div class="col-span-3 font-medium text-gray-700">{{ $t("builder.type") }}</div>
+      <div class="col-span-2 font-medium text-gray-700">{{ $t("builder.localization") }}</div>
+      <div class="col-span-2 font-medium text-right text-gray-700">{{ $t("builder.actions") }}</div>
+    </div>
+    <div class="divide-y divide-gray-100">
+      <template v-if="data?.columns?.length">
+        <draggable
+          v-model="data.columns"
+          item-key="name"
+          handle=".drag-handle"
+          :animation="200"
+        >
+          <template #item="{ element: column, index }">
+            <div
+              class="grid items-center grid-cols-12 gap-4 px-6 py-4 transition-colors hover:bg-gray-50/50"
+            >
+              <div class="flex items-center col-span-5 gap-3">
+                <span class="drag-handle cursor-move mr-2 text-gray-400"
+                  >☰</span
+                >
+                <div
+                  class="flex items-center justify-center p-1 rounded"
+                  :class="`bg-${getColorType(column.type?.toLowerCase())}-100`"
+                >
+                  <component :is="getIconType(column.type?.toLowerCase())" class="w-4 h-4" />
+                </div>
+                <div>
+                  <p class="font-medium text-gray-900">{{ column.label }}</p>
+                  <p class="text-xs text-gray-500">{{ column.name }}</p>
+                </div>
+                <span
+                  v-if="column.required"
+                  class="inline-flex items-center px-2 py-1 text-xs font-medium text-blue-700 rounded-full bg-blue-50 ring-1 ring-inset ring-blue-700/10"
+                  >{{ $t("builder.required") }}</span
+                >
+              </div>
+              <div class="col-span-3">
+                <span
+                  class="inline-flex items-center px-2 py-1 text-sm font-medium text-gray-600 rounded-md bg-gray-50 ring-1 ring-inset ring-gray-500/10"
+                  >{{ column.type }}</span
+                >
+              </div>
+              <div class="col-span-1">
+                <svg
+                  v-if="column.localization"
+                  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-circle-check w-4 h-4 text-emerald-600"
+                >
+                  <circle cx="12" cy="12" r="10"></circle>
+                  <path d="m9 12 2 2 4-4"></path>
+                </svg>
+              </div>
+
+              <VSBuilderDatatableControls
+                v-model:columns="data.columns"
+                :data="data.columns[index]"
+                :index
+              />
+            </div>
+          </template>
+        </draggable>
+      </template>
+      <template v-else>
+        <div
+          class="grid items-center grid-cols-12 gap-4 px-6 py-4 transition-colors hover:bg-gray-50/50"
+        >
+          <div class="col-span-5">
+            <p class="text-gray-500">{{ $t("builder.noColumnsFound") }}</p>
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import VSBuilderDatatableForm from "./vs-builder-datatable-form.vue";
+import VSBuilderDatatableControls from "./vs-builder-datatable-controls.vue";
+import draggable from "vuedraggable";
+import { List, CheckSquare, Calendar, Clock, Hash, Type, File, ListTree, Link, Image as LucideImage, LayoutTemplate } from "lucide-vue-next";
+
+const data = defineModel();
+
+const getColorType = (type) => {
+  if (type === "array") {
+    return "purple";
+  }
+  if (type === "boolean") {
+    return "red";
+  }
+  if (type === "date") {
+    return "red";
+  }
+  if (type === "datetime") {
+    return "purple";
+  }
+  if (type === "number") {
+    return "green";
+  }
+  if (type === "text") {
+    return "blue";
+  }
+  if (type === "file") {
+    return "yellow";
+  }
+  if (type === "select") {
+    return "yellow";
+  }
+  if (type === "slug") {
+    return "green";
+  }
+  if (type === "image") {
+    return "blue";
+  }
+  return "gray";
+};
+
+const getIconType = (type) => {
+  switch (type) {
+    case "text":
+      return Type;
+    case "number":
+      return Hash;
+    case "integer":
+      return Hash;
+    case "date":
+      return Calendar;
+    case "datetime":
+      return Clock;
+    case "file":
+      return File;
+    case "select":
+      return ListTree;
+    case "multiselect":
+      return List;
+    case "mediaselect":
+      return Image;
+    case "radio":
+      return CheckSquare;
+    case "boolean":
+      return CheckSquare;
+    case "datalist":
+      return ListTree;
+    case "image":
+      return LucideImage;
+    case "slug":
+      return Link;
+    case "richtext":
+      return Type;
+    case "markdown":
+      return Type;
+    case "reference":
+      return LayoutTemplate;
+    case "relation":
+      return Link;
+    case "FileList":
+      return File;
+    default:
+      return Type;
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

package/src/components/builder/vs-builder-list-item.vue

@@ -0,0 +1,110 @@
+<template>
+  <div
+    class="p-4 transition-shadow border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-700 dark:border-gray-600 hover:shadow-md"
+  >
+    <div class="flex items-start justify-between">
+      <div class="flex items-center">
+        <Database class="w-5 h-5 mr-2 text-sky-500" />
+        <h3
+          class="text-lg font-medium text-gray-900 cursor-pointer dark:text-white hover:underline"
+          @click="handleGoToContent(collection)"
+        >
+          {{ collection.title }}
+        </h3>
+      </div>
+      <div class="flex space-x-2">
+        <button
+          @click="handleEditCollection(collection)"
+          class="text-gray-400 hover:text-gray-500 dark:hover:text-gray-300"
+        >
+          <Edit class="w-4 h-4" />
+        </button>
+        <button
+          @click="openConfirm"
+          class="text-gray-400 hover:text-red-500 dark:hover:text-red-400"
+        >
+          <Trash2 class="w-4 h-4" />
+        </button>
+      </div>
+    </div>
+    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
+      {{ collection.description }}
+    </p>
+    <div class="mt-4">
+      <h4
+        class="text-xs font-medium tracking-wider text-gray-500 uppercase dark:text-gray-400"
+      >
+        {{ $t("collections.form.fields") }}
+      </h4>
+      <div class="flex flex-wrap gap-2 mt-2">
+        <span
+          v-for="(field, index) in collection.fields"
+          :key="index"
+          class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-600 dark:text-gray-300"
+        >
+          {{ field.label }}
+        </span>
+        <button class="px-2 py-1 text-xs text-white bg-blue-500 rounded-lg">
+          {{ collection?.type || "single" }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Database, Edit, Trash2 } from "lucide-vue-next";
+import { useRouter } from "vue-router";
+import { confirm } from '@opengis/core';
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
+
+interface Field {
+  name: string;
+  type: "text" | "textarea" | "number" | "date" | "select" | "boolean";
+  label: string;
+  required: boolean;
+  options?: string[];
+}
+
+interface Collection {
+  id: string;
+  name: string;
+  title: string;
+  slug: string;
+  description: string;
+  fields: Field[];
+  type: string;
+}
+
+const router = useRouter();
+const props = defineProps<{
+  collection: any;
+  handleDeleteCollection: (collection: any) => void;
+}>();
+
+const openConfirm = () => {
+  confirm({
+    title: t("builder.deleteTitle"),
+    message: t("builder.deleteField"),
+    type: 'error',
+    onConfirm: () => {
+      props.handleDeleteCollection(props.collection.id);
+    },
+  })
+};
+
+const handleEditCollection = (collection: Collection) => {
+  router.push(`/settings/collections/edit/${collection.id || collection.name}`);
+};
+
+const handleGoToContent = (collection: Collection) => {
+  if (collection.type === "single") {
+    router.push(`/collections/single/${collection.name}`);
+  } else {
+    router.push(`/collections/${collection.name}`);
+  }
+};
+</script>
+
+<style scoped></style>

package/src/components/collections/CollectionsBreadcrumb.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="flex items-center space-x-1 mb-4">
+    <button 
+      class="flex gap-x-1 items-center px-2 py-1 rounded text-sm font-medium transition-all duration-200 text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/20 hover:bg-blue-100 dark:hover:bg-blue-900/30"
+      @click="$emit('navigate', 'collections')"  
+    >
+      <Layers class="w-3 h-3" />
+      {{ $t("navigation.collections") }}
+    </button>
+    <ChevronRight 
+      v-if="items.length > 0" 
+      class="w-3 h-3 text-slate-400 dark:text-slate-500" 
+    />
+    <template v-for="(item, index) in items" :key="index">
+      <button
+        v-if="index < items.length - 1"
+        class="flex gap-x-1 items-center px-2 py-1 rounded text-sm font-medium transition-all duration-200 text-blue-700 dark:text-blue-300 bg-blue-50 dark:bg-blue-900/20 hover:bg-blue-100 dark:hover:bg-blue-900/30"
+        @click="$emit('navigate', item.route)"
+      >
+        {{ item.label }}
+      </button>
+      <span
+        v-else
+        class="flex gap-x-1 items-center px-2 py-1 rounded text-sm font-medium text-slate-700 dark:text-slate-300"
+      >
+        {{ item.label }}
+      </span>
+      <ChevronRight
+        v-if="index < items.length - 1"
+        class="w-3 h-3 text-slate-400 dark:text-slate-500"
+      />
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ChevronRight, Layers } from "lucide-vue-next";
+
+interface BreadcrumbItem {
+  label: string;
+  route: string;
+}
+
+defineProps<{
+  items: BreadcrumbItem[];
+}>();
+
+defineEmits<{
+  (e: "navigate", route: string): void;
+}>();
+</script>
+