@nokecy/qc-ui 0.4.8 → 0.5.0

package/dist/esm/formDesigner/FormDesigner.js

@@ -0,0 +1,222 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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.js

@@ -0,0 +1,21 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+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(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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.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.js

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