v-nuxt-ui 0.1.0

package/dist/runtime/composables/useApp.js

@@ -0,0 +1,83 @@
+import { ref, computed } from "vue";
+import { breakpointsTailwind, createSharedComposable, useBreakpoints, useLocalStorage } from "@vueuse/core";
+import { StorageKey } from "#v/types";
+import { cloneJson } from "#v/utils";
+export const defaultAppSettings = {
+  headerHeight: 48,
+  tabHeight: 40,
+  siderMaxWidth: 20,
+  siderMinWidth: 10,
+  siderCollapsed: false,
+  siderCollapsedWidth: 5,
+  locale: "zh-CN",
+  pageAnimate: true,
+  pageAnimateMode: "fade-slide"
+};
+const _useApp = () => {
+  const themeSettingsVisible = ref(false);
+  const changelogVisible = ref(false);
+  const appConfig = useLocalStorage(StorageKey.APP, defaultAppSettings);
+  const resetAppConfig = () => appConfig.value = cloneJson(defaultAppSettings);
+  const updatePrimaryColor = (color) => {
+    appConfig.value = { ...appConfig.value, primary: color, blackAsPrimary: false };
+  };
+  const updateBlackAsPrimary = (value) => {
+    appConfig.value = { ...appConfig.value, blackAsPrimary: value };
+  };
+  const updateNeutralColor = (color) => {
+    appConfig.value = { ...appConfig.value, neutral: color };
+    console.log("Updated neutral color to", appConfig.value);
+  };
+  const updateRadius = (radius) => {
+    appConfig.value = { ...appConfig.value, radius };
+  };
+  const updateLocale = (locale) => {
+    appConfig.value = { ...appConfig.value, locale };
+  };
+  const keepalive = computed({
+    get() {
+      return appConfig.value.keepalive ?? true;
+    },
+    set(value) {
+      appConfig.value = { ...appConfig.value, keepalive: value };
+    }
+  });
+  const setKeepalive = (value) => keepalive.value = value;
+  const breakpoints = useBreakpoints(breakpointsTailwind);
+  const isMobile = breakpoints.smaller("sm");
+  const isSmallerThanMd = breakpoints.smaller("md");
+  const redirectConfirm = ref(false);
+  const redirectConfirmTitle = ref("");
+  const redirectConfirmMsg = ref("");
+  const askRedirectConfirmBeforeLeave = (title, msg) => {
+    redirectConfirm.value = true;
+    redirectConfirmTitle.value = title;
+    redirectConfirmMsg.value = msg;
+  };
+  const clearRedirectConfirm = () => {
+    redirectConfirm.value = false;
+    redirectConfirmTitle.value = "";
+    redirectConfirmMsg.value = "";
+  };
+  return {
+    themeSettingsVisible,
+    changelogVisible,
+    appConfig,
+    resetAppConfig,
+    updatePrimaryColor,
+    updateBlackAsPrimary,
+    updateNeutralColor,
+    updateRadius,
+    updateLocale,
+    keepalive,
+    setKeepalive,
+    isMobile,
+    isSmallerThanMd,
+    redirectConfirm,
+    redirectConfirmTitle,
+    redirectConfirmMsg,
+    askRedirectConfirmBeforeLeave,
+    clearRedirectConfirm
+  };
+};
+export const useApp = createSharedComposable(_useApp);

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

@@ -0,0 +1,14 @@
+import type { UseFetchOptions } from 'nuxt/app';
+import type { RouteLocationNormalizedLoadedGeneric } from 'vue-router';
+export declare const useAuth: () => {
+    loginLoading: import("vue").Ref<boolean, boolean>;
+    isLoggedIn: any;
+    isUserInfoFetched: any;
+    loginUser: any;
+    loginUserRoles: any;
+    loginUserMenus: any;
+    logout: (route: RouteLocationNormalizedLoadedGeneric) => Promise<void>;
+    loginByUsernameAndPassword: (route: RouteLocationNormalizedLoadedGeneric, payload: Cmd.UsernamePasswordLoginPayload, redirect?: boolean) => Promise<void>;
+    initUserInfo: () => Promise<boolean>;
+    refreshToken: <T>(route: RouteLocationNormalizedLoadedGeneric, options: UseFetchOptions<T>) => Promise<UseFetchOptions<T> | null>;
+};

package/dist/runtime/composables/useAuth.js

