@lynx-js/web-elements 0.9.0 → 0.10.0

package/elements.css

@@ -0,0 +1,18 @@
+/* Copyright 2024 The Lynx Authors. All rights reserved.
+ Licensed under the Apache License Version 2.0 that can be found in the
+ LICENSE file in the root directory of this source tree. 
+ */
+@import url("./src/elements/LynxWrapper/lynx-wrapper.css");
+@import url("./src/elements/XText/x-text.css");
+@import url("./src/elements/ScrollView/scroll-view.css");
+@import url("./src/elements/XFoldViewNg/x-foldview-ng.css");
+@import url("./src/elements/XViewpagerNg/x-viewpager-ng.css");
+@import url("./src/elements/XCanvas/x-canvas.css");
+@import url("./src/elements/XSvg/x-svg.css");
+@import url("./src/elements/XImage/x-image.css");
+@import url("./src/elements/XInput/x-input.css");
+@import url("./src/elements/XOverlayNg/x-overlay-ng.css");
+@import url("./src/elements/XRefreshView/x-refresh-view.css");
+@import url("./src/elements/XSwiper/x-swiper.css");
+@import url("./src/elements/XTextarea/x-textarea.css");
+@import url("./src/elements/XList/x-list.css");

package/index.css

@@ -2,18 +2,5 @@
  Licensed under the Apache License Version 2.0 that can be found in the
  LICENSE file in the root directory of this source tree. 
  */
-@import url("./src/common-css/linear.css");
-@import url("./src/LynxWrapper/lynx-wrapper.css");
-@import url("./src/XText/x-text.css");
-@import url("./src/ScrollView/scroll-view.css");
-@import url("./src/XFoldViewNg/x-foldview-ng.css");
-@import url("./src/XViewpagerNg/x-viewpager-ng.css");
-@import url("./src/XCanvas/x-canvas.css");
-@import url("./src/XSvg/x-svg.css");
-@import url("./src/XImage/x-image.css");
-@import url("./src/XInput/x-input.css");
-@import url("./src/XOverlayNg/x-overlay-ng.css");
-@import url("./src/XRefreshView/x-refresh-view.css");
-@import url("./src/XSwiper/x-swiper.css");
-@import url("./src/XTextarea/x-textarea.css");
-@import url("./src/XList/x-list.css");
+@import url("./src/elements/common-css/linear.css");
+@import url("./elements.css");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/web-elements",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "private": false,
   "repository": {
     "type": "git",
@@ -12,79 +12,112 @@
   "type": "module",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
+      "types": "./dist/elements/index.d.ts",
+      "default": "./dist/elements/index.js"
     },
     "./index.css": {
       "default": "./index.css"
     },
