vdesign-ui 0.2.4 → 0.2.6

package/dist/components/common/state/style.less

@@ -1,48 +0,0 @@
-.vd-market-state {
-    display: inline-flex;
-    align-items: baseline;
-    font-size: var(--en-single-f-b-r-fontSize);
-    font-weight: var(--en-single-f-b-r-fontWeight);
-
-    &::before {
-        content: '';
-        display: inline-block;
-        border-radius: 50%;
-        width: var(--width-dropdown-state_drop);
-        height: var(--width-dropdown-state_drop);
-        margin-inline-end: var(--spacing-dropdown-state_drop-margin_right);
-        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);
-        }
-    }
-}

package/dist/components/data-list/index.js

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

package/dist/components/data-list/index.vue

@@ -1,19 +0,0 @@
-<template>
-  <div class="vd-datalist">
-    <slot></slot>
-  </div>
-</template>
-<script>
-export default {
-  name: 'vd-datalist',
-  data() {
-    return {
-    }
-  },
-  methods: {
-  }
-}
-</script>
-<style lang="less">
-@import './style.less';
-</style>

package/dist/components/data-list/style.less

@@ -1,623 +0,0 @@
-@prefix: ~"vd-datalist";
-
-.vd-datalist {
-  display: flex;
-  flex-direction: column;
-  flex-wrap: nowrap;
-  margin-block-end: 4px;
-}
-
-/*
-* ===== head
-*/
-.vd-datalist-head-items {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  min-width: fit-content;
-  background-color: var(--bg-color-1);
-  padding-inline-end: var(--spacing-datalist-padding_y);
-  padding-inline-start: var(--spacing-datalist-padding_y);
-  min-height: var(--height-datalist-head);
-  color: var(--color-datalist-head-text-default);
-  font-weight: var(--en-single-f-c-r-fontWeight);
-  font-size: var(--en-single-f-c-r-fontSize);
-}
-
-.vd-datalist-head-item {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  align-items: center;
-  width: var(--width-datalist-head_s);
-  // 默认右对齐
-  justify-content: flex-end;
-  text-align: end;
-  padding-block: 3.5px;
-
-  &:not(:last-child) {
-    margin-inline-end: var(--spacing-datalist-head_item-margin_y_m);
-  }
-
-  &__text {
-    word-break: break-all;
-    // text-align 会影响 text-overflow 
-    display: -webkit-box;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-  }
-
-  &__sort {
-    position: relative;
-    font-size: var(--icon-datalist-sort);
-    min-width: 0;
-    flex: none;
-  }
-
-  &--ascending {
-    // .vd-datalist-head-item__sort {
-    //   // --un-icon: url(./icon_btn_sortup.svg);
-    //   // icon_btn_sortup
-    // }
-  }
-
-  &--descending {
-    // .vd-datalist-head-item__sort {
-    //   // --un-icon: url(./icon_btn_sortdown.svg);
-    //   // icon_btn_sortdown
-    // }
-  }
-
-  &--active {
-
-    &.vd-datalist-head-item--ascending {
-      color: var(--color-datalist-head-text-active);
-
-      // .vd-datalist-head-item__sort {
-      //   // --un-icon: url(./icon_btn_sortup_slt.svg);
-      //   // icon_btn_sortup_slt
-      // }
-    }
-
-    &.vd-datalist-head-item--descending {
-      color: var(--color-datalist-head-text-active);
-
-      // .vd-datalist-head-item__sort {
-      //   // --un-icon: url(./icon_btn_sortdown_slt.svg);
-      //   // icon_btn_sortdown_slt
-      // }
-    }
-  }
-}
-
-// fixed 默认定宽
-.vd-datalist-head-item.vd-datalist-head-item--first {
-  width: auto;
-  flex: 1;
-  min-width: 0;
-  margin-inline-end: var(--spacing-datalist-head_item-margin_y_s);
-  // 首列默认左对齐
-  justify-content: flex-start;
-  text-align: start;
-}
-
-// autofix 自适应宽
-.vd-datalist--autofit {
-  position: relative;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  overflow-x: auto;
-  overflow-y: hidden;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-
-  .vd-datalist-head-items {
-    padding-inline-start: 0;
-  }
-
-  .vd-datalist-head-item--first {
-    position: sticky;
-    inset-inline-start: 0;
-    flex: none;
-    width: calc(var(--width-datalist-head_l) + var(--spacing-datalist-padding_y));
-    padding-inline-start: var(--spacing-datalist-padding_y);
-    background: var(--bg-color-1);
-    z-index: 2;
-
-    &.vd-datalist-head-item--s {
-      width: calc(var(--width-datalist-head_s) + var(--spacing-datalist-padding_y));
-    }
-
-    &.vd-datalist-head-item--m {
-      width: calc(var(--width-datalist-head_m) + var(--spacing-datalist-padding_y));
-    }
-
-    &.vd-datalist-head-item--l {
-      width: calc(var(--width-datalist-head_l) + var(--spacing-datalist-padding_y));
-    }
-
-    &.vd-datalist-head-item--xl {
-      width: calc(var(--width-datalist-head_xl) + var(--spacing-datalist-padding_y));
-    }
-
-  }
-}
-
-// 排序
-.vd-datalist-head--sort {
-  &.vd-datalist-head-items {
-    padding-inline-end: var(--spacing-datalist-head-padding_right);
-  }
-
-  .vd-datalist-head-item--first {
-    margin-inline-end: var(--spacing-datalist-head_item-margin_y_m);
-  }
-
-  .vd-datalist-head-item__sort {
-    display: flex;
-  }
-}
-
-// align && size
-.vd-datalist-head-item {
-  &.vd-datalist-head-item--s {
-    flex: none;
-    min-width: 0;
-    width: var(--width-datalist-head_s);
-  }
-
-  &.vd-datalist-head-item--m {
-    flex: none;
-    min-width: 0;
-    width: var(--width-datalist-head_m);
-  }
-
-  &.vd-datalist-head-item--l {
-    flex: none;
-    min-width: 0;
-    width: var(--width-datalist-head_l);
-  }
-
-  &.vd-datalist-head-item--xl {
-    flex: none;
-    min-width: 0;
-    width: var(--width-datalist-head_xl);
-  }
-
-  &.vd-datalist-head-item--start {
-    justify-content: flex-start;
-    text-align: start;
-  }
-
-  &.vd-datalist-head-item--center {
-    justify-content: center;
-    text-align: center;
-  }
-
-  &.vd-datalist-head-item--end {
-    justify-content: flex-end;
-    text-align: end;
-  }
-}
-
-/*
-* ===== list
-*/
-
-.vd-datalist-list-items {
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  min-width: fit-content;
-  background-color: var(--bg-color-1);
-  padding-inline-end: var(--spacing-datalist-padding_y);
-  padding-inline-start: var(--spacing-datalist-padding_y);
-  min-height: var(--height-datalist-list);
-  color: var(--text-color-h1);
-  font-weight: var(--en-single-f-c-r-fontWeight);
-  font-size: var(--en-single-f-c-r-fontSize);
-
-  &+& {
-    &::before {
-      content: "";
-      pointer-events: none;
-      display: block;
-      position: absolute;
-      inset-inline-start: calc(-50% + var(--spacing-datalist-padding_y) * 2);
-      inset-inline-end: calc(-50% + var(--spacing-datalist-padding_y) * 2);
-      inset-block-start: 0;
-      border-top: 1px solid var(--divider-color-default-1);
-      box-sizing: border-box;
-      transform: scale(0.5);
-      z-index: 3;
-    }
-  }
-}
-
-.vd-datalist-list-item {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  align-items: center;
-  flex: none;
-  width: var(--width-datalist-list_s);
-  // 默认右对齐
-  justify-content: flex-end;
-  text-align: end;
-
-  &:not(:last-child) {
-    margin-inline-end: var(--spacing-datalist-list_item-margin_y);
-  }
-
-  &__text {
-    // text-align 会影响 text-overflow 
-    display: -webkit-box;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    // normal
-    color: var(--color-datalist-list-text_primary);
-    font-weight: var(--en-single-f-d-r-fontWeight);
-    font-size: var(--en-single-f-d-r-fontSize);
-
-    &--auto {
-      display: block;
-    }
-
-    &--code {
-      display: block;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      color: var(--color-datalist-list-text_secondary);
-      font-weight: var(--en-single-f-c-r-fontWeight);
-      font-size: var(--en-single-f-c-r-fontSize);
-    }
-
-    &--rise {
-      color: var(--rise-color);
-    }
-
-    &--fall {
-      color: var(--fall-color);
-    }
-
-    &--secondary {
-      color: var(--color-datalist-list-text_secondary);
-    }
-
-    // 数据字号 single fcs
-    &--fcs {
-      font-weight: var(--en-single-f-c-s-fontWeight);
-      font-size: var(--en-single-f-c-s-fontSize);
-    }
-
-    // 超长文本 single fcr
-    &--fcr {
-      font-weight: var(--en-single-f-c-r-fontWeight);
-      font-size: var(--en-single-f-c-r-fontSize);
-    }
-
-    // 纯数字 single fds
-    &--fds {
-      font-weight: var(--en-single-f-d-s-fontWeight);
-      font-size: var(--en-single-f-d-s-fontSize);
-    }
-  }
-
-  // fixed 默认定宽
-  &--first {
-    width: 0;
-    flex: 1;
-    min-width: 0;
-    margin-inline-end: var(--spacing-datalist-list_item-margin_y);
-    // 首列默认左对齐
-    justify-content: flex-start;
-    text-align: start;
-  }
-}
-
-// autofix 自适应宽
-.vd-datalist--autofit {
-  position: relative;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  overflow-x: auto;
-  overflow-y: hidden;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-
-  .vd-datalist-list-items {
-    padding-inline-start: 0;
-  }
-
-  .vd-datalist-list-item--first {
-    position: sticky;
-    inset-inline-start: 0;
-    flex: none;
-    width: calc(var(--width-datalist-list_l) + var(--spacing-datalist-padding_y));
-    padding-inline-start: var(--spacing-datalist-padding_y);
-    background: var(--bg-color-1);
-    z-index: 2;
-
-    &.vd-datalist-list-item--s {
-      width: calc(var(--width-datalist-list_s) + var(--spacing-datalist-padding_y));
-    }
-
-    &.vd-datalist-list-item--m {
-      width: calc(var(--width-datalist-list_m) + var(--spacing-datalist-padding_y));
-    }
-
-    &.vd-datalist-list-item--l {
-      width: calc(var(--width-datalist-list_l) + var(--spacing-datalist-padding_y));
-    }
-
-    &.vd-datalist-list-item--xl {
-      width: calc(var(--width-datalist-list_xl) + var(--spacing-datalist-padding_y));
-    }
-  }
-}
-
-// align && size
-.vd-datalist-list-item {
-  &>.vd-iconfont+.vd-datalist-content {
-    margin-inline-start: var(--spacing-datalist-list_icon-margin_right);
-  }
-
-  &.vd-datalist-list-item--s {
-    flex: none;
-    min-width: 0;
-    width: var(--width-datalist-list_s);
-  }
-
-  &.vd-datalist-list-item--m {
-    flex: none;
-    min-width: 0;
-    width: var(--width-datalist-list_m);
-  }
-
-  &.vd-datalist-list-item--l {
-    flex: none;
-    min-width: 0;
-    width: var(--width-datalist-list_l);
-  }
-
-  &.vd-datalist-list-item--xl {
-    flex: none;
-    min-width: 0;
-    width: var(--width-datalist-list_xl);
-  }
-
-
-  &.vd-datalist-list-item--start {
-    justify-content: flex-start;
-    text-align: start;
-  }
-
-  &.vd-datalist-list-item--center {
-    justify-content: center;
-    text-align: center;
-  }
-
-  &.vd-datalist-list-item--end {
-    justify-content: flex-end;
-    text-align: end;
-  }
-}
-
-.vd-datalist-content {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  flex-wrap: nowrap;
-  justify-content: center;
-  width: 100%;
-
-  &__desc {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    align-items: center;
-    margin-block-start: var(--spacing-datalist-list-margin_top);
-
-    &--code {
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      color: var(--color-datalist-list-text_secondary);
-      font-size: var(--en-single-f-c-r-fontSize);
-      font-weight: var(--en-single-f-c-r-fontWeight);
-      margin-inline-end: var(--spacing-datalist-market_tag-margin_top);
-    }
-  }
-
-  &__title {
-    font-size: var(--en-single-f-d-r-fontSize);
-    font-weight: var(--en-single-f-d-r-fontWeight);
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-
-    &--code {
-      margin-inline-end: var(--spacing-datalist-market_tag-margin_top);
-    }
-  }
-
-}
-
-.vd-datalist-stock-tag {
-  flex: none;
-  margin-inline-end: var(--spacing-datalist-market_tag-margin_top);
-
-  // &--us {
-  //   color: var(--color-datalist-market_us);
-  // }
-
-  // &--hk {
-  //   color: var(--color-datalist-market_hk);
-  // }
-}
-
-.vd-datalist-market-tag {
-  flex: none;
-  font-size: var(--icon-datalist-label_icon);
-  margin-inline-end: var(--spacing-datalist-market_tag-margin_top);
-  display: inline-block;
-
-  &--watchlist {
-    color: var(--color-datalist-icon_watchlist);
-  }
-
-  &--delay {
-    color: var(--color-datalist-icon_delay);
-  }
-}
-
-/*
-* ===== search
-*/
-.vd-datalist-search {
-
-  &-item {
-    position: relative;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    justify-content: space-between;
-    align-items: center;
-    min-width: fit-content;
-    background-color: var(--bg-color-1);
-    padding-inline-end: var(--spacing-datalist-padding_y);
-    padding-inline-start: var(--spacing-datalist-padding_y);
-    color: var(--text-color-h1);
-    font-weight: var(--en-single-f-c-r-fontWeight);
-    font-size: var(--en-single-f-c-r-fontSize);
-    height: var(--height-datalist-search_m);
-
-    &+& {
-      &::before {
-        content: "";
-        pointer-events: none;
-        display: block;
-        position: absolute;
-        inset-inline-start: calc(-50% + var(--spacing-datalist-padding_y) * 2);
-        inset-inline-end: calc(-50% + var(--spacing-datalist-padding_y) * 2);
-        inset-block-start: 0;
-        border-top: 1px solid var(--divider-color-default-1);
-        box-sizing: border-box;
-        transform: scale(0.5);
-        z-index: 3;
-      }
-    }
-  }
-
-  &-content {
-    flex: 1;
-    width: 0;
-    overflow: hidden;
-
-    &__stock {
-      color: var(--color-datalist-list-text_primary);
-      font-weight: var(--en-single-f-d-s-fontWeight);
-      font-size: var(--en-single-f-d-s-fontSize);
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-
-    &__code {
-      display: flex;
-      color: var(--color-datalist-list-text_secondary);
-      font-weight: var(--en-single-f-c-r-fontWeight);
-      font-size: var(--en-single-f-c-r-fontSize);
-      margin-block-start: var(--spacing-datalist-search-margin_top);
-
-      &--market {
-        margin-inline-start: var(--spacing-datalist-search-margin_right);
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-      }
-    }
-  }
-
-  &--reverse {
-    height: var(--height-datalist-search_s);
-
-    .vd-datalist-search-content {
-      display: flex;
-      flex-direction: row-reverse;
-      align-items: flex-end;
-    }
-
-    .vd-datalist-search-content__code {
-      color: var(--color-datalist-list-text_primary);
-      font-weight: var(--en-single-f-d-s-fontWeight);
-      font-size: var(--en-single-f-d-s-fontSize);
-      width: var(--width-datalist-list-code);
-    }
-
-    .vd-datalist-search-content__stock {
-      flex: 1;
-      min-width: 0;
-      color: var(--color-datalist-list-text_primary);
-      font-weight: var(--en-single-f-d-r-fontWeight);
-      font-size: var(--en-single-f-d-r-fontSize);
-      margin-inline-start: var(--spacing-datalist-search_code-margin_right);
-    }
-  }
-
-  &-icon {
-    margin-inline-start: var(--spacing-datalist-search_icon-margin_left);
-    color: var(--color-datalist-list-text_secondary);
-  }
-
-  &-stock {
-    flex: none;
-    text-align: end;
-    margin-inline-start: var(--spacing-datalist-search_stock-margin_right);
-
-    &__price {
-      font-weight: var(--en-single-f-d-s-fontWeight);
-      font-size: var(--en-single-f-d-s-fontSize);
-    }
-
-    &__percentage {
-      font-weight: var(--en-single-f-c-r-fontWeight);
-      font-size: var(--en-single-f-c-r-fontSize);
-      margin-block-start: var(--spacing-datalist-search-margin_top);
-    }
-
-    &--rise {
-      color: var(--rise-color);
-    }
-
-    &--fall {
-      color: var(--fall-color);
-    }
-  }
-}
-
-
-[lang='ar'] {
-
-  .vd-datalist-head-item,
-  .vd-datalist-list-item {
-    justify-content: flex-start;
-    text-align: start;
-  }
-
-  .vd-datalist-head-item.vd-datalist-head-item--center,
-  .vd-datalist-list-item.vd-datalist-list-item--center {
-    justify-content: center;
-    text-align: center;
-  }
-}

package/dist/components/datetime-picker/index.js

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