@fy-/fws-vue 0.0.6 → 0.0.8

package/components/fws/CmsArticleSingle.vue

@@ -13,9 +13,13 @@ const props = withDefaults(
     cmsAlias: string;
     notFound: Component;
     baseBreadcrumb?: BreadcrumbLink[];
+    showImage?: boolean;
+    showPreview?: boolean;
   }>(),
   {
     baseBreadcrumb: () => [],
+    showImage: true,
+    showPreview: true,
   },
 );
 
@@ -87,12 +91,13 @@ useSeo(seo);
           </h1>
           <p
             class="font-light text-center text-fv-neutral-500 dark:text-fv-neutral-400 sm:text-xl"
+            v-if="showPreview"
           >
             {{ post.Overview }}
           </p>
         </div>
         <img
-          v-if="post.CoverUUID"
+          v-if="post.CoverUUID && showImage"
           :src="`https://s.nocachenocry.com/${post.CoverUUID}?vars=format=webp:resize=768x768`"
           :alt="post.Title"
           class="h-auto rounded-xl shadow max-w-[768px] max-h-[280px] mx-auto mb-6"

package/components/ui/DefaultInput.vue

@@ -209,22 +209,22 @@ defineExpose({ focus, getInputRef });
   @apply mt-2 text-sm text-fv-neutral-500 dark:text-fv-neutral-400;
 }
 .fws-input {
-  @apply shadow-sm bg-fv-neutral-50 border border-fv-neutral-300 text-fv-neutral-900 text-sm rounded-lg focus:ring-fv-primary-500 focus:border-fv-primary-500 block w-full p-2.5 dark:bg-fv-neutral-700 dark:border-fv-neutral-600 dark:placeholder-fv-neutral-400 dark:text-white dark:focus:ring-fv-primary-500 dark:focus:border-fv-primary-500;
+  @apply shadow-sm bg-fv-neutral-50 border border-fv-neutral-300 text-fv-neutral-900 text-sm rounded-sm focus:ring-fv-primary-500 focus:border-fv-primary-500 block w-full p-2.5 dark:bg-fv-neutral-700 dark:border-fv-neutral-600 dark:placeholder-fv-neutral-400 dark:text-white dark:focus:ring-fv-primary-500 dark:focus:border-fv-primary-500;
   &.error {
-    @apply bg-red-50 border border-red-500 text-red-900 placeholder-red-700 text-sm rounded-lg focus:ring-red-500 focus:border-red-500 block w-full p-2.5 dark:bg-red-100 dark:border-red-400;
+    @apply bg-red-50 border border-red-500 text-red-900 placeholder-red-700 text-sm rounded-sm focus:ring-red-500 focus:border-red-500 block w-full p-2.5 dark:bg-red-100 dark:border-red-400;
   }
 }
 .fws-textarea {
-  @apply block p-2.5 w-full text-sm text-fv-neutral-900 bg-fv-neutral-50 rounded-lg border border-fv-neutral-300 focus:ring-fv-primary-500 focus:border-fv-primary-500 dark:bg-fv-neutral-700 dark:border-fv-neutral-600 dark:placeholder-fv-neutral-400 dark:text-white dark:focus:ring-fv-primary-500 dark:focus:border-fv-primary-500;
+  @apply block p-2.5 w-full text-sm text-fv-neutral-900 bg-fv-neutral-50 rounded-sm border border-fv-neutral-300 focus:ring-fv-primary-500 focus:border-fv-primary-500 dark:bg-fv-neutral-700 dark:border-fv-neutral-600 dark:placeholder-fv-neutral-400 dark:text-white dark:focus:ring-fv-primary-500 dark:focus:border-fv-primary-500;
   &.error {
-    @apply bg-red-50 border border-red-500 text-red-900 placeholder-red-700 text-sm rounded-lg focus:ring-red-500 focus:border-red-500 block w-full p-2.5 dark:bg-red-100 dark:border-red-400;
+    @apply bg-red-50 border border-red-500 text-red-900 placeholder-red-700 text-sm rounded-sm focus:ring-red-500 focus:border-red-500 block w-full p-2.5 dark:bg-red-100 dark:border-red-400;
   }
 }
 
 .fws-select {
-  @apply bg-fv-neutral-50 border border-fv-neutral-300 text-fv-neutral-900 text-sm rounded-lg focus:ring-fv-primary-500 focus:border-fv-primary-500 block w-full p-2.5 dark:bg-fv-neutral-700 dark:border-fv-neutral-600 dark:placeholder-fv-neutral-400 dark:text-white dark:focus:ring-fv-primary-500 dark:focus:border-fv-primary-500;
+  @apply bg-fv-neutral-50 border border-fv-neutral-300 text-fv-neutral-900 text-sm rounded-sm focus:ring-fv-primary-500 focus:border-fv-primary-500 block w-full p-2.5 dark:bg-fv-neutral-700 dark:border-fv-neutral-600 dark:placeholder-fv-neutral-400 dark:text-white dark:focus:ring-fv-primary-500 dark:focus:border-fv-primary-500;
   &.error {
-    @apply bg-red-50 border border-red-500 text-red-900 placeholder-red-700 text-sm rounded-lg focus:ring-red-500 focus:border-red-500 block w-full p-2.5 dark:bg-red-100 dark:border-red-400;
+    @apply bg-red-50 border border-red-500 text-red-900 placeholder-red-700 text-sm rounded-sm focus:ring-red-500 focus:border-red-500 block w-full p-2.5 dark:bg-red-100 dark:border-red-400;
   }
 }
 .fws-checkbox {
@@ -234,7 +234,7 @@ defineExpose({ focus, getInputRef });
 .fws-checkbox input {
   @apply w-4 h-4 text-fv-primary-600 bg-fv-neutral-100 border-fv-neutral-300 rounded focus:ring-fv-primary-500 dark:focus:ring-fv-primary-600 dark:ring-offset-fv-neutral-800 dark:focus:ring-offset-fv-neutral-800 focus:ring-2 dark:bg-fv-neutral-700 dark:border-fv-neutral-600;
   &.error {
-    @apply bg-red-50 border border-red-500 text-red-900 placeholder-red-700 text-sm rounded-lg focus:ring-red-500 focus:border-red-500 block w-full p-2.5 dark:bg-red-100 dark:border-red-400;
+    @apply bg-red-50 border border-red-500 text-red-900 placeholder-red-700 text-sm rounded-sm focus:ring-red-500 focus:border-red-500 block w-full p-2.5 dark:bg-red-100 dark:border-red-400;
   }
 }
 .fws-checkbox label {

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.6",
+  "version": "0.0.8",
   "author": "Florian 'Fy' Gasquez <m@fy.to>",
   "license": "MIT",
   "repository": {

package/style.css

@@ -10,21 +10,21 @@
 }
 
 .btn {
-    @apply text-white bg-gradient-to-br  hover:bg-gradient-to-bl focus:ring-4 focus:outline-none font-medium rounded-lg text-center 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 from-fv-primary-600 to-fv-primary-500 focus:ring-fv-primary-300 dark:focus:ring-fv-primary-800;
+        @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;
     }
     &.accent {
-        @apply from-fv-accent-600 to-fv-accent-500 focus:ring-fv-accent-300 dark:focus:ring-fv-accent-800;
+        @apply bg-fv-accent-700 hover:bg-fv-accent-800 focus:ring-fv-accent-300 dark:bg-fv-accent-600 dark:hover:bg-fv-accent-700 dark:focus:ring-fv-accent-800;
     }
     &.success,&.valid {
-        @apply from-green-600 to-green-500 focus:ring-green-300 dark:focus:ring-green-800;
+        @apply bg-green-700 hover:bg-green-800 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800;
     }
     &.error,&.danger {
-        @apply from-red-600 to-red-500 focus:ring-red-300 dark:focus:ring-red-800;
+        @apply bg-red-700 hover:bg-red-800 focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800;
     }
     &.neutral {
-        @apply from-fv-neutral-600 to-fv-neutral-500 focus:ring-fv-neutral-300 dark:focus:ring-fv-neutral-800;
+        @apply bg-fv-neutral-700 hover:bg-fv-neutral-800 focus:ring-fv-neutral-300 dark:bg-fv-neutral-600 dark:hover:bg-fv-neutral-700 dark:focus:ring-fv-neutral-800;
     }
 
     &.defaults {
@@ -40,3 +40,4 @@
         @apply px-6 py-3 text-base;
     }
 }
+

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']
-  }
-}