@oinone/kunlun-vue-ui-antd 6.2.0

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

@@ -0,0 +1,81 @@
+<script lang="ts">
+import { CastHelper, StringHelper } from '@oinone/kunlun-shared';
+import {
+  convertAntdDropdownPlacement,
+  OioDropdownPlacement,
+  OioDropdownProps,
+  OioDropdownTrigger,
+  PropRecordHelper
+} from '@oinone/kunlun-vue-ui-common';
+import { Dropdown as ADropdown } from 'ant-design-vue';
+import { isNil, isString } from 'lodash-es';
+import { computed, createVNode, defineComponent } from 'vue';
+import { DEFAULT_PREFIX } from '../../theme';
+
+export default defineComponent({
+  name: 'OioDropdown',
+  components: {
+    ADropdown
+  },
+  inheritAttrs: false,
+  props: {
+    ...OioDropdownProps
+  },
+  slots: ['default', 'overlay'],
+  emits: ['update:value'],
+  setup(props, context) {
+    const trigger = computed<string[]>(() => {
+      const triggers: string[] = [];
+      const triggerProp = props.trigger;
+      if (isNil(triggerProp)) {
+        triggers.push(OioDropdownTrigger.hover);
+        triggers.push(OioDropdownTrigger.click);
+      } else if (isString(triggerProp)) {
+        triggers.push(triggerProp);
+      } else {
+        for (const tgr of triggerProp) {
+          triggers.push(tgr);
+        }
+      }
+      return triggers;
+    });
+
+    const placement = computed<string | undefined>(() => {
+      return convertAntdDropdownPlacement(props.placement as OioDropdownPlacement);
+    });
+
+    const onUpdateValue = (val: boolean) => {
+      context.emit('update:value', val);
+    };
+
+    return {
+      trigger,
+      placement,
+
+      onUpdateValue
+    };
+  },
+  render() {
+    const componentData: Record<string, unknown> = {
+      ...PropRecordHelper.collectionBasicProps(this.$attrs, [`${DEFAULT_PREFIX}-dropdown`]),
+      disabled: this.disabled,
+      trigger: this.trigger,
+      placement: this.placement,
+      overlayStyle: this.overlayStyle,
+      forceRender: this.forceRender,
+      destroyPopupOnHide: this.destroyOnHide,
+      getPopupContainer: this.getTriggerContainer,
+      'onUpdate:visible': () => {},
+      onVisibleChange: this.onUpdateValue,
+      overlayClassName: StringHelper.append(
+        [`${DEFAULT_PREFIX}-dropdown-overlay`],
+        CastHelper.cast(this.overlayClassName)
+      ).join(' ')
+    };
+    if (this.value != null) {
+      componentData.visible = this.value;
+    }
+    return createVNode(ADropdown, componentData, PropRecordHelper.collectionSlots(this.$slots, ['default', 'overlay']));
+  }
+});
+</script>

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

@@ -0,0 +1,30 @@
+@import '../../../style/mixin.scss';
+@import './parameters.scss';
+
+.#{$dropdownClassPrefix}-overlay {
+  .ant-dropdown-menu {
+    background-color: var(--oio-dropdown-background-color);
+    box-shadow: var(--oio-dropdown-box-shadow);
+    border-radius: var(--oio-border-radius);
+  }
+
+  .ant-dropdown-menu-item,
+  .ant-dropdown-menu-submenu-title {
+    color: var(--oio-dropdown-color);
+
+    &:hover {
+      background-color: var(--oio-dropdown-item-background-color-hover);
+      color: var(--oio-dropdown-color-hover);
+    }
+  }
+
+  .ant-dropdown-menu-item-disabled,
+  .ant-dropdown-menu-submenu-title-disabled {
+    color: var(--oio-dropdown-color-disabled);
+
+    &:hover {
+      background-color: var(--oio-dropdown-item-background-color-disabled-hover);
+      color: var(--oio-dropdown-color-disabled-hover);
+    }
+  }
+}

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

@@ -0,0 +1,5 @@
+@import '../../../style/global-parameters.scss';
+
+$dropdownPrefix: $prefix + -dropdown;
+$dropdownParameterPrefix: $parameterPrefix + -dropdown;
+$dropdownClassPrefix: $dropdownPrefix;

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

@@ -0,0 +1 @@
+export { default as OioEmptyData } from './oio-empty-data.vue';

package/src/component/oio-empty/oio-empty-data.vue

