vdesign-ui 0.1.21 → 0.1.22

package/dist/components/dropdown/style.less

@@ -0,0 +1,418 @@
+.vd-menu-mask {
+  position: fixed;
+  z-index: 999;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0);
+}
+
+
+@dropdown-prefix-cls: vd-dropdown;
+
+
+.@{dropdown-prefix-cls} {
+  --translate-x: -50%;
+
+  position: relative;
+  font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
+
+  // 额外加的 btn，token之外的
+  &--btn {
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 10px 0;
+    gap: 10px;
+  }
+
+  &-menu {
+    z-index: 1000;
+    background: #fff;
+    transform-origin: top center;
+    position: absolute;
+    transition: transform 0.25s ease, opacity 0.25s ease;
+    inset-inline-start: 50%;
+    inset-block-start: 100%;
+    transform: translate(var(--translate-x), 2px);
+  }
+
+
+  &-primary {
+    .@{dropdown-prefix-cls}-menu {
+      display: inline-block;
+      overflow-y: auto;
+      min-width: calc(var(--width-dropdown-primary_small) * 1px);
+      max-height: calc(var(--height-dropdown-primary_large) * 1px);
+      background-color: var(--color-dropdown-bg-default);
+      padding-block-start: calc(var(--spacing-dropdown-primary-padding_x) * 1px);
+      padding-block-end: calc(var(--spacing-dropdown-primary-padding_x) * 1px);
+      padding-inline-start: calc(var(--spacing-dropdown-primary-padding_y) * 1px);
+      padding-inline-end: calc(var(--spacing-dropdown-primary-padding_y) * 1px);
+      box-shadow: var(--shadow-s2);
+      border-radius: calc(var(--radius-dropdown-primary) * 1px);
+    }
+
+    .@{dropdown-prefix-cls}-item {
+      position: relative;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      height: calc(var(--height-dropdown-primary_item) * 1px);
+      line-height: calc(var(--height-dropdown-primary_item) * 1px);
+    }
+
+    .@{dropdown-prefix-cls} {
+      &-left {
+        display: flex;
+        align-items: center;
+      }
+
+      &-text {
+        white-space: nowrap;
+        color: var(--color-dropdown-primary-text-default);
+        font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
+        font-weight: var(--en-single-f-c-r-fontWeight);
+      }
+
+      &-icon {
+        font-size: calc(var(--icon-dropdown-primary) * 1px);
+        margin-inline-end: calc(var(--spacing-dropdown-primary_icon-margin_right) * 1px);
+      }
+
+      &-active-select {
+        font-size: calc(var(--icon-dropdown-primary_select) * 1px);
+        margin-inline-start: calc(var(--spacing-dropdown-primary_icon_select-margin_left) * 1px);
+        transform: scaleX(1) !important;
+        direction: ltr;
+      }
+
+    }
+
+    .@{dropdown-prefix-cls}--active {
+      .@{dropdown-prefix-cls}-text {
+        color: var(--color-dropdown-primary-text-active);
+        font-size: calc(var(--en-single-f-c-s-fontSize) * 1px);
+        font-weight: var(--en-single-f-c-s-fontWeight);
+      }
+    }
+
+    .@{dropdown-prefix-cls}--disabled {
+      pointer-events: none;
+      cursor: not-allowed;
+
+      .@{dropdown-prefix-cls}-text {
+        color: var(--color-dropdown-primary-text-disable);
+        font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
+        font-weight: var(--en-single-f-c-r-fontWeight);
+      }
+
+      .@{dropdown-prefix-cls}-icon {
+        opacity: var(--opacity-30);
+      }
+    }
+  }
+
+  &-secondary {
+    .@{dropdown-prefix-cls}-menu {
+      display: inline-block;
+      overflow-y: auto;
+      max-height: calc(var(--height-dropdown-secondary_large) * 1px);
+      background-color: var(--color-dropdown-bg-default);
+      padding-block-start: calc(var(--spacing-dropdown-secondary-padding_x) * 1px);
+      padding-block-end: calc(var(--spacing-dropdown-secondary-padding_x) * 1px);
+      padding-inline-start: calc(var(--spacing-dropdown-secondary-padding_y) * 1px);
+      padding-inline-end: calc(var(--spacing-dropdown-secondary-padding_y) * 1px);
+      box-shadow: var(--shadow-s2);
+      border-radius: calc(var(--radius-dropdown-secondary) * 1px);
+    }
+
+    .@{dropdown-prefix-cls}-item {
+      position: relative;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      height: calc(var(--height-dropdown-secondary_item) * 1px);
+      line-height: calc(var(--height-dropdown-secondary_item) * 1px);
+    }
+
+    .@{dropdown-prefix-cls} {
+      &-left {
+        display: flex;
+        align-items: center;
+      }
+
+      &-text {
+        white-space: nowrap;
+        color: var(--color-dropdown-secondary-text-default);
+        font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
+        font-weight: var(--en-single-f-c-r-fontWeight);
+      }
+
+      &-icon {
+        font-size: calc(var(--icon-dropdown-secondary) * 1px);
+        margin-inline-end: calc(var(--spacing-dropdown-secondary_icon-margin_right) * 1px);
+      }
+
+
+    }
+
+    .@{dropdown-prefix-cls}--active {
+      .@{dropdown-prefix-cls}-text {
+        color: var(--color-dropdown-secondary-text-active);
+        font-size: calc(var(--en-single-f-c-s-fontSize) * 1px);
+        font-weight: var(--en-single-f-c-s-fontWeight);
+      }
+    }
+
+    .@{dropdown-prefix-cls}--disabled {
+      pointer-events: none;
+      cursor: not-allowed;
+
+      .@{dropdown-prefix-cls}-text {
+        color: var(--color-dropdown-secondary-text-disable);
+        font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
+        font-weight: var(--en-single-f-c-r-fontWeight);
+      }
+
+      .@{dropdown-prefix-cls}-icon {
+        opacity: var(--opacity-30);
+      }
+    }
+  }
+
+  &-state {
+    .@{dropdown-prefix-cls}-menu {
+      overflow-y: auto;
+      min-width: calc(var(--width-dropdown-state_small) * 1px);
+      max-height: calc(var(--height-dropdown-state_large) * 1px);
+      background-color: var(--color-dropdown-bg-default);
+      padding-block-start: calc(var(--spacing-dropdown-state-padding_x) * 1px);
+      padding-block-end: calc(var(--spacing-dropdown-state-padding_x) * 1px);
+      padding-inline-start: calc(var(--spacing-dropdown-state-padding_y) * 1px);
+      padding-inline-end: calc(var(--spacing-dropdown-state-padding_y) * 1px);
+      box-shadow: var(--shadow-s2);
+      border-radius: calc(var(--radius-dropdown-state) * 1px);
+    }
+
+    .@{dropdown-prefix-cls}-item {
+      position: relative;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      height: calc(var(--height-dropdown-state_item) * 1px);
+      line-height: calc(var(--height-dropdown-state_item) * 1px);
+      padding-inline-start: calc(var(--spacing-dropdown-state_item-padding_y) * 1px);
+      padding-inline-end: calc(var(--spacing-dropdown-state_item-padding_y) * 1px);
+      border-radius: calc(var(--radius-dropdown-state_item) * 1px);
+    }
+
+    .@{dropdown-prefix-cls} {
+      &-left {
+        display: flex;
+        align-items: center;
+        flex: 1;
+        overflow: hidden;
+      }
+
+      &-text {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+        color: var(--color-dropdown-state-text-default);
+        font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
+        font-weight: var(--en-single-f-c-r-fontWeight);
+      }
+
+      &-icon {
+        font-size: calc(var(--icon-dropdown-state) * 1px);
+        margin-inline-end: calc(var(--spacing-dropdown-state_icon-margin_right) * 1px);
+      }
+
+      &-state-text {
+        font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
+        font-weight: var(--en-single-f-b-r-fontWeight);
+
+        &::before {
+          content: '';
+          display: inline-block;
+          border-radius: 50%;
+          width: calc(var(--width-dropdown-state_drop) * 1px);
+          height: calc(var(--width-dropdown-state_drop) * 1px);
+          margin-inline-start: calc(var(--spacing-dropdown-state_drop-margin_left) * 1px);
+          margin-inline-end: calc(var(--spacing-dropdown-state_drop-margin_right) * 1px);
+          background-color: var(--color-dropdown-state-open);
+        }
+
+        &--open {
+          color: var(--color-dropdown-state-open);
+
+          &::before {
+            background-color: var(--color-dropdown-state-open);
+          }
+        }
+
+        &--preopen {
+          color: var(--color-dropdown-state-preopen);
+
+          &::before {
+            background-color: var(--color-dropdown-state-preopen);
+          }
+        }
+
+        &--close {
+          color: var(--color-dropdown-state-close);
+
+          &::before {
+            background-color: var(--text-color-h3);
+          }
+        }
+
+        &--fusing {
+          color: var(--color-dropdown-state-fusing);
+
+          &::before {
+            background-color: var(--color-dropdown-state-fusing);
+          }
+        }
+
+        &--pre {
+          color: var(--color-dropdown-state-pre_market_auction);
+
+          &::before {
+            background-color: var(--color-dropdown-state-pre_market_auction);
+          }
+        }
+
+        &--last {
+          color: var(--color-dropdown-state-last_trading_session);
+
+          &::before {
+            background-color: var(--color-dropdown-state-last_trading_session);
+          }
+        }
+      }
+
+
+    }
+
+    .@{dropdown-prefix-cls}--active {
+      background: var(--color-dropdown-state-bg-active);
+
+      .@{dropdown-prefix-cls}-text {
+        color: var(--color-dropdown-state-text-active);
+      }
+    }
+
+    .@{dropdown-prefix-cls}--disabled {
+      pointer-events: none;
+      cursor: not-allowed;
+
+      .@{dropdown-prefix-cls}-text {
+        font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
+        font-weight: var(--en-single-f-c-r-fontWeight);
+      }
+
+      .@{dropdown-prefix-cls}-icon {
+        opacity: var(--opacity-30);
+      }
+
+    }
+  }
+
+  &-group {
+    .@{dropdown-prefix-cls}-menu {
+      overflow-y: auto;
+      min-width: calc(var(--width-dropdown-group_default) * 1px);
+      max-height: calc(var(--height-dropdown-group_large) * 1px);
+      background-color: var(--color-dropdown-bg-default);
+      padding-block-start: calc(var(--spacing-dropdown-group-padding_x) * 1px);
+      padding-block-end: calc(var(--spacing-dropdown-group-padding_x) * 1px);
+      padding-inline-start: calc(var(--spacing-dropdown-group-padding_y) * 1px);
+      padding-inline-end: calc(var(--spacing-dropdown-group-padding_y) * 1px);
+      box-shadow: var(--shadow-s2);
+      border-radius: calc(var(--radius-dropdown-group) * 1px);
+    }
+
+    .@{dropdown-prefix-cls}-item {
+      position: relative;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding-block-start: calc(var(--spacing-dropdown-group_item-padding_top) * 1px);
+      padding-block-end: calc(var(--spacing-dropdown-group_item-padding_bottom) * 1px);
+
+    }
+
+    .@{dropdown-prefix-cls} {
+      &-left {
+        display: flex;
+        align-items: center;
+      }
+
+      &-group-cell {
+        display: flex;
+        flex-direction: column;
+        color: var(--color-dropdown-state-text-default);
+        font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
+        font-weight: var(--en-single-f-c-r-fontWeight);
+      }
+
+      &-text {
+        color: var(--color-dropdown-group-title-default);
+        font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
+        font-weight: var(--en-single-f-c-r-fontWeight);
+      }
+
+      &-group-sub {
+        display: flex;
+        align-items: center;
+        margin-block-start: calc(var(--spacing-dropdown-group_text-margin_bottom) * 1px);
+      }
+
+      &-sub-icon {
+        font-size: calc(var(--icon-dropdown-group) * 1px);
+        margin-inline-end: 6px;
+      }
+
+      &-subtext {
+        color: var(--color-dropdown-group-text-default);
+        font-size: calc(var(--en-single-f-c-s-fontSize) * 1px);
+        font-weight: var(--en-single-f-c-s-fontWeight);
+      }
+
+      &-multext {
+        margin-block-start: calc(var(--spacing-dropdown-group_text-margin_bottom) * 1px);
+      }
+
+    }
+  }
+
+  &--divided {
+    .@{dropdown-prefix-cls}-item {
+      &:not(:last-child)::after {
+        position: absolute;
+        box-sizing: border-box;
+        content: ' ';
+        pointer-events: none;
+        top: -50%;
+        right: -50%;
+        bottom: -50%;
+        left: -50%;
+        border: 0 solid var(--color-dropdown-divider);
+        -webkit-transform: scale(0.5);
+        transform: scale(0.5);
+        border-bottom-width: 1px;
+      }
+    }
+  }
+}
+
+
+
+[dir="rtl"] .@{dropdown-prefix-cls} {
+  --translate-x: 50%;
+}

