@kyfe/fms-vue2-components 0.0.3 → 0.0.4

package/src/components/ks-popover/index.vue

@@ -0,0 +1,483 @@
+<template>
+  <div ref="wrapper"
+       :class="bem('wrapper')"
+       @click.stop="onClickWrapper">
+    <van-popup ref="popover"
+               :value="value"
+               :class="bem([theme])"
+               :overlay="overlay"
+               :position="null"
+               transition="van-popover-zoom"
+               :lockScroll="false"
+               :getContainer="getContainer"
+               @open="onOpen"
+               @close="onClose"
+               @input="onToggle"
+               @opened="onOpened"
+               @touchstart.native="onTouchstart">
+      <div :class="bem('arrow')" />
+      <div :class="bem('content')"
+          :style="popoverContentStyle"
+           role="menu">
+        <slot>
+          <div role="menuitem"
+               v-for="(action, index) in actions"
+               :key="'action' + index"
+               :class="[...bem('action', { disabled: action.disabled, 'with-icon': action.icon }), action.className]"
+               @click="onClickAction(action, index)">
+            <van-icon v-if="action.icon"
+                      :name="action.icon"
+                      :class="bem('action-icon')" />
+            <div :class="[...bem('action-text'), 'van-hairline--bottom']">{{ action.text }}</div>
+          </div>
+        </slot>
+      </div>
+    </van-popup>
+    <slot name="reference"></slot>
+  </div>
+</template>
+
+<script>
+  import { createPopper, offsetModifier } from '@vant/popperjs'
+  import { ClickOutsideMixin } from './mixin'
+  import { createBEM } from './utils'
+
+  export default {
+    name: 'ks-popover',
+    data () {
+      this.bem = createBEM('van-popover')
+      return {
+      }
+    },
+    mixins: [
+      ClickOutsideMixin({
+        event: 'touchstart',
+        method: 'onClickOutside',
+      }),
+    ],
+    props: {
+      value: Boolean,
+      trigger: String,
+      overlay: Boolean,
+      offset: {
+        type: Array,
+        default: () => [0, 8],
+      },
+      theme: {
+        type: String,
+        default: 'light',
+      },
+      actions: {
+        type: Array,
+        default: () => [],
+      },
+      placement: {
+        type: String,
+        default: 'bottom',
+      },
+      getContainer: {
+        type: [String, Function],
+        default: 'body',
+      },
+      closeOnClickAction: {
+        type: Boolean,
+        default: true,
+      },
+      popoverContentStyle:  {
+        type: Object,
+        default: () => {},
+      },
+    },
+    watch: {
+      value: 'updateLocation',
+      placement: 'updateLocation',
+    },
+    mounted () {
+      this.updateLocation()
+    },
+    beforeDestroy () {
+      if (this.popper) {
+        this.popper.destroy()
+        this.popper = null
+      }
+    },
+    methods: {
+      createPopper () {
+        const data =  createPopper(this.$refs.wrapper, this.$refs.popover.$el, {
+          placement: this.placement,
+          modifiers: [
+            {
+              name: 'computeStyles',
+              options: {
+                adaptive: false,
+                gpuAcceleration: false,
+              },
+            },
+            {
+              ...offsetModifier,
+              options: {
+                offset: this.offset,
+              },
+            },
+          ],
+        })
+        return data
+      },
+
+      updateLocation () {
+        this.$nextTick(() => {
+          if (!this.value) {
+            return
+          }
+
+          if (!this.popper) {
+            this.popper = this.createPopper()
+          } else {
+            this.popper.setOptions({
+              placement: this.placement,
+              modifiers: [
+                {
+                  name: 'computeStyles',
+                  options: {
+                    adaptive: false,
+                    gpuAcceleration: false,
+                  },
+                },
+                {
+                  ...offsetModifier,
+                  options: {
+                    offset: this.offset,
+                  },
+                },
+              ],
+            })
+          }
+        })
+      },
+
+      onToggle (value) {
+        this.$emit('input', value)
+      },
+
+      onClickWrapper () {
+        if (this.trigger === 'click') {
+          this.onToggle(!this.value)
+        }
+      },
+
+      onTouchstart (event) {
+        event.stopPropagation()
+        this.$emit('touchstart', event)
+      },
+
+      onClickAction (action, index) {
+        if (action.disabled) {
+          return
+        }
+
+        this.$emit('select', action, index)
+
+        if (this.closeOnClickAction) {
+          this.$emit('input', false)
+        }
+      },
+
+      onClickOutside () {
+        this.$emit('input', false)
+      },
+
+      onOpen () {
+        this.$emit('open')
+      },
+
+      onOpened () {
+        this.$emit('opened')
+      },
+
+      onClose () {
+        this.$emit('close')
+      },
+
+      onClosed () {
+        this.$emit('closed')
+      },
+    },
+    // watch: {
+    //   offset() {
+    //     console.log('ddd')
+    //     this.popper = this.createPopper()
+    //   }
+    // }
+  }
+</script>
+
+<style lang="less">
+  .van-popover {
+    position: absolute;
+    overflow: visible;
+    background-color: transparent;
+    transition: opacity 0.15s, transform 0.15s;
+
+    &__wrapper {
+      display: inline-block;
+    }
+
+    &__arrow {
+      position: absolute;
+      width: 0;
+      height: 0;
+      border-color: transparent;
+      border-style: solid;
+      border-width: 6px;
+    }
+
+    &__content {
+      overflow: hidden;
+      border-radius: 8px;
+    }
+
+    &__action {
+      position: relative;
+      display: flex;
+      align-items: center;
+      box-sizing: border-box;
+      width: 128px;
+      height: 44px;
+      padding: 0 16px;
+      font-size: 14px;
+      line-height: 20px;
+      cursor: pointer;
+
+      &:last-child {
+        .van-popover__action-text::after {
+          display: none;
+        }
+      }
+
+      &-text {
+        display: flex;
+        flex: 1;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+      }
+
+      &-icon {
+        margin-right: 8px;
+        font-size: 20px;
+      }
+
+      &--with-icon {
+        .van-popover__action-text {
+          justify-content: flex-start;
+        }
+      }
+    }
+
+    &[data-popper-placement^='top'] {
+      .van-popover__arrow {
+        bottom: 0;
+        border-top-color: currentColor;
+        border-bottom-width: 0;
+        transform: translate(-50%, 100%);
+      }
+    }
+
+    &[data-popper-placement='top'] {
+      transform-origin: 50% 100%;
+
+      .van-popover__arrow {
+        left: 50%;
+      }
+    }
+
+    &[data-popper-placement='top-start'] {
+      transform-origin: 0 100%;
+
+      .van-popover__arrow {
+        left: 16px;
+      }
+    }
+
+    &[data-popper-placement='top-end'] {
+      transform-origin: 100% 100%;
+
+      .van-popover__arrow {
+        right: 16px;
+      }
+    }
+
+    &[data-popper-placement^='left'] {
+      .van-popover__arrow {
+        right: 0;
+        border-right-width: 0;
+        border-left-color: currentColor;
+        transform: translate(100%, -50%);
+      }
+    }
+
+    &[data-popper-placement='left'] {
+      transform-origin: 100% 50%;
+
+      .van-popover__arrow {
+        top: 50%;
+      }
+    }
+
+    &[data-popper-placement='left-start'] {
+      transform-origin: 100% 0;
+
+      .van-popover__arrow {
+        top: 16px;
+      }
+    }
+
+    &[data-popper-placement='left-end'] {
+      transform-origin: 100% 100%;
+
+      .van-popover__arrow {
+        bottom: 16px;
+      }
+    }
+
+    &[data-popper-placement^='right'] {
+      .van-popover__arrow {
+        left: 0;
+        border-right-color: currentColor;
+        border-left-width: 0;
+        transform: translate(-100%, -50%);
+      }
+    }
+
+    &[data-popper-placement='right'] {
+      transform-origin: 0 50%;
+
+      .van-popover__arrow {
+        top: 50%;
+      }
+    }
+
+    &[data-popper-placement='right-start'] {
+      transform-origin: 0 0;
+
+      .van-popover__arrow {
+        top: 16px;
+      }
+    }
+
+    &[data-popper-placement='right-end'] {
+      transform-origin: 0 100%;
+
+      .van-popover__arrow {
+        bottom: 16px;
+      }
+    }
+
+    &[data-popper-placement^='bottom'] {
+      .van-popover__arrow {
+        top: 0;
+        border-top-width: 0;
+        border-bottom-color: currentColor;
+        transform: translate(-50%, -100%);
+      }
+    }
+
+    &[data-popper-placement='bottom'] {
+      transform-origin: 50% 0;
+
+      .van-popover__arrow {
+        left: 50%;
+      }
+    }
+
+    &[data-popper-placement='bottom-start'] {
+      transform-origin: 0 0;
+
+      .van-popover__arrow {
+        left: 16px;
+      }
+    }
+
+    &[data-popper-placement='bottom-end'] {
+      transform-origin: 100% 0;
+
+      .van-popover__arrow {
+        right: 16px;
+      }
+    }
+
+    &--light {
+      color: #323233;
+
+      .van-popover__content {
+        background-color: #fff;
+        box-shadow: 0 2px 12px rgba(50, 50, 51, 0.12);
+      }
+
+      .van-popover__arrow {
+        color: #fff;
+      }
+
+      .van-popover__action {
+        &:active {
+          background-color: #f2f3f5;
+        }
+
+        &--disabled {
+          color: #c8c9cc;
+          cursor: not-allowed;
+
+          &:active {
+            background-color: transparent;
+          }
+        }
+      }
+    }
+
+    &--dark {
+      color: #fff;
+
+      .van-popover__content {
+        background-color: #4a4a4a;
+      }
+
+      .van-popover__arrow {
+        color: #4a4a4a;
+      }
+
+      .van-popover__action {
+        &:active {
+          background-color: rgba(0, 0, 0, 0.2);
+        }
+
+        &--disabled {
+          color: #969799;
+
+          &:active {
+            background-color: transparent;
+          }
+        }
+      }
+
+      .van-popover__action-text {
+        &::after {
+          border-color: #646566;
+        }
+      }
+    }
+
+    &-zoom-enter,
+    &-zoom-leave-active {
+      transform: scale(0.8);
+      opacity: 0;
+    }
+
+    &-zoom-enter-active {
+      transition-timing-function: ease-out;
+    }
+
+    &-zoom-leave-active {
+      transition-timing-function: ease-in;
+    }
+  }
+</style>

