vdesign-ui 0.2.6 → 0.2.7

package/dist/components/tag/style.less

@@ -0,0 +1,211 @@
+@tag-prefix-cls: vd-tag;
+
+.@{tag-prefix-cls}{
+    display: inline-flex;
+    align-items: center;
+    border-radius: var(--radius-tag-bg);
+    padding: 0 var(--spacing-tag-padding_y);
+    
+    &--s {
+      font-size: var(--en-single-f-b-s-fontSize);
+      font-weight: var(--en-single-f-b-s-fontWeight);
+      height: var(--height-tag-s);
+    }
+    
+    &--l {
+      font-size: var(--en-single-f-b-r-fontSize);
+      font-weight: var(--en-single-f-b-r-fontWeight);
+      height: var(--height-tag-m);
+    }
+    
+
+
+    &--white{
+        color: var(--color-tag-default-text);
+        background-color: var(--color-tag-default-bg);
+
+        &__border{
+            background-color:transparent;
+            font-size: var(--en-single-f-b-r-fontSize);
+            font-weight: var(--en-single-f-b-r-fontWeight);
+            color: var(--color-tag-default_border-text);
+            &::after{
+                border-color: var(--color-tag-default-border);
+                border-radius: calc(var(--radius-tag-bg) * 2);
+            }
+        }
+    }
+    
+    &--dark{
+        color: var(--color-tag-dark-text);
+        background-color: var(--color-tag-dark-bg);
+
+        &__border{
+            background-color:transparent;
+            font-size: var(--en-single-f-b-r-fontSize);
+            font-weight: var(--en-single-f-b-r-fontWeight);
+            color: var(--color-tag-dark_border-text);
+            &::after{
+                border-color: var(--color-tag-dark-border);
+                border-radius: calc(var(--radius-tag-bg) * 2);
+
+            }
+        }
+    }
+
+    &--blue{
+        color: var(--color-tag-blue-text);
+        background-color: var(--color-tag-blue-bg);
+
+        &__border{
+            background-color:transparent;
+            font-size: var(--en-single-f-b-r-fontSize);
+            font-weight: var(--en-single-f-b-r-fontWeight);
+            &::after{
+                border-color: var(--color-tag-blue-border);
+                border-radius: calc(var(--radius-tag-bg) * 2);
+
+            }
+        }
+    }
+
+    &--cyan{
+        color: var(--color-tag-cyan-text);
+        background-color: var(--color-tag-cyan-bg);
+
+        &__border{
+            background-color:transparent;
+            font-size: var(--en-single-f-b-r-fontSize);
+            font-weight: var(--en-single-f-b-r-fontWeight);
+            &::after{
+                border-color: var(--color-tag-cyan-border);
+                border-radius: calc(var(--radius-tag-bg) * 2);
+
+            }
+        }
+
+    }
+
+
+    &--green{
+        color: var(--color-tag-green-text);
+        background-color: var(--color-tag-green-bg);
+
+        &__border{
+            background-color:transparent;
+            font-size: var(--en-single-f-b-r-fontSize);
+            font-weight: var(--en-single-f-b-r-fontWeight);
+            &::after{
+                border-color: var(--color-tag-green-border);
+                border-radius: calc(var(--radius-tag-bg) * 2);
+
+            }
+        }
+
+    }
+
+    &--olive{
+        color: var(--color-tag-olive-text);
+        background-color: var(--color-tag-olive-bg);
+
+        &__border{
+            background-color:transparent;
+            font-size: var(--en-single-f-b-r-fontSize);
+            font-weight: var(--en-single-f-b-r-fontWeight);
+            &::after{
+                border-color: var(--color-tag-olive-border);
+                border-radius: calc(var(--radius-tag-bg) * 2);
+
+            }
+        }
+
+    }
+
+    
+    &--yellow{
+        color: var(--color-tag-yellow-text);
+        background-color: var(--color-tag-yellow-bg);
+
+        &__border{
+            background-color:transparent;
+            font-size: var(--en-single-f-b-r-fontSize);
+            font-weight: var(--en-single-f-b-r-fontWeight);
+            &::after{
+                border-color: var(--color-tag-yellow-border);
+                border-radius: calc(var(--radius-tag-bg) * 2);
+
+            }
+        }
+
+    }
+
+    &--orange{
+        color: var(--color-tag-orange-text);
+        background-color: var(--color-tag-orange-bg);
+
+        &__border{
+            background-color:transparent;
+            font-size: var(--en-single-f-b-r-fontSize);
+            font-weight: var(--en-single-f-b-r-fontWeight);
+            &::after{
+                border-color: var(--color-tag-orange-border);
+                border-radius: calc(var(--radius-tag-bg) * 2);
+
+            }
+        }
+    }
+
+    &--red{
+        color: var(--color-tag-red-text);
+        background-color: var(--color-tag-red-bg);
+
+        &__border{
+            background-color:transparent;
+            font-size: var(--en-single-f-b-r-fontSize);
+            font-weight: var(--en-single-f-b-r-fontWeight);
+            &::after{
+                border-color: var(--color-tag-red-border);
+                border-radius: calc(var(--radius-tag-bg) * 2);
+
+            }
+        }
+    }
+
+    &--pink{
+        color: var(--color-tag-pink-text);
+        background-color: var(--color-tag-pink-bg);
+
+        &__border{
+            background-color:transparent;
+            font-size: var(--en-single-f-b-r-fontSize);
+            font-weight: var(--en-single-f-b-r-fontWeight);
+            &::after{
+                border-color: var(--color-tag-pink-border);
+                border-radius: calc(var(--radius-tag-bg) * 2);
+
+            }
+        }
+    }
+
+
+    &--purple{
+        color: var(--color-tag-purple-text);
+        background-color: var(--color-tag-purple-bg);
+
+        &__border{
+            background-color:transparent;
+            font-size: var(--en-single-f-b-r-fontSize);
+            font-weight: var(--en-single-f-b-r-fontWeight);
+            &::after{
+                border-color: var(--color-tag-purple-border);
+                border-radius: calc(var(--radius-tag-bg) * 2);
+
+            }
+        }
+    }
+
+    &--plain {
+        background-color:transparent;
+        padding: 0;
+    }
+}

