nativescript-web-adapter 0.1.5 → 0.1.6

package/angular/components/tab-view.component.ts

@@ -0,0 +1,89 @@
+import { CommonModule } from '@angular/common';
+import {
+	AfterContentInit,
+	ChangeDetectionStrategy,
+	Component,
+	ContentChildren,
+	Input,
+	QueryList,
+} from '@angular/core';
+import { TabViewItemComponent } from './tab-view-item.component';
+
+@Component({
+	selector: 'TabView, tabview',
+	standalone: true,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [CommonModule],
+	template: `
+		<div class="ns-tabview">
+			<div class="ns-tabview-header">
+				<button
+					*ngFor="let title of items; let i = index"
+					class="ns-tabview-tab"
+					[class.active]="i === currentIndex"
+					(click)="select(i)"
+				>
+					{{ title }}
+				</button>
+			</div>
+			<div class="ns-tabview-body"><ng-content></ng-content></div>
+		</div>
+	`,
+	styles: [
+		`
+			.ns-tabview {
+				display: block;
+			}
+			.ns-tabview-header {
+				display: flex;
+				gap: 8px;
+				border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+				padding-bottom: 8px;
+			}
+			.ns-tabview-tab {
+				background: transparent;
+				border: none;
+				color: inherit;
+				padding: 8px 12px;
+				cursor: pointer;
+				opacity: 0.7;
+			}
+			.ns-tabview-tab.active {
+				opacity: 1;
+				border-bottom: 2px solid currentColor;
+			}
+			.ns-tabview-body {
+				padding-top: 12px;
+			}
+		`,
+	],
+})
+export class TabViewComponent implements AfterContentInit {
+	@Input() selectedIndex?: number;
+
+	@ContentChildren(TabViewItemComponent) private readonly contentItems?: QueryList<TabViewItemComponent>;
+
+	items: string[] = [];
+	currentIndex = 0;
+
+	ngAfterContentInit(): void {
+		this.currentIndex = typeof this.selectedIndex === 'number' ? this.selectedIndex : 0;
+		this.refreshItems();
+		this.contentItems?.changes.subscribe(() => this.refreshItems());
+	}
+
+	select(i: number) {
+		this.currentIndex = i;
+	}
+
+	isActive(item: TabViewItemComponent): boolean {
+		const list = this.contentItems?.toArray() ?? [];
+		const idx = list.indexOf(item);
+		if (idx < 0) return true;
+		return idx === this.currentIndex;
+	}
+
+	private refreshItems() {
+		this.items = (this.contentItems?.toArray() ?? []).map((it: TabViewItemComponent) => it.title);
+	}
+}

package/angular/components/text-field.component.ts

@@ -0,0 +1,38 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+	selector: 'TextField, textfield',
+	standalone: true,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	template: `
+		<input
+			class="ns-textfield"
+			type="text"
+			[value]="text ?? ''"
+			(input)="onInput($event)"
+			(keyup.enter)="onSubmit($event)"
+		/>
+	`,
+	styles: [
+		`
+			.ns-textfield {
+				width: 100%;
+				padding: 6px 8px;
+			}
+		`,
+	],
+})
+export class TextFieldComponent {
+	@Input() text?: string;
+	@Output() textChange = new EventEmitter<string>();
+	@Output() submit = new EventEmitter<string>();
+
+	onInput(e: Event) {
+		this.textChange.emit((e.target as HTMLInputElement).value);
+	}
+
+	onSubmit(e: KeyboardEvent) {
+		this.submit.emit((e.target as HTMLInputElement).value);
+	}
+}
+

package/angular/components/text-view.component.ts

@@ -0,0 +1,29 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+	selector: 'TextView, textview',
+	standalone: true,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	template: `<textarea class="ns-textview" [value]="text ?? ''" (input)="onInput($event)"></textarea>`,
+	styles: [
+		`
+			.ns-textview {
+				width: 100%;
+				min-height: 80px;
+				padding: 6px 8px;
+			}
+		`,
+	],
+})
+export class TextViewComponent {
+	@Input() text?: string;
+	@Output() textChange = new EventEmitter<string>();
+	@Output() change = new EventEmitter<string>();
+
+	onInput(e: Event) {
+		const v = (e.target as HTMLTextAreaElement).value;
+		this.textChange.emit(v);
+		this.change.emit(v);
+	}
+}
+

