classcard-ui 0.2.1509 → 0.2.1510

package/src/components/CButtonLink/CButtonLink.vue

@@ -1,43 +1,43 @@
-<template>
-  <span class="relative z-0 inline-flex w-full rounded-md shadow-sm">
-    <button
-      v-if="image"
-      type="button"
-      class="relative h-9 -ml-px inline-flex items-center rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-700 overflow-hidden hover:bg-gray-50 focus:z-10 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
-    >
-      <img class="h-9 w-9" :src="image" />
-    </button>
-    <button
-      type="button"
-      :id="id"
-      class="relative h-9 inline-flex w-full items-center justify-between rounded-r-md border border-gray-300 bg-white px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
-      :class="image ? 'rounded-r-md' : 'rounded-md'"
-      @click="$emit('action')"
-    >
-      {{ label }}
-      <c-icon type="solid" name="chevron-right" class="h-5 w-5"></c-icon>
-    </button>
-  </span>
-</template>
-<script>
-import CIcon from "../CIcon/CIcon.vue";
-export default {
-  name: "CButtonLink",
-  components: { CIcon },
-  props: {
-    label: {
-      type: String,
-    },
-    id: {
-      type: String,
-    },
-    image: {
-      type: String,
-      default: null,
-    },
-    action: {
-      type: Function,
-    },
-  },
-};
-</script>
+<template>
+  <span class="relative z-0 inline-flex w-full rounded-md shadow-sm">
+    <button
+      v-if="image"
+      type="button"
+      class="relative h-9 -ml-px inline-flex items-center rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-700 overflow-hidden hover:bg-gray-50 focus:z-10 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
+    >
+      <img class="h-9 w-9" :src="image" />
+    </button>
+    <button
+      type="button"
+      :id="id"
+      class="relative h-9 inline-flex w-full items-center justify-between rounded-r-md border border-gray-300 bg-white px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
+      :class="image ? 'rounded-r-md' : 'rounded-md'"
+      @click="$emit('action')"
+    >
+      {{ label }}
+      <c-icon type="solid" name="chevron-right" class="h-5 w-5"></c-icon>
+    </button>
+  </span>
+</template>
+<script>
+import CIcon from "../CIcon/CIcon.vue";
+export default {
+  name: "CButtonLink",
+  components: { CIcon },
+  props: {
+    label: {
+      type: String,
+    },
+    id: {
+      type: String,
+    },
+    image: {
+      type: String,
+      default: null,
+    },
+    action: {
+      type: Function,
+    },
+  },
+};
+</script>

package/src/components/CButtonLink/index.js

@@ -1,3 +1,3 @@
-import CButtonLink from './CButtonLink.vue'
-
+import CButtonLink from './CButtonLink.vue'
+
 export default CButtonLink

package/src/components/CButtonSelect/CButtonSelect.vue

