kaze 0.5.0 → 0.7.0

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

@@ -1,75 +1,78 @@
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 
 const props = withDefaults(
-    defineProps<{
-        align?: 'left' | 'right';
-        width?: '48';
-        contentClasses?: string;
-    }>(),
-    {
-        align: 'right',
-        width: '48',
-        contentClasses: 'py-1 bg-white dark:bg-gray-700',
-    }
-);
+  defineProps<{
+    align?: 'left' | 'right'
+    width?: '48'
+    contentClasses?: string
+  }>(),
+  {
+    align: 'right',
+    width: '48',
+    contentClasses: 'py-1 bg-white dark:bg-gray-700',
+  },
+)
 
 const closeOnEscape = (e: KeyboardEvent) => {
-    if (open.value && e.key === 'Escape') {
-        open.value = false;
-    }
-};
+  if (open.value && e.key === 'Escape') {
+    open.value = false
+  }
+}
 
-onMounted(() => document.addEventListener('keydown', closeOnEscape));
-onUnmounted(() => document.removeEventListener('keydown', closeOnEscape));
+onMounted(() => document.addEventListener('keydown', closeOnEscape))
+onUnmounted(() => document.removeEventListener('keydown', closeOnEscape))
 
 const widthClass = computed(() => {
-    return {
-        48: 'w-48',
-    }[props.width.toString()];
-});
+  return {
+    48: 'w-48',
+  }[props.width.toString()]
+})
 
 const alignmentClasses = computed(() => {
-    if (props.align === 'left') {
-        return 'ltr:origin-top-left rtl:origin-top-right start-0';
-    } else if (props.align === 'right') {
-        return 'ltr:origin-top-right rtl:origin-top-left end-0';
-    } else {
-        return 'origin-top';
-    }
-});
+  if (props.align === 'left') {
+    return 'ltr:origin-top-left rtl:origin-top-right start-0'
+  } else if (props.align === 'right') {
+    return 'ltr:origin-top-right rtl:origin-top-left end-0'
+  } else {
+    return 'origin-top'
+  }
+})
 
-const open = ref(false);
+const open = ref(false)
 </script>
 
 <template>
-    <div class="relative">
-        <div @click="open = !open">
-            <slot name="trigger" />
-        </div>
+  <div class="relative">
+    <div @click="open = !open">
+      <slot name="trigger" />
+    </div>
 
-        <!-- Full Screen Dropdown Overlay -->
-        <div v-show="open" class="fixed inset-0 z-40" @click="open = false"></div>
+    <!-- Full Screen Dropdown Overlay -->
+    <div v-show="open" class="fixed inset-0 z-40" @click="open = false"></div>
 
-        <Transition
-            enter-active-class="transition ease-out duration-200"
-            enter-from-class="opacity-0 scale-95"
-            enter-to-class="opacity-100 scale-100"
-            leave-active-class="transition ease-in duration-75"
-            leave-from-class="opacity-100 scale-100"
-            leave-to-class="opacity-0 scale-95"
+    <Transition
+      enter-active-class="transition ease-out duration-200"
+      enter-from-class="opacity-0 scale-95"
+      enter-to-class="opacity-100 scale-100"
+      leave-active-class="transition ease-in duration-75"
+      leave-from-class="opacity-100 scale-100"
+      leave-to-class="opacity-0 scale-95"
+    >
+      <div
+        v-show="open"
+        class="absolute z-50 mt-2 rounded-md shadow-lg"
+        :class="[widthClass, alignmentClasses]"
+        style="display: none"
+        @click="open = false"
+      >
+        <div
+          class="rounded-md ring-1 ring-black ring-opacity-5"
+          :class="contentClasses"
         >
-            <div
-                v-show="open"
-                class="absolute z-50 mt-2 rounded-md shadow-lg"
-                :class="[widthClass, alignmentClasses]"
-                style="display: none"
-                @click="open = false"
-            >
-                <div class="rounded-md ring-1 ring-black ring-opacity-5" :class="contentClasses">
-                    <slot name="content" />
-                </div>
-            </div>
-        </Transition>
-    </div>
+          <slot name="content" />
+        </div>
+      </div>
+    </Transition>
+  </div>
 </template>

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

@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import { Link } from '@inertiajs/vue3';
+import { Link } from '@inertiajs/vue3'
 
 defineProps<{
-    href: string;
-}>();
+  href: string
+}>()
 </script>
 
 <template>
-    <Link
-        :href="href"
-        class="block w-full px-4 py-2 text-start text-sm leading-5 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-800 transition duration-150 ease-in-out"
-    >
-        <slot />
-    </Link>
+  <Link
+    :href="href"
+    class="block w-full px-4 py-2 text-start text-sm leading-5 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-800 transition duration-150 ease-in-out"
+  >
+    <slot />
+  </Link>
 </template>

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

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 defineProps<{
-    message?: string;
-}>();
+  message?: string
+}>()
 </script>
 
 <template>
