Close #1, close #2

tarkhov · Sep 23, 2020 · acc5448 · acc5448
1 parent b29759f
commit acc5448
Show file tree

Hide file tree

Showing 13 changed files with 248 additions and 17 deletions.
diff --git a/README.md b/README.md
@@ -1,3 +1,229 @@
 # Vue string directives
 
-Change form input value dynamically using Vue directives.
+Vue string directives library can change form input value dynamically. All languages are supported.
+
+### Contents
+
+1. [Compatibility](#compatibility)
+   1. [Version support](#version-support)
+2. [Installation](#installation)
+   1. [NodeJS](#nodejs)
+   2. [Manually](#manually)
+3. [Usage](#usage)
+   1. [CLI](#cli)
+   2. [Nuxt](#nuxt)
+   3. [Local](#local)
+   4. [CDN](#cdn)
+4. [Directives](#directives)
+5. [Author](#author)
+6. [License](#license)
+
+## Compatibility
+
+Library | Version
+------- | -------
+Vue | >= 2 and < 3
+
+We support browsers with ECMAScript 5 features, IE 10 and higher, more details can be founded here https://caniuse.com/es5 and here https://vuejs.org/v2/guide/installation.html#Compatibility-Note.
+
+### Version support
+
+Vue | Repo
+------- | -------
+2.x | [0.x](https://github.com/tarkhov/vue-string-directives/tree/0.x)
+
+## Installation
+
+### NodeJS
+
+```bash
+npm install vue-string-directives
+```
+
+### Manually
+
+[Download](https://github.com/tarkhov/vue-string-directives/releases/download/v0.1.0/vue-string-directives.zip) package and unpack it or use following commands:
+
+```bash
+wget https://github.com/tarkhov/vue-string-directives/releases/download/v0.1.0/vue-string-directives.zip
+unzip vue-string-directives.zip
+```
+
+## Usage
+
+### CLI
+
+Add following code to your `main.js` file created by Vue CLI:
+
+```js
+import VueStringDirectives from 'vue-string-directives'
+
+Vue.use(VueStringDirectives)
+```
+
+Your `main.js` will look like this:
+
+```js
+import Vue from 'vue'
+import App from './App.vue'
+import VueStringDirectives from 'vue-string-directives'
+
+Vue.use(VueStringDirectives)
+
+Vue.config.productionTip = false
+
+new Vue({
+  render: h => h(App),
+}).$mount('#app')
+```
+
+Alternatively you can use a specific directive to import it into a specific component:
+
+```js
+import { upper, lower } from 'vue-string-directives'
+export default {
+ name: 'MyComponent',
+ directives: {
+   upper,
+   lower
+  }
+}
+```
+
+Also you can import all directives to component:
+
+```js
+import { StringDirectivesMixin } from 'vue-string-directives'
+export default {
+ name: 'MyComponent',
+ mixins: [StringDirectivesMixin]
+}
+```
+
+### Nuxt
+
+If you are using nuxt, you need to create a file **vue-string-directives.js** in the plugins folder of your nuxt project with the following content:
+
+```js
+import Vue from 'vue'
+import VueStringDirectives from 'vue-string-directives'
+
+Vue.use(VueStringDirectives)
+```
+
+Then add the following lines to the nuxt.config.js:
+
+```js
+plugins: [
+ { src: '~plugins/vue-string-directives' }
+]
+```
+
+### Local
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <title>Vue string directives</title>
+  </head>
+  <body>
+    <div id="app"></div>
+
+    <script src="dist/vue.min.js"></script>
+    <script src="vue-string-directives.umd.min.js"></script>
+  </body>
+</html>
+```
+
+### CDN
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <title>Vue string directives</title>
+  </head>
+  <body>
+    <div id="app"></div>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
+    <script src="https://cdn.rawgit.com/tarkhov/vue-string-directives/v0.1.0/dist/vue-string-directives.umd.min.js"></script>
+  </body>
+</html>
+```
+
+## Directives
+
+Letter case.
+
+```html
+<!-- Uppercase -->
+<input type="text" v-model="text" v-upper>
+<input type="text" v-model="text" v-upper.first>
+<input type="text" v-model="text" v-upper.first.capitalize>
+<input type="text" v-model="text" v-upper.first.every>
+<input type="text" v-model="text" v-upper.first.capitalize.every>
+
+<!-- Lowercase -->
+<input type="text" v-model="text" v-lower>
+<input type="text" v-model="text" v-lower.first>
+
+<!-- Capitalize -->
+<input type="text" v-model="text" v-capitalize>
+```
+
+Word case.
+
+```html
+<!-- Camelcase -->
+<input type="text" v-model="text" v-camel>
+<input type="text" v-model="text" v-camel.first>
+<input type="text" v-model="text" v-camel.numbers>
+<input type="text" v-model="text" v-camel.first.numbers>
+
+<!-- Kebabcase -->
+<input type="text" v-model="text" v-kebab>
+<input type="text" v-model="text" v-kebab.numbers>
+
+<!-- Snakecase -->
+<input type="text" v-model="text" v-snake>
+<input type="text" v-model="text" v-snake.numbers>
+```
+
+Raplacing.
+
+```html
+<!-- Pad -->
+<input type="text" v-model="text" v-pad:10="_">
+<input type="text" v-model="text" v-pad:10.start="_">
+<input type="text" v-model="text" v-pad:10.end="_">
+
+<!-- Repeat -->
+<input type="text" v-model="text" v-repeat:5="-">
+
+<!-- Replace -->
+<input type="text" v-model="text" v-replace="{ regexp: '[0-9]', flags: 'g', string: '-' }">
+
+<!-- Truncate -->
+<input type="text" v-model="text" v-truncate:5="'...'">
+```
+
+## Author
+
+**Alexander Tarkhov**
+
+* [Facebook](https://www.facebook.com/alextarkhov)
+* [Twitter](https://twitter.com/alextarkhov)
+* [Medium](https://medium.com/@tarkhov)
+* [LinkedIn](https://www.linkedin.com/in/tarkhov/)
+
+## License
+
+This project is licensed under the **MIT License** - see the `LICENSE` file for details.
diff --git a/demo/src/App.vue b/demo/src/App.vue
@@ -88,7 +88,7 @@
                     v-model="capitalize.value"
                     v-capitalize
                   )
-            h2.mb-3 Replace
+            h2.mb-3 Replacing
             b-row
               b-col(lg="4" md="6" cols="12")
                 .form-group

diff --git a/dist/vue-string-directives.common.js b/dist/vue-string-directives.common.js
diff --git a/dist/vue-string-directives.esm.js b/dist/vue-string-directives.esm.js
diff --git a/dist/vue-string-directives.umd.js b/dist/vue-string-directives.umd.js
diff --git a/dist/vue-string-directives.umd.min.js b/dist/vue-string-directives.umd.min.js
diff --git a/docs/index.html b/docs/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><link rel=icon href=/vue-string-directives/favicon.ico><title>docs</title><link href=/vue-string-directives/css/app.ddb81f88.css rel=preload as=style><link href=/vue-string-directives/css/chunk-vendors.3ccfbeb6.css rel=preload as=style><link href=/vue-string-directives/js/app.989a4a77.js rel=preload as=script><link href=/vue-string-directives/js/chunk-vendors.d38998cf.js rel=preload as=script><link href=/vue-string-directives/css/chunk-vendors.3ccfbeb6.css rel=stylesheet><link href=/vue-string-directives/css/app.ddb81f88.css rel=stylesheet></head><body><noscript><strong>We're sorry but docs doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/vue-string-directives/js/chunk-vendors.d38998cf.js></script><script src=/vue-string-directives/js/app.989a4a77.js></script></body></html>
+<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><link rel=icon href=/vue-string-directives/favicon.ico><title>docs</title><link href=/vue-string-directives/css/app.ddb81f88.css rel=preload as=style><link href=/vue-string-directives/css/chunk-vendors.3ccfbeb6.css rel=preload as=style><link href=/vue-string-directives/js/app.8e5e33a6.js rel=preload as=script><link href=/vue-string-directives/js/chunk-vendors.d38998cf.js rel=preload as=script><link href=/vue-string-directives/css/chunk-vendors.3ccfbeb6.css rel=stylesheet><link href=/vue-string-directives/css/app.ddb81f88.css rel=stylesheet></head><body><noscript><strong>We're sorry but docs doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/vue-string-directives/js/chunk-vendors.d38998cf.js></script><script src=/vue-string-directives/js/app.8e5e33a6.js></script></body></html>
diff --git a/docs/js/app.989a4a77.js → docs/js/app.8e5e33a6.js b/docs/js/app.989a4a77.js → docs/js/app.8e5e33a6.js
diff --git a/docs/js/app.8e5e33a6.js.map b/docs/js/app.8e5e33a6.js.map
diff --git a/docs/js/app.989a4a77.js.map b/docs/js/app.989a4a77.js.map
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue-string-directives",
   "version": "0.1.0",
-  "description": "Vue string directives.",
+  "description": "Vue string directives library can change form input value dynamically.",
   "main": "dist/vue-string-directives.common.js",
   "module": "dist/vue-string-directives.esm.js",
   "unpkg": "dist/vue-string-directives.umd.min.js",
@@ -14,7 +14,9 @@
     "nuxt",
     "nuxtjs",
     "directive",
-    "string"
+    "string",
+    "form",
+    "input"
   ],
   "scripts": {
     "start": "rollup --config rollup.config.dev.js",
@@ -31,6 +33,9 @@
     "url": "https://github.com/tarkhov/vue-string-directives/issues"
   },
   "homepage": "https://tarkhov.github.io/vue-string-directives/",
+  "dependencies": {
+    "vue": "^2.x"
+  },
   "devDependencies": {
     "@babel/core": "^7.11.5",
     "@babel/preset-env": "^7.11.5",

diff --git a/src/index.js b/src/index.js
@@ -8,7 +8,7 @@ import replace from './directives/replace'
 import snake from './directives/snake'
 import truncate from './directives/truncate'
 import upper from './directives/upper'
-import DirectivesMixin from './mixins/DirectivesMixin'
+import StringDirectivesMixin from './mixins/StringDirectivesMixin'
 
 const VueStringDirectives = {
   install (Vue) {
@@ -36,7 +36,7 @@ export {
   snake,
   truncate,
   upper,
-  DirectivesMixin
+  StringDirectivesMixin
 }
 
 export default VueStringDirectives

diff --git a/src/mixins/DirectivesMixin.js → src/mixins/StringDirectivesMixin.js b/src/mixins/DirectivesMixin.js → src/mixins/StringDirectivesMixin.js