@fy-/fws-vue 0.1.3 → 0.1.5

package/presets/Lara/inputswitch/index.js

@@ -0,0 +1,93 @@
+export default {
+  root: ({ props }) => ({
+    class: [
+      "inline-block relative",
+      "w-12 h-7",
+      "rounded-2xl",
+      {
+        "opacity-60 select-none pointer-events-none cursor-default":
+          props.disabled,
+      },
+    ],
+  }),
+  slider: ({ props }) => ({
+    class: [
+      // Position
+      "absolute top-0 left-0 right-0 bottom-0",
+      {
+        "before:transform before:translate-x-5":
+          props.modelValue == props.trueValue,
+      },
+
+      // Shape
+      "rounded-2xl",
+
+      // Before:
+      "before:absolute before:top-1/2 before:left-1",
+      "before:-mt-2.5",
+      "before:h-5 before:w-5",
+      "before:rounded-full",
+      "before:duration-200",
+      "before:bg-surface-0 before:dark:bg-surface-900",
+
+      // Colors
+      "border",
+      {
+        "bg-surface-200 dark:bg-surface-700": !(
+          props.modelValue == props.trueValue
+        ),
+        "bg-primary-500 dark:bg-primary-400":
+          props.modelValue == props.trueValue,
+      },
+
+      { "border-transparent": !props.invalid },
+
+      // Invalid State
+      { "border-red-500 dark:border-red-400": props.invalid },
+
+      // States
+      {
+        "peer-hover:bg-surface-300 dark:peer-hover:bg-surface-600 ":
+          !(props.modelValue == props.trueValue) && !props.disabled,
+      },
+      {
+        "peer-hover:bg-primary-600 dark:peer-hover:bg-surface-300 ":
+          props.modelValue == props.trueValue && !props.disabled,
+      },
+      "peer-focus-visible:ring peer-focus-visible:ring-primary-400/50 dark:peer-focus-visible:ring-primary-300/50",
+
+      // Transition
+      "transition-colors duration-200",
+
+      // Misc
+      "cursor-pointer",
+    ],
+  }),
+  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-[2.5rem]",
+      "outline-none",
+
+      // Misc
+      "appearance-none",
+      "cursor-pointer",
+    ],
+  },
+};

package/presets/Lara/inputtext/index.js

@@ -0,0 +1,61 @@
+export default {
+  root: ({ props, context, parent }) => ({
+    class: [
+      // Font
+      "font-sans leading-none",
+
+      // Flex
+      { "flex-1 w-[1%]": parent.instance.$name == "InputGroup" },
+
+      // Spacing
+      "m-0",
+      {
+        "px-4 py-4": props.size == "large",
+        "px-2 py-2": props.size == "small",
+        "p-3": props.size == null,
+      },
+
+      // Shape
+      { "rounded-md": parent.instance.$name !== "InputGroup" },
+      {
+        "first:rounded-l-md rounded-none last:rounded-r-md":
+          parent.instance.$name == "InputGroup",
+      },
+      {
+        "border-0 border-y border-l last:border-r":
+          parent.instance.$name == "InputGroup",
+      },
+      {
+        "first:ml-0 -ml-px":
+          parent.instance.$name == "InputGroup" && !props.showButtons,
+      },
+
+      // 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 focus:z-10":
+          !context.disabled,
+        "opacity-60 select-none pointer-events-none cursor-default":
+          context.disabled,
+      },
+
+      // Filled State *for FloatLabel
+      { filled: parent.instance?.$name == "FloatLabel" && context.filled },
+
+      // Misc
+      "appearance-none",
+      "transition-colors duration-200",
+    ],
+  }),
+};

package/presets/Lara/knob/index.js

@@ -0,0 +1,47 @@
+export default {
+  root: ({ props }) => ({
+    class: [
+      // Misc
+      {
+        "opacity-60 select-none pointer-events-none cursor-default":
+          props.disabled,
+      },
+    ],
+  }),
+  range: {
+    class: [
+      // Stroke
+      "stroke-current",
+
+      // Color
+      "stroke-surface-200 dark:stroke-surface-700",
+
+      // Fill
+      "fill-none",
+
+      // Transition
+      "transition duration-100 ease-in",
+    ],
+  },
+  value: {
+    class: [
+      // Animation
+      "animate-dash-frame",
+
+      // Color
+      "stroke-primary-500 dark:stroke-primary-400",
+
+      // Fill
+      "fill-none",
+    ],
+  },
+  label: {
+    class: [
+      // Text Style
+      "text-center text-xl",
+
+      // Color
+      "fill-surface-600 dark:fill-surface-200",
+    ],
+  },
+};

