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

package/src/components/date-picker-2/assets/calendar.scss

@@ -0,0 +1,43 @@
+.dp__calendar_header {
+  @apply relative flex justify-center items-center whitespace-nowrap;
+  .dp__calendar_header_item {
+    @apply text-center flex-grow box-border;
+  }
+}
+
+.dp__calendar_row {
+  @apply flex justify-center items-center;
+  .dp__calendar_item {
+    &:first-of-type {
+      .dp__range_between {
+        @apply rounded-l-lg #{!important};
+      }
+    }
+    &:last-of-type {
+      .dp__range_between {
+        @apply rounded-r-lg #{!important};
+      }
+    }
+  }
+}
+.dp__calendar_item {
+  @apply text-center grow box-border;
+}
+.dp__calendar {
+  @apply relative;
+}
+.dp__tooltip_content {
+  @apply whitespace-nowrap;
+}
+.dp__tooltip_text {
+  @apply flex items-center flex-row flex-nowrap;
+}
+.dp__instance_calendar {
+  @apply relative w-full flex-1;
+}
+.dp__flex_display[data-dp-mobile] {
+  @apply flex-col;
+}
+.dp--flex-display-collapsed {
+  @apply flex-col;
+}

package/src/components/date-picker-2/assets/datepicker-menu.scss

