@adminforth/i18n 1.1.3-next.3 → 1.1.3-next.4

package/build.log

@@ -7,10 +7,12 @@ custom/
 custom/LanguageEveryPageLoader.vue
 custom/LanguageInUserMenu.vue
 custom/LanguageUnderLogin.vue
+custom/ListCell.vue
+custom/SingleMultiInput.vue
 custom/langCommon.ts
 custom/package-lock.json
 custom/package.json
 custom/tsconfig.json
 
-sent 9,498 bytes  received 153 bytes  19,302.00 bytes/sec
-total size is 8,926  speedup is 0.92
+sent 12,536 bytes  received 191 bytes  25,454.00 bytes/sec
+total size is 11,814  speedup is 0.93

package/custom/ListCell.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="text-sm text-gray-900 dark:text-white min-w-32">
+    {{ limitedText }}
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed  } from 'vue';
+import { AdminForthResourceColumnCommon, AdminForthResourceCommon, AdminUser } from '@/types/Common';
+
+
+const limitedText = computed(() => {
+  const text = props.record[props.column.name];
+  return text?.length > 50 ? text.slice(0, 50) + '...' : text;
+});
+
+const props = defineProps<{
+  column: AdminForthResourceColumnCommon;
+  record: any;
+  meta: any;
+  resource: AdminForthResourceCommon;
+  adminUser: AdminUser;
+}>();
+
+</script>

package/custom/SingleMultiInput.vue

@@ -0,0 +1,76 @@
+<template>
+  <Input 
+    ref="input"
+    v-if="shortValue"
+    class="w-full"
+    :modelValue="props.record[props.column.name]"
+    :disabled="props.column.editReadonly"
+    @update:modelValue="($event) => emit('update:value', $event)" />
+  <textarea 
+    v-else
+    ref="textarea"
+    :disabled="props.column.editReadonly"
+    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5
+      dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white focus:ring-lightPrimary focus:border-lightPrimary dark:focus:ring-darkPrimary dark:focus:border-darkPrimary"
+    :value="props.record[props.column.name]" 
+    @input="($event) => { autoResizeTextArea(); emit('update:value', $event.target.value) }" />
+
+</template>
+
+<script setup lang="ts">
+import { Input } from "@/afcl";
+import type {
+  AdminForthResourceColumnCommon,
+  AdminForthResourceCommon,
+  AdminUser,
+} from "@/types/Common";
+import { computed, defineProps, defineEmits, type Ref, watch, nextTick, ref, onMounted } from "vue";
+
+const shortValue: Ref<boolean> = computed(() => (props.record[props.column.name]?.length || 0) < 50);
+
+const props = defineProps<{
+  column: AdminForthResourceColumnCommon;
+  record: any;
+  meta: any;
+  resource: AdminForthResourceCommon;
+  adminUser: AdminUser;
+}>();
+
+const emit = defineEmits(["update:value"]);
+
+const input: Ref<HTMLInputElement | HTMLTextAreaElement | null> = ref(null);
+const textarea: Ref<HTMLInputElement | HTMLTextAreaElement | null> = ref(null);
+
+// Auto resize function
+const autoResizeTextArea = () => {
+  // Use nextTick to ensure the DOM update is done before measuring
+  nextTick(() => {
+    if (!textarea.value) return
+
+    // Reset the height to shrink if content is removed
+    textarea.value.style.height = 'auto'
+    // Set it to the scrollHeight to make it grow
+    textarea.value.style.height = textarea.value.scrollHeight + 3 + 'px'
+  })
+}
+
+watch(() => shortValue.value, async () => {
+  await nextTick();
+  if (shortValue.value) {
+    input.value?.focus();
+  } else {
+    textarea.value?.focus();
+    await nextTick();
+    autoResizeTextArea();
+  }
+});
+
+
+onMounted(async () => {
+  if (!shortValue.value) {
+    await nextTick();
+    autoResizeTextArea();
+  }
+});
+</script>
+

