@mdsfe/mds-ui 0.2.0 → 0.2.9-rc.1

package/CHANGELOG.md

@@ -1,3 +1,181 @@
+## [0.2.8](http://igit.58corp.com/matrix/mds-ui/compare/v0.2.7...v0.2.8) (2023-01-12)
+
+### Features
+
+* 🎸 重构 ShadowBorder边与阴影 部分基础实现及关联用例
+
+### Bug Fixes
+
+* 🐛 修复 Input组件 若干问题 
+  * `maxlength`属性无效的问题 
+  * `clearable`时的基础样式
+  * value变化时`autosize`属性没有随之生效的问题 
+* 🐛 修复 Select组件 若干问题
+  * 选择框初次渲染动画方向不正确的问题 
+  * 去除多余`console`
+* 🐛 修复 ShadowBorder组件 全局定义样式导致的引用覆盖问题
+* 🐛 修复 Cascader级联组件 多选无法删除的问题
+
+### Performance Improvements
+* ⚡️ 更改`text-decoration-skip-ink`全局赋值
+* ⚡️ 优化部分lint警告
+## [0.2.7](http://igit.58corp.com/matrix/mds-ui/compare/v0.2.6...v0.2.7) (2022-11-22)
+
+### Features
+
+* 🎸 增加 分页组件`pageSizesSeat`属性 
+* 🎸 扩展 Icon业务定义图标并优化用例分类
+
+### Bug Fixes
+
+* 🐛 修复icon实例引发的开发环境报错
+* 🐛 修复`cascader`初次触发表单验证
+* 🐛 修复更改`pagesizes`时组件内部报错的问题
+* 🐛 修复`divider`路径引用异常
+
+## [0.2.6](http://igit.58corp.com/matrix/mds-ui/compare/v0.2.5...v0.2.6) (2022-09-26)
+
+### Features
+
+* 🎸 扩展 Modal弹窗 添加`disabled-scroll`属性,用于控制显现时body是否可滚动 
+* 🎸 扩展 Drawer抽屉 添加`pre-focus`属性控制是否恢复打开抽屉前元素的焦点
+* 🎸 扩展 Loading组件 添加自定义类名
+
+* 🎸 扩展 Icon图标库
+  * 新增业务定义图标风格
+  * 新增线性图标`line-doc`
+
+### Bug Fixes
+
+* 🐛 修复upload上传组件`onBeforeUpload`属性文档 
+* 🐛 修复tabs初始化抖动的问题
+* 🐛 解决loading组件中事件无法穿透的问题 
+* 🐛 修复组件css中svg路径找不到的问题 
+
+## [0.2.5](http://igit.58corp.com/matrix/mds-ui/compare/v0.2.4...v0.2.5) (2022-05-06)
+
+### Features
+
+* 🎸 扩展 TimePicker 时间选择框
+  * 增加`mintime`和`maxtime`属性
+  * 输入框抽离出`popper`
+  * 修改默认宽度
+
+### Bug Fixes
+
+* 🐛 修复 `timepicker`空值时，`mintime`无效的问题
+* 🐛 修复 级联组件 文档中`expand-change`事件大小写的问题
+* 🐛 统一修复`popper`额外类名问题
+
+## [0.2.4](http://igit.58corp.com/matrix/mds-ui/compare/v0.2.3...v0.2.4) (2022-03-31)
+### Features
+
+* 🎸 扩展 Dropdown组件 添加`visible-change`事件
+* 🎸 扩展 Select组件 添加`inputType`属性 
+* 🎸 扩展 SlotTable 添加`resize-width`属性
+* 🎸 扩展 TimePicker组件 分钟面板增加`step`属性 
+* 🎸 扩展 Cascader级联面板组件 
+  * 树形级联组件新增搜索功能 
+  * `tree`模式添加`disabled`属性 
+
+### Bug Fixes
+
+* 🐛 解决 Drawer组件 在v-if控制下`append-to-body`属性不生效的问题
+* 🐛 修复 Dropdown组件 `trigger`为click时，`visiblechange`事件无效的问题
+* 🐛 修复 checkbox组件 偶现对勾错位的问题
+* 🐛 修复 select组件 `type`参数赋值异常
+* 🐛 修复 pagination分页器显示错误的问题
+* 🐛 修复 select组件 多选模式下`option`超长时覆盖勾选图标的问题
+* 🐛 修复 多选状态叶子节点不展开面板的问题
+* 🐛 修复 upload组件 非图片类型文件可预览的问题
+* 🐛 修复 message组件 英文超长的问题
+* 🐛 修复 upload组件 超限后`change`事件无效的问题 
+* 🐛 修复 不同尺寸button的样式问题 
+* 🐛 修复 树节点相关状态校验
+* 🐛 修复 树形级联框添加tag光标没有`focus`的问题
+* 🐛 修复 级联树默认`placeholder`
+* 🐛 修复 上传组件 `upload`方法无效的问题 
+* 🐛 解决 vue版本冲突导致的报错 
+
+### Performance Improvements
+
+* ⚡️ 优化 Tree树组件 `setCheckedKeys`及`setChecked`方法，并修改其文档 
+* ⚡️ 优化 Tooltip组件  `light`模式下的样式
+* ⚡️ 优化 Select组件 多选标签的间距
+* ⚡️ 优化 Select组件 箭头交互样式
+
+## [0.2.3](http://igit.58corp.com/matrix/mds-ui/compare/v0.2.2...v0.2.3) (2022-02-26)
+
+### Features
+
+* 🎸 重构popover实例
+  *  Popover组件逻辑实现及交互用例
+  *  解决 `drawer`,`tooltip`,`popover`,`modal`,`message`对应组件层级不统一问题
+* 🎸 扩展 Progress进度条组件 属性`track-color`，自定义进度条底色
+
+### Bug Fixes
+
+* 🐛 修复 Popover气泡卡片组件 `$destroy`未找到的问题
+* 🐛 修复 Popover气泡卡片组件 箭头显示状态不更新的问题
+* 🐛 修复 Radio单选框 初次渲染触发`change`事件的问题
+* 🐛 修复 Checkbox复选框 `change`事件未抛出当前变更元素状态的问题
+* 🐛 修复 Drawer组件 `maskClosable`属性不生效的问题
+* 🐛 修复 Loading加载组件 `rotate`动画无效的问题
+* 🐛 修复 Cascader多级级联面板 超出视口的问题
+* 🐛 修复 Tooltip组件 弹出`popper`时控制台报错的问题
+* 🐛 修复 Progress进度组件 `type`为`circle`时，`strokeWidth`属性无效的问题 
+* 🐛 修复 Cascader级联组件 `v-modal`异步赋值不生效及多选时`placeholder`不生效的问题
+* 🐛 修复 Loading加载组件 `rotate`动画无效的问题
+### Performance Improvements
+
+* ⚡️ 优化 Tree树组件 `setCheckedKeys`及`setChecked`方法，并修改其文档 
+* ⚡️ 微调 Tree组件`mode`样式
+
+## [0.2.2](http://igit.58corp.com/matrix/mds-ui/compare/v0.2.1...v0.2.2) (2022-01-19)
+
+### Features
+
+* 🎸 扩展 Button按钮组件 `a-text`属性
+* 🎸 扩展 Icon图标组件 线性开发工具类`16`
+
+### Bug Fixes
+
+* 🐛 修复 Input输入框组件 `cursor`交互样式
+* 🐛 修复 Loading加载组件 `rotate`动画无效的问题
+* 🐛 修复 Form表单组件 不需校验的项未在`rules`中定义导致校验失败的问题
+
+### Performance Improvements
+
+* ⚡️ 修改 Datepicker日期选择器组件 `type`为`datetimerange`时，日期图标后置
+* ⚡️ 优化 官网增加`backtop`交互
+* ⚡️ 升级 vue版本，并修改`$attrs`报错
+* ⚡️ 优化 部分组件样式，UI走查微调
+
+## [0.2.1](http://igit.58corp.com/matrix/mds-ui/compare/v0.2.0...v0.2.1) (2021-12-20)
+
+### Features
+
+* 🎸 重构 Tooltip提示组件  
+  * 基本实现重构
+  * 修复`render`函数作用域问题导致的胜场环境无效
+  * 修复`tooltip`的闪现问题 
+* 🎸 扩展 SlotTable表格组件 
+  * 去除显示`tooltip`时的默认样式
+  * 添加`tooltipOptions`属性
+  * 自行配置`tooltip`组件`props`
+* 🎸 新增 InputNumber数字输入框 `step-strictly`属性    
+### Bug Fixes
+
+* 🐛 修复 popper目录位置不对造成的打包问题
+* 🐛 修复 部分示例代码中标签名大小写异常
+* 🐛 修复 Table组件中`tooltip`的默认选项 
+* 🐛 修复 部分已知零散问题
+
+### Performance Improvements
+
+* ⚡️ 优化 SlotTable组件样式
+* ⚡️ 优化 Input组件样式
+
 # [0.2.0](http://igit.58corp.com/matrix/mds-ui/compare/v0.1.20...v0.2.0) (2021-12-11)
 
 ### Features

