vdesign-ui 0.1.19 → 0.1.20

package/dist/components/checkbox/style.less

@@ -0,0 +1,291 @@
+@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: 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);
+        }
+
+        &__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);
+        }
+
+        &__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);
+        }
+
+        .@{checkbox-icon-prefix-cls} {
+            display: block;
+            width: calc(var(--icon-check_radio-sizing) * 1px);
+            height: calc(var(--icon-check_radio-sizing) * 1px);
+            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: 0 solid var(--color-check_radio-default);
+                -webkit-transform: scale(0.5);
+                transform: scale(0.5);
+                border-width: 3px;
+            }
+        }
+
+        &__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: calc(var(--en-single-f-d-s-fontSize) * 1px);
+                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: calc(var(--en-single-f-d-s-fontSize) * 1px);
+                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: calc(var(--height-check_radio-check_button_l) * 1px);
+            border-radius: calc(var(--radius-check_radio-check_l) * 1px);
+
+            .@{checkbox-button-prefix-cls}__text {
+                margin-block-start: calc(var(--spacing-check_radio-check_icon-margin_bottom) * 1px);
+                font-size: 12px;
+                // color: rgba(0, 0, 0, 0.85);
+                color: var(--color-check_radio-radio_button_text-default);
+            }
+            
+        }
+
+        &--medium {
+            height: calc(var(--height-check_radio-check_button_m) * 1px);
+            border-radius: calc(var(--radius-check_radio-m) * 1px);
+
+            .@{checkbox-button-prefix-cls}{
+                &__description {
+                    margin-block-start: calc(var(--spacing-check_radio-check_describe-margin_top) * 1px);
+                    font-size: 11px;
+                    // color: rgba(0, 0, 0, 0.3);
+                    color: var(--color-check_radio-check_button_text_describe-default);
+                }
+            }
+        }
+
+        &--small {
+            height: calc(var(--height-check_radio-check_button_s) * 1px);
+            border-radius: calc(var(--radius-check_radio-s) * 1px);
+            display: flex;
+            flex-direction: row;
+        }
+
+
+        &__icon--large {
+            color: var(--color-check_radio-check_button_icon-default);
+            font-size: calc(var(--icon-check_radio-check_l) * 1px);
+        }
+
+        &__icon--small {
+            font-size: calc(var(--icon-check_radio-check_s) * 1px);
+            color: var(--text-color-h2);
+            margin-inline-end: calc(var(--spacing-check_radio-check_icon-margin_right) * 1px);
+        }
+
+        &__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);
+        }
+
+        &--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: calc(var(--en-single-f-c-s-fontSize) * 1px);
+                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: calc(var(--spacing-check_radio-group-margin_x)*1px);
+		
+		&__card{
+			display: flex;
+			flex-wrap: wrap;
+            flex-direction: row;
+			gap: 12px;
+		}
+        
+        .@{checkbox-button-prefix-cls}{
+            flex: 1;
+        }
+    }

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

@@ -0,0 +1,80 @@
+<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">
+.vd-market-state {
+    display: inline-flex;
+    align-items: baseline;
+    font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
+    font-weight: var(--en-single-f-b-r-fontWeight);
+
+    &::before {
+        content: '';
+        display: inline-block;
+        border-radius: 50%;
+        width: calc(var(--width-dropdown-state_drop) * 1px);
+        height: calc(var(--width-dropdown-state_drop) * 1px);
+        margin-inline-end: calc(var(--spacing-dropdown-state_drop-margin_right) * 1px);
+        background-color: var(--color-dropdown-state-open);
+    }
+
+    &--open {
+        color: var(--color-dropdown-state-open);
+
+        &::before {
+            background-color: var(--color-dropdown-state-open);
+        }
+    }
+
+    &--preopen {
+        color: var(--color-dropdown-state-preopen);
+
+        &::before {
+            background-color: var(--color-dropdown-state-preopen);
+        }
+    }
+
+    &--close {
+        color: var(--color-dropdown-state-close);
+
+        &::before {
+            background-color: var(--text-color-h3);
+        }
+    }
+
+    &--fusing {
+        color: var(--color-dropdown-state-fusing);
+
+        &::before {
+            background-color: var(--color-dropdown-state-fusing);
+        }
+    }
+}
+</style>

package/dist/components/data-list/index.js

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

package/dist/components/data-list/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="vd-datalist">
+    <slot></slot>
+  </div>
+</template>
+<script>
+export default {
+  name: 'vd-datalist',
+  data() {
+    return {
+    }
+  },
+  methods: {
+  }
+}
+</script>
+<style lang="less">
+@import './style.less';
+</style>