@supermapgis/vue-iclient-leaflet 11.2.0

package/src/common/avatar/Avatar.vue

@@ -0,0 +1,41 @@
+<script lang="ts">
+import { VNode } from 'vue';
+import Avatar from 'ant-design-vue/es/avatar/Avatar';
+import VueTypes from 'vue-iclient/src/common/_utils/vue-types';
+import Theme from 'vue-iclient/src/common/_mixin/Theme';
+import AntdRender from 'vue-iclient/src/common/_mixin/AntdRender';
+
+export const avatarTypes = {
+  icon: VueTypes.any,
+  shape: VueTypes.oneOf(['circle', 'square']).def('circle'),
+  size: VueTypes.oneOfType([VueTypes.number, VueTypes.string]),
+  src: VueTypes.string,
+  srcSet: VueTypes.string,
+  alt: VueTypes.string,
+  loadError: VueTypes.func,
+  iconClass: VueTypes.string
+};
+
+export default {
+  name: 'SmAvatar',
+  defaultComponent: Avatar,
+  mixins: [Theme, AntdRender],
+  inheritAttrs: false,
+  props: avatarTypes,
+  methods: {
+    renderChildren(): VNode[] {
+      const h = this.$createElement;
+      const children = [];
+      if ((!this.icon || !this.$slots.icon) && this.iconClass) {
+        children.push(
+          h('i', {
+            class: { [this.iconClass]: true },
+            slot: 'icon'
+          })
+        );
+      }
+      return [this.$slots.default, children];
+    }
+  }
+};
+</script>

package/src/common/avatar/index.js

@@ -0,0 +1,9 @@
+import Avatar from './Avatar';
+import init from 'vue-iclient/src/init';
+
+Avatar.install = function(Vue, opts) {
+  init(Vue, opts);
+  Vue.component(Avatar.options ? Avatar.options.name : Avatar.name, Avatar);
+};
+
+export default Avatar;

package/src/common/avatar/style/avatar.scss

@@ -0,0 +1,8 @@
+@import "../../_utils/style/mixins/mixins.scss";
+@import '../../_utils/style/theme/theme.scss';
+
+@include b(avatar) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}

package/src/common/avatar/style/index.js

@@ -0,0 +1,4 @@
+import 'vue-iclient/src/common/_assets/iconfont/icon-sm-components.css';
+import 'vue-iclient/src/common/_utils/style/common/common.scss';
+import './index.less';
+import './avatar.scss';

package/src/common/avatar/style/index.less

@@ -0,0 +1,3 @@
+@import 'ant-design-vue/es/avatar/style/index.less';
+@import 'ant-design-vue/es/style/index.less';
+@import '../../_utils/style/theme/antdVar.less';

package/src/common/border/Border.vue

