kmcom-nuxt-layers 1.7.9 → 2.2.0

package/layers/ui/app/app.config.ts

@@ -1,57 +0,0 @@
-export default {
-  site: {
-    title: '',
-    subtitle: '',
-    description: '',
-  },
-  mastNav: {
-    links: [],
-    scrollBehaviour: 'router',
-  },
-  uiLayer: {
-    gradients: {
-      brand: {
-        shape: 'linear',
-        direction: 'to-br',
-        from: { color: 'primary', shade: 500 },
-        to: { color: 'secondary', shade: 600 },
-      },
-      subtle: {
-        shape: 'linear',
-        direction: 'to-b',
-        from: { color: 'primary', shade: 100, opacity: 50 },
-        to: { color: 'transparent' },
-      },
-      hero: {
-        shape: 'radial',
-        from: { color: 'primary', shade: 400, opacity: 40 },
-        to: { color: 'transparent' },
-      },
-    },
-    accentScenes: {
-      hero: {
-        blobs: [
-          { x: 20, y: 30, size: '50rem', blur: '3xl', opacity: 25, color: 'primary', shade: 400 },
-          { x: 80, y: 70, size: '40rem', blur: '3xl', opacity: 20, color: 'secondary', shade: 500 },
-        ],
-      },
-      corner: {
-        blobs: [
-          { x: 100, y: 0, size: '35rem', blur: '2xl', opacity: 30, color: 'primary', shade: 500 },
-        ],
-      },
-      scattered: {
-        blobs: [
-          { x: 15, y: 20, size: '30rem', blur: 'xl', opacity: 20, color: 'primary', shade: 400 },
-          { x: 85, y: 30, size: '25rem', blur: 'xl', opacity: 15, color: 'secondary', shade: 400 },
-          { x: 50, y: 80, size: '35rem', blur: '2xl', opacity: 18, color: 'info', shade: 400 },
-        ],
-      },
-      minimal: {
-        blobs: [
-          { x: 50, y: 50, size: '60rem', blur: '3xl', opacity: 10, color: 'primary', shade: 500 },
-        ],
-      },
-    },
-  },
-}

package/layers/ui/app/components/Accent/Blob.vue

@@ -1,29 +0,0 @@
-<script setup lang="ts">
-import type { AccentBlobColor, BlobBlur } from '../../types/accent'
-
-const props = withDefaults(
-  defineProps<{
-    x: number
-    y: number
-    size?: string
-    blur?: BlobBlur
-    opacity?: number
-    color?: AccentBlobColor
-    shade?: 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950
-    customColor?: string
-  }>(),
-  {
-    size: '40rem',
-    blur: '3xl',
-    opacity: 25,
-    color: 'primary',
-    shade: 500,
-  }
-)
-
-const { style } = useAccentBlob(props)
-</script>
-
-<template>
-  <div class="accent-blob" :style="style" aria-hidden="true" />
-</template>

package/layers/ui/app/components/Base/Modal.vue

