@fy-/fws-vue 0.3.0 → 0.3.1

package/presets/Lara/carousel/index.js

@@ -1,152 +0,0 @@
-export default {
-  root: {
-    class: [
-      // Flexbox
-      "flex flex-col",
-    ],
-  },
-  content: {
-    class: [
-      // Flexbox & Overflow
-      "flex flex-col overflow-auto",
-    ],
-  },
-  container: ({ props }) => ({
-    class: [
-      // Flexbox
-      "flex",
-
-      // Orientation
-      {
-        "flex-row": props.orientation !== "vertical",
-        "flex-col": props.orientation == "vertical",
-      },
-    ],
-  }),
-  previousbutton: {
-    class: [
-      // Flexbox & Alignment
-      "flex justify-center items-center self-center",
-
-      // Sizing & Overflow
-      "overflow-hidden w-8 h-8",
-
-      // Spacing
-      "mx-2",
-
-      // Shape
-      "rounded-full",
-
-      // Border & Background
-      "border-0 bg-transparent",
-
-      // Color
-      "text-surface-600",
-
-      // Transitions
-      "transition duration-200 ease-in-out",
-    ],
-  },
-  nextbutton: {
-    class: [
-      // Flexbox & Alignment
-      "flex justify-center items-center self-center",
-
-      // Sizing & Overflow
-      "overflow-hidden w-8 h-8",
-
-      // Spacing
-      "mx-2",
-
-      // Shape
-      "rounded-full",
-
-      // Border & Background
-      "border-0 bg-transparent",
-
-      // Color
-      "text-surface-600",
-
-      // Transitions
-      "transition duration-200 ease-in-out",
-    ],
-  },
-  itemscontent: {
-    class: [
-      // Overflow & Width
-      "overflow-hidden w-full",
-    ],
-  },
-  itemscontainer: ({ props }) => ({
-    class: [
-      // Flexbox
-      "flex",
-
-      // Orientation & Sizing
-      {
-        "flex-row": props.orientation !== "vertical",
-        "flex-col h-full": props.orientation == "vertical",
-      },
-    ],
-  }),
-  item: ({ props }) => ({
-    class: [
-      // Flexbox
-      "flex shrink-0 grow ",
-
-      // Size
-      {
-        "w-full sm:w-[50%] md:w-[33.333333333333336%]":
-          props.orientation !== "vertical",
-
-        "w-full h-full": props.orientation == "vertical",
-      },
-    ],
-  }),
-  itemcloned: ({ props }) => ({
-    class: [
-      // Flexbox
-      "flex shrink-0 grow",
-      "unvisible",
-
-      // Size
-      {
-        "w-full sm:w-[50%] md:w-[33.333333333333336%]":
-          props.orientation !== "vertical",
-
-        "w-full h-full": props.orientation == "vertical",
-      },
-    ],
-  }),
-  indicators: {
-    class: [
-      // Flexbox & Alignment
-      "flex flex-row justify-center flex-wrap",
-    ],
-  },
-  indicator: {
-    class: [
-      // Spacing
-      "mr-2 mb-2",
-    ],
-  },
-  indicatorbutton: ({ context }) => ({
-    class: [
-      // Sizing & Shape
-      "w-8 h-2 rounded-0",
-
-      // Transitions
-      "transition duration-200",
-
-      // Focus Styles
-      "focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50",
-
-      // Color & Background
-      {
-        "bg-surface-200 hover:bg-surface-300 dark:bg-surface-700 dark:hover:bg-surface-600":
-          !context.highlighted,
-        "bg-primary-500 hover:bg-primary-600": context.highlighted,
-      },
-    ],
-  }),
-};

package/presets/Lara/cascadeselect/index.js

