@wzyjs/uis 0.3.29 → 0.3.31

package/dist/layout/TabsPro/index.js

@@ -0,0 +1,87 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { Tabs } from 'antd';
+const getItemKeys = (items) => {
+    return (items || [])
+        .map(item => item?.key)
+        .filter((key) => typeof key === 'string' && !!key);
+};
+const getUrlTabKey = (queryKey) => {
+    if (typeof window === 'undefined') {
+        return undefined;
+    }
+    const value = new URLSearchParams(window.location.search).get(queryKey);
+    return value || undefined;
+};
+const updateUrlTabKey = (queryKey, key, mode) => {
+    if (typeof window === 'undefined') {
+        return;
+    }
+    const url = new URL(window.location.href);
+    url.searchParams.set(queryKey, key);
+    const nextUrl = `${url.pathname}${url.search}${url.hash}`;
+    if (mode === 'push') {
+        window.history.pushState(window.history.state, '', nextUrl);
+        return;
+    }
+    window.history.replaceState(window.history.state, '', nextUrl);
+};
+export const TabsPro = (props) => {
+    const { syncToUrl = false, queryKey = 'tab', historyMode = 'replace', activeKey, defaultActiveKey, items, onChange, ...rest } = props;
+    const itemKeys = React.useMemo(() => getItemKeys(items), [items]);
+    const initialKey = React.useMemo(() => {
+        const urlKey = syncToUrl ? getUrlTabKey(queryKey) : undefined;
+        if (urlKey && itemKeys.includes(urlKey)) {
+            return urlKey;
+        }
+        if (typeof defaultActiveKey === 'string' && itemKeys.includes(defaultActiveKey)) {
+            return defaultActiveKey;
+        }
+        return itemKeys[0];
+    }, [defaultActiveKey, itemKeys, queryKey, syncToUrl]);
+    const [innerActiveKey, setInnerActiveKey] = React.useState(initialKey);
+    const mergedActiveKey = typeof activeKey === 'string' ? activeKey : innerActiveKey;
+    React.useEffect(() => {
+        if (typeof activeKey === 'string') {
+            return;
+        }
+        setInnerActiveKey(prev => {
+            if (prev && itemKeys.includes(prev)) {
+                return prev;
+            }
+            return initialKey;
+        });
+    }, [activeKey, initialKey, itemKeys]);
+    React.useEffect(() => {
+        if (!syncToUrl || !mergedActiveKey) {
+            return;
+        }
+        updateUrlTabKey(queryKey, mergedActiveKey, historyMode);
+    }, [historyMode, mergedActiveKey, queryKey, syncToUrl]);
+    React.useEffect(() => {
+        if (!syncToUrl) {
+            return;
+        }
+        const onPopState = () => {
+            const urlKey = getUrlTabKey(queryKey);
+            if (!urlKey || !itemKeys.includes(urlKey)) {
+                return;
+            }
+            if (typeof activeKey !== 'string') {
+                setInnerActiveKey(urlKey);
+            }
+            onChange?.(urlKey);
+        };
+        window.addEventListener('popstate', onPopState);
+        return () => {
+            window.removeEventListener('popstate', onPopState);
+        };
+    }, [activeKey, itemKeys, onChange, queryKey, syncToUrl]);
+    return (_jsx(Tabs, { ...rest, items: items, activeKey: mergedActiveKey, onChange: key => {
+            if (typeof activeKey !== 'string') {
+                setInnerActiveKey(key);
+            }
+            onChange?.(key);
+        } }));
+};

package/dist/layout/index.d.ts

@@ -0,0 +1,6 @@
+export * from './FoldCard';
+export * from './ResizableGridLayout';
+export * from './TabsPro';
+export * from './DragSort';
+export * from './PageBase';
+export * from './SideMenu';

package/dist/layout/index.js

@@ -0,0 +1,6 @@
+export * from './FoldCard';
+export * from './ResizableGridLayout';
+export * from './TabsPro';
+export * from './DragSort';
+export * from './PageBase';
+export * from './SideMenu';

package/dist/web.css

