diff --git a/package-lock.json b/package-lock.json index c53b41f..42bc222 100755 --- a/package-lock.json +++ b/package-lock.json @@ -1494,7 +1494,7 @@ "version": "2.6.2", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==", - "dev": true + "extraneous": true }, "node_modules/@popperjs/core": { "version": "2.11.8", @@ -1614,20 +1614,20 @@ } }, "node_modules/@tanstack/virtual-core": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.1.2.tgz", - "integrity": "sha512-DATZJs8iejkIUqXZe6ruDAnjFo78BKnIIgqQZrc7CmEFqfLEN/TPD91n4hRfo6hpRB6xC00bwKxv7vdjFNEmOg==", + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.1.1.tgz", + "integrity": "sha512-I5lerX+RWxLM+zw35gwwQIoLvtkOm0ecuQUlEjNey+Ga6TnR66WKLBnSHre59onugxhpDLT2nofRYzxf+izDFQ==", "funding": { "type": "github", "url": "https://github.com/sponsors/tannerlinsley" } }, "node_modules/@tanstack/vue-virtual": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/@tanstack/vue-virtual/-/vue-virtual-3.1.2.tgz", - "integrity": "sha512-RmUnhsFtRw9p4Ti/+rG2Hr3y4yFhs8Xdsn7x9tkPoKINbVya/5RSCoNUCCAg2iXNjOI5a55iBNzNV0SVwxMwKA==", + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/@tanstack/vue-virtual/-/vue-virtual-3.1.1.tgz", + "integrity": "sha512-62am497kFAOEdOlK7ECEqKiZPxgaPk5BbK4ah+PhTrvz1yNRCHbUbYGe8JwV1DIoY9k1MNXGBLUW5hAa5tvnzQ==", "dependencies": { - "@tanstack/virtual-core": "3.1.2" + "@tanstack/virtual-core": "3.1.1" }, "funding": { "type": "github", diff --git a/src/assets/css/style.css b/src/assets/css/style.css index f0628b0..a899e7f 100755 --- a/src/assets/css/style.css +++ b/src/assets/css/style.css @@ -1065,6 +1065,10 @@ body { top: 100%; } +.top-px { + top: 1px; +} + .-z-\[1\] { z-index: -1; } @@ -1117,6 +1121,10 @@ body { grid-column: span 7 / span 7; } +.-m-px { + margin: -1px; +} + .m-0 { margin: 0px; } @@ -1129,6 +1137,14 @@ body { margin: 0.25rem; } +.m-3 { + margin: 0.75rem; +} + +.m-3\.5 { + margin: 0.875rem; +} + .m-auto { margin: auto; } @@ -1163,6 +1179,16 @@ body { margin-bottom: -0.5rem; } +.mx-0 { + margin-left: 0px; + margin-right: 0px; +} + +.mx-0\.5 { + margin-left: 0.125rem; + margin-right: 0.125rem; +} + .mx-1 { margin-left: 0.25rem; margin-right: 0.25rem; @@ -1227,6 +1253,10 @@ body { margin-right: -0.5rem; } +.-mt-px { + margin-top: -1px; +} + .mb-1 { margin-bottom: 0.25rem; } @@ -1295,6 +1325,10 @@ body { margin-right: 0.75rem; } +.mr-3\.5 { + margin-right: 0.875rem; +} + .mt-0 { margin-top: 0px; } @@ -1559,6 +1593,10 @@ body { width: 0.5rem; } +.w-2\.5 { + width: 0.625rem; +} + .w-20 { width: 5rem; } @@ -1647,10 +1685,18 @@ body { width: 100%; } +.w-px { + width: 1px; +} + .w-screen { width: 100vw; } +.min-w-0 { + min-width: 0px; +} + .min-w-full { min-width: 100%; } @@ -1866,6 +1912,10 @@ body { scroll-padding-bottom: 0.5rem; } +.list-none { + list-style-type: none; +} + .appearance-none { -webkit-appearance: none; -moz-appearance: none; @@ -2122,6 +2172,10 @@ body { border-radius: 0px; } +.rounded-sm { + border-radius: 0.125rem; +} + .rounded-xl { border-radius: 0.75rem; } @@ -2196,6 +2250,11 @@ body { border-bottom-right-radius: 0px; } +.rounded-t { + border-top-left-radius: 0.25rem; + border-top-right-radius: 0.25rem; +} + .rounded-t-2xl { border-top-left-radius: 1rem; border-top-right-radius: 1rem; @@ -2654,11 +2713,6 @@ body { background-color: rgb(204 204 0 / var(--tw-bg-opacity)); } -.bg-teal-50 { - --tw-bg-opacity: 1; - background-color: rgb(240 253 250 / var(--tw-bg-opacity)); -} - .bg-opacity-100 { --tw-bg-opacity: 1; } @@ -2691,6 +2745,18 @@ body { background-image: linear-gradient(to right, var(--tw-gradient-stops)); } +.bg-multiselect-caret { + background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 320 512' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'%3e%3c/path%3e%3c/svg%3e"); +} + +.bg-multiselect-remove { + background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 320 512' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z'%3e%3c/path%3e%3c/svg%3e"); +} + +.bg-multiselect-spinner { + background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 512 512' fill='%2322c55e' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M456.433 371.72l-27.79-16.045c-7.192-4.152-10.052-13.136-6.487-20.636 25.82-54.328 23.566-118.602-6.768-171.03-30.265-52.529-84.802-86.621-144.76-91.424C262.35 71.922 256 64.953 256 56.649V24.56c0-9.31 7.916-16.609 17.204-15.96 81.795 5.717 156.412 51.902 197.611 123.408 41.301 71.385 43.99 159.096 8.042 232.792-4.082 8.369-14.361 11.575-22.424 6.92z'%3e%3c/path%3e%3c/svg%3e"); +} + .bg-none { background-image: none; } @@ -2713,6 +2779,10 @@ body { background-position: center; } +.bg-no-repeat { + background-repeat: no-repeat; +} + .fill-\[\#4f46e5\] { fill: #4f46e5; } @@ -2783,6 +2853,10 @@ body { padding: 0px; } +.p-0\.5 { + padding: 0.125rem; +} + .p-1 { padding: 0.25rem; } @@ -2923,6 +2997,16 @@ body { padding-bottom: 2rem; } +.py-\[5px\] { + padding-top: 5px; + padding-bottom: 5px; +} + +.py-px { + padding-top: 1px; + padding-bottom: 1px; +} + .pb-10 { padding-bottom: 2.5rem; } @@ -2959,6 +3043,10 @@ body { padding-left: 0.75rem; } +.pl-3\.5 { + padding-left: 0.875rem; +} + .pr-0 { padding-right: 0px; } @@ -2987,6 +3075,10 @@ body { padding-right: 0.75rem; } +.pr-3\.5 { + padding-right: 0.875rem; +} + .pr-4 { padding-right: 1rem; } @@ -3047,6 +3139,10 @@ body { vertical-align: middle; } +.font-sans { + font-family: Plus Jakarta Sans, sans-serif; +} + .text-2xl { font-size: 1.5rem; line-height: 2rem; @@ -3614,10 +3710,6 @@ body { --tw-ring-color: rgb(96 165 250 / 0.5); } -.ring-blue-700\/10 { - --tw-ring-color: rgb(29 78 216 / 0.1); -} - .ring-gray-300 { --tw-ring-opacity: 1; --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity)); @@ -3711,11 +3803,6 @@ body { --tw-ring-color: rgb(255 255 51 / 0.5); } -.ring-blue-500 { - --tw-ring-opacity: 1; - --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity)); -} - .ring-opacity-5 { --tw-ring-opacity: 0.05; } @@ -4032,6 +4119,11 @@ body { border-color: rgb(3 91 113 / var(--tw-border-opacity)); } +.hover\:bg-black:hover { + --tw-bg-opacity: 1; + background-color: rgb(0 0 0 / var(--tw-bg-opacity)); +} + .hover\:bg-blue-100:hover { --tw-bg-opacity: 1; background-color: rgb(219 234 254 / var(--tw-bg-opacity)); @@ -4127,6 +4219,10 @@ body { background-color: rgb(255 255 0 / var(--tw-bg-opacity)); } +.hover\:bg-opacity-10:hover { + --tw-bg-opacity: 0.1; +} + .hover\:text-gray-400:hover { --tw-text-opacity: 1; color: rgb(156 163 175 / var(--tw-text-opacity)); @@ -4152,6 +4248,10 @@ body { color: rgb(2 73 90 / var(--tw-text-opacity)); } +.hover\:opacity-80:hover { + opacity: 0.8; +} + .hover\:shadow-sm:hover { --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); @@ -4506,6 +4606,10 @@ body { color: rgb(255 255 255 / var(--tw-text-opacity)); } +.group:hover .group-hover\:opacity-60 { + opacity: 0.6; +} + .group:focus .group-focus\:visible { visibility: visible; } @@ -5892,45 +5996,3 @@ body { .rtl\:text-right:where([dir="rtl"], [dir="rtl"] *) { text-align: right; } - -@media (prefers-color-scheme: dark) { - .dark\:bg-opacity-50 { - --tw-bg-opacity: 0.5; - } - - .dark\:text-vtd-primary-400 { - --tw-text-opacity: 1; - color: rgb(53 124 141 / var(--tw-text-opacity)); - } - - .dark\:text-opacity-70 { - --tw-text-opacity: 0.7; - } - - .dark\:hover\:text-vtd-primary-300:hover { - --tw-text-opacity: 1; - color: rgb(104 157 170 / var(--tw-text-opacity)); - } - - .dark\:focus\:border-vtd-primary-500:focus { - --tw-border-opacity: 1; - border-color: rgb(3 91 113 / var(--tw-border-opacity)); - } - - .dark\:focus\:bg-opacity-50:focus { - --tw-bg-opacity: 0.5; - } - - .dark\:focus\:text-vtd-primary-300:focus { - --tw-text-opacity: 1; - color: rgb(104 157 170 / var(--tw-text-opacity)); - } - - .dark\:focus\:ring-opacity-20:focus { - --tw-ring-opacity: 0.2; - } - - .dark\:focus\:ring-opacity-25:focus { - --tw-ring-opacity: 0.25; - } -} diff --git a/src/components/Select.vue b/src/components/Select.vue index bec93bd..5092440 100755 --- a/src/components/Select.vue +++ b/src/components/Select.vue @@ -4,7 +4,7 @@ interface DataItem { name: any } -import { ref, computed } from 'vue' +import { ref, computed, watch } from 'vue' import { RichSelect } from '@flavorly/vanilla-components' const props = defineProps({ @@ -21,10 +21,17 @@ const props = defineProps({ default: () => ({ id: 0, name: '' }) } }) -const emit = defineEmits(['update:selected']) +const emit = defineEmits(['update:selected']) const data = computed(() => [{ id: 0, name: props.placeholder }, ...props.data]) const selected = ref(data.value[0].id) + +watch( + () => props.selected, + (value: any) => { + selected.value = value.id + } +)