@fy-/fws-vue 0.1.2 → 0.1.4

package/presets/Lara/dataview/index.js

@@ -0,0 +1,40 @@
+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

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

package/presets/Lara/dialog/index.js

@@ -0,0 +1,249 @@
+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

@@ -0,0 +1,72 @@
+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

@@ -0,0 +1,97 @@
+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",
+    ],
+  },
+};