@supermapgis/vue-iclient-leaflet 11.2.0

package/src/common/chart/index.js

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

package/src/common/chart/style/chart.scss

@@ -0,0 +1,10 @@
+@import "../../../common/_utils/style/mixins/mixins.scss";
+
+@include b(chart) {
+  & .sm-component-collapse-card__content {
+    width: 400px;
+    height: 200px;
+    /* 去除阴影效果 */
+    box-shadow: none;
+  }
+}

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

@@ -0,0 +1,5 @@
+import 'vue-iclient/src/common/_assets/iconfont/icon-sm-components.css';
+import 'vue-iclient/src/common/_utils/style/common/common.scss';
+import 'vue-iclient/src/common/message/style/index.js';
+import 'vue-iclient/src/common/collapse-card/style/collapse-card.scss';
+import './chart.scss';

package/src/common/checkbox/Checkbox.vue

@@ -0,0 +1,37 @@
+<script lang="ts">
+import Checkbox from 'ant-design-vue/es/checkbox/Checkbox';
+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 checkboxTypes = {
+  defaultChecked: VueTypes.bool,
+  checked: VueTypes.bool,
+  disabled: VueTypes.bool,
+  indeterminate: VueTypes.bool,
+  autoFocus: VueTypes.bool
+};
+
+export default {
+  name: 'SmCheckbox',
+  __ANT_CHECKBOX: true,
+  defaultComponent: Checkbox,
+  mixins: [Theme, AntdRender],
+  inheritAttrs: false,
+  model: {
+    prop: 'checked',
+    event: 'input'
+  },
+  props: checkboxTypes,
+  computed: {
+    extralListeners() {
+      const vm = this;
+      return {
+        input: function(value) {
+          vm.$emit('input', value);
+        }
+      };
+    }
+  }
+};
+</script>

package/src/common/checkbox/Group.vue

@@ -0,0 +1,36 @@
+<script lang="ts">
+import Group from 'ant-design-vue/es/checkbox/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 groupTypes = {
+  name: VueTypes.string,
+  defaultValue: VueTypes.array,
+  value: VueTypes.array,
+  options: VueTypes.array,
+  disabled: VueTypes.bool
+};
+
+export default {
+  name: 'SmCheckboxGroup',
+  defaultComponent: Group,
+  mixins: [Theme, AntdRender],
+  inheritAttrs: false,
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+  props: groupTypes,
+  computed: {
+    extralListeners() {
+      const vm = this;
+      return {
+        change: function(value) {
+          vm.$emit('change', value);
+        }
+      };
+    }
+  }
+};
+</script>

package/src/common/checkbox/index.js

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

package/src/common/checkbox/style/checkbox.scss

@@ -0,0 +1,40 @@
+@import '../../_utils/style/mixins/mixins.scss';
+@import '../../_utils/style/theme/theme.scss';
+
+
+@include b(checkbox) {
+  $prefix: &;
+  &-wrapper:hover &-inner, &:hover &-inner {
+    border-color: $hover-color;
+  }
+  &-wrapper {
+    color: $text-color-active;
+  }
+  &-checked::after {
+    border: none;
+  }
+  &-wrapper:not(&-wrapper-disabled):hover {
+    #{$prefix}-indeterminate {
+      #{$prefix}-inner::after {
+        background-color: $hover-color;
+      }
+    }
+  }
+  &-wrapper-checked:not(&-wrapper-disabled),
+  &-checked:not(&-disabled) {
+    &:hover {
+      #{$prefix}-inner{
+        background-color:  $checkbox-selected-hover-color;
+        border-color:  $checkbox-selected-hover-color;
+      }
+    }
+  }
+  @include e(inner, '-') {
+    background-color: transparent;
+  }
+  @include e(disabled, '-') {
+    #{$prefix}-inner {
+      border-color: $disabled-border-color !important;
+    }
+  }
+}

package/src/common/checkbox/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 './checkbox.scss';

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

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

package/src/common/collapse/Collapse.vue

