vdesign-ui 0.1.21 → 0.1.23

package/dist/components/dialog/index.vue

@@ -0,0 +1,162 @@
+<template>
+    <div class="vd-dialog-wrap">
+        <div class="vd-overlay" v-if="visible && isOverlayVisible &&  overlay" :style="{ zIndex: overlayZIndex }"
+        @click="handleOverlayClick()"></div>
+        <transition name="vd-dialog-fade">
+            <div class="vd-dialog"  v-if="visible" :class="className ? `vd-dialog--${className}` : ''" :style="{width : width, zIndex: overlayZIndex + 1}">
+                <header class="vd-dialog__header" :class="{ 'vd-dialog__header--img': $slots.imgs }">
+                    <div class="vd-dialog__header--img-content" v-if="$slots.imgs">
+                        <slot name="imgs"></slot>
+                    </div>
+                    <div class="vd-dialog__title">{{ title }}</div>
+                </header>
+                <div class="vd-dialog__content">
+                    <div class="vd-dialog__message" :class="{ 'vd-dialog__message--head': !title }"
+                        v-if="message || $slots.content">
+                        <slot name="content">{{
+                            message
+                            }}</slot>
+                    </div>
+                </div>
+                <footer class="vd-dialog__footer">
+                    <div class="vd-dialog__btns" v-if="btns">
+                        <vd-button type="tertiary_grey" size="large" @click="cancel">{{ cancelButtonText ||
+                            $t("alert.cancel") }}</vd-button>
+                        <vd-button type="large" @click="confirm">{{ confirmButtonText || $t("alert.confirm") }} </vd-button>
+                    </div>
+                    <div class="vd-dialog__btn" v-if="btn">
+                        <vd-button type="large" @click="confirm" block>{{ confirmButtonText || $t("alert.confirm")
+                            }}</vd-button>
+                    </div>
+                    <div class="vd-dialog__btns--text" v-if="btnsText">
+                        <vd-button type="tertiary_text" size="large" @click="cancel">{{ cancelButtonText ||
+                            $t("alert.cancel")
+                            }}</vd-button>
+                        <vd-button type="primary_text" size="large" @click="confirm">{{ confirmButtonText ||
+                            $t("alert.confirm") }}</vd-button>
+                    </div>
+                    <div class="vd-dialog__btn--text-block" v-if="btnTextBlock">
+                        <vd-button type="primary_text" size="large" block @click="confirm">{{ confirmButtonText ||
+                            $t("alert.confirm") }}</vd-button>
+                    </div>
+                    <div class="vd-dialog__btns-block" v-if="btnsBlock">
+                        <vd-button type="primary" block size="large" @click="confirm">{{ confirmButtonText ||
+                            $t("alert.confirm") }}</vd-button>
+                        <vd-button type="primary_text" block size="large" @click="cancel">{{ cancelButtonText ||
+                            $t("alert.cancel") }}</vd-button>
+                    </div>
+                    <div class="vd-dialog__btns--text" v-if="$slots['extra-btn']">
+                        <slot name="extra-btn"></slot>
+                    </div>
+                </footer>
+            </div>
+        </transition>
+    </div>
+</template>
+
+<script>
+
+import { OverlayManager } from './overlay-manager.js';
+
+export default {
+    name: 'vd-dialog',
+    props: {
+        value: Boolean,
+        btns: Boolean,
+        btnsBlock: Boolean,
+        btn: Boolean,
+        btnsText: Boolean,
+        btnTextBlock: Boolean,
+        message: String,
+        title: String,
+        className: String,
+        overlay: {
+            type: Boolean,
+            default: true
+        },
+        confirmButtonText: String,
+        cancelButtonText: String,
+        closeOnOverlay: {
+            type: Boolean,
+            default: true
+        },
+        width: [Number, String],
+    },
+    data() {
+        return {
+            isOverlayVisible: false,
+            overlayZIndex: 2000
+        }
+    },
+    watch: {
+        visible(val) {
+            if (val) {
+                this.showOverlayLayer();
+            } else {
+                this.hideOverlayLayer();
+            }
+        }
+    },
+    computed: {
+        visible() {
+            return this.value
+        }
+    },
+    methods: {
+        showOverlayLayer() {
+            if (this.overlay) {
+                OverlayManager.increment();
+                this.isOverlayVisible = OverlayManager.isOverlayVisible();
+                this.overlayZIndex = OverlayManager.getZIndex();
+            }
+        },
+        hideOverlayLayer() {
+            if (this.overlay) {
+                OverlayManager.decrement();
+                this.isOverlayVisible = OverlayManager.isOverlayVisible();
+                this.overlayZIndex = OverlayManager.getZIndex(); // 更新 z-index，以便其他遮罩正确显示
+            }
+        },
+        handleOverlayClick() {
+            if (this.closeOnOverlay) {
+                this.closeDialog();
+            }
+        },
+        closeDialog() {
+            this.$emit('input', false);
+        },
+        cancel() {
+            this.closeDialog();
+            this.$emit('cancel');
+        },
+        confirm() {
+            this.closeDialog();
+            this.$emit('confirm');
+        },
+    },
+    mounted() {
+        if (this.visible) {
+            this.showOverlayLayer();
+        }
+    },
+    beforeDestroy() {
+        if (this.visible) {
+            this.hideOverlayLayer();
+        }
+    }
+}
+</script>
+
+<style lang="less">
+@import './style.less';
+
+.vd-dialog-fade-enter-active,
+.vd-dialog-fade-leave-active {
+  transition: transform 0.3s, opacity 0.3s;
+}
+.vd-dialog-fade-enter,
+.vd-dialog-fade-leave-to {
+  transform: translate(-50%, -50%) scale(.8);
+  opacity: 0;
+}
+</style>

