@oinone/kunlun-vue-ui-antd 6.3.9 → 6.4.0

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

@@ -16,8 +16,8 @@ export default defineComponent({
     ...OioInputProps
   },
   slots: ['prepend', 'append', 'prefix', 'suffix'],
-  emits: ['update:value', 'press-enter'],
-  setup(props, context) {
+  emits: ['update:value', 'press-enter', 'change', 'focus', 'blur'],
+  setup(props, { emit, expose }) {
     const origin = ref();
 
     const internalValue = ref<string | undefined>();
@@ -29,7 +29,7 @@ export default defineComponent({
         return props.value;
       },
       set(value) {
-        context.emit('update:value', value);
+        emit('update:value', value);
         internalValue.value = value;
       }
     });
@@ -57,12 +57,21 @@ export default defineComponent({
     };
 
     const onPressEnter = (event: KeyboardEvent) => {
-      context.emit('press-enter', event);
+      emit('press-enter', event);
     };
 
-    context.expose({
+    const onFocus = (val: FocusEvent) => {
+      emit('focus', val);
+    };
+
+    const onBlur = (val: FocusEvent) => {
+      emit('blur', val);
+    };
+
+    expose({
       focus: (options?: InputFocusOptions) => origin.value.focus(options),
-      blur: () => origin.value.blur()
+      blur: () => origin.value.blur(),
+      originInput: origin
     });
 
     onMounted(() => {
@@ -77,7 +86,9 @@ export default defineComponent({
       autocomplete,
 
       onUpdateValue,
-      onPressEnter
+      onPressEnter,
+      onFocus,
+      onBlur
     };
   },
   render() {
@@ -98,6 +109,8 @@ export default defineComponent({
         ...this.$attrs,
         'onUpdate:value': this.onUpdateValue,
         onPressEnter: this.onPressEnter,
+        onFocus: this.onFocus,
+        onBlur: this.onBlur,
         class: StringHelper.append(inputClassList, CastHelper.cast(this.$attrs.class)),
         ref: 'origin'
       },

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

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

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

@@ -0,0 +1,17 @@
+<template>
+  <div>hello world</div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'OioListItem',
+  components: {},
+  inheritAttrs: false,
+  props: {},
+  setup(props) {
+    return {};
+  }
+});
+</script>
+<style lang="scss"></style>

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

@@ -0,0 +1,206 @@
+<script lang="ts">
+import { OioListItem, StringHelper } from '@oinone/kunlun-shared';
+import { OioIcon, PropRecordHelper, SelectMode } from '@oinone/kunlun-vue-ui-common';
+import { Radio as ARadio } from 'ant-design-vue';
+import { computed, createVNode, defineComponent, PropType, ref, VNode } from 'vue';
+import { DEFAULT_PREFIX } from '../../theme';
+import { OioCheckbox } from '../oio-checkbox';
+import { OioEmptyData } from '../oio-empty';
+
+export default defineComponent({
+  name: 'OioList',
+  components: {
+    OioEmptyData,
+    OioIcon,
+    OioCheckbox,
+    ARadio
+  },
+  inheritAttrs: false,
+  props: {
+    list: {
+      type: Array as PropType<OioListItem[]>,
+      required: true
+    },
+    showIcon: {
+      type: Boolean
+    },
+    mode: {
+      type: String as PropType<SelectMode | keyof typeof SelectMode>
+    },
+    showCheckedAll: {
+      type: Boolean
+    },
+    checkedAll: {
+      type: Boolean
+    },
+    halfCheckedAll: {
+      type: Boolean
+    },
+    checkedKeys: {
+      type: Array as PropType<string[]>
+    },
+    selectable: {
+      type: Boolean
+    },
+    selectedKeys: {
+      type: Array as PropType<string[]>
+    }
+  },
+  emits: ['update:checkedAll', 'update:halfCheckedAll', 'update:selectedKeys', 'checked', 'selected'],
+  setup(props, { emit }) {
+    const internalSelectedKeys = ref<string[]>([]);
+    const selectedKeys = computed({
+      get() {
+        return props.selectedKeys || internalSelectedKeys.value;
+      },
+      set(val: string[]) {
+        internalSelectedKeys.value = val;
+        emit('update:selectedKeys', val);
+      }
+    });
+
+    const onChecked = (item: OioListItem, checked: boolean) => {
+      emit('checked', item, checked);
+    };
+
+    const onCheckedAll = (checked: boolean) => {
+      emit('update:checkedAll', checked);
+      emit('update:halfCheckedAll', false);
+    };
+
+    const onSelected = (e: MouseEvent, item: OioListItem) => {
+      e.preventDefault?.();
+      e.stopPropagation?.();
+      const val = !!selectedKeys.value.find((v) => v === item.key);
+      if (val) {
+        selectedKeys.value = [];
+      } else {
+        selectedKeys.value = [item.key];
+      }
+      emit('selected', item, !val);
+    };
+
+    return {
+      selectedKeys,
+      onChecked,
+      onCheckedAll,
+      onSelected
+    };
+  },
+  render() {
+    const {
+      $attrs,
+      $slots,
+      $translate,
+
+      mode,
+      list,
+      checkedKeys,
+      showIcon,
+      showCheckedAll,
+      checkedAll,
+      halfCheckedAll,
+      selectable,
+      selectedKeys,
+      onChecked,
+      onCheckedAll,
+      onSelected
+    } = this;
+    const { default: defaultSlot, icon: iconSlot } = PropRecordHelper.collectionSlots($slots, [
+      {
+        origin: 'default',
+        default: ({ item }) => {
+          return [createVNode('span', {}, item.label)];
+        }
+      },
+      {
+        origin: 'icon',
+        default: ({ item }) => {
+          if (item.icon) {
+            return [
+              createVNode(OioIcon, {
+                icon: item.icon,
+                color: '#ffffff'
+              })
+            ];
+          }
+          let first = item.label.trim().charAt(0);
+          if (StringHelper.isLetter(first.charCodeAt(0))) {
+            first = first.toUpperCase();
+          }
+          return [createVNode('span', {}, first)];
+        }
+      }
+    ]);
+    const children: VNode[] = [];
+    const renderList = list || [];
+    const itemClassNames = [`${DEFAULT_PREFIX}-list-item`];
+    if (selectable) {
+      itemClassNames.push(`${DEFAULT_PREFIX}-list-item-selectable`);
+    }
+    if (renderList.length) {
+      if (mode === SelectMode.multiple && showCheckedAll) {
+        children.push(
+          createVNode(
+            'div',
+            {
+              key: '__checked_all__',
+              class: itemClassNames
+            },
+            [
+              createVNode('div', { class: `${DEFAULT_PREFIX}-list-item-label` }, $translate('全选')),
+              createVNode(OioCheckbox, {
+                checked: checkedAll,
+                indeterminate: halfCheckedAll,
+                'onUpdate:checked': onCheckedAll
+              })
+            ]
+          )
+        );
+      }
+      for (const item of renderList) {
+        const itemNodes: VNode[] = [];
+        const contentNodes: VNode[] = [];
+        if (showIcon) {
+          contentNodes.push(createVNode('div', { class: `${DEFAULT_PREFIX}-list-item-icon` }, iconSlot({ item })));
+        }
+        contentNodes.push(createVNode('div', { class: `${DEFAULT_PREFIX}-list-item-label` }, defaultSlot({ item })));
+        itemNodes.push(createVNode('div', { class: `${DEFAULT_PREFIX}-list-item-content` }, contentNodes));
+        if (mode === SelectMode.multiple) {
+          itemNodes.push(
+            createVNode(OioCheckbox, {
+              checked: item.checked,
+              'onUpdate:checked': (val: boolean) => onChecked(item, val)
+            })
+          );
+        } else if (mode === SelectMode.single) {
+          itemNodes.push(
+            createVNode(ARadio, {
+              class: 'oio-radio',
+              checked: item.key === checkedKeys?.[0],
+              'onUpdate:checked': (val: boolean) => onChecked(item, item.key !== checkedKeys?.[0])
+            })
+          );
+        }
+        const itemProps: Record<string, unknown> = { key: item.key, class: itemClassNames };
+        if (selectable) {
+          if (selectedKeys.includes(item.key)) {
+            itemProps.class = [...itemClassNames, `${DEFAULT_PREFIX}-list-item-activated`];
+          }
+          itemProps.onClick = (e: MouseEvent) => onSelected(e, item);
+        }
+        children.push(createVNode('div', itemProps, itemNodes));
+      }
+    } else {
+      children.push(createVNode(OioEmptyData));
+    }
+    return createVNode(
+      'div',
+      {
+        ...PropRecordHelper.collectionBasicProps($attrs, [`${DEFAULT_PREFIX}-list`])
+      },
+      children
+    );
+  }
+});
+</script>

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

@@ -0,0 +1,51 @@
+@import './parameters.scss';
+
+.#{$listClassPrefix} {
+  display: flex;
+  flex-direction: column;
+  row-gap: 8px;
+
+  .#{$listClassPrefix}-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 24px;
+    border-radius: 4px;
+    padding: 0 8px;
+
+    &-selectable {
+      user-select: none;
+    }
+
+    &-selectable:hover {
+      background-color: var(--oio-menu-hover-background-color);
+      cursor: pointer;
+    }
+
+    &-activated {
+      background-color: var(--oio-menu-hover-background-color);
+    }
+
+    .ant-radio-wrapper.oio-radio {
+      margin-right: 0;
+    }
+  }
+
+  .#{$listClassPrefix}-item-content {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    column-gap: 8px;
+  }
+
+  .#{$listClassPrefix}-item-icon {
+    width: 20px;
+    height: 20px;
+    line-height: 20px;
+    text-align: center;
+    font-size: 10px;
+    color: #ffffff;
+    background-color: #4589ff;
+    border-radius: 50%;
+  }
+}

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

@@ -0,0 +1,5 @@
+@import '../../../style/global-parameters';
+
+$listPrefix: $prefix + -list;
+$listParameterPrefix: $parameterPrefix + -list;
+$listClassPrefix: $listPrefix;

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

@@ -1,20 +1,24 @@
 <script lang="ts">
-import { CastHelper, StringHelper, uniqueKeyGenerator } from '@oinone/kunlun-shared';
+import { CastHelper, CSSStyle, StringHelper, uniqueKeyGenerator } from '@oinone/kunlun-shared';
 import {
   OioCloseIcon,
+  OioIcon,
   OioModalProps,
+  PopupDisplayAs,
   PropRecordHelper,
   StyleHelper,
   useDraggable,
-  useModal
+  useInjectOioDefaultFormContext,
+  useModal,
+  useProviderOioDefaultFormContext
 } 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 { computed, createVNode, defineComponent, nextTick, ref, watch, withModifiers } from 'vue';
 import { DEFAULT_PREFIX } from '../../theme';
 import { OioButton } from '../oio-button';
 import { OioSpin } from '../oio-spin';
-import { OioTooltip, OioTooltipHelp } from '../oio-tooltip';
+import { OioTooltip } from '../oio-tooltip';
 
 export default defineComponent({
   name: 'OioModal',
@@ -22,15 +26,18 @@ export default defineComponent({
     AModal,
     OioButton,
     OioSpin,
-    OioTooltip
+    OioTooltip,
+    OioIcon
   },
   inheritAttrs: false,
   props: {
     ...OioModalProps
   },
   slots: ['default', 'title', 'header', 'footer', 'closeIcon'],
-  emits: ['update:visible'],
+  emits: ['update:visible', 'update:displayAs', 'enter', 'cancel'],
   setup(props, context) {
+    const formContext = useInjectOioDefaultFormContext();
+
     const internalId = `${DEFAULT_PREFIX}-modal-${uniqueKeyGenerator()}`;
 
     const modalRef = ref<HTMLElement | undefined>();
@@ -72,12 +79,21 @@ export default defineComponent({
       { immediate: true }
     );
 
+    useProviderOioDefaultFormContext({
+      ...formContext,
+      getTriggerContainer() {
+        return document.body;
+      }
+    });
+
     return {
       ...useModal(props, context),
       id
     };
   },
   render() {
+    const mainClassName = `${DEFAULT_PREFIX}-modal`;
+
     const slots = PropRecordHelper.collectionSlots(this.$slots, [
       {
         origin: 'default',
@@ -105,28 +121,66 @@ export default defineComponent({
     } 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;
+      const originalTitleSlot = slots.title;
+
+      // 默认标题插槽
+      const createDefaultTitle = () => [createVNode('span', {}, this.$translate(this.title || '弹窗'))];
+
+      slots.title = () => {
+        // 获取原始或默认的标题插槽
+        const originalSlot = [...(originalTitleSlot?.() || createDefaultTitle())];
+
+        if (this.help) {
+          originalSlot.push(
+            createVNode(OioTooltip, {
+              content: this.help
+            })
+          );
+        }
+
+        // 控制图标
+        const controlIcons = [
+          this.showPopupToggle &&
+            !this.isFullScreen &&
+            createVNode(OioIcon, {
+              style: { cursor: 'pointer' },
+              icon: this.displayAs === PopupDisplayAs.modal ? 'oinone-drawer' : 'oinone-dialog',
+              size: 16,
+              onClick: withModifiers(this.onDisplayAsSwitch, ['stop'])
+            }),
+          this.enabledFullScreen &&
+            createVNode(OioIcon, {
+              style: { cursor: 'pointer' },
+              icon: this.isFullScreen ? 'oinone-suoxiao1' : 'oinone-fangda2',
+              size: 16,
+              onClick: withModifiers(this.onFullSwitch, ['stop'])
+            })
+        ].filter(Boolean);
+
+        // 包装控制区域
+        if (controlIcons.length > 0) {
+          originalSlot.push(
+            createVNode(
+              'div',
+              {
+                class: `${mainClassName}-title-extend`
+              },
+              controlIcons
+            )
+          );
+        }
+
+        return originalSlot;
+      };
     }
+
     if (!slots.closeIcon) {
       slots.closeIcon = () => [createVNode(OioCloseIcon)];
     }
 
-    const mainClassName = `${DEFAULT_PREFIX}-modal`;
     const classNames = [mainClassName];
     if (this.widthClassSuffix) {
       classNames.push(`${mainClassName}-width-${this.widthClassSuffix}`);
@@ -134,30 +188,31 @@ export default defineComponent({
     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`);
     }
+
+    const style = {} as CSSStyle;
+    if (!this.heightClassSuffix && this.height) {
+      classNames.push(`${mainClassName}-height-custom`);
+      style[`--${mainClassName}-custom-height`] = StyleHelper.px(this.height)!;
+    }
+
     return createVNode(
       AModal,
       {
-        ...PropRecordHelper.collectionBasicProps(this.$attrs, classNames),
+        ...PropRecordHelper.collectionBasicProps(this.$attrs, classNames, style),
         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
-        },
+        width: this.width,
+        wrapClassName: StringHelper.append(
+          [`${mainClassName}-wrapper`],
+          CastHelper.cast(this.wrapperClassName),
+          this.drawerModalClassName
+        ).join(' '),
         wrapProps: {
           ...(this.wrapperProps || {}),
           id: this.id