@supermapgis/vue-iclient-leaflet 11.2.0

package/src/common/select/style/select.scss

@@ -0,0 +1,140 @@
+@import '../../_utils/style/mixins/mixins.scss';
+@import '../../_utils/style/theme/theme.scss';
+@import '../../input/style/mixin.scss';
+
+@include b(select) {
+  $prefix: &;
+  &:not(&-disabled) {
+    color: $text-color-active;
+  }
+  
+  @include e(md, '-') {
+    #{$prefix}-selection--single {
+      height: $input-height-md;
+    }
+    #{$prefix}-selection--multiple {
+      min-height: $input-height-md;
+      #{$prefix}-selection__rendered {
+        li {
+          height: $input-height-md - 8px;
+          line-height: $input-height-md - 10px;
+        }
+      }
+      #{$prefix}-selection__clear,
+      #{$prefix}-arrow {
+        top: calc(#{$input-height-md} / 2);
+      }
+    }
+    #{$prefix}-selection__rendered {
+      line-height: $input-height-md - 2px;
+    }
+  }
+
+  @include e(selection, '-') {
+    $prefix-selection: &;
+    #{$prefix}-focused &,
+    &:focus,
+    &:active {
+      @include focus-color($primary-5, $primary-shadow-color);
+    }
+
+    &:hover {
+      #{$prefix-selection}__clear + #{$prefix}-arrow {
+        opacity: 0;
+      }
+    }
+
+    &__clear {
+      &:hover {
+        color: $text-color-secondary;
+      }
+    }
+    &--multiple {
+      #{$prefix-selection}__choice {
+        background-color: $tag-default-bg;
+        &__remove {
+          color: $text-color-secondary;
+        }
+      }
+    }
+  }
+
+  @include e(open, '-') {
+    #{$prefix}-selection {
+      @include focus-color($primary-5, $primary-shadow-color);
+    }
+  }
+
+  @include e(disabled, '-') {
+    #{$prefix}-selection {
+      &,
+      &:hover,
+      &:focus,
+      &:active {
+        border-color: $disabled-border-color;
+      }
+
+      &--multiple {
+        #{$prefix}-selection__choice {
+          color: $disabled-color;
+          background: $disabled-bg;
+        }
+      }
+    }
+
+    #{$prefix}-arrow {
+      color: $disabled-icon-color;
+    }
+  }
+  @include e(readonly, '-') {
+    color: $text-color;
+  }
+
+  @include e(dropdown, '-') {
+    $prefix-dropdown: &;
+    &-menu {
+      &-item-group-title {
+        color: $text-color-secondary;
+      }
+      &-item {
+        color: $text-color-active;
+        &:hover:not(&-disabled) {
+          background-color: $select-item-hover-bg;
+        }
+        &-selected {
+          font-weight: normal;
+          background-color: $select-item-selected-bg;
+          color: $select-item-selected-color;
+        }
+        .#{$ant-prefix}-empty {
+          background-color: transparent;
+          color: inherit;
+        }
+      }
+    }
+    &#{$prefix-dropdown}--multiple {
+      #{$prefix-dropdown}-menu-item {
+        &:hover {
+          #{$prefix}-selected-icon {
+            color: $icon-color-hover;
+          }
+        }
+        &-selected #{$prefix}-selected-icon,
+        &-selected:hover #{$prefix}-selected-icon {
+          color: $primary-color;
+        }
+      }
+    }
+  }
+
+  @include e(arrow, '-') {
+    color: $text-color-secondary;
+  }
+
+  @include e(not-found, '-') {
+    .#{$ant-prefix}-empty {
+      background-color: transparent;
+      color: inherit;
+    }
+  }
+}

package/src/common/slider/Slider.vue

@@ -0,0 +1,31 @@
+<script lang="ts">
+import Slider, { SliderProps } from 'ant-design-vue/es/slider/index';
+import Theme from 'vue-iclient/src/common/_mixin/Theme';
+import AntdRender from 'vue-iclient/src/common/_mixin/AntdRender';
+
+export const sliderTypes = {
+  ...SliderProps()
+};
+
+export default {
+  name: 'SmSlider',
+  defaultComponent: Slider,
+  mixins: [Theme, AntdRender],
+  inheritAttrs: false,
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+  props: sliderTypes,
+  computed: {
+    extralListeners() {
+      const vm = this;
+      return {
+        change: function (value) {
+          vm.$emit('change', value);
+        }
+      };
+    }
+  }
+};
+</script>

package/src/common/slider/index.js

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

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

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

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

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

@@ -0,0 +1,8 @@
+@import '../../_utils/style/mixins/mixins.scss';
+@import '../../_utils/style/theme/theme.scss';
+
+@include b(slider) {
+    &-rail {
+        background-color: $slider-rail-background-color;
+    }
+}

