@nokecy/qc-ui 0.3.33 → 0.4.1

package/dist/esm/formDesigner/FormDesigner.js

@@ -0,0 +1,228 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import { createDesigner, GlobalRegistry, KeyCode, Shortcut } from '@nokecy/designable-core';
+import { ArrayCards, Cascader, Checkbox, DatePicker, Field, Form, FormCollapse, FormGrid, FormLayout, FormTab, Input, NumberPicker, ObjectContainer, Password, Radio, Rate, Select, Slider, Space, Switch, Text, TimePicker, Transfer, TreeSelect, Upload } from '@nokecy/designable-formily-antd';
+import { Editable } from "../editable";
+import { ArrayTable } from "./arrayTable";
+import { ComponentTreeWidget, CompositePanel, Designer, DesignerToolsWidget, OutlineTreeWidget, HistoryWidget, ResourceWidget, SettingsPanel, StudioPanel, ToolbarPanel, ViewPanel, ViewportPanel, ViewToolsWidget, Workspace, WorkspacePanel } from '@nokecy/designable-react';
+import { SettingsForm } from '@nokecy/designable-react-settings-form';
+import React, { useEffect, useMemo } from 'react';
+import { ActionsWidget, PreviewWidget, SchemaEditorWidget } from "./widgets";
+import { PreDefineProperty1, PreDefineProperty2, PreDefineProperty3, PreDefineProperty4, PreDefineProperty5, PreDefineProperty6, PreDefineProperty7, PreDefineProperty8, PreDefineProperty9, PreDefineProperty10, Card, ArrayTableIndex } from "./preWidgets";
+import "./index.less";
+GlobalRegistry.registerDesignerLocales({
+  'zh-CN': {
+    sources: {
+      Inputs: '输入控件',
+      Layouts: '布局组件',
+      Arrays: '自增组件',
+      Displays: '展示组件'
+    }
+  },
+  'en-US': {
+    sources: {
+      Inputs: 'Inputs',
+      Layouts: 'Layouts',
+      Arrays: 'Arrays',
+      Displays: 'Displays'
+    }
+  }
+});
+
+var FormDesigner = function FormDesigner(props) {
+  var loadSchema = props.loadSchema,
+      saveSchema = props.saveSchema,
+      name = props.name,
+      _props$businessCompon = props.businessComponents,
+      businessComponents = _props$businessCompon === void 0 ? [] : _props$businessCompon;
+  var engine = useMemo(function () {
+    return createDesigner({
+      shortcuts: [new Shortcut({
+        codes: [[KeyCode.Meta, KeyCode.S], [KeyCode.Control, KeyCode.S]],
+        handler: function handler(ctx) {
+          saveSchema(ctx.engine);
+        }
+      })],
+      rootComponentName: 'Form'
+    });
+  }, []);
+  useEffect(function () {
+    loadSchema && loadSchema(engine);
+  }, []);
+
+  var getComponents = function getComponents() {
+    var components = {};
+    businessComponents.map(function (x) {
+      if (!x.Behavior) {
+        console.log(x);
+      }
+
+      components[x.Behavior[0].name] = x;
+    });
+    return components;
+  };
+
+  var getComponentGroups = function getComponentGroups() {
+    var groups = {};
+    businessComponents.map(function (x) {
+      if (groups[x.GroupName ? x.GroupName : '其他']) {
+        groups[x.GroupName ? x.GroupName : '其他'].push(x);
+      } else {
+        groups[x.GroupName ? x.GroupName : '其他'] = [x];
+      }
+    });
+    return groups;
+  };
+
+  var CompositePanelItem = CompositePanel.Item;
+  var groupComponents = getComponentGroups();
+  return /*#__PURE__*/React.createElement(Designer, {
+    engine: engine,
+    position: 'relative'
+  }, /*#__PURE__*/React.createElement(StudioPanel, {
+    logo: /*#__PURE__*/React.createElement("div", {
+      style: {
+        fontWeight: '500',
+        textAlign: 'center',
+        fontSize: 24,
+        paddingLeft: 50
+      }
+    }, "\u8868\u5355\u540D\u79F0:", name),
+    actions: /*#__PURE__*/React.createElement(ActionsWidget, {
+      saveSchema: saveSchema
+    }),
+    style: {
+      position: 'static',
+      height: '100%'
+    }
+  }, /*#__PURE__*/React.createElement(CompositePanel, null, /*#__PURE__*/React.createElement(CompositePanelItem, {
+    title: "panels.Component",
+    icon: "Component"
+  }, /*#__PURE__*/React.createElement(ResourceWidget, {
+    title: "sources.Inputs",
+    sources: [Input, Password, NumberPicker, Rate, Slider, Select, TreeSelect, Cascader, Transfer, Checkbox, Radio, DatePicker, TimePicker, Upload, Switch, ObjectContainer]
+  }), /*#__PURE__*/React.createElement(ResourceWidget, {
+    title: "sources.Layouts",
+    sources: [Card, FormGrid, FormTab, FormLayout, FormCollapse, Space]
+  }), /*#__PURE__*/React.createElement(ResourceWidget, {
+    title: "sources.Arrays",
+    sources: [ArrayCards, ArrayTable, ArrayTableIndex]
+  }), /*#__PURE__*/React.createElement(ResourceWidget, {
+    title: "sources.Displays",
+    sources: [Text]
+  }), /*#__PURE__*/React.createElement(ResourceWidget, {
+    title: "\u9884\u8BBE\u5B57\u6BB5",
+    sources: [PreDefineProperty1, PreDefineProperty2, PreDefineProperty3, PreDefineProperty4, PreDefineProperty5, PreDefineProperty6, PreDefineProperty7, PreDefineProperty8, PreDefineProperty9, PreDefineProperty10]
+  }), Object.keys(groupComponents).map(function (x) {
+    return /*#__PURE__*/React.createElement(ResourceWidget, {
+      title: x,
+      sources: groupComponents[x]
+    });
+  })), /*#__PURE__*/React.createElement(CompositePanelItem, {
+    title: "panels.OutlinedTree",
+    icon: "Outline"
+  }, /*#__PURE__*/React.createElement(OutlineTreeWidget, null)), /*#__PURE__*/React.createElement(CompositePanelItem, {
+    title: "panels.History",
+    icon: "History"
+  }, /*#__PURE__*/React.createElement(HistoryWidget, null))), /*#__PURE__*/React.createElement(Workspace, {
+    id: "form"
+  }, /*#__PURE__*/React.createElement(WorkspacePanel, null, /*#__PURE__*/React.createElement(ToolbarPanel, null, /*#__PURE__*/React.createElement(DesignerToolsWidget, null), /*#__PURE__*/React.createElement(ViewToolsWidget, {
+    use: ['DESIGNABLE', 'JSONTREE', 'PREVIEW']
+  })), /*#__PURE__*/React.createElement(ViewportPanel, null, /*#__PURE__*/React.createElement(ViewPanel, {
+    type: "DESIGNABLE"
+  }, function () {
+    return /*#__PURE__*/React.createElement(ComponentTreeWidget, {
+      components: _objectSpread({
+        Form: Form,
+        Field: Field,
+        Input: Input,
+        Select: Select,
+        TreeSelect: TreeSelect,
+        Cascader: Cascader,
+        Radio: Radio,
+        Checkbox: Checkbox,
+        Slider: Slider,
+        Rate: Rate,
+        NumberPicker: NumberPicker,
+        Transfer: Transfer,
+        Password: Password,
+        DatePicker: DatePicker,
+        TimePicker: TimePicker,
+        Upload: Upload,
+        Switch: Switch,
+        Text: Text,
+        Card: Card,
+        ArrayCards: ArrayCards,
+        ArrayTable: ArrayTable,
+        Space: Space,
+        FormTab: FormTab,
+        FormCollapse: FormCollapse,
+        FormGrid: FormGrid,
+        FormLayout: FormLayout,
+        ObjectContainer: ObjectContainer,
+        PreDefineProperty1: PreDefineProperty1,
+        PreDefineProperty2: PreDefineProperty2,
+        PreDefineProperty3: PreDefineProperty3,
+        PreDefineProperty4: PreDefineProperty4,
+        PreDefineProperty5: PreDefineProperty5,
+        PreDefineProperty6: PreDefineProperty6,
+        PreDefineProperty7: PreDefineProperty7,
+        PreDefineProperty8: PreDefineProperty8,
+        PreDefineProperty9: PreDefineProperty9,
+        PreDefineProperty10: PreDefineProperty10,
+        ArrayTableIndex: ArrayTableIndex,
+        Editable: Editable
+      }, getComponents())
+    });
+  }), /*#__PURE__*/React.createElement(ViewPanel, {
+    type: "JSONTREE",
+    scrollable: false
+  }, function (tree, onChange) {
+    return /*#__PURE__*/React.createElement(SchemaEditorWidget, {
+      tree: tree,
+      onChange: onChange
+    });
+  }), /*#__PURE__*/React.createElement(ViewPanel, {
+    type: "PREVIEW"
+  }, function (tree) {
+    return /*#__PURE__*/React.createElement(PreviewWidget, {
+      tree: tree,
+      components: _objectSpread({
+        Input: Input,
+        Select: Select,
+        TreeSelect: TreeSelect,
+        Cascader: Cascader,
+        Radio: Radio,
+        Checkbox: Checkbox,
+        Slider: Slider,
+        Rate: Rate,
+        NumberPicker: NumberPicker,
+        Transfer: Transfer,
+        Password: Password,
+        DatePicker: DatePicker,
+        TimePicker: TimePicker,
+        Upload: Upload,
+        Switch: Switch,
+        Text: Text,
+        Card: Card,
+        ArrayCards: ArrayCards,
+        ArrayTable: ArrayTable,
+        Space: Space,
+        FormTab: FormTab,
+        FormCollapse: FormCollapse,
+        FormLayout: FormLayout,
+        Editable: Editable
+      }, getComponents())
+    });
+  })))), /*#__PURE__*/React.createElement(SettingsPanel, {
+    title: "panels.PropertySettings"
+  }, /*#__PURE__*/React.createElement(SettingsForm, {
+    uploadAction: "https://www.mocky.io/v2/5cc8019d300000980a055e76"
+  }))));
+};
+
+export default FormDesigner;

