yuyeon 0.0.29 → 0.0.31

package/lib/components/field-input/YFieldInput.mjs

@@ -183,6 +183,8 @@ export const YFieldInput = defineComponent({
         '^tabindex': props.tabindex || '0',
         autocomplete: attrs.autocomplete,
         maxlength: attrs.maxlength,
+        min: attrs.min,
+        max: attrs.max,
         onInput,
         onFocus,
         onBlur,

package/lib/components/field-input/YFieldInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YFieldInput.mjs","names":["computed","defineComponent","getCurrentInstance","h","nextTick","ref","toRef","watch","useRender","useFocus","chooseProps","propsFactory","YIconClear","YInput","pressYInputPropsOptions","NAME","pressYFieldInputPropsOptions","enableClear","Boolean","inputAlign","String","displayText","Function","whenInputValid","Number","tabindex","type","default","variation","YFieldInput","name","props","emits","setup","_ref","attrs","expose","emit","slots","yInputRef","inputRef","focused","whenFocus","whenBlur","inValue","displayValue","inputType","classes","invokeValidators","onClick","event","value","focus","onFocus","onBlur","changeDisplay","onInput","target","onChange","onKeydown","onKeyup","onClickClear","clear","onKeydownClear","code","select","vm","undefined","text","call","modelValue","neo","immediate","onUpdateModel","class","$event","leading","leadingChildren","_len","arguments","length","args","Array","_key","slot","push","defaultProps","attrId","floating","methods","createLabel","readonly","loading","formLoading","placeholder","disabled","autocomplete","maxlength","style","textAlign","trailing","trailingChildren","label"],"sources":["../../../src/components/field-input/YFieldInput.ts"],"sourcesContent":["import type { PropType } from 'vue';\r\nimport {\r\n  computed,\r\n  defineComponent,\r\n  getCurrentInstance,\r\n  h,\r\n  nextTick,\r\n  ref,\r\n  toRef,\r\n  watch,\r\n} from 'vue';\r\n\r\nimport { useRender } from '../../composables/component';\r\nimport { useFocus } from '../../composables/focus';\r\nimport { chooseProps, propsFactory } from '../../util/vue-component';\r\nimport { YIconClear } from '../icons/YIconClear';\r\nimport { YInput, pressYInputPropsOptions } from '../input';\r\n\r\nimport './YFieldInput.scss';\r\n\r\nconst NAME = 'y-field-input';\r\n\r\nexport const pressYFieldInputPropsOptions = propsFactory(\r\n  {\r\n    enableClear: Boolean as PropType<boolean>,\r\n    inputAlign: String as PropType<string>,\r\n    displayText: [String, Function] as PropType<\r\n      string | ((value: any) => string)\r\n    >,\r\n    whenInputValid: [Boolean, Number] as PropType<boolean | number>,\r\n    tabindex: {\r\n      type: String as PropType<string>,\r\n      default: '0',\r\n    },\r\n    type: {\r\n      type: String as PropType<string>,\r\n      default: 'text',\r\n    },\r\n    ...pressYInputPropsOptions({\r\n      variation: 'filled',\r\n    }),\r\n  },\r\n  'YFieldInput',\r\n);\r\n\r\nexport const YFieldInput = defineComponent({\r\n  name: 'YFieldInput',\r\n  props: {\r\n    ...pressYFieldInputPropsOptions(),\r\n  },\r\n  emits: [\r\n    'update:modelValue',\r\n    'update:focused',\r\n    'input',\r\n    'change',\r\n    'click',\r\n    'mousedown',\r\n    'mouseup',\r\n    'keydown',\r\n    'keyup',\r\n    'focus',\r\n    'blur',\r\n    'mousedown:display',\r\n  ],\r\n  setup(props, { attrs, expose, emit, slots }) {\r\n    const yInputRef = ref<YInput>();\r\n    const inputRef = ref<HTMLInputElement>();\r\n    const { focused, whenFocus, whenBlur } = useFocus(props, 'y-field-input');\r\n    const inValue = ref<any>('');\r\n    const displayValue = ref('');\r\n    const inputType = toRef(props, 'type');\r\n\r\n    const classes = computed(() => {\r\n      return {\r\n        [NAME]: true,\r\n      };\r\n    });\r\n\r\n    const invokeValidators = () => {\r\n      //\r\n    };\r\n\r\n    function onClick(event: MouseEvent) {\r\n      inputRef.value?.focus();\r\n      emit('click', event);\r\n    }\r\n\r\n    function onFocus(event: FocusEvent) {\r\n      whenFocus();\r\n      displayValue.value = inValue.value as string;\r\n      emit('focus', event);\r\n    }\r\n\r\n    function onBlur(event: FocusEvent) {\r\n      whenBlur();\r\n      invokeValidators();\r\n      emit('blur', event);\r\n      changeDisplay();\r\n    }\r\n\r\n    function onInput(event: InputEvent) {\r\n      emit('input', event);\r\n      const target = event.target as HTMLInputElement | null;\r\n      inValue.value = target?.value;\r\n      displayValue.value = target?.value as string;\r\n      if (props.whenInputValid) {\r\n        invokeValidators();\r\n      }\r\n    }\r\n\r\n    function onChange(event: Event) {\r\n      emit('change', inValue.value);\r\n    }\r\n\r\n    function onKeydown(event: KeyboardEvent) {\r\n      emit('keydown', event);\r\n    }\r\n\r\n    function onKeyup(event: KeyboardEvent) {\r\n      emit('keyup', event);\r\n    }\r\n\r\n    function onClickClear(event: MouseEvent) {\r\n      clear();\r\n    }\r\n\r\n    function onKeydownClear(event: KeyboardEvent) {\r\n      if (event.code === 'Space' || event.code === 'Enter') {\r\n        clear();\r\n      }\r\n    }\r\n\r\n    function focus() {\r\n      inputRef.value?.focus();\r\n    }\r\n\r\n    function select() {\r\n      inputRef.value?.select();\r\n    }\r\n\r\n    function clear() {\r\n      inValue.value = '';\r\n      displayValue.value = '';\r\n      emit('update:modelValue', inValue.value);\r\n    }\r\n\r\n    function changeDisplay() {\r\n      const vm = getCurrentInstance();\r\n      const { displayText } = props;\r\n      if (displayText !== undefined) {\r\n        let text = inValue.value;\r\n        if (typeof displayText === 'string') {\r\n          text = displayText;\r\n        }\r\n        if (displayText && typeof displayText === 'function') {\r\n          text = (displayText as any).call(vm, text);\r\n        }\r\n        nextTick(() => {\r\n          displayValue.value = text as string;\r\n        });\r\n      }\r\n    }\r\n\r\n    watch(\r\n      () => props.modelValue,\r\n      (neo: any) => {\r\n        inValue.value = neo;\r\n        displayValue.value = neo;\r\n      },\r\n      {\r\n        immediate: true,\r\n      },\r\n    );\r\n\r\n    watch(inValue, (neo: string) => {\r\n      if (!focused.value) {\r\n        changeDisplay();\r\n      } else {\r\n        displayValue.value = neo;\r\n      }\r\n    });\r\n\r\n    expose({\r\n      focus,\r\n      select,\r\n      clear,\r\n      inputRef,\r\n    });\r\n\r\n    function onUpdateModel(value: any) {\r\n      emit('update:modelValue', value);\r\n    }\r\n\r\n    useRender(() =>\r\n      h(\r\n        YInput,\r\n        {\r\n          class: classes.value,\r\n          ref: yInputRef,\r\n          ...chooseProps(props, YInput.props),\r\n          modelValue: inValue.value,\r\n          'onUpdate:modelValue': onUpdateModel,\r\n          onClick,\r\n          focused: focused.value,\r\n          'onMousedown:display': ($event) => emit('mousedown:display', $event),\r\n        },\r\n        {\r\n          leading: slots.leading\r\n            ? (...args: any[]) => {\r\n                const leadingChildren = [];\r\n                const slot = slots.leading?.(...args);\r\n                if (slot) {\r\n                  leadingChildren.push(slot);\r\n                } else {\r\n                  return undefined;\r\n                }\r\n                return leadingChildren;\r\n              }\r\n            : undefined,\r\n          default: (defaultProps: any) =>\r\n            h(\r\n              'div',\r\n              {\r\n                class: `${NAME}__field`,\r\n                'data-id': defaultProps.attrId,\r\n                ref: 'field',\r\n              },\r\n              [\r\n                props.floating\r\n                  ? yInputRef.value &&\r\n                    YInput.methods!.createLabel.call(yInputRef.value)\r\n                  : undefined,\r\n                slots.default?.(),\r\n                h('input', {\r\n                  '.value': displayValue.value,\r\n                  '.id': defaultProps.attrId,\r\n                  '^type': inputType.value,\r\n                  readonly:\r\n                    props.readonly || props.loading || defaultProps.formLoading,\r\n                  '.placeholder': props.placeholder,\r\n                  '.disabled': props.disabled,\r\n                  '^tabindex': props.tabindex || '0',\r\n                  autocomplete: attrs.autocomplete,\r\n                  maxlength: attrs.maxlength,\r\n                  onInput,\r\n                  onFocus,\r\n                  onBlur,\r\n                  onChange,\r\n                  onKeydown,\r\n                  onKeyup,\r\n                  style: {\r\n                    textAlign: props.inputAlign,\r\n                  },\r\n                  ref: inputRef,\r\n                }),\r\n              ],\r\n            ),\r\n          trailing: () => {\r\n            const trailingChildren = [];\r\n            if (props.enableClear && inValue.value) {\r\n              trailingChildren.push(\r\n                h(\r\n                  'div',\r\n                  { class: 'y-input__trailing y-input__trailing--clear' },\r\n                  [\r\n                    h(\r\n                      'button',\r\n                      {\r\n                        class: `${NAME}__clear`,\r\n                        onClick: onClickClear,\r\n                        onKeydown: onKeydownClear,\r\n                        '^tabindex': '2',\r\n                      },\r\n                      [h(YIconClear)],\r\n                    ),\r\n                  ],\r\n                ),\r\n              );\r\n            }\r\n            const slot = slots.trailing;\r\n            if (slot) {\r\n              trailingChildren.push(\r\n                h('div', { class: 'y-input__trailing' }, slot()),\r\n              );\r\n            }\r\n            return trailingChildren;\r\n          },\r\n          label: slots['label']?.(),\r\n          'helper-text': slots['helper-text']\r\n            ? () => {\r\n                return slots['helper-text']?.();\r\n              }\r\n            : undefined,\r\n        },\r\n      ),\r\n    );\r\n\r\n    return {\r\n      focused,\r\n    };\r\n  },\r\n});\r\n\r\nexport type YFieldInput = InstanceType<typeof YFieldInput>;\r\n"],"mappings":"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"}
+{"version":3,"file":"YFieldInput.mjs","names":["computed","defineComponent","getCurrentInstance","h","nextTick","ref","toRef","watch","useRender","useFocus","chooseProps","propsFactory","YIconClear","YInput","pressYInputPropsOptions","NAME","pressYFieldInputPropsOptions","enableClear","Boolean","inputAlign","String","displayText","Function","whenInputValid","Number","tabindex","type","default","variation","YFieldInput","name","props","emits","setup","_ref","attrs","expose","emit","slots","yInputRef","inputRef","focused","whenFocus","whenBlur","inValue","displayValue","inputType","classes","invokeValidators","onClick","event","value","focus","onFocus","onBlur","changeDisplay","onInput","target","onChange","onKeydown","onKeyup","onClickClear","clear","onKeydownClear","code","select","vm","undefined","text","call","modelValue","neo","immediate","onUpdateModel","class","$event","leading","leadingChildren","_len","arguments","length","args","Array","_key","slot","push","defaultProps","attrId","floating","methods","createLabel","readonly","loading","formLoading","placeholder","disabled","autocomplete","maxlength","min","max","style","textAlign","trailing","trailingChildren","label"],"sources":["../../../src/components/field-input/YFieldInput.ts"],"sourcesContent":["import type { PropType } from 'vue';\r\nimport {\r\n  computed,\r\n  defineComponent,\r\n  getCurrentInstance,\r\n  h,\r\n  nextTick,\r\n  ref,\r\n  toRef,\r\n  watch,\r\n} from 'vue';\r\n\r\nimport { useRender } from '../../composables/component';\r\nimport { useFocus } from '../../composables/focus';\r\nimport { chooseProps, propsFactory } from '../../util/vue-component';\r\nimport { YIconClear } from '../icons/YIconClear';\r\nimport { YInput, pressYInputPropsOptions } from '../input';\r\n\r\nimport './YFieldInput.scss';\r\n\r\nconst NAME = 'y-field-input';\r\n\r\nexport const pressYFieldInputPropsOptions = propsFactory(\r\n  {\r\n    enableClear: Boolean as PropType<boolean>,\r\n    inputAlign: String as PropType<string>,\r\n    displayText: [String, Function] as PropType<\r\n      string | ((value: any) => string)\r\n    >,\r\n    whenInputValid: [Boolean, Number] as PropType<boolean | number>,\r\n    tabindex: {\r\n      type: String as PropType<string>,\r\n      default: '0',\r\n    },\r\n    type: {\r\n      type: String as PropType<string>,\r\n      default: 'text',\r\n    },\r\n    ...pressYInputPropsOptions({\r\n      variation: 'filled',\r\n    }),\r\n  },\r\n  'YFieldInput',\r\n);\r\n\r\nexport const YFieldInput = defineComponent({\r\n  name: 'YFieldInput',\r\n  props: {\r\n    ...pressYFieldInputPropsOptions(),\r\n  },\r\n  emits: [\r\n    'update:modelValue',\r\n    'update:focused',\r\n    'input',\r\n    'change',\r\n    'click',\r\n    'mousedown',\r\n    'mouseup',\r\n    'keydown',\r\n    'keyup',\r\n    'focus',\r\n    'blur',\r\n    'mousedown:display',\r\n  ],\r\n  setup(props, { attrs, expose, emit, slots }) {\r\n    const yInputRef = ref<YInput>();\r\n    const inputRef = ref<HTMLInputElement>();\r\n    const { focused, whenFocus, whenBlur } = useFocus(props, 'y-field-input');\r\n    const inValue = ref<any>('');\r\n    const displayValue = ref('');\r\n    const inputType = toRef(props, 'type');\r\n\r\n    const classes = computed(() => {\r\n      return {\r\n        [NAME]: true,\r\n      };\r\n    });\r\n\r\n    const invokeValidators = () => {\r\n      //\r\n    };\r\n\r\n    function onClick(event: MouseEvent) {\r\n      inputRef.value?.focus();\r\n      emit('click', event);\r\n    }\r\n\r\n    function onFocus(event: FocusEvent) {\r\n      whenFocus();\r\n      displayValue.value = inValue.value as string;\r\n      emit('focus', event);\r\n    }\r\n\r\n    function onBlur(event: FocusEvent) {\r\n      whenBlur();\r\n      invokeValidators();\r\n      emit('blur', event);\r\n      changeDisplay();\r\n    }\r\n\r\n    function onInput(event: InputEvent) {\r\n      emit('input', event);\r\n      const target = event.target as HTMLInputElement | null;\r\n      inValue.value = target?.value;\r\n      displayValue.value = target?.value as string;\r\n      if (props.whenInputValid) {\r\n        invokeValidators();\r\n      }\r\n    }\r\n\r\n    function onChange(event: Event) {\r\n      emit('change', inValue.value);\r\n    }\r\n\r\n    function onKeydown(event: KeyboardEvent) {\r\n      emit('keydown', event);\r\n    }\r\n\r\n    function onKeyup(event: KeyboardEvent) {\r\n      emit('keyup', event);\r\n    }\r\n\r\n    function onClickClear(event: MouseEvent) {\r\n      clear();\r\n    }\r\n\r\n    function onKeydownClear(event: KeyboardEvent) {\r\n      if (event.code === 'Space' || event.code === 'Enter') {\r\n        clear();\r\n      }\r\n    }\r\n\r\n    function focus() {\r\n      inputRef.value?.focus();\r\n    }\r\n\r\n    function select() {\r\n      inputRef.value?.select();\r\n    }\r\n\r\n    function clear() {\r\n      inValue.value = '';\r\n      displayValue.value = '';\r\n      emit('update:modelValue', inValue.value);\r\n    }\r\n\r\n    function changeDisplay() {\r\n      const vm = getCurrentInstance();\r\n      const { displayText } = props;\r\n      if (displayText !== undefined) {\r\n        let text = inValue.value;\r\n        if (typeof displayText === 'string') {\r\n          text = displayText;\r\n        }\r\n        if (displayText && typeof displayText === 'function') {\r\n          text = (displayText as any).call(vm, text);\r\n        }\r\n        nextTick(() => {\r\n          displayValue.value = text as string;\r\n        });\r\n      }\r\n    }\r\n\r\n    watch(\r\n      () => props.modelValue,\r\n      (neo: any) => {\r\n        inValue.value = neo;\r\n        displayValue.value = neo;\r\n      },\r\n      {\r\n        immediate: true,\r\n      },\r\n    );\r\n\r\n    watch(inValue, (neo: string) => {\r\n      if (!focused.value) {\r\n        changeDisplay();\r\n      } else {\r\n        displayValue.value = neo;\r\n      }\r\n    });\r\n\r\n    expose({\r\n      focus,\r\n      select,\r\n      clear,\r\n      inputRef,\r\n    });\r\n\r\n    function onUpdateModel(value: any) {\r\n      emit('update:modelValue', value);\r\n    }\r\n\r\n    useRender(() =>\r\n      h(\r\n        YInput,\r\n        {\r\n          class: classes.value,\r\n          ref: yInputRef,\r\n          ...chooseProps(props, YInput.props),\r\n          modelValue: inValue.value,\r\n          'onUpdate:modelValue': onUpdateModel,\r\n          onClick,\r\n          focused: focused.value,\r\n          'onMousedown:display': ($event) => emit('mousedown:display', $event),\r\n        },\r\n        {\r\n          leading: slots.leading\r\n            ? (...args: any[]) => {\r\n                const leadingChildren = [];\r\n                const slot = slots.leading?.(...args);\r\n                if (slot) {\r\n                  leadingChildren.push(slot);\r\n                } else {\r\n                  return undefined;\r\n                }\r\n                return leadingChildren;\r\n              }\r\n            : undefined,\r\n          default: (defaultProps: any) =>\r\n            h(\r\n              'div',\r\n              {\r\n                class: `${NAME}__field`,\r\n                'data-id': defaultProps.attrId,\r\n                ref: 'field',\r\n              },\r\n              [\r\n                props.floating\r\n                  ? yInputRef.value &&\r\n                    YInput.methods!.createLabel.call(yInputRef.value)\r\n                  : undefined,\r\n                slots.default?.(),\r\n                h('input', {\r\n                  '.value': displayValue.value,\r\n                  '.id': defaultProps.attrId,\r\n                  '^type': inputType.value,\r\n                  readonly:\r\n                    props.readonly || props.loading || defaultProps.formLoading,\r\n                  '.placeholder': props.placeholder,\r\n                  '.disabled': props.disabled,\r\n                  '^tabindex': props.tabindex || '0',\r\n                  autocomplete: attrs.autocomplete,\r\n                  maxlength: attrs.maxlength,\r\n                  min: attrs.min,\r\n                  max: attrs.max,\r\n                  onInput,\r\n                  onFocus,\r\n                  onBlur,\r\n                  onChange,\r\n                  onKeydown,\r\n                  onKeyup,\r\n                  style: {\r\n                    textAlign: props.inputAlign,\r\n                  },\r\n                  ref: inputRef,\r\n                }),\r\n              ],\r\n            ),\r\n          trailing: () => {\r\n            const trailingChildren = [];\r\n            if (props.enableClear && inValue.value) {\r\n              trailingChildren.push(\r\n                h(\r\n                  'div',\r\n                  { class: 'y-input__trailing y-input__trailing--clear' },\r\n                  [\r\n                    h(\r\n                      'button',\r\n                      {\r\n                        class: `${NAME}__clear`,\r\n                        onClick: onClickClear,\r\n                        onKeydown: onKeydownClear,\r\n                        '^tabindex': '2',\r\n                      },\r\n                      [h(YIconClear)],\r\n                    ),\r\n                  ],\r\n                ),\r\n              );\r\n            }\r\n            const slot = slots.trailing;\r\n            if (slot) {\r\n              trailingChildren.push(\r\n                h('div', { class: 'y-input__trailing' }, slot()),\r\n              );\r\n            }\r\n            return trailingChildren;\r\n          },\r\n          label: slots['label']?.(),\r\n          'helper-text': slots['helper-text']\r\n            ? () => {\r\n                return slots['helper-text']?.();\r\n              }\r\n            : undefined,\r\n        },\r\n      ),\r\n    );\r\n\r\n    return {\r\n      focused,\r\n    };\r\n  },\r\n});\r\n\r\nexport type YFieldInput = InstanceType<typeof YFieldInput>;\r\n"],"mappings":"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"}

package/lib/components/icons/index.mjs

@@ -1,4 +1,6 @@
 export * from "./YIconExpand.mjs";
 export * from "./YIconClear.mjs";
 export * from "./YIconCheckbox.mjs";
+export * from "./YIconPageControl.mjs";
+export * from "./YIconSort.mjs";
 //# sourceMappingURL=index.mjs.map

package/lib/components/icons/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/components/icons/index.ts"],"sourcesContent":["export * from './YIconExpand';\nexport * from './YIconClear';\nexport * from './YIconCheckbox';\n"],"mappings":""}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/components/icons/index.ts"],"sourcesContent":["export * from './YIconExpand';\nexport * from './YIconClear';\nexport * from './YIconCheckbox';\nexport * from './YIconPageControl';\nexport * from './YIconSort';\n"],"mappings":""}

package/lib/components/table/YDataTable.mjs

@@ -1,17 +1,18 @@
-import { createVNode as _createVNode, resolveDirective as _resolveDirective, Fragment as _Fragment } from "vue";
-import { computed, defineComponent } from 'vue';
+import { mergeProps as _mergeProps, createVNode as _createVNode, resolveDirective as _resolveDirective, Fragment as _Fragment } from "vue";
+import { computed, defineComponent, provide, toRef } from 'vue';
 import { useRender } from "../../composables/component.mjs";
-import { propsFactory } from "../../util/vue-component.mjs";
+import { chooseProps, propsFactory } from "../../util/vue-component.mjs";
 import { YDataTableBody } from "./YDataTableBody.mjs";
 import { YDataTableControl } from "./YDataTableControl.mjs";
-import { pressYDataTableHeadProps, YDataTableHead } from "./YDataTableHead.mjs";
+import { YDataTableHead, pressYDataTableHeadProps } from "./YDataTableHead.mjs";
 import { YDataTableLayer } from "./YDataTableLayer.mjs";
-import { pressYTableProps, YTable } from "./YTable.mjs";
-import { pressDataTableHeader } from "./composibles/header.mjs";
-import { createPagination, pressDataTablePaginationProps } from "./composibles/pagination.mjs";
-import { pressDataTableSortProps } from "./composibles/sorting.mjs";
-import { pressDataTableSelectionProps } from "./composibles/selection.mjs";
-import { pressDataTableItemsProps } from "./composibles/items.mjs";
+import { YTable, pressYTableProps } from "./YTable.mjs";
+import { createHeader, pressDataTableHeader } from "./composibles/header.mjs";
+import { pressDataTableItemsProps, useItems } from "./composibles/items.mjs";
+import { useOptions } from "./composibles/options.mjs";
+import { createPagination, pressDataTablePaginationProps, providePagination, usePaginatedItems } from "./composibles/pagination.mjs";
+import { pressDataTableSelectionProps, provideSelection } from "./composibles/selection.mjs";
+import { createSorting, pressDataTableSortProps, provideSorting } from "./composibles/sorting.mjs";
 export const pressDataTableProps = propsFactory({
   width: [String, Number],
   search: String,
@@ -30,41 +31,128 @@ export const YDataTable = defineComponent({
   },
   emits: {
     'update:modelValue': value => true,
-    'update:page': value => true,
-    'update:pageSize': value => true,
-    'update:sortBy': value => true,
-    'update:options': value => true
+    'update:page': page => true,
+    'update:pageSize': pageSize => true,
+    'update:sortBy': sortBy => true,
+    'update:options': options => true,
+    'click:row': (e, value) => true
   },
   setup(props, _ref) {
     let {
-      slots
+      slots,
+      emit
     } = _ref;
     const {
       page,
       pageSize
     } = createPagination(props);
+    const {
+      sortBy,
+      multiSort
+    } = createSorting(props);
+    const {
+      columns,
+      headers
+    } = createHeader(props, {
+      enableSelect: toRef(props, 'enableSelect')
+    });
+    const {
+      items
+    } = useItems(props, columns);
+    const {
+      toggleSort
+    } = provideSorting({
+      sortBy,
+      multiSort,
+      page
+    });
+    const total = computed(() => items.value.length);
+    const {
+      startIndex,
+      endIndex,
+      pageLength,
+      setPageSize,
+      setPage
+    } = providePagination({
+      page,
+      pageSize,
+      total
+    });
+    const {
+      paginatedItems
+    } = usePaginatedItems({
+      items,
+      startIndex,
+      endIndex,
+      pageSize
+    });
+    const {
+      isSelected,
+      select,
+      selectAll,
+      toggleSelect,
+      someSelected,
+      allSelected
+    } = provideSelection(props, {
+      allItems: items,
+      pageItems: items
+    });
+    useOptions({
+      page,
+      pageSize,
+      search: toRef(props, 'search'),
+      sortBy
+    }, emit);
+    provide('y-data-table', {
+      toggleSort,
+      sortBy
+    });
     const slotProps = computed(() => {
       return {
+        // pagination
         page: page.value,
-        pageSize: pageSize.value
+        pageSize: pageSize.value,
+        pageLength: pageLength.value,
+        setPageSize,
+        setPage,
+        // sorting
+        sortBy: sortBy.value,
+        toggleSort,
+        // selection
+        someSelected: someSelected.value,
+        allSelected: allSelected.value,
+        isSelected,
+        select,
+        selectAll,
+        toggleSelect,
+        //
+        items: items.value,
+        columns: columns.value,
+        headers: headers.value
       };
     });
+    const yDataTableHeadProps = chooseProps(props, YDataTableHead.props);
+    const yDataTableBodyProps = chooseProps(props, YDataTableBody.props);
+    const yTableProps = chooseProps(props, YTable.props);
     useRender(() => {
-      return _createVNode(YTable, {
+      return _createVNode(YTable, _mergeProps({
         "class": ['y-data-table']
-      }, {
-        default: () => [{
-          top: () => slots.top?.(slotProps.value),
-          leading: () => slots.leading ? slots.leading(slotProps.value) : _createVNode(_Fragment, null, [_createVNode(YDataTableLayer, null, slots)]),
-          default: () => slots.default ? slots.default(slotProps.value) : _createVNode(_Fragment, null, [_createVNode("thead", null, [_createVNode(YDataTableHead, null, slots)]), slots.thead?.(slotProps.value), _createVNode("tbody", null, [_createVNode(YDataTableBody, null, slots)]), slots.tbody?.(slotProps.value), slots.tfoot?.(slotProps.value)]),
-          trailing: () => slots.trailing?.(slotProps.value),
-          bottom: () => slots.bottom ? slots.bottom(slotProps.value) : _createVNode(YDataTableControl, null, {
-            prepend: slots['control.prepend']
-          })
-        }],
-        ...slots
+      }, yTableProps), {
+        top: () => slots.top?.(slotProps.value),
+        leading: () => slots.leading ? slots.leading(slotProps.value) : _createVNode(_Fragment, null, [_createVNode(YDataTableLayer, null, slots)]),
+        default: () => slots.default ? slots.default(slotProps.value) : _createVNode(_Fragment, null, [_createVNode("thead", null, [_createVNode(YDataTableHead, yDataTableHeadProps, slots)]), slots.thead?.(slotProps.value), _createVNode("tbody", null, [_createVNode(YDataTableBody, _mergeProps(yDataTableBodyProps, {
+          "items": paginatedItems.value
+        }), slots)]), slots.tbody?.(slotProps.value), slots.tfoot?.(slotProps.value)]),
+        trailing: () => slots.trailing?.(slotProps.value),
+        bottom: () => slots.bottom ? slots.bottom(slotProps.value) : _createVNode(YDataTableControl, null, {
+          prepend: slots['control.prepend'],
+          append: slots['control.append']
+        })
       });
     });
+    return {
+      paginatedItems
+    };
   }
 });
 //# sourceMappingURL=YDataTable.mjs.map

package/lib/components/table/YDataTable.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YDataTable.mjs","names":["computed","defineComponent","useRender","propsFactory","YDataTableBody","YDataTableControl","pressYDataTableHeadProps","YDataTableHead","YDataTableLayer","pressYTableProps","YTable","pressDataTableHeader","createPagination","pressDataTablePaginationProps","pressDataTableSortProps","pressDataTableSelectionProps","pressDataTableItemsProps","pressDataTableProps","width","String","Number","search","YDataTable","name","props","emits","value","setup","_ref","slots","page","pageSize","slotProps","_createVNode","default","top","leading","_Fragment","thead","tbody","tfoot","trailing","bottom","prepend"],"sources":["../../../src/components/table/YDataTable.tsx"],"sourcesContent":["import { PropType, computed, defineComponent } from 'vue';\n\nimport { useRender } from '../../composables/component';\nimport { propsFactory } from '../../util/vue-component';\nimport { YDataTableBody } from './YDataTableBody';\nimport { YDataTableControl } from './YDataTableControl';\nimport { pressYDataTableHeadProps, YDataTableHead } from \"./YDataTableHead\";\nimport { YDataTableLayer } from './YDataTableLayer';\nimport { pressYTableProps, YTable } from \"./YTable\";\nimport { pressDataTableHeader } from './composibles/header';\nimport {\n  createPagination,\n  pressDataTablePaginationProps,\n} from './composibles/pagination';\nimport { pressDataTableSortProps } from './composibles/sorting';\nimport { pressDataTableSelectionProps } from \"./composibles/selection\";\nimport { pressDataTableItemsProps } from \"./composibles/items\";\n\nexport const pressDataTableProps = propsFactory(\n  {\n    width: [String, Number] as PropType<string | number>,\n    search: String as PropType<string>,\n    ...pressDataTableHeader(),\n    ...pressDataTableItemsProps(),\n    ...pressDataTableSortProps(),\n    ...pressDataTableSelectionProps(),\n    ...pressYDataTableHeadProps(),\n    ...pressYTableProps(),\n  },\n  'DataTable',\n);\n\nexport const YDataTable = defineComponent({\n  name: 'YDataTable',\n  props: {\n    ...pressDataTablePaginationProps(),\n    ...pressDataTableProps(),\n  },\n  emits: {\n    'update:modelValue': (value: any[]) => true,\n    'update:page': (value: number) => true,\n    'update:pageSize': (value: number) => true,\n    'update:sortBy': (value: any) => true,\n    'update:options': (value: any) => true,\n  },\n  setup(props, { slots }) {\n    const { page, pageSize } = createPagination(props as any);\n\n    const slotProps = computed(() => {\n      return {\n        page: page.value,\n        pageSize: pageSize.value,\n      };\n    });\n    useRender(() => {\n      return (\n        <YTable class={['y-data-table']} v-slots={slots}>\n          {{\n            top: () => slots.top?.(slotProps.value),\n            leading: () =>\n              slots.leading ? (\n                slots.leading(slotProps.value)\n              ) : (\n                <>\n                  <YDataTableLayer v-slots={slots}></YDataTableLayer>\n                </>\n              ),\n            default: () =>\n              slots.default ? (\n                slots.default(slotProps.value)\n              ) : (\n                <>\n                  <thead>\n                    <YDataTableHead v-slots={slots}></YDataTableHead>\n                  </thead>\n                  {slots.thead?.(slotProps.value)}\n                  <tbody>\n                    <YDataTableBody v-slots={slots}></YDataTableBody>\n                  </tbody>\n                  {slots.tbody?.(slotProps.value)}\n                  {slots.tfoot?.(slotProps.value)}\n                </>\n              ),\n            trailing: () => slots.trailing?.(slotProps.value),\n            bottom: () =>\n              slots.bottom ? (\n                slots.bottom(slotProps.value)\n              ) : (\n                <YDataTableControl\n                  v-slots={{\n                    prepend: slots['control.prepend'],\n                  }}\n                ></YDataTableControl>\n              ),\n          }}\n        </YTable>\n      );\n    });\n  },\n});\n\nexport type YDataTable = InstanceType<typeof YDataTable>;\n"],"mappings":"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"}
+{"version":3,"file":"YDataTable.mjs","names":["computed","defineComponent","provide","toRef","useRender","chooseProps","propsFactory","YDataTableBody","YDataTableControl","YDataTableHead","pressYDataTableHeadProps","YDataTableLayer","YTable","pressYTableProps","createHeader","pressDataTableHeader","pressDataTableItemsProps","useItems","useOptions","createPagination","pressDataTablePaginationProps","providePagination","usePaginatedItems","pressDataTableSelectionProps","provideSelection","createSorting","pressDataTableSortProps","provideSorting","pressDataTableProps","width","String","Number","search","YDataTable","name","props","emits","value","page","pageSize","sortBy","options","click:row","e","setup","_ref","slots","emit","multiSort","columns","headers","enableSelect","items","toggleSort","total","length","startIndex","endIndex","pageLength","setPageSize","setPage","paginatedItems","isSelected","select","selectAll","toggleSelect","someSelected","allSelected","allItems","pageItems","slotProps","yDataTableHeadProps","yDataTableBodyProps","yTableProps","_createVNode","_mergeProps","top","leading","_Fragment","default","thead","tbody","tfoot","trailing","bottom","prepend","append"],"sources":["../../../src/components/table/YDataTable.tsx"],"sourcesContent":["import { PropType, computed, defineComponent, provide, toRef } from 'vue';\n\nimport { useRender } from '../../composables/component';\nimport { chooseProps, propsFactory } from '../../util/vue-component';\nimport { YDataTableBody } from './YDataTableBody';\nimport { YDataTableControl } from './YDataTableControl';\nimport { YDataTableHead, pressYDataTableHeadProps } from './YDataTableHead';\nimport { YDataTableLayer } from './YDataTableLayer';\nimport { YTable, pressYTableProps } from './YTable';\nimport { createHeader, pressDataTableHeader } from './composibles/header';\nimport { pressDataTableItemsProps, useItems } from './composibles/items';\nimport { useOptions } from './composibles/options';\nimport {\n  createPagination,\n  pressDataTablePaginationProps,\n  providePagination,\n  usePaginatedItems,\n} from './composibles/pagination';\nimport {\n  pressDataTableSelectionProps,\n  provideSelection,\n} from './composibles/selection';\nimport {\n  createSorting,\n  pressDataTableSortProps,\n  provideSorting,\n} from './composibles/sorting';\nimport { YDataTableSlotProps } from './types';\n\nexport const pressDataTableProps = propsFactory(\n  {\n    width: [String, Number] as PropType<string | number>,\n    search: String as PropType<string>,\n    ...pressDataTableHeader(),\n    ...pressDataTableItemsProps(),\n    ...pressDataTableSortProps(),\n    ...pressDataTableSelectionProps(),\n    ...pressYDataTableHeadProps(),\n    ...pressYTableProps(),\n  },\n  'DataTable',\n);\n\nexport const YDataTable = defineComponent({\n  name: 'YDataTable',\n  props: {\n    ...pressDataTablePaginationProps(),\n    ...pressDataTableProps(),\n  },\n  emits: {\n    'update:modelValue': (value: any[]) => true,\n    'update:page': (page: number) => true,\n    'update:pageSize': (pageSize: number) => true,\n    'update:sortBy': (sortBy: any) => true,\n    'update:options': (options: any) => true,\n    'click:row': (e: Event, value: { row: any }) => true,\n  },\n  setup(props, { slots, emit }) {\n    const { page, pageSize } = createPagination(props);\n    const { sortBy, multiSort } = createSorting(props);\n    const { columns, headers } = createHeader(props, {\n      enableSelect: toRef(props, 'enableSelect'),\n    });\n    const { items } = useItems(props, columns);\n\n    const { toggleSort } = provideSorting({ sortBy, multiSort, page });\n    const total = computed(() => items.value.length);\n    const { startIndex, endIndex, pageLength, setPageSize, setPage } =\n      providePagination({\n        page,\n        pageSize,\n        total,\n      });\n    const { paginatedItems } = usePaginatedItems({\n      items,\n      startIndex,\n      endIndex,\n      pageSize,\n    });\n    const {\n      isSelected,\n      select,\n      selectAll,\n      toggleSelect,\n      someSelected,\n      allSelected,\n    } = provideSelection(props, { allItems: items, pageItems: items });\n\n    useOptions(\n      {\n        page,\n        pageSize,\n        search: toRef(props, 'search'),\n        sortBy,\n      },\n      emit,\n    );\n\n    provide('y-data-table', {\n      toggleSort,\n      sortBy,\n    });\n\n    const slotProps = computed<YDataTableSlotProps>(() => {\n      return {\n        // pagination\n        page: page.value,\n        pageSize: pageSize.value,\n        pageLength: pageLength.value,\n        setPageSize,\n        setPage,\n        // sorting\n        sortBy: sortBy.value,\n        toggleSort,\n        // selection\n        someSelected: someSelected.value,\n        allSelected: allSelected.value,\n        isSelected,\n        select,\n        selectAll,\n        toggleSelect,\n        //\n        items: items.value,\n        columns: columns.value,\n        headers: headers.value,\n      };\n    });\n    const yDataTableHeadProps = chooseProps(props, YDataTableHead.props);\n    const yDataTableBodyProps = chooseProps(props, YDataTableBody.props);\n    const yTableProps = chooseProps(props, YTable.props);\n    useRender(() => {\n      return (\n        <YTable class={['y-data-table']} {...yTableProps}>\n          {{\n            top: () => slots.top?.(slotProps.value),\n            leading: () =>\n              slots.leading ? (\n                slots.leading(slotProps.value)\n              ) : (\n                <>\n                  <YDataTableLayer v-slots={slots}></YDataTableLayer>\n                </>\n              ),\n            default: () =>\n              slots.default ? (\n                slots.default(slotProps.value)\n              ) : (\n                <>\n                  <thead>\n                    <YDataTableHead\n                      v-slots={slots}\n                      {...yDataTableHeadProps}\n                    ></YDataTableHead>\n                  </thead>\n                  {slots.thead?.(slotProps.value)}\n                  <tbody>\n                    <YDataTableBody\n                      v-slots={slots}\n                      {...yDataTableBodyProps}\n                      items={paginatedItems.value}\n                    ></YDataTableBody>\n                  </tbody>\n                  {slots.tbody?.(slotProps.value)}\n                  {slots.tfoot?.(slotProps.value)}\n                </>\n              ),\n            trailing: () => slots.trailing?.(slotProps.value),\n            bottom: () =>\n              slots.bottom ? (\n                slots.bottom(slotProps.value)\n              ) : (\n                <YDataTableControl\n                  v-slots={{\n                    prepend: slots['control.prepend'],\n                    append: slots['control.append'],\n                  }}\n                ></YDataTableControl>\n              ),\n          }}\n        </YTable>\n      );\n    });\n    return {paginatedItems}\n  },\n});\n\nexport type YDataTable = InstanceType<typeof YDataTable>;\n"],"mappings":"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"}

package/lib/components/table/YDataTableControl.mjs

@@ -1,17 +1,28 @@
-import { createTextVNode as _createTextVNode, createVNode as _createVNode, Fragment as _Fragment } from "vue";
+import { createVNode as _createVNode, Fragment as _Fragment } from "vue";
 import { defineComponent } from 'vue';
 import { useRender } from "../../composables/component.mjs";
+import { propsFactory } from "../../util/index.mjs";
 import { YButton } from "../button/index.mjs";
 import { YFieldInput } from "../field-input/index.mjs";
-import { YIconExpand } from "../icons/index.mjs";
+import { YIconExpand, YIconPageControl } from "../icons/index.mjs";
+import { YPagination } from "../pagination/index.mjs";
+import { pressDataTablePaginationProps } from "./composibles/pagination.mjs";
 import "./YDataTableControl.scss";
+export const pressYDataTableControlPropsOptions = propsFactory({
+  pageLength: Number,
+  setPageSize: Function,
+  setPage: Function,
+  ...pressDataTablePaginationProps()
+}, 'YDataTableControl');
 export const YDataTableControl = defineComponent({
   name: 'YDataTableControl',
   components: {
     YButton,
     YIconExpand,
-    YFieldInput
+    YFieldInput,
+    YIconPageControl
   },
+  props: pressYDataTableControlPropsOptions(),
   setup(props, _ref) {
     let {
       slots
@@ -19,18 +30,16 @@ export const YDataTableControl = defineComponent({
     useRender(() => {
       return _createVNode("footer", {
         "class": ['y-data-table-control']
-      }, [slots.default ? slots.default() : _createVNode(_Fragment, null, [_createVNode(YButton, {
-        "outlined": true
-      }, {
-        default: () => [_createTextVNode("20"), _createVNode(YIconExpand, {
-          "style": {
-            width: '16px',
-            height: '16px'
-          }
-        }, null)]
-      }), _createTextVNode("\uD398\uC774\uC9C0"), _createVNode("div", null, [_createVNode(YFieldInput, {
-        "outlined": true
-      }, null)])])]);
+      }, [slots.prepend?.(props), slots.default ? slots.default() : _createVNode(_Fragment, null, [_createVNode("div", {
+        "class": "y-data-table-control__start"
+      }, null), _createVNode("div", {
+        "class": "y-data-table-control__end"
+      }, [_createVNode(YPagination, {
+        "model-value": props.page,
+        "onUpdate:modelValue": props.setPage,
+        "length": props.pageLength,
+        "totalVisible": 0
+      }, null)])]), slots.append?.(props)]);
     });
   }
 });

package/lib/components/table/YDataTableControl.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YDataTableControl.mjs","names":["defineComponent","useRender","YButton","YFieldInput","YIconExpand","YDataTableControl","name","components","setup","props","_ref","slots","_createVNode","default","_Fragment","_createTextVNode","width","height"],"sources":["../../../src/components/table/YDataTableControl.tsx"],"sourcesContent":["import { defineComponent } from 'vue';\n\nimport { useRender } from '../../composables/component';\nimport { YButton } from '../button';\nimport { YFieldInput } from '../field-input';\n\nimport { YIconExpand } from '../icons';\nimport './YDataTableControl.scss';\n\nexport const YDataTableControl = defineComponent({\n  name: 'YDataTableControl',\n  components: {\n    YButton,\n    YIconExpand,\n    YFieldInput,\n  },\n  setup(props, { slots }) {\n    useRender(() => {\n      return (\n        <footer class={['y-data-table-control']}>\n          {slots.default ? (\n            slots.default()\n          ) : (\n            <>\n              <YButton outlined>\n                20\n                <YIconExpand\n                  style={{ width: '16px', height: '16px' }}\n                ></YIconExpand>\n              </YButton>\n              페이지\n              <div>\n                <YFieldInput outlined></YFieldInput>\n              </div>\n            </>\n          )}\n        </footer>\n      );\n    });\n  },\n});\n\nexport type YDataTableControl = InstanceType<typeof YDataTableControl>;\n"],"mappings":";AAAA,SAASA,eAAe,QAAQ,KAAK;AAAC,SAE7BC,SAAS;AAAA,SACTC,OAAO;AAAA,SACPC,WAAW;AAAA,SAEXC,WAAW;AACpB;AAEA,OAAO,MAAMC,iBAAiB,GAAGL,eAAe,CAAC;EAC/CM,IAAI,EAAE,mBAAmB;EACzBC,UAAU,EAAE;IACVL,OAAO;IACPE,WAAW;IACXD;EACF,CAAC;EACDK,KAAKA,CAACC,KAAK,EAAAC,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACpBT,SAAS,CAAC,MAAM;MACd,OAAAW,YAAA;QAAA,SACiB,CAAC,sBAAsB;MAAC,IACpCD,KAAK,CAACE,OAAO,GACZF,KAAK,CAACE,OAAO,CAAC,CAAC,GAAAD,YAAA,CAAAE,SAAA,SAAAF,YAAA,CAAAV,OAAA;QAAA;MAAA;QAAAW,OAAA,EAAAA,CAAA,MAAAE,gBAAA,QAAAH,YAAA,CAAAR,WAAA;UAAA,SAMF;YAAEY,KAAK,EAAE,MAAM;YAAEC,MAAM,EAAE;UAAO;QAAC;MAAA,IAAAF,gBAAA,wBAAAH,YAAA,eAAAA,YAAA,CAAAT,WAAA;QAAA;MAAA,YAQ/C;IAGP,CAAC,CAAC;EACJ;AACF,CAAC,CAAC"}
+{"version":3,"file":"YDataTableControl.mjs","names":["defineComponent","useRender","propsFactory","YButton","YFieldInput","YIconExpand","YIconPageControl","YPagination","pressDataTablePaginationProps","pressYDataTableControlPropsOptions","pageLength","Number","setPageSize","Function","setPage","YDataTableControl","name","components","props","setup","_ref","slots","_createVNode","prepend","default","_Fragment","page","append"],"sources":["../../../src/components/table/YDataTableControl.tsx"],"sourcesContent":["import { PropType, defineComponent } from 'vue';\n\nimport { useRender } from '../../composables/component';\nimport { propsFactory } from '../../util';\nimport { YButton } from '../button';\nimport { YFieldInput } from '../field-input';\nimport { YIconExpand, YIconPageControl } from '../icons';\nimport { YPagination } from '../pagination';\nimport { pressDataTablePaginationProps } from './composibles/pagination';\n\nimport './YDataTableControl.scss';\n\nexport const pressYDataTableControlPropsOptions = propsFactory(\n  {\n    pageLength: Number as PropType<number>,\n    setPageSize: Function as PropType<(pageSize: number) => void>,\n    setPage: Function as PropType<(page: number) => void>,\n    ...pressDataTablePaginationProps(),\n  },\n  'YDataTableControl',\n);\n\nexport const YDataTableControl = defineComponent({\n  name: 'YDataTableControl',\n  components: {\n    YButton,\n    YIconExpand,\n    YFieldInput,\n    YIconPageControl,\n  },\n  props: pressYDataTableControlPropsOptions(),\n  setup(props, { slots }) {\n    useRender(() => {\n      return (\n        <footer class={['y-data-table-control']}>\n          {slots.prepend?.(props)}\n          {slots.default ? (\n            slots.default()\n          ) : (\n            <>\n              <div class=\"y-data-table-control__start\"></div>\n              <div class=\"y-data-table-control__end\">\n                <YPagination\n                  model-value={props.page}\n                  onUpdate:modelValue={props.setPage}\n                  length={props.pageLength}\n                  totalVisible={0}\n                ></YPagination>\n              </div>\n            </>\n          )}\n          {slots.append?.(props)}\n        </footer>\n      );\n    });\n  },\n});\n\nexport type YDataTableControl = InstanceType<typeof YDataTableControl>;\n"],"mappings":";AAAA,SAAmBA,eAAe,QAAQ,KAAK;AAAC,SAEvCC,SAAS;AAAA,SACTC,YAAY;AAAA,SACZC,OAAO;AAAA,SACPC,WAAW;AAAA,SACXC,WAAW,EAAEC,gBAAgB;AAAA,SAC7BC,WAAW;AAAA,SACXC,6BAA6B;AAEtC;AAEA,OAAO,MAAMC,kCAAkC,GAAGP,YAAY,CAC5D;EACEQ,UAAU,EAAEC,MAA0B;EACtCC,WAAW,EAAEC,QAAgD;EAC7DC,OAAO,EAAED,QAA4C;EACrD,GAAGL,6BAA6B,CAAC;AACnC,CAAC,EACD,mBACF,CAAC;AAED,OAAO,MAAMO,iBAAiB,GAAGf,eAAe,CAAC;EAC/CgB,IAAI,EAAE,mBAAmB;EACzBC,UAAU,EAAE;IACVd,OAAO;IACPE,WAAW;IACXD,WAAW;IACXE;EACF,CAAC;EACDY,KAAK,EAAET,kCAAkC,CAAC,CAAC;EAC3CU,KAAKA,CAACD,KAAK,EAAAE,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACpBnB,SAAS,CAAC,MAAM;MACd,OAAAqB,YAAA;QAAA,SACiB,CAAC,sBAAsB;MAAC,IACpCD,KAAK,CAACE,OAAO,GAAGL,KAAK,CAAC,EACtBG,KAAK,CAACG,OAAO,GACZH,KAAK,CAACG,OAAO,CAAC,CAAC,GAAAF,YAAA,CAAAG,SAAA,SAAAH,YAAA;QAAA,SAGF;MAA6B,UAAAA,YAAA;QAAA,SAC7B;MAA2B,IAAAA,YAAA,CAAAf,WAAA;QAAA,eAErBW,KAAK,CAACQ,IAAI;QAAA,uBACFR,KAAK,CAACJ,OAAO;QAAA,UAC1BI,KAAK,CAACR,UAAU;QAAA,gBACV;MAAC,YAItB,EACAW,KAAK,CAACM,MAAM,GAAGT,KAAK,CAAC;IAG5B,CAAC,CAAC;EACJ;AACF,CAAC,CAAC"}

package/lib/components/table/YDataTableControl.scss

@@ -1,6 +1,7 @@
 .y-data-table-control {
   display: flex;
   align-items: center;
+  justify-content: space-between;
   padding: 8px 16px;
   gap: 8px;
 }

package/lib/components/table/composibles/pagination.mjs

@@ -6,7 +6,7 @@ export const Y_DATA_TABLE_PAGINATION_KEY = Symbol.for('yuyeon.data-table.paginat
 export const pressDataTablePaginationProps = propsFactory({
   page: {
     type: [Number, String],
-    default: 0
+    default: 1
   },
   pageSize: {
     type: [Number, String],
@@ -79,4 +79,19 @@ export function usePagination() {
   }
   return data;
 }
+export function usePaginatedItems(options) {
+  const {
+    items,
+    startIndex,
+    endIndex,
+    pageSize
+  } = options;
+  const paginatedItems = computed(() => {
+    if (pageSize.value <= 0) return items.value;
+    return items.value.slice(startIndex.value, endIndex.value);
+  });
+  return {
+    paginatedItems
+  };
+}
 //# sourceMappingURL=pagination.mjs.map

package/lib/components/table/composibles/pagination.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.mjs","names":["computed","inject","provide","watchEffect","useModelDuplex","clamp","propsFactory","Y_DATA_TABLE_PAGINATION_KEY","Symbol","for","pressDataTablePaginationProps","page","type","Number","String","default","pageSize","createPagination","props","undefined","value","providePagination","options","total","startIndex","endIndex","Math","min","pageLength","ceil","setPageSize","nextPage","prevPage","setPage","data","usePagination","Error","description"],"sources":["../../../../src/components/table/composibles/pagination.ts"],"sourcesContent":["import type { InjectionKey, PropType, Ref } from 'vue';\nimport { computed, inject, provide, watchEffect } from 'vue';\n\nimport { useModelDuplex } from '../../../composables/communication';\nimport { clamp } from '../../../util/common';\nimport { propsFactory } from '../../../util/vue-component';\nimport { DataTableProvidePaginationData } from \"../types\";\n\nexport const Y_DATA_TABLE_PAGINATION_KEY: InjectionKey<{\n  page: Ref<number>;\n  pageSize: Ref<number>;\n  startIndex: Ref<number>;\n  endIndex: Ref<number>;\n  pageLength: Ref<number>;\n  total: Ref<number>;\n  prevPage: () => void;\n  nextPage: () => void;\n  setPage: (page: number) => void;\n  setPageSize: (size: number) => void;\n}> = Symbol.for('yuyeon.data-table.pagination');\n\nexport const pressDataTablePaginationProps = propsFactory(\n  {\n    page: {\n      type: [Number, String] as PropType<number | string>,\n      default: 0,\n    },\n    pageSize: {\n      type: [Number, String] as PropType<number | string>,\n      default: 10,\n    },\n  },\n  'YDataTable--pagination',\n);\n\ntype PaginationProps = {\n  page: number | string;\n  'onUpdate:page': ((v: any) => void) | undefined;\n  pageSize: number | string;\n  'onUpdate:pageSize': ((v: any) => void) | undefined;\n  total?: number | string;\n};\n\nexport function createPagination(props: PaginationProps) {\n  const page = useModelDuplex(\n    props,\n    'page',\n    undefined,\n    (value) => +(value ?? 0),\n  );\n  const pageSize = useModelDuplex(\n    props,\n    'pageSize',\n    undefined,\n    (value) => +(value ?? 10),\n  );\n  return { page, pageSize };\n}\n\nexport function providePagination(options: {\n  page: Ref<number>;\n  pageSize: Ref<number>;\n  total: Ref<number>;\n}) {\n  const { page, pageSize, total } = options;\n\n  const startIndex = computed(() => {\n    if (pageSize.value === -1) return 0;\n\n    return pageSize.value * (page.value - 1);\n  });\n  const endIndex = computed(() => {\n    if (pageSize.value === -1) return total.value;\n\n    return Math.min(total.value, startIndex.value + pageSize.value);\n  });\n\n  const pageLength = computed(() => {\n    if (pageSize.value === -1 || total.value === 0) return 1;\n\n    return Math.ceil(total.value / pageSize.value);\n  });\n\n  watchEffect(() => {\n    if (page.value > pageLength.value) {\n      page.value = pageLength.value;\n    }\n  });\n\n  function setPageSize(value: number) {\n    pageSize.value = value;\n    page.value = 1;\n  }\n\n  function nextPage() {\n    page.value = clamp(page.value + 1, 1, pageLength.value);\n  }\n\n  function prevPage() {\n    page.value = clamp(page.value - 1, 1, pageLength.value);\n  }\n\n  function setPage(value: number) {\n    page.value = clamp(value, 1, pageLength.value);\n  }\n\n  const data: DataTableProvidePaginationData = {\n    page,\n    pageSize,\n    startIndex,\n    endIndex,\n    pageLength,\n    total,\n    nextPage,\n    prevPage,\n    setPage,\n    setPageSize,\n  };\n\n  provide(Y_DATA_TABLE_PAGINATION_KEY, data);\n\n  return data;\n}\n\nexport function usePagination() {\n  const data = inject(Y_DATA_TABLE_PAGINATION_KEY);\n  if (!data) {\n    throw new Error(`Not provided: ${Y_DATA_TABLE_PAGINATION_KEY.description}`);\n  }\n  return data;\n}\n"],"mappings":"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"}
+{"version":3,"file":"pagination.mjs","names":["computed","inject","provide","watchEffect","useModelDuplex","clamp","propsFactory","Y_DATA_TABLE_PAGINATION_KEY","Symbol","for","pressDataTablePaginationProps","page","type","Number","String","default","pageSize","createPagination","props","undefined","value","providePagination","options","total","startIndex","endIndex","Math","min","pageLength","ceil","setPageSize","nextPage","prevPage","setPage","data","usePagination","Error","description","usePaginatedItems","items","paginatedItems","slice"],"sources":["../../../../src/components/table/composibles/pagination.ts"],"sourcesContent":["import type { InjectionKey, PropType, Ref } from 'vue';\nimport { computed, inject, provide, watchEffect } from 'vue';\n\nimport { useModelDuplex } from '../../../composables/communication';\nimport { clamp } from '../../../util/common';\nimport { propsFactory } from '../../../util/vue-component';\nimport { DataTableProvidePaginationData } from \"../types\";\n\nexport const Y_DATA_TABLE_PAGINATION_KEY: InjectionKey<{\n  page: Ref<number>;\n  pageSize: Ref<number>;\n  startIndex: Ref<number>;\n  endIndex: Ref<number>;\n  pageLength: Ref<number>;\n  total: Ref<number>;\n  prevPage: () => void;\n  nextPage: () => void;\n  setPage: (page: number) => void;\n  setPageSize: (size: number) => void;\n}> = Symbol.for('yuyeon.data-table.pagination');\n\nexport const pressDataTablePaginationProps = propsFactory(\n  {\n    page: {\n      type: [Number, String] as PropType<number | string>,\n      default: 1,\n    },\n    pageSize: {\n      type: [Number, String] as PropType<number | string>,\n      default: 10,\n    },\n  },\n  'YDataTable--pagination',\n);\n\ntype PaginationProps = {\n  page: number | string;\n  'onUpdate:page': ((v: any) => void) | undefined;\n  pageSize: number | string;\n  'onUpdate:pageSize': ((v: any) => void) | undefined;\n  total?: number | string;\n};\n\nexport function createPagination(props: PaginationProps) {\n  const page = useModelDuplex(\n    props,\n    'page',\n    undefined,\n    (value) => +(value ?? 0),\n  );\n  const pageSize = useModelDuplex(\n    props,\n    'pageSize',\n    undefined,\n    (value) => +(value ?? 10),\n  );\n  return { page, pageSize };\n}\n\nexport function providePagination(options: {\n  page: Ref<number>;\n  pageSize: Ref<number>;\n  total: Ref<number>;\n}) {\n  const { page, pageSize, total } = options;\n  const startIndex = computed(() => {\n    if (pageSize.value === -1) return 0;\n\n    return pageSize.value * (page.value - 1);\n  });\n  const endIndex = computed(() => {\n    if (pageSize.value === -1) return total.value;\n\n    return Math.min(total.value, startIndex.value + pageSize.value);\n  });\n\n  const pageLength = computed(() => {\n    if (pageSize.value === -1 || total.value === 0) return 1;\n\n    return Math.ceil(total.value / pageSize.value);\n  });\n\n  watchEffect(() => {\n    if (page.value > pageLength.value) {\n      page.value = pageLength.value;\n    }\n  });\n\n  function setPageSize(value: number) {\n    pageSize.value = value;\n    page.value = 1;\n  }\n\n  function nextPage() {\n    page.value = clamp(page.value + 1, 1, pageLength.value);\n  }\n\n  function prevPage() {\n    page.value = clamp(page.value - 1, 1, pageLength.value);\n  }\n\n  function setPage(value: number) {\n    page.value = clamp(value, 1, pageLength.value);\n  }\n\n  const data: DataTableProvidePaginationData = {\n    page,\n    pageSize,\n    startIndex,\n    endIndex,\n    pageLength,\n    total,\n    nextPage,\n    prevPage,\n    setPage,\n    setPageSize,\n  };\n\n  provide(Y_DATA_TABLE_PAGINATION_KEY, data);\n\n  return data;\n}\n\nexport function usePagination() {\n  const data = inject(Y_DATA_TABLE_PAGINATION_KEY);\n  if (!data) {\n    throw new Error(`Not provided: ${Y_DATA_TABLE_PAGINATION_KEY.description}`);\n  }\n  return data;\n}\n\nexport function usePaginatedItems <T> (options: {\n  items: Ref<readonly (T)[]>\n  startIndex: Ref<number>\n  endIndex: Ref<number>\n  pageSize: Ref<number>\n}) {\n  const { items, startIndex, endIndex, pageSize } = options\n  const paginatedItems = computed(() => {\n    if (pageSize.value <= 0) return items.value\n\n    return items.value.slice(startIndex.value, endIndex.value)\n  })\n\n  return { paginatedItems }\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yuyeon",
-  "version": "0.0.29",
+  "version": "0.0.31",
   "keywords": [
     "UI Library",
     "Vue"

package/types/components/icons/YIconPageControl.d.ts

@@ -7,14 +7,14 @@ export declare const PageControlPaths: {
 };
 export declare const YIconPageControl: import("vue").DefineComponent<{
     type: {
-        type: PropType<"first" | "last" | "next" | "prev">;
+        type: PropType<"next" | "prev" | "first" | "last">;
         default: string;
     };
 }, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     type: {
-        type: PropType<"first" | "last" | "next" | "prev">;
+        type: PropType<"next" | "prev" | "first" | "last">;
         default: string;
     };
 }>>, {
-    type: "first" | "last" | "next" | "prev";
+    type: "next" | "prev" | "first" | "last";
 }, {}>;

package/types/components/icons/index.d.ts

@@ -1,3 +1,5 @@
 export * from './YIconExpand';
 export * from './YIconClear';
 export * from './YIconCheckbox';
+export * from './YIconPageControl';
+export * from './YIconSort';

package/types/components/table/YDataTable.d.ts

@@ -239,12 +239,17 @@ export declare const YDataTable: import("vue").DefineComponent<{
         type: PropType<string | number>;
         default: number;
     };
-}, void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    'update:modelValue': (value: any[]) => boolean;
-    'update:page': (value: number) => boolean;
-    'update:pageSize': (value: number) => boolean;
-    'update:sortBy': (value: any) => boolean;
-    'update:options': (value: any) => boolean;
+}, {
+    paginatedItems: import("vue").ComputedRef<readonly import("./types").DataTableItem<any>[]>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    'update:modelValue': (value: any[]) => true;
+    'update:page': (page: number) => true;
+    'update:pageSize': (pageSize: number) => true;
+    'update:sortBy': (sortBy: any) => true;
+    'update:options': (options: any) => true;
+    'click:row': (e: Event, value: {
+        row: any;
+    }) => true;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     tag: {
         type: PropType<string>;
@@ -312,10 +317,13 @@ export declare const YDataTable: import("vue").DefineComponent<{
     };
 }>> & {
     "onUpdate:modelValue"?: ((value: any[]) => any) | undefined;
-    "onUpdate:page"?: ((value: number) => any) | undefined;
-    "onUpdate:pageSize"?: ((value: number) => any) | undefined;
-    "onUpdate:sortBy"?: ((value: any) => any) | undefined;
-    "onUpdate:options"?: ((value: any) => any) | undefined;
+    "onUpdate:page"?: ((page: number) => any) | undefined;
+    "onUpdate:pageSize"?: ((pageSize: number) => any) | undefined;
+    "onUpdate:sortBy"?: ((sortBy: any) => any) | undefined;
+    "onUpdate:options"?: ((options: any) => any) | undefined;
+    "onClick:row"?: ((e: Event, value: {
+        row: any;
+    }) => any) | undefined;
 }, {
     modelValue: readonly any[];
     tag: string;