classcard-ui 0.2.529 → 0.2.532
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/dist/classcard-ui.common.js +108 -61
- package/dist/classcard-ui.common.js.map +1 -1
- package/dist/classcard-ui.umd.js +108 -61
- package/dist/classcard-ui.umd.js.map +1 -1
- package/dist/classcard-ui.umd.min.js +1 -1
- package/dist/classcard-ui.umd.min.js.map +1 -1
- package/package.json +5 -5
- package/src/components/CCalendar/CCalendar.vue +58 -16
- package/src/components/CSelect/CSelect.vue +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "classcard-ui",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.532",
|
|
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.
|
|
43
|
-
"@storybook/addon-essentials": "^6.5.
|
|
44
|
-
"@storybook/addon-links": "^6.5.
|
|
45
|
-
"@storybook/vue": "^6.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",
|
|
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",
|
|
@@ -91,6 +91,8 @@
|
|
|
91
91
|
:datetime="formatForDateTime(date)"
|
|
92
92
|
:class="{
|
|
93
93
|
'ml-auto': true,
|
|
94
|
+
'flex h-6 w-6 items-center justify-center rounded-full':
|
|
95
|
+
isSelected(date),
|
|
94
96
|
'bg-indigo-600': isSelected(date) && isToday(date),
|
|
95
97
|
'bg-gray-900': isSelected(date) && !isToday(date),
|
|
96
98
|
}"
|
|
@@ -122,20 +124,29 @@
|
|
|
122
124
|
formattedSelectedDate
|
|
123
125
|
}}</time>
|
|
124
126
|
</h2>
|
|
125
|
-
<p
|
|
127
|
+
<p
|
|
128
|
+
v-if="getEventsForDate(value).length === 0"
|
|
129
|
+
class="text-center text-sm text-gray-400"
|
|
130
|
+
>
|
|
126
131
|
Sorry, no events found for this date.
|
|
127
132
|
</p>
|
|
128
|
-
<ol
|
|
133
|
+
<ol class="space-y-3 leading-6">
|
|
129
134
|
<li
|
|
130
135
|
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="
|
|
132
|
-
:key="
|
|
136
|
+
v-for="event in getEventsForDate(value)"
|
|
137
|
+
:key="event.id"
|
|
133
138
|
>
|
|
134
|
-
<div class="text-sm text-gray-900">
|
|
135
|
-
|
|
136
|
-
|
|
139
|
+
<div class="text-sm text-gray-900">
|
|
140
|
+
{{ formatTimeFromDate(event.start) }} -
|
|
141
|
+
{{ formatTimeFromDate(event.end) }}
|
|
142
|
+
</div>
|
|
143
|
+
<div
|
|
144
|
+
class="mt-1 text-sm font-semibold"
|
|
145
|
+
:style="{ color: event.color }"
|
|
146
|
+
>
|
|
147
|
+
{{ event.title }} ({{ event.booked }}/{{ event.seats }})
|
|
137
148
|
</div>
|
|
138
|
-
<div class="-m-1
|
|
149
|
+
<div class="-m-1 flex flex-wrap items-center">
|
|
139
150
|
<div class="m-1 flex items-center space-x-1">
|
|
140
151
|
<svg
|
|
141
152
|
xmlns="http://www.w3.org/2000/svg"
|
|
@@ -151,9 +162,14 @@
|
|
|
151
162
|
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
152
163
|
/>
|
|
153
164
|
</svg>
|
|
154
|
-
<span class="text-sm text-gray-500"
|
|
165
|
+
<span class="mt-0.5 text-sm text-gray-500"
|
|
166
|
+
>{{ event.duration }} mins</span
|
|
167
|
+
>
|
|
155
168
|
</div>
|
|
156
|
-
<div
|
|
169
|
+
<div
|
|
170
|
+
v-if="event.subject && event.subject.length"
|
|
171
|
+
class="m-1 flex items-center space-x-1"
|
|
172
|
+
>
|
|
157
173
|
<svg
|
|
158
174
|
xmlns="http://www.w3.org/2000/svg"
|
|
159
175
|
class="h-4 w-4 text-gray-400"
|
|
@@ -168,9 +184,14 @@
|
|
|
168
184
|
d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"
|
|
169
185
|
/>
|
|
170
186
|
</svg>
|
|
171
|
-
<span class="text-sm text-gray-500">
|
|
187
|
+
<span class="mt-0.5 text-sm text-gray-500">{{
|
|
188
|
+
event.subject
|
|
189
|
+
}}</span>
|
|
172
190
|
</div>
|
|
173
|
-
<div
|
|
191
|
+
<div
|
|
192
|
+
v-if="event.location && event.location.length"
|
|
193
|
+
class="m-1 flex items-center space-x-1"
|
|
194
|
+
>
|
|
174
195
|
<svg
|
|
175
196
|
xmlns="http://www.w3.org/2000/svg"
|
|
176
197
|
class="h-4 w-4 text-gray-400"
|
|
@@ -185,9 +206,14 @@
|
|
|
185
206
|
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
207
|
/>
|
|
187
208
|
</svg>
|
|
188
|
-
<span class="text-sm text-gray-500">
|
|
209
|
+
<span class="mt-0.5 text-sm text-gray-500">{{
|
|
210
|
+
event.location
|
|
211
|
+
}}</span>
|
|
189
212
|
</div>
|
|
190
|
-
<div
|
|
213
|
+
<div
|
|
214
|
+
v-if="event.staff && event.staff.length"
|
|
215
|
+
class="m-1 flex items-center space-x-1"
|
|
216
|
+
>
|
|
191
217
|
<svg
|
|
192
218
|
xmlns="http://www.w3.org/2000/svg"
|
|
193
219
|
class="h-4 w-4 text-gray-400"
|
|
@@ -202,7 +228,9 @@
|
|
|
202
228
|
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
229
|
/>
|
|
204
230
|
</svg>
|
|
205
|
-
<span class="text-sm text-gray-500">
|
|
231
|
+
<span class="mt-0.5 text-sm text-gray-500">{{
|
|
232
|
+
event.staff
|
|
233
|
+
}}</span>
|
|
206
234
|
</div>
|
|
207
235
|
</div>
|
|
208
236
|
</li>
|
|
@@ -219,7 +247,7 @@ export default {
|
|
|
219
247
|
name: "CCalendar",
|
|
220
248
|
props: {
|
|
221
249
|
value: {
|
|
222
|
-
type: [String, Date],
|
|
250
|
+
type: [String, Date, Object],
|
|
223
251
|
default: () => null,
|
|
224
252
|
},
|
|
225
253
|
eventsCount: {
|
|
@@ -266,6 +294,9 @@ export default {
|
|
|
266
294
|
formatForDateTime(date) {
|
|
267
295
|
return dayjs(date).format("YYYY-MM-DD");
|
|
268
296
|
},
|
|
297
|
+
formatTimeFromDate(date) {
|
|
298
|
+
return dayjs(date).format("hh:mma");
|
|
299
|
+
},
|
|
269
300
|
getEventsCountForDate(date) {
|
|
270
301
|
let eventsCountObj = this.eventsCount.find((event) =>
|
|
271
302
|
dayjs(date).isSame(dayjs(event.date), "day")
|
|
@@ -282,6 +313,11 @@ export default {
|
|
|
282
313
|
endDate: this.daysArray[this.daysArray.length - 1],
|
|
283
314
|
};
|
|
284
315
|
},
|
|
316
|
+
getEventsForDate(date) {
|
|
317
|
+
return this.eventsData.filter((event) =>
|
|
318
|
+
dayjs(date).isSame(dayjs(event.start), "day")
|
|
319
|
+
);
|
|
320
|
+
},
|
|
285
321
|
},
|
|
286
322
|
computed: {
|
|
287
323
|
currentMonthAndYear() {
|
|
@@ -310,6 +346,12 @@ export default {
|
|
|
310
346
|
dates.push(lastDayOfmonth.add(cursor, "day"));
|
|
311
347
|
cursor++;
|
|
312
348
|
}
|
|
349
|
+
if (dates.length !== 42) {
|
|
350
|
+
let lastDayOfDates = dates[dates.length - 1];
|
|
351
|
+
for (let i = 1; i <= 7; i++) {
|
|
352
|
+
dates.push(lastDayOfDates.add(i, "day"));
|
|
353
|
+
}
|
|
354
|
+
}
|
|
313
355
|
return dates;
|
|
314
356
|
},
|
|
315
357
|
formattedSelectedDate() {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div>
|
|
3
|
-
<div class="flex w-full justify-between" v-if="label">
|
|
3
|
+
<div class="flex w-full items-center justify-between" v-if="label">
|
|
4
4
|
<div class="flex items-center">
|
|
5
5
|
<!-- label of select field -->
|
|
6
6
|
<label class="block text-sm font-medium text-gray-900">
|