@supermapgis/vue-iclient-leaflet 11.2.0

package/src/common/spin/main.ts

@@ -0,0 +1,13 @@
+import { setDefaultIndicator } from 'ant-design-vue/es/spin/Spin';
+import Spin from './Spin.vue';
+
+type SpinInstanceType = typeof Spin;
+
+interface SpinInstanceConstructor extends SpinInstanceType {
+  setDefaultIndicator?: Function;
+}
+
+Spin['setDefaultIndicator'] = setDefaultIndicator;
+
+const SpinInstance: SpinInstanceConstructor = Spin;
+export default SpinInstance;

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

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

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

package/src/common/spin/style/spin.scss

@@ -0,0 +1,14 @@
+@import "../../_utils/style/mixins/mixins.scss";
+@import '../../_utils/style/theme/theme.scss';
+
+@include b (spin) {
+  color: $primary-color;
+
+  @include e(tip, '-') {
+    color: $text-color-secondary;
+  }
+
+  @include e(dot-item, '-') {
+    background-color: $primary-color;
+  }
+}

package/src/common/steps/Step.vue

@@ -0,0 +1,33 @@
+<script lang="ts">
+import Steps from 'ant-design-vue/es/steps';
+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 stepTypes = {
+  prefixCls: VueTypes.string,
+  wrapperStyle: VueTypes.object,
+  itemWidth: VueTypes.string,
+  active: VueTypes.bool,
+  disabled: VueTypes.bool,
+  status: VueTypes.string,
+  iconPrefix: VueTypes.string,
+  icon: VueTypes.any,
+  adjustMarginRight: VueTypes.string,
+  stepNumber: VueTypes.string,
+  stepIndex: VueTypes.number,
+  description: VueTypes.any,
+  title: VueTypes.any,
+  subTitle: VueTypes.any,
+  progressDot: VueTypes.oneOfType([VueTypes.bool, VueTypes.func]),
+  tailContent: VueTypes.any,
+  icons: VueTypes.any
+};
+
+export default {
+  name: 'SmStep',
+  defaultComponent: Steps.Step,
+  mixins: [Theme, AntdRender],
+  props: stepTypes
+};
+</script>

package/src/common/steps/Steps.vue

@@ -0,0 +1,39 @@
+<script lang="ts">
+import Steps from 'ant-design-vue/es/steps';
+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 stepTypes = {
+  current: VueTypes.number,
+  initial: VueTypes.number,
+  labelPlacement: VueTypes.oneOf(['horizontal', 'vertical']).def('horizontal'),
+  status: VueTypes.oneOf(['wait', 'process', 'finish', 'error']),
+  size: VueTypes.oneOf(['default', 'small']),
+  direction: VueTypes.oneOf(['horizontal', 'vertical']),
+  progressDot: VueTypes.oneOfType([VueTypes.bool, VueTypes.func]),
+  type: VueTypes.oneOf(['default', 'navigation'])
+};
+
+export default {
+  name: 'SmSteps',
+  defaultComponent: Steps,
+  mixins: [Theme, AntdRender],
+  inheritAttrs: false,
+  model: {
+    prop: 'current',
+    event: 'change'
+  },
+  props: stepTypes,
+  computed: {
+    extralListeners() {
+      const vm = this;
+      return {
+        change: function (value) {
+          vm.$emit('change', value);
+        }
+      };
+    }
+  }
+};
+</script>

package/src/common/steps/index.js

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

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

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

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

package/src/common/steps/style/mixin.scss

