@oinone/kunlun-vue-ui-antd 6.2.0

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

@@ -0,0 +1,154 @@
+<script lang="ts">
+import {
+  ButtonBizStyle,
+  ButtonType,
+  IconPlacement,
+  OioButtonProps,
+  OioIcon,
+  PropRecordHelper
+} from '@oinone/kunlun-vue-ui-common';
+import { Button as AButton } from 'ant-design-vue';
+import { isEmpty } from 'lodash-es';
+import { computed, createVNode, defineComponent, nextTick, reactive, VNode } from 'vue';
+import { DEFAULT_PREFIX } from '../../theme';
+
+interface State {
+  loading: boolean;
+}
+
+function isChildrenEmpty(children: VNode[]): boolean {
+  if (children.length === 0) {
+    return true;
+  }
+  if (children.length === 1) {
+    const textVNode = children[0];
+    if (textVNode.type.toString() === 'Symbol(Text)') {
+      return isEmpty(textVNode.children);
+    }
+  }
+  return false;
+}
+
+export default defineComponent({
+  name: 'OioButton',
+  components: {
+    AButton,
+    OioIcon
+  },
+  inheritAttrs: false,
+  props: {
+    ...OioButtonProps
+  },
+  slots: ['default', 'icon', 'update:loading', 'update:selected'],
+  setup(props, context) {
+    const state = reactive<State>({
+      loading: false
+    });
+
+    const internalLoading = computed<boolean>({
+      get: () => {
+        const currentLoading = props.loading;
+        if (currentLoading == null) {
+          return state.loading;
+        }
+        return currentLoading;
+      },
+      set: (val: boolean) => {
+        state.loading = val;
+        context.emit('update:loading', val);
+      }
+    });
+
+    const onClick = (...args) => {
+      const fn = context.attrs.onClick as Function;
+      if (!fn) {
+        return;
+      }
+      if (props.async) {
+        internalLoading.value = true;
+        nextTick(() => fn?.(...args)).finally(() => {
+          internalLoading.value = false;
+        });
+      } else {
+        fn?.(...args);
+      }
+      if (props.selected != null) {
+        context.emit('update:selected', !props.selected);
+      }
+    };
+
+    const bizStyle = computed(() => {
+      if (props.disabled || props.bizStyle === ButtonBizStyle.default) {
+        return undefined;
+      }
+      return props.bizStyle;
+    });
+
+    return {
+      state,
+      internalLoading,
+      bizStyle,
+      onClick
+    };
+  },
+  render() {
+    const { type, htmlType, block, href, target, internalLoading, disabled, onClick, selected } = this;
+    const slots = PropRecordHelper.collectionSlots(this.$slots, [
+      {
+        origin: 'default',
+        isNotNull: true
+      },
+      'icon'
+    ]);
+    if (!slots.icon && this.icon) {
+      slots.icon = () => [createVNode(OioIcon, { icon: this.icon })];
+    }
+    const buttonClassList = [`${DEFAULT_PREFIX}-button`, `${DEFAULT_PREFIX}-button-${this.type}`];
+    if (this.bizStyle) {
+      buttonClassList.push(`${DEFAULT_PREFIX}-button-biz-type-${this.bizStyle}`);
+    }
+    if (type === ButtonType.link && selected != null) {
+      if (selected) {
+        buttonClassList.push(`${DEFAULT_PREFIX}-button-selected`);
+      }
+    }
+    let children = slots.default?.() || [];
+    if (slots.icon) {
+      if (isChildrenEmpty(children)) {
+        buttonClassList.push(`${DEFAULT_PREFIX}-button-icon-only`);
+      } else {
+        buttonClassList.push(`${DEFAULT_PREFIX}-button-icon-${this.iconPlacement}`);
+      }
+      switch (this.iconPlacement) {
+        case IconPlacement.BEFORE:
+          children = [...slots.icon(), ...children];
+          break;
+        case IconPlacement.AFTER:
+          children = [...children, ...slots.icon()];
+          break;
+        default:
+          break;
+      }
+    }
+    if (href) {
+      buttonClassList.push(`${DEFAULT_PREFIX}-button-href-button`);
+      children.push(createVNode('a', { href, target }));
+    }
+    return createVNode(
+      AButton,
+      {
+        type,
+        block,
+        loading: internalLoading,
+        disabled,
+        htmlType,
+        ...PropRecordHelper.collectionBasicProps(this.$attrs, buttonClassList),
+        onClick
+      },
+      {
+        default: () => children
+      }
+    );
+  }
+});
+</script>

