@oinone/kunlun-vue-ui-antd 6.2.0

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

@@ -0,0 +1,5 @@
+@import '../../../style/global-parameters.scss';
+
+$checkboxPrefix: $prefix + -checkbox;
+$checkboxParameterPrefix: $parameterPrefix + -checkbox;
+$checkboxClassPrefix: $checkboxPrefix;

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

@@ -0,0 +1,2 @@
+export { default as OioCollapse } from './oio-collapse.vue';
+export { default as OioCollapsePanel } from './oio-collapse-panel.vue';

package/src/component/oio-collapse/oio-collapse-panel.vue

@@ -0,0 +1,92 @@
+<script lang="ts">
+import {
+  getVNodeKey,
+  OioCollapsePanelProps,
+  PropRecordHelper,
+  useInjectOioCollapseContext,
+  useOioFormLayoutContext
+} from '@oinone/kunlun-vue-ui-common';
+import { CollapsePanel as ACollapsePanel } from 'ant-design-vue';
+import { isNil } from 'lodash-es';
+import { computed, createVNode, defineComponent, onBeforeMount, vShow, withDirectives } from 'vue';
+import { DEFAULT_PREFIX } from '../../theme';
+
+export default defineComponent({
+  name: 'OioCollapsePanel',
+  components: {
+    ACollapsePanel
+  },
+  inheritAttrs: false,
+  props: {
+    ...OioCollapsePanelProps
+  },
+  slots: ['default', 'header', 'extra'],
+  setup(props) {
+    useOioFormLayoutContext(props);
+
+    const key = getVNodeKey();
+
+    const collapseContext = useInjectOioCollapseContext();
+
+    const showArrow = computed(() => {
+      const showAllow = props.showArrow;
+      if (isNil(showAllow)) {
+        return collapseContext.showArrow.value;
+      }
+      return showArrow;
+    });
+
+    const collapsible = computed(() => {
+      if (props.disabled) {
+        return 'disabled';
+      }
+      const collapsible = props.collapseMethod;
+      if (isNil(collapsible)) {
+        return collapseContext.collapsible.value;
+      }
+      return collapsible;
+    });
+
+    onBeforeMount(() => {
+      if (!key) {
+        return;
+      }
+      collapseContext.reportPanelKey(key);
+    });
+
+    return {
+      showArrow,
+      collapsible
+    };
+  },
+  render() {
+    const slots = PropRecordHelper.collectionSlots(this.$slots, [
+      {
+        origin: 'default',
+        isNotNull: true
+      },
+      'header',
+      'extra'
+    ]);
+    return withDirectives(
+      createVNode(
+        ACollapsePanel,
+        {
+          ...PropRecordHelper.collectionBasicProps(this.$attrs, [`${DEFAULT_PREFIX}-collapse-panel`]),
+          ...(this.componentData || {}),
+          ...this.$attrs,
+          forceRender: this.forceRender,
+          header: this.header,
+          collapsible: this.collapsible,
+          showArrow: this.showArrow
+        },
+        {
+          ...slots,
+          default: () => slots.default()
+        }
+      ),
+      [[vShow, !this.invisible]]
+    );
+  }
+});
+</script>

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

