@movk/nuxt 1.0.0 → 1.1.0

package/dist/runtime/components/theme-picker/ThemePicker.vue

@@ -0,0 +1,235 @@
+<script setup>
+import { useAppConfig, useColorMode } from "#imports";
+import { useClipboard } from "@vueuse/core";
+import { ref } from "vue";
+import { useTheme } from "../../composables/useTheme";
+import ThemePickerButton from "./ThemePickerButton.vue";
+const appConfig = useAppConfig();
+const colorMode = useColorMode();
+const open = ref(false);
+const { copy: copyCSS, copied: copiedCSS } = useClipboard();
+const { copy: copyAppConfig, copied: copiedAppConfig } = useClipboard();
+const {
+  neutralColors,
+  neutral,
+  primaryColors,
+  primary,
+  setBlackAsPrimary,
+  radiuses,
+  radius,
+  fonts,
+  font,
+  modes,
+  mode,
+  hasCSSChanges,
+  hasAppConfigChanges,
+  exportCSS,
+  exportAppConfig,
+  resetTheme
+} = useTheme();
+</script>
+
+<template>
+  <UPopover
+    v-model:open="open"
+    :ui="{ content: 'w-72 px-6 py-4 flex flex-col gap-4 overflow-y-auto max-h-[calc(100vh-5rem)]' }"
+  >
+    <template #default>
+      <UButton
+        icon="i-lucide-swatch-book"
+        color="neutral"
+        :variant="open ? 'soft' : 'ghost'"
+        square
+        aria-label="Color picker"
+        :ui="{ leadingIcon: 'text-primary' }"
+      />
+    </template>
+
+    <template #content>
+      <fieldset>
+        <legend class="text-[11px] leading-none font-semibold mb-2 select-none flex items-center gap-1">
+          Primary
+
+          <UButton
+            to="https://ui.nuxt.com/docs/getting-started/theme/css-variables#colors"
+            size="xs"
+            color="neutral"
+            variant="link"
+            target="_blank"
+            icon="i-lucide-circle-help"
+            class="p-0 -my-0.5"
+            :ui="{ leadingIcon: 'size-3' }"
+          />
+        </legend>
+
+        <div class="grid grid-cols-3 gap-1 -mx-2">
+          <ThemePickerButton label="Black" :selected="appConfig.theme.blackAsPrimary" @click="setBlackAsPrimary(true)">
+            <template #leading>
+              <span class="inline-block w-2 h-2 rounded-full bg-black dark:bg-white" />
+            </template>
+          </ThemePickerButton>
+
+          <ThemePickerButton
+            v-for="color in primaryColors"
+            :key="color"
+            :label="color"
+            :chip="color"
+            :selected="!appConfig.theme.blackAsPrimary && primary === color"
+            @click="primary = color"
+          />
+        </div>
+      </fieldset>
+
+      <fieldset>
+        <legend class="text-[11px] leading-none font-semibold mb-2 select-none flex items-center gap-1">
+          Neutral
+
+          <UButton
+            to="https://ui.nuxt.com/docs/getting-started/theme/css-variables#text"
+            size="xs"
+            color="neutral"
+            variant="link"
+            target="_blank"
+            icon="i-lucide-circle-help"
+            class="p-0 -my-0.5"
+            :ui="{ leadingIcon: 'size-3' }"
+          />
+        </legend>
+
+        <div class="grid grid-cols-3 gap-1 -mx-2">
+          <ThemePickerButton
+            v-for="color in neutralColors"
+            :key="color"
+            :label="color"
+            :chip="color === 'neutral' ? 'old-neutral' : color"
+            :selected="neutral === color"
+            @click="neutral = color"
+          />
+        </div>
+      </fieldset>
+
+      <fieldset>
+        <legend class="text-[11px] leading-none font-semibold mb-2 select-none flex items-center gap-1">
+          Radius
+
+          <UButton
+            to="https://ui.nuxt.com/docs/getting-started/theme/css-variables#radius"
+            size="xs"
+            color="neutral"
+            variant="link"
+            target="_blank"
+            icon="i-lucide-circle-help"
+            class="p-0 -my-0.5"
+            :ui="{ leadingIcon: 'size-3' }"
+          />
+        </legend>
+
+        <div class="grid grid-cols-5 gap-1 -mx-2">
+          <ThemePickerButton
+            v-for="r in radiuses"
+            :key="r"
+            :label="String(r)"
+            class="justify-center px-0"
+            :selected="radius === r"
+            @click="radius = r"
+          />
+        </div>
+      </fieldset>
+
+      <fieldset>
+        <legend class="text-[11px] leading-none font-semibold mb-2 select-none flex items-center gap-1">
+          Font
+
+          <UButton
+            to="https://ui.nuxt.com/docs/getting-started/integrations/fonts"
+            size="xs"
+            color="neutral"
+            variant="link"
+            target="_blank"
+            icon="i-lucide-circle-help"
+            class="p-0 -my-0.5"
+            :ui="{ leadingIcon: 'size-3' }"
+          />
+        </legend>
+
+        <div class="-mx-2">
+          <USelect
+            v-model="font"
+            size="sm"
+            color="neutral"
+            icon="i-lucide-type"
+            :items="fonts"
+            class="w-full ring-default rounded-sm hover:bg-elevated/50 text-[11px] data-[state=open]:bg-elevated/50"
+            :ui="{ trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
+          />
+        </div>
+      </fieldset>
+
+      <fieldset>
+        <legend class="text-[11px] leading-none font-semibold mb-2 select-none flex items-center gap-1">
+          Color Mode
+
+          <UButton
+            to="https://ui.nuxt.com/docs/getting-started/integrations/color-mode"
+            size="xs"
+            color="neutral"
+            variant="link"
+            target="_blank"
+            icon="i-lucide-circle-help"
+            class="p-0 -my-0.5"
+            :ui="{ leadingIcon: 'size-3' }"
+          />
+        </legend>
+
+        <div class="grid grid-cols-3 gap-1 -mx-2">
+          <ThemePickerButton
+            v-for="m in modes"
+            :key="m.label"
+            v-bind="m"
+            :selected="colorMode.preference === m.label"
+            @click="mode = m.label"
+          />
+        </div>
+      </fieldset>
+
+      <fieldset v-if="hasCSSChanges || hasAppConfigChanges">
+        <legend class="text-[11px] leading-none font-semibold mb-2 select-none">
+          Export
+        </legend>
+
+        <div class="flex items-center justify-between gap-1 -mx-2">
+          <UButton
+            v-if="hasCSSChanges"
+            color="neutral"
+            variant="soft"
+            size="sm"
+            label="main.css"
+            class="flex-1 text-[11px]"
+            :icon="copiedCSS ? appConfig.ui.icons.copyCheck : appConfig.ui.icons.copy"
+            @click="copyCSS(exportCSS())"
+          />
+          <UButton
+            v-if="hasAppConfigChanges"
+            color="neutral"
+            variant="soft"
+            size="sm"
+            label="app.config.ts"
+            :icon="copiedAppConfig ? appConfig.ui.icons.copyCheck : appConfig.ui.icons.copy"
+            class="flex-1 text-[11px]"
+            @click="copyAppConfig(exportAppConfig())"
+          />
+          <UTooltip text="Reset theme">
+            <UButton
+              color="neutral"
+              variant="outline"
+              size="sm"
+              icon="i-lucide-rotate-ccw"
+              class="ms-auto ring-default hover:bg-elevated/50"
+              @click="resetTheme"
+            />
+          </UTooltip>
+        </div>
+      </fieldset>
+    </template>
+  </UPopover>
+</template>

