@steedos-widgets/sortable 1.3.4-beta.1 → 1.3.4-beta.11

package/dist/utilities/createRange.d.ts

@@ -0,0 +1 @@
+export declare function createRange<T = number>(length: number, initializer?: (index: number) => any): T[];

package/dist/utilities/index.d.ts

@@ -0,0 +1 @@
+export { createRange } from './createRange';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@steedos-widgets/sortable",
-  "version": "1.3.4-beta.1",
+  "version": "1.3.4-beta.11",
   "main": "dist/sortable.cjs.js",
   "module": "dist/sortable.esm.js",
   "unpkg": "dist/sortable.umd.js",
@@ -8,7 +8,7 @@
   "license": "MIT",
   "scripts": {
     "prebuild": "rimraf dist",
-    "build.disabled": "yarn build:rollup",
+    "build": "yarn build:rollup",
     "build:rollup": "rollup -c rollup.config.ts",
     "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
   },
@@ -45,7 +45,7 @@
   "dependencies": {
     "@dnd-kit/core": "^6.0.5",
     "@dnd-kit/sortable": "^7.0.1",
-    "@steedos-widgets/amis-lib": "1.3.4-beta.1"
+    "@steedos-widgets/amis-lib": "1.3.4-beta.11"
   },
-  "gitHead": "9bdc96bf72620115fd444993bdd6eb842a25b640"
+  "gitHead": "6ee9091519a18096f602769eeccde7dae10d742b"
 }

package/src/components/MultipleContainers.tsx

@@ -58,12 +58,14 @@ function DroppableContainer({
   id,
   items,
   style,
+  className,
   ...props
 }: ContainerProps & {
   disabled?: boolean;
   id: UniqueIdentifier;
   items: UniqueIdentifier[];
   style?: React.CSSProperties;
+  className: string
 }) {
   const {
     active,
@@ -96,6 +98,7 @@ function DroppableContainer({
         transform: CSS.Translate.toString(transform),
         opacity: isDragging ? 0.5 : undefined,
       }}
+      className={className}
       hover={isOverContainer}
       handleProps={{
         ...attributes,
@@ -148,14 +151,19 @@ interface Props {
   addable?: boolean;
   scrollable?: boolean;
   vertical?: boolean;
-  containerSource: [{id:string, label:string}?],
-  itemSource: [{id:string, label:string, color: string, columnSpan: number, body: [any]}?],
+  boardSource: [{id:string, label:string}?],
+  cardSource: [{id:string, label:string, color: string, columnSpan: number, body: [any]}?],
   defaultValue: any,
   onChange: Function,
   data: any,
   dispatchEvent: Function,
   render: Function,
-  itemBody: any
+  cardSchema: any,
+  boardHeader: any,
+  boardFooter: any,
+  wrapperClassName: string,
+  boardClassName: string,
+  cardClassName: string,
 }
 
 export const TRASH_ID = 'void';
@@ -169,7 +177,7 @@ export function MultipleContainers(props) {
     itemCount = 3,
     cancelDrop,
     columns = 1,
-    handle = false,
+    handle = true,
     containerStyle,
     coordinateGetter = multipleContainersCoordinateGetter,
     getItemStyles = () => ({}),
@@ -182,18 +190,26 @@ export function MultipleContainers(props) {
     trashable = false,
     vertical = false,
     scrollable,
-    containerSource = [],
-    itemSource = [],
+    boardSource = [],
+    cardSource = [],
     defaultValue,
     onChange: amisOnChange,
     data: amisData,
     dispatchEvent: amisDispatchEvent,
     render: amisRender,
-    itemBody: amisItemBody = [{
+    cardSchema = [{
       "type": "tpl",
       "tpl": "${label}",
       "inline": false,
     }],
+    boardHeader = [{
+      "type": "tpl",
+      "tpl": "${label}",
+    }],
+    boardFooter = [],
+    wrapperClassName = "gap-2",
+    boardClassName = "border rounded",
+    cardClassName = "",
   }: Props = props
 
   defaultValue && delete(defaultValue.$$id);
@@ -469,7 +485,7 @@ export function MultipleContainers(props) {
               ),
               [newContainerId]: [active.id],
             }));
-            console.log('拖动结束，更新form value')
+            // console.log('拖动结束，更新form value')
             handleChange()
             setActiveId(null);
           });
@@ -496,7 +512,7 @@ export function MultipleContainers(props) {
 
         setActiveId(null);
 
-        console.log('拖动结束2，更新form value')
+        // console.log('拖动结束2，更新form value')
         handleChange()
       }}
       cancelDrop={cancelDrop}
@@ -510,6 +526,7 @@ export function MultipleContainers(props) {
           gridAutoFlow: vertical ? 'row' : 'column',
           width: vertical? '100%': 'auto'
         }}
