bge-ui 1.3.4 → 1.3.6

package/src/datePicker/props.ts

@@ -0,0 +1,173 @@
+import type { Locale } from 'date-fns';
+import type { ExtractPropTypes, PropType } from 'vue';
+
+import type {
+    AriaLabels,
+    Flow,
+    DateFilter,
+    IFormat,
+    IMarker,
+    TimeModel,
+    Transition,
+    ModelValue,
+    OpenPosition,
+    WeekStartNum,
+    WeekStartStr,
+    CustomAltPosition,
+    SixWeekMode,
+    ActionRowData,
+    ICalendarDate,
+    InternalModuleValue,
+    MultiCalendarsProp,
+    TextInputProp,
+    PresetDate,
+    InlineProp,
+    DisabledTimeArrProp,
+    Config,
+    HighlightProp,
+    WeekNumbersProp,
+    RangeProp,
+    TimeZoneProp,
+    DisabledDatesProp,
+    MultiDatesProp,
+    UIOpts,
+} from '@/interfaces';
+
+export const AllProps = {
+    multiCalendars: { type: [Boolean, Number, String, Object] as PropType<MultiCalendarsProp>, default: undefined },
+    modelValue: { type: [String, Date, Array, Object, Number] as PropType<ModelValue>, default: null },
+    modelType: { type: String as PropType<string>, default: null },
+    position: { type: String as PropType<OpenPosition>, default: 'center' },
+    dark: { type: Boolean as PropType<boolean>, default: false },
+    format: {
+        type: [String, Function] as PropType<IFormat>,
+        default: () => null,
+    },
+    autoPosition: { type: Boolean as PropType<boolean>, default: true },
+    altPosition: { type: Function as PropType<CustomAltPosition>, default: null },
+    transitions: { type: [Boolean, Object] as PropType<boolean | Partial<Transition>>, default: true },
+    formatLocale: { type: Object as PropType<Locale>, default: null },
+    utc: { type: [Boolean, String] as PropType<boolean | 'preserve'>, default: false },
+    ariaLabels: { type: Object as PropType<Partial<AriaLabels>>, default: () => ({}) },
+    offset: { type: [Number, String] as PropType<number | string>, default: 4 },
+    hideNavigation: { type: Array as PropType<Flow[]>, default: () => [] },
+    timezone: { type: [String, Object] as PropType<TimeZoneProp>, default: null },
+    vertical: { type: Boolean as PropType<boolean>, default: false },
+    disableMonthYearSelect: { type: Boolean as PropType<boolean>, default: false },
+    disableYearSelect: { type: Boolean as PropType<boolean>, default: false },
+    dayClass: {
+        type: Function as PropType<(date: Date, internalModelValue: InternalModuleValue) => string>,
+        default: null,
+    },
+    yearRange: { type: Array as PropType<number[]>, default: () => [1900, 2100] },
+    enableTimePicker: { type: Boolean as PropType<boolean>, default: true },
+    autoApply: { type: Boolean as PropType<boolean>, default: false },
+    disabledDates: { type: [Array, Function] as PropType<DisabledDatesProp>, default: () => [] },
+    monthNameFormat: { type: String as PropType<'long' | 'short'>, default: 'short' },
+    startDate: { type: [Date, String] as PropType<string | Date>, default: null },
+    startTime: { type: [Object, Array] as PropType<TimeModel | TimeModel[] | null>, default: null },
+    hideOffsetDates: { type: Boolean as PropType<boolean>, default: false },
+    noToday: { type: Boolean as PropType<boolean>, default: false },
+    disabledWeekDays: { type: Array as PropType<string[] | number[]>, default: () => [] },
+    allowedDates: { type: Array as PropType<string[] | Date[]>, default: null },
+    nowButtonLabel: { type: String as PropType<string>, default: 'Now' },
+    markers: { type: Array as PropType<IMarker[]>, default: () => [] },
+    escClose: { type: Boolean as PropType<boolean>, default: true },
+    spaceConfirm: { type: Boolean as PropType<boolean>, default: true },
+    monthChangeOnArrows: { type: Boolean as PropType<boolean>, default: true },
+    presetDates: { type: Array as PropType<PresetDate[]>, default: () => [] },
+    flow: { type: Array as PropType<Flow[]>, default: () => [] },
+    partialFlow: { type: Boolean as PropType<boolean>, default: false },
+    preventMinMaxNavigation: { type: Boolean as PropType<boolean>, default: false },
+    reverseYears: { type: Boolean as PropType<boolean>, default: false },
+    weekPicker: { type: Boolean as PropType<boolean>, default: false },
+    filters: { type: Object as PropType<Partial<DateFilter>>, default: () => ({}) },
+    arrowNavigation: { type: Boolean as PropType<boolean>, default: false },
+    highlight: {
+        type: [Function, Object] as PropType<HighlightProp>,
+        default: null,
+    },
+    teleport: { type: [Boolean, String, Object] as PropType<boolean | string | HTMLElement>, default: null },
+    teleportCenter: { type: Boolean as PropType<boolean>, default: false },
+    locale: { type: String as PropType<string>, default: 'en-Us' },
+    weekNumName: { type: String as PropType<string>, default: 'W' },
+    weekStart: { type: [Number, String] as PropType<WeekStartNum | WeekStartStr>, default: 1 },
+    weekNumbers: {
+        type: [String, Function, Object] as PropType<WeekNumbersProp>,
+        default: null,
+    },
+    monthChangeOnScroll: { type: [Boolean, String] as PropType<boolean | 'inverse'>, default: true },
+    dayNames: {
+        type: [Function, Array] as PropType<((lang: string, weekStart: number) => string[]) | string[]>,
+        default: null,
+    },
+    monthPicker: { type: Boolean as PropType<boolean>, default: false },
+    customProps: { type: Object as PropType<Record<string, unknown>>, default: null },
+    yearPicker: { type: Boolean as PropType<boolean>, default: false },
+    modelAuto: { type: Boolean as PropType<boolean>, default: false },
+    selectText: { type: String as PropType<string>, default: 'Select' },
+    cancelText: { type: String as PropType<string>, default: 'Cancel' },
+    previewFormat: {
+        type: [String, Function] as PropType<IFormat>,
+        default: () => '',
+    },
+    multiDates: { type: [Object, Boolean] as PropType<MultiDatesProp>, default: false },
+    ignoreTimeValidation: { type: Boolean as PropType<boolean>, default: false },
+    minDate: { type: [Date, String] as PropType<Date | string>, default: null },
+    maxDate: { type: [Date, String] as PropType<Date | string>, default: null },
+    minTime: { type: Object as PropType<Partial<TimeModel>>, default: null },
+    maxTime: { type: Object as PropType<Partial<TimeModel>>, default: null },
+    name: { type: String as PropType<string>, default: null },
+    placeholder: { type: String as PropType<string>, default: '' },
+    hideInputIcon: { type: Boolean as PropType<boolean>, default: false },
+    clearable: { type: Boolean as PropType<boolean>, default: true },
+    state: { type: Boolean as PropType<boolean | null>, default: null },
+    required: { type: Boolean as PropType<boolean>, default: false },
+    autocomplete: { type: String as PropType<string>, default: 'off' },
+    timePicker: { type: Boolean as PropType<boolean>, default: false },
+    enableSeconds: { type: Boolean as PropType<boolean>, default: false },
+    is24: { type: Boolean as PropType<boolean>, default: true },
+    noHoursOverlay: { type: Boolean as PropType<boolean>, default: false },
+    noMinutesOverlay: { type: Boolean as PropType<boolean>, default: false },
+    noSecondsOverlay: { type: Boolean as PropType<boolean>, default: false },
+    hoursGridIncrement: { type: [String, Number] as PropType<string | number>, default: 1 },
+    minutesGridIncrement: { type: [String, Number] as PropType<string | number>, default: 5 },
+    secondsGridIncrement: { type: [String, Number] as PropType<string | number>, default: 5 },
+    hoursIncrement: { type: [Number, String] as PropType<number | string>, default: 1 },
+    minutesIncrement: { type: [Number, String] as PropType<number | string>, default: 1 },
+    secondsIncrement: { type: [Number, String] as PropType<number | string>, default: 1 },
+    range: { type: [Boolean, Object] as PropType<RangeProp>, default: false },
+    uid: { type: String as PropType<string>, default: null },
+    disabled: { type: Boolean as PropType<boolean>, default: false },
+    readonly: { type: Boolean as PropType<boolean>, default: false },
+    inline: { type: [Boolean, Object] as PropType<InlineProp>, default: false },
+    textInput: { type: [Boolean, Object] as PropType<TextInputProp>, default: false },
+    sixWeeks: { type: [Boolean, String] as PropType<boolean | SixWeekMode>, default: false },
+    actionRow: { type: Object as PropType<Partial<ActionRowData>>, default: () => ({}) },
+    focusStartDate: { type: Boolean as PropType<boolean>, default: false },
+    disabledTimes: { type: [Function, Array] as PropType<DisabledTimeArrProp>, default: undefined },
+    timePickerInline: { type: Boolean as PropType<boolean>, default: false },
+    calendar: { type: Function as PropType<(month: ICalendarDate[]) => ICalendarDate[]>, default: null },
+    config: { type: Object as PropType<Partial<Config>>, default: undefined },
+    quarterPicker: { type: Boolean as PropType<boolean>, default: false },
+    yearFirst: { type: Boolean as PropType<boolean>, default: false },
+    loading: { type: Boolean as PropType<boolean>, default: false },
+    onInternalModelChange: { type: [Function, Object] as PropType<(...args: any[]) => void>, default: null },
+    enableMinutes: { type: Boolean as PropType<boolean>, default: true },
+    ui: { type: Object as PropType<Partial<UIOpts>>, default: () => ({}) },
+};
+
+export const PickerBaseProps = {
+    ...AllProps,
+    shadow: { type: Boolean as PropType<boolean>, default: false },
+    flowStep: { type: Number as PropType<number>, default: 0 },
+    internalModelValue: { type: [Date, Array] as PropType<InternalModuleValue>, default: null },
+    noOverlayFocus: { type: Boolean as PropType<boolean>, default: false },
+    collapse: { type: Boolean as PropType<boolean>, default: false },
+    menuWrapRef: { type: Object as PropType<HTMLElement | null>, default: null },
+    getInputRect: { type: Function as PropType<() => DOMRect>, default: () => ({}) },
+    isTextInputDate: { type: Boolean as PropType<boolean>, default: false },
+};
+
+export type AllPropsType = ExtractPropTypes<typeof AllProps>;
+export type PickerBasePropsType = ExtractPropTypes<typeof PickerBaseProps>;

