@rypen-dev/shared-components 4.0.2 → 4.0.3

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@rypen-dev/shared-components",
 	"description": "Shared styles and Vuejs ui components for Rypen projects.",
-	"version": "4.0.2",
+	"version": "4.0.3",
 	"main": "./dist/index.js",
 	"scripts": {
 		"build": "webpack --config ./webpack.config.js",
@@ -9,7 +9,7 @@
 	},
 	"dependencies": {
 		"@fortawesome/fontawesome-free": "6.4.2",
-		"@rypen-dev/helpers": "1.0.19",
+		"@rypen-dev/helpers": "1.0.21",
 		"foundation-sites": "6.8.1",
 		"moment": "2.29.4",
 		"vue": "3.3.4"

package/scss/partials/_buttons.scss

@@ -272,6 +272,27 @@ a.info {
         transition: border-color 300ms, right 300ms;
     }
 
+    img {
+        height: 1.25rem;
+        margin: -0.75rem 0.25rem 0 0;
+        position: relative;
+        top: 0.25rem;
+    }
+
+    &:hover,
+    &:focus {
+        color: $call-to-action-color;
+
+        &::before {
+            right: -10px;
+            width: $arrow-width + 10px;
+        }
+
+        &::after {
+            right: -9px;
+        }
+    }
+
     &.short {
         padding-right: $short-arrow-width + 10px;
 
@@ -303,20 +324,6 @@ a.info {
         }
     }
 
-    &:hover,
-    &:focus {
-        color: $call-to-action-color;
-
-        &::before {
-            right: -10px;
-            width: $arrow-width + 10px;
-        }
-
-        &::after {
-            right: -9px;
-        }
-    }
-
     &.no-arrow {
         padding-right: 0;
 
@@ -364,11 +371,11 @@ a.info {
 
             &::after {
             }
-        }
 
-        &.reversed {
-            padding-right: 0;
-            padding-left: 20px;
+            &.reversed {
+                padding-right: 0;
+                padding-left: 20px;
+            }
         }
     }
 
@@ -441,6 +448,12 @@ a.info {
             }
         }
 
+        img {
+            height: 1.5rem;
+            margin-top: -0.5rem;
+            margin-right: 0.5rem;
+        }
+
         &.drop-down {
             &::after {
                 border-bottom-width: 2px;
@@ -462,6 +475,28 @@ a.info {
             }
         }
     }
+
+    @media print, screen and (min-width: map-get($breakpoints, medium)) and (max-width: map-get($breakpoints, large) - 1px) {
+        &.medium-only-small-text {
+            font-size: 0.875rem;
+        }
+
+        &.medium-only-no-tail {
+            padding-right: 20px;
+
+            &::before {
+                display: none;
+            }
+
+            &::after {
+            }
+
+            &.reversed {
+                padding-right: 0;
+                padding-left: 20px;
+            }
+        }
+    }
 }
 
 button,

package/scss/partials/_forms.scss

@@ -222,6 +222,24 @@ select {
             }
         }
     }
+
+    &.reversed {
+        label {
+            padding-left: 0;
+            padding-right: 45px;
+
+            &::before,
+            &::after {
+                left: auto;
+                right: 0;
+            }
+
+        }
+
+        &.small label {
+            padding-right: 35px;
+        }
+    }
 }
 
 .checkbox-group {
@@ -711,7 +729,7 @@ label {
             display: block;
             position: absolute;
             right: 8px;
-            top: 8px;
+            top: 10px;
             width: 24px;
             height: 24px;
         }
@@ -915,14 +933,6 @@ select {
         width: 46px;
         height: 46px;
 
-        body.hover-capable &:hover {
-            border-color: $secondary-alt;
-
-            .preview {
-                display: block;
-            }
-        }
-
         &::before {
             position: absolute;
             top: -2px;
@@ -940,8 +950,7 @@ select {
             }
         }
 
-        a,
-        span {
+        a {
             display: block;
             width: 36px;
             height: 36px;
@@ -952,9 +961,10 @@ select {
                 display: none;
                 position: absolute;
                 padding-bottom: 17px;
-                bottom: calc(100% + 5px);
+                bottom: calc(100% + 6px);
                 left: 50%;
                 transform: translateX(-50%);
+                pointer-events: none; // to make it easier to scan through options
                 z-index: 101;
 
                 @include tooltip-arrow('down');
@@ -997,6 +1007,19 @@ select {
                     }
                 }
             }
+
+            .zoom {
+                position: absolute;
+                top: 12px;
+                right: 12px;
+                border-radius: 50%;
+                background-color: fade-out($tertiary-alt, 0.4);
+                font-size: 1rem;
+                line-height: 1rem;
+                text-align: center;
+                padding: 8px;
+                z-index: 62;
+            }
         }
 
         &.disabled {
@@ -1013,8 +1036,7 @@ select {
                 bottom: 4px;
             }
 
-            a,
-            span {
+            a {
                 cursor: default;
 
                 &::before {
@@ -1061,6 +1083,10 @@ select {
                 }
             }
         }
+
+        &.fillers {
+            height: 0;
+        }
     }
 
     &.tiny {
@@ -1076,17 +1102,64 @@ select {
                 height: 26px;
             }
 
-            a,
-            span {
+            a {
                 width: 18px;
                 height: 18px;
             }
         }
     }
 
+    &.large {
+        li {
+            width: 86px;
+            height: 86px;
+            padding: 6px;
+            margin-right: 8px;
+            margin-bottom: 8px;
+    
+            &::before {
+                width: 88px;
+                height: 88px;
+                top: -2px;
+                left: -2px;
+                border-width: 2px;
+            }
+    
+            a {
+                width: 72px;
+                height: 72px;
+    
+                .preview {
+                    bottom: calc(100% + 10px);
+    
+                    .preview-name {
+                        padding: 6px;
+                    }
+                }
+            }
+        }
+    
+        @media (min-width: map-get($breakpoints, large)) {
+            li a .preview {
+                .preview-image {
+                    width: 300px;
+                    height: 300px;
+                }
+            }
+        }
+    
+        @media (min-width: map-get($breakpoints, xlarge)) {
+            li a .preview {
+                .preview-image {
+                    width: 400px;
+                    height: 400px;
+                }
+            }
+        }
+    }
+
     @media screen and (max-width: map-get($breakpoints, medium) - 1px) {
-        a,
-        span {
+        a {
             .preview {
                 display: none !important;
             }
@@ -1100,8 +1173,7 @@ select {
             width: 40px;
             height: 40px;
 
-            a,
-            span {
+            a {
                 width: 30px;
                 height: 30px;
             }
@@ -1114,6 +1186,31 @@ select {
     }
 }
 
+body.hover-capable {
+    .swatch-list {
+        li {
+            a .zoom {
+                display: none;
+            }
+
+            &:hover {
+                border-color: $secondary-alt;
+
+                a {
+                    .preview,
+                    .zoom {
+                       display: block;
+                    }
+                }
+            }
+        }
+
+        &.library li:hover > div {
+            border-color: $secondary-alt;
+        }
+    }
+}
+
 .payment-display {
     span {
         display: inline-block;
@@ -1454,6 +1551,12 @@ select {
         }
     }
 
+    &.success-alt {
+        input:checked ~ .switch-paddle {
+            background-color: $success-alt;
+        }
+    }
+
     &.warning {
         input:checked ~ .switch-paddle {
             background-color: $warning;
@@ -1463,6 +1566,12 @@ select {
     &.no-margin {
         margin-bottom: 0 !important;
     }
+
+    &.false-gray {
+        .switch-paddle {
+            background-color: $text-gray;
+        }
+    }
 }
 
 .switch-paddle {
@@ -1597,4 +1706,90 @@ input:checked ~ .switch-paddle {
     &.no-margin {
         margin-bottom: 0 !important;
     }
+}
+
+.lookup-container {
+    position: relative;
+
+    .input-container {
+        position: relative;
+
+        &.suggestions > input[type='text'] {
+            border-radius: $global-radius $global-radius 0 0;
+        }
+
+        &.loading .mini-loader {
+            position: absolute;
+            top: 12px;
+            right: 0.625rem;
+        }
+
+        &.small {
+            .mini-loader {
+                top: 8px;
+                right: 5px;
+            }
+        }
+    }
+
+    &.small {
+        .lookup-suggestions {
+            top: 35px;
+            padding: 0 2px 3px;
+            font-size: 0.875rem;
+
+            ul li {
+                a {
+                    padding: 2px;
+                }
+
+                &.empty {
+                    padding: 2px;
+                }
+            }
+        }
+    }
+
+    .lookup-suggestions {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 44px;
+        background-color: $input-background-color;
+        border: solid 1px $input-border-focus-color;
+        border-top: 0;
+        border-radius: 0 0 $global-radius $global-radius;
+        padding: 0 10px 0.625rem;
+        margin-top: -1px;
+        z-index: 10;
+
+        ul {
+            max-height: 250px;
+            overflow: auto;
+            display: block;
+            list-style-type: none;
+            margin: 0;
+            padding: 0;
+
+            li {
+                display: block;
+                line-height: 1.4;
+                margin-bottom: 1px;
+
+                a {
+                    display: block;
+                    padding: 4px 6px;
+
+                    &:hover {
+                        background-color: $medium-gray;
+                    }
+                }
+
+                &.empty {
+                    color: $text-gray;
+                    padding: 4px 6px;
+                }
+            }
+        }
+    }
 }

package/src/components/DebouncedTextBox.vue

@@ -0,0 +1,32 @@
+<template>
+    <div class="input-container" :class="cssClass">
+        <input type="text" v-model="value" />
+    </div>
+</template>
+<script>
+    import { debounce } from "@rypen-dev/helpers";
+
+    export default {
+        name: 'DebouncedTextBox',
+        props: {
+            cssClass: String,
+        },
+        data: () => {
+            return {
+                value: '',
+                debouncedValue: '',
+            };
+        },
+        created: function() {
+            this.debouncedAction = debounce(value => {
+                this.debouncedValue = value;
+                this.$emit('change', value);
+            });
+        },
+        watch: {
+            value(newValue) {
+                this.debouncedAction(newValue);
+            },
+        },
+    };
+</script>

package/src/components/LookupTextBox.vue

@@ -0,0 +1,84 @@
+<template>
+    <div class="lookup-container" :class="{ small: small }">
+    <div class="input-container" :class="{ loading: loading, suggestions: suggestionsOpen, small: small }">
+        <input type="text" autocomplete="off" v-model="value" @focus="focusOn" @blur="focusOff" />
+        <span v-if="loading" class="mini-loader"></span>
+    </div>
+    <div v-if="suggestionsOpen" class="lookup-suggestions">
+        <ul>
+            <li v-if="suggestions.length === 0" class="empty">No products found</li>
+            <li v-for="suggestion in suggestions" :key="suggestion.Id"><a @click="selectSuggestion(suggestion)">{{ suggestion.Name }}</a></li>
+        </ul>
+    </div>
+</div>
+</template>
+<script>
+    import { debounce } from "@rypen-dev/helpers";
+
+    export default {
+        name: 'LookupTextBox',
+        props: {
+            loading: {
+                type: Boolean,
+                default: false,
+            },
+            suggestions: {
+                type: Array,
+                default: () => [],
+            },
+            error: String,
+            minimumLength: {
+                type: Number,
+                default: 3,
+            },
+            small: {
+                type: Boolean,
+                default: false,
+            },
+        },
+        data: () => {
+            return {
+                value: '',
+                debouncedValue: '',
+                
+                focused: false,
+            };
+        },
+        created: function () {
+            this.debouncedGetSuggestions = debounce(value => {
+                this.debouncedValue = value;
+                this.getSuggestions();
+            });
+        },
+        methods: {
+            getSuggestions() {
+                if (this.value.length === 0 || this.value.length >= this.minimumLength) {
+                    this.$emit('search', this.value);
+                }
+            },
+            selectSuggestion(suggestion) {
+                this.$emit('select', suggestion);
+            },
+
+            focusOn() {
+                this.focused = true;
+            },
+            focusOff() {
+                setTimeout(() => {
+                    this.focused = false;
+                    this.value = '';
+                }, 200);
+            },
+        },
+        computed: {
+            suggestionsOpen() {
+                return this.debouncedValue && this.debouncedValue.length >= this.minimumLength && this.focused && (!this.loading || this.suggestions.length > 0);
+            }
+        },
+        watch: {
+            value(newValue) {
+                this.debouncedGetSuggestions(newValue);
+            },
+        },
+    }
+</script>

package/src/components/VariableLoader.vue

@@ -0,0 +1,25 @@
+<template>
+    <div>
+        <generic-loader v-if="generic" :cssClass="cssClass" />
+        <branded-loader v-else />
+    </div>
+</template>
+<script>
+    import BrandedLoader from "./Loader.vue";
+    import GenericLoader from "./GenericLoader.vue";
+
+    export default {
+        name: 'VariableLoader',
+        props: {
+            cssClass: String,
+            generic: {
+                type: Boolean,
+                default: false,
+            },
+        },
+        components: {
+            BrandedLoader,
+            GenericLoader,
+        }
+    };
+</script>