@fy-/fws-vue 0.3.0 → 0.3.1

package/presets/Wind/progressbar/index.js

@@ -1,68 +0,0 @@
-export default {
-  root: ({ props }) => ({
-    class: [
-      // Position and Overflow
-      "relative overflow-hidden",
-
-      // Shape and Size
-      "border-0",
-      "rounded-md",
-      { "h-7 pt-5": props.mode !== "indeterminate" && props.showValue },
-      {
-        "h-2 bg-surface-100 dark:bg-surface-700 ":
-          props.mode == "indeterminate" || !props.showValue,
-      },
-
-      // Before & After (!indeterminate)
-      {
-        "before:absolute before:w-full before:rounded-md before:h-2 before:top-[1.25rem] before:left-0 before:bottom-0 before:bg-surface-100 dark:before:bg-surface-700":
-          props.mode !== "indeterminate",
-      },
-    ],
-  }),
-  value: ({ props }) => ({
-    class: [
-      // Flexbox & Overflow & Position
-      {
-        "absolute flex items-center justify-center":
-          props.mode !== "indeterminate",
-      },
-
-      // Colors
-      "bg-primary-500 dark:bg-primary-400",
-
-      // Spacing & Sizing
-      "m-0",
-      { "h-2 w-0": props.mode !== "indeterminate" },
-
-      // Shape
-      "border-0 rounded-md",
-
-      // Transitions
-      {
-        "transition-width duration-1000 ease-in-out":
-          props.mode !== "indeterminate",
-        "progressbar-value-animate": props.mode == "indeterminate",
-      },
-
-      // Before & After (indeterminate)
-      {
-        "before:absolute before:top-0 before:left-0 before:bottom-0 before:bg-inherit ":
-          props.mode == "indeterminate",
-        "after:absolute after:top-0 after:left-0 after:bottom-0 after:bg-inherit after:delay-1000":
-          props.mode == "indeterminate",
-      },
-    ],
-  }),
-  label: {
-    class: [
-      // Flexbox
-      "inline-flex justify-end",
-      "absolute inset-0 mr-1 -top-[1.15rem]",
-
-      // Font and Text
-      "text-sm text-surface-600 dark:text-surface-0/60",
-      "leading-none",
-    ],
-  },
-};

package/presets/Wind/progressspinner/index.js

@@ -1,51 +0,0 @@
-export default {
-  root: {
-    class: [
-      // Position
-      "relative",
-      "mx-auto",
-
-      // Sizing
-      "w-28",
-      "h-28",
-
-      // Flexbox
-      "inline-block",
-
-      // Pseudo-Elements
-      "before:block",
-      "before:pt-full",
-    ],
-  },
-  spinner: {
-    class: [
-      // Position
-      "absolute",
-      "top-0",
-      "bottom-0",
-      "left-0",
-      "right-0",
-      "m-auto",
-
-      // Sizing
-      "w-full",
-      "h-full",
-
-      // Transformations
-      "transform",
-      "origin-center",
-
-      // Animations
-      "animate-spin",
-    ],
-  },
-  circle: {
-    class: [
-      // Colors
-      "text-red-500",
-
-      // Misc
-      "progress-spinner-circle",
-    ],
-  },
-};

package/presets/Wind/radiobutton/index.js

@@ -1,92 +0,0 @@
-export default {
-  root: {
-    class: [
-      "relative",
-
-      // Flexbox & Alignment
-      "inline-flex",
-      "align-bottom",
-
-      // Size
-      "w-4 h-4",
-
-      // Misc
-      "cursor-default",
-      "select-none",
-    ],
-  },
-  box: ({ props }) => ({
-    class: [
-      // Flexbox
-      "flex justify-center items-center",
-
-      // Size
-      "w-4 h-4",
-      "text-sm",
-      "font-medium",
-
-      // Shape
-      "border-2",
-      "rounded-full",
-
-      // Transition
-      "transition duration-200 ease-in-out",
-
-      // Colors
-      {
-        "text-surface-700 dark:text-white/80":
-          props.value !== props.modelValue && props.value !== undefined,
-        "bg-surface-0 dark:bg-surface-900":
-          props.value !== props.modelValue && props.value !== undefined,
-        "border-surface-300 dark:border-surface-700":
-          props.value !== props.modelValue &&
-          props.value !== undefined &&
-          !props.invalid,
-        "border-primary-500 dark:border-primary-400":
-          props.value == props.modelValue && props.value !== undefined,
-      },
-
-      // Invalid State
-      { "border-red-500 dark:border-red-400": props.invalid },
-
-      // States
-      {
-        "outline-none outline-offset-0": !props.disabled,
-        "peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-surface-0 dark:focus-visible:ring-offset-surface-800 peer-focus-visible:ring-primary-500 dark:peer-focus-visible:ring-primary-400":
-          !props.disabled,
-        "opacity-60 cursor-default": props.disabled,
-      },
-    ],
-  }),
-  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-2 border-surface-300 dark:border-surface-700",
-
-      // Misc
-      "appearance-none",
-      "cursor-default",
-    ],
-  },
-  icon: {
-    class: "hidden",
-  },
-};

