@stackonward/cli 1.5.3 → 1.6.0

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

@@ -1,11 +1,17 @@
 <script setup lang="ts">
+import type { PopoverProps } from "@nuxt/ui";
+
 interface PopoverAction {
   label: string;
   icon?: string;
   disabled?: boolean;
   value?: string;
+  to?: string;
+  target?: string;
+  data?: unknown;
 }
 
+defineOptions({ inheritAttrs: false });
 const props = withDefaults(
   defineProps<{
     modelValue?: boolean;
@@ -13,24 +19,40 @@ const props = withDefaults(
     title?: string;
     description?: string;
     actions?: PopoverAction[];
-    ui?: Record<string, unknown>;
+    ui?: PopoverProps["ui"];
+    mode?: "click" | "hover" | "manual";
+    content?: PopoverProps["content"];
+    portal?: PopoverProps["portal"];
+    arrow?: boolean;
+    dismissible?: boolean;
+    closeOnSelect?: boolean;
+    closeOnScroll?: boolean;
+    overlay?: boolean;
+    theme?: "light" | "dark";
+    openDelay?: number;
+    closeDelay?: number;
   }>(),
   {
     modelValue: undefined,
     open: undefined,
     actions: () => [],
     ui: () => ({}),
+    mode: "click",
+    arrow: false,
+    dismissible: true,
+    closeOnSelect: true,
+    closeOnScroll: false,
+    overlay: false,
+    openDelay: 0,
+    closeDelay: 300,
   },
 );
-
 const emit = defineEmits<{
   "update:modelValue": [value: boolean];
   "update:open": [value: boolean];
   select: [action: PopoverAction, index: number];
 }>();
-
 const internalOpen = ref(false);
-
 const isOpen = computed({
   get: () => props.open ?? props.modelValue ?? internalOpen.value,
   set: (value: boolean) => {
@@ -39,112 +61,84 @@ const isOpen = computed({
     emit("update:modelValue", value);
   },
 });
-
 function selectAction(action: PopoverAction, index: number) {
-  if (action.disabled) {
-    return;
-  }
   emit("select", action, index);
-  isOpen.value = false;
+  if (props.closeOnSelect) isOpen.value = false;
+}
+function updateOpen(value: boolean) {
+  if (props.mode !== "manual") isOpen.value = value;
 }
+onMounted(() => {
+  useEventListener(
+    window,
+    "scroll",
+    () => {
+      if (props.closeOnScroll) isOpen.value = false;
+    },
+    { capture: true, passive: true },
+  );
+});
 </script>
 
 <template>
-  <UPopover v-bind="$attrs" v-model:open="isOpen" :ui="ui">
-    <slot name="reference">
-      <slot name="trigger" />
-    </slot>
-
+  <Teleport to="body">
+    <div
+      v-if="overlay && isOpen"
+      class="fixed inset-0 z-40 bg-neutral/30"
+      aria-hidden="true"
+      @click="dismissible && (isOpen = false)"
+    />
+  </Teleport>
+  <UPopover
+    v-bind="$attrs"
+    :open="isOpen"
+    :mode="mode === 'hover' ? 'hover' : 'click'"
+    :content="content"
+    :portal="portal"
+    :arrow="arrow"
+    :dismissible="dismissible"
+    :open-delay="openDelay"
+    :close-delay="closeDelay"
+    :ui="{
+      ...ui,
+      content:
+        typeof ui.content === 'function'
+          ? ui.content
+          : [
+              'z-50 rounded-lg border-0 bg-surface ring-0 shadow-[0_2px_12px_rgb(0_0_0/10%)]',
+              theme,
+              ui.content,
+            ],
+    }"
+    @update:open="updateOpen"
+  >
+    <slot name="reference"><slot name="trigger" /></slot>
     <template #content>
-      <div class="base-popover-panel">
-        <header v-if="title || description" class="base-popover-panel__header">
-          <strong v-if="title">{{ title }}</strong>
-          <p v-if="description">{{ description }}</p>
+      <div class="min-w-[180px] max-w-[min(360px,calc(100vw-32px))] text-text">
+        <header v-if="title || description" class="px-4 pt-4 pb-2">
+          <strong v-if="title" class="text-base">{{ title }}</strong>
+          <p v-if="description" class="mt-1 text-sm text-muted">{{ description }}</p>
         </header>
-        <div v-if="$slots.default" class="base-popover-panel__body">
+        <div v-if="$slots.default" class="px-7.5 py-1 text-sm leading-[21px] max-md:text-base">
           <slot />
         </div>
-        <div v-if="actions.length" class="base-popover-panel__actions">
-          <button
+        <div v-if="actions.length" class="grid py-1">
+          <UiButton
             v-for="(action, index) in actions"
             :key="action.value || action.label"
-            type="button"
-            class="base-popover-panel__action"
+            color="neutral"
+            variant="ghost"
+            size="sm"
+            :to="action.to"
+            :target="action.target"
             :disabled="action.disabled"
+            :icon="action.icon"
+            class="h-auto min-h-[34px] justify-start rounded-none px-7.5 py-1 text-sm"
             @click="selectAction(action, index)"
+            >{{ action.label }}</UiButton
           >
-            <UIcon v-if="action.icon" :name="action.icon" class="base-popover-panel__icon" />
-            <span>{{ action.label }}</span>
-          </button>
         </div>
       </div>
     </template>
   </UPopover>
 </template>
-
-<style scoped>
-.base-popover-panel {
-  display: grid;
-  min-width: 220px;
-  max-width: min(320px, calc(100vw - 32px));
-  overflow: hidden;
-  border: 1px solid var(--site-color-border);
-  border-radius: var(--site-radius-lg);
-  background: var(--site-color-surface);
-  box-shadow: var(--site-shadow-soft);
-}
-
-.base-popover-panel__header,
-.base-popover-panel__body {
-  padding: 12px;
-}
-
-.base-popover-panel__header {
-  display: grid;
-  gap: 4px;
-  border-bottom: 1px solid var(--site-color-border);
-}
-
-.base-popover-panel__header p {
-  margin: 0;
-  color: var(--site-color-muted);
-  font-size: 13px;
-  line-height: 1.5;
-}
-
-.base-popover-panel__actions {
-  display: grid;
-  gap: 2px;
-  padding: 6px;
-}
-
-.base-popover-panel__action {
-  display: flex;
-  min-height: 38px;
-  width: 100%;
-  align-items: center;
-  gap: 8px;
-  border: 0;
-  border-radius: var(--site-radius-md);
-  background: transparent;
-  color: var(--site-color-text);
-  cursor: pointer;
-  padding: 0 10px;
-  text-align: left;
-}
-
-.base-popover-panel__action:hover {
-  background: var(--site-color-surface-muted);
-}
-
-.base-popover-panel__action:disabled {
-  cursor: not-allowed;
-  opacity: 0.55;
-}
-
-.base-popover-panel__icon {
-  width: 16px;
-  height: 16px;
-  color: var(--site-color-muted);
-}
-</style>

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+defineOptions({ inheritAttrs: false });
 type TextTone = "default" | "muted" | "dimmed" | "primary" | "success" | "warning" | "danger";
 type TextSize = "xs" | "sm" | "md" | "lg" | "xl";
 type TextWeight = "regular" | "medium" | "semibold" | "bold";
@@ -11,6 +12,10 @@ const props = withDefaults(
     weight?: TextWeight;
     truncate?: boolean;
     lineClamp?: number;
+    autoShrink?: boolean;
+    minFontSize?: number;
+    fontSizeStep?: number;
+    tooltip?: boolean;
   }>(),
   {
     as: "span",
@@ -19,6 +24,10 @@ const props = withDefaults(
     weight: "regular",
     truncate: false,
     lineClamp: undefined,
+    autoShrink: false,
+    minFontSize: 10,
+    fontSizeStep: 1,
+    tooltip: true,
   },
 );
 
@@ -28,24 +37,87 @@ const classes = computed(() => [
   `base-text--size-${props.size}`,
   `base-text--weight-${props.weight}`,
   {
-    "base-text--truncate": props.truncate,
+    "base-text--truncate": props.truncate || (props.autoShrink && !props.lineClamp),
     "base-text--clamp": props.lineClamp,
   },
 ]);
 
-const style = computed(() =>
-  props.lineClamp
-    ? {
-        "--base-text-line-clamp": String(props.lineClamp),
-      }
-    : undefined,
+const element = ref<HTMLElement | null>(null);
+const fontSize = ref<number>();
+const overflowing = ref(false);
+const text = ref("");
+let measurement = 0;
+const style = computed(() => ({
+  "--base-text-line-clamp": String(props.lineClamp ?? 1),
+  fontSize: fontSize.value ? `${fontSize.value}px` : undefined,
+}));
+async function measure() {
+  const run = ++measurement;
+  fontSize.value = undefined;
+  await nextTick();
+  const node = element.value;
+  if (!node || run !== measurement) return;
+  text.value = node.textContent?.trim() ?? "";
+  const exceeds = () =>
+    node.scrollWidth > node.clientWidth + 1 || node.scrollHeight > node.clientHeight + 1;
+  if (props.autoShrink) {
+    let size = Number.parseFloat(getComputedStyle(node).fontSize);
+    while (exceeds() && size > props.minFontSize) {
+      size = Math.max(props.minFontSize, size - Math.max(0.25, props.fontSizeStep));
+      fontSize.value = size;
+      await nextTick();
+      if (run !== measurement) return;
+    }
+  }
+  overflowing.value = exceeds();
+}
+let previousWidth = 0;
+useResizeObserver(element, ([entry]) => {
+  if (entry && entry.contentRect.width !== previousWidth) {
+    previousWidth = entry.contentRect.width;
+    void measure();
+  }
+});
+useMutationObserver(
+  element,
+  () => {
+    void measure();
+  },
+  { childList: true, subtree: true, characterData: true },
+);
+watch(
+  () => [
+    props.autoShrink,
+    props.lineClamp,
+    props.truncate,
+    props.minFontSize,
+    props.fontSizeStep,
+    props.size,
+  ],
+  () => {
+    void measure();
+  },
 );
+onMounted(() => {
+  void measure();
+});
+onBeforeUnmount(() => {
+  measurement++;
+});
 </script>
 
 <template>
-  <component :is="as" :class="classes" :style="style">
-    <slot />
-  </component>
+  <UTooltip :text="text" :disabled="!tooltip || !overflowing">
+    <component
+      :is="as"
+      ref="element"
+      v-bind="$attrs"
+      :class="classes"
+      :style="style"
+      :tabindex="tooltip && overflowing ? 0 : undefined"
+      ><slot
+    /></component>
+  </UTooltip>
 </template>
 
 <style scoped>
@@ -62,7 +134,7 @@ const style = computed(() =>
 }
 
 .base-text--tone-dimmed {
-  color: #94a3b8;
+  color: var(--site-color-dimmed);
 }
 
 .base-text--tone-primary {
@@ -70,7 +142,7 @@ const style = computed(() =>
 }
 
 .base-text--tone-success {
-  color: #16a34a;
+  color: var(--site-color-success);
 }
 
 .base-text--tone-warning {

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

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false });
+const props = withDefaults(
+  defineProps<{
+    src: string;
+    poster?: string;
+    preload?: "none" | "metadata" | "auto";
+    muted?: boolean;
+    autoplay?: boolean;
+    loop?: boolean;
+    controls?: boolean;
+    viewportPreload?: boolean;
+    playLabel?: string;
+    pauseLabel?: string;
+  }>(),
+  {
+    muted: true,
+    autoplay: true,
+    loop: true,
+    controls: true,
+    viewportPreload: false,
+    playLabel: "Play video",
+    pauseLabel: "Pause video",
+  },
+);
+const emit = defineEmits<{
+  ended: [];
+  timeUpdate: [time: number];
+  play: [];
+  pause: [];
+  error: [error: unknown];
+}>();
+const video = ref<HTMLVideoElement | null>(null);
+const playing = ref(false);
+const visible = ref(false);
+useIntersectionObserver(
+  video,
+  (entries) => {
+    visible.value = entries.some((entry) => entry.isIntersecting);
+  },
+  { rootMargin: "200px" },
+);
+const preload = computed(
+  () => props.preload ?? (visible.value ? (props.viewportPreload ? "auto" : "metadata") : "none"),
+);
+async function play() {
+  try {
+    await video.value?.play();
+  } catch (error) {
+    emit("error", error);
+  }
+}
+function pause() {
+  video.value?.pause();
+}
+function toggle() {
+  if (playing.value) pause();
+  else void play();
+}
+defineExpose({ play, pause, toggle });
+</script>
+
+<template>
+  <div class="relative size-full">
+    <video
+      ref="video"
+      v-bind="$attrs"
+      class="size-full rounded-2ml object-cover"
+      playsinline
+      :src="src"
+      :poster="poster"
+      :preload="preload"
+      :muted="muted"
+      :autoplay="autoplay"
+      :loop="loop"
+      :controls="controls"
+      @play="
+        playing = true;
+        emit('play');
+      "
+      @pause="
+        playing = false;
+        emit('pause');
+      "
+      @ended="
+        playing = false;
+        emit('ended');
+      "
+      @timeupdate="emit('timeUpdate', video?.currentTime ?? 0)"
+      @error="emit('error', video?.error)"
+    >
+      <slot />
+    </video>
+    <UiButton
+      v-if="!controls || !playing"
+      color="neutral"
+      variant="solid"
+      square
+      :icon="playing ? 'i-lucide-pause' : 'i-lucide-play'"
+      :aria-label="playing ? pauseLabel : playLabel"
+      class="absolute top-1/2 left-1/2 size-[70px] -translate-1/2 rounded-full bg-neutral/50 text-white hover:bg-neutral/70"
+      @click="toggle"
+    />
+  </div>
+</template>

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

@@ -0,0 +1,126 @@
+<script setup lang="ts">
+interface Service {
+  id: string;
+  label: string;
+  description?: string;
+  icon?: string;
+  message: string;
+}
+const props = defineProps<{
+  phone: string;
+  services: Service[];
+  helpImage?: string;
+  labels: {
+    open: string;
+    select: string;
+    preview: string;
+    hint: string;
+    web: string;
+    app: string;
+    followUp?: string;
+  };
+}>();
+const menuOpen = ref(false);
+const previewOpen = ref(false);
+const selected = ref<Service>();
+const mobile = useMediaQuery("(max-width: 767px)");
+const { dockedHeight } = useFloatingBottomStack();
+const { y } = useWindowScroll();
+const bottom = computed(() => dockedHeight.value + (mobile.value ? 16 : y.value > 300 ? 84 : 24));
+const phone = computed(() => props.phone.replace(/[^0-9]/g, ""));
+const query = computed(() =>
+  new URLSearchParams({ phone: phone.value, text: selected.value?.message ?? "" }).toString(),
+);
+const webUrl = computed(() => "https://web.whatsapp.com/send?" + query.value);
+const appUrl = computed(
+  () =>
+    "https://wa.me/" +
+    phone.value +
+    "?" +
+    new URLSearchParams({ text: selected.value?.message ?? "" }).toString(),
+);
+function select(service: Service) {
+  selected.value = service;
+  menuOpen.value = false;
+  previewOpen.value = true;
+}
+</script>
+
+<template>
+  <div class="fixed end-5 z-40 transition-[bottom] duration-300" :style="{ bottom: `${bottom}px` }">
+    <UiPopover
+      v-model:open="menuOpen"
+      :mode="mobile ? 'click' : 'hover'"
+      :content="{ side: 'top', align: 'end' }"
+      arrow
+    >
+      <template #reference>
+        <UiButton
+          :aria-label="labels.open"
+          color="neutral"
+          variant="ghost"
+          class="relative h-[108px] w-[110px] p-0 hover:bg-transparent max-md:size-10"
+        >
+          <UiImage
+            v-if="helpImage"
+            :src="helpImage"
+            alt=""
+            :width="130"
+            :height="40"
+            class="absolute top-0 w-full max-md:hidden"
+          />
+          <span
+            class="absolute end-1 bottom-1 grid size-[66px] place-items-center rounded-full bg-success/20 max-md:static max-md:size-10"
+            ><UiIcon name="brand:whatsapp" class="size-icon-3xl text-success max-md:size-icon-xl"
+          /></span>
+        </UiButton>
+      </template>
+      <div class="min-w-[240px] py-2">
+        <h3 class="border-b border-border px-4 py-3 text-sm font-semibold">{{ labels.select }}</h3>
+        <UiButton
+          v-for="service in services"
+          :key="service.id"
+          color="neutral"
+          variant="ghost"
+          class="h-auto w-full justify-start rounded-none px-4 py-3"
+          :icon="service.icon"
+          @click="select(service)"
+        >
+          <span class="text-start"
+            ><strong class="block text-sm">{{ service.label }}</strong
+            ><span v-if="service.description" class="block text-xs text-muted">{{
+              service.description
+            }}</span></span
+          >
+        </UiButton>
+      </div>
+    </UiPopover>
+    <UiModal
+      v-model:open="previewOpen"
+      :title="labels.preview"
+      :description="labels.hint"
+      :ui="{ content: 'w-[400px] max-w-[92vw]' }"
+    >
+      <template #body>
+        <pre
+          class="rounded-lg border border-border bg-surface-muted p-2.5 text-xs whitespace-pre-wrap"
+          >{{ selected?.message }}</pre>
+      </template>
+      <template #footer>
+        <div class="grid w-full grid-cols-2 gap-2">
+          <UiButton
+            :href="webUrl"
+            target="_blank"
+            external
+            color="neutral"
+            variant="outline"
+            block
+            >{{ labels.web }}</UiButton
+          >
+          <UiButton :href="appUrl" target="_blank" external block>{{ labels.app }}</UiButton>
+        </div>
+        <p v-if="labels.followUp" class="text-xs text-muted">{{ labels.followUp }}</p>
+      </template>
+    </UiModal>
+  </div>
+</template>