vdesign-ui 0.1.20 → 0.1.21

package/dist/components/button/style.less

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

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

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

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