tide-design-system 2.5.13 → 2.5.15

package/src/components/TideColumns.vue

@@ -1,65 +0,0 @@
-<script lang="ts">
-  /**
-   * Renders a columns component for use in navigation.
-   *
-   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidecolumns--docs) for TideColumns
-   */
-  export default {};
-</script>
-
-<script lang="ts" setup>
-  import { CSS } from '@/types/Styles';
-
-  type Props = {
-    /** Determines label for the columns section. */
-    heading?: string;
-  };
-
-  const props = withDefaults(defineProps<Props>(), {
-    heading: '',
-  });
-</script>
-
-<template>
-  <section class="tide-columns">
-    <h2 :class="[CSS.MARGIN.BOTTOM.HALF]">
-      {{ props.heading }}
-    </h2>
-
-    <ul :class="[CSS.DISPLAY.FLEX, CSS.FLEX.WRAP, CSS.GAP.TWO, CSS.LIST_BULLETS.OFF]">
-      <li class="tide-columns-column">
-        <slot name="section1" />
-      </li>
-
-      <li class="tide-columns-column">
-        <slot name="section2" />
-      </li>
-
-      <li class="tide-columns-column">
-        <slot name="section3" />
-      </li>
-
-      <li class="tide-columns-column">
-        <slot name="section4" />
-      </li>
-    </ul>
-  </section>
-</template>
-
-<style scoped>
-  .tide-columns-column {
-    width: 100%;
-  }
-
-  @media (min-width: 992px) {
-    .tide-columns-column {
-      width: calc((100% - 2rem) / 2);
-    }
-  }
-
-  @media (min-width: 1232px) {
-    .tide-columns-column {
-      width: calc((100% - 6rem) / 4);
-    }
-  }
-</style>

package/src/components/TideDivider.vue

@@ -1,43 +0,0 @@
-<script lang="ts">
-  /**
-   * Renders a divider component.
-   *
-   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidedivider--docs) for TideDivider
-   */
-  export default {};
-</script>
-
-<script lang="ts" setup>
-  import { ORIENTATION } from '@/types/Orientation';
-  import { CSS } from '@/types/Styles';
-
-  import type { Orientation } from '@/types/Orientation';
-
-  type Props = {
-    /** Determines whether Divider is horizontal or vertical */
-    orientation?: Orientation;
-  };
-
-  const props = withDefaults(defineProps<Props>(), {
-    orientation: ORIENTATION.HORIZONTAL,
-  });
-</script>
-
-<template>
-  <div :class="['tide-divider']">
-    <div
-      :class="[
-        CSS.BORDER.COLOR.LOW,
-        props.orientation === ORIENTATION.HORIZONTAL
-          ? [CSS.MARGIN.Y.HALF, CSS.BORDER.BOTTOM.ONE, CSS.WIDTH.FULL]
-          : [CSS.MARGIN.X.HALF, CSS.BORDER.RIGHT.ONE, CSS.HEIGHT.FULL],
-      ]"
-    />
-  </div>
-</template>
-
-<style scoped>
-  .tide-divider {
-    align-self: stretch;
-  }
-</style>

package/src/components/TideForm.vue

@@ -1,33 +0,0 @@
-<script lang="ts">
-  /**
-   * Renders a form component to be used to wrap form elements and handle form submission.
-   *
-   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tideform--docs) for TideForm
-   */
-  export default {};
-</script>
-
-<script setup lang="ts">
-  import { useTideForm } from '@/composables/useTideForm';
-
-  type Emits = {
-    (event: 'submit', e: SubmitEvent): void;
-  };
-  const emit = defineEmits<Emits>();
-
-  const { revealValidationErrors } = useTideForm();
-
-  const handleSubmit = (e: SubmitEvent) => {
-    revealValidationErrors();
-    emit('submit', e);
-  };
-</script>
-
-<template>
-  <form
-    @submit.prevent="handleSubmit"
-    novalidate
-  >
-    <slot />
-  </form>
-</template>

