@simitgroup/simpleapp-generator 1.3.3-alpha → 1.3.4-alpha

package/templates/nest/src/simpleapp/generate/processors/simpleapp.processor.ts.eta

@@ -144,7 +144,7 @@ export class SimpleAppService<T extends { _id?: string }> {
     }
     // console.log(this.moreAutoCompleteField);
   };
-  async getAutoComplete(appuser: UserContext, keyword: string) {
+  async getAutoComplete(appuser: UserContext, keyword: string, data?: T) {
     try {
       const filter1 = {};
       const filter2 = {};
@@ -156,11 +156,11 @@ export class SimpleAppService<T extends { _id?: string }> {
         filter1[this.documentIdentityCode] = { $regex: keyword, $options: 'i' };
         filters.push(filter1);
       }
-
       filter2[this.documentIdentityLabel] = { $regex: keyword, $options: 'i' };
       filters.push(filter2);
-      const filterobj = { $or: filters };
 
+      const filterobj = { $or: filters };
+      Object.assign(filterobj, data);
       Object.assign(filterobj, this.getIsolationFilter(appuser));
       let projections = {
         label: `\$${this.documentIdentityLabel}`,
@@ -279,7 +279,7 @@ export class SimpleAppService<T extends { _id?: string }> {
       data._id = crypto.randomUUID();
     }
     const dbsession = appuser.getDBSession();
-    if (!dbsession.inTransaction()) {
+    if (dbsession && !dbsession.inTransaction()) {
       dbsession.startTransaction();
     }
 
@@ -307,6 +307,7 @@ export class SimpleAppService<T extends { _id?: string }> {
     await this.validateData(appuser, data);
     this.logger.debug(data, `after create validation`);
     this.applyNestedDateTime(appuser, data, 'create');
+
     this.logger.debug(data, `Create Record ${this.documentName}`);
     const newdoc = new this.doc(data);
     await this.identifyForeignKeys(appuser, data);
@@ -322,10 +323,15 @@ export class SimpleAppService<T extends { _id?: string }> {
     // this.doc
 
     // result = await newdoc.save()
-
-    if (this.hooks.afterCreate) await this.hooks.afterCreate(appuser, result);
-
-    return result as T;
+    try {
+      if (this.hooks.afterCreate) await this.hooks.afterCreate(appuser, result);
+      return result as T;
+    } catch (err) {
+      throw new InternalServerErrorException(
+        `createHook ${this.documentType} error: ${err}`,
+        `${this.documentType} createHook error`,
+      );
+    }
   }
 
   applyNestedDateTime = (
@@ -444,13 +450,14 @@ export class SimpleAppService<T extends { _id?: string }> {
       throw new NotFoundException(`${id} not found`, 'not found');
     }
     const dbsession = appuser.getDBSession();
-    if (!dbsession.inTransaction()) {
+    if (dbsession && !dbsession.inTransaction()) {
       dbsession.startTransaction();
     }
 
     let dependency;
     try {
-      if (this.hooks.beforeDelete) await this.hooks.beforeDelete(appuser, id);
+      if (this.hooks.beforeDelete)
+        await this.hooks.beforeDelete(appuser, id, deletedata);
       this.logger.debug('delete record', this.documentName, id);
       dependency = await this.getRelatedRecords(appuser, id);
       //console.log('dependency', dependency);
@@ -480,7 +487,7 @@ export class SimpleAppService<T extends { _id?: string }> {
         //this.doc.findByIdAndDelete(id);
         return deleteresult;
       } else {
-        console.log('reject query', dependency);
+        this.logger.debug('reject query', dependency);
 
         throw new ForbiddenException(dependency, 'Foreignkey constraint');
       }
@@ -494,56 +501,46 @@ export class SimpleAppService<T extends { _id?: string }> {
   //   this.doc.updateOne(data);
   // };
 
-  findIdThenUpdate = async (
-    appuser: UserContext,
-    id: string,
-    data: T,
-    session: mongo.ClientSession = undefined,
-  ) => {
+  findIdThenUpdate = async (appuser: UserContext, id: string, data: T) => {
     const existingdata = await this.findById(appuser, id);
     if (!existingdata) {
       throw new NotFoundException(`${id} not found`, 'not found');
     }
 
     if (this.hooks.beforeUpdate)
-      await this.hooks.beforeUpdate(appuser, id, data);
+      await this.hooks.beforeUpdate(appuser, id, data, existingdata);
 
     const dbsession = appuser.getDBSession();
-    if (!dbsession.inTransaction()) {
+    if (dbsession && !dbsession.inTransaction()) {
       dbsession.startTransaction();
     }
     // try {
     Object.assign(data, appuser.getUpdateFilter());
     // Object.assign(existingdata, data);
     delete data['_id'];
-
     this.reCalculateValue(data);
 
     // existingdata['_id']=''
-    // console.log("newdata",data)
     await this.validateData(appuser, data);
 
     const isolationFilter = { ...this.getIsolationFilter(appuser) };
     this.polishIsolationFilter(isolationFilter);
-
     isolationFilter['_id'] = id;
     this.applyNestedDateTime(appuser, data, 'update');
-
     try {
       const result = await this.doc.findOneAndReplace(isolationFilter, data, {
         session: dbsession,
       });
-
       appuser.addUpdatedRecordId(this.documentName, data._id);
-
       if (this.hooks.afterUpdate)
         await this.hooks.afterUpdate(appuser, id, result);
       return await this.findById(appuser, id);
     } catch (err) {
+      this.logger.error(err);
       throw new InternalServerErrorException(err.message);
     }
   };
-  
+
   findIdThenPatch = async (
     appuser: UserContext,
     id: string,
@@ -556,10 +553,10 @@ export class SimpleAppService<T extends { _id?: string }> {
     }
 
     if (this.hooks.beforeUpdate)
-      await this.hooks.beforeUpdate(appuser, id, data);
+      await this.hooks.beforeUpdate(appuser, id, data,existingdata);
 
     const dbsession = appuser.getDBSession();
-    if (!dbsession.inTransaction()) {
+    if (dbsession && !dbsession.inTransaction()) {
       dbsession.startTransaction();
     }
     // try {
@@ -598,7 +595,7 @@ export class SimpleAppService<T extends { _id?: string }> {
   //find what foreign key constraint
   async getRelatedRecords(appuser: UserContext, id: string) {
     this.logger.debug('get foreignkey for delete:', id);
-    console.log('session modifeds', appuser.getModifieds());
+    // console.log('session modifeds', appuser.getModifieds());
     if (foreignkeys === undefined) {
       this.logger.error('foreignkeys object undetected');
       throw new InternalServerErrorException('foreignkeys object undetected');
@@ -670,21 +667,24 @@ export class SimpleAppService<T extends { _id?: string }> {
         'set documentstatus id not match with submited data',
       );
     }
-
+    const existdata = await this.findById(appuser, id);
+    if (existdata && existdata['documentStatus'] == docstatus) {
+      throw new BadRequestException(
+        `Same document status "${docstatus}" is not allowed`,
+      );
+    }
     data['documentStatus'] = docstatus;
     // await this.hook(appuser, HookType.beforeSetStatus, data);
     if (this.hooks.beforeSetStatus)
-      await this.hooks.beforeSetStatus(appuser, docstatus, data);
+      await this.hooks.beforeSetStatus(appuser, docstatus, data, existdata);
+
     if (data && !data['created']) {
       const createresult = await this.create(appuser, data);
       if (this.hooks.afterSetStatus)
         await this.hooks.afterSetStatus(appuser, docstatus, createresult);
-
       return createresult;
     } else {
-      const originalresult = await this.findById(appuser, id);
-      const newdata = { ...originalresult, ...data };
-      const updateresult = await this.findIdThenUpdate(appuser, id, newdata);
+      const updateresult = await this.findIdThenPatch(appuser, id, data);
       const finaldata = await this.findById(appuser, id);
       if (this.hooks.afterSetStatus)
         await this.hooks.afterSetStatus(appuser, docstatus, finaldata);
@@ -763,7 +763,7 @@ export class SimpleAppService<T extends { _id?: string }> {
         pipelines.push(stagefilter);
       }
     });
-    this.logger.log(pipelines, 'identifyForeignKeys pipelines');
+    this.logger.debug(pipelines, 'identifyForeignKeys pipelines');
     // this.doc.db.collection(collectionname);
     const unionresult = await this.doc.aggregate(pipelines);
 
@@ -782,7 +782,7 @@ export class SimpleAppService<T extends { _id?: string }> {
           searchresult[item.collection] = [item._id];
         }
       });
-      this.logger.log(unionresult, this.documentType + ' search Result');
+      this.logger.debug(unionresult, this.documentType + ' search Result');
 
       //search is it all foreign key exists in db
       for (let i = 0; i < collections.length; i++) {
@@ -807,7 +807,7 @@ export class SimpleAppService<T extends { _id?: string }> {
               `${this.documentType}: Foreignkey ${key} at collection ${collectionname} does not exist`,
               'identifyForeignKeys',
             );
-            this.logger.log(appuser.getModifieds, 'appuser.getModifieds');
+            this.logger.debug(appuser.getModifieds, 'appuser.getModifieds');
             const errordata = { key: key, collection: collectionname };
             throw new BadRequestException(
               `${this.documentType}: Foreignkey ${key} at collection ${collectionname} does not exist`,

package/templates/nest/src/simpleapp/generate/types/simpleapp.type.ts.eta

@@ -42,16 +42,21 @@ export type DefaultHooks<T> = {
   afterValidation?: (appuser: UserContext, data: T) => Promise<void>;
   beforeCreate?: (appuser: UserContext, data: T) => Promise<void>;
   afterCreate?: (appuser: UserContext, data: T) => Promise<void>;
-  beforeUpdate?: (appuser: UserContext, id: string, data: T) => Promise<void>;
+  beforeUpdate?: (appuser: UserContext, id: string, data: T, existingdata:T) => Promise<void>;
   afterUpdate?: (appuser: UserContext, id: string, data: T) => Promise<void>;
-  beforeDelete?: (appuser: UserContext, id: string) => Promise<void>;
-  afterDelete?: (appuser: UserContext, result: DeleteResultType<T>, id: string) => Promise<void>;
+  beforeDelete?: (appuser: UserContext, id: string,deletedata:T) => Promise<void>;
+  afterDelete?: (
+    appuser: UserContext,
+    result: DeleteResultType<T>,
+    id: string,
+  ) => Promise<void>;
   beforeFetchRecord?: (appuser: UserContext, id: string) => Promise<void>;
   afterFetchRecord?: (appuser: UserContext, data: T) => Promise<void>;
   beforeSetStatus?: (
     appuser: UserContext,
     id: string,
     data: T,
+    existdata: T,
   ) => Promise<void>;
   afterSetStatus?: (appuser: UserContext, id: string, data: T) => Promise<void>;
 };
@@ -75,10 +80,10 @@ export type ApiEvent = {
   errData?: any;
 };
 
-export type DeleteResultType <T> = {
-  data:T
+export type DeleteResultType<T> = {
+  data: T;
   result: {
-    acknowledged: boolean
-    deletedCount:number
-  }
-}
+    acknowledged: boolean;
+    deletedCount: number;
+  };
+};

package/templates/nuxt/assets/css/style.css._eta

@@ -5,7 +5,11 @@
  * author: Ks Tan
  */
 
-[disabled] ,[readonly]{
+.bodycolorclass {
+   @apply bg-gray-100  dark:bg-slate-800 dark:text-gray-300
+}
+
+[disabled=true],input[disabled] ,input[readonly] ,textarea[readonly]{
     @apply bg-gray-300 dark:bg-gray-600
 }
 
@@ -29,7 +33,7 @@ html {
 } */
 
 body {
-    @apply bg-gray-100  dark:bg-slate-950 dark:text-gray-300 h-screen w-screen 
+    @apply bodycolorclass h-screen w-screen 
     /* overflow-y-scroll  overflow-x-scroll  */    
 }
 
@@ -60,7 +64,10 @@ body {
     @apply btn bg-primary-600 hover:bg-primary-400 dark:!bg-primary-700 dark:hover:bg-primary-800 
 }
 .btn-secondary {
-    @apply btn bg-secondary-600 hover:bg-secondary-400 
+    @apply btn bg-secondary-600 hover:bg-secondary-400 dark:bg-secondary-400 dark:hover:bg-secondary-600 
+}
+.btn-default {
+    @apply btn bg-gray-600 hover:bg-gray-400 dark:bg-gray-400 hover:dark:bg-gray-500 
 }
 .btn-danger {
     @apply btn bg-danger-600 hover:bg-danger-400  dark:bg-danger-700 dark:hover:bg-danger-800 
@@ -70,3 +77,32 @@ body {
 }
 
 
+
+
+.p-component-overlay-enter {
+    animation: p-component-overlay-enter-animation 150ms forwards;
+}
+
+.p-component-overlay-leave {
+    animation: p-component-overlay-leave-animation 150ms forwards;
+}
+
+.p-component-overlay {
+    @keyframes p-component-overlay-enter-animation {
+        from {
+            background-color: transparent;
+        }
+        to {
+            background-color: var(--maskbg);
+        }
+    }
+    
+    @keyframes p-component-overlay-leave-animation {
+        from {
+            background-color: var(--maskbg);
+        }
+        to {
+            background-color: transparent;
+        }
+    }
+}

package/templates/nuxt/assets/primevue/passthrough.ts._eta

@@ -35,7 +35,7 @@ const CustomTailwind = usePassThrough(
         selectbutton:{
             root:{class:'flex flex-row gap-1 '},
             button: ({ context }) => ({
-                class: ` focus:outline-none transition duration-150 ease-in-out rounded p-2 m-1 border dark:border-gray-600   ${context.active ? 'bg-primary-600 border-primary-400 text-white' : ''}`
+                class: ` focus:outline-none whitespace-nowrap transition duration-150 ease-in-out rounded p-2 m-1 border dark:border-gray-600   ${context.active ? 'bg-primary-600 border-primary-400 text-white' : ''}`
             }),
             // button: ( context)  => ({
                 
@@ -43,20 +43,25 @@ const CustomTailwind = usePassThrough(
             // }),
             label:{class: 'text-sm dark:text-white'},
         },
-        checkbox:{
-            input:{ class:' flex items-center justify-center border-2 w-6 h-6 text-gray-600  rounded-lg transition-colors duration-200 border-gray-300 bg-white dark:border-blue-900/40 dark:bg-gray-500 hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]'}
-            // p-checkbox p-component cursor-pointer inline-flex relative select-none align-bottom w-6 h-6
-             
-        },
+        //checkbox:{
+        //    input:{ class:' flex items-center justify-center border-2 w-6 h-6 text-gray-600  rounded-lg transition-colors duration-200 border-gray-300 bg-white dark:border-blue-900/40 dark:bg-gray-500 hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]'}
+            // p-checkbox p-component cursor-pointer inline-flex relative select-none align-bottom w-6 h-6             
+        //},
         button:{root:{class: 'focus:outline-none transition duration-150 ease-in-out rounded p-2 m-1 border dark:border-gray-600'}},
         dialog:{
-            root:{class:[' w-full max-h-full max-w-full md:h-3/4 lg:h-1/2 border m-2 rounded-lg']},
-            header:{class: 'p-dialog-header flex items-center  text-2xl justify-between shrink-0 bg-white text-gray-800 border-t-0  rounded-tl-lg rounded-tr-lg p-6 dark:bg-gray-900  dark:text-white/80'},
-            content:{class:'p-dialog-content overflow-y-auto bg-white text-gray-700 px-6 pb-8 pt-0 dark:bg-gray-900  dark:text-white/80 rounded-bl-lg rounded-br-lg h-full'}
+            root:{class:[' w-full max-h-full bodycolorclass max-w-full md:h-3/4 lg:h-1/2 border m-2 rounded-lg']},
+            header:{class: 'p-dialog-header flex items-center  text-2xl justify-between shrink-0 border-t-0  rounded-tl-lg rounded-tr-lg p-6 bodycolorclass'},
+            footer:{class:'p-dialog-footer flex gap-2 shrink-0 justify-end align-center border-t-0 px-6 pb-6 text-right rounded-b-lg bodycolorclass'},
+            content:{class:'p-dialog-content overflow-y-auto  px-6 pb-8 pt-0  rounded-bl-lg rounded-br-lg h-full bodycolorclass'}
         },        
         calendar:{
-            root:{class:'border border-grey-900 dark:!border-blue-900/40  rounded-lg flex flex-row p-0'},            
-            input:{class:'w-full p-inputtext p-component font-sans text-base text-gray-600 dark:text-white/80 bg-white dark:bg-gray-900 p-3 border border-gray-300 dark:border-blue-900/40 transition-colors duration-200 appearance-none hover:border-blue-500 rounded-lg'},
+            panel:{class:'p-datepicker p-component p-datepicker-mobile p-datepicker-touch-ui p-input-filled bg-white dark:bg-gray-900 min-w-[350px] shadow-md border-0 absolute'},
+            // group:{class:'p-datepicker-group flex-1 border-l border-gray-300 pr-0.5 pl-0.5 pt-0 pb-0 first:pl-0 first:border-l-0 w-2/3'},
+            // table:{class:'p-datepicker-calendar border-collapse w-2/3 my-2'},
+            // day:{class:'p-datepicker-other-month p-1'},
+            daylabel:{class:'w-8 h-8md:w-10  md:w-10 rounded-full transition-shadow duration-200 border-transparent border flex items-center justify-center mx-auto overflow-hidden relative focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)] cursor-pointer text-gray-600 dark:text-gray-400 bg-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80'},
+        //     root:{class:'border border-grey-900 dark:!border-blue-900/40  rounded-lg flex flex-row p-0'},            
+        //     input:{class:'w-full p-inputtext p-component font-sans text-base text-gray-600 dark:text-white/80 bg-white dark:bg-gray-900 p-3 border border-gray-300 dark:border-blue-900/40 transition-colors duration-200 appearance-none hover:border-blue-500 rounded-lg'},
         },
         autocomplete:{
             // root:{class:'border border-gray-400 dark:!border-blue-900/40  rounded-lg flex flex-row'},
@@ -74,7 +79,7 @@ const CustomTailwind = usePassThrough(
             },
         },
         sidebar:{
-            root:{class:'w-full md:w-2/3  bg-white dark:bg-slate-950  p-0 h-full'},
+            root:{class:'w-full md:w-2/3  bodycolorclass  p-0 h-full'},
             header:{class:'dark:text-white text-2xl p-2'},
             content:{class:'p-0 pt-0 h-full w-full grow overflow-y-auto'}
         },        

package/templates/nuxt/components/button/ButtonAction.vue._eta

@@ -0,0 +1,19 @@
+<template>
+  <ButtonDefault v-if="!actionName" :animate="animate"><slot></slot>def</ButtonDefault>
+  <ButtonPrimary v-else-if="['create', 'update'].includes(actionName)"  :animate="animate"
+    ><slot></slot
+  ></ButtonPrimary>
+  <ButtonDanger v-else-if="['delete', 'void'].includes(actionName)"  :animate="animate"
+    ><slot></slot
+  ></ButtonDanger>
+  <ButtonWarning v-else  :animate="animate"><slot></slot></ButtonWarning>
+</template>
+<script setup lang="ts">
+/**
+ * This file was automatically generated by simpleapp generator during initialization. It is changable.
+ * --remove-this-line-to-prevent-override--
+ * last change 2024-03-01
+ * author: Ks Tan
+ */
+const props = defineProps<{ actionName?: string; animate?:boolean }>();
+</script>

package/templates/nuxt/components/button/ButtonDanger.vue._eta

@@ -1,6 +1,12 @@
 <template>
-  <Button class="btn-danger"
-  @touchcancel="onActivate" @click="onActivate">
+  <Button
+    v-if="isMobile()"
+    :class="`w-full rounded-full text-center block dark:bg-danger-600 bg-danger-600 active:dark:bg-danger-400 text-white ${animate ? 'animate-bounce' :'' }`"
+    @click="onActivate"
+  >
+    <slot></slot>
+  </Button>
+  <Button v-else :class="`btn-danger ${animate ? 'animate-bounce' :'' }`" @click="onActivate">
     <slot></slot>
   </Button>
 </template>
@@ -11,8 +17,9 @@
  * last change 2024-02-22
  * author: Ks Tan
  */
-const emits = defineEmits(['click'])
-const onActivate=(e:Event)=>{
-  emits('click',e)
-}
+const emits = defineEmits(["click"]);
+const props = defineProps<{animate?:boolean}>()
+const onActivate = (e: Event) => {
+  emits("click", e);
+};
 </script>

package/templates/nuxt/components/button/ButtonDefault.vue._eta

@@ -1,6 +1,12 @@
 <template>
-  <Button class="dark:text-white"
-  @touchcancel="onActivate" @click="onActivate">
+  <Button
+    v-if="isMobile()"
+    :class="`w-full rounded-full text-center block dark:bg-gray-600 bg-gray-600 active:dark:bg-gray-400 text-white ${animate ? 'animate-bounce' :'' }`"
+    @click="onActivate"
+  >
+    <slot></slot>
+  </Button>
+  <Button v-else :class="`btn-default ${animate ? 'animate-bounce' :'' }`" @click="onActivate">
     <slot></slot>
   </Button>
 </template>
@@ -11,8 +17,9 @@
  * last change 2024-02-22
  * author: Ks Tan
  */
-const emits = defineEmits(['click'])
-const onActivate=(e:Event)=>{
-  emits('click',e)
-}
+const emits = defineEmits(["click"]);
+const props = defineProps<{animate?:boolean}>()
+const onActivate = (e: Event) => {
+  emits("click", e);
+};
 </script>

package/templates/nuxt/components/button/ButtonMultiple.vue._eta

@@ -1,11 +1,13 @@
 <template>
-  <div v-for="o in options">
-    <ButtonPrimary v-if="value == o.value" @touchend="switchButton(o.value)" @click="switchButton(o.value)">{{
-      o.label
-    }}</ButtonPrimary>
-    <ButtonDefault v-else @touchend="switchButton(o.value)" @click="switchButton(o.value)">{{
-      o.label
-    }}</ButtonDefault>
+  <div class="flex flex-row gap-2">
+    <div v-for="o in options" >
+      <ButtonPrimary v-if="value == o.value" @click="switchButton(o.value)">{{
+        o.label
+      }}</ButtonPrimary>
+      <ButtonDefault v-else @click="switchButton(o.value)">{{
+        o.label
+      }}</ButtonDefault>
+    </div>
   </div>
 </template>
 <script setup lang="ts">

package/templates/nuxt/components/button/ButtonPrimary.vue._eta

@@ -1,6 +1,12 @@
 <template>
-  <Button class="btn-primary"
-  @touchcancel="onActivate" @click="onActivate">
+  <Button
+    v-if="isMobile()"
+    :class="`w-full rounded-full text-center block dark:bg-primary-600 bg-primary-600 active:dark:bg-primary-400 text-white ${animate ? 'animate-bounce' :'' }`"
+    @click="onActivate"
+  >
+    <slot></slot>
+  </Button>
+  <Button v-else :class="`btn-primary ${animate ? 'animate-bounce' :'' }`" @click="onActivate">
     <slot></slot>
   </Button>
 </template>
@@ -11,8 +17,9 @@
  * last change 2024-02-22
  * author: Ks Tan
  */
-const emits = defineEmits(['click'])
-const onActivate=(e:Event)=>{
-  emits('click',e)
-}
+const emits = defineEmits(["click"]);
+const props = defineProps<{animate?:boolean}>()
+const onActivate = (e: Event) => {
+  emits("click", e);
+};
 </script>

package/templates/nuxt/components/button/ButtonText.vue._eta

@@ -1,7 +1,15 @@
 <template>
   <Button
-  @touchcancel="onActivate" @click="onActivate"
-    class="border-none dark:text-white active:text-primary-600 click:bg-gray-600"
+    v-if="isMobile()"
+    @click="onActivate"
+    :class="`border-none dark:text-white active:text-primary-600 click:bg-gray-600 ${animate ? 'animate-bounce' :'' }`"
+  >
+    <slot></slot>
+  </Button>
+  <Button
+    v-else
+    @click="onActivate"
+    :class="`border-none dark:text-white active:text-primary-600 click:bg-gray-600 ${animate ? 'animate-bounce' :'' }`"
   >
     <slot></slot>
   </Button>
@@ -13,9 +21,10 @@
  * last change 2024-02-22
  * author: Ks Tan
  */
-const emits = defineEmits(['click'])
-
-const onActivate=(e:Event)=>{
-  emits('click',e)
-}
+const emits = defineEmits(["click"]);
+const props = defineProps<{animate?:boolean}>()
+let stopawhile = false;
+const onActivate = (e: Event) => {
+  emits("click", e);
+};
 </script>

package/templates/nuxt/components/button/ButtonWarning.vue._eta

@@ -1,6 +1,12 @@
 <template>
-  <Button class="btn-warn"
-  @touchcancel="onActivate" @click="onActivate">
+  <Button
+    v-if="isMobile()"
+    :class="`w-full rounded-full text-center block dark:bg-warning-600 bg-warning-600 active:bg-warning-400 text-white ${animate ? 'animate-bounce' :'' }`"
+    @click="onActivate"
+  >
+    <slot></slot>
+  </Button>
+  <Button v-else :class="`btn-warn ${animate ? 'animate-bounce' :'' }`" @click="onActivate">
     <slot></slot>
   </Button>
 </template>
@@ -11,8 +17,9 @@
  * last change 2024-02-22
  * author: Ks Tan
  */
-const emits = defineEmits(['click'])
-const onActivate=(e:Event)=>{
-  emits('click',e)
-}
+const emits = defineEmits(["click"]);
+const props = defineProps<{animate?:boolean}>()
+const onActivate = (e: Event) => {
+  emits("click", e);
+};
 </script>