package/src/datePicker/style/components/_ActionRow.scss

@@ -0,0 +1,73 @@
+.dp__action_row {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: var(--dp-action-row-padding);
+  box-sizing: border-box;
+  color: var(--dp-text-color);
+  flex-flow: row nowrap;
+
+  svg {
+    height: var(--dp-button-icon-height);
+    width: auto;
+  }
+}
+
+.dp__selection_preview {
+  display: block;
+  color: var(--dp-text-color);
+  font-size: var(--dp-preview-font-size);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.dp__action_buttons {
+  display: flex;
+  flex: 0;
+  white-space: nowrap;
+  align-items: center;
+  justify-content: flex-end;
+  margin-inline-start: auto;
+}
+
+.dp__action_button {
+  display: inline-flex;
+  align-items: center;
+  background: transparent;
+  border: 1px solid transparent;
+  padding: var(--dp-action-buttons-padding);
+  line-height: var(--dp-action-button-height);
+  margin-inline-start: 3px;
+  height: var(--dp-action-button-height);
+  cursor: pointer;
+  border-radius: var(--dp-border-radius);
+  font-size: var(--dp-preview-font-size);
+  font-family: var(--dp-font-family);
+}
+
+.dp__action_cancel {
+  color: var(--dp-text-color);
+  border: 1px solid var(--dp-border-color);
+
+  &:hover {
+    border-color: var(--dp-primary-color);
+    transition: var(--dp-action-row-transtion);
+  }
+}
+
+.dp__action_buttons .dp__action_select {
+  background: var(--dp-primary-color);
+  color: var(--dp-primary-text-color);
+
+  &:hover {
+    background: var(--dp-primary-color);
+    transition: var(--dp-action-row-transtion);
+  }
+
+  &:disabled {
+    background: var(--dp-primary-disabled-color);
+    cursor: not-allowed;
+  }
+}
+

package/src/datePicker/style/components/_Calendar.scss

@@ -0,0 +1,284 @@
+.dp__calendar_header {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--tc-tertiary);
+  white-space: nowrap;
+}
+
+.dp__calendar_header_item {
+  text-align: center;
+  flex-grow: 1;
+  height: var(--dp-cell-size);
+  padding: var(--dp-cell-padding);
+  width: var(--dp-cell-size);
+  box-sizing: border-box;
+}
+
+.dp__calendar_row {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: var(--dp-row-margin);
+}
+
+.dp__calendar_item {
+  text-align: center;
+  flex-grow: 1;
+  box-sizing: border-box;
+  color: var(--dp-text-color);
+}
+
+.dp__calendar {
+  position: relative;
+}
+
+.dp__calendar_header_cell {
+  border-bottom: thin solid var(--dp-border-color);
+  padding: var(--dp-calendar-header-cell-padding);
+}
+
+.dp__cell_inner {
+  display: flex;
+  align-items: center;
+  text-align: center;
+  justify-content: center;
+  border-radius: var(--dp-cell-border-radius);
+  height: var(--dp-cell-size);
+  padding: var(--dp-cell-padding);
+  width: var(--dp-cell-size);
+  border: 1px solid transparent;
+  box-sizing: border-box;
+  position: relative;
+
+  &:hover {
+    transition: all 0.2s; // todo
+  }
+}
+
+%__dp_range_border_radius_start {
+  border-end-end-radius: 0;
+  border-start-end-radius: 0;
+}
+
+%__dp_range_border_radius_end {
+  border-end-start-radius: 0;
+  border-start-start-radius: 0;
+}
+
+%__dp_active {
+  background: var(--dp-primary-color);
+  color: var(--dp-primary-text-color);
+}
+
+%__dp_range_preview {
+  border-top: 1px dashed var(--dp-primary-color);
+  border-bottom: 1px dashed var(--dp-primary-color);
+}
+
+%__hover_date {
+  background: var(--dp-hover-color);
+  color: var(--dp-hover-text-color);
+}
+
+.dp__cell_offset {
+  color: var(--dp-secondary-color);
+}
+
+.dp__cell_disabled {
+  color: var(--dp-secondary-color);
+  cursor: not-allowed;
+}
+
+.dp__active_date {
+  @extend %__dp_active;
+}
+
+.dp__range_start {
+  @extend %__dp_active;
+  @extend %__dp_range_border_radius_start;
+}
+
+.dp__range_end {
+  @extend %__dp_active;
+  @extend %__dp_range_border_radius_end;
+}
+
+.dp__date_hover {
+  &:hover {
+    @extend %__hover_date;
+  }
+}
+
+.dp__date_hover_start {
+  &:hover {
+    @extend %__dp_range_border_radius_start;
+    @extend %__hover_date;
+  }
+}
+
+.dp__date_hover_end {
+  &:hover {
+    @extend %__dp_range_border_radius_end;
+    @extend %__hover_date;
+  }
+}
+
+.dp__range_between {
+  background: var(--dp-range-between-dates-background-color);
+  color: var(--dp-range-between-dates-text-color);
+  border-radius: 0;
+  border: 1px solid var(--dp-range-between-border-color);
+}
+
+.dp__range_between_week {
+  background: var(--dp-primary-color);
+  color: var(--dp-primary-text-color);
+  border-radius: 0;
+  border-top: 1px solid var(--dp-primary-color);
+  border-bottom: 1px solid var(--dp-primary-color);
+}
+
+.dp__today {
+  // border: 1px solid var(--dp-primary-color);
+  position: relative;
+  color: var(--tc-title);
+
+  &::after {
+    content: '';
+    width: 4px;
+    height: 4px;
+    border-radius: 100%;
+    background: var(--dp-primary-color);
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: 0;
+  }
+}
+
+.dp__week_num {
+  color: var(--dp-secondary-color);
+  text-align: center;
+}
+
+.dp__cell_auto_range {
+  border-radius: 0;
+  border-top: 1px dashed var(--dp-primary-color);
+  border-bottom: 1px dashed var(--dp-primary-color);
+}
+
+.dp__cell_auto_range_start {
+  @extend %__dp_range_border_radius_start;
+
+  border-start-start-radius: var(--dp-cell-border-radius);
+  border-end-start-radius: var(--dp-cell-border-radius);
+  border-inline-start: 1px dashed var(--dp-primary-color);
+  border-top: 1px dashed var(--dp-primary-color);
+  border-bottom: 1px dashed var(--dp-primary-color);
+}
+
+.dp__cell_auto_range_end {
+  @extend %__dp_range_border_radius_end;
+
+  border-start-end-radius: var(--dp-cell-border-radius);
+  border-end-end-radius: var(--dp-cell-border-radius);
+  border-top: 1px dashed var(--dp-primary-color);
+  border-bottom: 1px dashed var(--dp-primary-color);
+  border-inline-end: 1px dashed var(--dp-primary-color);
+}
+
+.dp__calendar_header_separator {
+  width: 100%;
+  height: 1px;
+  background: var(--dp-border-color);
+}
+
+.dp__calendar_next {
+  margin-inline-start: var(--dp-multi-calendars-spacing);
+}
+
+%__dp_marker {
+  height: 5px;
+  background-color: var(--dp-marker-color);
+  position: absolute;
+  bottom: 0;
+}
+
+.dp__marker_dot {
+  width: 5px;
+  border-radius: 50%;
+  left: 50%;
+  transform: translateX(-50%);
+
+  @extend %__dp_marker;
+}
+
+.dp__marker_line {
+  width: 100%;
+  left: 0;
+
+  @extend %__dp_marker;
+}
+
+.dp__marker_tooltip {
+  position: absolute;
+  border-radius: var(--dp-border-radius);
+  background-color: var(--dp-tooltip-color);
+  padding: 5px;
+  border: 1px solid var(--dp-border-color);
+  z-index: 99999;
+  box-sizing: border-box;
+  cursor: default;
+}
+
+.dp__tooltip_content {
+  white-space: nowrap;
+}
+
+.dp__tooltip_text {
+  display: flex;
+  align-items: center;
+  flex-flow: row nowrap;
+  color: var(--dp-text-color);
+}
+
+.dp__tooltip_mark {
+  height: 5px;
+  width: 5px;
+  border-radius: 50%;
+  background-color: var(--dp-text-color);
+  color: var(--dp-text-color);
+  margin-inline-end: 5px;
+}
+
+.dp__arrow_bottom_tp {
+  bottom: 0;
+  height: 8px;
+  width: 8px;
+  background-color: var(--dp-tooltip-color);
+  position: absolute;
+  border-inline-end: 1px solid var(--dp-border-color);
+  border-bottom: 1px solid var(--dp-border-color);
+  transform: translate(-50%, 50%) rotate(45deg);
+}
+
+.dp__instance_calendar {
+  position: relative;
+  width: 100%;
+}
+
+@media only screen and (width <= 600px) {
+  .dp__flex_display {
+    flex-direction: column;
+  }
+}
+
+.dp--flex-display-collapsed {
+  flex-direction: column;
+}
+
+.dp__cell_highlight {
+  background-color: var(--dp-highlight-color);
+}