package/dist/components/dialog/overlay-manager.js

@@ -0,0 +1,18 @@
+
+let overlayCount = 0;
+
+export const OverlayManager = {
+  increment() {
+    overlayCount += 1;
+  },
+  decrement() {
+    overlayCount -= 1;
+    if (overlayCount < 0) overlayCount = 0;
+  },
+  isOverlayVisible() {
+    return overlayCount > 0;
+  },
+  getZIndex() {
+    return 2000 + overlayCount; // 每个遮罩层递增的 z-index
+  }
+};

package/dist/components/dialog/style.less

@@ -0,0 +1,132 @@
+@dialog-prefix-cls: vd-dialog;
+
+.@{dialog-prefix-cls} {
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    z-index: 2111;
+    transform: translate(-50%, -50%);
+    width: 279px;
+    background-color: var(--color-dialog-bg);
+    border-radius: calc(var(--radius-dialog-content) * 1px);
+    padding-inline-start: calc(var(--spacing-dialog-padding_left) * 1px);
+    padding-inline-end: calc(var(--spacing-dialog-padding_right) * 1px);
+
+    ::-webkit-scrollbar {
+        width: 3px;
+    }
+
+
+    &__header {
+        padding-block-start: calc(var(--spacing-dialog-padding_top) * 1px);
+
+        &--img {
+            padding-block-start: calc(var(--spacing-dialog-icon-padding_top) * 1px);
+
+            &-content {
+                text-align: center;
+                margin-block-end: calc(var(--spacing-dialog-icon_title-margin_top) * 1px);
+            }
+        }
+
+    }
+
+    &__title {
+        text-align: center;
+        font-size: calc(var(--en-multi-f-e-s-fontSize) * 1px);
+        font-weight: var(--en-multi-f-e-s-fontWeight);
+        line-height: calc(var(--en-multi-f-e-s-lineHeight) * 1px);
+        color: var(--color-dialog-title);
+    }
+
+    &__message {
+        text-align: center;
+        overflow-y: auto;
+        min-height: calc(var(--height-dialog-super_small) * 1px);
+        max-height: calc(var(--height-dialog-super_large) * 1px);
+        margin-block-start: calc(var(--spacing-dialog-title-margin_bottom) * 1px);
+        font-size: calc(var(--en-multi-f-d-r-fontSize) * 1px);
+        font-weight: var(--en-multi-f-d-r-fontWeight);
+        line-height: calc(var(--en-multi-f-d-r-lineHeight) * 1px);
+        color: var(--color-dialog-text);
+
+        &--head {
+            margin-block-start: 0;
+            color: var(--color-dialog-title);
+        }
+    }
+
+    &__footer {
+        margin-block-start: calc(var(--spacing-dialog-button-margin_top) * 1px);
+    }
+
+    &__btns {
+        display: flex;
+        justify-content: space-between;
+        padding-block-end: calc(var(--spacing-dialog-padding_bottom) * 1px);
+
+        button {
+            flex: 1;
+        }
+
+        button+button {
+            margin-inline-start: calc(var(--spacing-dialog-button_double-margin_mid) * 1px);
+        }
+    }
+
+    &__btn {
+        padding-block-end: calc(var(--spacing-dialog-padding_bottom) * 1px);
+        padding-inline-start: calc(var(--spacing-dialog-button_single-margin_left) * 1px);
+        padding-inline-end: calc(var(--spacing-dialog-button_single-margin_right) * 1px);
+    }
+
+    &__btns--text {
+        display: flex;
+        justify-content: space-between;
+        padding-block-end: calc(var(--spacing-dialog-button_text-padding_bottom) * 1px);
+
+        button {
+            flex: 1;
+        }
+
+        button+button {
+            margin-inline-start: calc(var(--spacing-dialog-button_double-margin_mid) * 1px);
+        }
+    }
+
+    &__btn--text-block {
+        display: flex;
+        justify-content: space-between;
+        padding-block-end: calc(var(--spacing-dialog-button_text-padding_bottom) * 1px);
+    }
+
+    &__btns-block {
+
+        padding-block-end: calc(var(--spacing-dialog-button_text-padding_bottom) * 1px);
+
+        button {
+            flex: 1;
+        }
+
+        button+button {
+            margin-block-start: calc(var(--spacing-dialog-button_double-margin_mid) * 1px);
+        }
+    }
+
+}
+
+.vd-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 2001;
+    width: 100%;
+    height: 100%;
+    background-color: var(--color-dialog-mask_bg);
+}
+
+html[theme="dark"] {
+    .@{dialog-prefix-cls} {
+        background: linear-gradient(0deg, var(--bg-color-4) 0%, var(--bg-color-4) 100%), var(--bg-color-1);
+    }
+}

