tide-design-system 2.3.0 → 2.4.0

package/src/components/TideInputCheckbox.vue

@@ -1,110 +1,187 @@
 <script lang="ts" setup>
-  import { computed } from 'vue';
+  import { computed, ref, watch, watchEffect } from 'vue';
 
   import TideIcon from '@/components/TideIcon.vue';
+  import TideInputSupportingText from '@/components/TideInputSupportingText.vue';
+  import { useFormContext } from '@/composables/useTideForm';
   import { ICON } from '@/types/Icon';
   import { SIZE } from '@/types/Size';
   import { CSS } from '@/types/Styles';
   import { formatNumber } from '@/utilities/format';
+  import { VALIDATION_RESULT } from '@/utilities/validation';
+
+  import type { ValidationResult } from '@/types/Validation';
 
   type Props = {
-    checked?: boolean;
     disabled?: boolean;
+    error?: string;
     indeterminate?: boolean;
     inputId?: string;
     label: string;
-    name: string;
+    name?: string;
     number?: number;
+    required?: boolean;
   };
 
   const props = withDefaults(defineProps<Props>(), {
-    checked: false,
     disabled: false,
+    error: '',
     indeterminate: false,
     inputId: undefined,
     label: undefined,
     name: undefined,
     number: undefined,
+    required: false,
   });
 
-  const isChecked = computed(() => props.checked || props.indeterminate);
-</script>
+  type Emits = {
+    (event: 'valid', valid: boolean): void;
+  };
+  const emit = defineEmits<Emits>();
 
-<template>
-  <div
-    :class="[
-      'tide-input-checkbox',
-      CSS.DISPLAY.FLEX,
-      CSS.AXIS2.CENTER,
-      CSS.GAP.HALF,
-      CSS.FONT.ROLE.BODY_1,
-      disabled ? ['disabled', CSS.POINTER_EVENTS.OFF] : CSS.CURSOR.POINTER,
-    ]"
-  >
-    <input
-      :checked="isChecked"
-      :class="[CSS.DISPLAY.NONE]"
-      :disabled="props.disabled"
-      :name="props.name"
-      ref="input"
-      @click.prevent
-      :id="props.inputId"
-      type="checkbox"
-    />
+  const modelValue = defineModel<boolean>({ required: true });
 
-    <div
-      :class="[
-        'tide-input-checkbox-custom',
-        CSS.POSITION.RELATIVE,
-        CSS.DISPLAY.FLEX,
-        CSS.AXIS1.CENTER,
-        CSS.AXIS2.CENTER,
-        CSS.FLEX.SHRINK.OFF,
-        CSS.BORDER.FULL.ONE,
-        isChecked ? [CSS.BORDER.COLOR.HIGH, CSS.BG.SECONDARY] : [CSS.BORDER.COLOR.DEFAULT, CSS.BG.SURFACE.DEFAULT],
-        CSS.BORDER.RADIUS.QUARTER,
-        isChecked && 'checked',
-        disabled ? CSS.CURSOR.NOT_ALLOWED : CSS.CURSOR.POINTER,
-      ]"
-    >
-      <TideIcon
-        :class="[CSS.FONT.COLOR.SECONDARY]"
-        :icon="props.indeterminate ? ICON.REMOVE : ICON.CHECK"
-        :size="SIZE.SMALL"
-        v-if="isChecked"
-      />
-    </div>
+  const formContext = useFormContext();
+
+  const isValidating = ref<boolean>(false);
+  const errorRef = ref<ValidationResult>(VALIDATION_RESULT.NO_ERROR);
+
+  const formattedLabel = computed(() => (props.required ? `${props.label} *` : props.label));
+  const isChecked = computed(() => modelValue.value || props.indeterminate);
+  const showError = computed(() => {
+    if (hasErrorFromProp.value) return true;
+    if (!isValidating.value) return false;
+    return !errorRef.value.valid;
+  });
+  const hasErrorFromProp = computed(() => props.error !== '');
+  const supportingTextMessage = computed(() => showError.value && errorRef.value.message);
+
+  const getCheckboxValidationResult = (): ValidationResult => {
+    if (props.error !== '')
+      return {
+        message: props.error,
+        valid: false,
+      };
+    if (!props.required || isChecked.value) return VALIDATION_RESULT.NO_ERROR;
+    return VALIDATION_RESULT.REQUIRED;
+  };
 
