From 4d6031a2577e74ca46a175c5f7f968efd43d44da Mon Sep 17 00:00:00 2001 From: Nejc Date: Fri, 24 Jan 2025 08:18:46 +0100 Subject: [PATCH 1/3] Remove deprecated Tailwind utilities, replace with equivalent alternatives --- themes/tailwind.css | 8 ++++---- themes/tailwind.scss | 8 ++++---- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/themes/tailwind.css b/themes/tailwind.css index 878c5d1..e467713 100644 --- a/themes/tailwind.css +++ b/themes/tailwind.css @@ -11,7 +11,7 @@ @apply rounded-t-none; } .multiselect.is-active { - @apply ring ring-green-500 ring-opacity-30; + @apply ring ring-green-500/30; } .multiselect-wrapper { @@ -54,7 +54,7 @@ } .multiselect-tag-remove { - @apply flex items-center justify-center p-1 mx-0.5 rounded-sm hover:bg-black hover:bg-opacity-10; + @apply flex items-center justify-center p-1 mx-0.5 rounded-sm hover:bg-black/10; } .multiselect-tag-remove-icon { @@ -145,7 +145,7 @@ @apply bg-green-600 text-white opacity-90; } .multiselect-group-label.is-selected.is-disabled { - @apply text-green-100 bg-green-600 bg-opacity-50 cursor-not-allowed; + @apply text-green-100 bg-green-600/50 cursor-not-allowed; } .multiselect-group-options { @@ -168,7 +168,7 @@ @apply text-white bg-green-500 opacity-90; } .multiselect-option.is-selected.is-disabled { - @apply text-green-100 bg-green-500 bg-opacity-50 cursor-not-allowed; + @apply text-green-100 bg-green-500/50 cursor-not-allowed; } .multiselect-no-options { diff --git a/themes/tailwind.scss b/themes/tailwind.scss index 986a2b0..63e7ac7 100644 --- a/themes/tailwind.scss +++ b/themes/tailwind.scss @@ -14,7 +14,7 @@ } &.is-active { - @apply ring ring-green-500 ring-opacity-30; + @apply ring ring-green-500/30; } } @@ -59,7 +59,7 @@ } .multiselect-tag-remove { - @apply flex items-center justify-center p-1 mx-0.5 rounded-sm hover:bg-black hover:bg-opacity-10; + @apply flex items-center justify-center p-1 mx-0.5 rounded-sm hover:bg-black/10; } .multiselect-tag-remove-icon { @@ -158,7 +158,7 @@ } &.is-selected.is-disabled { - @apply text-green-100 bg-green-600 bg-opacity-50 cursor-not-allowed; + @apply text-green-100 bg-green-600/50 cursor-not-allowed; } } @@ -186,7 +186,7 @@ } &.is-selected.is-disabled { - @apply text-green-100 bg-green-500 bg-opacity-50 cursor-not-allowed; + @apply text-green-100 bg-green-500/50 cursor-not-allowed; } } From 2cb1a42108eb0f2c9a9045a9e5475f226f8ec665 Mon Sep 17 00:00:00 2001 From: Nejc Date: Fri, 24 Jan 2025 09:49:23 +0100 Subject: [PATCH 2/3] Remove deprecated Tailwind utilities, replace with equivalent alternatives in README.md --- README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index a33bb52..4cb8d1b 100644 --- a/README.md +++ b/README.md @@ -616,7 +616,7 @@ Alternatively you can define class names directly by passing them to the `Multis containerDisabled: 'cursor-default bg-gray-100', containerOpen: 'rounded-b-none', containerOpenTop: 'rounded-t-none', - containerActive: 'ring ring-green-500 ring-opacity-30', + containerActive: 'ring ring-green-500/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', @@ -627,7 +627,7 @@ Alternatively you can define class names directly by passing them to the `Multis tagDisabled: 'pr-2 opacity-50 rtl:pl-2', tagWrapper: 'whitespace-nowrap overflow-hidden overflow-ellipsis', tagWrapperBreak: 'whitespace-normal break-all', - tagRemove: 'flex items-center justify-center p-1 mx-0.5 rounded-sm hover:bg-black hover:bg-opacity-10 group', + tagRemove: 'flex items-center justify-center p-1 mx-0.5 rounded-sm hover:bg-black/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', tagsSearch: 'absolute inset-0 border-0 outline-none focus:ring-0 appearance-none p-0 text-base font-sans box-border w-full', @@ -652,14 +652,14 @@ Alternatively you can define class names directly by passing them to the `Multis groupLabelSelected: 'bg-green-600 text-white', groupLabelDisabled: 'bg-gray-100 text-gray-300 cursor-not-allowed', groupLabelSelectedPointed: 'bg-green-600 text-white opacity-90', - groupLabelSelectedDisabled: 'text-green-100 bg-green-600 bg-opacity-50 cursor-not-allowed', + groupLabelSelectedDisabled: 'text-green-100 bg-green-600/50 cursor-not-allowed', groupOptions: 'p-0 m-0', option: 'flex items-center justify-start box-border text-left cursor-pointer text-base leading-snug py-2 px-3', optionPointed: 'text-gray-800 bg-gray-100', optionSelected: 'text-white bg-green-500', 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', + optionSelectedDisabled: 'text-green-100 bg-green-500/50 cursor-not-allowed', 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', From d92abc99c49b0420a5d2795d0a3bd512bcdaec4b Mon Sep 17 00:00:00 2001 From: Nejc Date: Fri, 24 Jan 2025 10:15:08 +0100 Subject: [PATCH 3/3] Rename utilities for shadow, outline, rounded, ring to new defaults, replace overflow-ellipsis with text-ellipsis, replace flex-grow and flex-shrink utilities to grow and shrink respectively --- README.md | 38 +++++++++++++++++++------------------- themes/tailwind.css | 36 ++++++++++++++++++------------------ themes/tailwind.scss | 36 ++++++++++++++++++------------------ 3 files changed, 55 insertions(+), 55 deletions(-) diff --git a/README.md b/README.md index 4cb8d1b..7d78015 100644 --- a/README.md +++ b/README.md @@ -612,36 +612,36 @@ Alternatively you can define class names directly by passing them to the `Multis ```vue ``` Certain classes has different states which are merged to the base class when the state is active. For example `dropdown` will be merged with `dropdownTop` when `open-direction: 'top'` resulting in the following classes: -```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 -translate-y-full top-px bottom-auto rounded-b-none rounded-t``` +```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-sm -translate-y-full top-px bottom-auto rounded-b-none rounded-t-sm``` The same is true for `container`, `tag`, `options`, `groupLabel` and `option` classes. diff --git a/themes/tailwind.css b/themes/tailwind.css index e467713..0222b7c 100644 --- a/themes/tailwind.css +++ b/themes/tailwind.css @@ -1,5 +1,5 @@ .multiselect { - @apply relative mx-auto w-full flex items-center justify-end box-border cursor-pointer border border-gray-300 rounded bg-white text-base leading-snug outline-none; + @apply relative mx-auto w-full flex items-center justify-end box-border cursor-pointer border border-gray-300 rounded-sm bg-white text-base leading-snug outline-hidden; } .multiselect.is-disabled { @apply cursor-default bg-gray-100; @@ -11,11 +11,11 @@ @apply rounded-t-none; } .multiselect.is-active { - @apply ring ring-green-500/30; + @apply ring-3 ring-green-500/30; } .multiselect-wrapper { - @apply relative mx-auto w-full flex items-center justify-end box-border cursor-pointer outline-none; + @apply relative mx-auto w-full flex items-center justify-end box-border cursor-pointer outline-hidden; } .multiselect-single-label { @@ -23,7 +23,7 @@ } .multiselect-single-label-text { - @apply overflow-ellipsis overflow-hidden block whitespace-nowrap max-w-full; + @apply text-ellipsis overflow-hidden block whitespace-nowrap max-w-full; } .multiselect-multiple-label { @@ -31,22 +31,22 @@ } .multiselect-search { - @apply 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; + @apply w-full absolute inset-0 outline-hidden focus:ring-0 appearance-none box-border border-0 text-base font-sans bg-white rounded-sm pl-3.5 rtl:pl-0 rtl:pr-3.5; } .multiselect-tags { - @apply flex-grow flex-shrink flex flex-wrap items-center mt-1 pl-2 min-w-0 rtl:pl-0 rtl:pr-2; + @apply grow shrink flex flex-wrap items-center mt-1 pl-2 min-w-0 rtl:pl-0 rtl:pr-2; } .multiselect-tag { - @apply 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-w-0 rtl:pl-0 rtl:pr-2 rtl:mr-0 rtl:ml-1; + @apply bg-green-500 text-white text-sm font-semibold py-0.5 pl-2 rounded-sm mr-1 mb-1 flex items-center whitespace-nowrap min-w-0 rtl:pl-0 rtl:pr-2 rtl:mr-0 rtl:ml-1; } .multiselect-tag.is-disabled { @apply pr-2 opacity-50 rtl:pl-2; } .multiselect-tag-wrapper { - @apply whitespace-nowrap overflow-hidden overflow-ellipsis; + @apply whitespace-nowrap overflow-hidden text-ellipsis; } .multiselect-tag-wrapper-break { @@ -54,7 +54,7 @@ } .multiselect-tag-remove { - @apply flex items-center justify-center p-1 mx-0.5 rounded-sm hover:bg-black/10; + @apply flex items-center justify-center p-1 mx-0.5 rounded-xs hover:bg-black/10; } .multiselect-tag-remove-icon { @@ -66,11 +66,11 @@ } .multiselect-tags-search-wrapper { - @apply inline-block relative mx-1 mb-1 flex-grow flex-shrink h-full; + @apply inline-block relative mx-1 mb-1 grow shrink h-full; } .multiselect-tags-search { - @apply absolute inset-0 border-0 outline-none focus:ring-0 appearance-none p-0 text-base font-sans box-border w-full; + @apply absolute inset-0 border-0 outline-hidden focus:ring-0 appearance-none p-0 text-base font-sans box-border w-full; } .multiselect-tags-search-copy { @@ -82,14 +82,14 @@ } .multiselect-caret { - @apply bg-multiselect-caret bg-center bg-no-repeat w-2.5 h-4 py-px box-content mr-3.5 relative z-10 opacity-40 flex-shrink-0 flex-grow-0 transition-transform transform pointer-events-none rtl:mr-0 rtl:ml-3.5; + @apply bg-multiselect-caret bg-center bg-no-repeat w-2.5 h-4 py-px box-content mr-3.5 relative z-10 opacity-40 shrink-0 grow-0 transition-transform transform pointer-events-none rtl:mr-0 rtl:ml-3.5; } .multiselect-caret.is-open { @apply rotate-180 pointer-events-auto; } .multiselect-clear { - @apply 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; + @apply pr-3.5 relative z-10 opacity-40 transition duration-300 shrink-0 grow-0 flex hover:opacity-80 rtl:pr-0 rtl:pl-3.5; } .multiselect-clear-icon { @@ -97,7 +97,7 @@ } .multiselect-spinner { - @apply 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; + @apply bg-multiselect-spinner bg-center bg-no-repeat w-4 h-4 z-10 mr-3.5 animate-spin shrink-0 grow-0 rtl:mr-0 rtl:ml-3.5; } .multiselect-inifite { @@ -105,14 +105,14 @@ } .multiselect-inifite-spinner { - @apply 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; + @apply bg-multiselect-spinner bg-center bg-no-repeat w-4 h-4 z-10 animate-spin shrink-0 grow-0 m-3.5; } .multiselect-dropdown { - @apply 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; + @apply 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-sm; } .multiselect-dropdown.is-top { - @apply -translate-y-full top-px bottom-auto rounded-b-none rounded-t; + @apply -translate-y-full top-px bottom-auto rounded-b-none rounded-t-sm; } .multiselect-dropdown.is-hidden { @apply hidden; @@ -180,7 +180,7 @@ } .multiselect-fake-input { - @apply bg-transparent absolute left-0 right-0 -bottom-px w-full h-px border-0 p-0 appearance-none outline-none text-transparent; + @apply bg-transparent absolute left-0 right-0 -bottom-px w-full h-px border-0 p-0 appearance-none outline-hidden text-transparent; } .multiselect-assistive-text { diff --git a/themes/tailwind.scss b/themes/tailwind.scss index 63e7ac7..f831ea2 100644 --- a/themes/tailwind.scss +++ b/themes/tailwind.scss @@ -1,5 +1,5 @@ .multiselect { - @apply relative mx-auto w-full flex items-center justify-end box-border cursor-pointer border border-gray-300 rounded bg-white text-base leading-snug outline-none; + @apply relative mx-auto w-full flex items-center justify-end box-border cursor-pointer border border-gray-300 rounded-sm bg-white text-base leading-snug outline-hidden; &.is-disabled { @apply cursor-default bg-gray-100; @@ -14,12 +14,12 @@ } &.is-active { - @apply ring ring-green-500/30; + @apply ring-3 ring-green-500/30; } } .multiselect-wrapper { - @apply relative mx-auto w-full flex items-center justify-end box-border cursor-pointer outline-none; + @apply relative mx-auto w-full flex items-center justify-end box-border cursor-pointer outline-hidden; } .multiselect-single-label { @@ -27,7 +27,7 @@ } .multiselect-single-label-text { - @apply overflow-ellipsis overflow-hidden block whitespace-nowrap max-w-full; + @apply text-ellipsis overflow-hidden block whitespace-nowrap max-w-full; } .multiselect-multiple-label { @@ -35,15 +35,15 @@ } .multiselect-search { - @apply 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; + @apply w-full absolute inset-0 outline-hidden focus:ring-0 appearance-none box-border border-0 text-base font-sans bg-white rounded-sm pl-3.5 rtl:pl-0 rtl:pr-3.5; } .multiselect-tags { - @apply flex-grow flex-shrink flex flex-wrap items-center mt-1 pl-2 min-w-0 rtl:pl-0 rtl:pr-2; + @apply grow shrink flex flex-wrap items-center mt-1 pl-2 min-w-0 rtl:pl-0 rtl:pr-2; } .multiselect-tag { - @apply 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-w-0 rtl:pl-0 rtl:pr-2 rtl:mr-0 rtl:ml-1; + @apply bg-green-500 text-white text-sm font-semibold py-0.5 pl-2 rounded-sm mr-1 mb-1 flex items-center whitespace-nowrap min-w-0 rtl:pl-0 rtl:pr-2 rtl:mr-0 rtl:ml-1; &.is-disabled { @apply pr-2 opacity-50 rtl:pl-2; @@ -51,7 +51,7 @@ } .multiselect-tag-wrapper { - @apply whitespace-nowrap overflow-hidden overflow-ellipsis; + @apply whitespace-nowrap overflow-hidden text-ellipsis; } .multiselect-tag-wrapper-break { @@ -59,7 +59,7 @@ } .multiselect-tag-remove { - @apply flex items-center justify-center p-1 mx-0.5 rounded-sm hover:bg-black/10; + @apply flex items-center justify-center p-1 mx-0.5 rounded-xs hover:bg-black/10; } .multiselect-tag-remove-icon { @@ -71,11 +71,11 @@ } .multiselect-tags-search-wrapper { - @apply inline-block relative mx-1 mb-1 flex-grow flex-shrink h-full; + @apply inline-block relative mx-1 mb-1 grow shrink h-full; } .multiselect-tags-search { - @apply absolute inset-0 border-0 outline-none focus:ring-0 appearance-none p-0 text-base font-sans box-border w-full; + @apply absolute inset-0 border-0 outline-hidden focus:ring-0 appearance-none p-0 text-base font-sans box-border w-full; } .multiselect-tags-search-copy { @@ -87,7 +87,7 @@ } .multiselect-caret { - @apply bg-multiselect-caret bg-center bg-no-repeat w-2.5 h-4 py-px box-content mr-3.5 relative z-10 opacity-40 flex-shrink-0 flex-grow-0 transition-transform transform pointer-events-none rtl:mr-0 rtl:ml-3.5; + @apply bg-multiselect-caret bg-center bg-no-repeat w-2.5 h-4 py-px box-content mr-3.5 relative z-10 opacity-40 shrink-0 grow-0 transition-transform transform pointer-events-none rtl:mr-0 rtl:ml-3.5; &.is-open { @apply rotate-180 pointer-events-auto; @@ -95,7 +95,7 @@ } .multiselect-clear { - @apply 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; + @apply pr-3.5 relative z-10 opacity-40 transition duration-300 shrink-0 grow-0 flex hover:opacity-80 rtl:pr-0 rtl:pl-3.5; } .multiselect-clear-icon { @@ -103,7 +103,7 @@ } .multiselect-spinner { - @apply 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; + @apply bg-multiselect-spinner bg-center bg-no-repeat w-4 h-4 z-10 mr-3.5 animate-spin shrink-0 grow-0 rtl:mr-0 rtl:ml-3.5; } .multiselect-inifite { @@ -111,14 +111,14 @@ } .multiselect-inifite-spinner { - @apply 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; + @apply bg-multiselect-spinner bg-center bg-no-repeat w-4 h-4 z-10 animate-spin shrink-0 grow-0 m-3.5; } .multiselect-dropdown { - @apply 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; + @apply 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-sm; &.is-top { - @apply -translate-y-full top-px bottom-auto rounded-b-none rounded-t; + @apply -translate-y-full top-px bottom-auto rounded-b-none rounded-t-sm; } &.is-hidden { @@ -199,7 +199,7 @@ } .multiselect-fake-input { - @apply bg-transparent absolute left-0 right-0 -bottom-px w-full h-px border-0 p-0 appearance-none outline-none text-transparent; + @apply bg-transparent absolute left-0 right-0 -bottom-px w-full h-px border-0 p-0 appearance-none outline-hidden text-transparent; } .multiselect-assistive-text {