@sellmate/design-system-vue 1.0.59 → 1.0.61

package/dist/components.d.ts

@@ -11,7 +11,10 @@ export declare const SdCheckbox: StencilVueComponent<JSX.SdCheckbox, JSX.SdCheck
 export declare const SdConfirmModal: StencilVueComponent<JSX.SdConfirmModal>;
 export declare const SdDateBox: StencilVueComponent<JSX.SdDateBox>;
 export declare const SdDatePicker: StencilVueComponent<JSX.SdDatePicker, JSX.SdDatePicker["value"]>;
+export declare const SdDatePickerCalendar: StencilVueComponent<JSX.SdDatePickerCalendar>;
+export declare const SdDatePickerTrigger: StencilVueComponent<JSX.SdDatePickerTrigger>;
 export declare const SdDateRangePicker: StencilVueComponent<JSX.SdDateRangePicker, JSX.SdDateRangePicker["value"]>;
+export declare const SdDateRangePickerCalendar: StencilVueComponent<JSX.SdDateRangePickerCalendar>;
 export declare const SdDropdownButton: StencilVueComponent<JSX.SdDropdownButton>;
 export declare const SdField: StencilVueComponent<JSX.SdField>;
 export declare const SdFilePicker: StencilVueComponent<JSX.SdFilePicker, JSX.SdFilePicker["value"]>;

package/dist/components.js

@@ -136,29 +136,79 @@ export const SdDateBox = /*@__PURE__*/ defineContainer('sd-date-box', undefined,
 ]);
 export const SdDatePicker = /*@__PURE__*/ defineContainer('sd-date-picker', undefined, [
     'value',
-    'label',
+    'size',
+    'placeholder',
     'selectable',
     'disabled',
-    'placeholder',
+    'width',
+    'label',
+    'addonLabel',
+    'hint',
+    'errorMessage',
+    'fieldName',
+    'rules',
+    'error',
+    'icon',
+    'labelTooltip',
+    'labelTooltipProps',
     'sdUpdate',
     'sdViewChange'
 ], [
     'sdUpdate',
     'sdViewChange'
 ], 'value', 'sdUpdate', undefined);
+export const SdDatePickerCalendar = /*@__PURE__*/ defineContainer('sd-date-picker-calendar', undefined, [
+    'value',
+    'selectable',
+    'sdSelect',
+    'sdViewChange'
+], [
+    'sdSelect',
+    'sdViewChange'
+]);
+export const SdDatePickerTrigger = /*@__PURE__*/ defineContainer('sd-date-picker-trigger', undefined, [
+    'displayText',
+    'placeholder',
+    'disabled',
+    'size',
+    'sdTriggerClick'
+], [
+    'sdTriggerClick'
+]);
 export const SdDateRangePicker = /*@__PURE__*/ defineContainer('sd-date-range-picker', undefined, [
     'value',
-    'label',
+    'size',
+    'placeholder',
     'selectable',
     'maxRange',
     'disabled',
-    'placeholder',
+    'width',
+    'label',
+    'addonLabel',
+    'hint',
+    'errorMessage',
+    'fieldName',
+    'rules',
+    'error',
+    'icon',
+    'labelTooltip',
+    'labelTooltipProps',
     'sdUpdate',
     'sdViewChange'
 ], [
     'sdUpdate',
     'sdViewChange'
 ], 'value', 'sdUpdate', undefined);
