classcard-ui 0.2.1506 → 0.2.1508-beta.0

package/src/components/CCalendar/index.js

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

package/src/components/CCard/CCard.vue

@@ -1,53 +1,53 @@
-<template>
-  <div
-    class="relative flex items-center space-x-3 rounded-lg border border-gray-300 bg-white px-6 py-5 shadow-sm focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 hover:border-gray-400"
-  >
-    <div class="flex-shrink-0 rounded-md bg-gray-100 p-2">
-      <c-avatar
-        :image="image.image"
-        :rounded="image.rounded"
-        :size="image.size"
-        :imageResizeClass="'object-contain'"
-      ></c-avatar>
-    </div>
-    <div class="min-w-0 flex-1">
-      <a href="#" class="focus:outline-none">
-        <span class="absolute inset-0" aria-hidden="true"></span>
-        <div class="flex" :class="classes">
-          <p class="text-sm text-gray-900">
-            {{ name }}
-          </p>
-          <slot></slot>
-        </div>
-        <p class="truncate text-sm text-gray-500">
-          {{ description }}
-        </p>
-      </a>
-    </div>
-  </div>
-</template>
-
-<script>
-import CAvatar from "../CAvatar/CAvatar.vue";
-export default {
-  name: "CCard",
-  components: { CAvatar },
-  props: {
-    image: {
-      type: Object,
-    },
-    name: {
-      type: String,
-    },
-    description: {
-      type: String,
-    },
-    classes: {
-      type: String,
-      default: "",
-    },
-  },
-};
-</script>
-
-<style></style>
+<template>
+  <div
+    class="relative flex items-center space-x-3 rounded-lg border border-gray-300 bg-white px-6 py-5 shadow-sm focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 hover:border-gray-400"
+  >
+    <div class="flex-shrink-0 rounded-md bg-gray-100 p-2">
+      <c-avatar
+        :image="image.image"
+        :rounded="image.rounded"
+        :size="image.size"
+        :imageResizeClass="'object-contain'"
+      ></c-avatar>
+    </div>
+    <div class="min-w-0 flex-1">
+      <a href="#" class="focus:outline-none">
+        <span class="absolute inset-0" aria-hidden="true"></span>
+        <div class="flex" :class="classes">
+          <p class="text-sm text-gray-900">
+            {{ name }}
+          </p>
+          <slot></slot>
+        </div>
+        <p class="truncate text-sm text-gray-500">
+          {{ description }}
+        </p>
+      </a>
+    </div>
+  </div>
+</template>
+
+<script>
+import CAvatar from "../CAvatar/CAvatar.vue";
+export default {
+  name: "CCard",
+  components: { CAvatar },
+  props: {
+    image: {
+      type: Object,
+    },
+    name: {
+      type: String,
+    },
+    description: {
+      type: String,
+    },
+    classes: {
+      type: String,
+      default: "",
+    },
+  },
+};
+</script>
+
+<style></style>

package/src/components/CCard/index.js

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

package/src/components/CCheckbox/CCheckbox.vue

