fxs

fy-to · Oct 6, 2024 · d5f97b7 · d5f97b7
1 parent 58b4eae
commit d5f97b7
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 21 deletions.
diff --git a/packages/fws-vue/package.json b/packages/fws-vue/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@fy-/fws-vue",
-    "version": "2.0.59",
+    "version": "2.0.79",
     "author": "Florian 'Fy' Gasquez <m@fy.to>",
     "license": "MIT",
     "repository": {

diff --git a/packages/fws-vue/src/components/fws/CmsArticleSingle.vue b/packages/fws-vue/src/components/fws/CmsArticleSingle.vue
@@ -112,7 +112,7 @@ useSchemaOrg([
           v-if="post.CoverUUID"
           :content="`${props.imageDomain}/${post.CoverUUID}?vars=format=webp:resize=512x512`"
         />
-        <div class="py-4 px-4 max-w-6xl mx-auto" v-if="showTitle">
+        <div class="py-4 px-4 !max-w-full mx-auto w-full" v-if="showTitle">
           <h1
             class="mb-4 text-4xl tracking-tight font-extrabold text-center text-fv-neutral-900 dark:text-white"
           >
@@ -133,7 +133,7 @@ useSchemaOrg([
         />
         <section
           itemprop="articleBody"
-          class="prose dark:prose-invert max-w-6xl mx-auto mb-6"
+          class="prose dark:prose-invert !max-w-full mx-auto w-full mb-6"
           v-html="post.Body"
         ></section>
       </article>

diff --git a/packages/fws-vue/src/components/ui/DefaultConfirm.vue b/packages/fws-vue/src/components/ui/DefaultConfirm.vue
@@ -51,11 +51,10 @@ onUnmounted(() => {
           class="mx-auto mb-4 text-fv-neutral-400 w-12 h-12 dark:text-fv-neutral-200"
         />
 
-        <h3
-          class="mb-5 text-lg font-normal text-fv-neutral-500 dark:text-fv-neutral-400"
-        >
-          {{ desc ? desc : title }}
-        </h3>
+        <p
+          class="mb-5 !text-left prose prose-invert prose-sm !min-w-full"
+          v-html="desc ? desc : title"
+        ></p>
         <div class="flex justify-between gap-3 mt-4">
           <button class="btn danger defaults" @click="_onConfirm()">
             {{ $t("confirm_modal_cta_confirm") }}

diff --git a/packages/fws-vue/src/components/ui/DefaultGallery.vue b/packages/fws-vue/src/components/ui/DefaultGallery.vue
@@ -322,7 +322,9 @@ onUnmounted(() => {
                     :image="getThumbnailUrl(images[i - 1]).image"
                     :variant="getThumbnailUrl(images[i - 1]).variant"
                     :alt="getThumbnailUrl(images[i - 1]).alt"
-                    class="h-auto max-w-full rounded-lg cursor-pointer shadow"
+                    :class="`h-auto max-w-full rounded-lg cursor-pointer shadow ${getBorderColor(
+                      images[i - 1],
+                    )}`"
                   />
                 </div>
               </div>
@@ -364,8 +366,14 @@ onUnmounted(() => {
                     :image="getThumbnailUrl(images[i + j - 2]).image"
                     :variant="getThumbnailUrl(images[i + j - 2]).variant"
                     :alt="getThumbnailUrl(images[i + j - 2]).alt"
-                    class="h-auto max-w-full rounded-lg cursor-pointer"
+                    :class="`h-auto max-w-full rounded-lg cursor-pointer ${getBorderColor(
+                      images[i + j - 2],
+                    )}`"
                     @click="$eventBus.emit(`${id}GalleryImage`, i + j - 2)"
+                    :likes="getThumbnailUrl(images[i + j - 2]).likes"
+                    :show-likes="getThumbnailUrl(images[i + j - 2]).showLikes"
+                    :isAuthor="getThumbnailUrl(images[i + j - 2]).isAuthor"
+                    :user-uuid="getThumbnailUrl(images[i + j - 2]).userUUID"
                   />
                 </div>
               </template>
@@ -385,8 +393,14 @@ onUnmounted(() => {
               :image="getThumbnailUrl(images[i - 1]).image"
               :variant="getThumbnailUrl(images[i - 1]).variant"
               :alt="getThumbnailUrl(images[i - 1]).alt"
-              class="h-auto max-w-full rounded-lg cursor-pointer"
+              :class="`h-auto max-w-full rounded-lg cursor-pointer ${getBorderColor(
+                images[i - 1],
+              )}`"
               @click="$eventBus.emit(`${id}GalleryImage`, i - 1)"
+              :likes="getThumbnailUrl(images[i - 1]).likes"
+              :show-likes="getThumbnailUrl(images[i - 1]).showLikes"
+              :isAuthor="getThumbnailUrl(images[i - 1]).isAuthor"
+              :user-uuid="getThumbnailUrl(images[i - 1]).userUUID"
             />
           </div>
         </template>

diff --git a/packages/fws-vue/src/components/ui/DefaultInput.vue b/packages/fws-vue/src/components/ui/DefaultInput.vue
@@ -1,13 +1,5 @@
 <script setup lang="ts">
-import { LinkIcon } from "@heroicons/vue/24/solid";
-import {
-  computed,
-  defineAsyncComponent,
-  onMounted,
-  onUnmounted,
-  ref,
-  toRef,
-} from "vue";
+import { computed, ref, toRef } from "vue";
 import type { ErrorObject } from "@vuelidate/core";
 import { useTranslation } from "../../composables/translations";
 import DefaultTagInput from "./DefaultTagInput.vue";
@@ -41,6 +33,8 @@ const props = withDefaults(
     maxLengthPerTag?: number;
     disableDatesUnder18?: boolean;
     copyButton?: boolean;
+    maxRange?: number;
+    minRange?: number;
   }>(),
   {
     showLabel: true,
@@ -51,6 +45,8 @@ const props = withDefaults(
     checkboxFalseValue: false,
     disabled: false,
     maxLengthPerTag: 0,
+    maxRange: 100,
+    minRange: 0,
     disableDatesUnder18: false,
     copyButton: false,
     dpOptions: () => ({}),
@@ -136,6 +132,7 @@ defineExpose({ focus, blur, getInputRef });
           'textarea-grow',
           'select',
           'phone',
+          'range',
           'chips',
           'tags',
           'mask',
@@ -150,6 +147,7 @@ defineExpose({ focus, blur, getInputRef });
               'text',
               'phone',
               'password',
+              'range',
               'email',
               'search',
               'url',
@@ -166,6 +164,7 @@ defineExpose({ focus, blur, getInputRef });
             v-if="label"
             class="block mb-2 text-sm font-medium text-fv-neutral-900 dark:text-white"
             >{{ label }}
+            <template v-if="type === 'range'"> ({{ model }}) </template>
           </label>
           <input
             ref="inputRef"
@@ -174,17 +173,41 @@ defineExpose({ focus, blur, getInputRef });
             :name="id"
             :class="{
               error: checkErrors,
+              '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':
+                type !== 'range',
+              'w-full h-2 bg-fv-neutral-200 rounded-lg appearance-none cursor-pointer dark:bg-fv-neutral-700':
+                type === 'range',
             }"
             v-model="model"
             :autocomplete="autocomplete"
+            :min="type === 'range' ? minRange : undefined"
+            :max="type === 'range' ? maxRange : undefined"
             :placeholder="placeholder"
             :disabled="disabled"
             :aria-describedby="help ? `${id}-help` : id"
-            class="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"
             :required="req"
             @focus="handleFocus"
             @blur="handleBlur"
           />
+          <template v-if="type === 'range'">
+            <span
+              class="text-sm text-gray-500 dark:text-gray-400 absolute start-0 -bottom-6"
+              >Min ({{ minRange }})
+            </span>
+            <span
+              class="text-sm text-gray-500 dark:text-gray-400 absolute start-1/3 -translate-x-1/2 rtl:translate-x-1/2 -bottom-6"
+              >{{ ((maxRange - minRange) / 3 + minRange).toFixed(0) }}</span
+            >
+            <span
+              class="text-sm text-gray-500 dark:text-gray-400 absolute start-2/3 -translate-x-1/2 rtl:translate-x-1/2 -bottom-6"
+            >
+              {{ (((maxRange - minRange) / 3) * 2 + minRange).toFixed(0) }}
+            </span>
+            <span
+              class="text-sm text-gray-500 dark:text-gray-400 absolute end-0 -bottom-6"
+              >Max ({{ maxRange }})</span
+            >
+          </template>
         </div>
         <!--
         <div v-if="type == 'datepicker'">