vue-extended-multiselect v0.5.4

vue-extended-multiselect v0.5.4

Brief annotation

Vue extended multiselect is a component that was created for simplification of custom settings of built-in select element. This component allows developer to escape writing many excess css-rules by using built-in themes and to escape problems with different kinds of provided options. Various decoration of options list by some extra slots will help developer to make it more informative and obvious. More thorough filtering of raw options list given by developer excludes sudden errors if kind of option is not intended for extended multiselect. Switchable useful warnings will help to catch possible errors that may occur while working with options. Tools for working with selected options will allow user to control amount of displayed options and quickly deselect them. Such tools also can be customized by developer. Various slots can help developer to customize to his liking options list, elements with selected options in multiple select or some other interaction elements. You can use this component in your web-applications based on Vue 2 framework. If you are using next Vue versions, try "vue3-extended-multiselect". These packages are identical.

Page with live examples

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

These examples are based on Vue3, but you can use the same props/slots/events in Vue2 version.

Installation with npm

npm install --save vue-extended-multiselect

Installation with yarn

yarn install --production vue-extended-multiselect

Importing

import VueExtendedMultiselect from "vue-extended-multiselect"

Importing types

import { UnionOptionType } from "vue-extended-multiselect"

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

Vue 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: start;
  --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.

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

.instance-class {
  --basic-color: purple;
  --outer-gap: 2rem;
  --border: 1px dotted;
}

Styling with props

Vue 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.

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

Changing svg color filter for icons.

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

Resizing icons.

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

Changing svg color filter for loader icon.

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

Changing general color theme of extended multiselect.

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

Changing toggle icon form.

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

Resizing option blocks in options list.

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

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

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

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

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

License

MIT