package/dist/components/divider/index.js

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

package/dist/components/divider/index.vue

@@ -0,0 +1,54 @@
+<template>
+    <div class="vd-divider" :class="wrapClasses">
+        <span v-if="hasSlot" class="vd-divider__text">
+            <slot></slot>
+        </span>
+    </div>
+</template>
+
+<script>
+const prefixCls = 'vd-divider';
+
+export default {
+    name: 'vd-divider',
+    props: {
+        hairline: {
+            type: Boolean,
+            default: true
+        },
+        direction: {
+            type: String,
+            default: 'horizontal',
+            validator: value => ['horizontal', 'vertical'].includes(value)
+        },
+        type: String,
+        contentPosition: String,
+    },
+    data() {
+        return {
+
+        }
+    },
+    computed: {
+        hasSlot() {
+            return this.$slots.default;
+        },
+        wrapClasses() {
+            return [
+                `${prefixCls}--${this.direction}`,
+                {
+                    [`${prefixCls}-with-text--${this.contentPosition}`]: this.contentPosition,
+                    [`${prefixCls}--hairline`]: this.hairline,
+                    [`${prefixCls}--${this.type}`]: this.type,
+                    [`${prefixCls}-with-text`]: this.hasSlot
+                }
+            ]
+        },
+
+    }
+}
+</script>
+
+<style lang="less">
+@import './style.less';
+</style>

package/dist/components/divider/style.less