@@ -0,0 +1,363 @@
+.pointer-events-none {
+    pointer-events: none
+}
+.visible {
+    visibility: visible
+}
+.collapse {
+    visibility: collapse
+}
+.fixed {
+    position: fixed
+}
+.absolute {
+    position: absolute
+}
+.relative {
+    position: relative
+}
+.inset-0 {
+    inset: 0px
+}
+.left-0 {
+    left: 0px
+}
+.right-0 {
+    right: 0px
+}
+.top-0 {
+    top: 0px
+}
+.z-10 {
+    z-index: 10
+}
+.m-2 {
+    margin: 0.5rem
+}
+.mx-auto {
+    margin-left: auto;
+    margin-right: auto
+}
+.mb-6 {
+    margin-bottom: 1.5rem
+}
+.ml-2 {
+    margin-left: 0.5rem
+}
+.mt-auto {
+    margin-top: auto
+}
+.block {
+    display: block
+}
+.flex {
+    display: flex
+}
+.contents {
+    display: contents
+}
+.hidden {
+    display: none
+}
+.h-full {
+    height: 100%
+}
+.h-px {
+    height: 1px
+}
+.h-screen {
+    height: 100vh
+}
+.w-16 {
+    width: 4rem
+}
+.w-40 {
+    width: 10rem
+}
+.w-48 {
+    width: 12rem
+}
+.w-full {
+    width: 100%
+}
+.w-px {
+    width: 1px
+}
+.max-w-7xl {
+    max-width: 80rem
+}
+.flex-1 {
+    flex: 1 1 0%
+}
+.-rotate-90 {
+    --tw-rotate: -90deg;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
+}
+.transform {
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
+}
+.transform-gpu {
+    transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
+}
+.cursor-pointer {
+    cursor: pointer
+}
+.select-none {
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none
+}
+.flex-col {
+    flex-direction: column
+}
+.flex-wrap {
+    flex-wrap: wrap
+}
+.items-center {
+    align-items: center
+}
+.justify-center {
+    justify-content: center
+}
+.justify-between {
+    justify-content: space-between
+}
+.gap-3 {
+    gap: 0.75rem
+}
+.space-y-4 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-y-reverse: 0;
+    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+    margin-bottom: calc(1rem * var(--tw-space-y-reverse))
+}
+.overflow-hidden {
+    overflow: hidden
+}
+.overflow-y-auto {
+    overflow-y: auto
+}
+.whitespace-nowrap {
+    white-space: nowrap
+}
+.whitespace-pre {
+    white-space: pre
+}
+.rounded {
+    border-radius: 0.25rem
+}
+.rounded-full {
+    border-radius: 9999px
+}
+.border {
+    border-width: 1px
+}
+.border-2 {
+    border-width: 2px
+}
+.border-t {
+    border-top-width: 1px
+}
+.border-dashed {
+    border-style: dashed
+}
+.border-none {
+    border-style: none
+}
+.border-blue-500 {
+    --tw-border-opacity: 1;
+    border-color: rgb(59 130 246 / var(--tw-border-opacity, 1))
+}
+.border-gray-200 {
+    --tw-border-opacity: 1;
+    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1))
+}
+.border-gray-300 {
+    --tw-border-opacity: 1;
+    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1))
+}
+.\!bg-blue-500 {
+    --tw-bg-opacity: 1 !important;
+    background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1)) !important
+}
+.bg-black\/40 {
+    background-color: rgb(0 0 0 / 0.4)
+}
+.bg-blue-50 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1))
+}
+.bg-gray-100 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1))
+}
+.bg-sky-500 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(14 165 233 / var(--tw-bg-opacity, 1))
+}
+.bg-white {
+    --tw-bg-opacity: 1;
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
+}
+.object-contain {
+    -o-object-fit: contain;
+       object-fit: contain
+}
+.p-4 {
+    padding: 1rem
+}
+.p-6 {
+    padding: 1.5rem
+}
+.px-4 {
+    padding-left: 1rem;
+    padding-right: 1rem
+}
+.py-2 {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem
+}
+.pr-4 {
+    padding-right: 1rem
+}
+.text-center {
+    text-align: center
+}
+.text-2xl {
+    font-size: 1.5rem;
+    line-height: 2rem
+}
+.text-base {
+    font-size: 1rem;
+    line-height: 1.5rem
+}
+.text-lg {
+    font-size: 1.125rem;
+    line-height: 1.75rem
+}
+.text-sm {
+    font-size: 0.875rem;
+    line-height: 1.25rem
+}
+.text-xl {
+    font-size: 1.25rem;
+    line-height: 1.75rem
+}
+.text-xs {
+    font-size: 0.75rem;
+    line-height: 1rem
+}
+.font-bold {
+    font-weight: 700
+}
+.font-medium {
+    font-weight: 500
+}
+.leading-none {
+    line-height: 1
+}
+.\!text-white {
+    --tw-text-opacity: 1 !important;
+    color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important
+}
+.text-blue-600 {
+    --tw-text-opacity: 1;
+    color: rgb(37 99 235 / var(--tw-text-opacity, 1))
+}
+.text-gray-500 {
+    --tw-text-opacity: 1;
+    color: rgb(107 114 128 / var(--tw-text-opacity, 1))
+}
+.text-gray-900 {
+    --tw-text-opacity: 1;
+    color: rgb(17 24 39 / var(--tw-text-opacity, 1))
+}
+.text-white {
+    --tw-text-opacity: 1;
+    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
+}
+.underline {
+    text-decoration-line: underline
+}
+.no-underline {
+    text-decoration-line: none
+}
+.opacity-30 {
+    opacity: 0.3
+}
+.outline {
+    outline-style: solid
+}
+.ring {
+    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
+}
+.ring-2 {
+    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
+}
+.ring-sky-500 {
+    --tw-ring-opacity: 1;
+    --tw-ring-color: rgb(14 165 233 / var(--tw-ring-opacity, 1))
+}
+.\!filter {
+    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important
+}
+.filter {
+    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
+}
+.transition {
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms
+}
+.transition-all {
+    transition-property: all;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms
+}
+.transition-colors {
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms
+}
+.duration-200 {
+    transition-duration: 200ms
+}
+.duration-300 {
+    transition-duration: 300ms
+}
+.hover\:border-blue-500:hover {
+    --tw-border-opacity: 1;
+    border-color: rgb(59 130 246 / var(--tw-border-opacity, 1))
+}
+.hover\:\!bg-gray-200:hover {
+    --tw-bg-opacity: 1 !important;
+    background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1)) !important
+}
+.hover\:bg-black\/60:hover {
+    background-color: rgb(0 0 0 / 0.6)
+}
+.hover\:\!text-gray-900:hover {
+    --tw-text-opacity: 1 !important;
+    color: rgb(17 24 39 / var(--tw-text-opacity, 1)) !important
+}
+.hover\:no-underline:hover {
+    text-decoration-line: none
+}
+.hover\:opacity-90:hover {
+    opacity: 0.9
+}
+.focus\:outline-none:focus {
+    outline: 2px solid transparent;
+    outline-offset: 2px
+}
+.focus\:ring-2:focus {
+    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
+}
+.focus\:ring-offset-2:focus {
+    --tw-ring-offset-width: 2px
+}

