@fy-/fws-vue 2.1.6 → 2.1.7

package/components/fws/UserProfileStrict.vue

@@ -1,112 +1,112 @@
 <script setup lang="ts">
-import useVuelidate from "@vuelidate/core";
-import DefaultInput from "../ui/DefaultInput.vue";
-import { useUserStore } from "../../stores/user";
-import { useRest } from "../../composables/rest";
-import { useEventBus } from "../../composables/event-bus";
-import { computed, reactive, watchEffect, ref } from "vue";
-import { required, helpers } from "@vuelidate/validators";
-import { useTranslation } from "../../composables/translations";
+import useVuelidate from '@vuelidate/core'
+import { helpers, required } from '@vuelidate/validators'
+import { computed, reactive, 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 rest = useRest()
 const props = withDefaults(
   defineProps<{
-    onCompleted?: (data: any) => void;
-    termsText?: string;
-    force18?: boolean;
+    onCompleted?: (data: any) => void
+    termsText?: string
+    force18?: boolean
   }>(),
   {
     onCompleted: () => {},
-    termsText: "",
+    termsText: '',
     force18: false,
   },
-);
-const currentDate = new Date();
+)
+const currentDate = new Date()
 const defaultDate = new Date(
   currentDate.setFullYear(currentDate.getFullYear() - 18),
 )
   .toISOString()
-  .split("T")[0];
+  .split('T')[0]
 
-const ageValidator = (value: any) => {
-  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 <= 2020;
-};
-const userStore = useUserStore();
-const userData = computed(() => userStore.user);
-const eventBus = useEventBus();
+function ageValidator(value: any) {
+  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 <= 2020
+}
+const userStore = useUserStore()
+const userData = computed(() => userStore.user)
+const eventBus = useEventBus()
 const state = reactive({
   userData: {
-    Username: userData.value?.UserProfile?.Username || "",
-    Gender: userData.value?.UserProfile?.Gender || "",
+    Username: userData.value?.UserProfile?.Username || '',
+    Gender: userData.value?.UserProfile?.Gender || '',
     Birthdate: userData.value?.UserProfile?.Birthdate || defaultDate,
     AcceptedTerms: userData.value?.AcceptedTerms || true,
   },
-});
+})
 watchEffect(() => {
   state.userData = {
-    Username: userData.value?.UserProfile?.Username || "",
-    Gender: userData.value?.UserProfile?.Gender || "",
+    Username: userData.value?.UserProfile?.Username || '',
+    Gender: userData.value?.UserProfile?.Gender || '',
     Birthdate: userData.value?.UserProfile?.Birthdate
       ? new Date(userData.value?.UserProfile?.Birthdate.unixms)
-          .toISOString()
-          .split("T")[0]
+        .toISOString()
+        .split('T')[0]
       : defaultDate,
     AcceptedTerms: userData.value?.AcceptedTerms || true,
-  };
-});
-const translate = useTranslation();
+  }
+})
+const translate = useTranslation()
 const rules = {
   userData: {
     Username: {
-      required: required,
+      required,
     },
     Gender: {
-      required: required,
+      required,
     },
     Birthdate: {
       required,
       ageValidator: props.force18
         ? helpers.withMessage(
-            translate("fws_under_18_error_message"),
-            ageValidator,
-          )
+          translate('fws_under_18_error_message'),
+          ageValidator,
+        )
         : undefined,
     },
     AcceptedTerms: {
-      required: required,
+      required,
     },
   },
-};
-const v$ = useVuelidate(rules, state);
+}
+const v$ = useVuelidate(rules, state)
 