+    "./elements.css": {
+      "default": "./elements.css"
+    },
     "./all": {
-      "types": "./dist/all.d.ts",
-      "default": "./dist/all.js"
+      "source": "./src/elements/all.ts",
+      "types": "./dist/elements/all.d.ts",
+      "default": "./dist/elements/all.js"
     },
     "./LynxWrapper": {
-      "types": "./dist/LynxWrapper/index.d.ts",
-      "default": "./dist/LynxWrapper/index.js"
+      "source": "./src/elements/LynxWrapper/index.ts",
+      "types": "./dist/elements/LynxWrapper/index.d.ts",
+      "default": "./dist/elements/LynxWrapper/index.js"
     },
     "./ScrollView": {
-      "types": "./dist/ScrollView/index.d.ts",
-      "default": "./dist/ScrollView/index.js"
+      "source": "./src/elements/ScrollView/index.ts",
+      "types": "./dist/elements/ScrollView/index.d.ts",
+      "default": "./dist/elements/ScrollView/index.js"
     },
     "./XAudioTT": {
-      "types": "./dist/XAudioTT/index.d.ts",
-      "default": "./dist/XAudioTT/index.js"
+      "source": "./src/elements/XAudioTT/index.ts",
+      "types": "./dist/elements/XAudioTT/index.d.ts",
+      "default": "./dist/elements/XAudioTT/index.js"
     },
     "./XCanvas": {
-      "types": "./dist/XCanvas/index.d.ts",
-      "default": "./dist/XCanvas/index.js"
+      "source": "./src/elements/XCanvas/index.ts",
+      "types": "./dist/elements/XCanvas/index.d.ts",
+      "default": "./dist/elements/XCanvas/index.js"
     },
     "./XFoldViewNg": {
-      "types": "./dist/XFoldViewNg/index.d.ts",
-      "default": "./dist/XFoldViewNg/index.js"
+      "source": "./src/elements/XFoldViewNg/index.ts",
+      "types": "./dist/elements/XFoldViewNg/index.d.ts",
+      "default": "./dist/elements/XFoldViewNg/index.js"
     },
     "./XImage": {
-      "types": "./dist/XImage/index.d.ts",
-      "default": "./dist/XImage/index.js"
+      "source": "./src/elements/XImage/index.ts",
+      "types": "./dist/elements/XImage/index.d.ts",
+      "default": "./dist/elements/XImage/index.js"
     },
     "./XInput": {
-      "types": "./dist/XInput/index.d.ts",
-      "default": "./dist/XInput/index.js"
+      "source": "./src/elements/XInput/index.ts",
+      "types": "./dist/elements/XInput/index.d.ts",
+      "default": "./dist/elements/XInput/index.js"
     },
     "./XOverlayNg": {
-      "types": "./dist/XOverlayNg/index.d.ts",
-      "default": "./dist/XOverlayNg/index.js"
+      "source": "./src/elements/XOverlayNg/index.ts",
+      "types": "./dist/elements/XOverlayNg/index.d.ts",
+      "default": "./dist/elements/XOverlayNg/index.js"
     },
     "./XRefreshView": {
-      "types": "./dist/XRefreshView/index.d.ts",
-      "default": "./dist/XRefreshView/index.js"
+      "source": "./src/elements/XRefreshView/index.ts",
+      "types": "./dist/elements/XRefreshView/index.d.ts",
+      "default": "./dist/elements/XRefreshView/index.js"
     },
     "./XSvg": {
-      "types": "./dist/XSvg/index.d.ts",
-      "default": "./dist/XSvg/index.js"
+      "source": "./src/elements/XSvg/index.ts",
+      "types": "./dist/elements/XSvg/index.d.ts",
+      "default": "./dist/elements/XSvg/index.js"
     },
     "./XSwiper": {
-      "types": "./dist/XSwiper/index.d.ts",
-      "default": "./dist/XSwiper/index.js"
+      "source": "./src/elements/XSwiper/index.ts",
+      "types": "./dist/elements/XSwiper/index.d.ts",
+      "default": "./dist/elements/XSwiper/index.js"
     },
     "./XText": {
-      "types": "./dist/XText/index.d.ts",
-      "default": "./dist/XText/index.js"
+      "source": "./src/elements/XText/index.ts",
+      "types": "./dist/elements/XText/index.d.ts",
+      "default": "./dist/elements/XText/index.js"
     },
     "./XTextarea": {
-      "types": "./dist/XTextarea/index.d.ts",
-      "default": "./dist/XTextarea/index.js"
+      "source": "./src/elements/XTextarea/index.ts",
+      "types": "./dist/elements/XTextarea/index.d.ts",
+      "default": "./dist/elements/XTextarea/index.js"
     },
     "./XView": {
-      "types": "./dist/XView/index.d.ts",
-      "default": "./dist/XView/index.js"
+      "source": "./src/elements/XView/index.ts",
+      "types": "./dist/elements/XView/index.d.ts",
+      "default": "./dist/elements/XView/index.js"
     },
     "./XViewpagerNg": {
-      "types": "./dist/XViewpagerNg/index.d.ts",
-      "default": "./dist/XViewpagerNg/index.js"
+      "source": "./src/elements/XViewpagerNg/index.ts",
+      "types": "./dist/elements/XViewpagerNg/index.d.ts",
+      "default": "./dist/elements/XViewpagerNg/index.js"
     },
     "./XList": {
-      "types": "./dist/XList/index.d.ts",
-      "default": "./dist/XList/index.js"
+      "source": "./src/elements/XList/index.ts",
+      "types": "./dist/elements/XList/index.d.ts",
+      "default": "./dist/elements/XList/index.js"
+    },
+    "./html-templates": {
+      "source": "./src/elements/htmlTemplates.ts",
+      "types": "./dist/elements/htmlTemplates.d.ts",
+      "default": "./dist/elements/htmlTemplates.js"
+    },
+    "./compat/LinearContainer": {
+      "source": "./src/compat/LinearContainer/LinearContainer.ts",
+      "types": "./dist/compat/LinearContainer/LinearContainer.d.ts",
+      "default": "./dist/compat/LinearContainer/LinearContainer.js"
+    },
+    "./compat/LinearContainer/linear-compat.css": {
+      "default": "./src/compat/LinearContainer/linear-compat.css"
     }
   },
   "main": "dist/index.js",
