@pequity/squirrel 5.2.1 → 5.2.2

package/README.md

@@ -19,6 +19,28 @@ Install Tailwind CSS:
 pnpm i -D tailwindcss
 ```
 
+Squirrel uses [iconify-icon](https://iconify.design/docs/iconify-icon/) for icons.  
+In our consumer project, we need to tell Vue that `<iconify-icon>` is a web component.
+
+Example of how to do this in a Vite project:
+
+```js
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+
+export default defineConfig({
+  plugins: [
+    vue({
+      template: {
+        compilerOptions: {
+          isCustomElement: (tag) => tag === 'iconify-icon',
+        },
+      },
+    }),
+  ],
+});
+```
+
 Import the Squirrel CSS to your project's `main.css` file:
 
 ```css

package/dist/cjs/p-info-icon.js

@@ -1,7 +1,7 @@
 "use strict";
 const vue = require("vue");
 const _pluginVue_exportHelper = require("./chunks/_plugin-vue_export-helper.js");
-const _withScopeId = (n) => (vue.pushScopeId("data-v-a46da710"), n = n(), vue.popScopeId(), n);
+const _withScopeId = (n) => (vue.pushScopeId("data-v-804e74f5"), n = n(), vue.popScopeId(), n);
 const _hoisted_1 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ vue.createElementVNode("i", { class: "bg-info-circle-icon block h-3 w-3" }, null, -1));
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   ...{
@@ -17,7 +17,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       return vue.openBlock(), vue.createBlock(_component_VTooltip, {
         "popper-triggers": ["hover"],
         delay: { show: 750, hide: 0 },
-        disabled: !_ctx.text
+        disabled: !_ctx.$slots.default && !_ctx.text
       }, {
         popper: vue.withCtx(() => [
           vue.renderSlot(_ctx.$slots, "default", {}, () => [
@@ -32,5 +32,5 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const PInfoIcon = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-a46da710"]]);
+const PInfoIcon = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-804e74f5"]]);
 module.exports = PInfoIcon;

package/dist/es/p-info-icon.js

@@ -1,6 +1,6 @@
 import { defineComponent, resolveComponent, openBlock, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, pushScopeId, popScopeId, createElementVNode } from "vue";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
-const _withScopeId = (n) => (pushScopeId("data-v-a46da710"), n = n(), popScopeId(), n);
+const _withScopeId = (n) => (pushScopeId("data-v-804e74f5"), n = n(), popScopeId(), n);
 const _hoisted_1 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("i", { class: "bg-info-circle-icon block h-3 w-3" }, null, -1));
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
@@ -16,7 +16,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return openBlock(), createBlock(_component_VTooltip, {
         "popper-triggers": ["hover"],
         delay: { show: 750, hide: 0 },
-        disabled: !_ctx.text
+        disabled: !_ctx.$slots.default && !_ctx.text
       }, {
         popper: withCtx(() => [
           renderSlot(_ctx.$slots, "default", {}, () => [
@@ -31,7 +31,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const PInfoIcon = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a46da710"]]);
+const PInfoIcon = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-804e74f5"]]);
 export {
   PInfoIcon as default
 };

package/dist/squirrel/components/p-info-icon/p-info-icon.vue.d.ts

@@ -1,5 +1,5 @@
 type Props = {
-    text: string | null;
+    text?: string | null;
 };
 declare function __VLS_template(): {
     slots: {

package/dist/style.css

@@ -7,7 +7,7 @@
     transform: translateX(100%);
 }
 }
-.bg-info-circle-icon[data-v-a46da710] {
+.bg-info-circle-icon[data-v-804e74f5] {
   background-image: url("data:image/svg+xml,%3csvg%20width='12'%20height='12'%20viewBox='0%200%2012%2012'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_4002_33291)'%3e%3cpath%20d='M0.5%206C0.5%207.45869%201.07946%208.85764%202.11091%209.88909C3.14236%2010.9205%204.54131%2011.5%206%2011.5C7.45869%2011.5%208.85764%2010.9205%209.88909%209.88909C10.9205%208.85764%2011.5%207.45869%2011.5%206C11.5%204.54131%2010.9205%203.14236%209.88909%202.11091C8.85764%201.07946%207.45869%200.5%206%200.5C4.54131%200.5%203.14236%201.07946%202.11091%202.11091C1.07946%203.14236%200.5%204.54131%200.5%206Z'%20stroke='%231A123B'%20stroke-miterlimit='10'/%3e%3cpath%20d='M6.5%203.5H5.5V2.5H6.5V3.5Z'%20fill='%231A123B'/%3e%3cpath%20d='M4.5%205H6V9M4.5%208.5H7.5'%20stroke='%231A123B'%20stroke-miterlimit='10'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_4002_33291'%3e%3crect%20width='12'%20height='12'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
 }
 div[id^=popper_].dropdown {

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@pequity/squirrel",
   "description": "Squirrel component library",
-  "version": "5.2.1",
-  "packageManager": "pnpm@9.10.0",
+  "version": "5.2.2",
+  "packageManager": "pnpm@9.11.0",
   "type": "module",
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -55,7 +55,7 @@
     "@commitlint/cli": "^19.5.0",
     "@commitlint/config-conventional": "^19.5.0",
     "@pequity/eslint-config": "^0.0.13",
-    "@playwright/test": "^1.47.1",
+    "@playwright/test": "^1.47.2",
     "@popperjs/core": "2.11.8",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
@@ -99,7 +99,7 @@
     "prettier-plugin-tailwindcss": "^0.6.6",
     "resolve-tspaths": "^0.8.22",
     "rimraf": "^6.0.1",
-    "sass": "^1.79.2",
+    "sass": "^1.79.3",
     "semantic-release": "^24.1.1",
     "storybook": "^8.3.2",
     "svgo": "^3.3.2",
@@ -107,7 +107,7 @@
     "ts-jest": "^29.2.5",
     "typescript": "5.6.2",
     "v-calendar": "3.1.2",
-    "vite": "^5.4.6",
+    "vite": "^5.4.7",
     "vue": "3.4.38",
     "vue-currency-input": "3.1.0",
     "vue-router": "4.4.5",

package/squirrel/components/p-info-icon/p-info-icon.spec.js

@@ -55,6 +55,7 @@ describe('PInfoIcon.vue', () => {
     });
 
     expect(wrapper.text()).toBe('Lorem ipsum dolor sit amet.');
+    expect(wrapper.attributes().disabled).toBe('false');
   });
 
   it('tooltip should stay visible on hover', async () => {

package/squirrel/components/p-info-icon/p-info-icon.vue

@@ -1,5 +1,5 @@
 <template>
-  <VTooltip :popper-triggers="['hover']" :delay="{ show: 750, hide: 0 }" :disabled="!text">
+  <VTooltip :popper-triggers="['hover']" :delay="{ show: 750, hide: 0 }" :disabled="!$slots.default && !text">
     <i class="bg-info-circle-icon block h-3 w-3"></i>
     <template #popper>
       <slot>{{ text }}</slot>
@@ -13,7 +13,7 @@ defineOptions({
 });
 
 type Props = {
-  text: string | null;
+  text?: string | null;
 };
 
 withDefaults(defineProps<Props>(), {