@sbc-connect/nuxt-base 0.0.0-test-ld-20260520212549

package/app/components/Connect/Modal/index.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+const isSmallScreen = useMediaQuery('(max-width: 640px)')
+
+defineProps<{
+  title: string
+  description: string
+  dismissible: boolean
+  buttons?: ConnectModalButton[]
+}>()
+defineEmits<{ close: [] }>()
+</script>
+
+<template>
+  <UModal
+    overlay
+    :title
+    :description
+    :dismissible
+  >
+    <template #content>
+      <div class="p-10 flex flex-col gap-6">
+        <div class="flex flex-col gap-6 text-left">
+          <h2 class="text-2xl">
+            {{ title }}
+          </h2>
+          <p class="-mt-2">
+            {{ description }}
+          </p>
+        </div>
+        <div v-if="buttons && buttons.length" class="flex flex-wrap items-center justify-center gap-4">
+          <template
+            v-for="button in buttons"
+            :key="button.label"
+          >
+            <UButton
+              v-if="button.shouldClose"
+              v-bind="button"
+              :block="isSmallScreen"
+              @click="$emit('close')"
+            />
+            <UButton
+              v-else
+              v-bind="button"
+              :block="isSmallScreen"
+            />
+          </template>
+        </div>
+      </div>
+    </template>
+  </UModal>
+</template>

package/app/components/Connect/PageSection.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import type { ButtonProps } from '#ui/types'
+
+defineProps<{
+  heading?: {
+    label?: string
+    labelClass?: string
+    level?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+    icon?: string
+    iconClass?: string
+    ui?: string
+  }
+  uiBody?: string
+  actions?: ButtonProps[]
+}>()
+</script>
+
+<template>
+  <UCard
+    as="section"
+    class="w-full"
+    variant="outline"
+    :ui="{
+      header: heading?.ui ?? 'bg-shade-secondary px-4 py-4 sm:px-4 rounded-t-md',
+      body: uiBody ?? 'p-0 sm:p-0',
+      footer: 'p-0 sm:p-0',
+    }"
+  >
+    <template v-if="heading?.label || $slots.header" #header>
+      <slot name="header">
+        <div class="flex items-center justify-between gap-2.5">
+          <component :is="heading?.level || 'h2'">
+            <div class="flex items-center gap-2.5">
+              <UIcon
+                v-if="heading?.icon"
+                :name="heading.icon"
+                :class="heading?.iconClass || 'size-6 shrink-0 text-primary'"
+              />
+              <span :class="heading?.labelClass || 'font-semibold text-neutral-highlighted text-base'">
+                {{ heading?.label }}
+              </span>
+            </div>
+          </component>
+
+          <div class="flex items-center gap-2.5">
+            <UButton
+              v-for="(action, i) in actions"
+              :key="i"
+              v-bind="action"
+            />
+          </div>
+        </div>
+      </slot>
+    </template>
+    <slot />
+  </UCard>
+</template>

package/app/components/Connect/Select.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+const props = defineProps<{
+  id: string
+  label: string
+}>()
+
+defineEmits<{
+  change: []
+}>()
+
+const labelId = props.id + '-label'
+</script>
+
+<template>
+  <ConnectFloatingLabel
+    :id="labelId"
+    :label
+    variant="select"
+  >
+    <USelect
+      :id
+      :data-testid="id"
+      :aria-labelledby="labelId"
+      v-bind="$attrs"
+      @change="$emit('change')"
+    />
+  </ConnectFloatingLabel>
+</template>

