@oinone/kunlun-vue-ui-antd 6.2.0

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

@@ -0,0 +1,184 @@
+<script lang="ts">
+import { CastHelper, StringHelper, uniqueKeyGenerator } from '@oinone/kunlun-shared';
+import {
+  OioCloseIcon,
+  OioModalProps,
+  PropRecordHelper,
+  StyleHelper,
+  useDraggable,
+  useModal
+} from '@oinone/kunlun-vue-ui-common';
+import { Modal as AModal } from 'ant-design-vue';
+import { isBoolean } from 'lodash-es';
+import { computed, createVNode, defineComponent, nextTick, ref, watch } from 'vue';
+import { DEFAULT_PREFIX } from '../../theme';
+import { OioButton } from '../oio-button';
+import { OioSpin } from '../oio-spin';
+import { OioTooltip, OioTooltipHelp } from '../oio-tooltip';
+
+export default defineComponent({
+  name: 'OioModal',
+  components: {
+    AModal,
+    OioButton,
+    OioSpin,
+    OioTooltip
+  },
+  inheritAttrs: false,
+  props: {
+    ...OioModalProps
+  },
+  slots: ['default', 'title', 'header', 'footer', 'closeIcon'],
+  emits: ['update:visible'],
+  setup(props, context) {
+    const internalId = `${DEFAULT_PREFIX}-modal-${uniqueKeyGenerator()}`;
+
+    const modalRef = ref<HTMLElement | undefined>();
+    const dragHandleRef = ref<HTMLElement | undefined>();
+    const draggable = computed(() => props.draggable || false);
+
+    useDraggable(modalRef, dragHandleRef, draggable);
+
+    const id = computed<string>(() => {
+      return props.wrapperProps?.id || internalId;
+    });
+
+    watch(
+      () => props.visible,
+      (val) => {
+        if (val) {
+          nextTick(() => {
+            const modalDom = document.getElementById(id.value)?.firstElementChild;
+            if (!modalDom) {
+              return;
+            }
+            let dragHandleDom: Element | undefined;
+            if (props.headerInvisible) {
+              [dragHandleDom] = modalDom.getElementsByClassName('ant-modal-body');
+            } else {
+              [dragHandleDom] = modalDom.getElementsByClassName('ant-modal-header');
+            }
+            if (!dragHandleDom) {
+              return;
+            }
+            dragHandleRef.value = dragHandleDom as HTMLElement;
+            modalRef.value = modalDom as HTMLElement;
+          });
+        } else {
+          modalRef.value = undefined;
+          dragHandleRef.value = undefined;
+        }
+      },
+      { immediate: true }
+    );
+
+    return {
+      ...useModal(props, context),
+      id
+    };
+  },
+  render() {
+    const slots = PropRecordHelper.collectionSlots(this.$slots, [
+      {
+        origin: 'default',
+        isNotNull: true
+      },
+      'title',
+      'header',
+      'footer',
+      'closeIcon'
+    ]);
+    let defaultSlot = slots.default;
+    const finalDefaultSlot = defaultSlot({ data: this.data });
+    if (isBoolean(this.loading)) {
+      defaultSlot = () => [
+        createVNode(
+          OioSpin,
+          {
+            loading: this.loading
+          },
+          {
+            default: () => finalDefaultSlot
+          }
+        )
+      ];
+    } else {
+      defaultSlot = () => finalDefaultSlot;
+    }
+    const isOverrideTitle = !!slots.header;
+    if (!isOverrideTitle) {
+      let titleSlot = slots.title;
+      if (!titleSlot) {
+        titleSlot = () => {
+          const title = this.title || OioModalProps.title.default;
+          return [createVNode('span', {}, this.$translate(title))];
+        };
+      }
+      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 mainClassName = `${DEFAULT_PREFIX}-modal`;
+    const classNames = [mainClassName];
+    if (this.widthClassSuffix) {
+      classNames.push(`${mainClassName}-width-${this.widthClassSuffix}`);
+    }
+    if (this.heightClassSuffix) {
+      classNames.push(`${mainClassName}-height-${this.heightClassSuffix}`);
+    }
+
+    if (this.customHeightClassSuffix) {
+      classNames.push(`${mainClassName}-height-${this.customHeightClassSuffix}`);
+    }
+
+    if (this.headerInvisible) {
+      classNames.push(`${mainClassName}-header-invisible`);
+    }
+    if (this.footerInvisible) {
+      classNames.push(`${mainClassName}-footer-invisible`);
+    }
+    return createVNode(
+      AModal,
+      {
+        ...PropRecordHelper.collectionBasicProps(this.$attrs, classNames),
+        mask: this.mask,
+        maskClosable: this.headerInvisible ? true : this.maskClosable,
+        width: StyleHelper.px(this.width),
+        wrapClassName: StringHelper.append([`${mainClassName}-wrapper`], CastHelper.cast(this.wrapperClassName)).join(
+          ' '
+        ),
+        style: {
+          [`--${mainClassName}-custom-height`]: this.heightPx
+        },
+        wrapProps: {
+          ...(this.wrapperProps || {}),
+          id: this.id
+        },
+        zIndex: this.zIndex,
+        okText: this.$translate(this.enterText),
+        cancelText: this.$translate(this.cancelText),
+        visible: this.visible,
+        closable: this.closable,
+        keyboard: this.keyboard,
+        destroyOnClose: this.destroyOnClose,
+        getContainer: this.getTriggerContainer,
+        confirmLoading: this.confirmLoading,
+        onOk: this.enter,
+        onCancel: this.cancel
+      },
+      {
+        ...slots,
+        default: defaultSlot
+      }
+    );
+  }
+});
+</script>

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

@@ -0,0 +1,167 @@
+@import '../../../style/mixin.scss';
+@import '../../../style/global-parameters';
+@import './parameters.scss';
+
+.#{$modalClassPrefix} {
+  padding: 0;
+  &.#{$modalClassPrefix}-width-small {
+    width: var($modalParameterPrefix + -width-small) !important;
+  }
+  &.#{$modalClassPrefix}-width-medium {
+    width: var($modalParameterPrefix + -width-medium) !important;
+  }
+  &.#{$modalClassPrefix}-width-large {
+    width: var($modalParameterPrefix + -width-large) !important;
+  }
+
+  &.#{$modalClassPrefix}-width-full {
+    width: 100% !important;
+    max-width: 100%;
+    &.ant-modal {
+      margin: 0;
+    }
+  }
+
+  &.#{$modalClassPrefix}-height-small {
+    .ant-modal-content {
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      height: var($modalParameterPrefix + -height-small) !important;
+    }
+  }
+  &.#{$modalClassPrefix}-height-medium {
+    .ant-modal-content {
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      height: var($modalParameterPrefix + -height-medium) !important;
+    }
+  }
+  &.#{$modalClassPrefix}-height-large {
+    .ant-modal-content {
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      height: var($modalParameterPrefix + -height-large) !important;
+    }
+  }
+
+  &.#{$modalClassPrefix}-height-custom {
+    .ant-modal-content {
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      height: var(--oio-modal-custom-height) !important;
+    }
+  }
+
+  &.#{$modalClassPrefix}-height-full {
+    &.ant-modal {
+      top: 0;
+      padding-bottom: 0;
+      margin: 0;
+    }
+
+    .ant-modal-content {
+      display: flex;
+      flex-direction: column;
+      height: calc(100vh);
+    }
+  }
+
+  .ant-modal-body {
+    flex: 1;
+    overflow: auto;
+  }
+
+  &-wrapper {
+    @include oio-scrollbar();
+  }
+
+  &-header-invisible {
+    .ant-modal-content {
+      & > .ant-modal-close,
+      & > .ant-modal-header {
+        display: none;
+      }
+    }
+  }
+
+  &-footer-invisible {
+    .ant-modal-content > .ant-modal-footer {
+      display: none;
+    }
+  }
+
+  .ant-modal-content {
+    background: var($parameterPrefix + -background);
+    border: 1px solid var($parameterPrefix + -border-color);
+    box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.2);
+    border-radius: var($parameterPrefix + -border-radius);
+  }
+
+  .ant-modal-close-x {
+    color: var($parameterPrefix + -text-color);
+    height: 49px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .ant-modal-header {
+    padding: 16px;
+    border-bottom: 1px solid var($parameterPrefix + -border-color);
+    background-color: var($parameterPrefix + -background);
+
+    .ant-modal-title {
+      opacity: 0.85;
+      font-size: var($parameterPrefix + -font-size-lg);
+      color: var($parameterPrefix + -text-color);
+      line-height: 24px;
+      font-weight: var($parameterPrefix + -font-weight-bold);
+    }
+  }
+
+  .ant-modal-confirm-title,
+  .ant-modal-confirm-content {
+    color: var($modalParameterPrefix + -color);
+  }
+
+  .ant-modal-body {
+    padding: var($parameterPrefix + -margin-md);
+    @include oio-scrollbar();
+
+    .ant-modal-confirm-body-wrapper {
+      .ant-modal-confirm-btns {
+        button {
+          @import '../../oio-button/style/a-button.scss';
+        }
+      }
+    }
+  }
+
+  .ant-modal-footer {
+    padding: var($parameterPrefix + -margin-md);
+    border-top: 1px solid var($parameterPrefix + -border-color);
+    overflow: auto hidden;
+    @include oio-scrollbar();
+
+    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);
+
+        & + .ant-btn {
+          margin-left: var($parameterPrefix + -margin-md);
+        }
+      }
+    }
+  }
+  .ant-modal-confirm-btns .ant-btn + .ant-btn {
+    margin-left: 12px;
+  }
+}

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

