classcard-ui 0.2.535 → 0.2.538

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.535",
3
+ "version": "0.2.538",
4
4
  "main": "dist/classcard-ui.umd.min.js",
5
5
  "scripts": {
6
6
  "serve": "vue-cli-service serve",
@@ -39,10 +39,10 @@
39
39
  },
40
40
  "devDependencies": {
41
41
  "@babel/core": "^7.15.5",
42
- "@storybook/addon-actions": "^6.5.6",
43
- "@storybook/addon-essentials": "^6.5.6",
44
- "@storybook/addon-links": "^6.5.6",
45
- "@storybook/vue": "^6.5.6",
42
+ "@storybook/addon-actions": "^6.5.7",
43
+ "@storybook/addon-essentials": "^6.5.7",
44
+ "@storybook/addon-links": "^6.5.7",
45
+ "@storybook/vue": "^6.5.7",
46
46
  "@tailwindcss/postcss7-compat": "^2.2.14",
47
47
  "@types/lodash-es": "^4.17.5",
48
48
  "@vue/cli-plugin-babel": "^4.5.13",
@@ -9,61 +9,66 @@
9
9
  <h2 class="flex-auto font-semibold text-gray-900">
10
10
  {{ currentMonthAndYear }}
11
11
  </h2>
12
- <button
13
- type="button"
14
- @click="handlePreviousMonthClick"
15
- class="-my-1.5 flex flex-none items-center justify-center p-1.5 text-gray-400 hover:text-gray-500"
16
- >
17
- <span class="sr-only">Previous month</span>
18
- <!-- Heroicon name: solid/chevron-left -->
19
- <svg
20
- class="h-5 w-5"
21
- xmlns="http://www.w3.org/2000/svg"
22
- viewBox="0 0 20 20"
23
- fill="currentColor"
24
- aria-hidden="true"
25
- >
26
- <path
27
- fill-rule="evenodd"
28
- d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
29
- clip-rule="evenodd"
30
- />
31
- </svg>
32
- </button>
33
- <button
34
- type="button"
35
- @click="handleNextMonthClick"
36
- class="-my-1.5 -mr-1.5 ml-2 flex flex-none items-center justify-center p-1.5 text-gray-400 hover:text-gray-500"
37
- >
38
- <span class="sr-only">Next month</span>
39
- <!-- Heroicon name: solid/chevron-right -->
40
- <svg
41
- class="h-5 w-5"
42
- xmlns="http://www.w3.org/2000/svg"
43
- viewBox="0 0 20 20"
44
- fill="currentColor"
45
- aria-hidden="true"
46
- >
47
- <path
48
- fill-rule="evenodd"
49
- d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
50
- clip-rule="evenodd"
51
- />
52
- </svg>
53
- </button>
12
+ <div class="flex items-center">
13
+ <div class="flex items-center rounded-md shadow-sm">
14
+ <button
15
+ @click="handlePreviousMonthClick"
16
+ type="button"
17
+ class="flex items-center justify-center rounded-l-md border border-r-0 border-gray-300 bg-white py-2 pl-3 pr-4 text-gray-400 hover:text-gray-500 focus:relative"
18
+ >
19
+ <span class="sr-only">Previous month</span>
20
+ <!-- Heroicon name: solid/chevron-left -->
21
+ <svg
22
+ class="h-5 w-5"
23
+ xmlns="http://www.w3.org/2000/svg"
24
+ viewBox="0 0 20 20"
25
+ fill="currentColor"
26
+ aria-hidden="true"
27
+ >
28
+ <path
29
+ fill-rule="evenodd"
30
+ d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
31
+ clip-rule="evenodd"
32
+ />
33
+ </svg>
34
+ </button>
35
+ <span class="relative -mx-px h-5 w-px bg-gray-300"></span>
36
+ <button
37
+ @click="handleNextMonthClick"
38
+ type="button"
39
+ class="flex items-center justify-center rounded-r-md border border-l-0 border-gray-300 bg-white py-2 pl-4 pr-3 text-gray-400 hover:text-gray-500 focus:relative"
40
+ >
41
+ <span class="sr-only">Next month</span>
42
+ <!-- Heroicon name: solid/chevron-right -->
43
+ <svg
44
+ class="h-5 w-5"
45
+ xmlns="http://www.w3.org/2000/svg"
46
+ viewBox="0 0 20 20"
47
+ fill="currentColor"
48
+ aria-hidden="true"
49
+ >
50
+ <path
51
+ fill-rule="evenodd"
52
+ d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
53
+ clip-rule="evenodd"
54
+ />
55
+ </svg>
56
+ </button>
57
+ </div>
58
+ </div>
54
59
  </div>
55
60
 
56
61
  <div class="col-span-1 shadow ring-1 ring-gray-200">
57
62
  <div
58
63
  class="grid grid-cols-7 gap-px border-b border-gray-300 bg-gray-200 text-center text-xs font-semibold leading-6 text-gray-700"
59
64
  >
60
- <div class="bg-white py-2">M<span class="sr-only">on</span></div>
61
- <div class="bg-white py-2">T<span class="sr-only">ue</span></div>
62
- <div class="bg-white py-2">W<span class="sr-only">ed</span></div>
63
- <div class="bg-white py-2">T<span class="sr-only">hu</span></div>
64
- <div class="bg-white py-2">F<span class="sr-only">ri</span></div>
65
- <div class="bg-white py-2">S<span class="sr-only">at</span></div>
66
- <div class="bg-white py-2">S<span class="sr-only">un</span></div>
65
+ <div class="bg-white py-2">Mo<span class="sr-only">on</span></div>
66
+ <div class="bg-white py-2">Tu<span class="sr-only">ue</span></div>
67
+ <div class="bg-white py-2">We<span class="sr-only">ed</span></div>
68
+ <div class="bg-white py-2">Th<span class="sr-only">hu</span></div>
69
+ <div class="bg-white py-2">Fr<span class="sr-only">ri</span></div>
70
+ <div class="bg-white py-2">Sa<span class="sr-only">at</span></div>
71
+ <div class="bg-white py-2">Su<span class="sr-only">un</span></div>
67
72
  </div>
68
73
  <div class="flex bg-gray-200 text-xs leading-6 text-gray-700">
69
74
  <div class="isolate grid w-full grid-cols-7 grid-rows-6 gap-px">
@@ -116,7 +121,7 @@
116
121
  </div>
117
122
  <section
118
123
  v-if="eventsData && validSelectedDate"
119
- class="col-span-1 mt-8 md:mt-0"
124
+ class="col-span-1 mt-4 md:mt-0"
120
125
  >
121
126
  <h2 class="py-4 font-semibold text-gray-900">
122
127
  Schedule for
@@ -135,6 +140,7 @@
135
140
  class="cursor-pointer rounded border border-gray-100 bg-white py-2 px-4 shadow focus-within:shadow-md hover:shadow-md"
136
141
  v-for="event in getEventsForDate(value)"
137
142
  :key="event.id"
143
+ @click="handleEventClick(event)"
138
144
  >
139
145
  <div class="text-sm text-gray-900">
140
146
  {{ formatTimeFromDate(event.start) }} -
@@ -242,7 +248,7 @@ export default {
242
248
  props: {
243
249
  value: {
244
250
  type: [String, Date, Object],
245
- default: () => null,
251
+ default: () => dayjs(),
246
252
  },
247
253
  eventsCount: {
248
254
  type: Array,
@@ -312,6 +318,9 @@ export default {
312
318
  dayjs(date).isSame(dayjs(event.start), "day")
313
319
  );
314
320
  },
321
+ handleEventClick(event) {
322
+ this.$emit("event-click", event);
323
+ },
315
324
  },
316
325
  computed: {
317
326
  currentMonthAndYear() {
@@ -68,7 +68,11 @@
68
68
  v-if="type == 'tertiary' ? showFocus : true"
69
69
  class="pointer-events-none right-0 flex items-center"
70
70
  >
71
- <c-icon name="selector" type="solid" class="h-5 w-5"></c-icon>
71
+ <c-icon
72
+ name="selector"
73
+ type="solid"
74
+ class="h-5 w-5 text-gray-400"
75
+ ></c-icon>
72
76
  </div>
73
77
  </div>
74
78
  <transition