package/dist/components/title/index.js

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

package/dist/components/title/index.vue

@@ -0,0 +1,99 @@
+<template>
+    <div :class="['vd-title', wrapClasses]" @click="handleClick">
+        <div class="vd-title--left">
+            <div class="vd-title-content">
+                <vd-icon v-if="leftIcon" :name="leftIcon"  :class="leftIconClasses"></vd-icon>
+                <span :class="['vd-title-inner__title', innerTitleClasses]">{{ title }}</span>
+                <vd-icon v-if="rightIcon" :name="rightIcon"  :class="rightIconClasses"></vd-icon>
+            </div>
+            <p v-if="subText" :class="['vd-title__subtext', subTextClasses]">{{ subText }}</p>
+        </div>
+        <div class="vd-title--right" v-if="guideText || arrow || $slots.right">
+            <slot name="right">
+                <span v-if="guideText" :class="textRightClasses">{{ guideText }}</span>
+                <vd-icon v-if="arrow" class="vd-title-arrow" name="icon_btn_next"></vd-icon>
+            </slot>
+        </div>
+    </div>
+</template>
+<script>
+import VdIcon from '../icon';
+const prefixCls = 'vd-title';
+
+export default {
+    name: 'vd-title',
+    components: {
+        VdIcon
+    },
+    props: {
+        type: {
+            type: String,
+            default: 'primary'
+        },
+        title: String,
+        leftIcon: String,
+        rightIcon: String,
+        arrow: Boolean,
+        subText: String,
+        guideText: String,
+        sticky: {
+            type: Boolean,
+            default: false
+        }
+
+    },
+    data() {
+        return {
+
+        };
+    },
+    computed: {
+        wrapClasses() {
+            return {
+                [`${prefixCls}-${this.type}`]: this.type,
+                [`${prefixCls}-${this.type}-double`]: this.subText,
+                [`${prefixCls}--sticky`]: this.sticky
+            }
+
+        },
+        leftIconClasses() {
+            return {
+                [`${prefixCls}-${this.type}__icon--left`]: this.type
+            }
+
+        },
+        innerTitleClasses() {
+            return {
+                [`${prefixCls}-${this.type}__title`]: this.type
+            }
+
+        },
+        subTextClasses() {
+            return {
+                [`${prefixCls}-${this.type}__subtext`]: this.type
+            }
+        },
+        rightIconClasses() {
+            return {
+                [`${prefixCls}-${this.type}__icon--right`]: this.type
+            }
+        },
+        textRightClasses() {
+            return {
+                [`${prefixCls}-${this.type}__text--right`]: this.type
+            }
+        }
+    },
+    methods: {
+        handleClick() {
+            if (this.arrow) {
+                this.$emit('next');
+            }
+        },
+    }
+};
+</script>
+
+<style lang="less">
+@import './style.less';
+</style>

