@m3ui-vue/m3ui-vue 0.1.11 → 0.2.1

package/src/components/MMultiSelect.vue

@@ -3,16 +3,19 @@ import { computed, ref, useId, onMounted, onUnmounted, nextTick } from 'vue'
 import MIcon from './MIcon.vue'
 import MCheckbox from './MCheckbox.vue'
 import { useFieldBg } from '../composables/useFieldBg'
+import { useLocale } from '../composables/useLocale'
+
+const locale = useLocale()
 
 export interface MultiSelectOption {
   label: string
-  value: string | number
+  value: unknown
   disabled?: boolean
 }
 
 const props = withDefaults(
   defineProps<{
-    modelValue: (string | number)[]
+    modelValue: unknown[]
     options: MultiSelectOption[]
     label?: string
     placeholder?: string
@@ -25,6 +28,9 @@ const props = withDefaults(
     fieldBg?: string
     searchable?: boolean
     maxChips?: number
+    clearable?: boolean
+    searchPlaceholder?: string
+    noResultsText?: string
   }>(),
   {
     modelValue: () => [],
@@ -33,10 +39,11 @@ const props = withDefaults(
     required: false,
     searchable: true,
     maxChips: 3,
+    clearable: false,
   },
 )
 
-const emit = defineEmits<{ 'update:modelValue': [(string | number)[]] }>()
+const emit = defineEmits<{ 'update:modelValue': [unknown[]] }>()
 
 const id = useId()
 const open = ref(false)
@@ -47,6 +54,16 @@ const dropdownEl = ref<HTMLElement | null>(null)
 const searchInput = ref<HTMLInputElement | null>(null)
 const dropPos = ref({ top: '0px', left: '0px', width: '0px' })
 
+function eq(a: unknown, b: unknown): boolean {
+  if (a === b) return true
+  if (typeof a !== 'object' || typeof b !== 'object' || a == null || b == null) return false
+  return JSON.stringify(a) === JSON.stringify(b)
+}
+
+function includes(arr: unknown[], val: unknown): boolean {
+  return arr.some((v) => eq(v, val))
+}
+
 const hasValue = computed(() => props.modelValue.length > 0)
 
 const filteredOptions = computed(() => {
@@ -58,24 +75,24 @@ const filteredOptions = computed(() => {
 const visibleChips = computed(() =>
   props.modelValue.slice(0, props.maxChips).map((v) => ({
     value: v,
-    label: props.options.find((o) => o.value === v)?.label ?? String(v),
+    label: props.options.find((o) => eq(o.value, v))?.label ?? String(v),
   })),
 )
 
 const overflowCount = computed(() => Math.max(0, props.modelValue.length - props.maxChips))
 
-function toggle(value: string | number) {
+function toggle(value: unknown) {
   const current = props.modelValue
-  if (current.includes(value)) {
-    emit('update:modelValue', current.filter((v) => v !== value))
+  if (includes(current, value)) {
+    emit('update:modelValue', current.filter((v) => !eq(v, value)))
   } else {
     emit('update:modelValue', [...current, value])
   }
 }
 
-function removeChip(value: string | number, e: Event) {
+function removeChip(value: unknown, e: Event) {
   e.stopPropagation()
-  emit('update:modelValue', props.modelValue.filter((v) => v !== value))
+  emit('update:modelValue', props.modelValue.filter((v) => !eq(v, value)))
 }
 
 function computeDropPos() {
@@ -164,7 +181,9 @@ const labelClasses = computed(() => {
     ? '-top-2.5 translate-y-0 text-label-small bg-[var(--field-bg)] px-1 right-auto max-w-[calc(100%-1.5rem)]'
     : 'top-2 translate-y-0 text-label-small'
 
-  const unFloated = 'top-1/2 -translate-y-1/2 text-body-large'
+  const unFloated = props.variant === 'filled'
+    ? 'top-[53%] -translate-y-1/2 text-body-large'
+    : 'top-1/2 -translate-y-1/2 text-body-large'
   const active = open.value || hasValue.value
 
   return [
@@ -188,7 +207,8 @@ const labelClasses = computed(() => {
     >
       <div
         v-if="leadingIcon"
-        class="pointer-events-none absolute left-3.5 top-1/2 -translate-y-1/2 text-on-surface-variant"
+        class="pointer-events-none absolute left-3.5 text-on-surface-variant"
+        :class="variant === 'filled' ? 'top-[57%] -translate-y-1/2' : 'top-[55%] -translate-y-1/2'"
       >
         <MIcon :name="leadingIcon" :size="20" />
       </div>
@@ -208,8 +228,8 @@ const labelClasses = computed(() => {
       >
         <template v-if="hasValue">
           <span
-            v-for="chip in visibleChips"
-            :key="chip.value"
+            v-for="(chip, i) in visibleChips"
+            :key="i"
             class="inline-flex items-center gap-1 rounded-full bg-secondary-container px-2 py-0.5 text-label-small text-on-secondary-container"
           >
             {{ chip.label }}
@@ -237,7 +257,17 @@ const labelClasses = computed(() => {
         {{ label }}<span v-if="required" class="text-error">&nbsp;*</span>
       </label>
 
-      <div class="pointer-events-none absolute right-2 top-7 -translate-y-1/2">
+      <button
+        v-if="clearable && hasValue && !disabled"
+        type="button"
+        class="absolute right-9 flex h-6 w-6 cursor-pointer items-center justify-center rounded-full text-on-surface-variant transition-colors hover:bg-on-surface/8 hover:text-on-surface"
+        :class="variant === 'filled' ? 'top-[57%] -translate-y-1/2' : 'top-[55%] -translate-y-1/2'"
+        @click.stop="emit('update:modelValue', []); close()"
+      >
+        <MIcon name="close" :size="18" />
+      </button>
+
+      <div class="pointer-events-none absolute right-2" :class="variant === 'filled' ? 'top-[57%] -translate-y-1/2' : 'top-[55%] -translate-y-1/2'">
         <MIcon
           :name="open ? 'arrow_drop_up' : 'arrow_drop_down'"
           :size="24"
@@ -274,7 +304,7 @@ const labelClasses = computed(() => {
               ref="searchInput"
               v-model="search"
               type="text"
-              placeholder="Buscar..."
+              :placeholder="searchPlaceholder ?? locale.search"
               class="w-full bg-transparent text-body-medium text-on-surface outline-none placeholder:text-on-surface-variant"
             />
           </div>
@@ -282,24 +312,23 @@ const labelClasses = computed(() => {
 
         <div class="flex flex-col py-1">
           <label
-            v-for="opt in filteredOptions"
-            :key="opt.value"
+            v-for="(opt, i) in filteredOptions"
+            :key="i"
             class="flex cursor-pointer items-center gap-3 px-4 py-2 hover:bg-on-surface/8"
             :class="opt.disabled ? 'cursor-not-allowed opacity-38' : ''"
           >
             <MCheckbox
-              :model-value="modelValue.includes(opt.value)"
+              :model-value="includes(modelValue, opt.value)"
               :disabled="opt.disabled"
               @update:model-value="!opt.disabled && toggle(opt.value)"
             />
             <span class="text-body-large text-on-surface">{{ opt.label }}</span>
           </label>
-          <p
-            v-if="filteredOptions.length === 0"
-            class="px-4 py-3 text-center text-body-small text-on-surface-variant"
-          >
-            Sin resultados
-          </p>
+          <slot v-if="filteredOptions.length === 0" name="no-results">
+            <p class="px-4 py-3 text-center text-body-small text-on-surface-variant">
+              {{ noResultsText ?? locale.noResults }}
+            </p>
+          </slot>
         </div>
       </div>
     </Transition>