@oinone/kunlun-vue-ui-antd 6.2.0

package/src/component/oio-group/oio-group-help.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="oio-group-help">
+    <a-tooltip
+      :destroyTooltipOnHide="true"
+      :color="helpBgColor"
+      :autoAdjustOverflow="helpAdjustOverflow"
+      :placement="helpPlacement"
+    >
+      <template #title>{{ help }}</template>
+      <oio-icon :icon="helpIcon" :color="helpIconColor" :size="helpIconSize" />
+    </a-tooltip>
+  </div>
+</template>
+<script lang="ts">
+import { OioGroupHelpProps, OioIcon } from '@oinone/kunlun-vue-ui-common';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'OioGroupHelp',
+  inheritAttrs: false,
+  components: {
+    OioIcon
+  },
+  props: {
+    ...OioGroupHelpProps
+  }
+});
+</script>

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

@@ -0,0 +1,140 @@
+<script lang="ts">
+import { StringHelper } from '@oinone/kunlun-shared';
+import { OioGroupProps, PropRecordHelper } from '@oinone/kunlun-vue-ui-common';
+import { createVNode, defineComponent, VNode } from 'vue';
+import { DEFAULT_PREFIX } from '../../theme';
+import OioGroupHelp from './oio-group-help.vue';
+
+export default defineComponent({
+  name: 'OioGroup',
+  inheritAttrs: false,
+  props: {
+    ...OioGroupProps
+  },
+  slots: ['default', 'title', 'titleToolbar'],
+  render() {
+    const {
+      $attrs,
+      $slots,
+      title,
+      description,
+      border,
+      wrapperClassName,
+      wrapperStyle,
+      toolbarClassName,
+      toolbarStyle,
+      help,
+      helpIcon,
+      helpIconSize,
+      helpIconColor,
+      helpPlacement,
+      helpBgColor,
+      helpAdjustOverflow
+    } = this;
+    const slots = PropRecordHelper.collectionSlots($slots, [
+      { origin: 'default', isNotNull: true },
+      'title',
+      'titleToolbar'
+    ]);
+    const classList = [`${DEFAULT_PREFIX}-group`];
+    if (border) {
+      classList.push(`${DEFAULT_PREFIX}-group-border`);
+    }
+    let hiddenTitle = title === false;
+    let titleVNodes: VNode[] | undefined;
+    if (slots.title) {
+      titleVNodes = slots.title();
+    } else if (title) {
+      titleVNodes = [
+        createVNode(
+          'div',
+          {
+            key: `${DEFAULT_PREFIX}-group-title`,
+            class: `${DEFAULT_PREFIX}-group-title`,
+            title
+          },
+          title
+        )
+      ];
+    }
+    if (titleVNodes) {
+      const titleClassList = [`${DEFAULT_PREFIX}-group-title-wrapper`];
+      if (help) {
+        titleVNodes.push(
+          createVNode(OioGroupHelp, {
+            help,
+            helpIcon,
+            helpIconSize,
+            helpIconColor,
+            helpPlacement,
+            helpBgColor,
+            helpAdjustOverflow
+          })
+        );
+      }
+      if (description) {
+        titleVNodes.push(
+          createVNode(
+            'div',
+            {
+              key: `${DEFAULT_PREFIX}-group-description`,
+              class: `${DEFAULT_PREFIX}-group-description`,
+              title: description
+            },
+            description
+          )
+        );
+      }
+      if (slots.titleToolbar) {
+        titleVNodes = [createVNode('div', { class: `${DEFAULT_PREFIX}-group-title-content` }, titleVNodes)];
+        titleVNodes.push(
+          createVNode(
+            'div',
+            {
+              class: StringHelper.append([`${DEFAULT_PREFIX}-group-title-toolbar`], toolbarClassName),
+              style: toolbarStyle
+            },
+            slots.titleToolbar()
+          )
+        );
+        titleClassList.push(`${DEFAULT_PREFIX}-group-title-space-between`);
+      }
+      titleVNodes = [createVNode('div', { class: titleClassList }, titleVNodes)];
+    } else if (slots.titleToolbar) {
+      const titleClassList = [`${DEFAULT_PREFIX}-group-title-wrapper`];
+      titleVNodes = [
+        createVNode(
+          'div',
+          {
+            class: StringHelper.append([`${DEFAULT_PREFIX}-group-title-toolbar`], toolbarClassName),
+            style: toolbarStyle
+          },
+          slots.titleToolbar()
+        )
+      ];
+      titleClassList.push(`${DEFAULT_PREFIX}-group-title-flex-end`);
+      titleVNodes = [createVNode('div', { class: titleClassList }, titleVNodes)];
+    } else {
+      hiddenTitle = true;
+    }
+    if (hiddenTitle) {
+      classList.push(`${DEFAULT_PREFIX}-group-title-hidden`);
+    }
+    return createVNode('div', PropRecordHelper.collectionBasicProps($attrs, classList), [
+      ...(titleVNodes || []),
+      createVNode(
+        'div',
+        {
+          key: `${DEFAULT_PREFIX}-group-content`,
+          class: StringHelper.append(
+            [`${DEFAULT_PREFIX}-group-content`, `${DEFAULT_PREFIX}-scrollbar`],
+            wrapperClassName
+          ),
+          style: wrapperStyle
+        },
+        slots.default()
+      )
+    ]);
+  }
+});
+</script>

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

