@supermapgis/vue-iclient-leaflet 11.2.0

package/src/common/color-picker/ColorPicker.vue

@@ -0,0 +1,106 @@
+<template>
+  <div ref="colorpicker" class="sm-component-colorpicker">
+    <div class="sm-component-colorpicker__current" @click="togglePicker">
+      <div class="current-color" :style="`background-color: ${colorValue}`"></div>
+      <i v-if="colorValue && deleteIcon" class="sm-components-icon-close delete-icon" @click.stop="deleteColor" />
+    </div>
+    <chrome-picker v-show="displayPicker" :value="colors" @input="updateFromPicker" />
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { Component, Prop, Watch, Emit } from 'vue-property-decorator';
+import { Chrome } from 'vue-color';
+
+@Component({
+  name: 'SmColorPicker',
+  components: {
+    'chrome-picker': Chrome
+  },
+  model: {
+    prop: 'value',
+    event: 'change'
+  }
+})
+export default class ColorPicker extends Vue {
+  colors: any = '';
+  colorValue: string = '';
+  displayPicker: boolean = false;
+
+  @Prop({ default: '' }) value: string;
+  @Prop({ default: true }) deleteIcon: boolean;
+
+  @Watch('value')
+  valueChanged() {
+    if (this.value !== this.colorValue) {
+      this.setColor(this.value);
+    }
+  }
+
+  @Emit()
+  change() {
+    return this.colorValue;
+  }
+
+  created() {
+    this.setColor(this.value);
+    document.addEventListener('click', this.documentClick);
+  }
+
+  beforeDestroy() {
+    document.removeEventListener('click', this.documentClick);
+  }
+
+  setColor(color: string = '') {
+    this.updateColors(color);
+    this.colorValue = color;
+  }
+
+  updateColors(color: any) {
+    if (/^#.+/.test(color)) {
+      this.colors = {
+        hex: color
+      };
+    } else if (/^rgba.+/.test(color)) {
+      const rgba = color.replace(/(?:^rgba?)(?:\(|\s+|\)$)/g, '').split(',');
+      const hex = `#${((1 << 24) + (parseInt(rgba[0]) << 16) + (parseInt(rgba[1]) << 8) + parseInt(rgba[2]))
+        .toString(16)
+        .slice(1)}`;
+      this.colors = {
+        hex,
+        a: rgba[3]
+      };
+    }
+  }
+
+  togglePicker() {
+    this.displayPicker = !this.displayPicker;
+  }
+
+  updateFromPicker(color) {
+    this.colors = color;
+    if (color.rgba.a === 1) {
+      this.colorValue = color.hex;
+    } else {
+      this.colorValue = `rgba(${color.rgba.r}, ${color.rgba.g}, ${color.rgba.b}, ${color.rgba.a})`;
+    }
+    this.change();
+  }
+
+  deleteColor() {
+    this.colorValue = '';
+    this.colors = '';
+    this.change();
+  }
+
+  documentClick(e) {
+    // @ts-ignore
+    const el: Element = this.$refs.colorpicker;
+    const { target } = e;
+    if (this.displayPicker && el && el !== target && !el.contains(target)) {
+      this.togglePicker();
+    }
+  }
+}
+</script>

package/src/common/color-picker/index.js

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

package/src/common/color-picker/style/color-picker.scss

