v-nuxt-ui 0.1.0

package/dist/runtime/components/form/field/TreeSelectTransfer.vue

@@ -0,0 +1,89 @@
+<script setup>
+import { ref, watch } from "vue";
+import { flattenTree } from "#v/utils";
+import ScrollArea from "#v/components/ScrollArea.vue";
+const props = defineProps({
+  sourceTreeItems: { type: Array, required: true },
+  targetTreeItems: { type: Array, required: true },
+  onUpdateTargetTreeItems: { type: Function, required: true },
+  disabled: { type: Boolean, required: false }
+});
+const expandedTreeItems = ref();
+watch(() => props.sourceTreeItems, () => {
+  expandedTreeItems.value = flattenTree(props.sourceTreeItems).map((item) => item.value ?? "");
+});
+function getAncestors(items, targetValue, ancestors = []) {
+  for (const item of items) {
+    if (item.value === targetValue) {
+      return ancestors;
+    }
+    if (item.children) {
+      const found = getAncestors(item.children, targetValue, [...ancestors, item]);
+      if (found.length > 0 || item.children.some((child) => child.value === targetValue)) {
+        if (item.children.some((child) => child.value === targetValue)) {
+          return [...ancestors, item];
+        }
+        return found;
+      }
+    }
+  }
+  return [];
+}
+function handleUpdateModelValue(selectedItems) {
+  const selectedValues = new Set(selectedItems.map((item) => item.value ?? ""));
+  const allParents = /* @__PURE__ */ new Set();
+  for (const item of selectedItems) {
+    const ancestors = getAncestors(props.sourceTreeItems, item.value ?? "");
+    ancestors.forEach((ancestor) => {
+      if (ancestor.value) {
+        allParents.add(ancestor.value);
+      }
+    });
+  }
+  const allTreeItems = flattenTree(props.sourceTreeItems);
+  const finalSelectedItems = allTreeItems.filter(
+    (item) => selectedValues.has(item.value ?? "") || allParents.has(item.value ?? "")
+  );
+  props.onUpdateTargetTreeItems(finalSelectedItems);
+}
+</script>
+
+<template>
+  <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-px min-h-8">
+    <ScrollArea class="sm:rounded-none sm:rounded-l-md ring ring-accented px-2 py-1">
+      <UTree
+        v-model:expanded="expandedTreeItems"
+        :model-value="flattenTree(targetTreeItems)"
+        :items="sourceTreeItems"
+        :get-key="(i) => i.value"
+        :as="{ link: 'div' }"
+        size="sm"
+        multiple
+        propagate-select
+        class="max-h-64 w-full"
+        @update:model-value="handleUpdateModelValue"
+      >
+        <template #item-leading="{ selected, indeterminate, handleSelect }">
+          <UCheckbox
+            :model-value="indeterminate ? 'indeterminate' : selected"
+            tabindex="-1"
+            size="sm"
+            @change="handleSelect"
+            @click.stop
+          />
+        </template>
+      </UTree>
+    </ScrollArea>
+    <ScrollArea class="sm:rounded-none sm:rounded-r-md ring ring-accented px-2 py-1">
+      <div class="flex items-center gap-2">
+        <UTree
+          v-model:expanded="expandedTreeItems"
+          :items="targetTreeItems"
+          :get-key="(i) => i.value"
+          size="sm"
+          class="max-h-64 w-full"
+        />
+      </div>
+    </ScrollArea>
+  </div>
+</template>

package/dist/runtime/components/form/field/TreeSelectTransfer.vue.d.ts

@@ -0,0 +1,4 @@
+import type { VFormFieldTreeSelectTransferProps } from '#v/types';
+declare const __VLS_export: import("vue").DefineComponent<VFormFieldTreeSelectTransferProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<VFormFieldTreeSelectTransferProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/form/field/index.d.vue.ts

