@fy-/fws-vue 2.1.6 → 2.1.7

package/components/ui/DefaultNotif.vue

@@ -1,50 +1,47 @@
 <script setup lang="ts">
+import type { Component } from 'vue'
+
 import {
-  Dialog,
-  DialogPanel,
-  DialogTitle,
-  TransitionRoot,
-} from "@headlessui/vue";
-import { ref, onMounted, onUnmounted } from "vue";
-import {
+  CheckCircleIcon,
   ExclamationTriangleIcon,
   LightBulbIcon,
-  CheckCircleIcon,
-} from "@heroicons/vue/24/solid";
-import { useEventBus } from "../../composables/event-bus";
-import type { Component } from "vue";
-import ScaleTransition from "./transitions/ScaleTransition.vue";
+} from '@heroicons/vue/24/solid'
+import { onMounted, onUnmounted, ref } from 'vue'
+import { useEventBus } from '../../composables/event-bus'
+import ScaleTransition from './transitions/ScaleTransition.vue'
+
 interface NotifProps {
-  imgSrc?: string;
-  imgIcon?: Component;
-  title: string;
-  content?: string;
-  ctaText?: string;
-  ctaLink?: string;
-  ctaAction?: () => void;
-  type?: "info" | "warning" | "success";
-  time?: number;
+  imgSrc?: string
+  imgIcon?: Component
+  title: string
+  content?: string
+  ctaText?: string
+  ctaLink?: string
+  ctaAction?: () => void
+  type?: 'info' | 'warning' | 'success'
+  time?: number
 }
-const notif = ref<HTMLElement | null>(null);
-const eventBus = useEventBus();
-const currentNotif = ref<NotifProps | null>(null);
-let currentTimeout: any | null = null;
-const onCall = (data: NotifProps) => {
+const eventBus = useEventBus()
+const currentNotif = ref<NotifProps | null>(null)
+let currentTimeout: any | null = null
+function onCall(data: NotifProps) {
   if (currentNotif.value !== null) {
-    hideNotif();
+    hideNotif()
   }
-  const actualIcon = ref(data.imgIcon);
+  const actualIcon = ref(data.imgIcon)
   if (data.imgIcon === undefined) {
-    if (data.type === "info") {
-      actualIcon.value = LightBulbIcon;
-    } else if (data.type === "warning") {
-      actualIcon.value = ExclamationTriangleIcon;
-    } else if (data.type === "success") {
-      actualIcon.value = CheckCircleIcon;
+    if (data.type === 'info') {
+      actualIcon.value = LightBulbIcon
+    }
+    else if (data.type === 'warning') {
+      actualIcon.value = ExclamationTriangleIcon
+    }
+    else if (data.type === 'success') {
+      actualIcon.value = CheckCircleIcon
     }
   }
   if (!data.time || data.time < 1000) {
-    data.time = 5000;
+    data.time = 5000
   }
 
   currentNotif.value = {
@@ -57,27 +54,29 @@ const onCall = (data: NotifProps) => {
     time: data.time,
     type: data.type,
     ctaAction: data.ctaAction,
-  };
+  }
 
-  currentTimeout = setTimeout(hideNotif, currentNotif.value.time);
-};
+  currentTimeout = setTimeout(hideNotif, currentNotif.value.time)
+}
 
-const hideNotif = () => {
-  currentNotif.value = null;
+function hideNotif() {
+  currentNotif.value = null
   if (currentTimeout !== null) {
-    clearTimeout(currentTimeout);
+    clearTimeout(currentTimeout)
   }
-};
+}
 onMounted(() => {
-  eventBus.on("SendNotif", onCall);
-});
+  eventBus.on('SendNotif', onCall)
+})
 onUnmounted(() => {
-  eventBus.off("SendNotif", onCall);
-});
+  eventBus.off('SendNotif', onCall)
+})
 </script>
+
 <template>
   <ScaleTransition>
     <div
+      v-if="currentNotif !== null"
       id="base-notif"
       class="p-2 mb-4 fixed bottom-4 right-8 !z-[2000] bg-fv-neutral-50/[.6] dark:bg-neutral-800/[.6]"
       role="alert"
