From 3603f943650a0a0b02639138717110cd26aab2d1 Mon Sep 17 00:00:00 2001 From: Adam Berecz Date: Sat, 7 Oct 2023 17:19:40 +0200 Subject: [PATCH] docs: tw classes fix --- README.md | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index dbd0ed1..7c09d0c 100644 --- a/README.md +++ b/README.md @@ -301,7 +301,7 @@ Join our [Discord channel](https://discord.gg/WhX2nG6GTQ) or [open an issue](htt | **searchStart** | `{boolean} false` | Whether the search should match the start of the options' `trackBy`s. | | **searchFilter** | `function(option, query, select$) null` | A custom search function that overrides the default search algorithm. | | **aria** | `object` | An object containing aria attributes to be added for the multiselect. | -| **classes** | `object` | An object of class names that gets merged with the default values. Default: `{`
  `container: 'multiselect',`
  `containerDisabled: 'is-disabled',`
  `containerOpen: 'is-open',`
  `containerOpenTop: 'is-open-top',`
  `containerActive: 'is-active',`
  `wrapper: 'multiselect-wrapper',`
  `singleLabel: 'multiselect-single-label',`
  `singleLabelText: 'multiselect-single-label-text',`
  `multipleLabel: 'multiselect-multiple-label',`
  `search: 'multiselect-search',`
  `tags: 'multiselect-tags',`
  `tag: 'multiselect-tag',`
  `tagWrapper: 'multiselect-tag-wrapper',`
  `tagWrapperBreak: 'multiselect-tag-wrapper-break',`
  `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',`
  `assist: 'multiselect-assistive-text'`
  `spacer: 'multiselect-spacer'`
`}` | +| **classes** | `object` | An object of class names that gets merged with the default values. Default: `{`
  `container: 'multiselect',`
  `containerDisabled: 'is-disabled',`
  `containerOpen: 'is-open',`
  `containerOpenTop: 'is-open-top',`
  `containerActive: 'is-active',`
  `wrapper: 'multiselect-wrapper',`
  `singleLabel: 'multiselect-single-label',`
  `singleLabelText: 'multiselect-single-label-text',`
  `multipleLabel: 'multiselect-multiple-label',`
  `search: 'multiselect-search',`
  `tags: 'multiselect-tags',`
  `tag: 'multiselect-tag',`
  `tagDisabled: 'is-disabled',`
  `tagWrapper: 'multiselect-tag-wrapper',`
  `tagWrapperBreak: 'multiselect-tag-wrapper-break',`
  `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',`
  `infinite: 'multiselect-infinite',`
  `infiniteSpinner: 'multiselect-infinite-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',`
  `assist: 'multiselect-assistive-text'`
  `spacer: 'multiselect-spacer'`
`}` | Vueform @@ -604,15 +604,16 @@ Alternatively you can define class names directly by passing them to the `Multis containerOpen: 'rounded-b-none', containerOpenTop: 'rounded-t-none', containerActive: 'ring ring-green-500 ring-opacity-30', + wrapper: 'relative mx-auto w-full flex items-center justify-end box-border cursor-pointer outline-none', singleLabel: 'flex items-center h-full max-w-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 pr-16 box-border rtl:left-auto rtl:right-0 rtl:pl-0 rtl:pr-3.5', singleLabelText: 'overflow-ellipsis overflow-hidden block whitespace-nowrap max-w-full', multipleLabel: 'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 rtl:left-auto rtl:right-0 rtl:pl-0 rtl:pr-3.5', search: 'w-full absolute inset-0 outline-none focus:ring-0 appearance-none box-border border-0 text-base font-sans bg-white rounded pl-3.5 rtl:pl-0 rtl:pr-3.5', tags: 'flex-grow flex-shrink flex flex-wrap items-center mt-1 pl-2 min-width-[0px] rtl:pl-0 rtl:pr-2', tag: 'bg-green-500 text-white text-sm font-semibold py-0.5 pl-2 rounded mr-1 mb-1 flex items-center whitespace-nowrap min-width-[0px] rtl:pl-0 rtl:pr-2 rtl:mr-0 rtl:ml-1', + tagDisabled: 'pr-2 opacity-50 rtl:pl-2', tagWrapper: 'whitespace-nowrap overflow-hidden overflow-ellipsis', tagWrapperBreak: 'whitespace-normal break-all', - tagDisabled: 'pr-2 opacity-50 rtl:pl-2', tagRemove: 'flex items-center justify-center p-1 mx-0.5 rounded-sm hover:bg-black hover:bg-opacity-10 group', tagRemoveIcon: 'bg-multiselect-remove bg-center bg-no-repeat opacity-30 inline-block w-3 h-3 group-hover:opacity-60', tagsSearchWrapper: 'inline-block relative mx-1 mb-1 flex-grow flex-shrink h-full', @@ -624,8 +625,8 @@ Alternatively you can define class names directly by passing them to the `Multis clear: 'pr-3.5 relative z-10 opacity-40 transition duration-300 flex-shrink-0 flex-grow-0 flex hover:opacity-80 rtl:pr-0 rtl:pl-3.5', clearIcon: 'bg-multiselect-remove bg-center bg-no-repeat w-2.5 h-4 py-px box-content inline-block', spinner: 'bg-multiselect-spinner bg-center bg-no-repeat w-4 h-4 z-10 mr-3.5 animate-spin flex-shrink-0 flex-grow-0 rtl:mr-0 rtl:ml-3.5', - inifite: 'flex items-center justify-center w-full', - inifiteSpinner: 'bg-multiselect-spinner bg-center bg-no-repeat w-4 h-4 z-10 animate-spin flex-shrink-0 flex-grow-0 m-3.5', + infinite: 'flex items-center justify-center w-full', + infiniteSpinner: 'bg-multiselect-spinner bg-center bg-no-repeat w-4 h-4 z-10 animate-spin flex-shrink-0 flex-grow-0 m-3.5', dropdown: 'max-h-60 absolute -left-px -right-px bottom-0 transform translate-y-full border border-gray-300 -mt-px overflow-y-scroll z-50 bg-white flex flex-col rounded-b', dropdownTop: '-translate-y-full top-px bottom-auto rounded-b-none rounded-t', dropdownHidden: 'hidden', @@ -646,10 +647,11 @@ Alternatively you can define class names directly by passing them to the `Multis optionDisabled: 'text-gray-300 cursor-not-allowed', optionSelectedPointed: 'text-white bg-green-500 opacity-90', optionSelectedDisabled: 'text-green-100 bg-green-500 bg-opacity-50 cursor-not-allowed', - noOptions: 'py-2 px-3 text-gray-600 bg-white text-left', - noResults: 'py-2 px-3 text-gray-600 bg-white text-left', + noOptions: 'py-2 px-3 text-gray-600 bg-white text-left rtl:text-right', + noResults: 'py-2 px-3 text-gray-600 bg-white text-left rtl:text-right', fakeInput: 'bg-transparent absolute left-0 right-0 -bottom-px w-full h-px border-0 p-0 appearance-none outline-none text-transparent', - spacer: 'h-9 py-px box-content', + assist: 'absolute -m-px w-px h-px overflow-hidden' + spacer: 'h-9 py-px box-content' }" /> ```