vdesign-ui 0.1.21 → 0.1.23

package/dist/components/radio/index.vue

@@ -0,0 +1,158 @@
+<template>
+    <label :class="wrapClasses" v-if="!radioButton">
+        <span :class="radioClasses">
+            <span :class="innerClasses"></span>
+            <input type="radio" :class="inputClasses" :disabled="disabled" :checked="currentValue" @change="change">
+        </span>
+        <div class="vd-radio__label" v-if="$slots.default">
+            <div class="vd-radio__text">
+                <slot></slot>
+            </div>
+            <!-- <p class="vd-radio__description" v-if="extra">{{ extra }}</p> -->
+        </div>
+    </label>
+
+
+    <label class="vd-radio vd-radio-button" :class="radioButtonClasses" v-else>
+        <input type="radio" :class="inputClasses" :disabled="disabled" :checked="currentValue" @change="change">
+        <span class="vd-radio-button-text">
+            <slot></slot>
+        </span>
+    </label>
+</template>
+<script>
+import { findComponentUpward } from './assist';
+const prefixCls = 'vd-radio';
+
+export default {
+    name: 'vd-radio',
+    props: {
+        radioButton: {
+            type: Boolean,
+            default: false
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        // extra: {
+        //     type: [String, Number, Boolean],
+        // },
+        value: {
+            type: [String, Number, Boolean],
+            default: false
+        },
+        trueValue: {
+            type: [String, Number, Boolean],
+            default: true
+        },
+        falseValue: {
+            type: [String, Number, Boolean],
+            default: false
+        },
+        name: {
+            type: [String, Number, Boolean]
+        },
+        type: {
+            type: String,
+            default: ''
+        },
+    },
+    data() {
+        return {
+            currentValue: this.value,
+            group: false,
+            parent: findComponentUpward(this, 'vd-radio-group'),
+            // parent: this.$parent,
+            focusWrapper: false,
+            focusInner: false
+        };
+    },
+    computed: {
+        wrapClasses() {
+            return [
+                `${prefixCls}`,
+                {
+                    [`${prefixCls}--checked`]: this.currentValue,
+                    [`${prefixCls}--disabled`]: this.disabled,
+                }
+            ];
+        },
+        radioClasses() {
+            return [
+                `${prefixCls}__input`,
+            ];
+        },
+        innerClasses() {
+            return [
+                `${prefixCls}__icon`,
+            ];
+        },
+        inputClasses() {
+            return `${prefixCls}__original`;
+        },
+        radioButtonClasses() {
+            return [
+                {
+                    [`${prefixCls}-button--checked`]: this.currentValue,
+                    [`${prefixCls}-button--${this.type}`]: this.type,
+                    [`${prefixCls}-button--disabled`]: this.disabled,
+                }
+            ]
+
+        }
+    },
+    mounted() {
+        if (this.parent) {
+            this.group = true;
+        }
+
+        if (this.group) {
+            this.parent.updateValue();
+        } else {
+            this.updateValue();
+        }
+    },
+    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) {
+                if (this.name !== undefined) {
+                    this.parent.change({
+                        value: this.name,
+                        checked: this.value
+                    });
+                }
+            } else {
+                this.$emit('change', value);
+            }
+        },
+        updateValue() {
+            this.currentValue = this.value === this.trueValue;
+        },
+
+    },
+    watch: {
+        value(val) {
+            if (val === this.trueValue || val === this.falseValue) {
+                this.updateValue();
+            } else {
+                throw 'Value should be trueValue or falseValue.';
+            }
+        }
+    }
+};
+</script>
+
+<style lang="less">
+@import './style.less';
+</style>

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

