Socket
Socket
Sign inDemoInstall

cubeshop

Package Overview
Dependencies
78
Maintainers
1
Versions
14
Alerts
File Explorer

Advanced tools

npm Scripts
License

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 0.0.15 to 0.0.16

LICENSE
src/packages/demo/__tests__/button.spec.ts
src/packages/demo/cs-demo.mjs
src/packages/demo/demo.vue
src/packages/demo/doc.md

6

package.json
{
"name": "cubeshop",
"version": "0.0.15",
"version": "0.0.16",
"description": "Mobile UI Components built on Web Components.",

@@ -37,2 +37,3 @@ "main": "src/index.js",

"sass": "^1.34.0",
"tree-node-cli": "^1.4.0",
"vue": "^3.0.5",

@@ -42,4 +43,2 @@ "vue-router": "^4.0.4"

"devDependencies": {
"@commitlint/cli": "^10.0.0",
"@commitlint/config-conventional": "^10.0.0",
"@types/jest": "^26.0.22",

@@ -54,3 +53,2 @@ "@types/node": "^14.14.31",

"@vue/test-utils": "^2.0.0-rc.6",
"axios": "^0.21.0",
"eslint": "^6.7.2",

@@ -57,0 +55,0 @@ "eslint-plugin-prettier": "^3.1.3",

128

README.md

@@ -40,11 +40,13 @@ # Cubeshop

在 Vue 中直接使用 Web Component 可能会出现如下告警
- Vue 工程中使用组件可能会出现告警：
```js
Unknown custom element: <user-card> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
```html
<!-- vue2: -->
Unknown custom element: <cs-card> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
<!-- vue3 -->
[Vue warn]: Failed to resolve component: cs-icon
```
因此，请先注册需要忽略的标签：
别急，请在工程中注入如下代码即可：
```js

@@ -60,2 +62,118 @@ // VUE2.x

如果您使用的是 vite，修改 vite.config.js:
```js
import vue from '@vitejs/plugin-vue'
export default {
plugins: [
vue({
template: {
compilerOptions: {
isCustomElement: tag => tag === 'cs-'
}
}
})
]
}
```
## Examples
为方便演示，直接使用 cdn 加载，工程类项目同样使用。
### Vue 工程使用
```html
<!DOCTYPE html>
<html lang="en">
<head>
<title> Vue demo </title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script type="module" src="https://unpkg.com/cubeshop"></script>
<!-- vue cdn 引入 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<h1>这是一个 Vue 工程!</h1>
<div id="app">
<cs-card
v-for="item in items"
@click="handleClick(item)"
:image='item.image'
:name='item.name'
:email="item.email"
></cs-card>
</div>
</body>
<script>
// 忽略 vue 中自定义标签会告警
Vue.config.ignoredElements = [
'user-card',
]
var vm = new Vue({
el: '#app',
data: {
items: [{
image: 'https://cdn.pixabay.com/photo/2021/08/25/20/42/field-6574455_960_720.jpg',
name: 'Allan',
email: 'Allan@hb.com',
},{
image: 'https://cdn.pixabay.com/photo/2021/08/25/20/42/field-6574455_960_720.jpg',
name: 'stark',
email: 'stark@hb.com',
},{
image: 'https://cdn.pixabay.com/photo/2021/08/25/20/42/field-6574455_960_720.jpg',
name: 'Ray',
email: 'Ray@hb.com',
}],
msg: 'test'
},
methods: {
handleClick(item){
alert(item);
}
}
})
</script>
</html>
```
### React 工程使用
```html
<!DOCTYPE html>
<html lang="en">
<head>
<title> React demo </title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script type="module" src="https://unpkg.com/cubeshop"></script>
<!-- React cdn -->
<script src="https://cdn.bootcdn.net/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<!-- Babel 可以将 ES6 代码转为 ES5 -->
<script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/7.0.0-beta.3/babel.min.js"></script>
</head>
<body>
<h1>这是一个 React 工程!</h1>
<div id="app"></div>
</body>
<script type="text/babel">
class App extends React.Component {
render() {
return (
<div>
<cs-card
image='https://cdn.pixabay.com/photo/2021/08/25/20/42/field-6574455_960_720.jpg'
name='Ray'
email="Ray@hb.com"
></cs-card>
</div>
);
}
}
ReactDOM.render(<App/>, document.getElementById('app'));
</script>
</html>
```
## License

@@ -62,0 +180,0 @@

1

src/index.js
import './packages/button/cs-button.mjs';
import './packages/demo/cs-demo.mjs';
import './packages/card/cs-card.mjs';
import './packages/loading/cs-loading.mjs';
import './packages/icon/cs-icon.mjs';

87

src/packages/button/doc.md

@@ -16,25 +16,22 @@ # Button 按钮

<cs-button type="info">信息按钮</cs-button>
<cs-button type="danger">危险按钮</cs-button>
<cs-button type="default">默认按钮</cs-button>
<cs-button type="danger">危险按钮</cs-button>
<cs-button type="warning">警告按钮</cs-button>
<cs-button type="success">成功按钮</cs-button>
```
### 禁用状态
### 块级 block
通过 `disabled` 属性来禁用按钮，禁用状态下按钮不可点击。
通过 `block` 属性来设置块级样式。
```html
<cs-button disabled type="primary">禁用状态</cs-button>
<cs-button plain disabled type="info">禁用状态</cs-button>
<cs-button plain disabled type="primary">禁用状态</cs-button>
<cs-button type="primary" block>块极元素</cs-button>
<cs-button type="info" block>块极元素</cs-button>
```
### 禁用状态
### 按钮形状
通过 `disabled` 属性来禁用按钮，禁用状态下按钮不可点击。
通过 `shape` 属性设置按钮形状，支持圆形、方形按钮，默认为圆形。
```html
<cs-button shape="square" type="primary">方形按钮</cs-button>
<cs-button type="info">圆形按钮</cs-button>
<cs-button disabled type="primary">disabled</cs-button>
<cs-button disabled type="info">disabled</cs-button>
```

@@ -44,59 +41,38 @@

通过 `loading` 属性设置加载状态。
```html
<cs-button loading type="info"></cs-button>
<cs-button loading type="warning">加载中...</cs-button>
<cs-button :loading="isLoading" type="success" @click="changeLoading">Click me!</cs-button>
```
``` javascript
// ...
let isLoading = ref(false);
const changeLoading = () => {
isLoading.value = true;
setTimeout(() => {
isLoading.value = false;
}, 3000);
};
### 图标按钮
return {
isLoading,
changeLoading
};
// ...
```
通过 `icon` 属性设置图标。
### 图标按钮
```html
<cs-button shape="square" plain type="primary" icon="star-fill"></cs-button>
<cs-button shape="square" type="primary" icon="star">收藏</cs-button>
<cs-button type="primary" icon="like">喜欢</cs-button>
<cs-button type="info" icon="user">张三</cs-button>
```
### 按钮尺寸
### 自定义颜色
支持 `large`、`normal`、`small` 三种尺寸，默认为 `normal`。
通过 `color` 属性可以自定义按钮的颜色。
```html
<cs-button size="large" type="primary">大号按钮</cs-button>
<cs-button type="primary">普通按钮</cs-button>
<cs-button size="small" type="primary">小型按钮</cs-button>
<cs-button style="color: #fff" color="#7232dd">单色按钮</cs-button>
<cs-button style="color: #fff" color="linear-gradient(135deg,#fa2c19 0%,#fa6419 100%);">
渐变色按钮
</cs-button>
```
### 块级元素
### 跳转 href
按钮在默认情况下为行内块级元素，通过 `block` 属性可以将按钮的元素类型设置为块级元素，常用来实现通栏按钮。
通过 `href` 属性来设置需要跳转的链接，当作 `a` 标签使用。
```html
<cs-button block type="primary">块级元素</cs-button>
<cs-button href="https://baidu.com" type="primary">设置href跳转</cs-button>
```
### 自定义颜色
通过 color 属性可以自定义按钮的颜色。
```html
<cs-button color="#7232dd">单色按钮</cs-button>
<cs-button color="#7232dd" plain>单色按钮</cs-button>
<cs-button color="linear-gradient(to right, #ff6034, #ee0a24)">
渐变色按钮
</cs-button>
```
## API

@@ -109,6 +85,3 @@

| type | 类型，可选值为 `primary` `info` `warning` `danger` `success` | String |`default` |
| size | 尺寸，可选值为 `large` `small` | String | `normal` |
| shape | 形状，可选值为 `square` | String | `round` |
| color | 按钮颜色，支持传入 linear-gradient 渐变色 | String | - |
| plain | 是否为朴素按钮 | Boolean | `false` |
| color | 按钮颜色，支持传入 `linear-gradient` 渐变色 | String | - |
| disabled | 是否禁用按钮 | Boolean | `false` |

@@ -118,8 +91,2 @@ | block | 是否为块级元素 | Boolean | `false` |

| loading | 按钮loading状态 | Boolean | `false` |
### Events
| 事件名 | 说明 | 回调参数 |
|--------|----------------|--------------|
| click | 点击按钮时触发 | event: MouseEvent |
| href | 设置跳转链接 | String | - |

123

src/packages/card/doc.md

@@ -1,108 +0,19 @@

# Button 按钮
# Card 卡片
### 介绍
按钮用于触发一个操作，如提交表单。
用于组织信息和操作，通常也作为详细信息的入口。
## 代码演示
### 按钮类型
按钮支持 `default`、`primary`、`info`、`warning`、`danger`、`success` 六种类型，默认为 `default`。
```html
<cs-button type="primary">主要按钮</cs-button>
<cs-button type="info">信息按钮</cs-button>
<cs-button type="default">默认按钮</cs-button>
<cs-button type="danger">危险按钮</cs-button>
<cs-button type="warning">警告按钮</cs-button>
<cs-button type="success">成功按钮</cs-button>
<cs-card
title='2021-02-08 12:00 | 单车'
content='2分50秒'
cash='1元'
desc='已完成'
></cs-card>
```
### 朴素按钮
通过 `plain` 属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色。
```html
<cs-button plain type="primary">朴素按钮</cs-button>
<cs-button plain type="info">朴素按钮</cs-button>
```
### 禁用状态
通过 `disabled` 属性来禁用按钮，禁用状态下按钮不可点击。
```html
<cs-button disabled type="primary">禁用状态</cs-button>
<cs-button plain disabled type="info">禁用状态</cs-button>
<cs-button plain disabled type="primary">禁用状态</cs-button>
```
### 按钮形状
通过 `shape` 属性设置按钮形状，支持圆形、方形按钮，默认为圆形。
```html
<cs-button shape="square" type="primary">方形按钮</cs-button>
<cs-button type="info">圆形按钮</cs-button>
```
### 加载状态
```html
<cs-button loading type="info"></cs-button>
<cs-button loading type="warning">加载中...</cs-button>
<cs-button :loading="isLoading" type="success" @click="changeLoading">Click me!</cs-button>
```
``` javascript
// ...
let isLoading = ref(false);
const changeLoading = () => {
isLoading.value = true;
setTimeout(() => {
isLoading.value = false;
}, 3000);
};
return {
isLoading,
changeLoading
};
// ...
```
### 图标按钮
```html
<cs-button shape="square" plain type="primary" icon="star-fill"></cs-button>
<cs-button shape="square" type="primary" icon="star">收藏</cs-button>
```
### 按钮尺寸
支持 `large`、`normal`、`small` 三种尺寸，默认为 `normal`。
```html
<cs-button size="large" type="primary">大号按钮</cs-button>
<cs-button type="primary">普通按钮</cs-button>
<cs-button size="small" type="primary">小型按钮</cs-button>
```
### 块级元素
按钮在默认情况下为行内块级元素，通过 `block` 属性可以将按钮的元素类型设置为块级元素，常用来实现通栏按钮。
```html
<cs-button block type="primary">块级元素</cs-button>
```
### 自定义颜色
通过 color 属性可以自定义按钮的颜色。
```html
<cs-button color="#7232dd">单色按钮</cs-button>
<cs-button color="#7232dd" plain>单色按钮</cs-button>
<cs-button color="linear-gradient(to right, #ff6034, #ee0a24)">
渐变色按钮
</cs-button>
```
## API

@@ -114,17 +25,7 @@

|--------------|----------------------------------|--------|------------------|
| type | 类型，可选值为 `primary` `info` `warning` `danger` `success` | String |`default` |
| size | 尺寸，可选值为 `large` `small` | String | `normal` |
| shape | 形状，可选值为 `square` | String | `round` |
| color | 按钮颜色，支持传入 linear-gradient 渐变色 | String | - |
| plain | 是否为朴素按钮 | Boolean | `false` |
| disabled | 是否禁用按钮 | Boolean | `false` |
| block | 是否为块级元素 | Boolean | `false` |
| icon | 按钮图标，同Icon组件name属性 | String | - |
| loading | 按钮loading状态 | Boolean | `false` |
| title | 标题 | String |
| content | 内容 | String |
| cash | 金额 | String/Number | 0 |
| desc | 状态 | String | |
### Events
| 事件名 | 说明 | 回调参数 |
|--------|----------------|--------------|
| click | 点击按钮时触发 | event: MouseEvent |

29

src/packages/icon/doc.md

@@ -5,4 +5,6 @@ # Icon 图标

基于 [IconFont](https://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=9402) 字体的图标集，可以通过 Icon 组件使用。一共有 **599** 个图标可供使用。
基于 IconFont 字体的图标集，可以通过 Icon 组件使用。一共有 **599** 个图标可供使用。
图标来源：[IconFont](https://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=9402)
## 代码演示

@@ -12,4 +14,6 @@

`Icon` 的 `name` 属性支持传入图标名称或图片链接。
通过 `name` 属性设置图标名称。
具体名称可以查看 [IconFont](https://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=9402)
```html

@@ -23,3 +27,3 @@ <cs-icon size="20" name="heart"></cs-icon>

`Icon` 的 `size` 属性用来设置图标的尺寸大小，默认单位为 `px`。
通过 `size` 属性用来设置图标的尺寸大小，默认单位为 `px`。

@@ -34,3 +38,3 @@ ```html

`Icon` 的 `color` 属性用来设置图标的颜色。
通过 `color` 属性用来设置图标的颜色。

@@ -44,3 +48,2 @@ ```html

## API

@@ -52,14 +55,4 @@

|--------------|----------------------------------|------------------|------------------|
| name | 图标名称或图片链接 | String | - |
| color | 图标颜色 | String | - |
| size | 图标大小，如 `20px` `2em` `2rem` | String or Number | - |
| font-class-name | 字体基础类名 | String | `csui-iconfont` |
| class-prefix | 类名前缀，用于使用自定义图标 | String | `cs-icon` |
| tag | HTML 标签 | String | `i` |
### Events
| 事件名 | 说明 | 回调参数 |
|--------|----------------|--------------|
| click | 点击图标时触发 | event: Event |
| name | 图标名称 | String | - |
| color | 图标颜色 | String | - |
| size | 图标大小，如 `20px` `2em` `2rem` | String or Number | - |

103

src/packages/loading/doc.md

@@ -1,2 +0,2 @@

# 加载 Loading
# 加载动画 Loading

@@ -11,94 +11,26 @@ ### 介绍

添加loading属性即可让按钮处于加载状态，处于加载状态所有事件会被禁用，类似于disabled：
```html
<cs-button type="primary" loading>loading</cs-button>
<cs-loading></cs-loading>
```
### 图标颜色
### loading 颜色
`Icon` 的 `color` 属性用来设置图标的颜色。
通过 `color` 属性用来设置 `loading` 的颜色。
```html
<cs-icon name="dongdong" color="#fa2c19"></cs-icon>
<cs-icon name="dongdong" color="#64b578"></cs-icon>
<cs-icon name="JD" color="#fa2c19"></cs-icon>
<cs-loading size="30"></cs-loading> // 默认颜色
<cs-loading size="30" color="green"></cs-loading>
<cs-loading size="30" color="orange"></cs-loading>
```
### 图标大小
### 尺寸大小
`Icon` 的 `size` 属性用来设置图标的尺寸大小，默认单位为 `px`。
通过 `size` 属性用来设置 `loading` 的尺寸大小，默认单位为 `px`。
```html
<cs-icon name="dongdong"></cs-icon>
<cs-icon name="dongdong" size="24"></cs-icon>
<cs-icon name="dongdong" size="16"></cs-icon>
<cs-loading size="20"></cs-loading>
<cs-loading size="30"></cs-loading>
<cs-loading size="40"></cs-loading>
```
### 自定义图标
如果需要在现有 Icon 的基础上使用更多图标，可以引入第三方 iconfont 对应的字体文件和 CSS 文件，之后就可以在 Icon 组件中直接使用。
> 方案一 引入 [iconfont](https://www.iconfont.cn/) 推荐此方案
第一步：首先在 [iconfont](https://www.iconfont.cn/) 生成你自定义的Icon文件下载存放至本地项目 [详细使用说明](https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8d11a391&helptype=code)
``` bash
/assets/font/demo.css
/assets/font/demo_index.html
/assets/font/iconfont.css
/assets/font/iconfont.js
/assets/font/iconfont.json
/assets/font/iconfont.ttf
/assets/font/iconfont.woff
/assets/font/iconfont.woff2
```
第二步：项目入口文件 main.js 引用 `iconfont.css`
``` javascript
import './assets/font/iconfont.css';
```
第三步：
```html
<!--
font-class-name 指定类名为默认 iconfont
class-prefix 指定默认 icon
name 值根据 iconfont.css 中值对应填写
-->
<cs-icon font-class-name="iconfont" class-prefix="icon" name="close" />
```
> 方案二 第三方自定义字体库
```css
/* 引入第三方或自定义的字体图标样式 */
@font-face {
font-family: 'my-icon';
src: url('./my-icon.ttf') format('truetype');
}
.my-icon {
font-family: 'my-icon';
}
.my-icon-extra::before {
content: '\e626';
}
```
```html
<!--
font-class-name 指定类名为默认 my-icon
class-prefix 指定默认 my-icon
-->
<cs-icon font-class-name="my-icon" class-prefix="my-icon" name="extra" />
```
## API

@@ -110,14 +42,3 @@

|--------------|----------------------------------|------------------|------------------|
| name | 图标名称或图片链接 | String | - |
| color | 图标颜色 | String | - |
| size | 图标大小，如 `20px` `2em` `2rem` | String or Number | - |
| font-class-name | 字体基础类名 | String | `csui-iconfont` |
| class-prefix | 类名前缀，用于使用自定义图标 | String | `cs-icon` |
| tag | HTML 标签 | String | `i` |
### Events
| 事件名 | 说明 | 回调参数 |
|--------|----------------|--------------|
| click | 点击图标时触发 | event: Event |

12

src/README.md

@@ -0,1 +1,13 @@

src
├── README.md
├── config.json // 官网菜单配置，详情见注释1
├── docs // Cubeshop 纯 Readme 介绍，用于「指南」菜单
├── index.js // 自动生成，源码入口文件
├── packages // 源码
├── shims-vue.d.ts
└── sites // 官网
## 注释1
config.json 为官网菜单配置文件。

@@ -2,0 +14,0 @@ 

src/packages/button/cs-button.mjs

Sorry, the diff of this file is not supported yet

src/packages/button/demo.vue

Sorry, the diff of this file is not supported yet

src/packages/card/cs-card.mjs

Sorry, the diff of this file is not supported yet

src/packages/card/demo.vue

Sorry, the diff of this file is not supported yet

src/packages/icon/cs-icon.mjs

Sorry, the diff of this file is not supported yet

src/packages/icon/demo.vue

Sorry, the diff of this file is not supported yet

src/packages/loading/demo.vue

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc