├── static └── .gitkeep ├── .eslintignore ├── config ├── prod.env.js ├── dev.env.js └── index.js ├── src ├── index.js ├── example │ ├── main.js │ ├── CustomFloatingLabel.vue │ └── App.vue ├── style │ └── _variables.scss └── components │ └── FloatingLabel.vue ├── .editorconfig ├── update.sh ├── .gitignore ├── .postcssrc.js ├── .babelrc ├── .eslintrc.js ├── example ├── static │ ├── js │ │ ├── manifest.61c76e7491f6c0b4695c.js │ │ ├── app.815a2ec1998252b08e53.js │ │ ├── manifest.61c76e7491f6c0b4695c.js.map │ │ └── app.815a2ec1998252b08e53.js.map │ └── css │ │ └── app.c24f7276b2bf59b6a230d4da7a500512.css └── index.html ├── index.html ├── README.md ├── package.json └── dist ├── vue-simple-floating-labels.min.js └── vue-simple-floating-labels.js /static/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | build/*.js 2 | config/*.js 3 | -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | module.exports = { 3 | NODE_ENV: '"production"' 4 | } 5 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import FloatingLabel from './components/FloatingLabel.vue' 2 | export default FloatingLabel; 3 | -------------------------------------------------------------------------------- /config/dev.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const merge = require('webpack-merge') 3 | const prodEnv = require('./prod.env') 4 | 5 | module.exports = merge(prodEnv, { 6 | NODE_ENV: '"development"' 7 | }) 8 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /update.sh: -------------------------------------------------------------------------------- 1 | yarn release 2 | yarn build 3 | yarn publish 4 | git add . && git commit -m "bump version" 5 | git push origin master 6 | git push origin `git subtree split --prefix example master`:gh-pages --force -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | npm-debug.log* 4 | yarn-debug.log* 5 | yarn-error.log* 6 | 7 | # Editor directories and files 8 | .idea 9 | .vscode 10 | *.suo 11 | *.ntvs* 12 | *.njsproj 13 | *.sln 14 | -------------------------------------------------------------------------------- /src/example/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App' 3 | 4 | Vue.config.productionTip = false 5 | 6 | /* eslint-disable no-new */ 7 | new Vue({ 8 | el: '#app', 9 | render: h => h(App) 10 | }) 11 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | // to edit target browsers: use "browserslist" field in package.json 6 | "autoprefixer": {} 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false, 5 | "targets": { 6 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 7 | } 8 | }], 9 | "stage-2" 10 | ], 11 | "plugins": ["transform-runtime"], 12 | "env": { 13 | "test": { 14 | "presets": ["env", "stage-2"], 15 | "plugins": ["istanbul"] 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parser: 'babel-eslint', 4 | env: { 5 | browser: true, 6 | node: true 7 | }, 8 | extends: 'standard', 9 | // required to lint *.vue files 10 | plugins: [ 11 | 'html' 12 | ], 13 | // add your custom rules here 14 | rules: { 15 | indent: ['error', 4], 16 | 'space-before-function-paren': 0, 17 | 'semi': 0, 18 | 'import/first': 0, 19 | 'no-debugger': 0, 20 | 'no-unused-vars': 0 21 | }, 22 | globals: {} 23 | }; 24 | -------------------------------------------------------------------------------- /src/style/_variables.scss: -------------------------------------------------------------------------------- 1 | $color__500: rgba(3,23,40,0.94); 2 | $color__400: rgba(3,23,40,0.78); 3 | $color__300: rgba(3,23,40,0.64); 4 | $color__200: rgba(3,23,40,0.34); 5 | $color__100: rgba(3,23,40,0.24); 6 | $color__50: rgba(3,23,40,0.14); 7 | $color__chewy-blue: #128CED; 8 | $color__price: #D0011B; 9 | 10 | $font__weight--extra-bold: 600; 11 | $font__weight--bold: 500; 12 | $font__weight--light: 300; 13 | 14 | $font__size--xxl: 36px; 15 | $font__size--xl: 28px; 16 | $font__size--l: 22px; 17 | $font__size--m: 18px; 18 | $font__size--s: 16px; 19 | $font__size--xs: 13px; 20 | $font__size--xxs: 11px; 21 | 22 | $margin--xxl: 64px; 23 | $margin--xl: 48px; 24 | $margin--l: 34px; 25 | $margin--m: 24px; 26 | $margin--s: 16px; 27 | $margin--xs: 8px; 28 | 29 | $easeInOutCubic: 0.645, 0.045, 0.355, 1; -------------------------------------------------------------------------------- /src/example/CustomFloatingLabel.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 21 | -------------------------------------------------------------------------------- /example/static/js/manifest.61c76e7491f6c0b4695c.js: -------------------------------------------------------------------------------- 1 | !function(e){function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}var r=window.webpackJsonp;window.webpackJsonp=function(t,c,a){for(var i,u,f,s=0,l=[];s 2 | 3 | 4 | 5 | vue-simple-floating-labels 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /example/index.html: -------------------------------------------------------------------------------- 1 | vue-simple-floating-labels
-------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vue simple floating labels 2 | 3 | Simple floating labels as a Vue component without jQuery. 4 | 5 | [Check out the demo](https://sabatinomasala.github.io/vue-simple-floating-labels/) 6 | 7 | ## Getting started 8 | 9 | Pull in the package: 10 | ``` js 11 | yarn add vue-simple-floating-labels 12 | ``` 13 | 14 | Import the component: 15 | ```js 16 | import FloatingLabel from 'vue-simple-floating-labels' 17 | export default { 18 | components: { 19 | FloatingLabel 20 | } 21 | } 22 | ``` 23 | Use in your template: 24 | ```vue 25 | 27 | 28 | 29 | ``` 30 | 31 | ## Config 32 | 33 | ### hasClearButton (default `true`) 34 | Input field should have a clear button. 35 | 36 | ### height (default `64`) 37 | The input height. 38 | 39 | ### line (default `true`) 40 | Input field should have a line below it (for accessibility reasons) 41 | 42 | ### scale (default `true`) 43 | Turn scale animation on or off 44 | 45 | ### hasError (default `false`) 46 | Whether or not to apply the error class 47 | 48 | ### labelOffset 49 | Set the top and left property of the label. 50 | 51 | **Defaults:** 52 | ``` 53 | { 54 | top: 10, 55 | left: 8 56 | } 57 | ``` 58 | ### classes 59 | Custom classes. 60 | 61 | **Defaults:** 62 | ``` 63 | { 64 | error: 'has-error' 65 | } 66 | ``` 67 | 68 | ### color 69 | Specify the focusColor, lineColor and blurredColor. 70 | 71 | **Defaults:** 72 | ``` 73 | { 74 | focusColor: '#128CED', 75 | errorColor: '#ff0000', 76 | lineColor: '#128CED', 77 | blurredColor: 'rgba(3, 23, 40, 0.34)' 78 | } 79 | ``` 80 | 81 | ## Events 82 | ``` 83 | clear: When the user presses the clear button (when using v-model you should clear the value) 84 | focus: On focus 85 | blur: On blur 86 | input: On input 87 | ``` 88 | 89 | ## TODO 90 | * Textarea 91 | * Select 92 | 93 | ## Credit 94 | 95 | * Inspiration: [Pen by Oscar Waczynski](https://codepen.io/osifer/pen/eWvxzB) 96 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-simple-floating-labels", 3 | "version": "1.0.4", 4 | "description": "Simple floating labels for Vue", 5 | "author": "Sabatino Masala ", 6 | "main": "dist/vue-simple-floating-labels.js", 7 | "scripts": { 8 | "dev": "node build/dev-server.js", 9 | "start": "npm run dev", 10 | "build": "node build/build.js", 11 | "lint": "eslint --ext .js,.vue src", 12 | "release": "yarn run lint && webpack --progress --hide-modules --config ./build/webpack.release.conf.js && webpack --progress --hide-modules --config ./build/webpack.release.min.conf.js" 13 | }, 14 | "dependencies": { 15 | "vue": "^2.4.2" 16 | }, 17 | "devDependencies": { 18 | "autoprefixer": "^7.1.2", 19 | "babel-core": "^6.22.1", 20 | "babel-eslint": "^7.1.1", 21 | "babel-loader": "^7.1.1", 22 | "babel-plugin-transform-runtime": "^6.22.0", 23 | "babel-preset-env": "^1.3.2", 24 | "babel-preset-stage-2": "^6.22.0", 25 | "babel-register": "^6.22.0", 26 | "chalk": "^2.0.1", 27 | "connect-history-api-fallback": "^1.3.0", 28 | "copy-webpack-plugin": "^4.0.1", 29 | "css-loader": "^0.28.0", 30 | "eslint": "^3.19.0", 31 | "eslint-config-standard": "^10.2.1", 32 | "eslint-friendly-formatter": "^3.0.0", 33 | "eslint-loader": "^1.7.1", 34 | "eslint-plugin-html": "^3.0.0", 35 | "eslint-plugin-import": "^2.7.0", 36 | "eslint-plugin-node": "^5.2.0", 37 | "eslint-plugin-promise": "^3.4.0", 38 | "eslint-plugin-standard": "^3.0.1", 39 | "eventsource-polyfill": "^0.9.6", 40 | "express": "^4.14.1", 41 | "extract-text-webpack-plugin": "^3.0.0", 42 | "file-loader": "^1.1.4", 43 | "friendly-errors-webpack-plugin": "^1.6.1", 44 | "html-webpack-plugin": "^2.30.1", 45 | "http-proxy-middleware": "^0.17.3", 46 | "node-sass": "^4.5.3", 47 | "opn": "^5.1.0", 48 | "optimize-css-assets-webpack-plugin": "^3.2.0", 49 | "ora": "^1.2.0", 50 | "portfinder": "^1.0.13", 51 | "rimraf": "^2.6.0", 52 | "sass-loader": "^6.0.6", 53 | "semver": "^5.3.0", 54 | "shelljs": "^0.7.6", 55 | "url-loader": "^0.5.8", 56 | "vue-loader": "^13.0.4", 57 | "vue-style-loader": "^3.0.1", 58 | "vue-template-compiler": "^2.4.2", 59 | "webpack": "^3.6.0", 60 | "webpack-bundle-analyzer": "^2.9.0", 61 | "webpack-dev-middleware": "^1.12.0", 62 | "webpack-hot-middleware": "^2.18.2", 63 | "webpack-merge": "^4.1.0" 64 | }, 65 | "engines": { 66 | "node": ">= 4.0.0", 67 | "npm": ">= 3.0.0" 68 | }, 69 | "browserslist": [ 70 | "> 1%", 71 | "last 2 versions", 72 | "not ie <= 8" 73 | ] 74 | } 75 | -------------------------------------------------------------------------------- /example/static/css/app.c24f7276b2bf59b6a230d4da7a500512.css: -------------------------------------------------------------------------------- 1 | body{font-family:SFUIText-Regular;font-family:-apple-system,BlinkMacSystemFont,sans-serif;font-size:16px;color:rgba(3,23,40,.64);line-height:24px;margin:0;background-color:rgba(3,23,40,.14)}*{box-sizing:border-box}.container{max-width:375px;margin:48px auto;min-height:100%;overflow:scroll;box-shadow:0 1px 0 0 rgba(3,23,40,.12),0 1px 2px 0 rgba(3,23,40,.1),0 2px 4px 0 rgba(3,23,40,.03),0 2px 8px 0 rgba(3,23,40,.07);background-color:#fcfcfc}h1,h2,h3,h4,h5,h6,p{margin:0}h1,h2,h3{color:rgba(3,23,40,.94)}h4,h5,h6{color:rgba(3,23,40,.78)}h1{font-size:36px;line-height:40px;font-weight:300}h1,h2{margin-bottom:16px}h2{font-size:28px;line-height:32px;font-weight:600}h3{font-size:22px;font-weight:500}h3,h4{line-height:24px;margin-bottom:8px}h4{font-size:18px}h5{font-size:16px;line-height:24px}h5,h6{margin-bottom:8px}h6{font-size:13px;line-height:16px}p+p{margin-top:16px}.text__callout{font-weight:500}.text--blue{color:#128ced}.text--red{color:#d0011b}.text--muted{color:rgba(3,23,40,.34)}.text--small{font-size:13px}.text--extra-small{font-size:11px;text-transform:uppercase}.text--center{text-align:center}.text--right{text-align:right}.text--invert{color:#fff}h1+p,h2+p{margin-top:16px}h3+p,h4+p,h5+p,h6+p{margin-top:8px}.section--xxl{margin-top:64px}.section--xl{margin-top:48px}.section--l{margin-top:34px}.section--m{margin-top:24px}.section--s{margin-top:16px}form{background-color:#fff;box-shadow:0 -2px 4px 0 rgba(3,23,40,.02),0 2px 4px 0 rgba(3,23,40,.02);display:inline-block;width:100%;position:relative}form:after,form:before{content:"";position:absolute;display:inline-block;top:0;left:0;right:0;height:1px;background-color:#e4e7e9;z-index:3}form:after{bottom:0;top:auto}.row{padding:0 8px}.note{color:rgba(3,23,40,.34);font-size:13px;text-align:center}.container>:last-child{margin-bottom:34px}.input__container[data-v-19d0ca9f]{position:relative;padding:0 8px;transition:.2s cubic-bezier(.645,.045,.355,1)}.input__container .slot-container[data-v-19d0ca9f]{height:100%}.input__container .slot-container input[data-v-19d0ca9f]{height:100%;font-size:16px;padding:0;border:0;display:block;width:100%;position:relative;background-color:transparent;transition:.2s cubic-bezier(.645,.045,.355,1)}.input__container.has-line .character-counter-container[data-v-19d0ca9f]:after,.input__container.has-line[data-v-19d0ca9f]:after{content:"";position:absolute;display:inline-block;top:auto;left:8px;right:8px;height:1px;background-color:#e4e7e9;z-index:3;bottom:0}.input__container+.input__container[data-v-19d0ca9f]:before{display:none}.input__container.input__container--focus .accessibility__icon[data-v-19d0ca9f]{-webkit-transform:scaleX(1);transform:scaleX(1)}.input__container.input__container--content .character-counter-container[data-v-19d0ca9f]{height:32px}.input__container.input__container--content label.label__placeholder[data-v-19d0ca9f]{opacity:0}.input__container.input__container--content .label__active[data-v-19d0ca9f]{opacity:1}.input__container.input__container--content .label__active.label__active--canscale[data-v-19d0ca9f]{-webkit-transform:translateZ(0) scale(.85);transform:translateZ(0) scale(.85)}.input__container.input__container--content .label__placeholder[data-v-19d0ca9f],.input__container.input__container--content input[data-v-19d0ca9f]{-webkit-transform:translate3d(0,6px,0);transform:translate3d(0,6px,0)}.input__container.input__container--focus.input__container--content label.label__active.label__active--canscale[data-v-19d0ca9f]{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}.input__container.input__container--focus.input__container--content label.label__placeholder[data-v-19d0ca9f]{opacity:0}.input__container.input__container--focus.input__container--content .clear__icon[data-v-19d0ca9f]{opacity:1}.input__container.input__container--focus.input__container--content .accessibility__icon[data-v-19d0ca9f]{-webkit-transform:scaleX(1);transform:scaleX(1)}.input__container.input__container--focus.input__container--content .carret__icon--down svg path[data-v-19d0ca9f]{fill:#128ced}.icon[data-v-19d0ca9f]{opacity:0;position:absolute;height:24px;width:24px;right:16px;top:50%;z-index:1;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.accessibility__icon[data-v-19d0ca9f]{position:absolute;height:2px;left:8px;right:8px;bottom:0;z-index:9;background-color:#128ced;-webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transform-origin:0 0;transform-origin:0 0}.accessibility__icon[data-v-19d0ca9f],.clear__icon[data-v-19d0ca9f]{border-radius:100px;transition:.2s cubic-bezier(.645,.045,.355,1)}.clear__icon[data-v-19d0ca9f]{cursor:pointer;background-color:rgba(3,23,40,.24);font-weight:700;z-index:1;color:#fff;text-align:center}input[data-v-19d0ca9f]{font-size:16px;color:rgba(3,23,40,.64);line-height:24px}input[data-v-19d0ca9f]:focus{outline:none}label[data-v-19d0ca9f]{position:absolute;top:0;left:0;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;transition:.2s cubic-bezier(.645,.045,.355,1)}label.label__placeholder[data-v-19d0ca9f]{top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);color:rgba(3,23,40,.4);left:8px}label.label__active[data-v-19d0ca9f]{font-size:13px;color:rgba(3,23,40,.34);font-weight:500;line-height:16px;opacity:0;-webkit-transform:translate3d(0,3px,0);transform:translate3d(0,3px,0);-webkit-transform-origin:0 0;transform-origin:0 0}label.label__character-counter[data-v-19d0ca9f]{font-size:13px;line-height:16px;color:rgba(3,23,40,.34);position:absolute;left:0;bottom:-14px;display:inline-block;top:auto;opacity:0}.my-custom-floating-label .input__container{border-radius:4px;box-shadow:0 0 0 1px #d9d9d9}.my-custom-floating-label .input__container .slot-container{position:relative}.my-custom-floating-label .input__container.has-error{box-shadow:0 0 0 1px red}.my-custom-floating-label .input__container.has-error.input__container--focus{box-shadow:0 0 0 2px red}.my-custom-floating-label .input__container.input__container--focus{box-shadow:0 0 0 2px #222} -------------------------------------------------------------------------------- /example/static/js/app.815a2ec1998252b08e53.js: -------------------------------------------------------------------------------- 1 | webpackJsonp([1],{"0ob2":function(t,e,s){"use strict";function n(t){s("lrws")}var a=s("xpmu"),i=s("ZOoH"),o=s("VU/8"),r=n,l=o(a.a,i.a,r,null,null);e.a=l.exports},"8OST":function(t,e,s){"use strict";function n(t){s("ahKP")}var a=s("k30G"),i=s("fsXK"),o=s("VU/8"),r=n,l=o(a.a,i.a,r,"data-v-19d0ca9f",null);e.a=l.exports},"M/Jr":function(t,e,s){"use strict";var n=s("8OST"),a=s("0ob2");e.a={components:{CustomFloatingLabel:a.a,FloatingLabel:n.a},computed:{hasError:function(){return""!==this.value}},data:function(){return{value:""}}}},YTGu:function(t,e){},Ygin:function(t,e,s){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=s("/5sW"),a=s("l30E");n.a.config.productionTip=!1,new n.a({el:"#app",render:function(t){return t(a.a)}})},Z4u7:function(t,e,s){"use strict";var n=function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{attrs:{id:"app"}},[s("div",{staticClass:"container"},[t._m(0),t._v(" "),s("div",{staticClass:"section section--xl"},[s("form",{attrs:{action:"#"}},[s("div",{staticClass:"row"},[s("FloatingLabel",{attrs:{config:{label:"Default"}}},[s("input",{attrs:{name:"default",type:"text"}})])],1),t._v(" "),s("div",{staticClass:"row"},[s("FloatingLabel",{attrs:{config:{label:"Custom color",name:"custom-color",color:{focusColor:"#ff00ff",lineColor:"#ff00ff"},hasClearButton:!1}}},[s("input",{attrs:{name:"custom-color",type:"text"}})])],1),t._v(" "),s("div",{staticClass:"row",staticStyle:{margin:"10px"}},[s("CustomFloatingLabel",{attrs:{config:{label:"Wrapper Component",name:"wrapper",line:!1,scale:!1}}},[s("input",{attrs:{name:"wrapper",type:"text"}})])],1),t._v(" "),s("div",{staticClass:"row",staticStyle:{margin:"10px"}},[s("CustomFloatingLabel",{attrs:{config:{label:"Error example",name:"error",line:!1,scale:!1,height:50,labelOffset:{top:3,left:8},classes:{error:"has-error"},hasError:t.hasError,hasClearButton:!1}}},[s("input",{directives:[{name:"model",rawName:"v-model",value:t.value,expression:"value"}],attrs:{name:"error",type:"text"},domProps:{value:t.value},on:{input:function(e){e.target.composing||(t.value=e.target.value)}}})]),t._v(" "),t.hasError?s("small",{staticStyle:{color:"#f00","font-weight":"bold"}},[t._v("This field contains an error.")]):t._e()],1)])])])])},a=[function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"section section--xl"},[s("h3",{staticClass:"text--center"},[t._v("Simple Floating Labels Vue")])])}],i={render:n,staticRenderFns:a};e.a=i},ZOoH:function(t,e,s){"use strict";var n=function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"my-custom-floating-label"},[s("FloatingLabel",{attrs:{config:t.config},on:{focus:function(e){t.focus=!0},blur:function(e){t.focus=!1}}},[t._t("default")],2)],1)},a=[],i={render:n,staticRenderFns:a};e.a=i},ahKP:function(t,e){},fsXK:function(t,e,s){"use strict";var n=function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"input__container",class:t.containerClasses,style:t.inputContainerStyle},[t.settings.hasClearButton?s("div",{staticClass:"icon clear__icon",on:{mousedown:function(e){e.stopPropagation(),e.preventDefault(),t.clear(e)}}},[s("svg",{attrs:{width:"10px",height:"11px",viewBox:"3 3 10 11",version:"1.1",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink"}},[s("defs"),t._v(" "),s("path",{attrs:{id:"Combined-Shape",d:"M8,6.58578644 L5.17157288,3.75735931 L3.75735931,5.17157288 L6.58578644,8 L3.75735931,10.8284271 L5.17157288,12.2426407 L8,9.41421356 L10.8284271,12.2426407 L12.2426407,10.8284271 L9.41421356,8 L12.2426407,5.17157288 L10.8284271,3.75735931 L8,6.58578644 Z",stroke:"none",fill:"#FFFFFF","fill-rule":"evenodd"}})])]):t._e(),t._v(" "),t.settings.line?s("div",{staticClass:"accessibility__icon",style:t.accessibilityStyle}):t._e(),t._v(" "),s("div",{ref:"input-container",staticClass:"slot-container"},[t._t("default")],2),t._v(" "),s("label",{staticClass:"label__placeholder",attrs:{for:t.labelName}},[t._v(t._s(t.config.label))]),t._v(" "),s("label",{staticClass:"label__active",class:t.activeLabelClasses,style:t.activeLabelStyle,attrs:{for:t.labelName}},[t._v(t._s(t.config.label))])])},a=[],i={render:n,staticRenderFns:a};e.a=i},k30G:function(t,e,s){"use strict";var n=s("woOf"),a=s.n(n);e.a={name:"FloatingLabel",props:{config:{required:!0}},computed:{activeLabelClasses:function(){return{"label__active--canscale":this.settings.scale}},hasClearButton:function(){return!!this.config.hasOwnProperty("hasClearButton")&&this.config.hasClearButton},containerClasses:function(){var t={"has-line":this.settings.line,"input__container--focus":this.hasFocus,"input__container--content":this.hasContent};return this.settings.hasError&&(t[this.settings.classes.error]=!0),t},labelName:function(){return void 0!==this.config.name?this.config.name:this.config.label.toLowerCase()},accessibilityStyle:function(){var t=this.settings.color.lineColor;return this.settings.hasError&&(t=this.settings.color.errorColor),{"background-color":t}},labelColor:function(){return this.settings.hasError?this.settings.color.errorColor:this.hasFocus?this.settings.color.focusColor:this.settings.color.blurredColor},activeLabelStyle:function(){return{top:this.settings.labelOffset.top+"px",left:this.settings.labelOffset.left+"px",color:this.labelColor}},inputContainerStyle:function(){return{height:this.settings.height+"px"}},settings:function(){return a()({},this.defaultSettings,this.config)}},methods:{clear:function(){this.formElement.value="",this.hasContent=!1,this.hasFocus=!1,this.$emit("clear")},focus:function(t){this.hasFocus=!0,this.$emit("focus")},input:function(t){this.hasFocus=!0,this.hasContent=""!==t.target.value,this.$emit("input")},blur:function(t){this.hasFocus=!1,this.$emit("blur")}},mounted:function(){this.formElement=this.$refs["input-container"].querySelector("input, select"),this.formElement&&(this.formElement.addEventListener("input",this.input),this.formElement.addEventListener("blur",this.blur),this.formElement.addEventListener("focus",this.focus),"select-one"===this.formElement.type&&(this.hasContent=!0,this.settings.scale=!1,this.settings.hasClearButton=!1))},data:function(){return{defaultSettings:{classes:{error:"has-error"},hasError:!1,height:64,hasClearButton:!0,line:!0,scale:!0,labelOffset:{top:10,left:8},color:{focusColor:"#128CED",lineColor:"#128CED",errorColor:"#ff0000",blurredColor:"rgba(3, 23, 40, 0.34)"}},hasFocus:!1,hasContent:!1}}}},l30E:function(t,e,s){"use strict";function n(t){s("YTGu")}var a=s("M/Jr"),i=s("Z4u7"),o=s("VU/8"),r=n,l=o(a.a,i.a,r,null,null);e.a=l.exports},lrws:function(t,e){},xpmu:function(t,e,s){"use strict";var n=s("8OST");e.a={props:["config"],components:{FloatingLabel:n.a}}}},["Ygin"]); 2 | //# sourceMappingURL=app.815a2ec1998252b08e53.js.map -------------------------------------------------------------------------------- /src/example/App.vue: -------------------------------------------------------------------------------- 1 | 37 | 38 | 58 | 59 | -------------------------------------------------------------------------------- /src/components/FloatingLabel.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 153 | 154 | -------------------------------------------------------------------------------- /example/static/js/manifest.61c76e7491f6c0b4695c.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///static/js/manifest.61c76e7491f6c0b4695c.js","webpack:///webpack/bootstrap e95ee4e16f123bac8c55"],"names":["modules","__webpack_require__","moduleId","installedModules","exports","module","i","l","call","parentJsonpFunction","window","chunkIds","moreModules","executeModules","chunkId","result","resolves","length","installedChunks","push","Object","prototype","hasOwnProperty","shift","s","2","e","onScriptComplete","script","onerror","onload","clearTimeout","timeout","chunk","Error","undefined","installedChunkData","Promise","resolve","promise","reject","head","document","getElementsByTagName","createElement","type","charset","async","nc","setAttribute","src","p","0","1","setTimeout","appendChild","m","c","d","name","getter","o","defineProperty","configurable","enumerable","get","n","__esModule","object","property","oe","err","console","error"],"mappings":"CAAS,SAAUA,GCuCnB,QAAAC,GAAAC,GAGA,GAAAC,EAAAD,GACA,MAAAC,GAAAD,GAAAE,OAGA,IAAAC,GAAAF,EAAAD,IACAI,EAAAJ,EACAK,GAAA,EACAH,WAUA,OANAJ,GAAAE,GAAAM,KAAAH,EAAAD,QAAAC,IAAAD,QAAAH,GAGAI,EAAAE,GAAA,EAGAF,EAAAD,QA1DA,GAAAK,GAAAC,OAAA,YACAA,QAAA,sBAAAC,EAAAC,EAAAC,GAIA,IADA,GAAAX,GAAAY,EAAAC,EAAAT,EAAA,EAAAU,KACQV,EAAAK,EAAAM,OAAoBX,IAC5BQ,EAAAH,EAAAL,GACAY,EAAAJ,IACAE,EAAAG,KAAAD,EAAAJ,GAAA,IAEAI,EAAAJ,GAAA,CAEA,KAAAZ,IAAAU,GACAQ,OAAAC,UAAAC,eAAAd,KAAAI,EAAAV,KACAF,EAAAE,GAAAU,EAAAV,GAIA,KADAO,KAAAE,EAAAC,EAAAC,GACAG,EAAAC,QACAD,EAAAO,SAEA,IAAAV,EACA,IAAAP,EAAA,EAAYA,EAAAO,EAAAI,OAA2BX,IACvCS,EAAAd,IAAAuB,EAAAX,EAAAP,GAGA,OAAAS,GAIA,IAAAZ,MAGAe,GACAO,EAAA,EA6BAxB,GAAAyB,EAAA,SAAAZ,GA+BA,QAAAa,KAEAC,EAAAC,QAAAD,EAAAE,OAAA,KACAC,aAAAC,EACA,IAAAC,GAAAf,EAAAJ,EACA,KAAAmB,IACAA,GACAA,EAAA,MAAAC,OAAA,iBAAApB,EAAA,aAEAI,EAAAJ,OAAAqB,IAvCA,GAAAC,GAAAlB,EAAAJ,EACA,QAAAsB,EACA,UAAAC,SAAA,SAAAC,GAA0CA,KAI1C,IAAAF,EACA,MAAAA,GAAA,EAIA,IAAAG,GAAA,GAAAF,SAAA,SAAAC,EAAAE,GACAJ,EAAAlB,EAAAJ,IAAAwB,EAAAE,IAEAJ,GAAA,GAAAG,CAGA,IAAAE,GAAAC,SAAAC,qBAAA,WACAf,EAAAc,SAAAE,cAAA,SACAhB,GAAAiB,KAAA,kBACAjB,EAAAkB,QAAA,QACAlB,EAAAmB,OAAA,EACAnB,EAAAI,QAAA,KAEA/B,EAAA+C,IACApB,EAAAqB,aAAA,QAAAhD,EAAA+C,IAEApB,EAAAsB,IAAAjD,EAAAkD,EAAA,aAAArC,EAAA,KAAwEsC,EAAA,uBAAAC,EAAA,wBAAsDvC,GAAA,KAC9H,IAAAkB,GAAAsB,WAAA3B,EAAA,KAgBA,OAfAC,GAAAC,QAAAD,EAAAE,OAAAH,EAaAc,EAAAc,YAAA3B,GAEAW,GAIAtC,EAAAuD,EAAAxD,EAGAC,EAAAwD,EAAAtD,EAGAF,EAAAyD,EAAA,SAAAtD,EAAAuD,EAAAC,GACA3D,EAAA4D,EAAAzD,EAAAuD,IACAvC,OAAA0C,eAAA1D,EAAAuD,GACAI,cAAA,EACAC,YAAA,EACAC,IAAAL,KAMA3D,EAAAiE,EAAA,SAAA7D,GACA,GAAAuD,GAAAvD,KAAA8D,WACA,WAA2B,MAAA9D,GAAA,SAC3B,WAAiC,MAAAA,GAEjC,OADAJ,GAAAyD,EAAAE,EAAA,IAAAA,GACAA,GAIA3D,EAAA4D,EAAA,SAAAO,EAAAC,GAAsD,MAAAjD,QAAAC,UAAAC,eAAAd,KAAA4D,EAAAC,IAGtDpE,EAAAkD,EAAA,GAGAlD,EAAAqE,GAAA,SAAAC,GAA8D,KAApBC,SAAAC,MAAAF,GAAoBA","file":"static/js/manifest.61c76e7491f6c0b4695c.js","sourcesContent":["/******/ (function(modules) { // webpackBootstrap\n/******/ \t// install a JSONP callback for chunk loading\n/******/ \tvar parentJsonpFunction = window[\"webpackJsonp\"];\n/******/ \twindow[\"webpackJsonp\"] = function webpackJsonpCallback(chunkIds, moreModules, executeModules) {\n/******/ \t\t// add \"moreModules\" to the modules object,\n/******/ \t\t// then flag all \"chunkIds\" as loaded and fire callback\n/******/ \t\tvar moduleId, chunkId, i = 0, resolves = [], result;\n/******/ \t\tfor(;i < chunkIds.length; i++) {\n/******/ \t\t\tchunkId = chunkIds[i];\n/******/ \t\t\tif(installedChunks[chunkId]) {\n/******/ \t\t\t\tresolves.push(installedChunks[chunkId][0]);\n/******/ \t\t\t}\n/******/ \t\t\tinstalledChunks[chunkId] = 0;\n/******/ \t\t}\n/******/ \t\tfor(moduleId in moreModules) {\n/******/ \t\t\tif(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {\n/******/ \t\t\t\tmodules[moduleId] = moreModules[moduleId];\n/******/ \t\t\t}\n/******/ \t\t}\n/******/ \t\tif(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules, executeModules);\n/******/ \t\twhile(resolves.length) {\n/******/ \t\t\tresolves.shift()();\n/******/ \t\t}\n/******/ \t\tif(executeModules) {\n/******/ \t\t\tfor(i=0; i < executeModules.length; i++) {\n/******/ \t\t\t\tresult = __webpack_require__(__webpack_require__.s = executeModules[i]);\n/******/ \t\t\t}\n/******/ \t\t}\n/******/ \t\treturn result;\n/******/ \t};\n/******/\n/******/ \t// The module cache\n/******/ \tvar installedModules = {};\n/******/\n/******/ \t// objects to store loaded and loading chunks\n/******/ \tvar installedChunks = {\n/******/ \t\t2: 0\n/******/ \t};\n/******/\n/******/ \t// The require function\n/******/ \tfunction __webpack_require__(moduleId) {\n/******/\n/******/ \t\t// Check if module is in cache\n/******/ \t\tif(installedModules[moduleId]) {\n/******/ \t\t\treturn installedModules[moduleId].exports;\n/******/ \t\t}\n/******/ \t\t// Create a new module (and put it into the cache)\n/******/ \t\tvar module = installedModules[moduleId] = {\n/******/ \t\t\ti: moduleId,\n/******/ \t\t\tl: false,\n/******/ \t\t\texports: {}\n/******/ \t\t};\n/******/\n/******/ \t\t// Execute the module function\n/******/ \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n/******/\n/******/ \t\t// Flag the module as loaded\n/******/ \t\tmodule.l = true;\n/******/\n/******/ \t\t// Return the exports of the module\n/******/ \t\treturn module.exports;\n/******/ \t}\n/******/\n/******/ \t// This file contains only the entry chunk.\n/******/ \t// The chunk loading function for additional chunks\n/******/ \t__webpack_require__.e = function requireEnsure(chunkId) {\n/******/ \t\tvar installedChunkData = installedChunks[chunkId];\n/******/ \t\tif(installedChunkData === 0) {\n/******/ \t\t\treturn new Promise(function(resolve) { resolve(); });\n/******/ \t\t}\n/******/\n/******/ \t\t// a Promise means \"currently loading\".\n/******/ \t\tif(installedChunkData) {\n/******/ \t\t\treturn installedChunkData[2];\n/******/ \t\t}\n/******/\n/******/ \t\t// setup Promise in chunk cache\n/******/ \t\tvar promise = new Promise(function(resolve, reject) {\n/******/ \t\t\tinstalledChunkData = installedChunks[chunkId] = [resolve, reject];\n/******/ \t\t});\n/******/ \t\tinstalledChunkData[2] = promise;\n/******/\n/******/ \t\t// start chunk loading\n/******/ \t\tvar head = document.getElementsByTagName('head')[0];\n/******/ \t\tvar script = document.createElement('script');\n/******/ \t\tscript.type = 'text/javascript';\n/******/ \t\tscript.charset = 'utf-8';\n/******/ \t\tscript.async = true;\n/******/ \t\tscript.timeout = 120000;\n/******/\n/******/ \t\tif (__webpack_require__.nc) {\n/******/ \t\t\tscript.setAttribute(\"nonce\", __webpack_require__.nc);\n/******/ \t\t}\n/******/ \t\tscript.src = __webpack_require__.p + \"static/js/\" + chunkId + \".\" + {\"0\":\"3b3cf806a52e58ff75ee\",\"1\":\"815a2ec1998252b08e53\"}[chunkId] + \".js\";\n/******/ \t\tvar timeout = setTimeout(onScriptComplete, 120000);\n/******/ \t\tscript.onerror = script.onload = onScriptComplete;\n/******/ \t\tfunction onScriptComplete() {\n/******/ \t\t\t// avoid mem leaks in IE.\n/******/ \t\t\tscript.onerror = script.onload = null;\n/******/ \t\t\tclearTimeout(timeout);\n/******/ \t\t\tvar chunk = installedChunks[chunkId];\n/******/ \t\t\tif(chunk !== 0) {\n/******/ \t\t\t\tif(chunk) {\n/******/ \t\t\t\t\tchunk[1](new Error('Loading chunk ' + chunkId + ' failed.'));\n/******/ \t\t\t\t}\n/******/ \t\t\t\tinstalledChunks[chunkId] = undefined;\n/******/ \t\t\t}\n/******/ \t\t};\n/******/ \t\thead.appendChild(script);\n/******/\n/******/ \t\treturn promise;\n/******/ \t};\n/******/\n/******/ \t// expose the modules object (__webpack_modules__)\n/******/ \t__webpack_require__.m = modules;\n/******/\n/******/ \t// expose the module cache\n/******/ \t__webpack_require__.c = installedModules;\n/******/\n/******/ \t// define getter function for harmony exports\n/******/ \t__webpack_require__.d = function(exports, name, getter) {\n/******/ \t\tif(!__webpack_require__.o(exports, name)) {\n/******/ \t\t\tObject.defineProperty(exports, name, {\n/******/ \t\t\t\tconfigurable: false,\n/******/ \t\t\t\tenumerable: true,\n/******/ \t\t\t\tget: getter\n/******/ \t\t\t});\n/******/ \t\t}\n/******/ \t};\n/******/\n/******/ \t// getDefaultExport function for compatibility with non-harmony modules\n/******/ \t__webpack_require__.n = function(module) {\n/******/ \t\tvar getter = module && module.__esModule ?\n/******/ \t\t\tfunction getDefault() { return module['default']; } :\n/******/ \t\t\tfunction getModuleExports() { return module; };\n/******/ \t\t__webpack_require__.d(getter, 'a', getter);\n/******/ \t\treturn getter;\n/******/ \t};\n/******/\n/******/ \t// Object.prototype.hasOwnProperty.call\n/******/ \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n/******/\n/******/ \t// __webpack_public_path__\n/******/ \t__webpack_require__.p = \"\";\n/******/\n/******/ \t// on error function for async loading\n/******/ \t__webpack_require__.oe = function(err) { console.error(err); throw err; };\n/******/ })\n/************************************************************************/\n/******/ ([]);\n\n\n// WEBPACK FOOTER //\n// static/js/manifest.61c76e7491f6c0b4695c.js"," \t// install a JSONP callback for chunk loading\n \tvar parentJsonpFunction = window[\"webpackJsonp\"];\n \twindow[\"webpackJsonp\"] = function webpackJsonpCallback(chunkIds, moreModules, executeModules) {\n \t\t// add \"moreModules\" to the modules object,\n \t\t// then flag all \"chunkIds\" as loaded and fire callback\n \t\tvar moduleId, chunkId, i = 0, resolves = [], result;\n \t\tfor(;i < chunkIds.length; i++) {\n \t\t\tchunkId = chunkIds[i];\n \t\t\tif(installedChunks[chunkId]) {\n \t\t\t\tresolves.push(installedChunks[chunkId][0]);\n \t\t\t}\n \t\t\tinstalledChunks[chunkId] = 0;\n \t\t}\n \t\tfor(moduleId in moreModules) {\n \t\t\tif(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {\n \t\t\t\tmodules[moduleId] = moreModules[moduleId];\n \t\t\t}\n \t\t}\n \t\tif(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules, executeModules);\n \t\twhile(resolves.length) {\n \t\t\tresolves.shift()();\n \t\t}\n \t\tif(executeModules) {\n \t\t\tfor(i=0; i < executeModules.length; i++) {\n \t\t\t\tresult = __webpack_require__(__webpack_require__.s = executeModules[i]);\n \t\t\t}\n \t\t}\n \t\treturn result;\n \t};\n\n \t// The module cache\n \tvar installedModules = {};\n\n \t// objects to store loaded and loading chunks\n \tvar installedChunks = {\n \t\t2: 0\n \t};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n \t// This file contains only the entry chunk.\n \t// The chunk loading function for additional chunks\n \t__webpack_require__.e = function requireEnsure(chunkId) {\n \t\tvar installedChunkData = installedChunks[chunkId];\n \t\tif(installedChunkData === 0) {\n \t\t\treturn new Promise(function(resolve) { resolve(); });\n \t\t}\n\n \t\t// a Promise means \"currently loading\".\n \t\tif(installedChunkData) {\n \t\t\treturn installedChunkData[2];\n \t\t}\n\n \t\t// setup Promise in chunk cache\n \t\tvar promise = new Promise(function(resolve, reject) {\n \t\t\tinstalledChunkData = installedChunks[chunkId] = [resolve, reject];\n \t\t});\n \t\tinstalledChunkData[2] = promise;\n\n \t\t// start chunk loading\n \t\tvar head = document.getElementsByTagName('head')[0];\n \t\tvar script = document.createElement('script');\n \t\tscript.type = 'text/javascript';\n \t\tscript.charset = 'utf-8';\n \t\tscript.async = true;\n \t\tscript.timeout = 120000;\n\n \t\tif (__webpack_require__.nc) {\n \t\t\tscript.setAttribute(\"nonce\", __webpack_require__.nc);\n \t\t}\n \t\tscript.src = __webpack_require__.p + \"static/js/\" + chunkId + \".\" + {\"0\":\"3b3cf806a52e58ff75ee\",\"1\":\"815a2ec1998252b08e53\"}[chunkId] + \".js\";\n \t\tvar timeout = setTimeout(onScriptComplete, 120000);\n \t\tscript.onerror = script.onload = onScriptComplete;\n \t\tfunction onScriptComplete() {\n \t\t\t// avoid mem leaks in IE.\n \t\t\tscript.onerror = script.onload = null;\n \t\t\tclearTimeout(timeout);\n \t\t\tvar chunk = installedChunks[chunkId];\n \t\t\tif(chunk !== 0) {\n \t\t\t\tif(chunk) {\n \t\t\t\t\tchunk[1](new Error('Loading chunk ' + chunkId + ' failed.'));\n \t\t\t\t}\n \t\t\t\tinstalledChunks[chunkId] = undefined;\n \t\t\t}\n \t\t};\n \t\thead.appendChild(script);\n\n \t\treturn promise;\n \t};\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, {\n \t\t\t\tconfigurable: false,\n \t\t\t\tenumerable: true,\n \t\t\t\tget: getter\n \t\t\t});\n \t\t}\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// on error function for async loading\n \t__webpack_require__.oe = function(err) { console.error(err); throw err; };\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap e95ee4e16f123bac8c55"],"sourceRoot":""} -------------------------------------------------------------------------------- /dist/vue-simple-floating-labels.min.js: -------------------------------------------------------------------------------- 1 | !function(n,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.VueSimpleLoadingLabels=t():n.VueSimpleLoadingLabels=t()}(this,function(){return function(n){function t(r){if(e[r])return e[r].exports;var o=e[r]={i:r,l:!1,exports:{}};return n[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var e={};return t.m=n,t.c=e,t.d=function(n,e,r){t.o(n,e)||Object.defineProperty(n,e,{configurable:!1,enumerable:!0,get:r})},t.n=function(n){var e=n&&n.__esModule?function(){return n.default}:function(){return n};return t.d(e,"a",e),e},t.o=function(n,t){return Object.prototype.hasOwnProperty.call(n,t)},t.p="",t(t.s=9)}([function(n,t){var e=n.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=e)},function(n,t){n.exports=function(n){return"object"==typeof n?null!==n:"function"==typeof n}},function(n,t,e){n.exports=!e(3)(function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a})},function(n,t){n.exports=function(n){try{return!!n()}catch(n){return!0}}},function(n,t){var e=n.exports={version:"2.5.1"};"number"==typeof __e&&(__e=e)},function(n,t,e){var r=e(6),o=e(7);n.exports=function(n){return r(o(n))}},function(n,t,e){var r=e(35);n.exports=Object("z").propertyIsEnumerable(0)?Object:function(n){return"String"==r(n)?n.split(""):Object(n)}},function(n,t){n.exports=function(n){if(void 0==n)throw TypeError("Can't call method on "+n);return n}},function(n,t){var e=Math.ceil,r=Math.floor;n.exports=function(n){return isNaN(n=+n)?0:(n>0?r:e)(n)}},function(n,t,e){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=e(10);t.default=r.a},function(n,t,e){"use strict";function r(n){a||e(11)}var o=e(17),i=e(46),a=!1,s=e(16),c=r,u=s(o.a,i.a,c,"data-v-19d0ca9f",null);u.options.__file="src/components/FloatingLabel.vue",u.esModule&&Object.keys(u.esModule).some(function(n){return"default"!==n&&"__"!==n.substr(0,2)})&&console.error("named exports are not supported in *.vue files."),u.options.functional&&console.error("[vue-loader] FloatingLabel.vue: functional components are not supported with templates, they should use render functions."),t.a=u.exports},function(n,t,e){var r=e(12);"string"==typeof r&&(r=[[n.i,r,""]]),r.locals&&(n.exports=r.locals);e(14)("5062cdbb",r,!1)},function(n,t,e){t=n.exports=e(13)(!1),t.push([n.i,"\n.input__container[data-v-19d0ca9f] {\n position: relative;\n padding: 0 8px;\n -webkit-transition: 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n transition: 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n}\n.input__container .slot-container[data-v-19d0ca9f] {\n height: 100%;\n}\n.input__container .slot-container input[data-v-19d0ca9f] {\n height: 100%;\n font-size: 16px;\n padding: 0 0;\n border: 0;\n display: block;\n width: 100%;\n position: relative;\n background-color: transparent;\n -webkit-transition: 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n transition: 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n}\n.input__container.has-line[data-v-19d0ca9f]:after, .input__container.has-line .character-counter-container[data-v-19d0ca9f]:after {\n content: '';\n position: absolute;\n display: inline-block;\n top: auto;\n left: 8px;\n right: 8px;\n height: 1px;\n background-color: #E4E7E9;\n z-index: 3;\n bottom: 0;\n}\n.input__container + .input__container[data-v-19d0ca9f]:before {\n display: none;\n}\n.input__container.input__container--focus .accessibility__icon[data-v-19d0ca9f] {\n -webkit-transform: scaleX(1);\n transform: scaleX(1);\n}\n.input__container.input__container--content .character-counter-container[data-v-19d0ca9f] {\n height: 32px;\n}\n.input__container.input__container--content label.label__placeholder[data-v-19d0ca9f] {\n opacity: 0;\n}\n.input__container.input__container--content .label__active[data-v-19d0ca9f] {\n opacity: 1;\n}\n.input__container.input__container--content .label__active.label__active--canscale[data-v-19d0ca9f] {\n -webkit-transform: translate3d(0, 0px, 0) scale(0.85);\n transform: translate3d(0, 0px, 0) scale(0.85);\n}\n.input__container.input__container--content input[data-v-19d0ca9f], .input__container.input__container--content .label__placeholder[data-v-19d0ca9f] {\n -webkit-transform: translate3d(0, 6px, 0);\n transform: translate3d(0, 6px, 0);\n}\n.input__container.input__container--focus.input__container--content label.label__active.label__active--canscale[data-v-19d0ca9f] {\n opacity: 1;\n -webkit-transform: translate3d(0, 0px, 0);\n transform: translate3d(0, 0px, 0);\n}\n.input__container.input__container--focus.input__container--content label.label__placeholder[data-v-19d0ca9f] {\n opacity: 0;\n}\n.input__container.input__container--focus.input__container--content .clear__icon[data-v-19d0ca9f] {\n opacity: 1;\n}\n.input__container.input__container--focus.input__container--content .accessibility__icon[data-v-19d0ca9f] {\n -webkit-transform: scaleX(1);\n transform: scaleX(1);\n}\n.input__container.input__container--focus.input__container--content .carret__icon--down svg path[data-v-19d0ca9f] {\n fill: #128CED;\n}\n.icon[data-v-19d0ca9f] {\n opacity: 0;\n position: absolute;\n height: 24px;\n width: 24px;\n right: 16px;\n top: 50%;\n z-index: 1;\n -webkit-transform: translate3d(0, -50%, 0);\n transform: translate3d(0, -50%, 0);\n}\n.accessibility__icon[data-v-19d0ca9f] {\n position: absolute;\n height: 2px;\n left: 8px;\n right: 8px;\n bottom: 0;\n z-index: 9;\n border-radius: 100px;\n background-color: #128CED;\n -webkit-transition: 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n transition: 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n -webkit-transform: scaleX(0);\n transform: scaleX(0);\n -webkit-transform-origin: 0 0;\n transform-origin: 0 0;\n}\n.clear__icon[data-v-19d0ca9f] {\n cursor: pointer;\n background-color: rgba(3, 23, 40, 0.24);\n font-weight: bold;\n border-radius: 100px;\n z-index: 1;\n color: white;\n text-align: center;\n -webkit-transition: 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n transition: 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n}\ninput[data-v-19d0ca9f] {\n font-size: 16px;\n color: rgba(3, 23, 40, 0.64);\n line-height: 24px;\n}\ninput[data-v-19d0ca9f]:focus {\n outline: none;\n}\nlabel[data-v-19d0ca9f] {\n position: absolute;\n top: 0;\n left: 0;\n pointer-events: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n -webkit-transition: 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n transition: 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n}\nlabel.label__placeholder[data-v-19d0ca9f] {\n top: 50%;\n -webkit-transform: translate(0, -50%);\n transform: translate(0, -50%);\n color: rgba(3, 23, 40, 0.4);\n left: 8px;\n}\nlabel.label__active[data-v-19d0ca9f] {\n font-size: 13px;\n color: rgba(3, 23, 40, 0.34);\n font-weight: 500;\n line-height: 16px;\n opacity: 0;\n -webkit-transform: translate3d(0, 3px, 0);\n transform: translate3d(0, 3px, 0);\n -webkit-transform-origin: 0 0;\n transform-origin: 0 0;\n}\nlabel.label__character-counter[data-v-19d0ca9f] {\n font-size: 13px;\n line-height: 16px;\n color: rgba(3, 23, 40, 0.34);\n position: absolute;\n left: 0;\n bottom: -14px;\n display: inline-block;\n top: auto;\n opacity: 0;\n}\n",""])},function(n,t){function e(n,t){var e=n[1]||"",o=n[3];if(!o)return e;if(t&&"function"==typeof btoa){var i=r(o);return[e].concat(o.sources.map(function(n){return"/*# sourceURL="+o.sourceRoot+n+" */"})).concat([i]).join("\n")}return[e].join("\n")}function r(n){return"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(n))))+" */"}n.exports=function(n){var t=[];return t.toString=function(){return this.map(function(t){var r=e(t,n);return t[2]?"@media "+t[2]+"{"+r+"}":r}).join("")},t.i=function(n,e){"string"==typeof n&&(n=[[null,n,""]]);for(var r={},o=0;oe.parts.length&&(r.parts.length=e.parts.length)}else{for(var a=[],o=0;ou;)for(var p,d=s(arguments[u++]),h=l?r(d).concat(l(d)):r(d),_=h.length,v=0;_>v;)f.call(d,p=h[v++])&&(e[p]=d[p]);return e}:c},function(n,t,e){var r=e(33),o=e(42);n.exports=Object.keys||function(n){return r(n,o)}},function(n,t,e){var r=e(34),o=e(5),i=e(36)(!1),a=e(39)("IE_PROTO");n.exports=function(n,t){var e,s=o(n),c=0,u=[];for(e in s)e!=a&&r(s,e)&&u.push(e);for(;t.length>c;)r(s,e=t[c++])&&(~i(u,e)||u.push(e));return u}},function(n,t){var e={}.hasOwnProperty;n.exports=function(n,t){return e.call(n,t)}},function(n,t){var e={}.toString;n.exports=function(n){return e.call(n).slice(8,-1)}},function(n,t,e){var r=e(5),o=e(37),i=e(38);n.exports=function(n){return function(t,e,a){var s,c=r(t),u=o(c.length),l=i(a,u);if(n&&e!=e){for(;u>l;)if((s=c[l++])!=s)return!0}else for(;u>l;l++)if((n||l in c)&&c[l]===e)return n||l||0;return!n&&-1}}},function(n,t,e){var r=e(8),o=Math.min;n.exports=function(n){return n>0?o(r(n),9007199254740991):0}},function(n,t,e){var r=e(8),o=Math.max,i=Math.min;n.exports=function(n,t){return n=r(n),n<0?o(n+t,0):i(n,t)}},function(n,t,e){var r=e(40)("keys"),o=e(41);n.exports=function(n){return r[n]||(r[n]=o(n))}},function(n,t,e){var r=e(0),o=r["__core-js_shared__"]||(r["__core-js_shared__"]={});n.exports=function(n){return o[n]||(o[n]={})}},function(n,t){var e=0,r=Math.random();n.exports=function(n){return"Symbol(".concat(void 0===n?"":n,")_",(++e+r).toString(36))}},function(n,t){n.exports="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",")},function(n,t){t.f=Object.getOwnPropertySymbols},function(n,t){t.f={}.propertyIsEnumerable},function(n,t,e){var r=e(7);n.exports=function(n){return Object(r(n))}},function(n,t,e){"use strict";var r=function(){var n=this,t=n.$createElement,e=n._self._c||t;return e("div",{staticClass:"input__container",class:n.containerClasses,style:n.inputContainerStyle},[n.settings.hasClearButton?e("div",{staticClass:"icon clear__icon",on:{mousedown:function(t){t.stopPropagation(),t.preventDefault(),n.clear(t)}}},[e("svg",{attrs:{width:"10px",height:"11px",viewBox:"3 3 10 11",version:"1.1",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink"}},[e("defs"),n._v(" "),e("path",{attrs:{id:"Combined-Shape",d:"M8,6.58578644 L5.17157288,3.75735931 L3.75735931,5.17157288 L6.58578644,8 L3.75735931,10.8284271 L5.17157288,12.2426407 L8,9.41421356 L10.8284271,12.2426407 L12.2426407,10.8284271 L9.41421356,8 L12.2426407,5.17157288 L10.8284271,3.75735931 L8,6.58578644 Z",stroke:"none",fill:"#FFFFFF","fill-rule":"evenodd"}})])]):n._e(),n._v(" "),n.settings.line?e("div",{staticClass:"accessibility__icon",style:n.accessibilityStyle}):n._e(),n._v(" "),e("div",{ref:"input-container",staticClass:"slot-container"},[n._t("default")],2),n._v(" "),e("label",{staticClass:"label__placeholder",attrs:{for:n.labelName}},[n._v(n._s(n.config.label))]),n._v(" "),e("label",{staticClass:"label__active",class:n.activeLabelClasses,style:n.activeLabelStyle,attrs:{for:n.labelName}},[n._v(n._s(n.config.label))])])},o=[];r._withStripped=!0;var i={render:r,staticRenderFns:o};t.a=i}])}); -------------------------------------------------------------------------------- /example/static/js/app.815a2ec1998252b08e53.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///static/js/app.815a2ec1998252b08e53.js","webpack:///./src/example/CustomFloatingLabel.vue","webpack:///./src/components/FloatingLabel.vue","webpack:///App.vue","webpack:///./src/example/main.js","webpack:///./src/example/App.vue?989d","webpack:///./src/example/CustomFloatingLabel.vue?900f","webpack:///./src/components/FloatingLabel.vue?be1e","webpack:///FloatingLabel.vue","webpack:///./src/example/App.vue","webpack:///CustomFloatingLabel.vue"],"names":["webpackJsonp","0ob2","module","__webpack_exports__","__webpack_require__","injectStyle","ssrContext","__WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_CustomFloatingLabel_vue__","__WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_d53abf44_hasScoped_false_transformToRequire_video_src_source_src_img_src_image_xlink_href_node_modules_vue_loader_lib_selector_type_template_index_0_CustomFloatingLabel_vue__","normalizeComponent","__vue_styles__","Component","8OST","__WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_FloatingLabel_vue__","__WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_19d0ca9f_hasScoped_true_transformToRequire_video_src_source_src_img_src_image_xlink_href_node_modules_vue_loader_lib_selector_type_template_index_0_FloatingLabel_vue__","M/Jr","__WEBPACK_IMPORTED_MODULE_0__components_FloatingLabel__","__WEBPACK_IMPORTED_MODULE_1__CustomFloatingLabel__","components","CustomFloatingLabel","FloatingLabel","computed","hasError","this","value","data","YTGu","exports","Ygin","Object","defineProperty","__WEBPACK_IMPORTED_MODULE_0_vue__","__WEBPACK_IMPORTED_MODULE_1__App__","config","productionTip","el","render","h","Z4u7","_vm","_h","$createElement","_c","_self","attrs","id","staticClass","_m","_v","action","label","name","type","color","focusColor","lineColor","hasClearButton","staticStyle","margin","line","scale","height","labelOffset","top","left","classes","error","directives","rawName","expression","domProps","on","input","$event","target","composing","font-weight","_e","staticRenderFns","esExports","ZOoH","focus","blur","_t","ahKP","fsXK","class","containerClasses","style","settings","mousedown","stopPropagation","preventDefault","clear","width","viewBox","version","xmlns","xmlns:xlink","d","stroke","fill","fill-rule","ref","for","labelName","_s","activeLabelClasses","k30G","__WEBPACK_IMPORTED_MODULE_0_babel_runtime_core_js_object_assign__","__WEBPACK_IMPORTED_MODULE_0_babel_runtime_core_js_object_assign___default","n","props","required","label__active--canscale","hasOwnProperty","has-line","input__container--focus","hasFocus","input__container--content","hasContent","undefined","toLowerCase","accessibilityStyle","errorColor","background-color","labelColor","blurredColor","activeLabelStyle","inputContainerStyle","defaultSettings","methods","formElement","$emit","event","mounted","$refs","querySelector","addEventListener","l30E","__WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_App_vue__","__WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_e093e83c_hasScoped_false_transformToRequire_video_src_source_src_img_src_image_xlink_href_node_modules_vue_loader_lib_selector_type_template_index_0_App_vue__","lrws","xpmu"],"mappings":"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","file":"static/js/app.815a2ec1998252b08e53.js","sourcesContent":["webpackJsonp([1],{\n\n/***/ \"0ob2\":\n/***/ (function(module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_CustomFloatingLabel_vue__ = __webpack_require__(\"xpmu\");\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_d53abf44_hasScoped_false_transformToRequire_video_src_source_src_img_src_image_xlink_href_node_modules_vue_loader_lib_selector_type_template_index_0_CustomFloatingLabel_vue__ = __webpack_require__(\"ZOoH\");\nfunction injectStyle (ssrContext) {\n __webpack_require__(\"lrws\")\n}\nvar normalizeComponent = __webpack_require__(\"VU/8\")\n/* script */\n\n/* template */\n\n/* styles */\nvar __vue_styles__ = injectStyle\n/* scopeId */\nvar __vue_scopeId__ = null\n/* moduleIdentifier (server only) */\nvar __vue_module_identifier__ = null\nvar Component = normalizeComponent(\n __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_CustomFloatingLabel_vue__[\"a\" /* default */],\n __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_d53abf44_hasScoped_false_transformToRequire_video_src_source_src_img_src_image_xlink_href_node_modules_vue_loader_lib_selector_type_template_index_0_CustomFloatingLabel_vue__[\"a\" /* default */],\n __vue_styles__,\n __vue_scopeId__,\n __vue_module_identifier__\n)\n\n/* harmony default export */ __webpack_exports__[\"a\"] = (Component.exports);\n\n\n/***/ }),\n\n/***/ \"8OST\":\n/***/ (function(module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_FloatingLabel_vue__ = __webpack_require__(\"k30G\");\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_19d0ca9f_hasScoped_true_transformToRequire_video_src_source_src_img_src_image_xlink_href_node_modules_vue_loader_lib_selector_type_template_index_0_FloatingLabel_vue__ = __webpack_require__(\"fsXK\");\nfunction injectStyle (ssrContext) {\n __webpack_require__(\"ahKP\")\n}\nvar normalizeComponent = __webpack_require__(\"VU/8\")\n/* script */\n\n/* template */\n\n/* styles */\nvar __vue_styles__ = injectStyle\n/* scopeId */\nvar __vue_scopeId__ = \"data-v-19d0ca9f\"\n/* moduleIdentifier (server only) */\nvar __vue_module_identifier__ = null\nvar Component = normalizeComponent(\n __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_FloatingLabel_vue__[\"a\" /* default */],\n __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_19d0ca9f_hasScoped_true_transformToRequire_video_src_source_src_img_src_image_xlink_href_node_modules_vue_loader_lib_selector_type_template_index_0_FloatingLabel_vue__[\"a\" /* default */],\n __vue_styles__,\n __vue_scopeId__,\n __vue_module_identifier__\n)\n\n/* harmony default export */ __webpack_exports__[\"a\"] = (Component.exports);\n\n\n/***/ }),\n\n/***/ \"M/Jr\":\n/***/ (function(module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__components_FloatingLabel__ = __webpack_require__(\"8OST\");\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__CustomFloatingLabel__ = __webpack_require__(\"0ob2\");\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\n\n\n/* harmony default export */ __webpack_exports__[\"a\"] = ({\n components: {\n CustomFloatingLabel: __WEBPACK_IMPORTED_MODULE_1__CustomFloatingLabel__[\"a\" /* default */],\n FloatingLabel: __WEBPACK_IMPORTED_MODULE_0__components_FloatingLabel__[\"a\" /* default */]\n },\n computed: {\n hasError: function hasError() {\n return this.value !== '';\n }\n },\n data: function data() {\n return {\n value: ''\n };\n }\n});\n\n/***/ }),\n\n/***/ \"YTGu\":\n/***/ (function(module, exports) {\n\n// removed by extract-text-webpack-plugin\n\n/***/ }),\n\n/***/ \"Ygin\":\n/***/ (function(module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\nObject.defineProperty(__webpack_exports__, \"__esModule\", { value: true });\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_vue__ = __webpack_require__(\"/5sW\");\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__App__ = __webpack_require__(\"l30E\");\n\n\n\n__WEBPACK_IMPORTED_MODULE_0_vue__[\"a\" /* default */].config.productionTip = false;\n\n/* eslint-disable no-new */\nnew __WEBPACK_IMPORTED_MODULE_0_vue__[\"a\" /* default */]({\n el: '#app',\n render: function render(h) {\n return h(__WEBPACK_IMPORTED_MODULE_1__App__[\"a\" /* default */]);\n }\n});\n\n/***/ }),\n\n/***/ \"Z4u7\":\n/***/ (function(module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\nvar render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{\"id\":\"app\"}},[_c('div',{staticClass:\"container\"},[_vm._m(0),_vm._v(\" \"),_c('div',{staticClass:\"section section--xl\"},[_c('form',{attrs:{\"action\":\"#\"}},[_c('div',{staticClass:\"row\"},[_c('FloatingLabel',{attrs:{\"config\":{label: 'Default'}}},[_c('input',{attrs:{\"name\":\"default\",\"type\":\"text\"}})])],1),_vm._v(\" \"),_c('div',{staticClass:\"row\"},[_c('FloatingLabel',{attrs:{\"config\":{label: 'Custom color', name: 'custom-color', color: {focusColor: '#ff00ff', lineColor: '#ff00ff'}, hasClearButton: false}}},[_c('input',{attrs:{\"name\":\"custom-color\",\"type\":\"text\"}})])],1),_vm._v(\" \"),_c('div',{staticClass:\"row\",staticStyle:{\"margin\":\"10px\"}},[_c('CustomFloatingLabel',{attrs:{\"config\":{label: 'Wrapper Component', name: 'wrapper', line: false, scale: false}}},[_c('input',{attrs:{\"name\":\"wrapper\",\"type\":\"text\"}})])],1),_vm._v(\" \"),_c('div',{staticClass:\"row\",staticStyle:{\"margin\":\"10px\"}},[_c('CustomFloatingLabel',{attrs:{\"config\":{label: 'Error example', name: 'error', line: false, scale: false, height: 50, labelOffset: {top: 3, left: 8}, classes: {error: 'has-error'}, hasError: _vm.hasError, hasClearButton: false}}},[_c('input',{directives:[{name:\"model\",rawName:\"v-model\",value:(_vm.value),expression:\"value\"}],attrs:{\"name\":\"error\",\"type\":\"text\"},domProps:{\"value\":(_vm.value)},on:{\"input\":function($event){if($event.target.composing){ return; }_vm.value=$event.target.value}}})]),_vm._v(\" \"),(_vm.hasError)?_c('small',{staticStyle:{\"color\":\"#f00\",\"font-weight\":\"bold\"}},[_vm._v(\"This field contains an error.\")]):_vm._e()],1)])])])])}\nvar staticRenderFns = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"section section--xl\"},[_c('h3',{staticClass:\"text--center\"},[_vm._v(\"Simple Floating Labels Vue\")])])}]\nvar esExports = { render: render, staticRenderFns: staticRenderFns }\n/* harmony default export */ __webpack_exports__[\"a\"] = (esExports);\n\n/***/ }),\n\n/***/ \"ZOoH\":\n/***/ (function(module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\nvar render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"my-custom-floating-label\"},[_c('FloatingLabel',{attrs:{\"config\":_vm.config},on:{\"focus\":function($event){_vm.focus = true},\"blur\":function($event){_vm.focus = false}}},[_vm._t(\"default\")],2)],1)}\nvar staticRenderFns = []\nvar esExports = { render: render, staticRenderFns: staticRenderFns }\n/* harmony default export */ __webpack_exports__[\"a\"] = (esExports);\n\n/***/ }),\n\n/***/ \"ahKP\":\n/***/ (function(module, exports) {\n\n// removed by extract-text-webpack-plugin\n\n/***/ }),\n\n/***/ \"fsXK\":\n/***/ (function(module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\nvar render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"input__container\",class:_vm.containerClasses,style:(_vm.inputContainerStyle)},[(_vm.settings.hasClearButton)?_c('div',{staticClass:\"icon clear__icon\",on:{\"mousedown\":function($event){$event.stopPropagation();$event.preventDefault();_vm.clear($event)}}},[_c('svg',{attrs:{\"width\":\"10px\",\"height\":\"11px\",\"viewBox\":\"3 3 10 11\",\"version\":\"1.1\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"xmlns:xlink\":\"http://www.w3.org/1999/xlink\"}},[_c('defs'),_vm._v(\" \"),_c('path',{attrs:{\"id\":\"Combined-Shape\",\"d\":\"M8,6.58578644 L5.17157288,3.75735931 L3.75735931,5.17157288 L6.58578644,8 L3.75735931,10.8284271 L5.17157288,12.2426407 L8,9.41421356 L10.8284271,12.2426407 L12.2426407,10.8284271 L9.41421356,8 L12.2426407,5.17157288 L10.8284271,3.75735931 L8,6.58578644 Z\",\"stroke\":\"none\",\"fill\":\"#FFFFFF\",\"fill-rule\":\"evenodd\"}})])]):_vm._e(),_vm._v(\" \"),(_vm.settings.line)?_c('div',{staticClass:\"accessibility__icon\",style:(_vm.accessibilityStyle)}):_vm._e(),_vm._v(\" \"),_c('div',{ref:\"input-container\",staticClass:\"slot-container\"},[_vm._t(\"default\")],2),_vm._v(\" \"),_c('label',{staticClass:\"label__placeholder\",attrs:{\"for\":_vm.labelName}},[_vm._v(_vm._s(_vm.config.label))]),_vm._v(\" \"),_c('label',{staticClass:\"label__active\",class:_vm.activeLabelClasses,style:(_vm.activeLabelStyle),attrs:{\"for\":_vm.labelName}},[_vm._v(_vm._s(_vm.config.label))])])}\nvar staticRenderFns = []\nvar esExports = { render: render, staticRenderFns: staticRenderFns }\n/* harmony default export */ __webpack_exports__[\"a\"] = (esExports);\n\n/***/ }),\n\n/***/ \"k30G\":\n/***/ (function(module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_babel_runtime_core_js_object_assign__ = __webpack_require__(\"woOf\");\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_babel_runtime_core_js_object_assign___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_babel_runtime_core_js_object_assign__);\n\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\n/* harmony default export */ __webpack_exports__[\"a\"] = ({\n name: 'FloatingLabel',\n props: {\n config: {\n required: true\n }\n },\n computed: {\n activeLabelClasses: function activeLabelClasses() {\n return {\n 'label__active--canscale': this.settings.scale\n };\n },\n hasClearButton: function hasClearButton() {\n if (this.config.hasOwnProperty('hasClearButton')) {\n return this.config.hasClearButton;\n }\n return false;\n },\n containerClasses: function containerClasses() {\n var classes = {\n 'has-line': this.settings.line,\n 'input__container--focus': this.hasFocus,\n 'input__container--content': this.hasContent\n };\n if (this.settings.hasError) {\n classes[this.settings.classes.error] = true;\n }\n return classes;\n },\n labelName: function labelName() {\n if (this.config.name !== undefined) {\n return this.config.name;\n }\n return this.config.label.toLowerCase();\n },\n accessibilityStyle: function accessibilityStyle() {\n var color = this.settings.color.lineColor;\n if (this.settings.hasError) {\n color = this.settings.color.errorColor;\n }\n return {\n 'background-color': color\n };\n },\n labelColor: function labelColor() {\n if (!this.settings.hasError) {\n return this.hasFocus ? this.settings.color.focusColor : this.settings.color.blurredColor;\n } else {\n return this.settings.color.errorColor;\n }\n },\n activeLabelStyle: function activeLabelStyle() {\n return {\n top: this.settings.labelOffset.top + 'px',\n left: this.settings.labelOffset.left + 'px',\n color: this.labelColor\n };\n },\n inputContainerStyle: function inputContainerStyle() {\n return {\n height: this.settings.height + 'px'\n };\n },\n settings: function settings() {\n return __WEBPACK_IMPORTED_MODULE_0_babel_runtime_core_js_object_assign___default()({}, this.defaultSettings, this.config);\n }\n },\n methods: {\n clear: function clear() {\n this.formElement.value = '';\n this.hasContent = false;\n this.hasFocus = false;\n this.$emit('clear');\n },\n focus: function focus(event) {\n this.hasFocus = true;\n this.$emit('focus');\n },\n input: function input(event) {\n this.hasFocus = true;\n this.hasContent = event.target.value !== '';\n this.$emit('input');\n },\n blur: function blur(event) {\n this.hasFocus = false;\n this.$emit('blur');\n }\n },\n mounted: function mounted() {\n this.formElement = this.$refs['input-container'].querySelector('input, select');\n if (this.formElement) {\n this.formElement.addEventListener('input', this.input);\n this.formElement.addEventListener('blur', this.blur);\n this.formElement.addEventListener('focus', this.focus);\n if (this.formElement.type === 'select-one') {\n this.hasContent = true;\n this.settings.scale = false;\n this.settings.hasClearButton = false;\n }\n }\n },\n data: function data() {\n return {\n defaultSettings: {\n classes: {\n error: 'has-error'\n },\n hasError: false,\n height: 64,\n hasClearButton: true,\n line: true,\n scale: true,\n labelOffset: {\n top: 10,\n left: 8\n },\n color: {\n focusColor: '#128CED',\n lineColor: '#128CED',\n errorColor: '#ff0000',\n blurredColor: 'rgba(3, 23, 40, 0.34)'\n }\n },\n hasFocus: false,\n hasContent: false\n };\n }\n});\n\n/***/ }),\n\n/***/ \"l30E\":\n/***/ (function(module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_App_vue__ = __webpack_require__(\"M/Jr\");\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_e093e83c_hasScoped_false_transformToRequire_video_src_source_src_img_src_image_xlink_href_node_modules_vue_loader_lib_selector_type_template_index_0_App_vue__ = __webpack_require__(\"Z4u7\");\nfunction injectStyle (ssrContext) {\n __webpack_require__(\"YTGu\")\n}\nvar normalizeComponent = __webpack_require__(\"VU/8\")\n/* script */\n\n/* template */\n\n/* styles */\nvar __vue_styles__ = injectStyle\n/* scopeId */\nvar __vue_scopeId__ = null\n/* moduleIdentifier (server only) */\nvar __vue_module_identifier__ = null\nvar Component = normalizeComponent(\n __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_App_vue__[\"a\" /* default */],\n __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_e093e83c_hasScoped_false_transformToRequire_video_src_source_src_img_src_image_xlink_href_node_modules_vue_loader_lib_selector_type_template_index_0_App_vue__[\"a\" /* default */],\n __vue_styles__,\n __vue_scopeId__,\n __vue_module_identifier__\n)\n\n/* harmony default export */ __webpack_exports__[\"a\"] = (Component.exports);\n\n\n/***/ }),\n\n/***/ \"lrws\":\n/***/ (function(module, exports) {\n\n// removed by extract-text-webpack-plugin\n\n/***/ }),\n\n/***/ \"xpmu\":\n/***/ (function(module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__components_FloatingLabel__ = __webpack_require__(\"8OST\");\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\n\n/* harmony default export */ __webpack_exports__[\"a\"] = ({\n props: ['config'],\n components: {\n FloatingLabel: __WEBPACK_IMPORTED_MODULE_0__components_FloatingLabel__[\"a\" /* default */]\n }\n});\n\n/***/ })\n\n},[\"Ygin\"]);\n\n\n// WEBPACK FOOTER //\n// static/js/app.815a2ec1998252b08e53.js","function injectStyle (ssrContext) {\n require(\"!!../../node_modules/extract-text-webpack-plugin/dist/loader.js?{\\\"omit\\\":1,\\\"remove\\\":true}!vue-style-loader!css-loader?{\\\"minimize\\\":true,\\\"sourceMap\\\":true}!../../node_modules/vue-loader/lib/style-compiler/index?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-d53abf44\\\",\\\"scoped\\\":false,\\\"hasInlineConfig\\\":false}!sass-loader?{\\\"sourceMap\\\":true}!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./CustomFloatingLabel.vue\")\n}\nvar normalizeComponent = require(\"!../../node_modules/vue-loader/lib/component-normalizer\")\n/* script */\nimport __vue_script__ from \"!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./CustomFloatingLabel.vue\"\n/* template */\nimport __vue_template__ from \"!!../../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-d53abf44\\\",\\\"hasScoped\\\":false,\\\"transformToRequire\\\":{\\\"video\\\":\\\"src\\\",\\\"source\\\":\\\"src\\\",\\\"img\\\":\\\"src\\\",\\\"image\\\":\\\"xlink:href\\\"}}!../../node_modules/vue-loader/lib/selector?type=template&index=0!./CustomFloatingLabel.vue\"\n/* styles */\nvar __vue_styles__ = injectStyle\n/* scopeId */\nvar __vue_scopeId__ = null\n/* moduleIdentifier (server only) */\nvar __vue_module_identifier__ = null\nvar Component = normalizeComponent(\n __vue_script__,\n __vue_template__,\n __vue_styles__,\n __vue_scopeId__,\n __vue_module_identifier__\n)\n\nexport default Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/example/CustomFloatingLabel.vue\n// module id = 0ob2\n// module chunks = 1","function injectStyle (ssrContext) {\n require(\"!!../../node_modules/extract-text-webpack-plugin/dist/loader.js?{\\\"omit\\\":1,\\\"remove\\\":true}!vue-style-loader!css-loader?{\\\"minimize\\\":true,\\\"sourceMap\\\":true}!../../node_modules/vue-loader/lib/style-compiler/index?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-19d0ca9f\\\",\\\"scoped\\\":true,\\\"hasInlineConfig\\\":false}!sass-loader?{\\\"sourceMap\\\":true}!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./FloatingLabel.vue\")\n}\nvar normalizeComponent = require(\"!../../node_modules/vue-loader/lib/component-normalizer\")\n/* script */\nimport __vue_script__ from \"!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./FloatingLabel.vue\"\n/* template */\nimport __vue_template__ from \"!!../../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-19d0ca9f\\\",\\\"hasScoped\\\":true,\\\"transformToRequire\\\":{\\\"video\\\":\\\"src\\\",\\\"source\\\":\\\"src\\\",\\\"img\\\":\\\"src\\\",\\\"image\\\":\\\"xlink:href\\\"}}!../../node_modules/vue-loader/lib/selector?type=template&index=0!./FloatingLabel.vue\"\n/* styles */\nvar __vue_styles__ = injectStyle\n/* scopeId */\nvar __vue_scopeId__ = \"data-v-19d0ca9f\"\n/* moduleIdentifier (server only) */\nvar __vue_module_identifier__ = null\nvar Component = normalizeComponent(\n __vue_script__,\n __vue_template__,\n __vue_styles__,\n __vue_scopeId__,\n __vue_module_identifier__\n)\n\nexport default Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/components/FloatingLabel.vue\n// module id = 8OST\n// module chunks = 1","\n\n\n\n\n\n\n// WEBPACK FOOTER //\n// App.vue?724483cd","import Vue from 'vue'\nimport App from './App'\n\nVue.config.productionTip = false\n\n/* eslint-disable no-new */\nnew Vue({\n el: '#app',\n render: h => h(App)\n})\n\n\n\n// WEBPACK FOOTER //\n// ./src/example/main.js","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{\"id\":\"app\"}},[_c('div',{staticClass:\"container\"},[_vm._m(0),_vm._v(\" \"),_c('div',{staticClass:\"section section--xl\"},[_c('form',{attrs:{\"action\":\"#\"}},[_c('div',{staticClass:\"row\"},[_c('FloatingLabel',{attrs:{\"config\":{label: 'Default'}}},[_c('input',{attrs:{\"name\":\"default\",\"type\":\"text\"}})])],1),_vm._v(\" \"),_c('div',{staticClass:\"row\"},[_c('FloatingLabel',{attrs:{\"config\":{label: 'Custom color', name: 'custom-color', color: {focusColor: '#ff00ff', lineColor: '#ff00ff'}, hasClearButton: false}}},[_c('input',{attrs:{\"name\":\"custom-color\",\"type\":\"text\"}})])],1),_vm._v(\" \"),_c('div',{staticClass:\"row\",staticStyle:{\"margin\":\"10px\"}},[_c('CustomFloatingLabel',{attrs:{\"config\":{label: 'Wrapper Component', name: 'wrapper', line: false, scale: false}}},[_c('input',{attrs:{\"name\":\"wrapper\",\"type\":\"text\"}})])],1),_vm._v(\" \"),_c('div',{staticClass:\"row\",staticStyle:{\"margin\":\"10px\"}},[_c('CustomFloatingLabel',{attrs:{\"config\":{label: 'Error example', name: 'error', line: false, scale: false, height: 50, labelOffset: {top: 3, left: 8}, classes: {error: 'has-error'}, hasError: _vm.hasError, hasClearButton: false}}},[_c('input',{directives:[{name:\"model\",rawName:\"v-model\",value:(_vm.value),expression:\"value\"}],attrs:{\"name\":\"error\",\"type\":\"text\"},domProps:{\"value\":(_vm.value)},on:{\"input\":function($event){if($event.target.composing){ return; }_vm.value=$event.target.value}}})]),_vm._v(\" \"),(_vm.hasError)?_c('small',{staticStyle:{\"color\":\"#f00\",\"font-weight\":\"bold\"}},[_vm._v(\"This field contains an error.\")]):_vm._e()],1)])])])])}\nvar staticRenderFns = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"section section--xl\"},[_c('h3',{staticClass:\"text--center\"},[_vm._v(\"Simple Floating Labels Vue\")])])}]\nvar esExports = { render: render, staticRenderFns: staticRenderFns }\nexport default esExports\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/vue-loader/lib/template-compiler?{\"id\":\"data-v-e093e83c\",\"hasScoped\":false,\"transformToRequire\":{\"video\":\"src\",\"source\":\"src\",\"img\":\"src\",\"image\":\"xlink:href\"}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/example/App.vue\n// module id = Z4u7\n// module chunks = 1","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"my-custom-floating-label\"},[_c('FloatingLabel',{attrs:{\"config\":_vm.config},on:{\"focus\":function($event){_vm.focus = true},\"blur\":function($event){_vm.focus = false}}},[_vm._t(\"default\")],2)],1)}\nvar staticRenderFns = []\nvar esExports = { render: render, staticRenderFns: staticRenderFns }\nexport default esExports\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/vue-loader/lib/template-compiler?{\"id\":\"data-v-d53abf44\",\"hasScoped\":false,\"transformToRequire\":{\"video\":\"src\",\"source\":\"src\",\"img\":\"src\",\"image\":\"xlink:href\"}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/example/CustomFloatingLabel.vue\n// module id = ZOoH\n// module chunks = 1","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"input__container\",class:_vm.containerClasses,style:(_vm.inputContainerStyle)},[(_vm.settings.hasClearButton)?_c('div',{staticClass:\"icon clear__icon\",on:{\"mousedown\":function($event){$event.stopPropagation();$event.preventDefault();_vm.clear($event)}}},[_c('svg',{attrs:{\"width\":\"10px\",\"height\":\"11px\",\"viewBox\":\"3 3 10 11\",\"version\":\"1.1\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"xmlns:xlink\":\"http://www.w3.org/1999/xlink\"}},[_c('defs'),_vm._v(\" \"),_c('path',{attrs:{\"id\":\"Combined-Shape\",\"d\":\"M8,6.58578644 L5.17157288,3.75735931 L3.75735931,5.17157288 L6.58578644,8 L3.75735931,10.8284271 L5.17157288,12.2426407 L8,9.41421356 L10.8284271,12.2426407 L12.2426407,10.8284271 L9.41421356,8 L12.2426407,5.17157288 L10.8284271,3.75735931 L8,6.58578644 Z\",\"stroke\":\"none\",\"fill\":\"#FFFFFF\",\"fill-rule\":\"evenodd\"}})])]):_vm._e(),_vm._v(\" \"),(_vm.settings.line)?_c('div',{staticClass:\"accessibility__icon\",style:(_vm.accessibilityStyle)}):_vm._e(),_vm._v(\" \"),_c('div',{ref:\"input-container\",staticClass:\"slot-container\"},[_vm._t(\"default\")],2),_vm._v(\" \"),_c('label',{staticClass:\"label__placeholder\",attrs:{\"for\":_vm.labelName}},[_vm._v(_vm._s(_vm.config.label))]),_vm._v(\" \"),_c('label',{staticClass:\"label__active\",class:_vm.activeLabelClasses,style:(_vm.activeLabelStyle),attrs:{\"for\":_vm.labelName}},[_vm._v(_vm._s(_vm.config.label))])])}\nvar staticRenderFns = []\nvar esExports = { render: render, staticRenderFns: staticRenderFns }\nexport default esExports\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/vue-loader/lib/template-compiler?{\"id\":\"data-v-19d0ca9f\",\"hasScoped\":true,\"transformToRequire\":{\"video\":\"src\",\"source\":\"src\",\"img\":\"src\",\"image\":\"xlink:href\"}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/components/FloatingLabel.vue\n// module id = fsXK\n// module chunks = 1","\n\n\n\n\n\n\n// WEBPACK FOOTER //\n// FloatingLabel.vue?81c89386","function injectStyle (ssrContext) {\n require(\"!!../../node_modules/extract-text-webpack-plugin/dist/loader.js?{\\\"omit\\\":1,\\\"remove\\\":true}!vue-style-loader!css-loader?{\\\"minimize\\\":true,\\\"sourceMap\\\":true}!../../node_modules/vue-loader/lib/style-compiler/index?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-e093e83c\\\",\\\"scoped\\\":false,\\\"hasInlineConfig\\\":false}!sass-loader?{\\\"sourceMap\\\":true}!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./App.vue\")\n}\nvar normalizeComponent = require(\"!../../node_modules/vue-loader/lib/component-normalizer\")\n/* script */\nimport __vue_script__ from \"!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./App.vue\"\n/* template */\nimport __vue_template__ from \"!!../../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-e093e83c\\\",\\\"hasScoped\\\":false,\\\"transformToRequire\\\":{\\\"video\\\":\\\"src\\\",\\\"source\\\":\\\"src\\\",\\\"img\\\":\\\"src\\\",\\\"image\\\":\\\"xlink:href\\\"}}!../../node_modules/vue-loader/lib/selector?type=template&index=0!./App.vue\"\n/* styles */\nvar __vue_styles__ = injectStyle\n/* scopeId */\nvar __vue_scopeId__ = null\n/* moduleIdentifier (server only) */\nvar __vue_module_identifier__ = null\nvar Component = normalizeComponent(\n __vue_script__,\n __vue_template__,\n __vue_styles__,\n __vue_scopeId__,\n __vue_module_identifier__\n)\n\nexport default Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/example/App.vue\n// module id = l30E\n// module chunks = 1","\n\n\n\n\n\n// WEBPACK FOOTER //\n// CustomFloatingLabel.vue?63d209e7"],"sourceRoot":""} -------------------------------------------------------------------------------- /dist/vue-simple-floating-labels.js: -------------------------------------------------------------------------------- 1 | (function webpackUniversalModuleDefinition(root, factory) { 2 | if(typeof exports === 'object' && typeof module === 'object') 3 | module.exports = factory(); 4 | else if(typeof define === 'function' && define.amd) 5 | define([], factory); 6 | else if(typeof exports === 'object') 7 | exports["VueSimpleLoadingLabels"] = factory(); 8 | else 9 | root["VueSimpleLoadingLabels"] = factory(); 10 | })(this, function() { 11 | return /******/ (function(modules) { // webpackBootstrap 12 | /******/ // The module cache 13 | /******/ var installedModules = {}; 14 | /******/ 15 | /******/ // The require function 16 | /******/ function __webpack_require__(moduleId) { 17 | /******/ 18 | /******/ // Check if module is in cache 19 | /******/ if(installedModules[moduleId]) { 20 | /******/ return installedModules[moduleId].exports; 21 | /******/ } 22 | /******/ // Create a new module (and put it into the cache) 23 | /******/ var module = installedModules[moduleId] = { 24 | /******/ i: moduleId, 25 | /******/ l: false, 26 | /******/ exports: {} 27 | /******/ }; 28 | /******/ 29 | /******/ // Execute the module function 30 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 31 | /******/ 32 | /******/ // Flag the module as loaded 33 | /******/ module.l = true; 34 | /******/ 35 | /******/ // Return the exports of the module 36 | /******/ return module.exports; 37 | /******/ } 38 | /******/ 39 | /******/ 40 | /******/ // expose the modules object (__webpack_modules__) 41 | /******/ __webpack_require__.m = modules; 42 | /******/ 43 | /******/ // expose the module cache 44 | /******/ __webpack_require__.c = installedModules; 45 | /******/ 46 | /******/ // define getter function for harmony exports 47 | /******/ __webpack_require__.d = function(exports, name, getter) { 48 | /******/ if(!__webpack_require__.o(exports, name)) { 49 | /******/ Object.defineProperty(exports, name, { 50 | /******/ configurable: false, 51 | /******/ enumerable: true, 52 | /******/ get: getter 53 | /******/ }); 54 | /******/ } 55 | /******/ }; 56 | /******/ 57 | /******/ // getDefaultExport function for compatibility with non-harmony modules 58 | /******/ __webpack_require__.n = function(module) { 59 | /******/ var getter = module && module.__esModule ? 60 | /******/ function getDefault() { return module['default']; } : 61 | /******/ function getModuleExports() { return module; }; 62 | /******/ __webpack_require__.d(getter, 'a', getter); 63 | /******/ return getter; 64 | /******/ }; 65 | /******/ 66 | /******/ // Object.prototype.hasOwnProperty.call 67 | /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; 68 | /******/ 69 | /******/ // __webpack_public_path__ 70 | /******/ __webpack_require__.p = ""; 71 | /******/ 72 | /******/ // Load entry module and return exports 73 | /******/ return __webpack_require__(__webpack_require__.s = 9); 74 | /******/ }) 75 | /************************************************************************/ 76 | /******/ ([ 77 | /* 0 */ 78 | /***/ (function(module, exports) { 79 | 80 | // https://github.com/zloirock/core-js/issues/86#issuecomment-115759028 81 | var global = module.exports = typeof window != 'undefined' && window.Math == Math 82 | ? window : typeof self != 'undefined' && self.Math == Math ? self 83 | // eslint-disable-next-line no-new-func 84 | : Function('return this')(); 85 | if (typeof __g == 'number') __g = global; // eslint-disable-line no-undef 86 | 87 | 88 | /***/ }), 89 | /* 1 */ 90 | /***/ (function(module, exports) { 91 | 92 | module.exports = function (it) { 93 | return typeof it === 'object' ? it !== null : typeof it === 'function'; 94 | }; 95 | 96 | 97 | /***/ }), 98 | /* 2 */ 99 | /***/ (function(module, exports, __webpack_require__) { 100 | 101 | // Thank's IE8 for his funny defineProperty 102 | module.exports = !__webpack_require__(3)(function () { 103 | return Object.defineProperty({}, 'a', { get: function () { return 7; } }).a != 7; 104 | }); 105 | 106 | 107 | /***/ }), 108 | /* 3 */ 109 | /***/ (function(module, exports) { 110 | 111 | module.exports = function (exec) { 112 | try { 113 | return !!exec(); 114 | } catch (e) { 115 | return true; 116 | } 117 | }; 118 | 119 | 120 | /***/ }), 121 | /* 4 */ 122 | /***/ (function(module, exports) { 123 | 124 | var core = module.exports = { version: '2.5.1' }; 125 | if (typeof __e == 'number') __e = core; // eslint-disable-line no-undef 126 | 127 | 128 | /***/ }), 129 | /* 5 */ 130 | /***/ (function(module, exports, __webpack_require__) { 131 | 132 | // to indexed object, toObject with fallback for non-array-like ES3 strings 133 | var IObject = __webpack_require__(6); 134 | var defined = __webpack_require__(7); 135 | module.exports = function (it) { 136 | return IObject(defined(it)); 137 | }; 138 | 139 | 140 | /***/ }), 141 | /* 6 */ 142 | /***/ (function(module, exports, __webpack_require__) { 143 | 144 | // fallback for non-array-like ES3 and non-enumerable old V8 strings 145 | var cof = __webpack_require__(35); 146 | // eslint-disable-next-line no-prototype-builtins 147 | module.exports = Object('z').propertyIsEnumerable(0) ? Object : function (it) { 148 | return cof(it) == 'String' ? it.split('') : Object(it); 149 | }; 150 | 151 | 152 | /***/ }), 153 | /* 7 */ 154 | /***/ (function(module, exports) { 155 | 156 | // 7.2.1 RequireObjectCoercible(argument) 157 | module.exports = function (it) { 158 | if (it == undefined) throw TypeError("Can't call method on " + it); 159 | return it; 160 | }; 161 | 162 | 163 | /***/ }), 164 | /* 8 */ 165 | /***/ (function(module, exports) { 166 | 167 | // 7.1.4 ToInteger 168 | var ceil = Math.ceil; 169 | var floor = Math.floor; 170 | module.exports = function (it) { 171 | return isNaN(it = +it) ? 0 : (it > 0 ? floor : ceil)(it); 172 | }; 173 | 174 | 175 | /***/ }), 176 | /* 9 */ 177 | /***/ (function(module, __webpack_exports__, __webpack_require__) { 178 | 179 | "use strict"; 180 | Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); 181 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__components_FloatingLabel_vue__ = __webpack_require__(10); 182 | 183 | /* harmony default export */ __webpack_exports__["default"] = (__WEBPACK_IMPORTED_MODULE_0__components_FloatingLabel_vue__["a" /* default */]); 184 | 185 | /***/ }), 186 | /* 10 */ 187 | /***/ (function(module, __webpack_exports__, __webpack_require__) { 188 | 189 | "use strict"; 190 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_FloatingLabel_vue__ = __webpack_require__(17); 191 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_19d0ca9f_hasScoped_true_transformToRequire_video_src_source_src_img_src_image_xlink_href_node_modules_vue_loader_lib_selector_type_template_index_0_FloatingLabel_vue__ = __webpack_require__(46); 192 | var disposed = false 193 | function injectStyle (ssrContext) { 194 | if (disposed) return 195 | __webpack_require__(11) 196 | } 197 | var normalizeComponent = __webpack_require__(16) 198 | /* script */ 199 | 200 | /* template */ 201 | 202 | /* styles */ 203 | var __vue_styles__ = injectStyle 204 | /* scopeId */ 205 | var __vue_scopeId__ = "data-v-19d0ca9f" 206 | /* moduleIdentifier (server only) */ 207 | var __vue_module_identifier__ = null 208 | var Component = normalizeComponent( 209 | __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_FloatingLabel_vue__["a" /* default */], 210 | __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_19d0ca9f_hasScoped_true_transformToRequire_video_src_source_src_img_src_image_xlink_href_node_modules_vue_loader_lib_selector_type_template_index_0_FloatingLabel_vue__["a" /* default */], 211 | __vue_styles__, 212 | __vue_scopeId__, 213 | __vue_module_identifier__ 214 | ) 215 | Component.options.__file = "src/components/FloatingLabel.vue" 216 | if (Component.esModule && Object.keys(Component.esModule).some(function (key) {return key !== "default" && key.substr(0, 2) !== "__"})) {console.error("named exports are not supported in *.vue files.")} 217 | if (Component.options.functional) {console.error("[vue-loader] FloatingLabel.vue: functional components are not supported with templates, they should use render functions.")} 218 | 219 | /* hot reload */ 220 | if (false) {(function () { 221 | var hotAPI = require("vue-hot-reload-api") 222 | hotAPI.install(require("vue"), false) 223 | if (!hotAPI.compatible) return 224 | module.hot.accept() 225 | if (!module.hot.data) { 226 | hotAPI.createRecord("data-v-19d0ca9f", Component.options) 227 | } else { 228 | hotAPI.reload("data-v-19d0ca9f", Component.options) 229 | } 230 | module.hot.dispose(function (data) { 231 | disposed = true 232 | }) 233 | })()} 234 | 235 | /* harmony default export */ __webpack_exports__["a"] = (Component.exports); 236 | 237 | 238 | /***/ }), 239 | /* 11 */ 240 | /***/ (function(module, exports, __webpack_require__) { 241 | 242 | // style-loader: Adds some css to the DOM by adding a