tide-design-system 2.0.22 → 2.0.24

package/src/components/TideIndicator.vue

@@ -0,0 +1,57 @@
+<script lang="ts" setup>
+  import { CSS } from '@/types/Styles';
+
+  type Props = {
+    label?: string | number;
+  };
+
+  const props = withDefaults(defineProps<Props>(), {
+    label: undefined,
+  });
+</script>
+
+<template>
+  <div
+    :class="[
+      props.label ? 'tide-indicator-label' : 'tide-indicator',
+      'border-white',
+      CSS.BG.SURFACE.ACCENT,
+      CSS.BORDER.FULL.ONE,
+      CSS.BORDER.RADIUS.FULL,
+      props.label
+        ? [CSS.POSITION.RELATIVE, CSS.FONT.SIZE.TWELVE, CSS.FONT.WEIGHT.SEVEN_HUNDRED, CSS.FONT.COLOR.SURFACE.DEFAULT]
+        : [],
+    ]"
+  >
+    <div
+      :class="[
+        CSS.POSITION.ABSOLUTE,
+        CSS.POSITIONING.TOP,
+        CSS.DISPLAY.FLEX,
+        CSS.AXIS1.CENTER,
+        CSS.AXIS2.CENTER,
+        CSS.WIDTH.FULL,
+        CSS.HEIGHT.FULL,
+      ]"
+      v-if="props.label"
+    >
+      {{ props.label }}
+    </div>
+  </div>
+</template>
+
+<style scoped>
+  .tide-indicator {
+    width: 0.5rem;
+    height: 0.5rem;
+  }
+
+  .tide-indicator-label {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  .border-white {
+    border-color: white;
+  }
+</style>

package/src/components/TideInputCheckbox.vue

@@ -0,0 +1,145 @@
+<script lang="ts" setup>
+  import { computed, getCurrentInstance, ref, watch } from 'vue';
+
+  import TideIcon from '@/components/TideIcon.vue';
+  import { CSS } from '@/types/Styles';
+  import { ICON } from '@/types/Icon';
+  import { SIZE } from '@/types/Size';
+  import { formatNumber } from '@/utilities/format';
+
+  const input = ref<HTMLInputElement>();
+
+  type Props = {
+    checked?: boolean;
+    dataTrack?: string;
+    disabled?: boolean;
+    indeterminate?: boolean;
+    inputId?: string;
+    label: string;
+    name: string;
+    number?: number | undefined;
+  };
+
+  const props = withDefaults(defineProps<Props>(), {
+    checked: false,
+    dataTrack: '',
+    disabled: false,
+    indeterminate: false,
+    inputId: undefined,
+    label: undefined,
+    name: undefined,
+    number: undefined,
+  });
+
+  const checked = ref(props.checked || props.indeterminate);
+  const indeterminate = ref(props.indeterminate);
+
+  const uniqueId = computed(() => (props.inputId ? props.inputId : `text-input-${getCurrentInstance()?.uid || ''}`));
+
+  const handleClick = () => {
+    checked.value = !checked.value;
+  };
+
+  watch(
+    () => props.indeterminate,
+    (newValue, oldValue) => {
+      if (newValue !== oldValue || newValue !== indeterminate.value) {
+        if (input.value) {
+          indeterminate.value = newValue;
+          input.value.indeterminate = indeterminate.value;
+
+          if (indeterminate.value === true) {
+            checked.value = true;
+          }
+
+          input.value.checked = checked.value;
+        }
+      }
+    }
+  );
+
+  watch(
+    () => props.checked,
+    (newValue, oldValue) => {
+      if (newValue !== oldValue || newValue !== checked.value) {
+        checked.value = newValue;
+      }
+    }
+  );
+
+  defineExpose({ checked, indeterminate });
+</script>
+
+<template>
+  <div
+    :class="[
+      'tide-input-checkbox',
+      CSS.DISPLAY.FLEX,
+      CSS.AXIS2.CENTER,
+      CSS.GAP.HALF,
+      CSS.FONT.SIZE.FOURTEEN,
+      disabled && 'disabled',
+      disabled ? CSS.CURSOR.NOT_ALLOWED : CSS.CURSOR.POINTER,
+    ]"
+  >
+    <input
+      :checked="checked"
+      :class="[CSS.DISPLAY.NONE]"
+      :disabled="props.disabled"
+      :name="props.name"
+      ref="input"
+      :id="uniqueId"
+      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,
+        checked ? [CSS.BORDER.COLOR.HIGH, CSS.BG.SECONDARY] : [CSS.BORDER.COLOR.DEFAULT, CSS.BG.SURFACE.DEFAULT],
+        CSS.BORDER.RADIUS.QUARTER,
+        checked && 'checked',
+        disabled ? CSS.CURSOR.NOT_ALLOWED : CSS.CURSOR.POINTER,
+      ]"
+      @click="handleClick"
+    >
+      <TideIcon
+        :class="[CSS.FONT.COLOR.SECONDARY]"
+        :icon="indeterminate ? ICON.REMOVE : ICON.CHECK"
+        :size="SIZE.SMALL"
+        v-if="checked || indeterminate"
+      />
+    </div>
+
+    <label
+      :class="[CSS.DISPLAY.FLEX, CSS.GAP.HALF, disabled ? CSS.CURSOR.NOT_ALLOWED : CSS.CURSOR.POINTER]"
+      :for="uniqueId"
+      @click.prevent="checked = !checked"
+      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: var(--tide-font-28);
+    height: var(--tide-font-28);
+  }
+</style>

