@fy-/fws-vue 0.0.5 → 0.0.7

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,
   },
 );
 
@@ -79,7 +83,7 @@ useSeo(seo);
           v-if="post.CoverUUID"
           :content="`https://s.nocachenocry.com/${post.CoverUUID}?vars=format=webp:resize=512x512`"
         />
-        <div class="py-8 px-4">
+        <div class="py-4 px-4 max-w-6xl mx-auto">
           <h1
             class="mb-4 text-4xl tracking-tight font-extrabold text-center text-fv-neutral-900 dark:text-white"
           >
@@ -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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fy-/fws-vue",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "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 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;
     }
 }
+