feat(dynamic): add dynamic components and context management

Author: elonehoo

packages/vue/package.json

@@ -53,6 +53,7 @@
     "@destyler/combobox": "catalog:prod",
     "@destyler/dialog": "catalog:prod",
     "@destyler/dom": "catalog:prod",
+    "@destyler/dynamic": "catalog:prod",
     "@destyler/edit": "catalog:prod",
     "@destyler/file-upload": "catalog:prod",
     "@destyler/focus-trap": "catalog:prod",

packages/vue/src/components/dynamic/anatomy.ts

@@ -0,0 +1 @@
+export { anatomy as dynamicAnatomy } from '@destyler/dynamic'

packages/vue/src/components/dynamic/components/ClearTrigger.vue

@@ -0,0 +1,26 @@
+<script lang="ts">
+import type { PolymorphicProps } from '~/factory'
+
+export interface DynamicClearTriggerProps extends PolymorphicProps {}
+</script>
+
+<script setup lang="ts">
+import { ui } from '~/factory'
+import { useDynamicContext } from '../composables/use-dynamic-context'
+import { useForwardExpose } from '~/composables'
+
+defineOptions({
+  name: 'DynamicClearTrigger'
+})
+
+defineProps<DynamicClearTriggerProps>()
+const dynamic = useDynamicContext()
+
+useForwardExpose()
+</script>
+
+<template>
+  <ui.button v-bind="dynamic.getClearTriggerProps()" :as-child="asChild">
+    <slot />
+  </ui.button>
+</template>

packages/vue/src/components/dynamic/components/Context.vue

@@ -0,0 +1,27 @@
+<script lang="ts">
+import type { SlotsType, UnwrapRef } from 'vue'
+import type { UseDynamicContext } from '../composables/use-dynamic-context'
+
+export interface DynamicContextProps
+  extends SlotsType<{
+    default: UnwrapRef<UseDynamicContext>
+  }> {}
+</script>
+
+<script setup lang="ts">
+import { useDynamicContext } from '../composables/use-dynamic-context'
+
+defineOptions({
+  name: 'DynamicContext'
+})
+
+const dynamic = useDynamicContext()
+
+defineSlots<{
+  default(dynamic: UnwrapRef<UseDynamicContext>): unknown
+}>()
+</script>
+
+<template>
+  <slot v-bind="dynamic"></slot>
+</template>

packages/vue/src/components/dynamic/components/Control.vue

@@ -0,0 +1,26 @@
+<script lang="ts">
+import type { PolymorphicProps } from '~/factory'
+
+export interface DynamicControlProps extends PolymorphicProps {}
+</script>
+
+<script setup lang="ts">
+import { ui } from '~/factory'
+import { useDynamicContext } from '../composables/use-dynamic-context'
+import { useForwardExpose } from '~/composables'
+
+defineOptions({
+  name: 'DynamicControl'
+})
+
+defineProps<DynamicControlProps>()
+const dynamic = useDynamicContext()
+
+useForwardExpose()
+</script>
+
+<template>
+  <ui.div v-bind="dynamic.getControlProps()" :as-child="asChild">
+    <slot />
+  </ui.div>
+</template>

packages/vue/src/components/dynamic/components/HiddenInput.vue

@@ -0,0 +1,29 @@
+<script lang="ts">
+import type { PolymorphicProps } from '~/factory'
+
+export interface DynamicHiddenInputProps extends PolymorphicProps {}
+</script>
+
+<script setup lang="ts">
+import { ui } from '~/factory'
+import { useDynamicContext } from '../composables/use-dynamic-context'
+import { useFieldContext } from '~/components/field'
+import { useForwardExpose } from '~/composables'
+
+defineOptions({
+  name: 'DynamicHiddenInput'
+})
+
+defineProps<DynamicHiddenInputProps>()
+
+const dynamic = useDynamicContext()
+const field = useFieldContext()
+
+useForwardExpose()
+</script>
+
+<template>
+  <ui.input :aria-describedby="field?.ariaDescribedby" v-bind="dynamic.getHiddenInputProps()" :as-child="asChild">
+    <slot />
+  </ui.input>
+</template>

