design-system-next 2.20.0 → 2.20.4

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>;

package/src/components/stepper/stepper.vue

@@ -1,34 +1,34 @@
-<template>
-  <div :class="stepperClasses.baseClass">
-    <div v-for="(step, index) in props.steps" :key="index" :class="stepperClasses.stepClass">
-      <!-- STEP NUMBER -->
-      <spr-step
-        :number="step.number"
-        :label="step.label"
-        :status="step.status"
-        :description="step.description"
-        :type="props.type"
-      />
-
-      <!-- LINES -->
-      <!-- Line container -->
-      <div
-        v-if="props.hasLines && index < props.steps.length - 1"
-        :class="stepperClasses.lineContainerClass"
-      >
-        <!-- Actual line -->
-        <div :class="[stepperClasses.linesClass, getLineColorClass(step)]"/>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import SprStep from '@/components/stepper/step/step.vue';
-import { stepperPropTypes } from '@/components/stepper/stepper';
-import { useStepper } from '@/components/stepper/use-stepper';
-
-const props = defineProps(stepperPropTypes);
-
-const { stepperClasses, getLineColorClass} = useStepper(props);
-</script>
+<template>
+  <div :class="stepperClasses.baseClass">
+    <div v-for="(step, index) in props.steps" :key="index" :class="stepperClasses.stepClass">
+      <!-- STEP NUMBER -->
+      <spr-step
+        :number="step.number"
+        :label="step.label"
+        :status="step.status"
+        :description="step.description"
+        :type="props.type"
+      />
+
+      <!-- LINES -->
+      <!-- Line container -->
+      <div
+        v-if="props.hasLines && index < props.steps.length - 1"
+        :class="stepperClasses.lineContainerClass"
+      >
+        <!-- Actual line -->
+        <div :class="[stepperClasses.linesClass, getLineColorClass(step)]"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import SprStep from '@/components/stepper/step/step.vue';
+import { stepperPropTypes } from '@/components/stepper/stepper';
+import { useStepper } from '@/components/stepper/use-stepper';
+
+const props = defineProps(stepperPropTypes);
+
+const { stepperClasses, getLineColorClass} = useStepper(props);
+</script>

package/src/components/switch/switch.ts

@@ -1,42 +1,42 @@
-import type { PropType, ExtractPropTypes } from 'vue';
-
-export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
-const SWITCH_STATES = ['default', 'hover', 'pressed', 'disabled'] as const;
-
-export const switchPropTypes = {
-  /**
-   * @description Switch UI state when hovered, pressed, disabled
-   */
-  state: {
-    type: String as PropType<(typeof SWITCH_STATES)[number]>,
-    validator: (value: (typeof SWITCH_STATES)[number]) => SWITCH_STATES.includes(value),
-    default: 'default',
-  },
-  /**
-   * @description Switch input state when disabled
-   */
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  /**
-   * @description Required prop value for v-model
-   */
-  modelValue: {
-    type: Boolean,
-    required: true,
-    default: false,
-  },
-  /**
-   * @description Switch id
-   */
-  id: {
-    type: String,
-    default: '',
-  },
-};
-
-export const switchEmitTypes = ['update:modelValue'];
-
-export type SwitchPropTypes = ExtractPropTypes<typeof switchPropTypes>;
-export type SwitchEmitTypes = typeof switchEmitTypes;
+import type { PropType, ExtractPropTypes } from 'vue';
+
+export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
+const SWITCH_STATES = ['default', 'hover', 'pressed', 'disabled'] as const;
+
+export const switchPropTypes = {
+  /**
+   * @description Switch UI state when hovered, pressed, disabled
+   */
+  state: {
+    type: String as PropType<(typeof SWITCH_STATES)[number]>,
+    validator: (value: (typeof SWITCH_STATES)[number]) => SWITCH_STATES.includes(value),
+    default: 'default',
+  },
+  /**
+   * @description Switch input state when disabled
+   */
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * @description Required prop value for v-model
+   */
+  modelValue: {
+    type: Boolean,
+    required: true,
+    default: false,
+  },
+  /**
+   * @description Switch id
+   */
+  id: {
+    type: String,
+    default: '',
+  },
+};
+
+export const switchEmitTypes = ['update:modelValue'];
+
+export type SwitchPropTypes = ExtractPropTypes<typeof switchPropTypes>;
+export type SwitchEmitTypes = typeof switchEmitTypes;

package/src/components/table/table-actions/table-actions.ts

