@shwfed/config 2.4.0 → 2.5.0

package/dist/runtime/components/ui/locale/Locale.vue

@@ -7,6 +7,7 @@ import { useTranslateLocale } from "../../../composables/useTranslateLocale";
 import { cn } from "../../../utils/cn";
 import { Button } from "../button";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../dropdown-menu";
+import { Field, FieldLabel } from "../field";
 import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupTextarea } from "../input-group";
 const supportedLocales = ["zh", "ja", "en", "ko"];
 defineOptions({
@@ -18,6 +19,8 @@ const props = defineProps({
   class: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
   multiline: { type: Boolean, required: false },
   markdown: { type: Boolean, required: false },
+  floating: { type: Boolean, required: false },
+  placeholder: { type: String, required: false },
   translateHint: { type: String, required: false }
 });
 const emits = defineEmits(["update:modelValue"]);
@@ -136,32 +139,123 @@ async function onAiTranslate(locale) {
     data-slot="locale"
     :class="cn('flex flex-col gap-2', props.class)"
   >
-    <InputGroup
+    <Field
       v-for="(item, index) in locales"
       :key="item.locale"
-      data-slot="locale-row"
-      :data-locale="item.locale"
+      :orientation="props.floating ? 'floating' : 'contents'"
     >
-      <InputGroupAddon
-        v-if="props.multiline"
-        align="block-start"
-        class="border-b border-zinc-200"
+      <FieldLabel v-if="props.floating">
+        {{ localeLabel(item.locale) }}
+      </FieldLabel>
+      <InputGroup
+        data-slot="locale-row"
+        :data-locale="item.locale"
       >
-        <div class="flex w-full items-center justify-between gap-3">
+        <InputGroupAddon
+          v-if="props.multiline"
+          align="block-start"
+          class="border-b border-zinc-200"
+        >
+          <div class="flex w-full items-center justify-between gap-3">
+            <DropdownMenu v-if="item.locale !== 'zh' && availableLocales(index).length > 0">
+              <DropdownMenuTrigger as-child>
+                <InputGroupButton
+                  size="sm"
+                  as-child
+                >
+                  <button
+                    type="button"
+                    data-slot="locale-trigger"
+                    class="text-zinc-500 transition-colors hover:text-zinc-700"
+                    :aria-label="`\u9009\u62E9\u8BED\u8A00\uFF1A${localeLabel(item.locale)}`"
+                  >
+                    <Icon :icon="localeIcon(item.locale)" />
+                    <span>{{ localeLabel(item.locale) }}</span>
+                  </button>
+                </InputGroupButton>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="start">
+                <DropdownMenuItem
+                  v-for="locale in availableLocales(index)"
+                  :key="locale"
+                  data-slot="locale-option"
+                  :data-locale-option="locale"
+                  @select="updateLocale(index, locale)"
+                >
+                  <Icon :icon="localeIcon(locale)" />
+                  <span>{{ localeLabel(locale) }}</span>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+
+            <span
+              v-else
+              data-slot="locale-icon"
+              class="flex items-center gap-2 text-zinc-500"
+            >
+              <Icon :icon="localeIcon(item.locale)" />
+              <span>{{ localeLabel(item.locale) }}</span>
+            </span>
+
+            <div class="flex items-center gap-2">
+              <Icon
+                v-if="props.markdown"
+                data-slot="locale-markdown-indicator"
+                icon="fluent:markdown-20-regular"
+                class="text-purple-600"
+                aria-label="支持 Markdown"
+              />
+              <InputGroupButton
+                v-if="canAiTranslate(item.locale) || isAiTranslating(item.locale)"
+                size="icon-xs"
+                as-child
+              >
+                <button
+                  type="button"
+                  data-slot="locale-translate"
+                  :disabled="isAiTranslating(item.locale) || !canAiTranslate(item.locale)"
+                  :aria-label="`AI \u7FFB\u8BD1\uFF1A${localeLabel(item.locale)}`"
+                  @click="onAiTranslate(item.locale)"
+                >
+                  <Icon
+                    :icon="isAiTranslating(item.locale) ? 'fluent:arrow-sync-20-regular' : 'fluent:magic-wand-20-regular'"
+                    :class="isAiTranslating(item.locale) ? 'animate-spin' : ''"
+                  />
+                </button>
+              </InputGroupButton>
+              <InputGroupButton
+                variant="destructive"
+                size="icon-xs"
+                as-child
+              >
+                <button
+                  type="button"
+                  data-slot="locale-delete"
+                  :disabled="item.locale === 'zh'"
+                  :aria-label="`\u5220\u9664\u8BED\u8A00\uFF1A${localeLabel(item.locale)}`"
+                  @click="removeLocale(index)"
+                >
+                  <Icon icon="fluent:delete-20-regular" />
+                </button>
+              </InputGroupButton>
+            </div>
+          </div>
+        </InputGroupAddon>
+
+        <InputGroupAddon v-else>
           <DropdownMenu v-if="item.locale !== 'zh' && availableLocales(index).length > 0">
             <DropdownMenuTrigger as-child>
               <InputGroupButton
-                size="sm"
+                size="icon-sm"
                 as-child
               >
                 <button
                   type="button"
                   data-slot="locale-trigger"
-                  class="text-zinc-500 transition-colors hover:text-zinc-700"
+                  class="text-zinc-500 transition-colors hover:text-zinc-700 [&_svg:not([class*='size-'])]:size-3.5"
                   :aria-label="`\u9009\u62E9\u8BED\u8A00\uFF1A${localeLabel(item.locale)}`"
                 >
                   <Icon :icon="localeIcon(item.locale)" />
-                  <span>{{ localeLabel(item.locale) }}</span>
                 </button>
               </InputGroupButton>
             </DropdownMenuTrigger>
@@ -178,163 +272,79 @@ async function onAiTranslate(locale) {
               </DropdownMenuItem>
             </DropdownMenuContent>
           </DropdownMenu>
-
           <span
             v-else
             data-slot="locale-icon"
-            class="flex items-center gap-2 text-zinc-500"
+            class="-ml-[0.45rem] flex size-8 items-center justify-center text-zinc-500"
           >
             <Icon :icon="localeIcon(item.locale)" />
-            <span>{{ localeLabel(item.locale) }}</span>
           </span>
+        </InputGroupAddon>
 
-          <div class="flex items-center gap-2">
-            <Icon
-              v-if="props.markdown"
-              data-slot="locale-markdown-indicator"
-              icon="fluent:markdown-20-regular"
-              class="text-purple-600"
-              aria-label="支持 Markdown"
-            />
-            <InputGroupButton
-              v-if="canAiTranslate(item.locale) || isAiTranslating(item.locale)"
-              size="icon-xs"
-              as-child
-            >
-              <button
-                type="button"
-                data-slot="locale-translate"
-                :disabled="isAiTranslating(item.locale) || !canAiTranslate(item.locale)"
-                :aria-label="`AI \u7FFB\u8BD1\uFF1A${localeLabel(item.locale)}`"
-                @click="onAiTranslate(item.locale)"
-              >
-                <Icon
-                  :icon="isAiTranslating(item.locale) ? 'fluent:arrow-sync-20-regular' : 'fluent:magic-wand-20-regular'"
-                  :class="isAiTranslating(item.locale) ? 'animate-spin' : ''"
-                />
-              </button>
-            </InputGroupButton>
-            <InputGroupButton
-              variant="destructive"
-              size="icon-xs"
-              as-child
-            >
-              <button
-                type="button"
-                data-slot="locale-delete"
-                :disabled="item.locale === 'zh'"
-                :aria-label="`\u5220\u9664\u8BED\u8A00\uFF1A${localeLabel(item.locale)}`"
-                @click="removeLocale(index)"
-              >
-                <Icon icon="fluent:delete-20-regular" />
-              </button>
-            </InputGroupButton>
-          </div>
-        </div>
-      </InputGroupAddon>
+        <InputGroupInput
+          v-if="!props.multiline"
+          data-slot="locale-input"
+          :model-value="item.message"
+          :placeholder="props.placeholder ?? (props.floating ? '' : localeLabel(item.locale))"
+          @update:model-value="handleMessageUpdate(index, $event)"
+        />
 
-      <InputGroupAddon v-else>
-        <DropdownMenu v-if="item.locale !== 'zh' && availableLocales(index).length > 0">
-          <DropdownMenuTrigger as-child>
-            <InputGroupButton
-              size="icon-sm"
-              as-child
-            >
-              <button
-                type="button"
-                data-slot="locale-trigger"
-                class="text-zinc-500 transition-colors hover:text-zinc-700 [&_svg:not([class*='size-'])]:size-3.5"
-                :aria-label="`\u9009\u62E9\u8BED\u8A00\uFF1A${localeLabel(item.locale)}`"
-              >
-                <Icon :icon="localeIcon(item.locale)" />
-              </button>
-            </InputGroupButton>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="start">
-            <DropdownMenuItem
-              v-for="locale in availableLocales(index)"
-              :key="locale"
-              data-slot="locale-option"
-              :data-locale-option="locale"
-              @select="updateLocale(index, locale)"
-            >
-              <Icon :icon="localeIcon(locale)" />
-              <span>{{ localeLabel(locale) }}</span>
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-        <span
+        <InputGroupTextarea
           v-else
-          data-slot="locale-icon"
-          class="-ml-[0.45rem] flex size-8 items-center justify-center text-zinc-500"
-        >
-          <Icon :icon="localeIcon(item.locale)" />
-        </span>
-      </InputGroupAddon>
-
-      <InputGroupInput
-        v-if="!props.multiline"
-        data-slot="locale-input"
-        :model-value="item.message"
-        :placeholder="localeLabel(item.locale)"
-        @update:model-value="handleMessageUpdate(index, $event)"
-      />
-
-      <InputGroupTextarea
-        v-else
-        data-slot="locale-textarea"
-        class="min-h-32"
-        :model-value="item.message"
-        :placeholder="localeLabel(item.locale)"
-        @update:model-value="handleMessageUpdate(index, $event)"
-      />
-
-      <InputGroupAddon
-        v-if="!props.multiline"
-        align="inline-end"
-      >
-        <Icon
-          v-if="props.markdown"
-          data-slot="locale-markdown-indicator"
-          icon="fluent:markdown-20-regular"
-          class="text-purple-600"
-          aria-label="支持 Markdown"
+          data-slot="locale-textarea"
+          class="min-h-32"
+          :model-value="item.message"
+          :placeholder="props.placeholder ?? (props.floating ? '' : localeLabel(item.locale))"
+          @update:model-value="handleMessageUpdate(index, $event)"
         />
-        <InputGroupButton
-          v-if="canAiTranslate(item.locale) || isAiTranslating(item.locale)"
-          size="icon-xs"
-          as-child
+
+        <InputGroupAddon
+          v-if="!props.multiline"
+          align="inline-end"
         >
-          <button
-            type="button"
-            data-slot="locale-translate"
-            :disabled="isAiTranslating(item.locale) || !canAiTranslate(item.locale)"
-            :aria-label="`AI \u7FFB\u8BD1\uFF1A${localeLabel(item.locale)}`"
-            @click="onAiTranslate(item.locale)"
+          <Icon
+            v-if="props.markdown"
+            data-slot="locale-markdown-indicator"
+            icon="fluent:markdown-20-regular"
+            class="text-purple-600"
+            aria-label="支持 Markdown"
+          />
+          <InputGroupButton
+            v-if="canAiTranslate(item.locale) || isAiTranslating(item.locale)"
+            size="icon-xs"
+            as-child
           >
-            <Icon
-              :icon="isAiTranslating(item.locale) ? 'fluent:arrow-sync-20-regular' : 'fluent:magic-wand-20-regular'"
-              :class="isAiTranslating(item.locale) ? 'animate-spin' : ''"
-            />
-          </button>
-        </InputGroupButton>
-        <InputGroupButton
-          variant="destructive"
-          size="icon-xs"
-          as-child
-        >
-          <button
-            type="button"
-            data-slot="locale-delete"
-            :disabled="item.locale === 'zh'"
-            :aria-label="`\u5220\u9664\u8BED\u8A00\uFF1A${localeLabel(item.locale)}`"
-            @click="removeLocale(index)"
+            <button
+              type="button"
+              data-slot="locale-translate"
+              :disabled="isAiTranslating(item.locale) || !canAiTranslate(item.locale)"
+              :aria-label="`AI \u7FFB\u8BD1\uFF1A${localeLabel(item.locale)}`"
+              @click="onAiTranslate(item.locale)"
+            >
+              <Icon
+                :icon="isAiTranslating(item.locale) ? 'fluent:arrow-sync-20-regular' : 'fluent:magic-wand-20-regular'"
+                :class="isAiTranslating(item.locale) ? 'animate-spin' : ''"
+              />
+            </button>
+          </InputGroupButton>
+          <InputGroupButton
+            variant="destructive"
+            size="icon-xs"
+            as-child
           >
-            <Icon icon="fluent:delete-20-regular" />
-          </button>
-        </InputGroupButton>
-      </InputGroupAddon>
-    </InputGroup>
+            <button
+              type="button"
+              data-slot="locale-delete"
+              :disabled="item.locale === 'zh'"
+              :aria-label="`\u5220\u9664\u8BED\u8A00\uFF1A${localeLabel(item.locale)}`"
+              @click="removeLocale(index)"
+            >
+              <Icon icon="fluent:delete-20-regular" />
+            </button>
+          </InputGroupButton>
+        </InputGroupAddon>
+      </InputGroup>
+    </Field>
 
     <Button
       type="button"

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

@@ -5,6 +5,8 @@ type __VLS_Props = {
     class?: HTMLAttributes['class'];
     multiline?: boolean;
     markdown?: boolean;
+    floating?: boolean;
+    placeholder?: string;
     translateHint?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {

package/dist/runtime/share/form-validate.d.ts

@@ -0,0 +1,18 @@
+import { type InjectionKey } from 'vue';
+/**
+ * A form-scoped "validate me" callback. Resolves `true` when the enclosing
+ * `<Form>` has no `error`-severity validation results (and reveals the errors
+ * on the way out either way).
+ *
+ * Lives in `share/` — the neutral ground for host↔button contracts, alongside
+ * `event-bus` — so a host-agnostic action button can run pre-submit validation
+ * without importing the form module. The form host provides the callback; a
+ * submit-style button injects it and always validates before firing. This is
+ * the transitional seam: the final design dispatches a fallible `validate`
+ * operation over the event bus instead, at which point this key retires.
+ */
+export type FormValidate = () => Promise<boolean>;
+export declare const FORM_VALIDATE_KEY: InjectionKey<FormValidate>;
+export declare function provideFormValidate(validate: FormValidate): void;
+/** Inject the enclosing form's validate callback, or `undefined` outside a form. */
+export declare function useFormValidate(): FormValidate | undefined;

package/dist/runtime/share/form-validate.js

@@ -0,0 +1,8 @@
+import { inject, provide } from "vue";
+export const FORM_VALIDATE_KEY = Symbol("shwfed/form-validate");
+export function provideFormValidate(validate) {
+  provide(FORM_VALIDATE_KEY, validate);
+}
+export function useFormValidate() {
+  return inject(FORM_VALIDATE_KEY, void 0);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shwfed/config",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "description": "Configurable UI for SHWFED",
   "type": "module",
   "publishConfig": {