@oinone/kunlun-vue-ui-antd 6.2.0

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

@@ -0,0 +1,104 @@
+<script lang="ts">
+import { CastHelper, StringHelper } from '@oinone/kunlun-shared';
+import {
+  defaultSelectProperties,
+  fillSelectItemProperties,
+  OioSelectProps,
+  PropRecordHelper,
+  SelectProperties,
+  SelectItem
+} from '@oinone/kunlun-vue-ui-common';
+import { Select as ASelect } from 'ant-design-vue';
+import { isString } from 'lodash-es';
+import { computed, createVNode, defineComponent } from 'vue';
+import { DEFAULT_PREFIX } from '../../theme';
+
+export default defineComponent({
+  name: 'OioSelect',
+  components: {
+    ASelect
+  },
+  inheritAttrs: false,
+  props: {
+    ...OioSelectProps
+  },
+  slots: ['dropdownRender', 'removeIcon', 'clearIcon', 'suffixIcon', 'menuItemSelectedIcon'],
+  emits: ['update:value'],
+  setup(props) {
+    const internalProperties = computed<SelectProperties>(() => {
+      return {
+        ...defaultSelectProperties,
+        ...(props.properties || {})
+      };
+    });
+
+    const internalOptions = computed<SelectItem[]>(() => {
+      if (props.mappingOptions) {
+        const options: SelectItem[] = [];
+        props.options?.forEach((value, index) => {
+          const option = fillSelectItemProperties(value, index, internalProperties.value, props.customFillProperties);
+          if (option) {
+            options.push(option);
+          }
+        });
+        return options;
+      }
+      return CastHelper.cast(props.options || []);
+    });
+
+    const internalValue = computed<SelectItem | undefined>(() => {
+      const { value } = props;
+      if (value == null) {
+        return undefined;
+      }
+      if (isString(value)) {
+        return internalOptions.value.find((v) => v.key === value);
+      }
+      return value;
+    });
+
+    return {
+      internalProperties,
+      internalOptions,
+      internalValue
+    };
+  },
+  render() {
+    return createVNode(
+      ASelect,
+      {
+        value: this.internalValue,
+        options: this.internalOptions,
+        filterOption: this.filterOption,
+        autofocus: this.autofocus,
+        placeholder: this.placeholder,
+        allowClear: this.allowClear,
+        readonly: this.readonly,
+        disabled: this.disabled,
+        bordered: true,
+        labelInValue: true,
+        showSearch: this.showSearch,
+        mode: this.mode,
+        ...this.$attrs,
+        optionFilterProp: defaultSelectProperties.filterProp,
+        optionLabelProp: defaultSelectProperties.labelProp,
+        'onUpdate:value': (val) => this.$emit('update:value', val),
+        class: StringHelper.append([`${DEFAULT_PREFIX}-select`], CastHelper.cast(this.$attrs.class)),
+        dropdownClassName: StringHelper.append(
+          [`${DEFAULT_PREFIX}-select-dropdown`],
+          CastHelper.cast(this.dropdownClassName)
+        ).join(' '),
+        getPopupContainer: this.getTriggerContainer
+      },
+      PropRecordHelper.collectionSlots(this.$slots, [
+        'default',
+        'dropdownRender',
+        'removeIcon',
+        'clearIcon',
+        'suffixIcon',
+        'menuItemSelectedIcon'
+      ])
+    );
+  }
+});
+</script>

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

