@lynx-js/web-elements 0.3.0 → 0.5.0

package/src/XList/x-list.css

@@ -7,6 +7,9 @@ x-list {
   contain: layout;
   scrollbar-width: none;
   --list-item-sticky-offset: 0;
+  --list-item-span-count: 0;
+  --list-main-axis-gap: 0;
+  --list-cross-axis-gap: 0;
 }
 
 x-list > *:not(list-item) {
@@ -28,6 +31,8 @@ x-list::part(content) {
   overflow: inherit;
   position: relative;
   content-visibility: auto;
+  row-gap: inherit;
+  column-gap: inherit;
 }
 
 x-list::part(content), x-list::part(slot) {
@@ -60,74 +65,68 @@ x-list > list-item, x-list > lynx-wrapper > list-item {
   display: flex;
 }
 
-x-list[list-type="single"] {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
+x-list {
   overflow-y: scroll !important;
   overflow-x: clip !important;
 }
 
-x-list[list-type="single"][scroll-orientation="horizontal"] {
-  flex-direction: row;
+x-list[scroll-orientation="horizontal"] {
   overflow-x: scroll !important;
   overflow-y: clip !important;
 }
 
-x-list[list-type="single"][enable-scroll="false"] {
+x-list[enable-scroll="false"] {
   overflow-y: hidden !important;
 }
 
-x-list[list-type="single"][scroll-orientation="horizontal"][enable-scroll="false"] {
+x-list[scroll-orientation="horizontal"][enable-scroll="false"] {
   overflow-x: hidden !important;
 }
 
-list-item[sticky-top], list-item[sticky-bottom] {
+x-list[sticky="true"] list-item[sticky-top],
+x-list[sticky="true"] list-item[sticky-bottom] {
   position: sticky;
   z-index: 1;
 }
 
-x-list[list-type="single"] > list-item[sticky-top],
-x-list[list-type="single"] > lynx-wrapper > list-item[sticky-top] {
+x-list[sticky="true"] > list-item[sticky-top],
+x-list[sticky="true"] > lynx-wrapper > list-item[sticky-top] {
   top: var(--list-item-sticky-offset);
 }
 
-x-list[list-type="single"] > list-item[sticky-bottom],
-x-list[list-type="single"] > lynx-wrapper > list-item[sticky-bottom] {
+x-list[sticky="true"] > list-item[sticky-bottom],
+x-list[sticky="true"] > lynx-wrapper > list-item[sticky-bottom] {
   bottom: var(--list-item-sticky-offset);
 }
 
-x-list[list-type="single"][scroll-orientation="horizontal"]
-  > list-item[sticky-top],
-x-list[list-type="single"][scroll-orientation="horizontal"]
+x-list[sticky="true"][scroll-orientation="horizontal"] > list-item[sticky-top],
+x-list[sticky="true"][scroll-orientation="horizontal"]
   > lynx-wrapper
   > list-item[sticky-top] {
   top: unset;
   left: var(--list-item-sticky-offset);
 }
 
-x-list[list-type="single"][scroll-orientation="horizontal"]
+x-list[sticky="true"][scroll-orientation="horizontal"]
   > list-item[sticky-bottom],
-x-list[list-type="single"][scroll-orientation="horizontal"]
+x-list[sticky="true"][scroll-orientation="horizontal"]
   > lynx-wrapper
   > list-item[sticky-bottom] {
   bottom: unset;
   right: var(--list-item-sticky-offset);
 }
 
-x-list[list-type="single"][item-snap],
-x-list[list-type="single"][paging-enabled] {
+x-list[item-snap], x-list[paging-enabled] {
   scroll-snap-type: y mandatory;
   scroll-snap-stop: always;
 }
 
-x-list[list-type="single"][item-snap][scroll-orientation="horizontal"],
-x-list[list-type="single"][paging-enabled][scroll-orientation="horizontal"] {
+x-list[item-snap][scroll-orientation="horizontal"],
+x-list[paging-enabled][scroll-orientation="horizontal"] {
   scroll-snap-type: x mandatory;
 }
 
-x-list[list-type="single"][item-snap] > list-item,
-x-list[list-type="single"][item-snap] > lynx-wrapper > list-item {
+x-list[item-snap] > list-item, x-list[item-snap] > lynx-wrapper > list-item {
   scroll-snap-align: start;
 }
 
@@ -145,3 +144,50 @@ x-list::part(lower-threshold-observer) {
 x-list[vertical-orientation="false"]::part(lower-threshold-observer) {
   flex-direction: row-reverse;
 }
+
+/* list-type single */
+x-list[list-type="single"] {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  row-gap: var(--list-main-axis-gap);
+  column-gap: var(--list-cross-axis-gap);
+}
+
+x-list[list-type="single"][scroll-orientation="horizontal"] {
+  flex-direction: row;
+  row-gap: var(--list-cross-axis-gap);
+  column-gap: var(--list-main-axis-gap);
+}
+
+/* list-type flow */
+x-list[list-type="flow"]::part(content) {
+  display: grid;
+  grid-template-columns: repeat(var(--list-item-span-count), 1fr);
+  grid-auto-rows: min-content;
+  justify-items: stretch;
+  align-items: start;
+  grid-row-gap: var(--list-main-axis-gap);
+  grid-column-gap: var(--list-cross-axis-gap);
+}
+
+x-list[list-type="flow"][scroll-orientation="horizontal"]::part(content) {
+  grid-template-rows: repeat(var(--list-item-span-count), 1fr);
+  grid-auto-flow: column;
+  grid-auto-columns: min-content;
+  justify-items: start;
+  align-items: stretch;
+  grid-row-gap: var(--list-cross-axis-gap);
+  grid-column-gap: var(--list-main-axis-gap);
+}
+
+x-list[list-type="flow"] list-item[full-span]:not([full-span="false"]) {
+  grid-column-start: 1;
+  grid-column-end: calc(var(--list-item-span-count) + 1);
+}
+
+x-list[list-type="flow"][scroll-orientation="horizontal"]
+  list-item[full-span]:not([full-span="false"]) {
+  grid-row-start: 1;
+  grid-row-end: calc(var(--list-item-span-count) + 1);
+}

package/dist/lazy.d.ts

@@ -1 +0,0 @@
-export declare function loadElement(tag: string): void;

package/dist/lazy.js

@@ -1,106 +0,0 @@
-// 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.
-const loadingElementPromises = new Set();
-export function loadElement(tag) {
-    if (loadingElementPromises.has(tag)) {
-        return;
-    }
-    if (customElements.get(tag)) {
-        return;
-    }
-    switch (tag) {
-        case 'lynx-wrapper':
-            import('./LynxWrapper/index.js');
-            loadingElementPromises.add(tag);
-            return;
-        case 'scroll-view':
-            import('./ScrollView/index.js');
-            loadingElementPromises.add(tag);
-            return;
-        case 'x-audio-tt':
-            import('./XAudioTT/index.js');
-            loadingElementPromises.add(tag);
-            return;
-        case 'x-canvas':
-            import('./XCanvas/index.js');
-            loadingElementPromises.add(tag);
-            return;
-        case 'x-foldview-ng':
-        case 'x-foldview-header-ng':
-        case 'x-foldview-toolbar-ng':
-        case 'x-foldview-slot-ng':
-        case 'x-foldview-slot-drag-ng':
-            import('./XFoldViewNg/index.js');
-            loadingElementPromises.add('x-foldview-ng');
-            loadingElementPromises.add('x-foldview-header-ng');
-            loadingElementPromises.add('x-foldview-toolbar-ng');
-            loadingElementPromises.add('x-foldview-slot-ng');
-            loadingElementPromises.add('x-foldview-slot-drag-ng');
-            return;
-        case 'x-image':
-        case 'filter-image':
-            import('./XImage/index.js');
-            loadingElementPromises.add('x-image');
-            loadingElementPromises.add('filter-image');
-            return;
-        case 'x-input':
-            import('./XInput/index.js');
-            loadingElementPromises.add(tag);
-            return;
-        case 'x-list':
-            import('./XList/index.js');
-            loadingElementPromises.add('x-list');
-            loadingElementPromises.add('list-item');
-            return;
-        case 'x-overlay-ng':
-            import('./XOverlayNg/index.js');
-            loadingElementPromises.add(tag);
-            return;
-        case 'x-refresh-view':
-        case 'x-refresh-header':
-        case 'x-refresh-footer':
-            import('./XRefreshView/index.js');
-            loadingElementPromises.add('x-refresh-view');
-            loadingElementPromises.add('x-refresh-header');
-            loadingElementPromises.add('x-refresh-footer');
-            return;
-        case 'x-svg':
-            import('./XSvg/index.js');
-            loadingElementPromises.add(tag);
-            return;
-        case 'x-swiper':
-        case 'x-swiper-item':
-            import('./XSwiper/index.js');
-            loadingElementPromises.add('x-swiper');
-            loadingElementPromises.add('x-swiper-item');
-            return;
-        case 'x-text':
-        case 'inline-text':
-        case 'inline-image':
-        case 'inline-truncation':
-        case 'raw-text':
-            import('./XText/index.js');
-            loadingElementPromises.add('x-text');
-            loadingElementPromises.add('inline-text');
-            loadingElementPromises.add('inline-image');
-            loadingElementPromises.add('inline-truncation');
-            loadingElementPromises.add('raw-text');
-            return;
-        case 'x-textarea':
-            import('./XTextarea/index.js');
-            loadingElementPromises.add(tag);
-            return;
-        case 'x-view':
-            import('./XView/index.js');
-            loadingElementPromises.add(tag);
-            return;
-        case 'x-viewpager-ng':
-        case 'x-viewpager-item-ng':
-            import('./XViewpagerNg/index.js');
-            loadingElementPromises.add('x-viewpager-ng');
-            loadingElementPromises.add('x-viewpager-item-ng');
-            return;
-    }
-}
-//# sourceMappingURL=lazy.js.map