vue#PropType TypeScript Examples

export function configProp<T = undefined> () {
  return {
    config: {
      type: Object as PropType<Config>,
      required: true as const
    },
    configWidget: {
      type: Object as PropType<T>,
      default: undefined as unknown as T
    }
  }
}

props = {
  modelValue: {
    type: [String, Number, Array] as PropType<string | string[] | number[] | number>,
    default: ''
  },
  value: {
    type: [String, Number, Array] as PropType<string | string[] | number[] | number>,
    default: ''
  },
  placeholder: {
    type: String,
    default: ''
  },
  multiple: Boolean,
  size: {
    type: String as PropType<NormalSizes>,
    default: 'medium'
  },
  clearable: {
    type: Boolean,
    default: true
  },
  disabled: Boolean,
  visibleArrow: {
    type: Boolean,
    default: true
  }
}

props = {
  text: { type: String, required: true, default: 'Text' },
  fontSrc: { type: String, required: true },
  size: { type: Number, default: 80 },
  height: { type: Number, default: 5 },
  depth: { type: Number, default: 1 },
  curveSegments: { type: Number, default: 12 },
  bevelEnabled: { type: Boolean, default: false },
  bevelThickness: { type: Number, default: 10 },
  bevelSize: { type: Number, default: 8 },
  bevelOffset: { type: Number, default: 0 },
  bevelSegments: { type: Number, default: 5 },
  align: { type: [Boolean, String] as PropType<boolean | string>, default: false },
} as const

props = {
  text: {
    type: String,
    default: '',
    required: true
  },
  width: {
    type: [String, Number],
    default: 'initial'
  },
  fill: Boolean,
  type: {
    type: String as PropType<NormalTypes>,
    default: 'default'
  },
  copy: {
    type: String as PropType<SnippetCopyTypes>,
    default: 'default'
  },
  symbol: {
    type: String,
    default: '$'
  },
  toastText: {
    type: String,
    default: 'Copied to clipboard!'
  },
  toastType: {
    type: String as PropType<NormalTypes>,
    default: 'success'
  }
}

dropdownListProps = {
	engine: Object as PropType<EngineInterface | undefined>,
	name: {
		type: String,
		required: true,
	} as const,
	direction: String as PropType<'vertical' | 'horizontal'>,
	items: {
		type: Array as PropType<Array<DropdownListItem>>,
		required: true,
	} as const,
	values: {
		type: [String, Array, Number] as PropType<
			string | number | Array<string>
		>,
		required: true,
	} as const,
	className: String,
	onSelect: Function as PropType<
		(
			event: MouseEvent,
			key: string,
			engine?: EngineInterface,
		) => void | boolean
	>,
	hasDot: {
		type: [Boolean, undefined] as PropType<boolean | undefined>,
		default: undefined,
	},
}

RequestConfig = defineComponent({
  name: 'RequestConfig',
  props: {
    config: {
      type: Object as PropType<GlobalOptions>,
      required: true,
    },
  },
  setup(props, { slots }) {
    const { config } = props;

    provide(GLOBAL_OPTIONS_PROVIDE_KEY, config);

    return () => slots.default?.();
  },
})

NATIVE_PROPS = {
  /** 此图层的最低缩放级别 */
  minZoom: { type: Number },
  /** 此图层的最高缩放级别 */
  maxZoom: { type: Number },
  /** 当没有瓦片时所显示的错误图片地址 */
  errorTileUrl: { type: String },
  /** 设置图层的透明度（0.0-1.0）。默认值为 1.0不透明 */
  opacity: { type: Number },
  /** 图层的显示顺序 */
  zIndex: { type: Number },
  /** 设置指定范围内显示瓦片 */
  bounds: { type: Array as PropType<VT.Bounds>, default: () => [] },
  /** 图层服务地址 */
  url: { type: String, default: "" }
}

props = {
  offset: {
    type: [Number, String],
    default: 0
  },
  position: {
    type: String as PropType<AffixPosition>,
    default: 'top'
  },
  zIndex: Number
}

initBaseSheetProps = () => ({
  sheetType: String as PropType<SheetType>,
  dataCfg: Object as PropType<S2DataConfig>,
  themeCfg: Object as PropType<ThemeCfg>,
  showPagination: {
    type: Object as PropType<BaseSheetComponentProps['showPagination']>,
    default: false,
  },
  loading: Boolean,
  // TODO: 待后续完善
  partDrillDown: Object,
  header: Object,

  options: {
    type: Object as PropType<S2Options>,
    default: {} as S2Options,
  },
  adaptive: {
    type: Object as PropType<Adaptive>,
    default: false,
  },
  onSpreadsheet: Function as PropType<BaseSheetComponentProps['spreadsheet']>,
  onGetSpreadSheet: Function as PropType<
    BaseSheetComponentProps['getSpreadSheet']
  >,
})

