@oinone/kunlun-vue-ui-antd 6.2.0

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

@@ -0,0 +1,42 @@
+<script lang="ts">
+import { OioSwitchProps, PropRecordHelper } from '@oinone/kunlun-vue-ui-common';
+import { Switch as ASwitch } from 'ant-design-vue';
+import { createVNode, defineComponent } from 'vue';
+import { DEFAULT_PREFIX } from '../../theme';
+
+export default defineComponent({
+  name: 'OioSwitch',
+  components: {
+    ASwitch
+  },
+  inheritAttrs: false,
+  props: {
+    ...OioSwitchProps
+  },
+  slots: ['checkedChildren', 'uncheckedChildren'],
+  emits: ['update:checked', 'change'],
+  render() {
+    return createVNode(
+      ASwitch,
+      {
+        autofocus: this.autofocus,
+        checked: this.checked,
+        loading: this.loading,
+        size: this.size,
+        disabled: this.disabled,
+        checkedValue: this.checkedValue,
+        unCheckedValue: this.uncheckedValue,
+        ...PropRecordHelper.collectionBasicProps(this.$attrs, [`${DEFAULT_PREFIX}-switch`]),
+        'onUpdate:checked': (val) => {
+          this.$emit('update:checked', val);
+        },
+        onChange: (val) => this.$emit('change', val)
+      },
+      PropRecordHelper.collectionRenderSlots(this, [
+        'checkedChildren',
+        { origin: 'uncheckedChildren', target: 'unCheckedChildren' }
+      ])
+    );
+  }
+});
+</script>

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

@@ -0,0 +1,36 @@
+@import './parameters.scss';
+
+.#{$switchClassPrefix} {
+  &.ant-switch {
+    height: 24px;
+    border-radius: 12px;
+    background-color: var(--oio-switch-background);
+    .ant-switch-handle {
+      top: 3px;
+    }
+
+    &:focus {
+      box-shadow: none;
+    }
+
+    &:after {
+      width: 20px;
+      height: 20px;
+      background: #ffffff;
+      box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2), 0 2px 9px 0 rgba(0, 0, 0, 0.08), -1px 2px 2px 0px rgba(0, 0, 0, 0.1);
+    }
+    &-small {
+      height: 18px;
+      line-height: 16px;
+      min-width: 30px;
+      &:after {
+        width: 14px;
+        height: 14px;
+      }
+    }
+  }
+
+  &.ant-switch-checked {
+    background-color: var($parameterPrefix + -primary-color);
+  }
+}

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

@@ -0,0 +1,5 @@
+@import '../../../style/global-parameters.scss';
+
+$switchPrefix: $prefix + -switch;
+$switchParameterPrefix: $parameterPrefix + -switch;
+$switchClassPrefix: $switchPrefix;

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

@@ -0,0 +1,3 @@
+export * from './use-tab-bar';
+export { default as OioTab } from './oio-tab.vue';
+export { default as OioTabs } from './oio-tabs.vue';

package/src/component/oio-tabs/oio-tab.vue

@@ -0,0 +1,99 @@
+<script lang="ts">
+import {
+  getVNodeKey,
+  OioTabProps,
+  PropRecordHelper,
+  TabHTMLNode,
+  useInjectOioTabsContext,
+  useOioFormLayoutContext
+} from '@oinone/kunlun-vue-ui-common';
+import { TabPane as ATabPane } from 'ant-design-vue';
+import { createVNode, defineComponent, onUpdated, watch } from 'vue';
+import { onTabInvisibleChange } from './use-tab-bar';
+
+export default defineComponent({
+  name: 'OioTab',
+  components: {
+    ATabPane
+  },
+  inheritAttrs: false,
+  props: {
+    ...OioTabProps
+  },
+  slots: ['default', 'tab'],
+  setup(props) {
+    useOioFormLayoutContext(props);
+
+    const tabKey = getVNodeKey();
+
+    const tabsContext = useInjectOioTabsContext();
+
+    const onInvisibleChange = (nodes: TabHTMLNode[], moreNodes: TabHTMLNode[], invisible: boolean | undefined) => {
+      if (!tabKey) {
+        return;
+      }
+      const index = nodes.findIndex((tab) => tab.key === tabKey);
+      if (index == null || index === -1) {
+        return;
+      }
+      onTabInvisibleChange(nodes, index, invisible);
+      const targetId = `${tabsContext.id.value}-more-popup-${tabKey}`;
+      const targetIndex = moreNodes.findIndex((v) => v.el.id === targetId);
+      if (targetIndex !== -1) {
+        onTabInvisibleChange(moreNodes, targetIndex, invisible);
+      }
+    };
+
+    watch(
+      () => ({
+        value: props.invisible,
+        nodes: tabsContext.nodes.value,
+        moreNodes: tabsContext.moreNodes.value
+      }),
+      (val) => {
+        onInvisibleChange(val.nodes, val.moreNodes, val.value);
+      },
+      { immediate: true }
+    );
+
+    onUpdated(() => {
+      onInvisibleChange(tabsContext.nodes.value, tabsContext.moreNodes.value, props.invisible);
+    });
+
+    return {
+      tabPosition: tabsContext.tabPosition
+    };
+  },
+  render() {
+    const slots = PropRecordHelper.collectionSlots(this.$slots, [
+      {
+        origin: 'default',
+        isNotNull: true
+      }
+    ]);
+    return createVNode(
+      ATabPane,
+      {
+        ...PropRecordHelper.collectionBasicProps(this.$attrs),
+        ...(this.componentData || {}),
+        ...this.$attrs,
+        forceRender: this.forceRender,
+        disabled: this.disabled
+      },
+      {
+        default: () => {
+          return [
+            createVNode('div', { class: 'oio-tab' }, [
+              createVNode(
+                'div',
+                { class: ['oio-tab-content', `oio-tab-${this.tabPosition}-content`] },
+                { default: () => slots.default() }
+              )
+            ])
+          ];
+        }
+      }
+    );
+  }
+});
+</script>

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

