@fy-/fws-vue 0.1.3 → 0.1.5

package/presets/Lara/progressspinner/index.js

@@ -0,0 +1,51 @@
+export default {
+  root: {
+    class: [
+      // Position
+      "relative",
+      "mx-auto",
+
+      // Sizing
+      "w-28",
+      "h-28",
+
+      // Flexbox
+      "inline-block",
+
+      // Pseudo-Elements
+      "before:block",
+      "before:pt-full",
+    ],
+  },
+  spinner: {
+    class: [
+      // Position
+      "absolute",
+      "top-0",
+      "bottom-0",
+      "left-0",
+      "right-0",
+      "m-auto",
+
+      // Sizing
+      "w-full",
+      "h-full",
+
+      // Transformations
+      "transform",
+      "origin-center",
+
+      // Animations
+      "animate-spin",
+    ],
+  },
+  circle: {
+    class: [
+      // Colors
+      "text-red-500",
+
+      // Misc
+      "progress-spinner-circle",
+    ],
+  },
+};

package/presets/Lara/radiobutton/index.js

@@ -0,0 +1,116 @@
+export default {
+  root: {
+    class: [
+      "relative",
+
+      // Flexbox & Alignment
+      "inline-flex",
+      "align-bottom",
+
+      // Size
+      "w-[1.571rem] h-[1.571rem]",
+
+      // Misc
+      "cursor-pointer",
+      "select-none",
+    ],
+  },
+  box: ({ props }) => ({
+    class: [
+      // Flexbox
+      "flex justify-center items-center",
+
+      // Size
+      "w-[1.571rem] h-[1.571rem]",
+
+      // Shape
+      "border-2",
+      "rounded-full",
+
+      // Transition
+      "transition duration-200 ease-in-out",
+
+      // Colors
+      {
+        "text-surface-700 dark:text-white/80":
+          props.value !== props.modelValue && props.value !== undefined,
+        "bg-surface-0 dark:bg-surface-900":
+          props.value !== props.modelValue && props.value !== undefined,
+        "border-surface-300 dark:border-surface-700":
+          props.value !== props.modelValue &&
+          props.value !== undefined &&
+          !props.invalid,
+        "border-primary-500 dark:border-primary-400":
+          props.value == props.modelValue && props.value !== undefined,
+        "bg-primary-500 dark:bg-primary-400":
+          props.value == props.modelValue && props.value !== undefined,
+      },
+      // Invalid State
+      { "border-red-500 dark:border-red-400": props.invalid },
+
+      // States
+      {
+        "peer-hover:border-primary-500 dark:peer-hover:border-primary-400":
+          !props.disabled && !props.invalid,
+        "peer-hover:border-primary-600 dark:peer-hover:border-primary-300 peer-hover:bg-primary-600 dark:peer-hover:bg-primary-300":
+          !props.disabled &&
+          props.value == props.modelValue &&
+          props.value !== undefined,
+        "peer-focus-visible:border-primary-500 dark:peer-focus-visible:border-primary-400 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-400/20 dark:peer-focus-visible:ring-primary-300/20":
+          !props.disabled,
+        "opacity-60 cursor-default": props.disabled,
+      },
+    ],
+  }),
+  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-2 border-surface-200 dark:border-surface-700",
+
+      // Misc
+      "appearance-none",
+      "cursor-pointer",
+    ],
+  },
+  icon: ({ props }) => ({
+    class: [
+      "block",
+
+      // Shape
+      "rounded-full",
+
+      // Size
+      "w-[0.857rem] h-[0.857rem]",
+
+      // Colors
+      "bg-surface-0 dark:bg-surface-900",
+
+      // Conditions
+      {
+        "backface-hidden scale-10 invisible": props.value !== props.modelValue,
+        "transform visible scale-[1.1]": props.value == props.modelValue,
+      },
+
+      // Transition
+      "transition duration-200",
+    ],
+  }),
+};

package/presets/Lara/rating/index.js

