wargerm 0.4.9 → 0.4.10

package/dist/components/Card/index.d.ts

@@ -1,12 +1,22 @@
-import { FC } from 'react';
+import React from 'react';
 import { ReactNode } from 'react';
+interface IsliderTabs {
+    tabs: Array<string>;
+    direction: 'left' | 'right';
+    defaultValue?: number;
+    className?: string;
+    tabClassName?: string;
+    activeTabClassName?: string;
+    components: Array<ReactNode>;
+}
 declare type Props = {
     title: ReactNode;
     className: string;
     headerTail?: ReactNode;
     headerCenter?: ReactNode;
     children?: ReactNode;
+    sliderTabs?: IsliderTabs;
     style?: Record<string, string>;
 };
-declare const Index: FC<Props>;
-export default Index;
+declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<any>>;
+export default _default;

package/dist/index.css

@@ -1058,6 +1058,45 @@ button[data-prefers-color='dark'] .swiper-pagination-bullet {
   transform: translate(-124px, -63px);
   padding: 12px 6px;
 }
+[data-prefers-color='dark'] .card-container .container-in .sliderTabs {
+  position: absolute;
+}
+[data-prefers-color='dark'] .card-container .container-in .sliderTabs.left {
+  right: -22px;
+  top: 80px;
+}
+[data-prefers-color='dark'] .card-container .container-in .sliderTabs.right {
+  left: -22px;
+  top: 80px;
+}
+[data-prefers-color='dark'] .card-container .container-in .sliderTabs.right .tab::before {
+  transform: skewy(-45deg);
+}
+[data-prefers-color='dark'] .card-container .container-in .sliderTabs .tab {
+  -ms-writing-mode: tb-lr;
+      writing-mode: vertical-lr;
+  position: relative;
+  margin-bottom: 2px;
+  cursor: pointer;
+  padding: 10px 2px;
+}
+[data-prefers-color='dark'] .card-container .container-in .sliderTabs .tab::before {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  transform: skewy(45deg);
+  left: 0;
+  top: 0;
+  background: rgba(81, 190, 246, 0.28);
+  border: 2px solid #51bef6;
+  transition: background 0.3s ease;
+  z-index: -1;
+}
+[data-prefers-color='dark'] .card-container .container-in .sliderTabs .tab.active::before {
+  background: #51bef6;
+  border: none;
+}
 [data-prefers-color='dark'] .card-container .container-in::before {
   content: '';
   position: absolute;

package/dist/index.esm.css

@@ -1058,6 +1058,45 @@ button[data-prefers-color='dark'] .swiper-pagination-bullet {
   transform: translate(-124px, -63px);
   padding: 12px 6px;
 }
+[data-prefers-color='dark'] .card-container .container-in .sliderTabs {
+  position: absolute;
+}
+[data-prefers-color='dark'] .card-container .container-in .sliderTabs.left {
+  right: -22px;
+  top: 80px;
+}
+[data-prefers-color='dark'] .card-container .container-in .sliderTabs.right {
+  left: -22px;
+  top: 80px;
+}
+[data-prefers-color='dark'] .card-container .container-in .sliderTabs.right .tab::before {
+  transform: skewy(-45deg);
+}
+[data-prefers-color='dark'] .card-container .container-in .sliderTabs .tab {
+  -ms-writing-mode: tb-lr;
+      writing-mode: vertical-lr;
+  position: relative;
+  margin-bottom: 2px;
+  cursor: pointer;
+  padding: 10px 2px;
+}
+[data-prefers-color='dark'] .card-container .container-in .sliderTabs .tab::before {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  transform: skewy(45deg);
+  left: 0;
+  top: 0;
+  background: rgba(81, 190, 246, 0.28);
+  border: 2px solid #51bef6;
+  transition: background 0.3s ease;
+  z-index: -1;
+}
+[data-prefers-color='dark'] .card-container .container-in .sliderTabs .tab.active::before {
+  background: #51bef6;
+  border: none;
+}
 [data-prefers-color='dark'] .card-container .container-in::before {
   content: '';
   position: absolute;

package/dist/index.esm.js

@@ -4,7 +4,7 @@ import 'antd/es/dropdown/style';
 import _Dropdown from 'antd/es/dropdown';
 import 'antd/es/menu/style';
 import _Menu from 'antd/es/menu';
-import React, { memo, useState, useEffect, useMemo, useImperativeHandle, useRef } from 'react';
+import React, { memo, useState, useEffect, useMemo, useImperativeHandle, useRef, forwardRef } from 'react';
 import { createFromIconfontCN, SearchOutlined, ReloadOutlined, CloseCircleOutlined, PlusOutlined, EllipsisOutlined, ExclamationCircleOutlined, EyeOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
 import 'antd/es/input/style';
 import _Input from 'antd/es/input';
@@ -9575,9 +9575,9 @@ var Index$b = function Index(_ref) {
   }, props));
 };
 
