@oinone/kunlun-vue-ui-antd 6.2.0

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

@@ -0,0 +1,227 @@
+@import '../../../style/mixin.scss';
+@import '../../oio-button/style/parameters.scss';
+@import '../../oio-input/style/parameters.scss';
+@import '../../oio-input/style/mixin.scss';
+@import '../../oio-select/style/parameters.scss';
+@import '../../oio-date-time-picker/style/mixin.scss';
+@import './parameters.scss';
+
+@mixin oio-date-time-range-picker-disabled() {
+  @include oio-disabled();
+
+  &:hover {
+    @include oio-disabled(true, $inputParameterPrefix);
+  }
+
+  &:focus {
+    @include oio-disabled(true, $inputParameterPrefix);
+  }
+}
+
+@mixin oio-date-time-range-picker-readonly() {
+  @include oio-readonly();
+
+  &:hover {
+    @include oio-readonly(true, $inputParameterPrefix);
+  }
+
+  &:focus {
+    @include oio-readonly(true, $inputParameterPrefix);
+  }
+}
+
+.#{$dateTimeRangePickerClassPrefix} {
+  @include oio-appearance($inputParameterPrefix);
+
+  height: var($parameterPrefix + -height);
+  line-height: var($inputParameterPrefix + -line-height);
+  font-size: var(--oio-font-size);
+
+  &:hover {
+    @include oio-hover($inputParameterPrefix);
+  }
+
+  &.ant-picker-focused {
+    @include oio-focus($inputParameterPrefix);
+  }
+
+  .ant-picker-active-bar {
+    background-color: var($parameterPrefix + -primary-color-focus);
+  }
+
+  .ant-picker-input > input[disabled] {
+    color: var(--oio-disabled-color);
+  }
+
+  &-readonly {
+    cursor: auto;
+    @include oio-date-time-range-picker-readonly();
+
+    &.ant-picker {
+      @include oio-date-time-range-picker-readonly();
+    }
+
+    :is(.ant-picker-input > input[disabled], .ant-picker-range-separator),
+    &.ant-picker.ant-picker-disabled {
+      cursor: auto;
+    }
+
+    .ant-picker-input > input[disabled] {
+      color: var(--oio-disabled-color);
+    }
+  }
+
+  &-disabled {
+    border-color: var(--oio-border-color);
+    @include oio-date-time-range-picker-disabled();
+
+    &.ant-picker {
+      border-color: var(--oio-border-color);
+      @include oio-date-time-range-picker-disabled();
+    }
+  }
+}
+
+.#{$dateTimeRangePickerClassPrefix}-popper {
+  .ant-picker-cell.ant-picker-cell-in-view {
+    &.ant-picker-cell-in-range {
+      &:before {
+        background-color: rgba(var($parameterPrefix + -primary-color-rgb), 0.1);
+      }
+    }
+
+    &.ant-picker-cell-range-start,
+    &.ant-picker-cell-range-end {
+      .ant-picker-cell-inner {
+        color: #ffffff;
+        background-color: var($parameterPrefix + -primary-color);
+        border-radius: 2px;
+      }
+
+      &:not(.ant-picker-cell-range-start-single):not(.ant-picker-cell-range-end-single):before {
+        background-color: rgba(var($parameterPrefix + -primary-color-rgb), 0.1);
+      }
+    }
+
+    &.ant-picker-cell-range-hover:not(.ant-picker-cell-in-range),
+    &.ant-picker-cell-range-hover-end:not(.ant-picker-cell-in-range):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end) {
+      &:after {
+        border-color: var($parameterPrefix + -primary-color-hover);
+      }
+    }
+  }
+
+  .ant-picker-date-panel {
+    .ant-picker-cell.ant-picker-cell-in-view {
+      &:not(.ant-picker-cell-disabled) {
+        color: var($parameterPrefix + -text-color);
+        font-size: var(--oio-font-size);
+
+        &.ant-picker-cell-selected {
+          .ant-picker-cell-inner {
+            color: #ffffff;
+            background-color: var($parameterPrefix + -primary-color);
+            border-radius: 2px;
+          }
+        }
+
+        &.ant-picker-cell-today {
+          .ant-picker-cell-inner {
+            &:before {
+              border: none;
+            }
+
+            &:after {
+              @include selected-point();
+            }
+          }
+        }
+      }
+
+      &.ant-picker-cell-in-range.ant-picker-cell-range-hover-start,
+      &.ant-picker-cell-in-range.ant-picker-cell-range-hover-end {
+        &:before {
+          background-color: rgba(var($parameterPrefix + -primary-color-rgb), 0.1);
+        }
+
+        .ant-picker-cell-inner {
+          color: #ffffff;
+          background-color: var($parameterPrefix + -primary-color-hover);
+          border-radius: 2px;
+
+          &:after {
+            background-color: transparent;
+          }
+        }
+      }
+
+      &.ant-picker-cell-range-hover:not(.ant-picker-cell-in-range),
+      &.ant-picker-cell-range-hover-end:not(.ant-picker-cell-in-range):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end) {
+        &:after {
+          border-color: var($parameterPrefix + -primary-color-hover);
+        }
+      }
+
+      &.ant-picker-cell-disabled {
+        &.ant-picker-cell-today {
+          .ant-picker-cell-inner {
+            &:before {
+              border: none;
+            }
+
+            &:after {
+              @include selected-point();
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .ant-picker-time-panel {
+    .ant-picker-time-panel-column {
+      @include oio-scrollbar();
+    }
+
+    .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 {
+      &:not(.ant-picker-cell-disabled) {
+        color: var($parameterPrefix + -text-color);
+        font-size: var(--oio-font-size);
+
+        &.ant-picker-cell-selected {
+          .ant-picker-cell-inner {
+            color: #ffffff;
+            background-color: var($parameterPrefix + -primary-color);
+            border-radius: 2px;
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,5 @@
+@import '../../../style/global-parameters.scss';
+
+$dateTimeRangePickerPrefix: $prefix + -date-time-range-picker;
+$dateTimeRangePickerParameterPrefix: $parameterPrefix + -date-time-range-picker;
+$dateTimeRangePickerClassPrefix: $dateTimeRangePickerPrefix;

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

@@ -0,0 +1,138 @@
+import { DateTimePickerMode, DateUtil, defaultFormat } from '@oinone/kunlun-shared';
+import { isArray, isNil, isString } from 'lodash-es';
+import { computed, ref, watch } from 'vue';
+
+export function useDatetimeRangePickerProps(props, context) {
+  const panelVisible = ref<boolean>(false);
+  const dynamicMode = ref<DateTimePickerMode | undefined>(undefined);
+
+  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);
+  });
+
+  function formatByValueFormat(date: Date | string | undefined) {
+    if (isString(date)) {
+      return date;
+    }
+    return DateUtil.dateFormat(date, valueFormat.value);
+  }
+
+  const defaultValue = computed(() => {
+    const val = props.defaultValue;
+    if (isArray(val)) {
+      const [startVal, endVal] = val;
+      return [formatByValueFormat(startVal), formatByValueFormat(endVal)];
+    }
+    return undefined;
+  });
+
+  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 panelVisibleChange = (visible: boolean) => {
+    panelVisible.value = visible;
+    if (visible) {
+      props.openPanelChange?.();
+    } else {
+      props.closePanelChange?.();
+    }
+  };
+
+  const formatValue = (val: string) => {
+    if (!val) {
+      return val;
+    }
+    return DateUtil.valueFormat(val, valueFormat.value, format.value);
+  };
+
+  const emitValue = (rangValue?: [string, string]) => {
+    if (!rangValue) {
+      context.emit('update:value', rangValue);
+      return;
+    }
+
+    const [startValue, endValue] = rangValue;
+
+    context.emit('update:value', [formatValue(startValue), formatValue(endValue)]);
+  };
+
+  watch(
+    () => props.mode,
+    () => {
+      dynamicMode.value = realMode.value;
+    },
+    { immediate: true }
+  );
+
+  return {
+    panelVisible,
+    format,
+    dynamicMode,
+    valueFormat,
+    defaultValue,
+    showTime,
+    emitValue,
+    panelVisibleChange
+  };
+}
+
+export function fetchDatetimeRangePickerPlaceholder(mode: DateTimePickerMode) {
+  switch (mode) {
+    case DateTimePickerMode.datetime:
+    case DateTimePickerMode.time:
+      return ['开始时间', '结束时间'];
+    case DateTimePickerMode.year:
+      return ['开始年份', '结束年份'];
+    case DateTimePickerMode.month:
+      return ['开始月份', '结束月份'];
+    case DateTimePickerMode.week:
+      return ['开始周', '结束周'];
+    default:
+      return ['开始日期', '结束日期'];
+  }
+}

package/src/component/oio-divider/index.ts

@@ -0,0 +1,3 @@
+import './style/index.scss';
+
+export { default as OioDivider } from './oio-divider.vue';

package/src/component/oio-divider/oio-divider.vue

@@ -0,0 +1,31 @@
+<script lang="ts">
+import { CastHelper, StringHelper } from '@oinone/kunlun-shared';
+import { OioDividerProps, PropRecordHelper } from '@oinone/kunlun-vue-ui-common';
+import { Divider as ADivider } from 'ant-design-vue';
+import { createVNode, defineComponent } from 'vue';
+import { DEFAULT_PREFIX } from '../../theme';
+
+export default defineComponent({
+  name: 'OioDivider',
+  components: {
+    ADivider
+  },
+  inheritAttrs: false,
+  props: {
+    ...OioDividerProps
+  },
+  slots: ['default'],
+  render() {
+    return createVNode(
+      ADivider,
+      {
+        ...PropRecordHelper.convert(OioDividerProps, CastHelper.cast(this)),
+        ...this.$attrs,
+        class: StringHelper.append([`${DEFAULT_PREFIX}-divider`], CastHelper.cast(this.$attrs.class)),
+        style: this.$attrs.style
+      },
+      PropRecordHelper.collectionSlots(this.$slots, ['default'])
+    );
+  }
+});
+</script>

package/src/component/oio-divider/style/index.scss

@@ -0,0 +1,7 @@
+@import './parameters.scss';
+
+.#{$dividerClassPrefix} {
+  &.ant-divider-vertical {
+    margin: 0;
+  }
+}

package/src/component/oio-divider/style/parameters.scss

@@ -0,0 +1,5 @@
+@import '../../../style/global-parameters.scss';
+
+$dividerPrefix: $prefix + -divider;
+$dividerParameterPrefix: $parameterPrefix + -divider;
+$dividerClassPrefix: $dividerPrefix;

package/src/component/oio-drawer/index.ts

@@ -0,0 +1 @@
+export { default as OioDrawer } from './oio-drawer.vue';

package/src/component/oio-drawer/oio-drawer.vue

@@ -0,0 +1,120 @@
+<script lang="ts">
+import { CastHelper, StringHelper } from '@oinone/kunlun-shared';
+import { OioCloseIcon, OioDrawerProps, PropRecordHelper, StyleHelper, useDrawer } from '@oinone/kunlun-vue-ui-common';
+import { Drawer as ADrawer } from 'ant-design-vue';
+import { isBoolean } from 'lodash-es';
+import { createVNode, defineComponent } from 'vue';
+import { DEFAULT_PREFIX } from '../../theme';
+import { OioButton } from '../oio-button';
+import { OioSpin } from '../oio-spin';
+import { OioTooltipHelp } from '../oio-tooltip';
+
+export default defineComponent({
+  name: 'OioDrawer',
+  components: {
+    ADrawer,
+    OioButton,
+    OioSpin
+  },
+  inheritAttrs: false,
+  props: {
+    ...OioDrawerProps
+  },
+  slots: ['default', 'title', 'header', 'footer', 'closeIcon'],
+  emits: ['update:visible'],
+  setup(props, context) {
+    return {
+      ...useDrawer(props, context)
+    };
+  },
+  render() {
+    const slots = PropRecordHelper.collectionSlots(this.$slots, [
+      {
+        origin: 'default',
+        isNotNull: true
+      },
+      'title',
+      'header',
+      'footer',
+      'closeIcon'
+    ]);
+    const mainClassName = `${DEFAULT_PREFIX}-drawer`;
+
+    let finalDefaultSlot = [
+      createVNode('div', { class: `${mainClassName}-content` }, slots.default({ data: this.data }))
+    ];
+    if (isBoolean(this.loading)) {
+      const spinDefaultSlot = finalDefaultSlot;
+      finalDefaultSlot = [
+        createVNode(
+          OioSpin,
+          {
+            loading: this.loading
+          },
+          {
+            default: () => spinDefaultSlot
+          }
+        )
+      ];
+    }
+    const isOverrideTitle = !!slots.header;
+    if (!isOverrideTitle) {
+      let titleSlot = slots.title;
+      if (!titleSlot) {
+        titleSlot = () => [createVNode('span', {}, this.title || OioDrawerProps.title.default)];
+      }
+      if (this.help) {
+        const titleChildren = titleSlot();
+        titleSlot = () => {
+          return [createVNode('span', {}, titleChildren), createVNode(OioTooltipHelp, { content: this.help })];
+        };
+      }
+      slots.title = titleSlot;
+    }
+    if (!slots.closeIcon) {
+      slots.closeIcon = () => [createVNode(OioCloseIcon)];
+    }
+
+    const classNames = [mainClassName, `${mainClassName}-wrapper`];
+    if (this.widthClassSuffix) {
+      classNames.push(`${mainClassName}-width-${this.widthClassSuffix}`);
+    }
+    if (this.heightClassSuffix) {
+      classNames.push(`${mainClassName}-height-${this.heightClassSuffix}`);
+    }
+    if (this.headerInvisible) {
+      classNames.push(`${mainClassName}-header-invisible`);
+    }
+    if (this.footerInvisible) {
+      classNames.push(`${mainClassName}-footer-invisible`);
+    }
+    return createVNode(
+      ADrawer,
+      {
+        ...PropRecordHelper.collectionBasicProps(
+          this.$attrs,
+          StringHelper.append(classNames, CastHelper.cast(this.wrapperClassName)),
+          this.wrapperProps?.style
+        ),
+        placement: this.placement,
+        width: StyleHelper.px(this.width),
+        height: StyleHelper.px(this.height),
+        mask: this.mask,
+        maskClosable: this.maskClosable,
+        zIndex: this.zIndex,
+        visible: this.visible,
+        closable: this.closable,
+        keyboard: this.keyboard,
+        destroyOnClose: this.destroyOnClose,
+        getContainer: this.getTriggerContainer,
+        onOk: this.enter,
+        onClose: this.cancel
+      },
+      {
+        ...slots,
+        default: () => finalDefaultSlot
+      }
+    );
+  }
+});
+</script>

package/src/component/oio-drawer/style/index.scss

@@ -0,0 +1,93 @@
+@import '../../../style/mixin.scss';
+@import './parameters.scss';
+
+$titleHeight: 55px;
+$footerHeight: 73px;
+
+.#{$drawerClassPrefix} {
+  &-header-invisible {
+    .ant-drawer-wrapper-body > .ant-drawer-header {
+      display: none;
+    }
+  }
+
+  &-footer-invisible {
+    .ant-drawer-wrapper-body > .ant-drawer-footer {
+      display: none;
+    }
+  }
+  &.no-mask {
+    width: 100% !important;
+  }
+
+  &.#{$drawerClassPrefix}-width-small .ant-drawer-content-wrapper {
+    width: var($drawerParameterPrefix + -width-small) !important;
+  }
+  &.#{$drawerClassPrefix}-width-medium .ant-drawer-content-wrapper {
+    width: var($drawerParameterPrefix + -width-medium) !important;
+  }
+  &.#{$drawerClassPrefix}-width-large .ant-drawer-content-wrapper {
+    width: var($drawerParameterPrefix + -width-large) !important;
+  }
+  &.#{$drawerClassPrefix}-height-small .ant-drawer-content-wrapper {
+    height: var($drawerParameterPrefix + -height-small) !important;
+  }
+  &.#{$drawerClassPrefix}-height-medium .ant-drawer-content-wrapper {
+    height: var($drawerParameterPrefix + -height-medium) !important;
+  }
+  &.#{$drawerClassPrefix}-height-large .ant-drawer-content-wrapper {
+    height: var($drawerParameterPrefix + -height-large) !important;
+  }
+
+  & > .ant-drawer-content-wrapper {
+    opacity: 0;
+    transition: all 0.3s ease-in-out;
+  }
+
+  &.ant-drawer-open > .ant-drawer-content-wrapper {
+    opacity: 1;
+    transition: all 0.3s ease-in-out;
+  }
+
+  .ant-drawer-content .ant-drawer-wrapper-body {
+    .ant-drawer-body {
+      @include oio-scrollbar();
+
+      height: calc(100% - #{$titleHeight});
+      padding: 16px;
+      overflow: auto;
+
+      & > .ant-spin-nested-loading {
+        min-height: 100%;
+
+        & > .ant-spin-container {
+          min-height: 100%;
+        }
+      }
+    }
+
+    .ant-drawer-close {
+      padding: 0;
+    }
+
+    .ant-drawer-footer {
+      @include oio-scrollbar();
+
+      padding: var($parameterPrefix + -margin-md);
+      background-color: var(--oio-background);
+      border-top: 1px solid var(--oio-border-color);
+      text-align: right;
+      overflow: auto hidden;
+
+      button {
+        @import '../../oio-button/style/a-button.scss';
+
+        &.ant-btn {
+          height: var($parameterPrefix + -height);
+          margin: var($parameterPrefix + -margin-xxs) 0 var($parameterPrefix + -margin-xxs)
+            var($parameterPrefix + -margin-md);
+        }
+      }
+    }
+  }
+}

package/src/component/oio-drawer/style/parameters.scss

@@ -0,0 +1,5 @@
+@import '../../../style/global-parameters.scss';
+
+$drawerPrefix: $prefix + -drawer;
+$drawerParameterPrefix: $parameterPrefix + -drawer;
+$drawerClassPrefix: $drawerPrefix;

package/src/component/oio-dropdown/index.ts

@@ -0,0 +1 @@
+export { default as OioDropdown } from './oio-dropdown.vue';