@fy-/fws-vue 0.1.3 → 0.1.5

package/presets/Lara/splitter/index.js

@@ -0,0 +1,64 @@
+export default {
+  root: ({ context }) => ({
+    class: [
+      // Colors
+      "bg-surface-0",
+      "dark:bg-surface-900",
+      "text-surface-700",
+      "dark:text-surface-0/80",
+
+      // Shape
+      "rounded-lg",
+
+      // Borders (Conditional)
+      {
+        "border border-solid border-surface-50 dark:border-surface-700":
+          !context.nested,
+      },
+
+      // Nested
+      { "flex grow border-0": context.nested },
+    ],
+  }),
+
+  gutter: ({ props }) => ({
+    class: [
+      // Flexbox
+      "flex",
+      "items-center",
+      "justify-center",
+      "shrink-0",
+
+      // Colors
+      "bg-surface-50",
+      "dark:bg-surface-800",
+
+      // Transitions
+      "transition-all",
+      "duration-200",
+
+      // Misc
+      {
+        "cursor-col-resize": props.layout == "horizontal",
+        "cursor-row-resize": props.layout !== "horizontal",
+      },
+    ],
+  }),
+  gutterhandler: ({ props }) => ({
+    class: [
+      // Colors
+      "bg-surface-100",
+      "dark:bg-surface-600",
+
+      // Transitions
+      "transition-all",
+      "duration-200",
+
+      // Sizing (Conditional)
+      {
+        "h-7": props.layout == "horizontal",
+        "w-7 h-2": props.layout !== "horizontal",
+      },
+    ],
+  }),
+};

package/presets/Lara/stepper/index.js

@@ -0,0 +1,183 @@
+export default {
+  root: ({ props }) => ({
+    class: [
+      "flex-1",
+      props.orientation === "vertical" ? "flex-col" : "flex-row",
+    ],
+  }),
+  nav: {
+    class: [
+      // Flexbox
+      "flex",
+      "justify-between",
+      "items-center",
+
+      // Spacing
+      "m-0",
+      "p-0",
+
+      // Positioning
+      "relative",
+
+      // Lists
+      "list-none",
+
+      // Overflow
+      "overflow-x-auto",
+    ],
+  },
+  stepperpanel: {
+    panel: ({ context, parent }) => ({
+      class: [
+        context.active ? "flex-1" : "",
+        parent.props.orientation === "vertical"
+          ? "flex flex-col flex-initial"
+          : "",
+      ],
+    }),
+    header: ({ parent, context }) => ({
+      class: [
+        // Position
+        "relative",
+
+        // Flexbox
+        "flex",
+        "items-center",
+        context.last ? "flex-initial" : "flex-1",
+        parent.props.orientation === "vertical" ? "flex-initial" : "",
+
+        // Spacing
+        "p-2",
+      ],
+    }),
+    action: {
+      class: [
+        // Borders
+        "border-0",
+        "border-none",
+
+        // Flexbox
+        "inline-flex",
+        "items-center",
+
+        // Text
+        "text-decoration-none",
+
+        // Transitions
+        "transition",
+        "transition-shadow",
+        "duration-200",
+
+        // Shape
+        "rounded-md",
+
+        // Backgrounds
+        "bg-transparent",
+
+        // Focus
+        "outline-none",
+      ],
+    },
+    number: ({ context }) => ({
+      class: [
+        // Flexbox
+        "flex",
+        "items-center",
+        "justify-center",
+
+        // Colors (Conditional)
+        context.active
+          ? "bg-primary-500 dark:bg-primary-400 text-surface-0 dark:text-surface-900"
+          : "border border-surface-200 dark:border-surface-700 text-surface-900 dark:text-surface-0", // Adjust colors as needed
+
+        // Size and Shape
+        "min-w-[2rem]",
+        "h-[2rem]",
+        "line-height-[2rem]",
+        "rounded-full",
+
+        // Text
+        "text-lg",
+
+        // Borders
+        context.active ? "border-0 border-none" : "border-solid border-2",
+
+        // Transitions
+        "transition",
+        "transition-colors",
+        "transition-shadow",
+        "duration-200",
+      ],
+    }),
+    title: ({ context }) => ({
+      class: [
+        // Layout
+        "block",
+        "whitespace-nowrap",
+        "overflow-hidden",
+        "text-ellipsis",
+        "max-w-full",
+
+        // Spacing
+        "ml-2",
+
+        // Text
+        context.active
+          ? "text-surface-900 dark:text-surface-0"
+          : "text-surface-700 dark:text-surface-0/80",
+        "font-bold",
+
+        // Transitions
+        "transition",
+        "transition-colors",
+        "transition-shadow",
+        "duration-200",
+      ],
+    }),
+    separator: ({ context, state, parent }) => ({
+      class: [
+        // Colors (Conditional for active step)
+        state.d_activeStep <= context.index
+          ? "bg-surface-200 dark:bg-surface-700"
+          : "bg-primary-500 dark:bg-primary-400",
+
+        // Conditional for Vertical Orientation
+        parent.props.orientation === "vertical"
+          ? ["flex-none", "w-[2px]", "h-auto", "ml-[calc(1.29rem+2px)]"]
+          : ["flex-1", "w-full", "h-[2px]", "ml-4"],
+
+        // Transitions
+        "transition-shadow",
+        "duration-200",
+      ],
+    }),
+    transition: {
+      class: [
+        "flex flex-1",
+        "bg-surface-0 dark:bg-surface-800",
+        "text-surface-900 dark:text-surface-0",
+      ],
+      enterFromClass: "max-h-0",
+      enterActiveClass:
+        "overflow-hidden transition-[max-height] duration-1000 ease-[cubic-bezier(0.42,0,0.58,1)]",
+      enterToClass: "max-h-[1000px]",
+      leaveFromClass: "max-h-[1000px]",
+      leaveActiveClass:
+        "overflow-hidden transition-[max-height] duration-[450ms] ease-[cubic-bezier(0,1,0,1)]",
+      leaveToClass: "max-h-0",
+    },
+    content: ({ parent }) => ({
+      class: [parent.props.orientation === "vertical" ? "w-full pl-4" : ""],
+    }),
+  },
+  panelcontainer: {
+    class: [
+      // Colors
+      "bg-surface-0 dark:bg-surface-800",
+      "text-surface-900 dark:text-surface-0",
+
+      // Spacing
+      "p-4",
+    ],
+  },
+};

