npm - @rotki/ui-library - Versions diffs - 2.23.4 → 2.24.0 - Mend

@rotki/ui-library 2.23.4 → 2.24.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (27) hide show

package/dist/components/tables/data-table/RuiDataTableCell.vue_vue_type_script_setup_true_lang.js CHANGED Viewed

@@ -19,9 +19,10 @@ var RuiDataTableCell_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 		rowId: {}
 	},
 	setup(__props) {
-		const { cellValue, columnAttr } = useDataTableColumns();
+		const { cellValue, columnAttr, itemSlotKeys } = useDataTableColumns();
 		const { isExpanded, onToggleExpand } = useDataTableExpansion();
 		const { isMobile } = useDataTableStyling();
+		const ownsExpandColumn = computed(() => itemSlotKeys.has("expand"));
 		const mobileLabel = computed(() => {
 			const label = __props.column[columnAttr];
 			return label === void 0 || label === null ? "" : String(label);
@@ -40,11 +41,11 @@ var RuiDataTableCell_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 				column: __props.column,
 				row: __props.row,
 				index: __props.index
-			}, () => [__props.column.key === "expand" ? (openBlock(), createBlock(RuiExpandButton_default, {
+			}, () => [__props.column.key === "expand" && !unref(ownsExpandColumn) ? (openBlock(), createBlock(RuiExpandButton_default, {
 				key: 0,
 				expanded: __props.rowId !== void 0 && unref(isExpanded)(__props.rowId),
 				onClick: _cache[0] || (_cache[0] = ($event) => unref(onToggleExpand)(__props.row))
-			}, null, 8, ["expanded"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(unref(cellValue)(__props.row, __props.column.key)), 1)], 64))])], 2)], 10, _hoisted_1);
+			}, null, 8, ["expanded"])) : __props.column.key !== "expand" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(unref(cellValue)(__props.row, __props.column.key)), 1)], 64)) : createCommentVNode("", true)])], 2)], 10, _hoisted_1);
 		};
 	}
 });

package/dist/components/tables/data-table/RuiDataTableCell.vue_vue_type_script_setup_true_lang.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RuiDataTableCell.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../src/components/tables/data-table/RuiDataTableCell.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends object\">\nimport type { TableColumn } from '@/components/tables/RuiTableHead.vue';\nimport { useDataTableColumns, useDataTableExpansion, useDataTableStyling } from '@/components/tables/data-table/context';\nimport RuiExpandButton from '@/components/tables/RuiExpandButton.vue';\n\nconst { column } = defineProps<{\n column: TableColumn<T>;\n row: T;\n index: number;\n rowId?: T[keyof T];\n}>();\n\ndefineSlots<{\n default?: (props: { column: TableColumn<T>; row: T; index: number }) => any;\n}>();\n\nconst { cellValue, columnAttr } = useDataTableColumns<T>();\nconst { isExpanded, onToggleExpand } = useDataTableExpansion<T>();\nconst { isMobile } = useDataTableStyling();\n\nconst mobileLabel = computed<string>(() => {\n const label = column[columnAttr];\n return label === undefined \|\| label === null ? '' : String(label);\n});\nconst showMobileLabel = computed<boolean>(() => get(isMobile) && column.key !== 'expand' && get(mobileLabel).length > 0);\n</script>\n\n<template>\n <td\n :class=\"[\n column.tdClass,\n column.cellClass,\n isMobile ? 'flex items-start justify-between gap-4 text-right' : '',\n ]\"\n :colspan=\"column.colspan ?? 1\"\n :rowspan=\"column.rowspan ?? 1\"\n >\n <span\n v-if=\"showMobileLabel\"\n aria-hidden=\"true\"\n class=\"shrink-0 text-left font-medium text-rui-text-secondary\"\n data-id=\"cell-label\"\n >\n {{ mobileLabel }}\n </span>\n <div :class=\"isMobile ? 'min-w-0 ml-auto' : 'contents'\">\n <slot\n :column=\"column\"\n :row=\"row\"\n :index=\"index\"\n >\n <RuiExpandButton\n v-if=\"column.key === 'expand'\"\n :expanded=\"rowId !== undefined && isExpanded(rowId)\"\n @click=\"onToggleExpand(row)\"\n />\n <template v-else>\n {{ cellValue(row, column.key) }}\n </template>\n </slot>\n </div>\n </td>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EAgBA,MAAM,EAAE,WAAW,~~eAAe~~,oBAAuB;~~EACzD~~,MAAM,EAAE,YAAY,mBAAmB,sBAAyB;EAChE,MAAM,EAAE,aAAa,oBAAoB;~~EAEzC~~,MAAM,cAAc,eAAuB;GACzC,MAAM,QAAQ,QAAA,OAAO;GACrB,OAAO,UAAU,KAAA,KAAa,UAAU,OAAO,KAAK,OAAO,KAAK;EAClE,CAAC;EACD,MAAM,kBAAkB,eAAwB,IAAI,QAAQ,KAAK,QAAA,OAAO,QAAQ,YAAY,IAAI,WAAW,CAAC,CAAC,SAAS,CAAC;;uBAIrH,mBAiCK,MAAA;IAhCF,OAAK,eAAA;KAAU,QAAA,OAAO;KAAe,QAAA,OAAO;KAAiB,MAAA,QAAA,IAAQ,sDAAA;;IAKrE,SAAS,QAAA,OAAO,WAAO;IACvB,SAAS,QAAA,OAAO,WAAO;OAGhB,MAAA,eAAA,KAAA,UAAA,GADR,mBAOO,QAPP,YAOO,gBADF,MAAA,WAAA,CAAW,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,GAEhB,mBAeM,OAAA,EAfA,OAAK,eAAE,MAAA,QAAA,IAAQ,oBAAA,UAAA,EAAA,GAAA,CACnB,WAaO,KAAA,QAAA,WAAA;IAZJ,QAAQ,QAAA;IACR,KAAK,QAAA;IACL,OAAO,QAAA;YAUH,CAPG,QAAA,OAAO,QAAG,YAAA,UAAA,~~GADlB~~,YAIE,yBAAA;;IAFC,UAAU,QAAA,UAAU,KAAA,KAAa,MAAA,UAAA,CAAU,CAAC,QAAA,KAAK;IACjD,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,cAAA,CAAc,CAAC,QAAA,GAAG;~~8CAE5B~~,mBAEW,UAAA,EAAA,KAAA,EAAA,GAAA,CAAA,gBAAA,gBADN,MAAA,SAAA,CAAS,CAAC,QAAA,KAAK,QAAA,OAAO,GAAG,CAAA,GAAA,CAAA,CAAA,GAAA,EAAA,~~EAAA~~,CAAA,CAAA,GAAA,CAAA,CAAA,GAAA,IAAA,UAAA"}
1	+ {"version":3,"file":"RuiDataTableCell.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../src/components/tables/data-table/RuiDataTableCell.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends object\">\nimport type { TableColumn } from '@/components/tables/RuiTableHead.vue';\nimport { useDataTableColumns, useDataTableExpansion, useDataTableStyling } from '@/components/tables/data-table/context';\nimport RuiExpandButton from '@/components/tables/RuiExpandButton.vue';\n\nconst { column } = defineProps<{\n column: TableColumn<T>;\n row: T;\n index: number;\n rowId?: T[keyof T];\n}>();\n\ndefineSlots<{\n default?: (props: { column: TableColumn<T>; row: T; index: number }) => any;\n}>();\n\nconst { cellValue, columnAttr, itemSlotKeys } = useDataTableColumns<T>();\nconst { isExpanded, onToggleExpand } = useDataTableExpansion<T>();\nconst { isMobile } = useDataTableStyling();\n\n// The built-in toggle is only a fallback for consumers that do not drive the\n// expand column themselves. A consumer that provides `#item.expand` owns the\n// decision per row, including rendering nothing for a row that cannot expand,\n// so slot emptiness must not fall back to a toggle they deliberately withheld.\nconst ownsExpandColumn = computed<boolean>(() => itemSlotKeys.has('expand'));\n\nconst mobileLabel = computed<string>(() => {\n const label = column[columnAttr];\n return label === undefined \|\| label === null ? '' : String(label);\n});\nconst showMobileLabel = computed<boolean>(() => get(isMobile) && column.key !== 'expand' && get(mobileLabel).length > 0);\n</script>\n\n<template>\n <td\n :class=\"[\n column.tdClass,\n column.cellClass,\n isMobile ? 'flex items-start justify-between gap-4 text-right' : '',\n ]\"\n :colspan=\"column.colspan ?? 1\"\n :rowspan=\"column.rowspan ?? 1\"\n >\n <span\n v-if=\"showMobileLabel\"\n aria-hidden=\"true\"\n class=\"shrink-0 text-left font-medium text-rui-text-secondary\"\n data-id=\"cell-label\"\n >\n {{ mobileLabel }}\n </span>\n <div :class=\"isMobile ? 'min-w-0 ml-auto' : 'contents'\">\n <slot\n :column=\"column\"\n :row=\"row\"\n :index=\"index\"\n >\n <RuiExpandButton\n v-if=\"column.key === 'expand' && !ownsExpandColumn\"\n :expanded=\"rowId !== undefined && isExpanded(rowId)\"\n @click=\"onToggleExpand(row)\"\n />\n <template v-else-if=\"column.key !== 'expand'\">\n {{ cellValue(row, column.key) }}\n </template>\n </slot>\n </div>\n </td>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EAgBA,MAAM,EAAE,WAAW,YAAY,iBAAiB,oBAAuB;EACvE,MAAM,EAAE,YAAY,mBAAmB,sBAAyB;EAChE,MAAM,EAAE,aAAa,oBAAoB;EAMzC,MAAM,mBAAmB,eAAwB,aAAa,IAAI,QAAQ,CAAC;EAE3E,MAAM,cAAc,eAAuB;GACzC,MAAM,QAAQ,QAAA,OAAO;GACrB,OAAO,UAAU,KAAA,KAAa,UAAU,OAAO,KAAK,OAAO,KAAK;EAClE,CAAC;EACD,MAAM,kBAAkB,eAAwB,IAAI,QAAQ,KAAK,QAAA,OAAO,QAAQ,YAAY,IAAI,WAAW,CAAC,CAAC,SAAS,CAAC;;uBAIrH,mBAiCK,MAAA;IAhCF,OAAK,eAAA;KAAU,QAAA,OAAO;KAAe,QAAA,OAAO;KAAiB,MAAA,QAAA,IAAQ,sDAAA;;IAKrE,SAAS,QAAA,OAAO,WAAO;IACvB,SAAS,QAAA,OAAO,WAAO;OAGhB,MAAA,eAAA,KAAA,UAAA,GADR,mBAOO,QAPP,YAOO,gBADF,MAAA,WAAA,CAAW,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,GAEhB,mBAeM,OAAA,EAfA,OAAK,eAAE,MAAA,QAAA,IAAQ,oBAAA,UAAA,EAAA,GAAA,CACnB,WAaO,KAAA,QAAA,WAAA;IAZJ,QAAQ,QAAA;IACR,KAAK,QAAA;IACL,OAAO,QAAA;YAUH,CAPG,QAAA,OAAO,QAAG,YAAA,CAAkB,MAAA,gBAAA,KAAA,UAAA,GADpC,YAIE,yBAAA;;IAFC,UAAU,QAAA,UAAU,KAAA,KAAa,MAAA,UAAA,CAAU,CAAC,QAAA,KAAK;IACjD,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,cAAA,CAAc,CAAC,QAAA,GAAG;gCAEP,QAAA,OAAO,QAAG,YAAA,UAAA,GAA/B,mBAEW,UAAA,EAAA,KAAA,EAAA,GAAA,CAAA,gBAAA,gBADN,MAAA,SAAA,CAAS,CAAC,QAAA,KAAK,QAAA,OAAO,GAAG,CAAA,GAAA,CAAA,CAAA,GAAA,EAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA,CAAA,GAAA,CAAA,CAAA,GAAA,IAAA,UAAA"}

