@fy-/fws-vue 0.3.0 → 0.3.2

package/presets/Lara/dataview/index.js

@@ -1,40 +0,0 @@
-export default {
-  content: {
-    class: [
-      // Spacing
-      "p-0",
-
-      // Shape
-      "border-0",
-
-      // Color
-      "text-surface-700 dark:text-white/80",
-      "bg-surface-0 dark:bg-surface-800",
-    ],
-  },
-  grid: {
-    class: [
-      // flex
-      "flex flex-wrap",
-
-      // Spacing
-      "ml-0 mr-0 mt-0",
-
-      // Color
-      "bg-surface-0 dark:bg-surface-800",
-    ],
-  },
-  header: {
-    class: [
-      "font-bold",
-
-      // Spacing
-      "p-4",
-
-      // Color
-      "text-surface-800 dark:text-white/80",
-      "bg-surface-50 dark:bg-surface-800",
-      "border-surface-200 dark:border-surface-700 border-y",
-    ],
-  },
-};

package/presets/Lara/deferred/index.js

@@ -1,3 +0,0 @@
-export default {
-  root: {},
-};

package/presets/Lara/dialog/index.js

@@ -1,249 +0,0 @@
-export default {
-  root: ({ state }) => ({
-    class: [
-      // Shape
-      "rounded-lg",
-      "shadow-lg",
-      "border-0",
-
-      // Size
-      "max-h-[90vh]",
-      "w-[50vw]",
-      "m-0",
-
-      // Color
-      "dark:border",
-      "dark:border-surface-700",
-
-      // Transitions
-      "transform",
-      "scale-100",
-
-      // Maximized State
-      {
-        "transition-none": state.maximized,
-        "transform-none": state.maximized,
-        "!w-screen": state.maximized,
-        "!h-screen": state.maximized,
-        "!max-h-full": state.maximized,
-        "!top-0": state.maximized,
-        "!left-0": state.maximized,
-      },
-    ],
-  }),
-  header: {
-    class: [
-      // Flexbox and Alignment
-      "flex items-center justify-between",
-      "shrink-0",
-
-      // Spacing
-      "p-6",
-
-      // Shape
-      "border-t-0",
-      "rounded-tl-lg",
-      "rounded-tr-lg",
-
-      // Colors
-      "bg-surface-0 dark:bg-surface-800",
-      "text-surface-700 dark:text-surface-0/80",
-    ],
-  },
-  title: {
-    class: ["font-bold text-lg"],
-  },
-  icons: {
-    class: ["flex items-center"],
-  },
-  closeButton: {
-    class: [
-      "relative",
-
-      // Flexbox and Alignment
-      "flex items-center justify-center",
-
-      // Size and Spacing
-      "mr-2",
-      "last:mr-0",
-      "w-8 h-8",
-
-      // Shape
-      "border-0",
-      "rounded-full",
-
-      // Colors
-      "text-surface-500",
-      "bg-transparent",
-
-      // Transitions
-      "transition duration-200 ease-in-out",
-
-      // States
-      "hover:text-surface-700 dark:hover:text-white/80",
-      "hover:bg-surface-100 dark:hover:bg-surface-800/80",
-      "focus:outline-none focus:outline-offset-0 focus:ring focus:ring-inset",
-      "focus:ring-primary-400/50 dark:focus:ring-primary-300/50",
-
-      // Misc
-      "overflow-hidden",
-    ],
-  },
-  maximizablebutton: {
-    class: [
-      "relative",
-
-      // Flexbox and Alignment
-      "flex items-center justify-center",
-
-      // Size and Spacing
-      "mr-2",
-      "last:mr-0",
-      "w-8 h-8",
-
-      // Shape
-      "border-0",
-      "rounded-full",
-
-      // Colors
-      "text-surface-500",
-      "bg-transparent",
-
-      // Transitions
-      "transition duration-200 ease-in-out",
-
-      // States
-      "hover:text-surface-700 dark:hover:text-white/80",
-      "hover:bg-surface-100 dark:hover:bg-surface-800/80",
-      "focus:outline-none focus:outline-offset-0 focus:ring focus:ring-inset",
-      "focus:ring-primary-400/50 dark:focus:ring-primary-300/50",
-
-      // Misc
-      "overflow-hidden",
-    ],
-  },
-  closeButtonIcon: {
-    class: [
-      // Display
-      "inline-block",
-
-      // Size
-      "w-4",
-      "h-4",
-    ],
-  },
-  maximizableicon: {
-    class: [
-      // Display
-      "inline-block",
-
-      // Size
-      "w-4",
-      "h-4",
-    ],
-  },
-  content: ({ state, instance }) => ({
-    class: [
-      // Spacing
-      "px-6",
-      "pb-8",
-      "pt-0",
-
-      // Shape
-      {
-        grow: state.maximized,
-        "rounded-bl-lg": !instance.$slots.footer,
-        "rounded-br-lg": !instance.$slots.footer,
-      },
-
-      // Colors
-      "bg-surface-0 dark:bg-surface-800",
-      "text-surface-700 dark:text-surface-0/80",
-
-      // Misc
-      "overflow-y-auto",
-    ],
-  }),
-  footer: {
-    class: [
-      // Flexbox and Alignment
-      "flex items-center justify-end",
-      "shrink-0",
-      "text-right",
-      "gap-2",
-
-      // Spacing
-      "px-6",
-      "pb-6",
-
-      // Shape
-      "border-t-0",
-      "rounded-b-lg",
-
-      // Colors
-      "bg-surface-0 dark:bg-surface-800",
-      "text-surface-700 dark:text-surface-0/80",
-    ],
-  },
-  mask: ({ props }) => ({
-    class: [
-      // Transitions
-      "transition-all",
-      "duration-300",
-      { "p-5": !props.position == "full" },
-
-      // Background and Effects
-      {
-        "has-[.mask-active]:bg-transparent bg-black/40": props.modal,
-        "has-[.mask-active]:backdrop-blur-none backdrop-blur-sm": props.modal,
-      },
-    ],
-  }),
-  transition: ({ props }) => {
-    return props.position === "top"
-      ? {
-          enterFromClass:
-            "opacity-0 scale-75 translate-x-0 -translate-y-full translate-z-0 mask-active",
-          enterActiveClass: "transition-all duration-200 ease-out",
-          leaveActiveClass: "transition-all duration-200 ease-out",
-          leaveToClass:
-            "opacity-0 scale-75 translate-x-0 -translate-y-full translate-z-0 mask-active",
-        }
-      : props.position === "bottom"
-        ? {
-            enterFromClass: "opacity-0 scale-75 translate-y-full mask-active",
-            enterActiveClass: "transition-all duration-200 ease-out",
-            leaveActiveClass: "transition-all duration-200 ease-out",
-            leaveToClass:
-              "opacity-0 scale-75 translate-x-0 translate-y-full translate-z-0 mask-active",
-          }
-        : props.position === "left" ||
-            props.position === "topleft" ||
-            props.position === "bottomleft"
-          ? {
-              enterFromClass:
-                "opacity-0 scale-75 -translate-x-full translate-y-0 translate-z-0 mask-active",
-              enterActiveClass: "transition-all duration-200 ease-out",
-              leaveActiveClass: "transition-all duration-200 ease-out",
-              leaveToClass:
-                "opacity-0 scale-75  -translate-x-full translate-y-0 translate-z-0 mask-active",
-            }
-          : props.position === "right" ||
-              props.position === "topright" ||
-              props.position === "bottomright"
-            ? {
-                enterFromClass:
-                  "opacity-0 scale-75 translate-x-full translate-y-0 translate-z-0 mask-active",
-                enterActiveClass: "transition-all duration-200 ease-out",
-                leaveActiveClass: "transition-all duration-200 ease-out",
-                leaveToClass:
-                  "opacity-0 scale-75 translate-x-full translate-y-0 translate-z-0 mask-active",
-              }
-            : {
-                enterFromClass: "opacity-0 scale-75 mask-active",
-                enterActiveClass: "transition-all duration-200 ease-out",
-                leaveActiveClass: "transition-all duration-200 ease-out",
-                leaveToClass: "opacity-0 scale-75 mask-active",
-              };
-  },
-};

