@simitgroup/simpleapp-generator 1.2.6 → 1.2.8

package/templates/nuxt/components/header/HeaderBar.vue._eta

@@ -1,43 +1,56 @@
-<script setup lang="ts">
-//import ButtonMenuPicker from "./ButtonMenuPicker.vue"
-
-//import ButtonProfile from './ButtonProfile.vue';
-
-
-</script>
 <template>
     <!-- <header>       -->
         <!-- <MegaMenu :model="getMenus()" orientation="horizontal" />               -->
-    <client-only>
-    <div class="flex flex-row">
-        
+    
+    <div >
+        <client-only>
         
         <div class="flex-1 flex flex-row gap-2 p-2">
-            <div class="">
+            <!-- <div class="">
                 <HeaderButtonMenuPicker/>                
-            </div>     
+            </div>      -->
             
             <!-- <div class="">
                 <HeaderButtonHome/>                
             </div> -->
-            <HeaderBreadcrumb class="hidden md:block" v-if="useRoute().fullPath!='/'"></HeaderBreadcrumb>       
+            <div v-if="isMobile()" class="dark:text-white max-w-[15rem] truncate ...">                
+                <div v-if="useRoute().fullPath.split('/').length<=3">{{ t('home') }}</div>
+                <div v-else>{{ _.last(useRoute().fullPath.split('/'))  }}</div>
+            </div>
+            <div v-else>
+                <HeaderBreadcrumb class="hidden md:block" v-if="useRoute().fullPath!='/'"></HeaderBreadcrumb>       
+            </div>
+            
         </div>
         <div class="flex-1 flex flex-row-reverse  gap-2 p-2">
-
-            <div class=" text-right">
+            <!--
+            <div class=" text-right" v-if="!isMobile()">
                 <HeaderButtonProfile/>
             </div>
-            <div class=" text-right">
+             <div class=" text-right">
                 <HeaderButtonTaskList/>
-            </div>
+            </div> -->
             <!-- <div class="">
                 <HeaderSelectBranch/>              
             </div>         -->
         </div>
 
         
-        
+    </client-only>    
     </div>
-    </client-only>
+    
     <!-- </header> -->
 </template>
+
+<script setup lang="ts">
+import _ from 'lodash'
+//import ButtonMenuPicker from "./ButtonMenuPicker.vue"
+
+//import ButtonProfile from './ButtonProfile.vue';
+const pageTitle = ref<string>('')
+onMounted(()=>{
+    // useNuxtApp().$listen('SetTitle',(title:string)=>{
+        // pageTitle.value = title
+    // })
+})
+</script>

package/templates/nuxt/components/header/HeaderBreadcrumb.vue.eta

