admin-vben5/packages/effects/common-ui/src/components/captcha/point-selection-captcha/point-selection-captcha-card.vue

<script setup lang="ts">
import type { PointSelectionCaptchaCardProps } from '../types';

import { computed } from 'vue';

import { $t } from '@vben/locales';
import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@vben-core/shadcn-ui';

const props = withDefaults(defineProps<PointSelectionCaptchaCardProps>(), {
  height: '220px',
  paddingX: '12px',
  paddingY: '16px',
  title: '',
  width: '300px',
});

const emit = defineEmits<{
  click: [MouseEvent];
}>();

const parseValue = (value: number | string) => {
  if (typeof value === 'number') {
    return value;
  }
  const parsed = Number.parseFloat(value);
  return Number.isNaN(parsed) ? 0 : parsed;
};

const rootStyles = computed(() => ({
  padding: `${parseValue(props.paddingY)}px ${parseValue(props.paddingX)}px`,
  width: `${parseValue(props.width) + parseValue(props.paddingX) * 2}px`,
}));

const captchaStyles = computed(() => {
  return {
    height: `${parseValue(props.height)}px`,
    width: `${parseValue(props.width)}px`,
  };
});

function handleClick(e: MouseEvent) {
  emit('click', e);
}
</script>
<template>
  <Card :style="rootStyles" aria-labelledby="captcha-title" role="region">
    <CardHeader class="p-0">
      <CardTitle id="captcha-title" class="flex items-center justify-between">
        <template v-if="$slots.title">
          <slot name="title">{{ $t('ui.captcha.title') }}</slot>
        </template>
        <template v-else>
          <span>{{ title }}</span>
        </template>
        <div class="flex items-center justify-end">
          <slot name="extra"></slot>
        </div>
      </CardTitle>
    </CardHeader>
    <CardContent class="relative mt-2 flex w-full overflow-hidden rounded p-0">
      <img
        v-show="captchaImage"
        :alt="$t('ui.captcha.alt')"
        :src="captchaImage"
        :style="captchaStyles"
        class="relative z-10"
        @click="handleClick"
      />
      <div class="absolute inset-0">
        <slot></slot>
      </div>
    </CardContent>
    <CardFooter class="mt-2 flex justify-between p-0">
      <slot name="footer"></slot>
    </CardFooter>
  </Card>
</template>