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

package/src/component/oio-drawer/useDrawer.ts

@@ -1,69 +1,218 @@
 import { isString } from 'lodash-es';
-import { computed } from 'vue';
-import { usePopup } from '../vc-popup/usePopup';
-import { DrawerHeight, DrawerWidth } from './typing';
+import { computed, ref } from 'vue';
+import { DEFAULT_PREFIX } from '../../theme';
+import { StyleHelper } from '../../util';
+import { ModalHeight, ModalWidth } from '../oio-modal';
+import { PopupDisplayAs, usePopup } from '../vc-popup';
+import { DrawerHeight, DrawerPlacement, DrawerWidth } from './typing';
 
 export function useDrawer(props, context) {
+  const internalDisplayAs = ref<PopupDisplayAs | undefined>();
+  const displayAs = computed({
+    get() {
+      if (props.displayAs == null) {
+        return internalDisplayAs.value || PopupDisplayAs.drawer;
+      }
+      return props.displayAs as PopupDisplayAs;
+    },
+    set(value: PopupDisplayAs) {
+      internalDisplayAs.value = value;
+      context.emit('update:displayAs', value);
+    }
+  });
+
+  const isFullScreen = ref(false);
+  const internalWidth = ref<string | undefined>();
+  const internalHeight = ref<string | undefined>();
+
+  // 弹窗形式的抽屉
+  const modalDrawerClassName = computed(() => {
+    const classNames: string[] = [];
+    if (displayAs.value === PopupDisplayAs.modal) {
+      classNames.push(`${DEFAULT_PREFIX}-drawer-modal-mode`);
+      if (height.value == null) {
+        classNames.push(`${DEFAULT_PREFIX}-drawer-modal-auto-height`);
+      }
+    }
+    if (internalWidth.value === 'full') {
+      classNames.push(`${DEFAULT_PREFIX}-drawer-fullscreen`);
+    }
+    return classNames;
+  });
+
   const placement = computed(() => {
+    if (displayAs.value === PopupDisplayAs.modal) {
+      return DrawerPlacement.right;
+    }
     return props.placement?.toLowerCase?.();
   });
 
+  const usingWidth = computed(() => {
+    return placement.value === 'left' || placement.value === 'right';
+  });
+
+  const usingHeight = computed(() => {
+    return placement.value === 'top' || placement.value === 'bottom';
+  });
+
   const width = computed(() => {
     if (!props.visible) {
       return '0';
     }
-    const _width = props.width;
-    if (isString(_width)) {
-      const realWidth = DrawerWidth[_width.toLowerCase()];
-      if (realWidth) {
-        return null;
+    if (internalWidth.value != null) {
+      switch (displayAs.value) {
+        case PopupDisplayAs.drawer: {
+          const val = DrawerWidth[internalWidth.value];
+          if (val != null) {
+            return val;
+          }
+          return internalWidth.value;
+        }
+        case PopupDisplayAs.modal: {
+          const val = ModalWidth[internalWidth.value];
+          if (val != null) {
+            return val;
+          }
+          return internalWidth.value;
+        }
       }
     }
-    return _width;
+    if (usingWidth.value) {
+      const _width = props.width;
+      if (isString(_width)) {
+        const realWidth = DrawerWidth[_width.toLowerCase()];
+        if (realWidth) {
+          return '';
+        }
+      }
+      return StyleHelper.px(_width);
+    }
+    return undefined;
   });
 
   const widthClassSuffix = computed(() => {
-    const _width = props.width;
-    if (isString(_width)) {
-      const realWidth = DrawerWidth[_width.toLowerCase()];
-      if (realWidth) {
-        return _width.toLowerCase();
+    if (usingWidth.value) {
+      const _width = internalWidth.value || props.width;
+      if (isString(_width)) {
+        const realWidth = DrawerWidth[_width.toLowerCase()];
+        if (realWidth) {
+          return _width.toLowerCase();
+        }
       }
     }
     return undefined;
   });
 
-  const height = computed(() => {
+  const height = computed<string | undefined>(() => {
     if (!props.visible) {
       return '0';
     }
-    const _height = props.height;
-    if (isString(_height)) {
-      const realHeight = DrawerHeight[_height.toLowerCase()];
-      if (realHeight) {
-        return null;
+    if (internalHeight.value != null) {
+      switch (displayAs.value) {
+        case PopupDisplayAs.drawer:
+          return DrawerHeight[internalHeight.value];
+        case PopupDisplayAs.modal:
+          return ModalHeight[internalHeight.value];
+      }
+    }
+    if (usingHeight.value) {
+      const _height = props.height;
+      if (isString(_height)) {
+        const realHeight = DrawerHeight[_height.toLowerCase()];
+        if (realHeight) {
+          return '';
+        }
       }
+      return StyleHelper.px(_height);
     }
-    return _height;
+    return undefined;
   });
 
   const heightClassSuffix = computed(() => {
-    const _height = props.height;
-    if (isString(_height)) {
-      const realHeight = DrawerHeight[_height.toLowerCase()];
-      if (realHeight) {
-        return _height.toLowerCase();
+    if (usingHeight.value) {
+      const _height = internalHeight.value || props.height;
+      if (isString(_height)) {
+        const realHeight = DrawerHeight[_height.toLowerCase()];
+        if (realHeight) {
+          return _height.toLowerCase();
+        }
       }
     }
     return undefined;
   });
 
+  /**
+   * 全屏切换
+   */
+  const onFullSwitch = () => {
+    displayAs.value = PopupDisplayAs.drawer;
+    if (isFullScreen.value) {
+      internalHeight.value = undefined;
+      internalWidth.value = undefined;
+      isFullScreen.value = false;
+    } else {
+      isFullScreen.value = true;
+      internalHeight.value = 'full';
+      internalWidth.value = 'full';
+    }
+  };
+
+  /**
+   * 弹窗展示模式切换
+   */
+  const onDisplayAsSwitch = () => {
+    internalHeight.value = undefined;
+    internalWidth.value = undefined;
+    isFullScreen.value = false;
+
+    if (displayAs.value === PopupDisplayAs.drawer) {
+      displayAs.value = PopupDisplayAs.modal;
+
+      const placement = props.placement || DrawerPlacement.right;
+      let key: keyof typeof DrawerHeight | undefined;
+      switch (placement) {
+        case DrawerPlacement.left:
+        case DrawerPlacement.right:
+          if (typeof props.width === 'string') {
+            key = Object.keys(DrawerWidth).find(
+              (key) => key === props.width.toLowerCase() || DrawerWidth[key] === props.width
+            ) as keyof typeof DrawerHeight | undefined;
+            if (key == null) {
+              internalHeight.value = StyleHelper.px(props.width);
+            } else {
+              internalHeight.value = key;
+            }
+          }
+          break;
+        case DrawerPlacement.top:
+        case DrawerPlacement.bottom:
+          if (typeof props.height === 'string') {
+            key = Object.keys(DrawerHeight).find(
+              (key) => key === props.height.toLowerCase() || DrawerHeight[key] === props.height
+            ) as keyof typeof DrawerHeight | undefined;
+            if (key == null) {
+              internalWidth.value = StyleHelper.px(props.height);
+            } else {
+              internalWidth.value = key;
+            }
+          }
+          break;
+      }
+    } else {
+      displayAs.value = PopupDisplayAs.drawer;
+    }
+  };
+
   return {
     ...usePopup(props, context),
     placement,
     width,
     widthClassSuffix,
     height,
-    heightClassSuffix
+    heightClassSuffix,
+    modalDrawerClassName,
+    isFullScreen,
+    onFullSwitch,
+    onDisplayAsSwitch
   };
 }

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

@@ -36,6 +36,9 @@ export const OioGroupProps = {
     type: [String, Boolean],
     default: undefined
   },
+  bizStyle: {
+    type: String
+  },
   description: {
     type: String
   },

package/src/component/oio-inner-popup/props.ts

@@ -9,8 +9,7 @@ type InnerPopupTeleportType = string | HTMLElement;
 export const OioInnerPopupAppearanceProps = {
   ...VcPopupAppearanceProps,
   title: {
-    type: String,
-    default: '标题'
+    type: String
   },
   help: {
     type: String

package/src/component/oio-input/props.ts

@@ -34,6 +34,9 @@ export const AInputProps = {
   value: {
     type: String
   },
+  'onUpdate:value': {
+    type: Function as PropType<(value: string) => void>
+  },
   defaultValue: {
     type: String
   },

package/src/component/oio-modal/props.ts

@@ -1,20 +1,18 @@
 import { PropType } from 'vue';
 import { VcMaskPopupAppearanceProps, VcPopupAppearanceProps, VcPopupControlProps, VcPopupDataProps } from '../vc-popup';
-import { ModalWidth, ModalWidthType } from './typing';
+import { ModalWidthType } from './typing';
 
 const OioModalAppearanceProps = {
   ...VcPopupAppearanceProps,
   ...VcMaskPopupAppearanceProps,
   title: {
-    type: String,
-    default: '对话框'
+    type: String
   },
   help: {
     type: String
   },
   width: {
-    type: [Number, String] as PropType<ModalWidthType | string | number>,
-    default: ModalWidth.small
+    type: [Number, String] as PropType<ModalWidthType | string | number>
   },
   height: {
     type: [Number, String] as PropType<ModalWidthType | string | number>
@@ -26,6 +24,16 @@ const OioModalAppearanceProps = {
   footerInvisible: {
     type: Boolean,
     default: undefined
+  },
+  // 是否显示切换全屏按钮
+  enabledFullScreen: {
+    type: Boolean,
+    default: true
+  },
+  // 是否显示切换窗口类型按钮
+  showPopupToggle: {
+    type: Boolean,
+    default: true
   }
 };
 

package/src/component/oio-modal/typing.ts

@@ -2,17 +2,15 @@ export enum ModalWidth {
   small = 560,
   medium = 890,
   large = 1200,
-  custom = 'CUSTOM',
   full = '100%'
 }
 
 export type ModalWidthType = number | string | keyof typeof ModalWidth;
 
 export enum ModalHeight {
-  small = '30%',
-  medium = '50%',
-  large = '80%',
-  custom = 'CUSTOM',
+  small = '40vh',
+  medium = '60vh',
+  large = '90vh',
   full = '100%'
 }
 

package/src/component/oio-modal/useModal.ts

@@ -1,34 +1,96 @@
 import { isString } from 'lodash-es';
-import { computed } from 'vue';
-import { usePopup } from '../vc-popup/usePopup';
+import { computed, ref } from 'vue';
+import { DEFAULT_PREFIX } from '../../theme';
+import { StyleHelper } from '../../util';
+import { PopupDisplayAs, usePopup } from '../vc-popup';
 import { ModalHeight, ModalWidth } from './typing';
-import { StyleHelper } from '../../util/style';
 
 export function useModal(props, context) {
+  const internalDisplayAs = ref<PopupDisplayAs | undefined>();
+  const displayAs = computed({
+    get() {
+      if (props.displayAs == null) {
+        return internalDisplayAs.value || PopupDisplayAs.modal;
+      }
+      return props.displayAs as PopupDisplayAs;
+    },
+    set(value: PopupDisplayAs) {
+      internalDisplayAs.value = value;
+      context.emit('update:displayAs', value);
+    }
+  });
+
+  const isFullScreen = ref(false);
+  const internalWidth = ref<keyof typeof ModalWidth>();
+  const internalHeight = ref<keyof typeof ModalHeight>();
+
+  // 抽屉形式的模态框
+  const drawerModalClassName = computed(() => {
+    const classNames: string[] = [];
+    if (displayAs.value === PopupDisplayAs.drawer) {
+      classNames.push(`${DEFAULT_PREFIX}-modal-drawer-mode`);
+    }
+    if (internalWidth.value === 'full') {
+      classNames.push(`${DEFAULT_PREFIX}-modal-fullscreen`);
+    }
+    return classNames;
+  });
+
+  const title = computed(() => {
+    const val = props.title;
+    if (val == null) {
+      return '对话框';
+    }
+    return val;
+  });
+
   const width = computed(() => {
-    const _width = props.width;
-    if (isString(_width)) {
-      const realWidth = ModalWidth[_width.toLowerCase()];
+    if (internalWidth.value != null) {
+      return ModalWidth[internalWidth.value];
+    }
+    const width = props.width;
+    if (width == null) {
+      return ModalWidth.small;
+    }
+    if (isString(width)) {
+      const realWidth = ModalWidth[width.toLowerCase()];
       if (realWidth) {
         return null;
       }
     }
-    return _width;
+    return StyleHelper.px(width);
   });
 
   const widthClassSuffix = computed(() => {
-    const _width = props.width;
-    if (isString(_width)) {
-      const realWidth = ModalWidth[_width.toLowerCase()];
+    const width = internalWidth.value || props.width;
+    if (isString(width)) {
+      const realWidth = ModalWidth[width.toLowerCase()];
       if (realWidth) {
-        return _width.toLowerCase();
+        return width.toLowerCase();
       }
     }
     return undefined;
   });
 
-  const heightClassSuffix = computed(() => {
+  const height = computed(() => {
+    if (internalHeight.value != null) {
+      return ModalHeight[internalHeight.value];
+    }
     const height = props.height;
+    if (height == null) {
+      return undefined;
+    }
+    if (isString(height)) {
+      const realHeight = ModalHeight[height.toLowerCase()];
+      if (realHeight) {
+        return null;
+      }
+    }
+    return StyleHelper.px(height);
+  });
+
+  const heightClassSuffix = computed(() => {
+    const height = internalHeight.value || props.height;
     if (isString(height)) {
       const realHeight = ModalHeight[height.toLowerCase()];
       if (realHeight) {
@@ -38,21 +100,49 @@ export function useModal(props, context) {
     return undefined;
   });
 
-  const heightPx = computed(() => StyleHelper.px(props.height));
-  const customHeightClassSuffix = computed(() => {
-    if (!heightClassSuffix.value) {
-      return !!heightPx.value ? 'custom' : null;
+  /**
+   * 全屏切换
+   */
+  const onFullSwitch = () => {
+    displayAs.value = PopupDisplayAs.modal;
+    if (isFullScreen.value) {
+      internalHeight.value = undefined;
+      internalWidth.value = undefined;
+      isFullScreen.value = false;
+    } else {
+      isFullScreen.value = true;
+      internalHeight.value = 'full';
+      internalWidth.value = 'full';
     }
+  };
 
-    return null;
-  });
+  /**
+   * 弹窗展示模式切换
+   */
+  const onDisplayAsSwitch = () => {
+    internalHeight.value = undefined;
+    internalWidth.value = undefined;
+    isFullScreen.value = false;
+
+    if (displayAs.value === PopupDisplayAs.modal) {
+      displayAs.value = PopupDisplayAs.drawer;
+      internalHeight.value = 'full';
+    } else {
+      displayAs.value = PopupDisplayAs.modal;
+      internalHeight.value = undefined;
+    }
+  };
 
   return {
     ...usePopup(props, context),
+    title,
     width,
     widthClassSuffix,
+    height,
     heightClassSuffix,
-    customHeightClassSuffix,
-    heightPx
+    isFullScreen,
+    drawerModalClassName,
+    onFullSwitch,
+    onDisplayAsSwitch
   };
 }

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

@@ -6,6 +6,7 @@ export interface SelectItem<T = unknown> {
   label: string;
   state?: EnumOptionState;
   disabled?: boolean;
+  icon?: string;
   data: T;
 }
 
@@ -14,6 +15,7 @@ export interface SelectProperties {
   keyProp: string;
   labelProp: string;
   disabledProp: string;
+  iconProp?: string;
   filterProp: string;
 }
 
@@ -22,6 +24,7 @@ export const defaultSelectProperties: SelectProperties = {
   keyProp: 'key',
   labelProp: 'label',
   disabledProp: 'disabled',
+  iconProp: 'icon',
   filterProp: 'label'
 };
 

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

@@ -77,6 +77,10 @@ export const OioSelectProps = {
   dropdownClassName: {
     type: [String, Array] as PropType<string | string[]>
   },
+  dropdownVisible: {
+    type: Boolean,
+    default: undefined
+  },
   getTriggerContainer: {
     type: Function as PropType<(triggerNode: Node | HTMLElement) => Node | HTMLElement>
   }

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

@@ -1,2 +1,3 @@
 export * from './context';
 export * from './props';
+export * from './typing';

package/src/component/oio-tabs/props.ts

@@ -1,5 +1,6 @@
 import { PropType } from 'vue';
 import { OioBaseContainerProps, OioComponentData } from '../../typing';
+import { OioTabsBizStyle } from './typing';
 
 export const DEFAULT_TABS_TITLE = '选项卡';
 
@@ -93,6 +94,9 @@ export const OioTabsProps = {
   },
   type: {
     type: String as PropType<OioTabsType | keyof typeof OioTabsType>
+  },
+  bizStyle: {
+    type: String as PropType<OioTabsBizStyle>
   }
 };
 

package/src/component/oio-tabs/typing.ts

@@ -0,0 +1,5 @@
+export enum OioTabsBizStyle {
+  Simple = 'style1', // 简约风格
+  AccentCard = 'style2', // 卡片上方高亮
+  Card = 'style3' // 普通卡片
+}

package/src/component/oio-tree/events.ts

@@ -1,5 +1,5 @@
+import { OioTreeNode } from '@oinone/kunlun-shared';
 import { OioEvent } from '../../event';
-import { OioTreeNode } from './props';
 
 /**
  * 树节点选中事件

package/src/component/oio-tree/props.ts

@@ -1,43 +1,7 @@
-import { CSSStyle, StandardTreeNode } from '@oinone/kunlun-shared';
+import { OioTreeNode } from '@oinone/kunlun-shared';
 import { PropType } from 'vue';
 import { OioSpinProps } from '../oio-spin';
 
-export interface OioTreeNode<T = unknown> extends StandardTreeNode<T, OioTreeNode<T>> {
-  class?: string | string[];
-  style?: CSSStyle;
-  title?: string;
-  value: T;
-
-  /**
-   * 正在加载更多状态
-   */
-  loadingMore?: boolean;
-  /**
-   * 预加载
-   */
-  preloaded?: boolean;
-  /**
-   * 已加载（不再查询子节点）
-   */
-  loaded?: boolean;
-  /**
-   * 正在加载状态
-   */
-  loading?: boolean;
-  /**
-   * 是否显示checkbox, 默认: true
-   */
-  checkbox?: boolean;
-  /**
-   * 是否可选择, 默认: true
-   */
-  selectable?: boolean;
-  /**
-   * 是否禁用
-   */
-  disabled?: boolean;
-}
-
 const OioTreeSelectProps = {
   selectable: {
     type: Boolean,

package/src/component/vc-popup/index.ts

@@ -1 +1,2 @@
 export * from './props';
+export * from './usePopup';

package/src/component/vc-popup/props.ts

@@ -1,6 +1,11 @@
 import { ReturnPromise, ReturnVoid } from '@oinone/kunlun-shared';
 import { PropType } from 'vue';
 
+export enum PopupDisplayAs {
+  drawer = 'drawer',
+  modal = 'modal'
+}
+
 export const VcPopupAppearanceProps = {
   zIndex: {
     type: Number,
@@ -45,6 +50,9 @@ export const VcPopupControlProps = {
     type: Boolean,
     default: undefined
   },
+  'onUpdate:visible': {
+    type: Function as PropType<(val: boolean) => void>
+  },
   closable: {
     type: Boolean,
     default: undefined
@@ -53,6 +61,12 @@ export const VcPopupControlProps = {
     type: Boolean,
     default: undefined
   },
+  displayAs: {
+    type: String as PropType<keyof typeof PopupDisplayAs>
+  },
+  'onUpdate:displayAs': {
+    type: Function as PropType<(val: keyof typeof PopupDisplayAs) => void>
+  },
   destroyOnClose: {
     type: Boolean,
     default: undefined

package/src/component/vc-popup/usePopup.ts

@@ -27,10 +27,12 @@ export function usePopup(props, context) {
 
   const enter = (event: PointerEvent) => {
     callback(event, props.enterCallback);
+    context.emit('enter', event);
   };
 
   const cancel = (event: PointerEvent) => {
     callback(event, props.cancelCallback);
+    context.emit('cancel', event);
   };
 
   const callback = (