{"id":15495895,"url":"https://github.com/hairyf/overlastic","last_synced_at":"2025-04-05T09:06:05.075Z","repository":{"id":37353180,"uuid":"505345013","full_name":"hairyf/overlastic","owner":"hairyf","description":"A universal overlays utils, supprot react, vue, vanilla, svelte","archived":false,"fork":false,"pushed_at":"2025-03-19T16:24:52.000Z","size":2237,"stargazers_count":65,"open_issues_count":1,"forks_count":14,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-29T08:07:33.007Z","etag":null,"topics":["component","dialog","message","modal","overlays","react","typescript","vue","vue3"],"latest_commit_sha":null,"homepage":"https://overlastic.vercel.app/","language":"TypeScript","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/hairyf.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":"2022-06-20T07:51:23.000Z","updated_at":"2025-03-04T06:13:03.000Z","dependencies_parsed_at":"2023-12-16T08:40:10.211Z","dependency_job_id":"f16b47a4-72aa-4847-be3c-b66a7e130bee","html_url":"https://github.com/hairyf/overlastic","commit_stats":null,"previous_names":["hairyf/unoverlays","tuimao233/unoverlays"],"tags_count":34,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hairyf%2Foverlastic","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hairyf%2Foverlastic/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hairyf%2Foverlastic/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hairyf%2Foverlastic/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hairyf","download_url":"https://codeload.github.com/hairyf/overlastic/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247299831,"owners_count":20916190,"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":["component","dialog","message","modal","overlays","react","typescript","vue","vue3"],"created_at":"2024-10-02T08:20:14.447Z","updated_at":"2025-04-05T09:06:05.042Z","avatar_url":"https://github.com/hairyf.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/hairyf/overlastic/raw/master/docs/public/logo.svg\" style=\"width:120px;\" /\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003eOverlastic\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  A create modal | dialog | popup promise deferred library\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/@overlastic/core\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/@overlastic/core.svg\" alt=\"NPM Version\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/@overlastic/core\"\u003e\u003cimg src=\"https://img.shields.io/npm/l/@overlastic/core.svg\" alt=\"Package License\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/@overlastic/core\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/@overlastic/core.svg\" alt=\"NPM Downloads\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  English | \u003ca href=\"https://github.com/hairyf/overlastic/blob/master/README_CN.md\"\u003eChinese\u003c/a\u003e | \u003ca href=\"https://overlastic.vercel.app\"\u003eDocs\u003c/a\u003e\n\u003c/p\u003e\n\n    Unified Overlays are used to create callback methods for\n    components and also support declarative use of Vue, React, and other components.\n\n###### Features\n\n- 💫 Simplify the create message or dialog and call your UI as a promise\n- 🧩 Integration and customization of existing component libraries\n- 🦾 provide secure type prompts for each constructor\n- ➿ Supports component inheritance of global application context\n\n## Packages\n\n- [@overlastic/vanilla](https://overlastic.vercel.app/element/)\n- [@overlastic/react](https://overlastic.vercel.app/react/)\n- [@overlastic/vue](https://overlastic.vercel.app/vue/)\n- [@overlastic/svelte](https://overlastic.vercel.app/svelte/)\n- [@overlastic/core](https://overlastic.vercel.app/functions/constructor.html)\n\n## Devtools\n\nComponents created by Unified Overlays support Devtools for their corresponding frameworks (React, Vue).\n\n###### Supported\n\n| React Developer Tools | Vue.js Devtools                 |\n| --------------------- | ------------------------------- |\n| ✅\u003csup\u003e(holder)\u003c/sup\u003e  | ✅\u003csup\u003e(holder\\|child-app)\u003c/sup\u003e |\n\n- `holder` inserts a holder into the corresponding component, making it available in the virtual DOM.\n- `child-app` creates a separate application that can be recognized by devtools.\n\n## Why?\n\nCreating Model classes repetitive and time-consuming. When reusing a component that uses a Model class, common fields such as reject, resolve, and visible need to be defined repeatedly. Additionally, controlling the Model process (`clear data` -\u003e `open model` -\u003e `edit data` -\u003e `onConfirm` -\u003e `save data`) can lead to a lot of redundant code, especially for frequently used components like an image selector.\n\nUnified Overlays simplifies modal creation by unifying the redundant processes and state management. It can effectively create imperative components, and can still be used declaratively.\n\n## Install\n\n```\npnpm add @overlastic/vue\n# Or React\npnpm add @overlastic/react\n```\n\n## Usage\n\nUse the `useExtendOverlay` Hook provided by overlays to obtain overlays metadata and create overlays components (Vue, React).\n\n```ts\n// In your Vue, React overlays component,\n// use useExtendOverlay to obtain overlays metadata.\nconst { visible, resolve, reject } = useExtendOverlay({\n  // The duration of the overlays duration prevents\n  // the component from being destroyed too early.\n  duration: 1000\n})\n```\n\nUse `defineOverlay|renderOverlay` to convert to a callback (imperative) method.\n\n```ts\nconst callback = defineOverlay(Component)\nconst result = await callback(props)\n```\n\n---\n\n```ts\nconst result = renderOverlay(Component, props)\n```\n\n# License\n\n[MIT](LICENSE) Copyright (c) 2019-PRESENT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhairyf%2Foverlastic","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhairyf%2Foverlastic","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhairyf%2Foverlastic/lists"}