yuyeon 0.3.1-rc.6 → 0.3.2-rc.1

package/lib/components/dialog/YDialog.js

@@ -0,0 +1,213 @@
+import { createVNode as _createVNode, mergeProps as _mergeProps, Fragment as _Fragment } from "vue";
+import { computed, getCurrentInstance, ref, shallowRef, watch, onScopeDispose } from 'vue';
+import { useModelDuplex } from "../../composables/communication.js";
+import { useRender } from "../../composables/component.js";
+import { omit } from "../../util/common.js";
+import { bindClasses, chooseProps, defineComponent, propsFactory } from "../../util/component/index.js";
+import { toStyleSizeValue } from "../../util/ui.js";
+import { YCard } from "../card/index.js";
+import { YLayer, pressYLayerProps } from "../layer/index.js";
+import { useActiveStack } from "../layer/active-stack.js";
+import "./YDialog.scss";
+export const pressYDialogPropsOptions = propsFactory({
+  persistent: {
+    type: Boolean,
+    default: true
+  },
+  dialogClasses: {
+    type: [Array, String, Object]
+  },
+  focusTrap: {
+    type: [Boolean, String, Object, Array],
+    default: true
+  },
+  offset: {
+    type: String
+  },
+  ...omit(pressYLayerProps({
+    scrim: true,
+    scrollStrategy: null
+  }), ['offset', 'classes'])
+}, 'YDialog');
+export const YDialog = defineComponent({
+  name: 'YDialog',
+  components: {
+    YLayer,
+    YCard
+  },
+  props: pressYDialogPropsOptions(),
+  emits: ['update:modelValue'],
+  setup(props, _ref) {
+    let {
+      emit,
+      slots
+    } = _ref;
+    const vm = getCurrentInstance();
+    const $yuyeon = vm?.appContext.config.globalProperties.$yuyeon;
+    const active = useModelDuplex(props);
+    const classes = computed(() => {
+      const boundClasses = bindClasses(props.dialogClasses);
+      return {
+        ...boundClasses,
+        'y-dialog': true,
+        'y-dialog--maximized': props.maximized
+      };
+    });
+    const styles = computed(() => {
+      return {
+        ...(props.contentStyles ?? {}),
+        paddingTop: toStyleSizeValue(props.offset)
+      };
+    });
+    const layer$ = ref();
+    const {
+      children
+    } = useActiveStack(layer$, active, shallowRef(true));
+    function onFocusin(e) {
+      if (props.focusTrap === false) {
+        return;
+      }
+      const prevTarget = e.relatedTarget;
+      const target = e.target;
+      const excludeTarget = props.focusTrap;
+      if (typeof excludeTarget === 'string' && document.querySelector(excludeTarget) == target) {
+        return;
+      }
+      if (typeof excludeTarget === 'object') {
+        if (Array.isArray(excludeTarget)) {
+          const excluded = excludeTarget.some(exclude => {
+            if (typeof exclude === 'string') {
+              return document.querySelector(exclude) == target;
+            }
+            if (typeof exclude === 'object') {
+              return exclude == target;
+            }
+          });
+          if (excluded) {
+            return;
+          }
+        } else if (excludeTarget == target) {
+          return;
+        }
+      }
+      function testChildrenContains(layers) {
+        return layers.some(layer => {
+          return !layer.content$?.contains(target);
+        });
+      }
+      if (prevTarget !== target && layer$.value?.content$ && ![document, layer$.value?.content$].includes(target) && !layer$.value?.content$.contains(target) && !testChildrenContains(children.value)) {
+        const focusableSelector = 'button, [href], input:not([type="hidden"]), select, textarea, [tabindex]:not([tabindex="-1"])';
+        const focusables = [...layer$.value.content$.querySelectorAll(focusableSelector)].filter(el => !el.hasAttribute('disabled') && !el.matches('[tabindex="-1"]'));
+        if (!focusables.length) return;
+        const firstChild = focusables[0];
+        const lastChild = focusables[focusables.length - 1];
+        if (target?.isSameNode(firstChild) || target?.isSameNode(lastChild)) {
+          return;
+        }
+        if (firstChild === lastChild) {
+          lastChild.focus();
+        } else {
+          firstChild.focus();
+        }
+      }
+    }
+    function installFocusTrap() {
+      document.addEventListener('focusin', onFocusin);
+    }
+    function dismantleFocusTrap() {
+      document.removeEventListener('focusin', onFocusin);
+    }
+    const tempScrollTop = ref(0);
+    const tempScrollLeft = ref(0);
+    function preventInteractionBackground(toggle) {
+      const root$ = $yuyeon.root;
+      const activeLayers = layer$.value?.getActiveLayers();
+      if (toggle) {
+        if (props.maximized) {
+          document.documentElement.classList.add('y-dialog--prevent-scroll');
+        }
+        const filtered = activeLayers?.filter(layer => {
+          return layer.ctx.modal;
+        });
+        if (filtered && !filtered.length || !root$.classList.contains('y-dialog--virtual-scroll')) {
+          const scrollTop = document.documentElement.scrollTop;
+          const scrollLeft = document.documentElement.scrollLeft;
+          tempScrollTop.value = scrollTop;
+          tempScrollLeft.value = scrollLeft;
+          root$.classList.add('y-dialog--virtual-scroll');
+          root$.style.top = toStyleSizeValue(-1 * scrollTop) || '';
+          root$.style.left = toStyleSizeValue(-1 * scrollLeft) || '';
+        }
+      } else {
+        const filtered = activeLayers?.filter(layer => {
+          return !layer$.value?.isMe(layer) && layer.ctx.modal;
+        });
+        if (!filtered?.length && root$) {
+          document.documentElement.classList.remove('y-dialog--prevent-scroll');
+          root$.classList.remove('y-dialog--virtual-scroll');
+          root$.style.top = '';
+          root$.style.left = '';
+          requestAnimationFrame(() => {
+            document.documentElement.scrollTop = tempScrollTop.value;
+            document.documentElement.scrollLeft = tempScrollLeft.value;
+          });
+        } else if (filtered.every(layer => !layer.ctx?.maximized)) {
+          document.documentElement.classList.remove('y-dialog--prevent-scroll');
+        }
+      }
+    }
+    function onUpdate(v) {
+      active.value = v;
+    }
+    function onClick(e) {
+      const currentActive = active.value;
+      if (!props.disabled) {
+        active.value = !currentActive;
+      }
+    }
+    watch(() => layer$.value?.baseEl, (neo, old) => {
+      if (neo) {
+        neo.addEventListener('click', onClick);
+      } else if (old) {
+        old.removeEventListener('click', onClick);
+      }
+    });
+    if (active.value) {
+      installFocusTrap();
+      preventInteractionBackground(true);
+    }
+    watch(active, neo => {
+      neo ? installFocusTrap() : dismantleFocusTrap();
+      preventInteractionBackground(neo);
+    });
+    onScopeDispose(() => {
+      dismantleFocusTrap();
+      preventInteractionBackground(false);
+    });
+    useRender(() => {
+      return _createVNode(_Fragment, null, [_createVNode(YLayer, _mergeProps({
+        "modelValue": active.value,
+        "onUpdate:modelValue": $event => active.value = $event,
+        "classes": classes.value,
+        "content-styles": styles.value,
+        "modal": true,
+        "ref": layer$
+      }, omit(chooseProps(props, YLayer.props), ['contentStyles'])), {
+        default: function () {
+          for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+            args[_key] = arguments[_key];
+          }
+          return slots.default?.(...args);
+        },
+        base: slots.base
+      })]);
+    });
+    return {
+      active,
+      layer: layer$,
+      classes,
+      children
+    };
+  }
+});
+//# sourceMappingURL=YDialog.js.map

