@fy-/fws-vue 0.1.2 → 0.1.4

package/presets/Lara/textarea/index.js

@@ -0,0 +1,39 @@
+export default {
+  root: ({ context, props }) => ({
+    class: [
+      // Font
+      "font-sans leading-none",
+
+      // Spacing
+      "m-0",
+      "p-3",
+
+      // Shape
+      "rounded-md",
+
+      // Colors
+      "text-surface-600 dark:text-surface-200",
+      "placeholder:text-surface-400 dark:placeholder:text-surface-500",
+      "bg-surface-0 dark:bg-surface-900",
+      "border",
+      { "border-surface-300 dark:border-surface-600": !props.invalid },
+
+      // Invalid State
+      { "border-red-500 dark:border-red-400": props.invalid },
+
+      // States
+      {
+        "hover:border-primary-500 dark:hover:border-primary-400":
+          !context.disabled && !props.invalid,
+        "focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-500/50 dark:focus:ring-primary-400/50":
+          !context.disabled,
+        "opacity-60 select-none pointer-events-none cursor-default":
+          context.disabled,
+      },
+
+      // Misc
+      "appearance-none",
+      "transition-colors duration-200",
+    ],
+  }),
+};

package/presets/Lara/tieredmenu/index.js

@@ -0,0 +1,125 @@
+export default {
+  root: {
+    class: [
+      // Shape
+      "rounded-md",
+
+      // Size
+      "min-w-[12rem]",
+      "py-1",
+
+      // Colors
+      "bg-surface-0 dark:bg-surface-700",
+      "border border-surface-200 dark:border-surface-700",
+    ],
+  },
+  menu: {
+    class: [
+      // Spacings and Shape
+      "list-none",
+      "m-0",
+      "p-0",
+      "outline-none",
+    ],
+  },
+  menuitem: {
+    class: [
+      // Position
+      "relative",
+    ],
+  },
+  content: ({ context }) => ({
+    class: [
+      // Shape
+      "rounded-none",
+
+      //  Colors
+      {
+        "text-surface-500 dark:text-white/70":
+          !context.focused && !context.active,
+        "text-surface-500 dark:text-white/70 bg-surface-200 dark:bg-surface-600/90":
+          context.focused && !context.active,
+        "text-primary-700 dark:text-surface-0/80 bg-primary-50 dark:bg-primary-400/30":
+          context.focused && context.active,
+        "text-primary-700 dark:text-surface-0/80 bg-primary-50 dark:bg-primary-400/30":
+          !context.focused && context.active,
+      },
+
+      // Hover States
+      {
+        "hover:bg-surface-100 dark:hover:bg-surface-600/80": !context.active,
+        "hover:bg-primary-500/50 dark:hover:bg-primary-300/30 text-primary-700 dark:text-surface-0/80":
+          context.active,
+      },
+
+      // Transitions
+      "transition-shadow",
+      "duration-200",
+    ],
+  }),
+  action: {
+    class: [
+      "relative",
+      // Flexbox
+
+      "flex",
+      "items-center",
+
+      // Spacing
+      "py-3",
+      "px-5",
+
+      // Color
+      "text-surface-700 dark:text-white/80",
+
+      // Misc
+      "no-underline",
+      "overflow-hidden",
+      "cursor-pointer",
+      "select-none",
+    ],
+  },
+  icon: {
+    class: [
+      // Spacing
+      "mr-2",
+
+      // Color
+      "text-surface-600 dark:text-white/70",
+    ],
+  },
+  label: {
+    class: ["leading-none"],
+  },
+  submenuicon: {
+    class: [
+      // Position
+      "ml-auto",
+    ],
+  },
+  submenu: {
+    class: [
+      // Size
+      "w-full sm:w-48",
+
+      // Spacing
+      "py-1",
+      "m-0",
+      "list-none",
+
+      // Shape
+      "shadow-none sm:shadow-md",
+      "border-0",
+
+      // Position
+      "static sm:absolute",
+      "z-10",
+
+      // Color
+      "bg-surface-0 dark:bg-surface-700",
+    ],
+  },
+  separator: {
+    class: "border-t border-surface-200 dark:border-surface-600 my-1",
+  },
+};