@@ -0,0 +1,98 @@
+@import './parameters.scss';
+
+.#{$groupClassPrefix} {
+  width: 100%;
+  background: var(--oio-background);
+
+  &-border {
+    border: var($parameterPrefix + -border-width) var(--oio-group-border-width) var($parameterPrefix + -border-color);
+    border-radius: var($parameterPrefix + -border-radius, 4px);
+    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.05);
+  }
+
+  &-title-wrapper {
+    // height: 56px;
+    padding: var(--oio-padding) var(--oio-padding) 0;
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: flex-start;
+    align-content: flex-start;
+    align-items: center;
+  }
+
+  &-title-space-between {
+    justify-content: space-between;
+
+    & > .#{$groupClassPrefix}-title-content {
+      overflow: hidden;
+      display: flex;
+      flex-flow: row nowrap;
+      justify-content: flex-start;
+      align-content: flex-start;
+      align-items: center;
+    }
+
+    & > .#{$groupClassPrefix}-title-toolbar {
+      margin-left: 16px;
+      display: flex;
+      flex-flow: row nowrap;
+      justify-content: flex-end;
+      align-content: flex-end;
+      align-items: center;
+      column-gap: 8px;
+    }
+  }
+
+  &-title-flex-end {
+    justify-content: flex-end;
+  }
+
+  &-title {
+    color: var(--oio-text-color);
+    font-size: var(--oio-font-size-lg);
+    line-height: var(--oio-line-height-lg);
+    font-weight: var(--oio-font-weight-bold);
+    max-width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    & + .#{$groupClassPrefix}-description {
+      margin-left: 12px;
+    }
+  }
+
+  &-help {
+    line-height: var(--oio-line-height-lg);
+    margin-left: 4px;
+    margin-right: 4px;
+
+    .oio-icon {
+      vertical-align: 0;
+    }
+  }
+
+  &-description {
+    color: var(--oio-text-color-secondary);
+    font-size: var(--oio-font-size-sm);
+    line-height: var(--oio-line-height-lg);
+    max-width: 400px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &-content {
+    padding: var(--oio-padding);
+  }
+
+  &-title-hidden {
+    & > .oio-group-title-wrapper {
+      display: none;
+    }
+
+    & > .oio-group-content {
+      padding: var(--oio-padding);
+    }
+  }
+}

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

@@ -0,0 +1,5 @@
+@import '../../../style/global-parameters.scss';
+
+$groupPrefix: $prefix + -group;
+$groupParameterPrefix: $parameterPrefix + -group;
+$groupClassPrefix: $groupPrefix;

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

@@ -0,0 +1 @@
+export { default as OioInnerPopup } from './oio-inner-popup.vue';

package/src/component/oio-inner-popup/oio-inner-popup.vue