@@ -0,0 +1,95 @@
+export default {
+  root: ({ props }) => ({
+    class: [
+      "relative",
+
+      // Flex & Alignment
+      "flex items-center",
+      "gap-2",
+
+      // Misc
+      {
+        "opacity-60 select-none pointer-events-none cursor-default":
+          props.disabled,
+      },
+    ],
+  }),
+  cancelitem: ({ context }) => ({
+    class: [
+      // Flex & Alignment
+      "inline-flex items-center",
+
+      // State
+      {
+        "outline-none ring ring-primary-500/50 dark:ring-primary-400/50":
+          context.focused,
+      },
+
+      // Misc
+      "cursor-pointer",
+    ],
+  }),
+  cancelicon: {
+    class: [
+      // Size
+      "w-5 h-5",
+
+      // Color
+      "text-red-500 dark:text-red-400",
+
+      // State
+      "hover:text-red-600 dark:hover:text-red-300",
+
+      // Transition
+      "transition duration-200 ease-in",
+    ],
+  },
+  item: ({ props, context }) => ({
+    class: [
+      // Flex & Alignment
+      "inline-flex items-center",
+
+      // State
+      {
+        "outline-none ring ring-primary-500/50 dark:ring-primary-400/50":
+          context.focused,
+      },
+
+      // Misc
+      {
+        "cursor-pointer": !props.readonly,
+        "cursor-default": props.readonly,
+      },
+    ],
+  }),
+  officon: ({ props }) => ({
+    class: [
+      // Size
+      "w-5 h-5",
+
+      // Color
+      "text-surface-700 dark:text-surface-0/80",
+
+      // State
+      { "hover:text-primary-500 dark:hover:text-primary-400": !props.readonly },
+
+      // Transition
+      "transition duration-200 ease-in",
+    ],
+  }),
+  onicon: ({ props }) => ({
+    class: [
+      // Size
+      "w-5 h-5",
+
+      // Color
+      "text-primary-500 dark:text-primary-400",
+
+      // State
+      { "hover:text-primary-600 dark:hover:text-primary-300": !props.readonly },
+
+      // Transition
+      "transition duration-200 ease-in",
+    ],
+  }),
+};

package/presets/Lara/ripple/index.js

@@ -0,0 +1,6 @@
+export default {
+  root: {
+    class: ["block absolute bg-surface-0/50 rounded-full pointer-events-none"],
+    style: "transform: scale(0)",
+  },
+};

package/presets/Lara/scrollpanel/index.js

@@ -0,0 +1,77 @@
+export default {
+  wrapper: {
+    class: [
+      // Size & Position
+      "h-full w-full",
+
+      // Layering
+      "z-[1]",
+
+      // Spacing
+      "overflow-hidden",
+
+      // Misc
+      "relative float-left",
+    ],
+  },
+  content: {
+    class: [
+      // Size & Spacing
+      "h-[calc(100%+18px)] w-[calc(100%+18px)] pr-[18px] pb-[18px] pl-0 pt-0",
+
+      // Overflow & Scrollbar
+      "overflow-scroll scrollbar-none",
+
+      // Box Model
+      "box-border",
+
+      // Position
+      "relative",
+
+      // Webkit Specific
+      "[&::-webkit-scrollbar]:hidden",
+    ],
+  },
+  barX: {
+    class: [
+      // Size & Position
+      "h-[9px] bottom-0",
+
+      // Appearance
+      "bg-surface-50 dark:bg-surface-700 rounded",
+
+      // Interactivity
+      "cursor-pointer",
+
+      // Visibility & Layering
+      "invisible z-20",
+
+      // Transition
+      "transition duration-[250ms] ease-linear",
+
+      // Misc
+      "relative",
+    ],
+  },
+  barY: {
+    class: [
+      // Size & Position
+      "w-[9px] top-0",
+
+      // Appearance
+      "bg-surface-50 dark:bg-surface-700 rounded",
+
+      // Interactivity
+      "cursor-pointer",
+
+      // Visibility & Layering
+      "z-20",
+
+      // Transition
+      "transition duration-[250ms] ease-linear",
+
+      // Misc
+      "relative",
+    ],
+  },
+};

package/presets/Lara/scrolltop/index.js