@@ -89,33 +88,32 @@ onUnmounted(() => {
         'text-green-800 border border-green-300 rounded-lg  dark:text-green-300 dark:border-green-800':
           currentNotif.type === 'success',
       }"
-      v-if="currentNotif !== null"
     >
       <div class="flex items-center gap-2">
         <img
+          v-if="currentNotif.imgSrc"
           class="flex-shrink-0 w-6 h-6"
           :src="currentNotif.imgSrc"
           :alt="currentNotif.title"
-          v-if="currentNotif.imgSrc"
-        />
+        >
         <component
           :is="currentNotif.imgIcon"
-          class="flex-shrink-0 w-6 h-6"
           v-else
+          class="flex-shrink-0 w-6 h-6"
         />
         <h3 class="text-lg font-medium" v-text="currentNotif.title" />
       </div>
       <div
+        v-if="currentNotif.content"
         class="mt-2text-sm"
         v-text="currentNotif.content"
-        v-if="currentNotif.content"
       />
       <div class="flex justify-end gap-2 pt-3">
         <button
           type="button"
           class="btn neutral small"
-          @click="hideNotif"
           aria-label="Close"
+          @click="hideNotif"
         >
           {{ $t("dismiss_cta") }}
         </button>

package/components/ui/DefaultPaging.vue

@@ -1,145 +1,142 @@
 <script setup lang="ts">
-// @ts-ignore
-import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/vue/24/solid";
+import type {
+  WatchStopHandle,
+} from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
+import type { APIPaging } from '../../composables/rest'
+import { getURL, hasFW } from '@fy-/fws-js'
+import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/vue/24/solid'
+import { useHead } from '@unhead/vue'
 import {
-  watch,
+  computed,
+  onMounted,
   onUnmounted,
   ref,
-  WatchStopHandle,
-  onMounted,
-  computed,
-} from "vue";
-import type { APIPaging } from "../../composables/rest";
-import { useEventBus } from "../../composables/event-bus";
-import { useServerRouter } from "../../stores/serverRouter";
-import { LocationQueryValue, RouteLocationRaw, useRoute } from "vue-router";
-import { useHead } from "@unhead/vue";
-import { hasFW, getURL } from "@fy-/fws-js";
+  watch,
+} from 'vue'
+import { useRoute } from 'vue-router'
+import { useEventBus } from '../../composables/event-bus'
+import { useServerRouter } from '../../stores/serverRouter'
 
 const props = withDefaults(
   defineProps<{
-    items: APIPaging;
-    id: string;
-    hash?: string;
-    showLegend?: boolean;
+    items: APIPaging
+    id: string
+    hash?: string
+    showLegend?: boolean
   }>(),
   {
     showLegend: true,
-    hash: "",
+    hash: '',
   },
-);
-const route = useRoute();
-const eventBus = useEventBus();
-const history = useServerRouter();
-const prevNextSeo = ref<any>({});
-const isNewPage = (page: number) => {
+)
+const route = useRoute()
+const eventBus = useEventBus()
+const history = useServerRouter()
+const prevNextSeo = ref<any>({})
+function isNewPage(page: number) {
   return (
-    page >= 1 && page <= props.items.page_max && page != props.items.page_no
-  );
-};
-const pageWatcher = ref<WatchStopHandle>();
+    page >= 1 && page <= props.items.page_max && page !== props.items.page_no
+  )
+}
+const pageWatcher = ref<WatchStopHandle>()
 
-const next = () => {
-  const page = props.items.page_no + 1;
+function next() {
+  const page = props.items.page_no + 1
 
-  if (!isNewPage(page)) return;
-  const newQuery = { ...route.query };
-  newQuery.page = page.toString();
+  if (!isNewPage(page)) return
+  const newQuery = { ...route.query }
+  newQuery.page = page.toString()
   history.push({
     path: history.currentRoute.path,
     query: newQuery,
-    hash: props.hash != "" ? "#" + props.hash : undefined,
-  });
-};
-const prev = () => {
-  const page = props.items.page_no - 1;
-  if (!isNewPage(page)) return;
-  const newQuery = { ...route.query };
-  newQuery.page = page.toString();
+    hash: props.hash !== '' ? `#${props.hash}` : undefined,
+  })
+}
+function prev() {
+  const page = props.items.page_no - 1
+  if (!isNewPage(page)) return
+  const newQuery = { ...route.query }
+  newQuery.page = page.toString()
   history.push({
     path: history.currentRoute.path,
     query: newQuery,
-    hash: props.hash != "" ? "#" + props.hash : undefined,
-  });
-};
+    hash: props.hash !== '' ? `#${props.hash}` : undefined,
+  })
+}
 
