@asd20/ui 3.2.994 → 3.2.995

package/package.json

@@ -5,7 +5,7 @@
     "*.scss",
     "*.vue"
   ],
-  "version": "3.2.994",
+  "version": "3.2.995",
   "private": false,
   "license": "MIT",
   "repository": {

package/src/components/organisms/Asd20Calendar/index.vue

@@ -11,7 +11,7 @@
       </div>
     </div>
     <!-- Days -->
-    <ol class="asd20-calendar__days">
+    <!-- <ol class="asd20-calendar__days">
       <li
         class="asd20-calendar__day"
         v-for="(day, index) in days"
@@ -49,7 +49,49 @@
           />
         </div>
       </li>
+    </ol> -->
+
+    <ol class="asd20-calendar__days">
+      <template v-for="(week, weekIdx) in weekRows">
+        <li
+          v-for="(day, dayIdx) in week"
+          :key="weekIdx + '-' + dayIdx"
+          class="asd20-calendar__day"
+          :class="{
+            selected: day === selectedDay,
+            today: day.today,
+            outside: day.outsideOfCurrentMonth,
+            empty: day.events.length === 0,
+          }"
+          @click="onClickDay($event, day)"
+        >
+          <div class="asd20-calendar__date">
+            <span class="month">{{ day.month }}</span>
+            <span class="day">{{ day.number }}</span>
+            <span class="year">{{ day.year }}</span>
+          </div>
+          <div
+            class="asd20-calendar__events"
+            v-if="!annualView || !day.outsideOfCurrentMonth"
+          >
+            <Asd20CalendarEventButton
+              v-for="(event, index) in day.events"
+              :key="index"
+              :event="event"
+              :class="
+                day.events.length === 2
+                  ? 'small-dot'
+                  : day.events.length > 2
+                  ? 'smaller-dot'
+                  : ''
+              "
+              @click.native="onEventClick(event)"
+            />
+          </div>
+        </li>
+      </template>
     </ol>
+
     <asd20-viewport
       class="asd20-calendar__day-events"
       scrollable
