vdesign-ui 0.1.9 → 0.1.10

package/dist/components/noticebar/index.vue

@@ -0,0 +1,246 @@
+<template>
+  <div
+    :class="[mode ? `${prefixCls}-${mode}` : '', type ? 'vd-noticebar-' + type : '', { 'vd-noticebar-action': action }]"
+    v-if="isShow">
+    <!-- 左侧图标 -->
+    <div v-if="customLeft || customIcon" :class="`${prefixCls}-${mode}__left`">
+      <template v-if="customLeft">
+        <slot name="left"></slot>
+      </template>
+
+      <template v-else-if="customIcon">
+        <vd-icon :name="customIcon" :svg="iconSvg"></vd-icon>
+      </template>
+    </div>
+    <!-- 内容区 -->
+    <div :class="[`${prefixCls}-${mode}__content`, multiRows && `${prefixCls}-${mode}__multi`]" ref="wrap">
+      <!-- scrollable -->
+      <div v-if="scrollable" :style="contentStyle"
+        :class="[(overflow && scrollable) && `${prefixCls}-${mode}__content--animate`]" ref="content">
+        <div v-if="customTitle || title" :class="`${prefixCls}-${mode}__message`">
+          <div :class="[`${prefixCls}-${mode}__message--title`]">
+            <template v-if="customTitle">
+              <slot name="title"></slot>
+            </template>
+            <template v-else>{{ title }}</template>
+          </div>
+          <div v-if="tag" :class="[tag && `${prefixCls}-${mode}__message--tag`, state ? 'vd-noticebar-' + state : '']">{{
+            tag
+            }}</div>
+        </div>
+        <slot></slot>
+      </div>
+      <template v-else>
+        <div v-if="customTitle || title" :class="`${prefixCls}-${mode}__message`">
+          <div :class="[`${prefixCls}-${mode}__message--title`]">
+            <template v-if="customTitle">
+              <slot name="title"></slot>
+            </template>
+            <template v-else>{{ title }}</template>
+          </div>
+          <div v-if="tag" :class="[tag && `${prefixCls}-${mode}__message--tag`, state ? 'vd-noticebar-' + state : '']">
+            <vd-icon
+              :name="state === 'success' ? 'icon_show_finished' : state === 'tips' ? 'icon_show_doing' : state === 'warning' ? 'icon_show_failed' : 'icon_show_cancel'"></vd-icon>
+            {{ tag }}
+          </div>
+        </div>
+        <slot></slot>
+      </template>
+    </div>
+    <!-- 右侧操作区 -->
+    <div :class="`${prefixCls}-${mode}__right`">
+      <template v-if="customRight">
+        <slot name="right"></slot>
+      </template>
+      <!-- 操作区 -->
+      <div v-if="action" :class="`${prefixCls}-${mode}__button`">
+        <vd-button type="primary_text">{{ action }}</vd-button>
+      </div>
+      <!-- 可关闭 -->
+      <vd-icon v-if="closable" name="icon_btn_close" @click.native.stop="$_close"></vd-icon>
+      <!-- 可链接 -->
+      <vd-icon v-if="islink" name="icon_btn_next"></vd-icon>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'vd-noticebar',
+  props: {
+    prefixCls: {
+      type: String,
+      default: 'vd-noticebar'
+    },
+    mode: {
+      type: String,
+      default: 'snackbar', // snackbar toast notify
+    },
+    type: {
+      type: String,
+      default: '', // info/warning
+    },
+    scrollable: {
+      type: Boolean,
+      default: false,
+    },
+    closable: {
+      type: Boolean,
+      default: false,
+    },
+    islink: {
+      type: Boolean,
+      default: false
+    },
+    // notify
+    title: {
+      type: String,
+      default: '',
+    },
+    action: {
+      type: String,
+      default: '',
+    },
+    tag: {
+      type: String,
+      default: '',
+    },
+    state: {
+      type: String,
+      default: 'tips'
+    },
+    // 画蛇添足部分
+    icon: {
+      type: String,
+      default: '',
+    },
+    iconSvg: {
+      type: Boolean,
+      default: false,
+    },
+    multiRows: {
+      type: Boolean,
+      default: false,
+    },
+    speed: {
+      type: Number,
+      default: 50
+    },
+    defaultWidth: {
+      type: Number,
+      default: 375
+    }
+  },
+
+  data() {
+    return {
+      isShow: true,
+      overflow: false,
+      contentStyle: {
+        transitionDuration: '0s',
+        transform: 'translateX(0px)'
+      },
+      wrapWidth: 0,
+      contentWidth: 0,
+      time: 0,
+      timer: null,
+      convertSpeed: 1
+    }
+  },
+
+  computed: {
+    customIcon() {
+      let result
+      if (this.mode === 'toast') {
+        result = this.type === 'warning' ? 'icon_btn_clean' : 'icon_show_finished'
+      } else {
+        result = this.icon
+      }
+      return result
+    },
+    customLeft() {
+      return !!this.$slots.left
+    },
+
+    customRight() {
+      return !!this.$slots.right
+    },
+
+    customTitle() {
+      return !!this.$slots.title
+    }
+  },
+
+  updated() {
+    this.$_checkOverflow()
+  },
+
+  mounted() {
+    this.$_checkOverflow()
+    this.init()
+  },
+
+  methods: {
+    $_close() {
+      if (this.closable) {
+        this.isShow = false
+      }
+      this.$emit('close')
+    },
+    $_checkOverflow() {
+      if (!this.scrollable) {
+        return
+      }
+      const { wrap, content } = this.$refs
+
+      /* istanbul ignore if */
+      if (!wrap || !content) {
+        return
+      }
+
+      const paddingLeft =
+        window
+          .getComputedStyle(content, null)
+          .getPropertyValue('padding')
+          .split(' ')[3] || '0px'
+      const left = +paddingLeft.match(/\d+/g)[0]
+      this.overflow = content.scrollWidth - left > Math.ceil(wrap.getBoundingClientRect().width)
+
+    },
+    init() {
+
+      const { wrap, content } = this.$refs
+      if (wrap && content) {
+        // const _width = window.innerWidth
+        // this.convertSpeed = _width / this.defaultWidth * this.speed  // 根据分辨率转化成不同的速度
+        this.convertSpeed = 375 / this.defaultWidth * this.speed //_width / this.defaultWidth * this.speed  // 根据分辨率转化成不同的速度
+        this.wrapWidth = wrap.offsetWidth
+        this.contentWidth = content.scrollWidth
+        console.log(content.scrollWidth);
+        this.startAnimate()
+        this.timer = setInterval(() => {
+          this.startAnimate()
+        }, this.time * 1000)
+        this.$once('hook:beforeDestroy', () => {
+          clearInterval(this.timer)
+          this.timer = null
+        })
+      }
+    },
+    startAnimate() {
+      this.contentStyle.transitionDuration = '0s'
+      this.contentStyle.transform = 'translateX(' + this.wrapWidth + 'px)'
+      this.time = (this.wrapWidth + this.contentWidth) / this.convertSpeed
+      setTimeout(() => {
+        this.contentStyle.transitionDuration = this.time + 's'
+        this.contentStyle.transform = 'translateX(-' + this.contentWidth + 'px)'
+      }, 200)
+    },
+  },
+}
+
+</script>
+
+<style lang="less">
+@import './style.less';
+</style>

