@oinone/kunlun-vue-ui-el 6.2.0

package/src/component/oio-color-picker/oio-color-picker.vue

@@ -0,0 +1,139 @@
+<script lang="ts">
+import { autoRgbaStr, CastHelper, NumberHelper, StringHelper } from '@oinone/kunlun-shared';
+import { OioColorPickerProps, PropRecordHelper } from '@oinone/kunlun-vue-ui-common';
+import { ElColorPicker, ElInput } from 'element-plus';
+import { isString } from 'lodash-es';
+import { computed, createVNode, defineComponent, ref, VNode } from 'vue';
+import { DEFAULT_PREFIX } from '../../theme';
+
+export default defineComponent({
+  name: 'OioColorPicker',
+  components: {
+    ElColorPicker,
+    ElInput
+  },
+  inheritAttrs: false,
+  props: {
+    ...OioColorPickerProps
+  },
+  emits: ['update:value', 'change'],
+  setup(props, { emit }) {
+    const lastedColors = ref<string[] | undefined>(undefined);
+
+    const lastedColorCount = computed<number>(() => {
+      let count = props.lastedColorCount;
+      if (count == null) {
+        count = 4;
+      }
+      return NumberHelper.toNumber(count)!;
+    });
+
+    function createColors() {
+      const storeColors = JSON.parse(localStorage.getItem('lastColors') || '[]') as unknown as string[];
+      lastedColors.value = storeColors || [];
+    }
+
+    function getLastColors(): string[] {
+      if (props.disabledLastedColor) {
+        return [];
+      }
+      if (!lastedColors.value) {
+        createColors();
+      }
+      return lastedColors.value || [];
+    }
+
+    function pushLastColors(val: string) {
+      if (props.disabledLastedColor) {
+        return;
+      }
+      let colors = lastedColors.value;
+      if (!colors) {
+        colors = [];
+        lastedColors.value = colors;
+      }
+      colors.push(val);
+      if (colors.length > lastedColorCount.value) {
+        colors.shift();
+      }
+      localStorage.setItem('lastColors', JSON.stringify(colors));
+    }
+
+    const predefineColors = computed(() => {
+      let result = props.predefine || [];
+      if (isString(result)) {
+        result = JSON.parse(result);
+      }
+      const rgbaRes = result.map((a) => autoRgbaStr(a));
+      const usableColors = getLastColors().map((a) => autoRgbaStr(a));
+      return [...new Set([...rgbaRes, ...usableColors])];
+    });
+
+    function handleChange(val?: string) {
+      if (val && !predefineColors.value.includes(val)) {
+        pushLastColors(val);
+      }
+      emit('change', val);
+    }
+
+    return {
+      predefineColors,
+      handleChange
+    };
+  },
+  render() {
+    const colorPickerClassList = [`${DEFAULT_PREFIX}-color-picker`];
+    if (this.readonly) {
+      colorPickerClassList.push(`${DEFAULT_PREFIX}-color-picker-readonly`);
+    }
+    const children: VNode[] = [];
+    let colorPicker: VNode = createVNode(ElColorPicker, {
+      modelValue: this.value,
+      defaultValue: this.defaultValue,
+      colorFormat: this.colorFormat,
+      disabled: this.disabled,
+      showAlpha: this.showAlpha,
+      predefine: this.predefineColors,
+      popperClass: `${DEFAULT_PREFIX}-color-picker-popper`,
+      ...PropRecordHelper.collectionBasicProps(this.$attrs, colorPickerClassList),
+      'onUpdate:modelValue': (val) => this.$emit('update:value', val),
+      onChange: this.handleChange
+    });
+    if (this.hasInput) {
+      colorPicker = createVNode(
+        'div',
+        {
+          class: [
+            `${DEFAULT_PREFIX}-color-picker-inner`,
+            this.readonly ? `${DEFAULT_PREFIX}-color-picker-inner-readonly` : ''
+          ]
+        },
+        [colorPicker]
+      );
+      const inputTemplate = {};
+      inputTemplate[this.inputPlacement] = () => [colorPicker];
+      children.push(
+        createVNode(
+          ElInput,
+          {
+            modelValue: this.value,
+            placeholder: this.inputPlaceholder,
+            readonly: this.inputReadonly || this.readonly,
+            disabled: this.disabled
+          },
+          inputTemplate
+        )
+      );
+    } else {
+      children.push(colorPicker);
+    }
+    return createVNode(
+      'div',
+      {
+        class: StringHelper.append(colorPickerClassList, CastHelper.cast(this.$attrs.class))
+      },
+      children
+    );
+  }
+});
+</script>

package/src/component/oio-color-picker/style/index.scss

