fix: auto truncate tags fix, +breakTags prop #346

vueform · Oct 7, 2023 · 0deda4b · 0deda4b
1 parent 37a22e5
commit 0deda4b
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 2 deletions.
diff --git a/src/Multiselect.d.ts b/src/Multiselect.d.ts
@@ -103,6 +103,7 @@ declare class Multiselect implements ReturnType<typeof defineComponent> {
  allowAbsent?: object;
  appendToBody?: boolean;
  closeOnScroll?: boolean;
+ breakTags?: boolean;
 
  $emit(eventName: 'change', value: any, instance: this): this | void;
  $emit(eventName: 'select', value: any, option: any, instance:this): this | void;

diff --git a/src/Multiselect.vue b/src/Multiselect.vue
@@ -72,7 +72,7 @@
 
  :aria-label="ariaTagLabel(localize(option[label]))"
  >
- {{ localize(option[label]) }}
+ <span :class="classList.tagWrapper">{{ localize(option[label]) }}</span>
  <span
  v-if="!disabled && !option.disabled"
  :class="classList.tagRemove"
@@ -640,6 +640,11 @@
  type: Boolean,
  default: false,
  },
+ breakTags: {
+ required: false,
+ type: Boolean,
+ default: false,
+ },
  },
  setup(props, context)
  { 

diff --git a/src/composables/useClasses.js b/src/composables/useClasses.js
@@ -2,7 +2,7 @@ import { computed, toRefs } from 'vue'
 
 export default function useClasses (props, context, dependencies)
 {const { 
- classes: classes_, disabled, openDirection, showOptions
+ classes: classes_, disabled, openDirection, showOptions, breakTags
  } = toRefs(props)
 
  // ============ DEPENDENCIES ============
@@ -29,6 +29,8 @@ export default function useClasses (props, context, dependencies)
  search: 'multiselect-search',
  tags: 'multiselect-tags',
  tag: 'multiselect-tag',
+ tagWrapper: 'multiselect-tag-wrapper',
+ tagWrapperBreak: 'multiselect-tag-wrapper-break',
  tagDisabled: 'is-disabled',
  tagRemove: 'multiselect-tag-remove',
  tagRemoveIcon: 'multiselect-tag-remove-icon',
@@ -95,6 +97,7 @@ export default function useClasses (props, context, dependencies)
  tags: c.tags,
  tag: [c.tag]
  .concat(disabled.value ? c.tagDisabled : []),
+ tagWrapper: [c.tagWrapper, breakTags.value ? c.tagWrapperBreak : null],
  tagDisabled: c.tagDisabled,
  tagRemove: c.tagRemove,
  tagRemoveIcon: c.tagRemoveIcon,

diff --git a/tests/unit/composables/useClasses.spec.js b/tests/unit/composables/useClasses.spec.js
@@ -75,6 +75,17 @@ describe('useClasses', () => {
 
  expect(select.vm.classList.groupLabel(select.vm.fg[0])).toStrictEqual(['multiselect-group-label', 'is-selected is-disabled', 'is-pointable'])
  })
+
+ it('should add tagWrapperBreak to tagWrapper when `breakTags: true`', async () => {
+ const select = createSelect({
+ mode: 'tags',
+ value: [1,2,3],
+ breakTags: true,
+ options: [1,2,3],
+ })
+
+ expect(select.vm.classList.tagWrapper).toStrictEqual(['multiselect-tag-wrapper', 'multiselect-tag-wrapper-break'])
+ })
  })
 
  describe('showDropdown', () => {

diff --git a/themes/default.scss b/themes/default.scss
@@ -110,6 +110,7 @@
  margin: var(--ms-tag-my, 0.25rem) 0 0;
  padding-left: var(--ms-py, 0.5rem);
  align-items: center;
+ min-width: 0;
 }
 
 .multiselect-tag {
@@ -125,6 +126,7 @@
  display: flex;
  align-items: center;
  white-space: nowrap;
+ min-width: 0;
 
  &.is-disabled {
  padding-right: var(--ms-tag-px, 0.5rem);
@@ -133,6 +135,17 @@
  }
 }
 
+.multiselect-tag-wrapper {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.multiselect-tag-wrapper-break {
+ white-space: normal;
+ word-break: break-all;
+}
+
 .multiselect-tag-remove {
  display: flex;
  align-items: center;

diff --git a/themes/tailwind.scss b/themes/tailwind.scss
@@ -39,17 +39,27 @@
 }
 
 .multiselect-tags {
+ min-width: 0;
  @apply flex-grow flex-shrink flex flex-wrap items-center mt-1 pl-2 rtl:pl-0 rtl:pr-2;
 }
 
 .multiselect-tag {
+ min-width: 0;
  @apply bg-green-500 text-white text-sm font-semibold py-0.5 pl-2 rounded mr-1 mb-1 flex items-center whitespace-nowrap rtl:pl-0 rtl:pr-2 rtl:mr-0 rtl:ml-1;
 
  &.is-disabled {
  @apply pr-2 opacity-50 rtl:pl-2;
  }
 }
 
+.multiselect-tag-wrapper {
+ @apply whitespace-nowrap overflow-hidden overflow-ellipsis;
+}
+
+.multiselect-tag-wrapper-break {
+ @apply whitespace-normal break-all;
+}
+
 .multiselect-tag-remove {
  @apply flex items-center justify-center p-1 mx-0.5 rounded-sm hover:bg-black hover:bg-opacity-10;
 }