@rypen-dev/shared-components 5.0.12 → 5.0.13

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@rypen-dev/shared-components",
 	"description": "Shared styles and Vuejs ui components for Rypen projects.",
-	"version": "5.0.12",
+	"version": "5.0.13",
 	"main": "./dist/index.js",
 	"scripts": {
 		"build": "webpack --config ./webpack.config.js",

package/scss/partials/_buttons.scss

@@ -339,6 +339,10 @@ a.info {
         }
     }
 
+    &.small-text {
+        font-size: 0.875rem;
+    }
+
     &.secondary {
         color: $secondary;
     
@@ -485,6 +489,52 @@ a.info {
         }
     }
 
+    &.secondary {
+        color: $secondary;
+
+        &::before,
+        &::after {
+            border-color: $secondary;
+        }
+    }
+
+    &.success-alt {
+        color: $success-alt;
+
+        &::before,
+        &::after {
+            border-color: $success-alt;
+        }
+    }
+
+    &.tertiary {
+        color: $tertiary;
+
+        &::before,
+        &::after {
+            border-color: $tertiary;
+        }
+    }
+
+    @media screen and (min-width: map-get($breakpoints, meidum)) 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;
+            }
+    
+            &.reversed {
+                padding-right: 0;
+                padding-left: 20px;
+            }
+        }
+    }
+
     @media print, screen and (min-width: map-get($breakpoints, medium)) {
         line-height: 1.125rem;
         font-size: 1.0625rem;

package/scss/partials/_forms.scss

@@ -683,6 +683,12 @@ label {
             font-size: 1.25rem;
         }
 
+        &.select::after {
+            top: 22px;
+            width: 12px;
+            height: 12px;
+        }
+
         textarea {
             font-size: 1.25rem;
         }
@@ -863,7 +869,8 @@ label {
 
         &::after {
             content: '';
-            background-image: url('/assets/images/search-input.svg');
+            //background-image: url('/assets/images/search-input.svg');
+            background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4NCiAgICA8cGF0aCBmaWxsPSIjNTA0MTc0IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMi41OSAxNS4zNDNhNi42MiA2LjYyIDAgMCAxLTIuOTU4LS4xMzhjLTIuNzExLS43NjctNC42MDQtMy4yMy00LjYwNC01Ljk5IDAtMy40MzcgMi44NjItNi4yMzQgNi4zOC02LjIzNCAzLjUxOSAwIDYuMzgxIDIuNzk3IDYuMzgxIDYuMjM0IDAgMy0yLjE4NiA1LjU3OC01LjIgNi4xMjhtNy4yMDggNi4yMjRsLTMuMzctNS43NmMyLjIxNC0xLjYxMSAzLjU2Mi00LjI1IDMuMzcyLTcuMTI5LS4yNzEtNC4xMjMtMy43MzMtNy40NTktNy45NTctNy42NjdDNy4wMS43NzIgMyA0LjU0NSAzIDkuMjE1YzAgMy42MzcgMi40OTUgNi44ODMgNi4wNjggNy44OTNhOC42MDkgOC42MDkgMCAwIDAgMy44OTQuMTgyIDguNTMgOC41MyAwIDAgMCAxLjcwNS0uNWwzLjM3IDUuNzZhLjYzOS42MzkgMCAwIDAgLjg2LjIzbC42NjUtLjM3MmEuNjA5LjYwOSAwIDAgMCAuMjM1LS44NCIvPg0KPC9zdmc+DQo=');
             background-size: 100%;
             display: block;
             position: absolute;
@@ -873,6 +880,20 @@ label {
             height: 24px;
         }
 
+        &.small::after {
+            right: 6px;
+            top: 8px;
+            width: 18px;
+            height: 18px;
+        }
+
+        &.tiny::after {
+            right: 6px;
+            top: 6px;
+            width: 16px;
+            height: 16px;
+        }
+
         &.line input {
             padding-bottom: 0;
         }
@@ -2158,4 +2179,130 @@ input:checked ~ .switch-paddle {
             }
         }
     }
+}
+
+.searchable-dropdown-container {
+    .input-container.false-select {
+        font-family: $body-font-family;
+        font-size: 1rem;
+
+        .value {
+            display: block;
+            padding: $form-field-padding;
+            padding-right: 2rem;
+            color: $body-font-color;
+            background-color: $input-background-color;
+            border: solid 1px $input-border-color;
+            border-radius: $dealer-form-input-radius;
+            line-height: 1.5rem;
+            height: 44px;
+        }
+
+        .options-list-container {
+            display: none;
+            position: absolute;
+            width: 100%;
+            z-index: 20;
+            padding: 0 5px 5px;
+            background-color: $input-background-color;
+            border: solid 1px $input-border-color;
+            border-radius: 0 0 $dealer-form-input-radius $dealer-form-input-radius;
+            border-top: 0;
+
+            .input-container.search {
+                margin-bottom: 0.5rem;
+            }
+
+            .options-list {
+                max-height: 200px;
+                overflow: auto;
+                margin: 0 !important;
+                font-size: 1rem;
+
+                .option {
+                    display: block;
+                    color: $body-font-color;
+                    padding: 5px;
+                    line-height: 1.5rem;
+
+                    &.empty {
+                        color: $text-gray;
+                    }
+                }
+
+                a.option {
+                    &.active,
+                    &:hover {
+                        background: $input-highlight-color linear-gradient(0deg, $input-highlight-color 0%, $input-highlight-color 100%);
+                    }
+                }
+            }
+        }
+
+        &.small {
+            .value {
+                height: 35px;
+                padding-top: 5px;
+                padding-bottom: 5px;
+                padding-left: 5px;
+                font-size: 0.875rem;
+            }
+
+            .options-list-container .options-list {
+                font-size: 0.875rem;
+            }
+        }
+
+        &.tiny {
+            .value {
+                height: 30px;
+                padding-top: 0;
+                padding-bottom: 0;
+                padding-left: 0.5rem;
+                font-size: 0.875rem;
+                line-height: 1.75rem;
+            }
+
+            .options-list-container .options-list {
+                font-size: 0.875rem;
+            }
+        }
+
+        &.large {
+            .value {
+                height: 55px;
+                font-size: 1.25rem;
+                line-height: 2rem;
+            }
+
+            .options-list-container .options-list {
+                font-size: 1.25rem;
+            }
+        }
+
+        &.error:not(.open) {
+            .value {
+                border-width: 2px;
+                border-color: $alert !important;
+            }
+
+            &:not(.tiny) {
+                .value {
+                    padding-top: calc(0.625rem - 1px);
+                    padding-bottom: calc(0.625rem - 1px);
+                }
+            }
+        }
+
+        &.open {
+            .value {
+                border-radius: $dealer-form-input-radius $dealer-form-input-radius 0 0;
+                border-bottom: 0 !important;
+            }
+
+            .options-list-container {
+                display: block;
+            }
+        }
+    }
 }