@@ -0,0 +1,230 @@
+<script lang="ts">
+import {
+  ButtonType,
+  DrawerPlacement,
+  OioIcon,
+  OioInnerPopupProps,
+  PropRecordHelper,
+  useResizableHandle,
+  OioCloseIcon
+} from '@oinone/kunlun-vue-ui-common';
+import { isFunction, isString } from 'lodash-es';
+import {
+  computed,
+  createVNode,
+  defineComponent,
+  ref,
+  Slot,
+  Teleport,
+  VNode,
+  VNodeProps,
+  vShow,
+  watch,
+  withDirectives
+} from 'vue';
+import { DEFAULT_PREFIX } from '../../theme';
+import { OioButton } from '../oio-button';
+import { OioSpin } from '../oio-spin';
+import { OioTooltipHelp } from '../oio-tooltip';
+
+const CLASS_NAME = `${DEFAULT_PREFIX}-inner-popup`;
+
+const TELEPORT_TARGET_CLASS_NAME = `${CLASS_NAME}-target`;
+
+const CLEAR_TELEPORT_TARGET_CLASS_NAMES = [
+  TELEPORT_TARGET_CLASS_NAME,
+  `${CLASS_NAME}-${DrawerPlacement.top}`,
+  `${CLASS_NAME}-${DrawerPlacement.right}`,
+  `${CLASS_NAME}-${DrawerPlacement.bottom}`,
+  `${CLASS_NAME}-${DrawerPlacement.left}`
+];
+
+function createTitle(children: VNode[]) {
+  return createVNode('div', { class: `${CLASS_NAME}-title-wrapper` }, children);
+}
+
+function createHeader(children: VNode[]) {
+  return createVNode('div', { class: `${CLASS_NAME}-header` }, children);
+}
+
+function createBody(children: VNode[]) {
+  return createVNode('div', { class: `${CLASS_NAME}-body` }, children);
+}
+
+function createFooter(children: VNode[]) {
+  return createVNode('div', { class: `${CLASS_NAME}-footer` }, children);
+}
+
+export default defineComponent({
+  name: 'oio-inner-popup',
+  components: {
+    OioButton,
+    OioIcon,
+    OioSpin,
+    OioTooltipHelp,
+    OioCloseIcon
+  },
+  inheritAttrs: false,
+  props: {
+    ...OioInnerPopupProps
+  },
+  setup(props) {
+    const popupRef = ref<HTMLElement>();
+
+    const resizable = computed(() => {
+      return props.resizable || false;
+    });
+
+    const resizeDirection = computed<DrawerPlacement>(() => {
+      const placement = props.placement || DrawerPlacement.right;
+      switch (placement) {
+        case DrawerPlacement.top:
+          return DrawerPlacement.bottom;
+        case DrawerPlacement.right:
+          return DrawerPlacement.left;
+        case DrawerPlacement.bottom:
+          return DrawerPlacement.top;
+        case DrawerPlacement.left:
+          return DrawerPlacement.right;
+        default:
+          throw new Error('Invalid inner popup placement');
+      }
+    });
+
+    const teleportTarget = computed<HTMLElement>(() => {
+      const teleport = props.teleport;
+      if (!teleport) {
+        throw new Error('Invalid teleport handle.');
+      }
+      let finalTeleport: string | HTMLElement | null | undefined;
+      if (isFunction(teleport)) {
+        finalTeleport = teleport();
+      } else {
+        finalTeleport = teleport;
+      }
+      if (isString(finalTeleport)) {
+        finalTeleport = document.getElementById(finalTeleport);
+      }
+      return finalTeleport || document.body;
+    });
+
+    useResizableHandle(popupRef, resizable, resizeDirection);
+
+    const appendClassNameToTeleportTarget = (target: HTMLElement, classNames: string[]) => {
+      for (const className of classNames) {
+        target.classList.add(className);
+      }
+    };
+
+    const clearClassNameToTeleportTarget = (target: HTMLElement) => {
+      CLEAR_TELEPORT_TARGET_CLASS_NAMES.forEach((className) => {
+        target.classList.remove(className);
+      });
+    };
+
+    watch(
+      () => teleportTarget.value,
+      (newVal, oldVal) => {
+        if (oldVal) {
+          clearClassNameToTeleportTarget(oldVal);
+        }
+        appendClassNameToTeleportTarget(newVal, [TELEPORT_TARGET_CLASS_NAME, `${CLASS_NAME}-${props.placement}`]);
+      },
+      { immediate: true }
+    );
+
+    return {
+      popupRef,
+
+      teleportTarget
+    };
+  },
+  render() {
+    const {
+      default: defaultSlot,
+      title: titleSlot,
+      header: headerSlot,
+      footer: footerSlot
+    } = PropRecordHelper.collectionSlots(this.$slots, [
+      {
+        origin: 'default',
+        isNotNull: true
+      },
+      'title',
+      'header',
+      'footer'
+    ]);
+
+    const finalHeaderSlot: Slot | null | undefined = headerSlot || this.header;
+    const finalFooterSlot: Slot | null | undefined = footerSlot || this.footer;
+
+    const children: VNode[] = [];
+
+    if (finalHeaderSlot) {
+      children.push(createHeader(finalHeaderSlot()));
+    } else if (finalHeaderSlot !== null) {
+      let finalTitleSlot = titleSlot;
+      if (!finalTitleSlot) {
+        finalTitleSlot = () => [
+          createVNode('span', { class: `${CLASS_NAME}-title` }, this.title || OioInnerPopupProps.title.default)
+        ];
+      }
+      if (this.help) {
+        const titleChildren = finalTitleSlot();
+        finalTitleSlot = () => {
+          return [createVNode('span', {}, titleChildren), createVNode(OioTooltipHelp, { content: this.help })];
+        };
+      }
+      const headerChildren = [createTitle(finalTitleSlot())];
+      if (this.closable) {
+        headerChildren.push(
+          createVNode('div', { class: `${CLASS_NAME}-title-toolbar` }, [
+            createVNode(
+              OioCloseIcon,
+              {
+                onClick: this.cancelCallback
+              },
+            )
+          ])
+        );
+      }
+      children.push(createHeader(headerChildren));
+    }
+
+    children.push(createBody(defaultSlot()));
+
+    if (finalFooterSlot) {
+      children.push(createFooter(finalFooterSlot()));
+    } else if (finalFooterSlot !== null) {
+      children.push(
+        createFooter([
+          createVNode(OioButton, {}, { default: () => this.cancelText }),
+          createVNode(
+            OioButton,
+            {
+              type: ButtonType.primary
+            },
+            { default: () => this.enterText }
+          )
+        ])
+      );
+    }
+
+    return [
+      createVNode(Teleport as VNodeProps, { to: this.teleportTarget }, [
+        withDirectives(
+          createVNode(
+            'div',
+            {
+              ...PropRecordHelper.collectionBasicProps(this.$attrs, [CLASS_NAME]),
+              ref: 'popupRef'
+            },
+            children
+          ),
+          [[vShow, this.visible]]
+        )
+      ])
+    ];
+  }
+});
+</script>