package/angular/components/time-picker.component.ts

@@ -0,0 +1,27 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+	selector: 'TimePicker, timepicker',
+	standalone: true,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	template: `<input class="ns-timepicker" type="time" [value]="time ?? ''" (input)="onInput($event)" />`,
+	styles: [
+		`
+			.ns-timepicker {
+				padding: 6px 8px;
+			}
+		`,
+	],
+})
+export class TimePickerComponent {
+	@Input() time?: string;
+	@Output() timeChange = new EventEmitter<string>();
+	@Output() change = new EventEmitter<string>();
+
+	onInput(e: Event) {
+		const v = (e.target as HTMLInputElement).value;
+		this.timeChange.emit(v);
+		this.change.emit(v);
+	}
+}
+

package/angular/components/web-view.component.ts

@@ -0,0 +1,25 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+@Component({
+	selector: 'WebView, webview',
+	standalone: true,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [CommonModule],
+	template: `
+		<iframe class="ns-webview" *ngIf="src; else projected" [src]="src"></iframe>
+		<ng-template #projected><div class="ns-webview"><ng-content></ng-content></div></ng-template>
+	`,
+	styles: [
+		`
+			.ns-webview {
+				width: 100%;
+				height: 100%;
+				border: none;
+			}
+		`,
+	],
+})
+export class WebViewComponent {
+	@Input() src?: string;
+}

package/angular/components/wrap-layout.component.ts

@@ -0,0 +1,17 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+	selector: 'WrapLayout, wraplayout',
+	standalone: true,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	template: `<div class="ns-wrap"><ng-content></ng-content></div>`,
+	styles: [
+		`
+			.ns-wrap {
+				display: flex;
+				flex-wrap: wrap;
+			}
+		`,
+	],
+})
+export class WrapLayoutComponent {}

package/angular/composables/dialogs.ts

@@ -0,0 +1,54 @@
+export async function alert(message: string, title?: string, _okButtonText?: string) {
+	window.alert(title ? `${title}\n\n${message}` : message);
+}
+
+export async function confirm(
+	message: string,
+	title?: string,
+	_okButtonText?: string,
+	_cancelButtonText?: string
+): Promise<boolean> {
+	return window.confirm(title ? `${title}\n\n${message}` : message);
+}
+
+export async function prompt(
+	message: string,
+	defaultText = '',
+	title?: string,
+	_okButtonText?: string,
+	_cancelButtonText?: string
+): Promise<{ result: boolean; text: string }> {
+	const res = window.prompt(title ? `${title}\n\n${message}` : message, defaultText);
+	return { result: res !== null, text: res ?? '' };
+}
+
+export async function login(
+	message = '登录',
+	userName = '',
+	password = '',
+	title?: string,
+	_okButtonText?: string,
+	_cancelButtonText?: string
+): Promise<{ result: boolean; userName: string; password: string }> {
+	const u = window.prompt(title ? `${title}\n\n${message} - 用户名` : `${message} - 用户名`, userName);
+	if (u === null) return { result: false, userName: '', password: '' };
+	const p = window.prompt(title ? `${title}\n\n${message} - 密码` : `${message} - 密码`, password);
+	if (p === null) return { result: false, userName: '', password: '' };
+	return { result: true, userName: u, password: p };
+}
+
+export async function action(
+	options: string | { message?: string; cancelButtonText?: string; actions?: string[] },
+	title?: string
+): Promise<string | undefined> {
+	const message = typeof options === 'string' ? options : options.message || '选择一个操作';
+	const actions = typeof options === 'string' ? [] : options.actions || [];
+	const promptText = title
+		? `${title}\n\n${message}${actions.length ? `\n选项: ${actions.join(', ')}` : ''}`
+		: `${message}${actions.length ? `\n选项: ${actions.join(', ')}` : ''}`;
+	const res = window.prompt(promptText);
+	if (!res) return undefined;
+	if (!actions.length) return res;
+	const match = actions.find((a) => a.toLowerCase() === res.toLowerCase());
+	return match ?? undefined;
+}

