classcard-ui 0.2.471 → 0.2.472

package/src/components/CPhoneNumber/CPhoneNumber.vue

@@ -1,62 +1,62 @@
-<template>
-  <div>
-    <label class="text-sm text-gray-900">{{ label }}</label>
-    <div class="mt-1 w-full shadow-sm">
-      <vue-tel-input v-bind="bindProps" :autoFormat="false" v-model="value"></vue-tel-input>
-    </div>
-  </div>
-</template>
-<script>
-import { VueTelInput } from "vue-tel-input";
-export default {
-  name: "CPhoneNumber",
-  components: {
-    VueTelInput,
-  },
-  props: {
-    // eslint-disable-next-line vue/require-prop-type-constructor
-    phone: {
-      type: String,
-    },
-    label: String,
-  },
-  data() {
-    return {
-      value: this.phone,
-      bindProps: {
-        placeholder: "Enter phone number",
-        inputClasses: ["px-3", "py-2", "text-sm"],
-        inputId: "c-phone",
-        wrapperClasses: "c-phone-wrapper",
-        showDialCode: false,
-        enabledCountryCode: false,
-        mode: "international",
-        validCharactersOnly: true,
-      },
-    };
-  },
-  watch: {
-    value(newVal) {
-      this.$emit("onChange", newVal);
-    },
-  },
-};
-</script>
-<style>
-.vue-tel-input {
-  border: 1px solid #d1d5db !important;
-  @apply text-gray-900;
-}
-
-#c-phone {
-  border-top-right-radius: 0.375rem;
-  border-bottom-right-radius: 0.375rem;
-}
-.c-phone-wrapper {
-  border-radius: 0.375rem !important;
-}
-.vti__dropdown:hover {
-  border-top-left-radius: 0.375rem;
-  border-bottom-left-radius: 0.375rem;
-}
-</style>
+<template>
+  <div>
+    <label class="text-sm text-gray-900">{{ label }}</label>
+    <div class="mt-1 w-full shadow-sm">
+      <vue-tel-input v-bind="bindProps" :autoFormat="false" v-model="value"></vue-tel-input>
+    </div>
+  </div>
+</template>
+<script>
+import { VueTelInput } from "vue-tel-input";
+export default {
+  name: "CPhoneNumber",
+  components: {
+    VueTelInput,
+  },
+  props: {
+    // eslint-disable-next-line vue/require-prop-type-constructor
+    phone: {
+      type: String,
+    },
+    label: String,
+  },
+  data() {
+    return {
+      value: this.phone,
+      bindProps: {
+        placeholder: "Enter phone number",
+        inputClasses: ["px-3", "py-2", "text-sm"],
+        inputId: "c-phone",
+        wrapperClasses: "c-phone-wrapper",
+        showDialCode: false,
+        enabledCountryCode: false,
+        mode: "international",
+        validCharactersOnly: true,
+      },
+    };
+  },
+  watch: {
+    value(newVal) {
+      this.$emit("onChange", newVal);
+    },
+  },
+};
+</script>
+<style>
+.vue-tel-input {
+  border: 1px solid #d1d5db !important;
+  @apply text-gray-900;
+}
+
+#c-phone {
+  border-top-right-radius: 0.375rem;
+  border-bottom-right-radius: 0.375rem;
+}
+.c-phone-wrapper {
+  border-radius: 0.375rem !important;
+}
+.vti__dropdown:hover {
+  border-top-left-radius: 0.375rem;
+  border-bottom-left-radius: 0.375rem;
+}
+</style>

package/src/components/CPhoneNumber/index.js

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

package/src/components/CRadio/CRadio.vue

