@spaceone/design-system
Version:
SpaceONE Design System
67 lines (62 loc) • 2.34 kB
text/typescript
import {
toRefs, reactive,
} from '@vue/composition-api';
import { text, boolean, withKnobs } from '@storybook/addon-knobs';
import PDefinition from '@/data-display/tables/definition-table/definition/PDefinition.vue';
export default {
title: 'Data Display/Tables/Definition Table/Definition Item',
component: PDefinition,
decorators: [withKnobs],
parameters: {
knobs: { escapeHTML: false },
design: {
type: 'figma',
url: 'https://www.figma.com/file/wq4wSowBcADBuUrMEZLz6i/SpaceONE-Console-Design?node-id=5373%3A6989',
},
},
};
export const definitionItem = () => ({
components: { PDefinition },
props: {
name: {
default: text('name', 'name'),
},
label: {
default: text('label', ''),
},
data: {
default: text('data', 'data'),
},
disableCopy: {
default: boolean('disableCopy', false),
},
},
template: `
<div style="width: 80vw;">
<div class="my-8">
<p>Slots</p>
default : Slot for replacing definition text. <br>
copy: Slot for replacing copy button. <br>
<br>
<br>
<p>SlotScope(Props)</p>
all Props(name, label, data, disableCopy, formatter)<br>
field: 'td' element that wrapping definition text.<br>
displayData: actual data. it's usually the same with 'data'. it's different only when 'formatter(data)' is different value with 'data'.<br>
showCopy: boolean value that indicates whether show copy or not. it's related the value of 'displayData', 'disableCopy', and field element's innerText.<br>
copy: function that invoked when copy button is clicked.<br>
isMouseOver: boolean value that indicates whether copy button is mouse over or out.<br>
onMouseOver: function that invoked when copy button is mouse over.<br>
onMouseOut: function that invoked when copy button is mouse out.<br>
</div>
<div class="bg-primary3">
<p-definition v-bind="$props"></p-definition>
</div>
</div>`,
setup(props, context) {
const state = reactive({});
return {
...toRefs(state),
};
},
});