@fy-/fws-vue 0.3.0 → 0.3.1

package/presets/Wind/terminal/index.js

@@ -1,60 +0,0 @@
-export default {
-  root: {
-    class: [
-      // Spacing
-      "p-5",
-
-      // Shape
-      "rounded-md",
-
-      // Color
-      "bg-surface-900 text-white",
-      "border border-surface-700",
-
-      // Sizing & Overflow
-      "h-72 overflow-auto",
-    ],
-  },
-  container: {
-    class: [
-      // Flexbox
-      "flex items-center",
-    ],
-  },
-  prompt: {
-    class: [
-      // Color
-      "text-surface-400",
-    ],
-  },
-  response: {
-    class: [
-      // Color
-      "text-primary-400",
-    ],
-  },
-  command: {
-    class: [
-      // Color
-      "text-primary-400",
-    ],
-  },
-  commandtext: {
-    class: [
-      // Flexbox
-      "flex-1 shrink grow-0",
-
-      // Shape
-      "border-0",
-
-      // Spacing
-      "p-0",
-
-      // Color
-      "bg-transparent text-inherit",
-
-      // Outline
-      "outline-none",
-    ],
-  },
-};

package/presets/Wind/textarea/index.js

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

package/presets/Wind/tieredmenu/index.js

@@ -1,121 +0,0 @@
-export default {
-  root: {
-    class: [
-      // Shape
-      "rounded-md",
-
-      // Size
-      "min-w-[12rem]",
-      "p-1.5",
-
-      // Colors
-      "bg-surface-0 dark:bg-surface-700",
-      "ring-1 ring-surface-200 dark:ring-surface-700",
-    ],
-  },
-  menu: {
-    class: [
-      // Spacings and Shape
-      "list-none",
-      "m-0",
-      "p-0",
-      "outline-none",
-    ],
-  },
-  menuitem: {
-    class: ["relative first:mt-0 mt-1"],
-  },
-  content: ({ context }) => ({
-    class: [
-      //Shape
-      "rounded-md",
-
-      //  Colors
-      {
-        "text-surface-500 dark:text-white/70":
-          !context.focused && !context.active,
-        "text-surface-500 dark:text-white/70 bg-surface-200 dark:bg-black/70":
-          context.focused && !context.active,
-        "text-surface-900 dark:text-surface-0/80 bg-surface-50 dark:bg-black/70":
-          context.focused && context.active,
-        "text-surface-900 dark:text-surface-0/80 bg-surface-50 dark:bg-black/70":
-          !context.focused && context.active,
-      },
-
-      // Hover States
-      {
-        "hover:bg-surface-50 dark:hover:bg-surface-800": !context.active,
-        "hover:bg-surface-100 dark:hover:bg-black/40 text-surface-900 dark:text-surface-0/80":
-          context.active,
-      },
-
-      // Transitions
-      "transition-shadow",
-      "duration-200",
-    ],
-  }),
-  action: {
-    class: [
-      "relative",
-
-      // Font
-      "font-semibold",
-
-      // Flexbox
-      "flex",
-      "items-center",
-
-      // Spacing
-      "py-2",
-      "px-3",
-
-      // Misc
-      "no-underline",
-      "overflow-hidden",
-      "cursor-pointer",
-      "select-none",
-    ],
-  },
-  icon: {
-    class: [
-      // Spacing
-      "mr-2",
-      "leading-6",
-      "text-sm",
-    ],
-  },
-  label: {
-    class: ["leading-none", "text-sm"],
-  },
-  submenuicon: {
-    class: [
-      // Position
-      "ml-auto",
-    ],
-  },
-  submenu: {
-    class: [
-      // Size
-      "w-full sm:w-48",
-
-      // Spacing
-      "p-1.5",
-      "m-0 mx-1.5",
-      "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/Wind/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/Wind/toast/index.js

@@ -1,111 +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",
-
-      "shadow-lg",
-      "bg-surface-0 dark:bg-surface-800",
-      "ring-1 ring-inset ring-surface-200 dark:ring-surface-700 ring-offset-0",
-      // Colors
-      {
-        "text-blue-500 dark:text-blue-300": props.message.severity == "info",
-        "text-green-500 dark:text-green-300":
-          props.message.severity == "success",
-        "text-orange-500 dark:text-orange-300":
-          props.message.severity == "warn",
-        "text-red-500 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-5 h-5",
-      "mr-2 shrink-0",
-    ],
-  },
-  text: {
-    class: [
-      // Font and Text
-      "text-sm leading-none",
-      "ml-2",
-      "flex-1",
-    ],
-  },
-  summary: {
-    class: "font-medium block",
-  },
-  detail: ({ props }) => ({
-    class: [
-      "block",
-      "text-surface-600 dark:text-surface-0/70",
-      { "mt-1.5": props.message.summary },
-    ],
-  }),
-  closebutton: {
-    class: [
-      // Flexbox
-      "flex items-center justify-center",
-
-      // Size
-      "w-6 h-6",
-
-      // Spacing and Misc
-      "ml-auto relative",
-
-      // Shape
-      "rounded-full",
-
-      // Colors
-      "bg-transparent",
-      "text-surface-700 dark:text-surface-0/80",
-
-      // Transitions
-      "transition duration-200 ease-in-out",
-
-      // States
-      "hover:bg-surface-100 dark:hover:bg-surface-700",
-      "outline-none focus:ring-1 focus:ring-inset",
-      "focus:ring-primary-500 dark:focus:ring-primary-400",
-
-      // Misc
-      "overflow-hidden",
-    ],
-  },
-  closeicon: {
-    class: [
-      // Sizing and Spacing
-      "w-3 h-3",
-      "shrink-0",
-    ],
-  },
-  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/Wind/togglebutton/index.js

@@ -1,91 +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-2.5 py-1.5",
-      "text-sm",
-
-      // Shapes
-      "rounded-md shadow-sm",
-
-      // Colors
-      "text-surface-700 dark:text-white/80",
-      "ring-1",
-      { "ring-surface-200 dark:ring-surface-700": !props.invalid },
-      {
-        "bg-surface-0 dark:bg-surface-900 ": !props.modelValue,
-        "bg-surface-100 dark:bg-surface-700": props.modelValue,
-      },
-
-      // Invalid State
-      { "ring-red-500 dark:ring-red-400": props.invalid },
-
-      // States
-      "peer-hover:bg-surface-200 dark:peer-hover:bg-surface-600/80",
-      {
-        "peer-focus-visible:ring-2 peer-focus-visible:ring-inset peer-focus-visible:ring-primary-500 dark:peer-focus-visible:ring-primary-400":
-          !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-semibold 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: {
-    class: [" mr-2", "text-surface-700 dark:text-white/80"],
-  },
-};

package/presets/Wind/toolbar/index.js

@@ -1,30 +0,0 @@
-export default {
-  root: {
-    class: [
-      // Flex & Alignment
-      "flex items-center justify-between flex-wrap",
-      "gap-6",
-
-      // Spacing
-      "px-6 py-2",
-      "min-h-[4rem]",
-
-      // Shape
-      "rounded-md",
-      "shadow-md",
-
-      // Color
-      "bg-surface-0 dark:bg-surface-900",
-      "ring-1 ring-surface-100 dark:ring-surface-700",
-    ],
-  },
-  start: {
-    class: "flex items-center",
-  },
-  center: {
-    class: "flex items-center",
-  },
-  end: {
-    class: "flex items-center",
-  },
-};

package/presets/Wind/tooltip/index.js

@@ -1,43 +0,0 @@
-export default {
-  root: ({ context, props }) => ({
-    class: [
-      // Position
-      "absolute",
-      // Spacing
-      {
-        "px-1.5":
-          context?.right ||
-          context?.left ||
-          (!context?.right &&
-            !context?.left &&
-            !context?.top &&
-            !context?.bottom),
-        "py-1.5": context?.top || context?.bottom,
-      },
-    ],
-  }),
-  arrow: {
-    class: "hidden",
-  },
-  text: {
-    class: [
-      // Size
-      "text-xs leading-none",
-
-      // Spacing
-      "p-2",
-
-      // Shape
-      "rounded-md",
-
-      // Color
-      "text-surface-900 dark:text-surface-0/80",
-      "bg-surface-0 dark:bg-surface-900",
-      "ring-1 ring-inset ring-surface-200 dark:ring-surface-800 ring-offset-0",
-
-      // Misc
-      "whitespace-pre-line",
-      "break-words",
-    ],
-  },
-};