@mobileaction/action-kit 1.42.7-beta.2 → 1.42.7-beta.3

package/src/components/date-picker-2/index.vue

@@ -0,0 +1,302 @@
+<script setup lang="ts">
+import { computed, ref, nextTick, useSlots } from 'vue';
+import { MaDatePickerProps, MaDefaultDateFormat, MaDefaultVisibleDateFormat, UI, DatePickerConfig } from './types';
+import { useDatePickerFormat } from './composables/useDatePickerFormat';
+
+import VueDatePicker from '@vuepic/vue-datepicker';
+import CalendarSelect from './components/calendarSelect.vue';
+import { MaIcon, MaButton, MaBadge } from '@/index';
+
+const props = withDefaults(defineProps<MaDatePickerProps>(), {
+    value: null,
+    teleport: true,
+    disabled: false,
+    format: MaDefaultVisibleDateFormat,
+    valueFormat: MaDefaultDateFormat,
+    presetDates: () => [],
+    size: 'small',
+    preventMinMaxNavigation: true,
+    clearable: false,
+    presetLocation: 'left',
+    applyButtonText: 'Apply',
+    multiCalendars: false,
+    position: 'center',
+    autoPosition: true,
+    hideCalendarIcon: false,
+    overlayClassName: undefined,
+});
+const slots = useSlots();
+const emit = defineEmits([
+    'update:value',
+    'openChange',
+    'change',
+    'opened',
+    'closed',
+    'cleared',
+    'focus',
+    'blur',
+    'rangeStart',
+    'rangeEnd',
+]);
+defineExpose({
+    open: () => datepickerInput.value.openMenu(),
+    close: () => datepickerInput.value.closeMenu(),
+    toggle: () => datepickerInput.value.toggleMenu(),
+    clear: () => datepickerInput.value.clearValue(),
+    selectDate: () => selectDate(),
+});
+
+const { modelValue, visibleFormat, formatQuarter } = useDatePickerFormat(props, emit);
+
+const datepickerInput = ref();
+const isOpened = ref(false);
+
+const selectorClasses = computed(() => ([
+    'ma-datepicker-2',
+    `ma-datepicker-2--${props.size}`,
+    { 'ma-datepicker-2--borderless': props.borderless },
+    { 'ma-datepicker-2--disabled': props.disabled },
+    { 'ma-datepicker-2--range': props.range },
+    { 'ma-datepicker-2--opened': isOpened.value },
+    { 'ma-datepicker-2--readonly': props.readonly },
+    { 'ma-datepicker-2--clearable': props.clearable && props.value },
+]));
+
+const UiConf = computed(() => ({
+    ...UI,
+    menu: [
+        'ma-calendar-menu',
+      `ma-preset-${props.presetLocation}`,
+      props.presetDates.length ? 'has-preset-dates' : '',
+      props.multiCalendars ? 'ma-multi-calendar' : '',
+      props.overlayClassName || '',
+    ].join(' '),
+}));
+
+const presetDates = computed(() => props.presetDates.map((date) => ({
+    ...date,
+    slot: date?.slot || 'ma-calendar-preset',
+})));
+
+const handleCleared = () => emit('cleared');
+const handleFocus = () => emit('focus');
+const handleBlur = () => emit('blur');
+const rangeStart = () => emit('rangeStart');
+const rangeEnd = () => emit('rangeEnd');
+
+const getArrowIcon = (isMenuOpen: boolean) => isMenuOpen? 'chevron-up': 'chevron-down';
+
+const handleOpened = async () => {
+    isOpened.value = true;
+    await nextTick();
+    datepickerInput.value.onScroll(); // added for positioning fix
+    emit('opened');
+    emit('openChange', true);
+};
+const handleClosed = () => {
+    isOpened.value = false;
+    emit('closed');
+    emit('openChange', false);
+};
+
+const selectDate = () => datepickerInput.value.selectDate();
+
+const isApplyDisabled = (value: Date | Date[] | null) => {
+    if (Array.isArray(value)) {
+        return value.length < 2;
+    }
+    return !value;
+};
+
+</script>
+<template>
+  <vue-date-picker
+    v-bind="$attrs"
+    ref="datepickerInput"
+    v-model="modelValue"
+    :class="selectorClasses"
+    :teleport="props.teleport"
+    :disabled="props.disabled"
+    :disabled-dates="props.disabledDates"
+    :readonly="props.readonly"
+    :format="visibleFormat"
+    :week-picker="props.weekPicker"
+    :month-picker="props.monthPicker"
+    :quarter-picker="props.quarterPicker"
+    :year-picker="props.yearPicker"
+    :auto-apply="props.autoApply"
+    :placeholder="props.placeholder"
+    :locale="props.locale"
+    :range="props.range"
+    :preset-dates="presetDates"
+    :enable-time-picker="false"
+    :min-date="props.minDate"
+    :max-date="props.maxDate"
+    :prevent-min-max-navigation="props.preventMinMaxNavigation"
+    :start-date="props.startDate"
+    :focus-start-date="props.focusStartDate"
+    :allowed-dates="props.allowedDates"
+    :clearable="props.clearable"
+    :month-change-on-scroll="false"
+    :ui="UiConf"
+    :multi-calendars="props.multiCalendars"
+    :config="DatePickerConfig"
+    :position="props.position"
+    :auto-position="props.autoPosition"
+    @open="handleOpened"
+    @closed="handleClosed"
+    @cleared="handleCleared"
+    @focus="handleFocus"
+    @blur="handleBlur"
+    @range-start="rangeStart"
+    @range-end="rangeEnd"
+  >
+    <template #dp-input="{ value, isMenuOpen }">
+      <div class="ma-selector">
+        <ma-icon
+          v-if="!props.hideCalendarIcon"
+          name="calendar"
+          class="ma-calendar-icon"
+        />
+        <slot
+          v-if="slots?.input"
+          name="input"
+          :value="value"
+          :is-menu-open="isMenuOpen"
+        />
+        <span
+          v-else-if="value"
+          class="ma-value"
+        >
+          {{ value }}
+        </span>
+        <span
+          v-else-if="props.placeholder"
+          class="ma-placeholder"
+        >
+          {{ props.placeholder }}
+        </span>
+        <div class="ma-arrow-icon">
+          <ma-icon
+            :name="getArrowIcon(isMenuOpen)"
+          />
+        </div>
+      </div>
+    </template>
+    <template #clear-icon="{ clear }">
+      <ma-icon
+        name="close"
+        class="ma-clear-icon"
+        @click="clear"
+      />
+    </template>
+    <template
+      v-if="!props.monthPicker && !props.yearPicker"
+      #month-year="{
+        month,
+        year,
+        months,
+        years,
+        updateMonthYear,
+        handleMonthYearChange
+      }"
+    >
+      <ma-button
+        icon="chevron-left"
+        variant="stroke"
+        size="x-small"
+        @click="handleMonthYearChange(false)"
+      />
+      <div class="ma-date-selectors">
+        <calendar-select
+          :update-month-year="updateMonthYear"
+          :options="months"
+          :month="month"
+          :year="year"
+          date-type="month"
+        />
+        <calendar-select
+          :update-month-year="updateMonthYear"
+          :options="years"
+          :month="month"
+          :year="year"
+          date-type="year"
+        />
+      </div>
+      <ma-button
+        icon="chevron-right"
+        variant="stroke"
+        size="x-small"
+        @click="handleMonthYearChange(true)"
+      />
+    </template>
+    <template #quarter="{ value }">
+      <span>{{ formatQuarter(value) }}</span>
+    </template>
+    <template #arrow-left>
+      <ma-button
+        icon="chevron-left"
+        variant="stroke"
+        size="x-small"
+      />
+    </template>
+    <template #arrow-right>
+      <ma-button
+        icon="chevron-right"
+        variant="stroke"
+        size="x-small"
+      />
+    </template>
+    <template #ma-calendar-preset="{ label, value, presetDate }">
+      <slot
+        name="ma-calendar-preset"
+        :label="label"
+        :value="value"
+        :preset-date="presetDate"
+      />
+      <ma-badge
+        v-if="!slots?.['ma-calendar-preset']"
+        class="ma-preset-date"
+        variant="dark"
+        size="small"
+        role="button"
+        type="secondary"
+        :tabindex="0"
+        @click="presetDate(value)"
+        @keydown.enter.prevent="presetDate(value)"
+        @keydown.space.prevent="presetDate(value)"
+      >
+        {{ label }}
+      </ma-badge>
+    </template>
+    <template #action-preview>
+      <slot name="description" />
+    </template>
+    <template #action-buttons="{ value }">
+      <slot
+        name="action-buttons"
+        :value="value"
+      />
+      <ma-button
+        v-if="!slots?.['action-buttons']"
+        :disabled="isApplyDisabled(value)"
+        variant="stroke"
+        tabindex="0"
+        title="Apply"
+        class="ma-apply-button"
+        @click="selectDate"
+      >
+        {{ props.applyButtonText }}
+      </ma-button>
+    </template>
+    <template #day="{ day }">
+      <div class="ma-cell-day">
+        {{ day }}
+      </div>
+    </template>
+    <template #menu-header>
+      <slot name="menu-header" />
+    </template>
+  </vue-date-picker>
+</template>
+<style lang="scss" src="./assets/styles.scss"></style>

