classcard-ui 0.2.1497 → 0.2.1498-beta.0

package/src/components/CAlertModal/index.js

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

package/src/components/CAlerts/CAlerts.vue

@@ -1,114 +1,114 @@
-<template>
-  <div
-    :class="
-      type == 'withAccentBorder'
-        ? `bg-${color}-50 border-l-4 border-${color}-400 p-4`
-        : `rounded-md bg-${color}-50 p-4`
-    "
-    :id="id || undefined"
-    :role="id ? 'region' : undefined"
-    :aria-labelledby="id ? id + '-title' : undefined"
-    :aria-describedby="
-      id && description && type !== 'withAccentBorder'
-        ? id + '-desc'
-        : undefined
-    "
-  >
-    <div class="flex gap-2">
-      <div class="flex-shrink-0" v-if="icon" aria-hidden="true">
-        <c-icon
-          :type="icon.type"
-          :name="icon.name"
-          :class="`h-5 w-5 text-${color}-500`"
-        ></c-icon>
-      </div>
-      <div class="flex-1">
-        <template v-if="type == 'withAccentBorder'">
-          <p
-            :id="id ? id + '-title' : undefined"
-            :class="`text-sm text-${color}-700`"
-          >
-            <a
-              href="#"
-              :class="`font-medium underline text-${color}-700 hover:text-${color}-600`"
-            >
-              {{ linkLabel }}
-            </a>
-            {{ label }}
-          </p>
-        </template>
-        <template v-else>
-          <h3
-            :id="id ? id + '-title' : undefined"
-            :class="`text-sm font-medium text-${color}-700 word-break`"
-          >
-            {{ label }}
-          </h3>
-          <div
-            :id="id && description ? id + '-desc' : undefined"
-            :class="`mt-2 text-sm text-${color}-700 max-w-full`"
-            v-if="description"
-          >
-            <p class="whitespace-pre-line break-all">
-              {{ description }}
-            </p>
-          </div>
-          <div class="mt-4" v-if="type == 'withActions'">
-            <div class="-mx-2 -my-1.5 flex">
-              <button
-                type="button"
-                :id="id ? id + '-action' : undefined"
-                :class="`bg-${color}-50 rounded-md px-2 py-1.5 text-sm font-medium text-${color}-800 hover:bg-${color}-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-${color}-50 focus:ring-${color}-600`"
-              >
-                {{ actions.label }}
-              </button>
-            </div>
-          </div>
-        </template>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import CIcon from "../CIcon/CIcon.vue";
-export default {
-  name: "CAlerts",
-  components: {
-    CIcon,
-  },
-  props: {
-    label: {
-      type: String,
-    },
-    icon: {
-      type: Object,
-    },
-    classes: {
-      type: String,
-    },
-    color: {
-      type: String,
-    },
-    type: {
-      type: String,
-    },
-    description: {
-      type: String,
-    },
-    actions: {
-      type: Object,
-    },
-    linkLabel: {
-      type: String,
-    },
-    id: {
-      type: String,
-    },
-  },
-};
-</script>
-<style scoped>
-.word-break {
-  word-break: break-word;
-}
-</style>
+<template>
+  <div
+    :class="
+      type == 'withAccentBorder'
+        ? `bg-${color}-50 border-l-4 border-${color}-400 p-4`
+        : `rounded-md bg-${color}-50 p-4`
+    "
+    :id="id || undefined"
+    :role="id ? 'region' : undefined"
+    :aria-labelledby="id ? id + '-title' : undefined"
+    :aria-describedby="
+      id && description && type !== 'withAccentBorder'
+        ? id + '-desc'
+        : undefined
+    "
+  >
+    <div class="flex gap-2">
+      <div class="flex-shrink-0" v-if="icon" aria-hidden="true">
+        <c-icon
+          :type="icon.type"
+          :name="icon.name"
+          :class="`h-5 w-5 text-${color}-500`"
+        ></c-icon>
+      </div>
+      <div class="flex-1">
+        <template v-if="type == 'withAccentBorder'">
+          <p
+            :id="id ? id + '-title' : undefined"
+            :class="`text-sm text-${color}-700`"
+          >
+            <a
+              href="#"
+              :class="`font-medium underline text-${color}-700 hover:text-${color}-600`"
+            >
+              {{ linkLabel }}
+            </a>
+            {{ label }}
+          </p>
+        </template>
+        <template v-else>
+          <h3
+            :id="id ? id + '-title' : undefined"
+            :class="`text-sm font-medium text-${color}-700 word-break`"
+          >
+            {{ label }}
+          </h3>
+          <div
+            :id="id && description ? id + '-desc' : undefined"
+            :class="`mt-2 text-sm text-${color}-700 max-w-full`"
+            v-if="description"
+          >
+            <p class="whitespace-pre-line break-all">
+              {{ description }}
+            </p>
+          </div>
+          <div class="mt-4" v-if="type == 'withActions'">
+            <div class="-mx-2 -my-1.5 flex">
+              <button
+                type="button"
+                :id="id ? id + '-action' : undefined"
+                :class="`bg-${color}-50 rounded-md px-2 py-1.5 text-sm font-medium text-${color}-800 hover:bg-${color}-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-${color}-50 focus:ring-${color}-600`"
+              >
+                {{ actions.label }}
+              </button>
+            </div>
+          </div>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import CIcon from "../CIcon/CIcon.vue";
+export default {
+  name: "CAlerts",
+  components: {
+    CIcon,
+  },
+  props: {
+    label: {
+      type: String,
+    },
+    icon: {
+      type: Object,
+    },
+    classes: {
+      type: String,
+    },
+    color: {
+      type: String,
+    },
+    type: {
+      type: String,
+    },
+    description: {
+      type: String,
+    },
+    actions: {
+      type: Object,
+    },
+    linkLabel: {
+      type: String,
+    },
+    id: {
+      type: String,
+    },
+  },
+};
+</script>
+<style scoped>
+.word-break {
+  word-break: break-word;
+}
+</style>

