@mixd-id/web-scaffold 0.1.230406079 → 0.1.230406080

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 (5) hide show
  1. package/package.json +1 -1
  2. package/src/components/Datepicker.vue +16 -9
  3. package/src/components/Dropdown.vue +15 -4
  4. package/src/components/Timepicker.vue +15 -8
  5. package/src/widgets/PaddingSetting.vue +2 -8
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.230406079",
4
+ "version": "0.1.230406080",
5
5
  "scripts": {
6
6
  "dev": "vite serve",
7
7
  "build": "vite build",
package/src/components/Datepicker.vue CHANGED
@@ -1,6 +1,6 @@
1
1
  <template>
2
2
 
3
- <div :class="className">
3
+ <div :class="compClass">
4
4
 
5
5
  <div v-if="mode === '' || mode === 'simple'">
6
6
  <select v-model="DD">
@@ -17,10 +17,11 @@
17
17
  </select>
18
18
  </div>
19
19
 
20
- <div v-else-if="mode === 'popup'" ref="popup" @click="contextMenu = { caller:$refs.popup, value:this.modelValue }"
20
+ <div v-else-if="mode === 'popup'" ref="popup"
21
+ @click="!readonly ? contextMenu = { caller:$refs.popup, value:this.modelValue } : null"
21
22
  class="flex-1">
22
23
  <input class="flex-1" type="text" readonly :value="DMMMYYYY"/>
23
- <div :class="$style.arrow">
24
+ <div :class="$style.arrow" v-if="!readonly">
24
25
  <svg width="16" height="16" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
25
26
  <path fill-rule="evenodd" clip-rule="evenodd" d="M4.96967 8.71967C5.26256 8.42678 5.73744 8.42678 6.03033 8.71967L11.8232 14.5126C11.9209 14.6102 12.0791 14.6102 12.1768 14.5126L17.9697 8.71967C18.2626 8.42677 18.7374 8.42677 19.0303 8.71967C19.3232 9.01256 19.3232 9.48743 19.0303 9.78033L13.2374 15.5732C12.554 16.2566 11.446 16.2566 10.7626 15.5732L4.96967 9.78033C4.67678 9.48744 4.67678 9.01256 4.96967 8.71967Z"/>
26
27
  </svg>
@@ -133,7 +134,9 @@ export default{
133
134
  default: ''
134
135
  },
135
136
 
136
- modelValue:String
137
+ modelValue:String,
138
+
139
+ readonly: undefined,
137
140
 
138
141
  },
139
142
 
@@ -147,13 +150,14 @@ export default{
147
150
  return dayjs(this.contextMenu.value).format('YYYY-MM')
148
151
  },
149
152
 