package/presets/Lara/timeline/index.js

@@ -0,0 +1,107 @@
+export default {
+  root: ({ props }) => ({
+    class: [
+      "flex grow",
+      {
+        "flex-col": props.layout === "vertical",
+        "flex-row flex-1": props.layout === "horizontal",
+      },
+    ],
+  }),
+  event: ({ props, context }) => ({
+    class: [
+      "flex relative min-h-[70px]",
+      {
+        "flex-row-reverse":
+          props.align === "right" ||
+          (props.layout === "vertical" &&
+            props.align === "alternate" &&
+            context.index % 2 === 1),
+        "flex-col flex-1": props.layout === "horizontal",
+        "flex-col-reverse ":
+          props.align === "bottom" ||
+          (props.layout === "horizontal" &&
+            props.align === "alternate" &&
+            context.index % 2 === 1),
+      },
+    ],
+  }),
+  opposite: ({ props, context }) => ({
+    class: [
+      "flex-1",
+      {
+        "px-4": props.layout === "vertical",
+        "py-4": props.layout === "horizontal",
+      },
+      {
+        "text-right":
+          props.align === "left" ||
+          (props.layout === "vertical" &&
+            props.align === "alternate" &&
+            context.index % 2 === 0),
+        "text-left":
+          props.align === "right" ||
+          (props.layout === "vertical" &&
+            props.align === "alternate" &&
+            context.index % 2 === 1),
+      },
+    ],
+  }),
+  separator: ({ props }) => ({
+    class: [
+      "flex items-center flex-initial",
+      {
+        "flex-col": props.layout === "vertical",
+        "flex-row": props.layout === "horizontal",
+      },
+    ],
+  }),
+  marker: {
+    class: [
+      // Display & Flexbox
+      "flex self-baseline",
+
+      // Size
+      "w-4 h-4",
+
+      // Appearance
+      "rounded-full border-2 border-primary-500 bg-surface-0 dark:border-primary-300 dark:bg-surface-900/40",
+    ],
+  },
+  connector: ({ props }) => ({
+    class: [
+      "grow bg-surface-300 dark:bg-surface-700",
+      {
+        "w-[2px]": props.layout === "vertical",
+        "w-full h-[2px]": props.layout === "horizontal",
+      },
+    ],
+  }),
+  content: ({ props, context }) => ({
+    class: [
+      "flex-1",
+      {
+        "px-4": props.layout === "vertical",
+        "py-4": props.layout === "horizontal",
+      },
+      {
+        "text-left":
+          props.align === "left" ||
+          (props.layout === "vertical" &&
+            props.align === "alternate" &&
+            context.index % 2 === 0),
+        "text-right":
+          props.align === "right" ||
+          (props.layout === "vertical" &&
+            props.align === "alternate" &&
+            context.index % 2 === 1),
+      },
+      {
+        "min-h-0":
+          props.layout === "vertical" && context.index === context.count,
+        "grow-0":
+          props.layout === "horizontal" && context.index === context.count,
+      },
+    ],
+  }),
+};

package/presets/Lara/toast/index.js

