fix: add isIos param in corestore and update textarea

Author: yaroslav8765

adminforth/spa/src/afcl/Input.vue

@@ -17,7 +17,7 @@
       aria-describedby="helper-text-explanation"
       class="afcl-input  inline-flex bg-lightInputBackground border border-lightInputBorder rounded-0 focus:ring-lightPrimary focus:border-lightPrimary dark:focus:ring-darkPrimary dark:focus:border-darkPrimary 
       blue-500 focus:border-blue-500 block w-20 p-2.5 dark:bg-darkInputBackground dark:border-darkInputBorder placeholder-lightInputPlaceholderText dark:placeholder-darkInputPlaceholderText dark:text-darkInputText translate-y-0"
-      :class="{'rounded-l-md': !$slots.prefix && !prefix, 'rounded-r-md': !$slots.suffix && !suffix, 'w-full': fullWidth, 'text-base': isIOSDevice, 'text-sm': !isIOSDevice }"
+      :class="{'rounded-l-md': !$slots.prefix && !prefix, 'rounded-r-md': !$slots.suffix && !suffix, 'w-full': fullWidth, 'text-base': isIos, 'text-sm': !isIos }"
       :disabled="readonly"
     >
 
@@ -36,7 +36,10 @@
 <script setup lang="ts">
 
 import { ref } from 'vue';
-const isIOSDevice = isIOS();
+import { useCoreStore } from '@/stores/core';
+
+const coreStore = useCoreStore();
+const isIos = coreStore.isIos;
 
 const props = defineProps<{
   type: string,
@@ -53,12 +56,5 @@ defineExpose({
   focus: () => input.value?.focus(),
 });
 
-function isIOS() {
-  return (
-    /iPad|iPhone|iPod/.test(navigator.userAgent) ||
-    (navigator.userAgent.includes('Mac') && 'ontouchend' in document)
-  )
-}
-
 </script>
 

adminforth/spa/src/afcl/Textarea.vue

@@ -1,7 +1,8 @@
 <template>
   <textarea
     ref="input"
-    class="bg-lightInputBackground border border-lightInputBorder text-lightInputText placeholder-lightInputPlaceholderText text-sm rounded-lg block w-full p-2.5 dark:bg-darkInputBackground dark:border-darkInputBorder dark:placeholder-darkInputPlaceholderText dark:text-darkInputText dark:border-darkInputBorder focus:ring-lightInputFocusRing focus:border-lightInputFocusBorder dark:focus:ring-darkInputFocusRing dark:focus:border-darkInputFocusBorder"
+    class="afcl-textarea bg-lightInputBackground border border-lightInputBorder text-lightInputText placeholder-lightInputPlaceholderText text-sm rounded-md block w-full p-2.5 dark:bg-darkInputBackground dark:border-darkInputBorder dark:placeholder-darkInputPlaceholderText dark:text-darkInputText dark:border-darkInputBorder focus:ring-lightInputFocusRing focus:border-lightInputFocusBorder dark:focus:ring-darkInputFocusRing dark:focus:border-darkInputFocusBorder"
+    :class="`${readonly ? 'opacity-50' : ''} ${isIos ? 'text-md' : 'text-sm'}`"
     :placeholder="placeholder"
     :value="modelValue"
     @input="$emit('update:modelValue', ($event.target as HTMLTextAreaElement).value)"
@@ -11,6 +12,10 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
+import { useCoreStore } from '@/stores/core';
+
+const coreStore = useCoreStore();
+const isIos = coreStore.isIos;
 
 const props = defineProps<{
   modelValue: string

adminforth/spa/src/stores/core.ts

@@ -221,6 +221,12 @@ export const useCoreStore = defineStore('core', () => {
     return userData.value && userFullnameField && userData.value[userFullnameField];
   })
 
+  const isIos = computed(() => {
+    return (
+    /iPad|iPhone|iPod/.test(navigator.userAgent) ||
+    (navigator.userAgent.includes('Mac') && 'ontouchend' in document)
+  )});
+
 
   return { 
     config,
@@ -245,5 +251,6 @@ export const useCoreStore = defineStore('core', () => {
     resetAdminUser,
     resetResource,
     isResourceFetching,
+    isIos
   }
 })