diff --git a/src/assets/icons/arrow-top.svg b/src/assets/icons/arrow-top.svg new file mode 100644 index 00000000..2436d0c7 --- /dev/null +++ b/src/assets/icons/arrow-top.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Collapse/SCollapse.vue b/src/components/Collapse/SCollapse.vue new file mode 100644 index 00000000..d1feb8db --- /dev/null +++ b/src/components/Collapse/SCollapse.vue @@ -0,0 +1,40 @@ + + + + + diff --git a/src/components/Collapse/SCollapseItem.vue b/src/components/Collapse/SCollapseItem.vue new file mode 100644 index 00000000..38a43d0d --- /dev/null +++ b/src/components/Collapse/SCollapseItem.vue @@ -0,0 +1,70 @@ + + + + + diff --git a/src/components/Collapse/index.ts b/src/components/Collapse/index.ts new file mode 100644 index 00000000..62d2a888 --- /dev/null +++ b/src/components/Collapse/index.ts @@ -0,0 +1,4 @@ +import SCollapse from './SCollapse.vue' +import SCollapseItem from './SCollapseItem.vue' + +export { SCollapse, SCollapseItem } diff --git a/src/components/Dropdown/SDropdown.vue b/src/components/Dropdown/SDropdown.vue index 5b6e3091..68ffae62 100644 --- a/src/components/Dropdown/SDropdown.vue +++ b/src/components/Dropdown/SDropdown.vue @@ -45,8 +45,7 @@ import { Vue, Component, Prop, Ref } from 'vue-property-decorator' import { ElDropdown } from 'element-ui/types/dropdown' import { DropdownType, DropdownSize, DropdownPlacement, DropdownTrigger } from './consts' -import { ButtonTypes } from '../Button' -import { SButton } from '../../components' +import { ButtonTypes, SButton } from '../Button' @Component({ components: { diff --git a/src/components/Layout/App/SApp.vue b/src/components/Layout/App/SApp.vue index 837a3063..bfb5224d 100644 --- a/src/components/Layout/App/SApp.vue +++ b/src/components/Layout/App/SApp.vue @@ -7,6 +7,7 @@ + diff --git a/src/components/index.ts b/src/components/index.ts index 2e79c56f..f87d6fbb 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -7,6 +7,7 @@ import { SButton, SButtonGroup } from './Button' import { SCard } from './Card' import { SCheckbox } from './Checkbox' import { SCol } from './Layout/Col' +import { SCollapse, SCollapseItem } from './Collapse' import { SContainer } from './Layout/Container' import { SDropdown, SDropdownItem } from './Dropdown' import { SFooter } from './Layout/Footer' @@ -27,6 +28,8 @@ export { SCard, SCheckbox, SCol, + SCollapse, + SCollapseItem, SContainer, SDropdown, SDropdownItem, diff --git a/src/index.ts b/src/index.ts index aa649e93..49e71e99 100644 --- a/src/index.ts +++ b/src/index.ts @@ -8,6 +8,8 @@ import { SCard, SCheckbox, SCol, + SCollapse, + SCollapseItem, SContainer, SFooter, SForm, @@ -35,6 +37,8 @@ const elements = [ { component: SCard, name: Components.SCard }, { component: SCheckbox, name: Components.SCheckbox }, { component: SCol, name: Components.SCol }, + { component: SCollapse, name: Components.SCollapse }, + { component: SCollapseItem, name: Components.SCollapseItem }, { component: SContainer, name: Components.SContainer }, { component: SFooter, name: Components.SFooter }, { component: SForm, name: Components.SForm }, @@ -71,6 +75,8 @@ export { SCard, SCheckbox, SCol, + SCollapse, + SCollapseItem, SContainer, SFooter, SForm, diff --git a/src/plugins/elementUI.ts b/src/plugins/elementUI.ts index 07f878cf..55c7c9a8 100644 --- a/src/plugins/elementUI.ts +++ b/src/plugins/elementUI.ts @@ -6,6 +6,8 @@ import { ButtonGroup, Card, Checkbox, + Collapse, + CollapseItem, Container, DatePicker, Dialog, @@ -44,6 +46,8 @@ import { // import lang from 'element-ui/lib/locale/lang/en' // import locale from 'element-ui/lib/locale' +Vue.use(Collapse) +Vue.use(CollapseItem) Vue.use(Dialog) Vue.use(Footer) Vue.use(Menu) diff --git a/src/stories/Collapse/SCollapse.stories.ts b/src/stories/Collapse/SCollapse.stories.ts new file mode 100644 index 00000000..fdc90126 --- /dev/null +++ b/src/stories/Collapse/SCollapse.stories.ts @@ -0,0 +1,42 @@ +import { withKnobs, boolean } from '@storybook/addon-knobs' + +import { SCollapse, SCollapseItem } from '../../components' + +export default { + component: SCollapse, + title: 'Design System/Collapse', + decorators: [withKnobs] +} + +export const configurable = () => ({ + components: { SCollapse, SCollapseItem }, + template: ` + +
Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;
+
Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.
+ + +
Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;
+
Visual feedback: reflect current state by updating or rearranging elements of the page.
+ + +
Simplify the process: keep operating process simple and intuitive;
+
Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;
+
Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.
+ + +
Decision making: giving advices about operations is acceptable, but do not make decisions for the users;
+
Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.
+ + `, + props: { + accordion: { + default: boolean('Accordion', false) + } + }, + methods: { + handleChange: (activeNames: string | number | Array) => { + console.log(activeNames) + } + } +}) diff --git a/src/stories/Collapse/SCollapseItem.stories.ts b/src/stories/Collapse/SCollapseItem.stories.ts new file mode 100644 index 00000000..9c00c89e --- /dev/null +++ b/src/stories/Collapse/SCollapseItem.stories.ts @@ -0,0 +1,30 @@ +import { withKnobs, boolean, text } from '@storybook/addon-knobs' + +import { SCollapse, SCollapseItem } from '../../components' + +export default { + component: SCollapseItem, + title: 'Design System/Collapse/Collapse Item', + decorators: [withKnobs] +} + +export const configurable = () => ({ + components: { SCollapse, SCollapseItem }, + template: ` + +
Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;
+
Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.
+ + `, + props: { + title: { + default: text('Title', 'Consistency') + }, + name: { + default: text('Name', '1') + }, + disabled: { + default: boolean('Disabled', false) + } + } +}) diff --git a/src/styles/icons.scss b/src/styles/icons.scss index 2367f2ae..2bb3863c 100644 --- a/src/styles/icons.scss +++ b/src/styles/icons.scss @@ -64,4 +64,10 @@ background-repeat: no-repeat; background-position: 2px center; } + + &arrow-top { + background-image: url('~@/assets/icons/arrow-top.svg'); + background-repeat: no-repeat; + background-position: center; + } } diff --git a/src/types/components.ts b/src/types/components.ts index 95934c03..59b46ab3 100644 --- a/src/types/components.ts +++ b/src/types/components.ts @@ -6,6 +6,8 @@ export enum Components { SCard = 'SCard', SCheckbox = 'SCheckbox', SCol= 'SCol', + SCollapse = 'SCollapse', + SCollapseItem = 'SCollapseItem', SContainer = 'SContainer', SFooter = 'SFooter', SForm = 'SForm',