Skip to content

Commit

Permalink
fix(modal): fix width and height
Browse files Browse the repository at this point in the history
  • Loading branch information
@qianmoQ
qianmoQ committed Nov 7, 2024
1 parent 9ba105d commit 456ecc1
Show file tree
Hide file tree
Showing 7 changed files with 55 additions and 133 deletions.
52 changes: 26 additions & 26 deletions docs/components/modal.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ const modal = ref(false);

:::

## Custom Title
## Title

<CodeRunner title="Custom Title"
description="Create a modal with custom title.">
Expand Down Expand Up @@ -93,7 +93,7 @@ const modal = ref(false);

:::

## Custom Footer
## Footer

<CodeRunner title="Custom Footer">
<ShadcnButton @click="customFooterModal = true">Click</ShadcnButton>
Expand Down Expand Up @@ -123,7 +123,7 @@ const modal = ref(false);

:::

## Custom Content
## Content

<CodeRunner title="Custom Content">
<ShadcnButton @click="customContentModal = true">Click</ShadcnButton>
Expand Down Expand Up @@ -151,11 +151,11 @@ const modal = ref(false);

:::

## Custom Width
## Width

<CodeRunner title="Custom Width">
<ShadcnButton @click="customWidthModal = true">Click</ShadcnButton>
<ShadcnModal v-model="customWidthModal" title="Custom Width" :width="20">
<ShadcnModal v-model="customWidthModal" title="Custom Width" width="200">
<div class="flex items-center justify-center h-32">Content</div>
</ShadcnModal>
</CodeRunner>
Expand All @@ -165,7 +165,7 @@ const modal = ref(false);
```vue
<template>
<ShadcnButton @click="modal = true">Click</ShadcnButton>
<ShadcnModal v-model="modal" title="Custom Width" :width="20">
<ShadcnModal v-model="modal" title="Custom Width" width="200">
<div class="flex items-center justify-center h-32">Content</div>
</ShadcnModal>
</template>
Expand All @@ -179,11 +179,11 @@ const modal = ref(false);

:::

## Custom Height
## Height

<CodeRunner title="Custom Height">
<ShadcnButton @click="customHeightModal = true">Click</ShadcnButton>
<ShadcnModal v-model="customHeightModal" title="Custom Height" :height="20">
<ShadcnModal v-model="customHeightModal" title="Custom Height" height="200">
<div class="flex items-center justify-center h-32">Content</div>
</ShadcnModal>
</CodeRunner>
Expand All @@ -193,7 +193,7 @@ const modal = ref(false);
```vue
<template>
<ShadcnButton @click="modal = true">Click</ShadcnButton>
<ShadcnModal v-model="modal" title="Custom Height" :height="20">
<ShadcnModal v-model="modal" title="Custom Height" height="200">
<div class="flex items-center justify-center h-32">Content</div>
</ShadcnModal>
</template>
Expand All @@ -213,11 +213,11 @@ const modal = ref(false);

