vue#Component TypeScript Examples

export function mount (comp: Component, options?: object): Wrapper {
  const div = document.createElement('div')
  const app = createApp({
    render () {
      return null
    },
    ...comp
  })
  const instance = app.mount(div)
  return {
    app,
    instance,
    unmount: () => app.unmount()
  }
}

createPortal = <T>(children: Component, container?: ElementRef) => {
  const elSnapshot = unref(container) || document.createElement('div')
  const app = createApp(children)
  document.body.appendChild(elSnapshot)
  const instance = app.mount(elSnapshot) as ComponentInstance<T>
  return {
    instance
  }
}

/**
 * Determine if the given object is a vue component.
 *
 * @param obj - Object or function
 * @returns
 * @public
 */
function isComponent(obj: any): obj is Component {
  return (
    (typeof obj === 'function' && obj.length === 2) ||
    (typeof obj === 'object' &&
      !Array.isArray(obj) &&
      !('$el' in obj) &&
      !('$cmp' in obj) &&
      !('if' in obj))
  )
}

/**
 * Creates a new input from schema or a Vue component with the "standard"
 * FormKit features in place such as labels, help text, validation messages, and
 * class support.
 *
 * @param schemaOrComponent - The actual schema of the input.
 * @public
 */
export function createInput(
  schemaOrComponent: FormKitInputSchema | Component,
  definitionOptions: Partial<FormKitTypeDefinition> = {}
): FormKitTypeDefinition {
  const definition: FormKitTypeDefinition = {
    type: 'input',
    ...definitionOptions,
  }
  let schema: FormKitInputSchema | undefined = undefined
  if (isComponent(schemaOrComponent)) {
    const cmpName = `SchemaComponent${totalCreated++}`
    schema = () => ({
      $cmp: cmpName,
      props: {
        context: '$node.context',
      },
    })
    definition.library = { [cmpName]: markRaw(schemaOrComponent) }
  } else {
    schema = schemaOrComponent
  }

  // Use the default wrapping schema
  definition.schema = useSchema(schema || 'Schema undefined')
  return definition
}

export function createModalPlugin(): ModalController {
  const modals = ref<IModalItem[]>([])
  function create(component: Component) {
    const id = uuid()
    const item = {
      id,
      component: markRaw(component),
      close: () => {
        modals.value = modals.value.filter((item) => item.id !== id)
      },
    }
    modals.value.push(item)
    return item
  }
  return {
    modals,
    create,
    install(app: App) {
      const controller = this
      app.provide(key, controller)
    },
  }
}

elenext: Plugin = {
  install(app) {
    const useComponent = (component: Component) => {
      if (component.name) {
        app.component(component.name, component)
      } else {
        throw 'component need name'
      }
    }

    useComponent(ERow)
    useComponent(ECol)
    useComponent(EMenu)
    useComponent(ESubMenu)
    useComponent(EMenuItem)
    useComponent(EMenuItemGroup)

    useComponent(ELayout)
    useComponent(EAside)
    useComponent(EMain)
    useComponent(EHeader)
    useComponent(EFooter)

    useComponent(EButton)
    useComponent(EButtonGroup)
    useComponent(ELink)
    // useComponeEnt(Icon)
    useComponent(EPopper)
    useComponent(ETooltip)
    useComponent(EPopover)

    useComponent(EBreadcrumb)
    useComponent(EBreadcrumbItem)

    useComponent(EAlert)
    useComponent(EPagination)

    useComponent(EInput)
    useComponent(EInputGroup)
    useComponent(ESelect)
    useComponent(ESelectBox)
    useComponent(ESelectOption)
    useComponent(ERadio)
    useComponent(ERadioGroup)
    useComponent(ECheckbox)
    useComponent(ECheckboxGroup)
    useComponent(EColorPicker)
  },
}

private static __isComponent(v: any): v is Component {
    return !!v.type?.name && !!v.type?.setup;
  }

/**
   * 拦截所有插槽内容节点，处理后统一使用。
   * @param nodes
   * @returns
   */
  setNodes(nodes: VNode[] | null) {
    if (!isArray(nodes)) return;

    let colVNodeKey = 0;

    // 拦截所有插槽，做一下筛选和处理。保留指定插槽
    (nodes as VNode[])
      .filter(v => {
        const type = (v.type as Component)?.name;

        return (
          // 接收自定义组件，不接受原生元素
          type &&
          ParamData.__isComponent(v) &&
          // 接受 JGanttColumn 插槽，并且该插槽需要携带 label 属性
          ((ParamData.__checkType(type, Variables.name.column) &&
            !!v.props?.label) ||
            // 或者接受一个 JGanttSlider 组件。多个 JGanttSlider 保留最后一个
            ParamData.__checkType(type, Variables.name.slider))
        );
      })
      .forEach(v => {
        const type = (v.type as Component).name as string;

        // 分别对不同组件进行整理
        if (ParamData.__checkType(type, Variables.name.column)) {
          // 添加唯一 key
          // eslint-disable-next-line no-param-reassign
          v.key = colVNodeKey;
          Object.assign(v.props, { __key: colVNodeKey });

          const label: string = v.props?.label;
          const width = parseNumber(
            v.props?.width,
            Variables.size.defaultTableColumnWidth
          );

          // 添加 merge 方法，忽略第一行
          let mergeOps = v.props?.merge;
          if (v.key === 0) mergeOps = undefined;

          this.__addTHeader(
            new TableHeader().initData({
              key: colVNodeKey,
              label,
              text: v.props?.name || label,
              width
            })
          );

          this.__addCNode(
            new ColumnNode().initData({
              key: colVNodeKey,
              label,
              node: v,
              merge: mergeOps
            })
          );

          colVNodeKey += 1;
        } else if (ParamData.__checkType(type, Variables.name.slider)) {
          this.__sn = v;
        }
      });
  }

export function createRouterLayout(
  resolve: (layoutName: string) => Promise<Component | { default: Component }>,
) {
  return defineComponent({
    name: 'RouterLayout',

    async beforeRouteEnter(to, _from, next) {
      const name = to.meta.layout || 'default'
      const layoutComp = name
        ? ((await resolve(name)) as any).default
        : undefined

      next((vm: any) => {
        vm.layoutName = name
        if (name && layoutComp)
          vm.layouts[name] = layoutComp
      })
    },

    async beforeRouteUpdate(to, _from, next) {
      try {
        const name = to.meta.layout || 'default'
        if (name && !this.layouts[name])
          this.layouts[name] = ((await resolve(name)) as any).default

        this.layoutName = name
        next()
      }
      catch (error) {
        next(error)
      }
    },

    data() {
      return {
        layoutName: undefined as string | undefined,
        layouts: shallowReactive(
          Object.create(null) as Record<string, Component>,
        ),
      }
    },

    render(): VNode {
      const layout = this.layoutName && this.layouts[this.layoutName]
      if (!layout)
        return h('span')

      return h(layout as ConcreteComponent, {
        key: this.layoutName,
      })
    },
  })
}