@pocketprep/ui-kit 3.1.5 → 3.2.0

package/.eslintrc.cjs

@@ -12,6 +12,7 @@ module.exports = {
         'eslint:recommended',
         '@vue/eslint-config-typescript',
     ],
+    ignorePatterns: [ 'docs' ],
     rules: {
         'quotes': [ 'error', 'single' ],
         'comma-dangle': [ 'error', {

package/README.md

@@ -10,21 +10,26 @@ To install the UI Kit on an app, first run the NPM install command in your proje
 npm i @pocketprep/ui-kit
 ```
 
-Then import the appropriate `scss` file from the installed package into your project wherever it is needed.
-For example, to use the UI Kit colors in a Vue component, add the following to the Vue component's `<styles>` block:
+To import the UI Kit's exported stylesheets in a vite context:
 
-```css
-@import '~@pocketprep/ui-kit/colors';
+```ts
+import '@pocketprep/ui-kit/normalize'
+import '@pocketprep/ui-kit/fonts'
+import '@pocketprep/ui-kit/styles'
 ```
 
-To import the styles into your Vue app globally, add the following code to your `vue.config.js` file:
+To import the color variables and breakpoint mixin into your Vue app components globally,
+add the following code to your `vite.config.js` file:
 
 ```pre
 module.exports = {
     css: {
-        loaderOptions: {
+        preprocessorOptions: {
             scss: {
-                prependData: '@import "~@pocketprep/ui-kit/pocketprep.scss";',
+                additionalData: `
+                @import '@pocketprep/ui-kit/breakpoints';
+                @import '@pocketprep/ui-kit/colors';
+                `,
             },
         },
     },
@@ -47,4 +52,20 @@ In order to increment the `ui-kit` version when a change is made, you have to ma
 npm run patch
 ```
 
-This command will queue up the version increment.
+This command will queue up the version increment.
+
+## Testing the package in apps
+
+We have script commands to help copy and paste the UI Kit package into an app's node_modules:
+
+In the UI Kit:
+
+```bash
+npm run uikit-copy
+```
+
+In an app (like `study` or `teach`):
+
+```bash
+npm run uikit-paste
+```

package/dist/@pocketprep/ui-kit.js

@@ -13225,8 +13225,8 @@ function n7(e, i, s, o, t, n) {
       role: "button",
       type: "tertiary",
       tabindex: "0",
-      onKeypress: je(e.showFilterDropdown, ["enter"]),
-      onClick: i[0] || (i[0] = (T) => e.showFilterDropdown = !e.showFilterDropdown)
+      onKeypress: i[0] || (i[0] = je(() => e.showFilterDropdown = !e.showFilterDropdown, ["enter"])),
+      onClick: i[1] || (i[1] = () => e.showFilterDropdown = !e.showFilterDropdown)
     }, {
       default: Je(() => [
         Qe(r, {
@@ -13240,7 +13240,7 @@ function n7(e, i, s, o, t, n) {
         }, me(e.filterLabel), 3)
       ]),
       _: 1
-    }, 8, ["aria-expanded", "class", "onKeypress"])), [
+    }, 8, ["aria-expanded", "class"])), [
       [j, e.isDarkMode]
     ]),
     e.showFilterDropdown ? he((X(), ie("div", {
@@ -14161,13 +14161,10 @@ let As = class extends ye {
     W(this, "showTooltip", !1);
     W(this, "textOverflows", !1);
     W(this, "measurementComplete", !1);
-    W(this, "id", null);
-  }
-  created() {
-    this.id = this._uid;
+    W(this, "uid", Math.floor(Math.random() * 1e9));
   }
   mounted() {
-    const s = this.$refs[`content_${this.id}`], o = this.$refs[`content_fullwidth_${this.id}`];
+    const s = this.$refs[`content_${this.uid}`], o = this.$refs[`content_fullwidth_${this.uid}`];
     this.$nextTick(() => {
       const t = s.getBoundingClientRect().width, n = o.getBoundingClientRect().width;
       this.textOverflows = t < n, this.measurementComplete = !0;
@@ -14195,9 +14192,9 @@ function f6(e, i, s, o, t, n) {
       ]),
       _: 3
     })) : be("", !0),
-    e.id ? (X(), ie(et, { key: 1 }, [
+    e.uid ? (X(), ie(et, { key: 1 }, [
       oe("div", {
-        ref: `content_${e.id}`,
+        ref: `content_${e.uid}`,
         class: "uikit-overflow-tooltip__content",
         onMouseenter: i[0] || (i[0] = (Y) => e.showTooltip = !0),
         onMouseleave: i[1] || (i[1] = (Y) => e.showTooltip = !1)
@@ -14206,7 +14203,7 @@ function f6(e, i, s, o, t, n) {
       ], 544),
       e.measurementComplete ? be("", !0) : (X(), ie("div", {
         key: 0,
-        ref: `content_fullwidth_${e.id}`,
+        ref: `content_fullwidth_${e.uid}`,
         class: "uikit-overflow-tooltip__content uikit-overflow-tooltip__content--full-width"
       }, [
         Ee(e.$slots, "default")