{"id":15012928,"url":"https://github.com/singerla/quasar-json-tree-editor","last_synced_at":"2025-04-12T03:31:53.830Z","repository":{"id":224767021,"uuid":"764101727","full_name":"singerla/quasar-json-tree-editor","owner":"singerla","description":"Use JSON schema to build and edit objects with nested Quasar components.","archived":false,"fork":false,"pushed_at":"2024-07-19T13:45:15.000Z","size":407,"stargazers_count":3,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-08T17:46:14.825Z","etag":null,"topics":["drag-and-drop","json","json-schema","quasar","quasar-framework","tree"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/singerla.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-02-27T13:37:47.000Z","updated_at":"2024-08-29T00:18:30.000Z","dependencies_parsed_at":null,"dependency_job_id":"18737cf9-bd2c-421d-ac64-2ec7b32e2b00","html_url":"https://github.com/singerla/quasar-json-tree-editor","commit_stats":{"total_commits":74,"total_committers":2,"mean_commits":37.0,"dds":"0.013513513513513487","last_synced_commit":"d906d545fec6843816bb3b7dd226575f7f14a4b9"},"previous_names":["singerla/quasar-json-tree-editor"],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/singerla%2Fquasar-json-tree-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/singerla%2Fquasar-json-tree-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/singerla%2Fquasar-json-tree-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/singerla%2Fquasar-json-tree-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/singerla","download_url":"https://codeload.github.com/singerla/quasar-json-tree-editor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248512785,"owners_count":21116680,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["drag-and-drop","json","json-schema","quasar","quasar-framework","tree"],"created_at":"2024-09-24T19:43:25.435Z","updated_at":"2025-04-12T03:31:53.499Z","avatar_url":"https://github.com/singerla.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## This is a work in progress.\n### Please come back later!\n\n\u003cimg src=\"https://img.shields.io/npm/v/quasar-ui-json-tree-editor.svg?label=quasar-ui-json-tree-editor\"\u003e\n\u003cimg src=\"https://img.shields.io/npm/v/quasar-app-extension-json-tree-editor.svg?label=quasar-app-extension-json-tree-editor\"\u003e\n\nCompatible with Quasar UI v2 and Vue 3.\n\n# Structure\n\n- [/ui](ui) - standalone npm package\n\n- [/app-extension](app-extension) - Quasar app extension\n\n# Try it\nClone repo, install dependencies, go to `/ui` directory and run `yarn dev`.\nChoose `Test1` or `Test2`. Or even `Test3` or more!\n\n# How it works\n- Pass a JSON-Schema and a valid or empty object to the `\u003cQJsonTreeEditor\u003e` component. \n\n- According to parent `type: 'object'` or `type: 'array'`, a new node will be created.\n\n- In case of `type: 'array'`, the parent node will show options to add/delete a child.\n\n- According to child type, a quasar component will be rendered.\n\n- Whenever the data is edited or sorted, the `\u003cQJsonTreeEditor\u003e` updates the data.\n\n## `params`-Object\nThe JSON-schema can be extended with `params`-Object. This will e.g. wrap the children with a `vuedraggable-plus` component.\n\nCurrently, these params are available:\n```json\n{\n  \"type\": \"array\",\n  \"params\": {\n    \"expansible\": false,\n    \"showAddButton\": true,\n    \"sortable\": true,\n    \"group\": {\n      \"name\": \"myGroupName\"\n    }\n  }\n}\n```\n\n## Quasar components\nYou can already use some quasar components inside your tree:\n\nQuasar's beautiful [Slider](https://quasar.dev/vue-components/slider):\n```json\n{\n  \"type\": \"number\",\n  \"component\": \"Slider\",\n  \"params\": {\n    \"min\": 0,\n    \"max\": 100\n  }\n}\n```\n\nOr quasar's fantastic [ColorPicker](https://quasar.dev/vue-components/color-picker):\n```json\n{\n  \"type\": \"string\",\n  \"component\": \"ColorPicker\"\n}\n```\n\n## Example JSON-Schema\n\nExample taken from:\nhttps://json-schema.org/learn/getting-started-step-by-step#create\n\n```js\nconst jsonSchema = {\n  $schema: 'https://json-schema.org/draft/2020-12/schema',\n  $id: 'https://example.com/product.schema.json',\n  title: 'Product',\n  description: \"A product from Acme's catalog\",\n  type: 'object',\n  params: {\n    // Always expanded:\n    expansible: false,\n  },\n  properties: {\n    productId: {\n      description: 'The unique identifier for a product',\n      type: 'integer',\n    },\n    productName: {\n      description: 'Name of the product',\n      type: 'string',\n    },\n    price: {\n      description: 'The price of the product',\n      type: 'number',\n      exclusiveMinimum: 0,\n    },\n    tags: {\n      description: 'Tags for the product',\n      type: 'array',\n      items: {\n        type: 'string',\n      },\n      // Make it sortable:\n      params: {\n        sortable: true,\n        showAddButton: true,\n        group: {\n          name: 'numbers',\n        },\n      },\n      minItems: 1,\n      uniqueItems: true,\n    },\n    dimensions: {\n      type: 'object',\n      properties: {\n        length: {\n          type: 'number',\n        },\n        width: {\n          type: 'number',\n        },\n        height: {\n          type: 'number',\n        },\n      },\n      required: ['length', 'width', 'height'],\n    },\n  },\n  required: ['productId', 'productName', 'price'],\n};\n```\n\n## Example Object:\n\n```js\nconst data = reactive({\n  productId: 1,\n  productName: \"An ice sculpture\",\n  price: 12.5,\n  tags: [\"cold\", \"ice\"],\n  dimensions: {\n    length: 7.0,\n    width: 12.0,\n    height: 9.5,\n  },\n});\n```\n\n# Usage\n```vue\n  \u003cQJsonTreeEditor\n    :schema=\"jsonSchema\"\n    v-model=\"data\"\n    @updated=\"submitData\"\n  \u003e\n  \u003c/QJsonTreeEditor\u003e\n```\n\n# Donate\n\nIf you appreciate the work that went into this project, please consider [donating to Quasar](https://donate.quasar.dev).\n\n# License\n\nMIT (c) singerla\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsingerla%2Fquasar-json-tree-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsingerla%2Fquasar-json-tree-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsingerla%2Fquasar-json-tree-editor/lists"}