{"id":22490325,"url":"https://github.com/Devrax/v-cupertino","last_synced_at":"2025-08-02T22:32:54.907Z","repository":{"id":57389620,"uuid":"314159147","full_name":"Devrax/v-cupertino","owner":"Devrax","description":"A Vue 3 Wrapper for Cupertino Pane Library","archived":false,"fork":false,"pushed_at":"2023-02-27T19:13:57.000Z","size":1949,"stargazers_count":28,"open_issues_count":1,"forks_count":5,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-11-28T20:49:20.504Z","etag":null,"topics":["capacitor","cordova","ionic","npm","typescript","vue3"],"latest_commit_sha":null,"homepage":"","language":"Vue","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/Devrax.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":"2020-11-19T06:42:04.000Z","updated_at":"2024-09-08T13:47:55.000Z","dependencies_parsed_at":"2024-10-21T15:41:26.533Z","dependency_job_id":null,"html_url":"https://github.com/Devrax/v-cupertino","commit_stats":{"total_commits":22,"total_committers":1,"mean_commits":22.0,"dds":0.0,"last_synced_commit":"632df21edda07bb190a37c3aa8e59d173e3fccf3"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Devrax%2Fv-cupertino","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Devrax%2Fv-cupertino/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Devrax%2Fv-cupertino/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Devrax%2Fv-cupertino/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Devrax","download_url":"https://codeload.github.com/Devrax/v-cupertino/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228501079,"owners_count":17930188,"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":["capacitor","cordova","ionic","npm","typescript","vue3"],"created_at":"2024-12-06T17:22:03.779Z","updated_at":"2024-12-06T17:24:48.471Z","avatar_url":"https://github.com/Devrax.png","language":"Vue","funding_links":[],"categories":["Vue"],"sub_categories":[],"readme":"# [Cupertino Pane](https://github.com/roman-rr/cupertino-pane#cupertino-pane) for Vue 3\n\n\u003cimg src=\"https://img.shields.io/badge/vuejs%20-%2335495e.svg?\u0026style=for-the-badge\u0026logo=vue.js\u0026logoColor=%234FC08D\"/\u003e \u003cimg src=\"https://img.shields.io/badge/typescript%20-%23007ACC.svg?\u0026style=for-the-badge\u0026logo=typescript\u0026logoColor=white\"/\u003e \u003cimg src=\"https://img.shields.io/badge/github%20-%23121011.svg?\u0026style=for-the-badge\u0026logo=github\u0026logoColor=white\"/\u003e \u003cimg src=\"https://img.shields.io/badge/javascript%20-%23323330.svg?\u0026style=for-the-badge\u0026logo=javascript\u0026logoColor=%23F7DF1E\"/\u003e\n\n\u003e #### Notes: if your are looking for vue 2 repo [here Cupertino-Pane for vue 2](https://github.com/Devrax/v2-cupertino)\n\u003e # Installation\n\nActually kinda easy\n\n```sh\n  npm i v-cupertino\n```\n\n\u003e # How works\n\n### _**Example**_\n\n![Example](assets/component-example.gif)\n\n## **Slot**\n\nThe component just have one simple slot where you can easily put one or multiple components (by wrapping it in a template or wrap element like a div), doesn't have any special v-slots, any component or html element used will fallback into v-slot:default.\n\n```html\n  \u003ctemplate\u003e\n    \u003cv-cupertino\u003e\n      \u003cdiv\u003eHola mundo!\u003cdiv\u003e\n      \u003cdiv\u003eAdiós mundo cruel!\u003c/div\u003e\n    \u003cv-cupertino\u003e\n  \u003c/template\u003e\n\n  \u003cscript lang=\"ts\"\u003e\n    import { defineComponent } from \"vue\";\n    import VCupertino from \"v-cupertino\";\n\n    export default defineComponent({\n      name: \"App\",\n      components: {\n        VCupertino\n      }\n    })\n  \u003c/script\u003e\n```\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n## **Props**\n| props | type | example | comments |\n|-|-|-|-|\n| :drawerOptions ( optional ) | `CupertinoSettings` |  `\u003cv-cupertino :drawerOptions=\"yourSettingsObject\"\u003e` | The same as the Cupertinos Options; **constraints** you cannot override cupertino's callbacks even if you specified in the `CupertinoSettings`' Object|\n| :entryAnimation ( optional ) | `Boolean` | `\u003cv-cupertino :entryAnimation=\"Boolean\"\u003e` | Whether the drawer should present, destroy or hide with a smooth animation |\n| :entryComponent ( optional ) | `Component` | `\u003cv-cupertino :entryComponent=\"Component\"\u003e` | The component itself use slots, but I think it would be faster to toggle between component from scripts instead of using v-if also components remember their state because are wrapped by `\u003ckeep-alive\u003e` tag|\n|:isPresent | Boolean | `\u003cv-cupertino :entryComponent=\"Component\"\u003e` | Whether the component should be present or hide, when initialize; **default:** true | \n:id | Number \u0026#124; String | `\u003cv-cupertino :id=\"2\"\u003e` | If you have multiples v-cupertino components in the same app that might be working in the same time could crash the library cupertino-pane due that all of them are using the same selector class to create a new pane, using custom id, will allow you to use multiples v-cupertino components as much as you want |\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n## **Events**\n _**Note:** Are the same hooks as the Cupertino pane but instead of camelCase are kebak-case and without the prefix **on**: `@will-dismiss, @backdrop-tap...`_\n\n\n| events | return | comments |\n| - | - | - |\n| @did-dismiss | `() =\u003e void` | |\n| @will-dismiss | `() =\u003e void` | |\n| @did-present | `() =\u003e cupertinoInstance` | **Returns:** the cupertino instance inside the component when the drawer is already visible, this is useful when you need to have access to the instance once is visible  | \n| @will-present | `() =\u003e cupertinoInstance` | **Returns:** the cupertino instance inside the component when the drawer will be visible, this is useful when you need to have access to the instance before is visible | \n| @drag-start | `() =\u003e number` | **Returns:** the property `y` from the method `getBoundingClientRect()` that belongs to the `DOMRect` |\n| @drag | `() =\u003e number` | **Returns:** the property `y` from the method `getBoundingClientRect()` that belongs to the `DOMRect` |\n| @drag-end | `() =\u003e number` | **Returns:** the property `y` from the method `getBoundingClientRect()` that belongs to the `DOMRect` |\n| @backdrop-tap | `() =\u003e void` | |\n| @transition-start | `() =\u003e void` | |\n| @transition-end | `() =\u003e void` | |\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n\u003e ## How to get access to the **public method** from the Cupertino Instance inside the component `\u003cv-cupertino /\u003e`\n\nThere are actually **three** ways to get the instance from `\u003cv-cupertino /\u003e` component from its parent container:\n\n* refs\n* From the instance returned by @did-present event\n* From the instance returned by @will-present event\n\n### **Getting the instance with refs**\n\n![ref](assets/ref_example_x1.svg)\n\n\u003e Sample code\n\n```html\n\u003ctemplate\u003e\n  \u003cv-cupertino ref=\"cupertinoRef\"\u003e\n    \u003cdiv\u003eHola mundo!\u003cdiv\u003e\n  \u003cv-cupertino\u003e\n\u003c/template\u003e\n\n\u003cscript lang=\"ts\"\u003e\n  import { CupertinoPane } from \"cupertino-pane\";\n  import { defineComponent, onMounted, ref, Ref } from \"vue\";\n  import VCupertino from \"./components/VCupertino.vue\";\n\n  export default defineComponent({\n    name: \"App\",\n    components: {\n      VCupertino,\n    },\n    setup() {\n      const cupertinoRef: Ref\u003ctypeof VCupertino\u003e = ref(VCupertino);\n\n      onMounted(() =\u003e {\n        const cupertino = cupertinoRef.value.cupertino as CupertinoPane;\n        cupertino.setDarkMode({ enable: true });\n        console.log(cupertino);\n      });\n\n      return {\n        cupertinoRef,\n      };\n    },\n  });\n\u003c/script\u003e\n\n```\n\n### **Getting the instance from @did-present or @will-present event**\n\n![ref](assets/event_example_x1.svg)\n\u003e Sample code\n\n```html\n\u003ctemplate\u003e\n  \u003cv-cupertino @did-present=\"hook\"\u003e\n    \u003cdiv\u003eHola mundo!\u003cdiv\u003e\n  \u003cv-cupertino\u003e\n\u003c/template\u003e\n\n\u003cscript lang=\"ts\"\u003e\n  import { CupertinoPane } from \"cupertino-pane\";\n  import { defineComponent, onMounted, ref, Ref } from \"vue\";\n  import VCupertino from \"./components/VCupertino.vue\";\n\n  export default defineComponent({\n    name: \"App\",\n    components: {\n      VCupertino,\n    },\n    setup() {\n      const hook = ({ value }: Ref\u003cCupertinoPane\u003e) =\u003e {\n        console.log(value);\n      }\n\n      return {\n        hook,\n      };\n    },\n  });\n\u003c/script\u003e\n\n```\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n## Using public methods\n\nHere an [overview](https://github.com/roman-rr/cupertino-pane/blob/master/README.md#public-methods) of all the public methods\n\n\u003e Using the *refs* example to access public methods\n\n```javascript\nimport { CupertinoPane } from \"cupertino-pane\";\nimport { defineComponent, onMounted, ref, Ref } from \"vue\";\nimport VCupertino from \"./components/VCupertino.vue\";\n\nexport default defineComponent({\n  name: \"App\",\n  components: {\n    VCupertino,\n  },\n  setup() {\n    const cupertinoRef: Ref\u003ctypeof VCupertino\u003e = ref(VCupertino);\n\n    onMounted(() =\u003e {\n      const cupertino = cupertinoRef.value.cupertino as CupertinoPane;\n      cupertino.setDarkMode({ enable: Boolean }); // param: \n      cupertino.moveToBreak(String); // Will change pane position with animation to selected breakpoint. param: required('top' | 'middle' | 'bottom')\n      cupertino.moveToHeight(Number); // Will move pane to exact height with animation. Breakpoints will saved. param: required\n      cupertino.hide(); // Dissappear pane from screen, still keep pane in DOM.\n      cupertino.present({ animated: Boolean }); // Will render pane DOM and show pane with setted params. param: optional\n      cupertino.destroy({ animated: Boolean }); // Remove pane from DOM and clear styles\n      // to check more public methods to *overview* that is above\n    });\n\n    return {\n      cupertinoRef,\n    };\n  },\n});\n```\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n  **Notes:** In case you need more information about the library, remember that this is only a wrapper, for more information go to the oficial [Cupertino Pane library](https://github.com/roman-rr/cupertino-pane/blob/master/README.md).\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n# License\nLicensed under the MIT License. [View original LICENSE](https://github.com/roman-rr/cupertino-pane/blob/master/LICENSE) [Project's LICENSE](/LICENSE)\n\nLol, that's all, thanks\n\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FDevrax%2Fv-cupertino","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FDevrax%2Fv-cupertino","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FDevrax%2Fv-cupertino/lists"}