kaze 1.4.0 → 2.0.1

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

@@ -1,109 +0,0 @@
-<script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
-
-const props = withDefaults(
-  defineProps<{
-    show?: boolean
-    maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl'
-    closeable?: boolean
-  }>(),
-  {
-    show: false,
-    maxWidth: '2xl',
-    closeable: true,
-  },
-)
-
-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 = ''
-
-      setTimeout(() => {
-        dialog.value?.close()
-        showSlot.value = false
-      }, 200)
-    }
-  },
-)
-
-const close = () => {
-  if (props.closeable) {
-    emit('close')
-  }
-}
-
-const closeOnEscape = (e: KeyboardEvent) => {
-  if (e.key === 'Escape') {
-    e.preventDefault()
-
-    if (props.show) {
-      close()
-    }
-  }
-}
-
-onMounted(() => document.addEventListener('keydown', closeOnEscape))
-
-onUnmounted(() => {
-  document.removeEventListener('keydown', closeOnEscape)
-
-  document.body.style.overflow = ''
-})
-
-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]
-})
-</script>
-
-<template>
-  <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"
-      >
-        <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"
-        >
-          <slot v-if="showSlot" />
-        </div>
-      </Transition>
-    </div>
-  </dialog>
-</template>

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

@@ -1,21 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { Link } from '@inertiajs/vue3'
-
-const props = defineProps<{
-  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-hidden 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-hidden 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>
-</template>

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

@@ -1,7 +0,0 @@
-<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-hidden 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 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { Link } from '@inertiajs/vue3'
-
-const props = defineProps<{
-  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-hidden 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-hidden 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>
-</template>

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

@@ -1,19 +0,0 @@
-<script setup lang="ts">
-withDefaults(
-  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-xs hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-hidden 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 +0,0 @@
-<script setup lang="ts">
-import { onMounted, ref } from 'vue'
-
-const model = defineModel<string>({ required: true })
-
-const input = ref<HTMLInputElement | null>(null)
-
-onMounted(() => {
-  if (input.value?.hasAttribute('autofocus')) {
-    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-xs"
-    v-model="model"
-    ref="input"
-  />
-</template>

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

@@ -1,43 +0,0 @@
-<script setup lang="ts">
-import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue'
-import DeleteUserForm from './Partials/DeleteUserForm.vue'
-import UpdateAppearanceForm from './Partials/UpdateAppearanceForm.vue'
-import UpdatePasswordForm from './Partials/UpdatePasswordForm.vue'
-import UpdateProfileInformationForm from './Partials/UpdateProfileInformationForm.vue'
-import { Head } from '@inertiajs/vue3'
-
-defineProps<{
-  mustVerifyEmail?: boolean
-  status?: string
-}>()
-</script>
-
-<template>
-  <Head title="Profile" />
-
-  <AuthenticatedLayout>
-    <template #header>
-      <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">Profile</h2>
-    </template>
-
-    <div class="py-12">
-      <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">
-        <div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow-sm sm:rounded-lg">
-          <UpdateAppearanceForm class="max-w-xl" />
-        </div>
-
-        <div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow-sm sm:rounded-lg">
-          <UpdateProfileInformationForm :must-verify-email="mustVerifyEmail" :status="status" class="max-w-xl" />
-        </div>
-
-        <div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow-sm sm:rounded-lg">
-          <UpdatePasswordForm class="max-w-xl" />
-        </div>
-
-        <div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow-sm sm:rounded-lg">
-          <DeleteUserForm class="max-w-xl" />
-        </div>
-      </div>
-    </div>
-  </AuthenticatedLayout>
-</template>

data/stubs/inertia-vue-ts/app/javascript/Pages/Profile/Partials/DeleteUserForm.vue

@@ -1,99 +0,0 @@
-<script setup lang="ts">
-import DangerButton from '@/Components/DangerButton.vue'
-import InputError from '@/Components/InputError.vue'
-import InputLabel from '@/Components/InputLabel.vue'
-import Modal from '@/Components/Modal.vue'
-import SecondaryButton from '@/Components/SecondaryButton.vue'
-import TextInput from '@/Components/TextInput.vue'
-import { useForm } from '@inertiajs/vue3'
-import { nextTick, ref } from 'vue'
-import { profile_destroy_path } from '@/routes'
-
-const confirmingUserDeletion = ref(false)
-const passwordInput = ref<HTMLInputElement | null>(null)
-
-const form = useForm({
-  password: '',
-})
-
-const confirmUserDeletion = () => {
-  confirmingUserDeletion.value = true
-
-  nextTick(() => passwordInput.value?.focus())
-}
-
-const deleteUser = () => {
-  form.delete(profile_destroy_path(), {
-    preserveScroll: true,
-    onSuccess: () => closeModal(),
-    onError: () => passwordInput.value?.focus(),
-    onFinish: () => {
-      form.reset()
-    },
-  })
-}
-
-const closeModal = () => {
-  confirmingUserDeletion.value = false
-
-  form.clearErrors()
-  form.reset()
-}
-</script>
-
-<template>
-  <section class="space-y-6">
-    <header>
-      <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">Delete Account</h2>
-
-      <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
-        Once your account is deleted, all of its resources and data will be permanently deleted. Before deleting your
-        account, please download any data or information that you wish to retain.
-      </p>
-    </header>
-
-    <DangerButton @click="confirmUserDeletion">Delete Account</DangerButton>
-
-    <Modal :show="confirmingUserDeletion" @close="closeModal">
-      <div class="p-6">
-        <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
-          Are you sure you want to delete your account?
-        </h2>
-
-        <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
-          Once your account is deleted, all of its resources and data will be permanently deleted. Please enter your
-          password to confirm you would like to permanently delete your account.
-        </p>
-
-        <div class="mt-6">
-          <InputLabel for="password" value="Password" class="sr-only" />
-
-          <TextInput
-            id="password"
-            ref="passwordInput"
-            v-model="form.password"
-            type="password"
-            class="mt-1 block w-3/4"
-            placeholder="Password"
-            @keyup.enter="deleteUser"
-          />
-
-          <InputError :message="form.errors.password" class="mt-2" />
-        </div>
-
-        <div class="mt-6 flex justify-end">
-          <SecondaryButton @click="closeModal"> Cancel </SecondaryButton>
-
-          <DangerButton
-            class="ms-3"
-            :class="{ 'opacity-25': form.processing }"
-            :disabled="form.processing"
-            @click="deleteUser"
-          >
-            Delete Account
-          </DangerButton>
-        </div>
-      </div>
-    </Modal>
-  </section>
-</template>

data/stubs/inertia-vue-ts/app/javascript/Pages/Profile/Partials/UpdateAppearanceForm.vue

@@ -1,47 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import { getAppearance, setAppearance, type Appearance } from '@/lib/appearance'
-
-const options: { value: Appearance; label: string }[] = [
-  { value: 'light', label: 'Light' },
-  { value: 'dark', label: 'Dark' },
-  { value: 'system', label: 'System' },
-]
-
-const appearance = ref<Appearance>(getAppearance())
-
-const select = (value: Appearance) => {
-  appearance.value = value
-  setAppearance(value)
-}
-</script>
-
-<template>
-  <section>
-    <header>
-      <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">Appearance</h2>
-
-      <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
-        Choose how the application looks to you. System follows your device setting.
-      </p>
-    </header>
-
-    <div class="mt-6 inline-flex rounded-lg bg-gray-100 p-1 dark:bg-gray-900">
-      <button
-        v-for="option in options"
-        :key="option.value"
-        type="button"
-        :aria-pressed="appearance === option.value"
-        class="rounded-md px-4 py-1.5 text-sm font-medium transition focus:outline-hidden focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800"
-        :class="
-          appearance === option.value
-            ? 'bg-white text-gray-900 shadow-xs dark:bg-gray-700 dark:text-gray-100'
-            : 'text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100'
-        "
-        @click="select(option.value)"
-      >
-        {{ option.label }}
-      </button>
-    </div>
-  </section>
-</template>