├── .eslintrc ├── .gitignore ├── .tern-project ├── .travis.yml ├── LICENSE ├── README.md ├── bower.json ├── build ├── build-docs.js └── build-docs.js.map ├── dist ├── isMobileBrowser.js ├── vue-strap-lang.js ├── vue-strap.js ├── vue-strap.js.map └── vue-strap.min.js ├── docs ├── affixSidebar.vue ├── assets │ ├── docs.css │ ├── font │ │ ├── icon.eot │ │ ├── icon.svg │ │ ├── icon.ttf │ │ └── icon.woff │ ├── prism-coy.css │ └── style.css ├── bodyDocs.vue ├── data.json ├── example │ ├── accordionDocs.vue │ ├── affixDocs.vue │ ├── alertDocs.vue │ ├── asideDocs.vue │ ├── buttonGroupDocs.vue │ ├── carouselDocs.vue │ ├── checkboxDocs.vue │ ├── container.vue │ ├── datepickerDocs.vue │ ├── docCode.vue │ ├── docSection.vue │ ├── docTable.vue │ ├── dropdownDocs.vue │ ├── formGroupDocs.vue │ ├── gettingStarted.vue │ ├── inputDocs.vue │ ├── modalDocs.vue │ ├── navbarDocs.vue │ ├── popoverDocs.vue │ ├── progressbar-docs.vue │ ├── radioDocs.vue │ ├── selectDocs.vue │ ├── spinnerDocs.vue │ ├── tabsDocs.vue │ ├── tooltipDocs.vue │ └── typeaheadDocs.vue ├── index.js └── js │ ├── showLanguage.js │ └── vue.min.js ├── favicon.ico ├── index.html ├── package.json ├── src ├── Accordion.vue ├── Affix.vue ├── Alert.vue ├── Aside.vue ├── Carousel.vue ├── Checkbox.vue ├── Datepicker.vue ├── Dropdown.vue ├── FormGroup.vue ├── Input.vue ├── Modal.vue ├── Navbar.vue ├── Option.vue ├── Panel.vue ├── Popover.vue ├── Progressbar.vue ├── Radio.vue ├── Select.vue ├── Slider.vue ├── Spinner.vue ├── Tab.vue ├── TabGroup.vue ├── Tabset.vue ├── Tooltip.vue ├── Typeahead.vue ├── buttonGroup.vue ├── index.js ├── main.js └── utils │ ├── NodeList.js │ ├── popoverMixins.js │ ├── spinner.scss │ └── utils.js ├── webpack.build.js ├── webpack.build.min.js └── webpack.config.js /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | "eslint-plugin-html" // https://github.com/BenoitZugmeyer/eslint-plugin-html 4 | ], 5 | "parser": "babel-eslint", 6 | "env": { // http://eslint.org/docs/user-guide/configuring.html#specifying-environments 7 | "browser": true, // browser global variables 8 | "node": true // Node.js global variables and Node.js-specific rules 9 | }, 10 | "ecmaFeatures": { 11 | "arrowFunctions": true, 12 | "blockBindings": true, 13 | "classes": true, 14 | "defaultParams": true, 15 | "destructuring": true, 16 | "forOf": true, 17 | "generators": false, 18 | "modules": true, 19 | "objectLiteralComputedProperties": true, 20 | "objectLiteralDuplicateProperties": false, 21 | "objectLiteralShorthandMethods": true, 22 | "objectLiteralShorthandProperties": true, 23 | "spread": true, 24 | "superInFunctions": true, 25 | "templateStrings": true, 26 | "jsx": false 27 | }, 28 | "rules": { 29 | /** 30 | * Strict mode 31 | */ 32 | // babel inserts "use strict"; for us 33 | "strict": [2, "never"], // http://eslint.org/docs/rules/strict 34 | 35 | /** 36 | * ES6 37 | */ 38 | "no-var": 1, // http://eslint.org/docs/rules/no-var 39 | "prefer-const": 1, // http://eslint.org/docs/rules/prefer-const 40 | 41 | /** 42 | * Variables 43 | */ 44 | "no-shadow": 2, // http://eslint.org/docs/rules/no-shadow 45 | "no-shadow-restricted-names": 2, // http://eslint.org/docs/rules/no-shadow-restricted-names 46 | "no-unused-vars": [2, { // http://eslint.org/docs/rules/no-unused-vars 47 | "vars": "local", 48 | "args": "after-used" 49 | }], 50 | "no-use-before-define": 2, // http://eslint.org/docs/rules/no-use-before-define 51 | 52 | /** 53 | * Possible errors 54 | */ 55 | "comma-dangle": 0, 56 | "no-cond-assign": [2, "always"], // http://eslint.org/docs/rules/no-cond-assign 57 | "no-console": 1, // http://eslint.org/docs/rules/no-console 58 | "no-debugger": 1, // http://eslint.org/docs/rules/no-debugger 59 | "no-alert": 1, // http://eslint.org/docs/rules/no-alert 60 | "no-constant-condition": 1, // http://eslint.org/docs/rules/no-constant-condition 61 | "no-dupe-keys": 2, // http://eslint.org/docs/rules/no-dupe-keys 62 | "no-duplicate-case": 2, // http://eslint.org/docs/rules/no-duplicate-case 63 | "no-empty": 2, // http://eslint.org/docs/rules/no-empty 64 | "no-ex-assign": 2, // http://eslint.org/docs/rules/no-ex-assign 65 | "no-extra-boolean-cast": 0, // http://eslint.org/docs/rules/no-extra-boolean-cast 66 | "no-extra-semi": 2, // http://eslint.org/docs/rules/no-extra-semi 67 | "no-func-assign": 2, // http://eslint.org/docs/rules/no-func-assign 68 | "no-inner-declarations": 2, // http://eslint.org/docs/rules/no-inner-declarations 69 | "no-invalid-regexp": 2, // http://eslint.org/docs/rules/no-invalid-regexp 70 | "no-irregular-whitespace": 2, // http://eslint.org/docs/rules/no-irregular-whitespace 71 | "no-obj-calls": 2, // http://eslint.org/docs/rules/no-obj-calls 72 | "no-sparse-arrays": 2, // http://eslint.org/docs/rules/no-sparse-arrays 73 | "no-unreachable": 2, // http://eslint.org/docs/rules/no-unreachable 74 | "use-isnan": 2, // http://eslint.org/docs/rules/use-isnan 75 | "block-scoped-var": 2, // http://eslint.org/docs/rules/block-scoped-var 76 | 77 | /** 78 | * Best practices 79 | */ 80 | "consistent-return": 2, // http://eslint.org/docs/rules/consistent-return 81 | "curly": [2, "multi-line"], // http://eslint.org/docs/rules/curly 82 | "default-case": 2, // http://eslint.org/docs/rules/default-case 83 | "dot-notation": [2, { // http://eslint.org/docs/rules/dot-notation 84 | "allowKeywords": true 85 | }], 86 | "eqeqeq": 2, // http://eslint.org/docs/rules/eqeqeq 87 | "guard-for-in": 2, // http://eslint.org/docs/rules/guard-for-in 88 | "no-caller": 2, // http://eslint.org/docs/rules/no-caller 89 | "no-else-return": 2, // http://eslint.org/docs/rules/no-else-return 90 | "no-eq-null": 2, // http://eslint.org/docs/rules/no-eq-null 91 | "no-eval": 2, // http://eslint.org/docs/rules/no-eval 92 | "no-extend-native": 2, // http://eslint.org/docs/rules/no-extend-native 93 | "no-extra-bind": 2, // http://eslint.org/docs/rules/no-extra-bind 94 | "no-fallthrough": 2, // http://eslint.org/docs/rules/no-fallthrough 95 | "no-floating-decimal": 2, // http://eslint.org/docs/rules/no-floating-decimal 96 | "no-implied-eval": 2, // http://eslint.org/docs/rules/no-implied-eval 97 | "no-lone-blocks": 2, // http://eslint.org/docs/rules/no-lone-blocks 98 | "no-loop-func": 2, // http://eslint.org/docs/rules/no-loop-func 99 | "no-multi-str": 2, // http://eslint.org/docs/rules/no-multi-str 100 | "no-native-reassign": 2, // http://eslint.org/docs/rules/no-native-reassign 101 | "no-new": 0, 102 | "no-new-func": 2, // http://eslint.org/docs/rules/no-new-func 103 | "no-new-wrappers": 2, // http://eslint.org/docs/rules/no-new-wrappers 104 | "no-octal": 2, // http://eslint.org/docs/rules/no-octal 105 | "no-octal-escape": 2, // http://eslint.org/docs/rules/no-octal-escape 106 | "no-param-reassign": 2, // http://eslint.org/docs/rules/no-param-reassign 107 | "no-proto": 2, // http://eslint.org/docs/rules/no-proto 108 | "no-redeclare": 2, // http://eslint.org/docs/rules/no-redeclare 109 | "no-return-assign": 2, // http://eslint.org/docs/rules/no-return-assign 110 | "no-script-url": 2, // http://eslint.org/docs/rules/no-script-url 111 | "no-self-compare": 2, // http://eslint.org/docs/rules/no-self-compare 112 | "no-sequences": 2, // http://eslint.org/docs/rules/no-sequences 113 | "no-throw-literal": 2, // http://eslint.org/docs/rules/no-throw-literal 114 | "no-with": 2, // http://eslint.org/docs/rules/no-with 115 | "radix": 2, // http://eslint.org/docs/rules/radix 116 | "vars-on-top": 2, // http://eslint.org/docs/rules/vars-on-top 117 | "wrap-iife": [2, "any"], // http://eslint.org/docs/rules/wrap-iife 118 | "yoda": 2, // http://eslint.org/docs/rules/yoda 119 | 120 | /** 121 | * Style 122 | */ 123 | "brace-style": [2, // http://eslint.org/docs/rules/brace-style 124 | "1tbs", { 125 | "allowSingleLine": true 126 | }], 127 | "quotes": [ 128 | 2, "single", "avoid-escape" // http://eslint.org/docs/rules/quotes 129 | ], 130 | "camelcase": [2, { // http://eslint.org/docs/rules/camelcase 131 | "properties": "never" 132 | }], 133 | "comma-spacing": [2, { // http://eslint.org/docs/rules/comma-spacing 134 | "before": false, 135 | "after": true 136 | }], 137 | "comma-style": [2, "last"], // http://eslint.org/docs/rules/comma-style 138 | "eol-last": 2, // http://eslint.org/docs/rules/eol-last 139 | "func-names": 1, // http://eslint.org/docs/rules/func-names 140 | "key-spacing": [2, { // http://eslint.org/docs/rules/key-spacing 141 | "beforeColon": false, 142 | "afterColon": true 143 | }], 144 | "new-cap": [2, { // http://eslint.org/docs/rules/new-cap 145 | "newIsCap": true 146 | }], 147 | "no-multiple-empty-lines": 0, 148 | "no-nested-ternary": 2, // http://eslint.org/docs/rules/no-nested-ternary 149 | "no-new-object": 2, // http://eslint.org/docs/rules/no-new-object 150 | "no-spaced-func": 2, // http://eslint.org/docs/rules/no-spaced-func 151 | "no-trailing-spaces": 2, // http://eslint.org/docs/rules/no-trailing-spaces 152 | "no-extra-parens": [2, "functions"], // http://eslint.org/docs/rules/no-extra-parens 153 | "no-underscore-dangle": 0, // http://eslint.org/docs/rules/no-underscore-dangle 154 | "one-var": [2, "never"], // http://eslint.org/docs/rules/one-var 155 | "padded-blocks": [2, "never"], // http://eslint.org/docs/rules/padded-blocks 156 | "semi": [2, "never"], // http://eslint.org/docs/rules/semi 157 | "semi-spacing": [2, { // http://eslint.org/docs/rules/semi-spacing 158 | "before": false, 159 | "after": true 160 | }], 161 | "space-after-keywords": 2, // http://eslint.org/docs/rules/space-after-keywords 162 | "space-before-blocks": 2, // http://eslint.org/docs/rules/space-before-blocks 163 | "space-before-function-paren": [2, "never"], // http://eslint.org/docs/rules/space-before-function-paren 164 | "space-infix-ops": 2, // http://eslint.org/docs/rules/space-infix-ops 165 | "space-return-throw-case": 2, // http://eslint.org/docs/rules/space-return-throw-case 166 | "spaced-comment": [2, "always", {// http://eslint.org/docs/rules/spaced-comment 167 | "exceptions": ["-", "+"], 168 | "markers": ["=", "!"] // space here to support sprockets directives 169 | }] 170 | } 171 | } 172 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | build/ 4 | npm-debug.log 5 | static 6 | build 7 | .idea 8 | -------------------------------------------------------------------------------- /.tern-project: -------------------------------------------------------------------------------- 1 | { 2 | "ecmaVersion": 6, 3 | "libs": [ 4 | "browser" 5 | ], 6 | "loadEagerly": [ 7 | "./src/" 8 | ], 9 | "dontLoad": [ 10 | "./node-modules" 11 | ] 12 | } 13 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - '4.1' 4 | deploy: 5 | provider: npm 6 | email: "i@yuche.me" 7 | api_key: 8 | secure: LJCJj5B+at11PI55rp5xzrbcsE2FvTIPKMR+ZmQ3tlvYIDMChq0zu5kH+oKcBWoVjf9x1xJTMimcSJ85jtd0DpRztiuBIXDhrRpOvGMaZJQZEypzoW0y6Hji/i4Wxc4HZRylDOoJug5VipRlaQwvvZvLhc7uckP1e0dexc0M9ba//I+MrTUDmZGNYKDy5YT1MQY0NdtQd55/ulHy5sNReqBjJ0Rzfo9IHfRge5ZeSoPuQm5lZegB+Z6i6V3XRNixfv4iSMoVysMMufCMTzRkweCJywSZTqJIu4GuJLt4Y2wsSh6b5qNndoTUkI/gJOsTrFDbKromEDulMbR8Xs1r/rzryJ4kZYW2crT8r6yH7S82/S3VmmyVz9liPncNxpKkI4F21izraikSF0qeW1utjd/P0u36D4zltMwMUzKIfHvE0wdIG5tSQOxJRqb5tc/u+++WGEK0nTsRyQpSH/OHKmU/Sj01XVIhSRJrXwbLSSiojFMkUpzhGFPYIHM2wJQ2zBdeqViJvYogUNmcyt0soO1fkU6NKZP312MksUFAZN8nG95t/63c1+NFYlt2M2PtYfbIBbvrTyRkcRGLGX/4CHVX/ZapyKvwGj3p3oFDcuwE0jEqwWFCkEYP3OzannfW11zFy80d6jmY/nfv8jft3er2RbrJGcN4Hqev/fahg28= 9 | on: 10 | branch: master 11 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 yuche 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 13 | all 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 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # deprecated 2 | 3 | SORRY, THIS PROJECT IS NO LONGER MAINTAINED. 4 | 5 | There are two great alternatives: 6 | 7 | * [bootstrap-vue](https://github.com/bootstrap-vue/bootstrap-vue): BootstrapVue provides one of the most comprehensive implementations of Bootstrap 4 components and grid system for Vue.js and with extensive and automated WAI-ARIA accessibility markup. 8 | * [uiv](https://github.com/wxsms/uiv): Bootstrap 3 components implemented by Vue 2. 9 | 10 | # vue-strap 11 | Bootstrap components built with Vue.js. 12 | 13 | This repository contains a set of native Vue.js components based on Bootstrap's markup and CSS. As a result no dependency on jQuery or Bootstrap's JavaScript is required. The only required dependencies are: 14 | 15 | * [Vue.js](http://vuejs.org/) (required ^v1.x.x, test with v1.0.8). 16 | * [Bootstrap CSS](http://getbootstrap.com/) (required 3.x.x, test with 3.3.5). VueStrap doesn't depend on a very precise version of Bootstrap. 17 | 18 | ## Installation 19 | 20 | ### NPM 21 | 22 | ```bash 23 | $ npm install vue-strap 24 | ``` 25 | 26 | ### CommonJS 27 | ```js 28 | var alert = require('vue-strap/src/alert'); 29 | // or 30 | var alert = require('vue-strap').alert; 31 | 32 | new Vue({ 33 | components: { 34 | 'alert': alert 35 | } 36 | }) 37 | ``` 38 | 39 | ### ES6 40 | ```js 41 | import alert from 'vue-strap/src/alert' 42 | // or 43 | import { alert } from 'vue-strap' 44 | 45 | new Vue({ 46 | components: { 47 | alert 48 | } 49 | }) 50 | ``` 51 | 52 | ### AMD 53 | ```js 54 | $ bower install vue-strap 55 | 56 | define(['vue-strap'], function(VueStrap) { var alert = VueStrap.alert; ... }); 57 | ``` 58 | 59 | ### Browser globals 60 | The `dist` folder contains `vue-strap.js` and `vue-strap.min.js` with all components exported in the window.VueStrap object. These bundles are also available in [CDNJS](https://cdnjs.com/libraries/vue-strap), 61 | and on both the Bower and NPM packages. 62 | 63 | ```html 64 | 65 | 66 | 78 | ``` 79 | 80 | ## Docs 81 | See the [documentation](http://yuche.github.io/vue-strap/) with live editable examples. 82 | 83 | ## Local Setup 84 | * Install with `npm install` 85 | * Run the docs site in development mode with `npm run docs`. This will watch for file changes as you work. 86 | * Build with `npm run build`. 87 | 88 | ## TODO 89 | See [Roadmap](https://github.com/yuche/vue-strap/issues/41) 90 | 91 | ## License 92 | vue-strap is licensed under [The MIT License](LICENSE). 93 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-strap", 3 | "homepage": "https://github.com/yuche/vue-strap", 4 | "authors": [ 5 | "yuche " 6 | ], 7 | "description": "Boostrap components built with Vue.js", 8 | "main": [ 9 | "dist/vue-strap.js", 10 | "dist/vue-strap.js.map", 11 | "dist/vue-strap.min.js" 12 | ], 13 | "moduleType": ["amd","globals"], 14 | "keywords": [ 15 | "bootstrap", 16 | "vue.js", 17 | "vue-components" 18 | ], 19 | "license": "MIT", 20 | "ignore": [ 21 | "**/.*", 22 | "node_modules", 23 | "bower_components", 24 | "docs", 25 | "src", 26 | "favicon.ico", 27 | "index.html", 28 | "webpack*.js" 29 | ] 30 | } 31 | -------------------------------------------------------------------------------- /dist/isMobileBrowser.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Detect mobile devices (optional) 3 | * Based on http://detectmobilebrowsers.com/ 4 | * 5 | * @value: navigator.isMobile 6 | * @return: true | false 7 | * Detect if this plugin is enabled: ('isMobile' in navigator) 8 | */ 9 | (function(a){ 10 | var isMobile = /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4)); 11 | try{ Object.defineProperty(navigator,'isMobile',{get:function(){return isMobile}}); }catch(e){ navigator.isMobile=isMobile } 12 | })(navigator.userAgent||navigator.vendor||window.opera); -------------------------------------------------------------------------------- /dist/vue-strap-lang.js: -------------------------------------------------------------------------------- 1 | window.VueStrapLang = (function(){ 2 | var l = { //languages 3 | 4 | en: { 5 | daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'], 6 | limit: 'Limit reached ({{limit}} items max).', 7 | loading: 'Loading...', 8 | minLength: 'Min. Length', 9 | months: [ 10 | 'January', 'February', 'March', 'April', 'May', 'June', 11 | 'July', 'August', 'September', 'October', 'November', 'December' 12 | ], 13 | notSelected: 'Nothing Selected', 14 | required: 'Required', 15 | search: 'Search' 16 | }, 17 | 18 | ru: { 19 | daysOfWeek: ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'], 20 | limit: 'Максимальное количество достигнуто ({{limit}} максимально).', 21 | loading: 'Загрузка...', 22 | minLength: 'Минимальная длинна', 23 | months: [ 24 | 'Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 25 | 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь' 26 | ], 27 | notSelected: 'Ничего не выбрано', 28 | required: 'Обязательно', 29 | search: 'Поиск' 30 | }, 31 | 32 | es: { 33 | daysOfWeek: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa'], 34 | loading: 'Cargando...', 35 | minLength: 'Tamaño Mínimo', 36 | months: [ 37 | 'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 38 | 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre' 39 | ], 40 | notSelected: 'Nada seleccionado', 41 | required: 'Requerido', 42 | search: 'Buscar', 43 | limit: 'Limite alcanzado (máximo {{limit}} items).' 44 | }, 45 | 46 | 'pt-BR': { 47 | daysOfWeek: ['Do', 'Se', 'Te', 'Qa', 'Qi', 'Sx', 'Sa'], 48 | limit: 'Limite atingido (máximo {{limit}} items).', 49 | loading: 'Cargando...', 50 | minLength: 'Tamanho Mínimo', 51 | months: [ 52 | 'Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 53 | 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro' 54 | ], 55 | notSelected: 'Nada selecionado', 56 | required: 'Requerido', 57 | search: 'Buscar' 58 | }, 59 | 60 | fr: { 61 | daysOfWeek: ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa'], 62 | limit: 'Limite atteinte ({{limit}} éléments max).', 63 | loading: 'Chargement en cours...', 64 | minLength: 'Longueur Minimum', 65 | months: [ 66 | 'Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 67 | 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre' 68 | ], 69 | notSelected: 'Aucune sélection', 70 | required: 'Requis', 71 | search: 'Recherche' 72 | }, 73 | 74 | de: { 75 | daysOfWeek: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'], 76 | limit: 'Limit erreicht (max {{limit}}).', 77 | loading: 'Lade...', 78 | minLength: 'Min. Länge', 79 | months: [ 80 | 'Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 81 | 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember' 82 | ], 83 | notSelected: 'Nichts ausgewählt', 84 | required: 'Benötigt', 85 | search: 'Suche' 86 | }, 87 | 88 | it: { 89 | daysOfWeek: ['Do', 'Lu', 'Ma', 'Me', 'Gi', 'Ve', 'Sa'], 90 | limit: 'Limite raggiunto (max {{limit}}).', 91 | loading: 'Caricamento...', 92 | minLength: 'Lunghezza min.', 93 | months: [ 94 | 'Gennaio', 'Febbraio', 'Marzo', 'Aprile', 'Maggio', 'Giugno', 95 | 'Luglio', 'Agosto', 'Settembre', 'Ottobre', 'Novembre', 'Dicembre' 96 | ], 97 | notSelected: 'Nessuna selezione', 98 | required: 'Richiesto', 99 | search: 'Cerca' 100 | } 101 | }; 102 | 103 | /** 104 | * Some browsers handle short language code (eg. 'en'), others handle 5 chars (eg. 'en-US'). 105 | * With aliases you can handle a group of similar languages, using a regular expresion. 106 | * If the language is not found, the default language is english. 107 | */ 108 | var aliases = { 109 | es: /^es-[A-Z]{2}$/i, 110 | en: /^en-[A-Z]{2}$/i, 111 | de: /^de-[A-Z]{2}$/i, 112 | ru: /^ru-[A-Z]{2}$/i, 113 | it: /^it-[A-Z]{2}$/i, 114 | }; 115 | 116 | return function (lang) { 117 | lang = lang || 'en'; 118 | var i, tr = {}; 119 | for (i in aliases) { 120 | if (aliases[i].test(lang)) lang = i; 121 | } 122 | for (i in l.en) { 123 | tr[i] = (l[lang] && l[lang][i]) || l.en[i]; 124 | } 125 | 126 | return tr; 127 | }; 128 | })(); 129 | -------------------------------------------------------------------------------- /docs/affixSidebar.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 51 | -------------------------------------------------------------------------------- /docs/assets/font/icon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuche/vue-strap/9c7c0bf1c1ea8c704e62bfc8111c8fd794921c53/docs/assets/font/icon.eot -------------------------------------------------------------------------------- /docs/assets/font/icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Copyright (C) 2015 by original authors @ fontello.com 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /docs/assets/font/icon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuche/vue-strap/9c7c0bf1c1ea8c704e62bfc8111c8fd794921c53/docs/assets/font/icon.ttf -------------------------------------------------------------------------------- /docs/assets/font/icon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuche/vue-strap/9c7c0bf1c1ea8c704e62bfc8111c8fd794921c53/docs/assets/font/icon.woff -------------------------------------------------------------------------------- /docs/assets/style.css: -------------------------------------------------------------------------------- 1 | /* 2 | * React-Bootstrap Documentation 3 | * Special styles for presenting react-bootstrap's documentation and code examples. 4 | * Based on the Bootstrap Documentation styles and overridden as necessary. 5 | */ 6 | 7 | body { 8 | font-family: 'Source Sans Pro', 'helvetica neue', 'Avenir Next', 'Avenir',Arial, sans-serif; 9 | } 10 | 11 | .bs-docs-section h1 { 12 | font-size: 42px 13 | } 14 | 15 | .bs-docs-nav .navbar-nav > li > a { 16 | color: #333; 17 | } 18 | .bs-docs-footer { 19 | padding-top: 20px; 20 | text-align: left; 21 | } 22 | .bs-docs-nav .navbar-collapse { 23 | overflow: hidden; 24 | } 25 | .bs-docs-nav { 26 | box-shadow: 0 3px 3px rgba(0,0,0,0.175); 27 | } 28 | 29 | .bs-docs-header p { 30 | font-weight: lighter; 31 | } 32 | 33 | 34 | .bs-docs-header a { 35 | color: white; 36 | font-weight: normal; 37 | } 38 | .btn-outline-inverse { 39 | border-color: white; 40 | transition: color .15s ease; 41 | } 42 | .bs-docs-header a:hover, 43 | .btn-outline-inverse:hover, .btn-outline-inverse:focus, .btn-outline-inverse:active, 44 | .bs-docs-nav .navbar-brand { 45 | color: #1D976C; 46 | } 47 | 48 | .bs-docs-masthead, .bs-docs-header { 49 | background: linear-gradient(90deg, #1D976C 10%, #93F9B9 90%); /* W3C */ 50 | 51 | filter: none; 52 | color: #e9e9e9; 53 | } 54 | 55 | .bs-docs-masthead { 56 | margin-bottom: 20px; 57 | } 58 | 59 | .bs-docs-header h1 { 60 | color: #ffffff; 61 | } 62 | 63 | .bs-docs-header p { 64 | color: #ffffff; 65 | } 66 | 67 | a.back-to-top { 68 | font-size: 13px; 69 | margin-top: 0; 70 | } 71 | 72 | .bs-docs-sidebar .nav>li>a { 73 | color: #767676; 74 | font-size: 14px; 75 | } 76 | 77 | .bs-docs-sidebar .nav>li>a:hover, .bs-docs-sidebar .nav>li>a:focus { 78 | color: #42b983; 79 | border-left: 1px solid #42b983; 80 | } 81 | 82 | .back-to-top:hover { 83 | color: #42b983; 84 | } 85 | 86 | 87 | .CodeMirror, .CodeMirror-scroll { 88 | height: auto; 89 | } 90 | 91 | .bs-example .btn-toolbar + .btn-toolbar { 92 | margin-top: 10px; 93 | } 94 | 95 | .bs-example .static-modal .modal { 96 | position: relative; 97 | top: auto; 98 | right: auto; 99 | left: auto; 100 | bottom: auto; 101 | z-index: 1; 102 | display: block; 103 | } 104 | 105 | .bs-docs-booticon { 106 | background-size: contain; 107 | border: 0; 108 | width: 200px; 109 | height: 200px; 110 | } 111 | 112 | .bs-example-popover-contained { 113 | height: 200px; 114 | } 115 | 116 | .bs-example-popover-contained > div { 117 | position: relative; 118 | } 119 | 120 | .bs-example-popover-scroll { 121 | overflow: scroll; 122 | height: 200px; 123 | } 124 | 125 | .bs-example-popover-scroll > div { 126 | position: relative; 127 | padding: 100px 0; 128 | } 129 | 130 | .playground { 131 | margin-bottom: 36px; 132 | } 133 | 134 | .bs-example { 135 | margin-bottom: 0; 136 | } 137 | 138 | .bs-example + .highlight { 139 | margin-top: 0; 140 | margin-bottom: 0; 141 | border-top: none; 142 | border-bottom-right-radius: 0; 143 | } 144 | 145 | .code-toggle { 146 | float: right; 147 | display: inline-block; 148 | position: relative; 149 | top: -1px; 150 | background: #fafafa; 151 | border-bottom-left-radius: 4px; 152 | border-bottom-right-radius: 4px; 153 | border: 1px solid #e1e1e8; 154 | border-top: none; 155 | padding: 4px 8px; 156 | } 157 | 158 | @media (min-width: 768px) { 159 | .code-toggle { 160 | background: #fff; 161 | } 162 | } 163 | 164 | .code-toggle.open { 165 | background: #f8f5ec; 166 | } 167 | 168 | /* Minimal CSS Needed for contained modals */ 169 | .modal-container { 170 | position: relative; 171 | } 172 | .modal-container .modal, .modal-container .modal-backdrop { 173 | position: absolute; 174 | } 175 | 176 | .prop-table { 177 | background-color: white; 178 | } 179 | 180 | .bs-example.tooltip-static .tooltip { 181 | position: relative; 182 | display: inline-block; 183 | margin: 5px 10px; 184 | 185 | } 186 | 187 | .bs-example .super-colors { 188 | background: -moz-linear-gradient( top , 189 | rgba(255, 0, 0, 1) 0%, 190 | rgba(255, 255, 0, 1) 15%, 191 | rgba(0, 255, 0, 1) 30%, 192 | rgba(0, 255, 255, 1) 50%, 193 | rgba(0, 0, 255, 1) 65%, 194 | rgba(255, 0, 255, 1) 80%, 195 | rgba(255, 0, 0, 1) 100%); 196 | background: -webkit-gradient(linear, left top, left bottom, 197 | color-stop(0%, rgba(255, 0, 0, 1)), 198 | color-stop(15%, rgba(255, 255, 0, 1)), 199 | color-stop(30%, rgba(0, 255, 0, 1)), 200 | color-stop(50%, rgba(0, 255, 255, 1)), 201 | color-stop(65%, rgba(0, 0, 255, 1)), 202 | color-stop(80%, rgba(255, 0, 255, 1)), 203 | color-stop(100%, rgba(255, 0, 0, 1))); 204 | } 205 | 206 | /*.bs-example .custom-menu > ul > li { 207 | padding: 0 20px; 208 | }*/ 209 | 210 | .anchor, 211 | .anchor:hover, 212 | .anchor:active, 213 | .anchor:focus { 214 | color: black; 215 | text-decoration: none; 216 | position: relative; 217 | } 218 | .anchor-icon { 219 | font-size: 90%; 220 | padding-top: 0.1em; 221 | position: absolute; 222 | left: -0.8em; 223 | opacity: 0; 224 | } 225 | 226 | h1:hover .anchor-icon, 227 | h1 a:focus .anchor-icon, 228 | h2:hover .anchor-icon, 229 | h2 a:focus .anchor-icon, 230 | h3:hover .anchor-icon, 231 | h3 a:focus .anchor-icon, 232 | h4:hover .anchor-icon, 233 | h4 a:focus .anchor-icon { 234 | opacity: 0.5; 235 | } 236 | 237 | .prop-desc pre { 238 | border-radius: 0; 239 | border-width: 0; 240 | border-left-width: 3px; 241 | } 242 | 243 | .prop-desc-heading { 244 | margin-bottom: 10px; 245 | } 246 | 247 | .bs-callout { 248 | padding: 20px; 249 | margin: 20px 0; 250 | border: 1px solid #eee; 251 | border-left-width: 5px; 252 | border-radius: 3px; 253 | } 254 | .bs-callout h4 { 255 | margin-top: 0; 256 | margin-bottom: 5px; 257 | } 258 | .bs-callout p:last-child { 259 | margin-bottom: 0; 260 | } 261 | .bs-callout code { 262 | border-radius: 3px; 263 | } 264 | .bs-callout+.bs-callout { 265 | margin-top: -5px; 266 | } 267 | .bs-callout-default { 268 | border-left-color: #777; 269 | } 270 | .bs-callout-default h4 { 271 | color: #777; 272 | } 273 | .bs-callout-primary { 274 | border-left-color: #428bca; 275 | } 276 | .bs-callout-primary h4 { 277 | color: #428bca; 278 | } 279 | .bs-callout-success { 280 | border-left-color: #42b983; 281 | } 282 | .bs-callout-success h4 { 283 | color: #42b983; 284 | } 285 | .bs-callout-danger { 286 | border-left-color: #d9534f; 287 | } 288 | .bs-callout-danger h4 { 289 | color: #d9534f; 290 | } 291 | .bs-callout-warning { 292 | border-left-color: #f0ad4e; 293 | } 294 | .bs-callout-warning h4 { 295 | color: #f0ad4e; 296 | } 297 | .bs-callout-info { 298 | border-left-color: #5bc0de; 299 | } 300 | .bs-callout-info h4 { 301 | color: #5bc0de; 302 | } 303 | -------------------------------------------------------------------------------- /docs/bodyDocs.vue: -------------------------------------------------------------------------------- 1 | 59 | 60 | -------------------------------------------------------------------------------- /docs/data.json: -------------------------------------------------------------------------------- 1 | [ 2 | {"value":"Apple", "text":"Apple"}, 3 | {"value":"Banana", "text":"Banana"}, 4 | {"value":"Cherry", "text":"Cherry"}, 5 | {"value":"Orange", "text":"Orange"}, 6 | {"value":"Grape", "text":"Grape"} 7 | ] 8 | -------------------------------------------------------------------------------- /docs/example/accordionDocs.vue: -------------------------------------------------------------------------------- 1 | 97 | 98 | 127 | -------------------------------------------------------------------------------- /docs/example/affixDocs.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 48 | 49 | 67 | -------------------------------------------------------------------------------- /docs/example/alertDocs.vue: -------------------------------------------------------------------------------- 1 | 102 | 103 | 124 | 125 | 132 | -------------------------------------------------------------------------------- /docs/example/asideDocs.vue: -------------------------------------------------------------------------------- 1 | 76 | 77 | 98 | -------------------------------------------------------------------------------- /docs/example/buttonGroupDocs.vue: -------------------------------------------------------------------------------- 1 | 93 | 94 | 119 | -------------------------------------------------------------------------------- /docs/example/carouselDocs.vue: -------------------------------------------------------------------------------- 1 | 68 | 69 | 86 | -------------------------------------------------------------------------------- /docs/example/checkboxDocs.vue: -------------------------------------------------------------------------------- 1 | 59 | 60 | 85 | -------------------------------------------------------------------------------- /docs/example/container.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /docs/example/datepickerDocs.vue: -------------------------------------------------------------------------------- 1 | 73 | 74 | 123 | -------------------------------------------------------------------------------- /docs/example/docCode.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 37 | -------------------------------------------------------------------------------- /docs/example/docSection.vue: -------------------------------------------------------------------------------- 1 | 7 | 26 | -------------------------------------------------------------------------------- /docs/example/docTable.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 73 | -------------------------------------------------------------------------------- /docs/example/dropdownDocs.vue: -------------------------------------------------------------------------------- 1 | 133 | 134 | 149 | -------------------------------------------------------------------------------- /docs/example/formGroupDocs.vue: -------------------------------------------------------------------------------- 1 | 79 | 80 | 114 | 115 | 120 | -------------------------------------------------------------------------------- /docs/example/gettingStarted.vue: -------------------------------------------------------------------------------- 1 | 109 | 117 | -------------------------------------------------------------------------------- /docs/example/modalDocs.vue: -------------------------------------------------------------------------------- 1 | 185 | 186 | 211 | -------------------------------------------------------------------------------- /docs/example/navbarDocs.vue: -------------------------------------------------------------------------------- 1 | 68 | 69 | 104 | -------------------------------------------------------------------------------- /docs/example/popoverDocs.vue: -------------------------------------------------------------------------------- 1 | 74 | 75 | 99 | -------------------------------------------------------------------------------- /docs/example/progressbar-docs.vue: -------------------------------------------------------------------------------- 1 | 90 | 91 | 127 | -------------------------------------------------------------------------------- /docs/example/radioDocs.vue: -------------------------------------------------------------------------------- 1 | 57 | 58 | 78 | -------------------------------------------------------------------------------- /docs/example/selectDocs.vue: -------------------------------------------------------------------------------- 1 | 174 | 175 | 218 | 219 | 224 | -------------------------------------------------------------------------------- /docs/example/spinnerDocs.vue: -------------------------------------------------------------------------------- 1 | 36 | 37 | 69 | -------------------------------------------------------------------------------- /docs/example/tabsDocs.vue: -------------------------------------------------------------------------------- 1 | 103 | 104 | 123 | -------------------------------------------------------------------------------- /docs/example/tooltipDocs.vue: -------------------------------------------------------------------------------- 1 | 56 | 57 | 80 | -------------------------------------------------------------------------------- /docs/example/typeaheadDocs.vue: -------------------------------------------------------------------------------- 1 | 154 | 155 | 189 | -------------------------------------------------------------------------------- /docs/index.js: -------------------------------------------------------------------------------- 1 | require('./assets/docs.css') 2 | require('./assets/style.css') 3 | require('prismjs') 4 | require('./js/showLanguage') 5 | 6 | import $ from 'src/utils/NodeList.js' 7 | import bodyDocs from './bodyDocs.vue' 8 | 9 | Vue.config.devtools = true 10 | Vue.config.debug = true 11 | 12 | new Vue({ 13 | el: 'body', 14 | components: { 15 | bodyDocs, 16 | }, 17 | created () { 18 | if (!this.$root.sections) { 19 | this.$root.sections = [] 20 | } 21 | }, 22 | ready () { 23 | var list = this.$root.sections 24 | while(list.length) list.pop() 25 | $('.bs-docs-section', this.$els.sections).each(el => { 26 | list.push({ 27 | id: el.id, 28 | name: el.querySelector('.anchor').innerText, 29 | el: el 30 | }) 31 | }) 32 | } 33 | }) 34 | -------------------------------------------------------------------------------- /docs/js/showLanguage.js: -------------------------------------------------------------------------------- 1 | (function(){ 2 | 3 | if (typeof self === 'undefined' || !self.Prism || !self.document) { 4 | return; 5 | } 6 | 7 | // The languages map is built automatically with gulp 8 | var Languages = /*languages_placeholder[*/{"html":"HTML","css":"CSS","clike":"C-like","javascript":"JavaScript","abap":"ABAP","actionscript":"ActionScript","apacheconf":"Apache Configuration","apl":"APL","applescript":"AppleScript","aspnet":"ASP.NET (C#)","autoit":"AutoIt","autohotkey":"AutoHotkey","basic":"BASIC","csharp":"C#","cpp":"C++","coffeescript":"CoffeeScript","css-extras":"CSS Extras","fsharp":"F#","glsl":"GLSL","http":"HTTP","inform7":"Inform 7","latex":"LaTeX","lolcode":"LOLCODE","matlab":"MATLAB","mel":"MEL","nasm":"NASM","nginx":"nginx","nsis":"NSIS","objectivec":"Objective-C","ocaml":"OCaml","php":"PHP","php-extras":"PHP Extras","powershell":"PowerShell","jsx":"React JSX","rest":"reST (reStructuredText)","sas":"SAS","sass":"Sass (Sass)","scss":"Sass (Scss)","sql":"SQL","typescript":"TypeScript","vhdl":"VHDL","vim":"vim","wiki":"Wiki markup","yaml":"YAML"}/*]*/; 9 | Prism.hooks.add('before-highlight', function(env) { 10 | var pre = env.element.parentNode; 11 | if (!pre || !/pre/i.test(pre.nodeName)) { 12 | return; 13 | } 14 | var language = Languages[env.language] || (env.language.substring(0, 1).toUpperCase() + env.language.substring(1)); 15 | pre.setAttribute('data-language', language); 16 | }); 17 | 18 | })(); 19 | -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuche/vue-strap/9c7c0bf1c1ea8c704e62bfc8111c8fd794921c53/favicon.ico -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | VueStrap - Bootstrap components built with Vue.js 7 | 8 | 9 | 10 | 11 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-strap", 3 | "version": "1.1.40", 4 | "description": "Bootstrap components built with Vue.js", 5 | "main": "dist/vue-strap.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "yuche/vue-strap" 9 | }, 10 | "homepage": "http://yuche.github.io/vue-strap/", 11 | "directories": { 12 | "src": "src/" 13 | }, 14 | "dependencies": { 15 | "bootstrap": "^3.3.7", 16 | "vue": "^1.0.26" 17 | }, 18 | "files": [ 19 | "LICENSE", 20 | "README.md", 21 | "CHANGELOG.md", 22 | "src", 23 | "dist" 24 | ], 25 | "keywords": [ 26 | "bootstrap", 27 | "vue-bootstrap", 28 | "vue-component", 29 | "vue" 30 | ], 31 | "devDependencies": { 32 | "babel-core": "^6.17.0", 33 | "babel-loader": "^6.2.0", 34 | "babel-plugin-transform-runtime": "^6.15.0", 35 | "babel-preset-es2015": "^6.16.0", 36 | "babel-runtime": "^6.11.0", 37 | "css-loader": "^0.21.0", 38 | "gh-pages": "^0.11.0", 39 | "less": "^2.7.0", 40 | "less-loader": "^2.2.3", 41 | "node-sass": "^3.10.1", 42 | "prismjs": "^1.5.1", 43 | "sass-loader": "^3.2.3", 44 | "style-loader": "^0.13.1", 45 | "vue-hot-reload-api": "^1.3.3", 46 | "vue-html-loader": "^1.2.3", 47 | "vue-loader": "7.1.7", 48 | "webpack": "^1.13.2", 49 | "webpack-dev-server": "^1.16.0" 50 | }, 51 | "browserify": { 52 | "transform": [ 53 | [ 54 | "babelify", 55 | { 56 | "presets": [ 57 | "es2015" 58 | ] 59 | } 60 | ], 61 | [ 62 | "vueify" 63 | ] 64 | ] 65 | }, 66 | "scripts": { 67 | "build": "webpack --progress --hide-modules --config webpack.build.min.js && webpack --progress --hide-modules --config webpack.build.js", 68 | "builddocs": "webpack --progress --hide-modules && set NODE_ENV=production webpack --progress --hide-modules", 69 | "docs": "webpack-dev-server --inline --hot --quiet", 70 | "gpages": "gh-pages -d build", 71 | "postversion": "git push && git push --tags", 72 | "version": "npm run build && git add -A dist" 73 | }, 74 | "author": "yuche", 75 | "license": "MIT" 76 | } 77 | -------------------------------------------------------------------------------- /src/Accordion.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 36 | -------------------------------------------------------------------------------- /src/Affix.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 69 | -------------------------------------------------------------------------------- /src/Alert.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 65 | 66 | 90 | -------------------------------------------------------------------------------- /src/Aside.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 92 | 93 | 233 | -------------------------------------------------------------------------------- /src/Carousel.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 108 | 109 | 114 | -------------------------------------------------------------------------------- /src/Checkbox.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 115 | 116 | 172 | -------------------------------------------------------------------------------- /src/Dropdown.vue: -------------------------------------------------------------------------------- 1 | 30 | 107 | 108 | -------------------------------------------------------------------------------- /src/FormGroup.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 89 | -------------------------------------------------------------------------------- /src/Modal.vue: -------------------------------------------------------------------------------- 1 | 35 | 36 | 132 | -------------------------------------------------------------------------------- /src/Navbar.vue: -------------------------------------------------------------------------------- 1 | 31 | 32 | 107 | -------------------------------------------------------------------------------- /src/Option.vue: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/Panel.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 73 | 74 | 85 | -------------------------------------------------------------------------------- /src/Popover.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 32 | 33 | 67 | -------------------------------------------------------------------------------- /src/Progressbar.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 48 | -------------------------------------------------------------------------------- /src/Radio.vue: -------------------------------------------------------------------------------- 1 | 30 | 31 | 111 | 112 | 164 | -------------------------------------------------------------------------------- /src/Slider.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 35 | -------------------------------------------------------------------------------- /src/Spinner.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 98 | 99 | 177 | -------------------------------------------------------------------------------- /src/Tab.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 71 | -------------------------------------------------------------------------------- /src/TabGroup.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | 55 | 56 | 61 | -------------------------------------------------------------------------------- /src/Tabset.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 71 | 72 | 77 | -------------------------------------------------------------------------------- /src/Tooltip.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 35 | 36 | 66 | -------------------------------------------------------------------------------- /src/Typeahead.vue: -------------------------------------------------------------------------------- 1 | 25 | 26 | 165 | 166 | -------------------------------------------------------------------------------- /src/buttonGroup.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 48 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import $ from './utils/NodeList.js' 2 | import accordion from './Accordion.vue' 3 | import affix from './Affix.vue' 4 | import alert from './Alert.vue' 5 | import aside from './Aside.vue' 6 | import buttonGroup from './buttonGroup.vue' 7 | import carousel from './Carousel.vue' 8 | import checkbox from './Checkbox.vue' 9 | import datepicker from './Datepicker.vue' 10 | import dropdown from './Dropdown.vue' 11 | import formGroup from './FormGroup.vue' 12 | import input from './Input.vue' 13 | import modal from './Modal.vue' 14 | import navbar from './Navbar.vue' 15 | import option from './Option.vue' 16 | import panel from './Panel.vue' 17 | import popover from './Popover.vue' 18 | import progressbar from './Progressbar.vue' 19 | import radio from './Radio.vue' 20 | import select from './Select.vue' 21 | import slider from './Slider.vue' 22 | import spinner from './Spinner.vue' 23 | import tab from './Tab.vue' 24 | import tabGroup from './TabGroup.vue' 25 | import tabset from './Tabset.vue' 26 | import tooltip from './Tooltip.vue' 27 | import typeahead from './Typeahead.vue' 28 | 29 | const VueStrap = { 30 | $, 31 | accordion, 32 | affix, 33 | alert, 34 | aside, 35 | buttonGroup, 36 | carousel, 37 | checkbox, 38 | datepicker, 39 | dropdown, 40 | formGroup, 41 | input, 42 | modal, 43 | navbar, 44 | option, 45 | panel, 46 | popover, 47 | progressbar, 48 | radio, 49 | select, 50 | slider, 51 | spinner, 52 | tab, 53 | tabGroup, 54 | tabset, 55 | tooltip, 56 | typeahead 57 | } 58 | 59 | module.exports = VueStrap 60 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | export {accordion} from './Accordion.vue' 2 | export {affix} from './Affix.vue' 3 | export {alert} from './Alert.vue' 4 | export {aside} from './Aside.vue' 5 | export {buttonGroup} from './buttonGroup.vue' 6 | export {carousel} from './Carousel.vue' 7 | export {checkbox} from './Checkbox.vue' 8 | export {datepicker} from './Datepicker.vue' 9 | export {dropdown} from './Dropdown.vue' 10 | export {input} from './Input.vue' 11 | export {modal} from './Modal.vue' 12 | export {navbar} from './Navbar.vue' 13 | export {option} from './Option.vue' 14 | export {panel} from './Panel.vue' 15 | export {popover} from './Popover.vue' 16 | export {progressbar} from './Progressbar.vue' 17 | export {radio} from './Radio.vue' 18 | export {select} from './Select.vue' 19 | export {slider} from './Slider.vue' 20 | export {spinner} from './Spinner.vue' 21 | export {tab} from './Tab.vue' 22 | export {tabset} from './Tabset.vue' 23 | export {tooltip} from './Tooltip.vue' 24 | export {typeahead} from './Typeahead.vue' 25 | -------------------------------------------------------------------------------- /src/utils/popoverMixins.js: -------------------------------------------------------------------------------- 1 | import {coerce} from './utils.js' 2 | import $ from './NodeList.js' 3 | 4 | export default { 5 | props: { 6 | trigger: { 7 | type: String 8 | }, 9 | effect: { 10 | type: String, 11 | default: 'fade' 12 | }, 13 | title: { 14 | type: String 15 | }, 16 | content: { 17 | type: String 18 | }, 19 | header: { 20 | type: Boolean, 21 | coerce: coerce.boolean, 22 | default: true 23 | }, 24 | placement: { 25 | type: String, 26 | default: 'top' 27 | } 28 | }, 29 | data () { 30 | return { 31 | position: { 32 | top: 0, 33 | left: 0 34 | }, 35 | show: false 36 | } 37 | }, 38 | methods: { 39 | toggle (e) { 40 | if (e && this.trigger === 'contextmenu') e.preventDefault() 41 | if (!(this.show = !this.show)) { return } 42 | Vue.nextTick(() => { 43 | const popover = this.$els.popover 44 | const trigger = this.$els.trigger.children[0] 45 | switch (this.placement) { 46 | case 'top' : 47 | this.position.left = trigger.offsetLeft - popover.offsetWidth / 2 + trigger.offsetWidth / 2 48 | this.position.top = trigger.offsetTop - popover.offsetHeight 49 | break 50 | case 'left': 51 | this.position.left = trigger.offsetLeft - popover.offsetWidth 52 | this.position.top = trigger.offsetTop + trigger.offsetHeight / 2 - popover.offsetHeight / 2 53 | break 54 | case 'right': 55 | this.position.left = trigger.offsetLeft + trigger.offsetWidth 56 | this.position.top = trigger.offsetTop + trigger.offsetHeight / 2 - popover.offsetHeight / 2 57 | break 58 | case 'bottom': 59 | this.position.left = trigger.offsetLeft - popover.offsetWidth / 2 + trigger.offsetWidth / 2 60 | this.position.top = trigger.offsetTop + trigger.offsetHeight 61 | break 62 | default: 63 | console.warn('Wrong placement prop') 64 | } 65 | popover.style.top = this.position.top + 'px' 66 | popover.style.left = this.position.left + 'px' 67 | }, 0) 68 | } 69 | }, 70 | ready () { 71 | let trigger = this.$els.trigger 72 | if (!trigger) return console.error('Could not find trigger v-el in your component that uses popoverMixin.') 73 | 74 | if (this.trigger === 'focus' && !~trigger.tabIndex) { 75 | trigger = $('a,input,select,textarea,button', trigger) 76 | if (!trigger.length) { trigger = null } 77 | } 78 | if (trigger) { 79 | let events = { contextmenu: 'contextmenu', hover: 'mouseleave mouseenter', focus: 'blur focus' } 80 | $(trigger).on(events[this.trigger] || 'click', this.toggle) 81 | this._trigger = trigger 82 | } 83 | }, 84 | beforeDestroy () { 85 | if (this._trigger) $(this._trigger).off() 86 | } 87 | } 88 | -------------------------------------------------------------------------------- /src/utils/spinner.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | * 3 | * Spinner 4 | * With fallback to IE9 5 | * 6 | */ 7 | 8 | // Variables 9 | // -------------------------------------------------- 10 | $brand-primary: darken(#428bca, 6.5%); // #337ab7 11 | $spinner-backdrop-background: rgba(255,255,255,0.9) !default;; 12 | $spinner-text-color: $brand-primary !default; 13 | $spinner-border-size: 4px !default; 14 | $spinner-border-primary-color: $brand-primary !default; 15 | $spinner-border-secondary-color: #ccc !default; 16 | $spinner-sm: 1.5em !default; 17 | $spinner-md: 2em !default; 18 | $spinner-lg: 2.5em !default; 19 | $spinner-xl: 3.5em !default; 20 | 21 | 22 | @mixin size($width, $height: $width) { 23 | width: $width; 24 | height: $height; 25 | } 26 | 27 | 28 | // Animation 29 | // -------------------------------------------------- 30 | @keyframes spin { 31 | 100% { 32 | transform: rotate(360deg); 33 | } 34 | } 35 | 36 | // Core stuff 37 | // -------------------------------------------------- 38 | .spinner-gritcode { 39 | top: 0; 40 | left: 0; 41 | bottom: 0; 42 | right: 0; 43 | z-index: 9998; 44 | position: absolute; 45 | width: 100%; 46 | text-align: center; 47 | background: $spinner-backdrop-background; 48 | 49 | // fixed position is better option for full screen spinner overlay 50 | &.spinner-fixed { 51 | position: fixed; 52 | } 53 | 54 | // wraps text and spinner itself and centers it 55 | .spinner-wrapper { 56 | position: absolute; 57 | top: 50%; 58 | left: 50%; 59 | transform: translate(-50%, -50%); 60 | // fix for IE9 61 | -ms-transform: translate(-50%, -50%); 62 | } 63 | 64 | // animated spinner 65 | .spinner-circle { 66 | position: relative; 67 | border: $spinner-border-size solid $spinner-border-secondary-color; 68 | border-right-color: $spinner-border-primary-color; 69 | border-radius: 50%; 70 | display: inline-block; 71 | animation: spin 0.6s linear; 72 | animation-iteration-count: infinite; 73 | width: 3em; 74 | height: 3em; 75 | z-index: 2; 76 | } 77 | 78 | // a text below spinner 79 | .spinner-text { 80 | position: relative; 81 | text-align: center; 82 | margin-top: 0.5em; 83 | z-index: 2; 84 | width: 100%; 85 | font-size: 95%; 86 | color: $spinner-text-color; 87 | } 88 | } 89 | 90 | // Sizes 91 | // -------------------------------------------------- 92 | .spinner-gritcode { 93 | &.spinner-sm .spinner-circle { 94 | @include size($spinner-sm, $spinner-sm) 95 | } 96 | &.spinner-md .spinner-circle { 97 | @include size($spinner-md, $spinner-md) 98 | } 99 | &.spinner-lg .spinner-circle { 100 | @include size($spinner-lg, $spinner-lg) 101 | } 102 | &.spinner-xl .spinner-circle { 103 | @include size($spinner-xl, $spinner-xl) 104 | } 105 | } 106 | 107 | // Default to standard gif for < IE10 108 | .lt-ie10, .ie9, .oldie, .no-csstransitions, .no-csstransforms3d { 109 | .spinner-gritcode .spinner-circle { 110 | background: url("http://i2.wp.com/www.thegreatnovelingadventure.com/wp-content/plugins/wp-polls/images/loading.gif") center center no-repeat; 111 | animation: none; 112 | margin-left: 0; 113 | margin-top: 5px; 114 | border: none; 115 | width: 32px; 116 | height: 32px; 117 | } 118 | } -------------------------------------------------------------------------------- /src/utils/utils.js: -------------------------------------------------------------------------------- 1 | // coerce convert som types of data into another type 2 | export const coerce = { 3 | // Convert a string to booleam. Otherwise, return the value without modification, so if is not boolean, Vue throw a warning. 4 | boolean: val => (typeof val === 'string' ? val === '' || val === 'true' ? true : (val === 'false' || val === 'null' || val === 'undefined' ? false : val) : val), 5 | // Attempt to convert a string value to a Number. Otherwise, return 0. 6 | number: (val, alt = null) => (typeof val === 'number' ? val : val === undefined || val === null || isNaN(Number(val)) ? alt : Number(val)), 7 | // Attempt to convert to string any value, except for null or undefined. 8 | string: val => (val === undefined || val === null ? '' : val + ''), 9 | // Pattern accept RegExp, function, or string (converted to RegExp). Otherwise return null. 10 | pattern: val => (val instanceof Function || val instanceof RegExp ? val : typeof val === 'string' ? new RegExp(val) : null) 11 | } 12 | 13 | export function getJSON (url) { 14 | var request = new window.XMLHttpRequest() 15 | var data = {} 16 | // p (-simulated- promise) 17 | var p = { 18 | then (fn1, fn2) { return p.done(fn1).fail(fn2) }, 19 | catch (fn) { return p.fail(fn) }, 20 | always (fn) { return p.done(fn).fail(fn) } 21 | }; 22 | ['done', 'fail'].forEach(name => { 23 | data[name] = [] 24 | p[name] = (fn) => { 25 | if (fn instanceof Function) data[name].push(fn) 26 | return p 27 | } 28 | }) 29 | p.done(JSON.parse) 30 | request.onreadystatechange = () => { 31 | if (request.readyState === 4) { 32 | let e = {status: request.status} 33 | if (request.status === 200) { 34 | try { 35 | var response = request.responseText 36 | for (var i in data.done) { 37 | var value = data.done[i](response) 38 | if (value !== undefined) { response = value } 39 | } 40 | } catch (err) { 41 | data.fail.forEach(fail => fail(err)) 42 | } 43 | } else { 44 | data.fail.forEach(fail => fail(e)) 45 | } 46 | } 47 | } 48 | request.open('GET', url) 49 | request.setRequestHeader('Accept', 'application/json') 50 | request.send() 51 | return p 52 | } 53 | 54 | export function getScrollBarWidth () { 55 | if (document.documentElement.scrollHeight <= document.documentElement.clientHeight) { 56 | return 0 57 | } 58 | let inner = document.createElement('p') 59 | inner.style.width = '100%' 60 | inner.style.height = '200px' 61 | 62 | let outer = document.createElement('div') 63 | outer.style.position = 'absolute' 64 | outer.style.top = '0px' 65 | outer.style.left = '0px' 66 | outer.style.visibility = 'hidden' 67 | outer.style.width = '200px' 68 | outer.style.height = '150px' 69 | outer.style.overflow = 'hidden' 70 | outer.appendChild(inner) 71 | 72 | document.body.appendChild(outer) 73 | let w1 = inner.offsetWidth 74 | outer.style.overflow = 'scroll' 75 | let w2 = inner.offsetWidth 76 | if (w1 === w2) w2 = outer.clientWidth 77 | 78 | document.body.removeChild(outer) 79 | 80 | return (w1 - w2) 81 | } 82 | 83 | // return all the translations or the default language (english) 84 | export function translations (lang = 'en') { 85 | let text = { 86 | daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'], 87 | limit: 'Limit reached ({{limit}} items max).', 88 | loading: 'Loading...', 89 | minLength: 'Min. Length', 90 | months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], 91 | notSelected: 'Nothing Selected', 92 | required: 'Required', 93 | search: 'Search' 94 | } 95 | return window.VueStrapLang ? window.VueStrapLang(lang) : text 96 | } 97 | 98 | // delayer: set a function that execute after a delay 99 | // @params (function, delay_prop or value, default_value) 100 | export function delayer (fn, varTimer, ifNaN = 100) { 101 | function toInt (el) { return /^[0-9]+$/.test(el) ? Number(el) || 1 : null } 102 | var timerId 103 | return function (...args) { 104 | if (timerId) clearTimeout(timerId) 105 | timerId = setTimeout(() => { 106 | fn.apply(this, args) 107 | }, toInt(varTimer) || toInt(this[varTimer]) || ifNaN) 108 | } 109 | } 110 | 111 | // Fix a vue instance Lifecycle to vue 1/2 (just the basic elements, is not a real parser, so this work only if your code is compatible with both) 112 | export function VueFixer (vue) { 113 | var vue2 = !window.Vue || !window.Vue.partial 114 | var mixin = { 115 | computed: { 116 | vue2 () { return !this.$dispatch } 117 | } 118 | } 119 | if (!vue2) { 120 | if (vue.beforeCreate) { 121 | mixin.create = vue.beforeCreate 122 | delete vue.beforeCreate 123 | } 124 | if (vue.beforeMount) { 125 | vue.beforeCompile = vue.beforeMount 126 | delete vue.beforeMount 127 | } 128 | if (vue.mounted) { 129 | vue.ready = vue.mounted 130 | delete vue.mounted 131 | } 132 | } else { 133 | if (vue.beforeCompile) { 134 | vue.beforeMount = vue.beforeCompile 135 | delete vue.beforeCompile 136 | } 137 | if (vue.compiled) { 138 | mixin.compiled = vue.compiled 139 | delete vue.compiled 140 | } 141 | if (vue.ready) { 142 | vue.mounted = vue.ready 143 | delete vue.ready 144 | } 145 | } 146 | if (!vue.mixins) { vue.mixins = [] } 147 | vue.mixins.unshift(mixin) 148 | return vue 149 | } 150 | -------------------------------------------------------------------------------- /webpack.build.js: -------------------------------------------------------------------------------- 1 | var config = require('./webpack.config.js') 2 | 3 | config.entry = { 4 | 'vue-strap': './src/index.js', 5 | } 6 | 7 | config.output = { 8 | filename: './dist/[name].js', 9 | library: 'VueStrap', 10 | libraryTarget: 'umd' 11 | } 12 | 13 | 14 | module.exports = config 15 | -------------------------------------------------------------------------------- /webpack.build.min.js: -------------------------------------------------------------------------------- 1 | var config = require('./webpack.build.js') 2 | var webpack = require('webpack') 3 | 4 | 5 | config.output.filename = config.output.filename.replace(/\.js$/, '.min.js') 6 | 7 | delete config.devtool 8 | 9 | config.plugins = [ 10 | new webpack.optimize.UglifyJsPlugin({ 11 | sourceMap: false, 12 | drop_console: true, 13 | compress: { 14 | warnings: false 15 | } 16 | }) 17 | ] 18 | 19 | module.exports = config 20 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack') 2 | var path = require('path') 3 | 4 | module.exports = { 5 | entry: './docs/index.js', 6 | output: { 7 | path: './build', 8 | publicPath: 'build/', 9 | filename: 'build-docs.js' 10 | }, 11 | resolve: { 12 | root: path.resolve('./') 13 | }, 14 | module: { 15 | loaders: [ 16 | {test: /\.vue$/, loader: 'vue' }, 17 | { 18 | test: /\.js$/, 19 | exclude: /node_modules|vue\/src|vue-router\/|vue-loader\/|vue-hot-reload-api\//, 20 | loader: 'babel' 21 | }, 22 | { test: /\.css$/, loader: "style-loader!css-loader?root=./docs/" }, 23 | {test: /\.scss$/, loader: "style!css!sass"}, 24 | {test: /\.less$/, loader: "style-loader!css-loader!less-loader"}, 25 | ] 26 | }, 27 | babel: { 28 | presets: ['es2015'], 29 | plugins: ['transform-runtime'] 30 | }, 31 | devtool: 'source-map' 32 | }; 33 | 34 | 35 | if (process.env.NODE_ENV === 'production') { 36 | delete module.exports.devtool; 37 | module.exports.plugins = [ 38 | new webpack.DefinePlugin({ 39 | 'process.env': { 40 | NODE_ENV: '"production"' 41 | } 42 | }), 43 | new webpack.optimize.UglifyJsPlugin({ 44 | compress: { 45 | warnings: false 46 | } 47 | }) 48 | ]; 49 | } --------------------------------------------------------------------------------