@shwfed/nuxt 0.10.1 → 0.10.3

package/dist/module.json

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

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

@@ -0,0 +1,25 @@
+import { Effect } from 'effect';
+import type { MarkdownConfigInput } from './ui/markdown/Markdown.vue.js';
+export { MarkdownConfigC, MarkdownStyleC } from './ui/markdown/Markdown.vue.js';
+export type { MarkdownConfig, MarkdownConfigInput } from './ui/markdown/Markdown.vue.js';
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    config?: MarkdownConfigInput | Effect.Effect<MarkdownConfigInput | undefined>;
+    context?: Record<string, unknown>;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:config": (args_0: Readonly<{
+        locale?: import("../utils/coders.js").LocaleValue;
+        inline?: boolean;
+        style?: string;
+    }>) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    config?: MarkdownConfigInput | Effect.Effect<MarkdownConfigInput | undefined>;
+    context?: Record<string, unknown>;
+}> & Readonly<{
+    "onUpdate:config"?: ((args_0: Readonly<{
+        locale?: import("../utils/coders.js").LocaleValue;
+        inline?: boolean;
+        style?: string;
+    }>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/markdown.vue

@@ -0,0 +1,42 @@
+<script setup>
+import { Effect } from "effect";
+import { computed } from "vue";
+import UiMarkdown from "./ui/markdown/Markdown.vue";
+defineOptions({
+  inheritAttrs: false
+});
+const props = defineProps({
+  config: { type: null, required: false },
+  context: { type: Object, required: false }
+});
+const emit = defineEmits(["update:config"]);
+const defaultConfig = {};
+function isMarkdownConfigEffect(value) {
+  return typeof value === "object" && value !== null && "pipe" in value && typeof value.pipe === "function";
+}
+const config = computed(() => {
+  if (!props.config) {
+    return Effect.succeed(defaultConfig);
+  }
+  if (isMarkdownConfigEffect(props.config)) {
+    return props.config.pipe(Effect.map((config2) => config2 ?? defaultConfig));
+  }
+  return Effect.succeed(props.config);
+});
+function handleConfigUpdate(config2) {
+  emit("update:config", config2);
+}
+</script>
+
+<script>
+export { MarkdownConfigC, MarkdownStyleC } from "./ui/markdown/Markdown.vue";
+</script>
+
+<template>
+  <UiMarkdown
+    v-bind="$attrs"
+    :config="config"
+    :context="props.context"
+    @update:config="handleConfigUpdate"
+  />
+</template>

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

@@ -0,0 +1,25 @@
+import { Effect } from 'effect';
+import type { MarkdownConfigInput } from './ui/markdown/Markdown.vue.js';
+export { MarkdownConfigC, MarkdownStyleC } from './ui/markdown/Markdown.vue.js';
+export type { MarkdownConfig, MarkdownConfigInput } from './ui/markdown/Markdown.vue.js';
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    config?: MarkdownConfigInput | Effect.Effect<MarkdownConfigInput | undefined>;
+    context?: Record<string, unknown>;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:config": (args_0: Readonly<{
+        locale?: import("../utils/coders.js").LocaleValue;
+        inline?: boolean;
+        style?: string;
+    }>) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    config?: MarkdownConfigInput | Effect.Effect<MarkdownConfigInput | undefined>;
+    context?: Record<string, unknown>;
+}> & Readonly<{
+    "onUpdate:config"?: ((args_0: Readonly<{
+        locale?: import("../utils/coders.js").LocaleValue;
+        inline?: boolean;
+        style?: string;
+    }>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/ui/command/CommandInput.vue

@@ -23,7 +23,7 @@ const { filterState } = useCommand();
 <template>
   <div
     data-slot="command-input-wrapper"
-    class="flex h-12 items-center gap-2 border-b border-zinc-200 px-3"
+    class="flex h-10 items-center gap-2 border-b border-zinc-200 px-3"
   >
     <Icon
       icon="fluent:search-20-filled"

package/dist/runtime/components/ui/fields/Fields.vue

@@ -7,15 +7,15 @@ import { Icon } from "@iconify/vue";
 import { Effect } from "effect";
 import { format, parse } from "date-fns";
 import { deleteProperty, getProperty, hasProperty, setProperty } from "dot-prop";
-import { ref, toRaw, useId, watch, watchEffect } from "vue";
+import { nextTick, ref, toRaw, useId, watch, watchEffect } from "vue";
 import { useI18n } from "vue-i18n";
 import { useCheating } from "#imports";
 import { Calendar } from "../calendar";
 import { Button } from "../button";
-import { CommandGroup, CommandItem } from "../command";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "../command";
 import { Field, FieldContent, FieldError, FieldLabel } from "../field";
 import FieldsConfiguratorDialog from "../fields-configurator/FieldsConfiguratorDialog.vue";
-import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupCombobox, InputGroupInput, InputGroupNumberField, InputGroupTextarea } from "../input-group";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupNumberField, InputGroupTextarea } from "../input-group";
 import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "../popover";
 import { Skeleton } from "../skeleton";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip";
@@ -40,6 +40,7 @@ const isConfiguratorOpen = ref(false);
 const displayConfig = ref(defaultConfig);
 const validationErrors = ref({});
 const calendarOpen = ref({});
+const selectOpen = ref({});
 function cloneConfig(config2) {
   const nextConfig = {
     fields: config2.fields.slice()
@@ -109,6 +110,90 @@ function isFieldDisabled(field) {
 function getFieldValue(field) {
   return getProperty(modelValue.value, field.path);
 }
+function stringifySelectValue(value) {
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return void 0;
+  }
+}
+function isSelectObjectValue(value) {
+  return typeof value === "object" && value !== null;
+}
+function isSelectValueEqual(left, right) {
+  if (!isSelectObjectValue(left) && !isSelectObjectValue(right)) {
+    return Object.is(left, right);
+  }
+  if (!isSelectObjectValue(left) || !isSelectObjectValue(right)) {
+    return false;
+  }
+  const leftValue = stringifySelectValue(left);
+  const rightValue = stringifySelectValue(right);
+  if (leftValue === void 0 || rightValue === void 0) {
+    return false;
+  }
+  return leftValue === rightValue;
+}
+function getSelectOptions(field) {
+  return $dsl.evaluate`${field.options}`().map((option) => {
+    return {
+      key: $dsl.evaluate`${field.key}`({ option }),
+      label: $dsl.evaluate`${field.label}`({ option }),
+      value: $dsl.evaluate`${field.value}`({ option })
+    };
+  });
+}
+function getSelectFieldState(field) {
+  const options = getSelectOptions(field);
+  const currentValue = getFieldValue(field);
+  const selectedOption = options.find((option) => isSelectValueEqual(option.value, currentValue));
+  return {
+    options,
+    selectedKey: selectedOption?.key
+  };
+}
+function getSelectDisplayValue(state, value) {
+  if (typeof value !== "string") {
+    return "";
+  }
+  return state.options.find((option) => option.key === value)?.label ?? "";
+}
+function clearSelectField(field) {
+  deleteProperty(modelValue.value, field.path);
+}
+function handleSelectValueChange(field, state, value) {
+  if (typeof value !== "string") {
+    clearSelectField(field);
+    return;
+  }
+  const option = state.options.find((candidate) => candidate.key === value);
+  if (!option) {
+    clearSelectField(field);
+    return;
+  }
+  setProperty(modelValue.value, field.path, option.value);
+}
+function handleSelectOpenChange(field, open) {
+  if (open) {
+    selectOpen.value[field.path] = true;
+    return;
+  }
+  Reflect.deleteProperty(selectOpen.value, field.path);
+  validateField(field);
+}
+function handleSelectBlur(field) {
+  window.setTimeout(() => {
+    if (!selectOpen.value[field.path]) {
+      validateField(field);
+    }
+  }, 0);
+}
+function handleSelectCommandValueChange(field, state, value) {
+  handleSelectValueChange(field, state, value);
+  void nextTick().then(() => {
+    handleSelectOpenChange(field, false);
+  });
+}
 function clearFieldValidation(path) {
   Reflect.deleteProperty(validationErrors.value, path);
 }
@@ -195,6 +280,11 @@ watchEffect(() => {
       Reflect.deleteProperty(calendarOpen.value, path);
     }
   }
+  for (const path of Object.keys(selectOpen.value)) {
+    if (!activePaths.has(path)) {
+      Reflect.deleteProperty(selectOpen.value, path);
+    }
+  }
 });
 </script>
 
@@ -265,7 +355,7 @@ export {
         :orientation="getConfigOrientation(displayConfig)"
         :style="getFieldStyle(field)"
       >
-        <FieldLabel :for="['string', 'textarea', 'number'].includes(field.type) ? `${id}:${field.path}` : void 0">
+        <FieldLabel :for="['string', 'textarea', 'number', 'select'].includes(field.type) ? `${id}:${field.path}` : void 0">
           <span class="inline-flex items-start gap-0.5">
             <span>{{ getFieldLabel(field) }}</span>
             <sup
@@ -343,17 +433,132 @@ export {
               />
             </PopoverContent>
           </Popover>
-          <InputGroup
-            v-else
-            :data-disabled="isFieldDisabled(field) ? 'true' : void 0"
-            :class="field.type === 'textarea' ? 'h-auto flex-col items-stretch' : void 0"
-          >
-            <div
-              v-if="field.type === 'textarea'"
-              class="flex min-w-0 w-full items-center"
+          <template v-else>
+            <template v-if="field.type === 'select'">
+              <Popover
+                v-for="selectState in [getSelectFieldState(field)]"
+                :key="`${field.id}:select:${selectState.selectedKey ?? 'empty'}`"
+                :open="selectOpen[field.path] === true"
+                @update:open="(open) => handleSelectOpenChange(field, open)"
+              >
+                <PopoverAnchor as-child>
+                  <InputGroup :data-disabled="isFieldDisabled(field) ? 'true' : void 0">
+                    <PopoverTrigger as-child>
+                      <InputGroupInput
+                        :id="`${id}:${field.path}`"
+                        :model-value="getSelectDisplayValue(selectState, selectState.selectedKey)"
+                        :disabled="isFieldDisabled(field)"
+                        :aria-invalid="isFieldInvalid(field) ? 'true' : void 0"
+                        :placeholder="t('select-placeholder')"
+                        class="text-left"
+                        readonly
+                        @blur="handleSelectBlur(field)"
+                      />
+                    </PopoverTrigger>
+                    <InputGroupAddon v-if="field.icon">
+                      <Icon
+                        :icon="field.icon"
+                      />
+                    </InputGroupAddon>
+                    <InputGroupAddon
+                      v-if="hasProperty(modelValue, field.path)"
+                      align="inline-end"
+                      :class="getConfigOrientation(displayConfig) === 'floating' ? 'group-data-[disabled=true]/input-group:hidden' : void 0"
+                    >
+                      <Tooltip :delay-duration="800">
+                        <TooltipTrigger>
+                          <InputGroupButton as-child>
+                            <button
+                              type="button"
+                              class="text-zinc-300 hover:text-zinc-500 transition-colors"
+                              :disabled="isFieldDisabled(field)"
+                              @click="clearSelectField(field)"
+                            >
+                              <Icon
+                                icon="fluent:dismiss-20-regular"
+                              />
+                            </button>
+                          </InputGroupButton>
+                        </TooltipTrigger>
+                        <TooltipContent>
+                          {{ t("clear") }}
+                        </TooltipContent>
+                      </Tooltip>
+                    </InputGroupAddon>
+                  </InputGroup>
+                </PopoverAnchor>
+
+                <PopoverContent class="w-72 p-0">
+                  <Command
+                    :model-value="selectState.selectedKey"
+                    :disabled="isFieldDisabled(field)"
+                    selection-behavior="toggle"
+                    @update:model-value="(value) => handleSelectCommandValueChange(field, selectState, value)"
+                  >
+                    <CommandInput :placeholder="t('select-search-placeholder')" />
+                    <CommandList>
+                      <CommandEmpty as-child>
+                        <section class="h-32 flex flex-col text-lg items-center justify-center gap-2 select-none">
+                          <Icon
+                            icon="fluent:app-recent-20-regular"
+                            class="text-zinc-400 text-2xl!"
+                          />
+                          <p class="text-zinc-500">
+                            {{ t("select-empty") }}
+                          </p>
+                        </section>
+                      </CommandEmpty>
+                      <CommandGroup>
+                        <CommandItem
+                          v-for="option in selectState.options"
+                          :key="option.key"
+                          data-slot="select-option"
+                          :value="option.key"
+                          class="data-highlighted:bg-zinc-50 data-highlighted:text-zinc-700 data-[state=checked]:bg-zinc-100 data-[state=checked]:text-zinc-700 transition cursor-pointer relative flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none"
+                        >
+                          {{ option.label }}
+                        </CommandItem>
+                      </CommandGroup>
+                    </CommandList>
+                  </Command>
+                </PopoverContent>
+              </Popover>
+            </template>
+
+            <InputGroup
+              v-else
+              :data-disabled="isFieldDisabled(field) ? 'true' : void 0"
+              :class="field.type === 'textarea' ? 'h-auto flex-col items-stretch' : void 0"
             >
-              <InputGroupTextarea
+              <div
+                v-if="field.type === 'textarea'"
+                class="flex min-w-0 w-full items-center"
+              >
+                <InputGroupTextarea
+                  :id="`${id}:${field.path}`"
+                  :model-value="getProperty(modelValue, field.path)"
+                  :maxlength="field.maxLength ? $dsl.evaluate`${field.maxLength}`() : void 0"
+                  :disabled="isFieldDisabled(field)"
+                  :aria-invalid="isFieldInvalid(field) ? 'true' : void 0"
+                  @update:model-value="(value) => {
+  if (!value && !field.discardEmptyString) {
+    deleteProperty(modelValue, field.path);
+  } else {
+    setProperty(modelValue, field.path, value);
+  }
+}"
+                  @blur="validateField(field)"
+                />
+                <InputGroupAddon v-if="field.icon">
+                  <Icon
+                    :icon="field.icon"
+                  />
+                </InputGroupAddon>
+              </div>
+              <InputGroupInput
+                v-if="field.type === 'string'"
                 :id="`${id}:${field.path}`"
+                :treat-empty-as-different-state-from-null="!!field.discardEmptyString"
                 :model-value="getProperty(modelValue, field.path)"
                 :maxlength="field.maxLength ? $dsl.evaluate`${field.maxLength}`() : void 0"
                 :disabled="isFieldDisabled(field)"
@@ -367,136 +572,97 @@ export {
 }"
                 @blur="validateField(field)"
               />
-              <InputGroupAddon v-if="field.icon">
-                <Icon
-                  :icon="field.icon"
-                />
-              </InputGroupAddon>
-            </div>
-            <InputGroupInput
-              v-if="field.type === 'string'"
-              :id="`${id}:${field.path}`"
-              :treat-empty-as-different-state-from-null="!!field.discardEmptyString"
-              :model-value="getProperty(modelValue, field.path)"
-              :maxlength="field.maxLength ? $dsl.evaluate`${field.maxLength}`() : void 0"
-              :disabled="isFieldDisabled(field)"
-              :aria-invalid="isFieldInvalid(field) ? 'true' : void 0"
-              @update:model-value="(value) => {
-  if (!value && !field.discardEmptyString) {
-    deleteProperty(modelValue, field.path);
-  } else {
-    setProperty(modelValue, field.path, value);
-  }
-}"
-              @blur="validateField(field)"
-            />
-            <InputGroupNumberField
-              v-if="field.type === 'number'"
-              :id="`${id}:${field.path}`"
-              :model-value="getProperty(modelValue, field.path) ?? null"
-              :min="field.min ? $dsl.evaluate`${field.min}`() : void 0"
-              :max="field.max ? $dsl.evaluate`${field.max}`() : void 0"
-              :step="field.step ? $dsl.evaluate`${field.step}`() : void 0"
-              :disabled="isFieldDisabled(field)"
-              :invalid="isFieldInvalid(field)"
-              @update:model-value="(value) => {
+              <InputGroupNumberField
+                v-if="field.type === 'number'"
+                :id="`${id}:${field.path}`"
+                :model-value="getProperty(modelValue, field.path) ?? null"
+                :min="field.min ? $dsl.evaluate`${field.min}`() : void 0"
+                :max="field.max ? $dsl.evaluate`${field.max}`() : void 0"
+                :step="field.step ? $dsl.evaluate`${field.step}`() : void 0"
+                :disabled="isFieldDisabled(field)"
+                :invalid="isFieldInvalid(field)"
+                @update:model-value="(value) => {
   if (!value && value !== 0) {
     deleteProperty(modelValue, field.path);
   } else {
     setProperty(modelValue, field.path, value);
   }
 }"
