vdesign-ui 0.1.21 → 0.1.23

package/dist/components/button/style.less

@@ -0,0 +1,563 @@
+@prefix: ~"vd-btn";
+
+.@{prefix} {
+  // 抽离 css valuable 适应 1px 边框，如：wireframe
+  --btn-border-radius: calc(var(--radius-button-m) * 1px);
+  --btn-border-color: transparent;
+  --btn-line-height: calc(var(--height-button-m) * 1px);
+  // start-btn-css-vars
+  height: calc(var(--height-button-m) * 1px);
+  padding-inline-start: calc(var(--spacing-button-m-padding_left) * 1px);
+  padding-inline-end: calc(var(--spacing-button-m-padding_right) * 1px);
+  border-radius: var(--btn-border-radius);
+  border: 0 solid var(--btn-border-color);
+  // font-family: var(--en-single-f-c-s-fontFamily);
+  font-size: calc(var(--en-single-f-c-s-fontSize) * 1px);
+  font-weight: var(--en-single-f-c-s-fontWeight);
+  line-height: var(--btn-line-height);
+  background-color: var(--color-button-primary-bg-default);
+  color: var(--color-button-primary-text-default);
+  // end-btn-css-vars
+  box-sizing: border-box;
+  position: relative;
+  display: inline-block;
+  margin: 0;
+  text-align: center;
+  white-space: nowrap;
+  cursor: pointer;
+  appearance: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-font-smoothing: auto;
+
+  .@{prefix}-icon-small {
+    --icon-small: var(--icon-button-s);
+  }
+
+  .@{prefix}-icon-medium {
+    --icon-medium: var(--icon-button-m);
+  }
+
+  .@{prefix}-icon-large {
+    --icon-large: var(--icon-button-l);
+  }
+
+  &-inner {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: calc(var(--spacing-button-m_icon-margin_y) * 1px);
+    // gap: 4px;
+    // --spacing-button-l_icon-margin_y
+    // --spacing-button-m_icon-margin_y
+    // --spacing-button-s_icon-margin_y
+  }
+
+  // 1px border 目前解决方案会与伪类冲突的情况如：before/after
+  // &::before {
+  //   content: "";
+  //   pointer-events: none;
+  //   display: block;
+  //   position: absolute;
+  //   left: 0;
+  //   top: 0;
+  //   transform-origin: 0 0;
+  //   border: 1PX solid var(--btn-border-color);
+  //   border-radius: var(--btn-border-radius);
+  //   box-sizing: border-box;
+  //   width: 100%;
+  //   height: 100%;
+
+  //   @media (min-resolution: 2dppx) {
+  //     width: 200%;
+  //     height: 200%;
+  //     border-radius: calc(var(--btn-border-radius) * 2);
+  //     transform: scale(.5);
+  //   }
+
+  //   @media (min-resolution: 3dppx) {
+  //     width: 300%;
+  //     height: 300%;
+  //     border-radius: calc(var(--btn-border-radius) * 3);
+  //     transform: scale(.333);
+  //   }
+  // }
+
+  &:active {
+    background-color: var(--color-button-primary-bg-press);
+    color: var(--color-button-primary-text-press);
+  }
+
+  &:disabled {
+    background-color: var(--color-button-primary-bg-disable);
+    color: var(--color-button-primary-text-disable);
+    pointer-events: none;
+    cursor: not-allowed;
+  }
+
+  &-icon {
+    --btn-border-radius: 0;
+    border-color: transparent;
+    background-color: transparent;
+    color: var(--color-button-border-text-default);
+    font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
+    font-weight: var(--en-single-f-c-r-fontWeight);
+    line-height: 1;
+    padding: 0;
+    min-width: calc(var(--height-button-m) * 1px);
+    height: calc(var(--height-button-m) * 1px);
+
+    &:active {
+      border-color: transparent;
+      background-color: transparent;
+      color: var(--color-button-border-text-press);
+    }
+
+    &:disabled {
+      border-color: transparent;
+      background-color: transparent;
+      color: var(--color-button-border-text-disable);
+    }
+
+    .@{prefix}-inner {
+      flex-direction: column;
+      gap: calc(var(--spacing-button-icon_m_text-margin_top) * 1px);
+    }
+
+    &.@{prefix}-small {
+      font-size: calc(var(--en-single-f-a-r-fontSize) * 1px);
+      font-weight: var(--en-single-f-c-r-fontWeight);
+      padding: 0;
+      min-width: calc(var(--height-button-s) * 1px);
+      height: calc(var(--height-button-s) * 1px);
+
+      .@{prefix}-inner {
+        gap: calc(var(--spacing-button-icon_s_text-margin_top) * 1px);
+      }
+    }
+
+    &.@{prefix}-medium {
+      font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
+      font-weight: var(--en-single-f-c-r-fontWeight);
+      padding: 0;
+      min-width: calc(var(--height-button-m) * 1px);
+      height: calc(var(--height-button-m) * 1px);
+
+      .@{prefix}-inner {
+        gap: calc(var(--spacing-button-icon_m_text-margin_top) * 1px);
+      }
+    }
+
+    &.@{prefix}-large {
+      font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
+      font-weight: var(--en-single-f-c-r-fontWeight);
+      padding: 0;
+      min-width: calc(var(--height-button-l) * 1px);
+      height: calc(var(--height-button-l) * 1px);
+
+      .@{prefix}-inner {
+        gap: calc(var(--spacing-button-icon_l_text-margin_top) * 1px);
+      }
+    }
+  }
+
+  &-primary {
+    background-color: var(--color-button-primary-bg-default);
+    color: var(--color-button-primary-text-default);
+
+    &:active {
+      background-color: var(--color-button-primary-bg-press);
+      color: var(--color-button-primary-text-press);
+    }
+
+    &:disabled {
+      background-color: var(--color-button-primary-bg-disable);
+      color: var(--color-button-primary-text-disable);
+    }
+  }
+
+  &-secondary {
+    background-color: var(--color-button-secondary-bg-default);
+    color: var(--color-button-secondary-text-default);
+
+    &:active {
+      background-color: var(--color-button-secondary-bg-press);
+      color: var(--color-button-secondary-text-press);
+    }
+
+    &:disabled {
+      background-color: var(--color-button-secondary-bg-disable);
+      color: var(--color-button-secondary-text-disable);
+    }
+  }
+
+  &-tertiary {
+    background-color: var(--color-button-tertiary-bg-default);
+    color: var(--color-button-tertiary-text-default);
+
+    &:active {
+      background-color: var(--color-button-tertiary-bg-press);
+      color: var(--color-button-tertiary-text-press);
+    }
+
+    &:disabled {
+      background-color: var(--color-button-tertiary-bg-disable);
+      color: var(--color-button-tertiary-text-disable);
+    }
+  }
+
+  &-warning {
+    background-color: var(--color-button-warning-bg-default);
+    color: var(--color-button-warning-text-default);
+
+    &:active {
+      background-color: var(--color-button-warning-bg-press);
+      color: var(--color-button-warning-text-press);
+    }
+
+    &:disabled {
+      background-color: var(--color-button-warning-bg-disable);
+      color: var(--color-button-warning-text-disable);
+    }
+  }
+
+  &-warning_grey {
+    background-color: var(--color-button-warning_grey-bg-default);
+    color: var(--color-button-warning_grey-text-default);
+
+    &:active {
+      background-color: var(--color-button-warning_grey-bg-press);
+      color: var(--color-button-warning_grey-text-press);
+    }
+
+    &:disabled {
+      background-color: var(--color-button-warning_grey-bg-disable);
+      color: var(--color-button-warning_grey-text-disable);
+    }
+  }
+
+  &-tertiary_grey {
+    border-color: transparent;
+    background-color: var(--color-button-tertiary_grey-bg-default);
+    color: var(--color-button-tertiary_grey-text-default);
+
+    &:active {
+      border-color: transparent;
+      background-color: var(--color-button-tertiary_grey-bg-press);
+      color: var(--color-button-tertiary_grey-text-press);
+    }
+
+    &:disabled {
+      border-color: transparent;
+      background-color: var(--color-button-tertiary_grey-bg-disable);
+      color: var(--color-button-tertiary_grey-text-disable);
+    }
+  }
+
+  &-link_text {
+    background-color: transparent;
+    border-color: transparent;
+    color: var(--color-button-link_text-default);
+
+    &:active {
+      background-color: transparent;
+      border-color: transparent;
+      color: var(--color-button-link_text-press);
+    }
+
+    &:disabled {
+      background-color: transparent;
+      border-color: transparent;
+      color: var(--color-button-link_text-disable);
+    }
+  }
+
+  &-primary_text {
+    background-color: transparent;
+    border-color: transparent;
+    color: var(--color-button-primary_borderless_text-default);
+
+    &:active {
+      background-color: transparent;
+      border-color: transparent;
+      color: var(--color-button-primary_borderless_text-press);
+    }
+
+    &:disabled {
+      background-color: transparent;
+      border-color: transparent;
+      color: var(--color-button-primary_borderless_text-disable);
+    }
+  }
+
+  &-warning_text {
+    background-color: transparent;
+    border-color: transparent;
+    color: var(--color-button-warning_borderless_text-default);
+
+    &:active {
+      background-color: transparent;
+      border-color: transparent;
+      color: var(--color-button-warning_borderless_text-press);
+    }
+
+    &:disabled {
+      background-color: transparent;
+      border-color: transparent;
+      color: var(--color-button-warning_borderless_text-disable);
+    }
+
+  }
+
+  &-tertiary_text {
+    background-color: transparent;
+    border-color: transparent;
+    color: var(--color-button-tertiary_borderless_text-default);
+
+    &:active {
+      background-color: transparent;
+      border-color: transparent;
+      color: var(--color-button-tertiary_borderless_text-press);
+    }
+
+    &:disabled {
+      background-color: transparent;
+      border-color: transparent;
+      color: var(--color-button-tertiary_borderless_text-disable);
+    }
+
+  }
+
+  &-wireframe {
+    --btn-border-color: var(--color-button-border-default);
+    border: 1px solid var(--btn-border-color);
+    background-color: transparent;
+    color: var(--color-button-border-text-default);
+    line-height: 100%;
+
+    &:active {
+      --btn-border-color: var(--color-button-border-press);
+      background-color: transparent;
+      color: var(--color-button-border-text-press);
+    }
+
+    &:disabled {
+      --btn-border-color: var(--color-button-border-disable);
+      background-color: transparent;
+      color: var(--color-button-border-text-disable);
+    }
+
+    .@{prefix}-inner {
+      gap: calc(var(--spacing-button-m_icon-margin_y) * 0.5px);
+    }
+
+    .@{prefix}-small {
+      .@{prefix}-inner {
+        gap: calc(var(--spacing-button-s_icon-margin_y) * 0.5px);
+      }
+    }
+
+    .@{prefix}-medium {
+      .@{prefix}-inner {
+        gap: calc(var(--spacing-button-m_icon-margin_y) * 0.5px);
+      }
+    }
+
+    .@{prefix}-large {
+      .@{prefix}-inner {
+        gap: calc(var(--spacing-button-l_icon-margin_y) * 0.5px);
+      }
+    }
+  }
+
+  &-block {
+    display: block;
+    width: 100%;
+  }
+
+  //
+  // Button Sizes
+  //
+  &-small {
+    --btn-border-radius: calc(var(--radius-button-s) * 1px);
+    --btn-line-height: calc(var(--height-button-s) * 1px);
+    height: calc(var(--height-button-s) * 1px);
+    padding-inline-start: calc(var(--spacing-button-s-padding_left) * 1px);
+    padding-inline-end: calc(var(--spacing-button-s-padding_right) * 1px);
+    // font-family: var(--en-single-f-c-r-fontFamily);
+    font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
+    font-weight: var(--en-single-f-c-r-fontWeight);
+
+    .@{prefix}-inner {
+      gap: calc(var(--spacing-button-s_icon-margin_y) * 1px);
+    }
+  }
+
+  &-medium {
+    --btn-border-radius: calc(var(--radius-button-m) * 1px);
+    --btn-line-height: calc(var(--height-button-m) * 1px);
+    height: calc(var(--height-button-m) * 1px);
+    padding-inline-start: calc(var(--spacing-button-m-padding_left) * 1px);
+    padding-inline-end: calc(var(--spacing-button-m-padding_right) * 1px);
+    // font-family: var(--en-single-f-c-s-fontFamily);
+    font-size: calc(var(--en-single-f-c-s-fontSize) * 1px);
+
+    .@{prefix}-inner {
+      gap: calc(var(--spacing-button-m_icon-margin_y) * 1px);
+    }
+  }
+
+  &-large {
+    --btn-border-radius: calc(var(--radius-button-l) * 1px);
+    --btn-line-height: calc(var(--height-button-l) * 1px);
+    height: calc(var(--height-button-l) * 1px);
+    padding-inline-start: calc(var(--spacing-button-l-padding_left) * 1px);
+    padding-inline-end: calc(var(--spacing-button-l-padding_right) * 1px);
+    // font-family: var(--en-single-f-d-s-fontFamily);
+    font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
+
+    .@{prefix}-inner {
+      gap: calc(var(--spacing-button-l_icon-margin_y) * 1px);
+    }
+  }
+
+  //
+  // Button Business
+  //
+  &-sell {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: calc(var(--height-button-l) * 3px);
+    height: calc(var(--height-button-l) * 1px);
+    background-color: var(--color-button-sell-bg-default);
+    border-radius: calc(var(--radius-button-m) * 1px);
+    color: var(--color-button-sell-text-default);
+    // font-family: var(--en-single-f-d-s-fontFamily);
+    font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
+
+    &::after {
+      content: '';
+      position: absolute;
+      inset-inline-end: -9px;
+      width: calc(var(--height-button-l) * 1px);
+      height: calc(var(--height-button-l) * 1px);
+      border-radius: calc(var(--radius-button-m) * 1px);
+      background-color: var(--color-button-sell-bg-default);
+      transform: skewX(-21deg);
+      z-index: 0;
+    }
+
+    &:active {
+      background-color: var(--color-button-sell-bg-press);
+      color: var(--color-button-sell-text-press);
+
+      &::after {
+        background-color: var(--color-button-sell-bg-press);
+      }
+    }
+
+    &:disabled {
+      background-color: var(--color-button-sell-bg-disable);
+      color: var(--color-button-border-text-disable);
+
+      &::after {
+        background-color: var(--color-button-sell-bg-disable);
+      }
+    }
+  }
+
+  &-buy {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: calc(var(--height-button-l) * 3px);
+    height: calc(var(--height-button-l) * 1px);
+    background-color: var(--color-button-buy-bg-default);
+    border-radius: calc(var(--radius-button-m) * 1px);
+    color: var(--color-button-buy-text-default);
+    // font-family: var(--en-single-f-d-s-fontFamily);
+    font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
+
+    &::after {
+      content: '';
+      position: absolute;
+      inset-inline-start: -9px;
+      width: calc(var(--height-button-l) * 1px);
+      height: calc(var(--height-button-l) * 1px);
+      border-radius: calc(var(--radius-button-m) * 1px);
+      background-color: var(--color-button-buy-bg-default);
+      transform: skewX(-21deg);
+      z-index: 0;
+    }
+
+    &:active {
+      background-color: var(--color-button-buy-bg-press);
+      color: var(--color-button-buy-text-press);
+
+      &::after {
+        background-color: var(--color-button-buy-bg-press);
+      }
+    }
+
+    &:disabled {
+      background-color: var(--color-button-buy-bg-disable);
+      color: var(--color-button-buy-text-disable);
+
+      &::after {
+        background-color: var(--color-button-buy-bg-disable);
+      }
+    }
+  }
+
+  &-group {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    gap: 27px;
+    // background: #fff;
+  }
+
+  // 
+  // loading
+  //
+  &-loading {
+    cursor: default;
+    pointer-events: none;
+
+    .vd-iconfont {
+      animation: vd-ani-spin 1s linear infinite;
+    }
+  }
+
+  &-round {
+    --btn-border-radius: 999em;
+    padding-inline: 0;
+    width: calc(var(--height-button-m) * 1px);
+
+    &.@{prefix}-small {
+      width: calc(var(--height-button-s) * 1px);
+      padding-inline: 0;
+    }
+
+    &.@{prefix}-medium {
+      width: calc(var(--height-button-m) * 1px);
+      padding-inline: 0;
+    }
+
+    &.@{prefix}-large {
+      width: calc(var(--height-button-l) * 1px);
+      padding-inline: 0;
+    }
+  }
+}
+
+@keyframes vd-ani-spin {
+  from {
+    transform: rotate(0);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}

package/dist/components/calendar/index-element.vue

@@ -0,0 +1,84 @@
+<template>
+  <div>
+    <!-- <div class="vd-calendar-input">
+        <div class="vd-calendar-input-inner">
+          <input type="text"  class="vd-calendar-input__inputs" disabled placeholder="Start date">
+          <i class="vd-calendar-input__line"></i>
+          <input type="text"  class="vd-calendar-input__inputs" disabled placeholder="End date">
+        </div>
+      </div> -->
+    <el-date-picker class="vd-calendar-input" v-on="$listeners" v-bind="$attrs"></el-date-picker>
+  </div>
+</template>
+
+<script>
+import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
+zhLocale.el.datepicker.weeks = {
+  "sun": "S",
+  "mon": "M",
+  "tue": "T",
+  "wed": "W",
+  "thu": "T",
+  "fri": "F",
+  "sat": "S"
+}
+zhLocale.el.datepicker.year = ''
+zhLocale.el.datepicker.month8 = '8'
+
+export default {
+  name: 'vd-calendar',
+  data() {
+    return {
+    };
+  },
+  inheritAttrs: false, // 确保 $attrs 不绑定到根元素
+
+  mounted() {
+  }
+};
+</script>
+
+<style lang="less">
+.el-date-range-picker {
+  position: absolute !important;
+  left: 0 !important;
+  ;
+  right: 0 !important;
+  width: 100%;
+
+  .el-date-range-picker__content {
+    width: 100%;
+    border: 0
+  }
+
+  .el-picker-panel__body {
+    min-width: 300px;
+  }
+}
+
+.el-date-range-picker__content.is-right {
+  height: 0;
+  display: none;
+
+  .el-date-range-picker__header {
+    top: -330px;
+    left: 210px;
+    width: 50px;
+  }
+
+  .el-date-range-picker__header div {
+    display: none;
+  }
+
+  table {
+    display: none;
+  }
+}
+
+.el-icon-d-arrow-left,
+.el-icon-d-arrow-right {
+  display: none;
+}
+
+@import './style.less';
+</style>

package/dist/components/calendar/index.js

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

package/dist/components/calendar/index.vue

@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <!-- <div class="vd-calendar-input">
+        <div class="vd-calendar-input-inner">
+          <input type="text"  class="vd-calendar-input__inputs" disabled placeholder="Start date">
+          <i class="vd-calendar-input__line"></i>
+          <input type="text"  class="vd-calendar-input__inputs" disabled placeholder="End date">
+        </div>
+      </div> -->
+    <van-calendar class="vd-calendar" v-on="$listeners" v-bind="$attrs" />
+  </div>
+</template>
+
+<script>
+// import Vue from 'vue'
+import { Calendar } from 'vant';
+
+// Vue.use(Calendar);
+import { Locale } from 'vant';
+
+const messages = {
+  'zh-CN': {
+    vanCalendar: {
+      weekdays: ['S', 'M', 'T ', 'W', 'T', 'F', 'S'],
+      start: 'Start',
+      end: "End"
+    },
+  },
+};
+
+Locale.add(messages);
+
+export default {
+  name: 'vd-calendar',
+  components: {
+    'van-calendar': Calendar
+  },
+  data() {
+    return {
+    };
+  },
+  inheritAttrs: false, // 确保 $attrs 不绑定到根元素
+
+  mounted() {
+    console.log(Locale);
+  }
+};
+</script>
+
+<style lang="less">
+@import './style.less';
+</style>