@dckj-npm/dc-material 0.1.0

package/lib/components/colorful-button/index.scss

@@ -0,0 +1,5 @@
+@import '../../variables.scss';
+
+#{$biz-css-prefix}-colorful-button {
+  border: 2px dashed blue;
+}

package/lib/components/colorful-input/colorful-input.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import './index.scss';
+export interface ColorfulInputProps {
+    color?: string;
+    style?: object;
+}
+declare const ColorfulInput: React.FC<ColorfulInputProps>;
+export default ColorfulInput;

package/lib/components/colorful-input/colorful-input.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports["default"] = void 0;
+var _input = _interopRequireDefault(require("@alifd/next/lib/input"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+require("./index.scss");
+var _excluded = ["color", "style"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var ColorfulInput = function ColorfulInput(_ref) {
+  var color = _ref.color,
+    _ref$style = _ref.style,
+    style = _ref$style === void 0 ? {} : _ref$style,
+    otherProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  var _style = style || {};
+  if (color) {
+    _style.backgroundColor = color;
+  }
+  var _otherProps = otherProps || {};
+  _otherProps.style = _style;
+  return /*#__PURE__*/React.createElement(_input["default"], _otherProps);
+};
+var _default = exports["default"] = ColorfulInput;

package/lib/components/colorful-input/index.d.ts

@@ -0,0 +1,3 @@
+import ColorfulInput from './colorful-input';
+export type { ColorfulInputProps } from './colorful-input';
+export default ColorfulInput;

package/lib/components/colorful-input/index.js

@@ -0,0 +1,7 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports["default"] = void 0;
+var _colorfulInput = _interopRequireDefault(require("./colorful-input"));
+var _default = exports["default"] = _colorfulInput["default"];

package/lib/components/colorful-input/index.scss

@@ -0,0 +1,5 @@
+@import '../../variables.scss';
+
+#{$biz-css-prefix}-colorful-button {
+  border: 2px dashed blue;
+}

package/lib/components/teletext-list/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 图文列表
+ */
+import TeletextList from './teletext-list';
+export type { TeletextListProps } from './teletext-list';
+export default TeletextList;

package/lib/components/teletext-list/index.js

@@ -0,0 +1,10 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports["default"] = void 0;
+var _teletextList = _interopRequireDefault(require("./teletext-list"));
+/**
+ * 图文列表
+ */
+var _default = exports["default"] = _teletextList["default"];

package/lib/components/teletext-list/index.scss

@@ -0,0 +1,114 @@
+@import '../../variables.scss';
+
+.teletext-list__panel {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  .teletext-list__panel__title {
+
+    & > span {
+      position: relative;
+      font-size: 17px;
+      font-weight: 500;
+      color: #000000;
+      z-index: 1;
+
+      &::after {
+        content: '';
+        position: absolute;
+        bottom: -2px;
+        left: 0;
+        width: 100%;
+        height: 5px;
+        background: linear-gradient(-30deg, #95CDFE, #61A0FE);
+        border-radius: 5px;
+        opacity: 0.6;
+        z-index: 0;
+      }
+    }
+
+  }
+
+  .teletext-list__panel__item-list {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+
+    .teletext-list__panel__item {
+      display: flex;
+      gap: 5px;
+      padding-bottom: 10px;
+      justify-content: space-between;
+
+      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+
+      .teletext-list__panel__item_image {
+        width: 90px;
+        height: 71px;
+        border-radius: 5px;
+        flex: 0 0 auto;
+        overflow: hidden;
+
+        & > img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+
+      }
+
+      .teletext-list__panel__item__text {
+        display: flex;
+        flex-direction: column;
+        gap: 3px;
+
+        .teletext-list__panel__item__text__title {
+          font-size: 15px;
+          font-weight: 500;
+          color: #000000;
+        }
+
+        .teletext-list__panel__item__text__description {
+          -webkit-line-clamp: 1;
+          overflow: hidden;
+          color: #686868;
+          -webkit-box-orient: vertical;
+          display: -webkit-box;
+          font-size: 12px;
+          text-overflow: ellipsis;
+        }
+
+        .teletext-list__panel__item__text__tags {
+          display: flex;
+          gap: 6px;
+
+          & > span {
+            padding: 2px 6px;
+            border-radius: 4px;
+            background-color: black;
+            color: white;
+            font-size: 11px;
+
+            &.orange {
+              color: #F1770E;
+              background-color: rgba(241, 119, 14, 0.1);
+            }
+
+            &.blue {
+              color: #2972DD;
+              background-color: rgba(41, 114, 221, 0.1);
+            }
+
+          }
+
+        }
+
+      }
+
+    }
+  }
+
+}
+
+

package/lib/components/teletext-list/teletext-list.d.ts

@@ -0,0 +1,48 @@
+import React from 'react';
+import './index.scss';
+/**
+ * 数据
+ */
+interface DataProps {
+    /**
+     * 标题
+     */
+    title?: string;
+    /**
+     * 图片地址
+     */
+    image?: string;
+    /**
+     * 图片位置
+     */
+    imagePlacement?: "left" | "right" | "none";
+    /**
+     * 说明
+     */
+    description?: string;
+    /**
+     * 标签列表
+     */
+    tags?: {
+        /**
+         * 标签名称
+         */
+        name: string;
+        /**
+         * 标签颜色
+         */
+        color: string;
+    }[];
+}
+export interface TeletextListProps {
+    /**
+     * 标题
+     */
+    title?: string;
+    /**
+     * 数据
+     */
+    dataList?: DataProps[];
+}
+declare const TeletextList: React.FC<TeletextListProps>;
+export default TeletextList;

package/lib/components/teletext-list/teletext-list.js

@@ -0,0 +1,97 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = _interopRequireDefault(require("react"));
+require("./index.scss");
+var _excluded = ["title", "dataList"];
+/**
+ * 数据
+ */
+
+var DEFAULT_DATA_1 = {
+  image: 'https://img.alicdn.com/tps/TB16TQvOXXXXXbiaFXXXXXXXXXX-120-120.svg',
+  imagePlacement: 'left',
+  title: '标题名称',
+  description: '说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字',
+  tags: [{
+    name: '报名火热',
+    color: 'orange'
+  }, {
+    name: '人数众多',
+    color: 'blue'
+  }]
+};
+var DEFAULT_DATA_2 = {
+  image: 'https://img.alicdn.com/tps/TB16TQvOXXXXXbiaFXXXXXXXXXX-120-120.svg',
+  imagePlacement: 'right',
+  title: '标题名称',
+  description: '说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字',
+  tags: [{
+    name: '报名火热',
+    color: 'orange'
+  }, {
+    name: '人数众多',
+    color: 'blue'
+  }]
+};
+var DEFAULT_DATA_3 = {
+  title: '标题名称',
+  description: '说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字',
+  tags: [{
+    name: '报名火热',
+    color: 'orange'
+  }, {
+    name: '人数众多',
+    color: 'blue'
+  }]
+};
+var TeletextList = function TeletextList(_ref) {
+  var _ref$title = _ref.title,
+    title = _ref$title === void 0 ? '标题标题' : _ref$title,
+    _ref$dataList = _ref.dataList,
+    dataList = _ref$dataList === void 0 ? [DEFAULT_DATA_1, DEFAULT_DATA_2, DEFAULT_DATA_3] : _ref$dataList,
+    otherProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  var _otherProps = otherProps || {};
+  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
+    className: "teletext-list__panel"
+  }, _otherProps), title ? /*#__PURE__*/_react["default"].createElement("div", {
+    className: "teletext-list__panel__title"
+  }, /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement("span", null, title))) : null, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "teletext-list__panel__item-list"
+  }, dataList.map(function (item, index) {
+    var _item$tags;
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      key: index,
+      className: "teletext-list__panel__item"
+    }, item.image && item.imagePlacement === 'left' ? /*#__PURE__*/_react["default"].createElement("div", {
+      className: "teletext-list__panel__item_image"
+    }, /*#__PURE__*/_react["default"].createElement("img", {
+      alt: "img",
+      src: item.image
+    })) : null, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "teletext-list__panel__item__text"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "teletext-list__panel__item__text__title"
+    }, item.title), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "teletext-list__panel__item__text__description"
+    }, item.description), item.tags ? /*#__PURE__*/_react["default"].createElement("div", {
+      className: "teletext-list__panel__item__text__tags"
+    }, (_item$tags = item.tags) === null || _item$tags === void 0 ? void 0 : _item$tags.map(function (tag, tagIndex) {
+      return /*#__PURE__*/_react["default"].createElement("span", {
+        key: tagIndex,
+        className: tag.color
+      }, tag.name);
+    })) : null), item.image && item.imagePlacement === 'right' ? /*#__PURE__*/_react["default"].createElement("div", {
+      className: "teletext-list__panel__item_image"
+    }, /*#__PURE__*/_react["default"].createElement("img", {
+      alt: "img",
+      src: item.image
+    })) : null);
+  })));
+};
+TeletextList.displayName = 'TeletextList';
+var _default = exports["default"] = TeletextList;

