svcm/oa
1
0
Fork 0
mirror of https://git.hmsn.ink/kospo/svcm/oa.git synced 2026-03-20 12:03:34 +09:00
Code Issues Packages Projects Releases Wiki Activity

first

Browse Source
This commit is contained in:
bangae1
2025-05-24 01:49:48 +09:00
commit 62abbcf4eb
2376 changed files with 325522 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

225
documentation/plugins/multiselect/multiselect-select-slot-icons-documentation.md Normal file
View File

@@ -0,0 +1,225 @@
---
selectSlotIconOptions:
- value: logistics
name: Logistics
icon: fas fa-box
- value: business
name: Business
icon: fas fa-briefcase
- value: relaxation
name: Relaxation
icon: fas fa-couch
- value: development
name: Development
icon: fas fa-code
- value: travel
name: Travel
icon: fas fa-compass
- value: discussions
name: Discussions
icon: fas fa-comment-alt
- value: shopping
name: Shopping
icon: fas fa-shopping-bag
selectSlotIconValue: []
---
### Icons with search
The `<Multiselect />` component can be used with a custom template to show
icons for options and selected option. Supports searching the values.
<!--code-->
```vue
<script setup lang="ts">
const selectSlotIconValue
const selectSlotIconOptions = [
{
name: 'Logistics',
value: 'logistics',
icon: 'fas fa-box',
},
{
name: 'Business',
value: 'business',
icon: 'fas fa-briefcase',
},
{
name: 'Relaxation',
value: 'relaxation',
icon: 'fas fa-couch',
},
{
name: 'Development',
value: 'development',
icon: 'fas fa-code',
},
{
name: 'Travel',
value: 'travel',
icon: 'fas fa-compass',
},
{
name: 'Discussions',
value: 'discussions',
icon: 'fas fa-comment-alt',
},
{
name: 'Shopping',
value: 'shopping',
icon: 'fas fa-shopping-bag',
},
]
</script>
<template>
<VField v-slot="{ id }" class="is-icon-select">
<VControl>
<Multiselect
v-model="selectSlotIconValue"
:attrs="{ id }"
placeholder="Select a member"
label="name"
:options="selectSlotIconOptions"
:searchable="true"
track-by="name"
:max-height="145"
>
<template #singlelabel="{ value }">
<div class="multiselect-single-label">
<div class="select-label-icon-wrap">
<i :class="value.icon" />
</div>
<span class="select-label-text">
{{ value.name }}
</span>
</div>
</template>
<template #option="{ option }">
<div class="select-option-icon-wrap">
<i :class="option.icon" />
</div>
<span class="select-option-text">
{{ option.name }}
</span>
</template>
</Multiselect>
</VControl>
</VField>
</template>
```
<!--/code-->
<!--example-->
<div class="columns">
<div class="column is-4">
<VField v-slot="{ id }" class="is-icon-select">
<VControl>
<Multiselect
:attrs="{ id }"
v-model="frontmatter.selectSlotIconValue"
placeholder="Select a member"
label="name"
:options="frontmatter.selectSlotIconOptions"
:searchable="true"
trackBy="name"
:maxHeight="145"
>
<template v-slot:singlelabel="{ value }">
<div class="multiselect-single-label">
<div class="select-label-icon-wrap">
<i :class="value.icon"></i>
</div>
<span class="select-label-text">
{{ value.name }}
</span>
</div>
</template>
<template v-slot:option="{ option }">
<div class="select-option-icon-wrap">
<i :class="option.icon"></i>
</div>
<span class="select-option-text">
{{ option.name }}
</span>
</template>
</Multiselect>
</VControl>
</VField>
</div>
<div class="column is-4">
<VField v-slot="{ id }" class="is-icon-select is-curved-select">
<VControl>
<Multiselect
:attrs="{ id }"
v-model="frontmatter.selectSlotIconValue"
placeholder="Select a member"
label="name"
:options="frontmatter.selectSlotIconOptions"
:searchable="true"
trackBy="name"
:maxHeight="145"
>
<template v-slot:singlelabel="{ value }">
<div class="multiselect-single-label">
<div class="select-label-icon-wrap">
<i :class="value.icon"></i>
</div>
<span class="select-label-text">
{{ value.name }}
</span>
</div>
</template>
<template v-slot:option="{ option }">
<div class="select-option-icon-wrap">
<i :class="option.icon"></i>
</div>
<span class="select-option-text">
{{ option.name }}
</span>
</template>
</Multiselect>
</VControl>
</VField>
</div>
<div class="column is-4">
<VField v-slot="{ id }" class="is-icon-select is-rounded-select">
<VControl>
<Multiselect
:attrs="{ id }"
v-model="frontmatter.selectSlotIconValue"
placeholder="Select a member"
label="name"
:options="frontmatter.selectSlotIconOptions"
:searchable="true"
trackBy="name"
:maxHeight="145"
>
<template v-slot:singlelabel="{ value }">
<div class="multiselect-single-label">
<div class="select-label-icon-wrap">
<i :class="value.icon"></i>
</div>
<span class="select-label-text">
{{ value.name }}
</span>
</div>
</template>
<template v-slot:option="{ option }">
<div class="select-option-icon-wrap">
<i :class="option.icon"></i>
</div>
<span class="select-option-text">
{{ option.name }}
</span>
</template>
</Multiselect>
</VControl>
</VField>
</div>
</div>
<!--/example-->