package/lib/components/dialog/YDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"YDialog.js","names":["computed","getCurrentInstance","ref","shallowRef","watch","onScopeDispose","useModelDuplex","useRender","omit","bindClasses","chooseProps","defineComponent","propsFactory","toStyleSizeValue","YCard","YLayer","pressYLayerProps","useActiveStack","pressYDialogPropsOptions","persistent","type","Boolean","default","dialogClasses","Array","String","Object","focusTrap","offset","scrim","scrollStrategy","YDialog","name","components","props","emits","setup","_ref","emit","slots","vm","$yuyeon","appContext","config","globalProperties","active","classes","boundClasses","maximized","styles","contentStyles","paddingTop","layer$","children","onFocusin","e","prevTarget","relatedTarget","target","excludeTarget","document","querySelector","isArray","excluded","some","exclude","testChildrenContains","layers","layer","content$","contains","value","includes","focusableSelector","focusables","querySelectorAll","filter","el","hasAttribute","matches","length","firstChild","lastChild","isSameNode","focus","installFocusTrap","addEventListener","dismantleFocusTrap","removeEventListener","tempScrollTop","tempScrollLeft","preventInteractionBackground","toggle","root$","root","activeLayers","getActiveLayers","documentElement","classList","add","filtered","ctx","modal","scrollTop","scrollLeft","style","top","left","isMe","remove","requestAnimationFrame","every","onUpdate","v","onClick","currentActive","disabled","baseEl","neo","old","_createVNode","_Fragment","_mergeProps","$event","_len","arguments","args","_key","base"],"sources":["../../../src/components/dialog/YDialog.tsx"],"sourcesContent":["import {\n  type PropType,\n  computed,\n  getCurrentInstance,\n  onBeforeUnmount,\n  ref,\n  shallowRef,\n  watch, onScopeDispose,\n} from 'vue';\n\nimport { useModelDuplex } from '@/composables/communication';\nimport { useRender } from '@/composables/component';\nimport { omit } from '@/util/common';\nimport {\n  bindClasses,\n  chooseProps,\n  defineComponent,\n  propsFactory,\n} from '@/util/component';\nimport { toStyleSizeValue } from '@/util/ui';\n\nimport { YCard } from '../card';\nimport { YLayer, pressYLayerProps } from '../layer';\nimport { useActiveStack } from '../layer/active-stack';\n\nimport './YDialog.scss';\n\nexport const pressYDialogPropsOptions = propsFactory(\n  {\n    persistent: {\n      type: Boolean as PropType<boolean>,\n      default: true,\n    },\n    dialogClasses: {\n      type: [Array, String, Object] as PropType<\n        string[] | string | Record<string, any>\n      >,\n    },\n    focusTrap: {\n      type: [Boolean, String, Object, Array] as PropType<\n        false | string | string[] | HTMLElement\n      >,\n      default: true,\n    },\n    offset: {\n      type: String as PropType<string>,\n    },\n    ...omit(\n      pressYLayerProps({\n        scrim: true,\n        scrollStrategy: null,\n      }),\n      ['offset', 'classes'],\n    ),\n  },\n  'YDialog',\n);\n\nexport const YDialog = defineComponent({\n  name: 'YDialog',\n  components: {\n    YLayer,\n    YCard,\n  },\n  props: pressYDialogPropsOptions(),\n  emits: ['update:modelValue'],\n  setup(props, { emit, slots }) {\n    const vm = getCurrentInstance();\n    const $yuyeon = vm?.appContext.config.globalProperties.$yuyeon;\n    const active = useModelDuplex(props);\n\n    const classes = computed(() => {\n      const boundClasses = bindClasses(props.dialogClasses);\n      return {\n        ...boundClasses,\n        'y-dialog': true,\n        'y-dialog--maximized': props.maximized,\n      };\n    });\n\n    const styles = computed(() => {\n      return {\n        ...(props.contentStyles ?? {}),\n        paddingTop: toStyleSizeValue(props.offset),\n      };\n    });\n\n    const layer$ = ref<typeof YLayer>();\n    const { children } = useActiveStack(layer$, active, shallowRef(true));\n\n    function onFocusin(e: FocusEvent) {\n      if (props.focusTrap === false) {\n        return;\n      }\n\n      const prevTarget = e.relatedTarget as HTMLElement | null;\n      const target = e.target as HTMLElement | null;\n\n      const excludeTarget = props.focusTrap;\n\n      if (\n        typeof excludeTarget === 'string' &&\n        document.querySelector(excludeTarget) == target\n      ) {\n        return;\n      }\n\n      if (typeof excludeTarget === 'object') {\n        if (Array.isArray(excludeTarget)) {\n          const excluded = excludeTarget.some((exclude) => {\n            if (typeof exclude === 'string') {\n              return document.querySelector(exclude) == target;\n            }\n            if (typeof exclude === 'object') {\n              return exclude == target;\n            }\n          });\n          if (excluded) {\n            return;\n          }\n        } else if (excludeTarget == target) {\n          return;\n        }\n      }\n\n      function testChildrenContains(layers: YLayer[]) {\n        return layers.some((layer) => {\n          return !layer.content$?.contains(target);\n        });\n      }\n\n      if (\n        prevTarget !== target &&\n        layer$.value?.content$ &&\n        ![document, layer$.value?.content$].includes(target) &&\n        !layer$.value?.content$.contains(target) &&\n        !testChildrenContains(children.value)\n      ) {\n        const focusableSelector =\n          'button, [href], input:not([type=\"hidden\"]), select, textarea, [tabindex]:not([tabindex=\"-1\"])';\n        const focusables = [\n          ...layer$.value.content$.querySelectorAll(focusableSelector),\n        ].filter(\n          (el) =>\n            !el.hasAttribute('disabled') && !el.matches('[tabindex=\"-1\"]'),\n        ) as HTMLElement[];\n        if (!focusables.length) return;\n        const firstChild = focusables[0];\n        const lastChild = focusables[focusables.length - 1];\n        if (target?.isSameNode(firstChild) || target?.isSameNode(lastChild)) {\n          return;\n        }\n        if (firstChild === lastChild) {\n          lastChild.focus();\n        } else {\n          firstChild.focus();\n        }\n      }\n    }\n\n    function installFocusTrap() {\n      document.addEventListener('focusin', onFocusin);\n    }\n\n    function dismantleFocusTrap() {\n      document.removeEventListener('focusin', onFocusin);\n    }\n\n    const tempScrollTop = ref(0);\n    const tempScrollLeft = ref(0);\n\n    function preventInteractionBackground(toggle: boolean) {\n      const root$ = $yuyeon.root as HTMLElement;\n      const activeLayers = layer$.value?.getActiveLayers();\n      if (toggle) {\n        if (props.maximized) {\n          document.documentElement.classList.add('y-dialog--prevent-scroll');\n        }\n        const filtered = activeLayers?.filter((layer: any) => {\n          return layer.ctx.modal;\n        });\n        if (\n          (filtered && !filtered.length) ||\n          !root$.classList.contains('y-dialog--virtual-scroll')\n        ) {\n          const scrollTop = document.documentElement.scrollTop;\n          const scrollLeft = document.documentElement.scrollLeft;\n          tempScrollTop.value = scrollTop;\n          tempScrollLeft.value = scrollLeft;\n\n          root$.classList.add('y-dialog--virtual-scroll');\n          root$.style.top = toStyleSizeValue(-1 * scrollTop) || '';\n          root$.style.left = toStyleSizeValue(-1 * scrollLeft) || '';\n        }\n      } else {\n        const filtered = activeLayers?.filter((layer: any) => {\n          return !layer$.value?.isMe(layer) && layer.ctx.modal;\n        });\n\n        if (!filtered?.length && root$) {\n          document.documentElement.classList.remove('y-dialog--prevent-scroll');\n          root$.classList.remove('y-dialog--virtual-scroll');\n          root$.style.top = '';\n          root$.style.left = '';\n          requestAnimationFrame(() => {\n            document.documentElement.scrollTop = tempScrollTop.value;\n            document.documentElement.scrollLeft = tempScrollLeft.value;\n          });\n        } else if (filtered.every((layer: any) => !layer.ctx?.maximized)) {\n          document.documentElement.classList.remove('y-dialog--prevent-scroll');\n        }\n      }\n    }\n\n    function onUpdate(v: boolean) {\n      active.value = v;\n    }\n\n    function onClick(e: MouseEvent) {\n      const currentActive = active.value;\n      if (!props.disabled) {\n        active.value = !currentActive;\n      }\n    }\n\n    watch(\n      () => layer$.value?.baseEl,\n      (neo, old) => {\n        if (neo) {\n          neo.addEventListener('click', onClick);\n        } else if (old) {\n          old.removeEventListener('click', onClick);\n        }\n      },\n    );\n\n    if (active.value) {\n      installFocusTrap()\n      preventInteractionBackground(true);\n    }\n\n    watch(active, (neo) => {\n      neo ? installFocusTrap() : dismantleFocusTrap();\n      preventInteractionBackground(neo);\n    });\n\n    onScopeDispose(() => {\n      dismantleFocusTrap();\n      preventInteractionBackground(false);\n    })\n\n    useRender(() => {\n      return (\n        <>\n          <YLayer\n            v-model={active.value}\n            classes={classes.value}\n            content-styles={styles.value}\n            modal\n            ref={layer$}\n            {...omit(chooseProps(props, YLayer.props), ['contentStyles'])}\n          >\n            {{\n              default: (...args: any[]) => slots.default?.(...args),\n              base: slots.base,\n            }}\n          </YLayer>\n        </>\n      );\n    });\n\n    return {\n      active,\n      layer: layer$,\n      classes,\n      children,\n    };\n  },\n});\n"],"mappings":"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"}

