#837 - Update dropdowns

This commit is contained in:
Elio Struyf
2024-09-16 16:06:39 +02:00
parent 657e9054f6
commit 178207fd82
5 changed files with 220 additions and 188 deletions

View File

@@ -19,6 +19,10 @@
- [#842](https://github.com/estruyf/vscode-front-matter/issues/842): Allow to set the `frontMatter.taxonomy.slugTemplate` setting to an empty string
- [#845](https://github.com/estruyf/vscode-front-matter/issues/845): Fix empty values for number fields
### 🚧 Work in progress
- [#837](https://github.com/estruyf/vscode-front-matter/issues/837): Replacing the VSCode Webview UI Toolkit with [vscrui](https://github.com/estruyf/vscrui) due to the deprecation of the VSCode Webview UI Toolkit library
## [10.3.0] - 2024-08-13 - [Release notes](https://beta.frontmatter.codes/updates/v10.3.0)
### ✨ New features

8
package-lock.json generated
View File

@@ -98,7 +98,7 @@
"uniforms-bridge-json-schema": "^3.10.2",
"uniforms-unstyled": "^3.10.2",
"url-join-ts": "^1.0.5",
"vscrui": "^0.1.0-beta.1084843",
"vscrui": "^0.1.0-beta.1088540",
"wc-react": "github:estruyf/wc-react",
"webpack": "^5.75.0",
"webpack-bundle-analyzer": "^4.7.0",
@@ -12447,9 +12447,9 @@
}
},
"node_modules/vscrui": {
"version": "0.1.0-beta.1084843",
"resolved": "https://registry.npmjs.org/vscrui/-/vscrui-0.1.0-beta.1084843.tgz",
"integrity": "sha512-a56jsuyVy15pG/INaNPwLjoBFtCVbks3FuhtlX+CIwtzb5m2FjWqiiaF2Qe6YI8dxB5HbIg1nQ32whYnrczKtw==",
"version": "0.1.0-beta.1088540",
"resolved": "https://registry.npmjs.org/vscrui/-/vscrui-0.1.0-beta.1088540.tgz",
"integrity": "sha512-tdy0E1Cuj6YapZDhV8H2WRRHMFFIe4I5dkEEt+Nttc/KFbCoEQnCEInDw1LG9tKT02wnzp8qXm3Jdacq62CHgQ==",
"dev": true,
"funding": {
"type": "github",

View File

@@ -10,7 +10,8 @@
"color": "#0e131f",
"theme": "dark"
},
"badges": [{
"badges": [
{
"description": "version",
"url": "https://img.shields.io/github/package-json/v/estruyf/vscode-front-matter?color=green&label=vscode-front-matter&style=flat-square",
"href": "https://github.com/estruyf/vscode-front-matter"
@@ -70,7 +71,8 @@
"**/.frontmatter/config/*.json": "jsonc"
}
},
"keybindings": [{
"keybindings": [
{
"command": "frontMatter.dashboard",
"key": "alt+d"
},
@@ -94,19 +96,23 @@
}
],
"viewsContainers": {
"activitybar": [{
"id": "frontmatter-explorer",
"title": "FM",
"icon": "$(fm-logo)"
}]
"activitybar": [
{
"id": "frontmatter-explorer",
"title": "FM",
"icon": "$(fm-logo)"
}
]
},
"views": {
"frontmatter-explorer": [{
"id": "frontMatter.explorer",
"name": "Front Matter",
"icon": "$(fm-logo)",
"type": "webview"
}]
"frontmatter-explorer": [
{
"id": "frontMatter.explorer",
"name": "Front Matter",
"icon": "$(fm-logo)",
"type": "webview"
}
]
},
"configuration": {
"title": "%settings.configuration.title%",
@@ -174,7 +180,8 @@
"frontMatter.content.defaultFileType": {
"type": "string",
"default": "md",
"oneOf": [{
"oneOf": [
{
"enum": [
"md",
"mdx"
@@ -190,7 +197,8 @@
"frontMatter.content.defaultSorting": {
"type": "string",
"default": "",
"oneOf": [{
"oneOf": [
{
"enum": [
"LastModifiedAsc",
"LastModifiedDesc",
@@ -542,7 +550,8 @@
"categories"
],
"markdownDescription": "%setting.frontMatter.content.filters.markdownDescription%",
"items": [{
"items": [
{
"type": "string",
"enum": [
"contentFolders",
@@ -616,7 +625,8 @@
"command": {
"$id": "#scriptCommand",
"type": "string",
"anyOf": [{
"anyOf": [
{
"enum": [
"node",
"bash",
@@ -812,7 +822,8 @@
"title",
"file"
],
"anyOf": [{
"anyOf": [
{
"required": [
"schema"
]
@@ -880,7 +891,8 @@
"id",
"path"
],
"anyOf": [{
"anyOf": [
{
"required": [
"schema"
]
@@ -1121,26 +1133,29 @@
}
}
},
"default": [{
"name": "default",
"fileTypes": null,
"fields": [{
"title": "Title",
"name": "title",
"type": "string"
},
{
"title": "Caption",
"name": "caption",
"type": "string"
},
{
"title": "Alt text",
"name": "alt",
"type": "string"
}
]
}],
"default": [
{
"name": "default",
"fileTypes": null,
"fields": [
{
"title": "Title",
"name": "title",
"type": "string"
},
{
"title": "Caption",
"name": "caption",
"type": "string"
},
{
"title": "Alt text",
"name": "alt",
"type": "string"
}
]
}
],
"scope": "Media"
},
"frontMatter.media.supportedMimeTypes": {
@@ -1243,7 +1258,8 @@
"fileType": {
"type": "string",
"default": "",
"oneOf": [{
"oneOf": [
{
"enum": [
"md",
"mdx"
@@ -1382,7 +1398,8 @@
"default": "",
"description": "%setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.taxonomyId.description%",
"not": {
"anyOf": [{
"anyOf": [
{
"const": ""
},
{
@@ -1583,7 +1600,8 @@
"type",
"name"
],
"allOf": [{
"allOf": [
{
"if": {
"properties": {
"type": {
@@ -1795,48 +1813,51 @@
"fields"
]
},
"default": [{
"name": "default",
"pageBundle": false,
"fields": [{
"title": "Title",
"name": "title",
"type": "string"
},
{
"title": "Description",
"name": "description",
"type": "string"
},
{
"title": "Publishing date",
"name": "date",
"type": "datetime",
"default": "{{now}}",
"isPublishDate": true
},
{
"title": "Content preview",
"name": "preview",
"type": "image"
},
{
"title": "Is in draft",
"name": "draft",
"type": "boolean"
},
{
"title": "Tags",
"name": "tags",
"type": "tags"
},
{
"title": "Categories",
"name": "categories",
"type": "categories"
}
]
}],
"default": [
{
"name": "default",
"pageBundle": false,
"fields": [
{
"title": "Title",
"name": "title",
"type": "string"
},
{
"title": "Description",
"name": "description",
"type": "string"
},
{
"title": "Publishing date",
"name": "date",
"type": "datetime",
"default": "{{now}}",
"isPublishDate": true
},
{
"title": "Content preview",
"name": "preview",
"type": "image"
},
{
"title": "Is in draft",
"name": "draft",
"type": "boolean"
},
{
"title": "Tags",
"name": "tags",
"type": "tags"
},
{
"title": "Categories",
"name": "categories",
"type": "categories"
}
]
}
],
"scope": "Taxonomy"
},
"frontMatter.taxonomy.customTaxonomy": {
@@ -1849,7 +1870,8 @@
"type": "string",
"description": "%setting.frontMatter.taxonomy.customTaxonomy.items.properties.id.description%",
"not": {
"anyOf": [{
"anyOf": [
{
"const": ""
},
{
@@ -2048,7 +2070,8 @@
}
}
},
"commands": [{
"commands": [
{
"command": "frontMatter.project.switch",
"title": "%command.frontMatter.project.switch%",
"category": "Front Matter",
@@ -2380,16 +2403,21 @@
}
}
],
"submenus": [{
"id": "frontmatter.submenu",
"label": "Front Matter"
}],
"submenus": [
{
"id": "frontmatter.submenu",
"label": "Front Matter"
}
],
"menus": {
"webview/context": [{
"command": "workbench.action.webview.openDeveloperTools",
"when": "frontMatter:isDevelopment"
}],
"editor/title": [{
"webview/context": [
{
"command": "workbench.action.webview.openDeveloperTools",
"when": "frontMatter:isDevelopment"
}
],
"editor/title": [
{
"command": "frontMatter.markup.heading",
"group": "navigation@-133",
"when": "frontMatter:file:isValid == true && frontMatter:markdown:wysiwyg"
@@ -2475,11 +2503,14 @@
"when": "resourceFilename == 'frontmatter.json'"
}
],
"explorer/context": [{
"submenu": "frontmatter.submenu",
"group": "frontmatter@1"
}],
"frontmatter.submenu": [{
"explorer/context": [
{
"submenu": "frontmatter.submenu",
"group": "frontmatter@1"
}
],
"frontmatter.submenu": [
{
"command": "frontMatter.createFromTemplate",
"when": "explorerResourceIsFolder",
"group": "frontmatter@1"
@@ -2495,7 +2526,8 @@
"group": "frontmatter@3"
}
],
"commandPalette": [{
"commandPalette": [
{
"command": "frontMatter.init",
"when": "frontMatterCanInit"
},
@@ -2672,7 +2704,8 @@
"when": "frontMatter:file:isValid == true"
}
],
"view/title": [{
"view/title": [
{
"command": "frontMatter.docs",
"group": "navigation@-1",
"when": "view == frontMatter.explorer"
@@ -2709,13 +2742,16 @@
}
]
},
"languages": [{
"id": "frontmatter.project.output",
"mimetypes": [
"text/x-code-output"
]
}],
"grammars": [{
"languages": [
{
"id": "frontmatter.project.output",
"mimetypes": [
"text/x-code-output"
]
}
],
"grammars": [
{
"path": "./syntaxes/hugo.tmLanguage.json",
"scopeName": "frontmatter.markdown.hugo",
"injectTo": [
@@ -2728,45 +2764,48 @@
"path": "./syntaxes/frontmatter-output.tmLanguage.json"
}
],
"walkthroughs": [{
"id": "frontmatter.welcome",
"title": "Get started with Front Matter",
"description": "Discover the features of Front Matter and learn how to use the CMS for your SSG or static site.",
"steps": [{
"id": "frontmatter.welcome.init",
"title": "Get started",
"description": "Initial steps to get started.\n[Open dashboard](command:frontMatter.dashboard)",
"media": {
"markdown": "assets/walkthrough/get-started.md"
"walkthroughs": [
{
"id": "frontmatter.welcome",
"title": "Get started with Front Matter",
"description": "Discover the features of Front Matter and learn how to use the CMS for your SSG or static site.",
"steps": [
{
"id": "frontmatter.welcome.init",
"title": "Get started",
"description": "Initial steps to get started.\n[Open dashboard](command:frontMatter.dashboard)",
"media": {
"markdown": "assets/walkthrough/get-started.md"
},
"completionEvents": [
"onContext:frontMatterInitialized"
]
},
"completionEvents": [
"onContext:frontMatterInitialized"
]
},
{
"id": "frontmatter.welcome.documentation",
"title": "Documentation",
"description": "Check out the documentation for Front Matter.\n[View our documentation](https://frontmatter.codes/docs)",
"media": {
"markdown": "assets/walkthrough/documentation.md"
{
"id": "frontmatter.welcome.documentation",
"title": "Documentation",
"description": "Check out the documentation for Front Matter.\n[View our documentation](https://frontmatter.codes/docs)",
"media": {
"markdown": "assets/walkthrough/documentation.md"
},
"completionEvents": [
"onLink:https://frontmatter.codes/docs"
]
},
"completionEvents": [
"onLink:https://frontmatter.codes/docs"
]
},
{
"id": "frontmatter.welcome.supporter",
"title": "Support the project",
"description": "Become a supporter.\n[Support the project](https://github.com/sponsors/estruyf)",
"media": {
"markdown": "assets/walkthrough/support-the-project.md"
},
"completionEvents": [
"onLink:https://github.com/sponsors/estruyf"
]
}
]
}]
{
"id": "frontmatter.welcome.supporter",
"title": "Support the project",
"description": "Become a supporter.\n[Support the project](https://github.com/sponsors/estruyf)",
"media": {
"markdown": "assets/walkthrough/support-the-project.md"
},
"completionEvents": [
"onLink:https://github.com/sponsors/estruyf"
]
}
]
}
]
},
"scripts": {
"dev:ext": "npm run clean && npm run localization:generate && npm-run-all --parallel watch:*",
@@ -2880,7 +2919,7 @@
"uniforms-bridge-json-schema": "^3.10.2",
"uniforms-unstyled": "^3.10.2",
"url-join-ts": "^1.0.5",
"vscrui": "^0.1.0-beta.1084843",
"vscrui": "^0.1.0-beta.1088540",
"wc-react": "github:estruyf/wc-react",
"webpack": "^5.75.0",
"webpack-bundle-analyzer": "^4.7.0",
@@ -2893,4 +2932,4 @@
"vsce": {
"dependencies": false
}
}
}

View File

@@ -1,8 +1,8 @@
import * as React from 'react';
import { useCallback, useEffect, useState } from 'react';
import { Field, FieldGroup } from '../../../models';
import { VSCodeDropdown, VSCodeOption } from '@vscode/webview-ui-toolkit/react';
import { LocalizationKey } from '../../../localization';
import { LocalizationKey, localize } from '../../../localization';
import { Dropdown as VSCodeDropdown, DropdownOption } from 'vscrui';
export interface IDataBlockSelectorProps {
field: Field;
@@ -31,8 +31,8 @@ export const DataBlockSelector: React.FunctionComponent<IDataBlockSelectorProps>
}, []);
const onGroupSelect = useCallback(
(event: any) => {
const group = event.currentTarget.value === EMPTY_OPTION ? null : event.currentTarget.value;
(selection: DropdownOption) => {
const group = selection.value === EMPTY_OPTION ? null : selection.value;
if (group) {
onGroupSet(group);
@@ -71,23 +71,17 @@ export const DataBlockSelector: React.FunctionComponent<IDataBlockSelectorProps>
return (
<div className="json_data__selector">
<h3>{LocalizationKey.panelDataBlockDataBlockSelectorLabel}</h3>
<h3>{localize(LocalizationKey.panelDataBlockDataBlockSelectorLabel)}</h3>
<VSCodeDropdown
value={selectedGroup ?? EMPTY_OPTION}
onChange={onGroupSelect}
style={{
width: '100%',
marginBottom: '1rem'
}}
>
<VSCodeOption value={EMPTY_OPTION}>&nbsp;</VSCodeOption>
{options.map((o) => (
<VSCodeOption key={o} value={o}>
{o}
</VSCodeOption>
))}
</VSCodeDropdown>
onChange={(value) => onGroupSelect(value as DropdownOption)}
className='!block mb-4'
options={[
{ value: EMPTY_OPTION, label: '\u00A0' },
...options.map((o) => ({ value: o, label: o }))
]}
/>
</div>
);
};

View File

@@ -2,7 +2,7 @@ import * as React from 'react';
import { useCallback, useEffect, useState } from 'react';
import { Field } from '../../../models';
import { DataType } from '../../../models/DataType';
import { VSCodeDropdown, VSCodeOption } from '@vscode/webview-ui-toolkit/react';
import { Dropdown as VSCodeDropdown, DropdownOption } from 'vscrui';
export interface IJsonFieldSelectorProps {
field: Field;
@@ -23,6 +23,12 @@ export const JsonFieldSelector: React.FunctionComponent<IJsonFieldSelectorProps>
}: React.PropsWithChildren<IJsonFieldSelectorProps>) => {
const [options, setOptions] = useState<string[]>([]);
const onChange = (selection: DropdownOption) => {
onSetDataType(
selection.value === EMPTY_OPTION ? null : selection.value
);
};
const onSchemaSet = useCallback((dataType: string) => {
if (dataTypes && dataType !== EMPTY_OPTION) {
const schema = dataTypes.find((dt) => dt.id === dataType);
@@ -63,23 +69,12 @@ export const JsonFieldSelector: React.FunctionComponent<IJsonFieldSelectorProps>
<h3>Block type</h3>
<VSCodeDropdown
value={selectedDataType ?? EMPTY_OPTION}
onChange={(event: any) =>
onSetDataType(
event.currentTarget.value === EMPTY_OPTION ? null : event.currentTarget.value
)
}
style={{
width: '100%',
marginBottom: '1rem'
}}
>
<VSCodeOption value={EMPTY_OPTION}>&nbsp;</VSCodeOption>
{options.map((o) => (
<VSCodeOption key={o} value={o}>
{o}
</VSCodeOption>
))}
</VSCodeDropdown>
onChange={(selection) => onChange(selection as DropdownOption)}
className='!block mb-4'
options={[
{ value: EMPTY_OPTION, label: '\u00A0' },
...options.map((o) => ({ value: o, label: o }))
]} />
</div>
);
};