@drax/crud-vue 0.4.0

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@drax/crud-vue",
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "0.4.0",
+  "type": "module",
+  "main": "./src/index.ts",
+  "module": "./src/index.ts",
+  "types": "./src/index.ts",
+  "files": [
+    "src"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "preview": "vite preview",
+    "test:unit": "vitest",
+    "test:e2e": "start-server-and-test preview http://localhost:4173 'cypress run --e2e'",
+    "test:e2e:dev": "start-server-and-test 'vite dev --port 4173' http://localhost:4173 'cypress open --e2e'",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --build --force",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+    "format": "prettier --write src/"
+  },
+  "dependencies": {
+    "@drax/common-front": "^0.4.0",
+    "@drax/common-share": "^0.4.0"
+  },
+  "peerDependencies": {
+    "pinia": "^2.2.2",
+    "vue": "^3.5.7",
+    "vue-i18n": "^9.14.0",
+    "vuetify": "^3.7.2"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "^1.8.0",
+    "@tsconfig/node20": "^20.1.4",
+    "@types/jsdom": "^21.1.7",
+    "@types/node": "^20.12.5",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vue/eslint-config-prettier": "^9.0.0",
+    "@vue/eslint-config-typescript": "^13.0.0",
+    "@vue/test-utils": "^2.4.5",
+    "@vue/tsconfig": "^0.5.1",
+    "cypress": "^13.7.2",
+    "eslint": "^8.57.0",
+    "eslint-plugin-cypress": "^2.15.1",
+    "eslint-plugin-vue": "^9.23.0",
+    "jsdom": "^24.0.0",
+    "npm-run-all2": "^6.1.2",
+    "pinia": "^2.1.7",
+    "pinia-plugin-persistedstate": "^3.2.1",
+    "prettier": "^3.2.5",
+    "start-server-and-test": "^2.0.3",
+    "typescript": "~5.4.0",
+    "vite": "^5.4.3",
+    "vite-plugin-css-injected-by-js": "^3.5.1",
+    "vite-plugin-dts": "^3.9.1",
+    "vitest": "^1.4.0",
+    "vue": "^3.5.3",
+    "vue-tsc": "^2.0.11",
+    "vuetify": "^3.7.1"
+  },
+  "gitHead": "481b302fe72f403abf092806ceca540dd2765dfa"
+}

package/src/EntityCrud.ts

@@ -0,0 +1,124 @@
+import type {IDraxCrud} from "@drax/common-share";
+import type {
+  IFields,
+  ICrudForm,
+  ICrudHeaders,
+  ICrudPermissions,
+  ICrudRules,
+  ICrudField
+} from "./interfaces/IEntityCrud";
+
+
+
+class EntityCrud{
+
+  name: string = ''
+
+  constructor() {
+  }
+
+  static get instance(){
+    throw new Error('EntityCrud instance not found')
+  }
+
+
+  get headers():ICrudHeaders[]{
+    return [
+      {title: 'ID',key:'_id'},
+    ]
+  }
+
+  get permissions(): ICrudPermissions {
+    return {
+      manage: 'manage', view: 'view', create: 'create',  update: 'update', delete: 'delete'
+    }
+  }
+
+  get provider(): IDraxCrud<any, any, any>{
+    throw new Error('provider not implemented')
+  }
+
+  get fields():IFields{
+    return [
+      {name: 'id', type: 'string', label: 'ID', default: '' },
+    ]
+  }
+
+  get form():ICrudForm{
+
+    function objectFields(field:ICrudField){
+      let value:any = {}
+      if(field.objectFields){
+        field.objectFields.forEach(subField => {
+          if(subField.type === 'object'){
+            value[subField.name] = objectFields(subField)
+          }else{
+            value[subField.name] = subField.default
+          }
+
+        })
+      }
+      return value
+    }
+
+    const form = this.fields.reduce((acc, field) => {
+
+      let value = null
+      if(field.type === 'object'){
+        value = objectFields(field)
+      } else if(field.default != undefined){
+        value = field.default
+      }
+
+      return {...acc, [field.name]: value }
+    }, {})
+
+    console.log("Form: ", form)
+
+    return form
+
+  }
+
+  get refs():{ [key: string]: EntityCrud }{
+    return {}
+  }
+
+  getRef(ref: string):EntityCrud{
+    if(!this.refs.hasOwnProperty(ref))  {
+      throw new Error("Ref not found: " + ref)
+    }
+
+    return this.refs[ref] as EntityCrud
+  }
+
+  get rules(): ICrudRules{
+    return {}
+  }
+
+  get rule()  {
+    return (field:string) => this.rules[field] || []
+  }
+
+  get isEditable(){
+    return true
+  }
+
+  get isCreatable(){
+    return true
+  }
+
+  get isDeletable(){
+    return true
+  }
+
+  get dialogFullscreen(){
+    return false
+  }
+
+
+
+
+}
+
+export default EntityCrud;
+export { EntityCrud }

