@db-ux/v-core-components 4.10.1 → 4.11.0

package/dist/index.d.ts

@@ -64,6 +64,22 @@ export * from './components/tab-list';
 export * from './components/tab-list/model';
 export * from './components/tab-panel';
 export * from './components/tab-panel/model';
+export * from './components/table';
+export * from './components/table-body';
+export * from './components/table-body/model';
+export * from './components/table-caption';
+export * from './components/table-caption/model';
+export * from './components/table-data-cell';
+export * from './components/table-data-cell/model';
+export * from './components/table-footer';
+export * from './components/table-footer/model';
+export * from './components/table-head';
+export * from './components/table-head/model';
+export * from './components/table-header-cell';
+export * from './components/table-header-cell/model';
+export * from './components/table-row';
+export * from './components/table-row/model';
+export * from './components/table/model';
 export * from './components/tabs';
 export * from './components/tabs/model';
 export * from './components/tag';

package/dist/shared/figma.d.ts

@@ -1,12 +1,24 @@
+/** Base for all Figma prop definitions. */
+export type FigmaBaseProp = {
+    /** The prop type discriminator. */
+    type: string;
+    /**
+     * Optional layer name substring to resolve this prop from a nested subcomponent instance
+     * instead of the root instance (e.g. 'Custom Select Form Field').
+     * When set, the plugin searches _ccLayers for an instance whose name includes this string
+     * and reads the property from that instance.
+     */
+    layer?: string;
+};
 /** A nested Figma instance swap prop (e.g. icon components). */
