vdesign-ui 0.1.20 → 0.1.21

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

@@ -1,75 +0,0 @@
-<template>
-  <div class="vd-foot-nav-item" :class="{ 'vd-foot-nav-item--active': active }" @click="onClick">
-    <vd-icon v-if="icon" :name="icon" :svg="isSvg"></vd-icon>
-    <vd-badge v-if="dot || badge" :is-dot="dot" :value="badge" :max="99">
-      <vd-icon :name="iconName" size="large" :svg="isSvg"></vd-icon>
-    </vd-badge>
-    <slot></slot>
-  </div>
-</template>
-
-<script>
-
-import RouterLink from '../../mixins/router-link';
-
-export default {
-  name: 'vd-foot-nav-item',
-  mixins: [RouterLink],
-  props: {
-    iconName: {
-      type: String,
-    },
-    icon: {
-      type: String,
-    },
-    name: {
-      type: String,
-    },
-    text: {
-      type: String,
-    },
-    dot: {
-      type: Boolean,
-    },
-    badge: {
-      type: [Number, String],
-    },
-    isSvg: {
-      type: Boolean,
-    },
-  },
-  computed: {
-    // isActive() {
-    //   return this.$parent.active === this.$parent.$children.indexOf(this);
-    //   // return this.activeIndex === this.index;
-
-    // },
-  },
-  data() {
-    return {
-      active: false
-    };
-  },
-
-  beforeCreate() {
-    this.$parent.items.push(this);
-  },
-
-  destroyed() {
-    this.$parent.items.splice(this.$parent.items.indexOf(this), 1);
-  },
-  methods: {
-    onClick(event) {
-      // this.$parent.updateActive(this.$parent.$children.indexOf(this));
-      // this.$emit('click', event);
-      this.$parent.onChange(this.$parent.items.indexOf(this));
-      this.$emit('click', event);
-      this.routerLink();
-    },
-  }
-}
-</script>
-
-<style lang="less">
-@import './style.less';
-</style>

package/dist/components/footnav/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: calc(var(--en-single-f-a-r-fontSize) * 1px);
-  font-weight: var(--en-single-f-a-r-fontWeight);
-  color: var(--color-footnav-text-default);
-
-  .vd-iconfont {
-    margin-bottom: 2px;
-    font-size: calc(var(--icon-footnav-size) * 1px);
-    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/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,97 +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>
-export default {
-  name: 'vd-foot-nav',
-  props: {
-    value: Number,
-    fixed: {
-      type: Boolean,
-      default: true
-    },
-    border: {
-      type: Boolean,
-      default: true
-    },
-    zIndex: [Number, String],
-    safeAreaInsetBottom: {
-      type: Boolean,
-      default: null,
-    },
-    placeholder: Boolean,
-  },
-  computed: {
-    fit() {
-      if (this.safeAreaInsetBottom !== null) {
-        return this.safeAreaInsetBottom;
-      }
-      // enable safe-area-inset-bottom by default when fixed
-      return this.fixed;
-    },
-    style() {
-      return {
-        zIndex: this.zIndex
-      };
-    }
-  },
-  data() {
-    return {
-      // active: 0,
-      items: [],
-      height: null,
-    }
-  },
-  watch: {
-    items() {
-      this.setActiveItem();
-    },
-
-    value() {
-      this.setActiveItem();
-    }
-  },
-  methods: {
-    setActiveItem() {
-      this.items.forEach((item, index) => {
-        item.active = index === this.value;
-      });
-    },
-
-    onChange(active) {
-      if (active !== this.value) {
-        this.$emit('input', active);
-        this.$emit('change', active);
-      }
-    },
-    // updateActive(index) {
-    //   this.active = index;
-    // },
-    // handleClick() {
-    //   this.$emit('click',this.active)
-    // }
-  },
-  mounted() {
-    if (this.placeholder && this.fixed) {
-      const setHeight = () => {
-        this.height = this.$refs.footNav.getBoundingClientRect().height;
-      };
-
-      setHeight();
-      setTimeout(setHeight, 100);
-    }
-  }
-
-}
-</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 calc(var(--spacing-footnav-icon-margin_bottom) * 1px);
-    height: calc(var(--height-footnav-content) * 1px);
-    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/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;

package/dist/components/headnav/index.vue

@@ -1,163 +0,0 @@
-<template>
-  <div class="vd-head-nav--placeholder" :style="{height:height + 'px'}">
-    <div class="vd-head-nav" :class="wrapClasses" :style="{zIndex:zIndex}" ref="headNav">
-
-      <div v-if="showLeftSection" class="vd-head-nav--left">
-
-        <span v-if="showSidebar" class="vd-head-nav__icon">
-          <slot name="left-primary">
-            <vd-icon name="icon_nav_sidebar"></vd-icon>
-          </slot>
-        </span>
-
-        <span v-if="$slots['left-secondary']" class="vd-head-nav__icon">
-          <slot name="left-secondary"></slot>
-        </span>
-        <span v-if="leftTitle" class="vd-head-nav__left-title">{{ leftTitle }}</span>
-        <span v-if="editLeftText" class="vd-head-nav__edit-left-text">{{ editLeftText }}</span>
-      </div>
-
-      <div v-if="showContentSection" class="vd-head-nav__content" :class="contentClasses">
-        <div v-if="$slots.selector" class="vd-head-nav__content--selector">
-          <slot name="selector"></slot>
-        </div>
-
-        <span v-if="title" class="vd-head-nav__title vd-ellipsis" :class="titleClasses">{{ title }}</span>
-        <span v-if="description" class="vd-head-nav__description">{{ description }}</span>
-
-        <span class="vd-head-nav__stock" :class="stockColor" v-if="colors">
-          <slot name="state"></slot>
-          <span class="vd-head-nav__price--price">{{ price }}</span>
-          <span class="vd-head-nav__price--chgp">{{ chgp }}</span>
-          <span class="vd-head-nav__price--chg">{{ chg }}</span>
-        </span>
-
-        <slot name="selector-bottom"></slot>
-
-        <span v-if="accountIcon || accountType" class="vd-head-nav__icontype">
-          <vd-icon svg :name="accountIcon" class="vd-head-nav__account-type--icon"></vd-icon>
-          <span class="vd-head-nav__account-type">{{ accountType }}</span>
-        </span>
-      </div>
-
-      <div class="vd-head-nav--right" v-if="showRightSection">
-        <span v-if="rightSecondary || $slots['right-secondary']" class="vd-head-nav__icon">
-          <slot name="right-secondary">
-            <vd-icon name="icon_nav_search" style="transform: scale(1);"></vd-icon>
-          </slot>
-        </span>
-
-        <span v-if="rightPrimary || $slots['right-primary']" class="vd-head-nav__icon">
-          <slot name="right-primary">
-            <vd-icon name="icon_nav_trade" style="transform: scale(1);"></vd-icon>
-          </slot>
-        </span>
-
-        <span class="vd-head-nav__edit-right-text" v-if="editRightText">{{ editRightText }}</span>
-        <span class="vd-head-nav__account-text" v-if="accountText">{{ accountText }}</span>
-      </div>
-
-      <div class="vd-head-nav__info" v-if="$slots['stock-time'] || time">
-        <slot name="stock-time"></slot>
-        <span v-if="time" class="vd-head-nav__time">{{ time }}</span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-
-const prefixCls = 'vd-head-nav';
-export default {
-  name: 'vd-head-nav',
-  props: {
-    title: String,
-    time: String,
-    type: String,
-    leftPrimary: Boolean,
-    rightPrimary: Boolean,
-    rightSecondary: Boolean,
-    start: Boolean,
-    description: String,
-    price: String,
-    chg: String,
-    chgp: String,
-    colors: String,
-    leftTitle: String,
-    editLeftText: String,
-    editRightText: String,
-    accountText: String,
-    accountType: String,
-    accountIcon: String,
-    fixed: Boolean,
-    zIndex: [Number, String],
-    safeAreaInsetTop: Boolean,
-    placeholder: Boolean,
-  },
-  data() {
-    return {
-      height: null,
-    };
-  },
-
-  computed: {
-    wrapClasses() {
-      return [
-        {
-          [`${prefixCls}--${this.type}`]: this.type,
-          [`${prefixCls}--fixed`]: this.fixed,
-          [`${prefixCls}--safe-area-inset-top`]: this.safeAreaInsetTop,
-        }
-      ]
-    },
-    contentClasses() {
-      return [
-        {
-          'vd-head-nav__content--start': this.start,
-        }
-      ];
-    },
-    titleClasses() {
-      return [
-        {
-          [`${prefixCls}__title--normal`]: this.type,
-        }
-      ]
-    },
-    stockColor() {
-      return [
-        {
-          [`${prefixCls}__stock--${this.colors}`]: this.colors,
-
-        }
-      ]
-    },
-    showSidebar() {
-      return this.leftPrimary || this.$slots['left-primary'];
-    },
-    showLeftSection() {
-      return this.showSidebar || this.$slots['left-secondary'] || this.leftTitle || this.editLeftText;
-    },
-    showContentSection() {
-      return this.title || this.$slots.selector || this.$slots['selector-bottom'] || this.account || this.colors;
-    },
-    showRightSection() {
-      return this.rightPrimary || this.$slots['right-primary'] || this.rightSecondary || this.$slots['right-secondary'] || this.editRightText || this.accountText;
-    }
-  },
-  mounted() {
-    if (this.placeholder && this.fixed) {
-      const setHeight = () => {
-        this.height = this.$refs.headNav.getBoundingClientRect().height;
-      };
-
-      setHeight();
-      setTimeout(setHeight, 100);
-    }
-  },
-}
-</script>
-
-<style lang="less">
-@import './style.less';
-</style>

package/dist/components/headnav/style.less

@@ -1,245 +0,0 @@
-@headnav-prefix-cls: vd-head-nav;
-
-
-.@{headnav-prefix-cls} {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: calc(var(--height-headnav-primary) * 1px);
-    padding: 0 calc(var(--spacing-headnav-padding_y) * 1px);
-
-    &--fixed {
-        top: 0;
-        left: 0;
-        width: 100%;
-        position: fixed;
-        z-index: 1;
-    }
-
-    &--safe-area-inset-top {
-        padding-top: constant(safe-area-inset-top);
-        padding-top: env(safe-area-inset-top);
-    }
-
-    &__title {
-        max-width: 100%;
-        font-size: calc(var(--en-single-f-f-b-fontSize) * 1px);
-        font-weight: var(--en-single-f-f-b-fontWeight);
-        color: var(--color-headnav-title);
-
-    }
-
-    &--left {
-        position: absolute;
-        left: calc(var(--spacing-headnav-padding_y) * 1px);
-        top: 0;
-        bottom: 0;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        gap: calc(var(--spacing-headnav-icon-margin_left) * 1px);
-    }
-
-    &--right {
-        position: absolute;
-        right: calc(var(--spacing-headnav-padding_y) * 1px);
-        top: 0;
-        bottom: 0;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        gap: calc(var(--spacing-headnav-icon-margin_left) * 1px);
-
-    }
-
-    &--normal {
-        height: calc(var(--height-headnav-secondary) * 1px);
-
-        .@{headnav-prefix-cls} {
-
-            &__title--normal {
-                font-size: calc(var(--en-single-f-e-s-fontSize) * 1px);
-                font-weight: var(--en-single-f-e-s-fontWeight);
-                color: var(--color-headnav-title);
-            }
-        }
-
-        .vd-selector-l__title {
-            overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-            font-size: calc(var(--en-single-f-e-s-fontSize) * 1px);
-            font-weight: var(--en-single-f-e-s-fontWeight);
-        }
-
-        .vd-selector-s__title {
-            font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
-            font-weight: var(--en-single-f-c-r-fontWeight);
-            color: var(--color-headnav-title);
-        }
-
-    }
-
-
-    &__content {
-        flex: 1;
-        max-width: 60%;
-        position: relative;
-        display: flex;
-        justify-content: center;
-        flex-direction: column;
-        align-items: center;
-        margin: 0 calc(var(--spacing-headnav-title-margin_y) * 1px);
-
-        &--start {
-            flex: 1;
-            max-width: 100%;
-            align-items: flex-start;
-            padding-inline-end: calc(var(--spacing-headnav-title-margin_right) * 1px);
-        }
-
-        .vd-selector {
-
-            &-xl__title {
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
-            }
-        }
-
-        &--selector {
-            max-width: 100%;
-            padding-inline-start: 20px;
-        }
-
-
-
-    }
-
-    &__icontype{
-        display: flex;
-    }
-
-    &__left-title {
-        font-size: calc(var(--en-single-f-f-b-fontSize) * 1px);
-        font-weight: var(--en-single-f-f-b-fontWeight);
-        color: var(--color-headnav-title);
-    }
-
-    &__edit-left-text {
-        font-size: calc(var(--en-single-f-d-r-fontSize) * 1px);
-        font-weight: var(--en-single-f-d-r-fontWeight);
-        color: var(--color-headnav-title);
-    }
-
-    &__edit-right-text {
-        font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
-        font-weight: var(--en-single-f-d-s-fontWeight);
-        color: var(--primary-color);
-    }
-
-    &__account-text {
-        font-size: calc(var(--en-single-f-d-r-fontSize) * 1px);
-        font-weight: var(--en-single-f-d-r-fontWeight);
-        color: var(--color-headnav-title);
-    }
-
-    &__account-type {
-        font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
-        font-weight: var(--en-single-f-c-r-fontWeight);
-        color: var(--color-headnav-title);
-
-        &--icon {
-            font-size: calc(var(--icon-selector-s) * 1px);
-            margin-inline-end: calc(var(--spacing-selector-s-margin_y) * 1px);
-        }
-    }
-
-    &__icon {
-        display: flex;
-
-        .vd-iconfont {
-            font-size: calc(var(--icon-large) * 1px);
-            color: var(--color-headnav-icon);
-        }
-    }
-
-    // &__space--end {
-    //     margin-inline-end: calc(var(--spacing-headnav-icon-margin_left) * 1px);
-    // }
-
-    // &__space--start {
-    //     margin-inline-start: calc(var(--spacing-headnav-icon-margin_left) * 1px);
-    // }
-
-    &__time {
-        margin-inline-start: calc(var(--spacing-headnav-primary-text-margin_right) * 1px);
-        font-size: calc(var(--en-single-f-a-r-fontSize) * 1px);
-        font-weight: var(--en-single-f-a-r-fontWeight);
-        color: var(--color-headnav-text_delayed);
-    }
-
-    &__info {
-        position: absolute;
-        left: 0;
-        right: 0;
-        bottom: 8px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-
-
-    &__description {
-        margin-block-start: calc(var(--spacing-headnav-text_description-margin_top) * 1px);
-        font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
-        font-weight: var(--en-single-f-c-r-fontWeight);
-        color: var(--color-headnav-text_description);
-    }
-
-    &__stock {
-        display: flex;
-        align-items: center;
-        font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
-        font-weight: var(--en-single-f-b-r-fontWeight);
-
-        &--rise {
-            color: var(--rise-color);
-        }
-
-        &--fall {
-            color: var(--fall-color);
-
-        }
-
-        span {
-            margin-inline-end: calc(var(--spacing-headnav-primary-dot-margin_right) * 1px);
-        }
-    }
-}
-
-
-
-[lang='ar'] {
-    .@{headnav-prefix-cls} {
-        &--left {
-            position: absolute;
-            left: auto;
-            right: calc(var(--spacing-headnav-padding_y) * 1px);
-        
-        }
-    
-        &--right {
-            position: absolute;
-            left: calc(var(--spacing-headnav-padding_y) * 1px);
-            right: auto;
-        }
-    }
-
-    .vd-head-nav__icon {
-        .vd-icon-icon_nav_back{
-            transform: scaleX(-1);
-        }
-    }
-}