@hlw-uni/mp-vue 1.0.4 → 1.0.6

package/dist/index.d.ts

@@ -3,7 +3,10 @@
  */
 export { default as HlwAd } from './components/hlw-ad/index.vue';
 export { default as HlwAvatar } from './components/hlw-avatar/index.vue';
+export { default as HlwCard } from './components/hlw-card/index.vue';
 export { default as HlwEmpty } from './components/hlw-empty/index.vue';
+export { default as HlwHeader } from './components/hlw-header/index.vue';
 export { default as HlwLoading } from './components/hlw-loading/index.vue';
 export { default as HlwMenuList } from './components/hlw-menu-list/index.vue';
+export { default as HlwPage } from './components/hlw-page/index.vue';
 export type { MenuItem } from './components/hlw-menu-list/types';

package/dist/index.js

@@ -2,7 +2,7 @@
   typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("vue")) : typeof define === "function" && define.amd ? define(["exports", "vue"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.HlwUniVue = {}, global.vue));
 })(this, function(exports2, vue) {
   "use strict";
-  const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
     ...{ name: "HlwAd" },
     __name: "index",
     props: {
@@ -33,13 +33,13 @@
       };
     }
   });
-  const _hoisted_1$3 = ["src"];
-  const _hoisted_2$3 = {
+  const _hoisted_1$6 = ["src"];
+  const _hoisted_2$6 = {
     key: 1,
     class: "hlw-avatar__placeholder"
   };
-  const _hoisted_3$2 = { class: "hlw-avatar__initial" };
-  const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_3$4 = { class: "hlw-avatar__initial" };
+  const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
     __name: "index",
     props: {
       src: {},
@@ -64,8 +64,8 @@
             src: __props.src,
             mode: "aspectFill",
             onError: _cache[0] || (_cache[0] = ($event) => loadError.value = true)
-          }, null, 40, _hoisted_1$3)) : (vue.openBlock(), vue.createElementBlock("view", _hoisted_2$3, [
-            vue.createElementVNode("text", _hoisted_3$2, vue.toDisplayString(initial.value), 1)
+          }, null, 40, _hoisted_1$6)) : (vue.openBlock(), vue.createElementBlock("view", _hoisted_2$6, [
+            vue.createElementVNode("text", _hoisted_3$4, vue.toDisplayString(initial.value), 1)
           ]))
         ], 2);
       };
@@ -78,15 +78,76 @@
     }
     return target;
   };
-  const index$3 = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-7e8f98a5"]]);
-  const _hoisted_1$2 = { class: "hlw-empty" };
-  const _hoisted_2$2 = ["src"];
-  const _hoisted_3$1 = {
+  const index$6 = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-7e8f98a5"]]);
+  const _hoisted_1$5 = { class: "hlw-card" };
+  const _hoisted_2$5 = {
+    key: 0,
+    class: "hlw-card-header"
+  };
+  const _hoisted_3$3 = { class: "flex items-center justify-between px-5 py-4 border-0 border-b border-dashed border-slate-200 bg-slate-50/30" };
+  const _hoisted_4$2 = { key: 0 };
+  const _hoisted_5$1 = { class: "text-sm font-bold text-slate-800 flex items-center gap-2 tracking-wide" };
+  const _hoisted_6$1 = { key: 1 };
+  const _hoisted_7$1 = {
+    key: 0,
+    class: "text-[10px] text-slate-400 bg-slate-50 px-2 py-1 rounded border border-slate-100 tracking-wide"
+  };
+  const _hoisted_8 = { class: "hlw-card-body" };
+  const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      options: {
+        styleIsolation: "shared",
+        virtualHost: true
+      }
+    },
+    __name: "index",
+    props: {
+      title: { default: "" },
+      icon: { default: "" },
+      iconColor: { default: "" },
+      extra: { default: "" }
+    },
+    setup(__props) {
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("view", _hoisted_1$5, [
+          _ctx.$slots.header || __props.title || __props.icon || _ctx.$slots["header-left"] || _ctx.$slots["header-right"] ? (vue.openBlock(), vue.createElementBlock("view", _hoisted_2$5, [
+            vue.renderSlot(_ctx.$slots, "header", {}, () => [
+              vue.createElementVNode("view", _hoisted_3$3, [
+                _ctx.$slots["header-left"] || __props.title || __props.icon ? (vue.openBlock(), vue.createElementBlock("view", _hoisted_4$2, [
+                  vue.renderSlot(_ctx.$slots, "header-left", {}, () => [
+                    vue.createElementVNode("view", _hoisted_5$1, [
+                      __props.icon ? (vue.openBlock(), vue.createElementBlock("text", {
+                        key: 0,
+                        class: vue.normalizeClass([__props.icon, __props.iconColor])
+                      }, null, 2)) : vue.createCommentVNode("", true),
+                      vue.createElementVNode("text", null, vue.toDisplayString(__props.title), 1)
+                    ])
+                  ], true)
+                ])) : vue.createCommentVNode("", true),
+                _ctx.$slots["header-right"] || __props.extra ? (vue.openBlock(), vue.createElementBlock("view", _hoisted_6$1, [
+                  vue.renderSlot(_ctx.$slots, "header-right", {}, () => [
+                    __props.extra ? (vue.openBlock(), vue.createElementBlock("text", _hoisted_7$1, vue.toDisplayString(__props.extra), 1)) : vue.createCommentVNode("", true)
+                  ], true)
+                ])) : vue.createCommentVNode("", true)
+              ])
+            ], true)
+          ])) : vue.createCommentVNode("", true),
+          vue.createElementVNode("view", _hoisted_8, [
+            vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
+          ])
+        ]);
+      };
+    }
+  });
+  const index$5 = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-787fc3a7"]]);
+  const _hoisted_1$4 = { class: "hlw-empty" };
+  const _hoisted_2$4 = ["src"];
+  const _hoisted_3$2 = {
     key: 1,
     class: "hlw-empty__icon"
   };
   const _hoisted_4$1 = { class: "hlw-empty__text" };
