@oinone/kunlun-vue-ui-antd 6.2.0

package/src/component/oio-date-time-picker/style/index.scss

@@ -0,0 +1,348 @@
+@import '../../../style/mixin.scss';
+@import '../../oio-button/style/parameters.scss';
+@import '../../oio-input/style/parameters.scss';
+@import '../../oio-input/style/mixin.scss';
+@import './parameters.scss';
+@import './mixin.scss';
+
+.#{$dateTimePickerClassPrefix} {
+  &.ant-picker {
+    @include oio-appearance($inputParameterPrefix);
+    height: var($parameterPrefix + -height);
+    line-height: var($inputParameterPrefix + -line-height);
+    font-size: var(--oio-font-size);
+    padding: 12px;
+
+    &:hover {
+      @include oio-hover($inputParameterPrefix);
+    }
+
+    &:focus {
+      @include oio-focus($inputParameterPrefix);
+    }
+
+    &[disabled],
+    &.ant-picker-disabled {
+      @include oio-disabled();
+
+      &:hover {
+        @include oio-disabled(true, $inputParameterPrefix);
+      }
+
+      &:focus {
+        @include oio-disabled(true, $inputParameterPrefix);
+      }
+    }
+  }
+
+  &.ant-time-picker {
+    width: 100%;
+  }
+
+  .ant-picker-input > input {
+    color: var(--oio-text-color);
+
+    &[disabled] {
+      color: var(--oio-disabled-color);
+    }
+  }
+
+  .ant-picker-suffix {
+    color: var(--oio-icon-color) !important;
+  }
+
+  .ant-picker-clear {
+    border-radius: 50%;
+  }
+
+  &-readonly {
+    .ant-time-picker-clear,
+    .ant-picker-clear {
+      display: none;
+    }
+
+    &.ant-picker {
+      @include oio-readonly();
+
+      &:hover {
+        @include oio-readonly(true, $inputParameterPrefix);
+      }
+
+      &:focus {
+        @include oio-readonly(true, $inputParameterPrefix);
+      }
+    }
+  }
+}
+
+.#{$dateTimePickerClassPrefix}-popper {
+  .ant-picker-panels .ant-picker-cell-in-view.ant-picker-cell {
+    &.ant-picker-cell-range-end,
+    &.ant-picker-cell-range-start,
+    &.ant-picker-cell-selected {
+      .ant-picker-cell-inner {
+        color: #fff;
+      }
+    }
+  }
+
+  .ant-picker-cell-in-view {
+    &.ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single),
+    &.ant-picker-cell-range-start:not(.ant-picker-cell-range-start-single),
+    &.ant-picker-cell-in-range {
+      &:before {
+        background-color: rgba(var(--oio-primary-color-rgb), 0.1);
+      }
+    }
+  }
+
+  .ant-disabled-cell.ant-today .ant-date {
+    padding-right: unset;
+    padding-left: unset;
+  }
+
+  .ant-picker-panel-container {
+    background: var(--oio-background);
+  }
+
+  .ant-picker-footer-extra {
+    border-bottom-color: var(--oio-border-color);
+  }
+
+  .ant-picker-header {
+    color: var(--oio-text-color);
+    border-bottom-color: var(--oio-border-color);
+  }
+
+  .ant-picker-datetime-panel .ant-picker-time-panel,
+  .ant-picker-time-panel-column:not(:first-child),
+  .ant-picker-panel .ant-picker-footer,
+  .ant-picker-panel .ant-picker-footer,
+  .ant-picker-panel {
+    border-color: var(--oio-border-color);
+    border-bottom: 0;
+  }
+
+  .ant-disabled-cell.ant-today .ant-date:before {
+    display: none;
+  }
+
+  .ant-disabled-cell.ant-selected-day .ant-date:before {
+    display: none;
+  }
+
+  .ant-picker-cell {
+    color: var($parameterPrefix + -disabled-color);
+  }
+
+  .ant-picker-header button {
+    color: var($parameterPrefix + -disabled-color);
+  }
+
+  .ant-picker-cell:hover:not(.ant-picker-cell-in-view) .ant-picker-cell-inner,
+  .ant-picker-cell:hover:not(.ant-picker-cell-selected):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end):not(.ant-picker-cell-range-hover-start):not(.ant-picker-cell-range-hover-end)
+    .ant-picker-cell-inner {
+    background: var($parameterPrefix + -menu-hover-background-color);
+    color: var($parameterPrefix + -text-color);
+  }
+
+  .ant-picker-content th {
+    color: var($parameterPrefix + -text-color);
+  }
+
+  .ant-picker-date-panel {
+    .ant-picker-cell.ant-picker-cell-in-view {
+      .ant-picker-cell-inner {
+        color: var($parameterPrefix + -text-color);
+        font-size: var(--oio-font-size);
+        text-align: center;
+      }
+
+      &:active:not(.ant-picker-cell-selected):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end):not(.ant-picker-cell-range-hover-start):not(.ant-picker-cell-range-hover-end) {
+        .ant-picker-cell-inner {
+          color: #ffffff;
+          background-color: var($parameterPrefix + -primary-color-active);
+        }
+      }
+
+      &:hover:not(.ant-picker-cell-selected):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end):not(.ant-picker-cell-range-hover-start):not(.ant-picker-cell-range-hover-end) {
+        .ant-picker-cell-inner {
+          color: #ffffff;
+          background-color: var($parameterPrefix + -primary-color-hover);
+        }
+      }
+
+      &.ant-picker-cell-today {
+        .ant-picker-cell-inner {
+          &:before {
+            border: none;
+          }
+
+          &:after {
+            @include selected-point();
+          }
+        }
+
+        &:not(.ant-picker-cell-selected):not(.ant-picker-cell-range-start) {
+          .ant-picker-cell-inner {
+            color: var($parameterPrefix + -primary-color);
+            font-weight: 500;
+            border: none;
+            position: relative;
+
+            &:active {
+              color: #ffffff;
+              background-color: var($parameterPrefix + -primary-color-active);
+            }
+
+            &:hover {
+              color: #ffffff;
+              background-color: var($parameterPrefix + -primary-color-hover);
+            }
+          }
+        }
+      }
+
+      &.ant-picker-cell-selected {
+        .ant-picker-cell-inner {
+          color: #ffffff;
+          background-color: var($parameterPrefix + -primary-color);
+          border-radius: 2px;
+        }
+      }
+    }
+  }
+
+  .ant-picker-time-panel {
+    .ant-picker-time-panel-cell {
+      .ant-picker-time-panel-cell-inner {
+        color: var($parameterPrefix + -text-color);
+        font-size: var(--oio-font-size);
+
+        &:active {
+          color: #ffffff;
+          background-color: var($parameterPrefix + -primary-color-active);
+        }
+
+        &:hover {
+          color: #ffffff;
+          background-color: var($parameterPrefix + -primary-color-hover);
+        }
+      }
+
+      &.ant-picker-time-panel-cell-selected {
+        .ant-picker-time-panel-cell-inner {
+          color: #ffffff;
+          background-color: var($parameterPrefix + -primary-color);
+        }
+      }
+    }
+  }
+
+  .ant-picker-year-panel {
+    .ant-picker-cell.ant-picker-cell-in-view {
+      .ant-picker-cell-inner {
+        color: var($parameterPrefix + -text-color);
+        font-size: var(--oio-font-size);
+        text-align: center;
+      }
+
+      &:active:not(.ant-picker-cell-selected):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end):not(.ant-picker-cell-range-hover-start):not(.ant-picker-cell-range-hover-end) {
+        .ant-picker-cell-inner {
+          color: #ffffff;
+          background-color: var($parameterPrefix + -primary-color-active);
+        }
+      }
+
+      &:hover:not(.ant-picker-cell-selected):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end):not(.ant-picker-cell-range-hover-start):not(.ant-picker-cell-range-hover-end) {
+        .ant-picker-cell-inner {
+          color: #ffffff;
+          background-color: var($parameterPrefix + -primary-color-hover);
+        }
+      }
+
+      &.ant-picker-cell-selected {
+        .ant-picker-cell-inner {
+          color: #ffffff;
+          background-color: var($parameterPrefix + -primary-color);
+          border-radius: 2px;
+        }
+      }
+    }
+
+    & + .ant-picker-footer {
+      .ant-picker-now {
+        display: none;
+      }
+    }
+  }
+
+  .ant-picker-month-panel,
+  .ant-picker-decade-panel {
+    & + .ant-picker-footer {
+      .ant-picker-now {
+        display: none;
+      }
+    }
+  }
+
+  .ant-picker-footer {
+    .ant-picker-ok > .ant-btn {
+      @include oio-appearance($buttonParameterPrefix + -primary);
+
+      .oio-icon {
+        color: #ffffff;
+      }
+
+      &:active {
+        @include oio-active($buttonParameterPrefix + -primary);
+      }
+
+      &:hover {
+        @include oio-hover($buttonParameterPrefix + -primary);
+      }
+
+      &:focus {
+        @include oio-focus($buttonParameterPrefix + -primary);
+      }
+
+      &:visited {
+        @include oio-visited($buttonParameterPrefix + -primary);
+      }
+    }
+
+    .ant-picker-ranges .ant-picker-preset > .ant-tag-blue {
+      background-color: rgba(var(--oio-primary-color-rgb), 0.1);
+      border-color: var(--oio-primary-color);
+      color: var(--oio-primary-color);
+    }
+  }
+}
+
+.el-color-dropdown {
+  background: var(--oio-addon-color-pick-dropdown-background) !important;
+  border-color: var(--oio-addon-color-pick-dropdown-border-color) !important;
+
+  .el-input__wrapper {
+    background: var(--oio-input-background);
+    box-shadow: 0 0 0 1px var(--oio-input-border-color, var(--el-border-color)) inset;
+
+    .el-input__inner {
+      color: var(--oio-input-text-color);
+    }
+  }
+}
+
+.ant-picker-header-view button:hover {
+  color: var(--oio-primary-color);
+}
+
+.ant-picker-cell-in-view.ant-picker-cell-range-end .ant-picker-cell-inner,
+.ant-picker-cell-in-view.ant-picker-cell-range-start .ant-picker-cell-inner,
+.ant-picker-cell-in-view.ant-picker-cell-selected .ant-picker-cell-inner {
+  background: var(--oio-primary-color);
+}
+
+.ant-picker-today-btn {
+  color: var(--oio-primary-color);
+}