@@ -0,0 +1,47 @@
+<script lang="ts">
+import { OioEmptyDataProps, PropRecordHelper } from '@oinone/kunlun-vue-ui-common';
+import { Empty as AEmpty } from 'ant-design-vue';
+import { createVNode, defineComponent } from 'vue';
+import { DEFAULT_PREFIX } from '../../theme';
+import { OioSpin } from '../oio-spin';
+
+export default defineComponent({
+  name: 'OioEmptyData',
+  components: {
+    AEmpty,
+    OioSpin
+  },
+  props: {
+    ...OioEmptyDataProps
+  },
+  slots: ['image', 'description'],
+  render() {
+    const { loading, loadingIndicator, wrapperClassName, image } = this;
+    const slots = PropRecordHelper.collectionSlots(this.$slots, [{ origin: 'image' }, { origin: 'description' }]);
+    let { description } = this;
+    if (!slots.description && !description) {
+      description = this.$translate('暂无数据');
+    }
+    const componentProps = {
+      ...PropRecordHelper.collectionBasicProps(this.$attrs, [`${DEFAULT_PREFIX}-empty-data`]),
+      image,
+      description
+    };
+    const component = createVNode(AEmpty, componentProps, slots);
+    if (loading == null) {
+      return component;
+    }
+    return createVNode(
+      OioSpin,
+      {
+        loading,
+        loadingIndicator,
+        wrapperClassName
+      },
+      {
+        default: () => [component]
+      }
+    );
+  }
+});
+</script>

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

@@ -0,0 +1,6 @@
+.oio-empty-data {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}

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

@@ -0,0 +1,2 @@
+export { default as OioForm } from './oio-form.vue';
+export { default as OioFormItem } from './oio-form-item.vue';

package/src/component/oio-form/oio-form-item.vue

@@ -0,0 +1,81 @@
+<script lang="ts">
+import { CastHelper, StringHelper } from '@oinone/kunlun-shared';
+import {
+  AFormItemProps,
+  FormLayout,
+  OioFormItemProps,
+  PropRecordHelper,
+  useInjectOioFormContext
+} from '@oinone/kunlun-vue-ui-common';
+import { FormItem as AFormItem } from 'ant-design-vue';
+import { computed, createVNode, defineComponent, ref } from 'vue';
+import { DEFAULT_PREFIX } from '../../theme';
+
+export default defineComponent({
+  name: 'OioFormItem',
+  components: {
+    AFormItem
+  },
+  inheritAttrs: false,
+  props: {
+    ...OioFormItemProps
+  },
+  slots: ['default', 'label', 'extra', 'help'],
+  setup(props, context) {
+    const origin = ref();
+    const formContext = useInjectOioFormContext();
+
+    const vertical = computed(() => {
+      let layout = props.layout;
+      if (!layout && formContext) {
+        layout = formContext.layout.value;
+      }
+      return layout === FormLayout.vertical;
+    });
+
+    // fixme @zbh 打包后 useInjectForm获取的对象与FormItem使用useInjectForm获取的对象不一致，目前使用自定义的OioFormContext进行处理
+    // const subFormContext = { ...formContext };
+    // subFormContext.vertical = vertical;
+    // useProvideForm(subFormContext);
+
+    context.expose({
+      isVertical: () => vertical.value,
+      onFieldBlur: () => origin.value.onFieldBlur(),
+      onFieldChange: () => origin.value.onFieldChange(),
+      clearValidate: () => origin.value.clearValidate(),
+      resetField: () => origin.value.resetField()
+    });
+
+    return {
+      origin,
+      vertical
+    };
+  },
+  render() {
+    const formItemClassList = [`${DEFAULT_PREFIX}-form-item`];
+    if (this.vertical) {
+      formItemClassList.push(`${DEFAULT_PREFIX}-form-item-vertical`);
+    } else {
+      formItemClassList.push(`${DEFAULT_PREFIX}-form-item-horizontal`);
+    }
+    return createVNode(
+      AFormItem,
+      {
+        ...PropRecordHelper.convert(AFormItemProps, CastHelper.cast(this)),
+        ...this.$attrs,
+        class: StringHelper.append(formItemClassList, CastHelper.cast(this.$attrs.class)),
+        ref: 'origin'
+      },
+      PropRecordHelper.collectionSlots(this.$slots, [
+        {
+          origin: 'default',
+          isNotNull: true
+        },
+        'label',
+        'extra',
+        'help'
+      ])
+    );
+  }
+});
+</script>

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

