@zerone-fe/zui - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

examples/App.vue

@@ -7,3 +7,3 @@ <template>
     </div> -->
-    <h1>组件库</h1>
+    <h1>ZUI 组件库</h1>
     <router-view />
@@ -14,8 +14,17 @@ </div>
 <style lang="scss">
+html, body {
+  margin: 0;
+}
+
 #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
+  // font-family: Avenir, Helvetica, Arial, sans-serif;
+  font-family: Roboto, Avenir, Helvetica, Arial, sans-serif, "PingFang SC",
+    -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans GB",
+    "Source Han Sans", "Noto Sans CJK Sc", "Microsoft YaHei",
+    "Microsoft Jhenghei";
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
-  color: #2c3e50;
+  color: #fff;
+  background-color: #06070A;
 }
@@ -35,2 +44,6 @@
 }
+
+h1 {
+  margin: 0;
+}
 </style>

examples/views/Home.vue

 <template>
   <div class="home">
     <!-- <img alt="Vue logo" src="../assets/logo.png" /> -->
-    <z-button>hello</z-button>
+    <section class="component">
+      <h2>按钮</h2>
+      <ul>
+        <li>3种尺寸：small、normal（默认）和 large</li>
+        <li>4种颜色：normal、primary、danger 和 border。border 背景色有透明度会受父级元素背景色影响。</li>
+        <li>2种风格：直角和圆角，通过 round 布尔值设定，默认为 true 圆角</li>
+        <li>3中状态：正常、激活（hover）和禁用（disabled）</li>
+      </ul>
+      <div class="block">
+        <z-button size='small'>default small</z-button>
+        <z-button size='small' type='primary'>primary small</z-button>
+        <z-button size='small' type='danger'>danger small</z-button>
+        <z-button size='small' type='border'>border small</z-button>
+      </div>
+      <div class="block">
+        <z-button>default normal</z-button>
+        <z-button type='primary' @click="handleClick">primary normal 可点击</z-button>
+        <z-button type='danger'>danger normal</z-button>
+        <z-button type='border'>border normal</z-button>
+      </div>
+      <div class="block">
+        <z-button disabled>default normal disabled</z-button>
+        <z-button disabled type='primary'>primary normal disabled</z-button>
+        <z-button disabled type='danger'>danger normal disabled</z-button>
+        <z-button disabled type='border'>border normal disabled 这个颜色看不清</z-button>
+      </div>
+      <div class="block">
+        <z-button size='large' :round="false">default large 直角</z-button>
+        <z-button size='large' type='primary' :round="false">primary large 直角</z-button>
+        <z-button size='large' type='danger' :round="false">danger large 直角</z-button>
+        <z-button size='large' type='border' :round="false">border large 直角</z-button>
+      </div>
+    </section>
   </div>
@@ -10,4 +42,28 @@ </template>
 export default {
-  name: "Home"
+  name: "Home",
+  methods: {
+    handleClick () {
+      console.log('click')
+      alert('按钮点击回调')
+    }
+  }
 };
 </script>
+
+<style lang="scss" scoped>
+.component {
+  padding: 10px 20px;
+  color: #fff;
+  text-align: left;
+  background-color: #3D465E;
+
+  .block {
+    .z-button + .z-button {
+      margin-left: 10px;
+    }
+  }
+  .block + .block {
+    margin-top: 10px;
+  }
+}
+</style>

package.json

 {
   "name": "@zerone-fe/zui",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "scripts": {
@@ -5,0 +5,0 @@ "serve": "vue-cli-service serve",

packages/Button/src/index.vue

 <template>
-    <div class="z-button">
+    <div class="z-button" @click="$emit('click')"
+        :class="[
+            {'z-button--round': round}, 
+            type && 'z-button--' + type,
+            size && 'z-button--' + size,
+            { 'z-button--diabled': disabled }
+        ]">
         <slot></slot>
@@ -9,5 +15,17 @@ </div>
 export default {
-    name: 'z-button',
+    name: 'ZButton',
     props: {
-        type: String
+        type: String,
+        round: {
+            // 是否圆角
+            type: Boolean,
+            default: true
+        },
+        size: {
+            type: String
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        }
     }
@@ -18,8 +36,76 @@ }
 <style lang="scss" scoped>
+.z-button--round {
+    border-radius: 4px;
+}
 .z-button {
+    box-sizing: border-box;
     display: inline-block;
-    padding: 3px 6px;
-    background: #000;
-    color: #fff;
+    height: 28px;
+    padding: 4px 20px;
+
+    background: #A4B1D6;
+    color: #212734;
+    user-select: none;
+    cursor: pointer;
+    text-align: center;
+    font-size: 12px;
+    line-height: 20px;
+    font-family: PingFangSC-Medium, PingFang SC;
+
+    &:hover {
+        background-color: #687390;
+    }
+
+    &.z-button--diabled {
+        color: rgba(255, 255, 255, 0.6);
+        background-color: #4A5470;
+    }
 }
+.z-button--primary {
+    color: #212734;
+    background-color: #FBB001;
+    &:hover {
+        background-color: #D87E0E;
+    }
+    &.z-button--diabled {
+        color: rgba(255, 255, 255, 0.6);
+        background-color: #4A5470;
+    }
+}
+.z-button--danger {
+    color: #212734;
+    background-color: #FF6F64;
+    &:hover {
+        background-color: #C85252;
+    }
+    &.z-button--diabled {
+        color: rgba(255, 255, 255, 0.6);
+        background-color: #4A5470;
+    }
+}
+.z-button--border {
+    color: rgba(251, 176, 1, 0.8);
+    background-color: #1AFBB001;
+    border: 1px solid #FBB001;
+
+    &:hover {
+        background: rgba(251, 176, 1, 0.2);
+    }
+    &.z-button--diabled {
+        border: 1px solid #4A5470;
+        color: #4A5470;
+        background: rgba(74, 84, 112, 0.1);
+    }
+}
+.z-button--small {
+    height: 24px;
+    padding: 6px 10px;
+    line-height: 12px;
+}
+.z-button--large {
+    height: 40px;
+    line-height: 20px;
+    padding: 10px 30px;
+    font-size: 14px;
+}
 </style>

New alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 2 instances in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 2 instances in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

110116

4.1%

No dependency changes