vdesign-ui 0.2.5 → 0.2.6

package/dist/components/calendar/style.less

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

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

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

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

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

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

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

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