@@ -0,0 +1,92 @@
+import { StorageKey } from "#v/types";
+import { isEmptyString } from "#v/utils";
+import { useLocalStorage, createSharedComposable } from "@vueuse/core";
+import { useAuthApi, useLoading, useLoginApi, useRouterPush } from "./index.js";
+import { useToast } from "@nuxt/ui/runtime/composables/useToast.js";
+const _useAuth = () => {
+  const { loading: loginLoading, startLoading: startLoginLoading, endLoading: endLoginLoading } = useLoading();
+  const { toLogin, redirectFromLogin, toSecuritySettings } = useRouterPush();
+  const acT = useLocalStorage(StorageKey.ACCESS_TOKEN, "");
+  const rfT = useLocalStorage(StorageKey.REFRESH_TOKEN, "");
+  const loginUser = ref();
+  const loginUserRoles = ref([]);
+  const loginUserMenus = ref([]);
+  const isLoggedIn = computed(() => !isEmptyString(acT.value) || !isEmptyString(rfT.value));
+  const isUserInfoFetched = computed(() => loginUser.value && loginUser.value.id > 0);
+  const logout = async (route) => {
+    acT.value = void 0;
+    rfT.value = void 0;
+    loginUser.value = { id: 0 };
+    await toLogin(route);
+  };
+  const setUserInfo = (user) => {
+    loginUser.value = user;
+    loginUserRoles.value = user?.roles ?? [];
+    loginUserMenus.value = user?.menus ?? [];
+  };
+  const loginByUsernameAndPassword = async (route, payload, redirect = true) => {
+    startLoginLoading();
+    try {
+      const { data } = await useLoginApi().loginByUsernameAndPassword(payload);
+      if (data.value?.data) {
+        acT.value = data.value.data.accessToken;
+        rfT.value = data.value.data.refreshToken;
+        setUserInfo(data.value.data.user);
+        if (loginUser.value?.needChangePwd) {
+          await toSecuritySettings();
+        } else if (redirect) {
+          await redirectFromLogin(route);
+        }
+      }
+    } finally {
+      endLoginLoading();
+    }
+  };
+  const initUserInfo = async () => {
+    startLoginLoading();
+    try {
+      const { data } = await useAuthApi().getUserByAccessToken();
+      if (data.value?.data) {
+        setUserInfo(data.value.data);
+        return true;
+      }
+      return false;
+    } finally {
+      endLoginLoading();
+    }
+  };
+  const refreshToken = async (route, options) => {
+    const { data } = await useAuthApi().refreshToken({ refreshToken: rfT.value });
+    if (!data.value?.data) {
+      useToast().add({
+        title: "\u767B\u5F55\u72B6\u6001\u5DF2\u8FC7\u671F\uFF0C\u8BF7\u91CD\u65B0\u767B\u5F55",
+        color: "warning"
+      });
+      await logout(route);
+      return null;
+    }
+    acT.value = data.value.data.accessToken;
+    rfT.value = data.value.data.refreshToken;
+    const config = { ...options };
+    if (config.headers) {
+      config.headers = {
+        ...config.headers,
+        Authorization: `Bearer ${acT.value}`
+      };
+    }
+    return config;
+  };
+  return {
+    loginLoading,
+    isLoggedIn,
+    isUserInfoFetched,
+    loginUser,
+    loginUserRoles,
+    loginUserMenus,
+    logout,
+    loginByUsernameAndPassword,
+    initUserInfo,
+    refreshToken
+  };
+};
+export const useAuth = createSharedComposable(_useAuth);

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

@@ -0,0 +1,58 @@
+export declare function useBoolean(initValue?: boolean): {
+    bool: import("vue").Ref<boolean, boolean>;
+    setBool: (value: boolean) => void;
+    setTrue: () => void;
+    setFalse: () => void;
+    toggle: () => void;
+};
+export declare function useLoading(initValue?: boolean): {
+    loading: import("vue").Ref<boolean, boolean>;
+    startLoading: () => void;
+    endLoading: () => void;
+};
+export declare function useFetching(initValue?: boolean): {
+    fetching: import("vue").Ref<boolean, boolean>;
+    startFetching: () => void;
+    endFetching: () => void;
+};
+export declare function useSubmitting(initValue?: boolean): {
+    submitting: import("vue").Ref<boolean, boolean>;
+    startSubmitting: () => void;
+    endSubmitting: () => void;
+};
+export declare function useDeleting(initValue?: boolean): {
+    deleting: import("vue").Ref<boolean, boolean>;
+    startDeleting: () => void;
+    endDeleting: () => void;
+};
+export declare function useUploading(initValue?: boolean): {
+    uploading: import("vue").Ref<boolean, boolean>;
+    startUploading: () => void;
+    endUploading: () => void;
+};
+export declare function useDownloading(initValue?: boolean): {
+    downloading: import("vue").Ref<boolean, boolean>;
+    startDownloading: () => void;
+    endDownloading: () => void;
+};
+export declare function useSearching(initValue?: boolean): {
+    searching: import("vue").Ref<boolean, boolean>;
+    startSearching: () => void;
+    endSearching: () => void;
+};
+export declare function useExporting(initValue?: boolean): {
+    exporting: import("vue").Ref<boolean, boolean>;
+    startExporting: () => void;
+    endExporting: () => void;
+};
+export declare function useCopying(initValue?: boolean): {
+    copying: import("vue").Ref<boolean, boolean>;
+    startCopying: () => void;
+    endCopying: () => void;
+};
+export declare function useLoadingFn(fn: () => Promise<void>): {
+    loading: import("vue").Ref<boolean, boolean>;
+    startLoading: () => void;
+    endLoading: () => void;
+    handleLoadingFn: () => Promise<void>;
+};

