Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit de93266

Browse files
elonehooelonehoo
committed
feat: add clipboard component with context, controls, and examples
1 parent 8b963be commit de93266

File tree

22 files changed

+482
-0
lines changed

22 files changed

+482
-0
lines changed

‎packages/vue/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@
4444
"@destyler/auto-resize": "^0.2.0",
4545
"@destyler/carousel": "^0.2.0",
4646
"@destyler/checkbox": "^0.2.0",
47+
"@destyler/clipboard": "^0.2.0",
4748
"@destyler/collapse": "^0.2.0",
4849
"@destyler/collapsible": "^0.2.0",
4950
"@destyler/collection": "^0.2.0",

‎packages/vue/src/components/clipboard/anatomy.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { anatomy as clipboardAnatomy } from '@destyler/clipboard'

‎packages/vue/src/components/clipboard/components/Context.vue‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<script lang="ts">
2+
import type { SlotsType, UnwrapRef } from 'vue'
3+
import type { UseClipboardContext } from '../composables/use-clipboard-context'
4+
5+
export interface ClipboardContextProps
6+
extends SlotsType<{
7+
default: UnwrapRef<UseClipboardContext>
8+
}> {}
9+
</script>
10+
11+
<script setup lang="ts">
12+
import { useClipboardContext } from '../composables/use-clipboard-context'
13+
14+
const clipboard = useClipboardContext()
15+
16+
defineSlots<{
17+
default(clipboard: UnwrapRef<UseClipboardContext>): unknown
18+
}>()
19+
</script>
20+
21+
<template>
22+
<slot v-bind="clipboard"></slot>
23+
</template>

‎packages/vue/src/components/clipboard/components/Control.vue‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<script lang="ts">
2+
import type { PolymorphicProps } from '~/factory'
3+
4+
export interface ClipboardControlProps extends PolymorphicProps {}
5+
</script>
6+
7+
<script setup lang="ts">
8+
import { ui } from '~/factory'
9+
import { useClipboardContext } from '../composables/use-clipboard-context'
10+
import { useForwardExpose } from '~/composables'
11+
12+
defineProps<ClipboardControlProps>()
13+
const clipboard = useClipboardContext()
14+
15+
useForwardExpose()
16+
</script>
17+
18+
<template>
19+
<ui.div v-bind="clipboard.getControlProps()" :as-child="asChild">
20+
<slot />
21+
</ui.div>
22+
</template>

‎packages/vue/src/components/clipboard/components/Indicator.vue‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<script lang="ts">
2+
import type { PolymorphicProps } from '~/factory'
3+
4+
export interface ClipboardIndicatorProps extends PolymorphicProps {}
5+
</script>
6+
7+
<script setup lang="ts">
8+
import { ui } from '~/factory'
9+
import { useClipboardContext } from '../composables/use-clipboard-context'
10+
import { useForwardExpose } from '~/composables'
11+
12+
defineProps<ClipboardIndicatorProps>()
13+
const clipboard = useClipboardContext()
14+
15+
useForwardExpose()
16+
</script>
17+
18+
<template>
19+
<ui.div v-bind="clipboard.getIndicatorProps({ copied: clipboard.copied })" :as-child="asChild">
20+
<slot name="copied" v-if="clipboard.copied" />
21+
<slot v-else />
22+
</ui.div>
23+
</template>

‎packages/vue/src/components/clipboard/components/Input.vue‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<script lang="ts">
2+
import type { PolymorphicProps } from '~/factory'
3+
4+
export interface ClipboardInputProps extends PolymorphicProps {}
5+
</script>
6+
7+
<script setup lang="ts">
8+
import { ui } from '~/factory'
9+
import { useClipboardContext } from '../composables/use-clipboard-context'
10+
import { useForwardExpose } from '~/composables'
11+
12+
defineProps<ClipboardInputProps>()
13+
const clipboard = useClipboardContext()
14+
15+
useForwardExpose()
16+
</script>
17+
18+
<template>
19+
<ui.input v-bind="clipboard.getInputProps()" :as-child="asChild"><slot /></ui.input>
20+
</template>

