@fy-/fws-vue 0.3.0 → 0.3.1

package/presets/Wind/galleria/index.js

@@ -1,351 +0,0 @@
-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/Wind/global.js

@@ -1,77 +0,0 @@
-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%;
-        }
-    }
-`,
-};

package/presets/Wind/iconfield/index.js

@@ -1,22 +0,0 @@
-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/Wind/image/index.js

@@ -1,206 +0,0 @@
-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-surface-900 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-surface-900/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",
-  },
-};