@plutocms/pluto 0.0.1-alpha.1

package/app/components/modal/Modal.vue

@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import type { ClassNameValue } from 'tailwind-merge'
+import { useBodyScrollLock } from 'reka-ui'
+import { twMerge } from 'tailwind-merge'
+
+interface Props {
+  size?: 'small' | 'medium' | 'large' | 'default'
+  customSize?: number
+  preventClickOutside?: boolean
+  class?: ClassNameValue
+  scrollAreaClass?: ClassNameValue
+  backgroundClass?: ClassNameValue
+}
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<Props>(), {
+  isOpen: false,
+  preventClickOutside: false,
+})
+
+const emit = defineEmits(['update:isOpen', 'scroll'])
+
+const scrollLock = useBodyScrollLock()
+
+const scrollRef = useTemplateRef('scrollRef')
+
+const { isScrolling, y } = useScroll(scrollRef)
+
+const model = defineModel<boolean>()
+
+const resolvedClasses = computed(() => {
+  const defaultClasses = `
+      group
+      relative
+      w-234 h-fit
+      rounded-lg
+      my-4 mx-4
+      shadow-2xl
+      bg-default
+      light:text-zinc-800 dark:text-white
+    `
+
+  return twMerge([
+    defaultClasses,
+
+    !props.customSize && props.size && props.size === 'small'
+      ? 'w-[320px]'
+      : null,
+
+    !props.customSize && props.size && props.size === 'medium' ? 'w-3xl' : null,
+
+    !props.customSize && props.size && props.size === 'large' ? 'w-7xl' : null,
+
+    !props.customSize && props.size && props.size === 'default'
+      ? 'w-234'
+      : null,
+
+    props.class,
+  ])
+})
+
+const resolvedOverlayClasses = computed(() => {
+  const defaultClasses = `
+      pointer-events-auto
+      fixed
+      left-0 top-0
+      z-51
+      h-screen w-screen
+      bg-black/90
+    `
+
+  return twMerge([defaultClasses])
+})
+
+watchEffect(() => {
+  if (model.value === true) {
+    scrollLock.value = true
+
+    nextTick(() => {
+      document.body.style.pointerEvents = ''
+    })
+
+    return
+  }
+
+  scrollLock.value = false
+})
+
+watch(y, (y) => {
+  if (isScrolling.value) {
+    emit('scroll', y)
+  }
+})
+
+function closeModal() {
+  model.value = false
+}
+</script>
+
+<template>
+  <div>
+    <Teleport to="body">
+      <Transition name="fade">
+        <div
+          v-if="model === true"
+          :class="resolvedOverlayClasses"
+          @click="props.preventClickOutside === false ? closeModal() : null"
+        >
+          <div ref="scrollRef" class="h-full overflow-y-scroll py-4">
+            <div class="flex min-h-full items-center justify-center">
+              <div
+                :class="twMerge(['modal-content my-auto', resolvedClasses])"
+                :style="{
+                  width:
+                    !props.size && props.customSize
+                      ? `${props.customSize}px`
+                      : '',
+                }"
+                v-bind="$attrs"
+                @click.stop
+              >
+                <slot />
+              </div>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+  </div>
+</template>
+
+<style scoped>
+.fade-enter-active {
+  transition:
+    transform 1000ms cubic-bezier(0.08, 0.915, 0.005, 0.985),
+    opacity 250ms cubic-bezier(0.295, 0.485, 0, 0.975);
+}
+
+.fade-leave-active {
+  transition: 300ms cubic-bezier(0.295, 0.485, 0, 0.975);
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.fade-enter-active .modal-content,
+.fade-leave-active .modal-content {
+  transition: all 700ms cubic-bezier(0.08, 0.915, 0.005, 0.985);
+}
+
+.fade-enter-from .modal-content,
+.fade-leave-to .modal-content {
+  opacity: 0;
+  transform: translateY(40px);
+}
+</style>

package/app/components/modal/ModalContent.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { twMerge } from 'tailwind-merge'
+</script>
+
+<template>
+  <div class="flex flex-col gap-8 py-1">
+    <div
+      v-if="$slots.header"
+      :class="twMerge(['bg-opacity-90 sticky z-50 backdrop-blur-md'])"
+      style="top: var(--header-top-offset)"
+    >
+      <slot name="header" />
+    </div>
+
+    <div class="px-4 pt-6">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+* {
+  --header-padding: 1rem;
+  --header-height: 4.625rem;
+  --header-top-offset: calc(var(--header-height) - var(--header-padding));
+}
+</style>

package/app/components/modal/ModalFooter.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import type { ClassNameValue } from 'tailwind-merge'
+import { twMerge } from 'tailwind-merge'
+
+interface Props {
+  align?: 'left' | 'center' | 'right'
+  hideDivider?: boolean
+  class?: ClassNameValue
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  align: 'center',
+  hideDivider: false,
+  class: '',
+})
+
+const resolvedAlign = computed(() => {
+  if (props.align === 'left') {
+    return 'justify-start'
+  }
+  if (props.align === 'center') {
+    return 'justify-center'
+  }
+  if (props.align === 'right') {
+    return 'justify-end'
+  }
+
+  return 'justify-center'
+})
+
+const resolvedClasses = computed(() => {
+  const defaultClasses = `
+      sticky -bottom-4 z-51
+      w-full
+      mt-8
+    `
+
+  return twMerge([defaultClasses, props.class])
+})
+</script>
+
+<template>
+  <div :class="resolvedClasses">
+    <USeparator v-if="!props.hideDivider" />
+
+    <div
+      :class="
+        twMerge([
+          'bg-opacity-90 absolute top-0 left-0 z-[-1] h-full w-full rounded-b-lg backdrop-blur-md',
+          'bg-default',
+        ])
+      "
+    />
+
+    <div :class="resolvedAlign" class="flex py-4">
+      <slot />
+    </div>
+  </div>
+</template>