package/src/components/date-picker-2/stories/constants.ts

@@ -0,0 +1,116 @@
+import { ref } from 'vue';
+import type { Meta, StoryFn } from '@storybook/vue3';
+
+import { MaDatePicker2 } from '@/index';
+import { MaDatePickerPositions, MaDatePickerPresetLocations, MaDatePickerSizes, MaDatePickerVerticalPositions } from '../types';
+
+export const baseConfig: Meta<typeof MaDatePicker2> = {
+    component: MaDatePicker2,
+    parameters: {
+        docs: {
+            description: {
+                component: `<p>
+                Date & Range pickers are in the same component based by <a href="https://vue3datepicker.com/" target="_blank">Vue Datepicker</a>.</p><p>
+                Figma Designs <a href="https://www.figma.com/design/LsEcZ7CR3mf1vzBpCRgN7m/Design-Foundation_VD?node-id=7532-90942&t=c05BjSjM0cTPhJQO-4" target="_blank">here!</a></p><p>All date formats should follow the <a href="https://day.js.org/docs/en/display/format" target="_blank">day.js format</a></p>`,
+            },
+        },
+    },
+    argTypes: {
+        size: {
+            control: 'select',
+            options: MaDatePickerSizes,
+        },
+        position: {
+            control: 'select',
+            options: MaDatePickerPositions,
+        },
+        autoPosition: {
+            control: 'select',
+            options: MaDatePickerVerticalPositions,
+        },
+        presetLocation: {
+            control: 'select',
+            options: MaDatePickerPresetLocations,
+        },
+        focusStartDate: {
+            defaultValue: false,
+            control: { type: 'boolean' },
+        },
+    },
+};
+
+export const Template: StoryFn = (args: any) => ({
+    components: { MaDatePicker2 },
+    setup() {
+        const datepickerInput = ref();
+        const handleChange = (value: any) => {
+            console.info('the "change" event has been triggered ', value, args);
+            args.value = value;
+        };
+        const handleEvent = (eventName: string) => {
+            console.info(`"${eventName}" event has been triggered`);
+        };
+
+        return {
+            args,
+            handleChange,
+            handleEvent,
+            datepickerInput,
+        };
+    },
+    template: `
+      <div class="flex flex-col gap-4">
+        <ma-date-picker-2
+          class="w-20"
+          v-bind="args"
+          @change="handleChange"
+          @open="handleEvent('open')"
+          @closed="handleEvent('closed')"
+          @cleared="handleEvent('cleared')"
+          ref="datepickerInput"
+        />
+        <div v-if="args.value">Value: {{ args.value }}</div>
+      </div>
+    `,
+});
+
+export const TemplateCustomSlots: StoryFn = (args: any) => ({
+    components: { MaDatePicker2 },
+    setup() {
+        const handleChange = (e: string) => {
+            args.value = e;
+        };
+        return { args, handleChange };
+    },
+    template: `
+    <div class="flex flex-col gap-4">
+      <ma-date-picker-2 v-bind="args" @change="handleChange" class="w-96">
+        <template #input="{ value }">
+          <div class="text-xs leading-3">input slot with value: {{ value }} </div>
+        </template>
+        <template #description>
+          <div>Place a description </div>
+        </template>
+        <template #action-buttons="{ value }">
+          <p>#action-buttons</p>
+        </template>
+        <template #menu-header>
+          <p>menu-header</p>
+        </template>
+        <template #ma-calendar-preset="{ label, value, presetDate }">
+          <div class="w-[200px]">
+            <span
+              role="button"
+              :tabindex="0"
+              @click="presetDate(value)"
+              @keyup.enter.prevent="presetDate(value)"
+              @keyup.space.prevent="presetDate(value)">
+            {{ label }} (Preset Date)
+          </span>
+          </div>
+        </template>
+      </ma-date-picker-2>
+      <div v-if="args.value">Value: {{ args.value }}</div>
+    </div>
+`,
+});

