v-uixy 1.3.0 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "v-uixy",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "private": false,
   "author": {
     "name": "Alan Haber",

package/templates/assets/css/main.css

@@ -156,6 +156,10 @@
     @apply bg-transparent;
   }
 
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+
   .slider::-webkit-slider-thumb {
     @apply relative z-10 h-5 w-5 cursor-pointer appearance-none rounded-full border-2 border-solid border-black bg-gray-100 dark:border-gray-100 dark:bg-black;
   }
@@ -164,6 +168,10 @@
     @apply cursor-default border-gray-500 dark:border-gray-500;
   }
 
+  .slider-color-picker::-webkit-slider-thumb {
+    @apply relative z-10 size-4.5 cursor-pointer appearance-none rounded-full border-2 border-solid border-gray-900 bg-gray-100;
+  }
+
   .disable-transitions * {
     transition: none !important;
   }

package/templates/components/Avatar/Avatar.component.vue

@@ -47,7 +47,11 @@
     show.value = false;
   };
 
-  onMounted(() => {
-    show.value = !!props.src;
-  });
+  watch(
+    () => props.src,
+    (src) => {
+      show.value = !!src;
+    },
+    { immediate: true },
+  );
 </script>

package/templates/components/Avatar/Avatar.styles.ts

@@ -8,11 +8,11 @@ export const avatarWrapperStyles = styles(
       squared: "rounded-2",
       default: "",
     },
-  }
+  },
 );
 
 export const avatarImageStyles = styles(
-  "flex aspect-square items-center overflow-hidden text-center text-[0]",
+  "flex aspect-square object-cover items-center overflow-hidden text-center text-[0]",
   {
     show: {
       true: "",
@@ -23,5 +23,5 @@ export const avatarImageStyles = styles(
       squared: "rounded-2",
       default: "",
     },
-  }
+  },
 );

package/templates/components/Badge/Badge.styles.ts

