49 lines
1.1 KiB
Vue
49 lines
1.1 KiB
Vue
import { message } from 'ant-design-vue';
|
|
import CopyableIcon from './CopyableIcon';
|
|
|
|
const Category = {
|
|
props: ['icons', 'title', 'newIcons', 'theme'],
|
|
data() {
|
|
return {
|
|
justCopied: null,
|
|
};
|
|
},
|
|
methods: {
|
|
onCopied(type, text) {
|
|
message.success(
|
|
<span>
|
|
<code class="copied-code">{text}</code> copied đ
|
|
</span>,
|
|
);
|
|
this.justCopied = type;
|
|
setTimeout(() => {
|
|
this.justCopied = null;
|
|
}, 2000);
|
|
},
|
|
},
|
|
render() {
|
|
const { icons, title, theme, newIcons } = this.$props;
|
|
const items = icons.map(name => {
|
|
return (
|
|
<CopyableIcon
|
|
key={name}
|
|
type={name}
|
|
theme={theme}
|
|
isNew={newIcons.indexOf(name) >= 0}
|
|
justCopied={this.justCopied}
|
|
onCopied={this.onCopied}
|
|
/>
|
|
);
|
|
});
|
|
const message = this.$t('message');
|
|
return (
|
|
<div>
|
|
<h3>{message[`app.docs.components.icon.category.${title}`]}</h3>
|
|
<ul class={'anticons-list'}>{items}</ul>
|
|
</div>
|
|
);
|
|
},
|
|
};
|
|
|
|
export default Category;
|