@@ -1,70 +1,70 @@
-<template>
-  <div>
-    <div class="bg-white rounded-md -space-y-px">
-      <div
-        class="relative rounded-tl-md rounded-tr-md pb-5"
-        v-for="item in items"
-        v-bind:key="item.label"
-      >
-        <div class="flex items-center h-5">
-          <input
-            type="radio"
-            :value="item.value"
-            :name="name"
-            v-model="selectedItem"
-            @click="onChange(item.value)"
-            class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 cursor-pointer border-gray-300 disabled:opacity-50"
-            :disabled="isDisabled"
-          />
-          <label class="ml-3 flex flex-col cursor-pointer" @click="onChange(item.value)">
-            <span class="block text-sm font-medium">
-              {{ item.label }}
-            </span>
-            <span class="block text-sm text-gray-500">
-              {{ item.description }}
-            </span> 
-          </label>
-        </div>
-        <slot v-if="item.value === selectedItem" :name="item.value" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "CRadio",
-  props: {
-    items: {
-      type: Array,
-      required: true,
-    },
-    selectedOption: {
-      type: String,
-    },
-    isDisabled: {
-      type: Boolean,
-    },
-    name: {
-      type: String,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      selectedItem: this.selectedOption,
-    };
-  },
-  methods: {
-    onChange(selectedValue) {
-      this.$emit("onChange", selectedValue);
-      this.selectedItem = selectedValue;
-    },
-  },
-  watch: {
-    selectedOption() {
-      this.selectedItem = this.selectedOption;
-    },
-  },
-};
-</script>
+<template>
+  <div>
+    <div class="bg-white rounded-md -space-y-px">
+      <div
+        class="relative rounded-tl-md rounded-tr-md pb-5"
+        v-for="item in items"
+        v-bind:key="item.label"
+      >
+        <div class="flex items-center h-5">
+          <input
+            type="radio"
+            :value="item.value"
+            :name="name"
+            v-model="selectedItem"
+            @click="onChange(item.value)"
+            class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 cursor-pointer border-gray-300 disabled:opacity-50"
+            :disabled="isDisabled"
+          />
+          <label class="ml-3 flex flex-col cursor-pointer" @click="onChange(item.value)">
+            <span class="block text-sm font-medium">
+              {{ item.label }}
+            </span>
+            <span class="block text-sm text-gray-500">
+              {{ item.description }}
+            </span> 
+          </label>
+        </div>
+        <slot v-if="item.value === selectedItem" :name="item.value" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CRadio",
+  props: {
+    items: {
+      type: Array,
+      required: true,
+    },
+    selectedOption: {
+      type: String,
+    },
+    isDisabled: {
+      type: Boolean,
+    },
+    name: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      selectedItem: this.selectedOption,
+    };
+  },
+  methods: {
+    onChange(selectedValue) {
+      this.$emit("onChange", selectedValue);
+      this.selectedItem = selectedValue;
+    },
+  },
+  watch: {
+    selectedOption() {
+      this.selectedItem = this.selectedOption;
+    },
+  },
+};
+</script>

package/src/components/CRadio/index.js

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

package/src/components/CRangeSlider/CRangeSlider.vue

