@fluixi-ui/date-picker 0.3.0-alpha.12 → 0.3.0-alpha.14

package/dist/date-range-picker.js

@@ -1,12 +1,13 @@
-import { createSignal, untrack, createRenderEffect, createMemo, createEffect } from "@fluixi/reactive/signal";
 import { createComponent, splitProps, mergeProps, createNativeElement, spread, insert, templateNode, handleRef, delegateEvents } from "@fluixi/dom";
+import { createSignal, untrack, createRenderEffect, createMemo, createEffect } from "@fluixi/reactive/signal";
+import { fxProps } from "@fluixi-ui/fx";
 import { useRef, Show } from "@fluixi/core";
 import { createControllableSignal, createControllableBooleanSignal, createId, composeId, composeEventHandlers, createSafeContext } from "@fluixi-ui/kit";
 import { Portal, createFloatingPosition, createDismissableLayer, createFocusScope } from "@fluixi-ui/primitives";
 import { DateField, DateInput } from "@fluixi-ui/date-field";
 import { RangeCalendar, CalendarHeader, CalendarPrevButton, CalendarHeading, CalendarNextButton, CalendarGrid } from "@fluixi-ui/calendar";
-const _tmpl$0 = '<span aria-hidden="true" data-date-range-separator="">–</span>';
-delegateEvents(["change", "click", "keydown"]);
+const _fxTmpl$0 = '<span aria-hidden="true" data-date-range-separator="">–</span>';
+delegateEvents(["change", "keydown", "click"]);
 const [DateRangePickerProvider, useDateRangePickerContext] = createSafeContext("DateRangePicker");
 function DateRangePicker(props) {
   const [value, setValue] = createControllableSignal({
@@ -31,10 +32,7 @@ function DateRangePicker(props) {
   const commit = () => {
     const s = start();
     const e = end();
-    setValue(s && e ? {
-      start: s,
-      end: e
-    } : null);
+    setValue(s && e ? { start: s, end: e } : null);
   };
   const baseId = createId("date-range-picker");
   const [triggerRef, setTriggerRef] = createSignal(void 0);
@@ -57,10 +55,7 @@ function DateRangePicker(props) {
     },
     isOpen,
     setOpen: (o) => setOpen(o),
-    ids: {
-      label: composeId(baseId, "label"),
-      content: composeId(baseId, "content")
-    },
+    ids: { label: composeId(baseId, "label"), content: composeId(baseId, "content") },
     triggerRef,
     setTriggerRef,
     placement: props.placement ?? "bottom-start",
@@ -74,177 +69,129 @@ function DateRangePicker(props) {
     isReadOnly: () => props.isReadOnly ?? false,
     isDateUnavailable: props.isDateUnavailable
   };
-  return createMemo(() => createComponent(DateRangePickerProvider, {
-    get value() {
-      return ctx;
-    },
-    get children() {
-      return props.children;
-    }
-  }));
+  return createMemo(() => createComponent(DateRangePickerProvider, { get value() {
+    return ctx;
+  }, get children() {
+    return props.children;
+  } }));
 }
 function DateRangePickerLabel(props) {
   const ctx = useDateRangePickerContext();
-  const [local, others] = splitProps(props, ["children"]);
+  const [local, others] = splitProps(props, ["children", "fx", "style"]);
   return (() => {
     const _el$ = createNativeElement("span");
-    spread({
-      element: _el$,
-      props: mergeProps(others, {
-        id: () => ctx.ids.label,
-        "data-date-picker-label": ""
-      })
-    });
+    spread({ element: _el$, props: mergeProps(fxProps(
+      () => local.fx,
+      () => local.style
+    ), others, { id: () => ctx.ids.label, "data-date-picker-label": "" }) });
     insert(_el$, local.children);
     return _el$;
   })();
 }
 function EndpointField(props) {
   const ctx = useDateRangePickerContext();
-  return createMemo(() => createComponent(DateField, {
-    get value() {
-      return props.value;
-    },
-    get onChange() {
-      return props.onChange;
-    },
-    get locale() {
-      return ctx.locale;
-    },
-    get granularity() {
-      return ctx.granularity;
-    },
-    get hourCycle() {
-      return ctx.hourCycle;
-    },
-    get minValue() {
-      return ctx.minValue;
-    },
-    get maxValue() {
-      return ctx.maxValue;
-    },
-    get isDisabled() {
-      return ctx.isDisabled;
-    },
-    get isReadOnly() {
-      return ctx.isReadOnly;
-    },
-    get children() {
-      return createMemo(() => createComponent(DateInput, {
-        get "aria-labelledby"() {
-          return ctx.ids.label;
-        },
-        get "data-date-picker-input"() {
-          return "";
-        }
-      }));
-    }
-  }));
+  return createMemo(() => createComponent(DateField, { get value() {
+    return props.value;
+  }, get onChange() {
+    return props.onChange;
+  }, get locale() {
+    return ctx.locale;
+  }, get granularity() {
+    return ctx.granularity;
+  }, get hourCycle() {
+    return ctx.hourCycle;
+  }, get minValue() {
+    return ctx.minValue;
+  }, get maxValue() {
+    return ctx.maxValue;
+  }, get isDisabled() {
+    return ctx.isDisabled;
+  }, get isReadOnly() {
+    return ctx.isReadOnly;
+  }, get children() {
+    return createMemo(() => createComponent(DateInput, { get "aria-labelledby"() {
+      return ctx.ids.label;
+    }, get "data-date-picker-input"() {
+      return "";
+    } }));
+  } }));
 }
 function DateRangePickerField(props) {
   const ctx = useDateRangePickerContext();
-  const [local, others] = splitProps(props, ["ref", "children"]);
+  const [local, others] = splitProps(props, ["ref", "children", "fx", "style"]);
   const setRef = (node) => {
     ctx.setTriggerRef(node);
     handleRef(local.ref, node);
   };
   return (() => {
     const _el$ = createNativeElement("div");
-    spread({
-      element: _el$,
-      props: mergeProps(others, {
-        ref: setRef,
-        role: "group",
-        "aria-labelledby": () => ctx.ids.label,
-        "data-date-picker-control": "",
-        "data-date-range": ""
-      })
-    });
-    insert(_el$, createMemo(() => createComponent(EndpointField, {
-      get value() {
-        return ctx.start;
-      },
-      get onChange() {
-        return ctx.setStart;
-      }
-    })), null);
-    insert(_el$, templateNode(_tmpl$0, "span"));
-    insert(_el$, createMemo(() => createComponent(EndpointField, {
-      get value() {
-        return ctx.end;
-      },
-      get onChange() {
-        return ctx.setEnd;
-      }
-    })), null);
+    spread({ element: _el$, props: mergeProps(fxProps(
+      () => local.fx,
+      () => local.style
+    ), others, { ref: setRef, role: "group", "aria-labelledby": () => ctx.ids.label, "data-date-picker-control": "", "data-date-range": "" }) });
+    insert(_el$, createMemo(() => createComponent(EndpointField, { get value() {
+      return ctx.start;
+    }, get onChange() {
+      return ctx.setStart;
+    } })), null);
+    insert(_el$, templateNode(_fxTmpl$0, "span"));
+    insert(_el$, createMemo(() => createComponent(EndpointField, { get value() {
+      return ctx.end;
+    }, get onChange() {
+      return ctx.setEnd;
+    } })), null);
     insert(_el$, local.children ?? createMemo(() => createComponent(DateRangePickerTrigger, {})));
     return _el$;
   })();
 }
 function DateRangePickerTrigger(props) {
   const ctx = useDateRangePickerContext();
-  const [local, others] = splitProps(props, ["onClick", "children"]);
+  const [local, others] = splitProps(props, ["onClick", "children", "fx", "style"]);
   return (() => {
     const _el$ = createNativeElement("button");
-    spread({
-      element: _el$,
-      props: mergeProps(others, {
-        type: "button",
-        "aria-haspopup": "dialog",
-        "aria-expanded": () => ctx.isOpen() ? "true" : "false",
-        "aria-controls": () => ctx.ids.content,
-        "aria-label": "Open calendar",
-        disabled: () => ctx.isDisabled(),
-        "data-date-picker-trigger": "",
-        onClick: composeEventHandlers([local.onClick, () => {
-          if (ctx.isDisabled() || ctx.isReadOnly()) return;
-          ctx.setOpen(!ctx.isOpen());
-        }])
-      })
-    });
+    spread({ element: _el$, props: mergeProps(fxProps(
+      () => local.fx,
+      () => local.style
+    ), others, { type: "button", "aria-haspopup": "dialog", "aria-expanded": (() => ctx.isOpen() ? "true" : "false"), "aria-controls": () => ctx.ids.content, "aria-label": "Open calendar", disabled: (() => ctx.isDisabled()), "data-date-picker-trigger": "", onClick: composeEventHandlers([
+      local.onClick,
+      () => {
+        if (ctx.isDisabled() || ctx.isReadOnly()) return;
+        ctx.setOpen(!ctx.isOpen());
+      }
+    ]) }) });
     insert(_el$, local.children ?? "📅");
     return _el$;
   })();
 }
 function DateRangePickerContent(props) {
   const ctx = useDateRangePickerContext();
-  const [local, others] = splitProps(props, ["ref", "children", "style"]);
+  const [local, others] = splitProps(props, ["ref", "children", "style", "fx", "style"]);
   const [element, setElement] = createSignal(void 0);
   const portalRef = useRef(null);
   createEffect(() => {
     if (!ctx.isOpen() && portalRef.current) portalRef.current.remove();
   });
-  return createMemo(() => createComponent(Show, {
-    get when() {
-      return ctx.isOpen();
-    },
-    get children() {
-      return createMemo(() => createComponent(Portal, {
-        get ref() {
-          return portalRef;
-        },
-        get children() {
-          return createMemo(() => createComponent(FloatingPanel, mergeProps(others, {
-            get setElement() {
-              return setElement;
-            },
-            get element() {
-              return element;
-            },
-            get forwardRef() {
-              return local.ref;
-            },
-            get style() {
-              return local.style;
-            },
-            get children() {
-              return local.children ?? createMemo(() => createComponent(DateRangePickerCalendar, {}));
-            }
-          })));
-        }
-      }));
-    }
-  }));
+  return createMemo(() => createComponent(Show, { get when() {
+    return ctx.isOpen();
+  }, get children() {
+    return createMemo(() => createComponent(Portal, { get ref() {
+      return portalRef;
+    }, get children() {
+      return createMemo(() => createComponent(FloatingPanel, mergeProps(others, { get setElement() {
+        return setElement;
+      }, get element() {
+        return element;
+      }, get forwardRef() {
+        return local.ref;
+      }, get fx() {
+        return local.fx;
+      }, get style() {
+        return local.style;
+      }, get children() {
+        return local.children ?? createMemo(() => createComponent(DateRangePickerCalendar, {}));
+      } })));
+    } }));
+  } }));
 }
 function FloatingPanel(props) {
   const ctx = useDateRangePickerContext();
@@ -259,11 +206,7 @@ function FloatingPanel(props) {
     },
     onDismiss: () => ctx.setOpen(false)
   });
-  createFocusScope(props.element, {
-    trap: false,
-    autoFocus: true,
-    restoreFocus: true
-  });
+  createFocusScope(props.element, { trap: false, autoFocus: true, restoreFocus: true });
   createRenderEffect(() => {
     const el = props.element();
     if (!el) return;
@@ -277,73 +220,48 @@ function FloatingPanel(props) {
   };
   return (() => {
     const _el$ = createNativeElement("div");
-    spread({
-      element: _el$,
-      props: {
-        ref: setRef,
-        role: "dialog",
-        id: () => ctx.ids.content,
-        "aria-label": "Calendar",
-        "data-date-picker-content": "",
-        "data-placement": () => position.placement(),
-        style: () => props.style,
-        tabindex: -1,
-        onKeyDown: (e) => {
-          if (e.key === "Escape") {
-            e.stopPropagation();
-            ctx.setOpen(false);
-            ctx.triggerRef()?.querySelector("[data-date-picker-trigger]")?.focus();
-          }
-        }
+    spread({ element: _el$, props: mergeProps(fxProps(
+      () => props.fx,
+      () => props.style
+    ), { ref: setRef, role: "dialog", id: () => ctx.ids.content, "aria-label": "Calendar", "data-date-picker-content": "", "data-placement": (() => position.placement()), tabindex: -1, onKeyDown: ((e) => {
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        ctx.setOpen(false);
+        ctx.triggerRef()?.querySelector("[data-date-picker-trigger]")?.focus();
       }
-    });
+    }) }) });
     insert(_el$, props.children);
     return _el$;
   })();
 }
 function DateRangePickerCalendar() {
   const ctx = useDateRangePickerContext();
-  return createMemo(() => createComponent(RangeCalendar, {
-    get value() {
-      return ctx.value;
-    },
-    get onChange() {
-      return (range) => {
-        ctx.selectRange(range);
-        if (range) ctx.setOpen(false);
-      };
-    },
-    get locale() {
-      return ctx.locale;
-    },
-    get minValue() {
-      return ctx.minValue;
-    },
-    get maxValue() {
-      return ctx.maxValue;
-    },
-    get isDateUnavailable() {
-      return ctx.isDateUnavailable;
-    },
-    get "data-date-picker-calendar"() {
-      return "";
-    },
-    get children() {
-      return [createMemo(() => createComponent(CalendarHeader, {
-        get children() {
-          return [createMemo(() => createComponent(CalendarPrevButton, {
-            get children() {
-              return "‹";
-            }
-          })), createMemo(() => createComponent(CalendarHeading, {})), createMemo(() => createComponent(CalendarNextButton, {
-            get children() {
-              return "›";
-            }
-          }))];
-        }
-      })), createMemo(() => createComponent(CalendarGrid, {}))];
-    }
-  }));
+  return createMemo(() => createComponent(RangeCalendar, { get value() {
+    return ctx.value;
+  }, get onChange() {
+    return ((range) => {
+      ctx.selectRange(range);
+      if (range) ctx.setOpen(false);
+    });
+  }, get locale() {
+    return ctx.locale;
+  }, get minValue() {
+    return ctx.minValue;
+  }, get maxValue() {
+    return ctx.maxValue;
+  }, get isDateUnavailable() {
+    return ctx.isDateUnavailable;
+  }, get "data-date-picker-calendar"() {
+    return "";
+  }, get children() {
+    return [createMemo(() => createComponent(CalendarHeader, { get children() {
+      return [createMemo(() => createComponent(CalendarPrevButton, { get children() {
+        return "‹";
+      } })), createMemo(() => createComponent(CalendarHeading, {})), createMemo(() => createComponent(CalendarNextButton, { get children() {
+        return "›";
+      } }))];
+    } })), createMemo(() => createComponent(CalendarGrid, {}))];
+  } }));
 }
 export {
   DateRangePicker,