@cloudbase/weda-ui 3.25.0 → 3.26.0

package/dist/configs/components/wd-drawer.d.ts

@@ -0,0 +1,144 @@
+import { Static } from '../type-utils';
+import type { Simplify } from 'type-fest';
+declare const data: import("@sinclair/typebox").TObject<{
+    visible: import("@sinclair/typebox").TBoolean;
+    placement: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+    closeType: import("@sinclair/typebox").TArray<import("@sinclair/typebox").TString>;
+    mask: import("@sinclair/typebox").TBoolean;
+    enableHeaderSlot: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
+    enableContentSlot: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
+    enableFooterSlot: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
+    headerSlot: import("@sinclair/typebox").TUnsafe<import("react").ReactNode>;
+    contentSlot: import("@sinclair/typebox").TUnsafe<import("react").ReactNode>;
+    footerSlot: import("@sinclair/typebox").TUnsafe<import("react").ReactNode>;
+}>;
+declare const properties: import("@sinclair/typebox").TObject<{
+    modalState: import("@sinclair/typebox").TUnsafe<string>;
+    openInfo: import("@sinclair/typebox").TUnknown;
+    closeInfo: import("@sinclair/typebox").TUnknown;
+}>;
+export type DataType = Simplify<Static<typeof data>>;
+export type PropsType = Simplify<Static<typeof properties>>;
+declare const config: {
+    readonly $schema: "https://comp-public-replace-1303824488-cos.weda.tencent.com/schema/lcds_component.json";
+    readonly data: import("@sinclair/typebox").TObject<{
+        visible: import("@sinclair/typebox").TBoolean;
+        placement: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+        closeType: import("@sinclair/typebox").TArray<import("@sinclair/typebox").TString>;
+        mask: import("@sinclair/typebox").TBoolean;
+        enableHeaderSlot: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
+        enableContentSlot: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
+        enableFooterSlot: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
+        headerSlot: import("@sinclair/typebox").TUnsafe<import("react").ReactNode>;
+        contentSlot: import("@sinclair/typebox").TUnsafe<import("react").ReactNode>;
+        footerSlot: import("@sinclair/typebox").TUnsafe<import("react").ReactNode>;
+    }>;
+    readonly properties: import("@sinclair/typebox").TObject<{
+        modalState: import("@sinclair/typebox").TUnsafe<string>;
+        openInfo: import("@sinclair/typebox").TUnknown;
+        closeInfo: import("@sinclair/typebox").TUnknown;
+    }>;
+    readonly classes: readonly [{
+        readonly name: "根元素";
+        readonly selector: ".wd-drawer";
+        readonly description: "组件根元素";
+        readonly code: "\n      :scope.wd-drawer  {\n        /* 在这里编写CSS 样式 */\n      }\n    ";
+    }, {
+        readonly name: "PC 端根元素";
+        readonly selector: ".wd-pc-drawer";
+        readonly description: "组件根元素";
+        readonly code: "\n      :scope.wd-pc-drawer  {\n        /* 在这里编写CSS 样式 */\n      }\n    ";
+    }, {
+        readonly name: "H5 端根元素";
+        readonly selector: ".wd-h5-drawer";
+        readonly description: "可以为 H5 端的编写样式";
+        readonly code: "\n      :scope.wd-h5-drawer  {\n        /* 在这里编写CSS 样式 */\n      }\n    ";
+    }, {
+        readonly name: "小程序 端根元素";
+        readonly selector: ".wd-mp-drawer";
+        readonly description: "可以为 小程序 端的编写样式";
+        readonly code: "\n      :scope.wd-mp-drawer  {\n        /* 可以为 小程序 端的编写样式 */\n      }\n    ";
+    }, {
+        readonly name: "抽屉遮罩层样式";
+        readonly selector: ".wd-drawer-mask";
+        readonly description: "可以为遮罩层编写样式";
+        readonly code: "\n      :scope .wd-drawer-mask  {\n        /* 可以为遮罩层编写样式 */\n        background-color: rgba(0, 0, 0, 0.5)\n      }\n    ";
+    }, {
+        readonly name: "抽屉主体容器样式";
+        readonly selector: ".wd-drawer-content-wrapper";
+        readonly description: "可以为主体容器编写样式";
+        readonly code: "\n      :scope .wd-drawer-content-wrapper  {\n        /* 可以为主体容器编写样式 */\n        inset-inline-start: auto;\n        inset-inline-end: 0;\n      }\n    ";
+    }, {
+        readonly name: "抽屉顶部容器样式";
+        readonly selector: ".wd-drawer-header";
+        readonly description: "可以为顶部容器编写样式";
+        readonly code: "\n      :scope .wd-drawer-header  {\n        /* 可以为顶部容器编写样式*/\n        padding: 0;\n      }\n    ";
+    }, {
+        readonly name: "抽屉内容容器样式";
+        readonly selector: ".wd-drawer-body";
+        readonly description: "可以为内容容器编写样式";
+        readonly code: "\n      :scope .wd-drawer-body  {\n        /* 可以为内容容器编写样式 */\n        padding: 0;\n      }\n    ";
+    }, {
+        readonly name: "抽屉底部容器样式";
+        readonly selector: ".wd-drawer-footer";
+        readonly description: "可以为底部容器编写样式";
+        readonly code: "\n      :scope .wd-drawer-footer  {\n        /* 可以为底部容器编写样式 */\n         padding: 0;\n      }\n    ";
+    }];
+    readonly methods: readonly [{
+        readonly name: "open";
+        readonly label: "打开抽屉";
+        readonly params: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TObject<{
+            info: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnknown>;
+        }>>;
+    }, {
+        readonly name: "close";
+        readonly label: "关闭抽屉";
+        readonly params: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TObject<{
+            info: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnknown>;
+        }>>;
+    }];
+    readonly events: readonly [{
+        readonly title: "抽屉打开时";
+        readonly name: "open";
+        readonly detail: import("@sinclair/typebox").TObject<{
+            info: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnknown>;
+        }>;
+    }, {
+        readonly title: "抽屉关闭时";
+        readonly name: "close";
+        readonly detail: import("@sinclair/typebox").TObject<{
+            info: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnknown>;
+        }>;
+    }];
+    readonly meta: {
+        readonly name: "WdDrawer";
+        readonly componentName: "drawer";
+        readonly title: "抽屉";
+        readonly description: "屏幕边缘滑出的浮层面板。";
+        readonly propertyPanelTips: "在小程序中使用时，不建议嵌套在其他容器/组件中，以免抽屉被遮盖";
+        readonly figureIcon: "../figureIcons/WdModal.svg";
+        readonly icon: "../icons/Modal.svg";
+        readonly category: "布局";
+        readonly categoryOrder: 200;
+        readonly componentOrder: 150;
+        readonly visible: readonly ["APP"];
+        readonly docsUrl: "https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/grid/WdModal";
+        readonly templates: readonly [{
+            readonly when: "$attached";
+            readonly to: "headerSlot";
+            readonly body: string;
+        }];
+        readonly inlineStyleForm: {
+            readonly justifyContent: {
+                readonly visible: false;
+            };
+            readonly flexDirection: {
+                readonly visible: false;
+            };
+            readonly alignItems: {
+                readonly visible: false;
+            };
+        };
+    };
+};
+export default config;

