@composy/attendance-vue

@composy/attendance-core 的 Vue 适配层，提供四个组件、组合式函数和全局插件。

特性

• 组件：AttendanceCalendar、AttendanceStats、ClockInPanel、LeavePanel。
• Composables：useAttendanceCalendar、useAttendanceStats、useClockInPanel、useLeavePanel。
• 完整 props 同步：月份、数据、主题、排班、图例、今天按钮、选中日期、禁用态等更新会同步到 core 实例。
• 事件：monthChange、dateClick、clockIn、clock、recordClick。
• 样式：自动引入 ldesign-attendance-* 样式，也可显式引入 @composy/attendance-vue/index.css。

使用

<template>
  <AttendanceCalendar
    :month="month"
    :records="records"
    :schedules="schedules"
    show-shift
    show-today-button
    @date-click="handleDateClick"
  />

  <ClockInPanel
    :today-clocks="todayClocks"
    location="总部大楼"
    method="wifi"
    @clock="handleClock"
  />
</template>

<script setup lang="ts">
import {
  AttendanceCalendar,
  ClockInPanel,
} from '@composy/attendance-vue'
import {
  generateMonthRecords,
  generateSchedules,
  getCurrentMonth,
  type ClockRecord,
  type DayRecord,
} from '@composy/attendance-core'
import '@composy/attendance-vue/index.css'

const month = getCurrentMonth()
const records = generateMonthRecords(month)
const schedules = generateSchedules(month)
const todayClocks: ClockRecord[] = []

function handleDateClick(date: string, record?: DayRecord) {
  console.log(date, record)
}

function handleClock(record: ClockRecord, clocks: ClockRecord[]) {
  console.log(record, clocks)
}
</script>

插件

import { createApp } from 'vue'
import { createAttendancePlugin } from '@composy/attendance-vue'
import '@composy/attendance-vue/index.css'

createApp(App).use(createAttendancePlugin({ prefix: 'L' }))

注册后组件名为 LAttendanceCalendar、LAttendanceStats、LClockInPanel、LLeavePanel。

验证

pnpm --filter @composy/attendance-vue type-check
pnpm --filter @composy/attendance-vue build

License

MIT