@stonecrop/atable 0.2.44 → 0.2.45

package/dist/src/utils.d.ts

@@ -0,0 +1,2 @@
+export declare const isHtmlString: (htmlString: string) => boolean;
+//# sourceMappingURL=utils.d.ts.map

package/dist/src/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/utils.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY,eAAgB,MAAM,YAG9C,CAAA"}

package/dist/utils.js

@@ -0,0 +1,4 @@
+export const isHtmlString = (htmlString) => {
+    const $document = new DOMParser().parseFromString(htmlString, 'text/html');
+    return Array.from($document.body.childNodes).some(node => node.nodeType === 1);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stonecrop/atable",
-  "version": "0.2.44",
+  "version": "0.2.45",
   "license": "MIT",
   "type": "module",
   "author": {
@@ -34,8 +34,8 @@
     "@vueuse/components": "^10.11.0",
     "@vueuse/core": "^11.1.0",
     "vue": "^3.5.6",
-    "@stonecrop/themes": "0.2.44",
-    "@stonecrop/utilities": "0.2.44"
+    "@stonecrop/utilities": "0.2.45",
+    "@stonecrop/themes": "0.2.45"
   },
   "devDependencies": {
     "@microsoft/api-documenter": "^7.25.3",

package/src/components/ACell.vue

@@ -20,8 +20,8 @@
 			v-if="column.cellComponent"
 			:is="column.cellComponent"
 			:value="displayValue"
-			v-bind="column.cellComponentProps">
-		</component>
+			v-bind="column.cellComponentProps" />
+		<span v-else-if="isHtmlValue" v-html="displayValue" />
 		<span v-else>{{ displayValue }}</span>
 	</td>
 </template>
@@ -33,6 +33,7 @@ import { computed, CSSProperties, inject, ref, useTemplateRef } from 'vue'
 
 import TableDataStore from '.'
 import type { CellContext } from '@/types'
+import { isHtmlString } from '@/utils'
 
 const {
 	colIndex,
@@ -87,6 +88,11 @@ const displayValue = computed(() => {
 	return cellData
 })
 
+const isHtmlValue = computed(() => {
+	// TODO: check if display value is a native DOM element
+	return typeof displayValue.value === 'string' ? isHtmlString(displayValue.value) : false
+})
+
 const handleInput = () => {
 	if (column.mask) {
 		// TODO: add masking to cell values

package/src/utils.ts

@@ -0,0 +1,4 @@
+export const isHtmlString = (htmlString: string) => {
+	const $document = new DOMParser().parseFromString(htmlString, 'text/html')
+	return Array.from($document.body.childNodes).some(node => node.nodeType === 1)
+}