@@ -0,0 +1,188 @@
+<script lang="ts">
+import { BooleanHelper, CSSStyle, uniqueKeyGenerator } from '@oinone/kunlun-shared';
+import {
+  CleanableEvent,
+  OioTabPosition,
+  OioTabsProps,
+  PropRecordHelper,
+  StyleHelper,
+  TabHTMLNode,
+  useCleanableEvent,
+  useOioFormLayoutContext,
+  useProviderOioTabsContext
+} from '@oinone/kunlun-vue-ui-common';
+import { Tabs as ATabs } from 'ant-design-vue';
+import useConfigInject from 'ant-design-vue/lib/_util/hooks/useConfigInject.js';
+import { isNil } from 'lodash-es';
+import { computed, createVNode, defineComponent, onMounted, onUnmounted, ref, unref, vShow, withDirectives } from 'vue';
+import { DEFAULT_PREFIX } from '../../theme';
+
+export default defineComponent({
+  name: 'OioTabs',
+  components: {
+    ATabs
+  },
+  inheritAttrs: false,
+  props: {
+    ...OioTabsProps
+  },
+  emits: ['update:active-key'],
+  slots: ['default', 'tabBarLeftExtraContent', 'tabBarExtraContent'],
+  setup(props, context) {
+    useOioFormLayoutContext(props);
+
+    const id = props.id || uniqueKeyGenerator();
+    const { prefixCls } = useConfigInject('tabs', {});
+
+    const origin = ref();
+    const tabHTMLNodes = ref<TabHTMLNode[]>([]);
+    const moreTabHTMLNodes = ref<TabHTMLNode[]>([]);
+
+    const onUpdateActiveKey = (val) => {
+      context.emit('update:active-key', val);
+    };
+
+    let moreButtonMousemove: CleanableEvent | undefined;
+
+    const moreButtonChange = () => {
+      const moreNodes: TabHTMLNode[] = [];
+      let index = 0;
+      const moreTabList = document.getElementById(`${id}-more-popup`)?.children as HTMLCollection;
+      if (moreTabList) {
+        for (const element of moreTabList) {
+          if (element.classList.contains('ant-tabs-dropdown-menu-item')) {
+            moreNodes.push({
+              el: element as HTMLElement,
+              index: index++
+            });
+          }
+        }
+      }
+      moreTabHTMLNodes.value = moreNodes;
+    };
+
+    onMounted(() => {
+      const pre = unref(prefixCls);
+      const tabPrefix = `${pre}-tab`;
+      const tabBarList = origin.value.$el?.children?.[0]?.children?.[0]?.children?.[0]?.children as HTMLCollection;
+      const nodes: TabHTMLNode[] = [];
+      let index = 0;
+      if (tabBarList) {
+        for (const element of tabBarList) {
+          if (element.classList.contains(tabPrefix)) {
+            const tabEl = element as HTMLElement;
+            const tabKey = (element as any).__vnode?.props?.key;
+            nodes.push({
+              el: tabEl,
+              key: tabKey,
+              index: index++
+            });
+          }
+        }
+        tabHTMLNodes.value = nodes;
+      }
+
+      const moreButton = document.getElementById(`${id}-more`);
+      if (moreButton) {
+        const moreButtonExpandedListener = {
+          expanded: false,
+          checker: (): boolean => {
+            if (!moreTabHTMLNodes.value.length) {
+              return true;
+            }
+            const current = !!BooleanHelper.toBoolean(moreButton.getAttribute('aria-expanded'));
+            if (current !== moreButtonExpandedListener.expanded) {
+              moreButtonExpandedListener.expanded = current;
+              return true;
+            }
+            return false;
+          },
+          listener: () => {
+            if (moreButtonExpandedListener.checker()) {
+              moreButtonChange();
+            }
+          }
+        };
+        moreButtonMousemove = useCleanableEvent(origin.value.$el, 'mousemove', moreButtonExpandedListener.listener);
+      }
+    });
+
+    onUnmounted(() => {
+      moreButtonMousemove?.remove();
+    });
+
+    useProviderOioTabsContext({
+      id: computed(() => id),
+      nodes: computed(() => tabHTMLNodes.value),
+      moreNodes: computed(() => moreTabHTMLNodes.value),
+      tabPosition: computed(() => props.tabPosition)
+    });
+
+    return {
+      id,
+      origin,
+      onUpdateActiveKey
+    };
+  },
+  render() {
+    const {
+      invisible,
+      disabled,
+      componentData,
+
+      id,
+      activeKey,
+      tabPosition,
+      verticalHeight,
+      destroyInactiveTabPane,
+      type
+    } = this;
+
+    const style = {} as CSSStyle;
+    if (tabPosition !== OioTabPosition.TOP) {
+      if (!isNil(verticalHeight)) {
+        style.height = StyleHelper.px(verticalHeight) as string;
+      }
+    }
+
+    const classNames = [`${DEFAULT_PREFIX}-tabs`];
+    if (disabled) {
+      classNames.push(`${DEFAULT_PREFIX}-tabs-disabled`);
+    }
+
+    return withDirectives(
+      createVNode(
+        ATabs,
+        {
+          animated: true,
+          ...PropRecordHelper.collectionBasicProps(this.$attrs, classNames, style),
+          ...(componentData || {}),
+          ref: 'origin',
+          id,
+          activeKey,
+          tabPosition,
+          verticalHeight,
+          destroyInactiveTabPane,
+          type,
+          'onUpdate:activeKey': this.onUpdateActiveKey
+        },
+        PropRecordHelper.collectionSlots(this.$slots, [
+          {
+            origin: 'default',
+            isNotNull: true
+          },
+          {
+            origin: 'tabBarLeftExtraContent',
+            target: 'leftExtra'
+          },
+          {
+            origin: 'tabBarExtraContent',
+            target: 'rightExtra'
+          }
+        ])
+      ),
+      [[vShow, !invisible]]
+    );
+  }
+});
+</script>

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

