@quoreadmin/ui 1.7.19 → 1.8.0

package/dist/index169.js

@@ -1,152 +1,282 @@
-const r = {
-  input: {
-    class: "hidden"
-  },
-  buttonbar: {
+const i = {
+  content: ({ parent: o, props: t }) => ({
     class: [
-      // Flexbox
       "flex",
-      "flex-wrap",
-      // Colors
-      "bg-surface-50",
-      "dark:bg-surface-800",
-      "text-surface-700",
-      "dark:text-white/80",
-      // Spacing
-      "p-5",
-      "gap-2",
-      // Borders
-      "border",
-      "border-solid",
-      "border-surface-200",
-      "dark:border-surface-700",
-      "border-b-0",
-      // Shape
-      "rounded-tr-lg",
-      "rounded-tl-lg"
+      {
+        "flex-col": t.fullScreen
+      },
+      {
+        "flex-col": o.props.thumbnailsPosition === "top" || o.props.thumbnailsPosition === "bottom",
+        "flex-row": o.props.thumbnailsPosition === "right" || o.props.thumbnailsPosition === "left"
+      }
+    ]
+  }),
+  // Contains main photo & previous/next button container "itemcontainer" below
+  itemwrapper: ({ parent: o, props: t }) => ({
+    class: [
+      "group",
+      "flex relative",
+      "mt-14 md:mt-20 min-h-[74vh]",
+      {
+        "grow shrink w-0 justify-center": t.fullScreen
+      },
+      {
+        "flex-col": o.props.indicatorsPosition === "bottom" || o.props.indicatorsPosition === "top",
+        "flex-row items-center": o.props.indicatorsPosition === "left" || o.props.indicatorsPosition === "right"
+      },
+      {
+        "order-2": o.props.thumbnailsPosition === "top" || o.props.thumbnailsPosition === "left",
+        "flex-row": o.props.thumbnailsPosition === "right"
+      }
+    ]
+  }),
+  // Contains main photo & previous/next buttons
+  itemcontainer: ({ parent: o }) => ({
+    class: [
+      "flex w-full md:w-screen h-full relative grow items-center",
+      {
+        "order-1": o.props.indicatorsPosition === "bottom" || o.props.indicatorsPosition === "right",
+        "order-2": o.props.indicatorsPosition === "top" || o.props.indicatorsPosition === "left"
+      }
+    ]
+  }),
+  // Div that contains main img element
+  item: {
+    class: [
+      // Flex
+      "flex justify-center items-center",
+      // Sizing
+      "h-full w-full",
+      "rounded-lg overflow-auto",
+      // Misc
+      "md:max-w-[592px] mx-auto"
     ]
   },
-  chooseButton: {
+  // Contains div that contains thumbnail container "thumbnailcontainer"
+  thumbnailwrapper: ({ parent: o }) => ({
+    class: [
+      // Flex
+      "flex flex-col shrink-0",
+      {
+        "order-1": o.props.thumbnailsPosition === "top" || o.props.thumbnailsPosition === "left"
+      },
+      // Misc
+      "overflow-auto"
+    ]
+  }),
+  thumbnailcontainer: ({ parent: o }) => ({
     class: [
-      "relative",
-      // Alignments
-      "items-center inline-flex text-center align-bottom justify-center",
+      // Flex
+      "flex",
       // Spacing
-      "px-4 py-3",
-      // Shape
-      "rounded-md",
-      // Font
-      "leading-[normal]",
-      "font-bold",
+      "p-4",
       // Colors
-      "text-white dark:text-surface-900",
-      "bg-primary-500 dark:bg-primary-400",
-      "border-primary-500 dark:border-primary-400",
-      // States
-      "hover:bg-primary-600 dark:hover:bg-primary-300",
-      // Misc
-      "overflow-hidden",
-      "cursor-pointer"
+      "bg-transparent",
+      "md:max-w-[592px] mx-auto",
+      {
+        "flex-row": o.props.thumbnailsPosition === "top" || o.props.thumbnailsPosition === "bottom",
+        "flex-col grow": o.props.thumbnailsPosition === "right" || o.props.thumbnailsPosition === "left"
+      }
+    ]
+  }),
+  // Container for the previous thumbnail button
+  previousthumbnailbutton: {
+    class: [
+      // Positioning
+      "self-center relative",
+      // Display & Flexbox
+      "flex shrink-0 justify-center items-center overflow-hidden",
+      // Spacing
+      "m-2 ml-0",
+      // Appearance
+      "bg-transparent text-white w-8 h-8 rounded-full transition duration-200 ease-in-out",
+      // Hover Effects
+      "hover:bg-surface-0/10 hover:text-white",
+      // Focus Effects
+      "focus:outline-none focus:outline-offset-0"
     ]
   },
-  chooseIcon: {
-    class: ["mr-2", "inline-block"]
-  },
-  chooseButtonLabel: {
-    class: ["flex-1", "font-bold"]
-  },
-  uploadbutton: {
-    icon: {
-      class: "mr-2"
-    }
-  },
-  cancelbutton: {
-    icon: {
-      class: "mr-2"
-    }
+  // The container for just the thumbnails (not including the previous/next buttons) - contains another div "thumbnailitems"
+  thumbnailitemscontainer: {
+    class: "overflow-hidden w-full md:w-[30rem]"
   },
-  content: {
+  // The div that contains just the thumbnails
+  thumbnailitems: ({ parent: o }) => ({
     class: [
-      // Position
-      "relative",
-      // Colors
-      "bg-surface-0",
-      "dark:bg-surface-900",
-      "text-surface-700",
-      "dark:text-white/80",
+      "flex",
+      {
+        "flex-col h-full": o.props.thumbnailsPosition === "right" || o.props.thumbnailsPosition === "left"
+      }
+    ]
+  }),
+  thumbnailitem: ({ parent: o }) => ({
+    class: [
+      // Flexbox
+      "flex items-center justify-center",
+      "grow shrink-0",
+      {
+        "w-full md:w-[25%]": o.props.thumbnailsPosition === "top" || o.props.thumbnailsPosition === "bottom"
+      },
+      // Misc
+      "overflow-auto",
+      "cursor-pointer",
+      // 'opacity-50',
+      // States
+      "hover:opacity-100",
+      "hover:transition-opacity",
+      "hover:duration-300"
+    ]
+  }),
+  nextthumbnailbutton: {
+    class: [
+      // Positioning
+      "self-center relative",
+      // Display & Flexbox
+      "flex shrink-0 justify-center items-center overflow-hidden",
       // Spacing
-      "p-8",
-      // Borders
-      "border",
-      "border-surface-200",
-      "dark:border-surface-700",
-      // Shape
-      "rounded-b-lg"
+      "m-2 mr-0",
+      // Appearance
+      "bg-transparent text-white w-8 h-8 rounded-full transition duration-200 ease-in-out",
+      // Hover Effects
+      "hover:bg-surface-0/10 hover:text-white",
+      // Focus Effects
+      "focus:outline-none focus:outline-offset-0"
     ]
   },
-  file: {
+  indicators: ({ parent: o }) => ({
     class: [
-      // Flexbox
-      "flex",
-      "items-center",
-      "flex-wrap",
+      // flex
+      "flex items-center justify-center",
       // Spacing
       "p-4",
-      "mb-2",
-      "last:mb-0",
-      // Borders
-      "border",
-      "border-surface-200",
-      "dark:border-surface-700",
-      "gap-2",
-      // Shape
-      "rounded"
+      // Indicators Position
+      {
+        "order-2": o.props.indicatorsPosition == "bottom",
+        "order-1": o.props.indicatorsPosition == "top",
+        "order-1 flex-col": o.props.indicatorsPosition == "left",
+        "flex-col order-2": o.props.indicatorsPosition == "right"
+      },
+      {
+        "absolute z-10 bg-black/50": o.props.showIndicatorsOnItem
+      },
+      {
+        "bottom-0 left-0 w-full items-start": o.props.indicatorsPosition == "bottom" && o.props.showIndicatorsOnItem,
+        "top-0 left-0 w-full items-start": o.props.indicatorsPosition == "top" && o.props.showIndicatorsOnItem,
+        "left-0 top-0 h-full items-start": o.props.indicatorsPosition == "left" && o.props.showIndicatorsOnItem,
+        "right-0 top-0 h-full items-start": o.props.indicatorsPosition == "right" && o.props.showIndicatorsOnItem
+      }
+    ]
+  }),
+  indicator: ({ parent: o }) => ({
+    class: [
+      {
+        "mr-2": o.props.indicatorsPosition == "bottom" || o.props.indicatorsPosition == "top",
+        "mb-2": o.props.indicatorsPosition == "left" || o.props.indicatorsPosition == "right"
+      }
+    ]
+  }),
+  indicatorbutton: ({ context: o }) => ({
+    class: [
+      // Size
+      "w-2 h-2",
+      // Appearance
+      "rounded-full transition duration-200",
+      // Focus Effects
+      "focus:outline-none focus:outline-offset-0",
+      // Conditional Appearance: Not Highlighted
+      {
+        "bg-inkwell-30 hover:bg-surface-300 dark:bg-surface-700 dark:hover:bg-surface-600": !o.highlighted
+      },
+      // Conditional Appearance: Highlighted
+      { "bg-white hover:bg-primary-600": o.highlighted }
+    ]
+  }),
+  mask: {
+    class: [
+      "fixed top-0 left-0 w-full h-full",
+      "flex items-center justify-center",
+      "bg-inkwell-40/95",
+      "image-overlay"
     ]
   },
-  thumbnail: {
-    class: "shrink-0"
-  },
-  fileName: {
-    class: "mb-2"
+  closebutton: {
+    class: [
+      // Positioning
+      "!absolute top-0 right-0 z-[1001]",
+      // Display & Flexbox
+      "flex justify-center items-center overflow-hidden",
+      // Spacing
+      "m-2",
+      // Appearance
+      "text-white bg-transparent w-12 h-12 rounded-full transition duration-200 ease-in-out",
+      // Focus Effects
+      "focus:outline-none"
+    ]
   },
-  fileSize: {
-    class: "mr-2"
+  closeicon: {
+    class: "w-6 h-6"
   },
-  uploadicon: {
-    class: "mr-2"
+  previousitembutton: ({ parent: o }) => ({
+    class: [
+      // Display & Flexbox
+      "inline-flex justify-center items-center overflow-hidden",
+      // Appearance
+      "bg-transparent text-white w-16 h-16 transition duration-200 ease-in-out rounded-md",
+      {
+        "opacity-0 group-hover:opacity-100": o.props.showItemNavigatorsOnHover
+      },
+      // Spacing
+      "mx-2",
+      // Positioning
+      "top-1/2 mt-[-0.5rem] left-0",
+      {
+        "!absolute": o.props.showItemNavigators,
+        "!fixed": !o.props.showItemNavigators
+      },
+      // Hover Effect
+      "hover:bg-surface-0/10 hover:text-white",
+      // Focus Effects
+      "focus:outline-none focus:outline-offset-0"
+    ]
+  }),
+  nextitembutton: ({ parent: o }) => ({
+    class: [
+      // Display & Flexbox
+      "inline-flex justify-center items-center overflow-hidden",
+      // Appearance
+      "bg-transparent text-white w-16 h-16 transition duration-200 ease-in-out rounded-md",
+      {
+        "opacity-0 group-hover:opacity-100": o.props.showItemNavigatorsOnHover
+      },
+      // Spacing
+      "mx-2",
+      // Positioning
+      "top-1/2 mt-[-0.5rem] right-0",
+      {
+        "!absolute": o.props.showItemNavigators,
+        "!fixed": !o.props.showItemNavigators
+      },
+      // Hover Effect
+      "hover:bg-surface-0/10 hover:text-white",
+      // Focus Effects
+      "focus:outline-none focus:outline-offset-0"
+    ]
+  }),
+  caption: {
+    class: [
+      // Positioning
+      "absolute bottom-0 left-0 w-full",
+      // Appearance
+      "bg-black/50 text-white p-4"
+    ]
   },
-  progressbar: {
-    root: {
-      class: [
-        // Position and Overflow
-        "overflow-hidden",
-        "absolute top-0 left-0",
-        // Shape and Size
-        "border-0",
-        "h-2",
-        "rounded-md",
-        "w-full",
-        // Colors
-        "bg-surface-100 dark:bg-surface-700"
-      ]
-    },
-    value: {
-      class: [
-        // Flexbox & Overflow & Position
-        "absolute flex items-center justify-center overflow-hidden",
-        // Colors
-        "bg-primary-500 dark:bg-primary-400",
-        // Spacing & Sizing
-        "m-0",
-        "h-full w-0",
-        // Shape
-        "border-0",
-        // Transitions
-        "transition-width duration-1000 ease-in-out"
-      ]
-    }
+  transition: {
+    enterFromClass: "opacity-0 scale-75",
+    enterActiveClass: "transition-all duration-150 ease-in-out",
+    leaveActiveClass: "transition-all duration-150 ease-in",
+    leaveToClass: "opacity-0 scale-75"
   }
 };
 export {
-  r as default
+  i as default
 };

package/dist/index17.js

@@ -1,7 +1,7 @@
-import N from "./index89.js";
+import N from "./index90.js";
 import { resolveComponent as m, createElementBlock as r, openBlock as o, mergeProps as v, toHandlerKey as F, createCommentVNode as d, createElementVNode as n, normalizeStyle as p, normalizeClass as t, renderSlot as b, createVNode as u, createSlots as H, renderList as y, withCtx as w, withModifiers as S, normalizeProps as V, guardReactiveProps as B, createTextVNode as $, toDisplayString as g, Fragment as k, createBlock as R } from "vue";
 /* empty css        */
-import T from "./index62.js";
+import T from "./index63.js";
 const M = ["id"], q = ["id"], D = {
   class: /* @__PURE__ */ t([
     "fixed-scrollable overflow-x-auto overflow-y-hidden z-20"