@@ -0,0 +1,102 @@
+@import '../../../style/mixin.scss';
+@import './parameters.scss';
+@import './mixin.scss';
+
+&.ant-select {
+  width: 100%;
+
+  .ant-select-selector,
+  &:not(.ant-select-customize-input) .ant-select-selector {
+    width: 100%;
+    @include select-style();
+    overflow: hidden;
+    padding: 0;
+
+    .ant-select-selection-search {
+      left: 0;
+      box-sizing: border-box;
+
+      input {
+        height: var($selectParameterPrefix + -line-height);
+      }
+    }
+  }
+
+  .ant-select-arrow {
+    color: var($selectParameterPrefix + -counter-color);
+  }
+
+  &.ant-select-single {
+    .ant-select-selector {
+      .ant-select-selection-search,
+      .ant-select-selection-item,
+      .ant-select-selection-placeholder {
+        height: var($parameterPrefix + -height);
+        line-height: var($selectParameterPrefix + -line-height);
+        padding: var($parameterPrefix + -padding-xs) 20px var($parameterPrefix + -padding-xs) 11px;
+      }
+    }
+  }
+
+  &:not(.ant-select-multiple) {
+    .ant-select-selector {
+      .ant-select-selection-search,
+      .ant-select-selection-item,
+      .ant-select-selection-placeholder {
+        height: var($parameterPrefix + -height);
+        line-height: var($selectParameterPrefix + -line-height);
+        padding: var($parameterPrefix + -padding-xs) 20px var($parameterPrefix + -padding-xs) 11px;
+      }
+    }
+  }
+
+  &:not(.ant-select-disabled):hover .ant-select-selector {
+    border-color: var($selectParameterPrefix + -border-color-hover);
+  }
+
+  &.ant-select-focused:not(.ant-select-disabled) {
+    .ant-select-selector {
+      @include oio-focus($selectParameterPrefix);
+    }
+  }
+
+  &.ant-select-auto-complete .ant-select-selector .ant-select-selection-search .ant-select-selection-search-input {
+    padding: 0;
+  }
+
+  &.ant-select-multiple .ant-select-selector {
+    padding: 1px 4px;
+    min-height: var(--oio-height);
+    &:after {
+      line-height: var(--oio-select-line-height);
+    }
+    .ant-select-selection-overflow-item {
+      height: calc(var(--oio-height) - 4px);
+      &-suffix {
+        height: var(--oio-select-line-height);
+      }
+    }
+    .ant-select-selection-item {
+      height: calc(var(--oio-height) - 8px);
+      line-height: calc(var(--oio-height) - 8px);
+      background: var(--oio-input-tag-background);
+      border: none;
+      border-radius: var(--oio-border-radius);
+      color: var(--oio-primary-color);
+      font-size: var(--oio-font-size-sm);
+      &-content,
+      &-remove {
+        line-height: calc(var(--oio-height) - 10px);
+      }
+    }
+    .ant-select-selection-search {
+      height: var(--oio-select-line-height);
+      line-height: var(--oio-select-line-height);
+      &-mirror,
+      input {
+        height: var(--oio-select-line-height);
+        line-height: var(--oio-select-line-height);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,129 @@
+@import './parameters.scss';
+
+$tagHeight: 28px;
+$tagLineHeight: $tagHeight - 3px;
+$tagRemoveLineHeight: $tagHeight - 4px;
+
+.#{$selectClassPrefix} {
+  @import './a-select.scss';
+
+  &.ant-select.#{$selectClassPrefix}-disabled,
+  &.ant-select.ant-select-disabled {
+    &:not(.ant-select-customize-input) .ant-select-selector {
+      color: var($parameterPrefix + -disabled-color);
+      background-color: var($parameterPrefix + -disabled-bg);
+      border-color: var($parameterPrefix + -disabled-border-color);
+    }
+  }
+
+  &.ant-select.#{$selectClassPrefix}-readonly,
+  &.ant-select.ant-select-readonly {
+    &:not(.ant-select-customize-input) .ant-select-selector {
+      color: var($parameterPrefix + -readonly-color);
+      background-color: var($parameterPrefix + -readonly-bg);
+      border-color: var($parameterPrefix + -readonly-border-color);
+    }
+  }
+
+  .ant-select-arrow {
+    right: 12px;
+  }
+
+  .ant-select-selection-placeholder {
+    color: var(--oio-placeholder-color);
+  }
+
+  &-multiple {
+    .ant-select-selection-item {
+      display: flex;
+      align-items: center;
+      // height: $tagHeight;
+      font-size: var($parameterPrefix + -font-size-sm);
+      color: var($parameterPrefix + -primary-color);
+      background-color: rgba(var($parameterPrefix + -primary-color-rgb), 0.1);
+      border-color: rgba(var($parameterPrefix + -primary-color-rgb), 0.2);
+      border-radius: var($parameterPrefix + -border-radius);
+
+      .ant-select-selection-item-content {
+        // line-height: $tagLineHeight;
+      }
+
+      .ant-select-selection-item-remove {
+        line-height: 1;
+      }
+    }
+  }
+}
+
+.#{$selectClassPrefix}-dropdown {
+  background: var(--oio-select-dropdown-background);
+  box-shadow: var(--oio-select-dropdown-box-shadow);
+
+  .ant-select-item {
+    color: var(--oio-select-dropdown-color) !important;
+
+    &:hover {
+      background: var(--oio-select-dropdown-selected) !important;
+      color: var(--oio-select-dropdown-selected-color) !important;
+    }
+
+    &.ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
+      background: var(--oio-select-dropdown-selected) !important;
+
+      .ant-select-item-option-content {
+        color: var(--oio-select-dropdown-selected-color) !important;
+      }
+    }
+
+    &.ant-select-item-option-disabled,
+    &.ant-select-item.ant-select-item-option-selected.ant-select-item-option-disabled {
+      color: var(--oio-disabled-color) !important;
+      background: transparent !important;
+      text-decoration-line: line-through;
+      &:hover {
+        background: transparent !important;
+        color: var(--oio-disabled-color) !important;
+      }
+    }
+  }
+
+  .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
+    color: var($parameterPrefix + -primary-color);
+    background-color: rgba(var($parameterPrefix + -primary-color-rgb), 0.1);
+  }
+
+  .ant-select-item-option-active:not(.ant-select-item-option-disabled) {
+    background-color: rgba(var($parameterPrefix + -primary-color-rgb), 0.1);
+  }
+
+  .ant-select-item-option-state {
+    display: none;
+  }
+
+  .ant-form-item-has-error .ant-select:not(.ant-select-disabled):not(.ant-select-customize-input) .ant-select-selector {
+    background: transparent;
+  }
+
+  .ant-empty-description {
+    color: var(--oio-text-color);
+  }
+}
+
+.#{$selectClassPrefix}-selection-rest-item {
+  height: 24px;
+  line-height: 22px;
+  margin-bottom: 2px;
+  margin-top: 2px;
+  margin-inline-end: 4px;
+  padding-inline-end: 4px;
+  padding-inline-start: 8px;
+  font-size: var($parameterPrefix + -font-size-sm);
+  color: var($parameterPrefix + -primary-color);
+  background-color: rgba(var($parameterPrefix + -primary-color-rgb), 0.1);
+  border: 1px solid rgba(var($parameterPrefix + -primary-color-rgb), 0.2);
+  border-radius: var($parameterPrefix + -border-radius);
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: nowrap;
+}

