@awes-io/ui 2.29.3 → 2.31.0

package/CHANGELOG.md

@@ -3,6 +3,40 @@
 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)
 
 

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/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/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/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/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/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.3",
+    "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": "5c5a00315a440874e7c43aaf2c4ac2e9b035c74d"
+    "gitHead": "c2b5c259d670718d335f294b240d5c264f4c30b9"
 }

package/readme.md

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