@@ -0,0 +1,26 @@
+import type { VFormFieldProps } from '#v/types';
+declare const __VLS_export: <T extends Record<string, any>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<({
+        field: VFormFieldProps<T>;
+        onTriggerSubmit?: (e: Event) => void;
+    } & {
+        modelValue: Partial<T>;
+    }) & {
+        "onUpdate:modelValue"?: ((value: Partial<T>) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: (event: "update:modelValue", value: Partial<T>) => void;
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/form/field/index.vue

@@ -0,0 +1,212 @@
+<script setup>
+import { computed } from "vue";
+import FormFieldInput from "./Input.vue";
+import FormFieldDynamicInput from "./DynamicInput.vue";
+import FormFieldDynamicObjectInput from "./DynamicObjectInput.vue";
+import FormFieldInputStringNumber from "./InputStringNumber.vue";
+import FormFieldInputPassword from "./InputPassword.vue";
+import FormFieldButtonSwitch from "./ButtonSwitch.vue";
+import FormFieldSelect from "./Select.vue";
+import FormFieldAsyncSelect from "./AsyncSelect.vue";
+import FormFieldAsyncObjectSelect from "./AsyncObjectSelect.vue";
+import FormFieldDatePicker from "./DatePicker.vue";
+import FormFieldAsyncTreeSelect from "./AsyncTreeSelect.vue";
+import FormFieldTreeSelectTransfer from "./TreeSelectTransfer.vue";
+import FormFieldSqlEditor from "./SqlEditor.vue";
+const props = defineProps({
+  field: { type: Object, required: true },
+  onTriggerSubmit: { type: Function, required: false }
+});
+const modelValue = defineModel("modelValue", { type: Object, ...{ required: true } });
+const fieldModelValue = computed({
+  get: () => modelValue.value[props.field.name ?? ""],
+  set: (newValue) => {
+    modelValue.value[props.field.name ?? ""] = newValue;
+  }
+});
+</script>
+
+<template>
+  <USeparator
+    v-if="field.type === 'separator'"
+    :label="field.separatorLabel"
+    :ui="{
+  label: 'text-dimmed text-xs'
+}"
+    type="dashed"
+    size="xs"
+    class="mt-2 -mb-2"
+  />
+  <FormFieldInput
+    v-else-if="field.type === 'input'"
+    v-model="fieldModelValue"
+    :disabled="field.disabled"
+    :placeholder="field.placeholder"
+    :enter-keydown-submit="field.enterKeydownSubmit"
+    @trigger-submit="onTriggerSubmit"
+  />
+  <FormFieldDynamicInput
+    v-else-if="field.type === 'dynamic-input'"
+    v-model="fieldModelValue"
+    :delimiter="field.delimiter"
+    :disabled="field.disabled"
+  />
+  <FormFieldDynamicObjectInput
+    v-else-if="field.type === 'dynamic-input-object'"
+    v-model="fieldModelValue"
+    :object-fields="field.objectFields"
+    :field-name="field.name"
+    :disabled="field.disabled"
+  />
+  <FormFieldInputStringNumber
+    v-else-if="field.type === 'input-string-number'"
+    v-model="fieldModelValue"
+    :disabled="field.disabled"
+    :placeholder="field.placeholder"
+    :trailing-string="field.trailingString"
+  />
+  <UInputNumber
+    v-else-if="field.type === 'input-number'"
+    v-model="fieldModelValue"
+    :disabled="field.disabled"
+    :placeholder="field.placeholder"
+    orientation="vertical"
+  />
+  <FormFieldInputPassword
+    v-else-if="field.type === 'input-pwd'"
+    v-model="fieldModelValue"
+    :placeholder="field.placeholder"
+    :disabled="field.disabled"
+    :enter-keydown-submit="field.enterKeydownSubmit"
+    @trigger-submit="onTriggerSubmit"
+  />
+  <div v-else-if="field.type === 'switch'" class="flex items-center h-8">
+    <USwitch
+      v-model="fieldModelValue"
+      unchecked-icon="i-lucide-x"
+      checked-icon="i-lucide-check"
+      :disabled="field.disabled"
+      size="xl"
+    />
+  </div>
+  <FormFieldButtonSwitch
+    v-else-if="field.type === 'button-switch'"
+    v-model="fieldModelValue"
+    :disabled="field.disabled"
+  />
+  <UTextarea
+    v-else-if="field.type === 'textarea'"
+    v-model="fieldModelValue"
+    class="w-full"
+    autoresize
+    :disabled="field.disabled"
+  />
+  <FormFieldDatePicker
+    v-else-if="field.type === 'date-picker'"
+    v-model="fieldModelValue"
+    :disabled="field.disabled"
+    :peer-buttons="field.peerButtons"
+  />
+  <FormFieldSelect
+    v-else-if="field.type === 'select'"
+    v-model="fieldModelValue"
+    :items="field.items"
+    :searchable="field.searchable ?? false"
+    :icon="field.icon ? field.icon : field.multiple ? 'i-lucide-list-todo' : void 0"
+    :enable-empty-option="field.enableEmptyOption"
+    :placeholder="field.placeholder"
+    value-key="value"
+    :disabled="field.disabled"
+  />
+  <USelectMenu
+    v-else-if="field.type === 'multiple-select-string'"
+    :model-value="fieldModelValue ? fieldModelValue.split(',') : []"
+    :items="field.items"
+    :search-input="field.searchable ?? false"
+    value-key="value"
+    class="w-full"
+    multiple
+    :placeholder="field.placeholder"
+    :icon="field.icon ? field.icon : 'i-lucide-list-todo'"
+    :disabled="field.disabled"
+    @update:model-value="(newVal) => fieldModelValue = newVal.join(',')"
+  />
+  <FormFieldAsyncSelect
+    v-else-if="field.type === 'async-select'"
+    v-model="fieldModelValue"
+    :icon="field.icon"
+    :list-api="field.listApi"
+    :extra-query="field.extraQuery"
+    :init-model-values="field.initModelValues"
+    :search-fields="field.searchFields"
+    :label-field="field.labelField"
+    :label-render-fn="field.labelRenderFn"
+    :value-field="field.valueField"
+    :multiple="field.multiple"
+    :placeholder="field.placeholder"
+    :disabled="field.disabled"
+    :enable-empty-option="field.enableEmptyOption"
+    :extra-search-field-fn="field.extraSearchFieldFn"
+    @update-init-model-values="field.onUpdateInitModelValues"
+  />
+  <FormFieldAsyncObjectSelect
+    v-else-if="field.type === 'async-object-select'"
+    v-model="fieldModelValue"
+    :icon="field.icon"
+    :list-api="field.listApi"
+    :extra-query="field.extraQuery"
+    :init-model-values="field.initModelValues"
+    :search-fields="field.searchFields"
+    :label-field="field.labelField"
+    :label-render-fn="field.labelRenderFn"
+    :value-field="field.valueField"
+    :multiple="field.multiple"
+    :placeholder="field.placeholder"
+    :disabled="field.disabled"
+    @update-init-model-values="field.onUpdateInitModelValues"
+  />
+  <FormFieldAsyncTreeSelect
+    v-else-if="field.type === 'async-tree-select'"
+    v-model="fieldModelValue"
+    :icon="field.icon"
+    :list-api="field.listApi"
+    :extra-query="field.extraQuery"
+    :init-model-values="field.initModelValues"
+    :search-fields="field.searchFields"
+    :label-field="field.labelField"
+    :value-field="field.valueField"
+    :multiple="field.multiple"
+    :placeholder="field.placeholder"
+    :fetch-all="field.fetchAll"
+    :disabled="field.disabled"
+    @update-init-model-values="field.onUpdateInitModelValues"
+  />
+  <FormFieldTreeSelectTransfer
+    v-else-if="field.type === 'tree-select-transfer'"
+    :source-tree-items="field.sourceTreeItems"
+    :target-tree-items="field.targetTreeItems"
+    :disabled="field.disabled"
+    @update-target-tree-items="field.onUpdateTargetTreeItems"
+  />
+  <URadioGroup
+    v-else-if="field.type === 'radio-select'"
+    v-model="fieldModelValue"
+    :items="field.items"
+    :color="field.color"
+    :variant="field.variant"
+    :size="field.size"
+    :orientation="field.orientation"
+    :disabled="field.disabled"
+  />
+  <FormFieldSqlEditor
+    v-else-if="field.type === 'sql-editor'"
+    v-model="fieldModelValue"
+  />
+  <component
+    :is="field.component"
+    v-else-if="field.type === 'custom'"
+  />
+  <div v-else>
+    未实现的form组件类型 {{ field.type }}
+  </div>
+</template>

package/dist/runtime/components/form/field/index.vue.d.ts

@@ -0,0 +1,26 @@
+import type { VFormFieldProps } from '#v/types';
+declare const __VLS_export: <T extends Record<string, any>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<({
+        field: VFormFieldProps<T>;
+        onTriggerSubmit?: (e: Event) => void;
+    } & {
+        modelValue: Partial<T>;
+    }) & {
+        "onUpdate:modelValue"?: ((value: Partial<T>) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: (event: "update:modelValue", value: Partial<T>) => void;
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/form/index.d.vue.ts

@@ -0,0 +1,21 @@
+import type { FormTemplateProps } from '#v/types';
+declare const __VLS_export: <T extends Record<string, any>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<FormTemplateProps<T>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        validate: () => any;
+    }>) => void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/form/index.vue

@@ -0,0 +1,77 @@
+<script setup>
+import { isEmptyString, getColSpanClassFromResponsive } from "#v/utils";
+import FormField from "./field/index.vue";
+import * as z from "zod";
+const props = defineProps({
+  fields: { type: Array, required: true },
+  modelValue: { type: Object, required: true },
+  onUpdateModelValue: { type: Function, required: false },
+  onTriggerSubmit: { type: Function, required: false }
+});
+const form = useTemplateRef("form");
+const schema = computed(() => {
+  const schemaObj = {};
+  props.fields.filter((field) => !field.hidden && !field.disabled).forEach((field) => {
+    if (!field.name) {
+      return;
+    }
+    if (field.zodType) {
+      schemaObj[field.name] = field.zodType;
+    }
+    if (field.required === false) {
+      schemaObj[field.name] = schemaObj[field.name]?.optional() ?? z.any().optional();
+    }
+  });
+  return z.object(schemaObj);
+});
+const normFields = computed(() => props.fields.filter((field) => !field.hidden).map((field) => ({
+  ...field,
+  required: field.required === void 0 ? field.zodType?.safeParse(void 0).success || field.disabled ? false : true : field.required
+})));
+defineExpose({
+  validate: () => form.value?.validate({})
+});
+const onlyContentType = ["separator"];
+</script>
+
+<template>
+  <UForm
+    ref="form"
+    :schema="schema"
+    :state="modelValue"
+    :validate-on="['change']"
+  >
+    <div class="grid grid-cols-24 gap-3 sm:gap-4">
+      <UFormField
+        v-for="field in normFields"
+        :key="field.name"
+        :name="field.name"
+        :label="field.label"
+        :help="field.help"
+        :required="field.required"
+        :class="getColSpanClassFromResponsive(field.colSpan ?? '24')"
+        :ui="{
+  label: field.disabled ? 'text-dimmed flex items-center' : 'flex items-center'
+}"
+      >
+        <template v-if="!onlyContentType.includes(field.type)" #label>
+          <span>{{ field.label }}</span>
+          <UTooltip
+            v-if="!isEmptyString(field.annotation)"
+            :text="field.annotation"
+            :ui="{ text: 'whitespace-pre-line', content: 'h-fit' }"
+            :content="{ side: 'top' }"
+          >
+            <UIcon name="i-lucide-circle-question-mark" class="mx-px" />
+          </UTooltip>
+        </template>
+        <FormField
+          :field="field"
+          :model-value="modelValue"
+          @trigger-submit="onTriggerSubmit"
+          @update:model-value="onUpdateModelValue"
+        />
+      </UFormField>
+    </div>
+  </UForm>
+</template>

