@tachybase/components 0.23.8

package/lib/form-item/style/index.js

@@ -0,0 +1,387 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var style_exports = {};
+__export(style_exports, {
+  default: () => style_default
+});
+module.exports = __toCommonJS(style_exports);
+var import_builtins = require("../../__builtins__");
+var import_animation = require("./animation");
+var import_grid = require("./grid");
+var import_other = require("./other");
+const genSmallStyle = /* @__PURE__ */ __name((token) => {
+  const { componentCls, antCls, controlHeightSM, marginLG, fontSizeSM, lineHeightSM } = token;
+  return {
+    fontSize: fontSizeSM,
+    lineHeight: controlHeightSM,
+    [`${componentCls}-label`]: {
+      lineHeight: `${controlHeightSM}px`,
+      minHeight: controlHeightSM - 4,
+      "> label": {
+        height: controlHeightSM - 2
+      }
+    },
+    [`${componentCls}-control-content`]: {
+      " &-component": {
+        minHeight: controlHeightSM - 4,
+        lineHeight: lineHeightSM
+      }
+    },
+    [`${componentCls}-help,
+      ${componentCls}-extra`]: {
+      minHeight: controlHeightSM - 4,
+      lineHeight: `${controlHeightSM - 4}px`
+    },
+    [`${componentCls}-control-content`]: {
+      minHeight: controlHeightSM - 4
+    },
+    [`${antCls}-input-affix-wrapper,
+      ${antCls}-input-number,
+      ${antCls}-picker`]: {
+      padding: `0px 11px`,
+      input: {
+        height: controlHeightSM - 4,
+        fontSize: fontSizeSM
+      }
+    },
+    [`${antCls}-cascader-picker`]: {
+      height: controlHeightSM - 4,
+      input: {
+        padding: "0 7px",
+        height: controlHeightSM - 4,
+        fontSize: fontSizeSM
+      }
+    },
+    [`${antCls}-select-single:not(${antCls}-select-customize-input) ${antCls}-select-selector`]: {
+      padding: `0px 11px`,
+      height: controlHeightSM - 4,
+      fontSize: fontSizeSM,
+      lineHeight: `${controlHeightSM}px`,
+      [`${antCls}-select-selection-search`]: {
+        height: controlHeightSM,
+        lineHeight: `${controlHeightSM - 4}px`,
+        "&-input": {
+          height: controlHeightSM - 4,
+          lineHeight: `${controlHeightSM - 4}px`
+        }
+      },
+      [`${antCls}-select-selection-placeholder`]: {
+        height: controlHeightSM,
+        lineHeight: `${controlHeightSM - 4}px`
+      },
+      [`${antCls}-select-selection-item`]: {
+        height: controlHeightSM,
+        lineHeight: `${controlHeightSM - 4}px`
+      },
+      [`${antCls}-select-multiple:not(${antCls}-select-customize-input)
+          ${antCls}-select-selector`]: {
+        padding: "0px 2px",
+        height: controlHeightSM - 4,
+        fontSize: fontSizeSM,
+        lineHeight: `${controlHeightSM}px`,
+        "&::after": {
+          height: controlHeightSM - 8,
+          lineHeight: `${controlHeightSM - 8}px`
+        },
+        [`${antCls}-select-selection-search`]: {
+          height: controlHeightSM - 8,
+          lineHeight: `${controlHeightSM - 8}px`,
+          marginInlineStart: 0,
+          "&-input": {
+            height: controlHeightSM,
+            lineHeight: `${controlHeightSM - 4}px`
+          }
+        },
+        [`${antCls}-select-selection-placeholder`]: {
+          height: controlHeightSM - 4,
+          lineHeight: `${controlHeightSM}px`,
+          marginInlineStart: 4
+        },
+        [`${antCls}-select-selection-overflow-item`]: {
+          alignSelf: "flex-start",
+          [`${antCls}-select-selection-item`]: {
+            lineHeight: `${controlHeightSM - 10}px`,
+            height: controlHeightSM - 8
+          }
+        }
+      },
+      [`&${componentCls}-feedback-layout-terse`]: {
+        marginBottom: 8,
+        [`&${componentCls}-feedback-has-text:not(${componentCls}-inset)`]: {
+          marginBottom: 0
+        }
+      },
+      [`&${componentCls}-feedback-layout-loose`]: {
+        marginBottom: marginLG,
+        [`&${componentCls}-feedback-has-text:not(${componentCls}-inset)`]: {
+          marginBottom: 0
+        }
+      }
+    }
+  };
+}, "genSmallStyle");
+const genLargeStyle = /* @__PURE__ */ __name((token) => {
+  const { componentCls, antCls, fontSizeLG, controlHeightLG, controlHeightSM, marginLG, lineHeightLG } = token;
+  return {
+    fontSize: fontSizeLG,
+    lineHeight: `${controlHeightLG}px`,
+    [`${componentCls}-label`]: {
+      lineHeight: `${controlHeightLG}px`,
+      minHeight: controlHeightLG - 2,
+      "> label": {
+        height: controlHeightLG
+      }
+    },
+    [`${componentCls}-control-content`]: {
+      " &-component": {
+        minHeight: controlHeightLG - 2,
+        lineHeight: lineHeightLG
+      }
+    },
+    [`${componentCls}-help,
+      ${componentCls}-extra`]: {
+      minHeight: controlHeightSM,
+      lineHeight: `${controlHeightSM}px`
+    },
+    [`${componentCls}-control-content`]: {
+      minHeight: controlHeightLG - 2
+    },
+    [`${antCls}-input`]: {
+      fontSize: fontSizeLG
+    },
+    [`${antCls}-input-number`]: {
+      fontSize: fontSizeLG,
+      input: {
+        height: controlHeightLG - 2
+      }
+    },
+    [`${antCls}-input-affix-wrapper,
+      ${antCls}-picker`]: {
+      padding: `0px 11px`,
+      lineHeight: `${controlHeightLG - 2}px`,
+      input: {
+        height: controlHeightLG - 2,
+        fontSize: fontSizeLG
+      }
+    },
+    [`${antCls}-btn`]: {
+      height: controlHeightLG,
+      padding: "0 8px"
+    },
+    [`${antCls}-radio-button-wrapper`]: {
+      height: controlHeightLG,
+      lineHeight: `${controlHeightLG}px`
+    },
+    [`${antCls}-cascader-picker`]: {
+      height: controlHeightLG - 2,
+      input: {
+        padding: "0 11px",
+        height: controlHeightLG - 2,
+        fontSize: fontSizeLG
+      }
+    },
+    [`${antCls}-select-single:not(${antCls}-select-customize-input) ${antCls}-select-selector`]: {
+      padding: `0px 11px`,
+      height: controlHeightLG,
+      fontSize: fontSizeLG,
+      lineHeight: `${controlHeightLG}px`,
+      [`${antCls}-select-selection-search`]: {
+        height: controlHeightLG,
+        lineHeight: `${controlHeightLG - 2}px`,
+        "&-input": {
+          height: controlHeightLG,
+          lineHeight: `${controlHeightLG - 2}px`
+        }
+      },
+      [`${antCls}-select-selection-placeholder`]: {
+        height: controlHeightLG,
+        lineHeight: `${controlHeightLG}px`
+      },
+      [`${antCls}-select-selection-item`]: {
+        height: controlHeightLG,
+        lineHeight: `${controlHeightLG}px`
+      },
+      [`${antCls}-select-multiple:not(${antCls}-select-customize-input)
+          ${antCls}-select-selector`]: {
+        padding: "0px 2px",
+        height: controlHeightLG - 2,
+        fontSize: fontSizeLG,
+        lineHeight: `${controlHeightLG}px`,
+        "&::after": {
+          height: controlHeightLG - 8,
+          lineHeight: `${controlHeightLG - 8}px`
+        },
+        [`${antCls}-select-selection-search`]: {
+          height: controlHeightLG - 8,
+          lineHeight: `${controlHeightLG - 8}px`,
+          "&-input": {
+            height: controlHeightLG - 12,
+            lineHeight: `${controlHeightLG - 12}px`
+          }
+        },
+        [`${antCls}-select-selection-placeholder`]: {
+          height: controlHeightLG - 8,
+          lineHeight: `${controlHeightLG - 8}px`
+        },
+        [`${antCls}-select-selection-overflow-item`]: {
+          alignSelf: "flex-start",
+          [`${antCls}-select-selection-item`]: {
+            lineHeight: `${controlHeightLG - 10}px`,
+            height: controlHeightLG - 8
+          }
+        }
+      },
+      [`&${componentCls}-feedback-layout-terse`]: {
+        marginBottom: 8,
+        [`&${componentCls}-feedback-has-text:not(${componentCls}-inset)`]: {
+          marginBottom: 0
+        }
+      },
+      [`&${componentCls}-feedback-layout-loose`]: {
+        marginBottom: marginLG,
+        [`&${componentCls}-feedback-has-text:not(${componentCls}-inset)`]: {
+          marginBottom: 0
+        }
+      }
+    }
+  };
+}, "genLargeStyle");
+const genLabelStyle = /* @__PURE__ */ __name((token) => {
+  const { componentCls, controlHeight, controlHeightSM, marginLG, marginSM, lineHeight } = token;
+  return {
+    lineHeight: `${controlHeight}px`,
+    minHeight: controlHeight - 2,
+    position: "relative",
+    display: "flex",
+    color: token.colorTextHeading,
+    label: {
+      cursor: "text"
+    },
+    "&-content": {
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap",
+      label: {
+        whiteSpace: "nowrap"
+      }
+    },
+    "&-tooltip": {
+      cursor: "help",
+      "*": {
+        cursor: "help"
+      },
+      label: {
+        borderBottom: "1px dashed currentColor"
+      }
+    },
+    "&-feedback-layout": {
+      "&-terse": {
+        marginBottom: marginSM
+      },
+      "&-loose": {
+        marginBottom: marginLG
+      },
+      "&-none": {
+        marginBottom: 0
+      },
+      "&-terse, &-loosee, &-none": {
+        [`&.${componentCls}-feedback-has-text:not(${componentCls}-inset)`]: {
+          marginBottom: 0
+        }
+      }
+    },
+    "&-control": {
+      flex: 1,
+      maxWidth: "100%",
+      [`&.${componentCls}-control-content`]: {
+        display: "flex",
+        "&-component": {
+          width: "100%",
+          minHeight: controlHeight - 2,
+          lineHeight,
+          "&-has-feedback-icon": {
+            flex: 1,
+            position: "relative",
+            display: "flex",
+            alignItems: "center"
+          }
+        },
+        [`${componentCls}-addon`]: {
+          "&-before": {
+            marginInlineEnd: marginSM
+          },
+          "&-after": {
+            marginInlineEnd: marginSM
+          },
+          "&-before, &-after": {
+            display: "inline-flex",
+            alignItems: "center",
+            minHeight: controlHeight,
+            flexShrink: 0
+          }
+        }
+      },
+      [`${componentCls}-help,
+        ${componentCls}-extra`]: {
+        minHeight: controlHeightSM,
+        lineHeight: `${controlHeightSM}px`,
+        color: token.colorTextSecondary
+      }
+    }
+  };
+}, "genLabelStyle");
+const genFormItemStyle = /* @__PURE__ */ __name((token) => {
+  const { componentCls, fontSize, marginLG } = token;
+  return {
+    [componentCls]: {
+      display: "flex",
+      position: "relative",
+      marginBottom: marginLG,
+      fontSize,
+      [`${componentCls}-label`]: genLabelStyle(token),
+      [`&${componentCls}-size-small`]: genSmallStyle(token),
+      [`&${componentCls}-size-large`]: genLargeStyle(token),
+      "&-label": {
+        "&-align": {
+          [`&-left`]: {
+            [`> ${componentCls}-label`]: {
+              justifyContent: "flex-start"
+            }
+          },
+          [`&-right`]: {
+            [`> ${componentCls}-label`]: {
+              justifyContent: "flex-end"
+            }
+          }
+        },
+        ["&-wrap"]: {
+          [`${componentCls}-label`]: {
+            label: {
+              whiteSpace: "pre-line",
+              wordBreak: "break-all"
+            }
+          }
+        }
+      }
+    }
+  };
+}, "genFormItemStyle");
+var style_default = (0, import_builtins.genStyleHook)("Form", (token) => {
+  return [genFormItemStyle(token), (0, import_animation.getAnimationStyle)(token), (0, import_other.genOtherStyle)(token), (0, import_grid.getGridStyle)(token)];
+});

package/lib/form-item/style/other.d.ts

@@ -0,0 +1,2 @@
+import { GenerateStyle } from '../../__builtins__';
+export declare const genOtherStyle: GenerateStyle;