@fy-/fws-vue 0.1.3 → 0.1.5

package/presets/Lara/picklist/index.js

@@ -0,0 +1,659 @@
+export default {
+  root: {
+    class: [
+      // Flexbox
+      "flex lg:flex-row flex-col",
+    ],
+  },
+  sourcecontrols: {
+    class: [
+      // Flexbox & Alignment
+      "flex lg:flex-col justify-center gap-2",
+
+      // Spacing
+      "p-5",
+    ],
+  },
+  sourcemoveupbutton: {
+    root: ({ context }) => ({
+      class: [
+        // Flexbox & Alignment
+        "relative inline-flex items-center justify-center",
+
+        // Shape
+        "rounded-md",
+
+        // Color
+        "text-white dark:text-surface-900",
+        "bg-primary-500 dark:bg-primary-400",
+        "border border-primary-500 dark:border-primary-400",
+
+        // Spacing & Size
+        "w-12",
+        "m-0",
+        "px-0 py-3",
+
+        // Transitions
+        "transition duration-200 ease-in-out",
+
+        // State
+        "hover:bg-primary-600 dark:hover:bg-primary-300 hover:border-primary-600 dark:hover:border-primary-300",
+        "focus:outline-none focus:outline-offset-0 focus:ring",
+        "focus:ring-primary-400/50 dark:focus:ring-primary-300/50",
+        { "cursor-default pointer-events-none opacity-60": context.disabled },
+
+        // Interactivity
+        "cursor-pointer user-select-none",
+      ],
+    }),
+    label: {
+      class: [
+        // Flexbox
+        "flex-initial",
+
+        // Size
+        "w-0",
+      ],
+    },
+  },
+  sourcemovetopbutton: {
+    root: ({ context }) => ({
+      class: [
+        // Flexbox & Alignment
+        "relative inline-flex items-center justify-center",
+
+        // Shape
+        "rounded-md",
+
+        // Color
+        "text-white dark:text-surface-900",
+        "bg-primary-500 dark:bg-primary-400",
+        "border border-primary-500 dark:border-primary-400",
+
+        // Spacing & Size
+        "w-12",
+        "m-0",
+        "px-0 py-3",
+
+        // Transitions
+        "transition duration-200 ease-in-out",
+
+        // State
+        "hover:bg-primary-600 dark:hover:bg-primary-300 hover:border-primary-600 dark:hover:border-primary-300",
+        "focus:outline-none focus:outline-offset-0 focus:ring",
+        "focus:ring-primary-400/50 dark:focus:ring-primary-300/50",
+        { "cursor-default pointer-events-none opacity-60": context.disabled },
+
+        // Interactivity
+        "cursor-pointer user-select-none",
+      ],
+    }),
+    label: {
+      class: [
+        // Flexbox
+        "flex-initial",
+
+        // Size
+        "w-0",
+      ],
+    },
+  },
+  sourcemovedownbutton: {
+    root: ({ context }) => ({
+      class: [
+        // Flexbox & Alignment
+        "relative inline-flex items-center justify-center",
+
+        // Shape
+        "rounded-md",
+
+        // Color
+        "text-white dark:text-surface-900",
+        "bg-primary-500 dark:bg-primary-400",
+        "border border-primary-500 dark:border-primary-400",
+
+        // Spacing & Size
+        "w-12",
+        "m-0",
+        "px-0 py-3",
+
+        // Transitions
+        "transition duration-200 ease-in-out",
+
+        // State
+        "hover:bg-primary-600 dark:hover:bg-primary-300 hover:border-primary-600 dark:hover:border-primary-300",
+        "focus:outline-none focus:outline-offset-0 focus:ring",
+        "focus:ring-primary-400/50 dark:focus:ring-primary-300/50",
+        { "cursor-default pointer-events-none opacity-60": context.disabled },
+
+        // Interactivity
+        "cursor-pointer user-select-none",
+      ],
+    }),
+    label: {
+      class: [
+        // Flexbox
+        "flex-initial",
+
+        // Size
+        "w-0",
+      ],
+    },
+  },
+  sourcemovebottombutton: {
+    root: ({ context }) => ({
+      class: [
+        // Flexbox & Alignment
+        "relative inline-flex items-center justify-center",
+
+        // Shape
+        "rounded-md",
+
+        // Color
+        "text-white dark:text-surface-900",
+        "bg-primary-500 dark:bg-primary-400",
+        "border border-primary-500 dark:border-primary-400",
+
+        // Spacing & Size
+        "w-12",
+        "m-0",
+        "px-0 py-3",
+
+        // Transitions
+        "transition duration-200 ease-in-out",
+
+        // State
+        "hover:bg-primary-600 dark:hover:bg-primary-300 hover:border-primary-600 dark:hover:border-primary-300",
+        "focus:outline-none focus:outline-offset-0 focus:ring",
+        "focus:ring-primary-400/50 dark:focus:ring-primary-300/50",
+        { "cursor-default pointer-events-none opacity-60": context.disabled },
+
+        // Interactivity
+        "cursor-pointer user-select-none",
+      ],
+    }),
+    label: {
+      class: [
+        // Flexbox
+        "flex-initial",
+
+        // Size
+        "w-0",
+      ],
+    },
+  },
+  sourcewrapper: {
+    class: "grow shrink basis-2/4",
+  },
+  sourceheader: {
+    class: [
+      "font-bold",
+
+      // Shape
+      "border-b-0 rounded-t-md",
+
+      // Spacing
+      "p-5",
+
+      // Color
+      "text-surface-700 dark:text-white/80",
+      "bg-surface-50 dark:bg-surface-800",
+      "border border-surface-200 dark:border-surface-700",
+    ],
+  },
+  sourcelist: {
+    class: [
+      // Spacing
+      "list-none m-0 p-0",
+
+      // Size
+      "min-h-[12rem] max-h-[24rem]",
+
+      // Shape
+      "rounded-b-md",
+
+      // Color
+      "text-surface-600 dark:text-white/80",
+      "bg-surface-0 dark:bg-surface-800",
+      "border border-surface-200 dark:border-surface-700",
+
+      // Spacing
+      "py-3 px-0",
+
+      // Focus & Outline
+      "outline-none",
+
+      // Misc
+      "overflow-auto",
+    ],
+  },
+  item: ({ context }) => ({
+    class: [
+      // Position
+      "relative",
+
+      // Spacing
+      "py-3 px-5 m-0",
+
+      // Shape
+      "border-none",
+
+      // Transition
+      "transition duration-200",
+
+      // Color
+      "text-surface-700 dark:text-white/80",
+      {
+        "bg-primary-500/20 dark:bg-primary-300/20":
+          context.active && !context.focused,
+      },
+      {
+        "bg-primary-500/30 dark:bg-primary-400/30":
+          context.active && context.focused,
+      },
+      {
+        "bg-surface-100 dark:bg-surface-700/70":
+          !context.active && context.focused,
+      },
+
+      // State
+      "hover:bg-surface-100 dark:hover:bg-surface-700",
+
+      // Misc
+      "cursor-pointer overflow-hidden",
+    ],
+  }),
+  buttons: {
+    class: "flex lg:flex-col justify-center gap-2 p-5",
+  },
+  movetotargetbutton: {
+    root: ({ context }) => ({
+      class: [
+        // Flexbox & Alignment
+        "relative inline-flex items-center justify-center",
+
+        // Shape
+        "rounded-md",
+
+        // Color
+        "text-white dark:text-surface-900",
+        "bg-primary-500 dark:bg-primary-400",
+        "border border-primary-500 dark:border-primary-400",
+
+        // Spacing & Size
+        "w-12",
+        "m-0",
+        "px-0 py-3",
+
+        // Transitions
+        "transition duration-200 ease-in-out",
+
+        // State
+        "hover:bg-primary-600 dark:hover:bg-primary-300 hover:border-primary-600 dark:hover:border-primary-300",
+        "focus:outline-none focus:outline-offset-0 focus:ring",
+        "focus:ring-primary-400/50 dark:focus:ring-primary-300/50",
+        { "cursor-default pointer-events-none opacity-60": context.disabled },
+
+        // Interactivity
+        "cursor-pointer user-select-none",
+      ],
+    }),
+    label: {
+      class: [
+        // Flexbox
+        "flex-initial",
+
+        // Size
+        "w-0",
+      ],
+    },
+  },
+  movealltotargetbutton: {
+    root: ({ context }) => ({
+      class: [
+        // Flexbox & Alignment
+        "relative inline-flex items-center justify-center",
+
+        // Shape
+        "rounded-md",
+
+        // Color
+        "text-white dark:text-surface-900",
+        "bg-primary-500 dark:bg-primary-400",
+        "border border-primary-500 dark:border-primary-400",
+
+        // Spacing & Size
+        "w-12",
+        "m-0",
+        "px-0 py-3",
+
+        // Transitions
+        "transition duration-200 ease-in-out",
+
+        // State
+        "hover:bg-primary-600 dark:hover:bg-primary-300 hover:border-primary-600 dark:hover:border-primary-300",
+        "focus:outline-none focus:outline-offset-0 focus:ring",
+        "focus:ring-primary-400/50 dark:focus:ring-primary-300/50",
+        { "cursor-default pointer-events-none opacity-60": context.disabled },
+
+        // Interactivity
+        "cursor-pointer user-select-none",
+      ],
+    }),
+    label: {
+      class: [
+        // Flexbox
+        "flex-initial",
+
+        // Size
+        "w-0",
+      ],
+    },
+  },
+  movetosourcebutton: {
+    root: ({ context }) => ({
+      class: [
+        // Flexbox & Alignment
+        "relative inline-flex items-center justify-center",
+
+        // Shape
+        "rounded-md",
+
+        // Color
+        "text-white dark:text-surface-900",
+        "bg-primary-500 dark:bg-primary-400",
+        "border border-primary-500 dark:border-primary-400",
+
+        // Spacing & Size
+        "w-12",
+        "m-0",
+        "px-0 py-3",
+
+        // Transitions
+        "transition duration-200 ease-in-out",
+
+        // State
+        "hover:bg-primary-600 dark:hover:bg-primary-300 hover:border-primary-600 dark:hover:border-primary-300",
+        "focus:outline-none focus:outline-offset-0 focus:ring",
+        "focus:ring-primary-400/50 dark:focus:ring-primary-300/50",
+        { "cursor-default pointer-events-none opacity-60": context.disabled },
+
+        // Interactivity
+        "cursor-pointer user-select-none",
+      ],
+    }),
+    label: {
+      class: [
+        // Flexbox
+        "flex-initial",
+
+        // Size
+        "w-0",
+      ],
+    },
+  },
+  movealltosourcebutton: {
+    root: ({ context }) => ({
+      class: [
+        // Flexbox & Alignment
+        "relative inline-flex items-center justify-center",
+
+        // Shape
+        "rounded-md",
+
+        // Color
+        "text-white dark:text-surface-900",
+        "bg-primary-500 dark:bg-primary-400",
+        "border border-primary-500 dark:border-primary-400",
+
+        // Spacing & Size
+        "w-12",
+        "m-0",
+        "px-0 py-3",
+
+        // Transitions
+        "transition duration-200 ease-in-out",
+
+        // State
+        "hover:bg-primary-600 dark:hover:bg-primary-300 hover:border-primary-600 dark:hover:border-primary-300",
+        "focus:outline-none focus:outline-offset-0 focus:ring",
+        "focus:ring-primary-400/50 dark:focus:ring-primary-300/50",
+        { "cursor-default pointer-events-none opacity-60": context.disabled },
+
+        // Interactivity
+        "cursor-pointer user-select-none",
+      ],
+    }),
+    label: {
+      class: [
+        // Flexbox
+        "flex-initial",
+
+        // Size
+        "w-0",
+      ],
+    },
+  },
+  targetcontrols: {
+    class: "flex lg:flex-col justify-center gap-2 p-5",
+  },
+  targetmoveupbutton: {
+    root: ({ context }) => ({
+      class: [
+        // Flexbox & Alignment
+        "relative inline-flex items-center justify-center",
+
+        // Shape
+        "rounded-md",
+
+        // Color
+        "text-white dark:text-surface-900",
+        "bg-primary-500 dark:bg-primary-400",
+        "border border-primary-500 dark:border-primary-400",
+
+        // Spacing & Size
+        "w-12",
+        "m-0",
+        "px-0 py-3",
+
+        // Transitions
+        "transition duration-200 ease-in-out",
+
+        // State
+        "hover:bg-primary-600 dark:hover:bg-primary-300 hover:border-primary-600 dark:hover:border-primary-300",
+        "focus:outline-none focus:outline-offset-0 focus:ring",
+        "focus:ring-primary-400/50 dark:focus:ring-primary-300/50",
+        { "cursor-default pointer-events-none opacity-60": context.disabled },
+
+        // Interactivity
+        "cursor-pointer user-select-none",
+      ],
+    }),
+    label: {
+      class: [
+        // Flexbox
+        "flex-initial",
+
+        // Size
+        "w-0",
+      ],
+    },
+  },
+  targetmovetopbutton: {
+    root: ({ context }) => ({
+      class: [
+        // Flexbox & Alignment
+        "relative inline-flex items-center justify-center",
+
+        // Shape
+        "rounded-md",
+
+        // Color
+        "text-white dark:text-surface-900",
+        "bg-primary-500 dark:bg-primary-400",
+        "border border-primary-500 dark:border-primary-400",
+
+        // Spacing & Size
+        "w-12",
+        "m-0",
+        "px-0 py-3",
+
+        // Transitions
+        "transition duration-200 ease-in-out",
+
+        // State
+        "hover:bg-primary-600 dark:hover:bg-primary-300 hover:border-primary-600 dark:hover:border-primary-300",
+        "focus:outline-none focus:outline-offset-0 focus:ring",
+        "focus:ring-primary-400/50 dark:focus:ring-primary-300/50",
+        { "cursor-default pointer-events-none opacity-60": context.disabled },
+
+        // Interactivity
+        "cursor-pointer user-select-none",
+      ],
+    }),
+    label: {
+      class: [
+        // Flexbox
+        "flex-initial",
+
+        // Size
+        "w-0",
+      ],
+    },
+  },
+  targetmovedownbutton: {
+    root: ({ context }) => ({
+      class: [
+        // Flexbox & Alignment
+        "relative inline-flex items-center justify-center",
+
+        // Shape
+        "rounded-md",
+
+        // Color
+        "text-white dark:text-surface-900",
+        "bg-primary-500 dark:bg-primary-400",
+        "border border-primary-500 dark:border-primary-400",
+
+        // Spacing & Size
+        "w-12",
+        "m-0",
+        "px-0 py-3",
+
+        // Transitions
+        "transition duration-200 ease-in-out",
+
+        // State
+        "hover:bg-primary-600 dark:hover:bg-primary-300 hover:border-primary-600 dark:hover:border-primary-300",
+        "focus:outline-none focus:outline-offset-0 focus:ring",
+        "focus:ring-primary-400/50 dark:focus:ring-primary-300/50",
+        { "cursor-default pointer-events-none opacity-60": context.disabled },
+
+        // Interactivity
+        "cursor-pointer user-select-none",
+      ],
+    }),
+    label: {
+      class: [
+        // Flexbox
+        "flex-initial",
+
+        // Size
+        "w-0",
+      ],
+    },
+  },
+  targetmovebottombutton: {
+    root: ({ context }) => ({
+      class: [
+        // Flexbox & Alignment
+        "relative inline-flex items-center justify-center",
+
+        // Shape
+        "rounded-md",
+
+        // Color
+        "text-white dark:text-surface-900",
+        "bg-primary-500 dark:bg-primary-400",
+        "border border-primary-500 dark:border-primary-400",
+
+        // Spacing & Size
+        "w-12",
+        "m-0",
+        "px-0 py-3",
+
+        // Transitions
+        "transition duration-200 ease-in-out",
+
+        // State
+        "hover:bg-primary-600 dark:hover:bg-primary-300 hover:border-primary-600 dark:hover:border-primary-300",
+        "focus:outline-none focus:outline-offset-0 focus:ring",
+        "focus:ring-primary-400/50 dark:focus:ring-primary-300/50",
+        { "cursor-default pointer-events-none opacity-60": context.disabled },
+
+        // Interactivity
+        "cursor-pointer user-select-none",
+      ],
+    }),
+    label: {
+      class: [
+        // Flexbox
+        "flex-initial",
+
+        // Size
+        "w-0",
+      ],
+    },
+  },
+  targetwrapper: {
+    class: "grow shrink basis-2/4",
+  },
+  targetheader: {
+    class: [
+      "font-bold",
+
+      // Shape
+      "border-b-0 rounded-t-md",
+
+      // Spacing
+      "p-5",
+
+      // Color
+      "text-surface-700 dark:text-white/80",
+      "bg-surface-50 dark:bg-surface-800",
+      "border border-surface-200 dark:border-surface-700",
+    ],
+  },
+  targetlist: {
+    class: [
+      // Spacing
+      "list-none m-0 p-0",
+
+      // Size
+      "min-h-[12rem] max-h-[24rem]",
+
+      // Shape
+      "rounded-b-md",
+
+      // Color
+      "text-surface-600 dark:text-white/80",
+      "bg-surface-0 dark:bg-surface-800",
+      "border border-surface-200 dark:border-surface-700",
+
+      // Spacing
+      "py-3 px-0",
+
+      // Focus & Outline
+      "outline-none",
+
+      // Misc
+      "overflow-auto",
+    ],
+  },
+  transition: {
+    enterFromClass: "!transition-none",
+    enterActiveClass: "!transition-none",
+    leaveActiveClass: "!transition-none",
+    leaveToClass: "!transition-none",
+  },
+};

package/presets/Lara/progressbar/index.js

@@ -0,0 +1,61 @@
+export default {
+  root: {
+    class: [
+      // Position and Overflow
+      "overflow-hidden",
+      "relative",
+
+      // Shape and Size
+      "border-0",
+      "h-6",
+      "rounded-md",
+
+      // Colors
+      "bg-surface-100 dark:bg-surface-700",
+    ],
+  },
+  value: ({ props }) => ({
+    class: [
+      // Flexbox & Overflow & Position
+      {
+        "absolute flex items-center justify-center overflow-hidden":
+          props.mode !== "indeterminate",
+      },
+
+      // Colors
+      "bg-primary-500 dark:bg-primary-400",
+
+      // Spacing & Sizing
+      "m-0",
+      { "h-full w-0": props.mode !== "indeterminate" },
+
+      // Shape
+      "border-0",
+
+      // 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",
+
+      // Font and Text
+      "text-white dark:text-surface-900",
+      "leading-6",
+    ],
+  },
+};