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,
+    }
+  },
+
+})