@kiva/kv-components 7.6.2 → 8.0.0

package/dist/vue/KvWwwHeader2.js

@@ -0,0 +1,119 @@
+import { ref as t, shallowRef as h, computed as B, onMounted as w, onBeforeUnmount as U } from "vue";
+import E from "@kiva/kv-tokens";
+import H from "./KvWwwHeader/KvHeaderLinkBar.js";
+import I from "./KvWwwHeader/KvHeaderLogo.js";
+import C from "./KvThemeProvider.js";
+import N from "./KvPageContainer.js";
+import { throttle as S } from "../utils/throttle.js";
+import { debounce as T } from "../utils/debounce.js";
+const D = "4rem", K = ["lendMenu", "aboutUsLink", "takeActionButton"], W = {
+  components: {
+    KvHeaderLinkBar: H,
+    KvHeaderLogo: I,
+    KvThemeProvider: C,
+    KvPageContainer: N
+  },
+  props: {
+    loggedIn: {
+      type: Boolean,
+      default: !1
+    },
+    basketCount: {
+      type: Number,
+      default: 0
+    },
+    loginUrl: {
+      type: String,
+      default: "/ui-login"
+    },
+    balance: {
+      type: Number,
+      default: 0
+    },
+    isBasketDataLoading: {
+      type: Boolean,
+      default: !1
+    },
+    isBorrower: {
+      type: Boolean,
+      default: !1
+    },
+    isTrustee: {
+      type: Boolean,
+      default: !1
+    },
+    isUserDataLoading: {
+      type: Boolean,
+      default: !1
+    },
+    userId: {
+      type: Number,
+      default: null
+    },
+    myDashboardUrl: {
+      type: String,
+      default: "/mykiva"
+    },
+    lenderName: {
+      type: String,
+      default: ""
+    },
+    lenderImageUrl: {
+      type: String,
+      default: ""
+    },
+    showMGUpsellLink: {
+      type: Boolean,
+      default: !1
+    },
+    countriesNotLentToUrl: {
+      type: String,
+      default: "/lend/countries-not-lent"
+    }
+  },
+  emits: [
+    "load-lend-menu-data"
+  ],
+  setup(_, { emit: c }) {
+    const y = t(!0), b = t(null), o = t(!1), l = h(null), u = t(null), i = t({ left: 0, position: "relative" }), a = t(!1), s = t(null), d = t(!1), r = B(() => {
+      var n, e;
+      return ((e = (n = u.value) == null ? void 0 : n.$options) == null ? void 0 : e.name) === "KvHeaderMobileMenu";
+    }), f = T((n, e, v) => {
+      d.value && (e ? (s.value = n, l.value !== e && (i.value = { left: 0, position: "relative" }), l.value = e, o.value = !0, v && (i.value = {
+        ...v,
+        position: "absolute"
+      })) : o.value && (o.value = !1, l.value = null));
+    }, 100), M = (n) => {
+      var e;
+      (e = u.value) == null || e.onLoad(n);
+    }, k = () => {
+      if (!r.value) return f();
+    }, g = () => {
+      c("load-lend-menu-data");
+    }, L = () => a.value && K.includes(s.value) || !a.value && r.value, m = () => {
+      a.value = (window == null ? void 0 : window.innerWidth) < E.breakpoints.md, L() && (l.value = null, o.value = !1);
+    }, p = S(m, 100);
+    return w(() => {
+      m(), window.addEventListener("resize", p), d.value = !0;
+    }), U(() => {
+      window.removeEventListener("resize", p);
+    }), {
+      HEADER_HEIGHT: D,
+      emitLendMenuEvent: g,
+      isMobile: a,
+      linksVisible: y,
+      menuOpen: o,
+      isMobileMenuActive: r,
+      onHover: f,
+      loadMenuData: M,
+      handleOverlayClick: k,
+      activeHeaderItem: b,
+      menuComponent: l,
+      menuComponentInstance: u,
+      menuPosition: i
+    };
+  }
+};
+export {
+  W as default
+};

