@fy-/fws-vue 0.1.3 → 0.1.5

package/presets/Lara/carousel/index.js

@@ -0,0 +1,152 @@
+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

@@ -0,0 +1,228 @@
+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

@@ -0,0 +1,106 @@
+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

@@ -0,0 +1,45 @@
+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

@@ -0,0 +1,118 @@
+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",
+    ],
+  },
+};