props = {
  tag: {
    type: String as PropType<keyof HTMLElementTagNameMap>,
    default: 'div'
  },
  gutter: {
    type: [String, Number],
    default: 0
  },
  justify: {
    type: String as PropType<JustifyTypes>,
    default: 'start'
  },
  align: {
    type: String as PropType<AlignTypes>,
    default: 'top'
  }
}

PointsMaterial = materialComponent('PointsMaterial', { props: { type: Object as PropType<PointsMaterialPropsInterface>, default: () => ({}) } }, (opts) => new TPointsMaterial(opts))

basicProps = {
  disabled: Boolean,
  size: {
    type: String as PropType<NormalSizes>,
    default: 'medium'
  }
}

dropdownProps = {
	engine: Object as PropType<EngineInterface | undefined>,
	name: {
		type: String,
		required: true,
	} as const,
	values: [String, Array, Number] as PropType<
		string | number | Array<string>
	>,
	items: {
		type: Array as PropType<Array<DropdownListItem>>,
		default: [],
	} as const,
	icon: String,
	placement: String as PropType<Placement>,
	content: [String, Function] as PropType<
		string | ((engine?: EngineInterface) => string)
	>,
	title: String,
	disabled: {
		type: [Boolean, undefined] as PropType<boolean | undefined>,
		default: undefined,
	},
	single: {
		type: [Boolean, undefined] as PropType<boolean | undefined>,
		default: undefined,
	},
	className: String,
	direction: String as PropType<'vertical' | 'horizontal'>,
	onSelect: Function as PropType<
		(
			event: MouseEvent,
			key: string,
			engine?: EngineInterface,
		) => void | boolean
	>,
	hasArrow: {
		type: [Boolean, undefined] as PropType<boolean | undefined>,
		default: undefined,
	},
	hasDot: {
		type: [Boolean, undefined] as PropType<boolean | undefined>,
		default: undefined,
	},
}

string = tsx.component({
  props: {
    leaf: {
      type: Object as PropType<Text>
    },
    editor: Object
  },
  inject: ['isLast', 'parent', 'text'],
  components: {
    TextString
  },
  data(): providedByText {
    return {}
  },
  render() {
    const { leaf, editor, isLast, parent, text } = this
    const path = VueEditor.findPath(editor, text as Node)
    const parentPath = Path.parent(path)

    // COMPAT: Render text inside void nodes with a zero-width space.
    // So the node can contain selection but the text is not visible.
    if (editor.isVoid(parent)) {
      return <ZeroWidthString length={Node.string(parent as Node).length} />
    }

    // COMPAT: If this is the last text node in an empty block, render a zero-
    // width space that will convert into a line break when copying and pasting
    // to support expected plain text.
    if (
      leaf.text === '' &&
      (parent as Element & Editor).children[(parent as Element & Editor).children.length - 1] === text &&
      !editor.isInline(parent) &&
      Editor.string(editor, parentPath) === ''
    ) {
      return <ZeroWidthString isLineBreak={true} />
    }

    // COMPAT: If the text is empty, it's because it's on the edge of an inline
    // node, so we render a zero-width space so that the selection can be
    // inserted next to it still.
    if (leaf.text === '') {
      return <ZeroWidthString />
    }

    // COMPAT: Browsers will collapse trailing new lines at the end of blocks,
    // so we need to add an extra trailing new lines to prevent that.
    if (isLast && leaf.text.slice(-1) === '\n') {
      return <TextString isTrailing={true} text={leaf.text} />
    }

    return <TextString text={leaf.text} />
  }
})

FormKitSchema = defineComponent({
  name: 'FormKitSchema',
  props: {
    schema: {
      type: [Array, Object] as PropType<
        FormKitSchemaNode[] | FormKitSchemaCondition
      >,
      required: true,
    },
    data: {
      type: Object as PropType<Record<string, any>>,
      default: () => ({}),
    },
    library: {
      type: Object as PropType<FormKitComponentLibrary>,
      default: () => ({}),
    },
  },
  setup(props, context) {
    const instance = getCurrentInstance()
    let instanceKey = Symbol(String(i++))
    instanceScopes.set(instanceKey, [])
    let provider = parseSchema(props.library, props.schema)
    let render: RenderChildren
    let data: Record<string, any>
    // Re-parse the schema if it changes:
    watch(
      () => props.schema,
      (newSchema, oldSchema) => {
        instanceKey = Symbol(String(i++))
        provider = parseSchema(props.library, props.schema)
        render = createRenderFn(provider, data, instanceKey)
        if (newSchema === oldSchema) {
          // In this edge case, someone pushed/modified something in the schema
          // and we've successfully re-parsed, but since the schema is not
          // referenced in the render function it technically isnt a dependency
          // and we need to force a re-render since we swapped out the render
          // function completely.
          ;(instance?.proxy?.$forceUpdate as unknown as CallableFunction)()
        }
      },
      { deep: true }
    )

    // Watch the data object explicitly
    watchEffect(() => {
      data = Object.assign(reactive(props.data), {
        slots: context.slots,
      })
      render = createRenderFn(provider, data, instanceKey)
    })
    return () => render()
  },
})

