@mixd-id/web-scaffold 0.1.230406074 → 0.1.230406076

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 (3) hide show
  1. package/package.json +1 -1
  2. package/src/components/PaddingBox.vue +28 -8
  3. package/src/mixin/component.js +16 -7
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.230406074",
4
+ "version": "0.1.230406076",
5
5
  "scripts": {
6
6
  "dev": "vite serve",
7
7
  "build": "vite build",
package/src/components/PaddingBox.vue CHANGED
@@ -1,32 +1,32 @@
1
1
  <template>
2
2
  <div :class="$style.comp">
3
3
  <div class="flex flex-row gap-1">
4
- <button type="button" @click="setType(1)">
4
+ <button v-if="types.includes(1)" type="button" @click="setType(1)">
5
5
  <svg width="12" height="12" class="fill-text" :class="{ 'fill-primary-500':type === 1 }" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm16 400c0 8.8-7.2 16-16 16H48c-8.8 0-16-7.2-16-16V80c0-8.8 7.2-16 16-16h352c8.8 0 16 7.2 16 16v352z"/></svg>
6
6
  </button>
7
- <button type="button" @click="setType(2)">
7
+ <button v-if="types.includes(2)" type="button" @click="setType(2)">
8
8
  <svg width="12" height="12" class="fill-text" :class="{ 'fill-primary-500':type === 2 }" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M120 32H48A48 48 0 0 0 0 80v352a48 48 0 0 0 48 48h72a8 8 0 0 0 8-8v-16a8 8 0 0 0-8-8H48a16 16 0 0 1-16-16V80a16 16 0 0 1 16-16h72a8 8 0 0 0 8-8V40a8 8 0 0 0-8-8zm280 0h-72a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8h72a16 16 0 0 1 16 16v352a16 16 0 0 1-16 16h-72a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8h72a48 48 0 0 0 48-48V80a48 48 0 0 0-48-48z"/></svg>
9
9
  </button>
10
- <button type="button" @click="setType(4)">
10
+ <button v-if="types.includes(4)" type="button" @click="setType(4)">
11
11
  <svg width="12" height="12" class="fill-text" :class="{ 'fill-primary-500':type === 4 }" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M0 80v352c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48H48C21.49 32 0 53.49 0 80zm240-16v176H32V80c0-8.837 7.163-16 16-16h192zM32 432V272h208v176H48c-8.837 0-16-7.163-16-16zm240 16V272h208v160c0 8.837-7.163 16-16 16H272zm208-208H272V64h192c8.837 0 16 7.163 16 16v160z"/></svg>
12
12
  </button>
13
13
  </div>
14
14
  <div class="grid grid-cols-4 gap-1">
15
15
  <select v-if="type >= 1" :value="values[0]"
16
16
  @change="(e) => setValue(0, e.target.value)">
17
- <option v-for="i in 9" :value="i - 1">{{ i - 1}}</option>
17
+ <option v-for="obj in opts" :value="obj.value">{{ obj.text ?? obj.value }}</option>
18
18
  </select>
19
19
  <select v-if="type >= 2" :value="values[1]"
20
20
  @change="(e) => setValue(1, e.target.value)">
21
- <option v-for="i in 9" :value="i - 1">{{ i - 1}}</option>
21
+ <option v-for="obj in opts" :value="obj.value">{{ obj.text ?? obj.value }}</option>
22
22
  </select>
23
23
  <select v-if="type >= 4" :value="values[2]"
24
24
  @change="(e) => setValue(2, e.target.value)">
25
- <option v-for="i in 9" :value="i - 1">{{ i - 1}}</option>
25
+ <option v-for="obj in opts" :value="obj.value">{{ obj.text ?? obj.value }}</option>
26
26
  </select>
27
27
  <select v-if="type >= 4" :value="values[3]"
28
28
  @change="(e) => setValue(3, e.target.value)">
29
- <option v-for="i in 9" :value="i - 1">{{ i - 1}}</option>
29
+ <option v-for="obj in opts" :value="obj.value">{{ obj.text ?? obj.value }}</option>
30
30
  </select>
31
31
  </div>
32
32
  </div>
@@ -40,7 +40,27 @@ export default{
40
40
 
41
41
  props: {
42
42
 
43
- modelValue: String
43
+ modelValue: String,
44
+
45
+ types: {
46
+ type: Array,
47
+ default: [ 1, 2, 4 ]
48
+ },
49
+
50
+ opts: {
51
+ type: Array,
52
+ default: [
53
+ { text:'0', value:'' },
54
+ { text:'1', value:'1' },
55
+ { text:'2', value:'2' },
56
+ { text:'3', value:'3' },
57
+ { text:'4', value:'4' },
58
+ { text:'5', value:'5' },
59
+ { text:'6', value:'6' },
60
+ { text:'7', value:'7' },
61
+ { text:'8', value:'8' },
62
+ ]
63
+ }
44
64
 
45
65
  },
46
66
 
package/src/mixin/component.js CHANGED
@@ -1,4 +1,13 @@
1
1
  // mixin/component.js
2
+
3
+ const borderRadiuses = {
4
+ '': '',
5
+ 'sm': '0.125rem',
6
+ 'md': '0.375rem',
7
+ 'lg': '0.5rem',
8
+ 'xl': '1rem',
9
+ }
10
+
2
11
  export const componentMixin = {
3
12
 
4
13
  props: {
@@ -108,10 +117,10 @@ export const componentMixin = {
108
117
 
109
118
  return [
110
119
  [
111
- bdRadius0.length === 1 ? bdRadius0[0] + 'px' : bdRadius0[0] + 'px',
112
- bdRadius0.length === 1 ? bdRadius0[0] + 'px' : bdRadius0[1] + 'px',
113
- bdRadius0.length === 1 ? bdRadius0[0] + 'px' : bdRadius0[2] + 'px',
114
- bdRadius0.length === 1 ? bdRadius0[0] + 'px' : bdRadius0[3] + 'px',
120
+ bdRadius0.length === 1 ? borderRadiuses[bdRadius0[0]] : borderRadiuses[bdRadius0[0]],
121
+ bdRadius0.length === 1 ? borderRadiuses[bdRadius0[0]] : borderRadiuses[bdRadius0[1]] ,
122
+ bdRadius0.length === 1 ? borderRadiuses[bdRadius0[0]] : borderRadiuses[bdRadius0[2]],
123
+ bdRadius0.length === 1 ? borderRadiuses[bdRadius0[0]] : borderRadiuses[bdRadius0[3]],
115
124
  ],
116
125
  [
117
126
  bdRadius1.length === 1 ? bdRadius1[0] + 'px' : bdRadius1[0] + 'px',
@@ -141,11 +150,11 @@ export const componentMixin = {
141
150
  },
142
151
 
143
152
  margins(){
144
- if(!this.maxWidth) return []
153
+ if(!Array.isArray(this.maxWidth)) return []
145
154
 
146
155
  return [
147
- '0 auto',
148
- '0 auto',
156
+ this.maxWidth[0] ? '0 auto' : '',
157
+ this.maxWidth[1] ? '0 auto' : '',
149
158
  ]
150
159
  }
151
160