package/src/component/oio-button/style/a-button.scss

@@ -0,0 +1,210 @@
+@import './parameters.scss';
+@import '../../../style/mixin.scss';
+
+@mixin event-style($prefix: $buttonParameterPrefix) {
+  &:active {
+    @include oio-active($prefix);
+  }
+
+  &:hover {
+    @include oio-hover($prefix);
+  }
+
+  &:focus {
+    @include oio-focus($prefix);
+  }
+
+  &:visited {
+    @include oio-visited($prefix);
+  }
+}
+
+@mixin biz-type-style($prefix: $buttonParameterPrefix) {
+  $dangerPrefix: $prefix + -danger;
+
+  &.#{$buttonClassPrefix}-biz-type-danger {
+    @include oio-appearance($dangerPrefix);
+    @include event-style($dangerPrefix);
+  }
+
+  $infoPrefix: $prefix + -info;
+
+  &.#{$buttonClassPrefix}-biz-type-info {
+    @include oio-appearance($infoPrefix);
+    @include event-style($infoPrefix);
+  }
+
+  $warningPrefix: $prefix + -warning;
+
+  &.#{$buttonClassPrefix}-biz-type-warning {
+    @include oio-appearance($warningPrefix);
+    @include event-style($warningPrefix);
+  }
+
+  $successPrefix: $prefix + -success;
+
+  &.#{$buttonClassPrefix}-biz-type-success {
+    @include oio-appearance($successPrefix);
+    @include event-style($successPrefix);
+  }
+}
+
+&.ant-btn {
+  height: var($parameterPrefix + -height);
+  padding: 0 var($parameterPrefix + -padding-md);
+  line-height: var($parameterPrefix + -line-height);
+
+  & > span {
+    font-size: var($parameterPrefix + -font-size);
+    line-height: var($parameterPrefix + -line-height);
+    font-weight: var($parameterPrefix + -font-weight);
+    vertical-align: top;
+  }
+
+  .#{$iconClassPrefix} {
+    font-size: var($parameterPrefix + -font-size);
+  }
+
+  &.#{$buttonClassPrefix}-icon-before {
+    .#{$iconClassPrefix} {
+      margin-right: 8px;
+    }
+  }
+
+  &.#{$buttonClassPrefix}-icon-after {
+    .#{$iconClassPrefix} {
+      margin-left: 8px;
+    }
+  }
+
+  &.ant-btn-two-chinese-chars > :not(.anticon) {
+    letter-spacing: 4px;
+    margin-right: -4px;
+  }
+
+  &[disabled] {
+    @include oio-disabled(true);
+
+    &:active {
+      @include oio-disabled(true);
+    }
+
+    &:hover {
+      @include oio-disabled(true);
+    }
+
+    &:focus {
+      @include oio-disabled(true);
+    }
+
+    .oio-icon {
+      color: var($parameterPrefix + -disabled-color);
+    }
+  }
+
+  &:empty {
+    visibility: unset;
+    vertical-align: top;
+    width: 66px;
+  }
+
+  &.#{$buttonClassPrefix}-href-button:not([disabled]) {
+    position: relative;
+    pointer-events: none;
+
+    & > a {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      pointer-events: all;
+    }
+  }
+}
+
+$defaultParameterPrefix: $buttonParameterPrefix;
+
+&.ant-btn,
+&.ant-btn-default {
+  @include oio-appearance($defaultParameterPrefix);
+  @include event-style($defaultParameterPrefix);
+  @include biz-type-style($defaultParameterPrefix + -default);
+}
+
+$dashedParameterPrefix: $buttonParameterPrefix + -dashed;
+
+&.ant-btn-dashed {
+  @include oio-appearance($dashedParameterPrefix);
+  @include event-style($dashedParameterPrefix);
+  @include biz-type-style($dashedParameterPrefix);
+}
+
+$primaryParameterPrefix: $buttonParameterPrefix + -primary;
+
+&.ant-btn-primary {
+  @include oio-appearance($primaryParameterPrefix);
+  @include event-style($primaryParameterPrefix);
+  @include biz-type-style($primaryParameterPrefix);
+
+  .oio-icon {
+    color: #ffffff;
+  }
+}
+
+$linkParameterPrefix: $buttonParameterPrefix + -link;
+
+&.ant-btn-link {
+  @include oio-appearance($linkParameterPrefix);
+  @include event-style($linkParameterPrefix);
+  @include biz-type-style($linkParameterPrefix);
+
+  height: var($parameterPrefix + -line-height);
+  line-height: var($parameterPrefix + -line-height);
+  padding: 0;
+
+  &.#{$buttonClassPrefix}-icon-before {
+    .#{$iconClassPrefix} {
+      margin-right: 4px;
+    }
+  }
+
+  &.#{$buttonClassPrefix}-icon-after {
+    .#{$iconClassPrefix} {
+      margin-left: 4px;
+    }
+  }
+
+  &.#{$buttonClassPrefix}-icon-only {
+    background-color: transparent;
+
+    &:active,
+    &:hover,
+    &:focus,
+    &:visited {
+      background-color: transparent;
+    }
+  }
+
+  &[disabled] {
+    background-color: transparent;
+
+    &:active {
+      background-color: transparent;
+    }
+
+    &:hover {
+      background-color: transparent;
+    }
+
+    &:focus {
+      background-color: transparent;
+    }
+
+    &.#{$buttonClassPrefix}-icon-only {
+      .oio-icon {
+        color: var($parameterPrefix + -disabled-color);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,21 @@
+@import './parameters.scss';
+
+.#{$buttonClassPrefix} {
+  @import './a-button.scss';
+
+  &.#{$buttonClassPrefix}-link.#{$buttonClassPrefix}-selected {
+    background-color: rgba(var($parameterPrefix + -primary-color-rgb), 0.1);
+    border-radius: 4px;
+
+    &:active,
+    &:hover,
+    &:focus,
+    &:visited {
+      background-color: rgba(var($parameterPrefix + -primary-color-rgb), 0.1);
+    }
+
+    .oio-icon {
+      color: var($parameterPrefix + -primary-color-active);
+    }
+  }
+}

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