@@ -52,11 +52,11 @@ const getBranches = ()=>{
 <template>
     <Breadcrumb :home="home" :model="items" class="!p-0 border-none ">
                 <template #item="{ item }">
-                        <NuxtLink :to="item.url" v-if="item.url" :active-class="'-'" :exact-active-class="'-'">
+                        <NuxtLink :to="item.url" v-if="item.url" class="dark:text-white" :active-class="'-'" :exact-active-class="'-'">
                             <span :class="item.icon"></span>{{ item.label }}
                         </NuxtLink>
                         <div v-else>
-                            <span class="cursor-pointer" @click="showSwitcher">{{ item.label }}</span>
+                            <span class="cursor-pointer dark:text-white" @click="showSwitcher">{{ item.label }}</span>
                             <OverlayPanel ref="op">
                                 <div>
                                     <ul class="flex flex-col">

package/templates/nuxt/components/header/button/HeaderButtonMenuPicker.vue._eta

@@ -27,29 +27,21 @@ getMenustFromPageMeta().reduce((r, item) => {
 
 </script>
 <template>
-  <div>    
-    <button class="text-center border-none  cursor-pointer" v-if="getCurrentXorg()" @click="visible=true">
-      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-        <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
-      </svg>
-    </button>
-
-     <Dialog v-model:visible="visible" modal :header="t('pickDocument')" :pt="{dialog:{ class:' bg-primary-800 ' }}">
+  
+    <button class="text-center border-none  cursor-pointer pi pi-bars dark:text-white" v-if="getCurrentXorg()" @click="visible=true">     
+      <Dialog v-model:visible="visible" modal :header="t('pickDocument')" :pt="{dialog:{ class:' bg-primary-800 ' }}">
       <div class="">
           <div v-for="m in treemenu" class="m-4">
             <h3>{{ t(m.name) }}</h3>
-            <div class="grid grid-cols-6 gap-4">
-              <button v-for="submenu in m.children" class="border rounded-lg p-2" @click="selectMenu(submenu)">              
+            <div class="grid md:grid-cols-2 lg:grid-cols-6 gap-4">
+              <ButtonPrimary v-for="submenu in m.children" class="border rounded-lg p-2" @click="selectMenu(submenu)">              
                 {{ t(submenu.name) }}
-              </button>
+              </ButtonPrimary>
             </div>
             
           </div>
           
         </div>
     </Dialog>           
-  </div>
+    </button>  
 </template>
-<style scoped>
-
-</style>

package/templates/nuxt/components/header/button/HeaderButtonProfile.vue.eta

@@ -6,9 +6,11 @@ import {ref} from 'vue'
 
 
 const { locale,setLocale,locales } = useI18n()
+const colorMode = useColorMode()
+
 const mylocale = ref(locale)
 const userprofileoverlay = ref();
-const colors = [{value:'light', name:'Light'},{value:'dark', name:'Dark'}]
+const colors = [{value:'light', name:t('light')},{value:'dark', name:t('dark')}]
 const toggle = (event:any) => {
     userprofileoverlay.value.toggle(event);   
 }
@@ -34,50 +36,39 @@ const saveLocale=async (v:string)=>{
 
 </script>
 
-<template>
-    <div>
-        <div class=" w-[120px] truncate ...">
-            
-            <div class="flex flex-row-reverse  cursor-pointer border-none w-full" @click="toggle">                    
-                <p>{{ getProfileFullName() }}</p>
-                <!-- <Avatar :image="getUserStore().getAvatarLink(32)" class="" size="normal" shape="circle" />                 -->
-                <div class="w-8 h-8 bg-cover bg-center rounded-md">
-                    <img :src="getAvatarLink(getProfileEmail(),32)" alt="" class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white dark:border-gray-700 shadow" />
-                </div>
-            </div>
-            
+<template>          
+        <div class="bg-cover bg-center rounded-md p-3  cursor-pointer profile-button"  @click="toggle">
+            <img  :src="getAvatarLink(<string>getProfileEmail(),32)" alt="" class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white dark:border-gray-700 shadow" />
         </div>
-        <OverlayPanel :pt="{root:{class:'w w-80'}}" ref="userprofileoverlay">                    
-            <div>
-                <div class="py-2 transition duration-150 ease-in-out z-10 absolute top-0 right-0 bottom-0 left-0" id="modal">
-                    <div role="alert" class="container mx-auto w-full md:w-full max-w-lg">
-                        <div class="relative p-4 md:p-8 bg-white dark:bg-gray-800 shadow-md rounded border border-gray-400">
+    
+        <OverlayPanel appendTo="body" ref="userprofileoverlay" >                    
+            <!-- <div> -->
+                <!-- <div class="py-2 transition duration-150 ease-in-out z-10 absolute top-0 right-0 bottom-0 left-0" id="modal"> -->
+                    <div  class="">
+                        <!-- <div class="relative p-4 md:p-8 bg-white dark:bg-gray-800 shadow-md rounded border border-gray-400"> -->
                             <div class="w-full flex items-center justify-start text-gray-600 dark:text-gray-400 mb-5" >
                                 <div class="w-12 h-12 bg-cover bg-center rounded-md">
-                                    <img :src="getAvatarLink(getProfileEmail(),32)" alt="" class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white dark:border-gray-700 shadow" />
+                                    <img :src="getAvatarLink(<string>getProfileEmail(),32)" alt="" class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white dark:border-gray-700 shadow" />
                                 </div>
                                 <div class="flex flex-col" >
-                                    <h1 class="text-left text-gray-800 dark:text-gray-100 font-lg font-bold tracking-normal leading-tight ml-2">{{ getUserProfile().fullName }}</h1>
-                                    <p  class="text-gray-400 dark:text-gray-100 font-normal text-base tracking-normal ml-2 mr-4">{{getUserProfile().group }}</p>
+                                    <h1 class="text-left text-gray-800 dark:text-gray-100 font-lg font-bold tracking-normal leading-tight ml-2">{{ getUserProfile()?.fullName }}</h1>
+                                    <p  class="text-gray-400 dark:text-gray-100 font-normal text-base tracking-normal ml-2 mr-4">{{getUserProfile()?.group }}</p>
                                 </div>
                                 
                             </div>
-                            <!-- language -->
                             <div class="col-span-full">
                                 <label for="pick-lang" class="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-300">{{ t('language') }}</label>
                                 <div class="mt-2">
                                     <Dropdown inputId="pick-lang" @update:model-value="saveLocale" v-model="mylocale" option-value="code" option-label="name" :options="locales" >                                    
-                                    </Dropdown>
-                                    <!-- <select v-model="$colorMode.preference" id="picklang">
-                                        <option value="light">Light</option>
-                                        <option value="dark">Dark</option>
-                                    </select> -->
+                                    </Dropdown>                                   
                                 </div>
                             </div>
                             <div class="mt-3 col-span-full">
                                 <label for="pick-theme" class="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-300">{{ t('theme') }}</label>
                                 <div class="mt-2">
-                                    <Dropdown inputId="pick-theme" v-model="$colorMode.preference" option-value="value" option-label="name" :options="colors" >                                    
+                                    <h1>Color mode: {{ $colorMode.value }}</h1>
+
+                                    <Dropdown inputId="pick-theme" v-model="colorMode.preference" option-value="value" option-label="name" :options="colors" >                                    
                                     </Dropdown>
                                    
                                 </div>
@@ -86,15 +77,13 @@ const saveLocale=async (v:string)=>{
                             
                             <div class="mt-3 flex items-center justify-start w-full">
                                 <button class="focus:outline-none transition duration-150 ease-in-out hover:bg-gray-600 bg-gray-700 rounded text-white px-8 py-2 text-sm" @click="toProfile">{{ t('profile') }}</button>
-                                <!-- <button class="focus:outline-none transition duration-150 ease-in-out bg-gray-600  rounded text-white px-8 py-2 text-sm" @click="toFrontpage">Pick Tenant</button> -->
                                 <button class="focus:outline-none ml-3 bg-warning-100 dark:bg-warning-700 dark:border-warning-700 dark:hover:bg-warning-600 transition duration-150 text-gray-600 dark:text-gray-400 ease-in-out hover:border-gray-400 hover:bg-gray-300 border rounded px-8 py-2 text-sm" @click="logout()">{{ t('logout') }}</button>
                             </div>                            
-                        </div>
+                        <!-- </div> -->
                     </div>
-                </div>
+                <!-- </div> -->
                 
-            </div>
-
+            <!-- </div> -->
         </OverlayPanel>
-    </div>
+    
 </template>

package/templates/nuxt/components/list/ListView.vue.eta

@@ -1,14 +1,13 @@
 <template>
     <div>
-        <div v-if="withFilter">
-            <input 
-                autofocus
+        <div v-if="withFilter" class="">
+            <InputText                 
                 placeholder="search" 
                 v-model="searchvalue"                    
-                class="w-full border  p-2" 
-                type="search" />
+                class="w-full dark:text-white" 
+                type="search" />                
         </div>
-        <div class="max-h-screen overflow-auto">
+        <div class=" overflow-auto" v-if="filterlist.length>0">                        
             <ul >            
                 <li v-for="(item,index) in filterlist">                    
                     <div  :class="getSelectedCSS(item)">
@@ -23,6 +22,9 @@
                 </li>
             </ul>
         </div>
+        <div v-else class="p-10">            
+            <div class="text-xl text-center dark:text-gray-400 border p-10" >{{ t('noDataFound')  }}</div>
+        </div>
     </div>
 </template>
 <script setup lang="ts" generic="T extends {[key:string]:any}">
@@ -56,9 +58,9 @@ const filterlist =  computed(()=>{
 })
 const getSelectedCSS= (item:T)=>{
     if(selecteditem.value == item.code){
-        return "p-2 border bg-sky-200"
+        return "p-2 border-l-none border-r-none bg-sky-200 border-t-2"
     }else{
-        return "p-2 border hover-list-primary"
+        return "p-2 border-l-none border-r-none hover-list-primary border-t-2 dark:border-t-gray-700"
     }
 
 }

package/templates/nuxt/components/renderer/RendererBoolean.vue.eta

@@ -2,6 +2,11 @@
     <i class="pi" :class="{ 'pi-check-circle text-green-500 ': modelValue, 'pi-times-circle text-red-500': !modelValue }"></i>
 </template>
 <script lang="ts" setup>
-
+/**
+ * This file was automatically generated by simpleapp generator during initialization.
+ * DONT CHANGE THIS FILE CAUSE IT OVERRIDE
+ * last change 2024-02-04
+ * author: Ks Tan
+ */
 const modelValue = defineModel()
 </script>

package/templates/nuxt/components/renderer/RendererDate.vue.eta

@@ -2,5 +2,11 @@
     <span>{{ toLocalDate(value??'') }}</span>
 </template>
 <script lang="ts" setup>
+/**
+ * This file was automatically generated by simpleapp generator during initialization.
+ * DONT CHANGE THIS FILE CAUSE IT OVERRIDE
+ * last change 2024-02-04
+ * author: Ks Tan
+ */
 const props = defineProps<{value?:string}>()
 </script>

package/templates/nuxt/components/renderer/RendererForeignKey.vue.eta

@@ -5,6 +5,12 @@
     <span v-else>{{ displayText }}</span>
 </template>
 <script setup lang="ts">
+/**
+ * This file was automatically generated by simpleapp generator during initialization.
+ * DONT CHANGE THIS FILE CAUSE IT OVERRIDE
+ * last change 2024-02-04
+ * author: Ks Tan
+ */
 import { ForeignKey } from '~/types';
 
 
@@ -28,7 +34,7 @@ const viewRecord = () => {
     $event('ViewRecord',{
         _id: modelValue.value?._id as string,
         label: modelValue.value?.label as string,
-        eventId: crypto.randomUUID(),
+        eventId: randomUUID(),
         documentName: props.setting.collection,
         viewer: viewer.value,
         readonly:true

package/templates/nuxt/components/renderer/RendererLink.vue.eta

@@ -0,0 +1,33 @@
+<template>
+    <a @click="go" class="text-primary-700 hover:text-primary-500 cursor-pointer">
+        <slot name="default">
+            <div >{{ value[fields[0]] }}</div>
+        </slot>
+    </a>
+</template>
+<script setup lang="ts">
+/**
+ * This file was automatically generated by simpleapp generator during initialization.
+ * DONT CHANGE THIS FILE CAUSE IT OVERRIDE
+ * last change 2024-02-04
+ * author: Ks Tan
+ */
+
+const props = defineProps<{
+    fields:any,
+    setting:any,
+    value:any
+}>()
+
+const go = ()=>{
+    goTo(props.setting.path,props.value._id)
+    // useNuxtApp().$event('ViewRecord',{
+    //     _id: props.value._id ,
+    //     documentName: props.setting.documentName,
+    //     viewer: getDocument(props.setting.documentName)?.viewer,
+    //     label: props.setting.documentName,
+    //     document:getDocument(props.setting.documentName)?.docClass,
+    //     eventId: crypto.randomUUID()
+    // })
+} 
+</script>

package/templates/nuxt/components/renderer/RendererMoney.vue.eta

@@ -1,7 +1,25 @@
 
 <template>
-    <span>{{ Intl.NumberFormat('en-US',{style:'currency',currency:'USD'}).format(modelValue) }}</span>
+    <span v-if="showCurrency"> {{ Intl.NumberFormat(  useI18n().defaultLocale,{
+        style:'currency',
+        currency: getUserProfile()?.currency,
+        currencyDisplay: 'symbol',        
+    }).format(modelValue) }}</span>
+    <span v-else> {{ modelValue.toLocaleString(useI18n().defaultLocale,options) }}</span>
 </template>
 <script lang="ts" setup>
-const props = defineProps(['modelValue'])
+/**
+ * This file was automatically generated by simpleapp generator during initialization.
+ * DONT CHANGE THIS FILE CAUSE IT OVERRIDE
+ * last change 2024-02-04
+ * author: Ks Tan
+ */
+
+const options = {
+  style: 'decimal',  // Other options: 'currency', 'percent', etc.
+  minimumFractionDigits: 2,
+  maximumFractionDigits: 2,
+};
+const modelValue = defineModel<number>({required:true})
+const props = defineProps<{showCurrency?:boolean}>()
 </script>

package/templates/nuxt/components/renderer/RendererMultiText.vue.eta

@@ -6,6 +6,12 @@
     </p>
 </template>
 <script lang="ts" setup>
+/**
+ * This file was automatically generated by simpleapp generator during initialization.
+ * DONT CHANGE THIS FILE CAUSE IT OVERRIDE
+ * last change 2024-02-04
+ * author: Ks Tan
+ */
 const props = defineProps(['value','fields'])
 
 </script>

package/templates/nuxt/components/renderer/RendererViewer.vue.eta

@@ -0,0 +1,32 @@
+<template>
+    <a @click="openViewer" class="text-primary-700 dark:text-primary-400 hover:text-primary-500 cursor-pointer">
+        <slot name="default">
+            <div v-if="fields">{{ value[fields[0]] }}</div>
+        </slot>
+    </a>
+</template>
+<script setup lang="ts">
+/**
+ * This file was automatically generated by simpleapp generator during initialization.
+ * DONT CHANGE THIS FILE CAUSE IT OVERRIDE
+ * last change 2024-02-04
+ * author: Ks Tan
+ */
+import { RendererSetting } from '~/types';
+const props = defineProps<{
+    fields?:string[],
+    setting:RendererSetting,
+    value:any
+}>()
+
+const openViewer = ()=>{
+    useNuxtApp().$event('ViewRecord',{
+        _id: props.value._id ,
+        documentName: props.setting.documentName,
+        viewer: getDocument(props.setting.documentName)?.viewer,
+        label: props.setting.documentName,
+        document:getDocument(props.setting.documentName)?.docClass,
+        eventId: randomUUID()
+    })
+} 
+</script>

package/templates/nuxt/components/renderer/{index.ts.eta → index.ts._eta}

@@ -1,12 +1,20 @@
+/**
+ * This file was automatically generated by simpleapp generator during initialization.
+ * YOU CAN MODIFY IT.
+ * last change 2024-02-04
+ * author: Ks Tan
+ */
 import RendererBoolean from './RendererBoolean.vue'
 import RendererDate from './RendererDate.vue'
 import RendererForeignKey from './RendererForeignKey.vue'
 import RendererMoney from './RendererMoney.vue'
 import RendererMultiText from './RendererMultiText.vue'
-
+import RendererViewer from './RendererViewer.vue'
+import RendererLink from './RendererLink.vue'
 
 export default {
     
-      RendererBoolean,RendererDate,RendererForeignKey,RendererMoney,RendererMultiText
+      RendererBoolean,RendererDate,RendererForeignKey,RendererMoney,RendererMultiText,RendererViewer,
+      RendererLink
     
   };

package/templates/nuxt/components/simpleApp/SimpleAppAutocomplete.vue.eta

@@ -1,7 +1,7 @@
 <template>   
         <AutoComplete v-model="modelValue"  v-if="!readonly" ref="autocompleteinput"
                forceSelection optionLabel="label"  
-               @focus="($event.target as HTMLInputElement).select()"              
+               @focus="setFocus"              
                @item-select="pickAutoComplete"
                @complete="getListFromAutocompleteApi"       
                :placeholder="t('keyword')"
@@ -17,7 +17,25 @@
                @blur="onBlurAutocomplete"
                :inputId="inputId" :path="setting.instancepath"
                :readonly="readonly"
-                />
+                >
+                    <template #header>
+                        <slot name="header">
+                            <div class="flex flex-row font font-bold  dark:text-white">                            
+                                <div class="w w-1/3">{{ t(codefield) ?? t('code') }}</div>
+                                <div class="w w-2/3" >{{ t(labelfield) ?? t('label') }}</div>
+                            </div>
+                        </slot>
+                    </template>
+                    <template #option="{index,option}">
+                        <slot name="option" :index="index" :option="option">
+                            <div class="flex flex-row dark:text-white">                            
+                                <div class="w w-1/3" >{{ option.code }}</div>
+                                <div class="w w-2/3" >{{ option.label }}</div>
+                            </div>
+                        </slot>
+                    </template>
+                <!-- </slot> -->
+            </AutoComplete>
         <div v-else class="p-3 border rounded-lg border-gray-300 dark:border-blue-900/40 ">
             <span :readonly="readonly" class="cursor-pointer text-primary-600  dark:text-primary-400 "
                 tabindex="0" @click="openViewer(true)">{{ modelValue && modelValue.label ?  modelValue.label:'-' }}</span>
@@ -44,11 +62,17 @@ allowAddNew:true,showNull:true
 const path = '$'+props.setting.instancepath
 const modifiedpath = path.replaceAll('/','.')        
 const queryresult = jsonpath.query(props.setting.defaultValue,modifiedpath)[0]
+const remotedoc = getDocument(props.setting.fieldsetting['x-foreignkey'])
+const schema:SchemaType = <SchemaType>remotedoc?.docClass.getSchema()
+    
+const labelfield = schema['x-simpleapp-config'].documentTitle as string
+const codefield  = schema['x-simpleapp-config'].uniqueKey as string
+const docname = props.setting.fieldsetting['x-foreignkey']
 
 const emptyautocomplete = computed(():autocompletetype=> queryresult)
 
 const autocompleteitem = ref<autocompletetype>(emptyautocomplete.value)
-const modelValue = defineModel<autocompletetype>()        
+const modelValue = defineModel<autocompletetype>({required:true})
 if(modelValue.value && modelValue.value._id){
     autocompleteitem.value={...modelValue.value}
 }
@@ -124,25 +148,26 @@ const emitChanges = () =>{
  
 }
 
+
+const setFocus = (ev:any) => {
+    if(!isMobile()) ev.target.select()
+}
+
 //pop up records
-const openViewer = (readonly:boolean) =>{
-    const remotedoc = getDocument(props.setting.fieldsetting['x-foreignkey'])
+const openViewer = (readonly:boolean) =>{    
     
     if(remotedoc){
-        const schema:SchemaType = remotedoc.docClass.getSchema()
-        const labelfield = schema['x-simpleapp-config'].documentTitle as string
-        const codefield  = schema['x-simpleapp-config'].uniqueKey as string
-        const docname = props.setting.fieldsetting['x-foreignkey']
+        
         $event('ViewRecord',{
             _id: modelValue.value?._id as string,
-            eventId: crypto.randomUUID(),
+            eventId: randomUUID(),
             label: (readonly ? modelValue.value?.label : `${t('new') + ' '+ t(docname) }`)  as string,
             readonly:readonly,
             viewer : getDocument(docname)?.viewer,
             documentName: docname,
 
             //after create, auto copy value into auto complete
-            afterCreate:(data:any)=>{                
+            after:(eventType:string,data:any,result:any)=>{                
                 autocompleteitem.value = {
                     _id: data._id,
                     code: data[codefield],                    
@@ -157,7 +182,7 @@ const openViewer = (readonly:boolean) =>{
                 }   
                 modelValue.value = {...autocompleteitem.value}                             
                 emitChanges()
-                console.log("autocompleteitem.value",autocompleteitem.value ,modelValue.value)
+                
                 
             }
         })

package/templates/nuxt/components/simpleApp/SimpleAppDocumentNo.vue.eta

@@ -3,11 +3,12 @@
     
         <div class="flex flex-row w-full">
             <InputText 
+                @focus="setFocus"              
                 :readonly="readonly"
                 v-model="modelValue"    
                 :placeholder="placeholder"
                 :pt="pt"
-                :class=" !pt ? 'flex-1 w-full rounded-lg  '+ ( props.readonly?'':'dark:!bg-gray-700 rounded-tr-none rounded-br-none') : ''"
+                :class=" !pt ? 'flex-1 w-full rounded-lg  '+ ( props.readonly?'':'rounded-tr-none rounded-br-none') : ''"
             />
             <span class="" v-if="!readonly">
                 <button  type="button" @click="toggle"  tabindex="-1"
@@ -45,7 +46,7 @@ const props = defineProps<{
 const op = ref();
 const placeholder = ref('')
 const docFormatlist = ref()
-const modelValue = defineModel<string>()
+const modelValue = defineModel<string>({required:true})
 const docNoFormat = props.setting.document.getReactiveData().value.docNoFormat
 const emits = defineEmits(['update:docNoFormat'])
 
@@ -72,6 +73,11 @@ const loadDocFormats = async () =>{
     }
 }
 
+
+const setFocus = (ev:any) => {
+    if(!isMobile()) ev.target.select()
+}
+
 onMounted(()=>{
     loadDocFormats()