vdesign-ui 0.1.18 → 0.1.19

package/dist/components/calendar/style.less

@@ -1,167 +0,0 @@
-.van-calendar__header {
-    box-shadow: none;
-}
-
-.van-calendar__header-subtitle {
-    height: calc(var(--height-datepicker-title-month_year) * 1px);
-    line-height: calc(var(--height-datepicker-title-month_year) * 1px);
-    color: var(--color-datepicker-title-month_year);
-    font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
-    font-weight: var(--en-single-f-d-s-fontWeight);
-}
-
-.van-calendar__weekdays {
-    padding: 0 20px;
-    height: calc(var(--height-datepicker-week) * 1px);
-    color: var(--color-datepicker-text-week);
-}
-
-.van-calendar__weekday {
-    line-height: calc(var(--height-datepicker-week) * 1px);
-    font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
-    font-weight: var(--en-single-f-b-r-fontWeight);
-}
-
-.van-calendar__days {
-    display: flex;
-    // grid-template-columns: repeat(7,1fr);
-    // grid-column-gap: calc(var(--spacing-datepicker-date-margin_y) * 1px);
-    padding: 0 20px;
-}
-
-.van-calendar__day {
-    // width: calc(var(--height-datepicker-date) * 1px);
-    height: calc(var(--height-datepicker-date) * 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-default);
-    background-color: var(--color-datepicker-date-bg-default);
-    margin-block-start: calc(var(--spacing-datepicker-date-margin_top) * 1px);
-    margin-block-end: calc(var(--spacing-datepicker-date-margin_bottom) * 1px);
-
-    &--disabled {
-        color: var(--color-datepicker-date-text-disable);
-        background-color: var(--color-datepicker-date-bg-disable);
-    }
-
-    &--start {
-        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-active);
-        // background-color: var(--color-datepicker-date-bg-active);
-        // border-radius: calc(var(--height-datepicker-date) * 0.5px) 0 0 calc(var(--height-datepicker-date) * 0.5px);
-        border-radius: 0;
-        // background:  url(./start.png) center center no-repeat;
-        background-image: url(./start.png) !important;
-        background-position: center center !important;
-        background-repeat: no-repeat !important;
-        background-size: cover !important;
-        // &::after{
-        //     content: '';
-        //     position: absolute;
-        //     right: 0;
-        //     top: 0;
-        //     bottom: 0;
-        //     background-color: #1BC47D;
-        // }
-    }
-
-    &--middle {
-        color: var(--color-datepicker-date-text-default) !important;
-        background-color: var(--color-datepicker-date_mask-bg-active);
-
-        // &::after,&::before{
-        //     content: "";
-        //     display: block;
-        //     position: absolute;
-        //     top: 0;
-        //     width: 4px;
-        //     height: 100%;
-        //     background-color: var(--color-datepicker-date_mask-bg-active);
-        //     opacity: 1;
-        // }
-        // &::before{
-        //     left: 0;
-        // }
-        &::after {
-            background-color: transparent;
-            opacity: 1;
-        }
-    }
-
-    &--end {
-        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-active);
-        background-color: var(--color-datepicker-date-bg-active);
-        // border-radius:0 calc(var(--height-datepicker-date) * 0.5px) calc(var(--height-datepicker-date) * 0.5px) 0;
-        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: calc(var(--spacing-datepicker-range_picker-margin_top) * 1px);
-    padding-block-end: calc(var(--spacing-datepicker-range_picker-margin_bottom) * 1px);
-    padding-inline-start: calc(var(--spacing-datepicker-padding_y) * 1px);
-    padding-inline-end: calc(var(--spacing-datepicker-padding_y) * 1px);
-
-    &-inner {
-        display: flex;
-        align-items: center;
-        border-radius: calc(var(--radius-datepicker-range_picker_bg) * 1px);
-        background-color: var(--color-datepicker-range_picker-bg);
-    }
-
-    &__inputs {
-        width: 100%;
-        text-align: center;
-        background-color: transparent;
-        height: calc(var(--height-datepicker-range_picker_bg) * 1px);
-        line-height: calc(var(--height-datepicker-range_picker_bg) * 1px);
-        font-size: calc(var(--en-single-f-d-r-fontSize) * 1px);
-        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: calc(var(--width-datepicker-range_picker_divider) * 1px);
-        height: calc(var(--height-datepicker-range_picker_divider) * 1px);
-        background-color: var(--color-datepicker-range_picker_divider);
-    }
-}
-
-.van-hairline-unset--top-bottom::after {
-    border-width: 0;
-}
-
-.van-picker__frame {
-    left: calc(var(--spacing-datepicker-padding_y) * 1px);
-    right: calc(var(--spacing-datepicker-padding_y) * 1px);
-}

