classcard-ui 0.2.1473 → 0.2.1475

package/src/components/CTable/index.js

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

package/src/components/CTabs/CTabs.vue

@@ -1,250 +1,250 @@
-<template>
-  <div>
-    <slot></slot>
-    <div class="sm:hidden" :class="tabClasses">
-      <label for="tabs" class="sr-only">Select a tab</label>
-      <select
-        v-model="activeTab"
-        @change="switchTabForMobile($event.target.selectedIndex)"
-        class="selector-focus-class block w-full rounded-md border-gray-300 pr-6 pl-4 text-sm"
-        :style="computedStyles"
-        id="tabs"
-      >
-        <option
-          v-for="tab in tabs"
-          :key="tab.text"
-          :value="tab.name"
-          :id="getActionIDFn(tab.text)"
-          class="text-sm"
-        >
-          {{ tab.text }}
-        </option>
-      </select>
-    </div>
-    <div :class="['hidden sm:block', navClasses]">
-      <div
-        :class="[
-          'flex items-center justify-between border-b border-gray-200',
-          extraNavClasses,
-        ]"
-      >
-        <nav :class="classes" class="-mb-px flex" aria-label="Tabs">
-          <a
-            v-for="tab in isExtraTabs ? tabsList : tabs"
-            :key="tab.text"
-            :id="getActionIDFn(tab.text)"
-            @click="switchTab(tab.name)"
-            class="group inline-flex cursor-pointer items-center whitespace-nowrap border-b-2 py-4 px-1 text-sm font-medium"
-            :class="[
-              activeTab == tab.name
-                ? 'anchor-selected-class'
-                : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700',
-              tab.isDisabled ? 'pointer-events-none opacity-50' : 'opacity-100',
-            ]"
-            :style="computedStyles"
-          >
-            <c-icon
-              v-if="tab.icon"
-              :name="tab.icon"
-              class="-ml-0.5 mr-2 h-5 w-5"
-              :class="
-                activeTab == tab.name
-                  ? 'icon-selected-class'
-                  : 'text-gray-400 group-hover:text-gray-500 '
-              "
-              :style="computedStyles"
-              :type="tab.iconType ? tab.iconType : 'solid'"
-              :viewBox="tab.viewBox ? tab.viewBox : '0 0 20 20'"
-            ></c-icon>
-            <span
-              :class="
-                activeTab == tab.name
-                  ? 'span-selected-class'
-                  : 'text-gray-500 hover:text-gray-700'
-              "
-              :style="computedStyles"
-            >
-              {{ tab.text }}
-            </span>
-            <div class="ml-2" v-if="tab.count">
-              <span
-                :class="
-                  activeTab == tab.name
-                    ? 'count-active-class rounded-full px-2 py-0.5'
-                    : 'rounded-full bg-gray-100 px-2 py-0.5 text-gray-900'
-                "
-                :style="computedStyles"
-              >
-                {{ tab.count }}
-              </span>
-            </div>
-          </a>
-          <a
-            v-if="extraTabsCount > 0"
-            @click="handleMoreTabs"
-            class="group relative inline-flex cursor-pointer items-center whitespace-nowrap border-b-2 border-transparent"
-          >
-            <span
-              class="anchor-extra-tabs text-sm font-medium hover:underline"
-              :style="computedStyles"
-              >+{{ extraTabsCount }} more</span
-            >
-            <div
-              v-if="openDropdown"
-              class="absolute top-12 -left-32 z-10 w-44 rounded-md border border-gray-200 bg-white py-1 shadow-sm"
-            >
-              <p
-                v-for="tab in extraTabs"
-                :key="tab.text"
-                :id="getActionIDFn(tab.text)"
-                @click="handleSwitchTabs(tab.name)"
-                class="py-2 px-4 text-sm text-gray-500 hover:bg-gray-100 hover:text-gray-700"
-              >
-                {{ tab.text }}
-              </p>
-            </div>
-          </a>
-        </nav>
-        <div>
-          <slot name="customComp"> </slot>
-        </div>
-      </div>
-    </div>
-    <div v-for="(tab, index) in tabs" :key="index">
-      <div v-show="tab.name == activeTab">
-        <slot :name="`tab-panel-${tab.name}`"></slot>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { getActionID } from "../../helper";
-import { COLOR_CONFIG } from "../../colorConfig";
-// import CIcon from "../CIcon/CIcon.vue";
-export default {
-  name: "CTabs",
-  // components: { CIcon },
-  props: {
-    tabs: {
-      type: Array,
-      required: true,
-    },
-    id: {
-      type: String,
-    },
-    initialTab: {
-      type: String,
-    },
-    classes: {
-      type: String,
-      default: "space-x-3",
-    },
-    tabClasses: {
-      type: String,
-    },
-    extraTabs: {
-      type: Array,
-    },
-    tabsList: {
-      type: Array,
-    },
-    extraTabsCount: {
-      type: Number,
-    },
-    isExtraTabs: {
-      type: Boolean,
-    },
-    navClasses: {
-      type: String,
-      default: "",
-    },
-    extraNavClasses: {
-      type: String,
-      default: "",
-    },
-    preferredColor: {
-      type: String,
-      default: "indigo",
-    },
-  },
-  data() {
-    return {
-      activeTab: this.initialTab,
-      openDropdown: false,
-    };
-  },
-  methods: {
-    getActionIDFn(name) {
-      return getActionID(name, this.id);
-    },
-    switchTab(tabText, type = "") {
-      this.activeTab = tabText;
-      if (type != "handler") {
-        this.$emit("handleTabsUpdate", tabText);
-      }
-    },
-    switchTabForMobile(index) {
-      var selectedOption = this.tabs[index];
-      this.activeTab = selectedOption.name;
-    },
-    handleSwitchTabs(tab) {
-      this.$emit("updateTabsList", tab);
-      this.switchTab(tab, "handler");
-    },
-    handleMoreTabs() {
-      this.openDropdown = !this.openDropdown;
-    },
-  },
-  watch: {
-    initialTab() {
-      this.activeTab = this.initialTab;
-    },
-  },
-  computed: {
-    computedStyles() {
-      const colors = COLOR_CONFIG[this.preferredColor] || COLOR_CONFIG.indigo;
-      return {
-        "--color-100": colors.shade100,
-        "--color-500": colors.shade500,
-        "--color-600": colors.shade600,
-        "--color-700": colors.shade700,
-        "--color-800": colors.shade800,
-        "--color-900": colors.shade900,
-      };
-    },
-  },
-};
-</script>
-
-<style scoped>
-.selector-focus-class:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px white, 0 0 0 4px var(--color-500) !important;
-  border-color: var(--color-500);
-}
-.anchor-selected-class {
-  border-color: var(--color-600);
-  color: var(--color-700);
-}
-.anchor-selected-class:hover {
-  color: var(--color-800);
-}
-.icon-selected-class {
-  color: var(--color-700);
-}
-.icon-selected-class:group-hover {
-  color: var(--color-800);
-}
-.span-selected-class {
-  color: var(--color-700);
-}
-
-.count-active-class {
-  background-color: var(--color-100);
-  color: var(--color-900);
-}
-.anchor-extra-tabs {
-  color: var(--color-800);
-}
-</style>
+<template>
+  <div>
+    <slot></slot>
+    <div class="sm:hidden" :class="tabClasses">
+      <label for="tabs" class="sr-only">Select a tab</label>
+      <select
+        v-model="activeTab"
+        @change="switchTabForMobile($event.target.selectedIndex)"
+        class="selector-focus-class block w-full rounded-md border-gray-300 pr-6 pl-4 text-sm"
+        :style="computedStyles"
+        id="tabs"
+      >
+        <option
+          v-for="tab in tabs"
+          :key="tab.text"
+          :value="tab.name"
+          :id="getActionIDFn(tab.text)"
+          class="text-sm"
+        >
+          {{ tab.text }}
+        </option>
+      </select>
+    </div>
+    <div :class="['hidden sm:block', navClasses]">
+      <div
+        :class="[
+          'flex items-center justify-between border-b border-gray-200',
+          extraNavClasses,
+        ]"
+      >
+        <nav :class="classes" class="-mb-px flex" aria-label="Tabs">
+          <a
+            v-for="tab in isExtraTabs ? tabsList : tabs"
+            :key="tab.text"
+            :id="getActionIDFn(tab.text)"
+            @click="switchTab(tab.name)"
+            class="group inline-flex cursor-pointer items-center whitespace-nowrap border-b-2 py-4 px-1 text-sm font-medium"
+            :class="[
+              activeTab == tab.name
+                ? 'anchor-selected-class'
+                : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700',
+              tab.isDisabled ? 'pointer-events-none opacity-50' : 'opacity-100',
+            ]"
+            :style="computedStyles"
+          >
+            <c-icon
+              v-if="tab.icon"
+              :name="tab.icon"
+              class="-ml-0.5 mr-2 h-5 w-5"
+              :class="
+                activeTab == tab.name
+                  ? 'icon-selected-class'
+                  : 'text-gray-400 group-hover:text-gray-500 '
+              "
+              :style="computedStyles"
+              :type="tab.iconType ? tab.iconType : 'solid'"
+              :viewBox="tab.viewBox ? tab.viewBox : '0 0 20 20'"
+            ></c-icon>
+            <span
+              :class="
+                activeTab == tab.name
+                  ? 'span-selected-class'
+                  : 'text-gray-500 hover:text-gray-700'
+              "
+              :style="computedStyles"
+            >
+              {{ tab.text }}
+            </span>
+            <div class="ml-2" v-if="tab.count">
+              <span
+                :class="
+                  activeTab == tab.name
+                    ? 'count-active-class rounded-full px-2 py-0.5'
+                    : 'rounded-full bg-gray-100 px-2 py-0.5 text-gray-900'
+                "
+                :style="computedStyles"
+              >
+                {{ tab.count }}
+              </span>
+            </div>
+          </a>
+          <a
+            v-if="extraTabsCount > 0"
+            @click="handleMoreTabs"
+            class="group relative inline-flex cursor-pointer items-center whitespace-nowrap border-b-2 border-transparent"
+          >
+            <span
+              class="anchor-extra-tabs text-sm font-medium hover:underline"
+              :style="computedStyles"
+              >+{{ extraTabsCount }} more</span
+            >
+            <div
+              v-if="openDropdown"
+              class="absolute top-12 -left-32 z-10 w-44 rounded-md border border-gray-200 bg-white py-1 shadow-sm"
+            >
+              <p
+                v-for="tab in extraTabs"
+                :key="tab.text"
+                :id="getActionIDFn(tab.text)"
+                @click="handleSwitchTabs(tab.name)"
+                class="py-2 px-4 text-sm text-gray-500 hover:bg-gray-100 hover:text-gray-700"
+              >
+                {{ tab.text }}
+              </p>
+            </div>
+          </a>
+        </nav>
+        <div>
+          <slot name="customComp"> </slot>
+        </div>
+      </div>
+    </div>
+    <div v-for="(tab, index) in tabs" :key="index">
+      <div v-show="tab.name == activeTab">
+        <slot :name="`tab-panel-${tab.name}`"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getActionID } from "../../helper";
+import { COLOR_CONFIG } from "../../colorConfig";
+// import CIcon from "../CIcon/CIcon.vue";
+export default {
+  name: "CTabs",
+  // components: { CIcon },
+  props: {
+    tabs: {
+      type: Array,
+      required: true,
+    },
+    id: {
+      type: String,
+    },
+    initialTab: {
+      type: String,
+    },
+    classes: {
+      type: String,
+      default: "space-x-3",
+    },
+    tabClasses: {
+      type: String,
+    },
+    extraTabs: {
+      type: Array,
+    },
+    tabsList: {
+      type: Array,
+    },
+    extraTabsCount: {
+      type: Number,
+    },
+    isExtraTabs: {
+      type: Boolean,
+    },
+    navClasses: {
+      type: String,
+      default: "",
+    },
+    extraNavClasses: {
+      type: String,
+      default: "",
+    },
+    preferredColor: {
+      type: String,
+      default: "indigo",
+    },
+  },
+  data() {
+    return {
+      activeTab: this.initialTab,
+      openDropdown: false,
+    };
+  },
+  methods: {
+    getActionIDFn(name) {
+      return getActionID(name, this.id);
+    },
+    switchTab(tabText, type = "") {
+      this.activeTab = tabText;
+      if (type != "handler") {
+        this.$emit("handleTabsUpdate", tabText);
+      }
+    },
+    switchTabForMobile(index) {
+      var selectedOption = this.tabs[index];
+      this.activeTab = selectedOption.name;
+    },
+    handleSwitchTabs(tab) {
+      this.$emit("updateTabsList", tab);
+      this.switchTab(tab, "handler");
+    },
+    handleMoreTabs() {
+      this.openDropdown = !this.openDropdown;
+    },
+  },
+  watch: {
+    initialTab() {
+      this.activeTab = this.initialTab;
+    },
+  },
+  computed: {
+    computedStyles() {
+      const colors = COLOR_CONFIG[this.preferredColor] || COLOR_CONFIG.indigo;
+      return {
+        "--color-100": colors.shade100,
+        "--color-500": colors.shade500,
+        "--color-600": colors.shade600,
+        "--color-700": colors.shade700,
+        "--color-800": colors.shade800,
+        "--color-900": colors.shade900,
+      };
+    },
+  },
+};
+</script>
+
+<style scoped>
+.selector-focus-class:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px white, 0 0 0 4px var(--color-500) !important;
+  border-color: var(--color-500);
+}
+.anchor-selected-class {
+  border-color: var(--color-600);
+  color: var(--color-700);
+}
+.anchor-selected-class:hover {
+  color: var(--color-800);
+}
+.icon-selected-class {
+  color: var(--color-700);
+}
+.icon-selected-class:group-hover {
+  color: var(--color-800);
+}
+.span-selected-class {
+  color: var(--color-700);
+}
+
+.count-active-class {
+  background-color: var(--color-100);
+  color: var(--color-900);
+}
+.anchor-extra-tabs {
+  color: var(--color-800);
+}
+</style>

package/src/components/CTabs/index.js

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