@@ -0,0 +1,32 @@
+<script lang="ts">
+import Collapse from 'ant-design-vue/es/collapse/Collapse';
+import { collapseProps } from 'ant-design-vue/es/vc-collapse';
+import Theme from 'vue-iclient/src/common/_mixin/Theme';
+import AntdRender from 'vue-iclient/src/common/_mixin/AntdRender';
+
+export const collapseTypes = {
+  ...collapseProps()
+};
+
+export default {
+  name: 'SmCollapse',
+  defaultComponent: Collapse,
+  mixins: [Theme, AntdRender],
+  inheritAttrs: false,
+  model: {
+    prop: 'activeKey',
+    event: 'change'
+  },
+  props: collapseTypes,
+  computed: {
+    extralListeners() {
+      const vm = this;
+      return {
+        change: function(value) {
+          vm.$emit('change', value);
+        }
+      };
+    }
+  }
+};
+</script>

package/src/common/collapse/Panel.vue

@@ -0,0 +1,26 @@
+<script lang="ts">
+import CollapsePanel from 'ant-design-vue/es/collapse/CollapsePanel';
+import { panelProps } from 'ant-design-vue/es/vc-collapse';
+import Theme from 'vue-iclient/src/common/_mixin/Theme';
+import AntdRender from 'vue-iclient/src/common/_mixin/AntdRender';
+
+export const collapsePanelTypes = {
+  ...panelProps()
+};
+
+export default {
+  name: 'SmCollapsePanel',
+  defaultComponent: CollapsePanel,
+  mixins: [Theme, AntdRender],
+  inheritAttrs: false,
+  props: collapsePanelTypes,
+  methods: {
+    getPrefixCls(suffixCls: string, customizePrefixCls: string) {
+      if (customizePrefixCls) {
+        return customizePrefixCls;
+      }
+      return `${this.defaultPrefixCls}-${suffixCls}`;
+    }
+  }
+};
+</script>

package/src/common/collapse/index.js

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

package/src/common/collapse/style/collapse.scss

@@ -0,0 +1,10 @@
+@import '../../_utils/style/mixins/mixins.scss';
+@import '../../_utils/style/theme/theme.scss';
+
+@include b(collapse) {
+  background-color: $collapse-header-bg;
+
+  @include e(borderless, '-') {
+    background-color: $collapse-header-bg;
+  }
+}

package/src/common/collapse/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 './collapse.scss';

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

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

package/src/common/collapse-card/CollapseCard.vue