@@ -1,42 +1,42 @@
-import type { PropType, ExtractPropTypes } from 'vue';
-
-export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
-
-
-export const tableActionPropTypes = {
-  /**
-   * @description Toggle Search field,
-   */
-  toggleSearch: {
-    type: Boolean as PropType<boolean>,
-    default: false,
-  },
-  /**
-   * @description Toggle Option button
-   */
-  toggleOption: {
-    type: Boolean as PropType<boolean>,
-    default: false,
-  },
-  /**
-   * @description Toggle Filter Button
-   */
-  toggleFilter: {
-    type: Boolean as PropType<boolean>,
-    default: false,
-  },
-  /**
-   * @description Search variable
-   */
-  searchModel: {
-    type: String as PropType<string>,
-    default: '',
-  },
-};
-
-export const tableActionEmitTypes = {
-  'update:searchModel': (value: string): value is string => typeof value === 'string',
-};
-
-export type TableActionEmitTypes = { 'update:searchModel': typeof tableActionEmitTypes };
-export type TableActionPropTypes = ExtractPropTypes<typeof tableActionPropTypes>;
+import type { PropType, ExtractPropTypes } from 'vue';
+
+export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
+
+
+export const tableActionPropTypes = {
+  /**
+   * @description Toggle Search field,
+   */
+  toggleSearch: {
+    type: Boolean as PropType<boolean>,
+    default: false,
+  },
+  /**
+   * @description Toggle Option button
+   */
+  toggleOption: {
+    type: Boolean as PropType<boolean>,
+    default: false,
+  },
+  /**
+   * @description Toggle Filter Button
+   */
+  toggleFilter: {
+    type: Boolean as PropType<boolean>,
+    default: false,
+  },
+  /**
+   * @description Search variable
+   */
+  searchModel: {
+    type: String as PropType<string>,
+    default: '',
+  },
+};
+
+export const tableActionEmitTypes = {
+  'update:searchModel': (value: string): value is string => typeof value === 'string',
+};
+
+export type TableActionEmitTypes = { 'update:searchModel': typeof tableActionEmitTypes };
+export type TableActionPropTypes = ExtractPropTypes<typeof tableActionPropTypes>;

package/src/components/table/table-actions/table-actions.vue

@@ -1,40 +1,40 @@
-<template>
-  <div :class="tableActionsBaseClasses">
-    <slot name="tableActionSection">
-      <div :class="searchFilterClasses">
-        <spr-input-search  
-          v-if="props.toggleSearch" 
-          :model-value="props.searchModel"  
-          :class="inputSearchClasses" 
-          placeholder="Search"
-          @update:model-value="updateSearchField"
-        />
-        <spr-button v-if="props.toggleFilter" variant="secondary" has-icon>
-          <Icon icon="ph:sliders-horizontal"/>
-        </spr-button>
-      </div>
-      <spr-button v-if="props.toggleOption" >
-        <Icon icon="ph:dots-three-vertical"/>
-      </spr-button>
-    </slot>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useTableActions } from './use-table-actions';
-import SprInputSearch from '@/components/input/input-search/input-search.vue';
-import SprButton from '@/components/button/button.vue';
-import { Icon } from '@iconify/vue';
-import { tableActionEmitTypes, tableActionPropTypes } from './table-actions';
-
-const emit = defineEmits(tableActionEmitTypes);
-
-const props = defineProps(tableActionPropTypes);
-
-const {
-  tableActionsBaseClasses,
-  inputSearchClasses,
-  searchFilterClasses,
-  updateSearchField
-} = useTableActions(emit);
-</script>
+<template>
+  <div :class="tableActionsBaseClasses">
+    <slot name="tableActionSection">
+      <div :class="searchFilterClasses">
+        <spr-input-search  
+          v-if="props.toggleSearch" 
+          :model-value="props.searchModel"  
+          :class="inputSearchClasses" 
+          placeholder="Search"
+          @update:model-value="updateSearchField"
+        />
+        <spr-button v-if="props.toggleFilter" variant="secondary" has-icon>
+          <Icon icon="ph:sliders-horizontal"/>
+        </spr-button>
+      </div>
+      <spr-button v-if="props.toggleOption" >
+        <Icon icon="ph:dots-three-vertical"/>
+      </spr-button>
+    </slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useTableActions } from './use-table-actions';
+import SprInputSearch from '@/components/input/input-search/input-search.vue';
+import SprButton from '@/components/button/button.vue';
+import { Icon } from '@iconify/vue';
+import { tableActionEmitTypes, tableActionPropTypes } from './table-actions';
+
+const emit = defineEmits(tableActionEmitTypes);
+
+const props = defineProps(tableActionPropTypes);
+
+const {
+  tableActionsBaseClasses,
+  inputSearchClasses,
+  searchFilterClasses,
+  updateSearchField
+} = useTableActions(emit);
+</script>

