yuyeon 0.0.33 → 0.0.35

package/lib/components/select/YSelect.mjs

@@ -36,6 +36,9 @@ export const pressYSelectPropsOptions = propsFactory({
     type: [Number, String],
     default: 310
   },
+  expandIcon: {
+    type: Object
+  },
   ...pressSelectPropsOptions(),
   ...pressYFieldInputPropsOptions(),
   ...omit(pressCoordinateProps({
@@ -71,7 +74,7 @@ export const YSelect = defineComponent({
     });
     const selections = computed(() => {
       return model.value.map(v => {
-        return items.value.find(item => {
+        return items.value.filter(item => {
           return props.valueEquals(item.value, v.value);
         });
       });
@@ -79,6 +82,11 @@ export const YSelect = defineComponent({
     const selected = computed(() => {
       return selections.value.map(selection => selection.props.value);
     });
+    function isSelected(item) {
+      return !!selections.value.find(selectedItem => {
+        return selectedItem.value === item.value;
+      });
+    }
 
     // Field
     function onMousedownDisplay(event) {
@@ -107,7 +115,16 @@ export const YSelect = defineComponent({
     }
     function select(item) {
       if (props.multiple) {
-        //
+        const index = selections.value.findIndex(selectedItem => {
+          return selectedItem.value === item.value;
+        });
+        if (index === -1) {
+          model.value = [...model.value, item];
+        } else {
+          const neo = model.value.slice();
+          neo.splice(index, 1);
+          model.value = neo;
+        }
       } else {
         model.value = [item];
       }
@@ -178,7 +195,10 @@ export const YSelect = defineComponent({
           }, {
             default: () => [items.value.map(item => {
               return _createVNode(YListItem, {
-                "onClick": e => onClickItem(item)
+                "onClick": e => onClickItem(item),
+                "class": {
+                  'y-list-item--active': isSelected(item)
+                }
               }, {
                 default: () => [item.text]
               });
@@ -192,7 +212,8 @@ export const YSelect = defineComponent({
     return {
       fieldInputRef,
       model,
-      selections
+      selections,
+      selected
     };
   }
 });

package/lib/components/select/YSelect.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YSelect.mjs","names":["shallowRef","computed","defineComponent","mergeProps","ref","useModelDuplex","useRender","pressCoordinateProps","pressListItemsPropsOptions","useItems","wrapInArray","deepEqual","getObjectValueByPath","omit","chooseProps","propsFactory","YCard","YFieldInput","pressYFieldInputPropsOptions","YIconDropdown","YList","YListItem","YMenu","returnItemEquals","optionsItem","valueItem","valueKey","arguments","length","undefined","valueItemType","itemValue","pressSelectPropsOptions","opened","Boolean","multiple","weakEquals","valueEquals","type","Function","default","defaultSelect","pressYSelectPropsOptions","maxHeight","Number","String","position","YSelect","name","props","emits","value","setup","_ref","slots","fieldInputRef","menuRef","listRef","focused","items","toRefineItems","toEmitItems","model","v","emitValue","selections","map","find","item","selected","selection","onMousedownDisplay","event","disabled","onBlur","$el","contains","relatedTarget","onClickItem","select","onAfterLeave","focus","displayText","text","join","fieldInputProps","_createVNode","$event","offset","origin","base","_len","args","Array","_key","_mergeProps","leading","_len2","_key2","trailing","menu","e","_createTextVNode"],"sources":["../../../src/components/select/YSelect.tsx"],"sourcesContent":["import { shallowRef } from '@vue/runtime-core';\r\nimport type { PropType } from 'vue';\r\nimport { computed, defineComponent, mergeProps, ref } from 'vue';\r\n\r\nimport { useModelDuplex } from '../../composables/communication';\r\nimport { useRender } from '../../composables/component';\r\nimport { pressCoordinateProps } from '../../composables/coordinate';\r\nimport {\r\n  ListItem,\r\n  pressListItemsPropsOptions,\r\n  useItems,\r\n} from '../../composables/list-items';\r\nimport { wrapInArray } from '../../util/array';\r\nimport { deepEqual, getObjectValueByPath, omit } from '../../util/common';\r\nimport { chooseProps, propsFactory } from '../../util/vue-component';\r\nimport { YCard } from '../card';\r\nimport { YFieldInput, pressYFieldInputPropsOptions } from '../field-input';\r\nimport { YIconDropdown } from '../icons/YIconDropdown';\r\nimport { YList, YListItem } from '../list';\r\nimport { YMenu } from '../menu';\r\n\r\nimport './YSelect.scss';\r\n\r\nexport type SelectEquals = (\r\n  optionsItem: any,\r\n  valueItem: any,\r\n  valueKey?: string,\r\n) => boolean;\r\n\r\nexport function returnItemEquals(\r\n  optionsItem: any,\r\n  valueItem: any,\r\n  valueKey = 'value',\r\n) {\r\n  const valueItemType = typeof valueItem;\r\n  const itemValue =\r\n    valueItemType === 'string' || valueItemType === 'number'\r\n      ? getObjectValueByPath(optionsItem, valueKey)\r\n      : optionsItem;\r\n  return deepEqual(itemValue, valueItem);\r\n}\r\n\r\nexport const pressSelectPropsOptions = propsFactory(\r\n  {\r\n    opened: Boolean as PropType<boolean>,\r\n    multiple: Boolean,\r\n    weakEquals: Boolean,\r\n    valueEquals: {\r\n      type: Function as PropType<SelectEquals>,\r\n      default: deepEqual,\r\n    },\r\n    defaultSelect: Boolean,\r\n    ...pressListItemsPropsOptions(),\r\n  },\r\n  'Select',\r\n);\r\n\r\nexport const pressYSelectPropsOptions = propsFactory(\r\n  {\r\n    maxHeight: {\r\n      type: [Number, String],\r\n      default: 310,\r\n    },\r\n    ...pressSelectPropsOptions(),\r\n    ...pressYFieldInputPropsOptions(),\r\n    ...omit(pressCoordinateProps({ position: 'bottom' as 'bottom' }), [\r\n      'coordinateStrategy',\r\n    ]),\r\n  },\r\n  'YSelect',\r\n);\r\n\r\nexport const YSelect = defineComponent({\r\n  name: 'YSelect',\r\n  props: {\r\n    ...pressYSelectPropsOptions(),\r\n  },\r\n  emits: {\r\n    'update:modelValue': (value: any) => true,\r\n    'update:opened': (opened: boolean) => true,\r\n  },\r\n  setup(props, { slots }) {\r\n    const fieldInputRef = ref();\r\n    const menuRef = ref();\r\n    const listRef = ref<InstanceType<typeof YList>>();\r\n\r\n    const opened = useModelDuplex(props, 'opened');\r\n    const focused = shallowRef(false);\r\n\r\n    const { items, toRefineItems, toEmitItems } = useItems(props);\r\n    const model = useModelDuplex(\r\n      props,\r\n      'modelValue',\r\n      [],\r\n      (v) => toRefineItems(v === null ? [null] : wrapInArray(v)),\r\n      (v) => {\r\n        const emitValue = toEmitItems(wrapInArray(v));\r\n        return props.multiple ? emitValue : emitValue[0] ?? null;\r\n      },\r\n    );\r\n\r\n    const selections = computed<ListItem[]>(() => {\r\n      return model.value.map((v: any) => {\r\n        return items.value.find((item) => {\r\n          return props.valueEquals(item.value, v.value);\r\n        });\r\n      });\r\n    });\r\n\r\n    const selected = computed(() => {\r\n      return selections.value.map((selection) => selection.props.value);\r\n    });\r\n\r\n    // Field\r\n    function onMousedownDisplay(event: MouseEvent) {\r\n      if (props.disabled) {\r\n        return;\r\n      }\r\n      opened.value = !opened.value;\r\n    }\r\n\r\n    function onBlur(event: FocusEvent) {\r\n      if (listRef.value?.$el.contains(event.relatedTarget)) {\r\n        opened.value = false;\r\n      }\r\n    }\r\n\r\n    // Menu Contents\r\n    function onClickItem(item: ListItem) {\r\n      select(item);\r\n      if (!props.multiple) {\r\n        opened.value = false;\r\n      }\r\n    }\r\n\r\n    function onAfterLeave() {\r\n      if (focused.value) {\r\n        fieldInputRef.value?.focus();\r\n      }\r\n    }\r\n\r\n    function select(item: ListItem) {\r\n      if (props.multiple) {\r\n        //\r\n      } else {\r\n        model.value = [item];\r\n      }\r\n    }\r\n\r\n    const displayText = computed(() => {\r\n      if (props.multiple) {\r\n        return selections.value.map((item) => item.text).join(', ');\r\n      }\r\n      return selections.value?.[0]?.text ?? '';\r\n    });\r\n\r\n    useRender(() => {\r\n      const fieldInputProps = chooseProps(props, YFieldInput.props);\r\n      return (\r\n        <YMenu\r\n          v-model={opened.value}\r\n          ref={menuRef}\r\n          offset={props.offset}\r\n          position={props.position}\r\n          origin={props.origin}\r\n          content-classes={['y-select__content']}\r\n          maxHeight={props.maxHeight}\r\n          open-on-click-base={false}\r\n          onAfterLeave={onAfterLeave}\r\n        >\r\n          {{\r\n            base: (...args: any[]) =>\r\n              slots.base ? (\r\n                slots.base?.(...args)\r\n              ) : (\r\n                <YFieldInput\r\n                  {...{\r\n                    ...fieldInputProps,\r\n                    ...mergeProps({ ...args[0].props }, { ref: fieldInputRef }),\r\n                  }}\r\n                  onMousedown:display={onMousedownDisplay}\r\n                  onBlur={onBlur}\r\n                  readonly\r\n                  class={['y-select', { 'y-select--opened': opened.value }]}\r\n                  v-model:focused={focused.value}\r\n                >\r\n                  {{\r\n                    default: () => {\r\n                      return (\r\n                        <div class={['y-select__selection']}>\r\n                          {slots.selection\r\n                            ? slots.selection?.()\r\n                            : displayText.value}\r\n                        </div>\r\n                      );\r\n                    },\r\n                    leading: slots.leading\r\n                      ? (...args: any[]) => slots.leading?.(...args)\r\n                      : undefined,\r\n                    trailing: (...args: any[]) => {\r\n                      return slots['expand-icon'] ? (\r\n                        slots['expand-icon']()\r\n                      ) : (\r\n                        <i class=\"y-select__icon\">\r\n                          <YIconDropdown></YIconDropdown>\r\n                        </i>\r\n                      );\r\n                    },\r\n                    'helper-text': slots['helper-text']\r\n                      ? slots['helper-text']?.()\r\n                      : undefined,\r\n                  }}\r\n                </YFieldInput>\r\n              ),\r\n            default: () =>\r\n              slots.menu ? (\r\n                slots.menu()\r\n              ) : (\r\n                <YCard>\r\n                  {items.value.length > 0 ? (\r\n                    <YList ref={listRef}>\r\n                      {items.value.map((item) => {\r\n                        return (\r\n                          <YListItem onClick={(e) => onClickItem(item)}>\r\n                            {item.text}\r\n                          </YListItem>\r\n                        );\r\n                      })}\r\n                    </YList>\r\n                  ) : (\r\n                    <div class=\"y-select__no-options\">항목이 없습니다.</div>\r\n                  )}\r\n                </YCard>\r\n              ),\r\n          }}\r\n        </YMenu>\r\n      );\r\n    });\r\n\r\n    return {\r\n      fieldInputRef,\r\n      model,\r\n      selections,\r\n    };\r\n  },\r\n});\r\n"],"mappings":";AAAA,SAASA,UAAU,QAAQ,mBAAmB;AAE9C,SAASC,QAAQ,EAAEC,eAAe,EAAEC,UAAU,EAAEC,GAAG,QAAQ,KAAK;AAAC,SAExDC,cAAc;AAAA,SACdC,SAAS;AAAA,SACTC,oBAAoB;AAAA,SAG3BC,0BAA0B,EAC1BC,QAAQ;AAAA,SAEDC,WAAW;AAAA,SACXC,SAAS,EAAEC,oBAAoB,EAAEC,IAAI;AAAA,SACrCC,WAAW,EAAEC,YAAY;AAAA,SACzBC,KAAK;AAAA,SACLC,WAAW,EAAEC,4BAA4B;AAAA,SACzCC,aAAa;AAAA,SACbC,KAAK,EAAEC,SAAS;AAAA,SAChBC,KAAK;AAEd;AAQA,OAAO,SAASC,gBAAgBA,CAC9BC,WAAgB,EAChBC,SAAc,EAEd;EAAA,IADAC,QAAQ,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,OAAO;EAElB,MAAMG,aAAa,GAAG,OAAOL,SAAS;EACtC,MAAMM,SAAS,GACbD,aAAa,KAAK,QAAQ,IAAIA,aAAa,KAAK,QAAQ,GACpDlB,oBAAoB,CAACY,WAAW,EAAEE,QAAQ,CAAC,GAC3CF,WAAW;EACjB,OAAOb,SAAS,CAACoB,SAAS,EAAEN,SAAS,CAAC;AACxC;AAEA,OAAO,MAAMO,uBAAuB,GAAGjB,YAAY,CACjD;EACEkB,MAAM,EAAEC,OAA4B;EACpCC,QAAQ,EAAED,OAAO;EACjBE,UAAU,EAAEF,OAAO;EACnBG,WAAW,EAAE;IACXC,IAAI,EAAEC,QAAkC;IACxCC,OAAO,EAAE7B;EACX,CAAC;EACD8B,aAAa,EAAEP,OAAO;EACtB,GAAG1B,0BAA0B,CAAC;AAChC,CAAC,EACD,QACF,CAAC;AAED,OAAO,MAAMkC,wBAAwB,GAAG3B,YAAY,CAClD;EACE4B,SAAS,EAAE;IACTL,IAAI,EAAE,CAACM,MAAM,EAAEC,MAAM,CAAC;IACtBL,OAAO,EAAE;EACX,CAAC;EACD,GAAGR,uBAAuB,CAAC,CAAC;EAC5B,GAAGd,4BAA4B,CAAC,CAAC;EACjC,GAAGL,IAAI,CAACN,oBAAoB,CAAC;IAAEuC,QAAQ,EAAE;EAAqB,CAAC,CAAC,EAAE,CAChE,oBAAoB,CACrB;AACH,CAAC,EACD,SACF,CAAC;AAED,OAAO,MAAMC,OAAO,GAAG7C,eAAe,CAAC;EACrC8C,IAAI,EAAE,SAAS;EACfC,KAAK,EAAE;IACL,GAAGP,wBAAwB,CAAC;EAC9B,CAAC;EACDQ,KAAK,EAAE;IACL,mBAAmB,EAAGC,KAAU,IAAK,IAAI;IACzC,eAAe,EAAGlB,MAAe,IAAK;EACxC,CAAC;EACDmB,KAAKA,CAACH,KAAK,EAAAI,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACpB,MAAME,aAAa,GAAGnD,GAAG,CAAC,CAAC;IAC3B,MAAMoD,OAAO,GAAGpD,GAAG,CAAC,CAAC;IACrB,MAAMqD,OAAO,GAAGrD,GAAG,CAA6B,CAAC;IAEjD,MAAM6B,MAAM,GAAG5B,cAAc,CAAC4C,KAAK,EAAE,QAAQ,CAAC;IAC9C,MAAMS,OAAO,GAAG1D,UAAU,CAAC,KAAK,CAAC;IAEjC,MAAM;MAAE2D,KAAK;MAAEC,aAAa;MAAEC;IAAY,CAAC,GAAGpD,QAAQ,CAACwC,KAAK,CAAC;IAC7D,MAAMa,KAAK,GAAGzD,cAAc,CAC1B4C,KAAK,EACL,YAAY,EACZ,EAAE,EACDc,CAAC,IAAKH,aAAa,CAACG,CAAC,KAAK,IAAI,GAAG,CAAC,IAAI,CAAC,GAAGrD,WAAW,CAACqD,CAAC,CAAC,CAAC,EACzDA,CAAC,IAAK;MACL,MAAMC,SAAS,GAAGH,WAAW,CAACnD,WAAW,CAACqD,CAAC,CAAC,CAAC;MAC7C,OAAOd,KAAK,CAACd,QAAQ,GAAG6B,SAAS,GAAGA,SAAS,CAAC,CAAC,CAAC,IAAI,IAAI;IAC1D,CACF,CAAC;IAED,MAAMC,UAAU,GAAGhE,QAAQ,CAAa,MAAM;MAC5C,OAAO6D,KAAK,CAACX,KAAK,CAACe,GAAG,CAAEH,CAAM,IAAK;QACjC,OAAOJ,KAAK,CAACR,KAAK,CAACgB,IAAI,CAAEC,IAAI,IAAK;UAChC,OAAOnB,KAAK,CAACZ,WAAW,CAAC+B,IAAI,CAACjB,KAAK,EAAEY,CAAC,CAACZ,KAAK,CAAC;QAC/C,CAAC,CAAC;MACJ,CAAC,CAAC;IACJ,CAAC,CAAC;IAEF,MAAMkB,QAAQ,GAAGpE,QAAQ,CAAC,MAAM;MAC9B,OAAOgE,UAAU,CAACd,KAAK,CAACe,GAAG,CAAEI,SAAS,IAAKA,SAAS,CAACrB,KAAK,CAACE,KAAK,CAAC;IACnE,CAAC,CAAC;;IAEF;IACA,SAASoB,kBAAkBA,CAACC,KAAiB,EAAE;MAC7C,IAAIvB,KAAK,CAACwB,QAAQ,EAAE;QAClB;MACF;MACAxC,MAAM,CAACkB,KAAK,GAAG,CAAClB,MAAM,CAACkB,KAAK;IAC9B;IAEA,SAASuB,MAAMA,CAACF,KAAiB,EAAE;MACjC,IAAIf,OAAO,CAACN,KAAK,EAAEwB,GAAG,CAACC,QAAQ,CAACJ,KAAK,CAACK,aAAa,CAAC,EAAE;QACpD5C,MAAM,CAACkB,KAAK,GAAG,KAAK;MACtB;IACF;;IAEA;IACA,SAAS2B,WAAWA,CAACV,IAAc,EAAE;MACnCW,MAAM,CAACX,IAAI,CAAC;MACZ,IAAI,CAACnB,KAAK,CAACd,QAAQ,EAAE;QACnBF,MAAM,CAACkB,KAAK,GAAG,KAAK;MACtB;IACF;IAEA,SAAS6B,YAAYA,CAAA,EAAG;MACtB,IAAItB,OAAO,CAACP,KAAK,EAAE;QACjBI,aAAa,CAACJ,KAAK,EAAE8B,KAAK,CAAC,CAAC;MAC9B;IACF;IAEA,SAASF,MAAMA,CAACX,IAAc,EAAE;MAC9B,IAAInB,KAAK,CAACd,QAAQ,EAAE;QAClB;MAAA,CACD,MAAM;QACL2B,KAAK,CAACX,KAAK,GAAG,CAACiB,IAAI,CAAC;MACtB;IACF;IAEA,MAAMc,WAAW,GAAGjF,QAAQ,CAAC,MAAM;MACjC,IAAIgD,KAAK,CAACd,QAAQ,EAAE;QAClB,OAAO8B,UAAU,CAACd,KAAK,CAACe,GAAG,CAAEE,IAAI,IAAKA,IAAI,CAACe,IAAI,CAAC,CAACC,IAAI,CAAC,IAAI,CAAC;MAC7D;MACA,OAAOnB,UAAU,CAACd,KAAK,GAAG,CAAC,CAAC,EAAEgC,IAAI,IAAI,EAAE;IAC1C,CAAC,CAAC;IAEF7E,SAAS,CAAC,MAAM;MACd,MAAM+E,eAAe,GAAGvE,WAAW,CAACmC,KAAK,EAAEhC,WAAW,CAACgC,KAAK,CAAC;MAC7D,OAAAqC,YAAA,CAAAhE,KAAA;QAAA,cAEaW,MAAM,CAACkB,KAAK;QAAA,uBAAAoC,MAAA,IAAZtD,MAAM,CAACkB,KAAK,GAAAoC,MAAA;QAAA,OAChB/B,OAAO;QAAA,UACJP,KAAK,CAACuC,MAAM;QAAA,YACVvC,KAAK,CAACH,QAAQ;QAAA,UAChBG,KAAK,CAACwC,MAAM;QAAA,mBACH,CAAC,mBAAmB,CAAC;QAAA,aAC3BxC,KAAK,CAACN,SAAS;QAAA,sBACN,KAAK;QAAA,gBACXqC;MAAY;QAGxBU,IAAI,EAAE,SAAAA,CAAA;UAAA,SAAAC,IAAA,GAAAhE,SAAA,CAAAC,MAAA,EAAIgE,IAAI,OAAAC,KAAA,CAAAF,IAAA,GAAAG,IAAA,MAAAA,IAAA,GAAAH,IAAA,EAAAG,IAAA;YAAJF,IAAI,CAAAE,IAAA,IAAAnE,SAAA,CAAAmE,IAAA;UAAA;UAAA,OACZxC,KAAK,CAACoC,IAAI,GACRpC,KAAK,CAACoC,IAAI,GAAG,GAAGE,IAAI,CAAC,GAAAN,YAAA,CAAArE,WAAA,EAAA8E,WAAA;YAIjB,GAAGV,eAAe;YAClB,GAAGlF,UAAU,CAAC;cAAE,GAAGyF,IAAI,CAAC,CAAC,CAAC,CAAC3C;YAAM,CAAC,EAAE;cAAE7C,GAAG,EAAEmD;YAAc,CAAC;UAAC;YAAA,uBAExCgB,kBAAkB;YAAA,UAC/BG,MAAM;YAAA;YAAA,SAEP,CAAC,UAAU,EAAE;cAAE,kBAAkB,EAAEzC,MAAM,CAACkB;YAAM,CAAC,CAAC;YAAA,WACxCO,OAAO,CAACP,KAAK;YAAA,oBAAAoC,MAAA,IAAb7B,OAAO,CAACP,KAAK,GAAAoC;UAAA;YAG5B/C,OAAO,EAAEA,CAAA,KAAM;cACb,OAAA8C,YAAA;gBAAA,SACc,CAAC,qBAAqB;cAAC,IAChChC,KAAK,CAACgB,SAAS,GACZhB,KAAK,CAACgB,SAAS,GAAG,CAAC,GACnBY,WAAW,CAAC/B,KAAK;YAG3B,CAAC;YACD6C,OAAO,EAAE1C,KAAK,CAAC0C,OAAO,GAClB;cAAA,SAAAC,KAAA,GAAAtE,SAAA,CAAAC,MAAA,EAAIgE,IAAI,OAAAC,KAAA,CAAAI,KAAA,GAAAC,KAAA,MAAAA,KAAA,GAAAD,KAAA,EAAAC,KAAA;gBAAJN,IAAI,CAAAM,KAAA,IAAAvE,SAAA,CAAAuE,KAAA;cAAA;cAAA,OAAY5C,KAAK,CAAC0C,OAAO,GAAG,GAAGJ,IAAI,CAAC;YAAA,IAC5C/D,SAAS;YACbsE,QAAQ,EAAE,SAAAA,CAAA,EAAoB;cAC5B,OAAO7C,KAAK,CAAC,aAAa,CAAC,GACzBA,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,GAAAgC,YAAA;gBAAA,SAEb;cAAgB,IAAAA,YAAA,CAAAnE,aAAA,eAG1B;YACH,CAAC;YACD,aAAa,EAAEmC,KAAK,CAAC,aAAa,CAAC,GAC/BA,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,GACxBzB;UAAS,EAGlB;QAAA;QACHW,OAAO,EAAEA,CAAA,KACPc,KAAK,CAAC8C,IAAI,GACR9C,KAAK,CAAC8C,IAAI,CAAC,CAAC,GAAAd,YAAA,CAAAtE,KAAA;UAAAwB,OAAA,EAAAA,CAAA,MAGTmB,KAAK,CAACR,KAAK,CAACvB,MAAM,GAAG,CAAC,GAAA0D,YAAA,CAAAlE,KAAA;YAAA,OACTqC;UAAO;YAAAjB,OAAA,EAAAA,CAAA,MAChBmB,KAAK,CAACR,KAAK,CAACe,GAAG,CAAEE,IAAI,IAAK;cACzB,OAAAkB,YAAA,CAAAjE,SAAA;gBAAA,WACuBgF,CAAC,IAAKvB,WAAW,CAACV,IAAI;cAAC;gBAAA5B,OAAA,EAAAA,CAAA,MACzC4B,IAAI,CAACe,IAAI;cAAA;YAGhB,CAAC,CAAC;UAAA,KAAAG,YAAA;YAAA,SAGO;UAAsB,IAAAgB,gBAAA,kDAClC;QAAA;MAEJ;IAIX,CAAC,CAAC;IAEF,OAAO;MACL/C,aAAa;MACbO,KAAK;MACLG;IACF,CAAC;EACH;AACF,CAAC,CAAC"}
+{"version":3,"file":"YSelect.mjs","names":["shallowRef","computed","defineComponent","mergeProps","ref","useModelDuplex","useRender","pressCoordinateProps","pressListItemsPropsOptions","useItems","wrapInArray","deepEqual","getObjectValueByPath","omit","chooseProps","propsFactory","YCard","YFieldInput","pressYFieldInputPropsOptions","YIconDropdown","YList","YListItem","YMenu","returnItemEquals","optionsItem","valueItem","valueKey","arguments","length","undefined","valueItemType","itemValue","pressSelectPropsOptions","opened","Boolean","multiple","weakEquals","valueEquals","type","Function","default","defaultSelect","pressYSelectPropsOptions","maxHeight","Number","String","expandIcon","Object","position","YSelect","name","props","emits","value","setup","_ref","slots","fieldInputRef","menuRef","listRef","focused","items","toRefineItems","toEmitItems","model","v","emitValue","selections","map","filter","item","selected","selection","isSelected","find","selectedItem","onMousedownDisplay","event","disabled","onBlur","$el","contains","relatedTarget","onClickItem","select","onAfterLeave","focus","index","findIndex","neo","slice","splice","displayText","text","join","fieldInputProps","_createVNode","$event","offset","origin","base","_len","args","Array","_key","_mergeProps","leading","_len2","_key2","trailing","menu","e","_createTextVNode"],"sources":["../../../src/components/select/YSelect.tsx"],"sourcesContent":["import { shallowRef } from '@vue/runtime-core';\r\nimport type { PropType } from 'vue';\r\nimport { computed, defineComponent, mergeProps, ref } from 'vue';\r\n\r\nimport { useModelDuplex } from '../../composables/communication';\r\nimport { useRender } from '../../composables/component';\r\nimport { pressCoordinateProps } from '../../composables/coordinate';\r\nimport {\r\n  ListItem,\r\n  pressListItemsPropsOptions,\r\n  useItems,\r\n} from '../../composables/list-items';\r\nimport { wrapInArray } from '../../util/array';\r\nimport {deepEqual, getObjectValueByPath, getPropertyFromItem, omit} from '../../util/common';\r\nimport { chooseProps, propsFactory } from '../../util/vue-component';\r\nimport { YCard } from '../card';\r\nimport { YFieldInput, pressYFieldInputPropsOptions } from '../field-input';\r\nimport { YIconDropdown } from '../icons/YIconDropdown';\r\nimport { YList, YListItem } from '../list';\r\nimport { YMenu } from '../menu';\r\n\r\nimport './YSelect.scss';\r\n\r\nexport type SelectEquals = (\r\n  optionsItem: any,\r\n  valueItem: any,\r\n  valueKey?: string,\r\n) => boolean;\r\n\r\nexport function returnItemEquals(\r\n  optionsItem: any,\r\n  valueItem: any,\r\n  valueKey = 'value',\r\n) {\r\n  const valueItemType = typeof valueItem;\r\n  const itemValue =\r\n    valueItemType === 'string' || valueItemType === 'number'\r\n      ? getObjectValueByPath(optionsItem, valueKey)\r\n      : optionsItem;\r\n  return deepEqual(itemValue, valueItem);\r\n}\r\n\r\nexport const pressSelectPropsOptions = propsFactory(\r\n  {\r\n    opened: Boolean as PropType<boolean>,\r\n    multiple: Boolean,\r\n    weakEquals: Boolean,\r\n    valueEquals: {\r\n      type: Function as PropType<SelectEquals>,\r\n      default: deepEqual,\r\n    },\r\n    defaultSelect: Boolean,\r\n    ...pressListItemsPropsOptions(),\r\n  },\r\n  'Select',\r\n);\r\n\r\nexport const pressYSelectPropsOptions = propsFactory(\r\n  {\r\n    maxHeight: {\r\n      type: [Number, String],\r\n      default: 310,\r\n    },\r\n    expandIcon: {\r\n      type: Object,\r\n    },\r\n    ...pressSelectPropsOptions(),\r\n    ...pressYFieldInputPropsOptions(),\r\n    ...omit(pressCoordinateProps({ position: 'bottom' as 'bottom' }), [\r\n      'coordinateStrategy',\r\n    ]),\r\n  },\r\n  'YSelect',\r\n);\r\n\r\nexport const YSelect = defineComponent({\r\n  name: 'YSelect',\r\n  props: {\r\n    ...pressYSelectPropsOptions(),\r\n  },\r\n  emits: {\r\n    'update:modelValue': (value: any) => true,\r\n    'update:opened': (opened: boolean) => true,\r\n  },\r\n  setup(props, { slots }) {\r\n    const fieldInputRef = ref();\r\n    const menuRef = ref();\r\n    const listRef = ref<InstanceType<typeof YList>>();\r\n\r\n    const opened = useModelDuplex(props, 'opened');\r\n    const focused = shallowRef(false);\r\n\r\n    const { items, toRefineItems, toEmitItems } = useItems(props);\r\n    const model = useModelDuplex(\r\n      props,\r\n      'modelValue',\r\n      [],\r\n      (v) => toRefineItems(v === null ? [null] : wrapInArray(v)),\r\n      (v) => {\r\n        const emitValue = toEmitItems(wrapInArray(v));\r\n        return props.multiple ? emitValue : emitValue[0] ?? null;\r\n      },\r\n    );\r\n\r\n    const selections = computed<ListItem[]>(() => {\r\n      return model.value.map((v: any) => {\r\n        return items.value.filter((item) => {\r\n          return props.valueEquals(item.value, v.value);\r\n        });\r\n      });\r\n    });\r\n\r\n    const selected = computed(() => {\r\n      return selections.value.map((selection) => selection.props.value);\r\n    });\r\n\r\n    function isSelected(item: ListItem) {\r\n      return !!selections.value.find((selectedItem) => {\r\n        return selectedItem.value === item.value;\r\n      });\r\n    }\r\n\r\n    // Field\r\n    function onMousedownDisplay(event: MouseEvent) {\r\n      if (props.disabled) {\r\n        return;\r\n      }\r\n      opened.value = !opened.value;\r\n    }\r\n\r\n    function onBlur(event: FocusEvent) {\r\n      if (listRef.value?.$el.contains(event.relatedTarget)) {\r\n        opened.value = false;\r\n      }\r\n    }\r\n\r\n    // Menu Contents\r\n    function onClickItem(item: ListItem) {\r\n      select(item);\r\n      if (!props.multiple) {\r\n        opened.value = false;\r\n      }\r\n    }\r\n\r\n    function onAfterLeave() {\r\n      if (focused.value) {\r\n        fieldInputRef.value?.focus();\r\n      }\r\n    }\r\n\r\n    function select(item: ListItem) {\r\n      if (props.multiple) {\r\n        const index = selections.value.findIndex((selectedItem) => {\r\n          return selectedItem.value === item.value;\r\n        });\r\n        if (index === -1) {\r\n          model.value = [...model.value, item];\r\n        } else {\r\n          const neo = model.value.slice();\r\n          neo.splice(index, 1);\r\n          model.value = neo;\r\n        }\r\n      } else {\r\n        model.value = [item];\r\n      }\r\n    }\r\n\r\n    const displayText = computed(() => {\r\n      if (props.multiple) {\r\n        return selections.value.map((item) => item.text).join(', ');\r\n      }\r\n      return selections.value?.[0]?.text ?? '';\r\n    });\r\n\r\n    useRender(() => {\r\n      const fieldInputProps = chooseProps(props, YFieldInput.props);\r\n      return (\r\n        <YMenu\r\n          v-model={opened.value}\r\n          ref={menuRef}\r\n          offset={props.offset}\r\n          position={props.position}\r\n          origin={props.origin}\r\n          content-classes={['y-select__content']}\r\n          maxHeight={props.maxHeight}\r\n          open-on-click-base={false}\r\n          onAfterLeave={onAfterLeave}\r\n        >\r\n          {{\r\n            base: (...args: any[]) =>\r\n              slots.base ? (\r\n                slots.base?.(...args)\r\n              ) : (\r\n                <YFieldInput\r\n                  {...{\r\n                    ...fieldInputProps,\r\n                    ...mergeProps({ ...args[0].props }, { ref: fieldInputRef }),\r\n                  }}\r\n                  onMousedown:display={onMousedownDisplay}\r\n                  onBlur={onBlur}\r\n                  readonly\r\n                  class={['y-select', { 'y-select--opened': opened.value }]}\r\n                  v-model:focused={focused.value}\r\n                >\r\n                  {{\r\n                    default: () => {\r\n                      return (\r\n                        <div class={['y-select__selection']}>\r\n                          {slots.selection\r\n                            ? slots.selection?.()\r\n                            : displayText.value}\r\n                        </div>\r\n                      );\r\n                    },\r\n                    leading: slots.leading\r\n                      ? (...args: any[]) => slots.leading?.(...args)\r\n                      : undefined,\r\n                    trailing: (...args: any[]) => {\r\n                      return slots['expand-icon'] ? (\r\n                        slots['expand-icon']()\r\n                      ) : (\r\n                        <i class=\"y-select__icon\">\r\n                          <YIconDropdown></YIconDropdown>\r\n                        </i>\r\n                      );\r\n                    },\r\n                    'helper-text': slots['helper-text']\r\n                      ? slots['helper-text']?.()\r\n                      : undefined,\r\n                  }}\r\n                </YFieldInput>\r\n              ),\r\n            default: () =>\r\n              slots.menu ? (\r\n                slots.menu()\r\n              ) : (\r\n                <YCard>\r\n                  {items.value.length > 0 ? (\r\n                    <YList ref={listRef}>\r\n                      {items.value.map((item) => {\r\n                        return (\r\n                          <YListItem\r\n                            onClick={(e) => onClickItem(item)}\r\n                            class={{ 'y-list-item--active': isSelected(item) }}\r\n                          >\r\n                            {item.text}\r\n                          </YListItem>\r\n                        );\r\n                      })}\r\n                    </YList>\r\n                  ) : (\r\n                    <div class=\"y-select__no-options\">항목이 없습니다.</div>\r\n                  )}\r\n                </YCard>\r\n              ),\r\n          }}\r\n        </YMenu>\r\n      );\r\n    });\r\n\r\n    return {\r\n      fieldInputRef,\r\n      model,\r\n      selections,\r\n      selected,\r\n    };\r\n  },\r\n});\r\n"],"mappings":";AAAA,SAASA,UAAU,QAAQ,mBAAmB;AAE9C,SAASC,QAAQ,EAAEC,eAAe,EAAEC,UAAU,EAAEC,GAAG,QAAQ,KAAK;AAAC,SAExDC,cAAc;AAAA,SACdC,SAAS;AAAA,SACTC,oBAAoB;AAAA,SAG3BC,0BAA0B,EAC1BC,QAAQ;AAAA,SAEDC,WAAW;AAAA,SACZC,SAAS,EAAEC,oBAAoB,EAAuBC,IAAI;AAAA,SACzDC,WAAW,EAAEC,YAAY;AAAA,SACzBC,KAAK;AAAA,SACLC,WAAW,EAAEC,4BAA4B;AAAA,SACzCC,aAAa;AAAA,SACbC,KAAK,EAAEC,SAAS;AAAA,SAChBC,KAAK;AAEd;AAQA,OAAO,SAASC,gBAAgBA,CAC9BC,WAAgB,EAChBC,SAAc,EAEd;EAAA,IADAC,QAAQ,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,OAAO;EAElB,MAAMG,aAAa,GAAG,OAAOL,SAAS;EACtC,MAAMM,SAAS,GACbD,aAAa,KAAK,QAAQ,IAAIA,aAAa,KAAK,QAAQ,GACpDlB,oBAAoB,CAACY,WAAW,EAAEE,QAAQ,CAAC,GAC3CF,WAAW;EACjB,OAAOb,SAAS,CAACoB,SAAS,EAAEN,SAAS,CAAC;AACxC;AAEA,OAAO,MAAMO,uBAAuB,GAAGjB,YAAY,CACjD;EACEkB,MAAM,EAAEC,OAA4B;EACpCC,QAAQ,EAAED,OAAO;EACjBE,UAAU,EAAEF,OAAO;EACnBG,WAAW,EAAE;IACXC,IAAI,EAAEC,QAAkC;IACxCC,OAAO,EAAE7B;EACX,CAAC;EACD8B,aAAa,EAAEP,OAAO;EACtB,GAAG1B,0BAA0B,CAAC;AAChC,CAAC,EACD,QACF,CAAC;AAED,OAAO,MAAMkC,wBAAwB,GAAG3B,YAAY,CAClD;EACE4B,SAAS,EAAE;IACTL,IAAI,EAAE,CAACM,MAAM,EAAEC,MAAM,CAAC;IACtBL,OAAO,EAAE;EACX,CAAC;EACDM,UAAU,EAAE;IACVR,IAAI,EAAES;EACR,CAAC;EACD,GAAGf,uBAAuB,CAAC,CAAC;EAC5B,GAAGd,4BAA4B,CAAC,CAAC;EACjC,GAAGL,IAAI,CAACN,oBAAoB,CAAC;IAAEyC,QAAQ,EAAE;EAAqB,CAAC,CAAC,EAAE,CAChE,oBAAoB,CACrB;AACH,CAAC,EACD,SACF,CAAC;AAED,OAAO,MAAMC,OAAO,GAAG/C,eAAe,CAAC;EACrCgD,IAAI,EAAE,SAAS;EACfC,KAAK,EAAE;IACL,GAAGT,wBAAwB,CAAC;EAC9B,CAAC;EACDU,KAAK,EAAE;IACL,mBAAmB,EAAGC,KAAU,IAAK,IAAI;IACzC,eAAe,EAAGpB,MAAe,IAAK;EACxC,CAAC;EACDqB,KAAKA,CAACH,KAAK,EAAAI,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACpB,MAAME,aAAa,GAAGrD,GAAG,CAAC,CAAC;IAC3B,MAAMsD,OAAO,GAAGtD,GAAG,CAAC,CAAC;IACrB,MAAMuD,OAAO,GAAGvD,GAAG,CAA6B,CAAC;IAEjD,MAAM6B,MAAM,GAAG5B,cAAc,CAAC8C,KAAK,EAAE,QAAQ,CAAC;IAC9C,MAAMS,OAAO,GAAG5D,UAAU,CAAC,KAAK,CAAC;IAEjC,MAAM;MAAE6D,KAAK;MAAEC,aAAa;MAAEC;IAAY,CAAC,GAAGtD,QAAQ,CAAC0C,KAAK,CAAC;IAC7D,MAAMa,KAAK,GAAG3D,cAAc,CAC1B8C,KAAK,EACL,YAAY,EACZ,EAAE,EACDc,CAAC,IAAKH,aAAa,CAACG,CAAC,KAAK,IAAI,GAAG,CAAC,IAAI,CAAC,GAAGvD,WAAW,CAACuD,CAAC,CAAC,CAAC,EACzDA,CAAC,IAAK;MACL,MAAMC,SAAS,GAAGH,WAAW,CAACrD,WAAW,CAACuD,CAAC,CAAC,CAAC;MAC7C,OAAOd,KAAK,CAAChB,QAAQ,GAAG+B,SAAS,GAAGA,SAAS,CAAC,CAAC,CAAC,IAAI,IAAI;IAC1D,CACF,CAAC;IAED,MAAMC,UAAU,GAAGlE,QAAQ,CAAa,MAAM;MAC5C,OAAO+D,KAAK,CAACX,KAAK,CAACe,GAAG,CAAEH,CAAM,IAAK;QACjC,OAAOJ,KAAK,CAACR,KAAK,CAACgB,MAAM,CAAEC,IAAI,IAAK;UAClC,OAAOnB,KAAK,CAACd,WAAW,CAACiC,IAAI,CAACjB,KAAK,EAAEY,CAAC,CAACZ,KAAK,CAAC;QAC/C,CAAC,CAAC;MACJ,CAAC,CAAC;IACJ,CAAC,CAAC;IAEF,MAAMkB,QAAQ,GAAGtE,QAAQ,CAAC,MAAM;MAC9B,OAAOkE,UAAU,CAACd,KAAK,CAACe,GAAG,CAAEI,SAAS,IAAKA,SAAS,CAACrB,KAAK,CAACE,KAAK,CAAC;IACnE,CAAC,CAAC;IAEF,SAASoB,UAAUA,CAACH,IAAc,EAAE;MAClC,OAAO,CAAC,CAACH,UAAU,CAACd,KAAK,CAACqB,IAAI,CAAEC,YAAY,IAAK;QAC/C,OAAOA,YAAY,CAACtB,KAAK,KAAKiB,IAAI,CAACjB,KAAK;MAC1C,CAAC,CAAC;IACJ;;IAEA;IACA,SAASuB,kBAAkBA,CAACC,KAAiB,EAAE;MAC7C,IAAI1B,KAAK,CAAC2B,QAAQ,EAAE;QAClB;MACF;MACA7C,MAAM,CAACoB,KAAK,GAAG,CAACpB,MAAM,CAACoB,KAAK;IAC9B;IAEA,SAAS0B,MAAMA,CAACF,KAAiB,EAAE;MACjC,IAAIlB,OAAO,CAACN,KAAK,EAAE2B,GAAG,CAACC,QAAQ,CAACJ,KAAK,CAACK,aAAa,CAAC,EAAE;QACpDjD,MAAM,CAACoB,KAAK,GAAG,KAAK;MACtB;IACF;;IAEA;IACA,SAAS8B,WAAWA,CAACb,IAAc,EAAE;MACnCc,MAAM,CAACd,IAAI,CAAC;MACZ,IAAI,CAACnB,KAAK,CAAChB,QAAQ,EAAE;QACnBF,MAAM,CAACoB,KAAK,GAAG,KAAK;MACtB;IACF;IAEA,SAASgC,YAAYA,CAAA,EAAG;MACtB,IAAIzB,OAAO,CAACP,KAAK,EAAE;QACjBI,aAAa,CAACJ,KAAK,EAAEiC,KAAK,CAAC,CAAC;MAC9B;IACF;IAEA,SAASF,MAAMA,CAACd,IAAc,EAAE;MAC9B,IAAInB,KAAK,CAAChB,QAAQ,EAAE;QAClB,MAAMoD,KAAK,GAAGpB,UAAU,CAACd,KAAK,CAACmC,SAAS,CAAEb,YAAY,IAAK;UACzD,OAAOA,YAAY,CAACtB,KAAK,KAAKiB,IAAI,CAACjB,KAAK;QAC1C,CAAC,CAAC;QACF,IAAIkC,KAAK,KAAK,CAAC,CAAC,EAAE;UAChBvB,KAAK,CAACX,KAAK,GAAG,CAAC,GAAGW,KAAK,CAACX,KAAK,EAAEiB,IAAI,CAAC;QACtC,CAAC,MAAM;UACL,MAAMmB,GAAG,GAAGzB,KAAK,CAACX,KAAK,CAACqC,KAAK,CAAC,CAAC;UAC/BD,GAAG,CAACE,MAAM,CAACJ,KAAK,EAAE,CAAC,CAAC;UACpBvB,KAAK,CAACX,KAAK,GAAGoC,GAAG;QACnB;MACF,CAAC,MAAM;QACLzB,KAAK,CAACX,KAAK,GAAG,CAACiB,IAAI,CAAC;MACtB;IACF;IAEA,MAAMsB,WAAW,GAAG3F,QAAQ,CAAC,MAAM;MACjC,IAAIkD,KAAK,CAAChB,QAAQ,EAAE;QAClB,OAAOgC,UAAU,CAACd,KAAK,CAACe,GAAG,CAAEE,IAAI,IAAKA,IAAI,CAACuB,IAAI,CAAC,CAACC,IAAI,CAAC,IAAI,CAAC;MAC7D;MACA,OAAO3B,UAAU,CAACd,KAAK,GAAG,CAAC,CAAC,EAAEwC,IAAI,IAAI,EAAE;IAC1C,CAAC,CAAC;IAEFvF,SAAS,CAAC,MAAM;MACd,MAAMyF,eAAe,GAAGjF,WAAW,CAACqC,KAAK,EAAElC,WAAW,CAACkC,KAAK,CAAC;MAC7D,OAAA6C,YAAA,CAAA1E,KAAA;QAAA,cAEaW,MAAM,CAACoB,KAAK;QAAA,uBAAA4C,MAAA,IAAZhE,MAAM,CAACoB,KAAK,GAAA4C,MAAA;QAAA,OAChBvC,OAAO;QAAA,UACJP,KAAK,CAAC+C,MAAM;QAAA,YACV/C,KAAK,CAACH,QAAQ;QAAA,UAChBG,KAAK,CAACgD,MAAM;QAAA,mBACH,CAAC,mBAAmB,CAAC;QAAA,aAC3BhD,KAAK,CAACR,SAAS;QAAA,sBACN,KAAK;QAAA,gBACX0C;MAAY;QAGxBe,IAAI,EAAE,SAAAA,CAAA;UAAA,SAAAC,IAAA,GAAA1E,SAAA,CAAAC,MAAA,EAAI0E,IAAI,OAAAC,KAAA,CAAAF,IAAA,GAAAG,IAAA,MAAAA,IAAA,GAAAH,IAAA,EAAAG,IAAA;YAAJF,IAAI,CAAAE,IAAA,IAAA7E,SAAA,CAAA6E,IAAA;UAAA;UAAA,OACZhD,KAAK,CAAC4C,IAAI,GACR5C,KAAK,CAAC4C,IAAI,GAAG,GAAGE,IAAI,CAAC,GAAAN,YAAA,CAAA/E,WAAA,EAAAwF,WAAA;YAIjB,GAAGV,eAAe;YAClB,GAAG5F,UAAU,CAAC;cAAE,GAAGmG,IAAI,CAAC,CAAC,CAAC,CAACnD;YAAM,CAAC,EAAE;cAAE/C,GAAG,EAAEqD;YAAc,CAAC;UAAC;YAAA,uBAExCmB,kBAAkB;YAAA,UAC/BG,MAAM;YAAA;YAAA,SAEP,CAAC,UAAU,EAAE;cAAE,kBAAkB,EAAE9C,MAAM,CAACoB;YAAM,CAAC,CAAC;YAAA,WACxCO,OAAO,CAACP,KAAK;YAAA,oBAAA4C,MAAA,IAAbrC,OAAO,CAACP,KAAK,GAAA4C;UAAA;YAG5BzD,OAAO,EAAEA,CAAA,KAAM;cACb,OAAAwD,YAAA;gBAAA,SACc,CAAC,qBAAqB;cAAC,IAChCxC,KAAK,CAACgB,SAAS,GACZhB,KAAK,CAACgB,SAAS,GAAG,CAAC,GACnBoB,WAAW,CAACvC,KAAK;YAG3B,CAAC;YACDqD,OAAO,EAAElD,KAAK,CAACkD,OAAO,GAClB;cAAA,SAAAC,KAAA,GAAAhF,SAAA,CAAAC,MAAA,EAAI0E,IAAI,OAAAC,KAAA,CAAAI,KAAA,GAAAC,KAAA,MAAAA,KAAA,GAAAD,KAAA,EAAAC,KAAA;gBAAJN,IAAI,CAAAM,KAAA,IAAAjF,SAAA,CAAAiF,KAAA;cAAA;cAAA,OAAYpD,KAAK,CAACkD,OAAO,GAAG,GAAGJ,IAAI,CAAC;YAAA,IAC5CzE,SAAS;YACbgF,QAAQ,EAAE,SAAAA,CAAA,EAAoB;cAC5B,OAAOrD,KAAK,CAAC,aAAa,CAAC,GACzBA,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,GAAAwC,YAAA;gBAAA,SAEb;cAAgB,IAAAA,YAAA,CAAA7E,aAAA,eAG1B;YACH,CAAC;YACD,aAAa,EAAEqC,KAAK,CAAC,aAAa,CAAC,GAC/BA,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,GACxB3B;UAAS,EAGlB;QAAA;QACHW,OAAO,EAAEA,CAAA,KACPgB,KAAK,CAACsD,IAAI,GACRtD,KAAK,CAACsD,IAAI,CAAC,CAAC,GAAAd,YAAA,CAAAhF,KAAA;UAAAwB,OAAA,EAAAA,CAAA,MAGTqB,KAAK,CAACR,KAAK,CAACzB,MAAM,GAAG,CAAC,GAAAoE,YAAA,CAAA5E,KAAA;YAAA,OACTuC;UAAO;YAAAnB,OAAA,EAAAA,CAAA,MAChBqB,KAAK,CAACR,KAAK,CAACe,GAAG,CAAEE,IAAI,IAAK;cACzB,OAAA0B,YAAA,CAAA3E,SAAA;gBAAA,WAEc0F,CAAC,IAAK5B,WAAW,CAACb,IAAI,CAAC;gBAAA,SAC1B;kBAAE,qBAAqB,EAAEG,UAAU,CAACH,IAAI;gBAAE;cAAC;gBAAA9B,OAAA,EAAAA,CAAA,MAEjD8B,IAAI,CAACuB,IAAI;cAAA;YAGhB,CAAC,CAAC;UAAA,KAAAG,YAAA;YAAA,SAGO;UAAsB,IAAAgB,gBAAA,kDAClC;QAAA;MAEJ;IAIX,CAAC,CAAC;IAEF,OAAO;MACLvD,aAAa;MACbO,KAAK;MACLG,UAAU;MACVI;IACF,CAAC;EACH;AACF,CAAC,CAAC"}

package/lib/components/table/YDataTable.mjs

@@ -4,7 +4,7 @@ import { useRender } from "../../composables/component.mjs";
 import { useResizeObserver } from "../../composables/resize-observer.mjs";
 import { toStyleSizeValue } from "../../util/index.mjs";
 import { chooseProps, propsFactory } from "../../util/vue-component.mjs";
-import { YDataTableBody } from "./YDataTableBody.mjs";
+import { YDataTableBody, pressYDataTableBodyProps } from "./YDataTableBody.mjs";
 import { YDataTableControl } from "./YDataTableControl.mjs";
 import { YDataTableHead, pressYDataTableHeadProps } from "./YDataTableHead.mjs";
 import { YDataTableLayer } from "./YDataTableLayer.mjs";
@@ -16,6 +16,7 @@ import { createPagination, pressDataTablePaginationProps, providePagination, use
 import { pressDataTableSelectionProps, provideSelection } from "./composibles/selection.mjs";
 import { createSorting, pressDataTableSortProps, provideSorting } from "./composibles/sorting.mjs";
 export const pressDataTableProps = propsFactory({
+  ...pressYDataTableBodyProps(),
   width: [String, Number],
   search: String,
   ...pressDataTableHeader(),
@@ -138,10 +139,10 @@ export const YDataTable = defineComponent({
         headers: headers.value
       };
     });
-    const yDataTableHeadProps = chooseProps(props, YDataTableHead.props);
-    const yDataTableBodyProps = chooseProps(props, YDataTableBody.props);
-    const yTableProps = chooseProps(props, YTable.props);
     useRender(() => {
+      const yDataTableHeadProps = chooseProps(props, YDataTableHead.props);
+      const yDataTableBodyProps = chooseProps(props, YDataTableBody.props);
+      const yTableProps = chooseProps(props, YTable.props);
       return _createVNode(YTable, _mergeProps({
         "class": ['y-data-table']
       }, yTableProps, {

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

@@ -1 +1 @@
-{"version":3,"file":"YDataTable.mjs","names":["computed","defineComponent","provide","toRef","useRender","useResizeObserver","toStyleSizeValue","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","resizeObservedRef","headObserveRef","contentRect","headRect","slotProps","yDataTableHeadProps","yDataTableBodyProps","yTableProps","_createVNode","_mergeProps","height","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 { useResizeObserver } from '../../composables/resize-observer';\nimport { toStyleSizeValue } from '../../util';\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    const { resizeObservedRef: headObserveRef, contentRect: headRect } = useResizeObserver();\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      headRect,\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\n          class={['y-data-table']}\n          {...yTableProps}\n          style={{\n            '--y-table-head-height': toStyleSizeValue(\n              headRect.value?.height,\n            ),\n          }}\n        >\n          {{\n            top: () => slots.top?.(slotProps.value),\n            leading: () =>\n              slots.leading ? (\n                slots.leading(slotProps.value)\n              ) : (\n                <>\n                  <YDataTableLayer\n                    v-slots={slots}\n                    slot-props={slotProps.value}\n                  ></YDataTableLayer>\n                </>\n              ),\n            default: () =>\n              slots.default ? (\n                slots.default(slotProps.value)\n              ) : (\n                <>\n                  <thead ref={headObserveRef}>\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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"}
+{"version":3,"file":"YDataTable.mjs","names":["computed","defineComponent","provide","toRef","useRender","useResizeObserver","toStyleSizeValue","chooseProps","propsFactory","YDataTableBody","pressYDataTableBodyProps","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","resizeObservedRef","headObserveRef","contentRect","headRect","slotProps","yDataTableHeadProps","yDataTableBodyProps","yTableProps","_createVNode","_mergeProps","height","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 { useResizeObserver } from '../../composables/resize-observer';\nimport { toStyleSizeValue } from '../../util';\nimport { chooseProps, propsFactory } from '../../util/vue-component';\nimport { YDataTableBody, pressYDataTableBodyProps } 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    ...pressYDataTableBodyProps(),\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    const { resizeObservedRef: headObserveRef, contentRect: headRect } =\n      useResizeObserver();\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      headRect,\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\n    useRender(() => {\n      const yDataTableHeadProps = chooseProps(props, YDataTableHead.props);\n      const yDataTableBodyProps = chooseProps(props, YDataTableBody.props);\n      const yTableProps = chooseProps(props, YTable.props);\n      return (\n        <YTable\n          class={['y-data-table']}\n          {...yTableProps}\n          style={{\n            '--y-table-head-height': toStyleSizeValue(headRect.value?.height),\n          }}\n        >\n          {{\n            top: () => slots.top?.(slotProps.value),\n            leading: () =>\n              slots.leading ? (\n                slots.leading(slotProps.value)\n              ) : (\n                <>\n                  <YDataTableLayer\n                    v-slots={slots}\n                    slot-props={slotProps.value}\n                  ></YDataTableLayer>\n                </>\n              ),\n            default: () =>\n              slots.default ? (\n                slots.default(slotProps.value)\n              ) : (\n                <>\n                  <thead ref={headObserveRef}>\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/YDataTableBody.mjs

@@ -5,7 +5,7 @@ import { propsFactory } from "../../util/vue-component.mjs";
 import { YDataTableRow } from "./YDataTableRow.mjs";
 import { useHeader } from "./composibles/header.mjs";
 import { useSelection } from "./composibles/selection.mjs";
-const pressYDataTableBodyProps = propsFactory({
+export const pressYDataTableBodyProps = propsFactory({
   items: {
     type: Array,
     default: () => []
@@ -41,10 +41,11 @@ export const YDataTableBody = defineComponent({
       toggleSelect
     } = useSelection();
     useRender(() => {
-      if (props.loading && slots.loading) {
+      if (props.loading) {
         return _createVNode("tr", null, [_createVNode("td", {
-          "colspan": columns.value.length
-        }, [slots.loading()])]);
+          "colspan": columns.value.length,
+          "class": 'y-data-table__loading'
+        }, [slots.loading ? slots.loading() : _createVNode("div", null, [props.loadingText])])]);
       }
       if (!props.loading && props.items.length < 1 && !props.hideNoData) {
         return _createVNode("tr", {

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

@@ -1 +1 @@
-{"version":3,"file":"YDataTableBody.mjs","names":["defineComponent","useRender","propsFactory","YDataTableRow","useHeader","useSelection","pressYDataTableBodyProps","items","type","Array","default","loading","Boolean","String","loadingText","hideNoData","noDataText","rowHeight","Number","Function","YDataTableBody","name","props","emits","setup","_ref","slots","emit","columns","isSelected","toggleSelect","_createVNode","value","length","_Fragment","body","map","item","index","stateProps","slotProps","key","onClick","event","undefined","onDblclick","onContextmenu"],"sources":["../../../src/components/table/YDataTableBody.tsx"],"sourcesContent":["import { PropType, defineComponent } from 'vue';\n\nimport { useRender } from '../../composables/component';\nimport { propsFactory } from '../../util/vue-component';\nimport { YDataTableRow } from './YDataTableRow';\nimport { useHeader } from './composibles/header';\nimport { useSelection } from './composibles/selection';\n\nimport { DataTableItem } from './types';\n\nconst pressYDataTableBodyProps = propsFactory(\n  {\n    items: {\n      type: Array as PropType<readonly DataTableItem[]>,\n      default: () => [],\n    },\n    loading: [Boolean, String],\n    loadingText: String,\n    hideNoData: Boolean,\n    noDataText: {\n      type: String,\n      default: '',\n    },\n    rowHeight: Number,\n    'onClick:row': Function as PropType<(e: Event, value: any) => void>,\n    'onDblclick:row': Function as PropType<(e: Event, value: any) => void>,\n    'onContextmenu:row': Function as PropType<(e: Event, value: any) => void>,\n  },\n  'YDataTableBody',\n);\n\nexport const YDataTableBody = defineComponent({\n  name: 'YDataTableBody',\n  props: {\n    ...pressYDataTableBodyProps(),\n  },\n  emits: ['click:row'],\n  setup(props, { slots, emit }) {\n    const { columns } = useHeader();\n    const { isSelected, toggleSelect } = useSelection();\n\n    useRender(() => {\n      if (props.loading && slots.loading) {\n        return (\n          <tr>\n            <td colspan={columns.value.length}>{slots.loading()}</td>\n          </tr>\n        );\n      }\n      if (!props.loading && props.items.length < 1 && !props.hideNoData) {\n        return (\n          <tr key=\"no-data\">\n            <td colspan={columns.value.length}>\n              {slots['no-data']?.() ?? props.noDataText}\n            </td>\n          </tr>\n        );\n      }\n      return (\n        <>\n          {slots.body\n            ? slots.body?.(props)\n            : props.items.map((item, index) => {\n                const stateProps = {\n                  index,\n                  item,\n                  columns: columns.value,\n                  isSelected,\n                  toggleSelect,\n                };\n                const slotProps = {\n                  ...stateProps,\n                  props: {\n                    key: `item__${item.value}`,\n                    onClick: props['onClick:row']\n                      ? (event: Event) => {\n                          props['onClick:row']?.(event, { ...stateProps });\n                        }\n                      : undefined,\n                    onDblclick: props['onDblclick:row']\n                      ? (event: Event) => {\n                          props['onDblclick:row']?.(event, { ...stateProps });\n                        }\n                      : undefined,\n                    onContextmenu: props['onContextmenu:row']\n                      ? (event: Event) => {\n                          props['onContextmenu:row']?.(event, { ...stateProps });\n                        }\n                      : undefined,\n                    index,\n                    item,\n                  },\n                };\n\n                return (\n                  <>\n                    {slots.item ? (\n                      slots.item(slotProps)\n                    ) : (\n                      <YDataTableRow\n                        v-slots={slots}\n                        {...slotProps.props}\n                      ></YDataTableRow>\n                    )}\n                  </>\n                );\n              })}\n        </>\n      );\n    });\n\n    // end\n    return {};\n  },\n});\n\nexport type YDataTableBody = InstanceType<typeof YDataTableBody>;\n"],"mappings":"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"}
+{"version":3,"file":"YDataTableBody.mjs","names":["defineComponent","useRender","propsFactory","YDataTableRow","useHeader","useSelection","pressYDataTableBodyProps","items","type","Array","default","loading","Boolean","String","loadingText","hideNoData","noDataText","rowHeight","Number","Function","YDataTableBody","name","props","emits","setup","_ref","slots","emit","columns","isSelected","toggleSelect","_createVNode","value","length","_Fragment","body","map","item","index","stateProps","slotProps","key","onClick","event","undefined","onDblclick","onContextmenu"],"sources":["../../../src/components/table/YDataTableBody.tsx"],"sourcesContent":["import { PropType, defineComponent } from 'vue';\n\nimport { useRender } from '../../composables/component';\nimport { propsFactory } from '../../util/vue-component';\nimport { YDataTableRow } from './YDataTableRow';\nimport { useHeader } from './composibles/header';\nimport { useSelection } from './composibles/selection';\nimport { DataTableItem } from './types';\n\nexport const pressYDataTableBodyProps = propsFactory(\n  {\n    items: {\n      type: Array as PropType<readonly DataTableItem[]>,\n      default: () => [],\n    },\n    loading: [Boolean, String],\n    loadingText: String,\n    hideNoData: Boolean,\n    noDataText: {\n      type: String,\n      default: '',\n    },\n    rowHeight: Number,\n    'onClick:row': Function as PropType<(e: Event, value: any) => void>,\n    'onDblclick:row': Function as PropType<(e: Event, value: any) => void>,\n    'onContextmenu:row': Function as PropType<(e: Event, value: any) => void>,\n  },\n  'YDataTableBody',\n);\n\nexport const YDataTableBody = defineComponent({\n  name: 'YDataTableBody',\n  props: {\n    ...pressYDataTableBodyProps(),\n  },\n  emits: ['click:row'],\n  setup(props, { slots, emit }) {\n    const { columns } = useHeader();\n    const { isSelected, toggleSelect } = useSelection();\n\n    useRender(() => {\n      if (props.loading) {\n        return (\n          <tr>\n            <td colspan={columns.value.length} class={'y-data-table__loading'}>\n              {slots.loading ? slots.loading() : <div>{props.loadingText}</div>}\n            </td>\n          </tr>\n        );\n      }\n      if (!props.loading && props.items.length < 1 && !props.hideNoData) {\n        return (\n          <tr key=\"no-data\">\n            <td colspan={columns.value.length}>\n              {slots['no-data']?.() ?? props.noDataText}\n            </td>\n          </tr>\n        );\n      }\n      return (\n        <>\n          {slots.body\n            ? slots.body?.(props)\n            : props.items.map((item, index) => {\n                const stateProps = {\n                  index,\n                  item,\n                  columns: columns.value,\n                  isSelected,\n                  toggleSelect,\n                };\n                const slotProps = {\n                  ...stateProps,\n                  props: {\n                    key: `item__${item.value}`,\n                    onClick: props['onClick:row']\n                      ? (event: Event) => {\n                          props['onClick:row']?.(event, { ...stateProps });\n                        }\n                      : undefined,\n                    onDblclick: props['onDblclick:row']\n                      ? (event: Event) => {\n                          props['onDblclick:row']?.(event, { ...stateProps });\n                        }\n                      : undefined,\n                    onContextmenu: props['onContextmenu:row']\n                      ? (event: Event) => {\n                          props['onContextmenu:row']?.(event, {\n                            ...stateProps,\n                          });\n                        }\n                      : undefined,\n                    index,\n                    item,\n                  },\n                };\n\n                return (\n                  <>\n                    {slots.item ? (\n                      slots.item(slotProps)\n                    ) : (\n                      <YDataTableRow\n                        v-slots={slots}\n                        {...slotProps.props}\n                      ></YDataTableRow>\n                    )}\n                  </>\n                );\n              })}\n        </>\n      );\n    });\n\n    // end\n    return {};\n  },\n});\n\nexport type YDataTableBody = InstanceType<typeof YDataTableBody>;\n"],"mappings":"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"}

package/lib/components/table/YTable.mjs

@@ -33,6 +33,10 @@ export const YTable = defineComponent({
       resizeObservedRef,
       contentRect
     } = useResizeObserver();
+    const {
+      resizeObservedRef: tableRef,
+      contentRect: tableRect
+    } = useResizeObserver();
     provide('YTable', {
       containerRect: contentRect
     });
@@ -44,15 +48,23 @@ export const YTable = defineComponent({
           'y-table--fixed-head': props.fixedHead,
           'y-table--fixed-height': props.flexHeight || props.height,
           'y-table--flex-height': props.flexHeight
-        }]
+        }],
+        "style": {
+          '--y-table-container-width': toStyleSizeValue(contentRect.value?.width),
+          '--y-table-wrapper-width': toStyleSizeValue(tableRect.value?.width)
+        }
       }, {
         default: () => [slots.top?.(), slots.default ? _createVNode("div", {
           "class": ['y-table__container'],
-          "ref": resizeObservedRef,
+          "ref": resizeObservedRef
+        }, [slots.leading?.(), _createVNode("div", {
+          "class": ['y-table__wrapper'],
           "style": {
             height: toStyleSizeValue(containerHeight)
           }
-        }, [slots.leading?.(), _createVNode("table", null, [slots.default()]), slots.trailing?.()]) : slots.container?.(resizeObservedRef, contentRect), slots.bottom?.()]
+        }, [_createVNode("table", {
+          "ref": tableRef
+        }, [slots.default()])]), slots.trailing?.()]) : slots.container?.(resizeObservedRef, contentRect), slots.bottom?.()]
       });
     });
   }

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

@@ -1 +1 @@
-{"version":3,"file":"YTable.mjs","names":["defineComponent","provide","useRender","useResizeObserver","toStyleSizeValue","propsFactory","pressYTableProps","tag","type","String","default","fixedHead","Boolean","height","Number","flexHeight","YTable","name","props","setup","_ref","slots","resizeObservedRef","contentRect","containerRect","ElTag","containerHeight","value","_createVNode","top","leading","trailing","container","bottom"],"sources":["../../../src/components/table/YTable.tsx"],"sourcesContent":["import { PropType, defineComponent, provide } from 'vue';\n\nimport { useRender } from '../../composables/component';\nimport { useResizeObserver } from '../../composables/resize-observer';\nimport { toStyleSizeValue } from '../../util/ui';\nimport { propsFactory } from '../../util/vue-component';\n\nimport './YTable.scss';\n\nexport const pressYTableProps = propsFactory(\n  {\n    tag: {\n      type: String as PropType<string>,\n      default: 'div',\n    },\n    fixedHead: {\n      type: Boolean as PropType<boolean>,\n    },\n    height: {\n      type: [Number, String] as PropType<number | string>,\n    },\n    flexHeight: {\n      type: Boolean as PropType<boolean>,\n    },\n  },\n  'YTable',\n);\n\nexport const YTable = defineComponent({\n  name: 'YTable',\n  props: {\n    ...pressYTableProps(),\n  },\n  setup(props, { slots }) {\n    const { resizeObservedRef, contentRect } = useResizeObserver();\n    provide('YTable', { containerRect: contentRect });\n    useRender(() => {\n      const ElTag = (props.tag as keyof HTMLElementTagNameMap) ?? 'div';\n      const containerHeight = props.flexHeight\n        ? contentRect.value?.height ?? props.height\n        : props.height;\n      return (\n        <ElTag\n          class={[\n            'y-table',\n            {\n              'y-table--fixed-head': props.fixedHead,\n              'y-table--fixed-height': props.flexHeight || props.height,\n              'y-table--flex-height': props.flexHeight,\n            },\n          ]}\n        >\n          {slots.top?.()}\n          {slots.default ? (\n            <div\n              class={['y-table__container']}\n              ref={resizeObservedRef}\n              style={{\n                height: toStyleSizeValue(containerHeight),\n              }}\n            >\n              {slots.leading?.()}\n              <table>{slots.default()}</table>\n              {slots.trailing?.()}\n            </div>\n          ) : (\n            slots.container?.(resizeObservedRef, contentRect)\n          )}\n          {slots.bottom?.()}\n        </ElTag>\n      );\n    });\n  },\n});\n"],"mappings":";AAAA,SAAmBA,eAAe,EAAEC,OAAO,QAAQ,KAAK;AAAC,SAEhDC,SAAS;AAAA,SACTC,iBAAiB;AAAA,SACjBC,gBAAgB;AAAA,SAChBC,YAAY;AAErB;AAEA,OAAO,MAAMC,gBAAgB,GAAGD,YAAY,CAC1C;EACEE,GAAG,EAAE;IACHC,IAAI,EAAEC,MAA0B;IAChCC,OAAO,EAAE;EACX,CAAC;EACDC,SAAS,EAAE;IACTH,IAAI,EAAEI;EACR,CAAC;EACDC,MAAM,EAAE;IACNL,IAAI,EAAE,CAACM,MAAM,EAAEL,MAAM;EACvB,CAAC;EACDM,UAAU,EAAE;IACVP,IAAI,EAAEI;EACR;AACF,CAAC,EACD,QACF,CAAC;AAED,OAAO,MAAMI,MAAM,GAAGhB,eAAe,CAAC;EACpCiB,IAAI,EAAE,QAAQ;EACdC,KAAK,EAAE;IACL,GAAGZ,gBAAgB,CAAC;EACtB,CAAC;EACDa,KAAKA,CAACD,KAAK,EAAAE,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACpB,MAAM;MAAEE,iBAAiB;MAAEC;IAAY,CAAC,GAAGpB,iBAAiB,CAAC,CAAC;IAC9DF,OAAO,CAAC,QAAQ,EAAE;MAAEuB,aAAa,EAAED;IAAY,CAAC,CAAC;IACjDrB,SAAS,CAAC,MAAM;MACd,MAAMuB,KAAK,GAAIP,KAAK,CAACX,GAAG,IAAoC,KAAK;MACjE,MAAMmB,eAAe,GAAGR,KAAK,CAACH,UAAU,GACpCQ,WAAW,CAACI,KAAK,EAAEd,MAAM,IAAIK,KAAK,CAACL,MAAM,GACzCK,KAAK,CAACL,MAAM;MAChB,OAAAe,YAAA,CAAAH,KAAA;QAAA,SAEW,CACL,SAAS,EACT;UACE,qBAAqB,EAAEP,KAAK,CAACP,SAAS;UACtC,uBAAuB,EAAEO,KAAK,CAACH,UAAU,IAAIG,KAAK,CAACL,MAAM;UACzD,sBAAsB,EAAEK,KAAK,CAACH;QAChC,CAAC;MACF;QAAAL,OAAA,EAAAA,CAAA,MAEAW,KAAK,CAACQ,GAAG,GAAG,CAAC,EACbR,KAAK,CAACX,OAAO,GAAAkB,YAAA;UAAA,SAEH,CAAC,oBAAoB,CAAC;UAAA,OACxBN,iBAAiB;UAAA,SACf;YACLT,MAAM,EAAET,gBAAgB,CAACsB,eAAe;UAC1C;QAAC,IAEAL,KAAK,CAACS,OAAO,GAAG,CAAC,EAAAF,YAAA,iBACVP,KAAK,CAACX,OAAO,CAAC,CAAC,IACtBW,KAAK,CAACU,QAAQ,GAAG,CAAC,KAGrBV,KAAK,CAACW,SAAS,GAAGV,iBAAiB,EAAEC,WAAW,CACjD,EACAF,KAAK,CAACY,MAAM,GAAG,CAAC;MAAA;IAGvB,CAAC,CAAC;EACJ;AACF,CAAC,CAAC"}
+{"version":3,"file":"YTable.mjs","names":["defineComponent","provide","useRender","useResizeObserver","toStyleSizeValue","propsFactory","pressYTableProps","tag","type","String","default","fixedHead","Boolean","height","Number","flexHeight","YTable","name","props","setup","_ref","slots","resizeObservedRef","contentRect","tableRef","tableRect","containerRect","ElTag","containerHeight","value","_createVNode","width","top","leading","trailing","container","bottom"],"sources":["../../../src/components/table/YTable.tsx"],"sourcesContent":["import { PropType, defineComponent, provide } from 'vue';\n\nimport { useRender } from '../../composables/component';\nimport { useResizeObserver } from '../../composables/resize-observer';\nimport { toStyleSizeValue } from '../../util/ui';\nimport { propsFactory } from '../../util/vue-component';\n\nimport './YTable.scss';\n\nexport const pressYTableProps = propsFactory(\n  {\n    tag: {\n      type: String as PropType<string>,\n      default: 'div',\n    },\n    fixedHead: {\n      type: Boolean as PropType<boolean>,\n    },\n    height: {\n      type: [Number, String] as PropType<number | string>,\n    },\n    flexHeight: {\n      type: Boolean as PropType<boolean>,\n    },\n  },\n  'YTable',\n);\n\nexport const YTable = defineComponent({\n  name: 'YTable',\n  props: {\n    ...pressYTableProps(),\n  },\n  setup(props, { slots }) {\n    const { resizeObservedRef, contentRect } = useResizeObserver();\n    const { resizeObservedRef: tableRef, contentRect: tableRect } =\n      useResizeObserver();\n    provide('YTable', { containerRect: contentRect });\n    useRender(() => {\n      const ElTag = (props.tag as keyof HTMLElementTagNameMap) ?? 'div';\n      const containerHeight = props.flexHeight\n        ? contentRect.value?.height ?? props.height\n        : props.height;\n      return (\n        <ElTag\n          class={[\n            'y-table',\n            {\n              'y-table--fixed-head': props.fixedHead,\n              'y-table--fixed-height': props.flexHeight || props.height,\n              'y-table--flex-height': props.flexHeight,\n            },\n          ]}\n          style={{\n            '--y-table-container-width': toStyleSizeValue(\n              contentRect.value?.width,\n            ),\n            '--y-table-wrapper-width': toStyleSizeValue(tableRect.value?.width),\n          }}\n        >\n          {slots.top?.()}\n          {slots.default ? (\n            <div class={['y-table__container']} ref={resizeObservedRef}>\n              {slots.leading?.()}\n              <div\n                class={['y-table__wrapper']}\n                style={{\n                  height: toStyleSizeValue(containerHeight),\n                }}\n              >\n                <table ref={tableRef}>{slots.default()}</table>\n              </div>\n              {slots.trailing?.()}\n            </div>\n          ) : (\n            slots.container?.(resizeObservedRef, contentRect)\n          )}\n          {slots.bottom?.()}\n        </ElTag>\n      );\n    });\n  },\n});\n"],"mappings":";AAAA,SAAmBA,eAAe,EAAEC,OAAO,QAAQ,KAAK;AAAC,SAEhDC,SAAS;AAAA,SACTC,iBAAiB;AAAA,SACjBC,gBAAgB;AAAA,SAChBC,YAAY;AAErB;AAEA,OAAO,MAAMC,gBAAgB,GAAGD,YAAY,CAC1C;EACEE,GAAG,EAAE;IACHC,IAAI,EAAEC,MAA0B;IAChCC,OAAO,EAAE;EACX,CAAC;EACDC,SAAS,EAAE;IACTH,IAAI,EAAEI;EACR,CAAC;EACDC,MAAM,EAAE;IACNL,IAAI,EAAE,CAACM,MAAM,EAAEL,MAAM;EACvB,CAAC;EACDM,UAAU,EAAE;IACVP,IAAI,EAAEI;EACR;AACF,CAAC,EACD,QACF,CAAC;AAED,OAAO,MAAMI,MAAM,GAAGhB,eAAe,CAAC;EACpCiB,IAAI,EAAE,QAAQ;EACdC,KAAK,EAAE;IACL,GAAGZ,gBAAgB,CAAC;EACtB,CAAC;EACDa,KAAKA,CAACD,KAAK,EAAAE,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACpB,MAAM;MAAEE,iBAAiB;MAAEC;IAAY,CAAC,GAAGpB,iBAAiB,CAAC,CAAC;IAC9D,MAAM;MAAEmB,iBAAiB,EAAEE,QAAQ;MAAED,WAAW,EAAEE;IAAU,CAAC,GAC3DtB,iBAAiB,CAAC,CAAC;IACrBF,OAAO,CAAC,QAAQ,EAAE;MAAEyB,aAAa,EAAEH;IAAY,CAAC,CAAC;IACjDrB,SAAS,CAAC,MAAM;MACd,MAAMyB,KAAK,GAAIT,KAAK,CAACX,GAAG,IAAoC,KAAK;MACjE,MAAMqB,eAAe,GAAGV,KAAK,CAACH,UAAU,GACpCQ,WAAW,CAACM,KAAK,EAAEhB,MAAM,IAAIK,KAAK,CAACL,MAAM,GACzCK,KAAK,CAACL,MAAM;MAChB,OAAAiB,YAAA,CAAAH,KAAA;QAAA,SAEW,CACL,SAAS,EACT;UACE,qBAAqB,EAAET,KAAK,CAACP,SAAS;UACtC,uBAAuB,EAAEO,KAAK,CAACH,UAAU,IAAIG,KAAK,CAACL,MAAM;UACzD,sBAAsB,EAAEK,KAAK,CAACH;QAChC,CAAC,CACF;QAAA,SACM;UACL,2BAA2B,EAAEX,gBAAgB,CAC3CmB,WAAW,CAACM,KAAK,EAAEE,KACrB,CAAC;UACD,yBAAyB,EAAE3B,gBAAgB,CAACqB,SAAS,CAACI,KAAK,EAAEE,KAAK;QACpE;MAAC;QAAArB,OAAA,EAAAA,CAAA,MAEAW,KAAK,CAACW,GAAG,GAAG,CAAC,EACbX,KAAK,CAACX,OAAO,GAAAoB,YAAA;UAAA,SACA,CAAC,oBAAoB,CAAC;UAAA,OAAOR;QAAiB,IACvDD,KAAK,CAACY,OAAO,GAAG,CAAC,EAAAH,YAAA;UAAA,SAET,CAAC,kBAAkB,CAAC;UAAA,SACpB;YACLjB,MAAM,EAAET,gBAAgB,CAACwB,eAAe;UAC1C;QAAC,IAAAE,YAAA;UAAA,OAEWN;QAAQ,IAAGH,KAAK,CAACX,OAAO,CAAC,CAAC,MAEvCW,KAAK,CAACa,QAAQ,GAAG,CAAC,KAGrBb,KAAK,CAACc,SAAS,GAAGb,iBAAiB,EAAEC,WAAW,CACjD,EACAF,KAAK,CAACe,MAAM,GAAG,CAAC;MAAA;IAGvB,CAAC,CAAC;EACJ;AACF,CAAC,CAAC"}

package/lib/components/table/YTable.scss

@@ -8,7 +8,7 @@ $table-cell-border-bottom-color: rgba(var(--y-theme-outline-rgb), var(--y-theme-
   display: flex;
   flex-direction: column;
 
-  &--fixed-height > &__container {
+  &--fixed-height &__container > &__wrapper {
     overflow-y: auto;
   }
 
@@ -19,24 +19,25 @@ $table-cell-border-bottom-color: rgba(var(--y-theme-outline-rgb), var(--y-theme-
 
   &--flex-height > &__container {
     flex: 1 1;
+    min-height: 0;
   }
 
-  &__container > table {
+  &__wrapper > table {
     width: 100%;
     border-spacing: 0;
   }
 
-  &--fixed-head > &__container > table > thead > tr > th {
+  &--fixed-head &__container > &__wrapper > table > thead > tr > th {
     position: sticky;
     top: 0;
   }
 
-  &--fixed-head.y-table > &__container > table > thead > tr > th {
+  &--fixed-head.y-table &__container &__wrapper > table > thead > tr > th {
     z-index: 1;
     background: $table-head-background;
   }
 
-  .y-table__container {
+  .y-table__wrapper {
     > table {
       font-size: 0.875rem;
 
@@ -81,7 +82,6 @@ $table-cell-border-bottom-color: rgba(var(--y-theme-outline-rgb), var(--y-theme-
       justify-content: flex-end;
     }
   }
-
 }
 
 .y-data-table-header {
@@ -127,6 +127,7 @@ $table-cell-border-bottom-color: rgba(var(--y-theme-outline-rgb), var(--y-theme-
   overflow-y: clip;
   overflow-x: visible;
   z-index: 50;
+  margin-right: calc(100% - var(--y-table-wrapper-width, 100%));
 
   &__head {
     position: absolute;

package/package.json

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

package/types/components/select/YSelect.d.ts

@@ -143,6 +143,7 @@ export declare const pressYSelectPropsOptions: <Defaults extends {
     valueEquals?: unknown;
     defaultSelect?: unknown;
     maxHeight?: unknown;
+    expandIcon?: unknown;
 } = {}>(defaults?: Defaults | undefined) => {
     position: unknown extends Defaults["position"] ? Omit<{
         type: PropType<"default" | "top" | "end" | "right" | "bottom" | "left" | "start">;
@@ -458,6 +459,14 @@ export declare const pressYSelectPropsOptions: <Defaults extends {
         type: PropType<unknown extends Defaults["maxHeight"] ? string | number : NonNullable<string | number> | Defaults["maxHeight"]>;
         default: unknown extends Defaults["maxHeight"] ? string | number : NonNullable<string | number> | Defaults["maxHeight"];
     };
+    expandIcon: unknown extends Defaults["expandIcon"] ? {
+        type: ObjectConstructor;
+    } : Omit<{
+        type: ObjectConstructor;
+    }, "default" | "type"> & {
+        type: PropType<unknown extends Defaults["expandIcon"] ? Record<string, any> : Record<string, any> | Defaults["expandIcon"]>;
+        default: unknown extends Defaults["expandIcon"] ? Record<string, any> : Record<string, any> | Defaults["expandIcon"];
+    };
 };
 export declare const YSelect: import("vue").DefineComponent<{
     position: Omit<{
@@ -573,10 +582,14 @@ export declare const YSelect: import("vue").DefineComponent<{
         type: (StringConstructor | NumberConstructor)[];
         default: number;
     };
+    expandIcon: {
+        type: ObjectConstructor;
+    };
 }, {
     fieldInputRef: import("vue").Ref<any>;
     model: import("vue").WritableComputedRef<any>;
     selections: import("vue").ComputedRef<ListItem<any>[]>;
+    selected: import("vue").ComputedRef<any[]>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     'update:modelValue': (value: any) => boolean;
     'update:opened': (opened: boolean) => boolean;
@@ -694,6 +707,9 @@ export declare const YSelect: import("vue").DefineComponent<{
         type: (StringConstructor | NumberConstructor)[];
         default: number;
     };
+    expandIcon: {
+        type: ObjectConstructor;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((value: any) => any) | undefined;
     "onUpdate:opened"?: ((opened: boolean) => any) | undefined;

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

@@ -20,6 +20,14 @@ export declare const pressDataTableProps: <Defaults extends {
     headers?: unknown;
     width?: unknown;
     search?: unknown;
+    loading?: unknown;
+    loadingText?: unknown;
+    hideNoData?: unknown;
+    noDataText?: unknown;
+    rowHeight?: unknown;
+    'onClick:row'?: unknown;
+    'onDblclick:row'?: unknown;
+    'onContextmenu:row'?: unknown;
 } = {}>(defaults?: Defaults | undefined) => {
     tag: unknown extends Defaults["tag"] ? {
         type: PropType<string>;
@@ -173,6 +181,44 @@ export declare const pressDataTableProps: <Defaults extends {
         type: PropType<unknown extends Defaults["search"] ? string : string | Defaults["search"]>;
         default: unknown extends Defaults["search"] ? string : string | Defaults["search"];
     };
+    loading: unknown extends Defaults["loading"] ? (BooleanConstructor | StringConstructor)[] : {
+        type: PropType<unknown extends Defaults["loading"] ? string | boolean : NonNullable<string | boolean> | Defaults["loading"]>;
+        default: unknown extends Defaults["loading"] ? string | boolean : NonNullable<string | boolean> | Defaults["loading"];
+    };
+    loadingText: unknown extends Defaults["loadingText"] ? StringConstructor : {
+        type: PropType<unknown extends Defaults["loadingText"] ? string : string | Defaults["loadingText"]>;
+        default: unknown extends Defaults["loadingText"] ? string : string | Defaults["loadingText"];
+    };
+    hideNoData: unknown extends Defaults["hideNoData"] ? BooleanConstructor : {
+        type: PropType<unknown extends Defaults["hideNoData"] ? boolean : boolean | Defaults["hideNoData"]>;
+        default: unknown extends Defaults["hideNoData"] ? boolean : boolean | Defaults["hideNoData"];
+    };
+    noDataText: unknown extends Defaults["noDataText"] ? {
+        type: StringConstructor;
+        default: string;
+    } : Omit<{
+        type: StringConstructor;
+        default: string;
+    }, "default" | "type"> & {
+        type: PropType<unknown extends Defaults["noDataText"] ? string : string | Defaults["noDataText"]>;
+        default: unknown extends Defaults["noDataText"] ? string : string | Defaults["noDataText"];
+    };
+    rowHeight: unknown extends Defaults["rowHeight"] ? NumberConstructor : {
+        type: PropType<unknown extends Defaults["rowHeight"] ? number : number | Defaults["rowHeight"]>;
+        default: unknown extends Defaults["rowHeight"] ? number : number | Defaults["rowHeight"];
+    };
+    'onClick:row': unknown extends Defaults["onClick:row"] ? PropType<(e: Event, value: any) => void> : {
+        type: PropType<unknown extends Defaults["onClick:row"] ? (e: Event, value: any) => void : ((e: Event, value: any) => void) | Defaults["onClick:row"]>;
+        default: unknown extends Defaults["onClick:row"] ? (e: Event, value: any) => void : ((e: Event, value: any) => void) | Defaults["onClick:row"];
+    };
+    'onDblclick:row': unknown extends Defaults["onDblclick:row"] ? PropType<(e: Event, value: any) => void> : {
+        type: PropType<unknown extends Defaults["onDblclick:row"] ? (e: Event, value: any) => void : ((e: Event, value: any) => void) | Defaults["onDblclick:row"]>;
+        default: unknown extends Defaults["onDblclick:row"] ? (e: Event, value: any) => void : ((e: Event, value: any) => void) | Defaults["onDblclick:row"];
+    };
+    'onContextmenu:row': unknown extends Defaults["onContextmenu:row"] ? PropType<(e: Event, value: any) => void> : {
+        type: PropType<unknown extends Defaults["onContextmenu:row"] ? (e: Event, value: any) => void : ((e: Event, value: any) => void) | Defaults["onContextmenu:row"]>;
+        default: unknown extends Defaults["onContextmenu:row"] ? (e: Event, value: any) => void : ((e: Event, value: any) => void) | Defaults["onContextmenu:row"];
+    };
 };
 export declare const YDataTable: import("vue").DefineComponent<{
     tag: {
@@ -231,6 +277,17 @@ export declare const YDataTable: import("vue").DefineComponent<{
     };
     width: PropType<string | number>;
     search: PropType<string>;
+    loading: (BooleanConstructor | StringConstructor)[];
+    loadingText: StringConstructor;
+    hideNoData: BooleanConstructor;
+    noDataText: {
+        type: StringConstructor;
+        default: string;
+    };
+    rowHeight: NumberConstructor;
+    'onClick:row': PropType<(e: Event, value: any) => void>;
+    'onDblclick:row': PropType<(e: Event, value: any) => void>;
+    'onContextmenu:row': PropType<(e: Event, value: any) => void>;
     page: {
         type: PropType<string | number>;
         default: number;
@@ -307,6 +364,17 @@ export declare const YDataTable: import("vue").DefineComponent<{
     };
     width: PropType<string | number>;
     search: PropType<string>;
+    loading: (BooleanConstructor | StringConstructor)[];
+    loadingText: StringConstructor;
+    hideNoData: BooleanConstructor;
+    noDataText: {
+        type: StringConstructor;
+        default: string;
+    };
+    rowHeight: NumberConstructor;
+    'onClick:row': PropType<(e: Event, value: any) => void>;
+    'onDblclick:row': PropType<(e: Event, value: any) => void>;
+    'onContextmenu:row': PropType<(e: Event, value: any) => void>;
     page: {
         type: PropType<string | number>;
         default: number;
@@ -317,13 +385,13 @@ export declare const YDataTable: import("vue").DefineComponent<{
     };
 }>> & {
     "onUpdate:modelValue"?: ((value: any[]) => any) | undefined;
+    "onClick:row"?: ((e: Event, value: {
+        row: 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;
@@ -333,6 +401,8 @@ export declare const YDataTable: import("vue").DefineComponent<{
     itemKey: any;
     selectStrategy: "page" | "all" | "single";
     returnItem: boolean;
+    hideNoData: boolean;
+    noDataText: string;
     headers: import("./types").DataTableHeader[] | import("./types").DataTableHeader[][];
     itemSelectable: any;
     sortBy: readonly import("./types").SortOption[];