classcard-ui 0.2.262 → 0.2.267

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.262",
3
+ "version": "0.2.267",
4
4
  "main": "dist/classcard-ui.common.js",
5
5
  "scripts": {
6
6
  "serve": "vue-cli-service serve",
@@ -38,10 +38,10 @@
38
38
  },
39
39
  "devDependencies": {
40
40
  "@babel/core": "^7.15.5",
41
- "@storybook/addon-actions": "^6.4.9",
42
- "@storybook/addon-essentials": "^6.4.9",
43
- "@storybook/addon-links": "^6.4.9",
44
- "@storybook/vue": "^6.4.9",
41
+ "@storybook/addon-actions": "^6.4.13",
42
+ "@storybook/addon-essentials": "^6.4.13",
43
+ "@storybook/addon-links": "^6.4.13",
44
+ "@storybook/vue": "^6.4.13",
45
45
  "@tailwindcss/postcss7-compat": "^2.2.14",
46
46
  "@types/lodash-es": "^4.17.5",
47
47
  "@vue/cli-plugin-babel": "^4.5.13",
@@ -35,7 +35,7 @@
35
35
  v-for="item in items"
36
36
  v-bind:key="item.items"
37
37
  @mousedown="selectOption($event, item.value)"
38
- class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 cursor-pointer"
38
+ class="block px-4 py-2 text-sm text-left text-gray-700 hover:bg-gray-100 hover:text-gray-900 cursor-pointer"
39
39
  role="menuitem"
40
40
  >
41
41
  {{ item.text }}
@@ -145,7 +145,7 @@
145
145
  <!-- More items... -->
146
146
  </ul>
147
147
  </div>
148
- <p v-if="isError" class="mt-2 text-sm text-red-600">
148
+ <p v-if="isError" class="mt-2 text-sm text-left text-red-600">
149
149
  {{ errorMessage }}
150
150
  </p>
151
151
  </div>
@@ -11,7 +11,7 @@
11
11
  </div>
12
12
  <span v-if="hint" class="text-sm text-gray-500">{{ hint }}</span>
13
13
  </div>
14
-
14
+
15
15
  <div class="relative" :class="label ? 'mt-1' : ''">
16
16
  <input
17
17
  type="text"
@@ -36,16 +36,20 @@
36
36
  image="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
37
37
  :rounded="true"
38
38
  ></c-avatar>
39
- <c-icon
39
+ <c-icon
40
40
  v-if="icon && !selectSearch"
41
41
  :class="icon.class"
42
42
  :name="icon.name"
43
43
  :type="icon.type"
44
- >
44
+ >
45
45
  </c-icon>
46
46
  <span :class="showImage ? 'ml-3' : ''" class="block truncate text-sm">
47
- {{ selectedValue ? selectedValue :
48
- !selectSearch || selectSearch == '' ? placeholder : null
47
+ {{
48
+ selectedValue
49
+ ? selectedValue
50
+ : !selectSearch || selectSearch == ""
51
+ ? placeholder
52
+ : null
49
53
  }}
50
54
  </span>
51
55
  </span>
@@ -54,7 +58,7 @@
54
58
  <div
55
59
  v-if="type == 'tertiary' ? showFocus : true"
56
60
  class="right-0 flex items-center pointer-events-none"
57
- >
61
+ >
58
62
  <c-icon name="selector" type="solid" class="h-5 w-5"></c-icon>
59
63
  </div>
60
64
  </div>
@@ -124,7 +128,7 @@
124
128
  </div>
125
129
  </transition>
126
130
  <!-- validation error message -->
127
- <p v-if="!isValidate" class="mt-2 text-sm text-red-600">
131
+ <p v-if="!isValidate" class="mt-2 text-sm text-left text-red-600">
128
132
  {{ errorMessage }}
129
133
  </p>
130
134
  <p v-if="helpText" class="mt-2 text-sm text-gray-500">
@@ -136,7 +140,7 @@
136
140
  <script>
137
141
  import CIcon from "../CIcon/CIcon.vue";
138
142
  import CAvatar from "../CAvatar/CAvatar.vue";
139
- import { isNumber } from 'lodash';
143
+ import { isNumber } from "lodash";
140
144
  export default {
141
145
  name: "CSelect",
142
146
  components: { CIcon, CAvatar },
@@ -177,7 +181,7 @@ export default {
177
181
  // icons in dropdown list
178
182
  icon: { type: Object },
179
183
  // value to set as default option in dropdown
180
- value: { type: [Object, String] },
184
+ value: { type: [Object, String], default: null },
181
185
  // type of dropdown - gray,tertiary or default
182
186
  type: {
183
187
  type: String,
@@ -200,7 +204,7 @@ export default {
200
204
  showSelectedValue: false,
201
205
  showFocus: false,
202
206
  selectSearch: null,
203
- renderOptions: this.options
207
+ renderOptions: this.options,
204
208
  };
205
209
  },
206
210
  computed: {
@@ -208,7 +212,7 @@ export default {
208
212
  return {
209
213
  "text-gray-900 hover:bg-gray-200 bg-gray-100 focus:ring-2 focus:border-gray-200 focus:ring-gray-200 focus:ring-offset-2 shadow-sm":
210
214
  this.type == "gray",
211
- "bg-white hover:bg-indigo-100 text-indigo-600 hover:text-indigo-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-200":
215
+ "bg-white border border-gray-200 hover:bg-indigo-100 text-indigo-600 hover:text-indigo-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-200":
212
216
  this.type == "tertiary",
213
217
  "border border-gray-300 focus:ring-indigo-500 focus:border-indigo-500 bg-white shadow-sm focus:ring-1":
214
218
  this.type == null,
@@ -232,16 +236,20 @@ export default {
232
236
  },
233
237
  search() {
234
238
  this.selectedValue = null;
235
- if(!this.selectSearch && this.selectSearch == '') {
236
- this.renderOptions = this.options;
237
- return;
239
+ if (!this.selectSearch && this.selectSearch == "") {
240
+ this.renderOptions = this.options;
241
+ return;
238
242
  }
239
243
  let options = [...this.options];
240
244
  this.renderOptions = options.filter((option) => {
241
- isNumber(option[this.renderOptionName]) ? option[this.renderOptionName] = option[this.renderOptionName].toString() : "";
242
- return option[this.renderOptionName].toLowerCase().includes(this.selectSearch.toLowerCase());
245
+ isNumber(option[this.renderOptionName])
246
+ ? (option[this.renderOptionName] = option[this.renderOptionName].toString())
247
+ : "";
248
+ return option[this.renderOptionName]
249
+ .toLowerCase()
250
+ .includes(this.selectSearch.toLowerCase());
243
251
  });
244
- }
252
+ },
245
253
  },
246
254
  watch: {
247
255
  value() {
package/src/icons.js CHANGED
@@ -52,8 +52,7 @@ export default {
52
52
  "M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3",
53
53
  "clipboard-check":
54
54
  "M9 2a1 1 0 000 2h2a1 1 0 100-2H9z M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm9.707 5.707a1 1 0 00-1.414-1.414L9 12.586l-1.293-1.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",
55
- cloud:
56
- "M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z",
55
+ cloud: "M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z",
57
56
  search: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z",
58
57
  "menu-alt-2": "M4 6h16M4 12h16M4 18h7",
59
58
  close: "M6 18L18 6M6 6l12 12",
@@ -101,8 +100,7 @@ export default {
101
100
  "M18 5v8a2 2 0 01-2 2h-5l-5 4v-4H4a2 2 0 01-2-2V5a2 2 0 012-2h12a2 2 0 012 2zM7 8H5v2h2V8zm2 0h2v2H9V8zm6 0h-2v2h2V8z",
102
101
  "check-circle-solid":
103
102
  "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",
104
- "folder-solid":
105
- "M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z",
103
+ "folder-solid": "M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z",
106
104
  "shopping-cart-outline":
107
105
  "M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z",
108
106
  "external-link-outline":
@@ -187,8 +185,7 @@ export default {
187
185
  "M4.083 9h1.946c.089-1.546.383-2.97.837-4.118A6.004 6.004 0 004.083 9zM10 2a8 8 0 100 16 8 8 0 000-16zm0 2c-.076 0-.232.032-.465.262-.238.234-.497.623-.737 1.182-.389.907-.673 2.142-.766 3.556h3.936c-.093-1.414-.377-2.649-.766-3.556-.24-.56-.5-.948-.737-1.182C10.232 4.032 10.076 4 10 4zm3.971 5c-.089-1.546-.383-2.97-.837-4.118A6.004 6.004 0 0115.917 9h-1.946zm-2.003 2H8.032c.093 1.414.377 2.649.766 3.556.24.56.5.948.737 1.182.233.23.389.262.465.262.076 0 .232-.032.465-.262.238-.234.498-.623.737-1.182.389-.907.673-2.142.766-3.556zm1.166 4.118c.454-1.147.748-2.572.837-4.118h1.946a6.004 6.004 0 01-2.783 4.118zm-6.268 0C6.412 13.97 6.118 12.546 6.03 11H4.083a6.004 6.004 0 002.783 4.118z",
188
186
  "x-circle-solid":
189
187
  "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z",
190
- "x-circle-outline":
191
- "M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z",
188
+ "x-circle-outline": "M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z",
192
189
  "x-outline": "M6 18L18 6M6 6l12 12",
193
190
  "check-circle-outline": "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z",
194
191
  "play-solid":
@@ -196,4 +193,6 @@ export default {
196
193
  "phone-outgoing-solid":
197
194
  "M17.924 2.617a.997.997 0 00-.215-.322l-.004-.004A.997.997 0 0017 2h-4a1 1 0 100 2h1.586l-3.293 3.293a1 1 0 001.414 1.414L16 5.414V7a1 1 0 102 0V3a.997.997 0 00-.076-.383z M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z",
198
195
  save: "M7.707 10.293a1 1 0 10-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 11.586V6h5a2 2 0 012 2v7a2 2 0 01-2 2H4a2 2 0 01-2-2V8a2 2 0 012-2h5v5.586l-1.293-1.293zM9 4a1 1 0 012 0v2H9V4z",
196
+ "clipboard-list-solid":
197
+ "M9 2a1 1 0 000 2h2a1 1 0 100-2H9z M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z",
199
198
  };