package/src/components/TideIcon.vue

@@ -1,85 +0,0 @@
-<script lang="ts">
-  /**
-   * Renders an icon component.
-   *
-   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tideicon--docs) for TideIcon
-   */
-  export default {};
-</script>
-
-<script lang="ts" setup>
-  import { defineAsyncComponent, markRaw, ref, watch } from 'vue';
-
-  import { REALM } from '@/types/Realm';
-  import { SIZE } from '@/types/Size';
-  import { CSS } from '@/types/Styles';
-  import { formatPascalCase } from '@/utilities/format';
-
-  import type { Icon } from '@/types/Icon';
-  import type { Size } from '@/types/Size';
-  import type { Component } from 'vue';
-
-  type Props = {
-    /** Icon */
-    icon: Icon;
-
-    /** Determines icon dimensions */
-    size?: Size;
-  };
-
-  const props = withDefaults(defineProps<Props>(), {
-    size: SIZE.SMALL,
-  });
-
-  const innerSVG = ref<Component>();
-
-  watch(
-    () => props.icon,
-    async () => {
-      const id: string = props.icon;
-      const name = formatPascalCase(id);
-      const [prefix] = id.split('-');
-      const realmFolder = REALM[prefix?.toUpperCase() as keyof typeof REALM];
-
-      const component = defineAsyncComponent(() => {
-        if (realmFolder) {
-          return import(`../assets/svg/icons/realm/${realmFolder}/Icon${name}.svg?component`);
-        }
-
-        return import(`../assets/svg/icons/Icon${name}.svg?component`);
-      });
-
-      innerSVG.value = markRaw(component);
-    },
-    { immediate: true }
-  );
-</script>
-
-<template>
-  <div :class="['tide-icon', props.size, CSS.FLEX.SHRINK.OFF]">
-    <Component
-      :class="[CSS.DISPLAY.BLOCK]"
-      :data-icon="icon"
-      fill="currentColor"
-      :is="innerSVG"
-      v-if="innerSVG"
-    />
-  </div>
-</template>
-
-<style>
-  .tide-icon {
-    width: 1.5rem;
-    height: 1.5rem;
-  }
-
-  .tide-icon.small {
-    width: 1.25rem;
-    height: 1.25rem;
-  }
-
-  .tide-icon svg {
-    width: 100%;
-    height: 100%;
-  }
-</style>

package/src/components/TideImage.vue