package/presets/Lara/steps/index.js

@@ -0,0 +1,115 @@
+export default {
+  root: {
+    class: "relative",
+  },
+  menu: {
+    class: "p-0 m-0 list-none flex",
+  },
+  menuitem: {
+    class: [
+      // Flexbox and Position
+      "relative",
+      "flex",
+      "justify-center",
+      "flex-1",
+      "overflow-hidden",
+
+      // Before
+      "before:border-t",
+      "before:border-surface-200",
+      "before:dark:border-surface-700",
+      "before:w-full",
+      "before:absolute",
+      "before:top-1/2",
+      "before:left-0",
+      "before:transform",
+      "before:-mt-4",
+    ],
+  },
+  action: ({ props }) => ({
+    class: [
+      // Flexbox
+      "inline-flex items-center",
+      "flex-col",
+
+      // Transitions and Shape
+      "transition-shadow",
+      "rounded-md",
+
+      // Colors
+      "bg-surface-0",
+      "dark:bg-transparent",
+
+      // States
+      "focus:outline-none focus:outline-offset-0 focus:ring",
+      "focus:ring-primary-400/50 dark:focus:ring-primary-300/50",
+
+      // Misc
+      "overflow-hidden",
+      { "cursor-pointer": !props.readonly },
+    ],
+  }),
+  step: ({ context, props }) => ({
+    class: [
+      // Flexbox
+      "flex items-center justify-center",
+
+      // Position
+      "z-20",
+
+      // Shape
+      "rounded-full",
+      "border",
+
+      // Size
+      "w-[2rem]",
+      "h-[2rem]",
+      "text-sm",
+      "leading-[2rem]",
+
+      // Colors
+      {
+        "text-surface-400 dark:text-white/60": !context.active,
+        "border-surface-100 dark:border-surface-700": !context.active,
+        "bg-surface-0 dark:bg-surface-800": !context.active,
+        "bg-primary-500 dark:bg-primary-400": context.active,
+        "border-primary-500 dark:border-primary-400": context.active,
+        "text-surface-0 dark:text-surface-900": context.active,
+      },
+
+      // States
+      {
+        "hover:border-surface-300 dark:hover:border-surface-500":
+          !context.active && !props.readonly,
+      },
+
+      // Transition
+      "transition-colors duration-200 ease-in-out",
+    ],
+  }),
+  label: ({ context }) => ({
+    class: [
+      // Font
+      "leading-5",
+      { "font-bold": context.active },
+
+      // Display
+      "block",
+
+      // Spacing
+      "mt-2",
+
+      // Colors
+      {
+        "text-surface-400 dark:text-white/60": !context.active,
+        "text-surface-800 dark:text-white/80": context.active,
+      },
+
+      // Text and Overflow
+      "whitespace-nowrap",
+      "overflow-hidden",
+      "overflow-ellipsis",
+      "max-w-full",
+    ],
+  }),
+};

