nativescript-web-adapter 0.1.1 → 0.1.2

package/README.md

@@ -122,6 +122,86 @@ npm run dev:web
 - `GridLayout` → DOM `div` (`display:grid`; details below)
 - `ImageCacheIt` → DOM `img` (simple replacement; uses `img` with `stretch` support)
 
+## Newly Supported Components
+
+- `ActionItem` → DOM `div` inside `ActionBar`
+  - Renders slot content (e.g., a `Button`)
+  - Supports `ios.position="right"` to push the item to the right (`margin-left:auto`)
+
+- `ContentView` → DOM `div`
+  - A simple container that passes classes and styles through
+
+- `ListView` → DOM `div`
+  - Accepts `:items` (array) and renders the default slot for each item
+  - Supports `separatorColor` (e.g., `transparent` or `rgba(...)`)
+  - Minimal, performant rendering aimed at common list use cases
+
+## Custom CSS Usage
+
+- Built-in base classes are provided for web rendering in `dist/vue.css`.
+  - Optional import (recommended for consistent base styles):
+
+```ts
+// src/web/main.ts
+import 'nativescript-web-adapter/dist/vue.css';
+```
+
+- You can define your own classes in `src/app.css` and apply them to NS tags.
+  - Example list styling that pairs well with `ListView` and `GridLayout`:
+
+```css
+/* src/app.css */
+.list-container {}
+.list-item { display:grid; grid-template-columns:1fr auto; align-items:center; padding:12px 16px; border-bottom:1px solid rgba(255,255,255,0.12); }
+.list-item:hover { background:rgba(255,255,255,0.06); border-radius:12px; }
+.list-title { font-size:18px; color:#fff; }
+.list-dot { width:20px; height:20px; border-radius:9999px; background:#fff; }
+.back-button { padding:8px 12px; color:#fff; font-weight:600; border:2px solid #77c9fa; border-radius:12px; font-size:14px; background:linear-gradient(to bottom, #6544b7, #251353); }
+```
+
+- Example usage in a SFC:
+
+```vue
+<template>
+  <Page>
+    <ActionBar title="Details">
+      <!-- Web-only back button; native uses system back -->
+      <ActionItem>
+        <Button text="Back" class="back-button" @tap="goBack" />
+      </ActionItem>
+    </ActionBar>
+
+    <ListView :items="items" separatorColor="rgba(255,255,255,0.12)" class="list-container">
+      <template #default="{ item }">
+        <GridLayout columns="*, auto" class="list-item">
+          <Label :text="item" class="list-title" />
+          <ContentView col="1" class="list-dot" />
+        </GridLayout>
+      </template>
+    </ListView>
+  </Page>
+  </template>
+```
+
+## Extending the Adapter & Contributing
+
+### Add a New Component
+
+1. Create the component under `src/vue/components/YourComponent.ts` using `defineComponent` and map props/events to DOM.
+2. Register it in `src/vue/index.ts` under the plugin so it becomes available in Vue.
+3. Export its types in `src/vue/index.types.ts` to keep type parity.
+4. Add baseline styles in `src/vue/adapter.css` (class name convention: `.ns-your-component`).
+5. Build the adapter with `npm run build` and test in the demo project (`npm run dev:web`).
+
+### PR Guidelines
+
+- Keep implementations lightweight and focused on common use cases.
+- Preserve NativeScript semantics where reasonable; document any deviations.
+- Map events consistently (e.g., `tap` → `click`).
+- Include type exports, baseline CSS, and an example snippet in the docs.
+- Add or update tests where applicable (`tests/*`).
+- Keep code style consistent with existing files; avoid introducing heavy dependencies.
+
 ## GridLayout: Design & Behavior
 
 - Container styles

package/dist/index.cjs

