@awes-io/ui 2.70.0 → 2.71.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/1_atoms/AwTitle.vue

@@ -0,0 +1,18 @@
+<template>
+    <Component :is="tag" class="aw-title">
+        <slot />
+    </Component>
+</template>
+
+<script>
+export default {
+    name: 'AwTitle',
+
+    props: {
+        tag: {
+            type: String,
+            default: 'h2'
+        }
+    }
+}
+</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/AwAddressBlock.vue

@@ -375,11 +375,3 @@ export default {
     }
 }
 </script>
-
-<style lang="postcss" scoped>
-.aw-address-block .edit-button {
-    @screen md {
-        @apply absolute top-0 right-0;
-    }
-}
-</style>

package/components/3_organisms/AwBottomBar.vue

@@ -27,9 +27,10 @@
                             class="aw-icon-menu-item__icon"
                             :size="$options.ICON_SIZE"
                         />
-                    </span>
-                    <span class="aw-icon-menu-item__text">
-                        {{ text }}
+
+                        <span class="aw-icon-menu-item__text">
+                            {{ text }}
+                        </span>
                     </span>
                 </template>
             </AwMenuItemIcon>
@@ -77,9 +78,8 @@ export default {
                     ...button,
                     listeners: {
                         ...button.listeners,
-                        click: () => this.$root.$emit(
-                            'awes-io::bottom-bar-action:click'
-                        )
+                        click: () =>
+                            this.$root.$emit('awes-io::bottom-bar-action:click')
                     }
                 }
             }

package/components/3_organisms/AwContextMenu.vue

@@ -20,7 +20,12 @@ export default {
             default: ''
         },
 
-        vertical: Boolean
+        vertical: Boolean,
+
+        text: {
+            type: String,
+            default: ''
+        }
     },
 
     render(h) {
@@ -73,9 +78,9 @@ export default {
                 theme: 'ghost',
                 color: 'default',
                 contentClass: 'p-2',
-                text: this.$t('More')
+                text: this.text
             },
-            staticClass: 'h-10 ' + this.buttonClass,
+            staticClass: 'h-10 w-auto ' + this.buttonClass,
             attrs: {
                 'data-arrow-focus': ''
             },

package/components/3_organisms/AwGmap.vue

@@ -119,9 +119,3 @@ export default {
     }
 }
 </script>
-
-<style lang="postcss">
-.aw-gmap .aw-gmap__map {
-    height: 300px;
-}
-</style>

package/components/3_organisms/AwModal.vue

@@ -34,11 +34,11 @@
                             @click.prevent="close()"
                             theme="ghost"
                             color="default"
-                            content-class="p-2"
                             tabindex="0"
+                            content-class="p-0"
                         >
                             <template #icon>
-                                <AwIconSystemMono name="close" />
+                                <AwIconSystemMono name="close" size="16" />
                             </template>
                         </AwButton>
                     </div>

package/components/4_pages/AwPageMenuButtons.vue

@@ -6,6 +6,7 @@
             class="aw-page-menu-buttons__aw-context-menu"
             vertical
             :options="$options.dropdownOptions"
+            :text="$t('More')"
         >
             <AwDropdownButton
                 v-for="({ listeners, tooltip, iconSize, ...attrs },

package/components/4_pages/_AwPageHeadline.vue

@@ -6,13 +6,13 @@
                 <AwButton
                     v-if="backUrl"
                     color="mono"
-                    content-class="px-2"
                     class="w-10 h-10 aw-page-headline__back"
                     :href="backUrl"
                     :aria-label="breadcrumb.title"
+                    content-class="p-0"
                 >
                     <template #icon>
-                        <AwIconSystemMono name="angle" size="16" />
+                        <AwIconSystemMono name="arrow-l" size="24" />
                     </template>
                 </AwButton>
             </slot>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@awes-io/ui",
-    "version": "2.70.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": "3fd940536b101cc0a6aba3a0d832788a1a3c809f"
+    "gitHead": "06094c5bdf9e8a6364d6382df3d9b095e61e06bc"
 }