quasar-ui-sellmate-ui-kit 3.3.4 → 3.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar-ui-sellmate-ui-kit",
-  "version": "3.3.4",
+  "version": "3.4.0",
   "author": "Sellmate Dev Team <dev@sellmate.co.kr>",
   "description": "Sellmate UI Kit",
   "license": "MIT",

package/src/components/SBadge.vue

@@ -0,0 +1,49 @@
+<template>
+  <q-badge
+    class="s-badge"
+    :label="configs[status].label"
+    :color="configs[status].color"
+    :text-color="configs[status].textColor"
+  />
+</template>
+
+<script>
+  import { defineComponent } from 'vue';
+  import { QBadge } from 'quasar';
+
+  export default defineComponent({
+    name: 'SBadge',
+    components: { QBadge },
+    props: {
+      status: String,
+      configs: {
+        type: Object,
+        default: () => ({
+          success: {
+            label: '성공',
+            color: 'Blue_C_Lighten-6',
+            textColor: 'positive',
+          },
+          fail: {
+            label: '실패',
+            color: 'Red_Lighten-6',
+            textColor: 'Red_Lighten-1',
+          },
+          total: {
+            label: '전체',
+            color: 'Grey_Lighten-5',
+            textColor: 'Grey_Darken-1',
+          },
+        }),
+      },
+    },
+  });
+</script>
+
+<style scoped lang="scss">
+  .s-badge {
+    padding: 1px 8px;
+    border-radius: 4px;
+    height: 20px;
+  }
+</style>

package/src/vue-plugin.js

@@ -39,10 +39,12 @@ import SDateRange from './components/SDateRange.vue';
 import SDate from './components/SDate.vue';
 import SDateAutoRangePicker from './components/SDateAutoRangePicker.vue';
 import Directive from './directives/Directive';
+import SBadge from './components/SBadge.vue';
 
 const version = __UI_VERSION__;
 
 function install(app) {
+  app.component('s-badge', SBadge)
   app.component('s-breadcrumbs', SBreadcrumbs);
   app.component('s-button', SButton);
   app.component('s-button-group', SButtonGroup);