+  watchEffect(() => {
+    errorRef.value = getCheckboxValidationResult();
+  });
+
+  watch(
+    modelValue,
+    () => {
+      if (modelValue.value) isValidating.value = true;
+    },
+    { immediate: true }
+  );
+
+  watch(
+    () => formContext?.forceShowErrors.value,
+    (newValue) => {
+      if (newValue) isValidating.value = true;
+    },
+    { immediate: true }
+  );
+
+  watch(
+    errorRef,
+    () => {
+      emit('valid', errorRef.value.valid);
+    },
+    { deep: true, immediate: true }
+  );
+</script>
+
+<template>
+  <div :class="['tide-input-checkbox', CSS.DISPLAY.FLEX, CSS.FLEX.DIRECTION.COLUMN, CSS.GAP.QUARTER]">
     <label
       :class="[
+        CSS.AXIS2.CENTER,
         CSS.DISPLAY.FLEX,
-        CSS.AXIS1.BETWEEN,
-        CSS.FLEX.GROW.ON,
         CSS.FONT.ROLE.BODY_1,
-        disabled ? CSS.CURSOR.NOT_ALLOWED : CSS.CURSOR.POINTER,
+        CSS.GAP.HALF,
+        CSS.USER_SELECT.NONE,
+        showError ? CSS.FONT.COLOR.GLOBAL.ERROR : CSS.FONT.COLOR.SURFACE.DEFAULT,
+        disabled ? [CSS.OPACITY.DISABLED, CSS.CURSOR.NOT_ALLOWED] : [CSS.CURSOR.POINTER],
       ]"
-      :for="props.inputId"
-      @click.prevent
-      v-if="label"
+      :for="inputId"
     >
-      <span>{{ label }}</span>
-      <span
-        :class="[CSS.FONT.COLOR.SURFACE.VARIANT]"
-        v-if="props.number"
+      <input
+        :checked="isChecked"
+        :class="['tide-screen-reader-only']"
+        :disabled="disabled"
+        :name="name"
+        ref="input"
+        :id="inputId"
+        type="checkbox"
+        v-model="modelValue"
+      />
+
+      <div
+        :class="[
+          'tide-input-checkbox-custom',
+          CSS.AXIS1.CENTER,
+          CSS.AXIS2.CENTER,
+          CSS.BORDER.FULL.ONE,
+          CSS.BORDER.RADIUS.QUARTER,
+          CSS.DISPLAY.FLEX,
+          CSS.FLEX.SHRINK.OFF,
+          CSS.POSITION.RELATIVE,
+          isChecked
+            ? [showError ? CSS.BG.GLOBAL.PRIMARY.ERROR : [CSS.BG.SECONDARY, CSS.BORDER.COLOR.HIGH]]
+            : [
+                showError
+                  ? [CSS.BORDER.COLOR.GLOBAL.ERROR, CSS.BG.GLOBAL.SURFACE.ERROR]
+                  : [CSS.BORDER.COLOR.DEFAULT, CSS.BG.SURFACE.DEFAULT],
+              ],
+        ]"
+      >
+        <TideIcon
+          :class="[CSS.FONT.COLOR.SECONDARY]"
+          :icon="indeterminate ? ICON.REMOVE : ICON.CHECK"
+          :size="SIZE.SMALL"
+          v-if="isChecked"
+        />
+      </div>
+
+      <div
+        :class="[CSS.AXIS1.BETWEEN, CSS.DISPLAY.FLEX, CSS.FLEX.GROW.ON, CSS.FONT.ROLE.BODY_1]"
+        v-if="label"
       >
-        ({{ formatNumber(props.number) }})
-      </span>
+        <span>{{ formattedLabel }}</span>
+
+        <span
+          :class="[CSS.FONT.COLOR.SURFACE.VARIANT]"
+          v-if="number"
+        >
+          ({{ formatNumber(number) }})
+        </span>
+      </div>
     </label>
