use Multiselect for channel ids
This commit is contained in:
jb-alvarado
parent
9ec57055e6
commit
0e01383129
@ -87,10 +87,21 @@
|
|||||||
</label>
|
</label>
|
||||||
|
|
||||||
<div class="form-control mt-5">
|
<div class="form-control mt-5">
|
||||||
<select v-model="user.channel_id" class="select select-bordered select-md w-full">
|
<Multiselect
|
||||||
|
v-model="user.channel_ids"
|
||||||
|
:options="configStore.configChannel"
|
||||||
|
mode="tags"
|
||||||
|
:close-on-select="true"
|
||||||
|
:can-clear="false"
|
||||||
|
label="name"
|
||||||
|
value-prop="id"
|
||||||
|
:classes="multiSelectClasses"
|
||||||
|
></Multiselect>
|
||||||
|
|
||||||
|
<!-- <select v-model="user.channel_id" class="select select-bordered select-md w-full">
|
||||||
<option disabled selected>Channel</option>
|
<option disabled selected>Channel</option>
|
||||||
<option v-for="channel in configStore.configChannel" :key="channel.id" :value="channel.id">{{ channel.name }}</option>
|
<option v-for="channel in configStore.configChannel" :key="channel.id" :value="channel.id">{{ channel.name }}</option>
|
||||||
</select>
|
</select> -->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-control mt-3">
|
<div class="form-control mt-3">
|
||||||
@ -105,6 +116,7 @@
|
|||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
const { t } = useI18n()
|
const { t } = useI18n()
|
||||||
|
const { multiSelectClasses } = useVariables()
|
||||||
|
|
||||||
const authStore = useAuth()
|
const authStore = useAuth()
|
||||||
const configStore = useConfig()
|
const configStore = useConfig()
|
||||||
@ -123,7 +135,7 @@ const user = ref({
|
|||||||
password: '',
|
password: '',
|
||||||
confirm: '',
|
confirm: '',
|
||||||
admin: false,
|
admin: false,
|
||||||
channel_id: 1,
|
channel_ids: [1],
|
||||||
role_id: 3,
|
role_id: 3,
|
||||||
} as User)
|
} as User)
|
||||||
|
|
||||||
@ -195,7 +207,7 @@ function clearUser() {
|
|||||||
user.value.password = ''
|
user.value.password = ''
|
||||||
user.value.confirm = ''
|
user.value.confirm = ''
|
||||||
user.value.admin = false
|
user.value.admin = false
|
||||||
user.value.channel_id = 1
|
user.value.channel_ids = [1]
|
||||||
user.value.role_id = 3
|
user.value.role_id = 3
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
70
composables/variables.ts
Normal file
70
composables/variables.ts
Normal file
@ -0,0 +1,70 @@
|
|||||||
|
export const useVariables = () => {
|
||||||
|
const multiSelectClasses = {
|
||||||
|
container: 'relative input input-bordered w-full flex items-center justify-end px-0 min-h-[32px]',
|
||||||
|
containerDisabled: 'cursor-default bg-gray-100',
|
||||||
|
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-base-100 rounded pl-3.5 rtl:pl-0 rtl:pr-3.5',
|
||||||
|
tags: 'flex-grow flex-shrink flex flex-wrap items-center mt-0 pl-2 min-w-0 rtl:pl-0 rtl:pr-2',
|
||||||
|
tag: 'bg-base-300 h-6 text-base-content text-sm font-bold py-0.5 pl-2 rounded mr-1 my-0.5 flex items-center whitespace-nowrap min-w-0 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',
|
||||||
|
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 flex-grow flex-shrink h-[24px]',
|
||||||
|
tagsSearch:
|
||||||
|
'absolute inset-0 border-0 outline-none focus:ring-0 appearance-none p-0 text-base font-sans box-border w-full h-full',
|
||||||
|
tagsSearchCopy: 'invisible whitespace-pre-wrap inline-block h-px',
|
||||||
|
placeholder:
|
||||||
|
'flex items-center 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',
|
||||||
|
caret: 'multiselect-caret bg-center bg-no-repeat w-2.5 h-4 py-px box-content mr-3.5 relative z-10 flex-shrink-0 flex-grow-0 transition-transform transform pointer-events-none rtl:mr-0 rtl:ml-3.5',
|
||||||
|
caretOpen: 'rotate-180 pointer-events-auto',
|
||||||
|
clear: 'pr-3.5 relative z-10 transition duration-300 flex-shrink-0 flex-grow-0 flex hover:opacity-80 rtl:pr-0 rtl:pl-3.5',
|
||||||
|
clearIcon: 'multiselect-clear-icon 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',
|
||||||
|
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-base-100 flex flex-col rounded-b',
|
||||||
|
dropdownTop: '-translate-y-full top-px bottom-auto rounded-b-none rounded-t',
|
||||||
|
dropdownHidden: 'hidden',
|
||||||
|
options: 'flex flex-col p-0 m-0 list-none',
|
||||||
|
optionsTop: '',
|
||||||
|
group: 'p-0 m-0',
|
||||||
|
groupLabel:
|
||||||
|
'flex text-sm box-border items-center justify-start text-left py-1 px-3 font-bold bg-gray-200 cursor-default leading-normal',
|
||||||
|
groupLabelPointable: 'cursor-pointer',
|
||||||
|
groupLabelPointed: 'bg-gray-300 text-gray-700',
|
||||||
|
groupLabelSelected: 'bg-accent text-my-text',
|
||||||
|
groupLabelDisabled: 'bg-gray-100 text-gray-300 cursor-not-allowed',
|
||||||
|
groupLabelSelectedPointed: 'bg-accent text-my-text opacity-90',
|
||||||
|
groupLabelSelectedDisabled: 'text-green-100 bg-green-600 bg-opacity-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-secondary',
|
||||||
|
optionSelected: 'text-my-text bg-accent',
|
||||||
|
optionDisabled: 'text-gray-300 cursor-not-allowed',
|
||||||
|
optionSelectedPointed: 'text-my-text bg-link-hover',
|
||||||
|
optionSelectedDisabled: 'text-green-100 bg-green-500 bg-opacity-50 cursor-not-allowed',
|
||||||
|
noOptions: 'py-2 px-3 text-gray-600 bg-base-100 text-left rtl:text-right',
|
||||||
|
noResults: 'py-2 px-3 text-gray-600 bg-base-100 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',
|
||||||
|
assist: 'absolute -m-px w-px h-px overflow-hidden',
|
||||||
|
spacer: 'h-6 py-px box-content',
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
multiSelectClasses,
|
||||||
|
}
|
||||||
|
}
|
||||||
16
package-lock.json
generated
16
package-lock.json
generated
@ -11,6 +11,7 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@nuxtjs/color-mode": "^3.4.1",
|
"@nuxtjs/color-mode": "^3.4.1",
|
||||||
"@pinia/nuxt": "^0.5.1",
|
"@pinia/nuxt": "^0.5.1",
|
||||||
|
"@vueform/multiselect": "^2.6.8",
|
||||||
"@vuepic/vue-datepicker": "^8.8.0",
|
"@vuepic/vue-datepicker": "^8.8.0",
|
||||||
"@vueuse/nuxt": "^10.11.0",
|
"@vueuse/nuxt": "^10.11.0",
|
||||||
"bootstrap-icons": "^1.11.3",
|
"bootstrap-icons": "^1.11.3",
|
||||||
@ -31,6 +32,7 @@
|
|||||||
"@types/lodash": "^4.17.5",
|
"@types/lodash": "^4.17.5",
|
||||||
"@types/video.js": "^7.3.58",
|
"@types/video.js": "^7.3.58",
|
||||||
"daisyui": "^4.12.2",
|
"daisyui": "^4.12.2",
|
||||||
|
"mini-svg-data-uri": "^1.4.4",
|
||||||
"postcss": "^8.4.38",
|
"postcss": "^8.4.38",
|
||||||
"postcss-loader": "^8.1.1",
|
"postcss-loader": "^8.1.1",
|
||||||
"sass": "^1.77.6",
|
"sass": "^1.77.6",
|
||||||
@ -5534,6 +5536,11 @@
|
|||||||
"integrity": "sha512-hQ2gAQcBO/CDpC82DCrinJNgOHI2v+FA7BDW4lMSPeBpQ7sRe2OLHWe5cph1s7D8DUQAwRt18dBDfJJ220APEA==",
|
"integrity": "sha512-hQ2gAQcBO/CDpC82DCrinJNgOHI2v+FA7BDW4lMSPeBpQ7sRe2OLHWe5cph1s7D8DUQAwRt18dBDfJJ220APEA==",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/@vueform/multiselect": {
|
||||||
|
"version": "2.6.8",
|
||||||
|
"resolved": "https://registry.npmjs.org/@vueform/multiselect/-/multiselect-2.6.8.tgz",
|
||||||
|
"integrity": "sha512-vu1bkFkViuLbrtSfyWgw11ecNPK7mlBDFe5X9WdsZj3gri3PiZ3OvlfJ920Ebysf7rgiN/+mHJDY2/Y1ITnGEg=="
|
||||||
|
},
|
||||||
"node_modules/@vuepic/vue-datepicker": {
|
"node_modules/@vuepic/vue-datepicker": {
|
||||||
"version": "8.8.0",
|
"version": "8.8.0",
|
||||||
"resolved": "https://registry.npmjs.org/@vuepic/vue-datepicker/-/vue-datepicker-8.8.0.tgz",
|
"resolved": "https://registry.npmjs.org/@vuepic/vue-datepicker/-/vue-datepicker-8.8.0.tgz",
|
||||||
@ -10675,6 +10682,15 @@
|
|||||||
"node": ">=4"
|
"node": ">=4"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/mini-svg-data-uri": {
|
||||||
|
"version": "1.4.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
|
||||||
|
"integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==",
|
||||||
|
"dev": true,
|
||||||
|
"bin": {
|
||||||
|
"mini-svg-data-uri": "cli.js"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/minimatch": {
|
"node_modules/minimatch": {
|
||||||
"version": "9.0.4",
|
"version": "9.0.4",
|
||||||
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.4.tgz",
|
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.4.tgz",
|
||||||
|
|||||||
@ -15,6 +15,7 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@nuxtjs/color-mode": "^3.4.1",
|
"@nuxtjs/color-mode": "^3.4.1",
|
||||||
"@pinia/nuxt": "^0.5.1",
|
"@pinia/nuxt": "^0.5.1",
|
||||||
|
"@vueform/multiselect": "^2.6.8",
|
||||||
"@vuepic/vue-datepicker": "^8.8.0",
|
"@vuepic/vue-datepicker": "^8.8.0",
|
||||||
"@vueuse/nuxt": "^10.11.0",
|
"@vueuse/nuxt": "^10.11.0",
|
||||||
"bootstrap-icons": "^1.11.3",
|
"bootstrap-icons": "^1.11.3",
|
||||||
@ -35,6 +36,7 @@
|
|||||||
"@types/lodash": "^4.17.5",
|
"@types/lodash": "^4.17.5",
|
||||||
"@types/video.js": "^7.3.58",
|
"@types/video.js": "^7.3.58",
|
||||||
"daisyui": "^4.12.2",
|
"daisyui": "^4.12.2",
|
||||||
|
"mini-svg-data-uri": "^1.4.4",
|
||||||
"postcss": "^8.4.38",
|
"postcss": "^8.4.38",
|
||||||
"postcss-loader": "^8.1.1",
|
"postcss-loader": "^8.1.1",
|
||||||
"sass": "^1.77.6",
|
"sass": "^1.77.6",
|
||||||
|
|||||||
7
plugins/multiselect.client.ts
Normal file
7
plugins/multiselect.client.ts
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
import { defineNuxtPlugin } from '#imports'
|
||||||
|
import Multiselect from '@vueform/multiselect'
|
||||||
|
import '@vueform/multiselect/themes/tailwind.css'
|
||||||
|
|
||||||
|
export default defineNuxtPlugin((nuxtApp) => {
|
||||||
|
nuxtApp.vueApp.component('Multiselect', Multiselect)
|
||||||
|
})
|
||||||
@ -1,6 +1,37 @@
|
|||||||
|
import svgToDataUri from 'mini-svg-data-uri'
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
theme: {
|
theme: {
|
||||||
extend: {
|
extend: {
|
||||||
|
backgroundImage: (theme: any) => ({
|
||||||
|
'multiselect-caret': `url("${svgToDataUri(
|
||||||
|
`<svg viewBox="0 0 320 512" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path 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"></path></svg>`
|
||||||
|
)}")`,
|
||||||
|
'multiselect-spinner': `url("${svgToDataUri(
|
||||||
|
`<svg viewBox="0 0 512 512" fill="${theme(
|
||||||
|
'colors.green.500'
|
||||||
|
)}" xmlns="http://www.w3.org/2000/svg"><path 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"></path></svg>`
|
||||||
|
)}")`,
|
||||||
|
'multiselect-remove': `url("${svgToDataUri(
|
||||||
|
`<svg viewBox="0 0 320 512" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path 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"></path></svg>`
|
||||||
|
)}")`,
|
||||||
|
}),
|
||||||
|
maskImage: (theme: any) => ({
|
||||||
|
'multiselect-caret': `url("${svgToDataUri(
|
||||||
|
`<svg viewBox="0 0 320 512" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path 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"></path></svg>`
|
||||||
|
)}")`,
|
||||||
|
'multiselect-spinner': `url("${svgToDataUri(
|
||||||
|
`<svg viewBox="0 0 512 512" fill="${theme(
|
||||||
|
'colors.green.500'
|
||||||
|
)}" xmlns="http://www.w3.org/2000/svg"><path 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"></path></svg>`
|
||||||
|
)}")`,
|
||||||
|
'multiselect-clear-icon': `url("${svgToDataUri(
|
||||||
|
`<svg viewBox="0 0 320 512" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path 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"></path></svg>`
|
||||||
|
)}")`,
|
||||||
|
'multiselect-tag-remove-icon': `url("${svgToDataUri(
|
||||||
|
`<svg viewBox="0 0 320 512" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path 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"></path></svg>`
|
||||||
|
)}")`,
|
||||||
|
}),
|
||||||
borderWidth: {
|
borderWidth: {
|
||||||
title: '0.1rem',
|
title: '0.1rem',
|
||||||
},
|
},
|
||||||
|
|||||||
2
types/index.d.ts
vendored
2
types/index.d.ts
vendored
@ -37,7 +37,7 @@ declare global {
|
|||||||
password?: string
|
password?: string
|
||||||
confirm?: string
|
confirm?: string
|
||||||
admin?: boolean
|
admin?: boolean
|
||||||
channel_id?: number
|
channel_ids?: number[]
|
||||||
role_id?: number
|
role_id?: number
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user