@fy-/fws-vue 0.1.2 → 0.1.4

package/components/ui/DefaultInput.vue

@@ -8,6 +8,7 @@ import Textarea from "primevue/textarea";
 import Calendar from "primevue/calendar";
 import Password from "primevue/password";
 import Checkbox from "primevue/checkbox";
+import Dropdown from "primevue/dropdown";
 
 type modelValueType = string | number | string[] | number[] | undefined;
 
@@ -57,6 +58,12 @@ const checkErrors = computed(() => {
   return null;
 });
 
+const formattedOptions = computed(() => {
+  return props.options.map((option) => {
+    return { optionLabel: option[0], optionValue: option[1] };
+  });
+});
+
 const focus = () => {
   if (inputRef.value) inputRef.value.focus();
 };
@@ -177,6 +184,20 @@ defineExpose({ focus, getInputRef });
           toggleMask
           v-if="type == 'password'"
         />
+        <!-- @vue-skip -->
+        <Dropdown
+          :id="id"
+          v-model="model"
+          :options="formattedOptions"
+          :placeholder="placeholder"
+          :invalid="checkErrors ? true : false"
+          :aria-describedby="
+            help && !['checkbox', 'radio'].includes(type)
+              ? `${id}-help`
+              : undefined
+          "
+          v-if="type == 'select'"
+        />
         <small
           :id="`${id}-help`"
           v-if="help && !['checkbox', 'radio'].includes(type)"

package/index.ts

@@ -51,6 +51,7 @@ import CmsArticleSingle from "./components/fws/CmsArticleSingle.vue";
 
 // Primevue
 import Wind from "./presets/Wind";
+import Lara from "./presets/Lara";
 
 // Css
 import "./style.css";