package/dist/components/empty/index.js

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

package/dist/components/empty/index.vue

@@ -0,0 +1,95 @@
+<template>
+    <div class="vd-empty" :class="wrapClasses">
+        <div class="vd-empty-img"><img :src="currentImg" alt="img"></div>
+        <p class="vd-empty-txt" :class="textClasses" v-if="description">{{ description }}</p>
+        <div class="vd-empty-footer" :class="footerClasses" v-if="$slots.btn">
+            <slot name="btn"></slot>
+        </div>
+    </div>
+</template>
+
+<script>
+import { themeMixin } from '@p/components/mixins/themeMixin';
+
+const prefixCls = 'vd-empty';
+
+export default {
+    name: 'vd-empty',
+    mixins: [themeMixin],  // 引入混入
+    props: {
+        imgs: String,
+        description: String,
+        size: String,
+        type: {
+            type: String,
+            default: 'nodata',  // 默认类型
+            validator(value) {
+                // 只接受以下类型值
+                return ['nodata', 'network', 'not-found'].includes(value);
+            }
+        },
+    },
+    data() {
+        return {
+            defaultImgs: {
+                nodata: {
+                    light: require('./nodata.png'),
+                    dark: require('./nodata-dark.png')
+                },
+                network: {
+                    light: require('./network.png'),
+                    dark: require('./network-dark.png')
+                },
+                'not-found': {
+                    light: require('./404.png'),
+                    dark: require('./404-dark.png')
+                }
+            }
+        }
+    },
+    computed: {
+        currentImg() {
+            if (this.imgs) return this.imgs;
+            return this.defaultImgs[this.type][this.theme];
+        },
+        wrapClasses() {
+            return [
+                {
+                    [`${prefixCls}-${this.size}`]: this.size
+                }
+            ]
+        },
+        textClasses() {
+            return [
+                {
+                    [`${prefixCls}-${this.size}-txt`]: this.size
+                }
+            ]
+        },
+        footerClasses() {
+            return [
+                {
+                    [`${prefixCls}-${this.size}-footer`]: this.size
+                }
+            ]
+        }
+    },
+    methods: {
+        preloadImages() {
+            Object.values(this.defaultImgs).forEach((modes) => {
+                Object.values(modes).forEach((src) => {
+                    const img = new Image();
+                    img.src = src;
+                });
+            });
+        }
+    },
+    mounted() {
+        this.preloadImages();
+    },
+}
+</script>
+
+<style lang="less">
+@import './style.less';
+</style>

