@westartcom/bread-quasar-fields 0.1.23 → 0.2.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.
Files changed (16) hide show
  1. package/fields/RadioField.vue +151 -138
  2. package/icons/BoldIcon.vue +1 -1
  3. package/icons/BulletListIcon.vue +1 -1
  4. package/icons/CheckboxBlankOutlineIcon.vue +1 -1
  5. package/icons/CheckboxMarkedIcon.vue +1 -1
  6. package/icons/ChevronDownIcon.vue +1 -1
  7. package/icons/ChevronUpIcon.vue +1 -1
  8. package/icons/CloseIcon.vue +1 -1
  9. package/icons/DeleteIcon.vue +1 -1
  10. package/icons/DownloadIcon.vue +1 -1
  11. package/icons/FileAlertOutlineIcon.vue +1 -1
  12. package/icons/FileUploadIcon.vue +1 -1
  13. package/icons/ItalicIcon.vue +1 -1
  14. package/icons/OrderedListIcon.vue +1 -1
  15. package/icons/QuoteIcon.vue +1 -1
  16. package/package.json +13 -7
package/fields/RadioField.vue CHANGED
@@ -1,24 +1,24 @@
1
1
  <template>
2
- <div class="field-wrap" :id="id">
3
- <div class="field-wrap-inner row q-gutter-sm">
4
- <template
5
- v-for="(label, optionValue) in allOptions"
6
- :key="id + '-' + optionValue + '-radio-input'"
7
- :for="id + '-' + optionValue + '-radio-input'"
8
- >
9
- <q-radio
10
- class="bg-white q-px-md"
11
- v-model="internalValue"
12
- :disable="disable"
13
- :val="optionValue"
14
- :label="label" />
15
- </template>
16
- </div>
17
-
18
- <div class="validation-errors" v-if="invalid && internalErrors && internalErrors.length">
19
- <span class="error danger-txt-color" v-for="(error, index) in internalErrors" :key="index + 'error'">{{ error }}</span>
20
- </div>
2
+ <div class="field-wrap" :id="id">
3
+ <div class="field-wrap-inner row q-gutter-sm">
4
+ <template
5
+ v-for="(label, optionValue) in allOptions"
6
+ :key="id + '-' + optionValue + '-radio-input'"
7
+ :for="id + '-' + optionValue + '-radio-input'"
8
+ >
9
+ <q-radio
10
+ class="bg-white q-px-md"
11
+ v-model="internalValue"
12
+ :disable="disable"
13
+ :val="optionValue"
14
+ :label="label" />
15
+ </template>
21
16
  </div>
17
+
18
+ <div class="validation-errors" v-if="invalid && internalErrors && internalErrors.length">
19
+ <span class="error danger-txt-color" v-for="(error, index) in internalErrors" :key="index + 'error'">{{ error }}</span>
20
+ </div>
21
+ </div>
22
22
  </template>
23
23
 
24
24
  <script lang="ts">
@@ -28,149 +28,162 @@ import { FieldType } from '@westartcom/bread-quasar-fields/enums/FieldType';
28
28
  import { InputType } from '@westartcom/bread-quasar-fields/enums/InputType';
29
29
 