package/lib/components/dialog/index.js

@@ -0,0 +1,2 @@
+export * from "./YDialog.js";
+//# sourceMappingURL=index.js.map

package/lib/components/dialog/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/dialog/index.ts"],"sourcesContent":["export * from './YDialog';\r\n"],"mappings":""}

package/lib/components/divider/YDivider.js

@@ -0,0 +1,20 @@
+import { withDirectives as _withDirectives, createVNode as _createVNode, resolveDirective as _resolveDirective } from "vue";
+import { useRender } from "../../composables/component.js";
+import { defineComponent, propsFactory } from "../../util/component/index.js";
+export const pressYDividerPropsOptions = propsFactory({
+  vertical: Boolean
+}, 'YDivider');
+export const YDivider = defineComponent({
+  name: 'YDivider',
+  props: pressYDividerPropsOptions(),
+  setup(props) {
+    useRender(() => {
+      return _withDirectives(_createVNode("hr", {
+        "class": ['y-divider', {
+          'y-divider--vertical': props.vertical
+        }]
+      }, null), [[_resolveDirective("theme")]]);
+    });
+  }
+});
+//# sourceMappingURL=YDivider.js.map

package/lib/components/divider/YDivider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"YDivider.js","names":["useRender","defineComponent","propsFactory","pressYDividerPropsOptions","vertical","Boolean","YDivider","name","props","setup","_withDirectives","_createVNode","_resolveDirective"],"sources":["../../../src/components/divider/YDivider.tsx"],"sourcesContent":["import { type PropType } from 'vue';\r\n\r\nimport { useRender } from '@/composables/component';\r\nimport { defineComponent, propsFactory } from '@/util/component';\r\n\r\nexport const pressYDividerPropsOptions = propsFactory(\r\n  {\r\n    vertical: Boolean as PropType<boolean>,\r\n  },\r\n  'YDivider',\r\n);\r\n\r\nexport const YDivider = defineComponent({\r\n  name: 'YDivider',\r\n  props: pressYDividerPropsOptions(),\r\n  setup(props) {\r\n    useRender(() => {\r\n      return (\r\n        <hr\r\n          class={['y-divider', { 'y-divider--vertical': props.vertical }]}\r\n          v-theme\r\n        />\r\n      );\r\n    });\r\n  },\r\n});\r\n\r\nexport type YDivider = InstanceType<typeof YDivider>;\r\n"],"mappings":";SAESA,SAAS;AAAA,SACTC,eAAe,EAAEC,YAAY;AAEtC,OAAO,MAAMC,yBAAyB,GAAGD,YAAY,CACnD;EACEE,QAAQ,EAAEC;AACZ,CAAC,EACD,UACF,CAAC;AAED,OAAO,MAAMC,QAAQ,GAAGL,eAAe,CAAC;EACtCM,IAAI,EAAE,UAAU;EAChBC,KAAK,EAAEL,yBAAyB,CAAC,CAAC;EAClCM,KAAKA,CAACD,KAAK,EAAE;IACXR,SAAS,CAAC,MAAM;MACd,OAAAU,eAAA,CAAAC,YAAA;QAAA,SAEW,CAAC,WAAW,EAAE;UAAE,qBAAqB,EAAEH,KAAK,CAACJ;QAAS,CAAC;MAAC,YAAAQ,iBAAA;IAIrE,CAAC,CAAC;EACJ;AACF,CAAC,CAAC"}

