mediacube-ui 0.1.326 → 0.1.328

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 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.328](https://github.com/MediaCubeCo/mcui/compare/v0.1.327...v0.1.328) (2024-11-11)
+
+### [0.1.327](https://github.com/MediaCubeCo/mcui/compare/v0.1.326...v0.1.327) (2024-11-11)
+
 ### [0.1.326](https://github.com/MediaCubeCo/mcui/compare/v0.1.325...v0.1.326) (2024-11-11)
 
 ### [0.1.325](https://github.com/MediaCubeCo/mcui/compare/v0.1.324...v0.1.325) (2024-11-05)

package/package.json

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

package/src/patterns/McFilter/McFilter.vue

@@ -12,12 +12,13 @@
                     <mc-svg-icon slot="icon-prepend" name="filter_list" />
                 </mc-button>
             </mc-tooltip>
-            <div v-if="presets[name]" class="mc-filter__presets">
+            <div v-if="currentPresets?.length" class="mc-filter__presets">
                 <div ref="dragArea" class="mc-filter__presets-inner" @mousedown="onMouseDown">
                     <mc-button
-                        v-for="preset in presets[name]"
+                        v-for="preset in currentPresets"
                         :key="preset.name"
                         :variation="getPresetButtonVariation(preset)"
+                        :tooltip="preset.tooltip"
                         secondary-color="purple"
                         @mouseup="() => handlePresetMouseUp(preset)"
                     >
@@ -298,6 +299,7 @@ export default {
             currentConditionName: null,
             buttonConfirmIsDisable: false,
             newPresetName: '',
+            preset_max_size: 40,
             dragOptions: {
                 scrollPos: 0,
                 startClientPos: 0,
@@ -335,6 +337,16 @@ export default {
         buttonCreateIsDisable() {
             return !(this.newPresetName.trim() && Object.keys(this.currentValues)?.length)
         },
+        currentPresets() {
+            return this.presets[this.name]?.map(preset => {
+                const hasLongName = preset?.name?.length > this.preset_max_size
+                return {
+                    ...preset,
+                    name: hasLongName ? `${preset.name.slice(0, this.preset_max_size)}...` : preset.name,
+                    tooltip: hasLongName ? preset?.name : null,
+                }
+            })
+        },
     },
     watch: {
         value: {