@iamproperty/components 2.3.3 → 2.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/css/style.min.css +1 -1
- package/assets/css/style.min.css.map +1 -1
- package/assets/js/scripts.bundle.js +4 -1
- package/assets/js/scripts.bundle.js.map +1 -1
- package/assets/js/scripts.bundle.min.js +2 -2
- package/assets/js/scripts.bundle.min.js.map +1 -1
- package/assets/sass/_components.scss +1 -0
- package/assets/sass/components/stepper.scss +162 -0
- package/dist/components.common.js +139 -0
- package/dist/components.common.js.map +1 -1
- package/dist/components.css +1 -1
- package/dist/components.css.map +1 -1
- package/dist/components.umd.js +139 -0
- package/dist/components.umd.js.map +1 -1
- package/dist/components.umd.min.js +1 -1
- package/dist/components.umd.min.js.map +1 -1
- package/package.json +2 -2
- package/src/components/Stepper/README.md +33 -0
- package/src/components/Stepper/Step.vue +23 -0
- package/src/components/Stepper/Stepper.vue +34 -0
- package/src/index.js +2 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@iamproperty/components",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.4.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "Component library for iamproperty",
|
|
6
6
|
"author": {
|
|
@@ -81,7 +81,7 @@
|
|
|
81
81
|
"webpack": "^4.46.0"
|
|
82
82
|
},
|
|
83
83
|
"license": "UNLICENSED",
|
|
84
|
-
"localURL": "http://localhost:
|
|
84
|
+
"localURL": "http://localhost:8081",
|
|
85
85
|
"registry-url": "https://registry.npmjs.com",
|
|
86
86
|
"repository": {
|
|
87
87
|
"type": "git",
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
### Usage
|
|
2
|
+
|
|
3
|
+
```
|
|
4
|
+
<Stepper class="visualtest">
|
|
5
|
+
<Step status="warning">Warning status</Step>
|
|
6
|
+
<Step url="/step" status="danger">Danger status</Step>
|
|
7
|
+
<Step url="/step" status="success">Success status</Step>
|
|
8
|
+
<Step href="/step" current>Current step</Step>
|
|
9
|
+
<Step href="/step">Future step</Step>
|
|
10
|
+
</Stepper>
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
### Properties
|
|
14
|
+
|
|
15
|
+
| Option | Type | Default Value | Description |
|
|
16
|
+
| ------ | ---- | ------------- | ----------- |
|
|
17
|
+
| label | String | - | Optional label to title the component |
|
|
18
|
+
| endlabel | String | Complete | End label to signify the end of the process |
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
### Step Properties
|
|
22
|
+
|
|
23
|
+
| Option | Type | Default Value | Description |
|
|
24
|
+
| ------ | ---- | ------------- | ----------- |
|
|
25
|
+
| url | String | - | Add a url to take the user back to or ahead to said step, if a url is not passed the link is disabled. |
|
|
26
|
+
| status | String | - | Each step can have a status to highlight to the user whether the step was completed correctly. |
|
|
27
|
+
| current | String | - | Indicate whether this is the current step |
|
|
28
|
+
|
|
29
|
+
### Slots
|
|
30
|
+
|
|
31
|
+
| Option | Default Value | Description |
|
|
32
|
+
| ------ | ------------- | ----------- |
|
|
33
|
+
| default | - | Container for step components |
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<li><a :href="url" :class="`${status?'bg-'+status:''}${typeof current != 'undefined'?'current':''} ${typeof current}`"><span><slot></slot></span></a></li>
|
|
3
|
+
</template>
|
|
4
|
+
|
|
5
|
+
<script>
|
|
6
|
+
export default {
|
|
7
|
+
name: 'Stepper',
|
|
8
|
+
props: {
|
|
9
|
+
url: {
|
|
10
|
+
type: String,
|
|
11
|
+
required: false
|
|
12
|
+
},
|
|
13
|
+
status: {
|
|
14
|
+
type: String,
|
|
15
|
+
required: false
|
|
16
|
+
},
|
|
17
|
+
current: {
|
|
18
|
+
type: String,
|
|
19
|
+
required: false
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
</script>
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="container">
|
|
3
|
+
<div class="stepper">
|
|
4
|
+
<span class="h6 stepper__start" v-if="label">{{label}}</span>
|
|
5
|
+
<ol class="list-unstyled">
|
|
6
|
+
<slot><!-- Use for titles etc --></slot>
|
|
7
|
+
</ol>
|
|
8
|
+
<span class="h6 stepper__end">{{endlabel}}</span>
|
|
9
|
+
</div>
|
|
10
|
+
</div>
|
|
11
|
+
</template>
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
<style lang="scss">
|
|
15
|
+
@import "../../../assets/sass/_func.scss";
|
|
16
|
+
@import "../../../assets/sass/components/stepper.scss";
|
|
17
|
+
</style>
|
|
18
|
+
|
|
19
|
+
<script>
|
|
20
|
+
export default {
|
|
21
|
+
name: 'Stepper',
|
|
22
|
+
props: {
|
|
23
|
+
label: {
|
|
24
|
+
type: String,
|
|
25
|
+
required: false
|
|
26
|
+
},
|
|
27
|
+
endlabel: {
|
|
28
|
+
type: String,
|
|
29
|
+
required: false,
|
|
30
|
+
default: "Complete"
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
</script>
|
package/src/index.js
CHANGED
|
@@ -18,5 +18,7 @@ export { default as Nav } from './components/Nav/Nav.vue'
|
|
|
18
18
|
export { default as Drawer } from './components/Drawer/Drawer.vue'
|
|
19
19
|
export { default as Modal } from './components/Modal/Modal.vue'
|
|
20
20
|
|
|
21
|
+
export { default as Stepper } from './components/Stepper/Stepper.vue'
|
|
22
|
+
export { default as Step } from './components/Stepper/Step.vue'
|
|
21
23
|
export { default as Tabs } from './components/Tabs/Tabs.vue'
|
|
22
24
|
export { default as Tab } from './components/Tabs/Tab.vue'
|