design-system-next 1.7.2 → 1.8.2

package/src/components/progress-bar/progress-bar.ts

@@ -0,0 +1,39 @@
+import { PropType, ExtractPropTypes } from 'vue';
+
+const PROGRESS_BAR_SIZES = ['xs', 'sm', 'lg'] as const;
+
+export const progressBarPropTypes = {
+  size: {
+    type: String as PropType<(typeof PROGRESS_BAR_SIZES)[number]>,
+    validator: (value: (typeof PROGRESS_BAR_SIZES)[number]) => PROGRESS_BAR_SIZES.includes(value),
+    default: 'lg',
+  },
+  label: {
+    type: Boolean,
+    default: true,
+  },
+  value: {
+    type: Number,
+    default: 0,
+    validator(value: number, props: { max: number }) {
+      if (value < 0 || value > props.max) {
+        console.error(`Invalid prop: "value" (${value}) must be between 0 and ${props.max}.`);
+        return false;
+      }
+      return true;
+    },
+  },
+  max: {
+    type: Number,
+    default: 100,
+    validator(value: number) {
+      if (value <= 0 || value > 100) {
+        console.error('Invalid prop: "max" must be between 1 and 100.');
+        return false;
+      }
+      return true;
+    },
+  },
+};
+
+export type ProgressBarPropTypes = ExtractPropTypes<typeof progressBarPropTypes>;

package/src/components/progress-bar/progress-bar.vue

@@ -0,0 +1,29 @@
+<template>
+  <div
+    class="spr-flex spr-w-full spr-flex-col spr-gap-size-spacing-5xs"
+    :aria-valuemin="0"
+    :aria-valuemax="props.max || 100"
+    role="progressbar"
+  >
+    <div :class="[handleProgressBarSize, 'spr-overflow-hidden spr-rounded-lg spr-bg-white-100']">
+      <div
+        class="spr-background-color-success-base spr-transition-all spr-duration-300"
+        :style="handleProgressBarStyle"
+      ></div>
+    </div>
+    <span
+      v-if="props.label"
+      class="spr-text-color-base spr-font-weight-regular spr-font-size-100 spr-line-height-100 spr-font-main"
+      >{{ percentage }}%</span
+    >
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { progressBarPropTypes } from './progress-bar';
+import { useProgressBar } from './use-progress-bar';
+
+const props = defineProps(progressBarPropTypes);
+
+const { handleProgressBarSize, percentage, handleProgressBarStyle } = useProgressBar(props);
+</script>

package/src/components/progress-bar/use-progress-bar.ts

@@ -0,0 +1,31 @@
+import { computed } from 'vue';
+import type { ProgressBarPropTypes } from './progress-bar';
+
+export const useProgressBar = (props: ProgressBarPropTypes) => {
+  const handleProgressBarSize = computed<string>(() => {
+    switch (props.size) {
+      case 'xs':
+        return 'spr-h-1';
+      case 'sm':
+        return 'spr-h-2';
+      case 'lg':
+        return 'spr-h-3';
+      default:
+        return 'spr-h-3';
+    }
+  });
+  const percentage = computed<number>(() => Math.min((props.value / (props.max || 100)) * 100, 100));
+
+  const handleProgressBarStyle = computed<{ width: string; height: string }>(() => {
+    return {
+      width: percentage.value + '%',
+      height: '100%',
+    };
+  });
+
+  return {
+    handleProgressBarSize,
+    percentage,
+    handleProgressBarStyle,
+  };
+};

package/src/components/slider/slider.vue

@@ -3,8 +3,8 @@
     ref="sliderRef"
     :class="[
       handleSliderSize,
-      'spr-relative spr-w-full spr-cursor-pointer spr-rounded-lg spr-bg-white-100',
-      { 'spr-pointer-events-none spr-opacity-50': props.disabled },
+      'spr-relative spr-w-full spr-rounded-lg spr-bg-white-100',
+      props.disabled ? 'spr-cursor-not-allowed spr-opacity-50' : 'spr-cursor-pointer',
     ]"
     role="slider"
     :aria-valuenow="props.modelValue"