+export const SdDateRangePickerCalendar = /*@__PURE__*/ defineContainer('sd-date-range-picker-calendar', undefined, [
+    'value',
+    'selectable',
+    'maxRange',
+    'sdSelect',
+    'sdViewChange'
+], [
+    'sdSelect',
+    'sdViewChange'
+]);
 export const SdDropdownButton = /*@__PURE__*/ defineContainer('sd-dropdown-button', undefined, [
     'name',
     'label',
@@ -383,8 +433,8 @@ export const SdProgress = /*@__PURE__*/ defineContainer('sd-progress', undefined
 ]);
 export const SdRadio = /*@__PURE__*/ defineContainer('sd-radio', undefined, [
     'value',
-    'disabled',
     'val',
+    'disabled',
     'label',
     'sdUpdate'
 ], [

package/dist/composables/useSdTableVirtualScroll.d.ts

@@ -0,0 +1,11 @@
+import { type Ref } from 'vue';
+export interface VirtualRow<T = Record<string, any>> {
+    /** 전체 rows 기준 절대 인덱스 — sd-tr의 rowKey로 사용 */
+    index: number;
+    row: T;
+}
+export declare function useSdTableVirtualScroll<T extends Record<string, any>>(tableRef: Ref<any>, rows: Ref<T[]>): {
+    virtualRows: import("vue").ComputedRef<VirtualRow<T>[]>;
+    from: import("vue").ComputedRef<number>;
+    to: import("vue").ComputedRef<number>;
+};

package/dist/composables/useSdTableVirtualScroll.js

@@ -0,0 +1,58 @@
+import { ref, computed, onMounted, onUnmounted } from 'vue';
+export function useSdTableVirtualScroll(tableRef, rows) {
+    const range = ref(null);
+    let targetEl = null;
+    let rafId = 0;
+    const onVirtualUpdate = (e) => {
+        const { from, to } = e.detail;
+        range.value = { from, to };
+    };
+    const syncRange = (el) => {
+        const currentRange = el.getVirtualScrollRangeSync?.();
+        if (currentRange &&
+            typeof currentRange.from === 'number' &&
+            typeof currentRange.to === 'number') {
+            range.value = { from: currentRange.from, to: currentRange.to };
+            return true;
+        }
+        return false;
+    };
+    const attachWhenReady = () => {
+        // Stencil Vue 래퍼는 expose()를 사용하지 않으므로 $el로 실제 custom element에 접근
+        const raw = tableRef.value?.$el ?? tableRef.value;
+        const el = raw instanceof HTMLElement ? raw : null;
+        if (!el) {
+            rafId = requestAnimationFrame(attachWhenReady);
+            return;
+        }
+        targetEl = el;
+        targetEl.addEventListener('sdVirtualUpdate', onVirtualUpdate);
+        const trySync = () => {
+            if (!targetEl)
+                return;
+            if (!syncRange(targetEl)) {
+                rafId = requestAnimationFrame(trySync);
+            }
+        };
+        trySync();
+    };
+    onMounted(() => {
+        attachWhenReady();
+    });
+    onUnmounted(() => {
+        cancelAnimationFrame(rafId);
+        targetEl?.removeEventListener('sdVirtualUpdate', onVirtualUpdate);
+        targetEl = null;
+    });
+    const virtualRows = computed(() => {
+        if (!range.value)
+            return [];
+        const { from, to } = range.value;
+        return rows.value.slice(from, to).map((row, i) => ({ index: from + i, row }));
+    });
+    return {
+        virtualRows,
+        from: computed(() => range.value?.from ?? 0),
+        to: computed(() => range.value?.to ?? 0),
+    };
+}

package/lib/components.ts

@@ -164,10 +164,21 @@ export const SdDateBox: StencilVueComponent<JSX.SdDateBox> = /*@__PURE__*/ defin
 
 export const SdDatePicker: StencilVueComponent<JSX.SdDatePicker, JSX.SdDatePicker["value"]> = /*@__PURE__*/ defineContainer<JSX.SdDatePicker, JSX.SdDatePicker["value"]>('sd-date-picker', undefined, [
   'value',
-  'label',
+  'size',
+  'placeholder',
   'selectable',
   'disabled',
-  'placeholder',
+  'width',
+  'label',
+  'addonLabel',
+  'hint',
+  'errorMessage',
+  'fieldName',
+  'rules',
+  'error',
+  'icon',
+  'labelTooltip',
+  'labelTooltipProps',
   'sdUpdate',
   'sdViewChange'
 ], [
@@ -177,13 +188,46 @@ export const SdDatePicker: StencilVueComponent<JSX.SdDatePicker, JSX.SdDatePicke
 'value', 'sdUpdate', undefined);
 
 
+export const SdDatePickerCalendar: StencilVueComponent<JSX.SdDatePickerCalendar> = /*@__PURE__*/ defineContainer<JSX.SdDatePickerCalendar>('sd-date-picker-calendar', undefined, [
+  'value',
+  'selectable',
+  'sdSelect',
+  'sdViewChange'
+], [
+  'sdSelect',
+  'sdViewChange'
+]);
+
+
+export const SdDatePickerTrigger: StencilVueComponent<JSX.SdDatePickerTrigger> = /*@__PURE__*/ defineContainer<JSX.SdDatePickerTrigger>('sd-date-picker-trigger', undefined, [
+  'displayText',
+  'placeholder',
+  'disabled',
+  'size',
+  'sdTriggerClick'
+], [
+  'sdTriggerClick'
+]);
+
+
 export const SdDateRangePicker: StencilVueComponent<JSX.SdDateRangePicker, JSX.SdDateRangePicker["value"]> = /*@__PURE__*/ defineContainer<JSX.SdDateRangePicker, JSX.SdDateRangePicker["value"]>('sd-date-range-picker', undefined, [
   'value',
-  'label',
+  'size',
+  'placeholder',
   'selectable',
   'maxRange',
   'disabled',
-  'placeholder',
+  'width',
+  'label',
+  'addonLabel',
+  'hint',
+  'errorMessage',
+  'fieldName',
+  'rules',
+  'error',
+  'icon',
+  'labelTooltip',
+  'labelTooltipProps',
   'sdUpdate',
   'sdViewChange'
 ], [
@@ -193,6 +237,18 @@ export const SdDateRangePicker: StencilVueComponent<JSX.SdDateRangePicker, JSX.S
 'value', 'sdUpdate', undefined);
 
 
+export const SdDateRangePickerCalendar: StencilVueComponent<JSX.SdDateRangePickerCalendar> = /*@__PURE__*/ defineContainer<JSX.SdDateRangePickerCalendar>('sd-date-range-picker-calendar', undefined, [
+  'value',
+  'selectable',
+  'maxRange',
+  'sdSelect',
+  'sdViewChange'
+], [
+  'sdSelect',
+  'sdViewChange'
+]);
+
+
 export const SdDropdownButton: StencilVueComponent<JSX.SdDropdownButton> = /*@__PURE__*/ defineContainer<JSX.SdDropdownButton>('sd-dropdown-button', undefined, [
   'name',
   'label',
@@ -453,8 +509,8 @@ export const SdProgress: StencilVueComponent<JSX.SdProgress> = /*@__PURE__*/ def
 
 export const SdRadio: StencilVueComponent<JSX.SdRadio, JSX.SdRadio["value"]> = /*@__PURE__*/ defineContainer<JSX.SdRadio, JSX.SdRadio["value"]>('sd-radio', undefined, [
   'value',
-  'disabled',
   'val',
+  'disabled',
   'label',
   'sdUpdate'
 ], [

package/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@sellmate/design-system-vue",
- "version": "1.0.59",
+ "version": "1.0.61",
  "description": "Design System - Vue Component Wrappers",
  "keywords": [
   "vue",
@@ -45,7 +45,7 @@
   "vue": "^3.4.38"
  },
  "dependencies": {
-  "@sellmate/design-system": "^1.0.59",
+  "@sellmate/design-system": "^1.0.61",
   "@stencil/vue-output-target": "^0.11.8"
  },
  "peerDependencies": {