@pdfme/ui 3.1.3 → 3.1.5-dev.1

package/dist/types/components/Renderer.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { UIRenderProps, SchemaForUI, Schema } from '@pdfme/common';
-type RendererProps = Omit<UIRenderProps<Schema>, 'value' | 'schema' | 'onChange' | 'rootElement' | 'options' | 'theme' | 'i18n'> & {
+type RendererProps = Omit<UIRenderProps<Schema>, 'value' | 'schema' | 'onChange' | 'rootElement' | 'options' | 'theme' | 'i18n' | '_cache'> & {
     schema: SchemaForUI;
     onChange: (value: string) => void;
     outline: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pdfme/ui",
-  "version": "3.1.3",
+  "version": "3.1.5-dev.1",
   "sideEffects": false,
   "author": "hand-dot",
   "license": "MIT",
@@ -66,6 +66,7 @@
     "jest-canvas-mock": "^2.3.1",
     "process": "^0.11.10",
     "vite": "^5.0.0",
+    "vite-plugin-css-injected-by-js": "^3.3.0",
     "vite-plugin-top-level-await": "^1.3.1",
     "vite-tsconfig-paths": "^4.2.1"
   },

package/src/class.ts

@@ -89,10 +89,10 @@ export abstract class BaseUIClass {
     this.template = generateColumnsAndSampledataIfNeeded(cloneDeep(template));
     this.options = options;
     this.size = {
-      height: this.domContainer!.clientHeight || window.innerHeight,
-      width: this.domContainer!.clientWidth || window.innerWidth,
+      height: this.domContainer.clientHeight || window.innerHeight,
+      width: this.domContainer.clientWidth || window.innerWidth,
     };
-    this.resizeObserver.observe(this.domContainer!);
+    this.resizeObserver.observe(this.domContainer);
 
     const { lang, font } = options;
     if (lang) {

package/src/components/Designer/index.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState, useEffect, useContext, useCallback } from 'react';
+import React, { useRef, useState, useContext, useCallback } from 'react';
 import {
   ZOOM,
   Template,
@@ -49,6 +49,7 @@ const TemplateEditor = ({
   const [pageCursor, setPageCursor] = useState(0);
   const [zoomLevel, setZoomLevel] = useState(1);
   const [sidebarOpen, setSidebarOpen] = useState(true);
+  const [prevTemplate, setPrevTemplate] = useState<Template | null>(null);
 
   const { backgrounds, pageSizes, scale, error } = useUIPreProcessor({ template, size, zoomLevel });
 
@@ -148,10 +149,6 @@ const TemplateEditor = ({
     }
   }, []);
 
-  useEffect(() => {
-    updateTemplate(template);
-  }, [template, updateTemplate]);
-
   const addSchema = () => {
     const propPanel = (Object.values(pluginsRegistry)[0] as Plugin<Schema>)?.propPanel;
 
@@ -183,6 +180,11 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
     setHoveringSchemaId(id);
   };
 
+  if (prevTemplate !== template) {
+    setPrevTemplate(template);
+    void updateTemplate(template);
+  }
+
   const sizeExcSidebar = {
     width: sidebarOpen ? size.width - SIDEBAR_WIDTH : size.width,
     height: size.height,

package/src/components/Renderer.tsx

@@ -6,7 +6,7 @@ import { PluginsRegistry, OptionsContext, I18nContext } from '../contexts';
 
 type RendererProps = Omit<
   UIRenderProps<Schema>,
-  'value' | 'schema' | 'onChange' | 'rootElement' | 'options' | 'theme' | 'i18n'
+  'value' | 'schema' | 'onChange' | 'rootElement' | 'options' | 'theme' | 'i18n' | '_cache'
 > & {
   schema: SchemaForUI;
   onChange: (value: string) => void;
@@ -51,6 +51,7 @@ const Renderer = (props: RendererProps) => {
   const { schema, mode, onChange, stopEditing, tabIndex, placeholder, scale } = props;
 
   const ref = useRef<HTMLDivElement>(null);
+  const _cache = useRef<Map<any, any>>(new Map());
 
   useEffect(() => {
     if (ref.current && schema.type) {
@@ -81,6 +82,7 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
         options,
         theme,
         i18n,
+        _cache: _cache.current,
       });
     }
     return () => {

package/vite.config.ts

@@ -2,6 +2,7 @@ import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import tsconfigPaths from 'vite-tsconfig-paths';
 import topLevelAwait from 'vite-plugin-top-level-await';
+import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'
 
 export default defineConfig({
   plugins: [
@@ -11,6 +12,7 @@ export default defineConfig({
       promiseExportName: '__tla',
       promiseImportName: (i) => `__tla_${i}`,
     }),
+    cssInjectedByJsPlugin(),
   ],
   build: {
     lib: {

package/dist/style.css

@@ -1 +0,0 @@
-.fr-inline-field{display:inline-block;margin-right:16px}.fr-inline-container{display:inline-flex;flex-wrap:wrap}.ant-form-item-optional-hide{padding:0 8px}.ant-form-item-optional-hide .ant-form-item-label>label{font-size:16px;font-weight:#000000d9;font-weight:600}.fr-desc{word-break:break-all;color:#00000073;line-height:22px;margin-left:5px;font-weight:400;font-size:14px}.fr-hide-label>.ant-form-item-row>.ant-form-item-label{visibility:hidden}.fr-field .ant-form-item-row{flex-wrap:nowrap}.fr-field .ant-form-item-control-input-content{display:flex}.fr-field-visibility{width:0;height:0;visibility:hidden;position:absolute;opacity:0}.fr-form .ant-form-item-control{width:0}.fr-form .fr-inline-field .ant-form-item-control{width:auto}.rc-color-picker-panel-inner{position:relative;border-radius:4px;box-shadow:0 1px 5px #ccc;border:1px solid #ccc;padding-bottom:8px}.rc-color-picker-panel-wrap{margin:5px 0 0;height:30px;width:100%;position:relative}.rc-color-picker-panel-wrap-preview{position:absolute;right:8px}.rc-color-picker-panel-wrap-ribbon{position:absolute;left:8px;top:0;right:43px;height:30px}.rc-color-picker-panel-wrap-alpha{position:absolute;left:8px;right:43px;bottom:0;height:12.5px}.rc-color-picker-panel-wrap-has-alpha .rc-color-picker-panel-wrap-ribbon{height:12.5px}.rc-color-picker-trigger{border:1px solid #999;display:inline-block;padding:2px;border-radius:2px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:20px;height:20px;cursor:pointer;box-shadow:0 0 0 2px #fff inset}.rc-color-picker-trigger-open{box-shadow:0 0 3px #999}.rc-color-picker-panel{width:218px;background-color:#fff;box-sizing:border-box;outline:none;z-index:9;border-radius:4px;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.rc-color-picker-panel *{box-sizing:border-box}.rc-color-picker-panel-open{display:block}.rc-color-picker-panel-close{display:none}.rc-color-picker-panel-preview{height:30px;width:30px;overflow:hidden;border-radius:2px;background-image:url(data:image/png;base64,R0lGODdhCgAKAPAAAOXl5f///ywAAAAACgAKAEACEIQdqXt9GxyETrI279OIgwIAOw==)}.rc-color-picker-panel-preview span{box-shadow:0 0 2px gray inset}.rc-color-picker-panel-preview span,.rc-color-picker-panel-preview input[type=color]{position:absolute;display:block;height:100%;width:30px;border-radius:2px}.rc-color-picker-panel-preview input[type=color]{opacity:0}.rc-color-picker-panel-board{position:relative;font-size:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin:8px 8px 0}.rc-color-picker-panel-board span{position:absolute;border-radius:10px;border:1px solid #fff;width:9px;height:9px;margin:-4px 0 0 -4px;left:-999px;top:-999px;box-shadow:0 0 1px #787878b3;z-index:2}.rc-color-picker-panel-board-hsv{width:200px;height:150px;position:relative;z-index:1;border-radius:2px}.rc-color-picker-panel-board-value{border-radius:2px;position:absolute;width:100%;height:100%;left:0;top:0;z-index:2;background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9InJnYigwLDAsMCkiIHN0b3Atb3BhY2l0eT0iMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);background-image:-webkit-linear-gradient(top,transparent 0%,#000000 100%);background-image:-moz-linear-gradient(top,transparent 0%,#000000 100%);background-image:-o-linear-gradient(top,transparent 0%,#000000 100%);background-image:linear-gradient(to bottom,transparent 0%,#000000 100%)}.rc-color-picker-panel-board-saturation{border-radius:2px;position:absolute;width:100%;height:100%;left:0;top:0;z-index:1;background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0icmdiKDAsMCwwKSIgc3RvcC1vcGFjaXR5PSIwIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);background-image:-webkit-linear-gradient(left,#ffffff 0%,transparent 100%);background-image:-moz-linear-gradient(left,#ffffff 0%,transparent 100%);background-image:-o-linear-gradient(left,#ffffff 0%,transparent 100%);background-image:linear-gradient(to right,#ffffff 0%,transparent 100%)}.rc-color-picker-panel-board-handler{box-shadow:0 0 2px gray inset;border-radius:2px;cursor:crosshair;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:absolute;top:0;left:0;width:100%;height:100%;z-index:3}.rc-color-picker-panel-ribbon{position:relative;height:100%;border-radius:2px;box-shadow:0 0 2px gray inset;background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZjAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAlIiBzdG9wLWNvbG9yPSIjZmY5OTAwIiBzdG9wLW9wYWNpdHk9IjEiLz48c3RvcCBvZmZzZXQ9IjIwJSIgc3RvcC1jb2xvcj0iI2NkZmYwMCIgc3RvcC1vcGFjaXR5PSIxIi8+PHN0b3Agb2Zmc2V0PSIzMCUiIHN0b3AtY29sb3I9IiMzNWZmMDAiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iNDAlIiBzdG9wLWNvbG9yPSIjMDBmZjY2IiBzdG9wLW9wYWNpdHk9IjEiLz48c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzAwZmZmZCIgc3RvcC1vcGFjaXR5PSIxIi8+PHN0b3Agb2Zmc2V0PSI2MCUiIHN0b3AtY29sb3I9IiMwMDY2ZmYiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iNzAlIiBzdG9wLWNvbG9yPSIjMzIwMGZmIiBzdG9wLW9wYWNpdHk9IjEiLz48c3RvcCBvZmZzZXQ9IjgwJSIgc3RvcC1jb2xvcj0iI2NkMDBmZiIgc3RvcC1vcGFjaXR5PSIxIi8+PHN0b3Agb2Zmc2V0PSI5MCUiIHN0b3AtY29sb3I9IiNmZjAwOTkiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);background-image:-webkit-linear-gradient(left,#ff0000 0%,#ff9900 10%,#cdff00 20%,#35ff00 30%,#00ff66 40%,#00fffd 50%,#0066ff 60%,#3200ff 70%,#cd00ff 80%,#ff0099 90%,#ff0000 100%);background-image:-moz-linear-gradient(left,#ff0000 0%,#ff9900 10%,#cdff00 20%,#35ff00 30%,#00ff66 40%,#00fffd 50%,#0066ff 60%,#3200ff 70%,#cd00ff 80%,#ff0099 90%,#ff0000 100%);background-image:-o-linear-gradient(left,#ff0000 0%,#ff9900 10%,#cdff00 20%,#35ff00 30%,#00ff66 40%,#00fffd 50%,#0066ff 60%,#3200ff 70%,#cd00ff 80%,#ff0099 90%,#ff0000 100%);background-image:linear-gradient(to right,#ff0000 0%,#ff9900 10%,#cdff00 20%,#35ff00 30%,#00ff66 40%,#00fffd 50%,#0066ff 60%,#3200ff 70%,#cd00ff 80%,#ff0099 90%,#ff0000 100%)}.rc-color-picker-panel-ribbon span{position:absolute;top:0;height:100%;width:4px;border:1px solid #000000;padding:1px 0;margin-left:-2px;background-color:#fff;border-radius:3px}.rc-color-picker-panel-ribbon-handler{position:absolute;width:104%;height:100%;left:-2%;cursor:pointer}.rc-color-picker-panel-alpha{position:relative;height:100%;width:100%;border-radius:2px;background-image:url(data:image/png;base64,R0lGODdhCgAKAPAAAOXl5f///ywAAAAACgAKAEACEIQdqXt9GxyETrI279OIgwIAOw==);background-repeat:repeat;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.rc-color-picker-panel-alpha-bg{position:absolute;width:100%;height:100%;border-radius:2px;box-shadow:0 0 2px gray inset}.rc-color-picker-panel-alpha span{position:absolute;top:0;height:100%;width:4px;border:1px solid #000000;padding:1px 0;margin-left:-2px;background-color:#fff;border-radius:3px}.rc-color-picker-panel-alpha-handler{position:absolute;width:104%;height:100%;left:-2%;cursor:pointer}.rc-color-picker-panel-params{font-size:12px}.rc-color-picker-panel-params-input{overflow:hidden;padding:2px 8px}.rc-color-picker-panel-params input{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;text-align:center;padding:1px;margin:0;float:left;border-radius:2px;border:1px solid #CACACA;font-family:Helvetica Neue,Helvetica,sans-serif}.rc-color-picker-panel-params-hex{width:52px}.rc-color-picker-panel-params input[type=number]{margin-left:5px;width:44px}.rc-color-picker-panel-params input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none}.rc-color-picker-panel-params-lable{padding:2px 8px;height:22px;line-height:18px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.rc-color-picker-panel-params-lable label{float:left;text-align:center}.rc-color-picker-panel-params-lable-hex{width:52px}.rc-color-picker-panel-params-lable-number,.rc-color-picker-panel-params-lable-alpha{margin-left:5px;width:44px;text-transform:uppercase}.rc-color-picker-panel-params-lable-number:hover{border-radius:2px;background-color:#eee;box-shadow:0 0 0 1px #ccc inset;cursor:pointer}.rc-color-picker-panel-params-has-alpha input[type=number],.rc-color-picker-panel-params-has-alpha .rc-color-picker-panel-params-lable-number,.rc-color-picker-panel-params-has-alpha .rc-color-picker-panel-params-lable-alpha{width:32px}.rc-color-picker{position:absolute;left:-9999px;top:-9999px;z-index:1000}.rc-color-picker-wrap{display:inline-block}.rc-color-picker-slide-up-enter,.rc-color-picker-slide-up-appear{animation-duration:.3s;animation-fill-mode:both;transform-origin:0 0;display:block!important;opacity:0;animation-timing-function:cubic-bezier(.08,.82,.17,1);animation-play-state:paused}.rc-color-picker-slide-up-leave{animation-duration:.3s;animation-fill-mode:both;transform-origin:0 0;display:block!important;opacity:1;animation-timing-function:cubic-bezier(.6,.04,.98,.34);animation-play-state:paused}.rc-color-picker-slide-up-enter.rc-color-picker-slide-up-enter-active.rc-color-picker-placement-bottomLeft,.rc-color-picker-slide-up-enter.rc-color-picker-slide-up-enter-active.rc-color-picker-placement-bottomRight,.rc-color-picker-slide-up-appear.rc-color-picker-slide-up-appear-active.rc-color-picker-placement-bottomLeft,.rc-color-picker-slide-up-appear.rc-color-picker-slide-up-appear-active.rc-color-picker-placement-bottomRight{animation-name:rcColorPickerSlideUpIn;animation-play-state:running}.rc-color-picker-slide-up-enter.rc-color-picker-slide-up-enter-active.rc-color-picker-placement-topLeft,.rc-color-picker-slide-up-enter.rc-color-picker-slide-up-enter-active.rc-color-picker-placement-topRight,.rc-color-picker-slide-up-appear.rc-color-picker-slide-up-appear-active.rc-color-picker-placement-topLeft,.rc-color-picker-slide-up-appear.rc-color-picker-slide-up-appear-active.rc-color-picker-placement-topRight{animation-name:rcColorPickerSlideDownIn;animation-play-state:running}.rc-color-picker-slide-up-leave.rc-color-picker-slide-up-leave-active.rc-color-picker-placement-bottomLeft,.rc-color-picker-slide-up-leave.rc-color-picker-slide-up-leave-active.rc-color-picker-placement-bottomRight{animation-name:rcColorPickerSlideUpOut;animation-play-state:running}.rc-color-picker-slide-up-leave.rc-color-picker-slide-up-leave-active.rc-color-picker-placement-topLeft,.rc-color-picker-slide-up-leave.rc-color-picker-slide-up-leave-active.rc-color-picker-placement-topRight{animation-name:rcColorPickerSlideDownOut;animation-play-state:running}@keyframes rcColorPickerSlideUpIn{0%{opacity:0;transform-origin:0% 0%;transform:scaleY(0)}to{opacity:1;transform-origin:0% 0%;transform:scaleY(1)}}@keyframes rcColorPickerSlideUpOut{0%{opacity:1;transform-origin:0% 0%;transform:scaleY(1)}to{opacity:0;transform-origin:0% 0%;transform:scaleY(0)}}@keyframes rcColorPickerSlideDownIn{0%{opacity:0;transform-origin:100% 100%;transform:scaleY(0)}to{opacity:1;transform-origin:100% 100%;transform:scaleY(1)}}@keyframes rcColorPickerSlideDownOut{0%{opacity:1;transform-origin:100% 100%;transform:scaleY(1)}to{opacity:0;transform-origin:100% 100%;transform:scaleY(0)}}.fr-color-picker{width:100%;display:flex;flex-direction:row;align-items:center;color:#666}.fr-color-picker .rc-color-picker-trigger{margin-right:12px;height:32px;width:60px;border:1px solid #e5e5e5}.fr-color-picker>p{margin:0;font-size:14px;line-height:28px}.fr-color-picker .rc-color-picker-wrap{display:flex}.fr-preview-image{width:160px}.fr-preview{position:relative;cursor:pointer}.fr-slider{display:flex;width:100%;align-items:center}.fr-upload-mod,.fr-upload-file{display:flex}.fr-upload-mod{align-items:center}.fr-upload-mod .fr-upload-preview{margin:0 12px}.fr-upload-file .ant-upload-list-item{margin:5px 0 0 8px}.fr-upload-file .ant-upload-list-item-name{margin-right:6px}.fr-upload-file .ant-upload-list-item-info{cursor:pointer}.fr-upload-file .next-upload-list-text .next-upload-list-item-done,.fr-upload-file .next-upload-list-text .next-upload-list-item .next-icon{height:28px;line-height:28px;margin-left:12px}.fr-upload-file .next-upload-list-item-name-wrap{margin-top:-4px}.fr-panel-bordered{border-radius:4px;border:1px solid #f4f4f4;padding:52px 24px 0;margin-bottom:24px}.fr-obj-card{border-radius:4px;border-color:#f4f4f4;margin-bottom:24px!important}.fr-obj-card .ant-card-head{border:none}.fr-obj-card .ant-card-body{padding:12px 24px!important}.fr-obj-card .fr-header-desc{word-break:break-all;color:#00000073;margin-left:6px;font-weight:400}.fr-obj-collapse{border-radius:4px;border:1px solid #f1f1f1;margin-bottom:24px}.fr-obj-collapse .collapse-title{height:24px;color:#000000e0;font-weight:600;font-size:16px;line-height:24px}.fr-obj-collapse .fr-header-desc{word-break:break-all;color:#00000073;margin-left:6px;font-weight:400}.fr-obj-collapse .header-item-label{height:14px;margin-left:30px;color:#000;font-weight:600;font-size:14px;line-height:14px}.fr-obj-collapse .header-item-label span{color:#141414}.fr-obj-collapse .expand-icon-desc{margin-left:4px}.fr-obj-collapse .ant-collapse-header{display:flex;align-items:center!important;padding:16px!important;background-color:#fff;border-radius:4px!important}.fr-obj-collapse .ant-collapse-header-text{display:flex;align-items:center}.fr-obj-collapse .tag-no-data{color:#000000a6}.fr-obj-collapse .ant-collapse-content-box{padding:12px 24px!important}.fr-obj-collapse .ant-collapse-content-box .ant-skeleton-title,.fr-obj-collapse .ant-collapse-content-box .ant-skeleton-paragraph>li{animation:none!important}.fr-obj-subinline-label-hidden>.ant-form-item-row>.ant-form-item-label{visibility:hidden}.fr-obj-subinline-background>.ant-form-item-row>.ant-form-item-control{background-color:#f6f6f6;padding:24px 24px 0;border-radius:4px}.fr-obj-subinline .ant-form-item-row{flex-wrap:nowrap}.fr-obj-line-title .fr-obj-header{line-height:36px;border-bottom:1px solid #e9e9e9}.fr-obj-line-title .fr-header-title{color:#000000e0;font-size:16px;font-weight:600}.fr-obj-line-title .fr-header-desc{word-break:break-all;color:#00000073;margin-left:6px;font-weight:400}.fr-obj-line-title .fr-obj-content{padding:24px 0 0}.fr-list-simple{display:inline-block}.fr-list-simple .fr-inline-field{min-width:220px;margin-bottom:24px!important}.fr-list-simple .fr-list-item{display:flex;align-items:flex-start;position:relative}.fr-list-simple .fr-list-item-operate{height:32px;gap:0!important}.fr-list-simple-background{padding:24px 24px 0;background-color:#f6f6f6;border-radius:4px}.fr-list-simple-background .add-btn{margin-bottom:24px}.fr-list-simple-column .fr-list-item{align-items:center}.fr-list-card{margin-bottom:24px}.fr-list-card .fr-list-item{display:flex;align-items:flex-start;position:relative}.fr-list-card .fr-list-item-operate{padding:0 20px;height:32px;gap:0!important}.fr-list-card .fr-list-item-operate-fixed{position:absolute;right:8px}.fr-list-card .fr-list-add-btn{padding:0 8px}.fr-table-list{margin-bottom:24px}.fr-table-list .ant-form-item{margin-bottom:0}.fr-table-list .ant-form-item-label,.fr-table-list .ant-form-item-explain-error{display:none}.fr-table-list .fr-list-item-operate{gap:0!important}.fr-table-list-no-popover .ant-table-tbody .ant-table-cell{padding:24px 8px 0!important}.fr-table-list-no-popover .ant-form-item{margin-bottom:24px}.fr-table-list-no-popover .ant-form-item-explain-error{display:block;font-size:10px}.fr-list-drawer{margin-bottom:24px}.fr-list-drawer-table-header{width:100%;display:flex;justify-content:right;align-items:center;margin-bottom:10px}.fr-list-drawer .ant-form-item{margin-bottom:0}.fr-list-drawer .fr-list-item-operate{gap:0!important}.fr-virtual-list{margin-bottom:12px}.fr-virtual-list .ant-form-item{margin-bottom:0}.fr-virtual-list .ant-form-item-label,.fr-virtual-list .ant-form-item-explain-error{display:none}.fr-virtual-list .fr-list-item-operate{gap:0!important}.fr-popover-error .ant-popover-inner-content{color:#ff4d4f!important}.fr-virtual-list-no-popover .ant-table-tbody .ant-table-cell{padding:24px 8px 0!important}.fr-virtual-list-no-popover .ant-form-item{margin-bottom:24px}.fr-virtual-list-no-popover .ant-form-item-explain-error{display:block;font-size:10px}.fr-void-title{height:24px;color:#000000e0;font-weight:600;font-size:16px;line-height:24px}.fr-search{width:100%;background:#fff;padding:24px 24px 0 16px;margin-bottom:16px;box-sizing:border-box;position:relative}.fr-search .search-action-col{flex:1;display:flex;justify-content:flex-end;align-items:baseline;height:56px}.fr-search .search-action-fixed{position:absolute;right:0;bottom:0;background-color:#fff;padding-right:24px!important}.fr-search .search-action-column{height:auto}.fr-search .fr-form>.ant-row{align-items:center}.fr-column-search{padding-left:24px}