@next-bricks/presentational 0.5.1 → 0.6.1

package/dist/types.json

@@ -199,6 +199,301 @@
       }
     ]
   },
+  "eo-card-item": {
+    "properties": [
+      {
+        "name": "hasHeader",
+        "annotation": {
+          "type": "keyword",
+          "value": "boolean"
+        }
+      },
+      {
+        "name": "cardTitle",
+        "annotation": {
+          "type": "keyword",
+          "value": "string"
+        }
+      },
+      {
+        "name": "description",
+        "annotation": {
+          "type": "keyword",
+          "value": "string"
+        }
+      },
+      {
+        "name": "auxiliaryText",
+        "annotation": {
+          "type": "keyword",
+          "value": "string"
+        }
+      },
+      {
+        "name": "avatar",
+        "annotation": {
+          "type": "union",
+          "types": [
+            {
+              "type": "reference",
+              "typeName": {
+                "type": "identifier",
+                "name": "IconAvatar"
+              }
+            },
+            {
+              "type": "reference",
+              "typeName": {
+                "type": "identifier",
+                "name": "ImgAvatar"
+              }
+            }
+          ]
+        }
+      },
+      {
+        "name": "href",
+        "annotation": {
+          "type": "indexedAccess",
+          "objectType": {
+            "type": "reference",
+            "typeName": {
+              "type": "identifier",
+              "name": "LinkProps"
+            }
+          },
+          "indexType": {
+            "type": "jsLiteral",
+            "value": "href"
+          }
+        }
+      },
+      {
+        "name": "url",
+        "annotation": {
+          "type": "indexedAccess",
+          "objectType": {
+            "type": "reference",
+            "typeName": {
+              "type": "identifier",
+              "name": "LinkProps"
+            }
+          },
+          "indexType": {
+            "type": "jsLiteral",
+            "value": "url"
+          }
+        }
+      },
+      {
+        "name": "target",
+        "annotation": {
+          "type": "indexedAccess",
+          "objectType": {
+            "type": "reference",
+            "typeName": {
+              "type": "identifier",
+              "name": "LinkProps"
+            }
+          },
+          "indexType": {
+            "type": "jsLiteral",
+            "value": "target"
+          }
+        }
+      },
+      {
+        "name": "actions",
+        "annotation": {
+          "type": "array",
+          "elementType": {
+            "type": "reference",
+            "typeName": {
+              "type": "identifier",
+              "name": "ActionType"
+            }
+          }
+        }
+      },
+      {
+        "name": "hasExpandedArea1",
+        "annotation": {
+          "type": "keyword",
+          "value": "boolean"
+        }
+      },
+      {
+        "name": "hasExpandedArea2",
+        "annotation": {
+          "type": "keyword",
+          "value": "boolean"
+        }
+      }
+    ],
+    "events": [],
+    "methods": [],
+    "types": [
+      {
+        "type": "interface",
+        "name": "IconAvatar",
+        "body": [
+          {
+            "type": "propertySignature",
+            "key": {
+              "type": "identifier",
+              "name": "icon"
+            },
+            "annotation": {
+              "type": "reference",
+              "typeName": {
+                "type": "identifier",
+                "name": "GeneralIconProps"
+              }
+            },
+            "computed": false
+          },
+          {
+            "type": "propertySignature",
+            "key": {
+              "type": "identifier",
+              "name": "color"
+            },
+            "annotation": {
+              "type": "keyword",
+              "value": "string"
+            },
+            "optional": true,
+            "computed": false
+          },
+          {
+            "type": "propertySignature",
+            "key": {
+              "type": "identifier",
+              "name": "size"
+            },
+            "annotation": {
+              "type": "keyword",
+              "value": "number"
+            },
+            "optional": true,
+            "computed": false
+          },
+          {
+            "type": "propertySignature",
+            "key": {
+              "type": "identifier",
+              "name": "shape"
+            },
+            "annotation": {
+              "type": "union",
+              "types": [
+                {
+                  "type": "jsLiteral",
+                  "value": "circle"
+                },
+                {
+                  "type": "jsLiteral",
+                  "value": "square"
+                },
+                {
+                  "type": "jsLiteral",
+                  "value": "round-square"
+                }
+              ]
+            },
+            "optional": true,
+            "computed": false
+          },
+          {
+            "type": "propertySignature",
+            "key": {
+              "type": "identifier",
+              "name": "bgColor"
+            },
+            "annotation": {
+              "type": "keyword",
+              "value": "string"
+            },
+            "optional": true,
+            "computed": false
+          }
+        ]
+      },
+      {
+        "type": "interface",
+        "name": "ImgAvatar",
+        "body": [
+          {
+            "type": "propertySignature",
+            "key": {
+              "type": "identifier",
+              "name": "imgSrc"
+            },
+            "annotation": {
+              "type": "keyword",
+              "value": "string"
+            },
+            "computed": false
+          },
+          {
+            "type": "propertySignature",
+            "key": {
+              "type": "identifier",
+              "name": "imgStyle"
+            },
+            "annotation": {
+              "type": "reference",
+              "typeName": {
+                "type": "identifier",
+                "name": "CSSProperties"
+              }
+            },
+            "optional": true,
+            "computed": false
+          },
+          {
+            "type": "propertySignature",
+            "key": {
+              "type": "identifier",
+              "name": "shape"
+            },
+            "annotation": {
+              "type": "union",
+              "types": [
+                {
+                  "type": "jsLiteral",
+                  "value": "circle"
+                },
+                {
+                  "type": "jsLiteral",
+                  "value": "square"
+                },
+                {
+                  "type": "jsLiteral",
+                  "value": "round-square"
+                }
+              ]
+            },
+            "optional": true,
+            "computed": false
+          },
+          {
+            "type": "propertySignature",
+            "key": {
+              "type": "identifier",
+              "name": "bgColor"
+            },
+            "annotation": {
+              "type": "keyword",
+              "value": "string"
+            },
+            "optional": true,
+            "computed": false
+          }
+        ]
+      }
+    ]
+  },
   "eo-alert": {
     "properties": [
       {

package/dist-types/bootstrap.d.ts

@@ -2,3 +2,4 @@ import "./descriptions/index.js";
 import "./general-alert/index.js";
 import "./code-display/index.js";
 import "./pagination/index.js";
+import "./card-item/index.js";

package/dist-types/card-item/index.d.ts

@@ -0,0 +1,91 @@
+import { CSSProperties, Ref } from "react";
+import { ReactNextElement } from "@next-core/react-element";
+import type { LinkProps } from "@next-bricks/basic/link";
+import type { GeneralIconProps } from "@next-bricks/icons/general-icon";
+import type { ActionType } from "@next-bricks/basic/mini-actions";
+import "@next-core/theme";
+interface IconAvatar {
+    icon: GeneralIconProps;
+    color?: string;
+    size?: number;
+    shape?: "circle" | "square" | "round-square";
+    bgColor?: string;
+}
+interface ImgAvatar {
+    imgSrc: string;
+    imgStyle?: CSSProperties;
+    shape?: "circle" | "square" | "round-square";
+    bgColor?: string;
+}
+export interface EoCardItemProps {
+    hasHeader?: boolean;
+    cardTitle: string;
+    description?: string;
+    auxiliaryText?: string;
+    avatar?: IconAvatar | ImgAvatar;
+    href?: LinkProps["href"];
+    url?: LinkProps["url"];
+    target?: LinkProps["target"];
+    actions?: ActionType[];
+    hasExpandedArea1?: boolean;
+    hasExpandedArea2?: boolean;
+}
+/**
+ * 信息类卡片 —— 通用卡片
+ * @slot expanded-area-1 - 扩展区域 1，通常放置标签信息
+ * @slot expanded-area-2 - 扩展区域 2，通常放置操作和其他属性信息（图标/头像/小字描述/统计信息）
+ */
+export declare class EoCardItem extends ReactNextElement implements EoCardItemProps {
+    #private;
+    /**
+     * 是否有顶部
+     */
+    accessor hasHeader: boolean | undefined;
+    /**
+     * 卡片标题
+     */
+    accessor cardTitle: string;
+    /**
+     * 描述信息
+     */
+    accessor description: string | undefined;
+    /**
+     * 顶部辅助文字
+     */
+    accessor auxiliaryText: string | undefined;
+    /**
+     * 图标
+     */
+    accessor avatar: IconAvatar | ImgAvatar | undefined;
+    /**
+     * 设置 `href` 时将使用原生 `<a>` 标签，通常用于外链的跳转
+     */
+    accessor href: LinkProps["href"] | undefined;
+    /**
+     * 链接地址
+     */
+    accessor url: LinkProps["url"] | undefined;
+    /**
+     * 链接跳转目标
+     */
+    accessor target: LinkProps["target"] | undefined;
+    /**
+     * 操作按钮组
+     */
+    accessor actions: ActionType[] | undefined;
+    /**
+     * 是否有扩展区域 1
+     */
+    accessor hasExpandedArea1: boolean | undefined;
+    /**
+     * 是否有扩展区域 2
+     */
+    accessor hasExpandedArea2: boolean | undefined;
+    render(): JSX.Element;
+}
+interface EoCardItemComponentProps extends EoCardItemProps {
+    callback?: Ref<HTMLDivElement>;
+    onActionClick?: (action: ActionType) => void;
+}
+export declare function EoCardItemComponent(props: EoCardItemComponentProps): JSX.Element;
+export {};

package/dist-types/card-item/index.spec.d.ts

@@ -0,0 +1 @@
+import "./index.jsx";

package/docs/eo-card-item.md

@@ -0,0 +1,177 @@
+信息类卡片 —— 通用卡片
+
+## Examples
+
+### Basic
+
+```yaml preview
+brick: eo-card-item
+properties:
+  style:
+    width: 300px
+  hasHeader: true
+  auxiliaryText: 初级应用
+  cardTitle: 资源监控微应用
+  description: 资源监控微应用相关前后台
+  url: /test
+  target: _blank
+  avatar:
+    icon:
+      lib: easyops
+      category: default
+      icon: monitor
+    color: "#167be0"
+    size: 20
+    bgColor: var(--theme-geekblue-background)
+  actions:
+    - icon:
+        lib: antd
+        theme: outlined
+        icon: star
+      isDropdown: false
+      event: collect
+    - icon:
+        lib: antd
+        icon: copy
+        theme: outlined
+      text: 复制链接
+      isDropdown: true
+      event: copy
+    - icon:
+        lib: antd
+        icon: download
+        theme: outlined
+      text: 下载
+      isDropdown: true
+      disabled: true
+      event: download
+```
+
+### Single Expanded Area
+
+```yaml preview gap
+- brick: eo-card-item
+  properties:
+    style:
+      width: 300px
+    hasHeader: true
+    auxiliaryText: 初级应用
+    cardTitle: 资源监控微应用
+    description: 资源监控微应用相关前后台
+    avatar:
+      icon:
+        lib: easyops
+        category: default
+        icon: monitor
+      color: "#167be0"
+      size: 20
+      bgColor: var(--theme-geekblue-background)
+  slots:
+    expanded-area-1:
+      type: bricks
+      bricks:
+        - brick: eo-tag-list
+          properties:
+            size: small
+            list:
+              - text: IT 资源管理
+                key: IT_resource_management
+                color: gray
+              - text: 资源套餐
+                key: resource_package
+                color: gray
+              - text: 存储设备
+                key: storage_device
+                color: gray
+- brick: eo-card-item
+  properties:
+    style:
+      width: 300px
+    hasHeader: true
+    auxiliaryText: 初级应用
+    cardTitle: 资源监控微应用
+    description: 资源监控微应用相关前后台
+    avatar:
+      icon:
+        lib: easyops
+        category: default
+        icon: monitor
+      color: "#167be0"
+      size: 20
+      bgColor: var(--theme-geekblue-background)
+  slots:
+    expanded-area-2:
+      type: bricks
+      bricks:
+        - brick: eo-flex-layout
+          properties:
+            style:
+              width: 100%
+            justifyContent: space-between
+            alignItems: center
+          children:
+            - brick: span
+              properties:
+                textContent: 张元 更新于 2 小时前
+                style:
+                  color: var(--text-color-secondary)
+            - brick: eo-switch
+              properties:
+                size: small
+```
+
+### Multiple Expanded Area
+
+```yaml preview gap
+- brick: eo-card-item
+  properties:
+    style:
+      width: 300px
+    hasHeader: true
+    auxiliaryText: 初级应用
+    cardTitle: 资源监控微应用
+    description: 资源监控微应用相关前后台
+    avatar:
+      icon:
+        lib: easyops
+        category: default
+        icon: monitor
+      color: "#167be0"
+      size: 20
+      bgColor: var(--theme-geekblue-background)
+  slots:
+    expanded-area-1:
+      type: bricks
+      bricks:
+        - brick: eo-tag-list
+          properties:
+            size: small
+            list:
+              - text: IT 资源管理
+                key: IT_resource_management
+                color: gray
+              - text: 资源套餐
+                key: resource_package
+                color: gray
+              - text: 存储设备
+                key: storage_device
+                color: gray
+    expanded-area-2:
+      type: bricks
+      bricks:
+        - brick: eo-flex-layout
+          properties:
+            style:
+              width: 100%
+            justifyContent: space-between
+            alignItems: center
+          children:
+            - brick: span
+              properties:
+                textContent: 张元 更新于 2 小时前
+                style:
+                  color: var(--text-color-secondary)
+            - brick: eo-switch
+              properties:
+                size: small
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next-bricks/presentational",
-  "version": "0.5.1",
+  "version": "0.6.1",
   "homepage": "https://github.com/easyops-cn/next-bricks/tree/master/bricks/presentational",
   "repository": {
     "type": "git",
@@ -38,5 +38,5 @@
     "@next-core/test-next": "^1.0.7",
     "babel-plugin-prismjs": "^2.1.0"
   },
-  "gitHead": "cf94974ff1cac5d54b1502d8687191302c3808a7"
+  "gitHead": "1d1d029906b29f94be440bc2d5c93db819034443"
 }