Update main.ts and style.css
This commit is contained in:
Dede Fuji Abdul
parent
415f1c8deb
commit
28424a4ffa
@ -1675,6 +1675,30 @@ body {
|
|||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.min-h-\[56px\] {
|
||||||
|
min-height: 56px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.min-h-\[40px\] {
|
||||||
|
min-height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.min-h-\[36px\] {
|
||||||
|
min-height: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.min-h-\[24px\] {
|
||||||
|
min-height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.min-h-\[28px\] {
|
||||||
|
min-height: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.min-h-\[32px\] {
|
||||||
|
min-height: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
.w-0 {
|
.w-0 {
|
||||||
width: 0px;
|
width: 0px;
|
||||||
}
|
}
|
||||||
@ -2839,6 +2863,11 @@ body {
|
|||||||
background-color: rgb(204 204 0 / var(--tw-bg-opacity));
|
background-color: rgb(204 204 0 / var(--tw-bg-opacity));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.\!bg-gray-200 {
|
||||||
|
--tw-bg-opacity: 1 !important;
|
||||||
|
background-color: rgb(229 231 235 / var(--tw-bg-opacity)) !important;
|
||||||
|
}
|
||||||
|
|
||||||
.bg-opacity-100 {
|
.bg-opacity-100 {
|
||||||
--tw-bg-opacity: 1;
|
--tw-bg-opacity: 1;
|
||||||
}
|
}
|
||||||
@ -3245,6 +3274,10 @@ body {
|
|||||||
padding-top: 1.25rem;
|
padding-top: 1.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pl-0 {
|
||||||
|
padding-left: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
.text-left {
|
.text-left {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
@ -3792,6 +3825,12 @@ body {
|
|||||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.shadow-none {
|
||||||
|
--tw-shadow: 0 0 #0000;
|
||||||
|
--tw-shadow-colored: 0 0 #0000;
|
||||||
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||||
|
}
|
||||||
|
|
||||||
.shadow-gray-50 {
|
.shadow-gray-50 {
|
||||||
--tw-shadow-color: #f9fafb;
|
--tw-shadow-color: #f9fafb;
|
||||||
--tw-shadow: var(--tw-shadow-colored);
|
--tw-shadow: var(--tw-shadow-colored);
|
||||||
@ -4565,11 +4604,6 @@ body {
|
|||||||
--tw-ring-color: rgb(204 204 0 / var(--tw-ring-opacity));
|
--tw-ring-color: rgb(204 204 0 / var(--tw-ring-opacity));
|
||||||
}
|
}
|
||||||
|
|
||||||
.focus\:ring-red-50:focus {
|
|
||||||
--tw-ring-opacity: 1;
|
|
||||||
--tw-ring-color: rgb(255 229 229 / var(--tw-ring-opacity));
|
|
||||||
}
|
|
||||||
|
|
||||||
.focus\:ring-opacity-10:focus {
|
.focus\:ring-opacity-10:focus {
|
||||||
--tw-ring-opacity: 0.1;
|
--tw-ring-opacity: 0.1;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,20 +1,21 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
|
||||||
import { type PropType } from 'vue'
|
import { ref } from 'vue';
|
||||||
import Multiselect from '@vueform/multiselect'
|
import { TagsInput } from '@flavorly/vanilla-components';
|
||||||
|
// import Multiselect from '@vueform/multiselect';
|
||||||
interface Tags {
|
interface Tags {
|
||||||
id: number
|
id: number
|
||||||
value: string,
|
value: string,
|
||||||
label: string
|
label: string
|
||||||
}
|
}
|
||||||
|
|
||||||
defineProps({
|
const props = defineProps({
|
||||||
placeholder: {
|
placeholder: {
|
||||||
type: String,
|
type: String,
|
||||||
default: ''
|
default: ''
|
||||||
},
|
},
|
||||||
tags: {
|
tags: {
|
||||||
type: Array as PropType<Tags[]>,
|
type: Array as () => Tags[],
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
useLabel: {
|
useLabel: {
|
||||||
@ -26,90 +27,93 @@ defineProps({
|
|||||||
default: ''
|
default: ''
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const allowed = ref(props.tags.map((tag) => tag.label))
|
||||||
|
const tags = ref<string[]>([])
|
||||||
|
|
||||||
|
const updateTags = (value: string[]) => {
|
||||||
|
tags.value = value
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col">
|
<div class="flex flex-col">
|
||||||
<Multiselect
|
<TagsInput v-model="tags" :placeholder="tags.length == 0 ? placeholder : props.label" :allowed-options="allowed"
|
||||||
mode="tags"
|
valueAttribute="id" textAttribute="label" :enabled="false" @update:modelValue="updateTags" />
|
||||||
:placeholder="placeholder"
|
|
||||||
:close-on-select="false"
|
<!-- <Multiselect mode="tags" :placeholder="placeholder" :close-on-select="false" :searchable="true"
|
||||||
:searchable="true"
|
:create-option="true" :options="props.tags" :classes="{
|
||||||
:create-option="true"
|
container:
|
||||||
:options="tags"
|
'relative py-[5px] mx-auto w-full flex items-center justify-end cursor-pointer rounded-lg bg-gray-200 text-left text-base leading-snug outline-none',
|
||||||
:classes="{
|
containerDisabled: 'cursor-default bg-gray-50',
|
||||||
container:
|
containerOpen: 'rounded-b-none',
|
||||||
'relative py-[5px] mx-auto w-full flex items-center justify-end cursor-pointer rounded-lg bg-gray-200 text-left text-base leading-snug outline-none',
|
containerOpenTop: 'rounded-t-none',
|
||||||
containerDisabled: 'cursor-default bg-gray-50',
|
containerActive: '',
|
||||||
containerOpen: 'rounded-b-none',
|
wrapper:
|
||||||
containerOpenTop: 'rounded-t-none',
|
'relative mx-auto w-full flex items-center justify-end box-border cursor-pointer outline-none',
|
||||||
containerActive: '',
|
singleLabel:
|
||||||
wrapper:
|
'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',
|
||||||
'relative mx-auto w-full flex items-center justify-end box-border cursor-pointer outline-none',
|
singleLabelText: 'overflow-ellipsis overflow-hidden block whitespace-nowrap max-w-full',
|
||||||
singleLabel:
|
multipleLabel:
|
||||||
'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',
|
'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',
|
||||||
singleLabelText: 'overflow-ellipsis overflow-hidden block whitespace-nowrap max-w-full',
|
search:
|
||||||
multipleLabel:
|
'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',
|
||||||
'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',
|
tags: 'flex-grow flex-shrink flex flex-wrap items-center mt-1 pl-2 min-w-0 rtl:pl-0 rtl:pr-2',
|
||||||
search:
|
tag: 'bg-primary-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',
|
||||||
'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',
|
tagDisabled: 'pr-2 opacity-50 rtl:pl-2',
|
||||||
tags: 'flex-grow flex-shrink flex flex-wrap items-center mt-1 pl-2 min-w-0 rtl:pl-0 rtl:pr-2',
|
tagWrapper: 'whitespace-nowrap overflow-hidden overflow-ellipsis',
|
||||||
tag: 'bg-primary-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',
|
tagWrapperBreak: 'whitespace-normal break-all',
|
||||||
tagDisabled: 'pr-2 opacity-50 rtl:pl-2',
|
tagRemove:
|
||||||
tagWrapper: 'whitespace-nowrap overflow-hidden overflow-ellipsis',
|
'flex items-center justify-center p-1 mx-0.5 rounded-sm hover:bg-black hover:bg-opacity-10 group',
|
||||||
tagWrapperBreak: 'whitespace-normal break-all',
|
tagRemoveIcon:
|
||||||
tagRemove:
|
'bg-multiselect-remove bg-center bg-no-repeat opacity-30 inline-block w-3 h-3 group-hover:opacity-60',
|
||||||
'flex items-center justify-center p-1 mx-0.5 rounded-sm hover:bg-black hover:bg-opacity-10 group',
|
tagsSearchWrapper: 'inline-block relative mx-1 mb-1 flex-grow flex-shrink h-full',
|
||||||
tagRemoveIcon:
|
tagsSearch:
|
||||||
'bg-multiselect-remove bg-center bg-no-repeat opacity-30 inline-block w-3 h-3 group-hover:opacity-60',
|
' bg-gray-200 absolute inset-0 border-0 outline-none focus:ring-0 appearance-none p-0 text-base font-sans box-border w-full',
|
||||||
tagsSearchWrapper: 'inline-block relative mx-1 mb-1 flex-grow flex-shrink h-full',
|
tagsSearchCopy: 'invisible whitespace-pre-wrap inline-block h-px',
|
||||||
tagsSearch:
|
placeholder:
|
||||||
' bg-gray-200 absolute inset-0 border-0 outline-none focus:ring-0 appearance-none p-0 text-base font-sans box-border w-full',
|
'flex items-center text-sm h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 text-gray-400 rtl:left-auto rtl:right-0 rtl:pl-0 rtl:pr-3.5',
|
||||||
tagsSearchCopy: 'invisible whitespace-pre-wrap inline-block h-px',
|
caret:
|
||||||
placeholder:
|
'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',
|
||||||
'flex items-center text-sm h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 text-gray-400 rtl:left-auto rtl:right-0 rtl:pl-0 rtl:pr-3.5',
|
caretOpen: 'rotate-180 pointer-events-auto',
|
||||||
caret:
|
clear:
|
||||||
'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',
|
'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',
|
||||||
caretOpen: 'rotate-180 pointer-events-auto',
|
clearIcon:
|
||||||
clear:
|
'bg-multiselect-remove bg-center bg-no-repeat w-2.5 h-4 py-px box-content inline-block',
|
||||||
'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',
|
spinner:
|
||||||
clearIcon:
|
'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',
|
||||||
'bg-multiselect-remove bg-center bg-no-repeat w-2.5 h-4 py-px box-content inline-block',
|
infinite: 'flex items-center justify-center w-full',
|
||||||
spinner:
|
infiniteSpinner:
|
||||||
'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',
|
'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',
|
dropdown:
|
||||||
infiniteSpinner:
|
'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',
|
||||||
'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',
|
dropdownTop: '-translate-y-full top-px bottom-auto rounded-b-none rounded-t',
|
||||||
dropdown:
|
dropdownHidden: 'hidden',
|
||||||
'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',
|
options: 'flex flex-col p-0 m-0 list-none',
|
||||||
dropdownTop: '-translate-y-full top-px bottom-auto rounded-b-none rounded-t',
|
optionsTop: '',
|
||||||
dropdownHidden: 'hidden',
|
group: 'p-0 m-0',
|
||||||
options: 'flex flex-col p-0 m-0 list-none',
|
groupLabel:
|
||||||
optionsTop: '',
|
'flex text-sm box-border items-center justify-start text-left py-1 px-3 font-semibold bg-gray-200 cursor-default leading-normal',
|
||||||
group: 'p-0 m-0',
|
groupLabelPointable: 'cursor-pointer',
|
||||||
groupLabel:
|
groupLabelPointed: 'bg-gray-300 text-gray-700',
|
||||||
'flex text-sm box-border items-center justify-start text-left py-1 px-3 font-semibold bg-gray-200 cursor-default leading-normal',
|
groupLabelSelected: 'bg-green-600 text-white',
|
||||||
groupLabelPointable: 'cursor-pointer',
|
groupLabelDisabled: 'bg-gray-100 text-gray-300 cursor-not-allowed',
|
||||||
groupLabelPointed: 'bg-gray-300 text-gray-700',
|
groupLabelSelectedPointed: 'bg-green-600 text-white opacity-90',
|
||||||
groupLabelSelected: 'bg-green-600 text-white',
|
groupLabelSelectedDisabled: 'text-green-100 bg-green-600 bg-opacity-50 cursor-not-allowed',
|
||||||
groupLabelDisabled: 'bg-gray-100 text-gray-300 cursor-not-allowed',
|
groupOptions: 'p-0 m-0',
|
||||||
groupLabelSelectedPointed: 'bg-green-600 text-white opacity-90',
|
option:
|
||||||
groupLabelSelectedDisabled: 'text-green-100 bg-green-600 bg-opacity-50 cursor-not-allowed',
|
'flex items-center justify-start box-border text-left cursor-pointer text-base leading-snug py-2 px-3',
|
||||||
groupOptions: 'p-0 m-0',
|
optionPointed: 'text-gray-800 bg-gray-100',
|
||||||
option:
|
optionSelected: 'text-white bg-green-500',
|
||||||
'flex items-center justify-start box-border text-left cursor-pointer text-base leading-snug py-2 px-3',
|
optionDisabled: 'text-gray-300 cursor-not-allowed',
|
||||||
optionPointed: 'text-gray-800 bg-gray-100',
|
optionSelectedPointed: 'text-white bg-green-500 opacity-90',
|
||||||
optionSelected: 'text-white bg-green-500',
|
optionSelectedDisabled: 'text-green-100 bg-green-500 bg-opacity-50 cursor-not-allowed',
|
||||||
optionDisabled: 'text-gray-300 cursor-not-allowed',
|
noOptions: 'py-2 px-3 text-gray-600 bg-white text-left rtl:text-right',
|
||||||
optionSelectedPointed: 'text-white bg-green-500 opacity-90',
|
noResults: 'py-2 px-3 text-gray-600 bg-white text-left rtl:text-right',
|
||||||
optionSelectedDisabled: 'text-green-100 bg-green-500 bg-opacity-50 cursor-not-allowed',
|
fakeInput:
|
||||||
noOptions: 'py-2 px-3 text-gray-600 bg-white text-left rtl:text-right',
|
'bg-transparent absolute left-0 right-0 -bottom-px w-full h-px border-0 p-0 appearance-none outline-none text-transparent',
|
||||||
noResults: 'py-2 px-3 text-gray-600 bg-white text-left rtl:text-right',
|
assist: 'absolute -m-px w-px h-px overflow-hidden',
|
||||||
fakeInput:
|
spacer: 'box-content'
|
||||||
'bg-transparent absolute left-0 right-0 -bottom-px w-full h-px border-0 p-0 appearance-none outline-none text-transparent',
|
}" /> -->
|
||||||
assist: 'absolute -m-px w-px h-px overflow-hidden',
|
|
||||||
spacer: 'box-content'
|
|
||||||
}"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
17
src/main.ts
17
src/main.ts
@ -24,6 +24,23 @@ app.use(
|
|||||||
searchInput: 'rich-select-search-input',
|
searchInput: 'rich-select-search-input',
|
||||||
selectedHighlightedOption: 'rich-select-selected-highlighted-option'
|
selectedHighlightedOption: 'rich-select-selected-highlighted-option'
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
TagsInput: {
|
||||||
|
fixedClasses: {
|
||||||
|
input: 'appearance-none py-0 ring-0 border-0 outline-none focus:ring-0 focus:outline-none focus:shadow-none shadow-none w-full bg-transparent text-gray-800 text-base',
|
||||||
|
inputWrapper: 'inline-flex flex-grow bg-transparent',
|
||||||
|
tagsWrapper: 'flex flex-wrap overflow-hidden -my-2 py-1 px-1 w-full text-xs',
|
||||||
|
tagDeleteButtonIcon: 'w-3 h-3',
|
||||||
|
tagLabel: 'px-3 text-xs',
|
||||||
|
},
|
||||||
|
classes: {
|
||||||
|
input: 'min-h-[32px]',
|
||||||
|
inputWrapper: '',
|
||||||
|
tagsWrapper: '',
|
||||||
|
tagDeleteButtonIcon: '',
|
||||||
|
tagLabel: '',
|
||||||
|
trigger: 'bg-gray-200 rounded-lg mb-2 mt-2',
|
||||||
|
},
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
)
|
)
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user