v5.0.0 update

resources/scripts/components/base-select/composables/useClasses.js

@@ -0,0 +1,181 @@
+import { computed, toRefs } from 'vue'
+
+export default function useClasses(props, context, dependencies) {
+  const refs = toRefs(props)
+  const { disabled, openDirection, showOptions, invalid } = refs
+
+  // ============ DEPENDENCIES ============
+
+  const isOpen = dependencies.isOpen
+  const isPointed = dependencies.isPointed
+  const isSelected = dependencies.isSelected
+  const isDisabled = dependencies.isDisabled
+  const isActive = dependencies.isActive
+  const canPointGroups = dependencies.canPointGroups
+  const resolving = dependencies.resolving
+  const fo = dependencies.fo
+  const isInvalid = invalid
+
+  const classes = {
+    container: 'multiselect',
+    containerDisabled: 'is-disabled',
+    containerOpen: 'is-open',
+    containerOpenTop: 'is-open-top',
+    containerActive: 'is-active',
+    containerInvalid: 'is-invalid',
+    containerInvalidActive: 'is-invalid-active',
+    singleLabel: 'multiselect-single-label',
+    multipleLabel: 'multiselect-multiple-label',
+    search: 'multiselect-search',
+    tags: 'multiselect-tags',
+    tag: 'multiselect-tag',
+    tagDisabled: 'is-disabled',
+    tagRemove: 'multiselect-tag-remove',
+    tagRemoveIcon: 'multiselect-tag-remove-icon',
+    tagsSearchWrapper: 'multiselect-tags-search-wrapper',
+    tagsSearch: 'multiselect-tags-search',
+    tagsSearchCopy: 'multiselect-tags-search-copy',
+    placeholder: 'multiselect-placeholder',
+    caret: 'multiselect-caret',
+    caretOpen: 'is-open',
+    clear: 'multiselect-clear',
+    clearIcon: 'multiselect-clear-icon',
+    spinner: 'multiselect-spinner',
+    dropdown: 'multiselect-dropdown',
+    dropdownTop: 'is-top',
+    dropdownHidden: 'is-hidden',
+    options: 'multiselect-options',
+    optionsTop: 'is-top',
+    group: 'multiselect-group',
+    groupLabel: 'multiselect-group-label',
+    groupLabelPointable: 'is-pointable',
+    groupLabelPointed: 'is-pointed',
+    groupLabelSelected: 'is-selected',
+    groupLabelDisabled: 'is-disabled',
+    groupLabelSelectedPointed: 'is-selected is-pointed',
+    groupLabelSelectedDisabled: 'is-selected is-disabled',
+    groupOptions: 'multiselect-group-options',
+    option: 'multiselect-option',
+    optionPointed: 'is-pointed',
+    optionSelected: 'is-selected',
+    optionDisabled: 'is-disabled',
+    optionSelectedPointed: 'is-selected is-pointed',
+    optionSelectedDisabled: 'is-selected is-disabled',
+    noOptions: 'multiselect-no-options',
+    noResults: 'multiselect-no-results',
+    fakeInput: 'multiselect-fake-input',
+    spacer: 'multiselect-spacer',
+    ...refs.classes.value,
+  }
+
+  // ============== COMPUTED ==============
+
+  const showDropdown = computed(() => {
+    return !!(
+      isOpen.value &&
+      showOptions.value &&
+      (!resolving.value || (resolving.value && fo.value.length))
+    )
+  })
+
+  const classList = computed(() => {
+    return {
+      container: [classes.container]
+        .concat(disabled.value ? classes.containerDisabled : [])
+        .concat(
+          showDropdown.value && openDirection.value === 'top'
+            ? classes.containerOpenTop
+            : []
+        )
+        .concat(
+          showDropdown.value && openDirection.value !== 'top'
+            ? classes.containerOpen
+            : []
+        )
+        .concat(isActive.value ? classes.containerActive : [])
+        .concat(invalid.value ? classes.containerInvalid : []),
+      spacer: classes.spacer,
+      singleLabel: classes.singleLabel,
+      multipleLabel: classes.multipleLabel,
+      search: classes.search,
+      tags: classes.tags,
+      tag: [classes.tag].concat(disabled.value ? classes.tagDisabled : []),
+      tagRemove: classes.tagRemove,
+      tagRemoveIcon: classes.tagRemoveIcon,
+      tagsSearchWrapper: classes.tagsSearchWrapper,
+      tagsSearch: classes.tagsSearch,
+      tagsSearchCopy: classes.tagsSearchCopy,
+      placeholder: classes.placeholder,
+      caret: [classes.caret].concat(isOpen.value ? classes.caretOpen : []),
+      clear: classes.clear,
+      clearIcon: classes.clearIcon,
+      spinner: classes.spinner,
+      dropdown: [classes.dropdown]
+        .concat(openDirection.value === 'top' ? classes.dropdownTop : [])
+        .concat(
+          !isOpen.value || !showOptions.value || !showDropdown.value
+            ? classes.dropdownHidden
+            : []
+        ),
+      options: [classes.options].concat(
+        openDirection.value === 'top' ? classes.optionsTop : []
+      ),
+      group: classes.group,
+      groupLabel: (g) => {
+        let groupLabel = [classes.groupLabel]
+
+        if (isPointed(g)) {
+          groupLabel.push(
+            isSelected(g)
+              ? classes.groupLabelSelectedPointed
+              : classes.groupLabelPointed
+          )
+        } else if (isSelected(g) && canPointGroups.value) {
+          groupLabel.push(
+            isDisabled(g)
+              ? classes.groupLabelSelectedDisabled
+              : classes.groupLabelSelected
+          )
+        } else if (isDisabled(g)) {
+          groupLabel.push(classes.groupLabelDisabled)
+        }
+
+        if (canPointGroups.value) {
+          groupLabel.push(classes.groupLabelPointable)
+        }
+
+        return groupLabel
+      },
+      groupOptions: classes.groupOptions,
+      option: (o, g) => {
+        let option = [classes.option]
+
+        if (isPointed(o)) {
+          option.push(
+            isSelected(o)
+              ? classes.optionSelectedPointed
+              : classes.optionPointed
+          )
+        } else if (isSelected(o)) {
+          option.push(
+            isDisabled(o)
+              ? classes.optionSelectedDisabled
+              : classes.optionSelected
+          )
+        } else if (isDisabled(o) || (g && isDisabled(g))) {
+          option.push(classes.optionDisabled)
+        }
+
+        return option
+      },
+      noOptions: classes.noOptions,
+      noResults: classes.noResults,
+      fakeInput: classes.fakeInput,
+    }
+  })
+
+  return {
+    classList,
+    showDropdown,
+  }
+}

