@deepnoid/ui 0.0.110 → 0.0.112

package/README.md

@@ -4,7 +4,7 @@
 yarn add @deepnoid/ui
 ```
 
-tailwind.config.ts 사용 예시 ✨
+tailwind.config.ts 사용 예시
 
 ```ts
 import type { Config } from "tailwindcss";

package/dist/{chunk-UZL66GNP.mjs → chunk-YRMFIXXC.mjs}

@@ -2,6 +2,9 @@
 import {
   usePagination_default
 } from "./chunk-F3HENRVM.mjs";
+import {
+  input_default
+} from "./chunk-ZNEEYSIK.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";
@@ -21,6 +24,7 @@ var Pagination = forwardRef((originalProps, ref) => {
     totalPage,
     showPageNumber = true,
     showPageLabel,
+    showPageInput,
     showFirstLastButtons,
     handleChangePage
   } = props;
@@ -33,8 +37,8 @@ var Pagination = forwardRef((originalProps, ref) => {
   const slots = useMemo(() => pagination({ ...variantProps }), [variantProps]);
   const getBaseProps = useCallback(() => ({ className: slots.base({ class: classNames == null ? void 0 : classNames.base }) }), [slots, classNames]);
   const getLabelProps = useCallback(
-    () => ({ className: slots.label({ class: classNames == null ? void 0 : classNames.label }) }),
-    [slots, classNames]
+    () => ({ className: `${slots.label({ class: classNames == null ? void 0 : classNames.label })} + ${showPageInput && " !min-w-[55px]"}` }),
+    [slots, classNames, showPageInput]
   );
   const getWrapperProps = useCallback(
     () => ({ className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }) }),
@@ -45,8 +49,40 @@ var Pagination = forwardRef((originalProps, ref) => {
     () => ({ className: slots.button({ class: classNames == null ? void 0 : classNames.button }) }),
     [slots, classNames]
   );
+  const getLabelWrapperProps = useCallback(
+    () => ({
+      className: "flex shrink-0",
+      onSubmit: (e) => {
+        e.preventDefault();
+        if (showPageInput && handleChangePage) {
+          const formData = new FormData(e.target);
+          const page = formData.get("pagination-input");
+          if (page) handleChangePage(+page);
+        }
+      }
+    }),
+    [handleChangePage, showPageInput]
+  );
+  const getInputProps = useCallback(
+    () => ({
+      defaultValue: currentPage,
+      size: "sm",
+      name: "pagination-input",
+      type: "number",
+      max: totalPage,
+      min: 1,
+      classNames: { inputWrapper: "!w-[48px] h-[20px] px-[6px]", input: "input-arrow-hide" }
+    }),
+    [currentPage, totalPage]
+  );
   return /* @__PURE__ */ jsxs("div", { ...getBaseProps(), children: [
-    showPageLabel && /* @__PURE__ */ jsx("span", { ...getLabelProps(), children: `${currentPage} of ${totalPage}` }),
+    /* @__PURE__ */ jsxs("form", { ...getLabelWrapperProps(), children: [
+      showPageInput && /* @__PURE__ */ jsx(input_default, { ...getInputProps() }, `${currentPage}+pagination-input`),
+      showPageLabel && /* @__PURE__ */ jsxs("span", { ...getLabelProps(), children: [
+        !showPageInput && currentPage,
+        ` of ${totalPage}`
+      ] })
+    ] }),
     /* @__PURE__ */ jsxs("div", { ...getWrapperProps(), children: [
       showFirstLastButtons && /* @__PURE__ */ jsx(
         "div",