@awes-io/ui 2.29.0 → 2.31.0

package/CHANGELOG.md

@@ -3,6 +3,73 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.31.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.30.0...@awes-io/ui@2.31.0) (2021-10-21)
+
+
+### Bug Fixes
+
+* bump version ([ed4612a](https://github.com/awes-io/client/commit/ed4612ad6f81c698a06590c91356c0a47be87f81))
+
+
+### Features
+
+* bump version ([dc0250d](https://github.com/awes-io/client/commit/dc0250d3b671a7df341ea5e6bb8d752577011c0f))
+
+
+
+
+
+# [2.30.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.29.3...@awes-io/ui@2.30.0) (2021-10-21)
+
+
+### Bug Fixes
+
+* **aw-modal:** overlay-aside animation fixed ([cd4e960](https://github.com/awes-io/client/commit/cd4e960f377af53df9f20492c857667baf636ba0))
+* **aw-select-object:** do not encode search param ([4141879](https://github.com/awes-io/client/commit/41418793d0e3f3dd732155867b35ec9b98753333))
+* sanitize v-html ([95ecf78](https://github.com/awes-io/client/commit/95ecf78cd95e9e8cab96d81e9fa0697a1e86e3bc))
+
+
+### Features
+
+* **aw-select:** disabling options added ([a83da1a](https://github.com/awes-io/client/commit/a83da1a0986d081f036ac4ce92ed7d9cc528105b))
+
+
+
+
+
+## [2.29.3](https://github.com/awes-io/client/compare/@awes-io/ui@2.29.2...@awes-io/ui@2.29.3) (2021-10-18)
+
+
+### Bug Fixes
+
+* updated aw-search ([ac88aca](https://github.com/awes-io/client/commit/ac88acaa0e003e36c67ae5ac94450795dda7bf00))
+
+
+
+
+
+## [2.29.2](https://github.com/awes-io/client/compare/@awes-io/ui@2.29.1...@awes-io/ui@2.29.2) (2021-10-18)
+
+
+### Bug Fixes
+
+* updated field for the search ([22d1a98](https://github.com/awes-io/client/commit/22d1a98d27ecee9070e709112242930eff3223c0))
+
+
+
+
+
+## [2.29.1](https://github.com/awes-io/client/compare/@awes-io/ui@2.29.0...@awes-io/ui@2.29.1) (2021-10-14)
+
+
+### Bug Fixes
+
+* **aw-description:** tag is span by default ([3441b5a](https://github.com/awes-io/client/commit/3441b5ac609224cb3ea5963915c9868f48c2317a))
+
+
+
+
+
 # [2.29.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.28.2...@awes-io/ui@2.29.0) (2021-10-04)
 
 

package/assets/css/components/_index.css

@@ -8,6 +8,7 @@
 @import './avatar.css';
 @import './banner-text.css';
 @import './badge.css';
+@import './birthday-picker.css';
 @import './button.css';
 @import './button-nav.css';
 
@@ -71,6 +72,7 @@
 
 @import './select.css';
 
+@import './userpic.css';
 @import './uploader.css';
 
 /* last because of @keyframes lowers performance */

package/assets/css/components/birthday-picker.css

@@ -0,0 +1,18 @@
+.aw-birthday-picker {
+    &__wrap {
+        display: flex;
+        align-items: center;
+        gap: theme('spacing.4', 1rem);
+    }
+
+    &__day {
+        min-width: 5rem;
+        flex-basis: 20%;
+    }
+
+    &__month,
+    &__year {
+        min-width: 5rem;
+        flex-basis: 40%;
+    }
+}

package/assets/css/components/dropdown-button.css

@@ -29,6 +29,11 @@
             @apply bg-mono-800;
         }
     }
+
+    &[disabled] > span {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
 }
 
 @screen md {

package/assets/css/components/modal.css

@@ -435,7 +435,7 @@ $modal-t-dur: 250ms;
             transform: none;
 
             .aw-modal__dialog {
-                transform: translateX(100%);
+                transform: translateX(95%);
             }
         }
 

package/assets/css/components/select.css

@@ -105,6 +105,16 @@
             left: 0;
             right: 0;
             z-index: 120;
+
+            &::-webkit-scrollbar {
+                background-color: transparent;
+                height: 0.5rem;
+                width: 0.5rem;
+            }
+
+            &::-webkit-scrollbar-thumb {
+                background-color: rgba(var(--c-on-surface-rgb), 0.1);
+            }
         }
     }
 }

package/assets/css/components/table.css

@@ -133,6 +133,10 @@
         align-items: center;
         padding: 0;
         margin-bottom: theme('spacing.4', 1rem);
+
+        &:last-child {
+            margin-bottom: 0;
+        }
     }
 
     &__mobile-header-content {

package/assets/css/components/userpic.css

@@ -0,0 +1,30 @@
+.aw-userpic {
+    display: flex;
+    align-items: center;
+
+    &--crop {
+        max-width: 14rem;
+    }
+
+    &__content {
+        display: flex;
+        flex-direction: column;
+        min-width: 0;
+        margin-left: theme('spacing.2', 0.5rem);
+
+        &--with-description {
+
+            font-size: theme('fontSize.sm', 0.875rem);
+        }
+    }
+
+    &__name {
+        min-width: 0;
+    }
+
+    &__description {
+        color: var(--c-mono-400);
+        line-height: 1;
+        min-width: 0;
+    }
+}

package/assets/js/string.js

@@ -1,4 +1,5 @@
-import { split, reduce } from 'rambdax'
+import insane from 'insane'
+import { split, reduce, clone } from 'rambdax'
 
 export const ucFirst = (text = '') => {
     return text.charAt(0).toUpperCase() + text.substr(1)
@@ -34,3 +35,56 @@ export const hashStringToIndex = (str, limit) => {
 
     return hash
 }
+
+export const SANITIZE_DEFAULTS = {
+    allowedAttributes: {
+        a: ['href', 'name', 'target', 'class', 'style'],
+        iframe: ['allowfullscreen', 'frameborder', 'src', 'class', 'style'],
+        img: [
+            'src',
+            'alt',
+            'srcset',
+            'sizes',
+            'width',
+            'height',
+            'class',
+            'style'
+        ],
+        button: ['class', 'id', 'style'],
+        allowedTags: [
+            'a',
+            'b',
+            'br',
+            'del',
+            'div',
+            'em',
+            'i',
+            'img',
+            'ins',
+            'kbd',
+            'li',
+            'ol',
+            'p',
+            'span',
+            'strike',
+            'strong',
+            'sub',
+            'sup',
+            'u',
+            'ul'
+        ]
+    }
+}
+
+export const getSanitizer = (options, strict = false) => {
+    let _options = clone(options)
+
+    if (!strict) {
+        _options = { ...SANITIZE_DEFAULTS, ..._options }
+    }
+
+    return (html) => (typeof html === 'string' ? insane(html, _options) : html)
+}
+
+export const sanitize = (html) =>
+    typeof html === 'string' ? insane(html, SANITIZE_DEFAULTS) : html

package/components/1_atoms/AwDescription.vue

@@ -5,13 +5,20 @@
 </template>
 
 <script>
+import { conf } from '@AwUtils/component'
+import { AwDescription as _config } from '@AwConfig'
+
 export default {
     name: 'AwDescription',
 
+    _config,
+
     props: {
         tag: {
             type: String,
-            default: 'p'
+            default() {
+                return conf(this, 'tag')
+            }
         }
     }
 }

package/components/1_atoms/AwLabel.vue

@@ -27,7 +27,7 @@
                 class="inline mr-1"
             />
 
-            <slot v-html="label">{{ label }}</slot>
+            <slot>{{ label }}</slot>
 
             <component
                 :is="_iconSecondComponent"

package/components/2_molecules/AwSelect.vue

@@ -192,13 +192,20 @@
                 <!-- options list -->
                 <template v-if="optionsList.length && _isEditingOptions">
                     <AwDropdownButton
-                        v-for="({ optionLabel, optionValue, index, active },
+                        v-for="({
+                            optionLabel,
+                            optionValue,
+                            index,
+                            active,
+                            disabled
+                        },
                         i) in optionsList"
                         :key="`${optionLabel}-${index}`"
                         :active="active"
                         :data-select-index="index"
                         :data-selected="active ? '' : null"
                         :data-value="optionValue"
+                        :disabled="disabled"
                         tabindex="-1"
                         data-arrow-focus
                     >
@@ -244,6 +251,7 @@ import CancelToken from 'axios/lib/cancel/CancelToken'
 import isCancel from 'axios/lib/cancel/isCancel'
 import arrowFocusMixin from '@AwMixins/arrow-focus'
 import { TEST_ID_ATTR } from '@AwUtils/constants'
+import { sanitize } from '@AwUtils/string'
 
 const returnSelf = (arg) => arg
 
@@ -274,6 +282,11 @@ export default {
             default: ''
         },
 
+        optionDisabled: {
+            type: Function,
+            default: () => false
+        },
+
         trackBy: {
             type: String,
             default: ''
@@ -423,6 +436,7 @@ export default {
                 const matchSerach = this._hasInternalSearch
                     ? this._matchSearch(option)
                     : true
+                const disabled = this.optionDisabled(option)
 
                 return inRange && matchSerach
                     ? acc.concat({
@@ -430,7 +444,8 @@ export default {
                           optionLabel: this._getLabel(option),
                           optionValue: this._getValue(option),
                           index,
-                          active
+                          active,
+                          disabled
                       })
                     : acc
             }, [])
@@ -654,11 +669,11 @@ export default {
 
         _highlightOption(option) {
             if (!this.searchPhrase.trim().length) {
-                return option
+                return sanitize(option)
             }
 
             try {
-                const opt = String(option)
+                const opt = String(sanitize(option))
                 const phrase = this._escapeRegExpSpecialChars(this.searchPhrase)
                 const matches = opt.match(new RegExp(phrase, 'gi'))
                 return this._addBoldTagsToString(opt, matches)

package/components/2_molecules/AwSelectObject.vue

@@ -120,13 +120,20 @@
                 <!-- options list -->
                 <template v-if="optionsList.length">
                     <AwDropdownButton
-                        v-for="({ optionLabel, optionValue, index, active },
+                        v-for="({
+                            optionLabel,
+                            optionValue,
+                            index,
+                            active,
+                            disabled
+                        },
                         i) in optionsList"
                         :key="`${optionLabel}-${index}`"
                         :active="active"
                         :data-select-index="index"
                         :data-selected="active ? '' : null"
                         :data-value="optionValue"
+                        :disabled="disabled"
                         tabindex="-1"
                         data-arrow-focus
                     >
@@ -174,6 +181,7 @@ import CancelToken from 'axios/lib/cancel/CancelToken'
 import isCancel from 'axios/lib/cancel/isCancel'
 import arrowFocusMixin from '@AwMixins/arrow-focus'
 import { TEST_ID_ATTR } from '@AwUtils/constants'
+import { sanitize } from '@AwUtils/string'
 import AwSelectInput from './_AwSelectInput.vue'
 
 const isObject = (val) => val !== null && typeof val === 'object'
@@ -211,6 +219,11 @@ export default {
             default: ''
         },
 
+        optionDisabled: {
+            type: Function,
+            default: () => false
+        },
+
         trackBy: {
             type: String,
             default: ''
@@ -339,13 +352,15 @@ export default {
                     const optionLabel = this._getLabel(option)
                     const optionValue = this._getValue(option)
                     const active = this._isActive(optionValue)
+                    const disabled = this.optionDisabled(option)
 
                     return acc.concat({
                         option,
                         optionLabel,
                         optionValue,
                         index,
-                        active
+                        active,
+                        disabled
                     })
                 } else {
                     return acc
@@ -597,9 +612,11 @@ export default {
             }
 
             try {
-                return option.replace(this._optionSearchRegEx, '<b>$&</b>')
+                return sanitize(
+                    option.replace(this._optionSearchRegEx, '<b>$&</b>')
+                )
             } catch (e) {
-                return option
+                return sanitize(option)
             }
         },
 
@@ -730,10 +747,7 @@ export default {
             this.cancellation = CancelToken.source()
 
             try {
-                let config = this.options(
-                    encodeURIComponent(this.searchPhrase),
-                    page
-                )
+                let config = this.options(this.searchPhrase, page)
 
                 if (typeof config === 'string') {
                     config = {

package/components/2_molecules/AwUserpic.vue

@@ -1,5 +1,5 @@
 <template>
-    <span class="flex items-center">
+    <span class="aw-userpic" :class="{ 'aw-userpic--crop': crop }">
         <AwAvatar
             :size="bigImage ? 36 : 22"
             :src="src"
@@ -10,17 +10,23 @@
         <slot name="name" v-bind="{ name, description }">
             <span
                 v-if="!hideName"
-                class="ml-2 flex flex-col min-w-0"
-                :class="{ 'text-sm': !!description }"
+                class="aw-userpic__content"
+                :class="{
+                    'aw-userpic__content--with-description':
+                        !!description || $scopedSlots.description
+                }"
             >
-                <span class="min-w-0 truncate">
+                <span class="aw-userpic__name" :class="{ truncate }">
                     {{ name }} <slot name="after-name" v-bind="{ name }" />
                 </span>
 
                 <slot name="description" v-bind="{ name, description }">
-                    <span class="text-mono-400 leading-none min-w-0 truncate">
+                    <AwDescription
+                        class="aw-userpic__description"
+                        :class="{ truncate }"
+                    >
                         {{ description }} <slot name="after-description" />
-                    </span>
+                    </AwDescription>
                 </slot>
             </span>
         </slot>
@@ -66,6 +72,18 @@ export default {
         bigImage: {
             type: Boolean,
             default: false
+        },
+
+        // Crop max width
+        crop: {
+            type: Boolean,
+            default: true
+        },
+
+        // Truncate title and description
+        truncate: {
+            type: Boolean,
+            default: true
         }
     },
 

package/components/3_organisms/AwBirthdayPicker.vue

@@ -1,15 +1,15 @@
 <template>
-    <AwInfo :label="label">
-        <AwGrid :col="{ md: 5 }">
+    <AwInfo :label="label" class="aw-birthday-picker">
+        <div class="aw-birthday-picker__wrap">
             <AwSelect
                 v-model="month"
-                :span="{ md: 2 }"
                 :options="monthsList"
                 :required="required"
                 :name="_inputKeys.month"
                 :label="$t('AwBirthdayPicker.month')"
                 track-by="value"
                 option-label="text"
+                class="aw-birthday-picker__month"
                 @input="checkMaxDay"
             />
 
@@ -19,10 +19,11 @@
                 :required="required"
                 :name="_inputKeys.day"
                 :label="$t('AwBirthdayPicker.day')"
+                class="aw-birthday-picker__day"
                 @input="emit"
             />
 
-            <div class="flex items-center h-full" :span="{ md: 2 }">
+            <div class="aw-birthday-picker__year">
                 <AwLink
                     v-if="!_showYear"
                     :text="$t('AwBirthdayPicker.set_year')"
@@ -42,7 +43,7 @@
                     @clear="clearYear"
                 />
             </div>
-        </AwGrid>
+        </div>
     </AwInfo>
 </template>
 

package/components/3_organisms/AwMarkdownEditor.vue

@@ -129,7 +129,7 @@ export default {
 
     computed: {
         switchers() {
-            return MODES.map(mode => this.$t(`AwMarkdownEditor.${mode}`))
+            return MODES.map((mode) => this.$t(`AwMarkdownEditor.${mode}`))
         },
 
         isPreview() {

package/components/3_organisms/AwModal.vue

@@ -11,7 +11,6 @@
         <aside
             v-show="isOpened"
             :class="[className, `is-${theme}`]"
-            :tabindex="isOpened ? '0' : '-1'"
             role="dialog"
             :aria-hidden="isOpened ? 'false' : 'true'"
             :aria-label="title"
@@ -23,7 +22,7 @@
             >
                 <div :class="elClasses.dialog" role="document">
                     <!-- header -->
-                    <div :class="elClasses.header">
+                    <div ref="header" tabindex="-1" :class="elClasses.header">
                         <div :class="elClasses.title">
                             {{ title }}
                         </div>
@@ -247,7 +246,7 @@ export default {
             if (isVisible) {
                 if (typeof document === 'undefined') return
                 this.lastFocused = document.activeElement
-                this.$nextTick(() => this.$el.focus())
+                this.$nextTick(() => this.$refs.header.focus())
                 window.addEventListener('keyup', this._escButtonHandler)
             } else {
                 window.removeEventListener('keyup', this._escButtonHandler)

package/components/3_organisms/AwSearch.vue

@@ -5,6 +5,7 @@
         v-bind="$attrs"
         v-model="text"
         autocomplete="off"
+        class="aw-search"
         :placeholder="placeholder"
         @keydown.enter.prevent="_setSearchImmediate"
     >
@@ -12,9 +13,13 @@
             <AwIconSystemMono
                 v-if="!$route.query[param]"
                 name="search"
-                class="h-full w-10 p-3"
+                class="aw-search__icon-default h-full w-10 p-3"
             />
-            <button v-else class="focus:outline-none" @click="_clear">
+            <button
+                v-else
+                class="aw-search__icon-close focus:outline-none"
+                @click="_clear"
+            >
                 <AwIconSystemMono name="close" class="h-full w-10 p-3" />
             </button>
         </template>

package/components/4_pages/AwPage.vue

@@ -66,7 +66,7 @@
             >
                 <div
                     class="flex-1 text-sm text-mono-400"
-                    v-html="$t('AwLayoutDefault.footer')"
+                    v-html="$sanitize($t('AwLayoutDefault.footer'))"
                 ></div>
                 <div class="flex-1 text-center">
                     <AwButton

package/components/5_layouts/AwLayoutCenter.vue

@@ -19,7 +19,7 @@
             </div>
 
             <div
-                v-html="$t('AwLayoutDefault.footer')"
+                v-html="$sanitize($t('AwLayoutDefault.footer'))"
                 class="pt-8 text-sm"
             ></div>
         </div>

package/components/5_layouts/_AwHeaderNotification.vue

@@ -14,7 +14,7 @@
             class="aw-header-notification__content container-fluid"
         >
             <AwIcon v-if="config.icon" :name="config.icon" />
-            <span v-html="config.text" class="text-center"></span>
+            <span v-html="$sanitize(config.text)" class="text-center"></span>
             <AwButton
                 v-for="({ listeners, ...props }, i) in config.buttons"
                 :key="i"

package/components/5_layouts/_AwMobileMenuItem.vue

@@ -17,7 +17,7 @@
                 {{ text }}
                 <span
                     v-if="description"
-                    v-html="description"
+                    v-html="$sanitize(description)"
                     class="aw-mobile-menu-item__description"
                 ></span>
             </span>

package/components/5_layouts/_AwNoty.vue

@@ -53,7 +53,7 @@
 </template>
 
 <script>
-import insane from 'insane'
+import { sanitize } from '@AwUtils/string'
 import AwIcon from '@AwAtoms/AwIcon/AwIcon.vue'
 import AwIconSystemMono from '@AwAtoms/AwIcon/AwIconSystemMono.vue'
 
@@ -100,6 +100,6 @@ export default {
         }
     },
 
-    sanitize: insane
+    sanitize
 }
 </script>

package/components/_config.js

@@ -28,6 +28,10 @@ export const AwDate = {
     format: 'll'
 }
 
+export const AwDescription = {
+    tag: 'span'
+}
+
 export const AwDropdown = {
     tag: 'div',
     baseClass: 'aw-dropdown',

package/lang/de.js

@@ -112,7 +112,7 @@ export const AwUploader = {
 
 export const AwSearch = {
     text: 'Suche',
-    keyBind: ' (Drücken Sie "{key}", um zu fokussieren)'
+    keyBind: ''
 }
 
 export const AwUserMenu = {

package/lang/en.js

@@ -133,7 +133,7 @@ export const AwUploader = {
 
 export const AwSearch = {
     text: 'Search',
-    keyBind: ' (Press "{key}" to focus)'
+    keyBind: ''
 }
 
 export const AwUserMenu = {

package/lang/ru.js

@@ -117,7 +117,7 @@ export const AwUploader = {
 
 export const AwSearch = {
     text: 'Поиск',
-    keyBind: ' (Нажмите "{key}", для поиска)'
+    keyBind: ''
 }
 
 export const AwUserMenu = {

package/lang/uk.js

@@ -113,7 +113,7 @@ export const AwTableBuilder = {
 
 export const AwSearch = {
     text: 'Пошук',
-    keyBind: ' (Натисніть "{key}", для пошуку)'
+    keyBind: ''
 }
 
 export const AwUserMenu = {

package/nuxt/templates/sanitize.plugin.js

@@ -0,0 +1,5 @@
+import { sanitize } from '@AwUtils/string'
+
+export default (ctx, inject) => {
+    inject('sanitize', sanitize)
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@awes-io/ui",
-    "version": "2.29.0",
+    "version": "2.31.0",
     "description": "User Interface (UI) components",
     "keywords": [
         "ui",
@@ -9,7 +9,7 @@
         "awes-io",
         "material design"
     ],
-    "homepage": "https://www.awes.io",
+    "homepage": "https://awes.io",
     "bugs": {
         "url": "https://github.com/awes-io/client/issues"
     },
@@ -123,5 +123,5 @@
         "vue-template-compiler": "^2.6.10",
         "webfonts-generator": "^0.4.0"
     },
-    "gitHead": "30ce309cb3886f77efbce6ed30bdcaf1974161c5"
+    "gitHead": "c2b5c259d670718d335f294b240d5c264f4c30b9"
 }

package/readme.md

@@ -0,0 +1 @@
+Awes.io/Ui