@adminforth/list-in-place-edit 1.0.0 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/build.log +2 -2
  2. package/custom/InPlaceEdit.vue +17 -5
  3. package/dist/custom/InPlaceEdit.vue +17 -5
  4. package/package.json +3 -2
package/build.log CHANGED
@@ -7,5 +7,5 @@ custom/
7
7
  custom/InPlaceEdit.vue
8
8
  custom/tsconfig.json
9
9
 
10
- sent 4,900 bytes received 58 bytes 9,916.00 bytes/sec
11
- total size is 4,685 speedup is 0.94
10
+ sent 5,343 bytes received 58 bytes 10,802.00 bytes/sec
11
+ total size is 5,128 speedup is 0.95
package/custom/InPlaceEdit.vue CHANGED
@@ -13,9 +13,10 @@
13
13
  </div>
14
14
 
15
15
  <!-- Edit mode -->
16
- <div v-else class="flex items-center min-w-full max-w-full gap-2">
16
+ <div v-else class="flex items-center gap-2 min-w-[200px]">
17
17
  <ColumnValueInputWrapper
18
18
  ref="input"
19
+ class="flex-grow"
19
20
  :source="'edit'"
20
21
  :column="column"
21
22
  :currentValues="currentValues"
@@ -27,8 +28,11 @@
27
28
  <div class="flex gap-1">
28
29
  <button
29
30
  @click="saveEdit"
30
- :disabled="saving"
31
- class="text-green-600 hover:text-green-700 dark:text-green-500 dark:hover:text-green-400"
31
+ :disabled="!isChanged || saving"
32
+ :class="[
33
+ 'text-green-600 dark:text-green-500 hover:text-green-700 dark:hover:text-green-400',
34
+ (!isChanged || saving) ? 'opacity-50 cursor-not-allowed pointer-events-none' : ''
35
+ ]"
32
36
  >
33
37
  <IconCheckOutline class="w-5 h-5" />
34
38
  </button>
@@ -45,13 +49,15 @@
45
49
  </template>
46
50
 
47
51
  <script setup lang="ts">
48
- import { ref } from 'vue';
52
+ import { ref, computed } from 'vue';
49
53
  import { IconPenSolid, IconCheckOutline, IconXOutline } from '@iconify-prerendered/vue-flowbite';
50
54
  import { callAdminForthApi } from '@/utils';
51
55
  import { showErrorTost, showSuccesTost } from '@/composables/useFrontendApi';
52
56
  import ValueRenderer from '@/components/ValueRenderer.vue';
53
57
  import ColumnValueInputWrapper from '@/components/ColumnValueInputWrapper.vue';
58
+ import { useI18n } from 'vue-i18n';
54
59
 
60
+ const { t } = useI18n();
55
61
  const props = defineProps(['column', 'record', 'resource', 'adminUser', 'meta']);
56
62
  const isEditing = ref(false);
57
63
  const editValue = ref(null);
@@ -61,6 +67,12 @@ const columnOptions = ref({});
61
67
  const mode = ref('edit');
62
68
  const currentValues = ref({});
63
69
  const unmasked = ref({});
70
+ const isChanged = computed(() => {
71
+ const original = props.record[props.column.name];
72
+ const current = currentValues.value[props.column.name];
73
+
74
+ return JSON.stringify(original) !== JSON.stringify(current);
75
+ });
64
76
 
65
77
  function startEdit() {
66
78
  const value = props.record[props.column.name];
@@ -127,7 +139,7 @@ async function saveEdit() {
127
139
  return;
128
140
  }
129
141
 
130
- showSuccesTost('Field updated successfully');
142
+ showSuccesTost(t('Field updated successfully'));
131
143
  props.record[props.column.name] = currentValues.value[props.column.name];
132
144
  isEditing.value = false;
133
145
  } finally {
package/dist/custom/InPlaceEdit.vue CHANGED
@@ -13,9 +13,10 @@
13
13
  </div>
14
14
 
15
15
  <!-- Edit mode -->
16
- <div v-else class="flex items-center min-w-full max-w-full gap-2">
16
+ <div v-else class="flex items-center gap-2 min-w-[200px]">
17
17
  <ColumnValueInputWrapper
18
18
  ref="input"
19
+ class="flex-grow"
19
20
  :source="'edit'"
20
21
  :column="column"
21
22
  :currentValues="currentValues"
@@ -27,8 +28,11 @@
27
28
  <div class="flex gap-1">
28
29
  <button
29
30
  @click="saveEdit"
30
- :disabled="saving"
31
- class="text-green-600 hover:text-green-700 dark:text-green-500 dark:hover:text-green-400"
31
+ :disabled="!isChanged || saving"
32
+ :class="[
33
+ 'text-green-600 dark:text-green-500 hover:text-green-700 dark:hover:text-green-400',
34
+ (!isChanged || saving) ? 'opacity-50 cursor-not-allowed pointer-events-none' : ''
35
+ ]"
32
36
  >
33
37
  <IconCheckOutline class="w-5 h-5" />
34
38
  </button>
@@ -45,13 +49,15 @@
45
49
  </template>
46
50
 
47
51
  <script setup lang="ts">
48
- import { ref } from 'vue';
52
+ import { ref, computed } from 'vue';
49
53
  import { IconPenSolid, IconCheckOutline, IconXOutline } from '@iconify-prerendered/vue-flowbite';
50
54
  import { callAdminForthApi } from '@/utils';
51
55
  import { showErrorTost, showSuccesTost } from '@/composables/useFrontendApi';
52
56
  import ValueRenderer from '@/components/ValueRenderer.vue';
53
57
  import ColumnValueInputWrapper from '@/components/ColumnValueInputWrapper.vue';
58
+ import { useI18n } from 'vue-i18n';
54
59
 
60
+ const { t } = useI18n();
55
61
  const props = defineProps(['column', 'record', 'resource', 'adminUser', 'meta']);
56
62
  const isEditing = ref(false);
57
63
  const editValue = ref(null);
@@ -61,6 +67,12 @@ const columnOptions = ref({});
61
67
  const mode = ref('edit');
62
68
  const currentValues = ref({});
63
69
  const unmasked = ref({});
70
+ const isChanged = computed(() => {
71
+ const original = props.record[props.column.name];
72
+ const current = currentValues.value[props.column.name];
73
+
74
+ return JSON.stringify(original) !== JSON.stringify(current);
75
+ });
64
76
 
65
77
  function startEdit() {
66
78
  const value = props.record[props.column.name];
@@ -127,7 +139,7 @@ async function saveEdit() {
127
139
  return;
128
140
  }
129
141
 
130
- showSuccesTost('Field updated successfully');
142
+ showSuccesTost(t('Field updated successfully'));
131
143
  props.record[props.column.name] = currentValues.value[props.column.name];
132
144
  isEditing.value = false;
133
145
  } finally {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@adminforth/list-in-place-edit",
3
- "version": "1.0.0",
3
+ "version": "1.0.2",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "type": "module",
@@ -28,7 +28,8 @@
28
28
  "url": "https://github.com/devforth/adminforth-list-in-place-edit"
29
29
  },
30
30
  "dependencies": {
31
- "adminforth": "latest"
31
+ "adminforth": "latest",
32
+ "vue-i18n": "^11.1.3"
32
33
  },
33
34
  "release": {
34
35
  "plugins": [