@supermapgis/vue-iclient-leaflet 11.2.0

package/src/common/time-slider/style/time-slider.scss

@@ -0,0 +1,147 @@
+@import '../../../common/_utils/style/mixins/mixins.scss';
+@import '../../_utils/style/theme/theme.scss';
+@import './mixin.scss';
+
+@include b(time-slider) {
+  width: 578px;
+  height: 80px;
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  cursor: pointer;
+  font-size: 12px;
+  color: $text-color;
+  .sm-play-control {
+    position: relative;
+    margin: 0;
+    padding: 0;
+    width: 24px;
+    height: 24px;
+    line-height: 24px;
+    text-align: center;
+    text-shadow: none;
+    border: none;
+    outline: none;
+    background: transparent;
+    cursor: pointer;
+  }
+  .sm-icon-play {
+    font-size: 24px;
+    outline: none;
+  }
+  .sm-progress-control-wrapper {
+    position: relative;
+    width: calc(100% - 36px);
+    margin-left: 12px;
+  }
+  .sm-progress-control {
+    @include flex(auto);
+    @include display-flex(center);
+    position: relative;
+    width: 100%;
+    border-radius: 3px;
+    box-sizing: border-box;
+    background: $slider-rail-background-color;
+    cursor: pointer;
+    -ms-touch-action: none;
+    touch-action: none;
+  }
+  .sm-progress-control::before {
+    content: '';
+    position: relative;
+    display: block;
+    width: 12px;
+    height: 12px;
+    box-sizing: border-box;
+    border: 2px solid $avatar-bg;
+    background: $primary-color;
+    border-radius: 50%;
+    z-index: 10;
+  }
+  .sm-progress-control:hover::before {
+    transform: scale(1.25);
+  }
+  .sm-progress-holder {
+    @include flex(auto);
+    @include transition(all 0.2s);
+    position: absolute;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    outline: none;
+    pointer-events: none;
+  }
+  .sm-load-progress {
+    position: absolute;
+    left: 0;
+    width: 100%;
+    border-radius: 3px;
+    outline: none;
+    z-index: 5;
+  }
+  .sm-play-progress {
+    position: absolute;
+    top: 0;
+    display: block;
+    height: 100%;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    border-radius: 3px;
+    outline: none;
+    touch-action: none;
+  }
+  .sm-time-node {
+    position: absolute;
+    top: 10px;
+    width: 100%;
+    height: 20px;
+    line-height: 20px;
+    user-select: none;
+    .sm-start-node {
+      position: absolute;
+      left: 0;
+    }
+    .sm-end-node {
+      position: absolute;
+      right: 0;
+    }
+  }
+  .sm-mouse-display {
+    position: absolute;
+    display: none;
+    height: 100%;
+    z-index: 1;
+    pointer-events: none;
+  }
+  .sm-progress-control:hover .sm-mouse-display {
+    display: inline-block;
+    white-space: nowrap;
+  }
+  .sm-time-tooltip {
+    position: relative;
+    left: -50%;
+    top: -50px;
+    display: flex;
+    justify-content: center;
+    height: 33px;
+    padding: 6px 8px;
+    border-radius: 4px;
+    font-size: 14px;
+    color: $tooltip-color;
+    background: $tooltip-bg;
+    box-shadow: 0px 2px 7px 0px $shadow-color;
+    visibility: hidden;
+    z-index: 1;
+    pointer-events: none;
+    user-select: none;
+  }
+  .sm-progress-holder:focus .sm-time-tooltip {
+    visibility: hidden;
+  }
+  .sm-progress-control:hover .sm-time-tooltip,
+  .sm-progress-control:hover .sm-progress-holder:focus .sm-time-tooltip {
+    visibility: visible;
+  }
+}