@@ -0,0 +1,67 @@
+$colors: (
+  process-icon-color: $primary-color,
+  process-icon-bg-color: $primary-color,
+  process-tail-color: $border-color-base,
+  finish-icon-color: $primary-color,
+  finish-icon-text-color: $primary-color,
+  finish-icon-bg-color: transparent,
+  finish-description-color: $text-color-secondary,
+  finish-tail-color: $primary-color,
+  wait-icon-color: $text-color-secondary,
+  wait-icon-text-color: $text-color-secondary,
+  wait-icon-bg-color: transparent,
+  wait-title-color: $text-color-secondary,
+  wait-description-color: $text-color-secondary,
+  wait-tail-color: $border-color-base,
+  error-icon-color: $error-color,
+  error-icon-text-color: $error-color,
+  error-icon-bg-color: transparent,
+  error-title-color: $error-color,
+  error-description-color: $error-color,
+  error-tail-color: $border-color-base
+);
+
+@function color($key) {
+  @return map-get($colors, $key);
+}
+
+@mixin step-item-status($status, $steps-prefix-cls) {
+  $icon-color: color(#{$status}-icon-color);
+  $icon-text-color: color(#{$status}-icon-text-color);
+  $icon-bg-color: color(#{$status}-icon-bg-color);
+  $title-color: color(#{$status}-title-color);
+  $description-color: color(#{$status}-description-color);
+  $tail-color: color(#{$status}-tail-color);
+  $steps-item-prefix-cls: &;
+  &-#{$status} {
+    #{$steps-item-prefix-cls}-icon {
+      background-color: if($status == wait, $step-wait-background-color, $icon-bg-color);
+      border-color: $icon-color;
+      > #{$steps-prefix-cls}-icon {
+        color: $icon-text-color;
+        #{$steps-prefix-cls}-icon-dot {
+          background: $icon-color;
+        }
+      }
+    }
+
+    > #{$steps-item-prefix-cls}-container {
+      > #{$steps-item-prefix-cls}-content {
+        > #{$steps-item-prefix-cls}-title {
+          color: $title-color;
+          &::after {
+            background-color: $tail-color;
+          }
+        }
+        > #{$steps-item-prefix-cls}-description {
+          color: $description-color;
+        }
+      }
+      > #{$steps-item-prefix-cls}-tail {
+        &::after {
+          background-color: $tail-color;
+        }
+      }
+    }
+  }
+}

package/src/common/steps/style/steps.scss

@@ -0,0 +1,98 @@
+@import '../../_utils/style/mixins/mixins.scss';
+@import '../../_utils/style/theme/theme.scss';
+@import 'mixin.scss';
+
+@include b(steps) {
+  $prefix: &;
+  $prefix-item: & + '-item';
+  @include e(item, '-') {
+    &-icon {
+      border-color: $text-color-secondary;
+      > #{$prefix}-icon {
+        color: $primary-color;
+      }
+    }
+    &-tail {
+      &::after {
+        background: $border-color-base;
+      }
+    }
+
+    &-title {
+      &::after {
+        background: $border-color-base;
+      }
+    }
+    &-subtitle {
+      color: $text-color-secondary;
+    }
+    &-description {
+      color: $text-color-secondary;
+    }
+    @include step-item-status(wait, $prefix);
+    @include step-item-status(process, $prefix);
+    @include step-item-status(finish, $prefix);
+    @include step-item-status(error, $prefix);
+    &#{$prefix}-next-error &-title::after {
+      background: $error-color;
+    }
+
+    &-custom {
+      #{$prefix-item}-icon {
+        background: none;
+      }
+      &#{$prefix-item}-process {
+        #{$prefix-item}-icon {
+          > #{$prefix}-icon {
+            color: $primary-color;
+          }
+        }
+      }
+    }
+  }
+
+  & #{$prefix-item}:not(#{$prefix-item}-active) {
+    > #{$prefix-item}-container[role='button'] {
+      &:hover {
+        #{$prefix-item} {
+          &-title,
+          &-subtitle,
+          &-description {
+            color: $hover-color;
+          }
+        }
+      }
+    }
+    &:not(#{$prefix-item}-item-process) {
+      > #{$prefix-item}-container[role='button'] {
+        &:hover {
+          #{$prefix-item} {
+            &-icon {
+              border-color: $hover-color;
+              #{$prefix}-icon {
+                color: $hover-color;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  @include e(small, '-') {
+    #{$prefix-item}-description {
+      color: $text-color-secondary;
+    }
+  }
+
+  @include e(navigation, '-') {
+    #{$prefix-item} {
+      &::after {
+        border-color: $text-color-secondary;
+      }
+      &::before {
+        background-color: $primary-color;
+      }
+    }
+  }
+}

package/src/common/switch/Switch.vue

@@ -0,0 +1,41 @@
+<script lang="ts">
+import Switch from 'ant-design-vue/es/switch';
+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 switchTypes = {
+  autoFocus: VueTypes.bool,
+  defaultChecked: VueTypes.bool,
+  checked: VueTypes.bool,
+  checkedChildren: VueTypes.any,
+  unCheckedChildren: VueTypes.any,
+  size: VueTypes.oneOf(['small', 'large', 'default']).def('default'),
+  disabled: VueTypes.bool,
+  loading: VueTypes.bool
+};
+
+export default {
+  name: 'SmSwitch',
+  __ANT_SWITCH: true,
+  defaultComponent: Switch,
+  mixins: [Theme, AntdRender],
+  inheritAttrs: false,
+  model: {
+    prop: 'checked',
+    event: 'change'
+  },
+  props: switchTypes,
+  computed: {
+    extralListeners() {
+      const vm = this;
+      return {
+        // 这里确保组件配合 `v-model` 的工作
+        'change.value': function(value) {
+          vm.$emit('change.value', value);
+        }
+      };
+    }
+  }
+};
+</script>

