@shwfed/nuxt 0.6.0 → 0.7.0

package/dist/module.d.mts

@@ -1,5 +1,18 @@
 import * as _nuxt_schema from '@nuxt/schema';
 
+type Wrap<T> = T extends object ? Readonly<{
+    [P in keyof T]?: Wrap<T[P]>;
+}> : T;
+type Config = Wrap<{
+    api: {
+        /**
+         * 配置 API 请求额外头
+         *
+         * @type DSL - Record<string, string>
+         */
+        header: string;
+    };
+}>;
 interface Env {
     git: Readonly<{
         commit?: string;
@@ -16,6 +29,7 @@ interface Env {
     headers: Readonly<{
         token?: string;
     }>;
+    config?: Config;
 }
 declare module 'nuxt/schema' {
     interface PublicRuntimeConfig {

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@shwfed/nuxt",
-  "configKey": "@shwfed/nuxt",
-  "version": "0.6.0",
+  "configKey": "shwfed",
+  "version": "0.7.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -5,7 +5,20 @@ import defu from 'defu';
 
 const module$1 = defineNuxtModule({
   meta: {
-    name: "@shwfed/nuxt"
+    name: "@shwfed/nuxt",
+    configKey: "shwfed"
+  },
+  moduleDependencies: {
+    "@nuxt/fonts": {
+      defaults: {
+        families: [
+          { name: "Noto Sans", provider: "google" },
+          { name: "Noto Sans SC", provider: "google" },
+          { name: "Noto Sans JP", provider: "google" },
+          { name: "Fira Mono", provider: "google" }
+        ]
+      }
+    }
   },
   setup(options, nuxt) {
     const resolver = createResolver(import.meta.url);
@@ -24,7 +37,8 @@ const module$1 = defineNuxtModule({
       },
       headers: {
         token: process.env.NUXT_PUBLIC_TOKEN_HEADER_NAME
-      }
+      },
+      config: options
     });
     nuxt.options.runtimeConfig.public.shwfed = resolvedConfig;
     nuxt.options.css ||= [];

package/dist/runtime/components/locale.d.vue.ts

@@ -0,0 +1,14 @@
+interface LocaleItem {
+    locale: string;
+    message: string;
+}
+type __VLS_ModelProps = {
+    modelValue?: Array<LocaleItem>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: LocaleItem[] | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: LocaleItem[] | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/locale.vue

@@ -0,0 +1,89 @@
+<script setup>
+import { Icon } from "@iconify/vue";
+import { useSortable } from "@vueuse/integrations/useSortable";
+import { useTemplateRef } from "vue";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText } from "./ui/input-group";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from "./ui/dropdown-menu";
+const list = defineModel({ type: Array });
+const ul = useTemplateRef("ul");
+useSortable(ul, list);
+const allLocales = ["zh", "ja", "en"];
+const localeNames = {
+  zh: "\u4E2D\u6587",
+  ja: "\u65E5\u672C\u8A9E",
+  en: "English"
+};
+const getAvailableLocales = (currentItem) => {
+  const selectedLocales = new Set(list.value?.map((i) => i.locale) ?? []);
+  return allLocales.filter((locale) => !selectedLocales.has(locale) || locale === currentItem.locale);
+};
+const removeItem = (item) => {
+  if (list.value === void 0) {
+    return;
+  }
+  const index = list.value.indexOf(item);
+  if (index > -1) {
+    list.value.splice(index, 1);
+  }
+};
+</script>
+
+<template>
+  <div
+    ref="ul"
+    class="flex flex-col gap-2"
+  >
+    <InputGroup
+      v-for="item in list"
+      :key="item.locale"
+      class="bg-white/90"
+    >
+      <InputGroupAddon
+        align="inline-start"
+        data-drag-handle
+      >
+        <Icon icon="fluent:re-order-dots-vertical-20-regular" />
+      </InputGroupAddon>
+      <InputGroupAddon align="inline-start">
+        <DropdownMenu>
+          <DropdownMenuTrigger as-child>
+            <InputGroupAddon
+              align="inline-start"
+              class="cursor-pointer"
+            >
+              <Icon :icon="`circle-flags:lang-${item.locale}`" />
+            </InputGroupAddon>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem
+              v-for="locale in getAvailableLocales(item)"
+              :key="locale"
+              @select="item.locale = locale"
+            >
+              <Icon :icon="`circle-flags:lang-${locale}`" />
+              {{ localeNames[locale] }}
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </InputGroupAddon>
+      <InputGroupAddon align="inline-end">
+        <InputGroupButton
+          align="inline-end"
+          variant="destructive"
+          @click="removeItem(item)"
+        >
+          <Icon icon="fluent:delete-20-regular" />
+        </InputGroupButton>
+      </InputGroupAddon>
+      <InputGroupText
+        v-model="item.message"
+        class="flex-1"
+      />
+    </InputGroup>
+  </div>
+</template>

package/dist/runtime/components/locale.vue.d.ts

@@ -0,0 +1,14 @@
+interface LocaleItem {
+    locale: string;
+    message: string;
+}
+type __VLS_ModelProps = {
+    modelValue?: Array<LocaleItem>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: LocaleItem[] | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: LocaleItem[] | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/query.vue

@@ -10,10 +10,11 @@ import { useCheating, useId } from "#imports";
 import { defu } from "defu";
 import { Dialog, DialogScrollContent, DialogHeader, DialogTitle, DialogDescription } from "./ui/dialog";
 import { Skeleton } from "./ui/skeleton";
-import { ref, watch } from "vue";
+import { ref, useTemplateRef, watch } from "vue";
 import { Effect, Either, Schema } from "effect";
-import { computedAsync } from "@vueuse/core";
+import { computedAsync, createReusableTemplate } from "@vueuse/core";
 import { getRead } from "../utilities/query-config/global";
+import { useSortable } from "@vueuse/integrations/useSortable";
 import { FieldSchema } from "../utilities/query-config/schema";
 </script>
 
@@ -63,6 +64,10 @@ const modelValue = defineModel("modelValue", { type: Object, ...{
 } });
 const isCheating = useCheating();
 const isDialogOpen = ref(false);
+const [DefineTextConfiguration, TextConfiguration] = createReusableTemplate();
+const [DefineNumberConfiguration, NumberConfiguration] = createReusableTemplate();
+const sortableFields = useTemplateRef("sortableFields");
+useSortable(sortableFields, [], {});
 </script>
 
 <template>
@@ -89,7 +94,24 @@ const isDialogOpen = ref(false);
         <DialogDescription class="sr-only">
           <DialogTitle>Configure query fields dynamically</DialogTitle>
         </DialogDescription>
-        <pre class="text-xs overflow-auto">{{ JSON.stringify(fields, null, 2) }}</pre>
+        <ul
+          ref="sortableFields"
+          class="flex flex-col gap-2"
+        >
+          <template
+            v-for="field of fields"
+            :key="field.path"
+          >
+            <TextConfiguration
+              v-if="field.type === 'string'"
+              v-bind="field"
+            />
+            <NumberConfiguration
+              v-if="field.type === 'number'"
+              v-bind="field"
+            />
+          </template>
+        </ul>
       </DialogScrollContent>
     </Dialog>
 
@@ -98,6 +120,34 @@ const isDialogOpen = ref(false);
       class="absolute inset-0 z-10 w-full h-full"
     />
 
+    <DefineTextConfiguration #="{ path }">
+      <InputGroup>
+        <InputGroupAddon>
+          <Icon
+            icon="fluent:re-order-dots-20-regular"
+          />
+        </InputGroupAddon>
+        <InputGroupInput
+          :model-value="path"
+          class="font-mono"
+        />
+      </InputGroup>
+    </DefineTextConfiguration>
+
+    <DefineNumberConfiguration #="{ path }">
+      <InputGroup>
+        <InputGroupAddon>
+          <Icon
+            icon="fluent:re-order-dots-20-regular"
+          />
+        </InputGroupAddon>
+        <InputGroupInput
+          :model-value="path"
+          class="font-mono"
+        />
+      </InputGroup>
+    </DefineNumberConfiguration>
+
     <Field
       v-for="(field, i) in fields"
       :key="field.path"

package/dist/runtime/plugins/api/index.js

@@ -1,10 +1,13 @@
-import { defineNuxtPlugin, useRuntimeConfig } from "#app";
+import { defineNuxtPlugin, useNuxtApp, useRuntimeConfig } from "#app";
 import { useNavigatorLanguage } from "@vueuse/core";
+import z from "zod";
 export default defineNuxtPlugin({
   name: "shwfed-nuxt:api",
+  dependsOn: ["shwfed-nuxt:cel"],
   setup: () => {
     const locale = useNavigatorLanguage();
     const config = useRuntimeConfig().public.shwfed;
+    const { $dsl } = useNuxtApp();
     const api = $fetch.create({
       baseURL: config.api.host,
       onRequest: ({
@@ -13,7 +16,18 @@ export default defineNuxtPlugin({
         if (locale.isSupported && locale.language.value) {
           options.headers.set("Accept-Language", locale.language.value);
         }
-        const name = config.headers.token ?? "Authorization";
+        if (typeof config.config?.api?.header === "string") {
+          try {
+            for (const [key, value] of Object.entries(
+              z.record(z.string(), z.string()).parse($dsl.evaluate`${config.config.api.header}`())
+            )) {
+              options.headers.set(key, value);
+            }
+          } catch (e) {
+            console.error(e);
+          }
+        }
+        const name = config.headers.token || "Authorization";
         options.headers.set(name, sessionStorage.getItem("token") ?? "");
       }
     });

package/dist/runtime/style.css

@@ -1 +1 @@
-@import "tailwindcss";@plugin "@tailwindcss/typography";@source "components";
+@import "tailwindcss";@plugin "@tailwindcss/typography";@source "components";@theme{--font-sans:"Noto Sans","Noto Sans SC","Noto Sans JP","sans-serif";--font-mono:"Berkeley Mono","Fira Mono","monospace"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shwfed/nuxt",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "",
   "license": "MIT",
   "type": "module",
@@ -40,6 +40,7 @@
     "@iconify/vue": "^5.0.0",
     "@intlify/unplugin-vue-i18n": "^11.0.3",
     "@marcbachmann/cel-js": "^7.2.1",
+    "@nuxt/fonts": "^0.14.0",
     "@nuxt/kit": "^4.3.0",
     "@tailwindcss/typography": "^0.5.19",
     "@tailwindcss/vite": "^4.2.1",