package/src/common/time-text/TimeText.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="sm-component-time-text" :style="[fontStyle, getBackgroundStyle, getTextColorStyle]">
+    <span>{{ time }}</span>
+  </div>
+</template>
+
+<script>
+import { getDateTime } from 'vue-iclient/src/common/_utils/util';
+import Theme from 'vue-iclient/src/common/_mixin/Theme';
+
+export default {
+  name: 'SmTimeText',
+  mixins: [Theme],
+  props: {
+    timeType: {
+      type: String,
+      default: 'date' // "date+second" "date+second+week"
+    },
+    fontStyle: {
+      type: Object
+    }
+  },
+  data() {
+    return {
+      time: '',
+      timeInterval: null
+    };
+  },
+  watch: {
+    timeType() {
+      this.initTime(this.timeType);
+    }
+  },
+  mounted() {
+    this.initTime(this.timeType);
+  },
+  destroyed() {
+    clearInterval(this.timeInterval);
+  },
+  methods: {
+    // 初始化
+    initTime(timeType) {
+      clearInterval(this.timeInterval);
+      this.time = getDateTime(timeType);
+      this.timeInterval = setInterval(() => {
+        this.time = getDateTime(timeType);
+      }, 1000);
+    }
+  }
+};
+</script>

package/src/common/time-text/index.js

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

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

package/src/common/time-text/style/time-text.scss

@@ -0,0 +1,14 @@
+@import '../../_utils/style/mixins/mixins.scss';
+@import '../../_utils/style/theme/theme.scss';
+
+@include b(time-text) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: $text-color;
+  background: $component-background;
+  & > span {
+    padding: 10px;
+    vertical-align: middle;
+  }
+}

package/src/common/tooltip/Tooltip.vue

@@ -0,0 +1,21 @@
+<script lang="ts">
+import Tooltip from 'ant-design-vue/es/tooltip/Tooltip';
+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 tooltipTypes = {
+  routes: VueTypes.array,
+  params: VueTypes.object,
+  separator: VueTypes.string,
+  itemRender: VueTypes.func
+};
+
+export default {
+  name: 'SmTooltip',
+  defaultComponent: Tooltip,
+  mixins: [Theme, AntdRender],
+  inheritAttrs: false,
+  props: tooltipTypes
+};
+</script>

package/src/common/tooltip/index.js

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

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

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

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

package/src/common/tooltip/style/tooltip.scss

@@ -0,0 +1,5 @@
+@import "../../_utils/style/mixins/mixins.scss";
+@import '../../_utils/style/theme/theme.scss';
+
+@include b (tooltip) {
+}

package/src/common/transfer/Transfer.vue

@@ -0,0 +1,19 @@
+<script lang="ts">
+import Transfer, { TransferProps } from 'ant-design-vue/es/transfer';
+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 transferTypes = {
+  ...TransferProps,
+  showSearch: VueTypes.bool
+};
+
+export default {
+  name: 'SmTransfer',
+  defaultComponent: Transfer,
+  mixins: [Theme, AntdRender],
+  inheritAttrs: false,
+  props: transferTypes
+};
+</script>

package/src/common/transfer/index.js

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

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

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

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

package/src/common/transfer/style/transfer.scss

@@ -0,0 +1,52 @@
+@import "../../_utils/style/mixins/mixins.scss";
+@import '../../_utils/style/theme/theme.scss';
+
+@include b (transfer) {
+  $prefix: &;
+
+  @include e(list, '-') {
+    &-search-action {
+      .#{$iconfont-css-prefix}:hover {
+        color: $text-color-secondary;
+      }
+    }
+
+    &-header {
+      color: $heading-color;
+      border-bottom-color: $border-color-base;
+    }
+
+    &-body {
+      background-color: $component-background;
+    }
+
+    &-content {
+      &-item:not(&-item-disabled):hover {
+        background-color: $transfer-item-hover-color;
+        .#{$ant-prefix}-checkbox-inner {
+          border-color: $hover-color;
+        }
+      }
+    }
+
+    &-footer {
+      border-top-color: $border-color-base;
+    }
+  }
+
+  @include e(customize-list, '-') {
+    $table-prefix-cls: #{$ant-prefix}-table;
+    .#{$table-prefix-cls}-wrapper {
+      .#{$table-prefix-cls}-small {
+        > .#{$table-prefix-cls}-content {
+          > .#{$table-prefix-cls}-body > table > .#{$table-prefix-cls}-thead > tr > th {
+            background: $table-header-bg;
+          }
+          .#{$table-prefix-cls}-row:last-child td {
+            border-bottom-color: $border-color-base;
+          }
+        }
+      }
+    }
+  }
+}