package/src/components/TideInputRadio.vue

@@ -0,0 +1,87 @@
+<script lang="ts" setup>
+  import { computed, getCurrentInstance, ref, watch } from 'vue';
+
+  import { CSS } from '@/types/Styles';
+
+  type Props = {
+    checked?: boolean;
+    dataTrack?: string;
+    disabled?: boolean;
+    inputId?: string;
+    label: string;
+    name: string;
+  };
+
+  const props = withDefaults(defineProps<Props>(), {
+    checked: false,
+    dataTrack: '',
+    disabled: false,
+    inputId: undefined,
+    label: undefined,
+  });
+
+  const checked = ref(props.checked);
+
+  const uniqueId = computed(() => (props.inputId ? props.inputId : `text-input-${getCurrentInstance()?.uid || ''}`));
+
+  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, props.disabled && 'disabled']">
+    <input
+      :checked="checked"
+      :class="[CSS.DISPLAY.NONE]"
+      :id="uniqueId"
+      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,
+        checked && 'checked',
+      ]"
+    >
+      <div :class="['tide-input-radio-check', CSS.BORDER.RADIUS.FULL, props.checked && CSS.BG.SECONDARY]" />
+    </div>
+
+    <label
+      :class="CSS.FONT.WEIGHT.FOUR_HUNDRED"
+      :for="uniqueId"
+    >
+      {{ props.label }}
+    </label>
+  </div>
+</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);
+  }
+
+  .tide-input-radio-check {
+    width: 1rem;
+    height: 1rem;
+  }
+</style>

package/src/components/TideInputSelect.vue

