lupine.components 1.1.47 → 1.1.48

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lupine.components",
-  "version": "1.1.47",
+  "version": "1.1.48",
   "license": "MIT",
   "author": "uuware.com",
   "homepage": "https://github.com/uuware/lupine.js",

package/src/components/toggle-base.tsx

@@ -41,11 +41,14 @@ export const ToggleBase = (props: ToggleBaseProps) => {
     },
   };
   const onClick = (e: MouseEvent) => {
+    e.preventDefault();
     if (disabled) {
       return;
     }
 
-    const checked = (e.target as HTMLInputElement).checked;
+    const input = ref.$('input.toggle-base-checkbox') as HTMLInputElement;
+    const checked = !input.checked;
+    input.checked = checked;
     !props.noToggle && applyToggle(checked, disabled);
     if (props.onClick) {
       props.onClick(checked);
@@ -77,6 +80,12 @@ export const ToggleBase = (props: ToggleBaseProps) => {
       width: `100%`,
       height: `100%`,
     },
+    '.toggle-base-box': {
+      cursor: 'pointer',
+      userSelect: 'none',
+      '-webkit-tap-highlight-color': 'transparent',
+      touchAction: 'manipulation',
+    },
     '.toggle-base-checkbox': {
       opacity: 0,
       width: 0,
@@ -95,14 +104,13 @@ export const ToggleBase = (props: ToggleBaseProps) => {
       }}
       class={['toggle-base-component', props.className].join(' ').trim()}
     >
-      <label class='toggle-base-box'>
+      <label class='toggle-base-box' onClick={onClick}>
         <div class='toggle-base-container'>{props.children}</div>
         <input
           type='checkbox'
           class='toggle-base-checkbox'
           checked={props.checked || false}
           disabled={disabled}
-          onClick={onClick}
         />
       </label>
     </div>

package/src/frames/slider-frame.tsx

@@ -12,16 +12,12 @@
     </div>
   );
 */
-import { VNode, stopPropagation } from 'lupine.components';
+import { MediaQueryMaxWidth, VNode, stopPropagation } from 'lupine.components';
 import { SliderHelper, SliderHelperCloseProps } from './slider-helper';
 
-// addClass(SliderFramePosition) is used to show two SliderFrames for big screens,
-// so when the second is showing, it needs to set this on the first one
-export type SliderFramePosition = 'desktop-slide-left' | 'desktop-slide-right';
 export type SliderFrameHookProps = {
   load?: (children: VNode<any>) => void;
   close?: (event: Event) => void;
-  addClass?: (className: SliderFramePosition) => void;
   isOpened?: () => boolean;
 };
 
@@ -30,12 +26,11 @@ export type SliderFrameProps = {
   direction?: 'right' | 'bottom';
   hook?: SliderFrameHookProps;
   afterClose?: () => void | Promise<void>;
+  maxWidth?: string;
 };
-// deprecated
 export const SliderFrame = (props: SliderFrameProps) => {
   let closeSlider: SliderHelperCloseProps | undefined;
   let opened = false;
-  let className = '';
 
   if (props.hook) {
     props.hook.load = (children) => {
@@ -43,7 +38,7 @@ export const SliderFrame = (props: SliderFrameProps) => {
       SliderHelper.show({
         direction: props.direction || 'right',
         children,
-        className,
+        maxWidth: props.maxWidth || MediaQueryMaxWidth.MobileMax,
         closeEvent: () => {
           opened = false;
           closeSlider = undefined;
@@ -57,10 +52,6 @@ export const SliderFrame = (props: SliderFrameProps) => {
       stopPropagation(event);
       closeSlider?.();
     };
-    // deprecated
-    props.hook.addClass = (newClassName) => {
-      className = [className, newClassName].join(' ').trim();
-    };
     props.hook.isOpened = () => {
       return opened;
     };