@hlw-uni/mp-vue 1.1.2 → 1.1.4

package/dist/style.css

@@ -297,7 +297,7 @@ to {
     font-size: var(--font-base, 28rpx);
     color: #bbb;
 }
-.hlw-header[data-v-b85e90ac] {
+.hlw-header[data-v-8497ffe5] {
   position: sticky;
   top: 0;
   z-index: 999;
@@ -305,18 +305,18 @@ to {
   flex-direction: column;
   overflow: hidden;
 }
-.header-bg-layer[data-v-b85e90ac] {
+.header-bg-layer[data-v-8497ffe5] {
   position: absolute;
   inset: 0;
   z-index: 0;
 }
-.status-bar-spacer[data-v-b85e90ac] {
+.status-bar-spacer[data-v-8497ffe5] {
   flex-shrink: 0;
   width: 100%;
   position: relative;
   z-index: 1;
 }
-.header-content-area[data-v-b85e90ac] {
+.header-content-area[data-v-8497ffe5] {
   flex-shrink: 0;
   width: 100%;
   display: flex;
@@ -324,29 +324,34 @@ to {
   position: relative;
   z-index: 1;
 }
-.header-back[data-v-b85e90ac] {
+.header-back[data-v-8497ffe5] {
   width: 88rpx;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
+  color: #475569;
+}
+.header-back[data-v-8497ffe5]:active {
+  opacity: 0.8;
 }
-.header-back-icon[data-v-b85e90ac] {
-  font-size: 36rpx;
+.header-back-icon[data-v-8497ffe5] {
+  font-size: var(--font-md, 32rpx);
+  color: inherit;
 }
-.header-title[data-v-b85e90ac] {
+.header-title[data-v-8497ffe5] {
   flex: 1;
   overflow: hidden;
 }
-.header-title--center[data-v-b85e90ac] {
+.header-title--center[data-v-8497ffe5] {
   text-align: center;
 }
-.header-title--left[data-v-b85e90ac] {
+.header-title--left[data-v-8497ffe5] {
   text-align: left;
   padding-left: 4rpx;
 }
-.header-title-text[data-v-b85e90ac] {
+.header-title-text[data-v-8497ffe5] {
   display: block;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -356,7 +361,7 @@ to {
   font-weight: 500;
   color: #14181f;
 }
-.header-placeholder[data-v-b85e90ac] {
+.header-placeholder[data-v-8497ffe5] {
   width: 88rpx;
   flex-shrink: 0;
 }
@@ -709,97 +714,112 @@ to {
 100% {
     transform: translateX(-100%);
 }
-}.hlw-page[data-v-0cf37585] {
+}.hlw-page[data-v-01bb7796] {
   width: 100%;
   height: 100vh;
   display: flex;
   flex-direction: column;
   overflow: hidden;
 }
-.hlw-page-header[data-v-0cf37585] {
+.hlw-page-header[data-v-01bb7796] {
   flex-shrink: 0;
 }
-.hlw-page-content[data-v-0cf37585] {
+.hlw-page-content[data-v-01bb7796] {
   flex: 1;
   height: 0;
   width: 100%;
 }
-.hlw-page-footer[data-v-0cf37585] {
+.hlw-page-footer[data-v-01bb7796] {
   flex-shrink: 0;
-}.hlw-popup-mask[data-v-2d71ef9b] {
+}.hlw-popup-mask[data-v-be12aee0] {
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.5);
   z-index: 1000;
-  animation: hlw-fade-in-2d71ef9b 0.25s;
+  animation: hlw-fade-in-be12aee0 0.25s;
 }
-.hlw-popup[data-v-2d71ef9b] {
+.hlw-popup[data-v-be12aee0] {
   position: fixed;
   z-index: 1001;
   background: #fff;
-  transition: transform 0.3s ease, opacity 0.3s ease;
 }
-.hlw-popup--bottom[data-v-2d71ef9b] {
+.hlw-popup--bottom[data-v-be12aee0] {
   left: 0;
   right: 0;
   bottom: 0;
   max-height: 80vh;
-  transform: translateY(100%);
+  animation: hlw-popup-slide-up-be12aee0 0.25s ease;
 }
-.hlw-popup--bottom.hlw-popup--show[data-v-2d71ef9b] {
-  transform: translateY(0);
-}
-.hlw-popup--bottom.hlw-popup--round[data-v-2d71ef9b] {
+.hlw-popup--bottom.hlw-popup--round[data-v-be12aee0] {
   border-radius: var(--radius-xl, 32rpx) var(--radius-xl, 32rpx) 0 0;
 }
-.hlw-popup--top[data-v-2d71ef9b] {
+.hlw-popup--top[data-v-be12aee0] {
   left: 0;
   right: 0;
   top: 0;
   max-height: 80vh;
-  transform: translateY(-100%);
-}
-.hlw-popup--top.hlw-popup--show[data-v-2d71ef9b] {
-  transform: translateY(0);
+  animation: hlw-popup-slide-down-be12aee0 0.25s ease;
 }
-.hlw-popup--top.hlw-popup--round[data-v-2d71ef9b] {
+.hlw-popup--top.hlw-popup--round[data-v-be12aee0] {
   border-radius: 0 0 var(--radius-xl, 32rpx) var(--radius-xl, 32rpx);
 }
-.hlw-popup--center[data-v-2d71ef9b] {
+.hlw-popup--center[data-v-be12aee0] {
   left: 50%;
   top: 50%;
   width: 80%;
-  transform: translate(-50%, -50%) scale(0.9);
-  opacity: 0;
+  transform: translate(-50%, -50%);
   border-radius: var(--radius-xl, 32rpx);
+  animation: hlw-popup-scale-in-be12aee0 0.22s ease;
 }
-.hlw-popup--center.hlw-popup--show[data-v-2d71ef9b] {
-  transform: translate(-50%, -50%) scale(1);
-  opacity: 1;
-}
-.hlw-popup-header[data-v-2d71ef9b] {
+.hlw-popup-header[data-v-be12aee0] {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 28rpx 32rpx;
   border-bottom: 1rpx solid var(--border-color-light, #f1f5f9);
 }
-.hlw-popup-title[data-v-2d71ef9b] {
+.hlw-popup-title[data-v-be12aee0] {
   font-size: var(--font-md, 32rpx);
   font-weight: 600;
   color: #1e293b;
 }
-.hlw-popup-close[data-v-2d71ef9b] {
+.hlw-popup-close[data-v-be12aee0] {
   font-size: 32rpx;
   color: #94a3b8;
   line-height: 1;
   padding: 4rpx;
 }
-@keyframes hlw-fade-in-2d71ef9b {
+@keyframes hlw-fade-in-be12aee0 {
+from {
+    opacity: 0;
+}
+to {
+    opacity: 1;
+}
+}
+@keyframes hlw-popup-slide-up-be12aee0 {
+from {
+    transform: translateY(100%);
+}
+to {
+    transform: translateY(0);
+}
+}
+@keyframes hlw-popup-slide-down-be12aee0 {
 from {
+    transform: translateY(-100%);
+}
+to {
+    transform: translateY(0);
+}
+}
+@keyframes hlw-popup-scale-in-be12aee0 {
+from {
+    transform: translate(-50%, -50%) scale(0.92);
     opacity: 0;
 }
 to {
+    transform: translate(-50%, -50%) scale(1);
     opacity: 1;
 }
 }.hlw-search[data-v-4fe1bfab] {
@@ -933,74 +953,90 @@ to {
   border-radius: 6rpx;
   background: var(--primary-color, #3b82f6);
   transition: width 0.2s;
-}.hlw-tag[data-v-fd774288] {
+}.hlw-tag[data-v-e4ea56ad] {
   display: inline-flex;
   align-items: center;
+  justify-content: center;
+  vertical-align: middle;
   gap: 4rpx;
   font-weight: 500;
+  line-height: 1.2;
   border: 2rpx solid transparent;
+  box-sizing: border-box;
 }
-.hlw-tag--medium[data-v-fd774288] {
+.hlw-tag--medium[data-v-e4ea56ad] {
+  min-height: 36rpx;
   padding: 4rpx 16rpx;
   font-size: var(--font-xs, 20rpx);
   border-radius: var(--radius-sm, 8rpx);
 }
-.hlw-tag--small[data-v-fd774288] {
+.hlw-tag--small[data-v-e4ea56ad] {
+  min-height: 28rpx;
   padding: 2rpx 10rpx;
   font-size: 18rpx;
   border-radius: 6rpx;
 }
-.hlw-tag--round[data-v-fd774288] {
+.hlw-tag--round[data-v-e4ea56ad] {
   border-radius: 999rpx;
 }
-.hlw-tag--primary[data-v-fd774288] {
+.hlw-tag--primary[data-v-e4ea56ad] {
   background: var(--primary-color, #3b82f6);
   color: #fff;
   border-color: var(--primary-color, #3b82f6);
 }
-.hlw-tag--primary.hlw-tag--plain[data-v-fd774288] {
+.hlw-tag--primary.hlw-tag--plain[data-v-e4ea56ad] {
   background: transparent;
   color: var(--primary-color, #3b82f6);
 }
-.hlw-tag--success[data-v-fd774288] {
+.hlw-tag--success[data-v-e4ea56ad] {
   background: #10b981;
   color: #fff;
   border-color: #10b981;
 }
-.hlw-tag--success.hlw-tag--plain[data-v-fd774288] {
+.hlw-tag--success.hlw-tag--plain[data-v-e4ea56ad] {
   background: transparent;
   color: #10b981;
 }
-.hlw-tag--warning[data-v-fd774288] {
+.hlw-tag--warning[data-v-e4ea56ad] {
   background: #f59e0b;
   color: #fff;
   border-color: #f59e0b;
 }
-.hlw-tag--warning.hlw-tag--plain[data-v-fd774288] {
+.hlw-tag--warning.hlw-tag--plain[data-v-e4ea56ad] {
   background: transparent;
   color: #f59e0b;
 }
-.hlw-tag--danger[data-v-fd774288] {
+.hlw-tag--danger[data-v-e4ea56ad] {
   background: #ef4444;
   color: #fff;
   border-color: #ef4444;
 }
-.hlw-tag--danger.hlw-tag--plain[data-v-fd774288] {
+.hlw-tag--danger.hlw-tag--plain[data-v-e4ea56ad] {
   background: transparent;
   color: #ef4444;
 }
-.hlw-tag--info[data-v-fd774288] {
+.hlw-tag--info[data-v-e4ea56ad] {
   background: #64748b;
   color: #fff;
   border-color: #64748b;
 }
-.hlw-tag--info.hlw-tag--plain[data-v-fd774288] {
+.hlw-tag--info.hlw-tag--plain[data-v-e4ea56ad] {
   background: transparent;
   color: #64748b;
 }
-.hlw-tag-close[data-v-fd774288] {
+.hlw-tag-text[data-v-e4ea56ad] {
+  display: block;
+  font-size: inherit;
+  font-weight: inherit;
+  color: inherit;
+  line-height: 1.2;
+}
+.hlw-tag-close[data-v-e4ea56ad] {
   font-size: 1em;
   line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   margin-left: 2rpx;
   opacity: 0.8;
 }

package/package.json

@@ -1,16 +1,17 @@
 {
     "name": "@hlw-uni/mp-vue",
-    "version": "1.1.2",
+    "version": "1.1.4",
     "description": "hlw-uni Vue 组件库 — 供小程序业务方使用的 UI 组件集合",
-    "main": "src/index.ts",
-    "module": "src/index.ts",
-    "types": "src/index.ts",
+    "main": "dist/index.js",
+    "module": "dist/index.mjs",
+    "types": "dist/index.d.ts",
     "exports": {
         ".": {
-            "import": "./src/index.ts",
-            "require": "./src/index.ts",
-            "types": "./src/index.ts"
+            "import": "./dist/index.mjs",
+            "require": "./dist/index.js",
+            "types": "./dist/index.d.ts"
         },
+        "./dist/*": "./dist/*",
         "./src/*": "./src/*"
     },
     "files": [

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

@@ -172,10 +172,16 @@ const totalNavBarHeight = computed(() => statusBarHeight.value + NAV_BAR_CONTENT
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
+    color: #475569;
+
+    &:active {
+        opacity: 0.8;
+    }
 }
 
 .header-back-icon {
-    font-size: 36rpx;
+    font-size: var(--font-md, 32rpx);
+    color: inherit;
 }
 
 .header-title {

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

@@ -1,5 +1,5 @@
 <template>
-    <view class="hlw-page">
+    <view class="hlw-page" :style="themePageStyle">
         <view class="hlw-page-header">
             <slot name="header">
                 <hlw-header
@@ -16,6 +16,7 @@
             :enable-flex="true"
             :enhanced="true"
             :show-scrollbar="false"
+            :style="themePageStyle"
         >
             <slot></slot>
         </scroll-view>
@@ -26,6 +27,7 @@
 </template>
 
 <script setup lang="ts">
+import { useThemePageStyle } from "../../composables/theme";
 /**
  * HlwPage — 页面布局容器
  *
@@ -61,6 +63,8 @@ const props = withDefaults(defineProps<Props>(), {
     isBack: false,
     bgClass: "",
 });
+
+const { themePageStyle } = useThemePageStyle();
 </script>
 
 <style lang="scss" scoped>

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

@@ -1,12 +1,18 @@
 <template>
-    <view v-if="show" class="hlw-popup-mask" @tap.self="onClose" />
-    <view class="hlw-popup" :class="[`hlw-popup--${position}`, { 'hlw-popup--show': show, 'hlw-popup--round': round }]">
-        <view v-if="title || closable" class="hlw-popup-header">
-            <text class="hlw-popup-title">{{ title }}</text>
-            <view v-if="closable" class="hlw-popup-close i-fa6-solid-xmark" @tap="onClose" />
+    <template v-if="show">
+        <view class="hlw-popup-mask" @tap.self="onClose" />
+        <view
+            class="hlw-popup"
+            :class="[`hlw-popup--${position}`, { 'hlw-popup--round': round }]"
+            @tap.stop
+        >
+            <view v-if="title || closable" class="hlw-popup-header">
+                <text class="hlw-popup-title">{{ title }}</text>
+                <view v-if="closable" class="hlw-popup-close i-fa6-solid-xmark" @tap="onClose" />
+            </view>
+            <slot />
         </view>
-        <slot />
-    </view>
+    </template>
 </template>
 
 <script setup lang="ts">
@@ -47,16 +53,17 @@ function onClose() {
     position: fixed;
     z-index: 1001;
     background: #fff;
-    transition: transform 0.3s ease, opacity 0.3s ease;
 
     &--bottom {
         left: 0;
         right: 0;
         bottom: 0;
         max-height: 80vh;
-        transform: translateY(100%);
-        &.hlw-popup--show { transform: translateY(0); }
-        &.hlw-popup--round { border-radius: var(--radius-xl, 32rpx) var(--radius-xl, 32rpx) 0 0; }
+        animation: hlw-popup-slide-up 0.25s ease;
+
+        &.hlw-popup--round {
+            border-radius: var(--radius-xl, 32rpx) var(--radius-xl, 32rpx) 0 0;
+        }
     }
 
     &--top {
@@ -64,19 +71,20 @@ function onClose() {
         right: 0;
         top: 0;
         max-height: 80vh;
-        transform: translateY(-100%);
-        &.hlw-popup--show { transform: translateY(0); }
-        &.hlw-popup--round { border-radius: 0 0 var(--radius-xl, 32rpx) var(--radius-xl, 32rpx); }
+        animation: hlw-popup-slide-down 0.25s ease;
+
+        &.hlw-popup--round {
+            border-radius: 0 0 var(--radius-xl, 32rpx) var(--radius-xl, 32rpx);
+        }
     }
 
     &--center {
         left: 50%;
         top: 50%;
         width: 80%;
-        transform: translate(-50%, -50%) scale(0.9);
-        opacity: 0;
+        transform: translate(-50%, -50%);
         border-radius: var(--radius-xl, 32rpx);
-        &.hlw-popup--show { transform: translate(-50%, -50%) scale(1); opacity: 1; }
+        animation: hlw-popup-scale-in 0.22s ease;
     }
 }
 
@@ -105,4 +113,19 @@ function onClose() {
     from { opacity: 0; }
     to { opacity: 1; }
 }
+
+@keyframes hlw-popup-slide-up {
+    from { transform: translateY(100%); }
+    to { transform: translateY(0); }
+}
+
+@keyframes hlw-popup-slide-down {
+    from { transform: translateY(-100%); }
+    to { transform: translateY(0); }
+}
+
+@keyframes hlw-popup-scale-in {
+    from { transform: translate(-50%, -50%) scale(0.92); opacity: 0; }
+    to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
+}
 </style>

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

@@ -5,7 +5,7 @@
         :style="customStyle"
         @tap="$emit('click')"
     >
-        <slot />
+        <text class="hlw-tag-text"><slot /></text>
         <view v-if="closable" class="hlw-tag-close i-fa6-solid-xmark" @tap.stop="$emit('close')" />
     </view>
 </template>
@@ -53,12 +53,28 @@ $colors: (
 .hlw-tag {
     display: inline-flex;
     align-items: center;
+    justify-content: center;
+    vertical-align: middle;
     gap: 4rpx;
     font-weight: 500;
+    line-height: 1.2;
     border: 2rpx solid transparent;
+    box-sizing: border-box;
+
+    &--medium {
+        min-height: 36rpx;
+        padding: 4rpx 16rpx;
+        font-size: var(--font-xs, 20rpx);
+        border-radius: var(--radius-sm, 8rpx);
+    }
+
+    &--small {
+        min-height: 28rpx;
+        padding: 2rpx 10rpx;
+        font-size: 18rpx;
+        border-radius: 6rpx;
+    }
 
-    &--medium { padding: 4rpx 16rpx; font-size: var(--font-xs, 20rpx); border-radius: var(--radius-sm, 8rpx); }
-    &--small { padding: 2rpx 10rpx; font-size: 18rpx; border-radius: 6rpx; }
     &--round { border-radius: 999rpx; }
 
     @each $name, $c in $colors {
@@ -67,9 +83,20 @@ $colors: (
     }
 }
 
+.hlw-tag-text {
+    display: block;
+    font-size: inherit;
+    font-weight: inherit;
+    color: inherit;
+    line-height: 1.2;
+}
+
 .hlw-tag-close {
     font-size: 1em;
     line-height: 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
     margin-left: 2rpx;
     opacity: 0.8;
 }