@hlw-uni/mp-vue 1.0.35 → 1.1.0

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

@@ -0,0 +1,104 @@
+<template>
+    <scroll-view class="hlw-tabs" :scroll-x="scrollable" :enhanced="true" :show-scrollbar="false">
+        <view class="hlw-tabs-wrap">
+            <view
+                v-for="(item, index) in items"
+                :key="index"
+                class="hlw-tab"
+                :class="{ 'hlw-tab--active': modelValue === index }"
+                @tap="onChange(index)"
+            >
+                <text class="hlw-tab-text">{{ typeof item === "string" ? item : item.label }}</text>
+                <view
+                    v-if="typeof item !== 'string' && item.badge"
+                    class="hlw-tab-badge"
+                >{{ item.badge }}</view>
+                <view v-if="modelValue === index" class="hlw-tab-line" :style="{ width: lineWidth }" />
+            </view>
+        </view>
+    </scroll-view>
+</template>
+
+<script setup lang="ts">
+export interface HlwTabItem {
+    label: string;
+    badge?: string;
+}
+
+interface Props {
+    modelValue?: number;
+    items?: (string | HlwTabItem)[];
+    scrollable?: boolean;
+    lineWidth?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+    modelValue: 0,
+    items: () => [],
+    scrollable: false,
+    lineWidth: "40rpx",
+});
+
+const emit = defineEmits<{ "update:modelValue": [index: number]; change: [index: number] }>();
+
+function onChange(index: number) {
+    emit("update:modelValue", index);
+    emit("change", index);
+}
+</script>
+
+<style lang="scss" scoped>
+.hlw-tabs {
+    background: #fff;
+    white-space: nowrap;
+}
+
+.hlw-tabs-wrap {
+    display: inline-flex;
+    min-width: 100%;
+}
+
+.hlw-tab {
+    position: relative;
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 24rpx 28rpx;
+    gap: 6rpx;
+    transition: color 0.2s;
+
+    &--active .hlw-tab-text {
+        color: var(--primary-color, #3b82f6);
+        font-weight: 600;
+    }
+}
+
+.hlw-tab-text {
+    font-size: var(--font-base, 28rpx);
+    color: #64748b;
+}
+
+.hlw-tab-badge {
+    padding: 0 8rpx;
+    min-width: 28rpx;
+    height: 28rpx;
+    line-height: 28rpx;
+    font-size: 18rpx;
+    text-align: center;
+    color: #fff;
+    background: #ef4444;
+    border-radius: 999rpx;
+}
+
+.hlw-tab-line {
+    position: absolute;
+    bottom: 4rpx;
+    left: 50%;
+    transform: translateX(-50%);
+    height: 6rpx;
+    border-radius: 6rpx;
+    background: var(--primary-color, #3b82f6);
+    transition: width 0.2s;
+}
+</style>

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

@@ -0,0 +1,76 @@
+<template>
+    <view
+        class="hlw-tag"
+        :class="[`hlw-tag--${type}`, `hlw-tag--${size}`, { 'hlw-tag--plain': plain, 'hlw-tag--round': round }]"
+        :style="customStyle"
+        @tap="$emit('click')"
+    >
+        <slot />
+        <view v-if="closable" class="hlw-tag-close" @tap.stop="$emit('close')">&#215;</view>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+interface Props {
+    type?: "primary" | "success" | "warning" | "danger" | "info";
+    plain?: boolean;
+    closable?: boolean;
+    size?: "small" | "medium";
+    round?: boolean;
+    color?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    type: "primary",
+    plain: false,
+    closable: false,
+    size: "medium",
+    round: false,
+    color: "",
+});
+
+defineEmits<{ click: []; close: [] }>();
+
+const customStyle = computed(() => {
+    if (!props.color) return {};
+    return props.plain
+        ? { color: props.color, borderColor: props.color, background: "transparent" }
+        : { background: props.color, color: "#fff", borderColor: props.color };
+});
+</script>
+
+<style lang="scss" scoped>
+$colors: (
+    primary: var(--primary-color, #3b82f6),
+    success: #10b981,
+    warning: #f59e0b,
+    danger: #ef4444,
+    info: #64748b,
+);
+
+.hlw-tag {
+    display: inline-flex;
+    align-items: center;
+    gap: 4rpx;
+    font-weight: 500;
+    border: 2rpx solid transparent;
+
+    &--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 {
+        &--#{$name} { background: #{$c}; color: #fff; border-color: #{$c}; }
+        &--#{$name}.hlw-tag--plain { background: transparent; color: #{$c}; }
+    }
+}
+
+.hlw-tag-close {
+    font-size: 1.2em;
+    line-height: 1;
+    margin-left: 2rpx;
+    opacity: 0.8;
+}
+</style>

package/src/index.ts

@@ -4,13 +4,24 @@
 
 export { default as HlwAd } from "./components/hlw-ad/index.vue";
 export { default as HlwAvatar } from "./components/hlw-avatar/index.vue";
+export { default as HlwButton } from "./components/hlw-button/index.vue";
 export { default as HlwCard } from "./components/hlw-card/index.vue";
+export { default as HlwCell } from "./components/hlw-cell/index.vue";
+export { default as HlwDivider } from "./components/hlw-divider/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 HlwMenu } from "./components/hlw-menu/index.vue";
 export type { HlwMenuItem } from "./components/hlw-menu/types";
+export { default as HlwModal } from "./components/hlw-modal/index.vue";
+export { default as HlwNoticeBar } from "./components/hlw-notice-bar/index.vue";
 export { default as HlwPage } from "./components/hlw-page/index.vue";
+export { default as HlwPopup } from "./components/hlw-popup/index.vue";
+export { default as HlwSearch } from "./components/hlw-search/index.vue";
+export { default as HlwSkeleton } from "./components/hlw-skeleton/index.vue";
+export { default as HlwTabs } from "./components/hlw-tabs/index.vue";
+export { default as HlwTag } from "./components/hlw-tag/index.vue";
+export type { HlwTabItem } from "./components/hlw-tabs/index.vue";
 export type { FontScale, FontPreset, ThemeColor } from "./composables/theme";
 export { FONT_PRESETS, FONT_SCALE_KEY, DEFAULT_THEMES, THEME_COLOR_KEY, THEME_CHANGE_EVENT, getCurrentFontScale, getCurrentFontVars, getCurrentThemeColor, getCurrentThemeVars, buildThemeStyle, useThemePageStyle } from "./composables/theme";
 export { useThemeStore } from "./stores/theme";