@goweekdays/layer-common 1.0.5 → 1.0.7

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @goweekdays/layer-common
 
+## 1.0.7
+
+### Patch Changes
+
+- 341cbeb: Add confirmation dialog component
+
+## 1.0.6
+
+### Patch Changes
+
+- b76337c: use session id instead of access & refresh token
+
 ## 1.0.5
 
 ### Patch Changes

package/components/Calendar.vue

@@ -0,0 +1,367 @@
+<template>
+  <v-card variant="outlined" border="thin" rounded="xl">
+    <!-- Calendar Header -->
+    <v-card-title
+      class="d-flex align-center justify-space-between flex-wrap ga-4 flex-column flex-md-row"
+    >
+      <div class="d-flex align-center ga-2 justify-center justify-md-start">
+        <v-btn
+          icon="mdi-chevron-left"
+          variant="tonal"
+          size="small"
+          @click="previousMonth"
+        />
+        <v-chip
+          variant="text"
+          size="large"
+          label
+          class="text-h6 font-weight-medium text-center"
+          style="min-width: 180px"
+        >
+          {{ currentMonth }} {{ currentYear }}
+        </v-chip>
+        <v-btn
+          icon="mdi-chevron-right"
+          variant="tonal"
+          size="small"
+          @click="nextMonth"
+        />
+      </div>
+
+      <!-- Today Button -->
+      <v-btn
+        v-if="props.hideTodayButton"
+        variant="outlined"
+        size="small"
+        prepend-icon="mdi-calendar-today"
+        @click="goToToday"
+      >
+        Today
+      </v-btn>
+    </v-card-title>
+
+    <v-divider />
+
+    <!-- Month View -->
+    <v-card-text class="pa-0">
+      <!-- Days of Week Header -->
+      <v-sheet color="surface-bright" class="calendar-weekdays pa-0">
+        <v-sheet
+          v-for="day in daysOfWeek"
+          :key="day"
+          color="transparent"
+          class="d-flex align-center justify-center pa-3 weekday-cell"
+          style="min-height: 48px"
+        >
+          <v-chip variant="text" size="small" label>{{ day }}</v-chip>
+        </v-sheet>
+      </v-sheet>
+
+      <!-- Calendar Grid -->
+      <div
+        class="calendar-grid pa-0"
+        :style="{
+          'grid-auto-rows': $vuetify.display.xs
+            ? '80px'
+            : $vuetify.display.sm
+            ? '100px'
+            : '120px',
+        }"
+      >
+        <v-hover
+          v-for="date in calendarDates"
+          :key="`${date.year}-${date.month}-${date.day}`"
+          v-slot="{ isHovering, props }"
+        >
+          <v-sheet
+            v-bind="props"
+            :color="getDateColor(date, isHovering || false)"
+            :variant="getDateVariant(date)"
+            class="cursor-pointer d-flex flex-column transition-all-ease calendar-day-cell"
+            :class="[
+              !date.isCurrentMonth ? 'opacity-50' : '',
+              $vuetify.display.xs
+                ? 'pa-1'
+                : $vuetify.display.sm
+                ? 'pa-2'
+                : 'pa-2',
+            ]"
+            :style="{
+              height: $vuetify.display.xs
+                ? '80px'
+                : $vuetify.display.sm
+                ? '100px'
+                : '120px',
+            }"
+            @click="selectDate(date)"
+          >
+            <!-- Day Number -->
+            <v-chip
+              v-if="date.isToday"
+              :color="date.isSelected ? 'secondary' : 'primary'"
+              variant="flat"
+              size="small"
+              class="align-self-start mb-1"
+            >
+              {{ date.day }}
+            </v-chip>
+            <span
+              v-else
+              class="font-weight-semibold text-body-2 mb-1 align-self-start"
+              >{{ date.day }}</span
+            >
+
+            <!-- Events -->
+            <div
+              class="d-flex flex-column flex-1-1 ga-1"
+              style="overflow: hidden"
+            >
+              <v-chip
+                v-for="event in date.events.slice(0, 3)"
+                :key="event.id"
+                :color="event.color || 'primary'"
+                variant="flat"
+                size="x-small"
+                class="align-self-stretch text-truncate"
+                style="height: auto !important; font-size: 0.625rem !important"
+                @click.stop="openEvent(event)"
+              >
+                {{ event.title }}
+              </v-chip>
+
+              <v-chip
+                v-if="date.events.length > 3"
+                variant="outlined"
+                size="x-small"
+                class="align-self-start"
+                style="font-size: 0.625rem !important"
+                @click.stop="showMoreEvents(date)"
+              >
+                +{{ date.events.length - 3 }} more
+              </v-chip>
+            </div>
+          </v-sheet>
+        </v-hover>
+      </div>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+interface CalendarEvent {
+  id: string;
+  title: string;
+  start: Date;
+  end: Date;
+  color: string;
+  description?: string;
+}
+
+interface CalendarDate {
+  day: number;
+  month: number;
+  year: number;
+  date: Date;
+  dateString: string;
+  isCurrentMonth: boolean;
+  isToday: boolean;
+  isSelected: boolean;
+  events: CalendarEvent[];
+}
+
+// Props
+interface Props {
+  events?: CalendarEvent[];
+  selectedDate?: Date;
+  minDate?: Date;
+  maxDate?: Date;
+  hideTodayButton?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  events: () => [],
+  selectedDate: () => new Date(),
+  minDate: undefined,
+  maxDate: undefined,
+  hideTodayButton: false,
+});
+
+// Emits
+const emit = defineEmits<{
+  "date-selected": [date: Date];
+  "event-selected": [event: CalendarEvent];
+  "month-changed": [month: number, year: number];
+}>();
+
+// Reactive data
+const currentDate = ref(new Date(props.selectedDate));
+const selectedDate = ref(new Date(props.selectedDate));
+
+// Computed properties
+const currentMonth = computed(() => {
+  return currentDate.value.toLocaleString("default", { month: "long" });
+});
+
+const currentYear = computed(() => {
+  return currentDate.value.getFullYear();
+});
+
+const daysOfWeek = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+
+const calendarDates = computed(() => {
+  const dates: CalendarDate[] = [];
+  const year = currentDate.value.getFullYear();
+  const month = currentDate.value.getMonth();
+
+  // First day of the month
+  const firstDay = new Date(year, month, 1);
+  const lastDay = new Date(year, month + 1, 0);
+
+  // Start from Sunday of the week containing the first day
+  const startDate = new Date(firstDay);
+  startDate.setDate(startDate.getDate() - startDate.getDay());
+
+  // End at Saturday of the week containing the last day
+  const endDate = new Date(lastDay);
+  endDate.setDate(endDate.getDate() + (6 - endDate.getDay()));
+
+  const today = new Date();
+
+  for (let d = new Date(startDate); d <= endDate; d.setDate(d.getDate() + 1)) {
+    const dateObj = new Date(d);
+    const dateString = dateObj.toISOString().split("T")[0];
+
+    dates.push({
+      day: dateObj.getDate(),
+      month: dateObj.getMonth(),
+      year: dateObj.getFullYear(),
+      date: dateObj,
+      dateString,
+      isCurrentMonth: dateObj.getMonth() === month,
+      isToday: dateObj.toDateString() === today.toDateString(),
+      isSelected: dateObj.toDateString() === selectedDate.value.toDateString(),
+      events: props.events.filter(
+        (event) => event.start.toDateString() === dateObj.toDateString()
+      ),
+    });
+  }
+
+  return dates;
+});
+
+const selectedDay = computed(() => {
+  const today = new Date();
+  return {
+    day: selectedDate.value.getDate(),
+    dayName: selectedDate.value.toLocaleDateString("default", {
+      weekday: "long",
+    }),
+    fullDate: selectedDate.value.toLocaleDateString("default", {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+    }),
+    dateString: selectedDate.value.toISOString().split("T")[0],
+    isToday: selectedDate.value.toDateString() === today.toDateString(),
+    date: selectedDate.value,
+  };
+});
+
+// Methods
+const previousMonth = () => {
+  const newDate = new Date(currentDate.value);
+  newDate.setMonth(newDate.getMonth() - 1);
+  currentDate.value = newDate;
+  emit("month-changed", newDate.getMonth(), newDate.getFullYear());
+};
+
+const nextMonth = () => {
+  const newDate = new Date(currentDate.value);
+  newDate.setMonth(newDate.getMonth() + 1);
+  currentDate.value = newDate;
+  emit("month-changed", newDate.getMonth(), newDate.getFullYear());
+};
+
+const goToToday = () => {
+  const today = new Date();
+  currentDate.value = today;
+  selectedDate.value = today;
+  emit("date-selected", today);
+  emit("month-changed", today.getMonth(), today.getFullYear());
+};
+
+const selectDate = (date: CalendarDate) => {
+  selectedDate.value = date.date;
+  emit("date-selected", date.date);
+};
+
+const openEvent = (event: CalendarEvent) => {
+  emit("event-selected", event);
+};
+
+const showMoreEvents = (date: CalendarDate) => {
+  // Handle showing more events in a modal or expanded view
+  console.log("Show more events for", date.dateString, date.events);
+};
+
+// Helper methods for Vuetify components
+const getDateColor = (date: CalendarDate, isHovering: boolean) => {
+  if (date.isSelected) return "secondary";
+  if (date.isToday) return "primary-container";
+  if (isHovering && date.isCurrentMonth) return "primary";
+  return "transparent";
+};
+
+const getDateVariant = (date: CalendarDate) => {
+  if (date.isSelected) return "tonal";
+  if (date.isToday) return "flat";
+  return "flat";
+};
+
+// Watch for prop changes
+watch(
+  () => props.selectedDate,
+  (newDate) => {
+    if (newDate) {
+      selectedDate.value = new Date(newDate);
+      currentDate.value = new Date(newDate);
+    }
+  }
+);
+</script>
+
+<style scoped>
+/* CSS Grid layout for calendar */
+.calendar-weekdays {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+}
+
+.calendar-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+}
+
+.weekday-cell {
+  border-right: 1px solid rgba(var(--v-theme-on-surface), 0.12);
+  border-bottom: 1px solid rgba(var(--v-theme-on-surface), 0.12);
+}
+
+.weekday-cell:nth-child(7n) {
+  border-right: none; /* Remove right border on last column */
+}
+
+.calendar-day-cell {
+  border-right: 1px solid rgba(var(--v-theme-on-surface), 0.12);
+  border-bottom: 1px solid rgba(var(--v-theme-on-surface), 0.12);
+}
+
+.calendar-day-cell:nth-child(7n) {
+  border-right: none; /* Remove right border on last column */
+}
+
+/* Remove bottom border on last row of calendar days */
+.calendar-day-cell:nth-last-child(-n + 7) {
+  border-bottom: none;
+}
+</style>

