fix(VsTable,VsSkeleton): apply vs-skeleton on table component (#265)

pubg · Aug 14, 2024 · 92e04af · 92e04af
1 parent c9d987f
commit 92e04af
Show file tree

Hide file tree

Showing 15 changed files with 109 additions and 54 deletions.
diff --git a/packages/vlossom/src/components/index.ts b/packages/vlossom/src/components/index.ts
@@ -90,6 +90,9 @@ export { default as VsSection } from './vs-section/VsSection.vue';
 export { type VsSelectStyleSet } from './vs-select/types';
 export { default as VsSelect } from './vs-select/VsSelect.vue';
 
+export { type VsSkeletonStyleSet } from './vs-skeleton/types';
+export { default as VsSkeleton } from './vs-skeleton/VsSkeleton.vue';
+
 export { type VsStepperStyleSet } from './vs-stepper/types';
 export { default as VsStepper } from './vs-stepper/VsStepper.vue';
 

diff --git a/packages/vlossom/src/components/vs-block/VsBlock.scss b/packages/vlossom/src/components/vs-block/VsBlock.scss
@@ -24,7 +24,7 @@ $blockBorder: var(--vs-block-border, 1px solid var(--vs-line-color));
         position: relative;
         width: 100%;
         font-weight: var(--vs-block-fontWeight, 400);
-        padding: var(--vs-block-padding, 1rem 1.8rem);
+        padding: var(--vs-block-padding, 1.6rem 1.8rem);
     }
 }
 

diff --git a/packages/vlossom/src/components/vs-modal/VsModal.scss b/packages/vlossom/src/components/vs-modal/VsModal.scss
@@ -46,7 +46,7 @@
         font-weight: var(--vs-modal-fontWeight, 400);
         box-shadow: var(--vs-modal-boxShadow, var(--vs-area-shadow-outer));
         transform: translate(-50%, -50%);
-        border-radius: var(--vs-modal-borderRadius, calc(var(--vs-radius-ratio) * 0.6rem));
+        border-radius: var(--vs-modal-borderRadius, calc(var(--vs-radius-ratio) * var(--vs-radius)));
         padding: var(--vs-modal-padding, 2rem);
         pointer-events: auto;
 

diff --git a/packages/vlossom/src/components/vs-section/VsSection.vue b/packages/vlossom/src/components/vs-section/VsSection.vue
@@ -6,15 +6,15 @@
         :grid="grid"
         :width="width"
     >
-        <div class="vs-section-title" v-if="hasTitle">
+        <div class="vs-section-title" v-if="$slots['title']">
             <slot name="title" />
         </div>
         <slot />
     </vs-responsive>
 </template>
 
 <script lang="ts">
-import { PropType, computed, defineComponent, toRefs } from 'vue';
+import { PropType, defineComponent, toRefs } from 'vue';
 import { getResponsiveProps, useColorScheme, useStyleSet } from '@/composables';
 import { VsComponent, type ColorScheme } from '@/declaration';
 import VsResponsive from '@/components/vs-responsive/VsResponsive.vue';
@@ -30,19 +30,16 @@ export default defineComponent({
         colorScheme: { type: String as PropType<ColorScheme> },
         styleSet: { type: [String, Object] as PropType<string | VsSectionStyleSet> },
     },
-    setup(props, { slots }) {
+    setup(props) {
         const { colorScheme, styleSet } = toRefs(props);
 
         const { colorSchemeClass } = useColorScheme(name, colorScheme);
 
         const { computedStyleSet } = useStyleSet<VsSectionStyleSet>(name, styleSet);
 
-        const hasTitle = computed(() => !!slots.title);
-
         return {
             colorSchemeClass,
             computedStyleSet,
-            hasTitle,
         };
     },
 });