package/src/components/date-picker-2/stories/default.stories.ts

@@ -0,0 +1,172 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { baseConfig, Template, TemplateCustomSlots } from './constants';
+import dayjs from 'dayjs';
+import weekday from 'dayjs/plugin/weekday';
+import isoWeek from 'dayjs/plugin/isoWeek';
+import localeData from 'dayjs/plugin/localeData';
+
+import { MaDatePicker2 } from '@/index';
+import { MaDefaultDateFormat } from '../types';
+
+dayjs.extend(weekday);
+dayjs.extend(localeData);
+dayjs.extend(isoWeek);
+
+const meta: Meta<typeof MaDatePicker2> = {
+    title: 'Core/MaDatePicker2/Date',
+    ...baseConfig,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof MaDatePicker2>;
+
+const presetDates = [
+    { label: 'Today', value: new Date() },
+    { label: 'Last 7 days', value: dayjs().subtract(1, 'week').format(MaDefaultDateFormat) },
+    { label: 'Last 14 days', value: dayjs().subtract(14, 'days').format(MaDefaultDateFormat) },
+    { label: 'Last 30 days', value: dayjs().subtract(1, 'month').format(MaDefaultDateFormat) },
+    { label: 'Last week', value: dayjs().subtract(1, 'week').format(MaDefaultDateFormat) },
+    { label: 'Last month', value: dayjs().subtract(1, 'month').format(MaDefaultDateFormat) },
+    { label: 'Last year', value: dayjs().subtract(1, 'year').format(MaDefaultDateFormat) },
+    { label: 'Today', value: new Date() },
+    { label: 'Last 7 days', value: dayjs().subtract(1, 'week').format(MaDefaultDateFormat) },
+    { label: 'Last 14 days', value: dayjs().subtract(14, 'days').format(MaDefaultDateFormat) },
+    { label: 'Last 30 days', value: dayjs().subtract(1, 'month').format(MaDefaultDateFormat) },
+    { label: 'Last week', value: dayjs().subtract(1, 'week').format(MaDefaultDateFormat) },
+    { label: 'Last month', value: dayjs().subtract(1, 'month').format(MaDefaultDateFormat) },
+    { label: 'Last year', value: dayjs().subtract(1, 'year').format(MaDefaultDateFormat) },
+];
+
+export const Default: Story = Template.bind({});
+Default.args = {
+    value: null,
+    placeholder: 'Select date',
+};
+
+export const Disabled: Story = Template.bind({});
+Disabled.args = {
+    value: dayjs().format('YYYY-MM-DD'),
+    disabled: true,
+};
+
+export const ReadOnly: Story = Template.bind({});
+ReadOnly.args = {
+    value: dayjs().format('YYYY-MM-DD'),
+    readonly: true,
+};
+
+export const DisabledDates: Story = Template.bind({});
+DisabledDates.args = {
+    value: null,
+    disabledDates: (date) => new Date(date).getTime() > new Date().getTime(),
+};
+
+export const WithoutTeleport: Story = Template.bind({});
+WithoutTeleport.args = {
+    value: null,
+    teleport: false,
+};
+
+export const DateFormat: Story = Template.bind({});
+DateFormat.args = {
+    value: dayjs().format('YYYY-MM-DD'),
+    format: 'MMM D, YYYY',
+};
+
+export const ValueFormat: Story = Template.bind({});
+ValueFormat.args = {
+    value: dayjs().format('DD/MM/YYYY'),
+    format: 'MMM D, YYYY',
+    valueFormat: 'DD/MM/YYYY',
+};
+
+export const WithoutValueFormat: Story = Template.bind({});
+WithoutValueFormat.args = {
+    value: new Date(),
+    format: 'dd MMMM YYYY',
+    valueFormat: null,
+};
+
+export const WeekPicker: Story = Template.bind({});
+WeekPicker.args = {
+    value: [
+        new Date(dayjs().startOf('month').startOf('isoWeek').format('YYYY-MM-DD')),
+        new Date(dayjs().startOf('month').endOf('isoWeek').format('YYYY-MM-DD')),
+    ],
+    weekPicker: true,
+};
+
+export const MonthPicker: Story = Template.bind({});
+MonthPicker.args = {
+    value: { 'month': (Number(dayjs().format('M')) -1), 'year': dayjs().format('YYYY') },
+    monthPicker: true,
+    format: 'MMM - YYYY',
+    disabledDates: (date) => new Date(date).getTime() > new Date().getTime(),
+    presetDates: [
+        { label: 'Last month', value: dayjs().subtract(1, 'month').format(MaDefaultDateFormat) },
+    ],
+};
+
+export const QuarterPicker: Story = Template.bind({});
+QuarterPicker.args = {
+    value: dayjs().startOf('year').format('YYYY-MM-DD'),
+    quarterPicker: true,
+};
+
+export const YearPicker: Story = Template.bind({});
+YearPicker.args = {
+    value: dayjs().format('YYYY'),
+    yearPicker: true,
+};
+
+export const AutoApply: Story = Template.bind({});
+AutoApply.args = {
+    autoApply: true,
+};
+
+export const Borderless: Story = Template.bind({});
+Borderless.args = {
+    borderless: true,
+    placeholder: 'Select a date...',
+};
+
+export const PresetDates: Story = Template.bind({});
+PresetDates.args = {
+    presetDates,
+    position: 'left',
+};
+
+export const PresetBottom: Story = Template.bind({});
+PresetBottom.args = {
+    presetDates,
+    presetLocation: 'bottom',
+    position: 'left',
+};
+
+export const MinMaxDates: Story = Template.bind({});
+MinMaxDates.args = {
+    minDate: dayjs().subtract(7, 'days').format('YYYY-MM-DD'),
+    maxDate: dayjs().add(1, 'day').format('YYYY-MM-DD'),
+};
+
+export const MultiCalendars: Story = Template.bind({});
+MultiCalendars.args = {
+    multiCalendars: true,
+};
+
+export const FocusStartDate: Story = Template.bind({});
+FocusStartDate.args = {
+    value: dayjs().format(MaDefaultDateFormat),
+    focusStartDate: true,
+    startDate: '2021-01-01',
+};
+
+export const CustomSlots: Story = TemplateCustomSlots.bind({});
+CustomSlots.args = {
+    value: dayjs().format(MaDefaultDateFormat),
+    position: 'left',
+    presetDates: [
+        { label: 'Today', value: new Date() },
+    ],
+};