package/src/component/oio-date-time-picker/style/mixin.scss

@@ -0,0 +1,16 @@
+@import '../../../style/global-parameters.scss';
+
+/**
+ * 添加一个2px大小的点
+ */
+@mixin selected-point() {
+  content: '';
+  position: absolute;
+  display: inline-block;
+  width: 2px;
+  height: 2px;
+  border-radius: 50%;
+  background-color: var($parameterPrefix + -primary-color);
+  left: 50%;
+  bottom: 0;
+}

package/src/component/oio-date-time-picker/style/parameters.scss

@@ -0,0 +1,5 @@
+@import '../../../style/global-parameters.scss';
+
+$dateTimePickerPrefix: $prefix + -date-time-picker;
+$dateTimePickerParameterPrefix: $parameterPrefix + -date-time-picker;
+$dateTimePickerClassPrefix: $dateTimePickerPrefix;

package/src/component/oio-date-time-picker/use-date-time-picker-props.ts

@@ -0,0 +1,151 @@
+import { DateTimePickerMode, DateUtil, defaultFormat } from '@oinone/kunlun-shared';
+import { isNil, isString } from 'lodash-es';
+import { Moment } from 'moment';
+
+import { computed, ref, watch } from 'vue';
+
+export function useDateTimePickerProps(props, context) {
+  const dynamicMode = ref<DateTimePickerMode | undefined>(undefined);
+  const panelVisible = ref<boolean>(false);
+  const innerChangeOpenValue = (v) => {
+    panelVisible.value = v;
+    props.changeOpenValue?.(v);
+  };
+
+  const getDateTimeFormat = () => {
+    return DateUtil.fetchDatetimeFormat(
+      { hasDateFormat: props.hasDateFormat, hasTimeFormat: props.hasTimeFormat },
+      props.format,
+      props.dateFormat,
+      props.timeFormat,
+      props.convertFormat,
+      props.convertDateFormat,
+      props.convertTimeFormat
+    );
+  };
+
+  const format = computed(() => {
+    return getDateTimeFormat() || defaultFormat;
+  });
+
+  const valueFormat = computed(() => {
+    return DateUtil.fixFormat(DateUtil.fetchValueFormat(props.valueFormat) || defaultFormat);
+  });
+
+  const defaultValue = computed(() => {
+    const val = props.defaultValue;
+    if (isString(val)) {
+      return val;
+    }
+    return DateUtil.dateFormat(val, valueFormat.value);
+  });
+
+  const realMode = computed<DateTimePickerMode | undefined>(() => {
+    const mode = props.mode;
+    if (mode) {
+      switch (mode) {
+        case DateTimePickerMode.datetime:
+          return undefined;
+        case DateTimePickerMode.date: {
+          const dateFormat = DateUtil.fetchDateFormat(props.format || props.dateFormat, props.convertDateFormat);
+          if (dateFormat.indexOf('D') === -1) {
+            return DateTimePickerMode.month;
+          }
+          break;
+        }
+        case DateTimePickerMode.time:
+          break;
+        case DateTimePickerMode.year:
+          break;
+        default:
+          return mode;
+      }
+      return mode;
+    }
+    return undefined;
+  });
+
+  const showTime = computed(() => {
+    if (isNil(props.showTime)) {
+      return props.mode === DateTimePickerMode.datetime;
+    }
+    return props.showTime;
+  });
+
+  const formatValue = (val: string) => {
+    if (!val) {
+      return val;
+    }
+    return DateUtil.valueFormat(val, valueFormat.value, format.value);
+  };
+
+  const emitValue = (val: string) => {
+    context.emit('update:value', formatValue(val));
+  };
+
+  const panelChange = (val: Moment | String, mode: string) => {
+    const originMode = realMode.value;
+    const value = typeof val === 'string' ? val : (val as Moment).format(valueFormat.value);
+    if (originMode && [DateTimePickerMode.year, DateTimePickerMode.month].includes(originMode)) {
+      context.emit('update:value', value);
+      innerChangeOpenValue(false);
+      dynamicMode.value = originMode;
+      return;
+    }
+
+    context.emit('update:value', value);
+    dynamicMode.value = mode as DateTimePickerMode;
+  };
+
+  const panelVisibleChange = (visible: boolean) => {
+    if (props.readonly) {
+      visible = false;
+    }
+    innerChangeOpenValue(visible);
+    if (!visible) {
+      dynamicMode.value = realMode.value;
+      props.closePanelChange?.();
+    } else {
+      props.openPanelChange?.();
+    }
+  };
+
+  watch(
+    () => props.mode,
+    () => {
+      innerChangeOpenValue(false);
+      dynamicMode.value = realMode.value;
+    },
+    { immediate: true }
+  );
+
+  return {
+    dynamicMode,
+    panelVisible,
+    format,
+    valueFormat,
+    defaultValue,
+    realMode,
+    showTime,
+    panelChange,
+    panelVisibleChange,
+    emitValue
+  };
+}
+
+export function fetchDatetimePickerPlaceholder(mode: DateTimePickerMode) {
+  switch (mode) {
+    case DateTimePickerMode.date:
+      return '请选择日期';
+    case DateTimePickerMode.time:
+      return '请选择时间';
+    case DateTimePickerMode.year:
+      return '请选择年份';
+    case DateTimePickerMode.month:
+      return '请选择月份';
+    case DateTimePickerMode.week:
+      return '请选择周';
+    default:
+      return '请选择日期时间';
+  }
+}