-  const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
     __name: "index",
     props: {
       text: {},
@@ -94,43 +155,125 @@
     },
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("view", _hoisted_1$2, [
+        return vue.openBlock(), vue.createElementBlock("view", _hoisted_1$4, [
           __props.image ? (vue.openBlock(), vue.createElementBlock("image", {
             key: 0,
             class: "hlw-empty__image",
             src: __props.image,
             mode: "aspectFit"
-          }, null, 8, _hoisted_2$2)) : (vue.openBlock(), vue.createElementBlock("text", _hoisted_3$1, "📦")),
+          }, null, 8, _hoisted_2$4)) : (vue.openBlock(), vue.createElementBlock("text", _hoisted_3$2, "📦")),
           vue.createElementVNode("text", _hoisted_4$1, vue.toDisplayString(__props.text || "暂无数据"), 1),
           vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
         ]);
       };
     }
   });
-  const index$2 = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-72364322"]]);
-  const _hoisted_1$1 = { class: "hlw-loading" };
-  const _hoisted_2$1 = {
+  const index$4 = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-72364322"]]);
+  const _hoisted_1$3 = { class: "header-title" };
+  const _hoisted_2$3 = {
+    key: 0,
+    class: "header-title"
+  };
+  const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
+    __name: "index",
+    props: {
+      extraHeight: { default: 0 },
+      bgClass: { default: "" },
+      isBack: { type: Boolean, default: false },
+      title: { default: "" }
+    },
+    emits: ["back"],
+    setup(__props, { emit: __emit }) {
+      const getNavBarContentHeight = () => {
+        var _a;
+        try {
+          const menuInfo = (_a = uni.getMenuButtonBoundingClientRect) == null ? void 0 : _a.call(uni);
+          if (!menuInfo)
+            return 44;
+          const systemInfo = uni.getSystemInfoSync();
+          return (menuInfo.top - systemInfo.statusBarHeight) * 2 + menuInfo.height;
+        } catch {
+          return 44;
+        }
+      };
+      const getStatusBarHeight = () => {
+        try {
+          const systemInfo = uni.getSystemInfoSync();
+          return systemInfo.statusBarHeight || 20;
+        } catch {
+          return 20;
+        }
+      };
+      const NAV_BAR_CONTENT_HEIGHT = getNavBarContentHeight();
+      const props = __props;
+      const emit = __emit;
+      const handleBack = () => {
+        emit("back");
+        uni.navigateBack({ delta: 1 });
+      };
+      const slots = vue.useSlots();
+      const hasBgSlot = vue.computed(() => !props.isBack && !!slots.bg);
+      const statusBarHeight = vue.ref(getStatusBarHeight());
+      const totalNavBarHeight = vue.computed(() => statusBarHeight.value + NAV_BAR_CONTENT_HEIGHT + props.extraHeight);
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("view", {
+          class: "hlw-header",
+          style: vue.normalizeStyle({ height: totalNavBarHeight.value + "px" })
+        }, [
+          vue.createElementVNode("view", {
+            class: vue.normalizeClass(["header-bg-layer", hasBgSlot.value ? "" : props.bgClass])
+          }, [
+            !props.isBack ? vue.renderSlot(_ctx.$slots, "bg", { key: 0 }, void 0, true) : vue.createCommentVNode("", true)
+          ], 2),
+          vue.createElementVNode("view", {
+            class: "status-bar-spacer",
+            style: vue.normalizeStyle({ height: statusBarHeight.value + "px" })
+          }, null, 4),
+          vue.createElementVNode("view", {
+            class: "header-content-area",
+            style: vue.normalizeStyle({ height: vue.unref(NAV_BAR_CONTENT_HEIGHT) + "px" })
+          }, [
+            props.isBack ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+              vue.createElementVNode("view", {
+                class: "header-back",
+                onClick: handleBack
+              }, [..._cache[0] || (_cache[0] = [
+                vue.createElementVNode("text", { class: "iconfont icon-back" }, null, -1)
+              ])]),
+              vue.createElementVNode("view", _hoisted_1$3, vue.toDisplayString(props.title), 1),
+              _cache[1] || (_cache[1] = vue.createElementVNode("view", { class: "header-placeholder" }, null, -1))
+            ], 64)) : vue.renderSlot(_ctx.$slots, "default", { key: 1 }, () => [
+              props.title ? (vue.openBlock(), vue.createElementBlock("view", _hoisted_2$3, vue.toDisplayString(props.title), 1)) : vue.createCommentVNode("", true)
+            ], true)
+          ], 4)
+        ], 4);
+      };
+    }
+  });
+  const index$3 = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-6f338046"]]);
+  const _hoisted_1$2 = { class: "hlw-loading" };
+  const _hoisted_2$2 = {
     key: 0,
     class: "hlw-loading__text"
   };
