@awes-io/ui 2.71.0 → 2.71.1

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.71.1](https://github.com/awes-io/client/compare/@awes-io/ui@2.71.0...@awes-io/ui@2.71.1) (2023-09-11)
+
+
+### Bug Fixes
+
+* menu styles updated ([febfcaf](https://github.com/awes-io/client/commit/febfcaf2c93d0ecbf17501faed24b277013163b0))
+
+
+
+
+
 # [2.71.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.70.0...@awes-io/ui@2.71.0) (2023-09-08)
 
 

package/assets/css/components/layout-menu.css

@@ -2,7 +2,7 @@
     @apply bg-surface;
 
     display: grid;
-    grid-template-columns: 72px auto;
+    grid-template-columns: 4.5rem auto;
     grid-template-rows: 80px minmax(0, 2fr) minmax(0, 1fr) 80px minmax(0, auto);
 
     z-index: 4;

package/assets/css/components/layout.css

@@ -3,7 +3,7 @@
     flex-direction: column;
 
     &__aw-layout-menu {
-        max-width: 290px;
+        max-width: 300px;
         height: 100vh;
 
         flex-shrink: 0;
@@ -16,17 +16,17 @@
         bottom: 0;
 
         &.aw-layout-menu--no-submenu {
-            max-width: 60px;
+            max-width: 4.5rem;
         }
 
         & ~ * {
-            max-width: calc(100% - 290px);
-            margin-left: 290px;
+            max-width: calc(100% - 300px);
+            margin-left: 300px;
         }
 
         &.aw-layout-menu--no-submenu ~ * {
-            max-width: calc(100% - 60px);
-            margin-left: 60px;
+            max-width: calc(100% - 4.5rem);
+            margin-left: 4.5rem;
         }
     }
 }

package/assets/css/components/sub-headline.css

@@ -1,4 +1,4 @@
-.aw-subheadline {
+.aw-sub-headline {
     @apply font-heading;
 
     font-weight: bold;

package/assets/css/components/text-field.css

@@ -6,18 +6,18 @@
     border-radius: 0.625rem;
 
     &:focus-within {
-         @apply border-mono-400;
+        @apply border-mono-400;
     }
 
     & > div:first-child:not(.aw-tooltip),
     & > span:first-child:not(.aw-tooltip) {
-          border-top-left-radius: 0.625rem;
-          border-bottom-left-radius: 0.625rem;
+        border-top-left-radius: 0.625rem;
+        border-bottom-left-radius: 0.625rem;
     }
 
     & > div:last-child {
-         border-top-right-radius: 0.625rem;
-         border-bottom-right-radius: 0.625rem;
+        border-top-right-radius: 0.625rem;
+        border-bottom-right-radius: 0.625rem;
     }
 
     &.has-label::before {
@@ -76,7 +76,7 @@
 
         &::placeholder {
             color: inherit;
-            opacity: .5;
+            opacity: 0.5;
         }
     }
 
@@ -89,6 +89,77 @@
         max-width: calc(100% - calc(var(--icon-count) * var(--icon-width)));
     }
 
+    /**
+     * Native select styles
+     */
+    &.is-select,
+    &.is-select &__element {
+        cursor: pointer;
+        position: relative;
+        z-index: 1;
+        background-color: transparent;
+    }
+
+    &__caret {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        opacity: 0.4;
+        transition: 200ms opacity;
+
+        position: absolute;
+        right: 0;
+        top: 0;
+        bottom: 0;
+
+        & > svg {
+            transition: 200ms transform;
+        }
+    }
+
+    &:hover &__caret {
+        opacity: 1;
+    }
+
+    &.is-select &__element:focus ~ &__caret > svg {
+        transform: rotate(-180deg);
+    }
+
+    &.is-select {
+        select::-webkit-scrollbar {
+            width: 12px;
+            height: 12px;
+            background-color: var(--c-surface);
+        }
+
+        select::-webkit-scrollbar-thumb {
+            background-color: rgba(var(--c-on-surface-rgb), 0.1);
+        }
+
+        option {
+            background: var(--c-surface)
+                linear-gradient(
+                    0deg,
+                    var(--c-surface) 0%,
+                    var(--c-surface) 100%
+                );
+            color: var(--c-on-surface);
+        }
+
+        option:hover {
+            background: var(--c-info)
+                linear-gradient(0deg, var(--c-info) 0%, var(--c-info) 100%);
+            color: var(--c-on-info);
+        }
+
+        option:checked {
+            background: var(--c-accent)
+                linear-gradient(0deg, var(--c-accent) 0%, var(--c-accent) 100%);
+            color: var(--c-on-accent);
+        }
+    }
+
     /**
      * Textarea styles
      */
@@ -113,7 +184,7 @@
     }
 
     &.is-tel .vue-tel-input {
-         border-radius: 0.625rem;
+        border-radius: 0.625rem;
 
         .vti__dropdown {
             border-top-left-radius: 0.625rem;
@@ -132,8 +203,8 @@
             opacity: 0;
         }
 
-        &:not([readonly]):focus::placeholder  {
-            opacity: .5;
+        &:not([readonly]):focus::placeholder {
+            opacity: 0.5;
         }
     }
 
@@ -164,7 +235,6 @@
         transform: scale(0.67) translateY(-50%);
     }
 
-
     /**
      * Icon styles
      */
@@ -174,7 +244,7 @@
     }
 
     &.has-icon &__label {
-        max-width: calc(100% - theme('spacing.12'))
+        max-width: calc(100% - theme('spacing.12'));
     }
 
     &__icon {
@@ -188,7 +258,6 @@
         fill: currentColor;
     }
 
-
     /**
      * Error styles
      */
@@ -217,7 +286,6 @@
         @apply rounded-r-none;
     }
 
