Skip to content

Commit 8131f00

Browse files
cab-mikeecab-mikee
committed
chore: wip
1 parent 4760efe commit 8131f00

File tree

11 files changed

+94
-35
lines changed

11 files changed

+94
-35
lines changed

‎storage/framework/core/components/calendar/src/components/HeadlessToast.vue

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
<script setup lang="ts">
22
defineProps<{ msg?: string }>()
3+
4+
const emit = defineEmits<{
5+
(event: 'closeToast'): void
6+
}>()
37
</script>
48

59
<template>
@@ -10,7 +14,7 @@ defineProps<{ msg?: string }>()
1014
<p class="headlessDescription">
1115
Today at 4:00pm - "Louvre Museum"
1216
</p>
13-
<button class="headlessClose" @click="$emit('closeToast')">
17+
<button class="headlessClose" @click="emit('closeToast')">
1418
<svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
1519
<path
1620
d="M2.96967 2.96967C3.26256 2.67678 3.73744 2.67678 4.03033 2.96967L8 6.939L11.9697 2.96967C12.2626 2.67678 12.7374 2.67678 13.0303 2.96967C13.3232 3.26256 13.3232 3.73744 13.0303 4.03033L9.061 8L13.0303 11.9697C13.2966 12.2359 13.3208 12.6526 13.1029 12.9462L13.0303 13.0303C12.7374 13.3232 12.2626 13.3232 11.9697 13.0303L8 9.061L4.03033 13.0303C3.73744 13.3232 3.26256 13.3232 2.96967 13.0303C2.67678 12.7374 2.67678 12.2626 2.96967 11.9697L6.939 8L2.96967 4.03033C2.7034 3.76406 2.6792 3.3474 2.89705 3.05379L2.96967 2.96967Z"

‎storage/framework/core/components/modal/components.d.ts

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,6 @@ declare module 'vue' {
3232
Styling: typeof import('./src/components/Styling.vue')['default']
3333
SuccessIcon: typeof import('./src/components/icons/SuccessIcon.vue')['default']
3434
Theming: typeof import('./src/components/Theming.vue')['default']
35-
Toast: typeof import('./src/components/Toast.vue')['default']
36-
Toaster: typeof import('./src/components/Toaster.vue')['default']
3735
Types: typeof import('./src/components/Types.vue')['default']
3836
Usage: typeof import('./src/components/Usage.vue')['default']
3937
WarningIcon: typeof import('./src/components/icons/WarningIcon.vue')['default']

‎storage/framework/core/components/modal/src/App.vue

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
<script lang="ts" setup>
22
// import type { Position, Theme } from './types'
3-
import { ref } from 'vue'
3+
import { defineCustomElement, ref } from 'vue'
44
import { Modal } from './components'
55
import Hero from './components/Hero.vue'
66
import Installation from './components/Installation.vue'
7+
import Styling from './components/Styling.vue'
78
import Usage from './components/Usage.vue'
89
import { useSEOHeader } from './composables/useSEOHeader'
910
// import { toggleDarkMode, isDark } from './composables/useDarkMode'
@@ -21,10 +22,14 @@ const visible = ref(true)
2122
function handleClose() {
2223
visible.value = false
2324
}
25+
26+
defineCustomElement({
27+
shadow: true,
28+
})
2429
</script>
2530

2631
<template>
27-
<div class="bg-neutral-100/66 px-4 dark:bg-neutral-900">
32+
<div class="modal-wrapper bg-neutral-100/66 px-4 dark:bg-neutral-900">
2833
<div class="relative mx-auto max-w-full container sm:max-w-2xl">
2934
<header class="flex-center flex-col py-20">
3035
<Hero />
@@ -36,16 +41,29 @@ function handleClose() {
3641
<Installation />
3742
<Usage />
3843

44+
<Styling />
45+
3946
<button @click="visible = true">
4047
Open Modal
4148
</button>
4249
</main>
43-
44-
<!-- <Footer /> -->
50+
<Footer />
4551
</div>
4652

4753
<Modal :visible="visible" @close="handleClose">
48-
<div>Hello</div>
54+
<div>
55+
Welcome to stacks modal
56+
</div>
4957
</Modal>
5058
</div>
5159
</template>
60+
61+
<style>
62+
.modal-wrapper {
63+
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
64+
Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
65+
Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
66+
}
67+
68+
/* @unocss-placeholder */
69+
</style>

‎storage/framework/core/components/modal/src/components/Footer.vue

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,3 +60,7 @@
6060
</div>
6161
</footer>
6262
</template>
63+
64+
<style scoped>
65+
/* @unocss-placeholder */
66+
</style>

‎storage/framework/core/components/modal/src/components/Hero.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -153,4 +153,5 @@
153153
width: 100%;
154154
}
155155
}
156+
/* @unocss-placeholder */
156157
</style>

