Skip to content

Commit 9ce9f36

Browse files
hoorayhooray
committed
新增 FaImagePreview 组件，并移除 ImagePreview 组件
1 parent e2c0eb5 commit 9ce9f36

File tree

15 files changed

+455
-72
lines changed

15 files changed

+455
-72
lines changed

‎src/components/ImagePreview/index.vue‎

Lines changed: 0 additions & 63 deletions
This file was deleted.

‎src/router/modules/component.example.ts‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,14 @@ const routes: RouteRecordRaw = {
110110
title: '悬浮卡片',
111111
},
112112
},
113+
{
114+
path: 'imagepreview',
115+
name: 'componentExampleBuiltInImagePreview',
116+
component: () => import('@/views/component_built_in_example/imagepreview.vue'),
117+
meta: {
118+
title: '图片预览',
119+
},
120+
},
113121
{
114122
path: 'input',
115123
name: 'componentExampleBuiltInInput',
@@ -271,14 +279,6 @@ const routes: RouteRecordRaw = {
271279
title: '上传',
272280
},
273281
},
274-
{
275-
path: 'imagepreview',
276-
name: 'componentExampleExtendImagePreview',
277-
component: () => import('@/views/component_extend_example/image.preview.vue'),
278-
meta: {
279-
title: '图片预览',
280-
},
281-
},
282282
{
283283
path: 'pcas',
284284
name: 'componentExampleExtendPcas',

‎src/types/components.d.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ declare module 'vue' {
2424
FaFixedActionBar: typeof import('./../ui/components/FaFixedActionBar/index.vue')['default']
2525
FaHoverCard: typeof import('./../ui/components/FaHoverCard/index.vue')['default']
2626
FaIcon: typeof import('./../ui/components/FaIcon/index.vue')['default']
27+
FaImagePreview: typeof import('./../ui/components/FaImagePreview/index.vue')['default']
2728
FaInput: typeof import('./../ui/components/FaInput/index.vue')['default']
2829
FaKbd: typeof import('./../ui/components/FaKbd/index.vue')['default']
2930
FaMaskScrollContainer: typeof import('./../ui/components/FaMaskScrollContainer/index.vue')['default']
@@ -47,7 +48,6 @@ declare module 'vue' {
4748
FaToast: typeof import('./../ui/components/FaToast/index.vue')['default']
4849
FaTooltip: typeof import('./../ui/components/FaTooltip/index.vue')['default']
4950
FileUpload: typeof import('./../components/FileUpload/index.vue')['default']
50-
ImagePreview: typeof import('./../components/ImagePreview/index.vue')['default']
5151
ImagesUpload: typeof import('./../components/ImagesUpload/index.vue')['default']
5252
ImageUpload: typeof import('./../components/ImageUpload/index.vue')['default']
5353
RouterLink: typeof import('vue-router')['RouterLink']

‎src/ui/components/FaImagePreview/dialog/Dialog.vue‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<script setup lang="ts">
2+
import { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'reka-ui'
3+
4+
const props = defineProps<DialogRootProps>()
5+
const emits = defineEmits<DialogRootEmits>()
6+
7+
const forwarded = useForwardPropsEmits(props, emits)
8+
</script>
9+
10+
<template>
11+
<DialogRoot v-bind="forwarded">
12+
<slot />
13+
</DialogRoot>
14+
</template>

‎src/ui/components/FaImagePreview/dialog/DialogClose.vue‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<script setup lang="ts">
2+
import { DialogClose, type DialogCloseProps } from 'reka-ui'
3+
4+
const props = defineProps<DialogCloseProps>()
5+
</script>
6+
7+
<template>
8+
<DialogClose v-bind="props">
9+
<slot />
10+
</DialogClose>
11+
</template>

‎src/ui/components/FaImagePreview/dialog/DialogContent.vue‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<script setup lang="ts">
2+
import type { HTMLAttributes } from 'vue'
3+
import { reactiveOmit } from '@vueuse/core'
4+
import { X } from 'lucide-vue-next'
5+
import {
6+
DialogClose,
7+
DialogContent,
8+
type DialogContentEmits,
9+
type DialogContentProps,
10+
DialogOverlay,
11+
DialogPortal,
12+
useForwardPropsEmits,
13+
} from 'reka-ui'
14+
import { cn } from '@/utils'
15+
16+
const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
17+
const emits = defineEmits<DialogContentEmits & { animationEnd: [] }>()
18+
19+
const delegatedProps = reactiveOmit(props, 'class')
20+
21+
const forwarded = useForwardPropsEmits(delegatedProps, emits)
22+
</script>
23+
24+
<template>
25+
<DialogPortal>
26+
<DialogOverlay
27+
class="fixed inset-0 z-2000 data-[state=closed]:animate-out data-[state=open]:animate-in bg-black/80 data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0"
28+
/>
29+
<DialogContent
30+
v-bind="forwarded"
31+
:class="
32+
cn(
33+
'fixed z-2000 inset-0 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
34+
props.class,
35+
)"
36+
@animationend="emits('animationEnd')"
37+
>
38+
<slot />
39+
40+
<DialogClose
41+
class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-ring"
42+
>
43+
<X class="h-8 w-8" />
44+
<span class="sr-only">Close</span>
45+
</DialogClose>
46+
</DialogContent>
47+
</DialogPortal>
48+
</template>

‎src/ui/components/FaImagePreview/dialog/DialogDescription.vue‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<script setup lang="ts">
2+
import type { HTMLAttributes } from 'vue'
3+
import { reactiveOmit } from '@vueuse/core'
4+
import { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'reka-ui'
5+
import { cn } from '@/utils'
6+
7+
const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
8+
9+
const delegatedProps = reactiveOmit(props, 'class')
10+
11+
const forwardedProps = useForwardProps(delegatedProps)
12+
</script>
13+
14+
<template>
15+
<DialogDescription
16+
v-bind="forwardedProps"
17+
:class="cn('text-sm text-muted-foreground', props.class)"
18+
>
19+
<slot />
20+
</DialogDescription>
21+
</template>

‎src/ui/components/FaImagePreview/dialog/DialogFooter.vue‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<script setup lang="ts">
2+
import type { HTMLAttributes } from 'vue'
3+
import { cn } from '@/utils'
4+
5+
const props = defineProps<{ class?: HTMLAttributes['class'] }>()
6+
</script>
7+
8+
<template>
9+
<div
10+
:class="
11+
cn(
12+
'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
13+
props.class,
14+
)
15+
"
16+
>
17+
<slot />
18+
</div>
19+
</template>

‎src/ui/components/FaImagePreview/dialog/DialogHeader.vue‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<script setup lang="ts">
2+
import type { HTMLAttributes } from 'vue'
3+
import { cn } from '@/utils'
4+
5+
const props = defineProps<{
6+
class?: HTMLAttributes['class']
7+
}>()
8+
</script>
9+
10+
<template>
11+
<div
12+
:class="cn('flex flex-col gap-y-1.5 text-center sm:text-left', props.class)"
13+
>
14+
<slot />
15+
</div>
16+
</template>

‎src/ui/components/FaImagePreview/dialog/DialogScrollContent.vue‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<script setup lang="ts">
2+
import type { HTMLAttributes } from 'vue'
3+
import { reactiveOmit } from '@vueuse/core'
4+
import { X } from 'lucide-vue-next'
5+
import {
6+
DialogClose,
7+
DialogContent,
8+
type DialogContentEmits,
9+
type DialogContentProps,
10+
DialogOverlay,
11+
DialogPortal,
12+
useForwardPropsEmits,
13+
} from 'reka-ui'
14+
import { cn } from '@/utils'
15+
16+
const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
17+
const emits = defineEmits<DialogContentEmits>()
18+
19+
const delegatedProps = reactiveOmit(props, 'class')
20+
21+
const forwarded = useForwardPropsEmits(delegatedProps, emits)
22+
</script>
23+
24+
<template>
25+
<DialogPortal>
26+
<DialogOverlay
27+
class="fixed inset-0 z-50 grid data-[state=closed]:animate-out data-[state=open]:animate-in place-items-center overflow-y-auto bg-black/80 data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0"
28+
>
29+
<DialogContent
30+
:class="
31+
cn(
32+
'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
33+
props.class,
34+
)
35+
"
36+
v-bind="forwarded"
37+
@pointer-down-outside="(event) => {
38+
const originalEvent = event.detail.originalEvent;
39+
const target = originalEvent.target as HTMLElement;
40+
if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {
41+
event.preventDefault();
42+
}
43+
}"
44+
>
45+
<slot />
46+
47+
<DialogClose
48+
class="absolute right-3 top-3 rounded-md p-0.5 transition-colors hover:bg-secondary"
49+
>
50+
<X class="h-4 w-4" />
51+
<span class="sr-only">Close</span>
52+
</DialogClose>
53+
</DialogContent>
54+
</DialogOverlay>
55+
</DialogPortal>
56+
</template>

0 commit comments

Comments
 (0)