v-nuxt-ui 0.1.26 → 0.1.27

package/dist/module.json

@@ -7,7 +7,7 @@
   "dependencies": [
     "@nuxt/ui"
   ],
-  "version": "0.1.26",
+  "version": "0.1.27",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/sys/calendar/board.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/sys/calendar/board.vue

@@ -0,0 +1,221 @@
+<script setup>
+import { useDate, useFetching, useSubmitting } from "#v/composables";
+import { useCalendarApi } from "#v/composables/api/sys/useCalendarApi";
+import { TIME_ZONE, CalendarEventType, dateFormat, calendarEventTypeOptions } from "#v/constants";
+import { endOfMonth, now, startOfMonth } from "@internationalized/date";
+import { useToast } from "@nuxt/ui/runtime/composables/useToast.js";
+import { ref, computed, watch } from "vue";
+const apiGroup = useCalendarApi();
+const dateUtil = useDate();
+const toast = useToast();
+const panelDate = ref(now(TIME_ZONE));
+const calendars = ref([]);
+const calendarTypeMap = computed(() => {
+  const map = {};
+  for (const calendar of calendars.value) {
+    map[dateUtil.isoUtcStringToDayjs(calendar.date).format(dateFormat)] = calendar.type;
+  }
+  return map;
+});
+const { fetching, startFetching, endFetching } = useFetching();
+const fetchCalendars = async () => {
+  const start = startOfMonth(panelDate.value).subtract({ days: 7 });
+  const end = endOfMonth(panelDate.value).add({ days: 7 });
+  try {
+    startFetching();
+    const { data } = await apiGroup.list({
+      whereQuery: {
+        items: [
+          {
+            field: "date",
+            opr: "range_gte_lte",
+            value: {
+              start: start.toAbsoluteString(),
+              end: end.toAbsoluteString()
+            }
+          },
+          { field: "type", opr: "ne", value: CalendarEventType.NONE }
+        ]
+      }
+    });
+    if (data.value.data) {
+      mergeCalendars(data.value.data.list);
+    }
+  } finally {
+    endFetching();
+  }
+};
+const mergeCalendars = (newModels) => {
+  const newCalendars = [...calendars.value];
+  for (const newModel of newModels) {
+    const index = newCalendars.findIndex((m) => m.date === newModel.date);
+    if (index !== -1) {
+      newCalendars[index] = newModel;
+    } else {
+      newCalendars.push(newModel);
+    }
+  }
+  calendars.value = newCalendars.filter((calendar) => calendar.type !== CalendarEventType.NONE);
+};
+const selectedDates = ref();
+const calendarEventType = ref(CalendarEventType.HOLIDAY);
+const { submitting, startSubmitting, endSubmitting } = useSubmitting();
+const onSubmit = async () => {
+  if (selectedDates.value?.length === 0 || calendarEventType.value === void 0) {
+    toast.add({
+      color: "warning",
+      title: "\u63D0\u4EA4\u5931\u8D25",
+      description: "\u8BF7\u81F3\u5C11\u9009\u62E9\u4E00\u4E2A\u65E5\u671F\u5E76\u9009\u62E9\u8282\u5047\u65E5\u7C7B\u578B"
+    });
+    return;
+  }
+  try {
+    startSubmitting();
+    const { data } = await apiGroup.batchSave({
+      dates: selectedDates.value?.map((date) => dateUtil.dateValueToDayjs(date)?.toISOString() ?? "") ?? [],
+      type: calendarEventType.value
+    });
+    if (data.value.data) {
+      mergeCalendars(data.value.data.list);
+      selectedDates.value = [];
+    }
+  } finally {
+    endSubmitting();
+  }
+};
+watch(
+  panelDate,
+  () => {
+    fetchCalendars();
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-3">
+    <div class="flex flex-col items-center">
+      <UButton
+        label="节假日设置"
+        size="xl"
+        icon="i-lucide-calendar-days"
+        variant="link"
+        color="primary"
+      />
+      <div class="text-dimmed text-sm">
+        选择一个或多个日期并选择节假日类型，然后点提交
+      </div>
+    </div>
+    <div class="flex flex-col md:flex-row items-center md:items-start gap-3 md:gap-4">
+      <UCard class="h-fit w-fit">
+        <UCalendar
+          v-model="selectedDates"
+          multiple
+          disable-days-outside-current-view
+          :fixed-weeks="false"
+          :disabled="fetching || submitting"
+          :next-year="{
+  onClick: () => {
+    panelDate = panelDate.add({ years: 1 });
+  }
+}"
+          :prev-year="{
+  onClick: () => {
+    panelDate = panelDate.subtract({ years: 1 });
+  }
+}"
+          :next-month="{
+  onClick: () => {
+    panelDate = panelDate.add({ months: 1 });
+  }
+}"
+          :prev-month="{
+  onClick: () => {
+    panelDate = panelDate.subtract({ months: 1 });
+  }
+}"
+        >
+          <template #day="{ day }">
+            <UChip
+              :show="calendarTypeMap[dateUtil.dateValueToDayjs(day)?.format(dateFormat) ?? ''] !== void 0"
+              size="2xs"
+              :color="calendarEventTypeOptions.find((item2) => item2.value === calendarTypeMap[dateUtil.dateValueToDayjs(day)?.format(dateFormat) ?? ''])?.color ?? 'primary'"
+            >
+              {{ day.day }}
+            </UChip>
+          </template>
+        </UCalendar>
+      </UCard>
+      <UCard class="min-w-64 h-fit">
+        <div class="flex flex-col gap-3 sm:gap-4">
+          <UFormField label="已选日期" required>
+            <div v-if="(selectedDates?.length ?? 0) > 0" class="grid grid-cols-3 gap-1">
+              <UBadge
+                v-for="(date, i) in selectedDates"
+                :key="i"
+                variant="subtle"
+                :label="dateUtil.dateValueToDayjs(date)?.format(dateFormat) ?? ''"
+              >
+                <template #trailing>
+                  <UIcon
+                    name="i-lucide-x"
+                    class="cursor-pointer"
+                    @click="() => {
+  const newValue = [...selectedDates ?? []];
+  newValue.splice(i, 1);
+  selectedDates = newValue;
+}"
+                  />
+                </template>
+              </UBadge>
+              <UButton
+                label="清除"
+                variant="ghost"
+                size="xs"
+                icon="i-lucide-timer-reset"
+                @click="selectedDates = []"
+              />
+            </div>
+            <div v-else>
+              /
+            </div>
+          </UFormField>
+          <UFormField label="节假日类型" required>
+            <URadioGroup
+              v-model="calendarEventType"
+              :items="calendarEventTypeOptions"
+            >
+              <template #label="{ item }">
+                <div class="flex items-center gap-2">
+                  <span>{{ item.label }}</span>
+                  <span
+                    v-if="item.value !== CalendarEventType.NONE"
+                    class="inline-block size-2 rounded-full"
+                    :class="`bg-(--color-light) dark:bg-(--color-dark)`"
+                    :style="{
+  '--color-light': `var(--ui-${item.color})`,
+  '--color-dark': `var(--ui-${item.color})`
+}"
+                  />
+                </div>
+              </template>
+            </URadioGroup>
+          </UFormField>
+        </div>
+
+        <template #footer>
+          <div class="flex justify-end">
+            <UButton
+              label="提交"
+              color="primary"
+              icon="i-lucide-upload"
+              :loading="submitting"
+              :disabled="(selectedDates?.length ?? 0) === 0 || calendarEventType === void 0 || submitting"
+              @click="onSubmit"
+            />
+          </div>
+        </template>
+      </UCard>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/sys/calendar/board.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/composables/api/sys/useCalendarApi.js

