@stackonward/cli 1.5.3 → 1.6.0

package/dist/resources/components/nuxt/site-source/app/components/theme/Menu.vue

@@ -40,9 +40,9 @@ onClickOutside(dropdown, () => dropdown.value?.removeAttribute("open"));
   <ClientOnly>
     <details ref="dropdown" v-bind="$attrs" class="site-preference" @keydown="handleKeydown">
       <summary :aria-label="t('theme.current', { theme: t(current.labelKey) })">
-        <UIcon :name="current.icon" aria-hidden="true" />
+        <UiIcon :name="current.icon" aria-hidden="true" />
         <span class="site-preference__current">{{ t(current.labelKey) }}</span>
-        <UIcon class="site-preference__chevron" name="i-lucide-chevron-down" aria-hidden="true" />
+        <UiIcon class="site-preference__chevron" name="i-lucide-chevron-down" aria-hidden="true" />
       </summary>
       <div class="site-preference__menu" :aria-label="t('theme.select')">
         <button
@@ -52,9 +52,9 @@ onClickOutside(dropdown, () => dropdown.value?.removeAttribute("open"));
           :aria-pressed="option.value === preference"
           @click="selectTheme(option.value)"
         >
-          <UIcon :name="option.icon" aria-hidden="true" />
+          <UiIcon :name="option.icon" aria-hidden="true" />
           <span>{{ t(option.labelKey) }}</span>
-          <UIcon
+          <UiIcon
             v-if="option.value === preference"
             class="site-preference__check"
             name="i-lucide-check"

package/dist/resources/components/nuxt/site-source/app/components/ui/Button.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 type ButtonColor = "primary" | "secondary" | "success" | "info" | "warning" | "error" | "neutral";
 type ButtonVariant = "solid" | "outline" | "soft" | "subtle" | "ghost" | "link";