package/src/common/tree/DirectoryTree.vue

@@ -0,0 +1,32 @@
+<script lang="ts">
+import DirectoryTree from 'ant-design-vue/es/tree/DirectoryTree';
+import Theme from 'vue-iclient/src/common/_mixin/Theme';
+import AntdRender from 'vue-iclient/src/common/_mixin/AntdRender';
+import VueTypes from 'vue-iclient/src/common/_utils/vue-types';
+
+export const directoryTreeTypes = {
+  expandAction: VueTypes.oneOf(['false', 'click', 'dblclick']).def('click')
+};
+
+export default {
+  name: 'SmDirectoryTree',
+  defaultComponent: DirectoryTree,
+  mixins: [Theme, AntdRender],
+  inheritAttrs: false,
+  model: {
+    prop: 'checkedKeys',
+    event: 'check'
+  },
+  props: directoryTreeTypes,
+  computed: {
+    extralListeners() {
+      const vm = this;
+      return {
+        check: function () {
+          vm.$emit('check', ...arguments);
+        }
+      };
+    }
+  }
+};
+</script>

package/src/common/tree/Tree.vue

@@ -0,0 +1,32 @@
+<script lang="ts">
+import Tree from 'ant-design-vue/es/tree';
+import { TreeProps } from 'ant-design-vue/es/tree/Tree';
+import Theme from 'vue-iclient/src/common/_mixin/Theme';
+import AntdRender from 'vue-iclient/src/common/_mixin/AntdRender';
+
+export const treeTypes = {
+  ...TreeProps()
+};
+
+export default {
+  name: 'SmTree',
+  defaultComponent: Tree,
+  mixins: [Theme, AntdRender],
+  inheritAttrs: false,
+  model: {
+    prop: 'checkedKeys',
+    event: 'check'
+  },
+  props: treeTypes,
+  computed: {
+    extralListeners() {
+      const vm = this;
+      return {
+        check: function () {
+          vm.$emit('check', ...arguments);
+        }
+      };
+    }
+  }
+};
+</script>

package/src/common/tree/TreeNode.vue

@@ -0,0 +1,49 @@
+<script lang="ts">
+import Tree from 'ant-design-vue/es/tree';
+import Theme from 'vue-iclient/src/common/_mixin/Theme';
+import AntdRender from 'vue-iclient/src/common/_mixin/AntdRender';
+import VueTypes from 'vue-iclient/src/common/_utils/vue-types';
+
+export const treeNodeTypes = {
+  eventKey: VueTypes.oneOfType([VueTypes.string, VueTypes.number]), // Pass by parent `cloneElement`
+  prefixCls: VueTypes.string,
+  // className: VueTypes.string,
+  root: VueTypes.object,
+  // onSelect: VueTypes.func,
+
+  // By parent
+  expanded: VueTypes.bool,
+  selected: VueTypes.bool,
+  checked: VueTypes.bool,
+  loaded: VueTypes.bool,
+  loading: VueTypes.bool,
+  halfChecked: VueTypes.bool,
+  title: VueTypes.any,
+  pos: VueTypes.string,
+  dragOver: VueTypes.bool,
+  dragOverGapTop: VueTypes.bool,
+  dragOverGapBottom: VueTypes.bool,
+
+  // By user
+  isLeaf: VueTypes.bool,
+  checkable: VueTypes.bool,
+  selectable: VueTypes.bool,
+  disabled: VueTypes.bool,
+  disableCheckbox: VueTypes.bool,
+  icon: VueTypes.any,
+  dataRef: VueTypes.object,
+  switcherIcon: VueTypes.any,
+  label: VueTypes.any,
+  value: VueTypes.any
+};
+
+export default {
+  name: 'SmTreeNode',
+  __ANT_TREE_NODE: true,
+  isTreeNode: 1,
+  defaultComponent: Tree.TreeNode,
+  mixins: [Theme, AntdRender],
+  inheritAttrs: false,
+  props: treeNodeTypes
+};
+</script>

