@fy-/fws-vue 0.3.0 → 0.3.2

package/presets/Wind/autocomplete/index.js

@@ -1,294 +0,0 @@
-export default {
-  root: ({ props }) => ({
-    class: [
-      "relative",
-
-      // Flex
-      "inline-flex",
-
-      // Size
-      { "w-full": props.multiple },
-
-      // Color
-      "text-surface-900 dark:text-surface-0",
-
-      //States
-      {
-        "opacity-60 select-none pointer-events-none cursor-default":
-          props.disabled,
-      },
-    ],
-  }),
-  container: ({ props, state }) => ({
-    class: [
-      // Font
-      "font-sans sm:text-sm leading-none",
-
-      // Flex
-      "flex items-center flex-wrap",
-      "gap-1",
-
-      // Spacing
-      "m-0 list-none",
-      "px-3 py-1",
-      { "px-3 py-1.5": !props.multiple, "px-3 py-1": props.multiple },
-      // Size
-      "w-full",
-
-      // Shape
-      "appearance-none rounded-md",
-
-      // Color
-      "text-surface-900 dark:text-surface-0",
-      "bg-surface-0 dark:bg-surface-900",
-      "placeholder:text-surface-400 dark:placeholder:text-surface-500",
-      "shadow-sm",
-
-      // States
-      "focus:outline-none focus:outline-offset-0",
-      // States
-      {
-        "ring-1 ring-inset": !state.focused,
-        "ring-2 ring-inset ring-primary-500 dark:ring-primary-400":
-          state.focused,
-      },
-
-      {
-        "ring-surface-300 dark:ring-surface-600":
-          !props.invalid && !state.focused,
-      },
-
-      // Invalid State
-      { "ring-red-500 dark:ring-red-400": props.invalid && !state.focused },
-
-      // Transition
-      "transition duration-200 ease-in-out",
-
-      // Misc
-      "cursor-text overflow-hidden",
-    ],
-  }),
-  inputtoken: ({ props }) => ({
-    class: [
-      { "py-1.5 px-0": !props.multiple, "p-0.5": props.multiple },
-      ,
-      "inline-flex flex-auto",
-    ],
-  }),
-  input: ({ props }) => ({
-    class: [
-      // Font
-      "font-sans sm:text-sm leading-none",
-
-      // Shape
-      "appearance-none rounded-md",
-      { "rounded-tr-none rounded-br-none": props.dropdown },
-      { "outline-none shadow-none rounded-none": props.multiple },
-
-      // Size
-      { "w-full": props.multiple },
-
-      // Spacing
-      "m-0",
-      { "py-1.5 px-3": !props.multiple, "p-0": props.multiple },
-
-      // Colors
-      "text-surface-700 dark:text-white/80",
-      "border",
-      {
-        "bg-surface-0 dark:bg-surface-900": !props.multiple,
-        "border-surface-300 dark:border-surface-700":
-          !props.multiple && !props.invalid,
-        "border-0 bg-transparent": props.multiple,
-      },
-
-      // Invalid State
-      { "border-red-500 dark:border-red-400": props.invalid },
-
-      // States
-      {
-        "focus:outline-none focus:outline-offset-0 focus:ring-inset focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400":
-          !props.multiple,
-      },
-
-      // Transition
-      "transition-colors duration-200",
-    ],
-  }),
-  token: {
-    class: [
-      // Flexbox
-      "inline-flex items-center",
-
-      // Spacing
-      "py-0.5 px-3",
-
-      // Shape
-      "rounded-[1.14rem]",
-
-      // Colors
-      "text-surface-700 dark:text-white/70",
-      "bg-surface-200 dark:bg-surface-700",
-    ],
-  },
-  label: {
-    class: "leading-5",
-  },
-  removeTokenIcon: {
-    class: [
-      // Shape
-      "rounded-md leading-6",
-
-      // Spacing
-      "ml-2",
-
-      // Size
-      "w-4 h-4",
-
-      // Transition
-      "transition duration-200 ease-in-out",
-
-      // Misc
-      "cursor-pointer",
-    ],
-  },
-  dropdownbutton: {
-    root: {
-      class: [
-        "relative text-sm leading-none",
-
-        // Alignments
-        "items-center inline-flex text-center align-bottom",
-
-        // Shape
-        "rounded-r-md",
-
-        // Size
-        "px-2.5 py-1.5",
-        "-ml-px",
-
-        // Colors
-        "text-surface-600 dark:text-surface-100",
-        "bg-surface-100 dark:bg-surface-800",
-        "ring-1 ring-inset ring-surface-300 dark:ring-surface-700",
-
-        // States
-        "hover:bg-surface-200 dark:hover:bg-surface-700",
-        "focus:outline-none focus:outline-offset-0 focus:ring-1",
-        "focus:ring-primary-500 dark:focus:ring-primary-400",
-      ],
-    },
-  },
-  loadingicon: {
-    class: [
-      "text-sm leading-none text-surface-500 dark:text-surface-0/70",
-      "absolute top-[50%] right-[0.5rem] -mt-2 animate-spin",
-    ],
-  },
-  panel: {
-    class: [
-      // Position
-      "absolute top-0 left-0",
-      "mt-2",
-
-      // Shape
-      "border-0",
-      "rounded-md",
-      "shadow-md",
-      "max-h-[15rem]",
-      "overflow-auto",
-
-      // Color
-      "bg-surface-0 dark:bg-surface-800",
-      "text-surface-800 dark:text-white/80",
-      "ring-1 ring-inset ring-surface-300 dark:ring-surface-700",
-    ],
-  },
-  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-transparent text-surface-700 dark:text-white/80":
-          !context.focused && context.selected,
-      },
-
-      //States
-      "hover:bg-primary-500 dark:hover:bg-primary-400 hover:text-white dark:hover:text-surface-700",
-
-      // 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",
-    ],
-  },
-  emptymessage: {
-    class: [
-      // Font
-      "leading-none",
-      "sm:text-sm",
-
-      // Spacing
-      "py-2 px-4",
-
-      // Color
-      "text-surface-800 dark:text-white/80",
-      "bg-transparent",
-    ],
-  },
-  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",
-  },
-};

