From e372e412d539eef5de0ab018036dae8c79199c34 Mon Sep 17 00:00:00 2001 From: Diego Jara Palomino Date: Sat, 6 Jun 2020 02:31:21 -0500 Subject: [PATCH] addstyles updates --- demo/Demo.vue | 22 +++--- package.json | 2 +- src/VSwatch.vue | 27 +++++++- src/VSwatches.vue | 120 ++++++++++++++++++++++----------- tests/unit/specs/props.spec.js | 10 +++ 5 files changed, 127 insertions(+), 54 deletions(-) diff --git a/demo/Demo.vue b/demo/Demo.vue index 703f608..65d6ef1 100644 --- a/demo/Demo.vue +++ b/demo/Demo.vue @@ -2,14 +2,17 @@

Inline Swatches

- + +
+ +

Popover

@@ -35,10 +38,8 @@ popover-y="top" popover-x="right" :swatches="[ - ...swatchesArray, { color: '#ffffff', showBorder: true }, { color: '#ffffff' }, - { color: '#ffffff' }, { color: '#ffffff', showBorder: true } ]" /> @@ -96,6 +97,7 @@ export default { body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; + box-sizing: border-box; } .flexbox { diff --git a/package.json b/package.json index 90e83a8..efdace1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vue-swatches", - "version": "2.0.3", + "version": "2.1.0", "description": "Help the user picking beautiful colors!", "author": "Diego Jara ", "private": false, diff --git a/src/VSwatch.vue b/src/VSwatch.vue index 7ad8af9..70b5186 100644 --- a/src/VSwatch.vue +++ b/src/VSwatch.vue @@ -43,10 +43,22 @@ export default { type: String // default is calculated in `Swatches.vue` }, + isLast: { + type: Boolean, + default: false + }, + rowLengthSetted: { + type: Boolean, + default: false + }, disabled: { type: Boolean // this prop comes from computed property and always should have a value }, + inline: { + type: Boolean + // default is calculated in `Swatches.vue` + }, selected: { type: Boolean, default: false @@ -99,15 +111,24 @@ export default { }; }, computedSwatchStyle() { - return { + const baseStyles = { width: `${this.swatchSize}px`, height: `${this.swatchSize}px`, - marginBottom: `${this.spacingSize}px`, - marginRight: `${this.spacingSize}px`, borderRadius: this.borderRadius, backgroundColor: this.swatchColor !== "" ? this.swatchColor : "#FFFFFF", cursor: this.cursorStyle }; + + if (!this.inline || !this.isLast) { + baseStyles.marginRight = `${this.spacingSize}px`; + } + + if (this.inline && !this.rowLengthSetted) return baseStyles; + + return { + ...baseStyles, + marginBottom: `${this.spacingSize}px` + }; }, cursorStyle() { if (this.disabled) return "not-allowed"; diff --git a/src/VSwatches.vue b/src/VSwatches.vue index 2e902d5..db2fe0b 100644 --- a/src/VSwatches.vue +++ b/src/VSwatches.vue @@ -47,8 +47,16 @@ { + if (typeof presetName !== "string") return null; + else if (presetName === "text-basic") + return textBasicPreset[property] === undefined + ? null + : textBasicPreset[property]; + else if (presetName === "text-advanced") + return textAdvancedPreset[property] === undefined + ? null + : textAdvancedPreset[property]; + else if (presetName === "basic") + return basicPreset[property] === undefined ? null : basicPreset[property]; + else if (alwaysReturn) + return basicPreset[property] === undefined ? null : basicPreset[property]; + else return null; +}; + export default { name: "v-swatches", components: { @@ -240,11 +274,6 @@ export default { return { alwaysOnScreenStyle: {}, componentMounted: false, - presetBorderRadius: null, - presetRowLength: null, - presetShowBorder: null, - presetSwatchSize: null, - presetSpacingSize: null, internalValue: this.value, internalIsOpen: false }; @@ -270,21 +299,30 @@ export default { /** REAL COMPUTEDS (depends on user's props and preset's values, these have 'computed' prefix) **/ + // Preset Computeds + presetBorderRadius() { + return extractPropertyFromPreset(this.swatches, "borderRadius"); + }, + presetRowLength() { + return extractPropertyFromPreset(this.swatches, "rowLength"); + }, + presetShowBorder() { + return extractPropertyFromPreset(this.swatches, "showBorder"); + }, + presetSwatchSize() { + return extractPropertyFromPreset(this.swatches, "swatchSize"); + }, + presetSpacingSize() { + return extractPropertyFromPreset(this.swatches, "spacingSize"); + }, + // Computed value for `swatches` computedSwatches() { if (this.swatches instanceof Array) return this.swatches; /* istanbul ignore else */ if (typeof this.swatches === "string") { - switch (this.swatches) { - case "text-basic": - return this.extractColorAndApplyPreset(textBasicPreset); - case "text-advanced": - return this.extractColorAndApplyPreset(textAdvancedPreset); - case "basic": - default: - return this.extractColorAndApplyPreset(basicPreset); - } + return extractPropertyFromPreset(this.swatches, "colors", true); } else { return []; } @@ -301,10 +339,15 @@ export default { computedRowLength() { // 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! + // 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 return DEFAULT_ROW_LENGTH; }, // Computed value for `swatchSize` @@ -370,23 +413,29 @@ export default { return [this.computedtriggerStyle, this.triggerStyle]; }, containerStyles() { - return [ + const baseStyles = [ { backgroundColor: this.backgroundColor }, this.alwaysOnScreenStyle ]; - }, - computedWrapperStyle() { - const baseStyles = { - paddingTop: `${this.computedSpacingSize}px`, - paddingLeft: `${this.computedSpacingSize}px` - }; if (this.inline) return baseStyles; - return { + return [ ...baseStyles, + { + padding: "5px", + marginBottom: "5px" + } + ]; + }, + computedWrapperStyle() { + if (this.inline) return {}; + + return { + paddingTop: `${this.computedSpacingSize}px`, + paddingLeft: `${this.computedSpacingSize}px`, width: `${this.wrapperWidth}px` }; }, @@ -580,18 +629,6 @@ export default { if (this.closeOnSelect && !this.inline && !fromFallbackInput) { this.hidePopover(); } - }, - 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; } } }; @@ -624,9 +661,11 @@ fieldset[disabled] .vue-swatches { } .vue-swatches__container { - margin-bottom: 5px; box-sizing: content-box; - padding: 5px; + + &.vue-swatches--inline { + font-size: 0; + } &:not(.vue-swatches--inline) { position: absolute; @@ -640,6 +679,7 @@ fieldset[disabled] .vue-swatches { .vue-swatches__wrapper { background-color: inherit; + box-sizing: content-box; } .vue-swatches__row { diff --git a/tests/unit/specs/props.spec.js b/tests/unit/specs/props.spec.js index 1d1d7f6..d86518b 100644 --- a/tests/unit/specs/props.spec.js +++ b/tests/unit/specs/props.spec.js @@ -881,6 +881,16 @@ describe("Props", () => { expect(componentWrapper.vm.computedRowLength).toEqual(10); }); }); + test("should priorize the swatches-length over the default one", () => { + const componentWrapper = mount(VSwatches, { + propsData: { + swatches: ["#333333", "222222"] + } + }); + return Vue.nextTick().then(() => { + expect(componentWrapper.vm.computedRowLength).toEqual(2); + }); + }); }); describe("show-border", () => {