feat(cientos): correctly typed Text3D

packages/cientos/src/core/Text3D.vue

@@ -4,13 +4,13 @@ import { TextGeometry, FontLoader } from 'three-stdlib'
 import { computed, useSlots } from 'vue'
 import { useCientos } from './useCientos'
 
-type Glyph = {
+export type Glyph = {
   _cachedOutline: string[]
   ha: number
   o: string
 }
 
-type FontData = {
+export type FontData = {
   boundingBox: {
     yMax: number
     yMin: number
@@ -23,32 +23,109 @@ type FontData = {
   underlineThickness: number
 }
 
-const props = withDefaults(
-  defineProps<{
-    font: FontData | string
-    text?: string
-    size?: number
-    height?: number
-    curveSegments?: number
-    bevelEnabled?: boolean
-    bevelThickness?: number
-    bevelSize?: number
-    bevelOffset?: number
-    bevelSegments?: number
-    center?: boolean
-  }>(),
-  {
-    size: 0.5,
-    height: 0.2,
-    curveSegments: 5,
-    bevelEnabled: true,
-    bevelThickness: 0.05,
-    bevelSize: 0.02,
-    bevelOffset: 0,
-    bevelSegments: 4,
-    center: false,
-  },
-)
+export interface Text3DProps {
+  /**
+   *
+   *  The JSON font to use for the text.
+   *  Text3D requires fonts in JSON format generated through [typeface.json](http://gero3.github.io/facetype.js)
+   *
+   * @type {(FontData | string)}
+   * @memberof Text3DProps
+   * @see https://threejs.org/docs/index.html?q=TEXT#examples/en/geometries/TextGeometry
+   */
+  font: FontData | string
+  /**
+   * The text to display.
+   *
+   * @type {string}
+   * @memberof Text3DProps
+   */
+  text?: string
+  /**
+   * The size of the text.
+   *
+   * @type {number}
+   * @memberof Text3DProps
+   * @default 0.5
+   */
+  size?: number
+  /**
+   * The height of the text.
+   *
+   * @type {number}
+   * @memberof Text3DProps
+   * @default 0.2
+   */
+  height?: number
+  /**
+   * The curve segments of the text.
+   *
+   * @type {number}
+   * @memberof Text3DProps
+   * @default 5
+   */
+  curveSegments?: number
+  /**
+   * Turn on bevel
+   *
+   * @type {boolean}
+   * @memberof Text3DProps
+   * @default true
+   */
+  bevelEnabled?: boolean
+  /**
+   * How deep into text bevel goes.
+   *
+   * @type {number}
+   * @memberof Text3DProps
+   * @default 0.05
+   */
+  bevelThickness?: number
+  /**
+   * How far from text outline is bevel.
+   *
+   * @type {number}
+   * @memberof Text3DProps
+   * @default 0.02
+   */
+  bevelSize?: number
+  /**
+   * How far from text outline is bevel.
+   *
+   * @type {number}
+   * @memberof Text3DProps
+   * @default 0
+   */
+  bevelOffset?: number
+  /**
+   * How many bevel segments.
+   *
+   * @type {number}
+   * @memberof Text3DProps
+   * @default 4
+   */
+  bevelSegments?: number
+  /**
+   * Whether to center the text.
+   *
+   * @type {boolean}
+   * @memberof Text3DProps
+   * @default false
+   */
+  center?: boolean
+}
+
+const props = withDefaults(defineProps<Text3DProps>(), {
+  size: 0.5,
+  height: 0.2,
+  curveSegments: 5,
+  bevelEnabled: true,
+  bevelThickness: 0.05,
+  bevelSize: 0.02,
+  bevelOffset: 0,
+  bevelSegments: 4,
+  center: false,
+})
 
 const { extend } = useCientos()