@@ -0,0 +1,102 @@
+<script lang="ts">
+import { CastHelper, StringHelper } from '@oinone/kunlun-shared';
+import {
+  NamePath,
+  OioFormInstance,
+  OioFormProps,
+  PropRecordHelper,
+  useOioFormLayoutContext
+} from '@oinone/kunlun-vue-ui-common';
+import { Form as AForm, FormInstance as AFormInstance } from 'ant-design-vue';
+import { isNil } from 'lodash-es';
+import { createVNode, defineComponent, ref, VNode } from 'vue';
+import { DEFAULT_PREFIX } from '../../theme';
+import { OioSpin } from '../oio-spin';
+
+export default defineComponent({
+  name: 'OioForm',
+  components: {
+    AForm,
+    OioSpin
+  },
+  inheritAttrs: false,
+  props: {
+    ...OioFormProps
+  },
+  setup(props, context) {
+    useOioFormLayoutContext(props);
+
+    const origin = ref<AFormInstance>();
+
+    const instance: OioFormInstance<AFormInstance> = {
+      getOrigin(): AFormInstance {
+        return origin.value!;
+      },
+      resetFields: async (names?: NamePath) => {
+        origin.value!.resetFields(CastHelper.cast(names));
+      },
+      clearValidate: async (names?: NamePath) => {
+        origin.value!.clearValidate(CastHelper.cast(names));
+      },
+      validate: async (names?: NamePath) => {
+        return origin.value!.validate(CastHelper.cast(names));
+      },
+      validateFields: async (names?: NamePath) => {
+        return origin.value!.validateFields(CastHelper.cast(names));
+      },
+      scrollToField: async (names?: NamePath) => {
+        origin.value!.scrollToField(CastHelper.cast(names));
+      }
+    };
+
+    context.expose(instance);
+
+    return {
+      origin
+    };
+  },
+  render() {
+    const formComponent: VNode = createVNode(
+      AForm,
+      {
+        name: this.name,
+        rules: this.rules,
+        layout: this.layout,
+        labelCol: this.labelCol,
+        wrapperCol: this.wrapperCol,
+        labelAlign: this.labelAlign,
+        colon: this.colon,
+        validateTrigger: this.validateTrigger,
+        validateOnRuleChange: this.validateOnRuleChange,
+        ...this.$attrs,
+        model: this.data,
+        class: StringHelper.append([`${DEFAULT_PREFIX}-form`], CastHelper.cast(this.$attrs.class)),
+        ref: 'origin'
+      },
+      PropRecordHelper.collectionSlots(this.$slots, [
+        {
+          origin: 'default',
+          isNotNull: true
+        }
+      ])
+    );
+    if (isNil(this.loading)) {
+      return formComponent;
+    }
+    return createVNode(
+      OioSpin,
+      {
+        loading: this.loading,
+        loadingIndicator: this.loadingIndicator,
+        wrapperClassName: StringHelper.append(
+          [`${DEFAULT_PREFIX}-form-wrapper`],
+          CastHelper.cast(this.wrapperClassName)
+        ).join(' ')
+      },
+      {
+        default: () => [formComponent]
+      }
+    );
+  }
+});
+</script>

package/src/component/oio-form/style/animation.scss

