@oinone/kunlun-vue-ui-antd 6.2.0

package/src/component/oio-tree-select/oio-tree-select.vue

@@ -0,0 +1,180 @@
+<script lang="ts">
+import { CastHelper, StringHelper } from '@oinone/kunlun-shared';
+import {
+  defaultTreeSelectProperties,
+  fillTreeSelectNodesProperties,
+  OioTreeSelectProps,
+  PropRecordHelper,
+  SelectMode,
+  SimpleTreeSelected,
+  TreeSelectNode,
+  TreeSelectNodeChangeEvent,
+  TreeSelectProperties
+} from '@oinone/kunlun-vue-ui-common';
+import { Popover as APopover, TreeSelect as ATreeSelect } from 'ant-design-vue';
+import { computed, createVNode, defineComponent } from 'vue';
+import { DEFAULT_PREFIX } from '../../theme';
+import { useMaxTagPlaceholder } from '../../vc-component';
+import { OioEmptyData } from '../oio-empty';
+
+export default defineComponent({
+  name: 'OioTreeSelect',
+  components: {
+    ATreeSelect,
+    APopover
+  },
+  inheritAttrs: false,
+  props: {
+    ...OioTreeSelectProps
+  },
+  slots: ['title'],
+  emits: ['update:value', 'update:expanded-keys', 'update:search-value', 'change', 'search'],
+  setup(props, context) {
+    const internalProperties = computed<TreeSelectProperties>(() => {
+      return {
+        ...defaultTreeSelectProperties,
+        ...(props.properties || {})
+      };
+    });
+
+    const internalOptions = computed<TreeSelectNode[]>(() => {
+      const options = props.options || [];
+      if (props.mappingOptions) {
+        return fillTreeSelectNodesProperties(options, internalProperties.value, props.customFillProperties) || [];
+      }
+      return CastHelper.cast(options);
+    });
+
+    const multiple = computed(() => {
+      return props.mode === SelectMode.multiple;
+    });
+
+    const onChange = (
+      selectedValues: SimpleTreeSelected | SimpleTreeSelected[],
+      matchKeys: null,
+      selectedEvent: { triggerValue: string; checked: boolean }
+    ) => {
+      const event: TreeSelectNodeChangeEvent = {
+        targetValue: selectedEvent.triggerValue,
+        checked: selectedEvent.checked,
+        origin: selectedEvent
+      };
+      context.emit('update:value', selectedValues);
+      context.emit('change', selectedValues, event);
+    };
+
+    const onUpdateExpandedKeys = (val) => {
+      context.emit('update:expanded-keys', val);
+    };
+
+    const onUpdateSearchValue = (val) => {
+      context.emit('update:search-value', val);
+    };
+
+    const onSearch = (val) => {
+      context.emit('search', val);
+    };
+
+    return {
+      internalProperties,
+      internalOptions,
+      multiple,
+
+      ...useMaxTagPlaceholder(),
+
+      onChange,
+      onUpdateExpandedKeys,
+      onUpdateSearchValue,
+      onSearch
+    };
+  },
+  render() {
+    const {
+      value,
+      options,
+      filterOption,
+      mappingOptions,
+      placeholder,
+      allowClear,
+      readonly,
+      disabled,
+      searchValue,
+      enableSearch,
+      dropdownClassName,
+      getTriggerContainer,
+      multipleCheckedStrategy,
+      treeCheckStrictly,
+      expandedKeys,
+
+      loading,
+      loadData,
+
+      internalProperties,
+      internalOptions,
+      multiple,
+
+      tagRender,
+      maxTagCount,
+      maxTagPlaceholder,
+      defaultMaxTagPlaceholder,
+
+      onChange,
+      onUpdateExpandedKeys,
+      onUpdateSearchValue,
+      onSearch
+    } = this;
+
+    const classNames = [`${DEFAULT_PREFIX}-select`, `${DEFAULT_PREFIX}-tree-select`];
+    if (readonly) {
+      classNames.push(`${DEFAULT_PREFIX}-select-readonly`);
+    }
+    if (disabled) {
+      classNames.push(`${DEFAULT_PREFIX}-select-disabled`);
+    }
+    if (multiple) {
+      classNames.push(`${DEFAULT_PREFIX}-select-multiple`);
+    }
+
+    const children = PropRecordHelper.collectionSlots(this.$slots, ['title']);
+
+    return createVNode(
+      ATreeSelect,
+      {
+        placeholder,
+        allowClear,
+        disabled: readonly || disabled,
+        dropdownClassName: StringHelper.append(
+          [`${DEFAULT_PREFIX}-select-dropdown`, `${DEFAULT_PREFIX}-tree-select-dropdown`],
+          dropdownClassName
+        ).join(' '),
+        getPopupContainer: getTriggerContainer,
+        labelInValue: true,
+        value,
+        searchValue,
+        showSearch: enableSearch,
+        treeData: mappingOptions ? internalOptions : options,
+        filterTreeNode: filterOption,
+        treeNodeFilterProp: internalProperties.filterProp,
+        multiple,
+        treeCheckable: multiple,
+        showCheckedStrategy: multipleCheckedStrategy,
+        treeCheckStrictly,
+        treeExpandedKeys: expandedKeys,
+        loading,
+        loadData,
+        tagRender,
+        maxTagCount,
+        maxTagPlaceholder: maxTagPlaceholder || defaultMaxTagPlaceholder,
+        notFoundContent: createVNode(OioEmptyData, { loading }),
+        ...PropRecordHelper.collectionBasicProps(this.$attrs, classNames),
+        'onUpdate:value': undefined,
+        'onUpdate:tree-expanded-keys': onUpdateExpandedKeys,
+        'onUpdate:search-value': onUpdateSearchValue,
+        onChange,
+        onSearch
+      },
+      children
+    );
+  }
+});
+</script>