‎storage/framework/core/components/modal/src/components/Installation.vue

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,3 +38,7 @@ async function handleCopyCode() {
3838
</div>
3939
</div>
4040
</template>
41+
42+
<style scoped>
43+
/* @unocss-placeholder */
44+
</style>

‎storage/framework/core/components/modal/src/components/Modal.vue

Lines changed: 46 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script lang="ts" setup>
2-
import { computed, withDefaults } from 'vue'
2+
import { computed, defineCustomElement } from 'vue'
33
44
const props = withDefaults(defineProps<{
55
visible: boolean
@@ -8,7 +8,7 @@ const props = withDefaults(defineProps<{
88
title?: string
99
titleClassName?: string
1010
}>(), {
11-
visible: true,
11+
visible: false,
1212
showHeader: true,
1313
title: '',
1414
})
@@ -23,33 +23,56 @@ const isVisible = computed(() => props.visible)
2323
function handleClose() {
2424
emit('close', false)
2525
}
26+
27+
function handleKeydown(event: KeyboardEvent) {
28+
if (event.key === 'Escape') {
29+
handleClose()
30+
}
31+
}
32+
33+
defineCustomElement({
34+
shadow: true,
35+
})
2636
</script>
2737

2838
<template>
29-
<div v-if="isVisible" class="relative z-10" aria-labelledby="modal-title" role="dialog" aria-modal="true">
30-
<div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true" />
31-
32-
<div class="fixed inset-0 z-10 w-screen overflow-y-auto">
33-
<div class="min-h-full flex items-end justify-center p-4 text-center sm:items-center sm:p-0">
34-
<div class="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:max-w-lg sm:w-full sm:p-6">
35-
<div v-if="showHeader" class="absolute right-0 top-0 pr-4 pt-4 sm:block">
36-
<button type="button" class="rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" @click="handleClose">
37-
<span class="sr-only">Close</span>
38-
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
39-
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
40-
</svg>
41-
</button>
42-
</div>
43-
<div v-if="hasTitle" class="flex items-center justify-between">
44-
<div v-if="title" class="text-lg text-gray-900 font-medium">
45-
{{ title }}
39+
<transition name="fade">
40+
<div v-if="isVisible" class="relative z-10" aria-labelledby="modal-title" role="dialog" aria-modal="true" @click.self="handleClose">
41+
<div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true" />
42+
43+
<div class="fixed inset-0 z-10 w-screen overflow-y-auto">
44+
<div class="min-h-full flex items-end justify-center p-4 text-center sm:items-center sm:p-0">
45+
<div class="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:max-w-lg sm:w-full sm:p-6">
46+
<div v-if="showHeader" class="absolute right-0 top-0 pr-4 pt-4 sm:block">
47+
<button type="button" class="rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" @click="handleClose">
48+
<span class="sr-only">Close</span>
49+
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
50+
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
51+
</svg>
52+
</button>
53+
</div>
54+
<div v-if="hasTitle" class="flex items-center justify-between">
55+
<div v-if="title" class="text-lg text-gray-900 font-medium">
56+
{{ title }}
57+
</div>
58+
</div>
59+
<div class="mt-5 flex">
60+
<slot />
4661
</div>
47-
</div>
48-
<div class="mt-5 flex">
49-
<slot />
5062
</div>
5163
</div>
5264
</div>
5365
</div>
54-
</div>
66+
</transition>
5567
</template>
68+
69+
<style scoped>
70+
.fade-enter-active, .fade-leave-active {
71+
transition: opacity 0.5s;
72+
}
73+
.fade-enter-from, .fade-leave-to {
74+
opacity: 0;
75+
}
76+
77+
/* @unocss-placeholder */
78+
</style>

‎storage/framework/core/components/modal/src/components/Usage.vue

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ async function handleCopyCode() {
4141
Usage
4242
</h1>
4343
<p class="my-3 text-base">
44-
Render the toaster in the root of your app.
44+
Render the modal in the root of your app.
4545
</p>
4646
<div class="group code-block relative">
4747
<Highlight
@@ -62,3 +62,7 @@ async function handleCopyCode() {
6262
</div>
6363
</div>
6464
</template>
65+
66+
<style scoped>
67+
/* @unocss-placeholder */
68+
</style>

‎storage/framework/core/components/modal/src/main.ts

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,6 @@ import { createApp } from 'vue'
33
import App from './App.vue'
44

55
import highlight from './plugins/highlight'
6-
import '@unocss/reset/tailwind.css'
7-
import 'virtual:uno.css'
86

97
const app = createApp(App)
108
const head = createHead()

‎storage/framework/core/components/modal/vite.config.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,9 @@ export default defineConfig(({ mode }) => {
2323
Vue({
2424
include: /\.(stx|vue|md)($|\?)/,
2525
}),
26-
UnoCSS(),
26+
UnoCSS({
27+
mode: 'shadow-dom',
28+
}),
2729
Components({
2830
extensions: ['stx', 'vue', 'md'],
2931
include: /\.(stx|vue|md)($|\?)/,

0 commit comments

Comments
 (0)