plain-design 0.0.97 → 1.0.0-beta.10

package/src/pages/index/home/menus.tsx

@@ -0,0 +1,218 @@
+export interface Menu {
+  name: string,
+  title?: string,
+  page: string,
+  complete?: boolean,
+  noHeader?: boolean,
+}
+
+interface MenuGroup {
+  name: string,
+  children: Menu[],
+}
+
+export const MenuGroups: MenuGroup[] = [
+  /*{
+    name: '测试', children: [
+      { name: 'Test', title: '测试手动渲染实例', page: '/test/TestGroupTransition', complete: false },
+      { name: 'Test', title: '全局注册的组件', page: '/test/test', complete: false },
+      /!*{name: 'Drag', title: '测试拖拽节点', page: '/test/test-drag', complete: false},
+      {name: 'Svg', title: '测试svg', page: '/test/test-svg', complete: false},
+      {name: 'Canvas', title: '测试canvas', page: '/test/test-canvas', complete: false},
+      {name: 'High', title: '测试高阶组件', page: '/test/test-high', complete: false},
+      {name: 'Listener', title: '测试事件', page: '/test/test-listener', complete: false},
+      {name: 'Filter', title: '异步过滤器', page: '/test/test-filter', complete: false},
+      {name: 'List Draggier', title: '列表拖拽排序', page: '/test/test-list-draggier', complete: false},
+      {name: '传递属性给根节点组件热更新报错', title: '列表拖拽排序', page: '/test/test-pass-attrs-hot-reload/test-pass-attrs-hot-reload', complete: false},*!/
+    ]
+  },*/
+  /*{
+      name: '组合函数', children: [
+          {name: 'useSlots', page: '/use/DemoUseSlots', complete: false},
+          {name: 'useScopedSlots', page: '/use/DemoUseScopedSlots', complete: false},
+          {name: 'useModel', page: '/use/DemoUseModel', complete: false},
+          {name: 'useStyles', page: '/use/DemoUseStyles', complete: false},
+          {name: 'useStyle', page: '/use/DemoUseStyle', complete: false},
+          {name: 'useRefs', page: '/use/DemoUseRefs', complete: false},
+          {name: 'useRefList', page: '/use/DemoUseRefList', complete: false},
+          {name: 'useEvent', page: '/use/DemoUseEvent', complete: false},
+          // {name: 'useProps', page: '/use/useProps', complete: false},
+          {name: 'useCollect', page: '/use/DemoUseCollect', complete: false},
+          {name: 'PlTransition', page: '/normal/DemoTransition', complete: false},
+          {name: 'PlCollapseTransition', page: '/normal/DemoCollapseTransition', complete: false},
+      ]
+  },*/
+  {
+    name: '基础', children: [
+      { name: 'Color', title: '颜色', page: '/normal/DemoColor', complete: true },
+      { name: 'Icon', title: '图标', page: '/normal/DemoIcon', complete: true },
+      { name: 'Button', title: '按钮', page: '/normal/DemoButton', complete: true },
+      { name: 'Grid', title: '栅格', page: '/normal/DemoGrid', complete: true },
+    ]
+  },
+  {
+    name: '表单元素', children: [
+      { name: 'Input', title: '输入框', page: '/normal/DemoInput', complete: true },
+      { name: 'Radio', title: '单选框', page: '/normal/DemoRadio', complete: true },
+      { name: 'Checkbox', title: '复选框', page: '/normal/DemoCheckbox', complete: true },
+      { name: 'Number', title: '数字输入', page: '/normal/DemoNumber', complete: true },
+      { name: 'Loading', title: '加载', page: '/normal/DemoLoading', complete: true },
+      { name: 'Select', title: '下拉选择', page: '/normal/DemoSelect', complete: true },
+      { name: 'Toggle', title: '开关切换', page: '/normal/DemoToggle', complete: true },
+      { name: 'Slider', title: '滑块', page: '/normal/DemoSlider', complete: true },
+      { name: 'Rate', title: '评分', page: '/normal/DemoRate', complete: true },
+      { name: 'ColorPicker', title: '颜色选择', page: '/normal/DemoColorPicker', complete: true },
+      { name: 'Cascade', title: '级联选择', page: '/normal/DemoCascade', complete: true },
+      { name: 'DatePicker', title: '日期选择', page: '/normal/DemoDate', complete: true },
+      { name: 'TimePicker', title: '时间选择', page: '/normal/DemoTime', complete: true },
+      // { name: 'AutoComplete', title: '自动补全', page: '/normal/DemoAutoComplete', complete: false },
+      { name: 'Upload', title: '文件上传', page: '/normal/DemoUpload', complete: true },
+      { name: 'Img', title: '图片', page: '/normal/DemoImage', complete: true },
+    ]
+  },
+  {
+    name: '表单示例', children: [
+      { name: 'Form', title: '表单基础', page: '/form/DemoFormBasic', complete: true },
+      { name: 'Form', title: '表单多列', page: '/form/DemoFormLayout', complete: true },
+      { name: 'Form', title: '纵向表单', page: '/form/DemoFormVertical', complete: true },
+      { name: 'Form', title: '表单尺寸', page: '/form/DemoFormSize', complete: true },
+      { name: 'Form', title: '表单控制', page: '/form/DemoFormEditControl', complete: true },
+      { name: 'Form', title: '校验blur', page: '/form/DemoFormBlur', complete: true },
+      { name: 'Form', title: '表单组件', page: '/form/DemoFormElement', complete: true },
+      // { name: 'Form', title: '表单校验', page: '/form/DemoFormValidate', complete: false },
+      // { name: 'Form', title: '关联字段', page: '/form/DemoFormAssociateFields', complete: false },
+      // { name: 'Form', title: '校验模式', page: '/form/DemoFormValidateMode', complete: false },
+      { name: 'Form', title: '动态表单项', page: '/form/DemoFormDynamicFields', complete: true },
+      { name: 'Form', title: '简写表单', page: '/form/DemoFormSimplify', complete: true },
+    ]
+  },
+  {
+    name: '视图', children: [
+      { name: 'List', title: '列表', page: '/normal/DemoList', complete: true },
+      { name: 'VirtualList', title: '虚拟列表', page: '/normal/DemoVirtualList', complete: true },
+      { name: 'Progress', title: '进度条', page: '/normal/DemoProgress', complete: true },
+      { name: 'Tree', title: '树形组件', page: '/normal/DemoTree', complete: true },
+      // {name: 'Virtual Tree', title: '虚拟树', page: '/normal/virtual-tree', complete: false},
+      { name: 'Pagination', title: '分页', page: '/normal/DemoPagination', complete: true },
+      { name: 'Badge', title: '标记', page: '/normal/DemoBadge', complete: true },
+      { name: 'Step', title: '步骤条', page: '/normal/DemoStep', complete: true },
+      { name: 'Tab', title: '页签', page: '/normal/DemoTab', complete: true },
+      { name: 'Segment', title: '分段', page: '/normal/DemoSegment', complete: true },
+      { name: 'Tag', title: '标签', page: '/normal/DemoTag', complete: true },
+    ]
+  },
+  /*{
+      name: '导航', children: [
+          {name: 'NavPageStack', title: '页面导航', page: '/nav/nav-page-stack', complete: false},
+          {name: 'Nav', title: '应用导航', page: '/nav/nav', complete: false},
+      ]
+  },*/
+  {
+    name: '其他', children: [
+      { name: 'Scroll', title: '滚动条', page: '/normal/DemoScroll', complete: true },
+      { name: 'Dialog', title: '对话框', page: '/normal/DemoDialog', complete: true },
+      { name: 'Tooltip', title: '文字提示', page: '/normal/DemoTooltip', complete: true },
+      { name: 'Dropdown', title: '下拉菜单', page: '/normal/DemoDropdown', complete: true },
+      { name: 'Popup', title: '悬浮框', page: '/normal/DemoPopup', complete: true },
+      { name: 'Card', title: '卡片', page: '/normal/DemoCard', complete: true },
+      { name: 'Carousel', title: '轮播', page: '/normal/DemoCarousel', complete: true },
+      { name: 'Collapse', title: '折叠面板', page: '/normal/DemoCollapse', complete: true },
+      { name: 'Layout', title: '布局', page: '/normal/DemoLayout', complete: true },
+      { name: 'Alert', title: '提示信息', page: '/normal/DemoAlert', complete: true },
+      { name: 'KeepAlive', title: '保活', page: '/normal/DemoKeepAlive', complete: true },
+      // {name: 'Triangle', title: '三角形元素', page: '/normal/triangle', complete: false},
+      // {name: 'FilletCorner', title: '圆角', page: '/normal/fillet-corner', complete: false},
+      // {name: 'TabHeader', title: '页签头组件', page: '/normal/tab-header', complete: false},
+    ]
+  },
+  {
+    name: '服务', children: [
+      { name: '$message', title: '消息服务', page: '/service/DemoMessageService', complete: true },
+      // {name: '$select', title: '选择服务', page: '/service/select-service', complete: false},
+      { name: '$dialog', title: '对话框服务', page: '/service/DemoDialogService', complete: true },
+      { name: '$notice', title: '通知', page: '/service/DemoNoticeService', complete: true },
+      // { name: '$contextmenu', title: '菜单服务', page: '/service/DemoContextmenuService', complete: false },
+      { name: '$file', title: '文件服务', page: '/service/DemoFileService', complete: true },
+      // { name: '$popper', title: '浮层服务', page: '/service/DemoPopperService', complete: false },
+      { name: '$popup', title: '弹出服务', page: '/service/DemoPopupService', complete: true },
+      // {name: '$image', title: '图片服务', page: '/service/image-service', complete: false},
+    ]
+  },
+  {
+    name: '表格', children: [
+      { name: 'Virtual', title: 'virtual-table', page: '/table/DemoVirtualTable', complete: true },
+      { name: 'Basic', title: '基础表格', page: '/table/DemoTableBasic', complete: true },
+      { name: 'Check', title: '单选多选', page: '/table/DemoTableCheck', complete: true },
+      // { name: 'Config', title: '自定义配置', page: '/table/DemoTableConfig', complete: false },
+      { name: 'Fixed', title: '固定列', page: '/table/DemoTableFixed', complete: true },
+      { name: 'Slots', title: '列作用域插槽', page: '/table/DemoTableSlots', complete: true },
+      { name: 'Formatter', title: '格式化值', page: '/table/DemoTableFormatter', complete: true },
+      { name: 'OverflowTooltip', title: '溢出显示', page: '/table/DemoTableOverflowTooltip', complete: true },
+
+      { name: 'Edit Control', title: '编辑控制', page: '/table/DemoTableEdit', complete: true },
+      { name: 'Expand', title: '展开列', page: '/table/DemoTableExpand', complete: true },
+      { name: 'Span', title: '合并单元格', page: '/table/DemoTableSpan', complete: true },
+      { name: 'Tree', title: '树形表格', page: '/table/DemoTableTree', complete: true },
+      { name: 'Draggable', title: '排序列', page: '/table/DemoTableRowDraggable', complete: true },
+      { name: 'RowCol', title: '行列排序', page: '/table/DemoTableColDraggable', complete: true },
+      { name: 'Class Style', title: '行列样式', page: '/table/DemoTableClassAndStyle', complete: true },
+      { name: 'Operation', title: '操作列', page: '/table/DemoPlcOperation', complete: true },
+    ]
+  },
+  {
+    name: "表格列",
+    children: [
+      { name: 'Edit Columns', title: '简单列组件', page: '/columns/DemoTableColumns', complete: true, },
+      { name: 'PlcSelect', title: '下拉选择列', page: '/columns/DemoPlcSelect', complete: true, },
+      { name: 'PlcDate', title: '日期列', page: '/columns/DemoPlcDate', complete: true, },
+      { name: 'PlcTime', title: '时间列', page: '/columns/DemoPlcTime', complete: true, },
+      { name: 'PlcAddress', title: '地址列', page: '/columns/DemoPlcAddress', complete: true, },
+    ],
+  },
+  {
+    name: '业务组件',
+    children: [
+      { name: 'Address', title: '地址选择', page: '/bus/DemoAddress', complete: true },
+      { name: 'AddressCascade', title: '地址级联选择', page: '/bus/DemoAddressCascade', complete: true },
+      { name: 'Filter', title: '筛选', page: '/bus/DemoFilter', complete: true },
+      { name: 'Object', title: '对象选择', page: '/AutoTable/AutoTableObjectPicker', complete: true },
+      { name: 'Ov', title: '选项集', page: '/AutoTable/AutoTableOvList', complete: true },
+    ],
+  },
+  {
+    name: 'AutoTable', children: [
+      { name: 'BasicUsage', title: '基本示例', page: '/AutoTable/AutoTableBasicUsage', complete: true },
+      { name: 'ColumnGroup', title: '分组示例', page: '/AutoTable/AutoTableGroupUsage', complete: true },
+      { name: 'DefaultSearch', title: '默认搜索', page: '/AutoTable/AutoTableDefaultSearch', complete: true },
+      { name: 'ParentCascade', title: '父子表', page: '/AutoTable/AutoTableCascade', complete: true },
+      { name: 'RowFormatter', title: '行数据格式化', page: '/AutoTable/AutoTableRowFormatter', complete: true },
+      { name: 'FileList', title: '文件列表', page: '/AutoTable/AutoTableFiles', complete: true },
+      { name: 'ImageList', title: '图片列', page: '/AutoTable/AutoTableProductList', complete: true },
+    ]
+  },
+  {
+    name: 'AutoTable高度控制', children: [
+      { name: 'FHFR', title: '固定高度:固定行数', page: '/AutoTable/FixedHeightFixedRow', complete: true, /*noHeader: false*/ },
+      { name: 'FHAR', title: '固定高度:自动行数', page: '/AutoTable/FixedHeightAutoRow', complete: true, /*noHeader: false*/ },
+      { name: 'AHFR', title: '自动高度:固定行数', page: '/AutoTable/AutoHeightFixedRow', complete: true, /*noHeader: false*/ },
+      { name: 'AHAR', title: '自动高度:自动行数', page: '/AutoTable/AutoHeightAutoRow', complete: true, /*noHeader: false*/ },
+    ]
+  },
+  /*{
+      name: 'Sticky Table',
+      children: [
+          {name: 'Sticky Table', title: '另一种形式的表格', page: '/sticky-table/demo-sticky-table', complete: false},
+          {name: 'Sticky', title: '粘粘组件', page: '/sticky-table/demo-sticky', complete: false},
+      ]
+  },
+  */
+  {
+    name: '测试',
+    children: [
+      { name: 'Test', title: '测试手动渲染实例', page: '/test/TestGroupTransition', complete: false },
+      { name: 'Test', title: '全局注册的组件', page: '/test/test', complete: false },
+      { name: 'UI Component', title: '测试基础组件', page: '/use/DemoUI', complete: false },
+      { name: 'I18N', title: '多语言测试', page: '/test/DemoI18n', complete: true },
+    ]
+  }
+];

