@awes-io/ui 2.71.1 → 2.73.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.73.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.72.0...@awes-io/ui@2.73.0) (2023-09-29)
+
+
+### Features
+
+* change styles in components ([603d7a8](https://github.com/awes-io/client/commit/603d7a8ed86e548446afe5b656821ed0e34c528c))
+
+
+
+
+
+# [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)
 
 

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/calendar.css

@@ -67,7 +67,7 @@
         border-radius: 50%;
     }
 
-    &__day_active:not(&__day_outside) > span {
+    &__day_active > span {
         @apply bg-success;
         font-weight: bold;
     }

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/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

@@ -4,6 +4,7 @@
     display: flex;
     align-items: center;
     width: 100%;
+    padding: 1.5rem;
 
     &:hover,
     &:focus {
@@ -17,11 +18,9 @@
     }
 
     &__icon-bg {
-        margin-left: 1.25rem;
-        margin-right: -1rem;
-        padding: 0.1875rem;
         border-radius: 0.3125rem;
         line-height: 1;
+        flex: none;
     }
 
     /* &__icon {} */
@@ -30,18 +29,18 @@
         display: flex;
         flex-direction: column;
         justify-content: center;
-        min-height: 3.375rem;
-        padding: 0.5rem 0.5rem 0.5rem 1.875rem;
+        padding: 0 1rem;
         flex-grow: 1;
     }
 
     &__description {
         color: var(--c-mono-400);
-        font-size: theme('fontSize.xs', 0.75rem);
+        font-size: 0.875rem;
+        line-height: 1rem;
     }
 
     &__arrow {
-        margin: 0.75rem 1.875rem 0.75rem 0;
         color: var(--c-on-surface);
+        flex: none;
     }
 }

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

@@ -21,7 +21,7 @@
         position: relative;
 
         &:before {
-            @apply bg-mono-900;
+            @apply bg-mono-800;
             content: '';
             display: block;
             height: 1px;

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

@@ -50,10 +50,11 @@
         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;
+             @apply bg-mono-800;
              content: '';
              display: block;
              height: 1px;

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/switch-field.css

@@ -23,7 +23,7 @@
         }
 
         &:focus {
-            @apply border-info;
+            @apply border-accent;
             outline: none;
         }
 

package/assets/css/components/table.css