+
+    <TideInputSupportingText
+      :message="supportingTextMessage"
+      is-error
+      v-if="supportingTextMessage"
+    />
   </div>
 </template>
 
 <style scoped>
-  .tide-input-checkbox.disabled {
-    opacity: var(--tide-disabled);
+  .tide-input-checkbox {
+    align-self: start;
   }
 
   .tide-input-checkbox-custom {
-    width: var(--tide-font-28);
-    height: var(--tide-font-28);
+    width: 24px;
+    height: 24px;
+  }
+
+  label:has(input:focus-visible) {
+    outline: auto;
+    outline-offset: 2px;
   }
 </style>

package/src/components/TideInputCheckboxDeprecated.vue

@@ -0,0 +1,117 @@
+<script lang="ts">
+  /**
+   * @deprecated Use `TideInputCheckbox.vue` imported from 'tide-design-system' npm package instead.
+   */
+  export default {};
+</script>
+
+<script lang="ts" setup>
+  import { computed } from 'vue';
+
+  import TideIcon from '@/components/TideIcon.vue';
+  import { ICON } from '@/types/Icon';
+  import { SIZE } from '@/types/Size';
+  import { CSS } from '@/types/Styles';
+  import { formatNumber } from '@/utilities/format';
+
+  type Props = {
+    checked?: boolean;
+    disabled?: boolean;
+    indeterminate?: boolean;
+    inputId?: string;
+    label: string;
+    name: string;
+    number?: number;
+  };
+
+  const props = withDefaults(defineProps<Props>(), {
+    checked: false,
+    disabled: false,
+    indeterminate: false,
+    inputId: undefined,
+    label: undefined,
+    name: undefined,
+    number: undefined,
+  });
+
+  const isChecked = computed(() => props.checked || props.indeterminate);
+</script>
+
+<template>
+  <div
+    :class="[
+      'tide-input-checkbox',
+      CSS.DISPLAY.FLEX,
+      CSS.AXIS2.CENTER,
+      CSS.GAP.HALF,
+      CSS.FONT.ROLE.BODY_1,
+      disabled ? ['disabled', CSS.POINTER_EVENTS.OFF] : CSS.CURSOR.POINTER,
+    ]"
+  >
+    <input
+      :checked="isChecked"
+      :class="[CSS.DISPLAY.NONE]"
+      :disabled="props.disabled"
+      :name="props.name"
+      ref="input"
+      @click.prevent
+      :id="props.inputId"
+      type="checkbox"
+    />
+
+    <div
+      :class="[
+        'tide-input-checkbox-custom',
+        CSS.POSITION.RELATIVE,
+        CSS.DISPLAY.FLEX,
+        CSS.AXIS1.CENTER,
+        CSS.AXIS2.CENTER,
+        CSS.FLEX.SHRINK.OFF,
+        CSS.BORDER.FULL.ONE,
+        isChecked ? [CSS.BORDER.COLOR.HIGH, CSS.BG.SECONDARY] : [CSS.BORDER.COLOR.DEFAULT, CSS.BG.SURFACE.DEFAULT],
+        CSS.BORDER.RADIUS.QUARTER,
+        isChecked && 'checked',
+        disabled ? CSS.CURSOR.NOT_ALLOWED : CSS.CURSOR.POINTER,
+      ]"
+    >
+      <TideIcon
+        :class="[CSS.FONT.COLOR.SECONDARY]"
+        :icon="props.indeterminate ? ICON.REMOVE : ICON.CHECK"
+        :size="SIZE.SMALL"
+        v-if="isChecked"
+      />
+    </div>
+
+    <label
+      :class="[
+        CSS.DISPLAY.FLEX,
+        CSS.AXIS1.BETWEEN,
+        CSS.FLEX.GROW.ON,
+        CSS.FONT.ROLE.BODY_1,
+        disabled ? CSS.CURSOR.NOT_ALLOWED : CSS.CURSOR.POINTER,
+      ]"
+      :for="props.inputId"
+      @click.prevent
+      v-if="label"
+    >
+      <span>{{ label }}</span>
+      <span
+        :class="[CSS.FONT.COLOR.SURFACE.VARIANT]"
+        v-if="props.number"
+      >
+        ({{ formatNumber(props.number) }})
+      </span>
+    </label>
+  </div>
+</template>
+
+<style scoped>
+  .tide-input-checkbox.disabled {
+    opacity: var(--tide-disabled);
+  }
+
+  .tide-input-checkbox-custom {
+    width: 24px;
+    height: 24px;
+  }
+</style>