package/src/component/oio-select/style/mixin.scss

@@ -0,0 +1,18 @@
+@import '../../../style/mixin.scss';
+@import './parameters.scss';
+
+@mixin select-style() {
+  @include oio-appearance($selectParameterPrefix);
+
+  height: var($parameterPrefix + -height);
+  line-height: var($selectParameterPrefix + -line-height);
+  font-size: var(--oio-font-size);
+
+  &:hover {
+    @include oio-hover($selectParameterPrefix);
+  }
+
+  &:focus {
+    @include oio-focus($selectParameterPrefix);
+  }
+}

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

@@ -0,0 +1,5 @@
+@import '../../../style/global-parameters.scss';
+
+$selectPrefix: $prefix + -select;
+$selectParameterPrefix: $parameterPrefix + -select;
+$selectClassPrefix: $selectPrefix;

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

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

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

@@ -0,0 +1,81 @@
+<script lang="ts">
+import { CastHelper, StringHelper } from '@oinone/kunlun-shared';
+import { convertAntdTooltipPlacement, OioSliderProps, SliderDirection } from '@oinone/kunlun-vue-ui-common';
+import { Slider as ASlider } from 'ant-design-vue';
+import { computed, createVNode, defineComponent, onBeforeMount, ref } from 'vue';
+import { DEFAULT_PREFIX } from '../../theme';
+
+export default defineComponent({
+  name: 'OioSlider',
+  components: {
+    ASlider
+  },
+  inheritAttrs: false,
+  props: {
+    ...OioSliderProps
+  },
+  emits: ['update:value'],
+  setup(props, context) {
+    const value = ref<number | undefined>();
+    const realValue = computed<number | undefined>({
+      get() {
+        if (props.value == null) {
+          return value.value;
+        }
+        return props.value;
+      },
+      set(val) {
+        value.value = val;
+        context.emit('update:value', val);
+      }
+    });
+
+    onBeforeMount(() => {
+      value.value = props.defaultValue;
+    });
+
+    const vertical = computed(() => {
+      if (!props.direction) {
+        return undefined;
+      }
+      return props.direction === SliderDirection.vertical;
+    });
+
+    const tooltipPlacement = computed<string | undefined>(() => {
+      return convertAntdTooltipPlacement(props.tooltipPlacement);
+    });
+
+    const onUpdateValue = (val: number) => {
+      realValue.value = val;
+    };
+
+    return {
+      realValue,
+      vertical,
+      tooltipPlacement,
+
+      onUpdateValue
+    };
+  },
+  render() {
+    return createVNode(ASlider, {
+      value: this.realValue,
+      min: this.min,
+      max: this.max,
+      step: this.step,
+      vertical: this.vertical,
+      marks: this.marks,
+      dots: this.dots,
+      reverse: this.reverse,
+      range: this.range,
+      tooltipVisible: this.tooltipVisible,
+      tooltipPlacement: this.tooltipPlacement,
+      tipFormatter: this.tooltipFormatter,
+      getTooltipPopupContainer: this.getTooltipTriggerContainer,
+      ...this.$attrs,
+      class: StringHelper.append([`${DEFAULT_PREFIX}-slider`], CastHelper.cast(this.$attrs.class)),
+      'onUpdate:value': this.onUpdateValue
+    });
+  }
+});
+</script>

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