‎packages/vue/src/components/clipboard/components/Label.vue‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<script lang="ts">
2+
import type { PolymorphicProps } from '~/factory'
3+
4+
export interface ClipboardLabelProps extends PolymorphicProps {}
5+
</script>
6+
7+
<script setup lang="ts">
8+
import { ui } from '~/factory'
9+
import { useClipboardContext } from '../composables/use-clipboard-context'
10+
import { useForwardExpose } from '~/composables'
11+
12+
defineProps<ClipboardLabelProps>()
13+
const clipboard = useClipboardContext()
14+
15+
useForwardExpose()
16+
</script>
17+
18+
<template>
19+
<ui.label v-bind="clipboard.getLabelProps()" :as-child="asChild">
20+
<slot />
21+
</ui.label>
22+
</template>

‎packages/vue/src/components/clipboard/components/Root.vue‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<script lang="ts">
2+
import type { PolymorphicProps } from '~/factory'
3+
import type { RootEmits, RootProps } from '../types'
4+
5+
export interface ClipboardRootProps extends RootProps, PolymorphicProps {}
6+
export interface ClipboardRootEmits extends RootEmits {}
7+
</script>
8+
9+
<script setup lang="ts">
10+
import { ui } from '~/factory'
11+
import { useClipboard } from '../composables/use-clipboard'
12+
import { ClipboardProvider } from '../composables/use-clipboard-context'
13+
import { useForwardExpose } from '~/composables'
14+
15+
const props = defineProps<ClipboardRootProps>()
16+
const emits = defineEmits<ClipboardRootEmits>()
17+
18+
const clipboard = useClipboard(props, emits)
19+
ClipboardProvider(clipboard)
20+
21+
useForwardExpose()
22+
</script>
23+
24+
<template>
25+
<ui.div v-bind="clipboard.getRootProps()" :as-child="asChild">
26+
<slot />
27+
</ui.div>
28+
</template>

‎packages/vue/src/components/clipboard/components/RootProvider.vue‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<script lang="ts">
2+
import type { UnwrapRef } from 'vue'
3+
import type { PolymorphicProps } from '~/factory'
4+
import type { UseClipboardReturn } from '../composables/use-clipboard'
5+
6+
interface RootProviderProps {
7+
value: UnwrapRef<UseClipboardReturn>
8+
}
9+
10+
export interface ClipboardRootProviderProps extends RootProviderProps, PolymorphicProps {}
11+
</script>
12+
13+
<script setup lang="ts">
14+
import { computed } from 'vue'
15+
import { ui } from '~/factory'
16+
import { ClipboardProvider } from '../composables/use-clipboard-context'
17+
import { useForwardExpose } from '~/composables'
18+
19+
const props = defineProps<ClipboardRootProviderProps>()
20+
const clipboard = computed(() => props.value)
21+
22+
ClipboardProvider(clipboard)
23+
24+
useForwardExpose()
25+
</script>
26+
27+
<template>
28+
<ui.div v-bind="clipboard.getRootProps()" :as-child="asChild">
29+
<slot />
30+
</ui.div>
31+
</template>

‎packages/vue/src/components/clipboard/components/Trigger.vue‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<script lang="ts">
2+
import type { PolymorphicProps } from '~/factory'
3+
4+
export interface ClipboardTriggerProps extends PolymorphicProps {}
5+
</script>
6+
7+
<script setup lang="ts">
8+
import { ui } from '~/factory'
9+
import { useClipboardContext } from '../composables/use-clipboard-context'
10+
import { useForwardExpose } from '~/composables'
11+
12+
defineProps<ClipboardTriggerProps>()
13+
const clipboard = useClipboardContext()
14+
15+
useForwardExpose()
16+
</script>
17+
18+
<template>
19+
<ui.button v-bind="clipboard.getTriggerProps()" :as-child="asChild">
20+
<slot />
21+
</ui.button>
22+
</template>

0 commit comments

Comments
 (0)