design-system-next 2.20.1 → 2.20.5

package/src/components/sidepanel/stacking-sidepanel/stacking-sidepanel.vue

@@ -1,39 +1,39 @@
-<template>
-  <div v-if="activePanels.length > 0" :class="stackingSidepanelClasses.sidepanelStackBackdropClasses"></div>
-  <div
-    ref="stacking-sidepanel-base"
-    :class="[stackingSidepanelClasses.sidepanelStackBaseClasses]"
-    :style="stackingSidepanelBaseTransform"
-  >
-    <transition-group
-      :enter-active-class="stackingSidepanelClasses.sidepanelStackTransitionEnterActiveClasses"
-      :leave-active-class="stackingSidepanelClasses.sidepanelStackTransitionLeaveActiveClasses"
-      :move-class="stackingSidepanelClasses.sidepanelStackMoveClasses"
-      :enter-from-class="stackingSidepanelClasses.sidepanelStackEnterFromClasses"
-      :leave-to-class="stackingSidepanelClasses.sidepanelStackLeaveToClasses"
-      appear
-    >
-      <div v-for="name in activePanels" :key="name">
-        <slot :name="name" />
-      </div>
-    </transition-group>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useTemplateRef } from 'vue';
-import { useStackingSidepanel } from './use-stacking-sidepanel';
-import { stackingSidePanelProps, stackingSidePanelEmits } from './stacking-sidepanel';
-
-const stackingSidepanelBase = useTemplateRef('stacking-sidepanel-base');
-const props = defineProps(stackingSidePanelProps);
-const emits = defineEmits(stackingSidePanelEmits);
-
-const { showPanel, hidePanel, stackingSidepanelClasses, stackingSidepanelBaseTransform, activePanels } =
-  useStackingSidepanel(props, emits, stackingSidepanelBase);
-
-defineExpose({
-  showPanel,
-  hidePanel,
-});
-</script>
+<template>
+  <div v-if="activePanels.length > 0" :class="stackingSidepanelClasses.sidepanelStackBackdropClasses"></div>
+  <div
+    ref="stacking-sidepanel-base"
+    :class="[stackingSidepanelClasses.sidepanelStackBaseClasses]"
+    :style="stackingSidepanelBaseTransform"
+  >
+    <transition-group
+      :enter-active-class="stackingSidepanelClasses.sidepanelStackTransitionEnterActiveClasses"
+      :leave-active-class="stackingSidepanelClasses.sidepanelStackTransitionLeaveActiveClasses"
+      :move-class="stackingSidepanelClasses.sidepanelStackMoveClasses"
+      :enter-from-class="stackingSidepanelClasses.sidepanelStackEnterFromClasses"
+      :leave-to-class="stackingSidepanelClasses.sidepanelStackLeaveToClasses"
+      appear
+    >
+      <div v-for="name in activePanels" :key="name">
+        <slot :name="name" />
+      </div>
+    </transition-group>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useTemplateRef } from 'vue';
+import { useStackingSidepanel } from './use-stacking-sidepanel';
+import { stackingSidePanelProps, stackingSidePanelEmits } from './stacking-sidepanel';
+
+const stackingSidepanelBase = useTemplateRef('stacking-sidepanel-base');
+const props = defineProps(stackingSidePanelProps);
+const emits = defineEmits(stackingSidePanelEmits);
+
+const { showPanel, hidePanel, stackingSidepanelClasses, stackingSidepanelBaseTransform, activePanels } =
+  useStackingSidepanel(props, emits, stackingSidepanelBase);
+
+defineExpose({
+  showPanel,
+  hidePanel,
+});
+</script>

package/src/components/slider/slider.ts

