@fy-/fws-vue 0.1.3 → 0.1.5

package/presets/Lara/menubar/index.js

@@ -0,0 +1,181 @@
+export default {
+  root: {
+    class: [
+      "relative",
+
+      // Flexbox
+      "flex",
+      "items-center",
+
+      // Spacing
+      "p-2",
+
+      // Shape
+      "rounded-md",
+
+      // Color
+      "bg-surface-50 dark:bg-surface-700",
+      "border border-surface-200 dark:border-surface-700",
+    ],
+  },
+  menu: ({ props }) => ({
+    class: [
+      // Flexbox
+      "sm:flex",
+      "items-center",
+      "flex-wrap",
+      "flex-col sm:flex-row",
+      { hidden: !props?.mobileActive, flex: props?.mobileActive },
+
+      // Position
+      "absolute sm:relative",
+      "top-full left-0",
+      "sm:top-auto sm:left-auto",
+
+      // Size
+      "w-full sm:w-auto",
+
+      // Spacing
+      "m-0",
+      "py-1 sm:py-0 sm:p-0",
+      "list-none",
+
+      // Shape
+      "shadow-md sm:shadow-none",
+      "border-0",
+
+      // Color
+      "bg-surface-0 dark:bg-surface-700 sm:bg-transparent",
+
+      // Misc
+      "outline-none",
+    ],
+  }),
+  menuitem: {
+    class: "sm:relative sm:w-auto w-full static",
+  },
+  content: ({ props, context }) => ({
+    class: [
+      // Shape
+      { "rounded-md": props.root },
+
+      //  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-all",
+      "duration-200",
+    ],
+  }),
+  action: ({ context }) => ({
+    class: [
+      "relative",
+
+      // Flexbox
+      "flex",
+      "items-center",
+
+      // Spacing
+      "py-3",
+      "px-5",
+
+      // Size
+      {
+        "pl-9 sm:pl-5": context.level === 1,
+        "pl-14 sm:pl-5": context.level === 2,
+      },
+      "leading-none",
+
+      // Misc
+      "select-none",
+      "cursor-pointer",
+      "no-underline ",
+      "overflow-hidden",
+    ],
+  }),
+  icon: {
+    class: "mr-2",
+  },
+  submenuicon: ({ props }) => ({
+    class: [
+      {
+        "ml-auto sm:ml-2": props.root,
+        "ml-auto": !props.root,
+      },
+    ],
+  }),
+  submenu: ({ props }) => ({
+    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",
+      { "sm:absolute sm:left-full sm:top-0": props.level > 1 },
+
+      // Color
+      "bg-surface-0 dark:bg-surface-700",
+    ],
+  }),
+  separator: {
+    class: "border-t border-surface-200 dark:border-surface-600 my-1",
+  },
+  button: {
+    class: [
+      // Flexbox
+      "flex sm:hidden",
+      "items-center justify-center",
+
+      // Size
+      "w-8",
+      "h-8",
+
+      // Shape
+      "rounded-full",
+      // Color
+      "text-surface-500 dark:text-white/80",
+
+      // States
+      "hover:text-surface-600 dark:hover:text-white/60",
+      "hover:bg-surface-100 dark:hover:bg-surface-600/80",
+      "focus:outline-none focus:outline-offset-0",
+      "focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50",
+
+      // Transitions
+      "transition duration-200 ease-in-out",
+
+      // Misc
+      "cursor-pointer",
+      "no-underline",
+    ],
+  },
+  end: {
+    class: "ml-auto self-center",
+  },
+};

package/presets/Lara/message/index.js