@@ -0,0 +1,45 @@
+export default {
+  root: ({ props }) => ({
+    class: [
+      // Flex & Alignment
+      "flex items-center justify-center",
+
+      // Positioning
+      {
+        sticky: props.target === "parent",
+        fixed: props.target === "window",
+      },
+      "bottom-[20px] right-[20px]",
+      "ml-auto",
+
+      // Shape & Size
+      {
+        "rounded-md h-8 w-8": props.target === "parent",
+        "h-12 w-12 rounded-full shadow-md": props.target === "window",
+      },
+
+      // Color
+      "text-white dark:text-surface-900",
+      {
+        "bg-primary-500 dark:bg-primary-400 hover:bg-primary-600 dark:hover:bg-primary-300":
+          props.target === "parent",
+        "bg-surface-500 dark:bg-surface-400 hover:bg-surface-600 dark:hover:bg-surface-300":
+          props.target === "window",
+      },
+
+      // States
+      {
+        "hover:bg-primary-600 dark:hover:bg-primary-300":
+          props.target === "parent",
+        "hover:bg-surface-600 dark:hover:bg-surface-300":
+          props.target === "window",
+      },
+    ],
+  }),
+  transition: {
+    enterFromClass: "opacity-0",
+    enterActiveClass: "transition-opacity duration-150",
+    leaveActiveClass: "transition-opacity duration-150",
+    leaveToClass: "opacity-0",
+  },
+};

package/presets/Lara/selectbutton/index.js

@@ -0,0 +1,60 @@
+export default {
+  root: ({ props }) => ({
+    class: [
+      {
+        "opacity-60 select-none pointer-events-none cursor-default":
+          props.disabled,
+      },
+    ],
+  }),
+  button: ({ context, props }) => ({
+    class: [
+      "relative",
+      // Font
+      "leading-none",
+
+      // Flex Alignment
+      "inline-flex items-center align-bottom text-center",
+
+      // Spacing
+      "px-4 py-3",
+
+      // Shape
+      "border border-r-0",
+      "first:rounded-l-md first:rounded-tr-none first:rounded-br-none",
+      "last:border-r last:rounded-tl-none last:rounded-bl-none last:rounded-r-md",
+
+      // Color
+      {
+        "bg-surface-0 dark:bg-surface-900": !context.active,
+        "text-surface-700 dark:text-white/80": !context.active,
+        "border-surface-200 dark:border-surface-700":
+          !context.active && !props.invalid,
+        "bg-primary-500 dark:bg-primary-400 border-primary-500 dark:border-primary-400 text-white dark:text-surface-900":
+          context.active,
+      },
+      // Invalid State
+      { "border-red-500 dark:border-red-400": props.invalid },
+
+      // States
+      "focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50 focus:z-10",
+      {
+        "hover:bg-surface-50 dark:hover:bg-surface-800/80":
+          !context.active && !props.invalid,
+        "hover:bg-primary-600 dark:hover:bg-primary-300": context.active,
+      },
+      {
+        "opacity-60 select-none pointer-events-none cursor-default":
+          context.disabled,
+      },
+      // Transition
+      "transition duration-200",
+
+      // Misc
+      "cursor-pointer select-none overflow-hidden",
+    ],
+  }),
+  label: {
+    class: "font-bold",
+  },
+};

package/presets/Lara/sidebar/index.js

