@fy-/fws-vue 0.1.3 → 0.1.5

package/presets/Lara/slider/index.js

@@ -0,0 +1,149 @@
+export default {
+  root: ({ props }) => ({
+    class: [
+      "relative",
+
+      // Size
+      {
+        "h-1 w-60": props.orientation == "horizontal",
+        "w-1 h-56": props.orientation == "vertical",
+      },
+
+      // Shape
+      "border-0",
+
+      // Colors
+      "bg-surface-100 dark:bg-surface-700",
+
+      // States
+      {
+        "opacity-60 select-none pointer-events-none cursor-default":
+          props.disabled,
+      },
+    ],
+  }),
+  range: ({ props }) => ({
+    class: [
+      // Position
+      "block absolute",
+      {
+        "top-0 left-0": props.orientation == "horizontal",
+        "bottom-0 left-0": props.orientation == "vertical",
+      },
+
+      // Size
+      {
+        "h-full": props.orientation == "horizontal",
+        "w-full": props.orientation == "vertical",
+      },
+
+      // Colors
+      "bg-primary-500 dark:bg-primary-400",
+    ],
+  }),
+  handle: ({ props }) => ({
+    class: [
+      "block",
+
+      // Size
+      "h-[1.143rem]",
+      "w-[1.143rem]",
+      {
+        "top-[50%] mt-[-0.5715rem] ml-[-0.5715rem]":
+          props.orientation == "horizontal",
+        "left-[50%] mb-[-0.5715rem] ml-[-0.5715rem]":
+          props.orientation == "vertical",
+      },
+
+      // Shape
+      "rounded-full",
+      "border-2",
+
+      // Colors
+      "bg-surface-0 dark:bg-surface-600",
+      "border-primary-500 dark:border-primary-400",
+
+      // States
+      "hover:bg-primary-500 hover:border-primary-500",
+      "focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring",
+      "ring-primary-400/50 dark:ring-primary-300/50",
+
+      // Transitions
+      "transition duration-200",
+
+      // Misc
+      "cursor-grab",
+      "touch-action-none",
+    ],
+  }),
+  starthandler: ({ props }) => ({
+    class: [
+      "block",
+
+      // Size
+      "h-[1.143rem]",
+      "w-[1.143rem]",
+      {
+        "top-[50%] mt-[-0.5715rem] ml-[-0.5715rem]":
+          props.orientation == "horizontal",
+        "left-[50%] mb-[-0.5715rem] ml-[-0.4715rem]":
+          props.orientation == "vertical",
+      },
+
+      // Shape
+      "rounded-full",
+      "border-2",
+
+      // Colors
+      "bg-surface-0 dark:bg-surface-600",
+      "border-primary-500 dark:border-primary-400",
+
+      // States
+      "hover:bg-primary-500 hover:border-primary-500",
+      "focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring",
+      "focus-visible:ring-primary-400/50 dark:focus-visible:ring-primary-300/50",
+
+      // Transitions
+      "transition duration-200",
+
+      // Misc
+      "cursor-grab",
+      "touch-action-none",
+    ],
+  }),
+  endhandler: ({ props }) => ({
+    class: [
+      "block",
+
+      // Size
+      "h-[1.143rem]",
+      "w-[1.143rem]",
+      {
+        "top-[50%] mt-[-0.5715rem] ml-[-0.5715rem]":
+          props.orientation == "horizontal",
+        "left-[50%] mb-[-0.5715rem] ml-[-0.4715rem]":
+          props.orientation == "vertical",
+      },
+
+      // Shape
+      "rounded-full",
+      "border-2",
+
+      // Colors
+      "bg-surface-0 dark:bg-surface-600",
+      "border-primary-500 dark:border-primary-400",
+
+      // States
+      "hover:bg-primary-500 hover:border-primary-500",
+      "focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring",
+      "focus-visible:ring-primary-400/50 dark:focus-visible:ring-primary-300/50",
+
+      // Transitions
+      "transition duration-200",
+
+      // Misc
+      "cursor-grab",
+      "touch-action-none",
+    ],
+  }),
+};