@@ -0,0 +1,8 @@
+import { createSharedComposable } from "@vueuse/core";
+import { useApi, usePostFetch } from "../useApi.js";
+export const useCalendarApi = createSharedComposable(() => ({
+  ...useApi("/calendars"),
+  batchSave: (payload, customOptions = {}) => {
+    return usePostFetch(`/calendars/batch-save`, payload, customOptions);
+  }
+}));

package/dist/runtime/composables/useDate.d.ts

@@ -1,11 +1,11 @@
 import { type DateValue } from '@internationalized/date';
 import dayjs from 'dayjs';
-import type { TimeUnit } from '#v/constants';
 import type { DateRange } from 'reka-ui';
-import type { DateShortcut } from '#v/types';
+import type { DateShortcut, TimeUnit } from '#v/types';
 export declare const useDate: () => {
     dayjsToDateValue: (date: dayjs.Dayjs | null | undefined) => DateValue | undefined;
     isoUtcStringToDateValue: (isoString: string | null | undefined) => DateValue | undefined;
+    isoUtcStringToDayjs: (isoString: string | null | undefined) => dayjs.Dayjs | undefined;
     dateValueToDayjs: (dateValue: DateValue | null | undefined) => dayjs.Dayjs | undefined;
     formatTimeUnit: (dateValue: DateValue | null | undefined, unit: TimeUnit) => string;
     getRecentDateRange: (days: number) => DateRange;

package/dist/runtime/composables/useDate.js

@@ -11,6 +11,10 @@ const _useDate = () => {
     if (!isoString) return void 0;
     return dayjsToDateValue(dayjs(isoString));
   };
+  const isoUtcStringToDayjs = (isoString) => {
+    if (!isoString) return void 0;
+    return dayjs(isoString);
+  };
   const dateValueToDayjs = (dateValue) => {
     if (!dateValue) return void 0;
     return dayjs(toZoned(dateValue, TIME_ZONE).toAbsoluteString()).tz(TIME_ZONE);
@@ -135,6 +139,7 @@ const _useDate = () => {
   return {
     dayjsToDateValue,
     isoUtcStringToDateValue,
+    isoUtcStringToDayjs,
     dateValueToDayjs,
     formatTimeUnit,
     getRecentDateRange,

package/dist/runtime/constants/calendar.d.ts

@@ -0,0 +1,12 @@
+export declare enum CalendarEventType {
+    NONE = 0,
+    HOLIDAY = 1,
+    ADJUSTRED = 2,
+    WEEKEND = 3
+}
+export declare const calendarEventTypeOptions: {
+    label: string;
+    value: CalendarEventType;
+    color: string;
+}[];
+export declare const calendarEventTypeShortNameMap: Map<CalendarEventType, string>;

package/dist/runtime/constants/calendar.js

@@ -0,0 +1,19 @@
+export var CalendarEventType = /* @__PURE__ */ ((CalendarEventType2) => {
+  CalendarEventType2[CalendarEventType2["NONE"] = 0] = "NONE";
+  CalendarEventType2[CalendarEventType2["HOLIDAY"] = 1] = "HOLIDAY";
+  CalendarEventType2[CalendarEventType2["ADJUSTRED"] = 2] = "ADJUSTRED";
+  CalendarEventType2[CalendarEventType2["WEEKEND"] = 3] = "WEEKEND";
+  return CalendarEventType2;
+})(CalendarEventType || {});
+export const calendarEventTypeOptions = [
+  { label: "\u56FD\u5BB6\u6CD5\u5B9A\u5047", value: 1 /* HOLIDAY */, color: "primary" },
+  { label: "\u516C\u53F8\u8C03\u6574\u5047", value: 2 /* ADJUSTRED */, color: "warning" },
+  { label: "\u5468\u672B\u4F11\u606F\u65E5", value: 3 /* WEEKEND */, color: "success" },
+  { label: "\u65E0", value: 0 /* NONE */, color: "neutral" }
+];
+export const calendarEventTypeShortNameMap = /* @__PURE__ */ new Map([
+  [0 /* NONE */, "\u73ED"],
+  [1 /* HOLIDAY */, "\u5047"],
+  [2 /* ADJUSTRED */, "\u8C03"],
+  [3 /* WEEKEND */, "\u4F11"]
+]);

package/dist/runtime/constants/index.d.ts

@@ -4,3 +4,4 @@ export * from './options.js';
 export * from './time.js';
 export * from './menu.js';
 export * from './user.js';
+export * from './calendar.js';

package/dist/runtime/constants/index.js

@@ -4,3 +4,4 @@ export * from "./options.js";
 export * from "./time.js";
 export * from "./menu.js";
 export * from "./user.js";
+export * from "./calendar.js";

package/dist/runtime/types/cmds/calendar.d.ts

@@ -0,0 +1,4 @@
+export type CalendarsSavePayload = {
+    dates: string[];
+    type: number;
+};

package/dist/runtime/types/cmds/index.d.ts

@@ -1,3 +1,4 @@
 export * from './login.js';
 export * from './sys.js';
 export * from './user.js';
+export * from './calendar.js';

package/dist/runtime/types/cmds/index.js

@@ -1,3 +1,4 @@
 export * from "./login.js";
 export * from "./sys.js";
 export * from "./user.js";
+export * from "./calendar.js";

package/dist/runtime/types/models/sys.d.ts

@@ -82,3 +82,7 @@ export type RowRecord = {
     oldValue?: string;
     newValue?: string;
 } & BaseModel;
+export type Calendar = {
+    date?: string;
+    type?: number;
+} & BaseModel;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "v-nuxt-ui",
-  "version": "0.1.26",
+  "version": "0.1.27",
   "description": "Veken UI Component Library - Reusable Nuxt UI components, composables, and utilities for enterprise applications",
   "type": "module",
   "style": "./dist/runtime/index.css",