@@ -0,0 +1,121 @@
+<template>
+  <div :ref="borderId" :style="borderStyle" class="sm-component-border">
+    <!-- 组件 -->
+    <div :style="contentStyle" class="sm-component-border__content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+<script>
+import Theme from 'vue-iclient/src/common/_mixin/Theme';
+import borderConfigs from './assets/border.config.json';
+import UniqueId from 'lodash.uniqueid';
+import { addListener, removeListener } from 'resize-detector';
+import debounce from 'lodash.debounce';
+
+export default {
+  name: 'SmBorder',
+  mixins: [Theme],
+  props: {
+    // border的类型
+    type: {
+      type: [String],
+      default: 'border1'
+    },
+    customBorder: {
+      type: Object
+    }
+  },
+  data() {
+    return {
+      borderId: UniqueId(`${this.$options.name.toLowerCase()}-`),
+      // content的位置大小
+      position: { top: 0, left: 0, width: 0, height: 0 },
+      // 上右下左的边距
+      borderEdge: [],
+      // border的宽度
+      borderWidth: [],
+      // border组件的宽高
+      width: 0,
+      height: 0
+    };
+  },
+  computed: {
+    borderConfig() {
+      if (!this.customBorder && this.type) {
+        return borderConfigs[this.type];
+      } else {
+        return this.customBorder;
+      }
+    },
+    borderImage() {
+      if ((!this.customBorder || !this.customBorder.src) && this.type) {
+        return require(`./assets/image/${this.type}.png`);
+      } else {
+        return `${this.customBorder.src}`;
+      }
+    },
+    borderStyle() {
+      let borderImageSlice = this.borderWidth.join(' ') + ' fill';
+      let borderWidth = this.borderWidth.join('px ') + 'px';
+      return {
+        borderWidth,
+        // 当图片大小超过8KB, webpack就不会转换成base64, 直接引入时路径出错（此时的图片路径在index.html下？）
+        borderImage: 'url(' + this.borderImage + ') ' + borderImageSlice + ' / 1 / 0 stretch'
+      };
+    },
+    contentStyle() {
+      let contentStyle = Object.assign({}, this.position);
+      for (let key in contentStyle) {
+        contentStyle[key] = contentStyle[key] + 'px';
+      }
+      return contentStyle;
+    }
+  },
+  watch: {
+    // type变化了，需要读取对应的配置，重新计算位置大小
+    type() {
+      this.setPosition();
+    }
+  },
+  mounted() {
+    this.setPosition();
+    this.resizeHanlder = debounce(this.calcPosition.bind(this), 500);
+    addListener(this.$el, this.resizeHanlder);
+  },
+  updated() {
+    // 避免style.width< borderWidth，引起的dom重绘, 宽高会改变, 需要重新计算组件的位置大小
+    this.calcPosition();
+  },
+  beforeDestroy() {
+    removeListener(this.$el, this.resizeHandler);
+  },
+  methods: {
+    // 设置content的位置大小
+    setPosition(borderConfig = this.borderConfig) {
+      this.borderEdge = borderConfig.borderEdge;
+      this.borderWidth = borderConfig.borderWidth;
+      this.calcPosition();
+    },
+    // 计算content的top,left,width,height
+    calcPosition() {
+      // 设置总宽高
+      this.setWidthHeight();
+      const { top, left, bottom, right } = this.borderEdge;
+      // 由于定位是相当于content-width来定位， 所以要减去border的宽度(left和 top)
+      this.position.left = left - this.borderWidth[3];
+      this.position.top = top - this.borderWidth[0];
+      // 内容的宽度 = 总的宽度 - 总的边距
+      this.position.width = this.width - left - right;
+      this.position.height = this.height - top - bottom;
+    },
+    // 设置宽高
+    setWidthHeight() {
+      if (this.$refs[this.borderId]) {
+        this.width = this.$refs[this.borderId].offsetWidth;
+        this.height = this.$refs[this.borderId].offsetHeight;
+      }
+    }
+  }
+};
+</script>

package/src/common/border/assets/border.config.json

@@ -0,0 +1,67 @@
+{
+  "border1": {
+    "type": "1",
+    "borderWidth": [12, 12, 12, 12],
+    "borderEdge":{"top": 12, "left": 12, "right": 12, "bottom": 12}
+  },
+  "border2": {
+    "type": "2",
+    "borderWidth": [12, 12, 12, 12],
+    "borderEdge":{"top": 12, "left": 12, "right": 12, "bottom": 12}
+  },
+  "border3": {
+    "type": "3",
+    "borderWidth": [19, 19, 19, 19],
+    "borderEdge":{"top": 19, "left": 19, "right": 19, "bottom": 19}
+  },
+  "border4": {
+    "type": "4",
+    "borderWidth": [20, 40, 20, 40],
+    "borderEdge":{"top": 20, "left": 20, "right": 20, "bottom": 20}
+  },
+  "border5": {
+    "type": "5",
+    "borderWidth": [12, 135, 12, 160],
+    "borderEdge":{"top": 12, "left": 12, "right": 12, "bottom": 12}
+  },
+  "border6": {
+    "type": "6",
+    "borderWidth": [12, 12, 12, 12],
+    "borderEdge":{"top": 12, "left": 12, "right": 12, "bottom": 12}
+  },
+  "border7": {
+    "type": "7",
+    "borderWidth": [88, 138, 134, 130],
+    "borderEdge":{"top": 30, "left": 30, "right": 32, "bottom": 32}
+  },
+  "border8": {
+    "type": "8",
+    "borderWidth": [24, 100, 24, 100],
+    "borderEdge":{"top": 17, "left": 17, "right": 17, "bottom": 17}
+  },
+  "border9": {
+    "type": "9",
+    "borderWidth": [100, 90, 70, 75],
+    "borderEdge":{"top": 32, "left": 32, "right": 32, "bottom": 32}
+  },
+  "border10": {
+    "type": "10",
+    "borderWidth": [27, 104, 100, 52],
+    "borderEdge":{"top": 27, "left": 23, "right": 60, "bottom": 44}
+  },
+  "border11": {
+    "type": "11",
+    "borderWidth": [26, 52, 26, 52],
+    "borderEdge":{"top": 12, "left": 12, "right": 12, "bottom": 12}
+  },
+  "border12": {
+    "type": "12",
+    "borderWidth": [109, 271, 100, 180],
+    "borderEdge":{"top": 30, "left": 12, "right": 12, "bottom": 25}
+  },
+  "border13": {
+    "type": "13",
+    "borderWidth": [20, 24, 20, 24],
+    "borderEdge":{"top": 20, "left": 22, "right": 24, "bottom": 20}
+  }
+}

