@cloudbase/weda-ui 3.5.0 → 3.5.2

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

@@ -0,0 +1,308 @@
+import { defineConfig, Type, Tuple } from '../type-utils';
+// 生成随机id
+const getRandomId = () => `wdModal${Math.floor(Math.random() * 10000)}`;
+/**
+ * 模板内组件绑定对应的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 HEADER_TPL = `
+{{#with $self as |$self|}}
+[[template]]
+component = "WdText"
+label = "弹窗标题"
+  [template.attributes]
+  text = "弹窗标题"
+  ":level" = "$w.wedaContext?.platforms?.includes(\`MOBILEWEB\`)?\`title-6\`:\`body-lg\`"
+  [template.extra.commonStyle.self]
+  fontWeight = "bolder"
+
+[[template]]
+component = "WdIcon"
+label = "关闭按钮"
+  [template.attributes]
+  name = "td:close"
+  ":size" = "$w.wedaContext?.platforms?.includes(\`MOBILEWEB\`)?\`md\`:\`sm\`"
+  ${getEventListener({ method: 'close', info: 'icon' })}
+  [template.extra.commonStyle.text]
+  color = "rgba(0, 0, 0, 0.6)"
+{{/with}}
+`;
+// 弹窗按钮区插槽模板
+const FOOTER_TPL = `
+{{#with $self as |$self|}}
+[[template]]
+component = "WdButton"
+label = "取消按钮"
+  [template.attributes]
+  text = "取消"
+  theme = "secondary"
+  variant = "outline"
+  ${getEventListener({ method: 'close', info: 'cancel' })}
+
+[[template]]
+component = "WdButton"
+label = "确认按钮"
+
+  [template.attributes]
+  text = "确认"
+  ${getEventListener({ method: 'close', info: 'confirm' })}
+
+{{/with}}
+`;
+const data = Type.Object({
+    defaultShow: Type.Boolean({
+        title: '默认打开弹窗',
+        default: true,
+        'x-index': 10,
+        'x-category': '基础属性',
+        'x-helper-text': '设置默认打开状态。在【事件-组件方法】中调用弹窗的打开/关闭方法，可动态控制弹窗开关。[查看指引](https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/grid/WdModal)',
+    }),
+    position: Type.String({
+        title: '移动端弹窗位置',
+        'x-category': '基础属性',
+        default: 'bottom',
+        description: 'bottom-在下方弹出弹窗，center-在页面中间弹出弹窗',
+        enum: Tuple([
+            {
+                label: '底部',
+                value: 'bottom',
+                tooltip: '弹窗显示在窗口底部',
+                src: 'https://cloudcache.tencent-cloud.com/qcloud/ui/static/static_source_business/0f63c89a-131e-4ab2-9c67-f226180ed2b0.svg',
+            },
+            {
+                label: '居中',
+                value: 'center',
+                tooltip: '弹窗显示在窗口中间',
+                src: 'https://cloudcache.tencent-cloud.com/qcloud/ui/static/static_source_business/93734140-6df8-4901-a70e-111423bd5d0e.svg',
+            },
+        ]),
+        'x-platforms': ['MP', 'MOBILEWEB'],
+        'x-index': 20,
+        'x-component': 'data-sources-template-selector',
+        'x-props': {
+            'data-hidebind': true,
+        },
+    }),
+    closeType: Type.Array(Type.String(), {
+        title: '关闭方式',
+        default: ['mask'],
+        description: '多选模式，mask-点击遮罩层关闭，esc-点击键盘ESC关闭（仅在PC端生效）',
+        'x-index': 30,
+        'x-category': '高级属性',
+        'x-helper-text': '点击键盘ESC键关闭弹窗仅在PC端生效',
+        'x-component': 'checkbox-group',
+        'x-component-props': {
+            defaultValue: ['mask'],
+            options: Tuple([
+                {
+                    label: '点击空白区域',
+                    value: 'mask',
+                },
+                {
+                    label: 'ESC',
+                    value: 'esc',
+                },
+            ]),
+        },
+    }),
+    defaultMaskShow: Type.Boolean({
+        title: '展示遮罩',
+        default: true,
+        'x-index': 40,
+        'x-category': '高级属性',
+    }),
+    headerSlot: Type.Slot({
+        title: '弹窗顶部',
+        description: '弹窗顶部插槽',
+    }),
+    contentSlot: Type.Slot({
+        title: '弹窗内容',
+        description: '弹窗内容插槽',
+    }),
+    footerSlot: Type.Slot({
+        title: '底部按钮',
+        description: '弹窗底部插槽',
+    }),
+});
+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-1303824488.cos.ap-shanghai.myqcloud.com/schema/lcds_component.json',
+    // 属性定义
+    data,
+    // 只读属性定义
+    properties,
+    // 样式API
+    classes: [
+        {
+            name: '根元素',
+            selector: '.wd-modal',
+            description: '组件根元素',
+        },
+        {
+            name: 'PC 端根元素',
+            selector: '.wd-pc-modal',
+            description: '可以为 PC 端的编写样式',
+        },
+        {
+            name: 'H5 端根元素',
+            selector: '.wd-h5-modal',
+            description: '可以为 H5 端的编写样式',
+        },
+        {
+            name: '小程序 端根元素',
+            selector: '.wd-mp-modal',
+            description: '可以为 小程序 端的编写样式',
+        },
+        {
+            name: '弹窗遮罩层样式',
+            selector: '.wd-modal-mask',
+            description: '可以为遮罩层编写样式',
+        },
+        {
+            name: '弹窗主体容器样式',
+            selector: '.wd-modal-bd',
+            description: '可以为主体容器编写样式',
+        },
+        {
+            name: '弹窗标题区样式',
+            selector: '.wd-modal-bd__hd',
+            description: '可以为标题区编写样式',
+        },
+        {
+            name: '弹窗内容区样式',
+            selector: '.wd-modal-bd__main',
+            description: '可以为内容区编写样式',
+        },
+        {
+            name: '弹窗按钮区样式',
+            selector: '.wd-modal-bd__ft',
+            description: '可以为按钮区编写样式',
+        },
+    ],
+    // 组件方法
+    methods: [
+        {
+            name: 'open',
+            label: '打开弹窗',
+            params: Type.Object({
+                info: Type.Optional(Type.Unknown({
+                    description: '透传信息，在监听到弹窗打开时会传递该信息',
+                })),
+            }),
+        },
+        {
+            name: 'close',
+            label: '关闭弹窗',
+            params: 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: 'WdModal',
+        // 组件别名，用于生成组件 id，例如 Icon1
+        componentName: 'Modal',
+        title: '弹窗',
+        description: '用于实现基础的弹窗（对话框）展示效果。',
+        propertyPanelTips: '在小程序中使用时，不建议嵌套在其他容器/组件中，以免弹窗被遮盖',
+        icon: '../../icons/Modal.svg',
+        category: '布局',
+        categoryOrder: 200,
+        componentOrder: 140,
+        visible: ['APP', 'COMPONENT'],
+        docsUrl: 'https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/grid/WdModal',
+        // 快捷编辑时展示在编辑区的属性
+        // shortcut: {
+        //   props: ['line', 'checkable'],
+        // },
+        group: {
+            ['基础属性']: {
+                'x-index': 1,
+                expand: true,
+            },
+            ['高级属性']: {
+                'x-index': 2,
+                expand: false,
+            },
+        },
+        templates: [
+            {
+                when: '$attached',
+                to: 'headerSlot',
+                body: HEADER_TPL,
+            },
+            {
+                when: '$attached',
+                to: 'footerSlot',
+                body: FOOTER_TPL,
+            },
+        ],
+    },
+});
+export default config;

package/dist/configs/components/wd-official-account.d.ts

@@ -0,0 +1,52 @@
+declare const _default: {
+    $schema: "https://comp-public-1303824488.cos.ap-shanghai.myqcloud.com/schema/lcds_component.json";
+    data: import("@sinclair/typebox").TObject<{}>;
+    events: {
+        title: string;
+        name: string;
+        'x-platforms': "MP"[];
+        description: string;
+        detail: import("@sinclair/typebox").TObject<{
+            status: import("@sinclair/typebox").TNumber;
+            errMsg: import("@sinclair/typebox").TString;
+        }>;
+    }[];
+    classes: {
+        name: string;
+        selector: string;
+        description: string;
+    }[];
+    meta: {
+        name: string;
+        componentName: string;
+        title: string;
+        description: string;
+        propertyPanelTips: string;
+        category: string;
+        icon: string;
+        platform: "MP"[];
+        visible: "APP"[];
+        docsUrl: "https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/wxOpen/WdOfficialAccount";
+        inlineStyleForm: {
+            $blockedAll: true;
+        };
+        categoryOrder: number;
+        componentOrder: number;
+        validate: {
+            rule: string;
+            options: {
+                allowFailure: boolean;
+                title: string;
+                description: string;
+                type: string;
+                version: string;
+                matchedPublishedPlatform: string[];
+                extra: {
+                    usePositionTemplate: boolean;
+                };
+            };
+        }[];
+        stylePanelTips: string;
+    };
+};
+export default _default;

package/dist/configs/components/wd-official-account.js

@@ -6,37 +6,35 @@
 import { defineConfig, Type } from '../type-utils';
 export default defineConfig({
     $schema: 'https://comp-public-1303824488.cos.ap-shanghai.myqcloud.com/schema/lcds_component.json',
-    data: {
-        properties: {},
-    },
+    data: Type.Object({}),
     events: [
         {
             title: '公众号加载成功',
             name: 'load',
             'x-platforms': ['MP'],
-            remarks: '公众号加载成功时触发',
-            detail: {
+            description: '公众号加载成功时触发',
+            detail: Type.Object({
                 status: Type.Number({
                     description: '状态码',
                 }),
                 errMsg: Type.String({
                     description: '错误信息',
                 }),
-            },
+            }),
         },
         {
             title: '公众号加载失败',
             name: 'error',
             'x-platforms': ['MP'],
-            remarks: '公众号加载失败时触发',
-            detail: {
+            description: '公众号加载失败时触发',
+            detail: Type.Object({
                 status: Type.Number({
                     description: '状态码',
                 }),
                 errMsg: Type.String({
                     description: '错误信息',
                 }),
-            },
+            }),
         },
     ],
     classes: [
@@ -54,8 +52,9 @@ export default defineConfig({
     meta: {
         name: 'WdOfficialAccount',
         componentName: 'OfficialAccount',
-        title: '公众号关注组件',
+        title: '公众号关注',
         description: '可在小程序内展示公众号关注入口，方便用户快捷关注或访问公众号。',
+        propertyPanelTips: '1.请在微信公众平台中设置要展示的公众号 [查看设置说明](https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/wxOpen/WdOfficialAccount#%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E)\n \n2.按照小程序官方要求，该组件仅在特定场景下展示 [查看限制详情](https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/wxOpen/WdOfficialAccount#%E7%BB%84%E4%BB%B6%E4%BD%BF%E7%94%A8%E9%99%90%E5%88%B6)\n \n3.仅支持在小程序端使用，PC/H5中将自动隐藏，请注意页面布局',
         category: '小程序',
         icon: '../icons/OfficialAccount.svg',
         platform: ['MP'],
@@ -82,7 +81,6 @@ export default defineConfig({
                 },
             },
         ],
-        propertyPanelTips: '当前组件不支持PC或H5构建,发布后将默认隐藏,请注意页面布局  \n请先前往[微信公众平台](https://developers.weixin.qq.com/miniprogram/dev/component/official-account.html)，在设置-关注公众号模块绑定公众号',
         stylePanelTips: '该组件高度固定为84px，宽度不小于300px，可通过调整外层普通容器的宽度调整组件宽度。',
     },
 });