@fy-/fws-vue 0.3.0 → 0.3.1

package/presets/Lara/dropdown/index.js

@@ -1,300 +0,0 @@
-export default {
-  root: ({ props, state }) => ({
-    class: [
-      // Display and Position
-      "inline-flex",
-      "relative",
-
-      // Shape
-      "rounded-md",
-
-      // Color and Background
-      "bg-surface-0 dark:bg-surface-900",
-      "border",
-      { "border-surface-300 dark:border-surface-600": !props.invalid },
-
-      // Invalid State
-      { "border-red-500 dark:border-red-400": props.invalid },
-
-      // Transitions
-      "transition-all",
-      "duration-200",
-
-      // States
-      {
-        "hover:border-primary-500 dark:hover:border-primary-300":
-          !props.invalid,
-      },
-      {
-        "outline-none outline-offset-0 ring ring-primary-400/50 dark:ring-primary-300/50":
-          state.focused,
-      },
-
-      // Misc
-      "cursor-pointer",
-      "select-none",
-      {
-        "opacity-60": props.disabled,
-        "pointer-events-none": props.disabled,
-        "cursor-default": props.disabled,
-      },
-    ],
-  }),
-  input: ({ props }) => ({
-    class: [
-      // Font
-      "font-sans",
-      "leading-none",
-
-      // Display
-      "block",
-      "flex-auto",
-
-      // Color and Background
-      "bg-transparent",
-      "border-0",
-      {
-        "text-surface-800 dark:text-white/80": props.modelValue != undefined,
-        "text-surface-400 dark:text-surface-500": props.modelValue == undefined,
-      },
-      "placeholder:text-surface-400 dark:placeholder:text-surface-500",
-
-      // Sizing and Spacing
-      "w-[1%]",
-      "p-3",
-      { "pr-7": props.showClear },
-
-      // Shape
-      "rounded-none",
-
-      // Transitions
-      "transition",
-      "duration-200",
-
-      // States
-      "focus:outline-none focus:shadow-none",
-
-      // Misc
-      "relative",
-      "cursor-pointer",
-      "overflow-hidden overflow-ellipsis",
-      "whitespace-nowrap",
-      "appearance-none",
-    ],
-  }),
-  trigger: {
-    class: [
-      // Flexbox
-      "flex items-center justify-center",
-      "shrink-0",
-
-      // Color and Background
-      "bg-transparent",
-      "text-surface-500",
-
-      // Size
-      "w-12",
-
-      // Shape
-      "rounded-tr-md",
-      "rounded-br-md",
-    ],
-  },
-  panel: {
-    class: [
-      // Position
-      "absolute top-0 left-0",
-
-      // Shape
-      "border-0 dark:border",
-      "rounded-md",
-      "shadow-md",
-
-      // Color
-      "bg-surface-0 dark:bg-surface-800",
-      "text-surface-800 dark:text-white/80",
-      "dark:border-surface-700",
-    ],
-  },
-  wrapper: {
-    class: [
-      // Sizing
-      "max-h-[200px]",
-
-      // Misc
-      "overflow-auto",
-    ],
-  },
-  list: {
-    class: "py-3 list-none m-0",
-  },
-  item: ({ context }) => ({
-    class: [
-      // Font
-      "font-normal",
-      "leading-none",
-
-      // Position
-      "relative",
-
-      // Shape
-      "border-0",
-      "rounded-none",
-
-      // Spacing
-      "m-0",
-      "py-3 px-5",
-
-      // Color
-      {
-        "text-surface-700 dark:text-white/80":
-          !context.focused && !context.selected && !context.disabled,
-      },
-      {
-        "text-surface-600 dark:text-white/70":
-          !context.focused && !context.selected && context.disabled,
-      },
-      {
-        "bg-surface-200 dark:bg-surface-600/60 text-surface-700 dark:text-white/80":
-          context.focused && !context.selected,
-      },
-      {
-        "bg-primary-100 dark:bg-primary-400/40 text-primary-700 dark:text-white/80":
-          context.focused && context.selected,
-      },
-      {
-        "bg-primary-50 dark:bg-primary-400/40 text-primary-700 dark:text-white/80":
-          !context.focused && context.selected,
-      },
-
-      // States
-      {
-        "hover:bg-surface-100 dark:hover:bg-surface-600/80":
-          !context.focused && !context.selected,
-      },
-      {
-        "hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-surface-600/80":
-          context.focused && !context.selected,
-      },
-      "focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring focus-visible:ring-inset focus-visible:ring-primary-400/50 dark:focus-visible:ring-primary-300/50",
-
-      // Transitions
-      "transition-shadow",
-      "duration-200",
-
-      // Misc
-      { "pointer-events-none cursor-default": context.disabled },
-      { "cursor-pointer": !context.disabled },
-      "overflow-hidden",
-      "whitespace-nowrap",
-    ],
-  }),
-  itemgroup: {
-    class: [
-      // Font
-      "font-bold",
-
-      // Spacing
-      "m-0",
-      "py-3 px-5",
-
-      // Color
-      "text-surface-800 dark:text-white/80",
-      "bg-surface-0 dark:bg-surface-600/80",
-
-      // Misc
-      "cursor-auto",
-    ],
-  },
-  emptymessage: {
-    class: [
-      // Font
-      "leading-none",
-
-      // Spacing
-      "py-3 px-5",
-
-      // Color
-      "text-surface-800 dark:text-white/80",
-      "bg-transparent",
-    ],
-  },
-  header: {
-    class: [
-      // Spacing
-      "py-3 px-5",
-      "m-0",
-
-      // Shape
-      "border-b",
-      "rounded-tl-md",
-      "rounded-tr-md",
-
-      // Color
-      "text-surface-700 dark:text-white/80",
-      "bg-surface-100 dark:bg-surface-800",
-      "border-surface-300 dark:border-surface-700",
-    ],
-  },
-  filtercontainer: {
-    class: "relative",
-  },
-  filterinput: {
-    class: [
-      // Font
-      "font-sans",
-      "leading-none",
-
-      // Sizing
-      "pr-7 py-3 px-3",
-      "-mr-7",
-      "w-full",
-
-      // Color
-      "text-surface-700 dark:text-white/80",
-      "bg-surface-0 dark:bg-surface-900",
-      "border-surface-200 dark:border-surface-700",
-
-      // Shape
-      "border",
-      "rounded-lg",
-      "appearance-none",
-
-      // Transitions
-      "transition",
-      "duration-200",
-
-      // States
-      "hover:border-primary-500 dark:hover:border-primary-300",
-      "focus:ring focus:outline-none focus:outline-offset-0",
-      "focus:ring-primary-400/50 dark:focus:ring-primary-300/50",
-
-      // Misc
-      "appearance-none",
-    ],
-  },
-  filtericon: {
-    class: ["absolute", "top-1/2 right-3", "-mt-2"],
-  },
-  clearicon: {
-    class: [
-      // Color
-      "text-surface-500",
-
-      // Position
-      "absolute",
-      "top-1/2",
-      "right-12",
-
-      // Spacing
-      "-mt-2",
-    ],
-  },
-  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/Lara/fieldset/index.js

@@ -1,98 +0,0 @@
-export default {
-  root: {
-    class: [
-      "block",
-
-      // Spacing
-      "px-4 pt-2 py-3",
-      "inline-size-min",
-
-      // Shape
-      "rounded-md",
-      // Color
-      "border border-surface-200 dark:border-surface-700",
-      "bg-surface-0 dark:bg-surface-900",
-      "text-surface-700 dark:text-surface-0/80",
-    ],
-  },
-  legend: ({ props }) => ({
-    class: [
-      // Font
-      "font-bold",
-      "leading-none",
-
-      // Spacing
-      { "p-0": props.toggleable, "p-5": !props.toggleable },
-
-      // Shape
-      "rounded-md",
-
-      // Color
-      "text-surface-700 dark:text-surface-0/80",
-      "border border-surface-200 dark:border-surface-700",
-      "bg-surface-50 dark:bg-surface-900",
-
-      // Transition
-      "transition-none",
-
-      // States
-      {
-        "hover:bg-surface-100 hover:border-surface-200 hover:text-surface-900 dark:hover:text-surface-0/80 dark:hover:bg-surface-800/80":
-          props.toggleable,
-      },
-    ],
-  }),
-  toggler: ({ props }) => ({
-    class: [
-      // Alignments
-      "flex items-center justify-center",
-      "relative",
-
-      // Spacing
-      { "p-5": props.toggleable },
-
-      // Shape
-      { "rounded-md": props.toggleable },
-
-      // Color
-      {
-        "text-surface-700 dark:text-surface-200 hover:text-surface-900":
-          props.toggleable,
-      },
-
-      // States
-      {
-        "hover:text-surface-900 dark:hover:text-surface-100": props.toggleable,
-      },
-      {
-        "focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring focus-visible:ring-inset focus-visible:ring-primary-400/50 dark:focus-visible:ring-primary-300/50":
-          props.toggleable,
-      },
-
-      // Misc
-      {
-        "transition-none cursor-pointer overflow-hidden select-none":
-          props.toggleable,
-      },
-    ],
-  }),
-  togglerIcon: {
-    class: "mr-2 inline-block",
-  },
-  legendTitle: {
-    class: "flex items-center justify-center leading-none",
-  },
-  content: {
-    class: "p-5",
-  },
-  transition: {
-    enterFromClass: "max-h-0",
-    enterActiveClass:
-      "overflow-hidden transition-[max-height] duration-1000 ease-[cubic-bezier(0.42,0,0.58,1)]",
-    enterToClass: "max-h-[1000px]",
-    leaveFromClass: "max-h-[1000px]",
-    leaveActiveClass:
-      "overflow-hidden transition-[max-height] duration-[450ms] ease-[cubic-bezier(0,1,0,1)]",
-    leaveToClass: "max-h-0",
-  },
-};

package/presets/Lara/fileupload/index.js

@@ -1,173 +0,0 @@
-export default {
-  input: {
-    class: "hidden",
-  },
-  buttonbar: {
-    class: [
-      // Flexbox
-      "flex",
-      "flex-wrap",
-
-      // Colors
-      "bg-surface-50",
-      "dark:bg-surface-800",
-      "text-surface-700",
-      "dark:text-white/80",
-
-      // Spacing
-      "p-5",
-      "gap-2",
-
-      // Borders
-      "border",
-      "border-solid",
-      "border-surface-200",
-      "dark:border-surface-700",
-      "border-b-0",
-
-      // Shape
-      "rounded-tr-lg",
-      "rounded-tl-lg",
-    ],
-  },
-  chooseButton: {
-    class: [
-      "relative",
-
-      // Alignments
-      "items-center inline-flex text-center align-bottom justify-center",
-
-      // Spacing
-      "px-4 py-3",
-
-      // Shape
-      "rounded-md",
-
-      // Font
-      "leading-[normal]",
-      "font-bold",
-
-      // Colors
-      "text-white dark:text-surface-900",
-      "bg-primary-500 dark:bg-primary-400",
-      "border-primary-500 dark:border-primary-400",
-
-      // States
-      "hover:bg-primary-600 dark:hover:bg-primary-300",
-
-      // Misc
-      "overflow-hidden",
-      "cursor-pointer",
-    ],
-  },
-  chooseIcon: {
-    class: ["mr-2", "inline-block"],
-  },
-  chooseButtonLabel: {
-    class: ["flex-1", "font-bold"],
-  },
-  uploadbutton: {
-    icon: {
-      class: "mr-2",
-    },
-  },
-  cancelbutton: {
-    icon: {
-      class: "mr-2",
-    },
-  },
-  content: {
-    class: [
-      // Position
-      "relative",
-
-      // Colors
-      "bg-surface-0",
-      "dark:bg-surface-900",
-      "text-surface-700",
-      "dark:text-white/80",
-
-      // Spacing
-      "p-8",
-
-      // Borders
-      "border",
-      "border-surface-200",
-      "dark:border-surface-700",
-
-      // Shape
-      "rounded-b-lg",
-    ],
-  },
-  file: {
-    class: [
-      // Flexbox
-      "flex",
-      "items-center",
-      "flex-wrap",
-
-      // Spacing
-      "p-4",
-      "mb-2",
-      "last:mb-0",
-
-      // Borders
-      "border",
-      "border-surface-200",
-      "dark:border-surface-700",
-      "gap-2",
-
-      // Shape
-      "rounded",
-    ],
-  },
-  thumbnail: {
-    class: "shrink-0",
-  },
-  fileName: {
-    class: "mb-2 break-all",
-  },
-  fileSize: {
-    class: "mr-2",
-  },
-  uploadicon: {
-    class: "mr-2",
-  },
-  progressbar: {
-    root: {
-      class: [
-        // Position and Overflow
-        "overflow-hidden",
-        "absolute top-0 left-0",
-
-        // Shape and Size
-        "border-0",
-        "h-2",
-        "rounded-md",
-        "w-full",
-
-        // Colors
-        "bg-surface-100 dark:bg-surface-700",
-      ],
-    },
-    value: {
-      class: [
-        // Flexbox & Overflow & Position
-        "absolute flex items-center justify-center overflow-hidden",
-
-        // Colors
-        "bg-primary-500 dark:bg-primary-400",
-
-        // Spacing & Sizing
-        "m-0",
-        "h-full w-0",
-
-        // Shape
-        "border-0",
-
-        // Transitions
-        "transition-width duration-1000 ease-in-out",
-      ],
-    },
-  },
-};

package/presets/Lara/floatlabel/index.js

@@ -1,26 +0,0 @@
-export default {
-  root: {
-    class: [
-      "block relative",
-
-      // Base Label Appearance
-      "[&>*:last-child]:text-surface-900/60 dark:[&>*:last-child]:text-white/60",
-      "[&>*:last-child]:absolute",
-      "[&>*:last-child]:top-1/2",
-      "[&>*:last-child]:-translate-y-1/2",
-      "[&>*:last-child]:left-3",
-      "[&>*:last-child]:pointer-events-none",
-      "[&>*:last-child]:transition-all",
-      "[&>*:last-child]:duration-200",
-      "[&>*:last-child]:ease",
-
-      // Focus Label Appearance
-      "[&>*:last-child]:has-[:focus]:-top-3",
-      "[&>*:last-child]:has-[:focus]:text-sm",
-
-      // Filled Input Label Appearance
-      "[&>*:last-child]:has-[.filled]:-top-3",
-      "[&>*:last-child]:has-[.filled]:text-sm",
-    ],
-  },
-};