package/dist/runtime/composables/useBoolean.js

@@ -0,0 +1,71 @@
+import { ref } from "vue";
+export function useBoolean(initValue = false) {
+  const bool = ref(initValue);
+  function setBool(value) {
+    bool.value = value;
+  }
+  function setTrue() {
+    setBool(true);
+  }
+  function setFalse() {
+    setBool(false);
+  }
+  function toggle() {
+    setBool(!bool.value);
+  }
+  return {
+    bool,
+    setBool,
+    setTrue,
+    setFalse,
+    toggle
+  };
+}
+export function useLoading(initValue = false) {
+  const { bool: loading, setTrue: startLoading, setFalse: endLoading } = useBoolean(initValue);
+  return { loading, startLoading, endLoading };
+}
+export function useFetching(initValue = false) {
+  const { bool: fetching, setTrue: startFetching, setFalse: endFetching } = useBoolean(initValue);
+  return { fetching, startFetching, endFetching };
+}
+export function useSubmitting(initValue = false) {
+  const { bool: submitting, setTrue: startSubmitting, setFalse: endSubmitting } = useBoolean(initValue);
+  return { submitting, startSubmitting, endSubmitting };
+}
+export function useDeleting(initValue = false) {
+  const { bool: deleting, setTrue: startDeleting, setFalse: endDeleting } = useBoolean(initValue);
+  return { deleting, startDeleting, endDeleting };
+}
+export function useUploading(initValue = false) {
+  const { bool: uploading, setTrue: startUploading, setFalse: endUploading } = useBoolean(initValue);
+  return { uploading, startUploading, endUploading };
+}
+export function useDownloading(initValue = false) {
+  const { bool: downloading, setTrue: startDownloading, setFalse: endDownloading } = useBoolean(initValue);
+  return { downloading, startDownloading, endDownloading };
+}
+export function useSearching(initValue = false) {
+  const { bool: searching, setTrue: startSearching, setFalse: endSearching } = useBoolean(initValue);
+  return { searching, startSearching, endSearching };
+}
+export function useExporting(initValue = false) {
+  const { bool: exporting, setTrue: startExporting, setFalse: endExporting } = useBoolean(initValue);
+  return { exporting, startExporting, endExporting };
+}
+export function useCopying(initValue = false) {
+  const { bool: copying, setTrue: startCopying, setFalse: endCopying } = useBoolean(initValue);
+  return { copying, startCopying, endCopying };
+}
+export function useLoadingFn(fn) {
+  const { bool: loading, setTrue: startLoading, setFalse: endLoading } = useBoolean(false);
+  const handleLoadingFn = async () => {
+    try {
+      startLoading();
+      await fn();
+    } finally {
+      endLoading();
+    }
+  };
+  return { loading, startLoading, endLoading, handleLoadingFn };
+}

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