package/lib/components/divider/index.js

@@ -0,0 +1,2 @@
+export * from "./YDivider.js";
+//# sourceMappingURL=index.js.map

package/lib/components/divider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/divider/index.ts"],"sourcesContent":["export * from './YDivider';\n"],"mappings":""}

package/lib/components/draggable/YDraggable.js

@@ -0,0 +1,95 @@
+import { computed, defineComponent, h, ref, unref } from 'vue';
+import { useRender } from "../../composables/component.js";
+import { getHtmlElement } from "../../util/index.js";
+export const YDraggable = defineComponent({
+  name: 'YDraggable',
+  props: {
+    as: [Object, String],
+    handle: [Object, String],
+    disabled: Boolean,
+    capture: Boolean,
+    exact: Boolean,
+    container: [Object, String],
+    onDragStart: Function
+  },
+  emits: ['start'],
+  setup(props, _ref) {
+    let {
+      slots,
+      emit
+    } = _ref;
+    const targetRef = ref();
+    const dragging = ref(false);
+    const originPosition = ref();
+    const position = ref();
+    const targetEl = computed(() => {
+      return getHtmlElement(targetRef.value);
+    });
+    const handleEl = computed(() => {
+      let el = targetEl.value;
+      if (typeof props.handle === 'string') {
+        const hEl = targetEl.value?.querySelector(props.handle);
+        if (hEl?.nodeType === 1) el = hEl;
+      }
+      return el;
+    });
+    const containerEl = computed(() => {
+      const container = unref(props.container);
+      if (typeof container === 'string') {
+        return document.querySelector(container);
+      } else if (container) {
+        return getHtmlElement(container);
+      }
+      return undefined;
+    });
+    const slotProps = computed(() => {
+      return {
+        handle: handleEl.value
+      };
+    });
+    const start = e => {
+      console.log('start', e);
+      if (props.disabled) return;
+      if (props.exact && e.target !== targetEl.value) return;
+      const container = containerEl.value;
+      const containerRect = container?.getBoundingClientRect?.();
+      const targetRect = targetEl.value?.getBoundingClientRect();
+      const pos = {
+        x: e.clientX - (container ? targetRect.left - containerRect.left + container.scrollLeft : targetRect.left),
+        y: e.clientY - (container ? targetRect.top - containerRect.top + container.scrollTop : targetRect.top)
+      };
+      if (props.onDragStart?.(pos, e) === false) return;
+      originPosition.value = pos;
+    };
+    const move = e => {
+      console.log('move', e);
+    };
+    const end = e => {
+      console.log('end', e);
+    };
+    useRender(() => {
+      if (slots.default) {
+        return h(props.as || 'div', {
+          ref: targetRef
+        }, slots.default(slotProps.value));
+      }
+      return h('div');
+    });
+    if (window) {
+      const config = {
+        capture: props.capture ?? true
+      };
+      // useEventListener(handleEl, 'pointerdown', start, config);
+      // useEventListener(window, 'pointermove', move, config);
+      // useEventListener(window, 'pointerup', end, config);
+    }
+
+    return {
+      targetEl,
+      handleEl,
+      dragging,
+      position
+    };
+  }
+});
+//# sourceMappingURL=YDraggable.js.map

