diff --git a/package.json b/package.json index 7443d5a3..42af85d6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@soramitsu/soramitsu-js-ui", - "version": "1.0.0", + "version": "1.0.1", "private": false, "publishConfig": { "registry": "https://nexus.iroha.tech/repository/npm-soramitsu/" diff --git a/src/components/Scrollbar/SScrollbar.vue b/src/components/Scrollbar/SScrollbar.vue new file mode 100644 index 00000000..49d4f524 --- /dev/null +++ b/src/components/Scrollbar/SScrollbar.vue @@ -0,0 +1,58 @@ + + + diff --git a/src/components/Scrollbar/index.ts b/src/components/Scrollbar/index.ts new file mode 100644 index 00000000..a3e62ad1 --- /dev/null +++ b/src/components/Scrollbar/index.ts @@ -0,0 +1,13 @@ +import { VueConstructor } from 'vue' +import { Components, SFCWithInstall } from '../../types/components' + +import _SScrollbar from './SScrollbar.vue' + +const SScrollbar = _SScrollbar as SFCWithInstall + +SScrollbar.install = function (vue: VueConstructor) { + vue.component(Components.SScrollbar, SScrollbar) +} + +export { SScrollbar } +export default SScrollbar diff --git a/src/components/index.ts b/src/components/index.ts index 2fa2c287..dc9f811c 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -24,6 +24,7 @@ export { SSlider } from './Slider' export { SSwitch } from './Switch' export { SRadio, SRadioGroup } from './Radio' export { SRow } from './Layout/Row' +export { SScrollbar } from './Scrollbar' export { SScrollSectionItem, SScrollSections } from './ScrollSections' export { SSelect, SOption, SOptionGroup } from './Select' export { STab, STabs } from './Tab' diff --git a/src/index.ts b/src/index.ts index f39b8b24..b32b63a6 100644 --- a/src/index.ts +++ b/src/index.ts @@ -36,6 +36,7 @@ import { SRadio, SRadioGroup, SRow, + SScrollbar, SScrollSectionItem, SScrollSections, SSelect, @@ -103,6 +104,7 @@ const SoramitsuElements = { vue.use(SRadio) vue.use(SRadioGroup) vue.use(SRow) + vue.use(SScrollbar) vue.use(SScrollSectionItem) vue.use(SScrollSections) vue.use(SSelect) @@ -172,6 +174,7 @@ export { SRadio, SRadioGroup, SRow, + SScrollbar, SScrollSectionItem, SScrollSections, SSelect, diff --git a/src/store/LibraryLocale.ts b/src/store/LibraryLocale.ts index 71f5b28c..6f76ec3b 100644 --- a/src/store/LibraryLocale.ts +++ b/src/store/LibraryLocale.ts @@ -5,7 +5,7 @@ import flow from 'lodash/fp/flow' import concat from 'lodash/fp/concat' import { Locale } from '../utils/Locale' -import i18n from '@/locale' +import i18n from '../locale' const types = flow( flatMap(x => [x + '_REQUEST', x + '_SUCCESS', x + '_FAILURE']), diff --git a/src/stories/SScrollbar.stories.ts b/src/stories/SScrollbar.stories.ts new file mode 100644 index 00000000..383db04e --- /dev/null +++ b/src/stories/SScrollbar.stories.ts @@ -0,0 +1,32 @@ +import { withKnobs, boolean } from '@storybook/addon-knobs' + +import { SScrollbar } from '../components' + +export default { + component: SScrollbar, + title: 'Design System/Components/Scrollbar', + decorators: [withKnobs] +} + +export const configurable = () => ({ + components: { SScrollbar }, + template: ` + +
+

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officiis, blanditiis expedita? Earum eligendi pariatur quaerat quos expedita ab quibusdam ratione veniam in, mollitia fuga repudiandae?

+

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officiis, blanditiis expedita? Earum eligendi pariatur quaerat quos expedita ab quibusdam ratione veniam in, mollitia fuga repudiandae?

+

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officiis, blanditiis expedita? Earum eligendi pariatur quaerat quos expedita ab quibusdam ratione veniam in, mollitia fuga repudiandae?

+

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officiis, blanditiis expedita? Earum eligendi pariatur quaerat quos expedita ab quibusdam ratione veniam in, mollitia fuga repudiandae?

+

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officiis, blanditiis expedita? Earum eligendi pariatur quaerat quos expedita ab quibusdam ratione veniam in, mollitia fuga repudiandae?

+

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officiis, blanditiis expedita? Earum eligendi pariatur quaerat quos expedita ab quibusdam ratione veniam in, mollitia fuga repudiandae?

+
+
`, + props: { + native: { + default: boolean('Native', false) + }, + noresize: { + default: boolean('Noresize', false) + } + } +}) diff --git a/src/styles/index.scss b/src/styles/index.scss index bfa5c946..be7f5d9a 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -21,6 +21,7 @@ @import "./option"; @import "./pagination"; @import "./radio"; +@import "./scrollbar"; @import "./scroll-sections"; @import "./select"; @import "./slider"; diff --git a/src/styles/scrollbar.scss b/src/styles/scrollbar.scss new file mode 100644 index 00000000..2163fa3a --- /dev/null +++ b/src/styles/scrollbar.scss @@ -0,0 +1,6 @@ +.el-scrollbar__thumb { + border-radius: 6px; + &, &:hover { + background-color: var(--s-color-base-content-tertiary); + } +} diff --git a/src/types/components.ts b/src/types/components.ts index 938e29d7..c22836ec 100644 --- a/src/types/components.ts +++ b/src/types/components.ts @@ -39,6 +39,7 @@ export enum Components { SRadio = 'SRadio', SRadioGroup = 'SRadioGroup', SRow = 'SRow', + SScrollbar = 'SScrollbar', SScrollSectionItem = 'SScrollSectionItem', SScrollSections = 'SScrollSections', SSelect = 'SSelect',