package/README.md

@@ -34,7 +34,7 @@
 #### npm 安装
 > 推荐使用npm的方式安装，能更好的和`webpack`等打包工具配合使用
 ``` bash
-npm install @bic-fe/mds-ui -S
+npm install @mdsfe/mds-ui -S
 ```
 
 #### CDN 引用
@@ -42,14 +42,14 @@ npm install @bic-fe/mds-ui -S
 
 ```
 <!-- 引入样式 -->
-<link rel="stylesheet" href="https://unpkg.com/@bic-fe/mds-ui/dist/mds-ui.min.css">
+<link rel="stylesheet" href="https://unpkg.com/@mdsfe/mds-ui/dist/mds-ui.min.css">
 <!-- 引入组件库 -->
-<script src="https://unpkg.com/@bic-fe/mds-ui/dist/mds-ui.min.js"></script>
+<script src="https://unpkg.com/@mdsfe/mds-ui/dist/mds-ui.min.js"></script>
 
 ```
 `注意`：使用`CDN`引入`mds-ui`组件库需要在链接地址上锁定版本，避免组件库升级的时候带来兼容性的影响。锁定版本的方法为在连接后面增加版本号
 
-目前可以通过 [unpkg.com/mds-ui](https://unpkg.com/browse/@bic-fe/mds-ui/) 获取到最新版本的资源，支持在页面上引入Js和Css文件既可以开始使用
+目前可以通过 [unpkg.com/mds-ui](https://unpkg.com/browse/@mdsfe/mds-ui/) 获取到最新版本的资源，支持在页面上引入Js和Css文件既可以开始使用
 
 ## Quick Start
 
@@ -57,8 +57,8 @@ npm install @bic-fe/mds-ui -S
 
 ```
 import Vue from 'vue'; // 引入Vue
-import '@bic-fe/mds-ui/dist/mds-ui.min.css'; // 引入组件的样式 
-import MdsUi from '@bic-fe/mds-ui'; // 引入组件
+import '@mdsfe/mds-ui/dist/mds-ui.min.css'; // 引入组件的样式 
+import MdsUi from '@mdsfe/mds-ui'; // 引入组件
 
 Vue.use(MdsUi); // 使用组件
 
@@ -71,14 +71,14 @@ Vue.use(MdsUi); // 使用组件
 可以通过下面的写法来按需加载组件
 
 ```
-import Button from '@bic-fe/mds-ui/dist/button';
+import Button from '@mdsfe/mds-ui/dist/button';
 ```
 方法二：
 
 也可以使用 babel-plugin-import 来进行按需加载
 
 ```
-import { Button } from '@bic-fe/mds-ui';
+import { Button } from '@mdsfe/mds-ui';
 ```
 `.babelrc`修改
 
@@ -87,7 +87,7 @@ import { Button } from '@bic-fe/mds-ui';
   "plugins": [
     [
       "import", {
-        "libraryName": "@bic-fe/mds-ui",
+        "libraryName": "@mdsfe/mds-ui",
         "libraryDirectory": "dist",
         "styleLibraryDirectory": "dist/style",
         "style":true

package/dist/_mixin/popper.js

@@ -140,6 +140,7 @@ exports.default = {
         this.popperJS.update();
       } else {
         this.createPopper();
+        this.reference && this.reference.__vue__ && this.reference.__vue__.initWidth && this.reference.__vue__.initWidth();
       }
     },
     doDestroy: function doDestroy() {

package/dist/_util/_popper/dom-helper.js

@@ -0,0 +1,284 @@
+'use strict';
+
+exports.__esModule = true;
+exports.isInContainer = exports.getScrollContainer = exports.isScroll = exports.getStyle = exports.once = exports.off = exports.on = undefined;
+
+var _typeof2 = require('babel-runtime/helpers/typeof');
+
+var _typeof3 = _interopRequireDefault(_typeof2);
+
+exports.hasClass = hasClass;
+exports.addClass = addClass;
+exports.removeClass = removeClass;
+exports.setStyle = setStyle;
+exports.merge = merge;
+exports.getScrollBarWidth = getScrollBarWidth;
+
+var _vue = require('vue');
+
+var _vue2 = _interopRequireDefault(_vue);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint-disable */
+var isServer = _vue2.default.prototype.$isServer;
+var SPECIAL_CHARS_REGEXP = /([\:\-\_]+(.))/g;
+var MOZ_HACK_REGEXP = /^moz([A-Z])/;
+var ieVersion = isServer ? 0 : Number(document.documentMode);
+
+/* istanbul ignore next */
+var trim = function trim(string) {
+  return (string || '').replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, '');
+};
+/* istanbul ignore next */
+var camelCase = function camelCase(name) {
+  return name.replace(SPECIAL_CHARS_REGEXP, function (_, separator, letter, offset) {
+    return offset ? letter.toUpperCase() : letter;
+  }).replace(MOZ_HACK_REGEXP, 'Moz$1');
+};
+
+/* istanbul ignore next */
+var on = exports.on = function () {
+  if (!isServer && document.addEventListener) {
+    return function (element, event, handler) {
+      if (element && event && handler) {
+        element.addEventListener(event, handler, false);
+      }
+    };
+  } else {
+    return function (element, event, handler) {
+      if (element && event && handler) {
+        element.attachEvent('on' + event, handler);
+      }
+    };
+  }
+}();
+
+/* istanbul ignore next */
+var off = exports.off = function () {
+  if (!isServer && document.removeEventListener) {
+    return function (element, event, handler) {
+      if (element && event) {
+        element.removeEventListener(event, handler, false);
+      }
+    };
+  } else {
+    return function (element, event, handler) {
+      if (element && event) {
+        element.detachEvent('on' + event, handler);
+      }
+    };
+  }
+}();
+
+/* istanbul ignore next */
+var once = exports.once = function once(el, event, fn) {
+  var listener = function listener() {
+    if (fn) {
+      fn.apply(this, arguments);
+    }
+    off(el, event, listener);
+  };
+  on(el, event, listener);
+};
+
+/* istanbul ignore next */
+function hasClass(el, cls) {
+  if (!el || !cls) return false;
+  if (cls.indexOf(' ') !== -1) {
+    throw new Error('className should not contain space.');
+  }
+  if (el.classList) {
+    return el.classList.contains(cls);
+  } else {
+    return (' ' + el.className + ' ').indexOf(' ' + cls + ' ') > -1;
+  }
+}
+
+/* istanbul ignore next */
+function addClass(el, cls) {
+  if (!el) return;
+  var curClass = el.className;
+  var classes = (cls || '').split(' ');
+
+  for (var i = 0, j = classes.length; i < j; i++) {
+    var clsName = classes[i];
+    if (!clsName) continue;
+
+    if (el.classList) {
+      el.classList.add(clsName);
+    } else if (!hasClass(el, clsName)) {
+      curClass += ' ' + clsName;
+    }
+  }
+  if (!el.classList) {
+    el.setAttribute('class', curClass);
+  }
+}
+
+/* istanbul ignore next */
+function removeClass(el, cls) {
+  if (!el || !cls) return;
+  var classes = cls.split(' ');
+  var curClass = ' ' + el.className + ' ';
+
+  for (var i = 0, j = classes.length; i < j; i++) {
+    var clsName = classes[i];
+    if (!clsName) continue;
+
+    if (el.classList) {
+      el.classList.remove(clsName);
+    } else if (hasClass(el, clsName)) {
+      curClass = curClass.replace(' ' + clsName + ' ', ' ');
+    }
+  }
+  if (!el.classList) {
+    el.setAttribute('class', trim(curClass));
+  }
+}
+
+/* istanbul ignore next */
+var getStyle = exports.getStyle = ieVersion < 9 ? function (element, styleName) {
+  if (isServer) return;
+  if (!element || !styleName) return null;
+  styleName = camelCase(styleName);
+  if (styleName === 'float') {
+    styleName = 'styleFloat';
+  }
+  try {
+    switch (styleName) {
+      case 'opacity':
+        try {
+          return element.filters.item('alpha').opacity / 100;
+        } catch (e) {
+          return 1.0;
+        }
+      default:
+        return element.style[styleName] || element.currentStyle ? element.currentStyle[styleName] : null;
+    }
+  } catch (e) {
+    return element.style[styleName];
+  }
+} : function (element, styleName) {
+  if (isServer) return;
+  if (!element || !styleName) return null;
+  styleName = camelCase(styleName);
+  if (styleName === 'float') {
+    styleName = 'cssFloat';
+  }
+  try {
+    var computed = document.defaultView.getComputedStyle(element, '');
+    return element.style[styleName] || computed ? computed[styleName] : null;
+  } catch (e) {
+    return element.style[styleName];
+  }
+};
+
+/* istanbul ignore next */
+function setStyle(element, styleName, value) {
+  if (!element || !styleName) return;
+
+  if ((typeof styleName === 'undefined' ? 'undefined' : (0, _typeof3.default)(styleName)) === 'object') {
+    for (var prop in styleName) {
+      if (styleName.hasOwnProperty(prop)) {
+        setStyle(element, prop, styleName[prop]);
+      }
+    }
+  } else {
+    styleName = camelCase(styleName);
+    if (styleName === 'opacity' && ieVersion < 9) {
+      element.style.filter = isNaN(value) ? '' : 'alpha(opacity=' + value * 100 + ')';
+    } else {
+      element.style[styleName] = value;
+    }
+  }
+}
+
+var isScroll = exports.isScroll = function isScroll(el, vertical) {
+  if (isServer) return;
+
+  var determinedDirection = vertical !== null && vertical !== undefined;
+  var overflow = determinedDirection ? vertical ? getStyle(el, 'overflow-y') : getStyle(el, 'overflow-x') : getStyle(el, 'overflow');
+
+  return overflow.match(/(scroll|auto|overlay)/);
+};
+
+var getScrollContainer = exports.getScrollContainer = function getScrollContainer(el, vertical) {
+  if (isServer) return;
+
+  var parent = el;
+  while (parent) {
+    if ([window, document, document.documentElement].includes(parent)) {
+      return window;
+    }
+    if (isScroll(parent, vertical)) {
+      return parent;
+    }
+    parent = parent.parentNode;
+  }
+
+  return parent;
+};
+
+var isInContainer = exports.isInContainer = function isInContainer(el, container) {
+  if (isServer || !el || !container) return false;
+
+  var elRect = el.getBoundingClientRect();
+  var containerRect = void 0;
+
+  if ([window, document, document.documentElement, null, undefined].includes(container)) {
+    containerRect = {
+      top: 0,
+      right: window.innerWidth,
+      bottom: window.innerHeight,
+      left: 0
+    };
+  } else {
+    containerRect = container.getBoundingClientRect();
+  }
+
+  return elRect.top < containerRect.bottom && elRect.bottom > containerRect.top && elRect.right > containerRect.left && elRect.left < containerRect.right;
+};
+
+function merge(target) {
+  for (var i = 1, j = arguments.length; i < j; i++) {
+    var source = arguments[i] || {};
+    for (var prop in source) {
+      if (source.hasOwnProperty(prop)) {
+        var value = source[prop];
+        if (value !== undefined) {
+          target[prop] = value;
+        }
+      }
+    }
+  }
+
+  return target;
+}
+
+var scrollBarWidth = void 0;
+function getScrollBarWidth() {
+  if (_vue2.default.prototype.$isServer) return 0;
+  if (scrollBarWidth !== undefined) return scrollBarWidth;
+
+  var outer = document.createElement('div');
+  outer.className = 'el-scrollbar__wrap';
+  outer.style.visibility = 'hidden';
+  outer.style.width = '100px';
+  outer.style.position = 'absolute';
+  outer.style.top = '-9999px';
+  document.body.appendChild(outer);
+
+  var widthNoScroll = outer.offsetWidth;
+  outer.style.overflow = 'scroll';
+
+  var inner = document.createElement('div');
+  inner.style.width = '100%';
+  outer.appendChild(inner);
+
+  var widthWithScroll = inner.offsetWidth;
+  outer.parentNode.removeChild(outer);
+  scrollBarWidth = widthNoScroll - widthWithScroll;
+
+  return scrollBarWidth;
+}

package/dist/_util/_popper/popper-mixin.js

@@ -0,0 +1,35 @@
+'use strict';
+
+exports.__esModule = true;
+
+var _transition = require('mds-ui/dist/transition');
+
+var _transition2 = _interopRequireDefault(_transition);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var placementMap = {
+  top: 'top',
+  left: 'left',
+  right: 'right',
+  bottom: 'bottom',
+  topLeft: 'top-start',
+  topRight: 'top-end',
+  bottomLeft: 'bottom-start',
+  bottomRight: 'bottom-end',
+  leftTop: 'left-start',
+  leftBottom: 'left-end',
+  rightTop: 'right-start',
+  rightBottom: 'right-end'
+};
+
+exports.default = {
+  components: {
+    mdsTransition: _transition2.default
+  },
+  computed: {
+    realPlacement: function realPlacement() {
+      return placementMap[this.placement];
+    }
+  }
+};