-type ButtonSize = "xs" | "sm" | "md" | "lg" | "xl";
+type ButtonSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
 
 const props = withDefaults(
   defineProps<{
@@ -21,6 +21,8 @@ const props = withDefaults(
     leadingIcon?: string;
     trailingIcon?: string;
     square?: boolean;
+    ripple?: boolean;
+    loadingIcon?: string;
     customClass?: string;
     ui?: Record<string, unknown>;
   }>(),
@@ -34,6 +36,7 @@ const props = withDefaults(
     loading: false,
     external: false,
     square: false,
+    ripple: false,
     customClass: "",
     ui: () => ({}),
   },
@@ -61,11 +64,12 @@ const resolvedIcon = computed(() => props.leadingIcon || props.icon);
     :block="isBlock"
     :disabled="disabled"
     :loading="loading"
+    :loading-icon="loadingIcon"
     :icon="resolvedIcon"
     :trailing-icon="trailingIcon"
     :square="square"
     :ui="ui"
-    :class="customClass"
+    :class="[customClass, { 'button-pulse': ripple }]"
     @click="emit('click', $event)"
   >
     <template v-if="$slots.leading" #leading>
@@ -77,3 +81,25 @@ const resolvedIcon = computed(() => props.leadingIcon || props.icon);
     </template>
   </UButton>
 </template>
+
+<style scoped>
+@keyframes button-pulse {
+  from {
+    box-shadow: 0 0 0 0 color-mix(in srgb, var(--site-color-primary) 20%, transparent);
+  }
+
+  to {
+    box-shadow: 0 0 0 35px transparent;
+  }
+}
+
+.button-pulse {
+  animation: button-pulse 3s infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .button-pulse {
+    animation: none;
+  }
+}
+</style>

package/dist/resources/components/nuxt/site-source/app/components/ui/GradientBorder.vue

@@ -8,11 +8,11 @@ const props = withDefaults(
     direction?: string;
   }>(),
   {
-    padding: "1px",
-    radius: "10px",
-    from: "rgb(168 101 80 / 0.26)",
-    to: "rgb(168 101 80 / 0.14)",
-    direction: "135deg",
+    padding: "2px",
+    radius: "20px",
+    from: "color-mix(in srgb, var(--site-color-brand) 26%, transparent)",
+    to: "color-mix(in srgb, var(--site-color-brand) 14%, transparent)",
+    direction: "180deg",
   },
 );
 

package/dist/resources/components/nuxt/site-source/app/components/ui/Icon.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+defineProps<{ name: string; size?: string | number; label?: string }>();
+</script>
+
+<template>
+  <UIcon
+    :name="name"
+    :size="size"
+    :aria-hidden="label ? false : true"
+    :aria-label="label"
+    :role="label ? 'img' : undefined"
+    focusable="false"
+  />
+</template>

package/dist/resources/components/nuxt/site-source/app/components/ui/Image.vue

@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import type { ComponentPublicInstance, CSSProperties } from "vue";
+import type { ConfiguredImageProviders } from "@nuxt/image";
+
+defineOptions({ inheritAttrs: false });
+const props = withDefaults(
+  defineProps<{
+    src: string;
+    alt: string;
+    width?: string | number;
+    height?: string | number;
+    loading?: "lazy" | "eager";
+    preset?: string;
+    quality?: number;
+    fit?: "cover" | "contain" | "fill" | "inside" | "outside" | "none";
+    provider?: keyof ConfiguredImageProviders;
+    format?: string;
+    preload?: boolean;
+    placeholder?: boolean | string | number | [number, number];
+    position?: string;
+    mode?: "normal" | "sprite";
+    densities?: string;
+    viewportLoad?: boolean;
+    rootMargin?: string;
+    sizes?: string;
+  }>(),
+  {
+    loading: "lazy",
+    quality: 90,
+    fit: "cover",
+    format: "webp",
+    preload: false,
+    placeholder: false,
+    position: "center",
+    mode: "normal",
+    viewportLoad: true,
+    rootMargin: "50px",
+  },
+);
+const emit = defineEmits<{ load: [event: Event]; error: [event: Event | string] }>();
+const element = ref<HTMLImageElement | ComponentPublicInstance | null>(null);
+const visible = ref(false);
+const image = useImage();
+const native = computed(
+  () => (props.provider ?? image.options.provider) === "none" || /^(data:|blob:)/.test(props.src),
+);
+const shouldLoad = computed(
+  () => props.preload || props.loading === "eager" || !props.viewportLoad || visible.value,
+);
+const { stop } = useIntersectionObserver(
+  element,
+  (entries) => {
+    if (entries.some((entry) => entry.isIntersecting)) {
+      visible.value = true;
+      stop();
+    }
+  },
+  { rootMargin: props.rootMargin },
+);
+const style = computed<CSSProperties>(() => ({
+  objectFit:
+    props.mode === "sprite"
+      ? "none"
+      : props.fit === "inside"
+        ? "contain"
+        : props.fit === "outside"
+          ? "cover"
+          : props.fit,
+  objectPosition: props.position,
+}));
+useHead(() => ({
+  link:
+    props.preload && native.value
+      ? [{ rel: "preload", as: "image", href: props.src, fetchpriority: "high" as const }]
+      : [],
+}));
+</script>
+
+<template>
+  <img
+    v-if="!shouldLoad"
+    ref="element"
+    v-bind="$attrs"
+    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+    :alt="alt"
+    :width="width"
+    :height="height"
+    :style="style"
+  />
+  <img
+    v-else-if="native"
+    ref="element"
+    v-bind="$attrs"
+    :src="src"
+    :alt="alt"
+    :width="width"
+    :height="height"
+    :loading="visible ? 'eager' : loading"
+    :sizes="sizes"
+    :style="style"
+    @load="emit('load', $event)"
+    @error="emit('error', $event)"
+  />
+  <NuxtImg
+    v-else
+    ref="element"
+    v-bind="$attrs"
+    :src="src"
+    :alt="alt"
+    :width="width"
+    :height="height"
+    :loading="visible ? 'eager' : loading"
+    :sizes="sizes"
+    :quality="quality"
+    :fit="fit"
+    :provider="provider"
+    :format="format"
+    :preload="preload"
+    :placeholder="placeholder"
+    :preset="preset"
+    :densities="densities"
+    :style="style"
+    @load="emit('load', $event)"
+    @error="emit('error', $event)"
+  />
+</template>

package/dist/resources/components/nuxt/site-source/app/components/ui/Marquee.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    direction?: "left" | "right";
+    duration?: number;
+    pauseOnHover?: boolean;
+    gap?: string;
+    rowClass?: string;
+    contentClass?: string;
+  }>(),
+  {
+    direction: "left",
+    duration: 40,
+    pauseOnHover: true,
+    gap: "30px",
+    rowClass: "",
+    contentClass: "",
+  },
+);
+const host = ref<HTMLElement | null>(null);
+const rtl = ref(false);
+onMounted(() => {
+  if (host.value) rtl.value = getComputedStyle(host.value).direction === "rtl";
+});
+const reverse = computed(() =>
+  rtl.value ? props.direction === "left" : props.direction === "right",
+);
+</script>
+
+<template>
+  <div
+    ref="host"
+    class="marquee"
+    :class="{ 'marquee--pause': pauseOnHover, 'marquee--reverse': reverse }"
+    :style="{ '--marquee-duration': `${duration}s`, '--marquee-gap': gap }"
+  >
+    <div dir="ltr" class="marquee__row" :class="rowClass">
+      <div
+        v-for="group in 2"
+        :key="group"
+        class="marquee__group"
+        :class="contentClass"
+        :aria-hidden="group === 2 ? true : undefined"
+        :inert="group === 2"
+      >
+        <slot :group-index="group" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.marquee {
+  width: 100%;
+  overflow: hidden;
+}
+
+.marquee__row {
+  display: flex;
+  width: max-content;
+  animation: marquee var(--marquee-duration) linear infinite;
+}
+
+.marquee__group {
+  display: flex;
+  flex-shrink: 0;
+  gap: var(--marquee-gap);
+  padding-inline-start: var(--marquee-gap);
+}
+
+.marquee--reverse .marquee__row {
+  animation-direction: reverse;
+}
+
+.marquee--pause:hover .marquee__row,
+.marquee:focus-within .marquee__row {
+  animation-play-state: paused;
+}
+
+@keyframes marquee {
+  to {
+    transform: translateX(-50%);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .marquee {
+    overflow-x: auto;
+  }
+
+  .marquee__row {
+    animation: none;
+  }
+
+  .marquee__group[aria-hidden="true"] {
+    display: none;
+  }
+}
+</style>

package/dist/resources/components/nuxt/site-source/app/components/ui/Modal.vue

@@ -6,12 +6,14 @@ const props = withDefaults(
     title?: string;
     description?: string;
     closeLabel?: string;
+    closeIcon?: string;
     ui?: Record<string, unknown>;
   }>(),
   {
     modelValue: undefined,
     open: undefined,
     closeLabel: "Close modal",
+    closeIcon: "i-lucide-x",
     ui: () => ({}),
   },
 );
