design-system-next 2.19.4 → 2.20.0

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>

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

@@ -1,22 +1,22 @@
-import { computed } from 'vue';
-import type { TableChipsTitlePropTypes } from '@/components/table/table-chips-title/table-chips-title';
-
-export const useTableChipsTitle = (props: TableChipsTitlePropTypes) => {
-  const computeIcon = computed(() => props.cell?.icon || '');
-  const computeIconWeight = computed(() => props.cell?.iconWeight || 'regular');
-  const computeBadge = computed(() => props.cell?.badge || false);
-  const computeBadgeText = computed(() => props.cell?.badgeText || '');
-  const computeBadgeVariant = computed(() => props.cell?.badgeVariant || 'primary');
-  const computeAvatarUrl = computed(() => props.cell?.avatarUrl);
-  const computeAvatarVariant = computed(() => props.cell?.avatarVariant || 'image');
-
-  return {
-    computeIcon,
-    computeIconWeight,
-    computeBadge,
-    computeBadgeText,
-    computeBadgeVariant,
-    computeAvatarUrl,
-    computeAvatarVariant,
-  };
-};
+import { computed } from 'vue';
+import type { TableChipsTitlePropTypes } from '@/components/table/table-chips-title/table-chips-title';
+
+export const useTableChipsTitle = (props: TableChipsTitlePropTypes) => {
+  const computeIcon = computed(() => props.cell?.icon || '');
+  const computeIconWeight = computed(() => props.cell?.iconWeight || 'regular');
+  const computeBadge = computed(() => props.cell?.badge || false);
+  const computeBadgeText = computed(() => props.cell?.badgeText || '');
+  const computeBadgeVariant = computed(() => props.cell?.badgeVariant || 'primary');
+  const computeAvatarUrl = computed(() => props.cell?.avatarUrl);
+  const computeAvatarVariant = computed(() => props.cell?.avatarVariant || 'image');
+
+  return {
+    computeIcon,
+    computeIconWeight,
+    computeBadge,
+    computeBadgeText,
+    computeBadgeVariant,
+    computeAvatarUrl,
+    computeAvatarVariant,
+  };
+};

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

@@ -1,23 +1,23 @@
-import type { PropType, ExtractPropTypes } from 'vue';
-import type { LOZENGE_TONE } from '@/components/lozenge/lozenge';
-export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
-
-export interface LozengeTitle {
-  title: string;
-  fill?: boolean;
-  avatarUrl?: string;
-  tone?: (typeof LOZENGE_TONE)[number];
-  icon?: string;
-}
-
-export const tableLozengesTitlePropTypes = {
-  /**
-   * @description Cell Content,
-   */
-  cell: {
-    type: definePropType<LozengeTitle>(Object),
-    required: true,
-  },
-};
-
-export type TableLozengeTitlePropTypes = ExtractPropTypes<typeof tableLozengesTitlePropTypes>;
+import type { PropType, ExtractPropTypes } from 'vue';
+import type { LOZENGE_TONE } from '@/components/lozenge/lozenge';
+export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
+
+export interface LozengeTitle {
+  title: string;
+  fill?: boolean;
+  avatarUrl?: string;
+  tone?: (typeof LOZENGE_TONE)[number];
+  icon?: string;
+}
+
+export const tableLozengesTitlePropTypes = {
+  /**
+   * @description Cell Content,
+   */
+  cell: {
+    type: definePropType<LozengeTitle>(Object),
+    required: true,
+  },
+};
+
+export type TableLozengeTitlePropTypes = ExtractPropTypes<typeof tableLozengesTitlePropTypes>;

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

@@ -1,26 +1,26 @@
-<template>
-  <spr-lozenge
-    :label="props.cell?.title"
-    :tone="computeTone"
-    :url="props.cell?.avatarUrl"
-    :fill="computeFill"
-  >
-    <template v-if="props.cell?.icon" #icon>
-      <Icon :icon="props.cell?.icon" />
-    </template>
-  </spr-lozenge>
-</template>
-
-
-<script lang="ts" setup>
-import SprLozenge from '@/components/lozenge/lozenge.vue';
-import { Icon } from '@iconify/vue';
-
-
-import { tableLozengesTitlePropTypes } from '@/components/table/table-lozenge-title/table-lozenge-title';
-import { useTableLozengeTitle } from './use-table-lozenge-title';
-
-const props = defineProps(tableLozengesTitlePropTypes);
-
-const { computeTone, computeFill} = useTableLozengeTitle(props);
-</script>
+<template>
+  <spr-lozenge
+    :label="props.cell?.title"
+    :tone="computeTone"
+    :url="props.cell?.avatarUrl"
+    :fill="computeFill"
+  >
+    <template v-if="props.cell?.icon" #icon>
+      <Icon :icon="props.cell?.icon" />
+    </template>
+  </spr-lozenge>
+</template>
+
+
+<script lang="ts" setup>
+import SprLozenge from '@/components/lozenge/lozenge.vue';
+import { Icon } from '@iconify/vue';
+
+
+import { tableLozengesTitlePropTypes } from '@/components/table/table-lozenge-title/table-lozenge-title';
+import { useTableLozengeTitle } from './use-table-lozenge-title';
+
+const props = defineProps(tableLozengesTitlePropTypes);
+
+const { computeTone, computeFill} = useTableLozengeTitle(props);
+</script>

package/src/components/table/table-lozenge-title/use-table-lozenge-title.ts

@@ -1,21 +1,21 @@
-import { computed } from 'vue';
-import type { TableLozengeTitlePropTypes } from './table-lozenge-title';
-
-export const useTableLozengeTitle= (
-  props: TableLozengeTitlePropTypes,
-) => {
-  
-  const computeTone = computed(() => {
-    return props.cell?.tone || 'plain';
-  });
-
-  const computeFill = computed(() => {
-    return props.cell?.fill || false;
-  });
-
-
-  return {
-    computeTone,
-    computeFill,
-  };
-};
+import { computed } from 'vue';
+import type { TableLozengeTitlePropTypes } from './table-lozenge-title';
+
+export const useTableLozengeTitle= (
+  props: TableLozengeTitlePropTypes,
+) => {
+  
+  const computeTone = computed(() => {
+    return props.cell?.tone || 'plain';
+  });
+
+  const computeFill = computed(() => {
+    return props.cell?.fill || false;
+  });
+
+
+  return {
+    computeTone,
+    computeFill,
+  };
+};