package/presets/Lara/listbox/index.js

@@ -0,0 +1,170 @@
+export default {
+  root: ({ props }) => ({
+    class: [
+      // Sizing and Shape
+      "min-w-[12rem]",
+      "rounded-md",
+
+      // Colors
+      "bg-surface-0 dark:bg-surface-800",
+      "text-surface-700 dark:text-white/80",
+      "border",
+      { "border-surface-300 dark:border-surface-600": !props.invalid },
+
+      // Invalid State
+      { "border-red-500 dark:border-red-400": props.invalid },
+    ],
+  }),
+  wrapper: {
+    class: [
+      // Overflow
+      "overflow-auto",
+    ],
+  },
+  list: {
+    class: "py-3 list-none m-0",
+  },
+  item: ({ context }) => ({
+    class: [
+      // Font
+      "font-normal",
+      "leading-none",
+
+      // Position
+      "relative",
+
+      // Shape
+      "border-0",
+      "rounded-none",
+
+      // Spacing
+      "m-0",
+      "py-3 px-5",
+
+      // Color
+      {
+        "text-surface-700 dark:text-white/80":
+          !context.focused && !context.selected,
+      },
+      {
+        "bg-surface-200 dark:bg-surface-600/60 text-surface-700 dark:text-white/80":
+          context.focused && !context.selected,
+      },
+      {
+        "bg-primary-100 dark:bg-primary-400/40 text-primary-700 dark:text-white/80":
+          context.focused && context.selected,
+      },
+      {
+        "bg-primary-50 dark:bg-primary-400/40 text-primary-700 dark:text-white/80":
+          !context.focused && context.selected,
+      },
+
+      // States
+      {
+        "hover:bg-surface-100 dark:hover:bg-surface-600/80":
+          !context.focused && !context.selected,
+      },
+      {
+        "hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-surface-600/80":
+          context.focused && !context.selected,
+      },
+      "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",
+
+      // Transitions
+      "transition-shadow",
+      "duration-200",
+
+      // Misc
+      "cursor-pointer",
+      "overflow-hidden",
+      "whitespace-nowrap",
+    ],
+  }),
+  itemgroup: {
+    class: [
+      // Font
+      "font-bold",
+
+      // Spacing
+      "m-0",
+      "py-3 px-5",
+
+      // Color
+      "text-surface-800 dark:text-white/80",
+      "bg-surface-0 dark:bg-surface-600/80",
+
+      // Misc
+      "cursor-auto",
+    ],
+  },
+  header: {
+    class: [
+      // Spacing
+      "py-3 px-5",
+      "m-0",
+
+      // Shape
+      "border-b",
+      "rounded-tl-md",
+      "rounded-tr-md",
+
+      // Color
+      "text-surface-700 dark:text-white/80",
+      "bg-surface-100 dark:bg-surface-800",
+      "border-surface-300 dark:border-surface-600",
+    ],
+  },
+  filtercontainer: {
+    class: "relative",
+  },
+  filterinput: {
+    class: [
+      // Font
+      "font-sans",
+      "leading-none",
+
+      // Sizing
+      "pr-7 py-3 px-3",
+      "-mr-7",
+      "w-full",
+
+      // Color
+      "text-surface-700 dark:text-white/80",
+      "bg-surface-0 dark:bg-surface-900",
+      "border-surface-200 dark:border-surface-700",
+
+      // Shape
+      "border",
+      "rounded-lg",
+      "appearance-none",
+
+      // Transitions
+      "transition",
+      "duration-200",
+
+      // States
+      "hover:border-primary-500 dark:hover:border-primary-300",
+      "focus:ring focus:outline-none focus:outline-offset-0",
+      "focus:ring-primary-400/50 dark:focus:ring-primary-300/50",
+
+      // Misc
+      "appearance-none",
+    ],
+  },
+  filtericon: {
+    class: ["absolute", "top-1/2 right-3", "-mt-2"],
+  },
+  emptymessage: {
+    class: [
+      // Font
+      "leading-none",
+
+      // Spacing
+      "py-3 px-5",
+
+      // Color
+      "text-surface-800 dark:text-white/80",
+      "bg-transparent",
+    ],
+  },
+};

package/presets/Lara/megamenu/index.js