package/dist/configs/components/wd-drawer.js

@@ -0,0 +1,358 @@
+import { defineConfig, Type, Tuple } from '../type-utils';
+import { WD_DRAWER_PLACEMENT } from '../../enum';
+// 生成随机id
+const getRandomId = () => Date.now().toString(36);
+/**
+ * 模板内组件绑定对应的event事件
+ * @returns
+ */
+const getEventListener = ({ event = 'tap', // 绑定的event名称
+parentId = '{{$self.id}}', // 绑定的关联组件
+method, // 要绑定关联组件的方法
+info = '', // 关联event的入参
+ }) => {
+    return `
+  [[template.listeners]]
+  id = "${getRandomId()}"
+  eventName = "${event}"
+  type = "platform"
+  [template.listeners.handler]
+  name = "invoke"
+  module = "platform"
+  [template.listeners.handler.params]
+  component = "${parentId}"
+  method = "${method}"
+  [template.listeners.handler.params.params]
+  info = "${info}"
+  `;
+};
+const getHeaderText = (hasContainer = false) => {
+    const container = `[[template]]
+  component = "Container"
+  [template.extra.commonStyle]
+  display = "flex"
+  alignItems = "center"
+  flexDirection = "column"
+  width = "100%"
+  `;
+    const prefix = hasContainer ? 'template.items' : 'template';
+    return `
+  ${hasContainer ? container : ''}
+  [[${prefix}]]
+  component = "WdText"
+  label = "抽屉标题"
+  [${prefix}.attributes]
+  text = "抽屉标题"
+  level = "title-7"
+  [${prefix}.extra.commonStyle.self]
+  fontWeight = "bolder"
+  `;
+};
+// 抽屉顶部插槽模板
+const HEADER_TPL = `
+{{#with $self as |$self|}}
+
+[[directives]]
+":if" = true
+${getHeaderText()}
+[[template]]
+component = "WdIcon"
+label = "关闭按钮"
+[template.attributes]
+name = "td:close"
+${getEventListener({ method: 'close', info: 'icon' })}
+[template.extra.commonStyle.text]
+color = "rgba(0, 0, 0, 0.6)"
+
+{{/with}}
+`;
+const data = Type.Object({
+    visible: Type.Boolean({
+        title: '抽屉默认打开状态',
+        default: true,
+        'x-index': 9,
+        'x-category': '基础属性',
+        'x-helper-text': '设置默认打开状态。在【事件-组件方法】中调用抽屉的打开/关闭方法，可动态控制抽屉开关。[查看指引](https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/grid/WdModal#3-打开关闭抽屉)',
+    }),
+    placement: Type.Optional(Type.String({
+        title: '抽屉方向',
+        'x-category': '基础属性',
+        default: 'right',
+        description: '抽屉方向。可选项：left/right/top/bottom',
+        enum: Tuple(WD_DRAWER_PLACEMENT),
+        'x-index': 15,
+    })),
+    closeType: Type.Array(Type.String(), {
+        title: '关闭方式',
+        default: ['outerClick'],
+        description: '多选模式，outerClick-点击面板外收起面板，esc-点击键盘ESC关闭（仅在PC端生效）',
+        'x-index': 30,
+        'x-category': '高级属性',
+        'x-helper-text': '点击键盘ESC键关闭抽屉仅在PC端生效',
+        'x-component': 'checkbox-group',
+        'x-component-props': {
+            defaultValue: ['outerClick'],
+            options: Tuple([
+                {
+                    label: '点击面板外收起面板',
+                    value: 'outerClick',
+                },
+                {
+                    label: 'ESC',
+                    value: 'esc',
+                },
+            ]),
+        },
+    }),
+    mask: Type.Boolean({
+        title: '展示遮罩',
+        default: true,
+        'x-index': 40,
+        'x-category': '高级属性',
+    }),
+    enableHeaderSlot: Type.Optional(Type.Boolean({
+        title: '顶部插槽',
+        'x-index': 50,
+        'x-runtime-default': true,
+        'x-category': '高级属性',
+    })),
+    enableContentSlot: Type.Optional(Type.Boolean({
+        title: '内容插槽',
+        'x-index': 51,
+        'x-runtime-default': true,
+        'x-category': '高级属性',
+    })),
+    enableFooterSlot: Type.Optional(Type.Boolean({
+        title: '底部插槽',
+        'x-index': 52,
+        'x-runtime-default': false,
+        'x-category': '高级属性',
+    })),
+    headerSlot: Type.Slot({
+        title: '抽屉顶部',
+        description: '抽屉顶部插槽',
+        'x-index': 53,
+        'x-category': '高级属性',
+    }),
+    contentSlot: Type.Slot({
+        title: '抽屉内容',
+        description: '抽屉内容插槽',
+        'x-index': 54,
+        'x-category': '高级属性',
+    }),
+    footerSlot: Type.Slot({
+        title: '底部插槽',
+        description: '抽屉底部插槽',
+        'x-index': 55,
+        'x-category': '高级属性',
+    }),
+});
+const properties = Type.Object({
+    modalState: Type.StringEnum({
+        enum: Tuple([
+            {
+                label: '打开',
+                value: 'open',
+            },
+            {
+                label: '关闭',
+                value: 'close',
+            },
+        ]),
+        title: '抽屉状态',
+    }),
+    openInfo: Type.Unknown({
+        description: '透传信息，在触发抽屉打开时接收的信息，信息来自于调用组件open方法的info',
+    }),
+    closeInfo: Type.Unknown({
+        description: '透传信息，在触发抽屉关闭时接收的信息，信息来自于调用组件close方法的info',
+    }),
+});
+// export default
+const config = defineConfig({
+    $schema: 'https://comp-public-replace-1303824488-cos.weda.tencent.com/schema/lcds_component.json',
+    // 属性定义
+    data,
+    // 只读属性定义
+    properties,
+    // 样式API
+    classes: [
+        {
+            name: '根元素',
+            selector: '.wd-drawer',
+            description: '组件根元素',
+            code: `
+      :scope.wd-drawer  {
+        /* 在这里编写CSS 样式 */
+      }
+    `,
+        },
+        {
+            name: 'PC 端根元素',
+            selector: '.wd-pc-drawer',
+            description: '组件根元素',
+            code: `
+      :scope.wd-pc-drawer  {
+        /* 在这里编写CSS 样式 */
+      }
+    `,
+        },
+        {
+            name: 'H5 端根元素',
+            selector: '.wd-h5-drawer',
+            description: '可以为 H5 端的编写样式',
+            code: `
+      :scope.wd-h5-drawer  {
+        /* 在这里编写CSS 样式 */
+      }
+    `,
+        },
+        {
+            name: '小程序 端根元素',
+            selector: '.wd-mp-drawer',
+            description: '可以为 小程序 端的编写样式',
+            code: `
+      :scope.wd-mp-drawer  {
+        /* 可以为 小程序 端的编写样式 */
+      }
+    `,
+        },
+        {
+            name: '抽屉遮罩层样式',
+            selector: '.wd-drawer-mask',
+            description: '可以为遮罩层编写样式',
+            code: `
+      :scope .wd-drawer-mask  {
+        /* 可以为遮罩层编写样式 */
+        background-color: rgba(0, 0, 0, 0.5)
+      }
+    `,
+        },
+        {
+            name: '抽屉主体容器样式',
+            selector: '.wd-drawer-content-wrapper',
+            description: '可以为主体容器编写样式',
+            code: `
+      :scope .wd-drawer-content-wrapper  {
+        /* 可以为主体容器编写样式 */
+        inset-inline-start: auto;
+        inset-inline-end: 0;
+      }
+    `,
+        },
+        {
+            name: '抽屉顶部容器样式',
+            selector: '.wd-drawer-header',
+            description: '可以为顶部容器编写样式',
+            code: `
+      :scope .wd-drawer-header  {
+        /* 可以为顶部容器编写样式*/
+        padding: 0;
+      }
+    `,
+        },
+        {
+            name: '抽屉内容容器样式',
+            selector: '.wd-drawer-body',
+            description: '可以为内容容器编写样式',
+            code: `
+      :scope .wd-drawer-body  {
+        /* 可以为内容容器编写样式 */
+        padding: 0;
+      }
+    `,
+        },
+        {
+            name: '抽屉底部容器样式',
+            selector: '.wd-drawer-footer',
+            description: '可以为底部容器编写样式',
+            code: `
+      :scope .wd-drawer-footer  {
+        /* 可以为底部容器编写样式 */
+         padding: 0;
+      }
+    `,
+        },
+    ],
+    // 组件方法
+    methods: [
+        {
+            name: 'open',
+            label: '打开抽屉',
+            params: Type.Optional(Type.Object({
+                info: Type.Optional(Type.Unknown({
+                    description: '透传信息，在监听到抽屉打开时会传递该信息',
+                })),
+            })),
+        },
+        {
+            name: 'close',
+            label: '关闭抽屉',
+            params: Type.Optional(Type.Object({
+                info: Type.Optional(Type.Unknown({
+                    description: '透传信息，在监听到抽屉关闭时会传递该信息',
+                })),
+            })),
+        },
+    ],
+    // 组件对外暴露事件
+    events: [
+        {
+            title: '抽屉打开时',
+            name: 'open',
+            detail: Type.Object({
+                info: Type.Optional(Type.Unknown({
+                    description: '透传信息，在触发抽屉打开时接收该信息，信息来自于调用组件open方法的info',
+                })),
+            }),
+        },
+        {
+            title: '抽屉关闭时',
+            name: 'close',
+            detail: Type.Object({
+                info: Type.Optional(Type.Unknown({
+                    description: '透传信息，在触发抽屉关闭时接收该信息，信息来自于调用组件close方法的info',
+                })),
+            }),
+        },
+    ],
+    // 组件元信息
+    meta: {
+        name: 'WdDrawer',
+        // 组件别名，用于生成组件 id，例如 Icon1
+        componentName: 'drawer',
+        title: '抽屉',
+        description: '屏幕边缘滑出的浮层面板。',
+        propertyPanelTips: '在小程序中使用时，不建议嵌套在其他容器/组件中，以免抽屉被遮盖',
+        figureIcon: '../figureIcons/WdModal.svg',
+        icon: '../icons/Modal.svg',
+        category: '布局',
+        categoryOrder: 200,
+        componentOrder: 150,
+        visible: ['APP'],
+        docsUrl: 'https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/grid/WdModal',
+        // 快捷编辑时展示在编辑区的属性
+        // shortcut: {
+        //   props: ['line', 'checkable'],
+        // },
+        templates: [
+            {
+                when: '$attached',
+                to: 'headerSlot',
+                body: HEADER_TPL,
+            },
+        ],
+        inlineStyleForm: {
+            justifyContent: {
+                visible: false,
+            },
+            flexDirection: {
+                visible: false,
+            },
+            alignItems: {
+                visible: false,
+            },
+        },
+    },
+});
+export default config;

