@oinone/kunlun-vue-ui-antd 6.2.0

package/src/component/oio-tabs/use-tab-bar.ts

@@ -0,0 +1,69 @@
+import { DEFAULT_TAB_TITLE, TabHTMLNode } from '@oinone/kunlun-vue-ui-common';
+import { createVNode, Ref, unref, VNode } from 'vue';
+import { DEFAULT_PREFIX } from '../../theme';
+import { Tooltip as ATooltip } from 'ant-design-vue';
+import { QuestionCircleOutlined } from '@ant-design/icons-vue';
+
+export function useTabBar(title: string | Ref<string>, help?: string | Ref<string>): VNode {
+  const titleValue = unref(title) || DEFAULT_TAB_TITLE;
+  const vnodes = [
+    createVNode(
+      'span',
+      { class: 'oio-tab-title', title: titleValue },
+      titleValue
+    )
+  ]
+  const helpValue = unref(help) || '';
+  if (helpValue && helpValue !== '') {
+    vnodes.push(
+      createVNode(
+        ATooltip,
+        { placement: 'top', overlayStyle: { maxWidth: '260px' } as CSSStyleDeclaration },
+        {
+          title: () => {
+            return [createVNode('span', {}, helpValue)];
+          },
+          default: () => {
+            return [createVNode(QuestionCircleOutlined, { class: 'oio-question-icon', style: { marginLeft: '5px' } as CSSStyleDeclaration })];
+          }
+        }
+      )
+    );
+  }
+  return createVNode(
+    'div',
+    {
+      class: 'oio-tab-bar'
+    },
+    vnodes
+  );
+}
+
+const INVISIBLE_CLASS_NAME = `${DEFAULT_PREFIX}-tab-bar-invisible`;
+
+export function onTabInvisibleChange(nodes: TabHTMLNode[], index: number, invisible: boolean | undefined) {
+  const currentTabHTMLNode = nodes[index];
+  if (!currentTabHTMLNode || index !== currentTabHTMLNode.index) {
+    return;
+  }
+  onTabInvisible(currentTabHTMLNode.el, invisible);
+}
+
+export function onTabInvisible(el: HTMLElement, invisible: boolean | undefined) {
+  if (invisible) {
+    addInvisibleClassName(el);
+  } else {
+    removeInvisibleClassName(el);
+  }
+}
+
+function addInvisibleClassName(el: HTMLElement) {
+  const { classList } = el;
+  if (!classList.contains(INVISIBLE_CLASS_NAME)) {
+    classList.add(INVISIBLE_CLASS_NAME);
+  }
+}
+
+function removeInvisibleClassName(el: HTMLElement) {
+  el.classList.remove(INVISIBLE_CLASS_NAME);
+}

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

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

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