package/app/components/Connect/Slideover/WhatsNew.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+const { $sanitize } = useNuxtApp()
+
+defineProps<{
+  items: ConnectWhatsNewItem[]
+}>()
+</script>
+
+<template>
+  <USlideover
+    :title="$t('connect.label.whatsNewSlideover')"
+    :description="$t('connect.text.whatsNewSlideoverDescription')"
+    :overlay="false"
+    :close="{
+      color: 'neutral',
+      variant: 'ghost',
+      class: 'cursor-pointer hover:bg-shade/50 focus-visible:bg-transparent focus-visible:ring-2 rounded-full',
+    }"
+    :ui="{
+      header: 'bg-brand-inverted',
+      title: 'text-brand',
+      body: 'flex-1 overflow-y-auto p-0 sm:p-0',
+      description: 'sr-only',
+    }"
+  >
+    <template #body>
+      <div class="overflow-y-auto text-neutral">
+        <div class="flex-1">
+          <ol v-if="items.length">
+            <li
+              v-for="item, i in items"
+              :key="i"
+              class="flex flex-col border-b border-gray-500 p-4 last:border-0"
+            >
+              <h3 class="text-lg font-bold">
+                {{ item.title }}
+              </h3>
+              <time class="text-sm">{{ item.date }}</time>
+              <!-- eslint-disable vue/no-v-html -->
+              <div
+                class="pt-3 vhtml"
+                v-html="$sanitize(item.description)"
+              />
+            </li>
+          </ol>
+          <div v-else class="flex justify-center py-10">
+            <span>{{ $t('connect.text.whatsNewSlideoverEmpty') }}</span>
+          </div>
+        </div>
+      </div>
+    </template>
+  </USlideover>
+</template>
+
+<!-- must style globally for vhtml style to work  -->
+<style>
+.vhtml a {
+  color: var(--ui-mark);
+  text-decoration: underline;
+}
+</style>

package/app/components/Connect/Spinner.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+const {
+  fullscreen = false,
+  size = 75
+} = defineProps<{
+  fullscreen?: boolean
+  size?: number
+}>()
+
+const spinnerStyle = computed(() => ({
+  '--spinner-size': `${size}px`,
+  '--spinner-margin': `${size / -2}px`
+}))
+</script>
+
+<template>
+  <!-- eslint-disable tailwindcss/no-custom-classname -->
+  <Teleport v-if="fullscreen" to="body">
+    <div class="fixed inset-0 z-[999] h-screen w-screen bg-gray-100 opacity-50" />
+    <svg
+      class="spinner fixed"
+      viewBox="0 0 50 50"
+      :style="spinnerStyle"
+    >
+      <circle
+        class="path"
+        cx="25"
+        cy="25"
+        r="20"
+        fill="none"
+        stroke-width="5"
+      />
+    </svg>
+  </Teleport>
+  <svg
+    v-else
+    class="spinner absolute"
+    viewBox="0 0 50 50"
+    :style="spinnerStyle"
+  >
+    <circle
+      class="path"
+      cx="25"
+      cy="25"
+      r="20"
+      fill="none"
+      stroke-width="5"
+    />
+  </svg>
+</template>
+
+<style scoped>
+  .spinner {
+    animation: rotate 1.5s linear infinite;
+    z-index: 10000;
+    top: 50%;
+    left: 50%;
+    margin-top: var(--spinner-margin, -37.5px);
+    margin-left: var(--spinner-margin, -37.5px);
+    width: var(--spinner-size, 75px);
+    height: var(--spinner-size, 75px);
+    transform-origin: 50% 50%;
+  }
+
+  .spinner .path {
+    stroke: #1669bb;
+    stroke-linecap: round;
+    animation: dash 1.25s ease-in-out infinite;
+  }
+
+  @keyframes rotate {
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes dash {
+    0% {
+      stroke-dasharray: 1, 150;
+      stroke-dashoffset: 0;
+    }
+    50% {
+      stroke-dasharray: 90, 150;
+      stroke-dashoffset: -35;
+    }
+    100% {
+      stroke-dasharray: 90, 150;
+      stroke-dashoffset: -124;
+    }
+  }
+</style>

package/app/components/Connect/SystemBanner.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+const ld = useConnectLaunchDarkly()
+const { $sanitize } = useNuxtApp()
+
+const {
+  dismissible = false,
+  icon = 'i-mdi-information'
+} = defineProps<{
+  dismissible?: boolean
+  icon?: string
+}>()
+
+const close = ref(false)
+const message = ref('')
+onMounted(async () => {
+  message.value = $sanitize(await ld.getStoredFlag('banner-text', '', 'await'))
+})
+</script>
+
+<template>
+  <div id="connect-system-banner" class="bg-brand-inverted px-2 sm:px-4">
+    <UAlert
+      v-show="!!message && !close"
+      class="py-0"
+      :description="message"
+      :close="dismissible"
+      close-icon="i-mdi-close"
+      :ui="{
+        root: 'rounded-none bg-brand-inverted px-0 sm:px-0 app-inner-container',
+        wrapper: 'bg-brand-inverted',
+        close: 'mt-2 text-neutral-highlighted',
+      }"
+      @update:open="close = true"
+    >
+      <!-- dismissible ? { class: 'pr-2 text-neutral-highlighted' } : null -->
+      <template #description>
+        <div class="flex gap-2 items-center py-2">
+          <UIcon class="size-7 shrink-0 text-neutral-highlighted self-start" :name="icon" />
+          <!-- eslint-disable vue/no-v-html tailwindcss/no-custom-classname -->
+          <p class="vhtml text-neutral-highlighted" v-html="message" />
+        </div>
+      </template>
+    </UAlert>
+  </div>
+</template>
+
+<!-- must style globally for vhtml style to work  -->
+<style>
+.vhtml > a {
+  color: var(--ui-neutral-highlighted);
+  text-decoration: underline;
+}
+</style>

