@hlw-uni/mp-vue 1.0.16 → 1.0.18

package/dist/index.js

@@ -299,11 +299,14 @@
     }
   });
   const index$3 = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-14242381"]]);
-  const _hoisted_1$2 = { class: "hlw-menu" };
-  const _hoisted_2$2 = {
+  const _hoisted_1$2 = {
     key: 0,
     class: "hlw-menu-title"
   };
+  const _hoisted_2$2 = {
+    key: 1,
+    class: "hlw-menu-title-divider"
+  };
   const _hoisted_3$2 = { class: "hlw-menu-left" };
   const _hoisted_4$1 = { class: "hlw-menu-label" };
   const _hoisted_5$1 = { class: "hlw-menu-right" };
@@ -330,7 +333,8 @@
       items: {},
       title: { default: "" },
       mode: { default: "list" },
-      columns: { default: 4 }
+      columns: { default: 4 },
+      border: { type: Boolean, default: true }
     },
     emits: ["click"],
     setup(__props, { emit: __emit }) {
@@ -342,11 +346,14 @@
       };
       return (_ctx, _cache) => {
         const _component_navigator = vue.resolveComponent("navigator");
-        return vue.openBlock(), vue.createElementBlock("view", _hoisted_1$2, [
-          props.title ? (vue.openBlock(), vue.createElementBlock("view", _hoisted_2$2, [
+        return vue.openBlock(), vue.createElementBlock("view", {
+          class: vue.normalizeClass(["hlw-menu", { "hlw-menu--no-border": !props.border }])
+        }, [
+          props.title ? (vue.openBlock(), vue.createElementBlock("view", _hoisted_1$2, [
             vue.createElementVNode("text", null, vue.toDisplayString(props.title), 1)
           ])) : vue.createCommentVNode("", true),
-          props.mode === "list" ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 1 }, vue.renderList(visibleItems.value, (item, index2) => {
+          props.title ? (vue.openBlock(), vue.createElementBlock("view", _hoisted_2$2)) : vue.createCommentVNode("", true),
+          props.mode === "list" ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 2 }, vue.renderList(visibleItems.value, (item, index2) => {
             return vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: index2 }, [
               item.url ? (vue.openBlock(), vue.createBlock(_component_navigator, {
                 key: 0,
@@ -402,7 +409,7 @@
               index2 < visibleItems.value.length - 1 ? (vue.openBlock(), vue.createElementBlock("view", _hoisted_11)) : vue.createCommentVNode("", true)
             ], 64);
           }), 128)) : (vue.openBlock(), vue.createElementBlock("view", {
-            key: 2,
+            key: 3,
             class: "hlw-menu-grid",
             style: vue.normalizeStyle({ gridTemplateColumns: `repeat(${props.columns}, 1fr)` })
           }, [
@@ -455,11 +462,11 @@
               ], 64);
             }), 128))
           ], 4))
-        ]);
+        ], 2);
       };
     }
   });
-  const index$2 = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-3081ac3b"]]);
+  const index$2 = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-728f18f4"]]);
   const _hoisted_1$1 = { class: "hlw-menu-list" };
   const _hoisted_2$1 = ["onTap"];
   const _hoisted_3$1 = { class: "hlw-menu-list__left" };

package/dist/index.mjs

@@ -296,11 +296,14 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   }
 });
 const index$3 = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-14242381"]]);