package/lib/components/draggable/YDraggable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"YDraggable.js","names":["computed","defineComponent","h","ref","unref","useRender","getHtmlElement","YDraggable","name","props","as","Object","String","handle","disabled","Boolean","capture","exact","container","onDragStart","Function","emits","setup","_ref","slots","emit","targetRef","dragging","originPosition","position","targetEl","value","handleEl","el","hEl","querySelector","nodeType","containerEl","document","undefined","slotProps","start","e","console","log","target","containerRect","getBoundingClientRect","targetRect","pos","x","clientX","left","scrollLeft","y","clientY","top","scrollTop","move","end","default","window","config"],"sources":["../../../src/components/draggable/YDraggable.ts"],"sourcesContent":["import {\n  MaybeRef,\n  PropType,\n  computed,\n  defineComponent,\n  h,\n  ref,\n  unref,\n} from 'vue';\n\nimport { useRender } from '@/composables/component';\nimport { getHtmlElement } from '@/util/index';\n\ntype Coord = { x: number; y: number };\n\nexport const YDraggable = defineComponent({\n  name: 'YDraggable',\n  props: {\n    as: [Object, String] as PropType<object | string>,\n    handle: [Object, String] as PropType<MaybeRef<HTMLElement | string>>,\n    disabled: Boolean,\n    capture: Boolean,\n    exact: Boolean,\n    container: [Object, String] as PropType<\n      MaybeRef<HTMLElement | SVGElement | null> | string\n    >,\n    onDragStart: Function as PropType<\n      (pos: Coord, e: PointerEvent) => boolean | undefined\n    >,\n  },\n  emits: ['start'],\n  setup(props, { slots, emit }) {\n    const targetRef = ref();\n    const dragging = ref(false);\n    const originPosition = ref();\n    const position = ref();\n\n    const targetEl = computed(() => {\n      return getHtmlElement(targetRef.value);\n    });\n\n    const handleEl = computed(() => {\n      let el = targetEl.value;\n      if (typeof props.handle === 'string') {\n        const hEl = targetEl.value?.querySelector(props.handle);\n        if (hEl?.nodeType === 1) el = hEl;\n      }\n      return el;\n    });\n\n    const containerEl = computed(() => {\n      const container = unref(props.container);\n      if (typeof container === 'string') {\n        return document.querySelector(container);\n      } else if (container) {\n        return getHtmlElement(container);\n      }\n      return undefined;\n    });\n\n    const slotProps = computed(() => {\n      return {\n        handle: handleEl.value,\n      };\n    });\n\n    const start = (e: PointerEvent) => {\n      console.log('start', e);\n      if (props.disabled) return;\n      if (props.exact && e.target !== targetEl.value) return;\n\n      const container = containerEl.value;\n      const containerRect = container?.getBoundingClientRect?.();\n      const targetRect = targetEl.value?.getBoundingClientRect();\n      const pos = {\n        x:\n          e.clientX -\n          (container\n            ? targetRect.left - containerRect!.left + container.scrollLeft\n            : targetRect.left),\n        y:\n          e.clientY -\n          (container\n            ? targetRect.top - containerRect!.top + container.scrollTop\n            : targetRect.top),\n      };\n      if (props.onDragStart?.(pos, e) === false) return;\n      originPosition.value = pos;\n    };\n\n    const move = (e: PointerEvent) => {\n      console.log('move', e);\n    };\n\n    const end = (e: PointerEvent) => {\n      console.log('end', e);\n    };\n\n    useRender(() => {\n      if (slots.default) {\n        return h(\n          props.as || 'div',\n          { ref: targetRef },\n          slots.default(slotProps.value),\n        );\n      }\n      return h('div');\n    });\n\n    if (window) {\n      const config = { capture: props.capture ?? true };\n      // useEventListener(handleEl, 'pointerdown', start, config);\n      // useEventListener(window, 'pointermove', move, config);\n      // useEventListener(window, 'pointerup', end, config);\n    }\n\n    return {\n      targetEl,\n      handleEl,\n      dragging,\n      position,\n    };\n  },\n});\n\nexport type YDraggable = InstanceType<typeof YDraggable>;\n"],"mappings":"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"}

