diff --git a/README.md b/README.md index 7a46d57..5b41249 100644 --- a/README.md +++ b/README.md @@ -13,6 +13,10 @@ Version + + + + Version diff --git a/docs/src/App.vue b/docs/src/App.vue index 56d6fb0..8afd8a1 100644 --- a/docs/src/App.vue +++ b/docs/src/App.vue @@ -131,6 +131,10 @@ Spinner + + Stepper + + Subheader diff --git a/docs/src/pages/components/Stepper.vue b/docs/src/pages/components/Stepper.vue new file mode 100644 index 0000000..e7576e7 --- /dev/null +++ b/docs/src/pages/components/Stepper.vue @@ -0,0 +1,252 @@ + diff --git a/docs/src/routes.js b/docs/src/routes.js index ac0d10e..b0a0ed4 100644 --- a/docs/src/routes.js +++ b/docs/src/routes.js @@ -29,6 +29,7 @@ const Sidenav = (r) => require.ensure([], () => r(require('./pages/components/Si const Snackbar = (r) => require.ensure([], () => r(require('./pages/components/Snackbar')), 'snackbar'); const SpeedDial = (r) => require.ensure([], () => r(require('./pages/components/SpeedDial')), 'speed-dial'); const Spinner = (r) => require.ensure([], () => r(require('./pages/components/Spinner')), 'spinner'); +const Stepper = (r) => require.ensure([], () => r(require('./pages/components/Stepper')), 'stepper'); const Subheader = (r) => require.ensure([], () => r(require('./pages/components/Subheader')), 'subheader'); const Switch = (r) => require.ensure([], () => r(require('./pages/components/Switch')), 'switch'); const Table = (r) => require.ensure([], () => r(require('./pages/components/Table')), 'table'); @@ -189,6 +190,11 @@ const components = [ name: 'components:spinner', component: Spinner }, + { + path: '/components/stepper', + name: 'components:stepper', + component: Stepper + }, { path: '/components/subheader', name: 'components:subheader', diff --git a/src/components/mdSpinner/mdSpinner.vue b/src/components/mdSpinner/mdSpinner.vue index dec8965..253b9fe 100644 --- a/src/components/mdSpinner/mdSpinner.vue +++ b/src/components/mdSpinner/mdSpinner.vue @@ -2,7 +2,7 @@ diff --git a/src/components/mdStepper/index.js b/src/components/mdStepper/index.js new file mode 100644 index 0000000..cbccbf3 --- /dev/null +++ b/src/components/mdStepper/index.js @@ -0,0 +1,14 @@ +import mdStepper from './mdStepper.vue'; +import mdStep from './mdStep.vue'; +import mdStepHeaderContainer from './mdStepHeaderContainer.js'; +import mdStepHeader from './mdStepHeader.vue'; +import mdStepperTheme from './mdStepper.theme'; + +export default function install(Vue) { + Vue.component('md-stepper', mdStepper); + Vue.component('md-step', mdStep); + Vue.component('md-step-header-container', mdStepHeaderContainer); + Vue.component('md-step-header', mdStepHeader); + + Vue.material.styles.push(mdStepperTheme); +} diff --git a/src/components/mdStepper/mdStep.vue b/src/components/mdStepper/mdStep.vue new file mode 100644 index 0000000..1ded96a --- /dev/null +++ b/src/components/mdStepper/mdStep.vue @@ -0,0 +1,197 @@ + + + diff --git a/src/components/mdStepper/mdStepHeader.vue b/src/components/mdStepper/mdStepHeader.vue new file mode 100644 index 0000000..9870079 --- /dev/null +++ b/src/components/mdStepper/mdStepHeader.vue @@ -0,0 +1,71 @@ + + + diff --git a/src/components/mdStepper/mdStepHeaderContainer.js b/src/components/mdStepper/mdStepHeaderContainer.js new file mode 100644 index 0000000..37df23e --- /dev/null +++ b/src/components/mdStepper/mdStepHeaderContainer.js @@ -0,0 +1,33 @@ +import uniqueId from '../../core/utils/uniqueId'; + +export default { + functional: true, + props: { + mdVertical: { + type: Boolean, + default: false + } + }, + render(createElement, { children, props }) { + const insertDividerIntoArray = (arr) => { + return arr.reduce((result, element, index, array) => { + + result.push(element); + + if (index < array.length - 1) { + var mdDivider = createElement('md-divider', { key: 'divider-' + uniqueId() }); + + result.push(mdDivider); + } + + return result; + }, []); + }; + + if (!props.mdVertical) { + children = insertDividerIntoArray(children); + } + + return createElement('div', { class: 'md-steps-navigation-container'}, children); + } +}; diff --git a/src/components/mdStepper/mdStepper.scss b/src/components/mdStepper/mdStepper.scss new file mode 100644 index 0000000..dd312a7 --- /dev/null +++ b/src/components/mdStepper/mdStepper.scss @@ -0,0 +1,190 @@ +@import '../../core/stylesheets/variables.scss'; +@import '../../core/stylesheets/mixins.scss'; + +.md-stepper { + display: flex; + flex-flow: column; + position: relative; + width: 100%; + + .md-step-header { + background: none; + border: 0; + cursor: pointer; + flex-shrink: 0; + font-family: inherit; + font-size: 12px; + font-weight: 500; + margin: 0; + max-height: 72px; + padding: 24px; + position: relative; + transition: $swift-ease-out; + + .md-step-icons, .md-step-titles { + display: inline-block; + vertical-align: middle; + } + + &.md-has-sub-message { + padding: 15px 24px; + + .md-step-title { + margin-bottom: -4px; + } + } + + .md-step-icon { + border-radius: 50%; + font-size: 12px; + height: 24px; + line-height: 24px; + margin-right: 8px; + min-width: 24px; + padding: 0px 6px; + pointer-events: none; + user-select: none; + width: 24px; + } + + .md-step-number { + border-radius: 50%; + display: inline-block; + font-size: 12px; + margin-right: 8px; + width: 24px; + + span { + display: block; + line-height: 24px; + text-align: center; + } + } + + .md-step-title { + font-size: inherit; + } + + &.md-disabled { + cursor: default; + pointer-events: none; + user-select: none; + -webkit-user-drag: none; + } + } + .md-steps-navigation { + display: flex; + height: 72px; + min-height: 72px; + overflow: hidden; + position: relative; + transition: $swift-ease-out; + z-index: 1; + + &.md-alternate-labels { + height: 104px; + min-height: 104px; + } + + .md-steps-navigation-container { + display: flex; + justify-content: space-between; + width: 100%; + + @include layout-small-and-up { + margin-bottom: -15px; + } + + .md-divider { + margin: 36px 0; + position: relative; + width: 100%; + } + + .md-step-header { + &.md-alternate-labels { + max-height: 104px; + text-align: center; + + &.md-has-sub-message { + padding: 24px; + } + + .md-step-icon { + padding: 0; + } + + .md-step-icons, .md-step-titles { + display: block; + } + + .md-step-titles { + margin-top: 10px; + } + } + } + } + } + + .md-steps-container { + height: 0; + overflow: hidden; + position: relative; + width: 100%; + + .md-steps-wrapper { + bottom: 0; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translate3d(0, 0, 0); + transition: transform $swift-ease-out-duration $swift-ease-out-timing-function; + width: 9999em; + + .md-step { + left: 0; + padding: 16px; + position: absolute; + right: 0; + top: 0; + + .md-step-content { + padding: 16px; + font-size: 14px; + line-height: 22px; + + &:last-child { + padding-bottom: 24px; + } + } + } + } + } + + .md-steps-vertical-container { + .md-step { + .md-step-header { + padding-bottom: 8px; + } + &:not(:first-of-type) { + .md-step-header { + padding-top: 8px; + } + } + + .md-step-content { + margin: 0 24px 0 34px; + padding-bottom: 32px; + padding-left: 24px; + padding-top: 8px; + } + + &:not(:last-of-type) { + .md-step-content { + border-left: 1px solid #BDBDBD; + } + } + } + } +} \ No newline at end of file diff --git a/src/components/mdStepper/mdStepper.theme b/src/components/mdStepper/mdStepper.theme new file mode 100644 index 0000000..f9b9c6c --- /dev/null +++ b/src/components/mdStepper/mdStepper.theme @@ -0,0 +1,40 @@ +.THEME_NAME { + &.md-stepper { + .md-step-header { + .md-step-icon, + .md-step-number { + color: #{'BACKGROUND-CONTRAST'}; + background-color: #bdbdbd; + } + &.md-primary, &.md-active { + .md-step-icon, + .md-step-number { + color: #{'PRIMARY-CONTRAST'}; + background-color: #{'PRIMARY-COLOR'}; + } + } + &.md-accent { + .md-step-icon, + .md-step-number { + color: #{'ACCENT-CONTRAST'}; + background-color: #{'ACCENT-COLOR'}; + } + } + &.md-warn { + .md-step-icon, + .md-step-number { + color: #{'WARN-CONTRAST'}; + background-color: #{'WARN-COLOR'}; + } + } + &.md-disabled { + color: #bdbdbd; + .md-step-icon, + .md-step-number { + color: white; + background-color: #bdbdbd; + } + } + } + } +} \ No newline at end of file diff --git a/src/components/mdStepper/mdStepper.vue b/src/components/mdStepper/mdStepper.vue new file mode 100644 index 0000000..6844af8 --- /dev/null +++ b/src/components/mdStepper/mdStepper.vue @@ -0,0 +1,238 @@ + + + + + diff --git a/src/index.js b/src/index.js index 2540f7b..9f0d7b1 100644 --- a/src/index.js +++ b/src/index.js @@ -24,6 +24,7 @@ import MdSidenav from './components/mdSidenav'; import MdSnackbar from './components/mdSnackbar'; import MdSpeedDial from './components/mdSpeedDial'; import MdSpinner from './components/mdSpinner'; +import MdStepper from './components/mdStepper'; import MdSubheader from './components/mdSubheader'; import MdSwitch from './components/mdSwitch'; import MdTable from './components/mdTable'; @@ -59,6 +60,7 @@ const options = { MdSnackbar, MdSpeedDial, MdSpinner, + MdStepper, MdSubheader, MdSwitch, MdTable,