package/lib/index.d.ts

@@ -0,0 +1,8 @@
+export type { ColorfulButtonProps } from './components/colorful-button';
+export { default as ColorfulButton } from './components/colorful-button';
+export type { ColorfulInputProps } from './components/colorful-input';
+export { default as ColorfulInput } from './components/colorful-input';
+export type { TeletextListProps } from './components/teletext-list';
+export { default as TeletextList } from './components/teletext-list';
+declare const bizCssPrefix = "bizpack";
+export { bizCssPrefix };

package/lib/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.bizCssPrefix = exports.TeletextList = exports.ColorfulInput = exports.ColorfulButton = void 0;
+var _colorfulButton = _interopRequireDefault(require("./components/colorful-button"));
+exports.ColorfulButton = _colorfulButton["default"];
+var _colorfulInput = _interopRequireDefault(require("./components/colorful-input"));
+exports.ColorfulInput = _colorfulInput["default"];
+var _teletextList = _interopRequireDefault(require("./components/teletext-list"));
+exports.TeletextList = _teletextList["default"];
+var bizCssPrefix = exports.bizCssPrefix = 'bizpack';

package/lib/index.scss

@@ -0,0 +1,3 @@
+@import './components/colorful-button/index.scss';
+@import './components/colorful-input/index.scss';
+@import './components/teletext-list/index.scss';