@@ -0,0 +1,37 @@
+@import '../../_utils/style/mixins/mixins.scss';
+@import '../../_utils/style/theme/theme.scss';
+
+@include b(colorpicker) {
+  height: 32px;
+  border-radius: 4px;
+  border: 1px solid $border-color-base;
+  width: 230px;
+  background: $component-background;
+  @include e(current) {
+    height: 100%;
+    padding: 0 15px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    cursor: pointer;
+    .current-color {
+      height: 8px;
+      flex: 1;
+    }
+    .delete-icon {
+      position: absolute;
+      right: 0;
+      top: 0;
+      color: $text-color-secondary;
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+  .vc-chrome {
+    width: 100%;
+    position: relative;
+    z-index: 10;
+  }
+}

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

package/src/common/config-provider/ConfigProvider.vue

@@ -0,0 +1,31 @@
+<script lang="ts">
+import ConfigProvider from 'ant-design-vue/es/config-provider';
+import { CreateElement } from 'vue';
+import { getComponentFromProp } from 'ant-design-vue/es/_util/props-util';
+import defaultRenderEmpty from 'vue-iclient/src/common/empty/RenderEmpty';
+
+export default {
+  name: 'SmConfigProvider',
+  mixins: [ConfigProvider],
+  methods: {
+    renderEmptyComponent: function renderEmptyComponent(h: CreateElement, name: string) {
+      const renderEmpty = getComponentFromProp(this, 'renderEmpty', {}, false) || defaultRenderEmpty;
+      return renderEmpty(h, name);
+    },
+    getPrefixCls: function getPrefixCls(suffixCls, customizePrefixCls) {
+      const _$props$prefixCls = this.$props.prefixCls;
+      const prefixCls = _$props$prefixCls === undefined ? 'sm-component' : _$props$prefixCls;
+      if (customizePrefixCls) return customizePrefixCls;
+      return suffixCls ? prefixCls + '-' + suffixCls : prefixCls;
+    }
+  }
+};
+
+export const ConfigConsumerProps = {
+  getPrefixCls: function getPrefixCls(suffixCls, customizePrefixCls) {
+    if (customizePrefixCls) return customizePrefixCls;
+    return 'sm-component-' + suffixCls;
+  },
+  renderEmpty: defaultRenderEmpty
+};
+</script>

package/src/common/config-provider/index.js

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

package/src/common/date-picker/BaseMixin.vue

@@ -0,0 +1,23 @@
+<script lang="ts">
+import Theme from 'vue-iclient/src/common/_mixin/Theme';
+import AntdRender from 'vue-iclient/src/common/_mixin/AntdRender';
+
+export default {
+  mixins: [Theme, AntdRender],
+  inheritAttrs: false,
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+  computed: {
+    extralListeners() {
+      const vm = this;
+      return {
+        change: function(value) {
+          vm.$emit('change', value);
+        }
+      };
+    }
+  }
+};
+</script>

package/src/common/date-picker/DatePicker.vue

@@ -0,0 +1,20 @@
+<script lang="ts">
+import DatePicker from 'ant-design-vue/es/date-picker';
+import { DatePickerProps } from 'ant-design-vue/es/date-picker/interface';
+import Base from './BaseMixin.vue';
+
+export const datePickerTypes = {
+  ...DatePickerProps(),
+  align: {
+    type: Object,
+    default: () => ({ points: ['tl', 'bl'], offset: [0, 4] })
+  }
+};
+
+export default {
+  name: 'SmDatePicker',
+  defaultComponent: DatePicker,
+  mixins: [Base],
+  props: datePickerTypes
+};
+</script>

package/src/common/date-picker/MonthPicker.vue

@@ -0,0 +1,20 @@
+<script lang="ts">
+import DatePicker from 'ant-design-vue/es/date-picker';
+import { MonthPickerProps } from 'ant-design-vue/es/date-picker/interface';
+import Base from './BaseMixin.vue';
+
+export const monthPickerTypes = {
+  ...MonthPickerProps(),
+  align: {
+    type: Object,
+    default: () => ({ points: ['tl', 'bl'], offset: [0, 4] })
+  }
+};
+
+export default {
+  name: 'SmMonthPicker',
+  defaultComponent: DatePicker.MonthPicker,
+  mixins: [Base],
+  props: monthPickerTypes
+};
+</script>

package/src/common/date-picker/RangePicker.vue

@@ -0,0 +1,20 @@
+<script lang="ts">
+import DatePicker from 'ant-design-vue/es/date-picker';
+import { RangePickerProps } from 'ant-design-vue/es/date-picker/interface';
+import Base from './BaseMixin.vue';
+
+export const rangePickerTypes = {
+  ...RangePickerProps(),
+  align: {
+    type: Object,
+    default: () => ({ points: ['tl', 'bl'], offset: [0, 4] })
+  }
+};
+
+export default {
+  name: 'SmRangePicker',
+  defaultComponent: DatePicker.RangePicker,
+  mixins: [Base],
+  props: rangePickerTypes
+};
+</script>

package/src/common/date-picker/WeekPicker.vue

@@ -0,0 +1,20 @@
+<script lang="ts">
+import DatePicker from 'ant-design-vue/es/date-picker';
+import { WeekPickerProps } from 'ant-design-vue/es/date-picker/interface';
+import Base from './BaseMixin.vue';
+
+export const weekPickerTypes = {
+  ...WeekPickerProps(),
+  align: {
+    type: Object,
+    default: () => ({ points: ['tl', 'bl'], offset: [0, 4] })
+  }
+};
+
+export default {
+  name: 'SmWeekPicker',
+  defaultComponent: DatePicker.WeekPicker,
+  mixins: [Base],
+  props: weekPickerTypes
+};
+</script>

package/src/common/date-picker/index.js

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

package/src/common/date-picker/style/date-picker.scss

@@ -0,0 +1,290 @@
+@import '../../_utils/style/mixins/mixins.scss';
+@import '../../_utils/style/theme/theme.scss';
+@import '../../button/style/mixin.scss';
+@import 'mixin.scss';
+
+@include b(calendar-picker) {
+  $calendar-picker-prefix: &;
+  &-icon {
+    color: $input-icon-color;
+  }
+  &:hover {
+    #{$calendar-picker-prefix}-clear + #{$calendar-picker-prefix}-icon {
+      opacity: 0;
+    }
+  }
+
+  @include e(clear, '-') {
+    &:hover {
+      color: $text-color-secondary;
+    }
+  }
+}
+
+@include b(calendar) {
+  $prefix: &;
+
+  border-radius: 2px;
+  background-color: $select-dropdown-bg;
+  border: none;
+
+  @include e(panel, '-') {
+    #{$prefix}-input-wrap {
+      display: none;
+    }
+  }
+
+  @include e(input, '-') {
+    background: $select-dropdown-bg;
+  }
+
+  @include e(header, '-') {
+    border-color: $border-color-secondary;
+    @include calendarPanelHeader($prefix);
+  }
+
+  @include e(date, '-') {
+    &:hover {
+      background: $date-item-hover-bg;
+    }
+    &:active {
+      background: $click-color;
+    }
+    &:focus {
+      outline: 0;
+    }
+  }
+
+  @include e(selected-day, '-') {
+    #{$prefix}-date {
+      background: $primary-color;
+      color: #fff;
+    }
+  }
+
+  @include e(today, '-') {
+    @include today($prefix);
+  }
+
+  @include e(disabled-cell, '-') {
+    #{$prefix}-date {
+      background: $disabled-bg;
+      border-color: transparent;
+      color: $disabled-color;
+      &:hover {
+        background: $disabled-bg;
+      }
+    }
+
+    &#{$prefix}-selected-day {
+      #{$prefix}-date {
+        &::before {
+          background: transparent;
+        }
+      }
+    }
+  }
+
+  @include e(footer, '-') {
+    border-color: $border-color-secondary;
+    &-btn {
+      padding-right: 10px;
+      a {
+        color: $primary-color;
+        &:hover {
+          color: $hover-color;
+        }
+        &:active {
+          color: $click-color;
+        }
+      }
+    }
+  }
+  & #{&}-clear-btn {
+    &:hover::after {
+      color: $text-color-secondary;
+    }
+  }
+  & #{&}-ok-btn {
+    @include button-variant-primary(
+      $btn-primary-color,
+      $primary-5,
+      $primary-5,
+      $btn-primary-color,
+      $primary-7,
+      $primary-7
+    );
+    @include button-disabled();
+  }
+
+  @include e(today-btn, '-') {
+    &#{&}-disabled {
+      &:hover,
+      &:focus,
+      &:active {
+        @include disabled($background: transparent);
+      }
+    }
+  }
+
+  @include e(range, '-') {
+    #{$prefix}-body, #{$prefix}-month-panel-body, #{$prefix}-year-panel-body, #{$prefix}-decade-panel-body {
+      border-color: $border-color-secondary;
+    }
+    &-picker-separator {
+      color: $text-color-secondary;
+    }
+    &-middle {
+      // color: $text-color-secondary;
+      display: none;
+    }
+    // #{$prefix}-today
+    //   :not(#{$prefix}-disabled-cell)
+    //   :not(#{$prefix}-last-month-cell)
+    //   :not(#{$prefix}-next-month-btn-day) {
+    //   #{$prefix}-date {
+    //     background: transparent;
+    //   }
+    // }
+
+    #{$prefix}-selected-start-date,
+    #{$prefix}-selected-end-date {
+      #{$prefix}-date {
+        background: $primary-color;
+        &:hover {
+          background: $primary-color;
+        }
+      }
+    }
+
+    #{$prefix}-input,
+    #{$prefix}-time-picker-input {
+      background: $select-dropdown-bg;
+    }
+
+    #{$prefix}-in-range-cell {
+      &::before {
+        background: $selected-color;
+      }
+    }
+
+    &#{$prefix}-time {
+      #{$prefix}-time-picker {
+        top: 40px;
+        &-select {
+          border-color: $border-color-secondary;
+        }
+        #{$prefix}-time-picker-panel {
+          margin-top: -40px;
+          #{$prefix}-time-picker-inner {
+            border-color: $border-color-secondary;
+          }
+        }
+      }
+      #{$prefix}-time-picker-combobox {
+        border-color: $border-color-secondary;
+        background: $select-dropdown-bg;
+      }
+    }
+  }
+
+  @include e(time, '-') {
+    &-picker {
+      background-color: $select-dropdown-bg;
+
+      &-inner {
+        background-color: $select-dropdown-bg;
+      }
+
+      &-select {
+        $prefix-time-picker-select: &;
+
+        li {
+          &:hover {
+            background: $time-picker-item-hover-bg;
+          }
+          &:focus {
+            background: $click-color;
+          }
+          &#{$prefix-time-picker-select}-option-selected {
+            background: $selected-color;
+          }
+          &#{$prefix-time-picker-select}-option-disabled {
+            @include disabled($background: transparent);
+          }
+        }
+      }
+    }
+  }
+  
+  @include e(month-panel, '-') {
+    $prefix-month-panel: &;
+    @include panel-item(&, month);
+
+    &-header {
+      border-color: $border-color-secondary;
+    }
+    &-cell {
+      &-disabled {
+        #{$prefix-month-panel}-month {
+          &,
+          &:hover {
+            background: $disabled-bg;
+          }
+        }
+      }
+    }
+
+    &-current-cell {
+      #{$prefix-month-panel}-month {
+        border: 1px solid $primary-color;
+        color: $primary-color;
+        background: transparent;
+      }
+    }
+  }
+
+  @include e(year-panel, '-') {
+    @include panel-item(&, year);
+  }
+
+  @include e(decade-panel, '-') {
+    @include panel-item(&, decade);
+  }
+
+  @include e(week-number, '-') {
+    #{$prefix}-body {
+      tr {
+        &:hover {
+          background: $selected-color;
+        }
+        &#{$prefix}-active-week {
+          background: $selected-color;
+          font-weight: normal;
+        }
+        #{$prefix}-selected-day {
+          &:hover {
+            #{$prefix}-date {
+              background: $selected-color;
+              color: #fff;
+            }
+          }
+        }
+        #{$prefix}-selected-date {
+          #{$prefix}-selected-day {
+            &,
+            &:hover {
+              #{$prefix}-date {
+                background: $primary-color;
+                color: #fff;
+              }
+            }
+          }
+          &#{$prefix}-today {
+            @include today($prefix);
+          }
+        }
+      }
+    }
+  }
+}

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