diff --git a/packages/vlossom/src/components/vs-skeleton/VsSkeleton.scss b/packages/vlossom/src/components/vs-skeleton/VsSkeleton.scss
@@ -0,0 +1,18 @@
+.vs-skeleton {
+    position: relative;
+    width: var(--vs-skeleton-width, 100%);
+    height: var(--vs-skeleton-height, 100%);
+    border-radius: var(--vs-skeleton-borderRadius, calc(var(--vs-radius-ratio) * var(--vs-radius-sm)));
+    background-color: var(--vs-skeleton-backgroundColor, var(--vs-line-color));
+    animation: skeleton-blink 0.6s infinite alternate;
+}
+
+@keyframes skeleton-blink {
+    0% {
+        opacity: 0.1;
+    }
+
+    100% {
+        opacity: 0.3;
+    }
+}
diff --git a/packages/vlossom/src/components/vs-skeleton/VsSkeleton.vue b/packages/vlossom/src/components/vs-skeleton/VsSkeleton.vue
@@ -0,0 +1,36 @@
+<template>
+    <div :class="['vs-skeleton', colorSchemeClass]" :style="computedStyleSet">
+        <slot />
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, toRefs } from 'vue';
+import { ColorScheme, VsComponent } from '@/declaration';
+import { useColorScheme, useStyleSet } from '@/composables';
+
+import type { VsSkeletonStyleSet } from './types';
+
+const name = VsComponent.VsSkeleton;
+export default defineComponent({
+    name,
+    props: {
+        colorScheme: { type: String as PropType<ColorScheme> },
+        styleSet: { type: [String, Object] as PropType<string | VsSkeletonStyleSet> },
+    },
+    setup(props) {
+        const { colorScheme, styleSet } = toRefs(props);
+
+        const { colorSchemeClass } = useColorScheme(name, colorScheme);
+
+        const { computedStyleSet } = useStyleSet<VsSkeletonStyleSet>(name, styleSet);
+
+        return {
+            colorSchemeClass,
+            computedStyleSet,
+        };
+    },
+});
+</script>
+
+<style lang="scss" src="./VsSkeleton.scss" />
diff --git a/packages/vlossom/src/components/vs-skeleton/types.ts b/packages/vlossom/src/components/vs-skeleton/types.ts
@@ -0,0 +1,6 @@
+export interface VsSkeletonStyleSet {
+    backgroundColor?: string;
+    borderRadius?: string;
+    height?: string;
+    width?: string;
+}
diff --git a/packages/vlossom/src/components/vs-table/VsTable.scss b/packages/vlossom/src/components/vs-table/VsTable.scss
@@ -65,8 +65,8 @@ $tableBorder: var(--vs-table-border, 1px solid var(--vs-line-color));
                 color: var(--vs-table-headerFontColor, var(--vs-font-color));
                 font-size: var(--vs-table-headerFontSize, var(--vs-font-size));
                 font-weight: var(--vs-table-headerFontWeight, 500);
-                min-height: var(--vs-table-headerHeight, 3.2rem);
-                padding: 1rem 1.4rem;
+                min-height: var(--vs-table-headerHeight, 3.6rem);
+                padding: 0.8rem 1.4rem;
 
                 &.vs-table-draggable-th,
                 &.vs-table-expandable-th {
@@ -93,7 +93,7 @@ $tableBorder: var(--vs-table-border, 1px solid var(--vs-line-color));
             }
 
             .vs-table-td {
-                min-height: var(--vs-table-rowHeight, 3.2rem);
+                min-height: var(--vs-table-rowHeight, 4rem);
                 font-size: var(--vs-table-fontSize, var(--vs-font-size));
                 font-weight: var(--vs-table-fontWeight, 400);
                 padding: 0.8rem 1.4rem;
@@ -113,9 +113,9 @@ $tableBorder: var(--vs-table-border, 1px solid var(--vs-line-color));
                         display: flex;
                         align-items: center;
                         justify-content: center;
-                        width: 2rem;
-                        height: 2rem;
-                        border-radius: calc(var(--vs-radius-ratio) * 0.2rem);
+                        width: 2.4rem;
+                        height: 2.4rem;
+                        border-radius: calc(var(--vs-radius-ratio) * var(--vs-radius-xs));
                         border: $tableBorder;
                         background-color: var(--vs-table-headerBackgroundColor, var(--vs-area-bg-active));
 
@@ -162,25 +162,17 @@ $tableBorder: var(--vs-table-border, 1px solid var(--vs-line-color));
                     height: 100%;
                     overflow-x: auto;
                 }
-
-                .vs-table-skeleton {
-                    width: 95%;
-                    height: 60%;
-                    border-radius: calc(var(--vs-radius-ratio) * 0.3rem);
-                    background-color: var(--vs-gray-light);
-                    animation: skeleton-loading 0.6s infinite alternate;
-                }
             }
         }
 