package/src/components/CAlerts/index.js

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

package/src/components/CAnchorTabs/CAnchorTabs.vue

@@ -1,100 +1,100 @@
-<template>
-  <div>
-    <div class="sm:hidden">
-      <label for="tabs" class="sr-only">Select a tab</label>
-      <select
-        class="block w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500"
-      >
-        <option>My Account</option>
-
-        <option>Company</option>
-
-        <option selected>Team Members</option>
-
-        <option>Billing</option>
-      </select>
-    </div>
-    <div class="hidden sm:block">
-      <div class="border-b border-gray-200">
-        <nav :class="classes" class="-mb-px flex space-x-8" aria-label="Tabs">
-          <a
-            v-for="tab in tabs"
-            :key="tab.name"
-            @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"
-            :id="id"
-          >
-            <c-icon
-              v-if="tab.icon"
-              :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
-                  ? 'font-semibold text-indigo-700'
-                  : 'text-gray-500 hover:text-gray-700'
-              "
-            >
-              {{ tab.text }}
-            </span>
-          </a>
-        </nav>
-      </div>
-      <slot></slot>
-    </div>
-  </div>
-</template>
-<script>
-import CIcon from "../CIcon/CIcon.vue";
-export default {
-  name: "CAnchorTabs",
-  components: { CIcon },
-  props: {
-    tabs: {
-      type: Array,
-      required: true,
-    },
-    initialTab: {
-      type: String,
-    },
-    classes: {
-      type: String,
-    },
-    id: {
-      type: String,
-    },
-  },
-  data() {
-    return {
-      activeTab: this.initialTab,
-    };
-  },
-  methods: {
-    switchTab(name) {
-      this.activeTab = name;
-      this.$emit("tabSwitched", name);
-    },
-    switchTabForMobile(index) {
-      var selectedOption = this.tabs[index];
-      this.activeTab = selectedOption.text;
-    },
-  },
-  watch: {
-    initialTab() {
-      this.activeTab = this.value;
-    },
-  },
-};
-</script>
+<template>
+  <div>
+    <div class="sm:hidden">
+      <label for="tabs" class="sr-only">Select a tab</label>
+      <select
+        class="block w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500"
+      >
+        <option>My Account</option>
+
+        <option>Company</option>
+
+        <option selected>Team Members</option>
+
+        <option>Billing</option>
+      </select>
+    </div>
+    <div class="hidden sm:block">
+      <div class="border-b border-gray-200">
+        <nav :class="classes" class="-mb-px flex space-x-8" aria-label="Tabs">
+          <a
+            v-for="tab in tabs"
+            :key="tab.name"
+            @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"
+            :id="id"
+          >
+            <c-icon
+              v-if="tab.icon"
+              :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
+                  ? 'font-semibold text-indigo-700'
+                  : 'text-gray-500 hover:text-gray-700'
+              "
+            >
+              {{ tab.text }}
+            </span>
+          </a>
+        </nav>
+      </div>
+      <slot></slot>
+    </div>
+  </div>
+</template>
+<script>
+import CIcon from "../CIcon/CIcon.vue";
+export default {
+  name: "CAnchorTabs",
+  components: { CIcon },
+  props: {
+    tabs: {
+      type: Array,
+      required: true,
+    },
+    initialTab: {
+      type: String,
+    },
+    classes: {
+      type: String,
+    },
+    id: {
+      type: String,
+    },
+  },
+  data() {
+    return {
+      activeTab: this.initialTab,
+    };
+  },
+  methods: {
+    switchTab(name) {
+      this.activeTab = name;
+      this.$emit("tabSwitched", name);
+    },
+    switchTabForMobile(index) {
+      var selectedOption = this.tabs[index];
+      this.activeTab = selectedOption.text;
+    },
+  },
+  watch: {
+    initialTab() {
+      this.activeTab = this.value;
+    },
+  },
+};
+</script>