package/lib/components/dropdown/YDropdown.js

@@ -0,0 +1,109 @@
+import { createTextVNode as _createTextVNode, mergeProps as _mergeProps, createVNode as _createVNode, Fragment as _Fragment } from "vue";
+import { mergeProps } from 'vue';
+import { pressItemsPropsOptions } from "../../abstract/items.js";
+import { useModelDuplex } from "../../composables/communication.js";
+import { useRender } from "../../composables/component.js";
+import { pressCoordinateProps } from "../../composables/coordinate/index.js";
+import { pressPolyTransitionPropsOptions } from "../../composables/transition.js";
+import { getObjectValueByPath, omit } from "../../util/common.js";
+import { bindClasses, chooseProps, defineComponent, propsFactory } from "../../util/component/index.js";
+import { pressYButtonProps, YButton } from "../button/index.js";
+import { YCard } from "../card/index.js";
+import { YIcon } from "../icon/index.js";
+import { YList, YListItem } from "../list/index.js";
+import { YMenu, YMenuPropOptions } from "../menu/index.js";
+import "./YDropdown.scss";
+export const pressYDropdownPropsOptions = propsFactory({
+  ...omit(YMenuPropOptions, ['modelValue', 'coordinateStrategy']),
+  modelValue: Boolean,
+  variation: String,
+  color: String,
+  ...omit(pressCoordinateProps({
+    position: 'bottom'
+  }), ['coordinateStrategy']),
+  dropdownIcon: {
+    type: [String, Array, Object],
+    default: '$dropdown'
+  },
+  ...pressItemsPropsOptions(),
+  ...pressPolyTransitionPropsOptions({
+    transition: 'fade'
+  }),
+  ...pressYButtonProps
+}, 'YDropdown');
+export const YDropdown = defineComponent({
+  name: 'YDropdown',
+  inheritAttrs: false,
+  components: {
+    YMenu
+  },
+  props: {
+    ...pressYDropdownPropsOptions()
+  },
+  slots: Object,
+  emits: ['update:modelValue', 'click'],
+  setup(props, _ref) {
+    let {
+      slots,
+      attrs,
+      emit
+    } = _ref;
+    const opened = useModelDuplex(props);
+    function onClickItem(item) {
+      opened.value = false;
+      emit('click', item);
+    }
+    useRender(() => {
+      const menuProps = chooseProps(props, YMenu.props);
+      const dropdownIconProps = chooseProps(typeof props.dropdownIcon === 'object' ? props.dropdownIcon : {}, YIcon.props);
+      return _createVNode(_Fragment, null, [_createVNode(YMenu, _mergeProps(menuProps, {
+        "modelValue": opened.value,
+        "onUpdate:modelValue": $event => opened.value = $event,
+        "content-classes": bindClasses(['y-dropdown__content', props.contentClasses])
+      }), {
+        base: function () {
+          for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+            args[_key] = arguments[_key];
+          }
+          return slots.base ? slots.base?.(...args) : _createVNode(YButton, _mergeProps({
+            "variation": props.variation,
+            "color": props.color,
+            "class": ['y-dropdown', {
+              'y-dropdown--opened': opened.value
+            }],
+            "disabled": props.disabled
+          }, attrs), {
+            default: () => [_createVNode("span", {
+              "class": "y-dropdown__default"
+            }, [slots.default?.()]), slots['dropdown-icon'] ? slots['dropdown-icon']() : _createVNode(YIcon, _mergeProps(mergeProps(dropdownIconProps), {
+              "icon": props.dropdownIcon,
+              "class": ['y-dropdown__icon']
+            }), null)]
+          });
+        },
+        default: () => slots.menu ? slots.menu() : _createVNode(YCard, null, {
+          default: () => [Array.isArray(props.items) && props.items.length > 0 ? _createVNode(YList, null, {
+            default: () => [props.items.map(item => {
+              const text = getObjectValueByPath(item, props.itemText);
+              const slotName = `item.${item.key}`;
+              return _createVNode(YListItem, {
+                "onClick": e => onClickItem(item)
+              }, {
+                default: () => [slots.item ? slots.item({
+                  text,
+                  item
+                }) : slots?.[slotName] ? slots[slotName]({
+                  text,
+                  item
+                }) : text]
+              });
+            })]
+          }) : _createVNode("div", {
+            "class": "y-dropdown__no-options"
+          }, [_createTextVNode("\uD56D\uBAA9\uC774 \uC5C6\uC2B5\uB2C8\uB2E4.")])]
+        })
+      })]);
+    });
+  }
+});
+//# sourceMappingURL=YDropdown.js.map