package/src/component/oio-tree-select/style/index.scss

@@ -0,0 +1,92 @@
+@import './parameters.scss';
+
+.#{$treeSelectClassPrefix} {
+  height: var(--oio-height);
+  box-sizing: border-box;
+  &.ant-select.oio-select-multiple {
+    min-height: var(--oio-height);
+    height: auto;
+    .ant-select-selector {
+      position: relative;
+      line-height: var(--oio-height);
+      height: auto;
+      &::after {
+        line-height: var($treeSelectParameterPrefix + -selection-line-height);
+      }
+      .ant-select-selection-placeholder {
+        top: 50%;
+        display: flex;
+        align-items: center;
+      }
+
+      .ant-select-selection-item,
+      .ant-select-selection-search,
+      .ant-select-selection-placeholder {
+        height: var($treeSelectParameterPrefix + -selection-height);
+        line-height: var($treeSelectParameterPrefix + -selection-line-height);
+      }
+    }
+  }
+}
+
+.#{$treeSelectClassPrefix}-dropdown {
+  .ant-select-tree-checkbox-indeterminate .ant-select-tree-checkbox-inner {
+    &:after {
+      background-color: var($parameterPrefix + -primary-color);
+    }
+  }
+
+  .ant-select-tree {
+    background: var(--oio-select-dropdown-background);
+    .ant-select-tree-title {
+      color: var(--oio-text-color);
+    }
+
+    .ant-select-tree-checkbox:not(.ant-select-tree-checkbox-checked) {
+      background: var(--oio-checkbox-background);
+      .ant-select-tree-checkbox-inner {
+        background-color: var(--oio-background);
+        border: 1px solid var(--oio-border-color);
+      }
+    }
+
+    .anticon.anticon-caret-down {
+      color: var(--oio-icon-color);
+    }
+  }
+
+  .ant-select-tree-checkbox-checked .ant-select-tree-checkbox-inner {
+    background-color: var($parameterPrefix + -primary-color);
+    border-color: var($parameterPrefix + -primary-color);
+  }
+
+  .ant-select-tree-checkbox-input:focus + .ant-select-tree-checkbox-inner,
+  .ant-select-tree-checkbox-wrapper:hover .ant-select-tree-checkbox-inner,
+  .ant-select-tree-checkbox:hover .ant-select-tree-checkbox-inner {
+    border-color: var($parameterPrefix + -primary-color);
+  }
+
+  .ant-select-tree-node-content-wrapper {
+    &:hover {
+      background-color: rgba(var($parameterPrefix + -primary-color-rgb), 0.1);
+    }
+
+    &.ant-select-tree-node-selected {
+      background-color: rgba(var($parameterPrefix + -primary-color-rgb), 0.1);
+
+      .ant-select-tree-title {
+        color: var($parameterPrefix + -primary-color);
+        font-weight: 500;
+      }
+
+      &:after {
+        position: absolute;
+        right: 8px;
+        top: 0;
+        content: '✓';
+        color: var($parameterPrefix + -primary-color);
+        font-weight: 500;
+      }
+    }
+  }
+}