package/src/common/slideshow/Slideshow.vue

@@ -0,0 +1,354 @@
+<script lang="ts">
+import type { CreateElement, VNode } from 'vue';
+import Theme from 'vue-iclient/src/common/_mixin/Theme';
+import Swiper from './Swiper';
+import BaseCard from 'vue-iclient/src/common/_mixin/Card';
+import { getSlotOptions, filterEmpty } from 'ant-design-vue/es/_util/props-util';
+import { Component, Prop, Mixins, Watch } from 'vue-property-decorator';
+import isequal from 'lodash.isequal';
+import debounce from 'lodash.debounce';
+import { addListener, removeListener } from 'resize-detector';
+import 'swiper/swiper-bundle.min.css';
+
+interface swiperOptionsType {
+  initialSlide: Number;
+  direction: String;
+  speed: Number;
+  loopedSlides: Number;
+  loop: Boolean;
+  grabCursor: Boolean;
+  mousewheel: Boolean;
+  keyboard: Boolean;
+  autoplay: Boolean | Object;
+  effect: String;
+  navigation?: Object;
+  pagination?: Object;
+  scrollbar?: Object;
+  observer: Boolean;
+  observeParents: Boolean;
+  observeSlideChildren: Boolean;
+}
+
+@Component({
+  name: 'SmSlideshow',
+  model: {
+    prop: 'activeIndex',
+    event: 'indexChange'
+  }
+})
+class Slideshow extends Mixins(Theme, BaseCard) {
+  __resizeHandler: Function;
+  swiper: any;
+  isRefresh: boolean = true;
+  manualUpdateProps: string[] = [
+    'speed',
+    'loop',
+    'grabCursor',
+    'scrollbar',
+    'effect',
+    'navigation',
+    'pagination',
+    'autoplay',
+    'direction'
+  ];
+
+  activeIndexData: number = 0;
+
+  // 当 loop 为 true && effect 为 cube, 幻灯片页数等于3会出现重叠。
+  loopedSlides: number = 3;
+
+  @Prop() activeIndex: number;
+  @Prop({ default: 0 }) defaultActiveIndex: number;
+  @Prop({ default: 'horizontal' }) direction: string;
+  @Prop({ default: 300 }) speed: number;
+  @Prop({ default: true }) loop: boolean;
+  @Prop({ default: false }) mousewheel: boolean;
+  @Prop({ default: false }) keyboard: boolean;
+  @Prop() navigation: Object;
+  @Prop() pagination: Object;
+  @Prop() scrollbar: Object;
+  @Prop({ default: true }) grabCursor: boolean;
+  @Prop() autoplay: boolean | Object;
+  @Prop({ default: true }) autoresize: boolean;
+  @Prop({ default: 'slide' }) effect: string; // slide cube coverflow flip
+  @Prop({ default: 'sm-components-icon-swipe' }) iconClass: string;
+  @Prop({
+    default() {
+      return this.$t('slideshow.title');
+    }
+  })
+  headerName: string;
+
+  get autoplayParameter() {
+    if (typeof this.autoplay === 'object') {
+      return { ...this.autoplay, disableOnInteraction: false };
+    } else {
+      return this.autoplay;
+    }
+  }
+
+  get swiperOptions() {
+    let options: swiperOptionsType = {
+      initialSlide: this.defaultActiveIndex,
+      direction: this.direction,
+      speed: this.speed,
+      loop: this.loop,
+      loopedSlides: this.loopedSlides,
+      grabCursor: this.grabCursor,
+      mousewheel: this.mousewheel,
+      keyboard: this.keyboard,
+      autoplay: this.autoplayParameter,
+      effect: this.effect,
+      observer: true,
+      observeParents: true,
+      observeSlideChildren: true
+    };
+    this.navigation && (options.navigation = this.navigation);
+    this.pagination && (options.pagination = this.pagination);
+    this.scrollbar && (options.scrollbar = this.scrollbar);
+    return options;
+  }
+
+  @Watch('activeIndex')
+  activeIndexChanged(newIndex: number) {
+    const childrenLength = this._getChildrenLength();
+    if (newIndex > childrenLength - 1) {
+      console.error('ActiveIndex is greater than the total number of slides');
+      return;
+    }
+    this._activeIndexChangedHandler(newIndex || 0);
+  }
+
+  @Watch('mousewheel')
+  mousewheelChanged(mousewheel) {
+    mousewheel ? this.swiper.mousewheel.enable() : this.swiper.mousewheel.disable();
+  }
+
+  @Watch('keyboard')
+  keyboardChanged(keyboard) {
+    keyboard ? this.swiper.keyboard.enable() : this.swiper.keyboard.disable();
+  }
+
+  @Watch('autoresize')
+  autoResizeChanged() {
+    this.autoResizeHandler();
+  }
+
+  created() {
+    this.activeIndexData = this.defaultActiveIndex || this.activeIndex;
+  }
+
+  mounted() {
+    // @ts-ignore
+    this.swiper = this.$refs.mySwiper.$swiper;
+    this.watchOptions();
+    this.autoResizeHandler();
+  }
+
+  beforeDestroy() {
+    // @ts-ignore
+    removeListener(this.$el, this.__resizeHandler);
+  }
+
+  slideChange() {
+    let changeParameter = {
+      progress: this.swiper.progress,
+      activeIndex: this.swiper.activeIndex,
+      realIndex: this.swiper.realIndex,
+      previousIndex: this.swiper.previousIndex
+    };
+    this.$emit('change', changeParameter);
+    this.$emit('indexChange', this.swiper.realIndex);
+    this.activeIndexData = this.swiper.realIndex;
+  }
+
+  _activeIndexChangedHandler(newIndex: number) {
+    const prevActiveIndexData = this.activeIndexData;
+    if (prevActiveIndexData === newIndex) {
+      return;
+    }
+    this.activeIndexData = newIndex;
+    if (this.loop) {
+      const changeType = this._getChangeType(newIndex, prevActiveIndexData);
+      if (['next', 'loopToFirst'].includes(changeType)) {
+        this.next();
+        return;
+      }
+      if (['prev', 'loopToLast'].includes(changeType)) {
+        this.prev();
+        return;
+      }
+    }
+    this.goTo(newIndex, this.speed);
+  }
+
+  _getChangeType(newIndex, oldIndex) {
+    const childrenLength = this._getChildrenLength();
+    const offset = newIndex - oldIndex;
+    if (offset === 1) {
+      return 'next';
+    }
+    if (offset === -1) {
+      return 'prev';
+    }
+    if (oldIndex === childrenLength - 1 && newIndex === 0) {
+      return 'loopToFirst';
+    }
+    if (oldIndex === 0 && newIndex === childrenLength - 1) {
+      return 'loopToLast';
+    }
+    return 'jump';
+  }
+
+  _observerUpdate(swiper, mutationRecord) {
+    if (mutationRecord.type === 'childList') {
+      this.goTo(this.activeIndexData, 0);
+      this.$emit('childrenlistchange');
+    }
+  }
+
+  _reload() {
+    this.isRefresh = false;
+    this.$nextTick(() => {
+      this.isRefresh = true;
+      this.$nextTick(() => {
+        // @ts-ignore
+        this.swiper = this.$refs.mySwiper.$swiper;
+      });
+    });
+  }
+
+  _getChildrenLength() {
+    const children = filterEmpty(this.$slots.default);
+    return children.length;
+  }
+
+  next(speed?: number) {
+    this.swiper.slideNext(speed);
+  }
+
+  prev(speed?: number) {
+    this.swiper.slidePrev(speed);
+  }
+
+  goTo(index: number, speed?: number) {
+    if (this.swiper) {
+      this.loop ? this.swiper.slideToLoop(index, speed) : this.swiper.slideTo(index, speed);
+    }
+  }
+
+  autoplayStop() {
+    this.autoplay && this.swiper.autoplay.stop();
+  }
+
+  autoplayStart() {
+    this.autoplay && this.swiper.autoplay.start();
+  }
+
+  resize() {
+    this.swiper && this.swiper.update(true);
+  }
+
+  watchOptions() {
+    this.manualUpdateProps.forEach(item => {
+      this.$watch(
+        item,
+        function (newVal, oldVal) {
+          if (!isequal(newVal, oldVal)) {
+            this._reload();
+          }
+        },
+        { deep: true }
+      );
+    });
+  }
+
+  autoResizeHandler() {
+    if (this.autoresize) {
+      this.__resizeHandler = debounce(
+        () => {
+          this.resize();
+        },
+        100,
+        { leading: true }
+      );
+      // @ts-ignore
+      addListener(this.$el, this.__resizeHandler);
+    }
+  }
+
+  handlerNamedSlot(alias: string, h: CreateElement) {
+    const existSlots = !!this.$slots[alias];
+    return h(
+      existSlots ? 'template' : 'div',
+      { class: `swiper-${alias}`, slot: alias },
+      existSlots ? this.$slots[alias] : ''
+    );
+  }
+
+  render(h: CreateElement) {
+    let slots = [];
+    const children = filterEmpty(this.$slots.default);
+    if (children && children.length) {
+      children.forEach(element => {
+        if (getSlotOptions(element).__SM_SLIDESHOW_ITEM) {
+          slots.push(element);
+        } else {
+          console.error("Only accepts Slideshow.Item as Slideshow's children");
+        }
+      });
+    }
+    this.pagination && slots.push(this.handlerNamedSlot('pagination', h));
+    this.scrollbar && slots.push(this.handlerNamedSlot('scrollbar', h));
+    if (this.navigation) {
+      slots.push(this.handlerNamedSlot('button-prev', h), this.handlerNamedSlot('button-next', h));
+    }
+    let collapseCardProps = {
+      iconClass: this.iconClass,
+      iconPosition: this.position,
+      headerName: this.headerName,
+      autoRotate: this.autoRotate,
+      collapsed: this.collapsed,
+      background: this.background,
+      textColor: this.textColor,
+      splitLine: this.splitLine
+    };
+    let SwiperCompt: VNode | null = null;
+    if (this.isRefresh) {
+      SwiperCompt = h(
+        // @ts-ignore
+        Swiper,
+        {
+          domProps: { realIndex: this.activeIndex },
+          props: { options: this.swiperOptions },
+          on: {
+            slideChange: this.slideChange,
+            observerUpdate: this._observerUpdate
+          },
+          ref: 'mySwiper'
+        },
+        slots
+      );
+    }
+    return h(
+      'sm-collapse-card',
+      {
+        class: 'sm-component-slideshow',
+        props: collapseCardProps
+      },
+      [
+        h(
+          'div',
+          {
+            class: 'sm-component-slideshow__content',
+            on: { mouseover: this.autoplayStop, mouseout: this.autoplayStart }
+          },
+          [SwiperCompt]
+        )
+      ]
+    );
+  }
+}
+
+export default Slideshow;
+</script>