@@ -1,38 +1,38 @@
-import type { PropType, ExtractPropTypes } from 'vue';
-const SLIDER_SIZES = ['sm','lg'] as const;
-
-export const sliderPropTypes = {
-  size: {
-    type: String as PropType<(typeof SLIDER_SIZES)[number]>,
-    validator: (value: (typeof SLIDER_SIZES)[number]) => SLIDER_SIZES.includes(value),
-    default: 'lg',
-  },
-  min: {
-    type: Number,
-    default: 0,
-  },
-  max: {
-    type: Number,
-    default: 100,
-  },
-  step: {
-    type: Number,
-    default: 1,
-  },
-  modelValue: {
-    type: Number,
-    default: 0,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  }
-};
-
-export const sliderEmits = {
-  'update:modelValue': (value: number): value is number => typeof value === 'number',
-  slideend: (value: number): value is number => typeof value === 'number',
-};
-
-export type SliderPropTypes = ExtractPropTypes<typeof sliderPropTypes>;
-export type SliderEmitTypes = typeof sliderEmits;
+import type { PropType, ExtractPropTypes } from 'vue';
+const SLIDER_SIZES = ['sm','lg'] as const;
+
+export const sliderPropTypes = {
+  size: {
+    type: String as PropType<(typeof SLIDER_SIZES)[number]>,
+    validator: (value: (typeof SLIDER_SIZES)[number]) => SLIDER_SIZES.includes(value),
+    default: 'lg',
+  },
+  min: {
+    type: Number,
+    default: 0,
+  },
+  max: {
+    type: Number,
+    default: 100,
+  },
+  step: {
+    type: Number,
+    default: 1,
+  },
+  modelValue: {
+    type: Number,
+    default: 0,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  }
+};
+
+export const sliderEmits = {
+  'update:modelValue': (value: number): value is number => typeof value === 'number',
+  slideend: (value: number): value is number => typeof value === 'number',
+};
+
+export type SliderPropTypes = ExtractPropTypes<typeof sliderPropTypes>;
+export type SliderEmitTypes = typeof sliderEmits;

package/src/components/snackbar/snack/snack.ts

@@ -1,71 +1,71 @@
-import type { PropType, ExtractPropTypes } from 'vue';
-
-// export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
-
-export const SNACKBAR_TONES = ['success', 'information', 'danger', 'caution'] as const;
-type ActionIconProps = {
-  icon: string;
-  tone: 'neutral' | 'success' | 'danger'
-}
-
-export const snackPropTypes = {
-  /**
-   * @description Text label shown in snack
-   */
-  text: {
-    type: String,
-    required: true,
-  },
-  /**
-   * @description Snack tone either as 'success', 'information', 'danger', 'caution'
-   */
-  tone: {
-    type: String as PropType<(typeof SNACKBAR_TONES)[number]>,
-    validator: (value: (typeof SNACKBAR_TONES)[number]) => SNACKBAR_TONES.includes(value),
-    default: 'information',
-  },
-  /**
-   * @description To show action label in snack. Default is false
-   */
-  showAction: {
-    type: Boolean,
-    default: false,
-  },
-  /**
-   * @description Text label for the action function.
-   */
-  actionText: {
-    type: String,
-    default: "action",
-  },
-  /**
-   * @description On click function of the action text.
-   */
-  action: {
-    type: Function,
-    default: () => {},
-  },
-  /**
-   * @description To show icon in snack. Default is false.
-   */
-  showIcon: {
-    type: Boolean,
-    default: false,
-  },
-  /**
-   * @description Duration to show snack. Default is 4000 ms (4s) declared on store
-   */
-  duration: {
-    type: Number,
-  },
-  actionIconProps: {
-    type: Object as PropType<ActionIconProps>,
-  },
-};
-
-export const snackEmitTypes = {
-  click: (evt: MouseEvent): evt is MouseEvent => evt instanceof MouseEvent,
-};
-
-export type SnackPropTypes = ExtractPropTypes<typeof snackPropTypes>;
-export type SnackEmitTypes = typeof snackEmitTypes;
+import type { PropType, ExtractPropTypes } from 'vue';
+
+// export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
+
+export const SNACKBAR_TONES = ['success', 'information', 'danger', 'caution'] as const;
+type ActionIconProps = {
+  icon: string;
+  tone: 'neutral' | 'success' | 'danger'
+}
+
+export const snackPropTypes = {
+  /**
+   * @description Text label shown in snack
+   */
+  text: {
+    type: String,
+    required: true,
+  },
+  /**
+   * @description Snack tone either as 'success', 'information', 'danger', 'caution'
+   */
+  tone: {
+    type: String as PropType<(typeof SNACKBAR_TONES)[number]>,
+    validator: (value: (typeof SNACKBAR_TONES)[number]) => SNACKBAR_TONES.includes(value),
+    default: 'information',
+  },
+  /**
+   * @description To show action label in snack. Default is false
+   */
+  showAction: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * @description Text label for the action function.
+   */
+  actionText: {
+    type: String,
+    default: "action",
+  },
+  /**
+   * @description On click function of the action text.
+   */
+  action: {
+    type: Function,
+    default: () => {},
+  },
+  /**
+   * @description To show icon in snack. Default is false.
+   */
+  showIcon: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * @description Duration to show snack. Default is 4000 ms (4s) declared on store
+   */
+  duration: {
+    type: Number,
+  },
+  actionIconProps: {
+    type: Object as PropType<ActionIconProps>,
+  },
+};
+
+export const snackEmitTypes = {
+  click: (evt: MouseEvent): evt is MouseEvent => evt instanceof MouseEvent,
+};
+
+export type SnackPropTypes = ExtractPropTypes<typeof snackPropTypes>;
+export type SnackEmitTypes = typeof snackEmitTypes;