@@ -1,186 +1,186 @@
-<template>
-  <div>
-    <slot></slot>
-    <div
-      :class="[isDisabled ? 'opacity-50' : '', buttonWrapperClass]"
-      class="relative inline-block text-left"
-    >
-      <button
-        :type="type"
-        @click="toggleDropdown = !toggleDropdown"
-        @blur="close()"
-        class="h-9 inline-flex w-full justify-center px-3 py-2 text-sm font-medium shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2"
-        :class="[classes, buttonClass]"
-        aria-haspopup="listbox"
-        aria-expanded="true"
-        aria-labelledby="listbox-label"
-        :disabled="isDisabled"
-        :id="id"
-      >
-        <c-icon
-          v-if="icon"
-          :name="icon.name"
-          :type="icon.type"
-          :class="icon.class"
-          :cursorType="icon.cursorType"
-          :viewBox="icon.viewBox || '0 0 20 20'"
-        ></c-icon>
-        <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', iconClass]"
-        ></c-icon>
-      </button>
-
-      <div
-        v-if="toggleDropdown"
-        :class="dropdownPositionClass"
-        class="absolute z-10 mt-2 -mr-1 w-56 rounded-md bg-white pb-4"
-        ref="dropdownMenu"
-      >
-        <div class="rounded-md shadow-lg ring-1 ring-gray-900 ring-opacity-5">
-          <ul
-            class="py-1"
-            tabindex="-1"
-            role="listbox"
-            aria-labelledby="listbox-label"
-          >
-            <!-- item.isDisabled will make the list item unclickable and reduce the opacity -->
-            <li
-              v-for="item in items"
-              :key="item.text"
-              :class="[
-                item.isDisabled ? 'pointer-events-none opacity-50 ' : '',
-              ]"
-              :id="getActionIDFn(item.text)"
-              class="flex cursor-pointer px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
-              @mousedown="emitOptionAction(item.action)"
-            >
-              <c-icon
-                v-if="item.icon"
-                :type="item.iconType"
-                :class="['mr-2 h-5 w-5 text-gray-400', item.iconClass]"
-                :name="item.icon"
-                :viewBox="item.iconViewBox || '0 0 24 24'"
-              ></c-icon>
-              <slot name="customIcon" v-if="item.customIcon"></slot>
-              {{ item.text }}
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { getActionID } from "../../helper";
-import CIcon from "../CIcon/CIcon.vue";
-export default {
-  name: "CButtonSelect",
-  components: { CIcon },
-  props: {
-    label: {
-      type: String,
-      required: true,
-    },
-    id: {
-      type: String,
-    },
-    type: {
-      type: String,
-      default: "primary",
-    },
-    items: {
-      type: Array,
-      required: true,
-    },
-    isLoading: {
-      type: Boolean,
-      default: false,
-    },
-    dropdownPositionClass: {
-      type: String,
-    },
-    isDisabled: {
-      type: Boolean,
-      default: false,
-    },
-    buttonWrapperClass: {
-      type: String,
-      default: "",
-    },
-    buttonClass: {
-      type: String,
-      default: "",
-    },
-    iconClass: {
-      type: String,
-      default: "",
-    },
-    icon: {
-      type: Object,
-      default: null,
-    },
-  },
-  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",
-        "text-gray-700 border-gray-300 rounded-md hover:bg-gray-50 focus:ring-indigo-600 bg-white":
-          this.type == "white",
-        "bg-gray-900 text-white hover:bg-gray-800 rounded-md focus:ring-gray-700":
-          this.type == "dark-blue",
-        "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",
-        "text-gray-700 border bg-white border-gray-300 rounded-md hover:bg-gray-50 focus:ring-indigo-600":
-          this.type == "white",
-      };
-    },
-  },
-  methods: {
-    getActionIDFn(name) {
-      return getActionID(name, this.id);
-    },
-    emitOptionAction(action) {
-      this.$emit("buttonActions", action);
-    },
-    close() {
-      this.toggleDropdown = false;
-    },
-  },
-  watch: {
-    toggleDropdown(newVal) {
-      if (newVal) {
-        this.$nextTick(() => {
-          if (this.$refs.dropdownMenu) {
-            this.$refs.dropdownMenu.scrollIntoView({
-              block: "nearest",
-            });
-          }
-        });
-      }
-    },
-  },
-};
-</script>
-
-<style></style>
+<template>
+  <div>
+    <slot></slot>
+    <div
+      :class="[isDisabled ? 'opacity-50' : '', buttonWrapperClass]"
+      class="relative inline-block text-left"
+    >
+      <button
+        :type="type"
+        @click="toggleDropdown = !toggleDropdown"
+        @blur="close()"
+        class="h-9 inline-flex w-full justify-center px-3 py-2 text-sm font-medium shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2"
+        :class="[classes, buttonClass]"
+        aria-haspopup="listbox"
+        aria-expanded="true"
+        aria-labelledby="listbox-label"
+        :disabled="isDisabled"
+        :id="id"
+      >
+        <c-icon
+          v-if="icon"
+          :name="icon.name"
+          :type="icon.type"
+          :class="icon.class"
+          :cursorType="icon.cursorType"
+          :viewBox="icon.viewBox || '0 0 20 20'"
+        ></c-icon>
+        <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', iconClass]"
+        ></c-icon>
+      </button>
+
+      <div
+        v-if="toggleDropdown"
+        :class="dropdownPositionClass"
+        class="absolute z-10 mt-2 -mr-1 w-56 rounded-md bg-white pb-4"
+        ref="dropdownMenu"
+      >
+        <div class="rounded-md shadow-lg ring-1 ring-gray-900 ring-opacity-5">
+          <ul
+            class="py-1"
+            tabindex="-1"
+            role="listbox"
+            aria-labelledby="listbox-label"
+          >
+            <!-- item.isDisabled will make the list item unclickable and reduce the opacity -->
+            <li
+              v-for="item in items"
+              :key="item.text"
+              :class="[
+                item.isDisabled ? 'pointer-events-none opacity-50 ' : '',
+              ]"
+              :id="getActionIDFn(item.text)"
+              class="flex cursor-pointer px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
+              @mousedown="emitOptionAction(item.action)"
+            >
+              <c-icon
+                v-if="item.icon"
+                :type="item.iconType"
+                :class="['mr-2 h-5 w-5 text-gray-400', item.iconClass]"
+                :name="item.icon"
+                :viewBox="item.iconViewBox || '0 0 24 24'"
+              ></c-icon>
+              <slot name="customIcon" v-if="item.customIcon"></slot>
+              {{ item.text }}
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getActionID } from "../../helper";
+import CIcon from "../CIcon/CIcon.vue";
+export default {
+  name: "CButtonSelect",
+  components: { CIcon },
+  props: {
+    label: {
+      type: String,
+      required: true,
+    },
+    id: {
+      type: String,
+    },
+    type: {
+      type: String,
+      default: "primary",
+    },
+    items: {
+      type: Array,
+      required: true,
+    },
+    isLoading: {
+      type: Boolean,
+      default: false,
+    },
+    dropdownPositionClass: {
+      type: String,
+    },
+    isDisabled: {
+      type: Boolean,
+      default: false,
+    },
+    buttonWrapperClass: {
+      type: String,
+      default: "",
+    },
+    buttonClass: {
+      type: String,
+      default: "",
+    },
+    iconClass: {
+      type: String,
+      default: "",
+    },
+    icon: {
+      type: Object,
+      default: null,
+    },
+  },
+  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",
+        "text-gray-700 border-gray-300 rounded-md hover:bg-gray-50 focus:ring-indigo-600 bg-white":
+          this.type == "white",
+        "bg-gray-900 text-white hover:bg-gray-800 rounded-md focus:ring-gray-700":
+          this.type == "dark-blue",
+        "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",
+        "text-gray-700 border bg-white border-gray-300 rounded-md hover:bg-gray-50 focus:ring-indigo-600":
+          this.type == "white",
+      };
+    },
+  },
+  methods: {
+    getActionIDFn(name) {
+      return getActionID(name, this.id);
+    },
+    emitOptionAction(action) {
+      this.$emit("buttonActions", action);
+    },
+    close() {
+      this.toggleDropdown = false;
+    },
+  },
+  watch: {
+    toggleDropdown(newVal) {
+      if (newVal) {
+        this.$nextTick(() => {
+          if (this.$refs.dropdownMenu) {
+            this.$refs.dropdownMenu.scrollIntoView({
+              block: "nearest",
+            });
+          }
+        });
+      }
+    },
+  },
+};
+</script>
+
+<style></style>

package/src/components/CButtonSelect/index.js

@@ -1,3 +1,3 @@
-import CButtonSelect from './CButtonSelect.vue'
-
+import CButtonSelect from './CButtonSelect.vue'
+
 export default CButtonSelect