Animations, Policy, Toolbar Colors

src/components/CSelectAnimation/CSelectAnimation.ts

@@ -1,17 +1,20 @@
-import { defineComponent, onMounted, ref } from 'vue'
+import { defineComponent, onMounted, PropType, ref } from 'vue'
 
 import { tools } from '@src/store/Modules/tools'
 import { shared_consts } from '@src/common/shared_vuejs'
 import { emit } from 'process'
+import { IAnim } from '@src/model'
 
 export default defineComponent({
   name: 'CSelectAnimation',
   emits: ['update:modelValue'],
   props: {
     modelValue: {
-      type: String,
-      required: true,
-      default: '',
+      type: Object as PropType<IAnim | string | undefined>,
+      required: false,
+      default : () => {
+        return {name: '', clduration: '', cldelay: ''}
+      }
     },
     label: {
       type: String,
@@ -23,27 +26,18 @@ export default defineComponent({
   setup(props, { emit }) {
 
     const myclass = ref('')
-    const animType = ref('')
-    const animSpeed = ref('')
-    const animDelay = ref('')
+    const myrec = ref(<IAnim>{name: '', clduration: '', cldelay: ''})
 
     function updateClass() {
+      if (typeof props.modelValue === 'object') {
+        myrec.value = props.modelValue
+      }
 
-      let mycl = ''
-
-      myclass.value = 'animate__animated ' + animType.value + ' ' + animSpeed.value + ' ' + animDelay.value
-
-      emit('update:modelValue', myclass.value)
+      emit('update:modelValue', myrec.value)
     }
 
     function mounted() {
-
-      const myarr = props.modelValue.split(' ')
-
-      animType.value = tools.findFirstElemInCommon(tools.SelectListAnimation, myarr)
-      animSpeed.value = tools.findFirstElemInCommon(tools.SelectListSpeed, myarr)
-      animDelay.value = tools.findFirstElemInCommon(tools.SelectListDelay, myarr)
-
+      updateClass()
     }
 
     onMounted(mounted)
@@ -51,9 +45,7 @@ export default defineComponent({
     return {
       tools,
       updateClass,
-      animType,
-      animSpeed,
-      animDelay,
+      myrec,
     }
   },
 

src/components/CSelectAnimation/CSelectAnimation.vue

@@ -1,11 +1,11 @@
 <template>
-  <div>
+  <div v-if="!!myrec">
     {{label}}
     <q-select
       rounded
       style="min-width: 150px"
       outlined
-      v-model="animType"
+      v-model="myrec.name"
       :options="tools.SelectListAnimation"
       @update:model-value="updateClass"
       dense
@@ -19,7 +19,7 @@
       rounded
       style="min-width: 150px"
       outlined
-      v-model="animSpeed"
+      v-model="myrec.clduration"
       :options="tools.SelectListSpeed"
       @update:model-value="updateClass"
       dense
@@ -33,7 +33,7 @@
       rounded
       style="min-width: 150px"
       outlined
-      v-model="animDelay"
+      v-model="myrec.cldelay"
       :options="tools.SelectListDelay"
       @update:model-value="updateClass"
       dense