@opengis/cms 0.0.22 → 0.0.24

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

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

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

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

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

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