-const page = (page: number): RouteLocationRaw => {
-  const newQuery = { ...route.query };
-  newQuery.page = page.toString();
+function page(page: number): RouteLocationRaw {
+  const newQuery = { ...route.query }
+  newQuery.page = page.toString()
   return {
     path: history.currentRoute.path,
     query: newQuery,
-    hash: props.hash != "" ? "#" + props.hash : undefined,
-  };
-};
-const currentUrl = computed(() => {
-  /*
-  const url = getURL();
-  return `${url.Path}?page=`;
-  */
-  // user router url instead of getURL
-  return `${history.currentRoute.path}?page=`;
-});
+    hash: props.hash !== '' ? `#${props.hash}` : undefined,
+  }
+}
 
-const checkPageNumber = (page: number = 1) => {
-  prevNextSeo.value.next = undefined;
-  prevNextSeo.value.prev = undefined;
-  const pagePlus = page + 1;
-  const pageMinus = page - 1;
+function checkPageNumber(page: number = 1) {
+  prevNextSeo.value.next = undefined
+  prevNextSeo.value.prev = undefined
+  const pagePlus = page + 1
+  const pageMinus = page - 1
   if (hasFW()) {
-    const url = getURL();
+    const url = getURL()
     if (pagePlus <= props.items.page_max && url) {
-      prevNextSeo.value.next =
-        `${url.Scheme}://${url.Host}${route.path}?page=${pagePlus}` +
-        (props.hash != "" ? `#${props.hash}` : "");
+      prevNextSeo.value.next
+        = `${url.Scheme}://${url.Host}${route.path}?page=${pagePlus}${
+          props.hash !== '' ? `#${props.hash}` : ''}`
     }
     if (pageMinus >= 1 && url) {
-      prevNextSeo.value.prev =
-        `${url.Scheme}://${url.Host}${route.path}?page=${pageMinus}` +
-        (props.hash != "" ? `#${props.hash}` : "");
+      prevNextSeo.value.prev
+        = `${url.Scheme}://${url.Host}${route.path}?page=${pageMinus}${
+          props.hash !== '' ? `#${props.hash}` : ''}`
     }
   }
-};
+}
 
 pageWatcher.value = watch(
   () => route.query.page,
   (v) => {
-    eventBus.emit(`${props.id}GoToPage`, v ? v : 1);
+    eventBus.emit(`${props.id}GoToPage`, v || 1)
   },
-);
+)
 onMounted(() => {
-  eventBus.on(`${props.id}GoToPage`, checkPageNumber);
-});
+  eventBus.on(`${props.id}GoToPage`, checkPageNumber)
+})
 onUnmounted(() => {
-  eventBus.off(`${props.id}GoToPage`, checkPageNumber);
-  //if (pageWatcher.value) pageWatcher.value();
-});
+  eventBus.off(`${props.id}GoToPage`, checkPageNumber)
+  // if (pageWatcher.value) pageWatcher.value();
+})
 
-checkPageNumber(props.items.page_no);
+checkPageNumber(props.items.page_no)
 useHead({
   link: computed(() => {
-    const result: any = [];
-    if (prevNextSeo.value.next)
+    const result: any = []
+    if (prevNextSeo.value.next) {
       result.push({
         href: prevNextSeo.value.next,
-        rel: "next",
-        key: "next",
-      });
-    if (prevNextSeo.value.prev)
+        rel: 'next',
+        key: 'next',
+      })
+    }
+    if (prevNextSeo.value.prev) {
       result.push({
         href: prevNextSeo.value.prev,
-        rel: "prev",
-        key: "prev",
-      });
+        rel: 'prev',
+        key: 'prev',
+      })
+    }
 
-    return result;
+    return result
   }),
-});
+})
 </script>
+
 <template>
   <div
-    class="flex items-center justify-center"
     v-if="items && items.page_max > 1 && items.page_no"
+    class="flex items-center justify-center"
   >
     <div class="paging-container">
       <nav aria-label="Pagination">
