classcard-ui 0.2.528 → 0.2.529

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 (8) hide show
  1. package/dist/classcard-ui.common.js +85 -70
  2. package/dist/classcard-ui.common.js.map +1 -1
  3. package/dist/classcard-ui.umd.js +85 -70
  4. package/dist/classcard-ui.umd.js.map +1 -1
  5. package/dist/classcard-ui.umd.min.js +1 -1
  6. package/dist/classcard-ui.umd.min.js.map +1 -1
  7. package/package.json +1 -1
  8. package/src/components/CCalendar/CCalendar.vue +185 -172
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "classcard-ui",
3
- "version": "0.2.528",
3
+ "version": "0.2.529",
4
4
  "main": "dist/classcard-ui.umd.min.js",
5
5
  "scripts": {
6
6
  "serve": "vue-cli-service serve",
package/src/components/CCalendar/CCalendar.vue CHANGED
@@ -1,207 +1,214 @@
1
1
  <template>
2
2
  <!-- This example requires Tailwind CSS v2.0+ -->
3
3
  <div>
4
- <div
5
- class="relative z-20 flex items-center justify-between border-b border-gray-200 py-4"
6
- >
7
- <h2 class="flex-auto font-semibold text-gray-900">
8
- {{ currentMonthAndYear }}
9
- </h2>
10
- <button
11
- type="button"
12
- @click="handlePreviousMonthClick"
13
- class="-my-1.5 flex flex-none items-center justify-center p-1.5 text-gray-400 hover:text-gray-500"
14
- >
15
- <span class="sr-only">Previous month</span>
16
- <!-- Heroicon name: solid/chevron-left -->
17
- <svg
18
- class="h-5 w-5"
19
- xmlns="http://www.w3.org/2000/svg"
20
- viewBox="0 0 20 20"
21
- fill="currentColor"
22
- aria-hidden="true"
23
- >
24
- <path
25
- fill-rule="evenodd"
26
- 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"
27
- clip-rule="evenodd"
28
- />
29
- </svg>
30
- </button>
31
- <button
32
- type="button"
33
- @click="handleNextMonthClick"
34
- 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"
35
- >
36
- <span class="sr-only">Next month</span>
37
- <!-- Heroicon name: solid/chevron-right -->
38
- <svg
39
- class="h-5 w-5"
40
- xmlns="http://www.w3.org/2000/svg"
41
- viewBox="0 0 20 20"
42
- fill="currentColor"
43
- aria-hidden="true"
4
+ <div class="grid grid-cols-1 md:grid-cols-2 md:gap-8">
5
+ <div>
6
+ <div
7
+ class="relative z-20 flex items-center justify-between border-b border-gray-200 py-4"
44
8
  >
45
- <path
46
- fill-rule="evenodd"
47
- 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"
48
- clip-rule="evenodd"
49
- />
50
- </svg>
51
- </button>
52
- </div>
53
- <div class="shadow ring-1 ring-gray-200">
54
- <div
55
- 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"
56
- >
57
- <div class="bg-white py-2">M<span class="sr-only">on</span></div>
58
- <div class="bg-white py-2">T<span class="sr-only">ue</span></div>
59
- <div class="bg-white py-2">W<span class="sr-only">ed</span></div>
60
- <div class="bg-white py-2">T<span class="sr-only">hu</span></div>
61
- <div class="bg-white py-2">F<span class="sr-only">ri</span></div>
62
- <div class="bg-white py-2">S<span class="sr-only">at</span></div>
63
- <div class="bg-white py-2">S<span class="sr-only">un</span></div>
64
- </div>
65
- <div class="flex bg-gray-200 text-xs leading-6 text-gray-700">
66
- <div class="isolate grid w-full grid-cols-7 grid-rows-6 gap-px">
9
+ <h2 class="flex-auto font-semibold text-gray-900">
10
+ {{ currentMonthAndYear }}
11
+ </h2>
67
12
  <button
68
- v-for="date in daysArray"
69
- :key="getDateKey(date)"
70
13
  type="button"
71
- :class="{
72
- 'flex h-14 flex-col py-2 px-3 hover:bg-gray-100 focus:z-10': true,
73
- 'bg-white': isCurrentMonth(date),
74
- 'bg-gray-50': !isCurrentMonth(date),
75
- 'font-semibold': isSelected(date) || isToday(date),
76
- 'text-white': isSelected(date),
77
- 'text-indigo-600': !isSelected(date) && isToday(date),
78
- 'text-gray-900':
79
- !isSelected(date) && isCurrentMonth(date) && !isToday(date),
80
- 'text-gray-500':
81
- !isSelected(date) && !isCurrentMonth(date) && !isToday(date),
82
- }"
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"
83
16
  >
84
- <time
85
- :datetime="formatForDateTime(date)"
86
- :class="{
87
- 'ml-auto': true,
88
- 'bg-indigo-600': isSelected(date) && isToday(date),
89
- 'bg-gray-900': isSelected(date) && !isToday(date),
90
- }"
91
- >{{ getDayFromDate(date) }}</time
92
- >
93
- <span v-if="eventsCount" class="sr-only"
94
- >{{ getEventsCountForDate(date) }} events</span
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"
95
25
  >
