@oinone/kunlun-vue-ui-antd 6.2.0

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

@@ -0,0 +1,105 @@
+<script lang="ts">
+import { OioPaginationProps, PatchFlags, PropRecordHelper } from '@oinone/kunlun-vue-ui-common';
+import { Pagination as APagination } from 'ant-design-vue';
+import { isBoolean, isFunction, toString } from 'lodash-es';
+import { computed, createVNode, defineComponent } from 'vue';
+import { DEFAULT_PREFIX } from '../../theme';
+
+export default defineComponent({
+  name: 'OioPagination',
+  components: {
+    APagination
+  },
+  props: {
+    ...OioPaginationProps
+  },
+  slots: ['pageSizeOption'],
+  emits: ['update:current-page', 'update:page-size', 'change'],
+  setup(props, context) {
+    const virtualTotal = computed(() => {
+      const pageSize = props.pageSize || props.defaultPageSize;
+      const currentPage = props.currentPage || props.defaultCurrentPage;
+      const totalPage = props.total / pageSize;
+      if (totalPage >= 1) {
+        const diffPage = totalPage - currentPage;
+        if (diffPage <= -1) {
+          return currentPage * pageSize;
+        }
+      }
+      return props.total;
+    });
+
+    const onUpdateCurrentPage = (val) => {
+      context.emit('update:current-page', val);
+    };
+
+    const onUpdatePageSize = (val) => {
+      context.emit('update:page-size', val);
+    };
+
+    const onChange = (currentPage: number, pageSize: number) => {
+      context.emit('change', currentPage, pageSize);
+    };
+
+    return {
+      virtualTotal,
+
+      onUpdateCurrentPage,
+      onUpdatePageSize,
+      onChange
+    };
+  },
+  render() {
+    const { showTotal, showLastPage, onUpdateCurrentPage, onUpdatePageSize, onChange } = this;
+    let finalShowTotal: ((total: number, range) => string) | undefined;
+    if (isBoolean(showTotal)) {
+      if (showTotal) {
+        finalShowTotal = (total: number): string => {
+          return `${total} ${this.$translate('条')}`;
+        };
+      }
+    } else if (isFunction(showTotal)) {
+      finalShowTotal = showTotal;
+    }
+    const className = `${DEFAULT_PREFIX}-pagination`;
+    const props: Record<string, unknown> = {
+      ...PropRecordHelper.collectionBasicProps(this.$attrs, [className, !showLastPage ? `${className}-simple` : '']),
+      current: this.currentPage,
+      defaultCurrent: this.defaultCurrentPage,
+      pageSize: this.pageSize,
+      defaultPageSize: this.defaultPageSize,
+      pageSizeOptions: this.pageSizeOptions?.map((v) => toString(v)),
+      total: this.virtualTotal,
+      showTotal: (_, range) => finalShowTotal?.(this.total, range),
+      showSizeChanger: this.showSizeChanger,
+      showQuickJumper: this.showJumper,
+      disabled: this.disabled,
+      'onUpdate:current': onUpdateCurrentPage,
+      'onUpdate:page-size': onUpdatePageSize,
+      onChange,
+      onShowSizeChange: onChange
+    };
+    let { pageSizeOption } = this.$slots;
+    if (!pageSizeOption) {
+      pageSizeOption = (option: { value: string }) => [
+        createVNode('span', {}, `${option.value} ${this.$translate('条/页')}`, PatchFlags.TEXT)
+      ];
+    }
+    props.buildOptionText = pageSizeOption;
+    if (this.showJumper) {
+      let locale: Record<string, unknown> | undefined = props.locale as Record<string, unknown>;
+      if (!locale) {
+        locale = {};
+        props.locale = locale;
+      }
+      if (!locale.jump_to) {
+        locale.jump_to = this.$translate('跳至');
+      }
+      if (!locale.page) {
+        locale.page = this.$translate('页');
+      }
+    }
+    return createVNode(APagination, props);
+  }
+});
+</script>

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

