>]: ExtractPropTypes[PP]
26 | } & { [PP in keyof Pick>]?: ExtractPropTypes[PP] }) | (Ref<({
27 | [PP in keyof Pick>]: ExtractPropTypes[PP]
28 | } & { [PP in keyof Pick>]?: ExtractPropTypes[PP] })>) : {}) : {}) : FunctionalComponentPropTypes
29 |
30 | export interface VueC2CComposableReturn {
31 | exposed: Ref ? EXPOSE : {}>
32 | visible: Ref
33 | show: () => void
34 | hide: () => void
35 | toggle: () => void
36 | }
37 | export interface VueC2CComposableOptions {
38 | emits?: T extends ComponentConstructor ? ComponentEmitTypes['$emit']> : FunctionalComponentEmitTypes>
39 | }
40 |
41 | export type VueC2COptions = {
42 | /**
43 | * Display style of the component.
44 | * @default 'v-if'
45 | */
46 | display?: 'v-if' | 'v-show'
47 | /**
48 | * Visible of the component.
49 | * @default false
50 | */
51 | visible?: boolean
52 | /**
53 | * Return a placeholder component that allows specifying the insertion position.
54 | * @default false
55 | */
56 | withPlaceholder?: T
57 | } & (T extends false ? {
58 | /**
59 | * Function that returns an HTMLElement where the component should be appended to.
60 | * @default ()=> document.body
61 | */
62 | appendTo?: () => HTMLElement
63 | } : {})
64 |
65 | export type VueC2CReturn = (props?: ComponentPropTypes, opt?: VueC2CComposableOptions) => VueC2CComposableReturn & (PLACEHOLDER extends true ? { Placeholder: ShallowRef } : {})
66 |
--------------------------------------------------------------------------------
/test/index.test.ts:
--------------------------------------------------------------------------------
1 | import { expect, expectTypeOf, it } from 'vitest'
2 | import type { Ref } from 'vue'
3 | import { defineComponent, h, nextTick, ref } from 'vue'
4 | import { mount } from '@vue/test-utils'
5 | import { c2c } from '../src'
6 |
7 | const Confirm = defineComponent({
8 | props: {
9 | content: {
10 | type: String,
11 | required: true,
12 | },
13 | },
14 | emits: ['submit', 'cancel'],
15 | setup(props) {
16 | return () => h('div', null, props.content)
17 | },
18 | })
19 |
20 | it('should work', () => {
21 | const useConfirm = c2c(Confirm)
22 | const props = ref({
23 | content: 'Hi',
24 | })
25 |
26 | const { visible, toggle } = useConfirm(props)
27 |
28 | expect(visible.value).toBe(false)
29 | toggle()
30 | expect(visible.value).toBe(true)
31 | })
32 |
33 | it('should work w/ withPlaceholder option', async () => {
34 | const useConfirm = c2c(Confirm, {
35 | withPlaceholder: true,
36 | })
37 | const props = ref({
38 | content: 'Hi',
39 | })
40 | const { toggle, Placeholder } = useConfirm(props, {
41 | emits: {
42 | onSubmit: () => { },
43 | },
44 | })
45 |
46 | const wrapper = mount({
47 | render() {
48 | return h('div', null, [
49 | h(Placeholder.value, null, () => 'Hi'),
50 | ])
51 | },
52 | })
53 |
54 | expectTypeOf(useConfirm).parameter(0).toEqualTypeOf<({
55 | content: string
56 | } | Ref<{
57 | content: string
58 | }> | undefined)>()
59 |
60 | expect(wrapper.text()).toBe('')
61 | toggle()
62 | await nextTick()
63 | expect(wrapper.text()).toBe('Hi')
64 | props.value.content = 'Hello'
65 | await nextTick()
66 | expect(wrapper.text()).toBe('Hello')
67 | })
68 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es2018",
4 | "module": "esnext",
5 | "lib": ["esnext", "dom"],
6 | "moduleResolution": "node",
7 | "esModuleInterop": true,
8 | "strict": true,
9 | "strictNullChecks": true,
10 | "resolveJsonModule": true,
11 | "skipLibCheck": true,
12 | "skipDefaultLibCheck": true
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/vitest.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import Vue from '@vitejs/plugin-vue'
3 |
4 | export default defineConfig({
5 | plugins: [
6 | Vue(),
7 | ],
8 | test: {
9 | environment: 'happy-dom',
10 | },
11 | })
12 |
--------------------------------------------------------------------------------
/vue-c2c.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/webfansplz/vue-c2c/8f87238e748f8270c8a807b1ad6f8236f92c95d3/vue-c2c.png
--------------------------------------------------------------------------------
14 | 
19 |