@@ -1,111 +0,0 @@
-<script setup lang="ts">
-/**
- * BaseModal — overlay-compatible modal shell.
- *
- * Use this as a starting point for new modals:
- *   1. Copy or extend this component
- *   2. Add your props and content in the slots
- *   3. Register with createModal() in a composable
- *
- * Example:
- *   // components/ConfirmModal.vue
- *   <BaseModal title="Are you sure?" @confirm="..." />
- *
- *   // composables/confirmModal.ts
- *   export const useConfirmModal = createModal(ConfirmModal)
- */
-const { open = false, title, description, size = 'md' } = defineProps<{
-  open?: boolean
-  title?: string
-  description?: string
-  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full'
-}>()
-
-const emit = defineEmits<{
-  'update:open': [value: boolean]
-  'close': []
-}>()
-
-const sizeClass: Record<string, string> = {
-  sm: 'max-w-sm',
-  md: 'max-w-md',
-  lg: 'max-w-lg',
-  xl: 'max-w-xl',
-  full: 'max-w-full',
-}
-
-function dismiss() {
-  emit('update:open', false)
-  emit('close')
-}
-</script>
-
-<template>
-  <Transition name="base-modal">
-    <div
-      v-if="open"
-      class="fixed inset-0 z-50 flex items-center justify-center p-4"
-      @click.self="dismiss"
-    >
-      <!-- Backdrop -->
-      <div class="bg-(--ui-bg-muted) absolute inset-0 opacity-60" @click="dismiss" />
-
-      <!-- Panel -->
-      <div
-        class="bg-(--ui-bg) ring-(--ui-border) relative w-full rounded-2xl shadow-xl ring-1"
-        :class="sizeClass[size]"
-      >
-        <!-- Header -->
-        <div v-if="title || $slots.header" class="border-(--ui-border) flex items-start justify-between border-b px-6 py-4">
-          <slot name="header">
-            <div>
-              <p class="text-(--ui-text) text-base font-semibold">
-                {{ title }}
-              </p>
-              <p v-if="description" class="text-(--ui-text-muted) mt-0.5 text-sm">
-                {{ description }}
-              </p>
-            </div>
-          </slot>
-          <button
-            class="text-(--ui-text-muted) hover:text-(--ui-text) ml-4 cursor-pointer border-0 bg-transparent p-1 transition-colors"
-            aria-label="Close"
-            @click="dismiss"
-          >
-            <UIcon name="lucide:x" class="size-5" />
-          </button>
-        </div>
-
-        <!-- Body -->
-        <div class="px-6 py-5">
-          <slot />
-        </div>
-
-        <!-- Footer -->
-        <div v-if="$slots.footer" class="border-(--ui-border) flex justify-end gap-3 border-t px-6 py-4">
-          <slot name="footer" :dismiss="dismiss" />
-        </div>
-      </div>
-    </div>
-  </Transition>
-</template>
-
-<style scoped>
-.base-modal-enter-active,
-.base-modal-leave-active {
-  transition: opacity 200ms ease;
-}
-.base-modal-enter-from,
-.base-modal-leave-to {
-  opacity: 0;
-}
-.base-modal-enter-active .bg-\(--ui-bg\),
-.base-modal-leave-active .bg-\(--ui-bg\) {
-  transition: opacity 200ms ease, transform 200ms ease;
-}
-.base-modal-enter-from .bg-\(--ui-bg\),
-.base-modal-leave-to .bg-\(--ui-bg\) {
-  opacity: 0;
-  transform: scale(0.96) translateY(4px);
-}
-</style>

package/layers/ui/app/components/Gradient/Background.vue

@@ -1,22 +0,0 @@
-<script setup lang="ts">
-import type { GradientConfig } from '../../types/gradient'
-
-const props = withDefaults(
-  defineProps<{
-    preset?: string
-    config?: GradientConfig
-    tag?: string
-  }>(),
-  {
-    tag: 'div',
-  }
-)
-
-const { style } = useGradient(computed(() => props.preset ?? props.config ?? 'brand'))
-</script>
-
-<template>
-  <component :is="tag" :style="style">
-    <slot />
-  </component>
-</template>

package/layers/ui/app/components/Gradient/Text.vue

@@ -1,22 +0,0 @@
-<script setup lang="ts">
-import type { GradientConfig } from '../../types/gradient'
-
-const props = withDefaults(
-  defineProps<{
-    preset?: string
-    config?: GradientConfig
-    tag?: string
-  }>(),
-  {
-    tag: 'span',
-  }
-)
-
-const { style } = useGradient(computed(() => props.preset ?? props.config ?? 'brand'))
-</script>
-
-<template>
-  <component :is="tag" :style="style" class="gradient-text inline-block">
-    <slot />
-  </component>
-</template>

package/layers/ui/app/components/Links/Group.vue

