@dialpad/dialtone-vue 1.7.0 → 1.8.2
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/CHANGELOG.md +27 -0
- package/README.md +15 -80
- package/dist/dialtone-vue.common.js +1205 -43
- package/dist/dialtone-vue.umd.js +1205 -43
- package/dist/dialtone-vue.umd.min.js +1 -1
- package/package.json +3 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,30 @@
|
|
|
1
|
+
## [1.8.2](https://github.com/dialpad/dialtone-vue/compare/v1.8.1...v1.8.2) (2022-01-06)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* skeleton-text import ([#221](https://github.com/dialpad/dialtone-vue/issues/221)) ([ff6ca97](https://github.com/dialpad/dialtone-vue/commit/ff6ca978f20a20d8f160fecfde040deacdc735df))
|
|
7
|
+
|
|
8
|
+
## [1.8.1](https://github.com/dialpad/dialtone-vue/compare/v1.8.0...v1.8.1) (2022-01-06)
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
### Bug Fixes
|
|
12
|
+
|
|
13
|
+
* bad exports on skeleton ([#220](https://github.com/dialpad/dialtone-vue/issues/220)) ([5b66ae7](https://github.com/dialpad/dialtone-vue/commit/5b66ae75c8034434b02f67b26f4fb9136966032e))
|
|
14
|
+
|
|
15
|
+
# [1.8.0](https://github.com/dialpad/dialtone-vue/compare/v1.7.0...v1.8.0) (2022-01-04)
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
### Bug Fixes
|
|
19
|
+
|
|
20
|
+
* popover stories ([#216](https://github.com/dialpad/dialtone-vue/issues/216)) ([8229467](https://github.com/dialpad/dialtone-vue/commit/8229467b25342540163e61f8fc5797beb1e780b2))
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
### Features
|
|
24
|
+
|
|
25
|
+
* add keyboard shortcut component ([#209](https://github.com/dialpad/dialtone-vue/issues/209)) ([88efc48](https://github.com/dialpad/dialtone-vue/commit/88efc4882812d391bb9200c2c1f7cdb7dc56d5a9))
|
|
26
|
+
* component skeleton ([#203](https://github.com/dialpad/dialtone-vue/issues/203)) ([ce2a4d2](https://github.com/dialpad/dialtone-vue/commit/ce2a4d21dc45924e0eec561299de768ba8ae5222))
|
|
27
|
+
|
|
1
28
|
# [1.7.0](https://github.com/dialpad/dialtone-vue/compare/v1.6.1...v1.7.0) (2021-12-15)
|
|
2
29
|
|
|
3
30
|
|
package/README.md
CHANGED
|
@@ -5,8 +5,9 @@ Dialtone Vue is a library of Vue components for [Dialtone][dt]. The goal is to s
|
|
|
5
5
|
**[Component Documentation Site ↗️][dialtone-vue]**
|
|
6
6
|
|
|
7
7
|
[dt]: https://dialpad.design
|
|
8
|
+
[dialtone-vue]: https://vue.dialpad.design
|
|
8
9
|
|
|
9
|
-
|
|
10
|
+
## Project Status
|
|
10
11
|
|
|
11
12
|
Dialtone Vue is a new project, and as such it is under constant development as we add new components and refine existing ones. Please refer to the [jira board][jira] to see the status of Dialtone Vue components and request new components that should be in the Dialtone Vue library.
|
|
12
13
|
|
|
@@ -20,85 +21,7 @@ Dialtone Vue components can be imported directly from the package. Some componen
|
|
|
20
21
|
import { DtInput, VALIDATION_MESSAGE_TYPES } from '@dialpad/dialtone-vue';
|
|
21
22
|
```
|
|
22
23
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
Dialtone Vue uses [Storybook][storybook] for documentation of components, as well as an environment for local development. Please see the [Storybook Documentation Site][dialtone-vue] for specific usage information and interactive documentation for each Dialtone Vue component.
|
|
26
|
-
|
|
27
|
-
All components in Dialtone Vue should have stories written for them in Storybook. For more information on how to write stories, see the [documentation][stories].
|
|
28
|
-
|
|
29
|
-
[storybook]: https://storybook.js.org
|
|
30
|
-
[dialtone-vue]: https://vue.dialpad.design
|
|
31
|
-
[stories]: https://vue.dialpad.design/?path=/story/docs-storybook-getting-started--page
|
|
32
|
-
|
|
33
|
-
### Running Storybook Locally
|
|
34
|
-
|
|
35
|
-
Storybook provides a sandbox to develop and experiment with components locally, in isolation from the rest of the app. With Storybook you get live reloading of component templates and styles, just like you would in the app. You can also test different props and slots and see the effects in real time, test accessibility issues, and more.
|
|
36
|
-
|
|
37
|
-
To run Storybook locally, first install the dependencies:
|
|
38
|
-
|
|
39
|
-
```
|
|
40
|
-
npm run storybook:install
|
|
41
|
-
```
|
|
42
|
-
|
|
43
|
-
Then you can run the dev server:
|
|
44
|
-
|
|
45
|
-
```
|
|
46
|
-
npm run storybook
|
|
47
|
-
```
|
|
48
|
-
|
|
49
|
-
## Developing Dialtone Vue Components
|
|
50
|
-
|
|
51
|
-
Building components for Dialtone Vue is similar to components for Dialpad or UberConference, but there are some differences. Remember that Dialtone Vue is a shared library so more care has to be taken to avoid breaking changes.
|
|
52
|
-
|
|
53
|
-
Remember that Dialtone Vue is a separate project, so be sure to run the lint and unit tests for Dialtone Vue separately whenever making changes to the library.
|
|
54
|
-
|
|
55
|
-
See [CONTRIBUTING](./CONTRIBUTING.md).
|
|
56
|
-
|
|
57
|
-
### Project Setup
|
|
58
|
-
|
|
59
|
-
#### Install Dependencies
|
|
60
|
-
|
|
61
|
-
```bash
|
|
62
|
-
npm install
|
|
63
|
-
```
|
|
64
|
-
|
|
65
|
-
### CSS & Dialtone
|
|
66
|
-
|
|
67
|
-
Dialtone components should utilize the global immutable CSS classes provided by Dialtone whenever possible. It is a requirement of any project using Dialtone Vue to include these classes.
|
|
68
|
-
|
|
69
|
-
If needed, you can also write custom CSS using Dialtone LESS variables by importing `../css/dialtone.less`.
|
|
70
|
-
|
|
71
|
-
Please **do not** use any scoped CSS or mixins in Dialtone Vue components.
|
|
72
|
-
|
|
73
|
-
### Unit Tests
|
|
74
|
-
|
|
75
|
-
Each component should have a corresponding unit test in the `tests/specs` directory. There is no special test setup as Dialtone Vue components do not have access to the Vuex store or custom methods/directives.
|
|
76
|
-
|
|
77
|
-
### Exports
|
|
78
|
-
|
|
79
|
-
When adding a new component, please add its exports to `index.js`, including any named exports, so they're available for import to users of Dialtone Vue:
|
|
80
|
-
|
|
81
|
-
```js
|
|
82
|
-
export {
|
|
83
|
-
default as DtInput,
|
|
84
|
-
INPUT_SIZES,
|
|
85
|
-
} from './components/input.vue';
|
|
86
|
-
```
|
|
87
|
-
|
|
88
|
-
### External Dependencies
|
|
89
|
-
|
|
90
|
-
Dialtone Vue components are designed to be used in a variety of different projects. As such, Dialtone Vue components should be pure Vue components with no dependencies on global Vue plugins or stores, except when noted below. This in particular means:
|
|
91
|
-
|
|
92
|
-
- **No access to the Vuex store.** Different projects will have different store structures, and so Dialtone Vue components cannot access the Vuex store. Dialtone Vue components should take data as props only.
|
|
93
|
-
- **No I18n.** Each project will have its own i18n implementation. Any text needed in a Dialtone Vue component should be passed as props or slots.
|
|
94
|
-
- **No custom directives.** Directives in Vue are installed globally and vary from project to project. Custom directives (such as `v-tooltip`) cannot be used in Dialtone Vue components.
|
|
95
|
-
- **No other custom global methods.** Some projects may implement custom global methods on the Vue object. Dialtone Vue components are limited to the built-in Vue methods.
|
|
96
|
-
- **No imports outside of the dialtone-vue directory.**
|
|
97
|
-
- **Vue 2 compatibility.** Dialtone Vue components should ideally support Vue 2 and 3, but a minimum of Vue 2 support is currently required.
|
|
98
|
-
|
|
99
|
-
## Using Dialtone Vue in your Project
|
|
100
|
-
|
|
101
|
-
Project using Dialtone Vue should be aware of the requirements:
|
|
24
|
+
Projects using Dialtone Vue should be aware of the requirements:
|
|
102
25
|
|
|
103
26
|
- Dialtone classes must be made available globally (to avoid duplication, Dialtone Vue does not do this for you).
|
|
104
27
|
- A tool like Webpack must be used to package the SFC components from Dialtone Vue.
|
|
@@ -106,3 +29,15 @@ Project using Dialtone Vue should be aware of the requirements:
|
|
|
106
29
|
- Dialtone Vue components are built for Vue 2, with Vue 3 support coming soon.
|
|
107
30
|
|
|
108
31
|
These requirements are enforced via peerdependencies of Dialtone Vue when possible.
|
|
32
|
+
|
|
33
|
+
## Contributing
|
|
34
|
+
|
|
35
|
+
If you would like to contribute to Dialtone Vue the first step is to get the project running locally. Follow the below quickstart to do so.
|
|
36
|
+
|
|
37
|
+
1. Clone the repo `git clone https://github.com/dialpad/dialtone-vue.git`
|
|
38
|
+
2. Install storybook dependencies `npm run storybook:install`
|
|
39
|
+
3. Install dialtone-vue dependencies `npm install`
|
|
40
|
+
4. Run local dev server `npm start`
|
|
41
|
+
5. Visit local dev server at http://localhost:9011/
|
|
42
|
+
|
|
43
|
+
Next read the more detailed contributor documentation in [CONTRIBUTING.md](.github/CONTRIBUTING.md).
|