-const _hoisted_1$2 = { class: "hlw-menu" };
-const _hoisted_2$2 = {
+const _hoisted_1$2 = {
   key: 0,
   class: "hlw-menu-title"
 };
+const _hoisted_2$2 = {
+  key: 1,
+  class: "hlw-menu-title-divider"
+};
 const _hoisted_3$2 = { class: "hlw-menu-left" };
 const _hoisted_4$1 = { class: "hlw-menu-label" };
 const _hoisted_5$1 = { class: "hlw-menu-right" };
@@ -327,7 +330,8 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     items: {},
     title: { default: "" },
     mode: { default: "list" },
-    columns: { default: 4 }
+    columns: { default: 4 },
+    border: { type: Boolean, default: true }
   },
   emits: ["click"],
   setup(__props, { emit: __emit }) {
@@ -339,11 +343,14 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       const _component_navigator = resolveComponent("navigator");
-      return openBlock(), createElementBlock("view", _hoisted_1$2, [
-        props.title ? (openBlock(), createElementBlock("view", _hoisted_2$2, [
+      return openBlock(), createElementBlock("view", {
+        class: normalizeClass(["hlw-menu", { "hlw-menu--no-border": !props.border }])
+      }, [
+        props.title ? (openBlock(), createElementBlock("view", _hoisted_1$2, [
           createElementVNode("text", null, toDisplayString(props.title), 1)
         ])) : createCommentVNode("", true),
-        props.mode === "list" ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(visibleItems.value, (item, index2) => {
+        props.title ? (openBlock(), createElementBlock("view", _hoisted_2$2)) : createCommentVNode("", true),
+        props.mode === "list" ? (openBlock(true), createElementBlock(Fragment, { key: 2 }, renderList(visibleItems.value, (item, index2) => {
           return openBlock(), createElementBlock(Fragment, { key: index2 }, [
             item.url ? (openBlock(), createBlock(_component_navigator, {
               key: 0,
@@ -399,7 +406,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
             index2 < visibleItems.value.length - 1 ? (openBlock(), createElementBlock("view", _hoisted_11)) : createCommentVNode("", true)
           ], 64);
         }), 128)) : (openBlock(), createElementBlock("view", {
-          key: 2,
+          key: 3,
           class: "hlw-menu-grid",
           style: normalizeStyle({ gridTemplateColumns: `repeat(${props.columns}, 1fr)` })
         }, [
@@ -452,11 +459,11 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
             ], 64);
           }), 128))
         ], 4))
-      ]);
+      ], 2);
     };
   }
 });
-const index$2 = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-3081ac3b"]]);
+const index$2 = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-728f18f4"]]);
 const _hoisted_1$1 = { class: "hlw-menu-list" };
 const _hoisted_2$1 = ["onTap"];
 const _hoisted_3$1 = { class: "hlw-menu-list__left" };

package/dist/style.css

@@ -145,71 +145,79 @@ to { transform: rotate(360deg);
     color: #999;
 }
 
