nativescript-web-adapter 0.1.1 → 0.1.3

package/core/components/HtmlView.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="ns-htmlview" v-if="html" v-html="html"></div>
+  <div class="ns-htmlview" v-else><slot /></div>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'HtmlView' });
+const props = defineProps<{ html?: string }>();
+</script>
+
+<style scoped>
+.ns-htmlview { display: block; }
+</style>

package/core/components/Image.vue

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

package/core/components/ImageCacheIt.vue

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

package/core/components/Label.vue

@@ -0,0 +1,15 @@
+<template>
+  <span class="ns-label">
+    <slot v-if="!text" />
+    <template v-else>{{ text }}</template>
+  </span>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'Label' });
+const props = defineProps<{ text?: string }>();
+</script>
+
+<style scoped>
+.ns-label { display: inline-block; }
+</style>

package/core/components/ListPicker.vue

@@ -0,0 +1,21 @@
+<template>
+  <select class="ns-listpicker" :value="selectedIndex" @change="onChange">
+    <option v-for="(item, i) in items" :key="i" :value="i">{{ item }}</option>
+  </select>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'ListPicker' });
+const props = defineProps<{ items: string[]; selectedIndex?: number }>();
+const emit = defineEmits<{ (e: 'update:selectedIndex', v: number): void; (e: 'change', v: number): void }>();
+
+function onChange(e: Event) {
+  const v = Number((e.target as HTMLSelectElement).value);
+  emit('update:selectedIndex', v);
+  emit('change', v);
+}
+</script>
+
+<style scoped>
+.ns-listpicker { padding: 6px 8px; }
+</style>

package/core/components/ListView.vue

@@ -0,0 +1,12 @@
+<template>
+  <ul class="ns-listview"><slot /></ul>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'ListView' });
+</script>
+
+<style scoped>
+.ns-listview { list-style: none; margin: 0; padding: 0; }
+.ns-listview > li { padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,0.1); }
+</style>

package/core/components/NavigationButton.vue

@@ -0,0 +1,28 @@
+<template>
+  <button class="ns-navbutton" @click="onClick">
+    <slot>{{ text }}</slot>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { getCurrentInstance } from 'vue';
+const props = defineProps<{ text?: string }>();
+const emit = defineEmits<{ (e: 'tap', evt: MouseEvent): void }>();
+defineOptions({ name: 'NavigationButton' });
+
+function onClick(e: MouseEvent) {
+  emit('tap', e);
+  // 默认行为：若未监听 tap，则尝试返回上一页
+  const inst = getCurrentInstance();
+  const hasTapListener = !!(inst?.vnode?.props && (inst.vnode.props as any).onTap);
+  if (!hasTapListener) {
+    const router = (inst?.appContext?.config?.globalProperties as any)?.$router;
+    if (router?.go) router.go(-1);
+    else if (window?.history?.back) window.history.back();
+  }
+}
+</script>
+
+<style scoped>
+.ns-navbutton { background: transparent; border: none; color: inherit; cursor: pointer; padding: 8px; }
+</style>

package/core/components/Page.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="ns-page"><slot /></div>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'Page' });
+</script>
+
+<style scoped>
+.ns-page { 
+  top: 0;
+  left: 0;
+  position: absolute;
+  width: 100%;
+  min-height: 100%;
+  padding: 0px;
+}
+</style>

package/core/components/Placeholder.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="ns-placeholder"><slot /></div>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'Placeholder' });
+</script>
+
+<style scoped>
+.ns-placeholder { display: contents; }
+</style>

package/core/components/Progress.vue

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

package/core/components/RootLayout.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="ns-root"><slot /></div>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'RootLayout' });
+</script>
+
+<style scoped>
+.ns-root { position: relative; width: 100%; height: 100%; display: block; }
+</style>

package/core/components/ScrollView.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="ns-scroll"><slot /></div>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'ScrollView' });
+</script>
+
+<style scoped>
+.ns-scroll { overflow: auto; max-height: 100%; }
+</style>

package/core/components/SearchBar.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="ns-searchbar">
+    <input type="search" :value="text" @input="onInput" @keyup.enter="onSubmit" />
+  </div>
+  
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'SearchBar' });
+const props = 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);
+}
+</script>
+
+<style scoped>
+.ns-searchbar input { width: 100%; padding: 6px 8px; }
+</style>

