@rypen-dev/shared-components 8.1.14 → 8.2.0

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@rypen-dev/shared-components",
 	"description": "Shared styles and Vuejs ui components for Rypen projects. Starting with version 8, this package is built with Vite 7 and Vue 3.",
-	"version": "8.1.14",
+	"version": "8.2.0",
 	"type": "module",
 	"main": "./dist/index.js",
 	"scripts": {

package/scss/partials/_buttons.scss

@@ -249,7 +249,6 @@ a.info {
 $short-arrow-width: 30px;
 $arrow-width: 40px;
 $arrow-width-medium: 50px;
-$button-transition-time: 200ms;
 
 .arrow-link {
     display: inline-block;
@@ -345,40 +344,6 @@ $button-transition-time: 200ms;
         font-size: 0.875rem;
     }
 
-    &.secondary {
-        color: $secondary;
-    
-        &::before,
-        &::after {
-            border-color: $secondary;
-        }
-    }
-    
-    &.success-alt {
-        color: $success-alt;
-    
-        &::before,
-        &::after {
-            border-color: $success-alt;
-        }
-    }
-
-    &.color-text-gray {
-        &::before {
-            border-bottom-color: $text-gray;
-        }
-
-        &::after {
-            border-top-color: $text-gray;
-            border-right-color: $text-gray;
-        }
-
-        &:hover,
-        &:focus {
-            color: $text-gray;
-        }
-    }
-
     &.no-arrow {
         padding-right: 0;
 
@@ -436,6 +401,22 @@ $button-transition-time: 200ms;
             &::before {
                 display: none;
             }
+
+            &.reversed {
+                padding-right: 0;
+                padding-left: 20px;
+            }
+        }
+    }
+
+    &.medium-no-tail {
+        @media screen and (max-width: map-get($breakpoints, large) - 1px) {
+            padding-right: 20px;
+
+            &::before {
+                display: none;
+            }
+
             &.reversed {
                 padding-right: 0;
                 padding-left: 20px;
@@ -518,6 +499,18 @@ $button-transition-time: 200ms;
         }
     }
 
+    &.color-text-gray {
+        &::before,
+        &::after {
+            border-color: $text-gray;
+        }
+
+        &:hover,
+        &:focus {
+            color: $text-gray;
+        }
+    }
+
     @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;
@@ -612,6 +605,101 @@ $button-transition-time: 200ms;
     }
 }
 
+.arrow-static {
+    display: inline-block;
+    position: relative;
+    min-height: 1rem;
+    padding-right: $arrow-width;
+    line-height: 0.75rem;
+    white-space: nowrap;
+
+    &::before {
+        content: '';
+        width: $arrow-width;
+        height: 0;
+        border-bottom: solid 1px $call-to-action-color;
+        position: absolute;
+        right: 0;
+        bottom: 5px;
+        transition: border-color 300ms, width 300ms, right 300ms;
+    }
+
+    &::after {
+        content: '';
+        border-top: solid 1px $call-to-action-color;
+        border-right: solid 1px $call-to-action-color;
+        width: 9px;
+        height: 9px;
+        transform: rotate(45deg);
+        position: absolute;
+        right: 1px;
+        bottom: 1px;
+        transition: border-color 300ms, right 300ms;
+    }
+
+    &.short {
+        padding-right: $short-arrow-width;
+
+        &::before {
+            width: $short-arrow-width;
+        }
+    }
+
+    &.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;
+        }
+    }
+
+    &.color-text-gray {
+        &::before,
+        &::after {
+            border-color: $text-gray;
+        }
+    }
+
+    @media print, screen and (min-width: map-get($breakpoints, medium)) {
+        line-height: 1.125rem;
+        font-size: 1.0625rem;
+        padding-right: $arrow-width-medium;
+
+        &::before {
+            width: $arrow-width-medium;
+            border-bottom-width: 2px;
+            bottom: 8px;
+        }
+
+        &::after {
+            border-top-width: 2px;
+            border-right-width: 2px;
+            width: 10px;
+            height: 10px;
+            bottom: 4px;
+        }
+    }
+}
+
 $button-multi-line-height: $button-multi-line-line-height * math.div($button-font-size, 1rem) * 16;
 $button-multi-line-height-medium: $button-multi-line-line-height * math.div($button-font-size-medium, 1rem) * 16;
 
@@ -626,6 +714,8 @@ $button-small-multi-line-vertical-padding-medium: #{($button-small-height-medium
 $button-large-multi-line-vertical-padding: #{($button-large-height - $button-multi-line-height) * 0.5};
 $button-large-multi-line-vertical-padding-medium: #{($button-large-height-medium - $button-multi-line-height-medium) * 0.5};
 
