@fy-/fws-vue 0.3.0 → 0.3.1

package/presets/Lara/textarea/index.js

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

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

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

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

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

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

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