package/presets/Wind/avatar/index.js

@@ -1,48 +0,0 @@
-export default {
-  root: ({ props, parent }) => ({
-    class: [
-      // Font
-      {
-        "text-sm": props.size == null || props.size == "normal",
-        "text-lg": props.size == "large",
-        "text-xl": props.size == "xlarge",
-      },
-
-      // Alignments
-      "inline-flex items-center justify-center",
-      "shrink-0",
-      "relative",
-
-      // Sizes
-      {
-        "h-8 w-8": props.size == null || props.size == "normal",
-        "w-12 h-12": props.size == "large",
-        "w-16 h-16": props.size == "xlarge",
-      },
-      { "-ml-4": parent.instance.$style?.name == "avatargroup" },
-
-      // Shapes
-      {
-        "rounded-lg": props.shape == "square",
-        "rounded-full": props.shape == "circle",
-      },
-      { "border-2": parent.instance.$style?.name == "avatargroup" },
-
-      // Colors
-      "bg-surface-100 dark:bg-surface-700",
-      {
-        "border-white dark:border-surface-800":
-          parent.instance.$style?.name == "avatargroup",
-      },
-    ],
-  }),
-  image: ({ props }) => ({
-    class: [
-      "h-full w-full",
-      {
-        "rounded-lg": props.shape == "square",
-        "rounded-full": props.shape == "circle",
-      },
-    ],
-  }),
-};

package/presets/Wind/badge/index.js

