@pdfme/ui 3.1.2 → 3.1.3-dev.2

package/dist/types/class.d.ts

@@ -34,6 +34,7 @@ export declare abstract class BaseUIClass {
             width: import("zod").ZodNumber;
             height: import("zod").ZodNumber;
             rotate: import("zod").ZodOptional<import("zod").ZodNumber>;
+            opacity: import("zod").ZodOptional<import("zod").ZodNumber>;
         }, import("zod").ZodTypeAny, "passthrough">>[];
         basePdf: (string | Uint8Array | ArrayBuffer) & (string | Uint8Array | ArrayBuffer | undefined);
         sampledata?: Record<string, string>[] | undefined;

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/dist/types/contexts.d.ts

@@ -1,11 +1,12 @@
 /// <reference types="react" />
 import { Plugins, UIOptions } from '@pdfme/common';
-export declare const I18nContext: import("react").Context<(key: "height" | "width" | "type" | "rotate" | "cancel" | "field" | "fieldName" | "align" | "edit" | "plsInputName" | "fieldMustUniq" | "notUniq" | "noKeyName" | "fieldsList" | "addNewField" | "editField" | "errorOccurred" | "errorBulkUpdateFieldName" | "commitBulkUpdateFieldName" | "bulkUpdateFieldName" | "schemas.textColor" | "schemas.bgColor" | "schemas.horizontal" | "schemas.vertical" | "schemas.left" | "schemas.center" | "schemas.right" | "schemas.top" | "schemas.middle" | "schemas.bottom" | "schemas.text.fontName" | "schemas.text.size" | "schemas.text.spacing" | "schemas.text.textAlign" | "schemas.text.verticalAlign" | "schemas.text.lineHeight" | "schemas.text.min" | "schemas.text.max" | "schemas.text.fit" | "schemas.text.dynamicFontSize" | "schemas.barcodes.barColor", dict?: {
+export declare const I18nContext: import("react").Context<(key: "height" | "width" | "type" | "rotate" | "opacity" | "cancel" | "field" | "fieldName" | "align" | "edit" | "plsInputName" | "fieldMustUniq" | "notUniq" | "noKeyName" | "fieldsList" | "addNewField" | "editField" | "errorOccurred" | "errorBulkUpdateFieldName" | "commitBulkUpdateFieldName" | "bulkUpdateFieldName" | "schemas.textColor" | "schemas.bgColor" | "schemas.horizontal" | "schemas.vertical" | "schemas.left" | "schemas.center" | "schemas.right" | "schemas.top" | "schemas.middle" | "schemas.bottom" | "schemas.text.fontName" | "schemas.text.size" | "schemas.text.spacing" | "schemas.text.textAlign" | "schemas.text.verticalAlign" | "schemas.text.lineHeight" | "schemas.text.min" | "schemas.text.max" | "schemas.text.fit" | "schemas.text.dynamicFontSize" | "schemas.barcodes.barColor", dict?: {
     cancel: string;
     field: string;
     fieldName: string;
     align: string;
     width: string;
+    opacity: string;
     height: string;
     rotate: string;
     edit: string;

package/dist/types/helper.d.ts

@@ -35,6 +35,7 @@ export declare const templateSchemas2SchemasList: (_template: Template) => Promi
     data: string;
     id: string;
     key: string;
+    opacity?: number | undefined;
     rotate?: number | undefined;
 }[][]>;
 export declare const fmtTemplate: (template: Template, schemasList: SchemaForUI[][]) => Template;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pdfme/ui",
-  "version": "3.1.2",
+  "version": "3.1.3-dev.2",
   "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/components/Designer/Sidebar/DetailView/index.tsx

@@ -58,15 +58,31 @@ const DetailView = (
   }, [activeSchema, activeElements, pluginsRegistry, JSON.stringify(options)]);
 
   useEffect(() => {
-    form.setValues({ ...activeSchema });
-  }, [activeSchema]);
+    const values: any = { ...activeSchema };
+
+    // [position] Change the nested position object into a flat, as a three-column layout is difficult to implement
+    values.x = values.position.x;
+    values.y = values.position.y;
+    delete values.position;
+
+    if (values.key !== (form.getValues() || {}).key) {
+      form.resetFields();
+    }
+
+    form.setValues(values);
+  }, [form, activeSchema]);
 
   const handleWatch = (newSchema: any) => {
     const changes = [];
-    for (const key in newSchema) {
+    for (let key in newSchema) {
       if (['id', 'data'].includes(key)) continue;
       if (newSchema[key] !== (activeSchema as any)[key]) {
-        changes.push({ key, value: newSchema[key], schemaId: activeSchema.id });
+        const value = newSchema[key] || undefined;
+
+        // [position] Return the flattened position to its original form.
+        if (key === 'x') key = 'position.x';
+        if (key === 'y') key = 'position.y';
+        changes.push({ key, value, schemaId: activeSchema.id });
       }
     }
     if (changes.length) {
@@ -84,6 +100,12 @@ const DetailView = (
 Check this document: https://pdfme.com/docs/custom-schemas`);
   }
 
+  const typeOptions = Object.entries(pluginsRegistry).map(([label, value]) => ({
+    label,
+    value: value?.propPanel.defaultSchema.type,
+  }));
+  const defaultSchema = activePlugin.propPanel.defaultSchema;
+
   const propPanelSchema: PropPanelSchema = {
     type: 'object',
     column: 2,
@@ -92,34 +114,49 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
         title: i18n('type'),
         type: 'string',
         widget: 'select',
-        props: {
-          options: Object.entries(pluginsRegistry).map(([label, value]) => ({
-            label,
-            value: value?.propPanel.defaultSchema.type,
-          })),
-        },
-      },
-      key: { title: i18n('fieldName'), type: 'string', widget: 'input' },
-      '-': { type: 'void', widget: 'Divider', cellSpan: 2 },
-      align: { title: i18n('align'), type: 'void', widget: 'AlignWidget', cellSpan: 2 },
-      position: {
-        type: 'object',
-        widget: 'card',
-        properties: {
-          x: { title: 'X', type: 'number', widget: 'inputNumber' },
-          y: { title: 'Y', type: 'number', widget: 'inputNumber' },
-        },
+        props: { options: typeOptions },
+        required: true,
+        span: 10,
       },
-      width: { title: i18n('width'), type: 'number', widget: 'inputNumber', span: 8 },
-      height: { title: i18n('height'), type: 'number', widget: 'inputNumber', span: 8 },
+      key: { title: i18n('fieldName'), type: 'string', required: true, span: 14 },
+      '-': { type: 'void', widget: 'Divider' },
+      align: { title: i18n('align'), type: 'void', widget: 'AlignWidget' },
+      x: { title: 'X', type: 'number', widget: 'inputNumber', required: true, span: 8 },
+      y: { title: 'Y', type: 'number', widget: 'inputNumber', required: true, span: 8 },
       rotate: {
         title: i18n('rotate'),
         type: 'number',
         widget: 'inputNumber',
-        span: 8,
-        disabled: activePlugin.propPanel.defaultSchema?.rotate === undefined,
+        disabled: defaultSchema?.rotate === undefined,
         max: 360,
         min: 0,
+        span: 8,
+      },
+      width: {
+        title: i18n('width'),
+        type: 'number',
+        widget: 'inputNumber',
+        required: true,
+        span: 8,
+      },
+      height: {
+        title: i18n('height'),
+        type: 'number',
+        widget: 'inputNumber',
+        required: true,
+        span: 8,
+      },
+      opacity: {
+        title: i18n('opacity'),
+        type: 'number',
+        widget: 'inputNumber',
+        disabled: defaultSchema?.opacity === undefined,
+        props: {
+          step: 0.1,
+        },
+        max: 1,
+        min: 0,
+        span: 8,
       },
     },
   };
@@ -134,18 +171,14 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
       }) || {};
     propPanelSchema.properties = {
       ...propPanelSchema.properties,
-      ...(Object.keys(apps).length === 0
-        ? {}
-        : { '--': { type: 'void', widget: 'Divider', cellSpan: 2 } }),
+      ...(Object.keys(apps).length === 0 ? {} : { '--': { type: 'void', widget: 'Divider' } }),
       ...apps,
     };
   } else {
     const apps = activePropPanelSchema || {};
     propPanelSchema.properties = {
       ...propPanelSchema.properties,
-      ...(Object.keys(apps).length === 0
-        ? {}
-        : { '--': { type: 'void', widget: 'Divider', cellSpan: 2 } }),
+      ...(Object.keys(apps).length === 0 ? {} : { '--': { type: 'void', widget: 'Divider' } }),
       ...apps,
     };
   }

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) {
@@ -69,6 +70,7 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
       const editable = mode === 'form' || mode === 'designer';
 
       render({
+        key: schema.key,
         value: schema.data,
         schema,
         rootElement: ref.current,
@@ -80,6 +82,7 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
         options,
         theme,
         i18n,
+        _cache: _cache.current,
       });
     }
     return () => {

package/src/i18n.ts

@@ -8,6 +8,7 @@ const dictEn: { [key in keyof Dict]: string } = {
   align: 'Align',
   width: 'Width',
   height: 'Height',
+  opacity: 'Opacity',
   rotate: 'Rotate',
   edit: 'Edit',
   plsInputName: 'Please input name',
@@ -53,6 +54,7 @@ const dictJa: { [key in keyof Dict]: string } = {
   align: '整列',
   width: '幅',
   height: '高さ',
+  opacity: '不透明度',
   rotate: '回転',
   edit: '編集する',
   plsInputName: '項目名を入力してください',
@@ -97,6 +99,7 @@ const dictAr: { [key in keyof Dict]: string } = {
   align: 'محاذاة',
   width: 'العرض',
   height: 'الارتفاع',
+  opacity: 'الشفافية',
   rotate: 'تدوير',
   edit: 'تعديل',
   plsInputName: 'الرجاء إدخال الاسم',
@@ -141,6 +144,7 @@ const dictTh: { [key in keyof Dict]: string } = {
   align: 'จัดเรียง',
   width: 'ความกว้าง',
   height: 'ความสูง',
+  opacity: 'ความทึบ',
   rotate: 'หมุน',
   edit: 'แก้ไข',
   plsInputName: 'กรุณาใส่ชื่อ',
@@ -185,6 +189,7 @@ const dictIt: { [key in keyof Dict]: string } = {
   align: 'Allinea',
   width: 'Larghezza',
   height: 'Altezza',
+  opacity: 'Opacità',
   rotate: 'Ruota',
   edit: 'Modifica',
   plsInputName: 'Inserisci il nome per favore',
@@ -230,6 +235,7 @@ const dictPl: { [key in keyof Dict]: string } = {
   align: 'Wyrównanie',
   width: 'Szerokość',
   height: 'Wysokość',
+  opacity: 'przezroczystość',
   rotate: 'Obrót',
   edit: 'Edytuj',
   plsInputName: 'Wymagane wprowadzenie klucza pola',

package/vite.config.ts

@@ -2,15 +2,17 @@ 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: [
     react(),
-    tsconfigPaths(),
+    tsconfigPaths({root: '.'}),
     topLevelAwait({
       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}