🎩 You're Invited:Meet the Socket team at Black Hat in Las Vegas, August 3-6.RSVP →
Sign In

ca-ui

Package Overview
Dependencies
Maintainers
1
Versions
6
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ca-ui - npm Package Compare versions

Comparing version
1.0.0
 to
1.0.1
+17
README.md
# CA-UI
一个基于vue2的移动端组件库，只是定义了一些常用的组件，以便于工作中快速开发的需求
>* 本套组件在于用较少的嵌套层级关系和较少的易读的默认样式来搭建web项目，用户可以方便的更改样式来适应
>* 1.0版本还在开发中
## Statement
> _项目中的swiper组件并非作者开发而是使用了封装的外部swiper的组件_
## How to use
1. 安装<br/>
>* _npm install ca-ui --save_ <br/>
>* ca-ui 基于使用在webpack模板的项目所以请先安装vue2的脚手架和创建webpack项目 _[vue-cli](http://cn.vuejs.org/v2/guide/installation.html "Vue官网")_ <br/>
>* vue 常用的组件 _vue-router_ _vuex_
2. 使用
> 按照约定使用了webpack模板的项目在入口文件main.js中引入 import 'ca-ui' 即可在任意地方使用
## API
>* 组件的使用示例和api <br/>
>* _注意！在组件中所有单位基于rem，1rem等于100px，使用组件设计时按此约定即可_ <br/>
>* 暂无 <br/> 
+239
sass/CA-UI-style.scss
/**
* Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
* http://cssreset.com
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video,
input {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font-weight: normal;
vertical-align: baseline;
list-style: none;
list-style-type: none;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* custom */
a {
color: #7e8c8d;
text-decoration: none;
-webkit-backface-visibility: hidden;
}
li {
list-style: none;
}
::-webkit-scrollbar {
width: 5px;
height: 5px;
}
::-webkit-scrollbar-track-piece {
background-color: rgba(0, 0, 0, 0.2);
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:vertical {
height: 5px;
background-color: rgba(125, 125, 125, 0.7);
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:horizontal {
width: 5px;
background-color: rgba(125, 125, 125, 0.7);
-webkit-border-radius: 6px;
}
html,
body {
width: 100%;
}
body {
-webkit-text-size-adjust: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
/* 在X5新内核Blink中，在排版页面的时候，会主动对字体进行放大，会检测页面中的主字体，当某一块字体在我们的判定规则中，认为字号较小，并且是页面中的主要字体，就会采取主动放大的操作。然而这不是我们想要的，可以采取给最大高度解决 */
max-height: 100000px;
}
input[type="button"],
input[type="submit"],
input[type="reset"],
button {
-webkit-appearance: none;
}
textarea {
-webkit-appearance: none;
}
input:focus,
textarea:focus {
outline: none;
}
input:focus {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-user-modify: read-write-plaintext-only;
}
input::-ms-clear {
display: none;
}
textarea {
resize: none;
}
*,
*:before,
*:after {
box-sizing: border-box;
-moz-box-sizing: border-box;
/* Firefox */
-webkit-box-sizing: border-box;
/* Safari */
}
*,
*:before,
*:after {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.clearfix {
overflow: hidden;
_zoom: 1
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
+132
src/switch/switch.vue
<template>
<div class="ca-switch" :style="caSwitchStyle">
<input type="checkbox" id="ca-switch-checkbox" class="ca-switch-checkbox" name="ca-switch-checkbox"/>
<label for="ca-switch-checkbox" :class="caSwitchLocationClass" v-if="content">{{content}}</label>
<div class="ca-switch-btn" ref="caSwitch">
<label class="ca-switch-btn-inner" for="ca-switch-checkbox" ref="cabtn" @touchend="trunSwitch"></label>
</div>
</div>
</template>
<script>
export default {
data() {
return {
onf: this.check
}
},
props: {
content: {
type:[String, Number],
default:''
},
check: {
type: Boolean,
default: false
},
size: {
type:[String, Number],
default: '.42'
},
left: {
type: Boolean,
default: true
},
right: {
type: Boolean,
default: false
}
},
mounted() {
this.btnDefault()
},
computed: {
caSwitchStyle() {
let location = ''
if (this.left) location = 'flex-direction: row'
if (this.right) location = 'flex-direction: row-reverse'
return location
},
caSwitchLocationClass() {
let {left, right} = this
let classMap = []
classMap.push('ca-switch-content')
if (left) classMap.push('ca-switch-left')
if (right) classMap.push('ca-switch-right')
return classMap
}
},
methods: {
btnDefault() {
let self = this
let caSwitch = self.$refs.caSwitch.style
let btn = self.$refs.cabtn.style
if (self.onf) {
btn.left = '100%'
btn.marginLeft = (self.size * -1 * 0.5 + 'rem') || '-.21rem'
btn.backgroundColor = 'rgb(126, 87, 194)'
caSwitch.backgroundColor = 'rgba(126, 87, 194, 0.498039)'
}
},
trunSwitch() {
this.onf = !this.onf
let self = this
let btn = self.$refs.cabtn.style
let caSwitch = self.$refs.caSwitch.style
if (this.onf) {
btn.left = '100%'
btn.marginLeft = (self.size * -1 * 0.5 + 'rem') || '-.21rem'
btn.backgroundColor = 'rgb(126, 87, 194)'
caSwitch.backgroundColor = 'rgba(126, 87, 194, 0.498039)'
}
if (!this.onf) {
btn.left = '0%'
btn.backgroundColor = 'rgb(245, 245, 245)'
caSwitch.backgroundColor = 'rgb(189, 189, 189)'
}
}
}
}
</script>
<style lang="scss">
.ca-switch{
width: 2rem;
height: .42rem;
display: flex;
font-size: .3rem;
padding: 0rem .2rem
}
.ca-switch-checkbox {
display: none
}
.ca-switch-content {
flex: none;
align-self: center;
overflow: hidden;
}
.ca-switch-btn {
height: .3rem;
flex: auto;
align-self: center;
border-radius: .3rem;
background-color: rgb(189, 189, 189);
position: relative
}
.ca-switch-btn-inner {
width: .42rem;
height: .42rem;
border-radius: 50%;
background-color: rgb(245, 245, 245);
position: absolute;
top: 50%;
margin-top: -.21rem;
left: 0
}
.ca-switch-left {
margin-right: 10%
}
.ca-switch-right {
margin-left: 10%
}
</style> 
+36
test/rem.js
/*eslint-disable */ ! function(e) {
function t(a) {
if (i[a]) return i[a].exports
var n = i[a] = {
exports: {},
id: a,
loaded: !1
}
return e[a].call(n.exports, n, n.exports, t), n.loaded = !0, n.exports
}
var i = {};
return t.m = e, t.c = i, t.p = "", t(0)
}([function(e, t) {
"use strict";
Object.defineProperty(t, "__esModule", {
value: !0
});
var i = window;
t["default"] = i.flex = function(e, t) {
var a = e || 100,
n = t || 1,
r = i.document,
o = navigator.userAgent,
d = o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i),
l = o.match(/U3\/((\d+|\.){5,})/i),
c = l && parseInt(l[1].split(".").join(""), 10) >= 80,
p = navigator.appVersion.match(/(iphone|ipad|ipod)/gi),
s = i.devicePixelRatio || 1;
p || d && d[1] > 534 || c || (s = 1);
var u = 1 / s,
m = r.querySelector('meta[name="viewport"]');
m || (m = r.createElement('meta'), m.setAttribute('name', 'viewport'), r.head.appendChild(m)), m.setAttribute('content', 'width=device-width,user-scalable=no,initial-scale=' + u + ',maximum-scale=' + u + ',minimum-scale=' + u), r.documentElement.style.fontSize = a / 2 * s * n + 'px'
}, e.exports = t['default']
}]);
flex(100, 1)
/*eslint-enable */
+123
-26
package.json
{
"name": "ca-ui",
"version": "1.0.0",
"description": "ui for vue2",
"main": "dist/ca-ui.js",
"directories": {
"test": "test"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/lpxiana/CA-UI.git"
},
"keywords": [
"vue2",
"ui",
"ca-ui"
],
"author": "CongAn",
"license": "ISC",
"bugs": {
"url": "https://github.com/lpxiana/CA-UI/issues"
},
"homepage": "https://github.com/lpxiana/CA-UI#readme"
}
"name": "ca-ui",
"version": "1.0.1",
"description": "ui for vue2",
"main": "dist/ca-ui.js",
"directories": {
"test": "test"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/lpxiana/CA-UI.git"
},
"devDependencies": {
"autoprefixer": "^6.7.2",
"babel-core": "^6.22.1",
"babel-eslint": "^7.1.1",
"babel-loader": "^6.2.10",
"babel-plugin-istanbul": "^3.1.2",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-env": "^1.2.1",
"babel-preset-stage-2": "^6.22.0",
"babel-register": "^6.22.0",
"chai": "^3.5.0",
"chalk": "^1.1.3",
"connect-history-api-fallback": "^1.3.0",
"copy-webpack-plugin": "^4.0.1",
"cross-env": "^3.1.4",
"css-loader": "^0.26.1",
"node-sass": "^4.5.0",
"eslint": "^3.14.1",
"eslint-config-standard": "^6.2.1",
"eslint-friendly-formatter": "^2.0.7",
"eslint-loader": "^1.6.1",
"sass-loader": "^6.0.3",
"sass-lint": "^1.10.2",
"eslint-plugin-html": "^2.0.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^2.0.1",
"eventsource-polyfill": "^0.9.6",
"express": "^4.14.1",
"extract-text-webpack-plugin": "^2.0.0",
"fastclick": "^1.0.6",
"file-loader": "^0.10.0",
"friendly-errors-webpack-plugin": "^1.1.3",
"function-bind": "^1.1.0",
"gulp": "^3.9.1",
"gulp-clean-css": "^3.0.4",
"gulp-concat": "^2.6.1",
"gulp-less": "^3.3.0",
"gulp-rename": "^1.2.2",
"highlight.js": "^9.10.0",
"html-webpack-plugin": "^2.28.0",
"http-proxy-middleware": "^0.17.3",
"inject-loader": "^2.0.1",
"karma": "^1.4.1",
"karma-coverage": "^1.1.1",
"karma-mocha": "^1.3.0",
"karma-phantomjs-launcher": "^1.0.2",
"karma-sinon-chai": "^1.2.4",
"karma-sourcemap-loader": "^0.3.7",
"karma-spec-reporter": "0.0.26",
"karma-webpack": "^2.0.2",
"keycode": "^2.1.8",
"less": "^2.7.2",
"less-loader": "^3.0.0",
"lodash": "^4.17.4",
"lodash.tolower": "^4.1.2",
"lolex": "^1.5.2",
"marked": "^0.3.6",
"mocha": "^3.2.0",
"opn": "^4.0.2",
"optimize-css-assets-webpack-plugin": "^1.3.0",
"ora": "^1.1.0",
"phantomjs-prebuilt": "^2.1.14",
"raw-loader": "^0.5.1",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.7.7",
"sinon": "^1.17.7",
"sinon-chai": "^2.8.0",
"url-loader": "^0.5.7",
"vue": "^2.2.6",
"vue-i18n": "5.0.3",
"vue-loader": "^11.3.3",
"vue-router": "^2.3.0",
"vue-style-loader": "^2.0.0",
"vue-template-compiler": "^2.2.6",
"webpack": "^2.2.1",
"webpack-bundle-analyzer": "^2.2.1",
"webpack-dev-middleware": "^1.10.0",
"webpack-hot-middleware": "^2.16.1",
"webpack-merge": "^2.6.1"
},
"keywords": [
"vue2",
"ui",
"ca-ui",
"vue",
"vue ui"
],
"author": {
"name": "CongAn",
"email": "lpkpw2@163.com"
},
"license": "ISC",
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 5 versions",
"ios >= 7",
"android > 4.4",
"not ie <= 8"
],
"bugs": {
"url": "https://github.com/lpxiana/CA-UI/issues"
},
"homepage": "https://github.com/lpxiana/CA-UI#readme"
}
+1
-1
src/avatar/avatar.vue
<template>
<figure class="ca-avatar">
<img class="ca-avatar-img" :src="avatarImg" @touchend="handleClick" :style="avatarImgStyle"/>
<p class="ca-avatar-name">{{name}}</p>
<p class="ca-avatar-name" v-if="name">{{name}}</p>
<slot></slot>

@@ -6,0 +6,0 @@ </figure>

+3
-1
src/index.js

@@ -17,2 +17,3 @@ import Vue from 'vue'

import caPage from './page/page'
import caSwitch from './switch/switch.vue'

@@ -30,3 +31,4 @@ // 模块化

caDialog,
caPage
caPage,
caSwitch
}

@@ -33,0 +35,0 @@ 

+1
-1
test/utils.js

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

import '../dist/color'
import './rem'
import '../src/index'
-1
dist/color.js
export const red50 = 'skyblue'
read

Sorry, the diff of this file is not supported yet