package/src/common/date-picker/style/index.less

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

package/src/common/date-picker/style/mixin.scss

@@ -0,0 +1,75 @@
+@mixin calendarPanelHeader($prefix) {
+  #{$prefix}-prev-century-btn,
+  #{$prefix}-next-century-btn,
+  #{$prefix}-prev-decade-btn,
+  #{$prefix}-next-decade-btn,
+  #{$prefix}-prev-month-btn,
+  #{$prefix}-next-month-btn,
+  #{$prefix}-prev-year-btn,
+  #{$prefix}-next-year-btn {
+    color: $text-color-secondary;
+  }
+}
+
+@mixin disabled($color: $btn-disable-color, $background: $btn-disable-bg, $border: $btn-disable-border) {
+  color: $color;
+  background-color: $background;
+  border-color: $border;
+}
+
+@mixin button-disabled($color: $btn-disable-color, $background: $btn-disable-bg, $border: $btn-disable-border) {
+  &-disabled,
+  &.disabled,
+  &[disabled] {
+    &,
+    &:hover,
+    &:focus,
+    &:active,
+    &.active {
+      @include disabled($color, $background, $border);
+    }
+  }
+}
+
+@mixin panel-item($prefix-panel, $panel-name) {
+  background: $select-dropdown-bg;
+
+  &-header {
+    @include calendarPanelHeader($prefix-panel);
+  }
+
+  &-selected-cell {
+    #{$prefix-panel}-#{$panel-name} {
+      background: $primary-color;
+
+      &:hover {
+        background: $primary-color;
+      }
+    }
+  }
+
+  &-#{$panel-name} {
+    &:hover {
+      background: $selected-color;
+      border-color: transparent;
+    }
+    @at-root {
+      a#{&}:hover {
+        color: #fff;
+      }
+    }
+  }
+}
+
+@mixin today($prefix) {
+  #{$prefix}-date {
+    color: $primary-color;
+    border-color: $primary-color;
+    background: transparent;
+    &:hover {
+      background: $selected-color;
+      border-color: transparent;
+      color: #fff;
+    }
+  }
+}