feat(calendar): add header, title and week slots

vexip-ui · Apr 19, 2022 · 340194a · 340194a
1 parent 59c94f8
commit 340194a
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 23 deletions.
diff --git a/components/calendar/calendar.vue b/components/calendar/calendar.vue
@@ -7,29 +7,40 @@
     :disabled-date="disabledDate"
   >
     <template #header>
-      <Row :class="`${prefix}__header`" align="middle">
-        <Column flex="auto"></Column>
-        <Column :class="`${prefix}__actions`" flex="0">
-          <NumberInput
-            v-model:value="calendarYear"
-            :class="`${prefix}__year-input`"
-            :range="[1970, 2300]"
-            :formatter="formatYearInput"
-          ></NumberInput>
-          <NumberInput
-            v-model:value="calendarMonth"
-            :class="`${prefix}__month-input`"
-            :range="[1, 12]"
-            :formatter="formatMonthInput"
-          ></NumberInput>
-        </Column>
-      </Row>
+      <slot name="header">
+        <Row :class="`${prefix}__header`" align="middle">
+          <Column flex="auto">
+            <slot name="title"></slot>
+          </Column>
+          <Column :class="`${prefix}__actions`" flex="0">
+            <NumberInput
+              v-model:value="calendarYear"
+              :class="`${prefix}__year-input`"
+              :range="[1970, 2300]"
+              :formatter="formatYearInput"
+            ></NumberInput>
+            <NumberInput
+              v-model:value="calendarMonth"
+              :class="`${prefix}__month-input`"
+              :range="[1, 12]"
+              :formatter="formatMonthInput"
+            ></NumberInput>
+          </Column>
+        </Row>
+      </slot>
     </template>
-    <template #week="{ label }">
+    <template #week="{ label, index, week }">
       <div :class="`${prefix}__week`">
-        <div :class="`${prefix}__week-value`">
-          {{ label }}
-        </div>
+        <slot
+          name="week"
+          :label="label"
+          :index="index"
+          :week="week"
+        >
+          <div :class="`${prefix}__week-value`">
+            {{ label }}
+          </div>
+        </slot>
       </div>
     </template>
     <template #item="{ selected, date, isPrev, isNext, isToday, disabled }">
@@ -78,7 +89,7 @@ import type { Dateable } from '@/common/utils/date'
 
 const props = useConfiguredProps('calendar', {
   value: {
-    type: [Number, String, Date, Array] as PropType<Dateable | Dateable[]>,
+    type: [Number, String, Date] as PropType<Dateable | Dateable[]>,
     default: null
   },
   year: {

diff --git a/style/calendar.scss b/style/calendar.scss
@@ -109,7 +109,9 @@
     }
 
     &-content {
-      height: 6em;
+      height: 7em;
+      padding: 4px;
+      overflow: auto;
     }
   }
 }