classcard-ui 0.2.985 → 0.2.986

package/src/components/CButton/CButton.vue

@@ -1,152 +1,152 @@
-<template>
-  <div>
-    <slot></slot>
-    <button
-      v-if="type == 'tertiary'"
-      :class="customClasses"
-      class="focus:outline-none flex cursor-pointer flex-row rounded-md px-4 py-2 text-sm text-indigo-600 hover:bg-indigo-100 hover:text-indigo-800 focus:ring-2 focus:ring-indigo-200 focus:ring-offset-2"
-      @click.prevent="$emit('action')"
-    >
-      <c-icon
-        v-if="icon"
-        :type="icon.type"
-        :class="iconClasses"
-        :name="icon.name"
-        :viewBox="icon.viewBox"
-      ></c-icon
-      >{{ label }}
-      <slot name="customButtonContent"></slot>
-    </button>
-    <button
-      v-else-if="type != 'tertiary' && label.length"
-      :type="type"
-      :class="classes"
-      :disabled="disabled"
-      class="focus:outline-none inline-flex items-center rounded-md px-4 py-2 text-sm font-medium shadow-sm focus:ring-2 focus:ring-offset-2 disabled:opacity-50"
-      @click.prevent="$emit('action')"
-    >
-      <c-icon v-if="isLoading" class="mr-2 h-4 w-4" name="loader"></c-icon>
-      <c-icon
-        v-if="icon && !isLoading"
-        :type="icon.type"
-        :class="iconClasses"
-        :name="icon.name"
-        :viewBox="icon.viewBox"
-      ></c-icon>
-      {{ label }}
-      <slot name="customButtonContent"></slot>
-    </button>
-    <button
-      v-else-if="type != 'tertiary' && label.length == 0"
-      :type="type"
-      :class="classes"
-      :disabled="disabled"
-      class="focus:outline-none inline-flex items-center rounded-md px-3 py-2 text-sm font-medium shadow-sm focus:ring-2 focus:ring-offset-2 disabled:opacity-50"
-      @click.prevent="$emit('action')"
-    >
-      <c-icon v-if="isLoading" class="mr-2 h-4 w-4" name="loader"></c-icon>
-      <c-icon
-        v-if="icon && !isLoading"
-        :type="icon.type"
-        :class="iconClasses"
-        :name="icon.name"
-        :viewBox="icon.viewBox"
-      ></c-icon>
-      <slot name="customButtonContent"></slot>
-    </button>
-  </div>
-</template>
-
-<script>
-import CIcon from "../CIcon/CIcon.vue";
-export default {
-  name: "CButton",
-  components: { CIcon },
-  props: {
-    label: {
-      type: String,
-    },
-    icon: {
-      type: Object,
-    },
-    type: {
-      type: String,
-      default: "primary",
-      required: true,
-    },
-    isLoading: {
-      type: Boolean,
-      default: false,
-    },
-    disabled: {
-      type: Boolean,
-    },
-    action: {
-      type: Function,
-    },
-    customClasses: {
-      type: String,
-      default: "",
-    },
-    iconCustomClasses: {
-      type: String,
-      default: "",
-    },
-  },
-
-  computed: {
-    classes() {
-      let classes = {
-        "text-gray-700 border bg-white border-gray-300 hover:bg-gray-50 focus:ring-indigo-600":
-          this.type == "white",
-        "text-indigo-700 bg-indigo-100 hover:bg-indigo-200 focus:ring-indigo-500":
-          this.type == "secondary",
-        "text-white hover:bg-indigo-800 bg-indigo-700 focus:ring-indigo-600":
-          this.type == "primary",
-        "text-white hover:bg-red-800 bg-red-700 focus:ring-red-600 border border-transparent":
-          this.type == "danger",
-        "text-white hover:bg-green-800 bg-green-700 focus:ring-green-600 border border-transparent":
-          this.type == "success",
-        "text-green-800 border border-solid border-gray-300 bg-white hover:bg-gray-50 focus:ring-indigo-600":
-          this.type == "secondary-success",
-        "text-gray-700 hover:bg-gray-200 bg-gray-100":
-          this.type == "secondary-gray",
-        "bg-red-100 text-red-800 hover:bg-red-200 focus:ring-red-200":
-          this.type == "light-red",
-        "bg-green-100 text-green-800 hover:bg-green-200 focus:ring-green-200":
-          this.type == "light-green",
-        "bg-gray-800 text-white hover:bg-gray-700 focus:ring-gray-500":
-          this.type == "dark-blue",
-        "cursor-default pointer-events-none": this.isLoading,
-        "text-white hover:bg-yellow-800 bg-yellow-700 focus:ring-yellow-600 border border-transparent":
-          this.type == "yellow",
-      };
-      classes[this.customClasses] = true;
-      return classes;
-    },
-    iconClasses() {
-      let iconClasses = {
-        "h-5 w-5 mr-1": this.iconCustomClasses ? false : true,
-        "text-indigo-400": this.type == "secondary",
-        "text-white":
-          this.type == "success" ||
-          this.type == "primary" ||
-          this.type == "danger" ||
-          this.type == "dark-blue",
-        "text-gray-400": this.type == "secondary-gray" || this.type == "white",
-        "text-red-400": this.type == "light-red",
-      };
-      iconClasses[this.iconCustomClasses] = true;
-      return iconClasses;
-    },
-  },
-
-  methods: {
-    onClick() {
-      this.$emit("onClick");
-    },
-  },
-};
-</script>
-
-<style></style>
+<template>
+  <div>
+    <slot></slot>
+    <button
+      v-if="type == 'tertiary'"
+      :class="customClasses"
+      class="focus:outline-none flex cursor-pointer flex-row rounded-md px-4 py-2 text-sm text-indigo-600 hover:bg-indigo-100 hover:text-indigo-800 focus:ring-2 focus:ring-indigo-200 focus:ring-offset-2"
+      @click.prevent="$emit('action')"
+    >
+      <c-icon
+        v-if="icon"
+        :type="icon.type"
+        :class="iconClasses"
+        :name="icon.name"
+        :viewBox="icon.viewBox"
+      ></c-icon
+      >{{ label }}
+      <slot name="customButtonContent"></slot>
+    </button>
+    <button
+      v-else-if="type != 'tertiary' && label.length"
+      :type="type"
+      :class="classes"
+      :disabled="disabled"
+      class="focus:outline-none inline-flex items-center rounded-md px-4 py-2 text-sm font-medium shadow-sm focus:ring-2 focus:ring-offset-2 disabled:opacity-50"
+      @click.prevent="$emit('action')"
+    >
+      <c-icon v-if="isLoading" class="mr-2 h-4 w-4" name="loader"></c-icon>
+      <c-icon
+        v-if="icon && !isLoading"
+        :type="icon.type"
+        :class="iconClasses"
+        :name="icon.name"
+        :viewBox="icon.viewBox"
+      ></c-icon>
+      {{ label }}
+      <slot name="customButtonContent"></slot>
+    </button>
+    <button
+      v-else-if="type != 'tertiary' && label.length == 0"
+      :type="type"
+      :class="classes"
+      :disabled="disabled"
+      class="focus:outline-none inline-flex items-center rounded-md px-3 py-2 text-sm font-medium shadow-sm focus:ring-2 focus:ring-offset-2 disabled:opacity-50"
+      @click.prevent="$emit('action')"
+    >
+      <c-icon v-if="isLoading" class="mr-2 h-4 w-4" name="loader"></c-icon>
+      <c-icon
+        v-if="icon && !isLoading"
+        :type="icon.type"
+        :class="iconClasses"
+        :name="icon.name"
+        :viewBox="icon.viewBox"
+      ></c-icon>
+      <slot name="customButtonContent"></slot>
+    </button>
+  </div>
+</template>
+
+<script>
+import CIcon from "../CIcon/CIcon.vue";
+export default {
+  name: "CButton",
+  components: { CIcon },
+  props: {
+    label: {
+      type: String,
+    },
+    icon: {
+      type: Object,
+    },
+    type: {
+      type: String,
+      default: "primary",
+      required: true,
+    },
+    isLoading: {
+      type: Boolean,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+    },
+    action: {
+      type: Function,
+    },
+    customClasses: {
+      type: String,
+      default: "",
+    },
+    iconCustomClasses: {
+      type: String,
+      default: "",
+    },
+  },
+
+  computed: {
+    classes() {
+      let classes = {
+        "text-gray-700 border bg-white border-gray-300 hover:bg-gray-50 focus:ring-indigo-600":
+          this.type == "white",
+        "text-indigo-700 bg-indigo-100 hover:bg-indigo-200 focus:ring-indigo-500":
+          this.type == "secondary",
+        "text-white hover:bg-indigo-800 bg-indigo-700 focus:ring-indigo-600":
+          this.type == "primary",
+        "text-white hover:bg-red-800 bg-red-700 focus:ring-red-600 border border-transparent":
+          this.type == "danger",
+        "text-white hover:bg-green-800 bg-green-700 focus:ring-green-600 border border-transparent":
+          this.type == "success",
+        "text-green-800 border border-solid border-gray-300 bg-white hover:bg-gray-50 focus:ring-indigo-600":
+          this.type == "secondary-success",
+        "text-gray-700 hover:bg-gray-200 bg-gray-100":
+          this.type == "secondary-gray",
+        "bg-red-100 text-red-800 hover:bg-red-200 focus:ring-red-200":
+          this.type == "light-red",
+        "bg-green-100 text-green-800 hover:bg-green-200 focus:ring-green-200":
+          this.type == "light-green",
+        "bg-gray-800 text-white hover:bg-gray-700 focus:ring-gray-500":
+          this.type == "dark-blue",
+        "cursor-default pointer-events-none": this.isLoading,
+        "text-white hover:bg-yellow-800 bg-yellow-700 focus:ring-yellow-600 border border-transparent":
+          this.type == "yellow",
+      };
+      classes[this.customClasses] = true;
+      return classes;
+    },
+    iconClasses() {
+      let iconClasses = {
+        "h-5 w-5 mr-1": this.iconCustomClasses ? false : true,
+        "text-indigo-400": this.type == "secondary",
+        "text-white":
+          this.type == "success" ||
+          this.type == "primary" ||
+          this.type == "danger" ||
+          this.type == "dark-blue",
+        "text-gray-400": this.type == "secondary-gray" || this.type == "white",
+        "text-red-400": this.type == "light-red",
+      };
+      iconClasses[this.iconCustomClasses] = true;
+      return iconClasses;
+    },
+  },
+
+  methods: {
+    onClick() {
+      this.$emit("onClick");
+    },
+  },
+};
+</script>
+
+<style></style>

