From 118b74c3caf8ad5b992b379575045c76496b6b75 Mon Sep 17 00:00:00 2001 From: Inderjit Singh <19bcs1478@gmail.com> Date: Tue, 17 Oct 2023 17:10:43 +0530 Subject: [PATCH 1/3] feat(components): add new components --- package-lock.json | 17 ++ package.json | 5 +- .../Accordion/AccordionDialog.vue | 60 ++++++ src/lib-components/Chip/Chip.vue | 163 ++++++++++++++++ src/lib-components/Typography/Typography.vue | 52 +++++ src/lib-components/buttons/Button.vue | 182 ++++++++++++++++++ src/lib-components/form/MyNewFormDropdwn.vue | 129 +++++++++++++ src/lib-components/form/MyNewFormInput.vue | 73 +++++++ src/lib-components/index.ts | 12 +- 9 files changed, 688 insertions(+), 5 deletions(-) create mode 100644 src/lib-components/Accordion/AccordionDialog.vue create mode 100644 src/lib-components/Chip/Chip.vue create mode 100644 src/lib-components/Typography/Typography.vue create mode 100644 src/lib-components/buttons/Button.vue create mode 100644 src/lib-components/form/MyNewFormDropdwn.vue create mode 100644 src/lib-components/form/MyNewFormInput.vue diff --git a/package-lock.json b/package-lock.json index b1c833e..edb0d17 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7,6 +7,9 @@ "": { "name": "fa_vuejs_ui_kit", "version": "0.4.3", + "dependencies": { + "@popperjs/core": "^2.11.8" + }, "devDependencies": { "@babel/core": "^7.14.6", "@babel/preset-env": "^7.14.7", @@ -1903,6 +1906,15 @@ "node": ">= 8" } }, + "node_modules/@popperjs/core": { + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/@rollup/plugin-alias": { "version": "3.1.8", "resolved": "https://registry.npmjs.org/@rollup/plugin-alias/-/plugin-alias-3.1.8.tgz", @@ -19975,6 +19987,11 @@ "fastq": "^1.6.0" } }, + "@popperjs/core": { + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==" + }, "@rollup/plugin-alias": { "version": "3.1.8", "resolved": "https://registry.npmjs.org/@rollup/plugin-alias/-/plugin-alias-3.1.8.tgz", diff --git a/package.json b/package.json index 9ed7764..a51ff89 100644 --- a/package.json +++ b/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" + } } diff --git a/src/lib-components/Accordion/AccordionDialog.vue b/src/lib-components/Accordion/AccordionDialog.vue new file mode 100644 index 0000000..f4b4834 --- /dev/null +++ b/src/lib-components/Accordion/AccordionDialog.vue @@ -0,0 +1,60 @@ + + + + + diff --git a/src/lib-components/Chip/Chip.vue b/src/lib-components/Chip/Chip.vue new file mode 100644 index 0000000..2d97146 --- /dev/null +++ b/src/lib-components/Chip/Chip.vue @@ -0,0 +1,163 @@ + + + diff --git a/src/lib-components/Typography/Typography.vue b/src/lib-components/Typography/Typography.vue new file mode 100644 index 0000000..f64f513 --- /dev/null +++ b/src/lib-components/Typography/Typography.vue @@ -0,0 +1,52 @@ + + + diff --git a/src/lib-components/buttons/Button.vue b/src/lib-components/buttons/Button.vue new file mode 100644 index 0000000..a12e715 --- /dev/null +++ b/src/lib-components/buttons/Button.vue @@ -0,0 +1,182 @@ + + + diff --git a/src/lib-components/form/MyNewFormDropdwn.vue b/src/lib-components/form/MyNewFormDropdwn.vue new file mode 100644 index 0000000..46a107e --- /dev/null +++ b/src/lib-components/form/MyNewFormDropdwn.vue @@ -0,0 +1,129 @@ + + + diff --git a/src/lib-components/form/MyNewFormInput.vue b/src/lib-components/form/MyNewFormInput.vue new file mode 100644 index 0000000..1f13f3d --- /dev/null +++ b/src/lib-components/form/MyNewFormInput.vue @@ -0,0 +1,73 @@ + + + diff --git a/src/lib-components/index.ts b/src/lib-components/index.ts index 2a0a604..f968122 100644 --- a/src/lib-components/index.ts +++ b/src/lib-components/index.ts @@ -4,14 +4,18 @@ 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 Button } from "./buttons/Button.vue"; // table -export {default as TableNumberInput} from './table/TableNumberInput.vue'; +export { default as TableNumberInput } from "./table/TableNumberInput.vue"; // card -export {default as KpiCard} from './cards/KpiCard.vue'; +export { default as KpiCard } from "./cards/KpiCard.vue"; // misc -export {default as KeyPress} from './misc/KeyPress.vue'; +export { default as KeyPress } from "./misc/KeyPress.vue"; +//Typography +export { default as Typography } from "./Typography/Typography.vue"; +//Chip +export { default as Chip } from "./Chip/Chip.vue"; From 4bc9e19807a1a96b809d5bd1b3f2534a61674328 Mon Sep 17 00:00:00 2001 From: Neeraj Kumar Date: Wed, 18 Oct 2023 01:09:06 +0530 Subject: [PATCH 2/3] feat: build dist files --- dist/fa_vuejs_ui_kit.esm.js | 706 +++++++++++++++--- .../src/lib-components/Chip/Chip.vue.d.ts | 18 + .../Typography/Typography.vue.d.ts | 10 + .../lib-components/buttons/Button.vue.d.ts | 24 + dist/types/src/lib-components/index.d.ts | 9 +- 5 files changed, 662 insertions(+), 105 deletions(-) create mode 100644 dist/types/src/lib-components/Chip/Chip.vue.d.ts create mode 100644 dist/types/src/lib-components/Typography/Typography.vue.d.ts create mode 100644 dist/types/src/lib-components/buttons/Button.vue.d.ts diff --git a/dist/fa_vuejs_ui_kit.esm.js b/dist/fa_vuejs_ui_kit.esm.js index ff57b4c..cc87392 100644 --- a/dist/fa_vuejs_ui_kit.esm.js +++ b/dist/fa_vuejs_ui_kit.esm.js @@ -1,6 +1,6 @@ import Vue from 'vue'; -var script$7 = Vue.extend({ +var script$a = Vue.extend({ name: "PrimaryButton", props: { disabled: { @@ -98,10 +98,10 @@ function normalizeComponent(template, style, script, scopeId, isFunctionalTempla } /* script */ -const __vue_script__$7 = script$7; +const __vue_script__$a = script$a; /* template */ -var __vue_render__$7 = function () { +var __vue_render__$a = function () { var _vm = this; var _h = _vm.$createElement; @@ -123,33 +123,33 @@ var __vue_render__$7 = function () { }, [_vm._t("default")], 2) : _vm._t("default")], 2)]); }; -var __vue_staticRenderFns__$7 = []; +var __vue_staticRenderFns__$a = []; /* style */ -const __vue_inject_styles__$7 = undefined; +const __vue_inject_styles__$a = undefined; /* scoped */ -const __vue_scope_id__$7 = undefined; +const __vue_scope_id__$a = undefined; /* module identifier */ -const __vue_module_identifier__$7 = undefined; +const __vue_module_identifier__$a = undefined; /* functional template */ -const __vue_is_functional_template__$7 = false; +const __vue_is_functional_template__$a = false; /* style inject */ /* style inject SSR */ /* style inject shadow dom */ -const __vue_component__$e = /*#__PURE__*/normalizeComponent({ - render: __vue_render__$7, - staticRenderFns: __vue_staticRenderFns__$7 -}, __vue_inject_styles__$7, __vue_script__$7, __vue_scope_id__$7, __vue_is_functional_template__$7, __vue_module_identifier__$7, false, undefined, undefined, undefined); +const __vue_component__$k = /*#__PURE__*/normalizeComponent({ + render: __vue_render__$a, + staticRenderFns: __vue_staticRenderFns__$a +}, __vue_inject_styles__$a, __vue_script__$a, __vue_scope_id__$a, __vue_is_functional_template__$a, __vue_module_identifier__$a, false, undefined, undefined, undefined); -var __vue_component__$f = __vue_component__$e; +var __vue_component__$l = __vue_component__$k; -var script$6 = Vue.extend({ +var script$9 = Vue.extend({ name: "DangerButton", props: { disabled: { @@ -172,10 +172,10 @@ var script$6 = Vue.extend({ }); /* script */ -const __vue_script__$6 = script$6; +const __vue_script__$9 = script$9; /* template */ -var __vue_render__$6 = function () { +var __vue_render__$9 = function () { var _vm = this; var _h = _vm.$createElement; @@ -197,33 +197,33 @@ var __vue_render__$6 = function () { }, [_vm._t("default")], 2) : _vm._t("default")], 2)]); }; -var __vue_staticRenderFns__$6 = []; +var __vue_staticRenderFns__$9 = []; /* style */ -const __vue_inject_styles__$6 = undefined; +const __vue_inject_styles__$9 = undefined; /* scoped */ -const __vue_scope_id__$6 = undefined; +const __vue_scope_id__$9 = undefined; /* module identifier */ -const __vue_module_identifier__$6 = undefined; +const __vue_module_identifier__$9 = undefined; /* functional template */ -const __vue_is_functional_template__$6 = false; +const __vue_is_functional_template__$9 = false; /* style inject */ /* style inject SSR */ /* style inject shadow dom */ -const __vue_component__$c = /*#__PURE__*/normalizeComponent({ - render: __vue_render__$6, - staticRenderFns: __vue_staticRenderFns__$6 -}, __vue_inject_styles__$6, __vue_script__$6, __vue_scope_id__$6, __vue_is_functional_template__$6, __vue_module_identifier__$6, false, undefined, undefined, undefined); +const __vue_component__$i = /*#__PURE__*/normalizeComponent({ + render: __vue_render__$9, + staticRenderFns: __vue_staticRenderFns__$9 +}, __vue_inject_styles__$9, __vue_script__$9, __vue_scope_id__$9, __vue_is_functional_template__$9, __vue_module_identifier__$9, false, undefined, undefined, undefined); -var __vue_component__$d = __vue_component__$c; +var __vue_component__$j = __vue_component__$i; -var script$5 = Vue.extend({ +var script$8 = Vue.extend({ name: "MutedButton", props: { disabled: { @@ -246,10 +246,10 @@ var script$5 = Vue.extend({ }); /* script */ -const __vue_script__$5 = script$5; +const __vue_script__$8 = script$8; /* template */ -var __vue_render__$5 = function () { +var __vue_render__$8 = function () { var _vm = this; var _h = _vm.$createElement; @@ -271,33 +271,33 @@ var __vue_render__$5 = function () { }, [_vm._t("default")], 2) : _vm._t("default")], 2)]); }; -var __vue_staticRenderFns__$5 = []; +var __vue_staticRenderFns__$8 = []; /* style */ -const __vue_inject_styles__$5 = undefined; +const __vue_inject_styles__$8 = undefined; /* scoped */ -const __vue_scope_id__$5 = undefined; +const __vue_scope_id__$8 = undefined; /* module identifier */ -const __vue_module_identifier__$5 = undefined; +const __vue_module_identifier__$8 = undefined; /* functional template */ -const __vue_is_functional_template__$5 = false; +const __vue_is_functional_template__$8 = false; /* style inject */ /* style inject SSR */ /* style inject shadow dom */ -const __vue_component__$a = /*#__PURE__*/normalizeComponent({ - render: __vue_render__$5, - staticRenderFns: __vue_staticRenderFns__$5 -}, __vue_inject_styles__$5, __vue_script__$5, __vue_scope_id__$5, __vue_is_functional_template__$5, __vue_module_identifier__$5, false, undefined, undefined, undefined); +const __vue_component__$g = /*#__PURE__*/normalizeComponent({ + render: __vue_render__$8, + staticRenderFns: __vue_staticRenderFns__$8 +}, __vue_inject_styles__$8, __vue_script__$8, __vue_scope_id__$8, __vue_is_functional_template__$8, __vue_module_identifier__$8, false, undefined, undefined, undefined); -var __vue_component__$b = __vue_component__$a; +var __vue_component__$h = __vue_component__$g; -var script$4 = Vue.extend({ +var script$7 = Vue.extend({ name: "SuccessButton", props: { disabled: { @@ -320,10 +320,10 @@ var script$4 = Vue.extend({ }); /* script */ -const __vue_script__$4 = script$4; +const __vue_script__$7 = script$7; /* template */ -var __vue_render__$4 = function () { +var __vue_render__$7 = function () { var _vm = this; var _h = _vm.$createElement; @@ -345,33 +345,33 @@ var __vue_render__$4 = function () { }, [_vm._t("default")], 2) : _vm._t("default")], 2)]); }; -var __vue_staticRenderFns__$4 = []; +var __vue_staticRenderFns__$7 = []; /* style */ -const __vue_inject_styles__$4 = undefined; +const __vue_inject_styles__$7 = undefined; /* scoped */ -const __vue_scope_id__$4 = undefined; +const __vue_scope_id__$7 = undefined; /* module identifier */ -const __vue_module_identifier__$4 = undefined; +const __vue_module_identifier__$7 = undefined; /* functional template */ -const __vue_is_functional_template__$4 = false; +const __vue_is_functional_template__$7 = false; /* style inject */ /* style inject SSR */ /* style inject shadow dom */ -const __vue_component__$8 = /*#__PURE__*/normalizeComponent({ - render: __vue_render__$4, - staticRenderFns: __vue_staticRenderFns__$4 -}, __vue_inject_styles__$4, __vue_script__$4, __vue_scope_id__$4, __vue_is_functional_template__$4, __vue_module_identifier__$4, false, undefined, undefined, undefined); +const __vue_component__$e = /*#__PURE__*/normalizeComponent({ + render: __vue_render__$7, + staticRenderFns: __vue_staticRenderFns__$7 +}, __vue_inject_styles__$7, __vue_script__$7, __vue_scope_id__$7, __vue_is_functional_template__$7, __vue_module_identifier__$7, false, undefined, undefined, undefined); -var __vue_component__$9 = __vue_component__$8; +var __vue_component__$f = __vue_component__$e; -var script$3 = Vue.extend({ +var script$6 = Vue.extend({ name: "WarningButton", props: { disabled: { @@ -394,10 +394,10 @@ var script$3 = Vue.extend({ }); /* script */ -const __vue_script__$3 = script$3; +const __vue_script__$6 = script$6; /* template */ -var __vue_render__$3 = function () { +var __vue_render__$6 = function () { var _vm = this; var _h = _vm.$createElement; @@ -419,33 +419,241 @@ var __vue_render__$3 = function () { }, [_vm._t("default")], 2) : _vm._t("default")], 2)]); }; -var __vue_staticRenderFns__$3 = []; +var __vue_staticRenderFns__$6 = []; /* style */ -const __vue_inject_styles__$3 = undefined; +const __vue_inject_styles__$6 = undefined; /* scoped */ -const __vue_scope_id__$3 = undefined; +const __vue_scope_id__$6 = undefined; /* module identifier */ -const __vue_module_identifier__$3 = undefined; +const __vue_module_identifier__$6 = undefined; /* functional template */ -const __vue_is_functional_template__$3 = false; +const __vue_is_functional_template__$6 = false; /* style inject */ /* style inject SSR */ /* style inject shadow dom */ -const __vue_component__$6 = /*#__PURE__*/normalizeComponent({ - render: __vue_render__$3, - staticRenderFns: __vue_staticRenderFns__$3 -}, __vue_inject_styles__$3, __vue_script__$3, __vue_scope_id__$3, __vue_is_functional_template__$3, __vue_module_identifier__$3, false, undefined, undefined, undefined); +const __vue_component__$c = /*#__PURE__*/normalizeComponent({ + render: __vue_render__$6, + staticRenderFns: __vue_staticRenderFns__$6 +}, __vue_inject_styles__$6, __vue_script__$6, __vue_scope_id__$6, __vue_is_functional_template__$6, __vue_module_identifier__$6, false, undefined, undefined, undefined); -var __vue_component__$7 = __vue_component__$6; +var __vue_component__$d = __vue_component__$c; -var script$2 = Vue.extend({ +var script$5 = Vue.extend({ + name: "Button", + props: { + color: { + type: String, + default: "primary-brand" + }, + variant: { + type: String, + default: "contained" + }, + size: { + type: String, + default: "medium" + }, + width: { + type: String, + default: "auto" + }, + textSize: { + type: String, + default: "medium" + }, + textColor: { + type: String, + default: "" + }, + startIcon: { + type: String, + default: "" + }, + endIcon: { + type: String, + default: "" + }, + disabled: { + type: Boolean, + default: false + } + }, + computed: { + buttonClasses() { + return [this.getTextSizeClass(), this.getColorClass(), this.getVariantClass(), this.getSizeClass(), this.getWidthClass()]; + } + + }, + methods: { + onButtonClick() { + this.$emit("click"); + }, + + getColorClass() { + // Add background color classes here based on your color scheme + const bgColorClasses = { + "primary-brand": "bg-sky-800", + "secondary-brand": "bg-blue-50", + text: "bg-neutral-800", + "subtle-text": "bg-gray-500", + accents: "bg-neutral-100", + success: "bg-emerald-400", + white: "bg-white", + muted: "bg-gray-500", + primary: "bg-blue-500", + "success-old": "bg-green-500", + info: "bg-indigo-500", + warning: "bg-yellow-500", + danger: "bg-red-500" + }; + return bgColorClasses[this.color] || ""; + }, + + getVariantClass() { + if (this.variant === "contained") { + return `text-white ${this.getColorClass()} btn rounded-md disabled:cursor-not-allowed`; + } else if (this.variant === "outlined") { + return `${this.getTextColorClass()} border ${this.getBorderColorClass()} bg-transparent btn rounded-md disabled:cursor-not-allowed`; + } else if (this.variant === "text") { + return `bg-transparent border-none ${this.getTextColorClass()} btn disabled:cursor-not-allowed`; + } + + return ""; + }, + + getSizeClass() { + const sizeClasses = { + extraSmall: `${this.textSize ? this.getTextSizeClass() : "text-xs"} px-3 py-2`, + small: `${this.textSize ? this.getTextSizeClass() : "text-sm"} px-3 py-2`, + medium: `${this.textSize ? this.getTextSizeClass() : "text-base"} px-4 py-2`, + large: `${this.textSize ? this.getTextSizeClass() : "text-lg"} px-5 py-6` + }; + return sizeClasses[this.size] || ""; + }, + + getWidthClass() { + return this.width === "auto" ? "" : `w-${this.width}`; + }, + + getTextSizeClass() { + const textSizeClasses = { + extraSmall: "text-xs", + small: "text-sm", + medium: "text-base", + large: "text-lg" + }; + return textSizeClasses[this.textSize] || ""; + }, + + getBorderColorClass() { + const borderColorClasses = { + "primary-brand": "border-sky-800", + "secondary-brand": "border-blue-50", + text: "neutral-800", + "subtle-text": "border-gray-500", + accents: "border-neutral-100", + success: "border-emerald-400", + white: "border-white", + muted: "border-gray-500", + primary: "border-blue-500", + "success-old": "border-green-500", + info: "border-indigo-500", + warning: "border-yellow-500", + danger: "border-red-500" + }; + return borderColorClasses[this.color] || ""; + }, + + getTextColorClass() { + const textColorClasses = { + "primary-brand": "text-sky-800", + "secondary-brand": "text-blue-50", + text: "text-neutral-800", + "subtle-text": "text-gray-500", + accents: "text-neutral-100", + success: "text-emerald-400", + white: "text-white", + muted: "text-gray-500", + primary: "text-blue-500", + "success-old": "text-green-500", + info: "text-indigo-500", + warning: "text-yellow-500", + danger: "text-red-500" + }; + return textColorClasses[this.color] || ""; + } + + } +}); + +/* script */ +const __vue_script__$5 = script$5; +/* template */ + +var __vue_render__$5 = function () { + var _vm = this; + + var _h = _vm.$createElement; + + var _c = _vm._self._c || _h; + + return _c('button', { + class: _vm.buttonClasses, + attrs: { + "disabled": _vm.disabled + }, + on: { + "click": _vm.onButtonClick + } + }, [_c('div', { + staticClass: "flex items-center" + }, [_vm._t("startIcon", function () { + return [_vm.startIcon ? _c('span', { + staticClass: "material-icons mr-1 text-base font-bold" + }, [_vm._v(_vm._s(_vm.startIcon))]) : _vm._e()]; + }), _vm._v(" "), _vm.startIcon || _vm.endIcon ? _c('span', { + staticClass: "hidden sm:inline" + }, [_vm._t("default")], 2) : _vm._t("default"), _vm._v(" "), _vm._t("endIcon", function () { + return [_vm.endIcon ? _c('span', { + staticClass: "material-icons ml-1 text-base font-bold" + }, [_vm._v(_vm._s(_vm.endIcon))]) : _vm._e()]; + })], 2)]); +}; + +var __vue_staticRenderFns__$5 = []; +/* style */ + +const __vue_inject_styles__$5 = undefined; +/* scoped */ + +const __vue_scope_id__$5 = undefined; +/* module identifier */ + +const __vue_module_identifier__$5 = undefined; +/* functional template */ + +const __vue_is_functional_template__$5 = false; +/* style inject */ + +/* style inject SSR */ + +/* style inject shadow dom */ + +const __vue_component__$a = /*#__PURE__*/normalizeComponent({ + render: __vue_render__$5, + staticRenderFns: __vue_staticRenderFns__$5 +}, __vue_inject_styles__$5, __vue_script__$5, __vue_scope_id__$5, __vue_is_functional_template__$5, __vue_module_identifier__$5, false, undefined, undefined, undefined); + +var __vue_component__$b = __vue_component__$a; + +var script$4 = Vue.extend({ name: 'TableNumberInput', props: { value: { @@ -478,10 +686,10 @@ var script$2 = Vue.extend({ }); /* script */ -const __vue_script__$2 = script$2; +const __vue_script__$4 = script$4; /* template */ -var __vue_render__$2 = function () { +var __vue_render__$4 = function () { var _vm = this; var _h = _vm.$createElement; @@ -519,33 +727,33 @@ var __vue_render__$2 = function () { }); }; -var __vue_staticRenderFns__$2 = []; +var __vue_staticRenderFns__$4 = []; /* style */ -const __vue_inject_styles__$2 = undefined; +const __vue_inject_styles__$4 = undefined; /* scoped */ -const __vue_scope_id__$2 = undefined; +const __vue_scope_id__$4 = undefined; /* module identifier */ -const __vue_module_identifier__$2 = undefined; +const __vue_module_identifier__$4 = undefined; /* functional template */ -const __vue_is_functional_template__$2 = false; +const __vue_is_functional_template__$4 = false; /* style inject */ /* style inject SSR */ /* style inject shadow dom */ -const __vue_component__$4 = /*#__PURE__*/normalizeComponent({ - render: __vue_render__$2, - staticRenderFns: __vue_staticRenderFns__$2 -}, __vue_inject_styles__$2, __vue_script__$2, __vue_scope_id__$2, __vue_is_functional_template__$2, __vue_module_identifier__$2, false, undefined, undefined, undefined); +const __vue_component__$8 = /*#__PURE__*/normalizeComponent({ + render: __vue_render__$4, + staticRenderFns: __vue_staticRenderFns__$4 +}, __vue_inject_styles__$4, __vue_script__$4, __vue_scope_id__$4, __vue_is_functional_template__$4, __vue_module_identifier__$4, false, undefined, undefined, undefined); -var __vue_component__$5 = __vue_component__$4; +var __vue_component__$9 = __vue_component__$8; -var script$1 = Vue.extend({ +var script$3 = Vue.extend({ name: "KpiCard", props: { title: { @@ -600,10 +808,10 @@ var script$1 = Vue.extend({ }); /* script */ -const __vue_script__$1 = script$1; +const __vue_script__$3 = script$3; /* template */ -var __vue_render__$1 = function () { +var __vue_render__$3 = function () { var _vm = this; var _h = _vm.$createElement; @@ -630,34 +838,34 @@ var __vue_render__$1 = function () { }, [_vm._v("₹")]) : _vm._e(), _vm._v("\n " + _vm._s(_vm.formatValue(_vm.data) || 0) + "\n ")])])]); }; -var __vue_staticRenderFns__$1 = []; +var __vue_staticRenderFns__$3 = []; /* style */ -const __vue_inject_styles__$1 = undefined; +const __vue_inject_styles__$3 = undefined; /* scoped */ -const __vue_scope_id__$1 = undefined; +const __vue_scope_id__$3 = undefined; /* module identifier */ -const __vue_module_identifier__$1 = undefined; +const __vue_module_identifier__$3 = undefined; /* functional template */ -const __vue_is_functional_template__$1 = false; +const __vue_is_functional_template__$3 = false; /* style inject */ /* style inject SSR */ /* style inject shadow dom */ -const __vue_component__$2 = /*#__PURE__*/normalizeComponent({ - render: __vue_render__$1, - staticRenderFns: __vue_staticRenderFns__$1 -}, __vue_inject_styles__$1, __vue_script__$1, __vue_scope_id__$1, __vue_is_functional_template__$1, __vue_module_identifier__$1, false, undefined, undefined, undefined); +const __vue_component__$6 = /*#__PURE__*/normalizeComponent({ + render: __vue_render__$3, + staticRenderFns: __vue_staticRenderFns__$3 +}, __vue_inject_styles__$3, __vue_script__$3, __vue_scope_id__$3, __vue_is_functional_template__$3, __vue_module_identifier__$3, false, undefined, undefined, undefined); -var __vue_component__$3 = __vue_component__$2; +var __vue_component__$7 = __vue_component__$6; const supportedModifiers = ['altKey', 'metaKey', 'ctrlKey', 'shiftKey']; -var script = Vue.extend({ +var script$2 = Vue.extend({ name: 'KeyPress', props: { keyEvent: { @@ -786,6 +994,282 @@ var script = Vue.extend({ } }); +/* script */ +const __vue_script__$2 = script$2; +/* template */ + +var __vue_render__$2 = function () { + var _vm = this; + + var _h = _vm.$createElement; + + var _c = _vm._self._c || _h; + + return _c("div"); +}; + +var __vue_staticRenderFns__$2 = []; +/* style */ + +const __vue_inject_styles__$2 = undefined; +/* scoped */ + +const __vue_scope_id__$2 = undefined; +/* module identifier */ + +const __vue_module_identifier__$2 = undefined; +/* functional template */ + +const __vue_is_functional_template__$2 = false; +/* style inject */ + +/* style inject SSR */ + +/* style inject shadow dom */ + +const __vue_component__$4 = /*#__PURE__*/normalizeComponent({ + render: __vue_render__$2, + staticRenderFns: __vue_staticRenderFns__$2 +}, __vue_inject_styles__$2, __vue_script__$2, __vue_scope_id__$2, __vue_is_functional_template__$2, __vue_module_identifier__$2, false, undefined, undefined, undefined); + +var __vue_component__$5 = __vue_component__$4; + +var script$1 = Vue.extend({ + name: "Typography", + props: { + variant: { + type: String, + default: "body" + }, + color: { + type: String, + default: "text-black" + } + }, + computed: { + getColorClass() { + const colorClasses = { + "primary-brand": "text-sky-800", + "secondary-brand": "text-blue-50", + text: "text-neutral-800", + "subtle-text": "text-gray-500", + accents: "text-neutral-100", + success: "text-emerald-400", + white: "text-white", + "label-text": "text-zinc-700" + }; + return colorClasses[this.color] || "text-black"; + } + + }, + methods: { + getTypographyClass(variant) { + const typographyClasses = { + title: `text-2xl font-medium font-poppins leading-snug ${this.getColorClass}`, + header: `text-base font-semibold font-poppins leading-snug ${this.getColorClass}`, + body: `text-base font-normal font-poppins ${this.getColorClass}`, + label: `text-base font-normal font-poppins tracking-0.4 ${this.getColorClass}`, + "supporting-text": `text-sm font-normal font-poppins ${this.getColorClass}`, + "button-text": `text-xl font-semibold font-poppins ${this.getColorClass}` + }; // Apply default styles if the variant is not found + + return typographyClasses[variant] || ""; + } + + } +}); + +/* script */ +const __vue_script__$1 = script$1; +/* template */ + +var __vue_render__$1 = function () { + var _vm = this; + + var _h = _vm.$createElement; + + var _c = _vm._self._c || _h; + + return _c('div', { + class: _vm.getTypographyClass(_vm.variant) + }, [_vm._t("default")], 2); +}; + +var __vue_staticRenderFns__$1 = []; +/* style */ + +const __vue_inject_styles__$1 = undefined; +/* scoped */ + +const __vue_scope_id__$1 = undefined; +/* module identifier */ + +const __vue_module_identifier__$1 = undefined; +/* functional template */ + +const __vue_is_functional_template__$1 = false; +/* style inject */ + +/* style inject SSR */ + +/* style inject shadow dom */ + +const __vue_component__$2 = /*#__PURE__*/normalizeComponent({ + render: __vue_render__$1, + staticRenderFns: __vue_staticRenderFns__$1 +}, __vue_inject_styles__$1, __vue_script__$1, __vue_scope_id__$1, __vue_is_functional_template__$1, __vue_module_identifier__$1, false, undefined, undefined, undefined); + +var __vue_component__$3 = __vue_component__$2; + +var script = 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() { + return [this.getColorClass(), this.getVariantClass()]; + } + + }, + + mounted() { + console.log("this.deletable", this.deletable); + }, + + methods: { + getColorClass() { + // Add background color classes here based on your color scheme + const bgColorClasses = { + "primary-brand": "bg-sky-800", + "secondary-brand": "bg-blue-50", + text: "bg-neutral-800", + "subtle-text": "bg-gray-500", + accents: "bg-neutral-100", + success: "bg-emerald-400", + white: "bg-white", + muted: "bg-gray-500", + primary: "bg-blue-500", + "success-old": "bg-green-500", + info: "bg-indigo-500", + warning: "bg-yellow-500", + danger: "bg-red-500" + }; + return bgColorClasses[this.color] || ""; + }, + + getHoverColorClass() { + // Add background color classes here based on your color scheme + const bgColorClasses = { + "primary-brand": "hover:bg-sky-900", + "secondary-brand": "hover:bg-blue-60", + text: "hover:bg-neutral-900", + "subtle-text": "hover:bg-gray-600", + accents: "hover:bg-neutral-200", + success: "hover:bg-emerald-500", + white: "hover:bg-white", + muted: "hover:bg-gray-600", + primary: "hover:bg-blue-600", + "success-old": "hover:bg-green-600", + info: "hover:bg-indigo-600", + warning: "hover:bg-yellow-600", + danger: "hover:bg-red-600" + }; + return bgColorClasses[this.color] || ""; + }, + + getVariantClass() { + 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 ""; + }, + + // getSizeClass(): string { + // const sizeClasses: Record = { + // extraSmall: `${ + // this.textSize ? this.getTextSizeClass() : 'text-xs' + // } px-3 py-2`, + // small: `${ + // this.textSize ? this.getTextSizeClass() : 'text-sm' + // } px-3 py-2`, + // medium: `${ + // this.textSize ? this.getTextSizeClass() : 'text-base' + // } px-4 py-2`, + // large: `${ + // this.textSize ? this.getTextSizeClass() : 'text-lg' + // } px-5 py-6`, + // } + // return sizeClasses[this.size] || '' + // }, + getBorderColorClass() { + const borderColorClasses = { + "primary-brand": "border-sky-800", + "secondary-brand": "border-blue-50", + text: "neutral-800", + "subtle-text": "border-gray-500", + accents: "border-neutral-100", + success: "border-emerald-400", + white: "border-white", + muted: "border-gray-500", + primary: "border-blue-500", + "success-old": "border-green-500", + info: "border-indigo-500", + warning: "border-yellow-500", + danger: "border-red-500" + }; + return borderColorClasses[this.color] || ""; + }, + + getTextColorClass() { + const textColorClasses = { + "primary-brand": "text-sky-800", + "secondary-brand": "text-blue-50", + text: "text-neutral-800", + "subtle-text": "text-gray-500", + accents: "text-neutral-100", + success: "text-emerald-400", + white: "text-white", + muted: "text-gray-500", + primary: "text-blue-500", + "success-old": "text-green-500", + info: "text-indigo-500", + warning: "text-yellow-500", + danger: "text-red-500" + }; + return textColorClasses[this.color] || ""; + }, + + deleteChip() { + this.$emit("delete"); + } + + } +}); + /* script */ const __vue_script__ = script; /* template */ @@ -797,7 +1281,22 @@ var __vue_render__ = function () { var _c = _vm._self._c || _h; - return _c("div"); + return _c('div', { + staticClass: "inline-flex h-11 w-[143px] items-center justify-center gap-2.5 rounded-[28px] bg-white px-6 py-2.5 shadow", + class: _vm.buttonClasses + }, [_vm._t("default"), _vm._v(" "), _vm.deletable ? _c('font-awesome-icon', { + staticClass: "h-6", + class: _vm.getHoverColorClass, + staticStyle: { + "margin-left": "40px" + }, + attrs: { + "icon": ['fas', 'window-close'] + }, + on: { + "click": _vm.onDelete + } + }) : _vm._e()], 2); }; var __vue_staticRenderFns__ = []; @@ -830,14 +1329,17 @@ var __vue_component__$1 = __vue_component__; var components = /*#__PURE__*/Object.freeze({ __proto__: null, - PrimaryButton: __vue_component__$f, - DangerButton: __vue_component__$d, - MutedButton: __vue_component__$b, - SuccessButton: __vue_component__$9, - WarningButton: __vue_component__$7, - TableNumberInput: __vue_component__$5, - KpiCard: __vue_component__$3, - KeyPress: __vue_component__$1 + PrimaryButton: __vue_component__$l, + DangerButton: __vue_component__$j, + MutedButton: __vue_component__$h, + SuccessButton: __vue_component__$f, + WarningButton: __vue_component__$d, + Button: __vue_component__$b, + TableNumberInput: __vue_component__$9, + KpiCard: __vue_component__$7, + KeyPress: __vue_component__$5, + Typography: __vue_component__$3, + Chip: __vue_component__$1 }); // Import vue components @@ -849,4 +1351,4 @@ const install = function installFa_vuejs_ui_kit(Vue) { }); }; // Create module definition for Vue.use() -export { __vue_component__$d as DangerButton, __vue_component__$1 as KeyPress, __vue_component__$3 as KpiCard, __vue_component__$b as MutedButton, __vue_component__$f as PrimaryButton, __vue_component__$9 as SuccessButton, __vue_component__$5 as TableNumberInput, __vue_component__$7 as WarningButton, install as default }; +export { __vue_component__$b as Button, __vue_component__$1 as Chip, __vue_component__$j as DangerButton, __vue_component__$5 as KeyPress, __vue_component__$7 as KpiCard, __vue_component__$h as MutedButton, __vue_component__$l as PrimaryButton, __vue_component__$f as SuccessButton, __vue_component__$9 as TableNumberInput, __vue_component__$3 as Typography, __vue_component__$d as WarningButton, install as default }; diff --git a/dist/types/src/lib-components/Chip/Chip.vue.d.ts b/dist/types/src/lib-components/Chip/Chip.vue.d.ts new file mode 100644 index 0000000..d90e6ed --- /dev/null +++ b/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; +export default _default; diff --git a/dist/types/src/lib-components/Typography/Typography.vue.d.ts b/dist/types/src/lib-components/Typography/Typography.vue.d.ts new file mode 100644 index 0000000..dc44965 --- /dev/null +++ b/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; +export default _default; diff --git a/dist/types/src/lib-components/buttons/Button.vue.d.ts b/dist/types/src/lib-components/buttons/Button.vue.d.ts new file mode 100644 index 0000000..184eb3d --- /dev/null +++ b/dist/types/src/lib-components/buttons/Button.vue.d.ts @@ -0,0 +1,24 @@ +import Vue from "vue"; +declare const _default: import("vue/types/vue").ExtendedVue; +export default _default; diff --git a/dist/types/src/lib-components/index.d.ts b/dist/types/src/lib-components/index.d.ts index ea61cef..8d5d400 100644 --- a/dist/types/src/lib-components/index.d.ts +++ b/dist/types/src/lib-components/index.d.ts @@ -3,6 +3,9 @@ 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 Button } from "./buttons/Button.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"; From 6e27c29efceb0278dd589b9e801a36daa8a6bac2 Mon Sep 17 00:00:00 2001 From: Neeraj Kumar Date: Mon, 6 Nov 2023 18:55:37 +0530 Subject: [PATCH 3/3] chore(misc): refactor components and remove unused code --- dist/fa_vuejs_ui_kit.esm.js | 2696 +++++++++++++++-- .../Accordion/AccordionDialog.vue.d.ts | 10 + .../{Button.vue.d.ts => FAButton.vue.d.ts} | 3 +- .../form/FAFormDropdwn.vue.d.ts | 26 + dist/types/src/lib-components/index.d.ts | 4 +- dist/types/src/utils/colors.d.ts | 4 + dist/types/src/utils/text.d.ts | 1 + dist/types/src/utils/typography.d.ts | 1 + .../Accordion/AccordionDialog.vue | 9 +- src/lib-components/Chip/Chip.vue | 101 +- src/lib-components/Typography/Typography.vue | 30 +- src/lib-components/buttons/Button.vue | 182 -- src/lib-components/buttons/FAButton.vue | 120 + ...MyNewFormDropdwn.vue => FAFormDropdwn.vue} | 3 +- .../{MyNewFormInput.vue => FAFormInput.vue} | 2 +- src/lib-components/index.ts | 9 +- src/utils/colors.ts | 66 + src/utils/text.ts | 6 + src/utils/typography.ts | 8 + 19 files changed, 2654 insertions(+), 627 deletions(-) create mode 100644 dist/types/src/lib-components/Accordion/AccordionDialog.vue.d.ts rename dist/types/src/lib-components/buttons/{Button.vue.d.ts => FAButton.vue.d.ts} (95%) create mode 100644 dist/types/src/lib-components/form/FAFormDropdwn.vue.d.ts create mode 100644 dist/types/src/utils/colors.d.ts create mode 100644 dist/types/src/utils/text.d.ts create mode 100644 dist/types/src/utils/typography.d.ts delete mode 100644 src/lib-components/buttons/Button.vue create mode 100644 src/lib-components/buttons/FAButton.vue rename src/lib-components/form/{MyNewFormDropdwn.vue => FAFormDropdwn.vue} (98%) rename src/lib-components/form/{MyNewFormInput.vue => FAFormInput.vue} (98%) create mode 100644 src/utils/colors.ts create mode 100644 src/utils/text.ts create mode 100644 src/utils/typography.ts diff --git a/dist/fa_vuejs_ui_kit.esm.js b/dist/fa_vuejs_ui_kit.esm.js index cc87392..1a1e740 100644 --- a/dist/fa_vuejs_ui_kit.esm.js +++ b/dist/fa_vuejs_ui_kit.esm.js @@ -1,6 +1,6 @@ import Vue from 'vue'; -var script$a = Vue.extend({ +var script$c = Vue.extend({ name: "PrimaryButton", props: { disabled: { @@ -98,10 +98,10 @@ function normalizeComponent(template, style, script, scopeId, isFunctionalTempla } /* script */ -const __vue_script__$a = script$a; +const __vue_script__$c = script$c; /* template */ -var __vue_render__$a = function () { +var __vue_render__$c = function () { var _vm = this; var _h = _vm.$createElement; @@ -123,33 +123,33 @@ var __vue_render__$a = function () { }, [_vm._t("default")], 2) : _vm._t("default")], 2)]); }; -var __vue_staticRenderFns__$a = []; +var __vue_staticRenderFns__$c = []; /* style */ -const __vue_inject_styles__$a = undefined; +const __vue_inject_styles__$c = undefined; /* scoped */ -const __vue_scope_id__$a = undefined; +const __vue_scope_id__$c = undefined; /* module identifier */ -const __vue_module_identifier__$a = undefined; +const __vue_module_identifier__$c = undefined; /* functional template */ -const __vue_is_functional_template__$a = false; +const __vue_is_functional_template__$c = false; /* style inject */ /* style inject SSR */ /* style inject shadow dom */ -const __vue_component__$k = /*#__PURE__*/normalizeComponent({ - render: __vue_render__$a, - staticRenderFns: __vue_staticRenderFns__$a -}, __vue_inject_styles__$a, __vue_script__$a, __vue_scope_id__$a, __vue_is_functional_template__$a, __vue_module_identifier__$a, false, undefined, undefined, undefined); +const __vue_component__$n = /*#__PURE__*/normalizeComponent({ + render: __vue_render__$c, + staticRenderFns: __vue_staticRenderFns__$c +}, __vue_inject_styles__$c, __vue_script__$c, __vue_scope_id__$c, __vue_is_functional_template__$c, __vue_module_identifier__$c, false, undefined, undefined, undefined); -var __vue_component__$l = __vue_component__$k; +var __vue_component__$o = __vue_component__$n; -var script$9 = Vue.extend({ +var script$b = Vue.extend({ name: "DangerButton", props: { disabled: { @@ -172,10 +172,10 @@ var script$9 = Vue.extend({ }); /* script */ -const __vue_script__$9 = script$9; +const __vue_script__$b = script$b; /* template */ -var __vue_render__$9 = function () { +var __vue_render__$b = function () { var _vm = this; var _h = _vm.$createElement; @@ -197,33 +197,33 @@ var __vue_render__$9 = function () { }, [_vm._t("default")], 2) : _vm._t("default")], 2)]); }; -var __vue_staticRenderFns__$9 = []; +var __vue_staticRenderFns__$b = []; /* style */ -const __vue_inject_styles__$9 = undefined; +const __vue_inject_styles__$b = undefined; /* scoped */ -const __vue_scope_id__$9 = undefined; +const __vue_scope_id__$b = undefined; /* module identifier */ -const __vue_module_identifier__$9 = undefined; +const __vue_module_identifier__$b = undefined; /* functional template */ -const __vue_is_functional_template__$9 = false; +const __vue_is_functional_template__$b = false; /* style inject */ /* style inject SSR */ /* style inject shadow dom */ -const __vue_component__$i = /*#__PURE__*/normalizeComponent({ - render: __vue_render__$9, - staticRenderFns: __vue_staticRenderFns__$9 -}, __vue_inject_styles__$9, __vue_script__$9, __vue_scope_id__$9, __vue_is_functional_template__$9, __vue_module_identifier__$9, false, undefined, undefined, undefined); +const __vue_component__$l = /*#__PURE__*/normalizeComponent({ + render: __vue_render__$b, + staticRenderFns: __vue_staticRenderFns__$b +}, __vue_inject_styles__$b, __vue_script__$b, __vue_scope_id__$b, __vue_is_functional_template__$b, __vue_module_identifier__$b, false, undefined, undefined, undefined); -var __vue_component__$j = __vue_component__$i; +var __vue_component__$m = __vue_component__$l; -var script$8 = Vue.extend({ +var script$a = Vue.extend({ name: "MutedButton", props: { disabled: { @@ -246,10 +246,10 @@ var script$8 = Vue.extend({ }); /* script */ -const __vue_script__$8 = script$8; +const __vue_script__$a = script$a; /* template */ -var __vue_render__$8 = function () { +var __vue_render__$a = function () { var _vm = this; var _h = _vm.$createElement; @@ -271,33 +271,33 @@ var __vue_render__$8 = function () { }, [_vm._t("default")], 2) : _vm._t("default")], 2)]); }; -var __vue_staticRenderFns__$8 = []; +var __vue_staticRenderFns__$a = []; /* style */ -const __vue_inject_styles__$8 = undefined; +const __vue_inject_styles__$a = undefined; /* scoped */ -const __vue_scope_id__$8 = undefined; +const __vue_scope_id__$a = undefined; /* module identifier */ -const __vue_module_identifier__$8 = undefined; +const __vue_module_identifier__$a = undefined; /* functional template */ -const __vue_is_functional_template__$8 = false; +const __vue_is_functional_template__$a = false; /* style inject */ /* style inject SSR */ /* style inject shadow dom */ -const __vue_component__$g = /*#__PURE__*/normalizeComponent({ - render: __vue_render__$8, - staticRenderFns: __vue_staticRenderFns__$8 -}, __vue_inject_styles__$8, __vue_script__$8, __vue_scope_id__$8, __vue_is_functional_template__$8, __vue_module_identifier__$8, false, undefined, undefined, undefined); +const __vue_component__$j = /*#__PURE__*/normalizeComponent({ + render: __vue_render__$a, + staticRenderFns: __vue_staticRenderFns__$a +}, __vue_inject_styles__$a, __vue_script__$a, __vue_scope_id__$a, __vue_is_functional_template__$a, __vue_module_identifier__$a, false, undefined, undefined, undefined); -var __vue_component__$h = __vue_component__$g; +var __vue_component__$k = __vue_component__$j; -var script$7 = Vue.extend({ +var script$9 = Vue.extend({ name: "SuccessButton", props: { disabled: { @@ -320,10 +320,10 @@ var script$7 = Vue.extend({ }); /* script */ -const __vue_script__$7 = script$7; +const __vue_script__$9 = script$9; /* template */ -var __vue_render__$7 = function () { +var __vue_render__$9 = function () { var _vm = this; var _h = _vm.$createElement; @@ -345,33 +345,33 @@ var __vue_render__$7 = function () { }, [_vm._t("default")], 2) : _vm._t("default")], 2)]); }; -var __vue_staticRenderFns__$7 = []; +var __vue_staticRenderFns__$9 = []; /* style */ -const __vue_inject_styles__$7 = undefined; +const __vue_inject_styles__$9 = undefined; /* scoped */ -const __vue_scope_id__$7 = undefined; +const __vue_scope_id__$9 = undefined; /* module identifier */ -const __vue_module_identifier__$7 = undefined; +const __vue_module_identifier__$9 = undefined; /* functional template */ -const __vue_is_functional_template__$7 = false; +const __vue_is_functional_template__$9 = false; /* style inject */ /* style inject SSR */ /* style inject shadow dom */ -const __vue_component__$e = /*#__PURE__*/normalizeComponent({ - render: __vue_render__$7, - staticRenderFns: __vue_staticRenderFns__$7 -}, __vue_inject_styles__$7, __vue_script__$7, __vue_scope_id__$7, __vue_is_functional_template__$7, __vue_module_identifier__$7, false, undefined, undefined, undefined); +const __vue_component__$h = /*#__PURE__*/normalizeComponent({ + render: __vue_render__$9, + staticRenderFns: __vue_staticRenderFns__$9 +}, __vue_inject_styles__$9, __vue_script__$9, __vue_scope_id__$9, __vue_is_functional_template__$9, __vue_module_identifier__$9, false, undefined, undefined, undefined); -var __vue_component__$f = __vue_component__$e; +var __vue_component__$i = __vue_component__$h; -var script$6 = Vue.extend({ +var script$8 = Vue.extend({ name: "WarningButton", props: { disabled: { @@ -394,10 +394,10 @@ var script$6 = Vue.extend({ }); /* script */ -const __vue_script__$6 = script$6; +const __vue_script__$8 = script$8; /* template */ -var __vue_render__$6 = function () { +var __vue_render__$8 = function () { var _vm = this; var _h = _vm.$createElement; @@ -419,34 +419,104 @@ var __vue_render__$6 = function () { }, [_vm._t("default")], 2) : _vm._t("default")], 2)]); }; -var __vue_staticRenderFns__$6 = []; +var __vue_staticRenderFns__$8 = []; /* style */ -const __vue_inject_styles__$6 = undefined; +const __vue_inject_styles__$8 = undefined; /* scoped */ -const __vue_scope_id__$6 = undefined; +const __vue_scope_id__$8 = undefined; /* module identifier */ -const __vue_module_identifier__$6 = undefined; +const __vue_module_identifier__$8 = undefined; /* functional template */ -const __vue_is_functional_template__$6 = false; +const __vue_is_functional_template__$8 = false; /* style inject */ /* style inject SSR */ /* style inject shadow dom */ -const __vue_component__$c = /*#__PURE__*/normalizeComponent({ - render: __vue_render__$6, - staticRenderFns: __vue_staticRenderFns__$6 -}, __vue_inject_styles__$6, __vue_script__$6, __vue_scope_id__$6, __vue_is_functional_template__$6, __vue_module_identifier__$6, false, undefined, undefined, undefined); +const __vue_component__$f = /*#__PURE__*/normalizeComponent({ + render: __vue_render__$8, + staticRenderFns: __vue_staticRenderFns__$8 +}, __vue_inject_styles__$8, __vue_script__$8, __vue_scope_id__$8, __vue_is_functional_template__$8, __vue_module_identifier__$8, false, undefined, undefined, undefined); -var __vue_component__$d = __vue_component__$c; +var __vue_component__$g = __vue_component__$f; + +// TODO: Need to move all in tailwind config file +const backgroundColorClassesMapping = { + "primary-brand": "bg-sky-800", + "secondary-brand": "bg-blue-50", + "subtle-text": "bg-gray-500", + "success-old": "bg-green-500", + accents: "bg-neutral-100", + danger: "bg-red-500", + info: "bg-indigo-500", + muted: "bg-gray-500", + primary: "bg-blue-500", + success: "bg-emerald-400", + text: "bg-neutral-800", + warning: "bg-yellow-500", + white: "bg-white" +}; +const hoverColorClassesMapping = { + "primary-brand": "hover:bg-sky-900", + "secondary-brand": "hover:bg-blue-60", + "subtle-text": "hover:bg-gray-600", + "success-old": "hover:bg-green-600", + accents: "hover:bg-neutral-200", + danger: "hover:bg-red-600", + info: "hover:bg-indigo-600", + muted: "hover:bg-gray-600", + primary: "hover:bg-blue-600", + success: "hover:bg-emerald-500", + text: "hover:bg-neutral-900", + warning: "hover:bg-yellow-600", + white: "hover:bg-white" +}; +const borderColorClassesMapping = { + "primary-brand": "border-sky-800", + "secondary-brand": "border-blue-50", + "subtle-text": "border-gray-500", + "success-old": "border-green-500", + accents: "border-neutral-100", + danger: "border-red-500", + info: "border-indigo-500", + muted: "border-gray-500", + primary: "border-blue-500", + success: "border-emerald-400", + text: "neutral-800", + warning: "border-yellow-500", + white: "border-white" +}; +const textColorClassesMapping = { + "label-text": "text-zinc-700", + "primary-brand": "text-sky-800", + "secondary-brand": "text-blue-50", + "subtle-text": "text-gray-500", + "success-old": "text-green-500", + accents: "text-neutral-100", + danger: "text-red-500", + info: "text-indigo-500", + muted: "text-gray-500", + primary: "text-blue-500", + success: "text-emerald-400", + text: "text-neutral-800", + warning: "text-yellow-500", + white: "text-white" +}; -var script$5 = Vue.extend({ - name: "Button", +const textSizeClassesMapping = { + extraSmall: "text-xs px-3 py-2", + small: "text-sm px-3 py-2", + medium: "text-base px-4 py-2", + large: "text-lg px-5 py-6" +}; + +var script$7 = Vue.extend({ + name: "FAButton", props: { color: { type: String, @@ -487,7 +557,7 @@ var script$5 = Vue.extend({ }, computed: { buttonClasses() { - return [this.getTextSizeClass(), this.getColorClass(), this.getVariantClass(), this.getSizeClass(), this.getWidthClass()]; + return [this.getColorClass(), this.getVariantClass(), this.getTextSizeClass(), this.getWidthClass()]; } }, @@ -497,23 +567,7 @@ var script$5 = Vue.extend({ }, getColorClass() { - // Add background color classes here based on your color scheme - const bgColorClasses = { - "primary-brand": "bg-sky-800", - "secondary-brand": "bg-blue-50", - text: "bg-neutral-800", - "subtle-text": "bg-gray-500", - accents: "bg-neutral-100", - success: "bg-emerald-400", - white: "bg-white", - muted: "bg-gray-500", - primary: "bg-blue-500", - "success-old": "bg-green-500", - info: "bg-indigo-500", - warning: "bg-yellow-500", - danger: "bg-red-500" - }; - return bgColorClasses[this.color] || ""; + return backgroundColorClassesMapping[this.color] || ""; }, getVariantClass() { @@ -528,76 +582,30 @@ var script$5 = Vue.extend({ return ""; }, - getSizeClass() { - const sizeClasses = { - extraSmall: `${this.textSize ? this.getTextSizeClass() : "text-xs"} px-3 py-2`, - small: `${this.textSize ? this.getTextSizeClass() : "text-sm"} px-3 py-2`, - medium: `${this.textSize ? this.getTextSizeClass() : "text-base"} px-4 py-2`, - large: `${this.textSize ? this.getTextSizeClass() : "text-lg"} px-5 py-6` - }; - return sizeClasses[this.size] || ""; + getTextSizeClass() { + return textSizeClassesMapping[this.size] || ""; }, getWidthClass() { return this.width === "auto" ? "" : `w-${this.width}`; }, - getTextSizeClass() { - const textSizeClasses = { - extraSmall: "text-xs", - small: "text-sm", - medium: "text-base", - large: "text-lg" - }; - return textSizeClasses[this.textSize] || ""; - }, - getBorderColorClass() { - const borderColorClasses = { - "primary-brand": "border-sky-800", - "secondary-brand": "border-blue-50", - text: "neutral-800", - "subtle-text": "border-gray-500", - accents: "border-neutral-100", - success: "border-emerald-400", - white: "border-white", - muted: "border-gray-500", - primary: "border-blue-500", - "success-old": "border-green-500", - info: "border-indigo-500", - warning: "border-yellow-500", - danger: "border-red-500" - }; - return borderColorClasses[this.color] || ""; + return borderColorClassesMapping[this.color] || ""; }, getTextColorClass() { - const textColorClasses = { - "primary-brand": "text-sky-800", - "secondary-brand": "text-blue-50", - text: "text-neutral-800", - "subtle-text": "text-gray-500", - accents: "text-neutral-100", - success: "text-emerald-400", - white: "text-white", - muted: "text-gray-500", - primary: "text-blue-500", - "success-old": "text-green-500", - info: "text-indigo-500", - warning: "text-yellow-500", - danger: "text-red-500" - }; - return textColorClasses[this.color] || ""; + return textColorClassesMapping[this.color] || ""; } } }); /* script */ -const __vue_script__$5 = script$5; +const __vue_script__$7 = script$7; /* template */ -var __vue_render__$5 = function () { +var __vue_render__$7 = function () { var _vm = this; var _h = _vm.$createElement; @@ -627,33 +635,33 @@ var __vue_render__$5 = function () { })], 2)]); }; -var __vue_staticRenderFns__$5 = []; +var __vue_staticRenderFns__$7 = []; /* style */ -const __vue_inject_styles__$5 = undefined; +const __vue_inject_styles__$7 = undefined; /* scoped */ -const __vue_scope_id__$5 = undefined; +const __vue_scope_id__$7 = undefined; /* module identifier */ -const __vue_module_identifier__$5 = undefined; +const __vue_module_identifier__$7 = undefined; /* functional template */ -const __vue_is_functional_template__$5 = false; +const __vue_is_functional_template__$7 = false; /* style inject */ /* style inject SSR */ /* style inject shadow dom */ -const __vue_component__$a = /*#__PURE__*/normalizeComponent({ - render: __vue_render__$5, - staticRenderFns: __vue_staticRenderFns__$5 -}, __vue_inject_styles__$5, __vue_script__$5, __vue_scope_id__$5, __vue_is_functional_template__$5, __vue_module_identifier__$5, false, undefined, undefined, undefined); +const __vue_component__$d = /*#__PURE__*/normalizeComponent({ + render: __vue_render__$7, + staticRenderFns: __vue_staticRenderFns__$7 +}, __vue_inject_styles__$7, __vue_script__$7, __vue_scope_id__$7, __vue_is_functional_template__$7, __vue_module_identifier__$7, false, undefined, undefined, undefined); -var __vue_component__$b = __vue_component__$a; +var __vue_component__$e = __vue_component__$d; -var script$4 = Vue.extend({ +var script$6 = Vue.extend({ name: 'TableNumberInput', props: { value: { @@ -686,10 +694,10 @@ var script$4 = Vue.extend({ }); /* script */ -const __vue_script__$4 = script$4; +const __vue_script__$6 = script$6; /* template */ -var __vue_render__$4 = function () { +var __vue_render__$6 = function () { var _vm = this; var _h = _vm.$createElement; @@ -727,33 +735,33 @@ var __vue_render__$4 = function () { }); }; -var __vue_staticRenderFns__$4 = []; +var __vue_staticRenderFns__$6 = []; /* style */ -const __vue_inject_styles__$4 = undefined; +const __vue_inject_styles__$6 = undefined; /* scoped */ -const __vue_scope_id__$4 = undefined; +const __vue_scope_id__$6 = undefined; /* module identifier */ -const __vue_module_identifier__$4 = undefined; +const __vue_module_identifier__$6 = undefined; /* functional template */ -const __vue_is_functional_template__$4 = false; +const __vue_is_functional_template__$6 = false; /* style inject */ /* style inject SSR */ /* style inject shadow dom */ -const __vue_component__$8 = /*#__PURE__*/normalizeComponent({ - render: __vue_render__$4, - staticRenderFns: __vue_staticRenderFns__$4 -}, __vue_inject_styles__$4, __vue_script__$4, __vue_scope_id__$4, __vue_is_functional_template__$4, __vue_module_identifier__$4, false, undefined, undefined, undefined); +const __vue_component__$b = /*#__PURE__*/normalizeComponent({ + render: __vue_render__$6, + staticRenderFns: __vue_staticRenderFns__$6 +}, __vue_inject_styles__$6, __vue_script__$6, __vue_scope_id__$6, __vue_is_functional_template__$6, __vue_module_identifier__$6, false, undefined, undefined, undefined); -var __vue_component__$9 = __vue_component__$8; +var __vue_component__$c = __vue_component__$b; -var script$3 = Vue.extend({ +var script$5 = Vue.extend({ name: "KpiCard", props: { title: { @@ -808,10 +816,10 @@ var script$3 = Vue.extend({ }); /* script */ -const __vue_script__$3 = script$3; +const __vue_script__$5 = script$5; /* template */ -var __vue_render__$3 = function () { +var __vue_render__$5 = function () { var _vm = this; var _h = _vm.$createElement; @@ -838,34 +846,34 @@ var __vue_render__$3 = function () { }, [_vm._v("₹")]) : _vm._e(), _vm._v("\n " + _vm._s(_vm.formatValue(_vm.data) || 0) + "\n ")])])]); }; -var __vue_staticRenderFns__$3 = []; +var __vue_staticRenderFns__$5 = []; /* style */ -const __vue_inject_styles__$3 = undefined; +const __vue_inject_styles__$5 = undefined; /* scoped */ -const __vue_scope_id__$3 = undefined; +const __vue_scope_id__$5 = undefined; /* module identifier */ -const __vue_module_identifier__$3 = undefined; +const __vue_module_identifier__$5 = undefined; /* functional template */ -const __vue_is_functional_template__$3 = false; +const __vue_is_functional_template__$5 = false; /* style inject */ /* style inject SSR */ /* style inject shadow dom */ -const __vue_component__$6 = /*#__PURE__*/normalizeComponent({ - render: __vue_render__$3, - staticRenderFns: __vue_staticRenderFns__$3 -}, __vue_inject_styles__$3, __vue_script__$3, __vue_scope_id__$3, __vue_is_functional_template__$3, __vue_module_identifier__$3, false, undefined, undefined, undefined); +const __vue_component__$9 = /*#__PURE__*/normalizeComponent({ + render: __vue_render__$5, + staticRenderFns: __vue_staticRenderFns__$5 +}, __vue_inject_styles__$5, __vue_script__$5, __vue_scope_id__$5, __vue_is_functional_template__$5, __vue_module_identifier__$5, false, undefined, undefined, undefined); -var __vue_component__$7 = __vue_component__$6; +var __vue_component__$a = __vue_component__$9; const supportedModifiers = ['altKey', 'metaKey', 'ctrlKey', 'shiftKey']; -var script$2 = Vue.extend({ +var script$4 = Vue.extend({ name: 'KeyPress', props: { keyEvent: { @@ -995,10 +1003,10 @@ var script$2 = Vue.extend({ }); /* script */ -const __vue_script__$2 = script$2; +const __vue_script__$4 = script$4; /* template */ -var __vue_render__$2 = function () { +var __vue_render__$4 = function () { var _vm = this; var _h = _vm.$createElement; @@ -1008,33 +1016,42 @@ var __vue_render__$2 = function () { return _c("div"); }; -var __vue_staticRenderFns__$2 = []; +var __vue_staticRenderFns__$4 = []; /* style */ -const __vue_inject_styles__$2 = undefined; +const __vue_inject_styles__$4 = undefined; /* scoped */ -const __vue_scope_id__$2 = undefined; +const __vue_scope_id__$4 = undefined; /* module identifier */ -const __vue_module_identifier__$2 = undefined; +const __vue_module_identifier__$4 = undefined; /* functional template */ -const __vue_is_functional_template__$2 = false; +const __vue_is_functional_template__$4 = false; /* style inject */ /* style inject SSR */ /* style inject shadow dom */ -const __vue_component__$4 = /*#__PURE__*/normalizeComponent({ - render: __vue_render__$2, - staticRenderFns: __vue_staticRenderFns__$2 -}, __vue_inject_styles__$2, __vue_script__$2, __vue_scope_id__$2, __vue_is_functional_template__$2, __vue_module_identifier__$2, false, undefined, undefined, undefined); +const __vue_component__$7 = /*#__PURE__*/normalizeComponent({ + render: __vue_render__$4, + staticRenderFns: __vue_staticRenderFns__$4 +}, __vue_inject_styles__$4, __vue_script__$4, __vue_scope_id__$4, __vue_is_functional_template__$4, __vue_module_identifier__$4, false, undefined, undefined, undefined); -var __vue_component__$5 = __vue_component__$4; +var __vue_component__$8 = __vue_component__$7; -var script$1 = Vue.extend({ +const typographyTextClassesMapping = { + "button-text": `text-xl font-semibold font-poppins`, + "supporting-text": `text-sm font-normal font-poppins`, + body: `text-base font-normal font-poppins`, + header: `text-base font-semibold font-poppins leading-snug`, + label: `text-base font-normal font-poppins tracking-0.4`, + title: `text-2xl font-medium font-poppins leading-snug` +}; + +var script$3 = Vue.extend({ name: "Typography", props: { variant: { @@ -1048,42 +1065,25 @@ var script$1 = Vue.extend({ }, computed: { getColorClass() { - const colorClasses = { - "primary-brand": "text-sky-800", - "secondary-brand": "text-blue-50", - text: "text-neutral-800", - "subtle-text": "text-gray-500", - accents: "text-neutral-100", - success: "text-emerald-400", - white: "text-white", - "label-text": "text-zinc-700" - }; - return colorClasses[this.color] || "text-black"; + return textColorClassesMapping[this.color] || "text-black"; } }, methods: { getTypographyClass(variant) { - const typographyClasses = { - title: `text-2xl font-medium font-poppins leading-snug ${this.getColorClass}`, - header: `text-base font-semibold font-poppins leading-snug ${this.getColorClass}`, - body: `text-base font-normal font-poppins ${this.getColorClass}`, - label: `text-base font-normal font-poppins tracking-0.4 ${this.getColorClass}`, - "supporting-text": `text-sm font-normal font-poppins ${this.getColorClass}`, - "button-text": `text-xl font-semibold font-poppins ${this.getColorClass}` - }; // Apply default styles if the variant is not found - - return typographyClasses[variant] || ""; + const textClasses = typographyTextClassesMapping[variant] || ""; + const colorClasses = this.getColorClass; + return `${textClasses} ${colorClasses}`; } } }); /* script */ -const __vue_script__$1 = script$1; +const __vue_script__$3 = script$3; /* template */ -var __vue_render__$1 = function () { +var __vue_render__$3 = function () { var _vm = this; var _h = _vm.$createElement; @@ -1095,33 +1095,33 @@ var __vue_render__$1 = function () { }, [_vm._t("default")], 2); }; -var __vue_staticRenderFns__$1 = []; +var __vue_staticRenderFns__$3 = []; /* style */ -const __vue_inject_styles__$1 = undefined; +const __vue_inject_styles__$3 = undefined; /* scoped */ -const __vue_scope_id__$1 = undefined; +const __vue_scope_id__$3 = undefined; /* module identifier */ -const __vue_module_identifier__$1 = undefined; +const __vue_module_identifier__$3 = undefined; /* functional template */ -const __vue_is_functional_template__$1 = false; +const __vue_is_functional_template__$3 = false; /* style inject */ /* style inject SSR */ /* style inject shadow dom */ -const __vue_component__$2 = /*#__PURE__*/normalizeComponent({ - render: __vue_render__$1, - staticRenderFns: __vue_staticRenderFns__$1 -}, __vue_inject_styles__$1, __vue_script__$1, __vue_scope_id__$1, __vue_is_functional_template__$1, __vue_module_identifier__$1, false, undefined, undefined, undefined); +const __vue_component__$6 = /*#__PURE__*/normalizeComponent({ + render: __vue_render__$3, + staticRenderFns: __vue_staticRenderFns__$3 +}, __vue_inject_styles__$3, __vue_script__$3, __vue_scope_id__$3, __vue_is_functional_template__$3, __vue_module_identifier__$3, false, undefined, undefined, undefined); -var __vue_component__$3 = __vue_component__$2; +var Typography = __vue_component__$6; -var script = Vue.extend({ +var script$2 = Vue.extend({ props: { deletable: { type: Boolean, @@ -1152,50 +1152,13 @@ var script = Vue.extend({ } }, - - mounted() { - console.log("this.deletable", this.deletable); - }, - methods: { getColorClass() { - // Add background color classes here based on your color scheme - const bgColorClasses = { - "primary-brand": "bg-sky-800", - "secondary-brand": "bg-blue-50", - text: "bg-neutral-800", - "subtle-text": "bg-gray-500", - accents: "bg-neutral-100", - success: "bg-emerald-400", - white: "bg-white", - muted: "bg-gray-500", - primary: "bg-blue-500", - "success-old": "bg-green-500", - info: "bg-indigo-500", - warning: "bg-yellow-500", - danger: "bg-red-500" - }; - return bgColorClasses[this.color] || ""; + return backgroundColorClassesMapping[this.color] || ""; }, getHoverColorClass() { - // Add background color classes here based on your color scheme - const bgColorClasses = { - "primary-brand": "hover:bg-sky-900", - "secondary-brand": "hover:bg-blue-60", - text: "hover:bg-neutral-900", - "subtle-text": "hover:bg-gray-600", - accents: "hover:bg-neutral-200", - success: "hover:bg-emerald-500", - white: "hover:bg-white", - muted: "hover:bg-gray-600", - primary: "hover:bg-blue-600", - "success-old": "hover:bg-green-600", - info: "hover:bg-indigo-600", - warning: "hover:bg-yellow-600", - danger: "hover:bg-red-600" - }; - return bgColorClasses[this.color] || ""; + return hoverColorClassesMapping[this.color] || ""; }, getVariantClass() { @@ -1208,59 +1171,12 @@ var script = Vue.extend({ return ""; }, - // getSizeClass(): string { - // const sizeClasses: Record = { - // extraSmall: `${ - // this.textSize ? this.getTextSizeClass() : 'text-xs' - // } px-3 py-2`, - // small: `${ - // this.textSize ? this.getTextSizeClass() : 'text-sm' - // } px-3 py-2`, - // medium: `${ - // this.textSize ? this.getTextSizeClass() : 'text-base' - // } px-4 py-2`, - // large: `${ - // this.textSize ? this.getTextSizeClass() : 'text-lg' - // } px-5 py-6`, - // } - // return sizeClasses[this.size] || '' - // }, getBorderColorClass() { - const borderColorClasses = { - "primary-brand": "border-sky-800", - "secondary-brand": "border-blue-50", - text: "neutral-800", - "subtle-text": "border-gray-500", - accents: "border-neutral-100", - success: "border-emerald-400", - white: "border-white", - muted: "border-gray-500", - primary: "border-blue-500", - "success-old": "border-green-500", - info: "border-indigo-500", - warning: "border-yellow-500", - danger: "border-red-500" - }; - return borderColorClasses[this.color] || ""; + return borderColorClassesMapping[this.color] || ""; }, getTextColorClass() { - const textColorClasses = { - "primary-brand": "text-sky-800", - "secondary-brand": "text-blue-50", - text: "text-neutral-800", - "subtle-text": "text-gray-500", - accents: "text-neutral-100", - success: "text-emerald-400", - white: "text-white", - muted: "text-gray-500", - primary: "text-blue-500", - "success-old": "text-green-500", - info: "text-indigo-500", - warning: "text-yellow-500", - danger: "text-red-500" - }; - return textColorClasses[this.color] || ""; + return textColorClassesMapping[this.color] || ""; }, deleteChip() { @@ -1271,10 +1187,10 @@ var script = Vue.extend({ }); /* script */ -const __vue_script__ = script; +const __vue_script__$2 = script$2; /* template */ -var __vue_render__ = function () { +var __vue_render__$2 = function () { var _vm = this; var _h = _vm.$createElement; @@ -1299,6 +1215,2138 @@ var __vue_render__ = function () { }) : _vm._e()], 2); }; +var __vue_staticRenderFns__$2 = []; +/* style */ + +const __vue_inject_styles__$2 = undefined; +/* scoped */ + +const __vue_scope_id__$2 = undefined; +/* module identifier */ + +const __vue_module_identifier__$2 = undefined; +/* functional template */ + +const __vue_is_functional_template__$2 = false; +/* style inject */ + +/* style inject SSR */ + +/* style inject shadow dom */ + +const __vue_component__$4 = /*#__PURE__*/normalizeComponent({ + render: __vue_render__$2, + staticRenderFns: __vue_staticRenderFns__$2 +}, __vue_inject_styles__$2, __vue_script__$2, __vue_scope_id__$2, __vue_is_functional_template__$2, __vue_module_identifier__$2, false, undefined, undefined, undefined); + +var __vue_component__$5 = __vue_component__$4; + +var script$1 = 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; + } + + } +}); + +const isOldIE = typeof navigator !== 'undefined' && + /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase()); +function createInjector(context) { + return (id, style) => addStyle(id, style); +} +let HEAD; +const styles = {}; +function addStyle(id, css) { + const group = isOldIE ? css.media || 'default' : id; + const style = styles[group] || (styles[group] = { ids: new Set(), styles: [] }); + if (!style.ids.has(id)) { + style.ids.add(id); + let code = css.source; + if (css.map) { + // https://developer.chrome.com/devtools/docs/javascript-debugging + // this makes source maps inside style tags work properly in Chrome + code += '\n/*# sourceURL=' + css.map.sources[0] + ' */'; + // http://stackoverflow.com/a/26603875 + code += + '\n/*# sourceMappingURL=data:application/json;base64,' + + btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) + + ' */'; + } + if (!style.element) { + style.element = document.createElement('style'); + style.element.type = 'text/css'; + if (css.media) + style.element.setAttribute('media', css.media); + if (HEAD === undefined) { + HEAD = document.head || document.getElementsByTagName('head')[0]; + } + HEAD.appendChild(style.element); + } + if ('styleSheet' in style.element) { + style.styles.push(code); + style.element.styleSheet.cssText = style.styles + .filter(Boolean) + .join('\n'); + } + else { + const index = style.ids.size - 1; + const textNode = document.createTextNode(code); + const nodes = style.element.childNodes; + if (nodes[index]) + style.element.removeChild(nodes[index]); + if (nodes.length) + style.element.insertBefore(textNode, nodes[index]); + else + style.element.appendChild(textNode); + } + } +} + +/* script */ +const __vue_script__$1 = script$1; +/* template */ + +var __vue_render__$1 = function () { + var _vm = this; + + var _h = _vm.$createElement; + + var _c = _vm._self._c || _h; + + return _c('div', [_c('div', { + staticClass: "w-[264.76px]" + }, [_c('button', { + staticClass: "flex justify-between", + class: _vm.inner ? 'bg-neutral-100' : '', + on: { + "click": _vm.toggleAccordion + } + }, [_c('Typography', { + attrs: { + "variant": "title" + } + }, [_vm._v("\n " + _vm._s(_vm.title) + "\n ")]), _vm._v(" "), _c('i', { + staticClass: "material-icons r-4 ml-[111px] h-[23.36px] w-6 rounded-sm bg-sky-800", + class: { + 'rotate-180 transform': _vm.isOpen, + 'bg-sky-800': !_vm.inner + } + }, [_vm._v("\n keyboard_arrow_down\n ")])], 1), _vm._v(" "), _c('div', { + directives: [{ + name: "show", + rawName: "v-show", + value: _vm.isOpen, + expression: "isOpen" + }] + }, [_vm._t("default")], 2)])]); +}; + +var __vue_staticRenderFns__$1 = []; +/* style */ + +const __vue_inject_styles__$1 = function (inject) { + if (!inject) return; + inject("data-v-87a88c10_0", { + source: ".material-icons[data-v-87a88c10]{transition:transform .3s ease-in-out}", + map: undefined, + media: undefined + }); +}; +/* scoped */ + + +const __vue_scope_id__$1 = "data-v-87a88c10"; +/* module identifier */ + +const __vue_module_identifier__$1 = undefined; +/* functional template */ + +const __vue_is_functional_template__$1 = false; +/* style inject SSR */ + +/* style inject shadow dom */ + +const __vue_component__$2 = /*#__PURE__*/normalizeComponent({ + render: __vue_render__$1, + staticRenderFns: __vue_staticRenderFns__$1 +}, __vue_inject_styles__$1, __vue_script__$1, __vue_scope_id__$1, __vue_is_functional_template__$1, __vue_module_identifier__$1, false, createInjector, undefined, undefined); + +var __vue_component__$3 = __vue_component__$2; + +var top = 'top'; +var bottom = 'bottom'; +var right = 'right'; +var left = 'left'; +var auto = 'auto'; +var basePlacements = [top, bottom, right, left]; +var start = 'start'; +var end = 'end'; +var clippingParents = 'clippingParents'; +var viewport = 'viewport'; +var popper = 'popper'; +var reference = 'reference'; +var variationPlacements = /*#__PURE__*/basePlacements.reduce(function (acc, placement) { + return acc.concat([placement + "-" + start, placement + "-" + end]); +}, []); +var placements = /*#__PURE__*/[].concat(basePlacements, [auto]).reduce(function (acc, placement) { + return acc.concat([placement, placement + "-" + start, placement + "-" + end]); +}, []); // modifiers that need to read the DOM + +var beforeRead = 'beforeRead'; +var read = 'read'; +var afterRead = 'afterRead'; // pure-logic modifiers + +var beforeMain = 'beforeMain'; +var main = 'main'; +var afterMain = 'afterMain'; // modifier with the purpose to write to the DOM (or write into a framework state) + +var beforeWrite = 'beforeWrite'; +var write = 'write'; +var afterWrite = 'afterWrite'; +var modifierPhases = [beforeRead, read, afterRead, beforeMain, main, afterMain, beforeWrite, write, afterWrite]; + +function getNodeName(element) { + return element ? (element.nodeName || '').toLowerCase() : null; +} + +function getWindow(node) { + if (node == null) { + return window; + } + + if (node.toString() !== '[object Window]') { + var ownerDocument = node.ownerDocument; + return ownerDocument ? ownerDocument.defaultView || window : window; + } + + return node; +} + +function isElement(node) { + var OwnElement = getWindow(node).Element; + return node instanceof OwnElement || node instanceof Element; +} + +function isHTMLElement(node) { + var OwnElement = getWindow(node).HTMLElement; + return node instanceof OwnElement || node instanceof HTMLElement; +} + +function isShadowRoot(node) { + // IE 11 has no ShadowRoot + if (typeof ShadowRoot === 'undefined') { + return false; + } + + var OwnElement = getWindow(node).ShadowRoot; + return node instanceof OwnElement || node instanceof ShadowRoot; +} + +// and applies them to the HTMLElements such as popper and arrow + +function applyStyles(_ref) { + var state = _ref.state; + Object.keys(state.elements).forEach(function (name) { + var style = state.styles[name] || {}; + var attributes = state.attributes[name] || {}; + var element = state.elements[name]; // arrow is optional + virtual elements + + if (!isHTMLElement(element) || !getNodeName(element)) { + return; + } // Flow doesn't support to extend this property, but it's the most + // effective way to apply styles to an HTMLElement + // $FlowFixMe[cannot-write] + + + Object.assign(element.style, style); + Object.keys(attributes).forEach(function (name) { + var value = attributes[name]; + + if (value === false) { + element.removeAttribute(name); + } else { + element.setAttribute(name, value === true ? '' : value); + } + }); + }); +} + +function effect$2(_ref2) { + var state = _ref2.state; + var initialStyles = { + popper: { + position: state.options.strategy, + left: '0', + top: '0', + margin: '0' + }, + arrow: { + position: 'absolute' + }, + reference: {} + }; + Object.assign(state.elements.popper.style, initialStyles.popper); + state.styles = initialStyles; + + if (state.elements.arrow) { + Object.assign(state.elements.arrow.style, initialStyles.arrow); + } + + return function () { + Object.keys(state.elements).forEach(function (name) { + var element = state.elements[name]; + var attributes = state.attributes[name] || {}; + var styleProperties = Object.keys(state.styles.hasOwnProperty(name) ? state.styles[name] : initialStyles[name]); // Set all values to an empty string to unset them + + var style = styleProperties.reduce(function (style, property) { + style[property] = ''; + return style; + }, {}); // arrow is optional + virtual elements + + if (!isHTMLElement(element) || !getNodeName(element)) { + return; + } + + Object.assign(element.style, style); + Object.keys(attributes).forEach(function (attribute) { + element.removeAttribute(attribute); + }); + }); + }; +} // eslint-disable-next-line import/no-unused-modules + + +var applyStyles$1 = { + name: 'applyStyles', + enabled: true, + phase: 'write', + fn: applyStyles, + effect: effect$2, + requires: ['computeStyles'] +}; + +function getBasePlacement(placement) { + return placement.split('-')[0]; +} + +var max = Math.max; +var min = Math.min; +var round = Math.round; + +function getUAString() { + var uaData = navigator.userAgentData; + + if (uaData != null && uaData.brands && Array.isArray(uaData.brands)) { + return uaData.brands.map(function (item) { + return item.brand + "/" + item.version; + }).join(' '); + } + + return navigator.userAgent; +} + +function isLayoutViewport() { + return !/^((?!chrome|android).)*safari/i.test(getUAString()); +} + +function getBoundingClientRect(element, includeScale, isFixedStrategy) { + if (includeScale === void 0) { + includeScale = false; + } + + if (isFixedStrategy === void 0) { + isFixedStrategy = false; + } + + var clientRect = element.getBoundingClientRect(); + var scaleX = 1; + var scaleY = 1; + + if (includeScale && isHTMLElement(element)) { + scaleX = element.offsetWidth > 0 ? round(clientRect.width) / element.offsetWidth || 1 : 1; + scaleY = element.offsetHeight > 0 ? round(clientRect.height) / element.offsetHeight || 1 : 1; + } + + var _ref = isElement(element) ? getWindow(element) : window, + visualViewport = _ref.visualViewport; + + var addVisualOffsets = !isLayoutViewport() && isFixedStrategy; + var x = (clientRect.left + (addVisualOffsets && visualViewport ? visualViewport.offsetLeft : 0)) / scaleX; + var y = (clientRect.top + (addVisualOffsets && visualViewport ? visualViewport.offsetTop : 0)) / scaleY; + var width = clientRect.width / scaleX; + var height = clientRect.height / scaleY; + return { + width: width, + height: height, + top: y, + right: x + width, + bottom: y + height, + left: x, + x: x, + y: y + }; +} + +// means it doesn't take into account transforms. + +function getLayoutRect(element) { + var clientRect = getBoundingClientRect(element); // Use the clientRect sizes if it's not been transformed. + // Fixes https://github.com/popperjs/popper-core/issues/1223 + + var width = element.offsetWidth; + var height = element.offsetHeight; + + if (Math.abs(clientRect.width - width) <= 1) { + width = clientRect.width; + } + + if (Math.abs(clientRect.height - height) <= 1) { + height = clientRect.height; + } + + return { + x: element.offsetLeft, + y: element.offsetTop, + width: width, + height: height + }; +} + +function contains(parent, child) { + var rootNode = child.getRootNode && child.getRootNode(); // First, attempt with faster native method + + if (parent.contains(child)) { + return true; + } // then fallback to custom implementation with Shadow DOM support + else if (rootNode && isShadowRoot(rootNode)) { + var next = child; + + do { + if (next && parent.isSameNode(next)) { + return true; + } // $FlowFixMe[prop-missing]: need a better way to handle this... + + + next = next.parentNode || next.host; + } while (next); + } // Give up, the result is false + + + return false; +} + +function getComputedStyle(element) { + return getWindow(element).getComputedStyle(element); +} + +function isTableElement(element) { + return ['table', 'td', 'th'].indexOf(getNodeName(element)) >= 0; +} + +function getDocumentElement(element) { + // $FlowFixMe[incompatible-return]: assume body is always available + return ((isElement(element) ? element.ownerDocument : // $FlowFixMe[prop-missing] + element.document) || window.document).documentElement; +} + +function getParentNode(element) { + if (getNodeName(element) === 'html') { + return element; + } + + return (// this is a quicker (but less type safe) way to save quite some bytes from the bundle + // $FlowFixMe[incompatible-return] + // $FlowFixMe[prop-missing] + element.assignedSlot || // step into the shadow DOM of the parent of a slotted node + element.parentNode || ( // DOM Element detected + isShadowRoot(element) ? element.host : null) || // ShadowRoot detected + // $FlowFixMe[incompatible-call]: HTMLElement is a Node + getDocumentElement(element) // fallback + + ); +} + +function getTrueOffsetParent(element) { + if (!isHTMLElement(element) || // https://github.com/popperjs/popper-core/issues/837 + getComputedStyle(element).position === 'fixed') { + return null; + } + + return element.offsetParent; +} // `.offsetParent` reports `null` for fixed elements, while absolute elements +// return the containing block + + +function getContainingBlock(element) { + var isFirefox = /firefox/i.test(getUAString()); + var isIE = /Trident/i.test(getUAString()); + + if (isIE && isHTMLElement(element)) { + // In IE 9, 10 and 11 fixed elements containing block is always established by the viewport + var elementCss = getComputedStyle(element); + + if (elementCss.position === 'fixed') { + return null; + } + } + + var currentNode = getParentNode(element); + + if (isShadowRoot(currentNode)) { + currentNode = currentNode.host; + } + + while (isHTMLElement(currentNode) && ['html', 'body'].indexOf(getNodeName(currentNode)) < 0) { + var css = getComputedStyle(currentNode); // This is non-exhaustive but covers the most common CSS properties that + // create a containing block. + // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block + + if (css.transform !== 'none' || css.perspective !== 'none' || css.contain === 'paint' || ['transform', 'perspective'].indexOf(css.willChange) !== -1 || isFirefox && css.willChange === 'filter' || isFirefox && css.filter && css.filter !== 'none') { + return currentNode; + } else { + currentNode = currentNode.parentNode; + } + } + + return null; +} // Gets the closest ancestor positioned element. Handles some edge cases, +// such as table ancestors and cross browser bugs. + + +function getOffsetParent(element) { + var window = getWindow(element); + var offsetParent = getTrueOffsetParent(element); + + while (offsetParent && isTableElement(offsetParent) && getComputedStyle(offsetParent).position === 'static') { + offsetParent = getTrueOffsetParent(offsetParent); + } + + if (offsetParent && (getNodeName(offsetParent) === 'html' || getNodeName(offsetParent) === 'body' && getComputedStyle(offsetParent).position === 'static')) { + return window; + } + + return offsetParent || getContainingBlock(element) || window; +} + +function getMainAxisFromPlacement(placement) { + return ['top', 'bottom'].indexOf(placement) >= 0 ? 'x' : 'y'; +} + +function within(min$1, value, max$1) { + return max(min$1, min(value, max$1)); +} +function withinMaxClamp(min, value, max) { + var v = within(min, value, max); + return v > max ? max : v; +} + +function getFreshSideObject() { + return { + top: 0, + right: 0, + bottom: 0, + left: 0 + }; +} + +function mergePaddingObject(paddingObject) { + return Object.assign({}, getFreshSideObject(), paddingObject); +} + +function expandToHashMap(value, keys) { + return keys.reduce(function (hashMap, key) { + hashMap[key] = value; + return hashMap; + }, {}); +} + +var toPaddingObject = function toPaddingObject(padding, state) { + padding = typeof padding === 'function' ? padding(Object.assign({}, state.rects, { + placement: state.placement + })) : padding; + return mergePaddingObject(typeof padding !== 'number' ? padding : expandToHashMap(padding, basePlacements)); +}; + +function arrow(_ref) { + var _state$modifiersData$; + + var state = _ref.state, + name = _ref.name, + options = _ref.options; + var arrowElement = state.elements.arrow; + var popperOffsets = state.modifiersData.popperOffsets; + var basePlacement = getBasePlacement(state.placement); + var axis = getMainAxisFromPlacement(basePlacement); + var isVertical = [left, right].indexOf(basePlacement) >= 0; + var len = isVertical ? 'height' : 'width'; + + if (!arrowElement || !popperOffsets) { + return; + } + + var paddingObject = toPaddingObject(options.padding, state); + var arrowRect = getLayoutRect(arrowElement); + var minProp = axis === 'y' ? top : left; + var maxProp = axis === 'y' ? bottom : right; + var endDiff = state.rects.reference[len] + state.rects.reference[axis] - popperOffsets[axis] - state.rects.popper[len]; + var startDiff = popperOffsets[axis] - state.rects.reference[axis]; + var arrowOffsetParent = getOffsetParent(arrowElement); + var clientSize = arrowOffsetParent ? axis === 'y' ? arrowOffsetParent.clientHeight || 0 : arrowOffsetParent.clientWidth || 0 : 0; + var centerToReference = endDiff / 2 - startDiff / 2; // Make sure the arrow doesn't overflow the popper if the center point is + // outside of the popper bounds + + var min = paddingObject[minProp]; + var max = clientSize - arrowRect[len] - paddingObject[maxProp]; + var center = clientSize / 2 - arrowRect[len] / 2 + centerToReference; + var offset = within(min, center, max); // Prevents breaking syntax highlighting... + + var axisProp = axis; + state.modifiersData[name] = (_state$modifiersData$ = {}, _state$modifiersData$[axisProp] = offset, _state$modifiersData$.centerOffset = offset - center, _state$modifiersData$); +} + +function effect$1(_ref2) { + var state = _ref2.state, + options = _ref2.options; + var _options$element = options.element, + arrowElement = _options$element === void 0 ? '[data-popper-arrow]' : _options$element; + + if (arrowElement == null) { + return; + } // CSS selector + + + if (typeof arrowElement === 'string') { + arrowElement = state.elements.popper.querySelector(arrowElement); + + if (!arrowElement) { + return; + } + } + + if (!contains(state.elements.popper, arrowElement)) { + return; + } + + state.elements.arrow = arrowElement; +} // eslint-disable-next-line import/no-unused-modules + + +var arrow$1 = { + name: 'arrow', + enabled: true, + phase: 'main', + fn: arrow, + effect: effect$1, + requires: ['popperOffsets'], + requiresIfExists: ['preventOverflow'] +}; + +function getVariation(placement) { + return placement.split('-')[1]; +} + +var unsetSides = { + top: 'auto', + right: 'auto', + bottom: 'auto', + left: 'auto' +}; // Round the offsets to the nearest suitable subpixel based on the DPR. +// Zooming can change the DPR, but it seems to report a value that will +// cleanly divide the values into the appropriate subpixels. + +function roundOffsetsByDPR(_ref, win) { + var x = _ref.x, + y = _ref.y; + var dpr = win.devicePixelRatio || 1; + return { + x: round(x * dpr) / dpr || 0, + y: round(y * dpr) / dpr || 0 + }; +} + +function mapToStyles(_ref2) { + var _Object$assign2; + + var popper = _ref2.popper, + popperRect = _ref2.popperRect, + placement = _ref2.placement, + variation = _ref2.variation, + offsets = _ref2.offsets, + position = _ref2.position, + gpuAcceleration = _ref2.gpuAcceleration, + adaptive = _ref2.adaptive, + roundOffsets = _ref2.roundOffsets, + isFixed = _ref2.isFixed; + var _offsets$x = offsets.x, + x = _offsets$x === void 0 ? 0 : _offsets$x, + _offsets$y = offsets.y, + y = _offsets$y === void 0 ? 0 : _offsets$y; + + var _ref3 = typeof roundOffsets === 'function' ? roundOffsets({ + x: x, + y: y + }) : { + x: x, + y: y + }; + + x = _ref3.x; + y = _ref3.y; + var hasX = offsets.hasOwnProperty('x'); + var hasY = offsets.hasOwnProperty('y'); + var sideX = left; + var sideY = top; + var win = window; + + if (adaptive) { + var offsetParent = getOffsetParent(popper); + var heightProp = 'clientHeight'; + var widthProp = 'clientWidth'; + + if (offsetParent === getWindow(popper)) { + offsetParent = getDocumentElement(popper); + + if (getComputedStyle(offsetParent).position !== 'static' && position === 'absolute') { + heightProp = 'scrollHeight'; + widthProp = 'scrollWidth'; + } + } // $FlowFixMe[incompatible-cast]: force type refinement, we compare offsetParent with window above, but Flow doesn't detect it + + + offsetParent = offsetParent; + + if (placement === top || (placement === left || placement === right) && variation === end) { + sideY = bottom; + var offsetY = isFixed && offsetParent === win && win.visualViewport ? win.visualViewport.height : // $FlowFixMe[prop-missing] + offsetParent[heightProp]; + y -= offsetY - popperRect.height; + y *= gpuAcceleration ? 1 : -1; + } + + if (placement === left || (placement === top || placement === bottom) && variation === end) { + sideX = right; + var offsetX = isFixed && offsetParent === win && win.visualViewport ? win.visualViewport.width : // $FlowFixMe[prop-missing] + offsetParent[widthProp]; + x -= offsetX - popperRect.width; + x *= gpuAcceleration ? 1 : -1; + } + } + + var commonStyles = Object.assign({ + position: position + }, adaptive && unsetSides); + + var _ref4 = roundOffsets === true ? roundOffsetsByDPR({ + x: x, + y: y + }, getWindow(popper)) : { + x: x, + y: y + }; + + x = _ref4.x; + y = _ref4.y; + + if (gpuAcceleration) { + var _Object$assign; + + return Object.assign({}, commonStyles, (_Object$assign = {}, _Object$assign[sideY] = hasY ? '0' : '', _Object$assign[sideX] = hasX ? '0' : '', _Object$assign.transform = (win.devicePixelRatio || 1) <= 1 ? "translate(" + x + "px, " + y + "px)" : "translate3d(" + x + "px, " + y + "px, 0)", _Object$assign)); + } + + return Object.assign({}, commonStyles, (_Object$assign2 = {}, _Object$assign2[sideY] = hasY ? y + "px" : '', _Object$assign2[sideX] = hasX ? x + "px" : '', _Object$assign2.transform = '', _Object$assign2)); +} + +function computeStyles(_ref5) { + var state = _ref5.state, + options = _ref5.options; + var _options$gpuAccelerat = options.gpuAcceleration, + gpuAcceleration = _options$gpuAccelerat === void 0 ? true : _options$gpuAccelerat, + _options$adaptive = options.adaptive, + adaptive = _options$adaptive === void 0 ? true : _options$adaptive, + _options$roundOffsets = options.roundOffsets, + roundOffsets = _options$roundOffsets === void 0 ? true : _options$roundOffsets; + var commonStyles = { + placement: getBasePlacement(state.placement), + variation: getVariation(state.placement), + popper: state.elements.popper, + popperRect: state.rects.popper, + gpuAcceleration: gpuAcceleration, + isFixed: state.options.strategy === 'fixed' + }; + + if (state.modifiersData.popperOffsets != null) { + state.styles.popper = Object.assign({}, state.styles.popper, mapToStyles(Object.assign({}, commonStyles, { + offsets: state.modifiersData.popperOffsets, + position: state.options.strategy, + adaptive: adaptive, + roundOffsets: roundOffsets + }))); + } + + if (state.modifiersData.arrow != null) { + state.styles.arrow = Object.assign({}, state.styles.arrow, mapToStyles(Object.assign({}, commonStyles, { + offsets: state.modifiersData.arrow, + position: 'absolute', + adaptive: false, + roundOffsets: roundOffsets + }))); + } + + state.attributes.popper = Object.assign({}, state.attributes.popper, { + 'data-popper-placement': state.placement + }); +} // eslint-disable-next-line import/no-unused-modules + + +var computeStyles$1 = { + name: 'computeStyles', + enabled: true, + phase: 'beforeWrite', + fn: computeStyles, + data: {} +}; + +var passive = { + passive: true +}; + +function effect(_ref) { + var state = _ref.state, + instance = _ref.instance, + options = _ref.options; + var _options$scroll = options.scroll, + scroll = _options$scroll === void 0 ? true : _options$scroll, + _options$resize = options.resize, + resize = _options$resize === void 0 ? true : _options$resize; + var window = getWindow(state.elements.popper); + var scrollParents = [].concat(state.scrollParents.reference, state.scrollParents.popper); + + if (scroll) { + scrollParents.forEach(function (scrollParent) { + scrollParent.addEventListener('scroll', instance.update, passive); + }); + } + + if (resize) { + window.addEventListener('resize', instance.update, passive); + } + + return function () { + if (scroll) { + scrollParents.forEach(function (scrollParent) { + scrollParent.removeEventListener('scroll', instance.update, passive); + }); + } + + if (resize) { + window.removeEventListener('resize', instance.update, passive); + } + }; +} // eslint-disable-next-line import/no-unused-modules + + +var eventListeners = { + name: 'eventListeners', + enabled: true, + phase: 'write', + fn: function fn() {}, + effect: effect, + data: {} +}; + +var hash$1 = { + left: 'right', + right: 'left', + bottom: 'top', + top: 'bottom' +}; +function getOppositePlacement(placement) { + return placement.replace(/left|right|bottom|top/g, function (matched) { + return hash$1[matched]; + }); +} + +var hash = { + start: 'end', + end: 'start' +}; +function getOppositeVariationPlacement(placement) { + return placement.replace(/start|end/g, function (matched) { + return hash[matched]; + }); +} + +function getWindowScroll(node) { + var win = getWindow(node); + var scrollLeft = win.pageXOffset; + var scrollTop = win.pageYOffset; + return { + scrollLeft: scrollLeft, + scrollTop: scrollTop + }; +} + +function getWindowScrollBarX(element) { + // If has a CSS width greater than the viewport, then this will be + // incorrect for RTL. + // Popper 1 is broken in this case and never had a bug report so let's assume + // it's not an issue. I don't think anyone ever specifies width on + // anyway. + // Browsers where the left scrollbar doesn't cause an issue report `0` for + // this (e.g. Edge 2019, IE11, Safari) + return getBoundingClientRect(getDocumentElement(element)).left + getWindowScroll(element).scrollLeft; +} + +function getViewportRect(element, strategy) { + var win = getWindow(element); + var html = getDocumentElement(element); + var visualViewport = win.visualViewport; + var width = html.clientWidth; + var height = html.clientHeight; + var x = 0; + var y = 0; + + if (visualViewport) { + width = visualViewport.width; + height = visualViewport.height; + var layoutViewport = isLayoutViewport(); + + if (layoutViewport || !layoutViewport && strategy === 'fixed') { + x = visualViewport.offsetLeft; + y = visualViewport.offsetTop; + } + } + + return { + width: width, + height: height, + x: x + getWindowScrollBarX(element), + y: y + }; +} + +// of the `` and `` rect bounds if horizontally scrollable + +function getDocumentRect(element) { + var _element$ownerDocumen; + + var html = getDocumentElement(element); + var winScroll = getWindowScroll(element); + var body = (_element$ownerDocumen = element.ownerDocument) == null ? void 0 : _element$ownerDocumen.body; + var width = max(html.scrollWidth, html.clientWidth, body ? body.scrollWidth : 0, body ? body.clientWidth : 0); + var height = max(html.scrollHeight, html.clientHeight, body ? body.scrollHeight : 0, body ? body.clientHeight : 0); + var x = -winScroll.scrollLeft + getWindowScrollBarX(element); + var y = -winScroll.scrollTop; + + if (getComputedStyle(body || html).direction === 'rtl') { + x += max(html.clientWidth, body ? body.clientWidth : 0) - width; + } + + return { + width: width, + height: height, + x: x, + y: y + }; +} + +function isScrollParent(element) { + // Firefox wants us to check `-x` and `-y` variations as well + var _getComputedStyle = getComputedStyle(element), + overflow = _getComputedStyle.overflow, + overflowX = _getComputedStyle.overflowX, + overflowY = _getComputedStyle.overflowY; + + return /auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX); +} + +function getScrollParent(node) { + if (['html', 'body', '#document'].indexOf(getNodeName(node)) >= 0) { + // $FlowFixMe[incompatible-return]: assume body is always available + return node.ownerDocument.body; + } + + if (isHTMLElement(node) && isScrollParent(node)) { + return node; + } + + return getScrollParent(getParentNode(node)); +} + +/* +given a DOM element, return the list of all scroll parents, up the list of ancesors +until we get to the top window object. This list is what we attach scroll listeners +to, because if any of these parent elements scroll, we'll need to re-calculate the +reference element's position. +*/ + +function listScrollParents(element, list) { + var _element$ownerDocumen; + + if (list === void 0) { + list = []; + } + + var scrollParent = getScrollParent(element); + var isBody = scrollParent === ((_element$ownerDocumen = element.ownerDocument) == null ? void 0 : _element$ownerDocumen.body); + var win = getWindow(scrollParent); + var target = isBody ? [win].concat(win.visualViewport || [], isScrollParent(scrollParent) ? scrollParent : []) : scrollParent; + var updatedList = list.concat(target); + return isBody ? updatedList : // $FlowFixMe[incompatible-call]: isBody tells us target will be an HTMLElement here + updatedList.concat(listScrollParents(getParentNode(target))); +} + +function rectToClientRect(rect) { + return Object.assign({}, rect, { + left: rect.x, + top: rect.y, + right: rect.x + rect.width, + bottom: rect.y + rect.height + }); +} + +function getInnerBoundingClientRect(element, strategy) { + var rect = getBoundingClientRect(element, false, strategy === 'fixed'); + rect.top = rect.top + element.clientTop; + rect.left = rect.left + element.clientLeft; + rect.bottom = rect.top + element.clientHeight; + rect.right = rect.left + element.clientWidth; + rect.width = element.clientWidth; + rect.height = element.clientHeight; + rect.x = rect.left; + rect.y = rect.top; + return rect; +} + +function getClientRectFromMixedType(element, clippingParent, strategy) { + return clippingParent === viewport ? rectToClientRect(getViewportRect(element, strategy)) : isElement(clippingParent) ? getInnerBoundingClientRect(clippingParent, strategy) : rectToClientRect(getDocumentRect(getDocumentElement(element))); +} // A "clipping parent" is an overflowable container with the characteristic of +// clipping (or hiding) overflowing elements with a position different from +// `initial` + + +function getClippingParents(element) { + var clippingParents = listScrollParents(getParentNode(element)); + var canEscapeClipping = ['absolute', 'fixed'].indexOf(getComputedStyle(element).position) >= 0; + var clipperElement = canEscapeClipping && isHTMLElement(element) ? getOffsetParent(element) : element; + + if (!isElement(clipperElement)) { + return []; + } // $FlowFixMe[incompatible-return]: https://github.com/facebook/flow/issues/1414 + + + return clippingParents.filter(function (clippingParent) { + return isElement(clippingParent) && contains(clippingParent, clipperElement) && getNodeName(clippingParent) !== 'body'; + }); +} // Gets the maximum area that the element is visible in due to any number of +// clipping parents + + +function getClippingRect(element, boundary, rootBoundary, strategy) { + var mainClippingParents = boundary === 'clippingParents' ? getClippingParents(element) : [].concat(boundary); + var clippingParents = [].concat(mainClippingParents, [rootBoundary]); + var firstClippingParent = clippingParents[0]; + var clippingRect = clippingParents.reduce(function (accRect, clippingParent) { + var rect = getClientRectFromMixedType(element, clippingParent, strategy); + accRect.top = max(rect.top, accRect.top); + accRect.right = min(rect.right, accRect.right); + accRect.bottom = min(rect.bottom, accRect.bottom); + accRect.left = max(rect.left, accRect.left); + return accRect; + }, getClientRectFromMixedType(element, firstClippingParent, strategy)); + clippingRect.width = clippingRect.right - clippingRect.left; + clippingRect.height = clippingRect.bottom - clippingRect.top; + clippingRect.x = clippingRect.left; + clippingRect.y = clippingRect.top; + return clippingRect; +} + +function computeOffsets(_ref) { + var reference = _ref.reference, + element = _ref.element, + placement = _ref.placement; + var basePlacement = placement ? getBasePlacement(placement) : null; + var variation = placement ? getVariation(placement) : null; + var commonX = reference.x + reference.width / 2 - element.width / 2; + var commonY = reference.y + reference.height / 2 - element.height / 2; + var offsets; + + switch (basePlacement) { + case top: + offsets = { + x: commonX, + y: reference.y - element.height + }; + break; + + case bottom: + offsets = { + x: commonX, + y: reference.y + reference.height + }; + break; + + case right: + offsets = { + x: reference.x + reference.width, + y: commonY + }; + break; + + case left: + offsets = { + x: reference.x - element.width, + y: commonY + }; + break; + + default: + offsets = { + x: reference.x, + y: reference.y + }; + } + + var mainAxis = basePlacement ? getMainAxisFromPlacement(basePlacement) : null; + + if (mainAxis != null) { + var len = mainAxis === 'y' ? 'height' : 'width'; + + switch (variation) { + case start: + offsets[mainAxis] = offsets[mainAxis] - (reference[len] / 2 - element[len] / 2); + break; + + case end: + offsets[mainAxis] = offsets[mainAxis] + (reference[len] / 2 - element[len] / 2); + break; + } + } + + return offsets; +} + +function detectOverflow(state, options) { + if (options === void 0) { + options = {}; + } + + var _options = options, + _options$placement = _options.placement, + placement = _options$placement === void 0 ? state.placement : _options$placement, + _options$strategy = _options.strategy, + strategy = _options$strategy === void 0 ? state.strategy : _options$strategy, + _options$boundary = _options.boundary, + boundary = _options$boundary === void 0 ? clippingParents : _options$boundary, + _options$rootBoundary = _options.rootBoundary, + rootBoundary = _options$rootBoundary === void 0 ? viewport : _options$rootBoundary, + _options$elementConte = _options.elementContext, + elementContext = _options$elementConte === void 0 ? popper : _options$elementConte, + _options$altBoundary = _options.altBoundary, + altBoundary = _options$altBoundary === void 0 ? false : _options$altBoundary, + _options$padding = _options.padding, + padding = _options$padding === void 0 ? 0 : _options$padding; + var paddingObject = mergePaddingObject(typeof padding !== 'number' ? padding : expandToHashMap(padding, basePlacements)); + var altContext = elementContext === popper ? reference : popper; + var popperRect = state.rects.popper; + var element = state.elements[altBoundary ? altContext : elementContext]; + var clippingClientRect = getClippingRect(isElement(element) ? element : element.contextElement || getDocumentElement(state.elements.popper), boundary, rootBoundary, strategy); + var referenceClientRect = getBoundingClientRect(state.elements.reference); + var popperOffsets = computeOffsets({ + reference: referenceClientRect, + element: popperRect, + strategy: 'absolute', + placement: placement + }); + var popperClientRect = rectToClientRect(Object.assign({}, popperRect, popperOffsets)); + var elementClientRect = elementContext === popper ? popperClientRect : referenceClientRect; // positive = overflowing the clipping rect + // 0 or negative = within the clipping rect + + var overflowOffsets = { + top: clippingClientRect.top - elementClientRect.top + paddingObject.top, + bottom: elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom, + left: clippingClientRect.left - elementClientRect.left + paddingObject.left, + right: elementClientRect.right - clippingClientRect.right + paddingObject.right + }; + var offsetData = state.modifiersData.offset; // Offsets can be applied only to the popper element + + if (elementContext === popper && offsetData) { + var offset = offsetData[placement]; + Object.keys(overflowOffsets).forEach(function (key) { + var multiply = [right, bottom].indexOf(key) >= 0 ? 1 : -1; + var axis = [top, bottom].indexOf(key) >= 0 ? 'y' : 'x'; + overflowOffsets[key] += offset[axis] * multiply; + }); + } + + return overflowOffsets; +} + +function computeAutoPlacement(state, options) { + if (options === void 0) { + options = {}; + } + + var _options = options, + placement = _options.placement, + boundary = _options.boundary, + rootBoundary = _options.rootBoundary, + padding = _options.padding, + flipVariations = _options.flipVariations, + _options$allowedAutoP = _options.allowedAutoPlacements, + allowedAutoPlacements = _options$allowedAutoP === void 0 ? placements : _options$allowedAutoP; + var variation = getVariation(placement); + var placements$1 = variation ? flipVariations ? variationPlacements : variationPlacements.filter(function (placement) { + return getVariation(placement) === variation; + }) : basePlacements; + var allowedPlacements = placements$1.filter(function (placement) { + return allowedAutoPlacements.indexOf(placement) >= 0; + }); + + if (allowedPlacements.length === 0) { + allowedPlacements = placements$1; + } // $FlowFixMe[incompatible-type]: Flow seems to have problems with two array unions... + + + var overflows = allowedPlacements.reduce(function (acc, placement) { + acc[placement] = detectOverflow(state, { + placement: placement, + boundary: boundary, + rootBoundary: rootBoundary, + padding: padding + })[getBasePlacement(placement)]; + return acc; + }, {}); + return Object.keys(overflows).sort(function (a, b) { + return overflows[a] - overflows[b]; + }); +} + +function getExpandedFallbackPlacements(placement) { + if (getBasePlacement(placement) === auto) { + return []; + } + + var oppositePlacement = getOppositePlacement(placement); + return [getOppositeVariationPlacement(placement), oppositePlacement, getOppositeVariationPlacement(oppositePlacement)]; +} + +function flip(_ref) { + var state = _ref.state, + options = _ref.options, + name = _ref.name; + + if (state.modifiersData[name]._skip) { + return; + } + + var _options$mainAxis = options.mainAxis, + checkMainAxis = _options$mainAxis === void 0 ? true : _options$mainAxis, + _options$altAxis = options.altAxis, + checkAltAxis = _options$altAxis === void 0 ? true : _options$altAxis, + specifiedFallbackPlacements = options.fallbackPlacements, + padding = options.padding, + boundary = options.boundary, + rootBoundary = options.rootBoundary, + altBoundary = options.altBoundary, + _options$flipVariatio = options.flipVariations, + flipVariations = _options$flipVariatio === void 0 ? true : _options$flipVariatio, + allowedAutoPlacements = options.allowedAutoPlacements; + var preferredPlacement = state.options.placement; + var basePlacement = getBasePlacement(preferredPlacement); + var isBasePlacement = basePlacement === preferredPlacement; + var fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipVariations ? [getOppositePlacement(preferredPlacement)] : getExpandedFallbackPlacements(preferredPlacement)); + var placements = [preferredPlacement].concat(fallbackPlacements).reduce(function (acc, placement) { + return acc.concat(getBasePlacement(placement) === auto ? computeAutoPlacement(state, { + placement: placement, + boundary: boundary, + rootBoundary: rootBoundary, + padding: padding, + flipVariations: flipVariations, + allowedAutoPlacements: allowedAutoPlacements + }) : placement); + }, []); + var referenceRect = state.rects.reference; + var popperRect = state.rects.popper; + var checksMap = new Map(); + var makeFallbackChecks = true; + var firstFittingPlacement = placements[0]; + + for (var i = 0; i < placements.length; i++) { + var placement = placements[i]; + + var _basePlacement = getBasePlacement(placement); + + var isStartVariation = getVariation(placement) === start; + var isVertical = [top, bottom].indexOf(_basePlacement) >= 0; + var len = isVertical ? 'width' : 'height'; + var overflow = detectOverflow(state, { + placement: placement, + boundary: boundary, + rootBoundary: rootBoundary, + altBoundary: altBoundary, + padding: padding + }); + var mainVariationSide = isVertical ? isStartVariation ? right : left : isStartVariation ? bottom : top; + + if (referenceRect[len] > popperRect[len]) { + mainVariationSide = getOppositePlacement(mainVariationSide); + } + + var altVariationSide = getOppositePlacement(mainVariationSide); + var checks = []; + + if (checkMainAxis) { + checks.push(overflow[_basePlacement] <= 0); + } + + if (checkAltAxis) { + checks.push(overflow[mainVariationSide] <= 0, overflow[altVariationSide] <= 0); + } + + if (checks.every(function (check) { + return check; + })) { + firstFittingPlacement = placement; + makeFallbackChecks = false; + break; + } + + checksMap.set(placement, checks); + } + + if (makeFallbackChecks) { + // `2` may be desired in some cases – research later + var numberOfChecks = flipVariations ? 3 : 1; + + var _loop = function _loop(_i) { + var fittingPlacement = placements.find(function (placement) { + var checks = checksMap.get(placement); + + if (checks) { + return checks.slice(0, _i).every(function (check) { + return check; + }); + } + }); + + if (fittingPlacement) { + firstFittingPlacement = fittingPlacement; + return "break"; + } + }; + + for (var _i = numberOfChecks; _i > 0; _i--) { + var _ret = _loop(_i); + + if (_ret === "break") break; + } + } + + if (state.placement !== firstFittingPlacement) { + state.modifiersData[name]._skip = true; + state.placement = firstFittingPlacement; + state.reset = true; + } +} // eslint-disable-next-line import/no-unused-modules + + +var flip$1 = { + name: 'flip', + enabled: true, + phase: 'main', + fn: flip, + requiresIfExists: ['offset'], + data: { + _skip: false + } +}; + +function getSideOffsets(overflow, rect, preventedOffsets) { + if (preventedOffsets === void 0) { + preventedOffsets = { + x: 0, + y: 0 + }; + } + + return { + top: overflow.top - rect.height - preventedOffsets.y, + right: overflow.right - rect.width + preventedOffsets.x, + bottom: overflow.bottom - rect.height + preventedOffsets.y, + left: overflow.left - rect.width - preventedOffsets.x + }; +} + +function isAnySideFullyClipped(overflow) { + return [top, right, bottom, left].some(function (side) { + return overflow[side] >= 0; + }); +} + +function hide(_ref) { + var state = _ref.state, + name = _ref.name; + var referenceRect = state.rects.reference; + var popperRect = state.rects.popper; + var preventedOffsets = state.modifiersData.preventOverflow; + var referenceOverflow = detectOverflow(state, { + elementContext: 'reference' + }); + var popperAltOverflow = detectOverflow(state, { + altBoundary: true + }); + var referenceClippingOffsets = getSideOffsets(referenceOverflow, referenceRect); + var popperEscapeOffsets = getSideOffsets(popperAltOverflow, popperRect, preventedOffsets); + var isReferenceHidden = isAnySideFullyClipped(referenceClippingOffsets); + var hasPopperEscaped = isAnySideFullyClipped(popperEscapeOffsets); + state.modifiersData[name] = { + referenceClippingOffsets: referenceClippingOffsets, + popperEscapeOffsets: popperEscapeOffsets, + isReferenceHidden: isReferenceHidden, + hasPopperEscaped: hasPopperEscaped + }; + state.attributes.popper = Object.assign({}, state.attributes.popper, { + 'data-popper-reference-hidden': isReferenceHidden, + 'data-popper-escaped': hasPopperEscaped + }); +} // eslint-disable-next-line import/no-unused-modules + + +var hide$1 = { + name: 'hide', + enabled: true, + phase: 'main', + requiresIfExists: ['preventOverflow'], + fn: hide +}; + +function distanceAndSkiddingToXY(placement, rects, offset) { + var basePlacement = getBasePlacement(placement); + var invertDistance = [left, top].indexOf(basePlacement) >= 0 ? -1 : 1; + + var _ref = typeof offset === 'function' ? offset(Object.assign({}, rects, { + placement: placement + })) : offset, + skidding = _ref[0], + distance = _ref[1]; + + skidding = skidding || 0; + distance = (distance || 0) * invertDistance; + return [left, right].indexOf(basePlacement) >= 0 ? { + x: distance, + y: skidding + } : { + x: skidding, + y: distance + }; +} + +function offset(_ref2) { + var state = _ref2.state, + options = _ref2.options, + name = _ref2.name; + var _options$offset = options.offset, + offset = _options$offset === void 0 ? [0, 0] : _options$offset; + var data = placements.reduce(function (acc, placement) { + acc[placement] = distanceAndSkiddingToXY(placement, state.rects, offset); + return acc; + }, {}); + var _data$state$placement = data[state.placement], + x = _data$state$placement.x, + y = _data$state$placement.y; + + if (state.modifiersData.popperOffsets != null) { + state.modifiersData.popperOffsets.x += x; + state.modifiersData.popperOffsets.y += y; + } + + state.modifiersData[name] = data; +} // eslint-disable-next-line import/no-unused-modules + + +var offset$1 = { + name: 'offset', + enabled: true, + phase: 'main', + requires: ['popperOffsets'], + fn: offset +}; + +function popperOffsets(_ref) { + var state = _ref.state, + name = _ref.name; + // Offsets are the actual position the popper needs to have to be + // properly positioned near its reference element + // This is the most basic placement, and will be adjusted by + // the modifiers in the next step + state.modifiersData[name] = computeOffsets({ + reference: state.rects.reference, + element: state.rects.popper, + strategy: 'absolute', + placement: state.placement + }); +} // eslint-disable-next-line import/no-unused-modules + + +var popperOffsets$1 = { + name: 'popperOffsets', + enabled: true, + phase: 'read', + fn: popperOffsets, + data: {} +}; + +function getAltAxis(axis) { + return axis === 'x' ? 'y' : 'x'; +} + +function preventOverflow(_ref) { + var state = _ref.state, + options = _ref.options, + name = _ref.name; + var _options$mainAxis = options.mainAxis, + checkMainAxis = _options$mainAxis === void 0 ? true : _options$mainAxis, + _options$altAxis = options.altAxis, + checkAltAxis = _options$altAxis === void 0 ? false : _options$altAxis, + boundary = options.boundary, + rootBoundary = options.rootBoundary, + altBoundary = options.altBoundary, + padding = options.padding, + _options$tether = options.tether, + tether = _options$tether === void 0 ? true : _options$tether, + _options$tetherOffset = options.tetherOffset, + tetherOffset = _options$tetherOffset === void 0 ? 0 : _options$tetherOffset; + var overflow = detectOverflow(state, { + boundary: boundary, + rootBoundary: rootBoundary, + padding: padding, + altBoundary: altBoundary + }); + var basePlacement = getBasePlacement(state.placement); + var variation = getVariation(state.placement); + var isBasePlacement = !variation; + var mainAxis = getMainAxisFromPlacement(basePlacement); + var altAxis = getAltAxis(mainAxis); + var popperOffsets = state.modifiersData.popperOffsets; + var referenceRect = state.rects.reference; + var popperRect = state.rects.popper; + var tetherOffsetValue = typeof tetherOffset === 'function' ? tetherOffset(Object.assign({}, state.rects, { + placement: state.placement + })) : tetherOffset; + var normalizedTetherOffsetValue = typeof tetherOffsetValue === 'number' ? { + mainAxis: tetherOffsetValue, + altAxis: tetherOffsetValue + } : Object.assign({ + mainAxis: 0, + altAxis: 0 + }, tetherOffsetValue); + var offsetModifierState = state.modifiersData.offset ? state.modifiersData.offset[state.placement] : null; + var data = { + x: 0, + y: 0 + }; + + if (!popperOffsets) { + return; + } + + if (checkMainAxis) { + var _offsetModifierState$; + + var mainSide = mainAxis === 'y' ? top : left; + var altSide = mainAxis === 'y' ? bottom : right; + var len = mainAxis === 'y' ? 'height' : 'width'; + var offset = popperOffsets[mainAxis]; + var min$1 = offset + overflow[mainSide]; + var max$1 = offset - overflow[altSide]; + var additive = tether ? -popperRect[len] / 2 : 0; + var minLen = variation === start ? referenceRect[len] : popperRect[len]; + var maxLen = variation === start ? -popperRect[len] : -referenceRect[len]; // We need to include the arrow in the calculation so the arrow doesn't go + // outside the reference bounds + + var arrowElement = state.elements.arrow; + var arrowRect = tether && arrowElement ? getLayoutRect(arrowElement) : { + width: 0, + height: 0 + }; + var arrowPaddingObject = state.modifiersData['arrow#persistent'] ? state.modifiersData['arrow#persistent'].padding : getFreshSideObject(); + var arrowPaddingMin = arrowPaddingObject[mainSide]; + var arrowPaddingMax = arrowPaddingObject[altSide]; // If the reference length is smaller than the arrow length, we don't want + // to include its full size in the calculation. If the reference is small + // and near the edge of a boundary, the popper can overflow even if the + // reference is not overflowing as well (e.g. virtual elements with no + // width or height) + + var arrowLen = within(0, referenceRect[len], arrowRect[len]); + var minOffset = isBasePlacement ? referenceRect[len] / 2 - additive - arrowLen - arrowPaddingMin - normalizedTetherOffsetValue.mainAxis : minLen - arrowLen - arrowPaddingMin - normalizedTetherOffsetValue.mainAxis; + var maxOffset = isBasePlacement ? -referenceRect[len] / 2 + additive + arrowLen + arrowPaddingMax + normalizedTetherOffsetValue.mainAxis : maxLen + arrowLen + arrowPaddingMax + normalizedTetherOffsetValue.mainAxis; + var arrowOffsetParent = state.elements.arrow && getOffsetParent(state.elements.arrow); + var clientOffset = arrowOffsetParent ? mainAxis === 'y' ? arrowOffsetParent.clientTop || 0 : arrowOffsetParent.clientLeft || 0 : 0; + var offsetModifierValue = (_offsetModifierState$ = offsetModifierState == null ? void 0 : offsetModifierState[mainAxis]) != null ? _offsetModifierState$ : 0; + var tetherMin = offset + minOffset - offsetModifierValue - clientOffset; + var tetherMax = offset + maxOffset - offsetModifierValue; + var preventedOffset = within(tether ? min(min$1, tetherMin) : min$1, offset, tether ? max(max$1, tetherMax) : max$1); + popperOffsets[mainAxis] = preventedOffset; + data[mainAxis] = preventedOffset - offset; + } + + if (checkAltAxis) { + var _offsetModifierState$2; + + var _mainSide = mainAxis === 'x' ? top : left; + + var _altSide = mainAxis === 'x' ? bottom : right; + + var _offset = popperOffsets[altAxis]; + + var _len = altAxis === 'y' ? 'height' : 'width'; + + var _min = _offset + overflow[_mainSide]; + + var _max = _offset - overflow[_altSide]; + + var isOriginSide = [top, left].indexOf(basePlacement) !== -1; + + var _offsetModifierValue = (_offsetModifierState$2 = offsetModifierState == null ? void 0 : offsetModifierState[altAxis]) != null ? _offsetModifierState$2 : 0; + + var _tetherMin = isOriginSide ? _min : _offset - referenceRect[_len] - popperRect[_len] - _offsetModifierValue + normalizedTetherOffsetValue.altAxis; + + var _tetherMax = isOriginSide ? _offset + referenceRect[_len] + popperRect[_len] - _offsetModifierValue - normalizedTetherOffsetValue.altAxis : _max; + + var _preventedOffset = tether && isOriginSide ? withinMaxClamp(_tetherMin, _offset, _tetherMax) : within(tether ? _tetherMin : _min, _offset, tether ? _tetherMax : _max); + + popperOffsets[altAxis] = _preventedOffset; + data[altAxis] = _preventedOffset - _offset; + } + + state.modifiersData[name] = data; +} // eslint-disable-next-line import/no-unused-modules + + +var preventOverflow$1 = { + name: 'preventOverflow', + enabled: true, + phase: 'main', + fn: preventOverflow, + requiresIfExists: ['offset'] +}; + +function getHTMLElementScroll(element) { + return { + scrollLeft: element.scrollLeft, + scrollTop: element.scrollTop + }; +} + +function getNodeScroll(node) { + if (node === getWindow(node) || !isHTMLElement(node)) { + return getWindowScroll(node); + } else { + return getHTMLElementScroll(node); + } +} + +function isElementScaled(element) { + var rect = element.getBoundingClientRect(); + var scaleX = round(rect.width) / element.offsetWidth || 1; + var scaleY = round(rect.height) / element.offsetHeight || 1; + return scaleX !== 1 || scaleY !== 1; +} // Returns the composite rect of an element relative to its offsetParent. +// Composite means it takes into account transforms as well as layout. + + +function getCompositeRect(elementOrVirtualElement, offsetParent, isFixed) { + if (isFixed === void 0) { + isFixed = false; + } + + var isOffsetParentAnElement = isHTMLElement(offsetParent); + var offsetParentIsScaled = isHTMLElement(offsetParent) && isElementScaled(offsetParent); + var documentElement = getDocumentElement(offsetParent); + var rect = getBoundingClientRect(elementOrVirtualElement, offsetParentIsScaled, isFixed); + var scroll = { + scrollLeft: 0, + scrollTop: 0 + }; + var offsets = { + x: 0, + y: 0 + }; + + if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) { + if (getNodeName(offsetParent) !== 'body' || // https://github.com/popperjs/popper-core/issues/1078 + isScrollParent(documentElement)) { + scroll = getNodeScroll(offsetParent); + } + + if (isHTMLElement(offsetParent)) { + offsets = getBoundingClientRect(offsetParent, true); + offsets.x += offsetParent.clientLeft; + offsets.y += offsetParent.clientTop; + } else if (documentElement) { + offsets.x = getWindowScrollBarX(documentElement); + } + } + + return { + x: rect.left + scroll.scrollLeft - offsets.x, + y: rect.top + scroll.scrollTop - offsets.y, + width: rect.width, + height: rect.height + }; +} + +function order(modifiers) { + var map = new Map(); + var visited = new Set(); + var result = []; + modifiers.forEach(function (modifier) { + map.set(modifier.name, modifier); + }); // On visiting object, check for its dependencies and visit them recursively + + function sort(modifier) { + visited.add(modifier.name); + var requires = [].concat(modifier.requires || [], modifier.requiresIfExists || []); + requires.forEach(function (dep) { + if (!visited.has(dep)) { + var depModifier = map.get(dep); + + if (depModifier) { + sort(depModifier); + } + } + }); + result.push(modifier); + } + + modifiers.forEach(function (modifier) { + if (!visited.has(modifier.name)) { + // check for visited object + sort(modifier); + } + }); + return result; +} + +function orderModifiers(modifiers) { + // order based on dependencies + var orderedModifiers = order(modifiers); // order based on phase + + return modifierPhases.reduce(function (acc, phase) { + return acc.concat(orderedModifiers.filter(function (modifier) { + return modifier.phase === phase; + })); + }, []); +} + +function debounce(fn) { + var pending; + return function () { + if (!pending) { + pending = new Promise(function (resolve) { + Promise.resolve().then(function () { + pending = undefined; + resolve(fn()); + }); + }); + } + + return pending; + }; +} + +function mergeByName(modifiers) { + var merged = modifiers.reduce(function (merged, current) { + var existing = merged[current.name]; + merged[current.name] = existing ? Object.assign({}, existing, current, { + options: Object.assign({}, existing.options, current.options), + data: Object.assign({}, existing.data, current.data) + }) : current; + return merged; + }, {}); // IE11 does not support Object.values + + return Object.keys(merged).map(function (key) { + return merged[key]; + }); +} + +var DEFAULT_OPTIONS = { + placement: 'bottom', + modifiers: [], + strategy: 'absolute' +}; + +function areValidElements() { + for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return !args.some(function (element) { + return !(element && typeof element.getBoundingClientRect === 'function'); + }); +} + +function popperGenerator(generatorOptions) { + if (generatorOptions === void 0) { + generatorOptions = {}; + } + + var _generatorOptions = generatorOptions, + _generatorOptions$def = _generatorOptions.defaultModifiers, + defaultModifiers = _generatorOptions$def === void 0 ? [] : _generatorOptions$def, + _generatorOptions$def2 = _generatorOptions.defaultOptions, + defaultOptions = _generatorOptions$def2 === void 0 ? DEFAULT_OPTIONS : _generatorOptions$def2; + return function createPopper(reference, popper, options) { + if (options === void 0) { + options = defaultOptions; + } + + var state = { + placement: 'bottom', + orderedModifiers: [], + options: Object.assign({}, DEFAULT_OPTIONS, defaultOptions), + modifiersData: {}, + elements: { + reference: reference, + popper: popper + }, + attributes: {}, + styles: {} + }; + var effectCleanupFns = []; + var isDestroyed = false; + var instance = { + state: state, + setOptions: function setOptions(setOptionsAction) { + var options = typeof setOptionsAction === 'function' ? setOptionsAction(state.options) : setOptionsAction; + cleanupModifierEffects(); + state.options = Object.assign({}, defaultOptions, state.options, options); + state.scrollParents = { + reference: isElement(reference) ? listScrollParents(reference) : reference.contextElement ? listScrollParents(reference.contextElement) : [], + popper: listScrollParents(popper) + }; // Orders the modifiers based on their dependencies and `phase` + // properties + + var orderedModifiers = orderModifiers(mergeByName([].concat(defaultModifiers, state.options.modifiers))); // Strip out disabled modifiers + + state.orderedModifiers = orderedModifiers.filter(function (m) { + return m.enabled; + }); + runModifierEffects(); + return instance.update(); + }, + // Sync update – it will always be executed, even if not necessary. This + // is useful for low frequency updates where sync behavior simplifies the + // logic. + // For high frequency updates (e.g. `resize` and `scroll` events), always + // prefer the async Popper#update method + forceUpdate: function forceUpdate() { + if (isDestroyed) { + return; + } + + var _state$elements = state.elements, + reference = _state$elements.reference, + popper = _state$elements.popper; // Don't proceed if `reference` or `popper` are not valid elements + // anymore + + if (!areValidElements(reference, popper)) { + return; + } // Store the reference and popper rects to be read by modifiers + + + state.rects = { + reference: getCompositeRect(reference, getOffsetParent(popper), state.options.strategy === 'fixed'), + popper: getLayoutRect(popper) + }; // Modifiers have the ability to reset the current update cycle. The + // most common use case for this is the `flip` modifier changing the + // placement, which then needs to re-run all the modifiers, because the + // logic was previously ran for the previous placement and is therefore + // stale/incorrect + + state.reset = false; + state.placement = state.options.placement; // On each update cycle, the `modifiersData` property for each modifier + // is filled with the initial data specified by the modifier. This means + // it doesn't persist and is fresh on each update. + // To ensure persistent data, use `${name}#persistent` + + state.orderedModifiers.forEach(function (modifier) { + return state.modifiersData[modifier.name] = Object.assign({}, modifier.data); + }); + + for (var index = 0; index < state.orderedModifiers.length; index++) { + if (state.reset === true) { + state.reset = false; + index = -1; + continue; + } + + var _state$orderedModifie = state.orderedModifiers[index], + fn = _state$orderedModifie.fn, + _state$orderedModifie2 = _state$orderedModifie.options, + _options = _state$orderedModifie2 === void 0 ? {} : _state$orderedModifie2, + name = _state$orderedModifie.name; + + if (typeof fn === 'function') { + state = fn({ + state: state, + options: _options, + name: name, + instance: instance + }) || state; + } + } + }, + // Async and optimistically optimized update – it will not be executed if + // not necessary (debounced to run at most once-per-tick) + update: debounce(function () { + return new Promise(function (resolve) { + instance.forceUpdate(); + resolve(state); + }); + }), + destroy: function destroy() { + cleanupModifierEffects(); + isDestroyed = true; + } + }; + + if (!areValidElements(reference, popper)) { + return instance; + } + + instance.setOptions(options).then(function (state) { + if (!isDestroyed && options.onFirstUpdate) { + options.onFirstUpdate(state); + } + }); // Modifiers have the ability to execute arbitrary code before the first + // update cycle runs. They will be executed in the same order as the update + // cycle. This is useful when a modifier adds some persistent data that + // other modifiers need to use, but the modifier is run after the dependent + // one. + + function runModifierEffects() { + state.orderedModifiers.forEach(function (_ref) { + var name = _ref.name, + _ref$options = _ref.options, + options = _ref$options === void 0 ? {} : _ref$options, + effect = _ref.effect; + + if (typeof effect === 'function') { + var cleanupFn = effect({ + state: state, + name: name, + instance: instance, + options: options + }); + + var noopFn = function noopFn() {}; + + effectCleanupFns.push(cleanupFn || noopFn); + } + }); + } + + function cleanupModifierEffects() { + effectCleanupFns.forEach(function (fn) { + return fn(); + }); + effectCleanupFns = []; + } + + return instance; + }; +} + +var defaultModifiers = [eventListeners, popperOffsets$1, computeStyles$1, applyStyles$1, offset$1, flip$1, preventOverflow$1, arrow$1, hide$1]; +var createPopper = /*#__PURE__*/popperGenerator({ + defaultModifiers: defaultModifiers +}); // eslint-disable-next-line import/no-unused-modules + +var script = Vue.extend({ + name: "FAFormDropDown", + components: { + Typography + }, + props: { + prefix: { + type: String, + required: false, + default: null + }, + label: { + type: String, + required: false, + default: null + }, + required: { + type: Boolean, + default: false, + required: false + }, + options: { + type: Array, + default: () => [], + required: false + }, + disabled: { + type: Boolean, + default: false, + required: false + }, + value: { + type: String, + required: true + }, + placeholder: { + type: String, + required: false, + default: "" + } + }, + + data() { + return { + selectedValue: this.value + }; + }, + + computed: { + getTitle() { + const selectedOption = this.options.find(opt => opt.value == this.selectedValue); + return (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.title) || (this.options.length === 0 ? "No items" : "--"); + } + + }, + + mounted() { + this.selectedValue = this.value; + }, + + methods: { + onItemClick(value) { + this.$emit("input", value); + }, + + onDropdownClick() {// Implement dropdown click logic + }, + + withPopper(dropdownList, component, _ref) { + let { + width + } = _ref; + dropdownList.style.width = width; + const popper = createPopper(component.$refs.toggle, dropdownList, { + modifiers: [{ + name: "offset", + options: { + offset: [0, -1] + } + }, { + name: "toggleClass", + enabled: true, + phase: "write", + + fn(_ref2) { + let { + state + } = _ref2; + + // You may need to replace the following line with appropriate logic + if (component && component.$el) { + component.$el.classList.toggle("drop-up", state.placement == "top"); + } + } + + }] + }); + return popper; + } + + } +}); + +/* script */ +const __vue_script__ = script; +/* template */ + +var __vue_render__ = function () { + var _vm = this; + + var _h = _vm.$createElement; + + var _c = _vm._self._c || _h; + + return _c('div', {}, [_vm.label ? _c('div', { + staticClass: "m-0 mb-1 ml-2 text-start text-sm font-semibold" + }, [_c('Typography', { + attrs: { + "color": "label-text", + "variant": "supporting-text" + } + }, [_vm._v(_vm._s(_vm.label)), _c('span', { + staticStyle: { + "color": "red" + } + }, [_vm._v(_vm._s(_vm.required ? "*" : ""))])]), _vm._v(" "), _vm._t("default")], 2) : _vm._e(), _vm._v(" "), _c('v-select', { + staticClass: "!text-grey-500 absolute top-0 right-0 bottom-0 left-0 w-full cursor-pointer rounded bg-transparent bg-red-500 text-red-500 outline-none", + attrs: { + "calculate-position": _vm.withPopper, + "clearable": false, + "disabled": _vm.disabled, + "options": _vm.options, + "reduce": function (value) { + return value.value; + }, + "searchable": true, + "append-to-body": "", + "label": "title", + "placeholder": _vm.placeholder + }, + scopedSlots: _vm._u([{ + key: "selected-option", + fn: function (ref) { + var title = ref.title; + return [_c('div', { + staticClass: "flex gap-2" + }, [_vm.prefix ? _c('strong', [_vm._v(_vm._s(_vm.prefix))]) : _vm._e(), _vm._v(" "), _c('div', { + staticClass: "!font-poppins' !text-base !font-normal !leading-normal !tracking-wide !text-zinc-700" + }, [_vm._v("\n " + _vm._s(title) + "\n ")])])]; + } + }]), + model: { + value: _vm.selectedValue, + callback: function ($$v) { + _vm.selectedValue = $$v; + }, + expression: "selectedValue" + } + })], 1); +}; + var __vue_staticRenderFns__ = []; /* style */ @@ -1329,17 +3377,19 @@ var __vue_component__$1 = __vue_component__; var components = /*#__PURE__*/Object.freeze({ __proto__: null, - PrimaryButton: __vue_component__$l, - DangerButton: __vue_component__$j, - MutedButton: __vue_component__$h, - SuccessButton: __vue_component__$f, - WarningButton: __vue_component__$d, - Button: __vue_component__$b, - TableNumberInput: __vue_component__$9, - KpiCard: __vue_component__$7, - KeyPress: __vue_component__$5, - Typography: __vue_component__$3, - Chip: __vue_component__$1 + PrimaryButton: __vue_component__$o, + DangerButton: __vue_component__$m, + MutedButton: __vue_component__$k, + SuccessButton: __vue_component__$i, + WarningButton: __vue_component__$g, + FAButton: __vue_component__$e, + TableNumberInput: __vue_component__$c, + KpiCard: __vue_component__$a, + KeyPress: __vue_component__$8, + Typography: Typography, + Chip: __vue_component__$5, + AccordionDialog: __vue_component__$3, + FAFormDropdwn: __vue_component__$1 }); // Import vue components @@ -1351,4 +3401,4 @@ const install = function installFa_vuejs_ui_kit(Vue) { }); }; // Create module definition for Vue.use() -export { __vue_component__$b as Button, __vue_component__$1 as Chip, __vue_component__$j as DangerButton, __vue_component__$5 as KeyPress, __vue_component__$7 as KpiCard, __vue_component__$h as MutedButton, __vue_component__$l as PrimaryButton, __vue_component__$f as SuccessButton, __vue_component__$9 as TableNumberInput, __vue_component__$3 as Typography, __vue_component__$d as WarningButton, install as default }; +export { __vue_component__$3 as AccordionDialog, __vue_component__$5 as Chip, __vue_component__$m as DangerButton, __vue_component__$e as FAButton, __vue_component__$1 as FAFormDropdwn, __vue_component__$8 as KeyPress, __vue_component__$a as KpiCard, __vue_component__$k as MutedButton, __vue_component__$o as PrimaryButton, __vue_component__$i as SuccessButton, __vue_component__$c as TableNumberInput, Typography, __vue_component__$g as WarningButton, install as default }; diff --git a/dist/types/src/lib-components/Accordion/AccordionDialog.vue.d.ts b/dist/types/src/lib-components/Accordion/AccordionDialog.vue.d.ts new file mode 100644 index 0000000..df7e0ec --- /dev/null +++ b/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; +export default _default; diff --git a/dist/types/src/lib-components/buttons/Button.vue.d.ts b/dist/types/src/lib-components/buttons/FAButton.vue.d.ts similarity index 95% rename from dist/types/src/lib-components/buttons/Button.vue.d.ts rename to dist/types/src/lib-components/buttons/FAButton.vue.d.ts index 184eb3d..9ad7a4b 100644 --- a/dist/types/src/lib-components/buttons/Button.vue.d.ts +++ b/dist/types/src/lib-components/buttons/FAButton.vue.d.ts @@ -3,9 +3,8 @@ declare const _default: import("vue/types/vue").ExtendedVue; +export default _default; diff --git a/dist/types/src/lib-components/index.d.ts b/dist/types/src/lib-components/index.d.ts index 8d5d400..5eb4869 100644 --- a/dist/types/src/lib-components/index.d.ts +++ b/dist/types/src/lib-components/index.d.ts @@ -3,9 +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 Button } from "./buttons/Button.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"; diff --git a/dist/types/src/utils/colors.d.ts b/dist/types/src/utils/colors.d.ts new file mode 100644 index 0000000..ee6b262 --- /dev/null +++ b/dist/types/src/utils/colors.d.ts @@ -0,0 +1,4 @@ +export declare const backgroundColorClassesMapping: Record; +export declare const hoverColorClassesMapping: Record; +export declare const borderColorClassesMapping: Record; +export declare const textColorClassesMapping: Record; diff --git a/dist/types/src/utils/text.d.ts b/dist/types/src/utils/text.d.ts new file mode 100644 index 0000000..ae5c86e --- /dev/null +++ b/dist/types/src/utils/text.d.ts @@ -0,0 +1 @@ +export declare const textSizeClassesMapping: Record; diff --git a/dist/types/src/utils/typography.d.ts b/dist/types/src/utils/typography.d.ts new file mode 100644 index 0000000..d29f1df --- /dev/null +++ b/dist/types/src/utils/typography.d.ts @@ -0,0 +1 @@ +export declare const typographyTextClassesMapping: Record; diff --git a/src/lib-components/Accordion/AccordionDialog.vue b/src/lib-components/Accordion/AccordionDialog.vue index f4b4834..2d319de 100644 --- a/src/lib-components/Accordion/AccordionDialog.vue +++ b/src/lib-components/Accordion/AccordionDialog.vue @@ -24,9 +24,12 @@ -