@@ -1,47 +0,0 @@
-<script lang="ts">
-// @ts-nocheck
-// eslint-disable-next-line no-restricted-imports
-import { cloneVNode, defineComponent, Fragment, h, ref, type VNode } from 'vue'
-
-export default defineComponent({
-  inheritAttrs: false,
-  props: {
-    tag: { type: String, default: 'div' },
-    dimOpacity: { type: Number, default: 0.3 },
-    duration: { type: Number, default: 200 },
-  },
-  setup(props, { slots, attrs }) {
-    const hoveredIndex = ref<number | null>(null)
-
-    return () => {
-      const children = (slots.default?.() ?? [])
-        .flatMap((node) => (node.type === Fragment ? (node.children as VNode[]) : [node]))
-        .filter((node) => typeof node.type === 'string' || typeof node.type === 'object')
-
-      const styledChildren = children.map((vnode, index) =>
-        cloneVNode(vnode, {
-          onMouseenter: () => {
-            hoveredIndex.value = index
-          },
-          style: {
-            opacity:
-              hoveredIndex.value !== null && hoveredIndex.value !== index ? props.dimOpacity : 1,
-            transition: `opacity ${props.duration}ms ease-out`,
-          },
-        })
-      )
-
-      return h(
-        props.tag,
-        {
-          ...attrs,
-          onMouseleave: () => {
-            hoveredIndex.value = null
-          },
-        },
-        styledChildren
-      )
-    }
-  },
-})
-</script>

package/layers/ui/app/components/Links/Named.vue

@@ -1,31 +0,0 @@
-<script setup lang="ts">
-// @ts-nocheck
-import { useColor } from '../../composables/color'
-import type { UiColors } from '../../types/colors'
-
-const {
-  name,
-  params = undefined,
-  query = undefined,
-  variant = undefined,
-  color = undefined,
-} = defineProps<{
-  name: string
-  params?: Record<string, string>
-  query?: Record<string, string>
-  variant?: string
-  color?: UiColors
-}>()
-const colorClass = useColor(color, 'text')
-</script>
-
-<template>
-  <ULink
-    :to="{ name: name, params: params, query: query }"
-    :variant
-    :class="colorClass"
-    v-bind="$attrs"
-  >
-    <slot />
-  </ULink>
-</template>

package/layers/ui/app/components/Mast/Footer.vue

@@ -1,15 +0,0 @@
-<script setup lang="ts">
-const year = useState('footer-year', () => new Date().getFullYear())
-</script>
-
-<template>
-  <UFooter>
-    <template #bottom>
-      <div class="pt-10">
-        <p class="text-center text-sm text-neutral-300">
-          Copyright © {{ year }}
-        </p>
-      </div>
-    </template>
-  </UFooter>
-</template>

package/layers/ui/app/components/Mast/NavModal.vue

@@ -1,72 +0,0 @@
-<script setup lang="ts">
-import type { MastNavLink } from '../../types/nav'
-
-const { open } = defineProps<{ open?: boolean }>()
-const emit = defineEmits<{
-  'update:open': [value: boolean]
-  'close': []
-}>()
-
-const { links, scrollBehaviour } = useAppConfig().mastNav as { links: MastNavLink[]; scrollBehaviour: string }
-const activeSection = useState<string>('activeSection', () => '')
-const route = useRoute()
-const { close: closeNav } = useMastNav()
-
-function dismiss() {
-  emit('update:open', false)
-  emit('close')
-  closeNav()
-}
-
-function handleNav(link: MastNavLink) {
-  if (scrollBehaviour === 'smooth-scroll' && route.name === 'index') {
-    try { useSmoothScroll().scrollTo(`#${link.id}`) }
-    catch {}
-  }
-  else {
-    navigateTo(link.to)
-  }
-  dismiss()
-}
-</script>
-
-<template>
-  <Transition name="nav-modal">
-    <div
-      v-if="open"
-      class="bg-(--ui-bg) text-(--ui-text) fixed inset-0 flex flex-col items-center justify-center"
-      :style="{ zIndex: useGridConfig().useZIndex('modal') }"
-    >
-      <button
-        class="absolute right-[5vw] top-[3vh] cursor-pointer border-0 bg-transparent p-2"
-        aria-label="Close navigation"
-        @click="dismiss"
-      >
-        <UIcon name="lucide:x" class="size-7" />
-      </button>
-
-      <LinksGroup tag="nav" class="flex flex-col items-center gap-2">
-        <button
-          v-for="link in links"
-          :key="link.id"
-          class="cursor-pointer border-0 bg-transparent px-4 py-3 text-3xl uppercase tracking-widest transition-all"
-          :class="activeSection === link.id ? 'font-normal' : 'font-light'"
-          @click="handleNav(link)"
-        >
-          {{ link.label }}
-        </button>
-      </LinksGroup>
-    </div>
-  </Transition>
-</template>
-
-<style scoped>
-.nav-modal-enter-active,
-.nav-modal-leave-active {
-  transition: opacity 300ms ease;
-}
-.nav-modal-enter-from,
-.nav-modal-leave-to {
-  opacity: 0;
-}
-</style>

