feat(input|select): add disabledClass (#691)

* feat(input): add disabledClass * feat(select): add disabledClass
oruga-ui · Dec 18, 2023 · c13f324 · c13f324
1 parent 9e8ad3a
commit c13f324
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 0 deletions.
diff --git a/packages/docs-next/.vitepress/theme/examples/input/inspector.vue b/packages/docs-next/.vitepress/theme/examples/input/inspector.vue
@@ -48,6 +48,14 @@ const inspectData = [
             data.rounded = true;
         },
     },
+    {
+        class: "disabledClass",
+        description: "Class of input when disabled ",
+        properties: ["disabled"],
+        action: (cmp, data) => {
+            data.disabled = true;
+        },
+    },
     {
         class: "iconLeftClass",
         description: "Class of the left icon",

diff --git a/packages/docs-next/.vitepress/theme/examples/select/inspector.vue b/packages/docs-next/.vitepress/theme/examples/select/inspector.vue
@@ -55,6 +55,14 @@ const inspectData = [
             selectedOptions.value = null;
         },
     },
+    {
+        class: "disabledClass",
+        description: "Class of select when disabled ",
+        properties: ["disabled"],
+        action: (cmp, data) => {
+            data.disabled = true;
+        },
+    },
     {
         class: "iconLeftClass",
         description: "Class of the left icon",

diff --git a/packages/oruga-next/src/components/input/Input.vue b/packages/oruga-next/src/components/input/Input.vue
@@ -138,6 +138,7 @@ const props = defineProps({
         "iconRightSpaceClass",
         "inputClass",
         "roundedClass",
+        "disabledClass",
         "iconLeftClass",
         "iconRightClass",
         "counterClass",
@@ -356,6 +357,10 @@ const inputClasses = computed(() => [
             statusVariant.value || props.variant,
         )]: statusVariant.value || props.variant,
     },
+    {
+        [useComputedClass("disabledClass", "o-input--disabled")]:
+            props.disabled,
+    },
     {
         [useComputedClass("textareaClass", "o-input__textarea")]:
             props.type === "textarea",

diff --git a/packages/oruga-next/src/components/input/types.ts b/packages/oruga-next/src/components/input/types.ts
@@ -19,6 +19,8 @@ declare module "../../index" {
                 inputClass: ClassDefinition;
                 /** Class of input when rounded */
                 roundedClass: ClassDefinition;
+                /** Class of input when disabled */
+                disabledClass: ClassDefinition;
                 /** Class of the left icon */
                 iconLeftClass: ClassDefinition;
                 /** Class of the right icon */

diff --git a/packages/oruga-next/src/components/select/Select.vue b/packages/oruga-next/src/components/select/Select.vue
@@ -62,6 +62,8 @@ const props = defineProps({
     placeholder: { type: String, default: undefined },
     /** Allow multiple selection */
     multiple: { type: Boolean, default: false },
+    /** Same as native disabled */
+    disabled: { type: Boolean, default: false },
     /** Makes input full width when inside a grouped or addon field */
     expanded: { type: Boolean, default: false },
     /** Makes the element rounded */
@@ -118,6 +120,7 @@ const props = defineProps({
         "roundedClass",
         "multipleClass",
         "expandedClass",
+        "disabledClass",
         "iconLeftClass",
         "iconRightClass",
         "sizeClass",
@@ -260,6 +263,9 @@ const selectClasses = computed(() => [
             statusVariant.value || props.variant,
         )]: statusVariant.value || props.variant,
     },
+    {
+        [useComputedClass("disabledClass", "o-sel--disabled")]: props.disabled,
+    },
     {
         [useComputedClass("iconLeftSpaceClass", "o-sel-iconspace-left")]:
             props.icon,
@@ -307,6 +313,7 @@ const iconRightClasses = computed(() => [
             :autocomplete="autocomplete"
             :multiple="multiple"
             :size="nativeSize"
+            :disabled="disabled"
             @blur="onBlur"
             @focus="onFocus"
             @invalid="onInvalid">

diff --git a/packages/oruga-next/src/components/select/types.ts b/packages/oruga-next/src/components/select/types.ts
@@ -32,6 +32,8 @@ declare module "../../index" {
                 multipleClass: ClassDefinition;
                 /** Class of select when expanded */
                 expandedClass: ClassDefinition;
+                /** Class of select when disabled */
+                disabledClass: ClassDefinition;
                 /** Class of the left icon */
                 iconLeftClass: ClassDefinition;
                 /** Class of the right icon */