package/core/components/SegmentedBar.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="ns-segmentedbar">
+    <div class="ns-segmentedbar-header">
+      <button
+        v-for="(t, i) in displayItems"
+        :key="i"
+        class="ns-segment"
+        :class="{ active: i === currentIndex }"
+        @click="select(i)"
+      >{{ t }}</button>
+    </div>
+    <div class="ns-segmentedbar-body">
+      <slot />
+    </div>
+  </div>
+  
+</template>
+
+<script setup lang="ts">
+import { ref, watch, computed, provide } from 'vue';
+defineOptions({ name: 'SegmentedBar' });
+const props = defineProps<{ items?: string[]; selectedIndex?: number }>();
+const emit = defineEmits<{ (e: 'update:selectedIndex', v: number): void; (e: 'change', v: number): void }>();
+
+// Selected index
+const currentIndex = ref(props.selectedIndex ?? 0);
+watch(() => props.selectedIndex, v => { if (typeof v === 'number') currentIndex.value = v; });
+function select(i: number) { currentIndex.value = i; emit('update:selectedIndex', i); emit('change', i); }
+
+// Child registration for SegmentedBarItem titles when using child components
+const registeredTitles = ref<string[]>([]);
+function register(title: string): number {
+  registeredTitles.value.push(title);
+  return registeredTitles.value.length - 1;
+}
+
+// Provide to children so they can register and know selectedIndex
+provide('ns-segmentedbar', { register, selectedIndex: currentIndex });
+
+// Items to display: prefer props.items if provided; else use registered child titles
+const displayItems = computed(() => (props.items && props.items.length ? props.items : registeredTitles.value));
+</script>
+
+<style scoped>
+.ns-segmentedbar { display: block; color: inherit; }
+.ns-segmentedbar-header { display: flex; gap: 8px; border-bottom: 1px solid rgba(255,255,255,0.3); padding-bottom: 8px; }
+.ns-segment { background: transparent; border: none; color: #fff; padding: 8px 12px; cursor: pointer; opacity: 0.95; }
+.ns-segment.active { opacity: 1; border-bottom: 2px solid currentColor; }
+.ns-segmentedbar-body { padding-top: 12px; }
+</style>

package/core/components/SegmentedBarItem.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="ns-segmentedbar-item" v-show="isActive"><slot /></div>
+  
+</template>
+
+<script setup lang="ts">
+import { inject, onMounted, ref, computed } from 'vue';
+defineOptions({ name: 'SegmentedBarItem' });
+const props = defineProps<{ title: string }>();
+const sb = inject<{ register: (t: string) => number; selectedIndex: any } | undefined>('ns-segmentedbar', undefined);
+const index = ref<number>(-1);
+onMounted(() => { index.value = sb ? sb.register(props.title) : -1; });
+const isActive = computed(() => {
+  if (!sb || index.value < 0) return true;
+  return sb.selectedIndex.value === index.value;
+});
+</script>
+
+<style scoped>
+.ns-segmentedbar-item { display: block; }
+</style>

package/core/components/Slider.vue

@@ -0,0 +1,18 @@
+<template>
+  <input class="ns-slider" type="range" :min="min" :max="max" :step="step" :value="value" @input="onInput" />
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'Slider' });
+const props = 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);
+  emit('update:value', v);
+  emit('change', v);
+}
+</script>
+
+<style scoped>
+.ns-slider { width: 100%; }
+</style>

package/core/components/StackLayout.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="ns-stack"><slot /></div>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'StackLayout' });
+</script>
+
+<style scoped>
+.ns-stack { display: flex; flex-direction: column; }
+</style>

package/core/components/Switch.vue

@@ -0,0 +1,26 @@
+<template>
+  <label class="ns-switch">
+    <input type="checkbox" :checked="checked" @change="onChange" />
+    <span class="track"><span class="thumb"></span></span>
+  </label>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'Switch' });
+const props = 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;
+  emit('update:checked', v);
+  emit('change', v);
+}
+</script>
+
+<style scoped>
+.ns-switch { display: inline-flex; align-items: center; cursor: pointer; }
+.ns-switch input { display: none; }
+.ns-switch .track { width: 40px; height: 22px; background: rgba(255,255,255,0.3); border-radius: 11px; position: relative; transition: background .2s; }
+.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>

package/core/components/TabView.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="ns-tabview">
+    <div class="ns-tabview-header">
+      <button
+        v-for="(title, i) in items"
+        :key="i"
+        class="ns-tabview-tab"
+        :class="{ active: i === currentIndex }"
+        @click="select(i)"
+      >{{ title }}</button>
+    </div>
+    <div class="ns-tabview-body">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, provide, watch } from 'vue';
+
+defineOptions({ name: 'TabView' });
+
+const props = defineProps<{ selectedIndex?: number }>();
+const currentIndex = ref(props.selectedIndex ?? 0);
+watch(() => props.selectedIndex, (v) => {
+  if (typeof v === 'number') currentIndex.value = v;
+});
+
+const items = ref<string[]>([]);
+function register(title: string) {
+  const idx = items.value.length;
+  items.value.push(title);
+  return idx;
+}
+function select(i: number) {
+  currentIndex.value = i;
+}
+
+provide('ns-tabview', { register, selectedIndex: currentIndex });
+</script>
+
+<style scoped>
+.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; }
+</style>

package/core/components/TabViewItem.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="ns-tabview-item" v-show="isActive">
+    <slot />
+  </div>
+  
+</template>
+
+<script setup lang="ts">
+import { inject, onMounted, ref, computed } from 'vue';
+
+defineOptions({ name: 'TabViewItem' });
+
+const props = defineProps<{ title: string }>();
+const tv = inject<{ register: (t: string) => number; selectedIndex: any } | undefined>('ns-tabview', undefined);
+const index = ref<number>(-1);
+onMounted(() => {
+  index.value = tv ? tv.register(props.title) : -1;
+});
+const isActive = computed(() => {
+  if (!tv || index.value < 0) return true;
+  return tv.selectedIndex.value === index.value;
+});
+</script>
+
+<style scoped>
+.ns-tabview-item { display: block; }
+</style>