-              @blur="validateField(field)"
-            />
-            <InputGroupCombobox
-              v-if="field.type === 'select'"
-              :disabled="isFieldDisabled(field)"
-              :invalid="isFieldInvalid(field)"
-              @blur="validateField(field)"
-            >
-              <CommandGroup>
-                <CommandItem
-                  v-for="option in $dsl.evaluate`${field.options}`()"
-                  :key="$dsl.evaluate`${field.key}`({ option })"
-                  :value="$dsl.evaluate`${field.key}`({ option })"
-                  @select="setProperty(modelValue, field.path, $dsl.evaluate`${field.value}`({ option }))"
-                >
-                  {{ $dsl.evaluate`${field.label}`({ option }) }}
-                </CommandItem>
-              </CommandGroup>
-            </InputGroupCombobox>
-            <InputGroupAddon v-if="field.type !== 'textarea' && field.icon">
-              <Icon
-                :icon="field.icon"
+                @blur="validateField(field)"
               />
-            </InputGroupAddon>
-            <InputGroupAddon
-              v-if="field.type !== 'textarea' && hasProperty(modelValue, field.path)"
-              align="inline-end"
-              :class="getConfigOrientation(displayConfig) === 'floating' ? 'group-data-[disabled=true]/input-group:hidden' : void 0"
-            >
-              <Tooltip :delay-duration="800">
-                <TooltipTrigger>
-                  <InputGroupButton as-child>
-                    <button
-                      type="button"
-                      class="text-zinc-300 hover:text-zinc-500 transition-colors"
-                      :disabled="isFieldDisabled(field)"
-                      @click="deleteProperty(modelValue, field.path)"
-                    >
-                      <Icon
-                        icon="fluent:dismiss-20-regular"
-                      />
-                    </button>
-                  </InputGroupButton>
-                </TooltipTrigger>
-                <TooltipContent>
-                  {{ t("clear") }}
-                </TooltipContent>
-              </Tooltip>
-            </InputGroupAddon>
-            <InputGroupAddon
-              v-if="field.type === 'string' && field.maxLength && getProperty(modelValue, field.path)"
-              align="inline-end"
-            >
-              <span class="text-xs text-zinc-400 font-mono">
-                <span class="inline-block text-right">{{ String(getProperty(modelValue, field.path) ?? "").length }}</span>/{{ field.maxLength }}
-              </span>
-            </InputGroupAddon>
-            <InputGroupAddon
-              v-if="field.type === 'textarea' && (hasProperty(modelValue, field.path) || field.maxLength && getProperty(modelValue, field.path))"
-              align="block-end"
-            >
-              <Tooltip
-                v-if="hasProperty(modelValue, field.path)"
-                :delay-duration="800"
+              <InputGroupAddon v-if="field.type !== 'textarea' && field.icon">
+                <Icon
+                  :icon="field.icon"
+                />
+              </InputGroupAddon>
+              <InputGroupAddon
+                v-if="field.type !== 'textarea' && hasProperty(modelValue, field.path)"
+                align="inline-end"
+                :class="getConfigOrientation(displayConfig) === 'floating' ? 'group-data-[disabled=true]/input-group:hidden' : void 0"
               >