@@ -0,0 +1,274 @@
+@import '../../../style/mixin.scss';
+@import './parameters.scss';
+
+.#{$tabsClassPrefix} {
+  width: 100%;
+  height: 100%;
+  background: var(--oio-background);
+  box-shadow: 0 0 var(--oio-box-shadow-size) 0 var(--oio-border-color);
+  border-radius: 4px;
+  overflow: initial;
+
+  .ant-tabs-nav:before,
+  & > .ant-tabs-content-holder,
+  & > div > .ant-tabs-content-holder {
+    border-color: var(--oio-border-color);
+  }
+
+  .#{$tabClassPrefix}-bar {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+
+    .#{$tabClassPrefix}-options {
+      width: 22px;
+      height: 100%;
+      position: absolute;
+      display: inline-flex;
+      justify-content: flex-end;
+      align-items: center;
+
+      &-hide {
+        display: none;
+      }
+
+      &-top {
+        top: 0;
+        right: -16px;
+      }
+
+      &-left {
+        top: 0;
+        right: -16px;
+      }
+    }
+
+    .#{$tabClassPrefix}-close-icon {
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 8px;
+      width: 14px;
+      height: 14px;
+      background-color: #f1f1f1;
+      border-radius: 50%;
+      margin: 0;
+    }
+
+    .#{$tabClassPrefix}-title {
+      display: inline-block;
+      max-width: 120px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    &-invisible {
+      display: none;
+    }
+  }
+
+  &.ant-tabs {
+    color: var($parameterPrefix + -text-color);
+
+    .ant-tabs-tab-prev {
+      display: none;
+    }
+
+    .ant-tabs-tab-next {
+      display: none;
+    }
+
+    .ant-tabs-nav {
+      .ant-tabs-tab {
+        color: var($parameterPrefix + -text-color);
+        font-weight: var($parameterPrefix + -font-weight);
+
+        &:hover {
+          color: var($parameterPrefix + -primary-color);
+        }
+
+        &.ant-tabs-tab-active {
+          color: var($parameterPrefix + -primary-color);
+          font-weight: 400;
+        }
+
+        .anticon {
+          margin-right: 0;
+        }
+
+        &.ant-tabs-tab-disabled {
+          color: var($parameterPrefix + -disabled-color);
+        }
+      }
+    }
+
+    &-top {
+      .ant-tabs-nav-container {
+        height: var($parameterPrefix + -height);
+        margin: var($parameterPrefix + -margin-md) var($parameterPrefix + -margin-lg) 0;
+      }
+
+      .ant-tabs-nav {
+        padding-left: var(--oio-padding);
+        margin-bottom: 0;
+
+        .ant-tabs-tab {
+          padding: var(--oio-padding) 0;
+        }
+      }
+    }
+
+    &-left {
+      .ant-tabs-content-left {
+        padding: 0;
+        height: 100%;
+        overflow: hidden auto;
+        @include oio-scrollbar();
+      }
+
+      .ant-tabs-nav {
+        .ant-tabs-tab {
+          .#{$tabClassPrefix}-title {
+            max-width: 56px;
+          }
+        }
+      }
+    }
+  }
+
+  &.ant-tabs-card {
+    & > .ant-tabs-nav .ant-tabs-tab,
+    & > div > .ant-tabs-nav .ant-tabs-tab {
+      padding: 8px 16px;
+    }
+
+    &.ant-tabs-top .ant-tabs-nav {
+      padding-left: 0;
+    }
+  }
+
+  .ant-tabs-content {
+    border: none;
+    padding: 0;
+    margin: 0;
+
+    &.ant-tabs-content-animated {
+      transition: none;
+    }
+  }
+
+  .ant-tabs-top-bar {
+    border-bottom: none;
+
+    .ant-tabs-tab {
+      padding: 0;
+      margin: 0 12px 0;
+    }
+
+    .ant-tabs-tab:first-child {
+      padding-left: 0;
+      margin-left: 0;
+    }
+
+    .ant-tabs-extra-content {
+      padding-right: var($parameterPrefix + -padding-lg);
+      height: var($parameterPrefix + -height);
+      line-height: var($parameterPrefix + -height);
+    }
+  }
+
+  .ant-tabs-left-bar {
+    border-right: 1px solid var(--oio-border-color);
+    width: 100px;
+
+    .ant-tabs-tab {
+      padding: 12px 28px 12px 12px;
+      margin: 0;
+    }
+
+    .ant-tabs-tab-active {
+      border-right: 2px solid var(--oio-primary-color);
+    }
+  }
+
+  .#{$tabClassPrefix} {
+    &-content {
+      width: 100%;
+      padding: 16px 24px 0;
+    }
+
+    &-top {
+      &-content {
+        padding: var(--oio-padding);
+      }
+    }
+
+    &-left {
+      &-content {
+        padding: var(--oio-padding);
+      }
+    }
+  }
+
+  .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
+    color: var(--oio-primary-color);
+  }
+}
+
+.ant-tabs-dropdown-menu {
+  @include oio-scrollbar();
+
+  .#{$tabClassPrefix}-bar {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .#{$tabClassPrefix}-options {
+      margin-left: 2px;
+      display: inline-flex;
+      justify-content: flex-end;
+      align-items: center;
+
+      &-hide {
+        display: none;
+      }
+
+      &-top {
+        top: 0;
+        right: -16px;
+      }
+
+      &-left {
+        top: 0;
+        right: -16px;
+      }
+    }
+
+    .#{$tabClassPrefix}-close-icon {
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 8px;
+      width: 14px;
+      height: 14px;
+      background-color: #f1f1f1;
+      border-radius: 50%;
+      margin: 0;
+    }
+
+    .#{$tabClassPrefix}-title {
+      display: inline-block;
+      max-width: 120px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    &-invisible {
+      display: none;
+    }
+  }
+}

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

@@ -0,0 +1,9 @@
+@import '../../../style/global-parameters.scss';
+
+$tabsPrefix: $prefix + -tabs;
+$tabsParameterPrefix: $parameterPrefix + -tabs;
+$tabsClassPrefix: $tabsPrefix;
+
+$tabPrefix: $prefix + -tab;
+$tabParameterPrefix: $parameterPrefix + -tab;
+$tabClassPrefix: $tabPrefix;