classcard-ui 0.2.1497 → 0.2.1498-beta.0

package/src/components/CSwitch/CSwitch.vue

@@ -1,200 +1,200 @@
-<template>
-  <div>
-    <!-- small toggle -->
-    <div
-      v-if="size === 'small'"
-      :class="[
-        label == '' ? 'items-center' : 'items-start',
-        disabled ? 'pointer-events-none cursor-default' : 'cursor-pointer',
-      ]"
-      class="flex"
-    >
-      <span
-        class="mr-2 flex flex-grow flex-col"
-        :id="id"
-        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 switch-state disabled-pointer-events-none relative inline-flex h-5 w-10 flex-shrink-0 cursor-pointer items-center justify-center rounded-full disabled:cursor-default disabled:opacity-50"
-        aria-pressed="false"
-        :style="colorStyles"
-        @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"
-        ></span>
-        <span
-          aria-hidden="true"
-          class="switch-state pointer-events-none absolute mx-auto h-4 w-9 rounded-full transition-colors duration-200 ease-in-out"
-          :style="colorStyles"
-        ></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="ml-2 flex flex-col"
-        :id="id"
-        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',
-        disabled ? 'pointer-events-none cursor-default' : 'cursor-pointer',
-      ]"
-      class="flex cursor-pointer justify-between"
-    >
-      <span
-        class="mr-2 flex flex-grow flex-col"
-        :id="id"
-        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="{
-          'cursor-default': disabled,
-          'cursor-pointer': !disabled,
-        }"
-        class="switch-state relative inline-flex h-6 w-11 flex-shrink-0 rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out disabled:pointer-events-none disabled:opacity-50"
-        :style="colorStyles"
-        @click.stop="switchValue"
-        :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="ml-2 flex flex-col disabled:opacity-50"
-        :id="id"
-        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>
-import { COLOR_CONFIG } from "../../colorConfig";
-
-export default {
-  name: "CSwitch",
-  components: {},
-  props: {
-    label: {
-      type: String,
-    },
-    id: {
-      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,
-    },
-    preferredColor: {
-      type: String,
-      default: "indigo",
-    },
-  },
-  data() {
-    return {
-      isToggle: this.value,
-    };
-  },
-  methods: {
-    switchValue() {
-      if (!this.disabled) {
-        this.isToggle = this.isToggle === 1 ? 0 : 1;
-        this.$emit("returnToggleValue", this.isToggle);
-      }
-    },
-  },
-  watch: {
-    value() {
-      this.isToggle = this.value;
-    },
-  },
-  computed: {
-    colorStyles() {
-      const colors = COLOR_CONFIG[this.preferredColor] || COLOR_CONFIG.indigo;
-      const isOn = this.isToggle === 1 || this.isToggle === true;
-      return {
-        "--switch-enabled-color": isOn ? colors.shade600 : "#e5e7eb", // gray-200 when off
-        "--switch-focus-color": colors.shade500,
-      };
-    },
-  },
-};
-</script>
-
-<style scoped>
-.switch-state {
-  background-color: var(--switch-enabled-color) !important;
-}
-.switch-state:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px white, 0 0 0 4px var(--switch-focus-color) !important;
-}
-</style>
+<template>
+  <div>
+    <!-- small toggle -->
+    <div
+      v-if="size === 'small'"
+      :class="[
+        label == '' ? 'items-center' : 'items-start',
+        disabled ? 'pointer-events-none cursor-default' : 'cursor-pointer',
+      ]"
+      class="flex"
+    >
+      <span
+        class="mr-2 flex flex-grow flex-col"
+        :id="id"
+        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 switch-state disabled-pointer-events-none relative inline-flex h-5 w-10 flex-shrink-0 cursor-pointer items-center justify-center rounded-full disabled:cursor-default disabled:opacity-50"
+        aria-pressed="false"
+        :style="colorStyles"
+        @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"
+        ></span>
+        <span
+          aria-hidden="true"
+          class="switch-state pointer-events-none absolute mx-auto h-4 w-9 rounded-full transition-colors duration-200 ease-in-out"
+          :style="colorStyles"
+        ></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="ml-2 flex flex-col"
+        :id="id"
+        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',
+        disabled ? 'pointer-events-none cursor-default' : 'cursor-pointer',
+      ]"
+      class="flex cursor-pointer justify-between"
+    >
+      <span
+        class="mr-2 flex flex-grow flex-col"
+        :id="id"
+        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="{
+          'cursor-default': disabled,
+          'cursor-pointer': !disabled,
+        }"
+        class="switch-state relative inline-flex h-6 w-11 flex-shrink-0 rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out disabled:pointer-events-none disabled:opacity-50"
+        :style="colorStyles"
+        @click.stop="switchValue"
+        :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="ml-2 flex flex-col disabled:opacity-50"
+        :id="id"
+        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>
+import { COLOR_CONFIG } from "../../colorConfig";
+
+export default {
+  name: "CSwitch",
+  components: {},
+  props: {
+    label: {
+      type: String,
+    },
+    id: {
+      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,
+    },
+    preferredColor: {
+      type: String,
+      default: "indigo",
+    },
+  },
+  data() {
+    return {
+      isToggle: this.value,
+    };
+  },
+  methods: {
+    switchValue() {
+      if (!this.disabled) {
+        this.isToggle = this.isToggle === 1 ? 0 : 1;
+        this.$emit("returnToggleValue", this.isToggle);
+      }
+    },
+  },
+  watch: {
+    value() {
+      this.isToggle = this.value;
+    },
+  },
+  computed: {
+    colorStyles() {
+      const colors = COLOR_CONFIG[this.preferredColor] || COLOR_CONFIG.indigo;
+      const isOn = this.isToggle === 1 || this.isToggle === true;
+      return {
+        "--switch-enabled-color": isOn ? colors.shade600 : "#e5e7eb", // gray-200 when off
+        "--switch-focus-color": colors.shade500,
+      };
+    },
+  },
+};
+</script>
+
+<style scoped>
+.switch-state {
+  background-color: var(--switch-enabled-color) !important;
+}
+.switch-state:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px white, 0 0 0 4px var(--switch-focus-color) !important;
+}
+</style>