package/dist/components/tables/data-table/RuiDataTableRow.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RuiDataTableRow.js","names":[],"sources":["../../../../src/components/tables/data-table/RuiDataTableRow.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends object\">\nimport type { TableColumn } from '@/components/tables/RuiTableHead.vue';\nimport RuiCheckbox from '@/components/forms/checkbox/RuiCheckbox.vue';\nimport { useDataTableColumns, useDataTableExpansion, useDataTableRowIdentity, useDataTableSelection, useDataTableStyling } from '@/components/tables/data-table/context';\nimport RuiDataTableCell from '@/components/tables/data-table/RuiDataTableCell.vue';\nimport RuiDataTableExpandedRow from '@/components/tables/data-table/RuiDataTableExpandedRow.vue';\nimport RuiExpandButton from '@/components/tables/RuiExpandButton.vue';\n\nconst {\n row,\n index,\n} = defineProps<{\n row: T;\n index: number;\n}>();\n\nconst slots = defineSlots<Partial<\n Record<`item.${string}`, (props: { column: TableColumn<T>; row: T; index: number }) => any> & {\n 'expanded-item'?: (props: { row: T; index: number }) => any;\n }\n>>();\n\nconst { classes, dense, isMobile } = useDataTableStyling();\nconst { cellValue, columns, itemSlotKeys } = useDataTableColumns<T>();\nconst { isDisabledRow, isSelected, onCheckboxClick, onSelect, selectedData } = useDataTableSelection<T>();\nconst { expandable, isExpanded, onToggleExpand } = useDataTableExpansion<T>();\nconst { getRowId, itemClass } = useDataTableRowIdentity<T>();\n\nconst rowId = computed<T[keyof T]>(() => getRowId(row));\nconst selected = computed<boolean>(() => isSelected(get(rowId)));\nconst disabled = computed<boolean>(() => isDisabledRow(get(rowId)));\nconst expanded = computed<boolean>(() => get(expandable) && !!slots['expanded-item'] && isExpanded(get(rowId)));\nconst rowClass = computed<string>(() => typeof itemClass === 'string' ? itemClass : itemClass(row));\n\n// A column is pinned to the mobile card header when it is flagged `mobileHeader`\n// (typically an action column) or when it is the auto-generated expand column.\nfunction isMobileHeaderColumn(column: TableColumn<T>): boolean {\n return !!column.mobileHeader \|\| column.key === 'expand';\n}\n\n// A pinned column only earns a spot in the header if it actually renders\n// something: the expand toggle, a provided item slot, or a non-empty cell value.\n// Without this, a pinned column with no content (e.g. an action column whose\n// `#item.action` slot is not provided in a nested table) would leave an empty\n// header bar with just its divider line.\nfunction mobileHeaderColumnHasContent(column: TableColumn<T>): boolean {\n if (column.key === 'expand')\n return true;\n if (itemSlotKeys.has(column.key.toString()))\n return true;\n const value = cellValue(row, column.key);\n return value !== undefined && value !== null && value !== '';\n}\n\n// In the stacked mobile layout, header columns render in the card header row\n// instead of as a label/value pair. Everything else stacks below in the body.\nconst mobileHeaderColumns = computed<TableColumn<T>[]>(() =>\n get(isMobile) ? get(columns).filter(column => isMobileHeaderColumn(column) && mobileHeaderColumnHasContent(column)) : [],\n);\nconst bodyColumns = computed<TableColumn<T>[]>(() =>\n get(isMobile) ? get(columns).filter(column => !isMobileHeaderColumn(column)) : get(columns),\n);\nconst showMobileHeader = computed<boolean>(() =>\n get(isMobile) && (!!get(selectedData) \|\| get(mobileHeaderColumns).length > 0),\n);\n\n// `!border-y` defeats the `divide-y-0` on the mobile tbody, which otherwise\n// zeroes the top/bottom border on every card except the first one. When the\n// card is expanded, its bottom edge flattens so the expanded panel attaches\n// flush beneath it.\nconst mobileCardClass = computed<string>(() => {\n const shared = 'relative flex flex-col border !border-y border-black/[0.12] dark:border-white/[0.12] overflow-hidden';\n // These bindings are not run through tailwind-merge, so avoid emitting\n // conflicting utilities (mb-0 vs mb-3, rounded-b-none vs rounded-lg): pick the\n // right one per state instead.\n return get(expanded)\n ? `${shared} rounded-t-lg mb-0`\n : `${shared} rounded-lg mb-3 last:mb-0`;\n});\n</script>\n\n<template>\n <tr\n :class=\"[selected ? classes.trSelected : classes.tr, rowClass, isMobile ? mobileCardClass : '']\"\n :aria-selected=\"selectedData ? selected : undefined\"\n data-id=\"row\"\n >\n <!-- Mobile card header: checkbox on the left, pinned action columns on the right -->\n <td\n v-if=\"showMobileHeader\"\n class=\"flex items-center justify-between gap-2 px-4 py-2 border-b border-black/[0.12] dark:border-white/[0.12]\"\n data-id=\"mobile-card-header\"\n >\n <RuiCheckbox\n v-if=\"selectedData\"\n :data-id=\"`table-toggle-check-${index}`\"\n :model-value=\"selected\"\n :disabled=\"disabled\"\n :size=\"dense ? 'sm' : undefined\"\n color=\"primary\"\n class=\"select-none\"\n hide-details\n @update:model-value=\"onSelect($event, rowId, true)\"\n @click=\"onCheckboxClick($event, rowId, index)\"\n />\n <span v-else />\n\n <div\n v-if=\"mobileHeaderColumns.length > 0\"\n class=\"flex items-center gap-1 min-w-0\"\n >\n <template\n v-for=\"(column, headerIndex) in mobileHeaderColumns\"\n :key=\"`header-${headerIndex}`\"\n >\n <~~RuiExpandButton\n v-if=\"column.key === 'expand'\"\n :expanded=\"isExpanded(rowId)\"\n @click=\"onToggleExpand(row)\"\n />\n <~~slot\n v-~~else-~~if=\"itemSlotKeys.has(column.key.toString())\"\n :name=\"`item.${column.key.toString()}`\"\n :column=\"column\"\n :row=\"row\"\n :index=\"index\"\n />\n <template v-else>\n {{ cellValue(row, column.key) }}\n </template>\n </template>\n </div>\n </td>\n\n <!-- Desktop checkbox cell -->\n <td\n v-else-if=\"selectedData && !isMobile\"\n :class=\"classes.checkbox\"\n colspan=\"1\"\n rowspan=\"1\"\n >\n <RuiCheckbox\n :data-id=\"`table-toggle-check-${index}`\"\n :model-value=\"selected\"\n :disabled=\"disabled\"\n :size=\"dense ? 'sm' : undefined\"\n color=\"primary\"\n class=\"select-none\"\n hide-details\n @update:model-value=\"onSelect($event, rowId, true)\"\n @click=\"onCheckboxClick($event, rowId, index)\"\n />\n </td>\n\n <RuiDataTableCell\n v-for=\"(column, subIndex) in bodyColumns\"\n :key=\"subIndex\"\n :column=\"column\"\n :row=\"row\"\n :index=\"index\"\n :row-id=\"rowId\"\n >\n <template\n v-if=\"itemSlotKeys.has(column.key.toString())\"\n #default=\"slotData\"\n >\n <slot\n :name=\"`item.${column.key.toString()}`\"\n v-bind=\"slotData\"\n />\n </template>\n </RuiDataTableCell>\n </tr>\n\n <RuiDataTableExpandedRow\n v-if=\"expanded\"\n :row=\"row\"\n :index=\"index\"\n >\n <template\n v-if=\"slots['expanded-item']\"\n #expanded-item=\"slotData\"\n >\n <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n <slot\n name=\"expanded-item\"\n v-bind=\"slotData\"\n />\n </template>\n </RuiDataTableExpandedRow>\n</template>\n"],"mappings":""}
1	+ {"version":3,"file":"RuiDataTableRow.js","names":[],"sources":["../../../../src/components/tables/data-table/RuiDataTableRow.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends object\">\nimport type { TableColumn } from '@/components/tables/RuiTableHead.vue';\nimport RuiCheckbox from '@/components/forms/checkbox/RuiCheckbox.vue';\nimport { useDataTableColumns, useDataTableExpansion, useDataTableRowIdentity, useDataTableSelection, useDataTableStyling } from '@/components/tables/data-table/context';\nimport RuiDataTableCell from '@/components/tables/data-table/RuiDataTableCell.vue';\nimport RuiDataTableExpandedRow from '@/components/tables/data-table/RuiDataTableExpandedRow.vue';\nimport RuiExpandButton from '@/components/tables/RuiExpandButton.vue';\n\nconst {\n row,\n index,\n} = defineProps<{\n row: T;\n index: number;\n}>();\n\nconst slots = defineSlots<Partial<\n Record<`item.${string}`, (props: { column: TableColumn<T>; row: T; index: number }) => any> & {\n 'expanded-item'?: (props: { row: T; index: number }) => any;\n }\n>>();\n\nconst { classes, dense, isMobile } = useDataTableStyling();\nconst { cellValue, columns, itemSlotKeys } = useDataTableColumns<T>();\nconst { isDisabledRow, isSelected, onCheckboxClick, onSelect, selectedData } = useDataTableSelection<T>();\nconst { expandable, isExpanded, onToggleExpand } = useDataTableExpansion<T>();\nconst { getRowId, itemClass } = useDataTableRowIdentity<T>();\n\nconst rowId = computed<T[keyof T]>(() => getRowId(row));\nconst selected = computed<boolean>(() => isSelected(get(rowId)));\nconst disabled = computed<boolean>(() => isDisabledRow(get(rowId)));\nconst expanded = computed<boolean>(() => get(expandable) && !!slots['expanded-item'] && isExpanded(get(rowId)));\nconst rowClass = computed<string>(() => typeof itemClass === 'string' ? itemClass : itemClass(row));\n\n// A column is pinned to the mobile card header when it is flagged `mobileHeader`\n// (typically an action column) or when it is the auto-generated expand column.\nfunction isMobileHeaderColumn(column: TableColumn<T>): boolean {\n return !!column.mobileHeader \|\| column.key === 'expand';\n}\n\n// A pinned column only earns a spot in the header if it actually renders\n// something: the expand toggle, a provided item slot, or a non-empty cell value.\n// Without this, a pinned column with no content (e.g. an action column whose\n// `#item.action` slot is not provided in a nested table) would leave an empty\n// header bar with just its divider line.\nfunction mobileHeaderColumnHasContent(column: TableColumn<T>): boolean {\n if (column.key === 'expand')\n return true;\n if (itemSlotKeys.has(column.key.toString()))\n return true;\n const value = cellValue(row, column.key);\n return value !== undefined && value !== null && value !== '';\n}\n\n// In the stacked mobile layout, header columns render in the card header row\n// instead of as a label/value pair. Everything else stacks below in the body.\nconst mobileHeaderColumns = computed<TableColumn<T>[]>(() =>\n get(isMobile) ? get(columns).filter(column => isMobileHeaderColumn(column) && mobileHeaderColumnHasContent(column)) : [],\n);\nconst bodyColumns = computed<TableColumn<T>[]>(() =>\n get(isMobile) ? get(columns).filter(column => !isMobileHeaderColumn(column)) : get(columns),\n);\nconst showMobileHeader = computed<boolean>(() =>\n get(isMobile) && (!!get(selectedData) \|\| get(mobileHeaderColumns).length > 0),\n);\n\n// `!border-y` defeats the `divide-y-0` on the mobile tbody, which otherwise\n// zeroes the top/bottom border on every card except the first one. When the\n// card is expanded, its bottom edge flattens so the expanded panel attaches\n// flush beneath it.\nconst mobileCardClass = computed<string>(() => {\n const shared = 'relative flex flex-col border !border-y border-black/[0.12] dark:border-white/[0.12] overflow-hidden';\n // These bindings are not run through tailwind-merge, so avoid emitting\n // conflicting utilities (mb-0 vs mb-3, rounded-b-none vs rounded-lg): pick the\n // right one per state instead.\n return get(expanded)\n ? `${shared} rounded-t-lg mb-0`\n : `${shared} rounded-lg mb-3 last:mb-0`;\n});\n</script>\n\n<template>\n <tr\n :class=\"[selected ? classes.trSelected : classes.tr, rowClass, isMobile ? mobileCardClass : '']\"\n :aria-selected=\"selectedData ? selected : undefined\"\n data-id=\"row\"\n >\n <!-- Mobile card header: checkbox on the left, pinned action columns on the right -->\n <td\n v-if=\"showMobileHeader\"\n class=\"flex items-center justify-between gap-2 px-4 py-2 border-b border-black/[0.12] dark:border-white/[0.12]\"\n data-id=\"mobile-card-header\"\n >\n <RuiCheckbox\n v-if=\"selectedData\"\n :data-id=\"`table-toggle-check-${index}`\"\n :model-value=\"selected\"\n :disabled=\"disabled\"\n :size=\"dense ? 'sm' : undefined\"\n color=\"primary\"\n class=\"select-none\"\n hide-details\n @update:model-value=\"onSelect($event, rowId, true)\"\n @click=\"onCheckboxClick($event, rowId, index)\"\n />\n <span v-else />\n\n <div\n v-if=\"mobileHeaderColumns.length > 0\"\n class=\"flex items-center gap-1 min-w-0\"\n >\n <template\n v-for=\"(column, headerIndex) in mobileHeaderColumns\"\n :key=\"`header-${headerIndex}`\"\n >\n <slot\n v-if=\"itemSlotKeys.has(column.key.toString())\"\n :name=\"`item.${column.key.toString()}`\"\n :column=\"column\"\n :row=\"row\"\n :index=\"index\"\n />\n <RuiExpandButton\n v-else-if=\"column.key === 'expand'\"\n :expanded=\"isExpanded(rowId)\"\n @click=\"onToggleExpand(row)\"\n />\n <template v-else>\n {{ cellValue(row, column.key) }}\n </template>\n </template>\n </div>\n </td>\n\n <!-- Desktop checkbox cell -->\n <td\n v-else-if=\"selectedData && !isMobile\"\n :class=\"classes.checkbox\"\n colspan=\"1\"\n rowspan=\"1\"\n >\n <RuiCheckbox\n :data-id=\"`table-toggle-check-${index}`\"\n :model-value=\"selected\"\n :disabled=\"disabled\"\n :size=\"dense ? 'sm' : undefined\"\n color=\"primary\"\n class=\"select-none\"\n hide-details\n @update:model-value=\"onSelect($event, rowId, true)\"\n @click=\"onCheckboxClick($event, rowId, index)\"\n />\n </td>\n\n <RuiDataTableCell\n v-for=\"(column, subIndex) in bodyColumns\"\n :key=\"subIndex\"\n :column=\"column\"\n :row=\"row\"\n :index=\"index\"\n :row-id=\"rowId\"\n >\n <template\n v-if=\"itemSlotKeys.has(column.key.toString())\"\n #default=\"slotData\"\n >\n <slot\n :name=\"`item.${column.key.toString()}`\"\n v-bind=\"slotData\"\n />\n </template>\n </RuiDataTableCell>\n </tr>\n\n <RuiDataTableExpandedRow\n v-if=\"expanded\"\n :row=\"row\"\n :index=\"index\"\n >\n <template\n v-if=\"slots['expanded-item']\"\n #expanded-item=\"slotData\"\n >\n <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n <slot\n name=\"expanded-item\"\n v-bind=\"slotData\"\n />\n </template>\n </RuiDataTableExpandedRow>\n</template>\n"],"mappings":""}