package/app/components/modal/ModalHeader.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import type { ClassNameValue } from 'tailwind-merge'
+import { twMerge } from 'tailwind-merge'
+
+interface Props {
+  hideCloseButton?: boolean
+  hideDivider?: boolean | null
+  class?: ClassNameValue
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  hideCloseButton: false,
+  hideDivider: false,
+  class: '',
+})
+
+const emit = defineEmits(['close'])
+
+const closeModel = defineModel<() => void>('close')
+
+const resolvedClasses = computed(() => {
+  const defaultClasses = `
+      sticky -top-4 left-0
+      z-51
+      -mt-4
+      flex flex-col gap-x-6
+      w-full
+      px-4
+      rounded-t-lg
+    `
+
+  return twMerge([defaultClasses, props.class])
+})
+
+function closeModal() {
+  emit('close')
+
+  closeModel.value?.()
+}
+</script>
+
+<template>
+  <div :class="resolvedClasses">
+    <div
+      class="bg-default absolute top-0 left-0 z-[-1] h-full w-full rounded-t-lg backdrop-blur-md"
+    />
+
+    <div class="flex items-start justify-between py-4">
+      <h2 :class="twMerge(['text-3xl leading-10 font-medium'])">
+        <slot />
+      </h2>
+
+      <div v-if="props.hideCloseButton === false">
+        <UButton size="sm" variant="ghost" square @click="closeModal">
+          <span class="sr-only">Close</span>
+
+          <Icon name="lucide:x" class="text-xl" />
+        </UButton>
+      </div>
+    </div>
+
+    <USeparator v-if="props.hideDivider === false" color="neutral" />
+  </div>
+</template>

package/app/composables/object-url.ts

@@ -0,0 +1,9 @@
+export function useObjectURL(file: File) {
+  const blob = shallowRef(file ? URL.createObjectURL(file) : undefined)
+
+  watch(toRef(file), (value) => {
+    blob.value = value ? URL.createObjectURL(value) : undefined
+  })
+
+  return { blob }
+}

package/app/layouts/admin.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+const { actions: sidebarActions } = useSidebarAdminActions()
+
+const menu = ref([
+  {
+    label: 'Home',
+    href: '/admin/home',
+    icon: 'lucide:house',
+  },
+  ...sidebarActions.value,
+  {
+    label: 'Settings',
+    href: '/admin/settings',
+    icon: 'lucide:settings',
+  },
+])
+</script>
+
+<template>
+  <div
+    class="dark:bg-admin-content light:bg-white font-outfit flex h-full grow flex-col"
+  >
+    <NavbarAdmin />
+
+    <div class="flex h-full items-stretch">
+      <div
+        class="dark:bg-admin-sidebar light:bg-zinc-100 w-64 shrink-0 px-4 py-4"
+      >
+        <UNavigationMenu
+          :items="menu"
+          :ui="{
+            link: 'text-base gap-x-3 font-normal',
+          }"
+          orientation="vertical"
+          class="data-[orientation=vertical]:w-full"
+          highlight
+        />
+      </div>
+
+      <div class="grow overflow-hidden">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>

package/app/layouts/auth.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="bg-admin-content font-outfit flex h-full grow flex-col">
+    <slot />
+  </div>
+</template>

package/app/pages/admin/home.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+useHead({
+  title: `Admin`,
+})
+</script>
+
+<template>
+  <main>
+    <AdminView>
+      <h1 class="text-4xl font-bold">Admin Dashboard</h1>
+
+      <div class="grid grid-cols-3 gap-x-4 gap-y-6">
+        <div
+          v-for="i in 6"
+          :key="i"
+          class="h-50 rounded-3xl border border-gray-500"
+        />
+      </div>
+    </AdminView>
+  </main>
+</template>

package/app/pages/index.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+definePageMeta({
+  layout: 'admin',
+})
+</script>
+
+<template>
+  <div>Home</div>
+</template>

package/app/plugins/autofocus.ts

@@ -0,0 +1,5 @@
+export default defineNuxtPlugin((app) => {
+  app.vueApp.directive('autofocus', {
+    mounted: (el) => el.focus(),
+  })
+})