fix(kselect): disabled and readonly states [beta] (#707)

* fix(kselect): disabled and readonly states

* fix: add event type

* fix(kinput): no hover or focus color if input readonly

* fix: remove logs

docs/components/select.md

@@ -56,11 +56,13 @@ Enable this prop to overlay the label on the input element's border for `select`
 <KSelect label="Name" placeholder="I'm labelled!" :overlay-label="true" :items="deepClone(defaultItemsUnselect)" />
 <KSelect label="Name" placeholder="I'm labelled!" :overlay-label="true" appearance="select" :items="deepClone(defaultItemsUnselect)" />
 <KSelect label="Disabled" disabled placeholder="I'm disabled!" :overlay-label="true" :items="deepClone(defaultItemsUnselect)" />
+<KSelect label="Readonly" readonly placeholder="I'm readonly!" :overlay-label="true" :items="deepClone(defaultItemsUnselect)" />
 
 ```html
 <KSelect label="Name" placeholder="I'm labelled!" :overlay-label="true" :items="items" />
 <KSelect label="Name" placeholder="I'm labelled!" :overlay-label="true" appearance="select" :items="items" />
 <KSelect label="Disabled" disabled placeholder="I'm disabled!" :overlay-label="true" :items="items" />
+<KSelect label="Readonly" readonly placeholder="I'm readonly!" :overlay-label="true" :items="items" />
 ```
 
 ### labelAttributes

src/components/KInput/KInput.vue

@@ -12,7 +12,7 @@
         <label
           :for="inputId"
           v-bind="labelAttributes"
-          :class="{ focused: isFocused, hovered: isHovered, disabled: isDisabled }"
+          :class="{ focused: isFocused, hovered: isHovered, disabled: isDisabled, readonly: isReadonly }"
         >
           <span>{{ label }}</span>
         </label>
@@ -161,7 +161,8 @@ export default defineComponent({
     const modelValueChanged = ref(false) // Determine if the original value was modified by the user
     const isFocused = ref(false)
     const isHovered = ref(false)
-    const isDisabled = computed((): boolean => !!attrs?.disabled)
+    const isDisabled = computed((): boolean => attrs?.disabled !== undefined && String(attrs?.disabled) !== 'false')
+    const isReadonly = computed((): boolean => attrs?.readonly !== undefined && String(attrs?.readonly) !== 'false')
     const inputId = computed((): string => attrs.id ? String(attrs.id) : props.testMode ? 'test-input-id-1234' : uuidv1())
     // we need this so we can create a watcher for programmatic changes to the modelValue
     const value = computed({
@@ -231,6 +232,7 @@ export default defineComponent({
       isFocused,
       isHovered,
       isDisabled,
+      isReadonly,
       inputId,
       charLimitExceeded,
       charLimitExceededError,
@@ -288,8 +290,8 @@ export default defineComponent({
     margin-top: 2px;
   }
 
-  .text-on-input label.hovered,
-  .text-on-input label:hover {
+  .text-on-input label:not(.disabled):not(.readonly).hovered,
+  .text-on-input label:not(.disabled):not(.readonly):hover {
     color: var(--KInputHover, var(--blue-500));
   }
 

src/components/KSelect/KSelect.vue

@@ -87,7 +87,7 @@
             style="position: relative;"
             role="listbox"
             @click="evt => {
-              if ($attrs.disabled !== undefined && $attrs.disabled !== false) {
+              if ($attrs.disabled !== undefined && String($attrs.disabled) !== 'false') {
                 evt.stopPropagation()
               }
             }"
@@ -103,15 +103,15 @@
               :id="selectTextId"
               v-bind="$attrs"
               v-model="filterStr"
-              :readonly="!filterIsEnabled"
               :is-open="isToggled.value"
               :label="label && overlayLabel ? label : undefined"
               :overlay-label="overlayLabel"
               :placeholder="selectedItem && appearance === 'select' && !filterIsEnabled ? selectedItem.label : placeholderText"
               autocomplete="off"
               autocapitalize="off"
-              :class="{ 'cursor-default': !filterIsEnabled }"
+              :class="{ 'cursor-default prevent-pointer-events': !filterIsEnabled }"
               class="k-select-input"
+              @keypress="onInputKeypress"
               @keyup="evt => triggerFocus(evt, isToggled)"
             />
           </div>
@@ -338,7 +338,7 @@ export default defineComponent({
         popoverClasses: `${defaultKPopAttributes.popoverClasses} ${props.kpopAttributes.popoverClasses} k-select-pop-${props.appearance}`,
         width: String(inputWidth.value),
         maxWidth: String(inputWidth.value),
-        disabled: typeof attrs.disabled === 'boolean' ? attrs.disabled : false,
+        disabled: (attrs.disabled !== undefined && String(attrs.disabled) !== 'false') || (attrs.readonly !== undefined && String(attrs.readonly) !== 'false'),
       }
     })
 
@@ -368,6 +368,14 @@ export default defineComponent({
       return placeholderText.value
     })
 
+    const onInputKeypress = (event: Event) => {
+      // If filters are not enabled, ignore any keypresses
+      if (!filterIsEnabled.value) {
+        event.preventDefault()
+        return false
+      }
+    }
+
     const handleItemSelect = (item: SelectItem) => {
       selectItems.value.forEach(anItem => {
         if (anItem.key === item.key) {
@@ -430,6 +438,7 @@ export default defineComponent({
     })
 
     const inputWidth = ref(0)
+
     onMounted(() => {
       const inputElem = document.getElementById(selectInputId.value)
 
@@ -456,6 +465,7 @@ export default defineComponent({
       triggerFocus,
       inputWidth,
       filterIsEnabled,
+      onInputKeypress,
     }
   },
 })
@@ -532,6 +542,10 @@ export default defineComponent({
       cursor: default;
     }
 
+    &.prevent-pointer-events {
+      pointer-events: none;
+    }
+
     &input.k-input {
       padding: var(--spacing-xs);
       height: 100%;

src/styles/forms/_inputs.scss

@@ -3,23 +3,23 @@
 .k-input-wrapper .text-on-input {
   position: relative;
 
-  .hovered {
+  .hovered:not(.readonly) {
     color: var(--KInputHover, var(--blue-500));
     transition: color 0.1s ease;
   }
 
-  .focused {
+  .focused:not(.readonly) {
     color: var(--KInputFocus, var(--blue-500));
     transition: color 0.1s ease;
   }
 
   label {
-    &.hovered {
+    &.hovered:not(.readonly) {
       color: var(--KInputHover, var(--blue-500));
       transition: color 0.1s ease;
     }
 
-    &.focused {
+    &.focused:not(.readonly) {
       color: var(--KInputFocus, var(--blue-500));
       transition: color 0.1s ease;
     }
@@ -94,7 +94,7 @@
       }
     }
 
-    &:not([type="checkbox"]):not([type="radio"]):not(.k-select-input):read-only {
+    &:not([type="checkbox"]):not([type="radio"]):read-only {
       background-color: var(--KInputReadonlyBackground, var(--grey-100, color(grey-100)));
       box-shadow: inset 0 0 0 1px var(--KInputBorder, var(--grey-300)) !important;
     }
@@ -125,7 +125,7 @@
   }
 
   &[type="search"] {
-    padding-left: 36px;
+    padding-left: 36px !important;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath fill='%23000' fill-opacity='.45' fill-rule='evenodd' d='M6 12c-3.3137085 0-6-2.6862915-6-6s2.6862915-6 6-6 6 2.6862915 6 6c0 1.29583043-.410791 2.49571549-1.1092521 3.47653436l1.2305724 1.23057244 2.8232632 2.8338633c.3897175.3911808.3947266 1.0192147.005164 1.4087774-.3868655.3868655-1.014825.3873148-1.4087774-.005164l-2.8338633-2.8232632-1.23057244-1.2305724C8.49571549 11.589209 7.29583043 12 6 12zm4-6c0-2.209139-1.790861-4-4-4S2 3.790861 2 6s1.790861 4 4 4 4-1.790861 4-4z'/%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-position: 12px 50%;