@mythpe/quasar-ui-qui 0.0.1 → 0.0.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.
Files changed (12) hide show
  1. package/README.md +52 -40
  2. package/package.json +4 -8
  3. package/src/components/MBtn.vue +57 -54
  4. package/src/index.common.js +1 -1
  5. package/src/index.esm.js +0 -1
  6. package/src/index.sass +0 -5
  7. package/src/index.umd.js +1 -1
  8. package/src/types/MBtn.d.ts +19 -3
  9. package/src/types/VuePlugin.d.ts +9 -13
  10. package/src/types/index.d.ts +2 -0
  11. package/src/utils.ts +26 -4
  12. package/src/vue-plugin.js +6 -4
package/README.md CHANGED
@@ -5,26 +5,22 @@
5
5
 
6
6
  **Compatible with Quasar UI v2 and Vue 3**.
7
7
 
8
-
9
8
  # Component MyComponent
10
- > Short description of the component
11
-
12
9
 
10
+ > Short description of the component
13
11
 
14
12
  # Directive v-my-directive
15
- > Short description of the directive
16
13
 
14
+ > Short description of the directive
17
15
 
18
16
  # Usage
19
17
 
20
18
  ## Quasar CLI project
21
19
 
22
-
23
20
  Install the [App Extension](../app-extension).
24
21
 
25
22
  **OR**:
26
23
 
27
-
28
24
  Create and register a boot file:
29
25
 
30
26
  ```js
@@ -38,23 +34,24 @@ Vue.use(Plugin)
38
34
  **OR**:
39
35
 
40
36
  ```html
37
+
41
38
  <style src="@mythpe/quasar-ui-qui/dist/index.css"></style>
42
39
 
43
40
  <script>
44
- import { Component as MyComponent, Directive } from '@mythpe/quasar-ui-qui'
45
-
46
- export default {
47
-
48
- components: {
49
- MyComponent
50
- },
51
-
52
-
53
- directives: {
54
- Directive
55
- }
56
-
57
- }
41
+ import { Component as MyComponent, Directive } from '@mythpe/quasar-ui-qui'
42
+
43
+ export default {
44
+
45
+ components: {
46
+ MyComponent
47
+ },
48
+
49
+
50
+ directives: {
51
+ Directive
52
+ }
53
+
54
+ }
58
55
  </script>
59
56
  ```
60
57
 
@@ -71,23 +68,24 @@ Vue.use(Plugin)
71
68
  **OR**:
72
69
 
73
70
  ```html
71
+
74
72
  <style src="@mythpe/quasar-ui-qui/dist/index.css"></style>
75
73
 
76
74
  <script>
77
- import { Component as MyComponent, Directive } from '@mythpe/quasar-ui-qui'
78
-
79
- export default {
80
-
81
- components: {
82
- MyComponent
83
- },
84
-
85
-
86
- directives: {
87
- Directive
88
- }
89
-
90
- }
75
+ import { Component as MyComponent, Directive } from '@mythpe/quasar-ui-qui'
76
+
77
+ export default {
78
+
79
+ components: {
80
+ MyComponent
81
+ },
82
+
83
+
84
+ directives: {
85
+ Directive
86
+ }
87
+
88
+ }
91
89
  </script>
92
90
  ```
93
91
 
@@ -98,26 +96,32 @@ Exports `window.mythUi`.
98
96
  Add the following tag(s) after the Quasar ones:
99
97
 
100
98
  ```html
99
+
101
100
  <head>
102
- <!-- AFTER the Quasar stylesheet tags: -->
103
- <link href="https://cdn.jsdelivr.net/npm/@mythpe/quasar-ui-qui/dist/index.min.css" rel="stylesheet" type="text/css">
101
+ <!-- AFTER the Quasar stylesheet tags: -->
102
+ <link href="https://cdn.jsdelivr.net/npm/@mythpe/quasar-ui-qui/dist/index.min.css" rel="stylesheet" type="text/css">
104
103
  </head>
105
104
  <body>
106
- <!-- at end of body, AFTER Quasar script(s): -->
107
- <script src="https://cdn.jsdelivr.net/npm/@mythpe/quasar-ui-qui/dist/index.umd.min.js"></script>
105
+ <!-- at end of body, AFTER Quasar script(s): -->
106
+ <script src="https://cdn.jsdelivr.net/npm/@mythpe/quasar-ui-qui/dist/index.umd.min.js"></script>
108
107
  </body>
