vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

refactor d.ts

pull/5756/head
Mert Sincan 2024-05-16 15:52:16 +01:00
parent b4c4c064ad
commit 6b5e06c0cc
10 changed files with 6555 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
api-generator/build-apidoc.js
View File

@ -453,6 +453,55 @@ if (project) {
extendedBy: event_extendedBy, extendedBy: event_extendedBy,
extendedTypes: event_extendedTypes extendedTypes: event_extendedTypes
}; };
!doc[name]['tokens'] &&
(doc[name]['tokens'] = {
description: staticMessages['tokens'],
values: {}
});
const tokens = [];
const setTokens = (_declaration, _name) => {
if (_declaration?.groups) {
const event_props_group = _declaration.groups.find((g) => g.title === 'Properties');
event_props_group &&
event_props_group.children.forEach((prop) => {
if (prop.type?.declaration) {
setTokens(prop.type?.declaration, prop.name);
} else if (prop.comment?.getTag('@designToken')) {
tokens.push({
name: _name ? `${_name}.${prop.name}` : prop.name,
token: prop.comment.getTag('@designToken').content[0]?.text || '',
optional: prop.flags.isOptional,
readonly: prop.flags.isReadonly,
type: prop.type.toString(),
default: prop.comment && prop.comment.getTag('@defaultValue') ? prop.comment.getTag('@defaultValue').content[0]?.text || '' : '', // TODO: Check
description:
prop.comment &&
prop.comment.summary
.map((s) => {
if (s.text.indexOf('[here]') > -1) {
return `${s.text.slice(0, s.text.indexOf('[here]'))} <a target="_blank" href="${s.text.slice(s.text.indexOf('(') + 1, s.text.indexOf(')'))}">here</a> ${s.text.slice(s.text.indexOf(')') + 1)}`;
}
return s.text || '';
})
.join(' '),
deprecated: prop.comment && prop.comment.getTag('@deprecated') ? parseText(prop.comment.getTag('@deprecated').content[0]?.text) : undefined
});
}
});
}
};
setTokens(event);
doc[name]['tokens'].values[event.name] = {
description: event_props_description,
props: tokens
};
}); });
const module_enumerations_group = module.groups?.find((g) => g.title === 'Enumerations'); const module_enumerations_group = module.groups?.find((g) => g.title === 'Enumerations');
@ -631,6 +680,74 @@ if (project) {
}); });
}); });
const module_designtokens_group = module.groups?.find((g) => g.title === 'DesignTokens');
module_designtokens_group &&
module_designtokens_group.children.forEach((event) => {
const event_props_description = event.comment && event.comment.summary.map((s) => s.text || '').join(' ');
let component_prop = '';
if (event.comment && event.comment.getTag('@see')) {
const tag = event.comment.getTag('@see');
const content = tag.content[0];
if (content.text.includes("['")) {
component_prop = `${content.target.name}${content.text}`;
} else {
component_prop = `${content.text === content.target?.name ? content.target.parent.name : content.target?.name}.${content.text}`;
}
}
!doc[name]['tokens'] &&
(doc[name]['tokens'] = {
description: staticMessages['tokens'],
values: {}
});
const props = [];
const setProps = (_declaration, _name) => {
if (_declaration?.groups) {
const event_props_group = _declaration.groups.find((g) => g.title === 'Properties');
event_props_group &&
event_props_group.children.forEach((prop) => {
if (prop.type?.declaration) {
setProps(prop.type?.declaration, prop.name);
} else if (prop.comment?.getTag('@designToken')) {
props.push({
name: _name ? `${_name}.${prop.name}` : prop.name,
token: prop.comment.getTag('@designToken').content[0]?.text || '',
optional: prop.flags.isOptional,
readonly: prop.flags.isReadonly,
type: prop.type.toString(),
default: prop.comment && prop.comment.getTag('@defaultValue') ? prop.comment.getTag('@defaultValue').content[0]?.text || '' : '', // TODO: Check
description:
prop.comment &&
prop.comment.summary
.map((s) => {
if (s.text.indexOf('[here]') > -1) {
return `${s.text.slice(0, s.text.indexOf('[here]'))} <a target="_blank" href="${s.text.slice(s.text.indexOf('(') + 1, s.text.indexOf(')'))}">here</a> ${s.text.slice(s.text.indexOf(')') + 1)}`;
}
return s.text || '';
})
.join(' '),
deprecated: prop.comment && prop.comment.getTag('@deprecated') ? parseText(prop.comment.getTag('@deprecated').content[0]?.text) : undefined
});
}
});
}
};
setProps(event);
doc[name]['tokens'].values[event.name] = {
description: event_props_description,
props
};
});
// app.generateJson(module, `./api-generator/module-typedoc.json`); // app.generateJson(module, `./api-generator/module-typedoc.json`);
}); });