@@ -0,0 +1,17 @@
+@keyframes antShowHelpIn {
+  0% {
+    transform: translateY(-5px);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes antShowHelpOut {
+  to {
+    transform: translateY(-5px);
+    opacity: 0;
+  }
+}

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

@@ -0,0 +1,135 @@
+@import '../../oio-input/style/parameters.scss';
+@import './parameters.scss';
+@import './animation.scss';
+
+@mixin form-item-label {
+  max-height: var(--oio-horizontal-label-height);
+  height: auto;
+  min-height: var($parameterPrefix + -height);
+  max-width: var(--ss-ant-form-item-label-width);
+  margin-bottom: 0;
+  padding-bottom: 0;
+  text-align: right;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+
+  & > label {
+    max-height: var(--oio-horizontal-label-height);
+    height: auto;
+    line-height: var($parameterPrefix + -height-sm);
+  }
+}
+
+.#{$formClassPrefix} {
+  .oio-form-item {
+    margin-bottom: var($parameterPrefix + -margin-lg);
+
+    &.ant-form-item-with-help {
+      margin-bottom: var($parameterPrefix + -margin-lg);
+    }
+  }
+
+  .#{$formItemClassPrefix}.#{$formItemClassPrefix}-horizontal {
+    flex-flow: row nowrap;
+    align-items: center;
+
+    & > .ant-form-item-label {
+      @include form-item-label;
+    }
+  }
+
+  .#{$formItemClassPrefix}-vertical {
+    flex-direction: column;
+  }
+
+  .#{$formItemClassPrefix} {
+    & > .ant-form-item-label {
+      align-self: flex-start;
+
+      & > label {
+        font-size: var($parameterPrefix + -font-size);
+        color: var($parameterPrefix + -text-color);
+        font-weight: var($parameterPrefix + -font-weight);
+        height: var($parameterPrefix + -height);
+        line-height: var($parameterPrefix + -height);
+        vertical-align: top;
+      }
+    }
+
+    .ant-form-item-explain,
+    .ant-form-item-extra {
+      margin-top: 4px;
+      width: 100%;
+      min-height: var($parameterPrefix + -line-height-sm);
+      line-height: var($parameterPrefix + -line-height-sm);
+      font-size: var($parameterPrefix + -font-size-sm);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      color: var(--oio-placeholder-color);
+    }
+  }
+
+  &.ant-form-vertical {
+    .#{$formItemClassPrefix}-vertical {
+      & > .ant-form-item-label {
+        height: var(--oio-label-height);
+        line-height: 18px;
+        flex-basis: var(--oio-label-height);
+        padding: 0;
+        margin-bottom: var($parameterPrefix + -margin-xs);
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        word-break: break-all;
+
+        & > label {
+          height: var(--oio-label-height);
+          line-height: var(--oio-label-height);
+        }
+      }
+
+      .ant-form-item-extra,
+      .ant-form-item-explain {
+        margin-top: 4px;
+        min-height: var($parameterPrefix + -line-height-xxs);
+        font-size: var($parameterPrefix + -font-size-sm);
+        line-height: var($parameterPrefix + -line-height-xxs);
+        color: var(--oio-placeholder-color);
+      }
+    }
+
+    .#{$formItemClassPrefix}-horizontal {
+      flex-flow: row nowrap;
+
+      & > .ant-form-item-label {
+        @include form-item-label;
+      }
+    }
+  }
+}
+
+.#{$formItemClassPrefix} {
+  &.ant-form-item-has-error {
+    & > .ant-form-item-control > .ant-form-item-extra {
+      display: none;
+    }
+
+    .oio-input,
+    .ant-calendar-picker-input {
+      border-color: var($inputParameterPrefix + -error-border-color);
+    }
+
+    .ant-select:not(.ant-select-disabled):not(.ant-select-customize-input) .ant-select-selector {
+      background: var(--oio-select-background);
+    }
+  }
+}
+
+.ant-form-item-has-error .ant-input-number:not([disabled]):hover,
+.ant-form-item-has-error .ant-mention-wrapper .ant-mention-editor,
+.ant-form-item-has-error .ant-mention-wrapper .ant-mention-editor:not([disabled]):hover,
+.ant-form-item-has-error .ant-picker:not([disabled]):hover {
+  background-color: var(--oio-input-background-hover);
+}

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

@@ -0,0 +1,9 @@
+@import '../../../style/global-parameters.scss';
+
+$formPrefix: $prefix + -form;
+$formParameterPrefix: $parameterPrefix + -form;
+$formClassPrefix: $formPrefix;
+
+$formItemPrefix: $prefix + -form-item;
+$formItemParameterPrefix: $parameterPrefix + -form-item;
+$formItemClassPrefix: $formItemPrefix;

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

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

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

