mediacube-ui 0.1.99 → 0.1.100

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.1.100](https://github.com/MediaCubeCo/mcui/compare/v0.1.99...v0.1.100) (2023-08-04)
+
 ### [0.1.99](https://github.com/MediaCubeCo/mcui/compare/v0.1.98...v0.1.99) (2023-08-02)
 
 ### [0.1.98](https://github.com/MediaCubeCo/mcui/compare/v0.1.97...v0.1.98) (2023-08-01)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mediacube-ui",
-  "version": "0.1.99",
+  "version": "0.1.100",
   "description": "Design system for Mediacube services",
   "author": "Mediacube",
   "private": false,
@@ -115,6 +115,7 @@
     "storybook-addon-designs": "^5.4.0",
     "storybook-design-token": "^0.7.7",
     "style-loader": "^1.2.1",
+    "svgstore": "^3.0.1",
     "vue-lazyload": "^1.3.3",
     "vue-loader": "^15.9.5",
     "vue-slider-component": "^3.2.2",

package/src/assets/icons.svg

@@ -1469,6 +1469,13 @@
 </symbol><symbol id="fullscreen" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></symbol><symbol id="get_app" viewBox="0 0 24 24">
     <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>
     <path d="M0 0h24v24H0z" fill="none"/>
+</symbol><symbol id="gift_solid" viewBox="0 0 24 24">
+<rect width="24" height="24" rx="12" fill="currentColor"/>
+<path d="M13.5556 11.2222H17.8333C18.1428 11.2222 18.4395 11.0993 18.6583 10.8805C18.8771 10.6617 19 10.3649 19 10.0555V9.27775C19 8.96833 18.8771 8.67159 18.6583 8.45279C18.4395 8.234 18.1428 8.11108 17.8333 8.11108H6.16667C5.85725 8.11108 5.5605 8.234 5.34171 8.45279C5.12292 8.67159 5 8.96833 5 9.27775V10.0555C5 10.3649 5.12292 10.6617 5.34171 10.8805C5.5605 11.0993 5.85725 11.2222 6.16667 11.2222H10.4444" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18.2218 11.2222V17.4445C18.2218 17.857 18.0579 18.2527 17.7662 18.5444C17.4745 18.8361 17.0788 19 16.6662 19H7.3329C6.92034 19 6.52468 18.8361 6.23296 18.5444C5.94123 18.2527 5.77734 17.857 5.77734 17.4445V11.2222" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.4442 5C10.8568 5 11.2524 5.16389 11.5442 5.45561C11.8359 5.74733 11.9998 6.143 11.9998 6.55556V8.11111H10.4442C10.0317 8.11111 9.63601 7.94722 9.34428 7.6555C9.05256 7.36378 8.88867 6.96811 8.88867 6.55556C8.88867 6.143 9.05256 5.74733 9.34428 5.45561C9.63601 5.16389 10.0317 5 10.4442 5Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.5556 5C13.9681 5 14.3638 5.16389 14.6555 5.45561C14.9472 5.74733 15.1111 6.143 15.1111 6.55556C15.1111 6.96811 14.9472 7.36378 14.6555 7.6555C14.3638 7.94722 13.9681 8.11111 13.5556 8.11111H12V6.55556C12 6.143 12.1639 5.74733 12.4556 5.45561C12.7473 5.16389 13.143 5 13.5556 5Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.7786 8.11108H11.2231C10.7935 8.11108 10.4453 8.45931 10.4453 8.88886V18.2222C10.4453 18.6518 10.7935 19 11.2231 19H12.7786C13.2082 19 13.5564 18.6518 13.5564 18.2222V8.88886C13.5564 8.45931 13.2082 8.11108 12.7786 8.11108Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </symbol><symbol id="glasses" viewBox="0 0 24 24">
 <path d="M17.903 4L19.574 5.142C20.056 5.471 20.37 5.995 20.434 6.576L21.464 16M9.50001 16.473C9.50001 15.161 10.619 14.098 12 14.098C13.381 14.098 14.5 15.161 14.5 16.473M6.09701 4L4.42601 5.142C3.94401 5.471 3.63001 5.995 3.56701 6.576L2.53601 16M20.4749 14.0251C21.8417 15.3919 21.8417 17.608 20.4749 18.9748C19.1081 20.3417 16.892 20.3417 15.5252 18.9748C14.1583 17.608 14.1583 15.3919 15.5252 14.0251C16.892 12.6583 19.1081 12.6583 20.4749 14.0251ZM8.47488 14.0251C9.84172 15.3919 9.84172 17.608 8.47488 18.9748C7.10804 20.3417 4.89197 20.3417 3.52513 18.9748C2.15829 17.608 2.15829 15.3919 3.52513 14.0251C4.89197 12.6583 7.10804 12.6583 8.47488 14.0251Z" stroke="currentColor" fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </symbol><symbol id="google_colored" viewBox="0 0 24 24">

package/src/patterns/McFilter/McFilter.vue

@@ -155,6 +155,7 @@ import McFilterTypeRelation from './McFilterTypeRelation/McFilterTypeRelation'
 import McFilterTypeText from './McFilterTypeText/McFilterTypeText'
 import McFilterTypeRange from './McFilterTypeRange/McFilterTypeRange'
 import McFilterTypeDate from './McFilterTypeDate/McFilterTypeDate'
+import McFilterTypeLabels from './McFilterTypeLabels/McFilterTypeLabels'
 import McFilterTags from './McFilterTags/McFilterTags'
 import McChip from '../../elements/McChip/McChip'
 
@@ -166,6 +167,7 @@ export default {
         McFilterTypeText,
         McFilterTypeRange,
         McFilterTypeDate,
+        McFilterTypeLabels,
         McSvgIcon,
         McButton,
         McTitle,
@@ -197,7 +199,7 @@ export default {
        *  [{
                 name: Filter title,
                 value: [String] - Filter value(key),
-                type: [String] - Filter type(relation / date / text / fast),
+                type: [String] - Filter type(relation / date / text / fast / labels),
                 options: [Array] - Filter options,
                 getAjaxOne: [Function] - Method for get selected options when filter initialize,
                 getAjaxOptions: [Function] - Method for get options by API,
@@ -440,11 +442,32 @@ export default {
             this.activeTag ? this.editTag() : this.addTag()
         },
         editTag() {
-            this.currentFilter.type === 'relation' ? this.editRelationValue() : this.addSimpleValue()
+            switch (this.currentFilter.type) {
+                case 'relation':
+                case 'labels': {
+                    this.editRelationValue()
+                    break
+                }
+                default: {
+                    this.addSimpleValue()
+                    break
+                }
+            }
             this.activeTag = null
         },
         addTag() {
-            this.currentFilter.type === 'relation' ? this.addRelationValue() : this.addSimpleValue()
+            switch (this.currentFilter.type) {
+                case 'relation':
+                case 'labels': {
+                    this.addRelationValue()
+                    break
+                }
+                default: {
+                    this.addSimpleValue()
+                    break
+                }
+            }
+            this.activeTag = null
         },
         editRelationValue() {
             const tagRelationValue = this.activeTag.relationKey === 'exists' ? [0] : [this.activeTag.value]
@@ -536,6 +559,8 @@ export default {
         setEmptyCondition() {
             switch (this.currentFilter.type) {
                 case 'relation':
+                case 'date':
+                case 'labels':
                     this.handleConditionChange()
                     break
                 case 'text':
@@ -544,9 +569,6 @@ export default {
                 case 'range':
                     this.handleConditionChange({})
                     break
-                case 'date':
-                    this.handleConditionChange()
-                    break
                 default:
                     break
             }

package/src/patterns/McFilter/McFilterTypeLabels/McFilterTypeLabels.vue

@@ -0,0 +1,131 @@
+<template>
+    <mc-field-text
+        v-model="selectedOptionValue"
+        :placeholder="filter.placeholder || placeholders.choose"
+        class="mc-filter-type-labels"
+        name="labels_text"
+    >
+        <div slot="header" class="mc-filter-type-labels__header">
+            <mc-title>{{ placeholders.condition }}</mc-title>
+            <div class="mc-filter-type-labels__buttons">
+                <mc-button
+                    v-for="relation in relations"
+                    :key="relation"
+                    :variation="relation_type === relation ? 'purple' : 'dark-gray-outline'"
+                    @click="() => changeRelationType(relation)"
+                >
+                    {{ placeholders.actions[relation] }}
+                </mc-button>
+            </div>
+        </div>
+    </mc-field-text>
+</template>
+
+<script>
+import McButton from '../../../elements/McButton/McButton'
+import McTitle from '../../../elements/McTitle/McTitle'
+import McFieldText from '../../../elements/McField/McFieldText/McFieldText'
+
+export default {
+    name: 'McFilterTypeLabels',
+    components: {
+        McButton,
+        McTitle,
+        McFieldText,
+    },
+    props: {
+        /**
+         *  Значение
+         */
+        value: {
+            // type: [String, Number],
+            default: null,
+        },
+        /**
+         *  Объект выбранного
+         *  фильтра
+         */
+        filter: {
+            type: Object,
+            default: () => {},
+        },
+        /**
+         *  Переводы локализаций
+         */
+        placeholders: {
+            type: Object,
+            required: true,
+        },
+        /**
+         *  Текущее значение
+         *  добавленных фильтров
+         */
+        currentValues: {
+            type: Object,
+            default: () => {},
+        },
+    },
+    data() {
+        return {
+            relations: ['is', 'is_not'],
+            relation_type: 'is',
+        }
+    },
+    computed: {
+        selectedOptionValue: {
+            get() {
+                let val = this.value
+                if (val) {
+                    for (let [relationKey, relationVal] of Object.entries(this.value)) {
+                        [val] = relationVal || []
+                    }
+                }
+                return val
+            },
+            set(val) {
+                let currentValue = null
+                let currentValueName = null
+                if (val) {
+                    currentValue = { [this.relation_type]: [val] }
+                    currentValueName = { [this.relation_type]: { [val]: val } }
+                }
+
+                this.$emit('input', currentValue, currentValueName)
+            },
+        },
+    },
+    watch: {
+        filter() {
+            this.relation_type = 'is'
+        },
+    },
+    methods: {
+        changeRelationType(relation) {
+            if (this.relation_type === relation) return
+            this.relation_type = relation
+        },
+    },
+}
+</script>
+
+<style lang="scss">
+.mc-filter-type-labels {
+    $block-name: &;
+    width: 300px;
+    &__header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: -$space-50;
+        margin-top: -$space-50;
+    }
+    &__buttons {
+        display: flex;
+        @include child-indent-right($space-50);
+        .mc-button {
+            height: $size-300;
+            padding: $space-50 $space-150;
+        }
+    }
+}
+</style>

package/src/tokens/z-indexes.scss

@@ -5,8 +5,9 @@
 $z-index-sticky-tabs: 49;
 $z-index-dropdown: 100;
 $z-index-sticky: 100;
-$z-index-modal: 9999;
-$z-index-top-line: 9999;
+$z-index-overlay-page: 7000;
+$z-index-modal: 8000;
+$z-index-top-line: 8000;
 $z-index-header: 10000;
 $z-index-notification: 10001;
 $z-index-overlay: 10002;