@@ -1,43 +0,0 @@
-export default {
-  root: ({ props, context }) => ({
-    class: [
-      // Font
-      "font-medium",
-      {
-        "text-xs leading-[1.5rem]": props.size == null,
-        "text-lg leading-[2.25rem]": props.size == "large",
-        "text-2xl leading-[3rem]": props.size == "xlarge",
-      },
-
-      // Alignment
-      "text-center inline-block",
-
-      // Size
-      "p-0 px-1",
-      {
-        "min-w-[1.5rem] h-[1.5rem]": props.size == null,
-        "min-w-[2.25rem] h-[2.25rem]": props.size == "large",
-        "min-w-[3rem] h-[3rem]": props.size == "xlarge",
-      },
-
-      // Shape
-      {
-        "rounded-full": props.value.length == 1,
-        "rounded-[0.71rem]": props.value.length !== 1,
-      },
-
-      // Color
-      "text-white dark:text-surface-900",
-      {
-        "bg-primary-500 dark:bg-primary-400":
-          props.severity == null || props.severity == "primary",
-        "bg-surface-500 dark:bg-surface-400": props.severity == "secondary",
-        "bg-green-500 dark:bg-green-400": props.severity == "success",
-        "bg-blue-500 dark:bg-blue-400": props.severity == "info",
-        "bg-orange-500 dark:bg-orange-400": props.severity == "warning",
-        "bg-purple-500 dark:bg-purple-400": props.severity == "help",
-        "bg-red-500 dark:bg-red-400": props.severity == "danger",
-      },
-    ],
-  }),
-};

package/presets/Wind/badgedirective/index.js

@@ -1,50 +0,0 @@
-export default {
-  root: ({ context }) => ({
-    class: [
-      // Font
-      "font-medium",
-      "text-xs leading-6 font-sans",
-
-      // Alignment
-      "flex items-center justify-center",
-      "text-center",
-
-      // Position
-      "absolute top-0 right-0 transform translate-x-1/2 -translate-y-1/2 origin-top-right",
-
-      // Size
-      "m-0",
-      {
-        "p-0": context.nogutter || context.dot,
-        "p-1": !context.nogutter && !context.dot,
-        "min-w-[0.5rem] h-2": context.dot,
-        "min-w-[1rem] h-4": !context.dot,
-      },
-
-      // Shape
-      {
-        "rounded-full": context.nogutter || context.dot,
-        "rounded-[10px]": !context.nogutter && !context.dot,
-      },
-
-      // Color
-      "text-white dark:text-surface-900",
-      "ring-1 ring-white dark:ring-surface-900",
-      {
-        "bg-primary-500 dark:bg-primary-400":
-          !context.info &&
-          !context.success &&
-          !context.warning &&
-          !context.danger &&
-          !context.help &&
-          !context.secondary,
-        "bg-surface-500 dark:bg-surface-400": context.secondary,
-        "bg-green-500 dark:bg-green-400": context.success,
-        "bg-blue-500 dark:bg-blue-400": context.info,
-        "bg-orange-500 dark:bg-orange-400": context.warning,
-        "bg-purple-500 dark:bg-purple-400": context.help,
-        "bg-red-500 dark:bg-red-400": context.danger,
-      },
-    ],
-  }),
-};

package/presets/Wind/blockui/index.js

@@ -1,8 +0,0 @@
-export default {
-  root: {
-    class: "relative",
-  },
-  mask: {
-    class: "bg-surface-900/60 backdrop-blur-sm",
-  },
-};

package/presets/Wind/breadcrumb/index.js

@@ -1,45 +0,0 @@
-export default {
-  menu: {
-    class: [
-      // Flex & Alignment
-      "flex items-center flex-nowrap gap-x-1.5",
-
-      // Spacing
-      "m-0 p-0 list-none leading-none",
-    ],
-  },
-  action: {
-    class: [
-      // Font
-      "font-semibold text-decoration-none text-sm",
-
-      // Flex & Alignment
-      "flex items-center gap-x-1.5 ",
-
-      // Shape
-      "rounded-md",
-
-      // Color
-      "text-surface-500 dark:text-white/70",
-
-      // States
-      "focus-visible:outline-none focus-visible:outline-offset-0",
-      "focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400",
-
-      // Transitions
-      "transition-shadow duration-200",
-    ],
-  },
-  icon: {
-    class: "text-surface-500 dark:text-white/70",
-  },
-  separator: {
-    class: [
-      // Flex & Alignment
-      "flex items-center shrink-0",
-
-      // Color
-      "text-surface-500 dark:text-white/70",
-    ],
-  },
-};