@quoreadmin/ui 1.9.1 → 1.9.3

package/dist/index174.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
 };