From 58c673002b4826e5daf3f1ae986b0a4767af9c43 Mon Sep 17 00:00:00 2001 From: Ming Tsai Date: Fri, 19 Jun 2020 16:13:30 -0400 Subject: [PATCH] chore: separete ts, vue and css --- build/rollup.config.js | 1 - package-lock.json | 2 +- package.json | 2 +- src/vue-typed.css | 33 +++++++++ src/vue-typed.ts | 116 ++++++++++++++++++++++++++++++ src/vue-typed.vue | 156 +---------------------------------------- 6 files changed, 153 insertions(+), 157 deletions(-) create mode 100644 src/vue-typed.css create mode 100644 src/vue-typed.ts diff --git a/build/rollup.config.js b/build/rollup.config.js index 8d30bdd..eff2472 100644 --- a/build/rollup.config.js +++ b/build/rollup.config.js @@ -1,4 +1,3 @@ -// rollup.config.js import fs from 'fs'; import path from 'path'; import vue from 'rollup-plugin-vue'; diff --git a/package-lock.json b/package-lock.json index fb8b960..a9e4f50 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@tsaibot/vue-typed", - "version": "0.1.0-preview7", + "version": "0.1.0-preview8", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 6825aef..1b2e778 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@tsaibot/vue-typed", - "version": "0.1.0-preview7", + "version": "0.1.0-preview8", "description": "Typed components for VueJs", "repository": { "type": "git", diff --git a/src/vue-typed.css b/src/vue-typed.css new file mode 100644 index 0000000..ec6434c --- /dev/null +++ b/src/vue-typed.css @@ -0,0 +1,33 @@ +.caret { + display: inline-block; + vertical-align: baseline; + width: 1px; + background: black; + margin-left: 3px; + position: relative; + top: 2px; + -webkit-animation: caret-animation 0.5s linear infinite; + animation: caret-animation 0.5s linear infinite; +} + +.caret:empty:before { + content: "\200b"; /* unicode zero width space character */ +} + +@keyframes caret-animation { + 0% { + opacity: 1; + } + 30% { + opacity: 1; + } + 40% { + opacity: 0; + } + 90% { + opacity: 0; + } + 100% { + opacity: 1; + } +} \ No newline at end of file diff --git a/src/vue-typed.ts b/src/vue-typed.ts new file mode 100644 index 0000000..b1dfbe6 --- /dev/null +++ b/src/vue-typed.ts @@ -0,0 +1,116 @@ +import Vue from 'vue'; + +interface VueType { + isDone: boolean; + arrayIndex: number; + bindingText: string; +} + +export default Vue.extend({ + name: 'VueTyped', // vue component name + props: { + timeTakes: { + type: Number, + validator: value => value >= 0.0, + default: 2000 + }, + text: { + type: [String, Array], + required: true, + validator: value => { + var result = value != undefined && value != null && value.length > 0; + if (result && Array.isArray(value)) { + value.forEach((v) => { + if(typeof v != 'string') + { + result = false; + } + }); + } + return result; + } + }, + tag: { + type: String, + default: 'span', + validator: value => ['p', 'h1', 'h2', 'h3', 'h4', 'span'].includes(value) + } + }, + data(): VueType { + return { + isDone: false, + arrayIndex: 0, + bindingText: '' + }; + }, + methods: { + async writeInit() { + if (typeof this.text === "string") { + await this.writeText(this.text); + await this.delay(this.timeTakes); + this.isDone = true; + } else { + if (Array.isArray(this.text)) { + this.setIntervalImmediately( + async () => await this.managerArray(), + this.timeTakes * 1.4 * 2 + ); + } + } + }, + async writeText(text: string) { + let index = 0; + this.bindingText = ''; + const period = this.timeTakes / text.length; + const timer = setInterval(() => { + if (index >= text.length - 1) { + clearInterval(timer); + } + index = this.appendText(text[index], index); + }, period); + }, + appendText(char: string, index: number) { + this.bindingText += char; + index++; + return index; + }, + async eraseText(text: string) { + let index = text.length; + this.bindingText = text; + const period = this.timeTakes / text.length; + const timer = setInterval(() => { + if (index <= 0) { + clearInterval(timer); + } + index = this.removeText(index); + }, period); + }, + removeText(index: number) { + this.bindingText = this.bindingText.substring(0, index); + index--; + return index; + }, + async managerArray() { + const text = this.text as string[]; + await this.writeText(text[this.arrayIndex]); + await this.delay(this.timeTakes * 1.5); + await this.eraseText(text[this.arrayIndex]); + if (this.arrayIndex >= this.text.length - 1) { + this.arrayIndex = 0; + } else { + this.arrayIndex++; + } + return; + }, + delay(ms: number) { + return new Promise(resolve => setTimeout(resolve, ms)); + }, + setIntervalImmediately(func: () => void, interval: number) { + func(); + return setInterval(func, interval); + } + }, + async mounted() { + await this.writeInit(); + }, +}); diff --git a/src/vue-typed.vue b/src/vue-typed.vue index 89beedb..23ca36a 100644 --- a/src/vue-typed.vue +++ b/src/vue-typed.vue @@ -1,122 +1,3 @@ - - - + +