@hypen-space/web 0.2.7 → 0.2.9
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/src/dom/applicators/advanced-layout.js +15 -1
- package/dist/src/dom/applicators/advanced-layout.js.map +3 -3
- package/dist/src/dom/applicators/border.js +53 -2
- package/dist/src/dom/applicators/border.js.map +3 -3
- package/dist/src/dom/applicators/index.js +104 -2
- package/dist/src/dom/applicators/index.js.map +5 -5
- package/dist/src/dom/applicators/size.js +38 -1
- package/dist/src/dom/applicators/size.js.map +3 -3
- package/dist/src/dom/index.js +104 -2
- package/dist/src/dom/index.js.map +5 -5
- package/dist/src/dom/renderer.js +104 -2
- package/dist/src/dom/renderer.js.map +5 -5
- package/dist/src/hypen.js +104 -2
- package/dist/src/hypen.js.map +5 -5
- package/dist/src/index.js +104 -2
- package/dist/src/index.js.map +5 -5
- package/package.json +2 -2
- package/src/dom/applicators/advanced-layout.ts +19 -0
- package/src/dom/applicators/border.ts +70 -1
- package/src/dom/applicators/size.ts +46 -0
package/dist/src/index.js
CHANGED
|
@@ -1048,6 +1048,30 @@ __export(exports_border, {
|
|
|
1048
1048
|
var borderHandlers;
|
|
1049
1049
|
var init_border = __esm(() => {
|
|
1050
1050
|
borderHandlers = {
|
|
1051
|
+
border: (el, value) => {
|
|
1052
|
+
if (typeof value === "number") {
|
|
1053
|
+
el.style.borderWidth = `${value}px`;
|
|
1054
|
+
el.style.borderStyle = "solid";
|
|
1055
|
+
} else if (typeof value === "object" && value !== null) {
|
|
1056
|
+
const obj = value;
|
|
1057
|
+
if (obj.width !== undefined) {
|
|
1058
|
+
el.style.borderWidth = typeof obj.width === "number" ? `${obj.width}px` : String(obj.width);
|
|
1059
|
+
}
|
|
1060
|
+
if (obj.color !== undefined) {
|
|
1061
|
+
el.style.borderColor = String(obj.color);
|
|
1062
|
+
}
|
|
1063
|
+
if (obj.style !== undefined) {
|
|
1064
|
+
el.style.borderStyle = String(obj.style);
|
|
1065
|
+
} else {
|
|
1066
|
+
el.style.borderStyle = "solid";
|
|
1067
|
+
}
|
|
1068
|
+
if (obj.radius !== undefined) {
|
|
1069
|
+
el.style.borderRadius = typeof obj.radius === "number" ? `${obj.radius}px` : String(obj.radius);
|
|
1070
|
+
}
|
|
1071
|
+
} else if (typeof value === "string") {
|
|
1072
|
+
el.style.border = value;
|
|
1073
|
+
}
|
|
1074
|
+
},
|
|
1051
1075
|
borderWidth: (el, value) => {
|
|
1052
1076
|
el.style.borderWidth = typeof value === "number" ? `${value}px` : String(value);
|
|
1053
1077
|
},
|
|
@@ -1055,7 +1079,34 @@ var init_border = __esm(() => {
|
|
|
1055
1079
|
el.style.borderStyle = String(value);
|
|
1056
1080
|
},
|
|
1057
1081
|
borderRadius: (el, value) => {
|
|
1058
|
-
|
|
1082
|
+
if (typeof value === "number") {
|
|
1083
|
+
el.style.borderRadius = `${value}px`;
|
|
1084
|
+
} else if (typeof value === "object" && value !== null) {
|
|
1085
|
+
const obj = value;
|
|
1086
|
+
const topLeft = obj.topLeft ?? obj.topStart ?? 0;
|
|
1087
|
+
const topRight = obj.topRight ?? obj.topEnd ?? 0;
|
|
1088
|
+
const bottomRight = obj.bottomRight ?? obj.bottomEnd ?? 0;
|
|
1089
|
+
const bottomLeft = obj.bottomLeft ?? obj.bottomStart ?? 0;
|
|
1090
|
+
const formatValue = (v) => typeof v === "number" ? `${v}px` : String(v);
|
|
1091
|
+
el.style.borderRadius = `${formatValue(topLeft)} ${formatValue(topRight)} ${formatValue(bottomRight)} ${formatValue(bottomLeft)}`;
|
|
1092
|
+
} else {
|
|
1093
|
+
el.style.borderRadius = String(value);
|
|
1094
|
+
}
|
|
1095
|
+
},
|
|
1096
|
+
cornerRadius: (el, value) => {
|
|
1097
|
+
if (typeof value === "number") {
|
|
1098
|
+
el.style.borderRadius = `${value}px`;
|
|
1099
|
+
} else if (typeof value === "object" && value !== null) {
|
|
1100
|
+
const obj = value;
|
|
1101
|
+
const topLeft = obj.topLeft ?? obj.topStart ?? 0;
|
|
1102
|
+
const topRight = obj.topRight ?? obj.topEnd ?? 0;
|
|
1103
|
+
const bottomRight = obj.bottomRight ?? obj.bottomEnd ?? 0;
|
|
1104
|
+
const bottomLeft = obj.bottomLeft ?? obj.bottomStart ?? 0;
|
|
1105
|
+
const formatValue = (v) => typeof v === "number" ? `${v}px` : String(v);
|
|
1106
|
+
el.style.borderRadius = `${formatValue(topLeft)} ${formatValue(topRight)} ${formatValue(bottomRight)} ${formatValue(bottomLeft)}`;
|
|
1107
|
+
} else {
|
|
1108
|
+
el.style.borderRadius = String(value);
|
|
1109
|
+
}
|
|
1059
1110
|
}
|
|
1060
1111
|
};
|
|
1061
1112
|
});
|
|
@@ -1085,6 +1136,43 @@ var init_size = __esm(() => {
|
|
|
1085
1136
|
},
|
|
1086
1137
|
maxHeight: (el, value) => {
|
|
1087
1138
|
el.style.maxHeight = typeof value === "number" ? `${value}px` : String(value);
|
|
1139
|
+
},
|
|
1140
|
+
size: (el, value) => {
|
|
1141
|
+
if (typeof value === "number") {
|
|
1142
|
+
el.style.width = `${value}px`;
|
|
1143
|
+
el.style.height = `${value}px`;
|
|
1144
|
+
} else if (typeof value === "object" && value !== null) {
|
|
1145
|
+
const obj = value;
|
|
1146
|
+
if (obj.width !== undefined) {
|
|
1147
|
+
el.style.width = typeof obj.width === "number" ? `${obj.width}px` : String(obj.width);
|
|
1148
|
+
}
|
|
1149
|
+
if (obj.height !== undefined) {
|
|
1150
|
+
el.style.height = typeof obj.height === "number" ? `${obj.height}px` : String(obj.height);
|
|
1151
|
+
}
|
|
1152
|
+
} else {
|
|
1153
|
+
const size = String(value);
|
|
1154
|
+
el.style.width = size;
|
|
1155
|
+
el.style.height = size;
|
|
1156
|
+
}
|
|
1157
|
+
},
|
|
1158
|
+
fillMaxWidth: (el, value) => {
|
|
1159
|
+
if (value === false)
|
|
1160
|
+
return;
|
|
1161
|
+
const fraction = typeof value === "number" ? value : 1;
|
|
1162
|
+
el.style.width = `${fraction * 100}%`;
|
|
1163
|
+
},
|
|
1164
|
+
fillMaxHeight: (el, value) => {
|
|
1165
|
+
if (value === false)
|
|
1166
|
+
return;
|
|
1167
|
+
const fraction = typeof value === "number" ? value : 1;
|
|
1168
|
+
el.style.height = `${fraction * 100}%`;
|
|
1169
|
+
},
|
|
1170
|
+
fillMaxSize: (el, value) => {
|
|
1171
|
+
if (value === false)
|
|
1172
|
+
return;
|
|
1173
|
+
const fraction = typeof value === "number" ? value : 1;
|
|
1174
|
+
el.style.width = `${fraction * 100}%`;
|
|
1175
|
+
el.style.height = `${fraction * 100}%`;
|
|
1088
1176
|
}
|
|
1089
1177
|
};
|
|
1090
1178
|
});
|
|
@@ -1960,6 +2048,20 @@ var init_advanced_layout = __esm(() => {
|
|
|
1960
2048
|
gridTemplateRows: (el, value) => {
|
|
1961
2049
|
el.style.gridTemplateRows = String(value);
|
|
1962
2050
|
},
|
|
2051
|
+
gridColumns: (el, value) => {
|
|
2052
|
+
if (typeof value === "number") {
|
|
2053
|
+
el.style.gridTemplateColumns = `repeat(${value}, 1fr)`;
|
|
2054
|
+
} else {
|
|
2055
|
+
el.style.gridTemplateColumns = String(value);
|
|
2056
|
+
}
|
|
2057
|
+
},
|
|
2058
|
+
gridRows: (el, value) => {
|
|
2059
|
+
if (typeof value === "number") {
|
|
2060
|
+
el.style.gridTemplateRows = `repeat(${value}, 1fr)`;
|
|
2061
|
+
} else {
|
|
2062
|
+
el.style.gridTemplateRows = String(value);
|
|
2063
|
+
}
|
|
2064
|
+
},
|
|
1963
2065
|
gridTemplateAreas: (el, value) => {
|
|
1964
2066
|
el.style.gridTemplateAreas = String(value);
|
|
1965
2067
|
},
|
|
@@ -5432,4 +5534,4 @@ export {
|
|
|
5432
5534
|
ApplicatorRegistry
|
|
5433
5535
|
};
|
|
5434
5536
|
|
|
5435
|
-
//# debugId=
|
|
5537
|
+
//# debugId=F72BDACEE1896A6064756E2164756E21
|