package/dist/components/checkbox/assist.js

@@ -1,34 +0,0 @@
-
-
-// Find components downward
-export function findComponentsDownward (context, componentName, ignoreComponentNames = []) {
-    if (!Array.isArray(ignoreComponentNames)) {
-        ignoreComponentNames = [ignoreComponentNames];
-    }
-    return context.$children.reduce((components, child) => {
-        if (child.$options.name === componentName) components.push(child);
-        if (ignoreComponentNames.indexOf(child.$options.name) < 0) {
-            const foundChilds = findComponentsDownward(child, componentName);
-            return components.concat(foundChilds);
-        } else {
-            return components;
-        }
-    }, []);
-}
-
-// Find components upward
-export function findComponentUpward (context, componentName, componentNames) {
-    if (typeof componentName === 'string') {
-        componentNames = [componentName];
-    } else {
-        componentNames = componentName;
-    }
-
-    let parent = context.$parent;
-    let name = parent.$options.name;
-    while (parent && (!name || componentNames.indexOf(name) < 0)) {
-        parent = parent.$parent;
-        if (parent) name = parent.$options.name;
-    }
-    return parent;
-}

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

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

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

@@ -1,69 +0,0 @@
-<template>
-    <div :class="classes">
-        <slot></slot>
-    </div>
-</template>
-<script>
-import { findComponentsDownward } from '../assist';
-
-
-const prefixCls = 'vd-checkbox-group';
-
-export default {
-    name: 'vd-checkbox-group',
-    props: {
-        value: {
-            type: Array,
-            default() {
-                return [];
-            }
-        },
-        type: String,
-    },
-    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/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,184 +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>
-    <!-- <div class="vd-checkbox-button__icon">
-      <vd-icon
-        v-if="icon"
-        :name="icon"
-        class="vd-checkbox-button__icon--large"
-        :class="{ 'vd-checkbox-button__icon-mb': iconDescriptionText }"
-      ></vd-icon>
-      <vd-icon
-        v-if="LeftIcon"
-        :name="LeftIcon"
-        class="vd-checkbox-button__icon--small"
-      ></vd-icon>
-      <span
-        v-if="iconText"
-        class="vd-checkbox-button__text"
-        :class="{ 'vd-checkbox-button__text-mb': descriptionText }"
-        >{{ iconText }}</span
-      >
-    </div>
-    <span class="vd-checkbox-button-descript" v-if="descriptionText">{{
-      descriptionText
-    }}</span>
-    <span class="vd-checkbox-button__icon-descript" v-if="iconDescriptionText">{{
-      iconDescriptionText
-    }}</span> -->
-  </label>
-</template>
-<script>
-import { findComponentUpward } from "./assist";
-const prefixCls = "vd-checkbox";
-
-export default {
-  name: "vd-checkbox",
-  props: {
-    checkboxButton: Boolean,
-    disabled: Boolean,
-    extra: [String, Number, Boolean],
-    descriptionText: [String, Number, Boolean],
-    iconDescriptionText: [String, Number, Boolean],
-    value: [String, Number, Boolean],
-    trueValue: {
-      type: [String, Number, Boolean],
-      default: true,
-    },
-    falseValue: {
-      type: [String, Number, Boolean],
-      default: false,
-    },
-    name: null,
-    indeterminate: Boolean,
-    icon: String,
-    iconText: [String, Number, Boolean],
-    type: String,
-  },
-  data() {
-    return {
-      model: [],
-      currentValue: this.value,
-      group: false,
-      parent: findComponentUpward(this, "vd-checkbox-group"),
-      //   name: "",
-    };
-  },
-  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.group = true;
-    }
-    if (this.group) {
-      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>