@@ -1,228 +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,
-      },
-    ],
-  }),
-  label: ({ props }) => ({
-    class: [
-      // Font
-      "font-sans",
-      "leading-none",
-
-      // Flex & Alignment
-      " flex flex-auto",
-
-      // Sizing and Spacing
-      "w-[1%]",
-      "p-3",
-
-      // Shape
-      "rounded-none",
-
-      // Color and Background
-      "bg-transparent",
-      "border-0",
-      {
-        "text-surface-800 dark:text-white/80": props.modelValue,
-        "text-surface-400 dark:text-surface-500": !props.modelValue,
-      },
-      "placeholder:text-surface-400 dark:placeholder:text-surface-500",
-
-      // Transitions
-      "transition",
-      "duration-200",
-
-      // States
-      "focus:outline-none focus:shadow-none",
-
-      // Misc
-      "relative",
-      "cursor-pointer",
-      "overflow-hidden overflow-ellipsis",
-      "whitespace-nowrap",
-      "appearance-none",
-    ],
-  }),
-  dropdownbutton: {
-    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-700",
-      "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",
-
-      // Shape
-      "border-0",
-      "rounded-none",
-
-      // Spacing
-      "m-0",
-
-      //  Colors
-      {
-        "text-surface-500 dark:text-white/70":
-          !context.focused && !context.active,
-        "text-surface-500 dark:text-white/70 bg-surface-200 dark:bg-surface-600/90":
-          context.focused && !context.active,
-        "text-primary-700 dark:text-surface-0/80 bg-primary-50 dark:bg-primary-400/30":
-          context.focused && context.active,
-        "text-primary-700 dark:text-surface-0/80 bg-primary-50 dark:bg-primary-400/30":
-          !context.focused && context.active,
-      },
-
-      // Hover States
-      {
-        "hover:bg-surface-100 dark:hover:bg-surface-600/80": !context.active,
-        "hover:bg-primary-500/50 dark:hover:bg-primary-300/30 text-primary-700 dark:text-surface-0/80":
-          context.active,
-      },
-
-      // Transitions
-      "transition-shadow",
-      "duration-200",
-
-      // Misc
-      "cursor-pointer",
-      "overflow-hidden",
-      "whitespace-nowrap",
-    ],
-  }),
-  content: {
-    class: [
-      "relative",
-
-      // Flexbox
-      "flex",
-      "items-center",
-
-      // Spacing
-      "py-3",
-      "px-5",
-
-      // Misc
-      "no-underline",
-      "overflow-hidden",
-      "cursor-pointer",
-      "select-none",
-    ],
-  },
-  groupicon: {
-    class: [
-      // Alignment
-      "ml-auto",
-    ],
-  },
-  sublist: {
-    class: [
-      // Size
-      "w-full",
-
-      // Spacing
-      "py-1",
-      "m-0",
-      "list-none",
-
-      // Shape
-      "shadow-none sm:shadow-md",
-      "border-0",
-
-      // Position
-      "static sm:absolute",
-      "z-10",
-
-      // Color
-      "bg-surface-0 dark:bg-surface-700",
-    ],
-  },
-  separator: {
-    class: "border-t border-surface-200 dark:border-surface-600 my-1",
-  },
-  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/checkbox/index.js

@@ -1,106 +0,0 @@
-export default {
-  root: {
-    class: [
-      "relative",
-
-      // Alignment
-      "inline-flex",
-      "align-bottom",
-
-      // Size
-      "w-6",
-      "h-6",
-
-      // Misc
-      "cursor-pointer",
-      "select-none",
-    ],
-  },
-  box: ({ props, context }) => ({
-    class: [
-      // Alignment
-      "flex",
-      "items-center",
-      "justify-center",
-
-      // Size
-      "w-6",
-      "h-6",
-
-      // Shape
-      "rounded-md",
-      "border-2",
-
-      // Colors
-      {
-        "border-surface-200 bg-surface-0 dark:border-surface-700 dark:bg-surface-900":
-          !context.checked && !props.invalid,
-        "border-primary-500 bg-primary-500 dark:border-primary-400 dark:bg-primary-400":
-          context.checked,
-      },
-
-      // Invalid State
-      { "border-red-500 dark:border-red-400": props.invalid },
-
-      // States
-      {
-        "peer-hover:border-primary-500 dark:peer-hover:border-primary-400":
-          !props.disabled && !context.checked && !props.invalid,
-        "peer-hover:bg-primary-600 dark:peer-hover:bg-primary-300 peer-hover:border-primary-700 dark:peer-hover:border-primary-300":
-          !props.disabled && context.checked,
-        "peer-focus-visible:border-primary-500 dark:peer-focus-visible:border-primary-400 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-400/20 dark:peer-focus-visible:ring-primary-300/20":
-          !props.disabled,
-        "cursor-default opacity-60": props.disabled,
-      },
-
-      // Transitions
-      "transition-colors",
-      "duration-200",
-    ],
-  }),
-  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-200 dark:border-surface-700",
-
-      // Misc
-      "appearance-none",
-      "cursor-pointer",
-    ],
-  },
-  icon: {
-    class: [
-      // Font
-      "text-base leading-none",
-
-      // Size
-      "w-4",
-      "h-4",
-
-      // Colors
-      "text-white dark:text-surface-900",
-
-      // Transitions
-      "transition-all",
-      "duration-200",
-    ],
-  },
-};

