@mixd-id/web-scaffold 0.1.230406037 → 0.1.230406038

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 (4) hide show
  1. package/package.json +1 -1
  2. package/src/components/Checkbox.vue +57 -51
  3. package/src/components/Radio.vue +37 -87
  4. package/src/utils/helpers.mjs +1 -1
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@mixd-id/web-scaffold",
3
3
  "private": false,
4
- "version": "0.1.230406037",
4
+ "version": "0.1.230406038",
5
5
  "scripts": {
6
6
  "dev": "vite serve",
7
7
  "build": "vite build",
package/src/components/Checkbox.vue CHANGED
@@ -1,10 +1,10 @@
1
1
  <template>
2
2
  <div :class="$style.comp">
3
- <input :id="id" type="checkbox" :checked="computedChecked" @change="onChange" />
3
+ <input :id="id" type="checkbox" :checked="checked" @change="onChange" :disabled="isDisabled"/>
4
4
  <label :for="id">
5
5
  <div :class="$style.indicator">
6
6
  <Transition name="checkbox">
7
- <div v-if="computedChecked">
7
+ <div v-if="checked">
8
8
  <svg width="14" height="14" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>
9
9
  </div>
10
10
  </Transition>
@@ -18,19 +18,14 @@
18
18
 
19
19
  import { parseBoolean } from "../utils/helpers.mjs";
20
20
 
21
- export default{
21
+ export default {
22
22
 
23
23
  props:{
24
- name: String,
25
- checked: undefined,
26
- value: undefined,
27
-
28
24
  modelValue: undefined,
25
+ value: undefined,
29
26
  trueValue: undefined,
30
27
  falseValue: undefined,
31
-
32
- customClass: String,
33
- variant: String, // default
28
+ disabled: undefined
34
29
  },
35
30
 
36
31
  computed: {
@@ -39,28 +34,25 @@ export default{
39
34
  return this.$style.comp + this.uniqid()
40
35
  },
41
36
 
42
- computedChecked(){
43
- let checked
44
- if(this.modelValue){
45
-
46
- const isArray = Array.isArray(this.modelValue)
37
+ isDisabled(){
38
+ return parseBoolean(this.disabled)
39
+ },
47
40
 
48
- if(this.value !== undefined){
49
- checked = isArray ? this.modelValue.includes(this.value) :
50
- this.modelValue === this.value
51
- }
52
- else if(this.trueValue){
53
- checked = isArray ? this.modelValue.includes(this.trueValue) :
54
- this.modelValue === this.trueValue
41
+ checked(){
42
+ if(this.value !== undefined){
43
+ if(Array.isArray(this.modelValue)){
44
+ return this.modelValue.includes(this.value)
55
45
  }
56
- else{
57
- checked = parseBoolean(this.modelValue)
46
+ else{
47
+ return this.value === this.modelValue
58
48
  }
59
49
  }
60
- else{
61
- checked = !!this.checked
62
- }
63
- return checked
50
+ else if(this.trueValue && this.falseValue) {
51
+ return this.modelValue === this.trueValue
52
+ }
53
+ else {
54
+ return parseBoolean(this.modelValue)
55
+ }
64
56
  }
65
57
 
66
58
  },
@@ -69,30 +61,40 @@ export default{
69
61
 
70
62
  onChange(e){
71
63
 
72
- let value
73
- if(e.target.checked){
74
- if(this.value !== undefined) value = this.value
75
- else if(this.trueValue) value = this.trueValue
76
- else value = true
77
-
78
- if(this.modelValue && Array.isArray(this.modelValue)){
79
- value = [ ...this.modelValue, value ].filter((v, idx, arr) => {
80
- return arr.indexOf(v) === idx
81
- })
64
+ let value
65
+
66
+ if(this.value !== undefined){
67
+ if(Array.isArray(this.modelValue)){
68
+ if(e.target.checked){
69
+ this.modelValue.push(this.value)
70
+ this.modelValue.filter((value, index, self) => self.indexOf(value) === index)
71
+ }
72
+ else{
73
+ this.modelValue.splice(this.modelValue.indexOf(this.value), 1)
74
+ }
82
75
  }
83
- }
84
- else{
85
- if(this.value !== undefined) value = null
86
- else if(this.falseValue) value = this.falseValue
87
- else value = false
88
-
89
- if(this.modelValue && Array.isArray(this.modelValue)){
90
- value = this.modelValue.filter((v) => {
91
- return v !== this.value ?? (this.falseValue ?? false)
92
- })
76
+ else if(e.target.checked){
77
+ value = this.value
93
78
  }
94
79
  }
95
- this.$emit('update:modelValue', value)
80
+ else if(this.trueValue !== undefined && this.falseValue !== undefined) {
81
+ if(Array.isArray(this.modelValue)){
82
+ if(e.target.checked){
83
+ this.modelValue.push(this.trueValue)
84
+ this.modelValue.filter((value, index, self) => self.indexOf(value) === index)
85
+ }
86
+ }
87
+ else{
88
+ value = e.target.checked ? this.trueValue : this.falseValue
89
+ }
90
+ }
91
+ else{
92
+ value = e.target.checked
93
+ }
94
+
95
+ if(value !== undefined){
96
+ this.$emit('update:modelValue', value)
97
+ }
96
98
  }
97
99
 
98
100
  }
@@ -118,13 +120,17 @@ export default{
118
120
  .comp input{
119
121
  @apply hidden;
120
122
  }
123
+ .comp input[disabled] + label{
124
+ @apply opacity-70;
125
+ @apply cursor-not-allowed;
126
+ }
121
127
 
122
128
  .indicator{
123
129
  @apply w-[21px] h-[21px] border-[1px] rounded-lg border-text-200 bg-base-50;
124
130
  @apply flex items-center justify-center overflow-hidden;
125
131
  transition: border 300ms cubic-bezier(0.25, 1, 0.5, 1);
126
132
  }
127
- .comp:hover .indicator{
133
+ .comp:hover input:not([disabled]) + label>.indicator{
128
134
  @apply border-primary;
129
135
  }
130
136
 
@@ -153,4 +159,4 @@ export default{
153
159
  opacity: 0;
154
160
  }
155
161
 
156
- </style>
162
+ </style>
package/src/components/Radio.vue CHANGED
@@ -1,34 +1,26 @@
1
1
  <template>
2
- <div :class="$style.comp">
3
- <input :id="id" type="radio" :name="name" :checked="computedChecked" @change="onChange" />
4
- <label :for="id">
5
- <div :class="$style.indicator">
6
- <div>
7
- <svg width="14" height="14" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>
8
- </div>
9
- </div>
10
- <slot></slot>
11
- </label>
2
+ <div :class="$style.comp + (cChecked ? ' ' + $style.checked : '') + (isDisabled ? ' ' + $style.disabled : '')" @click="onChange">
3
+ <div :class="$style.indicator">
4
+ <div>
5
+ <svg width="14" height="14" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>
6
+ </div>
7
+ </div>
8
+ <slot></slot>
12
9
  </div>
13
10
  </template>
14
11
 
15
12
  <script>
16
13
 
17
- import { parseBoolean } from "../utils/helpers.mjs";
14
+ import {parseBoolean} from "../utils/helpers.mjs";
18
15
 
19
16
  export default{
20
17
 
21
18
  props:{
22
- name: String,
19
+ name: String,
23
20
  checked: undefined,
24
- value: undefined,
25
-
26
21
  modelValue: undefined,
27
- trueValue: undefined,
28
- falseValue: undefined,
29
-
30
- customClass: String,
31
- variant: String, // default
22
+ value: undefined,
23
+ disabled: undefined
32
24
  },
33
25
 
34
26
  computed: {
@@ -37,58 +29,22 @@ export default{
37
29
  return this.$style.comp + this.uniqid()
38
30
  },
39
31
 
40
- computedChecked(){
41
- let checked
42
- if(this.modelValue){
43
- if(this.value){
44
- checked = this.modelValue === this.value
45
- }
46
- else if(this.trueValue){
47
- checked = this.trueValue === this.value
48
- }
49
- else{
50
- checked = parseBoolean(this.modelValue)
51
- }
52
- }
53
- else{
54
- checked = !!this.checked
55
- }
56
-
57
- return checked
58
- }
32
+ isDisabled(){
33
+ return parseBoolean(this.disabled)
34
+ },
35
+
36
+ cChecked(){
37
+ return this.$props.checked === undefined ? this.modelValue === this.value : parseBoolean(this.checked)
38
+ }
59
39
 
60
40
  },
61
41
 
62
42
  methods: {
63
43
 
64
- onChange(e){
65
- let value
66
- if(e.target.checked){
67
- if(this.value) value = this.value
68
- else if(this.trueValue) value = this.trueValue
69
- else value = true
70
-
71
- if(this.modelValue && Array.isArray(this.modelValue)){
72
- value = [ ...this.modelValue, value ].filter((v, idx, arr) => {
73
- return arr.indexOf(v) === idx
74
- })
75
- }
76
- }
77
- else{
78
- if(this.value) value = null
79
- else if(this.falseValue) value = this.falseValue
80
- else value = false
81
-
82
-
83
-
84
- if(this.modelValue && Array.isArray(this.modelValue)){
85
- value = this.modelValue.filter((v) => {
86
- return v !== this.value ?? (this.falseValue ?? false)
87
- })
88
- }
89
- }
90
- this.$emit('update:modelValue', value)
91
- }
44
+ onChange(){
45
+ if(this.isDisabled) return
46
+ this.$emit('update:modelValue', this.value)
47
+ }
92
48
 
93
49
  }
94
50
 
@@ -99,36 +55,30 @@ export default{
99
55
  <style module>
100
56
 
101
57
  .comp{
102
- @apply h-[var(--h-cp)] flex items-center;
58
+ @apply h-[var(--h-cp)] flex items-center cursor-pointer;
59
+ @apply flex flex-row items-center gap-2
103
60
  }
104
61
 
105
- .comp label{
106
- @apply flex flex-row items-center gap-2;
107
- }
108
-
109
- .comp input{
110
- @apply hidden;
62
+ .comp.checked .indicator>div{
63
+ transform: scale(1);
111
64
  }
112
65
 
113
66
  .indicator{
114
- @apply w-[21px] h-[21px] border-[1px] rounded-full border-text-200 bg-base-50;
115
- @apply flex items-center justify-center overflow-hidden;
116
- transition: border 300ms cubic-bezier(0.25, 1, 0.5, 1);
117
- }
118
- .comp:hover .indicator{
119
- @apply border-primary;
67
+ @apply w-[21px] h-[21px] border-[1px] rounded-full border-text-200 bg-base-50;
68
+ @apply flex items-center justify-center overflow-hidden;
69
+ transition: border 300ms cubic-bezier(0.25, 1, 0.5, 1);
120
70
  }
121
-
122
71
  .indicator>div{
123
- @apply w-[21px] h-[21px] flex rounded-full items-center justify-center bg-primary;
124
- transition: all 300ms cubic-bezier(0.25, 1, 0.5, 1);
125
- transform: scale(0);
72
+ @apply w-[21px] h-[21px] flex rounded-full items-center justify-center bg-primary;
73
+ transition: all 300ms cubic-bezier(0.25, 1, 0.5, 1);
74
+ transform: scale(0);
126
75
  }
127
76
  .indicator>div>*{
128
- @apply fill-white;
77
+ @apply fill-white;
129
78
  }
130
- .comp input:checked + label>.indicator>div{
131
- transform: scale(1);
79
+
80
+ .comp:not(.disabled):hover .indicator{
81
+ @apply border-primary;
132
82
  }
133
83
 
134
- </style>
84
+ </style>
package/src/utils/helpers.mjs CHANGED
@@ -213,4 +213,4 @@ function observeInit(){
213
213
  once,
214
214
  always
215
215
  }
216
- }
216
+ }