package/src/common/tree/index.js

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

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

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

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

package/src/common/tree/style/tree.scss

@@ -0,0 +1,16 @@
+@import '../../_utils/style/mixins/mixins.scss';
+@import '../../_utils/style/theme/theme.scss';
+
+@include b(tree) {
+  $tree-prefix: &;
+  @at-root {
+    &#{$tree-prefix}-directory > li span#{$tree-prefix}-node-content-wrapper:hover::before,
+    &#{$tree-prefix}-directory &-child-tree > li span#{$tree-prefix}-node-content-wrapper:hover::before {
+      background: $select-item-hover-bg;
+    }
+  }
+  &.sm-component-tree-show-line li span.sm-component-tree-switcher {
+    color: $text-color
+  }
+}
+

package/src/common/tree-select/TreeSelect.vue

@@ -0,0 +1,43 @@
+<script lang="ts">
+import TreeSelect, { TreeSelectProps } from 'ant-design-vue/es/tree-select';
+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 treeSelectTypes = {
+  ...TreeSelectProps(),
+  size: VueTypes.oneOf(['small', 'large', 'default', 'middle'])
+};
+
+export default {
+  name: 'SmTreeSelect',
+  defaultComponent: TreeSelect,
+  mixins: [Theme, AntdRender],
+  inheritAttrs: false,
+  model: {
+    prop: 'checkedKeys',
+    event: 'check'
+  },
+  props: treeSelectTypes,
+  computed: {
+    extralListeners() {
+      const vm = this;
+      return {
+        check: function () {
+          vm.$emit('check', ...arguments);
+        }
+      };
+    },
+    extralProps() {
+      return {
+        size: this.size === 'middle' ? undefined : this.size
+      };
+    },
+    componentClass() {
+      return {
+        'sm-component-select-md': this.size === 'middle'
+      };
+    }
+  }
+};
+</script>

package/src/common/tree-select/TreeSelectNode.vue

@@ -0,0 +1,49 @@
+<script lang="ts">
+import TreeSelect from 'ant-design-vue/es/tree-select';
+import Theme from 'vue-iclient/src/common/_mixin/Theme';
+import AntdRender from 'vue-iclient/src/common/_mixin/AntdRender';
+import VueTypes from 'vue-iclient/src/common/_utils/vue-types';
+
+export const treeSelectNodeTypes = {
+  eventKey: VueTypes.oneOfType([VueTypes.string, VueTypes.number]), // Pass by parent `cloneElement`
+  prefixCls: VueTypes.string,
+  // className: VueTypes.string,
+  root: VueTypes.object,
+  // onSelect: VueTypes.func,
+
+  // By parent
+  expanded: VueTypes.bool,
+  selected: VueTypes.bool,
+  checked: VueTypes.bool,
+  loaded: VueTypes.bool,
+  loading: VueTypes.bool,
+  halfChecked: VueTypes.bool,
+  title: VueTypes.any,
+  pos: VueTypes.string,
+  dragOver: VueTypes.bool,
+  dragOverGapTop: VueTypes.bool,
+  dragOverGapBottom: VueTypes.bool,
+
+  // By user
+  isLeaf: VueTypes.bool,
+  checkable: VueTypes.bool,
+  selectable: VueTypes.bool,
+  disabled: VueTypes.bool,
+  disableCheckbox: VueTypes.bool,
+  icon: VueTypes.any,
+  dataRef: VueTypes.object,
+  switcherIcon: VueTypes.any,
+  label: VueTypes.any,
+  value: VueTypes.any
+};
+
+export default {
+  name: 'SmTreeSelectNode',
+  defaultComponent: TreeSelect.TreeNode,
+  mixins: [Theme, AntdRender],
+  inheritAttrs: false,
+  __ANT_TREE_NODE: true,
+  isTreeNode: 1,
+  props: treeSelectNodeTypes
+};
+</script>

package/src/common/tree-select/index.js

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

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

package/src/common/tree-select/style/index.less

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