diff --git a/dist/btn-group/index.js b/dist/btn-group/index.js deleted file mode 100644 index c8965284..00000000 --- a/dist/btn-group/index.js +++ /dev/null @@ -1,30 +0,0 @@ -'use strict'; - -Component({ - relations: { - '../button/index': { - type: 'child', - linked: function linked() { - updateBtnChild.call(this); - }, - linkChange: function linkChange() { - updateBtnChild.call(this); - }, - unlinked: function unlinked() { - updateBtnChild.call(this); - } - } - } -}); - -function updateBtnChild() { - var buttons = this.getRelationNodes('../button/index'); - - if (buttons.length > 0) { - var lastIndex = buttons.length - 1; - - buttons.forEach(function (button, index) { - button.switchLastButtonStatus(index === lastIndex); - }); - } -} \ No newline at end of file diff --git a/dist/btn-group/index.wxml b/dist/btn-group/index.wxml deleted file mode 100644 index 0dd98c36..00000000 --- a/dist/btn-group/index.wxml +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/dist/btn-group/index.wxss b/dist/btn-group/index.wxss deleted file mode 100644 index ff9785d2..00000000 --- a/dist/btn-group/index.wxss +++ /dev/null @@ -1,3 +0,0 @@ -.button-group { - margin: 15px; -} diff --git a/example/app.wxss b/example/app.wxss index cba0c690..ef0a11f7 100644 --- a/example/app.wxss +++ b/example/app.wxss @@ -5,7 +5,16 @@ page { background: #f8f8f8; min-height: 100vh; box-sizing: border-box; - padding: 15rpx 0; + padding: 0 0 100rpx; -webkit-font-smoothing: antialiased; font-family: 'PingFang SC', Helvetica, 'STHeiti STXihei', 'Microsoft YaHei', Tohoma, Arial, sans-serif; } + +.demo-margin-right { + margin-right: 15px; +} + +.demo-margin-bottom { + display: block; + margin-bottom: 15px; +} diff --git a/example/components/demo-block/index.js b/example/components/demo-block/index.js new file mode 100644 index 00000000..908a07be --- /dev/null +++ b/example/components/demo-block/index.js @@ -0,0 +1,5 @@ +Component({ + properties: { + title: String + } +}); diff --git a/dist/btn-group/index.json b/example/components/demo-block/index.json similarity index 100% rename from dist/btn-group/index.json rename to example/components/demo-block/index.json diff --git a/example/components/demo-block/index.wxml b/example/components/demo-block/index.wxml new file mode 100644 index 00000000..2a4bff8d --- /dev/null +++ b/example/components/demo-block/index.wxml @@ -0,0 +1,4 @@ + + {{ title }} + + diff --git a/example/components/demo-block/index.wxss b/example/components/demo-block/index.wxss new file mode 100644 index 00000000..5408971c --- /dev/null +++ b/example/components/demo-block/index.wxss @@ -0,0 +1,11 @@ +.demo-block { + padding: 0 15px; +} + +.demo-block__title { + margin: 0; + font-weight: 400; + font-size: 14px; + color: rgba(69,90,100,.6); + padding: 20px 0 15px; +} diff --git a/example/pages/button/index.js b/example/pages/button/index.js index a697c742..560d44d4 100644 --- a/example/pages/button/index.js +++ b/example/pages/button/index.js @@ -1,15 +1 @@ -Page({ - data: { - }, - - onLoad() { - - }, - - onShow() { - }, - - getPhoneNumber(e) { - console.log(e); - } -}); +Page({}); diff --git a/example/pages/button/index.json b/example/pages/button/index.json index 0fb23285..bd094653 100644 --- a/example/pages/button/index.json +++ b/example/pages/button/index.json @@ -1,8 +1,8 @@ { "navigationBarTitleText": "Button 按钮", "usingComponents": { + "demo-block": "../../components/demo-block/index", "van-button": "../../dist/button/index", - "van-button-group": "../../dist/button-group/index", "van-panel": "../../dist/panel/index" } } diff --git a/example/pages/button/index.wxml b/example/pages/button/index.wxml index ede61a1d..ff534549 100644 --- a/example/pages/button/index.wxml +++ b/example/pages/button/index.wxml @@ -1,51 +1,29 @@ - - - 获取电话 - 确认付款 - 确认付款 - 确认付款 - - + + + 默认按钮 + 主要按钮 + 危险按钮 + - - 确认付款 - 立即购买 - 立即购买 - + + 默认按钮 + 主要按钮 + 危险按钮 + - - - 取消订单 - 确认付款 - - + + 大号按钮 + 普通按钮 + 小型按钮 + 迷你按钮 + - - - 取消订单 - 确认付款 - 确认付款 - 确认付款 - - + + 禁用状态 + - - - 取消订单 - 确认付款 - 确认付款 - 确认付款 - - - - - - 取消订单 - 确认付款 - 确认付款 - 确认付款 - - + + + + + diff --git a/example/pages/button/index.wxss b/example/pages/button/index.wxss new file mode 100644 index 00000000..e69de29b diff --git a/example/pages/dialog/index.json b/example/pages/dialog/index.json index efddf114..5901434a 100644 --- a/example/pages/dialog/index.json +++ b/example/pages/dialog/index.json @@ -3,7 +3,6 @@ "usingComponents": { "van-dialog": "../../dist/dialog/index", "van-button": "../../dist/button/index", - "van-button-group": "../../dist/button-group/index", "van-toast": "../../dist/toast/index" } } diff --git a/example/pages/dialog/index.wxml b/example/pages/dialog/index.wxml index 43ee6c00..5d8ceb57 100644 --- a/example/pages/dialog/index.wxml +++ b/example/pages/dialog/index.wxml @@ -1,11 +1,11 @@ - - 基础 Dialog - Dialog - 无标题 - Dialog - 自定义显示按钮 - Dialog - 按钮纵向排布 - Dialog - 获取 Open 数据的弹窗 - Dialog - 控制弹窗关闭 - + +基础 Dialog +Dialog - 无标题 +Dialog - 自定义显示按钮 +Dialog - 按钮纵向排布 +Dialog - 获取 Open 数据的弹窗 +Dialog - 控制弹窗关闭 + diff --git a/example/pages/field/index.json b/example/pages/field/index.json index fc72f278..d88f1555 100644 --- a/example/pages/field/index.json +++ b/example/pages/field/index.json @@ -2,7 +2,6 @@ "navigationBarTitleText": "Field 输入框", "usingComponents": { "van-button": "../../dist/button/index", - "van-button-group": "../../dist/button-group/index", "van-cell-group": "../../dist/cell-group/index", "van-field": "../../dist/field/index", "van-panel": "../../dist/panel/index" diff --git a/example/pages/field/index.wxml b/example/pages/field/index.wxml index bb26e1ab..9586eb80 100644 --- a/example/pages/field/index.wxml +++ b/example/pages/field/index.wxml @@ -31,9 +31,7 @@ - - 清除输入 - +清除输入 @@ -44,9 +42,7 @@ - - 清除输入 - +清除输入 diff --git a/example/pages/popup/index.json b/example/pages/popup/index.json index 867095f5..b1f3aa4c 100644 --- a/example/pages/popup/index.json +++ b/example/pages/popup/index.json @@ -2,8 +2,7 @@ "navigationBarTitleText": "Popup 弹出层", "usingComponents": { "van-popup": "../../dist/popup/index", - "van-button": "../../dist/button/index", - "van-button-group": "../../dist/button-group/index" + "van-button": "../../dist/button/index" } } diff --git a/example/pages/popup/index.wxml b/example/pages/popup/index.wxml index 6610a64b..d5eb96f0 100644 --- a/example/pages/popup/index.wxml +++ b/example/pages/popup/index.wxml @@ -1,20 +1,18 @@ - - - 弹出popup - - - 从顶部弹出popup - - - 从底部弹出popup - - - 从左边弹出popup - - - 从右边弹出popup - - + + 弹出popup + + + 从顶部弹出popup + + + 从底部弹出popup + + + 从左边弹出popup + + + 从右边弹出popup + + + 显示toast + - - - 显示toast - + + 显示 Icon 图标的toast + - - 显示 Icon 图标的toast - + + 自定义图片作为图标的toast + - - 自定义图片作为图标的toast - + + 显示 Loading toast + - - 显示 Loading toast - + + 只显示图标的toast + - - 只显示图标的toast - + + 不消失的的toast + - - 不消失的的toast - - - - 显示 Loading - - + + 显示 Loading + diff --git a/packages/button-group/index.js b/packages/button-group/index.js deleted file mode 100644 index 724e7228..00000000 --- a/packages/button-group/index.js +++ /dev/null @@ -1,28 +0,0 @@ -Component({ - relations: { - '../button/index': { - type: 'child', - linked() { - updateBtnChild.call(this); - }, - linkChange() { - updateBtnChild.call(this); - }, - unlinked() { - updateBtnChild.call(this); - } - } - } -}); - -function updateBtnChild() { - let buttons = this.getRelationNodes('../button/index'); - - if (buttons.length > 0) { - let lastIndex = buttons.length - 1; - - buttons.forEach((button, index) => { - button.switchLastButtonStatus(index === lastIndex); - }); - } -} diff --git a/packages/button-group/index.json b/packages/button-group/index.json deleted file mode 100644 index 467ce294..00000000 --- a/packages/button-group/index.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "component": true -} diff --git a/packages/button-group/index.wxml b/packages/button-group/index.wxml deleted file mode 100644 index 0dd98c36..00000000 --- a/packages/button-group/index.wxml +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/button-group/index.wxss b/packages/button-group/index.wxss deleted file mode 100644 index ff9785d2..00000000 --- a/packages/button-group/index.wxss +++ /dev/null @@ -1,3 +0,0 @@ -.button-group { - margin: 15px; -} diff --git a/packages/button/README.md b/packages/button/README.md index 685a3183..eeaf7617 100644 --- a/packages/button/README.md +++ b/packages/button/README.md @@ -10,89 +10,74 @@ ### 代码演示 -#### 基础用法 -```html -取消订单 -``` - #### 按钮类型 -按钮支持额外的三种类型 primary, danger, warn +支持`default`、`primary`、`danger`三种类型，默认为`default` + ```html -确认付款 -确认付款 -确认付款 +默认按钮 +主要按钮 +危险按钮 ``` -#### 按钮大小 -按钮支持额外三种大小 large, small, mini +#### 朴素按钮 + ```html -确认付款 -取消订单 -确认付款 +默认按钮 +主要按钮 +危险按钮 ``` -#### 其他 -按钮镂空状态 +#### 按钮尺寸 +支持`large`、`normal`、`small`、`mini`四种尺寸，默认为`normal` + +```html +大号按钮 +普通按钮 +小型按钮 +迷你按钮 +``` + +#### 禁用状态 +通过`disabled`属性来禁用按钮，此时按钮不可点击 + ```html -确认付款 +禁用状态 ``` -按钮加载状态 -```html -确认付款 -``` +#### 加载状态 -按钮禁用状态 -```html -确认付款 +```html + + ``` -### 配合 button-group 使用 -通过配合 van-button-group 使用，可以让按钮之间自动有合适的间距出现，使用方式如下 - -1.在 json 文件中配置 button-group 组件 -```json -"usingComponents": { - "van-button": "path/to/vant-weapp/dist/button/index", - "van-button-group": "path/to/vant-weapp/dist/button-group/index" -} -``` -2.在 wxml 中直接引入 -```html - - 确认付款 - 再考虑下 - -``` - -![](https://img.yzcdn.cn/public_files/2017/02/08/1b1e39ed3dc6b63519a68ba1e2650cfc.png) - ### 属性 -| 名称 | 类型 | 是否必须 | 默认 | 描述 | -|---------|---------|----------|------|-------| -| type | String | 否 | 空 | 按钮类型，值有primary、warn、danger | -| size | String | 否 | 空 | 按钮大小，值有large、small、mini | -| plain | Boolean | 否 | false | 按钮是否镂空，默认为false | -| disabled | Boolean | 否 | false | 按钮是否禁用，默认为false | -| loading | Boolean | 否 | false | 按钮加载状态，默认为false | -| openType | String | 否 | - | 微信开放能力 | -| appParameter | String | 否 | - | 打开 APP 时，向 APP 传递的参数 | -| hoverStartTime | Number | 否 | 20 | 按住后多久出现点击态，单位毫秒 | -| hoverStayTime | Number | 否 | 70 | 手指松开后点击态保留时间，单位毫秒 | -| lang | String | 否 | en | 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文 | -| sessionFrom | String | 否 | - | 会话来源 | -| sendMessageTitle | String | 否 | 当前标题 | 会话内消息卡片标题 | -| sendMessagePath | String | 否 | 当前分享路径 | 会话内消息卡片点击跳转小程序路径 | -| sendMessageImg | String | 否 | 截图 | 会话内消息卡片图片 | -| showMessageCard | String | 否 | false | 显示会话内消息卡片 | +| 参数 | 说明 | 类型 | 默认值 | +|-----------|-----------|-----------|-------------| +| type | 按钮类型，可选值为 `default` `primary` `danger` | `String` | `default` | +| size | 按钮尺寸，可选值为 `normal` `large` `small` `mini` | `String` | `normal` | +| plain | 是否为朴素按钮 | `Boolean` | `false` | +| disabled | 是否禁用 | `Boolean` | `false` | +| loading | 是否显示为加载状态 | `Boolean` | `false` | +| block | 是否为块级元素 | `Boolean` | `false` | +| open-type | 微信开放能力 | `String` | - | +| app-parameter | 打开 APP 时，向 APP 传递的参数 | `String` | - | +| hover-start-time | 按住后多久出现点击态，单位毫秒 | `Number` | 20 | +| hover-stay-time | 手指松开后点击态保留时间，单位毫秒 | `Number` | 70 | +| lang | 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文 | `String` | `en` | +| session-from | 会话来源 | `String` | - | +| send-message-title | 会话内消息卡片标题 | `String` | 当前标题 | +| send-message-path | 会话内消息卡片点击跳转小程序路径 | `String` | 当前分享路径 | +| send-message-img | sendMessageImg | `String` | 截图 | +| show-message-card | 显示会话内消息卡片 | `String` | `false` | ### 事件 -| 事件名称 | 说明 | 回调参数 | + +| 事件名 | 说明 | 参数 | |-----------|-----------|-----------| -| buttonclick | 按钮在可用状态被点击时触发 | | -| disabledclick | 在传入的 disabled 为 true 时，点击按钮会触发此事件 | | -| getuserinfo | 用户点击该按钮时，会返回获取到的用户信息，从返回参数的detail中获取到的值同wx.getUserInfo | | -| contact | 客服消息回调 | | -| getphonenumber | 获取用户手机号回调 | | -| error | 当使用开放能力时，发生错误的回调 | | +| click | 点击按钮且按钮状态不为加载或禁用时触发 | - | +| getuserinfo | 用户点击该按钮时，会返回获取到的用户信息，从返回参数的 detail 中获取到的值同 wx.getUserInfo | - | +| contact | 客服消息回调 | - | +| getphonenumber | 获取用户手机号回调 | - | +| error | 当使用开放能力时，发生错误的回调 | - | diff --git a/packages/button/native-button-behaviors.js b/packages/button/behaviors.js similarity index 100% rename from packages/button/native-button-behaviors.js rename to packages/button/behaviors.js diff --git a/packages/button/index.js b/packages/button/index.js index 65a0bc71..5e0ed6f5 100644 --- a/packages/button/index.js +++ b/packages/button/index.js @@ -1,58 +1,78 @@ -const nativeButtonBehavior = require('./native-button-behaviors'); +const nativeBehaviors = require('./behaviors'); +const classnames = require('../common/classnames'); + +const observer = function () { + this.setClasses(); +}; Component({ - externalClasses: ['custom-class', 'theme-class'], - behaviors: [nativeButtonBehavior], - relations: { - '../button-group/index': { - type: 'parent', - linked() { - this.setData({ inGroup: true }); - }, - unlinked() { - this.setData({ inGroup: false }); - } - } - }, + externalClasses: ['custom-class'], + + behaviors: [nativeBehaviors], + properties: { type: { type: String, - value: '', + value: 'default', + observer }, size: { type: String, - value: '', + value: 'normal', + observer }, plain: { type: Boolean, value: false, + observer }, disabled: { type: Boolean, value: false, + observer }, loading: { type: Boolean, value: false, + observer + }, + block: { + type: Boolean, + value: false, + observer } }, data: { - inGroup: false, - isLast: false + classes: '' + }, + + attached() { + this.setClasses(); }, methods: { - handleTap() { - if (this.data.disabled) { - this.triggerEvent('disabledclick'); - return; + onTap(event) { + if (!this.data.disabled && !this.data.loading) { + this.triggerEvent('click', event); } - this.triggerEvent('buttonclick'); }, - switchLastButtonStatus(isLast = false) { - this.setData({ isLast }); + setClasses() { + const { type, size, plain, disabled, loading, block } = this.data; + this.setData({ + classes: classnames( + `van-button--${type}`, + `van-button--${size}`, + { + 'van-button--block': block, + 'van-button--plain': plain, + 'van-button--loading': loading, + 'van-button--disabled': disabled, + 'van-button--unclickable': disabled || loading + } + ) + }); } } }); diff --git a/packages/button/index.json b/packages/button/index.json index 32640e0d..cae21702 100644 --- a/packages/button/index.json +++ b/packages/button/index.json @@ -1,3 +1,6 @@ { - "component": true + "component": true, + "usingComponents": { + "van-loading": "../loading/index" + } } \ No newline at end of file diff --git a/packages/button/index.pcss b/packages/button/index.pcss index 37180a0b..853d3eb1 100644 --- a/packages/button/index.pcss +++ b/packages/button/index.pcss @@ -1,169 +1,135 @@ -@import "../common/_mixins"; +@import '../common/var.pcss'; .van-button { position: relative; - color: #333; - background-color: #fff; - padding-left: 15px; - padding-right: 15px; - border-radius: 2px; - font-size: 16px; - line-height: 45px; + padding: 0; + display: inline-block; height: 45px; + line-height: 43px; + border-radius: 3px; box-sizing: border-box; - text-decoration: none; + font-size: 16px; text-align: center; - vertical-align: middle; - overflow: visible; -} - -.van-button--group { - margin-bottom: 10px; -} - -.van-button::after { - @mixin hairline; - border-width: 1px; - border-radius: 4px; -} - -/* type */ -.van-button--primary { - color: #fff; - background-color: #4b0; + -webkit-appearance: none; &::after { - border-color: #0a0; + content: " "; + position: absolute; + top: 50%; + left: 50%; + opacity: 0; + width: 100%; + height: 100%; + border: inherit; + border-color: $black; + background-color: $black; + border-radius: inherit; /* inherit parent's border radius */ + transform: translate(-50%, -50%); + } + + &:active::after { + opacity: .3; + } + + &--unclickable::after { + display: none; + } + + &--default { + color: $button-default-color; + background-color: $button-default-background-color; + border: 1px solid $button-default-border-color; + } + + &--primary { + color: $button-primary-color; + background-color: $button-primary-background-color; + border: 1px solid $button-primary-border-color; + } + + &--danger { + color: $button-danger-color; + background-color: $button-danger-background-color; + border: 1px solid $button-danger-border-color; + } + + &--plain { + background-color: $white; + + &.van-button--primary { + color: $button-primary-background-color; + } + + &.van-button--danger { + color: $button-danger-background-color; + } + } + + &--large { + width: 100%; + height: 50px; + line-height: 48px; + } + + &--normal { + padding: 0 15px; + font-size: 14px; + } + + &--small { + height: 30px; + padding: 0 8px; + min-width: 60px; + font-size: 12px; + line-height: 28px; + } + + &--loading { + .van-loading { + display: inline-block; + } + + .van-button__text { + display: none; + } + } + + /* mini图标默认宽度50px，文字不能超过4个 */ + &--mini { + display: inline-block; + width: 50px; + height: 22px; + line-height: 20px; + font-size: 10px; + + & + .van-button--mini { + margin-left: 5px; + } + } + + &--block { + width: 100%; + display: block; + } + + &--bottom-action { + width: 100%; + height: 50px; + line-height: 50px; + border: 0; + border-radius: 0; + font-size: 16px; + color: $button-bottom-action-default-color; + background-color: $button-bottom-action-default-background-color; + + &.van-button--primary { + background-color: $button-bottom-action-primary-background-color; + } + } + + &--disabled { + color: $button-disabled-color; + background-color: $button-disabled-background-color; + border: 1px solid $button-disabled-border-color; } } - -.van-button--warn { - color: #fff; - background-color: #f85; - - &::after { - border-color: #f85; - } -} - -.van-button--danger { - color: #fff; - background-color: #f44; - - &::after { - border-color: #e33; - } -} - -/* size */ -.van-button--small { - display: inline-block; - height: 30px; - line-height: 30px; - font-size: 12px; - /* margin-right: 5px; */ -} -.van-button--small.van-button--group { - margin-bottom: 0; - margin-right: 5px; -} - -.van-button--mini { - display: inline-block; - line-height: 21px; - height: 22px; - font-size: 10px; - /* margin-right: 5px; */ - padding-left: 5px; - padding-right: 5px; -} -.van-button--mini.van-button--group { - margin-bottom: 0; - margin-right: 5px; -} - -.van-button--large { - border-radius: 0; - border: none; - line-height: 50px; - height: 50px; -} -.van-button--large.van-button--group { - margin-bottom: 0; -} - -/* plain */ -.van-button--plain.van-button { - background-color: transparent; -} -.van-button--plain.van-button--primary { - color: #06BF04; -} -.van-button--plain.van-button--warn { - color: #FF6600; -} -.van-button--plain.van-button--danger { - color: #FF4444; -} - -/* 重写button组件的button-hover样式 */ -.button-hover { - opacity: 0.9; -} - -/* loading */ -.van-button--loading { - color: transparent; - opacity: 1; -} -.van-button--loading::before { - position: absolute; - left: 50%; - top: 50%; - content: ' '; - width: 16px; - height: 16px; - margin-left: -8px; - margin-top: -8px; - border: 3px solid #e5e5e5; - border-color: #666 #e5e5e5 #e5e5e5 #e5e5e5; - border-radius: 8px; - box-sizing: border-box; - animation: button-spin 0.6s linear; - animation-iteration-count: infinite; -} -.van-button--primary.van-button--loading::before, -.van-button--warn.van-button--loading::before, -.van-button--danger.van-button--loading::before { - border-color: #fff rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1); -} - -@keyframes button-spin { - 0% { - transform: rotate(0); - } - 100% { - transform: rotate(360deg); - } -} - -/* disabled */ -.van-button.van-button--disabled { - /* 防止样式被 button[disabled] 的规则覆盖，所以使用了important */ - color: #999 ! important; - background: #f8f8f8 ! important; - border-color: #e5e5e5 ! important; - cursor: not-allowed ! important; - opacity: 1 ! important; - - &::after { - border-color: #e5e5e5 ! important; - } -} - -/* :last-child */ -.van-button--group.van-button--last { - margin-bottom: 0; - margin-right: 0; -} - diff --git a/packages/button/index.wxml b/packages/button/index.wxml index 0290c18a..8c6813c6 100644 --- a/packages/button/index.wxml +++ b/packages/button/index.wxml @@ -1,5 +1,5 @@ diff --git a/packages/common/_var.pcss b/packages/common/_var.pcss index 79488fd1..82e6ac09 100644 --- a/packages/common/_var.pcss +++ b/packages/common/_var.pcss @@ -12,22 +12,22 @@ $gray-dark: #999; /* default colors */ $text-color: #333; -$border-color: #ccc; +$border-color: $gray-light; $active-color: #e8e8e8; $background-color: #f8f8f8; /* button */ $button-default-color: $text-color; $button-default-background-color: $white; -$button-default-border-color: $gray-light; +$button-default-border-color: $border-color; $button-primary-color: $white; $button-primary-background-color: #4b0; -$button-primary-border-color: #0a0; +$button-primary-border-color: #4b0; $button-danger-color: $white; $button-danger-background-color: $red; -$button-danger-border-color: #e33; +$button-danger-border-color: $red; $button-disabled-color: $gray-dark; -$button-disabled-background-color: $gray-light; +$button-disabled-background-color: $active-color; $button-disabled-border-color: $border-color; $button-bottom-action-default-color: $white; $button-bottom-action-default-background-color: #f85; diff --git a/packages/common/classnames.js b/packages/common/classnames.js new file mode 100644 index 00000000..71c74a3e --- /dev/null +++ b/packages/common/classnames.js @@ -0,0 +1,29 @@ +const hasOwn = {}.hasOwnProperty; + +module.exports = function classNames() { + const classes = []; + + for (let i = 0; i < arguments.length; i++) { + const arg = arguments[i]; + if (!arg) continue; + + const argType = typeof arg; + + if (argType === 'string' || argType === 'number') { + classes.push(arg); + } else if (Array.isArray(arg) && arg.length) { + const inner = classNames.apply(null, arg); + if (inner) { + classes.push(inner); + } + } else if (argType === 'object') { + for (const key in arg) { + if (hasOwn.call(arg, key) && arg[key]) { + classes.push(key); + } + } + } + } + + return classes.join(' '); +}; diff --git a/packages/common/var.pcss b/packages/common/var.pcss new file mode 100644 index 00000000..82e6ac09 --- /dev/null +++ b/packages/common/var.pcss @@ -0,0 +1,35 @@ +/* color variables */ +$black: #000; +$white: #fff; +$red: #f44; +$blue: #38f; +$orange: #f60; +$green: #06bf04; +$gray: #c9c9c9; +$gray-light: #e5e5e5; +$gray-darker: #666; +$gray-dark: #999; + +/* default colors */ +$text-color: #333; +$border-color: $gray-light; +$active-color: #e8e8e8; +$background-color: #f8f8f8; + +/* button */ +$button-default-color: $text-color; +$button-default-background-color: $white; +$button-default-border-color: $border-color; +$button-primary-color: $white; +$button-primary-background-color: #4b0; +$button-primary-border-color: #4b0; +$button-danger-color: $white; +$button-danger-background-color: $red; +$button-danger-border-color: $red; +$button-disabled-color: $gray-dark; +$button-disabled-background-color: $active-color; +$button-disabled-border-color: $border-color; +$button-bottom-action-default-color: $white; +$button-bottom-action-default-background-color: #f85; +$button-bottom-action-primary-color: $white; +$button-bottom-action-primary-background-color: $red;