@@ -0,0 +1,150 @@
+<template>
+  <div class="sm-component-collapse-card" :style="getTextColorStyle">
+    <div
+      v-if="iconClass"
+      :class="{
+        ['sm-component-collapse-card__icon']: true,
+        ['is-' + position]: true,
+        [`is-click-${isShow ? 'out' : 'in'}`]: true,
+        ['is-not-header']: !headerName,
+        ['icon-box-shadow']: !isShow
+      }"
+      :style="[collapseCardHeaderBgStyle, headingTextColorStyle]"
+      @click="iconClicked"
+    >
+      <i :style="iconStyle" :class="{ [iconClass]: true, ['is-auto-rotate']: autoRotate }" />
+    </div>
+    <transition name="sm-component-zoom-in" @after-leave="toggleTransition('leave')" @enter="toggleTransition('enter')">
+      <div
+        v-show="isShow"
+        :class="{
+          ['sm-component-collapse-card__content']: true,
+          ['is-not-header']: !headerName,
+          ['is-' + position]: true,
+          ['is-icon']: iconClass
+        }"
+        :style="getCardStyle"
+      >
+        <div
+          v-if="headerName"
+          :class="{'sm-component-collapse-card__header': true, 'with-split-line': splitLine, ['is-' + position]: true}"
+          :style="[collapseCardHeaderBgStyle, headingTextColorStyle]"
+        >
+          <span class="sm-component-collapse-card__header-name">{{ headerName }}</span>
+        </div>
+        <div :style="getCardStyle" class="sm-component-collapse-card__body">
+          <slot></slot>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+<script>
+import Theme from 'vue-iclient/src/common/_mixin/Theme';
+
+export default {
+  name: 'SmCollapseCard',
+  mixins: [Theme],
+  props: {
+    iconPosition: {
+      type: String,
+      default: 'top-left'
+    },
+    iconClass: {
+      type: String
+    },
+    autoRotate: {
+      type: Boolean,
+      default: false
+    },
+    headerName: {
+      type: String
+    },
+    collapsed: {
+      type: Boolean,
+      default: false
+    },
+    splitLine: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      isShow: true,
+      transform: null
+    };
+  },
+  computed: {
+    getCardStyle() {
+      const style = { background: 'transparent' };
+      return !this.iconClass && !this.headerName ? style : this.collapseCardBackgroundStyle;
+    },
+    iconStyle() {
+      return {
+        transform: this.transform
+      };
+    },
+    position() {
+      return this.iconPosition;
+    },
+    rotateDeg() {
+      return {
+        'top-right': ['rotate(-45deg)', 'rotate(135deg)'],
+        'top-left': ['rotate(-135deg)', 'rotate(45deg)'],
+        'bottom-left': ['rotate(135deg)', 'rotate(-45deg)'],
+        'bottom-right': ['rotate(45deg)', 'rotate(-135deg)']
+      };
+    },
+    hasHeaderRotateDeg() {
+      return {
+        'top-right': ['rotate(-45deg)', 'rotate(135deg)'],
+        'top-left': ['rotate(-135deg)', 'rotate(45deg)'],
+        'bottom-left': ['rotate(-135deg)', 'rotate(45deg)'],
+        'bottom-right': ['rotate(-45deg)', 'rotate(135deg)']
+      };
+    }
+  },
+  watch: {
+    iconClass(newVal, oldVal) {
+      if (newVal && !oldVal) {
+        this.isShow = !this.collapsed;
+        this.toggleTransition(this.collapsed ? 'leave' : 'enter');
+      } else if (!newVal) {
+        // 如果iconClass 为空 则默认显示内容
+        this.isShow = true;
+      }
+    },
+    iconPosition() {
+      this.resetIconTransform();
+    }
+  },
+  created() {
+    this.iconClass && (this.isShow = !this.collapsed);
+    this.resetIconTransform();
+  },
+  mounted() {
+    this.toggleTransition(this.collapsed ? 'leave' : 'enter');
+  },
+  methods: {
+    iconClicked() {
+      this.isShow = !this.isShow;
+      this.resetIconTransform();
+      this.$emit('content-show-state', this.isShow);
+    },
+    toggleTransition(type) {
+      this.$nextTick(() => {
+        const iconDom = this.$el.querySelector('.sm-component-collapse-card__icon');
+        if (iconDom) {
+          iconDom.style.position = type === 'leave' ? 'relative' : 'absolute';
+        }
+      });
+    },
+    resetIconTransform() {
+      let rotateDeg = this.headerName ? this.hasHeaderRotateDeg : this.rotateDeg;
+      this.autoRotate && (this.transform = rotateDeg[this.position][this.isShow ? 1 : 0]);
+    }
+  }
+};
+</script>
+<style lang="scss"></style>

package/src/common/collapse-card/index.js

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

package/src/common/collapse-card/style/collapse-card.scss

