KLogo displays the Kolibri logo and provides functionality to manipulate it such as setting its dimensions, color scheme, animation, and background.
+
+
+
+
Default display
Shows Kolibri logo.
+
+
+ Save SVG
+
+
+
+
+
Display with backgrounds
+
Shows Kolibri logo with background.
+
+
+
+
+
+ Save SVG
+
+
+
+
+
+
+
+
Shows Kolibri logo with rectangular background.
+
+
+
+
+
+ Save SVG
+
+
+
+
+
+
+
+
Display with animation
+
Shows Kolibri logo with loading animation.
+
+
+
+
+
+
+
+
+
Display with different color schemes
+
Different color schemes can be used - but only with the showBackground prop. Note the transparent lines for the monochrome logos.
+
+
+
+
+ Color scheme: {{ colorScheme }}
+
+
+
+
+ Save SVG
+
+
+
+
+
+
Dimensions
+
+
+ You can apply the most common dimensions to the image container via the props
+ size
+ ,
+ maxSize
+ , and
+ minSize
+ . Values may be either numbers or strings consisting of a numeral and a valid unit. The following units are supported: %, cm, em, ex, ch, in, lh, mm, px, rem, rlh, vh, vw. If you don't provide a unit, px will be used by default.
+
+
+
+
-
-
Alternative text
Alternative text (altText) is required for the logo image. When creating it, consider the following:
@@ -32,13 +155,6 @@
-
-
-
- KLogo is derived from and provides a subset of KImg's API.
-
- Note that an additional complexity not shown in the example above is that conditional styling sometimes needs to be applied using KResponsiveWindowMixin properties. See the source code of this page for details.
+ Note that an additional complexity not shown in the example above is that conditional styling sometimes needs to be applied using useKResponsiveWindow properties. See the source code of this page for details.
Also note that grid containers have a debug property that will show helpful visual information about columns and grid items when set to true.
@@ -210,10 +210,13 @@
\ No newline at end of file
diff --git a/docs/pages/playground.vue b/docs/pages/playground.vue
index bf32354b2..686423285 100644
--- a/docs/pages/playground.vue
+++ b/docs/pages/playground.vue
@@ -24,9 +24,6 @@
-
-
-
diff --git a/jest.conf/testUtils.js b/jest.conf/testUtils.js
new file mode 100644
index 000000000..80f4afbe7
--- /dev/null
+++ b/jest.conf/testUtils.js
@@ -0,0 +1,21 @@
+import 'mock-match-media/jest-setup.cjs';
+import { setMedia } from 'mock-match-media';
+
+export const resizeWindow = (width, height = 768) => {
+ window.innerWidth = width;
+ window.innerHeight = height;
+ window.dispatchEvent(new Event('resize'));
+ setMedia({
+ width: `${width}px`,
+ height: `${height}px`,
+ });
+};
+
+export const testAfterResize = testFunction => {
+ let animationFrameId;
+ const assertAfterResize = () => {
+ testFunction();
+ animationFrameId = cancelAnimationFrame(animationFrameId);
+ };
+ animationFrameId = requestAnimationFrame(assertAfterResize);
+};
diff --git a/lib/KDateRange/index.vue b/lib/KDateRange/index.vue
index e43ca7450..917cbb372 100644
--- a/lib/KDateRange/index.vue
+++ b/lib/KDateRange/index.vue
@@ -64,7 +64,6 @@
import get from 'lodash/get';
import debounce from 'lodash/debounce';
import KModal from '../KModal';
- import KResponsiveWindowMixin from '../KResponsiveWindowMixin';
import KDateCalendar from './KDateCalendar';
import KDateInput from './KDateInput';
import { validationMachine, initialContext } from './ValidationMachine';
@@ -77,7 +76,6 @@
KDateInput,
KDateCalendar,
},
- mixins: [KResponsiveWindowMixin],
props: {
/**
* Constrains the selection to after this date, disabling dates prior
diff --git a/lib/KDropdownMenu.vue b/lib/KDropdownMenu.vue
index 355288e53..824d992c1 100644
--- a/lib/KDropdownMenu.vue
+++ b/lib/KDropdownMenu.vue
@@ -5,6 +5,7 @@
:z-index="99"
:containFocus="true"
:dropdownPosition="position"
+ :constrainToScrollParent="constrainToScrollParent"
@close="handleClose"
@open="handleOpen"
>
@@ -34,6 +35,13 @@
UiMenu,
},
props: {
+ /**
+ * The dropdown menu popover flips its position to avoid overflows within the parent. Setting it to false disables the flipping behavior.
+ */
+ constrainToScrollParent: {
+ type: Boolean,
+ default: true,
+ },
/**
* An array of options objects, with one object per dropdown item
*/
diff --git a/lib/KImg/index.vue b/lib/KImg/index.vue
index 20b07acf9..1334a7bea 100644
--- a/lib/KImg/index.vue
+++ b/lib/KImg/index.vue
@@ -53,6 +53,8 @@
+
+
+
\ No newline at end of file
diff --git a/lib/KLogo/kolibri-logo.svg b/lib/KLogo/kolibri-logo.svg
deleted file mode 100644
index f26d5bdfc..000000000
--- a/lib/KLogo/kolibri-logo.svg
+++ /dev/null
@@ -1,178 +0,0 @@
-
diff --git a/lib/KModal.vue b/lib/KModal.vue
index 4e516195f..c22524c64 100644
--- a/lib/KModal.vue
+++ b/lib/KModal.vue
@@ -102,7 +102,7 @@