classcard-ui 0.2.473 → 0.2.479

package/src/components/CStackedList/CStackedList.vue

@@ -1,87 +1,87 @@
-<template>
-  <div>
-    <ul>
-      <li
-        v-for="items in listItems"
-        v-bind:key="items.size"
-        class="flex items-center justify-between py-4"
-        :class="{ 'cursor-pointer': items.collapse, 'border-b border-gray-200': divider === true }"
-        v-on="items.collapse ? { click: () => collapseList() } : null"
-      >
-        <div class="flex">
-          <c-icon
-            v-if="items.collapse"
-            :name="showSection ? 'chevron-down' : 'chevron-right'"
-            type="solid"
-            class="mt-3 mr-3 h-5 w-5 shrink-0 text-gray-900"
-          ></c-icon>
-          <c-avatar
-            :size="items.size"
-            :rounded="items.rounded"
-            :image="items.image"
-            class="shrink-0"
-          ></c-avatar>
-          <div class="ml-3">
-            <div class="flex pb-1">
-              <p class="text-sm font-medium text-gray-900">
-                {{ items.heading }}
-              </p>
-              <c-tag
-                v-if="items.tag"
-                :label="items.tagLabel"
-                :color="items.tagColor"
-                class="relative bottom-0.5 ml-2.5"
-              ></c-tag>
-            </div>
-            <p class="text-sm text-gray-500">{{ items.description }}</p>
-            <div v-if="showSection" class="mt-3">
-              <slot></slot>
-            </div>
-          </div>
-        </div>
-        <!-- <c-icon
-          v-if="items.listIcon"
-          name="trash"
-          class="h-5 w-5 text-gray-500 hover:text-red-500 cursor-pointer"
-          type="solid"
-        ></c-icon> -->
-        <button
-          v-if="items.listIcon"
-          type="button"
-          class="focus:outline-none flex h-8 w-8 items-center justify-center rounded-full text-gray-500 hover:bg-red-100 hover:text-red-800 focus:ring-2 focus:ring-red-500"
-        >
-          <c-icon name="trash" type="solid" class="h-5 w-5 hover:text-red-800"></c-icon>
-        </button>
-      </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: "CStackedList",
-  components: { CAvatar, CTag, CIcon },
-  props: {
-    listItems: {
-      type: Array,
-      required: true,
-    },
-    divider: {
-      type: Boolean,
-      default: 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 justify-between py-4"
+        :class="{ 'cursor-pointer': items.collapse, 'border-b border-gray-200': divider === true }"
+        v-on="items.collapse ? { click: () => collapseList() } : null"
+      >
+        <div class="flex">
+          <c-icon
+            v-if="items.collapse"
+            :name="showSection ? 'chevron-down' : 'chevron-right'"
+            type="solid"
+            class="mt-3 mr-3 h-5 w-5 shrink-0 text-gray-900"
+          ></c-icon>
+          <c-avatar
+            :size="items.size"
+            :rounded="items.rounded"
+            :image="items.image"
+            class="shrink-0"
+          ></c-avatar>
+          <div class="ml-3">
+            <div class="flex pb-1">
+              <p class="text-sm font-medium text-gray-900">
+                {{ items.heading }}
+              </p>
+              <c-tag
+                v-if="items.tag"
+                :label="items.tagLabel"
+                :color="items.tagColor"
+                class="relative bottom-0.5 ml-2.5"
+              ></c-tag>
+            </div>
+            <p class="text-sm text-gray-500">{{ items.description }}</p>
+            <div v-if="showSection" class="mt-3">
+              <slot></slot>
+            </div>
+          </div>
+        </div>
+        <!-- <c-icon
+          v-if="items.listIcon"
+          name="trash"
+          class="h-5 w-5 text-gray-500 hover:text-red-500 cursor-pointer"
+          type="solid"
+        ></c-icon> -->
+        <button
+          v-if="items.listIcon"
+          type="button"
+          class="focus:outline-none flex h-8 w-8 items-center justify-center rounded-full text-gray-500 hover:bg-red-100 hover:text-red-800 focus:ring-2 focus:ring-red-500"
+        >
+          <c-icon name="trash" type="solid" class="h-5 w-5 hover:text-red-800"></c-icon>
+        </button>
+      </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: "CStackedList",
+  components: { CAvatar, CTag, CIcon },
+  props: {
+    listItems: {
+      type: Array,
+      required: true,
+    },
+    divider: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      showSection: false,
+    };
+  },
+  methods: {
+    collapseList() {
+      this.showSection = !this.showSection;
+    },
+  },
+};
+</script>