@@ -90,6 +132,7 @@ export default {
     absolute: { type: Boolean, default: true },
     shortWeekdays: { type: Boolean, default: false },
     annualView: { type: Boolean, default: false },
+    hideWeekends: { type: Boolean, default: false },
   },
 
   data: () => ({
@@ -100,7 +143,7 @@ export default {
 
   watch: {
     days: {
-      handler: function() {
+      handler: function () {
         this.selectedDay =
           this.days.find(day => {
             return day.today
@@ -116,17 +159,65 @@ export default {
         'asd20-calendar': true,
         'asd20-calendar--absolute': this.absolute,
         'asd20-calendar--annual': this.annualView,
+        'asd20-calendar--five-day': this.hideWeekends,
       }
     },
     days() {
-      return mapEventsToDays(
+      const allDays = mapEventsToDays(
         expandEvents(this.events, this.annualView),
         this.year,
-        this.month,
+        this.month
       )
+      if (!this.hideWeekends) return allDays
+      return allDays.filter(day => {
+        // Note: day.date is usually a Date object in these helper patterns.
+        // But if it's not, you may need to use day.js, or construct new Date(day.year, day.month-1, day.number)
+        if (!day.date) {
+          try {
+            day.date = new Date(day.year, day.month - 1, day.number)
+          } catch {}
+        }
+        const jsDate =
+          day.date instanceof Date
+            ? day.date
+            : new Date(day.year, day.month - 1, day.number)
+        const dayOfWeek = jsDate.getDay()
+        return dayOfWeek !== 0 && dayOfWeek !== 6 // Exclude Sunday (0) and Saturday (6)
+      })
     },
     weekdayNames() {
-      return ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+      const names = [
+        'Sunday',
+        'Monday',
+        'Tuesday',
+        'Wednesday',
+        'Thursday',
+        'Friday',
+        'Saturday',
+      ]
+      return this.hideWeekends ? names.slice(1, 6) : names
+    },
+    weekRows() {
+      // Helper to chunk flat days array into weeks of 5 or 7 days
+      function chunk(arr, size) {
+        const result = []
+        for (let i = 0; i < arr.length; i += size) {
+          result.push(arr.slice(i, i + size))
+        }
+        return result
+      }
+
+      const colCount = this.hideWeekends ? 5 : 7
+      const weeks = chunk(this.days, colCount)
+
+      // Remove the last row if all days are outside the current month
+      while (
+        weeks.length &&
+        weeks[weeks.length - 1].every(day => day.outsideOfCurrentMonth)
+      ) {
+        weeks.pop()
+      }
+      return weeks
     },
   },
   methods: {
@@ -295,6 +386,8 @@ $accent: var(--color__accent);
   &--annual {
     .asd20-calendar__weekdays {
       padding: 0;
+      background: var(--color__primary);
+      color: #ffffff;
     }
     .asd20-calendar__days {
       position: relative;
@@ -320,7 +413,7 @@ $accent: var(--color__accent);
       width: calc(100% / 7);
       flex-grow: 1;
       display: flex;
-      flex-direction:column;
+      flex-direction: column;
       align-items: flex-start;
       background-color: var(--website-page__alternate-background-t70);
       min-height: 2.5rem;
@@ -339,16 +432,20 @@ $accent: var(--color__accent);
     }
 
     .asd20-calendar__date {
-      position: static;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
       font-size: 0.875rem;
-      margin: 0 0 0.125rem 0.125rem;
+      margin: 0 auto;
+      z-index: 10;
 
       .day {
-        display: inline;
+        display: block;
         width: auto;
         height: auto;
         padding: 0;
-        font-size: 0.875rem;
+        font-size: 1.5rem;
       }
 
       .weekday,
@@ -361,15 +458,18 @@ $accent: var(--color__accent);
     .asd20-calendar__events {
       position: static;
       display: flex;
-      flex-direction: column;
+      flex-direction: row;
       width: 100%;
       justify-content: stretch;
-      max-height: 2rem;
+      max-height: 2.5rem;
       overflow: hidden;
+      align-items: center;
+      justify-content: center;
 
       &::v-deep .asd20-calendar-event-button {
         background: transparent;
         padding: 0;
+        margin-right: 0;
         // width: space(0.375);
         // height: space(0.375);
         width: max-content;
@@ -377,30 +477,21 @@ $accent: var(--color__accent);
         // margin-right: space(0.0625);
         .title::before {
           width: 4rem;
-          height: 2rem;
+          height: 2.5rem;
           margin: 0;
           border-radius: 0;
-
         }
         .title span {
           display: none;
         }
       }
       &::v-deep .small-dot {
-        width: 4rem;
-        height: 50%;
-        // .title::before {
-        //   width: 12px;
-        //   height: 30px;
-        // }
+        width: 50%;
+        height: 2.5rem;
       }
       &::v-deep .smaller-dot {
-        width: 4rem;
-        height: 33%;
-        // .title::before {
-        //   width: 12px;
-        //   height: 30px;
-        // }
+        width: 33%;
+        height: 2.5rem;
       }
     }
     .outside {
@@ -409,7 +500,13 @@ $accent: var(--color__accent);
       }
     }
   }
-
+  &--five-day {
+    .asd20-calendar__days {
+      .asd20-calendar__day {
+        width: calc(100% / 5);
+      }
+    }
+  }
 }
 
 @media (max-width: 767px) {
@@ -452,7 +549,7 @@ $accent: var(--color__accent);
         //   0 1px 0 0 var(--color__tertiary), -1px 0 0 0 var(--color__tertiary);
 
         &::v-deep .asd20-calendar__date {
-          width: 100%;
+          // width: 100%;
         }
         &::v-deep .asd20-calendar__date .weekday {
           box-sizing: border-box;
@@ -540,5 +637,4 @@ $accent: var(--color__accent);
     }
   }
 }
-
 </style>