package/src/component/oio-tree-select/style/parameters.scss

@@ -0,0 +1,5 @@
+@import '../../../style/global-parameters.scss';
+
+$treeSelectPrefix: $prefix + -tree-select;
+$treeSelectParameterPrefix: $parameterPrefix + -tree-select;
+$treeSelectClassPrefix: $treeSelectPrefix;

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

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

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

@@ -0,0 +1,232 @@
+<script lang="ts">
+import { ReturnPromise, ReturnVoid } from '@oinone/kunlun-shared';
+import { FileModel, IUploadMethod, OioUploadProps, PropRecordHelper, useUploadFileEvent } from '@oinone/kunlun-vue-ui-common';
+import { Upload as AUpload } from 'ant-design-vue';
+import { isArray, isNil, isString } from 'lodash-es';
+import { computed, createVNode, defineComponent, nextTick, ref, watch } from 'vue';
+import { DEFAULT_PREFIX } from '../../theme';
+import { OioMessage } from '../oio-notification';
+
+interface FileItem {
+  uid: string;
+  size: number;
+}
+
+export default defineComponent({
+  name: 'OioUpload',
+  components: {
+    AUpload
+  },
+  inheritAttrs: false,
+  props: {
+    ...OioUploadProps
+  },
+  emits: ['success', 'failure'],
+  setup(props, context) {
+    const uploadList = ref<FileModel[]>([]);
+    const refreshKey = ref<number>(0);
+    const isUpload = ref<boolean>(false);
+
+    const continuedUpload = ref(() => {});
+
+    watch(
+      () => ({
+        list: props.uploadList,
+        isUpload: isUpload.value
+      }),
+      (val) => {
+        if (val && val.list && !isUpload.value) {
+          uploadList.value = val.list;
+          refreshKey.value++;
+        }
+      },
+      { immediate: true }
+    );
+
+    const deleteFile = (file: FileItem, fileList: FileItem[]) => {
+      if (props.manual) {
+        return;
+      }
+      const uid = file.uid;
+      const index = fileList.findIndex((v) => v.uid === uid);
+      if (index !== -1) {
+        fileList.splice(index, 1);
+      }
+    };
+
+    const beforeUpload = (file: FileItem, fileList: FileItem[]): boolean => {
+      const limitSize = props.limitSize;
+      if (limitSize && limitSize > 0) {
+        if (file.size > limitSize * 1024 * 1024) {
+          OioMessage.error(`单个文件大小不允许超过${limitSize}MB`);
+          deleteFile(file, fileList);
+          nextTick(() => {
+            refreshKey.value++;
+          });
+          return false;
+        }
+      }
+      const res = props.beforeUpload?.(file, fileList);
+      if (res != null) {
+        if (!res) {
+          deleteFile(file, fileList);
+          nextTick(() => {
+            refreshKey.value++;
+          });
+          return false;
+        }
+
+        return res;
+      }
+      return true;
+    };
+
+    let timer: any = null;
+
+    const customRequest = props.customRequest
+      ? props.customRequest
+      : async ({ file, onSuccess, onError, onProgress }) => {
+          // 上传成功的回调
+          const success = async (result, downloadUrl) => {
+            const submitFileObject = result;
+            if (submitFileObject && submitFileObject.url) {
+              onSuccess(
+                {
+                  ...submitFileObject,
+                  uid: file.uid
+                },
+                file
+              );
+
+              submitFileObject.uid = file.uid;
+              context.emit('success', submitFileObject);
+              timer = setTimeout(() => {
+                isUpload.value = false;
+              }, 100);
+
+              return;
+            }
+          };
+
+          // 上传失败的回调
+          const error = (...arg) => {
+            onError(...arg);
+          };
+
+          // 上传中的回调
+          const progress = (...arg) => {
+            isUpload.value = true;
+            onProgress(...arg);
+            if (timer) {
+              clearTimeout(timer);
+            }
+          };
+
+          const continued =
+            (await useUploadFileEvent({
+              file,
+              accept: realAccept.value,
+              managed: props.managed,
+              cdnKey: props.cdnKey,
+              uploadMethod: IUploadMethod.Multipart,
+              partSize: props.partSize,
+              parallel: props.parallel,
+              chunkUploadThreshold: props.chunkUploadThreshold,
+              onSuccess: success,
+              onError: error,
+              onProgress: progress
+            })) || ({} as any);
+
+          if (continued) {
+            continuedUpload.value = continued;
+          }
+        };
+
+    const remove = (file): ReturnPromise<boolean | ReturnVoid> => {
+      if (props.removeCallback) {
+        return props.removeCallback(file);
+      }
+      return true;
+    };
+
+    const realAccept = computed<string>(() => {
+      const val = props.accept;
+      if (isNil(val)) {
+        return '';
+      }
+      if (isString(val)) {
+        return val;
+      }
+      if (isArray(val)) {
+        return val.join(',');
+      }
+      return '';
+    });
+
+    return {
+      uploadList,
+      refreshKey,
+      realAccept,
+      beforeUpload,
+      customRequest,
+      remove,
+      continuedUpload
+    };
+  },
+  render() {
+    const uploadClassList = [`${DEFAULT_PREFIX}-upload`];
+    if (this.readonly) {
+      uploadClassList.push(`${DEFAULT_PREFIX}-upload-readonly`);
+    }
+    if (this.disabled) {
+      uploadClassList.push(`${DEFAULT_PREFIX}-upload-disabled`);
+    }
+    let showUploadList: boolean | { showPreviewIcon?: boolean; showRemoveIcon?: boolean } | undefined =
+      this.showUploadList;
+    if (isNil(showUploadList)) {
+      showUploadList = {
+        showPreviewIcon: true,
+        showRemoveIcon: !this.readonly
+      };
+    }
+    const slots = PropRecordHelper.collectionSlots(this.$slots, [
+      {
+        origin: 'default',
+        isNotNull: true
+      },
+      'itemRender'
+    ]) as Record<string, any>;
+
+    const mapSlotIfPresent = (slotName, context) => {
+      if (this.$slots[slotName]) {
+        slots[slotName] = (arg) => this.$slots[slotName]?.({ ...arg, ...context });
+      }
+    };
+
+    mapSlotIfPresent('previewIcon', { continuedUpload: this.continuedUpload });
+    mapSlotIfPresent('removeIcon', { continuedUpload: this.continuedUpload });
+
+    return createVNode(
+      AUpload,
+      {
+        key: this.refreshKey,
+        defaultFileList: this.uploadList,
+        limit: this.limit,
+        accept: this.realAccept,
+        onReject: this.onReject,
+        multiple: this.multiple,
+        listType: this.listType,
+        progress: this.progress,
+        showUploadList,
+        customRequest: this.customRequest,
+        onRemove: this.remove,
+        disabled: this.disabled,
+        beforeUpload: this.beforeUpload,
+        onDrop: this.onDrop,
+        ...PropRecordHelper.collectionBasicProps(this.$attrs, uploadClassList)
+      },
+      slots
+    );
+  }
+});
+</script>

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

