classcard-ui 0.2.344 → 0.2.347

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "classcard-ui",
-  "version": "0.2.344",
+  "version": "0.2.347",
   "main": "dist/classcard-ui.common.js",
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/components/CSwitch/CSwitch.vue

@@ -4,15 +4,20 @@
     <div
       v-if="size === 'small'"
       :class="label == '' ? 'items-center' : 'items-start'"
-      class="flex justify-between cursor-pointer"
+      class="flex cursor-pointer justify-between"
     >
-      <span class="flex-grow flex flex-col" id="smallleft" v-if="direction == 'left'" @click="switchValue">
+      <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="flex-shrink-0 group relative rounded-full inline-flex items-center justify-center h-5 w-10 cursor-pointer focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50"
+        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"
@@ -20,17 +25,17 @@
         <span class="sr-only">Use setting</span>
         <span
           aria-hidden="true"
-          class="pointer-events-none absolute bg-white w-full h-full rounded-md"
+          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 h-4 w-9 mx-auto rounded-full transition-colors ease-in-out duration-200"
+          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 border border-gray-200 rounded-full bg-white transform ring-0 transition-transform ease-in-out duration-200"
+          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">
@@ -39,8 +44,17 @@
       </span>
     </div>
     <!-- large toggle -->
-    <div v-else :class="label == '' ? 'items-center' : 'items-start'" class="flex justify-between cursor-pointer">
-      <span class="flex-grow flex flex-col" id="toggleLabel" v-if="direction == 'left'" @click="switchValue">
+    <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>
@@ -49,17 +63,17 @@
         aria-pressed="false"
         :class="{ 'bg-indigo-600': isToggle == 1, 'bg-gray-200': isToggle == 0 }"
         @click="switchValue"
-        class="relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50"
+        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 rounded-full bg-white transform ring-0 transition ease-in-out duration-200"
+          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" id="toggleLabel" v-if="direction == 'right'" disabled:opacity-50>
+      <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>
@@ -91,6 +105,10 @@ export default {
     direction: {
       type: String,
     },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {