vdesign-ui 0.1.19 → 0.1.20

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

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

@@ -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: 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

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

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

@@ -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;

package/dist/components/headnav/index.vue

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

@@ -0,0 +1,245 @@
+@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);
+        }
+    }
+}