@@ -0,0 +1,138 @@
+<script lang="ts">
+import {
+  OioCollapseExpandIconPosition,
+  OioCollapseInstance,
+  OioCollapseMethod,
+  OioCollapseProps,
+  OioCollapseType,
+  PropRecordHelper,
+  useOioFormLayoutContext,
+  useProviderOioCollapseContext
+} from '@oinone/kunlun-vue-ui-common';
+import { Collapse as ACollapse } from 'ant-design-vue';
+import { computed, createVNode, defineComponent, ref, vShow, withDirectives } from 'vue';
+import { DEFAULT_PREFIX } from '../../theme';
+
+export default defineComponent({
+  name: 'OioCollapse',
+  components: {
+    ACollapse
+  },
+  inheritAttrs: false,
+  props: {
+    ...OioCollapseProps
+  },
+  slots: ['default'],
+  emits: ['update:active-key'],
+  setup(props, context) {
+    useOioFormLayoutContext(props);
+
+    const bordered = computed(() => {
+      return props.type === OioCollapseType.bordered || props.type === OioCollapseType.stripe;
+    });
+
+    const ghost = computed(() => {
+      return props.type === OioCollapseType.ghost;
+    });
+
+    const showArrow = computed(() => {
+      return props.expandIconPosition !== OioCollapseExpandIconPosition.hidden;
+    });
+
+    const expandIconPosition = computed(() => {
+      if (props.expandIconPosition === OioCollapseExpandIconPosition.hidden) {
+        return undefined;
+      }
+      return props.expandIconPosition;
+    });
+
+    const collapsible = computed(() => {
+      if (props.disabled) {
+        return 'disabled';
+      }
+      const collapseMethod = props.collapseMethod || OioCollapseMethod.default;
+      switch (collapseMethod) {
+        case OioCollapseMethod.default:
+          return undefined;
+        case OioCollapseMethod.icon:
+          return 'icon';
+        case OioCollapseMethod.header:
+          return 'header';
+      }
+      return undefined;
+    });
+
+    const allPanelKeys = ref<string[]>([]);
+
+    const reportPanelKey = (key: string) => {
+      if (!allPanelKeys.value.some((v) => v === key)) {
+        allPanelKeys.value.push(key);
+      }
+    };
+
+    useProviderOioCollapseContext({
+      keys: computed(() => allPanelKeys.value),
+      showArrow,
+      collapsible,
+      reportPanelKey
+    });
+
+    const instance: OioCollapseInstance = {
+      getPanelKeys(): string[] {
+        return [...allPanelKeys.value];
+      }
+    };
+
+    context.expose(instance);
+
+    return {
+      bordered,
+      ghost,
+      collapsible,
+      expandIconPosition
+    };
+  },
+  render() {
+    const {
+      componentData,
+      invisible,
+      type,
+      activeKey,
+      bordered,
+      ghost,
+      accordion,
+      collapsible,
+      expandIconPosition,
+      destroyInactivePanel
+    } = this;
+    const classNames = [`${DEFAULT_PREFIX}-collapse`];
+    if (type) {
+      classNames.push(`${DEFAULT_PREFIX}-collapse-${type}`);
+    }
+    return withDirectives(
+      createVNode(
+        ACollapse,
+        {
+          ...PropRecordHelper.collectionBasicProps(this.$attrs, classNames),
+          ...(componentData || {}),
+          activeKey,
+          bordered,
+          ghost,
+          accordion,
+          collapsible,
+          expandIconPosition,
+          destroyInactivePanel,
+          'onUpdate:activeKey': (val) => this.$emit('update:active-key', val)
+        },
+        PropRecordHelper.collectionSlots(this.$slots, [
+          {
+            origin: 'default',
+            isNotNull: true
+          }
+        ])
+      ),
+      [[vShow, !invisible]]
+    );
+  }
+});
+</script>

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

@@ -0,0 +1,59 @@
+@import './parameters.scss';
+@import '../../../style/mixin.scss';
+
+.#{$collapseClassPrefix} {
+  &.ant-collapse {
+    @include oio-appearance();
+    border-bottom: 0;
+
+    & > .ant-collapse-item {
+      border-color: var(--oio-border-color);
+    }
+
+    .ant-collapse-header {
+      color: var(--oio-text-color);
+      align-items: center;
+    }
+
+    .ant-collapse-content {
+      background-color: var(--oio-background);
+      border-color: var(--oio-border-color);
+      color: var(--oio-text-color);
+    }
+
+    & > .ant-collapse-item:last-child,
+    & > .ant-collapse-item:last-child > .ant-collapse-header,
+    & > .ant-collapse-item:last-child > .ant-collapse-content {
+      border-radius: 0 0 var(--oio-border-radius) var(--oio-border-radius);
+    }
+  }
+
+  &.ant-collapse-borderless {
+    border: 0;
+    box-shadow: none;
+
+    & > .ant-collapse-item > .ant-collapse-content {
+      background-color: transparent;
+      border-top: 0;
+    }
+  }
+
+  &.ant-collapse-ghost {
+    background-color: transparent;
+    border: 0;
+
+    & > .ant-collapse-item > .ant-collapse-content {
+      background-color: transparent;
+      border-top: 0;
+    }
+  }
+
+  &.#{$collapseClassPrefix}-stripe.ant-collapse {
+    background-color: #fafafa;
+  }
+
+  .ant-collapse-item-disabled > .ant-collapse-header,
+  .ant-collapse-item-disabled > .ant-collapse-header > .arrow {
+    color: var(--oio-disabled-color);
+  }
+}

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