@@ -144,7 +144,7 @@
 
         &--mobile {
             display: block;
-            padding: 0.5rem 0;
+            padding: 1.5rem;
 
             &:hover {
                 background: inherit;
@@ -157,7 +157,7 @@
         &--mobile {
             display: flex;
             justify-content: space-between;
-            padding: theme('spacing.2', 0.5rem);
+            padding: 0.5rem 0;
 
             &:nth-of-type(2n + 1) {
                 background: none;

package/assets/css/components/tooltip.css

@@ -53,3 +53,10 @@
         left: -4px;
     }
 }
+
+:root[data-dark="true"] {
+    .aw-tooltip {
+        background-color: var(--c-surface);
+        color: rgba(var(--c-on-surface-rgb), 0.9);
+    }
+}

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;
@@ -83,16 +81,20 @@
     &__nav-item {
         @apply bg-surface;
         padding: 1rem;
-        display: block;
+        display: flex;
+        align-items: center;
         width: 100%;
 
         font-size: 1rem;
         line-height: 1.3125rem;
         font-weight: 400;
 
+        white-space: nowrap;
+
         svg {
             width: 1.5rem;
             height: 1.5rem;
+            flex: none;
         }
 
         &:focus {
@@ -104,5 +106,10 @@
         &--active {
             background-color: var(--c-mono-900);
         }
+
+        &-text {
+            text-overflow: ellipsis;
+            overflow: hidden;
+        }
     }
 }

package/assets/js/icons/mono.js

@@ -24,7 +24,7 @@ export default {
         'M1 10a2 2 0 114 0 2 2 0 01-4 0zm7 0a2 2 0 114 0 2 2 0 01-4 0zm7 0a2 2 0 114 0 2 2 0 01-4 0z',
     triangle: 'M5 7h10l-5 5z',
     external:
-        'M6.67 5a1.25 1.25 0 1 0 0 2.5h4.48l-5.78 5.78a1.25 1.25 0 1 0 1.76 1.77l5.78-5.78v4.48a1.25 1.25 0 1 0 2.5 0v-7.5c0-.7-.56-1.25-1.25-1.25h-7.5Z',
+        'M17.5 1.7h-5a.8.8 0 1 0 0 1.6h3l-7 7a.8.8 0 1 0 1.3 1.1l6.9-6.9v3a.8.8 0 1 0 1.6 0v-5a.8.8 0 0 0-.8-.8Z M15.8 8.8a.8.8 0 0 0-.8.9v6a1 1 0 0 1-1 1H4.4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h5.2a.8.8 0 1 0 0-1.7H4.4A2.7 2.7 0 0 0 1.7 6v9.6a2.7 2.7 0 0 0 2.7 2.7H14a2.7 2.7 0 0 0 2.7-2.7v-6a.8.8 0 0 0-.9-.8Z',
     edit:
         'M11.7 5.34l2.85 2.86-7.2 7.24-2.85-2.86 7.2-7.24zm5.01-.7l-1.27-1.27c-.49-.5-1.28-.5-1.78 0l-1.21 1.22 2.85 2.86 1.41-1.42c.39-.38.39-1 0-1.38zM3.01 16.6c-.05.24.16.45.39.4l3.17-.78-2.84-2.86L3 16.6z',
     'info-circle':

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/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,arrow',
                             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"
@@ -34,6 +34,7 @@
             <AwIconSystemMono
                 v-if="_linkExternal"
                 name="external"
+                size="24"
                 class="aw-mobile-menu-item__arrow"
             />
 

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,11 +16,15 @@
                 <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))"
+                        :arrow="checkShowArrow(item)"
                         :active="isActive(item)"
                         v-on="
                             _getChildrenCount(item)
@@ -44,7 +48,7 @@
 </template>
 
 <script>
-import { viewOr, lensProp } from 'rambdax'
+import { viewOr, lensProp, isNil } from 'rambdax'
 import AwMobileMenuItem from '@AwLayouts/_AwMobileMenuItem.vue'
 
 export default {
@@ -88,6 +92,12 @@ export default {
             return item.children ? item.children.length : 0
         },
 
+        checkShowArrow(item) {
+            return isNil(item.arrow)
+                ? !!(item.href || this._getChildrenCount(item))
+                : item.arrow
+        },
+
         isActive(item) {
             return this._getChildrenCount(item)
                 ? item.children.some((child) =>

package/components/5_layouts/_AwNavItem.vue

@@ -1,7 +1,12 @@
 <template>
     <Component :is="_linkComponent" v-bind="_linkAttrs" v-on="$listeners">
         <slot />
-        <AwIconSystemMono v-if="_linkExternal" name="external" class="ml-1" />
+
+        <AwIconSystemMono
+            v-if="_linkExternal && !hideExternalIcon"
+            name="external"
+            class="ml-1"
+        />
     </Component>
 </template>
 
@@ -11,6 +16,10 @@ import linkMixin from '@AwMixins/link'
 export default {
     name: 'AwNavItem',
 
-    mixins: [linkMixin]
+    mixins: [linkMixin],
+
+    props: {
+        hideExternalIcon: Boolean
+    }
 }
 </script>

package/components/5_layouts/_AwUserMenu.vue

@@ -71,13 +71,18 @@
                         ]"
                         class="aw-user-menu__nav-item"
                         v-on="item.listeners || null"
+                        hide-external-icon
                     >
                         <AwIcon
                             v-if="item.icon"
                             :name="item.icon"
                             class="mr-2"
                         />
-                        {{ item.text }}
+
+                        <span
+                            class="aw-user-menu__nav-item-text"
+                            v-html="item.text"
+                        />
                     </AwNavItem>
                 </template>
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@awes-io/ui",
-    "version": "2.71.1",
+    "version": "2.73.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": "06094c5bdf9e8a6364d6382df3d9b095e61e06bc"
+    "gitHead": "7082e9cda8b1588e4a644c5d802a1819c982de83"
 }