china-diff 1.0.1

package/css/atomic/overflow.css

@@ -0,0 +1,47 @@
+.overflow-auto {
+  overflow: auto;
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.overflow-scroll {
+  overflow: scroll;
+}
+
+.overflow-visible {
+  overflow: visible;
+}
+
+.overflow-x-auto {
+  overflow-x: auto;
+}
+
+.overflow-x-hidden {
+  overflow-x: hidden;
+}
+
+.overflow-x-scroll {
+  overflow-x: scroll;
+}
+
+.overflow-x-visible {
+  overflow-x: visible;
+}
+
+.overflow-y-auto {
+  overflow-y: auto;
+}
+
+.overflow-y-hidden {
+  overflow-y: hidden;
+}
+
+.overflow-y-scroll {
+  overflow-y: scroll;
+}
+
+.overflow-y-visible {
+  overflow-y: visible;
+}

package/css/atomic/position.css

@@ -0,0 +1,58 @@
+.static {
+  position: static;
+}
+
+.relative {
+  position: relative;
+}
+
+.fixed {
+  position: fixed;
+}
+
+.absolute {
+  position: absolute;
+}
+
+.sticky {
+  position: sticky;
+}
+
+.position-t {
+  top: 0;
+}
+
+.position-l {
+  left: 0;
+}
+
+.position-b {
+  bottom: 0;
+}
+
+.position-r {
+  right: 0;
+}
+
+.position-center {
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.position-x-center {
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.position-y-center {
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.position-fill {
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}

package/css/base.css

@@ -0,0 +1,16 @@
+img {
+  -webkit-user-drag: none;
+  user-drag: none;
+}
+
+/* 隐藏滚动条 */
+.scrollbar-hidden {
+  scrollbar-width: none;
+}
+
+/* Chrome/Safari/Opera */
+.scrollbar-hidden::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  height: 0;
+}

package/css/carousel.css

@@ -0,0 +1,46 @@
+.carousel {
+  display: flex;
+  overflow: hidden;
+  user-select: none;
+}
+
+.carousel-backward,
+.carousel-forward {
+  display: block;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 36px;
+  height: 36px;
+  border-radius: 36px;
+  padding: 8px;
+  background: rgba(255, 255, 255, 0.1);
+  cursor: pointer;
+}
+
+.carousel-backward {
+  left: 12px;
+}
+
+.carousel-forward {
+  right: 12px;
+}
+
+.le-800 .carousel-backward,
+.le-800 .carousel-forward {
+  display: none;
+}
+
+.carousel-dot {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 10px;
+  margin: 0 2px;
+  background: rgba(65, 72, 90, 1);
+}
+
+.carousel-dot.selected {
+  width: 16px;
+  background: white;
+}

package/css/combobox.css

@@ -0,0 +1,58 @@
+.combobox {
+  position: relative;
+  width: 100px;
+  height: 32px;
+  border: 1px solid silver;
+  background: white;
+  overflow: visible;
+}
+
+.combobox-host {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+.combobox-host > input {
+  flex: auto;
+  width: 100%;
+  height: 100%;
+  outline: none;
+  padding: 0 4px;
+  background: inherit;
+  color: inherit;
+  vertical-align: top;
+  font-size: inherit;
+}
+
+.combobox-host > svg {
+  display: flex;
+  justify-items: center;
+  align-items: center;
+  padding: 0 3px;
+  stroke: inherit;
+  fill: inherit;
+  cursor: pointer;
+}
+
+.combobox-popup {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  width: auto;
+  z-index: 100;
+  will-change: height;
+  transition: height 0.2s linear;
+}
+
+.combobox-popup-top {
+  top: auto;
+  bottom: calc(100% + 4px);
+}
+
+.combobox-popup-right {
+  left: auto;
+  right: 0;
+}

package/css/icon.css

@@ -0,0 +1,7 @@
+.icon {
+  display: inline-flex;
+  justify-items: center;
+  align-items: center;
+  box-sizing: content-box;
+  user-select: none;
+}

package/icons/backward.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.7793 2.22668L4.97596 5.78516C4.5268 6.20541 4.5268 6.89309 4.97596 7.31334L8.7793 10.8718" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/icons/close.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.750078 11.3565L11.3567 0.749922M11.3567 11.3565L0.750078 0.749922" stroke="#8693B6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/icons/dropdown.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.5573 6.03015L8.44707 10.4231C7.96166 10.942 7.16737 10.942 6.68196 10.4231L2.57178 6.03015" stroke="#8693B6" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/icons/forward.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.2207 2.22668L9.02404 5.78516C9.4732 6.20541 9.4732 6.89309 9.02404 7.31334L5.2207 10.8718" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/icons/toggle.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.14515 0.5L5.58667 4.30333C5.16642 4.7525 4.47873 4.7525 4.05848 4.30333L0.5 0.5" stroke="white" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/index.ts

@@ -0,0 +1 @@
+export * from './src';

package/jsx-runtime.d.ts

@@ -0,0 +1 @@
+export * from './src/jsx';

package/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "china-diff",
+  "version": "1.0.1",
+  "type": "module",
+  "main": "index.ts",
+  "scripts": {},
+  "dependencies": {},
+  "devDependencies": {
+    "solid-js": "^1.9.10",
+    "typescript": "~5.6.2",
+    "vite-plugin-solid": "^2.11.10"
+  }
+}

package/src/animate-scroll-to.ts

@@ -0,0 +1,65 @@
+export const animateScrollTo = (container: HTMLElement, x?: number, y?: number, duration?: number): Promise<void> => {
+  if (x < 0) {
+    x = 0;
+  }
+
+  if (y < 0) {
+    y = 0;
+  }
+
+  return new Promise((resolve) => {
+    const startTime = Date.now();
+    const scrollLeft = container.scrollLeft;
+    const scrollTop = container.scrollTop;
+    const distanceX = x != null ? x - scrollLeft : 0;
+    const distanceY = y != null ? y - scrollTop : 0;
+
+    duration = duration > 0 ? duration : 200;
+
+    const step = () => {
+      let elapsed = Date.now() - startTime;
+
+      if (elapsed < duration) {
+        let scale = elapsed / duration;
+
+        container.scrollTo((scrollLeft + scale * distanceX) | 0, (scrollTop + scale * distanceY) | 0);
+        requestAnimationFrame(step);
+      } else {
+        container.scrollTo(x, y);
+        resolve();
+      }
+    };
+
+    requestAnimationFrame(step);
+  });
+};
+
+export const animateScrollBy = (
+  container: HTMLElement,
+  offsetX?: number,
+  offsetY?: number,
+  duration?: number,
+): Promise<void> => {
+  return animateScrollTo(
+    container,
+    container.scrollLeft + (offsetX || 0),
+    container.scrollTop + (offsetY || 0),
+    duration,
+  );
+};
+
+export const animateScrollIntoView = (
+  container: HTMLElement,
+  element: HTMLElement,
+  duration?: number,
+): Promise<void> => {
+  let rect1 = container.getBoundingClientRect();
+  let rect2 = element.getBoundingClientRect();
+
+  return animateScrollTo(
+    container,
+    container.scrollLeft + rect2.left - rect1.left,
+    container.scrollTop + rect2.top - rect1.top,
+    duration,
+  );
+};

package/src/components/Carousel.tsx

@@ -0,0 +1,299 @@
+import { createEffect, createMemo, createSignal, For, onCleanup, onMount, splitProps } from 'solid-js';
+
+import { JSX } from '../jsx';
+import { isBrowser } from '../dom';
+import { animateScrollIntoView } from '../animate-scroll-to';
+import { defineProperty } from '../reactive';
+import { Icon } from './Icon';
+
+const CLASS_NAME = 'carousel-vertical';
+
+const EVENT_OPTIONS = { passive: true, capture: true };
+
+const DOTS = new Array(100).join('0').split('');
+
+/**
+ * 填充数据项
+ */
+const fillItems = <T extends unknown>(items: readonly T[]) => {
+  return [...items, ...items.slice(0, -1)];
+};
+
+/**
+ * 是否正在调整大小
+ */
+let resizing = false;
+
+if (isBrowser) {
+  let resizeTimer: any;
+
+  window.addEventListener(
+    'resize',
+    () => {
+      resizing = true;
+
+      clearTimeout(resizeTimer);
+      resizeTimer = setTimeout(() => (resizing = false), 500);
+    },
+    true,
+  );
+}
+
+/**
+ * 轮播组件外部调用接口
+ */
+export interface CarouselApi {
+  /**
+   * 当前索引
+   */
+  get index(): number;
+  /**
+   * 后退方法
+   */
+  backward: () => void;
+  /**
+   * 前进方法
+   */
+  forward: () => void;
+}
+
+/**
+ * 轮播组件
+ */
+export const Carousel = <T, U extends JSX.Element>(
+  props?: Omit<JSX.HTMLAttributes<never>, 'children'> & {
+    /**
+     * 要循环的数据集合
+     */
+    each: readonly T[];
+    /**
+     * 子节点
+     *
+     * @param item 数据项
+     * @param index 索引
+     * @returns JSX.Element
+     */
+    children: (item: T, index: () => number) => U;
+    /**
+     * 是否自动播放
+     */
+    autoplay?: boolean;
+    /**
+     * 间隔时间
+     */
+    interval?: number;
+    /**
+     * 是否竖直滚动
+     */
+    vertical?: boolean;
+    /**
+     * 外部调用接口
+     */
+    api?: (api: CarouselApi) => void;
+  },
+) => {
+  let [thisProps, restProps] = splitProps(props, [
+    'class',
+    'each',
+    'children',
+    'autoplay',
+    'interval',
+    'vertical',
+    'api',
+  ]);
+  let [currentIndex, setCurrentIndex] = createSignal(0);
+
+  let ref: HTMLElement;
+  // 开始按下位置
+  let pressdown = -1;
+  // 按下时的滚动位置
+  let pressdownScroll: number;
+  // 自动滚动计时器
+  let autoplayTimer: any;
+
+  // 获取滚动方向
+  const scrollType = createMemo(() => (thisProps.vertical ? 'scrollTop' : 'scrollLeft'));
+  const offsetType = createMemo(() => (thisProps.vertical ? 'offsetTop' : 'offsetLeft'));
+  const screenType = createMemo(() => (thisProps.vertical ? 'screenY' : 'screenX'));
+
+  // 滚动到指定索引
+  const scrollTo = (index: number) => {
+    let children = ref.children;
+    let length = children.length;
+    let count = thisProps.each.length; // 真实的子项数量
+
+    if (index < 0) {
+      index += count;
+    }
+
+    // 重新开启自动播放
+    autoplay();
+
+    // 滚动到指定子节点
+    animateScrollIntoView(ref, children[index % length] as HTMLElement).then(() => {
+      if (index >= count) {
+        // 滚动到对应节点
+        ref[scrollType()] = (children[index - count] as HTMLElement)[offsetType()];
+        // 调整到指定节点
+        index -= count;
+      }
+
+      setCurrentIndex(index);
+    });
+  };
+
+  const checkFirstIndex = () => {
+    let index = currentIndex();
+
+    if (index <= 0) {
+      // 真实的子项数量
+      let count = thisProps.each.length;
+
+      // 先滚动到对应节点的填充节点
+      ref[scrollType()] = (ref.children[index + count] as HTMLElement)[offsetType()];
+      // 调整到指定节点
+      index += count;
+    }
+
+    return index;
+  };
+
+  // 后退
+  const backward = () => {
+    scrollTo(checkFirstIndex() - 1);
+  };
+
+  // 前进
+  const forward = () => {
+    scrollTo(currentIndex() + 1);
+  };
+
+  const ontouchstart = (event: TouchEvent) => {
+    checkFirstIndex();
+
+    // 记录按下时状态
+    pressdown = (event.changedTouches[0] || event.touches[0])[screenType()];
+    pressdownScroll = ref[scrollType()];
+
+    // 取消自动播放
+    clearTimeout(autoplayTimer);
+  };
+
+  const ontouchmove = (event: TouchEvent) => {
+    if (pressdown >= 0) {
+      ref[scrollType()] = pressdownScroll - ((event.changedTouches[0] || event.touches[0])[screenType()] - pressdown);
+    }
+  };
+
+  const ontouchend = (event: TouchEvent) => {
+    let distance = (event.changedTouches[0] || event.touches[0])[screenType()] - pressdown;
+    let index = currentIndex();
+
+    // 清除按下状态
+    pressdown = -1;
+
+    // 往前滚
+    if (distance > 20) {
+      scrollTo(index - 1);
+    } else if (distance < -20) {
+      // 如果是第一个位置,则恢复滚动位置
+      if (index === 0) {
+        ref[scrollType()] = ref.children[offsetType()];
+      }
+
+      scrollTo(index + 1);
+    } else {
+      animateScrollIntoView(ref, ref.children[index % ref.children.length] as HTMLElement);
+    }
+  };
+
+  const autoplay = () => {
+    clearTimeout(autoplayTimer);
+
+    if (thisProps.autoplay !== false) {
+      autoplayTimer = setTimeout(
+        () => {
+          if (!resizing) {
+            let rect = ref.getBoundingClientRect();
+            let top = rect.top;
+
+            if (top + rect.height > 10 && top - 10 < window.innerHeight) {
+              forward();
+            }
+          }
+
+          autoplay();
+        },
+        thisProps.interval > 3000 ? thisProps.interval : 3000,
+      );
+    }
+  };
+
+  // 初始化外部访问接口
+  thisProps.api &&
+    thisProps.api(
+      defineProperty(
+        {
+          backward,
+          forward,
+        },
+        'index',
+        { get: currentIndex },
+      ) as CarouselApi,
+    );
+
+  createEffect(() => {
+    let classList = ref.classList;
+
+    if (props.vertical) {
+      if (!classList.contains(CLASS_NAME)) {
+        classList.add();
+      }
+    } else {
+      classList.remove(CLASS_NAME);
+    }
+  });
+
+  createEffect(autoplay);
+
+  onMount(() => {
+    ref.addEventListener('touchstart', ontouchstart, EVENT_OPTIONS);
+    ref.addEventListener('touchmove', ontouchmove, EVENT_OPTIONS);
+    ref.addEventListener('touchend', ontouchend, EVENT_OPTIONS);
+
+    onCleanup(() => {
+      ref.removeEventListener('touchstart', ontouchstart, EVENT_OPTIONS);
+      ref.removeEventListener('touchmove', ontouchmove, EVENT_OPTIONS);
+      ref.removeEventListener('touchend', ontouchend, EVENT_OPTIONS);
+    });
+  });
+
+  return (
+    <div ref={ref as any} class={'carousel scrollbar-hidden ' + (thisProps.class || '')} {...restProps}>
+      <For each={fillItems(thisProps.each)}>{thisProps.children}</For>
+    </div>
+  );
+};
+
+/**
+ * 轮播按钮
+ */
+export const CarouselButtons = (props: { carousel: CarouselApi }) => {
+  return (
+    <>
+      <Icon class="carousel-backward" name="backward" onclick={() => props.carousel.backward()}></Icon>
+      <Icon class="carousel-forward" name="forward" onclick={() => props.carousel.forward()}></Icon>
+    </>
+  );
+};
+
+/**
+ * 轮播页码点
+ */
+export const CarouselDots = <T extends unknown>(props: { each: readonly T[]; carousel: CarouselApi }) => {
+  return (
+    <For each={DOTS.slice(0, props.each.length)}>
+      {(_, index) => <span class={'carousel-dot' + (props.carousel.index === index() ? ' selected' : '')}></span>}
+    </For>
+  );
+};