@fy-/fws-vue 0.0.7 → 0.0.8

package/components/ui/DefaultSidebar.vue

@@ -0,0 +1,139 @@
+<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";
+
+const props = withDefaults(
+  defineProps<{
+    links: NavLink[];
+    id?: string;
+    baseUrl?: string;
+  }>(),
+  {
+    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";
+    }
+  }
+  return "";
+};
+const isOpen = useStorage(`isOpenSidebar-${props.id}`, true);
+</script>
+<template>
+  <aside class="fui-sidebar" :class="isOpen ? '' : 'fui-sidebar__md'">
+    <div class="fui-sidebar__controller">
+      <button
+        class="btn neutral defaults"
+        aria-controls="side-nav"
+        @click="isOpen = !isOpen"
+      >
+        <ArrowLeftIcon v-if="isOpen" />
+        <ArrowRightIcon v-else />
+        <span class="sr-only">{{ $t("sidebar_size_control") }}</span>
+      </button>
+    </div>
+    <slot name="before"></slot>
+    <ul role="list" id="side-nav">
+      <li v-for="(link, index) of links" :key="`aside_link_${index}`">
+        <RouterLink
+          :to="link.to"
+          class="fui-sidebar__link"
+          :class="isLinkActive(link)"
+        >
+          <div role="tooltip" class="fui-tooltip">
+            {{ link.name }}
+          </div>
+          <component :is="link.icon" v-if="link.icon" />
+          <span>{{ link.name }}</span>
+          <span class="sr-only">{{ link.name }}</span>
+        </RouterLink>
+      </li>
+      <slot name="lis"></slot>
+    </ul>
+    <slot name="after"></slot>
+  </aside>
+</template>
+<style lang="scss" scoped>
+.fui-sidebar {
+  @apply w-60;
+  transition: width 600ms ease-in-out;
+  .fui-sidebar__controller {
+    @apply py-3 flex items-center justify-end pr-3;
+    svg {
+      @apply w-4 h-4;
+    }
+  }
+  .fui-sidebar__link {
+    @apply relative flex w-full items-center py-3 px-3 font-semibold text-sm border-l-[.4rem] border-l-transparent;
+    @apply text-fv-neutral-600 hover:bg-fv-neutral-200/[.3] focus:bg-fv-neutral-200/[.3] hover:text-fv-primary-600;
+    @apply dark:text-fv-neutral-300 dark:hover:bg-fv-neutral-700/[.3] dark:focus:bg-fv-neutral-700/[.3] dark:hover:text-fv-primary-400;
+    &.fvside-active {
+      @apply border-l-fv-primary-500 bg-fv-neutral-200  hover:text-fv-neutral-600 focus:text-fv-neutral-600;
+      @apply dark:bg-fv-neutral-700 dark:hover:text-fv-neutral-300 dark:text-fv-neutral-300;
+    }
+    svg {
+      @apply w-6 h-6 mr-2 -ml-1 text-fv-neutral-400 dark:text-fv-neutral-500;
+    }
+    span {
+      @apply whitespace-nowrap;
+    }
+    transition: all 300ms ease-in-out;
+  }
+
+  &.fui-sidebar__md {
+    @apply w-12;
+    &.fui-sidebar__md {
+      @apply w-12;
+    }
+    .fui-sidebar__link {
+      @apply flex flex-col text-xs;
+      svg {
+        @apply mr-0;
+      }
+      span {
+        @apply hidden;
+      }
+    }
+    .fui-sidebar__link:hover .fui-tooltip,
+    .fui-sidebar__link:focus .fui-tooltip,
+    .fui-sidebar__link:active .fui-tooltip {
+      @apply visible opacity-100 left-11 top-0 bottom-0 flex items-center;
+    }
+  }
+}
+@media screen and (max-width: 640px) {
+  .fui-sidebar {
+    @apply w-12;
+    &.fui-sidebar__md {
+      @apply w-12;
+    }
+    .fui-sidebar__controller {
+      @apply hidden;
+    }
+    .fui-sidebar__link {
+      @apply flex flex-col text-xs;
+      svg {
+        @apply mr-0;
+      }
+      span {
+        @apply hidden;
+      }
+    }
+    .fui-sidebar__link:hover .fui-tooltip,
+    .fui-sidebar__link:focus .fui-tooltip,
+    .fui-sidebar__link:active .fui-tooltip {
+      @apply visible opacity-100 left-11 top-0 bottom-0 flex items-center;
+    }
+  }
+}
+</style>

package/index.ts

@@ -33,6 +33,7 @@ import DefaultConfirm from "./components/ui/DefaultConfirm.vue";
 import DefaultPaging from "./components/ui/DefaultPaging.vue";
 import DefaultBreadcrumb from "./components/ui/DefaultBreadcrumb.vue";
 import DefaultLoader from "./components/ui/DefaultLoader.vue";
+import DefaultSidebar from "./components/ui/DefaultSidebar.vue";
 
 // Components/FWS
 import UserFlow from "./components/fws/UserFlow.vue";
@@ -113,6 +114,7 @@ export {
   DefaultPaging,
   DefaultBreadcrumb,
   DefaultLoader,
+  DefaultSidebar,
 
   // FWS
   UserFlow,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fy-/fws-vue",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "author": "Florian 'Fy' Gasquez <m@fy.to>",
   "license": "MIT",
   "repository": {

package/style.css

@@ -10,7 +10,7 @@
 }
 
 .btn {
-    @apply text-white focus:ring-4 font-medium rounded-lg text-sm focus:outline-none transition-colors ease-in-out motion-reduce:transition-none;
+    @apply inline-flex gap-3 text-white focus:ring-4 font-medium rounded-lg text-sm focus:outline-none transition-colors ease-in-out motion-reduce:transition-none;
     &.primary {
         @apply bg-fv-primary-700 hover:bg-fv-primary-800 focus:ring-fv-primary-300 dark:bg-fv-primary-600 dark:hover:bg-fv-primary-700 dark:focus:ring-fv-primary-800;
     }

package/types.d.ts

@@ -2,3 +2,11 @@ export interface BreadcrumbLink {
   name: string;
   to?: string;
 }
+export type NavLink = {
+  to: string;
+  isExternal?: boolean;
+  name: string;
+  childrens?: NavLink[];
+  icon?: Component;
+  id?: string;
+};

package/components.d.ts

@@ -1,22 +0,0 @@
-/* eslint-disable */
-/* prettier-ignore */
-// @ts-nocheck
-// Generated by unplugin-vue-components
-// Read more: https://github.com/vuejs/core/pull/3399
-export {}
-
-declare module 'vue' {
-  export interface GlobalComponents {
-    CollapseTransition: typeof import('./components/ui/transitions/CollapseTransition.vue')['default']
-    DefaultConfirm: typeof import('./components/ui/DefaultConfirm.vue')['default']
-    DefaultInput: typeof import('./components/ui/DefaultInput.vue')['default']
-    DefaultModal: typeof import('./components/ui/DefaultModal.vue')['default']
-    ExpandTransition: typeof import('./components/ui/transitions/ExpandTransition.vue')['default']
-    FadeTransition: typeof import('./components/ui/transitions/FadeTransition.vue')['default']
-    RouterLink: typeof import('vue-router')['RouterLink']
-    RouterView: typeof import('vue-router')['RouterView']
-    ScaleTransition: typeof import('./components/ui/transitions/ScaleTransition.vue')['default']
-    SlideTransition: typeof import('./components/ui/transitions/SlideTransition.vue')['default']
-    UserFlow: typeof import('./components/fws/UserFlow.vue')['default']
-  }
-}