package/presets/Lara/tabmenu/index.js

@@ -0,0 +1,82 @@
+export default {
+  root: {
+    class: "overflow-x-auto",
+  },
+  menu: {
+    class: [
+      // Flexbox
+      "flex flex-1",
+
+      // Spacing
+      "list-none",
+      "p-0 m-0",
+
+      // Colors
+      "bg-surface-0 dark:bg-surface-800",
+      "border-b-2 border-surface-200 dark:border-surface-700",
+      "text-surface-900 dark:text-surface-0/80",
+    ],
+  },
+  menuitem: {
+    class: "mr-0",
+  },
+  action: ({ context, state }) => ({
+    class: [
+      "relative",
+
+      // Font
+      "font-bold",
+
+      // Flexbox and Alignment
+      "flex items-center",
+
+      // Spacing
+      "p-5",
+      "-mb-[2px]",
+
+      // Shape
+      "border-b-2",
+      "rounded-t-md",
+
+      // Colors and Conditions
+      {
+        "border-surface-200 dark:border-surface-700":
+          state.d_activeIndex !== context.index,
+        "bg-surface-0 dark:bg-surface-800":
+          state.d_activeIndex !== context.index,
+        "text-surface-700 dark:text-surface-0/80":
+          state.d_activeIndex !== context.index,
+
+        "bg-surface-0 dark:bg-surface-800":
+          state.d_activeIndex === context.index,
+        "border-primary-500 dark:border-primary-400":
+          state.d_activeIndex === context.index,
+        "text-primary-500 dark:text-primary-400":
+          state.d_activeIndex === context.index,
+      },
+
+      // States
+      "focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring focus-visible:ring-inset",
+      "focus-visible:ring-primary-400/50 dark:focus-visible:ring-primary-300/50",
+      {
+        "hover:bg-surface-0 dark:hover:bg-surface-800/80":
+          state.d_activeIndex !== context.index,
+        "hover:border-surface-400 dark:hover:border-primary-400":
+          state.d_activeIndex !== context.index,
+        "hover:text-surface-900 dark:hover:text-surface-0":
+          state.d_activeIndex !== context.index,
+      },
+
+      // Transitions
+      "transition-all duration-200",
+
+      // Misc
+      "cursor-pointer select-none text-decoration-none",
+      "overflow-hidden",
+      "user-select-none",
+    ],
+  }),
+  icon: {
+    class: "mr-2",
+  },
+};

package/presets/Lara/tabview/index.js