@@ -0,0 +1,113 @@
+export default {
+  root: ({ props }) => ({
+    class: [
+      // Size and Shape
+      "w-96 rounded-md",
+
+      // Positioning
+      {
+        "-translate-x-2/4":
+          props.position == "top-center" || props.position == "bottom-center",
+      },
+    ],
+  }),
+  container: ({ props }) => ({
+    class: [
+      "my-4 rounded-md w-full",
+      "border-solid border-0 border-l-[6px]",
+      "backdrop-blur-[10px] shadow-md",
+
+      // Colors
+      {
+        "bg-blue-100/70 dark:bg-blue-500/20": props.message.severity == "info",
+        "bg-green-100/70 dark:bg-green-500/20":
+          props.message.severity == "success",
+        "bg-orange-100/70 dark:bg-orange-500/20":
+          props.message.severity == "warn",
+        "bg-red-100/70 dark:bg-red-500/20": props.message.severity == "error",
+      },
+      {
+        "border-blue-500 dark:border-blue-400":
+          props.message.severity == "info",
+        "border-green-500 dark:border-green-400":
+          props.message.severity == "success",
+        "border-orange-500 dark:border-orange-400":
+          props.message.severity == "warn",
+        "border-red-500 dark:border-red-400": props.message.severity == "error",
+      },
+      {
+        "text-blue-700 dark:text-blue-300": props.message.severity == "info",
+        "text-green-700 dark:text-green-300":
+          props.message.severity == "success",
+        "text-orange-700 dark:text-orange-300":
+          props.message.severity == "warn",
+        "text-red-700 dark:text-red-300": props.message.severity == "error",
+      },
+    ],
+  }),
+  content: ({ props }) => ({
+    class: [
+      "flex p-4",
+      {
+        "items-start": props.message.summary,
+        "items-center": !props.message.summary,
+      },
+    ],
+  }),
+  icon: {
+    class: [
+      // Sizing and Spacing
+      "w-6 h-6",
+      "text-lg leading-none mr-2 shrink-0",
+    ],
+  },
+  text: {
+    class: [
+      // Font and Text
+      "text-base leading-none",
+      "ml-2",
+      "flex-1",
+    ],
+  },
+  summary: {
+    class: "font-bold block",
+  },
+  detail: ({ props }) => ({
+    class: ["block", { "mt-2": props.message.summary }],
+  }),
+  closebutton: {
+    class: [
+      // Flexbox
+      "flex items-center justify-center",
+
+      // Size
+      "w-8 h-8",
+
+      // Spacing and Misc
+      "ml-auto  relative",
+
+      // Shape
+      "rounded-full",
+
+      // Colors
+      "bg-transparent",
+
+      // Transitions
+      "transition duration-200 ease-in-out",
+
+      // States
+      "hover:bg-surface-0/50 dark:hover:bg-surface-0/10",
+
+      // Misc
+      "overflow-hidden",
+    ],
+  },
+  transition: {
+    enterFromClass: "opacity-0 translate-y-2/4",
+    enterActiveClass: "transition-[transform,opacity] duration-300",
+    leaveFromClass: "max-h-[1000px]",
+    leaveActiveClass:
+      "!transition-[max-height_.45s_cubic-bezier(0,1,0,1),opacity_.3s,margin-bottom_.3s] overflow-hidden",
+    leaveToClass: "max-h-0 opacity-0 mb-0",
+  },
+};

package/presets/Lara/togglebutton/index.js

@@ -0,0 +1,100 @@
+export default {
+  root: {
+    class: [
+      "relative",
+
+      // Alignment
+      "inline-flex",
+      "align-bottom",
+
+      // Misc
+      "cursor-pointer",
+      "select-none",
+    ],
+  },
+  box: ({ props }) => ({
+    class: [
+      // Alignments
+      "items-center inline-flex flex-1 text-center align-bottom justify-center",
+
+      // Sizes & Spacing
+      "px-4 py-3 leading-none",
+
+      // Shapes
+      "rounded-md border",
+
+      // Colors
+      {
+        "bg-surface-0 dark:bg-surface-900 ": !props.modelValue,
+        "border-surface-200 dark:border-surface-700 ":
+          !props.modelValue && !props.invalid,
+        "text-surface-700 dark:text-white/80": !props.modelValue,
+        "bg-primary-500 dark:bg-primary-400 border-primary-500 dark:border-primary-400 text-white dark:text-surface-900":
+          props.modelValue,
+      },
+
+      // Invalid State
+      { "border-red-500 dark:border-red-400": props.invalid },
+
+      // States
+      {
+        "peer-hover:bg-surface-50 dark:peer-hover:bg-surface-800/80 peer-hover:border-surface-200 dark:peer-hover:bg-surface-700 peer-hover:text-surface-700 dark:peer-hover:text-white/80":
+          !props.modelValue && !props.invalid,
+        "peer-hover:bg-primary-600 peer-hover:border-primary-600 dark:peer-hover:bg-primary-300 dark:peer-hover:border-primary-300":
+          props.modelValue,
+        "peer-focus-visible:ring peer-focus-visible:ring-primary-400/50 dark:peer-focus-visible:ring-primary-300/50":
+          !props.disabled,
+      },
+
+      // Transitions
+      "transition-all duration-200",
+
+      // Misc
+      {
+        "cursor-pointer": !props.disabled,
+        "opacity-60 select-none pointer-events-none cursor-default":
+          props.disabled,
+      },
+    ],
+  }),
+  label: {
+    class: "font-bold text-center w-full",
+  },
+  input: {
+    class: [
+      "peer",
+
+      // Size
+      "w-full ",
+      "h-full",
+
+      // Position
+      "absolute",
+      "top-0 left-0",
+      "z-10",
+
+      // Spacing
+      "p-0",
+      "m-0",
+
+      // Shape
+      "opacity-0",
+      "rounded-md",
+      "outline-none",
+      "border border-surface-200 dark:border-surface-700",
+
+      // Misc
+      "appearance-none",
+      "cursor-pointer",
+    ],
+  },
+  icon: ({ props }) => ({
+    class: [
+      " mr-2",
+      {
+        "text-surface-600 dark:text-white/70": !props.modelValue,
+        "text-white dark:text-surface-900": props.modelValue,
+      },
+    ],
+  }),
+};

