@vrojs/element-plus 0.0.1

package/src/vro-el-with-config/README.md

@@ -0,0 +1,75 @@
+# VroElWithConfig
+
+### 介绍
+
+用于给局部内容或动态组件同时包裹 `ElConfigProvider` 和 `VroElConfigProvider`。传入 `is` 时会渲染对应动态组件，并将 `attrs`、插槽透传给内部组件；未传入 `is` 时直接渲染默认插槽。
+
+## 代码演示
+
+### 基础用法
+
+```html
+<vro-el-with-config :el-config-props="{ size: 'large' }">
+  <el-button>按钮</el-button>
+</vro-el-with-config>
+```
+
+### Vro 文案配置
+
+```html
+<vro-el-with-config :vro-config-props="{ locale }">
+  <app />
+</vro-el-with-config>
+```
+
+### 动态组件
+
+```html
+<vro-el-with-config :is="ElButton" :el-config-props="{ size: 'small' }" type="primary">
+  动态按钮
+</vro-el-with-config>
+```
+
+## API
+
+### 属性 Props
+
+<table>
+  <tbody>
+    <tr>
+      <td>名称</td>
+      <td>类型</td>
+      <td>默认值</td>
+    </tr>
+    <tr v-for="(item, key) in vroElWithConfigProps" :key="key">
+      <td>{{ key }}</td>
+      <td>{{ parseType(item.type || item) }}</td>
+      <td>{{ reserve(item.default, '-') }}</td>
+    </tr>
+  </tbody>
+</table>
+
+### 插槽 Slots
+
+<table>
+  <tbody>
+    <tr>
+      <td>名称</td>
+      <td>说明</td>
+    </tr>
+    <tr>
+      <td>default</td>
+      <td>默认内容；传入 is 时会透传给动态组件</td>
+    </tr>
+  </tbody>
+</table>
+
+### 实例代理
+
+传入 `is` 时，组件实例会代理内部动态组件暴露的方法和属性。
+
+<script setup lang="ts">
+  import { reserve } from '@daysnap/utils'
+  import { VroElWithConfig, vroElWithConfigProps } from '.'
+  import { parseType } from '../utils'
+</script>

package/src/vro-el-with-config/index.ts

@@ -0,0 +1,16 @@
+import { withInstall } from '@vrojs/base'
+
+import Component from './vro-el-with-config.vue'
+
+export * from './types'
+
+export const VroElWithConfig = withInstall<typeof Component>(Component)
+export default VroElWithConfig
+
+export type VroElWithConfigInstance = InstanceType<typeof VroElWithConfig>
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    VroElWithConfig: typeof VroElWithConfig
+  }
+}

package/src/vro-el-with-config/style/css.ts

@@ -0,0 +1,3 @@
+import '../../style/base.scss'
+import '../../vro-el-config-provider/style/css'
+import './index.scss'

package/src/vro-el-with-config/style/deps.ts

@@ -0,0 +1,2 @@
+import '../../vro-el-config-provider/style/deps'
+import 'element-plus/es/components/config-provider/style/css'

package/src/vro-el-with-config/style/index.ts

@@ -0,0 +1,2 @@
+import './deps'
+import './css'

package/src/vro-el-with-config/types.ts

@@ -0,0 +1,18 @@
+import type { ConfigProviderProps } from 'element-plus'
+import type { Component, ExtractPropTypes, PropType } from 'vue'
+
+import type { VroElConfigProviderProps } from '../vro-el-config-provider'
+
+export const vroElWithConfigProps = {
+  elConfigProps: {
+    type: Object as PropType<Partial<ConfigProviderProps>>,
+    default: () => ({}),
+  },
+  vroConfigProps: {
+    type: Object as PropType<Partial<VroElConfigProviderProps>>,
+    default: () => ({}),
+  },
+  is: [String, Object] as PropType<string | Component>,
+}
+
+export type VroElWithConfigProps = ExtractPropTypes<typeof vroElWithConfigProps>

package/src/vro-el-with-config/vro-el-with-config.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+  import { ElConfigProvider } from 'element-plus'
+  import { h, ref, useAttrs, useSlots } from 'vue'
+
+  import { VroElConfigProvider } from '../vro-el-config-provider'
+  import { vroElWithConfigProps } from './types'
+
+  defineOptions({ name: 'VroElWithConfig' })
+
+  const props = defineProps(vroElWithConfigProps)
+  const attrs = useAttrs()
+  const slots = useSlots()
+
+  const refComponent = ref<any>()
+
+  defineExpose(
+    new Proxy(
+      {},
+      {
+        get(_target, prop) {
+          return refComponent.value?.[prop]
+        },
+        has(_target, prop) {
+          return refComponent.value ? prop in refComponent.value : false
+        },
+      },
+    ),
+  )
+
+  const renderContent = () => {
+    if (props.is) {
+      return h(props.is, { ...attrs, ref: refComponent }, slots)
+    }
+
+    return slots.default?.()
+  }
+
+  const renderVroConfigProvider = () =>
+    h(VroElConfigProvider, props.vroConfigProps, {
+      default: renderContent,
+    })
+
+  const Render = () => h(ElConfigProvider, props.elConfigProps, renderVroConfigProvider)
+</script>
+
+<template>
+  <Render />
+</template>