Merge pull request #42 from fergardi/components/Chip

Added Chip component.
lusaxweb · May 9, 2018 · 6cc77c9 · 6cc77c9
2 parents bedcb37 + 9662848
commit 6cc77c9
Show file tree

Hide file tree

Showing 4 changed files with 287 additions and 2 deletions.
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
@@ -186,8 +186,9 @@ module.exports = {
           '/documents/components/number',
           '/documents/components/tooltip',
           '/documents/components/upload',
-          '/documents/components/loading'
-         ]
+          '/documents/components/loading',
+          '/documents/components/chip'
+        ]
       },
     ]
   }

diff --git a/docs/documents/components/chip.md b/docs/documents/components/chip.md
@@ -0,0 +1,146 @@
+---
+API:
+ - name: vs-color
+   type: String
+   parameters: RGB, HEX, primary, success, danger, warning, dark
+   description: Component color
+   default: primary
+ - name: vs-closable
+   type: Boolean
+   parameters: null
+   description: With closable button
+   default: false
+ - name: vs-icon
+   type: String
+   parameters: null
+   description: With custom icon
+   default: null
+---
+
+# Chip
+
+<box header>
+
+  Chips are compact elements that represent an input, attribute, or action.
+
+</box>
+
+<box>
+
+## Color
+
+To represent symple data with colorful options.
+
+<vuecode md center>
+<div slot="demo">
+  <vs-chip vs-color="primary">primary</vs-chip>
+  <vs-chip vs-color="warning">warning</vs-chip>
+  <vs-chip vs-color="danger">danger</vs-chip>
+  <vs-chip vs-color="success">success</vs-chip>
+  <vs-chip vs-color="dark">dark</vs-chip>
+</div>
+<div slot="code">
+
+```html
+<template lang="html">
+  <div class="centerx">
+    <vs-chip vs-color="primary">primary</vs-chip>
+    <vs-chip vs-color="warning">warning</vs-chip>
+    <vs-chip vs-color="danger">danger</vs-chip>
+    <vs-chip vs-color="success">success</vs-chip>
+    <vs-chip vs-color="dark">dark</vs-chip>
+  </div>
+</template>
+
+<script>
+export default {
+}
+</script>
+```
+
+</div>
+</vuecode>
+
+</box>
+
+<box>
+
+## Icon
+
+Add a nice icon to the chip.
+
+::: tip
+Vuesax use the **Google Material Icons** font library. For a list of all available icons, visit the official [Material Icons page](https://material.io/icons/).
+:::
+
+<vuecode md center>
+<div slot="demo">
+  <vs-chip vs-icon="info" vs-color="primary">primary</vs-chip>
+  <vs-chip vs-icon="help" vs-color="warning">warning</vs-chip>
+  <vs-chip vs-icon="error" vs-color="danger">danger</vs-chip>
+  <vs-chip vs-icon="check_circle" vs-color="success">success</vs-chip>
+  <vs-chip vs-icon="account_circle" vs-color="dark">dark</vs-chip>
+</div>
+<div slot="code">
+
+```html
+<template lang="html">
+  <div class="centerx">
+    <vs-chip vs-icon="info" vs-color="primary">primary</vs-chip>
+    <vs-chip vs-icon="help" vs-color="warning">warning</vs-chip>
+    <vs-chip vs-icon="error" vs-color="danger">danger</vs-chip>
+    <vs-chip vs-icon="check_circle" vs-color="success">success</vs-chip>
+    <vs-chip vs-icon="account_circle" vs-color="dark">dark</vs-chip>
+  </div>
+</template>
+
+<script>
+export default {
+}
+</script>
+```
+
+</div>
+</vuecode>
+
+</box>
+
+
+<box>
+
+## Closable
+
+To make a chip closable.
+
+<vuecode md center>
+<div slot="demo">
+  <vs-chip vs-closable="true" vs-color="primary">primary</vs-chip>
+  <vs-chip vs-closable="true" vs-color="warning">warning</vs-chip>
+  <vs-chip vs-closable="true" vs-color="danger">danger</vs-chip>
+  <vs-chip vs-closable="true" vs-color="success">success</vs-chip>
+  <vs-chip vs-closable="true" vs-color="dark">dark</vs-chip>
+</div>
+<div slot="code">
+
+```html
+<template lang="html">
+  <div class="centerx">
+    <vs-chip vs-closable="true" vs-color="primary">primary</vs-chip>
+    <vs-chip vs-closable="true" vs-color="warning">warning</vs-chip>
+    <vs-chip vs-closable="true" vs-color="danger">danger</vs-chip>
+    <vs-chip vs-closable="true" vs-color="success">success</vs-chip>
+    <vs-chip vs-closable="true" vs-color="dark">dark</vs-chip>
+  </div>
+</template>
+
+<script>
+export default {
+}
+</script>
+```
+
+</div>
+</vuecode>
+
+</box>
+
diff --git a/src/vuesax/components/index.js b/src/vuesax/components/index.js
@@ -23,6 +23,7 @@ import vsDropdownItem from './vsDropDown/vsDropDownItem.vue'
 import vsAnchor from './vsAnchor/vsAnchor.vue'
 import vsLink from './vsAnchor/vsLink.vue'
 import vsAlert from './vsAlert/vsAlert.vue'
+import vsChip from './vsChip/vsChip.vue'
 
 //layout
 import vsRow from '../layout/vsRow.vue'
@@ -51,6 +52,8 @@ export const vsComponents = {
   vsAnchor,
   vsLink,
   vsAlert,
+  vsChip,
+
   //layout
   vsRow,
   vsCol,

diff --git a/src/vuesax/components/vsChip/vsChip.vue b/src/vuesax/components/vsChip/vsChip.vue
@@ -0,0 +1,135 @@
+<template lang="html">
+  <div
+    :class="{
+      'con-icon':vsIcon,
+    }"
+    :style="{
+      'background':vsColor?/[#()]/.test(vsColor)?`rgba(${vsColor.replace(/[rgb()]/g,'')},.1)`:`rgba(var(--${vsColor}),.1)`:'rgba(var(--primary),.1)',
+      'color':vsColor?/[#()]/.test(vsColor)?vsColor:`rgba(var(--${vsColor}),1)`:'rgba(var(--primary),1)'
+    }"
+    class="con-vs-chip">
+
+    <i v-if="vsIcon" class="material-icons icon-chip">{{vsIcon}}</i>
+
+    <h3 v-if="vsText" class="textx">{{vsText}}</h3>
+
+    <div class="vs-chip">
+      <slot>
+      </slot>
+      <!--
+      <div class="flaticon-close alert-cancel"></div>
+      -->
+    </div>
+
+     <div
+      @click="$emit('update:vsActive',false)"
+      v-if="vsClosable"
+      class="con-x">
+      <i class="material-icons">close</i>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name:'vs-chip',
+  props:{
+    vsActive:{
+      type:Boolean,
+      default:true,
+    },
+    vsText:{
+      type:String,
+      default:null,
+    },
+    vsClosable:{
+      type:Boolean,
+      default:false,
+    },
+    vsColor:{
+      type:String,
+      default:'primary',
+    },
+    vsIcon:{
+      type:String,
+      default:null,
+    }
+  },
+  created(){
+
+  }
+}
+</script>
+
+<style lang="css" scoped>
+.textx {
+  padding: 0;
+  font-weight: lighter;
+}
+.con-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.icon-chip {
+  position: relative;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}
+.con-x {
+  position: relative;
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  background: inherit;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: inherit;
+  cursor: pointer;
+  z-index: 100;
+  transition: all .3s ease;
+}
+.con-x:hover {
+  background: inherit;
+  background: rgba(0, 0, 0, 0.5);
+  color: rgb(255, 255, 255);
+}
+.con-x i {
+  font-size: 17px;
+  color: inherit;
+}
+.fade-enter-active, .fade-leave-active {
+  transition: all .3s;
+}
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+  /* opacity: 0; */
+  max-height: 0 !important;
+  margin-bottom: 0px !important;
+  margin-top: 0px !important;
+}
+.con-vs-chip {
+  width: auto;
+  background: rgba(var(--primary),.1);
+  border-radius: 10px;
+  opacity: 1;
+  overflow: hidden;
+  position: relative;
+  margin: 5px;
+  display: inline-flex;
+  /* margin-top: 10px;
+  margin-bottom: 10px; */
+}
+.vs-chip {
+  color: inherit;
+  padding: 5px 10px;
+  font-size: 12px;
+  position: relative;
+}
+.vs-chip b {
+  color: rgb(var(--primary)) !important;
+
+}
+</style>