-  const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
     __name: "index",
     props: {
       text: {}
     },
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("view", _hoisted_1$1, [
+        return vue.openBlock(), vue.createElementBlock("view", _hoisted_1$2, [
           _cache[0] || (_cache[0] = vue.createElementVNode("view", { class: "hlw-loading__spinner" }, null, -1)),
-          __props.text ? (vue.openBlock(), vue.createElementBlock("text", _hoisted_2$1, vue.toDisplayString(__props.text), 1)) : vue.createCommentVNode("", true)
+          __props.text ? (vue.openBlock(), vue.createElementBlock("text", _hoisted_2$2, vue.toDisplayString(__props.text), 1)) : vue.createCommentVNode("", true)
         ]);
       };
     }
   });
-  const index$1 = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-14242381"]]);
-  const _hoisted_1 = { class: "hlw-menu-list" };
-  const _hoisted_2 = ["onTap"];
-  const _hoisted_3 = { class: "hlw-menu-list__left" };
+  const index$2 = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-14242381"]]);
+  const _hoisted_1$1 = { class: "hlw-menu-list" };
+  const _hoisted_2$1 = ["onTap"];
+  const _hoisted_3$1 = { class: "hlw-menu-list__left" };
   const _hoisted_4 = {
     key: 0,
     class: "hlw-menu-list__icon"
@@ -141,7 +284,7 @@
     key: 0,
     class: "hlw-menu-list__value"
   };
-  const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
     __name: "index",
     props: {
       items: {}
@@ -158,14 +301,14 @@
         emit("click", item);
       }
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("view", _hoisted_1, [
+        return vue.openBlock(), vue.createElementBlock("view", _hoisted_1$1, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.items, (item) => {
             return vue.openBlock(), vue.createElementBlock("view", {
               key: item.key,
               class: "hlw-menu-list__item",
               onTap: ($event) => onTap(item)
             }, [
-              vue.createElementVNode("view", _hoisted_3, [
+              vue.createElementVNode("view", _hoisted_3$1, [
                 item.icon ? (vue.openBlock(), vue.createElementBlock("text", _hoisted_4, vue.toDisplayString(item.icon), 1)) : vue.createCommentVNode("", true),
                 vue.createElementVNode("text", _hoisted_5, vue.toDisplayString(item.label), 1)
               ]),
@@ -173,17 +316,65 @@
                 item.value ? (vue.openBlock(), vue.createElementBlock("text", _hoisted_7, vue.toDisplayString(item.value), 1)) : vue.createCommentVNode("", true),
                 _cache[0] || (_cache[0] = vue.createElementVNode("text", { class: "hlw-menu-list__arrow" }, "›", -1))
               ])
-            ], 40, _hoisted_2);
+            ], 40, _hoisted_2$1);
           }), 128))
         ]);
       };
     }
   });
-  const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-e465b0b4"]]);
-  exports2.HlwAd = _sfc_main$4;
-  exports2.HlwAvatar = index$3;
-  exports2.HlwEmpty = index$2;
-  exports2.HlwLoading = index$1;
-  exports2.HlwMenuList = index;
+  const index$1 = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-e465b0b4"]]);
+  const _hoisted_1 = { class: "hlw-page" };
+  const _hoisted_2 = { class: "hlw-page-header" };
+  const _hoisted_3 = { class: "hlw-page-footer" };
+  const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+    __name: "index",
+    props: {
+      title: { default: "" },
+      isBack: { type: Boolean, default: false },
+      bgClass: { default: "" }
+    },
+    setup(__props) {
+      return (_ctx, _cache) => {
+        const _component_hlw_header = vue.resolveComponent("hlw-header");
+        const _component_scroll_view = vue.resolveComponent("scroll-view");
+        return vue.openBlock(), vue.createElementBlock("view", _hoisted_1, [
+          vue.createElementVNode("view", _hoisted_2, [
+            vue.renderSlot(_ctx.$slots, "header", {}, () => [
+              __props.title || __props.isBack ? (vue.openBlock(), vue.createBlock(_component_hlw_header, {
+                key: 0,
+                title: __props.title,
+                "is-back": __props.isBack,
+                "bg-class": __props.bgClass
+              }, null, 8, ["title", "is-back", "bg-class"])) : vue.createCommentVNode("", true)
+            ], true)
+          ]),
+          vue.createVNode(_component_scroll_view, {
+            class: "hlw-page-content",
+            "scroll-y": true,
+            "enable-flex": true,
+            enhanced: true,
+            "show-scrollbar": true
+          }, {
+            default: vue.withCtx(() => [
+              vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
+            ]),
+            _: 3
+          }),
+          vue.createElementVNode("view", _hoisted_3, [
+            vue.renderSlot(_ctx.$slots, "footer", {}, void 0, true)
+          ])
+        ]);
+      };
+    }
+  });
+  const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-155bc02a"]]);
+  exports2.HlwAd = _sfc_main$7;
+  exports2.HlwAvatar = index$6;
+  exports2.HlwCard = index$5;
+  exports2.HlwEmpty = index$4;
+  exports2.HlwHeader = index$3;
+  exports2.HlwLoading = index$2;
+  exports2.HlwMenuList = index$1;
+  exports2.HlwPage = index;
   Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
 });

package/dist/index.mjs