@@ -98,7 +99,9 @@ declare module "vue" {
 
 const Primevue = {
   Wind: Wind,
-};
+  Lara: Lara,
+} as Record<string, any>;
+
 export {
   i18nextPromise,
   useTranslation,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fy-/fws-vue",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "author": "Florian 'Fy' Gasquez <m@fy.to>",
   "license": "MIT",
   "repository": {

package/presets/Lara/accordion/index.js

@@ -0,0 +1,86 @@
+export default {
+  accordiontab: {
+    root: {
+      class: "mb-1",
+    },
+    header: ({ props }) => ({
+      class: [
+        // State
+        {
+          "select-none pointer-events-none cursor-default opacity-60":
+            props?.disabled,
+        },
+      ],
+    }),
+    headerAction: ({ context }) => ({
+      class: [
+        // Font
+        "font-bold",
+        "leading-none",
+
+        // Alignments
+        "flex items-center",
+        "relative",
+
+        // Sizing
+        "p-5",
+
+        // Shape
+        "rounded-t-md",
+        {
+          "rounded-br-md rounded-bl-md": !context.active,
+          "rounded-br-0 rounded-bl-0": context.active,
+        },
+
+        // Color
+        "border border-surface-200 dark:border-surface-700",
+        "bg-surface-50 dark:bg-surface-800",
+        "text-surface-600 dark:text-surface-0/80",
+        { "text-surface-900": context.active },
+
+        // Transition
+        "transition duration-200 ease-in-out",
+        "transition-shadow duration-200",
+
+        // States
+        "hover:bg-surface-100 dark:hover:bg-surface-700/40",
+        "hover:text-surface-900",
+        "focus:outline-none focus:outline-offset-0 focus-visible:ring focus-visible:ring-primary-400/50 ring-inset dark:focus-visible:ring-primary-300/50", // Focus
+
+        // Misc
+        "cursor-pointer no-underline select-none",
+      ],
+    }),
+    headerIcon: {
+      class: "inline-block mr-2",
+    },
+    headerTitle: {
+      class: "leading-none",
+    },
+    content: {
+      class: [
+        // Spacing
+        "p-5",
+
+        // Shape
+        "rounded-tl-none rounded-tr-none rounded-br-lg rounded-bl-lg",
+        "border-t-0",
+
+        // Color
+        "bg-surface-0 dark:bg-surface-800",
+        "border border-surface-200 dark:border-surface-700",
+        "text-surface-700 dark:text-surface-0/80",
+      ],
+    },
+    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/autocomplete/index.js

@@ -0,0 +1,284 @@
+export default {
+  root: ({ props }) => ({
+    class: [
+      "relative",
+
+      // Flex
+      "inline-flex",
+
+      // Size
+      { "w-full": props.multiple },
+
+      // Color
+      "text-surface-900 dark:text-surface-0",
+
+      // States
+      {
+        "opacity-60 select-none pointer-events-none cursor-default":
+          props.disabled,
+      },
+    ],
+  }),
+  container: ({ props, state }) => ({
+    class: [
+      // Font
+      "font-sans text-base leading-none",
+
+      // Flex
+      "flex items-center flex-wrap",
+      "gap-2",
+
+      // Spacing
+      "m-0 list-none",
+      "px-3 py-1.5",
+
+      // Size
+      "w-full",
+      "min-h-[2.877rem]",
+
+      // Shape
+      "appearance-none rounded-md",
+
+      // Color
+      "text-surface-700 dark:text-white/80",
+      "placeholder:text-surface-400 dark:placeholder:text-surface-500",
+      "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 duration-200 ease-in-out",
+
+      // Misc
+      "cursor-text overflow-hidden",
+    ],
+  }),
+  inputtoken: {
+    class: ["py-1.5 px-0", "inline-flex flex-auto"],
+  },
+  input: ({ props }) => ({
+    class: [
+      // Font
+      "font-sans text-base leading-none",
+
+      // Shape
+      "appearance-none rounded-md",
+      { "rounded-tr-none rounded-br-none": props.dropdown },
+      { "outline-none shadow-none rounded-none": props.multiple },
+
+      // Size
+      { "w-full": props.multiple },
+
+      // Spacing
+      "m-0",
+      { "p-3": !props.multiple, "p-0": props.multiple },
+
+      // Colors
+      "text-surface-700 dark:text-white/80",
+      "border",
+      {
+        "bg-surface-0 dark:bg-surface-900": !props.multiple,
+        " border-surface-300 dark:border-surface-700":
+          !props.multiple && !props.invalid,
+        "border-0 bg-transparent": props.multiple,
+      },
+
+      // Invalid State
+      { "border-red-500 dark:border-red-400": props.invalid },
+
+      // States
+      {
+        "focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50":
+          !props.multiple,
+      },
+
+      // Transition
+      "transition-colors duration-200",
+    ],
+  }),
+  token: {
+    class: [
+      // Flex
+      "inline-flex items-center",
+
+      // Spacings
+      "py-1.5 px-3",
+
+      // Shape
+      "rounded-[1.14rem]",
+
+      // Colors
+      "bg-surface-200 dark:bg-surface-700",
+      "text-surface-700 dark:text-white/70",
+
+      // Misc
+      "cursor-default",
+    ],
+  },
+  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",
+    ],
+  },
+  dropdownbutton: {
+    root: {
+      class: [
+        "relative",
+
+        // Alignments
+        "items-center inline-flex text-center align-bottom",
+
+        // Shape
+        "rounded-r-md",
+
+        // Size
+        "px-4 py-3 leading-none",
+
+        // Colors
+        "text-white dark:text-surface-900",
+        "bg-primary-500 dark:bg-primary-400",
+        "border border-primary-500 dark:border-primary-400",
+
+        // States
+        "focus:outline-none focus:outline-offset-0 focus:ring",
+        "hover:bg-primary-600 dark:hover:bg-primary-300 hover:border-primary-600 dark:hover:border-primary-300",
+        "focus:ring-primary-400/50 dark:focus:ring-primary-300/50",
+      ],
+    },
+  },
+  loadingicon: {
+    class: [
+      "text-surface-500 dark:text-surface-0/70",
+      "absolute top-[50%] right-[0.5rem] -mt-2 animate-spin",
+    ],
+  },
+  panel: {
+    class: [
+      // Colors
+      "bg-surface-0 dark:bg-surface-800",
+      "text-surface-700 dark:text-white/80",
+
+      // Shape
+      "border-0",
+      "rounded-md",
+      "shadow-md",
+
+      // Size
+      "max-h-[200px] overflow-auto",
+    ],
+  },
+  list: {
+    class: "py-3 px-0 list-none m-0",
+  },
+  item: ({ context }) => ({
+    class: [
+      "relative",
+
+      // Font
+      "font-normal text-base leading-none",
+
+      // Spacing
+      "m-0 px-5 py-3",
+
+      // Shape
+      "border-0 rounded-none",
+
+      // Colors
+      {
+        "text-surface-700 dark:text-white/80":
+          !context.focused && !context.selected,
+        "bg-surface-200 dark:bg-surface-600/60":
+          context.focused && !context.selected,
+        "text-surface-700 dark:text-white/80":
+          context.focused && !context.selected,
+
+        "text-primary-700 dark:text-white/80":
+          context.focused && context.selected,
+        "bg-primary-100 dark:bg-primary-400":
+          context.focused && context.selected,
+        "text-primary-700 dark:text-white/80":
+          !context.focused && context.selected,
+        "bg-primary-50 dark:bg-primary-300":
+          !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,
+      },
+
+      // Transition
+      "transition-shadow duration-200",
+
+      // Misc
+      "cursor-pointer overflow-hidden whitespace-nowrap",
+    ],
+  }),
+  itemgroup: {
+    class: [
+      "font-bold",
+
+      // Spacing
+      "m-0 p-3",
+
+      // Colors
+      "bg-surface-0 dark:bg-surface-700",
+      "text-surface-800 dark:text-white/80",
+
+      // Misc
+      "cursor-auto",
+    ],
+  },
+  emptymessage: {
+    class: [
+      // Font
+      "leading-none",
+
+      // Spacing
+      "py-3 px-5",
+
+      // Color
+      "text-surface-800 dark:text-white/80",
+      "bg-transparent",
+    ],
+  },
+  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/avatar/index.js

@@ -0,0 +1,46 @@
+export default {
+  root: ({ props, parent }) => ({
+    class: [
+      // Font
+      {
+        "text-xl": props.size == "large",
+        "text-2xl": props.size == "xlarge",
+      },
+
+      // Alignments
+      "inline-flex items-center justify-center",
+      "relative",
+
+      // Sizes
+      {
+        "h-8 w-8": props.size == null || props.size == "normal",
+        "w-12 h-12": props.size == "large",
+        "w-16 h-16": props.size == "xlarge",
+      },
+      { "-ml-4": parent.instance.$style?.name == "avatargroup" },
+
+      // Shapes
+      {
+        "rounded-lg": props.shape == "square",
+        "rounded-full": props.shape == "circle",
+      },
+      { "border-2": parent.instance.$style?.name == "avatargroup" },
+
+      // Colors
+      "bg-surface-300 dark:bg-surface-700",
+      {
+        "border-white dark:border-surface-800":
+          parent.instance.$style?.name == "avatargroup",
+      },
+    ],
+  }),
+  image: ({ props }) => ({
+    class: [
+      "h-full w-full",
+      {
+        "rounded-lg": props.shape == "square",
+        "rounded-full": props.shape == "circle",
+      },
+    ],
+  }),
+};

package/presets/Lara/badge/index.js

@@ -0,0 +1,44 @@
+export default {
+  root: ({ props }) => ({
+    class: [
+      // Font
+      "font-bold",
+
+      {
+        "text-xs leading-[1.5rem]": props.size == null,
+        "text-lg leading-[2.25rem]": props.size == "large",
+        "text-2xl leading-[3rem]": props.size == "xlarge",
+      },
+
+      // Alignment
+      "text-center inline-block",
+
+      // Size
+      "p-0 px-1",
+      {
+        "min-w-[1.5rem] h-[1.5rem]": props.size == null,
+        "min-w-[2.25rem] h-[2.25rem]": props.size == "large",
+        "min-w-[3rem] h-[3rem]": props.size == "xlarge",
+      },
+
+      // Shape
+      {
+        "rounded-full": props.value.length == 1,
+        "rounded-[0.71rem]": props.value.length !== 1,
+      },
+
+      // Color
+      "text-white dark:text-surface-900",
+      {
+        "bg-primary-500 dark:bg-primary-400":
+          props.severity == null || props.severity == "primary",
+        "bg-surface-500 dark:bg-surface-400": props.severity == "secondary",
+        "bg-green-500 dark:bg-green-400": props.severity == "success",
+        "bg-blue-500 dark:bg-blue-400": props.severity == "info",
+        "bg-orange-500 dark:bg-orange-400": props.severity == "warning",
+        "bg-purple-500 dark:bg-purple-400": props.severity == "help",
+        "bg-red-500 dark:bg-red-400": props.severity == "danger",
+      },
+    ],
+  }),
+};

package/presets/Lara/badgedirective/index.js

@@ -0,0 +1,49 @@
+export default {
+  root: ({ context }) => ({
+    class: [
+      // Font
+      "font-bold font-sans",
+      "text-xs leading-5",
+
+      // Alignment
+      "flex items-center justify-center",
+      "text-center",
+
+      // Position
+      "absolute top-0 right-0 transform translate-x-1/2 -translate-y-1/2 origin-top-right",
+
+      // Size
+      "m-0",
+      {
+        "p-0": context.nogutter || context.dot,
+        "px-2": !context.nogutter && !context.dot,
+        "min-w-[0.5rem] w-2 h-2": context.dot,
+        "min-w-[1.5rem] h-6": !context.dot,
+      },
+
+      // Shape
+      {
+        "rounded-full": context.nogutter || context.dot,
+        "rounded-[10px]": !context.nogutter && !context.dot,
+      },
+
+      // Color
+      "text-white dark:text-surface-900",
+      {
+        "bg-primary-500 dark:bg-primary-400":
+          !context.info &&
+          !context.success &&
+          !context.warning &&
+          !context.danger &&
+          !context.help &&
+          !context.secondary,
+        "bg-surface-500 dark:bg-surface-400": context.secondary,
+        "bg-green-500 dark:bg-green-400": context.success,
+        "bg-blue-500 dark:bg-blue-400": context.info,
+        "bg-orange-500 dark:bg-orange-400": context.warning,
+        "bg-purple-500 dark:bg-purple-400": context.help,
+        "bg-red-500 dark:bg-red-400": context.danger,
+      },
+    ],
+  }),
+};

package/presets/Lara/blockui/index.js

@@ -0,0 +1,8 @@
+export default {
+  root: {
+    class: "relative",
+  },
+  mask: {
+    class: "bg-black/40",
+  },
+};

package/presets/Lara/breadcrumb/index.js

@@ -0,0 +1,64 @@
+export default {
+  root: {
+    class: [
+      // Shape
+      "rounded-md",
+
+      // Spacing
+      "p-4",
+
+      // Color
+      "bg-surface-0 dark:bg-surface-700",
+      "border border-surface-200 dark:border-surface-700",
+
+      // Misc
+      "overflow-x-auto",
+    ],
+  },
+  menu: {
+    class: [
+      // Flex & Alignment
+      "flex items-center flex-nowrap",
+
+      // Spacing
+      "m-0 p-0 list-none leading-none",
+    ],
+  },
+  action: {
+    class: [
+      // Flex & Alignment
+      "flex items-center",
+
+      // Shape
+      "rounded-md",
+
+      // Color
+      "text-surface-600 dark:text-white/70",
+
+      // States
+      "focus-visible:outline-none focus-visible:outline-offset-0",
+      "focus-visible:ring focus-visible:ring-primary-400/50 dark:focus-visible:ring-primary-300/50",
+
+      // Transitions
+      "transition-shadow duration-200",
+
+      // Misc
+      "text-decoration-none",
+    ],
+  },
+  icon: {
+    class: "text-surface-600 dark:text-white/70",
+  },
+  separator: {
+    class: [
+      // Flex & Alignment
+      "flex items-center",
+
+      // Spacing
+      " mx-2",
+
+      // Color
+      "text-surface-600 dark:text-white/70",
+    ],
+  },
+};