@fy-/fws-vue 0.1.2 → 0.1.4

package/presets/Lara/galleria/index.js

@@ -0,0 +1,351 @@
+export default {
+  content: ({ parent, props }) => ({
+    class: [
+      "flex",
+      {
+        "flex-col": props.fullScreen,
+      },
+      {
+        "flex-col":
+          parent.props.thumbnailsPosition === "top" ||
+          parent.props.thumbnailsPosition === "bottom",
+        "flex-row":
+          parent.props.thumbnailsPosition === "right" ||
+          parent.props.thumbnailsPosition === "left",
+      },
+    ],
+  }),
+  itemwrapper: ({ parent, props }) => ({
+    class: [
+      "group",
+      "flex relative",
+      {
+        "grow shrink w-0 justify-center": props.fullScreen,
+      },
+      {
+        "flex-col":
+          parent.props.indicatorsPosition === "bottom" ||
+          parent.props.indicatorsPosition === "top",
+        "flex-row items-center":
+          parent.props.indicatorsPosition === "left" ||
+          parent.props.indicatorsPosition === "right",
+      },
+      {
+        "order-2":
+          parent.props.thumbnailsPosition === "top" ||
+          parent.props.thumbnailsPosition === "left",
+        "flex-row": parent.props.thumbnailsPosition === "right",
+      },
+    ],
+  }),
+
+  itemcontainer: ({ parent }) => ({
+    class: [
+      "flex h-full relative",
+      {
+        "order-1":
+          parent.props.indicatorsPosition === "bottom" ||
+          parent.props.indicatorsPosition === "right",
+        "order-2":
+          parent.props.indicatorsPosition === "top" ||
+          parent.props.indicatorsPosition === "left",
+      },
+    ],
+  }),
+  item: {
+    class: [
+      // Flex
+      "flex justify-center items-center h-full w-full",
+
+      // Sizing
+      "h-full w-full",
+    ],
+  },
+  thumbnailwrapper: ({ parent }) => ({
+    class: [
+      // Flex
+      "flex flex-col shrink-0",
+
+      {
+        "order-1":
+          parent.props.thumbnailsPosition === "top" ||
+          parent.props.thumbnailsPosition === "left",
+      },
+
+      // Misc
+      "overflow-auto",
+    ],
+  }),
+  thumbnailcontainer: ({ parent }) => ({
+    class: [
+      // Flex
+      "flex",
+
+      // Spacing
+      "p-4",
+
+      // Colors
+      "bg-black/90",
+
+      {
+        "flex-row":
+          parent.props.thumbnailsPosition === "top" ||
+          parent.props.thumbnailsPosition === "bottom",
+        "flex-col grow":
+          parent.props.thumbnailsPosition === "right" ||
+          parent.props.thumbnailsPosition === "left",
+      },
+    ],
+  }),
+  previousthumbnailbutton: {
+    class: [
+      // Positioning
+      "self-center relative",
+
+      // Display & Flexbox
+      "flex shrink-0 justify-center items-center overflow-hidden",
+
+      // Spacing
+      "m-2",
+
+      // 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 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50",
+    ],
+  },
+  thumbnailitemscontainer: {
+    class: "overflow-hidden w-full",
+  },
+  thumbnailitems: ({ parent }) => ({
+    class: [
+      "flex",
+      {
+        "flex-col h-full":
+          parent.props.thumbnailsPosition === "right" ||
+          parent.props.thumbnailsPosition === "left",
+      },
+    ],
+  }),
+  thumbnailitem: ({ parent }) => ({
+    class: [
+      // Flexbox
+      "flex items-center justify-center",
+      "grow shrink-0",
+
+      // Sizing
+      {
+        "w-full md:w-[25%] lg:w-[20%]":
+          parent.props.thumbnailsPosition === "top" ||
+          parent.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
+      "m-2",
+
+      // 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 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50",
+    ],
+  },
+  indicators: ({ parent }) => ({
+    class: [
+      // flex
+      "flex items-center justify-center",
+
+      // Spacing
+      "p-4",
+
+      // Indicators Position
+      {
+        "order-2": parent.props.indicatorsPosition == "bottom",
+        "order-1": parent.props.indicatorsPosition == "top",
+        "order-1 flex-col": parent.props.indicatorsPosition == "left",
+        "flex-col order-2": parent.props.indicatorsPosition == "right",
+      },
+      {
+        "absolute z-10 bg-black/50": parent.props.showIndicatorsOnItem,
+      },
+
+      {
+        "bottom-0 left-0 w-full items-start":
+          parent.props.indicatorsPosition == "bottom" &&
+          parent.props.showIndicatorsOnItem,
+        "top-0 left-0 w-full items-start":
+          parent.props.indicatorsPosition == "top" &&
+          parent.props.showIndicatorsOnItem,
+        "left-0 top-0 h-full items-start":
+          parent.props.indicatorsPosition == "left" &&
+          parent.props.showIndicatorsOnItem,
+        "right-0 top-0 h-full items-start":
+          parent.props.indicatorsPosition == "right" &&
+          parent.props.showIndicatorsOnItem,
+      },
+    ],
+  }),
+  indicator: ({ parent }) => ({
+    class: [
+      {
+        "mr-2":
+          parent.props.indicatorsPosition == "bottom" ||
+          parent.props.indicatorsPosition == "top",
+        "mb-2":
+          parent.props.indicatorsPosition == "left" ||
+          parent.props.indicatorsPosition == "right",
+      },
+    ],
+  }),
+  indicatorbutton: ({ context }) => ({
+    class: [
+      // Size
+      "w-4 h-4",
+
+      // Appearance
+      "rounded-full transition duration-200",
+
+      // Focus Effects
+      "focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50",
+
+      // Conditional Appearance: Not Highlighted
+      {
+        "bg-surface-200 hover:bg-surface-300 dark:bg-surface-700 dark:hover:bg-surface-600":
+          !context.highlighted,
+      },
+
+      // Conditional Appearance: Highlighted
+      { "bg-primary-500 hover:bg-primary-600": context.highlighted },
+    ],
+  }),
+  mask: {
+    class: [
+      "fixed top-0 left-0 w-full h-full",
+      "flex items-center justify-center",
+      "bg-black/90",
+    ],
+  },
+  closebutton: {
+    class: [
+      // Positioning
+      "!absolute top-0 right-0",
+
+      // 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",
+
+      // Hover Effect
+      "hover:text-white hover:bg-surface-0/10",
+
+      // Focus Effects
+      "focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50",
+    ],
+  },
+  closeicon: {
+    class: "w-6 h-6",
+  },
+  previousitembutton: ({ parent }) => ({
+    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":
+          parent.props.showItemNavigatorsOnHover,
+      },
+
+      // Spacing
+      "mx-2",
+
+      // Positioning
+      "top-1/2 mt-[-0.5rem] left-0",
+      {
+        "!absolute": parent.props.showItemNavigators,
+        "!fixed": !parent.props.showItemNavigators,
+      },
+
+      // Hover Effect
+      "hover:bg-surface-0/10 hover:text-white",
+
+      // Focus Effects
+      "focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50",
+    ],
+  }),
+  nextitembutton: ({ parent }) => ({
+    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":
+          parent.props.showItemNavigatorsOnHover,
+      },
+
+      // Spacing
+      "mx-2",
+
+      // Positioning
+      "top-1/2 mt-[-0.5rem] right-0",
+      {
+        "!absolute": parent.props.showItemNavigators,
+        "!fixed": !parent.props.showItemNavigators,
+      },
+
+      // Hover Effect
+      "hover:bg-surface-0/10 hover:text-white",
+
+      // Focus Effects
+      "focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50",
+    ],
+  }),
+  caption: {
+    class: [
+      // Positioning
+      "absolute bottom-0 left-0 w-full",
+
+      // Appearance
+      "bg-black/50 text-white p-4",
+    ],
+  },
+  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",
+  },
+};