-.hlw-menu[data-v-3081ac3b] {
+.hlw-menu[data-v-728f18f4] {
   background: #fff;
   border-radius: var(--radius-lg, 24rpx);
   border: 1rpx solid var(--border-color, #e2e8f0);
   overflow: hidden;
   width: 100%;
 }
+.hlw-menu--no-border[data-v-728f18f4] {
+  border: none;
+}
 
 /* 标题 */
-.hlw-menu-title[data-v-3081ac3b] {
+.hlw-menu-title[data-v-728f18f4] {
   padding: 24rpx 32rpx 0;
 }
-.hlw-menu-title text[data-v-3081ac3b] {
+.hlw-menu-title text[data-v-728f18f4] {
   font-size: 24rpx;
   font-weight: 600;
   color: #94a3b8;
   letter-spacing: 1rpx;
 }
+.hlw-menu-title-divider[data-v-728f18f4] {
+  margin: 16rpx 32rpx 0;
+  height: 0;
+  border-bottom: 1rpx dashed var(--border-color, #e2e8f0);
+}
 
 /* ========== 列表模式 ========== */
-.hlw-menu-item[data-v-3081ac3b] {
+.hlw-menu-item[data-v-728f18f4] {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 24rpx 32rpx;
 }
-.hlw-menu-item--active[data-v-3081ac3b] {
+.hlw-menu-item--active[data-v-728f18f4] {
   background: #f8fafc;
 }
-.hlw-menu-divider[data-v-3081ac3b] {
+.hlw-menu-divider[data-v-728f18f4] {
   margin: 0 32rpx;
   height: 0;
   border-bottom: 1rpx dashed var(--border-color, #e2e8f0);
 }
-.hlw-menu-left[data-v-3081ac3b] {
+.hlw-menu-left[data-v-728f18f4] {
   display: flex;
   align-items: center;
   gap: 24rpx;
 }
-.hlw-menu-right[data-v-3081ac3b] {
+.hlw-menu-right[data-v-728f18f4] {
   display: flex;
   align-items: center;
   gap: 16rpx;
 }
 
 /* ========== 宫格模式 ========== */
-.hlw-menu-grid[data-v-3081ac3b] {
+.hlw-menu-grid[data-v-728f18f4] {
   display: grid;
   padding: 16rpx 0 24rpx;
 }
-.hlw-menu-grid-item[data-v-3081ac3b] {
+.hlw-menu-grid-item[data-v-728f18f4] {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 12rpx;
   padding: 16rpx 8rpx;
 }
-.hlw-menu-grid-item--active[data-v-3081ac3b] {
+.hlw-menu-grid-item--active[data-v-728f18f4] {
   background: #f8fafc;
 }
-.hlw-menu-grid-icon-wrap[data-v-3081ac3b] {
+.hlw-menu-grid-icon-wrap[data-v-728f18f4] {
   position: relative;
   padding-top: 20rpx; /* 预留徽标空间，保证所有格子图标水平对齐 */
 }
-.hlw-menu-badge[data-v-3081ac3b] {
+.hlw-menu-badge[data-v-728f18f4] {
   position: absolute;
   top: 0;
   right: -8rpx;
@@ -222,14 +230,14 @@ to { transform: rotate(360deg);
   line-height: 28rpx;
   height: 28rpx;
 }
-.hlw-menu-grid-label[data-v-3081ac3b] {
+.hlw-menu-grid-label[data-v-728f18f4] {
   font-size: 24rpx;
   color: #334155;
   text-align: center;
 }
 
 /* ========== 图标 ========== */
-.hlw-menu-icon[data-v-3081ac3b] {
+.hlw-menu-icon[data-v-728f18f4] {
   width: 64rpx;
   height: 64rpx;
   border-radius: var(--radius-md, 16rpx);
@@ -238,86 +246,86 @@ to { transform: rotate(360deg);
   justify-content: center;
   flex-shrink: 0;
 }
-.hlw-menu-icon text[data-v-3081ac3b] {
+.hlw-menu-icon text[data-v-728f18f4] {
   font-size: 20rpx;
 }
-.hlw-menu-icon--grid[data-v-3081ac3b] {
+.hlw-menu-icon--grid[data-v-728f18f4] {
   width: 88rpx;
   height: 88rpx;
   border-radius: var(--radius-lg, 24rpx);
 }
-.hlw-menu-icon--grid text[data-v-3081ac3b] {
+.hlw-menu-icon--grid text[data-v-728f18f4] {
   font-size: 32rpx;
 }
-.hlw-menu-icon--orange[data-v-3081ac3b] {
+.hlw-menu-icon--orange[data-v-728f18f4] {
   background: #fff7ed;
   color: #f97316;
 }
-.hlw-menu-icon--purple[data-v-3081ac3b] {
+.hlw-menu-icon--purple[data-v-728f18f4] {
   background: #faf5ff;
   color: #a855f7;
 }
-.hlw-menu-icon--wechat[data-v-3081ac3b] {
+.hlw-menu-icon--wechat[data-v-728f18f4] {
   background: #f0fdf4;
   color: #07c160;
 }
-.hlw-menu-icon--cyan[data-v-3081ac3b] {
+.hlw-menu-icon--cyan[data-v-728f18f4] {
   background: #ecfeff;
   color: #06b6d4;
 }
-.hlw-menu-icon--emerald[data-v-3081ac3b] {
+.hlw-menu-icon--emerald[data-v-728f18f4] {
   background: #ecfdf5;
   color: #10b981;
 }
-.hlw-menu-icon--slate[data-v-3081ac3b] {
+.hlw-menu-icon--slate[data-v-728f18f4] {
   background: #f1f5f9;
   color: #64748b;
 }
-.hlw-menu-icon--rose[data-v-3081ac3b] {
+.hlw-menu-icon--rose[data-v-728f18f4] {
   background: #fff1f2;
   color: #f43f5e;
 }
-.hlw-menu-icon--blue[data-v-3081ac3b] {
+.hlw-menu-icon--blue[data-v-728f18f4] {
   background: #eff6ff;
   color: #3b82f6;
 }
-.hlw-menu-icon--red[data-v-3081ac3b] {
+.hlw-menu-icon--red[data-v-728f18f4] {
   background: #fef2f2;
   color: #ef4444;
 }
 
 /* ========== 标签 / 角标 ========== */
-.hlw-menu-label[data-v-3081ac3b] {
+.hlw-menu-label[data-v-728f18f4] {
   font-size: 28rpx;
   font-weight: 500;
   color: #334155;
 }
-.hlw-menu-tag[data-v-3081ac3b] {
+.hlw-menu-tag[data-v-728f18f4] {
   font-size: 20rpx;
   color: #fff;
   padding: 2rpx 12rpx;
   border-radius: 9999rpx;
   box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
 }
-.hlw-menu-tag--orange[data-v-3081ac3b] {
+.hlw-menu-tag--orange[data-v-728f18f4] {
   background: #fb923c;
 }
-.hlw-menu-tag--red[data-v-3081ac3b] {
+.hlw-menu-tag--red[data-v-728f18f4] {
   background: #ef4444;
 }
-.hlw-menu-tag--wechat[data-v-3081ac3b] {
+.hlw-menu-tag--wechat[data-v-728f18f4] {
   background: #07c160;
 }
-.hlw-menu-tag--rose[data-v-3081ac3b] {
+.hlw-menu-tag--rose[data-v-728f18f4] {
   background: #f43f5e;
 }
-.hlw-menu-tag--blue[data-v-3081ac3b] {
+.hlw-menu-tag--blue[data-v-728f18f4] {
   background: #3b82f6;
 }
-.hlw-menu-tag-pulse[data-v-3081ac3b] {
-  animation: tag-pulse-3081ac3b 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+.hlw-menu-tag-pulse[data-v-728f18f4] {
+  animation: tag-pulse-728f18f4 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
-@keyframes tag-pulse-3081ac3b {
+@keyframes tag-pulse-728f18f4 {
 0%, 100% {
     opacity: 1;
 }
@@ -325,18 +333,18 @@ to { transform: rotate(360deg);
     opacity: 0.5;
 }
 }
-.hlw-menu-arrow[data-v-3081ac3b] {
+.hlw-menu-arrow[data-v-728f18f4] {
   color: #d1d5db;
   font-size: 20rpx;
 }
-.hlw-menu-spin[data-v-3081ac3b] {
-  animation: icon-spin-3081ac3b 1s linear infinite;
+.hlw-menu-spin[data-v-728f18f4] {
+  animation: icon-spin-728f18f4 1s linear infinite;
 }
-.hlw-menu-muted[data-v-3081ac3b] {
+.hlw-menu-muted[data-v-728f18f4] {
   color: #94a3b8;
   font-size: 20rpx;
 }
-@keyframes icon-spin-3081ac3b {
+@keyframes icon-spin-728f18f4 {
 from {
     transform: rotate(0deg);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@hlw-uni/mp-vue",
-    "version": "1.0.16",
+    "version": "1.0.18",
     "description": "hlw-uni Vue 组件库 — 供小程序业务方使用的 UI 组件集合",
     "main": "dist/index.js",
     "module": "dist/index.mjs",

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

@@ -1,9 +1,10 @@
 <template>
-    <view class="hlw-menu">
+    <view class="hlw-menu" :class="{ 'hlw-menu--no-border': !props.border }">
         <!-- 标题 -->
         <view v-if="props.title" class="hlw-menu-title">
             <text>{{ props.title }}</text>
         </view>
+        <view v-if="props.title" class="hlw-menu-title-divider"></view>
 
         <!-- 列表模式 -->
         <template v-if="props.mode === 'list'">
@@ -79,12 +80,15 @@ interface Props {
     mode?: "list" | "grid";
     /** 宫格列数，默认 4 */
     columns?: number;
+    /** 是否显示外边框，默认 true */
+    border?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
     title: "",
     mode: "list",
     columns: 4,
+    border: true,
 });
 
 const emit = defineEmits<{
@@ -105,6 +109,10 @@ const handleClick = (item: HlwMenuItem) => {
     border: 1rpx solid var(--border-color, #e2e8f0);
     overflow: hidden;
     width: 100%;
+
+    &--no-border {
+        border: none;
+    }
 }
 
 /* 标题 */
@@ -118,6 +126,12 @@ const handleClick = (item: HlwMenuItem) => {
     }
 }
 
+.hlw-menu-title-divider {
+    margin: 16rpx 32rpx 0;
+    height: 0;
+    border-bottom: 1rpx dashed var(--border-color, #e2e8f0);
+}
+
 /* ========== 列表模式 ========== */
 .hlw-menu-item {
     display: flex;