vdesign-ui 0.2.6 → 0.2.7

package/dist/components/calendar/style.less

@@ -0,0 +1,138 @@
+.van-calendar__header {
+    box-shadow: none;
+}
+
+.van-calendar__header-subtitle {
+    height: var(--height-datepicker-title-month_year);
+    line-height: var(--height-datepicker-title-month_year);
+    color: var(--color-datepicker-title-month_year);
+    font-size: var(--en-single-f-d-s-fontSize);
+    font-weight: var(--en-single-f-d-s-fontWeight);
+}
+
+.van-calendar__weekdays {
+    padding: 0 20px;
+    height: var(--height-datepicker-week);
+    color: var(--color-datepicker-text-week);
+}
+
+.van-calendar__weekday {
+    line-height: var(--height-datepicker-week);
+    font-size: var(--en-single-f-b-r-fontSize);
+    font-weight: var(--en-single-f-b-r-fontWeight);
+}
+
+.van-calendar__days {
+    display: flex;
+    padding: 0 20px;
+}
+
+.van-calendar__day {
+    height: var(--height-datepicker-date);
+    font-size: var(--en-single-f-d-s-fontSize);
+    font-weight: var(--en-single-f-d-s-fontWeight);
+    color: var(--color-datepicker-date-text-default);
+    background-color: var(--color-datepicker-date-bg-default);
+    margin-block-start: var(--spacing-datepicker-date-margin_top);
+    margin-block-end: var(--spacing-datepicker-date-margin_bottom);
+
+    &--disabled {
+        color: var(--color-datepicker-date-text-disable);
+        background-color: var(--color-datepicker-date-bg-disable);
+    }
+
+    &--start {
+        font-size: var(--en-single-f-d-s-fontSize);
+        font-weight: var(--en-single-f-d-s-fontWeight);
+        color: var(--color-datepicker-date-text-active);
+        border-radius: 0;
+        background-image: url(./start.png) !important;
+        background-position: center center !important;
+        background-repeat: no-repeat !important;
+        background-size: cover !important;
+    }
+
+    &--middle {
+        color: var(--color-datepicker-date-text-default) !important;
+        background-color: var(--color-datepicker-date_mask-bg-active);
+
+        &::after {
+            background-color: transparent;
+            opacity: 1;
+        }
+    }
+
+    &--end {
+        font-size: var(--en-single-f-d-s-fontSize);
+        font-weight: var(--en-single-f-d-s-fontWeight);
+        color: var(--color-datepicker-date-text-active);
+        background-color: var(--color-datepicker-date-bg-active);
+        border-radius: 0;
+        background-image: url(./end.png) !important;
+        background-position: center center !important;
+        background-repeat: no-repeat !important;
+        background-size: cover !important;
+    }
+}
+
+.van-calendar__selected-day {
+    background-color: var(--color-datepicker-date-bg-active);
+}
+
+.van-calendar__bottom-info {
+    bottom: -14px;
+    color: #1BC47D;
+    font-size: 12px;
+    font-weight: normal;
+}
+
+.van-calendar__top-info {
+    top: auto;
+    bottom: -14px;
+    color: var(--color-datepicker-today_dot);
+    font-size: 18px;
+}
+
+.vd-calendar-input {
+    padding-block-start: var(--spacing-datepicker-range_picker-margin_top);
+    padding-block-end: var(--spacing-datepicker-range_picker-margin_bottom);
+    padding-inline-start: var(--spacing-datepicker-padding_y);
+    padding-inline-end: var(--spacing-datepicker-padding_y);
+
+    &-inner {
+        display: flex;
+        align-items: center;
+        border-radius: var(--radius-datepicker-range_picker_bg);
+        background-color: var(--color-datepicker-range_picker-bg);
+    }
+
+    &__inputs {
+        width: 100%;
+        text-align: center;
+        background-color: transparent;
+        height: var(--height-datepicker-range_picker_bg);
+        line-height: var(--height-datepicker-range_picker_bg);
+        font-size: var(--en-single-f-d-r-fontSize);
+        font-weight: var(--en-single-f-d-r-fontWeight);
+        color: var(--color-datepicker-range_picker-text-active);
+
+        ::-webkit-input-placeholder {
+            color: var(--color-datepicker-range_picker-text-default);
+        }
+    }
+
+    &__line {
+        width: var(--width-datepicker-range_picker_divider);
+        height: var(--height-datepicker-range_picker_divider);
+        background-color: var(--color-datepicker-range_picker_divider);
+    }
+}
+
+.van-hairline-unset--top-bottom::after {
+    border-width: 0;
+}
+
+.van-picker__frame {
+    left: var(--spacing-datepicker-padding_y);
+    right: var(--spacing-datepicker-padding_y);
+}