@@ -0,0 +1,100 @@
+@import './parameters.scss';
+
+/**
+ * 滑动轨道高度
+ * 滑块拖拽柄的大小和高度无法自动计算到中间位置，不使用主题进行设置
+ */
+$sliderHeight: 8px;
+
+/**
+ * 滑动轨道高度
+ * 滑块拖拽柄的大小和高度无法自动计算到中间位置，不使用主题进行设置
+ */
+$sliderWidth: 8px;
+
+.#{$sliderClassPrefix} {
+  height: var($parameterPrefix + -height);
+  padding: calc((var(#{$parameterPrefix + -height}) - #{$sliderHeight}) / 2) 0;
+  margin: 0;
+
+  .ant-slider-rail {
+    height: $sliderHeight;
+    background-color: #f4f4f4;
+    border-radius: calc(#{$sliderHeight} / 2);
+  }
+
+  .ant-slider-track {
+    height: $sliderHeight;
+    background-color: var($parameterPrefix + -primary-color);
+    border-radius: calc(#{$sliderHeight} / 2);
+  }
+
+  .ant-slider-step {
+    height: $sliderHeight;
+    border-radius: calc(#{$sliderHeight} / 2);
+  }
+
+  .ant-slider-handle {
+    margin-top: -3px;
+    border: 1px solid #c3c3c3;
+
+    &.ant-tooltip-open {
+      border-color: var($parameterPrefix + -primary-color-hover);
+    }
+
+    &-click-focused {
+      border-color: var($parameterPrefix + -primary-color-focus);
+    }
+  }
+
+  &:hover {
+    .ant-slider-rail {
+      background-color: #e3e3e3;
+    }
+
+    .ant-slider-track {
+      background-color: var($parameterPrefix + -primary-color-hover);
+    }
+
+    .ant-slider-handle:not(.ant-tooltip-open) {
+      border-color: var($parameterPrefix + -primary-color-hover);
+    }
+  }
+
+  &:focus {
+    border-color: var($parameterPrefix + -primary-color-focus);
+  }
+
+  &.ant-slider-vertical {
+    height: 100%;
+    width: 12px;
+    padding: 0 calc((var(#{$parameterPrefix + -height}) - #{$sliderWidth}) / 2);
+
+    .ant-slider-rail {
+      height: 100%;
+      width: $sliderWidth;
+      border-radius: calc(#{$sliderWidth} / 2);
+    }
+
+    .ant-slider-track {
+      height: 100%;
+      width: $sliderWidth;
+      border-radius: calc(#{$sliderWidth} / 2);
+    }
+
+    .ant-slider-step {
+      height: 100%;
+      width: $sliderWidth;
+      border-radius: calc(#{$sliderWidth} / 2);
+    }
+
+    .ant-slider-handle {
+      margin-top: -6px;
+      margin-left: -3px;
+    }
+
+    .ant-slider-mark {
+      left: 21px;
+    }
+  }
+}

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

@@ -0,0 +1,5 @@
+@import '../../../style/global-parameters.scss';
+
+$sliderPrefix: $prefix + -slider;
+$sliderParameterPrefix: $parameterPrefix + -slider;
+$sliderClassPrefix: $sliderPrefix;

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

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

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

@@ -0,0 +1,87 @@
+<script lang="ts">
+import { NumberHelper, StringHelper } from '@oinone/kunlun-shared';
+import { OioSpinProps, PropRecordHelper, SpinSize, StableSlotProp, StyleHelper } from '@oinone/kunlun-vue-ui-common';
+import { Spin as ASpin } from 'ant-design-vue';
+import { isNil, isString } from 'lodash-es';
+import { computed, createVNode, defineComponent, PropType, Slot } from 'vue';
+import { DEFAULT_PREFIX } from '../../theme';
+
+export default defineComponent({
+  name: 'OioSpin',
+  components: {
+    ASpin
+  },
+  inheritAttrs: false,
+  props: {
+    ...OioSpinProps,
+    size: {
+      type: [String, Number] as PropType<SpinSize | keyof typeof SpinSize | number>
+    },
+    delay: {
+      type: Number
+    },
+    tip: {
+      type: String as PropType<string> | Slot
+    }
+  },
+  slots: ['default', 'tip'],
+  setup(props) {
+    const loading = computed<boolean>(() => {
+      if (isNil(props.loading)) {
+        return true;
+      }
+      return props.loading;
+    });
+
+    const size = computed<string>(() => {
+      const size = props.size;
+      const numberSize = NumberHelper.toNumber(size);
+      if (!isNil(numberSize)) {
+        return StyleHelper.px(numberSize) || SpinSize.default;
+      }
+      if (isString(size)) {
+        return size;
+      }
+      return SpinSize.default;
+    });
+
+    const isInternalSize = computed<boolean>(() => {
+      return [SpinSize.small, SpinSize.large].includes(size.value as SpinSize);
+    });
+
+    return {
+      loading,
+      size,
+      isInternalSize
+    };
+  },
+  render() {
+    const classNames = [`${DEFAULT_PREFIX}-spin`];
+
+    if (this.isInternalSize) {
+      classNames.push(`${DEFAULT_PREFIX}-spin-${this.size}`);
+    }
+
+    let { loadingIndicator } = this;
+    if (!loadingIndicator) {
+      loadingIndicator = createVNode('span', { class: `${DEFAULT_PREFIX}-spin-loading` });
+    }
+
+    return createVNode(
+      ASpin,
+      {
+        spinning: this.loading,
+        indicator: loadingIndicator,
+        wrapperClassName: StringHelper.append([`${DEFAULT_PREFIX}-spin-wrapper`], this.wrapperClassName).join(' '),
+        delay: this.delay,
+        tip: this.tip,
+        ...PropRecordHelper.collectionBasicProps(this.$attrs, classNames)
+      },
+      {
+        ...PropRecordHelper.collectionSlots(this.$slots, ['default', 'tip']),
+        ...StableSlotProp
+      }
+    );
+  }
+});
+</script>

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

@@ -0,0 +1,48 @@
+@import './parameters.scss';
+
+$size: 1.2em;
+$smallSize: 1em;
+$largeSize: 1.6em;
+
+.#{$spinClassPrefix} {
+  background: var(--oio-spin-background);
+  &-small {
+    .#{$spinClassPrefix}-loading {
+      width: $smallSize;
+      height: $smallSize;
+    }
+  }
+
+  &-large {
+    .#{$spinClassPrefix}-loading {
+      width: $largeSize;
+      height: $largeSize;
+    }
+  }
+}
+
+.#{$spinClassPrefix}-loading {
+  width: $size;
+  height: $size;
+  border: 3px solid rgba(var(--oio-primary-color-rgb), 0.65);
+  border-bottom-color: transparent;
+  border-radius: 50%;
+  display: inline-block;
+  box-sizing: border-box;
+  animation: rotation 0.8s linear infinite;
+
+  @keyframes rotation {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+}
+
+.ant-spin-nested-loading > div > .ant-spin {
+  &.#{$spinClassPrefix} {
+    max-height: inherit;
+  }
+}

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

@@ -0,0 +1,5 @@
+@import '../../../style/global-parameters.scss';
+
+$spinPrefix: $prefix + -spin;
+$spinParameterPrefix: $parameterPrefix + -spin;
+$spinClassPrefix: $spinPrefix;

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

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