package/dist/runtime/components/form/index.vue.d.ts

@@ -0,0 +1,21 @@
+import type { FormTemplateProps } from '#v/types';
+declare const __VLS_export: <T extends Record<string, any>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<FormTemplateProps<T>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        validate: () => any;
+    }>) => void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/layout/ModuleMenu.d.vue.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    collapsed?: boolean;
+};
+declare const __VLS_export: 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 _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/layout/ModuleMenu.vue

@@ -0,0 +1,48 @@
+<script setup>
+defineProps({
+  collapsed: { type: Boolean, required: false }
+});
+const teams = ref([{
+  label: "\u7EF4\u79D1\u6280\u672F",
+  avatar: {
+    src: "/img/logo.png",
+    alt: "\u7EF4\u79D1\u6280\u672F"
+  }
+}]);
+const selectedModule = ref(teams.value[0]);
+const items = computed(() => {
+  return [teams.value.map((team) => ({
+    ...team,
+    onSelect() {
+      selectedModule.value = team;
+    }
+  })), [{
+    label: "\u65B0\u589E\u6A21\u5757",
+    icon: "i-lucide-circle-plus",
+    disabled: true
+  }, {
+    label: "\u7BA1\u7406\u6A21\u5757",
+    icon: "i-lucide-cog",
+    disabled: true
+  }]];
+});
+</script>
+
+<template>
+  <UDropdownMenu
+    :items="items"
+    :content="{ align: 'center', collisionPadding: 12 }"
+    :ui="{ content: collapsed ? 'w-40' : 'w-(--reka-dropdown-menu-trigger-width)' }"
+  >
+    <UButton
+      v-bind="{
+  ...selectedModule,
+  label: collapsed ? void 0 : selectedModule?.label
+}"
+      color="neutral"
+      variant="ghost"
+      :square="collapsed"
+      class="data-[state=open]:bg-elevated"
+    />
+  </UDropdownMenu>
+</template>

