@davincihealthcare/elty-design-system-vue 1.13.6 → 1.13.8
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 +9 -7
- package/dist/ElButton.vue.d.ts +3 -3
- package/dist/ElDropdown.vue.d.ts +9 -9
- package/dist/index.js +5 -5
- package/dist/index.js.map +1 -1
- package/dist/index.umd.cjs +1 -1
- package/dist/index.umd.cjs.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -8,8 +8,13 @@ To get started with using these components in your Vue project, follow these sim
|
|
|
8
8
|
|
|
9
9
|
### Installation
|
|
10
10
|
|
|
11
|
+
First install Tailwindcss following the steps at https://tailwindcss.com/docs/installation/framework-guides
|
|
12
|
+
|
|
13
|
+
Then install required plugins and the design system package itself
|
|
14
|
+
|
|
11
15
|
```bash
|
|
12
|
-
# using yarn
|
|
16
|
+
# using yarn (or any other package manager)
|
|
17
|
+
yarn add -D @tailwindcss/forms @tailwindcss/typography
|
|
13
18
|
yarn add @davincihealthcare/elty-design-system-vue
|
|
14
19
|
```
|
|
15
20
|
|
|
@@ -23,8 +28,8 @@ module.exports = {
|
|
|
23
28
|
...
|
|
24
29
|
content: [..., './node_modules/@davincihealthcare/elty-design-system-vue/**/*.{tsx,js}'],
|
|
25
30
|
plugins: [
|
|
26
|
-
require('@tailwindcss/forms'),
|
|
27
|
-
require('@tailwindcss/typography'),
|
|
31
|
+
require('@tailwindcss/forms'),
|
|
32
|
+
require('@tailwindcss/typography'),
|
|
28
33
|
require('@davincihealthcare/elty-design-system-vue').EltyTailwindPlugin
|
|
29
34
|
]
|
|
30
35
|
...
|
|
@@ -35,10 +40,7 @@ Note: content needs a new entry in the array, alongside other you may already ha
|
|
|
35
40
|
|
|
36
41
|
Make sure to:
|
|
37
42
|
|
|
38
|
-
- NOT to import the elty foundations which are already imported alongside this plugin.
|
|
39
|
-
- import other required official tailwind plugins
|
|
40
|
-
- `@tailwindcss/forms`
|
|
41
|
-
- `@tailwindcss/typography`
|
|
43
|
+
- do NOT to import the elty foundations which are already imported alongside this plugin.
|
|
42
44
|
|
|
43
45
|
in main.ts file
|
|
44
46
|
|
package/dist/ElButton.vue.d.ts
CHANGED
|
@@ -17,7 +17,7 @@ declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_T
|
|
|
17
17
|
variant?: "primary" | "secondary" | "tertiary" | undefined;
|
|
18
18
|
type?: ButtonHTMLAttributes['type'];
|
|
19
19
|
loadOnClick?: boolean | undefined;
|
|
20
|
-
onClick?: (() => unknown) | undefined;
|
|
20
|
+
onClick?: (() => unknown) | (() => Promise<unknown>) | undefined;
|
|
21
21
|
}>, {
|
|
22
22
|
disabled: boolean;
|
|
23
23
|
dark: boolean;
|
|
@@ -42,7 +42,7 @@ declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_T
|
|
|
42
42
|
variant?: "primary" | "secondary" | "tertiary" | undefined;
|
|
43
43
|
type?: ButtonHTMLAttributes['type'];
|
|
44
44
|
loadOnClick?: boolean | undefined;
|
|
45
|
-
onClick?: (() => unknown) | undefined;
|
|
45
|
+
onClick?: (() => unknown) | (() => Promise<unknown>) | undefined;
|
|
46
46
|
}>, {
|
|
47
47
|
disabled: boolean;
|
|
48
48
|
dark: boolean;
|
|
@@ -58,7 +58,7 @@ declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_T
|
|
|
58
58
|
}>>>, {
|
|
59
59
|
disabled: boolean;
|
|
60
60
|
type: "button" | "submit" | "reset";
|
|
61
|
-
onClick: () => unknown;
|
|
61
|
+
onClick: (() => unknown) | (() => Promise<unknown>);
|
|
62
62
|
label: string;
|
|
63
63
|
icon: ElIconProps;
|
|
64
64
|
size: ElButtonSize;
|
package/dist/ElDropdown.vue.d.ts
CHANGED
|
@@ -40,7 +40,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
|
|
|
40
40
|
action?: Omit<Partial<{
|
|
41
41
|
disabled: boolean;
|
|
42
42
|
type: "button" | "submit" | "reset";
|
|
43
|
-
onClick: () => unknown;
|
|
43
|
+
onClick: (() => unknown) | (() => Promise<unknown>);
|
|
44
44
|
label: string;
|
|
45
45
|
icon: import('./ElIcon.vue').ElIconProps;
|
|
46
46
|
size: "base" | "xs" | "sm" | "l" | "xl";
|
|
@@ -59,7 +59,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
|
|
|
59
59
|
readonly dark: boolean;
|
|
60
60
|
readonly variant: "primary" | "secondary" | "tertiary";
|
|
61
61
|
readonly loadOnClick: boolean;
|
|
62
|
-
readonly onClick?: (() => unknown) | undefined;
|
|
62
|
+
readonly onClick?: (() => unknown) | (() => Promise<unknown>) | undefined;
|
|
63
63
|
readonly icon?: import('./ElIcon.vue').ElIconProps | undefined;
|
|
64
64
|
readonly iconRight?: boolean | undefined;
|
|
65
65
|
} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & Readonly<import('vue').ExtractPropTypes<{
|
|
@@ -72,7 +72,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
|
|
|
72
72
|
default: string;
|
|
73
73
|
};
|
|
74
74
|
onClick: {
|
|
75
|
-
type: import('vue').PropType<() => unknown>;
|
|
75
|
+
type: import('vue').PropType<(() => unknown) | (() => Promise<unknown>)>;
|
|
76
76
|
default: undefined;
|
|
77
77
|
};
|
|
78
78
|
label: {
|
|
@@ -166,7 +166,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
|
|
|
166
166
|
action?: Omit<Partial<{
|
|
167
167
|
disabled: boolean;
|
|
168
168
|
type: "button" | "submit" | "reset";
|
|
169
|
-
onClick: () => unknown;
|
|
169
|
+
onClick: (() => unknown) | (() => Promise<unknown>);
|
|
170
170
|
label: string;
|
|
171
171
|
icon: import('./ElIcon.vue').ElIconProps;
|
|
172
172
|
size: "base" | "xs" | "sm" | "l" | "xl";
|
|
@@ -185,7 +185,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
|
|
|
185
185
|
readonly dark: boolean;
|
|
186
186
|
readonly variant: "primary" | "secondary" | "tertiary";
|
|
187
187
|
readonly loadOnClick: boolean;
|
|
188
|
-
readonly onClick?: (() => unknown) | undefined;
|
|
188
|
+
readonly onClick?: (() => unknown) | (() => Promise<unknown>) | undefined;
|
|
189
189
|
readonly icon?: import('./ElIcon.vue').ElIconProps | undefined;
|
|
190
190
|
readonly iconRight?: boolean | undefined;
|
|
191
191
|
} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & Readonly<import('vue').ExtractPropTypes<{
|
|
@@ -198,7 +198,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
|
|
|
198
198
|
default: string;
|
|
199
199
|
};
|
|
200
200
|
onClick: {
|
|
201
|
-
type: import('vue').PropType<() => unknown>;
|
|
201
|
+
type: import('vue').PropType<(() => unknown) | (() => Promise<unknown>)>;
|
|
202
202
|
default: undefined;
|
|
203
203
|
};
|
|
204
204
|
label: {
|
|
@@ -256,7 +256,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
|
|
|
256
256
|
action: Omit<Partial<{
|
|
257
257
|
disabled: boolean;
|
|
258
258
|
type: "button" | "submit" | "reset";
|
|
259
|
-
onClick: () => unknown;
|
|
259
|
+
onClick: (() => unknown) | (() => Promise<unknown>);
|
|
260
260
|
label: string;
|
|
261
261
|
icon: import('./ElIcon.vue').ElIconProps;
|
|
262
262
|
size: "base" | "xs" | "sm" | "l" | "xl";
|
|
@@ -275,7 +275,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
|
|
|
275
275
|
readonly dark: boolean;
|
|
276
276
|
readonly variant: "primary" | "secondary" | "tertiary";
|
|
277
277
|
readonly loadOnClick: boolean;
|
|
278
|
-
readonly onClick?: (() => unknown) | undefined;
|
|
278
|
+
readonly onClick?: (() => unknown) | (() => Promise<unknown>) | undefined;
|
|
279
279
|
readonly icon?: import('./ElIcon.vue').ElIconProps | undefined;
|
|
280
280
|
readonly iconRight?: boolean | undefined;
|
|
281
281
|
} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & Readonly<import('vue').ExtractPropTypes<{
|
|
@@ -288,7 +288,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
|
|
|
288
288
|
default: string;
|
|
289
289
|
};
|
|
290
290
|
onClick: {
|
|
291
|
-
type: import('vue').PropType<() => unknown>;
|
|
291
|
+
type: import('vue').PropType<(() => unknown) | (() => Promise<unknown>)>;
|
|
292
292
|
default: undefined;
|
|
293
293
|
};
|
|
294
294
|
label: {
|
package/dist/index.js
CHANGED
|
@@ -17598,8 +17598,7 @@ const aG = { class: "relative" }, oG = { class: "border-neutral-surface text-neu
|
|
|
17598
17598
|
default: m0(() => [
|
|
17599
17599
|
I("div", {
|
|
17600
17600
|
id: b(S),
|
|
17601
|
-
class: "relative flex items-center"
|
|
17602
|
-
onClick: G
|
|
17601
|
+
class: "relative flex items-center"
|
|
17603
17602
|
}, [
|
|
17604
17603
|
I("div", {
|
|
17605
17604
|
class: j(["mr-1 flex items-center justify-center", {
|
|
@@ -17612,18 +17611,19 @@ const aG = { class: "relative" }, oG = { class: "border-neutral-surface text-neu
|
|
|
17612
17611
|
checked: typeof t.modelValue == "boolean" && t.modelValue,
|
|
17613
17612
|
indeterminate: t.modelValue === "indeterminate",
|
|
17614
17613
|
type: "checkbox",
|
|
17615
|
-
class: j(["
|
|
17614
|
+
class: j(["rounded border-2 focus:ring-0", {
|
|
17616
17615
|
"h-[15px] w-[15px]": t.size === "xxs",
|
|
17617
17616
|
"h-[18px] w-[18px]": t.size !== "xxs",
|
|
17618
17617
|
"border-neutral-surface": !b(l) && f.disabled,
|
|
17619
17618
|
"text-neutral-lighter": !b(l) && !f.disabled,
|
|
17620
17619
|
"text-neutral-inactive": b(l) && f.disabled,
|
|
17621
17620
|
"cursor-not-allowed": f.disabled,
|
|
17622
|
-
"text-neutral-darker": !f.disabled,
|
|
17621
|
+
"text-neutral-darker cursor-pointer": !f.disabled,
|
|
17623
17622
|
inputClass: t.inputClass
|
|
17624
17623
|
}]),
|
|
17625
17624
|
disabled: f.disabled,
|
|
17626
|
-
"data-cy": f.label ? `${f.label.trim().replaceAll(" ", "")}-checkbox` : "checkbox"
|
|
17625
|
+
"data-cy": f.label ? `${f.label.trim().replaceAll(" ", "")}-checkbox` : "checkbox",
|
|
17626
|
+
onClick: G
|
|
17627
17627
|
}, null, 10, dG)
|
|
17628
17628
|
], 2),
|
|
17629
17629
|
f.label ? (E(), o("label", {
|