resources/scripts/components/base-select/composables/useData.js

@@ -0,0 +1,56 @@
+import { toRefs } from 'vue'
+import isNullish from './../utils/isNullish'
+
+export default function useData(props, context, dep) {
+  const { object, valueProp, mode } = toRefs(props)
+
+  // ============ DEPENDENCIES ============
+
+  const iv = dep.iv
+
+  // =============== METHODS ==============
+
+  const update = (val) => {
+    // Setting object(s) as internal value
+    iv.value = makeInternal(val)
+
+    // Setting object(s) or plain value as external
+    // value based on `option` setting
+    const externalVal = makeExternal(val)
+
+    context.emit('change', externalVal)
+    context.emit('input', externalVal)
+    context.emit('update:modelValue', externalVal)
+  }
+
+  // no export
+  const makeExternal = (val) => {
+    // If external value should be object
+    // no transformation is required
+    if (object.value) {
+      return val
+    }
+
+    // No need to transform if empty value
+    if (isNullish(val)) {
+      return val
+    }
+
+    // If external should be plain transform
+    // value object to plain values
+    return !Array.isArray(val) ? val[valueProp.value] : val.map(v => v[valueProp.value])
+  }
+
+  // no export
+  const makeInternal = (val) => {
+    if (isNullish(val)) {
+      return mode.value === 'single' ? {} : []
+    }
+
+    return val
+  }
+
+  return {
+    update,
+  }
+}

resources/scripts/components/base-select/composables/useDropdown.js

@@ -0,0 +1,35 @@
+import { ref, toRefs } from 'vue'
+
+export default function useDropdown(props, context, dep) {
+  const { disabled } = toRefs(props)
+
+  // ================ DATA ================
+
+  const isOpen = ref(false)
+
+  // =============== METHODS ==============
+
+  const open = () => {
+    if (isOpen.value || disabled.value) {
+      return
+    }
+
+    isOpen.value = true
+    context.emit('open')
+  }
+
+  const close = () => {
+    if (!isOpen.value) {
+      return
+    }
+
+    isOpen.value = false
+    context.emit('close')
+  }
+
+  return {
+    isOpen,
+    open,
+    close,
+  }
+}

resources/scripts/components/base-select/composables/useKeyboard.js