+        className={wrapperClassName}
       >
         <SortableContext
           items={[...containers, PLACEHOLDER_ID]}
@@ -520,7 +537,7 @@ export function MultipleContainers(props) {
           }
         >
           {containers.map((containerId) => {
-            const container = cloneDeep(keyBy(containerSource, 'id')[containerId]) || {id: containerId, label: 'Container ' + containerId}
+            const container = cloneDeep(keyBy(boardSource, 'id')[containerId]) || {id: containerId, label: 'Container ' + containerId}
             return (
             <DroppableContainer
               key={containerId}
@@ -530,20 +547,25 @@ export function MultipleContainers(props) {
               items={items[containerId]}
               scrollable={scrollable}
               style={containerStyle}
+              className={boardClassName}
               unstyled={minimal}
-              onRemove={() => handleRemove(containerId)}
+              // onRemove={() => handleRemove(containerId)}
               {...container}
+              label={amisRender? amisRender('body', boardHeader, {data: {...container}}) : (
+                <span>{container.label}</span>
+              )}
+              footer={amisRender? amisRender('body', boardFooter, {data: {...container}}) : (<></>)}
             >
               <SortableContext 
                 items={items[containerId]} 
                 strategy={strategy}
                 >
                 {items[containerId].map((value, index) => {
-                  const item = cloneDeep(keyBy(itemSource, 'id')[value]) || {id: value, label: '' + value, columnSpan:1, body: amisItemBody}
+                  const item = cloneDeep(keyBy(cardSource, 'id')[value]) || {id: value, label: '' + value, columnSpan:1, body: cardSchema}
                   if (item.columnSpan && item.columnSpan > columns)
                     item.columnSpan = columns
                   if (!item.body) 
-                    item.body = amisItemBody
+                    item.body = cardSchema
                   return (
                     <SortableItem
                       disabled={isSortingContainer}
@@ -558,6 +580,7 @@ export function MultipleContainers(props) {
                       renderItem={renderItem}
                       containerId={containerId}
                       getIndex={getIndex}
+                      className={cardClassName}
                       {...item}
                     />
                   );
@@ -596,12 +619,12 @@ export function MultipleContainers(props) {
   );
 
   function renderSortableItemDragOverlay(id: UniqueIdentifier) {
-    const item = cloneDeep(keyBy(itemSource, 'id')[id]) || {id: id, label: '' + id, columnSpan:1}
+    const item = cloneDeep(keyBy(cardSource, 'id')[id]) || {id: id, label: '' + id, columnSpan:1}
     if (item.columnSpan && item.columnSpan > columns)
       item.columnSpan = columns
     return (
       <Item
-        value={amisRender? amisRender('body', amisItemBody, {data: {...item}}) : (
+        value={amisRender? amisRender('body', cardSchema, {data: {...item}}) : (
           <span>{item.label}</span>
         )}
         handle={handle}
@@ -622,36 +645,46 @@ export function MultipleContainers(props) {
     );
   }
 
-  function renderContainerDragOverlay(containerId: UniqueIdentifier) {
+  function renderContainerDragOverlay(containerId: UniqueIdentifier) {            
+    const container = cloneDeep(keyBy(boardSource, 'id')[containerId]) || {id: containerId, label: 'Container ' + containerId}
+
     return (
       <Container
-        label={`Column ${containerId}`}
+        label={amisRender? amisRender('body', boardHeader, {data: {...container}}) : (
+          <span>{container.label}</span>
+        )}
         columns={columns}
         style={{
           height: '100%',
         }}
-        shadow
+        className={boardClassName}
         unstyled={false}
       >
-        {items[containerId].map((item, index) => (
+        {items[containerId].map((id, index) => {
+          const item = cloneDeep(keyBy(cardSource, 'id')[id]) || {id: id, label: '' + id, columnSpan:1}
+          return (
           <Item
-            key={item}
-            value={item}
+            key={id}
             handle={handle}
             style={getItemStyles({
               containerId,
               overIndex: -1,
-              index: getIndex(item),
-              value: item,
+              index: getIndex(id),
+              value: id,
               isDragging: false,
               isSorting: false,
               isDragOverlay: false,
             })}
-            color={getColor(item)}
-            wrapperStyle={wrapperStyle({ index })}
+            color={getColor(id)}
+            wrapperStyle={wrapperStyle({ id })}
             renderItem={renderItem}
+            className={cardClassName}
+            value={amisRender? amisRender('body', cardSchema, {data: {...item}}) : (
+              <span>{item.label}</span>
+            )}
           />
-        ))}
+          )}
+        )}
       </Container>
     );
   }
@@ -682,7 +715,7 @@ export function MultipleContainers(props) {
   }
 
   function getColor(id: UniqueIdentifier) {
-    const item  = cloneDeep(keyBy(itemSource, 'id')[id])
+    const item  = cloneDeep(keyBy(cardSource, 'id')[id])
     return item && item.color? item.color : undefined
   }
 
@@ -698,6 +731,7 @@ export function MultipleContainers(props) {
     getIndex,
     value,
     wrapperStyle,
+    className,
     ...props
   }: SortableItemProps) {
     const {
@@ -740,6 +774,7 @@ export function MultipleContainers(props) {
         fadeIn={mountedWhileDragging}
         listeners={listeners}
         renderItem={renderItem}
+        className={className}
         {...props}
       />
     );
@@ -783,6 +818,7 @@ interface SortableItemProps {
   handle: boolean;
   value: any;
   disabled?: boolean;
+  className: string;
   style(args: any): React.CSSProperties;
   getIndex(id: UniqueIdentifier): number;
   renderItem(): React.ReactElement;

package/src/components/components/Container/Container.module.css

@@ -2,25 +2,25 @@
   display: flex;
   flex-direction: column;
   grid-auto-rows: max-content;
-  overflow: hidden;
+  /* overflow: hidden; */
   box-sizing: border-box;
   appearance: none;
   outline: none;
   min-width: 350px;
-  margin: 10px;
-  border-radius: 5px;
-  min-height: 200px;
+  /* margin: 10px; */
+  /* border-radius: 5px; */
+  min-height: 100px;
   transition: background-color 350ms ease;
-  background-color: rgba(246, 246, 246, 1);
+  /* background-color: rgba(246, 246, 246, 1);
   border: 1px solid rgba(0, 0, 0, 0.05);
-  font-size: 1em;
+  font-size: 1em; */
 
   ul {
     display: grid;
     grid-gap: 10px;
     grid-template-columns: repeat(var(--columns, 1), 1fr);
     list-style: none;
-    padding: 10px;
+    padding: 10px 0;
     margin: 0;
   }
 
@@ -50,8 +50,8 @@
 
   &.unstyled {
     overflow: visible;
-    background-color: transparent !important;
-    border: none !important;
+    /* background-color: transparent !important;
+    border: none !important; */
   }
 
   &.horizontal {
@@ -63,7 +63,7 @@
   }
 
   &.shadow {
-    box-shadow: 0 1px 10px 0 rgba(34, 33, 81, 0.1);
+    /* box-shadow: 0 1px 10px 0 rgba(34, 33, 81, 0.1); */
   }
 
   &:focus-visible {
@@ -74,14 +74,15 @@
 
 .Header {
   display: flex;
-  padding: 5px 20px;
-  padding-right: 8px;
+  /* padding: 5px 20px;
+  padding-right: 8px; */
   align-items: center;
   justify-content: space-between;
-  background-color: #fff;
-  border-top-left-radius: 5px;
-  border-top-right-radius: 5px;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+  position: relative;
+  /* background-color: #fff; */
+  /* border-top-left-radius: 5px;
+  border-top-right-radius: 5px; */
+  /* border-bottom: 1px solid rgba(0, 0, 0, 0.08); */
 
   &:hover {
     .Actions > * {
@@ -92,6 +93,8 @@
 
 .Actions {
   display: flex;
+  position: absolute;
+  right: 6px;
 
   > *:first-child:not(:last-child) {
     opacity: 0;

package/src/components/components/Container/Container.tsx

@@ -11,6 +11,7 @@ export interface Props {
   children: React.ReactNode;
   columns?: number;
   label?: string;
+  footer?: any;
   style?: React.CSSProperties;
   horizontal?: boolean;
   hover?: boolean;
@@ -19,6 +20,7 @@ export interface Props {
   shadow?: boolean;
   placeholder?: boolean;
   unstyled?: boolean;
+  className: string;
   onClick?(): void;
   onRemove?(): void;
 }
@@ -34,11 +36,13 @@ export const Container = forwardRef<HTMLDivElement, Props>(
       onClick,
       onRemove,
       label,
+      footer,
       placeholder,
       style,
       scrollable,
       shadow,
       unstyled,
+      className,
       ...props
     }: Props,
     ref
@@ -62,7 +66,8 @@ export const Container = forwardRef<HTMLDivElement, Props>(
           hover && styles.hover,
           placeholder && styles.placeholder,
           scrollable && styles.scrollable,
-          shadow && styles.shadow
+          shadow && styles.shadow,
+          className
         )}
         onClick={onClick}
         tabIndex={onClick ? 0 : undefined}
@@ -77,6 +82,7 @@ export const Container = forwardRef<HTMLDivElement, Props>(
           </div>
         ) : null}
         {placeholder ? children : <ul>{children}</ul>}
+        {footer? footer : <></>}
       </Component>
     );
   }

package/src/components/components/Grid/Grid.module.css

@@ -19,7 +19,7 @@
       #ddd var(--grid-size)
     );
   background-size: var(--grid-size) var(--grid-size);
-  z-index: -1;
+  /* z-index: -1; */
   pointer-events: none;
 }
 

package/src/components/components/Item/Item.module.css

@@ -55,21 +55,21 @@ $focused-outline-color: #4c9ffe;
   display: flex;
   flex-grow: 1;
   align-items: center;
-  padding: 8px 10px;
-  background-color: $background-color;
-  box-shadow: $box-shadow;
-  outline: none;
-  border-radius: calc(4px / var(--scale-x, 1));
-  box-sizing: border-box;
+  /* padding: 8px 10px; */
+  /* background-color: $background-color; */
+  /* box-shadow: $box-shadow; */
+  /* outline: none; */
+  /* border-radius: calc(4px / var(--scale-x, 1)); */
+  /* box-sizing: border-box; */
   list-style: none;
   transform-origin: 50% 50%;
 
   -webkit-tap-highlight-color: transparent;
 
-  color: $text-color;
-  font-weight: $font-weight;
-  font-size: 1rem;
-  white-space: nowrap;
+  /* color: $text-color; */
+  /* font-weight: $font-weight; */
+  /* font-size: 1rem; */
+  /* white-space: nowrap; */
 
   transform: scale(var(--scale, 1));
   transition: box-shadow 200ms cubic-bezier(0.18, 0.67, 0.6, 1.22);
@@ -85,7 +85,7 @@ $focused-outline-color: #4c9ffe;
 
   &.dragging:not(.dragOverlay) {
     opacity: var(--dragging-opacity, 0.5);
-    z-index: 0;
+    /* z-index: -1; */
 
     &:focus {
       box-shadow: $box-shadow;
@@ -110,7 +110,7 @@ $focused-outline-color: #4c9ffe;
     opacity: 1;
   }
 
-  &.color:before {
+  /* &.color:before {
     content: '';
     position: absolute;
     top: 50%;
@@ -122,7 +122,7 @@ $focused-outline-color: #4c9ffe;
     border-top-left-radius: 3px;
     border-bottom-left-radius: 3px;
     background-color: var(--color);
-  }
+  } */
 
   &:hover {
     .Remove {
@@ -136,10 +136,12 @@ $focused-outline-color: #4c9ffe;
 }
 
 .Actions {
-  display: flex;
-  align-self: flex-start;
-  margin-top: -12px;
-  margin-left: auto;
-  margin-bottom: -15px;
-  margin-right: -10px;
+  /* display: flex;
+  align-self: flex-start; */
+  /* margin-top: -12px; */
+  /* margin-left: auto; */
+  /* margin-bottom: -15px;
+  margin-right: -10px; */
+  position:absolute;
+  right: 6px;
 }

package/src/components/components/Item/Item.tsx

@@ -25,6 +25,7 @@ export interface Props {
   transition?: string | null;
   wrapperStyle?: React.CSSProperties;
   value: React.ReactNode;
+  className: string;
   onRemove?(): void;
   renderItem?(args: {
     dragOverlay: boolean;
@@ -64,6 +65,7 @@ export const Item = React.memo(
         transform,
         value,
         wrapperStyle,
+        className,
         ...props
       },
       ref
@@ -100,7 +102,8 @@ export const Item = React.memo(
             styles.Wrapper,
             fadeIn && styles.fadeIn,
             sorting && styles.sorting,
-            dragOverlay && styles.dragOverlay
+            dragOverlay && styles.dragOverlay,
+            className
           )}
           style={
             {

package/src/metas/MultipleContainers.tsx

@@ -1,7 +1,7 @@
 const config: any = {
-    group: "华炎魔方",
+    group: "华炎魔方-原子组件",
     componentName: "MultipleContainers",
-    title: "容器排序",
+    title: "看板",
     docUrl: "",
     screenshot: "",
     npm: {
@@ -25,7 +25,7 @@ const config: any = {
     engines: ["amis"],
     // settings for amis.
     amis: {
-      name: 'sortable-multiple-containers',
+      name: 'steedos-board',
       icon: "fa-fw fa fa-list-alt"
     }
   };
@@ -73,7 +73,7 @@ const config: any = {
               "B2"
             ]
           },
-          "containerSource": [
+          "boardSource": [
             {
               "id": "A",
               "label": "Board A"
@@ -83,7 +83,54 @@ const config: any = {
               "label": "Board B"
             }
           ],
-          "itemSource": [
+          "boardClassName": "bg-gray-50 p-2 border rounded shadow",
+          "boardHeader": {
+            "type": "tpl",
+            "tpl": "Board ${label}"
+          },
+          "boardFooter": {
+            "type": "tpl",
+            "tpl": "Board ${label} Footer"
+          },
+          "cardClassName": "bg-white border w-full p-2 rounded shadow",
+          "cardSchema": {
+            "type": "card",
+            "header": {
+              "className": "items-center",
+              "title": "${label}",
+            },
+            "toolbar": [
+              {
+                "type": "dropdown-button",
+                "level": "link",
+                "icon": "fa fa-ellipsis-h",
+                "className": "pr-1 flex",
+                "hideCaret": true,
+                "buttons": [
+                  {
+                    "type": "button",
+                    "label": "编辑",
+                    "actionType": "dialog",
+                    "dialog": {
+                      "title": "编辑",
+                      "body": "你正在编辑该卡片"
+                    }
+                  },
+                  {
+                    "type": "button",
+                    "label": "删除",
+                    "actionType": "dialog",
+                    "dialog": {
+                      "title": "提示",
+                      "body": "你删掉了该卡片"
+                    }
+                  }
+                ]
+              }
+            ],
+            "className": "mb-0"
+          },
+          "cardSource": [
             {
               "id": "A1",
               "label": "Item A1",