Merge pull request #78 from Holo-Host/bulk-pay

Components for cloud console bulk pay
Holo-Host · Dec 1, 2023 · 360c660 · 360c660
2 parents a4b1960 + a15456a
commit 360c660
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 5 deletions.
diff --git a/src/components/BaseTableHeaderItem.vue b/src/components/BaseTableHeaderItem.vue
@@ -12,6 +12,19 @@
     class="header-row-item"
   >
     <div
+      v-if="header.checkBoxFunction"
+      class="header-row-item__content"
+      :class="[header.align ? `header-row-item__content--align-${header.align}` : '']"
+    >
+      <BaseCheckbox
+        id="select-all"
+        :checked="header.checkBoxValue"
+        class="todo_checkbox"
+        @update:checked="header.checkBoxFunction"
+      />
+    </div>
+    <div
+      v-else
       class="header-row-item__content"
       :class="[header.align ? `header-row-item__content--align-${header.align}` : '']"
     >
@@ -36,6 +49,7 @@
 <script setup>
 import { ESortDirections } from '../types/ui'
 import ShortUpArrowIcon from './icons/ShortUpArrowIcon.vue'
+import BaseCheckbox from './BaseCheckbox.vue';
 
 defineProps({
   header: {

diff --git a/src/components/icons/CircledCheckIcon.vue b/src/components/icons/CircledCheckIcon.vue
@@ -1,8 +1,8 @@
 
 <template>
   <Icon class='icon' viewBox="0 0 66 66">
-    <path d="M33 66a33 33 0 100-66 33 33 0 000 66zm0-60.5a27.5 27.5 0 110 55 27.5 27.5 0 010-55z" fill="#735CFE"/>
-    <path d="M28.3 43.2a2.75 2.75 0 001.95.8h.12a2.75 2.75 0 001.99-.99l13.75-16.5a2.75 2.75 0 00-4.22-3.52L30.06 37.17l-6.11-6.12a2.75 2.75 0 10-3.9 3.9l8.25 8.25z" fill="#735CFE"/>
+    <path d="M33 66a33 33 0 100-66 33 33 0 000 66zm0-60.5a27.5 27.5 0 110 55 27.5 27.5 0 010-55z" :fill="color"/>
+    <path d="M28.3 43.2a2.75 2.75 0 001.95.8h.12a2.75 2.75 0 001.99-.99l13.75-16.5a2.75 2.75 0 00-4.22-3.52L30.06 37.17l-6.11-6.12a2.75 2.75 0 10-3.9 3.9l8.25 8.25z" :fill="color"/>
   </Icon>
 </template>
 
@@ -14,6 +14,12 @@ export default {
   name: 'CircledCheckIcon',
   components: {
     Icon
+  },
+  props: {
+    color: {
+      type: String,
+      default: "#735CFE"
+    }
   }
 }
 </script>

diff --git a/src/components/icons/CircledExclamationIcon.vue b/src/components/icons/CircledExclamationIcon.vue
@@ -1,7 +1,7 @@
 <template>
-  <Icon class='icon' viewBox="0 0 66 66">
-    <path d="M33 66c18.2 0 33-14.8 33-33S51.2 0 33 0 0 14.8 0 33s14.8 33 33 33Zm0-59.44A26.47 26.47 0 0 1 59.44 33 26.47 26.47 0 0 1 33 59.44 26.47 26.47 0 0 1 6.56 33 26.48 26.48 0 0 1 33 6.56Z" fill="#735CFE"/>
-    <path d="M33 40.04a3.28 3.28 0 0 0 3.28-3.28v-17.5a3.28 3.28 0 0 0-6.56 0v17.5A3.28 3.28 0 0 0 33 40.04ZM33 50.01a3.28 3.28 0 0 0 3.28-3.28v-.54a3.28 3.28 0 0 0-6.56 0v.54A3.28 3.28 0 0 0 33 50.01Z" fill="#735CFE"/>
+  <Icon class='icon' viewBox="0 0 66 66" :fill="color">
+    <path d="M33 66c18.2 0 33-14.8 33-33S51.2 0 33 0 0 14.8 0 33s14.8 33 33 33Zm0-59.44A26.47 26.47 0 0 1 59.44 33 26.47 26.47 0 0 1 33 59.44 26.47 26.47 0 0 1 6.56 33 26.48 26.48 0 0 1 33 6.56Z" :fill="color"/>
+    <path d="M33 40.04a3.28 3.28 0 0 0 3.28-3.28v-17.5a3.28 3.28 0 0 0-6.56 0v17.5A3.28 3.28 0 0 0 33 40.04ZM33 50.01a3.28 3.28 0 0 0 3.28-3.28v-.54a3.28 3.28 0 0 0-6.56 0v.54A3.28 3.28 0 0 0 33 50.01Z" :fill="color"/>
   </Icon>
 </template>
 
@@ -13,6 +13,12 @@ export default {
   name: 'CircledExclamationIcon',
   components: {
     Icon
+  },
+  props: {
+    color: {
+      type: String,
+      default: "#735CFE"
+    }
   }
 }
 </script>

diff --git a/src/components/icons/SmallExInGraySquareIcon.vue b/src/components/icons/SmallExInGraySquareIcon.vue
@@ -0,0 +1,30 @@
+
+<template>
+  <Icon class='icon' viewBox="0 0 16 16">
+    <g clip-path="url(#a)">
+    <path fill="#F2F2F2" d="M0 0h16v16H0z"/>
+    <path fill="#606C8B" d="m8 7.06 3.3-3.3.94.94L8.94 8l3.3 3.3-.94.94L8 8.94l-3.3 3.3-.94-.94L7.06 8l-3.3-3.3.94-.94L8 7.06Z"/></g>
+    <defs>
+        <clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath>
+    </defs>
+  </Icon>
+</template>
+
+<script>
+
+import Icon from './Icon.vue'
+
+export default {
+  name: 'SmallQuestionIconIcon',
+  components: {
+    Icon
+  }
+}
+</script>
+
+<style scoped>
+.icon {
+  width: 14px;
+  height: 14px;
+}
+</style>