@stackonward/cli 1.5.3 → 1.6.0

package/dist/resources/components/nuxt/site-source/app/components/content/Reviews.vue

@@ -0,0 +1,93 @@
+<template>
+  <section class="min-w-0 overflow-hidden py-15">
+    <div class="mx-auto max-w-7xl px-4">
+      <slot name="title">
+        <h2 v-if="title" class="mb-10 text-center text-3xl font-bold">{{ title }}</h2>
+      </slot>
+    </div>
+
+    <div class="flex flex-col gap-7.5 w-full pb-15 max-md:pb-7.5 max-md:gap-6">
+      <UiMarquee
+        v-for="(rowItems, rowIndex) in reviews"
+        :key="rowIndex"
+        :direction="rowIndex % 2 === 0 ? 'left' : 'right'"
+        :duration="40"
+        content-class="max-md:gap-6"
+      >
+        <div
+          v-for="(review, index) in rowItems"
+          :key="`row-${rowIndex}-${index}`"
+          class="w-[450px] min-h-[325px] p-[26px] border border-solid border-border rounded-2ml bg-surface flex-shrink-0 hover:shadow-lg max-md:px-4 max-md:w-[277px] max-md:min-h-[240px]"
+        >
+          <div class="flex items-center gap-5 mb-7.5 max-md:gap-2.5 max-md:mb-5">
+            <UiImage
+              :src="review.avatar"
+              :alt="`the avatar of ${review.author}`"
+              width="80"
+              height="80"
+              class="w-20 h-20 rounded-full object-cover max-md:w-11 max-md:h-11"
+            />
+            <div class="flex flex-col">
+              <p class="text-lg text-text max-md:text-base">
+                <b>{{ splitAuthor(review.author).name }}</b
+                >{{ splitAuthor(review.author).detail }}
+              </p>
+              <div class="flex gap-1 mt-2.5 max-md:mt-2">
+                <UiIcon
+                  v-for="i in 5"
+                  :key="i"
+                  name="i-lucide-star"
+                  class="size-icon-md max-md:size-icon-sm text-warning"
+                />
+              </div>
+            </div>
+          </div>
+          <p class="text-text max-md:text-xs">
+            {{ review.description }}
+          </p>
+        </div>
+      </UiMarquee>
+    </div>
+
+    <UiButton
+      v-if="showButton"
+      size="lg"
+      class="flex justify-center mx-auto"
+      :label="buttonText"
+      ripple
+      :to="to"
+    />
+  </section>
+</template>
+
+<script setup lang="ts">
+interface ReviewsItem {
+  avatar: string;
+  author: string;
+  description: string;
+}
+
+defineProps<{
+  title?: string;
+  reviews: ReviewsItem[][];
+  showButton?: boolean;
+  buttonText?: string;
+  to?: string;
+}>();
+
+const splitAuthor = (author: string) => {
+  const separatorIndex = author.indexOf(",");
+
+  if (separatorIndex === -1) {
+    return {
+      name: author,
+      detail: "",
+    };
+  }
+
+  return {
+    name: author.slice(0, separatorIndex),
+    detail: ` ${author.slice(separatorIndex + 1).trimStart()}`,
+  };
+};
+</script>