-    <div v-show="message">
-        <p class="text-sm text-red-600 dark:text-red-400">
-            {{ message }}
-        </p>
-    </div>
+  <div v-show="message">
+    <p class="text-sm text-red-600 dark:text-red-400">
+      {{ message }}
+    </p>
+  </div>
 </template>

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

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 defineProps<{
-    value?: string;
-}>();
+  value?: string
+}>()
 </script>
 
 <template>
-    <label class="block font-medium text-sm text-gray-700 dark:text-gray-300">
-        <span v-if="value">{{ value }}</span>
-        <span v-else><slot /></span>
-    </label>
+  <label class="block font-medium text-sm text-gray-700 dark:text-gray-300">
+    <span v-if="value">{{ value }}</span>
+    <span v-else><slot /></span>
+  </label>
 </template>

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

@@ -1,96 +1,106 @@
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, watch } from 'vue';
+import { computed, onMounted, onUnmounted, watch } from 'vue'
 
 const props = withDefaults(
-    defineProps<{
-        show?: boolean;
-        maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
-        closeable?: boolean;
-    }>(),
-    {
-        show: false,
-        maxWidth: '2xl',
-        closeable: true,
-    }
-);
+  defineProps<{
+    show?: boolean
+    maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl'
+    closeable?: boolean
+  }>(),
+  {
+    show: false,
+    maxWidth: '2xl',
+    closeable: true,
+  },
+)
 
-const emit = defineEmits(['close']);
+const emit = defineEmits(['close'])
 
 watch(
-    () => props.show,
-    () => {
-        if (props.show) {
-            document.body.style.overflow = 'hidden';
-        } else {
-            document.body.style.overflow = 'visible';
-        }
+  () => props.show,
+  () => {
+    if (props.show) {
+      document.body.style.overflow = 'hidden'
+    } else {
+      document.body.style.overflow = 'visible'
     }
-);
+  },
+)
 
 const close = () => {
-    if (props.closeable) {
-        emit('close');
-    }
-};
+  if (props.closeable) {
+    emit('close')
+  }
+}
 
 const closeOnEscape = (e: KeyboardEvent) => {
-    if (e.key === 'Escape' && props.show) {
-        close();
-    }
-};
+  if (e.key === 'Escape' && props.show) {
+    close()
+  }
+}
 
-onMounted(() => document.addEventListener('keydown', closeOnEscape));
+onMounted(() => document.addEventListener('keydown', closeOnEscape))
 
 onUnmounted(() => {
-    document.removeEventListener('keydown', closeOnEscape);
-    document.body.style.overflow = 'visible';
-});
+  document.removeEventListener('keydown', closeOnEscape)
+  document.body.style.overflow = 'visible'
+})
 
 const maxWidthClass = computed(() => {
-    return {
-        sm: 'sm:max-w-sm',
-        md: 'sm:max-w-md',
-        lg: 'sm:max-w-lg',
-        xl: 'sm:max-w-xl',
-        '2xl': 'sm:max-w-2xl',
-    }[props.maxWidth];
-});
+  return {
+    sm: 'sm:max-w-sm',
+    md: 'sm:max-w-md',
+    lg: 'sm:max-w-lg',
+    xl: 'sm:max-w-xl',
+    '2xl': 'sm:max-w-2xl',
+  }[props.maxWidth]
+})
 </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>
+  <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>
 
-                <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 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
+          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 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>
-    </Teleport>
+      </div>
+    </Transition>
+  </Teleport>
 </template>

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

@@ -1,21 +1,21 @@
 <script setup lang="ts">
-import { computed } from 'vue';
-import { Link } from '@inertiajs/vue3';
+import { computed } from 'vue'
+import { Link } from '@inertiajs/vue3'
 
 const props = defineProps<{
-    href: string;
-    active?: boolean;
-}>();
+  href: string
+  active?: boolean
+}>()
 
 const classes = computed(() =>
-    props.active
-        ? 'inline-flex items-center px-1 pt-1 border-b-2 border-indigo-400 dark:border-indigo-600 text-sm font-medium leading-5 text-gray-900 dark:text-gray-100 focus:outline-none focus:border-indigo-700 transition duration-150 ease-in-out'
-        : 'inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-700 focus:outline-none focus:text-gray-700 dark:focus:text-gray-300 focus:border-gray-300 dark:focus:border-gray-700 transition duration-150 ease-in-out'
-);
+  props.active
+    ? 'inline-flex items-center px-1 pt-1 border-b-2 border-indigo-400 dark:border-indigo-600 text-sm font-medium leading-5 text-gray-900 dark:text-gray-100 focus:outline-none focus:border-indigo-700 transition duration-150 ease-in-out'
+    : 'inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-700 focus:outline-none focus:text-gray-700 dark:focus:text-gray-300 focus:border-gray-300 dark:focus:border-gray-700 transition duration-150 ease-in-out',
+)
 </script>
 
 <template>
-    <Link :href="href" :class="classes">
-        <slot />
-    </Link>
+  <Link :href="href" :class="classes">
+    <slot />
+  </Link>
 </template>

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

@@ -1,7 +1,7 @@
 <template>
