@drax/crud-vue 0.7.12 → 0.7.13

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.7.12",
+  "version": "0.7.13",
   "type": "module",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -26,7 +26,7 @@
   "dependencies": {
     "@drax/common-front": "^0.7.4",
     "@drax/crud-front": "^0.7.0",
-    "@drax/crud-share": "^0.7.12",
+    "@drax/crud-share": "^0.7.13",
     "@drax/media-vue": "^0.7.5"
   },
   "peerDependencies": {
@@ -64,5 +64,5 @@
     "vue-tsc": "^2.0.11",
     "vuetify": "^3.7.1"
   },
-  "gitHead": "8e4996b71ddecc3d32e2c78c380115cc901dc994"
+  "gitHead": "5084879792a4fccc27f7fa0e7ac08950697454b8"
 }

package/src/components/CrudFilters.vue

@@ -1,18 +1,23 @@
 <script setup lang="ts">
-import type {PropType} from "vue";
+import {computed, type PropType} from "vue";
 import CrudFormField from "./CrudFormField.vue";
-import type {IEntityCrud} from "@drax/crud-share";
+import type {IEntityCrud, IEntityCrudFilter} from "@drax/crud-share";
 import {useI18n} from "vue-i18n";
+import {useAuth} from "@drax/identity-vue";
 
 const {t} = useI18n()
 const valueModel = defineModel({type: [Object]})
-
+const {hasPermission} = useAuth()
 
 const {entity} = defineProps({
   entity: {type: Object as PropType<IEntityCrud>, required: true},
   actions: {type: Boolean, default: false},
 })
 
+const aFields = computed(() => {
+  return entity.filters.filter((field:IEntityCrudFilter) => !field.permission || hasPermission(field.permission))
+})
+
 
 async function filter() {
   emit('filter')
@@ -29,9 +34,14 @@ const emit = defineEmits(['filter', 'clear','updateValue'])
 
 <template>
   <v-card flat >
-        <v-row dense class="mt-1" justify="space-between">
-          <v-col v-for="(filter,index) in entity.filters" :key="filter.name"
-                 cols="12" sm="6" md="4"
+        <v-row dense class="mt-1">
+          <v-col v-for="(filter,index) in aFields"
+                 :key="filter.name"
+                 :cols="filter.cols ? filter.cols : 12"
+                 :sm="filter.sm ? filter.sm : 6"
+                 :md="filter.md ? filter.md : 6"
+                 :lg="filter.lg ? filter.lg : 4"
+                 :xl="filter.xl ? filter.xl : 3"
           >
             <crud-form-field
                 :field="filter"

package/src/components/CrudForm.vue

@@ -4,7 +4,7 @@ import type {IEntityCrud, IEntityCrudField, IEntityCrudOperation} from "@drax/cr
 import {useFormUtils} from "../composables/UseFormUtils";
 import CrudFormField from "./CrudFormField.vue";
 import {computed, defineEmits, defineModel, defineProps, ref} from "vue";
-import type { PropType} from "vue";
+import type {PropType} from "vue";
 import {useCrudStore} from "../stores/UseCrudStore";
 import {useAuth} from '@drax/identity-vue'
 
@@ -27,13 +27,13 @@ const store = useCrudStore()
 const formRef = ref()
 
 const fields = computed(() => {
-  if(operation === 'create') {
+  if (operation === 'create') {
     return entity.createFields
-  }else if(operation === 'edit') {
+  } else if (operation === 'edit') {
     return entity.updateFields
-  }else if(operation === 'delete') {
+  } else if (operation === 'delete') {
     return entity.deleteFields
-  }else if(operation === 'view') {
+  } else if (operation === 'view') {
     return entity.viewFields
   }
   return []
@@ -41,22 +41,22 @@ const fields = computed(() => {
 
 
 const aFields = computed(() => {
-  return fields.value.filter((field:IEntityCrudField) => !field.permission || hasPermission(field.permission))
+  return fields.value.filter((field: IEntityCrudField) => !field.permission || hasPermission(field.permission))
 })
 
 async function submit() {
   store.resetErrors()
 
-  if(operation === 'delete') {
-    emit('submit',valueModel.value)
+  if (operation === 'delete') {
+    emit('submit', valueModel.value)
     return
   }
 
   const {valid, errors} = await formRef.value.validate()
 
-  if(valid) {
-    emit('submit',valueModel.value)
-  }else{
+  if (valid) {
+    emit('submit', valueModel.value)
+  } else {
     console.log('Invalid form', errors)
   }
 }
@@ -65,7 +65,7 @@ function cancel() {
   emit('cancel')
 }
 
-const  {
+const {
   variant, submitColor, readonly
 } = useFormUtils(operation)
 
@@ -73,30 +73,40 @@ const  {
 </script>
 
 <template>
-  <v-form ref="formRef"  @submit.prevent >
+  <v-form ref="formRef" @submit.prevent>
     <v-card flat>
 
-      <v-card-subtitle v-if="valueModel._id">ID: {{valueModel._id}}</v-card-subtitle>
+      <v-card-subtitle v-if="valueModel._id">ID: {{ valueModel._id }}</v-card-subtitle>
 
       <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 aFields" :key="field.name">
-          <crud-form-field
-              :field="field"
-              :entity="entity"
-              v-model="valueModel[field.name]"
-              :clearable="false"
-              :readonly="readonly"
-              :variant="variant"
-              :prepend-inner-icon="field?.prependInnerIcon"
-              :prepend-icon="field?.prependIcon"
-              :append-icon="field?.appendIcon"
-              :append-inner-icon="field?.appendInnerIcon"
-          />
-        </template>
+        <v-row>
+          <v-col
+              v-for="field in aFields"
+              :key="field.name"
+              :cols="field.cols ? field.cols : 12"
+              :sm="field.sm ? field.sm : 12"
+              :md="field.md ? field.md : 12"
+              :lg="field.lg ? field.lg : 12"
+              :xl="field.xl ? field.xl : 12"
+          >
+            <crud-form-field
+                :field="field"
+                :entity="entity"
+                v-model="valueModel[field.name]"
+                :clearable="false"
+                :readonly="readonly"
+                :variant="variant"
+                :prepend-inner-icon="field?.prependInnerIcon"
+                :prepend-icon="field?.prependIcon"
+                :append-icon="field?.appendIcon"
+                :append-inner-icon="field?.appendInnerIcon"
+            />
+          </v-col>
+        </v-row>
       </v-card-text>
 
       <v-card-actions>