nativescript-web-adapter 0.1.2 → 0.1.3

package/core/components/FlexboxLayout.vue

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

package/core/components/Frame.vue

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

package/core/components/GridLayout.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="ns-grid" :style="gridStyle">
+    <template v-for="(child, idx) in renderedChildren" :key="idx">
+      <component :is="child" />
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, useSlots, cloneVNode } from 'vue';
+
+defineOptions({ name: 'GridLayout' });
+const props = defineProps<{ rows?: string; columns?: string }>();
+
+function parseSegments(input?: string): string | undefined {
+  if (!input) return undefined;
+  const segToCss = (s: string) => {
+    const t = s.trim();
+    if (!t) return 'auto';
+    if (t === '*') return '1fr';
+    const star = t.match(/^(\d+)\*$/);
+    if (star) return `${star[1]}fr`;
+    if (t.toLowerCase() === 'auto') return 'auto';
+    if (/^\d+$/.test(t)) return `${t}px`;
+    return t; // passthrough for e.g. '1fr' or '50px'
+  };
+  return input.split(',').map(segToCss).join(' ');
+}
+const gridStyle = computed<Record<string, string>>(() => {
+  const style: Record<string, string> = { display: 'grid' };
+  const rows = parseSegments(props.rows);
+  const cols = parseSegments(props.columns);
+  if (rows) style.gridTemplateRows = rows;
+  if (cols) style.gridTemplateColumns = cols;
+  return style;
+});
+
+// 根据子元素 row/col/rowSpan/colSpan 设置 CSS Grid 定位
+const slots = useSlots();
+const renderedChildren = computed(() => {
+  const nodes = slots.default ? slots.default() : [];
+  return nodes.map((node: any) => {
+    const props = (node && node.props) ? (node.props as Record<string, any>) : {};
+    const parseNum = (v: any) => v === undefined || v === null ? undefined : Number(v);
+    const row = parseNum(props.row);
+    const col = parseNum(props.col);
+    const rowSpan = parseNum(props.rowSpan);
+    const colSpan = parseNum(props.colSpan);
+
+    const style: Record<string, any> = {};
+    if (row !== undefined && !Number.isNaN(row)) {
+      const start = (row ?? 0) + 1; // CSS Grid 1-indexed
+      const span = rowSpan && rowSpan > 0 ? rowSpan : 1;
+      style.gridRow = `${start} / span ${span}`;
+    }
+    if (col !== undefined && !Number.isNaN(col)) {
+      const start = (col ?? 0) + 1; // CSS Grid 1-indexed
+      const span = colSpan && colSpan > 0 ? colSpan : 1;
+      style.gridColumn = `${start} / span ${span}`;
+    }
+
+    const existingStyle = props.style as any;
+    let mergedStyle: any;
+    if (Array.isArray(existingStyle)) mergedStyle = [...existingStyle, style];
+    else if (existingStyle && typeof existingStyle === 'object') mergedStyle = { ...existingStyle, ...style };
+    else if (typeof existingStyle === 'string') mergedStyle = [existingStyle, style];
+    else mergedStyle = style;
+
+    return cloneVNode(node, { style: mergedStyle });
+  });
+});
+</script>
+
+<style scoped>
+.ns-grid { 
+  padding: 0px;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  min-width: 0;
+  min-height: 0;
+  /* flex: 1 1 auto;
+  gap: 50px; */
+ }
+</style>

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';