-    <button
-        class="inline-flex items-center px-4 py-2 bg-gray-800 dark:bg-gray-200 border border-transparent rounded-md font-semibold text-xs text-white dark:text-gray-800 uppercase tracking-widest hover:bg-gray-700 dark:hover:bg-white focus:bg-gray-700 dark:focus:bg-white active:bg-gray-900 dark:active:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150"
-    >
-        <slot />
-    </button>
+  <button
+    class="inline-flex items-center px-4 py-2 bg-gray-800 dark:bg-gray-200 border border-transparent rounded-md font-semibold text-xs text-white dark:text-gray-800 uppercase tracking-widest hover:bg-gray-700 dark:hover:bg-white focus:bg-gray-700 dark:focus:bg-white active:bg-gray-900 dark:active:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150"
+  >
+    <slot />
+  </button>
 </template>

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

@@ -1,21 +1,21 @@
 <script setup lang="ts">
-import { computed } from 'vue';
-import { Link } from '@inertiajs/vue3';
+import { computed } from 'vue'
+import { Link } from '@inertiajs/vue3'
 
 const props = defineProps<{
-    href: string;
-    active?: boolean;
-}>();
+  href: string
+  active?: boolean
+}>()
 
 const classes = computed(() =>
-    props.active
-        ? 'block w-full ps-3 pe-4 py-2 border-l-4 border-indigo-400 dark:border-indigo-600 text-start text-base font-medium text-indigo-700 dark:text-indigo-300 bg-indigo-50 dark:bg-indigo-900/50 focus:outline-none focus:text-indigo-800 dark:focus:text-indigo-200 focus:bg-indigo-100 dark:focus:bg-indigo-900 focus:border-indigo-700 dark:focus:border-indigo-300 transition duration-150 ease-in-out'
-        : 'block w-full ps-3 pe-4 py-2 border-l-4 border-transparent text-start text-base font-medium text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 hover:border-gray-300 dark:hover:border-gray-600 focus:outline-none focus:text-gray-800 dark:focus:text-gray-200 focus:bg-gray-50 dark:focus:bg-gray-700 focus:border-gray-300 dark:focus:border-gray-600 transition duration-150 ease-in-out'
-);
+  props.active
+    ? 'block w-full ps-3 pe-4 py-2 border-l-4 border-indigo-400 dark:border-indigo-600 text-start text-base font-medium text-indigo-700 dark:text-indigo-300 bg-indigo-50 dark:bg-indigo-900/50 focus:outline-none focus:text-indigo-800 dark:focus:text-indigo-200 focus:bg-indigo-100 dark:focus:bg-indigo-900 focus:border-indigo-700 dark:focus:border-indigo-300 transition duration-150 ease-in-out'
+    : 'block w-full ps-3 pe-4 py-2 border-l-4 border-transparent text-start text-base font-medium text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 hover:border-gray-300 dark:hover:border-gray-600 focus:outline-none focus:text-gray-800 dark:focus:text-gray-200 focus:bg-gray-50 dark:focus:bg-gray-700 focus:border-gray-300 dark:focus:border-gray-600 transition duration-150 ease-in-out',
+)
 </script>
 
 <template>
-    <Link :href="href" :class="classes">
-        <slot />
-    </Link>
+  <Link :href="href" :class="classes">
+    <slot />
+  </Link>
 </template>

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

@@ -1,19 +1,19 @@
 <script setup lang="ts">
 withDefaults(
-    defineProps<{
-        type?: 'button' | 'submit' | 'reset';
-    }>(),
-    {
-        type: 'button',
-    }
-);
+  defineProps<{
+    type?: 'button' | 'submit' | 'reset'
+  }>(),
+  {
+    type: 'button',
+  },
+)
 </script>
 
 <template>
-    <button
-        :type="type"
-        class="inline-flex items-center px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-500 rounded-md font-semibold text-xs text-gray-700 dark:text-gray-300 uppercase tracking-widest shadow-sm hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 disabled:opacity-25 transition ease-in-out duration-150"
-    >
-        <slot />
-    </button>
+  <button
+    :type="type"
+    class="inline-flex items-center px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-500 rounded-md font-semibold text-xs text-gray-700 dark:text-gray-300 uppercase tracking-widest shadow-sm hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 disabled:opacity-25 transition ease-in-out duration-150"
+  >
+    <slot />
+  </button>
 </template>

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

@@ -1,23 +1,23 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue';
+import { onMounted, ref } from 'vue'
 
-const model = defineModel<string>({ required: true });
+const model = defineModel<string>({ required: true })
 
-const input = ref<HTMLInputElement | null>(null);
+const input = ref<HTMLInputElement | null>(null)
 
 onMounted(() => {
-    if (input.value?.hasAttribute('autofocus')) {
-        input.value?.focus();
-    }
-});
+  if (input.value?.hasAttribute('autofocus')) {
+    input.value?.focus()
+  }
+})
 
-defineExpose({ focus: () => input.value?.focus() });
+defineExpose({ focus: () => input.value?.focus() })
 </script>
 
 <template>
-    <input
-        class="border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 rounded-md shadow-sm"
-        v-model="model"
-        ref="input"
-    />
+  <input
+    class="border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 rounded-md shadow-sm"
+    v-model="model"
+    ref="input"
+  />
 </template>