@@ -0,0 +1,92 @@
+@divider-prefix-cls: vd-divider;
+
+.@{divider-prefix-cls} {
+
+    &--hairline::before,
+    &--hairline::after {
+        transform: scaleY(0.5);
+    }
+
+    &--horizontal {
+        display: flex;
+        align-items: center;
+        border-style: solid;
+        border-width: 0;
+
+        &::before {
+            content: '';
+        }
+
+        &::before,
+        &::after {
+            display: block;
+            flex: 1;
+            box-sizing: border-box;
+            height: 1px;
+            border-color: inherit;
+            border-style: inherit;
+            border-width: 1px 0 0;
+        }
+
+    }
+
+    &--vertical {
+        display: inline-flex;
+
+        &.@{divider-prefix-cls}--hairline {
+
+            &::before {
+                transform: scale(0.5, 1);
+            }
+        }
+
+        &::before {
+            content: '';
+            display: block;
+            width: 1px;
+            height: 1em;
+            background-color: var(--divider-color-default-1);
+        }
+
+        &.@{divider-prefix-cls}--large {
+            &::before {
+                background-color: var(--divider-color-default-2);
+            }
+        }
+    }
+
+    &--hairline {
+        border-color: var(--divider-color-default-1);
+    }
+
+    &--large {
+        border-color: var(--divider-color-default-2);
+    }
+
+
+    &-with-text {
+        &::after {
+            content: '';
+        }
+
+        &--left {
+            &::before {
+                max-width: 20%;
+            }
+        }
+
+        &--right {
+            &::after {
+                max-width: 20%;
+            }
+        }
+    }
+
+
+
+    &__text {
+        font-size: 12px;
+        color: rgba(0, 0, 0, 0.3);
+        margin: 0 calc(var(--spacing-tight) * 1px);
+    }
+}

package/dist/components/dropdown/index.js

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

package/dist/components/dropdown/index.vue

