@pequity/squirrel 5.2.0 → 5.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +22 -0
- package/dist/cjs/p-info-icon.js +7 -9
- package/dist/es/p-info-icon.js +7 -9
- package/dist/squirrel/components/p-info-icon/p-info-icon.vue.d.ts +26 -12
- package/dist/style.css +1 -1
- package/package.json +24 -24
- package/squirrel/components/p-info-icon/p-info-icon.spec.js +17 -2
- package/squirrel/components/p-info-icon/p-info-icon.vue +7 -6
package/README.md
CHANGED
|
@@ -19,6 +19,28 @@ Install Tailwind CSS:
|
|
|
19
19
|
pnpm i -D tailwindcss
|
|
20
20
|
```
|
|
21
21
|
|
|
22
|
+
Squirrel uses [iconify-icon](https://iconify.design/docs/iconify-icon/) for icons.
|
|
23
|
+
In our consumer project, we need to tell Vue that `<iconify-icon>` is a web component.
|
|
24
|
+
|
|
25
|
+
Example of how to do this in a Vite project:
|
|
26
|
+
|
|
27
|
+
```js
|
|
28
|
+
import { defineConfig } from 'vite';
|
|
29
|
+
import vue from '@vitejs/plugin-vue';
|
|
30
|
+
|
|
31
|
+
export default defineConfig({
|
|
32
|
+
plugins: [
|
|
33
|
+
vue({
|
|
34
|
+
template: {
|
|
35
|
+
compilerOptions: {
|
|
36
|
+
isCustomElement: (tag) => tag === 'iconify-icon',
|
|
37
|
+
},
|
|
38
|
+
},
|
|
39
|
+
}),
|
|
40
|
+
],
|
|
41
|
+
});
|
|
42
|
+
```
|
|
43
|
+
|
|
22
44
|
Import the Squirrel CSS to your project's `main.css` file:
|
|
23
45
|
|
|
24
46
|
```css
|
package/dist/cjs/p-info-icon.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
const vue = require("vue");
|
|
3
3
|
const _pluginVue_exportHelper = require("./chunks/_plugin-vue_export-helper.js");
|
|
4
|
-
const _withScopeId = (n) => (vue.pushScopeId("data-v-
|
|
4
|
+
const _withScopeId = (n) => (vue.pushScopeId("data-v-804e74f5"), n = n(), vue.popScopeId(), n);
|
|
5
5
|
const _hoisted_1 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ vue.createElementVNode("i", { class: "bg-info-circle-icon block h-3 w-3" }, null, -1));
|
|
6
6
|
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
7
7
|
...{
|
|
@@ -9,30 +9,28 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
9
9
|
},
|
|
10
10
|
__name: "p-info-icon",
|
|
11
11
|
props: {
|
|
12
|
-
text: {
|
|
13
|
-
type: String,
|
|
14
|
-
default: ""
|
|
15
|
-
}
|
|
12
|
+
text: { default: null }
|
|
16
13
|
},
|
|
17
14
|
setup(__props) {
|
|
18
15
|
return (_ctx, _cache) => {
|
|
19
16
|
const _component_VTooltip = vue.resolveComponent("VTooltip");
|
|
20
17
|
return vue.openBlock(), vue.createBlock(_component_VTooltip, {
|
|
21
18
|
"popper-triggers": ["hover"],
|
|
22
|
-
delay: { show: 750, hide: 0 }
|
|
19
|
+
delay: { show: 750, hide: 0 },
|
|
20
|
+
disabled: !_ctx.$slots.default && !_ctx.text
|
|
23
21
|
}, {
|
|
24
22
|
popper: vue.withCtx(() => [
|
|
25
23
|
vue.renderSlot(_ctx.$slots, "default", {}, () => [
|
|
26
|
-
vue.createTextVNode(vue.toDisplayString(
|
|
24
|
+
vue.createTextVNode(vue.toDisplayString(_ctx.text), 1)
|
|
27
25
|
], true)
|
|
28
26
|
]),
|
|
29
27
|
default: vue.withCtx(() => [
|
|
30
28
|
_hoisted_1
|
|
31
29
|
]),
|
|
32
30
|
_: 3
|
|
33
|
-
});
|
|
31
|
+
}, 8, ["disabled"]);
|
|
34
32
|
};
|
|
35
33
|
}
|
|
36
34
|
});
|
|
37
|
-
const PInfoIcon = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-
|
|
35
|
+
const PInfoIcon = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-804e74f5"]]);
|
|
38
36
|
module.exports = PInfoIcon;
|
package/dist/es/p-info-icon.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { defineComponent, resolveComponent, openBlock, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, pushScopeId, popScopeId, createElementVNode } from "vue";
|
|
2
2
|
import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
|
|
3
|
-
const _withScopeId = (n) => (pushScopeId("data-v-
|
|
3
|
+
const _withScopeId = (n) => (pushScopeId("data-v-804e74f5"), n = n(), popScopeId(), n);
|
|
4
4
|
const _hoisted_1 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("i", { class: "bg-info-circle-icon block h-3 w-3" }, null, -1));
|
|
5
5
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
6
6
|
...{
|
|
@@ -8,32 +8,30 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
8
8
|
},
|
|
9
9
|
__name: "p-info-icon",
|
|
10
10
|
props: {
|
|
11
|
-
text: {
|
|
12
|
-
type: String,
|
|
13
|
-
default: ""
|
|
14
|
-
}
|
|
11
|
+
text: { default: null }
|
|
15
12
|
},
|
|
16
13
|
setup(__props) {
|
|
17
14
|
return (_ctx, _cache) => {
|
|
18
15
|
const _component_VTooltip = resolveComponent("VTooltip");
|
|
19
16
|
return openBlock(), createBlock(_component_VTooltip, {
|
|
20
17
|
"popper-triggers": ["hover"],
|
|
21
|
-
delay: { show: 750, hide: 0 }
|
|
18
|
+
delay: { show: 750, hide: 0 },
|
|
19
|
+
disabled: !_ctx.$slots.default && !_ctx.text
|
|
22
20
|
}, {
|
|
23
21
|
popper: withCtx(() => [
|
|
24
22
|
renderSlot(_ctx.$slots, "default", {}, () => [
|
|
25
|
-
createTextVNode(toDisplayString(
|
|
23
|
+
createTextVNode(toDisplayString(_ctx.text), 1)
|
|
26
24
|
], true)
|
|
27
25
|
]),
|
|
28
26
|
default: withCtx(() => [
|
|
29
27
|
_hoisted_1
|
|
30
28
|
]),
|
|
31
29
|
_: 3
|
|
32
|
-
});
|
|
30
|
+
}, 8, ["disabled"]);
|
|
33
31
|
};
|
|
34
32
|
}
|
|
35
33
|
});
|
|
36
|
-
const PInfoIcon = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-
|
|
34
|
+
const PInfoIcon = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-804e74f5"]]);
|
|
37
35
|
export {
|
|
38
36
|
PInfoIcon as default
|
|
39
37
|
};
|
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
type Props = {
|
|
2
|
+
text?: string | null;
|
|
3
|
+
};
|
|
1
4
|
declare function __VLS_template(): {
|
|
2
5
|
slots: {
|
|
3
6
|
default?(_: {}): any;
|
|
@@ -6,23 +9,34 @@ declare function __VLS_template(): {
|
|
|
6
9
|
attrs: Partial<{}>;
|
|
7
10
|
};
|
|
8
11
|
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
|
|
9
|
-
declare const __VLS_component: import("vue").DefineComponent<{
|
|
10
|
-
text:
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
text: {
|
|
16
|
-
type: StringConstructor;
|
|
17
|
-
default: string;
|
|
18
|
-
};
|
|
19
|
-
}>>, {
|
|
20
|
-
text: string;
|
|
12
|
+
declare const __VLS_component: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<Props>, {
|
|
13
|
+
text: null;
|
|
14
|
+
}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<Props>, {
|
|
15
|
+
text: null;
|
|
16
|
+
}>>>, {
|
|
17
|
+
text: string | null;
|
|
21
18
|
}, {}>;
|
|
22
19
|
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
23
20
|
export default _default;
|
|
21
|
+
type __VLS_WithDefaults<P, D> = {
|
|
22
|
+
[K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
|
|
23
|
+
default: D[K];
|
|
24
|
+
}> : P[K];
|
|
25
|
+
};
|
|
26
|
+
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
27
|
+
type __VLS_TypePropsToOption<T> = {
|
|
28
|
+
[K in keyof T]-?: {} extends Pick<T, K> ? {
|
|
29
|
+
type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
|
|
30
|
+
} : {
|
|
31
|
+
type: import('vue').PropType<T[K]>;
|
|
32
|
+
required: true;
|
|
33
|
+
};
|
|
34
|
+
};
|
|
24
35
|
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
25
36
|
new (): {
|
|
26
37
|
$slots: S;
|
|
27
38
|
};
|
|
28
39
|
};
|
|
40
|
+
type __VLS_PrettifyLocal<T> = {
|
|
41
|
+
[K in keyof T]: T[K];
|
|
42
|
+
} & {};
|
package/dist/style.css
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
transform: translateX(100%);
|
|
8
8
|
}
|
|
9
9
|
}
|
|
10
|
-
.bg-info-circle-icon[data-v-
|
|
10
|
+
.bg-info-circle-icon[data-v-804e74f5] {
|
|
11
11
|
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");
|
|
12
12
|
}
|
|
13
13
|
div[id^=popper_].dropdown {
|
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pequity/squirrel",
|
|
3
3
|
"description": "Squirrel component library",
|
|
4
|
-
"version": "5.2.
|
|
5
|
-
"packageManager": "pnpm@9.
|
|
4
|
+
"version": "5.2.2",
|
|
5
|
+
"packageManager": "pnpm@9.11.0",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"scripts": {
|
|
8
8
|
"preinstall": "npx only-allow pnpm",
|
|
@@ -55,28 +55,28 @@
|
|
|
55
55
|
"@commitlint/cli": "^19.5.0",
|
|
56
56
|
"@commitlint/config-conventional": "^19.5.0",
|
|
57
57
|
"@pequity/eslint-config": "^0.0.13",
|
|
58
|
-
"@playwright/test": "^1.47.
|
|
58
|
+
"@playwright/test": "^1.47.2",
|
|
59
59
|
"@popperjs/core": "2.11.8",
|
|
60
60
|
"@semantic-release/changelog": "^6.0.3",
|
|
61
61
|
"@semantic-release/git": "^10.0.1",
|
|
62
|
-
"@storybook/addon-a11y": "^8.3.
|
|
63
|
-
"@storybook/addon-actions": "^8.3.
|
|
64
|
-
"@storybook/addon-essentials": "^8.3.
|
|
65
|
-
"@storybook/addon-interactions": "^8.3.
|
|
66
|
-
"@storybook/addon-links": "^8.3.
|
|
67
|
-
"@storybook/blocks": "^8.3.
|
|
68
|
-
"@storybook/manager-api": "^8.3.
|
|
69
|
-
"@storybook/test": "^8.3.
|
|
62
|
+
"@storybook/addon-a11y": "^8.3.2",
|
|
63
|
+
"@storybook/addon-actions": "^8.3.2",
|
|
64
|
+
"@storybook/addon-essentials": "^8.3.2",
|
|
65
|
+
"@storybook/addon-interactions": "^8.3.2",
|
|
66
|
+
"@storybook/addon-links": "^8.3.2",
|
|
67
|
+
"@storybook/blocks": "^8.3.2",
|
|
68
|
+
"@storybook/manager-api": "^8.3.2",
|
|
69
|
+
"@storybook/test": "^8.3.2",
|
|
70
70
|
"@storybook/test-runner": "^0.19.1",
|
|
71
|
-
"@storybook/theming": "^8.3.
|
|
72
|
-
"@storybook/vue3": "^8.3.
|
|
73
|
-
"@storybook/vue3-vite": "^8.3.
|
|
74
|
-
"@tanstack/vue-virtual": "3.10.
|
|
71
|
+
"@storybook/theming": "^8.3.2",
|
|
72
|
+
"@storybook/vue3": "^8.3.2",
|
|
73
|
+
"@storybook/vue3-vite": "^8.3.2",
|
|
74
|
+
"@tanstack/vue-virtual": "3.10.8",
|
|
75
75
|
"@types/jest": "^29.5.13",
|
|
76
76
|
"@types/jsdom": "^21.1.7",
|
|
77
77
|
"@types/lodash-es": "^4.17.12",
|
|
78
|
-
"@types/node": "^22.5.
|
|
79
|
-
"@vitejs/plugin-vue": "^5.1.
|
|
78
|
+
"@types/node": "^22.5.5",
|
|
79
|
+
"@vitejs/plugin-vue": "^5.1.4",
|
|
80
80
|
"@vue/compiler-sfc": "3.4.38",
|
|
81
81
|
"@vue/test-utils": "^2.4.6",
|
|
82
82
|
"@vue/vue3-jest": "^29.2.6",
|
|
@@ -94,20 +94,20 @@
|
|
|
94
94
|
"lint-staged": "^15.2.10",
|
|
95
95
|
"lodash-es": "4.17.21",
|
|
96
96
|
"make-coverage-badge": "^1.2.0",
|
|
97
|
-
"postcss": "^8.4.
|
|
97
|
+
"postcss": "^8.4.47",
|
|
98
98
|
"prettier": "^3.3.3",
|
|
99
99
|
"prettier-plugin-tailwindcss": "^0.6.6",
|
|
100
|
-
"resolve-tspaths": "^0.8.
|
|
100
|
+
"resolve-tspaths": "^0.8.22",
|
|
101
101
|
"rimraf": "^6.0.1",
|
|
102
|
-
"sass": "^1.
|
|
102
|
+
"sass": "^1.79.3",
|
|
103
103
|
"semantic-release": "^24.1.1",
|
|
104
|
-
"storybook": "^8.3.
|
|
104
|
+
"storybook": "^8.3.2",
|
|
105
105
|
"svgo": "^3.3.2",
|
|
106
|
-
"tailwindcss": "^3.4.
|
|
106
|
+
"tailwindcss": "^3.4.12",
|
|
107
107
|
"ts-jest": "^29.2.5",
|
|
108
|
-
"typescript": "5.
|
|
108
|
+
"typescript": "5.6.2",
|
|
109
109
|
"v-calendar": "3.1.2",
|
|
110
|
-
"vite": "^5.4.
|
|
110
|
+
"vite": "^5.4.7",
|
|
111
111
|
"vue": "3.4.38",
|
|
112
112
|
"vue-currency-input": "3.1.0",
|
|
113
113
|
"vue-router": "4.4.5",
|
|
@@ -34,8 +34,9 @@ describe('PInfoIcon.vue', () => {
|
|
|
34
34
|
});
|
|
35
35
|
|
|
36
36
|
expect(wrapper.text()).toBe('Lorem ipsum dolor sit amet.');
|
|
37
|
-
expect(wrapper.attributes(
|
|
38
|
-
expect(wrapper.attributes(
|
|
37
|
+
expect(wrapper.attributes().placement).toBe('bottom');
|
|
38
|
+
expect(wrapper.attributes().distance).toBe('10');
|
|
39
|
+
expect(wrapper.attributes().disabled).toBe('false');
|
|
39
40
|
});
|
|
40
41
|
|
|
41
42
|
it('passes the default slot to the VTooltip component', async () => {
|
|
@@ -54,6 +55,7 @@ describe('PInfoIcon.vue', () => {
|
|
|
54
55
|
});
|
|
55
56
|
|
|
56
57
|
expect(wrapper.text()).toBe('Lorem ipsum dolor sit amet.');
|
|
58
|
+
expect(wrapper.attributes().disabled).toBe('false');
|
|
57
59
|
});
|
|
58
60
|
|
|
59
61
|
it('tooltip should stay visible on hover', async () => {
|
|
@@ -76,4 +78,17 @@ describe('PInfoIcon.vue', () => {
|
|
|
76
78
|
expect(tooltip.props().popperTriggers).toEqual(['hover']);
|
|
77
79
|
expect(tooltip.props().delay).toEqual({ show: 750, hide: 0 });
|
|
78
80
|
});
|
|
81
|
+
|
|
82
|
+
it.each([null, ''])('should set the disabled attribute when the text is empty (%s)', async (text) => {
|
|
83
|
+
const wrapper = createWrapperFor(PInfoIcon, {
|
|
84
|
+
props: { text },
|
|
85
|
+
global: {
|
|
86
|
+
stubs: {
|
|
87
|
+
VTooltip: { template: '<div class="v-tooltip-stub"><slot name="default" /><slot name="popper" /></div>' },
|
|
88
|
+
},
|
|
89
|
+
},
|
|
90
|
+
});
|
|
91
|
+
|
|
92
|
+
expect(wrapper.attributes().disabled).toBe('true');
|
|
93
|
+
});
|
|
79
94
|
});
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<VTooltip :popper-triggers="['hover']" :delay="{ show: 750, hide: 0 }">
|
|
2
|
+
<VTooltip :popper-triggers="['hover']" :delay="{ show: 750, hide: 0 }" :disabled="!$slots.default && !text">
|
|
3
3
|
<i class="bg-info-circle-icon block h-3 w-3"></i>
|
|
4
4
|
<template #popper>
|
|
5
5
|
<slot>{{ text }}</slot>
|
|
@@ -12,11 +12,12 @@ defineOptions({
|
|
|
12
12
|
name: 'PInfoIcon',
|
|
13
13
|
});
|
|
14
14
|
|
|
15
|
-
|
|
16
|
-
text
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
15
|
+
type Props = {
|
|
16
|
+
text?: string | null;
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
withDefaults(defineProps<Props>(), {
|
|
20
|
+
text: null,
|
|
20
21
|
});
|
|
21
22
|
</script>
|
|
22
23
|
|