package/src/components/Crud.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import type {PropType} from "vue";
+import EntityCrud from "../EntityCrud";
+import CrudList from "./CrudList.vue";
+import CrudForm from "./CrudForm.vue";
+import CrudNotify from "./CrudNotify.vue";
+import CrudDialog from "./CrudDialog.vue";
+import {useCrud} from "../composables/UseCrud";
+
+const {entity} = defineProps({
+  entity: {type: Object as PropType<EntityCrud>, required: true},
+})
+
+const {
+  onCreate, onEdit, onDelete, onCancel, onSubmit,
+  operation, dialog, form, formValid, notify, error, message,
+} = useCrud(entity);
+
+</script>
+
+<template>
+  <v-container fluid class="mt-5">
+    <v-card>
+
+      <crud-list
+          :entity="entity"
+          @create="onCreate"
+          @edit="onEdit"
+          @delete="onDelete"
+      >
+        <template v-for="header in entity.headers" :key="header.key" v-slot:[`item.${header.key}`]="{item, value}">
+          <slot :name="`item.${header.key}`" v-bind="{item, value}">
+            {{ value }}
+          </slot>
+        </template>
+      </crud-list>
+    </v-card>
+
+    <crud-dialog
+        v-model="dialog"
+        :entity="entity"
+        :operation="operation"
+    >
+
+      <slot name="form">
+        <crud-form
+            v-model="form"
+            :entity="entity"
+            :error="error"
+            :operation="operation"
+            :readonly="operation === 'delete'"
+            @submit="onSubmit"
+            @cancel="onCancel"
+        />
+      </slot>
+
+    </crud-dialog>
+
+    <crud-notify v-model="notify" :message="message"></crud-notify>
+  </v-container>
+</template>
+
+<style scoped>
+
+</style>

package/src/components/CrudAutocomplete.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import {debounce} from "@drax/common-front"
+import type { PropType, Ref} from "vue";
+import {ref, onBeforeMount} from "vue";
+import EntityCrud from "../EntityCrud";
+import type {ICrudField} from "@/interfaces/IEntityCrud";
+
+const valueModel = defineModel({type: [String, Array], required: false})
+
+const {entity, multiple} = defineProps({
+  entity: {type: Object as PropType<EntityCrud>, required: true},
+  field: {type: Object as PropType<ICrudField>, required: true},
+  multiple: {type: Boolean, default: false},
+  chips: {type: Boolean, default: false},
+  closableChips: {type: Boolean, default: true},
+  clearable: {type: Boolean, default: true},
+  label: {type: String},
+  itemValue: {type: [String], default: '_id'},
+  itemTitle: {type: [String], default: 'name'},
+  rules: {type: Array<Function>, default: []},
+  errorMessages: {type: Array as PropType<string[]>, default: []},
+})
+
+const loading: Ref<boolean> = ref(false)
+const items: Ref<Array<any>> = ref([])
+
+const debouncedSearch = debounce(search, 300)
+
+onBeforeMount(async () => {
+  if(valueModel.value && valueModel.value.length > 0){
+    if(multiple && Array.isArray(valueModel.value) ){
+      items.value = valueModel.value
+      //await findByIds(valueModel.value)
+    }else{
+      items.value = [valueModel.value]
+      //await findByIds([valueModel.value])
+    }
+
+  }
+})
+
+async function findByIds(ids: Array<string>) {
+  try{
+    loading.value = true
+    items.value = await entity.provider.findByIds(ids)
+  }catch (e){
+    console.error(e)
+  }finally{
+    loading.value = false
+  }
+}
+
+
+
+
+async function search(value: any) {
+  try{
+    loading.value = true
+    if(!entity.provider.search){
+      throw new Error('Provider does not have a search method')
+    }
+    items.value = await entity.provider.search(value)
+  }catch (e){
+    console.error(e)
+  }finally{
+    loading.value = false
+  }
+
+}
+
+</script>
+
+<template>
+  <v-autocomplete
+      v-model="valueModel"
+      :label="label ? label : field.label"
+      :placeholder="field.label"
+      :items="items"
+      :multiple="multiple"
+      :chips="chips"
+      :closable-chips="closableChips"
+      :clearable="clearable"
+      :item-value="itemValue"
+      :item-title="itemTitle"
+      :loading="loading"
+      :rules="rules"
+      :error-messages="errorMessages"
+      @update:search="debouncedSearch"
+  ></v-autocomplete>
+</template>
+
+<style scoped>
+
+</style>