@@ -147,8 +144,8 @@ useHead({
           <li v-if="items.page_no >= 2">
             <button
               type="button"
-              @click="prev()"
               class="flex items-center justify-center px-1.5 h-8 leading-tight text-fv-neutral-500 bg-white border border-fv-neutral-300 hover:bg-fv-neutral-100 hover:text-fv-neutral-700 dark:bg-fv-neutral-800 dark:border-fv-neutral-700 dark:text-fv-neutral-400 dark:hover:bg-fv-neutral-700 dark:hover:text-white"
+              @click="prev()"
             >
               <span class="sr-only">{{ $t("previous_paging") }}</span>
               <ChevronLeftIcon class="w-4 h-4" />
@@ -193,8 +190,8 @@ useHead({
           </li>
           <template v-for="i in 2">
             <li
-              :key="`page-x-${items.page_no + i}`"
               v-if="items.page_no + i <= items.page_max"
+              :key="`page-x-${items.page_no + i}`"
             >
               <router-link
                 class="flex items-center justify-center px-3 h-8 leading-tight text-fv-neutral-500 bg-white border border-fv-neutral-300 hover:bg-fv-neutral-100 hover:text-fv-neutral-700 dark:bg-fv-neutral-800 dark:border-fv-neutral-700 dark:text-fv-neutral-400 dark:hover:bg-fv-neutral-700 dark:hover:text-white"
@@ -221,9 +218,9 @@ useHead({
           </li>
           <li v-if="items.page_no < items.page_max - 1">
             <button
-              @click="next()"
               type="button"
               class="flex items-center justify-center px-1.5 h-8 leading-tight text-fv-neutral-500 bg-white border border-fv-neutral-300 hover:bg-fv-neutral-100 hover:text-fv-neutral-700 dark:bg-fv-neutral-800 dark:border-fv-neutral-700 dark:text-fv-neutral-400 dark:hover:bg-fv-neutral-700 dark:hover:text-white"
+              @click="next()"
             >
               <span class="sr-only">{{ $t("next_paging") }}</span>
               <ChevronRightIcon class="w-4 h-4" />
@@ -232,8 +229,8 @@ useHead({
         </ul>
       </nav>
       <p
-        class="text-xs text-fv-neutral-700 dark:text-fv-neutral-400 pt-0.5"
         v-if="showLegend"
+        class="text-xs text-fv-neutral-700 dark:text-fv-neutral-400 pt-0.5"
       >
         {{
           $t("global_paging", {

package/components/ui/DefaultSidebar.vue

@@ -1,34 +1,37 @@
 <script lang="ts" setup>
-import { NavLink } from "../../types";
-import { ArrowRightIcon, ArrowLeftIcon } from "@heroicons/vue/24/solid";
-import { useStorage } from "@vueuse/core";
-import { useRoute } from "vue-router";
+import type { NavLink } from '../../types'
+import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/vue/24/solid'
+import { useStorage } from '@vueuse/core'
+import { useRoute } from 'vue-router'
 
 const props = withDefaults(
   defineProps<{
-    links: NavLink[];
-    id?: string;
-    baseUrl?: string;
+    links: NavLink[]
+    id?: string
+    baseUrl?: string
   }>(),
   {
-    id: "main",
-    baseUrl: "/",
+    id: 'main',
+    baseUrl: '/',
   },
-);
-const route = useRoute();
-const isLinkActive = (link: NavLink) => {
-  if (link.to != props.baseUrl) {
-    if (route.path == link.to || route.path.includes(link.to))
-      return "fvside-active";
-  } else {
-    if (route.path == link.to) {
-      return "fvside-active";
+)
+const route = useRoute()
+function isLinkActive(link: NavLink) {
+  if (link.to !== props.baseUrl) {
+    if (route.path === link.to || route.path.includes(link.to)) {
+      return 'fvside-active'
     }
   }
-  return "";
-};
-const isOpen = useStorage(`isOpenSidebar-${props.id}`, true);
+  else {
+    if (route.path === link.to) {
+      return 'fvside-active'
+    }
+  }
+  return ''
+}
+const isOpen = useStorage(`isOpenSidebar-${props.id}`, true)
 </script>
+
 <template>
   <aside class="fui-sidebar" :class="isOpen ? '' : 'fui-sidebar__md'">
     <div class="fui-sidebar__controller">
@@ -42,8 +45,8 @@ const isOpen = useStorage(`isOpenSidebar-${props.id}`, true);
         <span class="sr-only">{{ $t("sidebar_size_control") }}</span>
       </button>
     </div>
-    <slot name="before"></slot>
-    <ul role="list" id="side-nav">
+    <slot name="before" />
+    <ul id="side-nav" role="list">
       <li v-for="(link, index) of links" :key="`aside_link_${index}`">
         <RouterLink
           :to="link.to"
@@ -58,11 +61,12 @@ const isOpen = useStorage(`isOpenSidebar-${props.id}`, true);
           <span class="sr-only">{{ link.name }}</span>
         </RouterLink>
       </li>
-      <slot name="lis"></slot>
+      <slot name="lis" />
     </ul>
-    <slot name="after"></slot>
+    <slot name="after" />
   </aside>
 </template>
+
 <style lang="scss" scoped>
 .fui-sidebar {
   @apply w-60 transition-all duration-300 ease-in-out;