designer-hub/packages/merchant/src/components/section-heading.vue

<script lang="ts" setup>
import { right } from '../core/libs/svgs'

const props = defineProps({
  customClass: {
    type: String,
    default: () => '',
  },
  title: {
    type: String,
    default: () => '',
  },
  subtitle: {
    type: String,
    default: undefined,
  },
  path: {
    type: String as PropType<string | undefined>,
    default: () => undefined,
    required: false,
  },
  size: {
    type: String as PropType<'sm' | 'base' | 'lg' | 'xl'>,
    default: () => 'xl',
  },
  endText: {
    type: String,
    default: () => '',
  },
  endArrow: {
    type: Boolean,
    default: () => false,
  },
  endClass: {
    type: String,
    default: '',
  },
  dark: {
    type: Boolean,
    default: false,
  },
})
const handleMore = async () => {
  props.path && (await uni.navigateTo({ url: props.path }))
}
</script>
<template>
  <view
    class="flex justify-between items-center gap-2.5"
    :class="[customClass]"
    @click="handleMore"
  >
    <div
      class="font-normal"
      :class="[
        `text-${size}`,
        (dark
          ? { sm: 'text-white', base: 'text-white', lg: 'text-white', xl: 'text-white' }
          : { sm: 'text-black/90', base: 'text-black/90', lg: 'text-white', xl: 'text-black' })[
          size
        ],
      ]"
    >
      {{ title }}
    </div>
    <div class="text-black/60 text-xs font-normal font-['PingFang_SC'] leading-[10.18px]">
      {{ subtitle }}
    </div>
    <div class="overflow-hidden flex-1">
      <slot name="start"></slot>
    </div>
    <template v-if="$slots.append">
      <slot name="append"></slot>
    </template>
    <div
      v-else
      class="flex items-center gap-1 text-right text-black/30 text-sm font-normal leading-tight"
    >
      <template v-if="endText ?? '' !== ''">{{ endText }}</template>
      <template v-if="path || endArrow">
        <wd-img :src="right" width="12" height="12"></wd-img>
      </template>
    </div>
  </view>
</template>