@cloudbase/weda-ui 3.25.1 → 3.26.0

package/dist/configs/index.d.ts

@@ -1964,6 +1964,128 @@ export declare const components: {
             };
         };
     };
+    WdDrawer: {
+        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;
+                };
+            };
+        };
+    };
     Chart: {
         readonly $schema: "https://comp-public-replace-1303824488-cos.weda.tencent.com/schema/lcds_component.json";
         readonly data: import("@sinclair/typebox").TObject<{
@@ -21456,6 +21578,128 @@ declare const _default: {
                 };
             };
         };
+        WdDrawer: {
+            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;
+                    };
+                };
+            };
+        };
         Chart: {
             readonly $schema: "https://comp-public-replace-1303824488-cos.weda.tencent.com/schema/lcds_component.json";
             readonly data: import("@sinclair/typebox").TObject<{

package/dist/configs/index.js

@@ -134,6 +134,7 @@ import CustomerService from './components/customer-service';
 import WdTree from './components/wd-tree';
 import WdOfficialAccount from './components/wd-official-account';
 import WdModal from './components/wd-modal';
+import WdDrawer from './components/wd-drawer';
 import Chart from './components/echart';
 import WdCanvas from './components/wd-canvas';
 import WdAudio from './components/wd-audio';
@@ -163,6 +164,7 @@ export const components = {
     WdAd,
     WdCanvas,
     WdModal,
+    WdDrawer,
     Chart,
     WdOfficialAccount,
     WdTree,

package/dist/enum/index.d.ts

@@ -210,3 +210,7 @@ export const WD_CODE_EDITOR_THEME: {
     label: string;
     value: string;
 }[];
+export const WD_DRAWER_PLACEMENT: {
+    label: string;
+    value: string;
+}[];

package/dist/enum/index.js

@@ -1228,3 +1228,21 @@ export const WD_CODE_EDITOR_THEME = [
     { label: '暗黑', value: 'githubDark' },
     { label: '明亮', value: 'githubLight' },
 ];
+export const WD_DRAWER_PLACEMENT = [
+    {
+        label: '右',
+        value: 'right',
+    },
+    {
+        label: '左',
+        value: 'left',
+    },
+    {
+        label: '上',
+        value: 'top',
+    },
+    {
+        label: '下',
+        value: 'bottom',
+    },
+];

package/dist/style/index.css

@@ -2881,7 +2881,7 @@ _:-ms-lang(x)::backdrop,
 .wd-table__box td {
   text-align: left;
   vertical-align: middle;
-  font-size: 0;
+  font-size: inherit;
   height: var(--wd-table-td-height-md);
   padding: var(--wd-table-td-space-vertical-md) 16px;
   box-sizing: border-box;
@@ -7928,6 +7928,147 @@ page,
   background-image: radial-gradient(200px at 10px 0px, transparent 10px, #666 10px);
 }
 
+.wd-pc-drawer {
+  --wd-drawer-width: 23.625rem;
+  --wd-drawer-height: 23.625rem;
+}
+
+.wd-h5-drawer,
+.wd-mp-drawer {
+  --wd-drawer-width: 17.5rem;
+  --wd-drawer-height: 17.5rem;
+}
+
+.wd-drawer-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.45);
+  z-index: 999;
+}
+.wd-drawer-mask-enter {
+  opacity: 0;
+}
+.wd-drawer-mask-enter-active {
+  opacity: 1;
+  transition: opacity 0.3s ease-in-out;
+}
+.wd-drawer-mask-exit {
+  opacity: 1;
+}
+.wd-drawer-mask-exit-active {
+  opacity: 0;
+  transition: opacity 0.3s ease-in-out;
+}
+
+.wd-drawer-content-wrapper {
+  position: fixed;
+  background: #fff;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  display: flex;
+  flex-direction: column;
+  z-index: 1000;
+}
+.wd-drawer-right {
+  top: 0;
+  right: 0;
+  height: 100%;
+  width: var(--wd-drawer-width);
+}
+.wd-drawer-right-enter {
+  transform: translateX(100%);
+}
+.wd-drawer-right-enter-active {
+  transform: translateX(0);
+  transition: transform 0.3s ease-in-out;
+}
+.wd-drawer-right-exit {
+  transform: translateX(0);
+}
+.wd-drawer-right-exit-active {
+  transform: translateX(100%);
+  transition: transform 0.3s ease-in-out;
+}
+.wd-drawer-left {
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: var(--wd-drawer-width);
+}
+.wd-drawer-left-enter {
+  transform: translateX(-100%);
+}
+.wd-drawer-left-enter-active {
+  transform: translateX(0);
+  transition: transform 0.3s ease-in-out;
+}
+.wd-drawer-left-exit {
+  transform: translateX(0);
+}
+.wd-drawer-left-exit-active {
+  transform: translateX(-100%);
+  transition: transform 0.3s ease-in-out;
+}
+.wd-drawer-top {
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: var(--wd-drawer-height);
+}
+.wd-drawer-top-enter {
+  transform: translateY(-100%);
+}
+.wd-drawer-top-enter-active {
+  transform: translateY(0);
+  transition: transform 0.3s ease-in-out;
+}
+.wd-drawer-top-exit {
+  transform: translateY(0);
+}
+.wd-drawer-top-exit-active {
+  transform: translateY(-100%);
+  transition: transform 0.3s ease-in-out;
+}
+.wd-drawer-bottom {
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: var(--wd-drawer-height);
+}
+.wd-drawer-bottom-enter {
+  transform: translateY(100%);
+}
+.wd-drawer-bottom-enter-active {
+  transform: translateY(0);
+  transition: transform 0.3s ease-in-out;
+}
+.wd-drawer-bottom-exit {
+  transform: translateY(0);
+}
+.wd-drawer-bottom-exit-active {
+  transform: translateY(100%);
+  transition: transform 0.3s ease-in-out;
+}
+.wd-drawer-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 24px;
+  border-bottom: 1px solid #f0f0f0;
+  flex-shrink: 0;
+}
+.wd-drawer-body {
+  flex: 1;
+  padding: 20px 24px;
+  overflow-y: auto;
+}
+.wd-drawer-footer {
+  border-top: 1px solid #f0f0f0;
+  padding: 20px 24px;
+}
+
 .wd-cascader,
 .wd-cascader-menu,
 .wd-cascader-h5-view-list__menu {
@@ -9420,6 +9561,9 @@ page,
   width: 100%;
   background: var(--wd-tabs-bg);
 }
+.wd-tabs-root.wd-event-tap:active {
+  box-shadow: unset;
+}
 .wd-tabs__header {
   display: flex;
   flex-direction: row;