@mci-ui/mci-ui 0.0.85 → 0.0.86

package/dist/shared/ui/mciTable/MciTableColumnsPanel.js

@@ -1,92 +1,110 @@
-import { jsxs as i, jsx as n } from "react/jsx-runtime";
-import { useRef as G, useEffect as Y, useMemo as z, useState as f, useCallback as g } from "react";
-import { TransferVertical as q } from "@solar-icons/react";
-import { useClickOutside as H, cn as b } from "../../lib/utils.js";
+import { jsxs as u, jsx as n } from "react/jsx-runtime";
+import { useRef as G, useEffect as K, useMemo as j, useState as h, useCallback as b } from "react";
+import { TransferVertical as _ } from "@solar-icons/react";
+import { useClickOutside as q, cn as f } from "../../lib/utils.js";
 /* empty css                 */
-import J from "../mciCheck/MciCheck.js";
-function Z({
-  open: m,
-  onClose: w,
+import H from "../mciCheck/MciCheck.js";
+const J = {
+  ru: {
+    title: "Настройки",
+    close: "Закрыть",
+    activeColumns: "Активные колонки",
+    minColumns: (i) => `Минимум ${i} колонок`,
+    drag: "Перетащить"
+  },
+  uz: {
+    title: "Sozlamalar",
+    close: "Yopish",
+    activeColumns: "Aktiv ustunlar",
+    minColumns: (i) => `Kamida ${i} ta ustun`,
+    drag: "Sudrash"
+  }
+};
+function ee({
+  open: i,
+  onClose: D,
   columns: s,
-  hidden: A,
-  onToggle: N,
+  hidden: w,
+  onToggle: C,
   onMove: y,
-  onMoveByKey: h,
-  minVisible: C = 5
+  onMoveByKey: p,
+  minVisible: T = 5,
+  locale: F = "ru"
 }) {
-  const T = G(null), { handleClick: p } = H(T, w);
-  Y(() => {
-    if (m)
-      return document.addEventListener("mousedown", p), () => document.removeEventListener("mousedown", p);
-  }, [m, p]);
-  const x = z(() => new Set(A), [A]), I = z(() => {
+  const S = G(null), { handleClick: v } = q(S, D), d = J[F];
+  K(() => {
+    if (i)
+      return document.addEventListener("mousedown", v), () => document.removeEventListener("mousedown", v);
+  }, [i, v]);
+  const x = j(() => new Set(w), [w]), I = j(() => {
     let e = 0;
     for (const t of s) x.has(t.key) || e++;
     return e;
-  }, [s, x]), [v, S] = f(null), [O, k] = f(null), [F, E] = f(null), [u, D] = f("before"), L = g(
+  }, [s, x]), [k, O] = h(null), [E, A] = h(null), [Q, L] = h(null), [m, N] = h("before"), z = b(
     (e, t, r) => {
       let a = r === "after" ? t + 1 : t;
       return e < a && (a -= 1), a;
     },
     []
-  ), d = g(() => {
-    S(null), E(null), k(null), D("before");
-  }, []), R = g(
+  ), g = b(() => {
+    O(null), L(null), A(null), N("before");
+  }, []), Y = b(
     (e, t, r) => {
-      S(t), E(String(r)), k(null), D("before"), e.dataTransfer.effectAllowed = "move", e.dataTransfer.setData("text/plain", String(t));
+      O(t), L(String(r)), A(null), N("before"), e.dataTransfer.effectAllowed = "move", e.dataTransfer.setData("text/plain", String(t));
       const a = new Image();
       a.src = "data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=", e.dataTransfer.setDragImage(a, 0, 0);
     },
     []
-  ), Q = g(
+  ), $ = b(
     (e, t) => {
       e.preventDefault();
-      const r = v ?? Number.parseInt(e.dataTransfer.getData("text/plain") || "-1", 10);
+      const r = k ?? Number.parseInt(e.dataTransfer.getData("text/plain") || "-1", 10);
       if (!Number.isFinite(r) || r < 0) {
-        d();
+        g();
         return;
       }
       const a = s[r], c = s[t];
       if (!a || !c) {
-        d();
+        g();
         return;
       }
-      const l = L(r, t, u);
-      l !== r && (h ? h(a.key, c.key, u) : y(r, l)), d();
+      const l = z(r, t, m);
+      l !== r && (p ? p(a.key, c.key, m) : y(r, l)), g();
     },
-    [s, L, v, u, y, h, d]
-  ), B = g(
+    [s, z, k, m, y, p, g]
+  ), B = b(
     (e, t) => {
-      t || N(e);
+      t || C(e);
     },
-    [N]
+    [C]
   );
-  return m ? /* @__PURE__ */ i(
+  return i ? /* @__PURE__ */ u(
     "div",
     {
-      ref: T,
-      className: b(
+      ref: S,
+      className: f(
         "absolute right-0 top-full z-50 mt-2 w-[320px]",
         "rounded-2xl p-4 bg-white",
         "border border-slate-200"
       ),
       children: [
-        /* @__PURE__ */ i("div", { className: "flex items-center justify-between gap-4", children: [
-          /* @__PURE__ */ n("h4", { className: "text-slate-600 text-large font-normal", children: "Settings" }),
+        /* @__PURE__ */ u("div", { className: "flex items-center justify-between gap-4", children: [
+          /* @__PURE__ */ n("h4", { className: "text-slate-600 text-large font-normal", children: d.title }),
           /* @__PURE__ */ n(
             "button",
             {
               type: "button",
-              onClick: w,
+              onClick: D,
               className: "rounded-lg px-2 py-1 text-slate-500 hover:bg-slate-100",
-              "aria-label": "Close",
+              "aria-label": d.close,
               children: "✕"
             }
           )
         ] }),
         /* @__PURE__ */ n("div", { className: "my-4 h-px bg-slate-100" }),
-        /* @__PURE__ */ i("p", { className: "mb-3 text-xs text-slate-500", children: [
-          "Active columns: ",
+        /* @__PURE__ */ u("p", { className: "mb-3 text-xs text-slate-500", children: [
+          d.activeColumns,
+          ": ",
           I,
           "/",
           s.length
@@ -94,7 +112,7 @@ function Z({
         /* @__PURE__ */ n(
           "div",
           {
-            className: b(
+            className: f(
               "max-h-[275px] overflow-auto",
               "[&::-webkit-scrollbar]:w-1.5",
               "[&::-webkit-scrollbar-track]:bg-transparent",
@@ -103,31 +121,31 @@ function Z({
               "hover:[&::-webkit-scrollbar-thumb]:bg-slate-300"
             ),
             children: s.map((e, t) => {
-              const r = !x.has(e.key), a = r && I <= C, c = O === t, l = F === e.key;
-              return /* @__PURE__ */ i("div", { className: "relative", children: [
+              const r = !x.has(e.key), a = r && I <= T, c = E === t, l = Q === e.key;
+              return /* @__PURE__ */ u("div", { className: "relative", children: [
                 c && !l && /* @__PURE__ */ n(
                   "div",
                   {
-                    className: b(
+                    className: f(
                       "pointer-events-none absolute left-2 right-2 z-10 h-0.5 rounded-full bg-blue-300",
-                      u === "before" ? "top-0" : "bottom-0"
+                      m === "before" ? "top-0" : "bottom-0"
                     )
                   }
                 ),
-                /* @__PURE__ */ i(
+                /* @__PURE__ */ u(
                   "div",
                   {
                     draggable: !0,
-                    onDragStart: (o) => R(o, t, e.key),
+                    onDragStart: (o) => Y(o, t, e.key),
                     onDragOver: (o) => {
-                      if (v == null) return;
+                      if (k == null) return;
                       o.preventDefault(), o.dataTransfer.dropEffect = "move";
-                      const P = o.currentTarget.getBoundingClientRect(), j = o.clientY - P.top > P.height / 2 ? "after" : "before";
-                      O !== t && k(t), u !== j && D(j);
+                      const P = o.currentTarget.getBoundingClientRect(), R = o.clientY - P.top > P.height / 2 ? "after" : "before";
+                      E !== t && A(t), m !== R && N(R);
                     },
-                    onDrop: (o) => Q(o, t),
-                    onDragEnd: d,
-                    className: b(
+                    onDrop: (o) => $(o, t),
+                    onDragEnd: g,
+                    className: f(
                       "group flex items-center py-2 px-1 gap-4",
                       "rounded-md box-border overflow-visible",
                       "transition-[background,transform] duration-150",
@@ -140,18 +158,18 @@ function Z({
                         "button",
                         {
                           type: "button",
-                          className: b(
+                          className: f(
                             "shrink-0 text-slate-400",
                             "cursor-grab active:cursor-grabbing",
                             "rounded-lg p-1 hover:bg-slate-100",
                             l && "cursor-grabbing"
                           ),
-                          "aria-label": "Drag",
-                          children: /* @__PURE__ */ n(q, { weight: "Linear", size: 20 })
+                          "aria-label": d.drag,
+                          children: /* @__PURE__ */ n(_, { weight: "Linear", size: 20 })
                         }
                       ),
                       /* @__PURE__ */ n("div", { className: "shrink-0", children: /* @__PURE__ */ n(
-                        J,
+                        H,
                         {
                           checked: r,
                           disabled: a,
@@ -159,13 +177,9 @@ function Z({
                           variant: "blue"
                         }
                       ) }),
-                      /* @__PURE__ */ i("div", { className: "min-w-0 flex-1", children: [
+                      /* @__PURE__ */ u("div", { className: "min-w-0 flex-1", children: [
                         /* @__PURE__ */ n("h4", { className: "truncate text-slate-700 text-base font-medium", title: e.title, children: e.title }),
-                        a && /* @__PURE__ */ i("p", { className: "text-xs text-slate-400 mt-0.5", children: [
-                          "Минимум ",
-                          C,
-                          " колонок"
-                        ] })
+                        a && /* @__PURE__ */ n("p", { className: "text-xs text-slate-400 mt-0.5", children: d.minColumns(T) })
                       ] })
                     ]
                   }
@@ -180,5 +194,5 @@ function Z({
   ) : null;
 }
 export {
-  Z as default
+  ee as default
 };

package/dist/types/shared/types/mci-table.types.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 export type Align = 'left' | 'center' | 'right';
 export type ColumnKey<T> = Extract<keyof T, string>;
+export type MciTablePanelLocale = 'ru' | 'uz';
 export type MciTableColumn<T> = {
     key: ColumnKey<T>;
     title: string;

package/dist/types/shared/ui/mciTable/MciTableColumnsPanel.d.ts

@@ -1,4 +1,4 @@
-import { ColumnKey, MciTableColumn } from '../../types/mci-table.types.ts';
+import { ColumnKey, MciTableColumn, MciTablePanelLocale } from '../../types/mci-table.types.ts';
 type DropPosition = 'before' | 'after';
 type Props<T extends Record<string, unknown>> = {
     open: boolean;
@@ -9,6 +9,7 @@ type Props<T extends Record<string, unknown>> = {
     onMove: (from: number, to: number) => void;
     onMoveByKey?: (from: ColumnKey<T>, to: ColumnKey<T>, position: DropPosition) => void;
     minVisible?: number;
+    locale?: MciTablePanelLocale;
 };
-export default function MciTableColumnsPanel<T extends Record<string, unknown>>({ open, onClose, columns, hidden, onToggle, onMove, onMoveByKey, minVisible, }: Props<T>): import("react/jsx-runtime").JSX.Element | null;
+export default function MciTableColumnsPanel<T extends Record<string, unknown>>({ open, onClose, columns, hidden, onToggle, onMove, onMoveByKey, minVisible, locale, }: Props<T>): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mci-ui/mci-ui",
   "private": false,
-  "version": "0.0.85",
+  "version": "0.0.86",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",