package/src/common/switch/index.js

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

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

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

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

package/src/common/switch/style/switch.scss

@@ -0,0 +1,20 @@
+@import '../../_utils/style/mixins/mixins.scss';
+@import '../../_utils/style/theme/theme.scss';
+
+@include b(switch) {
+  $prefix: &;
+
+  background-color: $switch-background;
+  &-loading-icon,
+  &:after {
+    background-color: $switch-after-bg;
+  }
+
+  @include e(checked, '-') {
+    background-color: $switch-color;
+  }
+
+  &-loading &-loading-icon {
+    color: $switch-loading-text-color;
+  }
+}

package/src/common/table/Column.vue

@@ -0,0 +1,18 @@
+<script lang="ts">
+import Column from 'ant-design-vue/es/table/Column';
+import { ColumnProps } from 'ant-design-vue/es/table/interface';
+import Theme from 'vue-iclient/src/common/_mixin/Theme';
+import AntdRender from 'vue-iclient/src/common/_mixin/AntdRender';
+
+export const tableColumnTypes = {
+  ...ColumnProps
+};
+
+export default {
+  name: 'SmTableColumn',
+  defaultComponent: Column,
+  mixins: [Theme, AntdRender],
+  inheritAttrs: false,
+  props: tableColumnTypes
+};
+</script>

package/src/common/table/ColumnGroup.vue

@@ -0,0 +1,19 @@
+<script lang="ts">
+import ColumnGroup from 'ant-design-vue/es/table/ColumnGroup';
+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 tableColumnGroupTypes = {
+  title: VueTypes.any
+};
+
+export default {
+  name: 'SmTableColumnGroup',
+  __ANT_TABLE_COLUMN_GROUP: true,
+  defaultComponent: ColumnGroup,
+  mixins: [Theme, AntdRender],
+  inheritAttrs: false,
+  props: tableColumnGroupTypes
+};
+</script>

package/src/common/table/Table.vue

@@ -0,0 +1,18 @@
+<script lang="ts">
+import Table from 'ant-design-vue/es/table';
+import { TableProps } from 'ant-design-vue/es/table/interface';
+import Theme from 'vue-iclient/src/common/_mixin/Theme';
+import AntdRender from 'vue-iclient/src/common/_mixin/AntdRender';
+
+export const tableTypes = {
+  ...TableProps
+};
+
+export default {
+  name: 'SmTable',
+  defaultComponent: Table,
+  mixins: [Theme, AntdRender],
+  inheritAttrs: false,
+  props: tableTypes
+};
+</script>

package/src/common/table/index.js

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

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

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

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

package/src/common/table/style/table.scss

