WDS-78 date picker fixes

.changeset/dry-weeks-compare.md

@@ -0,0 +1,5 @@
+---
+'@soramitsu-ui/ui': minor
+---
+
+**feat**(`SDatePicker`): add custom trigger support

.changeset/eleven-steaks-call.md

@@ -0,0 +1,5 @@
+---
+'@soramitsu-ui/ui': patch
+---
+
+**fix**(`SDatePicker`): add model value change on every pick

.changeset/neat-squids-pretend.md

@@ -0,0 +1,5 @@
+---
+'@soramitsu-ui/ui': minor
+---
+
+**feat**(`SDatePicker`): add support for custom shortcuts

.changeset/seven-apes-fry.md

@@ -0,0 +1,5 @@
+---
+'@soramitsu-ui/ui': patch
+---
+
+**fix**(`SDatePicker`): add some prop types export

.changeset/sharp-ligers-cross.md

@@ -0,0 +1,5 @@
+---
+'@soramitsu-ui/ui': patch
+---
+
+**fix**(`SDatePicker`): add using shortcut title when selected one

.changeset/weak-rivers-confess.md

@@ -0,0 +1,5 @@
+---
+'@soramitsu-ui/ui': patch
+---
+
+**fix**(`SDatePicker`): fix styles

packages/ui/etc/api/ui.api.md

@@ -95,6 +95,45 @@ export type ButtonType = typeof BUTTON_TYPE_VALUES[number];
 // @public (undocumented)
 export type CheckboxState = boolean | 'mixed';
 
+// @public (undocumented)
+export interface DatePickerOptions {
+    // (undocumented)
+    day?: PresetOption<Date>[];
+    // (undocumented)
+    pick?: PresetOption<Date[]>[];
+    // (undocumented)
+    range?: PresetOption<[Date, Date]>[];
+}
+
+// @public (undocumented)
+export type DatePickerType = 'day' | 'range' | 'pick';
+
+// @public (undocumented)
+export type DateState = Date;
+
+// @public (undocumented)
+export interface DateTableCell {
+    // (undocumented)
+    day: number;
+    // (undocumented)
+    end: boolean;
+    // (undocumented)
+    inRange: boolean;
+    // (undocumented)
+    month: number;
+    // (undocumented)
+    start: boolean;
+    // (undocumented)
+    text: number;
+    // (undocumented)
+    time: string | null;
+    // (undocumented)
+    type: DateTableCellType;
+}
+
+// @public (undocumented)
+export type DateTableCellType = 'normal' | 'today' | 'prev-month' | 'next-month';
+
 // @public (undocumented)
 export function defineToastsApi(): ToastsApi;
 
@@ -128,6 +167,9 @@ export interface ModalApi {
     labelledBy: string;
 }
 
+// @public (undocumented)
+export type ModelValueType = Date[] | Date | null | undefined;
+
 // @public (undocumented)
 export const NAVIGATION_MENU_API_KEY: InjectionKey<DeepReadonly<NavigationMenuApi>>;
 
@@ -151,6 +193,9 @@ export interface NavigationSubmenuApi {
 // @public (undocumented)
 export const NOTIFICATIONS_API_KEY: InjectionKey<ToastsApi>;
 
+// @public (undocumented)
+export type PickState = Date[];
+
 // @public (undocumented)
 export function plugin(): Plugin_2;
 
@@ -165,6 +210,14 @@ export interface PopoverApi {
     show: boolean;
 }
 
+// @public (undocumented)
+export interface PresetOption<T> {
+    // (undocumented)
+    label: string;
+    // (undocumented)
+    value: T;
+}
+
 // @public (undocumented)
 export const RADIO_GROUP_API_KEY: InjectionKey<RadioGroupApi>;
 
@@ -201,6 +254,22 @@ type RadioType = typeof RADIO_TYPE_VALUES extends ReadonlyArray<infer T> ? T : n
 export { RadioType as CheckboxType }
 export { RadioType }
 
+// @public (undocumented)
+export interface RangeOptionValue extends RangeState {
+    // (undocumented)
+    selectedField: string;
+}
+
+// @public (undocumented)
+export interface RangeState {
+    // (undocumented)
+    endDate: Date | null;
+    // (undocumented)
+    selecting: boolean;
+    // (undocumented)
+    startDate: Date | null;
+}
+
 // @public (undocumented)
 export type RegisteredToast = ToastRegisterParams;
 
@@ -447,16 +516,19 @@ export const SDatePicker: DefineComponent<__VLS_WithDefaults_14<__VLS_TypePropsT
 type: string;
 time: boolean;
 disabled: boolean;
+shortcuts: () => DatePickerOptions;
 }>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_14<__VLS_TypePropsToRuntimeProps_17<Props_7>, {
 type: string;
 time: boolean;
 disabled: boolean;
+shortcuts: () => DatePickerOptions;
 }>>> & {
 "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
 type: DatePickerType;
 disabled: boolean;
 time: boolean;
+shortcuts: DatePickerOptions;
 }>;
 
 // Warning: (ae-forgotten-export) The symbol "__VLS_TypePropsToRuntimeProps" needs to be exported by the entry point lib.d.ts
@@ -564,6 +636,14 @@ export interface ShowNotificationReturn {
     close: () => void;
 }
 
+// @public (undocumented)
+export interface ShowState {
+    // (undocumented)
+    month: number;
+    // (undocumented)
+    year: number;
+}
+
 // Warning: (ae-forgotten-export) The symbol "__VLS_WithDefaults" needs to be exported by the entry point lib.d.ts
 // Warning: (ae-forgotten-export) The symbol "__VLS_TypePropsToRuntimeProps" needs to be exported by the entry point lib.d.ts
 //