@@ -0,0 +1,140 @@
+import { toRefs } from 'vue'
+
+export default function useKeyboard(props, context, dep) {
+  const {
+    mode, addTagOn, createTag, openDirection, searchable,
+    showOptions, valueProp, groups: groupped,
+  } = toRefs(props)
+
+  // ============ DEPENDENCIES ============
+
+  const iv = dep.iv
+  const update = dep.update
+  const search = dep.search
+  const setPointer = dep.setPointer
+  const selectPointer = dep.selectPointer
+  const backwardPointer = dep.backwardPointer
+  const forwardPointer = dep.forwardPointer
+  const blur = dep.blur
+  const fo = dep.fo
+
+  // =============== METHODS ==============
+
+  // no export
+  const preparePointer = () => {
+    // When options are hidden and creating tags is allowed
+    // no pointer will be set (because options are hidden).
+    // In such case we need to set the pointer manually to the
+    // first option, which equals to the option created from
+    // the search value.
+    if (mode.value === 'tags' && !showOptions.value && createTag.value && searchable.value && !groupped.value) {
+      setPointer(fo.value[fo.value.map(o => o[valueProp.value]).indexOf(search.value)])
+    }
+  }
+
+  const handleKeydown = (e) => {
+    switch (e.keyCode) {
+      // backspace
+      case 8:
+        if (mode.value === 'single') {
+          return
+        }
+
+        if (searchable.value && [null, ''].indexOf(search.value) === -1) {
+          return
+        }
+
+        if (iv.value.length === 0) {
+          return
+        }
+
+        update([...iv.value].slice(0, -1))
+        break
+
+      // enter
+      case 13:
+        e.preventDefault()
+
+        if (mode.value === 'tags' && addTagOn.value.indexOf('enter') === -1 && createTag.value) {
+          return
+        }
+
+        preparePointer()
+        selectPointer()
+        break
+
+      // space
+      case 32:
+        if (searchable.value && mode.value !== 'tags' && !createTag.value) {
+          return
+        }
+
+        if (mode.value === 'tags' && ((addTagOn.value.indexOf('space') === -1 && createTag.value) || !createTag.value)) {
+          return
+        }
+
+        e.preventDefault()
+
+        preparePointer()
+        selectPointer()
+        break
+
+      // tab
+      // semicolon
+      // comma
+      case 9:
+      case 186:
+      case 188:
+        if (mode.value !== 'tags') {
+          return
+        }
+
+        const charMap = {
+          9: 'tab',
+          186: ';',
+          188: ','
+        }
+
+        if (addTagOn.value.indexOf(charMap[e.keyCode]) === -1 || !createTag.value) {
+          return
+        }
+
+        preparePointer()
+        selectPointer()
+        e.preventDefault()
+        break
+
+      // escape
+      case 27:
+        blur()
+        break
+
+      // up
+      case 38:
+        e.preventDefault()
+
+        if (!showOptions.value) {
+          return
+        }
+
+        openDirection.value === 'top' ? forwardPointer() : backwardPointer()
+        break
+
+      // down
+      case 40:
+        e.preventDefault()
+
+        if (!showOptions.value) {
+          return
+        }
+
+        openDirection.value === 'top' ? backwardPointer() : forwardPointer()
+        break
+    }
+  }
+
+  return {
+    handleKeydown,
+    preparePointer,
+  }
+}

resources/scripts/components/base-select/composables/useMultiselect.js

@@ -0,0 +1,82 @@
+import { ref, toRefs, computed } from 'vue'
+
+export default function useMultiselect(props, context, dep) {
+  const { searchable, disabled } = toRefs(props)
+
+  // ============ DEPENDENCIES ============
+
+  const input = dep.input
+  const open = dep.open
+  const close = dep.close
+  const clearSearch = dep.clearSearch
+
+  // ================ DATA ================
+
+  const multiselect = ref(null)
+
+  const isActive = ref(false)
+
+  // ============== COMPUTED ==============
+
+  const tabindex = computed(() => {
+    return searchable.value || disabled.value ? -1 : 0
+  })
+
+  // =============== METHODS ==============
+
+  const blur = () => {
+    if (searchable.value) {
+      input.value.blur()
+    }
+
+    multiselect.value.blur()
+  }
+
+  const handleFocus = () => {
+    if (searchable.value && !disabled.value) {
+      input.value.focus()
+    }
+  }
+
+  const activate = () => {
+
+    if (disabled.value) {
+      return
+    }
+
+    isActive.value = true
+
+    open()
+  }
+
+  const deactivate = () => {
+    isActive.value = false
+
+    setTimeout(() => {
+      if (!isActive.value) {
+        close()
+        clearSearch()
+      }
+    }, 1)
+  }
+
+  const handleCaretClick = () => {
+    if (isActive.value) {
+      deactivate()
+      blur()
+    } else {
+      activate()
+    }
+  }
+
+  return {
+    multiselect,
+    tabindex,
+    isActive,
+    blur,
+    handleFocus,
+    activate,
+    deactivate,
+    handleCaretClick,
+  }
+}

resources/scripts/components/base-select/composables/useOptions.js