package/src/components/CrudDialog.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type {TOperation} from "../interfaces/TOperation";
+import type {PropType} from "vue";
+import EntityCrud from "../EntityCrud";
+const dialog = defineModel({type: Boolean, default: false})
+
+defineProps({
+  entity: {type: Object as PropType<EntityCrud>, required: true},
+  operation: {type: String as PropType<TOperation>}
+})
+
+defineEmits(
+    ['submit', 'close']
+)
+
+</script>
+
+<template>
+  <v-dialog v-model="dialog" :fullscreen="entity.dialogFullscreen">
+    <v-card>
+      <v-toolbar>
+        <v-toolbar-title>{{entity.name}} {{$te('action.'+operation) ? $t('action.'+operation) : operation}}</v-toolbar-title>
+        <v-spacer></v-spacer>
+        <v-btn icon @click="dialog = false"><v-icon>mdi-close</v-icon></v-btn>
+      </v-toolbar>
+      <v-card-text>
+        <slot></slot>
+      </v-card-text>
+    </v-card>
+
+  </v-dialog>
+</template>
+
+<style scoped>
+
+</style>

package/src/components/CrudForm.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import type {PropType} from "vue";
+import  {ref} from "vue";
+import EntityCrud from "../EntityCrud";
+import CrudFormField from "./CrudFormField.vue";
+import type {TOperation} from "../interfaces/TOperation";
+
+
+const valueModel = defineModel({type: [Object]})
+
+
+const {entity} = defineProps({
+  entity: {type: Object as PropType<EntityCrud>, required: true},
+  operation: {type: String as PropType<TOperation>, required: true},
+  readonly: {type: Boolean, default: false},
+  error: {type: String, required: false},
+})
+
+const valid = ref()
+const formRef = ref()
+
+function submit() {
+  formRef.value.validate()
+  if(valid.value) {
+    emit('submit',valueModel.value)
+  }
+}
+
+function cancel() {
+  emit('cancel')
+}
+
+const emit = defineEmits(['submit', 'cancel'])
+
+</script>
+
+<template>
+  <v-form v-model="valid" ref="formRef"  @submit.prevent >
+    <v-card flat>
+      <v-card-text v-if="error">
+        <v-alert color="error">{{ $te(error) ? $t(error) : error }}</v-alert>
+      </v-card-text>
+      <v-card-text>
+        <template v-for="field in entity.fields" :key="field.name">
+          <crud-form-field
+              :field="field"
+              :entity="entity"
+              v-model="valueModel[field.name]"
+          />
+        </template>
+      </v-card-text>
+
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn variant="text" color="grey" @click="cancel">{{ $t('action.cancel') }}</v-btn>
+        <v-btn variant="flat" color="primary" @click="submit">
+          {{ operation ? $t('action.' + operation) : $t('action.sent') }}
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-form>
+</template>
+
+<style scoped>
+
+</style>

package/src/components/CrudFormField.vue