package/dist/vue/index.d.ts

@@ -0,0 +1,86 @@
+export { default as KvAccordionItem } from './KvAccordionItem.vue';
+export { default as KvActivityRow } from './KvActivityRow.vue';
+export { default as KvBorrowerImage } from './KvBorrowerImage.vue';
+export { default as KvButton } from './KvButton.vue';
+export { default as KvCardFrame } from './KvCardFrame.vue';
+export { default as KvCarousel } from './KvCarousel.vue';
+export { default as KvCartModal } from './KvCartModal.vue';
+export { default as KvCartPill } from './KvCartPill.vue';
+export { default as KvCheckbox } from './KvCheckbox.vue';
+export { default as KvCheckoutReceipt } from './KvCheckoutReceipt.vue';
+export { default as KvChip } from './KvChip.vue';
+export { default as KvClassicLoanCard } from './KvClassicLoanCard.vue';
+export * from './KvClassicLoanCard.vue';
+export { default as KvCompactLoanCard } from './KvCompactLoanCard.vue';
+export * from './KvCompactLoanCard.vue';
+export { default as KvCommentsAdd } from './KvCommentsAdd.vue';
+export { default as KvCommentsContainer } from './KvCommentsContainer.vue';
+export { default as KvCommentsHeartButton } from './KvCommentsHeartButton.vue';
+export { default as KvCommentsList } from './KvCommentsList.vue';
+export { default as KvCommentsListItem } from './KvCommentsListItem.vue';
+export { default as KvCommentsReplyButton } from './KvCommentsReplyButton.vue';
+export { default as KvContentfulImg } from './KvContentfulImg.vue';
+export { default as KvCountdownTimer } from './KvCountdownTimer.vue';
+export { default as KvDatePicker } from './KvDatePicker.vue';
+export { default as KvExpandable } from './KvExpandable.vue';
+export { default as KvExpandableQuestion } from './KvExpandableQuestion.vue';
+export { default as KvFlag } from './KvFlag.vue';
+export { default as KvGrid } from './KvGrid.vue';
+export { default as KvImpactDashboardHeader } from './KvImpactDashboardHeader.vue';
+export { default as KvImpactVerticalSelector } from './KvImpactVerticalSelector.vue';
+export { default as KvInlineActivityCard } from './KvInlineActivityCard.vue';
+export { default as KvInlineActivityFeed } from './KvInlineActivityFeed.vue';
+export { default as KvIntroductionLoanCard } from './KvIntroductionLoanCard.vue';
+export * from './KvIntroductionLoanCard.vue';
+export { default as KvLendAmountButton } from './KvLendAmountButton.vue';
+export { default as KvLendCta } from './KvLendCta.vue';
+export * from './KvLendCta.vue';
+export { default as KvLightbox } from './KvLightbox.vue';
+export { default as KvLineGraph } from './KvLineGraph.vue';
+export { default as KvLoanActivities } from './KvLoanActivities.vue';
+export * from './KvLoanActivities.vue';
+export { default as KvLoanBookmark } from './KvLoanBookmark.vue';
+export * from './KvLoanBookmark.vue';
+export { default as KvLoanCallouts } from './KvLoanCallouts.vue';
+export { default as KvLoanInfoCard } from './KvLoanInfoCard.vue';
+export * from './KvLoanInfoCard.vue';
+export { default as KvLoanProgressGroup } from './KvLoanProgressGroup.vue';
+export { default as KvLoanTag } from './KvLoanTag.vue';
+export * from './KvLoanTag.vue';
+export { default as KvLoanTeamPick } from './KvLoanTeamPick.vue';
+export { default as KvLoanUse } from './KvLoanUse.vue';
+export * from './KvLoanUse.vue';
+export { default as KvLoadingPlaceholder } from './KvLoadingPlaceholder.vue';
+export { default as KvLoadingSpinner } from './KvLoadingSpinner.vue';
+export { default as KvMap } from './KvMap.vue';
+export { default as KvMaterialIcon } from './KvMaterialIcon.vue';
+export { default as KvPageContainer } from './KvPageContainer.vue';
+export { default as KvPagination } from './KvPagination.vue';
+export { default as KvPieChart } from './KvPieChart.vue';
+export { default as KvPill } from './KvPill.vue';
+export { default as KvPopper } from './KvPopper.vue';
+export { default as KvProgressBar } from './KvProgressBar.vue';
+export { default as KvPulsingDot } from './KvPulsingDot.vue';
+export { default as KvRadio } from './KvRadio.vue';
+export { default as KvSelect } from './KvSelect.vue';
+export { default as KvSideSheet } from './KvSideSheet.vue';
+export { default as KvSwitch } from './KvSwitch.vue';
+export { default as KvTab } from './KvTab.vue';
+export { default as KvTabPanel } from './KvTabPanel.vue';
+export { default as KvTabs } from './KvTabs.vue';
+export { default as KvTextInput } from './KvTextInput.vue';
+export { default as KvTextLink } from './KvTextLink.vue';
+export { default as KvThemeProvider } from './KvThemeProvider.vue';
+export { default as KvToast } from './KvToast.vue';
+export { default as KvTooltip } from './KvTooltip.vue';
+export { default as KvTreeMapChart } from './KvTreeMapChart.vue';
+export { default as KvUserAvatar } from './KvUserAvatar.vue';
+export { default as KvUtilityMenu } from './KvUtilityMenu.vue';
+export { default as KvVerticalCarousel } from './KvVerticalCarousel.vue';
+export { default as KvVotingCard } from './KvVotingCard.vue';
+export { default as KvVotingCardV2 } from './KvVotingCardV2.vue';
+export { default as KvWideLoanCard } from './KvWideLoanCard.vue';
+export * from './KvWideLoanCard.vue';
+export { default as KvAtbModal } from './KvAtbModal.vue';
+export { default as KvSecondaryNav } from './KvSecondaryNav.vue';
+export { default as KvWwwHeader } from './KvWwwHeader.vue';

