classcard-ui 0.2.1497 → 0.2.1498-beta.0

package/src/components/CButton/CButton.vue

@@ -1,239 +1,239 @@
-<template>
-  <div
-    :class="parentWrapperClass"
-    @mouseover="$emit('handleMouseOver')"
-    @mouseleave="$emit('handleMouseLeave')"
-  >
-    <slot></slot>
-    <button
-      v-if="type == 'tertiary'"
-      :class="customClasses"
-      :id="id"
-      :disabled="disabled || isLoading"
-      class="child-button inline-flex h-9 items-center gap-2 rounded-md px-3 py-2 text-sm text-indigo-600 hover:bg-indigo-100 hover:text-indigo-800 focus:outline-none focus:ring-2 focus:ring-indigo-200 focus:ring-offset-2"
-      @click.prevent="$emit('action')"
-    >
-      <c-icon
-        v-if="icon"
-        :type="icon.type"
-        :class="[icon.class || iconClasses]"
-        :cursorType="computedIconCursorType"
-        :name="icon.name"
-        :viewBox="icon.viewBox"
-      ></c-icon
-      >{{ label }}
-      <slot name="customButtonContent"></slot>
-    </button>
-    <button
-      v-else-if="type != 'tertiary' && label.length && !reverseIcon"
-      :type="type"
-      :id="id"
-      :style="computedStyles"
-      :class="[classes]"
-      :disabled="disabled || isLoading"
-      class="child-button inline-flex h-9 items-center gap-2 rounded-md px-3 py-2 text-sm font-medium shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2"
-      @click.prevent="$emit('action')"
-    >
-      <c-icon v-if="isLoading" class="h-4 w-4" name="loader"></c-icon>
-      <c-icon
-        v-if="icon && !isLoading"
-        :type="icon.type"
-        :class="[icon.class || iconClasses]"
-        :cursorType="computedIconCursorType"
-        :name="icon.name"
-        :viewBox="icon.viewBox"
-      ></c-icon>
-      {{ label }}
-      <slot name="customButtonContent"></slot>
-    </button>
-    <button
-      v-else-if="type != 'tertiary' && label.length && reverseIcon"
-      :type="type"
-      :id="id"
-      :style="computedStyles"
-      :class="[classes]"
-      :disabled="disabled || isLoading"
-      class="child-button inline-flex h-9 items-center gap-2 rounded-md px-3 py-2 text-sm font-medium shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2"
-      @click.prevent="$emit('action')"
-    >
-      {{ label }}
-      <c-icon v-if="isLoading" class="h-4 w-4" name="loader"></c-icon>
-      <c-icon
-        v-if="icon && !isLoading"
-        :type="icon.type"
-        :class="[icon.class || iconClasses]"
-        :cursorType="computedIconCursorType"
-        :name="icon.name"
-        :viewBox="icon.viewBox"
-      ></c-icon>
-      <slot name="customButtonContent"></slot>
-    </button>
-    <button
-      v-else-if="type != 'tertiary' && label.length == 0"
-      :type="type"
-      :id="id"
-      :class="[classes]"
-      :disabled="disabled || isLoading"
-      class="child-button inline-flex h-9 items-center gap-2 rounded-md px-3 py-2 text-sm font-medium shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2"
-      @click.prevent="$emit('action')"
-    >
-      <c-icon v-if="isLoading" class="h-4 w-4" name="loader"></c-icon>
-      <c-icon
-        v-if="icon && !isLoading"
-        :type="icon.type"
-        :class="[icon.class || iconClasses]"
-        :cursorType="computedIconCursorType"
-        :name="icon.name"
-        :viewBox="icon.viewBox"
-      ></c-icon>
-      <slot name="customButtonContent"></slot>
-    </button>
-  </div>
-</template>
-
-<script>
-import CIcon from "../CIcon/CIcon.vue";
-import { COLOR_CONFIG } from "../../colorConfig";
-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: "",
-    },
-    id: {
-      type: String,
-    },
-    iconCursorType: {
-      type: String,
-      default: "cursor-pointer",
-    },
-    reverseIcon: {
-      type: Boolean,
-      default: false,
-    },
-    parentWrapperClass: {
-      type: String,
-      default: "",
-    },
-    preferredColor: {
-      type: String,
-      default: "indigo",
-    },
-  },
-
-  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 border border-indigo-100 hover:bg-indigo-200 focus:ring-indigo-500":
-          this.type == "secondary",
-        "text-white primary-button-classes": this.type == "primary",
-        "text-white hover:bg-red-800 bg-red-700 border border-red-700 focus:ring-red-600":
-          this.type == "danger",
-        "text-white hover:bg-green-800 bg-green-700 border border-green-700 focus:ring-green-600":
-          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 border border-gray-100":
-          this.type == "secondary-gray",
-        "bg-red-100 border border-red-100 text-red-800 hover:bg-red-200 focus:ring-red-200":
-          this.type == "light-red",
-        "bg-green-100 border border-green-100 text-green-800 hover:bg-green-200 focus:ring-green-200":
-          this.type == "light-green",
-        "bg-gray-800 border border-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 border border-yello-800 focus:ring-yellow-600":
-          this.type == "yellow",
-        "text-gray-700 group border bg-white border-gray-300 hover:bg-red-50 hover:text-red-700 focus:ring-indigo-600":
-          this.type == "delete-button",
-        "text-gray-700 bg-white shadow-none hover:bg-gray-100 focus:ring-0":
-          this.type == "white-plain",
-      };
-      classes[this.customClasses] = true;
-      return classes;
-    },
-    iconClasses() {
-      let iconClasses = {
-        "h-5 w-5": 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" || this.type == "white-plain",
-        "text-red-400": this.type == "light-red",
-        "text-gray-400 group-hover:text-red-700": this.type == "delete-button",
-      };
-      iconClasses[this.iconCustomClasses] = true;
-      return iconClasses;
-    },
-    computedStyles() {
-      const colors = COLOR_CONFIG[this.preferredColor] || COLOR_CONFIG.indigo;
-      return {
-        "--primary-background-color": colors.shade700,
-        "--primary-border-color": colors.shade700,
-        "--primary-background-color-hover": colors.shade800,
-        "--primary-ring-color": colors.shade600,
-      };
-    },
-    computedIconCursorType() {
-      return this.disabled ? "cursor-not-allowed" : this.iconCursorType;
-    },
-  },
-
-  methods: {
-    onClick() {
-      this.$emit("onClick");
-    },
-  },
-};
-</script>
-<style>
-.child-button.pointer-events-none {
-  @apply cursor-not-allowed;
-}
-.child-button:disabled {
-  @apply cursor-not-allowed opacity-50;
-}
-.primary-button-classes {
-  background-color: var(--primary-background-color);
-  border-color: var(--primary-border-color);
-}
-.primary-button-classes:hover {
-  background-color: var(--primary-background-color-hover);
-}
-.primary-button-classes:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px white, 0 0 0 4px var(--primary-ring-color) !important;
-}
-</style>
+<template>
+  <div
+    :class="parentWrapperClass"
+    @mouseover="$emit('handleMouseOver')"
+    @mouseleave="$emit('handleMouseLeave')"
+  >
+    <slot></slot>
+    <button
+      v-if="type == 'tertiary'"
+      :class="customClasses"
+      :id="id"
+      :disabled="disabled || isLoading"
+      class="child-button inline-flex h-9 items-center gap-2 rounded-md px-3 py-2 text-sm text-indigo-600 hover:bg-indigo-100 hover:text-indigo-800 focus:outline-none focus:ring-2 focus:ring-indigo-200 focus:ring-offset-2"
+      @click.prevent="$emit('action')"
+    >
+      <c-icon
+        v-if="icon"
+        :type="icon.type"
+        :class="[icon.class || iconClasses]"
+        :cursorType="computedIconCursorType"
+        :name="icon.name"
+        :viewBox="icon.viewBox"
+      ></c-icon
+      >{{ label }}
+      <slot name="customButtonContent"></slot>
+    </button>
+    <button
+      v-else-if="type != 'tertiary' && label.length && !reverseIcon"
+      :type="type"
+      :id="id"
+      :style="computedStyles"
+      :class="[classes]"
+      :disabled="disabled || isLoading"
+      class="child-button inline-flex h-9 items-center gap-2 rounded-md px-3 py-2 text-sm font-medium shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2"
+      @click.prevent="$emit('action')"
+    >
+      <c-icon v-if="isLoading" class="h-4 w-4" name="loader"></c-icon>
+      <c-icon
+        v-if="icon && !isLoading"
+        :type="icon.type"
+        :class="[icon.class || iconClasses]"
+        :cursorType="computedIconCursorType"
+        :name="icon.name"
+        :viewBox="icon.viewBox"
+      ></c-icon>
+      {{ label }}
+      <slot name="customButtonContent"></slot>
+    </button>
+    <button
+      v-else-if="type != 'tertiary' && label.length && reverseIcon"
+      :type="type"
+      :id="id"
+      :style="computedStyles"
+      :class="[classes]"
+      :disabled="disabled || isLoading"
+      class="child-button inline-flex h-9 items-center gap-2 rounded-md px-3 py-2 text-sm font-medium shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2"
+      @click.prevent="$emit('action')"
+    >
+      {{ label }}
+      <c-icon v-if="isLoading" class="h-4 w-4" name="loader"></c-icon>
+      <c-icon
+        v-if="icon && !isLoading"
+        :type="icon.type"
+        :class="[icon.class || iconClasses]"
+        :cursorType="computedIconCursorType"
+        :name="icon.name"
+        :viewBox="icon.viewBox"
+      ></c-icon>
+      <slot name="customButtonContent"></slot>
+    </button>
+    <button
+      v-else-if="type != 'tertiary' && label.length == 0"
+      :type="type"
+      :id="id"
+      :class="[classes]"
+      :disabled="disabled || isLoading"
+      class="child-button inline-flex h-9 items-center gap-2 rounded-md px-3 py-2 text-sm font-medium shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2"
+      @click.prevent="$emit('action')"
+    >
+      <c-icon v-if="isLoading" class="h-4 w-4" name="loader"></c-icon>
+      <c-icon
+        v-if="icon && !isLoading"
+        :type="icon.type"
+        :class="[icon.class || iconClasses]"
+        :cursorType="computedIconCursorType"
+        :name="icon.name"
+        :viewBox="icon.viewBox"
+      ></c-icon>
+      <slot name="customButtonContent"></slot>
+    </button>
+  </div>
+</template>
+
+<script>
+import CIcon from "../CIcon/CIcon.vue";
+import { COLOR_CONFIG } from "../../colorConfig";
+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: "",
+    },
+    id: {
+      type: String,
+    },
+    iconCursorType: {
+      type: String,
+      default: "cursor-pointer",
+    },
+    reverseIcon: {
+      type: Boolean,
+      default: false,
+    },
+    parentWrapperClass: {
+      type: String,
+      default: "",
+    },
+    preferredColor: {
+      type: String,
+      default: "indigo",
+    },
+  },
+
+  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 border border-indigo-100 hover:bg-indigo-200 focus:ring-indigo-500":
+          this.type == "secondary",
+        "text-white primary-button-classes": this.type == "primary",
+        "text-white hover:bg-red-800 bg-red-700 border border-red-700 focus:ring-red-600":
+          this.type == "danger",
+        "text-white hover:bg-green-800 bg-green-700 border border-green-700 focus:ring-green-600":
+          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 border border-gray-100":
+          this.type == "secondary-gray",
+        "bg-red-100 border border-red-100 text-red-800 hover:bg-red-200 focus:ring-red-200":
+          this.type == "light-red",
+        "bg-green-100 border border-green-100 text-green-800 hover:bg-green-200 focus:ring-green-200":
+          this.type == "light-green",
+        "bg-gray-800 border border-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 border border-yello-800 focus:ring-yellow-600":
+          this.type == "yellow",
+        "text-gray-700 group border bg-white border-gray-300 hover:bg-red-50 hover:text-red-700 focus:ring-indigo-600":
+          this.type == "delete-button",
+        "text-gray-700 bg-white shadow-none hover:bg-gray-100 focus:ring-0":
+          this.type == "white-plain",
+      };
+      classes[this.customClasses] = true;
+      return classes;
+    },
+    iconClasses() {
+      let iconClasses = {
+        "h-5 w-5": 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" || this.type == "white-plain",
+        "text-red-400": this.type == "light-red",
+        "text-gray-400 group-hover:text-red-700": this.type == "delete-button",
+      };
+      iconClasses[this.iconCustomClasses] = true;
+      return iconClasses;
+    },
+    computedStyles() {
+      const colors = COLOR_CONFIG[this.preferredColor] || COLOR_CONFIG.indigo;
+      return {
+        "--primary-background-color": colors.shade700,
+        "--primary-border-color": colors.shade700,
+        "--primary-background-color-hover": colors.shade800,
+        "--primary-ring-color": colors.shade600,
+      };
+    },
+    computedIconCursorType() {
+      return this.disabled ? "cursor-not-allowed" : this.iconCursorType;
+    },
+  },
+
+  methods: {
+    onClick() {
+      this.$emit("onClick");
+    },
+  },
+};
+</script>
+<style>
+.child-button.pointer-events-none {
+  @apply cursor-not-allowed;
+}
+.child-button:disabled {
+  @apply cursor-not-allowed opacity-50;
+}
+.primary-button-classes {
+  background-color: var(--primary-background-color);
+  border-color: var(--primary-border-color);
+}
+.primary-button-classes:hover {
+  background-color: var(--primary-background-color-hover);
+}
+.primary-button-classes:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px white, 0 0 0 4px var(--primary-ring-color) !important;
+}
+</style>

package/src/components/CButton/index.js

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