@oinone/kunlun-vue-ui-antd 6.2.0

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

@@ -0,0 +1,103 @@
+@import '../../../style/mixin.scss';
+@import './parameters.scss';
+@import './mixin.scss';
+
+&.ant-input {
+  @include input-style();
+}
+
+&.ant-input-affix-wrapper {
+  @include oio-appearance($inputParameterPrefix);
+
+  height: var($parameterPrefix + -height);
+  line-height: var($inputParameterPrefix + -line-height);
+  font-size: var($parameterPrefix + -font-size);
+  align-items: center;
+
+  input.ant-input {
+    height: calc(var(#{$parameterPrefix + -height}) - 8px);
+    line-height: var($inputParameterPrefix + -line-height);
+    overflow: hidden;
+    text-overflow: clip;
+    white-space: nowrap;
+    background: var($inputParameterPrefix + -background);
+    caret-color: var(--oio-input-text-color);
+    &.ant-input-disabled {
+      background: var(--oio-disabled-bg);
+    }
+  }
+
+  &:hover {
+    @include oio-hover($inputParameterPrefix);
+  }
+
+  &:focus {
+    @include oio-focus($inputParameterPrefix);
+  }
+
+  &.ant-input-affix-wrapper-disabled {
+    @include oio-disabled();
+
+    input.ant-input {
+      background: var(--oio-disabled-bg);
+      color: var($parameterPrefix + -disabled-color);
+    }
+
+    &:hover {
+      @include oio-disabled(true, $inputParameterPrefix);
+    }
+
+    &:focus {
+      @include oio-disabled(true, $inputParameterPrefix);
+    }
+  }
+}
+
+&.ant-input-group-wrapper {
+  .ant-input-group {
+    .ant-input-group-addon {
+      border: var($inputParameterPrefix + -border-width) var($inputParameterPrefix + -border-style)
+        var($inputParameterPrefix + -border-color);
+      border-radius: var($inputParameterPrefix + -border-radius);
+      background: var($inputParameterPrefix + -addon-background);
+
+      &:first-child {
+        border-right: none;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+
+      &:last-child {
+        border-left: none;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+    }
+
+    & > input.ant-input {
+      @include input-style();
+
+      &:first-child {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+
+      &:last-child {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+
+      &:not(:first-child):not(:last-child) {
+        border-radius: 0;
+      }
+    }
+  }
+}
+
+&.ant-input-affix-wrapper-focused {
+  @include oio-focus($inputParameterPrefix);
+}
+
+&.ant-input-affix-wrapper-disabled {
+  background-color: var($parameterPrefix + -disabled-bg);
+}

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

@@ -0,0 +1,198 @@
+@import '../../../style/mixin.scss';
+@import './parameters.scss';
+@import './mixin.scss';
+
+.ant-form-item-has-error
+  :not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper,
+.ant-form-item-has-error
+  :not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper:hover,
+.ant-form-item-has-error :not(.ant-input-disabled):not(.ant-input-borderless).ant-input,
+.ant-form-item-has-error :not(.ant-input-disabled):not(.ant-input-borderless).ant-input:hover,
+.ant-form-item-has-error
+  :not(.ant-input-number-affix-wrapper-disabled):not(.ant-input-number-affix-wrapper-borderless).ant-input-number-affix-wrapper,
+.ant-form-item-has-error
+  :not(.ant-input-number-affix-wrapper-disabled):not(.ant-input-number-affix-wrapper-borderless).ant-input-number-affix-wrapper:hover {
+  background-color: var(--oio-input-background-color);
+}
+
+.#{$inputClassPrefix} {
+  @import './a-input.scss';
+
+  .ant-input-clear-icon {
+    display: none;
+  }
+
+  .anticon.ant-input-clear-icon:hover {
+    color: var(--oio-input-clear-color);
+  }
+
+  .anticon.ant-input-clear-icon-has-suffix {
+    margin: 0;
+  }
+
+  .ant-input {
+    color: var(--oio-input-text-color);
+  }
+
+  &.#{$inputClassPrefix}-allow-clear {
+    &:hover {
+      & > .ant-input-suffix > .ant-input-clear-icon {
+        display: inline-block;
+      }
+    }
+  }
+
+  &.#{$inputClassPrefix}-readonly {
+    background-color: var($parameterPrefix + -readonly-bg);
+
+    &:hover {
+      @include oio-readonly(true, $inputParameterPrefix);
+    }
+
+    &:focus {
+      @include oio-readonly(true, $inputParameterPrefix);
+    }
+
+    input.ant-input {
+      @include oio-readonly();
+    }
+
+    &.ant-input-affix-wrapper-focused {
+      @include oio-readonly(true, $inputParameterPrefix);
+    }
+  }
+}
+
+.#{$inputClassPrefix}-wrapper {
+  &.#{$inputClassPrefix}-show-count[data-count] {
+    position: relative;
+
+    &:after {
+      @include counter();
+      bottom: 9px;
+      right: 4px;
+    }
+
+    &.#{$inputClassPrefix}-allow-clear {
+      &:hover {
+        &:after {
+          display: none;
+        }
+      }
+    }
+  }
+}
+
+.#{$inputNumberClassPrefix} {
+  &.ant-input-affix-wrapper:not(.#{$inputNumberClassPrefix}-not-handler) {
+    padding-right: 0;
+
+    .ant-input-suffix {
+      margin-left: 0;
+    }
+  }
+
+  .ant-input-affix-wrapper {
+    border-radius: var($inputParameterPrefix + -border-radius);
+  }
+
+  &.#{$inputClassPrefix}-readonly {
+    &.ant-input-group-wrapper {
+      background-color: transparent;
+
+      .ant-input-group {
+        .ant-input-affix-wrapper {
+          @include oio-readonly();
+
+          .ant-input {
+            @include oio-readonly();
+          }
+        }
+
+        .ant-input-group-addon {
+          background-color: transparent;
+        }
+      }
+    }
+  }
+
+  &.ant-input-group-wrapper {
+    .ant-input-group {
+      .ant-input-group-addon {
+        border: none;
+        background-color: transparent;
+      }
+
+      & > input.ant-input,
+      & > .ant-input-affix-wrapper {
+        &:first-child {
+          border-top-right-radius: var($inputParameterPrefix + -border-radius);
+          border-bottom-right-radius: var($inputParameterPrefix + -border-radius);
+        }
+      }
+    }
+
+    .ant-input-affix-wrapper:not(.#{$inputNumberClassPrefix}-not-handler) {
+      padding: 0 0 0 11px;
+
+      .ant-input-suffix {
+        margin-left: 0;
+      }
+    }
+  }
+
+  &:hover {
+    .oio-handler-wrapper {
+      span {
+        opacity: 1;
+        transition: opacity 0.3s ease-in-out;
+      }
+    }
+  }
+
+  .oio-handler-wrapper {
+    height: calc(var(#{$parameterPrefix + -height}) - 2px);
+    width: 20px;
+    display: flex;
+    flex-direction: column;
+
+    span {
+      height: 50%;
+      font-size: 7px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-left: var($inputParameterPrefix + -border-width) var($inputParameterPrefix + -border-style)
+        var($inputParameterPrefix + -border-color);
+      cursor: pointer;
+      opacity: 0;
+
+      &:first-child {
+        border-top-right-radius: var($inputParameterPrefix + -border-radius);
+      }
+
+      &:last-child {
+        border-top: var($inputParameterPrefix + -border-width) var($inputParameterPrefix + -border-style)
+          var($inputParameterPrefix + -border-color);
+        border-bottom-right-radius: var($inputParameterPrefix + -border-radius);
+      }
+
+      &:hover {
+        color: var($parameterPrefix + -primary-color-hover);
+
+        svg {
+          color: var($parameterPrefix + -primary-color-hover);
+        }
+
+        &:first-child,
+        &:last-child {
+          height: calc(50% + 6px);
+        }
+      }
+    }
+  }
+}
+
+@import './oio-input-group.scss';
+@import './oio-input-number.scss';
+@import './oio-input-search.scss';

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

@@ -0,0 +1,50 @@
+@import '../../../style/mixin.scss';
+@import './parameters.scss';
+
+@mixin input-style() {
+  @include oio-appearance($inputParameterPrefix);
+
+  height: var($parameterPrefix + -height);
+  line-height: var($inputParameterPrefix + -line-height);
+  font-size: var(--oio-font-size);
+
+  &:hover {
+    @include oio-hover($inputParameterPrefix);
+  }
+
+  &:focus {
+    @include oio-focus($inputParameterPrefix);
+  }
+
+  &[readonly] {
+    @include oio-readonly();
+
+    &:hover {
+      @include oio-readonly(true, $inputParameterPrefix);
+    }
+
+    &:focus {
+      @include oio-readonly(true, $inputParameterPrefix);
+    }
+  }
+
+  &[disabled] {
+    @include oio-disabled();
+
+    &:hover {
+      @include oio-disabled(true, $inputParameterPrefix);
+    }
+
+    &:focus {
+      @include oio-disabled(true, $inputParameterPrefix);
+    }
+  }
+}
+
+@mixin counter() {
+  display: block;
+  position: absolute;
+  color: var($inputParameterPrefix + -counter-color);
+  font-size: var($inputParameterPrefix + -counter-font-size);
+  content: attr(data-count) '/' attr(data-total);
+}

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

@@ -0,0 +1,31 @@
+@import './parameters.scss';
+
+.#{$inputGroupClassPrefix} {
+  &.ant-input-group.ant-input-group-compact {
+    display: flex;
+
+    & > * {
+      border-radius: 0;
+    }
+
+    & > .ant-cascader-picker:first-child .ant-input,
+    & > .ant-select-auto-complete:first-child .ant-input,
+    & > .oio-select:first-child > .ant-select-selector,
+    & > :first-child {
+      border-top-left-radius: var(--oio-border-radius);
+      border-bottom-left-radius: var(--oio-border-radius);
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    & > .ant-cascader-picker-focused:last-child .ant-input,
+    & > .ant-cascader-picker:last-child .ant-input,
+    & > .oio-select:last-child > .ant-select-selector,
+    & > :last-child {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      border-top-right-radius: var(--oio-border-radius);
+      border-bottom-right-radius: var(--oio-border-radius);
+    }
+  }
+}

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

@@ -0,0 +1,13 @@
+@import '../../../style/mixin.scss';
+@import './parameters.scss';
+@import './mixin.scss';
+
+.ant-input-number.#{$inputNumberClassPrefix} {
+  @include input-style();
+
+  width: 100%;
+
+  & > .ant-input-number-input-wrap > .ant-input-number-input {
+    height: calc(var(#{$parameterPrefix + -height}) - 2px);
+  }
+}

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

@@ -0,0 +1,94 @@
+@import '../../../style/mixin.scss';
+@import './parameters.scss';
+@import './mixin.scss';
+
+.#{$inputSearchClassPrefix} {
+  height: var($parameterPrefix + -height);
+  line-height: var($inputParameterPrefix + -line-height);
+  font-size: var($parameterPrefix + -font-size);
+
+  border-radius: var($inputParameterPrefix + -border-radius);
+  background: var(--oio-input-background);
+
+  &.#{$inputSearchClassPrefix}-normal {
+    border: var($inputParameterPrefix + -border-width) var($inputParameterPrefix + -border-style)
+      var($inputParameterPrefix + -border-color);
+  }
+
+  .ant-input-group > .ant-input-group-addon:last-child {
+    left: 0;
+  }
+
+  & > .ant-input-group {
+    height: 100%;
+    .ant-input {
+      height: 100%;
+    }
+    .ant-input-affix-wrapper {
+      height: calc(var(#{$parameterPrefix} + -height) - var(#{$inputParameterPrefix} + -border-width) * 2);
+      border: none;
+      border-radius: var($inputParameterPrefix + -border-radius);
+      background: var(--oio-input-background);
+
+      input {
+        color: var(--oio-text-color);
+        caret-color: var(--oio-input-text-color);
+        background-color: var(--oio-input-background);
+
+        &::placeholder,
+        &::-webkit-input-placeholder {
+          color: var(--oio-placeholder-color);
+        }
+      }
+
+      &:not(:last-child) {
+        border-bottom-left-radius: var($inputParameterPrefix + -border-radius);
+        border-top-left-radius: var($inputParameterPrefix + -border-radius);
+      }
+
+      &:not(.ant-input-affix-wrapper-disabled):hover {
+        z-index: unset;
+      }
+    }
+
+    .ant-input-affix-wrapper-focused,
+    .ant-input-affix-wrapper:focus {
+      box-shadow: none;
+      z-index: unset;
+    }
+
+    .ant-input-group-addon {
+      background-color: transparent;
+
+      .ant-btn {
+        background: none;
+
+        .anticon-search,
+        .oio-icon {
+          color: var(--oio-icon-color);
+        }
+      }
+    }
+
+    & > .ant-input-group-addon:last-child {
+      .ant-input-search-button {
+        border-radius: 0 var(--oio-border-radius) var(--oio-border-radius) 0;
+
+        &:not(.ant-btn-primary) {
+          color: rgba(0, 0, 0, 0.25);
+        }
+
+        &.ant-btn-primary {
+          background-color: var(--oio-primary-color);
+          border-color: var(--oio-primary-color);
+          height: 100%;
+        }
+      }
+    }
+
+    .ant-input-search-button {
+      border: none;
+      height: 100%;
+    }
+  }
+}

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

@@ -0,0 +1,21 @@
+@import '../../../style/global-parameters';
+
+$inputPrefix: $prefix + -input;
+$inputParameterPrefix: $parameterPrefix + -input;
+$inputClassPrefix: $inputPrefix;
+
+$inputSearchPrefix: $inputPrefix + -search;
+$inputSearchParameterPrefix: $inputParameterPrefix + -search;
+$inputSearchClassPrefix: $inputSearchPrefix;
+
+$inputNumberPrefix: $inputPrefix + -number;
+$inputNumberParameterPrefix: $inputParameterPrefix + -number;
+$inputNumberClassPrefix: $inputNumberPrefix;
+
+$inputPasswordPrefix: $inputPrefix + -password;
+$inputPasswordParameterPrefix: $inputParameterPrefix + -password;
+$inputPasswordClassPrefix: $inputPasswordPrefix;
+
+$inputGroupPrefix: $inputPrefix + -group;
+$inputGroupParameterPrefix: $inputParameterPrefix + -group;
+$inputGroupClassPrefix: $inputGroupPrefix;

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

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

package/src/component/oio-modal/index.zh-CN.md

@@ -0,0 +1,167 @@
+---
+
+```
+category: Components
+type: 反馈
+title: OioModal
+subtitle: 对话框
+cover: https://gw.alipayobjects.com/zos/alicdn/3StSdUlSH/Modal.svg
+```
+
+---
+
+模态对话框。
+
+## 何时使用
+
+需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用 `OioModal` 在当前页面正中打开一个浮层，承载相应的操作。
+
+另外当需要一个简洁的确认框询问用户时，可以使用 `OioModal.confirm()` 等语法糖方法。
+
+## API
+
+### 属性
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| visible(v-model) | 对话框是否可见 | Boolean | 无 |  |
+| confirmLoading | 确定按钮 loading | boolean | 无 |  |
+| afterClose | Modal 完全关闭后的回调 | function | 无 |  |
+| bodyStyle | Modal body 样式 | object | {} |  |
+| cancelText | 取消按钮文字 | string | slot | 取消 |  |
+| centered | 垂直居中展示 Modal | Boolean | `false` |  |
+| closable | 是否显示右上角的关闭按钮 | boolean | true |  |
+| closeIcon | 自定义关闭图标 | VNode \| slot | - |  |
+| destroyOnClose | 关闭时销毁 Modal 里的子元素 | boolean | false |  |
+| footer | 底部内容，当不需要默认底部按钮时，可以设为 `:footer="null"` | string\|slot | 确定取消按钮 |  |
+| forceRender | 强制渲染 Modal | boolean | false |  |
+| getContainer | 指定 Modal 挂载的 HTML 节点 | (instance): HTMLElement | () => document.body |  |
+| keyboard | 是否支持键盘 esc 关闭 | boolean | true |  |
+| mask | 是否展示遮罩 | Boolean | true |  |
+| maskClosable | 点击蒙层是否允许关闭 | boolean | true |  |
+| maskStyle | 遮罩样式 | object | {} |  |
+| okText | 确认按钮文字 | string\|slot | 确定 |  |
+| okType | 确认按钮类型 | string | primary |  |
+| okButtonProps | ok 按钮 props | [ButtonProps](/components/button/#API) | - |  |
+| cancelButtonProps | cancel 按钮 props | [ButtonProps](/components/button/#API) | - |  |
+| title | 标题 | string\|slot | 无 |  |
+| width | 宽度 | string\|number | 520 |  |
+| wrapClassName | 对话框外层容器的类名 | string | - |  |
+| zIndex | 设置 Modal 的 `z-index` | Number | 1000 |  |
+| dialogStyle | 可用于设置浮层的样式，调整浮层位置等 | object | - |  |
+| dialogClass | 可用于设置浮层的类名 | string | - |  |
+
+### 回调
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| confirmLoading | 确定按钮 loading | boolean | 无 |  |
+| afterClose | Modal 完全关闭后的回调 | function | 无 |  |
+| bodyStyle | Modal body 样式 | object | {} |  |
+| cancelText | 取消按钮文字 | string\| slot | 取消 |  |
+| centered | 垂直居中展示 Modal | Boolean | `false` |  |
+| closable | 是否显示右上角的关闭按钮 | boolean | true |  |
+| closeIcon | 自定义关闭图标 | VNode \| slot | - |  |
+| destroyOnClose | 关闭时销毁 Modal 里的子元素 | boolean | false |  |
+| footer | 底部内容，当不需要默认底部按钮时，可以设为 `:footer="null"` | string\|slot | 确定取消按钮 |  |
+| forceRender | 强制渲染 Modal | boolean | false |  |
+| getContainer | 指定 Modal 挂载的 HTML 节点 | (instance): HTMLElement | () => document.body |  |
+| keyboard | 是否支持键盘 esc 关闭 | boolean | true |  |
+| mask | 是否展示遮罩 | Boolean | true |  |
+| maskClosable | 点击蒙层是否允许关闭 | boolean | true |  |
+| maskStyle | 遮罩样式 | object | {} |  |
+| okText | 确认按钮文字 | string\|slot | 确定 |  |
+| okType | 确认按钮类型 | string | primary |  |
+| okButtonProps | ok 按钮 props | [ButtonProps](/components/button/#API) | - |  |
+| cancelButtonProps | cancel 按钮 props | [ButtonProps](/components/button/#API) | - |  |
+| title | 标题 | string\|slot | 无 |  |
+| visible(v-model) | 对话框是否可见 | boolean | 无 |  |
+| width | 宽度 | string\|number | 520 |  |
+| wrapClassName | 对话框外层容器的类名 | string | - |  |
+| zIndex | 设置 Modal 的 `z-index` | Number | 1000 |  |
+| dialogStyle | 可用于设置浮层的样式，调整浮层位置等 | object | - |  |
+| dialogClass | 可用于设置浮层的类名 | string | - |  |
+
+#### 注意
+
+> `<Modal />` 默认关闭后状态不会自动清空, 如果希望每次打开都是新内容，请设置 `destroyOnClose`。
+
+### Modal.method()
+
+包括：
+
+- `Modal.info`
+- `Modal.success`
+- `Modal.error`
+- `Modal.warning`
+- `Modal.confirm`
+
+以上均为一个函数，参数为 object，具体属性如下：
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| autoFocusButton | 指定自动获得焦点的按钮 | null\|string: `ok` `cancel` | `ok` |  |
+| cancelText | 取消按钮文字 | string | 取消 |  |
+| centered | 垂直居中展示 Modal | Boolean | `false` |  |
+| closable | 是否显示右上角的关闭按钮 | boolean | `false` |  |
+| class | 容器类名 | string | - |  |
+| content | 内容 | string \|vNode \|function(h) | 无 |  |
+| icon | 自定义图标（1.14.0 新增） | VNode \| ()=>VNode | - |  |
+| mask | 是否展示遮罩 | Boolean | true |  |
+| maskClosable | 点击蒙层是否允许关闭 | Boolean | `false` |  |
+| keyboard | 是否支持键盘 esc 关闭 | boolean | true |  |
+| okText | 确认按钮文字 | string | 确定 |  |
+| okType | 确认按钮类型 | string | primary |  |
+| okButtonProps | ok 按钮 props | [ButtonProps](/components/button) | - |  |
+| cancelButtonProps | cancel 按钮 props | [ButtonProps](/components/button) | - |  |
+| title | 标题 | string\|vNode \|function(h) | 无 |  |
+| width | 宽度 | string\|number | 416 |  |
+| zIndex | 设置 Modal 的 `z-index` | Number | 1000 |  |
+| onCancel | 取消回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭 | function | 无 |  |
+| onOk | 点击确定回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭 | function | 无 |  |
+| appContext | 弹窗的上下文，一般用于获取全局注册组件、vuex 等内容 | - | - |  |
+
+以上函数调用后，会返回一个引用，可以通过该引用更新和关闭弹窗。
+
+```jsx
+const modal = Modal.info();
+
+modal.update({
+  title: '修改的标题',
+  content: '修改的内容',
+});
+
+modal.destroy();
+```
+
+- `Modal.destroyAll`
+
+使用 `Modal.destroyAll()` 可以销毁弹出的确认窗（即上述的 Modal.info、Modal.success、Modal.error、Modal.warning、Modal.confirm）。通常用于路由监听当中，处理路由前进、后退不能销毁确认对话框的问题，而不用各处去使用实例的返回值进行关闭（modal.destroy() 适用于主动关闭，而不是路由这样被动关闭）
+
+```jsx
+const router = new VueRouter({ ... })
+
+// router change
+router.beforeEach((to, from, next) => {
+  Modal.destroyAll();
+})
+```
+
+## FAQ
+
+### 为什么 Modal 方法不能获取 全局注册组件、context、vuex 等内容和 ConfigProvider `locale/prefixCls` 配置， 以及不能响应式更新数据 ？
+
+直接调用 Modal 方法，组件会通过 `Vue.render` 动态创建新的 Vue 实体。其 context 与当前代码所在 context 并不相同，因而无法获取 context 信息。
+
+当你需要 context 信息（例如使用全局注册的组件）时，可以通过 `appContext` 属性传递当前组件 context, 当你需要保留属性响应式时，你可以使用函数返回：
+
+```tsx
+import { getCurrentInstance } from 'vue';
+
+const appContext = getCurrentInstance().appContext;
+const title = ref('some message');
+Modal.confirm({
+  title: () => title.value, // 此时 title 的改变，会同步更新 confirm 中的 title
+  appContext,
+});
+```