package/dist/runtime/components/theme-picker/ThemePicker.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/components/theme-picker/ThemePickerButton.d.vue.ts

@@ -0,0 +1,18 @@
+type __VLS_Props = {
+    label: string;
+    icon?: string;
+    chip?: string;
+    selected?: boolean;
+};
+type __VLS_Slots = {
+    leading: () => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/theme-picker/ThemePickerButton.vue

@@ -0,0 +1,34 @@
+<script setup>
+defineProps({
+  label: { type: String, required: true },
+  icon: { type: String, required: false },
+  chip: { type: String, required: false },
+  selected: { type: Boolean, required: false }
+});
+const slots = defineSlots();
+</script>
+
+<template>
+  <UButton
+    size="sm"
+    color="neutral"
+    variant="outline"
+    :icon="icon"
+    :label="label"
+    class="capitalize ring-default rounded-sm text-[11px]"
+    :class="selected ? 'bg-elevated' : 'hover:bg-elevated/50'"
+  >
+    <template v-if="chip || !!slots.leading" #leading>
+      <slot name="leading">
+        <span
+          class="inline-block size-2 rounded-full bg-(--color-light) dark:bg-(--color-dark)"
+
+          :style="{
+  '--color-light': `var(--color-${chip}-500)`,
+  '--color-dark': `var(--color-${chip}-400)`
+}"
+        />
+      </slot>
+    </template>
+  </UButton>
+</template>

package/dist/runtime/components/theme-picker/ThemePickerButton.vue.d.ts

@@ -0,0 +1,18 @@
+type __VLS_Props = {
+    label: string;
+    icon?: string;
+    chip?: string;
+    selected?: boolean;
+};
+type __VLS_Slots = {
+    leading: () => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/composables/useApiFetch.js

@@ -19,7 +19,7 @@ export function useApiFetch(url, options = {}) {
   const transformFn = createTransform({
     skipBusinessCheck,
     userTransform,
-    successConfig: endpointConfig.success
+    successConfig: endpointConfig.response
   });
   const mergedHooks = mergeFetchHooks(builtinHooks, {
     onRequest: userOnRequest,
@@ -32,12 +32,10 @@ export function useApiFetch(url, options = {}) {
     ...fetchOptions,
     $fetch: apiInstance.$fetch,
     transform: transformFn,
-    // 合并后的 hooks
     onRequest: mergedHooks.onRequest,
     onRequestError: mergedHooks.onRequestError,
     onResponse: mergedHooks.onResponse,
     onResponseError: mergedHooks.onResponseError,
-    // 传递请求级配置给内置 hooks
     context
   });
 }