@@ -0,0 +1,175 @@
+<script setup lang="ts">
+import {computed} from "vue";
+import type {PropType} from "vue";
+import type {ICrudField} from "../interfaces/IEntityCrud";
+import CrudFormList from "./CrudFormList.vue";
+import CrudAutocomplete from "./CrudAutocomplete.vue";
+import EntityCrud from "@/EntityCrud";
+import {useI18n} from "vue-i18n";
+import {useCrudStore} from "../stores/UseCrudStore";
+import {VDateInput} from 'vuetify/labs/VDateInput'
+const {t, te} = useI18n()
+
+const store = useCrudStore()
+
+const valueModel = defineModel({type: [String, Number, Boolean, Object, Array], default: false})
+
+const {index, entity, field} = defineProps({
+  entity: {type: Object as PropType<EntityCrud>, required: true},
+  field: {type: Object as PropType<ICrudField>, required: true},
+  readonly: {type: Boolean, default: false},
+  index: {type: Number, default: 0},
+})
+
+const name = computed(() => index > 0 ? `${field.name}_${index}` : field.name)
+
+const label = computed(() => {
+  const i18n = `${entity.name}.fields.${field.name}`
+  return te(i18n) ? t(i18n) : field.label
+})
+
+const rules = computed(() => {
+  return entity.rule(field.name) as any
+})
+
+const inputErrors = computed(() =>
+    store.getInputErrors(field.name).map((error: string) => t(te(error) ? t(error) : error))
+)
+
+</script>
+
+<template>
+
+  <div v-if="field && field.type">
+
+    <v-text-field
+        v-if="field.type === 'string'"
+        type="text"
+        :name="name"
+        :label="label"
+        v-model="valueModel"
+        :readonly="readonly"
+        :error-messages="inputErrors"
+        :rules="rules"
+    >
+    </v-text-field>
+
+    <v-text-field
+        v-if="field.type === 'number'"
+        type="number"
+        :name="name"
+        :label="label"
+        v-model="valueModel"
+        :readonly="readonly"
+        :error-messages="inputErrors"
+        :rules="rules"
+    >
+    </v-text-field>
+
+    <v-checkbox
+        v-if="field.type === 'boolean'"
+        :name="name"
+        :label="label"
+        v-model="valueModel"
+        :readonly="readonly"
+        :error-messages="inputErrors"
+        :rules="rules"
+    >
+    </v-checkbox>
+
+
+    <v-date-input
+        v-if="field.type === 'date'"
+        type="text"
+        :name="name"
+        :label="label"
+        v-model="valueModel"
+        :readonly="readonly"
+        :error-messages="inputErrors"
+        prepend-inner-icon="mdi-calendar"
+        prepend-icon=""
+        :rules="rules"
+    />
+
+    <crud-autocomplete
+        v-if="field.type === 'ref'"
+        :entity="entity.getRef(field.ref).instance"
+        :field="field"
+        v-model="valueModel"
+        :label="label"
+        :error-messages="inputErrors"
+        :rules="rules"
+    />
+
+    <v-card v-if="field.type === 'object'" class="mt-3" variant="flat" border>
+
+      <v-card-title class="text-h5">{{ field.label }}</v-card-title>
+      <v-card-text>
+        <crud-form-field
+            v-for="oField in field.objectFields"
+            :entity="entity"
+            :field="oField"
+            v-model="valueModel[oField.name]"
+        ></crud-form-field>
+      </v-card-text>
+
+    </v-card>
+
+    <v-combobox
+        v-if="field.type === 'array.string'"
+        type="text"
+        :name="name"
+        :label="label"
+        v-model="valueModel"
+        :multiple="true"
+        :chips="true"
+        :closable-chips="true"
+        :clearable="true"
+        :readonly="readonly"
+        :error-messages="inputErrors"
+    >
+    </v-combobox>
+
+
+    <crud-autocomplete
+        v-if="field.type === 'array.ref'"
+        :entity="entity.getRef(field.ref).instance"
+        :field="field"
+        v-model="valueModel"
+        :multiple="true"
+        :chips="true"
+        :clearable="true"
+        :label="label"
+        :error-messages="inputErrors"
+    />
+
+
+    <v-combobox
+        v-if="field.type === 'array.number'"
+        type="number"
+        :name="name"
+        :label="label"
+        v-model="valueModel"
+        :multiple="true"
+        :chips="true"
+        :clearable="true"
+        :readonly="readonly"
+        :error-messages="inputErrors"
+    >
+    </v-combobox>
+
+
+    <crud-form-list
+        v-if="field.type === 'array.object'"
+        :entity="entity"
+        :field="field"
+        v-model="valueModel"
+        :readonly="readonly"
+    />
+
+  </div>
+</template>
+
+<style scoped>
+
+</style>

