feat(codex-ui): popup and confirm implementation #254
Conversation
| <style module> | ||
|
|
||
| .popup { | ||
| z-index: var(--z-popover); |
There was a problem hiding this comment.
lets a separate variable in z-axis.pcss --z-popup which will be cal(var(--z-popover) + 1)
| /** | ||
| * Text that will be displayed in the middle part of the confirm container | ||
| */ | ||
| body: string; |
There was a problem hiding this comment.
| body: string; | |
| text: string; |
There was a problem hiding this comment.
Let's also create a useConfirm() composable? It will be a preset using Popup + Confirm. It will simplify end usage.
Also, it is useful if "confirm" will return a promise.
Example:
const { confirm } = useConfirm()
async function deleteNote() {
try {
await confirm('Are you sure')?
service.deleteNote()
} catch(e){}
}
| }); | ||
|
|
||
| /** | ||
| * Check every 100 ms to see if the user has pressed the button |
There was a problem hiding this comment.
you have callback in confirm props, so interval is not needed
| onCancel, | ||
| onConfirm, |
There was a problem hiding this comment.
redundant methods, they should be passed to the showPopup
| import PageHeader from '../../components/PageHeader.vue'; | ||
| import { Button, useConfirm } from '../../../src/vue'; | ||
|
|
||
| const { confirm } = useConfirm(); |
There was a problem hiding this comment.
Let's create another page for Confirm examle. And Popup page will show anything else inside (for example just a stub text like "Popup can include any component") to demonstrate its nature
| /** | ||
| * Check if the user has pressed the confirm or close button | ||
| */ | ||
| return new Promise<boolean>((resolve) => { |
There was a problem hiding this comment.
lets get rid of result ref, you can wrap showPopup with this promise:
return new Promise<boolean>((resolve) => {
showPopup( ... )
})| box-shadow: inset 0 0 0 var(--delimiter-height) var(--base--border); | ||
| } | ||
|
|
||
| &__icon { |
There was a problem hiding this comment.
The close button is displayed lower than it should be.
There was a problem hiding this comment.
also, please add hover to it. (Making icon and border color of --base--text)
There was a problem hiding this comment.
The close button is displayed lower than it should be.
The exact same sized icon is on the icon page - all indents are respected
There is a similar case in tabbar component, I think this is a problem with icons in general
| onMounted(() => { | ||
| document.addEventListener('keydown', closeOnEsc); | ||
| }); | ||
|
|
||
| onUnmounted(() => { | ||
| document.removeEventListener('keydown', closeOnEsc); | ||
| }); |
| @@ -16,23 +16,15 @@ | |||
|
|
|||
| <script setup lang="ts"> | |||
| import PageHeader from '../../components/PageHeader.vue'; | |||
| import { Button, useConfirm } from '../../../src/vue'; | |||
| import { StubText, Button, usePopup } from '../../../src/vue'; | |||
There was a problem hiding this comment.
Stub Text should not be a part of the design system. You can define it here
Added
popupandconfirmcomponentsshowPopup()functionshowPopup()function can be added to any component, for example with @ clickpopupitself using showPopup() withcomponentandpropsparametersconfirmcomponent was embeded into thepopupclose buttonconfirmbuttons, you can trigger any events, passing them to theconfirmason-close-activateandon-confirm-activate