package/src/component/oio-date-time-range-picker/index.ts

@@ -0,0 +1,5 @@
+export { default as OioDateTimeRangePicker } from './oio-date-time-range-picker.vue';
+export { default as OioDateRangePicker } from './oio-date-range-picker.vue';
+export { default as OioTimeRangePicker } from './oio-time-range-picker.vue';
+export { default as OioYearRangePicker } from './oio-year-range-picker.vue';
+export { fetchDatetimeRangePickerPlaceholder } from './use-date-time-range-picker-props';

package/src/component/oio-date-time-range-picker/oio-date-range-picker.vue

@@ -0,0 +1,29 @@
+<script lang="ts">
+import { CastHelper, DateTimePickerMode } from '@oinone/kunlun-shared';
+import { OioDateRangePickerProps, PropRecordHelper } from '@oinone/kunlun-vue-ui-common';
+import { createVNode, defineComponent } from 'vue';
+import OioDateTimeRangePicker from './oio-date-time-range-picker.vue';
+
+export default defineComponent({
+  name: 'OioDateRangePicker',
+  components: {
+    OioDateTimeRangePicker
+  },
+  props: {
+    ...OioDateRangePickerProps
+  },
+  emits: ['update:value'],
+  render() {
+    return createVNode(OioDateTimeRangePicker, {
+      ...PropRecordHelper.convert(OioDateRangePickerProps, CastHelper.cast(this)),
+      ...this.$attrs,
+      'onUpdate:value': (val) => {
+        this.$emit('update:value', val);
+      },
+      mode: DateTimePickerMode.date,
+      hasDateFormat: true,
+      hasTimeFormat: false
+    });
+  }
+});
+</script>

