feat(VsTable): add component (#166)

Co-authored-by: Suyeon Woo <[email protected]>
pubg · Apr 29, 2024 · 2a3c7f9 · 2a3c7f9
1 parent 9c7efc0
commit 2a3c7f9
Show file tree

Hide file tree

Showing 26 changed files with 2,214 additions and 3 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/vlossom/package.json b/packages/vlossom/package.json
@@ -89,6 +89,7 @@
     "dependencies": {
         "@vueuse/core": "^10.9.0",
         "lodash-es": "^4.17.21",
+        "vuedraggable": "^4.1.0",
         "nanoid": "^5.0.7"
     }
 }
diff --git a/packages/vlossom/src/components/index.ts b/packages/vlossom/src/components/index.ts
@@ -94,6 +94,9 @@ export { default as VsStepper } from './vs-stepper/VsStepper.vue';
 export { type VsSwitchStyleSet } from './vs-switch/types';
 export { default as VsSwitch } from './vs-switch/VsSwitch.vue';
 
+export { type VsTableStyleSet } from './vs-table/types';
+export { default as VsTable } from './vs-table/VsTable.vue';
+
 export { type VsTabsStyleSet } from './vs-tabs/types';
 export { default as VsTabs } from './vs-tabs/VsTabs.vue';
 
@@ -150,6 +153,7 @@ declare module 'vue' {
         VsSelect: typeof import('./')['VsSelect'];
         VsStepper: typeof import('./')['VsStepper'];
         VsSwitch: typeof import('./')['VsSwitch'];
+        VsTable: typeof import('./')['VsTable'];
         VsTabs: typeof import('./')['VsTabs'];
         VsTextarea: typeof import('./')['VsTextarea'];
         VsTextWrap: typeof import('./')['VsTextWrap'];

diff --git a/packages/vlossom/src/components/vs-select/VsSelect.vue b/packages/vlossom/src/components/vs-select/VsSelect.vue
@@ -62,6 +62,7 @@
                     :id="id"
                     role="combobox"
                     :aria-expanded="isOpen || isVisible"
+                    :aria-label="ariaLabel"
                     aria-controls="vs-select-options"
                     :aria-autocomplete="autocomplete ? 'list' : undefined"
                     :aria-activedescendant="focusedOptionId"
@@ -220,6 +221,7 @@ export default defineComponent({
         ...getResponsiveProps(),
         colorScheme: { type: String as PropType<ColorScheme> },
         styleSet: { type: [String, Object] as PropType<string | VsSelectStyleSet> },
+        ariaLabel: { type: String, default: '' },
         autocomplete: { type: Boolean, default: false },
         closableChips: {
             type: Boolean,

diff --git a/packages/vlossom/src/components/vs-select/__tests__/vs-select.test.ts b/packages/vlossom/src/components/vs-select/__tests__/vs-select.test.ts
@@ -767,6 +767,20 @@ describe('vs-select', () => {
         });
     });
 
+    describe('aria-label', () => {
+        it('aria-label을 설정할 수 있다', () => {
+            // given
+            const wrapper: ReturnType<typeof mountComponent> = mount(VsSelect, {
+                props: {
+                    ariaLabel: 'aria-label',
+                },
+            });
+
+            // then
+            expect(wrapper.find('input').attributes('aria-label')).toBe('aria-label');
+        });
+    });
+
     describe('focus / blur', () => {
         it('focus 이벤트를 발생시킬 수 있다', async () => {
             // given