vueless 1.4.12-beta.8 → 1.5.0

package/ui.navigation-breadcrumbs/types.ts

@@ -1,13 +1,16 @@
 import defaultConfig from "./config";
-import type { ComponentConfig } from "../types";
+import type { ComponentConfig, UnknownObject } from "../types";
 import type { Props as ULinkProps } from "../ui.button-link/types";
 
 export type Config = typeof defaultConfig;
 
-export interface UBreadcrumb extends ULinkProps {
+export interface BaseBreadcrumb extends ULinkProps {
   icon?: string;
 }
 
+/* Any object shape is a valid breadcrumb, only reserved breadcrumb keys are type checked. */
+export type UBreadcrumb = BaseBreadcrumb & (object | UnknownObject);
+
 export interface Props {
   /**
    * Array of links.

package/ui.navigation-tabs/UTabs.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="TItem extends UTabsOption">
 import { ref, computed, provide, onMounted, onUnmounted, useTemplateRef } from "vue";
 
 import { useUI } from "../composables/useUI";
@@ -10,16 +10,18 @@ import UButton from "../ui.button/UButton.vue";
 import { COMPONENT_NAME, SCROLL_OFFSET, DRAG_THRESHOLD, DRAG_CLICK_SUPPRESS_MS } from "./constants";
 import defaultConfig from "./config";
 
-import type { Props, Config } from "./types";
+import type { Props, Config, UTabsOption, UTabsSlots } from "./types";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<Props>(), {
-  ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
+const props = withDefaults(defineProps<Props<TItem>>(), {
+  ...getDefaults<Props<TItem>, Config>(defaultConfig, COMPONENT_NAME),
   modelValue: "",
   options: () => [],
 });
 
+defineSlots<UTabsSlots<TItem>>();
+
 const emit = defineEmits([
   /**
    * Triggers when the selected tab changes.

package/ui.navigation-tabs/storybook/stories.ts

@@ -6,7 +6,7 @@ import {
   getDocsDescription,
 } from "../../utils/storybook";
 
-import UTabs from "../../ui.navigation-tabs/UTabs.vue";
+import UTabsComponent from "../../ui.navigation-tabs/UTabs.vue";
 import URow from "../../ui.container-row/URow.vue";
 import ULabel from "../../ui.form-label/ULabel.vue";
 import UTab from "../../ui.navigation-tab/UTab.vue";
@@ -20,6 +20,9 @@ import johnDoe from "../../ui.navigation-tab/storybook/assets/john-doe.png";
 import type { Meta, StoryFn } from "@storybook/vue3-vite";
 import type { Props } from "../types";
 
+/* Generic SFCs are typed as a function, which drops the compiler-generated `__name`. */
+const UTabs = UTabsComponent as typeof UTabsComponent & { __name: string };
+
 interface UTabsArgs extends Props {
   slotTemplate?: string;
   enum: "size";

package/ui.navigation-tabs/tests/UTabs.test-d.ts

@@ -0,0 +1,50 @@
+import { describe, it, expectTypeOf } from "vitest";
+
+import type { Props, UTabsOption, UTabsSlots } from "../types";
+
+interface CountedTab {
+  value: string;
+  label: string;
+  count: number;
+}
+
+type LabelProps = Parameters<NonNullable<UTabsSlots<CountedTab>["label"]>>[0];
+
+describe("UTabs types", () => {
+  it("infers the caller's option shape in a slot", () => {
+    expectTypeOf<LabelProps["item"]>().toEqualTypeOf<CountedTab>();
+    expectTypeOf<LabelProps["item"]["count"]>().toEqualTypeOf<number>();
+    expectTypeOf<LabelProps["index"]>().toEqualTypeOf<number>();
+    expectTypeOf<LabelProps["label"]>().toEqualTypeOf<string>();
+    expectTypeOf<LabelProps["active"]>().toEqualTypeOf<boolean>();
+  });
+
+  it("promises the caller's members — options reach slots untransformed", () => {
+    /* Unlike UTable, `UTabs` iterates `props.options` directly: no flattening, filtering
+     * or synthetic entries, so the members are guaranteed rather than optional. */
+    expectTypeOf<LabelProps["item"]["label"]>().toEqualTypeOf<string>();
+    expectTypeOf<undefined>().not.toExtend<LabelProps["item"]["count"]>();
+  });
+
+  it("does not expose undeclared option properties to a slot", () => {
+    type HasIndexSignature = string extends keyof LabelProps["item"] ? true : false;
+
+    expectTypeOf<HasIndexSignature>().toEqualTypeOf<false>();
+    expectTypeOf<keyof LabelProps["item"]>().not.toEqualTypeOf<string>();
+  });
+
+  it("types the remaining slots", () => {
+    type Left = Parameters<NonNullable<UTabsSlots<CountedTab>["left"]>>[0];
+    type Right = Parameters<NonNullable<UTabsSlots<CountedTab>["right"]>>[0];
+    type Prev = Parameters<NonNullable<UTabsSlots["prev"]>>[0];
+
+    expectTypeOf<Left["item"]>().toEqualTypeOf<CountedTab>();
+    expectTypeOf<Right["item"]>().toEqualTypeOf<CountedTab>();
+    expectTypeOf<Prev["iconName"]>().toEqualTypeOf<string>();
+  });
+
+  it("resolves Props with no type argument", () => {
+    expectTypeOf<Props>().toEqualTypeOf<Props<UTabsOption>>();
+    expectTypeOf<Props<CountedTab>["options"]>().toEqualTypeOf<CountedTab[] | undefined>();
+  });
+});

package/ui.navigation-tabs/tests/UTabsTypes.vue

@@ -0,0 +1,65 @@
+<!-- Type-level fixture: checked by `npm run ts:check`, never mounted.
+     Proves slot props infer from the `options` prop at a real call site. -->
+<template>
+  <!-- `UTabs` iterates `options` verbatim, so the caller's shape is guaranteed, not optional. -->
+  <UTabs :options="options">
+    <template #left="{ item, index, active, iconName }">
+      {{ expectString(item.label) }}
+      {{ expectString(item.badge) }}
+      {{ expectNumber(index) }}
+      {{ expectBoolean(active) }}
+      {{ expectOptionalString(iconName) }}
+    </template>
+
+    <template #label="{ item, index, label, active }">
+      {{ expectString(item.badge) }}
+      {{ expectString(label) }}
+      {{ expectNumber(index) }}
+      {{ expectBoolean(active) }}
+    </template>
+
+    <template #right="{ item }">
+      <!-- @vue-expect-error `nonExistent` is not a key of the inferred option. -->
+      {{ item.nonExistent }}
+    </template>
+
+    <template #prev="{ iconName }">{{ expectString(iconName) }}</template>
+    <template #next="{ iconName }">{{ expectString(iconName) }}</template>
+  </UTabs>
+
+  <!-- Options from a non-literal source still expose the declared option shape. -->
+  <UTabs :options="typedOptions">
+    <template #label="{ item }">{{ expectNumber(item.count) }}</template>
+  </UTabs>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+import UTabs from "../UTabs.vue";
+
+interface CountedTab {
+  value: string;
+  label: string;
+  count: number;
+}
+
+const options = [{ value: "1", label: "Dashboard", badge: "new" }];
+const typedOptions = ref<CountedTab[]>([]);
+
+function expectString(value: string) {
+  return value;
+}
+
+function expectNumber(value: number) {
+  return value;
+}
+
+function expectBoolean(value: boolean) {
+  return value;
+}
+
+function expectOptionalString(value: string | undefined) {
+  return value;
+}
+</script>

package/ui.navigation-tabs/types.ts

@@ -8,13 +8,35 @@ export type SetUTabsSelectedItem = (
   value: string | number | boolean | UnknownArray | UnknownObject,
 ) => void;
 
-export interface UTabsOption {
+export interface BaseTabOption {
   value: string | number;
   label: string;
   disabled?: boolean;
 }
 
-export interface Props {
+/* Any object shape is a valid option, only reserved option keys are type checked. */
+export type UTabsOption = BaseTabOption & (object | UnknownObject);
+
+/**
+ * Slots receive each option verbatim — `UTabs` iterates `props.options` without
+ * filtering, flattening or synthesising entries, so the caller's shape is guaranteed.
+ */
+export interface UTabsSlots<TItem extends UTabsOption = UTabsOption> {
+  default?: () => unknown;
+  prev?: (props: { iconName: string }) => unknown;
+  next?: (props: { iconName: string }) => unknown;
+  left?: (props: { item: TItem; index: number; active: boolean; iconName?: string }) => unknown;
+  label?: (props: {
+    item: TItem;
+    index: number;
+    label: string;
+    active: boolean;
+    iconName?: string;
+  }) => unknown;
+  right?: (props: { item: TItem; index: number; active: boolean; iconName?: string }) => unknown;
+}
+
+export interface Props<TItem extends UTabsOption = UTabsOption> {
   /**
    * Selected tab value.
    */
@@ -23,7 +45,7 @@ export interface Props {
   /**
    * Tab options.
    */
-  options?: UTabsOption[];
+  options?: TItem[];
 
   /**
    * Tabs size.

package/ui.skeleton-text/constants.ts

@@ -2,4 +2,4 @@
   This const is needed to prevent the issue in script setup:
  `defineProps` is referencing locally declared variables. (vue/valid-define-props)
  */
-export const COMPONENT_NAME = "USkeletonInput";
+export const COMPONENT_NAME = "USkeletonText";

package/ui.text-badge/config.ts

@@ -2,7 +2,7 @@ export default /*tw*/ {
   badge: {
     base: `
       inline-flex items-center justify-between py-1
-      border border-solid rounded-medium leading-none! outline-solid outline-transparent
+      border border-solid rounded-medium leading-none! outline-solid outline-medium outline-transparent
     `,
     variants: {
       variant: {

package/utils/node/loaderIcon.js

@@ -227,7 +227,7 @@ async function findAndCopyIcons(files, library, vuelessConfig, debug) {
     const iconPropsPattern = `\\b\\w*(name|icon)\\w*\\s*=\\s*(['"])(.*?)\\2`;
     const uComponentIconNamePattern =
       // eslint-disable-next-line vue/max-len
-      /<UIcon\b[^>]*?\b(name)\s*[:=]\s*(['"])(.*?)\2[^>]*?>|<(?!UIcon\b)(U\w+)\b[^>]*?\b(\w*icon\w*)\s*[:=]\s*(['"])(.*?)\6[^>]*?>/;
+      /<UIcon\b[^>]*?\b(name)\s*[:=]\s*(['"])(.*?)\2[^>]*?>|<(?!UIcon\b)([A-Z]\w+)\b[^>]*?\b(\w*icon\w*)\s*[:=]\s*(['"])(.*?)\6[^>]*?>/;
 
     const uComponentIconNameArray = fileContents.match(new RegExp(uComponentIconNamePattern, "g"));
 

package/v.tooltip/vTooltip.ts

@@ -64,7 +64,7 @@ function setUpTippy(el: HTMLElement, props: string | TippyProps) {
     return;
   }
 
-  if (typeof props !== "string" && props.content && String(props.content).length) {
+  if (typeof props !== "string" && props && props.content && String(props.content).length) {
     tippy(el, merge({}, settings, props || {}));
   }
 }