package/dist/components/title/style.less

@@ -0,0 +1,188 @@
+
+@title-prefix-cls: vd-title;
+
+.@{title-prefix-cls} {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-inline-start: var(--spacing-title-padding_left);
+    padding-inline-end: var(--spacing-title-padding_right);
+    background-color: var(--bg-color-1);
+
+    &--sticky {
+        position: sticky;
+        top: 0;
+        z-index: 1000;
+    }
+
+    &--right {
+        display: flex;
+        align-items: center;
+    }
+
+    &-content {
+        display: flex;
+        align-items: center;
+    }
+
+    &-inner__title {
+        color: var(--color-title-head);
+    }
+
+    &__subtext {
+        margin-block-start: var(--spacing-title-subtitle-margin_top);
+        color: var(--color-title-text);
+    }
+
+    &-arrow {
+        color: var(--color-title-icon_arrow);
+        font-size: var(--icon-title-arrow);
+    }
+
+    &-primary {
+        height: var(--height-title-primary);
+
+        &__icon--left {
+            margin-inline-end: var(--spacing-title-primary_icon-margin_y);
+            font-size: var(--icon-title-primary);
+        }
+
+        &__icon--right {
+            margin-inline-start: var(--spacing-title-primary_icon-margin_y);
+            font-size: var(--icon-title-primary);
+        }
+
+        &__title {
+            font-size: var(--en-single-f-f-b-fontSize);
+            font-weight: var(--en-single-f-f-b-fontWeight);
+        }
+
+        &__text--right {
+            margin-inline-end: var(--spacing-title-text-margin_right);
+            font-size: var(--en-single-f-c-r-fontSize);
+            font-weight: var(--en-single-f-c-r-fontWeight);
+            color: var(--color-title-text);
+        }
+
+        &__subtext {
+            font-size: var(--en-single-f-c-r-fontSize);
+            font-weight: var(--en-single-f-c-r-fontWeight);
+        }
+    }
+
+    &-secondary {
+        height: var(--height-title-secondary);
+
+        &__icon--left {
+            margin-inline-end: var(--spacing-title-secondary_icon-margin_y);
+            font-size: var(--icon-title-secondary);
+        }
+
+        &__icon--right {
+            margin-inline-start: var(--spacing-title-secondary_icon-margin_y);
+            font-size: var(--icon-title-secondary);
+        }
+
+        &__title {
+            font-size: var(--en-single-f-e-s-fontSize);
+            font-weight: var(--en-single-f-e-s-fontWeight);
+        }
+
+        &__text--right {
+            margin-inline-end: var(--spacing-title-text-margin_right);
+            font-size: var(--en-single-f-c-r-fontSize);
+            font-weight: var(--en-single-f-c-r-fontWeight);
+            color: var(--color-title-text);
+        }
+
+        &__subtext {
+            font-size: var(--en-single-f-b-r-fontSize);
+            font-weight: var(--en-single-f-b-r-fontWeight);
+        }
+    }
+
+    &-tertiary {
+        height: var(--height-title-tertiary);
+
+        &__icon--left {
+            margin-inline-end: var(--spacing-title-tertiary_icon-margin_y);
+            font-size: var(--icon-title-tertiary);
+        }
+
+        &__icon--right {
+            margin-inline-start: var(--spacing-title-tertiary_icon-margin_y);
+            font-size: var(--icon-title-tertiary);
+        }
+
+        &__title {
+            font-size: var(--en-single-f-d-s-fontSize);
+            font-weight: var(--en-single-f-d-s-fontWeight);
+        }
+
+        &__text--right {
+            margin-inline-end: var(--spacing-title-text-margin_right);
+            font-size: var(--en-single-f-b-r-fontSize);
+            font-weight: var(--en-single-f-b-r-fontWeight);
+            color: var(--color-title-text);
+        }
+
+        &__subtext {
+            font-size: var(--en-single-f-b-r-fontSize);
+            font-weight: var(--en-single-f-b-r-fontSize);
+        }
+    }
+
+    &-quaternary {
+        height: var(--height-title-quaternary);
+
+        &__icon--left {
+            margin-inline-end: var(--spacing-title-quaternary_icon-margin_y);
+            font-size: var(--icon-title-quaternary);
+        }
+
+        &__icon--right {
+            margin-inline-start: var(--spacing-title-quaternary_icon-margin_y);
+            font-size: var(--icon-title-quaternary);
+        }
+
+        &__title {
+            font-size: var(--en-single-f-c-s-fontSize);
+            font-weight: var(--en-single-f-c-s-fontWeight);
+        }
+
+        &__text--right {
+            margin-inline-end: var(--spacing-title-text-margin_right);
+            font-size: var(--en-single-f-b-r-fontSize);
+            font-weight: var(--en-single-f-b-r-fontWeight);
+            color: var(--color-title-text);
+        }
+
+        &__subtext {
+            font-size: var(--en-single-f-a-r-fontSize);
+            font-weight: var(--en-single-f-a-r-fontSize);
+        }
+    }
+
+    &-label {
+        padding-inline-start: 0;
+        padding-inline-end: 0;
+        font-size: var(--en-single-f-c-r-fontSize);
+        font-weight: var(--en-single-f-c-r-fontWeight);
+    }
+
+    &-primary-double {
+        height: var(--height-title-primary_double);
+    }
+
+    &-secondary-double {
+        height: var(--height-title-secondary_double);
+    }
+
+    &-tertiary-double {
+        height: var(--height-title-tertiary_double);
+    }
+
+    &-quaternary-double {
+        height: var(--height-title-quaternary_double);
+    }
+}