package/src/components/TideInputRadio.vue

@@ -1,56 +1,50 @@
 <script lang="ts" setup>
-  import { ref, watch } from 'vue';
+  import { computed } from 'vue';
 
   import { CSS } from '@/types/Styles';
   import { formatNumber } from '@/utilities/format';
 
   type Props = {
-    checked?: boolean;
     disabled?: boolean;
     inputId?: string;
     label: string;
     name: string;
     number?: number;
+    value: string;
   };
 
   const props = withDefaults(defineProps<Props>(), {
-    checked: false,
     disabled: false,
     inputId: undefined,
     label: undefined,
     number: undefined,
   });
 
-  const checked = ref(props.checked);
+  const modelValue = defineModel<string>({ required: true });
 
-  watch(
-    () => props.checked,
-    (newValue, oldValue) => {
-      if (newValue !== oldValue || newValue !== checked.value) {
-        checked.value = newValue;
-      }
-    }
-  );
+  const isChecked = computed(() => modelValue.value === props.value);
 </script>
 
 <template>
-  <div
+  <label
     :class="[
       'tide-input-radio',
       CSS.DISPLAY.FLEX,
       CSS.AXIS2.CENTER,
       CSS.GAP.HALF,
-      CSS.POINTER_EVENTS.OFF,
-      props.disabled && 'disabled',
+      CSS.USER_SELECT.NONE,
+      props.disabled ? [CSS.OPACITY.DISABLED, CSS.CURSOR.NOT_ALLOWED] : [CSS.CURSOR.POINTER],
     ]"
+    :for="props.inputId"
   >
     <input
-      :checked="checked"
-      :class="[CSS.DISPLAY.NONE]"
+      :class="['tide-screen-reader-only']"
+      :disabled="disabled"
+      :name="name"
+      :value="value"
       :id="props.inputId"
-      name=""
       type="radio"
-      value=""
+      v-model="modelValue"
     />
 
     <div
@@ -61,28 +55,17 @@
         CSS.AXIS1.CENTER,
         CSS.AXIS2.CENTER,
         CSS.BORDER.FULL.ONE,
-        checked ? CSS.BORDER.COLOR.HIGH : CSS.BORDER.COLOR.DEFAULT,
+        isChecked ? [CSS.BORDER.COLOR.HIGH] : [CSS.BORDER.COLOR.DEFAULT],
         CSS.BORDER.RADIUS.FULL,
         CSS.BG.SURFACE.DEFAULT,
         CSS.CURSOR.POINTER,
         CSS.POINTER_EVENTS.ON,
-        checked && 'checked',
       ]"
     >
-      <div :class="['tide-input-radio-check', CSS.BORDER.RADIUS.FULL, props.checked && CSS.BG.SECONDARY]" />
+      <div :class="['tide-input-radio-check', CSS.BORDER.RADIUS.FULL, isChecked && CSS.BG.SECONDARY]" />
     </div>
 
-    <label
-      :class="[
-        CSS.DISPLAY.FLEX,
-        CSS.FLEX.GROW.ON,
-        CSS.AXIS1.BETWEEN,
-        CSS.FONT.ROLE.BODY_1,
-        CSS.CURSOR.POINTER,
-        CSS.POINTER_EVENTS.ON,
-      ]"
-      :for="props.inputId"
-    >
+    <div :class="[CSS.DISPLAY.FLEX, CSS.FLEX.GROW.ON, CSS.AXIS1.BETWEEN, CSS.FONT.ROLE.BODY_1]">
       <span>{{ label }}</span>
       <span
         :class="[CSS.FONT.COLOR.SURFACE.VARIANT]"
@@ -90,22 +73,23 @@
       >
         ({{ formatNumber(props.number) }})
       </span>