package/src/components/ks-popover/mixin.js

@@ -0,0 +1,28 @@
+import { on, off } from './utils'
+
+export const ClickOutsideMixin = config => ({
+  props: {
+    closeOnClickOutside: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  data() {
+    const clickOutsideHandler = event => {
+      if (this.closeOnClickOutside && !this.$el.contains(event.target)) {
+        this[config.method]()
+      }
+    }
+
+    return { clickOutsideHandler }
+  },
+
+  mounted() {
+    on(document, config.event, this.clickOutsideHandler)
+  },
+
+  beforeDestroy() {
+    off(document, config.event, this.clickOutsideHandler)
+  },
+})

package/src/components/ks-popover/utils.js

@@ -0,0 +1,60 @@
+let supportsPassive = false
+try {
+  const opts = {}
+  Object.defineProperty(opts, 'passive', {
+    // eslint-disable-next-line getter-return
+    get() {
+      supportsPassive = true
+    },
+  })
+  window.addEventListener('test-passive', null, opts)
+  // eslint-disable-next-line no-empty
+} catch (e) {}
+
+export function on(target, event, handler, passive = false) {
+  target.addEventListener(event, handler, supportsPassive ? { capture: false, passive } : false)
+}
+
+export function off(target, event, handler) {
+  target.removeEventListener(event, handler)
+}
+
+const ELEMENT = '__'
+const MODS = '--'
+
+function join(name, el, symbol) {
+  return el ? name + symbol + el : name
+}
+
+function prefix(name, mods) {
+  if (typeof mods === 'string') {
+    return [join(name, mods, MODS)]
+  }
+
+  if (Array.isArray(mods)) {
+    return mods.map(item => prefix(name, item))
+  }
+
+  const res = []
+  if (mods) {
+    Object.keys(mods).forEach(key => {
+      if (mods[key]) {
+        res.push(name + MODS + key)
+      }
+    })
+  }
+
+  return res
+}
+
+export function createBEM(name) {
+  return function (el, mods) {
+    if (el && typeof el !== 'string') {
+      mods = el
+      el = ''
+    }
+    el = join(name, el, ELEMENT)
+    const bemClass = mods ? [el, ...prefix(el, mods)] : [el]
+    return bemClass
+  }
+}