package/dist/runtime/components/layout/ModuleMenu.vue.d.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    collapsed?: boolean;
+};
+declare const __VLS_export: 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 _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/layout/ThemePicker.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/layout/ThemePicker.vue

@@ -0,0 +1,100 @@
+<script setup>
+import { useTheme } from "#v/composables";
+import ButtonTheme from "#v/components/button/Theme.vue";
+const theme = useTheme();
+</script>
+
+<template>
+  <UPopover :ui="{ content: 'px-6 py-4 flex flex-col gap-4' }">
+    <template #default="{ open }">
+      <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">
+          主色调
+        </legend>
+
+        <div class="grid grid-cols-3 gap-2 -mx-2">
+          <ButtonTheme
+            label="Black"
+            chip="black"
+            :selected="theme.blackAsPrimary.value"
+            @click="theme.blackAsPrimary.value = true"
+          >
+            <template #leading>
+              <span class="inline-block w-2 h-2 rounded-full bg-black dark:bg-white" />
+            </template>
+          </ButtonTheme>
+
+          <ButtonTheme
+            v-for="color in theme.primaryColors"
+            :key="color"
+            :label="color"
+            :chip="color"
+            :selected="!theme.blackAsPrimary.value && theme.primary.value === color"
+            @click="theme.primary.value = color"
+          />
+        </div>
+      </fieldset>
+
+      <fieldset>
+        <legend class="text-[11px] leading-none font-semibold mb-2">
+          中性色调
+        </legend>
+
+        <div class="grid grid-cols-3 gap-2 -mx-2">
+          <ButtonTheme
+            v-for="color in theme.neutralColors"
+            :key="color"
+            :label="color"
+            :chip="color === 'neutral' ? 'old-neutral' : color"
+            :selected="theme.neutral.value === color"
+            @click="theme.neutral.value = color"
+          />
+        </div>
+      </fieldset>
+
+      <fieldset>
+        <legend class="text-[11px] leading-none font-semibold mb-2">
+          圆角
+        </legend>
+
+        <div class="grid grid-cols-5 gap-2 -mx-2">
+          <ButtonTheme
+            v-for="r in theme.radiuses"
+            :key="r"
+            :label="String(r)"
+            class="justify-center"
+            :selected="theme.radius.value === r"
+            @click="theme.radius.value = r"
+          />
+        </div>
+      </fieldset>
+
+      <fieldset>
+        <legend class="text-[11px] leading-none font-semibold mb-2">
+          明暗模式
+        </legend>
+
+        <div class="grid grid-cols-3 gap-2 -mx-2">
+          <ButtonTheme
+            v-for="m in theme.modes.value"
+            :key="m.label"
+            v-bind="m"
+            :selected="theme.mode.value === m.label"
+            @click="theme.mode.value = m.value"
+          />
+        </div>
+      </fieldset>
+    </template>
+  </UPopover>
+</template>

package/dist/runtime/components/layout/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/layout/UserMenu.d.vue.ts

@@ -0,0 +1,7 @@
+type __VLS_Props = {
+    collapsed?: boolean;
+    headerMode?: boolean;
+};
+declare const __VLS_export: 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 _default: typeof __VLS_export;
+export default _default;