jianghu-ui 1.0.7 → 1.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/jianghu-ui.css +76 -84
- package/dist/jianghu-ui.js +1 -1
- package/package.json +1 -1
- package/src/components/JhDrawer/JhDrawer.vue +7 -1
- package/src/components/JhDrawerForm/JhDrawerForm.stories.js +161 -0
- package/src/components/JhForm/JhForm.vue +837 -273
- package/src/components/JhFormFields/JhFormFields.vue +9 -2
package/dist/jianghu-ui.css
CHANGED
|
@@ -1069,45 +1069,45 @@ body .v-navigation-drawer.jh-drawer-level-2 {
|
|
|
1069
1069
|
}
|
|
1070
1070
|
|
|
1071
1071
|
|
|
1072
|
-
.jh-form-fields[data-v-
|
|
1072
|
+
.jh-form-fields[data-v-46b1f869] {
|
|
1073
1073
|
width: 100%;
|
|
1074
1074
|
}
|
|
1075
|
-
.jh-form-fields--bordered[data-v-
|
|
1075
|
+
.jh-form-fields--bordered[data-v-46b1f869] {
|
|
1076
1076
|
border: 1px solid rgba(0, 0, 0, 0.12);
|
|
1077
1077
|
border-radius: 4px;
|
|
1078
1078
|
padding: 15px 16px 30px;
|
|
1079
1079
|
}
|
|
1080
|
-
.jh-form-fields-header[data-v-
|
|
1080
|
+
.jh-form-fields-header[data-v-46b1f869] {
|
|
1081
1081
|
margin-bottom: 16px;
|
|
1082
1082
|
}
|
|
1083
|
-
.jh-form-fields-title[data-v-
|
|
1083
|
+
.jh-form-fields-title[data-v-46b1f869] {
|
|
1084
1084
|
font-size: 16px;
|
|
1085
1085
|
font-weight: 500;
|
|
1086
1086
|
color: rgba(0, 0, 0, 0.85);
|
|
1087
1087
|
display: flex;
|
|
1088
1088
|
align-items: center;
|
|
1089
1089
|
}
|
|
1090
|
-
.jh-form-fields-description[data-v-
|
|
1090
|
+
.jh-form-fields-description[data-v-46b1f869] {
|
|
1091
1091
|
font-size: 14px;
|
|
1092
1092
|
color: rgba(0, 0, 0, 0.45);
|
|
1093
1093
|
margin-top: 4px;
|
|
1094
1094
|
line-height: 1.5;
|
|
1095
1095
|
}
|
|
1096
|
-
.jh-form-fields--horizontal .jh-field-label--horizontal[data-v-
|
|
1096
|
+
.jh-form-fields--horizontal .jh-field-label--horizontal[data-v-46b1f869] {
|
|
1097
1097
|
padding-top: 0;
|
|
1098
1098
|
line-height: 1.5;
|
|
1099
1099
|
}
|
|
1100
|
-
.jh-form-fields--inline .v-input[data-v-
|
|
1100
|
+
.jh-form-fields--inline .v-input[data-v-46b1f869] {
|
|
1101
1101
|
margin-bottom: 0 !important;
|
|
1102
1102
|
}
|
|
1103
|
-
.jh-form-fields--readonly[data-v-
|
|
1103
|
+
.jh-form-fields--readonly[data-v-46b1f869] {
|
|
1104
1104
|
/* 只读模式整体样式 */
|
|
1105
|
-
.jh-field-label[data-v-
|
|
1105
|
+
.jh-field-label[data-v-46b1f869] {
|
|
1106
1106
|
/* 只读模式下的标签样式 */
|
|
1107
1107
|
color: rgba(0, 0, 0, 0.65);
|
|
1108
1108
|
font-weight: 500;
|
|
1109
1109
|
}
|
|
1110
|
-
.jh-form-readonly-text[data-v-
|
|
1110
|
+
.jh-form-readonly-text[data-v-46b1f869] {
|
|
1111
1111
|
/* 只读模式下的文本样式 */
|
|
1112
1112
|
padding: 6px 12px;
|
|
1113
1113
|
color: rgba(0, 0, 0, 0.87);
|
|
@@ -1118,45 +1118,45 @@ body .v-navigation-drawer.jh-drawer-level-2 {
|
|
|
1118
1118
|
}
|
|
1119
1119
|
|
|
1120
1120
|
/* 水平布局下的调整 */
|
|
1121
|
-
&.jh-form-fields--horizontal[data-v-
|
|
1122
|
-
.jh-field-wrapper[data-v-
|
|
1121
|
+
&.jh-form-fields--horizontal[data-v-46b1f869] {
|
|
1122
|
+
.jh-field-wrapper[data-v-46b1f869] {
|
|
1123
1123
|
margin-bottom: 16px;
|
|
1124
1124
|
}
|
|
1125
1125
|
}
|
|
1126
1126
|
|
|
1127
1127
|
/* 垂直布局下的调整 */
|
|
1128
|
-
&.jh-form-fields--vertical[data-v-
|
|
1129
|
-
.jh-field-wrapper[data-v-
|
|
1128
|
+
&.jh-form-fields--vertical[data-v-46b1f869] {
|
|
1129
|
+
.jh-field-wrapper[data-v-46b1f869] {
|
|
1130
1130
|
margin-bottom: 16px;
|
|
1131
1131
|
}
|
|
1132
1132
|
}
|
|
1133
1133
|
}
|
|
1134
|
-
.jh-field-label[data-v-
|
|
1134
|
+
.jh-field-label[data-v-46b1f869] {
|
|
1135
1135
|
}
|
|
1136
|
-
.jh-field-label--horizontal[data-v-
|
|
1136
|
+
.jh-field-label--horizontal[data-v-46b1f869] {
|
|
1137
1137
|
padding-right: 12px;
|
|
1138
1138
|
}
|
|
1139
|
-
.jh-field-label--vertical[data-v-
|
|
1139
|
+
.jh-field-label--vertical[data-v-46b1f869] {
|
|
1140
1140
|
display: block;
|
|
1141
1141
|
}
|
|
1142
|
-
.jh-form-group-title[data-v-
|
|
1142
|
+
.jh-form-group-title[data-v-46b1f869] {
|
|
1143
1143
|
margin-top: 8px;
|
|
1144
1144
|
margin-bottom: 16px;
|
|
1145
1145
|
}
|
|
1146
|
-
.jh-form-group-title h3[data-v-
|
|
1146
|
+
.jh-form-group-title h3[data-v-46b1f869] {
|
|
1147
1147
|
color: rgba(0, 0, 0, 0.85);
|
|
1148
1148
|
font-weight: 500;
|
|
1149
1149
|
}
|
|
1150
|
-
.jh-field-wrapper[data-v-
|
|
1150
|
+
.jh-field-wrapper[data-v-46b1f869] {
|
|
1151
1151
|
width: 100%;
|
|
1152
1152
|
}
|
|
1153
|
-
.jh-field-input[data-v-
|
|
1153
|
+
.jh-field-input[data-v-46b1f869] {
|
|
1154
1154
|
width: 100%;
|
|
1155
1155
|
}
|
|
1156
|
-
.jh-form-readonly-text[data-v-
|
|
1156
|
+
.jh-form-readonly-text[data-v-46b1f869] {
|
|
1157
1157
|
word-break: break-word;
|
|
1158
1158
|
}
|
|
1159
|
-
.jh-color-preview[data-v-
|
|
1159
|
+
.jh-color-preview[data-v-46b1f869] {
|
|
1160
1160
|
display: inline-block;
|
|
1161
1161
|
width: 20px;
|
|
1162
1162
|
height: 20px;
|
|
@@ -1930,32 +1930,49 @@ body .v-navigation-drawer.jh-drawer-level-2 {
|
|
|
1930
1930
|
}
|
|
1931
1931
|
|
|
1932
1932
|
|
|
1933
|
-
|
|
1934
|
-
.jh-form[data-v-3809d698] {
|
|
1933
|
+
.jh-form[data-v-02757d4e] {
|
|
1935
1934
|
width: 100%;
|
|
1936
1935
|
}
|
|
1936
|
+
.jh-form--bordered[data-v-02757d4e] {
|
|
1937
|
+
border: 1px solid rgba(0, 0, 0, 0.12);
|
|
1938
|
+
border-radius: 4px;
|
|
1939
|
+
padding: 15px 16px 30px;
|
|
1940
|
+
}
|
|
1941
|
+
.jh-form-header[data-v-02757d4e] {
|
|
1942
|
+
margin-bottom: 16px;
|
|
1943
|
+
}
|
|
1944
|
+
.jh-form-title[data-v-02757d4e] {
|
|
1945
|
+
font-size: 16px;
|
|
1946
|
+
font-weight: 500;
|
|
1947
|
+
color: rgba(0, 0, 0, 0.85);
|
|
1948
|
+
display: flex;
|
|
1949
|
+
align-items: center;
|
|
1950
|
+
}
|
|
1951
|
+
.jh-form-description[data-v-02757d4e] {
|
|
1952
|
+
font-size: 14px;
|
|
1953
|
+
color: rgba(0, 0, 0, 0.45);
|
|
1954
|
+
margin-top: 4px;
|
|
1955
|
+
line-height: 1.5;
|
|
1956
|
+
}
|
|
1937
1957
|
|
|
1938
|
-
/*
|
|
1939
|
-
.jh-form--horizontal .jh-field-label--horizontal[data-v-
|
|
1958
|
+
/* Horizontal Layout */
|
|
1959
|
+
.jh-form--horizontal .jh-field-label--horizontal[data-v-02757d4e] {
|
|
1940
1960
|
padding-top: 0;
|
|
1941
1961
|
line-height: 1.5;
|
|
1942
1962
|
}
|
|
1943
1963
|
|
|
1944
|
-
/*
|
|
1945
|
-
.jh-form--inline .v-input[data-v-
|
|
1964
|
+
/* Inline Layout */
|
|
1965
|
+
.jh-form--inline .v-input[data-v-02757d4e] {
|
|
1946
1966
|
margin-bottom: 0 !important;
|
|
1947
1967
|
}
|
|
1948
1968
|
|
|
1949
|
-
/*
|
|
1950
|
-
.jh-form--readonly[data-v-
|
|
1951
|
-
|
|
1952
|
-
.jh-field-label[data-v-3809d698] {
|
|
1953
|
-
/* 只读模式下的标签样式 */
|
|
1969
|
+
/* Readonly Mode */
|
|
1970
|
+
.jh-form--readonly[data-v-02757d4e] {
|
|
1971
|
+
.jh-field-label[data-v-02757d4e] {
|
|
1954
1972
|
color: rgba(0, 0, 0, 0.65);
|
|
1955
1973
|
font-weight: 500;
|
|
1956
1974
|
}
|
|
1957
|
-
.jh-form-readonly-text[data-v-
|
|
1958
|
-
/* 只读模式下的文本样式 */
|
|
1975
|
+
.jh-form-readonly-text[data-v-02757d4e] {
|
|
1959
1976
|
padding: 6px 12px;
|
|
1960
1977
|
color: rgba(0, 0, 0, 0.87);
|
|
1961
1978
|
background-color: rgba(0, 0, 0, 0.04);
|
|
@@ -1963,68 +1980,43 @@ body .v-navigation-drawer.jh-drawer-level-2 {
|
|
|
1963
1980
|
line-height: 1.5;
|
|
1964
1981
|
transition: all 0.2s ease;
|
|
1965
1982
|
}
|
|
1966
|
-
|
|
1967
|
-
|
|
1968
|
-
|
|
1969
|
-
.jh-field-wrapper[data-v-3809d698] {
|
|
1970
|
-
margin-bottom: 16px;
|
|
1971
|
-
}
|
|
1972
|
-
}
|
|
1973
|
-
|
|
1974
|
-
/* 垂直布局下的调整 */
|
|
1975
|
-
&.jh-form--vertical[data-v-3809d698] {
|
|
1976
|
-
.jh-field-wrapper[data-v-3809d698] {
|
|
1977
|
-
margin-bottom: 16px;
|
|
1978
|
-
}
|
|
1979
|
-
}
|
|
1980
|
-
|
|
1981
|
-
/* 网格布局下的调整 */
|
|
1982
|
-
&.jh-form--grid[data-v-3809d698] {
|
|
1983
|
-
.jh-field-wrapper[data-v-3809d698] {
|
|
1984
|
-
margin-bottom: 16px;
|
|
1985
|
-
}
|
|
1983
|
+
&.jh-form--horizontal .jh-field-wrapper[data-v-02757d4e],
|
|
1984
|
+
&.jh-form--vertical .jh-field-wrapper[data-v-02757d4e] {
|
|
1985
|
+
margin-bottom: 16px;
|
|
1986
1986
|
}
|
|
1987
1987
|
}
|
|
1988
|
-
|
|
1989
|
-
/* 字段标签 */
|
|
1990
|
-
.jh-field-label[data-v-3809d698] {
|
|
1991
|
-
}
|
|
1992
|
-
.jh-field-label--horizontal[data-v-3809d698] {
|
|
1988
|
+
.jh-field-label--horizontal[data-v-02757d4e] {
|
|
1993
1989
|
padding-right: 12px;
|
|
1994
1990
|
}
|
|
1995
|
-
.jh-field-label--vertical[data-v-
|
|
1991
|
+
.jh-field-label--vertical[data-v-02757d4e] {
|
|
1996
1992
|
display: block;
|
|
1997
1993
|
}
|
|
1998
|
-
|
|
1999
|
-
/* 表单分组标题 */
|
|
2000
|
-
.jh-form-group-title[data-v-3809d698] {
|
|
1994
|
+
.jh-form-group-title[data-v-02757d4e] {
|
|
2001
1995
|
margin-top: 8px;
|
|
2002
1996
|
margin-bottom: 16px;
|
|
2003
1997
|
}
|
|
2004
|
-
.jh-form-group-title h3[data-v-
|
|
1998
|
+
.jh-form-group-title h3[data-v-02757d4e] {
|
|
2005
1999
|
color: rgba(0, 0, 0, 0.85);
|
|
2006
2000
|
font-weight: 500;
|
|
2007
2001
|
}
|
|
2008
|
-
|
|
2009
|
-
/* 字段包装器 */
|
|
2010
|
-
.jh-field-wrapper[data-v-3809d698] {
|
|
2002
|
+
.jh-field-wrapper[data-v-02757d4e] {
|
|
2011
2003
|
width: 100%;
|
|
2012
2004
|
}
|
|
2013
|
-
|
|
2014
|
-
/* 字段输入区域 */
|
|
2015
|
-
.jh-field-input[data-v-3809d698] {
|
|
2005
|
+
.jh-field-input[data-v-02757d4e] {
|
|
2016
2006
|
width: 100%;
|
|
2017
2007
|
}
|
|
2018
|
-
|
|
2019
|
-
/* 只读文本 */
|
|
2020
|
-
.jh-form-readonly-text[data-v-3809d698] {
|
|
2008
|
+
.jh-form-readonly-text[data-v-02757d4e] {
|
|
2021
2009
|
word-break: break-word;
|
|
2022
2010
|
}
|
|
2023
|
-
|
|
2024
|
-
|
|
2025
|
-
|
|
2026
|
-
|
|
2027
|
-
|
|
2011
|
+
.jh-color-preview[data-v-02757d4e] {
|
|
2012
|
+
display: inline-block;
|
|
2013
|
+
width: 20px;
|
|
2014
|
+
height: 20px;
|
|
2015
|
+
border-radius: 4px;
|
|
2016
|
+
border: 1px solid rgba(0, 0, 0, 0.2);
|
|
2017
|
+
}
|
|
2018
|
+
.jh-form-actions-wrapper[data-v-02757d4e] {
|
|
2019
|
+
margin-top: 16px;
|
|
2028
2020
|
}
|
|
2029
2021
|
|
|
2030
2022
|
|
|
@@ -2056,18 +2048,18 @@ body .v-navigation-drawer.jh-drawer-level-2 {
|
|
|
2056
2048
|
}
|
|
2057
2049
|
|
|
2058
2050
|
|
|
2059
|
-
.jh-drawer-header[data-v-
|
|
2051
|
+
.jh-drawer-header[data-v-3f4fda75] {
|
|
2060
2052
|
border-bottom: 1px solid #e0e0e0;
|
|
2061
2053
|
}
|
|
2062
|
-
.jh-drawer-action-btn-group[data-v-
|
|
2054
|
+
.jh-drawer-action-btn-group[data-v-3f4fda75] {
|
|
2063
2055
|
display: flex;
|
|
2064
2056
|
align-items: center;
|
|
2065
2057
|
}
|
|
2066
|
-
.jh-drawer-bottom[data-v-
|
|
2058
|
+
.jh-drawer-bottom[data-v-3f4fda75] {
|
|
2067
2059
|
border-top-left-radius: 16px;
|
|
2068
2060
|
border-top-right-radius: 16px;
|
|
2069
2061
|
}
|
|
2070
|
-
.drawer-close-float-btn[data-v-
|
|
2062
|
+
.drawer-close-float-btn[data-v-3f4fda75] {
|
|
2071
2063
|
z-index: 1000;
|
|
2072
2064
|
}
|
|
2073
2065
|
|