@@ -0,0 +1,158 @@
+<script lang="ts">
+import { CastHelper, CSSStyle, StringHelper } from '@oinone/kunlun-shared';
+import { OioGalleryItem, OioGalleryProps, PropRecordHelper } from '@oinone/kunlun-vue-ui-common';
+import { isNil, isObject, isString } from 'lodash-es';
+import { computed, createVNode, defineComponent, VNode } from 'vue';
+import { DEFAULT_PREFIX } from '../../theme';
+import { OioCol, OioRow } from '../oio-block';
+import { OioEmptyData } from '../oio-empty';
+import { OioSpin } from '../oio-spin';
+
+function generatorKey(data: Record<string, unknown>, itemKey: string): string | undefined {
+  const key = data[itemKey];
+  if (isString(key)) {
+    return key;
+  }
+  return undefined;
+}
+
+export default defineComponent({
+  name: 'OioGallery',
+  inheritAttrs: false,
+  components: {
+    OioCol,
+    OioEmptyData,
+    OioRow,
+    OioSpin
+  },
+  props: {
+    ...OioGalleryProps
+  },
+  slots: ['default', 'header', 'footer'],
+  setup(props) {
+    const cols = computed(() => props.cols || 4);
+
+    const gutter = computed(() => {
+      if (props.gutter == null) {
+        return '16,16';
+      }
+      return props.gutter;
+    });
+
+    const flexBasic = computed(() => {
+      return 100 / cols.value;
+    });
+
+    const flex = computed(() => {
+      return `1 0 ${flexBasic.value}%`;
+    });
+
+    const rowStyle = computed(() => {
+      const style = {} as CSSStyle;
+      if (cols.value === 1) {
+        style.flexDirection = 'column';
+        style.alignItems = 'center';
+      }
+      return style;
+    });
+
+    const colStyle = computed(() => {
+      let style = {} as CSSStyle;
+      const defaultWidth = `${flexBasic.value}%`;
+      style.minWidth = defaultWidth;
+      style.maxWidth = defaultWidth;
+      if (isObject(props.itemStyle)) {
+        const hasWidth = !isNil(props.itemStyle?.width);
+        const hasMinWidth = !isNil(props.itemStyle?.minWidth);
+        const hasMaxWidth = !isNil(props.itemStyle?.maxWidth);
+        if (hasWidth) {
+          style.minWidth = CastHelper.cast(null);
+          style.maxWidth = CastHelper.cast(null);
+        } else if (hasMaxWidth && !hasMinWidth) {
+          style.minWidth = CastHelper.cast(null);
+        }
+        style = {
+          ...style,
+          ...props.itemStyle
+        };
+      }
+      return style;
+    });
+
+    return {
+      gutter,
+      flex,
+      rowStyle,
+      colStyle
+    };
+  },
+  render() {
+    const {
+      default: defaultSlot,
+      header: headerSlot,
+      footer: footerSlot
+    } = PropRecordHelper.collectionSlots(this.$slots, [
+      { origin: 'default', isNotNull: true },
+      { origin: 'header' },
+      { origin: 'footer' }
+    ]);
+    const children: VNode[] = [];
+    if (headerSlot) {
+      children.push(createVNode('div', { class: `${DEFAULT_PREFIX}-gallery-header` }, headerSlot()));
+    }
+    const rowChildren: VNode[] = [];
+    this.list?.forEach((data: Record<string, unknown>, index) => {
+      const key = generatorKey(data, this.itemKey);
+      const colChildren = defaultSlot({ key, data, index } as OioGalleryItem);
+      rowChildren.push(
+        createVNode(
+          OioCol,
+          {
+            key,
+            flex: this.flex,
+            class: StringHelper.append([`${DEFAULT_PREFIX}-gallery-item`], CastHelper.cast(this.itemClassName)),
+            style: this.colStyle
+          },
+          {
+            default: () => colChildren
+          }
+        )
+      );
+    });
+    if (rowChildren.length) {
+      children.push(
+        createVNode(
+          OioRow,
+          { class: `${DEFAULT_PREFIX}-gallery-content`, gutter: this.gutter, wrap: true, style: this.rowStyle },
+          { default: () => rowChildren }
+        )
+      );
+    } else {
+      children.push(createVNode(OioEmptyData, { class: `${DEFAULT_PREFIX}-gallery-content` }));
+    }
+    if (footerSlot) {
+      children.push(createVNode('div', { class: `${DEFAULT_PREFIX}-gallery-footer` }, footerSlot()));
+    }
+    const gallery = createVNode(
+      'div',
+      PropRecordHelper.collectionBasicProps(this.$attrs, [`${DEFAULT_PREFIX}-gallery`]),
+      children
+    );
+    if (isNil(this.loading)) {
+      return gallery;
+    }
+    return createVNode(
+      OioSpin,
+      {
+        class: 'default-main-view-spin',
+        loading: this.loading,
+        loadingIndicator: this.loadingIndicator,
+        wrapperClassName: StringHelper.append([`${DEFAULT_PREFIX}-gallery-wrapper`], this.wrapperClassName)
+      },
+      {
+        default: () => [gallery]
+      }
+    );
+  }
+});
+</script>

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

@@ -0,0 +1,2 @@
+export { default as OioGroup } from './oio-group.vue';
+export { default as OioGroupHelp } from './oio-group-help.vue';