package/src/datePicker/style/components/_DatepickerInput.scss

@@ -0,0 +1,109 @@
+.dp__input_wrap {
+  position: relative;
+  width: 100%;
+  box-sizing: unset;
+
+  &:focus {
+    border-color: var(--dp-border-color-hover);
+    outline: none;
+  }
+}
+
+.dp__input_valid {
+  box-shadow: 0 0 var(--dp-border-radius) var(--dp-success-color);
+  border-color: var(--dp-success-color);
+
+  &:hover {
+    border-color: var(--dp-success-color);
+  }
+}
+
+.dp__input_invalid {
+  box-shadow: 0 0 var(--dp-border-radius) var(--dp-danger-color);
+  border-color: var(--dp-danger-color);
+
+  &:hover {
+    border-color: var(--dp-danger-color);
+  }
+}
+
+.dp__input {
+  background-color: var(--dp-background-color);
+  border-radius: var(--dp-border-radius);
+  font-family: var(--dp-font-family);
+  border: 1px solid var(--dp-border-color);
+  outline: none;
+  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+  width: 100%;
+  font-size: var(--dp-font-size);
+  line-height: calc(var(--dp-font-size) * 1.5);
+  padding: var(--dp-input-padding);
+  color: var(--dp-text-color);
+  box-sizing: border-box;
+
+  &::placeholder {
+    opacity: 0.7;
+  }
+
+  &:hover:not(.dp__input_focus) {
+    border-color: var(--dp-border-color-hover);
+  }
+}
+
+.dp__input_reg {
+  caret-color: transparent;
+}
+
+.dp__input_focus {
+  border-color: var(--dp-border-color-focus);
+}
+
+.dp__disabled {
+  background: var(--dp-disabled-color);
+
+  &::placeholder {
+    color: var(--dp-disabled-color-text);
+  }
+}
+
+.dp__input_icons {
+  display: inline-block;
+  width: var(--dp-font-size);
+  height: var(--dp-font-size);
+  stroke-width: 0;
+  font-size: var(--dp-font-size);
+  line-height: calc(var(--dp-font-size) * 1.5);
+  padding: 6px 12px;
+  color: var(--dp-icon-color);
+  box-sizing: content-box;
+}
+
+.dp__input_icon {
+  cursor: pointer;
+  position: absolute;
+  top: 50%;
+  inset-inline-start:0;
+  transform: translateY(-50%);
+  color: var(--dp-icon-color);
+}
+
+.dp--clear-btn {
+  position: absolute;
+  top: 50%;
+  inset-inline-end: 0;
+  transform: translateY(-50%);
+  cursor: pointer;
+  color: var(--dp-icon-color);
+  background: transparent;
+  border: none;
+  display: inline-flex;
+  align-items: center;
+  padding: 0;
+  margin: 0;
+}
+
+.dp__input_icon_pad {
+  padding-inline-start: var(--dp-input-icon-padding);
+}
+
+