package/src/components/CAnchorTabs/index.js

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

package/src/components/CAnchorTag/CAnchorTag.vue

@@ -1,84 +1,84 @@
-<template>
-  <a
-    :href="href"
-    :id="id"
-    class="flex text-sm"
-    :class="[
-      classes,
-      textColor,
-      disabled
-        ? 'cursor-not-allowed opacity-50'
-        : 'cursor-pointer hover:underline',
-    ]"
-    :aria-disabled="disabled"
-    @click="handleClick"
-    ><c-icon
-      v-if="icon"
-      :type="icon.type"
-      :class="icon.class"
-      :name="icon.name"
-      :viewBox="icon.viewBox"
-      :cursorType="disabled ? 'cursor-not-allowed' : 'cursor-pointer'"
-    ></c-icon>
-    {{ label }}
-  </a>
-</template>
-<script>
-import CIcon from "../CIcon/CIcon.vue";
-export default {
-  name: "CAnchorTag",
-  components: {
-    CIcon,
-  },
-  props: {
-    href: {
-      type: String,
-    },
-    label: {
-      type: String,
-    },
-    icon: {
-      type: Object,
-    },
-    id: {
-      type: String,
-    },
-    classes: {
-      type: String,
-    },
-    action: {
-      type: Function,
-    },
-    color: {
-      type: String,
-      default: "blue",
-    },
-    preferredTextColor: {
-      type: String,
-      default: "text-indigo-600",
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  methods: {
-    handleClick(event) {
-      event.preventDefault();
-      if (this.disabled) return;
-      if (this.action) this.action();
-    },
-  },
-  computed: {
-    textColor() {
-      if (this.color === "red") {
-        return "text-red-800";
-      } else if (this.color == "blue") {
-        return "text-indigo-600";
-      } else {
-        return this.preferredTextColor;
-      }
-    },
-  },
-};
-</script>
+<template>
+  <a
+    :href="href"
+    :id="id"
+    class="flex text-sm"
+    :class="[
+      classes,
+      textColor,
+      disabled
+        ? 'cursor-not-allowed opacity-50'
+        : 'cursor-pointer hover:underline',
+    ]"
+    :aria-disabled="disabled"
+    @click="handleClick"
+    ><c-icon
+      v-if="icon"
+      :type="icon.type"
+      :class="icon.class"
+      :name="icon.name"
+      :viewBox="icon.viewBox"
+      :cursorType="disabled ? 'cursor-not-allowed' : 'cursor-pointer'"
+    ></c-icon>
+    {{ label }}
+  </a>
+</template>
+<script>
+import CIcon from "../CIcon/CIcon.vue";
+export default {
+  name: "CAnchorTag",
+  components: {
+    CIcon,
+  },
+  props: {
+    href: {
+      type: String,
+    },
+    label: {
+      type: String,
+    },
+    icon: {
+      type: Object,
+    },
+    id: {
+      type: String,
+    },
+    classes: {
+      type: String,
+    },
+    action: {
+      type: Function,
+    },
+    color: {
+      type: String,
+      default: "blue",
+    },
+    preferredTextColor: {
+      type: String,
+      default: "text-indigo-600",
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  methods: {
+    handleClick(event) {
+      event.preventDefault();
+      if (this.disabled) return;
+      if (this.action) this.action();
+    },
+  },
+  computed: {
+    textColor() {
+      if (this.color === "red") {
+        return "text-red-800";
+      } else if (this.color == "blue") {
+        return "text-indigo-600";
+      } else {
+        return this.preferredTextColor;
+      }
+    },
+  },
+};
+</script>

package/src/components/CAnchorTag/index.js

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