package/src/components/snackbar/use-snackbar.ts

@@ -1,34 +1,34 @@
-import { SnackPropTypes } from "@/components/snackbar/snack/snack";
-import { useSnackbarStore } from '@/stores/useSnackbarStore';
-
-export const useSnackbar = () => {
-  const snackStore = useSnackbarStore();
-
-  const showSnackbar = (payload: SnackPropTypes) => {
-    snackStore.message(payload);
-  }
-
-  const showSuccess = (payload: SnackPropTypes) => {
-    snackStore.message({ ...payload, tone: "success"});
-  }
-
-  const showInformation = (payload: SnackPropTypes) => {
-    snackStore.message({ ...payload, tone: "information"});
-  }
-
-  const showDanger = (payload: SnackPropTypes) => {
-    snackStore.message({ ...payload, tone: "danger"});
-  }
-
-  const showCaution = (payload: SnackPropTypes) => {
-    snackStore.message({ ...payload, tone: "caution"});
-  }
-
-  return {
-    showSnackbar,
-    showSuccess,
-    showInformation,
-    showDanger,
-    showCaution,
-  }
-}
+import { SnackPropTypes } from "@/components/snackbar/snack/snack";
+import { useSnackbarStore } from '@/stores/useSnackbarStore';
+
+export const useSnackbar = () => {
+  const snackStore = useSnackbarStore();
+
+  const showSnackbar = (payload: SnackPropTypes) => {
+    snackStore.message(payload);
+  }
+
+  const showSuccess = (payload: SnackPropTypes) => {
+    snackStore.message({ ...payload, tone: "success"});
+  }
+
+  const showInformation = (payload: SnackPropTypes) => {
+    snackStore.message({ ...payload, tone: "information"});
+  }
+
+  const showDanger = (payload: SnackPropTypes) => {
+    snackStore.message({ ...payload, tone: "danger"});
+  }
+
+  const showCaution = (payload: SnackPropTypes) => {
+    snackStore.message({ ...payload, tone: "caution"});
+  }
+
+  return {
+    showSnackbar,
+    showSuccess,
+    showInformation,
+    showDanger,
+    showCaution,
+  }
+}

package/src/components/status/status.ts