@@ -99,14 +132,23 @@
     "index.css",
     "**/*.css"
   ],
-  "dependencies": {
-    "@lynx-js/web-elements-reactive": "0.2.2",
-    "@lynx-js/web-elements-template": "0.9.0"
-  },
   "devDependencies": {
-    "tslib": "^2.8.1"
+    "@playwright/test": "^1.57.0",
+    "@rsbuild/core": "1.6.13",
+    "@rsbuild/plugin-source-build": "^1.0.3",
+    "nyc": "^17.1.0",
+    "tslib": "^2.8.1",
+    "@lynx-js/playwright-fixtures": "0.0.0"
   },
   "peerDependencies": {
     "tslib": "^2.5.0"
+  },
+  "scripts": {
+    "coverage:ci": "nyc report --cwd=$(realpath ../) --reporter=lcov",
+    "serve": "pnpm rsbuild dev",
+    "test": "playwright test",
+    "test:debug": "playwright test --ui",
+    "test:install": "playwright install --with-deps chromium firefox webkit",
+    "test:update": "playwright test --ui --update-snapshots"
   }
 }

package/src/compat/LinearContainer/linear-compat.css

@@ -0,0 +1,124 @@
+/** For @property
+  chrome 85, edge 85, firefox 128, safari 16.4
+  https://developer.chrome.com/blog/new-in-chrome-85
+
+  * content-visibility:auto 
+    chrome 85, firefox 125, safari 18
+    (https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility)
+  
+  * contain-intrinsic-size:auto 
+    chrome 83, firefox 107, safari 17
+    (https://developer.mozilla.org/en-US/docs/Web/CSS/contain-intrinsic-size)
+
+  * relative-color and  display:ruby-base
+    display: ruby-base firefox-only
+    background-color: rgb(from red 200 g b) firefox 127
+    https://caniuse.com/?search=relative%20color#google_vignette
+    https://developer.mozilla.org/en-US/docs/Web/CSS/display#browser_compatibility
+  
+    rules for: chrome 85, firefox 127, safari 18
+ 
+  References:
+  https://chromestatus.com/features#milestone%3D85
+  https://www.mozilla.org/en-US/firefox/128.0/releasenotes/
+  https://developer.apple.com/documentation/safari-release-notes/safari-16_4-release-notes
+  https://caniuse.com/?search=relative%20colors
+  */
+@supports not
+  ((content-visibility: auto) and (transition-behavior: allow-discrete) and
+    (width: 1rex)) {
+  * {
+    --lynx-display: linear;
+    --lynx-linear-weight-sum: 1;
+    --lynx-linear-weight: 0;
+    --justify-content-column: flex-start;
+    --justify-content-column-reverse: flex-start;
+    --justify-content-row: flex-start;
+    --justify-content-row-reverse: flex-start;
+    --align-self-row: auto;
+    --align-self-column: auto;
+    --lynx-linear-weight-basis: auto;
+    --lynx-linear-orientation: vertical;
+    --flex-direction: row;
+    --flex-grow: 0;
+    --flex-shrink: 1;
+    --flex-basis: auto;
+    --justify-content: flex-start;
+    --flex-wrap: nowrap;
+    --align-self: auto;
+  }
+}
+[lynx-computed-display="linear"] {
+  flex-wrap: nowrap !important;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+
+[lynx-computed-display="flex"] {
+  flex-direction: var(--flex-direction);
+  justify-content: var(--justify-content);
+  flex-wrap: var(--flex-wrap);
+}
+
+[lynx-computed-display="flex"] > *,
+[lynx-computed-display="flex"] > lynx-wrapper > * {
+  flex: var(
+    --flex,
+    var(--flex-grow) var(--flex-shrink) var(--flex-basis)
+  );
+}
+[lynx-computed-display="linear"] > *,
+[lynx-computed-display="linear"] > lynx-wrapper > * {
+  flex-shrink: 0 !important;
+  flex-grow: calc(
+    var(--lynx-linear-weight) /
+      calc(
+      var(--lynx-linear-weight-sum) +
+        (
+        1 - clamp(0, var(--lynx-linear-weight-sum) * 999999, 1)
+      )
+    )
+  ) !important;
+  flex-basis: var(--lynx-linear-weight-basis) !important;
+}
+
+[lynx-computed-display="linear"][lynx-linear-orientation="vertical"] {
+  flex-direction: column !important;
+  justify-content: var(--justify-content-column);
+}
+
+[lynx-computed-display="linear"][lynx-linear-orientation="horizontal"] {
+  flex-direction: row !important;
+  justify-content: var(--justify-content-row);
+}
+
+[lynx-computed-display="linear"][lynx-linear-orientation="vertical-reverse"] {
+  flex-direction: column-reverse !important;
+  justify-content: var(--justify-content-column-reverse);
+}
+
+[lynx-computed-display="linear"][lynx-linear-orientation="horizontal-reverse"] {
+  flex-direction: row-reverse !important;
+  justify-content: var(--justify-content-row-reverse);
+}
+
+[lynx-computed-display="linear"][lynx-linear-orientation="vertical"] > *,
+[lynx-computed-display="linear"][lynx-linear-orientation="vertical-reverse"],
+[lynx-computed-display="linear"][lynx-linear-orientation="vertical"]
+  > lynx-wrapper
+  > *,
+[lynx-computed-display="linear"][lynx-linear-orientation="vertical-reverse"]
+  > lynx-wrapper
+  > * {
+  align-self: var(--align-self-column);
+}
+[lynx-computed-display="linear"][lynx-linear-orientation="horizontal"] > *,
+[lynx-computed-display="linear"][lynx-linear-orientation="horizontal-reverse"],
+[lynx-computed-display="linear"][lynx-linear-orientation="horizontal"]
+  > lynx-wrapper
+  > *,
+[lynx-computed-display="linear"][lynx-linear-orientation="horizontal-reverse"]
+  > lynx-wrapper
+  > * {
+  align-self: var(--align-self-row);
+}

package/src/{common-css → elements/common-css}/linear.css

@@ -258,7 +258,7 @@ list-item {
  *
  * update this once firefox supports this.
  * 
- * If you want to be fully compatible with chrome below 117, you need to use a plugin @lynx-js/web-elements-compat.
+ * If you want to be fully compatible with chrome below 117, you need to use @lynx-js/web-elements/compat/LinearContainer.
  */
 @supports (content-visibility: auto) and
   (transition-behavior: allow-discrete) and (width: 1rex) {

package/dist/LynxWrapper/index.d.ts

@@ -1 +0,0 @@
-export { LynxWrapper } from './LynxWrapper.js';

package/dist/LynxWrapper/index.js

@@ -1,2 +0,0 @@
-export { LynxWrapper } from './LynxWrapper.js';
-//# sourceMappingURL=index.js.map

package/dist/ScrollView/FadeEdgeLengthAttribute.js

@@ -1,43 +0,0 @@
-import { __esDecorate, __runInitializers, __setFunctionName } from "tslib";
-/*
-// Copyright 2024 The Lynx Authors. All rights reserved.
-// Licensed under the Apache License Version 2.0 that can be found in the
-// LICENSE file in the root directory of this source tree.
-*/
-import { bindToStyle, genDomGetter, registerAttributeHandler, registerStyleChangeHandler, } from '@lynx-js/web-elements-reactive';
-let FadeEdgeLengthAttribute = (() => {
-    let _instanceExtraInitializers = [];
-    let _private_handleFadingEdgeLength_decorators;
-    let _private_handleFadingEdgeLength_initializers = [];
-    let _private_handleFadingEdgeLength_extraInitializers = [];
-    let _private_backgroundColorToVariable_decorators;
-    let _private_backgroundColorToVariable_descriptor;
-    return class FadeEdgeLengthAttribute {
-        static {
-            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
-            _private_handleFadingEdgeLength_decorators = [registerAttributeHandler('fading-edge-length', true)];
-            _private_backgroundColorToVariable_decorators = [registerStyleChangeHandler('background'), registerStyleChangeHandler('background-color')];
-            __esDecorate(this, _private_backgroundColorToVariable_descriptor = { value: __setFunctionName(function (backGroundColor) {
-                    this.#getTopFadeMask().style.setProperty('--scroll-view-bg-color', backGroundColor);
-                    this.#getBotFadeMask().style.setProperty('--scroll-view-bg-color', backGroundColor);
-                }, "#backgroundColorToVariable") }, _private_backgroundColorToVariable_decorators, { kind: "method", name: "#backgroundColorToVariable", static: false, private: true, access: { has: obj => #backgroundColorToVariable in obj, get: obj => obj.#backgroundColorToVariable }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(null, null, _private_handleFadingEdgeLength_decorators, { kind: "field", name: "#handleFadingEdgeLength", static: false, private: true, access: { has: obj => #handleFadingEdgeLength in obj, get: obj => obj.#handleFadingEdgeLength, set: (obj, value) => { obj.#handleFadingEdgeLength = value; } }, metadata: _metadata }, _private_handleFadingEdgeLength_initializers, _private_handleFadingEdgeLength_extraInitializers);
-            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-        }
-        #dom = __runInitializers(this, _instanceExtraInitializers);
-        #getTopFadeMask = genDomGetter(() => this.#dom.shadowRoot, '#top-fade-mask');
-        #getBotFadeMask = genDomGetter(() => this.#dom.shadowRoot, '#bot-fade-mask');
-        static observedAttributes = ['fading-edge-length'];
-        static observedCSSProperties = ['background', 'background-color'];
-        constructor(dom) {
-            __runInitializers(this, _private_handleFadingEdgeLength_extraInitializers);
-            this.#dom = dom;
-        }
-        #handleFadingEdgeLength = __runInitializers(this, _private_handleFadingEdgeLength_initializers, bindToStyle(() => this.#dom, '--scroll-view-fading-edge-length', (v) => `${parseFloat(v)}px`));
-        get #backgroundColorToVariable() { return _private_backgroundColorToVariable_descriptor.value; }
-        connectedCallback() { }
-        dispose() { }
-    };
-})();
-export { FadeEdgeLengthAttribute };
-//# sourceMappingURL=FadeEdgeLengthAttribute.js.map

package/dist/ScrollView/ScrollAttributes.js

@@ -1,83 +0,0 @@
-import { __esDecorate, __runInitializers, __setFunctionName } from "tslib";
-/*
-// Copyright 2024 The Lynx Authors. All rights reserved.
-// Licensed under the Apache License Version 2.0 that can be found in the
-// LICENSE file in the root directory of this source tree.
-*/
-import { registerAttributeHandler, } from '@lynx-js/web-elements-reactive';
-let ScrollAttributes = (() => {
-    let _instanceExtraInitializers = [];
-    let _private_handleInitialScrollOffset_decorators;
-    let _private_handleInitialScrollOffset_descriptor;
-    let _private_handleInitialScrollIndex_decorators;
-    let _private_handleInitialScrollIndex_descriptor;
-    return class ScrollAttributes {
-        static {
-            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
-            _private_handleInitialScrollOffset_decorators = [registerAttributeHandler('scroll-top', false), registerAttributeHandler('scroll-left', false), registerAttributeHandler('initial-scroll-offset', false)];
-            _private_handleInitialScrollIndex_decorators = [registerAttributeHandler('scroll-to-index', false), registerAttributeHandler('initial-scroll-to-index', false)];
-            __esDecorate(this, _private_handleInitialScrollOffset_descriptor = { value: __setFunctionName(function (newVal, _, attributeName) {
-                    if (newVal) {
-                        const scrollValue = parseFloat(newVal);
-                        const scrollOrientation = this.#dom.getAttribute('scroll-orientation');
-                        const scrollY = this.#dom.getAttribute('scroll-y');
-                        const scrollX = this.#dom.getAttribute('scroll-x');
-                        const topScrollDistance = (attributeName === 'scroll-top'
-                            || attributeName === 'initial-scroll-offset')
-                            && (scrollY === ''
-                                || scrollY === 'true'
-                                || scrollOrientation === 'vertical'
-                                || scrollOrientation === 'both');
-                        const leftScrollDistance = (attributeName === 'scroll-left'
-                            || attributeName === 'initial-scroll-offset')
-                            && (scrollX === ''
-                                || scrollX === 'true'
-                                || scrollOrientation === 'vertical'
-                                || scrollOrientation === 'both');
-                        requestAnimationFrame(() => {
-                            if (topScrollDistance) {
-                                this.#dom.scrollTo(0, scrollValue);
-                            }
-                            if (leftScrollDistance) {
-                                this.#dom.scrollLeft = scrollValue;
-                            }
-                        });
-                    }
-                }, "#handleInitialScrollOffset") }, _private_handleInitialScrollOffset_decorators, { kind: "method", name: "#handleInitialScrollOffset", static: false, private: true, access: { has: obj => #handleInitialScrollOffset in obj, get: obj => obj.#handleInitialScrollOffset }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, _private_handleInitialScrollIndex_descriptor = { value: __setFunctionName(function (newVal) {
-                    if (newVal) {
-                        const scrollValue = parseFloat(newVal);
-                        const childrenElement = this.#dom.children.item(scrollValue);
-                        if (childrenElement && childrenElement instanceof HTMLElement) {
-                            const scrollX = this.#dom.getAttribute('scroll-x') !== null;
-                            requestAnimationFrame(() => {
-                                if (scrollX) {
-                                    this.#dom.scrollLeft = childrenElement.offsetLeft;
-                                }
-                                else {
-                                    this.#dom.scrollTop = childrenElement.offsetTop;
-                                }
-                            });
-                        }
-                    }
-                }, "#handleInitialScrollIndex") }, _private_handleInitialScrollIndex_decorators, { kind: "method", name: "#handleInitialScrollIndex", static: false, private: true, access: { has: obj => #handleInitialScrollIndex in obj, get: obj => obj.#handleInitialScrollIndex }, metadata: _metadata }, null, _instanceExtraInitializers);
-            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-        }
-        #dom = __runInitializers(this, _instanceExtraInitializers);
-        static observedAttributes = [
-            'scroll-top',
-            'scroll-left',
-            'initial-scroll-offset',
-            'scroll-to-index',
-            'initial-scroll-to-index',
-        ];
-        constructor(dom) {
-            this.#dom = dom;
-        }
-        get #handleInitialScrollOffset() { return _private_handleInitialScrollOffset_descriptor.value; }
-        get #handleInitialScrollIndex() { return _private_handleInitialScrollIndex_descriptor.value; }
-        dispose() { }
-    };
-})();
-export { ScrollAttributes };
-//# sourceMappingURL=ScrollAttributes.js.map

package/dist/ScrollView/ScrollViewEvents.d.ts

@@ -1,9 +0,0 @@
-import { type AttributeReactiveClass } from '@lynx-js/web-elements-reactive';
-import type { ScrollView } from './ScrollView.js';
-export declare class ScrollViewEvents implements InstanceType<AttributeReactiveClass<typeof ScrollView>> {
-    #private;
-    constructor(dom: ScrollView);
-    static observedAttributes: string[];
-    connectedCallback?(): void;
-    dispose(): void;
-}