-var _excluded$d = ["title", "className", "headerTail", "headerCenter"];
+var _excluded$d = ["title", "className", "headerTail", "headerCenter", "sliderTabs"];
 
-var Index$c = function Index(_ref) {
+var Index$c = function Index(_ref, ref) {
   var _classNames;
 
   var title = _ref.title,
@@ -9585,8 +9585,20 @@ var Index$c = function Index(_ref) {
       className = _ref$className === void 0 ? 'default' : _ref$className,
       headerTail = _ref.headerTail,
       headerCenter = _ref.headerCenter,
+      sliderTabs = _ref.sliderTabs,
       props = _objectWithoutProperties(_ref, _excluded$d);
 
+  useImperativeHandle(ref, function () {
+    return {
+      activeTab: activeTab
+    };
+  });
+
+  var _useState = useState((sliderTabs === null || sliderTabs === void 0 ? void 0 : sliderTabs.defaultValue) || 0),
+      _useState2 = _slicedToArray(_useState, 2),
+      activeTab = _useState2[0],
+      setActiveTab = _useState2[1];
+
   return /*#__PURE__*/React.createElement("div", _objectSpread2({
     className: classnames((_classNames = {}, _defineProperty(_classNames, 'card-container', true), _defineProperty(_classNames, className, true), _classNames))
   }, props), /*#__PURE__*/React.createElement("div", {
@@ -9601,10 +9613,20 @@ var Index$c = function Index(_ref) {
     className: "dot"
   }), title), headerCenter, headerTail), /*#__PURE__*/React.createElement("div", {
     className: "body"
-  }, props.children))));
+  }, sliderTabs ? sliderTabs.components[activeTab] : props.children)), sliderTabs && /*#__PURE__*/React.createElement("div", {
+    className: "sliderTabs ".concat(sliderTabs.direction == 'left' ? "left  ".concat(sliderTabs.className || '') : "right  ".concat(sliderTabs.className || ''))
+  }, sliderTabs.tabs.map(function (item, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "tab ".concat(index == activeTab ? 'active' : '', "  ").concat(sliderTabs.tabClassName || '', "  ").concat(sliderTabs.activeTabClassName || '')
+    }, /*#__PURE__*/React.createElement("span", {
+      onClick: function onClick() {
+        return setActiveTab(index);
+      }
+    }, item));
+  }))));
 };
 
-Index$c.defaultProps = {};
+var index$1 = /*#__PURE__*/forwardRef(Index$c);
 
 var controlShow = function controlShow(f1, f2, value, timer) {
   f1(value);
@@ -10776,7 +10798,7 @@ var TabelCard = function TabelCard(props, ref) {
   }, extraProps)));
 };
 
-var index$1 = /*#__PURE__*/React.forwardRef(TabelCard);
+var index$2 = /*#__PURE__*/React.forwardRef(TabelCard);
 
 var WebsocketHeart = /*#__PURE__*/_createClass(function WebsocketHeart(_ref) {
   var _this = this;
@@ -10940,4 +10962,4 @@ var WebsocketHeart = /*#__PURE__*/_createClass(function WebsocketHeart(_ref) {
   this.heartCheck = null;
 });
 
-export { Index$9 as AutoScroll, Index$b as Breadcrumb, WButton as Button, Index$c as Card, WCascader as Cascader, Index$3 as Checkbox, Index$8 as CountUp, Index$1 as DatePicker, index as IconFont, Index as Input, WInputNumber as InputNumber, Modal, ModalForm$1 as ModalForm, Modal$1 as ModalTips, Index$7 as Number, NumericInput, Index$2 as Radio, Select, Index$a as Swiper, WSwitch as Switch, index$1 as TabelCard, Table, Index$6 as TreeSelect, Index$5 as WDatePicker, WForm$1 as WForm, WebsocketHeart };
+export { Index$9 as AutoScroll, Index$b as Breadcrumb, WButton as Button, index$1 as Card, WCascader as Cascader, Index$3 as Checkbox, Index$8 as CountUp, Index$1 as DatePicker, index as IconFont, Index as Input, WInputNumber as InputNumber, Modal, ModalForm$1 as ModalForm, Modal$1 as ModalTips, Index$7 as Number, NumericInput, Index$2 as Radio, Select, Index$a as Swiper, WSwitch as Switch, index$2 as TabelCard, Table, Index$6 as TreeSelect, Index$5 as WDatePicker, WForm$1 as WForm, WebsocketHeart };

package/dist/index.js

@@ -9610,9 +9610,9 @@ var Index$b = function Index(_ref) {
   }, props));
 };
 
