@fy-/fws-vue-core 3.0.3 → 3.0.5

package/src/components/fws/UserProfileStrict.vue

@@ -0,0 +1,233 @@
+<script setup lang="ts">
+import { computed, reactive, ref, watchEffect } from 'vue'
+import { useEventBus } from '../../composables/event-bus'
+import { useRest } from '../../composables/rest'
+import { useTranslation } from '../../composables/translations'
+import { useUserStore } from '../../stores/user'
+import DefaultInput from '../ui/DefaultInput.vue'
+
+const rest = useRest()
+const props = withDefaults(
+  defineProps<{
+    onCompleted?: (data: any) => void
+    termsText?: string
+    force18?: boolean
+  }>(),
+  {
+    onCompleted: () => {},
+    termsText: '',
+    force18: false,
+  },
+)
+
+const translate = useTranslation()
+const userStore = useUserStore()
+const userData = computed(() => userStore.user)
+const eventBus = useEventBus()
+const errors = ref<Record<string, string>>({})
+
+const currentDate = new Date()
+const defaultDate = new Date(
+  currentDate.setFullYear(currentDate.getFullYear() - 18),
+).toISOString().split('T')[0]
+
+const state = reactive({
+  Username: '',
+  Gender: '',
+  Birthdate: defaultDate,
+  AcceptedTerms: true,
+})
+
+watchEffect(() => {
+  if (!userData.value) return
+  const profile = userData.value?.UserProfile
+  state.Username = profile?.Username || ''
+  state.Gender = profile?.Gender || ''
+  state.Birthdate = profile?.Birthdate
+    ? new Date(profile.Birthdate.unixms).toISOString().split('T')[0]
+    : defaultDate
+  state.AcceptedTerms = userData.value?.AcceptedTerms || true
+})
+
+function validateAge(value: string): boolean {
+  const today = new Date()
+  const birthDate = new Date(value)
+  let age = today.getFullYear() - birthDate.getFullYear()
+  const m = today.getMonth() - birthDate.getMonth()
+  if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) age--
+  return age >= 18 && age <= 200
+}
+
+function validate(): boolean {
+  errors.value = {}
+  const req = translate('vuelidate_validator_req') || 'Required'
+  if (!state.Username) errors.value.Username = req
+  if (!state.Gender) errors.value.Gender = req
+  if (!state.Birthdate) errors.value.Birthdate = req
+  if (props.force18 && state.Birthdate && !validateAge(state.Birthdate)) {
+    errors.value.Birthdate = translate('fws_under_18_error_message') || 'You must be at least 18 years old'
+  }
+  if (!state.AcceptedTerms) errors.value.AcceptedTerms = req
+  return Object.keys(errors.value).length === 0
+}
+
+async function patchUser() {
+  if (!validate()) return
+  eventBus.emit('main-loading', true)
+  const data = { ...state }
+  try {
+    const birthdate = new Date(`${data.Birthdate}T00:00:00Z`)
+    data.Birthdate = birthdate.toISOString().split('T')[0]
+  }
+  catch { /* keep original */ }
+
+  const response = await rest('User/_ForceProfile', 'PATCH', data)
+  if (response && response.result === 'success') {
+    if (props.onCompleted) props.onCompleted(response)
+    eventBus.emit('user:refresh', true)
+  }
+  eventBus.emit('main-loading', false)
+}
+</script>
+
+<template>
+  <form class="fws-profile-strict" @submit.prevent="patchUser">
+    <div class="fws-profile-strict__container">
+      <h3 class="fws-profile-strict__heading">
+        {{ $t('fws_user_profile_title') || $t('fws_profile_settings') || 'Complete Your Profile' }}
+      </h3>
+
+      <div class="fws-profile-strict__fields">
+        <DefaultInput
+          id="usernameFWS"
+          v-model="state.Username"
+          type="text"
+          :label="$t('fws_username_label') || 'Username'"
+          :help="$t('fws_username_help') || 'Choose your display name'"
+          :error="errors.Username"
+          :disabled="!!(userData?.UserProfile?.HasUsernameAndSlug)"
+        />
+
+        <DefaultInput
+          id="birthdateFWS"
+          v-model="state.Birthdate"
+          type="date"
+          :label="$t('fws_birthdate_label') || 'Date of birth'"
+          :error="errors.Birthdate"
+        />
+
+        <DefaultInput
+          id="genderFWS"
+          v-model="state.Gender"
+          type="select"
+          :options="[
+            ['female', $t('fws_persona_phys_appearance_opt_female') || 'Female'],
+            ['male', $t('fws_persona_phys_appearance_opt_male') || 'Male'],
+            ['non-binary', $t('fws_persona_phys_appearance_opt_non_binary') || 'Non-binary'],
+          ]"
+          :label="$t('fws_gender_label') || 'Gender'"
+          :error="errors.Gender"
+        />
+
+        <!-- Terms -->
+        <div class="fws-profile-strict__terms">
+          <DefaultInput
+            id="acceptedTermsFWS"
+            v-model:checkbox-value="state.AcceptedTerms"
+            type="toggle"
+            :label="$t('fws_accepted_terms_label') || 'I accept the terms'"
+            :help="$t('fws_accepted_terms_help') || 'You must accept the terms to continue'"
+            :error="errors.AcceptedTerms"
+          />
+          <p v-if="termsText" class="fws-profile-strict__terms-text">
+            {{ termsText }}
+          </p>
+        </div>
+      </div>
+
+      <div class="fws-profile-strict__actions">
+        <button type="submit" class="btn primary">
+          {{ $t("fws_save_user_cta") || 'Continue' }}
+        </button>
+      </div>
+    </div>
+  </form>
+</template>
+
+<style scoped>
+.fws-profile-strict__container {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  padding: 20px 24px;
+  border-radius: 10px;
+  background: #fff;
+  box-shadow:
+    0 0 0 1px rgba(0, 0, 0, 0.06),
+    0 2px 4px rgba(0, 0, 0, 0.04);
+}
+
+.dark .fws-profile-strict__container {
+  background: var(--fv-neutral-900, #0a0a0a);
+  box-shadow:
+    0 0 0 1px rgba(255, 255, 255, 0.06),
+    0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.fws-profile-strict__heading {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--fv-neutral-900, #0a0a0a);
+  margin: 0;
+  padding-bottom: 12px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+}
+
+.dark .fws-profile-strict__heading {
+  color: var(--fv-neutral-100, #f5f5f5);
+  border-bottom-color: rgba(255, 255, 255, 0.06);
+}
+
+.fws-profile-strict__fields {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.fws-profile-strict__terms {
+  padding-top: 10px;
+  border-top: 1px solid rgba(0, 0, 0, 0.06);
+}
+
+.dark .fws-profile-strict__terms {
+  border-top-color: rgba(255, 255, 255, 0.06);
+}
+
+.fws-profile-strict__terms-text {
+  margin: 8px 0 0;
+  padding: 10px 12px;
+  font-size: 13px;
+  line-height: 1.5;
+  border-radius: 6px;
+  color: var(--fv-neutral-700, #404040);
+  background: rgba(0, 0, 0, 0.02);
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04);
+}
+
+.dark .fws-profile-strict__terms-text {
+  color: var(--fv-neutral-300, #d4d4d4);
+  background: rgba(255, 255, 255, 0.02);
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04);
+}
+
+.fws-profile-strict__actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+@media (max-width: 640px) {
+  .fws-profile-strict__container {
+    padding: 16px;
+  }
+}
+</style>

package/src/components/ssr/ClientOnly.ts

@@ -0,0 +1,10 @@
+import { defineComponent, onMounted, ref } from 'vue'
+
+export const ClientOnly = defineComponent({
+  name: 'ClientOnly',
+  setup(_, { slots }) {
+    const show = ref(false)
+    onMounted(() => { show.value = true })
+    return () => show.value && slots.default ? slots.default() : null
+  },
+})

package/src/components/ui/DefaultBreadcrumb.vue

@@ -0,0 +1,99 @@
+<script lang="ts" setup>
+import type { BreadcrumbLink } from '../../types'
+import { getURL, stringHash } from '@fy-/fws-js'
+import { ChevronRightIcon, HomeIcon } from '@heroicons/vue/24/solid'
+import { defineBreadcrumb } from '@unhead/schema-org'
+import { useSchemaOrg } from '@unhead/schema-org/vue'
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    nav: BreadcrumbLink[]
+    showHome: boolean
+  }>(),
+  {
+    nav: () => [],
+    showHome: () => true,
+  },
+)
+
+const baseUrl = computed(() => {
+  const url = getURL()
+  return { host: url.Host, scheme: url.Scheme }
+})
+
+const breadcrumbsSchemaFormat = computed(() => {
+  const navLength = props.nav.length
+  return props.nav.map((item, index) => {
+    const isLastItem = index === navLength - 1
+    if (!item.to || isLastItem) {
+      return { '@type': 'ListItem', 'position': index + 1, 'name': item.name }
+    }
+    let itemUrl = item.to
+    if (itemUrl.startsWith('/')) {
+      itemUrl = `${baseUrl.value.scheme}://${baseUrl.value.host}${itemUrl}`
+    }
+    else if (!itemUrl.startsWith('http')) {
+      itemUrl = `${baseUrl.value.scheme}://${baseUrl.value.host}/${itemUrl}`
+    }
+    itemUrl = itemUrl.replace(/([^:]\/)\/+/g, '$1')
+    return { '@type': 'ListItem', 'position': index + 1, 'name': item.name, 'item': itemUrl }
+  })
+})
+
+const breadcrumbId = computed(() => {
+  if (!props.nav.length) return ''
+  return stringHash(props.nav.map(item => item.name).join(' > '))
+})
+
+const linkClasses = 'text-xs font-medium text-fv-neutral-700 hover:text-fv-neutral-900 dark:text-fv-neutral-200 dark:hover:text-white transition-colors duration-200'
+const textClasses = 'text-xs font-medium text-fv-neutral-500 dark:text-fv-neutral-200'
+const chevronClasses = 'w-4 h-4 md:w-5 md:h-5 text-fv-neutral-400 inline-block mx-0.5 md:mx-1.5'
+const homeIconClasses = 'w-3.5 h-3.5 md:w-4 md:h-4 mr-1.5 md:mr-2 inline-block'
+
+if (props.nav && props.nav.length > 0) {
+  useSchemaOrg([
+    defineBreadcrumb({
+      '@id': `#${breadcrumbId.value}`,
+      '@context': 'https://schema.org',
+      '@type': 'BreadcrumbList',
+      'itemListElement': breadcrumbsSchemaFormat,
+    }),
+  ])
+}
+</script>
+
+<template>
+  <nav aria-label="Breadcrumb">
+    <ol class="inline-flex items-center flex-wrap gap-y-1">
+      <template v-for="(item, index) in nav" :key="`bc_${index.toString()}`">
+        <li class="inline-flex items-center">
+          <ChevronRightIcon
+            v-if="index !== 0"
+            :class="chevronClasses"
+            aria-hidden="true"
+          />
+          <router-link
+            v-if="item.to && index !== nav.length - 1"
+            :to="item.to"
+            :class="linkClasses"
+            :aria-current="index === nav.length - 1 ? 'page' : undefined"
+          >
+            <HomeIcon
+              v-if="showHome && index === 0"
+              :class="homeIconClasses"
+            />
+            <span>{{ item.name }}</span>
+          </router-link>
+          <span
+            v-else
+            :class="textClasses"
+            :aria-current="index === nav.length - 1 ? 'page' : undefined"
+          >
+            {{ item.name }}
+          </span>
+        </li>
+      </template>
+    </ol>
+  </nav>
+</template>

package/src/components/ui/DefaultConfirm.vue

@@ -0,0 +1,178 @@
+<script setup lang="ts">
+import { useDebounceFn } from '@vueuse/core'
+import { nextTick, onMounted, onUnmounted, ref } from 'vue'
+import { useEventBus } from '../../composables/event-bus'
+import DefaultModal from './DefaultModal.vue'
+
+const eventBus = useEventBus()
+const title = ref<string | null>(null)
+const desc = ref<string | null>(null)
+const onConfirm = ref<Function | null>(null)
+const isOpen = ref(false)
+const modalRef = ref<HTMLElement | null>(null)
+let previouslyFocusedElement: HTMLElement | null = null
+
+interface ConfirmModalData {
+  title: string
+  desc: string
+  onConfirm: Function
+}
+
+const _onConfirm = useDebounceFn(async () => {
+  const callback = onConfirm.value
+  resetConfirm()
+  if (callback) await callback()
+}, 300)
+
+function resetConfirm() {
+  title.value = null
+  desc.value = null
+  onConfirm.value = null
+  isOpen.value = false
+  eventBus.emit('confirmModal', false)
+  previouslyFocusedElement?.focus()
+}
+
+function showConfirm(data: ConfirmModalData) {
+  title.value = data.title
+  desc.value = data.desc
+  onConfirm.value = data.onConfirm
+  eventBus.emit('confirmModal', true)
+  requestAnimationFrame(() => {
+    isOpen.value = true
+    eventBus.emit('confirmModal', true)
+    nextTick(() => {
+      previouslyFocusedElement = document.activeElement as HTMLElement
+      modalRef.value?.focus()
+    })
+  })
+}
+
+onMounted(() => {
+  eventBus.on('resetConfirm', resetConfirm)
+  eventBus.on('showConfirm', showConfirm)
+})
+onUnmounted(() => {
+  eventBus.off('resetConfirm', resetConfirm)
+  eventBus.off('showConfirm', showConfirm)
+})
+</script>
+
+<template>
+  <DefaultModal id="confirm" ref="modalRef" m-size="!max-w-lg w-full">
+    <div
+      class="fv-confirm"
+      :aria-labelledby="title ? 'confirm-modal-title' : undefined"
+      :aria-describedby="desc ? 'confirm-modal-desc' : undefined"
+      aria-modal="true"
+      role="dialog"
+      tabindex="-1"
+    >
+      <h3 v-if="title" id="confirm-modal-title" class="fv-confirm__title">
+        {{ title }}
+      </h3>
+
+      <div v-if="desc" class="fv-confirm__desc">
+        <p id="confirm-modal-desc" v-html="desc" />
+      </div>
+
+      <div class="fv-confirm__actions">
+        <button
+          class="fv-confirm__btn fv-confirm__btn--confirm"
+          @click="_onConfirm()"
+        >
+          {{ $t("confirm_modal_cta_confirm") || 'Confirm' }}
+        </button>
+        <button
+          class="fv-confirm__btn fv-confirm__btn--cancel"
+          @click="resetConfirm()"
+        >
+          {{ $t("confirm_modal_cta_cancel") || 'Cancel' }}
+        </button>
+      </div>
+    </div>
+  </DefaultModal>
+</template>
+
+<style scoped>
+.fv-confirm {
+  padding: 0.25rem;
+}
+
+.fv-confirm__title {
+  font-size: 1.0625rem;
+  font-weight: 600;
+  color: #171717;
+  margin-bottom: 0.75rem;
+}
+:is(.dark) .fv-confirm__title { color: #f5f5f5; }
+
+.fv-confirm__desc {
+  padding: 0.75rem;
+  border-radius: 0.5rem;
+  margin-bottom: 1.25rem;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  color: #404040;
+
+  /* Subtle background panel */
+  background: #f5f5f5;
+  border: 1px solid rgba(0, 0, 0, 0.04);
+}
+:is(.dark) .fv-confirm__desc {
+  background: rgba(255, 255, 255, 0.04);
+  border-color: rgba(255, 255, 255, 0.06);
+  color: #d4d4d4;
+}
+
+.fv-confirm__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.625rem;
+}
+
+.fv-confirm__btn {
+  padding: 0.5rem 1.25rem;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  border-radius: 0.5rem;
+  border: none;
+  cursor: pointer;
+  transition: background-color 150ms, transform 100ms;
+}
+.fv-confirm__btn:active { transform: scale(0.97); }
+
+/* Stripe/Superhuman: warm crimson for destructive confirms */
+.fv-confirm__btn--confirm {
+  background: #cf2d56;
+  color: white;
+}
+.fv-confirm__btn--confirm:hover {
+  background: #b82750;
+}
+.fv-confirm__btn--confirm:focus-visible {
+  outline: 2px solid #cf2d56;
+  outline-offset: 2px;
+  box-shadow: 0 0 0 4px hsla(345, 64%, 49%, 0.15);
+}
+
+/* Ghost cancel — transparent with subtle border (Stripe pattern) */
+.fv-confirm__btn--cancel {
+  background: transparent;
+  color: #525252;
+  box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
+}
+.fv-confirm__btn--cancel:hover {
+  background: rgba(0, 0, 0, 0.03);
+  color: #171717;
+}
+:is(.dark) .fv-confirm__btn--cancel {
+  background: transparent;
+  color: #d4d4d4;
+  box-shadow: rgba(255, 255, 255, 0.08) 0px 0px 0px 1px;
+}
+:is(.dark) .fv-confirm__btn--cancel:hover {
+  background: rgba(255, 255, 255, 0.06);
+  color: #f5f5f5;
+}
+</style>