classcard-ui 0.2.577 → 0.2.581

package/package.json

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

package/src/components/CTabs/CTabs.vue

@@ -14,7 +14,7 @@
         </option>
       </select>
       <div>
-        <slot :name="tabPanelSlotName"></slot>
+        <slot :name="`tab-panel-${this.activeTab}`"></slot>
       </div>
     </div>
     <div class="hidden lg:block">
@@ -24,11 +24,6 @@
             v-for="tab in tabs"
             :key="tab.text"
             @click="switchTab(tab.name)"
-            :class="
-              activeTab == tab.name
-                ? 'border-indigo-600 text-indigo-700 hover:text-indigo-800'
-                : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'
-            "
             class="group inline-flex cursor-pointer items-center whitespace-nowrap border-b-2 py-4 px-1 text-sm font-medium"
           >
             <c-icon
@@ -36,26 +31,18 @@
               :name="tab.icon"
               class="-ml-0.5 mr-2 h-5 w-5"
               type="solid"
-              :class="
-                activeTab == tab.name
-                  ? 'text-indigo-700 group-hover:text-indigo-800'
-                  : 'text-gray-400 group-hover:text-gray-500 '
-              "
             ></c-icon>
             <span
-              :class="
-                activeTab == tab.name
-                  ? 'text-indigo-700'
-                  : 'text-gray-500 hover:text-gray-700'
-              "
             >
               <slot :name="tabHeadSlotName(tab.text)"></slot>{{ tab.text }}
             </span>
           </a>
         </nav>
       </div>
+      {{activeTab}}
       <div v-for="(tab, index) in tabs" :key="index">
-        <div v-show="tab.name == activeTab">
+        <!-- <div v-show="tab.name == activeTab"> -->
+        <div>
           <slot :name="`tab-panel-${tab.name}`"></slot>
         </div>
       </div>
@@ -85,15 +72,10 @@ export default {
       activeTab: this.initialTab,
     };
   },
-  computed: {
-    tabPanelSlotName() {
-      return `tab-panel-${this.activeTab}`;
-    },
-  },
   methods: {
     switchTab(tabText) {
-      let tabSelected = tabText;
-      this.activeTab = tabSelected;
+      console.log(tabText);
+      this.activeTab = tabText;
     },
     switchTabForMobile(index) {
       var selectedOption = this.tabs[index];

package/src/stories/CTabs.stories.js

@@ -16,7 +16,7 @@ export default {
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { CTabs },
-  template: '<c-tabs v-bind="$props" />',
+  template: '<c-tabs v-bind="$props"><template slot="tab-panel-url">url panel</template><template slot="tab-panel-mobile-app">app panel</template><template slot="tab-panel-preferences">preferences panel</template></c-tabs>',
 });
 
 export const Default = Template.bind({});