@@ -1,5 +1,5 @@
-import { defineComponent, resolveComponent, openBlock, createBlock, ref, computed, createElementBlock, normalizeClass, createElementVNode, toDisplayString, renderSlot, createCommentVNode, Fragment, renderList } from "vue";
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+import { defineComponent, resolveComponent, openBlock, createBlock, ref, computed, createElementBlock, normalizeClass, createElementVNode, toDisplayString, renderSlot, createCommentVNode, useSlots, normalizeStyle, unref, Fragment, renderList, createVNode, withCtx } from "vue";
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   ...{ name: "HlwAd" },
   __name: "index",
   props: {
@@ -30,13 +30,13 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$3 = ["src"];
-const _hoisted_2$3 = {
+const _hoisted_1$6 = ["src"];
+const _hoisted_2$6 = {
   key: 1,
   class: "hlw-avatar__placeholder"
 };
-const _hoisted_3$2 = { class: "hlw-avatar__initial" };
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const _hoisted_3$4 = { class: "hlw-avatar__initial" };
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "index",
   props: {
     src: {},
@@ -61,8 +61,8 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
           src: __props.src,
           mode: "aspectFill",
           onError: _cache[0] || (_cache[0] = ($event) => loadError.value = true)
-        }, null, 40, _hoisted_1$3)) : (openBlock(), createElementBlock("view", _hoisted_2$3, [
-          createElementVNode("text", _hoisted_3$2, toDisplayString(initial.value), 1)
+        }, null, 40, _hoisted_1$6)) : (openBlock(), createElementBlock("view", _hoisted_2$6, [
+          createElementVNode("text", _hoisted_3$4, toDisplayString(initial.value), 1)
         ]))
       ], 2);
     };
@@ -75,15 +75,76 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const index$3 = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-7e8f98a5"]]);
-const _hoisted_1$2 = { class: "hlw-empty" };
-const _hoisted_2$2 = ["src"];
-const _hoisted_3$1 = {
+const index$6 = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-7e8f98a5"]]);
+const _hoisted_1$5 = { class: "hlw-card" };
+const _hoisted_2$5 = {
+  key: 0,
+  class: "hlw-card-header"
+};
+const _hoisted_3$3 = { class: "flex items-center justify-between px-5 py-4 border-0 border-b border-dashed border-slate-200 bg-slate-50/30" };
+const _hoisted_4$2 = { key: 0 };
+const _hoisted_5$1 = { class: "text-sm font-bold text-slate-800 flex items-center gap-2 tracking-wide" };
+const _hoisted_6$1 = { key: 1 };
+const _hoisted_7$1 = {
+  key: 0,
+  class: "text-[10px] text-slate-400 bg-slate-50 px-2 py-1 rounded border border-slate-100 tracking-wide"
+};
+const _hoisted_8 = { class: "hlw-card-body" };
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+  ...{
+    options: {
+      styleIsolation: "shared",
+      virtualHost: true
+    }
+  },
+  __name: "index",
+  props: {
+    title: { default: "" },
+    icon: { default: "" },
+    iconColor: { default: "" },
+    extra: { default: "" }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("view", _hoisted_1$5, [
+        _ctx.$slots.header || __props.title || __props.icon || _ctx.$slots["header-left"] || _ctx.$slots["header-right"] ? (openBlock(), createElementBlock("view", _hoisted_2$5, [
+          renderSlot(_ctx.$slots, "header", {}, () => [
+            createElementVNode("view", _hoisted_3$3, [
+              _ctx.$slots["header-left"] || __props.title || __props.icon ? (openBlock(), createElementBlock("view", _hoisted_4$2, [
+                renderSlot(_ctx.$slots, "header-left", {}, () => [
+                  createElementVNode("view", _hoisted_5$1, [
+                    __props.icon ? (openBlock(), createElementBlock("text", {
+                      key: 0,
+                      class: normalizeClass([__props.icon, __props.iconColor])
+                    }, null, 2)) : createCommentVNode("", true),
+                    createElementVNode("text", null, toDisplayString(__props.title), 1)
+                  ])
+                ], true)
+              ])) : createCommentVNode("", true),
+              _ctx.$slots["header-right"] || __props.extra ? (openBlock(), createElementBlock("view", _hoisted_6$1, [
+                renderSlot(_ctx.$slots, "header-right", {}, () => [
+                  __props.extra ? (openBlock(), createElementBlock("text", _hoisted_7$1, toDisplayString(__props.extra), 1)) : createCommentVNode("", true)
+                ], true)
+              ])) : createCommentVNode("", true)
+            ])
+          ], true)
+        ])) : createCommentVNode("", true),
+        createElementVNode("view", _hoisted_8, [
+          renderSlot(_ctx.$slots, "default", {}, void 0, true)
+        ])
+      ]);
+    };
+  }
+});
+const index$5 = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-787fc3a7"]]);
+const _hoisted_1$4 = { class: "hlw-empty" };
+const _hoisted_2$4 = ["src"];
+const _hoisted_3$2 = {
   key: 1,
   class: "hlw-empty__icon"
 };
 const _hoisted_4$1 = { class: "hlw-empty__text" };
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "index",
   props: {
     text: {},
@@ -91,43 +152,125 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("view", _hoisted_1$2, [
+      return openBlock(), createElementBlock("view", _hoisted_1$4, [
         __props.image ? (openBlock(), createElementBlock("image", {
           key: 0,
           class: "hlw-empty__image",
           src: __props.image,
           mode: "aspectFit"
-        }, null, 8, _hoisted_2$2)) : (openBlock(), createElementBlock("text", _hoisted_3$1, "📦")),
+        }, null, 8, _hoisted_2$4)) : (openBlock(), createElementBlock("text", _hoisted_3$2, "📦")),
         createElementVNode("text", _hoisted_4$1, toDisplayString(__props.text || "暂无数据"), 1),
         renderSlot(_ctx.$slots, "default", {}, void 0, true)
       ]);
     };
   }
 });
