Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/devrax/v-cupertino
A Vue 3 Wrapper for Cupertino Pane Library
https://github.com/devrax/v-cupertino
capacitor cordova ionic npm typescript vue3
Last synced: 2 months ago
JSON representation
A Vue 3 Wrapper for Cupertino Pane Library
- Host: GitHub
- URL: https://github.com/devrax/v-cupertino
- Owner: Devrax
- License: mit
- Created: 2020-11-19T06:42:04.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2023-02-27T19:13:57.000Z (almost 2 years ago)
- Last Synced: 2024-10-06T03:52:56.840Z (3 months ago)
- Topics: capacitor, cordova, ionic, npm, typescript, vue3
- Language: Vue
- Homepage:
- Size: 1.86 MB
- Stars: 28
- Watchers: 3
- Forks: 5
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# [Cupertino Pane](https://github.com/roman-rr/cupertino-pane#cupertino-pane) for Vue 3
> #### Notes: if your are looking for vue 2 repo [here Cupertino-Pane for vue 2](https://github.com/Devrax/v2-cupertino)
> # Installation
Actually kinda easy
```sh
npm i v-cupertino
```
> # How works
### _**Example**_
## **Slot**
The 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.
```html
Hola mundo!
Adiós mundo cruel!
import { defineComponent } from "vue";
import VCupertino from "v-cupertino";
export default defineComponent({
name: "App",
components: {
VCupertino
}
})
```
## **Props**
| props | type | example | comments |
|-|-|-|-|
| :drawerOptions ( optional ) | `CupertinoSettings` | `` | The same as the Cupertinos Options; **constraints** you cannot override cupertino's callbacks even if you specified in the `CupertinoSettings`' Object|
| :entryAnimation ( optional ) | `Boolean` | `` | Whether the drawer should present, destroy or hide with a smooth animation |
| :entryComponent ( optional ) | `Component` | `` | 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 `` tag|
|:isPresent | Boolean | `` | Whether the component should be present or hide, when initialize; **default:** true |
:id | Number | String | `` | 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 |
## **Events**
_**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...`_
| events | return | comments |
| - | - | - |
| @did-dismiss | `() => void` | |
| @will-dismiss | `() => void` | |
| @did-present | `() => 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 |
| @will-present | `() => 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 |
| @drag-start | `() => number` | **Returns:** the property `y` from the method `getBoundingClientRect()` that belongs to the `DOMRect` |
| @drag | `() => number` | **Returns:** the property `y` from the method `getBoundingClientRect()` that belongs to the `DOMRect` |
| @drag-end | `() => number` | **Returns:** the property `y` from the method `getBoundingClientRect()` that belongs to the `DOMRect` |
| @backdrop-tap | `() => void` | |
| @transition-start | `() => void` | |
| @transition-end | `() => void` | |
> ## How to get access to the **public method** from the Cupertino Instance inside the component ``
There are actually **three** ways to get the instance from `` component from its parent container:
* refs
* From the instance returned by @did-present event
* From the instance returned by @will-present event
### **Getting the instance with refs**
> Sample code
```html
Hola mundo!
import { CupertinoPane } from "cupertino-pane";
import { defineComponent, onMounted, ref, Ref } from "vue";
import VCupertino from "./components/VCupertino.vue";
export default defineComponent({
name: "App",
components: {
VCupertino,
},
setup() {
const cupertinoRef: Ref<typeof VCupertino> = ref(VCupertino);
onMounted(() => {
const cupertino = cupertinoRef.value.cupertino as CupertinoPane;
cupertino.setDarkMode({ enable: true });
console.log(cupertino);
});
return {
cupertinoRef,
};
},
});
```
### **Getting the instance from @did-present or @will-present event**
> Sample code
```html
Hola mundo!
import { CupertinoPane } from "cupertino-pane";
import { defineComponent, onMounted, ref, Ref } from "vue";
import VCupertino from "./components/VCupertino.vue";
export default defineComponent({
name: "App",
components: {
VCupertino,
},
setup() {
const hook = ({ value }: Ref<CupertinoPane>) => {
console.log(value);
}
return {
hook,
};
},
});
```
## Using public methods
Here an [overview](https://github.com/roman-rr/cupertino-pane/blob/master/README.md#public-methods) of all the public methods
> Using the *refs* example to access public methods
```javascript
import { CupertinoPane } from "cupertino-pane";
import { defineComponent, onMounted, ref, Ref } from "vue";
import VCupertino from "./components/VCupertino.vue";
export default defineComponent({
name: "App",
components: {
VCupertino,
},
setup() {
const cupertinoRef: Ref = ref(VCupertino);
onMounted(() => {
const cupertino = cupertinoRef.value.cupertino as CupertinoPane;
cupertino.setDarkMode({ enable: Boolean }); // param:
cupertino.moveToBreak(String); // Will change pane position with animation to selected breakpoint. param: required('top' | 'middle' | 'bottom')
cupertino.moveToHeight(Number); // Will move pane to exact height with animation. Breakpoints will saved. param: required
cupertino.hide(); // Dissappear pane from screen, still keep pane in DOM.
cupertino.present({ animated: Boolean }); // Will render pane DOM and show pane with setted params. param: optional
cupertino.destroy({ animated: Boolean }); // Remove pane from DOM and clear styles
// to check more public methods to *overview* that is above
});
return {
cupertinoRef,
};
},
});
```
**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).
# License
Licensed under the MIT License. [View original LICENSE](https://github.com/roman-rr/cupertino-pane/blob/master/LICENSE) [Project's LICENSE](/LICENSE)
Lol, that's all, thanks