package/lib/style.js

@@ -0,0 +1,3 @@
+require('@alifd/next/lib/button/style');
+require('@alifd/next/lib/input/style');
+require('./index.scss');

package/lib/variables.d.ts

@@ -0,0 +1,2 @@
+declare const bizCssPrefix = "bizpack";
+export { bizCssPrefix };

package/lib/variables.js

@@ -0,0 +1,5 @@
+"use strict";
+
+exports.__esModule = true;
+exports.bizCssPrefix = void 0;
+var bizCssPrefix = exports.bizCssPrefix = 'bizpack';

package/lib/variables.scss

@@ -0,0 +1,3 @@
+@import '~@alifd/next/variables.scss';
+
+$biz-css-prefix: '.bizpack';

package/lowcode/colorful-button/meta.ts

@@ -0,0 +1,102 @@
+
+import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types';
+
+const ColorfulButtonMeta: IPublicTypeComponentMetadata = {
+  "componentName": "ColorfulButton",
+  "title": "ColorfulButton",
+  "docUrl": "",
+  "screenshot": "",
+  "devMode": "proCode",
+  "npm": {
+    "package": "@dckj-npm/dc-material",
+    "version": "0.1.0",
+    "exportName": "ColorfulButton",
+    "main": "src/index.tsx",
+    "destructuring": true,
+    "subName": ""
+  },
+  "configure": {
+    "props": [
+      {
+        "title": {
+          "label": {
+            "type": "i18n",
+            "en-US": "type",
+            "zh-CN": "类型"
+          },
+          "tip": "type | 类型"
+        },
+        "name": "type",
+        "description": "类型",
+        "setter": {
+          "componentName": "RadioGroupSetter",
+          "props": {
+            "dataSource": [
+              {
+                "label": "primary",
+                "value": "primary"
+              },
+              {
+                "label": "secondary",
+                "value": "secondary"
+              },
+              {
+                "label": "normal",
+                "value": "normal"
+              }
+            ],
+            "options": [
+              {
+                "label": "primary",
+                "value": "primary"
+              },
+              {
+                "label": "secondary",
+                "value": "secondary"
+              },
+              {
+                "label": "normal",
+                "value": "normal"
+              }
+            ]
+          },
+          "initialValue": "primary"
+        }
+      },
+      {
+        "title": {
+          "label": {
+            "type": "i18n",
+            "en-US": "color",
+            "zh-CN": "color"
+          }
+        },
+        "name": "color",
+        "setter": {
+          "componentName": "StringSetter",
+          "isRequired": false,
+          "initialValue": ""
+        }
+      }
+    ],
+    "supports": {
+      "style": true
+    },
+    "component": {}
+  }
+};
+const snippets: IPublicTypeSnippet[] = [
+  {
+    "title": "ColorfulButton",
+    "screenshot": "",
+    "schema": {
+      "componentName": "ColorfulButton",
+      "props": {}
+    }
+  }
+];
+
+export default {
+  ...ColorfulButtonMeta,
+  snippets
+};

package/lowcode/colorful-input/meta.ts

@@ -0,0 +1,56 @@
+
+import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types';
+
+const ColorfulInputMeta: IPublicTypeComponentMetadata = {
+  "componentName": "ColorfulInput",
+  "title": "ColorfulInput",
+  "docUrl": "",
+  "screenshot": "",
+  "devMode": "proCode",
+  "npm": {
+    "package": "@dckj-npm/dc-material",
+    "version": "0.1.0",
+    "exportName": "ColorfulInput",
+    "main": "src/index.tsx",
+    "destructuring": true,
+    "subName": ""
+  },
+  "configure": {
+    "props": [
+      {
+        "title": {
+          "label": {
+            "type": "i18n",
+            "en-US": "color",
+            "zh-CN": "color"
+          }
+        },
+        "name": "color",
+        "setter": {
+          "componentName": "StringSetter",
+          "isRequired": false,
+          "initialValue": ""
+        }
+      }
+    ],
+    "supports": {
+      "style": true
+    },
+    "component": {}
+  }
+};
+const snippets: IPublicTypeSnippet[] = [
+  {
+    "title": "ColorfulInput",
+    "screenshot": "",
+    "schema": {
+      "componentName": "ColorfulInput",
+      "props": {}
+    }
+  }
+];
+
+export default {
+  ...ColorfulInputMeta,
+  snippets
+};