@hlw-uni/mp-vue 1.0.17 → 1.0.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +39 -37
- package/dist/index.mjs +39 -37
- package/dist/style.css +47 -45
- package/package.json +1 -1
- package/src/components/hlw-menu/index.vue +9 -3
package/dist/index.js
CHANGED
|
@@ -299,42 +299,42 @@
|
|
|
299
299
|
}
|
|
300
300
|
});
|
|
301
301
|
const index$3 = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-14242381"]]);
|
|
302
|
-
const _hoisted_1$2 = {
|
|
303
|
-
const _hoisted_2$2 = {
|
|
302
|
+
const _hoisted_1$2 = {
|
|
304
303
|
key: 0,
|
|
305
304
|
class: "hlw-menu-title"
|
|
306
305
|
};
|
|
307
|
-
const
|
|
306
|
+
const _hoisted_2$2 = {
|
|
308
307
|
key: 1,
|
|
309
308
|
class: "hlw-menu-title-divider"
|
|
310
309
|
};
|
|
311
|
-
const
|
|
312
|
-
const
|
|
313
|
-
const
|
|
314
|
-
const
|
|
315
|
-
const
|
|
316
|
-
const
|
|
317
|
-
const
|
|
318
|
-
const
|
|
310
|
+
const _hoisted_3$2 = { class: "hlw-menu-left" };
|
|
311
|
+
const _hoisted_4$1 = { class: "hlw-menu-label" };
|
|
312
|
+
const _hoisted_5$1 = { class: "hlw-menu-right" };
|
|
313
|
+
const _hoisted_6$1 = ["onClick"];
|
|
314
|
+
const _hoisted_7$1 = { class: "hlw-menu-left" };
|
|
315
|
+
const _hoisted_8 = { class: "hlw-menu-label" };
|
|
316
|
+
const _hoisted_9 = { class: "hlw-menu-right" };
|
|
317
|
+
const _hoisted_10 = {
|
|
319
318
|
key: 0,
|
|
320
319
|
class: "i-fa6-solid-circle-notch hlw-menu-spin hlw-menu-muted"
|
|
321
320
|
};
|
|
322
|
-
const
|
|
321
|
+
const _hoisted_11 = {
|
|
323
322
|
key: 2,
|
|
324
323
|
class: "hlw-menu-divider"
|
|
325
324
|
};
|
|
326
|
-
const
|
|
327
|
-
const
|
|
328
|
-
const
|
|
329
|
-
const
|
|
330
|
-
const
|
|
325
|
+
const _hoisted_12 = { class: "hlw-menu-grid-icon-wrap" };
|
|
326
|
+
const _hoisted_13 = { class: "hlw-menu-grid-label" };
|
|
327
|
+
const _hoisted_14 = ["onClick"];
|
|
328
|
+
const _hoisted_15 = { class: "hlw-menu-grid-icon-wrap" };
|
|
329
|
+
const _hoisted_16 = { class: "hlw-menu-grid-label" };
|
|
331
330
|
const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
|
|
332
331
|
__name: "index",
|
|
333
332
|
props: {
|
|
334
333
|
items: {},
|
|
335
334
|
title: { default: "" },
|
|
336
335
|
mode: { default: "list" },
|
|
337
|
-
columns: { default: 4 }
|
|
336
|
+
columns: { default: 4 },
|
|
337
|
+
border: { type: Boolean, default: true }
|
|
338
338
|
},
|
|
339
339
|
emits: ["click"],
|
|
340
340
|
setup(__props, { emit: __emit }) {
|
|
@@ -346,11 +346,13 @@
|
|
|
346
346
|
};
|
|
347
347
|
return (_ctx, _cache) => {
|
|
348
348
|
const _component_navigator = vue.resolveComponent("navigator");
|
|
349
|
-
return vue.openBlock(), vue.createElementBlock("view",
|
|
350
|
-
|
|
349
|
+
return vue.openBlock(), vue.createElementBlock("view", {
|
|
350
|
+
class: vue.normalizeClass(["hlw-menu", { "hlw-menu--no-border": !props.border }])
|
|
351
|
+
}, [
|
|
352
|
+
props.title ? (vue.openBlock(), vue.createElementBlock("view", _hoisted_1$2, [
|
|
351
353
|
vue.createElementVNode("text", null, vue.toDisplayString(props.title), 1)
|
|
352
354
|
])) : vue.createCommentVNode("", true),
|
|
353
|
-
props.title ? (vue.openBlock(), vue.createElementBlock("view",
|
|
355
|
+
props.title ? (vue.openBlock(), vue.createElementBlock("view", _hoisted_2$2)) : vue.createCommentVNode("", true),
|
|
354
356
|
props.mode === "list" ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 2 }, vue.renderList(visibleItems.value, (item, index2) => {
|
|
355
357
|
return vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: index2 }, [
|
|
356
358
|
item.url ? (vue.openBlock(), vue.createBlock(_component_navigator, {
|
|
@@ -360,7 +362,7 @@
|
|
|
360
362
|
"hover-class": "hlw-menu-item--active"
|
|
361
363
|
}, {
|
|
362
364
|
default: vue.withCtx(() => [
|
|
363
|
-
vue.createElementVNode("view",
|
|
365
|
+
vue.createElementVNode("view", _hoisted_3$2, [
|
|
364
366
|
vue.createElementVNode("view", {
|
|
365
367
|
class: vue.normalizeClass(["hlw-menu-icon", `hlw-menu-icon--${item.iconTheme || "slate"}`])
|
|
366
368
|
}, [
|
|
@@ -368,9 +370,9 @@
|
|
|
368
370
|
class: vue.normalizeClass(item.icon)
|
|
369
371
|
}, null, 2)
|
|
370
372
|
], 2),
|
|
371
|
-
vue.createElementVNode("text",
|
|
373
|
+
vue.createElementVNode("text", _hoisted_4$1, vue.toDisplayString(item.label), 1)
|
|
372
374
|
]),
|
|
373
|
-
vue.createElementVNode("view",
|
|
375
|
+
vue.createElementVNode("view", _hoisted_5$1, [
|
|
374
376
|
item.tag ? (vue.openBlock(), vue.createElementBlock("text", {
|
|
375
377
|
key: 0,
|
|
376
378
|
class: vue.normalizeClass(["hlw-menu-tag", [`hlw-menu-tag--${item.tagTheme || "rose"}`, item.tagPulse ? "hlw-menu-tag-pulse" : ""]])
|
|
@@ -385,7 +387,7 @@
|
|
|
385
387
|
"hover-class": "hlw-menu-item--active",
|
|
386
388
|
onClick: ($event) => handleClick(item)
|
|
387
389
|
}, [
|
|
388
|
-
vue.createElementVNode("view",
|
|
390
|
+
vue.createElementVNode("view", _hoisted_7$1, [
|
|
389
391
|
vue.createElementVNode("view", {
|
|
390
392
|
class: vue.normalizeClass(["hlw-menu-icon", `hlw-menu-icon--${item.iconTheme || "slate"}`])
|
|
391
393
|
}, [
|
|
@@ -393,18 +395,18 @@
|
|
|
393
395
|
class: vue.normalizeClass(item.icon)
|
|
394
396
|
}, null, 2)
|
|
395
397
|
], 2),
|
|
396
|
-
vue.createElementVNode("text",
|
|
398
|
+
vue.createElementVNode("text", _hoisted_8, vue.toDisplayString(item.label), 1)
|
|
397
399
|
]),
|
|
398
|
-
vue.createElementVNode("view",
|
|
399
|
-
item.loading ? (vue.openBlock(), vue.createElementBlock("text",
|
|
400
|
+
vue.createElementVNode("view", _hoisted_9, [
|
|
401
|
+
item.loading ? (vue.openBlock(), vue.createElementBlock("text", _hoisted_10)) : vue.createCommentVNode("", true),
|
|
400
402
|
item.tag ? (vue.openBlock(), vue.createElementBlock("text", {
|
|
401
403
|
key: 1,
|
|
402
404
|
class: vue.normalizeClass(["hlw-menu-tag", [`hlw-menu-tag--${item.tagTheme || "rose"}`, item.tagPulse ? "hlw-menu-tag-pulse" : ""]])
|
|
403
405
|
}, vue.toDisplayString(item.tag), 3)) : vue.createCommentVNode("", true),
|
|
404
406
|
_cache[1] || (_cache[1] = vue.createElementVNode("text", { class: "i-fa6-solid-chevron-right hlw-menu-arrow" }, null, -1))
|
|
405
407
|
])
|
|
406
|
-
], 8,
|
|
407
|
-
index2 < visibleItems.value.length - 1 ? (vue.openBlock(), vue.createElementBlock("view",
|
|
408
|
+
], 8, _hoisted_6$1)),
|
|
409
|
+
index2 < visibleItems.value.length - 1 ? (vue.openBlock(), vue.createElementBlock("view", _hoisted_11)) : vue.createCommentVNode("", true)
|
|
408
410
|
], 64);
|
|
409
411
|
}), 128)) : (vue.openBlock(), vue.createElementBlock("view", {
|
|
410
412
|
key: 3,
|
|
@@ -420,7 +422,7 @@
|
|
|
420
422
|
"hover-class": "hlw-menu-grid-item--active"
|
|
421
423
|
}, {
|
|
422
424
|
default: vue.withCtx(() => [
|
|
423
|
-
vue.createElementVNode("view",
|
|
425
|
+
vue.createElementVNode("view", _hoisted_12, [
|
|
424
426
|
vue.createElementVNode("view", {
|
|
425
427
|
class: vue.normalizeClass(["hlw-menu-icon hlw-menu-icon--grid", `hlw-menu-icon--${item.iconTheme || "slate"}`])
|
|
426
428
|
}, [
|
|
@@ -433,7 +435,7 @@
|
|
|
433
435
|
class: vue.normalizeClass(["hlw-menu-badge", [`hlw-menu-tag--${item.tagTheme || "rose"}`, item.tagPulse ? "hlw-menu-tag-pulse" : ""]])
|
|
434
436
|
}, vue.toDisplayString(item.tag), 3)) : vue.createCommentVNode("", true)
|
|
435
437
|
]),
|
|
436
|
-
vue.createElementVNode("text",
|
|
438
|
+
vue.createElementVNode("text", _hoisted_13, vue.toDisplayString(item.label), 1)
|
|
437
439
|
]),
|
|
438
440
|
_: 2
|
|
439
441
|
}, 1032, ["url"])) : (vue.openBlock(), vue.createElementBlock("view", {
|
|
@@ -442,7 +444,7 @@
|
|
|
442
444
|
"hover-class": "hlw-menu-grid-item--active",
|
|
443
445
|
onClick: ($event) => handleClick(item)
|
|
444
446
|
}, [
|
|
445
|
-
vue.createElementVNode("view",
|
|
447
|
+
vue.createElementVNode("view", _hoisted_15, [
|
|
446
448
|
vue.createElementVNode("view", {
|
|
447
449
|
class: vue.normalizeClass(["hlw-menu-icon hlw-menu-icon--grid", `hlw-menu-icon--${item.iconTheme || "slate"}`])
|
|
448
450
|
}, [
|
|
@@ -455,16 +457,16 @@
|
|
|
455
457
|
class: vue.normalizeClass(["hlw-menu-badge", [`hlw-menu-tag--${item.tagTheme || "rose"}`, item.tagPulse ? "hlw-menu-tag-pulse" : ""]])
|
|
456
458
|
}, vue.toDisplayString(item.tag), 3)) : vue.createCommentVNode("", true)
|
|
457
459
|
]),
|
|
458
|
-
vue.createElementVNode("text",
|
|
459
|
-
], 8,
|
|
460
|
+
vue.createElementVNode("text", _hoisted_16, vue.toDisplayString(item.label), 1)
|
|
461
|
+
], 8, _hoisted_14))
|
|
460
462
|
], 64);
|
|
461
463
|
}), 128))
|
|
462
464
|
], 4))
|
|
463
|
-
]);
|
|
465
|
+
], 2);
|
|
464
466
|
};
|
|
465
467
|
}
|
|
466
468
|
});
|
|
467
|
-
const index$2 = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-
|
|
469
|
+
const index$2 = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-05c3313f"]]);
|
|
468
470
|
const _hoisted_1$1 = { class: "hlw-menu-list" };
|
|
469
471
|
const _hoisted_2$1 = ["onTap"];
|
|
470
472
|
const _hoisted_3$1 = { class: "hlw-menu-list__left" };
|
package/dist/index.mjs
CHANGED
|
@@ -296,42 +296,42 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
|
|
|
296
296
|
}
|
|
297
297
|
});
|
|
298
298
|
const index$3 = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-14242381"]]);
|
|
299
|
-
const _hoisted_1$2 = {
|
|
300
|
-
const _hoisted_2$2 = {
|
|
299
|
+
const _hoisted_1$2 = {
|
|
301
300
|
key: 0,
|
|
302
301
|
class: "hlw-menu-title"
|
|
303
302
|
};
|
|
304
|
-
const
|
|
303
|
+
const _hoisted_2$2 = {
|
|
305
304
|
key: 1,
|
|
306
305
|
class: "hlw-menu-title-divider"
|
|
307
306
|
};
|
|
308
|
-
const
|
|
309
|
-
const
|
|
310
|
-
const
|
|
311
|
-
const
|
|
312
|
-
const
|
|
313
|
-
const
|
|
314
|
-
const
|
|
315
|
-
const
|
|
307
|
+
const _hoisted_3$2 = { class: "hlw-menu-left" };
|
|
308
|
+
const _hoisted_4$1 = { class: "hlw-menu-label" };
|
|
309
|
+
const _hoisted_5$1 = { class: "hlw-menu-right" };
|
|
310
|
+
const _hoisted_6$1 = ["onClick"];
|
|
311
|
+
const _hoisted_7$1 = { class: "hlw-menu-left" };
|
|
312
|
+
const _hoisted_8 = { class: "hlw-menu-label" };
|
|
313
|
+
const _hoisted_9 = { class: "hlw-menu-right" };
|
|
314
|
+
const _hoisted_10 = {
|
|
316
315
|
key: 0,
|
|
317
316
|
class: "i-fa6-solid-circle-notch hlw-menu-spin hlw-menu-muted"
|
|
318
317
|
};
|
|
319
|
-
const
|
|
318
|
+
const _hoisted_11 = {
|
|
320
319
|
key: 2,
|
|
321
320
|
class: "hlw-menu-divider"
|
|
322
321
|
};
|
|
323
|
-
const
|
|
324
|
-
const
|
|
325
|
-
const
|
|
326
|
-
const
|
|
327
|
-
const
|
|
322
|
+
const _hoisted_12 = { class: "hlw-menu-grid-icon-wrap" };
|
|
323
|
+
const _hoisted_13 = { class: "hlw-menu-grid-label" };
|
|
324
|
+
const _hoisted_14 = ["onClick"];
|
|
325
|
+
const _hoisted_15 = { class: "hlw-menu-grid-icon-wrap" };
|
|
326
|
+
const _hoisted_16 = { class: "hlw-menu-grid-label" };
|
|
328
327
|
const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
329
328
|
__name: "index",
|
|
330
329
|
props: {
|
|
331
330
|
items: {},
|
|
332
331
|
title: { default: "" },
|
|
333
332
|
mode: { default: "list" },
|
|
334
|
-
columns: { default: 4 }
|
|
333
|
+
columns: { default: 4 },
|
|
334
|
+
border: { type: Boolean, default: true }
|
|
335
335
|
},
|
|
336
336
|
emits: ["click"],
|
|
337
337
|
setup(__props, { emit: __emit }) {
|
|
@@ -343,11 +343,13 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
|
343
343
|
};
|
|
344
344
|
return (_ctx, _cache) => {
|
|
345
345
|
const _component_navigator = resolveComponent("navigator");
|
|
346
|
-
return openBlock(), createElementBlock("view",
|
|
347
|
-
|
|
346
|
+
return openBlock(), createElementBlock("view", {
|
|
347
|
+
class: normalizeClass(["hlw-menu", { "hlw-menu--no-border": !props.border }])
|
|
348
|
+
}, [
|
|
349
|
+
props.title ? (openBlock(), createElementBlock("view", _hoisted_1$2, [
|
|
348
350
|
createElementVNode("text", null, toDisplayString(props.title), 1)
|
|
349
351
|
])) : createCommentVNode("", true),
|
|
350
|
-
props.title ? (openBlock(), createElementBlock("view",
|
|
352
|
+
props.title ? (openBlock(), createElementBlock("view", _hoisted_2$2)) : createCommentVNode("", true),
|
|
351
353
|
props.mode === "list" ? (openBlock(true), createElementBlock(Fragment, { key: 2 }, renderList(visibleItems.value, (item, index2) => {
|
|
352
354
|
return openBlock(), createElementBlock(Fragment, { key: index2 }, [
|
|
353
355
|
item.url ? (openBlock(), createBlock(_component_navigator, {
|
|
@@ -357,7 +359,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
|
357
359
|
"hover-class": "hlw-menu-item--active"
|
|
358
360
|
}, {
|
|
359
361
|
default: withCtx(() => [
|
|
360
|
-
createElementVNode("view",
|
|
362
|
+
createElementVNode("view", _hoisted_3$2, [
|
|
361
363
|
createElementVNode("view", {
|
|
362
364
|
class: normalizeClass(["hlw-menu-icon", `hlw-menu-icon--${item.iconTheme || "slate"}`])
|
|
363
365
|
}, [
|
|
@@ -365,9 +367,9 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
|
365
367
|
class: normalizeClass(item.icon)
|
|
366
368
|
}, null, 2)
|
|
367
369
|
], 2),
|
|
368
|
-
createElementVNode("text",
|
|
370
|
+
createElementVNode("text", _hoisted_4$1, toDisplayString(item.label), 1)
|
|
369
371
|
]),
|
|
370
|
-
createElementVNode("view",
|
|
372
|
+
createElementVNode("view", _hoisted_5$1, [
|
|
371
373
|
item.tag ? (openBlock(), createElementBlock("text", {
|
|
372
374
|
key: 0,
|
|
373
375
|
class: normalizeClass(["hlw-menu-tag", [`hlw-menu-tag--${item.tagTheme || "rose"}`, item.tagPulse ? "hlw-menu-tag-pulse" : ""]])
|
|
@@ -382,7 +384,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
|
382
384
|
"hover-class": "hlw-menu-item--active",
|
|
383
385
|
onClick: ($event) => handleClick(item)
|
|
384
386
|
}, [
|
|
385
|
-
createElementVNode("view",
|
|
387
|
+
createElementVNode("view", _hoisted_7$1, [
|
|
386
388
|
createElementVNode("view", {
|
|
387
389
|
class: normalizeClass(["hlw-menu-icon", `hlw-menu-icon--${item.iconTheme || "slate"}`])
|
|
388
390
|
}, [
|
|
@@ -390,18 +392,18 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
|
390
392
|
class: normalizeClass(item.icon)
|
|
391
393
|
}, null, 2)
|
|
392
394
|
], 2),
|
|
393
|
-
createElementVNode("text",
|
|
395
|
+
createElementVNode("text", _hoisted_8, toDisplayString(item.label), 1)
|
|
394
396
|
]),
|
|
395
|
-
createElementVNode("view",
|
|
396
|
-
item.loading ? (openBlock(), createElementBlock("text",
|
|
397
|
+
createElementVNode("view", _hoisted_9, [
|
|
398
|
+
item.loading ? (openBlock(), createElementBlock("text", _hoisted_10)) : createCommentVNode("", true),
|
|
397
399
|
item.tag ? (openBlock(), createElementBlock("text", {
|
|
398
400
|
key: 1,
|
|
399
401
|
class: normalizeClass(["hlw-menu-tag", [`hlw-menu-tag--${item.tagTheme || "rose"}`, item.tagPulse ? "hlw-menu-tag-pulse" : ""]])
|
|
400
402
|
}, toDisplayString(item.tag), 3)) : createCommentVNode("", true),
|
|
401
403
|
_cache[1] || (_cache[1] = createElementVNode("text", { class: "i-fa6-solid-chevron-right hlw-menu-arrow" }, null, -1))
|
|
402
404
|
])
|
|
403
|
-
], 8,
|
|
404
|
-
index2 < visibleItems.value.length - 1 ? (openBlock(), createElementBlock("view",
|
|
405
|
+
], 8, _hoisted_6$1)),
|
|
406
|
+
index2 < visibleItems.value.length - 1 ? (openBlock(), createElementBlock("view", _hoisted_11)) : createCommentVNode("", true)
|
|
405
407
|
], 64);
|
|
406
408
|
}), 128)) : (openBlock(), createElementBlock("view", {
|
|
407
409
|
key: 3,
|
|
@@ -417,7 +419,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
|
417
419
|
"hover-class": "hlw-menu-grid-item--active"
|
|
418
420
|
}, {
|
|
419
421
|
default: withCtx(() => [
|
|
420
|
-
createElementVNode("view",
|
|
422
|
+
createElementVNode("view", _hoisted_12, [
|
|
421
423
|
createElementVNode("view", {
|
|
422
424
|
class: normalizeClass(["hlw-menu-icon hlw-menu-icon--grid", `hlw-menu-icon--${item.iconTheme || "slate"}`])
|
|
423
425
|
}, [
|
|
@@ -430,7 +432,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
|
430
432
|
class: normalizeClass(["hlw-menu-badge", [`hlw-menu-tag--${item.tagTheme || "rose"}`, item.tagPulse ? "hlw-menu-tag-pulse" : ""]])
|
|
431
433
|
}, toDisplayString(item.tag), 3)) : createCommentVNode("", true)
|
|
432
434
|
]),
|
|
433
|
-
createElementVNode("text",
|
|
435
|
+
createElementVNode("text", _hoisted_13, toDisplayString(item.label), 1)
|
|
434
436
|
]),
|
|
435
437
|
_: 2
|
|
436
438
|
}, 1032, ["url"])) : (openBlock(), createElementBlock("view", {
|
|
@@ -439,7 +441,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
|
439
441
|
"hover-class": "hlw-menu-grid-item--active",
|
|
440
442
|
onClick: ($event) => handleClick(item)
|
|
441
443
|
}, [
|
|
442
|
-
createElementVNode("view",
|
|
444
|
+
createElementVNode("view", _hoisted_15, [
|
|
443
445
|
createElementVNode("view", {
|
|
444
446
|
class: normalizeClass(["hlw-menu-icon hlw-menu-icon--grid", `hlw-menu-icon--${item.iconTheme || "slate"}`])
|
|
445
447
|
}, [
|
|
@@ -452,16 +454,16 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
|
452
454
|
class: normalizeClass(["hlw-menu-badge", [`hlw-menu-tag--${item.tagTheme || "rose"}`, item.tagPulse ? "hlw-menu-tag-pulse" : ""]])
|
|
453
455
|
}, toDisplayString(item.tag), 3)) : createCommentVNode("", true)
|
|
454
456
|
]),
|
|
455
|
-
createElementVNode("text",
|
|
456
|
-
], 8,
|
|
457
|
+
createElementVNode("text", _hoisted_16, toDisplayString(item.label), 1)
|
|
458
|
+
], 8, _hoisted_14))
|
|
457
459
|
], 64);
|
|
458
460
|
}), 128))
|
|
459
461
|
], 4))
|
|
460
|
-
]);
|
|
462
|
+
], 2);
|
|
461
463
|
};
|
|
462
464
|
}
|
|
463
465
|
});
|
|
464
|
-
const index$2 = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-
|
|
466
|
+
const index$2 = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-05c3313f"]]);
|
|
465
467
|
const _hoisted_1$1 = { class: "hlw-menu-list" };
|
|
466
468
|
const _hoisted_2$1 = ["onTap"];
|
|
467
469
|
const _hoisted_3$1 = { class: "hlw-menu-list__left" };
|
package/dist/style.css
CHANGED
|
@@ -145,76 +145,78 @@ to { transform: rotate(360deg);
|
|
|
145
145
|
color: #999;
|
|
146
146
|
}
|
|
147
147
|
|
|
148
|
-
.hlw-menu[data-v-
|
|
148
|
+
.hlw-menu[data-v-05c3313f] {
|
|
149
149
|
background: #fff;
|
|
150
150
|
border-radius: var(--radius-lg, 24rpx);
|
|
151
151
|
border: 1rpx solid var(--border-color, #e2e8f0);
|
|
152
152
|
overflow: hidden;
|
|
153
153
|
width: 100%;
|
|
154
154
|
}
|
|
155
|
+
.hlw-menu--no-border[data-v-05c3313f] {
|
|
156
|
+
border: none;
|
|
157
|
+
}
|
|
155
158
|
|
|
156
159
|
/* 标题 */
|
|
157
|
-
.hlw-menu-title[data-v-
|
|
158
|
-
padding: 24rpx 32rpx
|
|
160
|
+
.hlw-menu-title[data-v-05c3313f] {
|
|
161
|
+
padding: 24rpx 32rpx;
|
|
159
162
|
}
|
|
160
|
-
.hlw-menu-title text[data-v-
|
|
163
|
+
.hlw-menu-title text[data-v-05c3313f] {
|
|
161
164
|
font-size: 24rpx;
|
|
162
165
|
font-weight: 600;
|
|
163
166
|
color: #94a3b8;
|
|
164
167
|
letter-spacing: 1rpx;
|
|
165
168
|
}
|
|
166
|
-
.hlw-menu-title-divider[data-v-
|
|
167
|
-
margin: 16rpx 32rpx 0;
|
|
169
|
+
.hlw-menu-title-divider[data-v-05c3313f] {
|
|
168
170
|
height: 0;
|
|
169
171
|
border-bottom: 1rpx dashed var(--border-color, #e2e8f0);
|
|
170
172
|
}
|
|
171
173
|
|
|
172
174
|
/* ========== 列表模式 ========== */
|
|
173
|
-
.hlw-menu-item[data-v-
|
|
175
|
+
.hlw-menu-item[data-v-05c3313f] {
|
|
174
176
|
display: flex;
|
|
175
177
|
align-items: center;
|
|
176
178
|
justify-content: space-between;
|
|
177
179
|
padding: 24rpx 32rpx;
|
|
178
180
|
}
|
|
179
|
-
.hlw-menu-item--active[data-v-
|
|
181
|
+
.hlw-menu-item--active[data-v-05c3313f] {
|
|
180
182
|
background: #f8fafc;
|
|
181
183
|
}
|
|
182
|
-
.hlw-menu-divider[data-v-
|
|
184
|
+
.hlw-menu-divider[data-v-05c3313f] {
|
|
183
185
|
margin: 0 32rpx;
|
|
184
186
|
height: 0;
|
|
185
187
|
border-bottom: 1rpx dashed var(--border-color, #e2e8f0);
|
|
186
188
|
}
|
|
187
|
-
.hlw-menu-left[data-v-
|
|
189
|
+
.hlw-menu-left[data-v-05c3313f] {
|
|
188
190
|
display: flex;
|
|
189
191
|
align-items: center;
|
|
190
192
|
gap: 24rpx;
|
|
191
193
|
}
|
|
192
|
-
.hlw-menu-right[data-v-
|
|
194
|
+
.hlw-menu-right[data-v-05c3313f] {
|
|
193
195
|
display: flex;
|
|
194
196
|
align-items: center;
|
|
195
197
|
gap: 16rpx;
|
|
196
198
|
}
|
|
197
199
|
|
|
198
200
|
/* ========== 宫格模式 ========== */
|
|
199
|
-
.hlw-menu-grid[data-v-
|
|
201
|
+
.hlw-menu-grid[data-v-05c3313f] {
|
|
200
202
|
display: grid;
|
|
201
203
|
padding: 16rpx 0 24rpx;
|
|
202
204
|
}
|
|
203
|
-
.hlw-menu-grid-item[data-v-
|
|
205
|
+
.hlw-menu-grid-item[data-v-05c3313f] {
|
|
204
206
|
display: flex;
|
|
205
207
|
flex-direction: column;
|
|
206
208
|
align-items: center;
|
|
207
209
|
gap: 12rpx;
|
|
208
210
|
padding: 16rpx 8rpx;
|
|
209
211
|
}
|
|
210
|
-
.hlw-menu-grid-item--active[data-v-
|
|
212
|
+
.hlw-menu-grid-item--active[data-v-05c3313f] {
|
|
211
213
|
background: #f8fafc;
|
|
212
214
|
}
|
|
213
|
-
.hlw-menu-grid-icon-wrap[data-v-
|
|
215
|
+
.hlw-menu-grid-icon-wrap[data-v-05c3313f] {
|
|
214
216
|
position: relative;
|
|
215
217
|
padding-top: 20rpx; /* 预留徽标空间,保证所有格子图标水平对齐 */
|
|
216
218
|
}
|
|
217
|
-
.hlw-menu-badge[data-v-
|
|
219
|
+
.hlw-menu-badge[data-v-05c3313f] {
|
|
218
220
|
position: absolute;
|
|
219
221
|
top: 0;
|
|
220
222
|
right: -8rpx;
|
|
@@ -227,14 +229,14 @@ to { transform: rotate(360deg);
|
|
|
227
229
|
line-height: 28rpx;
|
|
228
230
|
height: 28rpx;
|
|
229
231
|
}
|
|
230
|
-
.hlw-menu-grid-label[data-v-
|
|
232
|
+
.hlw-menu-grid-label[data-v-05c3313f] {
|
|
231
233
|
font-size: 24rpx;
|
|
232
234
|
color: #334155;
|
|
233
235
|
text-align: center;
|
|
234
236
|
}
|
|
235
237
|
|
|
236
238
|
/* ========== 图标 ========== */
|
|
237
|
-
.hlw-menu-icon[data-v-
|
|
239
|
+
.hlw-menu-icon[data-v-05c3313f] {
|
|
238
240
|
width: 64rpx;
|
|
239
241
|
height: 64rpx;
|
|
240
242
|
border-radius: var(--radius-md, 16rpx);
|
|
@@ -243,86 +245,86 @@ to { transform: rotate(360deg);
|
|
|
243
245
|
justify-content: center;
|
|
244
246
|
flex-shrink: 0;
|
|
245
247
|
}
|
|
246
|
-
.hlw-menu-icon text[data-v-
|
|
248
|
+
.hlw-menu-icon text[data-v-05c3313f] {
|
|
247
249
|
font-size: 20rpx;
|
|
248
250
|
}
|
|
249
|
-
.hlw-menu-icon--grid[data-v-
|
|
251
|
+
.hlw-menu-icon--grid[data-v-05c3313f] {
|
|
250
252
|
width: 88rpx;
|
|
251
253
|
height: 88rpx;
|
|
252
254
|
border-radius: var(--radius-lg, 24rpx);
|
|
253
255
|
}
|
|
254
|
-
.hlw-menu-icon--grid text[data-v-
|
|
256
|
+
.hlw-menu-icon--grid text[data-v-05c3313f] {
|
|
255
257
|
font-size: 32rpx;
|
|
256
258
|
}
|
|
257
|
-
.hlw-menu-icon--orange[data-v-
|
|
259
|
+
.hlw-menu-icon--orange[data-v-05c3313f] {
|
|
258
260
|
background: #fff7ed;
|
|
259
261
|
color: #f97316;
|
|
260
262
|
}
|
|
261
|
-
.hlw-menu-icon--purple[data-v-
|
|
263
|
+
.hlw-menu-icon--purple[data-v-05c3313f] {
|
|
262
264
|
background: #faf5ff;
|
|
263
265
|
color: #a855f7;
|
|
264
266
|
}
|
|
265
|
-
.hlw-menu-icon--wechat[data-v-
|
|
267
|
+
.hlw-menu-icon--wechat[data-v-05c3313f] {
|
|
266
268
|
background: #f0fdf4;
|
|
267
269
|
color: #07c160;
|
|
268
270
|
}
|
|
269
|
-
.hlw-menu-icon--cyan[data-v-
|
|
271
|
+
.hlw-menu-icon--cyan[data-v-05c3313f] {
|
|
270
272
|
background: #ecfeff;
|
|
271
273
|
color: #06b6d4;
|
|
272
274
|
}
|
|
273
|
-
.hlw-menu-icon--emerald[data-v-
|
|
275
|
+
.hlw-menu-icon--emerald[data-v-05c3313f] {
|
|
274
276
|
background: #ecfdf5;
|
|
275
277
|
color: #10b981;
|
|
276
278
|
}
|
|
277
|
-
.hlw-menu-icon--slate[data-v-
|
|
279
|
+
.hlw-menu-icon--slate[data-v-05c3313f] {
|
|
278
280
|
background: #f1f5f9;
|
|
279
281
|
color: #64748b;
|
|
280
282
|
}
|
|
281
|
-
.hlw-menu-icon--rose[data-v-
|
|
283
|
+
.hlw-menu-icon--rose[data-v-05c3313f] {
|
|
282
284
|
background: #fff1f2;
|
|
283
285
|
color: #f43f5e;
|
|
284
286
|
}
|
|
285
|
-
.hlw-menu-icon--blue[data-v-
|
|
287
|
+
.hlw-menu-icon--blue[data-v-05c3313f] {
|
|
286
288
|
background: #eff6ff;
|
|
287
289
|
color: #3b82f6;
|
|
288
290
|
}
|
|
289
|
-
.hlw-menu-icon--red[data-v-
|
|
291
|
+
.hlw-menu-icon--red[data-v-05c3313f] {
|
|
290
292
|
background: #fef2f2;
|
|
291
293
|
color: #ef4444;
|
|
292
294
|
}
|
|
293
295
|
|
|
294
296
|
/* ========== 标签 / 角标 ========== */
|
|
295
|
-
.hlw-menu-label[data-v-
|
|
297
|
+
.hlw-menu-label[data-v-05c3313f] {
|
|
296
298
|
font-size: 28rpx;
|
|
297
299
|
font-weight: 500;
|
|
298
300
|
color: #334155;
|
|
299
301
|
}
|
|
300
|
-
.hlw-menu-tag[data-v-
|
|
302
|
+
.hlw-menu-tag[data-v-05c3313f] {
|
|
301
303
|
font-size: 20rpx;
|
|
302
304
|
color: #fff;
|
|
303
305
|
padding: 2rpx 12rpx;
|
|
304
306
|
border-radius: 9999rpx;
|
|
305
307
|
box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
|
|
306
308
|
}
|
|
307
|
-
.hlw-menu-tag--orange[data-v-
|
|
309
|
+
.hlw-menu-tag--orange[data-v-05c3313f] {
|
|
308
310
|
background: #fb923c;
|
|
309
311
|
}
|
|
310
|
-
.hlw-menu-tag--red[data-v-
|
|
312
|
+
.hlw-menu-tag--red[data-v-05c3313f] {
|
|
311
313
|
background: #ef4444;
|
|
312
314
|
}
|
|
313
|
-
.hlw-menu-tag--wechat[data-v-
|
|
315
|
+
.hlw-menu-tag--wechat[data-v-05c3313f] {
|
|
314
316
|
background: #07c160;
|
|
315
317
|
}
|
|
316
|
-
.hlw-menu-tag--rose[data-v-
|
|
318
|
+
.hlw-menu-tag--rose[data-v-05c3313f] {
|
|
317
319
|
background: #f43f5e;
|
|
318
320
|
}
|
|
319
|
-
.hlw-menu-tag--blue[data-v-
|
|
321
|
+
.hlw-menu-tag--blue[data-v-05c3313f] {
|
|
320
322
|
background: #3b82f6;
|
|
321
323
|
}
|
|
322
|
-
.hlw-menu-tag-pulse[data-v-
|
|
323
|
-
animation: tag-pulse-
|
|
324
|
+
.hlw-menu-tag-pulse[data-v-05c3313f] {
|
|
325
|
+
animation: tag-pulse-05c3313f 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
324
326
|
}
|
|
325
|
-
@keyframes tag-pulse-
|
|
327
|
+
@keyframes tag-pulse-05c3313f {
|
|
326
328
|
0%, 100% {
|
|
327
329
|
opacity: 1;
|
|
328
330
|
}
|
|
@@ -330,18 +332,18 @@ to { transform: rotate(360deg);
|
|
|
330
332
|
opacity: 0.5;
|
|
331
333
|
}
|
|
332
334
|
}
|
|
333
|
-
.hlw-menu-arrow[data-v-
|
|
335
|
+
.hlw-menu-arrow[data-v-05c3313f] {
|
|
334
336
|
color: #d1d5db;
|
|
335
337
|
font-size: 20rpx;
|
|
336
338
|
}
|
|
337
|
-
.hlw-menu-spin[data-v-
|
|
338
|
-
animation: icon-spin-
|
|
339
|
+
.hlw-menu-spin[data-v-05c3313f] {
|
|
340
|
+
animation: icon-spin-05c3313f 1s linear infinite;
|
|
339
341
|
}
|
|
340
|
-
.hlw-menu-muted[data-v-
|
|
342
|
+
.hlw-menu-muted[data-v-05c3313f] {
|
|
341
343
|
color: #94a3b8;
|
|
342
344
|
font-size: 20rpx;
|
|
343
345
|
}
|
|
344
|
-
@keyframes icon-spin-
|
|
346
|
+
@keyframes icon-spin-05c3313f {
|
|
345
347
|
from {
|
|
346
348
|
transform: rotate(0deg);
|
|
347
349
|
}
|
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<view class="hlw-menu">
|
|
2
|
+
<view class="hlw-menu" :class="{ 'hlw-menu--no-border': !props.border }">
|
|
3
3
|
<!-- 标题 -->
|
|
4
4
|
<view v-if="props.title" class="hlw-menu-title">
|
|
5
5
|
<text>{{ props.title }}</text>
|
|
@@ -80,12 +80,15 @@ interface Props {
|
|
|
80
80
|
mode?: "list" | "grid";
|
|
81
81
|
/** 宫格列数,默认 4 */
|
|
82
82
|
columns?: number;
|
|
83
|
+
/** 是否显示外边框,默认 true */
|
|
84
|
+
border?: boolean;
|
|
83
85
|
}
|
|
84
86
|
|
|
85
87
|
const props = withDefaults(defineProps<Props>(), {
|
|
86
88
|
title: "",
|
|
87
89
|
mode: "list",
|
|
88
90
|
columns: 4,
|
|
91
|
+
border: true,
|
|
89
92
|
});
|
|
90
93
|
|
|
91
94
|
const emit = defineEmits<{
|
|
@@ -106,11 +109,15 @@ const handleClick = (item: HlwMenuItem) => {
|
|
|
106
109
|
border: 1rpx solid var(--border-color, #e2e8f0);
|
|
107
110
|
overflow: hidden;
|
|
108
111
|
width: 100%;
|
|
112
|
+
|
|
113
|
+
&--no-border {
|
|
114
|
+
border: none;
|
|
115
|
+
}
|
|
109
116
|
}
|
|
110
117
|
|
|
111
118
|
/* 标题 */
|
|
112
119
|
.hlw-menu-title {
|
|
113
|
-
padding: 24rpx 32rpx
|
|
120
|
+
padding: 24rpx 32rpx;
|
|
114
121
|
text {
|
|
115
122
|
font-size: 24rpx;
|
|
116
123
|
font-weight: 600;
|
|
@@ -120,7 +127,6 @@ const handleClick = (item: HlwMenuItem) => {
|
|
|
120
127
|
}
|
|
121
128
|
|
|
122
129
|
.hlw-menu-title-divider {
|
|
123
|
-
margin: 16rpx 32rpx 0;
|
|
124
130
|
height: 0;
|
|
125
131
|
border-bottom: 1rpx dashed var(--border-color, #e2e8f0);
|
|
126
132
|
}
|