@@ -0,0 +1,87 @@
+export default {
+  root: ({ props }) => ({
+    class: [
+      // Spacing and Shape
+      "my-4 mx-0",
+      "rounded-md",
+      "border-solid border-0 border-l-[6px]",
+
+      // Colors
+      {
+        "bg-blue-100/70 dark:bg-blue-500/20": props.severity == "info",
+        "bg-green-100/70 dark:bg-green-500/20": props.severity == "success",
+        "bg-orange-100/70 dark:bg-orange-500/20": props.severity == "warn",
+        "bg-red-100/70 dark:bg-red-500/20": props.severity == "error",
+      },
+      {
+        "border-blue-500 dark:border-blue-400": props.severity == "info",
+        "border-green-500 dark:border-green-400": props.severity == "success",
+        "border-orange-500 dark:border-orange-400": props.severity == "warn",
+        "border-red-500 dark:border-red-400": props.severity == "error",
+      },
+      {
+        "text-blue-700 dark:text-blue-300": props.severity == "info",
+        "text-green-700 dark:text-green-300": props.severity == "success",
+        "text-orange-700 dark:text-orange-300": props.severity == "warn",
+        "text-red-700 dark:text-red-300": props.severity == "error",
+      },
+    ],
+  }),
+  wrapper: {
+    class: [
+      // Flexbox
+      "flex items-center",
+
+      // Spacing
+      "py-5 px-7",
+    ],
+  },
+  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",
+      "font-medium",
+    ],
+  },
+  button: {
+    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",
+    enterActiveClass: "transition-opacity duration-300",
+    leaveFromClass: "max-h-40",
+    leaveActiveClass: "overflow-hidden transition-all duration-300 ease-in",
+    leaveToClass: "max-h-0 opacity-0 !m-0",
+  },
+};

package/presets/Lara/metergroup/index.js

@@ -0,0 +1,110 @@
+export default {
+  root: ({ props }) => ({
+    class: [
+      // Flexbox
+      "flex gap-4",
+
+      {
+        "flex-col": props.orientation == "horizontal",
+        "flex-row": props.orientation == "vertical",
+      },
+    ],
+  }),
+  metercontainer: ({ props }) => ({
+    class: [
+      // Flexbox
+      "flex",
+
+      { "flex-col": props.orientation === "vertical" },
+
+      // Sizing
+      { "w-2 h-full": props.orientation === "vertical" },
+      { "h-2": props.orientation === "horizontal" },
+
+      // Colors
+      "bg-gray-200 dark:bg-gray-700",
+
+      // Border Radius
+      "rounded-lg",
+    ],
+  }),
+  meter: ({ props }) => ({
+    class: [
+      // Shape
+      "border-0",
+
+      // Rounded Corners - Horizontal
+      {
+        "first:rounded-l-lg last:rounded-r-lg":
+          props.orientation === "horizontal",
+      },
+
+      // Rounded Corners - Vertical
+      {
+        "first:rounded-t-lg last:rounded-b-lg":
+          props.orientation === "vertical",
+      },
+
+      // Colors
+      "bg-primary-500 dark:bg-primary-400",
+    ],
+  }),
+  labellist: ({ props }) => ({
+    class: [
+      // Display & Flexbox
+      "flex flex-wrap",
+
+      { "gap-4": props.labelOrientation === "horizontal" },
+
+      { "gap-2": props.labelOrientation === "vertical" },
+
+      { "flex-col": props.labelOrientation === "vertical" },
+
+      // Conditional Alignment - Horizontal
+      {
+        "align-end":
+          props.labelOrientation === "horizontal" &&
+          props.labelPosition === "end",
+        "align-start":
+          props.labelOrientation === "horizontal" &&
+          props.labelPosition === "start",
+      },
+
+      // Conditional Alignment - Vertical
+      {
+        "justify-end":
+          props.labelOrientation === "vertical" &&
+          props.labelPosition === "end",
+        "justify-start":
+          props.labelOrientation === "vertical" &&
+          props.labelPosition === "start",
+      },
+
+      // List Styling
+      "m-0 p-0 list-none",
+    ],
+  }),
+  labellistitem: {
+    class: [
+      // Flexbox
+      "inline-flex",
+      "items-center",
+      "gap-2",
+    ],
+  },
+  labellisttype: {
+    class: [
+      // Display
+      "inline-flex",
+
+      // Background Color
+      "bg-primary-500 dark:bg-primary-400",
+
+      // Size
+      "w-2 h-2",
+
+      // Rounded Shape
+      "rounded-full",
+    ],
+  },
+};