@@ -0,0 +1,5 @@
+@import '../../../style/global-parameters.scss';
+
+$collapsePrefix: $prefix + -collapse;
+$collapseParameterPrefix: $parameterPrefix + -collapse;
+$collapseClassPrefix: $collapsePrefix;

package/src/component/oio-date-time-picker/index.ts

@@ -0,0 +1,5 @@
+export { default as OioDateTimePicker } from './oio-date-time-picker.vue';
+export { default as OioDatePicker } from './oio-date-picker.vue';
+export { default as OioTimePicker } from './oio-time-picker.vue';
+export { default as OioYearPicker } from './oio-year-picker.vue';
+export { fetchDatetimePickerPlaceholder } from './use-date-time-picker-props';

package/src/component/oio-date-time-picker/oio-date-picker.vue

@@ -0,0 +1,34 @@
+<script lang="ts">
+import { CastHelper, DateTimePickerMode } from '@oinone/kunlun-shared';
+import { OioDatePickerProps, PropRecordHelper } from '@oinone/kunlun-vue-ui-common';
+import { createVNode, defineComponent } from 'vue';
+import OioDateTimePicker from './oio-date-time-picker.vue';
+
+export default defineComponent({
+  name: 'OioDatePicker',
+  components: {
+    OioDateTimePicker
+  },
+  props: {
+    ...OioDatePickerProps
+  },
+  emits: ['update:value'],
+  slots: ['dateRender', 'renderExtraFooter'],
+  render() {
+    return createVNode(
+      OioDateTimePicker,
+      {
+        ...PropRecordHelper.convert(OioDatePickerProps, CastHelper.cast(this)),
+        ...this.$attrs,
+        'onUpdate:value': (val) => {
+          this.$emit('update:value', val);
+        },
+        mode: DateTimePickerMode.date,
+        hasDateFormat: true,
+        hasTimeFormat: false
+      },
+      PropRecordHelper.collectionSlots(this.$slots, ['dateRender', 'renderExtraFooter'])
+    );
+  }
+});
+</script>

package/src/component/oio-date-time-picker/oio-date-time-picker.vue

@@ -0,0 +1,91 @@
+<script lang="ts">
+import { CSSStyle, DateTimePickerMode, StringHelper } from '@oinone/kunlun-shared';
+import { OioDateTimePickerProps, PropRecordHelper } from '@oinone/kunlun-vue-ui-common';
+import { DatePicker as ADatePicker, TimePicker as ATimePicker } from 'ant-design-vue';
+import { isNil } from 'lodash-es';
+import { Component, createVNode, defineComponent, VNodeProps } from 'vue';
+import { DEFAULT_PREFIX } from '../../theme';
+import { fetchDatetimePickerPlaceholder, useDateTimePickerProps } from './use-date-time-picker-props';
+
+export default defineComponent({
+  name: 'OioDateTimePicker',
+  components: {
+    ADatePicker,
+    ATimePicker
+  },
+  inheritAttrs: false,
+  props: {
+    ...OioDateTimePickerProps
+  },
+  emits: ['update:value'],
+  slots: ['dateRender', 'renderExtraFooter'],
+  setup(props, context) {
+    return {
+      ...useDateTimePickerProps(props, context)
+    };
+  },
+  render() {
+    const datetimePickerClassList = [`${DEFAULT_PREFIX}-date-time-picker`];
+    if (this.readonly) {
+      datetimePickerClassList.push(`${DEFAULT_PREFIX}-date-time-picker-readonly`);
+    }
+    const componentProps: Record<string, unknown> & VNodeProps = {
+      defaultValue: this.defaultValue,
+      readonly: this.readonly,
+      inputReadOnly: this.readonly,
+      disabled: this.disabled,
+      format: this.$translate(this.format),
+      valueFormat: this.valueFormat,
+      value: this.value,
+      allowClear: this.allowClear,
+      locale: this.locale,
+      showTime: this.showTime,
+      showToday: this.showToday,
+      disabledDate: this.disabledDate,
+      disabledTime: this.disabledTime,
+      showOk: false,
+      ...PropRecordHelper.collectionBasicProps(this.$attrs, datetimePickerClassList, { minWidth: 'unset' } as CSSStyle),
+      'onUpdate:value': (val) => {
+        this.emitValue(val);
+      },
+      open: this.changeOpenValue && !isNil(this.open) ? this.open : this.panelVisible,
+      changeOpenValue: this.changeOpenValue,
+      onPanelChange: this.panelChange,
+      onOpenChange: this.panelVisibleChange,
+      getPopupContainer: this.getTriggerContainer
+    };
+    if (this.placeholder === undefined) {
+      componentProps.placeholder = this.$translate(fetchDatetimePickerPlaceholder(this.mode));
+    } else {
+      componentProps.placeholder = this.placeholder;
+    }
+    const dropdownClassName = StringHelper.append(
+      [`${DEFAULT_PREFIX}-date-time-picker-popper`],
+      this.dropdownClassName
+    ).join(' ');
+    let component: Component = ADatePicker;
+    if (this.mode === DateTimePickerMode.time) {
+      component = ATimePicker;
+      componentProps.popupClassName = dropdownClassName;
+    } else {
+      componentProps.dropdownClassName = dropdownClassName;
+    }
+    if ([DateTimePickerMode.year, DateTimePickerMode.month, DateTimePickerMode.week].includes(this.mode)) {
+      componentProps.picker = this.mode;
+    } else if (this.dynamicMode) {
+      if (this.dynamicMode === DateTimePickerMode.month) {
+        componentProps.picker = this.dynamicMode;
+      } else if (this.dynamicMode !== DateTimePickerMode.date) {
+        // antd的mode的默认值是date，但是我们不能配置为date，配置为date就会不能选择 年和月 的九宫格面板
+        componentProps.mode = this.dynamicMode;
+      }
+    }
+
+    return createVNode(
+      component,
+      componentProps,
+      PropRecordHelper.collectionSlots(this.$slots, ['dateRender', 'renderExtraFooter'])
+    );
+  }
+});
+</script>

