mediacube-ui 0.1.406 → 0.1.409

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 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.409](https://github.com/MediaCubeCo/mcui/compare/v0.1.408...v0.1.409) (2025-09-16)
+
+### [0.1.408](https://github.com/MediaCubeCo/mcui/compare/v0.1.407...v0.1.408) (2025-09-16)
+
+### [0.1.407](https://github.com/MediaCubeCo/mcui/compare/v0.1.406...v0.1.407) (2025-09-02)
+
 ### [0.1.406](https://github.com/MediaCubeCo/mcui/compare/v0.1.405...v0.1.406) (2025-09-02)
 
 ### [0.1.405](https://github.com/MediaCubeCo/mcui/compare/v0.1.404...v0.1.405) (2025-09-02)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mediacube-ui",
-  "version": "0.1.406",
+  "version": "0.1.409",
   "description": "Design system for Mediacube services",
   "author": "Mediacube",
   "private": false,

package/src/elements/McField/McFieldSelect/McFieldSelect.vue

@@ -52,7 +52,18 @@
                         </div>
                     </div>
                 </template>
-
+                <template slot="tag" slot-scope="{ option, remove }">
+                    <mc-chip
+                        variation="main-alpha-10-invert"
+                        class="multiselect__tag"
+                        text-color="black"
+                        size="s"
+                        :closable="!option.hasOwnProperty('is_closable') || option.is_closable"
+                        @click="remove(option)"
+                    >
+                        {{ option.name }}
+                    </mc-chip>
+                </template>
                 <template
                     v-if="optionsTooltip || optionWithPreview || optionWithPreviewOnly"
                     slot="option"
@@ -124,6 +135,7 @@
 <script>
 import MultiSelect from 'vue-multiselect'
 import McTitle from '../../McTitle/McTitle'
+import McChip from '../../McChip/McChip'
 import McTooltip from '../../McTooltip/McTooltip'
 import McAvatar from '../../McAvatar/McAvatar'
 import McSvgIcon from '../../McSvgIcon/McSvgIcon'
@@ -134,7 +146,7 @@ import { LANGUAGES } from '../../../helpers/consts'
 
 export default {
     name: 'McFieldSelect',
-    components: { McSvgIcon, McAvatar, McTitle, McTooltip, MultiSelect, McPreview },
+    components: { McSvgIcon, McAvatar, McTitle, McTooltip, MultiSelect, McPreview, McChip },
     mixins: [fieldErrors, equalFieldHeight],
     props: {
         /**
@@ -836,7 +848,28 @@ export default {
                 color: $color-gray;
             }
         }
-
+        &__tag {
+            padding-left: 2px !important;
+            .mc-chip__button {
+                background-color: $color-white;
+                border-radius: $radius-circle;
+                opacity: 1;
+                .mc-svg-icon {
+                    min-width: $space-250;
+                    width: $space-250;
+                    min-height: $space-250;
+                    height: $space-250;
+                }
+                &:hover {
+                    .mc-svg-icon {
+                        fill: var(--color-red);
+                    }
+                }
+                .mc-svg-icon {
+                    fill: var(--color-main);
+                }
+            }
+        }
         &__input {
             padding-inline-start: $space-50;
             margin-bottom: $space-150 - 2px;

package/src/elements/McField/McFieldText/McFieldText.vue

@@ -393,6 +393,7 @@ export default {
             prependWidth: 0,
             appendWidth: 0,
             prettyType: this.type,
+            is_backspace: false,
         }
     },
 
@@ -515,13 +516,13 @@ export default {
         },
         inputClasses() {
             return {
-              'mc-field-text__input': true,
-              'mc-field-text__input--text-normalized': this.isPhoneType && this.isRtl,
+                'mc-field-text__input': true,
+                'mc-field-text__input--text-normalized': this.isPhoneType && this.isRtl,
             }
         },
-        
+
         isPhoneType() {
-          return this.type === 'phone_number'
+            return this.type === 'phone_number'
         },
 
         isPasswordType() {
@@ -631,7 +632,6 @@ export default {
                     value = this.handleRemoveLeadingZero(value)
                     const cursor_position = this.getCaretPos(e.target)?.start
                     const prepared_value = this.formattedToNumber(value)
-
                     const float_value = parseFloat(prepared_value)
                     const without_spaces_value = prepared_value.replace(/ /gm, '')
 
@@ -641,9 +641,14 @@ export default {
                             : without_spaces_value || float_value || prepared_value
                         : null
                     const formatted_value = this.getAmountFormat(prepared_value)
+
+                    const value_without_last_symbol = this.getAmountFormat(
+                        prepared_value.slice(0, prepared_value.length - 1),
+                    )
+
+                    const diff = this.is_backspace ? 0 : formatted_value.length - value_without_last_symbol.length - 1
                     e.target.value = this.isRtl ? formatted_value.replace(/ /gm, '') : formatted_value
-                    const space_length = e.target.value?.slice(0, cursor_position).replace(/[^ ]/gm, '')?.length || 0
-                    this.setCaretPos(e.target, cursor_position + space_length, cursor_position + space_length)
+                    this.setCaretPos(e.target, cursor_position + diff, cursor_position + diff)
                     break
                 }
                 case 'uppercase': {
@@ -680,10 +685,17 @@ export default {
             switch (this.type) {
                 case 'amount_format':
                 case 'num': {
-                    const exluded_symbols = ['.', ',']
+                    this.is_backspace = e.key?.match(/Backspace/)
+                    const excluded_symbols = ['.', ',']
+                    const is_excluded_symbol = excluded_symbols.includes(e.key)
+
+                    if (isNaN(+e.key) && !e.key?.match(/Arrow|Backspace|\.,/) && !is_excluded_symbol) {
+                        e.preventDefault()
+                    }
+
                     const already_has_symbol =
-                        typeof this.value === 'string' && exluded_symbols.some(symbol => this.value.includes(symbol))
-                    if (exluded_symbols.includes(e.key) && already_has_symbol) {
+                        typeof this.value === 'string' && excluded_symbols.some(symbol => this.value.includes(symbol))
+                    if (is_excluded_symbol && already_has_symbol) {
                         e.preventDefault()
                     }
                     break