@fy-/fws-vue 0.3.0 → 0.3.1

package/presets/Wind/inputswitch/index.js

@@ -1,106 +0,0 @@
-export default {
-  root: ({ props }) => ({
-    class: [
-      // Alignments
-      "inline-flex relative",
-      "shrink-0",
-
-      // Shape
-      "rounded-2xl",
-
-      // Size
-      "h-5 w-9",
-
-      // States
-      {
-        "opacity-60 select-none pointer-events-none cursor-default":
-          props.disabled,
-      },
-    ],
-  }),
-  slider: ({ props }) => ({
-    class: [
-      // Position
-      "absolute top-0 left-0 right-0 bottom-0",
-
-      // Shape
-      "rounded-2xl",
-
-      // Before:
-      "before:absolute before:top-1/2",
-      "before:-mt-2",
-      "before:h-4 before:w-4",
-      "before:rounded-full",
-      "before:duration-200 before:transition before:ease-in-out",
-      "before:bg-surface-0 before:dark:bg-surface-900",
-      "before:shadow",
-      {
-        "before:transform before:translate-x-4":
-          props.modelValue == props.trueValue,
-      },
-
-      // 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-2 peer-focus-visible:ring-primary-500 dark:peer-focus-visible:ring-primary-400",
-
-      // 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
-      "rounded",
-      "border",
-
-      // Shape
-      "opacity-0",
-      "rounded-md",
-      "outline-none",
-      "border-2 border-surface-300 dark:border-surface-700",
-
-      // Misc
-      "appearance-none",
-    ],
-  },
-};

package/presets/Wind/inputtext/index.js

@@ -1,61 +0,0 @@
-export default {
-  root: ({ props, context, parent }) => ({
-    class: [
-      // Font
-      "font-sans leading-6",
-
-      // Flex
-      { "flex-1 w-[1%]": parent.instance.$name == "InputGroup" },
-
-      // Spacing
-      "m-0",
-      {
-        "py-3 px-4 text-lg sm:text-md": props.size == "large",
-        "py-1 px-2 sm:text-sm": props.size == "small",
-        "py-1.5 px-3 sm:text-sm": props.size == null,
-      },
-
-      // Colors
-      "text-surface-900 dark:text-surface-0",
-      "placeholder:text-surface-400 dark:placeholder:text-surface-500",
-      "bg-surface-0 dark:bg-surface-900",
-      "shadow-sm",
-      {
-        "ring-1 ring-inset ring-offset-0":
-          parent.instance.$name !== "InputGroup",
-      },
-
-      { "ring-surface-300 dark:ring-surface-700": !props.invalid },
-
-      // Invalid State
-      { "ring-red-500 dark:ring-red-400": props.invalid },
-
-      // 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 border-surface-300 dark:border-surface-600":
-          parent.instance.$name == "InputGroup",
-      },
-      {
-        "first:ml-0 -ml-px":
-          parent.instance.$name == "InputGroup" && !props.showButtons,
-      },
-      "appearance-none",
-
-      // Interactions
-      {
-        "outline-none focus:ring-primary-500 dark:focus:ring-primary-400":
-          !context.disabled,
-        "opacity-60 select-none pointer-events-none cursor-default":
-          context.disabled,
-      },
-
-      // Filled State *for FloatLabel
-      { filled: parent.instance?.$name == "FloatLabel" && context.filled },
-    ],
-  }),
-};

package/presets/Wind/knob/index.js

@@ -1,47 +0,0 @@
-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/Wind/listbox/index.js

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

package/presets/Wind/megamenu/index.js

@@ -1,218 +0,0 @@
-export default {
-  root: ({ props }) => ({
-    class: [
-      "relative",
-
-      // Flexbox
-      "flex",
-
-      // Spacing
-      "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",
-
-      {
-        "items-center px-2 sm:px-6": props.orientation == "horizontal",
-        "flex-col justify-center sm:justify-start sm:w-48 px-2":
-          props.orientation !== "horizontal",
-      },
-    ],
-  }),
-  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: ({ 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 },
-
-      //  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: {
-    class: [
-      "relative",
-
-      // Font
-      "sm:text-sm font-medium",
-
-      // Flexbox
-      "flex",
-      "items-center",
-
-      // Spacing
-      "py-2",
-      "px-3",
-      "my-1 sm:my-0",
-
-      // 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 mx-2",
-
-      // Shape
-      "shadow-none sm:shadow-md",
-      "border-0",
-
-      // Color
-      "bg-surface-0 dark:bg-surface-900",
-
-      // 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-medium",
-      "sm:text-md",
-
-      // Spacing
-      "py-2.5 px-2",
-      "m-0",
-
-      // Shape
-      "border-b border-surface-200 dark:border-surface-700",
-
-      // Color
-      "text-surface-700 dark:text-white/80",
-      "bg-surface-0 dark:bg-surface-900",
-    ],
-  },
-  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-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/menu/index.js

@@ -1,111 +0,0 @@
-export default {
-  root: {
-    class: [
-      // Sizing and Shape
-      "min-w-[12rem]",
-      "rounded-md",
-      // Spacing
-      "p-1.5",
-      // Colors
-      "bg-surface-0 dark:bg-surface-700",
-      "text-surface-700 dark:text-white/80",
-      "ring-1 ring-surface-200 dark:ring-surface-700",
-    ],
-  },
-  menu: {
-    class: [
-      // Spacings and Shape
-      "list-none",
-      "m-0",
-      "p-0",
-      "outline-none",
-    ],
-  },
-  menuitem: {
-    class: [
-      // Space
-      "first:mt-0 mt-1",
-    ],
-  },
-  content: ({ context }) => ({
-    class: [
-      //Shape
-      "rounded-md",
-
-      // Colors
-      {
-        "text-surface-700 dark:text-surface-0": !context.focused,
-        "bg-surface-100 text-primary-500 dark:bg-surface-300/10 dark:text-primary-400":
-          context.focused,
-      },
-
-      // Transitions
-      "transition-shadow",
-      "duration-200",
-
-      // States
-      "hover:text-primary-600 dark:hover:text-primary-400",
-      "hover:bg-surface-100 dark:hover:bg-surface-400/10",
-    ],
-  }),
-  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-6", "text-sm"],
-  },
-  submenuheader: {
-    class: [
-      // Font
-      "font-semibold",
-      "text-xs leading-6",
-
-      // Spacing
-      "m-0 ",
-      "py-1",
-      "px-3",
-
-      // Shape
-      "rounded-tl-none",
-      "rounded-tr-none",
-
-      // Colors
-      "bg-surface-0 dark:bg-surface-700",
-      "text-surface-600 dark:text-surface-0/60",
-    ],
-  },
-  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",
-  },
-};