package/src/component/oio-inner-popup/style/index.scss

@@ -0,0 +1,147 @@
+@import './parameters.scss';
+@import '../../../style/mixin.scss';
+
+$gap: 24px;
+$innerPopupMaxHeight: 234px;
+
+$innerPopupDefaultWidth: 500px;
+$innerPopupLargeWidth: 650px;
+$innerPopupMediumWidth: 500px;
+$innerPopupSmallWidth: 400px;
+
+.#{$innerPopupClassPrefix}-target {
+  display: flex;
+
+  & > *:not(.#{$innerPopupClassPrefix}) {
+    flex: 1;
+    min-width: 0;
+  }
+}
+
+.#{$innerPopupClassPrefix} {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--oio-background);
+  border: var($parameterPrefix + -border-width) var($parameterPrefix + -border-style)
+    var($parameterPrefix + -border-color);
+  border-radius: var($parameterPrefix + -border-radius, 4px);
+  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.05);
+
+  &-header {
+    height: 55px;
+    padding: 0 16px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .#{$innerPopupClassPrefix}-title-wrapper {
+      .#{$innerPopupClassPrefix}-title {
+        color: var($parameterPrefix + -text-color);
+        font-size: var($parameterPrefix + -font-size-lg);
+        line-height: var($parameterPrefix + -line-height-lg);
+        font-weight: var($parameterPrefix + -font-weight-bold);
+        max-width: 100%;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+
+    .#{$innerPopupClassPrefix}-title-toolbar {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      column-gap: 8px;
+
+      .#{$innerPopupClassPrefix}-title-icon-button {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 50%;
+        width: 24px;
+        height: 24px;
+        background-color: var(--oio-icon-color);
+        cursor: pointer;
+
+        .oio-icon {
+          font-size: 10px;
+        }
+      }
+    }
+
+    & + .#{$innerPopupClassPrefix}-body {
+      border-top: 1px solid var(--oio-border-color);
+    }
+  }
+
+  .#{$innerPopupClassPrefix}-body {
+    padding: 16px;
+    flex: 1 1px;
+    overflow: scroll;
+
+    & + .#{$innerPopupClassPrefix}-footer {
+      border-top: 1px solid var(--oio-border-color);
+    }
+  }
+
+  .#{$innerPopupClassPrefix}-footer {
+    padding: 16px;
+    text-align: right;
+  }
+
+  &-top {
+    flex-direction: column-reverse;
+    row-gap: $gap;
+
+    .#{$innerPopupClassPrefix} {
+      & > .#{$innerPopupClassPrefix}-body {
+        @include oio-scrollbar();
+
+        overflow-y: auto;
+      }
+    }
+  }
+
+  &-right {
+    flex-direction: row;
+    column-gap: $gap;
+
+    .#{$innerPopupClassPrefix} {
+      @include mediaResponsive(
+        flex-basis,
+        $innerPopupDefaultWidth,
+        $innerPopupLargeWidth,
+        $innerPopupMediumWidth,
+        $innerPopupSmallWidth
+      );
+    }
+  }
+
+  &-bottom {
+    flex-direction: column;
+    row-gap: $gap;
+
+    .#{$innerPopupClassPrefix} {
+      & > .#{$innerPopupClassPrefix}-body {
+        @include oio-scrollbar();
+
+        overflow-y: auto;
+      }
+    }
+  }
+
+  &-left {
+    flex-direction: row-reverse;
+    column-gap: $gap;
+
+    .#{$innerPopupClassPrefix} {
+      @include mediaResponsive(
+        flex-basis,
+        $innerPopupDefaultWidth,
+        $innerPopupLargeWidth,
+        $innerPopupMediumWidth,
+        $innerPopupSmallWidth
+      );
+    }
+  }
+}

