kaze 0.16.0 → 0.17.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 70692c92f436ae83178d631efa5e3b076b205af9fb38865643da09778b3dc5bd
-  data.tar.gz: 79e38f700d7725df90445290a1299f3a42c7eb09e44ccf225474cb359f268952
+  metadata.gz: deab98e2901b74f1056b04a39e951332f3a3347238c62e8e1b0920549bbe1a9c
+  data.tar.gz: b3a619c385c93bffe717de05af412bf49f839172c5c6a057d5c7004a43df2445
 SHA512:
-  metadata.gz: 9c9070cd7055e4a06f18193ad13f715fef0cf6e002eb60e7424ee7cd2fe2696155d30918d7b686aa1a5f40229d727c9a1ad374a521cd8c3ad074d6d1f82ac6c7
-  data.tar.gz: d23b59dc85ce9d0b974b2e15d2bdd7a2b92892e671c68af00b3d7ca695376985f6a06e8cbd10fdce2ed1acb4bf42e5223d82fb42cd9d558f7f59e9bd4406f4eb
+  metadata.gz: d0a65dc77ee49890cccf9936a00f0c7e4c4486fe9452723af63e893272c674f0de187321b20ebca67aac3177c93bf40352108365846d573f78b0b6f215ba9d92
+  data.tar.gz: 4c7ca90584170c7cbc09f1028851484bdbb5e42e7a9abd314eb99a4fe435583624631057ad47ff183e92bcb4e7c558325477335226ee35bc9c36b0ad40348519

data/lib/kaze/version.rb

@@ -1,3 +1,3 @@
 module Kaze
-  VERSION = '0.16.0'
+  VERSION = '0.17.0'
 end

data/stubs/inertia-react-ts/app/javascript/Layouts/AuthenticatedLayout.tsx

@@ -6,10 +6,7 @@ import ResponsiveNavLink from '@/Components/ResponsiveNavLink'
 import { Link, usePage } from '@inertiajs/react'
 import { dashboard_path, logout_path, profile_edit_path } from '@/routes'
 
-export default function AuthenticatedLayout({
-  header,
-  children,
-}: PropsWithChildren<{ header?: ReactNode }>) {
+export default function AuthenticatedLayout({ header, children }: PropsWithChildren<{ header?: ReactNode }>) {
   const user = usePage().props.auth.user
 
   const [showingNavigationDropdown, setShowingNavigationDropdown] = useState(false)

data/stubs/inertia-react-ts/app/javascript/Pages/Profile/Edit.tsx

@@ -5,10 +5,7 @@ import UpdateProfileInformationForm from './Partials/UpdateProfileInformationFor
 import { Head } from '@inertiajs/react'
 import { PageProps } from '@/types'
 
-export default function Edit({
-  mustVerifyEmail,
-  status,
-}: PageProps<{ mustVerifyEmail: boolean; status?: string }>) {
+export default function Edit({ mustVerifyEmail, status }: PageProps<{ mustVerifyEmail: boolean; status?: string }>) {
   return (
     <AuthenticatedLayout
       header={<h2 className="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">Profile</h2>}

data/stubs/inertia-vue-ts/app/javascript/Components/Modal.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, watch } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 
 const props = withDefaults(
   defineProps<{
@@ -15,14 +15,24 @@ const props = withDefaults(
 )
 
 const emit = defineEmits(['close'])
+const dialog = ref()
+const showSlot = ref(props.show)
 
 watch(
   () => props.show,
   () => {
     if (props.show) {
       document.body.style.overflow = 'hidden'
+      showSlot.value = true
+
+      dialog.value?.showModal()
     } else {
-      document.body.style.overflow = 'visible'
+      document.body.style.overflow = ''
+
+      setTimeout(() => {
+        dialog.value?.close()
+        showSlot.value = false
+      }, 200)
     }
   },
 )
@@ -34,8 +44,12 @@ const close = () => {
 }
 
 const closeOnEscape = (e: KeyboardEvent) => {
-  if (e.key === 'Escape' && props.show) {
-    close()
+  if (e.key === 'Escape') {
+    e.preventDefault()
+
+    if (props.show) {
+      close()
+    }
   }
 }
 
@@ -43,7 +57,8 @@ onMounted(() => document.addEventListener('keydown', closeOnEscape))
 
 onUnmounted(() => {
   document.removeEventListener('keydown', closeOnEscape)
-  document.body.style.overflow = 'visible'
+
+  document.body.style.overflow = ''
 })
 
 const maxWidthClass = computed(() => {
@@ -58,39 +73,37 @@ const maxWidthClass = computed(() => {
 </script>
 
 <template>
-  <Teleport to="body">
-    <Transition leave-active-class="duration-200">
-      <div v-show="show" class="fixed inset-0 overflow-y-auto px-4 py-6 sm:px-0 z-50" scroll-region>
-        <Transition
-          enter-active-class="ease-out duration-300"
-          enter-from-class="opacity-0"
-          enter-to-class="opacity-100"
-          leave-active-class="ease-in duration-200"
-          leave-from-class="opacity-100"
-          leave-to-class="opacity-0"
-        >
-          <div v-show="show" class="fixed inset-0 transform transition-all" @click="close">
-            <div class="absolute inset-0 bg-gray-500 dark:bg-gray-900 opacity-75" />
-          </div>
-        </Transition>
+  <dialog class="z-50 m-0 min-h-full min-w-full overflow-y-auto bg-transparent backdrop:bg-transparent" ref="dialog">
+    <div class="fixed inset-0 z-50 overflow-y-auto px-4 py-6 sm:px-0" scroll-region>
+      <Transition
+        enter-active-class="ease-out duration-300"
+        enter-from-class="opacity-0"
+        enter-to-class="opacity-100"
+        leave-active-class="ease-in duration-200"
+        leave-from-class="opacity-100"
+        leave-to-class="opacity-0"
+      >
+        <div v-show="show" class="fixed inset-0 transform transition-all" @click="close">
+          <div class="absolute inset-0 bg-gray-500 opacity-75 dark:bg-gray-900" />
+        </div>
+      </Transition>
 
-        <Transition
-          enter-active-class="ease-out duration-300"
-          enter-from-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-          enter-to-class="opacity-100 translate-y-0 sm:scale-100"
-          leave-active-class="ease-in duration-200"
-          leave-from-class="opacity-100 translate-y-0 sm:scale-100"
-          leave-to-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+      <Transition
+        enter-active-class="ease-out duration-300"
+        enter-from-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+        enter-to-class="opacity-100 translate-y-0 sm:scale-100"
+        leave-active-class="ease-in duration-200"
+        leave-from-class="opacity-100 translate-y-0 sm:scale-100"
+        leave-to-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+      >
+        <div
+          v-show="show"
+          class="mb-6 transform overflow-hidden rounded-lg bg-white shadow-xl transition-all sm:mx-auto sm:w-full dark:bg-gray-800"
+          :class="maxWidthClass"
         >
-          <div
-            v-show="show"
-            class="mb-6 bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full sm:mx-auto"
-            :class="maxWidthClass"
-          >
-            <slot v-if="show" />
-          </div>
-        </Transition>
-      </div>
-    </Transition>
-  </Teleport>
+          <slot v-if="showSlot" />
+        </div>
+      </Transition>
+    </div>
+  </dialog>
 </template>

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: kaze
 version: !ruby/object:Gem::Version
-  version: 0.16.0
+  version: 0.17.0
 platform: ruby
 authors:
 - Cuong Giang
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-10-16 00:00:00.000000000 Z
+date: 2024-11-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: thor