@@ -0,0 +1,70 @@
+<template>
+    <div :class="classes">
+        <slot></slot>
+    </div>
+</template>
+<script>
+import { findComponentsDownward } from '../assist';
+
+const prefixCls = 'vd-radio-group';
+
+export default {
+    name: 'vd-radio-group',
+    props: {
+        value: {
+            type: [String, Number],
+            default: ''
+        },
+        type: {
+            type: String,
+            default: ''
+        }
+    },
+    data() {
+        return {
+            currentValue: this.value,
+            childrens: []
+        };
+    },
+    computed: {
+        classes() {
+            return [
+                `${prefixCls}`,
+                {
+                    [`${prefixCls}__${this.type}`]: this.type,
+                }
+            ];
+        }
+    },
+    mounted() {
+        this.updateValue();
+    },
+    methods: {
+        updateValue() {
+            this.childrens = findComponentsDownward(this, 'vd-radio');
+            if (this.childrens) {
+                this.childrens.forEach(child => {
+                    child.currentValue = this.currentValue === child.name;
+                    child.group = true;
+                });
+            }
+        },
+        change(data) {
+            this.currentValue = data.value;
+            this.updateValue();
+            this.$emit('input', data.value);
+            this.$emit('change', data.value);
+        }
+    },
+    watch: {
+        value() {
+            if (this.currentValue !== this.value) {
+                this.currentValue = this.value;
+                this.$nextTick(() => {
+                    this.updateValue();
+                });
+            }
+        }
+    }
+};
+</script>

package/dist/components/radio/style.css