package/src/components/CrudFormList.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import type {PropType} from "vue";
+import type {ICrudField} from "../interfaces/IEntityCrud";
+import CrudFormField from "./CrudFormField.vue";
+import EntityCrud from "@/EntityCrud";
+
+const valueModel = defineModel({type: Array, default: () => []});
+
+const {field} = defineProps({
+  entity: {type: Object as PropType<EntityCrud>, required: true},
+  field: {type: Object as PropType<ICrudField>, required: true},
+  readonly: {type: Boolean, default: false},
+})
+
+function newItem() {
+  return field.objectFields ? field.objectFields.reduce((acc, field) => ({...acc, [field.name]: field.default }), {}) : []
+}
+
+function getField(key: string):ICrudField|undefined {
+  return field.objectFields ? field.objectFields.find(field => field.name === key) : undefined;
+}
+
+function hasField(key: string):boolean {
+  return field.objectFields ? field.objectFields.some(field => field.name === key) : false;
+}
+
+function addItem() {
+  valueModel.value.push(newItem());
+}
+
+function removeItem(index: number) {
+  valueModel.value.splice(index, 1);
+}
+
+</script>
+
+<template>
+  <v-card class="mt-3" variant="flat" border>
+
+    <v-card-title class="text-h5">{{field.label}}</v-card-title>
+    <v-card-text>
+      <v-row>
+        <v-col cols="12" v-for="(item,index) in valueModel" :key="index" class="text-right">
+          <v-row dense align="center">
+            <v-col cols="11">
+              <template v-for="key in Object.keys(item)" :key="key">
+                <crud-form-field
+                    v-if="hasField(key)"
+                    :entity="entity"
+                    :field="getField(key)"
+                    v-model="valueModel[index][key]"
+                    :readonly="readonly"
+                    :index="index"
+                />
+              </template>
+
+            </v-col>
+            <v-col cols="1">
+              <v-btn v-if="!readonly" icon @click="removeItem(index)" small class="text-red text--darken-3">
+                <v-icon>mdi-close</v-icon>
+              </v-btn>
+            </v-col>
+          </v-row>
+          <v-divider></v-divider>
+
+        </v-col>
+        <v-btn  icon @click="addItem" class="text-blue text--darken-3">
+          <v-icon>mdi-plus</v-icon>
+        </v-btn>
+
+      </v-row>
+    </v-card-text>
+
+
+  </v-card>
+
+</template>
+
+<style scoped>
+
+</style>

