vue-dropd - npm Package Compare versions

Comparing version 0.0.2 to 1.0.0

dist/index.cjs.js

@@ -1,1 +0,1 @@
-"use strict";function styleInject(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===t&&o.firstChild?o.insertBefore(i,o.firstChild):o.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}var css=".dropd {\n  color: #7a8ca0;\n  user-select: none;\n  text-align: left;\n  min-width: 100px;\n  position: relative;\n  display: inline-flex; }\n  .dropd[data-open='true'] .dropd-caret {\n    transform: rotate(-180deg); }\n  .dropd * {\n    outline-width: 1px;\n    box-sizing: border-box;\n    outline-color: #3599e7; }\n\n.dropd-toggle {\n  margin: 0;\n  height: 43px;\n  width: 100%;\n  border: none;\n  padding: 10px;\n  display: flex;\n  cursor: pointer;\n  overflow: hidden;\n  font-weight: 300;\n  align-items: center;\n  outline-color: #fff;\n  white-space: no-wrap;\n  -webkit-appearance: none;\n  border: 1px solid #e8ecf3;\n  background-color: #F4F6FA;\n  background-color: transparent;\n  justify-content: space-between;\n  -webkit-tap-highlight-color: transparent; }\n  .dropd-toggle .dropd-caret {\n    width: 6px;\n    height: 100%;\n    display: flex;\n    margin-left: 20px;\n    transform: rotate(0);\n    transition: 300ms linear; }\n    .dropd-toggle .dropd-caret:focus {\n      outline: 0 none; }\n    .dropd-toggle .dropd-caret svg {\n      width: inherit;\n      height: inherit;\n      overflow: hidden; }\n      .dropd-toggle .dropd-caret svg use,\n      .dropd-toggle .dropd-caret svg path {\n        fill: currentColor; }\n\n.dropd-current {\n  color: #2c3c4f;\n  display: block;\n  overflow: hidden;\n  text-align: left;\n  position: relative;\n  white-space: nowrap; }\n\n.dropd-list {\n  left: 0;\n  top: 40px;\n  opacity: 0;\n  z-index: -9;\n  width: 100%;\n  padding: 5px 0;\n  margin: 2px 0 0;\n  list-style: none;\n  text-align: left;\n  box-shadow: none;\n  font-size: 0.9em;\n  min-width: 200px;\n  max-height: 300px;\n  position: absolute;\n  border-radius: 4px;\n  pointer-events: none;\n  transform-origin: top;\n  overflow: hidden auto;\n  border: 1px solid #e8ecf3;\n  background-color: #ffffff;\n  transform: scaleY(0.8) translateY(-10px);\n  transition: 250ms 100ms, box-shadow 200ms 100ms; }\n  .dropd-list.open {\n    opacity: 1;\n    z-index: 1000;\n    pointer-events: auto;\n    transform: scaleY(1) translateY(0px);\n    box-shadow: 0 4px 10px rgba(32, 49, 70, 0.08); }\n  .dropd-list .dropd-item {\n    margin: 0;\n    width: 100%;\n    display: block;\n    color: #7a8ca0;\n    list-style: none;\n    text-align: left;\n    overflow: hidden;\n    position: relative;\n    font-weight: normal;\n    white-space: nowrap;\n    transition: background 300ms, color 100ms; }\n    .dropd-list .dropd-item:hover {\n      color: #2c3c4f;\n      background: #f9fafc; }\n    .dropd-list .dropd-item a {\n      display: block;\n      color: inherit;\n      cursor: pointer;\n      color: inherit;\n      line-height: 1.6;\n      padding: 10px 20px;\n      white-space: initial; }\n";styleInject(css);var Dropd={data:function(){return{open:!1,internalList:[],currentItem:null,internalDefaultOpen:!1,internalRevealOn:"mousedown"}},created:function(){var e;(e=this.internalList).push.apply(e,this.list),this.internalRevealOn=this.revealOn,this.internalDefaultOpen=this.defaultOpen,this.value&&(this.currentItem=this.value.label||this.value),this.internalDefaultOpen&&(this.open=!0,this._emitOpen(null))},mounted:function(){"mousedown"===this.internalRevealOn&&document.addEventListener("mousedown",this.closeOnBlurFn,!1)},destroyed:function(){document.removeEventListener("mousedown",this.closeOnBlurFn,!1)},watch:{revealOn:function(e){this.internalRevealOn=e},defaultOpen:function(e){this._emitOpen(null),this.internalDefaultOpen=e}},methods:{_isDropdElem:function(e){return-1!==e.indexOf(this.$refs.dropd)},_emitOpen:function(e){"open"in this.$listeners&&this.$emit("open",this.list,e)},_resetListScroll:function(){var e=this;setTimeout(function(){e.$refs.list&&(e.$refs.list.scrollTop=0)},250)},closeOnBlurFn:function(e){if(this.closeOnBlur&&(this._resetListScroll(),this.internalDefaultOpen=!1,"mousedown"===this.internalRevealOn&&this.open)){if(this._isDropdElem(e.path))return;this.closeDropd()}},handleFocus:function(e){this.open||(this.open=!0,this._emitOpen(e))},closeDropd:function(){this.open=!1,this._resetListScroll(),this.internalDefaultOpen=!1},handleItemChange:function(e,n){this.closeDropd(),this.currentItem=e,"item-change"in this.$listeners&&this.$emit("item-change",this.currentItem,n)},toggleDropd:function(e){this._resetListScroll(),this.open=!this.open,this.open&&this._emitOpen(e)}},props:{list:{type:Array,default:[]},closeOnBlur:{type:Boolean,default:!0},defaultOpen:{type:Boolean,default:!1},value:{type:[String,Object],default:null},placeholder:{type:[String,Object],default:"Please select an item"},revealOn:{default:"mousedown",validator:function(e){return-1!==["mousedown"].indexOf(e)}}}};function normalizeComponent(e,n,t,o,i,r,s,a,l,d){"boolean"!=typeof s&&(l=a,a=s,s=!1);var p,c="function"==typeof t?t.options:t;if(e&&e.render&&(c.render=e.render,c.staticRenderFns=e.staticRenderFns,c._compiled=!0,i&&(c.functional=!0)),o&&(c._scopeId=o),r?(p=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),n&&n.call(this,l(e)),e&&e._registeredComponents&&e._registeredComponents.add(r)},c._ssrRegister=p):n&&(p=s?function(){n.call(this,d(this.$root.$options.shadowRoot))}:function(e){n.call(this,a(e))}),p)if(c.functional){var u=c.render;c.render=function(e,n){return p.call(n),u(e,n)}}else{var h=c.beforeCreate;c.beforeCreate=h?[].concat(h,p):[p]}return t}var normalizeComponent_1=normalizeComponent;const __vue_script__=Dropd;var __vue_render__=function(){var e=this,n=e.$createElement,t=e._self._c||n;return t("div",{ref:"dropd",staticClass:"dropd v-dropd",attrs:{dir:"auto","data-open":e.open}},[t("button",{staticClass:"dropd-toggle",attrs:{type:"button",tabindex:"-1"},on:{mousedown:function(n){return e.toggleDropd(n)}}},[t("input",{staticClass:"dropd-fake-search",style:{width:0,height:0,margin:0,padding:0,border:"0 none",outline:"0 none",textAlign:"unset",position:"absolute",WebkitAppearance:"none"},attrs:{type:"search",autocomplete:"off",readonly:"readonly"},on:{blur:e.closeDropd,focus:function(n){return e.handleFocus(n)}}}),e._v(" "),!e.currentItem&&e.placeholder?t("span",{staticClass:"dropd-current is-placeholder"},[e._v("\n      "+e._s(e.placeholder.label||e.placeholder)+"\n    ")]):e._e(),e._v(" "),e.currentItem?t("span",{staticClass:"dropd-current"},[e._v("\n      "+e._s(e.currentItem.label||e.currentItem)+"\n    ")]):e._e(),e._v(" "),t("span",{staticClass:"dropd-caret",attrs:{"aria-hidden":"true"}},[t("svg",{attrs:{width:"6",height:"4",tabindex:"-1",viewBox:"0 0 6 4",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink"}},[t("defs",[t("path",{attrs:{id:"a",tabindex:"-1",d:"M132.047 389.564l.644-.537a.134.134 0 0 1 .091-.028.124.124 0 0 1 .085.042l2.134 2.438 2.133-2.438a.124.124 0 0 1 .085-.042.137.137 0 0 1 .091.028l.645.537c.025.021.04.05.043.083a.115.115 0 0 1-.03.088l-2.872 3.223a.127.127 0 0 1-.19 0l-2.873-3.223a.116.116 0 0 1-.03-.088.12.12 0 0 1 .044-.083z"}})]),e._v(" "),t("use",{attrs:{opacity:".7",tabindex:"-1",fill:"#2c3c4f","xlink:href":"#a",transform:"translate(-132 -389)"}})])])]),e._v(" "),e.list&&e.internalList?t("ul",{ref:"list",class:"dropd-list"+(e.open?" open":""),attrs:{"aria-hidden":String(!e.open)}},e._l(e.internalList,function(n,o){return t("li",e._g({key:o,staticClass:"dropd-item",attrs:{tabindex:"-1"}},{mousedown:function(t){return e.handleItemChange(n,t)}}),[t("a",{staticClass:"dropd-link",attrs:{tabindex:"-1"}},[e._v(e._s(n.label||n))])])}),0):e._e()])},__vue_staticRenderFns__=[];__vue_render__._withStripped=!0;const __vue_inject_styles__=void 0,__vue_scope_id__=void 0,__vue_module_identifier__=void 0,__vue_is_functional_template__=!1;var index=normalizeComponent_1({render:__vue_render__,staticRenderFns:__vue_staticRenderFns__},void 0,__vue_script__,void 0,!1,void 0,void 0,void 0);module.exports=index;
+"use strict";function styleInject(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===t&&o.firstChild?o.insertBefore(i,o.firstChild):o.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}var css=".dropd {\n  color: #7a8ca0;\n  user-select: none;\n  text-align: left;\n  min-width: 100px;\n  position: relative;\n  display: inline-flex; }\n  .dropd[data-open='true'] .dropd-caret {\n    transform: rotate(-180deg); }\n  .dropd * {\n    outline-width: 1px;\n    box-sizing: border-box;\n    outline-color: #3599e7; }\n\n.dropd-toggle {\n  margin: 0;\n  height: 43px;\n  width: 100%;\n  border: none;\n  padding: 10px;\n  display: flex;\n  cursor: pointer;\n  overflow: hidden;\n  font-weight: 300;\n  align-items: center;\n  outline-color: #fff;\n  white-space: no-wrap;\n  -webkit-appearance: none;\n  background-color: #ffffff;\n  border: 1px solid #e8ecf3;\n  background-color: transparent;\n  justify-content: space-between;\n  -webkit-tap-highlight-color: transparent; }\n  .dropd-toggle .dropd-caret {\n    width: 6px;\n    height: 100%;\n    display: flex;\n    margin-left: 20px;\n    transform: rotate(0);\n    transition: 300ms linear; }\n    .dropd-toggle .dropd-caret:focus {\n      outline: 0 none; }\n    .dropd-toggle .dropd-caret svg {\n      width: inherit;\n      height: inherit;\n      overflow: hidden; }\n      .dropd-toggle .dropd-caret svg use,\n      .dropd-toggle .dropd-caret svg path {\n        fill: currentColor; }\n\n.dropd-current {\n  color: #2c3c4f;\n  display: block;\n  overflow: hidden;\n  text-align: left;\n  position: relative;\n  white-space: nowrap; }\n\n.dropd-list {\n  left: 0;\n  top: 40px;\n  opacity: 0;\n  z-index: -9;\n  width: 100%;\n  padding: 5px 0;\n  margin: 2px 0 0;\n  list-style: none;\n  text-align: left;\n  box-shadow: none;\n  font-size: 0.9em;\n  min-width: 200px;\n  max-height: 300px;\n  position: absolute;\n  border-radius: 4px;\n  pointer-events: none;\n  transform-origin: top;\n  overflow: hidden auto;\n  border: 1px solid #e8ecf3;\n  background-color: #ffffff;\n  transform: scaleY(0.8) translateY(-10px);\n  transition: 250ms 100ms, box-shadow 200ms 100ms; }\n  .dropd-list.open {\n    opacity: 1;\n    z-index: 1000;\n    pointer-events: auto;\n    transform: scaleY(1) translateY(0px);\n    box-shadow: 0 4px 10px rgba(32, 49, 70, 0.08); }\n  .dropd-list .dropd-item {\n    margin: 0;\n    width: 100%;\n    display: block;\n    color: #7a8ca0;\n    list-style: none;\n    text-align: left;\n    overflow: hidden;\n    position: relative;\n    font-weight: normal;\n    white-space: nowrap;\n    transition: background 300ms, color 100ms; }\n    .dropd-list .dropd-item:hover {\n      color: #2c3c4f;\n      background: #f9fafc; }\n    .dropd-list .dropd-item a {\n      display: block;\n      color: inherit;\n      cursor: pointer;\n      color: inherit;\n      line-height: 1.6;\n      padding: 10px 20px;\n      white-space: initial; }\n";styleInject(css);var Dropd={data:function(){return{open:!1,internalList:[],currentItem:null,internalDefaultOpen:!1,internalRevealOn:"mousedown"}},created:function(){var e;(e=this.internalList).push.apply(e,this.list),this.internalRevealOn=this.revealOn,this.internalDefaultOpen=this.defaultOpen,this.value&&(this.currentItem=this.value.label||this.value),this.internalDefaultOpen&&(this.open=!0,this._emitOpen(null))},mounted:function(){"mousedown"===this.internalRevealOn&&document.addEventListener("mousedown",this.closeOnBlurFn,!1)},destroyed:function(){document.removeEventListener("mousedown",this.closeOnBlurFn,!1)},watch:{revealOn:function(e){this.internalRevealOn=e},defaultOpen:function(e){this._emitOpen(null),this.internalDefaultOpen=e}},methods:{_isDropdElem:function(e){return-1!==e.indexOf(this.$refs.dropd)},_emitOpen:function(e){"open"in this.$listeners&&this.$emit("open",this.list,e)},_resetListScroll:function(){var e=this;setTimeout(function(){e.$refs.list&&(e.$refs.list.scrollTop=0)},250)},closeOnBlurFn:function(e){if(this.closeOnBlur&&(this._resetListScroll(),this.internalDefaultOpen=!1,"mousedown"===this.internalRevealOn&&this.open)){if(this._isDropdElem(e.path))return;this.closeDropd()}},handleFocus:function(e){this.open||(this.open=!0,this._emitOpen(e))},closeDropd:function(){this.open=!1,this._resetListScroll(),this.internalDefaultOpen=!1},handleItemChange:function(e,n){this.closeDropd(),this.currentItem=e,"item-change"in this.$listeners&&this.$emit("item-change",this.currentItem,n)},toggleDropd:function(e){this._resetListScroll(),this.open=!this.open,this.open&&this._emitOpen(e)}},props:{list:{type:Array,default:[]},closeOnBlur:{type:Boolean,default:!0},defaultOpen:{type:Boolean,default:!1},value:{type:[String,Object],default:null},placeholder:{type:[String,Object],default:"Please select an item"},revealOn:{default:"mousedown",validator:function(e){return-1!==["mousedown"].indexOf(e)}}}};function normalizeComponent(e,n,t,o,i,r,s,a,l,d){"boolean"!=typeof s&&(l=a,a=s,s=!1);var p,c="function"==typeof t?t.options:t;if(e&&e.render&&(c.render=e.render,c.staticRenderFns=e.staticRenderFns,c._compiled=!0,i&&(c.functional=!0)),o&&(c._scopeId=o),r?(p=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),n&&n.call(this,l(e)),e&&e._registeredComponents&&e._registeredComponents.add(r)},c._ssrRegister=p):n&&(p=s?function(){n.call(this,d(this.$root.$options.shadowRoot))}:function(e){n.call(this,a(e))}),p)if(c.functional){var u=c.render;c.render=function(e,n){return p.call(n),u(e,n)}}else{var h=c.beforeCreate;c.beforeCreate=h?[].concat(h,p):[p]}return t}var normalizeComponent_1=normalizeComponent;const __vue_script__=Dropd;var __vue_render__=function(){var e=this,n=e.$createElement,t=e._self._c||n;return t("div",{ref:"dropd",staticClass:"dropd v-dropd",attrs:{dir:"auto","data-open":e.open}},[t("button",{staticClass:"dropd-toggle",attrs:{type:"button",tabindex:"-1"},on:{mousedown:function(n){return e.toggleDropd(n)}}},[t("input",{staticClass:"dropd-fake-search",style:{width:0,height:0,margin:0,padding:0,border:"0 none",outline:"0 none",textAlign:"unset",position:"absolute",WebkitAppearance:"none"},attrs:{type:"search",autocomplete:"off",readonly:"readonly"},on:{blur:e.closeDropd,focus:function(n){return e.handleFocus(n)}}}),e._v(" "),!e.currentItem&&e.placeholder?t("span",{staticClass:"dropd-current is-placeholder"},[e._v("\n      "+e._s(e.placeholder.label||e.placeholder)+"\n    ")]):e._e(),e._v(" "),e.currentItem?t("span",{staticClass:"dropd-current"},[e._v("\n      "+e._s(e.currentItem.label||e.currentItem)+"\n    ")]):e._e(),e._v(" "),t("span",{staticClass:"dropd-caret",attrs:{"aria-hidden":"true"}},[t("svg",{attrs:{width:"6",height:"4",tabindex:"-1",viewBox:"0 0 6 4",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink"}},[t("defs",[t("path",{attrs:{id:"a",tabindex:"-1",d:"M132.047 389.564l.644-.537a.134.134 0 0 1 .091-.028.124.124 0 0 1 .085.042l2.134 2.438 2.133-2.438a.124.124 0 0 1 .085-.042.137.137 0 0 1 .091.028l.645.537c.025.021.04.05.043.083a.115.115 0 0 1-.03.088l-2.872 3.223a.127.127 0 0 1-.19 0l-2.873-3.223a.116.116 0 0 1-.03-.088.12.12 0 0 1 .044-.083z"}})]),e._v(" "),t("use",{attrs:{opacity:".7",tabindex:"-1",fill:"#2c3c4f","xlink:href":"#a",transform:"translate(-132 -389)"}})])])]),e._v(" "),e.list&&e.internalList?t("ul",{ref:"list",class:"dropd-list"+(e.open?" open":""),attrs:{"aria-hidden":String(!e.open)}},e._l(e.internalList,function(n,o){return t("li",e._g({key:o,staticClass:"dropd-item",attrs:{tabindex:"-1"}},{mousedown:function(t){return e.handleItemChange(n,t)}}),[t("a",{staticClass:"dropd-link",attrs:{tabindex:"-1"}},[e._v(e._s(n.label||n))])])}),0):e._e()])},__vue_staticRenderFns__=[];__vue_render__._withStripped=!0;const __vue_inject_styles__=void 0,__vue_scope_id__=void 0,__vue_module_identifier__=void 0,__vue_is_functional_template__=!1;var index=normalizeComponent_1({render:__vue_render__,staticRenderFns:__vue_staticRenderFns__},void 0,__vue_script__,void 0,!1,void 0,void 0,void 0);module.exports=index;

dist/index.es.js

@@ -1,1 +0,1 @@
-!function(n,e){void 0===e&&(e={});var t=e.insertAt;if(n&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===t&&o.firstChild?o.insertBefore(i,o.firstChild):o.appendChild(i),i.styleSheet?i.styleSheet.cssText=n:i.appendChild(document.createTextNode(n))}}(".dropd {\n  color: #7a8ca0;\n  user-select: none;\n  text-align: left;\n  min-width: 100px;\n  position: relative;\n  display: inline-flex; }\n  .dropd[data-open='true'] .dropd-caret {\n    transform: rotate(-180deg); }\n  .dropd * {\n    outline-width: 1px;\n    box-sizing: border-box;\n    outline-color: #3599e7; }\n\n.dropd-toggle {\n  margin: 0;\n  height: 43px;\n  width: 100%;\n  border: none;\n  padding: 10px;\n  display: flex;\n  cursor: pointer;\n  overflow: hidden;\n  font-weight: 300;\n  align-items: center;\n  outline-color: #fff;\n  white-space: no-wrap;\n  -webkit-appearance: none;\n  border: 1px solid #e8ecf3;\n  background-color: #F4F6FA;\n  background-color: transparent;\n  justify-content: space-between;\n  -webkit-tap-highlight-color: transparent; }\n  .dropd-toggle .dropd-caret {\n    width: 6px;\n    height: 100%;\n    display: flex;\n    margin-left: 20px;\n    transform: rotate(0);\n    transition: 300ms linear; }\n    .dropd-toggle .dropd-caret:focus {\n      outline: 0 none; }\n    .dropd-toggle .dropd-caret svg {\n      width: inherit;\n      height: inherit;\n      overflow: hidden; }\n      .dropd-toggle .dropd-caret svg use,\n      .dropd-toggle .dropd-caret svg path {\n        fill: currentColor; }\n\n.dropd-current {\n  color: #2c3c4f;\n  display: block;\n  overflow: hidden;\n  text-align: left;\n  position: relative;\n  white-space: nowrap; }\n\n.dropd-list {\n  left: 0;\n  top: 40px;\n  opacity: 0;\n  z-index: -9;\n  width: 100%;\n  padding: 5px 0;\n  margin: 2px 0 0;\n  list-style: none;\n  text-align: left;\n  box-shadow: none;\n  font-size: 0.9em;\n  min-width: 200px;\n  max-height: 300px;\n  position: absolute;\n  border-radius: 4px;\n  pointer-events: none;\n  transform-origin: top;\n  overflow: hidden auto;\n  border: 1px solid #e8ecf3;\n  background-color: #ffffff;\n  transform: scaleY(0.8) translateY(-10px);\n  transition: 250ms 100ms, box-shadow 200ms 100ms; }\n  .dropd-list.open {\n    opacity: 1;\n    z-index: 1000;\n    pointer-events: auto;\n    transform: scaleY(1) translateY(0px);\n    box-shadow: 0 4px 10px rgba(32, 49, 70, 0.08); }\n  .dropd-list .dropd-item {\n    margin: 0;\n    width: 100%;\n    display: block;\n    color: #7a8ca0;\n    list-style: none;\n    text-align: left;\n    overflow: hidden;\n    position: relative;\n    font-weight: normal;\n    white-space: nowrap;\n    transition: background 300ms, color 100ms; }\n    .dropd-list .dropd-item:hover {\n      color: #2c3c4f;\n      background: #f9fafc; }\n    .dropd-list .dropd-item a {\n      display: block;\n      color: inherit;\n      cursor: pointer;\n      color: inherit;\n      line-height: 1.6;\n      padding: 10px 20px;\n      white-space: initial; }\n");var n=function(n,e,t,o,i,r,s,a,l,d){"boolean"!=typeof s&&(l=a,a=s,s=!1);var p,c="function"==typeof t?t.options:t;if(n&&n.render&&(c.render=n.render,c.staticRenderFns=n.staticRenderFns,c._compiled=!0,i&&(c.functional=!0)),o&&(c._scopeId=o),r?(p=function(n){(n=n||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(n=__VUE_SSR_CONTEXT__),e&&e.call(this,l(n)),n&&n._registeredComponents&&n._registeredComponents.add(r)},c._ssrRegister=p):e&&(p=s?function(){e.call(this,d(this.$root.$options.shadowRoot))}:function(n){e.call(this,a(n))}),p)if(c.functional){var h=c.render;c.render=function(n,e){return p.call(e),h(n,e)}}else{var u=c.beforeCreate;c.beforeCreate=u?[].concat(u,p):[p]}return t};const e={data:function(){return{open:!1,internalList:[],currentItem:null,internalDefaultOpen:!1,internalRevealOn:"mousedown"}},created:function(){var n;(n=this.internalList).push.apply(n,this.list),this.internalRevealOn=this.revealOn,this.internalDefaultOpen=this.defaultOpen,this.value&&(this.currentItem=this.value.label||this.value),this.internalDefaultOpen&&(this.open=!0,this._emitOpen(null))},mounted:function(){"mousedown"===this.internalRevealOn&&document.addEventListener("mousedown",this.closeOnBlurFn,!1)},destroyed:function(){document.removeEventListener("mousedown",this.closeOnBlurFn,!1)},watch:{revealOn:function(n){this.internalRevealOn=n},defaultOpen:function(n){this._emitOpen(null),this.internalDefaultOpen=n}},methods:{_isDropdElem:function(n){return-1!==n.indexOf(this.$refs.dropd)},_emitOpen:function(n){"open"in this.$listeners&&this.$emit("open",this.list,n)},_resetListScroll:function(){var n=this;setTimeout(function(){n.$refs.list&&(n.$refs.list.scrollTop=0)},250)},closeOnBlurFn:function(n){if(this.closeOnBlur&&(this._resetListScroll(),this.internalDefaultOpen=!1,"mousedown"===this.internalRevealOn&&this.open)){if(this._isDropdElem(n.path))return;this.closeDropd()}},handleFocus:function(n){this.open||(this.open=!0,this._emitOpen(n))},closeDropd:function(){this.open=!1,this._resetListScroll(),this.internalDefaultOpen=!1},handleItemChange:function(n,e){this.closeDropd(),this.currentItem=n,"item-change"in this.$listeners&&this.$emit("item-change",this.currentItem,e)},toggleDropd:function(n){this._resetListScroll(),this.open=!this.open,this.open&&this._emitOpen(n)}},props:{list:{type:Array,default:[]},closeOnBlur:{type:Boolean,default:!0},defaultOpen:{type:Boolean,default:!1},value:{type:[String,Object],default:null},placeholder:{type:[String,Object],default:"Please select an item"},revealOn:{default:"mousedown",validator:function(n){return-1!==["mousedown"].indexOf(n)}}}};var t=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{ref:"dropd",staticClass:"dropd v-dropd",attrs:{dir:"auto","data-open":n.open}},[t("button",{staticClass:"dropd-toggle",attrs:{type:"button",tabindex:"-1"},on:{mousedown:function(e){return n.toggleDropd(e)}}},[t("input",{staticClass:"dropd-fake-search",style:{width:0,height:0,margin:0,padding:0,border:"0 none",outline:"0 none",textAlign:"unset",position:"absolute",WebkitAppearance:"none"},attrs:{type:"search",autocomplete:"off",readonly:"readonly"},on:{blur:n.closeDropd,focus:function(e){return n.handleFocus(e)}}}),n._v(" "),!n.currentItem&&n.placeholder?t("span",{staticClass:"dropd-current is-placeholder"},[n._v("\n      "+n._s(n.placeholder.label||n.placeholder)+"\n    ")]):n._e(),n._v(" "),n.currentItem?t("span",{staticClass:"dropd-current"},[n._v("\n      "+n._s(n.currentItem.label||n.currentItem)+"\n    ")]):n._e(),n._v(" "),t("span",{staticClass:"dropd-caret",attrs:{"aria-hidden":"true"}},[t("svg",{attrs:{width:"6",height:"4",tabindex:"-1",viewBox:"0 0 6 4",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink"}},[t("defs",[t("path",{attrs:{id:"a",tabindex:"-1",d:"M132.047 389.564l.644-.537a.134.134 0 0 1 .091-.028.124.124 0 0 1 .085.042l2.134 2.438 2.133-2.438a.124.124 0 0 1 .085-.042.137.137 0 0 1 .091.028l.645.537c.025.021.04.05.043.083a.115.115 0 0 1-.03.088l-2.872 3.223a.127.127 0 0 1-.19 0l-2.873-3.223a.116.116 0 0 1-.03-.088.12.12 0 0 1 .044-.083z"}})]),n._v(" "),t("use",{attrs:{opacity:".7",tabindex:"-1",fill:"#2c3c4f","xlink:href":"#a",transform:"translate(-132 -389)"}})])])]),n._v(" "),n.list&&n.internalList?t("ul",{ref:"list",class:"dropd-list"+(n.open?" open":""),attrs:{"aria-hidden":String(!n.open)}},n._l(n.internalList,function(e,o){return t("li",n._g({key:o,staticClass:"dropd-item",attrs:{tabindex:"-1"}},{mousedown:function(t){return n.handleItemChange(e,t)}}),[t("a",{staticClass:"dropd-link",attrs:{tabindex:"-1"}},[n._v(n._s(e.label||e))])])}),0):n._e()])};t._withStripped=!0;export default n({render:t,staticRenderFns:[]},void 0,e,void 0,!1,void 0,void 0,void 0);
+!function(n,e){void 0===e&&(e={});var t=e.insertAt;if(n&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===t&&o.firstChild?o.insertBefore(i,o.firstChild):o.appendChild(i),i.styleSheet?i.styleSheet.cssText=n:i.appendChild(document.createTextNode(n))}}(".dropd {\n  color: #7a8ca0;\n  user-select: none;\n  text-align: left;\n  min-width: 100px;\n  position: relative;\n  display: inline-flex; }\n  .dropd[data-open='true'] .dropd-caret {\n    transform: rotate(-180deg); }\n  .dropd * {\n    outline-width: 1px;\n    box-sizing: border-box;\n    outline-color: #3599e7; }\n\n.dropd-toggle {\n  margin: 0;\n  height: 43px;\n  width: 100%;\n  border: none;\n  padding: 10px;\n  display: flex;\n  cursor: pointer;\n  overflow: hidden;\n  font-weight: 300;\n  align-items: center;\n  outline-color: #fff;\n  white-space: no-wrap;\n  -webkit-appearance: none;\n  background-color: #ffffff;\n  border: 1px solid #e8ecf3;\n  background-color: transparent;\n  justify-content: space-between;\n  -webkit-tap-highlight-color: transparent; }\n  .dropd-toggle .dropd-caret {\n    width: 6px;\n    height: 100%;\n    display: flex;\n    margin-left: 20px;\n    transform: rotate(0);\n    transition: 300ms linear; }\n    .dropd-toggle .dropd-caret:focus {\n      outline: 0 none; }\n    .dropd-toggle .dropd-caret svg {\n      width: inherit;\n      height: inherit;\n      overflow: hidden; }\n      .dropd-toggle .dropd-caret svg use,\n      .dropd-toggle .dropd-caret svg path {\n        fill: currentColor; }\n\n.dropd-current {\n  color: #2c3c4f;\n  display: block;\n  overflow: hidden;\n  text-align: left;\n  position: relative;\n  white-space: nowrap; }\n\n.dropd-list {\n  left: 0;\n  top: 40px;\n  opacity: 0;\n  z-index: -9;\n  width: 100%;\n  padding: 5px 0;\n  margin: 2px 0 0;\n  list-style: none;\n  text-align: left;\n  box-shadow: none;\n  font-size: 0.9em;\n  min-width: 200px;\n  max-height: 300px;\n  position: absolute;\n  border-radius: 4px;\n  pointer-events: none;\n  transform-origin: top;\n  overflow: hidden auto;\n  border: 1px solid #e8ecf3;\n  background-color: #ffffff;\n  transform: scaleY(0.8) translateY(-10px);\n  transition: 250ms 100ms, box-shadow 200ms 100ms; }\n  .dropd-list.open {\n    opacity: 1;\n    z-index: 1000;\n    pointer-events: auto;\n    transform: scaleY(1) translateY(0px);\n    box-shadow: 0 4px 10px rgba(32, 49, 70, 0.08); }\n  .dropd-list .dropd-item {\n    margin: 0;\n    width: 100%;\n    display: block;\n    color: #7a8ca0;\n    list-style: none;\n    text-align: left;\n    overflow: hidden;\n    position: relative;\n    font-weight: normal;\n    white-space: nowrap;\n    transition: background 300ms, color 100ms; }\n    .dropd-list .dropd-item:hover {\n      color: #2c3c4f;\n      background: #f9fafc; }\n    .dropd-list .dropd-item a {\n      display: block;\n      color: inherit;\n      cursor: pointer;\n      color: inherit;\n      line-height: 1.6;\n      padding: 10px 20px;\n      white-space: initial; }\n");var n=function(n,e,t,o,i,r,s,a,l,d){"boolean"!=typeof s&&(l=a,a=s,s=!1);var p,c="function"==typeof t?t.options:t;if(n&&n.render&&(c.render=n.render,c.staticRenderFns=n.staticRenderFns,c._compiled=!0,i&&(c.functional=!0)),o&&(c._scopeId=o),r?(p=function(n){(n=n||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(n=__VUE_SSR_CONTEXT__),e&&e.call(this,l(n)),n&&n._registeredComponents&&n._registeredComponents.add(r)},c._ssrRegister=p):e&&(p=s?function(){e.call(this,d(this.$root.$options.shadowRoot))}:function(n){e.call(this,a(n))}),p)if(c.functional){var h=c.render;c.render=function(n,e){return p.call(e),h(n,e)}}else{var u=c.beforeCreate;c.beforeCreate=u?[].concat(u,p):[p]}return t};const e={data:function(){return{open:!1,internalList:[],currentItem:null,internalDefaultOpen:!1,internalRevealOn:"mousedown"}},created:function(){var n;(n=this.internalList).push.apply(n,this.list),this.internalRevealOn=this.revealOn,this.internalDefaultOpen=this.defaultOpen,this.value&&(this.currentItem=this.value.label||this.value),this.internalDefaultOpen&&(this.open=!0,this._emitOpen(null))},mounted:function(){"mousedown"===this.internalRevealOn&&document.addEventListener("mousedown",this.closeOnBlurFn,!1)},destroyed:function(){document.removeEventListener("mousedown",this.closeOnBlurFn,!1)},watch:{revealOn:function(n){this.internalRevealOn=n},defaultOpen:function(n){this._emitOpen(null),this.internalDefaultOpen=n}},methods:{_isDropdElem:function(n){return-1!==n.indexOf(this.$refs.dropd)},_emitOpen:function(n){"open"in this.$listeners&&this.$emit("open",this.list,n)},_resetListScroll:function(){var n=this;setTimeout(function(){n.$refs.list&&(n.$refs.list.scrollTop=0)},250)},closeOnBlurFn:function(n){if(this.closeOnBlur&&(this._resetListScroll(),this.internalDefaultOpen=!1,"mousedown"===this.internalRevealOn&&this.open)){if(this._isDropdElem(n.path))return;this.closeDropd()}},handleFocus:function(n){this.open||(this.open=!0,this._emitOpen(n))},closeDropd:function(){this.open=!1,this._resetListScroll(),this.internalDefaultOpen=!1},handleItemChange:function(n,e){this.closeDropd(),this.currentItem=n,"item-change"in this.$listeners&&this.$emit("item-change",this.currentItem,e)},toggleDropd:function(n){this._resetListScroll(),this.open=!this.open,this.open&&this._emitOpen(n)}},props:{list:{type:Array,default:[]},closeOnBlur:{type:Boolean,default:!0},defaultOpen:{type:Boolean,default:!1},value:{type:[String,Object],default:null},placeholder:{type:[String,Object],default:"Please select an item"},revealOn:{default:"mousedown",validator:function(n){return-1!==["mousedown"].indexOf(n)}}}};var t=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{ref:"dropd",staticClass:"dropd v-dropd",attrs:{dir:"auto","data-open":n.open}},[t("button",{staticClass:"dropd-toggle",attrs:{type:"button",tabindex:"-1"},on:{mousedown:function(e){return n.toggleDropd(e)}}},[t("input",{staticClass:"dropd-fake-search",style:{width:0,height:0,margin:0,padding:0,border:"0 none",outline:"0 none",textAlign:"unset",position:"absolute",WebkitAppearance:"none"},attrs:{type:"search",autocomplete:"off",readonly:"readonly"},on:{blur:n.closeDropd,focus:function(e){return n.handleFocus(e)}}}),n._v(" "),!n.currentItem&&n.placeholder?t("span",{staticClass:"dropd-current is-placeholder"},[n._v("\n      "+n._s(n.placeholder.label||n.placeholder)+"\n    ")]):n._e(),n._v(" "),n.currentItem?t("span",{staticClass:"dropd-current"},[n._v("\n      "+n._s(n.currentItem.label||n.currentItem)+"\n    ")]):n._e(),n._v(" "),t("span",{staticClass:"dropd-caret",attrs:{"aria-hidden":"true"}},[t("svg",{attrs:{width:"6",height:"4",tabindex:"-1",viewBox:"0 0 6 4",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink"}},[t("defs",[t("path",{attrs:{id:"a",tabindex:"-1",d:"M132.047 389.564l.644-.537a.134.134 0 0 1 .091-.028.124.124 0 0 1 .085.042l2.134 2.438 2.133-2.438a.124.124 0 0 1 .085-.042.137.137 0 0 1 .091.028l.645.537c.025.021.04.05.043.083a.115.115 0 0 1-.03.088l-2.872 3.223a.127.127 0 0 1-.19 0l-2.873-3.223a.116.116 0 0 1-.03-.088.12.12 0 0 1 .044-.083z"}})]),n._v(" "),t("use",{attrs:{opacity:".7",tabindex:"-1",fill:"#2c3c4f","xlink:href":"#a",transform:"translate(-132 -389)"}})])])]),n._v(" "),n.list&&n.internalList?t("ul",{ref:"list",class:"dropd-list"+(n.open?" open":""),attrs:{"aria-hidden":String(!n.open)}},n._l(n.internalList,function(e,o){return t("li",n._g({key:o,staticClass:"dropd-item",attrs:{tabindex:"-1"}},{mousedown:function(t){return n.handleItemChange(e,t)}}),[t("a",{staticClass:"dropd-link",attrs:{tabindex:"-1"}},[n._v(n._s(e.label||e))])])}),0):n._e()])};t._withStripped=!0;export default n({render:t,staticRenderFns:[]},void 0,e,void 0,!1,void 0,void 0,void 0);

package.json

@@ -6,3 +6,3 @@ {
   "module": "dist/index.es.js",
-  "version": "0.0.2",
+  "version": "1.0.0",
   "description": "⚡️Zero-dependency minimalistic dropdown for Vue.",
@@ -31,3 +31,3 @@ "repository": "https://github.com/whizkydee/dropd/tree/master/packages/vue-dropd",
   ],
-  "gitHead": "05b8fe3f32b5dd1e7c9a79dd7781a9b3cfd65944"
+  "gitHead": "772835bea34e992a8a98e5370fb96c6eba4a8c59"
 }

readme.md

@@ -129,2 +129,16 @@ <p align="center">
 
+## 👷 Contributing
+
+Please see [Projects](https://github.com/whizkydee/dropd/projects/1) for a list
+of things to do.
+
+1. Fork this repo and clone on your machine
+1. Navigate to the main folder, `dropd`
+1. Create a new branch using the format, `feature/feature-name`
+1. Run `yarn install -W` to install all of the dependencies in the workspace
+1. Use `yarn dev:vue` to monitor the changes you make in `/packages/vue-dropd`
+   and concurrently re-build or
+1. Use `yarn build:vue` to compile `packages/vue-dropd/index.vue` (shows
+   `bundlesize` info too)
+
 ## 🔗 See Also
@@ -131,0 +145,0 @@

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

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

34276

increased by1.65%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

150

increased by10.29%

No dependency changes