@hlw-uni/mp-vue 1.0.5 → 1.0.7

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 CHANGED
@@ -240,7 +240,9 @@
240
240
  }, [..._cache[0] || (_cache[0] = [
241
241
  vue.createElementVNode("text", { class: "iconfont icon-back" }, null, -1)
242
242
  ])]),
243
- vue.createElementVNode("view", _hoisted_1$3, vue.toDisplayString(props.title), 1),
243
+ vue.createElementVNode("view", _hoisted_1$3, [
244
+ vue.createElementVNode("text", null, vue.toDisplayString(props.title), 1)
245
+ ]),
244
246
  _cache[1] || (_cache[1] = vue.createElementVNode("view", { class: "header-placeholder" }, null, -1))
245
247
  ], 64)) : vue.renderSlot(_ctx.$slots, "default", { key: 1 }, () => [
246
248
  props.title ? (vue.openBlock(), vue.createElementBlock("view", _hoisted_2$3, vue.toDisplayString(props.title), 1)) : vue.createCommentVNode("", true)
@@ -250,7 +252,7 @@
250
252
  };
251
253
  }
252
254
  });
253
- const index$3 = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-e6af34e4"]]);
255
+ const index$3 = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-cebafa4e"]]);
254
256
  const _hoisted_1$2 = { class: "hlw-loading" };
255
257
  const _hoisted_2$2 = {
256
258
  key: 0,
package/dist/index.mjs CHANGED
@@ -237,7 +237,9 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
237
237
  }, [..._cache[0] || (_cache[0] = [
238
238
  createElementVNode("text", { class: "iconfont icon-back" }, null, -1)
239
239
  ])]),
240
- createElementVNode("view", _hoisted_1$3, toDisplayString(props.title), 1),
240
+ createElementVNode("view", _hoisted_1$3, [
241
+ createElementVNode("text", null, toDisplayString(props.title), 1)
242
+ ]),
241
243
  _cache[1] || (_cache[1] = createElementVNode("view", { class: "header-placeholder" }, null, -1))
242
244
  ], 64)) : renderSlot(_ctx.$slots, "default", { key: 1 }, () => [
243
245
  props.title ? (openBlock(), createElementBlock("view", _hoisted_2$3, toDisplayString(props.title), 1)) : createCommentVNode("", true)
@@ -247,7 +249,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
247
249
  };
248
250
  }
249
251
  });
250
- const index$3 = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-e6af34e4"]]);
252
+ const index$3 = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-cebafa4e"]]);
251
253
  const _hoisted_1$2 = { class: "hlw-loading" };
252
254
  const _hoisted_2$2 = {
253
255
  key: 0,
package/dist/style.css CHANGED
@@ -57,7 +57,7 @@
57
57
  font-size: 28rpx;
58
58
  color: #bbb;
59
59
  }
