WIP: feat(components): add new components

dist/types/src/lib-components/Accordion/AccordionDialog.vue.d.ts

@@ -0,0 +1,10 @@
+import Typography from "../Typography/Typography.vue";
+declare const _default: import("vue/types/vue").ExtendedVue<Typography, {
+    isOpen: boolean;
+}, {
+    toggleAccordion(): void;
+}, unknown, {
+    title: string;
+    inner: boolean;
+}>;
+export default _default;

dist/types/src/lib-components/Chip/Chip.vue.d.ts

@@ -0,0 +1,18 @@
+import Vue from "vue";
+declare const _default: import("vue/types/vue").ExtendedVue<Vue, unknown, {
+    getColorClass(): string;
+    getHoverColorClass(): string;
+    getVariantClass(): string;
+    getBorderColorClass(): string;
+    getTextColorClass(): string;
+    deleteChip(): void;
+}, {
+    buttonClasses: string[];
+}, {
+    deletable: boolean;
+    onDelete: Function;
+    color: string;
+    variant: string;
+    size: string;
+}>;
+export default _default;

dist/types/src/lib-components/Typography/Typography.vue.d.ts

@@ -0,0 +1,10 @@
+import Vue from "vue";
+declare const _default: import("vue/types/vue").ExtendedVue<Vue, unknown, {
+    getTypographyClass(variant: string): string;
+}, {
+    getColorClass: string;
+}, {
+    variant: string;
+    color: string;
+}>;
+export default _default;

dist/types/src/lib-components/buttons/FAButton.vue.d.ts

@@ -0,0 +1,23 @@
+import Vue from "vue";
+declare const _default: import("vue/types/vue").ExtendedVue<Vue, unknown, {
+    onButtonClick(): void;
+    getColorClass(): string;
+    getVariantClass(): string;
+    getTextSizeClass(): string;
+    getWidthClass(): string;
+    getBorderColorClass(): string;
+    getTextColorClass(): string;
+}, {
+    buttonClasses: string[];
+}, {
+    color: string;
+    variant: string;
+    size: string;
+    width: string;
+    textSize: string;
+    textColor: string;
+    startIcon: string;
+    endIcon: string;
+    disabled: boolean;
+}>;
+export default _default;

dist/types/src/lib-components/form/FAFormDropdwn.vue.d.ts

@@ -0,0 +1,26 @@
+import Vue from "vue";
+import { Instance } from "@popperjs/core";
+interface Option {
+    value: string | number;
+    title: string;
+}
+declare const _default: import("vue/types/vue").ExtendedVue<Vue, {
+    selectedValue: string;
+}, {
+    onItemClick(value: string | number): void;
+    onDropdownClick(): void;
+    withPopper(dropdownList: HTMLElement, component: any, { width }: {
+        width: string;
+    }): Instance;
+}, {
+    getTitle: string;
+}, {
+    prefix: string | null;
+    label: string | null;
+    required: boolean;
+    options: Option[];
+    disabled: boolean;
+    value: string;
+    placeholder: string;
+}>;
+export default _default;

dist/types/src/lib-components/index.d.ts

@@ -3,6 +3,11 @@ export { default as DangerButton } from "./buttons/DangerButton.vue";
 export { default as MutedButton } from "./buttons/MutedButton.vue";
 export { default as SuccessButton } from "./buttons/SuccessButton.vue";
 export { default as WarningButton } from "./buttons/WarningButton.vue";
-export { default as TableNumberInput } from './table/TableNumberInput.vue';
-export { default as KpiCard } from './cards/KpiCard.vue';
-export { default as KeyPress } from './misc/KeyPress.vue';
+export { default as FAButton } from "./buttons/FAButton.vue";
+export { default as TableNumberInput } from "./table/TableNumberInput.vue";
+export { default as KpiCard } from "./cards/KpiCard.vue";
+export { default as KeyPress } from "./misc/KeyPress.vue";
+export { default as Typography } from "./Typography/Typography.vue";
+export { default as Chip } from "./Chip/Chip.vue";
+export { default as AccordionDialog } from "./Accordion/AccordionDialog.vue";
+export { default as FAFormDropdwn } from "./form/FAFormDropdwn.vue";

dist/types/src/utils/colors.d.ts

@@ -0,0 +1,4 @@
+export declare const backgroundColorClassesMapping: Record<string, string>;
+export declare const hoverColorClassesMapping: Record<string, string>;
+export declare const borderColorClassesMapping: Record<string, string>;
+export declare const textColorClassesMapping: Record<string, string>;

dist/types/src/utils/text.d.ts

@@ -0,0 +1 @@
+export declare const textSizeClassesMapping: Record<string, string>;

dist/types/src/utils/typography.d.ts

@@ -0,0 +1 @@
+export declare const typographyTextClassesMapping: Record<string, string>;

