lkt-table 1.2.13 → 1.2.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lkt-table",
-  "version": "1.2.13",
+  "version": "1.2.15",
   "description": "",
   "keywords": [
     "lkt",
@@ -29,7 +29,8 @@
   "license": "MIT",
   "sideEffects": false,
   "scripts": {
-    "build": "rm -rf dist/*; vue-tsc --declaration --emitDeclarationOnly; vite build; tsc --project tsconfig.build.json; cp build/* dist/"
+    "build": "vue-tsc --declaration --emitDeclarationOnly; vite build; tsc --project tsconfig.build.json; cp build/* dist/",
+    "rebuild": "rm -rf dist/*; vue-tsc --declaration --emitDeclarationOnly; vite build; tsc --project tsconfig.build.json; cp build/* dist/"
   },
   "author": "Antonio Ibáñez",
   "devDependencies": {

package/src/lib-components/LktTable.vue

@@ -15,7 +15,7 @@ import Sortable from 'sortablejs';
 import TableHeader from "../components/TableHeader.vue";
 import {__} from "lkt-i18n";
 
-const emit = defineEmits(['update:modelValue', 'sort', 'click', 'save', 'error', 'before-save', 'read-response']);
+const emit = defineEmits(['update:modelValue', 'sort', 'click', 'save', 'error', 'before-save', 'read-response', 'click-create']);
 
 const slots = useSlots();
 
@@ -62,6 +62,8 @@ const props = withDefaults(defineProps<{
     editModeText?: string
     switchEditionEnabled?: boolean
     canCreate?: boolean
+    canCreateWithoutEdition?: boolean
+    canEditButton?: boolean
     canDrop?: boolean
     dropConfirm?: string
     dropResource?: string
@@ -114,6 +116,8 @@ const props = withDefaults(defineProps<{
     editModeText: 'Edit mode',
     switchEditionEnabled: false,
     canCreate: false,
+    canCreateWithoutEdition: false,
+    canEditButton: false,
     canDrop: false,
     dropConfirm: '',
     dropResource: '',
@@ -224,6 +228,7 @@ const emptyColumns = computed(() => {
     }),
     showEditionButtons = computed(() => {
         // if (hasCreatePerm.value || hasUpdatePerm.value || hasDropPerm.value)
+        if (computedDisplayCreateButton.value) return true;
         if (props.switchEditionEnabled) return true;
         return showSaveButton.value || (editModeEnabled.value && props.canCreate);
     }),
@@ -345,15 +350,19 @@ const getItemByEvent = (e: any) => {
         return true;
     },
     onClickAddItem = () => {
-        if (typeof props.newValueGenerator === 'function') {
-            let newValue = props.newValueGenerator();
+        if (!props.canCreateWithoutEdition) {
+            if (typeof props.newValueGenerator === 'function') {
+                let newValue = props.newValueGenerator();
 
-            if (typeof newValue === 'object') {
-                Items.value.push(newValue);
-                return;
+                if (typeof newValue === 'object') {
+                    Items.value.push(newValue);
+                    return;
+                }
             }
+            Items.value.push({});
+        } else {
+            emit('click-create');
         }
-        Items.value.push({});
     },
     onButtonLoading = () => {
         loading.value = true;
@@ -433,6 +442,10 @@ const getItemByEvent = (e: any) => {
     createEnabled = computed(() => {
         if (typeof props.createEnabledValidator === 'function') return props.createEnabledValidator({items: Items.value});
         return true;
+    }),
+    computedDisplayCreateButton = computed(() => {
+        if (!hasCreatePerm.value) return false;
+        return props.canCreateWithoutEdition || (props.canCreate && editModeEnabled.value);
     });
 
 onMounted(() => {
@@ -503,7 +516,7 @@ defineExpose({
                 </lkt-button>
 
                 <create-button
-                    v-if="canCreate && hasCreatePerm && editModeEnabled && Items.length >= requiredItemsForTopCreate"
+                    v-if="computedDisplayCreateButton && Items.length >= requiredItemsForTopCreate"
                     :disabled="!createEnabled"
                     :text="createText"
                     :icon="createIcon"
@@ -552,7 +565,7 @@ defineExpose({
                             class="lkt-table-col-drop"
                         />
                         <th
-                            v-if="hasUpdatePerm && editModeEnabled"
+                            v-if="canEditButton && hasUpdatePerm && editModeEnabled"
                             class="lkt-table-col-edit"
                         />
                     </tr>
@@ -579,7 +592,7 @@ defineExpose({
                         :drop-resource="dropResource"
                         :drop-text="dropText"
                         :drop-icon="dropIcon"
-                        :can-edit="hasUpdatePerm && editModeEnabled"
+                        :can-edit="canEditButton && hasUpdatePerm && editModeEnabled"
                         :edit-text="editText"
                         :edit-icon="editIcon"
                         :edit-link="editLink"
@@ -656,9 +669,9 @@ defineExpose({
                 {{ noResultsText }}
             </div>
 
-            <div v-if="canCreate && hasCreatePerm && editModeEnabled" class="lkt-table-page-buttons lkt-table-page-buttons-bottom">
+            <div v-if="computedDisplayCreateButton" class="lkt-table-page-buttons lkt-table-page-buttons-bottom">
                 <create-button
-                    v-if="canCreate && hasCreatePerm && editModeEnabled && Items.length >= requiredItemsForBottomCreate"
+                    v-if="computedDisplayCreateButton && Items.length >= requiredItemsForBottomCreate"
                     :disabled="!createEnabled"
                     :text="createText"
                     :icon="createIcon"