package/src/components/CrudList.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import type {PropType} from 'vue'
+import {useAuth} from '@drax/identity-vue'
+import EntityCrud from "../EntityCrud";
+import CrudSearch from "./CrudSearch.vue";
+import {useCrud} from "../composables/UseCrud";
+import {useI18n} from "vue-i18n";
+const {t, te} = useI18n()
+const {hasPermission} = useAuth()
+
+const {entity} = defineProps({
+  entity: {type: Object as PropType<EntityCrud>, required: true},
+})
+
+const {loading, itemsPerPage, page, sortBy, search, totalItems, items,
+loadItems} = useCrud(entity)
+
+const actions = [{title: t('action.actions'),key:'actions', sortable: false, align: 'right'}]
+const tHeaders = entity.headers.map(header => ({...header, title: t(`${entity.name}.fields.${header.title}`)}))
+
+const headers = [...tHeaders, ...actions]
+
+
+defineExpose({
+  loadItems
+});
+
+</script>
+
+<template>
+  <v-data-table-server
+    class="border"
+    v-if="hasPermission(entity.permissions.view)"
+    v-model:items-per-page="itemsPerPage"
+    :items-per-page-options="[5, 10, 20, 50]"
+    v-model:page="page"
+    v-model:sort-by="sortBy"
+    :headers="headers"
+    :items="items"
+    :items-length="totalItems"
+    :loading="loading"
+    :search="search"
+    :multi-sort="false"
+    item-value="name"
+    @update:options="loadItems"
+  >
+    <template v-slot:top>
+      <v-toolbar density="compact" >
+        <v-toolbar-title>{{ entity.name }}</v-toolbar-title>
+        <v-spacer></v-spacer>
+        <v-btn v-if="entity.isCreatable" icon="mdi-plus" class="mr-1" variant="text" color="primary" @click="$emit('create')">
+        </v-btn>
+      </v-toolbar>
+
+      <v-card>
+        <v-card-text>
+          <crud-search v-model="search"></crud-search>
+        </v-card-text>
+      </v-card>
+
+    </template>
+
+
+    <template v-for="header in entity.headers" :key="header.key" v-slot:[`item.${header.key}`]="{item, value}">
+    <slot :name="`item.${header.key}`" v-bind="{item, value}" >
+      {{value}}
+    </slot>
+    </template>
+
+
+    <template v-slot:item.actions="{item}">
+      <v-btn v-if="entity.isEditable && hasPermission(entity.permissions.update)"
+             icon="mdi-pencil" variant="text" color="primary"
+             @click="$emit('edit', item)">
+      </v-btn>
+      <v-btn v-if="entity.isDeletable && hasPermission(entity.permissions.delete)"
+             icon="mdi-delete" class="mr-1" variant="text" color="red"
+             @click="$emit('delete', item)">
+      </v-btn>
+    </template>
+
+  </v-data-table-server>
+</template>
+
+<style scoped>
+
+</style>

package/src/components/CrudNotify.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+
+const valueModel = defineModel({type: Boolean, default: false})
+
+defineProps({
+  message: {type: String},
+  color: {type: String, default: 'success' },
+  timeout: {type: Number, default: 3000},
+});
+</script>
+
+<template>
+
+  <v-snackbar v-model="valueModel" :timeout="timeout" :color="color" >
+    {{message}}
+
+    <template v-slot:actions>
+      <v-btn
+        icon="mdi-close"
+        variant="text"
+        @click="valueModel = false"
+      >
+      </v-btn>
+    </template>
+  </v-snackbar>
+
+</template>
+
+<style scoped>
+
+</style>

package/src/components/CrudSearch.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+const model = defineModel<any>()
+</script>
+
+<template>
+  <v-text-field v-model="model" hide-details
+                density="compact" class="mr-2"
+                variant="outlined"
+                append-inner-icon="mdi-magnify"
+                :label="$t('action.search')"
+                single-line clearable @click:clear="() => model = ''"
+  />
+</template>
+
+<style scoped>
+
+</style>

package/src/composables/UseCrud.ts