@@ -0,0 +1,125 @@
+@import './parameters.scss';
+@import '../../oio-input/style/mixin/el-input.scss';
+
+.#{$colorPickerClassPrefix} {
+  .el-input__wrapper {
+    background: var(--oio-input-background);
+    padding: 0 11px;
+    &:hover {
+      border-color: var(--oio-primary-color-hover);
+      box-shadow: 0 0 0 1px var(--oio-primary-color-hover) inset;
+    }
+  }
+
+  .el-input.is-disabled .el-input__wrapper {
+    background: var(--oio-readonly-bg);
+    border-color: var(--oio-border-color);
+    box-shadow: 0 0 0 1px var(--oio-readonly-bg) inset;
+  }
+
+  .el-color-picker {
+    outline: none;
+  }
+
+  .el-color-picker .el-color-picker__empty {
+    color: var(--oio-addon-color-pick-icon-color);
+  }
+
+  .el-color-picker__color.is-alpha {
+    background-image: none;
+    border: none;
+  }
+
+  .el-input {
+    @include el-input;
+
+    width: 100%;
+
+    .el-input__inner {
+      border-color: var($parameterPrefix + -border-color);
+      height: var($parameterPrefix + -height);
+      line-height: var($inputParameterPrefix + -line-height);
+    }
+
+    .el-input-group__prepend,
+    .el-input-group__append {
+      border-color: var(--oio-addon-color-pick-border-color);
+      padding: 0;
+      background-color: transparent;
+    }
+
+    .el-input-group__prepend .#{$colorPickerClassPrefix}-inner {
+      border-top-left-radius: var($parameterPrefix + -border-radius);
+      border-bottom-left-radius: var($parameterPrefix + -border-radius);
+    }
+
+    .el-input-group__append .#{$colorPickerClassPrefix}-inner {
+      border-top-right-radius: var($parameterPrefix + -border-radius);
+      border-bottom-right-radius: var($parameterPrefix + -border-radius);
+    }
+  }
+
+  .#{$colorPickerClassPrefix}-inner {
+    height: calc(var($parameterPrefix + -height) - 2px);
+    width: calc(var($parameterPrefix + -height) - 2px);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .el-color-picker {
+      .el-color-picker__trigger {
+        border: none;
+        border-radius: 0;
+      }
+    }
+
+    &-readonly {
+      pointer-events: none;
+      background-color: var(--oio-addon-color-pick-readonly-background);
+    }
+
+    & > .is-disabled {
+      .el-color-picker__mask {
+        display: none;
+      }
+
+      .el-color-picker__trigger {
+        background-color: var(--oio-addon-color-pick-readonly-background);
+      }
+    }
+  }
+
+  &.#{$colorPickerClassPrefix}-readonly {
+    .el-input__inner[readonly] {
+      background-color: transparent;
+    }
+
+    .el-color-picker__trigger {
+      pointer-events: none;
+
+      .el-color-picker__icon {
+        display: none;
+      }
+    }
+  }
+
+  & > .el-input.is-disabled {
+    background-color: var($parameterPrefix + -disabled-bg);
+    border: 1px solid var(--oio-border-color);
+    box-sizing: border-box;
+
+    .el-input__inner {
+      border-color: var(--oio-border-color);
+      height: calc(var(--oio-height) - 2px);
+      line-height: calc(var(--oio-input-line-height) - 2px);
+      background-color: var($parameterPrefix + -disabled-bg);
+    }
+
+    .el-color-picker__trigger {
+      height: calc(var(--oio-height) - 2px);
+      line-height: calc(var(--oio-input-line-height) - 2px);
+      border-left: 1px solid var(--oio-border-color);
+      border-right: 1px solid var(--oio-border-color);
+    }
+  }
+}

package/src/component/oio-color-picker/style/parameters.scss

@@ -0,0 +1,5 @@
+@import '../../../style/global-parameters.scss';
+
+$colorPickerPrefix: $prefix + -color-picker;
+$colorPickerParameterPrefix: $parameterPrefix + -color-picker;
+$colorPickerClassPrefix: $colorPickerPrefix;

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

@@ -0,0 +1,4 @@
+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';

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

@@ -0,0 +1,38 @@
+<script lang="ts">
+import { CastHelper, DateFormatMap, 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'],
+  setup() {
+    const convertFormat = (val: string) => {
+      return DateFormatMap.get(val);
+    };
+    return {
+      convertFormat
+    };
+  },
+  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,
+      convertFormat: this.convertFormat
+    });
+  }
+});
+</script>

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