package/src/components/CSwitch/index.js

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

package/src/components/CTabLazy/CTabLazy.vue

@@ -1,83 +1,83 @@
-<template>
-  <div>
-    <div class="border-b border-gray-200">
-      <div class="mt-2 max-w-5xl pr-4">
-        <nav class="-mb-px flex space-x-8" aria-label="Tabs">
-          <button
-            v-for="tab in tabs"
-            :key="tab.key"
-            :class="[
-              activeTab === tab.key
-                ? 'border-b-2 border-indigo-600 text-indigo-700'
-                : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700',
-              'flex whitespace-nowrap py-4 px-1 text-sm font-medium',
-            ]"
-            :id="getActionIDFn(tab.label)"
-            @click="handleChangeTab(tab)"
-            aria-current="page"
-          >
-            {{ tab.label }}
-            <div class="ml-1" v-if="tab.count">
-              <span
-                :class="
-                  activeTab == tab.key
-                    ? 'rounded-full bg-indigo-100 px-2 py-0.5 text-indigo-700'
-                    : 'rounded-full bg-gray-100 px-2 py-0.5 text-gray-700'
-                "
-              >
-                {{ tab.count }}
-              </span>
-            </div>
-          </button>
-        </nav>
-      </div>
-    </div>
-    <div>
-      <component
-        :is="currentTabComponent"
-        :currentTabComponent="currentTabComponent"
-        :activeTab="activeTab"
-        :data="data"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-import { getActionID } from "../../helper";
-
-export default {
-  name: "CTabLazy",
-  props: {
-    tabs: {
-      type: Array,
-      required: true,
-    },
-    currentTabComponent: {
-      type: String,
-      required: true,
-    },
-    id: {
-      type: String,
-    },
-    data: {
-      type: Object,
-      required: false,
-    },
-  },
-  data() {
-    return {
-      activeTab: this.tabs[0].key,
-    };
-  },
-  methods: {
-    getActionIDFn(name) {
-      return getActionID(name, this.id);
-    },
-    handleChangeTab(tab) {
-      this.activeTab = tab.key;
-      this.$emit("switchTab", this.activeTab);
-    },
-  },
-};
-</script>
+<template>
+  <div>
+    <div class="border-b border-gray-200">
+      <div class="mt-2 max-w-5xl pr-4">
+        <nav class="-mb-px flex space-x-8" aria-label="Tabs">
+          <button
+            v-for="tab in tabs"
+            :key="tab.key"
+            :class="[
+              activeTab === tab.key
+                ? 'border-b-2 border-indigo-600 text-indigo-700'
+                : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700',
+              'flex whitespace-nowrap py-4 px-1 text-sm font-medium',
+            ]"
+            :id="getActionIDFn(tab.label)"
+            @click="handleChangeTab(tab)"
+            aria-current="page"
+          >
+            {{ tab.label }}
+            <div class="ml-1" v-if="tab.count">
+              <span
+                :class="
+                  activeTab == tab.key
+                    ? 'rounded-full bg-indigo-100 px-2 py-0.5 text-indigo-700'
+                    : 'rounded-full bg-gray-100 px-2 py-0.5 text-gray-700'
+                "
+              >
+                {{ tab.count }}
+              </span>
+            </div>
+          </button>
+        </nav>
+      </div>
+    </div>
+    <div>
+      <component
+        :is="currentTabComponent"
+        :currentTabComponent="currentTabComponent"
+        :activeTab="activeTab"
+        :data="data"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { getActionID } from "../../helper";
+
+export default {
+  name: "CTabLazy",
+  props: {
+    tabs: {
+      type: Array,
+      required: true,
+    },
+    currentTabComponent: {
+      type: String,
+      required: true,
+    },
+    id: {
+      type: String,
+    },
+    data: {
+      type: Object,
+      required: false,
+    },
+  },
+  data() {
+    return {
+      activeTab: this.tabs[0].key,
+    };
+  },
+  methods: {
+    getActionIDFn(name) {
+      return getActionID(name, this.id);
+    },
+    handleChangeTab(tab) {
+      this.activeTab = tab.key;
+      this.$emit("switchTab", this.activeTab);
+    },
+  },
+};
+</script>

package/src/components/CTabLazy/index.js

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