package/src/components/SearchableDropdownInput.vue

@@ -0,0 +1,140 @@
+<template>
+    <div :id="id + '-container'" ref="container" class="input-container searchable-dropdown-container" @focusin="focusOn" @focusout="focusOff" tabindex="0">
+        <div class="input-container select false-select" :class="computedClass">
+            <span class="value">{{ value ? value.Name : 'Select' }}</span>
+            <div class="options-list-container">
+                <div class="input-container search small">
+                    <input ref="input" type="text" autocomplete="off" role="combobox" :aria-controls="id + '-list'" aria-autocomplete="list" :aria-expanded="focused" v-model="searchValue" :maxlength="maxLength" :disabled="disabled" />
+                </div>
+                <div class="options-list" role="listbox" :aria-label="label" :id="id + '-list'">
+                    <span v-if="filteredOptions.length === 0" class="option empty">No {{ searchType }} found</span>
+                    <a v-for="option in filteredOptions" :key="option.Id" role="option" class="option" :class="{ active: value && value.Id === option.Id }" @click="selectValue(option)">{{ option.Name }}</a>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    export default {
+        name: 'SearchableDropdownInput',
+        props: {
+            id: String,
+            label: String,
+            externalValueId: String,
+            externalValueName: String,
+            loading: {
+                type: Boolean,
+                default: false,
+            },
+            options: {
+                type: Array,
+                default: () => [],
+            },
+            invalid: {
+                type: Boolean,
+                default: false,
+            },
+            maxLength: {
+                type: Number,
+                default: 200,
+            },
+            disabled: {
+                type: Boolean,
+                default: false,
+            },
+            searchType: {
+                type: String,
+                default: 'products'
+            },
+            cssClass: String,
+        },
+        data: () => {
+            return {
+                value: null,
+                searchValue: '',
+
+                focused: false,
+
+                filteredOptions: [],
+            };
+        },
+        created: function () {
+            if (this.externalValueId && this.externalValueName) {
+                this.value = { Id: this.externalValueId, Name: this.externalValueName };
+            }
+
+            if (this.options.length) {
+                this.filterResults();
+            }
+        },
+        methods: {
+            filterResults() {
+                let newResults = [];
+
+                if (this.searchValue) {
+                    const search = this.searchValue.toLowerCase();
+
+                    this.options.forEach(option => {
+                        if (option.Name && option.Name.toLowerCase().indexOf(search) > -1) {
+                            newResults.push(option);
+                        }
+                    });
+                } else {
+                    newResults = this.options.slice();
+                }
+
+                this.filteredOptions.splice(0);
+                this.filteredOptions = this.filteredOptions.concat(newResults);
+            },
+
+            selectValue(value) {
+                this.value = value;
+
+                this.$emit('update', value);
+
+                if (this.$refs.container) {
+                    this.$refs.container.blur();
+                }
+                this.focused = false;
+            },
+
+            focusInput() {
+                this.focused = true;
+            },
+            focusSearchInput() {
+                this.focused = true;
+                if (this.$refs.input) {
+                    this.$refs.input.focus();
+                }
+            },
+            focusOn(e) {
+                //console.log(e.target);
+                this.focused = true;
+            },
+            focusOff(e) {
+                setTimeout(() => {
+                    if (!this.$refs.container || !document.activeElement || (document.activeElement.id !== this.id + '-container' && !this.$refs.container.contains(document.activeElement))) {
+                        this.focused = false;
+                        this.searchValue = null;
+                    }
+                }, 200);
+            },
+        },
+        computed: {
+            computedClass() {
+                return (this.cssClass || '') + (this.focused ? ' open' : '') + (this.invalid ? ' error' : '');
+            },
+        },
+        watch: {
+            loading(newValue, prevValue) {
+                if (!newValue && prevValue) {
+                    this.searchValue = '';
+                    this.filterResults();
+                }
+            },
+            searchValue(newValue) {
+                this.filterResults();
+            },
+        },
+    }
+</script>