lupine.components 1.1.13 → 1.1.15

package/src/components/select-angle-component.tsx

@@ -1,127 +1,127 @@
-import { CssProps, RefProps } from 'lupine.components';
-
-export type SelectAngleComponentHookProps = {
-  setAngle?: (angle: number) => void;
-};
-export type SelectAngleComponentProps = {
-  size?: string;
-  angle: number;
-  onChange: (angle: number) => void;
-  hook?: SelectAngleComponentHookProps;
-};
-export const SelectAngleComponent = (props: SelectAngleComponentProps) => {
-  const css: CssProps = {
-    width: props.size || '80px',
-    height: props.size || '80px',
-    '&circle': {
-      width: '100%',
-      height: '100%',
-      borderRadius: '50%',
-      border: '2px solid #aaa',
-      position: 'relative',
-      backgroundColor: 'var(--primary-bg-color)',
-      cursor: 'pointer',
-    },
-    '&needle': {
-      width: '2px',
-      height: '50%',
-      backgroundColor: 'red',
-      position: 'absolute',
-      top: '0',
-      left: '50%',
-      transformOrigin: 'bottom center',
-      transform: 'rotate(90deg)',
-    },
-    '&tips': {
-      position: 'absolute',
-      top: '50%',
-      left: '50%',
-      transform: 'translate(-50%, -50%)',
-      fontSize: '12px',
-      color: 'var(--primary-color)',
-      fontWeight: '600',
-      zIndex: '10',
-    },
-    '&a0, &a90, &a180, &a270': {
-      width: '6px',
-      height: '6px',
-      borderRadius: '50%',
-      backgroundColor: '#333',
-      position: 'absolute',
-      top: '0',
-      left: '50%',
-      transform: 'translate(-50%, -50%)',
-      fontSize: '12px',
-      color: '#333',
-    },
-    '&a90': {
-      top: '50%',
-      left: '100%',
-    },
-    '&a180': {
-      top: '100%',
-      left: '50%',
-    },
-    '&a270': {
-      top: '50%',
-      left: '0',
-    },
-  };
-
-  let cx: number = 0;
-  let cy: number = 0;
-  let mv = false;
-  if (props.hook) {
-    props.hook.setAngle = (angle) => {
-      updateAngleSub(angle);
-    };
-  }
-  const updateAngle = (ev: MouseEvent) => {
-    const dx = ev.clientX - cx;
-    const dy = ev.clientY - cy;
-    // atan2 返回弧度，顺时针0°为右侧
-    let deg = Math.atan2(dy, dx) * (180 / Math.PI);
-    deg = (deg + 450) % 360; // 让上方为0°
-    updateAngleSub(deg);
-  };
-  const updateAngleSub = (deg: number) => {
-    const needle = ref.$('&needle');
-    const text = ref.$('&tips');
-    needle.style.transform = `rotate(${deg}deg)`;
-    text.textContent = `${deg.toFixed(0)}°`;
-    props.onChange(deg);
-  };
-
-  const pointerdown = (ev: MouseEvent) => {
-    const picker = ref.$('&circle');
-    const rect = picker.getBoundingClientRect();
-    cx = rect.left + rect.width / 2;
-    cy = rect.top + rect.height / 2;
-
-    updateAngle(ev);
-    mv = true;
-  };
-  const pointermove = (ev: MouseEvent) => {
-    if (!mv) {
-      return;
-    }
-    updateAngle(ev);
-  };
-  const pointerup = () => {
-    mv = false;
-  };
-  const ref: RefProps = {};
-  return (
-    <div ref={ref} css={css}>
-      <div class='&circle' onPointerDown={pointerdown} onPointerMove={pointermove} onPointerUp={pointerup}>
-        <div class='&needle'></div>
-        <div class='&tips'>90°</div>
-
-        <div class='&a0' onClick={() => updateAngleSub(0)}></div>
-        <div class='&a90' onClick={() => updateAngleSub(90)}></div>
-        <div class='&a180' onClick={() => updateAngleSub(180)}></div>
-        <div class='&a270' onClick={() => updateAngleSub(270)}></div>
-      </div>
-    </div>
-  );
-};
+import { CssProps, RefProps } from 'lupine.components';
+
+export type SelectAngleComponentHookProps = {
+  setAngle?: (angle: number) => void;
+};
+export type SelectAngleComponentProps = {
+  size?: string;
+  angle: number;
+  onChange: (angle: number) => void;
+  hook?: SelectAngleComponentHookProps;
+};
+export const SelectAngleComponent = (props: SelectAngleComponentProps) => {
+  const css: CssProps = {
+    width: props.size || '80px',
+    height: props.size || '80px',
+    '&circle': {
+      width: '100%',
+      height: '100%',
+      borderRadius: '50%',
+      border: '2px solid #aaa',
+      position: 'relative',
+      backgroundColor: 'var(--primary-bg-color)',
+      cursor: 'pointer',
+    },
+    '&needle': {
+      width: '2px',
+      height: '50%',
+      backgroundColor: 'red',
+      position: 'absolute',
+      top: '0',
+      left: '50%',
+      transformOrigin: 'bottom center',
+      transform: 'rotate(90deg)',
+    },
+    '&tips': {
+      position: 'absolute',
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)',
+      fontSize: '12px',
+      color: 'var(--primary-color)',
+      fontWeight: '600',
+      zIndex: '10',
+    },
+    '&a0, &a90, &a180, &a270': {
+      width: '6px',
+      height: '6px',
+      borderRadius: '50%',
+      backgroundColor: '#333',
+      position: 'absolute',
+      top: '0',
+      left: '50%',
+      transform: 'translate(-50%, -50%)',
+      fontSize: '12px',
+      color: '#333',
+    },
+    '&a90': {
+      top: '50%',
+      left: '100%',
+    },
+    '&a180': {
+      top: '100%',
+      left: '50%',
+    },
+    '&a270': {
+      top: '50%',
+      left: '0',
+    },
+  };
+
+  let cx: number = 0;
+  let cy: number = 0;
+  let mv = false;
+  if (props.hook) {
+    props.hook.setAngle = (angle) => {
+      updateAngleSub(angle);
+    };
+  }
+  const updateAngle = (ev: MouseEvent) => {
+    const dx = ev.clientX - cx;
+    const dy = ev.clientY - cy;
+    // atan2 返回弧度，顺时针0°为右侧
+    let deg = Math.atan2(dy, dx) * (180 / Math.PI);
+    deg = (deg + 450) % 360; // 让上方为0°
+    updateAngleSub(deg);
+  };
+  const updateAngleSub = (deg: number) => {
+    const needle = ref.$('&needle');
+    const text = ref.$('&tips');
+    needle.style.transform = `rotate(${deg}deg)`;
+    text.textContent = `${deg.toFixed(0)}°`;
+    props.onChange(deg);
+  };
+
+  const pointerdown = (ev: MouseEvent) => {
+    const picker = ref.$('&circle');
+    const rect = picker.getBoundingClientRect();
+    cx = rect.left + rect.width / 2;
+    cy = rect.top + rect.height / 2;
+
+    updateAngle(ev);
+    mv = true;
+  };
+  const pointermove = (ev: MouseEvent) => {
+    if (!mv) {
+      return;
+    }
+    updateAngle(ev);
+  };
+  const pointerup = () => {
+    mv = false;
+  };
+  const ref: RefProps = {};
+  return (
+    <div ref={ref} css={css}>
+      <div class='&circle' onPointerDown={pointerdown} onPointerMove={pointermove} onPointerUp={pointerup}>
+        <div class='&needle'></div>
+        <div class='&tips'>90°</div>
+
+        <div class='&a0' onClick={() => updateAngleSub(0)}></div>
+        <div class='&a90' onClick={() => updateAngleSub(90)}></div>
+        <div class='&a180' onClick={() => updateAngleSub(180)}></div>
+        <div class='&a270' onClick={() => updateAngleSub(270)}></div>
+      </div>
+    </div>
+  );
+};