@@ -1,55 +1,55 @@
-<template>
-  <div class="flex  w-64 m-auto items-center h-32 justify-center">
-    <div class="py-1 relative min-w-full">
-      <div class="h-2 bg-gray-200 rounded-full">
-        <div
-          class="absolute h-2 rounded-full bg-teal-600 w-0"
-          style="width: 58.5714%;"
-        ></div>
-        <div
-          class="absolute h-4 flex items-center justify-center w-4 rounded-full bg-white shadow border border-gray-300 -ml-2 top-0 cursor-pointer"
-          unselectable="on"
-          onselectstart="return false;"
-          style="left: 58.5714%;"
-        >
-          <div class="relative -mt-2 w-1">
-            <div
-              class="absolute z-40 opacity-100 bottom-100 mb-2 left-0 min-w-full"
-              style="margin-left: -20.5px;"
-            >
-              <div class="relative shadow-md">
-                <div
-                  class="bg-black -mt-8 text-white truncate text-xs rounded py-1 px-4"
-                >
-                  92
-                </div>
-                <svg
-                  class="absolute text-black w-full h-2 left-0 top-100"
-                  x="0px"
-                  y="0px"
-                  viewBox="0 0 255 255"
-                  xml:space="preserve"
-                >
-                  <polygon
-                    class="fill-current"
-                    points="0,0 127.5,127.5 255,0"
-                  ></polygon>
-                </svg>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="absolute text-gray-800 -ml-1 bottom-0 left-0 -mb-6">10</div>
-        <div class="absolute text-gray-800 -mr-1 bottom-0 right-0 -mb-6">
-          150
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  name: "CRangeSlider",
-  props: {},
-};
-</script>
+<template>
+  <div class="flex  w-64 m-auto items-center h-32 justify-center">
+    <div class="py-1 relative min-w-full">
+      <div class="h-2 bg-gray-200 rounded-full">
+        <div
+          class="absolute h-2 rounded-full bg-teal-600 w-0"
+          style="width: 58.5714%;"
+        ></div>
+        <div
+          class="absolute h-4 flex items-center justify-center w-4 rounded-full bg-white shadow border border-gray-300 -ml-2 top-0 cursor-pointer"
+          unselectable="on"
+          onselectstart="return false;"
+          style="left: 58.5714%;"
+        >
+          <div class="relative -mt-2 w-1">
+            <div
+              class="absolute z-40 opacity-100 bottom-100 mb-2 left-0 min-w-full"
+              style="margin-left: -20.5px;"
+            >
+              <div class="relative shadow-md">
+                <div
+                  class="bg-black -mt-8 text-white truncate text-xs rounded py-1 px-4"
+                >
+                  92
+                </div>
+                <svg
+                  class="absolute text-black w-full h-2 left-0 top-100"
+                  x="0px"
+                  y="0px"
+                  viewBox="0 0 255 255"
+                  xml:space="preserve"
+                >
+                  <polygon
+                    class="fill-current"
+                    points="0,0 127.5,127.5 255,0"
+                  ></polygon>
+                </svg>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="absolute text-gray-800 -ml-1 bottom-0 left-0 -mb-6">10</div>
+        <div class="absolute text-gray-800 -mr-1 bottom-0 right-0 -mb-6">
+          150
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "CRangeSlider",
+  props: {},
+};
+</script>

package/src/components/CRangeSlider/index.js

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

package/src/components/CReorderableStackedList/CReorderableStackedList.vue

