vdesign-ui 0.2.6 → 0.2.8

package/dist/components/empty/index.vue

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

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

@@ -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,33 @@
+<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

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

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

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

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

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

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

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

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

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

package/dist/components/headnav/index.js

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