package/src/common/border/index.js

@@ -0,0 +1,9 @@
+import Border from './Border';
+import init from 'vue-iclient/src/init';
+
+Border.install = function(Vue, opts) {
+  init(Vue, opts);
+  Vue.component(Border.options ? Border.options.name : Border.name, Border);
+};
+
+export default Border;

package/src/common/border/style/border.scss

@@ -0,0 +1,19 @@
+@import '../../_utils/style/mixins/mixins.scss';
+
+@include b(border) {
+  position: relative;
+  box-sizing: border-box;
+  border-style: solid;
+  @include e(content) {
+    position: absolute;
+    /* 选择content的后代 E>F */
+    > * {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .sm-component-chart .sm-component-collapse-card__content {
+    width: 100%;
+    height: 100%;
+  }
+}

package/src/common/border/style/index.js

@@ -0,0 +1,4 @@
+import 'vue-iclient/src/common/_assets/iconfont/icon-sm-components.css';
+import 'vue-iclient/src/common/_utils/style/common/common.scss';
+
+import './border.scss';

package/src/common/breadcrumb/Breadcrumb.vue

@@ -0,0 +1,21 @@
+<script lang="ts">
+import Breadcrumb from 'ant-design-vue/es/breadcrumb/Breadcrumb';
+import VueTypes from 'vue-iclient/src/common/_utils/vue-types';
+import Theme from 'vue-iclient/src/common/_mixin/Theme';
+import AntdRender from 'vue-iclient/src/common/_mixin/AntdRender';
+
+export const breadcrumbTypes = {
+  routes: VueTypes.array,
+  params: VueTypes.object,
+  separator: VueTypes.any,
+  itemRender: VueTypes.any
+};
+
+export default {
+  name: 'SmBreadcrumb',
+  defaultComponent: Breadcrumb,
+  mixins: [Theme, AntdRender],
+  inheritAttrs: false,
+  props: breadcrumbTypes
+};
+</script>

package/src/common/breadcrumb/BreadcrumbItem.vue

@@ -0,0 +1,21 @@
+<script lang="ts">
+import BreadcrumbItem from 'ant-design-vue/es/breadcrumb/BreadcrumbItem';
+import VueTypes from 'vue-iclient/src/common/_utils/vue-types';
+import Theme from 'vue-iclient/src/common/_mixin/Theme';
+import AntdRender from 'vue-iclient/src/common/_mixin/AntdRender';
+
+export const breadcrumbItemTypes = {
+  href: VueTypes.string,
+  overlay: VueTypes.any,
+  separator: VueTypes.any
+};
+
+export default {
+  name: 'SmBreadcrumbItem',
+  __ANT_BREADCRUMB_ITEM: true,
+  defaultComponent: BreadcrumbItem,
+  mixins: [Theme, AntdRender],
+  inheritAttrs: false,
+  props: breadcrumbItemTypes
+};
+</script>

package/src/common/breadcrumb/BreadcrumbSeparator.vue

@@ -0,0 +1,19 @@
+<script lang="ts">
+import BreadcrumbSeparator from 'ant-design-vue/es/breadcrumb/BreadcrumbSeparator';
+import VueTypes from 'vue-iclient/src/common/_utils/vue-types';
+import Theme from 'vue-iclient/src/common/_mixin/Theme';
+import AntdRender from 'vue-iclient/src/common/_mixin/AntdRender';
+
+export const breadcrumbSeparatorTypes = {
+  prefixCls: VueTypes.string
+};
+
+export default {
+  name: 'SmBreadcrumbSeparator',
+  __ANT_BREADCRUMB_Separator: true,
+  defaultComponent: BreadcrumbSeparator,
+  mixins: [Theme, AntdRender],
+  inheritAttrs: false,
+  props: breadcrumbSeparatorTypes
+};
+</script>

package/src/common/breadcrumb/index.js

@@ -0,0 +1,13 @@
+import Breadcrumb from './Breadcrumb';
+import BreadcrumbItem from './BreadcrumbItem';
+import BreadcrumbSeparator from './BreadcrumbSeparator';
+import init from 'vue-iclient/src/init';
+
+Breadcrumb.install = function(Vue, opts) {
+  init(Vue, opts);
+  Vue.component(Breadcrumb.options ? Breadcrumb.options.name : Breadcrumb.name, Breadcrumb);
+  Vue.component(BreadcrumbItem.options ? BreadcrumbItem.options.name : BreadcrumbItem.name, BreadcrumbItem);
+  Vue.component(BreadcrumbSeparator.options ? BreadcrumbSeparator.options.name : BreadcrumbSeparator.name, BreadcrumbSeparator);
+};
+
+export default Breadcrumb;

package/src/common/breadcrumb/style/breadcrumb.scss

@@ -0,0 +1,21 @@
+@import '../../_utils/style/mixins/mixins.scss';
+@import '../../_utils/style/theme/theme.scss';
+
+@include b(breadcrumb) {
+  $prefix: &;
+  color: $breadcrumb-base-color;
+  a {
+    color: $breadcrumb-link-color;
+  }
+  a:hover {
+    color: $breadcrumb-link-color-hover;
+  }
+  @include e(separator, '-') {
+    color: $breadcrumb-separator-color;
+  }
+  >span:last-child {
+    #{$prefix}-link {
+      color: $text-color-active;
+    }
+  }
+}

package/src/common/breadcrumb/style/index.js

@@ -0,0 +1,4 @@
+import 'vue-iclient/src/common/_assets/iconfont/icon-sm-components.css';
+import 'vue-iclient/src/common/_utils/style/common/common.scss';
+import './index.less';
+import './breadcrumb.scss';

package/src/common/breadcrumb/style/index.less

@@ -0,0 +1,3 @@
+@import 'ant-design-vue/es/breadcrumb/style/index.less';
+@import 'ant-design-vue/es/style/index.less';
+@import '../../_utils/style/theme/antdVar.less';

package/src/common/button/Button.vue

@@ -0,0 +1,34 @@
+<script lang="ts">
+import Button from 'ant-design-vue/es/button/button';
+import buttonProps from 'ant-design-vue/es/button/buttonTypes';
+import VueTypes from 'vue-iclient/src/common/_utils/vue-types';
+import Theme from 'vue-iclient/src/common/_mixin/Theme';
+import AntdRender from 'vue-iclient/src/common/_mixin/AntdRender';
+
+export const buttonTypes = {
+  ...buttonProps(),
+  size: VueTypes.oneOf(['small', 'large', 'default', 'middle']),
+  autoInsertSpaceInButton: VueTypes.bool.def(false)
+};
+
+export default {
+  name: 'SmButton',
+  __ANT_BUTTON: true,
+  defaultComponent: Button,
+  mixins: [Theme, AntdRender],
+  inheritAttrs: false,
+  props: buttonTypes,
+  computed: {
+    extralProps() {
+      return {
+        size: this.size === 'middle' ? undefined : this.size
+      };
+    },
+    componentClass() {
+      return {
+        'sm-component-btn-md': this.size === 'middle'
+      };
+    }
+  }
+};
+</script>

package/src/common/button/Group.vue

@@ -0,0 +1,31 @@
+<script lang="ts">
+import ButtonGroup, { ButtonGroupProps } from 'ant-design-vue/es/button/button-group';
+import VueTypes from 'vue-iclient/src/common/_utils/vue-types';
+import Theme from 'vue-iclient/src/common/_mixin/Theme';
+import AntdRender from 'vue-iclient/src/common/_mixin/AntdRender';
+
+export const buttonGroupTypes = {
+  ...ButtonGroupProps,
+  size: VueTypes.oneOf(['small', 'large', 'default', 'middle'])
+};
+
+export default {
+  name: 'SmButtonGroup',
+  defaultComponent: ButtonGroup,
+  mixins: [Theme, AntdRender],
+  inheritAttrs: false,
+  props: buttonGroupTypes,
+  computed: {
+    extralProps() {
+      return {
+        size: this.size === 'middle' ? undefined : this.size
+      };
+    },
+    componentClass() {
+      return {
+        'sm-component-btn-group-md': this.size === 'middle'
+      };
+    }
+  }
+};
+</script>

package/src/common/button/index.js

@@ -0,0 +1,11 @@
+import Button from './Button';
+import Group from './Group';
+import init from 'vue-iclient/src/init';
+
+Button.install = function(Vue, opts) {
+  init(Vue, opts);
+  Vue.component(Button.options ? Button.options.name : Button.name, Button);
+  Vue.component(Group.options ? Group.options.name : Group.name, Group);
+};
+
+export default Button;

package/src/common/button/style/button.scss

@@ -0,0 +1,91 @@
+@import '../../_utils/style/mixins/mixins.scss';
+@import '../../_utils/style/theme/theme.scss';
+@import 'mixin.scss';
+
+@include b(btn) {
+  $prefix: &;
+  border-color: $btn-default-border-color;
+  color: $btn-opacity85-color;
+  @include button-variant-other($btn-default-bg);
+
+  @include e(primary, '-') {
+    border: 1px solid transparent;
+    color: $btn-primary-color;
+    @include button-variant-primary(
+      $btn-primary-color,
+      $primary-5,
+      $primary-5,
+      $btn-primary-color,
+      $primary-7,
+      $primary-7
+    );
+  }
+  @include e(danger, '-') {
+    color: $btn-danger-color;
+    border-color: $btn-danger-border;
+    @include button-variant-primary($danger-5, transparent, $danger-5, $danger-7, transparent, $danger-7);
+  }
+  @include e(delete, '-') {
+    @include button-variant-primary($btn-delete-hover-color, transparent, $btn-delete-hover-color, $btn-delete-active-color, transparent, $btn-delete-active-color);
+  }
+  @include e(link, '-') {
+    border-color: transparent;
+    color: $link-color;
+    &:hover,
+    &:focus,
+    &:active {
+      border-color: transparent;
+    }
+  }
+  @include e(background-ghost, '-') {
+    border-color: $btn-default-border;
+    &#{$prefix}-primary {
+      color: $btn-default-color;
+      @include button-variant-ghost($primary-5, transparent, $primary-5, $primary-7, transparent, $primary-7);
+    }
+    &#{$prefix}-danger {
+      color: $btn-danger-color;
+      @include button-variant-ghost($danger-5, transparent, $danger-5, $danger-7, transparent, $danger-7);
+    }
+    &#{$prefix}-link {
+      color: $link-color;
+      @include button-variant-ghost($primary-5, transparent, transparent, $primary-7, transparent, transparent);
+    }
+    &#{$prefix}-delete {
+      @include button-variant-primary($btn-delete-hover-color, transparent, $btn-delete-hover-color, $btn-delete-active-color, transparent, $btn-delete-active-color);
+    }
+  }
+  @include e(group, '-') {
+    color: $btn-default-color;
+    &-md > #{$prefix},
+    &-md > span > #{$prefix} {
+      @include button-md-size();
+      line-height: $btn-height-md - 2px;
+    }
+    &-md > #{$prefix}.#{$ant-prefix}-btn-icon-only {
+      @include square($btn-height-md);
+      padding-right: 0;
+      padding-left: 0;
+    }
+  }
+  @include e(md, '-') {
+    @include button-md-size();
+  }
+  @include e(icon-only, '-') {
+    &#{$prefix}-md {
+      @include square($btn-height-md);
+      @include button-md-size();
+    }
+  }
+  @include e(circle circle-outline, '-') {
+    &#{$prefix}-md {
+      min-width: $btn-height-md;
+    }
+  }
+  @include e(round, '-') {
+    &#{$prefix}-md {
+      @include button-md-size();
+      padding: 0 calc(#{$btn-height-md} / 2);
+    }
+  }
+}

package/src/common/button/style/index.js

@@ -0,0 +1,4 @@
+import 'vue-iclient/src/common/_assets/iconfont/icon-sm-components.css';
+import 'vue-iclient/src/common/_utils/style/common/common.scss';
+import './index.less';
+import './button.scss';

package/src/common/button/style/index.less

@@ -0,0 +1,3 @@
+@import 'ant-design-vue/es/button/style/index.less';
+@import 'ant-design-vue/es/style/index.less';
+@import '../../_utils/style/theme/antdVar.less';