@@ -0,0 +1,163 @@
+export default {
+  root: ({ props }) => ({
+    class: [
+      // Flexbox
+      "flex flex-col",
+
+      // Position
+      "relative",
+      {
+        "!transition-none !transform-none !w-screen !h-screen !max-h-full !top-0 !left-0":
+          props.position == "full",
+      },
+
+      // Size
+      {
+        "h-full w-80": props.position == "left" || props.position == "right",
+        "h-auto w-full": props.position == "top" || props.position == "bottom",
+      },
+
+      // Shape
+      "border-0 dark:border",
+      "shadow-lg",
+
+      // Colors
+      "bg-surface-0 dark:bg-surface-800",
+      "text-surface-700 dark:text-white/80",
+      "dark:border-surface-700",
+
+      // Transitions
+      "transition-transform",
+      "duration-300",
+
+      // Misc
+      "pointer-events-auto",
+    ],
+  }),
+  header: {
+    class: [
+      // Flexbox and Alignment
+      "flex items-center justify-between",
+      "shrink-0",
+
+      // Spacing
+      "p-5",
+
+      // Colors
+      "bg-surface-0 dark:bg-surface-800",
+      "text-surface-700 dark:text-surface-0/80",
+    ],
+  },
+  title: {
+    class: ["font-bold text-lg"],
+  },
+  icons: {
+    class: ["flex items-center"],
+  },
+  closeButton: {
+    class: [
+      "relative",
+
+      // Flexbox and Alignment
+      "flex items-center justify-center",
+
+      // Size and Spacing
+      "mr-2",
+      "last:mr-0",
+      "w-8 h-8",
+
+      // Shape
+      "border-0",
+      "rounded-full",
+
+      // Colors
+      "text-surface-500",
+      "bg-transparent",
+
+      // Transitions
+      "transition duration-200 ease-in-out",
+
+      // States
+      "hover:text-surface-700 dark:hover:text-white/80",
+      "hover:bg-surface-100 dark:hover:bg-surface-800/80",
+      "focus:outline-none focus:outline-offset-0 focus:ring focus:ring-inset",
+      "focus:ring-primary-400/50 dark:focus:ring-primary-300/50",
+
+      // Misc
+      "overflow-hidden",
+    ],
+  },
+  closeButtonIcon: {
+    class: [
+      // Display
+      "inline-block",
+
+      // Size
+      "w-4",
+      "h-4",
+    ],
+  },
+  content: {
+    class: [
+      // Spacing and Size
+      "p-5",
+      "pt-0",
+      "h-full",
+      "w-full",
+
+      // Growth and Overflow
+      "grow",
+      "overflow-y-auto",
+    ],
+  },
+  mask: ({ props }) => ({
+    class: [
+      // Transitions
+      "transition-all",
+      "duration-300",
+      { "p-5": !props.position == "full" },
+
+      // Background and Effects
+      {
+        "has-[.mask-active]:bg-transparent bg-black/40": props.modal,
+        "has-[.mask-active]:backdrop-blur-none backdrop-blur-sm": props.modal,
+      },
+    ],
+  }),
+  transition: ({ props }) => {
+    return props.position === "top"
+      ? {
+          enterFromClass:
+            "translate-x-0 -translate-y-full translate-z-0 mask-active",
+          leaveToClass:
+            "translate-x-0 -translate-y-full translate-z-0 mask-active",
+        }
+      : props.position === "bottom"
+        ? {
+            enterFromClass:
+              "translate-x-0 translate-y-full translate-z-0 mask-active",
+            leaveToClass:
+              "translate-x-0 translate-y-full translate-z-0 mask-active",
+          }
+        : props.position === "left"
+          ? {
+              enterFromClass:
+                "-translate-x-full translate-y-0 translate-z-0 mask-active",
+              leaveToClass:
+                "-translate-x-full translate-y-0 translate-z-0 mask-active",
+            }
+          : props.position === "right"
+            ? {
+                enterFromClass:
+                  "translate-x-full translate-y-0 translate-z-0 mask-active",
+                leaveToClass:
+                  "translate-x-full translate-y-0 translate-z-0 mask-active",
+              }
+            : {
+                enterFromClass: "opacity-0 mask-active",
+                enterActiveClass: "transition-opacity duration-400 ease-in",
+                leaveActiveClass: "transition-opacity duration-400 ease-in",
+                leaveToClass: "opacity-0 mask-active",
+              };
+  },
+};

package/presets/Lara/skeleton/index.js

@@ -0,0 +1,19 @@
+export default {
+  root: ({ props }) => ({
+    class: [
+      "overflow-hidden",
+      {
+        "animate-pulse": props.animation !== "none",
+      },
+
+      // Round
+      {
+        "rounded-full": props.shape === "circle",
+        "rounded-md": props.shape !== "circle",
+      },
+
+      // Colors
+      "bg-surface-200 dark:bg-surface-700",
+    ],
+  }),
+};