@@ -0,0 +1,166 @@
+export default {
+  navContainer: ({ props }) => ({
+    class: [
+      // Position
+      "relative",
+
+      // Misc
+      { "overflow-hidden": props.scrollable },
+    ],
+  }),
+  navContent: {
+    class: [
+      // Overflow and Scrolling
+      "overflow-y-hidden overscroll-contain",
+      "overscroll-auto",
+      "scroll-smooth",
+      "[&::-webkit-scrollbar]:hidden",
+    ],
+  },
+  previousButton: {
+    class: [
+      // Flexbox and Alignment
+      "flex items-center justify-center",
+
+      // Position
+      "!absolute",
+      "top-0 left-0",
+      "z-20",
+
+      // Size and Shape
+      "h-full w-12",
+      "rounded-none",
+
+      // Colors
+      "bg-surface-0 dark:bg-surface-800",
+      "text-primary-500 dark:text-primary-400",
+      "shadow-md",
+    ],
+  },
+  nextButton: {
+    class: [
+      // Flexbox and Alignment
+      "flex items-center justify-center",
+
+      // Position
+      "!absolute",
+      "top-0 right-0",
+      "z-20",
+
+      // Size and Shape
+      "h-full w-12",
+      "rounded-none",
+
+      // Colors
+      "bg-surface-0 dark:bg-surface-800",
+      "text-primary-500 dark:text-primary-400",
+      "shadow-md",
+    ],
+  },
+  nav: {
+    class: [
+      // Flexbox
+      "flex flex-1",
+
+      // Spacing
+      "list-none",
+      "p-0 m-0",
+
+      // Colors
+      "bg-surface-0 dark:bg-surface-800",
+      "border-b-2 border-surface-200 dark:border-surface-700",
+      "text-surface-900 dark:text-surface-0/80",
+    ],
+  },
+  tabpanel: {
+    header: ({ props }) => ({
+      class: [
+        // Spacing
+        "mr-0",
+
+        // Misc
+        {
+          "opacity-60 cursor-default user-select-none select-none pointer-events-none":
+            props?.disabled,
+        },
+      ],
+    }),
+    headerAction: ({ parent, context }) => ({
+      class: [
+        "relative",
+
+        // Font
+        "font-bold",
+
+        // Flexbox and Alignment
+        "flex items-center",
+
+        // Spacing
+        "p-5",
+        "-mb-[2px]",
+
+        // Shape
+        "border-b-2",
+        "rounded-t-md",
+
+        // Colors and Conditions
+        {
+          "border-surface-200 dark:border-surface-700":
+            parent.state.d_activeIndex !== context.index,
+          "bg-surface-0 dark:bg-surface-800":
+            parent.state.d_activeIndex !== context.index,
+          "text-surface-700 dark:text-surface-0/80":
+            parent.state.d_activeIndex !== context.index,
+
+          "bg-surface-0 dark:bg-surface-800":
+            parent.state.d_activeIndex === context.index,
+          "border-primary-500 dark:border-primary-400":
+            parent.state.d_activeIndex === context.index,
+          "text-primary-500 dark:text-primary-400":
+            parent.state.d_activeIndex === context.index,
+        },
+
+        // States
+        "focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring focus-visible:ring-inset",
+        "focus-visible:ring-primary-400/50 dark:focus-visible:ring-primary-300/50",
+        {
+          "hover:bg-surface-0 dark:hover:bg-surface-800/80":
+            parent.state.d_activeIndex !== context.index,
+          "hover:border-surface-400 dark:hover:border-primary-400":
+            parent.state.d_activeIndex !== context.index,
+          "hover:text-surface-900 dark:hover:text-surface-0":
+            parent.state.d_activeIndex !== context.index,
+        },
+
+        // Transitions
+        "transition-all duration-200",
+
+        // Misc
+        "cursor-pointer select-none text-decoration-none",
+        "overflow-hidden",
+        "user-select-none",
+      ],
+    }),
+    headerTitle: {
+      class: [
+        // Text
+        "leading-none",
+        "whitespace-nowrap",
+      ],
+    },
+    content: {
+      class: [
+        // Spacing
+        "p-5",
+
+        // Shape
+        "rounded-b-md",
+
+        // Colors
+        "bg-surface-0 dark:bg-surface-800",
+        "text-surface-700 dark:text-surface-0/80",
+        "border-0",
+      ],
+    },
+  },
+};

package/presets/Lara/tag/index.js

@@ -0,0 +1,37 @@
+export default {
+  root: ({ props }) => ({
+    class: [
+      // Font
+      "text-xs font-bold",
+
+      // Alignments
+      "inline-flex items-center justify-center",
+
+      // Spacing
+      "px-2 py-1",
+
+      // Shape
+      {
+        "rounded-md": !props.rounded,
+        "rounded-full": props.rounded,
+      },
+
+      // Colors
+      "text-white dark:text-surface-900",
+      {
+        "bg-primary-500 dark:bg-primary-400":
+          props.severity == null || props.severity == "primary",
+        "bg-green-500 dark:bg-green-400": props.severity == "success",
+        "bg-blue-500 dark:bg-blue-400": props.severity == "info",
+        "bg-orange-500 dark:bg-orange-400": props.severity == "warning",
+        "bg-red-500 dark:bg-red-400": props.severity == "danger",
+      },
+    ],
+  }),
+  value: {
+    class: "leading-normal",
+  },
+  icon: {
+    class: "mr-1 text-sm",
+  },
+};

package/presets/Lara/terminal/index.js

@@ -0,0 +1,60 @@
+export default {
+  root: {
+    class: [
+      // Spacing
+      "p-5",
+
+      // Shape
+      "rounded-md",
+
+      // Color
+      "bg-surface-900 text-white",
+      "border border-surface-700",
+
+      // Sizing & Overflow
+      "h-72 overflow-auto",
+    ],
+  },
+  container: {
+    class: [
+      // Flexbox
+      "flex items-center",
+    ],
+  },
+  prompt: {
+    class: [
+      // Color
+      "text-surface-400",
+    ],
+  },
+  response: {
+    class: [
+      // Color
+      "text-primary-400",
+    ],
+  },
+  command: {
+    class: [
+      // Color
+      "text-primary-400",
+    ],
+  },
+  commandtext: {
+    class: [
+      // Flexbox
+      "flex-1 shrink grow-0",
+
+      // Shape
+      "border-0",
+
+      // Spacing
+      "p-0",
+
+      // Color
+      "bg-transparent text-inherit",
+
+      // Outline
+      "outline-none",
+    ],
+  },
+};