package/dist/resources/components/nuxt/site-source/app/components/countdown/Timer.vue

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import { useCountdown } from "@stackonward/composables";
+
+const props = withDefaults(
+  defineProps<{
+    duration?: number;
+    storageKey: string;
+    showHours?: boolean;
+    showMilliseconds?: boolean;
+    offerText?: string;
+    updateInterval?: number;
+    labels?: { hours: string; minutes: string; seconds: string; milliseconds: string };
+  }>(),
+  {
+    duration: 86400,
+    showHours: true,
+    showMilliseconds: false,
+    updateInterval: 1000,
+    labels: () => ({ hours: "HR", minutes: "MIN", seconds: "SEC", milliseconds: "MS" }),
+  },
+);
+const { remaining, start, stop } = useCountdown({
+  duration: props.duration,
+  storageKeyFn: () => props.storageKey,
+});
+const now = ref(0);
+const startedAt = ref(0);
+const mounted = ref(false);
+const { pause, resume } = useIntervalFn(
+  () => {
+    now.value = Date.now();
+  },
+  props.updateInterval,
+  { immediate: false },
+);
+function syncStart() {
+  startedAt.value = Number(localStorage.getItem(props.storageKey));
+  now.value = Date.now();
+}
+watch(remaining, syncStart);
+const milliseconds = computed(() =>
+  mounted.value && startedAt.value
+    ? props.duration * 1000 - ((now.value - startedAt.value) % (props.duration * 1000))
+    : props.duration * 1000,
+);
+const units = computed(() => {
+  const total = Math.floor(milliseconds.value / 1000);
+  return [
+    {
+      label: props.labels.hours,
+      value: Math.floor(total / 3600),
+      visible: props.showHours,
+      digits: 2,
+    },
+    {
+      label: props.labels.minutes,
+      value: Math.floor((total % 3600) / 60),
+      visible: true,
+      digits: 2,
+    },
+    { label: props.labels.seconds, value: total % 60, visible: true, digits: 2 },
+    {
+      label: props.labels.milliseconds,
+      value: milliseconds.value % 1000,
+      visible: props.showMilliseconds,
+      digits: 3,
+    },
+  ].filter((unit) => unit.visible);
+});
+onMounted(() => {
+  mounted.value = true;
+  start();
+  syncStart();
+  resume();
+  useEventListener(document, "visibilitychange", () => {
+    if (!document.hidden) {
+      start();
+      syncStart();
+    }
+  });
+  useEventListener(window, "focus", () => {
+    start();
+    syncStart();
+  });
+});
+onBeforeUnmount(() => {
+  pause();
+  stop();
+});
+</script>
+
+<template>
+  <div class="flex items-center justify-center gap-1.5" role="timer">
+    <div
+      v-if="offerText"
+      class="flex h-10 items-center gap-1.5 rounded-lg bg-surface px-2.5 py-2.5 text-lg font-bold text-primary shadow-[2px_2px_0_rgb(0_0_0/25%)] max-xl:text-sm"
+    >
+      <UiIcon name="i-lucide-clock" class="size-icon-md shrink-0" />{{ offerText }}
+    </div>
+    <div
+      v-for="unit in units"
+      :key="unit.label"
+      class="flex h-10 flex-col items-center justify-center rounded-[7px] bg-surface shadow-[2px_2px_0_rgb(0_0_0/25%)]"
+      :class="unit.digits === 3 ? 'w-[34px]' : 'w-8'"
+    >
+      <span class="text-lg leading-none font-black text-primary tabular-nums">{{
+        String(unit.value).padStart(unit.digits, "0")
+      }}</span>
+      <span class="mt-px text-[10px] leading-none text-muted">{{ unit.label }}</span>
+    </div>
+  </div>
+</template>

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

@@ -37,9 +37,9 @@ onClickOutside(dropdown, () => dropdown.value?.removeAttribute("open"));
     @keydown="handleKeydown"
   >
     <summary :aria-label="t('language.current', { language: current?.name || locale })">
-      <UIcon name="i-lucide-languages" aria-hidden="true" />
+      <UiIcon name="i-lucide-languages" aria-hidden="true" />
       <span>{{ current?.code.toUpperCase() || locale.toUpperCase() }}</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('language.select')">
       <button
@@ -50,7 +50,7 @@ onClickOutside(dropdown, () => dropdown.value?.removeAttribute("open"));
         @click="selectLocale(option.code)"
       >
         <span>{{ option.name }}</span>
-        <UIcon v-if="option.code === locale" name="i-lucide-check" aria-hidden="true" />
+        <UiIcon v-if="option.code === locale" name="i-lucide-check" aria-hidden="true" />
       </button>
     </div>
   </details>

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

@@ -1,34 +1,41 @@
 <script setup lang="ts">
-const isVisible = ref(false);
+const { y } = useWindowScroll();
+const isVisible = computed(() => y.value > 300);
+const mobile = useMediaQuery("(max-width: 767px)");
+const { dockedHeight } = useFloatingBottomStack();
+const bottom = computed(() => dockedHeight.value + (mobile.value ? 72 : 24));
 const { t } = useI18n();
 
-function updateVisibility(): void {
-  isVisible.value = window.scrollY > 320;
-}
-
 function scrollToTop(): void {
   const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
   window.scrollTo({ top: 0, behavior: reducedMotion ? "auto" : "smooth" });
 }
-
-onMounted(() => {
-  updateVisibility();
-  window.addEventListener("scroll", updateVisibility, { passive: true });
-});
-
-onBeforeUnmount(() => {
-  window.removeEventListener("scroll", updateVisibility);
-});
 </script>
 
 <template>