package/custom/tsconfig.json

@@ -4,11 +4,11 @@
     "paths": {
       "@/*": [
         // "node_modules/adminforth/dist/spa/src/*"
-        "../../../spa/src/*"
+        "../../../adminforth/spa/src/*"
       ],
       "*": [
         // "node_modules/adminforth/dist/spa/node_modules/*"
-        "../../../spa/node_modules/*"
+        "../../../adminforth/spa/node_modules/*"
       ],
       "@@/*": [
         // "node_modules/adminforth/dist/spa/src/*"

package/dist/custom/ListCell.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="text-sm text-gray-900 dark:text-white min-w-32">
+    {{ limitedText }}
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed  } from 'vue';
+import { AdminForthResourceColumnCommon, AdminForthResourceCommon, AdminUser } from '@/types/Common';
+
+
+const limitedText = computed(() => {
+  const text = props.record[props.column.name];
+  return text?.length > 50 ? text.slice(0, 50) + '...' : text;
+});
+
+const props = defineProps<{
+  column: AdminForthResourceColumnCommon;
+  record: any;
+  meta: any;
+  resource: AdminForthResourceCommon;
+  adminUser: AdminUser;
+}>();
+
+</script>

package/dist/custom/SingleMultiInput.vue

@@ -0,0 +1,76 @@
+<template>
+  <Input 
+    ref="input"
+    v-if="shortValue"
+    class="w-full"
+    :modelValue="props.record[props.column.name]"
+    :disabled="props.column.editReadonly"
+    @update:modelValue="($event) => emit('update:value', $event)" />
+  <textarea 
+    v-else
+    ref="textarea"
+    :disabled="props.column.editReadonly"
+    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5
+      dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white focus:ring-lightPrimary focus:border-lightPrimary dark:focus:ring-darkPrimary dark:focus:border-darkPrimary"
+    :value="props.record[props.column.name]" 
+    @input="($event) => { autoResizeTextArea(); emit('update:value', $event.target.value) }" />
+
+</template>
+
+<script setup lang="ts">
+import { Input } from "@/afcl";
+import type {
+  AdminForthResourceColumnCommon,
+  AdminForthResourceCommon,
+  AdminUser,
+} from "@/types/Common";
+import { computed, defineProps, defineEmits, type Ref, watch, nextTick, ref, onMounted } from "vue";
+
+const shortValue: Ref<boolean> = computed(() => (props.record[props.column.name]?.length || 0) < 50);
+
+const props = defineProps<{
+  column: AdminForthResourceColumnCommon;
+  record: any;
+  meta: any;
+  resource: AdminForthResourceCommon;
+  adminUser: AdminUser;
+}>();
+
+const emit = defineEmits(["update:value"]);
+
+const input: Ref<HTMLInputElement | HTMLTextAreaElement | null> = ref(null);
+const textarea: Ref<HTMLInputElement | HTMLTextAreaElement | null> = ref(null);
+
+// Auto resize function
+const autoResizeTextArea = () => {
+  // Use nextTick to ensure the DOM update is done before measuring
+  nextTick(() => {
+    if (!textarea.value) return
+
+    // Reset the height to shrink if content is removed
+    textarea.value.style.height = 'auto'
+    // Set it to the scrollHeight to make it grow
+    textarea.value.style.height = textarea.value.scrollHeight + 3 + 'px'
+  })
+}
+
+watch(() => shortValue.value, async () => {
+  await nextTick();
+  if (shortValue.value) {
+    input.value?.focus();
+  } else {
+    textarea.value?.focus();
+    await nextTick();
+    autoResizeTextArea();
+  }
+});
+
+
+onMounted(async () => {
+  if (!shortValue.value) {
+    await nextTick();
+    autoResizeTextArea();
+  }
+});
+</script>
+

package/dist/custom/tsconfig.json

@@ -4,11 +4,11 @@
     "paths": {
       "@/*": [
         // "node_modules/adminforth/dist/spa/src/*"
-        "../../../spa/src/*"
+        "../../../adminforth/spa/src/*"
       ],
       "*": [
         // "node_modules/adminforth/dist/spa/node_modules/*"
-        "../../../spa/node_modules/*"
+        "../../../adminforth/spa/node_modules/*"
       ],
       "@@/*": [
         // "node_modules/adminforth/dist/spa/src/*"

package/dist/index.js

@@ -150,6 +150,18 @@ export default class I18nPlugin extends AdminForthPlugin {
                     throw new Error(`Field ${this.trFieldNames[lang]} not found for storing translation for language ${lang}
            in resource ${resourceConfig.resourceId}, consider adding it to columns or change trFieldNames option to remap it to existing column`);
                 }
+                column.components = column.components || {};
+                // set edit and create custom component - SingleMultiInput.vue
+                column.components.edit = {
+                    file: this.componentPath('SingleMultiInput.vue'),
+                };
+                column.components.create = {
+                    file: this.componentPath('SingleMultiInput.vue'),
+                };
+                // set ListCell for list
+                column.components.list = {
+                    file: this.componentPath('ListCell.vue'),
+                };
             }
             this.enFieldName = this.trFieldNames['en'] || 'en_string';
             this.fullCompleatedFieldValue = this.options.supportedLanguages.reduce((acc, lang) => {
@@ -167,6 +179,16 @@ export default class I18nPlugin extends AdminForthPlugin {
             if (!enColumn) {
                 throw new Error(`Field ${this.enFieldName} not found column to store english original string in resource ${resourceConfig.resourceId}`);
             }
+            enColumn.components = enColumn.components || {};
+            enColumn.components.edit = {
+                file: this.componentPath('SingleMultiInput.vue'),
+            };
+            enColumn.components.create = {
+                file: this.componentPath('SingleMultiInput.vue'),
+            };
+            enColumn.components.list = {
+                file: this.componentPath('ListCell.vue'),
+            };
             enColumn.editReadonly = true;
             // if sourceFieldName defined, check it exists
             if (this.options.sourceFieldName) {

package/index.ts

@@ -165,6 +165,21 @@ export default class I18nPlugin extends AdminForthPlugin {
         throw new Error(`Field ${this.trFieldNames[lang]} not found for storing translation for language ${lang}
            in resource ${resourceConfig.resourceId}, consider adding it to columns or change trFieldNames option to remap it to existing column`);
       }
+
+      column.components = column.components || {};
+      
+      // set edit and create custom component - SingleMultiInput.vue
+      column.components.edit = {
+        file: this.componentPath('SingleMultiInput.vue'),
+      };
+      column.components.create = {
+        file: this.componentPath('SingleMultiInput.vue'),
+      };
+
+      // set ListCell for list
+      column.components.list = {
+        file: this.componentPath('ListCell.vue'),
+      };
     }
 
     this.enFieldName = this.trFieldNames['en'] || 'en_string';
@@ -186,6 +201,16 @@ export default class I18nPlugin extends AdminForthPlugin {
       throw new Error(`Field ${this.enFieldName} not found column to store english original string in resource ${resourceConfig.resourceId}`);
     }
 
+    enColumn.components = enColumn.components || {};
+    enColumn.components.edit = {
+      file: this.componentPath('SingleMultiInput.vue'),
+    };
+    enColumn.components.create = {
+      file: this.componentPath('SingleMultiInput.vue'),
+    };
+    enColumn.components.list = {
+      file: this.componentPath('ListCell.vue'),
+    };
     enColumn.editReadonly = true;
 
     // if sourceFieldName defined, check it exists

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adminforth/i18n",
-  "version": "1.1.3-next.3",
+  "version": "1.1.3-next.4",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "type": "module",