From 574999855ad06cde3f6e2ef90b086f3303ab052e Mon Sep 17 00:00:00 2001 From: Vincent Uiker Date: Sun, 13 Oct 2024 16:06:25 +0200 Subject: [PATCH] added Search and Tabs input --- docs/docs/extensions/syntax-for-forms.md | 126 +++++++++++++++++------ package.json | 3 +- 2 files changed, 96 insertions(+), 33 deletions(-) diff --git a/docs/docs/extensions/syntax-for-forms.md b/docs/docs/extensions/syntax-for-forms.md index 98399703..7b575b1a 100644 --- a/docs/docs/extensions/syntax-for-forms.md +++ b/docs/docs/extensions/syntax-for-forms.md @@ -65,22 +65,22 @@ The `accordion` field can be used to group any number of other fields. attributes: label: My Accordion fields: - - type: boolean - id: random - attributes: - label: Random - description: This is a description - value: true - - type: input - id: text - attributes: - label: Text - description: This is a description - value: Hello World - type: text - validations: - required: true - - ... + - type: boolean + id: random + attributes: + label: Random + description: This is a description + value: true + - type: input + id: text + attributes: + label: Text + description: This is a description + value: Hello World + type: text + validations: + required: true + - ... ``` The field does not store any values. @@ -262,6 +262,7 @@ Resulting `values`: } ``` + ### Dropdown Field @@ -394,22 +396,22 @@ The `group` field can be used to visually combine other fields into a group. attributes: label: My Group fields: - - type: boolean - id: random - attributes: - label: Random - description: This is a description - value: true - - type: input - id: text - attributes: - label: Text - description: This is a description - value: Hello World - type: text - validations: - required: true - - ... + - type: boolean + id: random + attributes: + label: Random + description: This is a description + value: true + - type: input + id: text + attributes: + label: Text + description: This is a description + value: Hello World + type: text + validations: + required: true + - ... ``` The field does not store any values. @@ -536,6 +538,34 @@ Resulting `values`: } ``` +### Search Field +The `search` field can be used to group any number of other fields and search through them and all of their ancestors. +Searched ancestor fields: `label`, `description`, `title`, `value` + +```yaml + - type: search + id: my-search + fields: + - type: boolean + id: random + attributes: + label: Random + description: This is a description + value: true + - type: input + id: text + attributes: + label: Text + description: This is a description + value: Hello World + type: text + validations: + required: true + - ... +``` + +The field does not store any values. + ### Slider Field The `slider` field provides a beautiful slider that can be used to select a value. The `min`, `max` & `step` values are @@ -562,6 +592,38 @@ Resulting `values`: } ``` +### Tabs Field +The `tabs` field provides a tab bar with defined tabs to structure and group other fields. Recommended to be used as the top level field. +the optional `templates` field in a tab specified the pre-selected tab when the user selects templates in the configuration menu. + +```yaml + - type: tabs + id: my-tabs + tabs: + - label: Tab1 + fields: + - type: boolean + id: random + attributes: + label: Random + description: This is a description + value: true + - ... + - label: Tab2 + templates: true + fields: + - type: input + id: text + attributes: + label: Text + description: This is a description + value: Hello World + type: text + validations: + required: true + - ... +``` + ### Tags Field The `tags` field allow you to freely type in a list of words. This field is useful for adding a list of users, for diff --git a/package.json b/package.json index 24f9d052..1679595c 100755 --- a/package.json +++ b/package.json @@ -13,5 +13,6 @@ "docs:dev": "set NODE_OPTIONS=\"--openssl-legacy-provider\" && vuepress dev docs", "docs:build": "set NODE_OPTIONS=\"--openssl-legacy-provider\" && vuepress build docs" }, - "dependencies": {} + "dependencies": {}, + "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e" }