@@ -10,14 +10,16 @@ const Label = vue.defineComponent({
     },
     emits: ['tap'],
     setup(props, { slots, attrs, emit }) {
-        var _a;
-        const style = {};
-        if (props.horizontalAlignment) {
-            const map = { center: 'center', left: 'left', right: 'right' };
-            style.textAlign = (_a = map[String(props.horizontalAlignment).toLowerCase()]) !== null && _a !== void 0 ? _a : undefined;
-        }
+        const { class: userClass, style: userStyle, ...rest } = (attrs || {});
+        const defaultClass = 'ns-label';
+        const defaultStyle = {};
         const onClick = (e) => emit('tap', { eventName: 'tap', object: e.currentTarget });
-        return () => vue.h('span', { style, onClick, ...attrs }, slots.default ? slots.default() : props.text);
+        return () => vue.h('span', {
+            onClick,
+            ...rest,
+            class: [defaultClass, userClass].filter(Boolean),
+            style: { ...defaultStyle, ...userStyle }
+        }, slots.default ? slots.default() : props.text);
     }
 });
 
@@ -29,19 +31,32 @@ const Button = vue.defineComponent({
     },
     emits: ['tap'],
     setup(props, { emit, slots, attrs }) {
-        var _a;
+        const { class: userClass, style: userStyle, ...rest } = (attrs || {});
+        const defaultClass = 'ns-button';
+        const defaultStyle = (() => {
+            const style = {};
+            if (props.horizontalAlignment === 'center') {
+                // Center within GridLayout and StackLayout (column flex)
+                style.justifySelf = 'center';
+                style.alignSelf = 'center';
+            }
+            else if (props.horizontalAlignment === 'right') {
+                style.justifySelf = 'end';
+                style.alignSelf = 'flex-end';
+            }
+            else if (props.horizontalAlignment === 'left') {
+                style.justifySelf = 'start';
+                style.alignSelf = 'flex-start';
+            }
+            return style;
+        })();
         const onClick = (e) => emit('tap', { eventName: 'tap', object: e.currentTarget });
-        const style = {};
-        if (props.horizontalAlignment) {
-            const map = {
-                center: 'center',
-                left: 'start',
-                right: 'end',
-                stretch: 'stretch'
-            };
-            style.justifySelf = (_a = map[String(props.horizontalAlignment).toLowerCase()]) !== null && _a !== void 0 ? _a : undefined;
-        }
-        return () => vue.h('button', { onClick, style, ...attrs }, slots.default ? slots.default() : props.text);
+        return () => vue.h('button', {
+            onClick,
+            ...rest,
+            class: [defaultClass, userClass].filter(Boolean),
+            style: { ...defaultStyle, ...userStyle }
+        }, slots.default ? slots.default() : props.text);
     }
 });
 
@@ -49,8 +64,19 @@ const StackLayout = vue.defineComponent({
     name: 'NSStackLayout',
     emits: ['tap'],
     setup(_, { slots, attrs, emit }) {
+        const { class: userClass, style: userStyle, ...rest } = (attrs || {});
+        const defaultClass = 'ns-stack-layout';
+        const defaultStyle = {};
         const onClick = (e) => emit('tap', { eventName: 'tap', object: e.currentTarget });
-        return () => { var _a; return vue.h('div', { style: { display: 'flex', flexDirection: 'column' }, onClick, ...attrs }, (_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots)); };
+        return () => {
+            var _a;
+            return vue.h('div', {
+                onClick,
+                ...rest,
+                class: [defaultClass, userClass].filter(Boolean),
+                style: { ...defaultStyle, ...userStyle }
+            }, (_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots));
+        };
     }
 });
 