@@ -0,0 +1,176 @@
+@import "../../_utils/style/mixins/mixins.scss";
+@import '../../../common/_utils/style/theme/theme.scss';
+
+@include b(collapse-card) {
+  $collapse-card-prefix: &;
+
+  position: relative;
+  overflow: visible;
+  font-size: 12px;
+  color: $text-color;
+  .icon-box-shadow {
+    box-shadow: 0 3px 13px 0px $shadow-color;
+  }
+  @include e(icon) {
+    z-index: 100;
+    background: $collapse-card-header-bg;
+    color: $heading-color;
+    cursor: pointer;
+    box-sizing: border-box;
+    font-size: 16px;
+    width: 32px;
+    height: 32px;
+    line-height: 32px;
+    text-align: center;
+    &:hover {
+      background: #ffffff;
+      border-color: $hover-color !important;
+      color: $hover-color !important;
+    }
+    > i {
+      display: block;
+    }
+    @include when(not-header) {
+      @include when(bottom-right) {
+        bottom: 0;
+        top: unset;
+      }
+      @include when(bottom-left) {
+        bottom: 0;
+        top: unset;
+      }
+    }
+    @include when(click-in) {
+      border-radius: 4px;
+      @include when(top-right) {
+        float: right;
+      }
+      @include when(bottom-right) {
+        float: right;
+      }
+      @include when(top-left) {
+        float: left !important;
+      }
+      @include when(bottom-left) {
+        float: left !important;
+      }
+    }
+    @include when(click-out) {
+      border: none;
+      background: transparent !important;
+    }
+    @include when(top-left) {
+      top: 0;
+      left: 0;
+      & .sm-component-collapse-card__component-icon.is-auto-rotate {
+        transform: rotate(45deg);
+      }
+    }
+    @include when(bottom-left) {
+      top: 0;
+      left: 0;
+      & .sm-component-collapse-card__component-icon.is-auto-rotate {
+        transform: rotate(45deg);
+      }
+    }
+    @include when(top-right) {
+      top: 0;
+      right: 0;
+      & .sm-component-collapse-card__component-icon.is-auto-rotate {
+        transform: rotate(135deg);
+      }
+    }
+    @include when(bottom-right) {
+      top: 0;
+      right: 0;
+      & .sm-component-collapse-card__component-icon.is-auto-rotate {
+        transform: rotate(135deg);
+      }
+    }
+  }
+
+  @include e(header) {
+    height: 32px;
+    line-height: 32px;
+    padding-left: 8px;
+    box-shadow: 0px 1px 0px 0px $shadow-color;
+    color: $heading-color;
+    background: $collapse-card-header-bg;
+    border-radius: 4px 4px 0 0;
+    &.with-split-line {
+      border-bottom: 1px solid $collapse-card-split-line;
+    }
+    + #{$collapse-card-prefix}__body {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
+    @include when(top-right) {
+      padding-right: 30px;
+    }
+    @include when(bottom-right) {
+      padding-right: 30px;
+    }
+    @include when(top-left) {
+      padding-left: 30px;
+    }
+    @include when(bottom-left) {
+      padding-left: 30px;
+    }
+  }
+  @include e(content) {
+    box-shadow: 0 3px 13px 0px $shadow-color;
+    background: $collapse-card-bg;
+    position: relative;
+    border-radius: 4px;
+    &.sm-component-zoom-in-enter-active {
+      animation: zoom-in .5s;
+    }
+    &.sm-component-zoom-in-leave-active {
+      animation: zoom-in .5s reverse;
+    }
+    @keyframes zoom-in {
+      0% {
+        transform: scale(0);
+        opacity: 0;
+      }
+      100% {
+        transform: scale(1);
+        opacity: 1;
+      }
+    }
+    @include when(top-left) {
+      @include when(icon) {
+        & > .sm-component-collapse-card__header {
+          padding-left: 38px;
+        }
+      }
+      transform-origin: top left;
+    }
+    @include when(bottom-left) {
+      @include when(icon) {
+        & > .sm-component-collapse-card__header {
+          padding-left: 38px;
+        }
+      }
+      transform-origin: top left;
+    }
+    @include when(not-header) {
+      @include when(bottom-right) {
+        transform-origin: bottom right;
+      }
+      @include when(bottom-left) {
+        transform-origin: bottom left;
+      }
+    }
+    @include when(bottom-right) {
+      transform-origin: top right;
+    }
+    @include when(top-right) {
+      transform-origin: top right;
+    }
+  }
+  @include e(body) {
+    height: 100%;
+    border-radius: 4px;
+  }
+}

package/src/common/collapse-card/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 './collapse-card.scss';