-const index$2 = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-72364322"]]);
-const _hoisted_1$1 = { class: "hlw-loading" };
-const _hoisted_2$1 = {
+const index$4 = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-72364322"]]);
+const _hoisted_1$3 = { class: "header-title" };
+const _hoisted_2$3 = {
+  key: 0,
+  class: "header-title"
+};
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  __name: "index",
+  props: {
+    extraHeight: { default: 0 },
+    bgClass: { default: "" },
+    isBack: { type: Boolean, default: false },
+    title: { default: "" }
+  },
+  emits: ["back"],
+  setup(__props, { emit: __emit }) {
+    const getNavBarContentHeight = () => {
+      var _a;
+      try {
+        const menuInfo = (_a = uni.getMenuButtonBoundingClientRect) == null ? void 0 : _a.call(uni);
+        if (!menuInfo)
+          return 44;
+        const systemInfo = uni.getSystemInfoSync();
+        return (menuInfo.top - systemInfo.statusBarHeight) * 2 + menuInfo.height;
+      } catch {
+        return 44;
+      }
+    };
+    const getStatusBarHeight = () => {
+      try {
+        const systemInfo = uni.getSystemInfoSync();
+        return systemInfo.statusBarHeight || 20;
+      } catch {
+        return 20;
+      }
+    };
+    const NAV_BAR_CONTENT_HEIGHT = getNavBarContentHeight();
+    const props = __props;
+    const emit = __emit;
+    const handleBack = () => {
+      emit("back");
+      uni.navigateBack({ delta: 1 });
+    };
+    const slots = useSlots();
+    const hasBgSlot = computed(() => !props.isBack && !!slots.bg);
+    const statusBarHeight = ref(getStatusBarHeight());
+    const totalNavBarHeight = computed(() => statusBarHeight.value + NAV_BAR_CONTENT_HEIGHT + props.extraHeight);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("view", {
+        class: "hlw-header",
+        style: normalizeStyle({ height: totalNavBarHeight.value + "px" })
+      }, [
+        createElementVNode("view", {
+          class: normalizeClass(["header-bg-layer", hasBgSlot.value ? "" : props.bgClass])
+        }, [
+          !props.isBack ? renderSlot(_ctx.$slots, "bg", { key: 0 }, void 0, true) : createCommentVNode("", true)
+        ], 2),
+        createElementVNode("view", {
+          class: "status-bar-spacer",
+          style: normalizeStyle({ height: statusBarHeight.value + "px" })
+        }, null, 4),
+        createElementVNode("view", {
+          class: "header-content-area",
+          style: normalizeStyle({ height: unref(NAV_BAR_CONTENT_HEIGHT) + "px" })
+        }, [
+          props.isBack ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+            createElementVNode("view", {
+              class: "header-back",
+              onClick: handleBack
+            }, [..._cache[0] || (_cache[0] = [
+              createElementVNode("text", { class: "iconfont icon-back" }, null, -1)
+            ])]),
+            createElementVNode("view", _hoisted_1$3, toDisplayString(props.title), 1),
+            _cache[1] || (_cache[1] = createElementVNode("view", { class: "header-placeholder" }, null, -1))
+          ], 64)) : renderSlot(_ctx.$slots, "default", { key: 1 }, () => [
+            props.title ? (openBlock(), createElementBlock("view", _hoisted_2$3, toDisplayString(props.title), 1)) : createCommentVNode("", true)
+          ], true)
+        ], 4)
+      ], 4);
+    };
+  }
+});
+const index$3 = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-6f338046"]]);
+const _hoisted_1$2 = { class: "hlw-loading" };
+const _hoisted_2$2 = {
   key: 0,
   class: "hlw-loading__text"
 };
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "index",
   props: {
     text: {}
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("view", _hoisted_1$1, [
+      return openBlock(), createElementBlock("view", _hoisted_1$2, [
         _cache[0] || (_cache[0] = createElementVNode("view", { class: "hlw-loading__spinner" }, null, -1)),
-        __props.text ? (openBlock(), createElementBlock("text", _hoisted_2$1, toDisplayString(__props.text), 1)) : createCommentVNode("", true)
+        __props.text ? (openBlock(), createElementBlock("text", _hoisted_2$2, toDisplayString(__props.text), 1)) : createCommentVNode("", true)
       ]);
     };
   }
 });
-const index$1 = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-14242381"]]);
-const _hoisted_1 = { class: "hlw-menu-list" };
-const _hoisted_2 = ["onTap"];
-const _hoisted_3 = { class: "hlw-menu-list__left" };
+const index$2 = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-14242381"]]);
+const _hoisted_1$1 = { class: "hlw-menu-list" };
+const _hoisted_2$1 = ["onTap"];
+const _hoisted_3$1 = { class: "hlw-menu-list__left" };
 const _hoisted_4 = {
   key: 0,
   class: "hlw-menu-list__icon"
@@ -138,7 +281,7 @@ const _hoisted_7 = {
   key: 0,
   class: "hlw-menu-list__value"
 };
-const _sfc_main = /* @__PURE__ */ defineComponent({
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "index",
   props: {
     items: {}
@@ -155,14 +298,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       emit("click", item);
     }
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("view", _hoisted_1, [
+      return openBlock(), createElementBlock("view", _hoisted_1$1, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item) => {
           return openBlock(), createElementBlock("view", {
             key: item.key,
             class: "hlw-menu-list__item",
             onTap: ($event) => onTap(item)
           }, [
-            createElementVNode("view", _hoisted_3, [
+            createElementVNode("view", _hoisted_3$1, [
               item.icon ? (openBlock(), createElementBlock("text", _hoisted_4, toDisplayString(item.icon), 1)) : createCommentVNode("", true),
               createElementVNode("text", _hoisted_5, toDisplayString(item.label), 1)
             ]),
@@ -170,17 +313,65 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               item.value ? (openBlock(), createElementBlock("text", _hoisted_7, toDisplayString(item.value), 1)) : createCommentVNode("", true),
               _cache[0] || (_cache[0] = createElementVNode("text", { class: "hlw-menu-list__arrow" }, "›", -1))
             ])
-          ], 40, _hoisted_2);
+          ], 40, _hoisted_2$1);
         }), 128))
       ]);
     };
   }
 });