package/src/component/oio-date-time-range-picker/oio-date-time-range-picker.vue

@@ -0,0 +1,82 @@
+<script lang="ts">
+import { CSSStyle, DateTimePickerMode, StringHelper } from '@oinone/kunlun-shared';
+import { OioDateTimeRangePickerProps, PropRecordHelper } from '@oinone/kunlun-vue-ui-common';
+import { RangePicker as ARangePicker } from 'ant-design-vue';
+import { Component, createVNode, defineComponent, VNodeProps } from 'vue';
+import { DEFAULT_PREFIX } from '../../theme';
+import { fetchDatetimeRangePickerPlaceholder, useDatetimeRangePickerProps } from './use-date-time-range-picker-props';
+
+export default defineComponent({
+  name: 'OioDateTimeRangePicker',
+  components: {
+    ARangePicker
+  },
+  inheritAttrs: false,
+  props: {
+    ...OioDateTimeRangePickerProps
+  },
+  emits: ['update:value'],
+  setup(props, context) {
+    return {
+      ...useDatetimeRangePickerProps(props, context)
+    };
+  },
+  render() {
+    const datetimePickerClassList = [
+      `${DEFAULT_PREFIX}-date-time-range-picker`,
+      `${DEFAULT_PREFIX}-date-time-range-picker-${this.mode}`
+    ];
+    if (this.readonly) {
+      datetimePickerClassList.push(`${DEFAULT_PREFIX}-date-time-range-picker-readonly`);
+    }
+    if (this.disabled) {
+      datetimePickerClassList.push(`${DEFAULT_PREFIX}-date-time-range-picker-disabled`);
+    }
+    const componentProps: Record<string, unknown> & VNodeProps = {
+      ...PropRecordHelper.collectionBasicProps(this.$attrs, datetimePickerClassList, {
+        width: '100%'
+      } as CSSStyle),
+      defaultValue: this.defaultValue,
+      placeholder: this.placeholder,
+      readonly: this.readonly,
+      inputReadOnly: this.readonly,
+      disabled: this.disabled || this.readonly,
+      format: this.$translate(this.format),
+      valueFormat: this.valueFormat,
+      value: this.value,
+      allowClear: this.allowClear,
+      showTime: this.showTime,
+      separator: this.separator,
+      showOk: false,
+      'onUpdate:value': (val) => {
+        this.emitValue(val);
+      },
+      open: this.panelVisible,
+      onOpenChange: this.panelVisibleChange,
+      getPopupContainer: this.getTriggerContainer
+    };
+
+    if (this.dynamicMode === DateTimePickerMode.month) {
+      componentProps.picker = this.dynamicMode;
+    } else if (this.mode !== DateTimePickerMode.datetime) {
+      componentProps.picker = this.mode;
+    }
+
+    if (this.placeholder === undefined) {
+      componentProps.placeholder = fetchDatetimeRangePickerPlaceholder(this.mode).map((a) => this.$translate(a));
+    } else {
+      componentProps.placeholder = this.placeholder;
+    }
+    const dropdownClassName = StringHelper.append(
+      [
+        `${DEFAULT_PREFIX}-date-time-range-picker-popper`,
+        `${DEFAULT_PREFIX}-date-time-range-picker-popper-${this.mode}`
+      ],
+      this.popperClass || this.dropdownClassName
+    ).join(' ');
+    const component: Component = ARangePicker;
+    componentProps.dropdownClassName = dropdownClassName;
+    return createVNode(component, componentProps);
+  }
+});
+</script>