@@ -1,19 +1,19 @@
-import type { PropType, ExtractPropTypes } from 'vue';
-
-const STATUS_STATES = ['success', 'information', 'pending', 'caution', 'danger'] as const;
-const STATUS_SIZES = ['2xs', 'xs', 'sm', 'base', 'lg', 'xl', '2xl'] as const;
-
-export const statusPropTypes = {
-  state: {
-    type: String as PropType<(typeof STATUS_STATES)[number]>,
-    validator: (value: (typeof STATUS_STATES)[number]) => STATUS_STATES.includes(value),
-    default: 'success',
-  },
-  size: {
-    type: String as PropType<(typeof STATUS_SIZES)[number]>,
-    validator: (value: (typeof STATUS_SIZES)[number]) => STATUS_SIZES.includes(value),
-    default: 'base',
-  },
-};
-
-export type StatusPropTypes = ExtractPropTypes<typeof statusPropTypes>;
+import type { PropType, ExtractPropTypes } from 'vue';
+
+const STATUS_STATES = ['success', 'information', 'pending', 'caution', 'danger'] as const;
+const STATUS_SIZES = ['2xs', 'xs', 'sm', 'base', 'lg', 'xl', '2xl'] as const;
+
+export const statusPropTypes = {
+  state: {
+    type: String as PropType<(typeof STATUS_STATES)[number]>,
+    validator: (value: (typeof STATUS_STATES)[number]) => STATUS_STATES.includes(value),
+    default: 'success',
+  },
+  size: {
+    type: String as PropType<(typeof STATUS_SIZES)[number]>,
+    validator: (value: (typeof STATUS_SIZES)[number]) => STATUS_SIZES.includes(value),
+    default: 'base',
+  },
+};
+
+export type StatusPropTypes = ExtractPropTypes<typeof statusPropTypes>;

package/src/components/status/status.vue

@@ -1,13 +1,13 @@
-<template>
-  <Icon :icon="statusIcon"  :class="[statusClass, statusSize]" :aria-label="statusDescription" />
-</template>
-
-<script lang="ts" setup>
-import { Icon } from '@iconify/vue';
-import { statusPropTypes } from './status';
-import { useStatus } from './use-status';
-
-const props = defineProps(statusPropTypes);
-
-const { statusIcon, statusClass, statusDescription, statusSize} = useStatus(props);
-</script>
+<template>
+  <Icon :icon="statusIcon"  :class="[statusClass, statusSize]" :aria-label="statusDescription" />
+</template>
+
+<script lang="ts" setup>
+import { Icon } from '@iconify/vue';
+import { statusPropTypes } from './status';
+import { useStatus } from './use-status';
+
+const props = defineProps(statusPropTypes);
+
+const { statusIcon, statusClass, statusDescription, statusSize} = useStatus(props);
+</script>

package/src/components/stepper/step/step.ts

@@ -1,47 +1,47 @@
-import type { ExtractPropTypes, PropType } from 'vue';
-import { STEPPER_TYPE } from '../stepper';
-
-export const STEP_STATES = ['pending', 'active', 'completed'] as const;
-
-export const stepPropTypes = {
-  /**
-   * @description Step number
-   */
-  number: {
-    type: Number,
-    required: true,
-  },
-  /**
-   * @description Text label shown in step
-   */
-  label: {
-    type: String,
-    required: false,
-  },
-  description: {
-    type: String,
-    required: false,
-  },
-  /**
-   * @description Step state either as 'pending', 'active', 'completed'
-   */
-  status: {
-    type: String as PropType<(typeof STEP_STATES)[number]>,
-    validator: (value: (typeof STEP_STATES)[number]) => STEP_STATES.includes(value),
-    default: 'pending',
-  },
-  /**
-     * @description Display type of stepper if displayed as compact (no solid bg color) or solid
-     */
-  type: {
-    type: String as PropType<(typeof STEPPER_TYPE)[number]>,
-    validator: (value: (typeof STEPPER_TYPE)[number]) => STEPPER_TYPE.includes(value),
-  }
-};
-
-export const stepEmitTypes = {
-  click: (evt: MouseEvent): evt is MouseEvent => evt instanceof MouseEvent,
-};
-
-export type StepPropTypes = ExtractPropTypes<typeof stepPropTypes>;
-export type StepEmitTypes = typeof stepEmitTypes;
+import type { ExtractPropTypes, PropType } from 'vue';
+import { STEPPER_TYPE } from '../stepper';
+
+export const STEP_STATES = ['pending', 'active', 'completed'] as const;
+
+export const stepPropTypes = {
+  /**
+   * @description Step number
+   */
+  number: {
+    type: Number,
+    required: true,
+  },
+  /**
+   * @description Text label shown in step
+   */
+  label: {
+    type: String,
+    required: false,
+  },
+  description: {
+    type: String,
+    required: false,
+  },
+  /**
+   * @description Step state either as 'pending', 'active', 'completed'
+   */
+  status: {
+    type: String as PropType<(typeof STEP_STATES)[number]>,
+    validator: (value: (typeof STEP_STATES)[number]) => STEP_STATES.includes(value),
+    default: 'pending',
+  },
+  /**
+     * @description Display type of stepper if displayed as compact (no solid bg color) or solid
+     */
+  type: {
+    type: String as PropType<(typeof STEPPER_TYPE)[number]>,
+    validator: (value: (typeof STEPPER_TYPE)[number]) => STEPPER_TYPE.includes(value),
+  }
+};
+
+export const stepEmitTypes = {
+  click: (evt: MouseEvent): evt is MouseEvent => evt instanceof MouseEvent,
+};
+
+export type StepPropTypes = ExtractPropTypes<typeof stepPropTypes>;
+export type StepEmitTypes = typeof stepEmitTypes;