-const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-e465b0b4"]]);
+const index$1 = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-e465b0b4"]]);
+const _hoisted_1 = { class: "hlw-page" };
+const _hoisted_2 = { class: "hlw-page-header" };
+const _hoisted_3 = { class: "hlw-page-footer" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "index",
+  props: {
+    title: { default: "" },
+    isBack: { type: Boolean, default: false },
+    bgClass: { default: "" }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      const _component_hlw_header = resolveComponent("hlw-header");
+      const _component_scroll_view = resolveComponent("scroll-view");
+      return openBlock(), createElementBlock("view", _hoisted_1, [
+        createElementVNode("view", _hoisted_2, [
+          renderSlot(_ctx.$slots, "header", {}, () => [
+            __props.title || __props.isBack ? (openBlock(), createBlock(_component_hlw_header, {
+              key: 0,
+              title: __props.title,
+              "is-back": __props.isBack,
+              "bg-class": __props.bgClass
+            }, null, 8, ["title", "is-back", "bg-class"])) : createCommentVNode("", true)
+          ], true)
+        ]),
+        createVNode(_component_scroll_view, {
+          class: "hlw-page-content",
+          "scroll-y": true,
+          "enable-flex": true,
+          enhanced: true,
+          "show-scrollbar": true
+        }, {
+          default: withCtx(() => [
+            renderSlot(_ctx.$slots, "default", {}, void 0, true)
+          ]),
+          _: 3
+        }),
+        createElementVNode("view", _hoisted_3, [
+          renderSlot(_ctx.$slots, "footer", {}, void 0, true)
+        ])
+      ]);
+    };
+  }
+});
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-155bc02a"]]);
 export {
-  _sfc_main$4 as HlwAd,
-  index$3 as HlwAvatar,
-  index$2 as HlwEmpty,
-  index$1 as HlwLoading,
-  index as HlwMenuList
+  _sfc_main$7 as HlwAd,
+  index$6 as HlwAvatar,
+  index$5 as HlwCard,
+  index$4 as HlwEmpty,
+  index$3 as HlwHeader,
+  index$2 as HlwLoading,
+  index$1 as HlwMenuList,
+  index as HlwPage
 };

package/dist/style.css

@@ -33,6 +33,10 @@
 .hlw-avatar--large  .hlw-avatar__initial[data-v-7e8f98a5] { font-size: 46rpx;
 }
 
+.hlw-card[data-v-787fc3a7] {
+@apply bg-white rounded-xl border border-solid border-slate-200 overflow-hidden w-full;
+}
+
 .hlw-empty[data-v-72364322] {
     display: flex;
     flex-direction: column;
@@ -53,7 +57,61 @@
     font-size: 28rpx;
     color: #bbb;
 }