package/dist/components/toast/index.js

@@ -0,0 +1,83 @@
+import Vue from 'vue';
+import ToastComponent from './index.vue';
+import { inBrowser } from '../utils/env';
+
+let timer = null;
+let currentToast = null;
+
+class VdToast extends Vue.extend(ToastComponent) {
+  constructor(options) {
+    super();
+
+    this.vm = this.$mount();
+
+    // 支持字符串或对象传入
+    if (typeof options === 'string' || typeof options === 'number') {
+      this.message = options;
+    } else if (typeof options === 'object') {
+      Object.assign(this, options);
+    }
+
+    this.init();
+  }
+
+  init() {
+    if (inBrowser) {
+      document.body.appendChild(this.vm.$el);
+      this.start();
+    }
+  }
+
+  start() {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      this.isShow = true;
+
+      if (this.duration > 0) {
+        this.end();
+      }
+    }, 100);
+  }
+
+  end() {
+    clearTimeout(timer);
+    if (this.duration > 0) {
+      timer = setTimeout(() => {
+        this.isShow = false;
+        setTimeout(() => {
+          // 检查元素是否仍在 DOM 中
+          if (inBrowser && document.body.contains(this.vm.$el)) {
+            document.body.removeChild(this.vm.$el);
+          }
+        }, 500);
+      }, this.duration);
+    }
+  }
+
+  clear() {
+    this.isShow = false;
+    clearTimeout(timer);
+    // 检查元素是否仍在 DOM 中
+    if (inBrowser && document.body.contains(this.vm.$el)) {
+      document.body.removeChild(this.vm.$el);
+    }
+  }
+}
+
+// 创建静态方法以支持直接调用
+const showToast = options => {
+  currentToast && currentToast.clear(); // 清除现有的 toast
+  currentToast = new VdToast(options); // 创建新的 toast 实例
+  return currentToast;
+};
+
+// 添加静态方法，支持手动清除
+showToast.clear = () => {
+  currentToast && currentToast.clear();
+  currentToast = null;
+};
+
+// 在 Vue 的原型上挂载，方便全局调用
+Vue.prototype.$VdToast = showToast;
+
+export default showToast;