-                <TooltipTrigger>
-                  <InputGroupButton as-child>
-                    <button
-                      type="button"
-                      class="text-zinc-300 hover:text-zinc-500 transition-colors"
-                      :disabled="isFieldDisabled(field)"
-                      @click="deleteProperty(modelValue, field.path)"
-                    >
-                      <Icon
-                        icon="fluent:dismiss-20-regular"
-                      />
-                    </button>
-                  </InputGroupButton>
-                </TooltipTrigger>
-                <TooltipContent>
-                  {{ t("clear") }}
-                </TooltipContent>
-              </Tooltip>
-              <span
-                v-if="field.maxLength && getProperty(modelValue, field.path)"
-                class="text-xs text-zinc-400 font-mono"
+                <Tooltip :delay-duration="800">
+                  <TooltipTrigger>
+                    <InputGroupButton as-child>
+                      <button
+                        type="button"
+                        class="text-zinc-300 hover:text-zinc-500 transition-colors"
+                        :disabled="isFieldDisabled(field)"
+                        @click="deleteProperty(modelValue, field.path)"
+                      >
+                        <Icon
+                          icon="fluent:dismiss-20-regular"
+                        />
+                      </button>
+                    </InputGroupButton>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    {{ t("clear") }}
+                  </TooltipContent>
+                </Tooltip>
+              </InputGroupAddon>
+              <InputGroupAddon
+                v-if="field.type === 'string' && field.maxLength && getProperty(modelValue, field.path)"
+                align="inline-end"
               >