@@ -5,9 +5,9 @@ export const badgeStyles = styles(
   {
     variant: {
       primary:
-        "bg-gray-800 hover:bg-gray-700 dark:hover:bg-gray-200 dark:bg-gray-300 text-gray-100 dark:text-black dark:disabled:bg-gray-400 dark:disabled:text-gray-500 disabled:text-gray-600",
+        "bg-gray-800 hover:bg-gray-700 border border-transparent dark:hover:bg-gray-200 dark:bg-gray-300 text-gray-100 dark:text-black dark:disabled:bg-gray-400 dark:disabled:text-gray-500 disabled:text-gray-600",
       secondary:
-        "bg-gray-300 hover:bg-gray-200 dark:bg-gray-900 dark:hover:bg-gray-700 dark:text-gray-100 text-black dark:disabled:bg-gray-600 dark:disabled:text-gray-700 disabled:text-gray-500",
+        "bg-gray-300 hover:bg-gray-200 border border-transparent dark:bg-gray-900 dark:hover:bg-gray-700 dark:text-gray-100 text-black dark:disabled:bg-gray-600 dark:disabled:text-gray-700 disabled:text-gray-500",
       tertiary:
         "bg-transparent border border-solid border-gray-300 dark:border-gray-800 hover:bg-gray-200 dark:hover:bg-gray-800 text-black dark:text-gray-100 dark:disabled:border-gray-900 dark:disabled:text-gray-500 dark:disabled:bg-gray-800 disabled:bg-gray-300 disabled:text-gray-500 disabled:border-gray-400",
     },

package/templates/components/Button/Button.styles.ts

@@ -1,7 +1,7 @@
 import styles from "~/utils/styles";
 
 export const buttonStyles = styles(
-  "relative cursor-pointer h-8 font-500 transition-all duration-200 ease-in-out hover:shadow-xs flex items-center justify-center gap-2 disabled:pointer-events-none",
+  "relative cursor-pointer h-8 font-500 transition-all duration-200 ease-in-out hover:shadow-xs flex items-center justify-center gap-2 disabled:pointer-events-none border border-transparent",
   {
     variant: {
       primary:
@@ -9,7 +9,7 @@ export const buttonStyles = styles(
       secondary:
         "bg-gray-300 hover:bg-gray-200 dark:bg-gray-900 dark:hover:bg-gray-700 dark:text-gray-100 text-black dark:disabled:bg-gray-600 dark:disabled:text-gray-700 disabled:text-gray-500",
       tertiary:
-        "bg-transparent border border-solid border-gray-300 dark:border-gray-800 hover:bg-gray-200 dark:hover:bg-gray-800 text-black dark:text-gray-100 dark:disabled:border-gray-900 dark:disabled:text-gray-500 dark:disabled:bg-gray-800 disabled:bg-gray-300 disabled:text-gray-500 disabled:border-gray-400",
+        "bg-transparent border-solid border-gray-300 dark:border-gray-800 hover:bg-gray-200 dark:hover:bg-gray-800 text-black dark:text-gray-100 dark:disabled:border-gray-900 dark:disabled:text-gray-500 dark:disabled:bg-gray-800 disabled:bg-gray-300 disabled:text-gray-500 disabled:border-gray-400",
       quaternary:
         "dark:hover:text-gray-100 hover:bg-gray-200 dark:hover:bg-gray-800 disabled:text-gray-700",
     },
@@ -22,7 +22,7 @@ export const buttonStyles = styles(
       true: "rounded-full",
       false: "rounded-1",
     },
-  }
+  },
 );
 
 export const iconStyles = styles("h-5 w-5 shrink-0", {

package/templates/components/Calendar/Calendar.component.vue

@@ -7,7 +7,7 @@
         size="sm"
         variant="tertiary"
       />
-      <p class="w-[160px] text-center text-sm font-500">
+      <p class="w-40 text-center text-sm font-500">
         {{ MONTHS[selectedMonth] }} {{ selectedYear }}
       </p>
       <uixy-icon-button
@@ -22,7 +22,7 @@
       class="grid w-full grid-cols-7 text-xs text-gray-400 dark:text-gray-700"
     >
       <div v-for="day in adjustedDays" :key="day" class="py-2 text-center">
-        {{ day.slice(0, 2) }}
+        {{ day?.slice(0, 2) }}
       </div>
     </div>
 
@@ -36,9 +36,18 @@
             selected: model?.toDateString?.() === day.date.toDateString(),
             disabled:
               !!props.disabled || day.fromPreviousMonth || day.fromNextMonth,
+            greyedOut:
+              !!day.fromCurrentMonth &&
+              !!props.isDateDisabled &&
+              props.isDateDisabled(day.date),
+            today: today.toDateString() === day.date.toDateString(),
           })
         "
-        :disabled="day.fromPreviousMonth || day.fromNextMonth"
+        :disabled="
+          day.fromPreviousMonth ||
+          day.fromNextMonth ||
+          (!!props.isDateDisabled && props.isDateDisabled(day.date))
+        "
         @click="handleDayClick(day.date)"
       >
         {{ day.day }}
@@ -82,11 +91,13 @@
     "Saturday",
   ];
 
+  const today = new Date();
+
   const selectedYear = ref(props.year ?? new Date().getFullYear());
   const selectedMonth = ref(props.month ?? new Date().getMonth());
 
   const adjustedDays = computed(() =>
-    props.startOfWeek === "Monday" ? [...DAYS.slice(1), DAYS[0]] : DAYS
+    props.startOfWeek === "Monday" ? [...DAYS.slice(1), DAYS[0]] : DAYS,
   );
 
   const getDaysInMonth = (year: number, month: number) =>
@@ -101,11 +112,11 @@
   });
 
   const daysInCurrentMonth = computed(() =>
-    getDaysInMonth(selectedYear.value, selectedMonth.value)
+    getDaysInMonth(selectedYear.value, selectedMonth.value),
   );
 
   const daysInPreviousMonth = computed(() =>
-    getDaysInMonth(selectedYear.value, selectedMonth.value - 1)
+    getDaysInMonth(selectedYear.value, selectedMonth.value - 1),
   );
 
   const prevMonthDaysToShow = computed(() =>
@@ -114,11 +125,11 @@
       date: new Date(
         selectedYear.value,
         selectedMonth.value - 1,
-        daysInPreviousMonth.value - i
+        daysInPreviousMonth.value - i,
       ),
       dayOfWeek: (firstDayOfMonth.value - 1 - i + 7) % 7,
       fromPreviousMonth: true,
-    })).reverse()
+    })).reverse(),
   );
 
   const currentMonthDaysToShow = computed(() =>
@@ -128,18 +139,18 @@
       dayOfWeek: new Date(
         selectedYear.value,
         selectedMonth.value,
-        i + 1
+        i + 1,
       ).getDay(),
       fromCurrentMonth: true,
-    }))
+    })),
   );
 
   const lastDayOfMonth = computed(() =>
     new Date(
       selectedYear.value,
       selectedMonth.value,
-      daysInCurrentMonth.value
-    ).getDay()
+      daysInCurrentMonth.value,
+    ).getDay(),
   );
 
   const nextMonthDaysToShow = computed(() => {
@@ -190,8 +201,8 @@
   }
 
   function handleDayClick(date: Date) {
-    if (!props.disabled) {
-      model.value = date;
-    }
+    if (props.disabled) return;
+    if (props.isDateDisabled?.(date)) return;
+    model.value = date;
   }
 </script>

package/templates/components/Calendar/Calendar.styles.ts

@@ -1,7 +1,7 @@
 import styles from "~/utils/styles";
 
 export const calendarStyles = styles(
-  "flex w-fit flex-col items-center rounded-2 border border-gray-300 bg-gray-100 p-3 shadow-xs dark:border-gray-900 dark:bg-black"
+  "flex w-fit flex-col items-center rounded-2 border border-gray-300 bg-gray-100 p-3 shadow-xs dark:border-gray-900 dark:bg-black",
 );
 
 export const calendarDayStyles = styles(
@@ -9,7 +9,7 @@ export const calendarDayStyles = styles(
   {
     currentMonth: {
       true: "dark:text-gray-300",
-      false: "text-gray-500 dark:text-gray-600",
+      false: "text-gray-400 dark:text-gray-600",
     },
     selected: {
       true: "bg-black text-white hover:bg-black dark:bg-white dark:!text-black dark:hover:bg-white",
@@ -19,5 +19,13 @@ export const calendarDayStyles = styles(
       true: "cursor-default pointer-events-none",
       false: "cursor-pointer",
     },
-  }
+    greyedOut: {
+      true: "opacity-35 cursor-not-allowed pointer-events-none",
+      false: "",
+    },
+    today: {
+      true: "ring-1 ring-gray-400 dark:ring-gray-600",
+      false: "",
+    },
+  },
 );

package/templates/components/Calendar/Calendar.types.ts

@@ -3,4 +3,5 @@ export interface UixyCalendarProps {
   month?: number;
   startOfWeek?: "Sunday" | "Monday";
   disabled?: boolean;
+  isDateDisabled?: (date: Date) => boolean;
 }

package/templates/components/ColorPicker/ColorPicker.component.vue

@@ -0,0 +1,287 @@
+<template>
+  <uixy-card class="p-2 flex flex-col gap-4">
+    <div
+      ref="svRef"
+      class="relative cursor-crosshair overflow-hidden rounded-1 min-w-64 h-48"
+      :style="svBackgroundStyle"
+      @mousedown="onSvMouseDown"
+      @touchstart.prevent="onSvTouchStart"
+    >
+      <div
+        class="pointer-events-none absolute -mt-2 -ml-2 size-4 rounded-full border-2 shadow-sm transition-colors border-white"
+        :style="svHandleStyle"
+      />
+    </div>
+    <div class="flex flex-col gap-4">
+      <input
+        type="range"
+        min="0"
+        max="360"
+        step="1"
+        v-model.number="hue"
+        :disabled="props.disabled"
+        class="h-2.5 w-full appearance-none rounded-full outline-none slider-color-picker border border-gray-300 dark:border-gray-900"
+        :style="hueSliderStyle"
+      />
+      <input
+        type="range"
+        min="0"
+        max="100"
+        step="1"
+        v-model.number="alpha"
+        :disabled="props.disabled"
+        class="h-2.5 w-full appearance-none rounded-full outline-none slider-color-picker border border-gray-300 dark:border-gray-900"
+        :style="alphaSliderStyle"
+      />
+    </div>
+    <div class="flex gap-2 items-center mt-2 justify-between">
+      <uixy-card class="p-1">
+        <div
+          class="w-12 h-4 rounded-1 shadow-sm"
+          :style="{ backgroundColor: model }"
+        ></div>
+      </uixy-card>
+      <p class="text-xs font-500">{{ model }}</p>
+    </div>
+  </uixy-card>
+</template>
+
+<script setup lang="ts">
+  import type { UixyColorPickerProps } from "./ColorPicker.types";
+  import { UixyCard } from "../Card";
+
+  const props = defineProps<UixyColorPickerProps>();
+
+  const model = defineModel<string>({ default: "#ff0000" });
+
+  const hue = ref(0);
+  const sat = ref(100);
+  const val = ref(100);
+  const alpha = ref(100);
+
+  const clamp = (n: number, min: number, max: number) =>
+    Math.min(max, Math.max(min, n));
+
+  const componentToHex = (c: number) => c.toString(16).padStart(2, "0");
+
+  const rgbToHex = (r: number, g: number, b: number) =>
+    `#${componentToHex(r)}${componentToHex(g)}${componentToHex(b)}`;
+
+  const rgbToHex8 = (r: number, g: number, b: number, a: number) =>
+    `#${componentToHex(r)}${componentToHex(g)}${componentToHex(
+      b,
+    )}${componentToHex(clamp(a, 0, 255))}`;
+
+  const hexToRgbA = (
+    hex?: string,
+  ): {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+    hasAlpha: boolean;
+  } | null => {
+    if (!hex) return null;
+    const cleaned = hex.trim().replace(/^#/, "");
+    if (cleaned.length === 6) {
+      const r = parseInt(cleaned.slice(0, 2), 16);
+      const g = parseInt(cleaned.slice(2, 4), 16);
+      const b = parseInt(cleaned.slice(4, 6), 16);
+      return { r, g, b, a: 255, hasAlpha: false } as const;
+    }
+    if (cleaned.length === 8) {
+      const r = parseInt(cleaned.slice(0, 2), 16);
+      const g = parseInt(cleaned.slice(2, 4), 16);
+      const b = parseInt(cleaned.slice(4, 6), 16);
+      const a = parseInt(cleaned.slice(6, 8), 16);
+      return { r, g, b, a, hasAlpha: true } as const;
+    }
+    return null;
+  };
+
+  const hsvToRgb = (h: number, s: number, v: number) => {
+    const c = v * s;
+    const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
+    const m = v - c;
+
+    let r1 = 0,
+      g1 = 0,
+      b1 = 0;
+
+    if (h >= 0 && h < 60) {
+      r1 = c;
+      g1 = x;
+      b1 = 0;
+    } else if (h < 120) {
+      r1 = x;
+      g1 = c;
+      b1 = 0;
+    } else if (h < 180) {
+      r1 = 0;
+      g1 = c;
+      b1 = x;
+    } else if (h < 240) {
+      r1 = 0;
+      g1 = x;
+      b1 = c;
+    } else if (h < 300) {
+      r1 = x;
+      g1 = 0;
+      b1 = c;
+    } else {
+      r1 = c;
+      g1 = 0;
+      b1 = x;
+    }
+    return {
+      r: Math.round((r1 + m) * 255),
+      g: Math.round((g1 + m) * 255),
+      b: Math.round((b1 + m) * 255),
+    };
+  };
+
+  const rgbToHsv = (r: number, g: number, b: number) => {
+    r /= 255;
+    g /= 255;
+    b /= 255;
+    const max = Math.max(r, g, b),
+      min = Math.min(r, g, b);
+    const d = max - min;
+    let h = 0;
+    if (d === 0) h = 0;
+    else if (max === r) h = ((g - b) / d) % 6;
+    else if (max === g) h = (b - r) / d + 2;
+    else h = (r - g) / d + 4;
+    h = Math.round(h * 60);
+    if (h < 0) h += 360;
+    const s = max === 0 ? 0 : d / max;
+    const v = max;
+    return { h, s, v };
+  };
+
+  const svRef = ref<HTMLElement | null>(null);
+
+  const rgb = computed(() =>
+    hsvToRgb(hue.value, sat.value / 100, val.value / 100),
+  );
+
+  const updatingFromModel = ref(false);
+
+  watch([hue, sat, val, alpha], () => {
+    if (updatingFromModel.value) return;
+    const a = Math.round((alpha.value / 100) * 255);
+    if (a === 255) {
+      model.value = rgbToHex(rgb.value.r, rgb.value.g, rgb.value.b);
+    } else {
+      model.value = rgbToHex8(rgb.value.r, rgb.value.g, rgb.value.b, a);
+    }
+  });
+
+  const applyModel = (value?: string) => {
+    const parsed = hexToRgbA(value ?? model.value ?? "#ff0000");
+    if (!parsed) return;
+    const hsv = rgbToHsv(parsed.r, parsed.g, parsed.b);
+    updatingFromModel.value = true;
+    hue.value = hsv.h;
+    sat.value = Math.round(hsv.s * 100);
+    val.value = Math.round(hsv.v * 100);
+    alpha.value = clamp(Math.round((parsed.a / 255) * 100), 0, 100);
+
+    let normalized: string;
+    if (!parsed.hasAlpha || parsed.a === 255) {
+      normalized = rgbToHex(parsed.r, parsed.g, parsed.b);
+    } else {
+      normalized = rgbToHex8(parsed.r, parsed.g, parsed.b, parsed.a);
+    }
+    if (model.value !== normalized) model.value = normalized;
+    updatingFromModel.value = false;
+  };
+
+  onMounted(() => applyModel());
+  watch(model, (v) => applyModel(v));
+
+  const svBackgroundStyle = computed(() => ({
+    background: `linear-gradient(to top, black, transparent), linear-gradient(to right, white, hsl(${hue.value}, 100%, 50%))`,
+  }));
+
+  const svHandleStyle = computed(() => ({
+    left: `${sat.value}%`,
+    top: `${100 - val.value}%`,
+  }));
+
+  const hueSliderStyle = computed(() => ({
+    background:
+      "linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)",
+  }));
+
+  const alphaSliderStyle = computed(() => {
+    const { r, g, b } = rgb.value;
+    return {
+      background: `linear-gradient(to right, rgba(${r}, ${g}, ${b}, 0), rgba(${r}, ${g}, ${b}, 1))`,
+    } as Record<string, string>;
+  });
+
+  const updateSvFromEvent = (e: MouseEvent) => {
+    if (!svRef.value) return;
+    const rect = svRef.value.getBoundingClientRect();
+    const x = clamp(((e.clientX - rect.left) / rect.width) * 100, 0, 100);
+    const y = clamp(((e.clientY - rect.top) / rect.height) * 100, 0, 100);
+    sat.value = Math.round(x);
+    val.value = Math.round(100 - y);
+  };
+
+  const updateSvFromTouch = (e: TouchEvent) => {
+    if (!svRef.value) return;
+    const t = e.touches?.[0] ?? e.changedTouches?.[0];
+    if (!t) return;
+    const rect = svRef.value.getBoundingClientRect();
+    const x = clamp(((t.clientX - rect.left) / rect.width) * 100, 0, 100);
+    const y = clamp(((t.clientY - rect.top) / rect.height) * 100, 0, 100);
+    sat.value = Math.round(x);
+    val.value = Math.round(100 - y);
+  };
+
+  let dragging = false;
+
+  const onSvMouseDown = (e: MouseEvent) => {
+    if (props.disabled) return;
+
+    dragging = true;
+
+    updateSvFromEvent(e);
+
+    window.addEventListener("mousemove", onMouseMove);
+    window.addEventListener("mouseup", onMouseUp);
+  };
+
+  const onMouseMove = (e: MouseEvent) => {
+    if (!dragging) return;
+
+    updateSvFromEvent(e);
+  };
+
+  const onMouseUp = () => {
+    dragging = false;
+
+    window.removeEventListener("mousemove", onMouseMove);
+    window.removeEventListener("mouseup", onMouseUp);
+  };
+
+  const onSvTouchStart = (e: TouchEvent) => {
+    if (props.disabled) return;
+
+    updateSvFromTouch(e);
+
+    window.addEventListener("touchmove", onTouchMove, { passive: false });
+    window.addEventListener("touchend", onTouchEnd);
+  };
+
+  const onTouchMove = (e: TouchEvent) => {
+    updateSvFromTouch(e);
+  };
+
+  const onTouchEnd = () => {
+    window.removeEventListener("touchmove", onTouchMove);
+    window.removeEventListener("touchend", onTouchEnd);
+  };
+</script>

package/templates/components/ColorPicker/ColorPicker.types.ts

@@ -0,0 +1,3 @@
+export interface UixyColorPickerProps {
+  disabled?: boolean;
+}

package/templates/components/ColorPicker/index.ts

@@ -0,0 +1,4 @@
+import UixyColorPicker from "./ColorPicker.component.vue";
+import type { UixyColorPickerProps } from "./ColorPicker.types";
+
+export { UixyColorPicker, type UixyColorPickerProps };

package/templates/components/Command/Command.component.vue

@@ -1,5 +1,5 @@
 <template>
-  <uixy-modal v-model="open">
+  <uixy-modal v-model="open" :persistent="props.persistent">
     <uixy-card :class="commandStyles($attrs.class as string)">
       <div class="flex items-center gap-2 p-3">
         <label :for="id">
@@ -22,7 +22,7 @@
         />
       </div>
       <uixy-separator variant="horizontal" />
-      <div class="scrollbar max-h-[320px] overflow-y-auto">
+      <div class="scrollbar max-h-80 overflow-y-auto">
         <template v-for="option in filteredOptions" :key="option.label">
           <template v-if="option.items.length > 0">
             <ul class="flex flex-col gap-2 p-2">
@@ -79,13 +79,13 @@
     props.options.map((option) => ({
       label: option.label,
       items: option.items.filter((item) =>
-        item.label.toLowerCase().includes(input.value?.toLowerCase() ?? "")
+        item.label.toLowerCase().includes(input.value?.toLowerCase() ?? ""),
       ),
-    }))
+    })),
   );
 
   const isEmpty = computed(() =>
-    filteredOptions.value.every((option) => option.items.length === 0)
+    filteredOptions.value.every((option) => option.items.length === 0),
   );
 
   const handleClose = () => {
@@ -93,7 +93,7 @@
   };
 
   const placeholder = computed(
-    () => props.placeholder || "Search or type a command..."
+    () => props.placeholder || "Search or type a command...",
   );
 
   const emptyText = computed(() => props.emptyText || "No results found.");