@@ -0,0 +1,76 @@
+<script lang="ts">
+import { CastHelper, StringHelper } from '@oinone/kunlun-shared';
+import { ATextareaProps, OioTextareaProps, PropRecordHelper } from '@oinone/kunlun-vue-ui-common';
+import { Textarea as ATextarea } from 'ant-design-vue';
+import { isEmpty, isNil } from 'lodash-es';
+import { createVNode, defineComponent, ref } from 'vue';
+import { DEFAULT_PREFIX } from '../../theme';
+
+export default defineComponent({
+  name: 'OioTextarea',
+  components: {
+    ATextarea
+  },
+  inheritAttrs: false,
+  props: {
+    ...OioTextareaProps
+  },
+  emits: ['update:value', 'change'],
+  setup(props, context) {
+    const origin = ref();
+
+    context.expose({
+      focus: () => origin.value.focus(),
+      blur: () => origin.value.blur()
+    });
+
+    return {
+      origin
+    };
+  },
+  render() {
+    const otherProps = {};
+    const textareaClassList = [`${DEFAULT_PREFIX}-textarea`];
+    if (this.readonly) {
+      textareaClassList.push(`${DEFAULT_PREFIX}-textarea-readonly`);
+    }
+    if (this.allowClear && !isEmpty(this.value)) {
+      textareaClassList.push(`${DEFAULT_PREFIX}-textarea-allow-clear`);
+    }
+    const maxlength = this.maxlength;
+    const { truncateMaxLength } = this;
+    const textareaProps: Record<string, unknown> = {
+      ...PropRecordHelper.convert(ATextareaProps, CastHelper.cast(this)),
+      ...this.$attrs,
+      readonly: this.readonly,
+      'onUpdate:value': (val) => this.$emit('update:value', val),
+      ref: 'origin'
+    };
+    if (this.showCount && (!isNil(maxlength) || !isNil(truncateMaxLength))) {
+      let { value } = this;
+      if (isNil(value)) {
+        value = '';
+      }
+      textareaClassList.push(`${DEFAULT_PREFIX}-textarea-show-count`);
+      otherProps['data-count'] = value.length;
+      otherProps['data-total'] = maxlength || truncateMaxLength;
+      textareaProps.class = StringHelper.append([], CastHelper.cast(this.$attrs.class));
+    } else {
+      textareaProps.class = StringHelper.append(textareaClassList, CastHelper.cast(this.$attrs.class));
+    }
+    let textareaNode = createVNode(ATextarea, textareaProps);
+    if (!isEmpty(otherProps)) {
+      textareaNode = createVNode(
+        'div',
+        {
+          class: textareaClassList,
+          style: this.$attrs.style,
+          ...otherProps
+        },
+        [textareaNode]
+      );
+    }
+    return textareaNode;
+  }
+});
+</script>

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

@@ -0,0 +1,108 @@
+@import '../../../style/mixin.scss';
+@import '../../oio-input/style/mixin.scss';
+@import './parameters.scss';
+
+.#{$textareaClassPrefix} {
+  &.ant-input-affix-wrapper,
+  .ant-input-affix-wrapper {
+    border: none;
+    background-color: transparent;
+  }
+
+  .ant-input-textarea-clear-icon {
+    display: none;
+  }
+
+  &.#{$textareaClassPrefix}-allow-clear {
+    &:hover {
+      & + .ant-input-textarea-clear-icon {
+        display: inline-block;
+      }
+
+      & > .ant-input-affix-wrapper-textarea-with-clear-btn > .ant-input-textarea-clear-icon {
+        display: inline-block;
+      }
+    }
+  }
+
+  textarea.ant-input {
+    font-size: var(--oio-font-size);
+    @include oio-appearance($textareaParameterPrefix);
+
+    &:hover {
+      @include oio-hover($textareaParameterPrefix);
+    }
+
+    &:focus {
+      @include oio-focus($textareaParameterPrefix);
+    }
+  }
+
+  textarea.ant-input[disabled] {
+    background-color: var($parameterPrefix + -disabled-bg);
+    color: var($parameterPrefix + -disabled-color);
+
+    &:hover {
+      border-color: var($textareaParameterPrefix + -border-color);
+    }
+  }
+
+  &.#{$textareaClassPrefix}-readonly {
+    textarea.ant-input {
+      background-color: var($parameterPrefix + -disabled-bg);
+    }
+
+    .ant-input-affix-wrapper-textarea-with-clear-btn {
+      .ant-input-textarea-clear-icon {
+        visibility: hidden;
+      }
+    }
+  }
+
+  &.#{$textareaClassPrefix}-show-count[data-count] {
+    position: relative;
+
+    &:after {
+      @include counter();
+      bottom: 9px;
+      right: 12px;
+    }
+  }
+}
+
+textarea.#{$textareaClassPrefix} {
+  font-size: var(--oio-font-size);
+  @include oio-appearance($textareaParameterPrefix);
+
+  &:hover {
+    @include oio-hover($textareaParameterPrefix);
+  }
+
+  &:focus {
+    @include oio-focus($textareaParameterPrefix);
+  }
+
+  &[readonly] {
+    @include oio-readonly(true);
+
+    &:hover {
+      @include oio-readonly(true);
+    }
+
+    &:focus {
+      @include oio-readonly(true);
+    }
+  }
+
+  &[disabled] {
+    @include oio-disabled(true);
+
+    &:hover {
+      @include oio-disabled(true);
+    }
+
+    &:focus {
+      @include oio-disabled(true);
+    }
+  }
+}

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