@@ -0,0 +1,66 @@
+@import './parameters.scss';
+@import '../../../style/mixin.scss';
+
+.#{$uploadClassPrefix} {
+  &.ant-upload-picture-card-wrapper {
+    .ant-upload-list-picture-card {
+      .ant-upload-list-item:hover {
+        .ant-upload-list-item-card-actions-btn,
+        .anticon-close {
+          border-color: transparent;
+        }
+      }
+    }
+    .ant-upload-select-picture-card {
+      @include oio-appearance($uploadParameterPrefix);
+      margin: 0;
+
+      .ant-upload {
+        color: var(--oio-upload-text-color);
+      }
+
+      &:hover {
+        @include oio-hover($uploadParameterPrefix);
+      }
+
+      &.ant-upload-disabled {
+        cursor: unset;
+        background-color: var($parameterPrefix + -disabled-bg);
+
+        &:hover {
+          border-color: var($uploadParameterPrefix + -border-color);
+        }
+      }
+    }
+  }
+
+  .ant-upload-list {
+    .ant-upload-list-item-card-actions .anticon {
+      color: var(--oio-icon-color);
+    }
+
+    .ant-btn:focus,
+    .ant-btn:hover {
+      border: none;
+    }
+  }
+}
+
+.#{$uploadClassPrefix}-disabled {
+}
+.#{$uploadClassPrefix}-readonly {
+  .ant-upload-select {
+    pointer-events: none;
+  }
+
+  .ant-upload-select-picture-card {
+    pointer-events: none;
+    background-color: var(--oio-readonly-bg);
+  }
+
+  .ant-upload-list-item-actions {
+    span[aria-label='delete'] {
+      display: none;
+    }
+  }
+}

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