package/dist/esm/formDesigner/ProCard/index.d.ts

@@ -0,0 +1,2 @@
+declare const Card: (props: any) => JSX.Element;
+export default Card;

package/dist/esm/formDesigner/ProCard/index.js

@@ -0,0 +1,24 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import React from 'react';
+import ProCard from '@ant-design/pro-card';
+
+var Card = function Card(props) {
+  return /*#__PURE__*/React.createElement(ProCard, _extends({
+    headerBordered: false,
+    collapsible: true
+  }, props, {
+    headStyle: _objectSpread({
+      paddingTop: 8,
+      paddingBottom: 8
+    }, props.headStyle)
+  }));
+};
+
+export default Card;

package/dist/esm/formDesigner/arrayTable/arrayTableSchema.d.ts

@@ -0,0 +1,5 @@
+import { ISchema } from '@formily/react';
+export declare const ArrayTable: ISchema & {
+    Addition?: ISchema;
+    Column?: ISchema;
+};

package/dist/esm/formDesigner/arrayTable/arrayTableSchema.js

@@ -0,0 +1,106 @@
+export var ArrayTable = {
+  type: 'object',
+  properties: {
+    bordered: {
+      type: 'boolean',
+      'x-decorator': 'FormItem',
+      'x-component': 'Switch',
+      'x-component-props': {
+        defaultChecked: true
+      }
+    },
+    showHeader: {
+      type: 'boolean',
+      'x-decorator': 'FormItem',
+      'x-component': 'Switch',
+      'x-component-props': {
+        defaultChecked: true
+      }
+    },
+    sticky: {
+      type: 'boolean',
+      'x-decorator': 'FormItem',
+      'x-component': 'Switch'
+    },
+    size: {
+      type: 'string',
+      enum: ['large', 'small', 'middle'],
+      'x-decorator': 'FormItem',
+      'x-component': 'Select',
+      'x-component-props': {
+        defaultValue: 'small'
+      }
+    },
+    tableLayout: {
+      type: 'string',
+      enum: ['auto', 'fixed'],
+      'x-decorator': 'FormItem',
+      'x-component': 'Radio.Group',
+      'x-component-props': {
+        defaultValue: 'auto',
+        optionType: 'button'
+      }
+    }
+  }
+};
+var Column = {
+  type: 'object',
+  properties: {
+    title: {
+      type: 'string',
+      'x-decorator': 'FormItem',
+      'x-component': 'Input'
+    },
+    align: {
+      type: 'string',
+      enum: ['left', 'right', 'center'],
+      'x-decorator': 'FormItem',
+      'x-component': 'Radio.Group',
+      'x-component-props': {
+        defaultValue: 'left',
+        optionType: 'button'
+      }
+    },
+    colSpan: {
+      type: 'number',
+      'x-decorator': 'FormItem',
+      'x-component': 'NumberPicker'
+    },
+    width: {
+      type: 'number',
+      'x-decorator': 'FormItem',
+      'x-component': 'NumberPicker'
+    },
+    pinned: {
+      type: 'string',
+      enum: ['left', 'right', false],
+      'x-decorator': 'FormItem',
+      'x-component': 'Radio.Group',
+      'x-component-props': {
+        optionType: 'button'
+      }
+    }
+  }
+};
+var Addition = {
+  type: 'object',
+  properties: {
+    method: {
+      type: 'string',
+      enum: ['push', 'unshift'],
+      'x-decorator': 'FormItem',
+      'x-component': 'Radio.Group',
+      'x-component-props': {
+        defaultValue: 'push',
+        optionType: 'button'
+      }
+    },
+    defaultValue: {
+      type: 'string',
+      'x-decorator': 'FormItem',
+      'x-component': 'ValueInput'
+    }
+  }
+};
+ArrayTable.Column = Column;
+ArrayTable.Addition = Addition;

package/dist/esm/formDesigner/arrayTable/index.d.ts

@@ -0,0 +1 @@
+export * from './preview';

package/dist/esm/formDesigner/arrayTable/index.js

@@ -0,0 +1 @@
+export * from "./preview";

package/dist/esm/formDesigner/arrayTable/preview.d.ts

@@ -0,0 +1,3 @@
+import { DnFC } from '@nokecy/designable-react';
+import './styles.less';
+export declare const ArrayTable: DnFC<any>;