classcard-ui 0.2.520 → 0.2.523

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "classcard-ui",
3
- "version": "0.2.520",
3
+ "version": "0.2.523",
4
4
  "main": "dist/classcard-ui.umd.min.js",
5
5
  "scripts": {
6
6
  "serve": "vue-cli-service serve",
@@ -1,15 +1,9 @@
1
1
  <template>
2
2
  <div>
3
- <div
4
- :class="
5
- customClasses
6
- ? '-space-y-px rounded-md border border-gray-200 bg-white'
7
- : '-space-y-px rounded-md bg-white'
8
- "
9
- >
3
+ <div class="-space-y-px rounded-md bg-white">
10
4
  <div
11
- class="relative p-5"
12
5
  v-for="(item, index) in items"
6
+ class="relative pb-4 first:rounded-t-md last:rounded-b-md"
13
7
  v-bind:key="item.label"
14
8
  :class="customClasses ? classes(item, index) : ''"
15
9
  >
@@ -27,10 +21,24 @@
27
21
  class="ml-3 flex cursor-pointer flex-col"
28
22
  @click="onChange(item.value)"
29
23
  >
30
- <span class="block text-sm font-medium">
24
+ <span
25
+ class="block text-sm font-medium"
26
+ :class="
27
+ customClasses && item.value === selectedItem
28
+ ? 'text-indigo-900'
29
+ : ''
30
+ "
31
+ >
31
32
  {{ item.label }}
32
33
  </span>
33
- <span class="block text-sm text-gray-500">
34
+ <span
35
+ class="block text-sm"
36
+ :class="
37
+ customClasses && item.value === selectedItem
38
+ ? 'text-indigo-700'
39
+ : 'text-gray-500'
40
+ "
41
+ >
34
42
  {{ item.description }}
35
43
  </span>
36
44
  </label>
@@ -77,19 +85,21 @@ export default {
77
85
  classes(item, index) {
78
86
  let classForRadio = "";
79
87
  if (item.value === this.selectedItem && index === 0) {
80
- classForRadio = "border border-indigo-200 rounded-t-md bg-indigo-50";
88
+ classForRadio =
89
+ "border p-4 border-indigo-200 rounded-t-md bg-indigo-50";
81
90
  } else if (
82
91
  item.value === this.selectedItem &&
83
92
  index === this.items.length - 1
84
93
  ) {
85
- classForRadio = "border border-indigo-200 rounded-b-md bg-indigo-50";
94
+ classForRadio =
95
+ "border p-4 border-indigo-200 rounded-b-md bg-indigo-50";
86
96
  } else if (
87
97
  item.value === this.selectedItem &&
88
98
  0 < index < this.items.length - 1
89
99
  ) {
90
- classForRadio = "border border-indigo-200 bg-indigo-50";
100
+ classForRadio = "border p-4 border-indigo-200 bg-indigo-50";
91
101
  } else {
92
- classForRadio = "border-b border-gray-200";
102
+ classForRadio = "border p-4 border-gray-200";
93
103
  }
94
104
 
95
105
  return classForRadio;
@@ -126,6 +126,7 @@
126
126
  ></c-avatar>
127
127
  </div>
128
128
  <c-icon
129
+ class="flex-none"
129
130
  v-if="option.showIcon && option.icon"
130
131
  :class="option.icon.class"
131
132
  :name="option.icon.name"