package/dist/components/tables/data-table/RuiDataTableRow.vue_vue_type_script_setup_true_lang.js CHANGED Viewed

@@ -77,15 +77,15 @@ var RuiDataTableRow_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 				"disabled",
 				"size"
 			])) : (openBlock(), createElementBlock("span", _hoisted_3)), unref(mobileHeaderColumns).length > 0 ? (openBlock(), createElementBlock("div", _hoisted_4, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(mobileHeaderColumns), (column, headerIndex) => {
-				return openBlock(), createElementBlock(Fragment, { key: `header-${headerIndex}` }, [column.key === "expand" ? (openBlock(), createBlock(RuiExpandButton_default, {
-					key: 0,
-					expanded: unref(isExpanded)(unref(rowId)),
-					onClick: _cache[2] || (_cache[2] = ($event) => unref(onToggleExpand)(__props.row))
-				}, null, 8, ["expanded"])) : unref(itemSlotKeys).has(column.key.toString()) ? renderSlot(_ctx.$slots, `item.${column.key.toString()}`, {
+				return openBlock(), createElementBlock(Fragment, { key: `header-${headerIndex}` }, [unref(itemSlotKeys).has(column.key.toString()) ? renderSlot(_ctx.$slots, `item.${column.key.toString()}`, {
 					column,
 					row: __props.row,
 					index: __props.index
-				}, void 0, void 0, 1) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [createTextVNode(toDisplayString(unref(cellValue)(__props.row, column.key)), 1)], 64))], 64);
+				}, void 0, void 0, 0) : column.key === "expand" ? (openBlock(), createBlock(RuiExpandButton_default, {
+					key: 1,
+					expanded: unref(isExpanded)(unref(rowId)),
+					onClick: _cache[2] || (_cache[2] = ($event) => unref(onToggleExpand)(__props.row))
+				}, null, 8, ["expanded"])) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [createTextVNode(toDisplayString(unref(cellValue)(__props.row, column.key)), 1)], 64))], 64);
 			}), 128))])) : createCommentVNode("", true)])) : unref(selectedData) && !unref(isMobile) ? (openBlock(), createElementBlock("td", {
 				key: 1,
 				class: normalizeClass(unref(classes).checkbox),

package/dist/components/tables/data-table/RuiDataTableRow.vue_vue_type_script_setup_true_lang.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RuiDataTableRow.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../src/components/tables/data-table/RuiDataTableRow.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends object\">\nimport type { TableColumn } from '@/components/tables/RuiTableHead.vue';\nimport RuiCheckbox from '@/components/forms/checkbox/RuiCheckbox.vue';\nimport { useDataTableColumns, useDataTableExpansion, useDataTableRowIdentity, useDataTableSelection, useDataTableStyling } from '@/components/tables/data-table/context';\nimport RuiDataTableCell from '@/components/tables/data-table/RuiDataTableCell.vue';\nimport RuiDataTableExpandedRow from '@/components/tables/data-table/RuiDataTableExpandedRow.vue';\nimport RuiExpandButton from '@/components/tables/RuiExpandButton.vue';\n\nconst {\n row,\n index,\n} = defineProps<{\n row: T;\n index: number;\n}>();\n\nconst slots = defineSlots<Partial<\n Record<`item.${string}`, (props: { column: TableColumn<T>; row: T; index: number }) => any> & {\n 'expanded-item'?: (props: { row: T; index: number }) => any;\n }\n>>();\n\nconst { classes, dense, isMobile } = useDataTableStyling();\nconst { cellValue, columns, itemSlotKeys } = useDataTableColumns<T>();\nconst { isDisabledRow, isSelected, onCheckboxClick, onSelect, selectedData } = useDataTableSelection<T>();\nconst { expandable, isExpanded, onToggleExpand } = useDataTableExpansion<T>();\nconst { getRowId, itemClass } = useDataTableRowIdentity<T>();\n\nconst rowId = computed<T[keyof T]>(() => getRowId(row));\nconst selected = computed<boolean>(() => isSelected(get(rowId)));\nconst disabled = computed<boolean>(() => isDisabledRow(get(rowId)));\nconst expanded = computed<boolean>(() => get(expandable) && !!slots['expanded-item'] && isExpanded(get(rowId)));\nconst rowClass = computed<string>(() => typeof itemClass === 'string' ? itemClass : itemClass(row));\n\n// A column is pinned to the mobile card header when it is flagged `mobileHeader`\n// (typically an action column) or when it is the auto-generated expand column.\nfunction isMobileHeaderColumn(column: TableColumn<T>): boolean {\n return !!column.mobileHeader \|\| column.key === 'expand';\n}\n\n// A pinned column only earns a spot in the header if it actually renders\n// something: the expand toggle, a provided item slot, or a non-empty cell value.\n// Without this, a pinned column with no content (e.g. an action column whose\n// `#item.action` slot is not provided in a nested table) would leave an empty\n// header bar with just its divider line.\nfunction mobileHeaderColumnHasContent(column: TableColumn<T>): boolean {\n if (column.key === 'expand')\n return true;\n if (itemSlotKeys.has(column.key.toString()))\n return true;\n const value = cellValue(row, column.key);\n return value !== undefined && value !== null && value !== '';\n}\n\n// In the stacked mobile layout, header columns render in the card header row\n// instead of as a label/value pair. Everything else stacks below in the body.\nconst mobileHeaderColumns = computed<TableColumn<T>[]>(() =>\n get(isMobile) ? get(columns).filter(column => isMobileHeaderColumn(column) && mobileHeaderColumnHasContent(column)) : [],\n);\nconst bodyColumns = computed<TableColumn<T>[]>(() =>\n get(isMobile) ? get(columns).filter(column => !isMobileHeaderColumn(column)) : get(columns),\n);\nconst showMobileHeader = computed<boolean>(() =>\n get(isMobile) && (!!get(selectedData) \|\| get(mobileHeaderColumns).length > 0),\n);\n\n// `!border-y` defeats the `divide-y-0` on the mobile tbody, which otherwise\n// zeroes the top/bottom border on every card except the first one. When the\n// card is expanded, its bottom edge flattens so the expanded panel attaches\n// flush beneath it.\nconst mobileCardClass = computed<string>(() => {\n const shared = 'relative flex flex-col border !border-y border-black/[0.12] dark:border-white/[0.12] overflow-hidden';\n // These bindings are not run through tailwind-merge, so avoid emitting\n // conflicting utilities (mb-0 vs mb-3, rounded-b-none vs rounded-lg): pick the\n // right one per state instead.\n return get(expanded)\n ? `${shared} rounded-t-lg mb-0`\n : `${shared} rounded-lg mb-3 last:mb-0`;\n});\n</script>\n\n<template>\n <tr\n :class=\"[selected ? classes.trSelected : classes.tr, rowClass, isMobile ? mobileCardClass : '']\"\n :aria-selected=\"selectedData ? selected : undefined\"\n data-id=\"row\"\n >\n <!-- Mobile card header: checkbox on the left, pinned action columns on the right -->\n <td\n v-if=\"showMobileHeader\"\n class=\"flex items-center justify-between gap-2 px-4 py-2 border-b border-black/[0.12] dark:border-white/[0.12]\"\n data-id=\"mobile-card-header\"\n >\n <RuiCheckbox\n v-if=\"selectedData\"\n :data-id=\"`table-toggle-check-${index}`\"\n :model-value=\"selected\"\n :disabled=\"disabled\"\n :size=\"dense ? 'sm' : undefined\"\n color=\"primary\"\n class=\"select-none\"\n hide-details\n @update:model-value=\"onSelect($event, rowId, true)\"\n @click=\"onCheckboxClick($event, rowId, index)\"\n />\n <span v-else />\n\n <div\n v-if=\"mobileHeaderColumns.length > 0\"\n class=\"flex items-center gap-1 min-w-0\"\n >\n <template\n v-for=\"(column, headerIndex) in mobileHeaderColumns\"\n :key=\"`header-${headerIndex}`\"\n >\n <RuiExpandButton\n v-if=\"column.key === 'expand'\"\n :expanded=\"isExpanded(rowId)\"\n @click=\"onToggleExpand(row)\"\n />\n <slot\n v-else-if=\"itemSlotKeys.has(column.key.toString())\"\n :name=\"`item.${column.key.toString()}`\"\n :column=\"column\"\n :row=\"row\"\n :index=\"index\"\n />\n <template v-else>\n {{ cellValue(row, column.key) }}\n </template>\n </template>\n </div>\n </td>\n\n <!-- Desktop checkbox cell -->\n <td\n v-else-if=\"selectedData && !isMobile\"\n :class=\"classes.checkbox\"\n colspan=\"1\"\n rowspan=\"1\"\n >\n <RuiCheckbox\n :data-id=\"`table-toggle-check-${index}`\"\n :model-value=\"selected\"\n :disabled=\"disabled\"\n :size=\"dense ? 'sm' : undefined\"\n color=\"primary\"\n class=\"select-none\"\n hide-details\n @update:model-value=\"onSelect($event, rowId, true)\"\n @click=\"onCheckboxClick($event, rowId, index)\"\n />\n </td>\n\n <RuiDataTableCell\n v-for=\"(column, subIndex) in bodyColumns\"\n :key=\"subIndex\"\n :column=\"column\"\n :row=\"row\"\n :index=\"index\"\n :row-id=\"rowId\"\n >\n <template\n v-if=\"itemSlotKeys.has(column.key.toString())\"\n #default=\"slotData\"\n >\n <slot\n :name=\"`item.${column.key.toString()}`\"\n v-bind=\"slotData\"\n />\n </template>\n </RuiDataTableCell>\n </tr>\n\n <RuiDataTableExpandedRow\n v-if=\"expanded\"\n :row=\"row\"\n :index=\"index\"\n >\n <template\n v-if=\"slots['expanded-item']\"\n #expanded-item=\"slotData\"\n >\n <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n <slot\n name=\"expanded-item\"\n v-bind=\"slotData\"\n />\n </template>\n </RuiDataTableExpandedRow>\n</template>\n"],"mappings":"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"}
1	+ {"version":3,"file":"RuiDataTableRow.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../src/components/tables/data-table/RuiDataTableRow.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends object\">\nimport type { TableColumn } from '@/components/tables/RuiTableHead.vue';\nimport RuiCheckbox from '@/components/forms/checkbox/RuiCheckbox.vue';\nimport { useDataTableColumns, useDataTableExpansion, useDataTableRowIdentity, useDataTableSelection, useDataTableStyling } from '@/components/tables/data-table/context';\nimport RuiDataTableCell from '@/components/tables/data-table/RuiDataTableCell.vue';\nimport RuiDataTableExpandedRow from '@/components/tables/data-table/RuiDataTableExpandedRow.vue';\nimport RuiExpandButton from '@/components/tables/RuiExpandButton.vue';\n\nconst {\n row,\n index,\n} = defineProps<{\n row: T;\n index: number;\n}>();\n\nconst slots = defineSlots<Partial<\n Record<`item.${string}`, (props: { column: TableColumn<T>; row: T; index: number }) => any> & {\n 'expanded-item'?: (props: { row: T; index: number }) => any;\n }\n>>();\n\nconst { classes, dense, isMobile } = useDataTableStyling();\nconst { cellValue, columns, itemSlotKeys } = useDataTableColumns<T>();\nconst { isDisabledRow, isSelected, onCheckboxClick, onSelect, selectedData } = useDataTableSelection<T>();\nconst { expandable, isExpanded, onToggleExpand } = useDataTableExpansion<T>();\nconst { getRowId, itemClass } = useDataTableRowIdentity<T>();\n\nconst rowId = computed<T[keyof T]>(() => getRowId(row));\nconst selected = computed<boolean>(() => isSelected(get(rowId)));\nconst disabled = computed<boolean>(() => isDisabledRow(get(rowId)));\nconst expanded = computed<boolean>(() => get(expandable) && !!slots['expanded-item'] && isExpanded(get(rowId)));\nconst rowClass = computed<string>(() => typeof itemClass === 'string' ? itemClass : itemClass(row));\n\n// A column is pinned to the mobile card header when it is flagged `mobileHeader`\n// (typically an action column) or when it is the auto-generated expand column.\nfunction isMobileHeaderColumn(column: TableColumn<T>): boolean {\n return !!column.mobileHeader \|\| column.key === 'expand';\n}\n\n// A pinned column only earns a spot in the header if it actually renders\n// something: the expand toggle, a provided item slot, or a non-empty cell value.\n// Without this, a pinned column with no content (e.g. an action column whose\n// `#item.action` slot is not provided in a nested table) would leave an empty\n// header bar with just its divider line.\nfunction mobileHeaderColumnHasContent(column: TableColumn<T>): boolean {\n if (column.key === 'expand')\n return true;\n if (itemSlotKeys.has(column.key.toString()))\n return true;\n const value = cellValue(row, column.key);\n return value !== undefined && value !== null && value !== '';\n}\n\n// In the stacked mobile layout, header columns render in the card header row\n// instead of as a label/value pair. Everything else stacks below in the body.\nconst mobileHeaderColumns = computed<TableColumn<T>[]>(() =>\n get(isMobile) ? get(columns).filter(column => isMobileHeaderColumn(column) && mobileHeaderColumnHasContent(column)) : [],\n);\nconst bodyColumns = computed<TableColumn<T>[]>(() =>\n get(isMobile) ? get(columns).filter(column => !isMobileHeaderColumn(column)) : get(columns),\n);\nconst showMobileHeader = computed<boolean>(() =>\n get(isMobile) && (!!get(selectedData) \|\| get(mobileHeaderColumns).length > 0),\n);\n\n// `!border-y` defeats the `divide-y-0` on the mobile tbody, which otherwise\n// zeroes the top/bottom border on every card except the first one. When the\n// card is expanded, its bottom edge flattens so the expanded panel attaches\n// flush beneath it.\nconst mobileCardClass = computed<string>(() => {\n const shared = 'relative flex flex-col border !border-y border-black/[0.12] dark:border-white/[0.12] overflow-hidden';\n // These bindings are not run through tailwind-merge, so avoid emitting\n // conflicting utilities (mb-0 vs mb-3, rounded-b-none vs rounded-lg): pick the\n // right one per state instead.\n return get(expanded)\n ? `${shared} rounded-t-lg mb-0`\n : `${shared} rounded-lg mb-3 last:mb-0`;\n});\n</script>\n\n<template>\n <tr\n :class=\"[selected ? classes.trSelected : classes.tr, rowClass, isMobile ? mobileCardClass : '']\"\n :aria-selected=\"selectedData ? selected : undefined\"\n data-id=\"row\"\n >\n <!-- Mobile card header: checkbox on the left, pinned action columns on the right -->\n <td\n v-if=\"showMobileHeader\"\n class=\"flex items-center justify-between gap-2 px-4 py-2 border-b border-black/[0.12] dark:border-white/[0.12]\"\n data-id=\"mobile-card-header\"\n >\n <RuiCheckbox\n v-if=\"selectedData\"\n :data-id=\"`table-toggle-check-${index}`\"\n :model-value=\"selected\"\n :disabled=\"disabled\"\n :size=\"dense ? 'sm' : undefined\"\n color=\"primary\"\n class=\"select-none\"\n hide-details\n @update:model-value=\"onSelect($event, rowId, true)\"\n @click=\"onCheckboxClick($event, rowId, index)\"\n />\n <span v-else />\n\n <div\n v-if=\"mobileHeaderColumns.length > 0\"\n class=\"flex items-center gap-1 min-w-0\"\n >\n <template\n v-for=\"(column, headerIndex) in mobileHeaderColumns\"\n :key=\"`header-${headerIndex}`\"\n >\n <slot\n v-if=\"itemSlotKeys.has(column.key.toString())\"\n :name=\"`item.${column.key.toString()}`\"\n :column=\"column\"\n :row=\"row\"\n :index=\"index\"\n />\n <RuiExpandButton\n v-else-if=\"column.key === 'expand'\"\n :expanded=\"isExpanded(rowId)\"\n @click=\"onToggleExpand(row)\"\n />\n <template v-else>\n {{ cellValue(row, column.key) }}\n </template>\n </template>\n </div>\n </td>\n\n <!-- Desktop checkbox cell -->\n <td\n v-else-if=\"selectedData && !isMobile\"\n :class=\"classes.checkbox\"\n colspan=\"1\"\n rowspan=\"1\"\n >\n <RuiCheckbox\n :data-id=\"`table-toggle-check-${index}`\"\n :model-value=\"selected\"\n :disabled=\"disabled\"\n :size=\"dense ? 'sm' : undefined\"\n color=\"primary\"\n class=\"select-none\"\n hide-details\n @update:model-value=\"onSelect($event, rowId, true)\"\n @click=\"onCheckboxClick($event, rowId, index)\"\n />\n </td>\n\n <RuiDataTableCell\n v-for=\"(column, subIndex) in bodyColumns\"\n :key=\"subIndex\"\n :column=\"column\"\n :row=\"row\"\n :index=\"index\"\n :row-id=\"rowId\"\n >\n <template\n v-if=\"itemSlotKeys.has(column.key.toString())\"\n #default=\"slotData\"\n >\n <slot\n :name=\"`item.${column.key.toString()}`\"\n v-bind=\"slotData\"\n />\n </template>\n </RuiDataTableCell>\n </tr>\n\n <RuiDataTableExpandedRow\n v-if=\"expanded\"\n :row=\"row\"\n :index=\"index\"\n >\n <template\n v-if=\"slots['expanded-item']\"\n #expanded-item=\"slotData\"\n >\n <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n <slot\n name=\"expanded-item\"\n v-bind=\"slotData\"\n />\n </template>\n </RuiDataTableExpandedRow>\n</template>\n"],"mappings":"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"}