@@ -0,0 +1,25 @@
+import { type DateValue } from '@internationalized/date';
+import dayjs from 'dayjs';
+import type { DateRange } from 'reka-ui';
+import type { DateShortcut } from '#v/types';
+export declare const useDate: () => {
+    dayjsToDateValue: (date: dayjs.Dayjs | null | undefined) => DateValue | undefined;
+    isoUtcStringToDateValue: (isoString: string | null | undefined) => DateValue | undefined;
+    dateValueToDayjs: (dateValue: DateValue | null | undefined) => dayjs.Dayjs | undefined;
+    formatTimeUnit: (dateValue: DateValue | null | undefined, unit: Const.Time.TimeUnit) => string;
+    getRecentDateRange: (days: number) => DateRange;
+    getlastWeekDateRange: () => DateRange;
+    lastWeekDateShortcut: DateShortcut;
+    getCurrentWeekDateRange: () => DateRange;
+    currentWeekDateShortcut: DateShortcut;
+    getLastMonthDateRange: () => DateRange;
+    lastMonthDateShortcut: DateShortcut;
+    getCurrentMonthDateRange: () => DateRange;
+    currentMonthDateShortcut: DateShortcut;
+    getlastYearDateRange: () => DateRange;
+    lastYearDateShortcut: DateShortcut;
+    getCurrentYearDateRange: () => DateRange;
+    currentYearDateShortcut: DateShortcut;
+    getLastYearToTodayDateRange: () => DateRange;
+    lastYearToTodayDateShortcut: DateShortcut;
+};

package/dist/runtime/composables/useDate.js

@@ -0,0 +1,157 @@
+import { createSharedComposable } from "@vueuse/core";
+import { toZoned, parseAbsolute } from "@internationalized/date";
+import dayjs from "dayjs";
+import { TIME_ZONE } from "#v/constants";
+const _useDate = () => {
+  const dayjsToDateValue = (date) => {
+    if (!date || !date.isValid()) return void 0;
+    return parseAbsolute(date.toISOString(), TIME_ZONE);
+  };
+  const isoUtcStringToDateValue = (isoString) => {
+    if (!isoString) return void 0;
+    return dayjsToDateValue(dayjs(isoString));
+  };
+  const dateValueToDayjs = (dateValue) => {
+    if (!dateValue) return void 0;
+    return dayjs(toZoned(dateValue, TIME_ZONE).toAbsoluteString()).tz(TIME_ZONE);
+  };
+  const formatTimeUnit = (dateValue, unit) => {
+    const date = dateValueToDayjs(dateValue);
+    if (!date || !date.isValid()) return "";
+    switch (unit) {
+      case "year":
+        return date.year().toString();
+      case "quarter": {
+        const quarter = Math.ceil(date.month() + 1 / 3);
+        const quarterNames = ["Q1", "Q2", "Q3", "Q4"];
+        return `${date.year()}-${quarterNames[quarter - 1]}`;
+      }
+      case "month":
+        return date.format("YYYY-MM");
+      case "week": {
+        const yearStart = date.startOf("year");
+        const weekStart = date.startOf("week");
+        const weekNumber = weekStart.diff(yearStart, "week") + 1;
+        return `${date.year()}-W${weekNumber}`;
+      }
+      case "day":
+        return date.format("YYYY/MM/DD");
+      default:
+        throw new Error(`Unsupported time unit: ${unit}`);
+    }
+  };
+  const getRecentDateRange = (days) => {
+    const end = dayjs().endOf("day");
+    const start = end.subtract(days - 1, "day").startOf("day");
+    return {
+      start: dayjsToDateValue(start),
+      end: dayjsToDateValue(end)
+    };
+  };
+  const getlastWeekDateRange = () => {
+    const end = dayjs().subtract(1, "week").endOf("week");
+    const start = end.subtract(6, "day").startOf("day");
+    return {
+      start: dayjsToDateValue(start),
+      end: dayjsToDateValue(end)
+    };
+  };
+  const lastWeekDateShortcut = {
+    label: "\u4E0A\u5468",
+    dateFn: getlastWeekDateRange
+  };
+  const getCurrentWeekDateRange = () => {
+    const end = dayjs().endOf("week");
+    const start = end.subtract(6, "day").startOf("day");
+    return {
+      start: dayjsToDateValue(start),
+      end: dayjsToDateValue(end)
+    };
+  };
+  const currentWeekDateShortcut = {
+    label: "\u672C\u5468",
+    dateFn: getCurrentWeekDateRange
+  };
+  const getLastMonthDateRange = () => {
+    const end = dayjs().subtract(1, "month").endOf("month");
+    const start = end.subtract(1, "month").startOf("month");
+    return {
+      start: dayjsToDateValue(start),
+      end: dayjsToDateValue(end)
+    };
+  };
+  const lastMonthDateShortcut = {
+    label: "\u4E0A\u6708",
+    dateFn: getLastMonthDateRange
+  };
+  const getCurrentMonthDateRange = () => {
+    const end = dayjs().endOf("month");
+    const start = end.subtract(1, "month").startOf("month");
+    return {
+      start: dayjsToDateValue(start),
+      end: dayjsToDateValue(end)
+    };
+  };
+  const currentMonthDateShortcut = {
+    label: "\u672C\u6708",
+    dateFn: getCurrentMonthDateRange
+  };
+  const getlastYearDateRange = () => {
+    const end = dayjs().subtract(1, "year").endOf("year");
+    const start = end.subtract(1, "year").startOf("year");
+    return {
+      start: dayjsToDateValue(start),
+      end: dayjsToDateValue(end)
+    };
+  };
+  const lastYearDateShortcut = {
+    label: "\u53BB\u5E74",
+    dateFn: getlastYearDateRange
+  };
+  const getCurrentYearDateRange = () => {
+    const end = dayjs().endOf("year");
+    const start = end.subtract(1, "year").startOf("year");
+    return {
+      start: dayjsToDateValue(start),
+      end: dayjsToDateValue(end)
+    };
+  };
+  const currentYearDateShortcut = {
+    label: "\u4ECA\u5E74",
+    dateFn: getCurrentYearDateRange
+  };
+  const getLastYearToTodayDateRange = () => {
+    const end = dayjs().endOf("day");
+    const start = dayjs().subtract(1, "year").startOf("day");
+    return {
+      start: dayjsToDateValue(start),
+      end: dayjsToDateValue(end)
+    };
+  };
+  const lastYearToTodayDateShortcut = {
+    label: "\u53BB\u5E74\u81F3\u4ECA",
+    dateFn: getLastYearToTodayDateRange
+  };
+  return {
+    dayjsToDateValue,
+    isoUtcStringToDateValue,
+    dateValueToDayjs,
+    formatTimeUnit,
+    getRecentDateRange,
+    getlastWeekDateRange,
+    lastWeekDateShortcut,
+    getCurrentWeekDateRange,
+    currentWeekDateShortcut,
+    getLastMonthDateRange,
+    lastMonthDateShortcut,
+    getCurrentMonthDateRange,
+    currentMonthDateShortcut,
+    getlastYearDateRange,
+    lastYearDateShortcut,
+    getCurrentYearDateRange,
+    currentYearDateShortcut,
+    getLastYearToTodayDateRange,
+    lastYearToTodayDateShortcut
+  };
+};
+export const useDate = createSharedComposable(_useDate);

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

