vdesign-ui 0.1.19 → 0.1.20

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

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

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

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

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

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