4
components/doc/helpers/index.js
View File

@ -38,7 +38,7 @@ export const getPTOptions = (name) => {
}; };
export const getStyleOptions = (name) => { export const getStyleOptions = (name) => {
const { members } = APIDocs[name.toLowerCase() + 'style']?.enumerations?.values?.[`${name}Classes`]; const { members = [] } = APIDocs[name.toLowerCase() + 'style']?.enumerations?.values?.[`${name}Classes`];
let data = []; let data = [];
for (const member of members) { for (const member of members) {
@ -57,7 +57,7 @@ export const getTokenOptions = (preset, name) => {
const values = APIDocs[`${preset.toLowerCase()}/${name.toLowerCase()}`]?.tokens?.values; const values = APIDocs[`${preset.toLowerCase()}/${name.toLowerCase()}`]?.tokens?.values;
let data = []; let data = [];
for (const [key, value] of Object.entries(values)) { for (const [key, value] of Object.entries(values || {})) {
for (const tokens of value?.props) { for (const tokens of value?.props) {
const { token, description } = tokens; const { token, description } = tokens;
const designToken = $dt(token); const designToken = $dt(token);

14
components/lib/themes/aura/inputtext/index.d.ts vendored
View File

@ -9,23 +9,11 @@
*/ */
import { ColorSchemeDesignToken } from '..'; import { ColorSchemeDesignToken } from '..';
/**
* **PrimeVue - InputText**
*
* _InputText renders a text field to enter data._
*
* [Live Demo](https://www.primevue.org/inputtext/)
* --- ---
* ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
*
* @group DesignTokens
*
*/
export interface InputTextDesignTokens extends ColorSchemeDesignToken<InputTextDesignTokens> { export interface InputTextDesignTokens extends ColorSchemeDesignToken<InputTextDesignTokens> {
/** /**
* Used to pass tokens of the root section * Used to pass tokens of the root section
*/ */
root: { root?: {
/** /**
* Background of an input field * Background of an input field
* *

2
components/lib/themes/aura/ripple/index.d.ts vendored
View File

@ -25,7 +25,7 @@ export interface RippleDesignTokens extends ColorSchemeDesignToken<RippleDesignT
/** /**
* Used to pass tokens of the root section * Used to pass tokens of the root section
*/ */
root: { root?: {
/** /**
* Background of ripple * Background of ripple
* *

89
components/lib/themes/lara/index.d.ts vendored
View File

@ -0,0 +1,89 @@
/**
*
* [Live Demo](https://www.primevue.org/)
*
* @module lara
*
*/
export interface ColorSchemeDesignToken<T> {
colorScheme?: {
light?: Omit<T, 'colorScheme'>;
dark?: Omit<T, 'colorScheme'>;
};
}
export interface PaletteDesignToken {
50?: string;
100?: string;
200?: string;
300?: string;
400?: string;
500?: string;
600?: string;
700?: string;
800?: string;
900?: string;
950?: string;
}
export interface PrimitiveDesignTokens {
borderRadius?: {
none?: string;
xs?: string;
sm?: string;
md?: string;
lg?: string;
xl?: string;
};
emerald?: PaletteDesignToken;
green?: PaletteDesignToken;
lime?: PaletteDesignToken;
red?: PaletteDesignToken;
orange?: PaletteDesignToken;
amber?: PaletteDesignToken;
yellow?: PaletteDesignToken;
teal?: PaletteDesignToken;
cyan?: PaletteDesignToken;
sky?: PaletteDesignToken;
blue?: PaletteDesignToken;
indigo?: PaletteDesignToken;
violet?: PaletteDesignToken;
purple?: PaletteDesignToken;
fuchsia?: PaletteDesignToken;
pink?: PaletteDesignToken;
rose?: PaletteDesignToken;
slate?: PaletteDesignToken;
gray?: PaletteDesignToken;
zinc?: PaletteDesignToken;
neutral?: PaletteDesignToken;
stone?: PaletteDesignToken;
[key: string]: any;
}
export interface SemanticDesignTokens {
transitionDuration?: string;
focusRing?: {
width?: string;
style?: string;
color?: string;
offset?: string;
shadow?: string;
};
iconSize?: string;
anchorGutter?: string;
primary?: PaletteDesignToken;
formField: {
paddingX?: string;
paddingY?: string;
borderRadius?: string;
focusRing?: {
width?: string;
style?: string;
color?: string;
offset?: string;
shadow?: string;
};
};
// @todo
[key: string]: any;
}

137
components/lib/themes/lara/inputtext/index.d.ts vendored
View File

@ -7,15 +7,13 @@
* @module lara/inputtext * @module lara/inputtext
* *
*/ */
import { ColorSchemeDesignToken } from '..';
/** export interface InputTextDesignTokens extends ColorSchemeDesignToken<InputTextDesignTokens> {
* Defines all sections of design tokens
*/
export namespace InputTextDesignToken {
/** /**
* Tokens of the root section * Used to pass tokens of the root section
*/ */
export interface Root { root?: {
/** /**
* Background of an input field * Background of an input field
* *
@ -34,23 +32,112 @@ export namespace InputTextDesignToken {
* @designToken inputtext.filled.background * @designToken inputtext.filled.background
*/ */
filledBackground?: string; filledBackground?: string;
} /**
} * Background of an input field on the focus state of filled mode
*
/** * @designToken inputtext.filled.focus.background
* **PrimeVue - InputText** */
* filledFocusBackground?: string;
* _InputText renders a text field to enter data._ /**
* * Border color of an input field
* [Live Demo](https://www.primevue.org/inputtext/) *
* --- --- * @designToken inputtext.border.color
* ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png) */
* borderColor?: string;
* @group DesignTokens /**
*/ * Border color of an input field on the hover state
export interface InputTextDesignTokens { *
/** * @designToken inputtext.hover.border.color
* Used to pass tokens of the root section */
*/ hoverBorderColor?: string;
root?: InputTextDesignToken.Root; /**
* Border color of an input field on the focus state
*
* @designToken inputtext.focus.border.color
*/
focusBorderColor?: string;
/**
* Border color of an input field when invalid
*
* @designToken inputtext.invalid.border.color
*/
invalidBorderColor?: string;
/**
* Color of an input field
*
* @designToken inputtext.color
*/
color?: string;
/**
* Color of an input field when disabled
*
* @designToken inputtext.disabled.color
*/
disabledColor?: string;
/**
* Placeholder color of an input field
*
* @designToken inputtext.placeholder.color
*/
placeholderColor?: string;
/**
* Shadow of an input field
*
* @designToken inputtext.shadow
*/
shadow?: string;
/**
* Padding right and left of an input field
*
* @designToken inputtext.padding.x
*/
paddingX?: string;
/**
* Padding top and bottom of an input field
*
* @designToken inputtext.padding.y
*/
paddingY?: string;
/**
* Border radius of an input field
*
* @designToken inputtext.border.radius
*/
borderRadius?: string;
/**
* Outline of an input field on the focus state
*/
focusRing?: {
/**
* Outline width of an input field on the focus state
*
* @designToken inputtext.focus.ring.width
*/
width?: string;
/**
* Outline style of an input field on the focus state
*
* @designToken inputtext.focus.ring.style
*/
style?: string;
/**
* Outline color of an input field on the focus state
*
* @designToken inputtext.focus.ring.color
*/
color?: string;
/**
* Outline offset of an input field on the focus state
*
* @designToken inputtext.focus.ring.offset
*/
offset?: string;
/**
* Shadow of an input field on the focus state
*
* @designToken inputtext.focus.ring.shadow
*/
shadow?: string;
};
};
} }

89
components/lib/themes/nora/index.d.ts vendored
View File

@ -0,0 +1,89 @@
/**
*
* [Live Demo](https://www.primevue.org/)
*
* @module aura
*
*/
export interface ColorSchemeDesignToken<T> {
colorScheme?: {
light?: Omit<T, 'colorScheme'>;
dark?: Omit<T, 'colorScheme'>;
};
}
export interface PaletteDesignToken {
50?: string;
100?: string;
200?: string;
300?: string;
400?: string;
500?: string;
600?: string;
700?: string;
800?: string;
900?: string;
950?: string;
}
export interface PrimitiveDesignTokens {
borderRadius?: {
none?: string;
xs?: string;
sm?: string;
md?: string;
lg?: string;
xl?: string;
};
emerald?: PaletteDesignToken;
green?: PaletteDesignToken;
lime?: PaletteDesignToken;
red?: PaletteDesignToken;
orange?: PaletteDesignToken;
amber?: PaletteDesignToken;
yellow?: PaletteDesignToken;
teal?: PaletteDesignToken;
cyan?: PaletteDesignToken;
sky?: PaletteDesignToken;
blue?: PaletteDesignToken;
indigo?: PaletteDesignToken;
violet?: PaletteDesignToken;
purple?: PaletteDesignToken;
fuchsia?: PaletteDesignToken;
pink?: PaletteDesignToken;
rose?: PaletteDesignToken;
slate?: PaletteDesignToken;
gray?: PaletteDesignToken;
zinc?: PaletteDesignToken;
neutral?: PaletteDesignToken;
stone?: PaletteDesignToken;
[key: string]: any;
}
export interface SemanticDesignTokens {
transitionDuration?: string;
focusRing?: {
width?: string;
style?: string;
color?: string;
offset?: string;
shadow?: string;
};
iconSize?: string;
anchorGutter?: string;
primary?: PaletteDesignToken;
formField: {
paddingX?: string;
paddingY?: string;
borderRadius?: string;
focusRing?: {
width?: string;
style?: string;
color?: string;
offset?: string;
shadow?: string;
};
};
// @todo
[key: string]: any;
}

149
components/lib/themes/nora/inputtext/index.d.ts vendored
View File

@ -7,38 +7,137 @@
* @module nora/inputtext * @module nora/inputtext
* *
*/ */
import { ColorSchemeDesignToken } from '..';
/** export interface InputTextDesignTokens extends ColorSchemeDesignToken<InputTextDesignTokens> {
* Defines all sections of design tokens
*/
export namespace InputTextDesignToken {
/** /**
* Tokens of the root section * Used to pass tokens of the root section
*/ */
export interface Root { root?: {
/** /**
* Background of an input field * Background of an input field
* *
* @designToken inputtext.background * @designToken inputtext.background
*/ */
background?: string; background?: string;
} /**
} * Background of an input field when disabled
*
/** * @designToken inputtext.disabled.background
* **PrimeVue - InputText** */
* disabledBackground?: string;
* _InputText renders a text field to enter data._ /**
* * Background of an input field when filled mode
* [Live Demo](https://www.primevue.org/inputtext/) *
* --- --- * @designToken inputtext.filled.background
* ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png) */
* filledBackground?: string;
* @group DesignTokens /**
*/ * Background of an input field on the focus state of filled mode
export interface InputTextDesignTokens { *
/** * @designToken inputtext.filled.focus.background
* Used to pass tokens of the root section */
*/ filledFocusBackground?: string;
root?: InputTextDesignToken.Root; /**
* Border color of an input field
*
* @designToken inputtext.border.color
*/
borderColor?: string;
/**
* Border color of an input field on the hover state
*
* @designToken inputtext.hover.border.color
*/
hoverBorderColor?: string;
/**
* Border color of an input field on the focus state
*
* @designToken inputtext.focus.border.color
*/
focusBorderColor?: string;
/**
* Border color of an input field when invalid
*
* @designToken inputtext.invalid.border.color
*/
invalidBorderColor?: string;
/**
* Color of an input field
*
* @designToken inputtext.color
*/
color?: string;
/**
* Color of an input field when disabled
*
* @designToken inputtext.disabled.color
*/
disabledColor?: string;
/**
* Placeholder color of an input field
*
* @designToken inputtext.placeholder.color
*/
placeholderColor?: string;
/**
* Shadow of an input field
*
* @designToken inputtext.shadow
*/
shadow?: string;
/**
* Padding right and left of an input field
*
* @designToken inputtext.padding.x
*/
paddingX?: string;
/**
* Padding top and bottom of an input field
*
* @designToken inputtext.padding.y
*/
paddingY?: string;
/**
* Border radius of an input field
*
* @designToken inputtext.border.radius
*/
borderRadius?: string;
/**
* Outline of an input field on the focus state
*/
focusRing?: {
/**
* Outline width of an input field on the focus state
*
* @designToken inputtext.focus.ring.width
*/
width?: string;
/**
* Outline style of an input field on the focus state
*
* @designToken inputtext.focus.ring.style
*/
style?: string;
/**
* Outline color of an input field on the focus state
*
* @designToken inputtext.focus.ring.color
*/
color?: string;
/**
* Outline offset of an input field on the focus state
*
* @designToken inputtext.focus.ring.offset
*/
offset?: string;
/**
* Shadow of an input field on the focus state
*
* @designToken inputtext.focus.ring.shadow
*/
shadow?: string;
};
};
} }

6022
doc/common/apidoc/index.json
View File

File diff suppressed because it is too large Load Diff

10
doc/inputtext/theming/index.vue
View File

@ -31,7 +31,7 @@ export default {
{ {
id: 'theming.tokens', id: 'theming.tokens',
label: 'Design Tokens', label: 'Design Tokens',
description: `List of design tokens used in <i>${this.$appState.preset}</i> Preset.`, description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions(this.$appState.preset, 'InputText') data: getTokenOptions(this.$appState.preset, 'InputText')
} }
@ -51,14 +51,6 @@ export default {
} }
] ]
}; };
},
watch: {
'$appState.preset': {
flush: 'post',
handler(newValue) {
this.docs[1] = { ...this.docs[1], description: `List of design tokens used in <i>${newValue}</i> Preset.`, data: getTokenOptions(newValue, 'InputText') };
}
}
} }
}; };
</script> </script>