├── references.d.ts ├── .github ├── FUNDING.yml ├── issue_template.md └── workflows │ └── release.yml ├── pnpm-workspace.yaml ├── .prettierignore ├── src └── ui-persistent-bottomsheet │ ├── angular │ ├── index.ts │ ├── package.json │ ├── ng-package.json │ ├── tsconfig.json │ └── module.ts │ ├── vue │ └── index.ts │ ├── svelte │ └── index.ts │ ├── react │ └── index.tsx │ └── index.ts ├── .eslintrc.js ├── .vscode ├── settings.json └── launch.json ├── docs ├── assets │ ├── hierarchy.js │ ├── navigation.js │ ├── search.js │ ├── highlight.css │ ├── icons.svg │ └── icons.js ├── .nojekyll ├── variables │ ├── PAN_GESTURE_TAG.html │ ├── stepIndexProperty.html │ ├── scrollViewProperty.html │ ├── bottomSheetProperty.html │ ├── backdropColorProperty.html │ ├── gestureEnabledProperty.html │ └── translationFunctionProperty.html ├── functions │ └── install.html ├── interfaces │ └── BottomSheetEventData.html └── modules.html ├── .yarnrc.yml ├── packages └── ui-persistent-bottomsheet │ ├── .npmignore │ ├── tsconfig.json │ ├── package.json │ ├── CHANGELOG.md │ ├── blueprint.md │ └── README.md ├── .prettierrc.js ├── config.json ├── tsconfig.vue3.json ├── demo-snippets ├── package.json ├── react │ ├── install.ts │ └── Basic.tsx ├── svelte │ ├── install.ts │ └── Basic.svelte ├── vue │ ├── install.ts │ └── Basic.vue ├── webpack.config.vue.js └── ng │ ├── install.module.ts │ └── basic │ ├── basic.component.scss │ ├── basic.component.html │ └── basic.component.ts ├── tsconfig.json ├── .npmrc ├── .settings └── org.eclipse.buildship.core.prefs ├── svelte.config.js ├── .gitmodules ├── lerna.json ├── .gitignore ├── package.json ├── CHANGELOG.md ├── LICENSE └── README.md /references.d.ts: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | github: [farfromrefug] 2 | -------------------------------------------------------------------------------- /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | packages: 2 | - packages/* 3 | - demo-* -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | package-lock.json 2 | node_modules/ 3 | plugin/ 4 | docs/ 5 | -------------------------------------------------------------------------------- /src/ui-persistent-bottomsheet/angular/index.ts: -------------------------------------------------------------------------------- 1 | export * from './module'; 2 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: './tools/.eslintrc.js' 3 | }; 4 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "java.configuration.updateBuildConfiguration": "disabled" 3 | } -------------------------------------------------------------------------------- /docs/assets/hierarchy.js: -------------------------------------------------------------------------------- 1 | window.hierarchyData = "eJyrVirKzy8pVrKKjtVRKkpNy0lNLsnMzytWsqqurQUAmx4Kpg==" -------------------------------------------------------------------------------- /.yarnrc.yml: -------------------------------------------------------------------------------- 1 | compressionLevel: mixed 2 | 3 | nmHoistingLimits: workspaces 4 | 5 | nodeLinker: node-modules 6 | -------------------------------------------------------------------------------- /docs/.nojekyll: -------------------------------------------------------------------------------- 1 | TypeDoc added this file to prevent GitHub Pages from using Jekyll. You can turn off this behavior by setting the `githubPages` option to false. -------------------------------------------------------------------------------- /src/ui-persistent-bottomsheet/angular/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@nativescript-community/ui-persistent-bottomsheet-angular", 3 | "main": "index.js" 4 | } -------------------------------------------------------------------------------- /packages/ui-persistent-bottomsheet/.npmignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | tsconfig.json 3 | node_modules/ 4 | pnpm-global/ 5 | CHANGELOG.md 6 | blueprint.md 7 | *.aar 8 | *.jar -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | printWidth: 200, 3 | semi: true, 4 | tabWidth: 4, 5 | trailingComma: 'none', 6 | singleQuote: true 7 | }; 8 | -------------------------------------------------------------------------------- /config.json: -------------------------------------------------------------------------------- 1 | { 2 | "readme": true, 3 | "angular": true, 4 | "demos": [ 5 | "ng", 6 | "react", 7 | "svelte", 8 | "vue" 9 | ] 10 | } -------------------------------------------------------------------------------- /src/ui-persistent-bottomsheet/angular/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "dest": "../../../packages/ui-persistent-bottomsheet/angular", 3 | "lib": { 4 | "entryFile": "index.ts" 5 | }, 6 | "allowedNonPeerDependencies": [ 7 | "." 8 | ] 9 | } -------------------------------------------------------------------------------- /tsconfig.vue3.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "paths": { 6 | "nativescript-vue": ["./node_modules/nativescript-vue3"] 7 | } 8 | }, 9 | "include": [ 10 | "./demo-snippets/vue3" 11 | ] 12 | } -------------------------------------------------------------------------------- /demo-snippets/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@nativescript-community/template-snippet", 3 | "private": true, 4 | "version": "0.0.1", 5 | "dependencies": { 6 | "@nativescript-community/gesturehandler": "^2.0.8", 7 | "@nativescript-community/ui-persistent-bottomsheet": "0.0.24" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tools/tsconfig", 3 | "compilerOptions": { 4 | "paths": { 5 | "@nativescript-community/ui-persistent-bottomsheet": ["src/ui-persistent-bottomsheet"], 6 | "@nativescript-community/ui-persistent-bottomsheet/*": ["src/ui-persistent-bottomsheet/*"] 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | shamefully-hoist=true 2 | public-hoist-pattern[]=*eslint* 3 | public-hoist-pattern[]=source-map-support 4 | public-hoist-pattern[]=ts-patch 5 | public-hoist-pattern[]=typescript 6 | public-hoist-pattern[]=cpy-cli 7 | strict-peer-dependencies=false 8 | shell-emulator=true 9 | auto-install-peers=false 10 | loglevel=error 11 | engine-strict=true 12 | -------------------------------------------------------------------------------- /docs/assets/navigation.js: -------------------------------------------------------------------------------- 1 | window.navigationData = "eJx9zsFOwkAQgOF3mXNjY1ViekOpxItpBL0YQ4btYDcsu83OgBjDuxsSYlto5rSH+efb+fgFob1ADiVFtizk5SGIhM2sJhJIoEGpIQfjkJk4Hcyuatk4SGBtfQX5dXZ/SP7dTlbsyMsEBVvWeqG4QkOcDoV9OLsbdeAlmnUVQ/MYXIhlDA1F+WnlHUaLS0ecDoZ9+Sbrwu0hKnuZKegXsWwjFf64XGnucKnQ5fhlMS1m87fXYjEfT4fMs0TB2MTg3Lulb+3Gy0ojhZpnX9FeFc8jBZSInh2KDf5p683x1WglVz6xngWda8HVaZfT06i/PLo9fP4BT+AsFw==" -------------------------------------------------------------------------------- /src/ui-persistent-bottomsheet/vue/index.ts: -------------------------------------------------------------------------------- 1 | const PBSPlugin = { 2 | install(Vue) { 3 | Vue.registerElement('BottomSheet', () => require('../index').PersistentBottomSheet, { 4 | model: { 5 | prop: 'stepIndex', 6 | event: 'stepIndexChange', 7 | }, 8 | }); 9 | }, 10 | }; 11 | 12 | export default PBSPlugin; 13 | -------------------------------------------------------------------------------- /demo-snippets/react/install.ts: -------------------------------------------------------------------------------- 1 | import { Basic } from './Basic'; 2 | import { install } from '@nativescript-community/ui-persistent-bottomsheet'; 3 | import { registerDrawer } from '@nativescript-community/ui-persistent-bottomsheet/react'; 4 | 5 | export function installPlugin() { 6 | install(); 7 | registerDrawer(); 8 | } 9 | 10 | export const demos = [ 11 | { name: 'Basic', path: 'basic', component: Basic }, 12 | ]; 13 | -------------------------------------------------------------------------------- /demo-snippets/svelte/install.ts: -------------------------------------------------------------------------------- 1 | import BottomSheetElement from '@nativescript-community/ui-persistent-bottomsheet/svelte'; 2 | import { install } from '@nativescript-community/ui-persistent-bottomsheet'; 3 | 4 | import Basic from './Basic.svelte'; 5 | 6 | export function installPlugin() { 7 | BottomSheetElement.register(); 8 | install(); 9 | } 10 | 11 | export const demos = [{ name: 'Basic', path: 'basic', component: Basic }]; 12 | -------------------------------------------------------------------------------- /.settings/org.eclipse.buildship.core.prefs: -------------------------------------------------------------------------------- 1 | arguments= 2 | auto.sync=false 3 | build.scans.enabled=false 4 | connection.gradle.distribution=GRADLE_DISTRIBUTION(VERSION(6.3)) 5 | connection.project.dir= 6 | eclipse.preferences.version=1 7 | gradle.user.home= 8 | java.home=/Library/Java/JavaVirtualMachines/jdk1.8.0_141.jdk/Contents/Home 9 | jvm.arguments= 10 | offline.mode=false 11 | override.workspace.settings=true 12 | show.console.view=true 13 | show.executions.view=true 14 | -------------------------------------------------------------------------------- /demo-snippets/vue/install.ts: -------------------------------------------------------------------------------- 1 | import Vue from 'nativescript-vue'; 2 | 3 | import { install } from '@nativescript-community/ui-persistent-bottomsheet'; 4 | import BottomSheetPlugin from '@nativescript-community/ui-persistent-bottomsheet/vue'; 5 | 6 | import Basic from './Basic.vue'; 7 | 8 | export function installPlugin() { 9 | Vue.use(BottomSheetPlugin); 10 | install(); 11 | } 12 | 13 | export const demos = [{ name: 'Basic', path: 'basic', component: Basic }]; 14 | -------------------------------------------------------------------------------- /src/ui-persistent-bottomsheet/svelte/index.ts: -------------------------------------------------------------------------------- 1 | import { NativeViewElementNode, registerElement } from 'svelte-native/dom'; 2 | import { PersistentBottomSheet } from '../'; 3 | 4 | export default class PersistentBottomSheetElement extends NativeViewElementNode { 5 | constructor() { 6 | super('bottomsheet', PersistentBottomSheet); 7 | } 8 | 9 | static register() { 10 | registerElement('bottomsheet', () => new PersistentBottomSheetElement()); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /svelte.config.js: -------------------------------------------------------------------------------- 1 | const sveltePreprocess = require('svelte-preprocess'); 2 | // const svelteNativePreprocessor = require('svelte-native-preprocessor'); 3 | 4 | module.exports = { 5 | compilerOptions: { 6 | namespace: 'foreign' 7 | }, 8 | preprocess: [ 9 | sveltePreprocess({ 10 | typescript: { 11 | compilerOptions: { 12 | target: 'es2020' 13 | } 14 | } 15 | }) 16 | // svelteNativePreprocessor() 17 | ] 18 | }; 19 | -------------------------------------------------------------------------------- /demo-snippets/webpack.config.vue.js: -------------------------------------------------------------------------------- 1 | // needs to be the compiler of the node-modules of the demo app! 2 | const NsVueTemplateCompiler = require('../demo-vue/node_modules/nativescript-vue-template-compiler'); 3 | 4 | 5 | console.log('registering bottomsheet for vue compilier'); 6 | NsVueTemplateCompiler.registerElement('BottomSheet', () => require('@nativescript-community/ui-persistent-bottomsheet').PersistentBottomSheet, { 7 | model: { 8 | prop: 'stepIndex', 9 | event: 'stepIndexChange' 10 | } 11 | }); 12 | module.exports = (env) => {}; 13 | -------------------------------------------------------------------------------- /src/ui-persistent-bottomsheet/angular/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "./", 5 | "plugins": [], 6 | "paths": { 7 | "@nativescript-community/ui-persistent-bottomsheet": ["packages/ui-persistent-bottomsheet"], 8 | "@nativescript-community/ui-persistent-bottomsheet/*": ["packages/ui-persistent-bottomsheet/*"] 9 | 10 | } 11 | }, 12 | "include": ["./**/*.ts", "../../../references.d.ts", "../references.d.ts"], 13 | "exclude": ["../node_modules"] 14 | } 15 | -------------------------------------------------------------------------------- /demo-snippets/ng/install.module.ts: -------------------------------------------------------------------------------- 1 | import { NO_ERRORS_SCHEMA, NgModule } from '@angular/core'; 2 | 3 | import { BottomSheetModule } from '@nativescript-community/ui-persistent-bottomsheet/angular'; 4 | 5 | import { BasicComponent } from './basic/basic.component'; 6 | 7 | export const COMPONENTS = [BasicComponent]; 8 | @NgModule({ 9 | imports: [BottomSheetModule], 10 | exports: [BottomSheetModule], 11 | schemas: [NO_ERRORS_SCHEMA] 12 | }) 13 | export class InstallModule {} 14 | 15 | export function installPlugin() {} 16 | 17 | export const demos = [{ name: 'Basic', path: 'basic', component: BasicComponent }]; 18 | -------------------------------------------------------------------------------- /packages/ui-persistent-bottomsheet/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "../../src/ui-persistent-bottomsheet", 5 | "outDir": "./", 6 | "paths": { 7 | "tns-core-modules": ["./node_modules/@nativescript/core"], 8 | "tns-core-modules/*": ["./node_modules/@nativescript/core/*"] 9 | } 10 | }, 11 | "include": ["../../src/ui-persistent-bottomsheet/**/*", "../../references.d.ts", "../../tools/references.d.ts", "../../src/references.d.ts"], 12 | "exclude": ["../../src/ui-persistent-bottomsheet/angular/**"] 13 | } 14 | -------------------------------------------------------------------------------- /.gitmodules: -------------------------------------------------------------------------------- 1 | [submodule "tools"] 2 | path = tools 3 | url = https://github.com/nativescript-community/plugin-seed-tools.git 4 | [submodule "demo-vue"] 5 | path = demo-vue 6 | url = https://github.com/nativescript-community/plugin-seed-demo-vue.git 7 | [submodule "demo-ng"] 8 | path = demo-ng 9 | url = https://github.com/nativescript-community/plugin-seed-demo-ng.git 10 | [submodule "demo-svelte"] 11 | path = demo-svelte 12 | url = https://github.com/nativescript-community/plugin-seed-demo-svelte.git 13 | [submodule "demo-react"] 14 | path = demo-react 15 | url = https://github.com/nativescript-community/plugin-seed-demo-react.git 16 | -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.1.0", 3 | "$schema": "node_modules/@lerna-lite/cli/schemas/lerna-schema.json", 4 | "packages": [ 5 | "packages/*" 6 | ], 7 | "npmClient": "yarn", 8 | "useWorkspaces": true, 9 | "command": { 10 | "publish": { 11 | "cleanupTempFiles": true 12 | } 13 | }, 14 | "npmClientArgs": [ 15 | "--no-package-lock" 16 | ], 17 | "commitHooks": false, 18 | "createRelease": "github", 19 | "conventionalCommits": true, 20 | "private": false, 21 | "message": "chore(release): publish new version %v", 22 | "changelogPreset": "conventional-changelog-conventionalcommits", 23 | "ignoreChanges": [ 24 | "**/__fixtures__/**", 25 | "**/__tests__/**", 26 | "**/*.md" 27 | ] 28 | } 29 | -------------------------------------------------------------------------------- /demo-snippets/ng/basic/basic.component.scss: -------------------------------------------------------------------------------- 1 | ActionBar { 2 | background-color: #ed3e04; 3 | color: white; 4 | } 5 | 6 | .avatar { 7 | background-color: #ed3e04; 8 | border-radius: 40; 9 | height: 80; 10 | vertical-align: middle; 11 | } 12 | 13 | .avatar Label { 14 | vertical-align: middle; 15 | horizontal-align: center; 16 | font-size: 30; 17 | color: white; 18 | } 19 | 20 | .drawer .button { 21 | background-color: transparent; 22 | margin: 0; 23 | padding: 0; 24 | border-color: #ccc; 25 | z-index: 0; 26 | border-width: 0 0 0.5 0; 27 | color: #222222; 28 | text-align: left; 29 | padding-left: 25; 30 | height: 50; 31 | font-size: 14; 32 | } 33 | 34 | .drawer .button:highlighted { 35 | background-color: #eeeeee; 36 | color: #222222; 37 | } 38 | 39 | Button { 40 | background-color: #ed3e04; 41 | color: white; 42 | } 43 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # NativeScript 2 | hooks/ 3 | node_modules/ 4 | platforms 5 | 6 | # NativeScript Template 7 | *.js.map 8 | !ngcc.config.js 9 | !webpack.config.js 10 | 11 | # Logs 12 | logs 13 | *.log 14 | npm-debug.log* 15 | yarn-debug.log* 16 | yarn-error.log* 17 | 18 | # General 19 | .DS_Store 20 | .AppleDouble 21 | .LSOverride 22 | .idea 23 | .cloud 24 | .gradle 25 | .project 26 | .yarn 27 | .cxx 28 | tmp/ 29 | 30 | !.eslintrc.js 31 | !.prettierrc.js 32 | 33 | !e2e/*.js 34 | !detox.config.js 35 | devices.js 36 | 37 | *.framework 38 | *.xcframework 39 | **/*.js.map 40 | src/**/*.js 41 | packages/**/*.js 42 | packages/**/*.d.ts 43 | bin 44 | build 45 | Pods 46 | !packages/*/platforms 47 | /packages/**/*.aar 48 | /packages/**/*.framework 49 | /packages/**/*.xcframework 50 | /demo-snippets/**/*.aar 51 | *.xcuserdatad 52 | /packages/README.md 53 | packages/**/*js.map 54 | packages/**/*js 55 | packages/angular 56 | packages/typings 57 | packages/**/angular/*.json 58 | packages/**/*.ngsummary.json 59 | packages/**/*.metadata.json 60 | 61 | .vscode/settings.json 62 | 63 | /blueprint.md -------------------------------------------------------------------------------- /src/ui-persistent-bottomsheet/react/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { GridLayoutAttributes, NSVElement, NativeScriptProps, registerElement } from 'react-nativescript'; 3 | import { Color, View } from '@nativescript/core'; 4 | import { PersistentBottomSheet as NativeScriptBottomSheet } from '..'; 5 | import { PanGestureHandlerOptions } from '@nativescript-community/gesturehandler'; 6 | 7 | export function registerDrawer() { 8 | registerElement('bottomsheet', () => require('../').BottomSheet); 9 | } 10 | 11 | interface BottomSheetAttributes extends GridLayoutAttributes { 12 | stepIndex?: number; 13 | steps?: number[]; 14 | backdropColor?: Color | string; 15 | gestureEnabled?: boolean; 16 | bottomSheet?: View; 17 | scrollViewId?: string; 18 | panGestureOptions?: PanGestureHandlerOptions & { gestureId?: number }; 19 | onStepIndexChange?(args: any): void; 20 | 21 | } 22 | 23 | declare global { 24 | namespace JSX { 25 | interface IntrinsicElements { 26 | bottomsheet: NativeScriptProps; 27 | } 28 | } 29 | } 30 | 31 | export const BottomSheet = React.forwardRef, NativeScriptProps>((props, ref) => ( 32 | 33 | )); 34 | -------------------------------------------------------------------------------- /.github/issue_template.md: -------------------------------------------------------------------------------- 1 | ### Make sure to check the demo app(s) for sample usage 2 | 3 | ### Make sure to check the existing issues in this repository 4 | 5 | ### If the demo apps cannot help and there is no issue for your problem, tell us about it 6 | Please, ensure your title is less than 63 characters long and starts with a capital 7 | letter. 8 | 9 | ### Which platform(s) does your issue occur on? 10 | - iOS/Android/Both 11 | - iOS/Android versions 12 | - emulator or device. What type of device? 13 | 14 | ### Please, provide the following version numbers that your issue occurs with: 15 | 16 | - CLI: (run `tns --version` to fetch it) 17 | - Cross-platform modules: (check the 'version' attribute in the 18 | `node_modules/@nativescript/core/package.json` file in your project) 19 | - Runtime(s): (look for the `"tns-android"` and `"tns-ios"` properties in the `package.json` file of your project) 20 | - Plugin(s): (look for the version numbers in the `package.json` file of your 21 | project and paste your dependencies and devDependencies here) 22 | 23 | ### Please, tell us how to recreate the issue in as much detail as possible. 24 | Describe the steps to reproduce it. 25 | 26 | ### Is there any code involved? 27 | - provide a code example to recreate the problem 28 | - (EVEN BETTER) provide a .zip with application or refer to a repository with application where the problem is reproducible. 29 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [ 7 | { 8 | "name": "Launch on iOS", 9 | "type": "nativescript", 10 | "request": "launch", 11 | "platform": "ios", 12 | "appRoot": "${workspaceRoot}", 13 | "sourceMaps": true, 14 | "watch": true 15 | }, 16 | { 17 | "name": "Attach on iOS", 18 | "type": "nativescript", 19 | "request": "attach", 20 | "platform": "ios", 21 | "appRoot": "${workspaceRoot}", 22 | "sourceMaps": true, 23 | "watch": false 24 | }, 25 | { 26 | "name": "Launch on Android", 27 | "type": "nativescript", 28 | "request": "launch", 29 | "platform": "android", 30 | "appRoot": "${workspaceRoot}", 31 | "sourceMaps": true, 32 | "watch": true 33 | }, 34 | { 35 | "name": "Attach on Android", 36 | "type": "nativescript", 37 | "request": "attach", 38 | "platform": "android", 39 | "appRoot": "${workspaceRoot}", 40 | "sourceMaps": true, 41 | "watch": false 42 | } 43 | ] 44 | } -------------------------------------------------------------------------------- /demo-snippets/ng/basic/basic.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /docs/assets/search.js: -------------------------------------------------------------------------------- 1 | window.searchData = "eJytmd1u2zgQhd+FvVUTz8h2bN+13WzRi22LTbbAQggMVmISobIkSLTbwsi7LyjL0tCcGJRXd4bFczic+fgjai+q4mctVtFe/EjzRKzm00DkcqPESqR5rWWWiUBsq0ysxOM2j3Va5PV1++TqWW/M4ziTda1qsRLiJTgahdgZfX33ef3x9u7+n79v1/fvPnaGO1ml8num6uuTFmeNcTbvnN8XWhebu2el9O1O5foPqWVnn+ZaVY8yVvU11+5sJzDBPhHJtpJm4IOc3xAV6SIQpaxUrl8Lnk1gHVdFln1L1c+vVVGqSv9mcug28q3P9z6QM/5MK98OnlStt5W6zY1TcqYPvqFvN7VW5ac8Ub/OZem0jXeSZPwjqYryQ5EV1bk0ce18O9GVzOuswebPdrad6epM6/Nw46Kfm6qq01qrXBMcu75a+TXb6mwfM+hHFRd5rattrItqgPMbW8bPIT78V+bx94tG+OYgq1vZCHH0M/VTMiSQg26Xqp9pMlJGKKyDctIK41Y4RlaOM3NQSrQq01Y0QgylzD8elqAvZbPVDYmllHm7fhWdeISY7DVxSECtUnXKy6LBOcLUrtOgvBwFI+SCWfGGRELkj738wqxMpgtyVEp1C86g1BjdU6/rI9F18jat35ZVoVWsm+JdFln9XGyz5E7L6hjgoNI16tqonzr1SFHaVJHS/HthSX+PRTjx/Ev++vL4WA/bMIh+I38VR/1InH2WOt0ps3sMJS1vlLuDcoRokrQui1pdFlArHjsmmSTv271paEQySY7bmhPPiKT3u/9le/9oefrwnGaD9hOZJHGrGSGCdZGTVh+eze45KJx1kZOjWdwZjBBbXGzKrVb3/US23iy9Dq+NA1kKkoPDKCtUWt81PFxwKEjrA0r/91Rg7csyTzdSp/nTIJyIaFAMD4E4nPlWe7EzTYpcrARehVdLEYjHVGWJudI4BBeYYm6MXyCSIt42Px/aZt+UebswjQ+tryciiCZBCFc4WT48BNFR3Dxo/jh69P80QhBBBJwQHCFYQhRBhJwQHSFawlAEUcgJQ0cYWsKpCKIpJ5w6wqklnIkgmnHCmSOcWcK5CKI5J5w7wrklvBFBdMMJbxzhjSVciCBacMKFI1xYwqUIoiUnXDrCpQ2A4QFYdsCFB07oafDh+WEAsgkCwwWwDIELEdgUgWEDWI7ABQlsksDwASxL4MIENk1gGAGWJ3CBApsoMJwAyxS4UIFNFRhWgOUKXLDAJgsML8CyBS5cYNMFhhlg+QIXMLAJQ8MMsoShSxjahKFhBlnC0CUMT9aoZpHiVylmmbIJQ8MMsoShSxjahKFhBlnC0CUMbcLQMIMsYegShjZhaJhBljB0CUObMDTMIEsYuoShTRgaZpAlDF3C0CYMDTPIEoYuYWgTFhpmQpaw0CUstAkLDTMhS1joEhbahIWGmZAlLHQJa/9qzgE7VWmVHC6OzDb+yqlwL9btmQGXx2PLXuBSrPYvL/0ZYbV/IccE88x07LwZELc5cZv7urXHaGKzIDYLP5v++NT79HfJexGil8/JVV7vBdPeC6bDvcru5rr3JMP0G6V1+UpiI+MEz3H2Tsp8bjmcx0kJSAWGGnJDnfV+My+/114ZSHUnpLoTT1NyiU7yByR/4OXEvLCT5JHRot9w++9jZIBkfF4mp1ecZIQ3ZIQ3F5hxNSWT3W+u2xd8JF+kkuhXydMbHGJGJir6TdTu227vQiLyDOj0TZLUkeAV+uFVynzdZmqtpbWoUVZ9vU5v4okbKSL4VbHs3kNfW45I8sAve/RCh5SSUIt+1NpfhUhMZDKB32zqrTj4CWV+kHG3x2SopKzoV1fytYeMkyw94Lf0dD7cMEkFPAtw+L5BIiK7HPhtc+yXCeJIzizgd2ZhHLnREuPBvuRym5SVYId+2Nl3+MSKbskee/JDIMq0VFmaK7GKHl5e/gOZjrQk"; -------------------------------------------------------------------------------- /demo-snippets/ng/basic/basic.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, ElementRef, OnInit, ViewChild } from '@angular/core'; 2 | import { RouterExtensions } from '@nativescript/angular'; 3 | 4 | @Component({ 5 | selector: 'ns-basic', 6 | templateUrl: './basic.component.html', 7 | styleUrls: ['./basic.component.scss'] 8 | }) 9 | export class BasicComponent { 10 | constructor(private router: RouterExtensions) {} 11 | stepIndex = 0; 12 | items = [ 13 | { index: 0, name: 'TURQUOISE', color: '#1abc9c' }, 14 | { index: 1, name: 'EMERALD', color: '#2ecc71' }, 15 | { index: 2, name: 'PETER RIVER', color: '#3498db' }, 16 | { index: 3, name: 'AMETHYST', color: '#9b59b6' }, 17 | { index: 4, name: 'WET ASPHALT', color: '#34495e' }, 18 | { index: 5, name: 'GREEN SEA', color: '#16a085' }, 19 | { index: 6, name: 'NEPHRITIS', color: '#27ae60' }, 20 | { index: 7, name: 'BELIZE HOLE', color: '#2980b9' }, 21 | { index: 8, name: 'WISTERIA', color: '#8e44ad' }, 22 | { index: 9, name: 'MIDNIGHT BLUE', color: '#2c3e50' }, 23 | { index: 10, name: 'SUN FLOWER', color: '#f1c40f' }, 24 | { index: 11, name: 'CARROT', color: '#e67e22' }, 25 | { index: 12, name: 'ALIZARIN', color: '#e74c3c' }, 26 | { index: 13, name: 'CLOUDS', color: '#ecf0f1' }, 27 | { index: 14, name: 'CONCRETE', color: '#95a5a6' }, 28 | { index: 15, name: 'ORANGE', color: '#f39c12' }, 29 | { index: 16, name: 'PUMPKIN', color: '#d35400' }, 30 | { index: 17, name: 'POMEGRANATE', color: '#c0392b' }, 31 | { index: 18, name: 'SILVER', color: '#bdc3c7' }, 32 | { index: 19, name: 'ASBESTOS', color: '#7f8c8d' } 33 | ]; 34 | 35 | setIndex(index: number) { 36 | this.stepIndex = index; 37 | } 38 | 39 | onIndexChanged(event) { 40 | this.setIndex(event.value); 41 | } 42 | 43 | goBack(): void { 44 | this.router.back(); 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /packages/ui-persistent-bottomsheet/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@nativescript-community/ui-persistent-bottomsheet", 3 | "version": "0.1.0", 4 | "description": "NativeScript plugin that allows you to easily add a persistent bottomsheet to your projects.", 5 | "main": "./index", 6 | "sideEffects": false, 7 | "typings": "./index.d.ts", 8 | "scripts": { 9 | "build": "npm run tsc", 10 | "build.all": "npm run build && npm run build.angular", 11 | "build.angular": "ng-packagr -p ../../src/ui-persistent-bottomsheet/angular/ng-package.json -c ../../src/ui-persistent-bottomsheet/angular/tsconfig.json && rm angular/.npmignore", 12 | "readme": "readme generate -c ../../tools/readme/blueprint.json", 13 | "tsc": "cpy '**/*.d.ts' '../../packages/ui-persistent-bottomsheet' --parents --cwd=../../src/ui-persistent-bottomsheet && tsc -skipLibCheck -d", 14 | "clean": "rimraf ./*.d.ts ./*.js ./*.js.map" 15 | }, 16 | "nativescript": { 17 | "platforms": { 18 | "android": "6.0.0", 19 | "ios": "6.0.0" 20 | } 21 | }, 22 | "keywords": [ 23 | "NativeScript", 24 | "JavaScript", 25 | "Android", 26 | "iOS", 27 | "Bottomsheet", 28 | "persistent", 29 | "NativeScript UI", 30 | "menu", 31 | "nativescript-community", 32 | "Angular", 33 | "Vue", 34 | "Svelte", 35 | "React", 36 | "preview|https://raw.githubusercontent.com/nativescript-community/ui-persistent-bottomsheet/master/images/demo-ios.gif|iOS Demo", 37 | "preview|https://raw.githubusercontent.com/nativescript-community/ui-persistent-bottomsheet/master/images/demo-android.gif|Android Demo" 38 | ], 39 | "author": { 40 | "name": "Martin Guillon", 41 | "email": "martin@akylas.fr" 42 | }, 43 | "bugs": { 44 | "url": "https://github.com/nativescript-community/ui-persistent-bottomsheet/issues" 45 | }, 46 | "repository": { 47 | "type": "git", 48 | "url": "https://github.com/nativescript-community/ui-persistent-bottomsheet" 49 | }, 50 | "license": "Apache-2.0", 51 | "readmeFilename": "README.md", 52 | "dependencies": { 53 | "@nativescript-community/gesturehandler": "^2.0.8" 54 | }, 55 | "gitHead": "c0563a771fdc9586bbe620428bab25c4397104d5" 56 | } 57 | -------------------------------------------------------------------------------- /docs/assets/highlight.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --light-hl-0: #AF00DB; 3 | --dark-hl-0: #C586C0; 4 | --light-hl-1: #000000; 5 | --dark-hl-1: #D4D4D4; 6 | --light-hl-2: #001080; 7 | --dark-hl-2: #9CDCFE; 8 | --light-hl-3: #A31515; 9 | --dark-hl-3: #CE9178; 10 | --light-hl-4: #795E26; 11 | --dark-hl-4: #DCDCAA; 12 | --light-hl-5: #0070C1; 13 | --dark-hl-5: #4FC1FF; 14 | --light-hl-6: #0000FF; 15 | --dark-hl-6: #569CD6; 16 | --light-hl-7: #267F99; 17 | --dark-hl-7: #4EC9B0; 18 | --light-hl-8: #008000; 19 | --dark-hl-8: #6A9955; 20 | --light-hl-9: #000000; 21 | --dark-hl-9: #C8C8C8; 22 | --light-code-background: #FFFFFF; 23 | --dark-code-background: #1E1E1E; 24 | } 25 | 26 | @media (prefers-color-scheme: light) { :root { 27 | --hl-0: var(--light-hl-0); 28 | --hl-1: var(--light-hl-1); 29 | --hl-2: var(--light-hl-2); 30 | --hl-3: var(--light-hl-3); 31 | --hl-4: var(--light-hl-4); 32 | --hl-5: var(--light-hl-5); 33 | --hl-6: var(--light-hl-6); 34 | --hl-7: var(--light-hl-7); 35 | --hl-8: var(--light-hl-8); 36 | --hl-9: var(--light-hl-9); 37 | --code-background: var(--light-code-background); 38 | } } 39 | 40 | @media (prefers-color-scheme: dark) { :root { 41 | --hl-0: var(--dark-hl-0); 42 | --hl-1: var(--dark-hl-1); 43 | --hl-2: var(--dark-hl-2); 44 | --hl-3: var(--dark-hl-3); 45 | --hl-4: var(--dark-hl-4); 46 | --hl-5: var(--dark-hl-5); 47 | --hl-6: var(--dark-hl-6); 48 | --hl-7: var(--dark-hl-7); 49 | --hl-8: var(--dark-hl-8); 50 | --hl-9: var(--dark-hl-9); 51 | --code-background: var(--dark-code-background); 52 | } } 53 | 54 | :root[data-theme='light'] { 55 | --hl-0: var(--light-hl-0); 56 | --hl-1: var(--light-hl-1); 57 | --hl-2: var(--light-hl-2); 58 | --hl-3: var(--light-hl-3); 59 | --hl-4: var(--light-hl-4); 60 | --hl-5: var(--light-hl-5); 61 | --hl-6: var(--light-hl-6); 62 | --hl-7: var(--light-hl-7); 63 | --hl-8: var(--light-hl-8); 64 | --hl-9: var(--light-hl-9); 65 | --code-background: var(--light-code-background); 66 | } 67 | 68 | :root[data-theme='dark'] { 69 | --hl-0: var(--dark-hl-0); 70 | --hl-1: var(--dark-hl-1); 71 | --hl-2: var(--dark-hl-2); 72 | --hl-3: var(--dark-hl-3); 73 | --hl-4: var(--dark-hl-4); 74 | --hl-5: var(--dark-hl-5); 75 | --hl-6: var(--dark-hl-6); 76 | --hl-7: var(--dark-hl-7); 77 | --hl-8: var(--dark-hl-8); 78 | --hl-9: var(--dark-hl-9); 79 | --code-background: var(--dark-code-background); 80 | } 81 | 82 | .hl-0 { color: var(--hl-0); } 83 | .hl-1 { color: var(--hl-1); } 84 | .hl-2 { color: var(--hl-2); } 85 | .hl-3 { color: var(--hl-3); } 86 | .hl-4 { color: var(--hl-4); } 87 | .hl-5 { color: var(--hl-5); } 88 | .hl-6 { color: var(--hl-6); } 89 | .hl-7 { color: var(--hl-7); } 90 | .hl-8 { color: var(--hl-8); } 91 | .hl-9 { color: var(--hl-9); } 92 | pre, code { background: var(--code-background); } 93 | -------------------------------------------------------------------------------- /demo-snippets/svelte/Basic.svelte: -------------------------------------------------------------------------------- 1 | 27 | 28 | 29 | 30 | (stepIndex = e.value)} steps={[0, 56, 156, 456]} scrollViewId="scrollView" backdropColor="#88000000"> 31 | 32 |