package/src/components/stepper/stepper.ts

@@ -1,47 +1,47 @@
-import type { StepPropTypes } from '@/components/stepper/step/step';
-import type { ExtractPropTypes, PropType } from 'vue';
-
-export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
-const STEPPER_VARIANTS = ['horizontal', 'vertical'] as const;
-export const STEPPER_TYPE = ['compact', 'solid'];
-export const STEPPER_STATES = ['pending', 'active', 'completed'] as const;
-
-export const stepperPropTypes = {
-  /**
-   * @description Variant of the stepper
-   */
-  variant: {
-    type: String as PropType<(typeof STEPPER_VARIANTS)[number]>,
-    validator: (value: (typeof STEPPER_VARIANTS)[number]) => STEPPER_VARIANTS.includes(value),
-    default: 'vertical',
-  },
-  /**
-   * @description steps of the stepper
-   * @type {Array<Step>}
-   * @property {number} number - Step number
-   * @property {string} label - Text label shown in step
-   * @property {string} status - Step state either as 'pending', 'active', 'completed'
-   * @property {string} description - Description shown in step
-   */
-  steps: {
-    type: Array as PropType<StepPropTypes[]>,
-    default: () => [],
-  },
-  /**
-   * @description has lines between steps
-   */
-  hasLines: {
-    type: Boolean,
-    default: false,
-  },
-  /**
-   * @description Display type of stepper if displayed as compact (no solid bg color) or solid
-   */
-  type: {
-    type: String as PropType<(typeof STEPPER_TYPE)[number]>,
-    validator: (value: (typeof STEPPER_TYPE)[number]) => STEPPER_TYPE.includes(value),
-    default: 'compact',
-  }
-};
-
-export type StepperPropTypes = ExtractPropTypes<typeof stepperPropTypes>;
+import type { StepPropTypes } from '@/components/stepper/step/step';
+import type { ExtractPropTypes, PropType } from 'vue';
+
+export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
+const STEPPER_VARIANTS = ['horizontal', 'vertical'] as const;
+export const STEPPER_TYPE = ['compact', 'solid'];
+export const STEPPER_STATES = ['pending', 'active', 'completed'] as const;
+
+export const stepperPropTypes = {
+  /**
+   * @description Variant of the stepper
+   */
+  variant: {
+    type: String as PropType<(typeof STEPPER_VARIANTS)[number]>,
+    validator: (value: (typeof STEPPER_VARIANTS)[number]) => STEPPER_VARIANTS.includes(value),
+    default: 'vertical',
+  },
+  /**
+   * @description steps of the stepper
+   * @type {Array<Step>}
+   * @property {number} number - Step number
+   * @property {string} label - Text label shown in step
+   * @property {string} status - Step state either as 'pending', 'active', 'completed'
+   * @property {string} description - Description shown in step
+   */
+  steps: {
+    type: Array as PropType<StepPropTypes[]>,
+    default: () => [],
+  },
+  /**
+   * @description has lines between steps
+   */
+  hasLines: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * @description Display type of stepper if displayed as compact (no solid bg color) or solid
+   */
+  type: {
+    type: String as PropType<(typeof STEPPER_TYPE)[number]>,
+    validator: (value: (typeof STEPPER_TYPE)[number]) => STEPPER_TYPE.includes(value),
+    default: 'compact',
+  }
+};
+
+export type StepperPropTypes = ExtractPropTypes<typeof stepperPropTypes>;