package/presets/Lara/speeddial/index.js

@@ -0,0 +1,535 @@
+export default {
+  root: {
+    class: "absolute flex",
+  },
+  button: {
+    root: ({ props, context, parent }) => ({
+      class: [
+        "relative",
+        "z-20",
+
+        // Alignments
+        "items-center inline-flex text-center align-bottom justify-center",
+
+        // Sizes & Spacing
+        "leading-[normal]",
+        "w-16 h-16 p-0 py-3",
+
+        // Shapes
+        "rounded-full",
+        "shadow-md",
+
+        // Link Button
+        { "text-primary-600 bg-transparent border-transparent": props.link },
+
+        // Plain Button
+        {
+          "text-white bg-gray-500 border border-gray-500":
+            props.plain && !props.outlined && !props.text,
+        },
+        // Plain Text Button
+        { "text-surface-500": props.plain && props.text },
+        // Plain Outlined Button
+        {
+          "text-surface-500 border border-gray-500":
+            props.plain && props.outlined,
+        },
+
+        // Text Button
+        { "bg-transparent border-transparent": props.text && !props.plain },
+
+        // Outlined Button
+        { "bg-transparent border": props.outlined && !props.plain },
+
+        // --- Severity Buttons ---
+
+        // Primary Button
+        {
+          "text-white dark:text-surface-900":
+            !props.link &&
+            props.severity === null &&
+            !props.text &&
+            !props.outlined &&
+            !props.plain,
+          "bg-primary-500 dark:bg-primary-400":
+            !props.link &&
+            props.severity === null &&
+            !props.text &&
+            !props.outlined &&
+            !props.plain,
+          "border border-primary-500 dark:border-primary-400":
+            !props.link &&
+            props.severity === null &&
+            !props.text &&
+            !props.outlined &&
+            !props.plain,
+        },
+        // Primary Text Button
+        {
+          "text-primary-500 dark:text-primary-400":
+            props.text && props.severity === null && !props.plain,
+        },
+        // Primary Outlined Button
+        {
+          "text-primary-500 border border-primary-500 hover:bg-primary-300/20":
+            props.outlined && props.severity === null && !props.plain,
+        },
+
+        // Secondary Button
+        {
+          "text-white dark:text-surface-900":
+            props.severity === "secondary" &&
+            !props.text &&
+            !props.outlined &&
+            !props.plain,
+          "bg-surface-500 dark:bg-surface-400":
+            props.severity === "secondary" &&
+            !props.text &&
+            !props.outlined &&
+            !props.plain,
+          "border border-surface-500 dark:border-surface-400":
+            props.severity === "secondary" &&
+            !props.text &&
+            !props.outlined &&
+            !props.plain,
+        },
+        // Secondary Text Button
+        {
+          "text-surface-500 dark:text-surface-300":
+            props.text && props.severity === "secondary" && !props.plain,
+        },
+        // Secondary Outlined Button
+        {
+          "text-surface-500 dark:text-surface-300 border border-surface-500 hover:bg-surface-300/20":
+            props.outlined && props.severity === "secondary" && !props.plain,
+        },
+
+        // Success Button
+        {
+          "text-white dark:text-green-900":
+            props.severity === "success" &&
+            !props.text &&
+            !props.outlined &&
+            !props.plain,
+          "bg-green-500 dark:bg-green-400":
+            props.severity === "success" &&
+            !props.text &&
+            !props.outlined &&
+            !props.plain,
+          "border border-green-500 dark:border-green-400":
+            props.severity === "success" &&
+            !props.text &&
+            !props.outlined &&
+            !props.plain,
+        },
+        // Success Text Button
+        {
+          "text-green-500 dark:text-green-400":
+            props.text && props.severity === "success" && !props.plain,
+        },
+        // Success Outlined Button
+        {
+          "text-green-500 border border-green-500 hover:bg-green-300/20":
+            props.outlined && props.severity === "success" && !props.plain,
+        },
+
+        // Info Button
+        {
+          "text-white dark:text-surface-900":
+            props.severity === "info" &&
+            !props.text &&
+            !props.outlined &&
+            !props.plain,
+          "bg-blue-500 dark:bg-blue-400":
+            props.severity === "info" &&
+            !props.text &&
+            !props.outlined &&
+            !props.plain,
+          "border border-blue-500 dark:border-blue-400":
+            props.severity === "info" &&
+            !props.text &&
+            !props.outlined &&
+            !props.plain,
+        },
+        // Info Text Button
+        {
+          "text-blue-500 dark:text-blue-400":
+            props.text && props.severity === "info" && !props.plain,
+        },
+        // Info Outlined Button
+        {
+          "text-blue-500 border border-blue-500 hover:bg-blue-300/20 ":
+            props.outlined && props.severity === "info" && !props.plain,
+        },
+
+        // Warning Button
+        {
+          "text-white dark:text-surface-900":
+            props.severity === "warning" &&
+            !props.text &&
+            !props.outlined &&
+            !props.plain,
+          "bg-orange-500 dark:bg-orange-400":
+            props.severity === "warning" &&
+            !props.text &&
+            !props.outlined &&
+            !props.plain,
+          "border border-orange-500 dark:border-orange-400":
+            props.severity === "warning" &&
+            !props.text &&
+            !props.outlined &&
+            !props.plain,
+        },
+        // Warning Text Button
+        {
+          "text-orange-500 dark:text-orange-400":
+            props.text && props.severity === "warning" && !props.plain,
+        },
+        // Warning Outlined Button
+        {
+          "text-orange-500 border border-orange-500 hover:bg-orange-300/20":
+            props.outlined && props.severity === "warning" && !props.plain,
+        },
+
+        // Help Button
+        {
+          "text-white dark:text-surface-900":
+            props.severity === "help" &&
+            !props.text &&
+            !props.outlined &&
+            !props.plain,
+          "bg-purple-500 dark:bg-purple-400":
+            props.severity === "help" &&
+            !props.text &&
+            !props.outlined &&
+            !props.plain,
+          "border border-purple-500 dark:border-purple-400":
+            props.severity === "help" &&
+            !props.text &&
+            !props.outlined &&
+            !props.plain,
+        },
+        // Help Text Button
+        {
+          "text-purple-500 dark:text-purple-400":
+            props.text && props.severity === "help" && !props.plain,
+        },
+        // Help Outlined Button
+        {
+          "text-purple-500 border border-purple-500 hover:bg-purple-300/20":
+            props.outlined && props.severity === "help" && !props.plain,
+        },
+
+        // Danger Button
+        {
+          "text-white dark:text-surface-900":
+            props.severity === "danger" &&
+            !props.text &&
+            !props.outlined &&
+            !props.plain,
+          "bg-red-500 dark:bg-red-400":
+            props.severity === "danger" &&
+            !props.text &&
+            !props.outlined &&
+            !props.plain,
+          "border border-red-500 dark:border-red-400":
+            props.severity === "danger" &&
+            !props.text &&
+            !props.outlined &&
+            !props.plain,
+        },
+        // Danger Text Button
+        {
+          "text-red-500 dark:text-red-400":
+            props.text && props.severity === "danger" && !props.plain,
+        },
+        // Danger Outlined Button
+        {
+          "text-red-500 border border-red-500 hover:bg-red-300/20":
+            props.outlined && props.severity === "danger" && !props.plain,
+        },
+
+        // --- Severity Button States ---
+        "focus:outline-none focus:outline-offset-0 focus:ring",
+
+        // Link
+        {
+          "focus:ring-primary-400/50 dark:focus:ring-primary-300/50":
+            props.link,
+        },
+
+        // Plain
+        {
+          "hover:bg-gray-600 hover:border-gray-600":
+            props.plain && !props.outlined && !props.text,
+        },
+        // Text & Outlined Button
+        {
+          "hover:bg-surface-300/20":
+            props.plain && (props.text || props.outlined),
+        },
+
+        // Primary
+        {
+          "hover:bg-primary-600 dark:hover:bg-primary-300 hover:border-primary-600 dark:hover:border-primary-300":
+            !props.link &&
+            props.severity === null &&
+            !props.text &&
+            !props.outlined &&
+            !props.plain,
+        },
+        {
+          "focus:ring-primary-400/50 dark:focus:ring-primary-300/50":
+            props.severity === null,
+        },
+        // Text & Outlined Button
+        {
+          "hover:bg-primary-300/20":
+            (props.text || props.outlined) &&
+            props.severity === null &&
+            !props.plain,
+        },
+
+        // Secondary
+        {
+          "hover:bg-surface-600 dark:hover:bg-surface-300 hover:border-surface-600 dark:hover:border-surface-300":
+            props.severity === "secondary" &&
+            !props.text &&
+            !props.outlined &&
+            !props.plain,
+        },
+        {
+          "focus:ring-surface-400/50 dark:focus:ring-surface-300/50":
+            props.severity === "secondary",
+        },
+        // Text & Outlined Button
+        {
+          "hover:bg-surface-300/20":
+            (props.text || props.outlined) &&
+            props.severity === "secondary" &&
+            !props.plain,
+        },
+
+        // Success
+        {
+          "hover:bg-green-600 dark:hover:bg-green-300 hover:border-green-600 dark:hover:border-green-300":
+            props.severity === "success" &&
+            !props.text &&
+            !props.outlined &&
+            !props.plain,
+        },
+        {
+          "focus:ring-green-400/50 dark:focus:ring-green-300/50":
+            props.severity === "success",
+        },
+        // Text & Outlined Button
+        {
+          "hover:bg-green-300/20":
+            (props.text || props.outlined) &&
+            props.severity === "success" &&
+            !props.plain,
+        },
+
+        // Info
+        {
+          "hover:bg-blue-600 dark:hover:bg-blue-300 hover:border-blue-600 dark:hover:border-blue-300":
+            props.severity === "info" &&
+            !props.text &&
+            !props.outlined &&
+            !props.plain,
+        },
+        {
+          "focus:ring-blue-400/50 dark:focus:ring-blue-300/50":
+            props.severity === "info",
+        },
+        // Text & Outlined Button
+        {
+          "hover:bg-blue-300/20":
+            (props.text || props.outlined) &&
+            props.severity === "info" &&
+            !props.plain,
+        },
+
+        // Warning
+        {
+          "hover:bg-orange-600 dark:hover:bg-orange-300 hover:border-orange-600 dark:hover:border-orange-300":
+            props.severity === "warning" &&
+            !props.text &&
+            !props.outlined &&
+            !props.plain,
+        },
+        {
+          "focus:ring-orange-400/50 dark:focus:ring-orange-300/50":
+            props.severity === "warning",
+        },
+        // Text & Outlined Button
+        {
+          "hover:bg-orange-300/20":
+            (props.text || props.outlined) &&
+            props.severity === "warning" &&
+            !props.plain,
+        },
+
+        // Help
+        {
+          "hover:bg-purple-600 dark:hover:bg-purple-300 hover:border-purple-600 dark:hover:border-purple-300":
+            props.severity === "help" &&
+            !props.text &&
+            !props.outlined &&
+            !props.plain,
+        },
+        {
+          "focus:ring-purple-400/50 dark:focus:ring-purple-300/50":
+            props.severity === "help",
+        },
+        // Text & Outlined Button
+        {
+          "hover:bg-purple-300/20":
+            (props.text || props.outlined) &&
+            props.severity === "help" &&
+            !props.plain,
+        },
+
+        // Danger
+        {
+          "hover:bg-red-600 dark:hover:bg-red-300 hover:border-red-600 dark:hover:border-red-300":
+            props.severity === "danger" &&
+            !props.text &&
+            !props.outlined &&
+            !props.plain,
+        },
+        {
+          "focus:ring-red-400/50 dark:focus:ring-red-300/50":
+            props.severity === "danger",
+        },
+        // Text & Outlined Button
+        {
+          "hover:bg-red-300/20":
+            (props.text || props.outlined) &&
+            props.severity === "danger" &&
+            !props.plain,
+        },
+
+        // Disabled
+        { "opacity-60 pointer-events-none cursor-default": context.disabled },
+
+        // Transitions
+        "transition duration-200 ease-in-out",
+        parent.state.d_visible ? "rotate-45" : "rotate-0",
+
+        // Misc
+        "cursor-pointer overflow-hidden select-none",
+      ],
+    }),
+    label: ({ props }) => ({
+      class: [
+        "duration-200",
+        "font-bold",
+        {
+          "hover:underline": props.link,
+        },
+        {
+          "flex-1": props.label !== null,
+          "invisible w-0": props.label == null,
+        },
+      ],
+    }),
+    icon: ({ props }) => ({
+      class: [
+        "mx-0",
+        {
+          "mr-2": props.iconPos == "left" && props.label != null,
+          "ml-2 order-1": props.iconPos == "right" && props.label != null,
+          "mb-2": props.iconPos == "top" && props.label != null,
+          "mt-2": props.iconPos == "bottom" && props.label != null,
+        },
+      ],
+    }),
+    loadingicon: ({ props }) => ({
+      class: [
+        "h-4 w-4",
+        "mx-0",
+        {
+          "mr-2": props.iconPos == "left" && props.label != null,
+          "ml-2 order-1": props.iconPos == "right" && props.label != null,
+          "mb-2": props.iconPos == "top" && props.label != null,
+          "mt-2": props.iconPos == "bottom" && props.label != null,
+        },
+        "animate-spin",
+      ],
+    }),
+    badge: ({ props }) => ({
+      class: [
+        {
+          "ml-2 w-4 h-4 leading-none flex items-center justify-center":
+            props.badge,
+        },
+      ],
+    }),
+  },
+  menu: {
+    class: [
+      // Spacing
+      "m-0 p-0",
+
+      // Layout & Flexbox
+      "list-none flex items-center justify-center",
+
+      // Transitions
+      "transition delay-200",
+
+      // Z-Index (Positioning)
+      "z-20",
+    ],
+  },
+  menuitem: ({ props, context }) => ({
+    class: [
+      "transform transition-transform duration-200 ease-out transition-opacity duration-800",
+
+      // Conditional Appearance
+      context.hidden ? "opacity-0 scale-0" : "opacity-100 scale-100",
+
+      // Conditional Spacing
+      {
+        "my-1 first:mb-2": props.direction == "up" && props.type == "linear",
+        "my-1 first:mt-2": props.direction == "down" && props.type == "linear",
+        "mx-1 first:mr-2": props.direction == "left" && props.type == "linear",
+        "mx-1 first:ml-2": props.direction == "right" && props.type == "linear",
+      },
+
+      // Conditional Positioning
+      { absolute: props.type !== "linear" },
+    ],
+  }),
+  action: {
+    class: [
+      // Flexbox & Alignment
+      "flex items-center justify-center",
+
+      // Size
+      "w-12 h-12",
+
+      // Shape
+      "rounded-full relative overflow-hidden",
+
+      // Appearance
+      "bg-surface-600 dark:bg-surface-0/80 text-white dark:text-surface-900/80",
+
+      // Hover Effects
+      "hover:bg-surface-700 dark:hover:bg-surface-200/80",
+    ],
+  },
+  mask: ({ state }) => ({
+    class: [
+      // Base Styles
+      "absolute left-0 top-0 w-full h-full transition-opacity duration-250 ease-in-out bg-black/40 z-0",
+
+      // Conditional Appearance
+      {
+        "opacity-0 pointer-events-none": !state.d_visible,
+        "opacity-100 transition-opacity duration-400 ease-in-out":
+          state.d_visible,
+      },
+    ],
+  }),
+};