package/src/pages/index/main.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import ReactDOM from "react-dom/client";
+import {installIconfontFontcls} from "../libs/install.iconfont-fontcls";
+import {installIconfontSymbol} from "../libs/install.iconfont-symbol";
+import {installAllIcon} from "../../packages/utils/installAllIcons";
+import {designPage, provide, setComponentPrefix} from "plain-design-composition";
+import {App} from "./App";
+import '../module';
+
+setComponentPrefix(globalComponentPrefix);
+
+installIconfontFontcls();
+installIconfontSymbol();
+
+installAllIcon();
+// installAllLazyIcons();
+
+const Main = designPage(() => {
+  provide('customAppMessage', '全局上下文名称');
+  return () => <App/>;
+});
+
+ReactDOM.createRoot(document.querySelector('#app')!).render(<Main/>);

package/src/pages/index/nav/$nav.ts

@@ -0,0 +1,41 @@
+import {createBrowserHistory} from "../../history/createHistory";
+import {createHooks, reactive} from "plain-design-composition";
+import {iHistoryMeta} from "../../history/history.utils";
+
+export const $nav = (() => {
+  // @ts-ignore
+  const history = createBrowserHistory({ base: __webpack_public_path__ });
+  // const history = createHashHistory({ base: 'plain-ui' });
+
+  const state = reactive({
+    route: history.state.route,
+  });
+
+  const hooks = {
+    onPathChange: createHooks<(meta: iHistoryMeta) => void>(),
+    onHashChange: createHooks<(meta: iHistoryMeta) => void>(),
+  };
+
+  history.onPathChange((meta) => {
+    if (meta.hash !== state.route.hash) {
+      hooks.onHashChange.exec(meta);
+    } else {
+      hooks.onPathChange.exec(meta);
+    }
+    state.route = meta;
+  });
+
+  const setScrollTop = (top: number) => {
+    document.documentElement.scrollTop = top;
+  };
+  const getScrollTop = () => {
+    return document.documentElement.scrollTop;
+  };
+
+  return {
+    history,
+    state,
+    setScrollTop,
+    getScrollTop,
+  };
+})();

package/src/pages/index/pages.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 因为运行时以及编译scss的时候都需要这个样式前缀，这里定义全局变量类型，在webpack插件中注入
+ * @author  韦胜健
+ * @date    2022.5.1 13:40
+ */
+declare const globalComponentPrefix: string;