├── .gitignore
├── .gitattributes
├── src
├── index.js
├── utils.js
└── vue-responsive-text.vue
├── LICENSE
├── examples
└── example-1.vue
├── package.json
├── README.md
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules/
2 | /dist/
--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import component from "./vue-responsive-text.vue";
2 |
3 | // install function executed by Vue.use()
4 | export function install(Vue) {
5 | if (install.installed) return;
6 | install.installed = true;
7 | Vue.component("VueResponsiveText", component);
8 | }
9 |
10 | // create module definition for Vue.use()
11 | const plugin = {
12 | install
13 | };
14 |
15 | // auto-install when vue is found
16 | let GlobalVue = null;
17 | if (typeof window !== "undefined") {
18 | GlobalVue = window.Vue;
19 | } else if (typeof global !== "undefined") {
20 | GlobalVue = global.Vue;
21 | }
22 | if (GlobalVue) {
23 | GlobalVue.use(plugin);
24 | }
25 |
26 | export default component;
27 |
--------------------------------------------------------------------------------
/src/utils.js:
--------------------------------------------------------------------------------
1 | export function getNodeWidth(node) {
2 | const nodeStyles = window.getComputedStyle(node, null);
3 | const width = node.offsetWidth;
4 |
5 | const borderLeftWidth = nodeStyles.borderLeftWidth
6 | ? parseFloat(nodeStyles.borderLeftWidth)
7 | : 0;
8 |
9 | const borderRightWidth = nodeStyles.borderRightWidth
10 | ? parseFloat(nodeStyles.borderRightWidth)
11 | : 0;
12 |
13 | const paddingLeft = nodeStyles.paddingLeft
14 | ? parseFloat(nodeStyles.paddingLeft)
15 | : 0;
16 |
17 | const paddingRight = nodeStyles.paddingRight
18 | ? parseFloat(nodeStyles.paddingRight)
19 | : 0;
20 |
21 | return (
22 | width - borderRightWidth - borderLeftWidth - paddingLeft - paddingRight
23 | );
24 | }
25 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2018 William L
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
--------------------------------------------------------------------------------
/examples/example-1.vue:
--------------------------------------------------------------------------------
1 |
2 |