package/components/ConfirmPrompt.vue

@@ -0,0 +1,67 @@
+<template>
+  <v-card width="100%">
+    <v-toolbar density="compact" class="pl-4">
+      <span class="font-weight-medium text-h5 text-capitalize"
+        >Delete {{ localProps.title }}</span
+      >
+    </v-toolbar>
+
+    <v-card-text>
+      <p class="text-subtitle-2 text-center">
+        Are you sure you want to delete this
+        {{ localProps.title.toLowerCase() }}? This action cannot be undone.
+      </p>
+
+      <v-row v-if="message" no-gutters justify="center" class="mt-4">
+        <span class="text-caption text-error text-center">
+          {{ message }}
+        </span>
+      </v-row>
+    </v-card-text>
+
+    <v-toolbar density="compact">
+      <v-row no-gutters>
+        <v-col cols="6">
+          <v-btn
+            tile
+            block
+            size="48"
+            variant="text"
+            class="text-none"
+            @click="emits('cancel')"
+          >
+            Cancel
+          </v-btn>
+        </v-col>
+        <v-col cols="6">
+          <v-btn
+            tile
+            block
+            size="48"
+            color="black"
+            variant="flat"
+            class="text-none"
+            @click="emits('confirm')"
+          >
+            Delete {{ localProps.title }}
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-toolbar>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+const localProps = defineProps({
+  title: {
+    type: String,
+    default: "Title",
+  },
+  message: {
+    type: String,
+    default: "",
+  },
+});
+
+const emits = defineEmits(["cancel", "confirm"]);
+</script>