package/angular/composables/index.ts

@@ -0,0 +1,6 @@
+export * from './dialogs';
+export * from './ref';
+export * from './useActionBar';
+export * from './useFrame';
+export * from './usePage';
+

package/angular/composables/ref.ts

@@ -0,0 +1,8 @@
+export interface Ref<T> {
+	value: T;
+}
+
+export function ref<T>(value: T): Ref<T> {
+	return { value };
+}
+

package/angular/composables/useActionBar.ts

@@ -0,0 +1,20 @@
+import { ref, type Ref } from './ref';
+
+export interface ActionBarState {
+	title: Ref<string>;
+	setTitle: (value: string) => void;
+}
+
+export function useActionBar(): ActionBarState {
+	const title = ref('');
+
+	function setTitle(value: string) {
+		title.value = value;
+	}
+
+	return {
+		title,
+		setTitle,
+	};
+}
+

package/angular/composables/useFrame.ts

@@ -0,0 +1,26 @@
+import { ref, type Ref } from './ref';
+
+export interface FrameState {
+	stack: Ref<any[]>;
+	push: (page: any) => void;
+	pop: () => any;
+}
+
+export function useFrame(): FrameState {
+	const stack = ref<any[]>([]);
+
+	function push(page: any) {
+		stack.value.push(page);
+	}
+
+	function pop() {
+		return stack.value.pop();
+	}
+
+	return {
+		stack,
+		push,
+		pop,
+	};
+}
+

package/angular/composables/usePage.ts

@@ -0,0 +1,26 @@
+import { ref, type Ref } from './ref';
+
+export interface PageState {
+	isVisible: Ref<boolean>;
+	show: () => void;
+	hide: () => void;
+}
+
+export function usePage(): PageState {
+	const isVisible = ref(true);
+
+	function show() {
+		isVisible.value = true;
+	}
+
+	function hide() {
+		isVisible.value = false;
+	}
+
+	return {
+		isVisible,
+		show,
+		hide,
+	};
+}
+

package/angular/index.ts

@@ -0,0 +1,8 @@
+import * as composablesNS from './composables';
+import { components, imports } from './components';
+
+export const composables = composablesNS;
+export { components, imports };
+export * from './composables';
+export * from './components';
+

package/core/components/Button.vue

