@appmax_npm/ds-prime 1.0.0-alpha.25 → 1.0.0-alpha.27

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.
Files changed (7) hide show
  1. package/button/index.d.ts +3 -2
  2. package/button/index.js +17 -13
  3. package/config/preset.js +48 -33
  4. package/css/index.css +47 -21
  5. package/package.json +5 -1
  6. package/tailwind/index.d.ts +27 -0
  7. package/tailwind/index.js +28 -1
package/button/index.d.ts CHANGED
@@ -10,7 +10,7 @@
10
10
  import type { DefineComponent, DesignToken, EmitFn, GlobalComponentConstructor, HintedString, PassThrough } from '@primevue/core';
11
11
  import type { ComponentHooks } from '@primevue/core/basecomponent';
12
12
  import type { PassThroughOptions } from 'primevue/passthrough';
13
- import { ButtonHTMLAttributes, VNode } from 'vue';
13
+ import type { ButtonHTMLAttributes, Component, VNode } from 'vue';
14
14
 
15
15
  export declare type ButtonPassThroughOptionType<T = any> = ButtonPassThroughAttributes | ((options: ButtonPassThroughMethodOptions<T>) => ButtonPassThroughAttributes | string) | string | null | undefined;
16
16
 
@@ -133,7 +133,7 @@ export interface ButtonProps extends ButtonHTMLAttributes {
133
133
  * Use to change the HTML tag of root element.
134
134
  * @defaultValue BUTTON
135
135
  */
136
- as?: string | undefined;
136
+ as?: string | Component | undefined;
137
137
  /**
138
138
  * When enabled, it changes the default rendered element for the one passed as a child element.
139
139
  * @defaultValue false
@@ -275,4 +275,5 @@ export default Button;
275
275
  export interface ButtonProps {
276
276
  href?: string;
277
277
  to?: string | object;
278
+ as?: string;
278
279
  }
package/button/index.js CHANGED
@@ -1,18 +1,22 @@
1
- import t from "primevue/button";
2
- const n = {
3
- name: "Button",
4
- extends: t,
1
+ import { defineComponent as n, computed as s, openBlock as u, createBlock as a, unref as f, mergeProps as p, withCtx as c, renderSlot as i } from "vue";
2
+ import l from "primevue/button";
3
+ const h = /* @__PURE__ */ n({
4
+ __name: "Button",
5
5
  props: {
6
- as: String,
7
- href: String,
8
- to: [String, Object]
6
+ href: {},
7
+ to: {},
8
+ as: {}
9
9
  },
10
- computed: {
11
- as() {
12
- return this.as ? this.as : this.href ? "a" : this.to ? "router-link" : "button";
13
- }
10
+ setup(e) {
11
+ const t = e, r = s(() => t.as ? t.as : t.href ? "a" : t.to ? "router-link" : "button");
12
+ return (o, m) => (u(), a(f(l), p(t, { as: r.value }), {
13
+ default: c(() => [
14
+ i(o.$slots, "default")
15
+ ]),
16
+ _: 3
17
+ }, 16, ["as"]));
14
18
  }
15
- };
19
+ });
16
20
  export {
17
- n as default
21
+ h as default
18
22
  };
package/config/preset.js CHANGED
@@ -2,47 +2,62 @@ import { definePreset } from '@primevue/themes';
2
2
  import Lara from '@primevue/themes/lara';
3
3
  export const AmPreset = definePreset(Lara, {
4
4
  primitive: {
5
- purple: {
6
- 50: '#f7f3ff',
7
- 100: '#f0e8ff',
8
- 200: '#e4d6ff',
9
- 300: '#ccb2ff',
10
- 400: '#b28bff',
11
- 500: '#9b6afa',
12
- 600: '#7443d6',
13
- 700: '#623dae',
14
- 800: '#4d2f89',
15
- 900: '#372263'
5
+ grape: {
6
+ 50: '#F8F6FC',
7
+ 100: '#E4D6FF',
8
+ 200: '#CCB2FF',
9
+ 300: '#CCB2FF',
10
+ 400: '#B28BFF',
11
+ 500: '#9B6AFA',
12
+ 600: '#7443D6',
13
+ 700: '#623DAE',
14
+ 800: '#4D2F89',
15
+ 900: '#372263',
16
+ 950: '#2B0850'
17
+ },
18
+ oil: {
19
+ 50: '#F7F7FD',
20
+ 100: '#F2F8FD',
21
+ 200: '#E1EAFA',
22
+ 300: '#CCD7EB',
23
+ 400: '#A3ADC2',
24
+ 500: '#727E96',
25
+ 600: '#535D73',
26
+ 700: '#35435E',
27
+ 800: '#202A44',
28
+ 900: '#282E38',
29
+ 950: '#060D1E'
16
30
  }
17
31
  },
18
32
  semantic: {
19
33
  primary: {
20
- 50: '{purple.50}',
21
- 100: '{purple.100}',
22
- 200: '{purple.200}',
23
- 300: '{purple.300}',
24
- 400: '{purple.400}',
25
- 500: '{purple.500}',
26
- 600: '{purple.600}',
27
- 700: '{purple.700}',
28
- 800: '{purple.800}',
29
- 900: '{purple.900}',
30
- 950: '{purple.950}'
34
+ 50: '{grape.50}',
35
+ 100: '{grape.100}',
36
+ 200: '{grape.200}',
37
+ 300: '{grape.300}',
38
+ 400: '{grape.400}',
39
+ 500: '{grape.500}',
40
+ 600: '{grape.600}',
41
+ 700: '{grape.700}',
42
+ 800: '{grape.800}',
43
+ 900: '{grape.900}',
44
+ 950: '{grape.950}'
31
45
  },
32
46
  colorScheme: {
33
47
  light: {
34
48
  surface: {
35
- 0: '#ffffff',
36
- 50: '#fafafa',
37
- 100: '#f5f5f5',
38
- 200: '#eeeeee',
39
- 300: '#e0e0e0',
40
- 400: '#bdbdbd',
41
- 500: '#9e9e9e',
42
- 600: '#757575',
43
- 700: '#616161',
44
- 800: '#424242',
45
- 900: '#212121'
49
+ 0: '#FFFFFF',
50
+ 50: '{oil.50}',
51
+ 100: '{oil.100}',
52
+ 200: '{oil.200}',
53
+ 300: '{oil.300}',
54
+ 400: '{oil.400}',
55
+ 500: '{oil.500}',
56
+ 600: '{oil.600}',
57
+ 700: '{oil.700}',
58
+ 800: '{oil.800}',
59
+ 900: '{oil.900}',
60
+ 950: '{oil.950}'
46
61
  },
47
62
  primary: {
48
63
  color: '{primary.500}',
package/css/index.css CHANGED
@@ -131,36 +131,62 @@
131
131
  --gray-700: var(--bluegray-700);
132
132
  --gray-800: var(--bluegray-800);
133
133
  --gray-900: var(--bluegray-900);
134
+
135
+ --grape-50: #f8f6fc;
136
+ --grape-100: #e4d6ff;
137
+ --grape-200: #ccb2ff;
138
+ --grape-300: #ccb2ff;
139
+ --grape-400: #b28bff;
140
+ --grape-500: #9b6afa;
141
+ --grape-600: #7443d6;
142
+ --grape-700: #623dae;
143
+ --grape-800: #4d2f89;
144
+ --grape-900: #372263;
145
+ --grape-950: #2b0850;
146
+
147
+ --oil-50: #f7f7fd;
148
+ --oil-100: #f2f8fd;
149
+ --oil-200: #e1eafa;
150
+ --oil-300: #ccd7eb;
151
+ --oil-400: #a3adc2;
152
+ --oil-500: #727e96;
153
+ --oil-600: #535d73;
154
+ --oil-700: #35435e;
155
+ --oil-800: #202a44;
156
+ --oil-900: #282e38;
157
+ --oil-950: #060d1e;
134
158
  }
135
159
 
136
160
  /* Semantic */
137
161
  :root {
138
- --primary-50: var(--purple-50);
139
- --primary-100: var(--purple-100);
140
- --primary-200: var(--purple-200);
141
- --primary-300: var(--purple-300);
142
- --primary-400: var(--purple-400);
143
- --primary-500: var(--purple-500);
144
- --primary-600: var(--purple-600);
145
- --primary-700: var(--purple-700);
146
- --primary-800: var(--purple-800);
147
- --primary-900: var(--purple-900);
162
+ --primary-50: var(--grape-50);
163
+ --primary-100: var(--grape-100);
164
+ --primary-200: var(--grape-200);
165
+ --primary-300: var(--grape-300);
166
+ --primary-400: var(--grape-400);
167
+ --primary-500: var(--grape-500);
168
+ --primary-600: var(--grape-600);
169
+ --primary-700: var(--grape-700);
170
+ --primary-800: var(--grape-800);
171
+ --primary-900: var(--grape-900);
172
+ --primary-950: var(--grape-950);
148
173
 
149
174
  --surface-0: #ffffff;
150
- --surface-50: #fafafa;
151
- --surface-100: #f5f5f5;
152
- --surface-200: #eeeeee;
153
- --surface-300: #e0e0e0;
154
- --surface-400: #bdbdbd;
155
- --surface-500: #9e9e9e;
156
- --surface-600: #757575;
157
- --surface-700: #616161;
158
- --surface-800: #424242;
159
- --surface-900: #212121;
175
+ --surface-50: var(--oil-50);
176
+ --surface-100: var(--oil-100);
177
+ --surface-200: var(--oil-200);
178
+ --surface-300: var(--oil-300);
179
+ --surface-400: var(--oil-400);
180
+ --surface-500: var(--oil-500);
181
+ --surface-600: var(--oil-600);
182
+ --surface-700: var(--oil-700);
183
+ --surface-800: var(--oil-800);
184
+ --surface-900: var(--oil-900);
185
+ --surface-950: var(--oil-950);
160
186
  }
161
187
 
162
188
  /* Text */
163
189
  :root {
164
- --text-color: var(--surface-900);
190
+ --text-color: var(--oil-800);
165
191
  color: var(--text-color);
166
192
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@appmax_npm/ds-prime",
3
- "version": "1.0.0-alpha.25",
3
+ "version": "1.0.0-alpha.27",
4
4
  "description": "Design System da Appmax baseado no Primevue",
5
5
  "author": "Appmax",
6
6
  "type": "module",
@@ -11,5 +11,9 @@
11
11
  },
12
12
  "dependencies": {
13
13
  "@primevue/themes": "^4.0.4"
14
+ },
15
+ "peerDependencies": {
16
+ "primevue": "^4",
17
+ "vue": "^3.4"
14
18
  }
15
19
  }
package/tailwind/index.d.ts CHANGED
@@ -7,6 +7,32 @@ export declare const AmTailwindConfig: {
7
7
  };
8
8
  extend: {
9
9
  colors: {
10
+ grape: {
11
+ 50: string;
12
+ 100: string;
13
+ 200: string;
14
+ 300: string;
15
+ 400: string;
16
+ 500: string;
17
+ 600: string;
18
+ 700: string;
19
+ 800: string;
20
+ 900: string;
21
+ 950: string;
22
+ };
23
+ oil: {
24
+ 50: string;
25
+ 100: string;
26
+ 200: string;
27
+ 300: string;
28
+ 400: string;
29
+ 500: string;
30
+ 600: string;
31
+ 700: string;
32
+ 800: string;
33
+ 900: string;
34
+ 950: string;
35
+ };
10
36
  blue: {
11
37
  50: string;
12
38
  100: string;
@@ -163,6 +189,7 @@ export declare const AmTailwindConfig: {
163
189
  700: string;
164
190
  800: string;
165
191
  900: string;
192
+ 950: string;
166
193
  };
167
194
  primary: {
168
195
  50: string;
package/tailwind/index.js CHANGED
@@ -7,6 +7,32 @@ export const AmTailwindConfig = {
7
7
  },
8
8
  extend: {
9
9
  colors: {
10
+ grape: {
11
+ 50: 'var(--grape-50)',
12
+ 100: 'var(--grape-100)',
13
+ 200: 'var(--grape-200)',
14
+ 300: 'var(--grape-300)',
15
+ 400: 'var(--grape-400)',
16
+ 500: 'var(--grape-500)',
17
+ 600: 'var(--grape-600)',
18
+ 700: 'var(--grape-700)',
19
+ 800: 'var(--grape-800)',
20
+ 900: 'var(--grape-900)',
21
+ 950: 'var(--grape-950)'
22
+ },
23
+ oil: {
24
+ 50: 'var(--oil-50)',
25
+ 100: 'var(--oil-100)',
26
+ 200: 'var(--oil-200)',
27
+ 300: 'var(--oil-300)',
28
+ 400: 'var(--oil-400)',
29
+ 500: 'var(--oil-500)',
30
+ 600: 'var(--oil-600)',
31
+ 700: 'var(--oil-700)',
32
+ 800: 'var(--oil-800)',
33
+ 900: 'var(--oil-900)',
34
+ 950: 'var(--oil-950)'
35
+ },
10
36
  blue: {
11
37
  50: 'var(--blue-50)',
12
38
  100: 'var(--blue-100)',
@@ -162,7 +188,8 @@ export const AmTailwindConfig = {
162
188
  600: 'var(--surface-600)',
163
189
  700: 'var(--surface-700)',
164
190
  800: 'var(--surface-800)',
165
- 900: 'var(--surface-900)'
191
+ 900: 'var(--surface-900)',
192
+ 950: 'var(--surface-950)'
166
193
  },
167
194
  primary: {
168
195
  50: 'var(--primary-50)',