package/src/components/table/table-chips-title/table-chips-title.ts

@@ -1,27 +1,27 @@
-import type { PropType, ExtractPropTypes } from 'vue';
-import type { AVATAR_VARIANT } from '@/components/avatar/avatar';
-import type { ICON_WEIGHTS } from '@/components/chips/chips';
-export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
-
-export interface ChipTitle {
-  title: string;
-  icon: string;
-  iconWeight: (typeof ICON_WEIGHTS)[number];
-  badge: boolean;
-  badgeText: string;
-  badgeVariant: string;
-  avatarUrl: string;
-  avatarVariant: (typeof AVATAR_VARIANT)[number];
-}
-
-export const tableChipsTitlePropTypes = {
-  /**
-   * @description Cell Content,
-   */
-  cell: {
-    type: definePropType<ChipTitle>(Object),
-    required: true,
-  },
-};
-
-export type TableChipsTitlePropTypes = ExtractPropTypes<typeof tableChipsTitlePropTypes>;
+import type { PropType, ExtractPropTypes } from 'vue';
+import type { AVATAR_VARIANT } from '@/components/avatar/avatar';
+import type { ICON_WEIGHTS } from '@/components/chips/chips';
+export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
+
+export interface ChipTitle {
+  title: string;
+  icon: string;
+  iconWeight: (typeof ICON_WEIGHTS)[number];
+  badge: boolean;
+  badgeText: string;
+  badgeVariant: string;
+  avatarUrl: string;
+  avatarVariant: (typeof AVATAR_VARIANT)[number];
+}
+
+export const tableChipsTitlePropTypes = {
+  /**
+   * @description Cell Content,
+   */
+  cell: {
+    type: definePropType<ChipTitle>(Object),
+    required: true,
+  },
+};
+
+export type TableChipsTitlePropTypes = ExtractPropTypes<typeof tableChipsTitlePropTypes>;

package/src/components/table/table-chips-title/table-chips-title.vue

@@ -1,32 +1,32 @@
-<template>
-  <spr-chips
-    :label="props.cell?.title"
-    :icon="computeIcon"
-    :icon-weight="computeIconWeight"
-    :badge="computeBadge"
-    :badge-text="computeBadgeText"
-    :badge-variant="computeBadgeVariant"
-    :avatar-url="computeAvatarUrl"
-    :avatar-variant="computeAvatarVariant"
-  />
-</template>
-
-
-<script lang="ts" setup>
-import SprChips from '@/components/chips/chips.vue';
-
-import { tableChipsTitlePropTypes } from '@/components/table/table-chips-title/table-chips-title';
-import { useTableChipsTitle } from './use-table-chips-title';
-
-const props = defineProps(tableChipsTitlePropTypes);
-
-const { 
-  computeIcon, 
-  computeIconWeight, 
-  computeBadge, 
-  computeBadgeText, 
-  computeBadgeVariant, 
-  computeAvatarUrl, 
-  computeAvatarVariant 
-} = useTableChipsTitle(props);
-</script>
+<template>
+  <spr-chips
+    :label="props.cell?.title"
+    :icon="computeIcon"
+    :icon-weight="computeIconWeight"
+    :badge="computeBadge"
+    :badge-text="computeBadgeText"
+    :badge-variant="computeBadgeVariant"
+    :avatar-url="computeAvatarUrl"
+    :avatar-variant="computeAvatarVariant"
+  />
+</template>
+
+
+<script lang="ts" setup>
+import SprChips from '@/components/chips/chips.vue';
+
+import { tableChipsTitlePropTypes } from '@/components/table/table-chips-title/table-chips-title';
+import { useTableChipsTitle } from './use-table-chips-title';
+
+const props = defineProps(tableChipsTitlePropTypes);
+
+const { 
+  computeIcon, 
+  computeIconWeight, 
+  computeBadge, 
+  computeBadgeText, 
+  computeBadgeVariant, 
+  computeAvatarUrl, 
+  computeAvatarVariant 
+} = useTableChipsTitle(props);
+</script>