classcard-ui 0.2.1473 → 0.2.1475

package/src/components/CGroupedSelect/index.js

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

package/src/components/CIcon/CIcon.vue

@@ -1,112 +1,112 @@
-<template>
-  <div>
-    <svg
-      v-if="name == 'loader'"
-      :class="classes"
-      class="animate-spin"
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-    >
-      <circle
-        class="opacity-25"
-        cx="12"
-        cy="12"
-        r="10"
-        stroke="currentColor"
-        stroke-width="4"
-      ></circle>
-      <path class="opacity-75" fill="currentColor" :d="path"></path>
-    </svg>
-    <svg
-      v-if="name !== 'loader' && type == 'solid'"
-      :class="(classes ? classes : '') + (cursorType ? cursorType : '')"
-      :viewBox="viewBox"
-      fill="currentColor"
-      fill-rule="evenodd"
-    >
-      <path :d="path" />
-    </svg>
-    <svg
-      v-if="name !== 'loader' && type == 'outline'"
-      :class="(classes ? classes : '') + (cursorType ? cursorType : '')"
-      :viewBox="viewBoxOutline"
-      fill="none"
-      stroke="currentColor"
-    >
-      <path
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
-        :d="path"
-      />
-    </svg>
-    <svg
-      v-if="name !== 'loader' && type == 'outline-v2'"
-      :class="(classes ? classes : '') + (cursorType ? cursorType : '')"
-      :viewBox="viewBoxOutline"
-      fill="none"
-      stroke="currentColor"
-    >
-      <path
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="1.5"
-        :d="path"
-      />
-    </svg>
-    <svg
-      v-if="name !== 'loader' && type == 'mini'"
-      :class="(classes ? classes : '') + (cursorType ? cursorType : '')"
-      :viewBox="viewBox"
-      fill="currentColor"
-      fill-rule="evenodd"
-    >
-      <path :d="path" />
-    </svg>
-    <svg
-      v-if="name !== 'loader' && type == 'micro'"
-      viewBox="0 0 16 16"
-      fill="currentColor"
-      :class="(classes ? classes : '') + (cursorType ? cursorType : '')"
-    >
-      <path fillRule="evenodd" :d="path" clipRule="evenodd" />
-    </svg>
-  </div>
-</template>
-
-<script>
-import icons from "../../icons.js";
-export default {
-  name: "CIcon",
-  props: {
-    name: {
-      type: String,
-      required: true,
-    },
-    classes: {
-      type: String,
-    },
-    type: {
-      type: String,
-    },
-    viewBox: {
-      type: String,
-      default: "0 0 20 20",
-    },
-    viewBoxOutline: {
-      type: String,
-      default: "0 0 24 24",
-    },
-    cursorType: {
-      type: String,
-      default: "cursor-default",
-    },
-  },
-  computed: {
-    path() {
-      return icons[this.name];
-    },
-  },
-};
-</script>
+<template>
+  <div>
+    <svg
+      v-if="name == 'loader'"
+      :class="classes"
+      class="animate-spin"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <circle
+        class="opacity-25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        stroke-width="4"
+      ></circle>
+      <path class="opacity-75" fill="currentColor" :d="path"></path>
+    </svg>
+    <svg
+      v-if="name !== 'loader' && type == 'solid'"
+      :class="(classes ? classes : '') + (cursorType ? cursorType : '')"
+      :viewBox="viewBox"
+      fill="currentColor"
+      fill-rule="evenodd"
+    >
+      <path :d="path" />
+    </svg>
+    <svg
+      v-if="name !== 'loader' && type == 'outline'"
+      :class="(classes ? classes : '') + (cursorType ? cursorType : '')"
+      :viewBox="viewBoxOutline"
+      fill="none"
+      stroke="currentColor"
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        :d="path"
+      />
+    </svg>
+    <svg
+      v-if="name !== 'loader' && type == 'outline-v2'"
+      :class="(classes ? classes : '') + (cursorType ? cursorType : '')"
+      :viewBox="viewBoxOutline"
+      fill="none"
+      stroke="currentColor"
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="1.5"
+        :d="path"
+      />
+    </svg>
+    <svg
+      v-if="name !== 'loader' && type == 'mini'"
+      :class="(classes ? classes : '') + (cursorType ? cursorType : '')"
+      :viewBox="viewBox"
+      fill="currentColor"
+      fill-rule="evenodd"
+    >
+      <path :d="path" />
+    </svg>
+    <svg
+      v-if="name !== 'loader' && type == 'micro'"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      :class="(classes ? classes : '') + (cursorType ? cursorType : '')"
+    >
+      <path fillRule="evenodd" :d="path" clipRule="evenodd" />
+    </svg>
+  </div>
+</template>
+
+<script>
+import icons from "../../icons.js";
+export default {
+  name: "CIcon",
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+    classes: {
+      type: String,
+    },
+    type: {
+      type: String,
+    },
+    viewBox: {
+      type: String,
+      default: "0 0 20 20",
+    },
+    viewBoxOutline: {
+      type: String,
+      default: "0 0 24 24",
+    },
+    cursorType: {
+      type: String,
+      default: "cursor-default",
+    },
+  },
+  computed: {
+    path() {
+      return icons[this.name];
+    },
+  },
+};
+</script>

