quasar-ui-danx 0.0.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (10) hide show
  1. package/README.md +145 -0
  2. package/package.json +60 -0
  3. package/src/components/Component.js +13 -0
  4. package/src/components/Component.sass +2 -0
  5. package/src/helpers/utils.ts +63 -0
  6. package/src/index.common.js +2 -0
  7. package/src/index.esm.js +5 -0
  8. package/src/index.sass +5 -0
  9. package/src/index.umd.js +3 -0
  10. package/src/vue-plugin.js +16 -0
package/README.md ADDED
@@ -0,0 +1,145 @@
1
+ # Component Danx
2
+
3
+ [![npm](https://img.shields.io/npm/v/quasar-ui-danx.svg?label=quasar-ui-danx)](https://www.npmjs.com/package/quasar-ui-danx)
4
+ [![npm](https://img.shields.io/npm/dt/quasar-ui-danx.svg)](https://www.npmjs.com/package/quasar-ui-danx)
5
+
6
+ **Compatible with Quasar UI v2 and Vue 3**.
7
+
8
+
9
+ # Component Danx
10
+ > Short description of the component
11
+
12
+
13
+
14
+
15
+ # Usage
16
+
17
+ ## Quasar CLI project
18
+
19
+
20
+ Install the [App Extension](../app-extension).
21
+
22
+ **OR**:
23
+
24
+
25
+ Create and register a boot file:
26
+
27
+ ```js
28
+ import Vue from 'vue'
29
+ import Plugin from 'quasar-ui-danx'
30
+ import 'quasar-ui-danx/dist/index.css'
31
+
32
+ Vue.use(Plugin)
33
+ ```
34
+
35
+ **OR**:
36
+
37
+ ```html
38
+ <style src="quasar-ui-danx/dist/index.css"></style>
39
+
40
+ <script>
41
+ import { Component as Danx } from 'quasar-ui-danx'
42
+
43
+ export default {
44
+
45
+ components: {
46
+ Danx
47
+ }
48
+
49
+
50
+ }
51
+ </script>
52
+ ```
53
+
54
+ ## Vue CLI project
55
+
56
+ ```js
57
+ import Vue from 'vue'
58
+ import Plugin from 'quasar-ui-danx'
59
+ import 'quasar-ui-danx/dist/index.css'
60
+
61
+ Vue.use(Plugin)
62
+ ```
63
+
64
+ **OR**:
65
+
66
+ ```html
67
+ <style src="quasar-ui-danx/dist/index.css"></style>
68
+
69
+ <script>
70
+ import { Component as Danx } from 'quasar-ui-danx'
71
+
72
+ export default {
73
+
74
+ components: {
75
+ Danx
76
+ }
77
+
78
+
79
+ }
80
+ </script>
81
+ ```
82
+
83
+ ## UMD variant
84
+
85
+ Exports `window.danx`.
86
+
87
+ Add the following tag(s) after the Quasar ones:
88
+
89
+ ```html
90
+ <head>
91
+ <!-- AFTER the Quasar stylesheet tags: -->
92
+ <link href="https://cdn.jsdelivr.net/npm/quasar-ui-danx/dist/index.min.css" rel="stylesheet" type="text/css">
93
+ </head>
94
+ <body>
95
+ <!-- at end of body, AFTER Quasar script(s): -->
96
+ <script src="https://cdn.jsdelivr.net/npm/quasar-ui-danx/dist/index.umd.min.js"></script>
97
+ </body>
98
+ ```
99
+ If you need the RTL variant of the CSS, then go for the following (instead of the above stylesheet link):
100
+ ```html
101
+ <link href="https://cdn.jsdelivr.net/npm/quasar-ui-danx/dist/index.rtl.min.css" rel="stylesheet" type="text/css">
102
+ ```
103
+
104
+ # Setup
105
+ ```bash
106
+ $ yarn
107
+ ```
108
+
109
+ # Developing
110
+ ```bash
111
+ # start dev in SPA mode
112
+ $ yarn dev
113
+
114
+ # start dev in UMD mode
115
+ $ yarn dev:umd
116
+
117
+ # start dev in SSR mode
118
+ $ yarn dev:ssr
119
+
120
+ # start dev in Cordova iOS mode
121
+ $ yarn dev:ios
122
+
123
+ # start dev in Cordova Android mode
124
+ $ yarn dev:android
125
+
126
+ # start dev in Electron mode
127
+ $ yarn dev:electron
128
+ ```
129
+
130
+ # Building package
131
+ ```bash
132
+ $ yarn build
133
+ ```
134
+
135
+ # Adding Testing Components
136
+ in the `ui/dev/src/pages` you can add Vue files to test your component/directive. When using `yarn dev` to build the UI, any pages in that location will automatically be picked up by dynamic routing and added to the test page.
137
+
138
+ # Adding Assets
139
+ If you have a component that has assets, like language or icon-sets, you will need to provide these for UMD. In the `ui/build/script.javascript.js` file, you will find a couple of commented out commands that call `addAssets`. Uncomment what you need and add your assets to have them be built and put into the `ui/dist` folder.
140
+
141
+ # Donate
142
+ If you appreciate the work that went into this, please consider [donating to Quasar](https://donate.quasar.dev).
143
+
144
+ # License
145
+ MIT (c) Dan <dan@flytedesk.com>
package/package.json ADDED
@@ -0,0 +1,60 @@
1
+ {
2
+ "name": "quasar-ui-danx",
3
+ "version": "0.0.1",
4
+ "author": "Dan <dan@flytedesk.com>",
5
+ "description": "DanX Vue / Quasar component library",
6
+ "license": "MIT",
7
+ "module": "dist/index.esm.js",
8
+ "main": "dist/index.common.js",
9
+ "scripts": {
10
+ "dev": "cd dev && yarn dev && cd ..",
11
+ "dev:umd": "yarn build && node build/script.open-umd.js",
12
+ "dev:ssr": "cd dev && yarn 'dev:ssr' && cd ..",
13
+ "dev:ios": "cd dev && yarn 'dev:ios' && cd ..",
14
+ "dev:android": "cd dev && yarn 'dev:android' && cd ..",
15
+ "dev:electron": "cd dev && yarn 'dev:electron' && cd ..",
16
+ "build": "node build/index.js",
17
+ "build:js": "node build/script.javascript.js",
18
+ "build:css": "node build/script.css.js"
19
+ },
20
+ "repository": {
21
+ "type": "git",
22
+ "url": "https://github.com/flytedan/quasar-app-extension-danx"
23
+ },
24
+ "bugs": "",
25
+ "homepage": "",
26
+ "devDependencies": {
27
+ "autoprefixer": "^10.0.2",
28
+ "cssnano": "^4.1.10",
29
+ "postcss": "^8.1.9",
30
+ "rtlcss": "^2.6.1",
31
+ "sass": "^1.33.0",
32
+ "quasar": "^2.0.0",
33
+ "@quasar/extras": "^1.16.4",
34
+ "core-js": "^3.0.0",
35
+ "@quasar/app-webpack": "^3.0.0",
36
+ "open": "^7.3.0",
37
+ "fs-extra": "^8.1.0",
38
+ "chalk": "^4.1.0",
39
+ "rimraf": "^3.0.0",
40
+ "rollup": "^2.45.0",
41
+ "@rollup/plugin-buble": "^0.21.3",
42
+ "@rollup/plugin-json": "^4.0.0",
43
+ "@rollup/plugin-node-resolve": "^11.2.1",
44
+ "@rollup/plugin-replace": "^2.4.2",
45
+ "uglify-js": "^3.13.3",
46
+ "vue": "^3.0.0",
47
+ "vue-router": "^4.0.0",
48
+ "zlib": "^1.0.5"
49
+ },
50
+ "browserslist": [
51
+ "last 4 Chrome versions",
52
+ "last 4 Firefox versions",
53
+ "last 2 Edge versions",
54
+ "last 4 Safari versions",
55
+ "last 4 Android versions",
56
+ "last 4 ChromeAndroid versions",
57
+ "last 4 FirefoxAndroid versions",
58
+ "last 4 iOS versions"
59
+ ]
60
+ }
package/src/components/Component.js ADDED
@@ -0,0 +1,13 @@
1
+ import { h } from 'vue'
2
+ import { QBadge } from 'quasar'
3
+
4
+ export default {
5
+ name: 'Danx',
6
+
7
+ setup () {
8
+ return () => h(QBadge, {
9
+ class: 'Danx',
10
+ label: 'Danx'
11
+ })
12
+ }
13
+ }
package/src/components/Component.sass ADDED
@@ -0,0 +1,2 @@
1
+ .Danx
2
+ font-weight: bold
package/src/helpers/utils.ts ADDED
@@ -0,0 +1,63 @@
1
+ /**
2
+ * Sleep function to be used in conjuction with async await:
3
+ *
4
+ * eg: await sleep(5000);
5
+ *
6
+ * @param delay
7
+ * @returns {Promise<any>}
8
+ */
9
+ export function sleep(delay) {
10
+ return new Promise((resolve) => setTimeout(resolve, delay));
11
+ }
12
+
13
+ /**
14
+ * Returns a number that is constrained to the given range.
15
+ * @param min
16
+ * @param max
17
+ * @param value
18
+ * @returns {number}
19
+ */
20
+ export function minmax(min, max, value) {
21
+ return Math.max(min, Math.min(max, value));
22
+ }
23
+
24
+ /**
25
+ * Convert meters to miles
26
+ * @param meters
27
+ * @returns {number}
28
+ */
29
+ export function metersToMiles(meters) {
30
+ return meters * 0.000621371;
31
+ }
32
+
33
+ /**
34
+ * Convert miles to meters
35
+ * @param miles
36
+ * @returns {number}
37
+ */
38
+ export function milesToMeters(miles) {
39
+ return miles / 0.000621371;
40
+ }
41
+
42
+ /**
43
+ * Parses a string for Lat and Long coords
44
+ * @param location
45
+ * @returns {null|{lng: number, lat: number}}
46
+ */
47
+ export function parseCoords(location) {
48
+ const latLong = location.split(",");
49
+
50
+ if (latLong.length === 2) {
51
+ const lat = parseFloat(latLong[0].trim());
52
+ const lng = parseFloat(latLong[1].trim());
53
+
54
+ if (!isNaN(lat) && !isNaN(lng)) {
55
+ return {
56
+ lat,
57
+ lng,
58
+ };
59
+ }
60
+ }
61
+
62
+ return null;
63
+ }
package/src/index.common.js ADDED
@@ -0,0 +1,2 @@
1
+
2
+ export * from './vue-plugin'
package/src/index.esm.js ADDED
@@ -0,0 +1,5 @@
1
+
2
+ import * as VuePlugin from './vue-plugin'
3
+
4
+ export * from './vue-plugin'
5
+ export default VuePlugin
package/src/index.sass ADDED
@@ -0,0 +1,5 @@
1
+ @import 'quasar/src/css/variables.sass'
2
+
3
+ @import './components/Component.sass'
4
+
5
+
package/src/index.umd.js ADDED
@@ -0,0 +1,3 @@
1
+
2
+ import * as VuePlugin from './vue-plugin'
3
+ export default VuePlugin
package/src/vue-plugin.js ADDED
@@ -0,0 +1,16 @@
1
+ import Component from './components/Component'
2
+
3
+
4
+ const version = __UI_VERSION__
5
+
6
+ function install (app) {
7
+ app.component(Component.name, Component)
8
+
9
+ }
10
+
11
+ export {
12
+ version,
13
+ Component,
14
+
15
+ install
16
+ }