package/presets/Lara/divider/index.js

@@ -1,72 +0,0 @@
-export default {
-  root: ({ props }) => ({
-    class: [
-      // Flex and Position
-      "flex relative",
-      { "justify-center": props.layout == "vertical" },
-      { "items-center": props.layout == "vertical" },
-      {
-        "justify-start": props?.align == "left" && props.layout == "horizontal",
-        "justify-center":
-          props?.align == "center" && props.layout == "horizontal",
-        "justify-end": props?.align == "right" && props.layout == "horizontal",
-        "items-center": props?.align == "top" && props.layout == "vertical",
-        "items-start": props?.align == "center" && props.layout == "vertical",
-        "items-end": props?.align == "bottom" && props.layout == "vertical",
-      },
-
-      // Spacing
-      {
-        "my-5 mx-0 py-0 px-5": props.layout == "horizontal",
-        "mx-4 md:mx-5 py-5": props.layout == "vertical",
-      },
-
-      // Size
-      {
-        "w-full": props.layout == "horizontal",
-        "min-h-full": props.layout == "vertical",
-      },
-
-      // Before: Line
-      "before:block",
-
-      // Position
-      {
-        "before:absolute before:left-0 before:top-1/2":
-          props.layout == "horizontal",
-        "before:absolute before:left-1/2 before:top-0 before:transform before:-translate-x-1/2":
-          props.layout == "vertical",
-      },
-
-      // Size
-      {
-        "before:w-full": props.layout == "horizontal",
-        "before:min-h-full": props.layout == "vertical",
-      },
-
-      // Shape
-      {
-        "before:border-solid": props.type == "solid",
-        "before:border-dotted": props.type == "dotted",
-        "before:border-dashed": props.type == "dashed",
-      },
-
-      // Color
-      {
-        "before:border-t before:border-surface-200 before:dark:border-surface-600":
-          props.layout == "horizontal",
-        "before:border-l before:border-surface-200 before:dark:border-surface-600":
-          props.layout == "vertical",
-      },
-    ],
-  }),
-  content: {
-    class: [
-      // Space and Position
-      "px-1 z-10",
-
-      // Color
-      "bg-surface-0 dark:bg-surface-800",
-    ],
-  },
-};