package.json

@@ -53,5 +53,8 @@
     "node": ">=12"
   },
   "sideEffects": false,
-  "types": "dist/types/src/entry.esm.d.ts"
+  "types": "dist/types/src/entry.esm.d.ts",
+  "dependencies": {
+    "@popperjs/core": "^2.11.8"
+  }
 }

src/lib-components/Accordion/AccordionDialog.vue

@@ -0,0 +1,63 @@
+<template>
+  <div>
+    <div class="w-[264.76px]">
+      <button
+        :class="inner ? 'bg-neutral-100' : ''"
+        class="flex justify-between"
+        @click="toggleAccordion"
+      >
+        <Typography variant="title">
+          {{ title }}
+        </Typography>
+
+        <i
+          :class="{ 'rotate-180 transform': isOpen, 'bg-sky-800': !inner }"
+          class="material-icons r-4 ml-[111px] h-[23.36px] w-6 rounded-sm bg-sky-800"
+        >
+          keyboard_arrow_down
+        </i>
+      </button>
+      <div v-show="isOpen">
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import Typography from "../Typography/Typography.vue";
+import Vue from "vue";
+
+export default Vue.extend({
+  name: "AccordionDialog",
+  components: {
+    Typography,
+  },
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+    inner: {
+      type: Boolean,
+      required: false,
+    },
+  },
+  data() {
+    return {
+      isOpen: false,
+    };
+  },
+  methods: {
+    toggleAccordion() {
+      this.isOpen = !this.isOpen;
+    },
+  },
+});
+</script>
+
+<style scoped>
+.material-icons {
+  transition: transform 0.3s ease-in-out;
+}
+</style>

src/lib-components/Chip/Chip.vue

@@ -0,0 +1,84 @@
+<template>
+  <div
+    :class="buttonClasses"
+    class="inline-flex h-11 w-[143px] items-center justify-center gap-2.5 rounded-[28px] bg-white px-6 py-2.5 shadow"
+  >
+    <slot class="font-normal"></slot>
+
+    <font-awesome-icon
+      v-if="deletable"
+      class="h-6"
+      :icon="['fas', 'window-close']"
+      :class="getHoverColorClass"
+      style="margin-left: 40px"
+      @click="onDelete"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+import {
+  backgroundColorClassesMapping,
+  borderColorClassesMapping,
+  hoverColorClassesMapping,
+  textColorClassesMapping,
+} from "@/utils/colors";
+
+export default Vue.extend({
+  props: {
+    deletable: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    onDelete: {
+      type: Function,
+      required: true,
+    },
+    color: {
+      type: String,
+      required: false,
+      default: "",
+    },
+    variant: {
+      type: String,
+      default: "contained",
+    },
+    size: {
+      type: String,
+      default: "medium",
+    },
+  },
+  computed: {
+    buttonClasses(): string[] {
+      return [this.getColorClass(), this.getVariantClass()];
+    },
+  },
+  methods: {
+    getColorClass(): string {
+      return backgroundColorClassesMapping[this.color] || "";
+    },
+    getHoverColorClass(): string {
+      return hoverColorClassesMapping[this.color] || "";
+    },
+    getVariantClass(): string {
+      if (this.variant === "contained") {
+        return `text-white ${this.getColorClass()} btn  disabled:cursor-not-allowed`;
+      } else if (this.variant === "outlined") {
+        return `${this.getTextColorClass()} border ${this.getBorderColorClass()} text-gray-400	 bg-transparent btn  disabled:cursor-not-allowed`;
+      }
+      return "";
+    },
+    getBorderColorClass(): string {
+      return borderColorClassesMapping[this.color] || "";
+    },
+    getTextColorClass(): string {
+      return textColorClassesMapping[this.color] || "";
+    },
+    deleteChip() {
+      this.$emit("delete");
+    },
+  },
+});
+</script>

src/lib-components/Typography/Typography.vue

@@ -0,0 +1,38 @@
+<template>
+  <div :class="getTypographyClass(variant)">
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+import { textColorClassesMapping } from "../../utils/colors";
+import { typographyTextClassesMapping } from "../../utils/typography";
+
+export default Vue.extend({
+  name: "Typography",
+  props: {
+    variant: {
+      type: String,
+      default: "body", // Set the default variant to 'body'
+    },
+    color: {
+      type: String,
+      default: "text-black", // Set the default color to 'text-black'
+    },
+  },
+  computed: {
+    getColorClass(): string {
+      return textColorClassesMapping[this.color] || "text-black";
+    },
+  },
+  methods: {
+    getTypographyClass(variant: string): string {
+      const textClasses = typographyTextClassesMapping[variant] || "";
+      const colorClasses = this.getColorClass;
+
+      return `${textClasses} ${colorClasses}`;
+    },
+  },
+});
+</script>