@@ -0,0 +1,626 @@
+import { ref, toRefs, computed, watch, nextTick } from 'vue'
+import normalize from './../utils/normalize'
+import isObject from './../utils/isObject'
+import isNullish from './../utils/isNullish'
+import arraysEqual from './../utils/arraysEqual'
+
+export default function useOptions(props, context, dep) {
+  const {
+    options, mode, trackBy, limit, hideSelected, createTag, label,
+    appendNewTag, multipleLabel, object, loading, delay, resolveOnLoad,
+    minChars, filterResults, clearOnSearch, clearOnSelect, valueProp,
+    canDeselect, max, strict, closeOnSelect, groups: groupped, groupLabel,
+    groupOptions, groupHideEmpty, groupSelect,
+  } = toRefs(props)
+
+  // ============ DEPENDENCIES ============
+
+  const iv = dep.iv
+  const ev = dep.ev
+  const search = dep.search
+  const clearSearch = dep.clearSearch
+  const update = dep.update
+  const pointer = dep.pointer
+  const clearPointer = dep.clearPointer
+  const blur = dep.blur
+  const deactivate = dep.deactivate
+
+  // ================ DATA ================
+
+  // no export
+  // appendedOptions
+  const ap = ref([])
+
+  // no export
+  // resolvedOptions
+  const ro = ref([])
+
+  const resolving = ref(false)
+
+  // ============== COMPUTED ==============
+
+  // no export
+  // extendedOptions
+  const eo = computed(() => {
+    if (groupped.value) {
+      let groups = ro.value || /* istanbul ignore next */[]
+
+      let eo = []
+
+      groups.forEach((group) => {
+        optionsToArray(group[groupOptions.value]).forEach((option) => {
+          eo.push(Object.assign({}, option, group.disabled ? { disabled: true } : {}))
+        })
+      })
+
+      return eo
+    } else {
+      let eo = optionsToArray(ro.value || [])
+
+      if (ap.value.length) {
+        eo = eo.concat(ap.value)
+      }
+
+      return eo
+    }
+  })
+
+  const fg = computed(() => {
+    if (!groupped.value) {
+      return []
+    }
+
+    return filterGroups((ro.value || /* istanbul ignore next */[]).map((group) => {
+      const arrayOptions = optionsToArray(group[groupOptions.value])
+
+      return {
+        ...group,
+        group: true,
+        [groupOptions.value]: filterOptions(arrayOptions, false).map(o => Object.assign({}, o, group.disabled ? { disabled: true } : {})),
+        __VISIBLE__: filterOptions(arrayOptions).map(o => Object.assign({}, o, group.disabled ? { disabled: true } : {})),
+      }
+      // Difference between __VISIBLE__ and {groupOptions}: visible does not contain selected options when hideSelected=true
+    }))
+  })
+
+  // filteredOptions
+  const fo = computed(() => {
+    let options = eo.value
+
+    if (createdTag.value.length) {
+      options = createdTag.value.concat(options)
+    }
+
+    options = filterOptions(options)
+
+    if (limit.value > 0) {
+      options = options.slice(0, limit.value)
+    }
+
+    return options
+  })
+
+  const hasSelected = computed(() => {
+    switch (mode.value) {
+      case 'single':
+        return !isNullish(iv.value[valueProp.value])
+
+      case 'multiple':
+      case 'tags':
+        return !isNullish(iv.value) && iv.value.length > 0
+    }
+  })
+
+  const multipleLabelText = computed(() => {
+    return multipleLabel !== undefined && multipleLabel.value !== undefined
+      ? multipleLabel.value(iv.value)
+      : (iv.value && iv.value.length > 1 ? `${iv.value.length} options selected` : `1 option selected`)
+  })
+
+  const noOptions = computed(() => {
+    return !eo.value.length && !resolving.value && !createdTag.value.length
+  })
+
+
+  const noResults = computed(() => {
+    return eo.value.length > 0 && fo.value.length == 0 && ((search.value && groupped.value) || !groupped.value)
+  })
+
+  // no export
+  const createdTag = computed(() => {
+    if (createTag.value === false || !search.value) {
+      return []
+    }
+
+    return getOptionByTrackBy(search.value) !== -1 ? [] : [{
+      [valueProp.value]: search.value,
+      [label.value]: search.value,
+      [trackBy.value]: search.value,
+    }]
+  })
+
+  // no export
+  const nullValue = computed(() => {
+    switch (mode.value) {
+      case 'single':
+        return null
+
+      case 'multiple':
+      case 'tags':
+        return []
+    }
+  })
+
+  const busy = computed(() => {
+    return loading.value || resolving.value
+  })
+
+  // =============== METHODS ==============
+
+  /**
+   * @param {array|object|string|number} option
+   */
+  const select = (option) => {
+    if (typeof option !== 'object') {
+      option = getOption(option)
+    }
+
+    switch (mode.value) {
+      case 'single':
+        update(option)
+        break
+
+      case 'multiple':
+      case 'tags':
+        update((iv.value).concat(option))
+        break
+    }
+
+    context.emit('select', finalValue(option), option)
+  }
+
+  const deselect = (option) => {
+    if (typeof option !== 'object') {
+      option = getOption(option)
+    }
+
+    switch (mode.value) {
+      case 'single':
+        clear()
+        break
+
+      case 'tags':
+      case 'multiple':
+        update(Array.isArray(option)
+          ? iv.value.filter(v => option.map(o => o[valueProp.value]).indexOf(v[valueProp.value]) === -1)
+          : iv.value.filter(v => v[valueProp.value] != option[valueProp.value]))
+        break
+    }
+
+    context.emit('deselect', finalValue(option), option)
+  }
+
+  // no export
+  const finalValue = (option) => {
+    return object.value ? option : option[valueProp.value]
+  }
+
+  const remove = (option) => {
+    deselect(option)
+  }
+
+  const handleTagRemove = (option, e) => {
+    if (e.button !== 0) {
+      e.preventDefault()
+      return
+    }
+
+    remove(option)
+  }
+
+  const clear = () => {
+    context.emit('clear')
+    update(nullValue.value)
+  }
+
+  const isSelected = (option) => {
+    if (option.group !== undefined) {
+      return mode.value === 'single' ? false : areAllSelected(option[groupOptions.value]) && option[groupOptions.value].length
+    }
+
+    switch (mode.value) {
+      case 'single':
+        return !isNullish(iv.value) && iv.value[valueProp.value] == option[valueProp.value]
+
+      case 'tags':
+      case 'multiple':
+        return !isNullish(iv.value) && iv.value.map(o => o[valueProp.value]).indexOf(option[valueProp.value]) !== -1
+    }
+  }
+
+  const isDisabled = (option) => {
+    return option.disabled === true
+  }
+
+  const isMax = () => {
+    if (max === undefined || max.value === -1 || (!hasSelected.value && max.value > 0)) {
+      return false
+    }
+
+    return iv.value.length >= max.value
+  }
+
+  const handleOptionClick = (option) => {
+    if (isDisabled(option)) {
+      return
+    }
+
+    switch (mode.value) {
+      case 'single':
+        if (isSelected(option)) {
+          if (canDeselect.value) {
+            deselect(option)
+          }
+          return
+        }
+
+        blur()
+        select(option)
+        break
+
+      case 'multiple':
+        if (isSelected(option)) {
+          deselect(option)
+          return
+        }
+
+        if (isMax()) {
+          return
+        }
+
+        select(option)
+
+        if (clearOnSelect.value) {
+          clearSearch()
+        }
+
+        if (hideSelected.value) {
+          clearPointer()
+        }
+
+        // If we need to close the dropdown on select we also need
+        // to blur the input, otherwise further searches will not
+        // display any options
+        if (closeOnSelect.value) {
+          blur()
+        }
+        break
+
+      case 'tags':
+        if (isSelected(option)) {
+          deselect(option)
+          return
+        }
+
+        if (isMax()) {
+          return
+        }
+
+        if (getOption(option[valueProp.value]) === undefined && createTag.value) {
+          context.emit('tag', option[valueProp.value])
+
+          if (appendNewTag.value) {
+            appendOption(option)
+          }
+
+          clearSearch()
+        }
+
+        if (clearOnSelect.value) {
+          clearSearch()
+        }
+
+        select(option)
+
+        if (hideSelected.value) {
+          clearPointer()
+        }
+
+        // If we need to close the dropdown on select we also need
+        // to blur the input, otherwise further searches will not
+        // display any options
+        if (closeOnSelect.value) {
+          blur()
+        }
+        break
+    }
+
+    if (closeOnSelect.value) {
+      deactivate()
+    }
+  }
+
+  const handleGroupClick = (group) => {
+    if (isDisabled(group) || mode.value === 'single' || !groupSelect.value) {
+      return
+    }
+
+    switch (mode.value) {
+      case 'multiple':
+      case 'tags':
+        if (areAllEnabledSelected(group[groupOptions.value])) {
+          deselect(group[groupOptions.value])
+        } else {
+          select(group[groupOptions.value]
+            .filter(o => iv.value.map(v => v[valueProp.value]).indexOf(o[valueProp.value]) === -1)
+            .filter(o => !o.disabled)
+            .filter((o, k) => iv.value.length + 1 + k <= max.value || max.value === -1)
+          )
+        }
+        break
+    }
+
+    if (closeOnSelect.value) {
+      deactivate()
+    }
+  }
+
+  // no export
+  const areAllEnabledSelected = (options) => {
+    return options.find(o => !isSelected(o) && !o.disabled) === undefined
+  }
+
+  // no export
+  const areAllSelected = (options) => {
+    return options.find(o => !isSelected(o)) === undefined
+  }
+
+  const getOption = (val) => {
+    return eo.value[eo.value.map(o => String(o[valueProp.value])).indexOf(String(val))]
+  }
+
+  // no export
+  const getOptionByTrackBy = (val, norm = true) => {
+    return eo.value.map(o => o[trackBy.value]).indexOf(val)
+  }
+
+  // no export
+  const shouldHideOption = (option) => {
+    return ['tags', 'multiple'].indexOf(mode.value) !== -1 && hideSelected.value && isSelected(option)
+  }
+
+  // no export
+  const appendOption = (option) => {
+    ap.value.push(option)
+  }
+
+  // no export
+  const filterGroups = (groups) => {
+    // If the search has value we need to filter among
+    // he ones that are visible to the user to avoid
+    // displaying groups which technically have options
+    // based on search but that option is already selected.
+    return groupHideEmpty.value
+      ? groups.filter(g => search.value
+        ? g.__VISIBLE__.length
+        : g[groupOptions.value].length
+      )
+      : groups.filter(g => search.value ? g.__VISIBLE__.length : true)
+  }
+
+  // no export
+  const filterOptions = (options, excludeHideSelected = true) => {
+    let fo = options
+
+    if (search.value && filterResults.value) {
+      fo = fo.filter((option) => {
+        return normalize(option[trackBy.value], strict.value).indexOf(normalize(search.value, strict.value)) !== -1
+      })
+    }
+
+    if (hideSelected.value && excludeHideSelected) {
+      fo = fo.filter((option) => !shouldHideOption(option))
+    }
+
+    return fo
+  }
+
+  // no export
+  const optionsToArray = (options) => {
+    let uo = options
+
+    // Transforming an object to an array of objects
+    if (isObject(uo)) {
+      uo = Object.keys(uo).map((key) => {
+        let val = uo[key]
+
+        return { [valueProp.value]: key, [trackBy.value]: val, [label.value]: val }
+      })
+    }
+
+    // Transforming an plain arrays to an array of objects
+    uo = uo.map((val) => {
+      return typeof val === 'object' ? val : { [valueProp.value]: val, [trackBy.value]: val, [label.value]: val }
+    })
+
+    return uo
+  }
+
+  // no export
+  const initInternalValue = () => {
+    if (!isNullish(ev.value)) {
+      iv.value = makeInternal(ev.value)
+    }
+  }
+
+  const resolveOptions = (callback) => {
+    resolving.value = true
+
+    options.value(search.value).then((response) => {
+      ro.value = response
+
+      if (typeof callback == 'function') {
+        callback(response)
+      }
+
+      resolving.value = false
+    })
+  }
+
+  // no export
+  const refreshLabels = () => {
+    if (!hasSelected.value) {
+      return
+    }
+
+    if (mode.value === 'single') {
+      let newLabel = getOption(iv.value[valueProp.value])[label.value]
+
+      iv.value[label.value] = newLabel
+
+      if (object.value) {
+        ev.value[label.value] = newLabel
+      }
+    } else {
+      iv.value.forEach((val, i) => {
+        let newLabel = getOption(iv.value[i][valueProp.value])[label.value]
+
+        iv.value[i][label.value] = newLabel
+
+        if (object.value) {
+          ev.value[i][label.value] = newLabel
+        }
+      })
+    }
+  }
+
+  const refreshOptions = (callback) => {
+    resolveOptions(callback)
+  }
+
+  // no export
+  const makeInternal = (val) => {
+    if (isNullish(val)) {
+      return mode.value === 'single' ? {} : []
+    }
+
+    if (object.value) {
+      return val
+    }
+
+    // If external should be plain transform
+    // value object to plain values
+    return mode.value === 'single' ? getOption(val) || {} : val.filter(v => !!getOption(v)).map(v => getOption(v))
+  }
+
+  // ================ HOOKS ===============
+
+  if (mode.value !== 'single' && !isNullish(ev.value) && !Array.isArray(ev.value)) {
+    throw new Error(`v-model must be an array when using "${mode.value}" mode`)
+  }
+
+  if (options && typeof options.value == 'function') {
+    if (resolveOnLoad.value) {
+      resolveOptions(initInternalValue)
+    } else if (object.value == true) {
+      initInternalValue()
+    }
+  }
+  else {
+    ro.value = options.value
+
+    initInternalValue()
+  }
+
+  // ============== WATCHERS ==============
+
+  if (delay.value > -1) {
+    watch(search, (query) => {
+      if (query.length < minChars.value) {
+        return
+      }
+
+      resolving.value = true
+
+      if (clearOnSearch.value) {
+        ro.value = []
+      }
+      setTimeout(() => {
+        if (query != search.value) {
+          return
+        }
+
+        options.value(search.value).then((response) => {
+          if (query == search.value) {
+            ro.value = response
+            pointer.value = fo.value.filter(o => o.disabled !== true)[0] || null
+            resolving.value = false
+          }
+        })
+      }, delay.value)
+
+    }, { flush: 'sync' })
+  }
+
+  watch(ev, (newValue) => {
+    if (isNullish(newValue)) {
+      iv.value = makeInternal(newValue)
+      return
+    }
+
+    switch (mode.value) {
+      case 'single':
+        if (object.value ? newValue[valueProp.value] != iv.value[valueProp.value] : newValue != iv.value[valueProp.value]) {
+          iv.value = makeInternal(newValue)
+        }
+        break
+
+      case 'multiple':
+      case 'tags':
+        if (!arraysEqual(object.value ? newValue.map(o => o[valueProp.value]) : newValue, iv.value.map(o => o[valueProp.value]))) {
+          iv.value = makeInternal(newValue)
+        }
+        break
+    }
+  }, { deep: true })
+
+  if (typeof props.options !== 'function') {
+    watch(options, (n, o) => {
+      ro.value = props.options
+
+      if (!Object.keys(iv.value).length) {
+        initInternalValue()
+      }
+
+      refreshLabels()
+    })
+  }
+
+  return {
+    fo,
+    filteredOptions: fo,
+    hasSelected,
+    multipleLabelText,
+    eo,
+    extendedOptions: eo,
+    fg,
+    filteredGroups: fg,
+    noOptions,
+    noResults,
+    resolving,
+    busy,
+    select,
+    deselect,
+    remove,
+    clear,
+    isSelected,
+    isDisabled,
+    isMax,
+    getOption,
+    handleOptionClick,
+    handleGroupClick,
+    handleTagRemove,
+    refreshOptions,
+    resolveOptions,
+  }
+}