@@ -1,200 +1,200 @@
-<template>
-  <div>
-    <div class="relative flex items-start">
-      <div class="flex h-5 items-center">
-        <input
-          type="checkbox"
-          v-model="checkedValue"
-          @click="changeValue"
-          :class="`checkbox-state focus cursor-pointer rounded border disabled:opacity-50 ${
-            isValidate ? '' : 'error'
-          }`"
-          :style="colorStyles"
-          :disabled="isDisabled"
-          :indeterminate.prop="indeterminate"
-          :id="id"
-        />
-      </div>
-      <div
-        class="flex cursor-pointer items-center text-sm"
-        :class="[isDisabled ? 'pointer-events-none' : '', setMarginLeft]"
-        :id="id"
-        @click="changeValue"
-      >
-        <template v-if="showAvatar">
-          <c-avatar
-            class="mr-3"
-            v-if="avatarImage"
-            :size="description ? 'extrasmall' : 'extraextrasmall'"
-            :image="avatarImage"
-            :rounded="true"
-          ></c-avatar>
-          <c-avatar
-            class="mr-3"
-            :size="description ? 'extrasmall' : 'extraextrasmall'"
-            :nameInitials="avatarNameInitials"
-            :rounded="true"
-            v-else
-          ></c-avatar>
-        </template>
-        <div class="flex flex-col">
-          <label
-            :class="[
-              'cursor-pointer text-gray-900',
-              isDisabled ? 'opacity-50' : '',
-              tag ? 'flex' : '',
-              isNormalFont ? '' : 'font-medium',
-              customLabelClass,
-            ]"
-            >{{ label }}
-            <c-tag
-              v-if="tag && Object.keys(tag).length !== 0"
-              :label="tag.label"
-              :color="tag.color"
-              :class="tag.class"
-              class="ml-2"
-            />
-          </label>
-          <p
-            v-if="description"
-            :class="`mt-0.5 cursor-pointer text-gray-500 ${
-              isDisabled ? 'opacity-50' : ''
-            }`"
-          >
-            {{ description }}
-          </p>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import CTag from "../CTag/CTag.vue";
-import CAvatar from "../CAvatar/CAvatar.vue";
-import { COLOR_CONFIG } from "../../colorConfig";
-
-export default {
-  components: { CTag, CAvatar },
-  name: "CCheckbox",
-  props: {
-    label: { type: String },
-    id: { type: String },
-    customLabelClass: {
-      type: String,
-    },
-    description: { type: String },
-    value: [Boolean, Number],
-    isDisabled: {
-      type: Boolean,
-    },
-    indeterminate: {
-      type: Boolean,
-    },
-    tag: {
-      type: Object,
-    },
-    permanentIndeterminate: {
-      type: Boolean,
-    },
-    setMarginLeft: {
-      type: String,
-      default: "ml-3",
-    },
-    unCheckable: {
-      type: Boolean,
-    },
-    checkable: {
-      type: Boolean,
-    },
-    isNormalFont: {
-      type: Boolean,
-      default: false,
-    },
-    // validation is passed or not
-    isValidate: { type: Boolean, default: true },
-    preferredColor: { type: String, default: "indigo" },
-    showAvatar: { type: Boolean, default: false },
-    avatarImage: { type: String, default: null },
-    avatarNameInitials: { type: String, default: null },
-  },
-  data() {
-    return {
-      checkedValue: this.value,
-    };
-  },
-  computed: {
-    colorStyles() {
-      const colors = COLOR_CONFIG[this.preferredColor] || COLOR_CONFIG.indigo;
-      return {
-        "--checkbox-enabled-color": colors.shade600,
-        "--checkbox-focus-color": colors.shade500,
-      };
-    },
-  },
-  methods: {
-    changeValue(e) {
-      let selectedValue = 0;
-      if (this.permanentIndeterminate) {
-        // can never be in any state other than dash
-        e.preventDefault();
-        if (this.checkedValue == 1) {
-          selectedValue = 0;
-        } else if (this.checkedValue == 0) {
-          selectedValue = 1;
-        } else {
-          selectedValue = 2;
-        }
-      } else if (this.unCheckable) {
-        // can never be in unchecked state
-        if (this.checkedValue == 2) {
-          selectedValue = 1;
-        } else {
-          selectedValue = 2;
-        }
-      } else if (this.checkable) {
-        // can never be in a checked state
-        if (this.checkedValue == 2) {
-          selectedValue = 0;
-        } else {
-          selectedValue = 2;
-        }
-      } else {
-        // normal check/uncheck
-        if (this.checkedValue == 1) {
-          selectedValue = 0;
-        } else {
-          selectedValue = 1;
-        }
-      }
-      this.$emit("onChange", selectedValue);
-    },
-  },
-  watch: {
-    value() {
-      this.checkedValue = this.value;
-    },
-  },
-  mounted() {
-    this.checkedValue = this.value;
-  },
-};
-</script>
-<style scoped>
-.error {
-  border-color: #dc2626 !important;
-}
-
-.checkbox-state {
-  height: 1rem;
-  width: 1rem;
-}
-
-.checkbox-state:checked {
-  background-color: var(--checkbox-enabled-color) !important;
-}
-
-.checkbox-state:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px white, 0 0 0 4px var(--checkbox-focus-color) !important;
-}
-</style>
+<template>
+  <div>
+    <div class="relative flex items-start">
+      <div class="flex h-5 items-center">
+        <input
+          type="checkbox"
+          v-model="checkedValue"
+          @click="changeValue"
+          :class="`checkbox-state focus cursor-pointer rounded border disabled:opacity-50 ${
+            isValidate ? '' : 'error'
+          }`"
+          :style="colorStyles"
+          :disabled="isDisabled"
+          :indeterminate.prop="indeterminate"
+          :id="id"
+        />
+      </div>
+      <div
+        class="flex cursor-pointer items-center text-sm"
+        :class="[isDisabled ? 'pointer-events-none' : '', setMarginLeft]"
+        :id="id"
+        @click="changeValue"
+      >
+        <template v-if="showAvatar">
+          <c-avatar
+            class="mr-3"
+            v-if="avatarImage"
+            :size="description ? 'extrasmall' : 'extraextrasmall'"
+            :image="avatarImage"
+            :rounded="true"
+          ></c-avatar>
+          <c-avatar
+            class="mr-3"
+            :size="description ? 'extrasmall' : 'extraextrasmall'"
+            :nameInitials="avatarNameInitials"
+            :rounded="true"
+            v-else
+          ></c-avatar>
+        </template>
+        <div class="flex flex-col">
+          <label
+            :class="[
+              'cursor-pointer text-gray-900',
+              isDisabled ? 'opacity-50' : '',
+              tag ? 'flex' : '',
+              isNormalFont ? '' : 'font-medium',
+              customLabelClass,
+            ]"
+            >{{ label }}
+            <c-tag
+              v-if="tag && Object.keys(tag).length !== 0"
+              :label="tag.label"
+              :color="tag.color"
+              :class="tag.class"
+              class="ml-2"
+            />
+          </label>
+          <p
+            v-if="description"
+            :class="`mt-0.5 cursor-pointer text-gray-500 ${
+              isDisabled ? 'opacity-50' : ''
+            }`"
+          >
+            {{ description }}
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import CTag from "../CTag/CTag.vue";
+import CAvatar from "../CAvatar/CAvatar.vue";
+import { COLOR_CONFIG } from "../../colorConfig";
+
+export default {
+  components: { CTag, CAvatar },
+  name: "CCheckbox",
+  props: {
+    label: { type: String },
+    id: { type: String },
+    customLabelClass: {
+      type: String,
+    },
+    description: { type: String },
+    value: [Boolean, Number],
+    isDisabled: {
+      type: Boolean,
+    },
+    indeterminate: {
+      type: Boolean,
+    },
+    tag: {
+      type: Object,
+    },
+    permanentIndeterminate: {
+      type: Boolean,
+    },
+    setMarginLeft: {
+      type: String,
+      default: "ml-3",
+    },
+    unCheckable: {
+      type: Boolean,
+    },
+    checkable: {
+      type: Boolean,
+    },
+    isNormalFont: {
+      type: Boolean,
+      default: false,
+    },
+    // validation is passed or not
+    isValidate: { type: Boolean, default: true },
+    preferredColor: { type: String, default: "indigo" },
+    showAvatar: { type: Boolean, default: false },
+    avatarImage: { type: String, default: null },
+    avatarNameInitials: { type: String, default: null },
+  },
+  data() {
+    return {
+      checkedValue: this.value,
+    };
+  },
+  computed: {
+    colorStyles() {
+      const colors = COLOR_CONFIG[this.preferredColor] || COLOR_CONFIG.indigo;
+      return {
+        "--checkbox-enabled-color": colors.shade600,
+        "--checkbox-focus-color": colors.shade500,
+      };
+    },
+  },
+  methods: {
+    changeValue(e) {
+      let selectedValue = 0;
+      if (this.permanentIndeterminate) {
+        // can never be in any state other than dash
+        e.preventDefault();
+        if (this.checkedValue == 1) {
+          selectedValue = 0;
+        } else if (this.checkedValue == 0) {
+          selectedValue = 1;
+        } else {
+          selectedValue = 2;
+        }
+      } else if (this.unCheckable) {
+        // can never be in unchecked state
+        if (this.checkedValue == 2) {
+          selectedValue = 1;
+        } else {
+          selectedValue = 2;
+        }
+      } else if (this.checkable) {
+        // can never be in a checked state
+        if (this.checkedValue == 2) {
+          selectedValue = 0;
+        } else {
+          selectedValue = 2;
+        }
+      } else {
+        // normal check/uncheck
+        if (this.checkedValue == 1) {
+          selectedValue = 0;
+        } else {
+          selectedValue = 1;
+        }
+      }
+      this.$emit("onChange", selectedValue);
+    },
+  },
+  watch: {
+    value() {
+      this.checkedValue = this.value;
+    },
+  },
+  mounted() {
+    this.checkedValue = this.value;
+  },
+};
+</script>
+<style scoped>
+.error {
+  border-color: #dc2626 !important;
+}
+
+.checkbox-state {
+  height: 1rem;
+  width: 1rem;
+}
+
+.checkbox-state:checked {
+  background-color: var(--checkbox-enabled-color) !important;
+}
+
+.checkbox-state:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px white, 0 0 0 4px var(--checkbox-focus-color) !important;
+}
+</style>

package/src/components/CCheckbox/index.js

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

package/src/components/CCircularButton/CCircularButton.vue

@@ -1,57 +1,57 @@
-<template>
-  <button
-    type="button"
-    :disabled="disabled"
-    class="rounded-full p-1 text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:opacity-50"
-    :class="classes"
-    :id="id"
-    @click="$emit('action')"
-  >
-    <c-icon
-      :type="icon.type"
-      :name="icon.name"
-      :viewBox="icon.viewBox"
-      :class="icon.class"
-      cursorType="cursor-pointer"
-    />
-  </button>
-</template>
-
-<script>
-import CIcon from "../CIcon/CIcon.vue";
-export default {
-  components: { CIcon },
-  name: "CCircularButton",
-  props: {
-    id: {
-      type: String,
-    },
-    type: {
-      type: String,
-      default: "black",
-    },
-    icon: {
-      type: Object,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  computed: {
-    classes() {
-      const classNames = {
-        "text-white hover:bg-indigo-800 bg-indigo-700 focus:ring-indigo-600":
-          this.type == "primary",
-        "text-white hover:bg-green-800 bg-green-700 focus:ring-green-600 ":
-          this.type == "success",
-        "text-white bg-gray-900 hover:bg-gray-800 focus:ring-gray-600 ":
-          this.type == "black",
-        "text-white hover:bg-red-800 bg-red-700 focus:ring-red-600 ":
-          this.type == "danger",
-      };
-      return classNames;
-    },
-  },
-};
-</script>
+<template>
+  <button
+    type="button"
+    :disabled="disabled"
+    class="rounded-full p-1 text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:opacity-50"
+    :class="classes"
+    :id="id"
+    @click="$emit('action')"
+  >
+    <c-icon
+      :type="icon.type"
+      :name="icon.name"
+      :viewBox="icon.viewBox"
+      :class="icon.class"
+      cursorType="cursor-pointer"
+    />
+  </button>
+</template>
+
+<script>
+import CIcon from "../CIcon/CIcon.vue";
+export default {
+  components: { CIcon },
+  name: "CCircularButton",
+  props: {
+    id: {
+      type: String,
+    },
+    type: {
+      type: String,
+      default: "black",
+    },
+    icon: {
+      type: Object,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    classes() {
+      const classNames = {
+        "text-white hover:bg-indigo-800 bg-indigo-700 focus:ring-indigo-600":
+          this.type == "primary",
+        "text-white hover:bg-green-800 bg-green-700 focus:ring-green-600 ":
+          this.type == "success",
+        "text-white bg-gray-900 hover:bg-gray-800 focus:ring-gray-600 ":
+          this.type == "black",
+        "text-white hover:bg-red-800 bg-red-700 focus:ring-red-600 ":
+          this.type == "danger",
+      };
+      return classNames;
+    },
+  },
+};
+</script>

package/src/components/CCircularButton/index.js

@@ -1,2 +1,2 @@
-import CCircularButton from "./CCircularButton.vue";
-export default CCircularButton;
+import CCircularButton from "./CCircularButton.vue";
+export default CCircularButton;