@fy-/fws-vue 0.3.0 → 0.3.1

package/presets/Lara/splitter/index.js

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

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

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

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

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

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

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