-        .vs-table-tbody .vs-table-tr:not(.vs-table-skeleton) .vs-table-td.vs-table-draggable-td {
+        .vs-table-tbody .vs-table-tr:not(.vs-table-row-loading) .vs-table-td.vs-table-draggable-td {
             cursor: grab;
             &:active {
                 cursor: grabbing;
             }
         }
 
-        .vs-table-tbody .vs-table-tr:not(.vs-table-skeleton):hover::after {
+        .vs-table-tbody .vs-table-tr:not(.vs-table-row-loading):hover::after {
             content: '';
             box-sizing: border-box;
             position: absolute;
@@ -238,8 +230,8 @@ $tableBorder: var(--vs-table-border, 1px solid var(--vs-line-color));
                 padding-left: 0;
 
                 .vs-table-expand-button {
-                    width: 1.6rem;
-                    height: 1.6rem;
+                    width: 1.8rem;
+                    height: 1.8rem;
                 }
             }
         }
@@ -347,7 +339,7 @@ $tableBorder: var(--vs-table-border, 1px solid var(--vs-line-color));
                 }
 
                 .vs-table-skeleton {
-                    height: 2.8rem;
+                    min-height: 2.4rem;
                 }
             }
         }
@@ -364,12 +356,3 @@ $tableBorder: var(--vs-table-border, 1px solid var(--vs-line-color));
             inset 0 -2px 4px rgba(255, 255, 255, 0.15);
     }
 }
-@keyframes skeleton-loading {
-    0% {
-        opacity: 0.2;
-    }
-
-    100% {
-        opacity: 0.4;
-    }
-}
diff --git a/packages/vlossom/src/components/vs-table/VsTable.vue b/packages/vlossom/src/components/vs-table/VsTable.vue
@@ -14,18 +14,17 @@
                     :headers="headers"
                     :draggable="canDrag"
                     :expandable="hasExpand"
+                    :loading="loading"
                     :search="search"
                     :search-placeholder="searchPlaceholder"
                     :selectable="hasSelectable"
-                    :loading="loading"
                     :tr-style="trStyle"
                     v-model:sort-types="sortTypes"
                     @change:search-text="updateInnerSearchText"
                 >
                     <template #check>
                         <vs-checkbox-node
                             class="vs-table-select vs-select-all"
-                            v-if="!loading"
                             :id="utils.string.createID()"
                             type="checkbox"
                             :color-scheme="colorScheme"
@@ -42,6 +41,7 @@
                     ref="tableBodyRef"
                     :items="items"
                     :headers="headers"
+                    :color-scheme="colorScheme"
                     :filter="filter"
                     :draggable="canDrag"
                     :hasExpand="hasExpand"

diff --git a/packages/vlossom/src/components/vs-table/VsTableBody.vue b/packages/vlossom/src/components/vs-table/VsTableBody.vue
@@ -4,12 +4,13 @@
         v-model="computedTableItems"
         class="vs-table-tbody"
         item-key="id"
-        handle=".handle"
+        handle=".vs-handle"
         :disabled="!draggable || loading"
     >
         <template #item="{ element, index }">
             <vs-table-body-row
                 :item="element"
+                :color-scheme="colorScheme"
                 :headers="headers"
                 :draggable="draggable"
                 :expandable="hasExpand"
@@ -30,6 +31,7 @@
                         :color-scheme="colorScheme"
                         :checked="isSelected(element.id)"
                         aria-label="select"
+                        :disabled="loading"
                         @toggle="(e) => toggleSelect(e, element.id)"
                     />
                 </template>
@@ -44,10 +46,13 @@
             v-for="(dummy, index) in dummyTableItems"
             :key="dummy.id"
             :item="dummy"
+            :color-scheme="colorScheme"
             :headers="headers"
             :draggable="draggable"
             :loading="loading"
             :row-index="index"
+            :rows="rows"
+            :selectable="selectable"
             :tr-style="trStyle"
         />
     </tbody>

diff --git a/packages/vlossom/src/components/vs-table/VsTableBodyRow.vue b/packages/vlossom/src/components/vs-table/VsTableBodyRow.vue
@@ -1,21 +1,23 @@
 <template>
-    <tr :style="trStyle" :class="['vs-table-tr', { 'vs-skeleton': loading }, rowState]">
-        <td class="vs-table-td vs-table-draggable-td handle" v-if="draggable">
+    <tr :style="trStyle" :class="['vs-table-tr', rowState, { 'vs-table-row-loading': loading }]">
+        <td class="vs-table-td vs-table-draggable-td vs-handle" v-if="draggable">
             <vs-icon v-if="!loading" icon="drag" size="1.6rem" />
         </td>
         <td class="vs-table-td vs-table-selectable-td" v-if="selectable">
