fixing klb redirect, improved tags & gallery

packages/fws-types/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fy-/fws-types",
-    "version": "0.0.4",
+    "version": "0.0.5",
     "description": "Types for FWS - https://fy.to/@G",
     "types": "./src/index.d.ts",
     "scripts": {

packages/fws-types/src/flow.d.ts

@@ -7,6 +7,7 @@ export interface KlbUserFlowField {
     cat?: string;
     label?: string;
     type: string;
+    mask?: string;
     name: string;
     button?: KlbUserFlowButton;
     id?: KlbUUID;

packages/fws-vue/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fy-/fws-vue",
-    "version": "0.0.948",
+    "version": "0.3.57",
     "author": "Florian 'Fy' Gasquez <m@fy.to>",
     "license": "MIT",
     "repository": {
@@ -37,7 +37,8 @@
         "pinia": "2.x.x",
         "timeago.js": "^4.0.x",
         "vue": "^3.3.x",
-        "vue-router": "^4.1.x"
+        "vue-router": "^4.1.x",
+        "flowbite": "^2.3.x"
     },
     "scripts": {
         "clean": "rimraf dist",
@@ -55,6 +56,8 @@
         "@rushstack/eslint-patch": "^1.6.1",
         "@types/node": "^20.10.5",
         "@typescript-eslint/eslint-plugin": "^6.15.0",
+        "@vitejs/plugin-vue": "^4.5.2",
+        "@vitejs/plugin-vue-jsx": "^3.1.0",
         "@vue/compiler-sfc": "^3.3.13",
         "@vue/eslint-config-prettier": "^8.0.0",
         "@vue/runtime-core": "^3.3.13",
@@ -68,6 +71,7 @@
         "mitt": "^3.0.1",
         "pinia": "^2.1.7",
         "postcss": "^8.4.32",
+        "primevue": "^3.51.0",
         "rollup": "^4.9.1",
         "rollup-plugin-copy": "^3.5.0",
         "sass": "^1.69.5",
@@ -77,10 +81,8 @@
         "vue": "^3.3.13",
         "vue-router": "^4.2.5",
         "vue-tsc": "^1.8.26",
-        "@vitejs/plugin-vue": "^4.5.2",
-        "@vitejs/plugin-vue-jsx": "^3.1.0"
-    },
-    "dependencies": {
         "timeago.js": "^4.0.2"
+
     }
+
 }

packages/fws-vue/src/components/fws/UserFlow.vue

@@ -288,13 +288,15 @@ onMounted(async () => {
                   v-if="
                     field.type == 'text' ||
                     field.type == 'password' ||
-                    field.type == 'email'
+                    field.type == 'email' ||
+                    field.type == 'mask'
                   "
                 >
                   <DefaultInput
                     v-if="field.name"
                     :id="field.name"
                     :label="field.label"
+                    :mask="field.mask"
                     class="mt-3"
                     :placeholder="
                       field.name == 'name' ? 'John Doe' : field.label

packages/fws-vue/src/components/ui/DefaultDropdownLink.vue

@@ -29,6 +29,7 @@ const classes = computed(() => `${baseClasses} ${colorClasses.value}`);
     @click.prevent="props.handleClick"
     :class="classes"
     role="menuitem"
+    type="button"
   >
     <slot></slot>
   </button>

packages/fws-vue/src/components/ui/DefaultGallery.vue

@@ -26,18 +26,20 @@ const props = withDefaults(
     onClose?: Function;
     closeIcon?: Object;
     gridHeight?: number;
-    mode: "mason" | "grid" | "button" | "hidden";
+    mode: "mason" | "grid" | "button" | "hidden" | "custom";
     paging?: APIPaging | undefined;
     buttonText?: string;
     buttonType?: string;
     modelValue: number;
     borderColor?: Function;
     imageLoader: string;
-    videoComponent?: Component;
+    videoComponent?: Component | string;
+    imageComponent?: Component | string;
     isVideo?: Function;
   }>(),
   {
     modelValue: 0,
+    imageComponent: "img",
     mode: "grid",
     gridHeight: 4,
     closeIcon: () => h(XCircleIcon),
@@ -232,10 +234,18 @@ onUnmounted(() => {
                       <img
                         class="shadow max-w-full h-auto object-contain max-h-[85vh]"
                         :src="modelValueSrc"
-                        v-if="modelValueSrc"
+                        v-if="modelValueSrc && imageComponent == 'img'"
                         @touchstart="touchStart"
                         @touchend="touchEnd"
                       />
+                      <component
+                        v-else-if="modelValueSrc && imageComponent"
+                        :is="imageComponent"
+                        :image="modelValueSrc.image"
+                        :variant="modelValueSrc.variant"
+                        :alt="modelValueSrc.alt"
+                        class="shadow max-w-full h-auto object-contain max-h-[85vh]"
+                      />
                     </template>
                   </div>
                   <div class="flex-0 py-2 flex items-center justify-center">
@@ -299,6 +309,16 @@ onUnmounted(() => {
                       images[i - 1],
                     )}`"
                     :src="getThumbnailUrl(images[i - 1])"
+                    v-if="imageComponent == 'img'"
+                  />
+                  <component
+                    v-else
+                    @click="$eventBus.emit(`${id}GalleryImage`, i - 1)"
+                    :is="imageComponent"
+                    :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"
                   />
                 </div>
               </div>
@@ -307,12 +327,14 @@ onUnmounted(() => {
         </DialogPanel>
       </Dialog>
     </TransitionRoot>
-    <template v-if="mode == 'grid' || mode == 'mason'">
+    <template v-if="mode == 'grid' || mode == 'mason' || mode == 'custom'">
       <div
-        class="grid grid-cols-2 md:grid-cols-4 xl:grid-cols-6 gap-4"
         :class="{
-          'items-start': mode == 'mason',
-          'items-center': mode == 'grid',
+          'grid grid-cols-2 md:grid-cols-4 xl:grid-cols-6 gap-4 items-start':
+            mode == 'mason',
+          'grid grid-cols-2 md:grid-cols-4 xl:grid-cols-6 gap-4 items-center':
+            mode == 'grid',
+          'custom-grid': mode == 'custom',
         }"
       >
         <template v-for="i in images.length" :key="`g_${id}_${i}`">
@@ -326,9 +348,18 @@ onUnmounted(() => {
                   <img
                     @click="$eventBus.emit(`${id}GalleryImage`, i + j - 2)"
                     class="h-auto max-w-full rounded-lg cursor-pointer"
-                    v-if="i + j - 2 < images.length"
+                    v-if="i + j - 2 < images.length && imageComponent == 'img'"
                     :src="getThumbnailUrl(images[i + j - 2])"
                   />
+                  <component
+                    v-else-if="i + j - 2 < images.length"
+                    :is="imageComponent"
+                    :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"
+                    @click="$eventBus.emit(`${id}GalleryImage`, i + j - 2)"
+                  />
                 </div>
               </template>
             </div>
@@ -338,6 +369,16 @@ onUnmounted(() => {
               @click="$eventBus.emit(`${id}GalleryImage`, i - 1)"
               class="h-auto max-w-full rounded-lg cursor-pointer"
               :src="getThumbnailUrl(images[i - 1])"
+              v-if="imageComponent == 'img'"
+            />
+            <component
+              v-else-if="imageComponent"
+              :is="imageComponent"
+              :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"
+              @click="$eventBus.emit(`${id}GalleryImage`, i - 1)"
             />
           </div>
         </template>