-  <button
-    type="button"
-    class="back-to-top"
-    :class="{ 'back-to-top--visible': isVisible }"
-    :aria-label="t('site.backToTop')"
-    @click="scrollToTop"
-  >
-    <UIcon name="i-lucide-chevron-up" class="back-to-top__icon" />
-  </button>
+  <Transition name="to-top">
+    <UiButton
+      v-if="isVisible"
+      color="neutral"
+      variant="outline"
+      square
+      icon="i-lucide-chevron-up"
+      class="fixed end-5 z-40 size-12 rounded-full max-md:size-10"
+      :style="{ bottom: `${bottom}px` }"
+      :aria-label="t('site.backToTop')"
+      @click="scrollToTop"
+    />
+  </Transition>
 </template>
+
+<style scoped>
+.to-top-enter-active,
+.to-top-leave-active {
+  transition: opacity 300ms;
+}
+
+.to-top-enter-from,
+.to-top-leave-to {
+  opacity: 0;
+}
+</style>

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

@@ -62,7 +62,7 @@ function hasChildren(item: NavItem): boolean {
           </NuxtLinkLocale>
           <NuxtLinkLocale :to="site.appPath" class="base-button base-button--primary">
             {{ primaryActionLabel }}
-            <UIcon name="i-lucide-arrow-right" />
+            <UiIcon name="i-lucide-arrow-right" />
           </NuxtLinkLocale>
         </slot>
         <button
@@ -73,7 +73,7 @@ function hasChildren(item: NavItem): boolean {
           :aria-label="t('navigation.toggle')"
           @click="isMenuOpen = !isMenuOpen"
         >
-          <UIcon
+          <UiIcon
             :name="isMenuOpen ? 'i-lucide-x' : 'i-lucide-menu'"
             class="site-header__menu-icon"
           />

package/dist/resources/components/nuxt/site-source/app/components/steps/Progress.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+const props = defineProps<{ items: string[]; currentStep: number }>();
+const columns = computed(() =>
+  props.items.map((_, index) => (index === 0 ? "auto" : "minmax(16px,1fr) auto")).join(" "),
+);
+</script>
+
+<template>
+  <ol
+    class="mx-auto grid w-full max-w-[420px] items-center gap-2 text-sm font-semibold max-md:max-w-full max-md:gap-1.5 max-md:text-xs"
+    :style="{ gridTemplateColumns: columns }"
+  >
+    <li v-for="(item, index) in items" :key="index" class="contents">
+      <span
+        v-if="index > 0"
+        aria-hidden="true"
+        class="h-px"
+        :class="currentStep > index ? 'bg-primary' : 'bg-border-strong'"
+      />
+      <span
+        class="flex items-center gap-1.5 whitespace-nowrap"
+        :class="currentStep >= index + 1 ? 'text-primary' : 'text-dimmed'"
+        :aria-current="currentStep === index + 1 ? 'step' : undefined"
+      >
+        <span
+          class="grid size-5 place-items-center rounded-full text-xs text-primary-contrast"
+          :class="currentStep >= index + 1 ? 'bg-primary' : 'bg-border-strong'"
+        >
+          <UiIcon v-if="currentStep > index + 1" name="i-lucide-check" class="size-icon-sm" />
+          <template v-else>{{ index + 1 }}</template>
+        </span>
+        {{ item }}
+      </span>
+    </li>
+  </ol>
+</template>

package/dist/resources/components/nuxt/site-source/app/components/steps/Showcase.vue

@@ -0,0 +1,340 @@
+<script setup lang="ts">
+import type { StepperItem } from "@nuxt/ui";
+interface StepItem {
+  title: string;
+  description: string;
+  icon?: string;
+}
+interface StepImage {
+  src: string;
+  alt: string;
+}
+const props = withDefaults(
+  defineProps<{
+    title?: string;
+    subtitle?: string;
+    steps: StepItem[];
+    images: StepImage[];
+    initialStep?: number;
+    showButton?: boolean;
+    buttonText?: string;
+    size?: "sm" | "md" | "lg";
+    imageMode?: "carousel" | "static";
+    to?: string;
+    interval?: number;
+    autoplay?: boolean;
+  }>(),
+  { initialStep: 0, size: "lg", imageMode: "carousel", interval: 4000, autoplay: true },
+);
+const emit = defineEmits<{ "step-change": [step: number] }>();
+const currentStep = ref(props.initialStep);
+const carouselRef = ref<{ emblaApi?: { scrollTo: (index: number) => void } } | null>(null);
+const reducedMotion = usePreferredReducedMotion();
+const visibility = useDocumentVisibility();
+const currentImage = computed(() => props.images[currentStep.value] ?? props.images[0]);
+const stepperItems = computed<StepperItem[]>(() =>
+  props.steps.map((step, index) => ({ ...step, value: index + 1 })),
+);
+const { pause, resume } = useIntervalFn(
+  () => {
+    if (props.steps.length) currentStep.value = (currentStep.value + 1) % props.steps.length;
+  },
+  props.interval,
+  { immediate: false },
+);
+function resumeAutoplay() {
+  if (props.autoplay && reducedMotion.value !== "reduce" && visibility.value === "visible")
+    resume();
+}
+function onStepChange(value: string | number | undefined) {
+  const index = Number(value);
+  if (Number.isInteger(index) && index >= 0 && index < props.steps.length) {
+    currentStep.value = index;
+    pause();
+    resumeAutoplay();
+  }
+}
+watch(currentStep, (index) => {
+  if (props.imageMode === "carousel") carouselRef.value?.emblaApi?.scrollTo(index);
+  emit("step-change", index);
+});
+watch([reducedMotion, visibility, () => props.autoplay], () => {
+  pause();
+  resumeAutoplay();
+});
+onMounted(resumeAutoplay);
+</script>
+
+<template>
+  <section class="overflow-hidden bg-gradient-to-b from-primary/10 to-surface px-4 py-15">
+    <div class="mx-auto w-full max-w-7xl">
+      <h2 v-if="title" class="mb-5 text-center text-3xl font-bold">{{ title }}</h2>
+      <p v-if="subtitle" class="section-subtitle">{{ subtitle }}</p>
+
+      <div
+        class="flex w-full justify-between items-center step-layout step-wrapper max-lg:flex-col"
+        @mouseenter="pause"
+        @mouseleave="resumeAutoplay"
+        @focusin="pause"
+        @focusout="resumeAutoplay"
+      >
+        <div
+          class="flex-[0_0_32%] relative ms-[75px] max-lg:hidden max-lg:w-full max-lg:text-center"
+        >
+          <UCarousel
+            v-if="imageMode !== 'static'"
+            ref="carouselRef"
+            v-slot="{ item }"
+            dir="ltr"
+            :items="images"
+            :start-index="initialStep"
+            class="carousel-container relative w-full max-w-[407px] mx-auto z-1"
+            @select="onStepChange"
+          >
+            <UiImage
+              :src="item.src"
+              :alt="item.alt"
+              width="239"
+              height="458"
+              class="w-auto h-[458px] mx-auto object-cover"
+            />
+          </UCarousel>
+          <div
+            v-else-if="currentImage"
+            class="carousel-container relative w-full max-w-[407px] mx-auto z-1"
+          >
+            <UiImage
+              :src="currentImage.src"
+              :alt="currentImage.alt"
+              width="677"
+              height="394"
+              class="w-full h-auto mx-auto object-contain"
+              loading="lazy"
+              fit="contain"
+            />
+          </div>
+        </div>
+
+        <div class="flex-[0_0_52%] relative max-lg:w-fit max-lg:text-center">
+          <UStepper
+            orientation="vertical"
+            class="step-container max-lg:justify-center"
+            :model-value="currentStep + 1"
+            :items="stepperItems"
+            :size="size"
+            :linear="false"
+            @update:model-value="onStepChange(Number($event) - 1)"
+          >
+            <template #indicator="{ item }">
+              <UiIcon v-if="item.icon" class="size-icon-xl max-lg:size-icon-lg" :name="item.icon" />
+            </template>
+            <template #title="{ item }"
+              ><button
+                type="button"
+                class="w-full text-start"
+                @click="onStepChange(Number(item.value) - 1)"
+              >
+                {{ item.title }}
+              </button></template
+            >
+          </UStepper>
+        </div>
+      </div>
+
+      <slot name="footer">
+        <UiButton
+          v-if="showButton"
+          size="lg"
+          :label="buttonText"
+          class="flex justify-center mt-10 mx-auto max-lg:mt-0"
+          ripple
+          :to="to"
+        />
+      </slot>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.section-subtitle {
+  text-align: center;
+  color: var(--site-color-muted);
+  font-size: 18px;
+  line-height: 21px;
+  margin-bottom: 60px;
+}
+
+.carousel-container {
+  position: relative;
+  width: 100%;
+  max-width: 407px;
+  margin: 0 auto;
+}
+
+.carousel-container::after {
+  content: "";
+  position: absolute;
+  top: 8px;
+  left: 50%;
+  width: 444px;
+  height: 444px;
+  background: color-mix(in srgb, var(--site-color-primary) 10%, var(--site-color-surface));
+  border-radius: 50%;
+  z-index: -1;
+  transform: translateX(-50%);
+}
+
+.step-container :deep(> div) {
+  gap: 48px;
+}
+
+.step-container :deep(.group) {
+  align-items: center;
+  gap: 48px;
+}
+
+.step-container :deep(.u-stepper-indicator) {
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--site-color-primary) 50%, transparent);
+  border-color: var(--site-color-surface);
+}
+
+.step-container :deep(.step-indicator) {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--site-color-surface);
+  font-size: 28px;
+  font-weight: bold;
+  border-radius: 50%;
+}
+
+.step-container :deep([data-state="active"] .step-indicator),
+.step-container :deep([data-state="completed"] .step-indicator) {
+  background-color: var(--color-primary);
+  box-shadow:
+    0 0 0 2px var(--site-color-surface),
+    0 0 0 4px var(--color-primary);
+}
+
+.step-container :deep([data-state="inactive"] .step-indicator) {
+  background-color: var(--site-color-border-strong);
+  box-shadow:
+    0 0 0 2px var(--site-color-surface),
+    0 0 0 4px var(--site-color-border-strong);
+}
+
+.step-container :deep(.step-separator) {
+  width: 1px;
+  height: calc((100% - 100px) / 2);
+  left: 24px;
+  background-color: var(--site-color-border-strong);
+  top: 80px;
+  z-index: 0;
+}
+
+[dir="rtl"] .step-container :deep(.step-separator) {
+  left: auto;
+  right: 24px;
+}
+
+.step-container :deep(.step-item:nth-child(2) .step-separator) {
+  top: calc(50% - 24px);
+}
+
+.step-container :deep([data-state="completed"] + .step-separator),
+.step-container :deep([data-state="active"] + .step-separator) {
+  background-color: var(--color-primary);
+}
+
+.step-container :deep([data-state="inactive"] .step-wrapper) {
+  background-color: var(--site-color-surface-muted);
+}
+
+.step-container :deep(.step-wrapper) {
+  display: flex;
+  flex-direction: column;
+  margin-top: 0;
+  padding: 30px;
+  background: var(--color-primary);
+  border-radius: 10px;
+  width: 100%;
+  max-width: 566px;
+  color: var(--site-color-primary-contrast);
+  cursor: pointer;
+}
+
+.step-container :deep(.step-title) {
+  color: var(--site-color-primary-contrast);
+  font-size: 28px;
+  margin-bottom: 10px;
+}
+
+.step-container :deep([data-state="inactive"] .step-wrapper .step-title),
+.step-container :deep([data-state="inactive"] .step-wrapper .step-description) {
+  color: var(--site-color-text);
+}
+
+@media (width <= 1024px) {
+  .step-container :deep(.step-description) {
+    padding-bottom: 30px !important;
+  }
+
+  .step-container :deep(.step-container) {
+    height: 100%;
+  }
+
+  .step-container :deep(.step-wrapper) {
+    max-width: 300px;
+    margin-top: 0;
+    padding: 0;
+    background: transparent;
+    color: var(--site-color-text);
+  }
+
+  .step-container :deep(> div) {
+    gap: 0;
+  }
+
+  .step-container :deep(.group) {
+    align-items: flex-start;
+    gap: 20px;
+  }
+
+  .step-container :deep(.step-separator) {
+    height: calc((100% - 100px) / 2);
+    top: 0;
+    left: 18px;
+  }
+
+  [dir="rtl"] .step-container :deep(.step-separator) {
+    left: auto;
+    right: 18px;
+  }
+
+  .step-container :deep(.step-item:nth-child(2) .step-separator) {
+    top: calc(33% + 18px);
+  }
+
+  .step-container :deep([data-state="inactive"] .step-wrapper) {
+    background: transparent;
+  }
+
+  .section-subtitle {
+    text-align: center;
+    color: var(--site-color-muted);
+    font-size: 18px;
+    line-height: 21px;
+    margin-bottom: 30px;
+  }
+}
+
+@media (width <= 768px) {
+  .step-container :deep(.step-wrapper) {
+    margin-top: 0;
+    padding: 0;
+    background: transparent;
+    color: var(--site-color-text);
+  }
+}
+</style>