package/presets/Wind/rating/index.js

@@ -1,86 +0,0 @@
-export default {
-  root: ({ props }) => ({
-    class: [
-      "relative",
-
-      // Flex & Alignment
-      "flex items-center",
-      "gap-1",
-
-      // Misc
-      {
-        "opacity-60 select-none pointer-events-none cursor-default":
-          props.disabled,
-      },
-    ],
-  }),
-  cancelitem: ({ context }) => ({
-    class: [
-      // Flex & Alignment
-      "inline-flex items-center",
-
-      //State
-      {
-        "outline-none ring-2 ring-primary-500 dark:ring-primary-400":
-          context.focused,
-      },
-
-      // Misc
-      "cursor-pointer",
-    ],
-  }),
-  cancelicon: {
-    class: [
-      // Size
-      "w-5 h-5",
-
-      // Color
-      "text-red-500 dark:text-red-400",
-    ],
-  },
-  item: ({ props, context }) => ({
-    class: [
-      // Flex & Alignment
-      "inline-flex items-center",
-
-      // State
-      {
-        "outline-none ring-2 ring-primary-500 dark:ring-primary-400":
-          context.focused,
-      },
-
-      // Misc
-      {
-        "cursor-pointer": !props.readonly,
-        "cursor-default": props.readonly,
-      },
-    ],
-  }),
-  officon: ({ props }) => ({
-    class: [
-      // Size
-      "w-5 h-5",
-
-      // Color
-      "text-surface-700 dark:text-surface-0/70",
-
-      // State
-      { "hover:text-primary-500 dark:hover:text-primary-400": !props.readonly },
-
-      // Transition
-      "transition duration-200 ease-in",
-    ],
-  }),
-  onicon: ({ props }) => ({
-    class: [
-      // Size
-      "w-5 h-5",
-
-      // Color
-      "text-primary-500 dark:text-primary-400",
-
-      // Transition
-      "transition duration-200 ease-in",
-    ],
-  }),
-};

package/presets/Wind/ripple/index.js

@@ -1,6 +0,0 @@
-export default {
-  root: {
-    class: ["block absolute bg-surface-0/50 rounded-full pointer-events-none"],
-    style: "transform: scale(0)",
-  },
-};

package/presets/Wind/scrollpanel/index.js

@@ -1,77 +0,0 @@
-export default {
-  wrapper: {
-    class: [
-      // Size & Position
-      "h-full w-full",
-
-      // Layering
-      "z-[1]",
-
-      // Spacing
-      "overflow-hidden",
-
-      // Misc
-      "relative float-left",
-    ],
-  },
-  content: {
-    class: [
-      // Size & Spacing
-      "h-[calc(100%+12px)] w-[calc(100%+12px)] pr-[12px] pb-[12px] pl-0 pt-0",
-
-      // Overflow & Scrollbar
-      "overflow-scroll scrollbar-none",
-
-      // Box Model
-      "box-border",
-
-      // Position
-      "relative",
-
-      // Webkit Specific
-      "[&::-webkit-scrollbar]:hidden",
-    ],
-  },
-  barX: {
-    class: [
-      // Size & Position
-      "h-[6px] bottom-0",
-
-      // Appearance
-      "bg-surface-100 dark:bg-surface-700 rounded",
-
-      // Interactivity
-      "cursor-pointer",
-
-      // Visibility & Layering
-      "invisible z-20",
-
-      // Transition
-      "transition duration-[250ms] ease-linear",
-
-      // Misc
-      "relative",
-    ],
-  },
-  barY: {
-    class: [
-      // Size & Position
-      "w-[6px] top-0",
-
-      // Appearance
-      "bg-surface-100 dark:bg-surface-700 rounded",
-
-      // Interactivity
-      "cursor-pointer",
-
-      // Visibility & Layering
-      "z-20",
-
-      // Transition
-      "transition duration-[250ms] ease-linear",
-
-      // Misc
-      "relative",
-    ],
-  },
-};