package/layers/ui/app/components/Media/Picture.vue

@@ -1,50 +0,0 @@
-<script lang="ts" setup>
-import { usePicture } from '../../composables/picture'
-import type { PictureProps } from '../../types/media'
-
-const {
-  src,
-  alt,
-  width,
-  height,
-  sizes = '100vw',
-  format = 'webp',
-  quality = 80,
-  fit = 'cover',
-  loading = 'lazy',
-  fetchpriority = 'auto',
-  decoding = 'async',
-  provider,
-  preset,
-  densities,
-  class: wrapperClass = '',
-  imgClass = '',
-} = defineProps<PictureProps>()
-
-const { sizesString, computedFormat } = usePicture(
-  () => sizes,
-  () => format
-)
-</script>
-
-<template>
-  <NuxtPicture
-    :src
-    :alt
-    :width
-    :height
-    :sizes="sizesString"
-    :format="computedFormat"
-    :quality
-    :fit
-    :loading
-    :fetchpriority
-    :decoding
-    :provider
-    :preset
-    :densities
-    :class="wrapperClass"
-    :img-attrs="{ class: imgClass }"
-    v-bind="$attrs"
-  />
-</template>

package/layers/ui/app/components/Progress/Bar.vue

@@ -1,35 +0,0 @@
-<script setup lang="ts">
-const {
-  progress = null,
-  color,
-  size,
-  orientation,
-  status,
-  animation,
-  inverted,
-} = defineProps<{
-  progress?: number | null
-  color?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral'
-  size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
-  orientation?: 'horizontal' | 'vertical'
-  status?: boolean
-  animation?: 'carousel' | 'carousel-inverse' | 'swing' | 'elastic'
-  inverted?: boolean
-}>()
-
-const modelValue = computed(() => (progress != null ? progress * 100 : undefined))
-
-const progressProps = computed(() => ({
-  ...(modelValue.value !== undefined && { modelValue: modelValue.value }),
-  ...(color !== undefined && { color: color as 'primary' | 'neutral' }),
-  ...(size !== undefined && { size }),
-  ...(orientation !== undefined && { orientation }),
-  ...(status !== undefined && { status }),
-  ...(animation !== undefined && { animation }),
-  ...(inverted !== undefined && { inverted }),
-}))
-</script>
-
-<template>
-  <UProgress v-bind="progressProps" />
-</template>

package/layers/ui/app/components/Tint/Overlay.vue

@@ -1,25 +0,0 @@
-<script setup lang="ts">
-import type { ColorShade, TintColorSlot, TintLevel } from '../../types/tint'
-
-const props = withDefaults(
-  defineProps<{
-    color: TintColorSlot
-    level: TintLevel
-    shade?: ColorShade
-    tag?: string
-  }>(),
-  {
-    shade: 500,
-    tag: 'div',
-  }
-)
-
-const { style } = useTint(props)
-</script>
-
-<template>
-  <component :is="tag" class="relative">
-    <slot />
-    <span class="absolute inset-0 pointer-events-none" :style="style" aria-hidden="true" />
-  </component>
-</template>