+$button-transition-time: 200ms;
+
 button,
 .button {
     background-color: $default-button-bg-color;

package/scss/partials/_forms.scss

@@ -785,17 +785,32 @@ label {
             padding-right: 8px;
         }
 
+        [type='date'] {
+            min-width: 162px;
+        }
+
         ::-webkit-calendar-picker-indicator {
             //color: rgba(0, 0, 0, 0);
             opacity: 0;
         }
 
-        &.small {
+        &.small,
+        &.tiny {
             &::after {
                 width: 18px;
                 height: 17px;
                 background-size: 14px 17px;
             }
+
+            [type='date'] {
+                min-width: 135px;
+            }
+        }
+
+        &.tiny {
+            &::after {
+                top: 6px;
+            }
         }
     }
 
@@ -2231,6 +2246,8 @@ input:checked ~ .switch-paddle {
             border-radius: $global-form-input-radius;
             line-height: 1.5rem;
             height: 44px;
+            cursor: pointer;
+            transition: border-color 0.25s ease-in-out;
         }
 
         .options-list-container {
@@ -2243,6 +2260,7 @@ input:checked ~ .switch-paddle {
             border: solid 1px $input-border-color;
             border-radius: 0 0 $global-form-input-radius $global-form-input-radius;
             border-top: 0;
+            transition: border-color 0.25s ease-in-out;
 
             .input-container.search {
                 margin-bottom: 0.5rem;
@@ -2274,6 +2292,13 @@ input:checked ~ .switch-paddle {
             }
         }
 
+        &.disabled {
+            .value {
+                background-color: $light-gray;
+                cursor: not-allowed;
+            }
+        }
+
         &.small {
             .value {
                 height: 35px;
@@ -2330,6 +2355,11 @@ input:checked ~ .switch-paddle {
         }
 
         &.open {
+            .value,
+            .options-list-container {
+                border-color: $input-border-focus-color;
+            }
+
             .value {
                 border-radius: $global-form-input-radius $global-form-input-radius 0 0;
                 border-bottom: 0 !important;

package/scss/partials/_modals.scss

@@ -328,8 +328,8 @@
                     .checkbox,
                     .switch {
                         label {
-                            width: auto;
-                            padding-top: 0;
+                            width: auto !important;
+                            padding-top: 0 !important;
                         }
                     }
     

package/scss/partials/_typography.scss

@@ -631,6 +631,11 @@ small,
         }
     }
 
+    &.sale-price,
+    &.color-alert {
+        color: $alert !important;
+    }
+
     .plus {
         font-size: 1rem;
         vertical-align: middle;
@@ -659,7 +664,7 @@ small,
     .price {
         position: relative;
         font-size: 0.875rem;
-        color: $text-gray;
+        color: $text-gray !important;
         font-weight: $body-weight-normal;
         letter-spacing: 0;
         text-decoration: line-through;

package/src/components/AddressDisplay.vue

@@ -5,6 +5,10 @@
             {{ address.Company }}
             <br />
         </template>
+        <template v-if="address.CareOf && includeCareOf && !separateContactInfo">
+            Attn: {{ address.CareOf }}
+            <br />
+        </template>
         {{ address.Street }}<br v-if="address.Street" />
         <template v-if="address.Street2">
             {{ address.Street2 }}
@@ -52,6 +56,10 @@
             type: Boolean,
             default: false,
         },
+        includeCareOf: {
+            type: Boolean,
+            default: false,
+        },
         excludeName: {
             type: Boolean,
             default: false,

package/src/components/SearchableDropdownInput.vue

@@ -1,7 +1,7 @@
 <template>
     <div :id="id + '-container'" ref="containerref" 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>
+            <span class="value" @click="closeIfOpen">{{ value ? value.Name : 'Select' }}</span>
             <div class="options-list-container">
                 <div class="input-container search small">
                     <input ref="inputref" type="text" autocomplete="off" role="combobox" :aria-controls="id + '-list'" aria-autocomplete="list" :aria-expanded="focused" v-model="searchValue" :maxlength="maxLength" :disabled="disabled" />
@@ -91,6 +91,11 @@
         filteredOptions.push(...newResults);
     }
 
+    function setValueFromExternal(value) {
+        // trigger external value set
+        value.value = value;
+    }
+
     function selectValue(value) {
         value.value = value;
 
@@ -103,18 +108,24 @@
     }
 
     function focusInput() {
-        focused.value = true;
+        if (!disabled.value) {
+            focused.value = true;
+        }
     }
 
     function focusSearchInput() {
-        focused.value = true;
-        if (inputref.value) {
-            inputref.value.focus();
+        if (!disabled.value) {
+            focused.value = true;
+            if (inputref.value) {
+                inputref.value.focus();
+            }
         }
     }
 
     function focusOn(e) {
-        focused.value = true;
+        if (!disabled.value) {
+            focused.value = true;
+        }
     }
 
     function focusOff(e) {
@@ -126,6 +137,12 @@
         }, 200);
     }
 
+    function closeIfOpen() {
+        if (focused.value && containerref.value) {
+            containerref.value.blur();
+        }
+    }
+
     const computedClass = computed(() => {
         return (props.cssClass || '') + (focused.value ? ' open' : '') + (props.invalid ? ' error' : '');
     });
@@ -144,5 +161,6 @@
     defineExpose({
         focusInput,
         focusSearchInput,
+        setValueFromExternal,
     });
 </script>