-    </label>
-  </div>
+    </div>
+  </label>
 </template>
 
 <style scoped>
-  .tide-input-radio.disabled {
-    opacity: var(--tide-disabled);
-  }
-
   .tide-input-radio-custom {
-    width: var(--tide-font-28);
-    height: var(--tide-font-28);
+    width: 24px;
+    height: 24px;
   }
 
   .tide-input-radio-check {
-    width: 1rem;
-    height: 1rem;
+    width: 16px;
+    height: 16px;
+  }
+
+  label:has(input:focus-visible) {
+    outline: auto;
+    outline-offset: 2px;
   }
 </style>

package/src/components/TideInputRadioDeprecated.vue

@@ -0,0 +1,118 @@
+<script lang="ts">
+  /**
+   * @deprecated Use `TideInputRadio.vue` imported from 'tide-design-system' npm package instead.
+   */
+  export default {};
+</script>
+
+<script lang="ts" setup>
+  import { ref, watch } from 'vue';
+
+  import { CSS } from '@/types/Styles';
+  import { formatNumber } from '@/utilities/format';
+
+  type Props = {
+    checked?: boolean;
+    disabled?: boolean;
+    inputId?: string;
+    label: string;
+    name: string;
+    number?: number;
+  };
+
+  const props = withDefaults(defineProps<Props>(), {
+    checked: false,
+    disabled: false,
+    inputId: undefined,
+    label: undefined,
+    number: undefined,
+  });
+
+  const checked = ref(props.checked);
+
+  watch(
+    () => props.checked,
+    (newValue, oldValue) => {
+      if (newValue !== oldValue || newValue !== checked.value) {
+        checked.value = newValue;
+      }
+    }
+  );
+</script>
+
+<template>
+  <div
+    :class="[
+      'tide-input-radio',
+      CSS.DISPLAY.FLEX,
+      CSS.AXIS2.CENTER,
+      CSS.GAP.HALF,
+      CSS.POINTER_EVENTS.OFF,
+      props.disabled && 'disabled',
+    ]"
+  >
+    <input
+      :checked="checked"
+      :class="[CSS.DISPLAY.NONE]"
+      :id="props.inputId"
+      name=""
+      type="radio"
+      value=""
+    />
+
+    <div
+      :class="[
+        'tide-input-radio-custom',
+        CSS.POSITION.RELATIVE,
+        CSS.DISPLAY.FLEX,
+        CSS.AXIS1.CENTER,
+        CSS.AXIS2.CENTER,
+        CSS.BORDER.FULL.ONE,
+        checked ? CSS.BORDER.COLOR.HIGH : CSS.BORDER.COLOR.DEFAULT,
+        CSS.BORDER.RADIUS.FULL,
+        CSS.BG.SURFACE.DEFAULT,
+        CSS.CURSOR.POINTER,
+        CSS.POINTER_EVENTS.ON,
+        checked && 'checked',
+      ]"
+    >
+      <div :class="['tide-input-radio-check', CSS.BORDER.RADIUS.FULL, props.checked && CSS.BG.SECONDARY]" />
+    </div>
+
+    <label
+      :class="[
+        CSS.DISPLAY.FLEX,
+        CSS.FLEX.GROW.ON,
+        CSS.AXIS1.BETWEEN,
+        CSS.FONT.ROLE.BODY_1,
+        CSS.CURSOR.POINTER,
+        CSS.POINTER_EVENTS.ON,
+      ]"
+      :for="props.inputId"
+    >
+      <span>{{ label }}</span>
+      <span
+        :class="[CSS.FONT.COLOR.SURFACE.VARIANT]"
+        v-if="props.number"
+      >
+        ({{ formatNumber(props.number) }})
+      </span>
+    </label>
+  </div>
+</template>
+
+<style scoped>
+  .tide-input-radio.disabled {
+    opacity: var(--tide-disabled);
+  }
+
+  .tide-input-radio-custom {
+    width: 24px;
+    height: 24px;
+  }
+
+  .tide-input-radio-check {
+    width: 16px;
+    height: 16px;
+  }
+</style>