package/dist/components/empty/style.less

@@ -0,0 +1,60 @@
+@empty-prefix-cls: vd-empty;
+
+.@{empty-prefix-cls}{
+    height: 100%;
+    margin: 0 auto;
+    text-align: center;
+    padding: 0 20px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    &-img{
+        width: 164px;
+        height: 118px;
+        margin: 0 auto;
+    }
+
+
+    &-txt{
+        margin-block-start: calc(var(--spacing-empty-large-text-margin_top) * 1px);
+        font-size: calc(var(--en-single-f-d-r-fontSize) * 1px);
+        font-weight: var(--en-single-f-d-r-fontWeight);
+        color:var(--color-empty-text); 
+    }
+    &-footer{
+        display: flex;
+        justify-content: center;
+        margin-block-start: calc(var(--spacing-empty-large-text-margin_bottom) * 1px);
+    }
+    &-small
+        {
+        &-txt{
+             margin-block-start: calc(var(--spacing-empty-small-text-margin_top) * 1px);
+        }
+        &-footer{
+            margin-block-start: calc(var(--spacing-empty-small-text-margin_bottom) * 1px);
+        }
+    }
+
+    &-card{
+        height: calc(var(--height-empty-card) * 1px);
+
+        .@{empty-prefix-cls}{
+            &-img{
+                display: none;
+            }
+
+            &-footer{
+                display: none;
+            }
+        }
+
+        &-txt{
+            margin-block-start: 0;
+            font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
+            font-weight: var(--en-single-f-c-r-fontWeight);
+        }
+    }
+
+}

package/dist/components/footer/index.js

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

package/dist/components/footer/index.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="vd-footer">
+    <div class="vd-footer__link" v-if="$slots.default">
+      <slot>
+      </slot>
+    </div>
+    <p class="vd-footer__text" v-html="text"></p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'vd-footer',
+  props: {
+    text: {
+      type: String,
+      default: ''
+    }
+
+  },
+  computed: {
+
+  }
+}
+</script>
+
+<style lang="less">
+@import './style.less';
+</style>

package/dist/components/footer/style.less

@@ -0,0 +1,22 @@
+@footer-prefix-cls: vd-footer;
+
+
+.@{footer-prefix-cls}{
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    padding: calc(var(--spacing-footer-padding_top) * 1px) 0 calc(var(--spacing-footer-padding_bottom) * 1px);
+
+    &__link{
+        display: flex;
+        align-items: center;
+        margin-block-end: calc(var(--spacing-footer-link-margin_bottom) * 1px);
+    }
+
+    &__text{
+        font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
+        font-weight: var(--en-single-f-b-r-fontWeight);
+        color: var(--text-color-h2);
+    }
+}

package/dist/components/footnav/footnav-item/index.js

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