@@ -0,0 +1,181 @@
+@import './parameters.scss';
+@import '../../oio-input/style/mixin.scss';
+
+.#{$paginationClassPrefix} {
+  &.ant-pagination {
+    min-height: var($paginationParameterPrefix + -height);
+    font-size: var($parameterPrefix + -font-size);
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+  }
+
+  .ant-pagination-prev,
+  .ant-pagination-next {
+    button {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+
+  .ant-pagination-prev,
+  .ant-pagination-next,
+  .ant-pagination-item {
+    min-width: var($paginationParameterPrefix + -item-width);
+    height: var($paginationParameterPrefix + -item-height);
+
+    vertical-align: -1px;
+    a {
+      display: flex;
+      height: 100%;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+  &-simple {
+    .ant-pagination-jump-next + .ant-pagination-item {
+      display: none;
+    }
+  }
+  &.ant-pagination-simple {
+    .ant-pagination-prev,
+    .ant-pagination-next {
+      display: flex;
+      align-items: center;
+    }
+
+    .ant-pagination-simple-pager {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  .ant-pagination-total-text {
+    height: var($paginationParameterPrefix + -item-height);
+    line-height: var($paginationParameterPrefix + -item-height);
+    vertical-align: -1px;
+    color: var(--oio-text-color);
+  }
+
+  .ant-pagination-prev .ant-pagination-item-link,
+  .ant-pagination-next .ant-pagination-item-link,
+  .ant-pagination-item {
+    border: var($parameterPrefix + -border-width) var($parameterPrefix + -border-style)
+      var($parameterPrefix + -border-color);
+    border-radius: var($parameterPrefix + -border-radius);
+
+    a {
+      color: var($parameterPrefix + -text-color);
+    }
+
+    &:hover {
+      background-color: var($parameterPrefix + -primary-color-hover);
+      border-color: var($parameterPrefix + -primary-color-hover);
+      color: #ffffff;
+
+      a {
+        color: #ffffff;
+      }
+    }
+  }
+
+  .ant-pagination-item-active {
+    background-color: var($parameterPrefix + -primary-color);
+    border-color: var($parameterPrefix + -primary-color);
+
+    a {
+      color: #ffffff;
+    }
+  }
+
+  .ant-pagination-jump-next .ant-pagination-item-container .ant-pagination-item-ellipsis,
+  .ant-pagination-jump-prev .ant-pagination-item-container .ant-pagination-item-ellipsis {
+    color: var(--oio-text-color);
+  }
+
+  .ant-pagination-options {
+    height: var($paginationParameterPrefix + -item-height);
+    line-height: var($paginationParameterPrefix + -item-height);
+
+    .ant-select-single:not(.ant-select-customize-input):hover {
+      z-index: auto;
+    }
+
+    .ant-select {
+      .ant-select-selector {
+        height: var($paginationParameterPrefix + -item-height);
+        line-height: var($paginationParameterPrefix + -item-height);
+        border: var($parameterPrefix + -border-width) var($parameterPrefix + -border-style)
+          var($parameterPrefix + -border-color);
+        border-radius: var($parameterPrefix + -border-radius);
+        background: var(--oio-pagination-background);
+        color: var(--oio-pagination-text-color);
+
+        &:hover {
+          border-color: var($parameterPrefix + -primary-color-hover);
+        }
+
+        .ant-select-selection-item {
+          display: flex;
+          align-items: center;
+        }
+      }
+      .ant-select-arrow {
+        transform: translate(0, -50%);
+        color: var(--oio-pagination-text-color);
+        margin: 0;
+      }
+      .ant-select-dropdown .ant-select-item-option-selected:not(.ant-select-item-option-disabled):after {
+        display: none;
+      }
+    }
+
+    .ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) {
+      .ant-select-selector {
+        border-color: var($parameterPrefix + -primary-color-focus);
+        box-shadow: none;
+      }
+    }
+
+    .ant-select-dropdown .ant-select-item-option-selected:not(.ant-select-item-option-disabled):after {
+      display: none;
+    }
+
+    & > *:last-child {
+      margin-right: 0;
+    }
+  }
+
+  .ant-select-dropdown {
+    .ant-select-item {
+      text-align: left;
+    }
+  }
+
+  .ant-pagination-next .ant-pagination-item-link,
+  .ant-pagination-prev .ant-pagination-item-link,
+  .ant-pagination-item {
+    background: var(--oio-pagination-background);
+    color: var(--oio-pagination-text-color);
+    border-color: var(--oio-pagination-border-color);
+  }
+
+  .ant-pagination-item-active {
+    background-color: var(--oio-primary-color);
+    border-color: var(--oio-primary-color);
+  }
+
+  .ant-pagination-options-quick-jumper {
+    height: var($paginationParameterPrefix + -item-height);
+    line-height: var($paginationParameterPrefix + -item-height);
+    color: var(--oio-text-color);
+
+    input {
+      @include input-style();
+      height: var($paginationParameterPrefix + -item-height);
+      line-height: var($paginationParameterPrefix + -item-height);
+      border-radius: var($parameterPrefix + -border-radius);
+    }
+  }
+}

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

@@ -0,0 +1,5 @@
+@import '../../../style/global-parameters.scss';
+
+$paginationPrefix: $prefix + -pagination;
+$paginationParameterPrefix: $parameterPrefix + -pagination;
+$paginationClassPrefix: $paginationPrefix;

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

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

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

@@ -0,0 +1,192 @@
+<script lang="ts">
+import { ObjectUtils, StringHelper } from '@oinone/kunlun-shared';
+import { OioPopconfirmProps, PopconfirmPlacement, PropRecordHelper } from '@oinone/kunlun-vue-ui-common';
+import { Popconfirm as APopconfirm, Popover as APopover } from 'ant-design-vue';
+import { isBoolean, isFunction } from 'lodash-es';
+import { computed, createVNode, defineComponent, h, ref, Slot } from 'vue';
+import { DEFAULT_PREFIX } from '../../theme';
+
+export default defineComponent({
+  name: 'OioPopconfirm',
+  components: {
+    APopconfirm,
+    APopover
+  },
+  inheritAttrs: false,
+  props: {
+    ...OioPopconfirmProps
+  },
+  emits: ['update:visible'],
+  setup(props, context) {
+    const _visible = ref<boolean>(false);
+
+    const rawVisibleChange = (val: boolean) => {
+      if (isBoolean(props.visible)) {
+        context.emit('update:visible', val);
+      } else {
+        _visible.value = val;
+      }
+    };
+
+    const visible = computed<boolean>({
+      get() {
+        return isBoolean(props.visible) ? props.visible : _visible.value;
+      },
+      set(val) {
+        if (props.manual) {
+          return;
+        }
+        rawVisibleChange(val);
+      }
+    });
+
+    const visibleChange = async (val: boolean) => {
+      if (!val) {
+        visible.value = false;
+        return;
+      }
+      if (isBoolean(props.condition)) {
+        if (props.condition) {
+          visible.value = val;
+        } else {
+          confirm();
+        }
+      } else if (isFunction(props.condition)) {
+        const result = await props.condition();
+        if (ObjectUtils.isNotEmpty(result)) {
+          if (result) {
+            visible.value = val;
+          } else {
+            confirm();
+          }
+        }
+      } else {
+        visible.value = val;
+      }
+    };
+
+    const placement = computed<string | undefined>(() => {
+      const { placement: _placement } = props;
+      if (!_placement) {
+        return undefined;
+      }
+      switch (_placement) {
+        case PopconfirmPlacement.tl:
+          return 'topLeft';
+        case PopconfirmPlacement.tm:
+          return 'top';
+        case PopconfirmPlacement.tr:
+          return 'topRight';
+        case PopconfirmPlacement.rt:
+          return 'rightTop';
+        case PopconfirmPlacement.rm:
+          return 'right';
+        case PopconfirmPlacement.rb:
+          return 'rightBottom';
+        case PopconfirmPlacement.bl:
+          return 'bottomLeft';
+        case PopconfirmPlacement.bm:
+          return 'bottom';
+        case PopconfirmPlacement.br:
+          return 'bottomRight';
+        case PopconfirmPlacement.lt:
+          return 'leftTop';
+        case PopconfirmPlacement.lm:
+          return 'left';
+        case PopconfirmPlacement.lb:
+          return 'leftBottom';
+        default:
+          return 'top';
+      }
+    });
+
+    const confirm = () => {
+      visible.value = false;
+      if (props.confirmCallback) {
+        props.confirmCallback();
+      }
+    };
+
+    const cancel = () => {
+      visible.value = false;
+      if (props.cancelCallback) {
+        props.cancelCallback();
+      }
+    };
+
+    return {
+      visible,
+      visibleChange,
+      placement,
+      confirm,
+      cancel
+    };
+  },
+  render() {
+    const defaultSlot = this.$slots.default;
+    if (defaultSlot) {
+      const [title, icon] = ['title', 'icon'].map((name) => {
+        const slot = this.$slots[name];
+        return slot ? slot() : undefined;
+      });
+      const children: Record<string, Slot> = {
+        default: defaultSlot
+      };
+      if (title) {
+        children.title = () => title;
+      } else {
+        children.title = () => {
+          return [
+            h(
+              'div',
+              {
+                class: `${DEFAULT_PREFIX}-popconfirm-content`
+              },
+              [
+                h(
+                  'div',
+                  {
+                    class: `${DEFAULT_PREFIX}-popconfirm-title`
+                  },
+                  [h('span', this.$translate(this.title))]
+                ),
+                h(
+                  'p',
+                  {
+                    class: `${DEFAULT_PREFIX}-popconfirm-text`
+                  },
+                  this.$translate(this.text)
+                )
+              ]
+            )
+          ];
+        };
+      }
+      if (icon) {
+        children.icon = () => icon;
+      }
+      return createVNode(
+        APopconfirm,
+        {
+          visible: this.visible,
+          placement: this.placement,
+          destroyTooltipOnHide: this.destroyOnClose,
+          arrowPointAtCenter: true,
+          okText: this.$translate(this.enterText),
+          cancelText: this.$translate(this.cancelText),
+          getPopupContainer: this.getTriggerContainer,
+          ...PropRecordHelper.collectionBasicProps(this.$attrs),
+          onVisibleChange: this.visibleChange,
+          onConfirm: this.confirm,
+          onCancel: this.cancel,
+          overlayClassName: StringHelper.append([`${DEFAULT_PREFIX}-popconfirm-overlay`], this.overlayClassName).join(
+            ' '
+          )
+        },
+        children
+      );
+    }
+    return [];
+  }
+});
+</script>

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

@@ -0,0 +1,54 @@
+@import './parameters.scss';
+
+.#{$popconfirmClassPrefix}-overlay {
+  &.ant-popover {
+    z-index: 1050;
+  }
+
+  .ant-popover-inner,
+  .ant-popover-arrow-content {
+    background-color: var($popconfirmParameterPrefix + -background);
+  }
+
+  .ant-popover-inner-content {
+    padding: 8px;
+
+    .ant-popover-message {
+      padding: 4px 0;
+
+      .ant-popover-message-title {
+        color: var($popconfirmParameterPrefix + -color);
+      }
+
+      .#{$popconfirmClassPrefix}-content {
+        .#{$popconfirmClassPrefix}-title {
+        }
+
+        .#{$popconfirmClassPrefix}-text {
+          margin: 4px 0;
+          max-width: 300px;
+        }
+      }
+    }
+
+    .ant-popover-buttons {
+      margin-bottom: 0;
+
+      button {
+        @import '../../oio-button/style/a-button.scss';
+
+        &.ant-btn {
+          height: 22px;
+          padding: 2px 6px;
+          margin: 0 3px;
+          line-height: 12px;
+
+          & > span {
+            font-size: 12px;
+            line-height: inherit;
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,5 @@
+@import '../../../style/global-parameters.scss';
+
+$popconfirmPrefix: $prefix + -popconfirm;
+$popconfirmParameterPrefix: $parameterPrefix + -popconfirm;
+$popconfirmClassPrefix: $popconfirmPrefix;

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

@@ -0,0 +1,16 @@
+@import './parameters.scss';
+
+.#{$popoverClassPrefix} {
+  &.ant-popover {
+    .ant-popover-inner,
+    .ant-popover-arrow-content {
+      background: var(--oio-background);
+      box-shadow: var(--oio-box-shadow);
+    }
+
+    .ant-popover-title {
+      color: var(--oio-text-color);
+      border-bottom-color: var(--oio-border-color);
+    }
+  }
+}

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

@@ -0,0 +1,5 @@
+@import '../../../style/global-parameters.scss';
+
+$popoverPrefix: $prefix + -popover;
+$popoverParameterPrefix: $parameterPrefix + -popover;
+$popoverClassPrefix: $popoverPrefix;

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

@@ -0,0 +1,24 @@
+@import './parameters.scss';
+
+.ant-radio {
+  .ant-radio-inner {
+    background-color: var(--oio-background);
+    border: 1px solid var(--oio-border-color);
+  }
+
+  .ant-radio-checked .ant-radio-inner {
+    border-color: var(--oio-primary-color, #606cee);
+  }
+}
+
+.ant-radio-group {
+  .ant-radio-button-wrapper {
+    background-color: var(--oio-background);
+    border-color: var(--oio-border-color);
+    color: var(--oio-text-color);
+  }
+
+  .ant-radio-button-wrapper:not(:first-child):before {
+    background-color: var(--oio-border-color);
+  }
+}

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

@@ -0,0 +1,5 @@
+@import '../../../style/global-parameters.scss';
+
+$radioPrefix: $prefix + -radio;
+$radioParameterPrefix: $parameterPrefix + -radio;
+$radioClassPrefix: $radioPrefix;

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

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