30
30
  interface RadioFieldDefinition extends ModelFieldDefinition<FieldType.ENUM, InputType.RADIO> {
31
- default: string | number;
32
- extra_data: {
33
- styling_format: 'radio' | 'buttons' | 'toggle';
34
- options: {
35
- [key: string]: string | number
36
- }
31
+ default: string | number;
32
+ extra_data: {
33
+ styling_format: 'radio' | 'buttons' | 'toggle';
34
+ options: {
35
+ [key: string]: string | number
37
36
  }
37
+ }
38
38
  }
39
39
 
40
40
  export default defineComponent({
41
- props: {
42
- id: {
43
- type: String,
44
- required: true
45
- },
46
- disable: {
47
- type: Boolean,
48
- required: false,
49
- default: false
50
- },
51
- field: {
52
- type: Object as PropType<RadioFieldDefinition>,
53
- required: true
54
- },
55
- modelValue: [String, Number],
56
- errors: Array as PropType<string[]>
41
+ props: {
42
+ id: {
43
+ type: String,
44
+ required: true
45
+ },
46
+ disable: {
47
+ type: Boolean,
48
+ required: false,
49
+ default: false
57
50
  },
51
+ field: {
52
+ type: Object as PropType<RadioFieldDefinition>,
53
+ required: true
54
+ },
55
+ modelValue: [String, Number],
56
+ errors: Array as PropType<string[]>
57
+ },
58
+
59
+ emits: [
60
+ 'update:modelValue',
61
+ 'update:invalid'
62
+ ],
63
+
64
+ data() {
65
+ return {
66
+ invalid: null as boolean | null,
67
+ internalValue: null as string | null | number,
68
+ internalErrors: [] as string[]
69
+ };
70
+ },
71
+
72
+ mounted() {
73
+ if (this.modelValue) {
74
+ // Use int if options is an array
75
+ let parsedInt = parseInt(this.modelValue);
76
+ if(parsedInt.toString() !== 'NaN') {
77
+ this.internalValue = parsedInt;
78
+ } else {
79
+ this.internalValue = this.modelValue.toString();
80
+ }
81
+ } else if (this.field.default) {
82
+ // Use int if options is an array
83
+ let parsedInt = parseInt(this.field.default);
84
+ if(parsedInt.toString() !== 'NaN') {
85
+ this.internalValue = parsedInt;
86
+ } else {
87
+ this.internalValue = this.field.default.toString();
88
+ }
89
+ }
58
90
 
59
- emits: [
60
- 'update:modelValue',
61
- 'update:invalid'
62
- ],
63
-
64
- data() {
65
- return {
66
- invalid: null as boolean | null,
67
- internalValue: null as string | null,
68
- internalErrors: [] as string[]
69
- };
91
+ this.validate(this.internalValue);
92
+ },
93
+
94
+ computed: {
95
+ stylingFormat: function() {
96
+ return (this.field.extra_data?.styling_format) ? this.field.extra_data.styling_format : 'radio';
70
97
  },
71
98
 
72
- mounted() {
73
- if (this.modelValue) {
74
- this.internalValue = this.modelValue.toString();
75
- } else if (this.field.default) {
76
- this.internalValue = this.field.default.toString();
77
- }
99
+ allOptions: function() {
100
+ return (this.field.extra_data?.options) ? this.field.extra_data.options : {};
101
+ }
102
+ },
78
103
 
79
- this.validate(this.internalValue);
104
+ watch: {
105
+ modelValue: function(val) {
106
+ if (val !== this.internalValue) {
107
+ this.internalValue = val;
108
+ }
80
109
  },
81
110
 
82
- computed: {
83
- stylingFormat: function() {
84
- return (this.field.extra_data?.styling_format) ? this.field.extra_data.styling_format : 'radio';
85
- },
111
+ internalValue: function(val) {
112
+ this.validate(val);
113
+ this.$emit('update:modelValue', val);
114
+ },
86
115
 
87
- allOptions: function() {
88
- return (this.field.extra_data?.options) ? this.field.extra_data.options : {};
89
- }
116
+ errors: {
117
+ handler: function(val) {
118
+ this.internalErrors = val;
119
+ },
120
+ deep: true
90
121
  },
91
122
 
92
- watch: {
93
- modelValue: function(val) {
94
- if (val !== this.internalValue) {
95
- this.internalValue = val;
96
- }
97
- },
98
-
99
- internalValue: function(val) {
100
- this.validate(val);
101
- this.$emit('update:modelValue', val);
102
- },
103
-
104
- errors: {
105
- handler: function(val) {
106
- this.internalErrors = val;
107
- },
108
- deep: true
109
- },
110
-
111
- internalErrors: {
112
- handler: function(val) {
113
- this.invalid = !!(val && val.length);
114
- },
115
- deep: true
116
- },
117
-
118
- invalid: function(val) {
119
- this.$emit('update:invalid', val);
120
- }
123
+ internalErrors: {
124
+ handler: function(val) {
125
+ this.invalid = !!(val && val.length);
126
+ },
127
+ deep: true
121
128
  },
122
129
 
123
- methods: {
124
- validate: function(val) {
125
- this.invalid = this.field.required && !val;
126
- }
130
+ invalid: function(val) {
131
+ this.$emit('update:invalid', val);
132
+ }
133
+ },
134
+
135
+ methods: {
136
+ validate: function(val) {
137
+ console.log('val:', val);
138
+ this.invalid = this.field.required && (val === null || val === undefined); // 0 is a valid value
127
139
  }
140
+ }
128
141
  });
129
142
  </script>
130
143
 
131
144
  <style scoped lang="scss">
132
- .toggle {
133
- display: flex;
134
- max-width: var(--max-input-width);
135
- width: 100%;
136
-
137
-
138
- .btn {
139
- border-radius: 0;
140
- padding-right: 0;
141
- padding-left: 0;
142
-
143
- &:not(:first-of-type) {
144
- border-left: 0;
145
- }
146
-
147
- &:first-of-type {
148
- border-bottom-left-radius: var(--global-radius);
149
- border-top-left-radius: var(--global-radius);
150
- }
151
-
152
- &:last-of-type {
153
- border-bottom-right-radius: var(--global-radius);
154
- border-top-right-radius: var(--global-radius);
155
- }
156
- }
145
+ .toggle {
146
+ display: flex;
147
+ max-width: var(--max-input-width);
148
+ width: 100%;
149
+
150
+
151
+ .btn {
152
+ border-radius: 0;
153
+ padding-right: 0;
154
+ padding-left: 0;
155
+
156
+ &:not(:first-of-type) {
157
+ border-left: 0;
157
158
  }
158
159
 
159
- .buttons {
160
- display: flex;
161
- max-width: var(--max-input-width);
162
- width: 100%;
163
- justify-content: space-between;
164
- flex-wrap: wrap;
165
-
166
- .btn {
167
- box-sizing: border-box;
168
- width: calc(50% - 8px);
169
- margin-bottom: var(--global-spacing);
170
- }
160
+ &:first-of-type {
161
+ border-bottom-left-radius: var(--global-radius);
162
+ border-top-left-radius: var(--global-radius);
171
163
  }
172
164
 
173
- .field > label {
174
- margin-right: var(--global-spacing);
165
+ &:last-of-type {
166
+ border-bottom-right-radius: var(--global-radius);
167
+ border-top-right-radius: var(--global-radius);
175
168
  }
169
+ }
170
+ }
171
+
172
+ .buttons {
173
+ display: flex;
174
+ max-width: var(--max-input-width);
175
+ width: 100%;
176
+ justify-content: space-between;
177
+ flex-wrap: wrap;
178
+
179
+ .btn {
180
+ box-sizing: border-box;
181
+ width: calc(50% - 8px);
182
+ margin-bottom: var(--global-spacing);
183
+ }
184
+ }
185
+
186
+ .field > label {
187
+ margin-right: var(--global-spacing);
188
+ }
176
189
  </style>
package/icons/BoldIcon.vue CHANGED
@@ -5,7 +5,7 @@
5
5
  <script lang="ts">
6
6
  import SvgIcon from './SvgBaseIcon.vue';
7
7
  import { defineComponent } from 'vue';
8
- import {fasBold} from '@quasar/extras/fontawesome-v6';
8
+ import {fasBold} from '@quasar/extras/fontawesome-v7';
9
9
 
10
10
  export default defineComponent({
11
11
  components: {
package/icons/BulletListIcon.vue CHANGED
@@ -5,7 +5,7 @@
5
5
  <script lang="ts">
6
6
  import SvgIcon from './SvgBaseIcon.vue';
7
7
  import { defineComponent } from 'vue';
8
- import {fasList} from '@quasar/extras/fontawesome-v6';
8
+ import {fasList} from '@quasar/extras/fontawesome-v7';
9
9
 
10
10
  export default defineComponent({
11
11
  components: {
package/icons/CheckboxBlankOutlineIcon.vue CHANGED
@@ -5,7 +5,7 @@
5
5
  <script lang="ts">
6
6
  import SvgIcon from '@westartcom/bread-quasar-fields/icons/SvgBaseIcon.vue';
7
7
  import { defineComponent } from 'vue';
8
- import {farSquare} from '@quasar/extras/fontawesome-v6';
8
+ import {farSquare} from '@quasar/extras/fontawesome-v7';
9
9
 
10
10
  export default defineComponent({
11
11
  components: {
package/icons/CheckboxMarkedIcon.vue CHANGED
@@ -5,7 +5,7 @@
5
5
  <script lang="ts">
6
6
  import SvgIcon from '@westartcom/bread-quasar-fields/icons/SvgBaseIcon.vue';
7
7
  import { defineComponent } from 'vue';
8
- import {farSquareCheck} from '@quasar/extras/fontawesome-v6';
8
+ import {farSquareCheck} from '@quasar/extras/fontawesome-v7';
9
9
 
10
10
  export default defineComponent({
11
11
  components: {
package/icons/ChevronDownIcon.vue CHANGED
@@ -5,7 +5,7 @@
5
5
  <script lang="ts">
6
6
  import SvgIcon from './SvgBaseIcon.vue';
7
7
  import { defineComponent } from 'vue';
8
- import {fasChevronDown} from '@quasar/extras/fontawesome-v6';
8
+ import {fasChevronDown} from '@quasar/extras/fontawesome-v7';
9
9
 
10
10
  export default defineComponent({
11
11
  components: {
package/icons/ChevronUpIcon.vue CHANGED
@@ -5,7 +5,7 @@
5
5
  <script lang="ts">
6
6
  import SvgIcon from './SvgBaseIcon.vue';
7
7
  import { defineComponent } from 'vue';
8
- import {fasChevronUp} from '@quasar/extras/fontawesome-v6';
8
+ import {fasChevronUp} from '@quasar/extras/fontawesome-v7';
9
9
 
10
10
  export default defineComponent({
11
11
  components: {
package/icons/CloseIcon.vue CHANGED
@@ -5,7 +5,7 @@
5
5
  <script lang="ts">
6
6
  import SvgIcon from './SvgBaseIcon.vue';
7
7
  import { defineComponent } from 'vue';
8
- import {fasXmark} from '@quasar/extras/fontawesome-v6';
8
+ import {fasXmark} from '@quasar/extras/fontawesome-v7';
9
9
 
10
10
  export default defineComponent({
11
11
  components: {
package/icons/DeleteIcon.vue CHANGED
@@ -5,7 +5,7 @@
5
5
  <script lang="ts">
6
6
  import SvgIcon from './SvgBaseIcon.vue';
7
7
  import { defineComponent } from 'vue';
8
- import {fasTrash} from '@quasar/extras/fontawesome-v6';
8
+ import {fasTrash} from '@quasar/extras/fontawesome-v7';
9
9
 
10
10
  export default defineComponent({
11
11
  components: {
package/icons/DownloadIcon.vue CHANGED
@@ -5,7 +5,7 @@
5
5
  <script lang="ts">
6
6
  import SvgIcon from './SvgBaseIcon.vue';
7
7
  import { defineComponent } from 'vue';
8
- import {fasDownload} from '@quasar/extras/fontawesome-v6';
8
+ import {fasDownload} from '@quasar/extras/fontawesome-v7';
9
9
 
10
10
  export default defineComponent({
11
11
  components: {
package/icons/FileAlertOutlineIcon.vue CHANGED
@@ -5,7 +5,7 @@
5
5
  <script lang="ts">
6
6
  import SvgIcon from './SvgBaseIcon.vue';
7
7
  import { defineComponent } from 'vue';
8
- import {fasFileCircleExclamation} from '@quasar/extras/fontawesome-v6';
8
+ import {fasFileCircleExclamation} from '@quasar/extras/fontawesome-v7';
9
9
 
10
10
  export default defineComponent({
11
11
  components: {
package/icons/FileUploadIcon.vue CHANGED
@@ -5,7 +5,7 @@
5
5
  <script lang="ts">
6
6
  import SvgIcon from './SvgBaseIcon.vue';
7
7
  import { defineComponent } from 'vue';
8
- import {fasFileArrowUp} from '@quasar/extras/fontawesome-v6';
8
+ import {fasFileArrowUp} from '@quasar/extras/fontawesome-v7';
9
9
 
10
10
  export default defineComponent({
11
11
  components: {
package/icons/ItalicIcon.vue CHANGED
@@ -5,7 +5,7 @@
5
5
  <script lang="ts">
6
6
  import SvgIcon from './SvgBaseIcon.vue';
7
7
  import { defineComponent } from 'vue';
8
- import {fasItalic} from '@quasar/extras/fontawesome-v6';
8
+ import {fasItalic} from '@quasar/extras/fontawesome-v7';
9
9
 
10
10
  export default defineComponent({
11
11
  components: {
package/icons/OrderedListIcon.vue CHANGED
@@ -5,7 +5,7 @@
5
5
  <script lang="ts">
6
6
  import SvgIcon from './SvgBaseIcon.vue';
7
7
  import { defineComponent } from 'vue';
8
- import {fasListOl} from '@quasar/extras/fontawesome-v6';
8
+ import {fasListOl} from '@quasar/extras/fontawesome-v7';
9
9
 
10
10
  export default defineComponent({
11
11
  components: {
package/icons/QuoteIcon.vue CHANGED
@@ -5,7 +5,7 @@
5
5
  <script lang="ts">
6
6
  import SvgIcon from './SvgBaseIcon.vue';
7
7
  import { defineComponent } from 'vue';
8
- import {fasQuoteRight} from '@quasar/extras/fontawesome-v6';
8
+ import {fasQuoteRight} from '@quasar/extras/fontawesome-v7';
9
9
 
10
10
  export default defineComponent({
11
11
  components: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@westartcom/bread-quasar-fields",
3
- "version": "0.1.23",
3
+ "version": "0.2.0",
4
4
  "description": "Quasar compatible fields for bread package",
5
5
  "main": "index.js",
6
6
  "scripts": {
@@ -9,13 +9,19 @@
9
9
  "private": false,
10
10
  "author": "Christoffer",
11
11
  "license": "ISC",
12
+ "exports": {
13
+ "./enums/*": "./enums/*",
14
+ "./fields/*": "./fields/*",
15
+ "./icons/*": "./icons/*",
16
+ "./interfaces/*": "./interfaces/*"
17
+ },
12
18
  "dependencies": {
13
- "@quasar/extras": "^1.16.3",
14
- "@tiptap/core": "^2.0.3",
15
- "@tiptap/html": "^2.0.3",
16
- "@tiptap/starter-kit": "^2.0.3",
17
- "@tiptap/vue-3": "^2.0.3",
18
- "axios": "1.7",
19
+ "@quasar/extras": "^2.1.0",
20
+ "@tiptap/core": "^3.31.3",
21
+ "@tiptap/html": "^3.31.3",
22
+ "@tiptap/starter-kit": "^3.31.3",
23
+ "@tiptap/vue-3": "^3.31.3",
24
+ "axios": "^1.20.0",
19
25
  "libphonenumber-js": "^1.9.19",
20
26
  "lodash-es": "^4.17.21",
21
27
  "luxon": "^3.4.4",