package/templates/components/Command/Command.types.ts

@@ -16,4 +16,5 @@ export interface UixyCommandProps {
   options: UixyCommandItems[];
   placeholder?: string;
   emptyText?: string;
+  persistent?: boolean;
 }

package/templates/components/Input/Input.component.vue

@@ -2,12 +2,12 @@
   <div class="flex flex-col gap-1">
     <div class="relative flex flex-col-reverse gap-1">
       <input
+        ref="inputRef"
         v-model="model"
         :type="props.type ?? 'text'"
         :id
         :disabled="props.disabled"
         :placeholder="props.placeholder"
-        :auto-focus="props.autoFocus"
         :class="inputStyles({ status, icon }, $attrs.class as string)"
         v-bind="filteredAttrs"
       />
@@ -70,6 +70,8 @@
     return rest;
   });
 
+  const inputRef = ref<HTMLInputElement>();
+
   const model = defineModel<string>();
 
   const instance = getCurrentInstance();
@@ -79,7 +81,7 @@
   const hasIconClickEmit = computed(() => !!instance?.vnode.props?.onIconClick);
 
   const status = computed(() =>
-    props.disabled ? "disabled" : props.status ?? "default"
+    props.disabled ? "disabled" : (props.status ?? "default"),
   );
 
   const text = computed(
@@ -89,10 +91,18 @@
         default: props.helperText,
         disabled: "",
         valid: "",
-      }[props.status ?? "default"])
+      })[props.status ?? "default"],
   );
 
   const icon = computed(() =>
-    props.icon ? props.iconPositon ?? "right" : "none"
+    props.icon ? (props.iconPositon ?? "right") : "none",
   );
+
+  onMounted(() => {
+    if (props.autoFocus) {
+      nextTick(() => inputRef.value?.focus({ preventScroll: true }));
+    }
+  });
+
+  defineExpose({ focus: () => inputRef.value?.focus({ preventScroll: true }) });
 </script>