@@ -18,6 +18,7 @@
       :class="[
         handleSliderSize,
         'spr-absolute spr-left-0 spr-top-1/2 spr--translate-y-1/2 spr-rounded-lg spr-bg-kangkong-600',
+        { 'spr-cursor-not-allowed': props.disabled },
       ]"
       :style="handleSliderStyle"
     ></div>
@@ -26,8 +27,8 @@
       icon="ph:circle-fill"
       :class="[
         handleSliderThumbSize,
-        'spr-absolute spr-top-1/2 spr--translate-x-1/2 spr--translate-y-1/2 spr-transform spr-rounded-full spr-text-kangkong-600 hover:spr-text-kangkong-700 active:spr-text-kangkong-800 active:spr-border-2 active:spr-border-solid',
-        { 'spr-pointer-events-none': props.disabled },
+        'spr-absolute spr-top-1/2 spr--translate-x-1/2 spr--translate-y-1/2 spr-transform spr-rounded-full spr-text-kangkong-600 hover:spr-text-kangkong-700 active:spr-border-2 active:spr-border-solid active:spr-text-kangkong-800',
+        { 'spr-pointer-events-none spr-cursor-not-allowed': props.disabled },
       ]"
       :style="handleThumbStyle"
       @pointerdown="startDrag"
@@ -35,7 +36,7 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { useSlider } from './use-slider';
 import { sliderPropTypes } from './slider';
 import { Icon } from '@iconify/vue';

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

@@ -1,27 +1,27 @@
 <template>
-  <div :class="tablePaginationBaseClass">
+  <div :class="paginationClasses.baseClass">
     <spr-dropdown 
       :menu="dropdownSelection" 
       dropdown-type="single-select"
       placement="bottom"
       @get-selected-item="handleSelectedItem"
     >
-      <spr-input :class="dropdownInputFieldClass" v-model="computeSelectedRowCount" :readonly="true">
+      <spr-input v-model="computeSelectedRowCount" :class="paginationClasses.dropdownInputFieldClass" :readonly="true">
         <template #icon>
-          <Icon icon="ph:caret-down" />
+          <Icon icon="ph:caret-down-bold" :class="paginationClasses.inputFieldIconClass"/>
         </template>
       </spr-input>
     </spr-dropdown>
 
-    <div :class="paginationRightSideClass">
-      <div :class="computeRowRangeClass">
+    <div :class="paginationClasses.rightSideClass">
+      <div :class="paginationClasses.computeRowRangeClass">
         {{ computeRowRange }}
       </div>
-      <div :class="navigationContainerClass">
-        <spr-button hasIcon :class="navigationButtonClasses" @click="previous" :disabled="disabledNext">
+      <div :class="paginationClasses.navigationContainerClass">
+        <spr-button has-icon :class="paginationClasses.navigationButtonClass" :disabled="disabledNext" @click="previous" >
           <Icon icon="ph:caret-left"/>
         </spr-button>
-        <spr-button hasIcon :class="navigationButtonClasses" @click="next" :disabled="disabledPrevious">
+        <spr-button has-icon :class="paginationClasses.navigationButtonClass" :disabled="disabledPrevious" @click="next" >
           <Icon icon="ph:caret-right"/>
         </spr-button>
       </div>