package/src/component/oio-date-time-picker/oio-time-picker.vue

@@ -0,0 +1,34 @@
+<script lang="ts">
+import { CastHelper, DateTimePickerMode } from '@oinone/kunlun-shared';
+import { OioTimePickerProps, PropRecordHelper } from '@oinone/kunlun-vue-ui-common';
+import { createVNode, defineComponent } from 'vue';
+import OioDateTimePicker from './oio-date-time-picker.vue';
+
+export default defineComponent({
+  name: 'OioTimePicker',
+  components: {
+    OioDateTimePicker
+  },
+  props: {
+    ...OioTimePickerProps
+  },
+  emits: ['update:value'],
+  slots: ['renderExtraFooter'],
+  render() {
+    return createVNode(
+      OioDateTimePicker,
+      {
+        ...PropRecordHelper.convert(OioTimePickerProps, CastHelper.cast(this)),
+        ...this.$attrs,
+        'onUpdate:value': (val) => {
+          this.$emit('update:value', val);
+        },
+        mode: DateTimePickerMode.time,
+        hasDateFormat: false,
+        hasTimeFormat: true
+      },
+      PropRecordHelper.collectionSlots(this.$slots, ['renderExtraFooter'])
+    );
+  }
+});
+</script>

package/src/component/oio-date-time-picker/oio-year-picker.vue

@@ -0,0 +1,34 @@
+<script lang="ts">
+import { CastHelper, DateTimePickerMode } from '@oinone/kunlun-shared';
+import { OioYearPickerProps, PropRecordHelper } from '@oinone/kunlun-vue-ui-common';
+import { createVNode, defineComponent } from 'vue';
+import OioDateTimePicker from './oio-date-time-picker.vue';
+
+export default defineComponent({
+  name: 'OioYearPicker',
+  components: {
+    OioDateTimePicker
+  },
+  props: {
+    ...OioYearPickerProps
+  },
+  emits: ['update:value'],
+  slots: ['renderExtraFooter'],
+  render() {
+    return createVNode(
+      OioDateTimePicker,
+      {
+        ...PropRecordHelper.convert(OioYearPickerProps, CastHelper.cast(this)),
+        ...this.$attrs,
+        'onUpdate:value': (val) => {
+          this.$emit('update:value', val);
+        },
+        mode: DateTimePickerMode.year,
+        hasDateFormat: false,
+        hasTimeFormat: false
+      },
+      PropRecordHelper.collectionSlots(this.$slots, ['renderExtraFooter'])
+    );
+  }
+});
+</script>