@@ -0,0 +1,5 @@
+@import '../../../style/global-parameters.scss';
+
+$buttonPrefix: $prefix + -button;
+$buttonParameterPrefix: $parameterPrefix + -button;
+$buttonClassPrefix: $buttonPrefix;

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

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

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

@@ -0,0 +1,171 @@
+<script lang="ts">
+import { CastHelper, StringHelper } from '@oinone/kunlun-shared';
+import {
+  CascaderDisplayRenderFunction,
+  CascaderItem,
+  CascaderProperties,
+  defaultCascaderProperties,
+  defaultLabelsSeparator,
+  fillCascaderItemsProperties,
+  OioCascaderProps,
+  PropRecordHelper,
+  SelectMode
+} from '@oinone/kunlun-vue-ui-common';
+import { Cascader as ACascader, Popover as APopover } from 'ant-design-vue';
+import { computed, createVNode, defineComponent } from 'vue';
+import { DEFAULT_PREFIX } from '../../theme';
+import { useMaxTagPlaceholder } from '../../vc-component';
+import { OioEmptyData } from '../oio-empty';
+
+export default defineComponent({
+  name: 'OioCascader',
+  components: {
+    ACascader,
+    APopover
+  },
+  inheritAttrs: false,
+  props: {
+    ...OioCascaderProps
+  },
+  emits: ['update:value', 'change', 'search'],
+  setup(props, context) {
+    const internalProperties = computed<CascaderProperties>(() => {
+      return {
+        ...defaultCascaderProperties,
+        ...(props.properties || {})
+      };
+    });
+
+    const internalOptions = computed<CascaderItem[]>(() => {
+      const options = props.options || [];
+      if (props.mappingOptions) {
+        return fillCascaderItemsProperties(options, internalProperties.value, props.customFillProperties) || [];
+      }
+      return CastHelper.cast(options);
+    });
+
+    const multiple = computed(() => {
+      return props.mode === SelectMode.multiple;
+    });
+
+    const defaultDisplayRender: CascaderDisplayRenderFunction = ({ labels }) => {
+      if (multiple.value) {
+        return labels[labels.length - 1];
+      }
+      return labels.join(props.labelsSeparator || defaultLabelsSeparator);
+    };
+
+    const onUpdateValue = (values: string[] | string[][]) => {
+      context.emit('update:value', values);
+    };
+
+    const onChange = (values: string[] | string[][], selectedOptions: CascaderItem[] | CascaderItem[][]) => {
+      context.emit('change', values, selectedOptions);
+    };
+
+    const onSearch = (val) => {
+      context.emit('search', val);
+    };
+
+    return {
+      internalProperties,
+      internalOptions,
+      multiple,
+
+      defaultDisplayRender,
+      ...useMaxTagPlaceholder(),
+
+      onUpdateValue,
+      onChange,
+      onSearch
+    };
+  },
+  render() {
+    const {
+      value,
+      options,
+      filterOption,
+      mappingOptions,
+      autofocus,
+      placeholder,
+      allowClear,
+      readonly,
+      disabled,
+      searchValue,
+      enableSearch,
+      dropdownClassName,
+      getTriggerContainer,
+      changeOnSelect,
+      multipleCheckedStrategy,
+
+      loading,
+      loadData,
+
+      internalOptions,
+      multiple,
+
+      displayRender,
+      tagRender,
+      maxTagCount,
+      maxTagPlaceholder,
+      defaultDisplayRender,
+      defaultMaxTagPlaceholder,
+
+      onUpdateValue,
+      onChange,
+      onSearch
+    } = this;
+
+    const classNames = [`${DEFAULT_PREFIX}-select`, `${DEFAULT_PREFIX}-cascader`];
+    const dropdownClassNames = [`${DEFAULT_PREFIX}-select-dropdown`, `${DEFAULT_PREFIX}-cascader-dropdown`];
+    if (readonly) {
+      classNames.push(`${DEFAULT_PREFIX}-select-readonly`);
+    }
+    if (disabled) {
+      classNames.push(`${DEFAULT_PREFIX}-select-disabled`);
+    }
+    if (multiple) {
+      classNames.push(`${DEFAULT_PREFIX}-select-multiple`);
+      dropdownClassNames.push(`${DEFAULT_PREFIX}-select-dropdown-multiple`);
+    }
+
+    const children = {};
+
+    let showSearch: boolean | { filter: Function } | undefined = enableSearch;
+    if (showSearch && filterOption) {
+      showSearch = { filter: filterOption };
+    }
+
+    return createVNode(
+      ACascader,
+      {
+        autofocus,
+        placeholder,
+        allowClear,
+        disabled: readonly || disabled,
+        dropdownClassName: StringHelper.append(dropdownClassNames, dropdownClassName).join(' '),
+        getPopupContainer: getTriggerContainer,
+        changeOnSelect,
+        value,
+        searchValue,
+        showSearch,
+        options: mappingOptions ? internalOptions : options,
+        multiple,
+        showCheckedStrategy: multipleCheckedStrategy,
+        loading,
+        loadData,
+        displayRender: displayRender || defaultDisplayRender,
+        tagRender,
+        maxTagCount,
+        maxTagPlaceholder: maxTagPlaceholder || defaultMaxTagPlaceholder,
+        notFoundContent: createVNode(OioEmptyData, { loading }),
+        ...PropRecordHelper.collectionBasicProps(this.$attrs, classNames),
+        'onUpdate:value': onUpdateValue,
+        onChange,
+        onSearch
+      },
+      children
+    );
+  }
+});
+</script>

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

