classcard-ui 0.2.876 → 0.2.877

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "classcard-ui",
-  "version": "0.2.876",
+  "version": "0.2.877",
   "main": "dist/classcard-ui.umd.min.js",
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/components/CButtonSelectBorder/CButtonSelectBorder.vue

@@ -0,0 +1,133 @@
+<template>
+  <div>
+    <slot></slot>
+    <div
+      :class="[isDisabled ? 'opacity-50' : '']"
+      class="relative inline-block text-left"
+    >
+      <button
+        :type="type"
+        :class="classes"
+        class="focus:outline-none inline-flex w-full justify-center border border-transparent px-4 py-2 text-sm font-medium shadow-sm"
+        aria-haspopup="listbox"
+        aria-expanded="true"
+        aria-labelledby="listbox-label"
+        :disabled="isDisabled"
+        @click="toggleDropdown = !toggleDropdown"
+        @blur="close()"
+      >
+        <c-icon v-if="isLoading" class="mr-2 h-5 w-5" name="loader"></c-icon>
+        {{ label }}
+        <c-icon name="chevron-down" type="solid" class="ml-2 h-5 w-5"></c-icon>
+      </button>
+
+      <div
+        v-if="toggleDropdown"
+        :class="dropdownPositionClass"
+        class="absolute z-10 mt-2 -mr-1 w-56 rounded-md bg-white shadow-lg ring-1 ring-gray-900 ring-opacity-5"
+      >
+        <ul
+          class="py-1"
+          tabindex="-1"
+          role="listbox"
+          aria-labelledby="listbox-label"
+        >
+          <div v-for="(item, index) in items" :key="index">
+            <!-- to have a border pass a object { hasNoData: true } after the object
+            below which the border is required -->
+            <hr
+              v-if="item.hasNoData"
+              class="border-1 mt-1 h-1 w-full border-gray-200 pt-1"
+            />
+            <!-- item.isDisabled will make the list item unclickable and reduce the opacity -->
+            <li
+              v-else
+              :class="[
+                item.isDisabled ? 'pointer-events-none opacity-50 ' : '',
+              ]"
+              class="flex cursor-pointer px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
+              @mousedown="emitOption(item)"
+            >
+              <c-icon
+                v-if="item.icon"
+                :type="item.iconType"
+                class="mr-2 h-5 w-5 text-gray-500"
+                :name="item.icon"
+              ></c-icon>
+              <slot name="customIcon" v-if="item.customIcon"></slot>
+              {{ item.text }}
+            </li>
+          </div>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import CIcon from "../CIcon/CIcon.vue";
+export default {
+  name: "CButtonSelectBorder",
+  components: { CIcon },
+  props: {
+    label: {
+      type: String,
+      required: true,
+    },
+    type: {
+      type: String,
+      default: "primary",
+    },
+    items: {
+      type: Array,
+      required: true,
+    },
+    isLoading: {
+      type: Boolean,
+      default: false,
+    },
+    dropdownPositionClass: {
+      type: String,
+    },
+    isDisabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      toggleDropdown: false,
+    };
+  },
+
+  computed: {
+    classes() {
+      return {
+        "text-gray-700 border-gray-300 rounded-md hover:bg-gray-50 focus:ring-indigo-600":
+          this.type == "secondary",
+        "text-white  rounded-md hover:bg-indigo-800 bg-indigo-700 focus:ring-indigo-600":
+          this.type == "primary",
+        "text-white rounded-md  hover:bg-red-800 bg-red-700 focus:ring-red-600":
+          this.type == "danger",
+        "text-white  rounded-md hover:bg-green-800 bg-green-700 focus:ring-green-600":
+          this.type == "success",
+        "cursor-default rounded-md pointer-events-none": this.isLoading,
+        //the type-white property contains the class rounded-r-md that would only round the button corner in the right direction
+        //while the other type property will round the button corners for all 4 direction
+        "text-gray-700 border-gray-300 rounded-r-md hover:bg-gray-50 focus:ring-indigo-600 bg-white":
+          this.type == "white-rounded-right",
+      };
+    },
+  },
+  methods: {
+    emitOption(item) {
+      this.$emit("buttonActions", item);
+    },
+    close() {
+      this.toggleDropdown = false;
+    },
+  },
+};
+</script>
+
+<style></style>

package/src/components/CButtonSelectBorder/index.js

@@ -0,0 +1,3 @@
+import CButtonSelectBorder from "./CButtonSelectBorder.vue";
+
+export default CButtonSelectBorder;

package/src/components/index.js

@@ -46,3 +46,4 @@ export { default as CTimeline } from "./CTimeline";
 export { default as CUpload } from "./CUpload";
 export { default as CConfirmActionModal } from "./CConfirmActionModal";
 export { default as CCalendar } from "./CCalendar";
+export { default as CButtonSelectBorder } from "./CButtonSelectBorder";

package/src/stories/CButtonSelectBorder.stories.js

@@ -0,0 +1,48 @@
+import CButtonSelectBorder from "../components/CButtonSelectBorder";
+import CIcon from "../components/CIcon/CIcon.vue";
+import "./utils.css";
+
+export default {
+  title: "CButtonSelectBorder",
+  component: CButtonSelectBorder,
+  subcomponents: { CIcon },
+  argTypes: {
+    type: {
+      control: {
+        type: "select",
+        options: [
+          "primary",
+          "secondary",
+          "success",
+          "danger",
+          "white-rounded-right",
+        ],
+      },
+    },
+    items: { control: { type: "object" } },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { CButtonSelectBorder },
+  template: '<c-button-select-border v-bind="$props" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  items: [
+    { icon: "check", text: "one", action: "first", iconType: "solid" },
+    { icon: "check", text: "one", action: "first", iconType: "solid" },
+    { hasNoData: true },
+    { icon: "check", text: "one", action: "first", iconType: "solid" },
+    { hasNoData: true },
+    { icon: "check", text: "two", action: "second", iconType: "solid" },
+    { hasNoData: true },
+    { icon: "check", text: "two", action: "second", iconType: "solid" },
+    { icon: "check", text: "two", action: "second", iconType: "solid" },
+  ],
+  type: "primary",
+  label: "Button",
+  isLoading: false,
+};