@pisell/materials 1.0.607 → 1.0.609

package/lib/components/pisellDropSort/components/SortableItem/index.less

@@ -0,0 +1,155 @@
+.pisell-lowcode-drop-sort-item {
+  box-sizing: border-box;
+  padding-left: var(--spacing);
+
+  &.clone {
+    display: inline-block;
+    pointer-events: none;
+    padding: 0;
+    padding-left: 10px;
+    padding-top: 5px;
+
+    .pisell-lowcode-drop-sort-item-tree-item {
+      --vertical-padding: 5px;
+
+      padding-right: 24px;
+      box-shadow: 0px 15px 15px 0 rgba(34, 33, 81, 0.1);
+    }
+  }
+
+  &.ghost {
+    &.indicator {
+      opacity: 1;
+      position: relative;
+      z-index: 1;
+      margin-bottom: -1px;
+
+      .pisell-lowcode-drop-sort-item-tree-item {
+        position: relative;
+        padding: 0;
+        height: 8px;
+        border-color: #2389ff;
+        background-color: #56a1f8;
+
+        &:before {
+          position: absolute;
+          left: -8px;
+          top: -4px;
+          display: block;
+          content: '';
+          width: 12px;
+          height: 12px;
+          border-radius: 50%;
+          border: 1px solid #2389ff;
+          background-color: #ffffff;
+        }
+
+        > * {
+          /* Items are hidden using height and opacity to retain focus */
+          opacity: 0;
+          height: 0;
+        }
+      }
+    }
+
+    &:not(.indicator) {
+      opacity: 0.5;
+    }
+
+    .pisell-lowcode-drop-sort-item-tree-item > * {
+      box-shadow: none;
+      background-color: transparent;
+    }
+  }
+
+}
+
+.pisell-lowcode-drop-sort-item-tree-item {
+  position: relative;
+  display: flex;
+  padding: 12px;
+  align-items: center;
+  gap: 16px;
+  align-self: stretch;
+  border-radius: 12px;
+  background: var(--Base-White, #fff);
+
+  --vertical-padding: 10px;
+  box-sizing: border-box;
+  // transition: all 0.25s;
+
+  .pisell-lowcode-drop-sort-item-content {
+    flex: 1;
+    height: 48px;
+  }
+
+  .pisell-lowcode-drop-sort-item-button {
+    &:hover {
+      background: var(--Gray-100, #F2F4F7);
+    }
+  }
+
+  &:hover {
+    background: var(--Gray-25, #FCFCFD);
+  }
+
+  &.disabled {
+    border: 1px solid var(--Gray-200, #EAECF0);
+    background: var(--Gray-100, #F2F4F7);
+    cursor: not-allowed;
+  }
+}
+
+.pisell-lowcode-drop-sort-item-tree-item-border {
+  border: 1px solid var(--Gray-200, #eaecf0);
+  /* Shadow/xs */
+  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+}
+
+.pisell-lowcode-drop-sort-item-icon {
+  font-size: 20px;
+  color: #101828;
+}
+
+.pisell-lowcode-drop-sort-item-drag-handle-icon {
+  font-size: 20px;
+  color: #98a2b3;
+}
+
+.pisell-lowcode-drop-sort-item-count {
+  position: absolute;
+  top: -10px;
+  right: -10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background-color: #2389ff;
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: #fff;
+}
+
+.disableInteraction {
+  pointer-events: none;
+}
+
+.disableSelection,
+.clone {
+  .pisell-lowcode-drop-sort-item-count {
+    user-select: none;
+    -webkit-user-select: none;
+  }
+}
+
+.Collapse {
+  svg {
+    transition: transform 250ms ease;
+  }
+
+  &.collapsed svg {
+    transform: rotate(-90deg);
+  }
+}

package/lib/components/pisellDropSort/index.d.ts

@@ -0,0 +1,3 @@
+import PisellDropSort from './PisellDropSort';
+export default PisellDropSort;
+export type { PisellDropSortProps, DropSortItem } from './types';

package/lib/components/pisellDropSort/index.js

@@ -0,0 +1,36 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pisellDropSort/index.tsx
+var pisellDropSort_exports = {};
+__export(pisellDropSort_exports, {
+  default: () => pisellDropSort_default
+});
+module.exports = __toCommonJS(pisellDropSort_exports);
+var import_PisellDropSort = __toESM(require("./PisellDropSort"));
+var pisellDropSort_default = import_PisellDropSort.default;

package/lib/components/pisellDropSort/types.d.ts

@@ -0,0 +1,42 @@
+import { CSSProperties } from 'react';
+import type { Props as TreeItem } from '../pisellDraggable/components/TreeItem/TreeItem';
+import type { TreeItem as TreeItemType } from '../pisellDraggable/types';
+export interface DropSortItem extends TreeItemType {
+    [key: string]: any;
+}
+export interface PisellDropSortProps {
+    /** value */
+    value: DropSortItem[];
+    /** 允许拖拽 */
+    allowDrag?: boolean;
+    /** 允许删除 */
+    allowDelete?: boolean;
+    /** 允许添加子节点 */
+    allowAddChild?: boolean;
+    /** 允许添加根节点 */
+    allowAddRoot?: boolean;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 节点间距 */
+    spacing?: number;
+    /** 最大层级数 */
+    maxLevel?: number;
+    /** 是否显示边框 */
+    showBorder?: boolean;
+    /** 样式 */
+    style?: CSSProperties;
+    /** 类名 */
+    className?: string;
+    /** 数据源变化回调 */
+    onChange?: (items: DropSortItem[]) => void;
+    /** 删除节点回调 */
+    onDelete?: (itemProps: TreeItem) => void;
+    /** 添加节点回调 */
+    onAdd?: (itemProps: TreeItem) => void;
+    /** 自定义渲染节点 */
+    renderItem?: (itemProps: TreeItem) => React.ReactNode;
+    /** 添加根节点回调 */
+    onAddRoot?: () => void;
+    /** 左侧自定义内容 */
+    leftContent?: React.ReactNode;
+}

package/lib/components/pisellDropSort/types.js

@@ -0,0 +1,17 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pisellDropSort/types.ts
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);

package/lib/components/table/Table/utils.d.ts

@@ -167,7 +167,7 @@ export declare const getSettingKeyArrByMode: ({ filter, columnSetting, dataSourc
     sort?: SortType | undefined;
     mode: "" | "localStorage" | "remote";
     currentViewMode: ModeType;
-}) => ("filter_setting" | "column_setting" | "gallery_setting" | "view_mode" | "group_by" | "order_by")[];
+}) => ("view_mode" | "column_setting" | "order_by" | "group_by" | "gallery_setting" | "filter_setting")[];
 export declare const omit: (obj: Record<string, any>, keys: string[]) => Record<string, any>;
 export declare const stringify: (obj: Record<string, any>) => string;
 export {};

package/lib/index.d.ts

@@ -132,3 +132,4 @@ export { default as PisellPriceKeyboard } from './components/virtual-keyboard/Am
 export { default as PisellNumberKeyboard } from './components/virtual-keyboard/Number';
 export { default as VirtualKeyboardTime } from './components/virtual-keyboard/Time';
 export { default as WalletCard } from './components/walletCard';
+export { default as PisellDropSort } from './components/pisellDropSort';

package/lib/index.js

@@ -121,6 +121,7 @@ __export(src_exports, {
   PisellCustomCheckboxGroup: () => import_pisellCustomCheckboxGroup.default,
   PisellDatePicker: () => import_pisellDatePicker.default,
   PisellDraggable: () => import_pisellDraggable.default,
+  PisellDropSort: () => import_pisellDropSort.default,
   PisellDropdown: () => import_pisellDropdown.default,
   PisellEmpty: () => import_pisellEmpty.default,
   PisellFloatingPanel: () => import_pisellFloatingPanel.default,
@@ -333,6 +334,7 @@ var import_Amount = __toESM(require("./components/virtual-keyboard/Amount"));
 var import_Number = __toESM(require("./components/virtual-keyboard/Number"));
 var import_Time = __toESM(require("./components/virtual-keyboard/Time"));
 var import_walletCard = __toESM(require("./components/walletCard"));
+var import_pisellDropSort = __toESM(require("./components/pisellDropSort"));
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Affix,
@@ -427,6 +429,7 @@ var import_walletCard = __toESM(require("./components/walletCard"));
   PisellCustomCheckboxGroup,
   PisellDatePicker,
   PisellDraggable,
+  PisellDropSort,
   PisellDropdown,
   PisellEmpty,
   PisellFloatingPanel,

package/lib/locales/en-US.d.ts

@@ -213,5 +213,6 @@ declare const _default: {
     'pisell-lowcode-app-version-control-promote-version-ok': string;
     'pisell-lowcode-app-version-control-promote-version-cancel': string;
     'pisell-lowcode-app-version-control-version-exists': string;
+    'pisell-lowcode-drop-sort-add': string;
 };
 export default _default;

package/lib/locales/en-US.js

@@ -265,5 +265,7 @@ var en_US_default = {
   "pisell-lowcode-app-version-control-promote-version-describe": "Promoting this version will lock it further changes",
   "pisell-lowcode-app-version-control-promote-version-ok": "Promote",
   "pisell-lowcode-app-version-control-promote-version-cancel": "Cancel",
-  "pisell-lowcode-app-version-control-version-exists": "Version already exists"
+  "pisell-lowcode-app-version-control-version-exists": "Version already exists",
+  // 拖拽排序组件
+  "pisell-lowcode-drop-sort-add": "Add"
 };

package/lib/locales/zh-CN.d.ts

@@ -212,5 +212,6 @@ declare const _default: {
     'pisell-lowcode-app-version-control-promote-version-ok': string;
     'pisell-lowcode-app-version-control-promote-version-cancel': string;
     'pisell-lowcode-app-version-control-version-exists': string;
+    'pisell-lowcode-drop-sort-add': string;
 };
 export default _default;

package/lib/locales/zh-CN.js

@@ -261,5 +261,7 @@ var zh_CN_default = {
   "pisell-lowcode-app-version-control-promote-version-describe": "发布版本后，该版本将无法再进行修改",
   "pisell-lowcode-app-version-control-promote-version-ok": "发布",
   "pisell-lowcode-app-version-control-promote-version-cancel": "取消",
-  "pisell-lowcode-app-version-control-version-exists": "版本已存在"
+  "pisell-lowcode-app-version-control-version-exists": "版本已存在",
+  // 拖拽排序组件
+  "pisell-lowcode-drop-sort-add": "添加"
 };

package/lib/locales/zh-TW.d.ts

@@ -212,5 +212,6 @@ declare const _default: {
     'pisell-lowcode-app-version-control-promote-version-ok': string;
     'pisell-lowcode-app-version-control-promote-version-cancel': string;
     'pisell-lowcode-app-version-control-version-exists': string;
+    'pisell-lowcode-drop-sort-add': string;
 };
 export default _default;

package/lib/locales/zh-TW.js

@@ -263,5 +263,7 @@ var zh_TW_default = {
   "pisell-lowcode-app-version-control-promote-version-describe": "發布版本後，該版本將無法再進行修改",
   "pisell-lowcode-app-version-control-promote-version-ok": "發布",
   "pisell-lowcode-app-version-control-promote-version-cancel": "取消",
-  "pisell-lowcode-app-version-control-version-exists": "版本已存在"
+  "pisell-lowcode-app-version-control-version-exists": "版本已存在",
+  // 拖拽排序组件
+  "pisell-lowcode-drop-sort-add": "添加"
 };

package/lowcode/pisell-drop-sort/meta.ts

@@ -0,0 +1,344 @@
+import {
+  IPublicTypeComponentMetadata,
+  IPublicTypeSnippet,
+} from '@alilc/lowcode-types';
+
+const PisellDropSortMeta: IPublicTypeComponentMetadata = {
+  componentName: 'PisellDropSort',
+  title: '拖拽排序',
+  docUrl: '',
+  screenshot: '',
+  devMode: 'proCode',
+  npm: {
+    package: '@pisell/materials',
+    version: '1.0.3',
+    exportName: 'PisellDropSort',
+    main: 'src/index.tsx',
+    destructuring: true,
+    subName: '',
+  },
+  props: [
+    {
+      name: 'value',
+      propType: 'object',
+    },
+    {
+      name: 'allowDrag',
+      propType: 'bool',
+      description: '允许拖拽',
+      defaultValue: true,
+    },
+    {
+      name: 'allowDelete',
+      propType: 'bool',
+      description: '允许删除',
+      defaultValue: true,
+    },
+    {
+      name: 'allowAddChild',
+      propType: 'bool',
+      description: '允许添加子节点',
+      defaultValue: true,
+    },
+    {
+      name: 'allowAddRoot',
+      propType: 'bool',
+      description: '允许添加根节点',
+      defaultValue: true,
+    },
+    {
+      name: 'disabled',
+      propType: 'bool',
+      description: '是否禁用',
+      defaultValue: false,
+    },
+    {
+      name: 'spacing',
+      propType: 'number',
+      description: '间距',
+      defaultValue: 8,
+    },
+    {
+      name: 'maxLevel',
+      propType: 'number',
+      description: '最大层级数',
+      defaultValue: 3,
+    },
+    {
+      name: 'showBorder',
+      propType: 'bool',
+      description: '显示边框',
+      defaultValue: true,
+    },
+    {
+      name: 'className',
+      propType: 'string',
+      description: '类名',
+    },
+    {
+      name: 'style',
+      propType: 'object',
+      description: '样式',
+    },
+    {
+      name: 'onDragEnd',
+      propType: 'func',
+      description: '拖拽完成回调',
+    },
+    {
+      name: 'onDelete',
+      propType: 'func',
+      description: '删除节点回调',
+    },
+    {
+      name: 'onAdd',
+      propType: 'func',
+      description: '添加节点回调',
+    },
+    {
+      name: 'renderItem',
+      propType: {
+        type: 'func',
+      },
+      setter: [
+        {
+          componentName: 'SlotSetter',
+          title: '渲染函数插槽',
+          initialValue: {
+            type: 'JSSlot',
+            params: ['option'],
+          },
+        },
+        {
+          componentName: 'FunctionSetter',
+          props: {
+            template:
+              'renderItem(item,${extParams}){\n// 自定义渲染\nreturn `item`;\n}',
+          },
+        },
+        'VariableSetter',
+      ],
+    },
+    {
+      name: 'leftContent',
+      propType: {
+        type: 'func',
+      },
+      description: '左侧自定义内容',
+    },
+  ],
+  configure: {
+    props: [
+      {
+        name: 'value',
+        setter: 'JsonSetter',
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Data source',
+            'zh-CN': '数据源',
+          },
+        },
+      },
+      {
+        name: 'allowDrag',
+        setter: 'BoolSetter',
+        defaultValue: true,
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Allow drag',
+            'zh-CN': '允许拖拽',
+          },
+        },
+      },
+      {
+        name: 'allowDelete',
+        setter: 'BoolSetter',
+        defaultValue: true,
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Allow delete',
+            'zh-CN': '允许删除',
+          },
+        },
+      },
+      {
+        name: 'allowAddChild',
+        setter: 'BoolSetter',
+        defaultValue: true,
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Allow add child',
+            'zh-CN': '允许添加子节点',
+          },
+        },
+      },
+      {
+        name: 'allowAddRoot',
+        setter: 'BoolSetter',
+        defaultValue: true,
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Allow add root',
+            'zh-CN': '允许添加根节点',
+          },
+        },
+      },
+      {
+        name: 'disabled',
+        setter: 'BoolSetter',
+        defaultValue: false,
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Disabled',
+            'zh-CN': '是否禁用',
+          },
+        },
+      },
+      {
+        name: 'spacing',
+        setter: 'NumberSetter',
+        defaultValue: 8,
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Spacing',
+            'zh-CN': '间距',
+          },
+        },
+      },
+      {
+        name: 'maxLevel',
+        setter: 'NumberSetter',
+        defaultValue: 3,
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Max level',
+            'zh-CN': '最大层级数',
+          },
+        },
+      },
+      {
+        name: 'showBorder',
+        setter: 'BoolSetter',
+        defaultValue: true,
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Show border',
+            'zh-CN': '显示边框',
+          },
+        },
+      },
+      {
+        name: 'renderItem',
+        title: { label: '自定义渲染', tip: '自定义渲染选项内容' },
+        setter: [
+          {
+            componentName: 'SlotSetter',
+            title: '渲染函数插槽',
+            initialValue: {
+              type: 'JSSlot',
+              params: ['item'],
+            },
+          },
+          {
+            componentName: 'FunctionSetter',
+            props: {
+              template:
+                'renderItem(item,${extParams}){\n// 自定义渲染\nreturn `item`;\n}',
+            },
+          },
+          'VariableSetter',
+        ],
+      },
+      {
+        name: 'leftContent',
+        title: { label: '左侧自定义内容', tip: '左侧自定义内容' },
+        setter: {
+          componentName: 'SlotSetter',
+          title: '左侧自定义内容',
+          initialValue: {
+            type: 'JSSlot',
+          },
+        },
+      },
+    ],
+    component: {
+      isContainer: true,
+    },
+    supports: {
+      style: true,
+      className: true,
+      events: [
+        {
+          name: 'onChange',
+          template: "onChange(item,${extParams}){\n// 节点变化回调\nconsole.log('onChange',item);}",
+        },
+        {
+          name: 'onDelete',
+          template: "onDelete(item,${extParams}){\n// 删除节点回调\nconsole.log('onDelete',item);}",
+        },
+        {
+          name: 'onAdd',
+          template: "onAdd(item,${extParams}){\n// 添加节点回调\nconsole.log('onAdd',item);}",
+        },
+        {
+          name: 'onDragEnd',
+          template: "onDragEnd(item,${extParams}){\n// 拖拽完成回调\nconsole.log('onDragEnd',item);}",
+        },
+        {
+          name: 'onAddRoot',
+          template: "onAddRoot(item,${extParams}){\n// 添加根节点回调\nconsole.log('onAddRoot',item);}",
+        }
+      ],
+    },
+  },
+};
+
+const snippets: IPublicTypeSnippet[] = [
+  {
+    title: '拖拽排序',
+    screenshot: '',
+    schema: {
+      title: "拖拽排序",
+      componentName: 'PisellDropSort',
+      props: {
+        renderItem: {
+          type: 'JSSlot',
+          params: ['item'],
+        },
+        leftContent: {
+          type: 'JSSlot',
+        },
+        value: [
+          {
+            id: '1',
+            title: '节点1',
+            children: [
+              {
+                id: '1-1',
+                title: '节点1-1',
+              },
+            ],
+          },
+          {
+            id: '2',
+            title: '节点2',
+          },
+        ],
+      },
+    },
+  },
+];
+
+export default {
+  ...PisellDropSortMeta,
+  snippets,
+};