@@ -0,0 +1,78 @@
+<script lang="ts">
+import { CastHelper, DateTimePickerMode, DateUtil, defaultFormat, StringHelper } from '@oinone/kunlun-shared';
+import { OioDateTimePickerProps } from '@oinone/kunlun-vue-ui-common';
+import { ElDatePicker, ElTimePicker } from 'element-plus';
+import { Component, computed, createVNode, defineComponent } from 'vue';
+import { DEFAULT_PREFIX } from '../../theme';
+
+export default defineComponent({
+  name: 'OioDateTimePicker',
+  components: {
+    ElDatePicker,
+    ElTimePicker
+  },
+  inheritAttrs: false,
+  props: {
+    ...OioDateTimePickerProps
+  },
+  emits: ['update:value'],
+  setup(props) {
+    const getDateTimeFormat = () => {
+      return DateUtil.fetchDatetimeFormat(
+        { hasDateFormat: props.hasDateFormat, hasTimeFormat: props.hasTimeFormat },
+        props.format,
+        props.dateFormat,
+        props.timeFormat,
+        props.convertFormat,
+        props.convertDateFormat,
+        props.convertTimeFormat
+      );
+    };
+
+    const format = computed(() => {
+      return getDateTimeFormat() || defaultFormat;
+    });
+
+    const valueFormat = computed(() => {
+      return props.valueFormat || defaultFormat;
+    });
+
+    const defaultValue = computed(() => {
+      return DateUtil.toDate(props.defaultValue, valueFormat.value);
+    });
+
+    return {
+      format,
+      valueFormat,
+      defaultValue
+    };
+  },
+  render() {
+    let component: Component = ElDatePicker;
+    if (this.mode === DateTimePickerMode.time) {
+      component = ElTimePicker;
+    }
+    const datetimePickerClassList = [`${DEFAULT_PREFIX}-date-time-picker`];
+    if (this.readonly) {
+      datetimePickerClassList.push(`${DEFAULT_PREFIX}-date-time-picker-readonly`);
+    }
+    return createVNode(component, {
+      defaultValue: this.defaultValue,
+      placeholder: this.placeholder,
+      readonly: this.readonly,
+      disabled: this.disabled,
+      format: this.format,
+      valueFormat: this.valueFormat,
+      ...this.$attrs,
+      modelValue: this.value,
+      'onUpdate:model-value': (val) => {
+        this.$emit('update:value', val);
+      },
+      type: this.mode,
+      clearable: this.allowClear,
+      class: StringHelper.append(datetimePickerClassList, CastHelper.cast(this.$attrs.class)),
+      popperClass: StringHelper.append([`${DEFAULT_PREFIX}-date-time-picker-popper`], this.dropdownClassName)
+    });
+  }
+});
+</script>

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

@@ -0,0 +1,38 @@
+<script lang="ts">
+import { CastHelper, DateTimePickerMode, TimeFormatMap } 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'],
+  setup() {
+    const convertFormat = (val: string) => {
+      return TimeFormatMap.get(val);
+    };
+    return {
+      convertFormat
+    };
+  },
+  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,
+      convertFormat: this.convertFormat
+    });
+  }
+});
+</script>

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

@@ -0,0 +1,29 @@
+<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'],
+  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
+    });
+  }
+});
+</script>

package/src/component/oio-date-time-picker/style/index.scss

@@ -0,0 +1,58 @@
+@import '../../../style/mixin.scss';
+@import '../../oio-input/style/mixin/el-input.scss';
+@import './parameters.scss';
+
+.#{$dateTimePickerClassPrefix} {
+  width: 100%;
+
+  &.el-date-editor.el-input,
+  &.el-date-editor.el-input__inner {
+    @include el-input;
+    width: 100%;
+
+    .el-input__inner {
+      @include oio-appearance($inputParameterPrefix);
+
+      height: var($parameterPrefix + -height);
+      line-height: var($inputParameterPrefix + -line-height);
+      padding-right: 8px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+
+      &:hover {
+        @include oio-hover($inputParameterPrefix);
+      }
+
+      &:focus {
+        @include oio-focus($inputParameterPrefix);
+      }
+
+      &[disabled] {
+        @include oio-disabled();
+
+        &:hover {
+          @include oio-disabled(true, $inputParameterPrefix);
+        }
+
+        &:focus {
+          @include oio-disabled(true, $inputParameterPrefix);
+        }
+      }
+    }
+  }
+
+  &.#{$dateTimePickerClassPrefix}-readonly {
+    .el-input__inner {
+      @include oio-readonly();
+
+      &:hover {
+        @include oio-readonly();
+      }
+
+      &:focus {
+        @include oio-readonly();
+      }
+    }
+  }
+}

package/src/component/oio-date-time-picker/style/parameters.scss

@@ -0,0 +1,5 @@
+@import '../../../style/global-parameters.scss';
+
+$dateTimePickerPrefix: $prefix + -date-time-picker;
+$dateTimePickerParameterPrefix: $parameterPrefix + -date-time-picker;
+$dateTimePickerClassPrefix: $dateTimePickerPrefix;

package/src/component/oio-input/style/mixin/el-input.scss