package/src/component/oio-date-time-range-picker/oio-time-range-picker.vue

@@ -0,0 +1,29 @@
+<script lang="ts">
+import { CastHelper, DateTimePickerMode } from '@oinone/kunlun-shared';
+import { OioTimeRangePickerProps, PropRecordHelper } from '@oinone/kunlun-vue-ui-common';
+import { createVNode, defineComponent } from 'vue';
+import OioDateTimeRangePicker from './oio-date-time-range-picker.vue';
+
+export default defineComponent({
+  name: 'OioTimeRangePicker',
+  components: {
+    OioDateTimeRangePicker
+  },
+  props: {
+    ...OioTimeRangePickerProps
+  },
+  emits: ['update:value'],
+  render() {
+    return createVNode(OioDateTimeRangePicker, {
+      ...PropRecordHelper.convert(OioTimeRangePickerProps, CastHelper.cast(this)),
+      ...this.$attrs,
+      'onUpdate:value': (val) => {
+        this.$emit('update:value', val);
+      },
+      mode: DateTimePickerMode.time,
+      hasDateFormat: false,
+      hasTimeFormat: true
+    });
+  }
+});
+</script>

package/src/component/oio-date-time-range-picker/oio-year-range-picker.vue

@@ -0,0 +1,29 @@
+<script lang="ts">
+import { CastHelper, DateTimePickerMode } from '@oinone/kunlun-shared';
+import { OioYearRangePickerProps, PropRecordHelper } from '@oinone/kunlun-vue-ui-common';
+import { createVNode, defineComponent } from 'vue';
+import OioDateTimeRangePicker from './oio-date-time-range-picker.vue';
+
+export default defineComponent({
+  name: 'OioYearRangePicker',
+  components: {
+    OioDateTimeRangePicker
+  },
+  props: {
+    ...OioYearRangePickerProps
+  },
+  emits: ['update:value'],
+  render() {
+    return createVNode(OioDateTimeRangePicker, {
+      ...PropRecordHelper.convert(OioYearRangePickerProps, CastHelper.cast(this)),
+      ...this.$attrs,
+      'onUpdate:value': (val) => {
+        this.$emit('update:value', val);
+      },
+      mode: DateTimePickerMode.year,
+      hasDateFormat: false,
+      hasTimeFormat: false
+    });
+  }
+});
+</script>