150
- className(){
153
+ compClass(){
151
154
  return [
152
155
  this.$style.datepicker,
153
- this.$style['mode-' + this.mode]
156
+ this.$style['mode-' + this.mode],
157
+ this.readonly ? this.$style.readonly : ''
154
158
  ]
155
- .join(' ')
156
- .trim()
159
+ .filter(_ => _)
160
+ .join(' ')
157
161
  },
158
162
 
159
163
  contextMenuTitle(){
@@ -261,7 +265,10 @@ export default{
261
265
  @apply h-[var(--h-cp)];
262
266
  @apply flex items-center rounded-lg overflow-hidden cursor-pointer relative;
263
267
  @apply border-[1px] border-text-200 bg-base-50;
264
- @apply hover:border-text-300 cursor-pointer;
268
+ @apply cursor-pointer;
269
+ }
270
+ .datepicker:not(.readonly){
271
+ @apply hover:border-text-300
265
272
  }
266
273
  .datepicker select{
267
274
  @apply appearance-none p-2 bg-transparent text-center w-full outline-none;
package/src/components/Dropdown.vue CHANGED
@@ -2,15 +2,15 @@
2
2
 
3
3
  <div :class="computedClass">
4
4
 
5
- <select v-if="[ 1 ].includes(mode)" class="flex-1" ref="select" @change="onChanged" :disabled="disabled"
5
+ <select v-if="[ 1 ].includes(mode)" class="flex-1" ref="select" @change="onChanged" :disabled="isDisabled"
6
6
  :value="modelValue" @input="$emit('update:modelValue', $event.target.value)">
7
7
  <slot></slot>
8
8
  </select>
9
9
 
10
- <input v-else-if="[ 2, 'custom' ].includes(mode)" type="text" class="flex-1" readonly :disabled="disabled"
10
+ <input v-else-if="[ 2, 'custom' ].includes(mode)" type="text" class="flex-1" readonly :disabled="isDisabled"
11
11
  @click="openContextMenu" ref="input"
12
12
  :value="modelValue ?? value" @input="$emit('update:modelValue', $event.target.value)" />
13
- <div :class="$style.arrow">
13
+ <div :class="$style.arrow" v-if="!isDisabled">
14
14
  <svg width="16" height="16" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
15
15
  <path fill-rule="evenodd" clip-rule="evenodd" d="M4.96967 8.71967C5.26256 8.42678 5.73744 8.42678 6.03033 8.71967L11.8232 14.5126C11.9209 14.6102 12.0791 14.6102 12.1768 14.5126L17.9697 8.71967C18.2626 8.42677 18.7374 8.42677 19.0303 8.71967C19.3232 9.01256 19.3232 9.48743 19.0303 9.78033L13.2374 15.5732C12.554 16.2566 11.446 16.2566 10.7626 15.5732L4.96967 9.78033C4.67678 9.48744 4.67678 9.01256 4.96967 8.71967Z"/>
16
16
  </svg>
@@ -40,6 +40,8 @@ export default {
40
40
 
41
41
  disabled: undefined,
42
42
 
43
+ readonly: undefined,
44
+
43
45
  modelValue: undefined,
44
46
 
45
47
  variant: String,
@@ -82,8 +84,14 @@ export default {
82
84
  this.$style['state-' + this.computedState],
83
85
  this.$style['variant-' + this.variant],
84
86
  this.$style['size-' + this.size],
87
+ this.isDisabled ? this.$style.readonly : ''
85
88
  ]
89
+ .filter(_=>_)
86
90
  .join(' ')
91
+ },
92
+
93
+ isDisabled(){
94
+ return this.disabled || this.readonly
87
95
  }
88
96
 
89
97
  },
@@ -152,7 +160,10 @@ export default {
152
160
  .dropdown{
153
161
  @apply min-h-[var(--h-cp)];
154
162
  @apply flex items-center rounded-lg overflow-hidden cursor-pointer relative;
155
- @apply border-[1px] border-text-200 bg-base-50 hover:border-text-300;
163
+ @apply border-[1px] border-text-200 bg-base-50;
164
+ }
165
+ .dropdown:not(.readonly){
166
+ @apply hover:border-text-300;
156
167
  }
157
168
 
158
169
  .dropdown select,
package/src/components/Timepicker.vue CHANGED
@@ -4,7 +4,7 @@
4
4
  <slot></slot>
5
5
  </div>
6
6
  <div class="flex-1">
7
- <select @change="onChanged" ref="hour">
7
+ <select @change="onChanged" ref="hour" :disabled="readonly">
8
8
  <option v-for="_hour in 24" :value="(_hour - 1).toString().padStart(2, '0')"
9
9
  :selected="(_hour - 1) === computedHour">
10
10
  {{ (_hour - 1).toString().padStart(2, '0') }}
@@ -15,7 +15,7 @@
15
15
  <label>:</label>
16
16
  </div>
17
17
  <div class="flex-1">
18
- <select @change="onChanged" ref="minute">
18
+ <select @change="onChanged" ref="minute" :disabled="readonly">
19
19
  <option v-for="_minute in 60" :value="(_minute - 1).toString().padStart(2, '0')"
20
20
  :selected="(_minute - 1) === computedMinute">
21
21
  {{ (_minute - 1).toString().padStart(2, '0') }}
@@ -34,6 +34,8 @@ export default{
34
34
  default: '00:00'
35
35
  },
36
36
 
37
+ readonly: undefined,
38
+
37
39
  size:{
38
40
  type: String,
39
41
  default: ''
@@ -45,10 +47,12 @@ export default{
45
47
 
46
48
  computedClass(){
47
49
  return [
48
- 'timepicker',
49
- this.size !== '' ? 'timepicker-' + this.size : ''
50
+ this.$style.timepicker,
51
+ this.size !== '' ? 'timepicker-' + this.$style.size : '',
52
+ this.readonly ? this.$style.readonly : ''
50
53
  ]
51
- .join(' ').trim()
54
+ .filter(_=>_)
55
+ .join(' ')
52
56
  },
53
57
 
54
58
  computedHour(){
@@ -75,7 +79,7 @@ export default{
75
79
  }
76
80
  </script>
77
81
 
78
- <style>
82
+ <style module>
79
83
 
80
84
  .timepicker{
81
85
  @apply inline-flex flex-row items-center bg-base-50;
@@ -87,9 +91,12 @@ export default{
87
91
 
88
92
  .timepicker select{
89
93
  @apply w-full p-2 appearance-none bg-transparent outline-none;
90
- @apply border-[1px] border-text-200 hover:border-text-300 rounded-lg;
94
+ @apply border-[1px] border-text-200 rounded-lg;
91
95
  @apply text-center;
92
96
  }
97
+ .timepicker:not(.readonly) select{
98
+ @apply hover:border-text-300;
99
+ }
93
100
 
94
101
  .timepicker.timepicker-sm select{
95
102
  @apply text-sm p-1;
@@ -105,4 +112,4 @@ export default{
105
112
  @apply text-lg p-3;
106
113
  }
107
114
 
108
- </style>
115
+ </style>
package/src/widgets/PaddingSetting.vue CHANGED
@@ -110,16 +110,10 @@ export default{
110
110
  },
111
111
 
112
112
  prefix(){
113
- switch(this.viewType){
114
- case 'desktop':
115
- return 'md:'
116
-
117
- case 'mobile':
118
- default:
119
- return ''
120
- }
113
+ return this.viewType
121
114
  }
122
115
 
116
+
123
117
  },
124
118
 
125
119
  data(){