package/app/components/Connect/Textarea.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { TextareaProps } from '@nuxt/ui'
+
+const model = defineModel<Exclude<TextareaProps['modelValue'], null>>({ required: true })
+
+defineProps<{
+  id: string
+  label: string
+}>()
+</script>
+
+<template>
+  <UTextarea
+    :id
+    v-model.trim="model"
+    :data-testid="id"
+    placeholder="&nbsp;"
+    class="w-full grow"
+  >
+    <label
+      class="floating-label-textarea bg-shade w-[96%] flex-1 pt-1 -mt-1"
+      :for="id"
+    >
+      {{ label }}
+    </label>
+  </UTextarea>
+</template>

package/app/components/Connect/Tombstone/Item.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import type { IconProps, BadgeProps, LinkProps } from '@nuxt/ui'
+import type { VNode } from 'vue'
+
+interface ConnectTombstoneLink extends LinkProps {
+  label?: string
+}
+
+// cant use imported interface here as it causes vue compiler to break when extended
+// must also update connect-tombstone interface if changing these props
+defineProps<{
+  text?: string
+  itemClass?: string
+  icon?: IconProps
+  badge?: BadgeProps
+  link?: ConnectTombstoneLink
+  vNode?: VNode
+}>()
+</script>
+
+<template>
+  <div class="flex space-x-1">
+    <UIcon
+      v-if="icon"
+      v-bind="icon"
+      :class="itemClass || 'mt-1 text-primary'"
+    />
+    <UBadge
+      v-if="badge"
+      v-bind="badge"
+      :class="itemClass || 'px-3'"
+    />
+    <ULink
+      v-else-if="link"
+      v-bind="link"
+      :class="itemClass || 'mt-[2px] text-sm text-primary underline'"
+    >
+      {{ link.label }}
+    </ULink>
+    <component
+      :is="vNode"
+      v-else-if="vNode"
+    />
+    <p
+      v-else-if="text"
+      :class="itemClass || 'mt-[2px] text-sm'"
+    >
+      {{ text }}
+    </p>
+  </div>
+</template>

package/app/components/Connect/Tombstone/index.vue