@@ -0,0 +1,59 @@
+@import './parameters.scss';
+
+.#{$cascaderClassPrefix}-dropdown {
+  .ant-cascader-menus {
+    .ant-cascader-menu-item-expand-icon,
+    .ant-cascader-menu-item-loading-icon {
+      color: var(--oio-icon-color);
+    }
+
+    .ant-cascader-menu {
+      border-color: var(--oio-border-color);
+    }
+
+    .ant-cascader-menu-item {
+      font-size: var($parameterPrefix + -font-size);
+      color: var(--oio-text-color);
+
+      &:hover {
+        background-color: rgba(var($parameterPrefix + -primary-color-rgb), 0.1);
+      }
+
+      .ant-cascader-checkbox-checked .ant-cascader-checkbox-inner {
+        background-color: var($parameterPrefix + -primary-color);
+        border-color: var($parameterPrefix + -primary-color);
+      }
+
+      .ant-cascader-checkbox-indeterminate .ant-cascader-checkbox-inner:after {
+        background-color: var($parameterPrefix + -primary-color);
+      }
+
+      .ant-cascader-checkbox-input:focus + .ant-cascader-checkbox-inner,
+      .ant-cascader-checkbox-wrapper:hover .ant-cascader-checkbox-inner,
+      .ant-cascader-checkbox:hover .ant-cascader-checkbox-inner {
+        border-color: var($parameterPrefix + -primary-color);
+      }
+    }
+
+    .ant-cascader-menu-item-active:not(.ant-cascader-menu-item-disabled),
+    .ant-cascader-menu-item-active:not(.ant-cascader-menu-item-disabled):hover {
+      background-color: rgba(var($parameterPrefix + -primary-color-rgb), 0.1);
+
+      .ant-cascader-menu-item-content {
+        color: var($parameterPrefix + -primary-color);
+      }
+    }
+  }
+
+  &:not(.#{$classPrefix}-select-dropdown-multiple) {
+    .ant-cascader-menus {
+      .ant-cascader-menu-item-active:not(.ant-cascader-menu-item-expand) {
+        &:after {
+          content: '✓';
+          color: var($parameterPrefix + -primary-color);
+          font-weight: 500;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,5 @@
+@import '../../../style/global-parameters.scss';
+
+$cascaderPrefix: $prefix + -cascader;
+$cascaderParameterPrefix: $parameterPrefix + -cascader;
+$cascaderClassPrefix: $cascaderPrefix;

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

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

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

@@ -0,0 +1,69 @@
+<script lang="ts">
+import { OioCheckboxProps, PropRecordHelper } from '@oinone/kunlun-vue-ui-common';
+import { Checkbox as ACheckbox } from 'ant-design-vue';
+import { computed, createVNode, defineComponent, ref } from 'vue';
+import { DEFAULT_PREFIX } from '../../theme';
+
+export default defineComponent({
+  name: 'OioCheckbox',
+  components: {
+    ACheckbox
+  },
+  inheritAttrs: false,
+  props: {
+    ...OioCheckboxProps
+  },
+  emits: ['update:checked', 'change'],
+  slots: ['default'],
+  setup(props, context) {
+    const internalChecked = ref(false);
+    const checked = computed<boolean>({
+      get() {
+        if (props.checked === undefined) {
+          return internalChecked.value;
+        }
+        if (props.checked === null) {
+          return false;
+        }
+        return props.checked;
+      },
+      set(value) {
+        if (props.readonly) {
+          return;
+        }
+        context.emit('update:checked', value);
+        context.emit('change', value);
+        internalChecked.value = value;
+      }
+    });
+
+    const onUpdateChecked = (val: boolean) => {
+      checked.value = val;
+    };
+
+    return {
+      checked,
+      onUpdateChecked
+    };
+  },
+  render() {
+    const { onUpdateChecked, onChange } = this;
+    const checkboxClassList = [`${DEFAULT_PREFIX}-checkbox`];
+    if (this.readonly) {
+      checkboxClassList.push(`${DEFAULT_PREFIX}-checkbox-readonly`);
+    }
+    return createVNode(
+      ACheckbox,
+      {
+        autofocus: this.autofocus,
+        indeterminate: this.indeterminate,
+        checked: this.checked,
+        disabled: this.disabled,
+        ...PropRecordHelper.collectionBasicProps(this.$attrs, checkboxClassList),
+        'onUpdate:checked': onUpdateChecked
+      },
+      PropRecordHelper.collectionSlots(this.$slots, ['default'])
+    );
+  }
+});
+</script>

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

@@ -0,0 +1,8 @@
+@import './parameters.scss';
+
+.#{$checkboxClassPrefix} {
+  .ant-checkbox-inner {
+    background-color: var(--oio-background);
+    border: 1px solid var(--oio-border-color);
+  }
+}