@@ -0,0 +1,210 @@
+<template>
+  <div class="vd-dropdown" :class="wrapClasses" v-show="isMask">
+    <transition :name="isAnimation ? 'vd-dropdown-fade' : ''">
+      <div class="vd-menu-mask" @click.stop="clickMenuMask"></div>
+    </transition>
+
+    <transition :name="isAnimation ? 'vd-dropdown-slide-down' : ''">
+      <div class="vd-dropdown-menu" v-show="value">
+
+        <template v-if="!isMultiple && !$slots.custom">
+          <div class="vd-dropdown-item" :class="itemClass(item)" v-for="(item, index) of datalist" :key="item.name"
+            @click.stop="selectedItem(item, index)">
+            <span class="vd-dropdown-left">
+              <vd-icon v-if="item.icon" :name="item.icon" svg class="vd-dropdown-icon"></vd-icon>
+              <span class="vd-dropdown-group-cell">
+                <span class="vd-dropdown-text">
+                  {{ item.text }}
+                </span>
+                <span v-if="['group'].includes(types)" class="vd-dropdown-group-sub">
+                  <vd-icon v-if="item.subIcon" :name="item.subIcon" svg class="vd-dropdown-sub-icon"></vd-icon>
+                  <span class="vd-dropdown-subtext" v-html="item.subText"></span>
+                </span>
+              </span>
+            </span>
+
+            <vd-icon v-if="['primary'].includes(types) && item.selected" class="vd-dropdown-active-select"
+              name="icon_btn_singleslt" color="#1BC47D"></vd-icon>
+            <span v-if="['state'].includes(types)" v-html="item.stateText" class="vd-dropdown-state-text"
+              :class="`vd-dropdown-state-text--${item.state}`"></span>
+          </div>
+        </template>
+
+        <template v-if="isMultiple">
+          <div class="vd-dropdown-item" :class="itemClass(item)" v-for="item of datalist" :key="item.name">
+
+            <vd-checkbox v-model="item.selected"
+              :disabled="!item.selected && max <= list.filter(value => value.selected == true).length ? true : false">
+              {{ item.text }}
+            </vd-checkbox>
+
+            <vd-icon v-if="['primary'].includes(types) && item.selected" class="vd-dropdown-active-select"
+              name="icon_btn_singleslt" color="#1BC47D"></vd-icon>
+          </div>
+          <div class="vd-dropdown--btn">
+            <vd-button block size="small" type="tertiary_grey" @click="resetMenu">{{ resetBtnTxt }}</vd-button>
+            <vd-button block size="small" @click="sureMenu">{{ okBtnTxt }}</vd-button>
+          </div>
+        </template>
+
+        <div class="vd-dropdown-item" v-if="$slots.custom">
+          <slot name="custom">{{ custom }}</slot>
+        </div>
+      </div>
+    </transition>
+
+  </div>
+</template>
+<script>
+const prefixCls = 'vd-dropdown';
+export default {
+  name: 'vd-dropdown',
+  props: {
+    isAnimation: {
+      //是否有动画效果
+      type: Boolean,
+      default: false
+    },
+    types: {
+      type: String,
+      default: 'primary',
+      validator: value => ['primary', 'secondary', 'state', 'group'].includes(value)
+    },
+    value: {
+      //是否显示
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    isMultiple: {
+      type: Boolean,
+      default: false
+    },
+    col: {
+      //显示的列数
+      type: [Number, String],
+      default: 1
+    },
+    max: {
+      type: [String, Number],
+      default: 5
+    },
+    custom: {
+      type: String,
+      default: ''
+    },
+    list: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    },
+    // state
+    state: {
+      type: String,
+      default: 'close',
+      validator: value => ['open', 'preopen', 'close', 'fusing', 'pre', 'last'].includes(value)
+    },
+    stateText: {
+      type: String,
+      default: ''
+    },
+    // group
+    subText: {
+      type: String,
+      default: ''
+    },
+    subIcon: {
+      type: String,
+      default: ''
+    }
+  },
+  watch: {
+    value(val) {
+      this.isMask = val ? true : false
+    }
+  },
+  data() {
+    return {
+      datalist: [],
+      isMask: false
+    };
+  },
+  mounted() {
+    this.datalist = [...this.list];
+  },
+  computed: {
+    wrapClasses() {
+      return {
+        [`${prefixCls}-${this.types}`]: this.types,
+        [`${prefixCls}--divided`]: this.types !== 'state',
+      };
+    },
+    okBtnTxt() {
+      return '确定';
+    },
+    resetBtnTxt() {
+      return '重置';
+    }
+  },
+  methods: {
+    itemClass(item) {
+      return {
+        [`${prefixCls}--disabled`]: item.disabled,
+        [`${prefixCls}--active`]: item.selected
+      }
+    },
+    clickMenuMask() {
+      this.isMask = false;
+      this.$emit('close');
+    },
+    selectedItem(item, index) {
+      this.$emit('change', item, index);
+    },
+    selectMultiple(index) {
+      const count = this.datalist.filter(item => item.selected).length;
+      if (!this.datalist[index].selected && count >= this.max) {
+        this.$emit('maxTip');
+        return;
+      }
+      this.$set(this.datalist[index], 'selected', !this.datalist[index].selected);
+    },
+    resetMenu() {
+      this.datalist.map(value => (value.selected = false));
+      this.$emit('reset', this.datalist);
+    },
+    sureMenu() {
+      this.isMask = false;
+      this.$emit('close');
+      this.$emit('ok', this.datalist);
+    }
+  }
+};
+</script>
+
+<style lang="less">
+@import './style.less';
+
+.vd-dropdown-fade-enter-active,
+.vd-dropdown-fade-leave-active {
+  transition: opacity 0.5s;
+}
+
+.vd-dropdown-fade-enter,
+.vd-dropdown-fade-leave-to {
+  opacity: 0;
+}
+
+.vd-dropdown-slide-down-enter-active,
+.vd-dropdown-slide-down-leave-active {
+  transition: transform 0.5s;
+}
+
+.vd-dropdown-slide-down-enter,
+.vd-dropdown-slide-down-leave-to {
+  transform: translateY(-20px);
+}
+</style>