UnknowProp = null as unknown as PropType<unknown>

Text = tsx.component({
  props: {
    text: {
      type: Object as PropType<SlateText>
    },
    isLast: Boolean,
    parent: {
      type: Object as PropType<Element>
    },
    decorations: {
      type: Array as PropType<Array<Range>>
    },
  },
  components: {
    leaf
  },
  inject: ['decorate', 'placeholder'],
  provide(): object {
    return {
      'text': this.text,
      'isLast': this.isLast,
      'parent': this.parent
    }
  },
  data(): Pick<providedByEditable, 'placeholder' | 'decorate'> & UseRef {
    return {
      ref: null
    }
  },
  hooks() {
    const ref = this.ref = useRef(null);
    const {text} = this;
    const editor = this.$editor;
    const key = VueEditor.findKey(editor, text)
    const initRef = () => {
      useEffect(()=>{
        if (ref.current) {
          KEY_TO_ELEMENT.set(key, ref.current)
          NODE_TO_ELEMENT.set(text, ref.current)
          ELEMENT_TO_NODE.set(ref.current, text)
        } else {
          KEY_TO_ELEMENT.delete(key)
          NODE_TO_ELEMENT.delete(text)
        }
      })
    };

    initRef()
  },
  render(h, ctx): VNode {
    const { text, placeholder } = this
    let decorations: Array<any> = this.decorations;
    if(!decorations) {
      const editor = this.$editor
      const p = VueEditor.findPath(editor, text)
      if(this.decorate) {
        decorations = this.decorate([text, p])
      }

      // init placeholder
      if (
        placeholder &&
        editor.children.length === 1 &&
        Array.from(Node.texts(editor)).length === 1 &&
        Node.string(editor) === ''
      ) {
        const start = Editor.start(editor, [])
        decorations.push({
          [PLACEHOLDER_SYMBOL]: true,
          placeholder,
          anchor: start,
          focus: start,
        })
      }
    }
    const leaves = SlateText.decorations(text, decorations)
    const children = []
    for (let i = 0; i < leaves.length; i++) {
      const leaf = leaves[i];
      children.push(
        <leaf
          leaf={leaf}
        />
        )
    }
    return (
      <span data-slate-node="text" ref={this.ref!.id}>
        {children}
      </span>
    )
  }
})

nativeProps = {
  config: {
    type: Object as PropType<Record<string, any>>,
    default: {},
  },
  classes: {
    type: Object as PropType<
      Record<string, string | Record<string, boolean> | FormKitClasses>
    >,
    required: false,
  },
  delay: {
    type: Number,
    required: false,
  },
  errors: {
    type: Array as PropType<string[]>,
    default: [],
  },
  inputErrors: {
    type: Object as PropType<Record<string, string[]>>,
    default: () => ({}),
  },
  index: {
    type: Number,
    required: false,
  },
  id: {
    type: String,
    required: false,
  },
  modelValue: {
    required: false,
  },
  name: {
    type: String,
    required: false,
  },
  parent: {
    type: Object as PropType<FormKitNode>,
    required: false,
  },
  plugins: {
    type: Array as PropType<FormKitPlugin[]>,
    default: [],
  },
  sectionsSchema: {
    type: Object as PropType<
      Record<string, Partial<FormKitSchemaNode> | FormKitSchemaCondition>
    >,
    default: {},
  },
  type: {
    type: [String, Object] as PropType<string | FormKitTypeDefinition>,
    default: 'text',
  },
  validation: {
    type: [String, Array] as PropType<
      string | Array<[rule: string, ...args: any]>
    >,
    required: false,
  },
  validationMessages: {
    type: Object as PropType<
      Record<
        string,
        | string
        | ((ctx: { node: FormKitNode; name: string; args: any[] }) => string)
      >
    >,
    required: false,
  },
  validationRules: {
    type: Object as PropType<
      Record<string, (node: FormKitNode) => boolean | Promise<boolean>>
    >,
    required: false,
  },
  validationLabel: {
    type: [String, Function] as PropType<
      string | ((node: FormKitNode) => string)
    >,
    required: false,
  },
}