vdesign-ui 0.2.20 → 0.3.0

package/dist/components/radio/style.less

@@ -1,301 +1,301 @@
-@radio-prefix-cls: vd-radio;
-@radio-button-prefix-cls: vd-radio-button;
-@radio-inner-prefix-cls: ~"@{radio-prefix-cls}__icon";
-
-    .@{radio-prefix-cls} {
-        position: relative;
-        cursor: pointer;
-        display: flex;
-        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-
-    }
-
-    // 普通状态
-    .@{radio-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);
-        }
-        
-        &__label {
-            flex: 1;
-        }
-        
-        &__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);
-        }
-        
-        .@{radio-inner-prefix-cls} {
-            display: block;
-            width: var(--icon-check_radio-sizing);
-            height: var(--icon-check_radio-sizing);
-            position: relative;
-        
-            &::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);
-                transform: scale(0.5);
-                border-radius: 50%;
-            }
-        }        
-
-        &__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;
-
-        }
-    }
-
-    // 选中状态
-    .@{radio-prefix-cls}--checked {
-        .@{radio-prefix-cls} {
-            &__text {
-                font-size: var(--en-single-f-d-s-fontSize);
-                font-weight: var(--en-single-f-d-s-fontWeight);
-            }
-        }
-
-        .@{radio-inner-prefix-cls} {
-
-            &::before{
-                border: 0 solid var(--color-check_radio-active);
-                border-width: 3px;
-            }
-
-            &::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);
-            }
-        }
-    }
-
-    // 禁用状态
-    .@{radio-prefix-cls}--disabled {
-        cursor: not-allowed;
-
-        .@{radio-prefix-cls}__text{
-            color: var(--color-check_radio-text-disable);
-        }
-
-        .@{radio-prefix-cls}__description{
-            color: var(--color-check_radio-text_describe-disable);
-        }
-
-        .@{radio-prefix-cls}__icon {
-
-            &::before{
-                border-color:var(--color-check_radio-disable);
-            }
-
-        }
-    }
-
-    .@{radio-prefix-cls}--checked.@{radio-prefix-cls}--disabled{
-        .@{radio-prefix-cls}__icon {
-
-            &::before{
-                border-color:var(--color-check_radio-active-disable);
-            }
-
-            &::after{
-                background-color: var(--color-check_radio-active-disable);
-            }
-
-        }
-    }
-
-    // .@{radio-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;
-	// 		.vd-radio-button-cell{
-	// 			flex: 1;
-	// 		}
-	// 	}
-    // }
-
-
-
-    .@{radio-button-prefix-cls}{
-        position: relative;
-        display: inline-flex;
-        align-items: center;
-        flex-direction: column;
-        justify-content: center;
-        line-height: 1;
-        width: 100%;
-
-        &::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;
-        }
-        
-
-        &--large {
-            height: var(--height-check_radio-radio_button_l);
-
-            .@{radio-button-prefix-cls}-text{
-                color: var(--color-check_radio-radio_button_text-default);
-                font-size: var(--en-single-f-d-r-fontSize);
-                font-weight:var(--en-single-f-d-r-fontWeight);
-            }
-
-            &::after{
-                border-radius: calc(var(--radius-check_radio-radio_l) * 2);
-            }
-        }
-
-        &--medium {
-            height: var(--height-check_radio-radio_button_m);
-
-            .@{radio-button-prefix-cls}-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);
-            }
-            &::after{
-                border-radius: calc(var(--radius-check_radio-m) * 2);
-            }
-        }
-
-        &--small {
-            height: var(--height-check_radio-radio_button_s);
-
-            .@{radio-button-prefix-cls}-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);
-            }
-            &::after{
-                border-radius: calc(var(--radius-check_radio-s) * 2);
-            }
-        }
-
-
-        &--checked {
-            background-color: var(--color-check_radio-radio_button_bg-active);
-
-            &::after{
-                border-color: var(--color-check_radio-radio_border-active);
-                border-width: 2px;
-            }
-
-            .@{radio-button-prefix-cls}-text {
-                color: var(--color-check_radio-radio_button_text-active);
-            }
-
-            &.@{radio-button-prefix-cls}--large {
-                .@{radio-button-prefix-cls}-text {
-                    font-size: var(--en-single-f-d-s-fontSize);
-                    font-weight:var(--en-single-f-d-s-fontWeight);
-                }
-            }
-
-            &.@{radio-button-prefix-cls}--medium {
-                .@{radio-button-prefix-cls}-text {
-                    font-size: var(--en-single-f-c-s-fontSize);
-                    font-weight:var(--en-single-f-c-s-fontWeight); 
-                }
-            }
-
-            &.@{radio-button-prefix-cls}--small {
-                .@{radio-button-prefix-cls}-text {
-                    font-size: var(--en-single-f-c-s-fontSize);
-                    font-weight:var(--en-single-f-c-s-fontWeight); 
-                }
-            }
-
-        }
-
-
-        &--disabled{
-            cursor: not-allowed;
-
-            .@{radio-button-prefix-cls}-text{
-                color: var(--color-check_radio-radio_button_text-disable);
-            }
-        }
-
-    }
-
-    .@{radio-prefix-cls}-group {
-        display: flex;
-        flex-direction: column;
-        // gap: var(--spacing-check_radio-group-margin_x);
-        margin-bottom: calc(var(--spacing-check_radio-group-margin_x) * -1);
-        .@{radio-prefix-cls}{
-            margin-bottom: var(--spacing-check_radio-group-margin_x);
-        }
-        &__card{
-            display: flex;
-            flex-direction: row;
-            flex-wrap: wrap;
-			// gap: 12px;
-            margin-bottom: -12px;
-            margin-inline-end: -12px;
-            .@{radio-button-prefix-cls}{
-                margin-bottom: 12px;
-                margin-inline-end: 12px;
-            }
-        }
-
-        .@{radio-button-prefix-cls}{
-            flex: 1;
-        }
+@radio-prefix-cls: vd-radio;
+@radio-button-prefix-cls: vd-radio-button;
+@radio-inner-prefix-cls: ~"@{radio-prefix-cls}__icon";
+
+    .@{radio-prefix-cls} {
+        position: relative;
+        cursor: pointer;
+        display: flex;
+        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
+    }
+
+    // 普通状态
+    .@{radio-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);
+        }
+        
+        &__label {
+            flex: 1;
+        }
+        
+        &__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);
+        }
+        
+        .@{radio-inner-prefix-cls} {
+            display: block;
+            width: var(--icon-check_radio-sizing);
+            height: var(--icon-check_radio-sizing);
+            position: relative;
+        
+            &::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);
+                transform: scale(0.5);
+                border-radius: 50%;
+            }
+        }        
+
+        &__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;
+
+        }
+    }
+
+    // 选中状态
+    .@{radio-prefix-cls}--checked {
+        .@{radio-prefix-cls} {
+            &__text {
+                font-size: var(--en-single-f-d-s-fontSize);
+                font-weight: var(--en-single-f-d-s-fontWeight);
+            }
+        }
+
+        .@{radio-inner-prefix-cls} {
+
+            &::before{
+                border: 0 solid var(--color-check_radio-active);
+                border-width: 3px;
+            }
+
+            &::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);
+            }
+        }
+    }
+
+    // 禁用状态
+    .@{radio-prefix-cls}--disabled {
+        cursor: not-allowed;
+
+        .@{radio-prefix-cls}__text{
+            color: var(--color-check_radio-text-disable);
+        }
+
+        .@{radio-prefix-cls}__description{
+            color: var(--color-check_radio-text_describe-disable);
+        }
+
+        .@{radio-prefix-cls}__icon {
+
+            &::before{
+                border-color:var(--color-check_radio-disable);
+            }
+
+        }
+    }
+
+    .@{radio-prefix-cls}--checked.@{radio-prefix-cls}--disabled{
+        .@{radio-prefix-cls}__icon {
+
+            &::before{
+                border-color:var(--color-check_radio-active-disable);
+            }
+
+            &::after{
+                background-color: var(--color-check_radio-active-disable);
+            }
+
+        }
+    }
+
+    // .@{radio-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;
+	// 		.vd-radio-button-cell{
+	// 			flex: 1;
+	// 		}
+	// 	}
+    // }
+
+
+
+    .@{radio-button-prefix-cls}{
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        flex-direction: column;
+        justify-content: center;
+        line-height: 1;
+        width: 100%;
+
+        &::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;
+        }
+        
+
+        &--large {
+            height: var(--height-check_radio-radio_button_l);
+
+            .@{radio-button-prefix-cls}-text{
+                color: var(--color-check_radio-radio_button_text-default);
+                font-size: var(--en-single-f-d-r-fontSize);
+                font-weight:var(--en-single-f-d-r-fontWeight);
+            }
+
+            &::after{
+                border-radius: calc(var(--radius-check_radio-radio_l) * 2);
+            }
+        }
+
+        &--medium {
+            height: var(--height-check_radio-radio_button_m);
+
+            .@{radio-button-prefix-cls}-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);
+            }
+            &::after{
+                border-radius: calc(var(--radius-check_radio-m) * 2);
+            }
+        }
+
+        &--small {
+            height: var(--height-check_radio-radio_button_s);
+
+            .@{radio-button-prefix-cls}-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);
+            }
+            &::after{
+                border-radius: calc(var(--radius-check_radio-s) * 2);
+            }
+        }
+
+
+        &--checked {
+            background-color: var(--color-check_radio-radio_button_bg-active);
+
+            &::after{
+                border-color: var(--color-check_radio-radio_border-active);
+                border-width: 2px;
+            }
+
+            .@{radio-button-prefix-cls}-text {
+                color: var(--color-check_radio-radio_button_text-active);
+            }
+
+            &.@{radio-button-prefix-cls}--large {
+                .@{radio-button-prefix-cls}-text {
+                    font-size: var(--en-single-f-d-s-fontSize);
+                    font-weight:var(--en-single-f-d-s-fontWeight);
+                }
+            }
+
+            &.@{radio-button-prefix-cls}--medium {
+                .@{radio-button-prefix-cls}-text {
+                    font-size: var(--en-single-f-c-s-fontSize);
+                    font-weight:var(--en-single-f-c-s-fontWeight); 
+                }
+            }
+
+            &.@{radio-button-prefix-cls}--small {
+                .@{radio-button-prefix-cls}-text {
+                    font-size: var(--en-single-f-c-s-fontSize);
+                    font-weight:var(--en-single-f-c-s-fontWeight); 
+                }
+            }
+
+        }
+
+
+        &--disabled{
+            cursor: not-allowed;
+
+            .@{radio-button-prefix-cls}-text{
+                color: var(--color-check_radio-radio_button_text-disable);
+            }
+        }
+
+    }
+
+    .@{radio-prefix-cls}-group {
+        display: flex;
+        flex-direction: column;
+        // gap: var(--spacing-check_radio-group-margin_x);
+        margin-bottom: calc(var(--spacing-check_radio-group-margin_x) * -1);
+        .@{radio-prefix-cls}{
+            margin-bottom: var(--spacing-check_radio-group-margin_x);
+        }
+        &__card{
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+			// gap: 12px;
+            margin-bottom: -12px;
+            margin-inline-end: -12px;
+            .@{radio-button-prefix-cls}{
+                margin-bottom: 12px;
+                margin-inline-end: 12px;
+            }
+        }
+
+        .@{radio-button-prefix-cls}{
+            flex: 1;
+        }
     }

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

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