109
108
  ```
109
+
110
110
  If you need the RTL variant of the CSS, then go for the following (instead of the above stylesheet link):
111
+
111
112
  ```html
113
+
112
114
  <link href="https://cdn.jsdelivr.net/npm/@mythpe/quasar-ui-qui/dist/index.rtl.min.css" rel="stylesheet" type="text/css">
113
115
  ```
114
116
 
115
117
  # Setup
118
+
116
119
  ```bash
117
120
  $ yarn
118
121
  ```
119
122
 
120
123
  # Developing
124
+
121
125
  ```bash
122
126
  # start dev in SPA mode
123
127
  $ yarn dev
@@ -139,18 +143,26 @@ $ yarn dev:electron
139
143
  ```
140
144
 
141
145
  # Building package
146
+
142
147
  ```bash
143
148
  $ yarn build
144
149
  ```
145
150
 
146
151
  # Adding Testing Components
147
- 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.
152
+
153
+ 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
154
+ will automatically be picked up by dynamic routing and added to the test page.
148
155
 
149
156
  # Adding Assets
150
- 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.
157
+
158
+ 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`
159
+ 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
160
+ put into the `ui/dist` folder.
151
161
 
152
162
  # Donate
163
+
153
164
  If you appreciate the work that went into this, please consider [donating to Quasar](https://donate.quasar.dev).
154
165
 
155
166
  # License
167
+
156
168
  MIT (c) MyTh <mythpe@gmail.com>
package/package.json CHANGED
@@ -1,8 +1,10 @@
1
1
  {
2
2
  "name": "@mythpe/quasar-ui-qui",
3
- "version": "0.0.1",
4
- "author": "MyTh <mythpe@gmail.com>",
3
+ "version": "0.0.2",
5
4
  "description": "MyTh Quasar UI Kit App Extension",
5
+ "author": "MyTh Ahmed Faiz <mythpe@gmail.com>",
6
+ "email": "mythpe@gmail.com",
7
+ "mobile": "+966590470092",
6
8
  "license": "MIT",
7
9
  "module": "src/index.esm.js",
8
10
  "main": "src/index.common.js",
@@ -17,12 +19,6 @@
17
19
  "build:js": "node build/script.javascript.js",
18
20
  "build:css": "node build/script.css.js"
19
21
  },
20
- "repository": {
21
- "type": "git",
22
- "url": ""
23
- },
24
- "bugs": "",
25
- "homepage": "",
26
22
  "devDependencies": {
27
23
  "@quasar/app-webpack": "^3.13.0",
28
24
  "@quasar/extras": "^1.16.4",
package/src/components/MBtn.vue CHANGED
@@ -1,16 +1,16 @@
1
1
  <script lang="ts" setup>
2
- import { PLUGIN_OPTIONS } from '../utils'
3
- import type { MBtnProps } from '../types/MBtn'
2
+ import type { MBtnProps } from '../types'
4
3
  import { useI18n } from 'vue-i18n'
5
4
  import { computed } from 'vue'
6
5
  import { extend } from 'quasar'
6
+ import { MythOptions } from '../utils'
7
7
 
8
8
  const props = defineProps<MBtnProps>()
9
9
  defineOptions({
10
10
  name: 'MBtn',
11
11
  inheritAttrs: !1
12
12
  })
13
- const options = PLUGIN_OPTIONS
13
+ const options = computed(() => MythOptions.getDefaults().btn ?? {})
14
14
  const { t, te } = useI18n({ useScope: 'global' })
15
15
  const getLabel = computed(() => {
16
16
  if (props.label !== undefined) {
@@ -26,129 +26,132 @@ const getLabel = computed(() => {
26
26
  </script>
27
27
 
28
28
  <template>
29
- <q-btn v-bind="extend(!0,{...$attrs},options.components?.btn,{...$props},{label: getLabel})">
29
+ <div>
30
+ <pre>{{ options }}</pre>
31
+ </div>
32
+ <q-btn v-bind="extend(!0,{...$attrs},options.props,{...$props},{label: getLabel})">
30
33
  <template
31
- v-if="!!options.style?.btn?.loading && !$slots.loading"
34
+ v-if="!!options.loading && !$slots.loading"
32
35
  #loading
33
36
  >
34
37
  <q-spinner-audio
35
- v-if="options.style.btn.loading.type === 'audio'"
36
- :color="options.style.btn.loading.color"
37
- :size="options.style.btn.loading.size"
38
+ v-if="options.loading.type === 'audio'"
39
+ :color="options.loading.color"
40
+ :size="options.loading.size"
38
41
  class="on-left"
39
42
  />
40
43
  <q-spinner-ball
41
- v-if="options.style.btn.loading.type === 'ball'"
42
- :color="options.style.btn.loading.color"
43
- :size="options.style.btn.loading.size"
44
+ v-if="options.loading.type === 'ball'"
45
+ :color="options.loading.color"
46
+ :size="options.loading.size"
44
47
  class="on-left"
45
48
  />
46
49
  <q-spinner-bars
47
- v-if="options.style.btn.loading.type === 'bars'"
48
- :color="options.style.btn.loading.color"
50
+ v-if="options.loading.type === 'bars'"
51
+ :color="options.loading.color"
49
52
  class="on-left"
50
53
  />
51
54
  <q-spinner-box
52
- v-if="options.style.btn.loading.type === 'box'"
53
- :color="options.style.btn.loading.color"
55
+ v-if="options.loading.type === 'box'"
56
+ :color="options.loading.color"
54
57
  class="on-left"
55
58
  />
56
59
  <q-spinner-clock
57
- v-if="options.style.btn.loading.type === 'clock'"
58
- :color="options.style.btn.loading.color"
60
+ v-if="options.loading.type === 'clock'"
61
+ :color="options.loading.color"
59
62
  class="on-left"
60
63
  />
61
64
  <q-spinner-comment
62
- v-if="options.style.btn.loading.type === 'comment'"
63
- :color="options.style.btn.loading.color"
65
+ v-if="options.loading.type === 'comment'"
66
+ :color="options.loading.color"
64
67
  class="on-left"
65
68
  />
66
69
  <q-spinner-cube
67
- v-if="options.style.btn.loading.type === 'cube'"
68
- :color="options.style.btn.loading.color"
70
+ v-if="options.loading.type === 'cube'"
71
+ :color="options.loading.color"
69
72
  class="on-left"
70
73
  />
71
74
  <q-spinner-dots
72
- v-if="options.style.btn.loading.type === 'dots'"
73
- :color="options.style.btn.loading.color"
75
+ v-if="options.loading.type === 'dots'"
76
+ :color="options.loading.color"
74
77
  class="on-left"
75
78
  />
76
79
  <q-spinner-facebook
77
- v-if="options.style.btn.loading.type === 'facebook'"
78
- :color="options.style.btn.loading.color"
80
+ v-if="options.loading.type === 'facebook'"
81
+ :color="options.loading.color"
79
82
  class="on-left"
80
83
  />
81
84
  <q-spinner-gears
82
- v-if="options.style.btn.loading.type === 'gears'"
83
- :color="options.style.btn.loading.color"
85
+ v-if="options.loading.type === 'gears'"
86
+ :color="options.loading.color"
84
87
  class="on-left"
85
88
  />
86
89
  <q-spinner-grid
87
- v-if="options.style.btn.loading.type === 'grid'"
88
- :color="options.style.btn.loading.color"
90
+ v-if="options.loading.type === 'grid'"
91
+ :color="options.loading.color"
89
92
  class="on-left"
90
93
  />
91
94
  <q-spinner-hearts
92
- v-if="options.style.btn.loading.type === 'hearts'"
93
- :color="options.style.btn.loading.color"
95
+ v-if="options.loading.type === 'hearts'"
96
+ :color="options.loading.color"
94
97
  class="on-left"
95
98
  />
96
99
  <q-spinner-hearts
97
- v-if="options.style.btn.loading.type === 'hearts'"
98
- :color="options.style.btn.loading.color"
100
+ v-if="options.loading.type === 'hearts'"
101
+ :color="options.loading.color"
99
102
  class="on-left"
100
103
  />
101
104
  <q-spinner-hourglass
102
- v-if="options.style.btn.loading.type === 'hourglass'"
103
- :color="options.style.btn.loading.color"
105
+ v-if="options.loading.type === 'hourglass'"
106
+ :color="options.loading.color"
104
107
  class="on-left"
105
108
  />
106
109
  <q-spinner-infinity
107
- v-if="options.style.btn.loading.type === 'infinity'"
108
- :color="options.style.btn.loading.color"
110
+ v-if="options.loading.type === 'infinity'"
111
+ :color="options.loading.color"
109
112
  class="on-left"
110
113
  />
111
114
  <q-spinner-ios
112
- v-if="options.style.btn.loading.type === 'ios'"
113
- :color="options.style.btn.loading.color"
115
+ v-if="options.loading.type === 'ios'"
116
+ :color="options.loading.color"
114
117
  class="on-left"
115
118
  />
116
119
  <q-spinner-orbit
117
- v-if="options.style.btn.loading.type === 'orbit'"
118
- :color="options.style.btn.loading.color"
120
+ v-if="options.loading.type === 'orbit'"
121
+ :color="options.loading.color"
119
122
  class="on-left"
120
123
  />
121
124
  <q-spinner-oval
122
- v-if="options.style.btn.loading.type === 'oval'"
123
- :color="options.style.btn.loading.color"
125
+ v-if="options.loading.type === 'oval'"
126
+ :color="options.loading.color"
124
127
  class="on-left"
125
128
  />
126
129
  <q-spinner-pie
127
- v-if="options.style.btn.loading.type === 'pie'"
128
- :color="options.style.btn.loading.color"
130
+ v-if="options.loading.type === 'pie'"
131
+ :color="options.loading.color"
129
132
  class="on-left"
130
133
  />
131
134
  <q-spinner-puff
132
- v-if="options.style.btn.loading.type === 'puff'"
133
- :color="options.style.btn.loading.color"
135
+ v-if="options.loading.type === 'puff'"
136
+ :color="options.loading.color"
134
137
  class="on-left"
135
138
  />
136
139
  <q-spinner-radio
137
- v-if="options.style.btn.loading.type === 'radio'"
138
- :color="options.style.btn.loading.color"
140
+ v-if="options.loading.type === 'radio'"
141
+ :color="options.loading.color"
139
142
  class="on-left"
140
143
  />
141
144
  <q-spinner-rings
142
- v-if="options.style.btn.loading.type === 'rings'"
143
- :color="options.style.btn.loading.color"
145
+ v-if="options.loading.type === 'rings'"
146
+ :color="options.loading.color"
144
147
  class="on-left"
145
148
  />
146
149
  <q-spinner-tail
147
- v-if="options.style.btn.loading.type === 'tail'"
148
- :color="options.style.btn.loading.color"
150
+ v-if="options.loading.type === 'tail'"
151
+ :color="options.loading.color"
149
152
  class="on-left"
150
153
  />
151
- <template v-if="options.style.btn.loading.label === !0">
154
+ <template v-if="options.loading.label === !0">
152
155
  {{ getLabel }}
153
156
  </template>
154
157
  </template>
package/src/index.common.js CHANGED
@@ -1,4 +1,4 @@
1
-
2
1
  export * from './vue-plugin'
3
2
  import * as VuePlugin from './vue-plugin'
3
+
4
4
  export default VuePlugin
package/src/index.esm.js CHANGED
@@ -1,4 +1,3 @@
1
-
2
1
  import * as VuePlugin from './vue-plugin'
3
2
 
4
3
  export * from './vue-plugin'
package/src/index.sass CHANGED
@@ -1,7 +1,2 @@
1
1
  @import 'quasar/src/css/variables.sass'
2
2
 
3
- @import './components/Component.sass'
4
-
5
-
6
- @import './directives/Directive.sass'
7
-
package/src/index.umd.js CHANGED
@@ -1,3 +1,3 @@
1
-
2
1
  import * as VuePlugin from './vue-plugin'
2
+
3
3
  export default VuePlugin
package/src/types/MBtn.d.ts CHANGED
@@ -1,5 +1,21 @@
1
- import type { QBtnProps } from 'quasar'
1
+ import type { GlobalComponentConstructor, QBtnProps, QBtnSlots } from 'quasar'
2
+ import type { VNode } from 'vue'
2
3
 
3
- export interface MBtnProps extends QBtnProps {
4
- //
4
+ export type MBtnProps = QBtnProps
5
+
6
+ export interface MBtnSlots extends QBtnSlots {
7
+ /**
8
+ * Use for custom content, instead of relying on 'icon' and 'label' props
9
+ */
10
+ default: () => VNode[];
11
+ /**
12
+ * Override the default QSpinner when in 'loading' state
13
+ */
14
+ loading: () => VNode[];
15
+ }
16
+
17
+ declare module '@vue/runtime-core' {
18
+ interface GlobalComponents {
19
+ MBtn: GlobalComponentConstructor<MBtnProps, MBtnSlots>;
20
+ }
5
21
  }
package/src/types/VuePlugin.d.ts CHANGED
@@ -1,17 +1,13 @@
1
1
  import type { QBtnProps } from 'quasar'
2
2
 
3
- export interface PluginOptions {
4
- components?: {
5
- btn?: QBtnProps;
6
- };
7
- style?: {
8
- btn?: {
9
- loading?: {
10
- type: 'audio' | 'ball' | 'bars' | 'box' | 'clock' | 'comment' | 'cube' | 'dots' | 'facebook' | 'gears' | 'grid' | 'hearts' | 'hourglass' | 'infinity' | 'ios' | 'orbit' | 'oval' | 'pie' | 'puff' | 'radio' | 'rings' | 'tail';
11
- color?: string | undefined;
12
- size?: string | undefined;
13
- label?: boolean | undefined;
14
- }
3
+ export interface UiOptions {
4
+ btn?: {
5
+ props?: Partial<QBtnProps>;
6
+ loading?: {
7
+ type: 'audio' | 'ball' | 'bars' | 'box' | 'clock' | 'comment' | 'cube' | 'dots' | 'facebook' | 'gears' | 'grid' | 'hearts' | 'hourglass' | 'infinity' | 'ios' | 'orbit' | 'oval' | 'pie' | 'puff' | 'radio' | 'rings' | 'tail';
8
+ color?: string | undefined;
9
+ size?: string | undefined;
10
+ label?: boolean | undefined;
15
11
  }
16
- }
12
+ };
17
13
  }
package/src/types/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export * from './MBtn.d'
2
+ export * from './VuePlugin.d'
package/src/utils.ts CHANGED
@@ -1,6 +1,28 @@
1
1
  import { ref } from 'vue'
2
- import type { PluginOptions } from './types/VuePlugin'
2
+ import type { UiOptions } from './types'
3
+ import { QBtnProps } from 'quasar'
3
4
 
4
- export const PLUGIN_OPTIONS = ref<PluginOptions>({
5
- //props: {}
6
- })
5
+ export const MythOptions = {
6
+ defaults: ref<UiOptions>({}),
7
+ getDefaults () {
8
+ return this.defaults.value
9
+ },
10
+ setDefaults (values: Partial<UiOptions>) {
11
+ this.defaults.value = { ...values }
12
+ },
13
+ withDefaults (values: Partial<UiOptions>) {
14
+ this.defaults.value = { ...this.defaults.value, ...values }
15
+ },
16
+ withBtnDefaults (values: Partial<QBtnProps>) {
17
+ this.defaults.value = {
18
+ ...this.defaults.value,
19
+ btn: {
20
+ ...this.defaults.value.btn,
21
+ props: { ...values }
22
+ }
23
+ }
24
+ },
25
+ btnDefaults () {
26
+ return this.defaults.value.btn
27
+ }
28
+ }
package/src/vue-plugin.js CHANGED
@@ -1,16 +1,18 @@
1
1
  import MBtn from './components/MBtn.vue'
2
2
  import js from '../package.json'
3
- import { PLUGIN_OPTIONS } from './utils'
3
+ import { MythOptions } from './utils'
4
4
 
5
+ const name = js.name
5
6
  const version = js.version
6
7
 
7
8
  function install (app, options = {}) {
8
- PLUGIN_OPTIONS.value = options
9
+ MythOptions.setDefaults(options)
9
10
  app.component(MBtn.name, MBtn)
10
11
  }
11
12
 
12
13
  export {
14
+ name,
13
15
  version,
14
- PLUGIN_OPTIONS,
15
- install
16
+ install,
17
+ MythOptions
16
18
  }