docs: add icon search input (#6828)

* docs: add icon search input

* docs: add affix for search input
This commit is contained in:
Konv Suu 2023-08-18 11:05:17 +08:00 committed by GitHub
parent 42608a5121
commit 6ced156342
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 51 additions and 22 deletions

View File

@ -5,7 +5,7 @@
ref="inputRef"
:placeholder="searchPlaceholder"
@focus="triggerFocus(true)"
@blue="triggerFocus(false)"
@blur="triggerFocus(false)"
></a-input>
</div>
</template>

View File

@ -46,11 +46,6 @@ a {
&:hover &-inner {
overflow-y: auto;
}
> div,
> div > div {
height: 100%;
}
}
.aside-container {

View File

@ -86,3 +86,17 @@ ul.anticons-list {
background: #f5f5f5;
border-radius: 2px;
}
.icons-affix {
display: flex;
justify-content: space-between;
transition: all 0.25s;
}
.icons-affixed {
padding: 12px;
margin: -8px;
border-radius: 6px;
border: 1px solid var(--border-color-base);
background-color: var(--body-background);
}

View File

@ -22,8 +22,8 @@ const allIcons = AntdIcons;
const kebabCase = function kebabCase(str) {
return str
.split(/(?=[A-Z])/)
.join('-')
.toLowerCase();
.map(s => s.replace(s[0], s[0].toUpperCase()))
.join('');
};
export default defineComponent({

View File

@ -24,13 +24,17 @@ const IconDisplay = defineComponent({
data() {
return {
theme: ThemeType.Outlined,
searchVal: '',
searchBarAffixed: false,
};
},
methods: {
handleChangeTheme(e) {
this.theme = e.target.value;
},
handleAffixChange(affixed) {
this.searchBarAffixed = affixed;
},
renderCategories() {
const { theme } = this;
@ -42,7 +46,10 @@ const IconDisplay = defineComponent({
category: key,
icons: iconList
.map(iconName => iconName + theme)
.filter(iconName => allIcons[iconName]),
.filter(iconName => {
if (iconName.toLowerCase().includes(this.searchVal.trim().toLowerCase()))
return allIcons[iconName];
}),
};
})
.filter(({ icons }) => !!icons.length)
@ -62,18 +69,31 @@ const IconDisplay = defineComponent({
return (
<div>
<h3 style="margin: 1.6em 0 .6em;">{this.$t('app.docs.components.icon.pick-theme')}</h3>
<a-radio-group value={this.theme} onChange={this.handleChangeTheme}>
<a-radio-button value={ThemeType.Outlined}>
<Icon component={OutlinedIcon} /> {this.$t('app.docs.components.icon.outlined')}
</a-radio-button>
<a-radio-button value={ThemeType.Filled}>
<Icon component={FilledIcon} /> {this.$t('app.docs.components.icon.filled')}
</a-radio-button>
<a-radio-button value={ThemeType.TwoTone}>
<Icon component={TwoToneIcon} /> {this.$t('app.docs.components.icon.two-tone')}
</a-radio-button>
</a-radio-group>
{this.renderCategories()}
<a-affix offset-top={32} onChange={this.handleAffixChange}>
<div class={this.searchBarAffixed ? 'icons-affix icons-affixed' : 'icons-affix'}>
<a-radio-group value={this.theme} onChange={this.handleChangeTheme}>
<a-radio-button value={ThemeType.Outlined}>
<Icon component={OutlinedIcon} /> {this.$t('app.docs.components.icon.outlined')}
</a-radio-button>
<a-radio-button value={ThemeType.Filled}>
<Icon component={FilledIcon} /> {this.$t('app.docs.components.icon.filled')}
</a-radio-button>
<a-radio-button value={ThemeType.TwoTone}>
<Icon component={TwoToneIcon} /> {this.$t('app.docs.components.icon.two-tone')}
</a-radio-button>
</a-radio-group>
<a-input-search
style="flex: 1 1 0%; margin-inline-start: 16px;"
placeholder={this.$t('app.docs.components.icon.search.placeholder')}
v-model:value={this.searchVal}
/>
</div>
</a-affix>
{this.renderCategories().length === 0 ? (
<a-empty style="padding: 12px 0;" />
) : (
this.renderCategories()
)}
</div>
);
},