package/src/components/CStackedList/index.js

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

package/src/components/CStats/CStats.vue

@@ -1,88 +1,88 @@
-<template>
-  <!-- <div>
-    <dl class="mt-5 sm:flex sm:flex-col md:flex md:flex-row justify-between">
-      <div
-        :class="index == statsCount.length - 1 ? '' : 'mr-2'"
-        class="bg-white w-full overflow-hidden shadow rounded-lg"
-        v-for="(count, index) in statsCount"
-        v-bind:key="count.number"
-      >
-        <div class="px-4 pt-3 pb-1 flex">
-          <c-icon
-            v-if="count.icon"
-            :name="count.icon.name"
-            :type="count.icon.type"
-            :class="count.icon.class"
-          ></c-icon>
-          <div :class="count.icon ? 'ml-3' : ''">
-            <dt class="text-sm text-gray-500 flex">
-              <span>{{ count.label }}</span>
-              <span class="text-sm text-gray-900 ml-1">{{ count.number }}</span>
-            </dt>
-            <dd class="text-2xl font-semibold text-gray-900">
-              {{ count.totalCount }}
-            </dd>
-          </div>
-        </div>
-        <div class="ml-12 pb-2 flex items-center" v-if="count.tag || count.days">
-          <c-tag v-if="count.tag" :label="count.tag.label" :color="count.tag.color"></c-tag>
-          <label v-if="count.days" class="text-xs text-gray-500 ml-1">{{ count.days }}</label>
-        </div>
-      </div>
-    </dl>
-  </div> -->
-  <!-- This example requires Tailwind CSS v2.0+ -->
-  <div>
-    <dl
-      class="mt-5 grid grid-cols-1 rounded-lg bg-gray-100 overflow-hidden divide-y divide-gray-200 md:grid-cols-3 md:divide-y-0 md:divide-x"
-    >
-      <div class="px-4 py-5 sm:p-6" v-for="count in statsCount" v-bind:key="count.number">
-        <div class="flex">
-          <c-icon
-            v-if="count.icon"
-            :name="count.icon.name"
-            :type="count.icon.type"
-            :class="count.icon.class"
-          ></c-icon>
-          <div :class="count.icon ? 'ml-3' : ''">
-            <dt class="text-sm text-gray-500 flex">
-              <span>{{ count.label }}</span>
-              <span class="text-sm text-gray-900 ml-1">{{ count.number }}</span>
-            </dt>
-            <dd class="text-2xl font-semibold text-gray-900">
-              {{ count.totalCount }}
-            </dd>
-          </div>
-        </div>
-        <div class="ml-8 pb-2 flex items-center" v-if="count.tag || count.days">
-          <c-tag
-            v-if="count.tag"
-            :label="count.tag.label"
-            :color="count.tag.color"
-            :tagClasses="count.tag.class"
-          ></c-tag>
-          <label v-if="count.days" class="text-xs text-gray-500 ml-1">{{ count.days }}</label>
-        </div>
-      </div>
-    </dl>
-  </div>
-</template>
-
-<script>
-import CIcon from "../CIcon/CIcon.vue";
-import CTag from "../CTag/CTag.vue";
-export default {
-  name: "CStats",
-  components: { CIcon, CTag },
-  props: {
-    statsCount: {
-      type: Array,
-    },
-    // icon: {
-    //   type: Object,
-    // },
-  },
-};
-</script>
-
-<style></style>
+<template>
+  <!-- <div>
+    <dl class="mt-5 sm:flex sm:flex-col md:flex md:flex-row justify-between">
+      <div
+        :class="index == statsCount.length - 1 ? '' : 'mr-2'"
+        class="bg-white w-full overflow-hidden shadow rounded-lg"
+        v-for="(count, index) in statsCount"
+        v-bind:key="count.number"
+      >
+        <div class="px-4 pt-3 pb-1 flex">
+          <c-icon
+            v-if="count.icon"
+            :name="count.icon.name"
+            :type="count.icon.type"
+            :class="count.icon.class"
+          ></c-icon>
+          <div :class="count.icon ? 'ml-3' : ''">
+            <dt class="text-sm text-gray-500 flex">
+              <span>{{ count.label }}</span>
+              <span class="text-sm text-gray-900 ml-1">{{ count.number }}</span>
+            </dt>
+            <dd class="text-2xl font-semibold text-gray-900">
+              {{ count.totalCount }}
+            </dd>
+          </div>
+        </div>
+        <div class="ml-12 pb-2 flex items-center" v-if="count.tag || count.days">
+          <c-tag v-if="count.tag" :label="count.tag.label" :color="count.tag.color"></c-tag>
+          <label v-if="count.days" class="text-xs text-gray-500 ml-1">{{ count.days }}</label>
+        </div>
+      </div>
+    </dl>
+  </div> -->
+  <!-- This example requires Tailwind CSS v2.0+ -->
+  <div>
+    <dl
+      class="mt-5 grid grid-cols-1 rounded-lg bg-gray-100 overflow-hidden divide-y divide-gray-200 md:grid-cols-3 md:divide-y-0 md:divide-x"
+    >
+      <div class="px-4 py-5 sm:p-6" v-for="count in statsCount" v-bind:key="count.number">
+        <div class="flex">
+          <c-icon
+            v-if="count.icon"
+            :name="count.icon.name"
+            :type="count.icon.type"
+            :class="count.icon.class"
+          ></c-icon>
+          <div :class="count.icon ? 'ml-3' : ''">
+            <dt class="text-sm text-gray-500 flex">
+              <span>{{ count.label }}</span>
+              <span class="text-sm text-gray-900 ml-1">{{ count.number }}</span>
+            </dt>
+            <dd class="text-2xl font-semibold text-gray-900">
+              {{ count.totalCount }}
+            </dd>
+          </div>
+        </div>
+        <div class="ml-8 pb-2 flex items-center" v-if="count.tag || count.days">
+          <c-tag
+            v-if="count.tag"
+            :label="count.tag.label"
+            :color="count.tag.color"
+            :tagClasses="count.tag.class"
+          ></c-tag>
+          <label v-if="count.days" class="text-xs text-gray-500 ml-1">{{ count.days }}</label>
+        </div>
+      </div>
+    </dl>
+  </div>
+</template>
+
+<script>
+import CIcon from "../CIcon/CIcon.vue";
+import CTag from "../CTag/CTag.vue";
+export default {
+  name: "CStats",
+  components: { CIcon, CTag },
+  props: {
+    statsCount: {
+      type: Array,
+    },
+    // icon: {
+    //   type: Object,
+    // },
+  },
+};
+</script>
+
+<style></style>