@@ -1,89 +1,89 @@
-<template>
-  <div>
-    <ul>
-      <li
-        v-for="items in listItems"
-        v-bind:key="items.size"
-        class="flex items-center py-3"
-        :class="{ 'cursor-pointer': items.collapse }"
-        v-on="items.collapse ? { click: () => collapseList() } : null"
-      >
-        <c-icon
-          v-if="items.collapse"
-          :name="showSection ? 'chevron-down' : 'chevron-right'"
-          type="solid"
-          class="mt-3 mr-3 h-5 w-5 flex-none text-gray-900"
-        ></c-icon>
-        <c-icon
-          v-if="items.reorder"
-          name="menu-solid"
-          type="solid"
-          class="handle mr-3 h-5 w-5 flex-none text-gray-500"
-        ></c-icon>
-        <c-avatar
-          :size="items.size"
-          :rounded="items.rounded"
-          :image="items.image"
-          :imageClasses="items.imageClasses"
-          class="flex-none"
-        ></c-avatar>
-        <div class="flex min-w-0 flex-1 items-center justify-between">
-          <div class="ml-3 min-w-0 flex-1">
-            <div>
-              <div class="-m-1 flex flex-wrap items-center">
-                <p class="m-1 text-sm font-medium text-gray-900">
-                  {{ items.heading }}
-                </p>
-                <c-tag v-if="items.tag" label="Active" class="m-1"></c-tag>
-                <c-tag v-if="items.tag" label="Inactive" class="m-1"></c-tag>
-                <c-tag v-if="items.tag" label="Tag 1" class="m-1"></c-tag>
-                <c-tag v-if="items.tag" label="Tag 2" class="m-1"></c-tag>
-              </div>
-              <p class="mt-1 text-sm text-gray-500">{{ items.description }}</p>
-              <div v-if="showSection" class="mt-3">
-                <slot></slot>
-              </div>
-            </div>
-          </div>
-          <div class="flex flex-none items-center">
-            <slot name="icons"></slot>
-            <button
-              type="button"
-              v-if="items.listIcon"
-              @click="$emit('remove')"
-              class="focus:outline-none"
-            >
-              <!-- slot for delete icons -->
-              <slot name="removeIcons"></slot>
-            </button>
-          </div>
-        </div>
-      </li>
-    </ul>
-  </div>
-</template>
-<script>
-import CAvatar from "../CAvatar/CAvatar.vue";
-import CTag from "../CTag/CTag.vue";
-import CIcon from "../CIcon/CIcon.vue";
-export default {
-  name: "CReorderableStackedList",
-  components: { CAvatar, CTag, CIcon },
-  props: {
-    listItems: {
-      type: Array,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      showSection: false,
-    };
-  },
-  methods: {
-    collapseList() {
-      this.showSection = !this.showSection;
-    },
-  },
-};
-</script>
+<template>
+  <div>
+    <ul>
+      <li
+        v-for="items in listItems"
+        v-bind:key="items.size"
+        class="flex items-center py-3"
+        :class="{ 'cursor-pointer': items.collapse }"
+        v-on="items.collapse ? { click: () => collapseList() } : null"
+      >
+        <c-icon
+          v-if="items.collapse"
+          :name="showSection ? 'chevron-down' : 'chevron-right'"
+          type="solid"
+          class="mt-3 mr-3 h-5 w-5 flex-none text-gray-900"
+        ></c-icon>
+        <c-icon
+          v-if="items.reorder"
+          name="menu-solid"
+          type="solid"
+          class="handle mr-3 h-5 w-5 flex-none text-gray-500"
+        ></c-icon>
+        <c-avatar
+          :size="items.size"
+          :rounded="items.rounded"
+          :image="items.image"
+          :imageClasses="items.imageClasses"
+          class="flex-none"
+        ></c-avatar>
+        <div class="flex min-w-0 flex-1 items-center justify-between">
+          <div class="ml-3 min-w-0 flex-1">
+            <div>
+              <div class="-m-1 flex flex-wrap items-center">
+                <p class="m-1 text-sm font-medium text-gray-900">
+                  {{ items.heading }}
+                </p>
+                <c-tag v-if="items.tag" label="Active" class="m-1"></c-tag>
+                <c-tag v-if="items.tag" label="Inactive" class="m-1"></c-tag>
+                <c-tag v-if="items.tag" label="Tag 1" class="m-1"></c-tag>
+                <c-tag v-if="items.tag" label="Tag 2" class="m-1"></c-tag>
+              </div>
+              <p class="mt-1 text-sm text-gray-500">{{ items.description }}</p>
+              <div v-if="showSection" class="mt-3">
+                <slot></slot>
+              </div>
+            </div>
+          </div>
+          <div class="flex flex-none items-center">
+            <slot name="icons"></slot>
+            <button
+              type="button"
+              v-if="items.listIcon"
+              @click="$emit('remove')"
+              class="focus:outline-none"
+            >
+              <!-- slot for delete icons -->
+              <slot name="removeIcons"></slot>
+            </button>
+          </div>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+import CAvatar from "../CAvatar/CAvatar.vue";
+import CTag from "../CTag/CTag.vue";
+import CIcon from "../CIcon/CIcon.vue";
+export default {
+  name: "CReorderableStackedList",
+  components: { CAvatar, CTag, CIcon },
+  props: {
+    listItems: {
+      type: Array,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      showSection: false,
+    };
+  },
+  methods: {
+    collapseList() {
+      this.showSection = !this.showSection;
+    },
+  },
+};
+</script>

package/src/components/CReorderableStackedList/index.js

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