vue3-extended-multiselect

vue3-extended-multiselect v3.0.2

Brief annotation

vue3-extended-multiselect is a component designed to simplify the custom configuration of the built-in select element. By leveraging its built-in themes, this component allows developers to avoid writing extensive CSS rules. It also eliminates common issues associated with handling different types of option data.

The component enhances the options list with various decorative slots, enabling developers to create a more informative and intuitive interface. Furthermore, it performs thorough filtering on the raw options list provided by the developer, preventing unexpected errors from unintended option formats. Switchable, helpful warnings assist in identifying potential errors during development.

For user convenience, the component includes tools to manage selected options, controlling the number displayed and allowing for quick deselection. Developers can also customize these tools to fit their specific needs. With various slots available, developers can freely customize the options list, the selected tags in multiple-select mode, and other interactive elements.

You can integrate this component into your web applications built with the Vue 3 framework.**

Page with live examples

https://vue3-extended-multiselect.surge.sh/

Installation with npm

npm install vue3-extended-multiselect

Installation with yarn

yarn add vue3-extended-multiselect

Installation with pnpm

pnpm add vue3-extended-multiselect

Importing

import Vue3ExtendedMultiselect from "vue3-extended-multiselect";

Importing types

import type { UnionOptionType } from "vue3-extended-multiselect";

Usage with UMD

Somewhere in your markup...

<script src="./public/scripts/vue3-extended-multiselect/index.umd.js"></script>

Somewhere in your script below...

const YourComponent = defineComponent({
  name: "YourComponent",
  components: {
    Vue3ExtendedMultiselect: window.Vue3ExtendedMultiselect,
  },
});

Table of contents

• Props list
• Slots list
• Events list
• Styling with css
• Styling with props
• License

Props list

Slots list

Events list

Styling with css

Vue3 extended multiselect provides following css-variables:

--basic-color: #708090;
--basic-transparent: rgba(112, 128, 144, 0.6);
--cancel: #b22222;
--cancel-backgound-color: rgba(179, 33, 33, 0.1);
--dark-slate-blue: #483d8b;
--dark-slate-blue-transparent: rgba(72, 61, 139, 0.6);
--dark-slate-grey: #2f4f4f;
--dark-slate-grey-transparent: rgba(47, 79, 79, 0.6);
--disabled: rgba(176, 176, 176, 0.6);
--hover-color: #ffffff;
--loader-color: #00bfff;
--strict: #000000;
--strict-transparent: rgba(0, 0, 0, 0.6);
--teal: #008080;
--teal-transparent: rgba(0, 128, 128, 0.6);

--block-border-radius: 4px;
--block-cancel-padding: 4px;
--block-gap: 6px;
--block-padding: 1px 3px 1px 7px;
--border-radius: 6px;
--border-radius-small: 3px;
--cancel-padding: 3px 8px;
--grid-columns: 1fr 36px 36px;
--grid-rows: 1fr 36px;
--half-size: 50%;
--icon-size-block: 14px;
--icon-size-large: 18px;
--icon-size-medium: 15px;
--icon-size-small: 12px;
--increaser-padding: 3px 7px;
--max-size: 100%;
--min-block-height: 25px;
--options-padding: 6px 0;
--outer-gap: 10px;
--root-padding: 6px 10px;
--toggle-icon-gap: 1px;
--wide-text: 700;
--wrapper-padding: 5px 10px;
--z-index-options: 10;

--border: 1px solid;
--default-cursor: default;
--icons-align-self: center;
--icons-justify-self: center;
--pointer-cursor: pointer;
--wrapper-transition: border-top-left-radius 250ms ease 0s, border-top-right-radius 250ms
    ease 0s, border-bottom-left-radius 250ms ease-out, border-bottom-right-radius 250ms
    ease-out;

You can override it globally or by particular instance class name.

<vue3-extended-multiselect class="instance-class" />

<style scoped>
  .instance-class {
    --basic-color: purple;
    --outer-gap: 2rem;
    --border: 1px dotted;
  }
</style>

Styling with props

Vue3 extended multiselect provides following props for customizing:

• errorBorderColor
• iconFilter
• iconSize
• loaderIconFilter
• themeType
• toggleIcon
• anyOptionWrapperBlockHeight
• toggleMaxHeight
• toggleMinHeight

Customizing examples

Changing border color when extended multiselect value is invalid.

<vue3-extended-multiselect error-border-color="#8B0000" />

Changing svg color filter for icons.

<vue3-extended-multiselect icon-filter="green" />

Resizing icons.

<vue3-extended-multiselect icon-size="small" />

Changing svg color filter for loader icon.

<vue3-extended-multiselect icon-size="small" />

Changing general color theme of extended multiselect.

<vue3-extended-multiselect theme-type="slate-blue" />

Changing toggle icon form.

<vue3-extended-multiselect toggle-icon="triangle-arrow" />

Resizing option blocks in options list.

<vue3-extended-multiselect :any-option-wrapper-block-height="60" />

Changing "max-height" css-property of options list.

<vue3-extended-multiselect :toggle-max-height="500" />

Changing "min-height" css-property of options list.

<vue3-extended-multiselect :toggle-min-height="500" />

License

MIT