package/src/components/CButton/index.js

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

package/src/components/CButtonGroup/CButtonGroup.vue

@@ -1,118 +1,118 @@
-<template>
-  <div>
-    <span
-      v-if="!hideDropdownIcon"
-      class="relative -ml-px block sm:hidden sm:shadow-sm"
-    >
-      <div>
-        <button
-          @click="showButtons = !showButtons"
-          type="button"
-          class="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-900 hover:bg-gray-50 focus:z-10 focus:border-blue-600 focus:outline-none focus:ring-1 focus:ring-blue-600 sm:rounded-md sm:px-3"
-          id="menu-3"
-          aria-expanded="false"
-          aria-haspopup="true"
-        >
-          <span class="">{{ buttonObject[0].label }}</span>
-          <c-icon
-            type="solid"
-            name="chevron-down"
-            class="ml-2 h-5 w-5"
-          ></c-icon>
-        </button>
-      </div>
-      <div
-        v-show="showButtons"
-        class="absolute z-10 mt-2 w-full origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
-        role="menu"
-        aria-orientation="vertical"
-      >
-        <div class="py-1">
-          <a
-            v-for="button in buttonObject"
-            v-bind:key="button.label"
-            href="#"
-            class="flex px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:bg-gray-100 focus:text-gray-900"
-            role="menuitem"
-            @click="buttonAction(button.value)"
-            @blur="showButtons = false"
-          >
-            <div v-if="button.icon == ''" class="h-5"></div>
-            <c-icon
-              v-if="button.icon"
-              :name="button.icon"
-              type="solid"
-              class="-ml-1 mr-2 h-5 w-5 text-gray-400"
-            ></c-icon>
-            {{ button.label }}
-          </a>
-        </div>
-      </div>
-    </span>
-    <span :class="buttonClass">
-      <button
-        v-for="(button, index) in buttonObject"
-        v-bind:key="button.label"
-        type="button"
-        class="relative inline-flex items-center border-r border-l border-t border-b border-gray-300 bg-white px-2 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="{
-          'rounded-r-md rounded-l-none border-l border-r':
-            index == buttonObject.length - 1,
-          'rounded-l-md': index == 0,
-          'border-r-0': index != buttonObject.length - 1,
-          'px-4': button.label,
-        }"
-        @click="handleEvent(button.onClickAction)"
-        @blur="handleEvent(button.blurAction)"
-      >
-        <div v-if="button.icon == ''" class="h-5"></div>
-        <c-icon
-          v-if="button.icon"
-          :name="button.icon"
-          type="solid"
-          :class="button.label ? '-ml-1 mr-2' : ''"
-          class="h-5 w-5 text-gray-400"
-        ></c-icon>
-        {{ button.label }}
-        <slot></slot>
-      </button>
-    </span>
-  </div>
-</template>
-
-<script>
-import CIcon from "../CIcon/CIcon.vue";
-export default {
-  name: "CButtonGroup",
-  components: { CIcon },
-  props: {
-    buttonObject: {
-      type: Array,
-      required: true,
-    },
-    hideDropdownIcon: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      showButtons: false,
-      buttonClass:
-        this.hideDropdownIcon === true
-          ? "z-0 relative inline-flex rounded-md block"
-          : "z-0 relative inline-flex hidden rounded-md sm:block",
-    };
-  },
-  methods: {
-    handleEvent(function_name) {
-      if (function_name) function_name();
-    },
-    buttonAction(value) {
-      this.$emit("onClick", value);
-    },
-  },
-};
-</script>
-
-<style></style>
+<template>
+  <div>
+    <span
+      v-if="!hideDropdownIcon"
+      class="relative -ml-px block sm:hidden sm:shadow-sm"
+    >
+      <div>
+        <button
+          @click="showButtons = !showButtons"
+          type="button"
+          class="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-900 hover:bg-gray-50 focus:z-10 focus:border-blue-600 focus:outline-none focus:ring-1 focus:ring-blue-600 sm:rounded-md sm:px-3"
+          id="menu-3"
+          aria-expanded="false"
+          aria-haspopup="true"
+        >
+          <span class="">{{ buttonObject[0].label }}</span>
+          <c-icon
+            type="solid"
+            name="chevron-down"
+            class="ml-2 h-5 w-5"
+          ></c-icon>
+        </button>
+      </div>
+      <div
+        v-show="showButtons"
+        class="absolute z-10 mt-2 w-full origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+        role="menu"
+        aria-orientation="vertical"
+      >
+        <div class="py-1">
+          <a
+            v-for="button in buttonObject"
+            v-bind:key="button.label"
+            href="#"
+            class="flex px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:bg-gray-100 focus:text-gray-900"
+            role="menuitem"
+            @click="buttonAction(button.value)"
+            @blur="showButtons = false"
+          >
+            <div v-if="button.icon == ''" class="h-5"></div>
+            <c-icon
+              v-if="button.icon"
+              :name="button.icon"
+              type="solid"
+              class="-ml-1 mr-2 h-5 w-5 text-gray-400"
+            ></c-icon>
+            {{ button.label }}
+          </a>
+        </div>
+      </div>
+    </span>
+    <span :class="buttonClass">
+      <button
+        v-for="(button, index) in buttonObject"
+        v-bind:key="button.label"
+        type="button"
+        class="relative inline-flex items-center border-r border-l border-t border-b border-gray-300 bg-white px-2 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="{
+          'rounded-r-md rounded-l-none border-l border-r':
+            index == buttonObject.length - 1,
+          'rounded-l-md': index == 0,
+          'border-r-0': index != buttonObject.length - 1,
+          'px-4': button.label,
+        }"
+        @click="handleEvent(button.onClickAction)"
+        @blur="handleEvent(button.blurAction)"
+      >
+        <div v-if="button.icon == ''" class="h-5"></div>
+        <c-icon
+          v-if="button.icon"
+          :name="button.icon"
+          type="solid"
+          :class="button.label ? '-ml-1 mr-2' : ''"
+          class="h-5 w-5 text-gray-400"
+        ></c-icon>
+        {{ button.label }}
+        <slot></slot>
+      </button>
+    </span>
+  </div>
+</template>
+
+<script>
+import CIcon from "../CIcon/CIcon.vue";
+export default {
+  name: "CButtonGroup",
+  components: { CIcon },
+  props: {
+    buttonObject: {
+      type: Array,
+      required: true,
+    },
+    hideDropdownIcon: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      showButtons: false,
+      buttonClass:
+        this.hideDropdownIcon === true
+          ? "z-0 relative inline-flex rounded-md block"
+          : "z-0 relative inline-flex hidden rounded-md sm:block",
+    };
+  },
+  methods: {
+    handleEvent(function_name) {
+      if (function_name) function_name();
+    },
+    buttonAction(value) {
+      this.$emit("onClick", value);
+    },
+  },
+};
+</script>
+
+<style></style>

package/src/components/CButtonGroup/index.js

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