-const patchUser = async () => {
-  eventBus.emit("main-loading", true);
+async function patchUser() {
+  eventBus.emit('main-loading', true)
   if (await v$.value.userData.$validate()) {
-    const data = { ...state.userData };
-    const birtdate = new Date(`${data.Birthdate}T00:00:00Z`);
+    const data = { ...state.userData }
+    const birtdate = new Date(`${data.Birthdate}T00:00:00Z`)
     try {
-      const birtdateAtUnixms = birtdate.getTime();
-      // @ts-ignore
-      data.Birthdate = new Date(birtdateAtUnixms).toISOString().split("T")[0];
-    } catch (e) {
-      // @ts-ignore
-      data.Birthdate = data.Birthdate.toISOString().split("T")[0];
+      const birtdateAtUnixms = birtdate.getTime()
+      data.Birthdate = new Date(birtdateAtUnixms).toISOString().split('T')[0]
+    }
+    catch {
+      // @ts-expect-error: Birthdate is a string
+      data.Birthdate = data.Birthdate.toISOString().split('T')[0]
     }
-    const response = await rest("User/_ForceProfile", "PATCH", data);
-    if (response && response.result == "success") {
+    const response = await rest('User/_ForceProfile', 'PATCH', data)
+    if (response && response.result === 'success') {
       if (props.onCompleted) {
-        props.onCompleted(response);
+        props.onCompleted(response)
       }
-      eventBus.emit("user:refresh", true);
+      eventBus.emit('user:refresh', true)
     }
   }
-  eventBus.emit("main-loading", false);
-};
+  eventBus.emit('main-loading', false)
+}
 </script>
 
 <template>
@@ -121,12 +121,11 @@ const patchUser = async () => {
       :error-vuelidate="v$.userData.Username.$errors"
       :disabled="userData?.UserProfile?.HasUsernameAndSlug ? true : false"
     />
-    <!-- @vue-skip -->
     <DefaultInput
       id="birthdateFWS"
       v-model="state.userData.Birthdate"
       class="mb-4"
-      :disableDatesUnder18="true"
+      :disable-dates-under18="true"
       type="datepicker"
       :label="$t('fws_birthdate_label')"
       :error-vuelidate="v$.userData.Birthdate.$errors"
@@ -154,7 +153,9 @@ const patchUser = async () => {
       :help="$t('fws_accepted_terms_help')"
       :error-vuelidate="v$.userData.AcceptedTerms.$errors"
     />
-    <p class="terms-box" v-if="props.termsText">{{ props.termsText }}</p>
+    <p v-if="props.termsText" class="terms-box">
+      {{ props.termsText }}
+    </p>
 
     <div class="flex">
       <button type="submit" class="btn defaults primary">

package/components/ssr/ClientOnly.ts

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

package/components/ui/DefaultBreadcrumb.vue

@@ -1,32 +1,32 @@
 <script lang="ts" setup>
-import { HomeIcon, ChevronRightIcon } from "@heroicons/vue/24/solid";
-import type { BreadcrumbLink } from "../../types";
-import { defineBreadcrumb, useSchemaOrg } from "@unhead/schema-org";
+import type { BreadcrumbLink } from '../../types'
+import { ChevronRightIcon, HomeIcon } from '@heroicons/vue/24/solid'
+import { defineBreadcrumb, useSchemaOrg } from '@unhead/schema-org'
 
 const props = withDefaults(
   defineProps<{
-    nav: BreadcrumbLink[];
-    showHome: Boolean;
+    nav: BreadcrumbLink[]
+    showHome: boolean
   }>(),
   {
     nav: () => [],
     showHome: () => true,
   },
-);
+)
 
 const breadcrumbsSchemaFormat = props.nav.map((item, index) => {
   return {
     position: index + 1,
     name: item.name,
     item: item.to,
-  };
-});
+  }
+})
 
 useSchemaOrg([
   defineBreadcrumb({
     itemListElement: breadcrumbsSchemaFormat,
   }),
-]);
+])
 </script>
 
 <template>