@@ -0,0 +1,5 @@
+@import '../../../style/global-parameters';
+
+$modalPrefix: $prefix + -modal;
+$modalParameterPrefix: $parameterPrefix + -modal;
+$modalClassPrefix: $modalPrefix;

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

@@ -0,0 +1,197 @@
+import { StringHelper } from '@oinone/kunlun-shared';
+import { OioCloseIcon, OioIcon, OioNotificationOptions } from '@oinone/kunlun-vue-ui-common';
+import { message as AMessage, notification as ANotification } from 'ant-design-vue';
+import { createVNode } from 'vue';
+import { DEFAULT_PREFIX } from '../../theme';
+
+/**
+ * 通知类型
+ */
+export enum NotificationType {
+  /**
+   * 提示
+   */
+  info = 'info',
+  /**
+   * 成功
+   */
+  success = 'success',
+  /**
+   * 警告
+   */
+  warning = 'warning',
+  /**
+   * 错误
+   */
+  error = 'error'
+}
+
+const getIconVNode = (icon: string, color: string, size = '21') =>
+  createVNode(OioIcon, {
+    icon,
+    size,
+    color
+  });
+
+const genNotificationIcon = (type: NotificationType, size = '21') => {
+  switch (type) {
+    case NotificationType.error:
+      return getIconVNode('oinone-cuowu1', 'var(--oio-notification-error)', size);
+    case NotificationType.info:
+      return getIconVNode('oinone-tishi', 'var(--oio-notification-info)', size);
+
+    case NotificationType.success:
+      return getIconVNode('oinone-chenggong1', 'var(--oio-notification-success)', size);
+
+    case NotificationType.warning:
+      return getIconVNode('oinone-jinggao', 'var(--oio-notification-warning)', size);
+
+    default:
+      return '';
+  }
+};
+
+/**
+ * 消息提示
+ */
+class Message {
+  /**
+   * 根据指定类型打开相应的消息提示框
+   * @param type 通知类型
+   * @param message 消息内容
+   * @param options 可选项
+   */
+  public open(type: NotificationType, message: string, options?: OioNotificationOptions) {
+    AMessage[type]({
+      ...(options || {}),
+      content: message,
+      icon: genNotificationIcon(type, '16'),
+      duration: options?.duration || 3,
+      class: StringHelper.append([`${DEFAULT_PREFIX}-message ${DEFAULT_PREFIX}-message-${type}`], options?.class).join(
+        ' '
+      )
+    });
+  }
+
+  /**
+   * 打开【提示】类型的消息提示框 {@link NotificationType.info}
+   * @param message 消息内容
+   * @param options 可选项
+   */
+  public info(message: string, options?: OioNotificationOptions) {
+    this.open(NotificationType.info, message, options);
+  }
+
+  /**
+   * 打开【成功】类型的消息提示框 {@link NotificationType.success}
+   * @param message 消息内容
+   * @param options 可选项
+   */
+  public success(message: string, options?: OioNotificationOptions) {
+    this.open(NotificationType.success, message, options);
+  }
+
+  /**
+   * 打开【警告】类型的消息提示框 {@link NotificationType.warning}
+   * @param message 消息内容
+   * @param options 可选项
+   */
+  public warning(message: string, options?: OioNotificationOptions) {
+    this.open(NotificationType.warning, message, options);
+  }
+
+  /**
+   * 打开【错误】类型的消息提示框 {@link NotificationType.error}
+   * @param message 消息内容
+   * @param options 可选项
+   */
+  public error(message: string, options?: OioNotificationOptions) {
+    this.open(NotificationType.error, message, options);
+  }
+}
+
+/**
+ * 消息通知
+ */
+class Notification {
+  /**
+   * 根据指定类型打开相应的消息通知框
+   * @param type 通知类型
+   * @param title 消息标题
+   * @param message 消息内容
+   * @param options 可选项
+   */
+  public open(type: NotificationType, title: string, message?: string, options?: OioNotificationOptions) {
+    ANotification[type]({
+      ...(options || {}),
+      message: title ? createVNode('div', { class: `${DEFAULT_PREFIX}-notification-message-title` }, title) : '',
+      description: message,
+      icon: genNotificationIcon(type),
+      closeIcon: createVNode(OioCloseIcon, { volume: '16', size: '6' }),
+      class: StringHelper.append(
+        [`${DEFAULT_PREFIX}-notification ${DEFAULT_PREFIX}-notification-${type}`],
+        options?.class
+      ).join(' ')
+    });
+  }
+
+  /**
+   * 打开【提示】类型的消息通知框 {@link NotificationType.info}
+   * @param title 消息标题
+   * @param message 消息内容
+   * @param options 可选项
+   */
+  public info(title: string, message?: string, options?: OioNotificationOptions) {
+    this.open(NotificationType.info, title, message, options);
+  }
+
+  /**
+   * 打开【成功】类型的消息通知框 {@link NotificationType.success}
+   * @param title 消息标题
+   * @param message 消息内容
+   * @param options 可选项
+   */
+  public success(title: string, message?: string, options?: OioNotificationOptions) {
+    this.open(NotificationType.success, title, message, options);
+  }
+
+  /**
+   * 打开【警告】类型的消息通知框 {@link NotificationType.warning}
+   * @param title 消息标题
+   * @param message 消息内容
+   * @param options 可选项
+   */
+  public warning(title: string, message?: string, options?: OioNotificationOptions) {
+    this.open(NotificationType.warning, title, message, options);
+  }
+
+  /**
+   * 打开【错误】类型的消息通知框 {@link NotificationType.error}
+   * @param title 消息标题
+   * @param message 消息内容
+   * @param options 可选项
+   */
+  public error(title: string, message?: string, options?: OioNotificationOptions) {
+    this.open(NotificationType.error, title, message, options);
+  }
+}
+
+/**
+ * 消息提示
+ */
+export const OioMessage = new Message();
+
+/**
+ * 消息通知
+ */
+export const OioNotification = new Notification();
+
+/**
+ * @deprecated 请使用{@link OioMessage}
+ */
+export const message = OioMessage;
+
+/**
+ * @deprecated 请使用{@link OioNotification}
+ */
+export const notification = OioNotification;

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

