From 406421b1bbbb757a96e9ba0e17ae1eaf7b2f5873 Mon Sep 17 00:00:00 2001 From: alexnatalia Date: Wed, 11 Aug 2021 14:59:16 +0300 Subject: [PATCH 01/13] Update Element UI version. --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 5207926a..a15f551c 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,7 @@ "dependencies": { "core-js": "^3.6.4", "element-resize-detector": "^1.2.1", - "element-ui": "^2.13.2", + "element-ui": "^2.15.5", "lodash": "^4.17.15", "throttle-debounce": "^1.0.1", "v-jsoneditor": "^1.4.1", diff --git a/yarn.lock b/yarn.lock index 55866ce1..fb34c304 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6033,10 +6033,10 @@ element-resize-detector@^1.2.1: dependencies: batch-processor "1.0.0" -element-ui@^2.13.2: - version "2.13.2" - resolved "https://registry.yarnpkg.com/element-ui/-/element-ui-2.13.2.tgz#582bf47aaaaaafe23ea1958fae217a687ad06447" - integrity sha512-r761DRPssMPKDiJZWFlG+4e4vr0cRG/atKr3Eqr8Xi0tQMNbtmYU1QXvFnKiFPFFGkgJ6zS6ASkG+sellcoHlQ== +element-ui@^2.15.5: + version "2.15.5" + resolved "https://registry.yarnpkg.com/element-ui/-/element-ui-2.15.5.tgz#dfb376dc5cd60adab21c991bd4fac3e67e5300f4" + integrity sha512-B/YCdz2aRY2WnFXzbTRTHPKZHBD/2KV6u88EBnkaARC/Lyxnap+7vpvrcW5UNTyVwjItS5Fj1eQyRy6236lbXg== dependencies: async-validator "~1.8.1" babel-helper-vue-jsx-merge-props "^2.0.0" From e351e5cc6328f03cdfe20d36012c32b75acba658 Mon Sep 17 00:00:00 2001 From: alexnatalia Date: Thu, 12 Aug 2021 10:04:07 +0300 Subject: [PATCH 02/13] Added Skeleton component. --- .../Skeleton/SSkeleton/SSkeleton.vue | 45 +++++++++++++++ src/components/Skeleton/SSkeleton/index.ts | 11 ++++ .../Skeleton/SSkeletonItem/SSkeletonItem.vue | 21 +++++++ .../Skeleton/SSkeletonItem/index.ts | 11 ++++ src/components/Skeleton/consts.ts | 12 ++++ src/components/Skeleton/index.ts | 3 + src/components/index.ts | 1 + src/index.ts | 6 ++ src/stories/Skeleton/SSkeleton.stories.ts | 55 +++++++++++++++++++ src/stories/Skeleton/SSkeletonItem.stories.ts | 29 ++++++++++ src/styles/index.scss | 1 + src/styles/skeleton.scss | 50 +++++++++++++++++ src/types/components.ts | 2 + 13 files changed, 247 insertions(+) create mode 100644 src/components/Skeleton/SSkeleton/SSkeleton.vue create mode 100644 src/components/Skeleton/SSkeleton/index.ts create mode 100644 src/components/Skeleton/SSkeletonItem/SSkeletonItem.vue create mode 100644 src/components/Skeleton/SSkeletonItem/index.ts create mode 100644 src/components/Skeleton/consts.ts create mode 100644 src/components/Skeleton/index.ts create mode 100644 src/stories/Skeleton/SSkeleton.stories.ts create mode 100644 src/stories/Skeleton/SSkeletonItem.stories.ts create mode 100644 src/styles/skeleton.scss diff --git a/src/components/Skeleton/SSkeleton/SSkeleton.vue b/src/components/Skeleton/SSkeleton/SSkeleton.vue new file mode 100644 index 00000000..1ea9a5e2 --- /dev/null +++ b/src/components/Skeleton/SSkeleton/SSkeleton.vue @@ -0,0 +1,45 @@ + + + diff --git a/src/components/Skeleton/SSkeleton/index.ts b/src/components/Skeleton/SSkeleton/index.ts new file mode 100644 index 00000000..9c62e66b --- /dev/null +++ b/src/components/Skeleton/SSkeleton/index.ts @@ -0,0 +1,11 @@ +import { Components, SFCWithInstall } from '../../../types/components' +import install from '../../../utils/install' + +import _SSkeleton from './SSkeleton.vue' + +const SSkeleton = _SSkeleton as SFCWithInstall + +SSkeleton.install = install(Components.SSkeleton, SSkeleton) + +export { SSkeleton } +export default SSkeleton diff --git a/src/components/Skeleton/SSkeletonItem/SSkeletonItem.vue b/src/components/Skeleton/SSkeletonItem/SSkeletonItem.vue new file mode 100644 index 00000000..3a1e8c0c --- /dev/null +++ b/src/components/Skeleton/SSkeletonItem/SSkeletonItem.vue @@ -0,0 +1,21 @@ + + + diff --git a/src/components/Skeleton/SSkeletonItem/index.ts b/src/components/Skeleton/SSkeletonItem/index.ts new file mode 100644 index 00000000..a687622c --- /dev/null +++ b/src/components/Skeleton/SSkeletonItem/index.ts @@ -0,0 +1,11 @@ +import { Components, SFCWithInstall } from '../../../types/components' +import install from '../../../utils/install' + +import _SSkeletonItem from './SSkeletonItem.vue' + +const SSkeletonItem = _SSkeletonItem as SFCWithInstall + +SSkeletonItem.install = install(Components.SSkeleton, SSkeletonItem) + +export { SSkeletonItem } +export default SSkeletonItem diff --git a/src/components/Skeleton/consts.ts b/src/components/Skeleton/consts.ts new file mode 100644 index 00000000..dff7a80c --- /dev/null +++ b/src/components/Skeleton/consts.ts @@ -0,0 +1,12 @@ +export enum SkeletonItemVariant { + P = 'p', + TEXT = 'text', + H1 = 'h1', + H2 = 'h2', + H3 = 'h3', + CAPTION = 'caption', + BUTTON = 'button', + IMAGE = 'image', + CIRCLE = 'circle', + RECT = 'rect' +} diff --git a/src/components/Skeleton/index.ts b/src/components/Skeleton/index.ts new file mode 100644 index 00000000..c76f3bfc --- /dev/null +++ b/src/components/Skeleton/index.ts @@ -0,0 +1,3 @@ +export { SSkeleton } from './SSkeleton' +export { SSkeletonItem } from './SSkeletonItem' +export { SkeletonItemVariant } from './consts' diff --git a/src/components/index.ts b/src/components/index.ts index dc9f811c..9ac8dc91 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -27,6 +27,7 @@ export { SRow } from './Layout/Row' export { SScrollbar } from './Scrollbar' export { SScrollSectionItem, SScrollSections } from './ScrollSections' export { SSelect, SOption, SOptionGroup } from './Select' +export { SSkeleton, SSkeletonItem } from './Skeleton' export { STab, STabs } from './Tab' export { STable, SHierarchicalTable, STableColumn } from './Table' export { STooltip } from './Tooltip' diff --git a/src/index.ts b/src/index.ts index 25db3641..a5c25ce9 100644 --- a/src/index.ts +++ b/src/index.ts @@ -41,6 +41,8 @@ import { SScrollSectionItem, SScrollSections, SSelect, + SSkeleton, + SSkeletonItem, SSlider, SSubmenu, SSwitch, @@ -109,6 +111,8 @@ const SoramitsuElements = { vue.use(SScrollSectionItem) vue.use(SScrollSections) vue.use(SSelect) + vue.use(SSkeleton) + vue.use(SSkeletonItem) vue.use(SSlider) vue.use(SSubmenu) vue.use(SSwitch) @@ -179,6 +183,8 @@ export { SScrollSectionItem, SScrollSections, SSelect, + SSkeleton, + SSkeletonItem, SSlider, SSubmenu, SSwitch, diff --git a/src/stories/Skeleton/SSkeleton.stories.ts b/src/stories/Skeleton/SSkeleton.stories.ts new file mode 100644 index 00000000..b74ae26d --- /dev/null +++ b/src/stories/Skeleton/SSkeleton.stories.ts @@ -0,0 +1,55 @@ +import { boolean, number, withKnobs } from '@storybook/addon-knobs' + +import { SSkeleton, SSkeletonItem } from '../../components/Skeleton' + +export default { + component: SSkeleton, + title: 'Design System/Components/Skeleton/SSkeleton', + decorators: [withKnobs], + excludeStories: /.*Data$/ +} + +export const configurable = () => ({ + components: { + SSkeleton, + SSkeletonItem + }, + template: `
+ + + + +
`, + props: { + animated: { + default: boolean('Animated', false) + }, + count: { + default: number('Count', 1) + }, + loading: { + default: boolean('Loading', true) + }, + rows: { + default: number('Rows', 4) + }, + throttle: { + default: number('Throttle', 0) + } + } +}) diff --git a/src/stories/Skeleton/SSkeletonItem.stories.ts b/src/stories/Skeleton/SSkeletonItem.stories.ts new file mode 100644 index 00000000..77d55729 --- /dev/null +++ b/src/stories/Skeleton/SSkeletonItem.stories.ts @@ -0,0 +1,29 @@ +import { select, withKnobs } from '@storybook/addon-knobs' + +import { SSkeleton, SSkeletonItem, SkeletonItemVariant } from '../../components/Skeleton' + +export default { + component: SSkeletonItem, + title: 'Design System/Components/Skeleton/SSkeletonItem', + decorators: [withKnobs], + excludeStories: /.*Data$/ +} + +export const configurable = () => ({ + components: { + SSkeleton, + SSkeletonItem + }, + template: `
+ + + +
`, + props: { + variant: { + default: select('Variant', Object.values(SkeletonItemVariant), SkeletonItemVariant.TEXT) + } + } +}) diff --git a/src/styles/index.scss b/src/styles/index.scss index 58519129..c0807c59 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -23,6 +23,7 @@ @import "./scrollbar"; @import "./scroll-sections"; @import "./select"; +@import "./skeleton"; @import "./slider"; @import "./switch"; @import "./tabs"; diff --git a/src/styles/skeleton.scss b/src/styles/skeleton.scss new file mode 100644 index 00000000..95cba927 --- /dev/null +++ b/src/styles/skeleton.scss @@ -0,0 +1,50 @@ +$s-skeleton-class: '.el-skeleton'; + +.s-skeleton { + #{$s-skeleton-class} { + font-size: 0; + width: 100%; + &__item { + background-color: var(--s-color-base-background); + &:not(:last-child) { + margin-bottom: calc(var(--s-basic-spacing) / 2); + } + &:not(#{$s-skeleton-class}__circle) { + border-radius: var(--s-border-radius-mini); + } + } + &__image { + min-height: 150px; + svg { + fill: var(--s-color-base-on-disabled); + } + } + &__text, &__caption, &__rect { + height: var(--s-font-size-small); + } + &__p { + height: var(--s-size-mini); + } + &__h1 { + height: var(--s-heading1-font-size); + } + &__h2 { + height: var(--s-heading2-font-size); + } + &__h3 { + height: var(--s-heading3-font-size); + } + &__button, &__circle { + height: var(--s-size-medium); + } + &__circle { + width: var(--s-size-medium); + } + &.is-animated { + #{$s-skeleton-class}__item { + background: linear-gradient(90deg, var(--s-color-base-background) 25%, var(--s-color-base-background-hover) 37%, var(--s-color-base-background) 63%); + background-size: 400% 100%; + } + } + } +} diff --git a/src/types/components.ts b/src/types/components.ts index c22836ec..436cb3b5 100644 --- a/src/types/components.ts +++ b/src/types/components.ts @@ -43,6 +43,8 @@ export enum Components { SScrollSectionItem = 'SScrollSectionItem', SScrollSections = 'SScrollSections', SSelect = 'SSelect', + SSkeleton = 'SSkeleton', + SSkeletonItem = 'SSkeletonItem', SSlider = 'SSlider', SSubmenu = 'SSubmenu', SSwitch = 'SSwitch', From c25ecf982b802d0b6db8ae0d0ab8a6b2e1bdab8d Mon Sep 17 00:00:00 2001 From: alexnatalia Date: Thu, 12 Aug 2021 13:08:15 +0300 Subject: [PATCH 03/13] Updated UI Lib version, Added SImage component, added and updated stories for Skeleton and Image components. --- package.json | 2 +- src/components/Image/SImage/SImage.vue | 69 +++++++++++++++++++ src/components/Image/SImage/index.ts | 11 +++ src/components/Image/consts.ts | 7 ++ src/components/Image/index.ts | 2 + .../Skeleton/SSkeletonItem/SSkeletonItem.vue | 6 +- src/components/Skeleton/consts.ts | 2 +- src/components/Skeleton/index.ts | 2 +- src/components/index.ts | 1 + src/index.ts | 3 + src/stories/Image/SImage.stories.ts | 45 ++++++++++++ src/stories/Image/SImageLazy.stories.ts | 33 +++++++++ src/stories/Skeleton/SSkeleton.stories.ts | 20 ++++-- src/stories/Skeleton/SSkeletonItem.stories.ts | 8 +-- src/styles/image.scss | 5 ++ src/styles/index.scss | 1 + src/types/components.ts | 1 + 17 files changed, 202 insertions(+), 16 deletions(-) create mode 100644 src/components/Image/SImage/SImage.vue create mode 100644 src/components/Image/SImage/index.ts create mode 100644 src/components/Image/consts.ts create mode 100644 src/components/Image/index.ts create mode 100644 src/stories/Image/SImage.stories.ts create mode 100644 src/stories/Image/SImageLazy.stories.ts create mode 100644 src/styles/image.scss diff --git a/package.json b/package.json index a15f551c..d79b26a6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@soramitsu/soramitsu-js-ui", - "version": "1.0.15", + "version": "1.0.17", "private": false, "publishConfig": { "registry": "https://nexus.iroha.tech/repository/npm-soramitsu/" diff --git a/src/components/Image/SImage/SImage.vue b/src/components/Image/SImage/SImage.vue new file mode 100644 index 00000000..75731c63 --- /dev/null +++ b/src/components/Image/SImage/SImage.vue @@ -0,0 +1,69 @@ + + + diff --git a/src/components/Image/SImage/index.ts b/src/components/Image/SImage/index.ts new file mode 100644 index 00000000..13a62728 --- /dev/null +++ b/src/components/Image/SImage/index.ts @@ -0,0 +1,11 @@ +import { Components, SFCWithInstall } from '../../../types/components' +import install from '../../../utils/install' + +import _SImage from './SImage.vue' + +const SImage = _SImage as SFCWithInstall + +SImage.install = install(Components.SImage, SImage) + +export { SImage } +export default SImage diff --git a/src/components/Image/consts.ts b/src/components/Image/consts.ts new file mode 100644 index 00000000..d8b95ed4 --- /dev/null +++ b/src/components/Image/consts.ts @@ -0,0 +1,7 @@ +export enum ImageFit { + FILL = 'fill', + CONTAIN = 'contain', + COVER = 'cover', + NONE = 'none', + SCALE_DOWN = 'scale-down' +} diff --git a/src/components/Image/index.ts b/src/components/Image/index.ts new file mode 100644 index 00000000..2641e494 --- /dev/null +++ b/src/components/Image/index.ts @@ -0,0 +1,2 @@ +export { SImage } from './SImage' +export { ImageFit } from './consts' diff --git a/src/components/Skeleton/SSkeletonItem/SSkeletonItem.vue b/src/components/Skeleton/SSkeletonItem/SSkeletonItem.vue index 3a1e8c0c..98558dae 100644 --- a/src/components/Skeleton/SSkeletonItem/SSkeletonItem.vue +++ b/src/components/Skeleton/SSkeletonItem/SSkeletonItem.vue @@ -1,12 +1,12 @@ diff --git a/src/components/Skeleton/consts.ts b/src/components/Skeleton/consts.ts index dff7a80c..214fbeee 100644 --- a/src/components/Skeleton/consts.ts +++ b/src/components/Skeleton/consts.ts @@ -1,4 +1,4 @@ -export enum SkeletonItemVariant { +export enum SkeletonItemElement { P = 'p', TEXT = 'text', H1 = 'h1', diff --git a/src/components/Skeleton/index.ts b/src/components/Skeleton/index.ts index c76f3bfc..95e49c76 100644 --- a/src/components/Skeleton/index.ts +++ b/src/components/Skeleton/index.ts @@ -1,3 +1,3 @@ export { SSkeleton } from './SSkeleton' export { SSkeletonItem } from './SSkeletonItem' -export { SkeletonItemVariant } from './consts' +export { SkeletonItemElement } from './consts' diff --git a/src/components/index.ts b/src/components/index.ts index 9ac8dc91..dfa08211 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -16,6 +16,7 @@ export { SFooter } from './Layout/Footer' export { SForm, SFormItem } from './Form' export { SHeader } from './Layout/Header' export { SIcon } from './Icon' +export { SImage } from './Image' export { SInput, SFloatInput, SJsonInput } from './Input' export { SMain } from './Layout/Main' export { SMenu, SMenuItem, SMenuItemGroup, SSubmenu } from './Menu' diff --git a/src/index.ts b/src/index.ts index a5c25ce9..62348afe 100644 --- a/src/index.ts +++ b/src/index.ts @@ -24,6 +24,7 @@ import { SFormItem, SHeader, SIcon, + SImage, SInput, SFloatInput, SJsonInput, @@ -94,6 +95,7 @@ const SoramitsuElements = { vue.use(SFormItem) vue.use(SHeader) vue.use(SIcon) + vue.use(SImage) vue.use(SInput) vue.use(SFloatInput) vue.use(SJsonInput) @@ -166,6 +168,7 @@ export { SFormItem, SHeader, SIcon, + SImage, SInput, SFloatInput, SJsonInput, diff --git a/src/stories/Image/SImage.stories.ts b/src/stories/Image/SImage.stories.ts new file mode 100644 index 00000000..2a6fb039 --- /dev/null +++ b/src/stories/Image/SImage.stories.ts @@ -0,0 +1,45 @@ +import { text, boolean, number, select, withKnobs } from '@storybook/addon-knobs' + +import { SImage, ImageFit } from '../../components/Image' + +export default { + component: SImage, + title: 'Design System/Components/Image', + decorators: [withKnobs] +} + +export const configurable = () => ({ + components: { SImage }, + template: ``, + props: { + src: { + default: text('Src', 'https://picsum.photos/1500') + }, + fit: { + default: select('Element', Object.values(ImageFit), ImageFit.NONE) + }, + lazy: { + default: boolean('Lazy', true) + }, + alt: { + default: text('Alt', '') + }, + zIndex: { + default: number('ZIndex', 0) + }, + hasSkeleton: { + default: boolean('Has Skeleton', true) + }, + animated: { + default: boolean('Skeleton has Animation', true) + } + } +}) diff --git a/src/stories/Image/SImageLazy.stories.ts b/src/stories/Image/SImageLazy.stories.ts new file mode 100644 index 00000000..030261e7 --- /dev/null +++ b/src/stories/Image/SImageLazy.stories.ts @@ -0,0 +1,33 @@ +import { boolean, withKnobs } from '@storybook/addon-knobs' + +import { SImage } from '../../components/Image' + +export default { + component: SImage, + title: 'Design System/Components/Image/Lazy', + decorators: [withKnobs] +} + +export const configurable = () => ({ + components: { SImage }, + template: `
+ + + + + + + + + + + + + + + +
`, + data: () => ({ + imageSrc: 'https://picsum.photos/1024' + }) +}) diff --git a/src/stories/Skeleton/SSkeleton.stories.ts b/src/stories/Skeleton/SSkeleton.stories.ts index b74ae26d..5786e542 100644 --- a/src/stories/Skeleton/SSkeleton.stories.ts +++ b/src/stories/Skeleton/SSkeleton.stories.ts @@ -1,6 +1,7 @@ -import { boolean, number, withKnobs } from '@storybook/addon-knobs' +import { boolean, number, text, withKnobs } from '@storybook/addon-knobs' import { SSkeleton, SSkeletonItem } from '../../components/Skeleton' +import { SImage } from '../../components/Image' export default { component: SSkeleton, @@ -12,7 +13,8 @@ export default { export const configurable = () => ({ components: { SSkeleton, - SSkeletonItem + SSkeletonItem, + SImage }, template: `
({ style="width: 100%;" > @@ -50,6 +52,12 @@ export const configurable = () => ({ }, throttle: { default: number('Throttle', 0) + }, + src: { + default: text('Image Src', 'https://picsum.photos/1024') + }, + lazy: { + default: boolean('Image Lazy', true) } } }) diff --git a/src/stories/Skeleton/SSkeletonItem.stories.ts b/src/stories/Skeleton/SSkeletonItem.stories.ts index 77d55729..0568549c 100644 --- a/src/stories/Skeleton/SSkeletonItem.stories.ts +++ b/src/stories/Skeleton/SSkeletonItem.stories.ts @@ -1,6 +1,6 @@ import { select, withKnobs } from '@storybook/addon-knobs' -import { SSkeleton, SSkeletonItem, SkeletonItemVariant } from '../../components/Skeleton' +import { SSkeleton, SSkeletonItem, SkeletonItemElement } from '../../components/Skeleton' export default { component: SSkeletonItem, @@ -17,13 +17,13 @@ export const configurable = () => ({ template: `
`, props: { - variant: { - default: select('Variant', Object.values(SkeletonItemVariant), SkeletonItemVariant.TEXT) + element: { + default: select('Element', Object.values(SkeletonItemElement), SkeletonItemElement.TEXT) } } }) diff --git a/src/styles/image.scss b/src/styles/image.scss new file mode 100644 index 00000000..7377c67e --- /dev/null +++ b/src/styles/image.scss @@ -0,0 +1,5 @@ +.s-image { + &__container { + width: 100%; + } +} \ No newline at end of file diff --git a/src/styles/index.scss b/src/styles/index.scss index c0807c59..9082eda0 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -13,6 +13,7 @@ @import "./dropdown"; @import "./form"; @import "./icons"; +@import "./image"; @import "./input"; @import "./json-input"; @import "./layout"; diff --git a/src/types/components.ts b/src/types/components.ts index 436cb3b5..0b7bd361 100644 --- a/src/types/components.ts +++ b/src/types/components.ts @@ -26,6 +26,7 @@ export enum Components { SFormItem = 'SFormItem', SHeader = 'SHeader', SIcon = 'SIcon', + SImage = 'SImage', SInput = 'SInput', SFloatInput = 'SFloatInput', SJsonInput = 'SJsonInput', From 5faf0d997b2002e8a5a6110ac7fae126c59996de Mon Sep 17 00:00:00 2001 From: alexnatalia Date: Thu, 12 Aug 2021 13:22:24 +0300 Subject: [PATCH 04/13] Refactoring and SImage props fixing. --- src/components/Image/SImage/SImage.vue | 28 +++++++++++++++------ src/stories/Image/SImage.stories.ts | 6 ++--- src/stories/Image/SImageLazy.stories.ts | 30 +++++++++++------------ src/stories/Skeleton/SSkeleton.stories.ts | 4 +-- 4 files changed, 40 insertions(+), 28 deletions(-) diff --git a/src/components/Image/SImage/SImage.vue b/src/components/Image/SImage/SImage.vue index 75731c63..b3e2dcea 100644 --- a/src/components/Image/SImage/SImage.vue +++ b/src/components/Image/SImage/SImage.vue @@ -2,17 +2,33 @@
- +
@@ -50,7 +66,7 @@ export default class SImage extends Vue { /** * Set image preview z-index */ - @Prop({ default: 0, type: String }) readonly zIndex?: number + @Prop({ default: 0, type: Number }) readonly zIndex?: number /** * Whether image has skeleton */ @@ -61,9 +77,5 @@ export default class SImage extends Vue { @Prop({ default: true, type: Boolean }) readonly animated?: boolean @Ref('image') elImage?: any - - loading (): boolean { - return !this.elImage || this.elImage.loading - } } diff --git a/src/stories/Image/SImage.stories.ts b/src/stories/Image/SImage.stories.ts index 2a6fb039..345d93ff 100644 --- a/src/stories/Image/SImage.stories.ts +++ b/src/stories/Image/SImage.stories.ts @@ -15,8 +15,8 @@ export const configurable = () => ({ :fit="fit" :alt="alt" :lazy="lazy" - :zIndex="zIndex" - :hasSkeleton="hasSkeleton" + :z-index="zIndex" + :has-skeleton="hasSkeleton" :animated="animated" />`, props: { @@ -33,7 +33,7 @@ export const configurable = () => ({ default: text('Alt', '') }, zIndex: { - default: number('ZIndex', 0) + default: number('Z-index', 0) }, hasSkeleton: { default: boolean('Has Skeleton', true) diff --git a/src/stories/Image/SImageLazy.stories.ts b/src/stories/Image/SImageLazy.stories.ts index 030261e7..c88b5012 100644 --- a/src/stories/Image/SImageLazy.stories.ts +++ b/src/stories/Image/SImageLazy.stories.ts @@ -11,21 +11,21 @@ export default { export const configurable = () => ({ components: { SImage }, template: `
- - - - - - - - - - - - - - - + + + + + + + + + + + + + + +
`, data: () => ({ imageSrc: 'https://picsum.photos/1024' diff --git a/src/stories/Skeleton/SSkeleton.stories.ts b/src/stories/Skeleton/SSkeleton.stories.ts index 5786e542..7597ea9a 100644 --- a/src/stories/Skeleton/SSkeleton.stories.ts +++ b/src/stories/Skeleton/SSkeleton.stories.ts @@ -31,7 +31,7 @@ export const configurable = () => ({ @@ -39,7 +39,7 @@ export const configurable = () => ({
`, props: { animated: { - default: boolean('Animated', false) + default: boolean('Animated', true) }, count: { default: number('Count', 1) From 98cdd16b5499304f33961f26333779d5e7a86623 Mon Sep 17 00:00:00 2001 From: alexnatalia Date: Thu, 12 Aug 2021 14:05:13 +0300 Subject: [PATCH 05/13] Refactored stories. --- src/stories/Image/SImage.stories.ts | 45 ------------------- ...ImageLazy.stories.ts => SImage.stories.ts} | 42 +++++++++++++++-- .../{Skeleton => }/SSkeleton.stories.ts | 27 +++++++++-- src/stories/Skeleton/SSkeletonItem.stories.ts | 29 ------------ 4 files changed, 62 insertions(+), 81 deletions(-) delete mode 100644 src/stories/Image/SImage.stories.ts rename src/stories/{Image/SImageLazy.stories.ts => SImage.stories.ts} (61%) rename src/stories/{Skeleton => }/SSkeleton.stories.ts (74%) delete mode 100644 src/stories/Skeleton/SSkeletonItem.stories.ts diff --git a/src/stories/Image/SImage.stories.ts b/src/stories/Image/SImage.stories.ts deleted file mode 100644 index 345d93ff..00000000 --- a/src/stories/Image/SImage.stories.ts +++ /dev/null @@ -1,45 +0,0 @@ -import { text, boolean, number, select, withKnobs } from '@storybook/addon-knobs' - -import { SImage, ImageFit } from '../../components/Image' - -export default { - component: SImage, - title: 'Design System/Components/Image', - decorators: [withKnobs] -} - -export const configurable = () => ({ - components: { SImage }, - template: ``, - props: { - src: { - default: text('Src', 'https://picsum.photos/1500') - }, - fit: { - default: select('Element', Object.values(ImageFit), ImageFit.NONE) - }, - lazy: { - default: boolean('Lazy', true) - }, - alt: { - default: text('Alt', '') - }, - zIndex: { - default: number('Z-index', 0) - }, - hasSkeleton: { - default: boolean('Has Skeleton', true) - }, - animated: { - default: boolean('Skeleton has Animation', true) - } - } -}) diff --git a/src/stories/Image/SImageLazy.stories.ts b/src/stories/SImage.stories.ts similarity index 61% rename from src/stories/Image/SImageLazy.stories.ts rename to src/stories/SImage.stories.ts index c88b5012..123f7c42 100644 --- a/src/stories/Image/SImageLazy.stories.ts +++ b/src/stories/SImage.stories.ts @@ -1,14 +1,50 @@ -import { boolean, withKnobs } from '@storybook/addon-knobs' +import { text, boolean, number, select, withKnobs } from '@storybook/addon-knobs' -import { SImage } from '../../components/Image' +import { SImage, ImageFit } from '../components/Image' export default { component: SImage, - title: 'Design System/Components/Image/Lazy', + title: 'Design System/Components/Image', decorators: [withKnobs] } export const configurable = () => ({ + components: { SImage }, + template: ``, + props: { + src: { + default: text('Src', 'https://picsum.photos/1024') + }, + fit: { + default: select('Element', Object.values(ImageFit), ImageFit.NONE) + }, + lazy: { + default: boolean('Lazy', true) + }, + alt: { + default: text('Alt', '') + }, + zIndex: { + default: number('Z-index', 0) + }, + hasSkeleton: { + default: boolean('Has Skeleton', true) + }, + animated: { + default: boolean('Skeleton has Animation', true) + } + } +}) + +export const LazyImages = () => ({ components: { SImage }, template: `
diff --git a/src/stories/Skeleton/SSkeleton.stories.ts b/src/stories/SSkeleton.stories.ts similarity index 74% rename from src/stories/Skeleton/SSkeleton.stories.ts rename to src/stories/SSkeleton.stories.ts index 7597ea9a..2bffc5b7 100644 --- a/src/stories/Skeleton/SSkeleton.stories.ts +++ b/src/stories/SSkeleton.stories.ts @@ -1,11 +1,11 @@ -import { boolean, number, text, withKnobs } from '@storybook/addon-knobs' +import { boolean, number, text, select, withKnobs } from '@storybook/addon-knobs' -import { SSkeleton, SSkeletonItem } from '../../components/Skeleton' -import { SImage } from '../../components/Image' +import { SSkeleton, SSkeletonItem, SkeletonItemElement } from '../components/Skeleton' +import { SImage } from '../components/Image' export default { component: SSkeleton, - title: 'Design System/Components/Skeleton/SSkeleton', + title: 'Design System/Components/Skeleton', decorators: [withKnobs], excludeStories: /.*Data$/ } @@ -61,3 +61,22 @@ export const configurable = () => ({ } } }) + +export const SkeletonItem = () => ({ + components: { + SSkeleton, + SSkeletonItem + }, + template: `
+ + + +
`, + props: { + element: { + default: select('Element', Object.values(SkeletonItemElement), SkeletonItemElement.TEXT) + } + } +}) diff --git a/src/stories/Skeleton/SSkeletonItem.stories.ts b/src/stories/Skeleton/SSkeletonItem.stories.ts deleted file mode 100644 index 0568549c..00000000 --- a/src/stories/Skeleton/SSkeletonItem.stories.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { select, withKnobs } from '@storybook/addon-knobs' - -import { SSkeleton, SSkeletonItem, SkeletonItemElement } from '../../components/Skeleton' - -export default { - component: SSkeletonItem, - title: 'Design System/Components/Skeleton/SSkeletonItem', - decorators: [withKnobs], - excludeStories: /.*Data$/ -} - -export const configurable = () => ({ - components: { - SSkeleton, - SSkeletonItem - }, - template: `
- - - -
`, - props: { - element: { - default: select('Element', Object.values(SkeletonItemElement), SkeletonItemElement.TEXT) - } - } -}) From 55063a30dba57051875fa96aabe9693180c94ced Mon Sep 17 00:00:00 2001 From: alexnatalia Date: Thu, 12 Aug 2021 14:24:14 +0300 Subject: [PATCH 06/13] Fixed Dropdown divider colors. --- src/styles/dropdown.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/styles/dropdown.scss b/src/styles/dropdown.scss index c9ee8acd..a71874a5 100644 --- a/src/styles/dropdown.scss +++ b/src/styles/dropdown.scss @@ -68,4 +68,10 @@ &.is-disabled { color: var(--s-color-base-content-quaternary); } + &--divided { + border-top-color: var(--s-color-base-border-secondary); + &:before { + background-color: transparent; + } + } } From a4a71afaecc0bbfa427058569c9c83e54ceef5b3 Mon Sep 17 00:00:00 2001 From: alexnatalia Date: Thu, 12 Aug 2021 15:38:03 +0300 Subject: [PATCH 07/13] Refactored due to PR comments. --- src/components/Image/SImage/SImage.vue | 18 +++++++++--------- .../Skeleton/SSkeleton/SSkeleton.vue | 10 +++++----- src/stories/SImage.stories.ts | 2 +- src/styles/image.scss | 2 +- 4 files changed, 16 insertions(+), 16 deletions(-) diff --git a/src/components/Image/SImage/SImage.vue b/src/components/Image/SImage/SImage.vue index b3e2dcea..0cf796ed 100644 --- a/src/components/Image/SImage/SImage.vue +++ b/src/components/Image/SImage/SImage.vue @@ -2,7 +2,7 @@
@@ -27,6 +28,7 @@ :fit="fit" :alt="alt" :lazy="lazy" + :scroll-container="scrollContainer" :z-ndex="zIndex" />
@@ -52,9 +54,11 @@ export default class SImage extends Vue { */ @Prop({ default: () => null, type: String }) readonly src!: string /** - * Indicate how the image should be resized to fit its container, same as object-fit + * Indicate how the image should be resized to fit its container, same as object-fit. + * Possible values are: `fill` / `contain` / `cover` / `none` / `scale-down`. + * Default value is ImageFit.FILL. */ - @Prop({ default: ImageFit.NONE, type: String }) readonly fit!: string + @Prop({ default: ImageFit.FILL, type: String }) readonly fit!: string /** * Native alt */ @@ -63,6 +67,11 @@ export default class SImage extends Vue { * Whether to use lazy load */ @Prop({ default: false, type: Boolean }) readonly lazy!: boolean + /** + * The container to add scroll listener when using lazy load. + * Posssible value is the nearest parent container whose overflow property is auto or scroll + */ + @Prop({ default: '', type: [String, HTMLElement] }) readonly scrollContainer!: string | HTMLElement /** * Set image preview z-index */ diff --git a/src/components/Skeleton/SSkeleton/SSkeleton.vue b/src/components/Skeleton/SSkeleton/SSkeleton.vue index e15adb86..53e4e1f0 100644 --- a/src/components/Skeleton/SSkeleton/SSkeleton.vue +++ b/src/components/Skeleton/SSkeleton/SSkeleton.vue @@ -22,11 +22,12 @@ import ElSkeletonItem from 'element-ui/lib/skeleton-item' }) export default class SSkeleton extends Vue { /** - * Whether showing the animation + * Whether showing the animation, default value is false. */ @Prop({ default: false, type: Boolean }) readonly animated!: boolean /** - * How many fake items to render to the DOM, should have integer value + * How many fake items to render in the DOM, should have integer value. + * Default value is 1. */ @Prop({ default: 1, type: Number }) readonly count!: number /** @@ -34,11 +35,12 @@ export default class SSkeleton extends Vue { */ @Prop({ default: true, type: Boolean }) readonly loading!: boolean /** - * Numbers of the row, only useful when no template slot were given, should have integer value + * Numbers of the row, only useful when no template slot were given, should have integer value. + * Default value is 1. */ @Prop({ default: 4, type: Number }) readonly rows!: number /** - * Rendering delay in millseconds, should have integer value + * Rendering delay in millseconds, should have integer value. Default value is zero. */ @Prop({ default: 0, type: Number }) readonly throttle!: number } diff --git a/src/components/Skeleton/SSkeletonItem/SSkeletonItem.vue b/src/components/Skeleton/SSkeletonItem/SSkeletonItem.vue index 98558dae..706253bf 100644 --- a/src/components/Skeleton/SSkeletonItem/SSkeletonItem.vue +++ b/src/components/Skeleton/SSkeletonItem/SSkeletonItem.vue @@ -14,7 +14,8 @@ import { SkeletonItemElement } from '../consts' export default class SSkeletonItem extends Vue { /** * The current rendering skeleton type. - * Possible values are: `p` / `text` / `h1` / `h2` / `h3` / `text` / `caption` / `button` / `image` / `circle` / `rect` + * Possible values are: `p` / `text` / `h1` / `h2` / `h3` / `text` / `caption` / `button` / `image` / `circle` / `rect`. + * Default value is SkeletonItemElement.TEXT. */ @Prop({ default: SkeletonItemElement.TEXT, type: String }) readonly element!: string } From 21a8ec6253c7b9165f92fd048f4c6663cc182d62 Mon Sep 17 00:00:00 2001 From: alexnatalia Date: Thu, 12 Aug 2021 19:00:32 +0300 Subject: [PATCH 09/13] Updated skeleton background colors. --- src/styles/skeleton.scss | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/styles/skeleton.scss b/src/styles/skeleton.scss index 95cba927..985f8302 100644 --- a/src/styles/skeleton.scss +++ b/src/styles/skeleton.scss @@ -1,11 +1,12 @@ $s-skeleton-class: '.el-skeleton'; +$s-skeleton-background-color: var(--s-color-base-content-tertiary); .s-skeleton { #{$s-skeleton-class} { font-size: 0; width: 100%; &__item { - background-color: var(--s-color-base-background); + background-color: $s-skeleton-background-color; &:not(:last-child) { margin-bottom: calc(var(--s-basic-spacing) / 2); } @@ -16,7 +17,7 @@ $s-skeleton-class: '.el-skeleton'; &__image { min-height: 150px; svg { - fill: var(--s-color-base-on-disabled); + fill: var(--s-color-base-on-accent); } } &__text, &__caption, &__rect { @@ -42,7 +43,7 @@ $s-skeleton-class: '.el-skeleton'; } &.is-animated { #{$s-skeleton-class}__item { - background: linear-gradient(90deg, var(--s-color-base-background) 25%, var(--s-color-base-background-hover) 37%, var(--s-color-base-background) 63%); + background: linear-gradient(90deg, $s-skeleton-background-color 25%, var(--s-color-base-background-hover) 37%, $s-skeleton-background-color 63%); background-size: 400% 100%; } } From 2bc6c4165aeb1cb9c04f8bb1818b8c026277d9ff Mon Sep 17 00:00:00 2001 From: alexnatalia Date: Fri, 13 Aug 2021 03:19:01 +0300 Subject: [PATCH 10/13] Refactored due to PR comments. --- src/components/Image/SImage/SImage.vue | 53 +++++++++----------------- src/stories/SImage.stories.ts | 40 ++++++++++--------- src/styles/image.scss | 13 +++++++ src/styles/skeleton.scss | 5 ++- 4 files changed, 59 insertions(+), 52 deletions(-) diff --git a/src/components/Image/SImage/SImage.vue b/src/components/Image/SImage/SImage.vue index 8b4b50df..1c09e3c9 100644 --- a/src/components/Image/SImage/SImage.vue +++ b/src/components/Image/SImage/SImage.vue @@ -1,44 +1,27 @@ diff --git a/src/stories/SImage.stories.ts b/src/stories/SImage.stories.ts index 6be4b55c..6ba58e47 100644 --- a/src/stories/SImage.stories.ts +++ b/src/stories/SImage.stories.ts @@ -18,6 +18,7 @@ export const configurable = () => ({ :z-index="zIndex" :has-skeleton="hasSkeleton" :animated="animated" + style="height: 300px;" />`, props: { src: { @@ -46,24 +47,29 @@ export const configurable = () => ({ export const LazyImages = () => ({ components: { SImage }, - template: `
- - - - - - - - - - - - - - - + template: `
+ + + + + + + + + + + + + + +
`, data: () => ({ - imageSrc: 'https://picsum.photos/1024' + imageSrc: 'https://picsum.photos/1024/300' }) }) + +export const FailedImage = () => ({ + components: { SImage }, + template: '' +}) diff --git a/src/styles/image.scss b/src/styles/image.scss index cd3dd4bf..1445c369 100644 --- a/src/styles/image.scss +++ b/src/styles/image.scss @@ -1,5 +1,18 @@ .s-image { + width: 100%; &__container { + overflow-y: auto; + height: auto; width: 100%; } + .el-image__error { + height: inherit; + width: 100%;; + background-color: var(--s-color-status-error-background); + color: var(--s-color-status-error); + font-size: var(--s-font-size-medium); + [design-system-theme="dark"] & { + color: var(--s-color-base-on-accent); + } + } } diff --git a/src/styles/skeleton.scss b/src/styles/skeleton.scss index 985f8302..2b251cc1 100644 --- a/src/styles/skeleton.scss +++ b/src/styles/skeleton.scss @@ -2,8 +2,10 @@ $s-skeleton-class: '.el-skeleton'; $s-skeleton-background-color: var(--s-color-base-content-tertiary); .s-skeleton { + height: 100%; #{$s-skeleton-class} { font-size: 0; + height: 100%; width: 100%; &__item { background-color: $s-skeleton-background-color; @@ -15,8 +17,9 @@ $s-skeleton-background-color: var(--s-color-base-content-tertiary); } } &__image { - min-height: 150px; + height: 100%; svg { + height: var(--s-heading2-font-size); fill: var(--s-color-base-on-accent); } } From 7bde15b93f916953bf163cf07a34cf6a636c735d Mon Sep 17 00:00:00 2001 From: alexnatalia Date: Fri, 13 Aug 2021 09:32:29 +0300 Subject: [PATCH 11/13] SImage: Added required flag to Src property. --- src/components/Image/SImage/SImage.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Image/SImage/SImage.vue b/src/components/Image/SImage/SImage.vue index 1c09e3c9..5c5fb8de 100644 --- a/src/components/Image/SImage/SImage.vue +++ b/src/components/Image/SImage/SImage.vue @@ -33,9 +33,9 @@ import { ImageFit } from '../consts' }) export default class SImage extends Vue { /** - * Image source, same as native + * Image source, same as native, this is required property */ - @Prop({ default: () => null, type: String }) readonly src!: string + @Prop({ default: () => null, type: String, required: true }) readonly src!: string /** * Indicate how the image should be resized to fit its container, same as object-fit. * Possible values are: `fill` / `contain` / `cover` / `none` / `scale-down`. From 8d50f3adb2c438e9cb6eb3c639cc5f6cb198fd3a Mon Sep 17 00:00:00 2001 From: alexnatalia Date: Fri, 13 Aug 2021 10:06:15 +0300 Subject: [PATCH 12/13] Refactored due to PR comments. --- src/components/Image/SImage/SImage.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Image/SImage/SImage.vue b/src/components/Image/SImage/SImage.vue index 5c5fb8de..30f18273 100644 --- a/src/components/Image/SImage/SImage.vue +++ b/src/components/Image/SImage/SImage.vue @@ -35,7 +35,7 @@ export default class SImage extends Vue { /** * Image source, same as native, this is required property */ - @Prop({ default: () => null, type: String, required: true }) readonly src!: string + @Prop({ type: String, required: true }) readonly src!: string /** * Indicate how the image should be resized to fit its container, same as object-fit. * Possible values are: `fill` / `contain` / `cover` / `none` / `scale-down`. From 3bd5c1da05c34c7056ef3587954e0f5159dd9a06 Mon Sep 17 00:00:00 2001 From: alexnatalia Date: Fri, 13 Aug 2021 10:58:44 +0300 Subject: [PATCH 13/13] Refactored due to PR comments. --- src/components/Image/SImage/SImage.vue | 2 +- src/stories/SButton.stories.ts | 2 +- src/stories/SImage.stories.ts | 32 +++++++++++++------------- src/stories/SSkeleton.stories.ts | 2 +- 4 files changed, 19 insertions(+), 19 deletions(-) diff --git a/src/components/Image/SImage/SImage.vue b/src/components/Image/SImage/SImage.vue index 30f18273..8ac33fa2 100644 --- a/src/components/Image/SImage/SImage.vue +++ b/src/components/Image/SImage/SImage.vue @@ -54,7 +54,7 @@ export default class SImage extends Vue { * The container to add scroll listener when using lazy load. * Posssible value is the nearest parent container whose overflow property is auto or scroll */ - @Prop({ default: () => null, type: [String, HTMLElement] }) readonly scrollContainer!: string | HTMLElement + @Prop({ type: [String, HTMLElement] }) readonly scrollContainer!: string | HTMLElement /** * Set image preview z-index */ diff --git a/src/stories/SButton.stories.ts b/src/stories/SButton.stories.ts index 43af470d..53ee092d 100644 --- a/src/stories/SButton.stories.ts +++ b/src/stories/SButton.stories.ts @@ -181,7 +181,7 @@ export const loading = () => ({ :type="item.type" :tooltip="item.tooltip" :icon="item.icon" - :loading="true" + loading > {{ item.label }} diff --git a/src/stories/SImage.stories.ts b/src/stories/SImage.stories.ts index 6ba58e47..d1436374 100644 --- a/src/stories/SImage.stories.ts +++ b/src/stories/SImage.stories.ts @@ -48,21 +48,21 @@ export const configurable = () => ({ export const LazyImages = () => ({ components: { SImage }, template: `
- - - - - - - - - - - - - - - + + + + + + + + + + + + + + +
`, data: () => ({ imageSrc: 'https://picsum.photos/1024/300' @@ -71,5 +71,5 @@ export const LazyImages = () => ({ export const FailedImage = () => ({ components: { SImage }, - template: '' + template: '' }) diff --git a/src/stories/SSkeleton.stories.ts b/src/stories/SSkeleton.stories.ts index 2bffc5b7..38283f69 100644 --- a/src/stories/SSkeleton.stories.ts +++ b/src/stories/SSkeleton.stories.ts @@ -68,7 +68,7 @@ export const SkeletonItem = () => ({ SSkeletonItem }, template: `
- +