Initial Commit

Author: JayeshLab

.eslintignore

@@ -0,0 +1,2 @@
+/dist/
+/*.js

.gitignore

@@ -1,6 +1,5 @@
 .DS_Store
 node_modules
-/dist
 
 # local env files
 .env.local
@@ -19,3 +18,5 @@ yarn-error.log*
 *.njsproj
 *.sln
 *.sw*
+.idea/
+*.iml

LICENSE

@@ -0,0 +1,9 @@
+MIT License
+
+Copyright 2018-present Jayesh Vachhani
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -1,26 +1,91 @@
-# vue-resize-text
+# Vue Resize Text
 
-## Project setup
-```
-npm install
-```
+A vue directive which automatically resize font size based on element width.
 
-### Compiles and hot-reloads for development
-```
-npm run serve
-```
+It makes the font-size flexible on fluid or responsive layout.
 
-### Compiles and minifies for production
-```
-npm run build
+[Live Demo](https://jayeshlab.github.io/vue-resize-text/): Resize the browser viewport to see the effect in action
+
+## Installation
+
+Install via NPM
+
+`$ npm install vue-resize-text --save`
+
+Install via CDN
+
+```html
+<script src="https://unpkg.com/vue"></script>
+<script src="https://unpkg.com/vue-resize-text"></script>
 ```
 
-### Lints and fixes files
+#### Global
+
+Register VueResizeText globally:
+
+```javascript
+import Vue from 'Vue';
+import VueResizeText from 'vue-resize-text';
+
+Vue.use(VueResizeText)
 ```
-npm run lint
+Directive ```v-resize-text``` then can be used in any of Component
+
+```html
+<template>
+  <div v-resize-text>Hello Vue</div>
+</template>
 ```
 
-### Run your unit tests
+#### Local
+
+Include the VueResizeText  directive directly into your component using import:
+
+```html
+<template>
+  <div v-resize-text>Hello Vue</div>
+</template>
+<script>
+import ResizeText from 'vue-resize-text'
+export default {
+ directives: {
+    ResizeText
+ }
+}
+</script>
 ```
-npm run test:unit
+
+### Usage
+
+#### Basic usage
+
+```html
+<template>
+  <div>
+    <div v-resize-text="{ratio:1.3, minFontSize: '30px', maxFontSize: '100px', delay: 200}">Hello Vue</div>
+  </div>
+</template>
+
+<script>
+  import ResizeText from 'vue-resize-text'
+  export default {
+    directives: {
+        ResizeText
+     }
+  };
+</script>
 ```
+
+### Directive Arguments
+`v-resize-text="{ratio:1.5, minFontSize: '30px', maxFontSize: '100px', delay: 200}"`
+
+| Argument         | Description                 |  Type         |  Default     | 
+| -----------      | ---------------             | ------------  | ------------ | 
+|  ratio           |  Font Ratio is the tweek to make the text resize properly, greater then `1` makes the font smaller and less then `1` make the font bigger | Number        |     1       |
+|  minFontSize     |  Minimum font-size threshold in px| Number/String |     16px or 16       |      -            |
+|  maxFontSize     |  Maximum font-size threshold in px| Number/String  |     500px  or 500      |      -         |
+|  delay           |  Debound time delay on window resize | Number        |  200   |      -        |
+
+## License
+
+MIT

babel.config.js

@@ -1,5 +1,7 @@
 module.exports = {
   presets: [
-    '@vue/app'
+    ['@vue/app', {
+      modules: "commonjs"
+    }]
   ]
 }

package.json

@@ -1,15 +1,35 @@
 {
   "name": "vue-resize-text",
   "version": "0.1.0",
-  "private": true,
+  "description": "Vue Resize Text makes font auto resizing on responsive layout",
+  "author": "JayeshLab <[email protected]>",
+  "license": "MIT",
+  "keywords": [
+    "text",
+    "resize",
+    "font",
+    "responsive",
+    "fit",
+    "rescale",
+    "vue",
+    "vue.js"
+  ],
+  "main": "dist/vue-resize-text.common.js",
+  "unpkg": "dist/vue-resize-text.umd.min.js",
   "scripts": {
     "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
+    "build:docs": "vue-cli-service build --dest docs --name vue-resize-text src/main.js",
     "lint": "vue-cli-service lint",
+    "lib": "vue-cli-service build --target lib --name vue-resize-text src/index.js",
     "test:unit": "vue-cli-service test:unit"
   },
-  "dependencies": {
-    "vue": "^2.5.17"
+  "homepage": "https://github.com/JayeshLab/vue-resize-text/#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/JayeshLab/vue-resize-text.git"
+  },
+  "bugs": {
+    "url": "https://github.com/JayeshLab/vue-resize-text/issues"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.0.2",
@@ -22,6 +42,13 @@
     "babel-jest": "^23.6.0",
     "eslint": "^5.8.0",
     "eslint-plugin-vue": "^5.0.0-0",
-    "vue-template-compiler": "^2.5.17"
-  }
+    "vue-template-compiler": "^2.5.17",
+    "vue": "^2.5.17"
+  },
+  "files": [
+    "dist/**",
+    "src/*",
+    "*.json",
+    "*.js"
+  ]
 }

src/Demo.vue

@@ -5,40 +5,53 @@
           <h6> A vue directive which automatically resize font size based on element width.</h6>
           <h6><u>Resize the browser viewport to see the effect in action.</u></h6>
       </div>
-      <div v-resize-text="{ratio: 1}">Hello World</div>
-      <pre>&lt;div v-resize-text="{ratio: 1}"&gt;Hello World&lt;/div&gt;</pre>
-      <div v-resize-text="{ratio: 1.2}">Hello World</div>
-      <div v-resize-text="{ratio: 1.5}">Hello World</div>
+      <hr>
+      <div v-resize-text="{ratio: 0.6}">Hello Vue</div>
+      <pre><code>&lt;div v-resize-text="{ratio: 0.6}"&gt;Hello Vue&lt;/div&gt;</code></pre>
+      <br>
+      <hr>
+      <div v-resize-text="{minFontSize: '50px', maxFontSize: '100px'}">Hello Vue</div>
+      <pre><code>
+          &lt;div v-resize-text="{minFontSize: '50px', maxFontSize: '100px'}"&gt;
+          Hello Vue
+          &lt;/div&gt;
+      </code></pre>
+      <br>
+      <hr>
+      <div v-resize-text="{ratio: 1.5, delay: 500}">Hello Vue</div>
+      <pre><code>&lt;div v-resize-text="{ratio: 1.5, delay: 500}"&gt;Hello Vue&lt;/div&gt;</code></pre>
   </div>
 </template>
 
 <script>
-import ResizeText from '../dist/js/app.js'
 export default {
-  name: 'app',
-  directives: {
-    ResizeText
-  }
+  name: 'app'
 }
 </script>
 <style>
+body {
+    font-size: 16px;
+}
 #app {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
-  margin-top: 60px;
+  margin-top: 30px;
 }
 h1 {
     font-size: 1em;
     margin: 20px 0;
 }
 h6 {
-    font-size: .25em;
+    font-size: .26em;
     margin: 10px;
 }
+p {
+    font-size: .5em;
+}
 pre {
-    font-size: 10px;
+    font-size: 12px;
 }
 </style>

src/index.js

@@ -0,0 +1,14 @@
+import VueResizeText from './VueResizeText.js'
+
+const install = function(Vue) {
+  Vue.directive('ResizeText', VueResizeText);
+};
+
+if (window.Vue) {
+  window.VueResizeText = VueResizeText;
+  Vue.use(install); // eslint-disable-line
+}
+
+VueResizeText.install = install;
+
+export default VueResizeText;

src/main.js

@@ -1,8 +1,10 @@
 import Vue from 'vue'
-import App from './App.vue'
+import Demo from './Demo.vue'
+import VueResizeText from './index.js'
 
 Vue.config.productionTip = false
+Vue.use(VueResizeText)
 
 new Vue({
-  render: h => h(App),
+  render: h => h(Demo),
 }).$mount('#app')

tests/unit/vue-resize-text.spec.js

@@ -1,12 +1,42 @@
-import { shallowMount } from '@vue/test-utils'
-import HelloWorld from '@/components/HelloWorld.vue'
+import Vue from 'vue'
+import { mount } from '@vue/test-utils'
+import VueResizeText from '@/index.js'
 
-describe('HelloWorld.vue', () => {
-  it('renders props.msg when passed', () => {
-    const msg = 'new message'
-    const wrapper = shallowMount(HelloWorld, {
-      propsData: { msg }
+Vue.use(VueResizeText)
+
+
+describe('v-resize-text', () => {
+  it('it has inserted, unbind methods available', () => {
+    expect(typeof VueResizeText.inserted).toBe('function')
+    expect(typeof VueResizeText.unbind).toBe('function')
+  })
+  it('should set default min font size to the element', () => {
+    const inserted = VueResizeText.inserted
+    const div = document.createElement('div')
+    inserted(div, {})
+    expect(div.style.fontSize).toBe('16px')
+  })
+  it('should set to minFontSize for element if specified', (done) => {
+    const component = {
+      template: '<div v-resize-text="{ ratio: 2, minFontSize: \'30px\', maxFontSize: \'100px\'}"></div>',
+      directives: {
+        ResizeText: VueResizeText
+      }
+    }
+    const wrapper = mount(component)
+    wrapper.vm.$nextTick(() => {
+      expect(wrapper.find('div').element.style.fontSize).toBe('30px')
+      done()
     })
-    expect(wrapper.text()).toMatch(msg)
   })
-})
+  it('should add event listener on inserted and remove event listener on unbind', ()=> {
+    const callback = jest.fn();
+    window.addEventListener = jest.fn();
+    window.removeEventListener = jest.fn();
+    const div = document.createElement('div');
+    VueResizeText.inserted(div, {value: callback});
+    expect(window.addEventListener).toHaveBeenCalledTimes(1);
+    VueResizeText.unbind(div);
+    expect(window.removeEventListener).toHaveBeenCalledTimes(1)
+  })
+})

vue.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  baseUrl: '',
+  productionSourceMap: false,
+  filenameHashing: false,
+  configureWebpack: {
+    output: {
+      libraryExport: 'default'
+    }
+  }
+}