nuxt-ui-tools 1.21.0 → 1.22.0

package/dist/module.json

@@ -5,7 +5,7 @@
   "configKey": "nuxtUiTools",
   "docs": "https://ui.nuxt.com/docs/getting-started/installation/nuxt",
   "name": "nuxt-ui-tools",
-  "version": "1.21.0",
+  "version": "1.22.0",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "unknown"

package/dist/runtime/form/components/utils/form-option-leading.d.vue.ts

@@ -13,11 +13,14 @@ type __VLS_Props = {
     avatarSize?: string;
     /** Classes of the box the chip dot is centered in. */
     chipClass?: string;
+    /** Nuxt UI chip size: `sm` for the small text of a token. */
+    chipSize?: 'sm' | 'md';
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     iconClass: string;
     avatarSize: string;
     chipClass: string;
+    chipSize: "sm" | "md";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/form/components/utils/form-option-leading.vue

@@ -8,7 +8,8 @@ const props = defineProps({
   option: { type: Object, required: false },
   iconClass: { type: String, required: false, default: "size-4 text-muted" },
   avatarSize: { type: String, required: false, default: "xs" },
-  chipClass: { type: String, required: false, default: "size-4" }
+  chipClass: { type: String, required: false, default: "size-4" },
+  chipSize: { type: String, required: false, default: "md" }
 });
 const size = computed(() => AVATAR_SIZES.find((entry) => entry === props.avatarSize) ?? "xs");
 </script>
@@ -36,6 +37,6 @@ const size = computed(() => AVATAR_SIZES.find((entry) => entry === props.avatarS
     aria-hidden="true"
     data-form-option-leading="chip"
   >
-    <UChip standalone inset size="md" :color="option.chip.color" />
+    <UChip standalone inset :size="chipSize" :color="option.chip.color" />
   </span>
 </template>

package/dist/runtime/form/components/utils/form-option-leading.vue.d.ts

@@ -13,11 +13,14 @@ type __VLS_Props = {
     avatarSize?: string;
     /** Classes of the box the chip dot is centered in. */
     chipClass?: string;
+    /** Nuxt UI chip size: `sm` for the small text of a token. */
+    chipSize?: 'sm' | 'md';
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     iconClass: string;
     avatarSize: string;
     chipClass: string;
+    chipSize: "sm" | "md";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/form/components/utils/form-option-token.d.vue.ts

@@ -0,0 +1,15 @@
+import type { VNodeChild } from 'vue';
+import type { FormOptionValueRenderContext, ResolvedFormOption } from '../../types/index.js';
+/**
+ * One chosen option inside a token or a tag: its icon, avatar or chip, then its label, both sized
+ * for the small text of a token. A `renderValue` function draws the content instead.
+ */
+type __VLS_Props = {
+    option: ResolvedFormOption;
+    render?: (context: FormOptionValueRenderContext) => VNodeChild;
+    /** Shown instead of the label, such as the path of a hierarchy option. */
+    label?: string;
+};
+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/form/components/utils/form-option-token.vue

@@ -0,0 +1,29 @@
+<script setup>
+import FormOptionLeading from "./form-option-leading.vue";
+import FormOptionRender from "./form-option-render";
+const props = defineProps({
+  option: { type: Object, required: true },
+  render: { type: Function, required: false },
+  label: { type: String, required: false }
+});
+function content() {
+  const { item } = props.option;
+  return item === void 0 ? null : props.render?.({ item, option: props.option });
+}
+</script>
+
+<template>
+  <span class="inline-flex max-w-full min-w-0 items-center gap-1" data-form-option-token-content>
+    <FormOptionRender v-if="render && option.item !== void 0" :content="content" />
+    <template v-else>
+      <FormOptionLeading
+        :option="option"
+        icon-class="size-3.5 text-muted"
+        avatar-size="3xs"
+        chip-class="size-3"
+        chip-size="sm"
+      />
+      <span class="min-w-0 truncate">{{ label ?? option.label }}</span>
+    </template>
+  </span>
+</template>

package/dist/runtime/form/components/utils/form-option-token.vue.d.ts

@@ -0,0 +1,15 @@
+import type { VNodeChild } from 'vue';
+import type { FormOptionValueRenderContext, ResolvedFormOption } from '../../types/index.js';
+/**
+ * One chosen option inside a token or a tag: its icon, avatar or chip, then its label, both sized
+ * for the small text of a token. A `renderValue` function draws the content instead.
+ */
+type __VLS_Props = {
+    option: ResolvedFormOption;
+    render?: (context: FormOptionValueRenderContext) => VNodeChild;
+    /** Shown instead of the label, such as the path of a hierarchy option. */
+    label?: string;
+};
+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/form/components/utils/form-option-tokens.d.vue.ts

@@ -0,0 +1,21 @@
+import type { VNodeChild } from 'vue';
+import type { FormOptionValueRenderContext, ResolvedFormOption } from '../../types/index.js';
+/**
+ * The chosen options of a multiple selection as its closed control shows them: one token each,
+ * with the option's icon, avatar or chip before its label, wrapping onto more lines when they do
+ * not fit. A token is no taller than a line of text, so one row keeps the control as high as the
+ * inputs beside it. The tokens ignore the pointer, so a click still opens the control. They look
+ * like the tags of a multiple auto-complete, so both read alike. A visually hidden comma between
+ * them keeps the value reading as a list ("Euro, Dollar") for assistive technology.
+ */
+type __VLS_Props = {
+    options: readonly ResolvedFormOption[];
+    render?: (context: FormOptionValueRenderContext) => VNodeChild;
+    /** Shown instead of each label, such as the path of a hierarchy option. */
+    labelOf?: (option: ResolvedFormOption) => string;
+    /** Classes of each token. */
+    tokenClass?: string;
+};
+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/form/components/utils/form-option-tokens.vue

@@ -0,0 +1,26 @@
+<script setup>
+import { formOptionKey } from "../../utils/options";
+import { mergeFormUiClass } from "../../utils/ui";
+import FormOptionToken from "./form-option-token.vue";
+defineProps({
+  options: { type: Array, required: true },
+  render: { type: Function, required: false },
+  labelOf: { type: Function, required: false },
+  tokenClass: { type: String, required: false }
+});
+const TOKEN = "inline-flex max-w-full min-w-0 items-center rounded-sm bg-elevated px-1.5 py-0.5 text-xs font-medium text-default ring ring-accented ring-inset";
+</script>
+
+<template>
+  <span
+    class="pointer-events-none flex min-w-0 flex-1 flex-wrap gap-1 text-start"
+    data-form-option-tokens
+  >
+    <template v-for="(option, index) in options" :key="formOptionKey(option.value)">
+      <span :class="mergeFormUiClass(TOKEN, tokenClass)" data-form-option-token>
+        <FormOptionToken :option="option" :render="render" :label="labelOf?.(option)" />
+      </span>
+      <span v-if="index < options.length - 1" class="sr-only">, </span>
+    </template>
+  </span>
+</template>

package/dist/runtime/form/components/utils/form-option-tokens.vue.d.ts

@@ -0,0 +1,21 @@
+import type { VNodeChild } from 'vue';
+import type { FormOptionValueRenderContext, ResolvedFormOption } from '../../types/index.js';
+/**
+ * The chosen options of a multiple selection as its closed control shows them: one token each,
+ * with the option's icon, avatar or chip before its label, wrapping onto more lines when they do
+ * not fit. A token is no taller than a line of text, so one row keeps the control as high as the
+ * inputs beside it. The tokens ignore the pointer, so a click still opens the control. They look
+ * like the tags of a multiple auto-complete, so both read alike. A visually hidden comma between
+ * them keeps the value reading as a list ("Euro, Dollar") for assistive technology.
+ */
+type __VLS_Props = {
+    options: readonly ResolvedFormOption[];
+    render?: (context: FormOptionValueRenderContext) => VNodeChild;
+    /** Shown instead of each label, such as the path of a hierarchy option. */
+    labelOf?: (option: ResolvedFormOption) => string;
+    /** Classes of each token. */
+    tokenClass?: string;
+};
+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/form/fields/auto-complete/component.vue

@@ -7,10 +7,11 @@ import FormOptionItemLabel from "../../components/utils/form-option-item-label.v
 import FormOptionLeading from "../../components/utils/form-option-leading.vue";
 import FormOptionMenuFooter from "../../components/utils/form-option-menu-footer.vue";
 import FormOptionSuffix from "../../components/utils/form-option-suffix.vue";
+import FormOptionToken from "../../components/utils/form-option-token.vue";
 import FormOptionValueOverlay from "../../components/utils/form-option-value-overlay.vue";
 import { useFieldControl } from "../../composables/use-field-control";
 import { useOptionMenu } from "../../composables/use-option-menu";
-import { leadingVisualPadding } from "../../utils/options";
+import { formOptionKey, leadingVisualPadding } from "../../utils/options";
 import { isBoolean, isNumber, isString } from "../../utils/predicate";
 import { mergeFormUiClass } from "../../utils/ui";
 const props = defineProps({
@@ -102,6 +103,14 @@ async function handleNativeCreate(label) {
   }
   await handleCreate(normalizedLabel);
 }
+function tagOption(value) {
+  const optionValue = typeof value === "number" || typeof value === "boolean" ? value : String(value);
+  const key = formOptionKey(optionValue);
+  return options.selectedItems.value.find((option) => formOptionKey(option.value) === key) ?? {
+    label: String(value),
+    value: optionValue
+  };
+}
 function isOptionValue(value) {
   return isString(value) || isNumber(value) || isBoolean(value);
 }
@@ -151,6 +160,10 @@ function isOptionValue(value) {
           />
         </template>
 
+        <template v-if="fieldProps.multiple" #tags-item-text="{ item }">
+          <FormOptionToken :option="tagOption(item)" :render="menu.renderValue.value" />
+        </template>
+
         <template #item-leading="{ item }">
           <FormOptionLeading :option="menu.renderOption.value ? void 0 : item" />
         </template>

package/dist/runtime/form/fields/hierarchy/component.vue

@@ -10,10 +10,12 @@ import { computed, ref, watch } from "vue";
 import { useUiToolsLocale } from "../../../i18n/use-locale";
 import FormCompositeControl from "../../components/renderer/form-composite-control.vue";
 import FormFieldShell from "../../components/renderer/form-field-shell.vue";
+import FormOptionLeading from "../../components/utils/form-option-leading.vue";
 import FormOptionMenuFooter from "../../components/utils/form-option-menu-footer.vue";
+import FormOptionTokens from "../../components/utils/form-option-tokens.vue";
 import { useFieldControl } from "../../composables/use-field-control";
 import { useFormUi } from "../../composables/use-form-ui";
-import { formOptionKey } from "../../utils/options";
+import { formOptionKey, leadingVisualPadding, resolveOptionLeading } from "../../utils/options";
 import { isBoolean, isNumber, isString } from "../../utils/predicate";
 import { resolveFormText } from "../../utils/text";
 import { mergeFormUiClass } from "../../utils/ui";
@@ -147,8 +149,43 @@ const treeSelectLabel = computed(() => {
   return props.field.type === "tree-select" && fieldProps.value.showPath ? selected.pathLabel : String(selected.label);
 });
 const fieldLabel = computed(() => resolveFormText(props.field.label));
+const optionEntries = computed(() => {
+  const entries = /* @__PURE__ */ new Map();
+  const walk = (items, labels) => {
+    for (const item of items) {
+      const path = [...labels, item.label];
+      entries.set(formOptionKey(item.value), { option: item, path: path.join(separator.value) });
+      walk(item.children ?? [], path);
+    }
+  };
+  walk(options.items.value, []);
+  return entries;
+});
+const showsPath = computed(() => props.field.type === "cascader" || hasShowPath(props.field));
+function optionOf(item) {
+  return optionEntries.value.get(formOptionKey(item.value))?.option;
+}
+function tokenLabel(option) {
+  return showsPath.value ? optionEntries.value.get(formOptionKey(option.value))?.path ?? option.label : option.label;
+}
+const chosenOptions = computed(() => {
+  const values = Array.isArray(model.value) ? model.value : [model.value];
+  return values.flatMap((value) => {
+    const option = value === null ? void 0 : optionEntries.value.get(formOptionKey(value));
+    return option ? [option.option] : [];
+  });
+});
+const leadingOption = computed(() => {
+  const [option] = chosenOptions.value;
+  const multiple = usesTree.value ? treeMultiple.value : fieldProps.value.multiple === true;
+  return !multiple && option && resolveOptionLeading(option) ? option : void 0;
+});
 const ownedControlUi = computed(() => ({
   ...controlProps.value.ui,
+  base: mergeFormUiClass(
+    controlProps.value.ui?.base,
+    leadingOption.value ? leadingVisualPadding(controlProps.value.size) : void 0
+  ),
   content: mergeFormUiClass(controlProps.value.ui?.content, interactionOwnerClass.value)
 }));
 watch(treeSelectOpen, (open) => {
@@ -402,6 +439,7 @@ function isOptionValue(value) {
               @click.stop
               @select="selectRadioTreeItem(item)"
             />
+            <FormOptionLeading :option="optionOf(item)" />
             <span :class="ui.linkLabel()">{{ item.label }}</span>
             <button
               v-if="isExpandable(item)"
@@ -460,7 +498,25 @@ function isOptionValue(value) {
 }"
           @blur="handleBlur"
         >
-          {{ treeSelectLabel }}
+          <FormOptionTokens
+            v-if="treeMultiple && chosenOptions.length"
+            :options="chosenOptions"
+            :label-of="tokenLabel"
+          />
+          <span
+            v-else
+            :class="
+  mergeFormUiClass(
+    'flex min-w-0 flex-1 items-center gap-1.5 text-left',
+    formUi.ui.value.treeSelect?.ui?.triggerLabel
+  )
+"
+          >
+            <FormOptionLeading v-if="leadingOption" :option="leadingOption" />
+            <span :class="chosenOptions.length ? 'truncate' : 'truncate text-dimmed'">
+              {{ treeSelectLabel }}
+            </span>
+          </span>
         </UButton>
 
         <template #content>
@@ -538,6 +594,7 @@ function isOptionValue(value) {
                     @click.stop
                     @select="selectRadioTreeItem(item)"
                   />
+                  <FormOptionLeading :option="optionOf(item)" />
                   <span :class="ui.linkLabel()">{{ item.label }}</span>
                   <button
                     v-if="isExpandable(item)"
@@ -610,7 +667,19 @@ function isOptionValue(value) {
         :loading="validationPending || options.loading.value"
         :ui="ownedControlUi"
         @blur="handleBlur"
-      />
+      >
+        <template v-if="leadingOption" #leading="{ ui }">
+          <FormOptionLeading
+            :option="leadingOption"
+            :icon-class="ui.leadingIcon()"
+            :avatar-size="ui.itemLeadingAvatarSize()"
+            chip-class="size-5"
+          />
+        </template>
+        <template v-if="fieldProps.multiple && chosenOptions.length" #default>
+          <FormOptionTokens :options="chosenOptions" :label-of="tokenLabel" />
+        </template>
+      </USelectMenu>
     </FormCompositeControl>
   </FormFieldShell>
 </template>

package/dist/runtime/form/fields/select/component.vue

@@ -9,9 +9,10 @@ import FormOptionItemLabel from "../../components/utils/form-option-item-label.v
 import FormOptionLeading from "../../components/utils/form-option-leading.vue";
 import FormOptionMenuFooter from "../../components/utils/form-option-menu-footer.vue";
 import FormOptionSuffix from "../../components/utils/form-option-suffix.vue";
+import FormOptionTokens from "../../components/utils/form-option-tokens.vue";
 import { useFieldControl } from "../../composables/use-field-control";
 import { useOptionMenu } from "../../composables/use-option-menu";
-import { leadingVisualPadding } from "../../utils/options";
+import { formOptionKey, leadingVisualPadding } from "../../utils/options";
 import { isBoolean, isNumber, isString } from "../../utils/predicate";
 import { mergeFormUiClass } from "../../utils/ui";
 const props = defineProps({
@@ -76,6 +77,17 @@ const controlUi = computed(() => ({
     controlProps.value.ui?.itemDescription
   )
 }));
+const tokenOptions = computed(() => {
+  if (!fieldProps.value.multiple || !Array.isArray(model.value)) {
+    return [];
+  }
+  const chosen = new Map(
+    options.selectedItems.value.map((option) => [formOptionKey(option.value), option])
+  );
+  return model.value.map(
+    (value) => chosen.get(formOptionKey(value)) ?? { label: String(value), value }
+  );
+});
 const createItem = computed(
   () => options.creatable.value && fieldProps.value.createItem ? fieldProps.value.createItem : false
 );
@@ -166,6 +178,9 @@ function isOptionValue(value) {
           />
         </span>
       </template>
+      <template v-else-if="tokenOptions.length" #default>
+        <FormOptionTokens :options="tokenOptions" />
+      </template>
 
       <template #item-leading="{ item }">
         <FormOptionLeading :option="menu.renderOption.value ? void 0 : item" />

package/dist/runtime/form/fields/switch-group/component.vue

@@ -2,6 +2,7 @@
 import USwitch from "@nuxt/ui/components/Switch.vue";
 import { computed, useId } from "vue";
 import FormFieldShell from "../../components/renderer/form-field-shell.vue";
+import FormOptionChoiceLabel from "../../components/utils/form-option-choice-label.vue";
 import { useFieldControl } from "../../composables/use-field-control";
 import { formOptionKey } from "../../utils/options";
 import { isBoolean, isNumber, isString } from "../../utils/predicate";
@@ -40,7 +41,7 @@ function isOptionValue(value) {
     <div
       role="group"
       class="grid gap-3"
-      :class="fieldProps.orientation === 'horizontal' ? 'sm:flex sm:flex-wrap' : ''"
+      :class="fieldProps.orientation === 'horizontal' ? 'sm:flex sm:flex-wrap sm:gap-x-7' : ''"
     >
       <USwitch
         v-for="item in items"
@@ -56,7 +57,11 @@ function isOptionValue(value) {
         :unchecked-icon="fieldProps.uncheckedIcon"
         @update:model-value="toggleOption(item.value, $event === true)"
         @blur="handleBlur"
-      />
+      >
+        <template #label>
+          <FormOptionChoiceLabel :option="item" :selected="model.includes(item.value)" />
+        </template>
+      </USwitch>
     </div>
   </FormFieldShell>
 </template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-ui-tools",
-  "version": "1.21.0",
+  "version": "1.22.0",
   "description": "Nuxt module and runtime toolkit for UI-heavy Nuxt applications",
   "homepage": "https://github.com/ChronicStone/nuxt-ui-tools#readme",
   "bugs": "https://github.com/ChronicStone/nuxt-ui-tools/issues",