@@ -42,15 +42,10 @@ const emit = defineEmits(tablePaginationEmitTypes);
 const props = defineProps(tablePaginationPropTypes);
 
 const {
-  tablePaginationBaseClass,
-  dropdownInputFieldClass,
-  paginationRightSideClass,
-  computeRowRangeClass,
-  navigationContainerClass,
+  paginationClasses,
   handleSelectedItem,
   computeRowRange,
   computeSelectedRowCount,
-  navigationButtonClasses,
   next,
   previous,
   disabledNext,

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

@@ -1,19 +1,42 @@
 import { computed, ref, toRefs } from 'vue';
-import type { SetupContext } from 'vue';
+import type { ComputedRef, SetupContext } from 'vue';
 
 import type { TablePaginationPropTypes, TablePaginationEmitTypes } from '@/components/table/table-pagination/table-pagination';
 import type { DropdownMenuType } from '@/components/dropdown/dropdown';
 
-export const useTablePagination = (props: TablePaginationPropTypes, emit:SetupContext<TablePaginationEmitTypes>['emit'] ) => {
+interface TablePaginationClasses {
+  baseClass: string;
+  dropdownInputFieldClass: string;
+  rightSideClass: string;
+  computeRowRangeClass: string;
+  navigationContainerClass: string;
+  inputFieldIconClass: string;
+  navigationButtonClass: string;
+}
+
+export const useTablePagination = (props: TablePaginationPropTypes, emit: SetupContext<TablePaginationEmitTypes>['emit']) => {
   const { selectedRowCount, currentPage, totalItems } = toRefs(props);
 
-  const tablePaginationBaseClass = 'spr-p-size-spacing-xs spr-flex spr-justify-between spr-bg-white-50 spr-h-max' as const
-  const dropdownInputFieldClass = 'spr-w-[110px]' as const
-  const paginationRightSideClass = 'spr-flex spr-justify-between spr-items-center spr-space-x-4' as const
-  const computeRowRangeClass = 'spr-font-main spr-text-color-base' as const
+  const paginationClasses: ComputedRef<TablePaginationClasses> = computed(() => {
+    const baseClass = 'spr-p-size-spacing-xs spr-flex spr-justify-between spr-bg-white-50 spr-h-max' as const;
+    const dropdownInputFieldClass = 'spr-w-[100px] spr-font-bold spr-h-full spr-space-x-2' as const;
+    const inputFieldIconClass = 'spr-mt-0.5 spr-pl-1 spr-text-mushroom-950' as const;
+    const rightSideClass = 'spr-flex spr-justify-between spr-items-center spr-space-x-4' as const;
+    const computeRowRangeClass = 'spr-font-main spr-text-color-base' as const;
+    const navigationContainerClass = 'spr-flex spr-space-x-2' as const;
+    const navigationButtonClass = 'spr-rounded-border-radius-md' as const;
+    return {
+      baseClass,
+      dropdownInputFieldClass,
+      rightSideClass,
+      computeRowRangeClass,
+      inputFieldIconClass,
+      navigationContainerClass,
+      navigationButtonClass
+    };
+  });
+
   const dropdownSelection = ref(props.dropdownSelection);
-  const navigationContainerClass = 'spr-flex spr-space-x-2' as const
-  const navigationButtonClasses = 'spr-rounded-border-radius-md' as const
   const computeRowRange = computed(() => {
     const startRow = (currentPage.value - 1) * selectedRowCount.value + 1;
     const endRow = Math.min(currentPage.value * selectedRowCount.value, totalItems.value);
@@ -45,15 +68,10 @@ export const useTablePagination = (props: TablePaginationPropTypes, emit:SetupCo
   })
 
   return {
-    tablePaginationBaseClass,
-    dropdownInputFieldClass,
-    paginationRightSideClass,
-    computeRowRangeClass,
-    navigationContainerClass,
+    paginationClasses,
     handleSelectedItem,
     computeRowRange,
     computeSelectedRowCount,
-    navigationButtonClasses,
     next,
     previous,
     disabledNext,

package/src/components/table/table.vue

@@ -20,7 +20,7 @@
       </spr-table-actions>
     </div>
 
-    <div class="spr-h-[400px]">
+    <div class="spr-max-h-85vh">
       <table aria-describedby="describe" class="spr-w-full spr-table-fixed" cellspacing="0" cellpadding="0">
         <thead>
           <tr>
@@ -145,7 +145,7 @@
         </tbody>
       </table>
     </div>
-    <div v-if="$slots.footer" class="spr-w-full spr-border spr-border-solid spr-border-color-weak spr-mt-10" >
+    <div v-if="$slots.footer" class="spr-w-full spr-border spr-border-solid spr-border-color-weak" >
       <slot name="footer"/>
     </div>
   </div>