classcard-ui 0.2.989 → 0.2.990

package/src/components/CInsetTabs/CInsetTabs.vue

@@ -1,88 +1,88 @@
-<template>
-  <div>
-    <nav
-      class="group flex rounded-lg bg-gray-100 p-0.5 hover:bg-gray-200"
-      aria-label="Tabs"
-    >
-      <!-- @keydown.arrow-left="
-          $emit(
-            'update-tab',
-            index === 0 ? tabOption.label : tabOptions[index - 1].label
-          )
-        "
-        @keydown.arrow-right="
-          $emit(
-            'update-tab',
-            index === 0
-              ? tabOptions.find((tab) => tab.label !== tabOption.label).label
-              : tabOptions[index - 1].label
-          )
-        " -->
-      <button
-        v-for="(tabOption, index) in tabOptions"
-        :key="index"
-        x-ref="dates"
-        class="focus:outline-none flex min-w-0 flex-grow rounded-md focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-100"
-        :tabindex="currentTab === tabOption.label ? '0' : '-1'"
-        @click="handleButtonClick(tabOption)"
-      >
-        <span
-          x-show="true"
-          class="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="
-            currentTab === tabOption.label
-              ? 'ring-black bg-white shadow-sm ring-1 ring-opacity-5'
-              : ''
-          "
-        >
-          <c-icon
-            :type="tabOption.icon.type"
-            :class="
-              currentTab === tabOption.label
-                ? 'text-indigo-700'
-                : 'text-gray-400'
-            "
-            class="h-5 w-5"
-            :name="tabOption.icon.name"
-            :viewBox="tabOption.icon.viewBox"
-          ></c-icon>
-          <span
-            v-if="tabOption.showLabel"
-            :class="`${
-              currentTab === tabOption.label
-                ? 'text-gray-900'
-                : 'text-gray-600 group-hover:text-gray-900'
-            } `"
-            >{{ tabOption.label }}</span
-          >
-        </span>
-      </button>
-    </nav>
-  </div>
-</template>
-
-<script>
-import CIcon from "../CIcon/CIcon.vue";
-
-export default {
-  name: "CInsetTabs",
-  components: {
-    CIcon,
-  },
-  props: {
-    currentTab: {
-      type: String,
-    },
-    tabOptions: {
-      type: Array,
-    },
-  },
-  methods: {
-    handleButtonClick(tabOption) {
-      this.$emit("update-tab", tabOption.label);
-    },
-  },
-};
-</script>
-
-<style></style>
+<template>
+  <div>
+    <nav
+      class="group flex rounded-lg bg-gray-100 p-0.5 hover:bg-gray-200"
+      aria-label="Tabs"
+    >
+      <!-- @keydown.arrow-left="
+          $emit(
+            'update-tab',
+            index === 0 ? tabOption.label : tabOptions[index - 1].label
+          )
+        "
+        @keydown.arrow-right="
+          $emit(
+            'update-tab',
+            index === 0
+              ? tabOptions.find((tab) => tab.label !== tabOption.label).label
+              : tabOptions[index - 1].label
+          )
+        " -->
+      <button
+        v-for="(tabOption, index) in tabOptions"
+        :key="index"
+        x-ref="dates"
+        class="focus:outline-none flex min-w-0 flex-grow rounded-md focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-100"
+        :tabindex="currentTab === tabOption.label ? '0' : '-1'"
+        @click="handleButtonClick(tabOption)"
+      >
+        <span
+          x-show="true"
+          class="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="
+            currentTab === tabOption.label
+              ? 'ring-black bg-white shadow-sm ring-1 ring-opacity-5'
+              : ''
+          "
+        >
+          <c-icon
+            :type="tabOption.icon.type"
+            :class="
+              currentTab === tabOption.label
+                ? 'text-indigo-700'
+                : 'text-gray-400'
+            "
+            class="h-5 w-5"
+            :name="tabOption.icon.name"
+            :viewBox="tabOption.icon.viewBox"
+          ></c-icon>
+          <span
+            v-if="tabOption.showLabel"
+            :class="`${
+              currentTab === tabOption.label
+                ? 'text-gray-900'
+                : 'text-gray-600 group-hover:text-gray-900'
+            } `"
+            >{{ tabOption.label }}</span
+          >
+        </span>
+      </button>
+    </nav>
+  </div>
+</template>
+
+<script>
+import CIcon from "../CIcon/CIcon.vue";
+
+export default {
+  name: "CInsetTabs",
+  components: {
+    CIcon,
+  },
+  props: {
+    currentTab: {
+      type: String,
+    },
+    tabOptions: {
+      type: Array,
+    },
+  },
+  methods: {
+    handleButtonClick(tabOption) {
+      this.$emit("update-tab", tabOption.label);
+    },
+  },
+};
+</script>
+
+<style></style>

package/src/components/CInsetTabs/index.js

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

package/src/components/CModalHeading/CModalHeading.vue

@@ -1,22 +1,22 @@
-<template>
-  <div>
-    <div :class="{ 'border-b-2': divider }" class="pb-2 border-gray-200">
-      <h3 class="text-lg leading-6 font-medium text-gray-700">
-        {{ title }}
-      </h3>
-      <p v-if="description" class="max-w-4xl text-sm text-gray-500">
-        {{ description }}
-      </p>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  name: "CModalHeading",
-  props: {
-    title: { type: String, required: true },
-    description: { type: String },
-    divider: { type: Boolean },
-  },
-};
-</script>
+<template>
+  <div>
+    <div :class="{ 'border-b-2': divider }" class="pb-2 border-gray-200">
+      <h3 class="text-lg leading-6 font-medium text-gray-700">
+        {{ title }}
+      </h3>
+      <p v-if="description" class="max-w-4xl text-sm text-gray-500">
+        {{ description }}
+      </p>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "CModalHeading",
+  props: {
+    title: { type: String, required: true },
+    description: { type: String },
+    divider: { type: Boolean },
+  },
+};
+</script>

package/src/components/CModalHeading/index.js

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

package/src/components/CModuleHelpLinks/CModuleHelpLinks.vue

@@ -1,70 +1,70 @@
-<template>
-  <div>
-    <div
-      v-if="description"
-      class="mt-2 flex flex-col sm:flex-row sm:flex-wrap sm:space-x-6"
-    >
-      <div class="flex items-center text-sm text-gray-500">
-        {{ description }}
-      </div>
-    </div>
-    <div
-      class="mt-1 flex flex-col sm:mt-0 sm:flex-row sm:flex-wrap sm:space-x-6"
-    >
-      <div
-        class="mt-2 flex items-center text-sm text-indigo-600"
-        v-if="helpArticle"
-      >
-        <c-icon class="mr-1.5 h-5 w-5" name="book-open" type="solid"></c-icon>
-        <a
-          :href="helpArticle"
-          target="_blank"
-          class="font-medium text-indigo-600 hover:underline"
-        >
-          {{ articleTitle }}
-        </a>
-      </div>
-      <div
-        class="mt-2 flex items-center text-sm text-indigo-600"
-        v-if="helpVideo"
-      >
-        <c-icon
-          class="mr-1.5 h-5 w-5"
-          name="video-camera"
-          type="solid"
-        ></c-icon>
-        <a
-          :href="helpVideo"
-          target="_blank"
-          class="font-medium text-indigo-600 hover:underline"
-        >
-          {{ videoTitle }}
-        </a>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import CIcon from "../CIcon/CIcon.vue";
-export default {
-  name: "CModuleHelpLinks",
-  components: { CIcon },
-  props: {
-    description: { type: String },
-    helpVideo: {
-      type: String,
-    },
-    helpArticle: { type: String },
-    articleTitle: {
-      type: String,
-      default: "How to get started",
-    },
-    videoTitle: {
-      type: String,
-      default: "Watch a video",
-    },
-  },
-  methods: {},
-};
-</script>
+<template>
+  <div>
+    <div
+      v-if="description"
+      class="mt-2 flex flex-col sm:flex-row sm:flex-wrap sm:space-x-6"
+    >
+      <div class="flex items-center text-sm text-gray-500">
+        {{ description }}
+      </div>
+    </div>
+    <div
+      class="mt-1 flex flex-col sm:mt-0 sm:flex-row sm:flex-wrap sm:space-x-6"
+    >
+      <div
+        class="mt-2 flex items-center text-sm text-indigo-600"
+        v-if="helpArticle"
+      >
+        <c-icon class="mr-1.5 h-5 w-5" name="book-open" type="solid"></c-icon>
+        <a
+          :href="helpArticle"
+          target="_blank"
+          class="font-medium text-indigo-600 hover:underline"
+        >
+          {{ articleTitle }}
+        </a>
+      </div>
+      <div
+        class="mt-2 flex items-center text-sm text-indigo-600"
+        v-if="helpVideo"
+      >
+        <c-icon
+          class="mr-1.5 h-5 w-5"
+          name="video-camera"
+          type="solid"
+        ></c-icon>
+        <a
+          :href="helpVideo"
+          target="_blank"
+          class="font-medium text-indigo-600 hover:underline"
+        >
+          {{ videoTitle }}
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import CIcon from "../CIcon/CIcon.vue";
+export default {
+  name: "CModuleHelpLinks",
+  components: { CIcon },
+  props: {
+    description: { type: String },
+    helpVideo: {
+      type: String,
+    },
+    helpArticle: { type: String },
+    articleTitle: {
+      type: String,
+      default: "How to get started",
+    },
+    videoTitle: {
+      type: String,
+      default: "Watch a video",
+    },
+  },
+  methods: {},
+};
+</script>

package/src/components/CModuleHelpLinks/index.js

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