feat: 添加文档 & 更改名称

README.md

@@ -1,6 +1,105 @@
-# text-input-effects
+# effect-input
 
-> 深受 [TextInputEffects][url-TextInputEffects] 启发的，适用于 Vue 2.0 的 `input` 组件。
+[![NPM version][badge-npm-version]][url-npm]
+[![Node version][badge-node-version]][url-npm]
+[![NPM download][badge-npm-download]][url-npm]
+![Dependencies][badge-dependencies]
+![License][badge-license]
+
+优雅而绚丽的适用于 Vue 2.0 的 `input` 组件。极大提高交互效果和输入愉悦性。
+
+[![NPM][image-npm]][url-npm]
+
+> 深受 [TextInputEffects][url-TextInputEffects] 的启发。
+
+<!-- **中文 | [English](./README_en.md)** -->
+
+## 概览
+
+[访问在线示例](https://xbt1.github.io/effect-input)
+
+## 安装
+
+```bash
+$ yarn add effect-input # npm i -S effect-input
+```
+
+## 使用
+
+一个简单的例子
+
+```javascript
+import EffectInput from 'effect-input'
+import 'effect-input/dist/index.css'
+
+Vue.use(EffectInput)
+```
+
+```html
+<template>
+  <effect-input v-model="value" type="jiro" label="姓名"></effect-input>
+</template>
+```
+
+## 主题
+
+`effect-input` 的 `type` 属性为主题名，目前有如下主题：
+
+### `haruki`
+
+![haruki](./docs/images/haruki.gif)
+
+### `hoshi`
+
+![hoshi](./docs/images/hoshi.gif)
+
+### `kuro`
+
+![kuro](./docs/images/kuro.gif)
+
+### `jiro`
+
+![jiro](./docs/images/jiro.gif)
+
+### `minoru`
+
+![minoru](./docs/images/minoru.gif)
+
+### `yoko`
+
+![yoko](./docs/images/yoko.gif)
+
+### `hideo`
+
+![hideo](./docs/images/hideo.gif)
+
+### `kyo`
+
+![kyo](./docs/images/kyo.gif)
+
+### `akira`
+
+![akira](./docs/images/akira.gif)
+
+### `ichiro`
+
+![ichiro](./docs/images/ichiro.gif)
+
+### `juro`
+
+![juro](./docs/images/juro.gif)
+
+### `madoka`
+
+![madoka](./docs/images/madoka.gif)
+
+### `kaede`
+
+![kaede](./docs/images/kaede.gif)
+
+### `isao`
+
+![isao](./docs/images/isao.gif)
 
 
 ## 开发
@@ -18,5 +117,25 @@ $ npm run build:example # 构建示例站点
 $ npm run build # build:package & build:example
 ```
 
+## TODOs
+
+- 添加更多主题
+
+## 更新日志
+
+详见 [releases][url-releases]
+
+
+[badge-npm-version]: https://img.shields.io/npm/v/effect-input.svg
+[badge-node-version]: https://img.shields.io/node/v/effect-input.svg
+[badge-npm-download]: https://img.shields.io/npm/dt/effect-input.svg
+[badge-license]: https://img.shields.io/github/license/xbt1/effect-input.svg
+[badge-dependencies]: https://img.shields.io/david/dev/xbt1/effect-input.svg
 
 [url-TextInputEffects]: https://tympanus.net/Development/TextInputEffects/index.html
+[url-npm]: https://npmjs.org/package/effect-input
+[url-dependencies]: https://david-dm.org/vkbansal/effect-input
+[url-releases]: https://github.com/XBT1/effect-input/releases
+
+[image-npm]: https://nodei.co/npm/effect-input.png
+

examples/App.vue

@@ -3,7 +3,6 @@
     <header>
       <img class="vue-logo" src="https://vuejs.org/images/logo.png" alt="Vue.js">
       <h1>Text Input Effects</h1>
-      <p>Inspired by <a class="reference-link" target="__blank" href="https://tympanus.net/Development/TextInputEffects">TextInputEffects</a></p>
 
       <a class="github-link" target="__blank"  href="https://github.com/XBT1/text-input-effects">
        <img src="https://img.shields.io/github/stars/XBT1/text-input-effects.svg?style=for-the-badage&label=Stars" alt="GitHub Stars">
@@ -20,17 +19,21 @@
       <section v-for="(item, index) of inputList" :key="index" :style="{ backgroundColor: item.bgColor, color: item.color }">
         <h2 class="section-title">{{ item.type | upper-case }}</h2>
 
-        <su-input v-if="item.type === 'hideo'" v-model="item.value" :type="item.type">
+        <effect-input v-if="item.type === 'hideo'" v-model="item.value" :type="item.type">
           <template slot="label">
             <span class="hideo-icon"></span>
           </template>
-        </su-input>
+        </effect-input>
 
-        <su-input v-else-if="item.type === 'kyo'" v-model="item.value" :type="item.type" label="请输入姓名" :active-color="item.activeColor"></su-input>
+        <effect-input v-else-if="item.type === 'kyo'" v-model="item.value" :type="item.type" label="请输入姓名" :active-color="item.activeColor"></effect-input>
 
-        <su-input v-else v-model="item.value" :type="item.type" label="姓名"></su-input>
+        <effect-input v-else v-model="item.value" :type="item.type" label="姓名"></effect-input>
       </section>
     </main>
+
+    <footer>
+      <p>Inspired by <a class="reference-link" target="__blank" href="https://tympanus.net/Development/TextInputEffects">TextInputEffects</a></p>
+    </footer>
   </div>
 </template>
 
@@ -151,16 +154,6 @@
     font-size: 48px;
   }
 
-  header p {
-    margin-top: 0;
-    font-size: 24px;
-  }
-
-  header p,
-  header .reference-link {
-    color: #c3c8cd;
-  }
-
   main {
     font-size: 16px;
   }
@@ -188,6 +181,22 @@
     height: 100%;
     background: url("./me.svg") center no-repeat / contain;
   }
+
+  footer {
+    background-color: #f9f7f6;
+    padding: 20px 0;
+    text-align: center;
+  }
+
+  footer p {
+    margin: 0;
+    font-size: 14px;
+  }
+
+  footer p,
+  footer .reference-link {
+    color: #c3c8cd;
+  }
 </style>
 
 <style>

examples/main.js

@@ -1,10 +1,13 @@
 import Vue from 'vue'
 import App from './App.vue'
 
-import SugarInput from '../src'
+import EffectInput from '../src'
 import '../src/styles/index.styl'
 
-Vue.use(SugarInput)
+// import EffectInput from 'effect-input'
+// import 'effect-input/dist/index.css'
+
+Vue.use(EffectInput)
 
 new Vue({
   el: '#app',

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "text-input-effects",
+  "name": "effect-input",
   "description": "Text Input Effects for Vue.js - Simple ideas for enhancing text input interactions",
-  "version": "1.0.0",
+  "version": "0.1.0",
   "author": "XBT1 <xbtop1@gmail.com>",
   "main": "dist/index.common.js",
   "files": [
@@ -54,12 +54,12 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/XBT1/text-input-effects.git"
+    "url": "https://github.com/XBT1/effect-input.git"
   },
   "bugs": {
-    "url": "https://github.com/XBT1/text-input-effects/issues"
+    "url": "https://github.com/XBT1/effect-input/issues"
   },
-  "homepage": "https://github.com/XBT1/text-input-effects",
+  "homepage": "https://github.com/XBT1/effect-input",
   "engines": {
     "node": ">= 4.0.0",
     "npm": ">= 3.0.0"

src/components/SugarInput.vue → src/components/EffectInput.vue

@@ -6,10 +6,10 @@
       type="text"
       ref="input"
       v-model="innerValue"
-      class="su-input__field">
+      class="effect-input__field">
 
-    <label for="" class="su-input__label" @click="handleLabelClick" :data-content="label">
-      <span class="su-input__label-content">
+    <label for="" class="effect-input__label" @click="handleLabelClick" :data-content="label">
+      <span class="effect-input__label-content">
         {{ label }}
       </span>
     </label>
@@ -20,14 +20,14 @@
       type="text"
       ref="input"
       v-model="innerValue"
-      class="su-input__field">
+      class="effect-input__field">
 
-    <label for="" class="su-input__label" @click="handleLabelClick">
+    <label for="" class="effect-input__label" @click="handleLabelClick">
       <svg class="graphic" width="100%" height="100%" viewBox="0 0 404 77" preserveAspectRatio="none">
         <path d="m0, 0l404, 0l0, 77l-404, 0l0, -77z"></path>
       </svg>
 
-      <span class="su-input__label-content">
+      <span class="effect-input__label-content">
         {{ label }}
       </span>
     </label>
@@ -38,10 +38,10 @@
       type="text"
       ref="input"
       v-model="innerValue"
-      class="su-input__field">
+      class="effect-input__field">
 
-    <label for="" class="su-input__label" @click="handleLabelClick">
-      <span class="su-input__label-content">
+    <label for="" class="effect-input__label" @click="handleLabelClick">
+      <span class="effect-input__label-content">
         <slot name="label">
           {{ label }}
         </slot>
@@ -52,7 +52,7 @@
 
 <script>
   export default {
-    name: 'SugarInput',
+    name: 'EffectInput',
 
     props: {
       value: String,
@@ -69,9 +69,9 @@
     computed: {
       inputClass () {
         return {
-          'su-input': true,
-          'su-input--filled': !!this.innerValue,
-          [`su-input--${this.type}`]: true,
+          'effect-input': true,
+          'effect-input--filled': !!this.innerValue,
+          [`effect-input--${this.type}`]: true,
         }
       },
       innerValue: {

src/index.js

@@ -1,9 +1,9 @@
-import SugarInput from './components/SugarInput.vue'
+import EffectInput from './components/EffectInput.vue'
 
-export { SugarInput }
+export { EffectInput }
 
 export default {
   install (Vue) {
-    Vue.component('su-input', SugarInput)
+    Vue.component(EffectInput.name, EffectInput)
   },
 }

src/styles/akira.styl

@@ -7,15 +7,15 @@ label-border-width = 0.25em
 label-border = label-border-width solid input-color
 label-active-translateY = - (input-height + label-font-size + input-margin-top) / 2
 
-.su-input--akira
+.effect-input--akira
   margin-top: input-margin-top
   text-align: center
 
-  .su-input__field
+  .effect-input__field
     color: input-color
     text-align: center
 
-  .su-input__label
+  .effect-input__label
     @extend $input__label--vc
 
     top: 0
@@ -31,14 +31,14 @@ label-active-translateY = - (input-height + label-font-size + input-margin-top)
       border: label-border
       transition: border-width 0.3s
 
-  .su-input__label-content
+  .effect-input__label-content
     transition: transform 0.3s
 
   // 激活状态
-  &.su-input--filled .su-input__label,
-  .su-input__field:focus + .su-input__label
+  &.effect-input--filled .effect-input__label,
+  .effect-input__field:focus + .effect-input__label
     &::after
       border-width: (label-border-width / 2)
 
-    .su-input__label-content
+    .effect-input__label-content
       transform: translate3d(0, label-active-translateY, 0)