-export type FigmaInstanceProp = {
+export type FigmaInstanceProp = FigmaBaseProp & {
     /** Use 'instance' for generic instance swaps, 'iconSwap' for icon instances that resolve to a string name. */
     type: 'instance' | 'iconSwap';
     /** The Figma property key of the instance swap (e.g. '🔄 Icon Small'). */
     key: string;
 };
 /** An enum prop mapping Figma variant values to code values. */
-export type FigmaEnumProp = {
+export type FigmaEnumProp = FigmaBaseProp & {
     type: 'enum';
     /** The Figma property key (e.g. 'Size', '💻 Variant'). */
     key: string;
@@ -20,7 +32,7 @@ export type FigmaEnumProp = {
     guardKey?: string;
 };
 /** A simple scalar prop. */
-export type FigmaSimpleProp = {
+export type FigmaSimpleProp = FigmaBaseProp & {
     /**
      * - 'string': maps to instance.getString()
      * - 'boolean': maps to instance.getBoolean()
@@ -30,14 +42,12 @@ export type FigmaSimpleProp = {
     type: 'string' | 'boolean' | 'children' | 'textContent';
     /** The Figma property key (e.g. '✏️ Text', '✏️ Label'). */
     key: string;
-};
-/** Reads a text property from a named nested instance via instance.findInstance(layerName)?.getString(key). */
-export type FigmaNestedTextProp = {
-    type: 'nestedText';
-    /** The exact Figma layer name of the nested instance to find. */
-    layerName: string;
-    /** The Figma property key on the nested instance (e.g. '✏️ Text'). */
-    key: string;
+    /**
+     * Optional Figma boolean property keys that guard this prop.
+     * When set, the prop value is only emitted if at least one of the guard keys is true.
+     * Useful for conditionally showing labels, timestamps, etc.
+     */
+    guardKeys?: string[];
 };
 /**
  * Reads a text property from the first code-connected child instance.
@@ -46,7 +56,7 @@ export type FigmaNestedTextProp = {
  *   .filter((node) => !!node.properties[key])[0]
  *   .getString(key)
  */
-export type FigmaConnectedTextProp = {
+export type FigmaConnectedTextProp = FigmaBaseProp & {
     type: 'connectedText';
     /** The Figma property key to read from each connected instance (e.g. '✏️ Text'). */
     key: string;
@@ -60,7 +70,7 @@ export type FigmaConnectedTextProp = {
  * @example
  * validationMessage: { type: 'validationMessage', key: '✏️ Text', conditionProp: 'validation', map: { 'invalid': 'invalidMessage', 'valid': 'validMessage', default: 'message' } }
  */
-export type FigmaValidationMessageProp = {
+export type FigmaValidationMessageProp = FigmaBaseProp & {
     type: 'validationMessage';
     /** The Figma property key to read from the connected instance (e.g. '✏️ Text'). */
     key: string;
@@ -72,10 +82,16 @@ export type FigmaValidationMessageProp = {
 /**
  * Renders all direct code-connected child instances as children.
  * Generates: instance.findConnectedInstances((node) => node.hasCodeConnect())
- *   .map((child) => child.executeTemplate().example)
+ *   .flatMap((child) => child.executeTemplate().example)
+ *
+ * When `filter` is provided, only instances whose **name** includes the filter string
+ * are included. Note: this differs from `nestedConnectedInstances` where filter matches
+ * against nestedImports.
  */
-export type FigmaConnectedInstancesProp = {
+export type FigmaConnectedInstancesProp = FigmaBaseProp & {
     type: 'connectedInstances';
+    /** Instance name substring to filter by (e.g. 'Navigation'). Only instances whose node name includes this string are included. When omitted, all connected instances are included. */
+    filter?: string;
 };
 /**
  * Renders code-connected child instances recursively, filtered by a nestedImports string.
@@ -90,16 +106,45 @@ export type FigmaConnectedInstancesProp = {
  *       .some((section) => section.nestedImports?.some((i) => i.includes('DBAccordionItem'))))
  *     .map((child) => child.executeTemplate().example)
  */
-export type FigmaNestedConnectedInstancesProp = {
+export type FigmaNestedConnectedInstancesProp = FigmaBaseProp & {
     type: 'nestedConnectedInstances';
     /** Import string to filter by (e.g. 'DBAccordionItem'). Only instances whose template nestedImports contain this string are included. When omitted, all connected instances are included. */
     filter?: string;
 };
+/**
+ * Maps multiple boolean Figma properties to a single enum code value.
+ * The first property whose value is `true` wins; if none match, the prop is omitted.
+ *
+ * @example
+ * linkVariant: { type: 'booleanToEnum', map: [{ key: '(Def) Link Variant: Block', value: 'block' }, { key: '↳ OR Link Variant: Inline', value: 'inline' }] }
+ */
+export type FigmaBooleanToEnumProp = FigmaBaseProp & {
+    type: 'booleanToEnum';
+    /** Ordered list of Figma boolean keys and the code value to emit when that key is true. */
+    map: Array<{
+        key: string;
+        value: string;
+    }>;
+};
+/**
+ * Finds all nested instances matching a filter and maps their properties to an array.
+ * Each matched instance produces one object in the array, with keys defined by `props`.
+ *
+ * @example
+ * options: { type: 'nestedInstancesToArray', filter: 'Custom Select List Item', props: { value: { type: 'string', key: '✏️ Value' }, label: { type: 'textContent', key: '✏️ Label' } } }
+ */
+export type FigmaNestedInstancesToArrayProp = FigmaBaseProp & {
+    type: 'nestedInstancesToArray';
+    /** Instance name substring to filter by (e.g. 'Custom Select List Item'). */
+    filter: string;
+    /** Map of output property names → Figma prop definitions to extract from each matched instance. */
+    props: Record<string, FigmaProp>;
+};
 /**
  * Wraps an iconSwap prop so it is only rendered when a boolean Figma property is enabled.
  * Generates: let icon = ''; if (getPropertyValue(guardKey) === true || getPropertyValue(guardKey) === 'True') { icon = `\n\t\ticon="${iconLeading}"` }
  */
-export type FigmaConditionalProp = {
+export type FigmaConditionalProp = FigmaBaseProp & {
     type: 'conditionalProp';
     /** The Figma property key of the icon instance swap. */
     key: string;
@@ -108,10 +153,17 @@ export type FigmaConditionalProp = {
     /** The attribute name to render (e.g. 'icon'). */
     attrName: string;
 };
-export type FigmaProp = FigmaEnumProp | FigmaInstanceProp | FigmaNestedTextProp | FigmaConnectedTextProp | FigmaValidationMessageProp | FigmaConditionalProp | FigmaConnectedInstancesProp | FigmaNestedConnectedInstancesProp | FigmaSimpleProp;
+export type FigmaProp = FigmaEnumProp | FigmaBooleanToEnumProp | FigmaInstanceProp | FigmaConnectedTextProp | FigmaValidationMessageProp | FigmaConditionalProp | FigmaConnectedInstancesProp | FigmaNestedConnectedInstancesProp | FigmaNestedInstancesToArrayProp | FigmaSimpleProp;
 export type FigmaCodeConnect = {
     /** Figma node URLs this component connects to. Use 'FIGMA_FILE' as placeholder for the file key. */
     urls: string[];
     /** Map of prop name → Figma prop definition. */
     props: Record<string, FigmaProp>;
+    /**
+     * Optional additional layer name substrings to include in the _ccLayers filter.
+     * Each entry adds an `|| n.name.includes('...')` condition to the findLayers predicate.
+     * Use when Code Connect properties live inside named subcomponent instances
+     * (e.g. 'Custom Select Form Field', 'Custom Select Dropdown').
+     */
+    ccLayerNames?: string[];
 };

package/dist/shared/model.d.ts

@@ -460,11 +460,11 @@ export type CloseEventProps<T> = {
 export type CloseEventState<T> = {
     handleClose: (event?: T | void, forceClose?: boolean) => void;
 };
-export declare const AlignmentList: readonly ["start", "center"];
+export declare const AlignmentList: readonly ["start", "center", "end"];
 export type AlignmentType = (typeof AlignmentList)[number];
 export type AlignmentProps = {
     /**
-     * Define the content alignment in full width
+     * Define the content alignment
      */
     alignment?: AlignmentType | string;
 };
@@ -554,3 +554,45 @@ export interface PatternhubProps {
      */
     isPatternhub?: boolean;
 }
+export type DBTableCellProps = {
+    /**
+     * The **`colSpan`** read-only property of the HTMLTableCellElement interface represents the number of columns this cell must span; this lets the cell occupy space across multiple columns of the table.
+     *
+     * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLTableCellElement/colSpan)
+     */
+    colSpan?: number | string;
+    /**
+     * Lowercase HTML attribute alternative to `colSpan`. Use this in template languages that require lowercase attributes (e.g. Angular, Vue).
+     * If both `colSpan` and `colspan` are provided, `colSpan` takes precedence.
+     *
+     * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLTableCellElement/colSpan)
+     */
+    colspan?: number | string;
+    /**
+     * The **`headers`** property of the HTMLTableCellElement interface contains a list of IDs of th elements that are _headers_ for this specific cell.
+     *
+     * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLTableCellElement/headers)
+     */
+    headers?: string;
+    /**
+     * The **`rowSpan`** read-only property of the HTMLTableCellElement interface represents the number of rows this cell must span; this lets the cell occupy space across multiple rows of the table.
+     *
+     * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLTableCellElement/rowSpan)
+     */
+    rowSpan?: number | string;
+    /**
+     * Lowercase HTML attribute alternative to `rowSpan`. Use this in template languages that require lowercase attributes (e.g. Angular, Vue).
+     * If both `rowSpan` and `rowspan` are provided, `rowSpan` takes precedence.
+     *
+     * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLTableCellElement/rowSpan)
+     */
+    rowspan?: number | string;
+    /**
+     * Set the horizontal alignment of the cell content.
+     */
+    horizontalAlignment?: AlignmentType;
+    /**
+     * Set the vertical alignment of the cell content.
+     */
+    verticalAlignment?: AlignmentType;
+};

package/dist/utils/index.d.ts

@@ -22,11 +22,16 @@ export declare const hasVoiceOver: () => boolean;
 export declare const isIOSSafari: () => boolean;
 export declare const delay: (fn: () => void, ms: number) => Promise<unknown>;
 /**
- * Some frameworks like stencil would not add "true" as value for a prop
- * if it is used in a framework like angular e.g.: [disabled]="myDisabledProp"
- * @param originBool Some boolean to convert to string
+ * Converts boolean-like inputs to "true" or "false" strings.
+ * Handles HTML-style boolean attributes where an empty string or the
+ * attribute's own name as value (e.g. noText="noText") should be treated as true.
+ * Some frameworks like Stencil do not add "true" as value for a prop
+ * if it is used in a framework like Angular e.g.: [disabled]="myDisabledProp"
+ * @param originBool Boolean or string value to convert
+ * @param propertyName The prop/attribute name — when originBool is a string equal
+ *   to this name (case-insensitive), it is treated as true
  */
-export declare const getBooleanAsString: (originBool?: boolean | string) => any;
+export declare const getBooleanAsString: (originBool?: boolean | string, propertyName?: string) => any;
 export declare const getBoolean: (originBool?: boolean | string, propertyName?: string) => boolean | undefined;
 export declare const getNumber: (originNumber?: number | string, alternativeNumber?: number | string) => number | undefined;
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@db-ux/v-core-components",
-  "version": "4.10.1",
+  "version": "4.11.0",
   "type": "module",
   "description": "Vue components for @db-ux/core-components",
   "repository": {
@@ -28,21 +28,21 @@
     "dist/"
   ],
   "dependencies": {
-    "@db-ux/core-components": "4.10.1",
-    "@db-ux/core-foundations": "4.10.1"
+    "@db-ux/core-components": "4.11.0",
+    "@db-ux/core-foundations": "4.11.0"
   },
   "devDependencies": {
     "@playwright/experimental-ct-vue": "1.60.0",
     "@vitejs/plugin-vue": "6.0.7",
-    "@vue/compiler-dom": "3.5.34",
+    "@vue/compiler-dom": "3.5.35",
     "cpr": "3.0.1",
     "npm-run-all2": "9.0.1",
     "replace-in-file": "8.4.0",
-    "tsx": "4.22.3",
+    "tsx": "4.22.4",
     "typescript": "5.9.3",
-    "vite": "8.0.14",
-    "vue": "3.5.34",
-    "vue-tsc": "3.3.2"
+    "vite": "8.0.16",
+    "vue": "3.5.35",
+    "vue-tsc": "3.3.3"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",