vue-swatches - npm Package Compare versions

Comparing version 2.0.3 to 2.1.0

dist/vue-swatches.common.js

@@ -236,2 +236,3 @@ module.exports =
 __webpack_require__.d(__webpack_exports__, "DEFAULT_SHOW_BORDER", function() { return /* reexport */ DEFAULT_SHOW_BORDER; });
+__webpack_require__.d(__webpack_exports__, "extractPropertyFromPreset", function() { return /* reexport */ VSwatchesvue_type_script_lang_js_extractPropertyFromPreset; });
 
@@ -262,11 +263,12 @@ // CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js
 
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"74eff3ec-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/VSwatches.vue?vue&type=template&id=5189cf2d&
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"74eff3ec-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/VSwatches.vue?vue&type=template&id=1ef5feb5&
 var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"vue-swatches",attrs:{"tabindex":"-1"},on:{"blur":function (e) { return _vm.onBlur(e.relatedTarget); }}},[(!_vm.inline)?_c('div',{ref:"triggerWrapper",staticClass:"vue-swatches__trigger__wrapper",on:{"click":_vm.togglePopover}},[_vm._t("trigger",[_c('div',{staticClass:"vue-swatches__trigger",class:{
           'vue-swatches--is-empty': !_vm.value,
           'vue-swatches--is-disabled': _vm.disabled
-        },style:(_vm.triggerStyles)},[_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.isNoColor),expression:"isNoColor"}],staticClass:"vue-swatches__diagonal__wrapper vue-swatches--has-children-centered"},[_c('div',{staticClass:"vue-swatches__diagonal"})])])])],2):_vm._e(),_c('transition',{attrs:{"name":"vue-swatches-show-hide"}},[_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.inline || _vm.isOpen),expression:"inline || isOpen"}],ref:"containerWrapper",staticClass:"vue-swatches__container",class:{ 'vue-swatches--inline': _vm.inline },style:(_vm.containerStyles)},[_c('div',{staticClass:"vue-swatches__wrapper",style:(_vm.wrapperStyles)},[(_vm.isNested)?_vm._l((_vm.computedSwatches),function(swatchRow,index){return _c('div',{key:index,staticClass:"vue-swatches__row"},_vm._l((swatchRow),function(swatch,swatchIndex){return _c('v-swatch',{key:swatchIndex,attrs:{"border-radius":_vm.computedBorderRadius,"disabled":_vm.getSwatchDisabled(swatch),"selected":_vm.checkEquality(_vm.getSwatchColor(swatch), _vm.value),"swatch-size":_vm.computedSwatchSize,"spacing-size":_vm.computedSpacingSize,"show-border":_vm.getSwatchShowBorder(swatch),"show-checkbox":_vm.showCheckbox,"show-labels":_vm.showLabels,"swatch-color":_vm.getSwatchColor(swatch),"swatch-label":_vm.getSwatchLabel(swatch),"swatch-alt":_vm.getSwatchAlt(swatch),"swatch-style":_vm.swatchStyle},on:{"blur":function (relatedTarget) { return _vm.onBlur(relatedTarget); },"click":function($event){return _vm.updateSwatch(swatch)}},nativeOn:{"click":function($event){return _vm.updateSwatch(swatch)}}})}),1)}):_vm._l((_vm.computedSwatches),function(swatch,swatchIndex){return _c('v-swatch',{key:swatchIndex,attrs:{"border-radius":_vm.computedBorderRadius,"disabled":_vm.getSwatchDisabled(swatch),"selected":_vm.checkEquality(_vm.getSwatchColor(swatch), _vm.value),"swatch-size":_vm.computedSwatchSize,"spacing-size":_vm.computedSpacingSize,"show-border":_vm.getSwatchShowBorder(swatch),"show-checkbox":_vm.showCheckbox,"show-labels":_vm.showLabels,"swatch-color":_vm.getSwatchColor(swatch),"swatch-label":_vm.getSwatchLabel(swatch),"swatch-alt":_vm.getSwatchAlt(swatch),"swatch-style":_vm.swatchStyle},on:{"blur":function (relatedTarget) { return _vm.onBlur(relatedTarget); },"click":function($event){return _vm.updateSwatch(swatch)}},nativeOn:{"click":function($event){return _vm.updateSwatch(swatch)}}})})],2),(_vm.showFallback)?_c('div',{staticClass:"vue-swatches__fallback__wrapper",style:(_vm.computedFallbackWrapperStyles)},[_c('span',{staticClass:"vue-swatches__fallback__input--wrapper"},[_c('input',{ref:"fallbackInput",staticClass:"vue-swatches__fallback__input",class:_vm.fallbackInputClass,attrs:{"type":_vm.fallbackInputType},domProps:{"value":_vm.internalValue},on:{"input":function (e) { return _vm.updateSwatch(e.target.value, { fromFallbackInput: true }); }}})]),(_vm.showFallbackOk)?_c('button',{staticClass:"vue-swatches__fallback__button",class:_vm.fallbackOkClass,on:{"click":function($event){$event.preventDefault();return _vm.onFallbackButtonClick($event)}}},[_vm._v(" "+_vm._s(_vm.fallbackOkText)+" ")]):_vm._e()]):_vm._e()])])],1)}
+        },style:(_vm.triggerStyles)},[_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.isNoColor),expression:"isNoColor"}],staticClass:"vue-swatches__diagonal__wrapper vue-swatches--has-children-centered"},[_c('div',{staticClass:"vue-swatches__diagonal"})])])])],2):_vm._e(),_c('transition',{attrs:{"name":"vue-swatches-show-hide"}},[_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.inline || _vm.isOpen),expression:"inline || isOpen"}],ref:"containerWrapper",staticClass:"vue-swatches__container",class:{ 'vue-swatches--inline': _vm.inline },style:(_vm.containerStyles)},[_c('div',{staticClass:"vue-swatches__wrapper",style:(_vm.wrapperStyles)},[(_vm.isNested)?_vm._l((_vm.computedSwatches),function(swatchRow,index){return _c('div',{key:index,staticClass:"vue-swatches__row"},_vm._l((swatchRow),function(swatch,swatchIndex){return _c('v-swatch',{key:swatchIndex,attrs:{"is-last":index === _vm.computedSwatches.length - 1 &&
+                  swatchIndex === swatchRow.length,"row-length-setted":_vm.rowLength !== null || _vm.presetRowLength !== null,"border-radius":_vm.computedBorderRadius,"disabled":_vm.getSwatchDisabled(swatch),"inline":_vm.inline,"selected":_vm.checkEquality(_vm.getSwatchColor(swatch), _vm.value),"swatch-size":_vm.computedSwatchSize,"spacing-size":_vm.computedSpacingSize,"show-border":_vm.getSwatchShowBorder(swatch),"show-checkbox":_vm.showCheckbox,"show-labels":_vm.showLabels,"swatch-color":_vm.getSwatchColor(swatch),"swatch-label":_vm.getSwatchLabel(swatch),"swatch-alt":_vm.getSwatchAlt(swatch),"swatch-style":_vm.swatchStyle},on:{"blur":function (relatedTarget) { return _vm.onBlur(relatedTarget); },"click":function($event){return _vm.updateSwatch(swatch)}},nativeOn:{"click":function($event){return _vm.updateSwatch(swatch)}}})}),1)}):_vm._l((_vm.computedSwatches),function(swatch,swatchIndex){return _c('v-swatch',{key:swatchIndex,attrs:{"is-last":swatchIndex === _vm.computedSwatches.length - 1,"row-length-setted":_vm.rowLength !== null || _vm.presetRowLength !== null,"border-radius":_vm.computedBorderRadius,"disabled":_vm.getSwatchDisabled(swatch),"inline":_vm.inline,"selected":_vm.checkEquality(_vm.getSwatchColor(swatch), _vm.value),"swatch-size":_vm.computedSwatchSize,"spacing-size":_vm.computedSpacingSize,"show-border":_vm.getSwatchShowBorder(swatch),"show-checkbox":_vm.showCheckbox,"show-labels":_vm.showLabels,"swatch-color":_vm.getSwatchColor(swatch),"swatch-label":_vm.getSwatchLabel(swatch),"swatch-alt":_vm.getSwatchAlt(swatch),"swatch-style":_vm.swatchStyle},on:{"blur":function (relatedTarget) { return _vm.onBlur(relatedTarget); },"click":function($event){return _vm.updateSwatch(swatch)}},nativeOn:{"click":function($event){return _vm.updateSwatch(swatch)}}})})],2),(_vm.showFallback)?_c('div',{staticClass:"vue-swatches__fallback__wrapper",style:(_vm.computedFallbackWrapperStyles)},[_c('span',{staticClass:"vue-swatches__fallback__input--wrapper"},[_c('input',{ref:"fallbackInput",staticClass:"vue-swatches__fallback__input",class:_vm.fallbackInputClass,attrs:{"type":_vm.fallbackInputType},domProps:{"value":_vm.internalValue},on:{"input":function (e) { return _vm.updateSwatch(e.target.value, { fromFallbackInput: true }); }}})]),(_vm.showFallbackOk)?_c('button',{staticClass:"vue-swatches__fallback__button",class:_vm.fallbackOkClass,on:{"click":function($event){$event.preventDefault();return _vm.onFallbackButtonClick($event)}}},[_vm._v(" "+_vm._s(_vm.fallbackOkText)+" ")]):_vm._e()]):_vm._e()])])],1)}
 var staticRenderFns = []
 
 
-// CONCATENATED MODULE: ./src/VSwatches.vue?vue&type=template&id=5189cf2d&
+// CONCATENATED MODULE: ./src/VSwatches.vue?vue&type=template&id=1ef5feb5&
 