package/src/components/CIcon/index.js

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

package/src/components/CIconDropdown/CIconDropdown.vue

@@ -1,206 +1,206 @@
-<template>
-  <div>
-    <slot></slot>
-    <div
-      :class="`${isDropDownRelative ? 'relative' : ''} inline-block text-left`"
-    >
-      <div>
-        <button
-          type="white"
-          @click.stop="toggle($event)"
-          @blur="close()"
-          :class="
-            customClasses
-              ? iconClasses
-              : 'inline-flex w-full justify-center rounded-full border-none p-2 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2'
-          "
-          :id="id"
-          aria-haspopup="true"
-          aria-expanded="true"
-        >
-          <div class="flex items-center gap-1">
-            <c-icon
-              :name="icon.name"
-              :type="icon.type"
-              :class="icon.class"
-              :cursorType="cursorType"
-              :viewBox="icon.viewBox"
-            ></c-icon>
-            <p v-if="label" :class="['text-sm text-gray-500', labelClass]">
-              {{ label }}
-            </p>
-          </div>
-        </button>
-      </div>
-      <div
-        v-show="toggleDropdown"
-        :class="classes"
-        class="absolute z-10 mt-2 -mr-1 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-gray-900 ring-opacity-5"
-      >
-        <div
-          class="w-max py-1"
-          role="menu"
-          aria-orientation="vertical"
-          aria-labelledby="option-menu"
-        >
-          <div
-            v-for="(item, index) in items"
-            v-bind:key="item.text"
-            @mouseenter="showTooltipIndex = index"
-            @mouseleave="showTooltipIndex = null"
-          >
-            <a
-              @mousedown.stop.prevent="dropdownAction(item)"
-              class="flex cursor-pointer justify-between px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 disabled:pointer-events-none disabled:opacity-50"
-              :class="[
-                item.class,
-                item.disabled ? 'pointer-events-none opacity-50' : '',
-                item.isLoading ? 'pointer-events-none cursor-default' : '',
-              ]"
-              :id="getActionIDFn(item.text)"
-              role="menuitem"
-              :disabled="item.disabled"
-              :aria-disabled="item.disabled ? 'true' : 'false'"
-            >
-              <div class="flex items-center">
-                <c-icon
-                  v-if="item.isLoading"
-                  :class="dropdownIcons[index].class"
-                  name="loader"
-                ></c-icon>
-
-                <c-icon
-                  v-if="item.icon && !item.isLoading"
-                  :name="dropdownIcons[index].name"
-                  :type="dropdownIcons[index].type"
-                  :class="dropdownIcons[index].class"
-                  :viewBox="dropdownIcons[index].viewBox"
-                  :cursorType="cursorType"
-                ></c-icon>
-
-                <div class="flex items-center gap-1">
-                  {{ item.text }}
-                  <c-icon
-                    v-if="item.shouldShowHoverIcon && !item.isLoading"
-                    :name="item.hoverIcon.name"
-                    :type="item.hoverIcon.type"
-                    :class="[
-                      item.hoverIcon.class,
-                      'invisible group-hover:visible',
-                    ]"
-                    :viewBox="item.hoverIcon.viewBox"
-                    :cursorType="cursorType"
-                  ></c-icon>
-                </div>
-              </div>
-              <slot v-if="item.name" :name="item.name"></slot>
-              <c-tooltip
-                v-if="item.tooltip && showTooltipIndex === index"
-                :tooltipText="item.tooltip.text"
-                :isTopAligned="true"
-                :classes="item.tooltip.classes"
-                :color="item.tooltip.color"
-              ></c-tooltip>
-            </a>
-            <hr v-if="item.border" class="my-1" />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { getActionID } from "../../helper";
-import CIcon from "../CIcon/CIcon.vue";
-import CTooltip from "../CToolTip/CToolTip.vue";
-
-export default {
-  name: "CIconDropdown",
-  components: { CIcon, CTooltip },
-  props: {
-    id: {
-      type: String,
-    },
-    label: {
-      type: String,
-    },
-    labelClass: {
-      type: String,
-    },
-    items: {
-      type: Array,
-      required: true,
-    },
-    customClasses: {
-      type: Boolean,
-      default: false,
-    },
-    iconClasses: {
-      type: String,
-    },
-    icon: {
-      type: Object,
-    },
-    dropdownIcons: {
-      type: Array,
-    },
-    classes: {
-      type: String,
-    },
-    action: {
-      type: Function,
-    },
-    isDropDownRelative: {
-      type: Boolean,
-      default: true,
-    },
-    cursorType: {
-      type: String,
-      default: "cursor-pointer",
-    },
-  },
-  data() {
-    return {
-      toggleDropdown: false,
-      showTooltipIndex: false,
-    };
-  },
-  methods: {
-    getActionIDFn(name) {
-      return getActionID(name, this.id);
-    },
-    toggle(event) {
-      this.toggleDropdown = !this.toggleDropdown;
-      if (event.target.tagName == "path") {
-        if (this.toggleDropdown) {
-          event.target.parentElement.parentElement.parentElement.parentElement.focus();
-        } else {
-          event.target.parentElement.parentElement.parentElement.parentElement.blur();
-        }
-      } else if (event.target.tagName == "svg") {
-        if (this.toggleDropdown) {
-          event.target.parentElement.parentElement.parentElement.focus();
-        } else {
-          event.target.parentElement.parentElement.parentElement.blur();
-        }
-      } else {
-        if (this.toggleDropdown) {
-          event.target.focus();
-        } else {
-          event.target.blur();
-        }
-      }
-    },
-    dropdownAction(item) {
-      this.$emit("action", item);
-      this.close();
-    },
-    close() {
-      this.toggleDropdown = false;
-    },
-  },
-};
-</script>
-
-<style></style>
+<template>
+  <div>
+    <slot></slot>
+    <div
+      :class="`${isDropDownRelative ? 'relative' : ''} inline-block text-left`"
+    >
+      <div>
+        <button
+          type="white"
+          @click.stop="toggle($event)"
+          @blur="close()"
+          :class="
+            customClasses
+              ? iconClasses
+              : 'inline-flex w-full justify-center rounded-full border-none p-2 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2'
+          "
+          :id="id"
+          aria-haspopup="true"
+          aria-expanded="true"
+        >
+          <div class="flex items-center gap-1">
+            <c-icon
+              :name="icon.name"
+              :type="icon.type"
+              :class="icon.class"
+              :cursorType="cursorType"
+              :viewBox="icon.viewBox"
+            ></c-icon>
+            <p v-if="label" :class="['text-sm text-gray-500', labelClass]">
+              {{ label }}
+            </p>
+          </div>
+        </button>
+      </div>
+      <div
+        v-show="toggleDropdown"
+        :class="classes"
+        class="absolute z-10 mt-2 -mr-1 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-gray-900 ring-opacity-5"
+      >
+        <div
+          class="w-max py-1"
+          role="menu"
+          aria-orientation="vertical"
+          aria-labelledby="option-menu"
+        >
+          <div
+            v-for="(item, index) in items"
+            v-bind:key="item.text"
+            @mouseenter="showTooltipIndex = index"
+            @mouseleave="showTooltipIndex = null"
+          >
+            <a
+              @mousedown.stop.prevent="dropdownAction(item)"
+              class="flex cursor-pointer justify-between px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 disabled:pointer-events-none disabled:opacity-50"
+              :class="[
+                item.class,
+                item.disabled ? 'pointer-events-none opacity-50' : '',
+                item.isLoading ? 'pointer-events-none cursor-default' : '',
+              ]"
+              :id="getActionIDFn(item.text)"
+              role="menuitem"
+              :disabled="item.disabled"
+              :aria-disabled="item.disabled ? 'true' : 'false'"
+            >
+              <div class="flex items-center">
+                <c-icon
+                  v-if="item.isLoading"
+                  :class="dropdownIcons[index].class"
+                  name="loader"
+                ></c-icon>
+
+                <c-icon
+                  v-if="item.icon && !item.isLoading"
+                  :name="dropdownIcons[index].name"
+                  :type="dropdownIcons[index].type"
+                  :class="dropdownIcons[index].class"
+                  :viewBox="dropdownIcons[index].viewBox"
+                  :cursorType="cursorType"
+                ></c-icon>
+
+                <div class="flex items-center gap-1">
+                  {{ item.text }}
+                  <c-icon
+                    v-if="item.shouldShowHoverIcon && !item.isLoading"
+                    :name="item.hoverIcon.name"
+                    :type="item.hoverIcon.type"
+                    :class="[
+                      item.hoverIcon.class,
+                      'invisible group-hover:visible',
+                    ]"
+                    :viewBox="item.hoverIcon.viewBox"
+                    :cursorType="cursorType"
+                  ></c-icon>
+                </div>
+              </div>
+              <slot v-if="item.name" :name="item.name"></slot>
+            </a>
+            <c-tooltip
+              v-if="item.tooltip && item.tooltip.text && showTooltipIndex === index"
+              :tooltipText="item.tooltip.text"
+              :isTopAligned="true"
+              :classes="item.tooltip.classes"
+              :color="item.tooltip.color"
+            ></c-tooltip>
+            <hr v-if="item.border" class="my-1" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getActionID } from "../../helper";
+import CIcon from "../CIcon/CIcon.vue";
+import CTooltip from "../CToolTip/CToolTip.vue";
+
+export default {
+  name: "CIconDropdown",
+  components: { CIcon, CTooltip },
+  props: {
+    id: {
+      type: String,
+    },
+    label: {
+      type: String,
+    },
+    labelClass: {
+      type: String,
+    },
+    items: {
+      type: Array,
+      required: true,
+    },
+    customClasses: {
+      type: Boolean,
+      default: false,
+    },
+    iconClasses: {
+      type: String,
+    },
+    icon: {
+      type: Object,
+    },
+    dropdownIcons: {
+      type: Array,
+    },
+    classes: {
+      type: String,
+    },
+    action: {
+      type: Function,
+    },
+    isDropDownRelative: {
+      type: Boolean,
+      default: true,
+    },
+    cursorType: {
+      type: String,
+      default: "cursor-pointer",
+    },
+  },
+  data() {
+    return {
+      toggleDropdown: false,
+      showTooltipIndex: null,
+    };
+  },
+  methods: {
+    getActionIDFn(name) {
+      return getActionID(name, this.id);
+    },
+    toggle(event) {
+      this.toggleDropdown = !this.toggleDropdown;
+      if (event.target.tagName == "path") {
+        if (this.toggleDropdown) {
+          event.target.parentElement.parentElement.parentElement.parentElement.focus();
+        } else {
+          event.target.parentElement.parentElement.parentElement.parentElement.blur();
+        }
+      } else if (event.target.tagName == "svg") {
+        if (this.toggleDropdown) {
+          event.target.parentElement.parentElement.parentElement.focus();
+        } else {
+          event.target.parentElement.parentElement.parentElement.blur();
+        }
+      } else {
+        if (this.toggleDropdown) {
+          event.target.focus();
+        } else {
+          event.target.blur();
+        }
+      }
+    },
+    dropdownAction(item) {
+      this.$emit("action", item);
+      this.close();
+    },
+    close() {
+      this.toggleDropdown = false;
+    },
+  },
+};
+</script>
+
+<style></style>

package/src/components/CIconDropdown/index.js

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