package/dist/web.d.ts

@@ -0,0 +1,7 @@
+import './web.css';
+export * from './antd';
+export * from './inputs';
+export * from './buttons';
+export * from './display';
+export * from './layout';
+export * from './advanced';

package/dist/web.js

@@ -0,0 +1,7 @@
+import './web.css';
+export * from './antd';
+export * from './inputs';
+export * from './buttons';
+export * from './display';
+export * from './layout';
+export * from './advanced';

package/package.json

@@ -1,22 +1,42 @@
 {
   "name": "@wzyjs/uis",
-  "version": "0.3.29",
+  "version": "0.3.31",
   "description": "description",
   "author": "wzy",
-  "sideEffects": false,
+  "type": "module",
+  "sideEffects": [
+    "./dist/web.js",
+    "**/*.css"
+  ],
+  "scripts": {
+    "build": "rm -rf dist && tsc && rsync -a --include='*/' --include='*.css' --exclude='*' src/ dist/ && postcss ./src/web.css -o ./dist/web.css"
+  },
   "files": [
-    "src"
+    "dist"
   ],
   "exports": {
     "./web": {
-      "import": "./src/web.ts"
+      "import": "./dist/web.js",
+      "types": "./dist/web.d.ts"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      "./web": [
+        "./dist/web.d.ts"
+      ]
     }
   },
   "dependencies": {
     "@ant-design/icons": "^6.0.0",
     "@ant-design/nextjs-registry": "^1.0.2",
+    "@ant-design/pro-card": "^2.10.0",
     "@ant-design/pro-components": "^2.8.6",
-    "ali-oss": "^6.21.0",
+    "@ant-design/pro-form": "^2.32.0",
+    "@ant-design/pro-provider": "^2.16.2",
+    "@hello-pangea/dnd": "^18.0.1",
+    "@wzyjs/hooks": "0.3.31",
+    "@xyflow/react": "^12.5.3",
     "echarts": "^5.4.3",
     "echarts-for-react": "^3.0.2",
     "github-markdown-css": "^5.8.1",
@@ -26,27 +46,29 @@
     "prettier": "^3.5.3",
     "prismjs": "^1.29.0",
     "react": "^19.0.0",
-    "react-beautiful-dnd": "^13.1.1",
     "react-grid-layout": "^1.5.1",
     "react-json-view": "^1.21.3",
     "react-markdown": "^10.1.0",
     "react-syntax-highlighter": "^15.5.0",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-slug": "^6.0.0",
-    "rehype-starry-night": "^2.2.0",
-    "remark-gfm": "^4.0.1",
-    "remark-toc": "^9.0.0"
+    "remark-gfm": "^4.0.1"
   },
   "peerDependencies": {
     "@wzyjs/hooks": "^0.2.37",
     "@wzyjs/utils": "^0.2.37",
-    "antd": "^6.0.0"
+    "antd": "^6.3.1"
   },
   "devDependencies": {
     "@types/js-beautify": "^1.14.3",
-    "@types/react-grid-layout": "1.3.5"
+    "@types/react": "^19.1.10",
+    "@types/react-grid-layout": "1.3.5",
+    "autoprefixer": "^10.4.21",
+    "postcss": "^8.5.6",
+    "postcss-cli": "^11.0.1",
+    "tailwindcss": "^3.4.18"
   },
-  "gitHead": "a78702bb9367a10779eaa376ed70834d8b42b5a8",
+  "gitHead": "896e51ffcc433e65605c351be0595918bc32573e",
   "publishConfig": {
     "access": "public"
   }

package/src/antd/form/CheckboxButton/index.module.scss

@@ -1,24 +0,0 @@
-.checkcard {
-  :global(.ant-pro-checkcard-content) {
-    padding: 0 !important;
-  }
-
-  :global(.ant-pro-checkcard) {
-    margin-bottom: 0 !important;
-    text-align: center !important;
-    display: flex;
-    justify-content: center;
-    border-radius: 0 !important;
-  }
-
-  :global(.ant-pro-checkcard-title) {
-    height: 100%;
-  }
-
-  :global(.ant-pro-checkcard div) {
-    width: 100%;
-    font-weight: 400 !important;
-    height: 30px !important;
-    line-height: 28px !important;
-  }
-}

package/src/antd/form/CheckboxButton/index.tsx

@@ -1,31 +0,0 @@
-'use client'
-
-import { Col, Row } from 'antd'
-import { CheckCard } from '@ant-design/pro-components'
-import { CheckCardValueType, CheckGroupValueType } from '@ant-design/pro-card/es/components/CheckCard/Group'
-
-import styles from './index.module.scss'
-
-interface CheckboxButtonProps {
-  options: { label: string; value: CheckCardValueType }[]
-  value?: CheckGroupValueType
-  onChange?: (value: CheckGroupValueType) => void
-}
-
-export const CheckboxButton = (props: CheckboxButtonProps) => {
-  const { options, value, onChange } = props
-
-  return (
-    <div className={styles.checkcard}>
-      <CheckCard.Group style={{ width: '100%' }} size='small' multiple value={value} onChange={onChange}>
-        <Row>
-          {options.map((item, index) => (
-            <Col key={index}>
-              <CheckCard title={item.label} value={item.value} style={{ width: 60, height: 30 }} />
-            </Col>
-          ))}
-        </Row>
-      </CheckCard.Group>
-    </div>
-  )
-}