package/presets/Lara/chip/index.js

@@ -1,45 +0,0 @@
-export default {
-  root: {
-    class: [
-      // Flexbox
-      "inline-flex items-center",
-
-      // Spacing
-      "px-3",
-
-      // Shape
-      "rounded-[1.14rem]",
-
-      // Colors
-      "text-surface-700 dark:text-white/70",
-      "bg-surface-200 dark:bg-surface-700",
-    ],
-  },
-  label: {
-    class: "leading-6 my-1.5 mx-0",
-  },
-  icon: {
-    class: "leading-6 mr-2",
-  },
-  image: {
-    class: ["w-9 h-9 -ml-3 mr-2", "rounded-full"],
-  },
-  removeIcon: {
-    class: [
-      // Shape
-      "rounded-md leading-6",
-
-      // Spacing
-      "ml-2",
-
-      // Size
-      "w-4 h-4",
-
-      // Transition
-      "transition duration-200 ease-in-out",
-
-      // Misc
-      "cursor-pointer",
-    ],
-  },
-};

package/presets/Lara/chips/index.js

@@ -1,118 +0,0 @@
-export default {
-  root: ({ props }) => ({
-    class: [
-      "flex",
-      {
-        "opacity-60 select-none pointer-events-none cursor-default":
-          props.disabled,
-      },
-    ],
-  }),
-  container: ({ state, props }) => ({
-    class: [
-      // Font
-      "font-sans text-base leading-none",
-
-      // Flex
-      "flex items-center flex-wrap gap-2",
-
-      // Spacing
-      "m-0 py-1.5 px-3",
-
-      // Size
-      "w-full",
-      "min-h-[2.877rem]",
-
-      // Shape
-      "list-none",
-      "rounded-md",
-
-      // Color
-      "text-surface-700 dark:text-white/80",
-      "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 },
-
-      // States
-      {
-        "hover:border-primary-500 dark:hover:border-primary-400":
-          !props.invalid,
-      },
-      "focus:outline-none focus:outline-offset-0",
-      { "ring ring-primary-400/50 dark:ring-primary-300/50": state.focused },
-      { "ring ring-primary-400/50 dark:ring-primary-300/50": state.hovered },
-
-      // Transition
-      "transition-colors duration-200",
-
-      // Misc
-      "cursor-text overflow-hidden",
-      "appearance-none",
-    ],
-  }),
-
-  inputtoken: {
-    class: ["py-1.5 px-0", "inline-flex flex-auto"],
-  },
-  input: {
-    class: [
-      // Font
-      "font-sans text-base leading-[1.2]",
-
-      // Size
-      "w-full",
-
-      // Spacing
-      "p-0 m-0",
-
-      // Shape
-      "appearance-none rounded-none",
-      "border-0 outline-none",
-      "shadow-none",
-
-      // Color
-      "text-surface-700 dark:text-white/80",
-      "bg-transparent",
-    ],
-  },
-  token: {
-    class: [
-      // Flexbox
-      "inline-flex items-center",
-
-      // Spacing
-      "py-1.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",
-    ],
-  },
-};