package/presets/Lara/global.js

@@ -0,0 +1,90 @@
+export default {
+  css: `
+    *[data-pd-ripple="true"]{
+        overflow: hidden;
+        position: relative;
+    }
+    span[data-p-ink-active="true"]{
+        animation: ripple 0.4s linear;
+    }
+    @keyframes ripple {
+        100% {
+            opacity: 0;
+            transform: scale(2.5);
+        }
+    }
+
+    .progress-spinner-circle {
+        stroke-dasharray: 89, 200;
+        stroke-dashoffset: 0;
+        animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite;
+        stroke-linecap: round;
+    }
+
+    @keyframes p-progress-spinner-dash{
+        0% {
+            stroke-dasharray: 1, 200;
+            stroke-dashoffset: 0;
+        }
+
+        50% {
+            stroke-dasharray: 89, 200;
+            stroke-dashoffset: -35px;
+        }
+        100% {
+            stroke-dasharray: 89, 200;
+            stroke-dashoffset: -124px;
+        }
+    }
+    @keyframes p-progress-spinner-color {
+        100%, 0% {
+            stroke: #ff5757;
+        }
+        40% {
+            stroke: #696cff;
+        }
+        66% {
+            stroke: #1ea97c;
+        }
+        80%, 90% {
+            stroke: #cc8925;
+        }
+    }
+
+    .progressbar-value-animate::after {
+        will-change: left, right;
+        animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+    }
+    .progressbar-value-animate::before {
+        will-change: left, right;
+        animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+    }
+    @keyframes p-progressbar-indeterminate-anim {
+        0% {
+            left: -35%;
+            right: 100%;
+        }
+        60% {
+            left: 100%;
+            right: -90%;
+        }
+        100% {
+            left: 100%;
+            right: -90%;
+        }
+    }
+
+    .p-fadein {
+        animation: p-fadein 250ms linear;
+    }
+
+    @keyframes p-fadein {
+        0% {
+            opacity: 0;
+        }
+        100% {
+            opacity: 1;
+        }
+    }
+`,
+};