@@ -0,0 +1,213 @@
+.vd-radio {
+  position: relative;
+  cursor: pointer;
+  display: flex;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+.vd-radio__input {
+  position: relative;
+  margin-inline-end: calc(var(--spacing-check_radio-icon-margin_right) * 1px);
+  width: calc(var(--icon-check_radio-sizing) * 1px);
+  height: calc(var(--icon-check_radio-sizing) * 1px);
+}
+.vd-radio__label {
+  flex: 1;
+}
+.vd-radio__text {
+  color: var(--color-check_radio-text-default);
+  font-size: calc(var(--en-single-f-d-r-fontSize) * 1px);
+  font-weight: var(--en-single-f-d-r-fontWeight);
+}
+.vd-radio__description {
+  line-height: 1;
+  margin-top: calc(var(--spacing-check_radio-text-margin_top) * 1px);
+  color: var(--color-check_radio-text_describe-default);
+  font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
+  font-weight: var(--en-single-f-b-r-fontWeight);
+}
+.vd-radio .vd-radio__icon {
+  display: block;
+  width: calc(var(--icon-check_radio-sizing) * 1px);
+  height: calc(var(--icon-check_radio-sizing) * 1px);
+  position: relative;
+}
+.vd-radio .vd-radio__icon::before {
+  position: absolute;
+  box-sizing: border-box;
+  content: ' ';
+  pointer-events: none;
+  top: -50%;
+  right: -50%;
+  bottom: -50%;
+  left: -50%;
+  border: 0 solid var(--color-check_radio-default);
+  -webkit-transform: scale(0.5);
+  transform: scale(0.5);
+  border-width: 3px;
+  border-radius: 50%;
+}
+.vd-radio__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;
+}
+.vd-radio--checked .vd-radio__text {
+  font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
+  font-weight: var(--en-single-f-d-s-fontWeight);
+}
+.vd-radio--checked .vd-radio__icon::before {
+  border: 0 solid var(--color-check_radio-active);
+  border-width: 3px;
+}
+.vd-radio--checked .vd-radio__icon::after {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: 50%;
+  display: table;
+  border-top: 0;
+  border-left: 0;
+  content: " ";
+  background-color: var(--color-check_radio-active);
+}
+.vd-radio--disabled {
+  cursor: not-allowed;
+}
+.vd-radio--disabled .vd-radio__text {
+  color: var(--color-check_radio-text-disable);
+}
+.vd-radio--disabled .vd-radio__description {
+  color: var(--color-check_radio-text_describe-disable);
+}
+.vd-radio--disabled .vd-radio__icon::before {
+  border-color: var(--color-check_radio-disable);
+}
+.vd-radio--checked.vd-radio--disabled .vd-radio__icon::before {
+  border-color: var(--color-check_radio-active-disable);
+}
+.vd-radio--checked.vd-radio--disabled .vd-radio__icon::after {
+  background-color: var(--color-check_radio-active-disable);
+}
+.vd-radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--spacing-check_radio-group-margin_x)*1px);
+}
+.vd-radio-group-card {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  gap: 12px;
+}
+.vd-radio-group-card .vd-radio-button-cell {
+  flex: 1;
+}
+.vd-radio-button {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  line-height: 1;
+  width: 100%;
+}
+.vd-radio-button::after {
+  position: absolute;
+  box-sizing: border-box;
+  content: ' ';
+  pointer-events: none;
+  top: -50%;
+  right: -50%;
+  bottom: -50%;
+  left: -50%;
+  border: 0 solid var(--color-check_radio-radio_border-default);
+  -webkit-transform: scale(0.5);
+  transform: scale(0.5);
+  border-width: 1px;
+}
+.vd-radio-button--large {
+  height: calc(var(--height-check_radio-radio_button_l) * 1px);
+}
+.vd-radio-button--large .vd-radio-button-text {
+  color: var(--color-check_radio-radio_button_text-default);
+  font-size: calc(var(--en-single-f-d-r-fontSize) * 1px);
+  font-weight: var(--en-single-f-d-r-fontWeight);
+}
+.vd-radio-button--large::after {
+  border-radius: calc(var(--radius-check_radio-radio_l) * 2px);
+}
+.vd-radio-button--medium {
+  height: calc(var(--height-check_radio-radio_button_m) * 1px);
+}
+.vd-radio-button--medium .vd-radio-button-text {
+  color: var(--color-check_radio-radio_button_text-default);
+  font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
+  font-weight: var(--en-single-f-c-r-fontWeight);
+}
+.vd-radio-button--medium::after {
+  border-radius: calc(var(--radius-check_radio-m) * 2px);
+}
+.vd-radio-button--small {
+  height: calc(var(--height-check_radio-radio_button_s) * 1px);
+}
+.vd-radio-button--small .vd-radio-button-text {
+  color: var(--color-check_radio-radio_button_text-default);
+  font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
+  font-weight: var(--en-single-f-c-r-fontWeight);
+}
+.vd-radio-button--small::after {
+  border-radius: calc(var(--radius-check_radio-s) * 2px);
+}
+.vd-radio-button--checked {
+  background-color: var(--color-check_radio-radio_button_bg-active);
+}
+.vd-radio-button--checked::after {
+  border-color: var(--color-check_radio-radio_border-active);
+  border-width: 2px;
+}
+.vd-radio-button--checked .vd-radio-button-text {
+  color: var(--color-check_radio-radio_button_text-active);
+}
+.vd-radio-button--checked.vd-radio-button--large .vd-radio-button-text {
+  font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
+  font-weight: var(--en-single-f-d-s-fontWeight);
+}
+.vd-radio-button--checked.vd-radio-button--medium .vd-radio-button-text {
+  font-size: calc(var(--en-single-f-c-s-fontSize) * 1px);
+  font-weight: var(--en-single-f-c-s-fontWeight);
+}
+.vd-radio-button--checked.vd-radio-button--small .vd-radio-button-text {
+  font-size: calc(var(--en-single-f-c-s-fontSize) * 1px);
+  font-weight: var(--en-single-f-c-s-fontWeight);
+}
+.vd-radio-button--disabled {
+  cursor: not-allowed;
+}
+.vd-radio-button--disabled .vd-radio-button-text {
+  color: var(--color-check_radio-radio_button_text-disable);
+}
+.vd-radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--spacing-check_radio-group-margin_x)*1px);
+}
+.vd-radio-group__card {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+.vd-radio-group .vd-radio-button {
+  flex: 1;
+}