package/lib/components/dropdown/YDropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"YDropdown.js","names":["mergeProps","pressItemsPropsOptions","useModelDuplex","useRender","pressCoordinateProps","pressPolyTransitionPropsOptions","getObjectValueByPath","omit","bindClasses","chooseProps","defineComponent","propsFactory","pressYButtonProps","YButton","YCard","YIcon","YList","YListItem","YMenu","YMenuPropOptions","pressYDropdownPropsOptions","modelValue","Boolean","variation","String","color","position","dropdownIcon","type","Array","Object","default","transition","YDropdown","name","inheritAttrs","components","props","slots","emits","setup","_ref","attrs","emit","opened","onClickItem","item","value","menuProps","dropdownIconProps","_createVNode","_Fragment","_mergeProps","$event","contentClasses","base","_len","arguments","length","args","_key","disabled","menu","isArray","items","map","text","itemText","slotName","key","e","_createTextVNode"],"sources":["../../../src/components/dropdown/YDropdown.tsx"],"sourcesContent":["import { type PropType, type SlotsType, mergeProps } from 'vue';\r\n\r\nimport { pressItemsPropsOptions } from '@/abstract/items';\r\nimport { useModelDuplex } from '@/composables/communication';\r\nimport { useRender } from '@/composables/component';\r\nimport { pressCoordinateProps } from '@/composables/coordinate';\r\nimport { pressPolyTransitionPropsOptions } from '@/composables/transition';\r\nimport { getObjectValueByPath, omit } from '@/util/common';\r\nimport {\r\n  bindClasses,\r\n  chooseProps,\r\n  defineComponent,\r\n  propsFactory,\r\n} from '@/util/component';\r\n\r\nimport { pressYButtonProps, YButton } from '../button';\r\nimport { YCard } from '../card';\r\nimport { YIcon, YIconIconProp } from '../icon';\r\nimport { YList, YListItem } from '../list';\r\nimport { YMenu, YMenuPropOptions } from '../menu';\r\n\r\nimport './YDropdown.scss';\r\n\r\nexport const pressYDropdownPropsOptions = propsFactory(\r\n  {\r\n    ...omit(YMenuPropOptions, ['modelValue', 'coordinateStrategy']),\r\n    modelValue: Boolean as PropType<boolean>,\r\n    variation: String as PropType<string>,\r\n    color: String as PropType<string>,\r\n    ...omit(pressCoordinateProps({ position: 'bottom' as 'bottom' }), [\r\n      'coordinateStrategy',\r\n    ]),\r\n    dropdownIcon: {\r\n      type: [String, Array, Object] as PropType<YIconIconProp>,\r\n      default: '$dropdown',\r\n    },\r\n    ...pressItemsPropsOptions(),\r\n    ...pressPolyTransitionPropsOptions({\r\n      transition: 'fade',\r\n    }),\r\n    ...pressYButtonProps\r\n  },\r\n  'YDropdown',\r\n);\r\n\r\ntype ItemScopedProps = {\r\n  text: string;\r\n  item: any;\r\n};\r\n\r\ntype ItemSlotPrefix = `item.${string}`;\r\n\r\nexport const YDropdown = defineComponent({\r\n  name: 'YDropdown',\r\n  inheritAttrs: false,\r\n  components: {\r\n    YMenu,\r\n  },\r\n  props: {\r\n    ...pressYDropdownPropsOptions(),\r\n  },\r\n  slots: Object as SlotsType<{\r\n    base: any;\r\n    default: any;\r\n    'dropdown-icon': any;\r\n    menu: any;\r\n    item: ItemScopedProps;\r\n    [k: ItemSlotPrefix]: ItemScopedProps;\r\n  }>,\r\n  emits: ['update:modelValue', 'click'],\r\n  setup(props, { slots, attrs, emit }) {\r\n    const opened = useModelDuplex(props);\r\n\r\n    function onClickItem(item: any) {\r\n      opened.value = false;\r\n      emit('click', item);\r\n    }\r\n\r\n    useRender(() => {\r\n      const menuProps = chooseProps(props, YMenu.props);\r\n      const dropdownIconProps = chooseProps(\r\n        typeof props.dropdownIcon === 'object' ? props.dropdownIcon : {},\r\n        YIcon.props,\r\n      );\r\n      return (\r\n        <>\r\n          <YMenu\r\n            {...menuProps}\r\n            v-model={opened.value}\r\n            content-classes={bindClasses([\r\n              'y-dropdown__content',\r\n              props.contentClasses,\r\n            ])}\r\n          >\r\n            {{\r\n              base: (...args: any[]) =>\r\n                slots.base ? (\r\n                  slots.base?.(...args)\r\n                ) : (\r\n                  <YButton\r\n                    variation={props.variation}\r\n                    color={props.color}\r\n                    class={[\r\n                      'y-dropdown',\r\n                      { 'y-dropdown--opened': opened.value },\r\n                    ]}\r\n                    disabled={props.disabled}\r\n                    {...attrs}\r\n                  >\r\n                    {\r\n                      <span class=\"y-dropdown__default\">\r\n                        {slots.default?.()}\r\n                      </span>\r\n                    }\r\n                    {slots['dropdown-icon'] ? (\r\n                      slots['dropdown-icon']()\r\n                    ) : (\r\n                      <YIcon\r\n                        {...mergeProps(dropdownIconProps)}\r\n                        icon={props.dropdownIcon}\r\n                        class={['y-dropdown__icon']}\r\n                      ></YIcon>\r\n                    )}\r\n                  </YButton>\r\n                ),\r\n              default: () =>\r\n                slots.menu ? (\r\n                  slots.menu()\r\n                ) : (\r\n                  <YCard>\r\n                    {Array.isArray(props.items) && props.items.length > 0 ? (\r\n                      <YList>\r\n                        {props.items.map((item) => {\r\n                          const text = getObjectValueByPath(\r\n                            item,\r\n                            props.itemText,\r\n                          );\r\n                          const slotName = `item.${item.key}` as const;\r\n                          return (\r\n                            <YListItem onClick={(e) => onClickItem(item)}>\r\n                              {slots.item\r\n                                ? slots.item({ text, item })\r\n                                : slots?.[slotName]\r\n                                  ? slots[slotName]({ text, item })\r\n                                  : text}\r\n                            </YListItem>\r\n                          );\r\n                        })}\r\n                      </YList>\r\n                    ) : (\r\n                      <div class=\"y-dropdown__no-options\">항목이 없습니다.</div>\r\n                    )}\r\n                  </YCard>\r\n                ),\r\n            }}\r\n          </YMenu>\r\n        </>\r\n      );\r\n    });\r\n  },\r\n});\r\n"],"mappings":"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"}

package/lib/components/dropdown/index.js

@@ -0,0 +1,2 @@
+export * from "./YDropdown.js";
+//# sourceMappingURL=index.js.map

package/lib/components/dropdown/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/dropdown/index.ts"],"sourcesContent":["export * from './YDropdown';\n"],"mappings":""}