vdesign-ui 0.1.20 → 0.1.21

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

@@ -1,624 +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: calc(var(--spacing-datalist-padding_y) * 1px);
-  padding-inline-start: calc(var(--spacing-datalist-padding_y) * 1px);
-  min-height: calc(var(--height-datalist-head) * 1px);
-  color: var(--color-datalist-head-text-default);
-  font-weight: var(--en-single-f-c-r-fontWeight);
-  font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
-}
-
-.vd-datalist-head-item {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  align-items: center;
-  width: calc(var(--width-datalist-head_s) * 1px);
-  // 默认右对齐
-  justify-content: flex-end;
-  text-align: end;
-  padding-block: 3.5px;
-
-  &:not(:last-child) {
-    margin-inline-end: calc(var(--spacing-datalist-head_item-margin_y_m) * 1px);
-  }
-
-  &__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: calc(var(--icon-datalist-sort) * 1px);
-    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: calc(var(--spacing-datalist-head_item-margin_y_s) * 1px);
-  // 首列默认左对齐
-  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; //calc(var(--spacing-datalist-padding_y) * 1px);
-    flex: none;
-    width: calc((var(--width-datalist-head_l) + var(--spacing-datalist-padding_y)) * 1px);
-    padding-inline-start: calc(var(--spacing-datalist-padding_y) * 1px);
-    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)) * 1px);
-    }
-
-    &.vd-datalist-head-item--m {
-      width: calc((var(--width-datalist-head_m) + var(--spacing-datalist-padding_y)) * 1px);
-    }
-
-    &.vd-datalist-head-item--l {
-      width: calc((var(--width-datalist-head_l) + var(--spacing-datalist-padding_y)) * 1px);
-    }
-
-    &.vd-datalist-head-item--xl {
-      width: calc((var(--width-datalist-head_xl) + var(--spacing-datalist-padding_y)) * 1px);
-    }
-  }
-}
-
-// 排序
-.vd-datalist-head--sort {
-  &.vd-datalist-head-items {
-    padding-inline-end: calc(var(--spacing-datalist-head-padding_right) * 1px);
-  }
-
-  .vd-datalist-head-item--first {
-    margin-inline-end: calc(var(--spacing-datalist-head_item-margin_y_m) * 1px);
-  }
-
-  .vd-datalist-head-item__sort {
-    display: flex;
-  }
-}
-
-// align && size
-.vd-datalist-head-item {
-  &.vd-datalist-head-item--s {
-    flex: none;
-    min-width: 0;
-    width: calc(var(--width-datalist-head_s) * 1px);
-  }
-
-  &.vd-datalist-head-item--m {
-    flex: none;
-    min-width: 0;
-    width: calc(var(--width-datalist-head_m) * 1px);
-  }
-
-  &.vd-datalist-head-item--l {
-    flex: none;
-    min-width: 0;
-    width: calc(var(--width-datalist-head_l) * 1px);
-  }
-
-  &.vd-datalist-head-item--xl {
-    flex: none;
-    min-width: 0;
-    width: calc(var(--width-datalist-head_xl) * 1px);
-  }
-
-  &.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;
-  // width: 100%;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  min-width: fit-content;
-  background-color: var(--bg-color-1);
-  padding-inline-end: calc(var(--spacing-datalist-padding_y) * 1px);
-  padding-inline-start: calc(var(--spacing-datalist-padding_y) * 1px);
-  min-height: calc(var(--height-datalist-list) * 1px);
-  color: var(--text-color-h1);
-  font-weight: var(--en-single-f-c-r-fontWeight);
-  font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
-
-  &+& {
-    &::before {
-      content: "";
-      pointer-events: none;
-      display: block;
-      position: absolute;
-      inset-inline-start: calc(-50% + var(--spacing-datalist-padding_y) * 2px);
-      inset-inline-end: calc(-50% + var(--spacing-datalist-padding_y) * 2px);
-      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: calc(var(--width-datalist-list_s) * 1px);
-  // 默认右对齐
-  justify-content: flex-end;
-  text-align: end;
-
-  &:not(:last-child) {
-    margin-inline-end: calc(var(--spacing-datalist-list_item-margin_y) * 1px);
-  }
-
-  &__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: calc(var(--en-single-f-d-r-fontSize) * 1px);
-
-    &--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: calc(var(--en-single-f-c-r-fontSize) * 1px);
-    }
-
-    &--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: calc(var(--en-single-f-c-s-fontSize) * 1px);
-    }
-
-    // 超长文本 single fcr
-    &--fcr {
-      font-weight: var(--en-single-f-c-r-fontWeight);
-      font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
-    }
-
-    // 纯数字 single fds
-    &--fds {
-      font-weight: var(--en-single-f-d-s-fontWeight);
-      font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
-    }
-  }
-
-  // fixed 默认定宽
-  &--first {
-    width: 0;
-    flex: 1;
-    min-width: 0;
-    margin-inline-end: calc(var(--spacing-datalist-list_item-margin_y) * 1px);
-    // 首列默认左对齐
-    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; //calc(var(--spacing-datalist-padding_y) * 1px);
-    flex: none;
-    width: calc((var(--width-datalist-list_l) + var(--spacing-datalist-padding_y)) * 1px);
-    padding-inline-start: calc(var(--spacing-datalist-padding_y) * 1px);
-    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)) * 1px);
-    }
-
-    &.vd-datalist-list-item--m {
-      width: calc((var(--width-datalist-list_m) + var(--spacing-datalist-padding_y)) * 1px);
-    }
-
-    &.vd-datalist-list-item--l {
-      width: calc((var(--width-datalist-list_l) + var(--spacing-datalist-padding_y)) * 1px);
-    }
-
-    &.vd-datalist-list-item--xl {
-      width: calc((var(--width-datalist-list_xl) + var(--spacing-datalist-padding_y)) * 1px);
-    }
-  }
-}
-
-// align && size
-.vd-datalist-list-item {
-  &>.vd-iconfont+.vd-datalist-content {
-    margin-inline-start: calc(var(--spacing-datalist-list_icon-margin_right) * 1px);
-  }
-
-  &.vd-datalist-list-item--s {
-    flex: none;
-    min-width: 0;
-    width: calc(var(--width-datalist-list_s) * 1px);
-  }
-
-  &.vd-datalist-list-item--m {
-    flex: none;
-    min-width: 0;
-    width: calc(var(--width-datalist-list_m) * 1px);
-  }
-
-  &.vd-datalist-list-item--l {
-    flex: none;
-    min-width: 0;
-    width: calc(var(--width-datalist-list_l) * 1px);
-  }
-
-  &.vd-datalist-list-item--xl {
-    flex: none;
-    min-width: 0;
-    width: calc(var(--width-datalist-list_xl) * 1px);
-  }
-
-  &.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: calc(var(--spacing-datalist-list-margin_top) * 1px);
-
-    &--code {
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      color: var(--color-datalist-list-text_secondary);
-      font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
-      font-weight: var(--en-single-f-c-r-fontWeight);
-      margin-inline-end: calc(var(--spacing-datalist-market_tag-margin_top) * 1px);
-    }
-  }
-
-  &__title {
-    font-size: calc(var(--en-single-f-d-r-fontSize) * 1px);
-    font-weight: var(--en-single-f-d-r-fontWeight);
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-
-    &--code {
-      margin-inline-end: calc(var(--spacing-datalist-market_tag-margin_top) * 1px);
-    }
-  }
-}
-
-.vd-datalist-stock-tag {
-  flex: none;
-  // font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
-  // font-weight: var(--en-single-f-b-r-fontWeight);
-  margin-inline-end: calc(var(--spacing-datalist-market_tag-margin_top) * 1px);
-
-  // &--us {
-  //   color: var(--color-datalist-market_us);
-  // }
-
-  // &--hk {
-  //   color: var(--color-datalist-market_hk);
-  // }
-}
-
-.vd-datalist-market-tag {
-  flex: none;
-  font-size: calc(var(--icon-datalist-label_icon) * 1px);
-  margin-inline-end: calc(var(--spacing-datalist-market_tag-margin_top) * 1px);
-  display: inline-block;
-
-  &--watchlist {
-    color: var(--color-datalist-icon_watchlist);
-  }
-
-  &--delay {
-    color: var(--color-datalist-icon_delay);
-  }
-}
-
-/*
-* ===== search
-*/
-.vd-datalist-search {
-
-  &-item {
-    position: relative;
-    // width: 100%;
-    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: calc(var(--spacing-datalist-padding_y) * 1px);
-    padding-inline-start: calc(var(--spacing-datalist-padding_y) * 1px);
-    color: var(--text-color-h1);
-    font-weight: var(--en-single-f-c-r-fontWeight);
-    font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
-    height: calc(var(--height-datalist-search_m) * 1px);
-
-    &+& {
-      &::before {
-        content: "";
-        pointer-events: none;
-        display: block;
-        position: absolute;
-        inset-inline-start: calc(-50% + var(--spacing-datalist-padding_y) * 2px);
-        inset-inline-end: calc(-50% + var(--spacing-datalist-padding_y) * 2px);
-        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: calc(var(--en-single-f-d-s-fontSize) * 1px);
-      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: calc(var(--en-single-f-c-r-fontSize) * 1px);
-      margin-block-start: calc(var(--spacing-datalist-search-margin_top) * 1px);
-
-      &--market {
-        margin-inline-start: calc(var(--spacing-datalist-search-margin_right) * 1px);
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-      }
-    }
-  }
-
-
-  &--reverse {
-    height: calc(var(--height-datalist-search_s) * 1px);
-
-    .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: calc(var(--en-single-f-d-s-fontSize) * 1px);
-      width: calc(var(--width-datalist-list-code) * 1px);
-    }
-
-    .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: calc(var(--en-single-f-d-r-fontSize) * 1px);
-      margin-inline-start: calc(var(--spacing-datalist-search_code-margin_right) * 1px);
-    }
-  }
-
-  &-icon {
-    margin-inline-start: calc(var(--spacing-datalist-search_icon-margin_left) * 1px);
-    color: var(--color-datalist-list-text_secondary);
-  }
-
-  &-stock {
-    flex: none;
-    text-align: end;
-    margin-inline-start: calc(var(--spacing-datalist-search_stock-margin_right) * 1px);
-
-    &__price {
-      font-weight: var(--en-single-f-d-s-fontWeight);
-      font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
-    }
-
-    &__percentage {
-      font-weight: var(--en-single-f-c-r-fontWeight);
-      font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
-      margin-block-start: calc(var(--spacing-datalist-search-margin_top) * 1px);
-    }
-
-    &--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;

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

@@ -1,37 +0,0 @@
-<template>
-  <van-datetime-picker v-if="!picker" class="vd-datetime-picker" v-on="$listeners" v-bind="$attrs" />
-  <van-picker v-else class="vd-datetime-picker" v-on="$listeners" v-bind="$attrs" />
-</template>
-
-<script>
-// import Vue from 'vue'
-import { DatetimePicker } from 'vant';
-import { Picker } from 'vant';
-
-
-// Vue.use(Picker);
-// Vue.use(DatetimePicker)
-
-
-export default {
-  name: 'vd-datetime-picker',
-  components: {
-    'van-picker': Picker,
-    'van-datetime-picker': DatetimePicker
-  },
-  props: {
-    picker: {
-      type: Boolean,
-      default: false,
-    }
-  },
-  data() {
-    return {
-    };
-  },
-};
-</script>
-
-<style lang="less">
-@import './style.less';
-</style>

package/dist/components/datetime-picker/style.less

@@ -1,24 +0,0 @@
-
-.vd-datetime-picker{
-
-    .van-picker__columns{
-        padding: 0 calc(var(--spacing-datepicker-padding_y) * 1px);
-    }
-
-    .van-picker-column__item{
-
-        height: calc(var(--height-datepicker-roll_bg) * 1px);
-        font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
-        font-weight: var(--en-single-f-d-s-fontWeight);
-        color: var(--color-datepicker-date-text-disable);
-        &--selected{
-            font-size: calc(var(--en-single-f-e-s-fontSize) * 1px);
-            font-weight: var(--en-single-f-e-s-fontWeight);
-            color: var(--color-datepicker-date-text-default);
-        }
-    }
-    .van-picker__frame{
-        background: var(--color-datepicker-date_mask-bg-active);
-        border-radius: calc(var(--radius-datepicker-roll_bg) * 1px);
-    }
-}

package/dist/components/dialog/index.js

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