56 lines
1.7 KiB
JavaScript
56 lines
1.7 KiB
JavaScript
import { message as Message, createMessage } from '../dist/message.js';
|
|
|
|
export default {
|
|
title: 'ui/message',
|
|
tags: ['autodocs'],
|
|
description: 'Message component',
|
|
render: ({ label, fn, ...args }) => {
|
|
const div = createMessage(label, { type: 'success' });
|
|
div.addEventListener('click', () => {
|
|
Message.success('Hello World', 2000);
|
|
});
|
|
div.style.border = '1px solid #000';
|
|
const uiMessage = document.createElement('div');
|
|
uiMessage.style = 'display: flex;gap:10px; flex-direction: column;background: #f0f0f0; padding: 20px';
|
|
uiMessage.appendChild(div);
|
|
|
|
const info = createMessage('Info', { type: 'info' });
|
|
info.style.border = '1px solid #000';
|
|
info.addEventListener('click', () => {
|
|
Message.info('Hello World', 1000);
|
|
});
|
|
uiMessage.appendChild(info);
|
|
|
|
const error = createMessage('Error', { type: 'error' });
|
|
error.style.border = '1px solid #000';
|
|
error.addEventListener('click', () => {
|
|
Message.error('Hello World', 1500);
|
|
});
|
|
uiMessage.appendChild(error);
|
|
|
|
const warning = createMessage('Warning', { type: 'warning' });
|
|
warning.style.border = '1px solid #000';
|
|
warning.addEventListener('click', () => {
|
|
Message.warning('Hello World', 3000);
|
|
});
|
|
uiMessage.appendChild(warning);
|
|
|
|
const loading = createMessage('Loading', { type: 'loading' });
|
|
loading.style.border = '1px solid #000';
|
|
loading.addEventListener('click', () => {
|
|
Message.loading('Hello World');
|
|
});
|
|
uiMessage.appendChild(loading);
|
|
|
|
return uiMessage;
|
|
},
|
|
};
|
|
|
|
// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
|
|
export const Success = {
|
|
args: {
|
|
label: 'Success',
|
|
fn: Message.success,
|
|
},
|
|
};
|