@shwfed/nuxt 0.10.2 → 0.10.3

package/dist/module.json

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

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/package.json

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