package/dist/components/checkbox/index.js

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

package/dist/components/checkbox/index.vue

@@ -0,0 +1,161 @@
+<template>
+  <label :class="wrapClasses" v-if="!checkboxButton">
+    <span :class="checkboxClasses">
+      <!-- 处理分组和单个情况的输入元素 -->
+      <span :class="innerClasses"></span>
+        <!-- 处理分组和单个情况的输入元素 -->
+      <input v-if="group" type="checkbox" :class="inputClasses" :disabled="disabled" :value="name" v-model="model"
+        @change="change" />
+      <input v-else type="checkbox" :class="inputClasses" :disabled="disabled" :checked="currentValue"
+        @change="change" />
+    </span>
+    <!-- 标签和可选的描述 -->
+    <div class="vd-checkbox__label" v-if="$slots.default">
+      <p class="vd-checkbox__text">
+        <slot></slot>
+      </p>
+      <p class="vd-checkbox__description" v-if="extra">{{ extra }}</p>
+    </div>
+  </label>
+
+    <!-- 复选框按钮变体 -->
+  <label class="vd-checkbox vd-checkbox-button" :class="checkboxButtonClasses" v-else>
+    <input type="checkbox" :class="inputClasses" :disabled="disabled" :checked="currentValue" @change="change" />
+    <template v-if="type === 'small'">
+      <vd-icon v-if="icon" :name="icon" class="vd-checkbox-button__icon--small"></vd-icon>
+      <span class="vd-checkbox-button__text">
+        <slot></slot>
+      </span>
+    </template>
+
+    <template v-if="type === 'medium'">
+      <span class="vd-checkbox-button__text">
+        <slot></slot>
+      </span>
+      <span class="vd-checkbox-button__description" v-if="extra">{{ extra }}</span>
+    </template>
+
+    <template v-if="type === 'large'">
+      <vd-icon v-if="icon" :name="icon" class="vd-checkbox-button__icon--large"></vd-icon>
+      <span class="vd-checkbox-button__text">
+        <slot></slot>
+      </span>
+    </template>
+  </label>
+</template>
+<script>
+import { findComponentUpward } from "../utils/assist";
+import VdIcon from '../icon';
+const prefixCls = "vd-checkbox";
+
+export default {
+  name: "vd-checkbox",
+  components: {
+    VdIcon
+  },
+  props: {
+    value: [String, Number, Boolean], // 复选框的当前值
+    checkboxButton: Boolean, // 是否为复选框按钮
+    disabled: Boolean,  // 是否禁用
+    extra: String, // 额外的描述文本
+    trueValue: {
+      type: [String, Number, Boolean],
+      default: true,  // 复选框被选中时的值
+    },
+    falseValue: {
+      type: [String, Number, Boolean],
+      default: false,  // 复选框未被选中时的值
+    },
+    name: null,  //复选框的 name 属性
+    indeterminate: Boolean,  // 复选框的不确定状态
+    icon: String,  // 使用复选框按钮时显示的图标
+    type: String,   // 复选框按钮的尺寸类型（'small'，'medium'，'large'）
+  },
+  data() {
+    return {
+      model: [],  // 复选框组的模型值
+      currentValue: this.value,  // 复选框的当前值
+      group: false,  // 是否为复选框组
+      parent: null, // 对父级复选框组组件的引用
+    };
+  },
+  computed: {
+    wrapClasses() {
+      return [
+        `${prefixCls}`,
+        {
+          [`${prefixCls}--checked`]: this.currentValue,
+          [`${prefixCls}--disabled`]: this.disabled,
+        },
+      ];
+    },
+    checkboxClasses() {
+      return [
+        `${prefixCls}__input`,
+        {
+          [`${prefixCls}--indeterminate`]: this.indeterminate,
+        },
+      ];
+    },
+    innerClasses() {
+      return [`${prefixCls}__icon`];
+    },
+    inputClasses() {
+      return `${prefixCls}__original`;
+    },
+    checkboxButtonClasses() {
+      return [
+        {
+          [`${prefixCls}-button--checked`]: this.currentValue,
+          [`${prefixCls}-button--${this.type}`]: this.type,
+          [`${prefixCls}-button--disabled`]: this.disabled,
+        },
+      ];
+    },
+  },
+  mounted() {
+    this.parent = findComponentUpward(this, "vd-checkbox-group");
+    if (this.parent) {
+      this.isGroup = true;
+      this.parent.updateModel(true);
+    } else {
+      this.updateModel();
+    }
+  },
+  methods: {
+    change(event) {
+      if (this.disabled) {
+        return false;
+      }
+
+      const checked = event.target.checked;
+      this.currentValue = checked;
+
+      const value = checked ? this.trueValue : this.falseValue;
+      this.$emit("input", value);
+
+      if (this.group) {
+        this.parent.change(this.model);
+      } else {
+        this.$emit("change", value);
+      }
+    },
+    updateModel() {
+      this.currentValue = this.value === this.trueValue;
+    },
+  },
+  watch: {
+    value(val) {
+      if (val === this.trueValue || val === this.falseValue) {
+        this.updateModel();
+      } else {
+        throw "Value should be trueValue or falseValue.";
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less">
+@import "./style.less";
+</style>

package/dist/components/checkbox/style.less

@@ -0,0 +1,289 @@
+@checkbox-prefix-cls: vd-checkbox;
+@checkbox-button-prefix-cls: vd-checkbox-button;
+@checkbox-icon-prefix-cls: ~"@{checkbox-prefix-cls}__icon";
+
+    .@{checkbox-prefix-cls} {
+        cursor: pointer;
+        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+        display: flex;
+        -webkit-tap-highlight-color: transparent;
+    }
+
+    // 普通状态
+    .@{checkbox-prefix-cls} {
+
+        &__input {
+            position: relative;
+            margin-inline-end: var(--spacing-check_radio-icon-margin_right);
+            width: var(--icon-check_radio-sizing);
+            height: var(--icon-check_radio-sizing);
+        }
+
+        &__text {
+            color: var(--color-check_radio-text-default);
+            font-size: var(--en-single-f-d-r-fontSize);
+            font-weight: var(--en-single-f-d-r-fontWeight);
+        }
+
+        &__description {
+            line-height: 1;
+            margin-top: var(--spacing-check_radio-text-margin_top);
+            color: var(--color-check_radio-text_describe-default);
+            font-size: var(--en-single-f-b-r-fontSize);
+            font-weight: var(--en-single-f-b-r-fontWeight);
+        }
+
+        .@{checkbox-icon-prefix-cls} {
+            display: block;
+            width: var(--icon-check_radio-sizing);
+            height: var(--icon-check_radio-sizing);
+            position: relative;
+            top: 0;
+            left: 0;
+
+            &::before {
+                position: absolute;
+                box-sizing: border-box;
+                content: ' ';
+                pointer-events: none;
+                top: -50%;
+                right: -50%;
+                bottom: -50%;
+                left: -50%;
+                border: 3px solid var(--color-check_radio-default);
+                -webkit-transform: scale(0.5);
+                transform: scale(0.5);
+            }
+        }
+
+        &__original {
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            z-index: 1;
+            cursor: pointer;
+            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+            opacity: 0;
+        }
+    }
+
+
+    // 选中状态
+    .@{checkbox-prefix-cls}--checked {
+
+        .@{checkbox-prefix-cls} {
+            &__text {
+                font-size: var(--en-single-f-d-s-fontSize);
+                font-weight: var(--en-single-f-d-s-fontWeight);
+            }
+        }
+
+        .@{checkbox-icon-prefix-cls} {
+            background: var(--color-check_radio-active);
+            border-radius: 2px;
+            border: 0;
+            &::after{
+                content: "";
+                box-sizing: content-box;
+                display: table;
+                width: 4px;
+                height: 8px;
+                position: absolute;
+                top: 2px;
+                left: 5px;
+                border: 2px solid var(--bg-color-1);
+                border-top: 0;
+                border-left: 0;
+                transform: rotate(45deg) scale(1);
+            }
+            &::before{
+                display: none;
+            }
+        }
+    }
+
+
+    // 禁用
+    .@{checkbox-prefix-cls}--disabled {
+        cursor: not-allowed;
+        // opacity: var(--opacity-30);
+
+        .@{checkbox-icon-prefix-cls} {
+            &::before{
+                border-color: var(--color-check_radio-disable);
+            }
+        }
+
+        .@{checkbox-prefix-cls}__text{
+            color: var(--color-check_radio-text-disable);
+        }
+
+        .@{checkbox-prefix-cls}__description{
+            color: var(--color-check_radio-text_describe-disable);
+        }
+
+    }
+
+    .@{checkbox-prefix-cls}--checked.@{checkbox-prefix-cls}--disabled{
+        .@{checkbox-icon-prefix-cls} {
+            background: var(--color-check_radio-active-disable);
+        }
+    }
+
+    // 半选状态
+    .@{checkbox-prefix-cls}--indeterminate {
+
+        & + .@{checkbox-prefix-cls}__label {
+            .@{checkbox-prefix-cls}__text {
+                font-size: var(--en-single-f-d-s-fontSize);
+                font-weight: var(--en-single-f-d-s-fontWeight);
+            }
+        }
+
+        .@{checkbox-icon-prefix-cls} {
+            background: #1BC47D;
+            border-radius: 2px;
+            border: 0;
+            &::after{
+                content: "";
+                width: 9px;
+                height: 2px;
+                position: absolute;
+                left: 50%;
+                top: 50%;
+                transform: translate(-50%, -50%);
+                border: 0;
+                background-color: var(--bg-color-1);
+            }
+
+            &::before{
+                display: none;
+            }
+        }
+
+    }
+
+
+
+
+
+    .@{checkbox-button-prefix-cls}{
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        flex-direction: column;
+        justify-content: center;
+        line-height: 1;
+        width: 100%;
+        -webkit-tap-highlight-color: transparent;
+        background-color: var(--color-check_radio-check_bg-default);
+
+        &--large {
+            height: var(--height-check_radio-check_button_l);
+            border-radius: var(--radius-check_radio-check_l);
+
+            .@{checkbox-button-prefix-cls}__text {
+                margin-block-start: var(--spacing-check_radio-check_icon-margin_bottom);
+                font-size: 12px;
+                color: var(--color-check_radio-radio_button_text-default);
+            }
+            
+        }
+
+        &--medium {
+            height: var(--height-check_radio-check_button_m);
+            border-radius: var(--radius-check_radio-m);
+
+            .@{checkbox-button-prefix-cls}{
+                &__description {
+                    margin-block-start: var(--spacing-check_radio-check_describe-margin_top);
+                    font-size: 11px;
+                    color: var(--color-check_radio-check_button_text_describe-default);
+                }
+            }
+        }
+
+        &--small {            
+            display: flex;
+            flex-direction: row;
+            height: var(--height-check_radio-check_button_s);
+            border-radius: var(--radius-check_radio-s);
+        }
+
+
+        &__icon--large {
+            color: var(--color-check_radio-check_button_icon-default);
+            font-size: var(--icon-check_radio-check_l);
+        }
+
+        &__icon--small {
+            font-size: var(--icon-check_radio-check_s);
+            color: var(--text-color-h2);
+            margin-inline-end: var(--spacing-check_radio-check_icon-margin_right);
+        }
+
+        &__text {
+            color: var(--color-check_radio-radio_button_text-default);
+            font-size: var(--en-single-f-c-r-fontSize);
+            font-weight: var(--en-single-f-c-r-fontWeight);
+        }
+
+        &--checked {
+            background-color: var(--color-check_radio-check_bg-active);
+            border-color: var(--color-check_radio-radio_border-active);
+
+            .@{checkbox-button-prefix-cls}__text {
+                color: var(--color-check_radio-radio_button_text-active);
+                font-size: var(--en-single-f-c-s-fontSize);
+                font-weight: var(--en-single-f-c-s-fontWeight);
+            }
+
+            .@{checkbox-button-prefix-cls}__icon--large,
+            .@{checkbox-button-prefix-cls}__icon--small,
+            .@{checkbox-button-prefix-cls}__description {
+                color: var(--color-check_radio-check_button_icon-active);
+            }
+
+            &.@{checkbox-button-prefix-cls}{
+                &--large{
+                    .@{checkbox-button-prefix-cls}__text {
+                        font-size: 12px;
+                    }
+                }
+
+            }
+        }
+
+        &--disabled{
+            cursor: not-allowed;
+            .@{checkbox-button-prefix-cls}__text {
+                color: var(--color-check_radio-radio_button_text-disable);
+            }
+            .@{checkbox-button-prefix-cls}__icon--large,
+            .@{checkbox-button-prefix-cls}__icon--small,
+            .@{checkbox-button-prefix-cls}__description{
+                color: var(--color-check_radio-check_button_icon-disable);
+            }
+        }
+    }
+
+    .@{checkbox-prefix-cls}-group {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-check_radio-group-margin_x);
+		
+		&__card{
+			display: flex;
+			flex-wrap: wrap;
+            flex-direction: row;
+			gap: 12px;
+		}
+        
+        .@{checkbox-button-prefix-cls}{
+            flex: 1;
+        }
+    }

package/dist/components/checkbox-group/index.js

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

package/dist/components/checkbox-group/index.vue

@@ -0,0 +1,69 @@
+<template>
+    <div :class="classes">
+        <slot></slot>
+    </div>
+</template>
+<script>
+import { findComponentsDownward } from "../utils/assist";
+
+const prefixCls = 'vd-checkbox-group';
+
+export default {
+    name: 'vd-checkbox-group',
+    props: {
+        value: {
+            type: Array,
+            default() {
+                return [];
+            }
+        },
+        type: String,  // 类型card
+
+    },
+    data() {
+        return {
+            currentValue: this.value,
+            childrens: []
+        };
+    },
+    computed: {
+        classes() {
+            return [
+                `${prefixCls}`,
+                {
+                    [`${prefixCls}__${this.type}`]: this.type,
+                }
+            ];
+        }
+    },
+    mounted() {
+        this.updateModel(true);
+    },
+    methods: {
+        updateModel(update) {
+            this.childrens = findComponentsDownward(this, 'vd-checkbox', 'vd-checkbox-group');
+            if (this.childrens) {
+                const { value } = this;
+                this.childrens.forEach(child => {
+                    child.model = value;
+
+                    if (update) {
+                        child.currentValue = value.indexOf(child.name) >= 0;
+                        child.group = true;
+                    }
+                });
+            }
+        },
+        change(data) {
+            this.currentValue = data;
+            this.$emit('input', data);
+            this.$emit('change', data);
+        }
+    },
+    watch: {
+        value() {
+            this.updateModel(true);
+        }
+    }
+};
+</script>

package/dist/components/common/state/index.vue

@@ -0,0 +1,33 @@
+<template>
+    <div class="vd-market-state" :class="stateClasses" v-if="state">
+        <slot></slot>
+    </div>
+</template>
+
+<script>
+const prefixCls = 'vd-market-state';
+
+export default {
+    name: 'vd-market-state',
+    props: {
+        state: {
+            type: String,
+            default: 'open'
+        }
+    },
+    computed: {
+        stateClasses() {
+            return [
+                {
+                    [`${prefixCls}--${this.state}`]: this.state,
+
+                }
+            ]
+        },
+    }
+}
+</script>
+
+<style lang="less">
+@import 'style.less';
+</style>