@@ -63,22 +89,22 @@ const FlexboxLayout = vue.defineComponent({
     },
     emits: ['tap'],
     setup(props, { slots, attrs, emit }) {
+        const { class: userClass, style: userStyle, ...rest } = (attrs || {});
+        const defaultClass = 'ns-flexbox-layout';
+        const defaultStyle = {};
         const onClick = (e) => emit('tap', { eventName: 'tap', object: e.currentTarget });
-        return () => { var _a; return vue.h('div', { style: { display: 'flex', flexDirection: props.flexDirection, justifyContent: props.justifyContent, alignItems: props.alignItems }, onClick, ...attrs }, (_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots)); };
+        return () => {
+            var _a;
+            return vue.h('div', {
+                onClick,
+                ...rest,
+                class: [defaultClass, userClass].filter(Boolean),
+                style: { ...defaultStyle, ...userStyle }
+            }, (_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots));
+        };
     }
 });
 
-function parseTracks(tracks) {
-    if (!tracks)
-        return undefined;
-    return tracks.split(',').map(s => s.trim()).map(t => {
-        if (t === '*' || t === 'auto')
-            return t === '*' ? '1fr' : 'auto';
-        if (/^\d+$/.test(t))
-            return `${t}px`;
-        return t;
-    }).join(' ');
-}
 const GridLayout = vue.defineComponent({
     name: 'NSGridLayout',
     props: {
@@ -86,86 +112,19 @@ const GridLayout = vue.defineComponent({
         columns: { type: String, default: undefined }
     },
     emits: ['tap'],
-    setup(props, { slots, attrs, emit }) {
-        var _a, _b;
-        const containerStyle = {
-            display: 'grid',
-            // NS 默认一列：确保子项按行堆叠，而不是同一行多列并排
-            gridTemplateColumns: (_a = parseTracks(props.columns)) !== null && _a !== void 0 ? _a : '1fr',
-            // 行可选；若未指定，默认自适应内容
-            gridTemplateRows: (_b = parseTracks(props.rows)) !== null && _b !== void 0 ? _b : undefined,
-            // 以“按行”自动布局，默认逐行堆叠
-            gridAutoFlow: 'row',
-            width: '100%',
-            height: '100%'
-        };
-        const mapChild = (child) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-            if (!vue.isVNode(child))
-                return child;
-            const cprops = { ...(child.props || {}) };
-            const style = { ...(cprops.style || {}) };
-            // Row/Column placement: NativeScript uses 0-based indices; CSS Grid is 1-based
-            const row = (_a = cprops.row) !== null && _a !== void 0 ? _a : cprops['row'];
-            const col = (_c = (_b = cprops.col) !== null && _b !== void 0 ? _b : cprops['col']) !== null && _c !== void 0 ? _c : cprops.column;
-            if (row != null) {
-                const r = Number(row);
-                if (!isNaN(r))
-                    style.gridRowStart = r + 1;
-            }
-            if (col != null) {
-                const c = Number(col);
-                if (!isNaN(c))
-                    style.gridColumnStart = c + 1;
-            }
-            else {
-                // 未声明列时，强制放在第 1 列，避免隐式多列导致并排
-                style.gridColumnStart = 1;
-            }
-            // Horizontal alignment mapping
-            const ha = (_d = cprops.horizontalAlignment) !== null && _d !== void 0 ? _d : cprops['horizontalAlignment'];
-            if (ha) {
-                const map = {
-                    center: 'center',
-                    left: 'start',
-                    right: 'end',
-                    stretch: 'stretch'
-                };
-                style.justifySelf = (_e = map[String(ha).toLowerCase()]) !== null && _e !== void 0 ? _e : style.justifySelf;
-            }
-            // Vertical alignment mapping
-            const va = (_f = cprops.verticalAlignment) !== null && _f !== void 0 ? _f : cprops['verticalAlignment'];
-            if (va) {
-                const map = {
-                    center: 'center',
-                    top: 'start',
-                    bottom: 'end',
-                    stretch: 'stretch'
-                };
-                style.alignSelf = (_g = map[String(va).toLowerCase()]) !== null && _g !== void 0 ? _g : style.alignSelf;
-            }
-            // Row/Column span mapping
-            const rowSpan = (_h = cprops.rowSpan) !== null && _h !== void 0 ? _h : cprops['rowSpan'];
-            if (rowSpan != null) {
-                const rs = Number(rowSpan);
-                if (!isNaN(rs) && rs > 1)
-                    style.gridRowEnd = `span ${rs}`;
-            }
-            const colSpan = (_j = cprops.colSpan) !== null && _j !== void 0 ? _j : cprops['colSpan'];
-            if (colSpan != null) {
-                const cs = Number(colSpan);
-                if (!isNaN(cs) && cs > 1)
-                    style.gridColumnEnd = `span ${cs}`;
-            }
-            cprops.style = style;
-            return vue.h(child.type, cprops, child.children);
-        };
+    setup(_, { slots, attrs, emit }) {
+        const { class: userClass, style: userStyle, ...rest } = (attrs || {});
+        const defaultClass = 'ns-grid-layout';
+        const defaultStyle = {};
         const onClick = (e) => emit('tap', { eventName: 'tap', object: e.currentTarget });
         return () => {
-            var _a, _b;
-            const children = (_b = (_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots)) !== null && _b !== void 0 ? _b : [];
-            const mapped = children.map(mapChild);
-            return vue.h('div', { style: containerStyle, onClick, ...attrs }, mapped);
+            var _a;
+            return vue.h('div', {
+                onClick,
+                ...rest,
+                class: [defaultClass, userClass].filter(Boolean),
+                style: { ...defaultStyle, ...userStyle }
+            }, (_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots));
         };
     }
 });
@@ -174,15 +133,36 @@ const Page = vue.defineComponent({
     name: 'NSPage',
     emits: ['tap'],
     setup(_, { slots, attrs, emit }) {
+        const { class: userClass, style: userStyle, ...rest } = (attrs || {});
+        const defaultClass = 'ns-page';
+        const defaultStyle = {};
         const onClick = (e) => emit('tap', { eventName: 'tap', object: e.currentTarget });
-        return () => { var _a; return vue.h('main', { onClick, ...attrs }, (_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots)); };
+        return () => {
+            var _a;
+            return vue.h('main', {
+                onClick,
+                ...rest,
+                class: [defaultClass, userClass].filter(Boolean),
+                style: { ...defaultStyle, ...userStyle }
+            }, (_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots));
+        };
     }
 });
 
 const Frame = vue.defineComponent({
     name: 'NSFrame',
     setup(_, { slots, attrs }) {
-        return () => { var _a; return vue.h('div', { ...attrs }, (_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots)); };
+        const { class: userClass, style: userStyle, ...rest } = (attrs || {});
+        const defaultClass = 'ns-frame';
+        const defaultStyle = {};
+        return () => {
+            var _a;
+            return vue.h('div', {
+                ...rest,
+                class: [defaultClass, userClass].filter(Boolean),
+                style: { ...defaultStyle, ...userStyle }
+            }, (_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots));
+        };
     }
 });
 
@@ -190,8 +170,45 @@ const ActionBar = vue.defineComponent({
     name: 'NSActionBar',
     emits: ['tap'],
     setup(_, { slots, attrs, emit }) {
+        const { class: userClass, style: userStyle, ...rest } = (attrs || {});
+        const defaultClass = 'ns-action-bar';
+        const defaultStyle = {};
         const onClick = (e) => emit('tap', { eventName: 'tap', object: e.currentTarget });
-        return () => { var _a; return vue.h('header', { onClick, ...attrs }, (_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots)); };
+        return () => {
+            var _a;
+            return vue.h('header', {
+                onClick,
+                ...rest,
+                class: [defaultClass, userClass].filter(Boolean),
+                style: { ...defaultStyle, ...userStyle }
+            }, (_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots));
+        };
+    }
+});
+
+const ActionItem = vue.defineComponent({
+    name: 'NSActionItem',
+    props: {
+        iosPosition: { type: String, default: undefined }
+    },
+    setup(props, { slots, attrs }) {
+        var _a;
+        const { class: userClass, style: userStyle, ...rest } = (attrs || {});
+        // Support attribute `ios.position="right"` via attrs['ios.position']
+        const pos = (_a = attrs['ios.position']) !== null && _a !== void 0 ? _a : props.iosPosition;
+        const defaultClass = 'ns-action-item';
+        const defaultStyle = {};
+        if (pos === 'right') {
+            defaultStyle.marginLeft = 'auto';
+        }
+        return () => {
+            var _a;
+            return vue.h('div', {
+                ...rest,
+                class: [defaultClass, userClass].filter(Boolean),
+                style: { ...defaultStyle, ...userStyle }
+            }, (_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots));
+        };
     }
 });
 
@@ -202,14 +219,124 @@ const ImageCacheIt = vue.defineComponent({
         stretch: { type: String, default: 'aspectFill' }
     },
     setup(props, { attrs }) {
-        const style = { width: '100%', display: 'block', objectPosition: 'center' };
-        if (props.stretch === 'aspectFill') {
-            style.objectFit = 'cover';
-        }
-        else if (props.stretch === 'aspectFit') {
-            style.objectFit = 'contain';
-        }
-        return () => vue.h('img', { src: props.src, style, ...attrs });
+        var _a;
+        const { class: userClass, style: userStyle, ...rest } = (attrs || {});
+        const defaultClass = 'ns-image-cache-it';
+        const objectFitMap = {};
+        const defaultStyle = {
+            objectFit: (_a = objectFitMap[props.stretch]) !== null && _a !== void 0 ? _a : 'cover',
+            display: 'block'
+        };
+        return () => vue.h('img', {
+            ...rest,
+            src: props.src,
+            class: [defaultClass, userClass].filter(Boolean),
+            style: { ...defaultStyle, ...userStyle }
+        });
+    }
+});
+
+const ContentView = vue.defineComponent({
+    name: 'NSContentView',
+    setup(_, { slots, attrs }) {
+        const { class: userClass, style: userStyle, ...rest } = (attrs || {});
+        const defaultClass = 'ns-content-view';
+        const defaultStyle = {};
+        return () => {
+            var _a;
+            return vue.h('div', {
+                ...rest,
+                class: [defaultClass, userClass].filter(Boolean),
+                style: { ...defaultStyle, ...userStyle }
+            }, (_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots));
+        };
+    }
+});
+
+const ListView = vue.defineComponent({
+    name: 'NSListView',
+    props: {
+        items: { type: Array, default: () => [] },
+        separatorColor: { type: String, default: 'transparent' }
+    },
+    setup(props, { slots, attrs }) {
+        const { class: userClass, style: userStyle, ...rest } = (attrs || {});
+        const defaultClass = 'ns-list-view';
+        const defaultStyle = { overflow: 'auto' };
+        return () => vue.h('div', { ...rest, class: [defaultClass, userClass].filter(Boolean), style: { ...defaultStyle, ...userStyle } }, props.items.map((item, index) => vue.h('div', { class: 'ns-list-item', style: { borderBottom: `1px solid ${props.separatorColor}` } }, slots.default ? slots.default({ item, index }) : String(item))));
+    }
+});
+
+const TabView = vue.defineComponent({
+    name: 'NSTabView',
+    props: {
+        selectedIndex: { type: Number, default: 0 },
+        androidTabsPosition: { type: String, default: 'bottom' }
+    },
+    emits: ['selectedIndexChange'],
+    setup(props, { slots, emit, attrs }) {
+        var _a;
+        const { class: userClass, style: userStyle, ...rest } = (attrs || {});
+        const defaultClass = 'ns-tab-view';
+        const currentIndex = vue.ref((_a = props.selectedIndex) !== null && _a !== void 0 ? _a : 0);
+        vue.watch(() => props.selectedIndex, (val) => {
+            if (typeof val === 'number')
+                currentIndex.value = val;
+        });
+        const onSelect = (idx) => {
+            currentIndex.value = idx;
+            emit('selectedIndexChange', { value: idx, object: null });
+        };
+        return () => {
+            var _a, _b;
+            const children = (_b = (_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots)) !== null && _b !== void 0 ? _b : [];
+            const items = children.filter((v) => { var _a, _b; return ((_b = (_a = v === null || v === void 0 ? void 0 : v.type) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : '') === 'NSTabViewItem'; });
+            const useChildren = items.length ? items : children;
+            const barItems = useChildren.map((v) => {
+                var _a, _b, _c;
+                const p = v.props || {};
+                const title = (_a = p.title) !== null && _a !== void 0 ? _a : '';
+                const icon = (_c = (_b = p['android:iconSource']) !== null && _b !== void 0 ? _b : p.iconSource) !== null && _c !== void 0 ? _c : undefined;
+                return { title, icon };
+            });
+            const renderedContent = useChildren.map((v, idx) => {
+                var _a, _b;
+                return vue.cloneVNode(v, {
+                    class: ['ns-tab-view-item', (_a = v.props) === null || _a === void 0 ? void 0 : _a.class].filter(Boolean),
+                    style: { ...(((_b = v.props) === null || _b === void 0 ? void 0 : _b.style) || {}), display: idx === currentIndex.value ? '' : 'none' }
+                });
+            });
+            const tabBar = vue.h('nav', { class: 'ns-tab-bar' }, barItems.map((item, idx) => vue.h('button', {
+                class: ['ns-tab-bar-item', idx === currentIndex.value ? 'active' : ''].filter(Boolean),
+                onClick: () => onSelect(idx)
+            }, item.title || '•')));
+            return vue.h('div', {
+                ...rest,
+                class: [defaultClass, userClass].filter(Boolean),
+                style: { ...userStyle }
+            }, [vue.h('div', { class: 'ns-tab-content' }, renderedContent), props.androidTabsPosition === 'bottom' ? tabBar : null]);
+        };
+    }
+});
+
+const TabViewItem = vue.defineComponent({
+    name: 'NSTabViewItem',
+    props: {
+        title: { type: String, default: '' },
+        iconSource: { type: String, default: undefined }
+    },
+    setup(_, { slots, attrs }) {
+        const { class: userClass, style: userStyle, ...rest } = (attrs || {});
+        const defaultClass = 'ns-tab-view-item';
+        const defaultStyle = {};
+        return () => {
+            var _a;
+            return vue.h('div', {
+                ...rest,
+                class: [defaultClass, userClass].filter(Boolean),
+                style: { ...defaultStyle, ...userStyle }
+            }, (_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots));
+        };
     }
 });
 
@@ -223,18 +350,28 @@ const NativeScriptWebPlugin = {
         app.component('Page', Page);
         app.component('Frame', Frame);
         app.component('ActionBar', ActionBar);
+        app.component('ActionItem', ActionItem);
         app.component('ImageCacheIt', ImageCacheIt);
+        app.component('ContentView', ContentView);
+        app.component('ListView', ListView);
+        app.component('TabView', TabView);
+        app.component('TabViewItem', TabViewItem);
     }
 };
 
 exports.ActionBar = ActionBar;
+exports.ActionItem = ActionItem;
 exports.Button = Button;
+exports.ContentView = ContentView;
 exports.FlexboxLayout = FlexboxLayout;
 exports.Frame = Frame;
 exports.GridLayout = GridLayout;
 exports.ImageCacheIt = ImageCacheIt;
 exports.Label = Label;
+exports.ListView = ListView;
 exports.NativeScriptWebPlugin = NativeScriptWebPlugin;
 exports.Page = Page;
 exports.StackLayout = StackLayout;
+exports.TabView = TabView;
+exports.TabViewItem = TabViewItem;
 //# sourceMappingURL=index.cjs.map