resources/scripts/components/base-select/composables/usePointer.js

@@ -0,0 +1,33 @@
+import { ref, toRefs } from 'vue'
+
+export default function usePointer(props, context, dep) {
+  const { groupSelect, mode, groups } = toRefs(props)
+
+  // ================ DATA ================
+
+  const pointer = ref(null)
+
+  // =============== METHODS ==============
+
+  const setPointer = (option) => {
+    if (option === undefined || (option !== null && option.disabled)) {
+      return
+    }
+
+    if (groups.value && option && option.group && (mode.value === 'single' || !groupSelect.value)) {
+      return
+    }
+
+    pointer.value = option
+  }
+
+  const clearPointer = () => {
+    setPointer(null)
+  }
+
+  return {
+    pointer,
+    setPointer,
+    clearPointer,
+  }
+}

resources/scripts/components/base-select/composables/usePointerAction.js

@@ -0,0 +1,241 @@
+import { toRefs, watch, nextTick, computed } from 'vue'
+
+export default function usePointer(props, context, dep) {
+  const {
+    valueProp, showOptions, searchable, groupLabel,
+    groups: groupped, mode, groupSelect,
+  } = toRefs(props)
+
+  // ============ DEPENDENCIES ============
+
+  const fo = dep.fo
+  const fg = dep.fg
+  const handleOptionClick = dep.handleOptionClick
+  const handleGroupClick = dep.handleGroupClick
+  const search = dep.search
+  const pointer = dep.pointer
+  const setPointer = dep.setPointer
+  const clearPointer = dep.clearPointer
+  const multiselect = dep.multiselect
+
+  // ============== COMPUTED ==============
+
+  // no export
+  const options = computed(() => {
+    return fo.value.filter(o => !o.disabled)
+  })
+
+  const groups = computed(() => {
+    return fg.value.filter(o => !o.disabled)
+  })
+
+  const canPointGroups = computed(() => {
+    return mode.value !== 'single' && groupSelect.value
+  })
+
+  const isPointerGroup = computed(() => {
+    return pointer.value && pointer.value.group
+  })
+
+  const currentGroup = computed(() => {
+    return getParentGroup(pointer.value)
+  })
+
+  const prevGroup = computed(() => {
+    const group = isPointerGroup.value ? pointer.value : /* istanbul ignore next */ getParentGroup(pointer.value)
+    const groupIndex = groups.value.map(g => g[groupLabel.value]).indexOf(group[groupLabel.value])
+    let prevGroup = groups.value[groupIndex - 1]
+
+    if (prevGroup === undefined) {
+      prevGroup = lastGroup.value
+    }
+
+    return prevGroup
+  })
+
+  const nextGroup = computed(() => {
+    let nextIndex = groups.value.map(g => g.label).indexOf(isPointerGroup.value
+      ? pointer.value[groupLabel.value]
+      : getParentGroup(pointer.value)[groupLabel.value]) + 1
+
+    if (groups.value.length <= nextIndex) {
+      nextIndex = 0
+    }
+
+    return groups.value[nextIndex]
+  })
+
+  const lastGroup = computed(() => {
+    return [...groups.value].slice(-1)[0]
+  })
+
+  const currentGroupFirstEnabledOption = computed(() => {
+    return pointer.value.__VISIBLE__.filter(o => !o.disabled)[0]
+  })
+
+  const currentGroupPrevEnabledOption = computed(() => {
+    const options = currentGroup.value.__VISIBLE__.filter(o => !o.disabled)
+    return options[options.map(o => o[valueProp.value]).indexOf(pointer.value[valueProp.value]) - 1]
+  })
+
+  const currentGroupNextEnabledOption = computed(() => {
+    const options = getParentGroup(pointer.value).__VISIBLE__.filter(o => !o.disabled)
+    return options[options.map(o => o[valueProp.value]).indexOf(pointer.value[valueProp.value]) + 1]
+  })
+
+  const prevGroupLastEnabledOption = computed(() => {
+    return [...prevGroup.value.__VISIBLE__.filter(o => !o.disabled)].slice(-1)[0]
+  })
+
+  const lastGroupLastEnabledOption = computed(() => {
+    return [...lastGroup.value.__VISIBLE__.filter(o => !o.disabled)].slice(-1)[0]
+  })
+
+  // =============== METHODS ==============
+
+  const isPointed = (option) => {
+    if (!pointer.value) {
+      return
+    }
+
+    if (option.group) {
+      return pointer.value[groupLabel.value] == option[groupLabel.value]
+    } else {
+      return pointer.value[valueProp.value] == option[valueProp.value]
+    }
+  }
+
+  const setPointerFirst = () => {
+    setPointer(options.value[0] || null)
+  }
+
+  const selectPointer = () => {
+    if (!pointer.value || pointer.value.disabled === true) {
+      return
+    }
+
+    if (isPointerGroup.value) {
+      handleGroupClick(pointer.value)
+    } else {
+      handleOptionClick(pointer.value)
+    }
+  }
+
+  const forwardPointer = () => {
+    if (pointer.value === null) {
+      setPointer((groupped.value && canPointGroups.value ? groups.value[0] : options.value[0]) || null)
+    }
+    else if (groupped.value && canPointGroups.value) {
+      let nextPointer = isPointerGroup.value ? currentGroupFirstEnabledOption.value : currentGroupNextEnabledOption.value
+
+      if (nextPointer === undefined) {
+        nextPointer = nextGroup.value
+      }
+
+      setPointer(nextPointer || /* istanbul ignore next */ null)
+    } else {
+      let next = options.value.map(o => o[valueProp.value]).indexOf(pointer.value[valueProp.value]) + 1
+
+      if (options.value.length <= next) {
+        next = 0
+      }
+
+      setPointer(options.value[next] || null)
+    }
+
+    nextTick(() => {
+      adjustWrapperScrollToPointer()
+    })
+  }
+
+  const backwardPointer = () => {
+    if (pointer.value === null) {
+      let prevPointer = options.value[options.value.length - 1]
+
+      if (groupped.value && canPointGroups.value) {
+        prevPointer = lastGroupLastEnabledOption.value
+
+        if (prevPointer === undefined) {
+          prevPointer = lastGroup.value
+        }
+      }
+
+      setPointer(prevPointer || null)
+    }
+    else if (groupped.value && canPointGroups.value) {
+      let prevPointer = isPointerGroup.value ? prevGroupLastEnabledOption.value : currentGroupPrevEnabledOption.value
+
+      if (prevPointer === undefined) {
+        prevPointer = isPointerGroup.value ? prevGroup.value : currentGroup.value
+      }
+
+      setPointer(prevPointer || /* istanbul ignore next */ null)
+    } else {
+      let prevIndex = options.value.map(o => o[valueProp.value]).indexOf(pointer.value[valueProp.value]) - 1
+
+      if (prevIndex < 0) {
+        prevIndex = options.value.length - 1
+      }
+
+      setPointer(options.value[prevIndex] || null)
+    }
+
+    nextTick(() => {
+      adjustWrapperScrollToPointer()
+    })
+  }
+
+  const getParentGroup = (option) => {
+    return groups.value.find((group) => {
+      return group.__VISIBLE__.map(o => o[valueProp.value]).indexOf(option[valueProp.value]) !== -1
+    })
+  }
+
+  // no export
+  /* istanbul ignore next */
+  const adjustWrapperScrollToPointer = () => {
+    let pointedOption = multiselect.value.querySelector(`[data-pointed]`)
+
+    if (!pointedOption) {
+      return
+    }
+
+    let wrapper = pointedOption.parentElement.parentElement
+
+    if (groupped.value) {
+      wrapper = isPointerGroup.value
+        ? pointedOption.parentElement.parentElement.parentElement
+        : pointedOption.parentElement.parentElement.parentElement.parentElement
+    }
+
+    if (pointedOption.offsetTop + pointedOption.offsetHeight > wrapper.clientHeight + wrapper.scrollTop) {
+      wrapper.scrollTop = pointedOption.offsetTop + pointedOption.offsetHeight - wrapper.clientHeight
+    }
+
+    if (pointedOption.offsetTop < wrapper.scrollTop) {
+      wrapper.scrollTop = pointedOption.offsetTop
+    }
+  }
+
+  // ============== WATCHERS ==============
+
+  watch(search, (val) => {
+    if (searchable.value) {
+      if (val.length && showOptions.value) {
+        setPointerFirst()
+      } else {
+        clearPointer()
+      }
+    }
+  })
+
+  return {
+    pointer,
+    canPointGroups,
+    isPointed,
+    setPointerFirst,
+    selectPointer,
+    forwardPointer,
+    backwardPointer,
+  }
+}

