classcard-ui 0.2.1468 → 0.2.1470

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "classcard-ui",
-  "version": "0.2.1468",
+  "version": "0.2.1470",
   "main": "dist/classcard-ui.umd.min.js",
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/components/CMultiselect/CMultiselect.vue

@@ -135,57 +135,154 @@
             ></path>
           </svg>
         </template>
-        <template slot="option" slot-scope="option">
+        <template v-slot:option="option">
           <slot
+            v-if="$scopedSlots['custom-option']"
             name="custom-option"
-            v-bind:option="isGrouped ? option : groupedArray"
-          ></slot>
-        </template>
-        <template v-slot:option="option">
-          <div v-if="!isGrouped">
-            <div v-if="option.hasNoData" class="dropdown-menu-bordered"></div>
-            <div v-else class="mt-1 flex h-full w-full items-center">
-              <p v-if="showOptionImage" class="flex-shrink-0">
-                <c-avatar
-                  v-if="option[imageLabel]"
-                  :size="
-                    option.description && showAdditionalText
-                      ? 'extrasmall'
-                      : 'extraextrasmall'
-                  "
-                  :image="option[imageLabel]"
-                  :rounded="true"
-                  :description="option.description"
-                  class="mr-2"
-                ></c-avatar>
-                <c-avatar
-                  v-if="!option.icon && !option[imageLabel] && option.initials"
-                  :size="
-                    option.description && showAdditionalText
-                      ? 'extrasmall'
-                      : 'extraextrasmall'
-                  "
-                  :nameInitials="option.initials"
-                  :description="option.description"
-                  :rounded="true"
-                  :isDynamicallyColored="true"
-                  class="mr-2"
-                ></c-avatar>
+            :option="option"
+          />
+          <template v-else>
+            <div v-if="!isGrouped">
+              <div v-if="option.hasNoData" class="dropdown-menu-bordered"></div>
+              <div v-else class="mt-1 flex h-full w-full items-center">
+                <p v-if="showOptionImage" class="flex-shrink-0">
+                  <c-avatar
+                    v-if="option[imageLabel]"
+                    :size="
+                      option.description && showAdditionalText
+                        ? 'extrasmall'
+                        : 'extraextrasmall'
+                    "
+                    :image="option[imageLabel]"
+                    :rounded="true"
+                    :description="option.description"
+                    class="mr-2"
+                  ></c-avatar>
+                  <c-avatar
+                    v-if="
+                      !option.icon && !option[imageLabel] && option.initials
+                    "
+                    :size="
+                      option.description && showAdditionalText
+                        ? 'extrasmall'
+                        : 'extraextrasmall'
+                    "
+                    :nameInitials="option.initials"
+                    :description="option.description"
+                    :rounded="true"
+                    :isDynamicallyColored="true"
+                    class="mr-2"
+                  ></c-avatar>
+                  <c-icon
+                    v-if="
+                      option.icon && !option[imageLabel] && !option.initials
+                    "
+                    :name="option.icon.name"
+                    :type="option.icon.type"
+                    :class="`mr-2 h-5 w-5 text-gray-400 ${
+                      option.icon.optionIconClass
+                        ? option.icon.optionIconClass
+                        : ''
+                    }`"
+                    cursorType="cursor-pointer"
+                  />
+                </p>
+                <div class="w-full">
+                  <div
+                    :class="`flex items-center justify-between ${checkboxWrapperClass}`"
+                  >
+                    <div :class="`flex items-center ${tagWrapperClass}`">
+                      <p>
+                        {{
+                          option[optionLabelSecondary]
+                            ? option[optionLabelSecondary]
+                            : option[optionLabel]
+                        }}
+                      </p>
+                      <div class="ml-3">
+                        <c-tag
+                          v-if="tags && option.info && option.info !== ''"
+                          :label="option.info"
+                          color="gray"
+                        ></c-tag>
+                        <span v-else class="-ml-3 text-gray-300">
+                          &nbsp;{{ option.info }}
+                        </span>
+                      </div>
+                    </div>
+                    <div @click.stop v-if="addCheckBox">
+                      <c-checkbox
+                        :value="isChecked(option)"
+                        @onChange="handleSingleSelect(option)"
+                      />
+                    </div>
+                  </div>
+                  <p
+                    class="text-xs"
+                    v-if="option.description && showAdditionalText"
+                  >
+                    {{ option.description }}
+                  </p>
+                </div>
+              </div>
+            </div>
+            <div
+              v-if="isGrouped"
+              :class="[
+                option.header
+                  ? 'sticky-group-header -mx-4 -my-2 bg-gray-200 px-3 py-2'
+                  : '',
+              ]"
+            >
+              <v-list-subheader
+                v-if="option.header"
+                class="flex items-center gap-1 text-gray-900"
+              >
                 <c-icon
-                  v-if="option.icon && !option[imageLabel] && !option.initials"
+                  v-if="option.icon"
                   :name="option.icon.name"
                   :type="option.icon.type"
-                  :class="`mr-2 h-5 w-5 text-gray-400 ${
-                    option.icon.optionIconClass
-                      ? option.icon.optionIconClass
-                      : ''
-                  }`"
-                  cursorType="cursor-pointer"
+                  :class="`${
+                    option.icon.headerIconClass
+                      ? option.icon.headerIconClass
+                      : 'h-4 w-4'
+                  } text-gray-400`"
                 />
-              </p>
-              <div class="w-full">
-                <div :class="`flex items-center justify-between ${checkboxWrapperClass}`">
-                  <div :class="`flex items-center ${tagWrapperClass}`">
+                {{ option.header }}
+              </v-list-subheader>
+              <div
+                :class="[
+                  'mt-1 flex h-full w-full',
+                  option.description ? 'items-start' : 'items-center',
+                ]"
+              >
+                <div @click.stop v-if="addCheckBox && !option.header">
+                  <c-checkbox
+                    :value="isChecked(option)"
+                    @onChange="handleSingleSelect(option)"
+                  />
+                </div>
+                <div v-if="!option.header && showOptionImage">
+                  <c-avatar
+                    v-if="option.image"
+                    size="extraextrasmall"
+                    :image="option.image"
+                    :rounded="true"
+                    :description="option.description"
+                    class="mr-2"
+                  ></c-avatar>
+                  <c-avatar
+                    v-else
+                    size="extraextrasmall"
+                    :nameInitials="option.initials"
+                    :description="option.description"
+                    :rounded="true"
+                    :isDynamicallyColored="true"
+                    class="mr-2"
+                  ></c-avatar>
+                </div>
+                <div class="w-full">
+                  <div class="flex items-center">
                     <p>
                       {{
                         option[optionLabelSecondary]
@@ -194,115 +291,25 @@
                       }}
                     </p>
                     <div class="ml-3">
-                      <c-tag
+                      <span
                         v-if="tags && option.info && option.info !== ''"
-                        :label="option.info"
-                        color="gray"
-                      ></c-tag>
-                      <span v-else class="-ml-3 text-gray-300">
-                        &nbsp;{{ option.info }}
+                        class="inline-flex rounded-md bg-gray-400 px-2 py-px text-sm leading-5 text-white"
+                      >
+                        {{ option.info }}
+                      </span>
+                      <span v-else class="text-gray-300">
+                        {{ option.info }}
                       </span>
                     </div>
                   </div>
-                  <div @click.stop v-if="addCheckBox">
-                    <c-checkbox 
-                      :value="isChecked(option)" 
-                      @onChange="handleSingleSelect(option)"
-                    />
-                  </div>
-                </div>
-                <p
-                  class="text-xs"
-                  v-if="option.description && showAdditionalText"
-                >
-                  {{ option.description }}
-                </p>
-              </div>
-            </div>
-          </div>
-          <div
-            v-if="isGrouped"
-            :class="[
-              option.header
-                ? 'sticky-group-header -mx-4 -my-2 bg-gray-200 px-3 py-2'
-                : '',
-            ]"
-          >
-            <v-list-subheader
-              v-if="option.header"
-              class="flex items-center gap-1 text-gray-900"
-            >
-              <c-icon
-                v-if="option.icon"
-                :name="option.icon.name"
-                :type="option.icon.type"
-                :class="`${
-                  option.icon.headerIconClass
-                    ? option.icon.headerIconClass
-                    : 'h-4 w-4'
-                } text-gray-400`"
-              />
-              {{ option.header }}
-            </v-list-subheader>
-            <div
-              :class="[
-                'mt-1 flex h-full w-full',
-                option.description ? 'items-start' : 'items-center',
-              ]"
-            >
-              <div @click.stop v-if="addCheckBox && !option.header">
-                <c-checkbox
-                  :value="isChecked(option)"
-                  @onChange="handleSingleSelect(option)"
-                />
-              </div>
-              <div v-if="!option.header && showOptionImage">
-                <c-avatar
-                  v-if="option.image"
-                  size="extraextrasmall"
-                  :image="option.image"
-                  :rounded="true"
-                  :description="option.description"
-                  class="mr-2"
-                ></c-avatar>
-                <c-avatar
-                  v-else
-                  size="extraextrasmall"
-                  :nameInitials="option.initials"
-                  :description="option.description"
-                  :rounded="true"
-                  :isDynamicallyColored="true"
-                  class="mr-2"
-                ></c-avatar>
-              </div>
-              <div class="w-full">
-                <div class="flex items-center">
-                  <p>
-                    {{
-                      option[optionLabelSecondary]
-                        ? option[optionLabelSecondary]
-                        : option[optionLabel]
-                    }}
+
+                  <p class="text-xs" v-if="option.description">
+                    {{ option.description }}
                   </p>
-                  <div class="ml-3">
-                    <span
-                      v-if="tags && option.info && option.info !== ''"
-                      class="inline-flex rounded-md bg-gray-400 px-2 py-px text-sm leading-5 text-white"
-                    >
-                      {{ option.info }}
-                    </span>
-                    <span v-else class="text-gray-300">
-                      {{ option.info }}
-                    </span>
-                  </div>
                 </div>
-
-                <p class="text-xs" v-if="option.description">
-                  {{ option.description }}
-                </p>
               </div>
             </div>
-          </div>
+          </template>
         </template>
         <template #list-footer="{ search }">
           <li ref="load" class="loader" v-show="hasNextPage">

package/src/components/CStats/CStats.vue

@@ -1,37 +1,4 @@
 <template>
-  <!-- <div>
-    <dl class="mt-5 sm:flex sm:flex-col md:flex md:flex-row justify-between">
-      <div
-        :class="index == statsCount.length - 1 ? '' : 'mr-2'"
-        class="bg-white w-full overflow-hidden shadow rounded-lg"
-        v-for="(count, index) in statsCount"
-        v-bind:key="count.number"
-      >
-        <div class="px-4 pt-3 pb-1 flex">
-          <c-icon
-            v-if="count.icon"
-            :name="count.icon.name"
-            :type="count.icon.type"
-            :class="count.icon.class"
-          ></c-icon>
-          <div :class="count.icon ? 'ml-3' : ''">
-            <dt class="text-sm text-gray-500 flex">
-              <span>{{ count.label }}</span>
-              <span class="text-sm text-gray-900 ml-1">{{ count.number }}</span>
-            </dt>
-            <dd class="text-2xl font-semibold text-gray-900">
-              {{ count.totalCount }}
-            </dd>
-          </div>
-        </div>
-        <div class="ml-12 pb-2 flex items-center" v-if="count.tag || count.days">
-          <c-tag v-if="count.tag" :label="count.tag.label" :color="count.tag.color"></c-tag>
-          <label v-if="count.days" class="text-xs text-gray-500 ml-1">{{ count.days }}</label>
-        </div>
-      </div>
-    </dl>
-  </div> -->
-  <!-- This example requires Tailwind CSS v2.0+ -->
   <div>
     <div class="flex items-center justify-between" v-if="title">
       <h3 class="text-lg font-medium leading-6 text-gray-900">
@@ -44,10 +11,7 @@
         color="green"
       ></c-tag>
     </div>
-    <dl
-      class="mt-4 grid grid-cols-1 gap-6 overflow-hidden"
-      :class="dynamicGridSize"
-    >
+    <dl class="mt-4 grid grid-cols-1 gap-6" :class="dynamicGridSize">
       <div
         :class="['pt-3', showStatsBorder ? 'border-t border-gray-200' : '']"
         v-for="count in statsCount"
@@ -69,37 +33,26 @@
                 >({{ count.suffix }})</span
               >
 
-              <div
-                :class="['ml-1', 'absolute', `${count.toolTip.class}`]"
-                v-if="
-                  count.toolTip != undefined &&
-                  count.toolTip != null &&
-                  count.toolTip.showToolTip
-                "
+              <span
+                v-if="count.icon && count.toolTip"
+                class="relative ml-2 inline-flex shrink-0 items-center self-center"
               >
                 <c-tool-tip
+                  v-if="count.toolTip.showToolTip || hoveredStatNumber === count.number"
                   color="#1f2937"
-                  :classes="
-                    count.toolTip.classes
-                      ? count.toolTip.classes
-                      : 'text-white whitespace-nowrap font-normal sticky bg-gray-800 w-auto'
-                  "
+                  :classes="tooltipClasses(count)"
                   :tooltip-text="count.toolTip.text"
                   :isTopAligned="true"
                 ></c-tool-tip>
-              </div>
-
-              <c-icon
-                v-if="
-                  count.icon != undefined && count.icon != null && count.toolTip
-                "
-                :name="count.icon.name"
-                :type="count.icon.type"
-                :class="count.icon.class"
-                :cursorType="count.icon.cursorType"
-                @mouseover.native="count.toolTip.showToolTip = true"
-                @mouseleave.native="count.toolTip.showToolTip = false"
-              ></c-icon>
+                <c-icon
+                  :name="count.icon.name"
+                  :type="count.icon.type"
+                  :class="count.icon.class"
+                  :cursorType="count.icon.cursorType"
+                  @mouseover.native="hoveredStatNumber = count.number"
+                  @mouseleave.native="hoveredStatNumber = null"
+                ></c-icon>
+              </span>
               <c-icon
                 v-else-if="
                   count.icon != undefined &&
@@ -181,6 +134,21 @@ export default {
       default: true,
     },
   },
+  data() {
+    return {
+      hoveredStatNumber: null,
+    };
+  },
+  methods: {
+    tooltipClasses(count) {
+      const base =
+        "block bottom-full left-1/2 mb-1 -translate-x-1/2 text-white font-normal bg-gray-800";
+      if (count.toolTip.classes) {
+        return `${base} ${count.toolTip.classes}`;
+      }
+      return `${base} whitespace-nowrap`;
+    },
+  },
 };
 </script>
 

package/src/stories/CStats.stories.js

@@ -42,8 +42,8 @@ Default.args = {
       },
       toolTip: {
         showToolTip: false,
-        text: "texxt",
-        class: `top-7 ml-[43px]`,
+        text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+        classes: "w-[200px] whitespace-pre-wrap",
       },
     },
     { label: "Partially paid", totalCount: "66145", number: 2 },