@@ -0,0 +1,5 @@
+@import '../../../style/global-parameters.scss';
+
+$textareaPrefix: $prefix + -textarea;
+$textareaParameterPrefix: $parameterPrefix + -textarea;
+$textareaClassPrefix: $textareaPrefix;

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

@@ -0,0 +1,2 @@
+export { default as OioTooltip } from './oio-tooltip.vue';
+export { default as OioTooltipHelp } from './oio-tooltip-help.vue';

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

@@ -0,0 +1,40 @@
+<script lang="ts">
+import { QuestionCircleOutlined } from '@ant-design/icons-vue';
+import { PropRecordHelper } from '@oinone/kunlun-vue-ui-common';
+import { createVNode, defineComponent } from 'vue';
+import { DEFAULT_PREFIX } from '../../theme';
+import OioTooltip from './oio-tooltip.vue';
+
+export default defineComponent({
+  name: 'OioTooltipHelp',
+  components: {
+    OioTooltip,
+    QuestionCircleOutlined
+  },
+  props: {
+    content: {
+      type: String,
+      required: true
+    }
+  },
+  slots: ['default', 'title'],
+  render() {
+    const { content } = this;
+    return [
+      createVNode(
+        OioTooltip,
+        { class: `${DEFAULT_PREFIX}-tooltip-help`, title: this.$translate(content) },
+        PropRecordHelper.collectionSlots(this.$slots, [
+          {
+            origin: 'default',
+            default: () => {
+              return [createVNode(QuestionCircleOutlined)];
+            }
+          },
+          'title'
+        ])
+      )
+    ];
+  }
+});
+</script>

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

@@ -0,0 +1,59 @@
+<script lang="ts">
+import { CastHelper, StringHelper } from '@oinone/kunlun-shared';
+import { convertAntdTooltipPlacement, OioTooltipProps, PropRecordHelper } from '@oinone/kunlun-vue-ui-common';
+import { Tooltip as ATooltip } from 'ant-design-vue';
+import { computed, createVNode, defineComponent } from 'vue';
+import { DEFAULT_PREFIX } from '../../theme';
+
+export default defineComponent({
+  name: 'OioTooltip',
+  components: {
+    ATooltip
+  },
+  inheritAttrs: false,
+  props: {
+    ...OioTooltipProps
+  },
+  slots: ['default', 'title'],
+  emits: ['update:visible'],
+  setup(props, context) {
+    const placement = computed<string | undefined>(() => {
+      return convertAntdTooltipPlacement(props.placement);
+    });
+
+    const onUpdateVisible = (val: boolean) => {
+      if (props.disabled) {
+        return;
+      }
+      context.emit('update:visible', val);
+    };
+
+    return {
+      placement,
+      onUpdateVisible
+    };
+  },
+  render() {
+    const componentProps: Record<string, unknown> = {
+      title: this.title,
+      trigger: this.trigger,
+      placement: this.placement,
+      overlayStyle: this.overlayStyle,
+      ...this.$attrs,
+      destroyTooltipOnHide: this.destroyOnHide,
+      'onUpdate:visible': this.onUpdateVisible,
+      class: StringHelper.append([`${DEFAULT_PREFIX}-tooltip`], CastHelper.cast(this.$attrs.class)),
+      overlayClassName: StringHelper.append(
+        [`${DEFAULT_PREFIX}-tooltip-overlay`],
+        CastHelper.cast(this.overlayClassName)
+      ).join(' ')
+    };
+    if (this.disabled) {
+      componentProps.visible = false;
+    } else if (this.visible !== undefined) {
+      componentProps.visible = this.visible;
+    }
+    return createVNode(ATooltip, componentProps, PropRecordHelper.collectionSlots(this.$slots, ['default', 'title']));
+  }
+});
+</script>

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

@@ -0,0 +1,8 @@
+@import './parameters.scss';
+
+.#{$tooltipHelpClassPrefix} {
+  color: var($parameterPrefix + -primary-color);
+  font-size: 14px;
+  font-weight: normal;
+  margin: 0 5px;
+}

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