package/dist/components/toast/index.vue

@@ -0,0 +1,49 @@
+<template>
+  <!-- 消息提示 -->
+  <div :class="['vd-toast', { 'vd-toast-show': isShow }, { 'vd-toast-icon': !!icon }, customClass]"
+    :style="`background:${bgColor};`">
+    <i v-if="!!icon" class="vd-iconfont" :class="[isImage ? '' : `vd-icon-${icon}`]">
+      <img class="vd-img-icon" v-if="isImage" :src="icon" />
+    </i>
+    <div>{{ message }}</div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'vd-toast',
+  data() {
+    return {
+      message: '', // 提示语
+      isShow: false, // 是否显示
+      bgColor: '', // 背景颜色
+      icon: '', // 图标
+      duration: 1500, // 延迟时间
+      position: 'middle' // default:middle, value: top, bottom
+    }
+  },
+  computed: {
+    isImage() {
+      return this.icon.includes('/');
+    },
+    customClass() {
+      var classes = [];
+      switch (this.position) {
+        case 'top':
+          classes.push('vd-toast__top');
+          break;
+        case 'bottom':
+          classes.push('vd-toast__bottom');
+          break;
+        default:
+          classes.push('vd-toast__middle');
+      }
+      classes.push(this.className);
+
+      return classes.join(' ');
+    }
+  }
+}
+</script>
+<style lang="less">
+@import './style.less';
+</style>

package/dist/components/toast/style.less

@@ -0,0 +1,55 @@
+@prefix: ~"vd-toast";
+
+.@{prefix} {
+  display: inline-block;
+  width: max-content;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  box-sizing: border-box;
+  text-align: center;
+  z-index: 1000;
+  transition: opacity .3s linear;
+  opacity: 0;
+  // token
+  min-width: var(--width-toast-small);
+  max-width: var(--width-toast-large);
+  padding: var(--spacing-toast-padding_x) var(--spacing-toast-padding_y);
+  background-color: var(--color-toast-bg);
+  border-radius: var(--radius-toast-content);
+  color: var(--color-toast-text);
+  font-size: var(--en-single-f-c-r-fontSize);
+  font-weight: var(--en-single-f-c-r-fontWeight);
+
+  &.vd-toast-show {
+    opacity: 1;
+  }
+
+  &-icon {
+    min-height: var(--height-toast-small);
+
+    .vd-iconfont {
+      font-size: var(--icon-toast-size);
+      margin-bottom: var(--spacing-toast-icon-margin_bottom);
+    }
+  }
+
+  &__top {
+    top: 50px;
+    left: 50%;
+    transform: translate(-50%, 0);
+  }
+
+  &__middle {
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  &__bottom {
+    bottom: 50px;
+    left: 50%;
+    transform: translate(-50%, 0);
+  }
+}

package/dist/components/transition/index.js

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