@@ -0,0 +1,138 @@
+@import '../../_utils/style/mixins/mixins.scss';
+@import '../../_utils/style/theme/theme.scss';
+@import '../../input/style/mixin.scss';
+
+@include b(table) {
+  $table-prefix: &;
+  
+  &-thead > tr > th {
+    background: $table-header-bg;
+    // .#{$iconfont-css-prefix}-filter,
+    // #{$table-prefix}-filter-icon {
+    //   color: $table-header-icon-color;
+    // }
+    #{$table-prefix}-filter-selected.#{$iconfont-css-prefix} {
+      color: $primary-color;
+    }
+    #{$table-prefix}-column-sorter {
+      #{$table-prefix}-column-sorter-inner {
+        // color: $table-header-icon-color;
+        #{$table-prefix}-column-sorter-up,
+        #{$table-prefix}-column-sorter-down {
+          &.on {
+            color: $primary-color;
+          }
+        }
+      }
+    }
+    &#{$table-prefix}-column-has-actions {
+      &#{$table-prefix}-column-has-filters {
+        .#{$iconfont-css-prefix}-filter,
+        #{$table-prefix}-filter-icon {
+          &#{$table-prefix}-filter-open {
+            color: $text-color-secondary;
+            background: $table-header-filter-active-bg;
+          }
+        }
+        &:hover {
+          .#{$iconfont-css-prefix}-filter,
+          #{$table-prefix}-filter-icon {
+            &:hover {
+              color: $text-color-secondary;
+              background: $table-header-filter-active-bg;
+            }
+          }
+        }
+      }
+      &#{$table-prefix}-column-has-sorters {
+        &:hover {
+          background: $table-header-sort-active-bg;
+          .#{$iconfont-css-prefix}-filter,
+          #{$table-prefix}-filter-icon {
+            background: $table-header-sort-active-bg;
+          }
+        }
+        &:active {
+          #{$table-prefix}-column-sorter-up:not(.on),
+          #{$table-prefix}-column-sorter-down:not(.on) {
+            color: $text-color-secondary;
+          }
+        }
+      }
+    }
+  }
+
+  &-thead > tr,
+  &-tbody > tr {
+    &#{$table-prefix}-row-selected > td {
+      &#{$table-prefix}-column-sort {
+        background: $table-body-selected-sort-bg;
+      }
+    }
+    &:hover {
+      &#{$table-prefix}-row-selected > td {
+        background: $table-selected-row-hover-bg;
+        &#{$table-prefix}-column-sort {
+          background: $table-body-selected-sort-bg;
+        }
+      }
+    }
+  }
+
+  &-footer {
+    background: $table-footer-bg;
+    &::before {
+      background: $table-footer-bg;
+    }
+  }
+
+  &-tbody > tr#{$table-prefix}-row-selected td {
+    background: $table-selected-row-bg;
+  }
+
+  &-thead > tr > th#{$table-prefix}-column-sort {
+    background: $table-header-sort-bg;
+  }
+
+  &-header {
+    background: $table-header-bg;
+    overflow: hidden !important;
+  }
+
+  &-tbody > tr {
+    &:hover {
+      &#{$table-prefix}-row-selected > td {
+        background: $table-selected-row-hover-bg;
+      }
+    }
+  }
+
+  &-filter-dropdown {
+    .#{$ant-prefix}-dropdown-menu {
+      .#{$ant-prefix}-dropdown-submenu-contain-selected {
+        .#{$ant-prefix}-dropdown-menu-submenu-title::after {
+          color: $primary-color;
+        }
+      }
+    }
+  }
+
+  // &-selection {
+  //   .#{$iconfont-css-prefix}-down {
+  //     color: $table-header-icon-color; // #bfbfbf
+  //   }
+  //   &-menu {
+  //     .#{$ant-prefix}-action-down {
+  //       color: $table-header-icon-color;
+  //     }
+  //   }
+  // }
+
+  // tr&-expanded-row {
+  //   &,
+  //   &:hover {
+  //     background: $table-expanded-row-bg;
+  //   }
+  // }
+  
+}

package/src/common/table-popup/TablePopup.vue

@@ -0,0 +1,73 @@
+<template>
+  <div
+    :class="{ 'sm-component-table-popup': true, 'with-split-line': splitLine }"
+    :style="[tablePopupBgStyle, getTextColorStyle]"
+  >
+    <sm-table
+      class="sm-component-table-popup__table"
+      :data-source="data"
+      :columns="columns"
+      :rowKey="(record, index) => index"
+      :pagination="false"
+    />
+  </div>
+</template>
+<script>
+import Theme from 'vue-iclient/src/common/_mixin/Theme';
+import SmTable from 'vue-iclient/src/common/table/Table.vue';
+import { setPopupArrowStyle } from 'vue-iclient/src/common/_utils/util';
+
+export default {
+  name: 'SmTablePopup',
+  components: {
+    SmTable
+  },
+  mixins: [Theme],
+  props: {
+    data: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    columns: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    splitLine: {
+      type: Boolean,
+      default: true
+    }
+  },
+  watch: {
+    'collapseCardHeaderBgStyle.background'(next) {
+      this.setTheadStyle('background', next);
+    },
+    'tablePopupBgStyle.background'(next) {
+      setPopupArrowStyle(next);
+    },
+    'headingTextColorStyle.color'(next) {
+      this.setTheadStyle('color', next);
+    }
+  },
+  mounted() {
+    this.setTheadStyle('color', this.headingTextColorStyle.color);
+    this.setTheadStyle('background', this.collapseCardHeaderBgStyle.background);
+  },
+  methods: {
+    setTheadStyle(attr, value) {
+      if (!this.$el) {
+        return;
+      }
+      const thList = this.$el.querySelectorAll('tr > th');
+      if (thList) {
+        thList.forEach(item => {
+          item.style[attr] = value;
+        });
+      }
+    }
+  }
+};
+</script>