-                <span class="inline-block text-right">{{ String(getProperty(modelValue, field.path) ?? "").length }}</span>/{{ field.maxLength }}
-              </span>
-            </InputGroupAddon>
-          </InputGroup>
+                <span class="text-xs text-zinc-400 font-mono">
+                  <span class="inline-block text-right">{{ String(getProperty(modelValue, field.path) ?? "").length }}</span>/{{ field.maxLength }}
+                </span>
+              </InputGroupAddon>
+              <InputGroupAddon
+                v-if="field.type === 'textarea' && (hasProperty(modelValue, field.path) || field.maxLength && getProperty(modelValue, field.path))"
+                align="block-end"
+              >
+                <Tooltip
+                  v-if="hasProperty(modelValue, field.path)"
+                  :delay-duration="800"
+                >
+                  <TooltipTrigger>
+                    <InputGroupButton as-child>
+                      <button
+                        type="button"
+                        class="text-zinc-300 hover:text-zinc-500 transition-colors"
+                        :disabled="isFieldDisabled(field)"
+                        @click="deleteProperty(modelValue, field.path)"
+                      >
+                        <Icon
+                          icon="fluent:dismiss-20-regular"
+                        />
+                      </button>
+                    </InputGroupButton>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    {{ t("clear") }}
+                  </TooltipContent>
+                </Tooltip>
+                <span
+                  v-if="field.maxLength && getProperty(modelValue, field.path)"
+                  class="text-xs text-zinc-400 font-mono"
+                >
+                  <span class="inline-block text-right">{{ String(getProperty(modelValue, field.path) ?? "").length }}</span>/{{ field.maxLength }}
+                </span>
+              </InputGroupAddon>
+            </InputGroup>
+          </template>
 
           <FieldError v-if="isFieldInvalid(field)">
             <span v-html="renderValidationMessage(field)" />
