classcard-ui 0.2.1483 → 0.2.1484

package/package.json

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

package/src/components/CConfirmActionModal/CConfirmActionModal.vue

@@ -50,12 +50,12 @@
             >
               <div
                 aria-hidden="true"
-                class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-red-100"
+                :class="iconContainerClasses"
               >
                 <c-icon
                   name="exclamation-triangle-outline-v2"
                   type="outline-v2"
-                  class="h-6 w-6 text-red-600"
+                  :class="iconClasses"
                   viewBox="0 0 24 24"
                 ></c-icon>
               </div>
@@ -125,6 +125,22 @@
 import CButton from "../CButton";
 import CIcon from '../CIcon/CIcon.vue';
 import CTextarea from "../CTextarea";
+
+const COLOR_VARIANT_CLASSES = {
+  red: {
+    background: "bg-red-100",
+    text: "text-red-600",
+  },
+  indigo: {
+    background: "bg-indigo-100",
+    text: "text-indigo-600",
+  },
+  yellow: {
+    background: "bg-yellow-100",
+    text: "text-yellow-600",
+  },
+};
+
 export default {
   name: "CConfirmActionModal",
   components: {
@@ -200,6 +216,10 @@ export default {
     textAreaLabel: {
       type: String,
     },
+    colorVariant: {
+      type: String,
+      default: "red",
+    },
   },
   computed: {
     ariaDescribedby() {
@@ -207,6 +227,18 @@ export default {
         ? "modal-message modal-description"
         : "modal-message";
     },
+    colorVariantClasses() {
+      return COLOR_VARIANT_CLASSES[this.colorVariant] || COLOR_VARIANT_CLASSES.red;
+    },
+    iconContainerClasses() {
+      return [
+        "flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full",
+        this.colorVariantClasses.background,
+      ];
+    },
+    iconClasses() {
+      return ["h-6 w-6", this.colorVariantClasses.text];
+    },
   },
   methods: {
     handleTextAreaInputChange(value) {

package/src/components/CInsetTabs/CInsetTabs.vue

@@ -1,35 +1,34 @@
 <template>
-  <div>
+  <div class="inline-block">
     <nav
-      class="group relative flex rounded-lg bg-gray-100 p-0.5 hover:bg-gray-200"
+      class="group rounded-lg bg-gray-100 p-0.5 hover:bg-gray-200"
       aria-label="Tabs"
     >
-      <div
-        class="absolute inset-y-0.5 rounded-md bg-white shadow-sm ring-1 ring-black ring-opacity-5 transition-all duration-200 ease-in-out"
-        :style="overlayStyle"
-      ></div>
-      <button
-        v-for="(tabOption, index) in tabOptions"
-        :key="index"
-        ref="tabButtons"
-        class="relative z-10 flex min-w-0 flex-grow rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-100"
-        :tabindex="getTabIdentifier(tabOption) === currentTab ? '0' : '-1'"
-        :id="id"
-        :style="computedStyles"
-        :aria-label="tabOption.label"
-        :aria-selected="getTabIdentifier(tabOption) === currentTab"
-        :aria-current="getTabIdentifier(tabOption) === currentTab"
-        :aria-controls="getTabIdentifier(tabOption)"
-        @click="handleButtonClick(tabOption)"
-      >
+      <div class="relative inline-flex">
         <div
-          class="inset-tabs-classes flex min-w-0 flex-grow items-center justify-center space-x-2 rounded-md p-1.5 text-sm font-medium lg:pl-2.5 lg:pr-3.5"
+          class="inset-tabs-overlay pointer-events-none absolute inset-y-0 left-0 rounded-md bg-white shadow-sm ring-1 ring-black ring-opacity-5"
+          :style="overlayStyle"
+        ></div>
+        <button
+          v-for="(tabOption, index) in tabOptions"
+          :key="index"
+          ref="tabButtons"
+          type="button"
+          class="inset-tabs-classes relative z-10 inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md border-0 bg-transparent px-3 py-1.5 text-sm font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-100"
+          :tabindex="getTabIdentifier(tabOption) === currentTab ? '0' : '-1'"
+          :id="id ? `${id}-${getTabIdentifier(tabOption).toLowerCase()}` : getTabIdentifier(tabOption).toLowerCase()"
+          :style="computedStyles"
+          :aria-label="tabOption.label"
+          :aria-selected="getTabIdentifier(tabOption) === currentTab"
+          :aria-current="getTabIdentifier(tabOption) === currentTab"
+          :aria-controls="getTabIdentifier(tabOption)"
+          @click="handleButtonClick(tabOption)"
         >
           <c-icon
             v-if="tabOption.icon"
             :type="tabOption.icon.type"
             :class="[
-              'inset-tabs-icon h-5 w-5',
+              'inset-tabs-icon h-5 w-5 shrink-0',
               getTabIdentifier(tabOption) === currentTab
                 ? 'inset-tabs-icon-selected'
                 : 'text-gray-400',
@@ -48,8 +47,8 @@
             ]"
             >{{ tabOption.label }}</span
           >
-        </div>
-      </button>
+        </button>
+      </div>
     </nav>
   </div>
 </template>
@@ -69,6 +68,7 @@ export default {
     },
     id: {
       type: String,
+      default: "tab",
     },
     tabOptions: {
       type: Array,
@@ -96,16 +96,19 @@ export default {
     },
     updateOverlayPosition() {
       const tabButtons = this.$refs.tabButtons;
-      if (!tabButtons) return;
-      
+      if (!tabButtons || !tabButtons.length) return;
+
       const index = this.tabOptions.findIndex(
         (tab) => this.getTabIdentifier(tab) === this.currentTab
       );
+      if (index === -1) return;
       const tabButton = tabButtons[index];
       if (!tabButton) return;
-      
-      this.overlayStyle.width = `${tabButton.offsetWidth}px`;
-      this.overlayStyle.transform = `translateX(${tabButton.offsetLeft}px)`;
+
+      this.overlayStyle = {
+        width: `${tabButton.offsetWidth}px`,
+        transform: `translateX(${tabButton.offsetLeft}px)`,
+      };
     },
   },
   computed: {
@@ -127,9 +130,12 @@ export default {
 };
 </script>
 
-
 <style>
+.inset-tabs-overlay {
+  transition: transform 200ms ease-in-out, width 200ms ease-in-out;
+}
+
 .inset-tabs-icon.inset-tabs-icon-selected {
   color: var(--inset-tab-icon-color);
 }
-</style>
+</style>

package/src/stories/CConfirmActionModal.stories.js

@@ -38,6 +38,12 @@ export default {
         ],
       },
     },
+    colorVariant: {
+      control: {
+        type: "select",
+        options: ["red", "yellow", "indigo"],
+      },
+    },
   },
 };
 
@@ -57,4 +63,5 @@ Default.args = {
   actionTwoType: "danger",
   loadButton: false,
   isTextAreaEnabled: false,
+  colorVariant: "red",
 };