@@ -291,4 +293,4 @@ // CONCATENATED MODULE: ./src/presets/basic.js
 });
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"74eff3ec-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/VSwatch.vue?vue&type=template&id=ac8b2c1a&
-var VSwatchvue_type_template_id_ac8b2c1a_render = function () {
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"74eff3ec-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/VSwatch.vue?vue&type=template&id=13db94d5&
+var VSwatchvue_type_template_id_13db94d5_render = function () {
 var this$1 = this;
@@ -300,6 +302,6 @@ var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"vue-swatches__swatch",class:{
   },style:(_vm.swatchStyles),attrs:{"aria-label":_vm.swatchAlt,"role":"button","tabindex":"0"},on:{"keyup":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.$emit('click', _vm.swatchColor)},"blur":function (e) { return this$1.$emit('blur', e.relatedTarget); }}},[(_vm.swatchColor === '')?_c('div',{staticClass:"vue-swatches__diagonal__wrapper vue-swatches--has-children-centered"},[_c('div',{staticClass:"vue-swatches__diagonal"})]):_vm._e(),_c('v-check',{directives:[{name:"show",rawName:"v-show",value:(_vm.showCheckbox && _vm.selected),expression:"showCheckbox && selected"}]}),(_vm.showLabels)?_c('div',{staticClass:"vue-swatches__swatch__label",style:(_vm.labelStyles)},[_vm._v(" "+_vm._s(_vm.swatchLabel)+" ")]):_vm._e()],1)}
-var VSwatchvue_type_template_id_ac8b2c1a_staticRenderFns = []
+var VSwatchvue_type_template_id_13db94d5_staticRenderFns = []
 
 
-// CONCATENATED MODULE: ./src/VSwatch.vue?vue&type=template&id=ac8b2c1a&
+// CONCATENATED MODULE: ./src/VSwatch.vue?vue&type=template&id=13db94d5&
 
@@ -464,2 +466,8 @@ // CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"74eff3ec-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/VCheck.vue?vue&type=template&id=a04741f2&
 // CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/VSwatch.vue?vue&type=script&lang=js&
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 //
@@ -508,2 +516,10 @@ //
     },
+    isLast: {
+      type: Boolean,
+      default: false
+    },
+    rowLengthSetted: {
+      type: Boolean,
+      default: false
+    },
     disabled: {
@@ -513,2 +529,6 @@ type: Boolean // this prop comes from computed property and always should have a value
     },