package/presets/Wind/scrolltop/index.js

@@ -1,45 +0,0 @@
-export default {
-  root: ({ props }) => ({
-    class: [
-      // Flex & Alignment
-      "flex items-center justify-center",
-
-      // Positioning
-      {
-        sticky: props.target === "parent",
-        fixed: props.target === "window",
-      },
-      "bottom-[20px] right-[20px]",
-      "ml-auto",
-
-      // Shape & Size
-      {
-        "rounded-md h-8 w-8": props.target === "parent",
-        "h-12 w-12 rounded-full shadow-md": props.target === "window",
-      },
-
-      // Color
-      "text-white dark:text-surface-900",
-      {
-        "bg-primary-500 dark:bg-primary-400 hover:bg-primary-600 dark:hover:bg-primary-300":
-          props.target === "parent",
-        "bg-surface-500 dark:bg-surface-400 hover:bg-surface-600 dark:hover:bg-surface-300":
-          props.target === "window",
-      },
-
-      // States
-      {
-        "hover:bg-primary-600 dark:hover:bg-primary-300":
-          props.target === "parent",
-        "hover:bg-surface-600 dark:hover:bg-surface-300":
-          props.target === "window",
-      },
-    ],
-  }),
-  transition: {
-    enterFromClass: "opacity-0",
-    enterActiveClass: "transition-opacity duration-150",
-    leaveActiveClass: "transition-opacity duration-150",
-    leaveToClass: "opacity-0",
-  },
-};

package/presets/Wind/selectbutton/index.js

@@ -1,58 +0,0 @@
-export default {
-  root: ({ props }) => ({
-    class: [
-      "shadow-sm",
-      {
-        "opacity-60 select-none pointer-events-none cursor-default":
-          props.disabled,
-      },
-    ],
-  }),
-  button: ({ context, props }) => ({
-    class: [
-      "relative",
-      // Font
-      "text-sm",
-      "leading-none",
-
-      // Flex Alignment
-      "inline-flex items-center align-bottom text-center",
-
-      // Spacing
-      "px-2.5 py-1.5",
-
-      // Shape
-      "ring-1",
-      { "ring-surface-200 dark:ring-surface-700": !props.invalid },
-      "first:rounded-l-md first:rounded-tr-none first:rounded-br-none",
-      "last:rounded-tl-none last:rounded-bl-none last:rounded-r-md ",
-
-      // Color
-      {
-        "bg-surface-0 dark:bg-surface-900": !context.active,
-        "text-surface-700 dark:text-white/80": !context.active,
-        "bg-surface-100 dark:bg-surface-700": context.active,
-      },
-
-      // Invalid State
-      { "ring-red-500 dark:ring-red-400": props.invalid },
-
-      // States
-      "focus:outline-none focus:outline-offset-0 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10",
-      "hover:bg-surface-200 dark:hover:bg-surface-600/80",
-      {
-        "opacity-60 select-none pointer-events-none cursor-default":
-          context.disabled,
-      },
-
-      // Transition
-      "transition duration-200",
-
-      // Misc
-      "cursor-pointer select-none overflow-hidden",
-    ],
-  }),
-  label: {
-    class: "font-semibold",
-  },
-};

package/presets/Wind/sidebar/index.js

