Merge pull request #5 from ming-tsai/dev

release-0.1.1

Author: ming-tsai

.github/workflows/node.js.yml

@@ -5,9 +5,9 @@ name: Node.js CI
 
 on:
   push:
-    branches: [ master ]
+    branches: [ master, dev ]
   pull_request:
-    branches: [ master ]
+    branches: [ master, dev ]
 
 jobs:
   build:

README.md

@@ -1,6 +1,6 @@
-# vue-typed 
-![Node.js CI](https://github.com/ming-tsai/vue-typed/workflows/Node.js%20CI/badge.svg?branch=master)
-[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=ming-tsai_vue-typed&metric=alert_status)](https://sonarcloud.io/dashboard?id=ming-tsai_vue-typed)
+# vue-type-text 
+![Node.js CI](https://github.com/ming-tsai/vue-type-text/workflows/Node.js%20CI/badge.svg?branch=master)
+[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=ming-tsai_vue-type-text&metric=alert_status)](https://sonarcloud.io/dashboard?id=ming-tsai_vue-type-text)
 
 > Typed components for VueJs.
 
@@ -14,16 +14,16 @@ You need [Vue.js](https://vuejs.org/) **version 2.5+**.
 
 ### 1. Install via npm
 ```bash
-npm i @tsaibot/vue-typed
+npm i @tsaibot/vue-type-text
 // or
-yarn add @tsaibot/vue-typed
+yarn add @tsaibot/vue-type-text
 ```
-### 2. Import and use VueTyped
+### 2. Import and use VueTypeText
 ```js
 import Vue from 'vue';
-import VueTyped from '@tsaibot/vue-typed';
+import VueTypeText from '@tsaibot/vue-type-text';
 
-Vue.use(VueTyped);
+Vue.use(VueTypeText);
 
 // this is an example vue settings
 Vue.config.productionTip = false;
@@ -36,12 +36,12 @@ Or import on your view
 ```html
 <script lang="ts">
 import Vue from 'vue';
-import VueTyped from '@/vue-typed.vue';
+import VueTypeText from '@/vue-type-text.vue';
 
 export default Vue.extend({
   name: 'YourViewName',
   components: {
-    VueTyped
+    VueTypeText
   }
 });
 </script>
@@ -50,16 +50,16 @@ export default Vue.extend({
 ```html
 <!-- your code here -->
 <!-- an example using as h1-->
-<vue-typed tag="h1" :text="['VueTyped', 'vue-typed', 'vueTyped']"/>
+<vue-type-text tag="h1" :text="['VueTypeText', 'vue-type-text', 'vueTyped']"/>
 <!-- an example using as span-->
-<vue-typed text="Welcome to Your VueTyped" />
+<vue-type-text text="Welcome to Your VueTypeText" />
 <!-- your code here -->
 ```
 ### Alternatively
 ```html
-<!-- VueTyped JavaScript -->
-<script src="https://cdn.jsdelivr.net/npm/@tsaibot/vue-typed/dist/vue-typed.min.js"></script>
+<!-- VueTypeText JavaScript -->
+<script src="https://cdn.jsdelivr.net/npm/@tsaibot/vue-type-text/dist/vue-type-text.min.js"></script>
 
 ```
 ## License
-Code released under [MIT](https://github.com/ming-tsai/vue-typed/blob/master/LICENSE) license.
+Code released under [MIT](https://github.com/ming-tsai/vue-type-text/blob/master/LICENSE) license.

build/rollup.config.js

@@ -69,7 +69,7 @@ if (!argv.format || argv.format === 'es') {
     ...baseConfig,
     external,
     output: {
-      file: 'dist/vue-typed.esm.js',
+      file: 'dist/vue-type-text.esm.js',
       format: 'esm',
       exports: 'named',
     },
@@ -103,9 +103,9 @@ if (!argv.format || argv.format === 'cjs') {
     external,
     output: {
       compact: true,
-      file: 'dist/vue-typed.ssr.js',
+      file: 'dist/vue-type-text.ssr.js',
       format: 'cjs',
-      name: 'VueTyped',
+      name: 'VueTypeText',
       exports: 'named',
       globals,
     },
@@ -132,9 +132,9 @@ if (!argv.format || argv.format === 'iife') {
     external,
     output: {
       compact: true,
-      file: 'dist/vue-typed.min.js',
+      file: 'dist/vue-type-text.min.js',
       format: 'iife',
-      name: 'VueTyped',
+      name: 'VueTypeText',
       exports: 'named',
       globals,
     },

dev/serve.vue

@@ -1,20 +1,20 @@
 <script lang="ts">
 import Vue from 'vue';
-import VueTyped from '@/vue-typed.vue';
+import VueTypeText from '@/vue-type-text.vue';
 
 export default Vue.extend({
   name: 'ServeDev',
   components: {
-    VueTyped
+    VueTypeText
   }
 });
 </script>
 
 <template>
   <div id="app">
     <img alt="Vue logo" src="./assets/logo.png" />
-    <vue-typed tag="h1" :text="['VueTyped', 'vue-typed', 'vueTyped']"/>
-    <vue-typed tag="p" text="Welcome to Your VueTyped" />
+    <vue-type-text tag="h1" :text="['VueTypeText', 'vue-type-text', 'vue type text']"/>
+    <vue-type-text tag="p" text="Welcome to Your VueTypeText" />
   </div>
 </template>
 

package-lock.json

@@ -1,32 +1,33 @@
 {
-  "name": "@tsaibot/vue-typed",
-  "version": "0.1.0-preview8",
+  "name": "vue-type-text",
+  "version": "0.1.1",
   "description": "Typed components for VueJs",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/ming-tsai/vue-typed.git"
+    "url": "git+https://github.com/ming-tsai/vue-type-text.git"
   },
   "keywords": [
-    "vue-typer",
+    "typer",
     "vue",
-    "vue-component",
-    "vue-type-effect",
-    "vue-typed"
+    "animation",
+    "component",
+    "typed",
+    "vue-type-text"
   ],
   "author": "Ming Tsai",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/ming-tsai/vue-typed/issues"
+    "url": "https://github.com/ming-tsai/vue-type-text/issues"
   },
-  "homepage": "https://github.com/ming-tsai/vue-typed#readme",
-  "main": "dist/vue-typed.ssr.js",
-  "browser": "dist/vue-typed.esm.js",
-  "module": "dist/vue-typed.esm.js",
-  "unpkg": "dist/vue-typed.min.js",
-  "types": "vue-typed.d.ts",
+  "homepage": "https://github.com/ming-tsai/vue-type-text#readme",
+  "main": "dist/vue-type-text.ssr.js",
+  "browser": "dist/vue-type-text.esm.js",
+  "module": "dist/vue-type-text.esm.js",
+  "unpkg": "dist/vue-type-text.min.js",
+  "types": "vue-type-text.d.ts",
   "files": [
     "dist/*",
-    "vue-typed.d.ts",
+    "vue-type-text.d.ts",
     "src/**/*.vue"
   ],
   "scripts": {

package.json

@@ -1,7 +1,7 @@
 import _Vue, { PluginFunction, VueConstructor } from 'vue';
 
 // Import vue component
-import component from '@/vue-typed.vue';
+import component from '@/vue-type-text.vue';
 
 // Define typescript interfaces for autoinstaller
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -13,10 +13,10 @@ interface InstallableComponent extends VueConstructor<_Vue> {
 }
 
 // install function executed by Vue.use()
-const install: InstallFunction = function installVueTyped(Vue: typeof _Vue) {
+const install: InstallFunction = function installVueTypeText(Vue: typeof _Vue) {
   if (install.installed) return;
   install.installed = true;
-  Vue.component('VueTyped', component);
+  Vue.component('VueTypeText', component);
 };
 
 // Create module definition for Vue.use()

src/entry.ts

@@ -1,13 +1,13 @@
 import Vue from 'vue';
 
-interface VueType {
+interface VueTypeText {
   isDone: boolean;
   arrayIndex: number;
   bindingText: string;
 }
 
 export default Vue.extend({
-  name: 'VueTyped', // vue component name
+  name: 'VueTypeText', // vue component name
   props: {
     timeTakes: {
       type: Number,
@@ -36,7 +36,7 @@ export default Vue.extend({
       validator: value => ['p', 'h1', 'h2', 'h3', 'h4', 'span'].includes(value)
     }
   },
-  data(): VueType {
+  data(): VueTypeText {
     return {
       isDone: false,
       arrayIndex: 0,

src/vue-typed.css renamed to src/vue-type-text.css

@@ -0,0 +1,9 @@
+<template>
+  <component :is="tag">
+    <span class="vue-type-text">{{ bindingText }}</span>
+    <span class="caret" v-if="!isDone"></span>
+  </component>
+</template>
+
+<script lang="ts" src="./vue-type-text.ts"></script>
+<style src="./vue-type-text.css" scoped></style>

src/vue-typed.ts renamed to src/vue-type-text.ts

@@ -8,5 +8,5 @@ export interface InstallableComponent extends VueConstructor<Vue> {
   install: InstallFunction;
 }
 
-declare const VueTyped: InstallableComponent;
-export default VueTyped;
+declare const VueTypeText: InstallableComponent;
+export default VueTypeText;