@@ -0,0 +1,13 @@
+@import '../parameters';
+
+@mixin el-input {
+  --el-input-text-color: var(#{$inputParameterPrefix + -text-color});
+  --el-input-border: var(#{$inputParameterPrefix + -border-width}) var(#{$inputParameterPrefix + -border-style})
+    var(#{$inputParameterPrefix + -border-color});
+  --el-input-border-color: var(#{$inputParameterPrefix + -border-color});
+  --el-input-border-radius: var(#{$inputParameterPrefix + -border-radius});
+  --el-input-hover-border: var(#{$inputParameterPrefix + -border-style-hover});
+  --el-input-focus-border: var(#{$inputParameterPrefix + -border-style-focus});
+  font-size: var($parameterPrefix + -font-size);
+  line-height: var($inputParameterPrefix + -line-height);
+}

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

@@ -0,0 +1,9 @@
+@import '../../../style/global-parameters.scss';
+
+$elInputPrefix: el-input;
+$elInputParameterPrefix: $elParameterPrefix + -input;
+$elInputClassPrefix: $elInputPrefix;
+
+$inputPrefix: $prefix + -input;
+$inputParameterPrefix: $parameterPrefix + -input;
+$inputClassPrefix: $inputPrefix;

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

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

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

@@ -0,0 +1,81 @@
+<script lang="ts">
+import { CastHelper, StringHelper } from '@oinone/kunlun-shared';
+import { ButtonType, OioModalProps, PropRecordHelper, useModal } from '@oinone/kunlun-vue-ui-common';
+import { ElButton, ElDialog, ElLoadingDirective } from 'element-plus';
+import { createVNode, defineComponent, withDirectives } from 'vue';
+import { DEFAULT_PREFIX } from '../../theme';
+
+export default defineComponent({
+  name: 'OioModal',
+  components: {
+    ElDialog,
+    ElButton
+  },
+  inheritAttrs: false,
+  props: {
+    ...OioModalProps
+  },
+  slots: ['default', 'header', 'footer', 'icon'],
+  emits: ['update:visible'],
+  setup(props, context) {
+    return {
+      ...useModal(props, context)
+    };
+  },
+  render() {
+    const slots = PropRecordHelper.collectionSlots(this.$slots, [
+      {
+        origin: 'default',
+        isNotNull: true
+      },
+      ['header', 'title'],
+      {
+        origin: 'footer',
+        default: () => {
+          return [
+            createVNode(
+              ElButton,
+              {
+                onClick: this.cancel
+              },
+              this.cancelText
+            ),
+            createVNode(
+              ElButton,
+              {
+                type: ButtonType.primary,
+                onClick: this.enter
+              },
+              this.enterText
+            )
+          ];
+        }
+      },
+      'icon'
+    ]);
+    return withDirectives(
+      createVNode(
+        ElDialog,
+        {
+          title: this.title,
+          width: this.width,
+          draggable: this.draggable,
+          showClose: true,
+          closeOnClickModal: true,
+          closeOnPressEscape: true,
+          destroyOnClose: this.destroyOnClose,
+          ...this.$attrs,
+          class: StringHelper.append([`${DEFAULT_PREFIX}-modal`], CastHelper.cast(this.$attrs.class)),
+          modelValue: this.visible,
+          beforeClose: this.cancel
+        },
+        {
+          ...slots,
+          default: () => slots.default({ data: this.data })
+        }
+      ),
+      [[ElLoadingDirective, this.loading]]
+    );
+  }
+});
+</script>

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

@@ -0,0 +1,5 @@
+@import '../../../style/global-parameters.scss';
+
+$modalPickerPrefix: $prefix + -modal;
+$modalPickerParameterPrefix: $parameterPrefix + -modal;
+$modalPickerClassPrefix: $modalPickerPrefix;

package/src/index.ts

@@ -0,0 +1,3 @@
+import './style/index.scss';
+
+export * from './component';

package/src/shim-translate.d.ts

@@ -0,0 +1,7 @@
+export {};
+
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProperties {
+    $translate<T extends string | null | undefined = string | null | undefined>(text: T): T;
+  }
+}

package/src/shim-vue.d.ts

@@ -0,0 +1,6 @@
+declare module '*.vue' {
+  import { defineComponent } from 'vue';
+
+  const Component: ReturnType<typeof defineComponent>;
+  export default Component;
+}

package/src/style/global-parameters.scss

@@ -0,0 +1,5 @@
+$prefix: oio;
+$parameterPrefix: --oio;
+$classPrefix: $prefix;
+
+$elParameterPrefix: --el;

package/src/style/index.scss

@@ -0,0 +1,3 @@
+@import '../component/oio-color-picker/style/index.scss';
+@import '../component/oio-date-time-picker/style/index.scss';
+@import '../component/oio-modal/style/index.scss';