packages/vue/src/components/dynamic/components/Input.vue

@@ -0,0 +1,24 @@
+<script lang="ts">
+import type { PolymorphicProps } from '~/factory'
+
+export interface DynamicInputProps extends PolymorphicProps {}
+</script>
+
+<script setup lang="ts">
+import { ui } from '~/factory'
+import { useDynamicContext } from '../composables/use-dynamic-context'
+import { useForwardExpose } from '~/composables'
+
+defineOptions({
+  name: 'DynamicInput'
+})
+
+defineProps<DynamicInputProps>()
+const dynamic = useDynamicContext()
+
+useForwardExpose()
+</script>
+
+<template>
+  <ui.input v-bind="dynamic.getInputProps()" :as-child="asChild"><slot /></ui.input>
+</template>

packages/vue/src/components/dynamic/components/Item.vue

@@ -0,0 +1,33 @@
+<script lang="ts">
+import type { ItemProps } from '@destyler/dynamic'
+import type { PolymorphicProps } from '~/factory'
+
+export interface DynamicItemProps extends ItemProps, PolymorphicProps {}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { ui } from '~/factory'
+import { useDynamicContext } from '../composables/use-dynamic-context'
+import { DynamicItemProvider } from '../composables/use-dynamic-item-context'
+import { DynamicItemPropsProvider } from '../composables/use-dynamic-item-props-context'
+import { useForwardExpose } from '~/composables'
+
+defineOptions({
+  name: 'DynamicItem'
+})
+
+const props = defineProps<DynamicItemProps>()
+const dynamic = useDynamicContext()
+
+DynamicItemPropsProvider(props)
+DynamicItemProvider(computed(() => dynamic.value.getItemState(props)))
+
+useForwardExpose()
+</script>
+
+<template>
+  <ui.div v-bind="dynamic.getItemProps(props)" :as-child="asChild">
+    <slot />
+  </ui.div>
+</template>

packages/vue/src/components/dynamic/components/ItemContext.vue

@@ -0,0 +1,27 @@
+<script lang="ts">
+import type { SlotsType, UnwrapRef } from 'vue'
+import type { UseDynamicItemContext } from '../composables/use-dynamic-item-context'
+
+export interface DynamicItemContextProps
+  extends SlotsType<{
+    default: UnwrapRef<UseDynamicItemContext>
+  }> {}
+</script>
+
+<script setup lang="ts">
+import { useDynamicItemContext } from '../composables/use-dynamic-item-context'
+
+defineOptions({
+  name: 'DynamicItemContext'
+})
+
+const dynamic = useDynamicItemContext()
+
+defineSlots<{
+  default(dynamic: UnwrapRef<UseDynamicItemContext>): unknown
+}>()
+</script>
+
+<template>
+  <slot v-bind="dynamic"></slot>
+</template>

packages/vue/src/components/dynamic/components/ItemDeleteTrigger.vue

@@ -0,0 +1,28 @@
+<script lang="ts">
+import type { PolymorphicProps } from '~/factory'
+
+export interface DynamicItemDeleteTriggerProps extends PolymorphicProps {}
+</script>
+
+<script setup lang="ts">
+import { ui } from '~/factory'
+import { useDynamicContext } from '../composables/use-dynamic-context'
+import { useDynamicItemPropsContext } from '../composables/use-dynamic-item-props-context'
+import { useForwardExpose } from '~/composables'
+
+defineOptions({
+  name: 'DynamicItemDeleteTrigger'
+})
+
+defineProps<DynamicItemDeleteTriggerProps>()
+const dynamic = useDynamicContext()
+const itemProps = useDynamicItemPropsContext()
+
+useForwardExpose()
+</script>
+
+<template>
+  <ui.button v-bind="dynamic.getItemDeleteTriggerProps(itemProps)" :as-child="asChild">
+    <slot />
+  </ui.button>
+</template>