package/src/common/slideshow/SlideshowItem.vue

@@ -0,0 +1,17 @@
+<template>
+  <swiper-slide class="sm-component-slideshowitem">
+    <slot></slot>
+  </swiper-slide>
+</template>
+<script>
+import { SwiperSlide } from './Swiper';
+import 'swiper/swiper-bundle.min.css';
+
+export default {
+  name: 'SmSlideshowItem',
+  __SM_SLIDESHOW_ITEM: true,
+  components: {
+    SwiperSlide
+  }
+};
+</script>

package/src/common/slideshow/Swiper.js

@@ -0,0 +1,29 @@
+import {
+  Swiper as SwiperClass,
+  Navigation,
+  Pagination,
+  Mousewheel,
+  Autoplay,
+  Keyboard,
+  Scrollbar,
+  EffectCoverflow,
+  EffectCube,
+  EffectFlip
+} from 'swiper/core';
+import getAwesomeSwiper from 'vue-awesome-swiper/dist/exporter';
+
+SwiperClass.use([
+  Navigation,
+  Pagination,
+  Autoplay,
+  Mousewheel,
+  Keyboard,
+  Scrollbar,
+  EffectCoverflow,
+  EffectCube,
+  EffectFlip
+]);
+const { Swiper, SwiperSlide } = getAwesomeSwiper(SwiperClass);
+
+export default Swiper;
+export { SwiperSlide };