@@ -0,0 +1,204 @@
+<script lang="ts" setup>
+  import { getCurrentInstance, computed, ref, watch } from 'vue';
+
+  import type { SelectField } from '@/types/Field';
+
+  import TideIcon from '@/components/TideIcon.vue';
+  import { CSS } from '@/types/Styles';
+  import { ICON } from '@/types/Icon';
+  import { SIZE } from '@/types/Size';
+  import { getFieldHasError, getErrorMessage } from '@/utilities/validation';
+
+  interface Props extends SelectField {
+    inputId?: string;
+    supportingText?: string;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    disabled: false,
+    error: false,
+    inputId: undefined,
+    label: undefined,
+    required: false,
+    supportingText: undefined,
+    value: '',
+  });
+
+  const error = ref(props.error);
+  const hasFocus = ref(false);
+  const input = ref<HTMLSelectElement | null>(null);
+  const required = ref(props.required);
+  const value = ref(props.value);
+
+  const errorMessage = computed(() => getErrorMessage(props.error, error.value));
+  const formattedLabel = computed(() => (props.required ? `${props.label} *` : props.label));
+  const hasError = computed(() => (props.required && !value.value) || getFieldHasError(error.value, props.error));
+  const hasMinilabel = computed(() => hasFocus.value || !isEmpty.value);
+  const isEmpty = computed(() => value.value === '');
+
+  const uniqueId = computed(() => (props.inputId ? props.inputId : `text-input-${getCurrentInstance()?.uid || ''}`));
+
+  const expandOptions = () => {
+    const event = new MouseEvent('mousedown');
+    input?.value?.dispatchEvent(event);
+  };
+
+  const handleFocus = () => {
+    hasFocus.value = true;
+  };
+
+  const handleFocusOut = () => {
+    hasFocus.value = false;
+  };
+
+  watch(
+    () => props.value,
+    (newValue, oldValue) => {
+      if (newValue !== oldValue || newValue !== value.value) {
+        value.value = newValue;
+      }
+    }
+  );
+
+  defineExpose({ error, value });
+</script>
+
+<template>
+  <div
+    :class="[
+      'tide-input-select',
+      CSS.DISPLAY.FLEX,
+      CSS.FLEX.DIRECTION.COLUMN,
+      CSS.GAP.QUARTER,
+      disabled && 'disabled',
+      hasError && 'error',
+    ]"
+  >
+    <div
+      :class="[
+        'tide-input-border',
+        CSS.POSITION.RELATIVE,
+        CSS.DISPLAY.FLEX,
+        CSS.AXIS2.CENTER,
+        CSS.GAP.HALF,
+        CSS.BORDER.RADIUS.HALF,
+        props.disabled ? CSS.CURSOR.NOT_ALLOWED : '',
+        CSS.OVERFLOW.XY.HIDDEN,
+      ]"
+      @click="expandOptions"
+    >
+      <div :class="[CSS.DISPLAY.FLEX, CSS.FLEX.DIRECTION.COLUMN, CSS.WIDTH.FULL]">
+        <label
+          :class="[
+            hasMinilabel ? ['minilabel', CSS.FONT.SIZE.TWELVE] : CSS.FONT.SIZE.SIXTEEN,
+            CSS.POSITION.ABSOLUTE,
+            CSS.POSITIONING.LEFT,
+            CSS.MARGIN.TOP.HALF,
+            CSS.MARGIN.LEFT.ONE,
+            !hasError && CSS.FONT.COLOR.SURFACE.VARIANT,
+            CSS.FONT.WEIGHT.FIVE_HUNDRED,
+          ]"
+          :for="uniqueId"
+          v-if="label"
+        >
+          {{ formattedLabel }}
+        </label>
+
+        <select
+          :class="[CSS.PADDING.BOTTOM.HALF, CSS.PADDING.X.ONE, CSS.WIDTH.FULL, disabled && CSS.CURSOR.NOT_ALLOWED]"
+          :disabled="disabled"
+          :name="name"
+          ref="input"
+          :required="required"
+          @focus="handleFocus"
+          @focusout="handleFocusOut"
+          :id="uniqueId"
+          v-model="value"
+        >
+          <option
+            :class="[CSS.WIDTH.FULL, CSS.BG.SURFACE.DEFAULT]"
+            :key="option.value"
+            :selected="value === option.value ? true : undefined"
+            :value="option.value"
+            v-for="option in options"
+          >
+            {{ option.label }}
+          </option>
+        </select>
+      </div>
+
+      <TideIcon
+        :class="[CSS.POSITION.ABSOLUTE, CSS.POSITIONING.RIGHT, CSS.MARGIN.RIGHT.ONE, CSS.POINTER_EVENTS.OFF]"
+        :icon="ICON.EXPAND_MORE"
+        :size="SIZE.SMALL"
+      />
+    </div>
+
+    <div
+      :class="[CSS.DISPLAY.FLEX, CSS.AXIS2.CENTER, CSS.GAP.QUARTER, CSS.MARGIN.LEFT.ONE]"
+      v-if="props.supportingText || hasError"
+    >
+      <TideIcon
+        :class="[]"
+        :icon="ICON.ERROR"
+        :size="SIZE.SMALL"
+        v-if="hasError"
+      />
+
+      <div :class="[CSS.FONT.SIZE.TWELVE, CSS.FONT.WEIGHT.FIVE_HUNDRED]">
+        {{ hasError ? errorMessage : props.supportingText }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+  select {
+    appearance: none;
+  }
+
+  label {
+    height: 1.1875rem;
+    transition: font-size var(--tide-animate), transform var(--tide-animate);
+  }
+
+  label:not(.minilabel) {
+    transform: translate(0, calc(9 / 16 * 1rem));
+  }
+
+  .tide-input-select.disabled {
+    opacity: var(--tide-disabled);
+  }
+
+  .tide-input-select.error .tide-input-border {
+    outline-color: var(--tide-error-border);
+    background-color: var(--tide-error-surface);
+  }
+
+  .tide-input-select.error:focus-within .tide-input-border {
+    outline-color: var(--tide-error-border);
+  }
+
+  .tide-input-select:focus-within .tide-input-border {
+    --tide-input-outline-width: var(--tide-border-width-2);
+    outline-color: var(--tide-surface-border-high);
+  }
+
+  .tide-input-border {
+    --tide-input-outline-width: var(--tide-border-width-1);
+    outline: var(--tide-input-outline-width) solid var(--tide-border);
+    outline-offset: calc(var(--tide-input-outline-width) * -1);
+  }
+
+  .tide-input-select.error {
+    color: var(--tide-error-on-surface);
+  }
+
+  .tide-input-select.error option {
+    color: var(--tide-on-surface);
+  }
+
+  select {
+    padding-top: 27px;
+  }
+</style>