@deskhero/dh_ui 1.0.0 → 1.1.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/README.md +51 -21
- package/dist/dh_ui.es.js +1 -1
- package/dist/dh_ui.umd.js +2 -2
- package/dist/style.css +1 -1
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,40 +1,70 @@
|
|
|
1
|
-
|
|
1
|
+
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
UI resources for application development in Vue 3.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
<hr/>
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
## Installation
|
|
8
|
+
Install the component library
|
|
9
|
+
```
|
|
10
|
+
npm i @deskhero/dh_ui
|
|
11
|
+
```
|
|
8
12
|
|
|
9
|
-
##
|
|
13
|
+
## Usage
|
|
14
|
+
You can import from the main bundle:
|
|
15
|
+
```javascript
|
|
16
|
+
import { DhButton } from "@deskhero/dh_ui";
|
|
17
|
+
```
|
|
10
18
|
|
|
11
|
-
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
|
|
12
19
|
|
|
13
|
-
|
|
20
|
+
You also need to import Main CSS file to your project
|
|
21
|
+
```javascript
|
|
22
|
+
import "@deskhero/dh_ui/dist/style.css"
|
|
23
|
+
```
|
|
14
24
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
25
|
+
## Storybook
|
|
26
|
+
We are using storybook in order to develop the components independently from any consumer.
|
|
27
|
+
run this to build & run the storybook locally:
|
|
28
|
+
```bash
|
|
29
|
+
npm install
|
|
30
|
+
npm run storybook
|
|
31
|
+
```
|
|
32
|
+
the storybook will be served on `http://localhost:6006`
|
|
19
33
|
|
|
20
|
-
## Customize configuration
|
|
21
34
|
|
|
22
|
-
|
|
35
|
+
## Developing locally with your consumer application
|
|
36
|
+
When developing locally we are using a npm functionality called npm link, this allows us to
|
|
37
|
+
work locally on our package and use it in a different project without publishing.
|
|
38
|
+
This functionality basically overrides the npm mapping between package name to its repo, and points it to where the package is located locally.
|
|
23
39
|
|
|
24
|
-
##
|
|
40
|
+
## On dh_ui
|
|
25
41
|
|
|
26
42
|
```sh
|
|
27
|
-
npm
|
|
43
|
+
npm run build
|
|
44
|
+
npm link
|
|
28
45
|
```
|
|
29
46
|
|
|
30
|
-
|
|
47
|
+
## On your project
|
|
31
48
|
|
|
32
49
|
```sh
|
|
33
|
-
npm
|
|
50
|
+
npm link @deskhero/dh_ui
|
|
34
51
|
```
|
|
35
52
|
|
|
36
|
-
|
|
53
|
+
<hr/>
|
|
37
54
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
55
|
+
#### Recommended IDE Setup
|
|
56
|
+
|
|
57
|
+
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
#### Type Support for .vue Imports in TS
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
|
|
64
|
+
|
|
65
|
+
If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
|
|
66
|
+
|
|
67
|
+
1. Disable the built-in TypeScript Extension
|
|
68
|
+
1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
|
|
69
|
+
2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
|
|
70
|
+
2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
|
package/dist/dh_ui.es.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { reactive, computed, openBlock, createElementBlock, normalizeClass, normalizeStyle, toDisplayString } from "vue";
|
|
2
|
-
var button = /* @__PURE__ */ (() => ".button{font-family:Nunito Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;border:0;
|
|
2
|
+
var button = /* @__PURE__ */ (() => ".button{font-family:Nunito Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;border:0;cursor:pointer;line-height:1}.button--primary{color:#fff;background-color:green}.button--secondary{color:#333;background-color:#ff4500;box-shadow:#00000026 0 0 0 1px inset}.button--small{font-size:12px;padding:10px 16px}.button--medium{font-size:14px;padding:11px 20px}.button--large{font-size:16px;padding:12px 24px}\n")();
|
|
3
3
|
var _export_sfc = (sfc, props) => {
|
|
4
4
|
const target = sfc.__vccOpts || sfc;
|
|
5
5
|
for (const [key, val] of props) {
|
package/dist/dh_ui.umd.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
(function(n,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(n=typeof globalThis!="undefined"?globalThis:n||self,e(n.dh_ui={},n.Vue))})(this,function(n,e){"use strict";var
|
|
2
|
-
`)(),a=(t,o)=>{const i=t.__vccOpts||t;for(const[r,l]of o)i[r]=l;return i};const u={name:"dh-button",props:{label:{type:String,required:!0},primary:{type:Boolean,default:!1},size:{type:String,validator:function(t){return["small","medium","large"].indexOf(t)!==-1}},backgroundColor:{type:String}},emits:["click"],setup(t,{emit:o}){return t=e.reactive(t),{classes:e.computed(()=>({button:!0,"button--primary":t.primary,"button--secondary":!t.primary,[`button--${t.size||"medium"}`]:!0})),style:e.computed(()=>({backgroundColor:t.backgroundColor})),onClick(){o("click")}}}};function
|
|
1
|
+
(function(n,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(n=typeof globalThis!="undefined"?globalThis:n||self,e(n.dh_ui={},n.Vue))})(this,function(n,e){"use strict";var f=(()=>`.button{font-family:Nunito Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;border:0;cursor:pointer;line-height:1}.button--primary{color:#fff;background-color:green}.button--secondary{color:#333;background-color:#ff4500;box-shadow:#00000026 0 0 0 1px inset}.button--small{font-size:12px;padding:10px 16px}.button--medium{font-size:14px;padding:11px 20px}.button--large{font-size:16px;padding:12px 24px}
|
|
2
|
+
`)(),a=(t,o)=>{const i=t.__vccOpts||t;for(const[r,l]of o)i[r]=l;return i};const u={name:"dh-button",props:{label:{type:String,required:!0},primary:{type:Boolean,default:!1},size:{type:String,validator:function(t){return["small","medium","large"].indexOf(t)!==-1}},backgroundColor:{type:String}},emits:["click"],setup(t,{emit:o}){return t=e.reactive(t),{classes:e.computed(()=>({button:!0,"button--primary":t.primary,"button--secondary":!t.primary,[`button--${t.size||"medium"}`]:!0})),style:e.computed(()=>({backgroundColor:t.backgroundColor})),onClick(){o("click")}}}};function c(t,o,i,r,l,p){return e.openBlock(),e.createElementBlock("button",{type:"button",class:e.normalizeClass(r.classes),onClick:o[0]||(o[0]=(...d)=>r.onClick&&r.onClick(...d)),style:e.normalizeStyle(r.style)},e.toDisplayString(i.label),7)}var s=a(u,[["render",c]]);n.DhButton=s,Object.defineProperties(n,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.button{font-family:Nunito Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;border:0;
|
|
1
|
+
.button{font-family:Nunito Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;border:0;cursor:pointer;line-height:1}.button--primary{color:#fff;background-color:green}.button--secondary{color:#333;background-color:#ff4500;box-shadow:#00000026 0 0 0 1px inset}.button--small{font-size:12px;padding:10px 16px}.button--medium{font-size:14px;padding:11px 20px}.button--large{font-size:16px;padding:12px 24px}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@deskhero/dh_ui",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"files": [
|
|
5
5
|
"dist"
|
|
6
6
|
],
|
|
@@ -29,12 +29,12 @@
|
|
|
29
29
|
"chromatic": "npx chromatic --project-token=9b1dd74e6816"
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"@storybook/addons": "^6.5.9",
|
|
33
|
-
"@storybook/theming": "^6.5.9",
|
|
34
32
|
"vue": "^3.2.36"
|
|
35
33
|
},
|
|
36
34
|
"devDependencies": {
|
|
37
35
|
"@babel/core": "^7.18.5",
|
|
36
|
+
"@storybook/addons": "^6.5.9",
|
|
37
|
+
"@storybook/theming": "^6.5.9",
|
|
38
38
|
"@storybook/addon-actions": "^6.5.9",
|
|
39
39
|
"@storybook/addon-essentials": "^6.5.9",
|
|
40
40
|
"@storybook/addon-interactions": "^6.5.9",
|