nuxt-ui-tools 1.16.7 → 1.16.9

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.16.7",
+  "version": "1.16.9",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "unknown"

package/dist/runtime/form/components/renderer/form-field-renderer.vue

@@ -86,6 +86,7 @@ const controlAttrs = computed(() => {
 provideFormFieldBare(bare);
 provideFormFieldControlAttrs(controlAttrs);
 const field = computed(() => createFormFieldInstance(props.field));
+const headless = computed(() => !field.value.capability.has("layout"));
 const path = computed(() => fieldPath(props.parentPath, props.field));
 const childPath = computed(() => childParentPath(props.parentPath, props.field));
 const visible = computed(() => form.shouldRender(props.field, path.value));
@@ -200,7 +201,7 @@ function resolveControlLabel(controlField) {
 </script>
 
 <template>
-  <template v-if="visible && bare">
+  <template v-if="visible && (bare || headless)">
     <component :is="renderer" v-if="renderer" v-bind="rendererProps" />
     <UAlert
       v-else

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

@@ -9,6 +9,7 @@ import { useUiToolsLocale } from "#ui-tools/i18n";
 import { useFormActions } from "../../composables/use-form-actions";
 import { useFormGridLayout } from "../../composables/use-form-layout";
 import { useFormRoot } from "../../composables/use-form-root";
+import { createFormFieldInstance } from "../../utils/field-instance";
 import { getFormHeader } from "../../utils/overlay";
 import { isRecord } from "../../utils/path";
 import { isFunction, isNumber, isString } from "../../utils/predicate";
@@ -69,6 +70,11 @@ watch(
 const displayedStep = computed(
   () => isSteppedSchema(schemaRef.value) ? getSchemaSteps(schemaRef.value)[displayedStepIndex.value] : void 0
 );
+const skeletonFields = computed(
+  () => runtime.currentFields.value.filter(
+    (field) => createFormFieldInstance(field).capability.has("layout")
+  )
+);
 const displayedFields = computed(
   () => isSteppedSchema(schemaRef.value) ? displayedStep.value?.fields ?? [] : getSchemaFields(schemaRef.value)
 );
@@ -295,7 +301,7 @@ function getSchemaShowStepper(schema) {
         :style="grid.style.value"
       >
         <div
-          v-for="field in runtime.currentFields.value"
+          v-for="field in skeletonFields"
           :key="field.key"
           :class="mergeFormUiClass('grid gap-2', formUi.ui.value.root?.ui?.skeletonField)"
         >

package/dist/runtime/form/composables/use-form-validation.js

@@ -1,4 +1,4 @@
-import { useRegle } from "@regle/core";
+import { markStatic, useRegle } from "@regle/core";
 import { withMessage } from "@regle/rules";
 import { computed, nextTick, reactive, ref, unref, watch } from "vue";
 import { calendarSeedFromValue, isDateFamilyRange } from "../fields/date-family/utils.js";
@@ -387,6 +387,12 @@ function buildFieldRules(params) {
       continue;
     }
     const path = fieldPath(params.parentPath, field);
+    if (fieldInstance.type.is("custom-component")) {
+      const value = getPathValue(params.state, path);
+      if (isRecord(value)) {
+        markStatic(value);
+      }
+    }
     const api = params.apiFactory(path, field);
     const callbackParams = {
       api,

package/dist/runtime/form/fields/checkbox-card/component.vue

@@ -65,8 +65,9 @@ function isOptionValue(value) {
         <ChoiceCardLabel
           :label="optionByKey.get(item.value)?.label ?? item.label"
           :icon="optionByKey.get(item.value)?.icon"
+          :value="optionByKey.get(item.value)?.value"
           :tile="cards.tile.value"
-          :corner="cards.corner.value"
+          :mark="cards.mark.value"
           :selected="model.includes(item.value)"
           :ui="cards.ui.value"
         />

package/dist/runtime/form/fields/choice-card/choice-card-label.d.vue.ts

@@ -1,14 +1,19 @@
 import type { FormControlUi } from '../../types/index.js';
+import type { ChoiceCardMark } from './types.js';
 /**
- * Content of a card's label: the option icon, inline or in a tile above the label, and the check
- * a selected card shows in its corner. Styled through `ui.tile`, `ui.tileIcon`, `ui.optionIcon`,
- * `ui.check`, and `ui.checkIcon`.
+ * Content of a card's label: the option icon, inline or in a tile above the label, and the
+ * selection mark the card draws itself: a check in the corner of a selected card, or a switch
+ * that follows the selection. Both marks are decorative; the group's own control keeps the
+ * semantics. Styled through `ui.tile`, `ui.tileIcon`, `ui.optionIcon`, `ui.check`,
+ * `ui.checkIcon`, `ui.switch`, and `ui.switchThumb`; the tile and the switch carry the option
+ * value as `data-value` for per-option styling.
  */
 type __VLS_Props = {
     label?: string;
     icon?: string;
+    value?: string | number | boolean;
     tile: boolean;
-    corner: boolean;
+    mark: ChoiceCardMark;
     selected: boolean;
     ui?: FormControlUi;
 };

package/dist/runtime/form/fields/choice-card/choice-card-label.vue

@@ -4,8 +4,9 @@ import { mergeFormUiClass } from "../../utils/ui";
 defineProps({
   label: { type: String, required: false },
   icon: { type: String, required: false },
+  value: { type: [String, Number, Boolean], required: false },
   tile: { type: Boolean, required: true },
-  corner: { type: Boolean, required: true },
+  mark: { type: String, required: true },
   selected: { type: Boolean, required: true },
   ui: { type: Object, required: false }
 });
@@ -15,6 +16,7 @@ defineProps({
   <span
     v-if="tile && icon"
     :data-selected="selected || void 0"
+    :data-value="value"
     :class="
   mergeFormUiClass(
     'grid size-8 place-items-center rounded-lg bg-elevated text-muted transition-colors data-[selected]:bg-primary/10 data-[selected]:text-primary',
@@ -35,7 +37,7 @@ defineProps({
   </span>
   <span v-else class="block">{{ label }}</span>
   <span
-    v-if="corner && selected"
+    v-if="mark === 'corner' && selected"
     aria-hidden="true"
     :class="
   mergeFormUiClass(
@@ -47,4 +49,26 @@ defineProps({
   >
     <UIcon name="i-lucide-check" :class="mergeFormUiClass('size-2.5', ui?.checkIcon)" />
   </span>
+  <span
+    v-if="mark === 'switch'"
+    aria-hidden="true"
+    :data-state="selected ? 'checked' : 'unchecked'"
+    :data-value="value"
+    :class="
+  mergeFormUiClass(
+    'group/switch absolute end-3 top-3.5 inline-flex h-[18px] w-8 shrink-0 items-center rounded-full bg-accented p-0.5 transition-colors duration-150 data-[state=checked]:bg-primary',
+    ui?.switch
+  )
+"
+    data-choice-switch
+  >
+    <span
+      :class="
+  mergeFormUiClass(
+    'size-3.5 rounded-full bg-default shadow-xs transition-transform duration-150 group-data-[state=checked]/switch:translate-x-3.5 motion-reduce:transition-none rtl:group-data-[state=checked]/switch:-translate-x-3.5',
+    ui?.switchThumb
+  )
+"
+    />
+  </span>
 </template>

package/dist/runtime/form/fields/choice-card/choice-card-label.vue.d.ts

@@ -1,14 +1,19 @@
 import type { FormControlUi } from '../../types/index.js';
+import type { ChoiceCardMark } from './types.js';
 /**
- * Content of a card's label: the option icon, inline or in a tile above the label, and the check
- * a selected card shows in its corner. Styled through `ui.tile`, `ui.tileIcon`, `ui.optionIcon`,
- * `ui.check`, and `ui.checkIcon`.
+ * Content of a card's label: the option icon, inline or in a tile above the label, and the
+ * selection mark the card draws itself: a check in the corner of a selected card, or a switch
+ * that follows the selection. Both marks are decorative; the group's own control keeps the
+ * semantics. Styled through `ui.tile`, `ui.tileIcon`, `ui.optionIcon`, `ui.check`,
+ * `ui.checkIcon`, `ui.switch`, and `ui.switchThumb`; the tile and the switch carry the option
+ * value as `data-value` for per-option styling.
  */
 type __VLS_Props = {
     label?: string;
     icon?: string;
+    value?: string | number | boolean;
     tile: boolean;
-    corner: boolean;
+    mark: ChoiceCardMark;
     selected: boolean;
     ui?: FormControlUi;
 };

package/dist/runtime/form/fields/choice-card/types.d.ts

@@ -18,14 +18,19 @@ export interface FormChoiceCardProps {
     orientation?: 'horizontal' | 'vertical';
     /**
      * Selection mark: the radio or checkbox before the content (`start`, the default), after it
-     * (`end`), none (`hidden`), or a check in the top corner of the selected cards (`corner`).
+     * (`end`), none (`hidden`), a check in the top corner of the selected cards (`corner`), or a
+     * switch in the top corner of every card that turns on with the selection (`switch`), for cards
+     * that enable something.
      */
-    indicator?: 'start' | 'end' | 'hidden' | 'corner';
+    indicator?: 'start' | 'end' | 'hidden' | 'corner' | 'switch';
     /**
      * Where an option's `icon` shows: before its label (`inline`, the default), or in a tile above
      * it (`tile`) that takes the selection color. Style the parts the engine renders with the
-     * `ui` slots `tile`, `tileIcon`, `optionIcon`, `check`, and `checkIcon`, next to the Nuxt UI
-     * slots of the group.
+     * `ui` slots `tile`, `tileIcon`, `optionIcon`, `check`, `checkIcon`, `switch`, and
+     * `switchThumb`, next to the Nuxt UI slots of the group. The tile and the switch carry the
+     * option value as `data-value`, so one option can take its own colors.
      */
     icon?: 'inline' | 'tile';
 }
+/** The mark a card draws itself, in place of the Nuxt UI indicator. */
+export type ChoiceCardMark = 'corner' | 'switch' | 'none';

package/dist/runtime/form/fields/choice-card/use-choice-card.d.ts

@@ -1,18 +1,18 @@
 import type { FormControlUi } from '../../types/index.js';
-import type { FormChoiceCardProps } from './types.js';
+import type { ChoiceCardMark, FormChoiceCardProps } from './types.js';
 /** Props the card fields render themselves, kept away from the Nuxt UI group. */
 export declare const CHOICE_CARD_PROPS: string[];
 /**
  * Presentation of a radio or checkbox card group: the flowing row or fixed grid of cards, the
  * selection mark, and where option icons go. Returns the props and `ui` slots for the Nuxt UI
- * group, and what the card content renders (`tile`, `corner`).
+ * group, and what the card content renders (`tile`, `mark`).
  */
 export declare function useChoiceCard(params: {
     props: () => FormChoiceCardProps;
     ui: () => FormControlUi | undefined;
 }): {
-    corner: import("vue").ComputedRef<boolean>;
     indicator: import("vue").ComputedRef<"end" | "start" | "hidden" | undefined>;
+    mark: import("vue").ComputedRef<ChoiceCardMark>;
     orientation: import("vue").ComputedRef<"horizontal" | "vertical" | undefined>;
     style: import("vue").ComputedRef<{
         '--nut-choice-columns': string;

package/dist/runtime/form/fields/choice-card/use-choice-card.js

@@ -9,11 +9,14 @@ export function useChoiceCard(params) {
     const count = Math.trunc(Number(columnsValue.value));
     return count > 0 ? count : void 0;
   });
-  const corner = computed(() => params.props().indicator === "corner");
+  const mark = computed(() => {
+    const value = params.props().indicator;
+    return value === "corner" || value === "switch" ? value : "none";
+  });
   const tile = computed(() => params.props().icon === "tile");
   const indicator = computed(() => {
     const value = params.props().indicator;
-    return value === "corner" ? "hidden" : value;
+    return value === "corner" || value === "switch" ? "hidden" : value;
   });
   const orientation = computed(() => params.props().orientation);
   const style = computed(
@@ -29,7 +32,7 @@ export function useChoiceCard(params) {
       ),
       item: mergeFormUiClass(
         `border-default ${CARD_SELECTED_RING}`,
-        corner.value ? "relative" : void 0,
+        mark.value === "none" ? void 0 : "relative",
         current?.item
       ),
       // The card label renders the option icon itself (inline or as a tile): Nuxt UI's own copy
@@ -45,11 +48,12 @@ export function useChoiceCard(params) {
         tile.value ? "flex flex-col items-start gap-1.5" : void 0,
         [
           indicator.value === "hidden" ? "ms-0 text-start" : "",
-          corner.value && !tile.value ? "pe-7" : ""
+          mark.value === "corner" && !tile.value ? "pe-7" : "",
+          mark.value === "switch" && !tile.value ? "pe-12" : ""
         ].join(" "),
         current?.wrapper
       )
     };
   });
-  return { corner, indicator, orientation, style, tile, ui };
+  return { indicator, mark, orientation, style, tile, ui };
 }

package/dist/runtime/form/fields/radio-card/component.vue

@@ -49,8 +49,9 @@ const items = computed(() => [...options.items.value]);
         <ChoiceCardLabel
           :label="item.label"
           :icon="item.icon"
+          :value="item.value"
           :tile="cards.tile.value"
-          :corner="cards.corner.value"
+          :mark="cards.mark.value"
           :selected="model === item.value"
           :ui="cards.ui.value"
         />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-ui-tools",
-  "version": "1.16.7",
+  "version": "1.16.9",
   "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",