classcard-ui 0.2.445 → 0.2.448

package/src/components/CButtonWithDropdown/CButtonWithDropdown.vue

@@ -1,168 +1,168 @@
-<template>
-  <div>
-    <span class="relative inline-flex shadow-sm rounded-md">
-      <button
-        :class="classes"
-        :type="type"
-        @click="handleButtonClick"
-        class="
-          relative
-          inline-flex
-          items-center
-          px-4
-          py-2
-          rounded-l-md
-          text-sm
-          font-medium
-          focus:z-10
-          focus:outline-none
-          focus:ring-1
-        "
-      >
-        {{ selectedValue ? selectedValue : label }}
-      </button>
-      <span class="-ml-px relative block">
-        <button
-          @click="toggleDropdown = !toggleDropdown"
-          @blur="close()"
-          :type="type"
-          :class="classes"
-          class="
-            relative
-            inline-flex
-            items-center
-            px-2
-            py-2
-            rounded-r-md
-            text-sm
-            font-medium
-            t
-            focus:z-10
-            focus:outline-none
-            focus:ring-1
-          "
-        >
-          <span class="sr-only">Open options</span>
-          <c-icon name="chevron-down" type="solid" class="h-5 w-5"></c-icon>
-        </button>
-        <div
-          v-if="toggleDropdown"
-          :class="dropdownPositionClass"
-          class="
-            origin-top-right
-            absolute
-            right-0
-            z-10
-            mt-2
-            w-56
-            rounded-md
-            shadow-lg
-            bg-white
-            ring-1 ring-gray-900 ring-opacity-5
-          "
-        >
-          <div
-            class="py-1"
-            role="menu"
-            aria-orientation="vertical"
-            aria-labelledby="option-menu"
-          >
-            <li
-              v-for="item in items"
-              v-bind:key="item.items"
-              @mousedown="selectOption($event, item.value)"
-              class="
-                block
-                px-4
-                py-2
-                text-sm text-left text-gray-700
-                hover:bg-gray-100
-                hover:text-gray-900
-                cursor-pointer
-              "
-              role="menuitem"
-            >
-              {{ item.text }}
-            </li>
-          </div>
-        </div>
-      </span>
-    </span>
-  </div>
-</template>
-
-<script>
-import CIcon from "../CIcon/CIcon.vue";
-export default {
-  name: "CButtonWithDropdown",
-  components: { CIcon },
-  props: {
-    label: {
-      type: String,
-      required: true,
-    },
-    type: {
-      type: String,
-      default: "secondary",
-    },
-    value: {
-      type: String,
-    },
-    items: {
-      type: Array,
-      required: true,
-    },
-    dropdownPositionClass: {
-      type: String,
-    },
-  },
-  data() {
-    return {
-      toggleDropdown: false,
-      isSelected: false,
-      selectedValue: this.value,
-    };
-  },
-
-  computed: {
-    classes() {
-      return {
-        "border text-white hover:bg-indigo-800 bg-indigo-700 focus:ring-indigo-600":
-          this.type == "primary",
-        "border text-gray-700 border-gray-300 hover:bg-gray-50 focus:ring-indigo-600":
-          this.type == "secondary",
-        "border text-white hover:bg-green-800 bg-green-700 focus:ring-green-600":
-          this.type == "success",
-        "border text-white hover:bg-red-800 bg-red-700 focus:ring-red-600":
-          this.type == "danger",
-        "border border-green-800 bg-green-100 text-green-800 hover:bg-green-200 focus:ring-green-200":
-          this.type == "light-green",
-        "border border-red-800 bg-red-100 text-red-800 hover:bg-red-200 focus:ring-red-200":
-          this.type == "light-red",
-        "cursor-default pointer-events-none": this.isLoading,
-      };
-    },
-  },
-  methods: {
-    selectOption(event, value) {
-      this.selectedValue = event.target.innerText;
-      this.$emit("onSelectOption", value);
-      this.toggleDropdown = false;
-      this.isSelected = true;
-    },
-    close() {
-      this.toggleDropdown = false;
-    },
-    handleButtonClick() {
-      this.$emit("action", this.selectedValue);
-    },
-  },
-  watch: {
-    value() {
-      this.selectedValue = this.value;
-    },
-  },
-};
-</script>
-
-<style></style>
+<template>
+  <div>
+    <span class="relative inline-flex shadow-sm rounded-md">
+      <button
+        :class="classes"
+        :type="type"
+        @click="handleButtonClick"
+        class="
+          relative
+          inline-flex
+          items-center
+          px-4
+          py-2
+          rounded-l-md
+          text-sm
+          font-medium
+          focus:z-10
+          focus:outline-none
+          focus:ring-1
+        "
+      >
+        {{ selectedValue ? selectedValue : label }}
+      </button>
+      <span class="-ml-px relative block">
+        <button
+          @click="toggleDropdown = !toggleDropdown"
+          @blur="close()"
+          :type="type"
+          :class="classes"
+          class="
+            relative
+            inline-flex
+            items-center
+            px-2
+            py-2
+            rounded-r-md
+            text-sm
+            font-medium
+            t
+            focus:z-10
+            focus:outline-none
+            focus:ring-1
+          "
+        >
+          <span class="sr-only">Open options</span>
+          <c-icon name="chevron-down" type="solid" class="h-5 w-5"></c-icon>
+        </button>
+        <div
+          v-if="toggleDropdown"
+          :class="dropdownPositionClass"
+          class="
+            origin-top-right
+            absolute
+            right-0
+            z-10
+            mt-2
+            w-56
+            rounded-md
+            shadow-lg
+            bg-white
+            ring-1 ring-gray-900 ring-opacity-5
+          "
+        >
+          <div
+            class="py-1"
+            role="menu"
+            aria-orientation="vertical"
+            aria-labelledby="option-menu"
+          >
+            <li
+              v-for="item in items"
+              v-bind:key="item.items"
+              @mousedown="selectOption($event, item.value)"
+              class="
+                block
+                px-4
+                py-2
+                text-sm text-left text-gray-700
+                hover:bg-gray-100
+                hover:text-gray-900
+                cursor-pointer
+              "
+              role="menuitem"
+            >
+              {{ item.text }}
+            </li>
+          </div>
+        </div>
+      </span>
+    </span>
+  </div>
+</template>
+
+<script>
+import CIcon from "../CIcon/CIcon.vue";
+export default {
+  name: "CButtonWithDropdown",
+  components: { CIcon },
+  props: {
+    label: {
+      type: String,
+      required: true,
+    },
+    type: {
+      type: String,
+      default: "secondary",
+    },
+    value: {
+      type: String,
+    },
+    items: {
+      type: Array,
+      required: true,
+    },
+    dropdownPositionClass: {
+      type: String,
+    },
+  },
+  data() {
+    return {
+      toggleDropdown: false,
+      isSelected: false,
+      selectedValue: this.value,
+    };
+  },
+
+  computed: {
+    classes() {
+      return {
+        "border text-white hover:bg-indigo-800 bg-indigo-700 focus:ring-indigo-600":
+          this.type == "primary",
+        "border text-gray-700 border-gray-300 hover:bg-gray-50 focus:ring-indigo-600":
+          this.type == "secondary",
+        "border text-white hover:bg-green-800 bg-green-700 focus:ring-green-600":
+          this.type == "success",
+        "border text-white hover:bg-red-800 bg-red-700 focus:ring-red-600":
+          this.type == "danger",
+        "border border-green-800 bg-green-100 text-green-800 hover:bg-green-200 focus:ring-green-200":
+          this.type == "light-green",
+        "border border-red-800 bg-red-100 text-red-800 hover:bg-red-200 focus:ring-red-200":
+          this.type == "light-red",
+        "cursor-default pointer-events-none": this.isLoading,
+      };
+    },
+  },
+  methods: {
+    selectOption(event, value) {
+      this.selectedValue = event.target.innerText;
+      this.$emit("onSelectOption", value);
+      this.toggleDropdown = false;
+      this.isSelected = true;
+    },
+    close() {
+      this.toggleDropdown = false;
+    },
+    handleButtonClick() {
+      this.$emit("action", this.selectedValue);
+    },
+  },
+  watch: {
+    value() {
+      this.selectedValue = this.value;
+    },
+  },
+};
+</script>
+
+<style></style>

