cy-element-ui 1.1.2 → 1.1.4

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "cy-element-ui",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "description": "A Component Library for Vue.js.",
-  "main": "lib/element-ui.common.js",
+  "main": "lib/index.js",
   "files": [
     "lib",
     "src",

package/packages/cy-test/index.js

@@ -0,0 +1,8 @@
+import CyTest from './src/main';
+
+/* istanbul ignore next */
+CyTest.install = function(Vue) {
+  Vue.component(CyTest.name, CyTest);
+};
+
+export default CyTest;

package/packages/cy-test/src/main.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="cy-test" :class="{ 'cy-test--bordered': bordered }">
+    <div class="cy-test__header" v-if="title">
+      <span class="cy-test__title">{{ title }}</span>
+      <span class="cy-test__badge" v-if="badge">{{ badge }}</span>
+    </div>
+    <div class="cy-test__content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CyTest',
+
+  props: {
+    title: String,
+    badge: String,
+    bordered: {
+      type: Boolean,
+      default: true
+    }
+  }
+};
+</script>

package/packages/theme-chalk/src/cy-test.scss

@@ -0,0 +1,61 @@
+.cy-test {
+  display: inline-block;
+  padding: 20px 24px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 8px;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
+  min-width: 300px;
+
+  &--bordered {
+    border: 3px solid #fff;
+    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4), inset 0 0 0 3px rgba(255, 255, 255, 0.3);
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 16px;
+    padding-bottom: 12px;
+    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
+  }
+
+  &__title {
+    font-size: 18px;
+    font-weight: 700;
+    color: #fff;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+  }
+
+  &__badge {
+    display: inline-block;
+    padding: 4px 12px;
+    font-size: 12px;
+    font-weight: 600;
+    color: #667eea;
+    background-color: #fff;
+    border-radius: 20px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  }
+
+  &__content {
+    font-size: 15px;
+    color: rgba(255, 255, 255, 0.95);
+    line-height: 1.8;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
+    background: rgba(255, 255, 255, 0.1);
+    padding: 12px 16px;
+    border-radius: 6px;
+  }
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 30px rgba(102, 126, 234, 0.5);
+  }
+
+  &:active {
+    transform: translateY(0);
+    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
+  }
+}

package/packages/theme-chalk/src/index.scss

@@ -85,3 +85,4 @@
 @import "./descriptions.scss";
 @import "./descriptions-item.scss";
 @import "./result.scss";
+@import "./cy-test.scss";

package/src/index.js

@@ -88,7 +88,8 @@ import SkeletonItem from '../packages/skeleton-item/index.js';
 import Empty from '../packages/empty/index.js';
 import Descriptions from '../packages/descriptions/index.js';
 import DescriptionsItem from '../packages/descriptions-item/index.js';
-import Result from '../packages/result/index.js';
+import Result from '../packages/result/index.js';
+import CyTest from '../packages/cy-test/index.js';
 import locale from 'element-ui/src/locale';
 import CollapseTransition from 'element-ui/src/transitions/collapse-transition';
 
@@ -176,7 +177,8 @@ const components = [
   Empty,
   Descriptions,
   DescriptionsItem,
-  Result,
+  Result,
+  CyTest,
   CollapseTransition
 ];
 
@@ -212,7 +214,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 }
 
 export default {
-  version: '1.1.1',
+  version: '1.1.3',
   locale: locale.use,
   i18n: locale.i18n,
   install,
@@ -305,5 +307,6 @@ export default {
   Empty,
   Descriptions,
   DescriptionsItem,
-  Result
+  Result,
+  CyTest
 };