classcard-ui 0.2.855 → 0.2.857

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "classcard-ui",
-  "version": "0.2.855",
+  "version": "0.2.857",
   "main": "dist/classcard-ui.umd.min.js",
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/components/CGroupedSelect/CGroupedSelect.vue

@@ -13,7 +13,7 @@
       <div class="relative">
         <input
           type="text"
-          class="relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-3 pr-10 text-left shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 disabled:pointer-events-none disabled:opacity-50 sm:text-sm"
+          class="focus:outline-none relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-3 pr-10 text-left shadow-sm focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 disabled:pointer-events-none disabled:opacity-50 sm:text-sm"
           aria-haspopup="listbox"
           aria-expanded="true"
           aria-labelledby="listbox-label"
@@ -75,7 +75,7 @@
         To: "opacity-0"
     -->
       <ul
-        class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
+        class="ring-black focus:outline-none absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-opacity-5 sm:text-sm"
         tabindex="-1"
         role="listbox"
         aria-labelledby="listbox-label"
@@ -93,9 +93,7 @@
             class="relative cursor-default select-none bg-gray-100 py-2 pl-3 pr-9 text-left text-xs font-semibold text-gray-900"
             role="option"
           >
-            <span class="block truncate">
-              {{ option.label }}
-            </span>
+            <span class="block truncate"> {{ option.label }} </span>
           </li>
           <li
             class="group relative cursor-default select-none py-2 pl-3 pr-9 text-left text-gray-900 hover:bg-indigo-600 hover:text-white"
@@ -106,6 +104,7 @@
           >
             <!-- Selected: "font-semibold", Not Selected: "font-normal" -->
             <span
+              class="flex"
               :class="[
                 subOption[keyField] === value[keyField]
                   ? 'font-semibold'
@@ -114,6 +113,19 @@
               ]"
             >
               {{ subOption.label }}
+              <div
+                v-if="
+                  subOption.stock_level ||
+                  (subOption.stock_level <= 0 && subOption.stock_level !== null)
+                "
+              >
+                <p
+                  class="ml-2 text-sm"
+                  :class="[quantityLabelColor(subOption)]"
+                >
+                  {{ subOption.stock_level }} units
+                </p>
+              </div>
             </span>
 
             <!--
@@ -197,12 +209,22 @@ export default {
     closeDropDown(hasData) {
       this.inputValue = this.value.label;
       this.showDropDown = false;
-      this.$emit('blur', {hasData: hasData});
+      this.$emit("blur", { hasData: hasData });
     },
     openDropDown() {
       this.showDropDown = true;
       this.emitSearch("");
     },
+    quantityLabelColor(data) {
+      console.log("test");
+      if (data.stock_level <= 0) {
+        return "text-red-300";
+      } else if (data.stock_level < data.alert_level) {
+        return "text-orange-300";
+      } else {
+        return "text-gray-300";
+      }
+    },
   },
   watch: {
     value(newValue) {

package/src/components/CSwitch/CSwitch.vue

@@ -32,7 +32,7 @@
         <span class="sr-only">Use setting</span>
         <span
           aria-hidden="true"
-          class="pointer-events-none absolute h-full w-full rounded-md bg-white"
+          class="pointer-events-none absolute h-full w-full rounded-md"
         ></span>
         <span
           aria-hidden="true"