package/package.json

@@ -1,12 +1,17 @@
 {
   "name": "@kiva/kv-components",
-  "version": "7.6.2",
+  "version": "8.0.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
   },
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
   "exports": {
-    ".": "./dist/index.js",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
     "./assets/*": "./dist/assets/*.js",
     "./assets/*.js": "./dist/assets/*.js",
     "./utils/*": "./dist/utils/*.js",
@@ -29,37 +34,34 @@
     "@babel/preset-env": "^7.24.8",
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
-    "@kiva/kv-tokens": "^3.6.1",
+    "@kiva/kv-tokens": "^3.6.2",
     "@kiva/vite-plugin-vue-lib-css": "^2.0.0",
     "@laynezh/vite-plugin-lib-assets": "^0.6.1",
     "@mdi/js": "^7.4.47",
-    "@storybook/addon-a11y": "^8.4.7",
-    "@storybook/addon-docs": "^8.4.7",
-    "@storybook/addon-essentials": "^8.4.7",
-    "@storybook/addon-links": "^8.4.7",
-    "@storybook/addon-storysource": "^8.4.7",
-    "@storybook/addon-styling-webpack": "^1.0.1",
-    "@storybook/addon-viewport": "^8.4.7",
-    "@storybook/builder-webpack5": "^8.4.7",
-    "@storybook/core-common": "^8.4.7",
-    "@storybook/theming": "^8.4.7",
-    "@storybook/vue3": "^8.4.7",
-    "@storybook/vue3-webpack5": "^8.4.7",
+    "@storybook/addon-a11y": "^10.1.10",
+    "@storybook/addon-docs": "^10.1.10",
+    "@storybook/addon-links": "^10.1.10",
+    "@storybook/builder-vite": "^10.1.10",
+    "@storybook/vue3-vite": "^10.1.10",
     "@testing-library/dom": "^8.1.0",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/user-event": "^13.2.1",
     "@testing-library/vue": "^8.1.0",
+    "@types/leaflet": "^1.9.21",
+    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "@typescript-eslint/parser": "^5.62.0",
     "@vitejs/plugin-vue": "^5.2.1",
+    "@vue/eslint-config-typescript": "^8.0.0",
     "@vue/reactivity": "3.2.37",
-    "@vue/vue3-jest": "^27.0.0-alpha.4",
-    "@vueuse/integrations": "^9.13.0",
+    "@vue/vue3-jest": "^29.2.6",
+    "@vueuse/integrations": "^14.1.0",
     "aria-hidden": "^1.2.4",
     "autoprefixer": "^10.4.2",
     "babel-core": "^7.0.0-bridge.0",
-    "babel-jest": "^27.0.6",
+    "babel-jest": "^29.7.0",
     "babel-loader": "^8.2.2",
     "change-case": "^5.4.4",
-    "chromatic": "^5.9.2",
+    "chromatic": "^13.3.5",
     "css-loader": "^6.0.0",
     "date-fns": "^2.30.0",
     "embla-carousel": "^8.5.2",
@@ -68,35 +70,35 @@
     "eslint": "^7.26.0",
     "eslint-config-airbnb-base": "^14.1.0",
     "eslint-plugin-import": "^2.20.2",
-    "eslint-plugin-storybook": "^0.5.6",
+    "eslint-plugin-storybook": "^0.9.0",
     "eslint-plugin-vue": "^7.9.0",
     "flag-icons": "^7.3.0",
-    "focus-trap": "^6.9.4",
+    "focus-trap": "^7.7.1",
     "graphql-tag": "^2.12.6",
-    "import-meta-loader": "^1.1.0",
-    "jest": "^27.4.3",
+    "jest": "^29.7.0",
     "jest-axe": "^5.0.1",
+    "jest-environment-jsdom": "^29.7.0",
+    "maplibre-gl": "^5.15.0",
     "nanoid": "^3.3.8",
     "numeral": "^2.0.6",
     "popper.js": "^1.16.1",
     "postcss": "^8.4.5",
-    "postcss-loader": "^7.0.0",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
-    "storybook": "^8.4.7",
-    "style-loader": "^3.3.4",
+    "storybook": "^10.1.11",
     "tailwindcss": "^3.4.3",
+    "ts-jest": "^29.4.6",
+    "typescript": "^5.9.3",
     "vite": "^6.0.7",
+    "vite-plugin-dts": "^4.5.4",
     "vite-plugin-no-bundle": "^4.0.0",
     "vue": "^3.2.37",
-    "vue-loader": "^15.9.6",
-    "vue-router": "^4.5.0",
-    "vue-template-compiler": "2.6.14"
+    "vue-router": "^4.5.0"
   },
   "scripts": {
     "storybook": "storybook dev -p 6006 -c src/vue/.storybook",
     "build-storybook": "storybook build -c src/vue/.storybook",
-    "lint": "eslint --ext .js,.vue ./",
+    "lint": "eslint --ext .ts,.vue ./",
     "test": "npm run lint && jest",
     "prebuild": "node build/copyFlags.js",
     "build": "vite build",
@@ -107,10 +109,10 @@
     "@kiva/kv-tokens": "3.x",
     "@mdi/js": "7.x",
     "@vuepic/vue-datepicker": "^11.0.2",
-    "@vueuse/integrations": "9.x",
+    "@vueuse/integrations": "14.x",
     "change-case": "^5.4.4",
     "date-fns": "2.x",
-    "focus-trap": "6.x",
+    "focus-trap": "7.x",
     "graphql-tag": "2.x",
     "nanoid": "3.x",
     "numeral": "2.x",
@@ -123,5 +125,5 @@
     "embla-carousel-fade",
     "popper.js"
   ],