96
- <span
97
- v-if="eventsCount && getEventsCountForDate(date) > 0"
98
- class="-mx-0.5 mt-auto flex flex-wrap-reverse"
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"
99
46
  >
100
- <span
101
- class="mx-0.5 mb-1 h-1.5 w-1.5 rounded-full bg-gray-400"
102
- ></span>
103
- </span>
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>
104
53
  </button>
105
54
  </div>
106
- </div>
107
- </div>
108
- <section v-if="eventsData" class="mt-12">
109
- <h2 class="font-semibold text-gray-900">
110
- Schedule for
111
- <time :datetime="selectedDateForDateTime">{{
112
- formattedSelectedDate
113
- }}</time>
114
- </h2>
115
- <ol class="mt-4 space-y-1 text-sm leading-6 text-gray-500">
116
- <li
117
- class="group flex items-center space-x-4 rounded-xl py-2 px-4 focus-within:bg-gray-100 hover:bg-gray-100"
118
- >
119
- <img
120
- src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
121
- alt=""
122
- class="h-10 w-10 flex-none rounded-full"
123
- />
124
- <div class="flex-auto">
125
- <p class="text-gray-900">Leslie Alexander</p>
126
- <p class="mt-0.5">
127
- <time datetime="2022-01-21T13:00">1:00 PM</time> -
128
- <time datetime="2022-01-21T14:30">2:30 PM</time>
129
- </p>
130
- </div>
55
+
56
+ <div class="col-span-1 shadow ring-1 ring-gray-200">
131
57
  <div
132
- class="relative opacity-0 focus-within:opacity-100 group-hover:opacity-100"
58
+ 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"
133
59
  >
134
- <div>
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>
67
+ </div>
68
+ <div class="flex bg-gray-200 text-xs leading-6 text-gray-700">
69
+ <div class="isolate grid w-full grid-cols-7 grid-rows-6 gap-px">
135
70
  <button
71
+ v-for="date in daysArray"
72
+ :key="getDateKey(date)"
136
73
  type="button"
137
- class="-m-2 flex items-center rounded-full p-1.5 text-gray-500 hover:text-gray-600"
138
- id="menu-0-button"
139
- aria-expanded="false"
140
- aria-haspopup="true"
74
+ :class="{
75
+ 'flex h-14 flex-col py-2 px-3 hover:bg-gray-100 focus:z-10': true,
76
+ 'bg-white': isCurrentMonth(date),
77
+ 'bg-gray-50': !isCurrentMonth(date),
78
+ 'font-semibold': isSelected(date) || isToday(date),
79
+ 'text-white': isSelected(date),
80
+ 'text-indigo-600': !isSelected(date) && isToday(date),
81
+ 'text-gray-900':
82
+ !isSelected(date) && isCurrentMonth(date) && !isToday(date),
83
+ 'text-gray-500':
84
+ !isSelected(date) &&
85
+ !isCurrentMonth(date) &&
86
+ !isToday(date),
87
+ }"
88
+ @click="handleDateClick(date)"
141
89
  >
142
- <span class="sr-only">Open options</span>
143
- <!-- Heroicon name: outline/dots-vertical -->
90
+ <time
91
+ :datetime="formatForDateTime(date)"
92
+ :class="{
93
+ 'ml-auto': true,
94
+ 'bg-indigo-600': isSelected(date) && isToday(date),
95
+ 'bg-gray-900': isSelected(date) && !isToday(date),
96
+ }"
97
+ >{{ getDayFromDate(date) }}</time
98
+ >
99
+ <span v-if="eventsCount" class="sr-only"
100
+ >{{ getEventsCountForDate(date) }} events</span
101
+ >
102
+ <span
103
+ v-if="eventsCount && getEventsCountForDate(date) > 0"
104
+ class="-mx-0.5 mt-auto flex flex-wrap-reverse"
105
+ >
106
+ <span
107
+ class="mx-0.5 mb-1 h-1.5 w-1.5 rounded-full bg-gray-400"
108
+ ></span>
109
+ </span>
110
+ </button>
111
+ </div>
112
+ </div>
113
+ </div>
114
+ </div>
115
+ <section
116
+ v-if="eventsData && validSelectedDate"
117
+ class="col-span-1 mt-8 md:mt-0"
118
+ >
119
+ <h2 class="py-4 font-semibold text-gray-900">
120
+ Schedule for
121
+ <time :datetime="selectedDateForDateTime">{{
122
+ formattedSelectedDate
123
+ }}</time>
124
+ </h2>
125
+ <p class="text-center text-sm text-gray-400">
126
+ Sorry, no events found for this date.
127
+ </p>
128
+ <ol v-if="false" class="space-y-3 leading-6">
129
+ <li
130
+ class="cursor-pointer rounded border border-gray-100 bg-white py-2 px-4 shadow focus-within:shadow-md hover:shadow-md"
131
+ v-for="i in 2"
132
+ :key="i"
133
+ >
134
+ <div class="text-sm text-gray-900">12:00pm - 1:00pm</div>
135
+ <div class="mt-1 text-sm font-semibold text-green-900">
136
+ Event name (4/24)
137
+ </div>
138
+ <div class="-m-1 mt-0 flex flex-wrap items-center">
139
+ <div class="m-1 flex items-center space-x-1">
144
140
  <svg