@@ -0,0 +1,242 @@
+.dp--menu-wrapper {
+  @apply absolute z-[100];
+  .ma-calendar-menu {
+    @apply select-none box-border bg-white min-w-fit rounded-xl outline-none;
+    box-shadow:
+      0px 314px 88px 0px rgba(0, 0, 0, 0),
+      0px 201px 80px 0px rgba(0, 0, 0, 0.01),
+      0px 113px 68px 0px rgba(0, 0, 0, 0.05),
+      0px 50px 50px 0px rgba(0, 0, 0, 0.09),
+      0px 13px 28px 0px rgba(0, 0, 0, 0.1);
+
+    &::before,
+    &::after {
+      @apply box-border;
+    }
+
+    &:focus {
+      @apply outline-none;
+    }
+
+    .dp__flex_display {
+      @apply flex;
+    }
+
+    .dp__arrow_top {
+      @apply hidden;
+    }
+
+    .dp__menu_content_wrapper {
+      @apply flex;
+    }
+
+    .dp--preset-range {
+      @apply block w-full text-left whitespace-nowrap;
+
+      &:hover {
+        @apply cursor-pointer;
+      }
+    }
+
+    &.ma-preset-bottom {
+      .dp__menu_content_wrapper {
+        @apply flex-col-reverse;
+        .dp--preset-dates {
+          @apply flex-row w-full max-w-[256px] overflow-x-auto border-r-0 border-t p-3.5;
+        }
+      }
+    }
+
+    &.ma-multi-calendar {
+      &.ma-preset-bottom {
+        .dp__menu_content_wrapper {
+          .dp--preset-dates {
+            @apply max-w-[512px];
+          }
+        }
+      }
+    }
+
+    &.dp__menu_index {
+      @apply z-[100];
+    }
+
+    .dp--header-wrap {
+      @apply flex flex-nowrap w-full px-4 py-2 border-b border-gray-100 h-9;
+      .dp__month_year_wrap {
+        @apply w-full flex items-center flex-nowrap;
+        .ma-date-selectors {
+          @apply flex items-start gap-3 mx-auto;
+          .ma-select {
+            @apply pl-0 min-h-max;
+            &::before {
+              @apply hidden;
+            }
+          }
+        }
+      }
+    }
+
+    .ma-calendar {
+      @apply px-4 my-2 w-[256px] mx-auto;
+      .dp__calendar {
+        @apply flex flex-col gap-1;
+        &_header {
+          &_item {
+            @apply flex items-center justify-center text-gray-500 text-sm font-normal w-8 h-8;
+          }
+        }
+      }
+      .ma-calendar-cell {
+        @apply w-8 h-8 text-sm leading-5 font-medium text-gray-900 cursor-pointer rounded-lg relative flex items-center justify-center;
+        &.dp__today {
+          @apply font-semibold text-primary-dark border border-gray-200 rounded-lg;
+        }
+        .ma-cell-day {
+          @apply border border-transparent w-full h-full flex items-center justify-center;
+        }
+        &.dp__cell_offset {
+          @apply text-gray-400;
+        }
+        &.dp__active_date {
+          @apply bg-primary-dark text-white;
+        }
+        &:hover {
+          &:not(
+              .dp__active_date,
+              .dp__range_end,
+              .dp__range_start,
+              .dp__date_hover_end,
+              .dp__date_hover_start,
+              .dp__cell_auto_range_start,
+              .dp__cell_auto_range_end,
+              .dp__cell_disabled,
+              .dp__cell_disabled.dp__cell_offset
+            ) {
+            .ma-cell-day {
+              @apply text-primary-dark border-gray-200 rounded-lg;
+            }
+          }
+        }
+
+        &.dp__range_between,
+        &.dp__range_between_week,
+        &.dp__cell_auto_range {
+          &:not(
+              .dp__active_date,
+              .dp__range_end,
+              .dp__range_start,
+              .dp__date_hover_end,
+              .dp__date_hover_start,
+              .dp__cell_auto_range_start,
+              .dp__cell_auto_range_end
+            ) {
+            @apply bg-gray-100 rounded-none border-none;
+          }
+          &:not(.dp__cell_auto_range_start, .dp__cell_auto_range_end) {
+            &:hover {
+              .ma-cell-day {
+                @apply w-7 h-7 bg-white border border-solid border-gray-200 rounded-lg text-primary-dark;
+              }
+            }
+          }
+        }
+        &.dp__range_end,
+        &.dp__cell_auto_range_end,
+        &.dp__date_hover_end {
+          &::before {
+            @apply absolute content-[''] w-1/2 h-full bg-gray-100 -z-10 left-0;
+          }
+        }
+        &.dp__range_start,
+        &.dp__cell_auto_range_start,
+        &.dp__date_hover_start {
+          &::before {
+            @apply absolute content-[''] w-1/2 h-full bg-gray-100 -z-10 right-0;
+          }
+        }
+
+        &.dp__range_start,
+        &.dp__range_end,
+        &.dp__date_hover_end,
+        &.dp__date_hover_start,
+        &.dp__cell_auto_range_start,
+        &.dp__cell_auto_range_end {
+          @apply bg-primary-dark text-white relative;
+        }
+
+        &.dp__cell_disabled,
+        &.dp__cell_disabled.dp__cell_offset {
+          @apply text-gray-300 cursor-not-allowed;
+        }
+      }
+    }
+
+    &.has-preset-dates {
+      .dp--preset-dates {
+        @apply min-w-[114px] p-4 pr-1 flex flex-col gap-3 border-r border-gray-100 max-h-[18rem] overflow-y-auto;
+        .ma-badge {
+          @apply w-fit flex-none;
+        }
+        &::-webkit-scrollbar {
+          @apply w-1 h-1;
+        }
+        &::-webkit-scrollbar-track {
+          @apply bg-transparent;
+        }
+        &::-webkit-scrollbar-thumb {
+          @apply outline-none rounded-xl bg-gray-200;
+        }
+      }
+    }
+
+    .dp__action_row {
+      @apply flex gap-1 items-center justify-between px-4 py-2 border-t border-gray-100;
+      .dp__selection_preview {
+        @apply text-xs leading-4;
+      }
+    }
+  }
+
+  %__dp_menu_readonly_disabled {
+    @apply absolute z-[100] inset-0;
+  }
+
+  .dp__menu_disabled {
+    @extend %__dp_menu_readonly_disabled;
+    @apply cursor-not-allowed;
+  }
+
+  .dp__menu_readonly {
+    @extend %__dp_menu_readonly_disabled;
+    @apply bg-transparent cursor-default;
+  }
+
+  .dp-menu-loading {
+    @extend %__dp_menu_readonly_disabled;
+    @apply cursor-default;
+  }
+
+  .dp--menu-load-container {
+    @apply flex h-full w-full justify-center items-center;
+  }
+
+  .dp--menu-loader {
+    @apply w-12 h-12 rounded-full inline-block box-border absolute;
+    animation: dp-load-rotation 1s linear infinite;
+  }
+
+  @keyframes dp-load-rotation {
+    0% {
+      transform: rotate(0deg);
+    }
+
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  .dp__action_extra {
+    @apply text-center;
+  }
+}

package/src/components/date-picker-2/assets/input.scss

@@ -0,0 +1,130 @@
+.ma-datepicker-2 {
+  @apply min-w-40 relative;
+
+  > div {
+    @apply max-w-full;
+    .dp__input_wrap {
+      @apply flex flex-nowrap max-w-full;
+    }
+  }
+
+  .ma-selector {
+    @apply bg-white flex items-center flex-nowrap justify-between gap-1 w-full border border-gray-300 rounded-lg p-[7px] pl-[9px] cursor-pointer transition-colors duration-300 relative;
+    .ma-value {
+      @apply truncate max-w-full text-gray-900 mr-auto font-medium transition-all duration-300 select-none;
+    }
+    .ma-placeholder {
+      @apply text-gray-500 font-normal mr-auto truncate max-w-full select-none;
+    }
+    .ma-icon {
+      @apply flex-none text-gray-400 transition-colors duration-300;
+    }
+
+    .ma-arrow-icon {
+      @apply w-4 h-4;
+      .ma-icon {
+        @apply w-4 h-4 text-gray-500;
+      }
+    }
+
+    &:hover {
+      @apply bg-blue-25 border-primary-dark-blue;
+      .ma-placeholder {
+        @apply font-medium;
+      }
+      .ma-icon {
+        @apply text-gray-500;
+      }
+    }
+  }
+
+  .dp--clear-btn {
+    @apply hidden absolute right-2 top-[calc(50%_-_.5rem)] cursor-pointer text-gray-500;
+    .ma-clear-icon {
+      @apply w-4 h-4;
+    }
+  }
+
+  &--clearable {
+    &:hover {
+      .dp--clear-btn {
+        @apply block;
+      }
+      .ma-arrow-icon {
+        @apply opacity-0;
+      }
+    }
+  }
+
+  &--opened {
+    .dp__input_wrap {
+      .ma-selector {
+        @apply bg-white border-primary-dark-blue;
+        &::before {
+          @apply content-[''] w-[calc(100%_+_10px)] h-[calc(100%_+_10px)] border-2 border-gray-100 rounded-xl absolute -left-[5px] -top-[5px];
+        }
+        .ma-value,
+        .ma-placeholder {
+          @apply font-medium text-gray-900;
+        }
+        .ma-icon {
+          @apply text-gray-500;
+        }
+        .ma-arrow-icon {
+          .ma-icon {
+            @apply text-primary-dark;
+          }
+        }
+      }
+    }
+  }
+
+  &--small {
+    .ma-selector {
+      .ma-value,
+      .ma-placeholder {
+        @apply text-xs leading-4;
+      }
+      .ma-calendar-icon {
+        @apply w-4 h-4;
+      }
+    }
+  }
+
+  &--medium {
+    .ma-selector {
+      .ma-value,
+      .ma-placeholder {
+        @apply text-sm leading-5;
+      }
+      .ma-calendar-icon {
+        @apply w-5 h-5;
+      }
+    }
+  }
+
+  &--borderless {
+    .ma-selector {
+      @apply border-none;
+      &:hover {
+        @apply bg-gray-100;
+      }
+    }
+  }
+
+  &--range {
+    @apply min-w-48;
+  }
+
+  &--disabled {
+    .ma-selector {
+      @apply cursor-not-allowed;
+    }
+  }
+
+  &--readonly {
+    .ma-selector {
+      @apply cursor-default;
+    }
+  }
+}

package/src/components/date-picker-2/assets/quarter-picker.scss

@@ -0,0 +1,44 @@
+.dp-quarter-picker-wrap {
+  @apply flex flex-col gap-2 h-full;
+  @apply min-h-max #{!important};
+
+  .dp--year-mode-picker {
+    @apply px-4 py-2 border-b border-gray-100 flex items-center justify-between;
+  }
+
+  .dp--quarter-items {
+    @apply flex px-4 pb-2 items-center justify-center;
+    .dp--qr-btn {
+      @apply px-4 py-1.5 rounded-lg transition-colors duration-300 cursor-pointer border border-transparent;
+      > span {
+        @apply px-1 py-1 border border-solid border-transparent;
+      }
+
+      &:not(.dp--highlighted, .dp--qr-btn-active, .dp--qr-btn-disabled, .dp--qr-btn-between) {
+        @apply bg-none;
+      }
+
+      &:hover:not(.dp--qr-btn-active, .dp--qr-btn-disabled) {
+        &:not(.dp--qr-btn-between) {
+          @apply bg-white border border-solid border-gray-200 rounded-lg text-primary-dark;
+        }
+        &.dp--qr-btn-between,
+        &.dp--qr-btn-active {
+          > span {
+            @apply bg-white border-gray-200 rounded-lg text-primary-dark;
+          }
+        }
+      }
+      &.dp--qr-btn-active {
+        @apply bg-primary-dark text-white;
+      }
+
+      &.dp--qr-btn-between {
+        @apply bg-gray-100 text-gray-900 rounded-none;
+      }
+      &.dp--qr-btn-disabled {
+        @apply text-gray-300 cursor-not-allowed bg-transparent;
+      }
+    }
+  }
+}

package/src/components/date-picker-2/assets/selection-overlay.scss

@@ -0,0 +1,124 @@
+.dp__overlay {
+  @apply w-full transition-opacity duration-100 ease-out z-[100] box-border bg-white;
+}
+
+.dp--overlay-absolute {
+  @apply absolute h-full top-0 left-0;
+}
+
+.dp--overlay-relative {
+  @apply relative;
+}
+
+.dp__overlay_container::-webkit-scrollbar-track {
+  @apply shadow-md bg-gray-100;
+}
+
+.dp__overlay_container::-webkit-scrollbar {
+  @apply w-1 bg-gray-200;
+}
+
+.dp__overlay_container::-webkit-scrollbar-thumb {
+  @apply bg-gray-200 rounded-xl;
+}
+
+.dp__overlay:focus {
+  @apply border-none outline-none;
+}
+
+.dp__container_flex {
+  @apply flex;
+}
+
+.dp__container_block {
+  @apply block;
+  .dp__overlay_row {
+    &:not(:last-child) {
+      @apply mb-1;
+    }
+  }
+}
+
+.dp__overlay_container {
+  @apply flex-col overflow-y-auto h-[var(--dp-overlay-height)] min-w-[256px];
+}
+
+.dp__time_picker_overlay_container {
+  @apply h-full;
+}
+
+.dp__overlay_row {
+  @apply px-4 py-0 box-border flex flex-wrap w-full max-w-full items-center mx-auto;
+}
+
+.dp__flex_row {
+  @apply flex-1;
+}
+
+.dp__overlay_col {
+  @apply box-border w-1/3 whitespace-nowrap text-sm font-medium text-gray-900  h-full flex items-center justify-center max-h-10;
+  &:first-child {
+    .dp__cell_in_between {
+      @apply rounded-l-lg #{!important};
+    }
+  }
+  &:last-child {
+    .dp__cell_in_between {
+      @apply rounded-r-lg #{!important};
+    }
+  }
+}
+
+.dp__overlay_cell_pad {
+  @apply p-0 text-center;
+}
+
+.dp__overlay_cell_active {
+  @apply cursor-pointer bg-primary-dark text-white;
+}
+
+.dp__overlay_cell {
+  @apply cursor-pointer text-center;
+}
+
+.dp__overlay_cell_pad,
+.dp__overlay_cell {
+  @apply flex-1 h-full flex items-center justify-center rounded-lg transition-colors duration-300 min-h-10 border border-transparent;
+  &:hover {
+    &:not(.dp__overlay_cell_active, .dp__cell_in_between) {
+      @apply text-primary-dark border-gray-200 rounded-lg;
+    }
+  }
+  &.dp__cell_in_between {
+    @apply bg-gray-100 rounded-none;
+    &:hover {
+      @apply text-gray-900;
+    }
+  }
+}
+
+.dp__over_action_scroll {
+  @apply right-1 box-border;
+}
+
+.dp__overlay_cell_disabled {
+  @apply cursor-not-allowed;
+}
+
+.dp__overlay_cell_active_disabled {
+  @apply cursor-not-allowed;
+}
+
+.dp__selection_grid_header {
+  @apply py-2 px-4 border-b border-gray-100;
+  .dp--year-mode-picker {
+    @apply flex items-center justify-between;
+  }
+  .dp__overlay_container {
+    .dp__overlay_row {
+      .dp__overlay_col {
+        @apply h-10;
+      }
+    }
+  }
+}

package/src/components/date-picker-2/assets/styles.scss

@@ -0,0 +1,6 @@
+@import url("./input.scss");
+@import url("./datepicker-menu.scss");
+@import url("./calendar.scss");
+@import url("./selection-overlay.scss");
+@import url("./transitions.scss");
+@import url("./quarter-picker.scss");

package/src/components/date-picker-2/assets/transitions.scss

@@ -0,0 +1,61 @@
+.calendar-next-enter-active,
+.calendar-next-leave-active,
+.calendar-prev-enter-active,
+.calendar-prev-leave-active {
+  @apply transition duration-100 ease-out;
+}
+
+.calendar-next-enter-from {
+  @apply opacity-0 translate-x-5;
+}
+
+.calendar-next-leave-to {
+  @apply opacity-0 -translate-x-5;
+}
+
+.calendar-prev-enter-from {
+  @apply opacity-0 -translate-x-5;
+}
+
+.calendar-prev-leave-to {
+  @apply opacity-0 translate-x-5;
+}
+
+.dp-menu-appear-bottom-enter-active,
+.dp-menu-appear-bottom-leave-active,
+.dp-menu-appear-top-enter-active,
+.dp-menu-appear-top-leave-active,
+.dp-slide-up-enter-active,
+.dp-slide-up-leave-active,
+.dp-slide-down-enter-active,
+.dp-slide-down-leave-active {
+  transition:
+    transform 0.1s ease-in-out,
+    opacity 0.1s ease-in-out;
+}
+
+.dp-menu-appear-top-enter-from,
+.dp-menu-appear-top-leave-to,
+.dp-slide-down-leave-to,
+.dp-slide-up-enter-from {
+  @apply opacity-0 translate-y-1;
+}
+
+.dp-menu-appear-bottom-enter-from,
+.dp-menu-appear-bottom-leave-to,
+.dp-slide-down-enter-from,
+.dp-slide-up-leave-to {
+  @apply opacity-0 -translate-y-1;
+}
+
+.dp--arrow-btn-nav {
+  @apply transition-all duration-100 ease-in;
+}
+
+.dp--highlighted {
+  @apply bg-primary-dark-blue;
+}
+
+.dp--hidden-el {
+  @apply invisible;
+}

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

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { MaSelect, MaSelectOption } from '@/index';
+import { computed } from 'vue';
+
+const DateTypes = ['year', 'month'];
+
+interface MonthSelectProps {
+    updateMonthYear: (month: number, year: number, fromNav?: boolean) => void,
+    month: number,
+    year: number,
+    options: Array<{text: string, value: number}>,
+    dateType: (typeof DateTypes)[number]
+}
+
+const props = withDefaults(defineProps<MonthSelectProps>(), {});
+
+const isMonth = computed(() => props.dateType === 'month');
+const value = computed(() => isMonth.value? props.month: props.year);
+
+const updateDate = (value: number) => {
+    if (isMonth.value) {
+        return props.updateMonthYear(+value, props.year);
+    }
+    props.updateMonthYear(props.month, +value);
+};
+
+</script>
+<template>
+  <ma-select
+    borderless
+    size="small"
+    :get-popup-container="(triggerNode: HTMLElement) => triggerNode.parentNode.parentNode"
+    :value="value"
+    class="w-fit"
+    :dropdown-match-select-width="120"
+    @change="updateDate"
+  >
+    <ma-select-option
+      v-for="m in options"
+      :key="m.value"
+      :value="m.value"
+      class="w-28"
+    >
+      <span class="py-1">{{ m.text }}</span>
+    </ma-select-option>
+  </ma-select>
+</template>
+
+