lupine.components 1.1.10 → 1.1.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lupine.components",
-  "version": "1.1.10",
+  "version": "1.1.11",
   "license": "MIT",
   "author": "uuware.com",
   "homepage": "https://github.com/uuware/lupine.js",
@@ -39,4 +39,4 @@
   "dependencies": {
     "lupine.web": "^1.0.0"
   }
-}
+}

package/src/components/index.ts

@@ -24,10 +24,14 @@ export * from './paging-link';
 export * from './panel';
 export * from './popup-menu';
 export * from './progress';
+export * from './radio-label-component';
 export * from './redirect';
 export * from './resizable-splitter';
+export * from './select-angle-component';
 export * from './select-with-title';
+export * from './slide-tab-component';
 export * from './spinner';
+export * from './stars-component';
 export * from './svg';
 export * from './tabs';
 export * from './text-glow';

package/src/components/radio-label-component.tsx

@@ -0,0 +1,36 @@
+import { bindGlobalStyle, CssProps } from 'lupine.components';
+
+export const RadioLabelComponent = (props: {
+  label: string;
+  name: string;
+  checked?: boolean;
+  disabled?: boolean;
+  onChange?: (checked: boolean) => void;
+  className?: string;
+  radioClassname?: string;
+}) => {
+  const css: CssProps = {
+    display: 'flex',
+    '& > label': {
+      display: 'flex',
+      alignItems: 'center',
+    },
+  };
+  bindGlobalStyle('radio-label-component', css);
+
+  return (
+    <div class={'radio-label-component' + (props.className ? ' ' + props.className : '')}>
+      <label>
+        <input
+          type='radio'
+          name={props.name}
+          class={'input-base input-s' + (props.radioClassname ? ' ' + props.radioClassname : '')}
+          checked={props.checked}
+          disabled={props.disabled}
+          onChange={(event) => props.onChange?.((event.target as HTMLInputElement).checked)}
+        />
+        <span class='ml-ss'>{props.label}</span>
+      </label>
+    </div>
+  );
+};

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

@@ -0,0 +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>
+  );
+};

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

@@ -0,0 +1,149 @@
+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>
+  );
+};

package/src/components/stars-component.tsx

@@ -0,0 +1,66 @@
+import { bindGlobalStyle, CssProps, RefProps } from 'lupine.components';
+
+export type StarsHookComponentProps = {
+  setValue: (value: number) => void;
+  getValue: () => number;
+};
+export type StarsComponentProps = {
+  maxLength: number;
+  value: number;
+  onChange?: (value: number) => void;
+  hook?: StarsHookComponentProps;
+  fontSize?: string;
+};
+export const StarsComponent = (props: StarsComponentProps) => {
+  const css: CssProps = {
+    display: 'flex',
+    flexDirection: 'row',
+    '.stars-label': {
+      color: '#9d9d9d',
+      cursor: 'pointer',
+      display: 'flex',
+      alignItems: 'center',
+    },
+    '.stars-label.active': {
+      color: 'blue',
+    },
+    '.stars-label .full, .stars-label.active .outline': {
+      display: 'none',
+    },
+    '.stars-label.active .full, .stars-label .outline': {
+      display: 'inline',
+    },
+  };
+  bindGlobalStyle('stars-box', css);
+
+  const setValue = (value: number) => {
+    props.value = value;
+    const stars = ref.$all('.stars-label') as NodeListOf<Element>;
+    stars.forEach((star, index) => {
+      star.classList.toggle('active', index < value);
+    });
+  };
+  if (props.hook) {
+    props.hook.setValue = (value) => {
+      setValue(value);
+    };
+    props.hook.getValue = () => props.value;
+  }
+  const ref: RefProps = {};
+  return (
+    <div style={{ fontSize: props.fontSize || '20px' }} ref={ref} class='stars-box'>
+      {Array.from({ length: props.maxLength }).map((value, index) => (
+        <label
+          class={'stars-label' + (index < props.value ? ' active' : '')}
+          onClick={() => {
+            setValue(index + 1);
+            props.onChange?.(index + 1);
+          }}
+        >
+          <i class='ifc-icon ma-cards-heart full'></i>
+          <i class='ifc-icon ma-cards-heart-outline outline'></i>
+        </label>
+      ))}
+    </div>
+  );
+};