classcard-ui 0.2.1489 → 0.2.1490-beta.0

package/src/components/CButtonGroup/CButtonGroup.vue

@@ -1,155 +1,155 @@
-<template>
-  <div>
-    <div
-      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="id"
-          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-3 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"
-            :id="getActionIDFn(button.label)"
-            @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>
-    </div>
-    <div :class="`${buttonClass} ${extraButtonClasses}`">
-      <div
-        v-for="(button, index) in buttonObject"
-        :key="index"
-        :class="`relative ${button.parentClasses ? button.parentClasses : ''}`"
-      >
-        <button
-          :key="button.label"
-          type="button"
-          class="relative h-9 inline-flex items-center border border-gray-300 bg-white py-2 text-sm font-medium text-gray-900 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-3': button.label,
-              'px-2': !button.label && button.icon,
-              'cursor-not-allowed opacity-50': button.isDisabled,
-            },
-            button.classes ? button.classes : '',
-          ]"
-          :id="getActionIDFn(button.label)"
-          @click="handleEvent(button.onClickAction, button.isDisabled)"
-          @blur="handleEvent(button.blurAction, button.isDisabled)"
-          @mouseover="$emit('hoverState', button, 'over')"
-          @mouseleave="$emit('hoverState', button, 'leave')"
-        >
-          <div v-if="button.icon == ''" class="h-5"></div>
-          <c-icon
-            v-if="button.isLoading"
-            class="mr-2 -ml-1 h-5 w-5"
-            name="loader"
-          ></c-icon>
-          <c-icon
-            v-if="button.icon && !button.isLoading"
-            :name="button.icon"
-            type="solid"
-            cursorType="cursor-pointer"
-            :class="['h-5 w-5 shrink-0 text-gray-400', button.label ? '-ml-1 mr-2' : '']"
-          ></c-icon>
-          {{ button.label }}
-          <slot></slot>
-        </button>
-        <slot
-          v-if="button.showTooltip"
-          name="tooltip"
-          :button="button"
-          :index="index"
-        ></slot>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { getActionID } from "../../helper";
-import CIcon from "../CIcon/CIcon.vue";
-export default {
-  name: "CButtonGroup",
-  components: { CIcon },
-  props: {
-    buttonObject: {
-      type: Array,
-      required: true,
-    },
-    hideDropdownIcon: {
-      type: Boolean,
-      default: false,
-    },
-    extraButtonClasses: {
-      type: String,
-      default: "",
-    },
-  },
-  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:flex",
-    };
-  },
-  methods: {
-    getActionIDFn(name) {
-      return getActionID(name, this.id);
-    },
-    handleEvent(function_name, isDisabled) {
-      // emulate disabled state
-      if (isDisabled) {
-        return;
-      }
-      if (function_name) function_name();
-    },
-    buttonAction(value) {
-      this.$emit("onClick", value);
-    },
-  },
-};
-</script>
-
-<style></style>
+<template>
+  <div>
+    <div
+      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="id"
+          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-3 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"
+            :id="getActionIDFn(button.label)"
+            @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>
+    </div>
+    <div :class="`${buttonClass} ${extraButtonClasses}`">
+      <div
+        v-for="(button, index) in buttonObject"
+        :key="index"
+        :class="`relative ${button.parentClasses ? button.parentClasses : ''}`"
+      >
+        <button
+          :key="button.label"
+          type="button"
+          class="relative h-9 inline-flex items-center border border-gray-300 bg-white py-2 text-sm font-medium text-gray-900 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-3': button.label,
+              'px-2': !button.label && button.icon,
+              'cursor-not-allowed opacity-50': button.isDisabled,
+            },
+            button.classes ? button.classes : '',
+          ]"
+          :id="getActionIDFn(button.label)"
+          @click="handleEvent(button.onClickAction, button.isDisabled)"
+          @blur="handleEvent(button.blurAction, button.isDisabled)"
+          @mouseover="$emit('hoverState', button, 'over')"
+          @mouseleave="$emit('hoverState', button, 'leave')"
+        >
+          <div v-if="button.icon == ''" class="h-5"></div>
+          <c-icon
+            v-if="button.isLoading"
+            class="mr-2 -ml-1 h-5 w-5"
+            name="loader"
+          ></c-icon>
+          <c-icon
+            v-if="button.icon && !button.isLoading"
+            :name="button.icon"
+            type="solid"
+            cursorType="cursor-pointer"
+            :class="['h-5 w-5 shrink-0 text-gray-400', button.label ? '-ml-1 mr-2' : '']"
+          ></c-icon>
+          {{ button.label }}
+          <slot></slot>
+        </button>
+        <slot
+          v-if="button.showTooltip"
+          name="tooltip"
+          :button="button"
+          :index="index"
+        ></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getActionID } from "../../helper";
+import CIcon from "../CIcon/CIcon.vue";
+export default {
+  name: "CButtonGroup",
+  components: { CIcon },
+  props: {
+    buttonObject: {
+      type: Array,
+      required: true,
+    },
+    hideDropdownIcon: {
+      type: Boolean,
+      default: false,
+    },
+    extraButtonClasses: {
+      type: String,
+      default: "",
+    },
+  },
+  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:flex",
+    };
+  },
+  methods: {
+    getActionIDFn(name) {
+      return getActionID(name, this.id);
+    },
+    handleEvent(function_name, isDisabled) {
+      // emulate disabled state
+      if (isDisabled) {
+        return;
+      }
+      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

package/src/components/CButtonIcon/CButtonIcon.vue

@@ -1,166 +1,166 @@
-<template>
-  <div>
-    <slot name="initialSlot"></slot>
-    <button
-      v-if="type == 'tertiary'"
-      :class="[
-        'flex h-9 cursor-pointer flex-row rounded-md px-2 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 disabled:opacity-50 disabled:cursor-not-allowed',
-        customButtonClasses,
-      ]"
-      @click.prevent="$emit('action')"
-      :disabled="disabled"
-      :id="id"
-    >
-      <c-icon
-        :cursorType="computedIconCursorType"
-        v-if="icon"
-        :type="icon.type"
-        :class="icon.class"
-        :name="icon.name"
-        :viewBox="icon.viewBox"
-      ></c-icon>
-      <slot></slot>
-    </button>
-    <button
-      v-else-if="type == 'rounded-hover'"
-      @click.prevent="$emit('action')"
-      class="flex h-9 w-9 cursor-pointer items-center justify-center rounded-full bg-white text-gray-500 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed"
-      :class="[
-        isTransparent ? 'bg-transparent' : 'bg-white',
-        customButtonClasses,
-      ]"
-      :disabled="disabled"
-      :id="id"
-    >
-      <c-icon
-        v-if="icon"
-        :cursorType="computedIconCursorType"
-        :type="icon.type"
-        :class="icon.class"
-        :name="icon.name"
-        :viewBox="icon.viewBox"
-      ></c-icon>
-    </button>
-    <button
-      v-else
-      :type="type"
-      class="inline-flex h-9 items-center px-2 py-2 text-sm font-medium shadow-sm rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
-      :class="[classes, customButtonClasses]"
-      :disabled="disabled"
-      :id="id"
-      :style="computedStyles"
-      @click.prevent="$emit('action')"
-    >
-      <c-icon
-        v-if="isLoading"
-        :cursorType="computedIconCursorType"
-        class="mr-2 h-5 w-5"
-        :class="loaderClasses"
-        name="loader"
-      ></c-icon>
-      <c-icon
-        v-if="icon"
-        :type="icon.type"
-        :class="icon.class"
-        :name="icon.name"
-        :viewBox="icon.viewBox"
-        :cursorType="computedIconCursorType"
-      ></c-icon>
-      <slot></slot>
-    </button>
-  </div>
-</template>
-
-<script>
-import { COLOR_CONFIG } from "../../colorConfig";
-import CIcon from "../CIcon/CIcon.vue";
-export default {
-  name: "CButtonIcon",
-  components: { CIcon },
-  props: {
-    icon: {
-      type: Object,
-    },
-    type: {
-      type: String,
-      default: "primary",
-      required: true,
-    },
-    isLoading: {
-      type: Boolean,
-      default: false,
-    },
-    action: {
-      type: Function,
-    },
-    loaderClasses: {
-      type: String,
-    },
-    id: {
-      type: String,
-    },
-    isTransparent: {
-      type: Boolean,
-      default: false,
-    },
-    customButtonClasses: {
-      type: String,
-      default: "",
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    preferredColor: {
-      type: String,
-      default: "indigo",
-    },
-  },
-
-  computed: {
-    classes() {
-      return {
-        "text-gray-700 border bg-white border-gray-300 hover:bg-gray-50 white-button-classes":
-          this.type == "white",
-        "text-indigo-700 bg-indigo-100 hover:bg-indigo-200 focus:ring-indigo-500":
-          this.type == "secondary",
-        "border text-white hover:bg-indigo-800 bg-indigo-700 focus:ring-indigo-600":
-          this.type == "primary",
-        "border text-white hover:bg-red-800 bg-red-700 focus:ring-red-600":
-          this.type == "danger",
-        "border text-white hover:bg-green-800 bg-green-700 focus:ring-green-600":
-          this.type == "success",
-        "text-gray-900 hover:bg-gray-200 bg-gray-100":
-          this.type == "secondary-gray",
-        "bg-gray-900 text-white hover:bg-gray-800 focus:ring-gray-700":
-          this.type == "dark-blue",
-        "text-gray-700 bg-white shadow-none hover:bg-gray-100 white-button-classes":
-          this.type == "white-plain",
-        "cursor-default pointer-events-none": this.isLoading,
-      };
-    },
-    computedStyles() {
-      const colors = COLOR_CONFIG[this.preferredColor] || COLOR_CONFIG.indigo;
-      return {
-        "--primary-ring-color": colors.shade600,
-      };
-    },
-    computedIconCursorType() {
-      return this.disabled ? "cursor-not-allowed" : "cursor-pointer";
-    },
-  },
-
-  methods: {
-    onClick() {
-      this.$emit("onClick");
-    },
-  },
-};
-</script>
-
-<style scoped>
-/* white button classes */
-.white-button-classes:focus {
-  outline-color: var(--primary-ring-color);
-}
-</style>
+<template>
+  <div>
+    <slot name="initialSlot"></slot>
+    <button
+      v-if="type == 'tertiary'"
+      :class="[
+        'flex h-9 cursor-pointer flex-row rounded-md px-2 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 disabled:opacity-50 disabled:cursor-not-allowed',
+        customButtonClasses,
+      ]"
+      @click.prevent="$emit('action')"
+      :disabled="disabled"
+      :id="id"
+    >
+      <c-icon
+        :cursorType="computedIconCursorType"
+        v-if="icon"
+        :type="icon.type"
+        :class="icon.class"
+        :name="icon.name"
+        :viewBox="icon.viewBox"
+      ></c-icon>
+      <slot></slot>
+    </button>
+    <button
+      v-else-if="type == 'rounded-hover'"
+      @click.prevent="$emit('action')"
+      class="flex h-9 w-9 cursor-pointer items-center justify-center rounded-full bg-white text-gray-500 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed"
+      :class="[
+        isTransparent ? 'bg-transparent' : 'bg-white',
+        customButtonClasses,
+      ]"
+      :disabled="disabled"
+      :id="id"
+    >
+      <c-icon
+        v-if="icon"
+        :cursorType="computedIconCursorType"
+        :type="icon.type"
+        :class="icon.class"
+        :name="icon.name"
+        :viewBox="icon.viewBox"
+      ></c-icon>
+    </button>
+    <button
+      v-else
+      :type="type"
+      class="inline-flex h-9 items-center px-2 py-2 text-sm font-medium shadow-sm rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
+      :class="[classes, customButtonClasses]"
+      :disabled="disabled"
+      :id="id"
+      :style="computedStyles"
+      @click.prevent="$emit('action')"
+    >
+      <c-icon
+        v-if="isLoading"
+        :cursorType="computedIconCursorType"
+        class="mr-2 h-5 w-5"
+        :class="loaderClasses"
+        name="loader"
+      ></c-icon>
+      <c-icon
+        v-if="icon"
+        :type="icon.type"
+        :class="icon.class"
+        :name="icon.name"
+        :viewBox="icon.viewBox"
+        :cursorType="computedIconCursorType"
+      ></c-icon>
+      <slot></slot>
+    </button>
+  </div>
+</template>
+
+<script>
+import { COLOR_CONFIG } from "../../colorConfig";
+import CIcon from "../CIcon/CIcon.vue";
+export default {
+  name: "CButtonIcon",
+  components: { CIcon },
+  props: {
+    icon: {
+      type: Object,
+    },
+    type: {
+      type: String,
+      default: "primary",
+      required: true,
+    },
+    isLoading: {
+      type: Boolean,
+      default: false,
+    },
+    action: {
+      type: Function,
+    },
+    loaderClasses: {
+      type: String,
+    },
+    id: {
+      type: String,
+    },
+    isTransparent: {
+      type: Boolean,
+      default: false,
+    },
+    customButtonClasses: {
+      type: String,
+      default: "",
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    preferredColor: {
+      type: String,
+      default: "indigo",
+    },
+  },
+
+  computed: {
+    classes() {
+      return {
+        "text-gray-700 border bg-white border-gray-300 hover:bg-gray-50 white-button-classes":
+          this.type == "white",
+        "text-indigo-700 bg-indigo-100 hover:bg-indigo-200 focus:ring-indigo-500":
+          this.type == "secondary",
+        "border text-white hover:bg-indigo-800 bg-indigo-700 focus:ring-indigo-600":
+          this.type == "primary",
+        "border text-white hover:bg-red-800 bg-red-700 focus:ring-red-600":
+          this.type == "danger",
+        "border text-white hover:bg-green-800 bg-green-700 focus:ring-green-600":
+          this.type == "success",
+        "text-gray-900 hover:bg-gray-200 bg-gray-100":
+          this.type == "secondary-gray",
+        "bg-gray-900 text-white hover:bg-gray-800 focus:ring-gray-700":
+          this.type == "dark-blue",
+        "text-gray-700 bg-white shadow-none hover:bg-gray-100 white-button-classes":
+          this.type == "white-plain",
+        "cursor-default pointer-events-none": this.isLoading,
+      };
+    },
+    computedStyles() {
+      const colors = COLOR_CONFIG[this.preferredColor] || COLOR_CONFIG.indigo;
+      return {
+        "--primary-ring-color": colors.shade600,
+      };
+    },
+    computedIconCursorType() {
+      return this.disabled ? "cursor-not-allowed" : "cursor-pointer";
+    },
+  },
+
+  methods: {
+    onClick() {
+      this.$emit("onClick");
+    },
+  },
+};
+</script>
+
+<style scoped>
+/* white button classes */
+.white-button-classes:focus {
+  outline-color: var(--primary-ring-color);
+}
+</style>

package/src/components/CButtonIcon/index.js

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