classcard-ui 0.2.896 → 0.2.898

package/package.json

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

package/src/components/CInsetTabs/CInsetTabs.vue

@@ -0,0 +1,82 @@
+<template>
+  <div>
+    <nav
+      class="group flex rounded-lg bg-gray-100 p-0.5 hover:bg-gray-200"
+      aria-label="Tabs"
+    >
+      <button
+        v-for="(tabOption, index) in tabOptions"
+        :key="tabOption.label"
+        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'"
+        @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
+          )
+        "
+        @click="$emit('update-tab', tabOption.label)"
+      >
+        <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
+            :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,
+    },
+  },
+};
+</script>
+
+<style></style>

package/src/icons.js

@@ -334,4 +334,5 @@ export default {
     "M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.493 12.767 2 11.434 2 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm8 0h-2v2h2V9zM9 9h2v2H9V9z",
   "sparkles-solid":
     "M5 2a1 1 0 011 1v1h1a1 1 0 010 2H6v1a1 1 0 01-2 0V6H3a1 1 0 010-2h1V3a1 1 0 011-1zm0 10a1 1 0 011 1v1h1a1 1 0 110 2H6v1a1 1 0 11-2 0v-1H3a1 1 0 110-2h1v-1a1 1 0 011-1zM12 2a1 1 0 01.967.744L14.146 7.2 17.5 9.134a1 1 0 010 1.732l-3.354 1.935-1.18 4.455a1 1 0 01-1.933 0L9.854 12.8 6.5 10.866a1 1 0 010-1.732l3.354-1.935 1.18-4.455A1 1 0 0112 2z",
+  "view-list-outline": "M4 6h16M4 10h16M4 14h16M4 18h16",
 };

package/src/stories/CInsetTabs.stories.js

@@ -0,0 +1,38 @@
+import CInsetTabs from "../components/CInsetTabs/CInsetTabs.vue";
+
+export default {
+  title: "CInsetTabs",
+  components: CInsetTabs,
+  argTypes: {
+    currentTab: String,
+    tabOptions: Array,
+  },
+};
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { CInsetTabs },
+  template: '<c-inset-tabs v-bind="$props" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  currentTab: "Dates",
+  tabOptions: [
+    {
+      label: "Dates",
+      icon: {
+        type: "solid",
+        name: "calendar-solid",
+        viewBox: "0 0 20 20",
+      },
+    },
+    {
+      label: "Days",
+      icon: {
+        type: "solid",
+        name: "calendar-solid",
+        viewBox: "0 0 20 20",
+      },
+    },
+  ],
+};