vdesign-ui 0.2.5 → 0.2.6

package/dist/components/empty/index.vue

@@ -1,138 +0,0 @@
-<template>
-    <div class="vd-empty" :class="wrapClasses">
-        <div class="vd-empty__img"  v-if="size !== 'card'">
-            <slot name="image">
-                <img :src="currentImage" alt="empty" />
-            </slot>
-        </div>
-        <p class="vd-empty__txt" :class="textClasses" v-if="description || $slots.description">
-            <slot name="description">
-                {{ description }}
-            </slot>
-        </p>
-        <div class="vd-empty__footer" :class="footerClasses" v-if="$slots.default">
-            <slot></slot>
-        </div>
-    </div>
-</template>
-
-<script>
-import { themeMixin } from '../mixins/themeMixin';
-const prefixCls = 'vd-empty';
-
-export default {
-    name: 'vd-empty',
-    mixins: [themeMixin],  // 引入混入
-    props: {
-        image:  {
-            type: String,
-            default: 'nodata',  // 默认类型
-            validator(value) {
-                // 只接受以下类型值
-                return ['nodata', 'network', 'notfound','noposition','nomargin','nocoupons','nosearch','nonotice','noorders','noocomments'].includes(value);
-            }
-        },
-        description: String,
-        size: {
-            type:String,
-            default: 'large',  // 大场景布局，使用L尺寸 小场景内容居中使用 S 尺寸 card(空状态>1 时，不显示图片，只显示暂无数据的文字)
-        },
-    },
-    data() {
-        return {
-            defaultImages: {
-                nodata: {
-                    light: require('./nodata.png'),
-                    dark: require('./nodata-dark.png')
-                },
-                network: {
-                    light: require('./network.png'),
-                    dark: require('./network-dark.png')
-                },
-                notfound: {
-                    light: require('./404.png'),
-                    dark: require('./404-dark.png')
-                },
-                noposition: {
-                    light: require('./noposition.png'),
-                    dark: require('./noposition-dark.png')
-                },
-                nomargin: {
-                    light: require('./nomargin.png'),
-                    dark: require('./nomargin-dark.png')
-                },
-                nocoupons: {
-                    light: require('./nocoupons.png'),
-                    dark: require('./nocoupons-dark.png')
-                },
-                nosearch: {
-                    light: require('./nosearch.png'),
-                    dark: require('./nosearch-dark.png')
-                },
-                nonotice: {
-                    light: require('./nonotice.png'),
-                    dark: require('./nonotice-dark.png')
-                },
-                noorders: {
-                    light: require('./noorders.png'),
-                    dark: require('./noorders-dark.png')
-                },
-                noocomments: {
-                    light: require('./noocomments.png'),
-                    dark: require('./noocomments-dark.png')
-                },
-            }
-        }
-    },
-    computed: {
-        currentImage() {
-            const image = this.image;
-            if (image && (image.startsWith('http') || image.startsWith('data:image'))) {
-                return image;
-            } else if (this.defaultImages[image]) {
-                return this.defaultImages[image][this.theme];
-            } else {
-                return this.defaultImages['nodata'][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.defaultImages).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

@@ -1,61 +0,0 @@
-@empty-prefix-cls: vd-empty;
-
-.@{empty-prefix-cls} {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    box-sizing: border-box;
-    padding: 0 20px;
-
-    &__img {
-        width: 164px;
-        height: 118px;
-
-        img {
-            width: 100%;
-            height: 100%;
-        }
-    }
-
-    &__txt {
-        font-size: var(--en-single-f-d-r-fontSize);
-        font-weight: var(--en-single-f-d-r-fontWeight);
-        color: var(--color-empty-text); 
-    }
-
-    &__footer {
-        display: flex;
-        justify-content: center;
-    }
-
-    &--small {
-        &__txt {
-            margin-block-start: var(--spacing-empty-small-text-margin_top);
-        }
-
-        &__footer {
-            margin-block-start: var(--spacing-empty-small-text-margin_bottom);
-        }
-    }
-
-    &--large {
-        &__txt {
-            margin-block-start: var(--spacing-empty-large-text-margin_top);
-        }
-
-        &__footer {
-            margin-block-start: var(--spacing-empty-large-text-margin_bottom);
-        }
-    }
-
-    &--card {
-        height: var(--height-empty-card);
-
-        &__txt {
-            margin-block-start: 0;
-            font-size: var(--en-single-f-c-r-fontSize);
-            font-weight: var(--en-single-f-c-r-fontWeight);
-        }
-    }
-}

package/dist/components/footer/index.js

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

@@ -1,33 +0,0 @@
-<template>
-  <div class="vd-footer">
-    <div class="vd-footer__link" v-if="$slots.default">
-      <slot>
-      </slot>
-    </div>
-    <div class="vd-footer__text" v-if="text || $slots.text">
-      <slot name="text">
-        {{ text }}
-      </slot>
-    </div>
-  </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

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

package/dist/components/footnav/index.js

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

package/dist/components/footnav/index.vue

@@ -1,93 +0,0 @@
-<template>
-  <div class="vd-foot-nav--placeholder" :style="{height:height + 'px'}">
-    <div class="vd-foot-nav" ref="footNav"
-      :class="{ 'vd-foot-nav--fixed': fixed, 'vd-hairline--top': border, 'vd-foot-nav--unfit': !this.fit }"
-      :style="style">
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<script>
-import { inBrowser } from '../utils/env'
-export default {
-  name: 'vd-foot-nav',
-  props: {
-    value: Number,
-    fixed: {
-      type: Boolean,
-      default: true
-    },
-    border: {
-      type: Boolean,
-      default: true
-    },
-    zIndex: {
-      type: [Number, String],
-      default: 1, 
-    },
-    safeAreaInsetBottom: {
-      type: Boolean,
-      default: null,
-    },
-    placeholder: Boolean,
-    beforeChange: {
-      type: Function,
-      default: null,
-    },
-  },
-  computed: {
-    fit() {
-      return this.safeAreaInsetBottom !== null ? this.safeAreaInsetBottom : this.fixed;
-    },
-    style() {
-      return {
-        zIndex: this.zIndex
-      };
-    }
-  },
-  data() {
-    return {
-      height: 0,
-    }
-  },
-  watch: {
-  },
-  methods: {
-    async onChange(active) {
-      // 处理 before-change 回调，允许用户决定是否切换
-      if (this.beforeChange) {
-        const canChange = await this.beforeChange(active);
-        if (!canChange) return;
-      }
-
-      if (active !== this.value) {
-        this.$emit('input', active);
-        this.$emit('change', active);
-      }
-    },
-    setHeight() {
-      if (this.$refs.footNav) {
-        this.height = this.$refs.footNav.getBoundingClientRect().height;
-      }
-    },
-  },
-  mounted() {
-    if (inBrowser && this.placeholder && this.fixed) {
-      this.setHeight();
-      const resizeHandler = () => {
-        requestAnimationFrame(this.setHeight); // 使用 requestAnimationFrame 优化性能
-      };
-
-      // setHeight();
-      window.addEventListener('resize', resizeHandler);
-      this.$once('hook:beforeDestroy', () => window.removeEventListener('resize', resizeHandler));
-    }
-  }
-
-}
-</script>
-
-<style lang="less">
-@import './style.less';
-</style>

package/dist/components/footnav/style.less

@@ -1,23 +0,0 @@
-@footnav-prefix-cls: vd-foot-nav;
-
-.@{footnav-prefix-cls} {
-    width: 100%;
-    display: flex;
-    padding: 4px var(--spacing-footnav-icon-margin_bottom);
-    height: var(--height-footnav-content);
-    background-color: var(--color-footnav-bg);
-    padding-bottom: constant(safe-area-inset-bottom);
-    padding-bottom: env(safe-area-inset-bottom);
-    
-    &--fixed {
-        position: fixed;
-        bottom: 0;
-        left: 0;
-        width: 100%;
-        z-index: 1;
-    }
-    
-    &--unfit {
-        padding-bottom: 0;
-    }
-}

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

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

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

@@ -1,50 +0,0 @@
-<template>
-  <div class="vd-foot-nav-item" :class="{ 'vd-foot-nav-item--active': isActive  }" @click="onClick">
-    <vd-badge v-if="iconName|| $slots.icon" :is-dot="dot" :value="badge" :max="99">
-      <slot name="icon"><vd-icon :name="iconName" size="large"></vd-icon></slot>
-    </vd-badge>
-    <slot></slot>
-  </div>
-</template>
-
-<script>
-
-import RouterLink from '../mixins/router-link';
-import VdIcon from '../icon';
-import VdBadge from '../badge';
-
-export default {
-  name: 'vd-foot-nav-item',
-  components: {
-      VdIcon,
-      VdBadge
-    },
-  mixins: [RouterLink],
-  props: {
-    iconName: String,
-    dot: Boolean,
-    badge: [Number, String],
-  },
-  computed: {
-    isActive() {
-      return this.$parent.value === this.$parent.$slots.default.indexOf(this.$vnode);
-    },
-  },
-  data() {
-    return {
-    };
-  },
-  methods: {
-    onClick(event) {
-      const index = this.$parent.$slots.default.indexOf(this.$vnode);
-      this.$parent.onChange(index);
-      this.$emit('click', event);
-      this.routerLink();
-    },
-  }
-}
-</script>
-
-<style lang="less">
-@import './style.less';
-</style>

package/dist/components/footnav-item/style.less

@@ -1,39 +0,0 @@
-@footnav-item-prefix-cls: vd-foot-nav-item;
-
-.@{footnav-item-prefix-cls} {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  justify-content: center;
-  font-size: var(--en-single-f-a-r-fontSize);
-  font-weight: var(--en-single-f-a-r-fontWeight);
-  color: var(--color-footnav-text-default);
-
-  .vd-iconfont {
-    margin-bottom: 2px;
-    font-size: var(--icon-footnav-size);
-    color: var(--text-color-h2);
-  }
-
-  &:active {
-    border-color: transparent;
-    background-color: transparent;
-    color: var(--color-button-border-text-press);
-  }
-
-  &--active {
-    color: var(--color-footnav-text-active);
-
-    .vd-iconfont {
-      color: var(--color-footnav-text-active);
-    }
-  }
-
-  .vd-badge {
-    .is-fixed {
-      top: 4px;
-      right: 4px;
-    }
-  }
-}

package/dist/components/form/index.js

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

package/dist/components/form/index.vue

@@ -1,12 +0,0 @@
-<template>
-    <div class="vd-form"></div>
-</template>
-
-<script>
-
-export default {
-    name: 'vd-form',
-}
-</script>
-
-<style lang="less"></style>

package/dist/components/headnav/index.js

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