<CodeRunner title="Closeable and No Closeable">
<ShadcnButton @click="closeableModal = true">Closeable</ShadcnButton>
<ShadcnModal v-model="closeableModal" title="Closeable" closeable>
<ShadcnModal v-model="closeableModal" title="Closeable" closable>
<div class="flex items-center justify-center h-32">Content</div>
</ShadcnModal>
<ShadcnButton @click="noClosableModal = true">No Closeable</ShadcnButton>
<ShadcnModal v-model="noClosableModal" title="Not Closeable" :closeable="false">
<ShadcnModal v-model="noClosableModal" title="Not Closeable" :closable="false">
<div class="flex items-center justify-center h-32">Content</div>
</ShadcnModal>
<ShadcnButton @click="customClosableModal = true">Custom Closable</ShadcnButton>
Expand All @@ -234,11 +234,11 @@ const modal = ref(false);
```vue
<template>
<ShadcnButton @click="closeableModal = true">Closeable</ShadcnButton>
<ShadcnModal v-model="closeableModal" title="Closeable" closeable>
<ShadcnModal v-model="closeableModal" title="Closeable" closable>
<div class="flex items-center justify-center h-32">Content</div>
</ShadcnModal>
<ShadcnButton @click="noClosableModal = true">No Closeable</ShadcnButton>
<ShadcnModal v-model="noClosableModal" title="Not Closeable" :closeable="false">
<ShadcnModal v-model="noClosableModal" title="Not Closeable" :closable="false">
<div class="flex items-center justify-center h-32">Content</div>
</ShadcnModal>
<ShadcnButton @click="customClosableModal = true">Custom Closable</ShadcnButton>
Expand All @@ -259,33 +259,33 @@ const customClosableModal = ref(false);

:::

## API Attributes
## Props

<ApiTable title="Modal Props"
:headers="['Attribute', 'Description', 'Type', 'Default Value', 'Depend', 'List']"
:headers="['Attribute', 'Description', 'Type', 'Default Value', 'Depend']"
:columns="[
['modelValue', 'Whether the dialog box is displayed or not, v-model can be used to bind data in two directions.', 'Boolean', 'false', '-', '-'],
['title', 'The title of the dialog box. If the page header is customized using slot, the title will be invalid.', 'String', '-', '-', '-'],
['description', 'Modal description', 'String', '-', 'title', '-'],
['width', 'Modal width', 'Number', '30', '-', '10, 20, 30, 40, 50, 60, 70, 80, 90, 100'],
['height', 'Modal height', 'Number', '30', '-', '10, 20, 30, 40, 50, 60, 70, 80, 90, 100'],
['okText', 'The text of the OK button', 'String', 'OK', '-', '-'],
['cancelText', 'The text of the Cancel button', 'String', 'Cancel', '-', '-'],
['closable', 'Whether the dialog box can be closed', 'Boolean', 'true', '-', '-'],
['modelValue', 'Whether the dialog box is displayed or not, v-model can be used to bind data in two directions.', 'boolean', 'false', '-'],
['title', 'The title of the dialog box. If the page header is customized using slot, the title will be invalid.', 'string', '-', '-'],
['description', 'Modal description', 'string', '-', 'title'],
['width', 'Modal width', 'number | string', '30%', '-'],
['height', 'Modal height', 'number | string', '10%', '-'],
['okText', 'The text of the OK button', 'string', 'OK', '-'],
['cancelText', 'The text of the Cancel button', 'string', 'Cancel', '-'],
['closable', 'Whether the dialog box can be closed', 'boolean', 'true', '-'],
]">
</ApiTable>

<br />
## Events

<ApiTable title="Modal Events"
:headers="['Event', 'Description', 'Callback Parameters']"
:columns="[
['update:modelValue', 'Triggered when display status changes', 'true / false'],
['update:modelValue', 'Triggered when display status changes', 'true | false'],
['on-close', 'Triggered when the dialog box is closed', '-'],
]">
</ApiTable>

<br />
## Slots

<ApiTable title="Modal Slots"
:headers="['Slot', 'Description']"
Expand Down
85 changes: 6 additions & 79 deletions src/App.vue
View file
Original file line number Diff line number Diff line change
@@ -1,85 +1,12 @@
<template>
<ShadcnButton @click="defaultValue = !defaultValue">Open</ShadcnButton>
<ShadcnDrawer v-model="defaultValue" title="Title">
<ShadcnTooltip content="Position" position="top">
<ShadcnButton>Top</ShadcnButton>
</ShadcnTooltip>
<ShadcnTooltip content="Position" position="bottom">
<ShadcnButton>Bottom</ShadcnButton>
</ShadcnTooltip>
<ShadcnTooltip content="Position" position="left">
<ShadcnButton>Left</ShadcnButton>
</ShadcnTooltip>
<ShadcnTooltip content="Position" class="mr-20" position="right">
<ShadcnButton>Right</ShadcnButton>
</ShadcnTooltip>
<template #footer>
<ShadcnButton @click="defaultValue = !defaultValue">Close</ShadcnButton>
</template>
</ShadcnDrawer>
<ShadcnTooltip :content="content" position="top">
<ShadcnButton>Top</ShadcnButton>
</ShadcnTooltip>
<div class="mt-12"/>
<ShadcnTooltip :content="content" position="left">
<ShadcnButton>Left</ShadcnButton>
</ShadcnTooltip>

<div class="flex h-screen bg-green-50">
<div class="mx-36 my-36">

<ShadcnTooltip content="Position" position="top" delay="500">
<ShadcnButton>Top Delay</ShadcnButton>
</ShadcnTooltip>

<ShadcnSpace wrap>
<ShadcnTooltip arrow content="Position" position="top">
<ShadcnButton>Top</ShadcnButton>
</ShadcnTooltip>
<ShadcnTooltip arrow :content="content" position="top">
<ShadcnButton>Top</ShadcnButton>
</ShadcnTooltip>
<ShadcnTooltip arrow :content="content" position="bottom">
<ShadcnButton>Bottom</ShadcnButton>
</ShadcnTooltip>
<ShadcnTooltip arrow :content="content" position="left">
<ShadcnButton>Left</ShadcnButton>
</ShadcnTooltip>
<ShadcnTooltip arrow :content="content" position="right">
<ShadcnButton>Right</ShadcnButton>
</ShadcnTooltip>
</ShadcnSpace>
</div>
</div>
<ShadcnButton @click="defaultValue = !defaultValue">Open</ShadcnButton>

<ShadcnDrawer v-model="defaultValue" title="Title">
<ShadcnTooltip content="Position" position="top">
<ShadcnButton>Top</ShadcnButton>
</ShadcnTooltip>
<ShadcnTooltip content="Position" position="bottom">
<ShadcnButton>Bottom</ShadcnButton>
</ShadcnTooltip>
<ShadcnTooltip content="Position" position="left">
<ShadcnButton>Left</ShadcnButton>
</ShadcnTooltip>
<ShadcnTooltip content="Position" position="right">
<ShadcnButton>Right</ShadcnButton>
</ShadcnTooltip>
<template #footer>
<ShadcnButton @click="defaultValue = !defaultValue">Close</ShadcnButton>
</template>
</ShadcnDrawer>
<div class="mt-12"></div>
<ShadcnTooltip :content="content" position="bottom">
<ShadcnButton>Bottom</ShadcnButton>
</ShadcnTooltip>
<ShadcnButton @click="modal = true">Click</ShadcnButton>
<ShadcnModal v-model="modal" title="Custom Width" width="200" height="300">
<div class="flex items-center justify-center h-32">Content</div>
</ShadcnModal>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ref } from 'vue';
const defaultValue = ref(false)
const content = ref(
'Steve Jobs (English: Steve Jobs) is an American entrepreneur, marketer and inventor. He is one of the co-founders of Apple and has served as chairman and CEO. He is also the founder and CEO of NeXT and the founder and former CEO of Pixar Animation. He was a member of the board of directors of the Walt Disney Company in 2006. The place where Apple\'s press conference was held in September 2017 was named Steve Jobs Theater after him.')
const modal = ref(false);
</script>
29 changes: 12 additions & 17 deletions src/ui/modal/ShadcnModal.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,11 @@
@click="onClose"/>

<!-- Dialog -->
<div :class="cn('relative bg-white z-50 flex flex-col animate-in fade-in-0 zoom-in-95',
'w-full max-w-lg mx-auto rounded-sm',
width && `min-w-[${width}%] w-[${width}%] max-w-[${width}%]`,
height && `min-h-[${height}%] h-[${height}%] max-h-[${height}%]`)">
<div class="'relative bg-white z-50 flex flex-col animate-in fade-in-0 zoom-in-95 w-full max-w-lg mx-auto rounded-sm"
:style="[
{ width: calcSize(width), minWidth: calcSize(width), maxWidth: calcSize(width) },
{ height: calcSize(height), minHeight: calcSize(height), maxHeight: calcSize(height) }
]">
<!-- Header -->
<div v-if="$slots.title || title"
class="border-b p-2">
Expand Down Expand Up @@ -62,25 +63,19 @@
</template>

<script setup lang="ts">
import { cn } from '@/lib/utils.ts'
import { ModalProps } from '@/ui/modal/types.ts'
import { ModalEmits, ModalProps } from '@/ui/modal/types.ts'
import { calcSize } from '@/utils/common.ts'
const validateWidthHeight = (value: number) => {
return value >= 10 && value <= 100 && value % 10 === 0
}
const emit = defineEmits(['on-close', 'update:modelValue'])
const emit = defineEmits<ModalEmits>()
const props = withDefaults(defineProps<ModalProps>(), {
withDefaults(defineProps<ModalProps>(), {
okText: 'OK',
cancelText: 'Cancel',
closable: true
closable: true,
width: '30%',
height: '10%'
})
if ((props.width && !validateWidthHeight(props.width)) || (props.height && !validateWidthHeight(props.height))) {
console.error('Width or Height must be between 10 and 100 and multiples of 10.')
}
const onClose = () => {
emit('on-close')
emit('update:modelValue', false)
Expand Down
9 changes: 7 additions & 2 deletions src/ui/modal/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,14 @@ export interface ModalProps
modelValue: boolean
title?: string
description?: string
width?: number
height?: number
width?: number | string
height?: number | string
okText?: string
cancelText?: string
closable?: boolean
}

export type ModalEmits = {
(e: 'update:modelValue', value: boolean): void
(e: 'on-close'): void
}
8 changes: 4 additions & 4 deletions src/ui/tooltip/ShadcnTooltip.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,19 +76,19 @@ const hideTooltip = () => {
const positionFunctions = {
top: (trigger: DOMRect, content: DOMRect) => {
const pos = getTopPosition(trigger, content, 8, true)
const pos = getTopPosition(trigger, content, 8)
return pos
},
bottom: (trigger: DOMRect, content: DOMRect) => {
const pos = getBottomPosition(trigger, content, 8, true)
const pos = getBottomPosition(trigger, content, 8)
return pos
},
left: (trigger: DOMRect, content: DOMRect) => {
const pos = getLeftPosition(trigger, content, 8, true, props.position)
const pos = getLeftPosition(trigger, content, 8, props.position)
return pos
},
right: (trigger: DOMRect, content: DOMRect) => {
const pos = getRightPosition(trigger, content, 8, true, props.position)
const pos = getRightPosition(trigger, content, 8, props.position)
return pos
}
}
Expand Down
1 change: 0 additions & 1 deletion src/ui/tooltip/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { ArrangePosition } from '@/ui/common/position.ts'
export interface TooltipProps
{
content?: string
width?: number
position?: ArrangePosition | string
arrow?: boolean
delay?: number
Expand Down
4 changes: 0 additions & 4 deletions src/utils/position.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ export const getTopPosition = (
trigger: DOMRect,
content: DOMRect,
skip: number = 0,
fit: boolean = true
) => {
const topPosition = trigger.top === 0
? trigger.top + trigger.height + skip
Expand All @@ -29,7 +28,6 @@ export const getBottomPosition = (
trigger: DOMRect,
content: DOMRect,
skip: number = 0,
fit: boolean = true
) => {
const bottomPosition = trigger.top + trigger.height + skip > window.innerHeight
? trigger.top - content.height - skip
Expand All @@ -54,7 +52,6 @@ export const getLeftPosition = (
trigger: DOMRect,
content: DOMRect,
skip: number = 0,
fit: boolean = true,
position: string = 'left'
) => {
if (position === null || trigger.left === 0) {
Expand Down Expand Up @@ -85,7 +82,6 @@ export const getRightPosition = (
trigger: DOMRect,
content: DOMRect,
skip: number = 0,
fit: boolean = true,
position: string = 'right'
) => {
const tolerance = 10
Expand Down

0 comments on commit 456ecc1

Please sign in to comment.