1,505th Commit

app/src/routes/(backstage)/(library)/data-entry/chip-field/+page.vue

@@ -5,6 +5,8 @@ import Basic from './Basic.vue';
 import BasicCode from './Basic.vue?raw';
 import Disabled from './Disabled.vue';
 import DisabledCode from './Disabled.vue?raw';
+import Invalid from './Invalid.vue';
+import InvalidCode from './Invalid.vue?raw';
 
 const codeImport = `import { XChipField } from '@x/ui';`;
 </script>
@@ -40,4 +42,14 @@ const codeImport = `import { XChipField } from '@x/ui';`;
 
     <XCodeBlock :code="DisabledCode" language="vue" />
   </section>
+
+  <section class="my-8">
+    <h2 class="text-3xl font-bold my-4 pt-6">Invalid</h2>
+
+    <XCard>
+      <Invalid />
+    </XCard>
+
+    <XCodeBlock :code="InvalidCode" language="vue" />
+  </section>
 </template>

app/src/routes/(backstage)/(library)/data-entry/chip-field/Disabled.vue

@@ -1,12 +1,13 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
-import { XChipField, XCheckbox } from '@x/ui';
+import { XChipField, XDivider, XCheckbox } from '@x/ui';
 
 const values = ref<string[]>([]);
 const disabled = ref(true);
 </script>
 
 <template>
   <XChipField v-model:value="values" label="Example label" placeholder="Type here..." :disabled />
+  <XDivider />
   <XCheckbox v-model:value="disabled">disabled</XCheckbox>
 </template>

app/src/routes/(backstage)/(library)/data-entry/chip-field/Invalid.vue

@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { XChipField, XDivider, XCheckbox } from '@x/ui';
+
+const values = ref<string[]>([]);
+const invalid = ref(true);
+const errorMessage = ref('Incorrect entry');
+</script>
+
+<template>
+  <XChipField
+    v-model:value="values"
+    label="Example label"
+    placeholder="Type here..."
+    required
+    :invalid="invalid && errorMessage"
+  />
+  <XDivider />
+  <XCheckbox v-model:value="invalid">invalid</XCheckbox>
+</template>

ui/src/components/chip-field/ChipField.vue

@@ -3,6 +3,7 @@ import { ref, reactive, watch, toRef } from 'vue';
 import { useLocaler, useLocale } from 'vue-localer';
 import { vOnClickOutside } from '@vueuse/components';
 
+import { type FormControlProps, formControlDefaults } from '../form-control/config';
 import FormControl from '../form-control/FormControl.vue';
 import Chip from '../chip/Chip.vue';
 
@@ -14,27 +15,22 @@ const valueModel = defineModel<string[]>('value', { default: [] });
 const statusModel = defineModel<boolean>('status', { default: true });
 
 withDefaults(
-  defineProps<{
-    label?: string;
-    required?: boolean;
-    invalid?: boolean | string;
-    help?: string;
-    placeholder?: string;
-    disabled?: boolean;
-    closable?: boolean;
-    append?: string;
-    selectedLabels?: boolean;
-  }>(),
+  defineProps<
+    {
+      placeholder?: string;
+      disabled?: boolean;
+      closable?: boolean;
+      append?: string;
+      selectedLabels?: boolean;
+    } & FormControlProps
+  >(),
   {
-    label: '',
-    required: false,
-    invalid: undefined,
-    help: '',
     placeholder: '',
     disabled: false,
     closable: true,
     append: '',
     selectedLabels: false,
+    ...formControlDefaults,
   },
 );