npm - @fy-/fws-vue - Versions diffs - 0.3.60 → 0.3.62 - Mend

@fy-/fws-vue 0.3.60 → 0.3.62

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/components/ui/DefaultGallery.vue +4 -2
package/components/ui/DefaultPaging.vue +83 -79
package/package.json +1 -1

package/components/ui/DefaultGallery.vue CHANGED Viewed

@@ -201,7 +201,7 @@ onUnmounted(() => {
                 class="flex h-[100vh] relative flex-grow items-center justify-center gap-2"
               >
                 <div
-                  class="hidden lg:relative lg:flex w-10 flex-shrink-0 items-center justify-center"
+                  class="hidden lg:relative lg:flex w-10 flex-shrink-0 items-center justify-center flex-0"
                 >
                   <button
                     class="btn p-1 rounded-full"
@@ -248,7 +248,9 @@ onUnmounted(() => {
                       />
                     </template>
                   </div>
-                  <div class="flex-0 py-2 flex items-center justify-center">
+                  <div
+                    class="flex-0 py-2 flex items-center justify-center max-w-full w-full"
+                  >
                     <slot :value="images[modelValue]"></slot>
                   </div>
                 </div>

package/components/ui/DefaultPaging.vue CHANGED Viewed

@@ -128,89 +128,93 @@ useFyHead({
     v-if="items && items.page_max > 1 && items.page_no"
   >
     <div class="paging-container">
-      <nav
-        aria-label="Pagination"
-        class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px"
-      >
-        <a
-          href="javascript:void(0);"
-          @click="prev()"
-          v-if="items.page_no >= 2"
-          class="relative inline-flex items-center px-2 pt-2 pb-1.5 border text-sm font-medium border-fv-neutral-300 bg-fv-neutral-100 text-fv-neutral-500 hover:bg-fv-neutral-200 hover:text-fv-neutral-600 dark:border-fv-neutral-600 dark:bg-fv-neutral-800 dark:text-fv-neutral-200 dark:hover:bg-fv-neutral-800 dark:hover:text-fv-neutral-100"
-        >
-          <span class="sr-only">{{ $t("previous_paging") }}</span>
-          <ChevronLeftIcon class="w-4 h-4" />
-        </a>
-        <a
-          v-if="items.page_no - 2 > 1"
-          class="relative inline-flex items-center px-4 pt-2 pb-1.5 border text-sm font-medium bg-fv-neutral-100 border-fv-neutral-300 text-fv-neutral-500 hover:bg-fv-neutral-200 hover:text-fv-neutral-600 dark:bg-fv-neutral-800 dark:border-fv-neutral-600 dark:text-fv-neutral-200 dark:hover:bg-fv-neutral-800 dark:hover:text-fv-neutral-100"
-          href="javascript:void(0);"
-          @click="page(1)"
-        >
-          1
-        </a>
-        <span
-          v-if="items.page_no - 2 > 2"
-          class="relative inline-flex items-center px-2 pt-2 pb-1.5 border text-sm font-medium border-fv-neutral-300 bg-fv-neutral-100 text-fv-neutral-700 hover:text-fv-neutral-600 dark:border-fv-neutral-600 dark:bg-fv-neutral-800 dark:text-fv-neutral-700 dark:hover:text-fv-neutral-100"
-        >
-          ...
-        </span>
-        <template v-for="i in 2">
+      <nav aria-label="Pagination">
+        <ul class="flex items-center -space-x-px h-8 text-sm">
+          <li v-if="items.page_no >= 2">
+            <a
+              href="javascript:void(0);"
+              @click="prev()"
+              class="flex items-center justify-center px-3 h-8 ms-0 leading-tight text-fv-neutral-500 bg-white border border-e-0 border-fv-neutral-300 rounded-s-lg 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"
+            >
+              <span class="sr-only">{{ $t("previous_paging") }}</span>
+              <ChevronLeftIcon class="w-4 h-4" />
+            </a>
+          </li>
+          <li v-if="items.page_no - 2 > 1">
+            <a
+              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"
+              href="javascript:void(0);"
+              @click="page(1)"
+            >
+              1
+            </a>
+          </li>
+          <li v-if="items.page_no - 2 > 2">
+            <span
+              v-if="items.page_no - 2 > 2"
+              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"
+            >
+              ...
+            </span>
+          </li>
+          <template v-for="i in 2">
+            <li v-if="items.page_no - (3 - i) >= 1" :key="`${i}-sm`">
+              <a
+                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"
+                href="javascript:void(0);"
+                @click="page(items.page_no - (3 - i))"
+              >
+                {{ items.page_no - (3 - i) }}
+              </a>
+            </li>
+          </template>
           <a
-            v-if="items.page_no - (3 - i) >= 1"
-            class="relative inline-flex items-center px-4 pt-2 pb-1.5 border text-sm font-medium bg-fv-neutral-100 border-fv-neutral-300 text-fv-neutral-500 hover:bg-fv-neutral-200 hover:text-fv-neutral-600 dark:bg-fv-neutral-800 dark:border-fv-neutral-600 dark:text-fv-neutral-200 dark:hover:bg-fv-neutral-800 dark:hover:text-fv-neutral-100"
-            href="javascript:void(0);"
-            :key="`${i}-sm`"
-            @click="page(items.page_no - (3 - i))"
+            href="#"
+            aria-current="page"
+            class="z-10 flex items-center justify-center px-3 h-8 leading-tight text-primary-600 border border-primary-300 bg-primary-50 hover:bg-primary-100 hover:text-primary-700 dark:border-fv-neutral-700 dark:bg-fv-neutral-700 dark:text-white"
           >
-            {{ items.page_no - (3 - i) }}
+            {{ items.page_no }}
           </a>
-        </template>
-        <a
-          href="#"
-          aria-current="page"
-          class="z-10 relative inline-flex items-center px-4 pt-2 pb-1.5 border text-sm font-medium font-bold bg-fv-primary-50 border-fv-primary-500 text-fv-primary-600 hover:text-fv-neutral-600 dark:bg-fv-primary-900 dark:border-fv-primary-500 dark:text-fv-primary-200 dark:hover:text-fv-neutral-100"
-        >
-          {{ items.page_no }}
-        </a>
-        <template v-for="i in 2">
-          <a
-            v-if="items.page_no + i <= items.page_max"
-            class="relative inline-flex items-center px-4 pt-2 pb-1.5 border text-sm font-medium bg-fv-neutral-100 border-fv-neutral-300 text-fv-neutral-500 hover:bg-fv-neutral-200 hover:text-fv-neutral-600 dark:bg-fv-neutral-800 dark:border-fv-neutral-600 dark:text-fv-neutral-200 dark:hover:bg-fv-neutral-800 dark:hover:text-fv-neutral-100"
-            href="javascript:void(0);"
-            :key="`${i}-md`"
-            @click="page(items.page_no + i)"
-          >
-            {{ items.page_no + i }}
-          </a>
-        </template>
-        <span
-          v-if="items.page_no + 2 < items.page_max - 1"
-          class="relative inline-flex items-center px-2 pt-2 pb-1.5 border text-sm font-medium border-fv-neutral-300 bg-fv-neutral-100 text-fv-neutral-700 hover:text-fv-neutral-600 dark:border-fv-neutral-600 dark:bg-fv-neutral-800 dark:text-fv-neutral-700 dark:hover:text-fv-neutral-100"
-        >
-          ...
-        </span>
-        <a
-          v-if="items.page_no + 2 < items.page_max"
-          class="relative inline-flex items-center px-4 pt-2 pb-1.5 border text-sm font-medium bg-fv-neutral-100 border-fv-neutral-300 text-fv-neutral-500 hover:bg-fv-neutral-200 hover:text-fv-neutral-600 dark:bg-fv-neutral-800 dark:border-fv-neutral-600 dark:text-fv-neutral-200 dark:hover:bg-fv-neutral-800 dark:hover:text-fv-neutral-100"
-          href="javascript:void(0);"
-          @click="page(items.page_max)"
-        >
-          {{ items.page_max }}
-        </a>
-        <a
-          href="javascript:void(0);"
-          @click="next()"
-          v-if="items.page_no < items.page_max - 1"
-          class="relative inline-flex items-center px-2 pt-2 pb-1.5 border text-sm font-medium border-fv-neutral-300 bg-fv-neutral-100 text-fv-neutral-500 hover:bg-fv-neutral-200 hover:text-fv-neutral-600 dark:border-fv-neutral-600 dark:bg-fv-neutral-800 dark:text-fv-neutral-200 dark:hover:bg-fv-neutral-800 dark:hover:text-fv-neutral-100"
-        >
-          <span class="sr-only">{{ $t("next_paging") }}</span>
-          <ChevronRightIcon class="w-4 h-4" />
-        </a>
+          <template v-for="i in 2">
+            <li :key="`${i}-md`" v-if="items.page_no + i <= items.page_max">
+              <a
+                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"
+                href="javascript:void(0);"
+                @click="page(items.page_no + i)"
+              >
+                {{ items.page_no + i }}
+              </a>
+            </li>
+          </template>
+          <li v-if="items.page_no + 2 < items.page_max - 1">
+            <span
+              class="relative inline-flex items-center px-2 pt-2 pb-1.5 border text-sm font-medium border-fv-neutral-300 bg-fv-neutral-100 text-fv-neutral-700 hover:text-fv-neutral-600 dark:border-fv-neutral-600 dark:bg-fv-neutral-800 dark:text-fv-neutral-700 dark:hover:text-fv-neutral-100"
+            >
+              ...
+            </span>
+          </li>
+          <li v-if="items.page_no + 2 < items.page_max">
+            <a
+              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"
+              href="javascript:void(0);"
+              @click="page(items.page_max)"
+            >
+              {{ items.page_max }}
+            </a>
+          </li>
+          <li v-if="items.page_no < items.page_max - 1">
+            <a
+              href="javascript:void(0);"
+              @click="next()"
+              class="flex items-center justify-center px-3 h-8 leading-tight text-fv-neutral-500 bg-white border border-fv-neutral-300 rounded-e-lg 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"
+            >
+              <span class="sr-only">{{ $t("next_paging") }}</span>
+              <ChevronRightIcon class="w-4 h-4" />
+            </a>
+          </li>
+        </ul>
       </nav>
-      <p
-        class="text-xs text-center italic mt-0.5 text-fv-neutral-700 dark:text-fv-neutral-300"
-      >
+      <p class="text-xs text-fv-neutral-700 dark:text-fv-neutral-400">
         {{
           $t("global_paging", {
             start: items.results_per_page * (items.page_no - 1),

package/package.json CHANGED Viewed

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