-var _excluded$d = ["title", "className", "headerTail", "headerCenter"];
+var _excluded$d = ["title", "className", "headerTail", "headerCenter", "sliderTabs"];
 
-var Index$c = function Index(_ref) {
+var Index$c = function Index(_ref, ref) {
   var _classNames;
 
   var title = _ref.title,
@@ -9620,8 +9620,20 @@ var Index$c = function Index(_ref) {
       className = _ref$className === void 0 ? 'default' : _ref$className,
       headerTail = _ref.headerTail,
       headerCenter = _ref.headerCenter,
+      sliderTabs = _ref.sliderTabs,
       props = _objectWithoutProperties(_ref, _excluded$d);
 
+  React.useImperativeHandle(ref, function () {
+    return {
+      activeTab: activeTab
+    };
+  });
+
+  var _useState = React.useState((sliderTabs === null || sliderTabs === void 0 ? void 0 : sliderTabs.defaultValue) || 0),
+      _useState2 = _slicedToArray(_useState, 2),
+      activeTab = _useState2[0],
+      setActiveTab = _useState2[1];
+
   return /*#__PURE__*/React__default['default'].createElement("div", _objectSpread2({
     className: classnames__default['default']((_classNames = {}, _defineProperty(_classNames, 'card-container', true), _defineProperty(_classNames, className, true), _classNames))
   }, props), /*#__PURE__*/React__default['default'].createElement("div", {
@@ -9636,10 +9648,20 @@ var Index$c = function Index(_ref) {
     className: "dot"
   }), title), headerCenter, headerTail), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "body"
-  }, props.children))));
+  }, sliderTabs ? sliderTabs.components[activeTab] : props.children)), sliderTabs && /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "sliderTabs ".concat(sliderTabs.direction == 'left' ? "left  ".concat(sliderTabs.className || '') : "right  ".concat(sliderTabs.className || ''))
+  }, sliderTabs.tabs.map(function (item, index) {
+    return /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "tab ".concat(index == activeTab ? 'active' : '', "  ").concat(sliderTabs.tabClassName || '', "  ").concat(sliderTabs.activeTabClassName || '')
+    }, /*#__PURE__*/React__default['default'].createElement("span", {
+      onClick: function onClick() {
+        return setActiveTab(index);
+      }
+    }, item));
+  }))));
 };
 
-Index$c.defaultProps = {};
+var index$1 = /*#__PURE__*/React.forwardRef(Index$c);
 
 var controlShow = function controlShow(f1, f2, value, timer) {
   f1(value);
@@ -10811,7 +10833,7 @@ var TabelCard = function TabelCard(props, ref) {
   }, extraProps)));
 };
 
-var index$1 = /*#__PURE__*/React__default['default'].forwardRef(TabelCard);
+var index$2 = /*#__PURE__*/React__default['default'].forwardRef(TabelCard);
 
 var WebsocketHeart = /*#__PURE__*/_createClass(function WebsocketHeart(_ref) {
   var _this = this;
@@ -10978,7 +11000,7 @@ var WebsocketHeart = /*#__PURE__*/_createClass(function WebsocketHeart(_ref) {
 exports.AutoScroll = Index$9;
 exports.Breadcrumb = Index$b;
 exports.Button = WButton;
-exports.Card = Index$c;
+exports.Card = index$1;
 exports.Cascader = WCascader;
 exports.Checkbox = Index$3;
 exports.CountUp = Index$8;
@@ -10995,7 +11017,7 @@ exports.Radio = Index$2;
 exports.Select = Select;
 exports.Swiper = Index$a;
 exports.Switch = WSwitch;
-exports.TabelCard = index$1;
+exports.TabelCard = index$2;
 exports.Table = Table;
 exports.TreeSelect = Index$6;
 exports.WDatePicker = Index$5;

package/package.json

@@ -1,7 +1,7 @@
 {
   "private": false,
   "name": "wargerm",
-  "version": "0.4.9",
+  "version": "0.4.10",
   "scripts": {
     "dev": "dumi dev",
     "docs:build": "dumi build",