@@ -6,7 +6,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 defineOptions({ name: 'Button' });
-const emit = defineEmits<{ (e: 'tap', evt: MouseEvent): void }>();
+defineEmits<{ (e: 'tap', evt: MouseEvent): void }>();
 const props = defineProps<{ horizontalAlignment?: string }>();
 
 const btnStyle = computed<Record<string, string>>(() => {
@@ -38,4 +38,4 @@ const btnStyle = computed<Record<string, string>>(() => {
 
 <style scoped>
 .ns-button { cursor: pointer; }
-</style>
+</style>

package/core/components/GridLayout.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="ns-grid" :style="gridStyle">
-    <template v-for="(child, idx) in renderedChildren" :key="idx">
+    <template v-for="child in renderedChildren" :key="(child as any)?.key ?? child">
       <component :is="child" />
     </template>
   </div>
@@ -82,4 +82,4 @@ const renderedChildren = computed(() => {
   /* flex: 1 1 auto;
   gap: 50px; */
  }
-</style>
+</style>

package/core/components/HtmlView.vue

@@ -5,9 +5,9 @@
 
 <script setup lang="ts">
 defineOptions({ name: 'HtmlView' });
-const props = defineProps<{ html?: string }>();
+defineProps<{ html?: string }>();
 </script>
 
 <style scoped>
 .ns-htmlview { display: block; }
-</style>
+</style>

package/core/components/Image.vue

@@ -4,9 +4,9 @@
 
 <script setup lang="ts">
 defineOptions({ name: 'Image' });
-const props = defineProps<{ src: string; stretch?: string }>();
+defineProps<{ src: string; stretch?: string }>();
 </script>
 
 <style scoped>
 .ns-image { display: block; max-width: 100%; height: auto; }
-</style>
+</style>

package/core/components/ImageCacheIt.vue

@@ -4,9 +4,9 @@
 
 <script setup lang="ts">
 defineOptions({ name: 'ImageCacheIt' });
-const props = defineProps<{ src: string }>();
+defineProps<{ src: string }>();
 </script>
 
 <style scoped>
 .ns-imagecacheit { display: block; max-width: 100%; height: auto; }
-</style>
+</style>

package/core/components/Label.vue

@@ -7,9 +7,9 @@
 
 <script setup lang="ts">
 defineOptions({ name: 'Label' });
-const props = defineProps<{ text?: string }>();
+defineProps<{ text?: string }>();
 </script>
 
 <style scoped>
 .ns-label { display: inline-block; }
-</style>
+</style>

package/core/components/ListPicker.vue

@@ -6,7 +6,7 @@
 
 <script setup lang="ts">
 defineOptions({ name: 'ListPicker' });
-const props = defineProps<{ items: string[]; selectedIndex?: number }>();
+defineProps<{ items: string[]; selectedIndex?: number }>();
 const emit = defineEmits<{ (e: 'update:selectedIndex', v: number): void; (e: 'change', v: number): void }>();
 
 function onChange(e: Event) {
@@ -18,4 +18,4 @@ function onChange(e: Event) {
 
 <style scoped>
 .ns-listpicker { padding: 6px 8px; }
-</style>
+</style>

package/core/components/NavigationButton.vue

@@ -6,7 +6,7 @@
 
 <script setup lang="ts">
 import { getCurrentInstance } from 'vue';
-const props = defineProps<{ text?: string }>();
+defineProps<{ text?: string }>();
 const emit = defineEmits<{ (e: 'tap', evt: MouseEvent): void }>();
 defineOptions({ name: 'NavigationButton' });
 
@@ -25,4 +25,4 @@ function onClick(e: MouseEvent) {
 
 <style scoped>
 .ns-navbutton { background: transparent; border: none; color: inherit; cursor: pointer; padding: 8px; }
-</style>
+</style>

package/core/components/Progress.vue

@@ -4,9 +4,9 @@
 
 <script setup lang="ts">
 defineOptions({ name: 'Progress' });
-const props = defineProps<{ value?: number; max?: number }>();
+defineProps<{ value?: number; max?: number }>();
 </script>
 
 <style scoped>
 .ns-progress { width: 100%; }
-</style>
+</style>

package/core/components/SearchBar.vue

@@ -7,7 +7,7 @@
 
 <script setup lang="ts">
 defineOptions({ name: 'SearchBar' });
-const props = defineProps<{ text?: string }>();
+defineProps<{ text?: string }>();
 const emit = defineEmits<{ (e: 'update:text', v: string): void; (e: 'submit', v: string): void }>();
 function onInput(e: Event) {
   emit('update:text', (e.target as HTMLInputElement).value);
@@ -19,4 +19,4 @@ function onSubmit(e: KeyboardEvent) {
 
 <style scoped>
 .ns-searchbar input { width: 100%; padding: 6px 8px; }
-</style>
+</style>

package/core/components/Slider.vue

@@ -4,7 +4,7 @@
 
 <script setup lang="ts">
 defineOptions({ name: 'Slider' });
-const props = defineProps<{ value?: number; min?: number; max?: number; step?: number }>();
+defineProps<{ value?: number; min?: number; max?: number; step?: number }>();
 const emit = defineEmits<{ (e: 'update:value', v: number): void; (e: 'change', v: number): void }>();
 function onInput(e: Event) {
   const v = Number((e.target as HTMLInputElement).value);
@@ -15,4 +15,4 @@ function onInput(e: Event) {
 
 <style scoped>
 .ns-slider { width: 100%; }
-</style>
+</style>

package/core/components/Switch.vue

@@ -7,7 +7,7 @@
 
 <script setup lang="ts">
 defineOptions({ name: 'Switch' });
-const props = defineProps<{ checked?: boolean }>();
+defineProps<{ checked?: boolean }>();
 const emit = defineEmits<{ (e: 'update:checked', v: boolean): void; (e: 'change', v: boolean): void }>();
 function onChange(e: Event) {
   const v = (e.target as HTMLInputElement).checked;
@@ -23,4 +23,4 @@ function onChange(e: Event) {
 .ns-switch .thumb { width: 18px; height: 18px; background: rgb(0, 255, 174); border-radius: 50%; position: absolute; top: 2px; left: 2px; transition: left .2s; }
 .ns-switch input:checked + .track { background: currentColor; opacity: .5; }
 .ns-switch input:checked + .track .thumb { left: 20px; }
-</style>
+</style>

package/core/components/TextField.vue

@@ -4,7 +4,7 @@
 
 <script setup lang="ts">
 defineOptions({ name: 'TextField' });
-const props = defineProps<{ text?: string }>();
+defineProps<{ text?: string }>();
 const emit = defineEmits<{ (e: 'update:text', v: string): void; (e: 'submit', v: string): void }>();
 function onInput(e: Event) { emit('update:text', (e.target as HTMLInputElement).value); }
 function onSubmit(e: KeyboardEvent) { emit('submit', (e.target as HTMLInputElement).value); }
@@ -12,4 +12,4 @@ function onSubmit(e: KeyboardEvent) { emit('submit', (e.target as HTMLInputEleme
 
 <style scoped>
 .ns-textfield { width: 100%; padding: 6px 8px; }
-</style>
+</style>

package/core/components/TextView.vue

@@ -4,7 +4,7 @@
 
 <script setup lang="ts">
 defineOptions({ name: 'TextView' });
-const props = defineProps<{ text?: string }>();
+defineProps<{ text?: string }>();
 const emit = defineEmits<{ (e: 'update:text', v: string): void; (e: 'change', v: string): void }>();
 function onInput(e: Event) {
   const v = (e.target as HTMLTextAreaElement).value;
@@ -15,4 +15,4 @@ function onInput(e: Event) {
 
 <style scoped>
 .ns-textview { width: 100%; min-height: 80px; padding: 6px 8px; }
-</style>
+</style>

package/core/components/WebView.vue

@@ -5,9 +5,9 @@
 
 <script setup lang="ts">
 defineOptions({ name: 'WebView' });
-const props = defineProps<{ src?: string }>();
+defineProps<{ src?: string }>();
 </script>
 
 <style scoped>
 .ns-webview { width: 100%; height: 100%; border: none; }
-</style>
+</style>

package/core/composables/dialogs.ts

@@ -1,17 +1,17 @@
-export async function alert(message: string, title?: string, okButtonText?: string) {
+export async function alert(message: string, title?: string, _okButtonText?: string) {
   window.alert(title ? `${title}\n\n${message}` : message);
 }
 
-export async function confirm(message: string, title?: string, okButtonText?: string, cancelButtonText?: string): Promise<boolean> {
+export async function confirm(message: string, title?: string, _okButtonText?: string, _cancelButtonText?: string): Promise<boolean> {
   return window.confirm(title ? `${title}\n\n${message}` : message);
 }
 
-export async function prompt(message: string, defaultText = '', title?: string, okButtonText?: string, cancelButtonText?: string): Promise<{ result: boolean; text: string }> {
+export async function prompt(message: string, defaultText = '', title?: string, _okButtonText?: string, _cancelButtonText?: string): Promise<{ result: boolean; text: string }> {
   const res = window.prompt(title ? `${title}\n\n${message}` : message, defaultText);
   return { result: res !== null, text: res ?? '' };
 }
 
-export async function login(message = '登录', userName = '', password = '', title?: string, okButtonText?: string, cancelButtonText?: string): Promise<{ result: boolean; userName: string; password: string }> {
+export async function login(message = '登录', userName = '', password = '', title?: string, _okButtonText?: string, _cancelButtonText?: string): Promise<{ result: boolean; userName: string; password: string }> {
   const u = window.prompt(title ? `${title}\n\n${message} - 用户名` : `${message} - 用户名`, userName);
   if (u === null) return { result: false, userName: '', password: '' };
   const p = window.prompt(title ? `${title}\n\n${message} - 密码` : `${message} - 密码`, password);
@@ -28,4 +28,4 @@ export async function action(options: string | { message?: string; cancelButtonT
   if (!actions.length) return res;
   const match = actions.find(a => a.toLowerCase() === res.toLowerCase());
   return match ?? undefined;
-}
+}