@@ -35,97 +37,33 @@ const isOpen = computed({
     }
   },
 });
-
-function close() {
-  isOpen.value = false;
-}
 </script>
 
 <template>
-  <UModal v-bind="$attrs" v-model:open="isOpen" :ui="ui">
-    <slot name="trigger" />
-
-    <template #content>
-      <section class="base-modal-panel" role="dialog" aria-modal="true">
-        <header v-if="title || description || $slots.header" class="base-modal-panel__header">
-          <slot name="header" :close="close">
-            <div class="base-modal-panel__copy">
-              <h2 v-if="title">{{ title }}</h2>
-              <p v-if="description">{{ description }}</p>
-            </div>
-          </slot>
-          <UButton
-            color="neutral"
-            variant="ghost"
-            size="sm"
-            square
-            icon="i-lucide-x"
-            :aria-label="closeLabel"
-            @click="close"
-          />
-        </header>
-        <div class="base-modal-panel__body">
-          <slot name="content" :close="close">
-            <slot :close="close" />
-          </slot>
-        </div>
-        <footer v-if="$slots.footer" class="base-modal-panel__footer">
-          <slot name="footer" :close="close" />
-        </footer>
-      </section>
+  <UModal v-bind="$attrs" v-model:open="isOpen" :title="title" :description="description" :ui="ui">
+    <template #close="{ ui: modalUi }">
+      <UiButton
+        color="neutral"
+        variant="ghost"
+        :icon="closeIcon"
+        size="sm"
+        square
+        :aria-label="closeLabel"
+        :class="modalUi.close()"
+      />
+    </template>
+    <template v-if="$slots.trigger" #default><slot name="trigger" /></template>
+    <template v-if="$slots.content" #content="slotProps">
+      <slot name="content" v-bind="slotProps" />
+    </template>
+    <template v-if="$slots.header" #header="slotProps">
+      <slot name="header" v-bind="slotProps" />
+    </template>
+    <template v-if="$slots.body || $slots.default" #body="slotProps">
+      <slot name="body" v-bind="slotProps"><slot v-bind="slotProps" /></slot>
+    </template>
+    <template v-if="$slots.footer" #footer="slotProps">
+      <slot name="footer" v-bind="slotProps" />
     </template>
   </UModal>
 </template>
-
-<style scoped>
-.base-modal-panel {
-  display: grid;
-  max-height: min(720px, calc(100dvh - 48px));
-  overflow: hidden;
-  color: var(--site-color-text);
-}
-
-.base-modal-panel__header,
-.base-modal-panel__footer {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 16px;
-  padding: 20px;
-}
-
-.base-modal-panel__header {
-  border-bottom: 1px solid var(--site-color-border);
-}
-
-.base-modal-panel__footer {
-  border-top: 1px solid var(--site-color-border);
-}
-
-.base-modal-panel__copy {
-  display: grid;
-  min-width: 0;
-  gap: 4px;
-}
-
-.base-modal-panel__copy h2,
-.base-modal-panel__copy p {
-  margin: 0;
-}
-
-.base-modal-panel__copy h2 {
-  font-size: 18px;
-  line-height: 1.35;
-}
-
-.base-modal-panel__copy p {
-  color: var(--site-color-muted);
-  line-height: 1.6;
-}
-
-.base-modal-panel__body {
-  min-width: 0;
-  overflow: auto;
-  padding: 20px;
-}
-</style>