init component

node_modules/buetify/lib/components/form/datepicker/BDatepickerTableRow.js

@@ -0,0 +1,202 @@
+import "../../../../src/components/form/datepicker/datepicker.sass";
+import BDatepickerTableCell from './BDatepickerTableCell';
+import { elemSerialDate, isDate, isOnOrAfterDate, isOnOrBeforeDate, isSameDay } from './utils';
+import { constEmptyArray, constNone } from '../../../utils/helpers';
+import { isNonEmpty } from 'fp-ts/lib/Array';
+import { constTrue, identity } from 'fp-ts/lib/function';
+import { fold } from 'fp-ts/lib/Option';
+import { pipe } from 'fp-ts/lib/pipeable';
+import { defineComponent, computed, h } from 'vue';
+export const BDatepickerTableRowPropsDefinition = {
+  modelValue: {
+    type: [Date, Array]
+  },
+  'onUpdate:modelValue': {
+    type: Function,
+    required: true
+  },
+  focusedDate: {
+    type: Object,
+    required: true
+  },
+  'onUpdate:focusedDate': {
+    type: Function,
+    required: true
+  },
+  showWeekNumber: {
+    type: Boolean,
+    default: false
+  },
+  weekNumber: {
+    type: Number,
+    required: true
+  },
+  week: {
+    type: Array,
+    required: true
+  },
+  month: {
+    type: Number,
+    required: true
+  },
+  minDate: {
+    type: Object,
+    required: true
+  },
+  maxDate: {
+    type: Object,
+    required: true
+  },
+  isDisabled: {
+    type: Boolean,
+    default: false
+  },
+  unselectableDates: {
+    type: Array,
+    default: constEmptyArray
+  },
+  unselectableDaysOfWeek: {
+    type: Array,
+    default: constEmptyArray
+  },
+  selectableDates: {
+    type: Object,
+    default: constNone
+  },
+  events: {
+    type: Array,
+    default: constEmptyArray
+  },
+  indicators: {
+    type: String,
+    required: true
+  }
+};
+
+function getIsAfterMinDate(props) {
+  return function isAfterMinDate(date) {
+    return pipe(props.minDate, fold(constTrue, d => isOnOrAfterDate(date, d)));
+  };
+}
+
+function getIsBeforeMaxDate(props) {
+  return function isBeforeMaxDate(date) {
+    return pipe(props.maxDate, fold(constTrue, d => isOnOrBeforeDate(date, d)));
+  };
+}
+
+function getIsWithinMonth(props) {
+  return function isWithinMonth(date) {
+    return date.getMonth() === props.month;
+  };
+}
+
+function getIsEnabled(props) {
+  return function isEnabled(date) {
+    return !elemSerialDate(date, props.unselectableDates) && pipe(props.selectableDates, fold(constTrue, dates => elemSerialDate(date, dates)));
+  };
+}
+
+function getIsOnSelectableDayOfWeek(props) {
+  return function isOnSelectableDayOfWeek(date) {
+    return !props.unselectableDaysOfWeek.includes(date.getDay());
+  };
+}
+
+function getDatePredicates(props) {
+  const isAfterMinDate = getIsAfterMinDate(props);
+  const isBeforeMaxDate = getIsBeforeMaxDate(props);
+  const isWithinMonth = getIsWithinMonth(props);
+  const isEnabled = getIsEnabled(props);
+  const isOnSelectableDayOfWeek = getIsOnSelectableDayOfWeek(props);
+
+  function isSelectedDate(date) {
+    return Array.isArray(props.modelValue) ? props.modelValue.some(d => isSameDay(d, date)) : props.modelValue ? isSameDay(props.modelValue, date) : false;
+  }
+
+  function isSelectableDate(date) {
+    return [isAfterMinDate(date), isBeforeMaxDate(date), isWithinMonth(date), isEnabled(date), isOnSelectableDayOfWeek(date)].every(identity);
+  }
+
+  return {
+    isAfterMinDate,
+    isBeforeMaxDate,
+    isWithinMonth,
+    isEnabled,
+    isOnSelectableDayOfWeek,
+    isSelectableDate,
+    isSelectedDate
+  };
+}
+
+function getDateClassesGenerator(props, predicates) {
+  const today = new Date();
+  return function getDateClasses(date, hasEvents = false) {
+    if (isDate(date)) {
+      const isSelectable = predicates.isSelectableDate(date);
+      return {
+        'is-selected': predicates.isSelectedDate(date),
+        'is-today': isSameDay(date, today),
+        'is-selectable': isSelectable && !props.isDisabled,
+        'is-unselectable': !isSelectable || props.isDisabled,
+        'has-event': hasEvents
+      };
+    } else {
+      return {};
+    }
+  };
+}
+
+function generateWeekNumber(weekNumber) {
+  return h('td', [`${weekNumber}`]);
+}
+
+function getGenerateCell(props) {
+  return function generateCell(cell) {
+    return h(BDatepickerTableCell, {
+      key: cell.date.toLocaleDateString(),
+      cell,
+      modelValue: props.modelValue,
+      'onUpdate:modelValue': props['onUpdate:modelValue'],
+      focusedDate: props.focusedDate,
+      'onUpdate:focusedDate': props['onUpdate:focusedDate'],
+      indicators: props.indicators
+    });
+  };
+}
+
+export default defineComponent({
+  name: 'b-datepicker-table-row',
+  props: BDatepickerTableRowPropsDefinition,
+
+  setup(props) {
+    const formattedEvents = computed(() => props.events.map(event => isDate(event) ? {
+      date: event,
+      variant: 'is-primary'
+    } : event));
+    const predicates = getDatePredicates(props);
+    const getDateClasses = getDateClassesGenerator(props, predicates);
+    const cells = computed(() => props.week.map(date => {
+      const events = formattedEvents.value.filter(event => isSameDay(date, event.date));
+      const hasEvents = isNonEmpty(events);
+      return {
+        date,
+        events,
+        hasEvents,
+        isSelected: predicates.isSelectedDate(date),
+        isDisabled: props.isDisabled || !predicates.isSelectableDate(date),
+        number: date.getDate(),
+        ariaLabel: date.toLocaleDateString(),
+        classes: getDateClasses(date, hasEvents)
+      };
+    }));
+    const generateCell = getGenerateCell(props);
+    return () => {
+      return h('tr', {
+        class: 'datepicker-row'
+      }, props.showWeekNumber ? [generateWeekNumber(props.weekNumber), ...cells.value.map(generateCell)] : cells.value.map(generateCell));
+    };
+  }
+
+});
+//# sourceMappingURL=BDatepickerTableRow.js.map