@@ -0,0 +1,67 @@
+@import './parameters.scss';
+
+.ant-notification {
+  z-index: 99999;
+
+  .ant-notification-notice {
+    padding: 20px 20px 20px 25px;
+    line-height: normal;
+    border-radius: 8px;
+    box-shadow: var(--oio-box-shadow);
+    background: var(--oio-background);
+
+    .ant-notification-notice-icon {
+      margin-left: 0;
+      top: 16px;
+    }
+  }
+  .ant-notification-notice-with-icon {
+    .ant-notification-notice-message {
+      color: var(--oio-text-color);
+      font-weight: bold;
+      margin-bottom: 0;
+
+      .oio-notification-message-title {
+        margin-bottom: 5px;
+      }
+    }
+    .ant-notification-notice-description {
+      margin-top: 3px;
+      color: var(--oio-text-color-secondary);
+    }
+    .ant-notification-notice-message,
+    .ant-notification-notice-description {
+      margin-left: calc(var(--oio-margin) + 24px);
+    }
+  }
+}
+
+.#{$notificationClassPrefix} {
+  &.ant-message-notice {
+    .ant-message-notice-content {
+      min-width: 300px !important;
+      text-align: left !important;
+    }
+  }
+}
+
+.ant-message-notice {
+  .ant-message-notice-content {
+    border-radius: 8px;
+    box-shadow: var(--oio-box-shadow);
+    background: var(--oio-background);
+    padding: 9px 12px;
+    color: var(--oio-text-color);
+    .ant-message-custom-content {
+      .oio-icon {
+        position: relative;
+        top: -1px;
+      }
+      & > span {
+        &:last-child {
+          margin-left: 9px;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,5 @@
+@import '../../../style/global-parameters.scss';
+
+$notificationPrefix: $prefix + -notification;
+$notificationParameterPrefix: $parameterPrefix + -notification;
+$notificationClassPrefix: $notificationPrefix;

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

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