@@ -1,126 +0,0 @@
-<script lang="ts">
-  /**
-   * Renders an image component.
-   *
-   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tideimage--docs) for TideImage
-   */
-  export default {};
-</script>
-
-<script lang="ts" setup>
-  import { computed, ref } from 'vue';
-
-  import { OBJECT_FIT } from '@/types/Image';
-  import { CSS } from '@/types/Styles';
-
-  import type { ObjectFit } from '@/types/Image';
-  import type { Source } from '@/types/Source';
-
-  type Props = {
-    /** Text display when image can't be loaded. */
-    alt?: string;
-
-    /** Apply a "height" attribute to the internal image tag (including unit). */
-    height?: string;
-
-    /** Determines whether to delay loading until image is in viewport. */
-    isLazy?: boolean;
-
-    /** Controls how the image scales within its box, effective only when image size differs from its intrinsic dimensions. */
-    objectFit?: ObjectFit;
-
-    /** Determines image sources by breakpoint. */
-    sources?: Source[];
-
-    /** Image URL. */
-    src?: string;
-
-    /** Apply a "width" attribute to the internal image tag (including unit). */
-    width?: string;
-  };
-
-  const props = withDefaults(defineProps<Props>(), {
-    alt: '',
-    height: undefined,
-    isLazy: true,
-    objectFit: OBJECT_FIT.COVER,
-    sources: () => [],
-    src: undefined,
-    width: undefined,
-  });
-
-  const picture = ref();
-  const img = ref();
-
-  const imageDefault = 'https://cdn-static.tilabs.io/marketplace/common/image-coming-soon.svg';
-
-  const objectFitClassName = computed<string>(() => {
-    switch (props.objectFit) {
-      case OBJECT_FIT.CONTAIN:
-        return CSS.OBJECT.CONTAIN;
-      case OBJECT_FIT.COVER:
-        return CSS.OBJECT.COVER;
-      case OBJECT_FIT.SCALE_DOWN:
-        return CSS.OBJECT.SCALE_DOWN;
-      default:
-        return OBJECT_FIT.COVER;
-    }
-  });
-
-  const setImageFromDefault = () => {
-    const currentSrc = img.value?.currentSrc;
-    const sources = picture.value?.querySelectorAll('source') ?? [];
-
-    if (!currentSrc) return;
-
-    for (const source of sources) {
-      const resolved = new URL(source.srcset, window.location.href).href;
-
-      if (resolved === currentSrc) {
-        source.remove();
-        return;
-      }
-    }
-    if (img.value?.getAttribute('src') !== imageDefault) {
-      img.value.src = imageDefault;
-    }
-  };
-</script>
-
-<template>
-  <picture
-    :class="['tide-image', CSS.DISPLAY.BLOCK]"
-    ref="picture"
-  >
-    <source
-      :key="source.srcset"
-      :media="`(min-width:${source.media}px)`"
-      :srcset="source.srcset"
-      v-for="source in props.sources"
-    />
-
-    <img
-      :alt="alt"
-      :class="[
-        'tide-image-img',
-        !props.width && CSS.WIDTH.FULL,
-        !props.height && CSS.HEIGHT.FULL,
-        CSS.OBJECT.CENTER,
-        objectFitClassName,
-      ]"
-      :fetchpriority="isLazy ? undefined : 'high'"
-      :height="props.height"
-      :loading="props.isLazy ? 'lazy' : 'eager'"
-      ref="img"
-      :src="src ?? imageDefault"
-      :width="props.width"
-      @error="setImageFromDefault"
-    />
-  </picture>
-</template>
-
-<style scoped>
-  .tide-image-img {
-    border-radius: inherit;
-  }
-</style>

package/src/components/TideImageBackground.vue

@@ -1,69 +0,0 @@
-<script lang="ts">
-  /**
-   * Renders an image background component.
-   *
-   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tideimagebackground--docs) for TideImageBackground
-   */
-  export default {};
-</script>
-
-<script lang="ts" setup>
-  import TideImage from '@/components/TideImage.vue';
-  import { OBJECT_FIT } from '@/types/Image';
-  import { CSS } from '@/types/Styles';
-
-  import type { Source } from '@/types/Source';
-
-  type Props = {
-    /** Text display when image can't be loaded. */
-    alt?: string;
-
-    /** Determines whether to delay loading until image is in viewport. */
-    isLazy?: boolean;
-
-    /** Determines image sources by breakpoint. */
-    sources?: Source[];
-
-    /** Image URL. */
-    src?: string;
-  };
-
-  const props = withDefaults(defineProps<Props>(), {
-    alt: '',
-    isLazy: true,
-    sources: () => [],
-    src: undefined,
-  });
-</script>
-
-<template>
-  <div :class="['tide-image-background', CSS.POSITION.RELATIVE, CSS.OVERFLOW.XY.HIDDEN, CSS.ISOLATION.ISOLATE]">
-    <div
-      :class="[
-        CSS.POSITION.ABSOLUTE,
-        CSS.HEIGHT.FULL,
-        CSS.WIDTH.FULL,
-        CSS.DISPLAY.FLEX,
-        CSS.AXIS1.CENTER,
-        CSS.AXIS2.CENTER,
-      ]"
-    >
-      <TideImage
-        :alt="props.alt"
-        :class="[CSS.WIDTH.FULL, CSS.HEIGHT.FULL]"
-        :is-lazy="props.isLazy"
-        :object-fit="OBJECT_FIT.COVER"
-        :sources="props.sources"
-        :src="props.src"
-      />
-    </div>
-
-    <slot />
-  </div>
-</template>
-
-<style scoped>
-  :deep(.tide-image) {
-    z-index: -1;
-  }
-</style>