package/presets/Lara/dock/index.js

@@ -1,97 +0,0 @@
-export default {
-  root: ({ props }) => ({
-    class: [
-      // Positioning
-      "absolute z-1",
-      {
-        "left-0 bottom-0 w-full": props.position == "bottom",
-        "left-0 top-0 w-full": props.position == "top",
-        "left-0 top-0 h-full": props.position == "left",
-        "right-0 top-0 h-full": props.position == "right",
-      },
-
-      // Flexbox & Alignment
-      "flex justify-center items-center",
-
-      // Interactivity
-      "pointer-events-none",
-    ],
-  }),
-  container: {
-    class: [
-      // Flexbox
-      "flex",
-
-      // Shape & Border
-      "rounded-md",
-
-      // Color
-      "bg-surface-0/10 dark:bg-surface-900/20 border border-surface-0/20",
-      "backdrop-blur-sm",
-
-      // Spacing
-      "p-2",
-
-      // Misc
-      "pointer-events-auto",
-    ],
-  },
-  menu: ({ props }) => ({
-    class: [
-      // Flexbox & Alignment
-      "flex items-center justify-center",
-      {
-        "flex-col": props.position == "left" || props.position == "right",
-      },
-
-      // List Style
-      "m-0 p-0 list-none",
-
-      // Shape
-      "outline-none",
-    ],
-  }),
-  menuitem: ({ props, context, instance }) => ({
-    class: [
-      // Spacing & Shape
-      "p-2 rounded-md",
-
-      // Conditional Scaling
-      {
-        "hover:scale-150": instance.currentIndex === context.index,
-        "scale-125":
-          instance.currentIndex - 1 === context.index ||
-          instance.currentIndex + 1 === context.index,
-        "scale-110":
-          instance.currentIndex - 2 === context.index ||
-          instance.currentIndex + 2 === context.index,
-      },
-
-      // Positioning & Hover States
-      {
-        "origin-bottom hover:mx-6": props.position == "bottom",
-        "origin-top hover:mx-6": props.position == "top",
-        "origin-left hover:my-6": props.position == "left",
-        "origin-right hover:my-6": props.position == "right",
-      },
-
-      // Transitions & Transform
-      "transition-all duration-200 ease-cubic-bezier-will-change-transform transform",
-    ],
-  }),
-  action: {
-    class: [
-      // Flexbox & Alignment
-      "flex flex-col items-center justify-center",
-
-      // Position
-      "relative",
-
-      // Size
-      "w-16 h-16",
-
-      // Misc
-      "cursor-default overflow-hidden",
-    ],
-  },
-};