-  "gitHead": "f68de2ef6e9d2b237b7779a5cb0971a29c845e4a"
+  "gitHead": "75b8cc6136b7e314332dae024cdd7261677c6c81"
 }

package/tsconfig.json

@@ -0,0 +1,32 @@
+{
+	"compilerOptions": {
+	  "module": "es2020",
+	  "target": "es2020",
+	  "moduleResolution": "bundler",
+	  "resolveJsonModule": true,
+	  "declaration": true,
+	  "noImplicitAny": false,
+	  "removeComments": true,
+	  "noLib": false,
+	  "experimentalDecorators": true,
+	  "allowSyntheticDefaultImports": true,
+	  "esModuleInterop": true,
+	  "sourceMap": true,
+	  "lib": [
+		"es2020",
+		"dom"
+	  ],
+	  "types": [
+		"vite/client"
+	  ],
+	},
+	"include": [
+		"./src/**/*.ts",
+		"./src/**/*.vue"
+	],
+	"exclude": [
+	  "**/*/node_modules",
+	  "**/*/tests",
+	  "**/*/dist"
+	]
+}

package/vite.config.ts

@@ -0,0 +1,84 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { defineConfig } from 'vite';
+import libAssetsPlugin from '@laynezh/vite-plugin-lib-assets';
+import noBundlePlugin from 'vite-plugin-no-bundle';
+import vue from '@vitejs/plugin-vue';
+import vueLibCss from '@kiva/vite-plugin-vue-lib-css';
+import dts from 'vite-plugin-dts';
+
+export default defineConfig({
+	resolve: {
+		alias: {
+			'#components': '/src/vue',
+			'#utils': '/src/utils',
+		},
+	},
+	build: {
+		outDir: 'dist',
+		// Ensure that separate css files are created for each component with styles
+		cssCodeSplit: true,
+		// Enable Vite library mode
+		lib: {
+			entry: 'src/index.ts',
+			formats: ['es'],
+			fileName: (format, entryName) => {
+				// Since we have declared type: module in package.json, we use .js for ES modules and .cjs for CommonJS modules
+				const suffix = format === 'es' ? '.js' : '.cjs';
+				// Rename node_modules directory from bundled dependencies to avoid module resolution issues
+				if (entryName.startsWith('node_modules')) {
+					return `${entryName.replace('node_modules/', 'vendor/')}${suffix}`;
+				}
+				// Remove .vue extension from entryName for SFCs
+				if (entryName.slice(-4) === '.vue') {
+					return `${entryName.slice(0, -4)}${suffix}`;
+				}
+				// Return default entryName
+				return `${entryName}${suffix}`;
+			},
+		},
+	},
+	plugins: [
+		// Support Vue 3 single-file components
+		vue(),
+		// Make the output match the src file structure instead of bundling into one large file
+		noBundlePlugin({
+			// Dependencies that should be included in the final build. Update package.json bundleDependencies when changing this list.
+			internal: [
+				'aria-hidden',
+				'embla-carousel',
+				'embla-carousel-autoplay',
+				'embla-carousel-fade',
+				'popper.js',
+			],
+		}),
+		// Ensure assets are created in the dist folder when using Vite library mode
+		libAssetsPlugin({
+			name: '[name].[contenthash:8].[ext]',
+			outputPath: 'kvui',
+			publicUrl: 'https://www.kiva.org/',
+		}),
+		// Ensure component css is imported into the final build
+		vueLibCss(),
+		// Generate type declarations for the final build
+		dts({
+			// Change the extension of vue files used for type declarations to .js
+			beforeWriteFile(filePath, content) {
+				// Search and replace .vue with .js for imported components in index.d.ts
+				if (filePath.endsWith('index.d.ts')) {
+					return {
+						filePath,
+						content: content.replace(/import (.*) from '(.*)\.vue'/g, 'import $1 from \'$2.js\''),
+					};
+				}
+
+				// Return the original file content otherwise
+				return {
+					filePath,
+					content,
+				};
+			},
+			// Disable rollup types for now to avoid Vue file resolution issues
+			rollupTypes: false,
+		}),
+	],
+});