package/dist/components/noticebar/style.less

@@ -0,0 +1,309 @@
+@prefix: ~"vd-noticebar";
+
+.@{prefix}-snackbar {
+  box-sizing: border-box;
+  position: relative;
+  width: 100%;
+  display: flex;
+  min-height: calc(var(--height-noticebar-snackbar) * 1px);
+  padding-inline-start: calc(var(--spacing-noticebar-snackbar-padding_left) * 1px);
+  padding-inline-end: calc(var(--spacing-noticebar-snackbar-padding_right) * 1px);
+  border-radius: calc(var(--radius-noticebar-snackbar) * 1px);
+  background-color: var(--color-noticebar-snackbar_info-bg);
+  color: var(--color-noticebar-snackbar_info-text);
+  font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
+  font-weight: var(--en-single-f-c-r-fontWeight);
+  line-height: 1.25;
+  z-index: 99;
+
+  .vd-iconfont {
+    font-size: calc(var(--icon-noticebar-snackbar) * 1px);
+
+    &+.vd-iconfont {
+      margin-inline-start: calc(var(--spacing-noticebar-snackbar_icon-margin_right) * 1px);
+    }
+  }
+
+  &.@{prefix}-info {
+    background-color: var(--color-noticebar-snackbar_info-bg);
+    color: var(--color-noticebar-snackbar_info-text);
+
+    .vd-iconfont {
+      color: var(--color-noticebar-snackbar_info-icon);
+    }
+  }
+
+  &.@{prefix}-warning {
+    background-color: var(--color-noticebar-snackbar_warning-bg);
+    color: var(--color-noticebar-snackbar_warning-text);
+
+    .vd-noticebar-snackbar__content {
+      &::after {
+        background-image: linear-gradient(270deg, rgba(0, 0, 0, 0), var(--color-noticebar-snackbar_warning-bg) 90%);
+      }
+
+      &::before {
+        background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), var(--color-noticebar-snackbar_warning-bg) 90%);
+      }
+    }
+
+    .vd-iconfont {
+      color: var(--color-noticebar-snackbar_warning-icon);
+    }
+  }
+
+  &__left,
+  &__right {
+    display: flex;
+    align-items: center;
+  }
+
+  &__content {
+    position: relative;
+    flex: 1;
+    margin: auto;
+    width: auto;
+    // padding-inline-start: calc(var(--spacing-noticebar-snackbar-padding_left) * 1px);
+    // padding-inline-end: calc(var(--spacing-noticebar-snackbar-padding_right) * 1px);
+    white-space: nowrap;
+    overflow: hidden;
+    margin-inline-end: calc(var(--spacing-noticebar-snackbar_text-margin_right) * 1px);
+
+    &::after {
+      content: "";
+      width: calc(var(--spacing-noticebar-snackbar-padding_left) * 1px);
+      position: absolute;
+      inset-block: 0;
+      inset-inline-start: 0;
+      background-image: linear-gradient(270deg, rgba(0, 0, 0, 0), var(--color-noticebar-snackbar_info-bg) 90%);
+      z-index: 1;
+    }
+
+    &::before {
+      content: "";
+      width: calc(var(--spacing-noticebar-snackbar-padding_right) * 1px);
+      position: absolute;
+      inset-block: 0;
+      inset-inline-end: 0;
+      z-index: 1;
+      background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), var(--color-noticebar-snackbar_info-bg) 90%);
+    }
+
+    &--animate {
+      display: inline-block;
+      transition-timing-function: linear;
+    }
+  }
+
+  &__multi {
+    white-space: normal;
+    padding-top: calc(var(--spacing-noticebar-snackbar_text-margin_right) * 1px);
+    padding-bottom: calc(var(--spacing-noticebar-snackbar_text-margin_right) * 1px);
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+  }
+
+}
+
+.@{prefix}-toast {
+  box-sizing: border-box;
+  position: relative;
+  display: inline-flex;
+  max-width: 100%;
+  min-height: calc(var(--height-noticebar-snackbar) * 1px);
+  padding-inline-start: calc(var(--spacing-noticebar-toast-padding_left) * 1px);
+  padding-inline-end: calc(var(--spacing-noticebar-toast-padding_right) * 1px);
+  border-radius: calc(var(--radius-noticebar-toast) * 1px);
+  background-color: var(--color-noticebar-toast_info-bg);
+  color: var(--color-noticebar-toast_info-text);
+  font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
+  font-weight: var(--en-single-f-c-r-fontWeight);
+  line-height: 1.25;
+  z-index: 99;
+
+  .vd-iconfont {
+    font-size: calc(var(--icon-noticebar-toast) * 1px);
+    margin-inline-end: calc(var(--spacing-noticebar-toast_icon-margin_right) * 1px);
+  }
+
+  [lang='ar'] & .vd-iconfont {
+    transform: scaleX(1);
+  }
+
+  &.@{prefix}-info {
+    background-color: var(--color-noticebar-toast_info-bg);
+    color: var(--color-noticebar-toast_info-text);
+  }
+
+  &.@{prefix}-warning {
+    background-color: var(--color-noticebar-snackbar_warning-bg);
+    color: var(--color-noticebar-snackbar_warning-text);
+  }
+
+  &__left,
+  &__right {
+    display: flex;
+    align-items: center;
+  }
+
+  &__content {
+    flex: 1;
+    margin: auto;
+    width: auto;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-inline-end: calc(var(--spacing-noticebar-snackbar_text-margin_right) * 1px);
+
+    &--animate {
+      // padding-inline-start: 100%;
+      display: inline-block;
+      transition-timing-function: linear;
+    }
+  }
+
+  &__multi {
+    white-space: normal;
+    padding-top: calc(var(--spacing-noticebar-snackbar_text-margin_right) * 1px);
+    padding-bottom: calc(var(--spacing-noticebar-snackbar_text-margin_right) * 1px);
+  }
+}
+
+.@{prefix}-notify {
+  box-sizing: border-box;
+  position: relative;
+  width: 100%;
+  display: flex;
+  font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
+  font-weight: var(--en-single-f-c-r-fontWeight);
+  line-height: 1.25;
+  z-index: 99;
+
+  border-radius: calc(var(--radius-noticebar-notification) * 1px);
+  background-color: var(--color-noticebar-notification-bg);
+  color: var(--color-noticebar-notification-text);
+  padding-inline-start: calc(var(--spacing-noticebar-notification-padding_left) * 1px);
+  padding-inline-end: calc(var(--spacing-noticebar-notification-padding_right) * 1px);
+  padding-top: calc(var(--spacing-noticebar-notification-padding_top) * 1px);
+  padding-bottom: calc(var(--spacing-noticebar-notification-padding_bottom) * 1px);
+  box-shadow: var(--shadow-s3);
+
+  &.@{prefix}-action {
+    padding-inline-end: calc(var(--spacing-noticebar-notification_button-padding_right) * 1px);
+  }
+
+  &__content {
+    flex: 1;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+  }
+
+  &__left,
+  &__right {
+    display: flex;
+    align-items: center;
+  }
+
+  &__message {
+    display: flex;
+    justify-content: space-between;
+    font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
+    font-weight: var(--en-single-f-d-s-fontWeight);
+    margin-bottom: calc(var(--spacing-noticebar-notification_title-margin_bottom) * 1px);
+
+    &--title {
+      flex: 1;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    &--tag {
+      display: flex;
+      align-items: center;
+      margin-inline-start: calc(var(--spacing-extra-tight) * 1px);
+      border-radius: calc(var(--radius-noticebar-notification_tag) * 1px);
+      font-size: calc(var(--en-single-f-a-r-fontSize) * 1px);
+      font-weight: var(--en-single-f-a-r-fontWeight);
+      // 添加间距
+      padding: calc(var(--spacing-extra-tight) * 1px);
+      line-height: calc(var(--en-single-f-a-r-fontSize) * 1px);
+
+      .vd-iconfont {
+        margin-inline-end: calc(var(--spacing-extra-tight) * 1px);
+      }
+
+      [lang='ar'] & .vd-iconfont {
+        transform: scaleX(1);
+      }
+
+      &.@{prefix}-success {
+        background-color: var(--color-noticebar-notification_tag_success-bg);
+
+        .vd-iconfont {
+          color: var(--tips-color-success);
+        }
+      }
+
+      &.@{prefix}-tips {
+        background-color: var(--color-noticebar-notification_tag_tips-bg);
+
+        .vd-iconfont {
+          color: var(--tips-color-tips);
+        }
+      }
+
+      &.@{prefix}-warning {
+        background-color: var(--color-noticebar-notification_tag_warning-bg);
+
+        .vd-iconfont {
+          color: var(--tips-color-warning);
+        }
+      }
+
+      &.@{prefix}-disable {
+        background-color: var(--color-noticebar-notification_tag_disable-bg);
+
+        .vd-iconfont {
+          color: var(--text-color-h3);
+        }
+      }
+    }
+  }
+
+  &__button {
+    margin-inline-start: calc(var(--spacing-noticebar-notification-button-margin_left) * 1px);
+  }
+
+  .vd-iconfont {
+    font-size: calc(var(--icon-noticebar-notification) * 1px);
+  }
+}
+
+[dir="rtl"] {
+  .vd-noticebar-snackbar__content {
+    &::after {
+      background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), var(--color-noticebar-snackbar_info-bg) 90%);
+    }
+
+    &::before {
+      background-image: linear-gradient(270deg, rgba(0, 0, 0, 0), var(--color-noticebar-snackbar_info-bg) 90%);
+    }
+  }
+
+  .@{prefix}-warning {
+    .vd-noticebar-snackbar__content {
+      &::after {
+        background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), var(--color-noticebar-snackbar_warning-bg) 90%);
+      }
+
+      &::before {
+        background-image: linear-gradient(270deg, rgba(0, 0, 0, 0), var(--color-noticebar-snackbar_warning-bg) 90%);
+      }
+    }
+  }
+}

package/dist/components/overlay/index.js

@@ -0,0 +1,8 @@
+import VOverlay from './index.vue';
+import './style.less';
+
+VOverlay.install = function (Vue) {
+  Vue.component(VOverlay.name, VOverlay);
+};
+
+export default VOverlay;