vdesign-ui 0.2.9 → 0.2.12

package/dist/components/checkbox/style.less

@@ -1,289 +1,289 @@
-@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;
-        }
+@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 +1,7 @@
-import CheckboxGroup from './index.vue';
-
-CheckboxGroup.install = function (Vue) {
-  Vue.component(CheckboxGroup.name, CheckboxGroup);
-};
-
-export default CheckboxGroup;
+import CheckboxGroup from './index.vue';
+
+CheckboxGroup.install = function (Vue) {
+  Vue.component(CheckboxGroup.name, CheckboxGroup);
+};
+
+export default CheckboxGroup;