design-system-next 2.11.22 → 2.12.1

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,
+  };
+};

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

@@ -1,63 +1,63 @@
-import type { PropType, ExtractPropTypes } from 'vue';
-
-export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
-
-// Current implem is backend, but we can add more types in the future
-// No behavior is implemented for checking this for now
-export const PAGINATION_TYPES = ['backend'] as const;
-
-export const tablePaginationPropTypes = {
-  /**
-   * @description Toggle Search field,
-   */
-  selectedRowCount: {
-    required: true,
-    type: Number as PropType<number>,
-    default: 10,
-  },
-  /**
-   * @description Toggle Option button
-   */
-  totalItems: {
-    required: true,
-    type: Number as PropType<number>,
-    default: 1,
-  },
-  /**
-   * @description Toggle Option button
-   */
-  currentPage: {
-    required: true,
-    type: Number as PropType<number>,
-    default: 1,
-  },
-  /**
-   * @description Menu items
-   */
-  dropdownSelection: {
-    type: Array as PropType<{ text: string; value: string }[]>,
-    required: true,
-    default: [
-      { text: 10, value: 10 },
-      { text: 20, value: 20 },
-      { text: 50, value: 50 },
-      { text: 100, value: 100 },
-    ],
-  },
-  /**
-   * @description Toggle Search field,
-   */
-  bordered: {
-    type: Boolean as PropType<boolean>,
-    default: true,
-  },
-};
-
-export const tablePaginationEmitTypes = {
-  'update:selectedRowCount': (value: number): value is number => typeof value === 'number',
-  previous: () => true,
-  next: () => true,
-};
-
-export type TablePaginationEmitTypes = typeof tablePaginationEmitTypes;
-export type TablePaginationPropTypes = ExtractPropTypes<typeof tablePaginationPropTypes>;
+import type { PropType, ExtractPropTypes } from 'vue';
+
+export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
+
+// Current implem is backend, but we can add more types in the future
+// No behavior is implemented for checking this for now
+export const PAGINATION_TYPES = ['backend'] as const;
+
+export const tablePaginationPropTypes = {
+  /**
+   * @description Toggle Search field,
+   */
+  selectedRowCount: {
+    required: true,
+    type: Number as PropType<number>,
+    default: 10,
+  },
+  /**
+   * @description Toggle Option button
+   */
+  totalItems: {
+    required: true,
+    type: Number as PropType<number>,
+    default: 1,
+  },
+  /**
+   * @description Toggle Option button
+   */
+  currentPage: {
+    required: true,
+    type: Number as PropType<number>,
+    default: 1,
+  },
+  /**
+   * @description Menu items
+   */
+  dropdownSelection: {
+    type: Array as PropType<{ text: string; value: string }[]>,
+    required: true,
+    default: [
+      { text: 10, value: 10 },
+      { text: 20, value: 20 },
+      { text: 50, value: 50 },
+      { text: 100, value: 100 },
+    ],
+  },
+  /**
+   * @description Toggle Search field,
+   */
+  bordered: {
+    type: Boolean as PropType<boolean>,
+    default: true,
+  },
+};
+
+export const tablePaginationEmitTypes = {
+  'update:selectedRowCount': (value: number): value is number => typeof value === 'number',
+  previous: () => true,
+  next: () => true,
+};
+
+export type TablePaginationEmitTypes = typeof tablePaginationEmitTypes;
+export type TablePaginationPropTypes = ExtractPropTypes<typeof tablePaginationPropTypes>;