classcard-ui 0.2.441 → 0.2.445

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "classcard-ui",
-  "version": "0.2.441",
+  "version": "0.2.445",
   "main": "dist/classcard-ui.common.js",
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/components/CPageHeading/CPageHeading.vue

@@ -1,29 +1,52 @@
 <template>
-  <div class="sticky top-0 z-10 bg-white">
-    <div
-      class="flex w-full flex-col items-start justify-between pt-4 pb-1 sm:flex-row sm:items-center"
-    >
-      <div>
-        <h2
-          class="mb-1 text-xl font-bold leading-7 text-gray-900 sm:truncate sm:text-xl"
-        >
-          {{ title }}
-        </h2>
-      </div>
-      <div class="justify-self-end">
-        <slot></slot>
-        <div v-if="buttonType" class="flex pb-2 lg:mt-0 lg:ml-4">
-          <span class="sm:ml-3">
-            <c-button
-              :label="buttonType.label"
-              :icon="buttonType.icon"
-              :type="buttonType.type"
-              @action="emitAction"
-            ></c-button>
-          </span>
+  <div>
+    <div class="sticky top-0 z-10 bg-transparent backdrop-blur-xl">
+      <div
+        class="flex w-full flex-col items-start justify-between pt-4 pb-1 sm:flex-row sm:items-center"
+      >
+        <div>
+          <h2
+            class="mb-1 text-xl font-bold leading-7 text-gray-900 sm:truncate sm:text-xl"
+          >
+            {{ title }}
+          </h2>
+        </div>
+        <div class="justify-self-end">
+          <slot></slot>
+          <div v-if="buttonType" class="flex pb-2 lg:mt-0 lg:ml-4">
+            <span class="sm:ml-3">
+              <c-button
+                :label="buttonType.label"
+                :icon="buttonType.icon"
+                :type="buttonType.type"
+                @action="emitAction"
+              ></c-button>
+            </span>
+          </div>
         </div>
       </div>
     </div>
+    <div class="h-auto w-full">
+      <h2>
+        Lorem Ipsum is simply dummy text of the printing and typesetting
+        industry. Lorem Ipsum has been the industry's standard dummy text ever
+        since the 1500s, when an unknown printer took a galley of type and
+        scrambled it to make a type specimen book. It has survived not only five
+        centuries, but also the leap into electronic typesetting, remaining
+        essentially unchanged. It was popularised in the 1960s with the release
+        of Letraset sheets containing Lorem Ipsum passages, and more recently
+        with desktop publishing software like Aldus PageMaker including versions
+        of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and
+        typesetting industry. Lorem Ipsum has been the industry's standard dummy
+        text ever since the 1500s, when an unknown printer took a galley of type
+        and scrambled it to make a type specimen book. It has survived not only
+        five centuries, but also the leap into electronic typesetting, remaining
+        essentially unchanged. It was popularised in the 1960s with the release
+        of Letraset sheets containing Lorem Ipsum passages, and more recently
+        with desktop publishing software like Aldus PageMaker including versions
+        of Lorem Ipsum.
+      </h2>
+    </div>
   </div>
 </template>
 

package/src/components/CTabs/CTabs.vue

@@ -6,7 +6,7 @@
       <select
         v-model="activeTab"
         @change="switchTabForMobile($event.target.selectedIndex)"
-        class="block w-full focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-md"
+        class="block w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500"
       >
         <option v-for="tab in tabs" :key="tab.text">{{ tab.text }}</option>
       </select>
@@ -24,9 +24,9 @@
             :class="
               activeTab == tab.text
                 ? 'border-indigo-600 text-indigo-700 hover:text-indigo-800'
-                : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+                : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'
             "
-            class="cursor-pointer group inline-flex border-b-2 items-center py-4 px-1 font-medium text-sm whitespace-nowrap"
+            class="group inline-flex cursor-pointer items-center whitespace-nowrap border-b-2 py-4 px-1 text-sm font-medium"
           >
             <c-icon
               v-if="tab.icon"
@@ -41,9 +41,7 @@
             ></c-icon>
             <span
               :class="
-                activeTab == tab.text
-                  ? 'text-indigo-700'
-                  : 'text-gray-500 hover:text-gray-700'
+                activeTab == tab.text ? 'text-indigo-700' : 'text-gray-500 hover:text-gray-700'
               "
             >
               <slot :name="tabHeadSlotName(tab.text)"></slot>{{ tab.text }}
@@ -52,7 +50,10 @@
         </nav>
       </div>
       <div>
-        <slot :name="tabPanelSlotName"></slot>
+        <div v-for="tab in tabs" :key="tab.text">
+          <!-- <slot :name="tabPanelSlotName"></slot> -->
+          <slot v-if="tab.text == activeTab"></slot>
+        </div>
       </div>
     </div>
   </div>