package/layers/ui/app/components/Typography/CodeBlock.vue

@@ -1,42 +0,0 @@
-<script lang="ts" setup>
-import { useColor } from '../../composables/color'
-import type { UiColors } from '../../types/colors'
-import type { FontSize } from '../../types/typography'
-
-defineOptions({ inheritAttrs: false })
-
-const props = withDefaults(
-  defineProps<{
-    language?: string
-    color?: UiColors
-    size?: FontSize
-    class?: string
-  }>(),
-  {
-    class: '',
-    color: 'default',
-  }
-)
-const colorClass = useColor(props.color, 'text')
-</script>
-
-<template>
-  <Typography
-    tag="pre"
-    v-bind="{
-      ...$attrs,
-      ...(props.size !== undefined && { size: props.size }),
-      ...(props.language !== undefined && { 'data-language': props.language }),
-    }"
-    class="overflow-x-auto"
-    :class="[props.class]"
-  >
-    <Typography
-      tag="code"
-      class="font-mono"
-      :class="[colorClass, props.language ? `language-${props.language}` : '']"
-    >
-      <slot />
-    </Typography>
-  </Typography>
-</template>

package/layers/ui/app/components/Typography/Headline.vue

@@ -1,88 +0,0 @@
-<script lang="ts" setup>
-import { useColor } from '../../composables/color'
-import { useTypography } from '../../composables/typography'
-import type { UiColors } from '../../types/colors'
-import type {
-  FontLeading,
-  FontSize,
-  FontSlant,
-  FontTracking,
-  FontWeight,
-  FontWidth,
-  TextAlign,
-  TextTransform,
-} from '../../types/typography'
-
-defineOptions({ inheritAttrs: false })
-
-const props = withDefaults(
-  defineProps<{
-    level?: 1 | 2 | 3 | 4 | 5 | 6
-    weight?: FontWeight
-    width?: FontWidth
-    slant?: FontSlant
-    leading?: FontLeading
-    tracking?: FontTracking
-    align?: TextAlign
-    transform?: TextTransform
-    color?: UiColors
-    size?: FontSize
-    class?: string
-  }>(),
-  {
-    level: 1,
-    weight: 'font-bold',
-    width: 'font-stretch-normal',
-    slant: 'normal',
-    leading: 'leading-tight',
-    tracking: 'tracking-tight',
-    align: 'left',
-    transform: 'none',
-    class: '',
-  }
-)
-const tag = computed(() => `h${props.level}` as const)
-
-const sizeClass = computed(() => {
-  if (props.size) return null
-
-  const sizes: Record<number, string> = {
-    1: 'text-4xl sm:text-5xl',
-    2: 'text-3xl sm:text-4xl',
-    3: 'text-2xl sm:text-3xl',
-    4: 'text-xl sm:text-2xl',
-    5: 'text-lg sm:text-xl',
-    6: 'text-base sm:text-lg',
-  }
-  return sizes[props.level]
-})
-
-const { classes } = useTypography({
-  weight: props.weight,
-  width: props.width,
-  slant: props.slant,
-  leading: props.leading,
-  tracking: props.tracking,
-  align: props.align,
-  transform: props.transform,
-  ...(props.size !== undefined && { size: props.size }),
-})
-const colorClass = useColor(props.color, 'text')
-</script>
-
-<template>
-  <Typography
-    :tag
-    :weight="props.weight"
-    :width="props.width"
-    :slant="props.slant"
-    :leading="props.leading"
-    :tracking="props.tracking"
-    :align="props.align"
-    :transform="props.transform"
-    :class="[sizeClass, classes, colorClass, props.class]"
-    v-bind="{ ...(props.size !== undefined && { size: props.size }), ...$attrs }"
-  >
-    <slot />
-  </Typography>
-</template>