@@ -1506,6 +1586,16 @@ modelValue: string;
 background: TabsPanelBackgroundType;
 }>;
 
+// @public (undocumented)
+export interface StateStore {
+    // (undocumented)
+    dayState: DateState;
+    // (undocumented)
+    pickState: PickState;
+    // (undocumented)
+    rangeState: RangeState;
+}
+
 // @public
 export const Status: {
     readonly Info: "info";
@@ -1962,7 +2052,6 @@ export function useTabsPanelApi(): TabsPanelApi;
 
 // Warnings were encountered during analysis:
 //
-// dist-ts/components/DatePicker/SDatePicker.vue.d.ts:19:5 - (ae-forgotten-export) The symbol "DatePickerType" needs to be exported by the entry point lib.d.ts
 // dist-ts/components/Table/STable.vue.d.ts:61:5 - (ae-forgotten-export) The symbol "CSSObject" needs to be exported by the entry point lib.d.ts
 // dist-ts/components/Table/STable.vue.d.ts:150:5 - (ae-forgotten-export) The symbol "manualClearSelection" needs to be exported by the entry point lib.d.ts
 // dist-ts/components/Table/STable.vue.d.ts:155:5 - (ae-forgotten-export) The symbol "manualToggleRowSelection" needs to be exported by the entry point lib.d.ts

packages/ui/src/components/DatePicker/SDatePicker.vue

@@ -18,19 +18,23 @@ import {
   ShowState,
   RangeOptionValue,
   ModelValueType,
+  DatePickerOptions,
 } from './types'
 import { DatePickerApi, DATE_PICKER_API_KEY } from './api'
+import { DEFAULT_SHORTCUTS } from './consts'
 
 interface Props {
   modelValue: ModelValueType
   type?: DatePickerType
   time?: boolean
   disabled?: boolean
+  shortcuts?: DatePickerOptions
 }
 const props = withDefaults(defineProps<Props>(), {
   type: 'day',
   time: false,
   disabled: false,
+  shortcuts: () => DEFAULT_SHORTCUTS,
 })
 
 const innerModelValue = ref<ModelValueType>(props.modelValue)
@@ -83,10 +87,16 @@ const init = () => {
 const updateModelValue = () => {
   if (props.type === 'day') {
     innerModelValue.value = dayState.value
+    save()
   } else if (props.type === 'pick') {
     innerModelValue.value = pickState.value
+    save()
   } else {
     innerModelValue.value = [rangeState.startDate as Date, rangeState.endDate as Date]
+
+    if (rangeState.endDate) {
+      save()
+    }
   }
 }
 
@@ -150,8 +160,19 @@ const showStateView = computed(() => {
 // #endregion
 
 // #region OPTIONS_PANEL
-const onMenuClick = (data: Date | RangeOptionValue, label: string) => {
-  onDatePick(data)
+const onMenuClick = (data: Date | [Date, Date] | Date[], label: string) => {
+  let processedData: RangeOptionValue | Date | Date[] = data
+
+  if (Array.isArray(data) && data.length === 2) {
+    processedData = {
+      startDate: data[0],
+      endDate: data[1],
+      selecting: false,
+      selectedField: 'endDate',
+    }
+  }
+
+  onDatePick(processedData)
   updateShowedMonths()
   menuState.value = label
 }
@@ -176,6 +197,10 @@ const changeView = (viewName: string) => {
 }
 
 const headTitle = computed(() => {
+  if (menuState.value !== 'Custom') {
+    return menuState.value
+  }
+
   try {
     switch (props.type) {
       case 'day':
@@ -324,6 +349,9 @@ const updateShow = () => {
 
 const save = () => {
   emit('update:modelValue', innerModelValue.value)
+}
+const saveAndClose = () => {
+  save()
   togglePopper(false)
 }
 
@@ -345,19 +373,30 @@ else updateModelValue()
       @click-outside="togglePopper(false)"
     >
       <template #trigger>
-        <div
-          class="s-date-picker__header p-2 sora-tpg-ch2 relative pr-6"
-          :class="disabled ? 'cursor-default' : 'cursor-pointer'"
-          @keydown="updateShow"
-          @click="updateShow"
-        >
-          {{ headTitle || 'Date' }}
-          <div
-            class="arrow"
-            :class="arrowState"
+        <div>
+          <slot
+            v-bind="{
+              disabled,
+              updateShow,
+              'isPopperShown': showPopper,
+              'label': headTitle,
+            }"
           >
-            <IconArrowsChevronBottom24 />
-          </div>
+            <div
+              class="s-date-picker__header p-2 sora-tpg-ch2 relative pr-6"
+              :class="disabled ? 'cursor-default' : 'cursor-pointer'"
+              @keydown="updateShow"
+              @click="updateShow"
+            >
+              {{ headTitle || 'Date' }}
+              <div
+                class="arrow"
+                :class="arrowState"
+              >
+                <IconArrowsChevronBottom24 />
+              </div>
+            </div>
+          </slot>
         </div>
       </template>
       <template #popper>
@@ -373,6 +412,7 @@ else updateModelValue()
             <OptionsPanel
               :type="type"
               :menu-state="menuState"
+              :options="shortcuts"
               @click:option="onMenuClick"
             />
             <CalendarsPanel
@@ -395,7 +435,7 @@ else updateModelValue()
               :format-date="formatDate"
               :format-pattern="formatPattern"
               @update:custom-input="updateCustomInput"
-              @click:done="save"
+              @click:done="saveAndClose"
             />
           </div>
         </SPopoverWrappedTransition>