@@ -0,0 +1,150 @@
+import EntityCrud from "../EntityCrud";
+import type {IDraxPaginateResult} from "@drax/common-share";
+import {useCrudStore} from "../stores/UseCrudStore";
+import {computed} from "vue";
+import type {ICrudField} from "@/interfaces/IEntityCrud";
+
+export function useCrud(entity: EntityCrud) {
+
+  const store = useCrudStore()
+
+  async function loadItems() {
+    store.setLoading(true)
+    try {
+      const r: IDraxPaginateResult<any> = await entity?.provider.paginate({
+        page: store.page,
+        limit: store.itemsPerPage,
+        orderBy: store.sortBy[0]?.key,
+        order: store.sortBy[0]?.order,
+        search: store.search
+      })
+      store.setItems(r.items)
+      store.setTotalItems(r.total)
+    } catch (e) {
+      console.error("Error paginating", e)
+    } finally {
+      store.setLoading(false)
+    }
+  }
+
+  function cast(item: any){
+
+    entity.fields.filter(field => field.type === 'date')
+        .forEach(field => {
+          if(field.type === 'date'){
+            item[field.name] = new Date(item[field.name])
+          }
+        })
+
+    return item
+  }
+
+
+  function onCreate() {
+    store.setOperation("create")
+    store.setForm(entity.form)
+    store.setDialog(true)
+  }
+
+  function onEdit(item: object) {
+    store.setOperation("edit")
+    store.setForm(cast({...item}))
+    store.setDialog(true)
+  }
+
+  function onDelete(item: object) {
+    store.setOperation("delete")
+    store.setForm(cast({...item}))
+    store.setDialog(true)
+  }
+
+  function onCancel() {
+    store.setDialog(false)
+    store.setError("")
+    store.setInputErrors(null)
+  }
+
+  function onSubmit(formData: any) {
+    console.log("formData", formData)
+    store.setInputErrors(null)
+    switch (store.operation) {
+      case "create":
+        doCreate(formData)
+        break
+      case "edit":
+        doUpdate(formData)
+        break
+      case "delete":
+        doDelete(formData)
+        break
+    }
+  }
+
+  async function doCreate(formData: any) {
+    try {
+      await entity?.provider.create(formData)
+      await loadItems()
+      store.setDialog(false)
+      store.showMessage("Entity created successfully!")
+    } catch (e: any) {
+      if(e.inputErrors){
+        store.setInputErrors(e.inputErrors)
+      }
+      store.setError(e.message || "An error occurred while creating the entity")
+      console.error("Error creating entity", e)
+    }
+
+  }
+
+  async function doUpdate(formData: any) {
+    try {
+      await entity?.provider.update(formData._id, formData)
+      await loadItems()
+      store.setDialog(false)
+      store.showMessage("Entity updated successfully!")
+    } catch (e: any) {
+      console.log("inputErrors", e.inputErrors)
+      if(e.inputErrors){
+        store.setInputErrors(e.inputErrors)
+      }
+      store.setError(e.message || "An error occurred while updating the entity")
+      console.error("Error updating entity", e)
+    }
+
+  }
+
+  async function doDelete(formData: any) {
+    try {
+      await entity?.provider.delete(formData._id)
+      await loadItems()
+      store.setDialog(false)
+      store.showMessage("Entity deleted successfully!")
+    } catch (e: any) {
+      store.setError(e.message || "An error occurred while deleting the entity")
+      console.error("Error updating entity", e)
+    }
+
+  }
+
+  const dialog = computed({get(){return store.dialog} , set(value){store.setDialog(value)}})
+  const operation = computed({get(){return store.operation} , set(value){store.setOperation(value)}})
+  const form = computed({get(){return store.form} , set(value){store.setForm(value)}})
+  const formValid = computed({get(){return store.formValid} , set(value){store.setFormValid(value)}})
+  const notify = computed({get(){return store.notify} , set(value){store.setNotify(value)}})
+  const error = computed({get(){return store.error} , set(value){store.setError(value)}})
+  const message = computed({get(){return store.message} , set(value){store.setMessage(value)}})
+  const loading = computed({get(){return store.loading} , set(value){store.setLoading(value)}})
+  const itemsPerPage = computed({get(){return store.itemsPerPage} , set(value){store.setItemsPerPage(value)}})
+  const page = computed({get(){return store.page} , set(value){store.setPage(value)}})
+  const sortBy = computed({get(){return store.sortBy} , set(value){store.setSortBy(value)}})
+  const search = computed({get(){return store.search} , set(value){store.setSearch(value)}})
+  const totalItems = computed({get(){return store.totalItems} , set(value){store.setTotalItems(value)}})
+  const items = computed({get(){return store.items} , set(value){store.setItems(value)}})
+
+  return {
+    loadItems, onCreate, onEdit, onDelete, onCancel, onSubmit,
+    operation, dialog, form, notify, error, message,
+    loading, itemsPerPage, page, sortBy, search, totalItems, items
+  }
+
+}

package/src/index.ts