@@ -0,0 +1,9 @@
+@import '../../../style/global-parameters.scss';
+
+$tooltipPrefix: $prefix + -tooltip;
+$tooltipParameterPrefix: $parameterPrefix + -tooltip;
+$tooltipClassPrefix: $tooltipPrefix;
+
+$tooltipHelpPrefix: $tooltipPrefix + -help;
+$tooltipHelpParameterPrefix: $tooltipParameterPrefix + -help;
+$tooltipHelpClassPrefix: $tooltipHelpPrefix;

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

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

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

@@ -0,0 +1,181 @@
+<script lang="ts">
+import { StringHelper } from '@oinone/kunlun-shared';
+import {
+  OioTreeNode,
+  OioTreeProps,
+  PropRecordHelper,
+  TreeNodeCheckedEvent,
+  TreeNodeExpandedEvent,
+  TreeNodeSelectedEvent
+} from '@oinone/kunlun-vue-ui-common';
+import { Tree as ATree } from 'ant-design-vue';
+import { isNil } from 'lodash-es';
+import { computed, createVNode, defineComponent, ref } from 'vue';
+import { DEFAULT_PREFIX } from '../../theme';
+import { OioSpin } from '../oio-spin';
+
+export default defineComponent({
+  name: 'OioTree',
+  components: {
+    ATree,
+    OioSpin
+  },
+  inheritAttrs: false,
+  props: {
+    ...OioTreeProps
+  },
+  slots: ['title', 'icon', 'switcherIcon'],
+  emits: [
+    'update:expandedKeys',
+    'update:selectedKeys',
+    'update:checkedKeys',
+    'update:loadedKeys',
+    'selected',
+    'expanded',
+    'checked'
+  ],
+  setup(props, { emit }) {
+    const internalLoadedKeys = ref<string[]>([]);
+    const loadedKeys = computed({
+      get() {
+        return props.loadedKeys || internalLoadedKeys.value;
+      },
+      set(val: string[]) {
+        internalLoadedKeys.value = val;
+        emit('update:loadedKeys', val);
+      }
+    });
+
+    const loadData = async (event: { dataRef: OioTreeNode; loaded: boolean }) => {
+      if (event.loaded || event.dataRef.loaded) {
+        loadedKeys.value = [...new Set([...loadedKeys.value, event.dataRef.key])];
+        return;
+      }
+      try {
+        await props.loadData?.(event.dataRef);
+        loadedKeys.value = [...new Set([...loadedKeys.value, event.dataRef.key])];
+      } catch (e) {
+        console.error(e);
+      }
+    };
+
+    const onSelected = (
+      selectedKeys: string[],
+      e: { nativeEvent: PointerEvent; node: { dataRef: OioTreeNode }; selected: boolean }
+    ) => {
+      const event: TreeNodeSelectedEvent = {
+        origin: [selectedKeys, e],
+        event: e.nativeEvent,
+        node: e.node.dataRef,
+        selected: e.selected,
+        selectedKeys
+      };
+      emit('selected', event);
+    };
+
+    const onExpanded = (
+      expandedKeys: string[],
+      e: { nativeEvent: PointerEvent; node: { dataRef: OioTreeNode }; expanded: boolean }
+    ) => {
+      const event: TreeNodeExpandedEvent = {
+        origin: [expandedKeys, e],
+        event: e.nativeEvent,
+        node: e.node.dataRef,
+        expanded: e.expanded,
+        expandedKeys
+      };
+      emit('expanded', event);
+    };
+
+    const onChecked = (
+      checkedKeys: string[],
+      e: { nativeEvent: PointerEvent; node: { dataRef: OioTreeNode }; checked: boolean }
+    ) => {
+      const event: TreeNodeCheckedEvent = {
+        origin: [checkedKeys, e],
+        event: e.nativeEvent,
+        node: e.node.dataRef,
+        checked: e.checked,
+        checkedKeys
+      };
+      emit('checked', event);
+    };
+
+    return {
+      loadData,
+      loadedKeys,
+      onSelected,
+      onExpanded,
+      onChecked
+    };
+  },
+  render() {
+    const {
+      loading,
+      loadingIndicator,
+      wrapperClassName,
+
+      data,
+      loadData,
+      loadedKeys,
+      blockNode,
+      showIcon,
+      showLine,
+
+      selectable,
+      selectedKeys,
+
+      expandedKeys,
+      autoExpandParent,
+
+      checkable,
+      checkedKeys,
+      checkStrictly
+    } = this;
+    const treeComponent = createVNode(
+      ATree,
+      {
+        treeData: data,
+        loadData,
+        loadedKeys,
+        blockNode,
+        showIcon,
+        showLine,
+
+        selectable,
+        selectedKeys,
+
+        expandedKeys,
+        autoExpandParent,
+
+        checkable,
+        checkedKeys,
+        checkStrictly,
+
+        'onUpdate:expandedKeys': (val) => this.$emit('update:expandedKeys', val),
+        'onUpdate:checkedKeys': (val) => this.$emit('update:checkedKeys', val),
+        'onUpdate:selectedKeys': (val) => this.$emit('update:selectedKeys', val),
+        ...PropRecordHelper.collectionBasicProps(this.$attrs, [`${DEFAULT_PREFIX}-tree`]),
+        onSelect: this.onSelected,
+        onExpand: this.onExpanded,
+        onCheck: this.onChecked
+      },
+      PropRecordHelper.collectionSlots(this.$slots, ['title', showIcon ? 'icon' : '', 'switcherIcon'])
+    );
+    if (isNil(loading)) {
+      return treeComponent;
+    }
+    return createVNode(
+      OioSpin,
+      {
+        loading,
+        loadingIndicator,
+        wrapperClassName: StringHelper.append([`${DEFAULT_PREFIX}-tree-wrapper`], wrapperClassName).join(' ')
+      },
+      {
+        default: () => [treeComponent]
+      }
+    );
+  }
+});
+</script>

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