@@ -0,0 +1,207 @@
+export default {
+  root: ({ props }) => ({
+    class: [
+      "relative",
+
+      // Flexbox
+      "flex",
+
+      // Shape & Size
+      "rounded-md",
+
+      // Color
+      "bg-surface-50 dark:bg-surface-700",
+      "border border-surface-200 dark:border-surface-700",
+      {
+        "p-2 items-center": props.orientation == "horizontal",
+        "flex-col sm:w-48 p-0 py-1": props.orientation !== "horizontal",
+      },
+    ],
+  }),
+  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 dark:sm:bg-transparent",
+
+      // Misc
+      "outline-none",
+    ],
+  }),
+  menuitem: ({ props }) => ({
+    class: [
+      "sm:relative static",
+      {
+        "sm:w-auto w-full": props.horizontal,
+        "w-full": !props.horizontal,
+      },
+    ],
+  }),
+  content: ({ props, context }) => ({
+    class: [
+      // Shape
+      { "rounded-md": props.level < 1 && props.horizontal },
+
+      //  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: {
+    class: [
+      "relative",
+
+      // Flexbox
+      "flex",
+      "items-center",
+
+      // Spacing
+      "py-3",
+      "px-5",
+
+      // Size
+      "py-3 pr-5 pl-9 sm:pl-5",
+      "leading-none",
+
+      // Misc
+      "select-none",
+      "cursor-pointer",
+      "no-underline ",
+      "overflow-hidden",
+    ],
+  },
+  icon: {
+    class: "mr-2",
+  },
+  submenuicon: ({ props }) => ({
+    class: [
+      {
+        "ml-auto sm:ml-2": props.horizontal,
+        "ml-auto": !props.horizontal,
+      },
+    ],
+  }),
+  panel: ({ props }) => ({
+    class: [
+      // Size
+      "w-auto",
+
+      // Spacing
+      "py-1",
+      "m-0",
+
+      // Shape
+      "shadow-none sm:shadow-md",
+      "border-0",
+
+      // Color
+      "bg-surface-0 dark:bg-surface-700",
+
+      // Position
+      "static sm:absolute",
+      "z-10",
+      {
+        "sm:left-full top-0": !props.horizontal,
+      },
+    ],
+  }),
+  grid: {
+    class: "flex flex-wrap sm:flex-nowrap",
+  },
+  column: {
+    class: "w-full sm:w-1/2",
+  },
+  submenu: {
+    class: ["m-0 list-none", "py-1 px-2 w-full sm:min-w-[14rem]"],
+  },
+  submenuheader: {
+    class: [
+      "font-semibold",
+
+      // Spacing
+      "py-3 px-5",
+      "m-0",
+
+      // Color
+      "text-surface-700 dark:text-white/80",
+      "bg-surface-0 dark:bg-surface-700",
+    ],
+  },
+  separator: {
+    class: "border-t border-surface-200 dark:border-surface-600 my-1",
+  },
+  menubutton: {
+    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/menu/index.js

@@ -0,0 +1,98 @@
+export default {
+  root: {
+    class: [
+      // Sizing and Shape
+      "min-w-[12rem]",
+      "rounded-md",
+      // Spacing
+      "py-2",
+      // Colors
+      "bg-surface-0 dark:bg-surface-700",
+      "text-surface-700 dark:text-white/80",
+      "border border-surface-200 dark:border-surface-700",
+    ],
+  },
+  menu: {
+    class: [
+      // Spacings and Shape
+      "list-none",
+      "m-0",
+      "p-0",
+      "outline-none",
+    ],
+  },
+  content: ({ context }) => ({
+    class: [
+      // Shape
+      "rounded-none",
+      // Colors
+      "text-surface-700 dark:text-white/80",
+      {
+        "bg-surface-200 text-surface-700 dark:bg-surface-300/10 dark:text-white":
+          context.focused,
+      },
+      // Transitions
+      "transition-shadow",
+      "duration-200",
+      // States
+      "hover:text-surface-700 dark:hover:text-white/80",
+      "hover:bg-surface-100 dark:bg-surface-700 dark:hover:bg-surface-400/10",
+    ],
+  }),
+  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"],
+  },
+  submenuheader: {
+    class: [
+      // Font
+      "font-bold",
+      // Spacing
+      "m-0",
+      "py-3 px-5",
+      // Shape
+      "rounded-tl-none",
+      "rounded-tr-none",
+      // Colors
+      "bg-surface-0 dark:bg-surface-700",
+      "text-surface-700 dark:text-white",
+    ],
+  },
+  transition: {
+    enterFromClass: "opacity-0 scale-y-[0.8]",
+    enterActiveClass:
+      "transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]",
+    leaveActiveClass: "transition-opacity duration-100 ease-linear",
+    leaveToClass: "opacity-0",
+  },
+};