Animations in the WebEditor

src/components/CSelectAnimation/CSelectAnimation.ts

@@ -0,0 +1,60 @@
+import { defineComponent, onMounted, ref } from 'vue'
+
+import { tools } from '@src/store/Modules/tools'
+import { shared_consts } from '@src/common/shared_vuejs'
+import { emit } from 'process'
+
+export default defineComponent({
+  name: 'CSelectAnimation',
+  emits: ['update:modelValue'],
+  props: {
+    modelValue: {
+      type: String,
+      required: true,
+      default: '',
+    },
+    label: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+
+  setup(props, { emit }) {
+
+    const myclass = ref('')
+    const animType = ref('')
+    const animSpeed = ref('')
+    const animDelay = ref('')
+
+    function updateClass() {
+
+      let mycl = ''
+
+      myclass.value = 'animate__animated ' + animType.value + ' ' + animSpeed.value + ' ' + animDelay.value
+
+      emit('update:modelValue', myclass.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)
+
+    }
+
+    onMounted(mounted)
+
+    return {
+      tools,
+      updateClass,
+      animType,
+      animSpeed,
+      animDelay,
+    }
+  },
+
+})

src/components/CSelectAnimation/CSelectAnimation.vue

@@ -0,0 +1,52 @@
+<template>
+  <div>
+    {{label}}
+    <q-select
+      rounded
+      style="min-width: 150px"
+      outlined
+      v-model="animType"
+      :options="tools.SelectListAnimation"
+      @update:model-value="updateClass"
+      dense
+      label="Tipo:"
+      emit-value
+      map-options
+    >
+    </q-select>
+
+    <q-select
+      rounded
+      style="min-width: 150px"
+      outlined
+      v-model="animSpeed"
+      :options="tools.SelectListSpeed"
+      @update:model-value="updateClass"
+      dense
+      label="Speed:"
+      emit-value
+      map-options
+    >
+    </q-select>
+
+    <q-select
+      rounded
+      style="min-width: 150px"
+      outlined
+      v-model="animDelay"
+      :options="tools.SelectListDelay"
+      @update:model-value="updateClass"
+      dense
+      label="Ritardo:"
+      emit-value
+      map-options
+    >
+    </q-select>
+  </div>
+</template>
+
+<script lang="ts" src="./CSelectAnimation.ts">
+</script>
+<style lang="scss" scoped>
+@import './CSelectAnimation.scss';
+</style>

src/components/CSelectAnimation/index.ts

@@ -0,0 +1 @@
+export { default as CSelectAnimation } from './CSelectAnimation.vue'