package/src/components/select-with-title.tsx

@@ -1,37 +1,37 @@
-import { CssProps } from 'lupine.web';
-
-export type SelectOptionProps = {
-  option: string;
-  value: string;
-  selected?: boolean;
-};
-export const SelectWithTitle = (
-  title: string,
-  options: SelectOptionProps[],
-  onOptionChanged: (option: string) => void,
-  size?: number,
-  className = 'input-base',
-  width = '100%',
-) => {
-  const css: CssProps = {
-    select: {
-      height: 'auto',
-      overflowY: 'auto',
-      width,
-    },
-  };
-  return (
-    <div css={css}>
-      <div>{title}</div>
-      <div>
-        <select class={className} onChange={(e: any) => onOptionChanged(e?.target?.value)} size={size}>
-          {options.map((option) => (
-            <option value={option.value} selected={option.selected}>
-              {option.option}
-            </option>
-          ))}
-        </select>
-      </div>
-    </div>
-  );
-};
+import { CssProps } from 'lupine.web';
+
+export type SelectOptionProps = {
+  option: string;
+  value: string;
+  selected?: boolean;
+};
+export const SelectWithTitle = (
+  title: string,
+  options: SelectOptionProps[],
+  onOptionChanged: (option: string) => void,
+  size?: number,
+  className = 'input-base',
+  width = '100%'
+) => {
+  const css: CssProps = {
+    select: {
+      height: 'auto',
+      overflowY: 'auto',
+      width,
+    },
+  };
+  return (
+    <div css={css}>
+      <div>{title}</div>
+      <div>
+        <select class={className} onChange={(e: any) => onOptionChanged(e?.target?.value)} size={size}>
+          {options.map((option) => (
+            <option value={option.value} selected={option.selected}>
+              {option.option}
+            </option>
+          ))}
+        </select>
+      </div>
+    </div>
+  );
+};