@@ -0,0 +1,29 @@
+import Crud from "./components/Crud.vue";
+import CrudDialog from "./components/CrudDialog.vue";
+import CrudForm from "./components/CrudForm.vue";
+import CrudFormField from "./components/CrudFormField.vue";
+import CrudFormList from "./components/CrudFormList.vue";
+import CrudList from "./components/CrudList.vue";
+import CrudNotify from "./components/CrudNotify.vue";
+import CrudSearch from "./components/CrudSearch.vue";
+import {useCrudStore} from "./stores/UseCrudStore";
+import {useCrud} from "./composables/UseCrud";
+import {EntityCrud} from "./EntityCrud";
+
+import type {IFields, ICrudForm, ICrudHeaders, ICrudPermissions, ICrudRules} from "./interfaces/IEntityCrud";
+export type {IFields, ICrudForm, ICrudHeaders, ICrudPermissions, ICrudRules}
+
+export {
+    Crud,
+    CrudDialog,
+    CrudForm,
+    CrudFormField,
+    CrudFormList,
+    CrudList,
+    CrudNotify,
+    CrudSearch,
+    useCrud,
+    useCrudStore,
+    EntityCrud
+
+}

package/src/interfaces/IEntityCrud.ts

@@ -0,0 +1,33 @@
+interface ICrudHeaders {
+  title: string
+  key: string
+}
+
+interface ICrudRules {
+  [key: string]: Array<Function>
+}
+
+interface ICrudField {
+  name: string
+  type: 'string' | 'number' | 'boolean' | 'date' | 'object' | 'ref' | 'array.string' | 'array.number' | 'array.object' | 'array.ref'
+  ref?: string
+  objectFields?: ICrudField[]
+  label: string,
+  default: any
+}
+
+interface ICrudForm {
+  [key: string]: string | number | boolean | Date | null
+}
+
+type IFields = ICrudField[]
+
+interface ICrudPermissions {
+  manage: string
+  view: string
+  create: string
+  update: string
+  delete: string
+}
+
+export type {ICrudHeaders, ICrudRules, ICrudField, IFields, ICrudForm, ICrudPermissions}

package/src/interfaces/TOperation.ts

@@ -0,0 +1,6 @@
+type TOperation = "create" | "edit" | "delete" | null
+
+
+export type {
+  TOperation
+}

package/src/stores/UseCrudStore.ts

@@ -0,0 +1,86 @@
+import {defineStore} from "pinia";
+import type {TOperation} from "../interfaces/TOperation";
+
+export const useCrudStore = defineStore('CrudStore', {
+    state: () => (
+        {
+            operation: null as TOperation,
+            dialog: false as boolean,
+            form: {} as any,
+            formValid: {} as any,
+            notify: false as boolean,
+            error: '' as string,
+            message: '' as string,
+            items: [] as any[],
+            totalItems: 0 as number,
+            itemsPerPage: 5 as number,
+            page: 1 as number,
+            search: '' as string,
+            sortBy: [] as any[],
+            loading: false,
+            inputErrors: null
+        }
+    ),
+    getters:{
+      getInputErrors(state: any) {
+          return (fieldName:string) => {
+              if (state.inputErrors && state.inputErrors[fieldName]) {
+                  return state.inputErrors[fieldName]
+              }
+              return []
+          }
+      }
+    },
+    actions: {
+        setOperation(operation: TOperation) {
+            this.operation = operation
+        },
+        setDialog(dialog: boolean) {
+            this.dialog = dialog
+        },
+        setForm(form: any) {
+            this.form = form
+        },
+        setFormValid(formValid: any) {
+            this.formValid = formValid
+        },
+        setError(error: string) {
+            this.error = error
+        },
+        showMessage(message: string) {
+            this.message = message
+            this.notify = true
+        },
+        setNotify(notify: boolean) {
+            this.notify = notify
+        },
+        setMessage(message: string) {
+            this.message = message
+        },
+        setItems(items: any[]) {
+            this.items = items
+        },
+        setTotalItems(totalItems: number) {
+            this.totalItems = totalItems
+        },
+        setItemsPerPage(itemsPerPage: number) {
+            this.itemsPerPage = itemsPerPage
+        },
+        setPage(page: number) {
+            this.page = page
+        },
+        setSearch(search: string) {
+            this.search = search
+        },
+        setSortBy(sortBy: any[]) {
+            this.sortBy = sortBy
+        },
+        setLoading(loading: boolean) {
+            this.loading = loading
+        },
+        setInputErrors(inputErrors: any) {
+            this.inputErrors = inputErrors
+        }
+    }
+
+})