package/presets/Lara/iconfield/index.js

@@ -0,0 +1,22 @@
+export default {
+  root: ({ props }) => ({
+    class: [
+      "relative",
+      "[&>input]:w-full",
+
+      "[&>*:first-child]:absolute",
+      "[&>*:first-child]:top-1/2",
+      "[&>*:first-child]:-mt-2",
+      "[&>*:first-child]:leading-none",
+      "[&>*:first-child]:text-surface-900/60 dark:[&>*:first-child]:text-white/60",
+      {
+        "[&>*:first-child]:right-3": props.iconPosition === "right",
+        "[&>*:first-child]:left-3": props.iconPosition === "left",
+      },
+      {
+        "[&>*:last-child]:pr-10": props.iconPosition === "right",
+        "[&>*:last-child]:pl-10": props.iconPosition === "left",
+      },
+    ],
+  }),
+};

package/presets/Lara/image/index.js

@@ -0,0 +1,206 @@
+export default {
+  root: {
+    class: "relative inline-block",
+  },
+  button: {
+    class: [
+      // Flexbox & Alignment
+      "flex items-center justify-center",
+
+      // Positioning
+      "absolute",
+
+      // Shape
+      "inset-0 opacity-0 transition-opacity duration-300",
+
+      // Color
+      "bg-transparent text-surface-100",
+
+      // States
+      "hover:opacity-100 hover:cursor-pointer hover:bg-black/50 hover:bg-opacity-50",
+    ],
+  },
+  mask: {
+    class: [
+      // Flexbox & Alignment
+      "flex items-center justify-center",
+
+      // Positioning
+      "fixed top-0 left-0",
+
+      // Sizing
+      "w-full h-full",
+
+      // Color
+      "bg-black/90",
+    ],
+  },
+  toolbar: {
+    class: [
+      // Flexbox
+      "flex",
+
+      // Positioning
+      "absolute top-0 right-0",
+
+      // Spacing
+      "p-4",
+    ],
+  },
+  rotaterightbutton: {
+    class: [
+      "z-20",
+
+      // Flexbox & Alignment
+      "flex justify-center items-center",
+
+      // Size
+      "w-12 h-12",
+
+      // Spacing
+      "mr-2",
+
+      // Shape
+      "rounded-full",
+
+      // Color
+      "text-white bg-transparent",
+
+      // States
+      "hover:text-white hover:bg-surface-0/10",
+      "focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50",
+
+      // Transition
+      "transition duration-200 ease-in-out",
+    ],
+  },
+  rotaterighticon: {
+    class: "w-6 h-6",
+  },
+  rotateleftbutton: {
+    class: [
+      "z-20",
+
+      // Flexbox & Alignment
+      "flex justify-center items-center",
+
+      // Size
+      "w-12 h-12",
+
+      // Spacing
+      "mr-2",
+
+      // Shape
+      "rounded-full",
+
+      // Color
+      "text-white bg-transparent",
+
+      // States
+      "hover:text-white hover:bg-surface-0/10",
+      "focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50",
+
+      // Transition
+      "transition duration-200 ease-in-out",
+    ],
+  },
+  rotatelefticon: {
+    class: "w-6 h-6",
+  },
+  zoomoutbutton: {
+    class: [
+      "z-20",
+
+      // Flexbox & Alignment
+      "flex justify-center items-center",
+
+      // Size
+      "w-12 h-12",
+
+      // Spacing
+      "mr-2",
+
+      // Shape
+      "rounded-full",
+
+      // Color
+      "text-white bg-transparent",
+
+      // States
+      "hover:text-white hover:bg-surface-0/10",
+      "focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50",
+
+      // Transition
+      "transition duration-200 ease-in-out",
+    ],
+  },
+  zoomouticon: {
+    class: "w-6 h-6",
+  },
+  zoominbutton: {
+    class: [
+      "z-20",
+
+      // Flexbox & Alignment
+      "flex justify-center items-center",
+
+      // Size
+      "w-12 h-12",
+
+      // Spacing
+      "mr-2",
+
+      // Shape
+      "rounded-full",
+
+      // Color
+      "text-white bg-transparent",
+
+      // States
+      "hover:text-white hover:bg-surface-0/10",
+      "focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50",
+
+      // Transition
+      "transition duration-200 ease-in-out",
+    ],
+  },
+  zoominicon: {
+    class: "w-6 h-6",
+  },
+  closebutton: {
+    class: [
+      "z-20",
+
+      // Flexbox & Alignment
+      "flex justify-center items-center",
+
+      // Size
+      "w-12 h-12",
+
+      // Spacing
+      "mr-2",
+
+      // Shape
+      "rounded-full",
+
+      // Color
+      "text-white bg-transparent",
+
+      // States
+      "hover:text-white hover:bg-surface-0/10",
+      "focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50",
+
+      // Transition
+      "transition duration-200 ease-in-out",
+    ],
+  },
+  closeicon: {
+    class: "w-6 h-6",
+  },
+  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",
+  },
+};