@fy-/fws-vue 0.3.0 → 0.3.1

package/presets/Wind/menubar/index.js

@@ -1,188 +0,0 @@
-export default {
-  root: {
-    class: [
-      "relative",
-
-      // Flexbox
-      "flex",
-      "items-center",
-      "gap-6",
-
-      // Spacing
-      "px-6",
-      "min-h-[4rem]",
-
-      // Shape
-      "rounded-md",
-      "shadow-md",
-
-      // Color
-      "bg-surface-0 dark:bg-surface-900",
-      "ring-1 ring-inset ring-surface-100 dark:ring-surface-800 ring-offset-0",
-    ],
-  },
-  menu: ({ props }) => ({
-    class: [
-      // Flexbox
-      "sm:flex sm:row-gap-2 sm:col-gap-4",
-      "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-2 px-1.5 sm:py-0 sm:p-0 sm:py-1.5",
-      "list-none",
-
-      // Shape
-      "shadow-md sm:shadow-none",
-      "border-0",
-      "sm:rounded-none rounded-md",
-
-      // Color
-      "bg-surface-0 dark:bg-surface-900 sm:bg-transparent dark: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-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-all",
-      "duration-200",
-    ],
-  }),
-  action: ({ context }) => ({
-    class: [
-      "relative",
-
-      // Font
-      "sm:text-sm font-medium",
-
-      // Flexbox
-      "flex",
-      "items-center",
-
-      // Spacing
-      "py-2",
-      "px-3",
-      "my-1 sm:my-0",
-
-      // Size
-      {
-        "pl-5 sm:pl-3": context.level === 1,
-        "pl-7 sm:pl-3": context.level === 2,
-      },
-
-      // 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-900",
-    ],
-  }),
-  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-50 dark:hover:bg-surface-800/80",
-      "focus:outline-none focus:outline-offset-0",
-      "focus:ring-2 focus:ring-inset focus:ring-primary-500 dark:focus:ring-primary-400",
-
-      // Transitions
-      "transition duration-200 ease-in-out",
-
-      // Misc
-      "cursor-pointer",
-      "no-underline",
-    ],
-  },
-  end: {
-    class: "ml-auto self-center",
-  },
-};

package/presets/Wind/message/index.js

@@ -1,87 +0,0 @@
-export default {
-  root: ({ props }) => ({
-    class: [
-      // Spacing and Shape
-      "my-2 mx-0",
-      "rounded-md",
-      "ring-1 ring-inset ring-surface-200 dark:ring-surface-700 ring-offset-0",
-
-      // Colors
-      "bg-surface-0 dark:bg-surface-800",
-
-      {
-        "text-blue-500 dark:text-blue-300": props.severity == "info",
-        "text-green-500 dark:text-green-300": props.severity == "success",
-        "text-orange-500 dark:text-orange-300": props.severity == "warn",
-        "text-red-500 dark:text-red-300": props.severity == "error",
-      },
-    ],
-  }),
-  wrapper: {
-    class: [
-      // Flexbox
-      "flex items-center",
-
-      // Spacing
-      "p-4",
-    ],
-  },
-  icon: {
-    class: [
-      // Sizing and Spacing
-      "w-5 h-5",
-      "mr-3 shrink-0",
-    ],
-  },
-  text: {
-    class: [
-      // Font and Text
-      "text-sm leading-none",
-      "font-medium",
-    ],
-  },
-  button: ({ props }) => ({
-    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",
-    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/Wind/metergroup/index.js

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