vdesign-ui 0.1.21 → 0.1.23

package/dist/components/calendar/style.less

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

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

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

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

@@ -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,184 @@
+<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>