@@ -0,0 +1,5 @@
+@import '../../../style/global-parameters.scss';
+
+$uploadPrefix: $prefix + -upload;
+$uploadParameterPrefix: $parameterPrefix + -upload;
+$uploadClassPrefix: $uploadPrefix;

package/src/index.ts

@@ -0,0 +1,3 @@
+import './style/index.scss';
+
+export * from './component';

package/src/shim-translate.d.ts

@@ -0,0 +1,7 @@
+export {};
+
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProperties {
+    $translate<T extends string | null | undefined = string | null | undefined>(text: T): T;
+  }
+}

package/src/shim-vue.d.ts

@@ -0,0 +1,6 @@
+declare module '*.vue' {
+  import { defineComponent } from 'vue';
+
+  const Component: ReturnType<typeof defineComponent>;
+  export default Component;
+}

package/src/style/global-parameters.scss

@@ -0,0 +1,9 @@
+$prefix: oio;
+$parameterPrefix: --oio;
+$classPrefix: $prefix;
+$readonlyParameterPrefix: -readonly;
+$disabledParameterPrefix: -disabled;
+
+$iconPrefix: $prefix + -icon;
+$iconParameterPrefix: $parameterPrefix + -icon;
+$iconClassPrefix: $iconPrefix;

package/src/style/index.scss

@@ -0,0 +1,31 @@
+@import '../component/oio-block/style/index.scss';
+@import '../component/oio-button/style/index.scss';
+@import '../component/oio-cascader/style/index.scss';
+@import '../component/oio-date-time-picker/style/index.scss';
+@import '../component/oio-date-time-range-picker/style/index.scss';
+@import '../component/oio-divider/style/index.scss';
+@import '../component/oio-drawer/style/index.scss';
+@import '../component/oio-dropdown/style/index.scss';
+@import '../component/oio-empty/style/index.scss';
+@import '../component/oio-form/style/index.scss';
+@import '../component/oio-group/style/index.scss';
+@import '../component/oio-inner-popup/style/index.scss';
+@import '../component/oio-input/style/index.scss';
+@import '../component/oio-modal/style/index.scss';
+@import '../component/oio-notification/style/index.scss';
+@import '../component/oio-pagination/style/index.scss';
+@import '../component/oio-popconfirm/style/index.scss';
+@import '../component/oio-select/style/index.scss';
+@import '../component/oio-slider/style/index.scss';
+@import '../component/oio-spin/style/index.scss';
+@import '../component/oio-switch/style/index.scss';
+@import '../component/oio-tabs/style/index.scss';
+@import '../component/oio-textarea/style/index.scss';
+@import '../component/oio-tooltip/style/index.scss';
+@import '../component/oio-tree/style/index.scss';
+@import '../component/oio-tree-select/style/index.scss';
+@import '../component/oio-upload/style/index.scss';
+@import '../component/oio-checkbox/style/index.scss';
+@import '../component/oio-radio/style/index.scss';
+@import '../component/oio-popover/style/index.scss';
+@import '../component/oio-collapse/style/index.scss';