-            <div v-if="loading" class="vs-table-skeleton"></div>
-            <div v-else-if="isSelectableRow">
-                <slot name="check" />
-            </div>
+            <slot v-if="isSelectableRow && !loading" name="check" />
         </td>
         <td
             class="vs-table-td"
             v-for="(cell, index) in getRowData(item.data)"
             :key="`td-${index}`"
             :data-label="getHeader(cell.key)?.label"
         >
-            <div v-if="loading" class="vs-table-skeleton"></div>
+            <vs-skeleton
+                v-if="loading"
+                class="vs-table-skeleton"
+                :color-scheme="colorScheme"
+                :style-set="{ borderRadius: 'var(--vs-radius-sm)' }"
+            />
             <div v-else class="vs-table-data">
                 <slot
                     :name="`item-${cell.key}`"
@@ -57,16 +59,18 @@
 
 <script lang="ts">
 import { computed, ComputedRef, defineComponent, PropType, toRefs } from 'vue';
-import { UIState } from '@/declaration';
+import { ColorScheme, UIState } from '@/declaration';
 import { VsIcon } from '@/icons';
+import VsSkeleton from '@/components/vs-skeleton/VsSkeleton.vue';
 
 import type { TableHeader, TableItem, TableRow } from './types';
 
 export default defineComponent({
     name: 'VsTableBodyRow',
-    components: { VsIcon },
+    components: { VsIcon, VsSkeleton },
     props: {
         loading: { type: Boolean, default: false },
+        colorScheme: { type: String as PropType<ColorScheme> },
         draggable: { type: Boolean, default: false },
         expanded: { type: Boolean, default: false },
         expandable: { type: Boolean, default: false },

diff --git a/packages/vlossom/src/components/vs-table/VsTableHeader.vue b/packages/vlossom/src/components/vs-table/VsTableHeader.vue
@@ -16,7 +16,7 @@
         <tr :style="trStyle" class="vs-table-tr">
             <th class="vs-table-th vs-table-draggable-th" v-if="draggable">drag</th>
             <th class="vs-table-th vs-table-selectable-th" v-if="selectable" aria-label="select">
-                <slot name="check" />
+                <slot v-if="!loading" name="check" />
             </th>
             <th
                 v-for="(header, index) in headers"
@@ -47,9 +47,10 @@ export default defineComponent({
     name: 'VsTableHeader',
     components: { VsIcon, VsInput },
     props: {
+        headers: { type: Array as PropType<TableHeader[]>, required: true },
         draggable: { type: Boolean, default: false },
         expandable: { type: Boolean, default: false },
-        headers: { type: Array as PropType<TableHeader[]>, required: true },
+        loading: { type: Boolean, default: false },
         search: { type: Boolean, default: false },
         searchPlaceholder: { type: String, default: 'search' },
         selectable: { type: Boolean, default: false },

diff --git a/packages/vlossom/src/declaration/enums.ts b/packages/vlossom/src/declaration/enums.ts
@@ -35,6 +35,7 @@ export enum VsComponent {
     VsResponsive = 'VsResponsive',
     VsSection = 'VsSection',
     VsSelect = 'VsSelect',
+    VsSkeleton = 'VsSkeleton',
     VsStepper = 'VsStepper',
     VsSwitch = 'VsSwitch',
     VsTable = 'VsTable',

diff --git a/packages/vlossom/src/index.ts b/packages/vlossom/src/index.ts
@@ -41,6 +41,7 @@ declare module '@vue/runtime-core' {
         VsResponsive: (typeof import('./components'))['VsResponsive'];
         VsSection: (typeof import('./components'))['VsSection'];
         VsSelect: (typeof import('./components'))['VsSelect'];
+        VsSkeleton: (typeof import('./components'))['VsSkeleton'];
         VsStepper: (typeof import('./components'))['VsStepper'];
         VsSwitch: (typeof import('./components'))['VsSwitch'];
         VsTable: (typeof import('./components'))['VsTable'];

diff --git a/packages/vlossom/src/styles/variables.scss b/packages/vlossom/src/styles/variables.scss
@@ -8,10 +8,10 @@ $variables: (
 
     // radius
     radius-xs: 0.2rem,
-    radius-sm: 0.4rem,
-    radius: 0.6rem,
-    radius-lg: 0.8rem,
-    radius-xl: 1rem,
+    radius-sm: 0.5rem,
+    radius: 0.8rem,
+    radius-lg: 1.2rem,
+    radius-xl: 1.6rem,
 
     // responsive
     grid-xs: 12,