package/dist/composables/forms/auto-complete/value.d.ts CHANGED Viewed

@@ -10,6 +10,8 @@ export interface UseAutoCompleteValueOptions<TItem> {
 export interface UseAutoCompleteValueReturn<TItem> {
     value: ComputedRef<TItem[]>;
     setSelected: (selected: TItem[]) => void;
+    /** Resolves the current model value against an arbitrary options list. */
+    resolveIn: (options: TItem[]) => TItem[];
 }
 export interface UseAutoCompleteValueDeps<TItem> {
     getIdentifier: (item: TItem) => any;

package/dist/composables/forms/auto-complete/value.js CHANGED Viewed

@@ -3,12 +3,12 @@ import { computed, toValue, watch } from "vue";
 import { get, set } from "@vueuse/shared";
 //#region src/composables/forms/auto-complete/value.ts
 function useAutoCompleteValue(modelValue, options, opts, deps) {
-	const optionsMap = computed(() => {
+	function buildOptionsMap(optionsData) {
 		const map = /* @__PURE__ */ new Map();
-		const optionsData = toValue(options);
 		for (const item of optionsData) map.set(deps.getIdentifier(item), item);
 		return map;
-	});
+	}
+	const optionsMap = computed(() => buildOptionsMap(toValue(options)));
 	function convertModelValueToArray(modelValueData) {
 		if (modelValueData === null || modelValueData === void 0) return [];
 		return Array.isArray(modelValueData) ? modelValueData : [modelValueData];
@@ -44,16 +44,19 @@ function useAutoCompleteValue(modelValue, options, opts, deps) {
 		if (selection.length === 0) return onUpdateModelValue(void 0);
 		return onUpdateModelValue(selection[0]);
 	}
+	function resolveAgainst(optionsMapData) {
+		const modelValueData = get(modelValue);
+		const keyAttr = toValue(opts.keyAttr);
+		const returnObject = toValue(opts.returnObject) ?? false;
+		const customValue = toValue(opts.customValue) ?? false;
+		if (keyAttr && returnObject) return processReturnObjectValue(modelValueData, optionsMapData, returnObject, customValue);
+		return processStandardValue(modelValueData, optionsMapData, returnObject, customValue);
+	}
+	function resolveIn(optionsData) {
+		return resolveAgainst(buildOptionsMap(optionsData));
+	}
 	const value = computed({
-		get: () => {
-			const modelValueData = get(modelValue);
-			const keyAttr = toValue(opts.keyAttr);
-			const returnObject = toValue(opts.returnObject) ?? false;
-			const customValue = toValue(opts.customValue) ?? false;
-			const optionsMapData = get(optionsMap);
-			if (keyAttr && returnObject) return processReturnObjectValue(modelValueData, optionsMapData, returnObject, customValue);
-			return processStandardValue(modelValueData, optionsMapData, returnObject, customValue);
-		},
+		get: () => resolveAgainst(get(optionsMap)),
 		set: (selected) => {
 			setSelected(selected);
 		}
@@ -69,6 +72,7 @@ function useAutoCompleteValue(modelValue, options, opts, deps) {
 		}
 	}, { immediate: true });
 	return {
+		resolveIn,
 		setSelected,
 		value
 	};

package/dist/composables/forms/auto-complete/value.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"value.js","names":[],"sources":["../../../../src/composables/forms/auto-complete/value.ts"],"sourcesContent":["import type { ComputedRef, MaybeRefOrGetter, Ref } from 'vue';\nimport { get, set } from '@vueuse/shared';\nimport { assert } from '@/utils/assert';\n\nexport interface UseAutoCompleteValueOptions<TItem> {\n /** The property used as the unique identifier for each item. /\n keyAttr?: MaybeRefOrGetter<keyof TItem \| undefined>;\n /* Whether to return the full item object instead of just the key. /\n returnObject?: MaybeRefOrGetter<boolean>;\n /* Whether custom (free-text) values are allowed. */\n customValue?: MaybeRefOrGetter<boolean>;\n}\n\nexport interface UseAutoCompleteValueReturn<TItem> {\n value: ComputedRef<TItem[]>;\n setSelected: (selected: TItem[]) => void;\n}\n\nexport interface UseAutoCompleteValueDeps<TItem> {\n getIdentifier: (item: TItem) => any;\n getText: (item: TItem) => string \| undefined;\n textValueToProperValue: (val: any, returnObject?: boolean) => TItem;\n shouldApplyValueAsSearch: MaybeRefOrGetter<boolean>;\n isOpen: MaybeRefOrGetter<boolean>;\n multiple: MaybeRefOrGetter<boolean>;\n updateInternalSearch: (value?: string) => void;\n}\n\nexport function useAutoCompleteValue<TValue, TItem>(\n modelValue: Ref<TValue \| undefined>,\n options: MaybeRefOrGetter<TItem[]>,\n opts: UseAutoCompleteValueOptions<TItem>,\n deps: UseAutoCompleteValueDeps<TItem>,\n): UseAutoCompleteValueReturn<TItem> {\n // ~~Create~~ ~~maps for O(1~~) ~~lookup performance\n const optionsMap = computed<~~Map<any, TItem~~>>(()~~ => {\n const map = new Map<any, TItem>();\n ~~const optionsData = toValue(options);\n~~ for (const item of optionsData) {\n map.set(deps.getIdentifier(item), item);\n }\n return map;\n });\n\n function convertModelValueToArray(modelValueData: TValue \| undefined): any[] {\n if (modelValueData === null \|\| modelValueData === undefined)\n return [];\n return Array.isArray(modelValueData) ? modelValueData : [modelValueData];\n }\n\n function filterValues(\n valueArray: any[],\n optionsMapData: Map<any, TItem>,\n customValue: boolean,\n returnObject: boolean,\n getKey: (val: any) => any,\n ): TItem[] {\n const filtered: TItem[] = [];\n for (const val of valueArray) {\n const inOptions = optionsMapData.get(getKey(val));\n if (inOptions !== undefined)\n filtered.push(inOptions);\n else if (customValue)\n filtered.push(deps.textValueToProperValue(val, returnObject));\n }\n return filtered;\n }\n\n function processReturnObjectValue(\n modelValueData: TValue \| undefined,\n optionsMapData: Map<any, TItem>,\n returnObject: boolean,\n customValue: boolean,\n ): TItem[] {\n const multipleValue = Array.isArray(modelValueData);\n const valueArray = convertModelValueToArray(modelValueData);\n const filtered = filterValues(valueArray, optionsMapData, customValue, returnObject, val => deps.getIdentifier(val));\n\n if (multipleValue \|\| filtered.length === 0)\n return filtered;\n\n const val = filtered[0];\n assert(val !== undefined && val !== null);\n return [val];\n }\n\n function processStandardValue(\n modelValueData: TValue \| undefined,\n optionsMapData: Map<any, TItem>,\n returnObject: boolean,\n customValue: boolean,\n ): TItem[] {\n const valueArray = convertModelValueToArray(modelValueData);\n return filterValues(valueArray, optionsMapData, customValue, returnObject, val => val);\n }\n\n function onUpdateModelValue(value: TValue \| undefined): void {\n set(modelValue, value);\n }\n\n function setSelected(selected: TItem[]): void {\n const keyAttr = toValue(opts.keyAttr);\n const returnObject = toValue(opts.returnObject);\n const selection = keyAttr && !returnObject ? selected.map(item => item[keyAttr]) : selected;\n\n if (toValue(deps.multiple))\n return onUpdateModelValue(selection as TValue);\n\n if (selection.length === 0)\n return onUpdateModelValue(undefined);\n\n return onUpdateModelValue(selection[0] as TValue);\n }\n\n ~~const~~ ~~value~~ = ~~computed<~~TItem[]>~~({\n get~~: () => {\n const modelValueData = get(modelValue);\n const keyAttr = toValue(opts.keyAttr);\n const returnObject = toValue(opts.returnObject) ?? false;\n const customValue = toValue(opts.customValue) ?? false;\n ~~const optionsMapData = get(optionsMap);\n~~\n if (keyAttr && returnObject)\n return processReturnObjectValue(modelValueData, optionsMapData, returnObject, customValue);\n\n return processStandardValue(modelValueData, optionsMapData, returnObject, customValue);\n },\n set: (selected: TItem[]): void => {\n setSelected(selected);\n },\n });\n\n // Watching `value` (not `modelValue`) so the search text resyncs once\n // `options` arrives later and the lookup can finally resolve.\n watch([value, () => toValue(deps.isOpen)], () => {\n if (toValue(deps.isOpen) \|\| !toValue(deps.shouldApplyValueAsSearch))\n return;\n\n const currentValue = get(value);\n if (toValue(deps.multiple) \|\| currentValue.length === 0) {\n deps.updateInternalSearch();\n }\n else {\n const firstItem = currentValue[0];\n assert(firstItem !== undefined && firstItem !== null);\n deps.updateInternalSearch(deps.getText(firstItem));\n }\n }, { immediate: true });\n\n return {\n setSelected,\n value,\n };\n}\n"],"mappings":";;;;~~AA4BA~~,SAAgB,qBACd,YACA,SACA,MACA,MACmC;~~CAEnC~~,~~MAAM~~,~~aAAa~~,~~eAAgC~~;~~EACjD~~,MAAM,sBAAM,IAAI,IAAgB;EAChC,~~MAAM,cAAc,QAAQ,OAAO;EACnC,~~KAAK,MAAM,QAAQ,aACjB,IAAI,IAAI,KAAK,cAAc,IAAI,GAAG,IAAI;EAExC,OAAO;CACT,CAAC;~~CAED~~,SAAS,yBAAyB,gBAA2C;EAC3E,IAAI,mBAAmB,QAAQ,mBAAmB,KAAA,GAChD,OAAO,CAAC;EACV,OAAO,MAAM,QAAQ,cAAc,IAAI,iBAAiB,CAAC,cAAc;CACzE;CAEA,SAAS,aACP,YACA,gBACA,aACA,cACA,QACS;EACT,MAAM,WAAoB,CAAC;EAC3B,KAAK,MAAM,OAAO,YAAY;GAC5B,MAAM,YAAY,eAAe,IAAI,OAAO,GAAG,CAAC;GAChD,IAAI,cAAc,KAAA,GAChB,SAAS,KAAK,SAAS;QACpB,IAAI,aACP,SAAS,KAAK,KAAK,uBAAuB,KAAK,YAAY,CAAC;EAChE;EACA,OAAO;CACT;CAEA,SAAS,yBACP,gBACA,gBACA,cACA,aACS;EACT,MAAM,gBAAgB,MAAM,QAAQ,cAAc;EAElD,MAAM,WAAW,aADE,yBAAyB,cACd,GAAY,gBAAgB,aAAa,eAAc,QAAO,KAAK,cAAc,GAAG,CAAC;EAEnH,IAAI,iBAAiB,SAAS,WAAW,GACvC,OAAO;EAET,MAAM,MAAM,SAAS;EACrB,OAAO,QAAQ,KAAA,KAAa,QAAQ,IAAI;EACxC,OAAO,CAAC,GAAG;CACb;CAEA,SAAS,qBACP,gBACA,gBACA,cACA,aACS;EAET,OAAO,aADY,yBAAyB,cACxB,GAAY,gBAAgB,aAAa,eAAc,QAAO,GAAG;CACvF;CAEA,SAAS,mBAAmB,OAAiC;EAC3D,IAAI,YAAY,KAAK;CACvB;CAEA,SAAS,YAAY,UAAyB;EAC5C,MAAM,UAAU,QAAQ,KAAK,OAAO;EACpC,MAAM,eAAe,QAAQ,KAAK,YAAY;EAC9C,MAAM,YAAY,WAAW,CAAC,eAAe,SAAS,KAAI,SAAQ,KAAK,QAAQ,IAAI;EAEnF,IAAI,QAAQ,KAAK,QAAQ,GACvB,OAAO,mBAAmB,SAAmB;EAE/C,IAAI,UAAU,WAAW,GACvB,OAAO,mBAAmB,KAAA,CAAS;EAErC,OAAO,mBAAmB,UAAU,EAAY;CAClD;CAEA,~~MAAM~~,~~QAAQ~~,~~SAAkB~~;~~EAC9B~~,~~WAAW;GACT,~~MAAM,iBAAiB,IAAI,UAAU;~~GACrC~~,MAAM,UAAU,QAAQ,KAAK,OAAO;~~GACpC~~,MAAM,eAAe,QAAQ,KAAK,YAAY,KAAK;~~GACnD~~,MAAM,cAAc,QAAQ,KAAK,WAAW,KAAK;~~GACjD~~,~~MAAM,iBAAiB,~~IAAI,~~UAAU;GAErC,IAAI,~~WAAW,cACb,OAAO,yBAAyB,gBAAgB,gBAAgB,cAAc,WAAW;~~GAE3F~~,OAAO,qBAAqB,gBAAgB,gBAAgB,cAAc,WAAW;~~EACvF~~;~~EACA~~,MAAM,aAA4B;GAChC,YAAY,QAAQ;EACtB;CACF,CAAC;CAID,MAAM,CAAC,aAAa,QAAQ,KAAK,MAAM,CAAC,SAAS;EAC/C,IAAI,QAAQ,KAAK,MAAM,KAAK,CAAC,QAAQ,KAAK,wBAAwB,GAChE;EAEF,MAAM,eAAe,IAAI,KAAK;EAC9B,IAAI,QAAQ,KAAK,QAAQ,KAAK,aAAa,WAAW,GACpD,KAAK,qBAAqB;OAEvB;GACH,MAAM,YAAY,aAAa;GAC/B,OAAO,cAAc,KAAA,KAAa,cAAc,IAAI;GACpD,KAAK,qBAAqB,KAAK,QAAQ,SAAS,CAAC;EACnD;CACF,GAAG,EAAE,WAAW,KAAK,CAAC;CAEtB,OAAO;EACL;EACA;CACF;AACF"}
1	+ {"version":3,"file":"value.js","names":[],"sources":["../../../../src/composables/forms/auto-complete/value.ts"],"sourcesContent":["import type { ComputedRef, MaybeRefOrGetter, Ref } from 'vue';\nimport { get, set } from '@vueuse/shared';\nimport { assert } from '@/utils/assert';\n\nexport interface UseAutoCompleteValueOptions<TItem> {\n /** The property used as the unique identifier for each item. /\n keyAttr?: MaybeRefOrGetter<keyof TItem \| undefined>;\n /* Whether to return the full item object instead of just the key. /\n returnObject?: MaybeRefOrGetter<boolean>;\n /* Whether custom (free-text) values are allowed. /\n customValue?: MaybeRefOrGetter<boolean>;\n}\n\nexport interface UseAutoCompleteValueReturn<TItem> {\n value: ComputedRef<TItem[]>;\n setSelected: (selected: TItem[]) => void;\n /* Resolves the current model value against an arbitrary options list. */\n resolveIn: (options: TItem[]) => TItem[];\n}\n\nexport interface UseAutoCompleteValueDeps<TItem> {\n getIdentifier: (item: TItem) => any;\n getText: (item: TItem) => string \| undefined;\n textValueToProperValue: (val: any, returnObject?: boolean) => TItem;\n shouldApplyValueAsSearch: MaybeRefOrGetter<boolean>;\n isOpen: MaybeRefOrGetter<boolean>;\n multiple: MaybeRefOrGetter<boolean>;\n updateInternalSearch: (value?: string) => void;\n}\n\nexport function useAutoCompleteValue<TValue, TItem>(\n modelValue: Ref<TValue \| undefined>,\n options: MaybeRefOrGetter<TItem[]>,\n opts: UseAutoCompleteValueOptions<TItem>,\n deps: UseAutoCompleteValueDeps<TItem>,\n): UseAutoCompleteValueReturn<TItem> {\n function buildOptionsMap(optionsData: TItem[]): Map<any, TItem> {\n const map = new Map<any, TItem>();\n for (const item of optionsData) {\n map.set(deps.getIdentifier(item), item);\n }\n return map;\n }\n\n // Create maps for O(1) lookup performance\n const optionsMap = computed<Map<any, TItem>>(() => buildOptionsMap(toValue(options)));\n\n function convertModelValueToArray(modelValueData: TValue \| undefined): any[] {\n if (modelValueData === null \|\| modelValueData === undefined)\n return [];\n return Array.isArray(modelValueData) ? modelValueData : [modelValueData];\n }\n\n function filterValues(\n valueArray: any[],\n optionsMapData: Map<any, TItem>,\n customValue: boolean,\n returnObject: boolean,\n getKey: (val: any) => any,\n ): TItem[] {\n const filtered: TItem[] = [];\n for (const val of valueArray) {\n const inOptions = optionsMapData.get(getKey(val));\n if (inOptions !== undefined)\n filtered.push(inOptions);\n else if (customValue)\n filtered.push(deps.textValueToProperValue(val, returnObject));\n }\n return filtered;\n }\n\n function processReturnObjectValue(\n modelValueData: TValue \| undefined,\n optionsMapData: Map<any, TItem>,\n returnObject: boolean,\n customValue: boolean,\n ): TItem[] {\n const multipleValue = Array.isArray(modelValueData);\n const valueArray = convertModelValueToArray(modelValueData);\n const filtered = filterValues(valueArray, optionsMapData, customValue, returnObject, val => deps.getIdentifier(val));\n\n if (multipleValue \|\| filtered.length === 0)\n return filtered;\n\n const val = filtered[0];\n assert(val !== undefined && val !== null);\n return [val];\n }\n\n function processStandardValue(\n modelValueData: TValue \| undefined,\n optionsMapData: Map<any, TItem>,\n returnObject: boolean,\n customValue: boolean,\n ): TItem[] {\n const valueArray = convertModelValueToArray(modelValueData);\n return filterValues(valueArray, optionsMapData, customValue, returnObject, val => val);\n }\n\n function onUpdateModelValue(value: TValue \| undefined): void {\n set(modelValue, value);\n }\n\n function setSelected(selected: TItem[]): void {\n const keyAttr = toValue(opts.keyAttr);\n const returnObject = toValue(opts.returnObject);\n const selection = keyAttr && !returnObject ? selected.map(item => item[keyAttr]) : selected;\n\n if (toValue(deps.multiple))\n return onUpdateModelValue(selection as TValue);\n\n if (selection.length === 0)\n return onUpdateModelValue(undefined);\n\n return onUpdateModelValue(selection[0] as TValue);\n }\n\n function resolveAgainst(optionsMapData: Map<any, TItem>): TItem[] {\n const modelValueData = get(modelValue);\n const keyAttr = toValue(opts.keyAttr);\n const returnObject = toValue(opts.returnObject) ?? false;\n const customValue = toValue(opts.customValue) ?? false;\n\n if (keyAttr && returnObject)\n return processReturnObjectValue(modelValueData, optionsMapData, returnObject, customValue);\n\n return processStandardValue(modelValueData, optionsMapData, returnObject, customValue);\n }\n\n function resolveIn(optionsData: TItem[]): TItem[] {\n return resolveAgainst(buildOptionsMap(optionsData));\n }\n\n const value = computed<TItem[]>({\n get: () => resolveAgainst(get(optionsMap)),\n set: (selected: TItem[]): void => {\n setSelected(selected);\n },\n });\n\n // Watching `value` (not `modelValue`) so the search text resyncs once\n // `options` arrives later and the lookup can finally resolve.\n watch([value, () => toValue(deps.isOpen)], () => {\n if (toValue(deps.isOpen) \|\| !toValue(deps.shouldApplyValueAsSearch))\n return;\n\n const currentValue = get(value);\n if (toValue(deps.multiple) \|\| currentValue.length === 0) {\n deps.updateInternalSearch();\n }\n else {\n const firstItem = currentValue[0];\n assert(firstItem !== undefined && firstItem !== null);\n deps.updateInternalSearch(deps.getText(firstItem));\n }\n }, { immediate: true });\n\n return {\n resolveIn,\n setSelected,\n value,\n };\n}\n"],"mappings":"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"}

package/dist/web-types.json CHANGED Viewed

@@ -2,7 +2,7 @@
   "$schema": "http://json.schemastore.org/web-types",
   "framework": "vue",
   "name": "@rotki/ui-library",
-  "version": "2.23.4",
+  "version": "2.24.0",
   "js-types-syntax": "typescript",
   "description-markup": "markdown",
   "contributions": {
@@ -1277,6 +1277,15 @@
                 "type": "boolean | undefined"
               }
             },
+            {
+              "name": "partial-time",
+              "description": "Accepts an entry that stops short of the full format, filling the segments\nit never reached from one end of the day: `start` gives a bare date\n00:00:00.000 and `end` gives it 23:59:59.999. Meant for a range, where the\ntwo bounds want opposite ends. Left unset, an entry missing its time is not\na value and nothing is emitted.\n\nThe fill runs when the user is done with the field - leaving it, pressing\nenter, or closing the calendar - and is written back into the segments, so\nwhat it decided on is on screen.\n\nSpelled out rather than written as `PartialTimeMode`: a consumer that hands\nthis whole interface to its own `defineProps` needs every member resolvable\nby the SFC compiler, which does not follow the type into the package.",
+              "required": false,
+              "value": {
+                "kind": "expression",
+                "type": "'start' | 'end' | undefined"
+              }
+            },
             {
               "name": "model-value",
               "description": "",

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@rotki/ui-library",
-  "version": "2.23.4",
+  "version": "2.24.0",
   "description": "A vue design system and component library for rotki",
   "type": "module",
   "keywords": [