package/src/component/oio-inner-popup/style/parameters.scss

@@ -0,0 +1,5 @@
+@import '../../../style/global-parameters';
+
+$innerPopupPrefix: $prefix + -inner-popup;
+$innerPopupParameterPrefix: $parameterPrefix + -inner-popup;
+$innerPopupClassPrefix: $innerPopupPrefix;

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

@@ -0,0 +1,5 @@
+export { default as OioInput } from './oio-input.vue';
+export { default as OioInputGroup } from './oio-input-group.vue';
+export { default as OioInputNumber } from './oio-input-number.vue';
+export { default as OioInputPassword } from './oio-input-password.vue';
+export { default as OioInputSearch } from './oio-input-search.vue';

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

@@ -0,0 +1,40 @@
+<script lang="ts">
+import { OioInputGroupProps, PropRecordHelper } from '@oinone/kunlun-vue-ui-common';
+import { InputGroup as AInputGroup } from 'ant-design-vue';
+import { computed, createVNode, defineComponent } from 'vue';
+import { DEFAULT_PREFIX } from '../../theme';
+
+export default defineComponent({
+  name: 'OioInputGroup',
+  components: {
+    AInputGroup
+  },
+  inheritAttrs: false,
+  props: {
+    ...OioInputGroupProps
+  },
+  slots: ['default'],
+  setup(props) {
+    const compact = computed<boolean>(() => {
+      if (props.compact == null) {
+        return true;
+      }
+      return props.compact;
+    });
+
+    return {
+      compact
+    };
+  },
+  render() {
+    return createVNode(
+      AInputGroup,
+      {
+        ...PropRecordHelper.collectionBasicProps(this.$attrs, [`${DEFAULT_PREFIX}-input-group`]),
+        compact: this.compact
+      },
+      this.$slots.default?.() || []
+    );
+  }
+});
+</script>