package/dist/configs/components/wd-image.js

@@ -5,7 +5,7 @@ const data = Type.Object({
         type: 'string',
         default: 'https://qcloudimg.tencent-cloud.cn/raw/4a29d51b504f12b4933ce4490110b4dc.svg',
         description: '更改需要展示的图片',
-        'x-helper-text': '图片地址支持云存储cloudID或https协议地址',
+        'x-helper-text': '图片地址支持云存储cloudID或https协议地址，[小程序端不支持 http 协议](https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/show/WdImage#%E8%AE%BE%E7%BD%AE-http-%E5%9C%B0%E5%9D%80%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%B8%8D%E5%B1%95%E7%A4%BA)。',
         'x-category': '基础属性',
         'x-index': 1,
         'x-component': 'image',

package/dist/configs/components/wd-modal.js

@@ -51,8 +51,10 @@ const getHeaderText = (hasContainer = false) => {
 // 弹窗顶部插槽模板
 const HEADER_TPL = `
 {{#with $self as |$self|}}
+{{#with $self.attributes.template as |_currentTemplate|}}
+{{#with (helper_utils 'concat' 'default' 'list') as |_template|}}
 
-{{#if (helper_utils '||' (helper_utils '===' $self.attributes.template 'default') (helper_utils '===' $self.attributes.template 'list'))}}
+{{#if (helper_utils 'includes' _template _currentTemplate)}}
 [[directives]]
 ":if" = true
 ${getHeaderText()}
@@ -95,6 +97,8 @@ ${getHeaderText(true)}
 
 {{/if}}
 {{/with}}
+{{/with}}
+{{/with}}
 `;
 // 弹窗按钮区插槽模板
 const FOOTER_TPL = `

package/dist/configs/components/wd-table.d.ts

@@ -296,6 +296,11 @@ declare const config: {
         readonly selector: ".wd-table__box td";
         readonly description: "表格文字样式";
         readonly code: "\n        :scope .wd-table__box td {\n          background-color: lightgray;\n          height: 36px;\n        }\n      ";
+    }, {
+        readonly name: "表格内容文本元素";
+        readonly selector: ".wd-table__box td .wd-text-overflow";
+        readonly description: "表格筛选面板根元素";
+        readonly code: "\n        :scope .wd-table__box td .wd-text-overflow {\n          border: 2px solid gray;\n          border-radius: 10px;\n        }\n      ";
     }, {
         readonly name: "表格主体样式";
         readonly selector: ".wd-table";

package/dist/configs/components/wd-table.js

@@ -1712,6 +1712,17 @@ const config = defineConfig({
           background-color: lightgray;
           height: 36px;
         }
+      `,
+        },
+        {
+            name: '表格内容文本元素',
+            selector: '.wd-table__box td .wd-text-overflow',
+            description: '表格筛选面板根元素',
+            code: `
+        :scope .wd-table__box td .wd-text-overflow {
+          border: 2px solid gray;
+          border-radius: 10px;
+        }
       `,
         },
         {

package/dist/configs/components/wxOpenApi/userInfo.d.ts

@@ -4,7 +4,7 @@ declare const data: import("@sinclair/typebox").TObject<{
     type: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<"primary" | "default" | "warn" | "wechat">>;
     size: import("@sinclair/typebox").TUnsafe<"default" | "mini" | "large">;
     usage: import("@sinclair/typebox").TString;
-    language: import("@sinclair/typebox").TUnsafe<"zh_CN" | "zh_TW" | "en">;
+    language: import("@sinclair/typebox").TUnsafe<"en" | "zh_CN" | "zh_TW">;
 }>;
 export type DataType = Simplify<Static<typeof data>>;
 declare const config: {
@@ -14,7 +14,7 @@ declare const config: {
         type: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<"primary" | "default" | "warn" | "wechat">>;
         size: import("@sinclair/typebox").TUnsafe<"default" | "mini" | "large">;
         usage: import("@sinclair/typebox").TString;
-        language: import("@sinclair/typebox").TUnsafe<"zh_CN" | "zh_TW" | "en">;
+        language: import("@sinclair/typebox").TUnsafe<"en" | "zh_CN" | "zh_TW">;
     }>;
     readonly events: readonly [{
         readonly title: "用户信息授权成功";