package/src/components/slide-tab-component.tsx

@@ -1,149 +1,144 @@
-import { CssProps, RefProps, VNode, bindGlobalStyle } from 'lupine.components';
-
-export interface SlideTabProps {
-  pages: { title: string; content: VNode<any> }[];
-};
-export const SlideTabComponent = (props: SlideTabProps) => {
-  const css: CssProps = {
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 1,
-    fontSize: '12px',
-    borderRadius: '6px',
-    padding: '0px 8px 4px 8px',
-    // marginBottom: '8px',
-    height: '100%',
-    '.slide-tab-c-list': {
-      flex: 1,
-      borderRadius: '6px',
-      display: 'flex',
-      overflowX: 'auto',
-      width: '100%',
-      scrollSnapType: 'x mandatory',
-      gap: '8px',
-      paddingBottom: '10px',
-      scrollBehavior: 'smooth',
-      WebkitOverflowScrolling: 'touch',
-    },
-    '.slide-tab-c-slide': {
-      width: '100%',
-      overflow: 'hidden',
-      position: 'relative',
-      minWidth: '100%',
-      flexShrink: 0,
-      scrollSnapAlign: 'start',
-      height: '100%',
-      overflowY: 'auto',
-    },
-
-    '.slide-tab-c-nav': {
-      display: 'flex',
-      flexDirection: 'row',
-      justifyContent: 'center',
-      backgroundColor: 'var(--primary-bg-color)',
-      position: 'sticky',
-      top: 0,
-      zIndex: 1,
-    },
-    '.slide-tab-c-nav-wrap': {
-      display: 'flex',
-      flexDirection: 'row',
-      justifyContent: 'center',
-      padding: '2px 4px',
-      borderRadius: '4px',
-      backgroundColor: 'var(--secondary-bg-color)',
-    },
-    '.slide-tab-c-nav-item': {
-      cursor: 'pointer',
-      padding: '4px 8px',
-      borderRadius: '4px',
-      marginRight: '8px',
-    },
-    '.slide-tab-c-nav-item.active': {
-      backgroundColor: 'var(--primary-accent-color)',
-      color: 'white',
-    },
-  };
-  bindGlobalStyle('slide-tab-c-box', css);
-
-  const ref: RefProps = {};
-  let slideIndex = 0;
-  let manualScroll = false;
-  let scrollEndTimer: NodeJS.Timeout | null = null;
-  const drawerScroll = () => {
-    if (manualScroll) {
-      return;
-    }
-    if (scrollEndTimer) {
-      clearTimeout(scrollEndTimer);
-    }
-    scrollEndTimer = setTimeout(() => {
-      drawerScrollStop();
-    }, 100);
-  };
-  const resetSlides = (index: number) => {
-    const dots = ref.$all('.slide-tab-c-nav-item');
-    for (let i = 0; i < dots.length; i++) {
-      dots[i].classList.toggle('active', i === index);
-    }
-  };
-  const drawerScrollStop = () => {
-    const drawer = ref.$('.slide-tab-c-list');
-    const width = drawer.clientWidth;
-    const currentScrollIndex = Math.round(drawer.scrollLeft / width);
-    slideIndex = currentScrollIndex;
-    resetSlides(slideIndex);
-  };
-  const moveSlide = (slideIndex: number) => {
-    const drawer = ref.$('.slide-tab-c-list');
-    const children = ref.$all('.slide-tab-c-slide');
-    if (!drawer || !children || children.length === 0) {
-      return;
-    }
-    const target = children[slideIndex];
-    if (!target) {
-      return;
-    }
-    const offsetLeft = target.offsetLeft;
-    manualScroll = true;
-    drawer.scrollTo({
-      left: offsetLeft,
-      behavior: 'smooth',
-    });
-
-    resetSlides(slideIndex);
-    setTimeout(() => {
-      manualScroll = false;
-    }, 300);
-  };
-
-  return (
-    <section class='slide-tab-c-box' ref={ref}>
-      <div class='slide-tab-c-nav'>
-        <div class='slide-tab-c-nav-wrap'>
-          {props.pages.map((page, index) => (
-            <div
-              class={`slide-tab-c-nav-item ${index === 0 ? 'active' : ''}`}
-              onClick={(event) => {
-                event.preventDefault();
-                moveSlide(index);
-              }}
-            >
-              {page.title}
-            </div>
-          ))}
-
-        </div>
-      </div>
-      <div class='slide-tab-c-list no-scrollbar-container' onScroll={drawerScroll}>
-
-        {props.pages.map((page) => (
-          <div class='slide-tab-c-slide no-scrollbar-container'>
-            {page.content}
-          </div>
-        ))}
-
-      </div>
-    </section>
-  );
-};
+import { CssProps, RefProps, VNode, bindGlobalStyle } from 'lupine.components';
+
+export interface SlideTabProps {
+  pages: { title: string; content: VNode<any> }[];
+}
+export const SlideTabComponent = (props: SlideTabProps) => {
+  const css: CssProps = {
+    display: 'flex',
+    flexDirection: 'column',
+    flex: 1,
+    fontSize: '12px',
+    borderRadius: '6px',
+    padding: '0px 8px 4px 8px',
+    // marginBottom: '8px',
+    height: '100%',
+    '.slide-tab-c-list': {
+      flex: 1,
+      borderRadius: '6px',
+      display: 'flex',
+      overflowX: 'auto',
+      width: '100%',
+      scrollSnapType: 'x mandatory',
+      gap: '8px',
+      paddingBottom: '10px',
+      scrollBehavior: 'smooth',
+      WebkitOverflowScrolling: 'touch',
+    },
+    '.slide-tab-c-slide': {
+      width: '100%',
+      overflow: 'hidden',
+      position: 'relative',
+      minWidth: '100%',
+      flexShrink: 0,
+      scrollSnapAlign: 'start',
+      height: '100%',
+      overflowY: 'auto',
+    },
+
+    '.slide-tab-c-nav': {
+      display: 'flex',
+      flexDirection: 'row',
+      justifyContent: 'center',
+      backgroundColor: 'var(--primary-bg-color)',
+      position: 'sticky',
+      top: 0,
+      zIndex: 1,
+    },
+    '.slide-tab-c-nav-wrap': {
+      display: 'flex',
+      flexDirection: 'row',
+      justifyContent: 'center',
+      padding: '2px 4px',
+      borderRadius: '4px',
+      backgroundColor: 'var(--secondary-bg-color)',
+    },
+    '.slide-tab-c-nav-item': {
+      cursor: 'pointer',
+      padding: '4px 8px',
+      borderRadius: '4px',
+      marginRight: '8px',
+    },
+    '.slide-tab-c-nav-item.active': {
+      backgroundColor: 'var(--primary-accent-color)',
+      color: 'white',
+    },
+  };
+  bindGlobalStyle('slide-tab-c-box', css);
+
+  const ref: RefProps = {};
+  let slideIndex = 0;
+  let manualScroll = false;
+  let scrollEndTimer: NodeJS.Timeout | null = null;
+  const drawerScroll = () => {
+    if (manualScroll) {
+      return;
+    }
+    if (scrollEndTimer) {
+      clearTimeout(scrollEndTimer);
+    }
+    scrollEndTimer = setTimeout(() => {
+      drawerScrollStop();
+    }, 100);
+  };
+  const resetSlides = (index: number) => {
+    const dots = ref.$all('.slide-tab-c-nav-item');
+    for (let i = 0; i < dots.length; i++) {
+      dots[i].classList.toggle('active', i === index);
+    }
+  };
+  const drawerScrollStop = () => {
+    const drawer = ref.$('.slide-tab-c-list');
+    const width = drawer.clientWidth;
+    const currentScrollIndex = Math.round(drawer.scrollLeft / width);
+    slideIndex = currentScrollIndex;
+    resetSlides(slideIndex);
+  };
+  const moveSlide = (slideIndex: number) => {
+    const drawer = ref.$('.slide-tab-c-list');
+    const children = ref.$all('.slide-tab-c-slide');
+    if (!drawer || !children || children.length === 0) {
+      return;
+    }
+    const target = children[slideIndex];
+    if (!target) {
+      return;
+    }
+    const offsetLeft = target.offsetLeft;
+    manualScroll = true;
+    drawer.scrollTo({
+      left: offsetLeft,
+      behavior: 'smooth',
+    });
+
+    resetSlides(slideIndex);
+    setTimeout(() => {
+      manualScroll = false;
+    }, 300);
+  };
+
+  return (
+    <section class='slide-tab-c-box' ref={ref}>
+      <div class='slide-tab-c-nav'>
+        <div class='slide-tab-c-nav-wrap'>
+          {props.pages.map((page, index) => (
+            <div
+              class={`slide-tab-c-nav-item ${index === 0 ? 'active' : ''}`}
+              onClick={(event) => {
+                event.preventDefault();
+                moveSlide(index);
+              }}
+            >
+              {page.title}
+            </div>
+          ))}
+        </div>
+      </div>
+      <div class='slide-tab-c-list no-scrollbar-container' onScroll={drawerScroll}>
+        {props.pages.map((page) => (
+          <div class='slide-tab-c-slide no-scrollbar-container'>{page.content}</div>
+        ))}
+      </div>
+    </section>
+  );
+};