-
+.hlw-header[data-v-6f338046] {
+  position: sticky;
+  top: 0;
+  z-index: 999;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.header-bg-layer[data-v-6f338046] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 0;
+}
+.status-bar-spacer[data-v-6f338046] {
+  flex-shrink: 0;
+  width: 100%;
+  position: relative;
+  z-index: 1;
+}
+.header-content-area[data-v-6f338046] {
+  flex-shrink: 0;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  position: relative;
+  z-index: 1;
+}
+.header-back[data-v-6f338046] {
+  width: 88rpx;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.header-back .iconfont[data-v-6f338046] {
+  font-size: 40rpx;
+}
+.header-title[data-v-6f338046] {
+  flex: 1;
+  text-align: center;
+  font-size: 26rpx;
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  letter-spacing: 1rpx;
+}
+.header-placeholder[data-v-6f338046] {
+  width: 88rpx;
+  flex-shrink: 0;
+}
 .hlw-loading[data-v-14242381] {
     display: flex;
     flex-direction: column;
@@ -122,3 +180,21 @@ to { transform: rotate(360deg);
     color: #ccc;
     line-height: 1;
 }
+.hlw-page[data-v-155bc02a] {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.hlw-page-header[data-v-155bc02a] {
+  flex-shrink: 0;
+}
+.hlw-page-content[data-v-155bc02a] {
+  flex: 1;
+  height: 0;
+  width: 100%;
+}
+.hlw-page-footer[data-v-155bc02a] {
+  flex-shrink: 0;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@hlw-uni/mp-vue",
-    "version": "1.0.4",
+    "version": "1.0.6",
     "description": "hlw-uni Vue 组件库 — 供小程序业务方使用的 UI 组件集合",
     "main": "dist/index.js",
     "module": "dist/index.mjs",
@@ -20,7 +20,8 @@
     ],
     "scripts": {
         "build": "vite build",
-        "dev": "vite build --watch"
+        "dev": "vite build --watch",
+        "publish:npm": "pnpm build && npm publish --access public"
     },
     "publishConfig": {
         "access": "public"

package/src/components/hlw-card/index.vue

@@ -0,0 +1,61 @@
+<template>
+  <view class="hlw-card">
+    <view
+      v-if="$slots.header || title || icon || $slots['header-left'] || $slots['header-right']"
+      class="hlw-card-header"
+    >
+      <slot name="header">
+        <view class="flex items-center justify-between px-5 py-4 border-0 border-b border-dashed border-slate-200 bg-slate-50/30">
+          <view v-if="$slots['header-left'] || title || icon">
+            <slot name="header-left">
+              <view class="text-sm font-bold text-slate-800 flex items-center gap-2 tracking-wide">
+                <text v-if="icon" :class="[icon, iconColor]"></text>
+                <text>{{ title }}</text>
+              </view>
+            </slot>
+          </view>
+          <view v-if="$slots['header-right'] || extra">
+            <slot name="header-right">
+              <text
+                v-if="extra"
+                class="text-[10px] text-slate-400 bg-slate-50 px-2 py-1 rounded border border-slate-100 tracking-wide"
+              >{{ extra }}</text>
+            </slot>
+          </view>
+        </view>
+      </slot>
+    </view>
+    <view class="hlw-card-body">
+      <slot></slot>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  title?: string;
+  icon?: string;
+  iconColor?: string;
+  extra?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  title: '',
+  icon: '',
+  iconColor: '',
+  extra: '',
+});
+
+defineOptions({
+  options: {
+    styleIsolation: 'shared',
+    virtualHost: true,
+  },
+});
+</script>
+
+<style scoped>
+.hlw-card {
+  @apply bg-white rounded-xl border border-solid border-slate-200 overflow-hidden w-full;
+}
+</style>

package/src/components/hlw-header/index.vue

@@ -0,0 +1,139 @@
+<template>
+    <view class="hlw-header" :style="{ height: totalNavBarHeight + 'px' }">
+        <view class="header-bg-layer" :class="hasBgSlot ? '' : props.bgClass">
+            <slot v-if="!props.isBack" name="bg"></slot>
+        </view>
+        <view class="status-bar-spacer" :style="{ height: statusBarHeight + 'px' }"></view>
+        <view class="header-content-area" :style="{ height: NAV_BAR_CONTENT_HEIGHT + 'px' }">
+            <template v-if="props.isBack">
+                <view class="header-back" @click="handleBack">
+                    <text class="iconfont icon-back"></text>
+                </view>
+                <view class="header-title">{{ props.title }}</view>
+                <view class="header-placeholder"></view>
+            </template>
+            <slot v-else>
+                <view v-if="props.title" class="header-title">{{ props.title }}</view>
+            </slot>
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, useSlots } from "vue";
+
+const getNavBarContentHeight = (): number => {
+    try {
+        const menuInfo = uni.getMenuButtonBoundingClientRect?.();
+        if (!menuInfo) return 44;
+        const systemInfo = uni.getSystemInfoSync();
+        return (menuInfo.top - systemInfo.statusBarHeight!) * 2 + menuInfo.height;
+    } catch {
+        return 44;
+    }
+};
+
+const getStatusBarHeight = (): number => {
+    try {
+        const systemInfo = uni.getSystemInfoSync();
+        return systemInfo.statusBarHeight || 20;
+    } catch {
+        return 20;
+    }
+};
+
+const NAV_BAR_CONTENT_HEIGHT = getNavBarContentHeight();
+
+interface Props {
+    extraHeight?: number;
+    bgClass?: string;
+    isBack?: boolean;
+    title?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    extraHeight: 0,
+    bgClass: "",
+    isBack: false,
+    title: "",
+});
+
+const emit = defineEmits<{
+    back: [];
+}>();
+
+const handleBack = () => {
+    emit("back");
+    uni.navigateBack({ delta: 1 });
+};
+
+const slots = useSlots();
+const hasBgSlot = computed(() => !props.isBack && !!slots.bg);
+const statusBarHeight = ref(getStatusBarHeight());
+const totalNavBarHeight = computed(() => statusBarHeight.value + NAV_BAR_CONTENT_HEIGHT + props.extraHeight);
+</script>
+
+<style lang="scss" scoped>
+.hlw-header {
+    position: sticky;
+    top: 0;
+    z-index: 999;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.header-bg-layer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 0;
+}
+
+.status-bar-spacer {
+    flex-shrink: 0;
+    width: 100%;
+    position: relative;
+    z-index: 1;
+}
+
+.header-content-area {
+    flex-shrink: 0;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    position: relative;
+    z-index: 1;
+}
+
+.header-back {
+    width: 88rpx;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+
+    .iconfont {
+        font-size: 40rpx;
+    }
+}
+
+.header-title {
+    flex: 1;
+    text-align: center;
+    font-size: 26rpx;
+    font-weight: 500;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    letter-spacing: 1rpx;
+}
+
+.header-placeholder {
+    width: 88rpx;
+    flex-shrink: 0;
+}
+</style>

package/src/components/hlw-page/index.vue