resources/scripts/components/base-select/composables/useSearch.js

@@ -0,0 +1,41 @@
+import { ref, toRefs, computed, watch } from 'vue'
+
+export default function useSearch (props, context, dep)
+{
+  const { preserveSearch } = toRefs(props)
+
+  // ================ DATA ================
+
+  const search = ref(props.initialSearch) || ref(null)
+
+  const input = ref(null)
+
+
+  // =============== METHODS ==============
+
+  const clearSearch = () => {
+    if (!preserveSearch.value) search.value = ''
+  }
+
+  const handleSearchInput = (e) => {
+    search.value = e.target.value
+  }
+
+  const handlePaste = (e) => {
+    context.emit('paste', e)
+  }
+
+  // ============== WATCHERS ==============
+
+  watch(search, (val) => {
+    context.emit('search-change', val)
+  })
+
+  return {
+    search,
+    input,
+    clearSearch,
+    handleSearchInput,
+    handlePaste,
+  }
+}

resources/scripts/components/base-select/composables/useValue.js

@@ -0,0 +1,33 @@
+import { computed, toRefs, ref } from 'vue'
+
+export default function useValue(props, context) {
+  const { value, modelValue, mode, valueProp } = toRefs(props)
+
+  // ================ DATA ================
+
+  // internalValue
+  const iv = ref(mode.value !== 'single' ? [] : {})
+
+  // ============== COMPUTED ==============
+
+  /* istanbul ignore next */
+  // externalValue
+  const ev = context.expose !== undefined ? modelValue : value
+
+  const plainValue = computed(() => {
+    return mode.value === 'single' ? iv.value[valueProp.value] : iv.value.map(v => v[valueProp.value])
+  })
+
+  const textValue = computed(() => {
+    return mode.value !== 'single' ? iv.value.map(v => v[valueProp.value]).join(',') : iv.value[valueProp.value]
+  })
+
+  return {
+    iv,
+    internalValue: iv,
+    ev,
+    externalValue: ev,
+    textValue,
+    plainValue,
+  }
+}