vdesign-ui 0.1.20 → 0.1.21

package/dist/components/noticebar/index.vue

@@ -1,247 +0,0 @@
-<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', // info/warning/tips
-    },
-    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

@@ -1,332 +0,0 @@
-@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);
-    }
-  }
-
-  &.@{prefix}-tips {
-    background-color: var(--color-noticebar-snackbar_tips-bg);
-    color: var(--color-noticebar-snackbar_tips-text);
-
-    .vd-noticebar-snackbar__content {
-      &::after {
-        background-image: linear-gradient(270deg, rgba(0, 0, 0, 0), var(--color-noticebar-snackbar_tips-bg) 90%);
-      }
-
-      &::before {
-        background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), var(--color-noticebar-snackbar_tips-bg) 90%);
-      }
-    }
-
-    .vd-iconfont {
-      color: var(--color-noticebar-snackbar_tips-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);
-
-    .vd-iconfont {
-      color: var(--color-noticebar-toast_warning-icon);
-    }
-  }
-
-  &__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

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