classcard-ui 0.2.809 → 0.2.810

package/package.json

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

package/src/components/CSelect/CSelect.vue

@@ -11,9 +11,19 @@
       </div>
       <span v-if="hint" class="text-sm text-gray-500">{{ hint }}</span>
     </div>
-
     <div class="relative">
-      <div class="relative" :class="label ? 'mt-1' : ''">
+      <div
+        class="relative flex items-center rounded-md"
+        :class="{ ...classes, [inputClasses]: true }"
+      >
+        <c-icon
+          class="ml-3"
+          v-if="icon && !showImage"
+          :class="icon.class"
+          :name="icon.name"
+          :type="icon.type"
+        >
+        </c-icon>
         <input
           type="text"
           v-model="selectSearch"
@@ -23,8 +33,13 @@
           aria-haspopup="listbox"
           aria-expanded="true"
           aria-labelledby="listbox-label"
-          :class="{ ...classes, [inputClasses]: true }"
-          class="relative w-full cursor-pointer rounded-md py-2 pl-3 pr-10 text-left text-sm focus:outline-none disabled:opacity-50 sm:text-sm"
+          :class="`w-full cursor-pointer rounded-md border-0 border-transparent py-2 pl-2 pr-10 text-left text-sm focus:border-transparent ${
+            type === 'tertiary'
+              ? 'hover:bg-indigo-100'
+              : type === 'gray'
+              ? 'bg-gray-100 hover:bg-gray-200'
+              : ''
+          } focus:ring-0 disabled:opacity-50 sm:text-sm`"
           :disabled="isDisabled"
           autocomplete="off"
         />
@@ -48,14 +63,10 @@
                 :isDynamicallyColored="coloredAvatars"
               ></c-avatar>
             </div>
-            <c-icon
-              v-if="icon && !showImage"
-              :class="icon.class"
-              :name="icon.name"
-              :type="icon.type"
+            <p
+              :class="showImage || icon ? 'ml-7' : ''"
+              class="block truncate text-sm"
             >
-            </c-icon>
-            <p :class="showImage ? 'ml-3' : ''" class="block truncate text-sm">
               {{
                 selectedValue
                   ? selectedValue
@@ -269,11 +280,11 @@ export default {
   computed: {
     classes() {
       return {
-        "text-gray-900 border border-gray-200 hover:bg-gray-200 bg-gray-100 focus:ring-2 focus:border-gray-200 focus:ring-gray-200 focus:ring-offset-2 shadow-sm":
+        "text-gray-900 border border-gray-200 hover:bg-gray-200 bg-gray-100 focus-within:bg-gray-100 focus-within:ring-2 focus-within:border-gray-200 focus-within:ring-gray-200 focus:ring-offset-2 shadow-sm":
           this.type == "gray",
-        "bg-white border border-gray-200 hover:bg-indigo-100 text-indigo-600 hover:text-indigo-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-200":
+        "bg-white border border-gray-200 hover:bg-indigo-100 text-indigo-600 hover:text-indigo-800 focus-within:border-indigo-200 focus-within:ring-2 focus-within:ring-indigo-200":
           this.type == "tertiary",
-        "border border-gray-300 focus:ring-indigo-500 focus:border-indigo-500 bg-white shadow-sm focus:ring-1":
+        "border border-gray-300 bg-white shadow-sm focus-within:border-indigo-500 focus-within:bg-white focus-within:ring-1 focus-within:ring-indigo-500":
           this.type == null,
       };
     },

package/src/stories/CSelect.stories.js

@@ -35,7 +35,10 @@ Default.args = {
   value: null,
   renderOptionName: "code",
   options: [
-    { code: "one", value: "onee2" },
+    {
+      code: "one",
+      value: "onee2",
+    },
     { code: "one1", value: "onee4" },
     { code: "one2", value: "onee1" },
     { code: "one3", value: "onee5" },