+    inline: {
+      type: Boolean // default is calculated in `Swatches.vue`
+
+    },
     selected: {
@@ -566,7 +586,5 @@ type: Boolean,
     computedSwatchStyle: function computedSwatchStyle() {
-      return {
+      var baseStyles = {
         width: "".concat(this.swatchSize, "px"),
         height: "".concat(this.swatchSize, "px"),
-        marginBottom: "".concat(this.spacingSize, "px"),
-        marginRight: "".concat(this.spacingSize, "px"),
         borderRadius: this.borderRadius,
@@ -576,2 +594,11 @@ backgroundColor: this.swatchColor !== "" ? this.swatchColor : "#FFFFFF",
       };
+
+      if (!this.inline || !this.isLast) {
+        baseStyles.marginRight = "".concat(this.spacingSize, "px");
+      }
+
+      if (this.inline && !this.rowLengthSetted) return baseStyles;
+      return _objectSpread({}, baseStyles, {
+        marginBottom: "".concat(this.spacingSize, "px")
+      });
     },
@@ -606,4 +633,4 @@ cursorStyle: function cursorStyle() {
   src_VSwatchvue_type_script_lang_js_,
-  VSwatchvue_type_template_id_ac8b2c1a_render,
-  VSwatchvue_type_template_id_ac8b2c1a_staticRenderFns,
+  VSwatchvue_type_template_id_13db94d5_render,
+  VSwatchvue_type_template_id_13db94d5_staticRenderFns,
   false,
@@ -620,7 +647,7 @@ null,
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function VSwatchesvue_type_script_lang_js_ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function VSwatchesvue_type_script_lang_js_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { VSwatchesvue_type_script_lang_js_ownKeys(Object(source), true).forEach(function (key) { VSwatchesvue_type_script_lang_js_defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { VSwatchesvue_type_script_lang_js_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function VSwatchesvue_type_script_lang_js_defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
@@ -749,2 +776,15 @@ //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
 
@@ -760,2 +800,5 @@
 var DEFAULT_SHOW_BORDER = false;
+var VSwatchesvue_type_script_lang_js_extractPropertyFromPreset = function extractPropertyFromPreset(presetName, property, alwaysReturn) {
+  if (typeof presetName !== "string") return null;else if (presetName === "text-basic") return text_basic[property] === undefined ? null : text_basic[property];else if (presetName === "text-advanced") return text_advanced[property] === undefined ? null : text_advanced[property];else if (presetName === "basic") return basic[property] === undefined ? null : basic[property];else if (alwaysReturn) return basic[property] === undefined ? null : basic[property];else return null;
+};
 /* harmony default export */ var VSwatchesvue_type_script_lang_js_ = ({
@@ -875,7 +918,2 @@ name: "v-swatches",
       componentMounted: false,
-      presetBorderRadius: null,
-      presetRowLength: null,
-      presetShowBorder: null,
-      presetSwatchSize: null,
-      presetSpacingSize: null,
       internalValue: this.value,
@@ -902,2 +940,18 @@ internalIsOpen: false
     /** REAL COMPUTEDS (depends on user's props and preset's values, these have 'computed' prefix) **/
+    // Preset Computeds
+    presetBorderRadius: function presetBorderRadius() {
+      return VSwatchesvue_type_script_lang_js_extractPropertyFromPreset(this.swatches, "borderRadius");
+    },
+    presetRowLength: function presetRowLength() {
+      return VSwatchesvue_type_script_lang_js_extractPropertyFromPreset(this.swatches, "rowLength");
+    },
+    presetShowBorder: function presetShowBorder() {
+      return VSwatchesvue_type_script_lang_js_extractPropertyFromPreset(this.swatches, "showBorder");
+    },
+    presetSwatchSize: function presetSwatchSize() {
+      return VSwatchesvue_type_script_lang_js_extractPropertyFromPreset(this.swatches, "swatchSize");
+    },
+    presetSpacingSize: function presetSpacingSize() {
+      return VSwatchesvue_type_script_lang_js_extractPropertyFromPreset(this.swatches, "spacingSize");
+    },
     // Computed value for `swatches`
@@ -909,13 +963,3 @@ computedSwatches: function computedSwatches() {
       if (typeof this.swatches === "string") {
-        switch (this.swatches) {
-          case "text-basic":
-            return this.extractColorAndApplyPreset(text_basic);
-
-          case "text-advanced":
-            return this.extractColorAndApplyPreset(text_advanced);
-
-          case "basic":
-          default:
-            return this.extractColorAndApplyPreset(basic);
-        }
+        return VSwatchesvue_type_script_lang_js_extractPropertyFromPreset(this.swatches, "colors", true);
       } else {
@@ -935,4 +979,5 @@ return [];
       // Priorize user value
-      if (this.rowLength !== null) return Number(this.rowLength);else if (this.presetRowLength !== null) // Over preset value
-        return this.presetRowLength; // Use default value if these two are unset!
+      if (this.rowLength !== null) return Number(this.rowLength); // Over preset value
+      else if (this.presetRowLength !== null) return this.presetRowLength; // If there are less swatches than the default
+        else if (this.computedSwatches.length < DEFAULT_ROW_LENGTH && !this.isNested) return this.computedSwatches.length; // Use default otherwise
 
@@ -995,15 +1040,18 @@ return DEFAULT_ROW_LENGTH;
     containerStyles: function containerStyles() {
-      return [{
+      var baseStyles = [{
         backgroundColor: this.backgroundColor
       }, this.alwaysOnScreenStyle];
+      if (this.inline) return baseStyles;
+      return [].concat(baseStyles, [{
+        padding: "5px",
+        marginBottom: "5px"
+      }]);
     },
     computedWrapperStyle: function computedWrapperStyle() {
-      var baseStyles = {
+      if (this.inline) return {};
+      return {
         paddingTop: "".concat(this.computedSpacingSize, "px"),
-        paddingLeft: "".concat(this.computedSpacingSize, "px")
+        paddingLeft: "".concat(this.computedSpacingSize, "px"),
+        width: "".concat(this.wrapperWidth, "px")
       };
-      if (this.inline) return baseStyles;
-      return _objectSpread({}, baseStyles, {
-        width: "".concat(this.wrapperWidth, "px")
-      });
     },
@@ -1019,3 +1067,3 @@ wrapperStyles: function wrapperStyles() {
       if (this.inline) return baseStyles;
-      return _objectSpread({}, baseStyles, {
+      return VSwatchesvue_type_script_lang_js_objectSpread({}, baseStyles, {
         width: "".concat(this.wrapperWidth - this.computedSpacingSize, "px")
@@ -1175,12 +1223,2 @@ });
       }
-    },
-    extractColorAndApplyPreset: function extractColorAndApplyPreset(preset) {
-      // Applying the styles if present in the preset
-      if (preset.borderRadius) this.presetBorderRadius = preset.borderRadius;
-      if (preset.rowLength) this.presetRowLength = preset.rowLength;
-      if (preset.showBorder) this.presetShowBorder = preset.showBorder;
-      if (preset.swatchSize) this.presetSwatchSize = preset.swatchSize;
-      if (preset.spacingSize === 0 || preset.spacingSize) this.presetSpacingSize = preset.spacingSize; // Must return the swatches from the preset
-
-      return preset.colors;
     }
@@ -1187,0 +1225,0 @@ }

dist/vue-swatches.umd.js

@@ -245,2 +245,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
 __webpack_require__.d(__webpack_exports__, "DEFAULT_SHOW_BORDER", function() { return /* reexport */ DEFAULT_SHOW_BORDER; });
+__webpack_require__.d(__webpack_exports__, "extractPropertyFromPreset", function() { return /* reexport */ VSwatchesvue_type_script_lang_js_extractPropertyFromPreset; });
 
@@ -271,11 +272,12 @@ // CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js
 
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"74eff3ec-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/VSwatches.vue?vue&type=template&id=5189cf2d&
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"74eff3ec-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/VSwatches.vue?vue&type=template&id=1ef5feb5&
 var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"vue-swatches",attrs:{"tabindex":"-1"},on:{"blur":function (e) { return _vm.onBlur(e.relatedTarget); }}},[(!_vm.inline)?_c('div',{ref:"triggerWrapper",staticClass:"vue-swatches__trigger__wrapper",on:{"click":_vm.togglePopover}},[_vm._t("trigger",[_c('div',{staticClass:"vue-swatches__trigger",class:{
           'vue-swatches--is-empty': !_vm.value,
           'vue-swatches--is-disabled': _vm.disabled
-        },style:(_vm.triggerStyles)},[_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.isNoColor),expression:"isNoColor"}],staticClass:"vue-swatches__diagonal__wrapper vue-swatches--has-children-centered"},[_c('div',{staticClass:"vue-swatches__diagonal"})])])])],2):_vm._e(),_c('transition',{attrs:{"name":"vue-swatches-show-hide"}},[_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.inline || _vm.isOpen),expression:"inline || isOpen"}],ref:"containerWrapper",staticClass:"vue-swatches__container",class:{ 'vue-swatches--inline': _vm.inline },style:(_vm.containerStyles)},[_c('div',{staticClass:"vue-swatches__wrapper",style:(_vm.wrapperStyles)},[(_vm.isNested)?_vm._l((_vm.computedSwatches),function(swatchRow,index){return _c('div',{key:index,staticClass:"vue-swatches__row"},_vm._l((swatchRow),function(swatch,swatchIndex){return _c('v-swatch',{key:swatchIndex,attrs:{"border-radius":_vm.computedBorderRadius,"disabled":_vm.getSwatchDisabled(swatch),"selected":_vm.checkEquality(_vm.getSwatchColor(swatch), _vm.value),"swatch-size":_vm.computedSwatchSize,"spacing-size":_vm.computedSpacingSize,"show-border":_vm.getSwatchShowBorder(swatch),"show-checkbox":_vm.showCheckbox,"show-labels":_vm.showLabels,"swatch-color":_vm.getSwatchColor(swatch),"swatch-label":_vm.getSwatchLabel(swatch),"swatch-alt":_vm.getSwatchAlt(swatch),"swatch-style":_vm.swatchStyle},on:{"blur":function (relatedTarget) { return _vm.onBlur(relatedTarget); },"click":function($event){return _vm.updateSwatch(swatch)}},nativeOn:{"click":function($event){return _vm.updateSwatch(swatch)}}})}),1)}):_vm._l((_vm.computedSwatches),function(swatch,swatchIndex){return _c('v-swatch',{key:swatchIndex,attrs:{"border-radius":_vm.computedBorderRadius,"disabled":_vm.getSwatchDisabled(swatch),"selected":_vm.checkEquality(_vm.getSwatchColor(swatch), _vm.value),"swatch-size":_vm.computedSwatchSize,"spacing-size":_vm.computedSpacingSize,"show-border":_vm.getSwatchShowBorder(swatch),"show-checkbox":_vm.showCheckbox,"show-labels":_vm.showLabels,"swatch-color":_vm.getSwatchColor(swatch),"swatch-label":_vm.getSwatchLabel(swatch),"swatch-alt":_vm.getSwatchAlt(swatch),"swatch-style":_vm.swatchStyle},on:{"blur":function (relatedTarget) { return _vm.onBlur(relatedTarget); },"click":function($event){return _vm.updateSwatch(swatch)}},nativeOn:{"click":function($event){return _vm.updateSwatch(swatch)}}})})],2),(_vm.showFallback)?_c('div',{staticClass:"vue-swatches__fallback__wrapper",style:(_vm.computedFallbackWrapperStyles)},[_c('span',{staticClass:"vue-swatches__fallback__input--wrapper"},[_c('input',{ref:"fallbackInput",staticClass:"vue-swatches__fallback__input",class:_vm.fallbackInputClass,attrs:{"type":_vm.fallbackInputType},domProps:{"value":_vm.internalValue},on:{"input":function (e) { return _vm.updateSwatch(e.target.value, { fromFallbackInput: true }); }}})]),(_vm.showFallbackOk)?_c('button',{staticClass:"vue-swatches__fallback__button",class:_vm.fallbackOkClass,on:{"click":function($event){$event.preventDefault();return _vm.onFallbackButtonClick($event)}}},[_vm._v(" "+_vm._s(_vm.fallbackOkText)+" ")]):_vm._e()]):_vm._e()])])],1)}
+        },style:(_vm.triggerStyles)},[_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.isNoColor),expression:"isNoColor"}],staticClass:"vue-swatches__diagonal__wrapper vue-swatches--has-children-centered"},[_c('div',{staticClass:"vue-swatches__diagonal"})])])])],2):_vm._e(),_c('transition',{attrs:{"name":"vue-swatches-show-hide"}},[_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.inline || _vm.isOpen),expression:"inline || isOpen"}],ref:"containerWrapper",staticClass:"vue-swatches__container",class:{ 'vue-swatches--inline': _vm.inline },style:(_vm.containerStyles)},[_c('div',{staticClass:"vue-swatches__wrapper",style:(_vm.wrapperStyles)},[(_vm.isNested)?_vm._l((_vm.computedSwatches),function(swatchRow,index){return _c('div',{key:index,staticClass:"vue-swatches__row"},_vm._l((swatchRow),function(swatch,swatchIndex){return _c('v-swatch',{key:swatchIndex,attrs:{"is-last":index === _vm.computedSwatches.length - 1 &&
+                  swatchIndex === swatchRow.length,"row-length-setted":_vm.rowLength !== null || _vm.presetRowLength !== null,"border-radius":_vm.computedBorderRadius,"disabled":_vm.getSwatchDisabled(swatch),"inline":_vm.inline,"selected":_vm.checkEquality(_vm.getSwatchColor(swatch), _vm.value),"swatch-size":_vm.computedSwatchSize,"spacing-size":_vm.computedSpacingSize,"show-border":_vm.getSwatchShowBorder(swatch),"show-checkbox":_vm.showCheckbox,"show-labels":_vm.showLabels,"swatch-color":_vm.getSwatchColor(swatch),"swatch-label":_vm.getSwatchLabel(swatch),"swatch-alt":_vm.getSwatchAlt(swatch),"swatch-style":_vm.swatchStyle},on:{"blur":function (relatedTarget) { return _vm.onBlur(relatedTarget); },"click":function($event){return _vm.updateSwatch(swatch)}},nativeOn:{"click":function($event){return _vm.updateSwatch(swatch)}}})}),1)}):_vm._l((_vm.computedSwatches),function(swatch,swatchIndex){return _c('v-swatch',{key:swatchIndex,attrs:{"is-last":swatchIndex === _vm.computedSwatches.length - 1,"row-length-setted":_vm.rowLength !== null || _vm.presetRowLength !== null,"border-radius":_vm.computedBorderRadius,"disabled":_vm.getSwatchDisabled(swatch),"inline":_vm.inline,"selected":_vm.checkEquality(_vm.getSwatchColor(swatch), _vm.value),"swatch-size":_vm.computedSwatchSize,"spacing-size":_vm.computedSpacingSize,"show-border":_vm.getSwatchShowBorder(swatch),"show-checkbox":_vm.showCheckbox,"show-labels":_vm.showLabels,"swatch-color":_vm.getSwatchColor(swatch),"swatch-label":_vm.getSwatchLabel(swatch),"swatch-alt":_vm.getSwatchAlt(swatch),"swatch-style":_vm.swatchStyle},on:{"blur":function (relatedTarget) { return _vm.onBlur(relatedTarget); },"click":function($event){return _vm.updateSwatch(swatch)}},nativeOn:{"click":function($event){return _vm.updateSwatch(swatch)}}})})],2),(_vm.showFallback)?_c('div',{staticClass:"vue-swatches__fallback__wrapper",style:(_vm.computedFallbackWrapperStyles)},[_c('span',{staticClass:"vue-swatches__fallback__input--wrapper"},[_c('input',{ref:"fallbackInput",staticClass:"vue-swatches__fallback__input",class:_vm.fallbackInputClass,attrs:{"type":_vm.fallbackInputType},domProps:{"value":_vm.internalValue},on:{"input":function (e) { return _vm.updateSwatch(e.target.value, { fromFallbackInput: true }); }}})]),(_vm.showFallbackOk)?_c('button',{staticClass:"vue-swatches__fallback__button",class:_vm.fallbackOkClass,on:{"click":function($event){$event.preventDefault();return _vm.onFallbackButtonClick($event)}}},[_vm._v(" "+_vm._s(_vm.fallbackOkText)+" ")]):_vm._e()]):_vm._e()])])],1)}
 var staticRenderFns = []
 
 
-// CONCATENATED MODULE: ./src/VSwatches.vue?vue&type=template&id=5189cf2d&
+// CONCATENATED MODULE: ./src/VSwatches.vue?vue&type=template&id=1ef5feb5&
 
@@ -300,4 +302,4 @@ // CONCATENATED MODULE: ./src/presets/basic.js
 });
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"74eff3ec-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/VSwatch.vue?vue&type=template&id=ac8b2c1a&
-var VSwatchvue_type_template_id_ac8b2c1a_render = function () {
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"74eff3ec-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/VSwatch.vue?vue&type=template&id=13db94d5&
+var VSwatchvue_type_template_id_13db94d5_render = function () {
 var this$1 = this;
@@ -309,6 +311,6 @@ var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"vue-swatches__swatch",class:{
   },style:(_vm.swatchStyles),attrs:{"aria-label":_vm.swatchAlt,"role":"button","tabindex":"0"},on:{"keyup":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.$emit('click', _vm.swatchColor)},"blur":function (e) { return this$1.$emit('blur', e.relatedTarget); }}},[(_vm.swatchColor === '')?_c('div',{staticClass:"vue-swatches__diagonal__wrapper vue-swatches--has-children-centered"},[_c('div',{staticClass:"vue-swatches__diagonal"})]):_vm._e(),_c('v-check',{directives:[{name:"show",rawName:"v-show",value:(_vm.showCheckbox && _vm.selected),expression:"showCheckbox && selected"}]}),(_vm.showLabels)?_c('div',{staticClass:"vue-swatches__swatch__label",style:(_vm.labelStyles)},[_vm._v(" "+_vm._s(_vm.swatchLabel)+" ")]):_vm._e()],1)}
-var VSwatchvue_type_template_id_ac8b2c1a_staticRenderFns = []
+var VSwatchvue_type_template_id_13db94d5_staticRenderFns = []
 
 
-// CONCATENATED MODULE: ./src/VSwatch.vue?vue&type=template&id=ac8b2c1a&
+// CONCATENATED MODULE: ./src/VSwatch.vue?vue&type=template&id=13db94d5&
 
@@ -473,2 +475,8 @@ // CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"74eff3ec-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/VCheck.vue?vue&type=template&id=a04741f2&
 // CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/VSwatch.vue?vue&type=script&lang=js&
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 //
@@ -517,2 +525,10 @@ //
     },
+    isLast: {
+      type: Boolean,
+      default: false
+    },
+    rowLengthSetted: {
+      type: Boolean,
+      default: false
+    },
     disabled: {
@@ -522,2 +538,6 @@ type: Boolean // this prop comes from computed property and always should have a value
     },
+    inline: {
+      type: Boolean // default is calculated in `Swatches.vue`
+
+    },
     selected: {
@@ -575,7 +595,5 @@ type: Boolean,
     computedSwatchStyle: function computedSwatchStyle() {
-      return {
+      var baseStyles = {
         width: "".concat(this.swatchSize, "px"),
         height: "".concat(this.swatchSize, "px"),
-        marginBottom: "".concat(this.spacingSize, "px"),
-        marginRight: "".concat(this.spacingSize, "px"),
         borderRadius: this.borderRadius,
@@ -585,2 +603,11 @@ backgroundColor: this.swatchColor !== "" ? this.swatchColor : "#FFFFFF",
       };
+
+      if (!this.inline || !this.isLast) {
+        baseStyles.marginRight = "".concat(this.spacingSize, "px");
+      }
+
+      if (this.inline && !this.rowLengthSetted) return baseStyles;
+      return _objectSpread({}, baseStyles, {
+        marginBottom: "".concat(this.spacingSize, "px")
+      });
     },
@@ -615,4 +642,4 @@ cursorStyle: function cursorStyle() {
   src_VSwatchvue_type_script_lang_js_,
-  VSwatchvue_type_template_id_ac8b2c1a_render,
-  VSwatchvue_type_template_id_ac8b2c1a_staticRenderFns,
+  VSwatchvue_type_template_id_13db94d5_render,
+  VSwatchvue_type_template_id_13db94d5_staticRenderFns,
   false,
@@ -629,7 +656,7 @@ null,
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function VSwatchesvue_type_script_lang_js_ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function VSwatchesvue_type_script_lang_js_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { VSwatchesvue_type_script_lang_js_ownKeys(Object(source), true).forEach(function (key) { VSwatchesvue_type_script_lang_js_defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { VSwatchesvue_type_script_lang_js_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function VSwatchesvue_type_script_lang_js_defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
@@ -758,2 +785,15 @@ //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
 
@@ -769,2 +809,5 @@
 var DEFAULT_SHOW_BORDER = false;
+var VSwatchesvue_type_script_lang_js_extractPropertyFromPreset = function extractPropertyFromPreset(presetName, property, alwaysReturn) {
+  if (typeof presetName !== "string") return null;else if (presetName === "text-basic") return text_basic[property] === undefined ? null : text_basic[property];else if (presetName === "text-advanced") return text_advanced[property] === undefined ? null : text_advanced[property];else if (presetName === "basic") return basic[property] === undefined ? null : basic[property];else if (alwaysReturn) return basic[property] === undefined ? null : basic[property];else return null;
+};
 /* harmony default export */ var VSwatchesvue_type_script_lang_js_ = ({
@@ -884,7 +927,2 @@ name: "v-swatches",
       componentMounted: false,
-      presetBorderRadius: null,
-      presetRowLength: null,
-      presetShowBorder: null,
-      presetSwatchSize: null,
-      presetSpacingSize: null,
       internalValue: this.value,
@@ -911,2 +949,18 @@ internalIsOpen: false
     /** REAL COMPUTEDS (depends on user's props and preset's values, these have 'computed' prefix) **/
+    // Preset Computeds
+    presetBorderRadius: function presetBorderRadius() {
+      return VSwatchesvue_type_script_lang_js_extractPropertyFromPreset(this.swatches, "borderRadius");
+    },
+    presetRowLength: function presetRowLength() {
+      return VSwatchesvue_type_script_lang_js_extractPropertyFromPreset(this.swatches, "rowLength");
+    },
+    presetShowBorder: function presetShowBorder() {
+      return VSwatchesvue_type_script_lang_js_extractPropertyFromPreset(this.swatches, "showBorder");
+    },
+    presetSwatchSize: function presetSwatchSize() {
+      return VSwatchesvue_type_script_lang_js_extractPropertyFromPreset(this.swatches, "swatchSize");
+    },
+    presetSpacingSize: function presetSpacingSize() {
+      return VSwatchesvue_type_script_lang_js_extractPropertyFromPreset(this.swatches, "spacingSize");
+    },
     // Computed value for `swatches`
@@ -918,13 +972,3 @@ computedSwatches: function computedSwatches() {
       if (typeof this.swatches === "string") {
-        switch (this.swatches) {
-          case "text-basic":
-            return this.extractColorAndApplyPreset(text_basic);
-
-          case "text-advanced":
-            return this.extractColorAndApplyPreset(text_advanced);
-
-          case "basic":
-          default:
-            return this.extractColorAndApplyPreset(basic);
-        }
+        return VSwatchesvue_type_script_lang_js_extractPropertyFromPreset(this.swatches, "colors", true);
       } else {
@@ -944,4 +988,5 @@ return [];
       // Priorize user value
-      if (this.rowLength !== null) return Number(this.rowLength);else if (this.presetRowLength !== null) // Over preset value
-        return this.presetRowLength; // Use default value if these two are unset!
+      if (this.rowLength !== null) return Number(this.rowLength); // Over preset value
+      else if (this.presetRowLength !== null) return this.presetRowLength; // If there are less swatches than the default
+        else if (this.computedSwatches.length < DEFAULT_ROW_LENGTH && !this.isNested) return this.computedSwatches.length; // Use default otherwise
 
@@ -1004,15 +1049,18 @@ return DEFAULT_ROW_LENGTH;
     containerStyles: function containerStyles() {
-      return [{
+      var baseStyles = [{
         backgroundColor: this.backgroundColor
       }, this.alwaysOnScreenStyle];
+      if (this.inline) return baseStyles;
+      return [].concat(baseStyles, [{
+        padding: "5px",
+        marginBottom: "5px"
+      }]);
     },
     computedWrapperStyle: function computedWrapperStyle() {
-      var baseStyles = {
+      if (this.inline) return {};
+      return {
         paddingTop: "".concat(this.computedSpacingSize, "px"),
-        paddingLeft: "".concat(this.computedSpacingSize, "px")
+        paddingLeft: "".concat(this.computedSpacingSize, "px"),
+        width: "".concat(this.wrapperWidth, "px")
       };
-      if (this.inline) return baseStyles;
-      return _objectSpread({}, baseStyles, {
-        width: "".concat(this.wrapperWidth, "px")
-      });
     },
@@ -1028,3 +1076,3 @@ wrapperStyles: function wrapperStyles() {
       if (this.inline) return baseStyles;
-      return _objectSpread({}, baseStyles, {
+      return VSwatchesvue_type_script_lang_js_objectSpread({}, baseStyles, {
         width: "".concat(this.wrapperWidth - this.computedSpacingSize, "px")
@@ -1184,12 +1232,2 @@ });
       }
-    },
-    extractColorAndApplyPreset: function extractColorAndApplyPreset(preset) {
-      // Applying the styles if present in the preset
-      if (preset.borderRadius) this.presetBorderRadius = preset.borderRadius;
-      if (preset.rowLength) this.presetRowLength = preset.rowLength;
-      if (preset.showBorder) this.presetShowBorder = preset.showBorder;
-      if (preset.swatchSize) this.presetSwatchSize = preset.swatchSize;
-      if (preset.spacingSize === 0 || preset.spacingSize) this.presetSpacingSize = preset.spacingSize; // Must return the swatches from the preset
-
-      return preset.colors;
     }
@@ -1196,0 +1234,0 @@ }

dist/vue-swatches.umd.min.js

@@ -1,2 +0,2 @@
-(function(t,e){"object"===typeof exports&&"object"===typeof module?module.exports=e():"function"===typeof define&&define.amd?define([],e):"object"===typeof exports?exports["vue-swatches"]=e():t["vue-swatches"]=e()})("undefined"!==typeof self?self:this,(function(){return function(t){var e={};function n(r){if(e[r])return e[r].exports;var i=e[r]={i:r,l:!1,exports:{}};return t[r].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},n.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"===typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)n.d(r,i,function(e){return t[e]}.bind(null,i));return r},n.n=function(t){var e=t&&t.__esModule?function(){return t["default"]}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s="fb15")}({"0ca3":function(t,e,n){"use strict";var r=n("c6aa"),i=n.n(r);i.a},7937:function(t,e,n){},"7fca":function(t,e,n){"use strict";var r=n("c10a"),i=n.n(r);i.a},8875:function(t,e,n){var r,i,o;(function(n,a){i=[],r=a,o="function"===typeof r?r.apply(e,i):r,void 0===o||(t.exports=o)})("undefined"!==typeof self&&self,(function(){function t(){if(document.currentScript)return document.currentScript;try{throw new Error}catch(h){var t,e,n,r=/.*at [^(]*\((.*):(.+):(.+)\)$/gi,i=/@([^@]*):(\d+):(\d+)\s*$/gi,o=r.exec(h.stack)||i.exec(h.stack),a=o&&o[1]||!1,s=o&&o[2]||!1,c=document.location.href.replace(document.location.hash,""),l=document.getElementsByTagName("script");a===c&&(t=document.documentElement.outerHTML,e=new RegExp("(?:[^\\n]+?\\n){0,"+(s-2)+"}[^<]*<script>([\\d\\D]*?)<\\/script>[\\d\\D]*","i"),n=t.replace(e,"$1").trim());for(var u=0;u<l.length;u++){if("interactive"===l[u].readyState)return l[u];if(l[u].src===a)return l[u];if(a===c&&l[u].innerHTML&&l[u].innerHTML.trim()===n)return l[u]}return null}}return t}))},9334:function(t,e,n){"use strict";var r=n("7937"),i=n.n(r);i.a},c10a:function(t,e,n){},c6aa:function(t,e,n){},fb15:function(t,e,n){"use strict";if(n.r(e),n.d(e,"DEFAULT_BACKGROUND_COLOR",(function(){return z})),n.d(e,"DEFAULT_BORDER_RADIUS",(function(){return R})),n.d(e,"DEFAULT_ROW_LENGTH",(function(){return E})),n.d(e,"DEFAULT_TRIGGER_CONTAINER_SPACE",(function(){return F})),n.d(e,"DEFAULT_SWATCH_SIZE",(function(){return L})),n.d(e,"DEFAULT_SHOW_BORDER",(function(){return A})),"undefined"!==typeof window){var r=window.document.currentScript,i=n("8875");r=i(),"currentScript"in document||Object.defineProperty(document,"currentScript",{get:i});var o=r&&r.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);o&&(n.p=o[1])}var a=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"vue-swatches",attrs:{tabindex:"-1"},on:{blur:function(e){return t.onBlur(e.relatedTarget)}}},[t.inline?t._e():n("div",{ref:"triggerWrapper",staticClass:"vue-swatches__trigger__wrapper",on:{click:t.togglePopover}},[t._t("trigger",[n("div",{staticClass:"vue-swatches__trigger",class:{"vue-swatches--is-empty":!t.value,"vue-swatches--is-disabled":t.disabled},style:t.triggerStyles},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.isNoColor,expression:"isNoColor"}],staticClass:"vue-swatches__diagonal__wrapper vue-swatches--has-children-centered"},[n("div",{staticClass:"vue-swatches__diagonal"})])])])],2),n("transition",{attrs:{name:"vue-swatches-show-hide"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.inline||t.isOpen,expression:"inline || isOpen"}],ref:"containerWrapper",staticClass:"vue-swatches__container",class:{"vue-swatches--inline":t.inline},style:t.containerStyles},[n("div",{staticClass:"vue-swatches__wrapper",style:t.wrapperStyles},[t.isNested?t._l(t.computedSwatches,(function(e,r){return n("div",{key:r,staticClass:"vue-swatches__row"},t._l(e,(function(e,r){return n("v-swatch",{key:r,attrs:{"border-radius":t.computedBorderRadius,disabled:t.getSwatchDisabled(e),selected:t.checkEquality(t.getSwatchColor(e),t.value),"swatch-size":t.computedSwatchSize,"spacing-size":t.computedSpacingSize,"show-border":t.getSwatchShowBorder(e),"show-checkbox":t.showCheckbox,"show-labels":t.showLabels,"swatch-color":t.getSwatchColor(e),"swatch-label":t.getSwatchLabel(e),"swatch-alt":t.getSwatchAlt(e),"swatch-style":t.swatchStyle},on:{blur:function(e){return t.onBlur(e)},click:function(n){return t.updateSwatch(e)}},nativeOn:{click:function(n){return t.updateSwatch(e)}}})})),1)})):t._l(t.computedSwatches,(function(e,r){return n("v-swatch",{key:r,attrs:{"border-radius":t.computedBorderRadius,disabled:t.getSwatchDisabled(e),selected:t.checkEquality(t.getSwatchColor(e),t.value),"swatch-size":t.computedSwatchSize,"spacing-size":t.computedSpacingSize,"show-border":t.getSwatchShowBorder(e),"show-checkbox":t.showCheckbox,"show-labels":t.showLabels,"swatch-color":t.getSwatchColor(e),"swatch-label":t.getSwatchLabel(e),"swatch-alt":t.getSwatchAlt(e),"swatch-style":t.swatchStyle},on:{blur:function(e){return t.onBlur(e)},click:function(n){return t.updateSwatch(e)}},nativeOn:{click:function(n){return t.updateSwatch(e)}}})}))],2),t.showFallback?n("div",{staticClass:"vue-swatches__fallback__wrapper",style:t.computedFallbackWrapperStyles},[n("span",{staticClass:"vue-swatches__fallback__input--wrapper"},[n("input",{ref:"fallbackInput",staticClass:"vue-swatches__fallback__input",class:t.fallbackInputClass,attrs:{type:t.fallbackInputType},domProps:{value:t.internalValue},on:{input:function(e){return t.updateSwatch(e.target.value,{fromFallbackInput:!0})}}})]),t.showFallbackOk?n("button",{staticClass:"vue-swatches__fallback__button",class:t.fallbackOkClass,on:{click:function(e){return e.preventDefault(),t.onFallbackButtonClick(e)}}},[t._v(" "+t._s(t.fallbackOkText)+" ")]):t._e()]):t._e()])])],1)},s=[],c={colors:["#1FBC9C","#1CA085","#2ECC70","#27AF60","#3398DB","#2980B9","#A463BF","#8E43AD","#3D556E","#222F3D","#F2C511","#F39C19","#E84B3C","#C0382B","#DDE6E8","#BDC3C8"],rowLength:4},l={colors:["#CC0001","#E36101","#FFCC00","#009900","#0066CB","#000000","#FFFFFF"],showBorder:!0},u={colors:[["#000000","#434343","#666666","#999999","#b7b7b7","#cccccc","#d9d9d9","#efefef","#f3f3f3","#ffffff"],["#980000","#ff0000","#ff9900","#ffff00","#00ff00","#00ffff","#4a86e8","#0000ff","#9900ff","#ff00ff"],["#e6b8af","#f4cccc","#fce5cd","#fff2cc","#d9ead3","#d0e0e3","#c9daf8","#cfe2f3","#d9d2e9","#ead1dc"],["#dd7e6b","#ea9999","#f9cb9c","#ffe599","#b6d7a8","#a2c4c9","#a4c2f4","#9fc5e8","#b4a7d6","#d5a6bd"],["#cc4125","#e06666","#f6b26b","#ffd966","#93c47d","#76a5af","#6d9eeb","#6fa8dc","#8e7cc3","#c27ba0"],["#a61c00","#cc0000","#e69138","#f1c232","#6aa84f","#45818e","#3c78d8","#3d85c6","#674ea7","#a64d79"],["#85200c","#990000","#b45f06","#bf9000","#38761d","#134f5c","#1155cc","#0b5394","#351c75","#741b47"],["#5b0f00","#660000","#783f04","#7f6000","#274e13","#0c343d","#1c4587","#073763","#20124d","#4c1130"]],borderRadius:"0",rowLength:10,swatchSize:24,spacingSize:0},h=function(){var t=this,e=this,n=e.$createElement,r=e._self._c||n;return r("div",{staticClass:"vue-swatches__swatch",class:{"vue-swatches__swatch--border":e.showBorder,"vue-swatches__swatch--selected":e.selected,"vue-swatches__swatch--is-disabled":e.disabled},style:e.swatchStyles,attrs:{"aria-label":e.swatchAlt,role:"button",tabindex:"0"},on:{keyup:function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"enter",13,t.key,"Enter")?null:e.$emit("click",e.swatchColor)},blur:function(e){return t.$emit("blur",e.relatedTarget)}}},[""===e.swatchColor?r("div",{staticClass:"vue-swatches__diagonal__wrapper vue-swatches--has-children-centered"},[r("div",{staticClass:"vue-swatches__diagonal"})]):e._e(),r("v-check",{directives:[{name:"show",rawName:"v-show",value:e.showCheckbox&&e.selected,expression:"showCheckbox && selected"}]}),e.showLabels?r("div",{staticClass:"vue-swatches__swatch__label",style:e.labelStyles},[e._v(" "+e._s(e.swatchLabel)+" ")]):e._e()],1)},d=[],p=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"vue-swatches__check__wrapper vue-swatches--has-children-centered"},[n("div",{staticClass:"vue-swatches__check__circle vue-swatches--has-children-centered"},[n("svg",{staticClass:"check",attrs:{version:"1.1",role:"presentation",width:"12",height:"12",viewBox:"0 0 1792 1792"}},[n("path",{staticClass:"vue-swatches__check__path",attrs:{d:"M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z"}})])])])},f=[],w={name:"v-check",data:function(){return{}}},b=w;n("7fca");function S(t,e,n,r,i,o,a,s){var c,l="function"===typeof t?t.options:t;if(e&&(l.render=e,l.staticRenderFns=n,l._compiled=!0),r&&(l.functional=!0),o&&(l._scopeId="data-v-"+o),a?(c=function(t){t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,t||"undefined"===typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),i&&i.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(a)},l._ssrRegister=c):i&&(c=s?function(){i.call(this,this.$root.$options.shadowRoot)}:i),c)if(l.functional){l._injectStyles=c;var u=l.render;l.render=function(t,e){return c.call(e),u(t,e)}}else{var h=l.beforeCreate;l.beforeCreate=h?[].concat(h,c):[c]}return{exports:t,options:l}}var y=S(b,p,f,!1,null,null,null),g=y.exports,v={name:"v-swatch",components:{VCheck:g},props:{borderRadius:{type:String},disabled:{type:Boolean},selected:{type:Boolean,default:!1},showCheckbox:{type:Boolean},showBorder:{type:Boolean},showLabels:{type:Boolean},spacingSize:{type:Number},swatchColor:{type:String,default:""},swatchLabel:{type:String},swatchAlt:{type:String},swatchSize:{type:Number},swatchStyle:{type:Object}},data:function(){return{}},computed:{computedLabelStyle:function(){var t=8+3*Math.floor(this.spacingSize/5);return{bottom:"-".concat(t,"px")}},computedSwatchStyle:function(){return{width:"".concat(this.swatchSize,"px"),height:"".concat(this.swatchSize,"px"),marginBottom:"".concat(this.spacingSize,"px"),marginRight:"".concat(this.spacingSize,"px"),borderRadius:this.borderRadius,backgroundColor:""!==this.swatchColor?this.swatchColor:"#FFFFFF",cursor:this.cursorStyle}},cursorStyle:function(){return this.disabled?"not-allowed":"pointer"},labelStyles:function(){return[this.computedLabelStyle]},swatchStyles:function(){return[this.computedSwatchStyle,this.swatchStyle]}}},m=v,_=(n("0ca3"),S(m,h,d,!1,null,null,null)),C=_.exports;function k(t){return k="function"===typeof Symbol&&"symbol"===typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"===typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},k(t)}function O(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}function x(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?O(Object(n),!0).forEach((function(e){B(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):O(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}function B(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}var z="#ffffff",R="10px",E=4,F=5,L=42,A=!1,j={name:"v-swatches",components:{VSwatch:C},props:{backgroundColor:{type:String,default:z},closeOnSelect:{type:Boolean,default:!0},swatches:{type:[Array,String],default:function(){return"basic"}},disabled:{type:Boolean,default:!1},fallbackInputClass:{type:[Array,Object,String],default:null},fallbackInputType:{type:String,default:function(){return"text"},validator:function(t){return-1!==["text","color"].indexOf(t)}},fallbackOkClass:{type:[Array,Object,String],default:null},fallbackOkText:{type:String,default:"Ok"},inline:{type:Boolean,default:!1},shapes:{type:String,default:"squares"},popoverX:{type:String,default:"right"},popoverY:{type:String,default:"bottom"},rowLength:{type:[Number,String],default:null},showBorder:{type:Boolean,default:null},showFallback:{type:Boolean,default:!1},showCheckbox:{type:Boolean,default:!0},showLabels:{type:Boolean,default:!1},spacingSize:{type:Number,default:null},swatchSize:{type:[Number,String],default:null},swatchStyle:{type:[Object,Array],default:function(){}},triggerStyle:{type:[Object,Array],default:function(){}},wrapperStyle:{type:[Object,Array],default:function(){}},value:{type:String,default:null}},data:function(){return{alwaysOnScreenStyle:{},componentMounted:!1,presetBorderRadius:null,presetRowLength:null,presetShowBorder:null,presetSwatchSize:null,presetSpacingSize:null,internalValue:this.value,internalIsOpen:!1}},computed:{isNested:function(){return!!(this.computedSwatches&&this.computedSwatches.length&&this.computedSwatches[0]instanceof Array)},isOpen:function(){return!this.inline&&this.internalIsOpen},isNoColor:function(){return this.checkEquality("",this.value)},computedSwatches:function(){if(this.swatches instanceof Array)return this.swatches;if("string"!==typeof this.swatches)return[];switch(this.swatches){case"text-basic":return this.extractColorAndApplyPreset(l);case"text-advanced":return this.extractColorAndApplyPreset(u);case"basic":default:return this.extractColorAndApplyPreset(c)}},computedBorderRadius:function(){return null!==this.presetBorderRadius?this.presetBorderRadius:this.borderRadius},computedRowLength:function(){return null!==this.rowLength?Number(this.rowLength):null!==this.presetRowLength?this.presetRowLength:E},computedSwatchSize:function(){return null!==this.swatchSize?Number(this.swatchSize):null!==this.presetSwatchSize?this.presetSwatchSize:L},computedSpacingSize:function(){return null!==this.spacingSize?this.spacingSize:null!==this.presetSpacingSize?this.presetSpacingSize:Math.round(.25*this.computedSwatchSize)},computedShowBorder:function(){return null!==this.showBorder?this.showBorder:null!==this.presetShowBorder?this.presetShowBorder:A},showFallbackOk:function(){return!this.inline},borderRadius:function(){return"squares"===this.shapes?"".concat(Math.round(.25*this.computedSwatchSize),"px"):"circles"===this.shapes?"50%":""},wrapperWidth:function(){return this.computedRowLength*(this.computedSwatchSize+this.computedSpacingSize)},computedtriggerStyle:function(){return{width:"42px",height:"42px",backgroundColor:this.value?this.value:"#ffffff",borderRadius:"circles"===this.shapes?"50%":R}},triggerStyles:function(){return[this.computedtriggerStyle,this.triggerStyle]},containerStyles:function(){return[{backgroundColor:this.backgroundColor},this.alwaysOnScreenStyle]},computedWrapperStyle:function(){var t={paddingTop:"".concat(this.computedSpacingSize,"px"),paddingLeft:"".concat(this.computedSpacingSize,"px")};return this.inline?t:x({},t,{width:"".concat(this.wrapperWidth,"px")})},wrapperStyles:function(){return[this.computedWrapperStyle,this.wrapperStyle]},computedFallbackWrapperStyle:function(){var t={marginLeft:"".concat(this.computedSpacingSize,"px"),paddingBottom:"".concat(this.computedSpacingSize,"px")};return this.inline?t:x({},t,{width:"".concat(this.wrapperWidth-this.computedSpacingSize,"px")})},computedFallbackWrapperStyles:function(){return[this.computedFallbackWrapperStyle]}},watch:{value:function(t){this.internalValue=t}},mounted:function(){this.componentMounted=!0},methods:{checkEquality:function(t,e){return!(!t&&""!==t||!e&&""!==e)&&t.toUpperCase()===e.toUpperCase()},hidePopover:function(){this.internalIsOpen=!1,this.$el.blur(),this.$emit("close",this.internalValue)},getAlwaysOnScreenStyle:function(){var t={},e=this.$refs.triggerWrapper,n=this.$refs.containerWrapper;if(!this.componentMounted||this.inline||!e||!window||!document)return t;var r=e.getBoundingClientRect(),i=5,o=(document.documentElement.clientWidth||window.innerWidth)-5,a=5,s=(document.documentElement.clientHeight||window.innerHeight)-5;n.style.visibility="hidden",n.style.display="block";var c=n.getBoundingClientRect();return n.style.display="none",n.style.visibility="visible","top"===this.popoverY?r.top-c.height<a?(t.top="".concat(r.height+F,"px"),t.bottom="auto"):(t.bottom="".concat(r.height+F,"px"),t.top="auto"):"bottom"===this.popoverY&&(r.bottom+c.height>s?(t.bottom="".concat(r.height+F,"px"),t.top="auto"):(t.top="".concat(r.height+F,"px"),t.bottom="auto")),"left"===this.popoverX?r.right-c.width<i?(t.left=0,t.right="auto"):(t.right=0,t.left="auto"):"right"===this.popoverX&&(r.left+c.width>o?(t.right=0,t.left="auto"):(t.left=0,t.right="auto")),t},getSwatchShowBorder:function(t){return"string"===typeof t?this.computedShowBorder:"object"===k(t)?void 0!==t.showBorder?t.showBorder:this.computedShowBorder:void 0},getSwatchColor:function(t){return"string"===typeof t?t:"object"===k(t)?t.color:void 0},getSwatchDisabled:function(t){return"string"===typeof t?this.disabled:"object"===k(t)?void 0!==t.disabled?t.disabled:this.disabled:void 0},getSwatchLabel:function(t){return"string"===typeof t?t:"object"===k(t)?t.label||t.color:void 0},getSwatchAlt:function(t){return"string"===typeof t?t:"object"===k(t)?t.alt||this.getSwatchLabel(t):void 0},onBlur:function(t){this.isOpen&&(null!==t&&this.$el.contains(t)||(this.internalIsOpen=!1,this.$emit("close",this.internalValue)))},onFallbackButtonClick:function(){this.hidePopover()},showPopover:function(){this.isOpen||this.inline||this.disabled||(this.alwaysOnScreenStyle=this.getAlwaysOnScreenStyle(),this.internalIsOpen=!0,this.$el.focus(),this.$emit("open"))},togglePopover:function(){this.isOpen?this.hidePopover():this.showPopover()},updateSwatch:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=e.fromFallbackInput;if(!this.getSwatchDisabled(t)){var r=this.getSwatchColor(t);this.internalValue=r,this.$emit("input",r),!this.closeOnSelect||this.inline||n||this.hidePopover()}},extractColorAndApplyPreset:function(t){return t.borderRadius&&(this.presetBorderRadius=t.borderRadius),t.rowLength&&(this.presetRowLength=t.rowLength),t.showBorder&&(this.presetShowBorder=t.showBorder),t.swatchSize&&(this.presetSwatchSize=t.swatchSize),(0===t.spacingSize||t.spacingSize)&&(this.presetSpacingSize=t.spacingSize),t.colors}}},P=j,D=(n("9334"),S(P,a,s,!1,null,null,null)),T=D.exports;e["default"]=T}})["default"]}));
+(function(t,e){"object"===typeof exports&&"object"===typeof module?module.exports=e():"function"===typeof define&&define.amd?define([],e):"object"===typeof exports?exports["vue-swatches"]=e():t["vue-swatches"]=e()})("undefined"!==typeof self?self:this,(function(){return function(t){var e={};function n(r){if(e[r])return e[r].exports;var i=e[r]={i:r,l:!1,exports:{}};return t[r].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},n.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"===typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)n.d(r,i,function(e){return t[e]}.bind(null,i));return r},n.n=function(t){var e=t&&t.__esModule?function(){return t["default"]}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s="fb15")}({"0ca3":function(t,e,n){"use strict";var r=n("c6aa"),i=n.n(r);i.a},7937:function(t,e,n){},"7fca":function(t,e,n){"use strict";var r=n("c10a"),i=n.n(r);i.a},8875:function(t,e,n){var r,i,o;(function(n,c){i=[],r=c,o="function"===typeof r?r.apply(e,i):r,void 0===o||(t.exports=o)})("undefined"!==typeof self&&self,(function(){function t(){if(document.currentScript)return document.currentScript;try{throw new Error}catch(h){var t,e,n,r=/.*at [^(]*\((.*):(.+):(.+)\)$/gi,i=/@([^@]*):(\d+):(\d+)\s*$/gi,o=r.exec(h.stack)||i.exec(h.stack),c=o&&o[1]||!1,s=o&&o[2]||!1,a=document.location.href.replace(document.location.hash,""),l=document.getElementsByTagName("script");c===a&&(t=document.documentElement.outerHTML,e=new RegExp("(?:[^\\n]+?\\n){0,"+(s-2)+"}[^<]*<script>([\\d\\D]*?)<\\/script>[\\d\\D]*","i"),n=t.replace(e,"$1").trim());for(var u=0;u<l.length;u++){if("interactive"===l[u].readyState)return l[u];if(l[u].src===c)return l[u];if(c===a&&l[u].innerHTML&&l[u].innerHTML.trim()===n)return l[u]}return null}}return t}))},9334:function(t,e,n){"use strict";var r=n("7937"),i=n.n(r);i.a},c10a:function(t,e,n){},c6aa:function(t,e,n){},fb15:function(t,e,n){"use strict";if(n.r(e),n.d(e,"DEFAULT_BACKGROUND_COLOR",(function(){return E})),n.d(e,"DEFAULT_BORDER_RADIUS",(function(){return R})),n.d(e,"DEFAULT_ROW_LENGTH",(function(){return F})),n.d(e,"DEFAULT_TRIGGER_CONTAINER_SPACE",(function(){return P})),n.d(e,"DEFAULT_SWATCH_SIZE",(function(){return D})),n.d(e,"DEFAULT_SHOW_BORDER",(function(){return A})),n.d(e,"extractPropertyFromPreset",(function(){return T})),"undefined"!==typeof window){var r=window.document.currentScript,i=n("8875");r=i(),"currentScript"in document||Object.defineProperty(document,"currentScript",{get:i});var o=r&&r.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);o&&(n.p=o[1])}var c=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"vue-swatches",attrs:{tabindex:"-1"},on:{blur:function(e){return t.onBlur(e.relatedTarget)}}},[t.inline?t._e():n("div",{ref:"triggerWrapper",staticClass:"vue-swatches__trigger__wrapper",on:{click:t.togglePopover}},[t._t("trigger",[n("div",{staticClass:"vue-swatches__trigger",class:{"vue-swatches--is-empty":!t.value,"vue-swatches--is-disabled":t.disabled},style:t.triggerStyles},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.isNoColor,expression:"isNoColor"}],staticClass:"vue-swatches__diagonal__wrapper vue-swatches--has-children-centered"},[n("div",{staticClass:"vue-swatches__diagonal"})])])])],2),n("transition",{attrs:{name:"vue-swatches-show-hide"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.inline||t.isOpen,expression:"inline || isOpen"}],ref:"containerWrapper",staticClass:"vue-swatches__container",class:{"vue-swatches--inline":t.inline},style:t.containerStyles},[n("div",{staticClass:"vue-swatches__wrapper",style:t.wrapperStyles},[t.isNested?t._l(t.computedSwatches,(function(e,r){return n("div",{key:r,staticClass:"vue-swatches__row"},t._l(e,(function(i,o){return n("v-swatch",{key:o,attrs:{"is-last":r===t.computedSwatches.length-1&&o===e.length,"row-length-setted":null!==t.rowLength||null!==t.presetRowLength,"border-radius":t.computedBorderRadius,disabled:t.getSwatchDisabled(i),inline:t.inline,selected:t.checkEquality(t.getSwatchColor(i),t.value),"swatch-size":t.computedSwatchSize,"spacing-size":t.computedSpacingSize,"show-border":t.getSwatchShowBorder(i),"show-checkbox":t.showCheckbox,"show-labels":t.showLabels,"swatch-color":t.getSwatchColor(i),"swatch-label":t.getSwatchLabel(i),"swatch-alt":t.getSwatchAlt(i),"swatch-style":t.swatchStyle},on:{blur:function(e){return t.onBlur(e)},click:function(e){return t.updateSwatch(i)}},nativeOn:{click:function(e){return t.updateSwatch(i)}}})})),1)})):t._l(t.computedSwatches,(function(e,r){return n("v-swatch",{key:r,attrs:{"is-last":r===t.computedSwatches.length-1,"row-length-setted":null!==t.rowLength||null!==t.presetRowLength,"border-radius":t.computedBorderRadius,disabled:t.getSwatchDisabled(e),inline:t.inline,selected:t.checkEquality(t.getSwatchColor(e),t.value),"swatch-size":t.computedSwatchSize,"spacing-size":t.computedSpacingSize,"show-border":t.getSwatchShowBorder(e),"show-checkbox":t.showCheckbox,"show-labels":t.showLabels,"swatch-color":t.getSwatchColor(e),"swatch-label":t.getSwatchLabel(e),"swatch-alt":t.getSwatchAlt(e),"swatch-style":t.swatchStyle},on:{blur:function(e){return t.onBlur(e)},click:function(n){return t.updateSwatch(e)}},nativeOn:{click:function(n){return t.updateSwatch(e)}}})}))],2),t.showFallback?n("div",{staticClass:"vue-swatches__fallback__wrapper",style:t.computedFallbackWrapperStyles},[n("span",{staticClass:"vue-swatches__fallback__input--wrapper"},[n("input",{ref:"fallbackInput",staticClass:"vue-swatches__fallback__input",class:t.fallbackInputClass,attrs:{type:t.fallbackInputType},domProps:{value:t.internalValue},on:{input:function(e){return t.updateSwatch(e.target.value,{fromFallbackInput:!0})}}})]),t.showFallbackOk?n("button",{staticClass:"vue-swatches__fallback__button",class:t.fallbackOkClass,on:{click:function(e){return e.preventDefault(),t.onFallbackButtonClick(e)}}},[t._v(" "+t._s(t.fallbackOkText)+" ")]):t._e()]):t._e()])])],1)},s=[],a={colors:["#1FBC9C","#1CA085","#2ECC70","#27AF60","#3398DB","#2980B9","#A463BF","#8E43AD","#3D556E","#222F3D","#F2C511","#F39C19","#E84B3C","#C0382B","#DDE6E8","#BDC3C8"],rowLength:4},l={colors:["#CC0001","#E36101","#FFCC00","#009900","#0066CB","#000000","#FFFFFF"],showBorder:!0},u={colors:[["#000000","#434343","#666666","#999999","#b7b7b7","#cccccc","#d9d9d9","#efefef","#f3f3f3","#ffffff"],["#980000","#ff0000","#ff9900","#ffff00","#00ff00","#00ffff","#4a86e8","#0000ff","#9900ff","#ff00ff"],["#e6b8af","#f4cccc","#fce5cd","#fff2cc","#d9ead3","#d0e0e3","#c9daf8","#cfe2f3","#d9d2e9","#ead1dc"],["#dd7e6b","#ea9999","#f9cb9c","#ffe599","#b6d7a8","#a2c4c9","#a4c2f4","#9fc5e8","#b4a7d6","#d5a6bd"],["#cc4125","#e06666","#f6b26b","#ffd966","#93c47d","#76a5af","#6d9eeb","#6fa8dc","#8e7cc3","#c27ba0"],["#a61c00","#cc0000","#e69138","#f1c232","#6aa84f","#45818e","#3c78d8","#3d85c6","#674ea7","#a64d79"],["#85200c","#990000","#b45f06","#bf9000","#38761d","#134f5c","#1155cc","#0b5394","#351c75","#741b47"],["#5b0f00","#660000","#783f04","#7f6000","#274e13","#0c343d","#1c4587","#073763","#20124d","#4c1130"]],borderRadius:"0",rowLength:10,swatchSize:24,spacingSize:0},h=function(){var t=this,e=this,n=e.$createElement,r=e._self._c||n;return r("div",{staticClass:"vue-swatches__swatch",class:{"vue-swatches__swatch--border":e.showBorder,"vue-swatches__swatch--selected":e.selected,"vue-swatches__swatch--is-disabled":e.disabled},style:e.swatchStyles,attrs:{"aria-label":e.swatchAlt,role:"button",tabindex:"0"},on:{keyup:function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"enter",13,t.key,"Enter")?null:e.$emit("click",e.swatchColor)},blur:function(e){return t.$emit("blur",e.relatedTarget)}}},[""===e.swatchColor?r("div",{staticClass:"vue-swatches__diagonal__wrapper vue-swatches--has-children-centered"},[r("div",{staticClass:"vue-swatches__diagonal"})]):e._e(),r("v-check",{directives:[{name:"show",rawName:"v-show",value:e.showCheckbox&&e.selected,expression:"showCheckbox && selected"}]}),e.showLabels?r("div",{staticClass:"vue-swatches__swatch__label",style:e.labelStyles},[e._v(" "+e._s(e.swatchLabel)+" ")]):e._e()],1)},p=[],d=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"vue-swatches__check__wrapper vue-swatches--has-children-centered"},[n("div",{staticClass:"vue-swatches__check__circle vue-swatches--has-children-centered"},[n("svg",{staticClass:"check",attrs:{version:"1.1",role:"presentation",width:"12",height:"12",viewBox:"0 0 1792 1792"}},[n("path",{staticClass:"vue-swatches__check__path",attrs:{d:"M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z"}})])])])},f=[],w={name:"v-check",data:function(){return{}}},b=w;n("7fca");function S(t,e,n,r,i,o,c,s){var a,l="function"===typeof t?t.options:t;if(e&&(l.render=e,l.staticRenderFns=n,l._compiled=!0),r&&(l.functional=!0),o&&(l._scopeId="data-v-"+o),c?(a=function(t){t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,t||"undefined"===typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),i&&i.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(c)},l._ssrRegister=a):i&&(a=s?function(){i.call(this,this.$root.$options.shadowRoot)}:i),a)if(l.functional){l._injectStyles=a;var u=l.render;l.render=function(t,e){return a.call(e),u(t,e)}}else{var h=l.beforeCreate;l.beforeCreate=h?[].concat(h,a):[a]}return{exports:t,options:l}}var g=S(b,d,f,!1,null,null,null),y=g.exports;function v(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}function m(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?v(Object(n),!0).forEach((function(e){_(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):v(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}function _(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}var O={name:"v-swatch",components:{VCheck:y},props:{borderRadius:{type:String},isLast:{type:Boolean,default:!1},rowLengthSetted:{type:Boolean,default:!1},disabled:{type:Boolean},inline:{type:Boolean},selected:{type:Boolean,default:!1},showCheckbox:{type:Boolean},showBorder:{type:Boolean},showLabels:{type:Boolean},spacingSize:{type:Number},swatchColor:{type:String,default:""},swatchLabel:{type:String},swatchAlt:{type:String},swatchSize:{type:Number},swatchStyle:{type:Object}},data:function(){return{}},computed:{computedLabelStyle:function(){var t=8+3*Math.floor(this.spacingSize/5);return{bottom:"-".concat(t,"px")}},computedSwatchStyle:function(){var t={width:"".concat(this.swatchSize,"px"),height:"".concat(this.swatchSize,"px"),borderRadius:this.borderRadius,backgroundColor:""!==this.swatchColor?this.swatchColor:"#FFFFFF",cursor:this.cursorStyle};return this.inline&&this.isLast||(t.marginRight="".concat(this.spacingSize,"px")),this.inline&&!this.rowLengthSetted?t:m({},t,{marginBottom:"".concat(this.spacingSize,"px")})},cursorStyle:function(){return this.disabled?"not-allowed":"pointer"},labelStyles:function(){return[this.computedLabelStyle]},swatchStyles:function(){return[this.computedSwatchStyle,this.swatchStyle]}}},C=O,k=(n("0ca3"),S(C,h,p,!1,null,null,null)),x=k.exports;function B(t){return B="function"===typeof Symbol&&"symbol"===typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"===typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},B(t)}function j(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}function L(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?j(Object(n),!0).forEach((function(e){z(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):j(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}function z(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}var E="#ffffff",R="10px",F=4,P=5,D=42,A=!1,T=function(t,e,n){return"string"!==typeof t?null:"text-basic"===t?void 0===l[e]?null:l[e]:"text-advanced"===t?void 0===u[e]?null:u[e]:"basic"===t||n?void 0===a[e]?null:a[e]:null},$={name:"v-swatches",components:{VSwatch:x},props:{backgroundColor:{type:String,default:E},closeOnSelect:{type:Boolean,default:!0},swatches:{type:[Array,String],default:function(){return"basic"}},disabled:{type:Boolean,default:!1},fallbackInputClass:{type:[Array,Object,String],default:null},fallbackInputType:{type:String,default:function(){return"text"},validator:function(t){return-1!==["text","color"].indexOf(t)}},fallbackOkClass:{type:[Array,Object,String],default:null},fallbackOkText:{type:String,default:"Ok"},inline:{type:Boolean,default:!1},shapes:{type:String,default:"squares"},popoverX:{type:String,default:"right"},popoverY:{type:String,default:"bottom"},rowLength:{type:[Number,String],default:null},showBorder:{type:Boolean,default:null},showFallback:{type:Boolean,default:!1},showCheckbox:{type:Boolean,default:!0},showLabels:{type:Boolean,default:!1},spacingSize:{type:Number,default:null},swatchSize:{type:[Number,String],default:null},swatchStyle:{type:[Object,Array],default:function(){}},triggerStyle:{type:[Object,Array],default:function(){}},wrapperStyle:{type:[Object,Array],default:function(){}},value:{type:String,default:null}},data:function(){return{alwaysOnScreenStyle:{},componentMounted:!1,internalValue:this.value,internalIsOpen:!1}},computed:{isNested:function(){return!!(this.computedSwatches&&this.computedSwatches.length&&this.computedSwatches[0]instanceof Array)},isOpen:function(){return!this.inline&&this.internalIsOpen},isNoColor:function(){return this.checkEquality("",this.value)},presetBorderRadius:function(){return T(this.swatches,"borderRadius")},presetRowLength:function(){return T(this.swatches,"rowLength")},presetShowBorder:function(){return T(this.swatches,"showBorder")},presetSwatchSize:function(){return T(this.swatches,"swatchSize")},presetSpacingSize:function(){return T(this.swatches,"spacingSize")},computedSwatches:function(){return this.swatches instanceof Array?this.swatches:"string"===typeof this.swatches?T(this.swatches,"colors",!0):[]},computedBorderRadius:function(){return null!==this.presetBorderRadius?this.presetBorderRadius:this.borderRadius},computedRowLength:function(){return null!==this.rowLength?Number(this.rowLength):null!==this.presetRowLength?this.presetRowLength:this.computedSwatches.length<F&&!this.isNested?this.computedSwatches.length:F},computedSwatchSize:function(){return null!==this.swatchSize?Number(this.swatchSize):null!==this.presetSwatchSize?this.presetSwatchSize:D},computedSpacingSize:function(){return null!==this.spacingSize?this.spacingSize:null!==this.presetSpacingSize?this.presetSpacingSize:Math.round(.25*this.computedSwatchSize)},computedShowBorder:function(){return null!==this.showBorder?this.showBorder:null!==this.presetShowBorder?this.presetShowBorder:A},showFallbackOk:function(){return!this.inline},borderRadius:function(){return"squares"===this.shapes?"".concat(Math.round(.25*this.computedSwatchSize),"px"):"circles"===this.shapes?"50%":""},wrapperWidth:function(){return this.computedRowLength*(this.computedSwatchSize+this.computedSpacingSize)},computedtriggerStyle:function(){return{width:"42px",height:"42px",backgroundColor:this.value?this.value:"#ffffff",borderRadius:"circles"===this.shapes?"50%":R}},triggerStyles:function(){return[this.computedtriggerStyle,this.triggerStyle]},containerStyles:function(){var t=[{backgroundColor:this.backgroundColor},this.alwaysOnScreenStyle];return this.inline?t:[].concat(t,[{padding:"5px",marginBottom:"5px"}])},computedWrapperStyle:function(){return this.inline?{}:{paddingTop:"".concat(this.computedSpacingSize,"px"),paddingLeft:"".concat(this.computedSpacingSize,"px"),width:"".concat(this.wrapperWidth,"px")}},wrapperStyles:function(){return[this.computedWrapperStyle,this.wrapperStyle]},computedFallbackWrapperStyle:function(){var t={marginLeft:"".concat(this.computedSpacingSize,"px"),paddingBottom:"".concat(this.computedSpacingSize,"px")};return this.inline?t:L({},t,{width:"".concat(this.wrapperWidth-this.computedSpacingSize,"px")})},computedFallbackWrapperStyles:function(){return[this.computedFallbackWrapperStyle]}},watch:{value:function(t){this.internalValue=t}},mounted:function(){this.componentMounted=!0},methods:{checkEquality:function(t,e){return!(!t&&""!==t||!e&&""!==e)&&t.toUpperCase()===e.toUpperCase()},hidePopover:function(){this.internalIsOpen=!1,this.$el.blur(),this.$emit("close",this.internalValue)},getAlwaysOnScreenStyle:function(){var t={},e=this.$refs.triggerWrapper,n=this.$refs.containerWrapper;if(!this.componentMounted||this.inline||!e||!window||!document)return t;var r=e.getBoundingClientRect(),i=5,o=(document.documentElement.clientWidth||window.innerWidth)-5,c=5,s=(document.documentElement.clientHeight||window.innerHeight)-5;n.style.visibility="hidden",n.style.display="block";var a=n.getBoundingClientRect();return n.style.display="none",n.style.visibility="visible","top"===this.popoverY?r.top-a.height<c?(t.top="".concat(r.height+P,"px"),t.bottom="auto"):(t.bottom="".concat(r.height+P,"px"),t.top="auto"):"bottom"===this.popoverY&&(r.bottom+a.height>s?(t.bottom="".concat(r.height+P,"px"),t.top="auto"):(t.top="".concat(r.height+P,"px"),t.bottom="auto")),"left"===this.popoverX?r.right-a.width<i?(t.left=0,t.right="auto"):(t.right=0,t.left="auto"):"right"===this.popoverX&&(r.left+a.width>o?(t.right=0,t.left="auto"):(t.left=0,t.right="auto")),t},getSwatchShowBorder:function(t){return"string"===typeof t?this.computedShowBorder:"object"===B(t)?void 0!==t.showBorder?t.showBorder:this.computedShowBorder:void 0},getSwatchColor:function(t){return"string"===typeof t?t:"object"===B(t)?t.color:void 0},getSwatchDisabled:function(t){return"string"===typeof t?this.disabled:"object"===B(t)?void 0!==t.disabled?t.disabled:this.disabled:void 0},getSwatchLabel:function(t){return"string"===typeof t?t:"object"===B(t)?t.label||t.color:void 0},getSwatchAlt:function(t){return"string"===typeof t?t:"object"===B(t)?t.alt||this.getSwatchLabel(t):void 0},onBlur:function(t){this.isOpen&&(null!==t&&this.$el.contains(t)||(this.internalIsOpen=!1,this.$emit("close",this.internalValue)))},onFallbackButtonClick:function(){this.hidePopover()},showPopover:function(){this.isOpen||this.inline||this.disabled||(this.alwaysOnScreenStyle=this.getAlwaysOnScreenStyle(),this.internalIsOpen=!0,this.$el.focus(),this.$emit("open"))},togglePopover:function(){this.isOpen?this.hidePopover():this.showPopover()},updateSwatch:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=e.fromFallbackInput;if(!this.getSwatchDisabled(t)){var r=this.getSwatchColor(t);this.internalValue=r,this.$emit("input",r),!this.closeOnSelect||this.inline||n||this.hidePopover()}}}},N=$,W=(n("9334"),S(N,c,s,!1,null,null,null)),I=W.exports;e["default"]=I}})["default"]}));
 //# sourceMappingURL=vue-swatches.umd.min.js.map

package.json

 {
   "name": "vue-swatches",
-  "version": "2.0.3",
+  "version": "2.1.0",
   "description": "Help the user picking beautiful colors!",
@@ -5,0 +5,0 @@ "author": "Diego Jara <[e-mail]>",

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

Improved metrics

Total package byte prevSize

361340

increased by4.48%

Lines of code

2554

increased by3.32%

No dependency changes