@@ -513,14 +679,20 @@ export {
 {
   "zh": {
     "clear": "清空",
+    "select-empty": "无搜索结果",
+    "select-search-placeholder": "搜索…",
     "select-placeholder": "选择…"
   },
   "ja": {
     "clear": "クリア",
+    "select-empty": "結果はありません",
+    "select-search-placeholder": "検索…",
     "select-placeholder": "選択…"
   },
   "en": {
     "clear": "Clear",
+    "select-empty": "No results",
+    "select-search-placeholder": "Search…",
     "select-placeholder": "Select…"
   }
 }

package/dist/runtime/components/ui/markdown/Markdown.d.vue.ts

@@ -0,0 +1,25 @@
+import { Effect } from 'effect';
+import { type MarkdownConfigInput } from './schema.js';
+export { MarkdownConfigC, MarkdownStyleC } from './schema.js';
+export type { MarkdownConfig, MarkdownConfigInput } from './schema.js';
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    config: Effect.Effect<MarkdownConfigInput | undefined>;
+    context?: Record<string, unknown>;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:config": (args_0: Readonly<{
+        locale?: import("../../../utils/coders.js").LocaleValue;
+        inline?: boolean;
+        style?: string;
+    }>) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    config: Effect.Effect<MarkdownConfigInput | undefined>;
+    context?: Record<string, unknown>;
+}> & Readonly<{
+    "onUpdate:config"?: ((args_0: Readonly<{
+        locale?: import("../../../utils/coders.js").LocaleValue;
+        inline?: boolean;
+        style?: string;
+    }>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/ui/markdown/Markdown.vue

@@ -0,0 +1,128 @@
+<script setup>
+import { useNuxtApp } from "#app";
+import { useCheating } from "#imports";
+import { Icon } from "@iconify/vue";
+import { computedAsync } from "@vueuse/core";
+import { Effect } from "effect";
+import { computed, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import { getLocalizedText } from "../../../utils/coders";
+import { Button } from "../button";
+import { Skeleton } from "../skeleton";
+import MarkdownConfiguratorDialog from "../markdown-configurator/MarkdownConfiguratorDialog.vue";
+import { MarkdownConfigC } from "./schema";
+const defaultConfig = {};
+const props = defineProps({
+  config: { type: null, required: true },
+  context: { type: Object, required: false }
+});
+const emit = defineEmits(["update:config"]);
+const resolvedConfig = computedAsync(async () => MarkdownConfigC.parse(await props.config.pipe(Effect.runPromise) ?? defaultConfig));
+const displayConfig = ref(defaultConfig);
+const { $dsl, $md } = useNuxtApp();
+const { t, locale } = useI18n();
+const isCheating = useCheating();
+const isConfiguratorOpen = ref(false);
+function normalizeStyle(value) {
+  const style = {};
+  if (!value || typeof value !== "object" || Array.isArray(value)) {
+    return style;
+  }
+  for (const [key, entry] of Object.entries(value)) {
+    if (typeof entry === "string" || typeof entry === "number") {
+      Reflect.set(style, key, entry);
+    }
+  }
+  return style;
+}
+const renderedStyle = computed(() => {
+  if (!displayConfig.value.style) {
+    return {};
+  }
+  try {
+    return normalizeStyle($dsl.evaluate`${displayConfig.value.style}`(props.context ?? {}));
+  } catch {
+    return {};
+  }
+});
+const markdownSource = computed(() => getLocalizedText(displayConfig.value.locale, locale.value) ?? "");
+const renderedMarkdown = computed(() => {
+  if (markdownSource.value.trim().length === 0) {
+    return "";
+  }
+  if (displayConfig.value.inline) {
+    return $md.inline`${markdownSource.value}`(props.context);
+  }
+  return $md.block`${markdownSource.value}`(props.context);
+});
+function handleConfiguratorConfirm(nextConfig) {
+  displayConfig.value = nextConfig;
+  emit("update:config", nextConfig);
+}
+watch(resolvedConfig, (value) => {
+  if (!value) {
+    return;
+  }
+  displayConfig.value = value;
+}, { immediate: true });
+</script>
+
+<script>
+export { MarkdownConfigC, MarkdownStyleC } from "./schema";
+</script>
+
+<template>
+  <div
+    :class="[
+  'relative p-1 -m-1 border border-dashed',
+  isCheating ? 'border-(--primary)/20 rounded hover:border-(--primary)/40 transition-colors duration-150 group cursor-pointer' : 'border-transparent'
+]"
+    :style="renderedStyle"
+  >
+    <Button
+      v-if="isCheating"
+      data-slot="markdown-configurator-trigger"
+      variant="ghost"
+      size="sm"
+      type="button"
+      class="absolute right-3 top-3 z-20 bg-white/90 shadow-xs backdrop-blur-sm hover:bg-white"
+      :aria-label="t('markdown-open-configurator')"
+      :title="t('markdown-open-configurator')"
+      @click="isConfiguratorOpen = true"
+    >
+      <Icon icon="fluent:settings-20-regular" />
+    </Button>
+
+    <MarkdownConfiguratorDialog
+      v-if="resolvedConfig !== void 0"
+      v-model:open="isConfiguratorOpen"
+      :config="displayConfig"
+      :context="props.context"
+      @confirm="handleConfiguratorConfirm"
+    />
+
+    <Skeleton
+      v-if="resolvedConfig === void 0"
+      class="absolute inset-0 z-10 w-full h-full"
+    />
+
+    <div
+      data-slot="markdown-content"
+      v-html="renderedMarkdown"
+    />
+  </div>
+</template>
+
+<i18n lang="json">
+{
+  "zh": {
+    "markdown-open-configurator": "打开 Markdown 配置"
+  },
+  "ja": {
+    "markdown-open-configurator": "Markdown 設定を開く"
+  },
+  "en": {
+    "markdown-open-configurator": "Open markdown configurator"
+  }
+}
+</i18n>

package/dist/runtime/components/ui/markdown/Markdown.vue.d.ts

@@ -0,0 +1,25 @@
+import { Effect } from 'effect';
+import { type MarkdownConfigInput } from './schema.js';
+export { MarkdownConfigC, MarkdownStyleC } from './schema.js';
+export type { MarkdownConfig, MarkdownConfigInput } from './schema.js';
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    config: Effect.Effect<MarkdownConfigInput | undefined>;
+    context?: Record<string, unknown>;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:config": (args_0: Readonly<{
+        locale?: import("../../../utils/coders.js").LocaleValue;
+        inline?: boolean;
+        style?: string;
+    }>) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    config: Effect.Effect<MarkdownConfigInput | undefined>;
+    context?: Record<string, unknown>;
+}> & Readonly<{
+    "onUpdate:config"?: ((args_0: Readonly<{
+        locale?: import("../../../utils/coders.js").LocaleValue;
+        inline?: boolean;
+        style?: string;
+    }>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/ui/markdown/schema.d.ts

@@ -0,0 +1,26 @@
+import z from 'zod';
+import type { LocaleValue } from '../../../utils/coders.js';
+export declare const MarkdownStyleC: z.ZodOptional<z.ZodString>;
+export declare const MarkdownConfigC: z.ZodReadonly<z.ZodObject<{
+    locale: z.ZodOptional<z.ZodReadonly<z.ZodArray<z.ZodObject<{
+        locale: z.ZodEnum<{
+            zh: "zh";
+            ja: "ja";
+            en: "en";
+            ko: "ko";
+        }>;
+        message: z.ZodString;
+    }, z.core.$strip>>>>;
+    inline: z.ZodOptional<z.ZodBoolean>;
+    style: z.ZodOptional<z.ZodString>;
+}, z.core.$strict>>;
+export type MarkdownConfig = Readonly<{
+    locale?: LocaleValue;
+    inline?: boolean;
+    style?: string;
+}>;
+export type MarkdownConfigInput = Readonly<{
+    locale?: LocaleValue;
+    inline?: boolean;
+    style?: string;
+}>;

package/dist/runtime/components/ui/markdown/schema.js

@@ -0,0 +1,8 @@
+import z from "zod";
+import { localeC } from "../../../utils/coders.js";
+export const MarkdownStyleC = z.string().optional().describe("\u8FD4\u56DE Markdown \u5BB9\u5668\u6837\u5F0F\u5BF9\u8C61\u7684 CEL \u8868\u8FBE\u5F0F\uFF0C\u53EF\u76F4\u63A5\u8BBF\u95EE\u5F53\u524D\u6E32\u67D3\u4E0A\u4E0B\u6587\u53D8\u91CF\u3002");
+export const MarkdownConfigC = z.object({
+  locale: localeC.optional().describe("Markdown \u5185\u5BB9\u7684\u672C\u5730\u5316\u6587\u672C\uFF0C\u652F\u6301 Markdown \u6E32\u67D3\u4E0E {{ expression }} \u8BED\u6CD5\u3002"),
+  inline: z.boolean().optional().describe("\u4E3A true \u65F6\u4EE5\u5185\u8054\u6A21\u5F0F\u6E32\u67D3\uFF1B\u7559\u7A7A\u6216 false \u65F6\u6309\u5757\u7EA7\u6A21\u5F0F\u6E32\u67D3\u3002"),
+  style: MarkdownStyleC
+}).strict().readonly();

package/dist/runtime/components/ui/markdown-configurator/MarkdownConfiguratorDialog.d.vue.ts

@@ -0,0 +1,27 @@
+import { type LocaleValue } from '../../../utils/coders.js';
+import { type MarkdownConfig } from '../markdown/schema.js';
+type __VLS_Props = {
+    config: MarkdownConfig;
+    context?: Record<string, unknown>;
+};
+type __VLS_ModelProps = {
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+    confirm: (args_0: Readonly<{
+        locale?: LocaleValue;
+        inline?: boolean;
+        style?: string;
+    }>) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onConfirm?: ((args_0: Readonly<{
+        locale?: LocaleValue;
+        inline?: boolean;
+        style?: string;
+    }>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/ui/markdown-configurator/MarkdownConfiguratorDialog.vue

@@ -0,0 +1,288 @@
+<script setup>
+import { useNuxtApp } from "#app";
+import { ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import { hasVisibleLocaleValue } from "../../../utils/coders";
+import { Button } from "../button";
+import {
+  Dialog,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogScrollContent,
+  DialogTitle
+} from "../dialog";
+import Locale from "../locale/Locale.vue";
+import { Switch } from "../switch";
+import { Textarea } from "../textarea";
+import { MarkdownConfigC } from "../markdown/schema";
+const MARKDOWN_EXPRESSION_EXAMPLE = "{{ expression }}";
+const STYLE_EXAMPLE = '{"display": "grid", "gap": "8px"}';
+const props = defineProps({
+  config: { type: Object, required: true },
+  context: { type: Object, required: false }
+});
+const emit = defineEmits(["confirm"]);
+const open = defineModel("open", { type: Boolean, ...{
+  default: false
+} });
+const { $dsl } = useNuxtApp();
+const { t } = useI18n();
+const draftLocale = ref();
+const draftInline = ref(false);
+const draftStyle = ref("");
+const styleError = ref("");
+function resetDraftState(config) {
+  draftLocale.value = config.locale;
+  draftInline.value = config.inline === true;
+  draftStyle.value = config.style ?? "";
+  styleError.value = "";
+}
+function discardChanges() {
+  resetDraftState(props.config);
+  open.value = false;
+}
+function handleOpenChange(value) {
+  if (value) {
+    open.value = true;
+    return;
+  }
+  discardChanges();
+}
+function normalizeLocale(value) {
+  if (!hasVisibleLocaleValue(value)) {
+    return void 0;
+  }
+  return value;
+}
+function normalizeStyle(value) {
+  const trimmedValue = value.trim();
+  return trimmedValue.length > 0 ? trimmedValue : void 0;
+}
+function updateDraftStyle(value) {
+  draftStyle.value = typeof value === "string" ? value : String(value);
+}
+function isStyleObject(value) {
+  return !!value && typeof value === "object" && !Array.isArray(value);
+}
+function validateStyle(style) {
+  styleError.value = "";
+  if (!style) {
+    return true;
+  }
+  try {
+    const result = $dsl.evaluate`${style}`(props.context ?? {});
+    if (isStyleObject(result)) {
+      return true;
+    }
+  } catch {
+    styleError.value = t("style-error");
+    return false;
+  }
+  styleError.value = t("style-error");
+  return false;
+}
+function confirmChanges() {
+  const normalizedStyle = normalizeStyle(draftStyle.value);
+  if (!validateStyle(normalizedStyle)) {
+    return;
+  }
+  const nextConfig = {};
+  const localeValue = normalizeLocale(draftLocale.value);
+  if (localeValue) {
+    nextConfig.locale = localeValue;
+  }
+  if (draftInline.value) {
+    nextConfig.inline = true;
+  }
+  if (normalizedStyle) {
+    nextConfig.style = normalizedStyle;
+  }
+  emit("confirm", MarkdownConfigC.parse(nextConfig));
+  open.value = false;
+}
+watch(() => props.config, (value) => {
+  resetDraftState(value);
+}, { immediate: true });
+</script>
+
+<template>
+  <Dialog
+    :open="open"
+    @update:open="handleOpenChange"
+  >
+    <DialogScrollContent
+      class="w-[calc(100%-2rem)] max-w-3xl p-0"
+      :show-close-button="true"
+    >
+      <DialogHeader class="gap-1 border-b border-zinc-200 px-6 py-5">
+        <DialogTitle class="text-xl font-semibold text-zinc-800">
+          {{ t("configure-markdown") }}
+        </DialogTitle>
+        <DialogDescription class="text-sm text-zinc-500">
+          {{ t("configure-markdown-description") }}
+        </DialogDescription>
+      </DialogHeader>
+
+      <div class="flex flex-col gap-6 px-6 py-5">
+        <section
+          data-slot="markdown-configurator-locale-section"
+          class="flex flex-col gap-3"
+        >
+          <div class="flex flex-col gap-1">
+            <p class="text-xs font-medium text-zinc-500">
+              {{ t("locale") }}
+            </p>
+            <p class="text-sm text-zinc-500">
+              {{ t("locale-description", { expression: MARKDOWN_EXPRESSION_EXAMPLE }) }}
+            </p>
+          </div>
+
+          <Locale
+            data-slot="markdown-configurator-locale"
+            :model-value="draftLocale"
+            :multiline="true"
+            @update:model-value="draftLocale = $event"
+          />
+        </section>
+
+        <section
+          data-slot="markdown-configurator-render-mode"
+          class="flex flex-col gap-3"
+        >
+          <div class="flex flex-col gap-1">
+            <p class="text-xs font-medium text-zinc-500">
+              {{ t("render-mode") }}
+            </p>
+            <p class="text-sm text-zinc-500">
+              {{ t("render-mode-description") }}
+            </p>
+          </div>
+
+          <label class="flex items-center justify-between gap-4 rounded-md border border-zinc-200 px-4 py-3">
+            <div class="flex flex-col gap-1">
+              <span class="text-sm font-medium text-zinc-800">
+                {{ t("inline") }}
+              </span>
+              <span
+                data-slot="markdown-configurator-render-mode-value"
+                class="text-xs text-zinc-500"
+              >
+                {{ draftInline ? t("inline-enabled") : t("block-enabled") }}
+              </span>
+            </div>
+
+            <Switch
+              data-slot="markdown-configurator-inline-switch"
+              :model-value="draftInline"
+              @update:model-value="draftInline = $event === true"
+            />
+          </label>
+        </section>
+
+        <section
+          data-slot="markdown-configurator-style-section"
+          class="flex flex-col gap-3"
+        >
+          <div class="flex flex-col gap-1">
+            <p class="text-xs font-medium text-zinc-500">
+              {{ t("style") }}
+            </p>
+            <p class="text-sm text-zinc-500">
+              {{ t("style-description") }}
+            </p>
+          </div>
+
+          <Textarea
+            data-slot="markdown-configurator-style-input"
+            :model-value="draftStyle"
+            :aria-invalid="styleError ? 'true' : void 0"
+            :placeholder="STYLE_EXAMPLE"
+            class="min-h-20 font-mono text-sm"
+            @update:model-value="updateDraftStyle"
+          />
+
+          <p
+            v-if="styleError"
+            data-slot="markdown-configurator-style-error"
+            class="text-xs text-red-500"
+          >
+            {{ styleError }}
+          </p>
+        </section>
+      </div>
+
+      <DialogFooter class="border-t border-zinc-200 px-6 py-4">
+        <Button
+          data-slot="markdown-configurator-cancel"
+          type="button"
+          variant="ghost"
+          @click="discardChanges"
+        >
+          {{ t("cancel") }}
+        </Button>
+        <Button
+          data-slot="markdown-configurator-confirm"
+          type="button"
+          variant="primary"
+          @click="confirmChanges"
+        >
+          {{ t("confirm") }}
+        </Button>
+      </DialogFooter>
+    </DialogScrollContent>
+  </Dialog>
+</template>
+
+<i18n lang="json">
+{
+  "zh": {
+    "configure-markdown": "配置 Markdown",
+    "configure-markdown-description": "编辑 Markdown 文案、渲染模式和容器样式。",
+    "locale": "文案",
+    "locale-description": "支持 Markdown 编辑和 {expression} 语法。",
+    "render-mode": "渲染模式",
+    "render-mode-description": "关闭时按 block 渲染，开启后按 inline 渲染。",
+    "inline": "Inline",
+    "inline-enabled": "当前使用 inline 模式",
+    "block-enabled": "当前使用 block 模式",
+    "style": "容器样式",
+    "style-description": "填写返回样式对象的 CEL 表达式，使用当前 Markdown 上下文求值。",
+    "style-error": "样式表达式必须返回对象",
+    "cancel": "取消",
+    "confirm": "确认"
+  },
+  "ja": {
+    "configure-markdown": "Markdown を設定",
+    "configure-markdown-description": "Markdown テキスト、描画モード、コンテナスタイルを編集します。",
+    "locale": "テキスト",
+    "locale-description": "Markdown と {expression} 構文をサポートします。",
+    "render-mode": "描画モード",
+    "render-mode-description": "オフでは block、オンでは inline で描画します。",
+    "inline": "Inline",
+    "inline-enabled": "現在は inline モードです",
+    "block-enabled": "現在は block モードです",
+    "style": "コンテナスタイル",
+    "style-description": "現在の Markdown コンテキストで評価される CEL スタイル式を入力します。",
+    "style-error": "スタイル式はオブジェクトを返す必要があります",
+    "cancel": "キャンセル",
+    "confirm": "確認"
+  },
+  "en": {
+    "configure-markdown": "Configure markdown",
+    "configure-markdown-description": "Edit markdown content, render mode, and container style.",
+    "locale": "Content",
+    "locale-description": "Supports markdown editing and {expression} syntax.",
+    "render-mode": "Render mode",
+    "render-mode-description": "Off renders as block, on renders as inline.",
+    "inline": "Inline",
+    "inline-enabled": "Currently using inline mode",
+    "block-enabled": "Currently using block mode",
+    "style": "Container style",
+    "style-description": "Provide a CEL expression that returns a style object using the current markdown context.",
+    "style-error": "Style expression must return an object",
+    "cancel": "Cancel",
+    "confirm": "Confirm"
+  }
+}
+</i18n>

package/dist/runtime/components/ui/markdown-configurator/MarkdownConfiguratorDialog.vue.d.ts

@@ -0,0 +1,27 @@
+import { type LocaleValue } from '../../../utils/coders.js';
+import { type MarkdownConfig } from '../markdown/schema.js';
+type __VLS_Props = {
+    config: MarkdownConfig;
+    context?: Record<string, unknown>;
+};
+type __VLS_ModelProps = {
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+    confirm: (args_0: Readonly<{
+        locale?: LocaleValue;
+        inline?: boolean;
+        style?: string;
+    }>) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onConfirm?: ((args_0: Readonly<{
+        locale?: LocaleValue;
+        inline?: boolean;
+        style?: string;
+    }>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shwfed/nuxt",
-  "version": "0.10.1",
+  "version": "0.10.3",
   "description": "",
   "license": "MIT",
   "type": "module",