package/presets/Lara/toolbar/index.js

@@ -0,0 +1,28 @@
+export default {
+  root: {
+    class: [
+      // Flex & Alignment
+      "flex items-center justify-between flex-wrap",
+      "gap-2",
+
+      // Spacing
+      "p-5",
+
+      // Shape
+      "rounded-md",
+
+      // Color
+      "bg-surface-50 dark:bg-surface-800",
+      "border border-surface-200 dark:border-surface-700",
+    ],
+  },
+  start: {
+    class: "flex items-center",
+  },
+  center: {
+    class: "flex items-center",
+  },
+  end: {
+    class: "flex items-center",
+  },
+};

package/presets/Lara/tooltip/index.js

@@ -0,0 +1,73 @@
+export default {
+  root: ({ context, props }) => ({
+    class: [
+      // Position and Shadows
+      "absolute",
+      "shadow-md",
+      "p-fadein",
+      // Spacing
+      {
+        "py-0 px-1":
+          context?.right ||
+          context?.left ||
+          (!context?.right &&
+            !context?.left &&
+            !context?.top &&
+            !context?.bottom),
+        "py-1 px-0": context?.top || context?.bottom,
+      },
+    ],
+  }),
+  arrow: ({ context, props }) => ({
+    class: [
+      // Position
+
+      "absolute",
+
+      // Size
+      "w-0",
+      "h-0",
+
+      // Shape
+      "border-transparent",
+      "border-solid",
+      {
+        "border-y-[0.25rem] border-r-[0.25rem] border-l-0 border-r-surface-600":
+          context?.right ||
+          (!context?.right &&
+            !context?.left &&
+            !context?.top &&
+            !context?.bottom),
+        "border-y-[0.25rem] border-l-[0.25rem] border-r-0 border-l-surface-600":
+          context?.left,
+        "border-x-[0.25rem] border-t-[0.25rem] border-b-0 border-t-surface-600":
+          context?.top,
+        "border-x-[0.25rem] border-b-[0.25rem] border-t-0 border-b-surface-600":
+          context?.bottom,
+      },
+
+      // Spacing
+      {
+        "-mt-1 ":
+          context?.right ||
+          (!context?.right &&
+            !context?.left &&
+            !context?.top &&
+            !context?.bottom),
+        "-mt-1": context?.left,
+        "-ml-1": context?.top || context?.bottom,
+      },
+    ],
+  }),
+  text: {
+    class: [
+      "p-3",
+      "bg-surface-600 dark:bg-surface-700",
+      "text-white",
+      "leading-none",
+      "rounded-md",
+      "whitespace-pre-line",
+      "break-words",
+    ],
+  },
+};