@mantou/gem 1.7.4 → 1.7.6

package/src/lib/utils.ts

@@ -91,6 +91,18 @@ export class LinkedList<T = any> extends EventTarget {
     return this.#lastItem;
   }
 
+  isSuperLinkOf(subLink: LinkedList<T>) {
+    let subItem = subLink.first;
+    if (!subItem) return true;
+    let item = this.find(subItem.value);
+    while (item && item.value === subItem.value) {
+      subItem = subItem.next;
+      if (!subItem) return true;
+      item = item.next;
+    }
+    return false;
+  }
+
   find(value: T) {
     return this.#map.get(value);
   }
@@ -365,26 +377,123 @@ export function objectMapToString<T = any>(
   return result;
 }
 
-type StyleProp = keyof CSSStyleDeclaration | `--${string}`;
+// Wait: Typescript lib dom CSSStyleDeclaration anchor position
+type StyleProp = keyof CSSStyleDeclaration | `--${string}` | 'anchorDefault' | 'anchorName';
 
-export type StyleObject = Partial<Record<StyleProp, string | number | undefined>>;
+export type StyleObject = Partial<Record<StyleProp, string | number | undefined | null>>;
 
 // 不支持 webkit 属性
 export function styleMap(object: StyleObject) {
   return objectMapToString(object, ';', (key, value) =>
-    value !== undefined ? `${camelToKebabCase(key)}:${value}` : '',
+    value !== undefined && value !== null ? `${camelToKebabCase(key)}:${value}` : '',
   );
 }
 
