@indielayer/ui 1.9.3 → 1.10.0

package/src/components/select/Select.vue

@@ -7,6 +7,7 @@ const selectProps = {
   placeholder: String,
   options: Array as PropType<SelectOption[]>,
   multiple: Boolean,
+  truncate: Boolean,
   flat: Boolean,
   native: Boolean,
   filterable: Boolean,
@@ -30,12 +31,14 @@ const selectProps = {
 export type SelectOption = {
   value: number | string;
   label: string;
+  prefix?: string;
+  suffix?: string;
   disabled?: boolean;
 }
 
 export type SelectProps = ExtractPublicPropTypes<typeof selectProps>
 
-type InternalClasses = 'wrapper' | 'box' | 'content' | 'search' | 'contentBody' | 'iconWrapper' | 'icon'
+type InternalClasses = 'wrapper' | 'box' | 'truncateCounter' | 'content' | 'search' | 'contentBody' | 'iconWrapper' | 'icon'
 type InternalExtraData = { errorInternal: Ref<boolean>; }
 export interface SelectTheme extends ThemeComponent<SelectProps, InternalClasses, InternalExtraData> {}
 
@@ -49,7 +52,7 @@ export default {
 
 <script setup lang="ts">
 import { computed, ref, watch, type PropType, type ExtractPublicPropTypes, type Ref, nextTick, unref, onUnmounted } from 'vue'
-import { useEventListener } from '@vueuse/core'
+import { useEventListener, useResizeObserver, useThrottleFn } from '@vueuse/core'
 import { useColors } from '../../composables/useColors'
 import { useCommon } from '../../composables/useCommon'
 import { useInputtable } from '../../composables/useInputtable'
@@ -66,7 +69,7 @@ import XSpinner from '../spinner/Spinner.vue'
 import XPopover from '../popover/Popover.vue'
 import XPopoverContainer from '../popover/PopoverContainer.vue'
 import XInputFooter from '../inputFooter/InputFooter.vue'
-import type { XInput } from '../input'
+import XInput from '../input/Input.vue'
 
 const  props = defineProps(selectProps)
 
@@ -116,6 +119,8 @@ const internalOptions = computed(() => {
         value: option.value,
         label: option.label,
         active: isActive,
+        prefix: option.prefix,
+        suffix: option.suffix,
         disabled: option.disabled,
         iconRight: isActive ? checkIcon : undefined,
         onClick: () => handleOptionClick(option.value),
@@ -372,6 +377,59 @@ function handleKeyNavigation(e: KeyboardEvent) {
   }
 }
 
+const tagsRef = ref<HTMLElement | null>(null)
+const multipleHiddenRef = ref<InstanceType<typeof XPopover> | null>(null)
+const showCountTag = ref(false)
+const hiddenTags = ref(0)
+
+const handleTruncate = useThrottleFn(() => {
+  if (props.multiple && props.truncate) {
+    nextTick(() => {
+      const maxTags = calcMaxTags()
+
+      if (maxTags < selected.value.length) {
+        showCountTag.value = true
+        hiddenTags.value = selected.value.length - maxTags
+      } else {
+        showCountTag.value = false
+        hiddenTags.value = 0
+      }
+    })
+  }
+}, 100, true)
+
+useResizeObserver(tagsRef, () => { handleTruncate() })
+
+// Calculate max tags that can be displayed, and display: none the rest
+function calcMaxTags() {
+  if (!tagsRef.value) return 0
+
+  const tags = tagsRef.value.querySelectorAll('.x-tag')
+  const tagsArray = Array.from(tags)
+
+  let totalWidth = 0
+  let tagsCount = 0
+
+  const maxWidth = tagsRef.value.offsetWidth - 30
+
+  for (let i = 0; i < tagsArray.length; i++) {
+    const tag = tagsArray[i] as HTMLElement
+
+    tag.style.display = 'flex'
+
+    totalWidth += tag.offsetWidth
+
+    if (totalWidth < maxWidth) tagsCount++
+    else tag.style.display = 'none'
+  }
+
+  return tagsCount
+}
+
+watch(selected, (val) => {
+  handleTruncate()
+}, { immediate: true, deep: true })
+
 const { styles, classes, className } = useTheme('Select', {}, props, { errorInternal })
 
 defineExpose({ focus, blur, reset, validate, setError })
@@ -406,18 +464,109 @@ defineExpose({ focus, blur, reset, validate, setError })
           <div v-else>&nbsp;</div>
         </template>
       </div>
-      <x-popover
-        v-else
-        ref="popoverRef"
-        :disabled="isDisabled"
-      >
-        <div
-          :class="[classes.box]"
+      <template v-else>
+        <x-popover
+          ref="popoverRef"
+          :disabled="isDisabled"
+        >
+          <div
+            :class="[classes.box]"
+          >
+            <template v-if="multiple && Array.isArray(selected) && selected.length > 0">
+              <div
+                ref="tagsRef"
+                class="flex gap-1 relative"
+                :class="{
+                  'flex-wrap': !truncate,
+                  'overflow-hidden': truncate,
+                }"
+              >
+                <x-tag
+                  v-for="value in selected"
+                  :key="value"
+                  size="xs"
+                  removable
+                  :outlined="!(isDisabled || options?.find((i) => i.value === value)?.disabled)"
+                  :disabled="isDisabled || options?.find((i) => i.value === value)?.disabled"
+                  @remove="(e: Event) => { handleRemove(e, value) }"
+                >{{ getLabel(value) }}</x-tag>
+
+                <div
+                  v-if="showCountTag"
+                  :class="classes.truncateCounter"
+                  @click.stop="multipleHiddenRef?.toggle()"
+                >+{{ hiddenTags }}</div>
+              </div>
+            </template>
+            <template v-else-if="!multiple && !isEmpty(selected)">
+              {{ getLabel(selected) }}
+            </template>
+
+            <template v-else>
+              <div
+                v-if="placeholder"
+                class="text-secondary-400 dark:text-secondary-500"
+              >
+                {{ placeholder }}
+              </div>
+              <div v-else>&nbsp;</div>
+            </template>
+          </div>
+
+          <template #content>
+            <x-popover-container
+              :class="classes.content"
+            >
+              <slot name="content-header">
+                <div v-if="filterable" :class="classes.search">
+                  <x-input
+                    ref="filterRef"
+                    v-model="filter"
+                    :placeholder="filterPlaceholder"
+                    skip-form-registry
+                    size="sm"
+                  />
+                </div>
+              </slot>
+              <div v-bind="containerProps" :class="classes.contentBody">
+                <div v-bind="wrapperProps">
+                  <x-menu-item
+                    v-for="item in list"
+                    :key="item.index"
+                    ref="itemsRef"
+                    :item="item.data"
+                    :size="size"
+                    :disabled="item.data.disabled"
+                    :selected="item.index === selectedIndex"
+                    :color="color"
+                    filled
+                    @click="() => !multiple && popoverRef?.hide()"
+                  >
+                    <template #prefix><slot name="prefix" :item="item.data">{{ item.data.prefix }}</slot></template>
+                    <slot name="label" :item="item.data"></slot>
+                    <template #suffix><slot name="suffix" :item="item.data">{{ item.data.suffix }}</slot></template>
+                  </x-menu-item>
+                </div>
+                <div v-if="list.length === 0" class="p-2 text-center text-secondary-400">
+                  No options
+                </div>
+              </div>
+              <slot name="content-footer"></slot>
+            </x-popover-container>
+          </template>
+        </x-popover>
+        <x-popover
+          v-if="multiple && truncate && showCountTag"
+          ref="multipleHiddenRef"
+          :popper-show-triggers="[]"
+          :popper-hide-triggers="[]"
+          class="inline-block !absolute right-0"
+          placement="auto-start"
         >
-          <template v-if="multiple && Array.isArray(selected) && selected.length > 0">
-            <div class="flex gap-1 flex-wrap">
+          <template #content>
+            <x-popover-container class="p-2 flex gap-2 flex-wrap">
               <x-tag
-                v-for="value in selected"
+                v-for="value in selected?.slice(selected.length - hiddenTags)"
                 :key="value"
                 size="xs"
                 removable
@@ -425,61 +574,10 @@ defineExpose({ focus, blur, reset, validate, setError })
                 :disabled="isDisabled || options?.find((i) => i.value === value)?.disabled"
                 @remove="(e: Event) => { handleRemove(e, value) }"
               >{{ getLabel(value) }}</x-tag>
-            </div>
+            </x-popover-container>
           </template>
-          <template v-else-if="!multiple && !isEmpty(selected)">
-            {{ getLabel(selected) }}
-          </template>
-
-          <template v-else>
-            <div
-              v-if="placeholder"
-              class="text-secondary-400 dark:text-secondary-500"
-            >
-              {{ placeholder }}
-            </div>
-            <div v-else>&nbsp;</div>
-          </template>
-        </div>
-
-        <template #content>
-          <x-popover-container
-            :class="classes.content"
-          >
-            <slot name="content-header">
-              <div v-if="filterable" :class="classes.search">
-                <x-input
-                  ref="filterRef"
-                  v-model="filter"
-                  :placeholder="filterPlaceholder"
-                  skip-form-registry
-                  size="sm"
-                />
-              </div>
-            </slot>
-            <div v-bind="containerProps" :class="classes.contentBody">
-              <div v-bind="wrapperProps">
-                <x-menu-item
-                  v-for="item in list"
-                  :key="item.index"
-                  ref="itemsRef"
-                  :item="item.data"
-                  :size="size"
-                  :disabled="item.data.disabled"
-                  :selected="item.index === selectedIndex"
-                  :color="color"
-                  filled
-                  @click="() => !multiple && popoverRef?.hide()"
-                />
-              </div>
-              <div v-if="list.length === 0" class="p-2 text-center text-secondary-400">
-                No options
-              </div>
-            </div>
-            <slot name="content-footer"></slot>
-          </x-popover-container>
-        </template>
-      </x-popover>
+        </x-popover>
+      </template>
 
       <select
         :id="id"

package/src/components/select/theme/Select.base.theme.ts

@@ -27,6 +27,8 @@ const theme: SelectTheme = {
       return classes
     },
 
+    truncateCounter: 'absolute right-0 cursor-pointer hover:bg-secondary-200 bg-secondary-100 text-secondary-800 rounded px-1 py-0.5 text-xs',
+
     content: 'p-1',
 
     search: 'p-1 mb-0.5',

package/src/components/tag/Tag.vue

@@ -53,7 +53,7 @@ const { styles, classes, className } = useTheme('Tag', {}, props)
 <template>
   <component
     :is="tag"
-    class="text-[color:var(--x-tag-text)] dark:text-[color:var(--x-tag-dark-text)] border"
+    class="text-[color:var(--x-tag-text)] dark:text-[color:var(--x-tag-dark-text)] border relative"
     :style="styles"
     :class="
       [
@@ -67,16 +67,18 @@ const { styles, classes, className } = useTheme('Tag', {}, props)
   >
     <span
       v-if="removable"
-      class="max-w-full truncate"
+      class="max-w-full truncate pr-4"
     >
       <slot></slot>
-      <x-icon
-        :size="closeIconSize"
-        :icon="closeIcon"
-        class="ml-1.5 -mt-0.5 cursor-pointer transition-colors duration-150"
-        :class="[disabled ? 'text-secondary-400' : 'hover:text-secondary-500']"
-        @click="(e: Event) => !disabled && $emit('remove', e)"
-      />
+      <div class="absolute right-1.5 top-0 h-full flex items-center">
+        <x-icon
+          :size="closeIconSize"
+          :icon="closeIcon"
+          class="cursor-pointer transition-colors duration-150"
+          :class="[disabled ? 'text-secondary-400' : 'hover:text-secondary-500']"
+          @click="(e: Event) => !disabled && $emit('remove', e)"
+        />
+      </div>
     </span>
 
     <slot v-else></slot>