@awes-io/ui 2.71.0 → 2.72.0

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.72.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.71.1...@awes-io/ui@2.72.0) (2023-09-19)
+
+
+### Bug Fixes
+
+* **aw-file:** bind all attrs to input ([7cb6690](https://github.com/awes-io/client/commit/7cb66900c5fe33305f89f9b86a27c4b7e23baaef))
+
+
+### Features
+
+* change styles and logic in components ([9888bed](https://github.com/awes-io/client/commit/9888bed0290beb06b656bfd12f9493a72c149428))
+
+
+
+
+
+## [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/button-nav.css

@@ -22,11 +22,11 @@
     }
 
     &__toggler {
-        @apply px-0 font-bold tracking-widest;
+        @apply font-bold tracking-widest;
 
         position: relative;
         flex-shrink: 0;
-        padding: 0 theme('spacing.1');
+        padding: 0;
         min-width: theme('spacing.8');
         white-space: nowrap;
 

package/assets/css/components/button.css

@@ -443,10 +443,6 @@
         @apply opacity-90;
     }
 
-    &.theme-outline > &__overlay {
-        @apply rounded-none;
-    }
-
     /* System */
     &.theme-system {
         @apply text-mono-400;

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

@@ -5,18 +5,6 @@
         padding: 0;
     }
 
-    & > .aw-button.theme-ghost {
-         border-radius: 0.9375rem;
-         width: auto;
-         height: 3rem;
-
-        .aw-button__content_md {
-            width: auto;
-            height: 3rem;
-            padding: 0.5rem;
-        }
-    }
-
     &--highlight {
         .aw-button.theme-icon {
             background: var(--c-mono-800);
@@ -32,16 +20,3 @@
         }
     }
 }
-
-@screen lg {
-    .aw-context-menu {
-        & > .aw-button.theme-ghost {
-            border-radius: 0.625rem;
-            height: 2.5rem;
-
-            .aw-button__content_md {
-                height: 2.5rem;
-            }
-        }
-    }
-}

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/mobile-menu-item-new.css

@@ -32,7 +32,8 @@
          display: block;
          font-weight: 400;
          color: var(--c-mono-400);
-         font-size: theme('fontSize.xs', 0.75rem);
+         font-size: 0.875rem;
+         line-height: 1rem;
          margin-top: 0.25rem;
     }
 

package/assets/css/components/mobile-menu-item.css

@@ -37,7 +37,8 @@
 
     &__description {
         color: var(--c-mono-400);
-        font-size: theme('fontSize.xs', 0.75rem);
+        font-size: 0.875rem;
+        line-height: 1rem;
     }
 
     &__arrow {

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

@@ -50,7 +50,8 @@
         padding: 1.5rem;
 
         position: relative;
-        border-radius: 1.25rem;
+        border-top-right-radius: 1.25rem;
+        border-top-left-radius: 1.25rem;
 
         &:after {
              @apply bg-mono-900;

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

@@ -115,6 +115,19 @@
     }
 }
 
+:root[data-dark="false"] {
+    .aw-page-headline {
+        &__back {
+             background: var(--c-mono-800);
+             color: var(--c-on-mono-800);
+
+            &:hover {
+                 background: var(--c-mono-700);
+            }
+        }
+    }
+}
+
 :root[data-dark="true"] {
     .aw-page-headline {
         &__back {

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/assets/css/components/user-menu.css

@@ -71,8 +71,6 @@
         color: var(--c-on-surface);
         min-width: 250px;
         max-height: auto;
-        box-shadow: theme('boxShadow.default');
-        border-radius: theme('borderRadius.md');
 
         &.aw-dropdown--desktop {
             max-width: 17.625rem;

package/components/1_atoms/AwFile.vue

@@ -10,6 +10,8 @@
 export default {
     name: 'AwFile',
 
+    inheritAttrs: false,
+
     methods: {
         loadFile($event) {
             const files = [...$event.target.files]

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/components/3_organisms/AwContextMenu.vue

@@ -77,10 +77,9 @@ export default {
             props: {
                 theme: 'ghost',
                 color: 'default',
-                contentClass: 'p-2',
                 text: this.text
             },
-            staticClass: 'h-10 w-auto ' + this.buttonClass,
+            staticClass: this.buttonClass,
             attrs: {
                 'data-arrow-focus': ''
             },

package/components/3_organisms/AwModal.vue

@@ -69,7 +69,7 @@
 
                     <div
                         v-if="$scopedSlots.buttons"
-                        :class="[elClasses.buttons, 'aw-button-group']"
+                        :class="[elClasses.buttons]"
                     >
                         <slot name="buttons"></slot>
                     </div>

package/components/5_layouts/AwLayoutProvider.vue

@@ -229,7 +229,7 @@ export default {
 
                     return acc.concat({
                         ...pick(
-                            'icon,iconBg,iconActive,class,expanded,target,rel,listeners,abstract,key,badge,back',
+                            'icon,iconBg,iconActive,class,expanded,target,rel,listeners,abstract,key,badge,back,isDivide',
                             props
                         ),
                         text,

package/components/5_layouts/_AwMobileMenuItem.vue

@@ -20,7 +20,7 @@
             </span>
 
             <span class="aw-mobile-menu-item__text" tabindex="-1">
-                {{ text }}
+                <span v-html="text" />
 
                 <span
                     v-if="description"

package/components/5_layouts/_AwMobileMenuItemNew.vue

@@ -23,7 +23,13 @@
                 {{ text }}
 
                 <span
-                    v-if="childrenDescription"
+                    v-if="description"
+                    v-html="$sanitize(description)"
+                    class="aw-mobile-menu-item-new__description"
+                ></span>
+
+                <span
+                    v-else-if="childrenDescription"
                     class="aw-mobile-menu-item-new__description"
                 >
                     {{ childrenDescription }}

package/components/5_layouts/_AwMobileMenuNav.vue

@@ -16,9 +16,13 @@
                 <li v-for="(item, i) in items" :key="i" v-show="!item.abstract">
                     <AwMobileMenuItem
                         v-bind="item"
-                        :class="{
-                            'aw-mobile-menu-nav__item--divide': item.isDivide
-                        }"
+                        :class="[
+                            item.class,
+                            {
+                                'aw-mobile-menu-nav__item--divide':
+                                    item.isDivide && i !== items.length - 1
+                            }
+                        ]"
                         :href="_getChildrenCount(item) ? null : item.href"
                         :arrow="!!(item.href || _getChildrenCount(item))"
                         :active="isActive(item)"

package/components/5_layouts/_AwUserMenu.vue

@@ -77,7 +77,8 @@
                             :name="item.icon"
                             class="mr-2"
                         />
-                        {{ item.text }}
+
+                        <span v-html="item.text" />
                     </AwNavItem>
                 </template>
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@awes-io/ui",
-    "version": "2.71.0",
+    "version": "2.72.0",
     "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": "74d401ffcbf4bd9871a13dffddac961b8d5dabc5"
 }