@@ -0,0 +1,103 @@
+export declare const useEChart: () => {
+    getCommonGridOption: () => {
+        grid: {
+            left: string;
+            right: string;
+            bottom: string;
+            top: string;
+            containLabel: boolean;
+        };
+    };
+    getCommonLegendOption: () => {
+        legend: {
+            show: boolean;
+            bottom: string;
+            itemGap: number;
+            itemWidth: number;
+            itemHeight: number;
+            textStyle: {
+                color: string;
+            };
+            icon: string;
+        };
+    };
+    getCommonXAxisOption: () => {
+        color: string[];
+        xAxis: {
+            nameTextStyle: {
+                color: string;
+            };
+            axisLine: {
+                show: boolean;
+                lineStyle: {
+                    color: string;
+                };
+            };
+            axisLabel: {
+                color: string;
+                interval: () => boolean;
+                hideOverlap: boolean;
+            };
+            axisTick: {
+                show: boolean;
+                interval: () => boolean;
+                lineStyle: {
+                    color: string;
+                };
+            };
+        };
+    };
+    getCommonYAxisOption: () => {
+        yAxis: {
+            nameTextStyle: {
+                color: string;
+            };
+            axisLine: {
+                show: boolean;
+                lineStyle: {
+                    color: string;
+                };
+            };
+            axisLabel: {
+                color: string;
+            };
+            splitLine: {
+                show: boolean;
+                lineStyle: {
+                    color: string;
+                    type: string;
+                };
+            };
+        };
+    };
+    getCommonBarOption: () => {
+        itemStyle: {
+            borderRadius: number[];
+        };
+        emphasis: {
+            focus: string;
+        };
+        label: {
+            color: string;
+            distance: number;
+        };
+    };
+    getCommonLineOption: () => {
+        emphasis: {
+            focus: string;
+        };
+        label: {
+            color: string;
+            distance: number;
+        };
+    };
+    mergeSeries: (series: any[]) => any[];
+    mergeOption: (option: any) => any;
+    parseCSSVariableColor: (colorStr: string) => string;
+    exportChartAsImage: (chart: any, options?: {
+        type?: string;
+        backgroundColor?: string;
+        pixelRatio?: number;
+        filename?: string;
+    }) => void;
+};