@@ -34,9 +34,9 @@ useSchemaOrg([
     <template v-for="(item, index) in nav" :key="`bc_${index.toString()}`">
       <li class="inline-flex items-center">
         <ChevronRightIcon
-          v-if="index != 0"
+          v-if="index !== 0"
           :class="
-            index == 0
+            index === 0
               ? 'w-4 h-4 mr-2 inline-block'
               : 'w-5 h-5 text-fv-neutral-400 inline-block mx-0.5 md:mx-1.5'
           "
@@ -46,7 +46,7 @@ useSchemaOrg([
           v-if="item.to"
           :to="item.to"
           :class="
-            index == 0
+            index === 0
               ? 'text-xs font-medium text-fv-neutral-700 hover:text-fv-neutral-900 dark:text-fv-neutral-200 dark:hover:text-white'
               : 'text-xs font-medium text-fv-neutral-700 hover:text-fv-neutral-900 dark:text-fv-neutral-200 dark:hover:text-white'
           "
@@ -54,7 +54,7 @@ useSchemaOrg([
           <HomeIcon
             v-if="showHome && index === 0"
             :class="
-              index == 0
+              index === 0
                 ? 'w-4 h-4 mr-2 inline-block'
                 : 'w-4 h-4 text-fv-neutral-400 inline-block mx-0.5 md:mx-1.5'
             "

package/components/ui/DefaultConfirm.vue

@@ -1,45 +1,46 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from "vue";
-import { useEventBus } from "../../composables/event-bus";
-import DefaultModal from "./DefaultModal.vue";
+import { 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 eventBus = useEventBus()
+const title = ref<string | null>(null)
+const desc = ref<string | null>(null)
+const onConfirm = ref<Function | null>(null)
 interface ConfirmModalData {
-  title: string;
-  desc: string;
-  onConfirm: Function;
+  title: string
+  desc: string
+  onConfirm: Function
 }
-const _onConfirm = async () => {
+async function _onConfirm() {
   if (onConfirm.value) {
-    await onConfirm.value();
+    await onConfirm.value()
   }
-  resetConfirm();
-};
-const resetConfirm = () => {
-  title.value = null;
-  desc.value = null;
-  onConfirm.value = null;
-  eventBus.emit("confirmModal", false);
-};
-const showConfirm = (data: ConfirmModalData) => {
-  title.value = data.title;
-  desc.value = data.desc;
-  onConfirm.value = data.onConfirm;
-  eventBus.emit("confirmModal", true);
-};
+  resetConfirm()
+}
+function resetConfirm() {
+  title.value = null
+  desc.value = null
+  onConfirm.value = null
+  eventBus.emit('confirmModal', false)
+}
+function showConfirm(data: ConfirmModalData) {
+  title.value = data.title
+  desc.value = data.desc
+  onConfirm.value = data.onConfirm
+  eventBus.emit('confirmModal', true)
+}
 
 onMounted(() => {
-  eventBus.on("resetConfirm", resetConfirm);
-  eventBus.on("showConfirm", showConfirm);
-});
+  eventBus.on('resetConfirm', resetConfirm)
+  eventBus.on('showConfirm', showConfirm)
+})
 onUnmounted(() => {
-  eventBus.off("resetConfirm", resetConfirm);
-  eventBus.off("showConfirm", showConfirm);
-});
+  eventBus.off('resetConfirm', resetConfirm)
+  eventBus.off('showConfirm', showConfirm)
+})
 </script>
+
 <template>
   <DefaultModal id="confirm">
     <div
@@ -49,9 +50,9 @@ onUnmounted(() => {
         <p
           class="mb-3 !text-left prose prose-invert prose-sm !min-w-full"
           v-html="
-            desc ? '<h2>' + title + '</h2>' + desc : '<h2>' + title + '</h2>'
+            desc ? `<h2>${title}</h2>${desc}` : `<h2>${title}</h2>`
           "
-        ></p>
+        />
         <div class="flex justify-between gap-3 mt-4">
           <button class="btn danger defaults" @click="_onConfirm()">
             {{ $t("confirm_modal_cta_confirm") }}

package/components/ui/DefaultDateSelection.vue

@@ -1,40 +1,42 @@
 <script lang="ts" setup>
-import { computed } from "vue";
-import { DefaultInput } from "../..";
+import { computed } from 'vue'
+import { DefaultInput } from '../..'
+
 interface DateInterval {
-  $between: [any, any];
+  $between: [any, any]
 }
 const props = withDefaults(
   defineProps<{
-    mode?: "interval" | "single";
-    modelValue?: DateInterval;
-    id: string;
-    label?: string;
+    mode?: 'interval' | 'single'
+    modelValue?: DateInterval
+    id: string
+    label?: string
   }>(),
   {
-    mode: "single",
+    mode: 'single',
     modelValue: () => {
-      return { $between: [undefined, undefined] };
+      return { $between: [undefined, undefined] }
     },
   },
-);
+)
 
-const emit = defineEmits(["update:modelValue"]);
+const emit = defineEmits(['update:modelValue'])
 
 const model = computed({
   get: () => props.modelValue,
   set: (items) => {
-    emit("update:modelValue", items);
+    emit('update:modelValue', items)
   },
-});
+})
 </script>
+
 <template>
-  <div v-if="mode == 'interval' && model">
+  <div v-if="mode === 'interval' && model">
     <div class="flex flex-col md:flex-row">
       <DefaultInput
+        :id="`${id}_start`"
         v-model="model.$between[0]"
         type="date"
-        :id="`${id}_start`"
         class="w-full"
         :label="`${label} (${$t('date_selection_start')})`"
       />
@@ -42,15 +44,15 @@ const model = computed({
         <div>↭</div>
       </div>
       <DefaultInput
+        :id="`${id}_end`"
         v-model="model.$between[1]"
         type="date"
         class="w-full"
-        :id="`${id}_end`"
         :label="`${label} (${$t('date_selection_end')})`"
       />
     </div>
   </div>
   <div v-else>
-    <DefaultInput v-model="model.$between[0]" type="date" :id="id" />
+    <DefaultInput :id="id" v-model="model.$between[0]" type="date" />
   </div>
 </template>

package/components/ui/DefaultDropdown.vue

@@ -1,35 +1,35 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted } from "vue";
+import { onMounted, onUnmounted } from 'vue'
 
-import ScaleTransition from "./transitions/ScaleTransition.vue";
+import ScaleTransition from './transitions/ScaleTransition.vue'
 
 const props = defineProps<{
-  show: boolean;
-  handleClickOutside: any;
-  preventClickOutside?: boolean;
+  show: boolean
+  handleClickOutside: any
+  preventClickOutside?: boolean
   coordinates?: {
-    left?: string;
-    right?: string;
-    top?: string;
-    bottom?: string;
-  };
-  position: string[];
-  closeDropdown: () => void;
-}>();
+    left?: string
+    right?: string
+    top?: string
+    bottom?: string
+  }
+  position: string[]
+  closeDropdown: () => void
+}>()
 
-const handleCloseOnEscape = (event: KeyboardEvent) => {
-  if (["Escape", "Esc"].includes(event.key)) {
-    props.closeDropdown();
+function handleCloseOnEscape(event: KeyboardEvent) {
+  if (['Escape', 'Esc'].includes(event.key)) {
+    props.closeDropdown()
   }
-};
+}
 
 onMounted(() => {
-  document.addEventListener("keydown", handleCloseOnEscape);
-});
+  document.addEventListener('keydown', handleCloseOnEscape)
+})
 
 onUnmounted(() => {
-  document.removeEventListener("keydown", handleCloseOnEscape);
-});
+  document.removeEventListener('keydown', handleCloseOnEscape)
+})
 </script>
 
 <template>