60
- .hlw-header[data-v-e6af34e4] {
60
+ .hlw-header[data-v-cebafa4e] {
61
61
  position: sticky;
62
62
  top: 0;
63
63
  z-index: 999;
@@ -65,7 +65,7 @@
65
65
  flex-direction: column;
66
66
  overflow: hidden;
67
67
  }
68
- .header-bg-layer[data-v-e6af34e4] {
68
+ .header-bg-layer[data-v-cebafa4e] {
69
69
  position: absolute;
70
70
  top: 0;
71
71
  left: 0;
@@ -73,13 +73,13 @@
73
73
  bottom: 0;
74
74
  z-index: 0;
75
75
  }
76
- .status-bar-spacer[data-v-e6af34e4] {
76
+ .status-bar-spacer[data-v-cebafa4e] {
77
77
  flex-shrink: 0;
78
78
  width: 100%;
79
79
  position: relative;
80
80
  z-index: 1;
81
81
  }
82
- .header-content-area[data-v-e6af34e4] {
82
+ .header-content-area[data-v-cebafa4e] {
83
83
  flex-shrink: 0;
84
84
  width: 100%;
85
85
  display: flex;
@@ -87,7 +87,7 @@
87
87
  position: relative;
88
88
  z-index: 1;
89
89
  }
90
- .header-back[data-v-e6af34e4] {
90
+ .header-back[data-v-cebafa4e] {
91
91
  width: 88rpx;
92
92
  height: 100%;
93
93
  display: flex;
@@ -95,19 +95,22 @@
95
95
  justify-content: center;
96
96
  flex-shrink: 0;
97
97
  }
98
- .header-back .iconfont[data-v-e6af34e4] {
98
+ .header-back .iconfont[data-v-cebafa4e] {
99
99
  font-size: 40rpx;
100
100
  }
101
- .header-title[data-v-e6af34e4] {
101
+ .header-title[data-v-cebafa4e] {
102
102
  flex: 1;
103
- text-align: center;
104
- font-size: 28rpx;
105
- font-weight: 500;
106
103
  overflow: hidden;
107
104
  text-overflow: ellipsis;
108
105
  white-space: nowrap;
106
+ letter-spacing: 1rpx;
107
+ }
108
+ .header-title text[data-v-cebafa4e] {
109
+ text-align: center;
110
+ font-size: 26rpx;
111
+ font-weight: 500;
109
112
  }
110
- .header-placeholder[data-v-e6af34e4] {
113
+ .header-placeholder[data-v-cebafa4e] {
111
114
  width: 88rpx;
112
115
  flex-shrink: 0;
113
116
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hlw-uni/mp-vue",
3
- "version": "1.0.5",
3
+ "version": "1.0.7",
4
4
  "description": "hlw-uni Vue 组件库 — 供小程序业务方使用的 UI 组件集合",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",
@@ -20,7 +20,8 @@
20
20
  ],
21
21
  "scripts": {
22
22
  "build": "vite build",
23
- "dev": "vite build --watch"
23
+ "dev": "vite build --watch",
24
+ "publish:npm": "pnpm build && npm publish --access public"
24
25
  },
25
26
  "publishConfig": {
26
27
  "access": "public"
@@ -1,70 +1,72 @@
1
1
  <template>
2
- <view class="hlw-header" :style="{ height: totalNavBarHeight + 'px' }">
3
- <view class="header-bg-layer" :class="hasBgSlot ? '' : props.bgClass">
4
- <slot v-if="!props.isBack" name="bg"></slot>
5
- </view>
6
- <view class="status-bar-spacer" :style="{ height: statusBarHeight + 'px' }"></view>
7
- <view class="header-content-area" :style="{ height: NAV_BAR_CONTENT_HEIGHT + 'px' }">
8
- <template v-if="props.isBack">
9
- <view class="header-back" @click="handleBack">
10
- <text class="iconfont icon-back"></text>
2
+ <view class="hlw-header" :style="{ height: totalNavBarHeight + 'px' }">
3
+ <view class="header-bg-layer" :class="hasBgSlot ? '' : props.bgClass">
4
+ <slot v-if="!props.isBack" name="bg"></slot>
5
+ </view>
6
+ <view class="status-bar-spacer" :style="{ height: statusBarHeight + 'px' }"></view>
7
+ <view class="header-content-area" :style="{ height: NAV_BAR_CONTENT_HEIGHT + 'px' }">
8
+ <template v-if="props.isBack">
9
+ <view class="header-back" @click="handleBack">
10
+ <text class="iconfont icon-back"></text>
11
+ </view>
12
+ <view class="header-title">
13
+ <text>{{ props.title }}</text>
14
+ </view>
15
+ <view class="header-placeholder"></view>
16
+ </template>
17
+ <slot v-else>
18
+ <view v-if="props.title" class="header-title">{{ props.title }}</view>
19
+ </slot>
11
20
  </view>
12
- <view class="header-title">{{ props.title }}</view>
13
- <view class="header-placeholder"></view>
14
- </template>
15
- <slot v-else>
16
- <view v-if="props.title" class="header-title">{{ props.title }}</view>
17
- </slot>
18
21
  </view>
19
- </view>
20
22
  </template>
21
23
 
22
24
  <script setup lang="ts">
23
- import { ref, computed, useSlots } from 'vue';
25
+ import { ref, computed, useSlots } from "vue";
24
26
 
25
27
  const getNavBarContentHeight = (): number => {
26
- try {
27
- const menuInfo = uni.getMenuButtonBoundingClientRect?.();
28
- if (!menuInfo) return 44;
29
- const systemInfo = uni.getSystemInfoSync();
30
- return (menuInfo.top - systemInfo.statusBarHeight!) * 2 + menuInfo.height;
31
- } catch {
32
- return 44;
33
- }
28
+ try {
29
+ const menuInfo = uni.getMenuButtonBoundingClientRect?.();
30
+ if (!menuInfo) return 44;
31
+ const systemInfo = uni.getSystemInfoSync();
32
+ return (menuInfo.top - systemInfo.statusBarHeight!) * 2 + menuInfo.height;
33
+ } catch {
34
+ return 44;
35
+ }
34
36
  };
35
37
 
36
38
  const getStatusBarHeight = (): number => {
37
- try {
38
- const systemInfo = uni.getSystemInfoSync();
39
- return systemInfo.statusBarHeight || 20;
40
- } catch {
41
- return 20;
42
- }
39
+ try {
40
+ const systemInfo = uni.getSystemInfoSync();
41
+ return systemInfo.statusBarHeight || 20;
42
+ } catch {
43
+ return 20;
44
+ }
43
45
  };
44
46
 
45
47
  const NAV_BAR_CONTENT_HEIGHT = getNavBarContentHeight();
46
48
 
47
49
  interface Props {
48
- extraHeight?: number;
49
- bgClass?: string;
50
- isBack?: boolean;
51
- title?: string;
50
+ extraHeight?: number;
51
+ bgClass?: string;
52
+ isBack?: boolean;
53
+ title?: string;
52
54
  }
53
55
 
54
56
  const props = withDefaults(defineProps<Props>(), {
55
- extraHeight: 0,
56
- bgClass: '',
57
- isBack: false,
58
- title: '',
57
+ extraHeight: 0,
58
+ bgClass: "",
59
+ isBack: false,
60
+ title: "",
59
61
  });
60
62
 
61
63
  const emit = defineEmits<{
62
- back: [];
64
+ back: [];
63
65
  }>();
64
66
 
65
67
  const handleBack = () => {
66
- emit('back');
67
- uni.navigateBack({ delta: 1 });
68
+ emit("back");
69
+ uni.navigateBack({ delta: 1 });
68
70
  };
69
71
 
70
72
  const slots = useSlots();
@@ -75,64 +77,68 @@ const totalNavBarHeight = computed(() => statusBarHeight.value + NAV_BAR_CONTENT
75
77
 
76
78
  <style lang="scss" scoped>
77
79
  .hlw-header {
78
- position: sticky;
79
- top: 0;
80
- z-index: 999;
81
- display: flex;
82
- flex-direction: column;
83
- overflow: hidden;
80
+ position: sticky;
81
+ top: 0;
82
+ z-index: 999;
83
+ display: flex;
84
+ flex-direction: column;
85
+ overflow: hidden;
84
86
  }
85
87
 
86
88
  .header-bg-layer {
87
- position: absolute;
88
- top: 0;
89
- left: 0;
90
- right: 0;
91
- bottom: 0;
92
- z-index: 0;
89
+ position: absolute;
90
+ top: 0;
91
+ left: 0;
92
+ right: 0;
93
+ bottom: 0;
94
+ z-index: 0;
93
95
  }
94
96
 
95
97
  .status-bar-spacer {
96
- flex-shrink: 0;
97
- width: 100%;
98
- position: relative;
99
- z-index: 1;
98
+ flex-shrink: 0;
99
+ width: 100%;
100
+ position: relative;
101
+ z-index: 1;
100
102
  }
101
103
 
102
104
  .header-content-area {
103
- flex-shrink: 0;
104
- width: 100%;
105
- display: flex;
106
- align-items: center;
107
- position: relative;
108
- z-index: 1;
105
+ flex-shrink: 0;
106
+ width: 100%;
107
+ display: flex;
108
+ align-items: center;
109
+ position: relative;
110
+ z-index: 1;
109
111
  }
110
112
 
111
113
  .header-back {
112
- width: 88rpx;
113
- height: 100%;
114
- display: flex;
115
- align-items: center;
116
- justify-content: center;
117
- flex-shrink: 0;
118
-
119
- .iconfont {
120
- font-size: 40rpx;
121
- }
114
+ width: 88rpx;
115
+ height: 100%;
116
+ display: flex;
117
+ align-items: center;
118
+ justify-content: center;
119
+ flex-shrink: 0;
120
+
121
+ .iconfont {
122
+ font-size: 40rpx;
123
+ }
122
124
  }
123
125
 
124
126
  .header-title {
125
- flex: 1;
126
- text-align: center;
127
- font-size: 28rpx;
128
- font-weight: 500;
129
- overflow: hidden;
130
- text-overflow: ellipsis;
131
- white-space: nowrap;
127
+ flex: 1;
128
+ overflow: hidden;
129
+ text-overflow: ellipsis;
130
+ white-space: nowrap;
131
+ letter-spacing: 1rpx;
132
+
133
+ text {
134
+ text-align: center;
135
+ font-size: 26rpx;
136
+ font-weight: 500;
137
+ }
132
138
  }
133
139
 
134
140
  .header-placeholder {
135
- width: 88rpx;
136
- flex-shrink: 0;
141
+ width: 88rpx;
142
+ flex-shrink: 0;
137
143
  }
138
144
  </style>