@@ -0,0 +1,51 @@
+@import './parameters.scss';
+
+.#{$treeClassPrefix} {
+  background-color: transparent;
+
+  .ant-tree-node-content-wrapper {
+    color: var(--oio-text-color);
+
+    &.ant-tree-node-selected {
+      background-color: rgba(var(--oio-primary-color-rgb), 0.1);
+      border-radius: 4px;
+    }
+  }
+
+  &.ant-tree .ant-tree-node-content-wrapper:hover {
+    background-color: var(--oio-menu-hover-background-color);
+  }
+
+  .ant-tree-checkbox:not(.ant-tree-checkbox-checked) {
+    background: var(--oio-checkbox-background);
+
+    .ant-tree-checkbox-inner {
+      background-color: var(--oio-background);
+      border: 1px solid var(--oio-border-color);
+    }
+  }
+
+  .anticon {
+    color: var(--oio-icon-color);
+  }
+}
+
+.ant-tree-checkbox-checked .ant-tree-checkbox-inner {
+  background-color: var(--oio-primary-color);
+  border-color: var(--oio-primary-color);
+}
+
+.ant-tree-checkbox-disabled .ant-tree-checkbox-inner {
+  background-color: var(--oio-disabled-bg);
+  border-color: var(--oio-disabled-border-color);
+}
+
+.ant-tree-checkbox-indeterminate .ant-tree-checkbox-inner:after {
+  background-color: var(--oio-primary-color);
+}
+
+.ant-tree-checkbox-input:focus + .ant-tree-checkbox-inner,
+.ant-tree-checkbox-wrapper:hover .ant-tree-checkbox-inner,
+.ant-tree-checkbox:hover .ant-tree-checkbox-inner {
+  border-color: var(--oio-primary-color);
+}

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

@@ -0,0 +1,5 @@
+@import '../../../style/global-parameters';
+
+$treePrefix: $prefix + -tree;
+$treeParameterPrefix: $parameterPrefix + -tree;
+$treeClassPrefix: $treePrefix;

package/src/component/oio-tree-select/index.ts

@@ -0,0 +1 @@
+export { default as OioTreeSelect } from './oio-tree-select.vue';