-export function classMap(object: Record<string, boolean | string | number | undefined>) {
+export function classMap(object: Record<string, boolean | string | number | undefined | null>) {
   return objectMapToString(object, ' ', (key, value) => (value ? key : ''));
 }
 
 export const partMap = classMap;
 
 // https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts
-export function exportPartsMap(object: Record<string, string | undefined | boolean>) {
+export function exportPartsMap(object: Record<string, string | boolean | undefined | null>) {
   return objectMapToString(object, ',', (key, value) =>
     value === true || key === value ? key : value ? `${key}:${value}` : '',
   );
 }
+
+declare global {
+  interface PropertyIndexedKeyframes extends StyleObject {}
+  interface Keyframe extends StyleObject {}
+}
+
+/**
+ * @example
+ * ```css
+ * animation: 150ms ease 0ms showMask;`
+ * @keyframes showMask {
+ *   from {
+ *     opacity: 0;
+ *   }
+ * }
+ * ```
+ */
+// export function createCSSAnimation(
+//   keyframes: PropertyIndexedKeyframes | Keyframe[],
+//   options?: number | (KeyframeEffectOptions & { name: string }),
+// ) {
+//   const frames = new Map<number, StyleObject>();
+//   if (Array.isArray(keyframes)) {
+//     keyframes.forEach((keyframe, index) => {
+//       const offset = keyframes.length === 1 ? 1 : keyframe.offset || index / (keyframes.length - 1);
+//       frames.set(offset, {
+//         ...keyframe,
+//         // https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats#attributes
+//         cssOffset: undefined,
+//         offset: keyframe.cssOffset,
+//         composite: undefined,
+//         animationComposition: keyframe.composite,
+//         easing: undefined,
+//         animationTimingFunction: keyframe.easing,
+//       } as StyleObject);
+//     });
+//   } else {
+//     const offsetList: (number | null)[] = Array.isArray(keyframes.offset)
+//       ? keyframes.offset
+//       : keyframes.offset === undefined
+//         ? []
+//         : [keyframes.offset];
+//     if (offsetList.length && offsetList.at(-1) !== 1) offsetList.push(1);
+
+//     const setStyle = (offset: number, key: string, value: string | number | null | undefined) => {
+//       const style = frames.get(offset) || {};
+//       switch (key) {
+//         case 'offset':
+//           break;
+//         case 'cssOffset':
+//           Reflect.set(style, 'offset', value);
+//           break;
+//         case 'composite':
+//           Reflect.set(style, 'animationComposition', value);
+//           break;
+//         case 'easing':
+//           Reflect.set(style, 'animationTimingFunction', value);
+//           break;
+//         default:
+//           Reflect.set(style, key, value);
+//       }
+//       frames.set(offset, style);
+//     };
+//     for (const key in keyframes) {
+//       const framesValue = keyframes[key];
+//       !Array.isArray(framesValue)
+//         ? setStyle(1, key, framesValue)
+//         : framesValue.length === 1
+//           ? setStyle(1, key, framesValue[0])
+//           : framesValue.forEach((value, index) =>
+//               setStyle(offsetList[index] ?? index / (framesValue.length - 1), key, value),
+//             );
+//     }
+//   }
+
+//   let framesStr = '';
+//   frames.forEach((rules, offset) => {
+//     framesStr += `${(offset * 100).toFixed()}%{${styleMap(rules)}}`;
+//   });
+
+//   if (options) {
+//     const {
+//       // 只能使用 ms 数字
+//       duration = 0,
+//       easing = '',
+//       delay = 0,
+//       iterations = 1,
+//       direction = '',
+//       fill = '',
+//       name = `ani-${randomStr()}`,
+//     } = typeof options === 'number' ? ({ duration: options } as Exclude<typeof options, number>) : options;
+//     return `${duration}ms ${easing} ${delay}ms ${iterations} ${direction} ${fill} ${name};@keyframes ${name}{${framesStr}}`;
+//   }
+
+//   return framesStr;
+// }

package/src/lib/version.ts

@@ -1 +1 @@
-export const version = '1.7.4';
+export const version = '1.7.6';

package/src/test/utils.test.ts

@@ -110,4 +110,28 @@ describe('utils 测试', () => {
     expect(exportPartsMap({ foo: 'bar', content: 'content', false: false })).to.equal(`,foo:bar,content,`);
     expect(exportPartsMap({ foo: 'bar', content: true })).to.equal(`,foo:bar,content,`);
   });
+  // it('createCSSAnimation', () => {
+  //   expect(createCSSAnimation([{ opacity: 0 }])).to.equal('100%{;opacity:0;}');
+  //   expect(createCSSAnimation([{ opacity: 1 }, { opacity: 0 }])).to.equal('0%{;opacity:1;}100%{;opacity:0;}');
+  //   expect(createCSSAnimation([{ opacity: 1 }, { opacity: 0.1, offset: 0.7 }, { opacity: 0 }])).to.equal(
+  //     '0%{;opacity:1;}70%{;opacity:0.1;}100%{;opacity:0;}',
+  //   );
+  //   expect(createCSSAnimation({ opacity: [0] })).to.equal('100%{;opacity:0;}');
+  //   expect(createCSSAnimation({ opacity: [1, 0] })).to.equal('0%{;opacity:1;}100%{;opacity:0;}');
+  //   expect(createCSSAnimation({ opacity: [1, 0], offset: [0, 0.7] })).to.equal(
+  //     '0%{;opacity:1;}70%{;opacity:0;}100%{;}',
+  //   );
+  //   expect(createCSSAnimation({ opacity: [1, 0], backgroundColor: ['red', 'yellow', 'green'] })).to.equal(
+  //     '0%{;opacity:1;background-color:red;}100%{;opacity:0;background-color:green;}50%{;background-color:yellow;}',
+  //   );
+  //   expect(
+  //     createCSSAnimation({
+  //       opacity: [1, 0],
+  //       backgroundColor: ['red', 'yellow', 'green'],
+  //       offset: [0, 0.7],
+  //     }),
+  //   ).to.equal(
+  //     '0%{;opacity:1;background-color:red;}70%{;opacity:0;background-color:yellow;}100%{;background-color:green;}',
+  //   );
+  // });
 });