vdesign-ui 0.1.20 → 0.1.21

package/dist/components/dialog/index.vue

@@ -1,162 +0,0 @@
-<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

@@ -1,18 +0,0 @@
-
-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

@@ -1,132 +0,0 @@
-@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

@@ -1,8 +0,0 @@
-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

@@ -1,54 +0,0 @@
-<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

@@ -1,92 +0,0 @@
-@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

@@ -1,8 +0,0 @@
-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

@@ -1,210 +0,0 @@
-<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>