package/src/components/CStats/index.js

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

package/src/components/CSwitch/CSwitch.vue

@@ -1,132 +1,132 @@
-<template>
-  <div>
-    <!-- small toggle -->
-    <div
-      v-if="size === 'small'"
-      :class="label == '' ? 'items-center' : 'items-start'"
-      class="flex cursor-pointer justify-between"
-    >
-      <span
-        class="flex flex-grow flex-col"
-        id="smallleft"
-        v-if="direction == 'left'"
-        @click="switchValue"
-      >
-        <span v-if="label" :class="classes" class="text-gray-900">{{ label }}</span>
-        <span v-if="description" class="text-sm text-gray-500">{{ description }}</span>
-      </span>
-      <button
-        type="button"
-        class="group focus:outline-none relative inline-flex h-5 w-10 flex-shrink-0 cursor-pointer items-center justify-center rounded-full focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:opacity-50"
-        aria-pressed="false"
-        @click="switchValue"
-        :disabled="disabled"
-      >
-        <span class="sr-only">Use setting</span>
-        <span
-          aria-hidden="true"
-          class="pointer-events-none absolute h-full w-full rounded-md bg-white"
-        ></span>
-        <span
-          aria-hidden="true"
-          :class="{ 'bg-indigo-600': isToggle, 'bg-gray-200': !isToggle }"
-          class="pointer-events-none absolute mx-auto h-4 w-9 rounded-full transition-colors duration-200 ease-in-out"
-        ></span>
-        <span
-          aria-hidden="true"
-          :class="{ 'translate-x-5': isToggle, 'translate-x-0': !isToggle }"
-          class="pointer-events-none absolute left-0 inline-block h-5 w-5 transform rounded-full border border-gray-200 bg-white ring-0 transition-transform duration-200 ease-in-out"
-        ></span>
-      </button>
-      <span class="flex flex-col" id="toggleLabel" v-if="direction == 'right'" @click="switchValue">
-        <span v-if="label" :class="classes" class="text-gray-900">{{ label }}</span>
-        <span v-if="description" class="text-sm text-gray-500">{{ description }}</span>
-      </span>
-    </div>
-    <!-- large toggle -->
-    <div
-      v-else
-      :class="label == '' ? 'items-center' : 'items-start'"
-      class="flex cursor-pointer justify-between"
-    >
-      <span
-        class="flex flex-grow flex-col"
-        id="toggleLabel"
-        v-if="direction == 'left'"
-        @click="switchValue"
-      >
-        <span v-if="label" :class="classes" class="text-gray-900">{{ label }}</span>
-        <span v-if="description" class="text-sm text-gray-500">{{ description }}</span>
-      </span>
-      <button
-        type="button"
-        aria-pressed="false"
-        :class="{ 'bg-indigo-600': isToggle == 1, 'bg-gray-200': isToggle == 0 }"
-        @click.stop="switchValue"
-        class="focus:outline-none relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:opacity-50"
-        :disabled="disabled"
-      >
-        <span class="sr-only">Use setting</span>
-        <span
-          aria-hidden="true"
-          :class="{ 'translate-x-5': isToggle == 1, 'translate-x-0': isToggle == 0 }"
-          class="inline-block h-5 w-5 transform rounded-full bg-white ring-0 transition duration-200 ease-in-out"
-        ></span>
-      </button>
-      <span class="flex flex-col disabled:opacity-50" id="toggleLabel" v-if="direction == 'right'">
-        <span v-if="label" :class="classes" class="text-gray-900">{{ label }}</span>
-        <span v-if="description" class="text-sm text-gray-500">{{ description }}</span>
-      </span>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "CSwitch",
-  components: {},
-  props: {
-    label: {
-      type: String,
-    },
-    description: {
-      type: String,
-    },
-    returnToggleValue: {
-      type: Function,
-    },
-    classes: {
-      type: String,
-    },
-    value: { type: Number },
-    size: {
-      type: String,
-    },
-    direction: {
-      type: String,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      isToggle: this.value,
-    };
-  },
-  methods: {
-    switchValue() {
-      this.isToggle = this.isToggle === 1 ? 0 : 1;
-      this.$emit("returnToggleValue", this.isToggle);
-    },
-  },
-  watch: {
-    value() {
-      this.isToggle = this.value;
-    },
-  },
-};
-</script>
-
-<style></style>
+<template>
+  <div>
+    <!-- small toggle -->
+    <div
+      v-if="size === 'small'"
+      :class="label == '' ? 'items-center' : 'items-start'"
+      class="flex cursor-pointer justify-between"
+    >
+      <span
+        class="flex flex-grow flex-col"
+        id="smallleft"
+        v-if="direction == 'left'"
+        @click="switchValue"
+      >
+        <span v-if="label" :class="classes" class="text-gray-900">{{ label }}</span>
+        <span v-if="description" class="text-sm text-gray-500">{{ description }}</span>
+      </span>
+      <button
+        type="button"
+        class="group focus:outline-none relative inline-flex h-5 w-10 flex-shrink-0 cursor-pointer items-center justify-center rounded-full focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:opacity-50"
+        aria-pressed="false"
+        @click="switchValue"
+        :disabled="disabled"
+      >
+        <span class="sr-only">Use setting</span>
+        <span
+          aria-hidden="true"
+          class="pointer-events-none absolute h-full w-full rounded-md bg-white"
+        ></span>
+        <span
+          aria-hidden="true"
+          :class="{ 'bg-indigo-600': isToggle, 'bg-gray-200': !isToggle }"
+          class="pointer-events-none absolute mx-auto h-4 w-9 rounded-full transition-colors duration-200 ease-in-out"
+        ></span>
+        <span
+          aria-hidden="true"
+          :class="{ 'translate-x-5': isToggle, 'translate-x-0': !isToggle }"
+          class="pointer-events-none absolute left-0 inline-block h-5 w-5 transform rounded-full border border-gray-200 bg-white ring-0 transition-transform duration-200 ease-in-out"
+        ></span>
+      </button>
+      <span class="flex flex-col" id="toggleLabel" v-if="direction == 'right'" @click="switchValue">
+        <span v-if="label" :class="classes" class="text-gray-900">{{ label }}</span>
+        <span v-if="description" class="text-sm text-gray-500">{{ description }}</span>
+      </span>
+    </div>
+    <!-- large toggle -->
+    <div
+      v-else
+      :class="label == '' ? 'items-center' : 'items-start'"
+      class="flex cursor-pointer justify-between"
+    >
+      <span
+        class="flex flex-grow flex-col"
+        id="toggleLabel"
+        v-if="direction == 'left'"
+        @click="switchValue"
+      >
+        <span v-if="label" :class="classes" class="text-gray-900">{{ label }}</span>
+        <span v-if="description" class="text-sm text-gray-500">{{ description }}</span>
+      </span>
+      <button
+        type="button"
+        aria-pressed="false"
+        :class="{ 'bg-indigo-600': isToggle == 1, 'bg-gray-200': isToggle == 0 }"
+        @click.stop="switchValue"
+        class="focus:outline-none relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:opacity-50"
+        :disabled="disabled"
+      >
+        <span class="sr-only">Use setting</span>
+        <span
+          aria-hidden="true"
+          :class="{ 'translate-x-5': isToggle == 1, 'translate-x-0': isToggle == 0 }"
+          class="inline-block h-5 w-5 transform rounded-full bg-white ring-0 transition duration-200 ease-in-out"
+        ></span>
+      </button>
+      <span class="flex flex-col disabled:opacity-50" id="toggleLabel" v-if="direction == 'right'">
+        <span v-if="label" :class="classes" class="text-gray-900">{{ label }}</span>
+        <span v-if="description" class="text-sm text-gray-500">{{ description }}</span>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CSwitch",
+  components: {},
+  props: {
+    label: {
+      type: String,
+    },
+    description: {
+      type: String,
+    },
+    returnToggleValue: {
+      type: Function,
+    },
+    classes: {
+      type: String,
+    },
+    value: { type: Number },
+    size: {
+      type: String,
+    },
+    direction: {
+      type: String,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      isToggle: this.value,
+    };
+  },
+  methods: {
+    switchValue() {
+      this.isToggle = this.isToggle === 1 ? 0 : 1;
+      this.$emit("returnToggleValue", this.isToggle);
+    },
+  },
+  watch: {
+    value() {
+      this.isToggle = this.value;
+    },
+  },
+};
+</script>
+
+<style></style>

package/src/components/CSwitch/index.js

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