-
     /**
      * Disabled style
      */
@@ -226,7 +294,7 @@
     &__element[disabled] + &__label {
         cursor: not-allowed;
         user-select: none;
-        opacity: .5;
+        opacity: 0.5;
     }
 
     &.is-disabled {
@@ -238,22 +306,24 @@
     }
 }
 
-.is-disabled .aw-text-field__fake-input { opacity: 0.5 }
+.is-disabled .aw-text-field__fake-input {
+    opacity: 0.5;
+}
 
 @keyframes autoFillStart {
     from {
-        opacity: 1
+        opacity: 1;
     }
     to {
-        opacity: 1
+        opacity: 1;
     }
 }
 
 @keyframes autoFillEnd {
     from {
-        opacity: 1
+        opacity: 1;
     }
     to {
-        opacity: 1
+        opacity: 1;
     }
 }

package/components/1_atoms/AwSelectNative.vue

@@ -0,0 +1,151 @@
+<template>
+    <div class="flex aw-text-field is-select" :class="wrapperClasses">
+        <div v-if="prefix || $scopedSlots.prefix" class="aw-text-field__prefix" :class="{ 'px-4': prefix }">
+            <slot name="prefix">{{ prefix }}</slot>
+        </div>
+
+        <div class="relative w-full">
+            <select
+                :id="id || defaultId"
+                ref="element"
+                v-model="selected"
+                v-tooltip.show.prepend="errorTooltip"
+                class="aw-text-field__element"
+                :class="size === 'md' ? 'p-3' : 'p-2'"
+                v-bind="$attrs"
+            >
+                <option v-for="(option, i) in options" :key="i" :value="_getOptionValue(option)" :disabled="optionDisabled(option)">
+                    {{ _getOptionLabel(option) }}
+                </option>
+            </select>
+            <label
+                v-if="!!label || $scopedSlots.label"
+                :for="id || defaultId"
+                class="aw-text-field__label"
+                :class="{ 'aw-text-field__label--required': isRequired }"
+            >
+                <slot name="label">
+                    {{ label }}
+                </slot>
+            </label>
+
+            <div class="aw-text-field__caret pl-2 pr-4">
+                <AwIcon name="triangle-d" size="12" />
+            </div>
+        </div>
+
+        <div v-if="postfix || $scopedSlots.postfix" class="aw-text-field__postfix" :class="{ 'px-4': postfix }">
+            <slot name="prefix">{{ postfix }}</slot>
+        </div>
+    </div>
+</template>
+
+<script>
+import { path } from 'rambdax'
+import fieldMixin from '@AwMixins/field'
+import errorMixin from '@AwMixins/error'
+
+const itself = (val) => val
+
+export default {
+    name: 'AwSelectNative',
+
+    mixins: [fieldMixin, errorMixin],
+
+    inheritAttrs: false,
+
+    props: {
+        options: {
+            type: Array,
+            default: () => []
+        },
+
+        value: {
+            type: [String, Number, Object],
+            default: null
+        },
+
+        optionLabel: {
+            type: [String, Function],
+            default: ''
+        },
+
+        optionDisabled: {
+            type: Function,
+            default: () => false
+        },
+
+        trackBy: {
+            type: [String, Function],
+            default: ''
+        },
+
+        size: {
+            type: String,
+            default: 'md'
+        },
+
+        prefix: {
+            type: String,
+            default: ''
+        },
+
+        postfix: {
+            type: String,
+            default: ''
+        }
+    },
+
+    computed: {
+        _getOptionLabel() {
+            return this._generateGetterFunction(this.optionLabel)
+        },
+
+        _getOptionValue() {
+            return this._generateGetterFunction(this.trackBy)
+        },
+
+        selected: {
+            get() {
+                return this.value
+            },
+
+            set(val) {
+                if (this.hasError) {
+                    this.setError('')
+                }
+
+                this.$emit('input', val)
+            }
+        },
+
+        _isFilled() {
+            return this.options.some((option) => this.value === this._getOptionValue(option))
+        },
+
+        wrapperClasses() {
+            return {
+                'is-filled': this._isFilled,
+                'has-label': !!this.label,
+                'has-error': this.hasError,
+                'is-disabled': this.isDisabled,
+                'has-prefix': this.prefix,
+                'has-postfix': this.postfix
+            }
+        }
+    },
+
+    methods: {
+        _generateGetterFunction(arg) {
+            switch (typeof arg) {
+                case 'function':
+                    return arg
+                case 'string':
+                    return arg.length ? path(arg) : itself
+                default:
+                    return itself
+            }
+        }
+    }
+}
+</script>

package/components/2_molecules/AwDescriptionInput.vue

@@ -0,0 +1,19 @@
+<template>
+    <div>
+        <slot />
+        <AwDescription v-if="text != ''" class="mt-2 inline-block" v-html="text" />
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'AwDescriptionInput',
+
+    props: {
+        text: {
+            type: String,
+            default: ''
+        }
+    }
+}
+</script>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@awes-io/ui",
-    "version": "2.71.0",
+    "version": "2.71.1",
     "description": "User Interface (UI) components",
     "keywords": [
         "ui",
@@ -112,5 +112,5 @@
         "rollup-plugin-visualizer": "^2.6.0",
         "rollup-plugin-vue": "^5.0.1"
     },
-    "gitHead": "0182a87e39c612296631ac487c64d7453af8fd2a"
+    "gitHead": "06094c5bdf9e8a6364d6382df3d9b095e61e06bc"
 }