package/src/components/TideIndicator.vue

@@ -1,63 +0,0 @@
-<script lang="ts">
-  /**
-   * Renders an indicator component.
-   *
-   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tideindicator--docs) for TideIndicator
-   */
-  export default {};
-</script>
-
-<script lang="ts" setup>
-  import { CSS } from '@/types/Styles';
-
-  type Props = {
-    /** Indicator text */
-    label?: string | number;
-  };
-
-  const props = withDefaults(defineProps<Props>(), {
-    label: undefined,
-  });
-</script>
-
-<template>
-  <div
-    :class="[
-      'tide-indicator',
-      props.label ? '' : 'dot',
-      CSS.DISPLAY.INLINE_BLOCK,
-      CSS.ALIGN.X.CENTER,
-      CSS.BG.GLOBAL.PRIMARY.ERROR,
-      CSS.BORDER.RADIUS.FULL,
-      props.label && props.label.toString().length > 1 ? [CSS.PADDING.X.HALF] : [],
-      props.label
-        ? [CSS.POSITION.RELATIVE, CSS.FONT.ROLE.LABEL_3, CSS.FONT.COLOR.SURFACE.INVERSE]
-        : [CSS.BORDER.FULL.ONE],
-    ]"
-  >
-    <div
-      :class="['tide-indicator-label']"
-      v-if="props.label"
-    >
-      {{ props.label }}
-    </div>
-  </div>
-</template>
-
-<style scoped>
-  .tide-indicator:not(.dot) {
-    min-width: 1rem;
-    min-height: 1rem;
-  }
-
-  .tide-indicator.dot {
-    border-color: var(--tide-gray-100);
-    width: 10px;
-    height: 10px;
-  }
-
-  .tide-indicator-label {
-    /* Use bottom-weighting to offset the mathematical center to the optical center. */
-    margin-top: -1px;
-  }
-</style>

package/src/components/TideInputCheckbox.vue

@@ -1,210 +0,0 @@
-<script lang="ts">
-  /**
-   * Renders an input checkbox component.
-   *
-   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tideinputcheckbox--docs) for TideInputCheckbox
-   */
-  export default {};
-</script>
-
-<script lang="ts" setup>
-  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 = {
-    /** Determines whether Checkbox state is interactable */
-    disabled?: boolean;
-
-    /** Overrides the default error message and valid state */
-    error?: string;
-
-    /** Determines whether Checkbox is indeterminate */
-    indeterminate?: boolean;
-
-    /** Unique ID attribute (to bind Checkbox label to input) */
-    inputId?: string;
-
-    /** Label content */
-    label: string;
-
-    /** Name attribute */
-    name?: string;
-
-    /** Parenthetical response count */
-    number?: number;
-
-    /** Determines whether input is required */
-    required?: boolean;
-  };
-
-  const props = withDefaults(defineProps<Props>(), {
-    disabled: false,
-    error: '',
-    indeterminate: false,
-    inputId: undefined,
-    label: undefined,
-    name: undefined,
-    number: undefined,
-    required: false,
-  });
-
-  type Emits = {
-    (event: 'valid', valid: boolean): void;
-  };
-  const emit = defineEmits<Emits>();
-
-  const modelValue = defineModel<boolean>({ required: true });
-
-  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.FONT.ROLE.BODY_1,
-        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],
-      ]"
-    >
-      <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"
-      >
-        <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 {
-    align-self: start;
-  }
-
-  .tide-input-checkbox-custom {
-    width: 24px;
-    height: 24px;
-  }
-
-  label:has(input:focus-visible) {
-    outline: auto;
-    outline-offset: 2px;
-  }
-</style>