@@ -1,165 +0,0 @@
-export default {
-  root: ({ props }) => ({
-    class: [
-      // Flexbox
-      "flex flex-col",
-
-      // Position
-      "relative",
-      {
-        "!transition-none !transform-none !w-screen !h-screen !max-h-full !top-0 !left-0":
-          props.position == "full",
-      },
-
-      // Size
-      {
-        "h-full w-full max-w-[28rem]":
-          props.position == "left" || props.position == "right",
-        "h-auto w-full": props.position == "top" || props.position == "bottom",
-      },
-
-      // Shape
-      "border-0 dark:border",
-      "shadow-xl",
-
-      // Colors
-      "bg-surface-0 dark:bg-surface-800",
-      "text-surface-700 dark:text-white/80",
-      "dark:border-surface-700",
-
-      // Transitions
-      "transition-transform",
-      "duration-300",
-
-      // Misc
-      "pointer-events-auto",
-    ],
-  }),
-  header: {
-    class: [
-      // Flexbox and Alignment
-      "flex items-center justify-between",
-      "shrink-0",
-
-      // Spacing
-      "px-6 pt-6",
-
-      // Colors
-      "bg-surface-0 dark:bg-surface-800",
-      "text-surface-700 dark:text-surface-0/80",
-    ],
-  },
-  title: {
-    class: ["font-semibold leading-6 text-base m-0"],
-  },
-  icons: {
-    class: ["flex items-center"],
-  },
-  closeButton: {
-    class: [
-      "relative",
-
-      // Flexbox and Alignment
-      "flex items-center justify-center",
-
-      // Size and Spacing
-      "mr-2",
-      "last:mr-0",
-      "w-6 h-6",
-
-      // Shape
-      "border-0",
-      "rounded-full",
-
-      // Colors
-      "text-surface-500",
-      "bg-transparent",
-
-      // Transitions
-      "transition duration-200 ease-in-out",
-
-      // States
-      "hover:text-surface-700 dark:hover:text-white/80",
-      "hover:bg-surface-100 dark:hover:bg-surface-800/80",
-      "focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-inset",
-      "focus:ring-primary-500 dark:focus:ring-primary-400",
-
-      // Misc
-      "overflow-hidden",
-    ],
-  },
-  closeicon: {
-    class: [
-      // Display
-      "inline-block",
-
-      // Size
-      "w-3",
-      "h-3",
-    ],
-  },
-  content: {
-    class: [
-      // Spacing and Size
-      "px-6 pb-6",
-      "mt-6",
-      "h-full",
-      "w-full",
-
-      // Growth and Overflow
-      "grow",
-      "overflow-y-auto",
-    ],
-  },
-  mask: ({ props }) => ({
-    class: [
-      // Transitions
-      "transition",
-      "duration-300",
-      { "p-5": !props.position == "full" },
-
-      // Background and Effects
-      {
-        "has-[.mask-active]:bg-transparent dark:has-[.mask-active]:bg-transparent bg-surface-500/70 dark:bg-surface-700/70":
-          props.modal,
-        "has-[.mask-active]:backdrop-blur-none backdrop-blur-sm": props.modal,
-      },
-    ],
-  }),
-  transition: ({ props }) => {
-    return props.position === "top"
-      ? {
-          enterFromClass:
-            "translate-x-0 -translate-y-full translate-z-0 mask-active",
-          leaveToClass:
-            "translate-x-0 -translate-y-full translate-z-0 mask-active",
-        }
-      : props.position === "bottom"
-        ? {
-            enterFromClass:
-              "translate-x-0 translate-y-full translate-z-0 mask-active",
-            leaveToClass:
-              "translate-x-0 translate-y-full translate-z-0 mask-active",
-          }
-        : props.position === "left"
-          ? {
-              enterFromClass:
-                "-translate-x-full translate-y-0 translate-z-0 mask-active",
-              leaveToClass:
-                "-translate-x-full translate-y-0 translate-z-0 mask-active",
-            }
-          : props.position === "right"
-            ? {
-                enterFromClass:
-                  "translate-x-full translate-y-0 translate-z-0 mask-active",
-                leaveToClass:
-                  "translate-x-full translate-y-0 translate-z-0 mask-active",
-              }
-            : {
-                enterFromClass: "opacity-0 mask-active",
-                enterActiveClass: "transition-opacity duration-400 ease-in",
-                leaveActiveClass: "transition-opacity duration-400 ease-in",
-                leaveToClass: "opacity-0 mask-active",
-              };
-  },
-};

package/presets/Wind/skeleton/index.js

@@ -1,19 +0,0 @@
-export default {
-  root: ({ props }) => ({
-    class: [
-      "overflow-hidden",
-      {
-        "animate-pulse": props.animation !== "none",
-      },
-
-      // Round
-      {
-        "rounded-full": props.shape === "circle",
-        "rounded-md": props.shape !== "circle",
-      },
-
-      // Colors
-      "bg-surface-200 dark:bg-surface-700",
-    ],
-  }),
-};