package/core/components/TextField.vue

@@ -0,0 +1,15 @@
+<template>
+  <input class="ns-textfield" type="text" :value="text" @input="onInput" @keyup.enter="onSubmit" />
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'TextField' });
+const props = 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); }
+</script>
+
+<style scoped>
+.ns-textfield { width: 100%; padding: 6px 8px; }
+</style>

package/core/components/TextView.vue

@@ -0,0 +1,18 @@
+<template>
+  <textarea class="ns-textview" :value="text" @input="onInput"></textarea>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'TextView' });
+const props = 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;
+  emit('update:text', v);
+  emit('change', v);
+}
+</script>
+
+<style scoped>
+.ns-textview { width: 100%; min-height: 80px; padding: 6px 8px; }
+</style>

package/core/components/TimePicker.vue

@@ -0,0 +1,21 @@
+<template>
+  <input class="ns-timepicker" type="time" :value="valueStr" @input="onInput" />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+defineOptions({ name: 'TimePicker' });
+const props = defineProps<{ time?: string }>();
+const emit = defineEmits<{ (e: 'update:time', v: string): void; (e: 'change', v: string): void }>();
+
+const valueStr = computed(() => props.time ?? '');
+function onInput(e: Event) {
+  const v = (e.target as HTMLInputElement).value;
+  emit('update:time', v);
+  emit('change', v);
+}
+</script>
+
+<style scoped>
+.ns-timepicker { padding: 6px 8px; }
+</style>

package/core/components/WebView.vue

@@ -0,0 +1,13 @@
+<template>
+  <iframe class="ns-webview" :src="src" v-if="src"></iframe>
+  <div class="ns-webview" v-else><slot /></div>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'WebView' });
+const props = defineProps<{ src?: string }>();
+</script>
+
+<style scoped>
+.ns-webview { width: 100%; height: 100%; border: none; }
+</style>

package/core/components/WrapLayout.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="ns-wrap"><slot /></div>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'WrapLayout' });
+</script>
+
+<style scoped>
+.ns-wrap { display: flex; flex-wrap: wrap; }
+</style>

package/core/components/index.js

@@ -0,0 +1,3 @@
+export { default as ActionBar } from './ActionBar.vue';
+export { default as Page } from './Page.vue';
+export { default as Frame } from './Frame.vue';

package/core/components/index.ts

@@ -0,0 +1,35 @@
+export * from './ActionBar.vue';
+export * from './Page.vue';
+export * from './Frame.vue';
+export * from './StackLayout.vue';
+export * from './GridLayout.vue';
+export * from './FlexboxLayout.vue';
+export * from './WrapLayout.vue';
+export * from './ScrollView.vue';
+export * from './Label.vue';
+export * from './Button.vue';
+export * from './Image.vue';
+export * from './HtmlView.vue';
+export * from './ImageCacheIt.vue';
+export * from './TabView.vue';
+export * from './TabViewItem.vue';
+export * from './RootLayout.vue';
+export * from './DockLayout.vue';
+export * from './AbsoluteLayout.vue';
+export * from './ActionItem.vue';
+export * from './NavigationButton.vue';
+export * from './ActivityIndicator.vue';
+export * from './DatePicker.vue';
+export * from './TimePicker.vue';
+export * from './ListPicker.vue';
+export * from './ListView.vue';
+export * from './Placeholder.vue';
+export * from './Progress.vue';
+export * from './SearchBar.vue';
+export * from './SegmentedBar.vue';
+export * from './SegmentedBarItem.vue';
+export * from './Slider.vue';
+export * from './Switch.vue';
+export * from './TextField.vue';
+export * from './TextView.vue';
+export * from './WebView.vue';

package/core/composables/dialogs.ts

@@ -0,0 +1,31 @@
+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> {
+  let 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/core/composables/index.js

@@ -0,0 +1,3 @@
+export { useActionBar } from './useActionBar.js';
+export { usePage } from './usePage.js';
+export { useFrame } from './useFrame.js';

package/core/composables/index.ts

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

package/core/composables/useActionBar.js

@@ -0,0 +1,7 @@
+import { ref } from 'vue';
+
+export function useActionBar() {
+  const title = ref('');
+  function setTitle(t) { title.value = t; }
+  return { title, setTitle };
+}

package/core/composables/useActionBar.ts

@@ -0,0 +1,19 @@
+import { Ref, ref } from 'vue';
+
+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/core/composables/useFrame.js

@@ -0,0 +1,8 @@
+import { ref } from 'vue';
+
+export function useFrame() {
+  const stack = ref([]);
+  function push(page) { stack.value.push(page); }
+  function pop() { return stack.value.pop(); }
+  return { stack, push, pop };
+}