@@ -0,0 +1,64 @@
+<template>
+  <view class="hlw-page">
+    <view class="hlw-page-header">
+      <slot name="header">
+        <hlw-header
+          v-if="title || isBack"
+          :title="title"
+          :is-back="isBack"
+          :bg-class="bgClass"
+        />
+      </slot>
+    </view>
+    <scroll-view
+      class="hlw-page-content"
+      :scroll-y="true"
+      :enable-flex="true"
+      :enhanced="true"
+      :show-scrollbar="true"
+    >
+      <slot></slot>
+    </scroll-view>
+    <view class="hlw-page-footer">
+      <slot name="footer"></slot>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  title?: string;
+  isBack?: boolean;
+  bgClass?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  title: '',
+  isBack: false,
+  bgClass: '',
+});
+</script>
+
+<style lang="scss" scoped>
+.hlw-page {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.hlw-page-header {
+  flex-shrink: 0;
+}
+
+.hlw-page-content {
+  flex: 1;
+  height: 0;
+  width: 100%;
+}
+
+.hlw-page-footer {
+  flex-shrink: 0;
+}
+</style>

package/src/index.ts

@@ -4,7 +4,10 @@
 
 export { default as HlwAd } from './components/hlw-ad/index.vue';
 export { default as HlwAvatar } from './components/hlw-avatar/index.vue';
+export { default as HlwCard } from './components/hlw-card/index.vue';
 export { default as HlwEmpty } from './components/hlw-empty/index.vue';
+export { default as HlwHeader } from './components/hlw-header/index.vue';
 export { default as HlwLoading } from './components/hlw-loading/index.vue';
 export { default as HlwMenuList } from './components/hlw-menu-list/index.vue';
+export { default as HlwPage } from './components/hlw-page/index.vue';
 export type { MenuItem } from './components/hlw-menu-list/types';

package/dist/components/hlw-avatar/index.d.ts

@@ -1,7 +0,0 @@
-export interface AvatarProps {
-    src?: string;
-    name?: string;
-    size?: 'small' | 'medium' | 'large';
-}
-declare const _default: any;
-export default _default;

package/dist/components/hlw-empty/index.d.ts

@@ -1,2 +0,0 @@
-declare const _default: any;
-export default _default;

package/dist/components/hlw-loading/index.d.ts

@@ -1,2 +0,0 @@
-declare const _default: any;
-export default _default;

package/src/components/hlw-avatar/index.ts

@@ -1,52 +0,0 @@
-import { defineComponent, ref, computed, h } from 'vue';
-
-export interface AvatarProps {
-  src?: string;
-  name?: string;
-  size?: 'small' | 'medium' | 'large';
-}
-
-export default defineComponent({
-  name: 'Avatar',
-  props: {
-    src: { type: String },
-    name: { type: String },
-    size: { type: String as () => 'small' | 'medium' | 'large', default: 'medium' },
-  },
-  setup(props) {
-    const loadError = ref(false);
-
-    const initial = computed(() => {
-      if (!props.name) return '?';
-      return props.name.charAt(0).toUpperCase();
-    });
-
-    function onError() { loadError.value = true; }
-
-    return () => {
-      const sizeClass = `hlw-avatar--${props.size}`;
-      return (
-        // @ts-ignore - uni app nodes
-        h('view', { class: `hlw-avatar ${sizeClass}` }, [
-          props.src && !loadError.value
-            ? (
-              // @ts-ignore
-              h('image', {
-                class: 'hlw-avatar__image',
-                src: props.src,
-                mode: 'aspectFill',
-                onError,
-              })
-            )
-            : (
-              // @ts-ignore
-              h('view', { class: 'hlw-avatar__placeholder' }, [
-                // @ts-ignore
-                h('text', { class: 'hlw-avatar__initial' }, initial.value),
-              ])
-            ),
-        ])
-      );
-    };
-  },
-});

package/src/components/hlw-empty/index.ts

@@ -1,34 +0,0 @@
-import { defineComponent, useSlots, h } from 'vue';
-
-export default defineComponent({
-  name: 'Empty',
-  props: {
-    text: { type: String },
-    image: { type: String },
-  },
-  setup(props) {
-    const slots = useSlots();
-    return () => {
-      return (
-        // @ts-ignore
-        h('view', { class: 'hlw-empty' }, [
-          props.image
-            ? (
-              // @ts-ignore
-              h('image', { class: 'hlw-empty__image', src: props.image, mode: 'aspectFit' })
-            )
-            : (
-              // @ts-ignore
-              h('view', { class: 'hlw-empty__icon' }, [
-                // @ts-ignore
-                h('text', '📦'),
-              ])
-            ),
-          // @ts-ignore
-          h('text', { class: 'hlw-empty__text' }, props.text || '暂无数据'),
-          slots.default?.(),
-        ])
-      );
-    };
-  },
-});

package/src/components/hlw-loading/index.ts

@@ -1,29 +0,0 @@
-import { defineComponent, h } from 'vue';
-
-export default defineComponent({
-  name: 'Loading',
-  props: {
-    text: { type: String },
-  },
-  setup(props) {
-    return () => {
-      const dots = Array.from({ length: 12 }, (_, i) =>
-        // @ts-ignore
-        h('view', { key: i + 1, class: 'hlw-loading__dot' }),
-      );
-      return (
-        // @ts-ignore
-        h('view', { class: 'hlw-loading' }, [
-          // @ts-ignore
-          h('view', { class: 'hlw-loading__spinner' }, dots),
-          props.text
-            ? (
-              // @ts-ignore
-              h('text', { class: 'hlw-loading__text' }, props.text)
-            )
-            : null,
-        ])
-      );
-    };
-  },
-});