package/src/common/slideshow/index.js

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

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

package/src/common/slideshow/style/slideshow.scss

@@ -0,0 +1,48 @@
+@import '../../_utils/style/mixins/mixins.scss';
+@import '../../_utils/style/theme/theme.scss';
+
+@include b(slideshow) {
+  width: 264px;
+  height: 332px;
+  .sm-component-collapse-card__content {
+    height: inherit;
+  }
+  .sm-component-collapse-card__body {
+    height: calc(100% - 32px);
+  }
+  @include e(content) {
+    text-align: center;
+    height: 100%;
+  }
+  @include b(slideshowitem) {
+    img {
+      width: 196px;
+      height: 110px;
+    }
+  }
+  .swiper-container {
+    width: 100%;
+    height: 100%;
+  }
+  .swiper-button-prev,
+  .swiper-button-next {
+    color: $swiper-prev-next-background;
+    font-size: 26px;
+    &:hover {
+      color: $primary-6 !important;
+    }
+  }
+  .swiper-button-active {
+    color: $primary-6;
+  }
+  .swiper-scrollbar-drag {
+    background: $scrollbar-background;
+  }
+  .swiper-pagination-bullet {
+    opacity: 1;
+    background: $swiper-pagination-bullet;
+  }
+  .swiper-pagination-bullet-active {
+    background: $primary-6;
+  }
+}

package/src/common/spin/Spin.vue

@@ -0,0 +1,17 @@
+<script lang="ts">
+import Spin, { SpinProps } from 'ant-design-vue/es/spin/Spin';
+import Theme from 'vue-iclient/src/common/_mixin/Theme';
+import AntdRender from 'vue-iclient/src/common/_mixin/AntdRender';
+
+export const spinTypes = {
+  ...SpinProps()
+};
+
+export default {
+  name: 'SmSpin',
+  defaultComponent: Spin,
+  mixins: [Theme, AntdRender],
+  inheritAttrs: false,
+  props: spinTypes
+};
+</script>

package/src/common/spin/index.js

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