vc-checkbox - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

CHANGELOG.md

 <h1 align="center">vc-checkbox - @changelog</h1>
 
+## 0.2.0
+
+`2016-09-18`
+
+- add `inline` prop and default to `true`
+  - 不设置或者设置为任意不为`false`的值*并且*处在buttonGroup模式时，自动内联
+  - 用于实现紧密并列的buttonGroup效果
+
 ## 0.1.0
@@ -4,0 +12,0 @@

dist/build.js

@@ -92,8 +92,8 @@ (function webpackUniversalModuleDefinition(root, factory) {
 if (!hotAPI.compatible) return
-var id = "-!babel!./../../../node_modules/.7.1.7@vue-loader/lib/selector.js?type=script&index=0!./Checkbox.vue"
+var id = "-!babel!./../../node_modules/.7.1.7@vue-loader/lib/selector.js?type=script&index=0!./Checkbox.vue"
 hotAPI.createRecord(id, module.exports)
-module.hot.accept(["-!babel!./../../../node_modules/.7.1.7@vue-loader/lib/selector.js?type=script&index=0!./Checkbox.vue","-!vue-html-loader!./../../../node_modules/.7.1.7@vue-loader/lib/selector.js?type=template&index=0!./Checkbox.vue"], function () {
-var newOptions = require("-!babel!./../../../node_modules/.7.1.7@vue-loader/lib/selector.js?type=script&index=0!./Checkbox.vue")
+module.hot.accept(["-!babel!./../../node_modules/.7.1.7@vue-loader/lib/selector.js?type=script&index=0!./Checkbox.vue","-!vue-html-loader!./../../node_modules/.7.1.7@vue-loader/lib/selector.js?type=template&index=0!./Checkbox.vue"], function () {
+var newOptions = require("-!babel!./../../node_modules/.7.1.7@vue-loader/lib/selector.js?type=script&index=0!./Checkbox.vue")
 if (newOptions && newOptions.__esModule) newOptions = newOptions.default
-var newTemplate = require("-!vue-html-loader!./../../../node_modules/.7.1.7@vue-loader/lib/selector.js?type=template&index=0!./Checkbox.vue")
+var newTemplate = require("-!vue-html-loader!./../../node_modules/.7.1.7@vue-loader/lib/selector.js?type=template&index=0!./Checkbox.vue")
 hotAPI.update(id, newOptions, newTemplate)
@@ -372,4 +372,4 @@ })
 	if(!content.locals) {
-		module.hot.accept("!!./../../../node_modules/.0.21.0@css-loader/index.js!./../../../node_modules/.7.1.7@vue-loader/lib/style-rewriter.js?id=_v-77fa266f&file=Checkbox.vue!./../../../node_modules/.2.2.3@less-loader/index.js!./../../../node_modules/.7.1.7@vue-loader/lib/selector.js?type=style&index=0!./Checkbox.vue", function() {
-			var newContent = require("!!./../../../node_modules/.0.21.0@css-loader/index.js!./../../../node_modules/.7.1.7@vue-loader/lib/style-rewriter.js?id=_v-77fa266f&file=Checkbox.vue!./../../../node_modules/.2.2.3@less-loader/index.js!./../../../node_modules/.7.1.7@vue-loader/lib/selector.js?type=style&index=0!./Checkbox.vue");
+		module.hot.accept("!!./../../node_modules/.0.21.0@css-loader/index.js!./../../node_modules/.7.1.7@vue-loader/lib/style-rewriter.js?id=_v-08ae9e80&file=Checkbox.vue!./../../node_modules/.2.2.3@less-loader/index.js!./../../node_modules/.7.1.7@vue-loader/lib/selector.js?type=style&index=0!./Checkbox.vue", function() {
+			var newContent = require("!!./../../node_modules/.0.21.0@css-loader/index.js!./../../node_modules/.7.1.7@vue-loader/lib/style-rewriter.js?id=_v-08ae9e80&file=Checkbox.vue!./../../node_modules/.2.2.3@less-loader/index.js!./../../node_modules/.7.1.7@vue-loader/lib/selector.js?type=style&index=0!./Checkbox.vue");
 			if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
@@ -392,3 +392,3 @@ update(newContent);
 // module
-exports.push([module.i, ".vc-checkbox-component {\n  display: inline-block;\n}\n.checkbox {\n  position: relative;\n}\n.checkbox > label > input {\n  box-sizing: border-box;\n  position: absolute;\n  z-index: -1;\n  padding: 0;\n  opacity: 0;\n  margin: 0;\n}\n.checkbox > label > .icon {\n  position: absolute;\n  top: .2rem;\n  left: 0;\n  display: block;\n  width: 1.4rem;\n  height: 1.4rem;\n  line-height: 1rem;\n  text-align: center;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  border-radius: .35rem;\n  background-repeat: no-repeat;\n  background-position: center center;\n  background-size: 50% 50%;\n}\n.checkbox:not(.active) > label > .icon {\n  background-color: #ddd;\n  border: 1px solid #bbb;\n}\n.checkbox > label > input:focus ~ .icon {\n  outline: 0;\n  border: 1px solid #66afe9;\n  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);\n}\n.checkbox.active > label > .icon {\n  background-size: 1rem 1rem;\n  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNyIgaGVpZ2h0PSI3Ij48cGF0aCBmaWxsPSIjZmZmIiBkPSJtNS43MywwLjUybC0zLjEyNDIyLDMuMzQxNjFsLTEuMzM4OTUsLTEuNDMyMTJsLTEuMjQ5NjksMS4zMzY2NWwyLjU4ODYzLDIuNzY4NzZsNC4zNzM5LC00LjY3ODI2bC0xLjI0OTY5LC0xLjMzNjY1bDAsMGwwLjAwMDAyLDAuMDAwMDF6Ii8+PC9zdmc+);\n}\n.checkbox.active .btn-default {\n  -webkit-filter: brightness(75%);\n          filter: brightness(75%);\n}\n.checkbox.disabled > label > .icon,\n.checkbox.readonly > label > .icon,\n.btn.readonly {\n  filter: alpha(opacity=65);\n  box-shadow: none;\n  opacity: .65;\n}\nlabel.btn > input[type=checkbox] {\n  position: absolute;\n  clip: rect(0, 0, 0, 0);\n  pointer-events: none;\n}\n", ""]);
+exports.push([module.i, ".vc-checkbox-component {\n  display: inline-block;\n}\n.vc-checkbox-component.inline {\n  float: left;\n}\n.checkbox {\n  position: relative;\n}\n.checkbox > label > input {\n  box-sizing: border-box;\n  position: absolute;\n  z-index: -1;\n  padding: 0;\n  opacity: 0;\n  margin: 0;\n}\n.checkbox > label > .icon {\n  position: absolute;\n  top: .2rem;\n  left: 0;\n  display: block;\n  width: 1.4rem;\n  height: 1.4rem;\n  line-height: 1rem;\n  text-align: center;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  border-radius: .35rem;\n  background-repeat: no-repeat;\n  background-position: center center;\n  background-size: 50% 50%;\n}\n.checkbox:not(.active) > label > .icon {\n  background-color: #ddd;\n  border: 1px solid #bbb;\n}\n.checkbox > label > input:focus ~ .icon {\n  outline: 0;\n  border: 1px solid #66afe9;\n  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);\n}\n.checkbox.active > label > .icon {\n  background-size: 1rem 1rem;\n  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNyIgaGVpZ2h0PSI3Ij48cGF0aCBmaWxsPSIjZmZmIiBkPSJtNS43MywwLjUybC0zLjEyNDIyLDMuMzQxNjFsLTEuMzM4OTUsLTEuNDMyMTJsLTEuMjQ5NjksMS4zMzY2NWwyLjU4ODYzLDIuNzY4NzZsNC4zNzM5LC00LjY3ODI2bC0xLjI0OTY5LC0xLjMzNjY1bDAsMGwwLjAwMDAyLDAuMDAwMDF6Ii8+PC9zdmc+);\n}\n.checkbox.active .btn-default {\n  -webkit-filter: brightness(75%);\n          filter: brightness(75%);\n}\n.checkbox.disabled > label > .icon,\n.checkbox.readonly > label > .icon,\n.btn.readonly {\n  filter: alpha(opacity=65);\n  box-shadow: none;\n  opacity: .65;\n}\nlabel.btn > input[type=checkbox] {\n  position: absolute;\n  clip: rect(0, 0, 0, 0);\n  pointer-events: none;\n}\n", ""]);
 
@@ -458,3 +458,3 @@ // exports
 
-module.exports = "<div class=\"vc-checkbox-component\">\n        <label \n            v-show=\"buttonStyle\"\n            :class=\"['btn btn-' + typeColor, { 'active': checked, 'disabled': disabled, 'readonly': readonly }]\"\n            @click.prevent=\"toggle\"\n            :title=\"title\"\n        >\n            <input type=\"checkbox\" autocomplete=\"off\"\n                v-el:input\n                v-show=\"!readonly\"\n                :name=\"name\"\n                :value=\"value\"\n                :checked=\"active\"\n                :disabled=\"disabled\"\n                :readonly=\"readonly\"\n            />\n            <slot>{{ label }}</slot>\n        </label>\n        <div v-else\n            :class=\"['checkbox', typetypeColor, { 'active': checked, 'disabled': disabled, 'readonly': readonly }]\"\n            @click.prevent=\"toggle\"\n        >\n            <label class=\"open\" :title=\"title\">\n                <input type=\"checkbox\" autocomplete=\"off\"\n                    v-el:input\n                    :name=\"name\"\n                    :value=\"value\"\n                    :checked=\"active\"\n                    :disabled=\"disabled\"\n                    :readonly=\"readonly\"\n                />\n                <span class=\"icon dropdown-toggle\" :class=\"[active ? 'btn-' + typeColor : '', { 'bg': typeColor === 'default' }]\"></span>\n                <span v-if=\"active && typeColor === 'default'\" class=\"icon\"></span>\n                <slot>{{ label }}</slot>\n            </label>\n        </div>\n    </div>";
+module.exports = "<div class=\"vc-checkbox-component\" :class=\"{ 'inline': inlineMode }\">\n        <label \n            v-show=\"buttonStyle\"\n            :class=\"['btn btn-' + typeColor, { 'active': checked, 'disabled': disabled, 'readonly': readonly }]\"\n            @click.prevent=\"toggle\"\n            :title=\"title\"\n        >\n            <input type=\"checkbox\" autocomplete=\"off\"\n                v-el:input\n                v-show=\"!readonly\"\n                :name=\"name\"\n                :value=\"value\"\n                :checked=\"active\"\n                :disabled=\"disabled\"\n                :readonly=\"readonly\"\n            />\n            <slot>{{ label }}</slot>\n        </label>\n        <div v-else\n            :class=\"['checkbox', typetypeColor, { 'active': checked, 'disabled': disabled, 'readonly': readonly }]\"\n            @click.prevent=\"toggle\"\n        >\n            <label class=\"open\" :title=\"title\">\n                <input type=\"checkbox\" autocomplete=\"off\"\n                    v-el:input\n                    :name=\"name\"\n                    :value=\"value\"\n                    :checked=\"active\"\n                    :disabled=\"disabled\"\n                    :readonly=\"readonly\"\n                />\n                <span class=\"icon dropdown-toggle\" :class=\"[active ? 'btn-' + typeColor : '', { 'bg': typeColor === 'default' }]\"></span>\n                <span v-if=\"active && typeColor === 'default'\" class=\"icon\"></span>\n                <slot>{{ label }}</slot>\n            </label>\n        </div>\n    </div>";
 
@@ -472,3 +472,3 @@ /***/ },
 // <template>
-//     <div class="vc-checkbox-component">
+//     <div class="vc-checkbox-component" :class="{ 'inline': inlineMode }">
 //         <label 
@@ -514,2 +514,3 @@ //             v-show="buttonStyle"
 exports.default = {
+    name: 'vc-checkbox',
     props: {
@@ -527,2 +528,5 @@ name: {
         },
+        inline: {
+            default: true
+        },
         button: {
@@ -552,2 +556,8 @@ type: Boolean,
     computed: {
+        inlineMode: function inlineMode() {
+            if (this.inline !== false && this.button && this.group && this.$parent._checkboxGroup) {
+                return true;
+            }
+            return false;
+        },
         active: function active() {
@@ -637,2 +647,6 @@ return typeof this.value !== 'boolean' && this.group ? ~this.$parent.value.indexOf(this.value) : this.checked === this.value;
 //     display: inline-block;
+
+//     &.inline {
+//         float: left;
+//     }
 // }
@@ -639,0 +653,0 @@ // .checkbox {

dist/build.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.vcCheckbox=t():e.vcCheckbox=t()}(this,function(){return function(e){function t(o){if(n[o])return n[o].exports;var i=n[o]={i:o,l:!1,exports:{}};return e[o].call(i.exports,i,i.exports,t),i.l=!0,i.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,t,n){Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:n})},t.n=function(e){var n=e&&e.__esModule?function(){return e["default"]}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="/",t(t.s=8)}([,function(e,t,n){n(3),e.exports=n(7),e.exports.__esModule&&(e.exports=e.exports["default"]),("function"==typeof e.exports?e.exports.options:e.exports).template=n(6)},function(e,t){function n(e,t){for(var n=0;n<e.length;n++){var o=e[n],i=d[o.id];if(i){i.refs++;for(var r=0;r<i.parts.length;r++)i.parts[r](o.parts[r]);for(;r<o.parts.length;r++)i.parts.push(l(o.parts[r],t))}else{for(var a=[],r=0;r<o.parts.length;r++)a.push(l(o.parts[r],t));d[o.id]={id:o.id,refs:1,parts:a}}}}function o(e){for(var t=[],n={},o=0;o<e.length;o++){var i=e[o],r=i[0],a=i[1],s=i[2],l=i[3],u={css:a,media:s,sourceMap:l};n[r]?n[r].parts.push(u):t.push(n[r]={id:r,parts:[u]})}return t}function i(e,t){var n=b(),o=x[x.length-1];if("top"===e.insertAt)o?o.nextSibling?n.insertBefore(t,o.nextSibling):n.appendChild(t):n.insertBefore(t,n.firstChild),x.push(t);else{if("bottom"!==e.insertAt)throw new Error("Invalid value for parameter 'insertAt'. Must be 'top' or 'bottom'.");n.appendChild(t)}}function r(e){e.parentNode.removeChild(e);var t=x.indexOf(e);t>=0&&x.splice(t,1)}function a(e){var t=document.createElement("style");return t.type="text/css",i(e,t),t}function s(e){var t=document.createElement("link");return t.rel="stylesheet",i(e,t),t}function l(e,t){var n,o,i;if(t.singleton){var l=y++;n=v||(v=a(t)),o=u.bind(null,n,l,!1),i=u.bind(null,n,l,!0)}else e.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(n=s(t),o=p.bind(null,n),i=function(){r(n),n.href&&URL.revokeObjectURL(n.href)}):(n=a(t),o=c.bind(null,n),i=function(){r(n)});return o(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap)return;o(e=t)}else i()}}function u(e,t,n,o){var i=n?"":o.css;if(e.styleSheet)e.styleSheet.cssText=m(t,i);else{var r=document.createTextNode(i),a=e.childNodes;a[t]&&e.removeChild(a[t]),a.length?e.insertBefore(r,a[t]):e.appendChild(r)}}function c(e,t){var n=t.css,o=t.media;if(o&&e.setAttribute("media",o),e.styleSheet)e.styleSheet.cssText=n;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(n))}}function p(e,t){var n=t.css,o=t.sourceMap;o&&(n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o))))+" */");var i=new Blob([n],{type:"text/css"}),r=e.href;e.href=URL.createObjectURL(i),r&&URL.revokeObjectURL(r)}var d={},f=function(e){var t;return function(){return"undefined"==typeof t&&(t=e.apply(this,arguments)),t}},h=f(function(){return/msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase())}),b=f(function(){return document.head||document.getElementsByTagName("head")[0]}),v=null,y=0,x=[];e.exports=function(e,t){if("undefined"!=typeof DEBUG&&DEBUG&&"object"!=typeof document)throw new Error("The style-loader cannot be used in a non-browser environment");t=t||{},"undefined"==typeof t.singleton&&(t.singleton=h()),"undefined"==typeof t.insertAt&&(t.insertAt="bottom");var i=o(e);return n(i,t),function(e){for(var r=[],a=0;a<i.length;a++){var s=i[a],l=d[s.id];l.refs--,r.push(l)}if(e){var u=o(e);n(u,t)}for(var a=0;a<r.length;a++){var l=r[a];if(0===l.refs){for(var c=0;c<l.parts.length;c++)l.parts[c]();delete d[l.id]}}}};var m=function(){var e=[];return function(t,n){return e[t]=n,e.filter(Boolean).join("\n")}}()},function(e,t,n){var o=n(4);"string"==typeof o&&(o=[[e.i,o,""]]);n(2)(o,{});o.locals&&(e.exports=o.locals)},function(e,t,n){t=e.exports=n(5)(),t.push([e.i,".vc-checkbox-component {\n  display: inline-block;\n}\n.checkbox {\n  position: relative;\n}\n.checkbox > label > input {\n  box-sizing: border-box;\n  position: absolute;\n  z-index: -1;\n  padding: 0;\n  opacity: 0;\n  margin: 0;\n}\n.checkbox > label > .icon {\n  position: absolute;\n  top: .2rem;\n  left: 0;\n  display: block;\n  width: 1.4rem;\n  height: 1.4rem;\n  line-height: 1rem;\n  text-align: center;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  border-radius: .35rem;\n  background-repeat: no-repeat;\n  background-position: center center;\n  background-size: 50% 50%;\n}\n.checkbox:not(.active) > label > .icon {\n  background-color: #ddd;\n  border: 1px solid #bbb;\n}\n.checkbox > label > input:focus ~ .icon {\n  outline: 0;\n  border: 1px solid #66afe9;\n  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);\n}\n.checkbox.active > label > .icon {\n  background-size: 1rem 1rem;\n  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNyIgaGVpZ2h0PSI3Ij48cGF0aCBmaWxsPSIjZmZmIiBkPSJtNS43MywwLjUybC0zLjEyNDIyLDMuMzQxNjFsLTEuMzM4OTUsLTEuNDMyMTJsLTEuMjQ5NjksMS4zMzY2NWwyLjU4ODYzLDIuNzY4NzZsNC4zNzM5LC00LjY3ODI2bC0xLjI0OTY5LC0xLjMzNjY1bDAsMGwwLjAwMDAyLDAuMDAwMDF6Ii8+PC9zdmc+);\n}\n.checkbox.active .btn-default {\n  -webkit-filter: brightness(75%);\n          filter: brightness(75%);\n}\n.checkbox.disabled > label > .icon,\n.checkbox.readonly > label > .icon,\n.btn.readonly {\n  filter: alpha(opacity=65);\n  box-shadow: none;\n  opacity: .65;\n}\nlabel.btn > input[type=checkbox] {\n  position: absolute;\n  clip: rect(0, 0, 0, 0);\n  pointer-events: none;\n}\n",""])},function(e,t){e.exports=function(){var e=[];return e.toString=function(){for(var e=[],t=0;t<this.length;t++){var n=this[t];n[2]?e.push("@media "+n[2]+"{"+n[1]+"}"):e.push(n[1])}return e.join("")},e.i=function(t,n){"string"==typeof t&&(t=[[null,t,""]]);for(var o={},i=0;i<this.length;i++){var r=this[i][0];"number"==typeof r&&(o[r]=!0)}for(i=0;i<t.length;i++){var a=t[i];"number"==typeof a[0]&&o[a[0]]||(n&&!a[2]?a[2]=n:n&&(a[2]="("+a[2]+") and ("+n+")"),e.push(a))}},e}},function(e,t){e.exports='<div class="vc-checkbox-component">\n        <label \n            v-show="buttonStyle"\n            :class="[\'btn btn-\' + typeColor, { \'active\': checked, \'disabled\': disabled, \'readonly\': readonly }]"\n            @click.prevent="toggle"\n            :title="title"\n        >\n            <input type="checkbox" autocomplete="off"\n                v-el:input\n                v-show="!readonly"\n                :name="name"\n                :value="value"\n                :checked="active"\n                :disabled="disabled"\n                :readonly="readonly"\n            />\n            <slot>{{ label }}</slot>\n        </label>\n        <div v-else\n            :class="[\'checkbox\', typetypeColor, { \'active\': checked, \'disabled\': disabled, \'readonly\': readonly }]"\n            @click.prevent="toggle"\n        >\n            <label class="open" :title="title">\n                <input type="checkbox" autocomplete="off"\n                    v-el:input\n                    :name="name"\n                    :value="value"\n                    :checked="active"\n                    :disabled="disabled"\n                    :readonly="readonly"\n                />\n                <span class="icon dropdown-toggle" :class="[active ? \'btn-\' + typeColor : \'\', { \'bg\': typeColor === \'default\' }]"></span>\n                <span v-if="active && typeColor === \'default\'" class="icon"></span>\n                <slot>{{ label }}</slot>\n            </label>\n        </div>\n    </div>'},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t["default"]={props:{name:{type:String,"default":null},label:[String,Number],value:{"default":!0},checked:{twoWay:!0},button:{type:Boolean,"default":!1},disabled:{type:Boolean,"default":!1},readonly:{type:Boolean,"default":!1},type:{type:String,"default":null}},data:function(){return{title:""}},computed:{active:function(){return"boolean"!=typeof this.value&&this.group?~this.$parent.value.indexOf(this.value):this.checked===this.value},buttonStyle:function(){return this.button||this.group&&this.$parent.buttons},group:function(){return this.$parent&&this.$parent._checkboxGroup},typeColor:function(){return this.type||this.$parent&&this.$parent.type||"default"}},watch:{checked:function(e){"boolean"!=typeof this.value&&this.group&&(this.checked&&!~this.$parent.value.indexOf(this.value)&&this.$parent.value.push(this.value),!this.checked&&~this.$parent.value.indexOf(this.value)&&this.$parent.value.$remove(this.value))}},created:function(){if("boolean"!=typeof this.value){var e=this.$parent;e&&e._btnGroup&&!e._radioGroup&&(e._checkboxGroup=!0,e.value instanceof Array||(e.value=[]))}},ready:function(){this.setTitleAttr(),this.$parent._checkboxGroup&&"boolean"!=typeof this.value&&(this.$parent.value.length?this.checked=~this.$parent.value.indexOf(this.value):this.checked&&this.$parent.value.push(this.value))},methods:{setTitleAttr:function(){try{this.title=this._slotContents["default"].textContent.trim()||this.label}catch(e){this.label&&""!==this.label&&(this.title=this.label)}},eval:function(){"boolean"!=typeof this.value&&this.group&&(this.checked=~this.$parent.value.indexOf(this.value))},focus:function(){this.$els.input.focus()},toggle:function(){if(!this.disabled&&(this.focus(),!this.readonly&&(this.checked=this.checked?null:this.value,this.group&&"boolean"!=typeof this.value))){var e=this.$parent.value.indexOf(this.value);this.$parent.value[~e?"$remove":"push"](this.value)}return!1}}}},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}var i=n(1),r=o(i);e.exports=r["default"]}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.vcCheckbox=t():e.vcCheckbox=t()}(this,function(){return function(e){function t(o){if(n[o])return n[o].exports;var i=n[o]={i:o,l:!1,exports:{}};return e[o].call(i.exports,i,i.exports,t),i.l=!0,i.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,t,n){Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:n})},t.n=function(e){var n=e&&e.__esModule?function(){return e["default"]}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="/",t(t.s=8)}([,function(e,t,n){n(3),e.exports=n(7),e.exports.__esModule&&(e.exports=e.exports["default"]),("function"==typeof e.exports?e.exports.options:e.exports).template=n(6)},function(e,t){function n(e,t){for(var n=0;n<e.length;n++){var o=e[n],i=d[o.id];if(i){i.refs++;for(var r=0;r<i.parts.length;r++)i.parts[r](o.parts[r]);for(;r<o.parts.length;r++)i.parts.push(l(o.parts[r],t))}else{for(var a=[],r=0;r<o.parts.length;r++)a.push(l(o.parts[r],t));d[o.id]={id:o.id,refs:1,parts:a}}}}function o(e){for(var t=[],n={},o=0;o<e.length;o++){var i=e[o],r=i[0],a=i[1],s=i[2],l=i[3],c={css:a,media:s,sourceMap:l};n[r]?n[r].parts.push(c):t.push(n[r]={id:r,parts:[c]})}return t}function i(e,t){var n=b(),o=x[x.length-1];if("top"===e.insertAt)o?o.nextSibling?n.insertBefore(t,o.nextSibling):n.appendChild(t):n.insertBefore(t,n.firstChild),x.push(t);else{if("bottom"!==e.insertAt)throw new Error("Invalid value for parameter 'insertAt'. Must be 'top' or 'bottom'.");n.appendChild(t)}}function r(e){e.parentNode.removeChild(e);var t=x.indexOf(e);t>=0&&x.splice(t,1)}function a(e){var t=document.createElement("style");return t.type="text/css",i(e,t),t}function s(e){var t=document.createElement("link");return t.rel="stylesheet",i(e,t),t}function l(e,t){var n,o,i;if(t.singleton){var l=y++;n=v||(v=a(t)),o=c.bind(null,n,l,!1),i=c.bind(null,n,l,!0)}else e.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(n=s(t),o=p.bind(null,n),i=function(){r(n),n.href&&URL.revokeObjectURL(n.href)}):(n=a(t),o=u.bind(null,n),i=function(){r(n)});return o(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap)return;o(e=t)}else i()}}function c(e,t,n,o){var i=n?"":o.css;if(e.styleSheet)e.styleSheet.cssText=m(t,i);else{var r=document.createTextNode(i),a=e.childNodes;a[t]&&e.removeChild(a[t]),a.length?e.insertBefore(r,a[t]):e.appendChild(r)}}function u(e,t){var n=t.css,o=t.media;if(o&&e.setAttribute("media",o),e.styleSheet)e.styleSheet.cssText=n;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(n))}}function p(e,t){var n=t.css,o=t.sourceMap;o&&(n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o))))+" */");var i=new Blob([n],{type:"text/css"}),r=e.href;e.href=URL.createObjectURL(i),r&&URL.revokeObjectURL(r)}var d={},f=function(e){var t;return function(){return"undefined"==typeof t&&(t=e.apply(this,arguments)),t}},h=f(function(){return/msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase())}),b=f(function(){return document.head||document.getElementsByTagName("head")[0]}),v=null,y=0,x=[];e.exports=function(e,t){if("undefined"!=typeof DEBUG&&DEBUG&&"object"!=typeof document)throw new Error("The style-loader cannot be used in a non-browser environment");t=t||{},"undefined"==typeof t.singleton&&(t.singleton=h()),"undefined"==typeof t.insertAt&&(t.insertAt="bottom");var i=o(e);return n(i,t),function(e){for(var r=[],a=0;a<i.length;a++){var s=i[a],l=d[s.id];l.refs--,r.push(l)}if(e){var c=o(e);n(c,t)}for(var a=0;a<r.length;a++){var l=r[a];if(0===l.refs){for(var u=0;u<l.parts.length;u++)l.parts[u]();delete d[l.id]}}}};var m=function(){var e=[];return function(t,n){return e[t]=n,e.filter(Boolean).join("\n")}}()},function(e,t,n){var o=n(4);"string"==typeof o&&(o=[[e.i,o,""]]);n(2)(o,{});o.locals&&(e.exports=o.locals)},function(e,t,n){t=e.exports=n(5)(),t.push([e.i,".vc-checkbox-component {\n  display: inline-block;\n}\n.vc-checkbox-component.inline {\n  float: left;\n}\n.checkbox {\n  position: relative;\n}\n.checkbox > label > input {\n  box-sizing: border-box;\n  position: absolute;\n  z-index: -1;\n  padding: 0;\n  opacity: 0;\n  margin: 0;\n}\n.checkbox > label > .icon {\n  position: absolute;\n  top: .2rem;\n  left: 0;\n  display: block;\n  width: 1.4rem;\n  height: 1.4rem;\n  line-height: 1rem;\n  text-align: center;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  border-radius: .35rem;\n  background-repeat: no-repeat;\n  background-position: center center;\n  background-size: 50% 50%;\n}\n.checkbox:not(.active) > label > .icon {\n  background-color: #ddd;\n  border: 1px solid #bbb;\n}\n.checkbox > label > input:focus ~ .icon {\n  outline: 0;\n  border: 1px solid #66afe9;\n  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);\n}\n.checkbox.active > label > .icon {\n  background-size: 1rem 1rem;\n  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNyIgaGVpZ2h0PSI3Ij48cGF0aCBmaWxsPSIjZmZmIiBkPSJtNS43MywwLjUybC0zLjEyNDIyLDMuMzQxNjFsLTEuMzM4OTUsLTEuNDMyMTJsLTEuMjQ5NjksMS4zMzY2NWwyLjU4ODYzLDIuNzY4NzZsNC4zNzM5LC00LjY3ODI2bC0xLjI0OTY5LC0xLjMzNjY1bDAsMGwwLjAwMDAyLDAuMDAwMDF6Ii8+PC9zdmc+);\n}\n.checkbox.active .btn-default {\n  -webkit-filter: brightness(75%);\n          filter: brightness(75%);\n}\n.checkbox.disabled > label > .icon,\n.checkbox.readonly > label > .icon,\n.btn.readonly {\n  filter: alpha(opacity=65);\n  box-shadow: none;\n  opacity: .65;\n}\nlabel.btn > input[type=checkbox] {\n  position: absolute;\n  clip: rect(0, 0, 0, 0);\n  pointer-events: none;\n}\n",""])},function(e,t){e.exports=function(){var e=[];return e.toString=function(){for(var e=[],t=0;t<this.length;t++){var n=this[t];n[2]?e.push("@media "+n[2]+"{"+n[1]+"}"):e.push(n[1])}return e.join("")},e.i=function(t,n){"string"==typeof t&&(t=[[null,t,""]]);for(var o={},i=0;i<this.length;i++){var r=this[i][0];"number"==typeof r&&(o[r]=!0)}for(i=0;i<t.length;i++){var a=t[i];"number"==typeof a[0]&&o[a[0]]||(n&&!a[2]?a[2]=n:n&&(a[2]="("+a[2]+") and ("+n+")"),e.push(a))}},e}},function(e,t){e.exports='<div class="vc-checkbox-component" :class="{ \'inline\': inlineMode }">\n        <label \n            v-show="buttonStyle"\n            :class="[\'btn btn-\' + typeColor, { \'active\': checked, \'disabled\': disabled, \'readonly\': readonly }]"\n            @click.prevent="toggle"\n            :title="title"\n        >\n            <input type="checkbox" autocomplete="off"\n                v-el:input\n                v-show="!readonly"\n                :name="name"\n                :value="value"\n                :checked="active"\n                :disabled="disabled"\n                :readonly="readonly"\n            />\n            <slot>{{ label }}</slot>\n        </label>\n        <div v-else\n            :class="[\'checkbox\', typetypeColor, { \'active\': checked, \'disabled\': disabled, \'readonly\': readonly }]"\n            @click.prevent="toggle"\n        >\n            <label class="open" :title="title">\n                <input type="checkbox" autocomplete="off"\n                    v-el:input\n                    :name="name"\n                    :value="value"\n                    :checked="active"\n                    :disabled="disabled"\n                    :readonly="readonly"\n                />\n                <span class="icon dropdown-toggle" :class="[active ? \'btn-\' + typeColor : \'\', { \'bg\': typeColor === \'default\' }]"></span>\n                <span v-if="active && typeColor === \'default\'" class="icon"></span>\n                <slot>{{ label }}</slot>\n            </label>\n        </div>\n    </div>'},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t["default"]={name:"vc-checkbox",props:{name:{type:String,"default":null},label:[String,Number],value:{"default":!0},checked:{twoWay:!0},inline:{"default":!0},button:{type:Boolean,"default":!1},disabled:{type:Boolean,"default":!1},readonly:{type:Boolean,"default":!1},type:{type:String,"default":null}},data:function(){return{title:""}},computed:{inlineMode:function(){return!!(this.inline!==!1&&this.button&&this.group&&this.$parent._checkboxGroup)},active:function(){return"boolean"!=typeof this.value&&this.group?~this.$parent.value.indexOf(this.value):this.checked===this.value},buttonStyle:function(){return this.button||this.group&&this.$parent.buttons},group:function(){return this.$parent&&this.$parent._checkboxGroup},typeColor:function(){return this.type||this.$parent&&this.$parent.type||"default"}},watch:{checked:function(e){"boolean"!=typeof this.value&&this.group&&(this.checked&&!~this.$parent.value.indexOf(this.value)&&this.$parent.value.push(this.value),!this.checked&&~this.$parent.value.indexOf(this.value)&&this.$parent.value.$remove(this.value))}},created:function(){if("boolean"!=typeof this.value){var e=this.$parent;e&&e._btnGroup&&!e._radioGroup&&(e._checkboxGroup=!0,e.value instanceof Array||(e.value=[]))}},ready:function(){this.setTitleAttr(),this.$parent._checkboxGroup&&"boolean"!=typeof this.value&&(this.$parent.value.length?this.checked=~this.$parent.value.indexOf(this.value):this.checked&&this.$parent.value.push(this.value))},methods:{setTitleAttr:function(){try{this.title=this._slotContents["default"].textContent.trim()||this.label}catch(e){this.label&&""!==this.label&&(this.title=this.label)}},eval:function(){"boolean"!=typeof this.value&&this.group&&(this.checked=~this.$parent.value.indexOf(this.value))},focus:function(){this.$els.input.focus()},toggle:function(){if(!this.disabled&&(this.focus(),!this.readonly&&(this.checked=this.checked?null:this.value,this.group&&"boolean"!=typeof this.value))){var e=this.$parent.value.indexOf(this.value);this.$parent.value[~e?"$remove":"push"](this.value)}return!1}}}},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}var i=n(1),r=o(i);e.exports=r["default"]}])});

package.json

 {
   "author": "[e-mail]",
   "name": "vc-checkbox",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "native checkbox component based on vue.js & bootstrap",
@@ -6,0 +6,0 @@ "scripts": {

README.md

@@ -16,2 +16,5 @@ <p align="center">
 
+if you are using single file `*.vue` in project, please import the component by:  
+`import vcCheckbox from 'vc-checkbox/src`
+
 ## Demo
@@ -18,0 +21,0 @@

src/index.js

@@ -1,3 +0,4 @@
-import vcCheckbox from './components/Checkbox'
+import vcCheckbox from './Checkbox'
 
-module.exports = vcCheckbox
+export default vcCheckbox
+export { vcCheckbox }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

83246

increased by2.47%

Number of package files

10

increased by11.11%

Lines of code

670

increased by2.6%

Number of lines in readme file

88

increased by3.53%

No dependency changes