@@ -37,14 +37,14 @@ onUnmounted(() => {
     <div
       v-if="props.show"
       class="fixed left-0 top-0 z-[50] w-full h-full"
-    ></div>
+    />
 
     <ScaleTransition>
       <div
-        :class="props.position"
-        :style="props.coordinates"
         v-show="props.show"
         v-click-outside="props.handleClickOutside"
+        :class="props.position"
+        :style="props.coordinates"
         class="absolute z-[100] w-[200px] mt-2 rounded-sm bg-white dark:bg-fv-neutral-900 shadow-lg border border-fv-neutral-100 dark:border-fv-neutral-600 focus:outline-none"
         role="menu"
         aria-orientation="vertical"
@@ -52,7 +52,7 @@ onUnmounted(() => {
         tabindex="-1"
       >
         <div role="none">
-          <slot></slot>
+          <slot />
         </div>
       </div>
     </ScaleTransition>

package/components/ui/DefaultDropdownLink.vue

@@ -1,36 +1,37 @@
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed } from 'vue'
 
 const props = defineProps<{
-  handleClick?: () => void;
-  label?: string;
-  color?: string;
-}>();
+  handleClick?: () => void
+  label?: string
+  color?: string
+}>()
 
 const baseClasses = `w-full px-4 py-3 flex items-center border-b opacity-60 
 dark:opacity-70 outline-none text-sm  border-fv-neutral-200 dark:border-fv-neutral-600 
-transition-all duration-200`;
+transition-all duration-200`
 
 const colorClasses = computed(() => {
-  if (props.color === "danger") {
-    return "text-red-500 dark:hover:text-red-50 hover:bg-red-50 active:bg-red-100 dark:hover:bg-red-900";
-  } else {
+  if (props.color === 'danger') {
+    return 'text-red-500 dark:hover:text-red-50 hover:bg-red-50 active:bg-red-100 dark:hover:bg-red-900'
+  }
+  else {
     return `text-black dark:text-white active:bg-fv-neutral-100 dark:hover:bg-fv-neutral-600 
-        dark:focus:bg-fv-neutral-600 hover:bg-fv-neutral-50`;
+        dark:focus:bg-fv-neutral-600 hover:bg-fv-neutral-50`
   }
-});
+})
 
-const classes = computed(() => `${baseClasses} ${colorClasses.value}`);
+const classes = computed(() => `${baseClasses} ${colorClasses.value}`)
 </script>
 
 <template>
   <button
     :aria-label="props.label"
-    @click.prevent="props.handleClick"
     :class="classes"
     role="menuitem"
     type="button"
+    @click.prevent="props.handleClick"
   >
-    <slot></slot>
+    <slot />
   </button>
 </template>