145
- class="h-6 w-6"
146
141
  xmlns="http://www.w3.org/2000/svg"
142
+ class="h-4 w-4 text-gray-400"
147
143
  fill="none"
148
144
  viewBox="0 0 24 24"
145
+ stroke="currentColor"
149
146
  stroke-width="2"
147
+ >
148
+ <path
149
+ stroke-linecap="round"
150
+ stroke-linejoin="round"
151
+ d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
152
+ />
153
+ </svg>
154
+ <span class="text-sm text-gray-500">60 mins</span>
155
+ </div>
156
+ <div class="m-1 flex items-center space-x-1">
157
+ <svg
158
+ xmlns="http://www.w3.org/2000/svg"
159
+ class="h-4 w-4 text-gray-400"
160
+ fill="none"
161
+ viewBox="0 0 24 24"
150
162
  stroke="currentColor"
151
- aria-hidden="true"
163
+ stroke-width="2"
152
164
  >
153
165
  <path
154
166
  stroke-linecap="round"
155
167
  stroke-linejoin="round"
156
- d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
168
+ d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"
157
169
  />
158
170
  </svg>
159
- </button>
160
- </div>
161
-
162
- <!--
163
- Dropdown menu, show/hide based on menu state.
164
-
165
- Entering: "transition ease-out duration-100"
166
- From: "transform opacity-0 scale-95"
167
- To: "transform opacity-100 scale-100"
168
- Leaving: "transition ease-in duration-75"
169
- From: "transform opacity-100 scale-100"
170
- To: "transform opacity-0 scale-95"
171
- -->
172
- <div
173
- class="absolute right-0 z-10 mt-2 w-36 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
174
- role="menu"
175
- aria-orientation="vertical"
176
- aria-labelledby="menu-0-button"
177
- tabindex="-1"
178
- >
179
- <div class="py-1" role="none">
180
- <!-- Active: "bg-gray-100 text-gray-900", Not Active: "text-gray-700" -->
181
- <a
182
- href="#"
183
- class="block px-4 py-2 text-sm text-gray-700"
184
- role="menuitem"
185
- tabindex="-1"
186
- id="menu-0-item-0"
187
- >Edit</a
171
+ <span class="text-sm text-gray-500">Maths - Beginners</span>
172
+ </div>
173
+ <div class="m-1 flex items-center space-x-1">
174
+ <svg
175
+ xmlns="http://www.w3.org/2000/svg"
176
+ class="h-4 w-4 text-gray-400"
177
+ fill="none"
178
+ viewBox="0 0 24 24"
179
+ stroke="currentColor"
180
+ stroke-width="2"
188
181
  >
189
- <a
190
- href="#"
191
- class="block px-4 py-2 text-sm text-gray-700"
192
- role="menuitem"
193
- tabindex="-1"
194
- id="menu-0-item-1"
195
- >Cancel</a
182
+ <path
183
+ stroke-linecap="round"
184
+ stroke-linejoin="round"
185
+ d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"
186
+ />
187
+ </svg>
188
+ <span class="text-sm text-gray-500">JSS School</span>
189
+ </div>
190
+ <div class="m-1 flex items-center space-x-1">
191
+ <svg
192
+ xmlns="http://www.w3.org/2000/svg"
193
+ class="h-4 w-4 text-gray-400"
194
+ fill="none"
195
+ viewBox="0 0 24 24"
196
+ stroke="currentColor"
197
+ stroke-width="2"
196
198
  >
199
+ <path
200
+ stroke-linecap="round"
201
+ stroke-linejoin="round"
202
+ d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
203
+ />
204
+ </svg>
205
+ <span class="text-sm text-gray-500">Jackie</span>
197
206
  </div>
198
207
  </div>
199
- </div>
200
- </li>
201
-
202
- <!-- More meetings... -->
203
- </ol>
204
- </section>
208
+ </li>
209
+ </ol>
210
+ </section>
211
+ </div>
205
212
  </div>
206
213
  </template>
207
214
 
@@ -238,6 +245,9 @@ export default {
238
245
  this.activeDate = this.activeDate.add(1, "month");
239
246
  this.$emit("next-month", this.getActiveStartAndEndDates());
240
247
  },
248
+ handleDateClick(date) {
249
+ this.$emit("input", date);
250
+ },
241
251
  getDayFromDate(date) {
242
252
  return dayjs(date).format("D");
243
253
  },
@@ -308,6 +318,9 @@ export default {
308
318
  selectedDateForDateTime() {
309
319
  return dayjs(this.value ?? dayjs()).format("YYYY-MM-DD");
310
320
  },
321
+ validSelectedDate() {
322
+ return this.value && dayjs(this.value).isValid();
323
+ },
311
324
  },
312
325
  mounted() {
313
326
  if (this.value) {