@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import type { ButtonProps } from '@nuxt/ui'
+
+const props = defineProps<{ stateKey?: string }>()
+
+const { tombstone } = useConnectTombstone(props.stateKey)
+
+async function handleButtonAction(button: ButtonProps, event: MouseEvent) {
+  button.loading = true
+  if (button.onClick) {
+    if (Array.isArray(button.onClick)) {
+      await Promise.all(button.onClick.map(fn => fn(event)))
+    } else if (button.onClick) {
+      await button.onClick(event)
+    }
+  }
+  button.loading = false
+}
+</script>
+
+<template>
+  <div class="bg-white py-8 px-2 sm:px-4" data-testid="connect-tombstone-wrapper">
+    <div class="app-inner-container">
+      <div
+        v-if="tombstone.loading"
+        class="flex flex-col gap-2 *:space-y-2 sm:flex-row"
+      >
+        <slot name="loading">
+          <div class="grow">
+            <USkeleton class="h-9 w-[400px] rounded" />
+            <USkeleton class="h-5 w-[250px] rounded" />
+            <USkeleton class="h-5 w-[200px] rounded" />
+            <USkeleton class="h-5 w-[150px] rounded" />
+          </div>
+          <div>
+            <USkeleton class="h-5 w-[300px] rounded" />
+            <USkeleton class="h-5 w-[300px] rounded" />
+            <USkeleton class="h-5 w-[300px] rounded" />
+            <USkeleton class="h-5 w-[300px] rounded" />
+          </div>
+        </slot>
+      </div>
+      <div
+        v-else
+        class="flex flex-col gap-2 sm:flex-row"
+      >
+        <div class="grow space-y-4">
+          <div>
+            <slot name="title">
+              <component
+                :is="tombstone.title.as"
+                class="text-[1.375rem] font-bold text-neutral-highlighted"
+              >
+                {{ tombstone.title.text }}
+              </component>
+            </slot>
+            <slot name="subtitles">
+              <div
+                v-if="tombstone.subtitles.length"
+                class="flex divide-x divide-gray-500"
+              >
+                <ConnectTombstoneItem
+                  v-for="subtitle, i in tombstone.subtitles"
+                  :key="'subtitle-' + i"
+                  v-bind="subtitle"
+                  class="px-2"
+                  :class="i === 0 ? 'pl-0' : ''"
+                />
+              </div>
+            </slot>
+          </div>
+          <div class="space-y-1">
+            <slot name="details">
+              <div class="flex space-x-2">
+                <div
+                  v-for="detail, i in tombstone.details"
+                  :key="'detail-' + i"
+                >
+                  <ConnectTombstoneItem v-bind="detail" />
+                </div>
+              </div>
+            </slot>
+            <slot name="buttons">
+              <div
+                v-if="tombstone.bottomButtons.length"
+                class="flex flex-wrap gap-2"
+              >
+                <template v-for="btn in tombstone.bottomButtons" :key="btn.button?.label || btn.vNode?.key">
+                  <component :is="btn.vNode" v-if="btn.vNode" />
+                  <UButton
+                    v-else-if="btn.button"
+                    v-bind="{
+                      ...btn.button,
+                      onClick(event) {
+                        handleButtonAction(btn.button!, event)
+                      },
+                    }"
+                  />
+                </template>
+              </div>
+            </slot>
+          </div>
+        </div>
+        <slot name="sideDetails">
+          <dl class="space-y-1 text-sm">
+            <div
+              v-for="detail in tombstone.sideDetails"
+              :key="detail.label"
+              class="flex flex-row flex-wrap gap-2"
+            >
+              <dt class="font-bold text-neutral-highlighted">
+                {{ detail.label }}:
+              </dt>
+              <dd>
+                {{ detail.value }}
+              </dd>
+            </div>
+          </dl>
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>

package/app/components/Connect/Transition/Collapse.vue

@@ -0,0 +1,39 @@
+<template>
+  <Transition name="collapse">
+    <slot />
+  </Transition>
+</template>
+
+<style>
+.collapse-enter-active,
+.collapse-leave-active {
+  transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
+}
+.collapse-enter-from,
+.collapse-leave-to {
+  max-height: 0;
+  opacity: 0;
+}
+.collapse-enter-to,
+.collapse-leave-from {
+  max-height: 1000px;
+  opacity: 1;
+}
+
+@media (prefers-reduced-motion) {
+  .collapse-enter-active,
+  .collapse-leave-active {
+    transition: max-height 0s ease-out, opacity 0s ease-out;
+  }
+  .collapse-enter-from,
+  .collapse-leave-to {
+    max-height: 0;
+    opacity: 0;
+  }
+  .collapse-enter-to,
+  .collapse-leave-from {
+    max-height: 1000px;
+    opacity: 1;
+  }
+}
+</style>

package/app/components/Connect/Transition/Fade.vue

@@ -0,0 +1,31 @@
+<template>
+  <Transition name="fade">
+    <slot />
+  </Transition>
+</template>
+
+<style>
+.fade-enter-active {
+  transition: opacity 0.3s ease-in-out;
+}
+.fade-leave-active {
+  transition: opacity 0s ease-in-out;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+@media (prefers-reduced-motion) {
+  .fade-enter-active {
+    transition: opacity 0s ease-in-out;
+  }
+  .fade-leave-active {
+    transition: opacity 0s ease-in-out;
+  }
+  .fade-enter-from,
+  .fade-leave-to {
+    opacity: 0;
+  }
+}
+</style>

package/app/components/HelloWorld/Index.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const { myLayer } = useAppConfig()
+</script>
+
+<template>
+  <div class="bg-primary">
+    Should have bg-primary
+    <h1>Hello World!</h1>
+    <pre>{{ myLayer }}</pre>
+    <p class="text-gray-900">
+      Hello World text base should be gray-900 test
+    </p>
+  </div>
+</template>