package/src/components/CButtonWithDropdown/index.js

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

package/src/components/CCard/CCard.vue

@@ -1,49 +1,49 @@
-<template>
-  <div
-    class="relative rounded-lg border border-gray-300 bg-white px-6 py-5 shadow-sm flex items-center space-x-3 hover:border-gray-400 focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500"
-  >
-    <div class="flex-shrink-0 p-2 rounded-md bg-gray-100">
-      <c-avatar
-        :image="image.image"
-        :rounded="image.rounded"
-        :size="image.size"
-        imageClasses="object-contain"
-      ></c-avatar>
-    </div>
-    <div class="flex-1 min-w-0">
-      <a href="#" class="focus:outline-none">
-        <span class="absolute inset-0" aria-hidden="true"></span>
-        <div class="flex">
-          <p class="text-sm text-gray-900">
-            {{ name }}
-          </p>
-          <slot></slot>
-        </div>
-        <p class="text-sm text-gray-500 truncate">
-          {{ 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,
-    },
-  },
-};
-</script>
-
-<style></style>
+<template>
+  <div
+    class="relative rounded-lg border border-gray-300 bg-white px-6 py-5 shadow-sm flex items-center space-x-3 hover:border-gray-400 focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500"
+  >
+    <div class="flex-shrink-0 p-2 rounded-md bg-gray-100">
+      <c-avatar
+        :image="image.image"
+        :rounded="image.rounded"
+        :size="image.size"
+        imageClasses="object-contain"
+      ></c-avatar>
+    </div>
+    <div class="flex-1 min-w-0">
+      <a href="#" class="focus:outline-none">
+        <span class="absolute inset-0" aria-hidden="true"></span>
+        <div class="flex">
+          <p class="text-sm text-gray-900">
+            {{ name }}
+          </p>
+          <slot></slot>
+        </div>
+        <p class="text-sm text-gray-500 truncate">
+          {{ 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,
+    },
+  },
+};
+</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,70 +1,70 @@
-<template>
-  <div>
-    <div class="relative flex items-start">
-      <div class="flex h-5 items-center">
-        <input
-          type="checkbox"
-          v-model="checkedValue"
-          class="h-4 w-4 cursor-pointer rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 disabled:opacity-50"
-          @click="changeValue"
-          :disabled="isDisabled"
-        />
-      </div>
-      <div
-        class="ml-3 cursor-pointer text-sm"
-        :class="isDisabled ? 'pointer-events-none' : ''"
-        @click="changeValue"
-      >
-        <label
-          :class="`cursor-pointer font-medium text-gray-900 ${
-            isDisabled ? 'opacity-50' : ''
-          }`"
-          >{{ label }}</label
-        >
-        <p
-          :class="`mt-0.5 cursor-pointer text-gray-500 ${
-            isDisabled ? 'opacity-50' : ''
-          }`"
-        >
-          {{ description }}
-        </p>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  name: "CCheckbox",
-  props: {
-    label: { type: String },
-    description: { type: String },
-    value: [Boolean, Number],
-    isDisabled: {
-      type: Boolean,
-    },
-  },
-  data() {
-    return {
-      checkedValue: this.value == 0 ? false : true,
-    };
-  },
-  methods: {
-    changeValue() {
-      let selectedValue = 0;
-      if (this.checkedValue) {
-        this.checkedValue = false;
-        selectedValue = 0;
-      } else if (!this.checkedValue) {
-        this.checkedValue = true;
-        selectedValue = 1;
-      }
-      this.$emit("onChange", selectedValue);
-    },
-  },
-  watch: {
-    value() {
-      this.checkedValue = this.value;
-    },
-  },
-};
-</script>
+<template>
+  <div>
+    <div class="relative flex items-start">
+      <div class="flex h-5 items-center">
+        <input
+          type="checkbox"
+          v-model="checkedValue"
+          class="h-4 w-4 cursor-pointer rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 disabled:opacity-50"
+          @click="changeValue"
+          :disabled="isDisabled"
+        />
+      </div>
+      <div
+        class="ml-3 cursor-pointer text-sm"
+        :class="isDisabled ? 'pointer-events-none' : ''"
+        @click="changeValue"
+      >
+        <label
+          :class="`cursor-pointer font-medium text-gray-900 ${
+            isDisabled ? 'opacity-50' : ''
+          }`"
+          >{{ label }}</label
+        >
+        <p
+          :class="`mt-0.5 cursor-pointer text-gray-500 ${
+            isDisabled ? 'opacity-50' : ''
+          }`"
+        >
+          {{ description }}
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "CCheckbox",
+  props: {
+    label: { type: String },
+    description: { type: String },
+    value: [Boolean, Number],
+    isDisabled: {
+      type: Boolean,
+    },
+  },
+  data() {
+    return {
+      checkedValue: this.value == 0 ? false : true,
+    };
+  },
+  methods: {
+    changeValue() {
+      let selectedValue = 0;
+      if (this.checkedValue) {
+        this.checkedValue = false;
+        selectedValue = 0;
+      } else if (!this.checkedValue) {
+        this.checkedValue = true;
+        selectedValue = 1;
+      }
+      this.$emit("onChange", selectedValue);
+    },
+  },
+  watch: {
+    value() {
+      this.checkedValue = this.value;
+    },
+  },
+};
+</script>

package/src/components/CCheckbox/index.js

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