yuyeon 0.0.0 → 0.0.3

package/lib/components/layer/scroll-strategies.mjs

@@ -0,0 +1,132 @@
+import { effectScope, nextTick, onScopeDispose, watchEffect } from 'vue';
+import { FrameScheduler } from "../../util/FrameScheduler.mjs";
+import { getScrollParents, hasScrollbar } from "../../util/scroll.mjs";
+import { toStyleSizeValue } from "../../util/ui.mjs";
+import { propsFactory } from "../../util/vue-component.mjs";
+const frameScheduler = new FrameScheduler();
+const scrollStrategies = {
+  none: null,
+  close: closeScrollStrategy,
+  block: blockScrollStrategy,
+  reposition: repositionScrollStrategy
+};
+export const pressScrollStrategyProps = propsFactory({
+  scrollStrategy: {
+    type: [String, Function],
+    default: 'block',
+    validator: val => typeof val === 'function' || val in scrollStrategies
+  }
+}, 'YLayer__scroll-strategies');
+export function useScrollStrategies(props, data) {
+  let scope;
+  watchEffect(async () => {
+    scope?.stop();
+    if (!(data.active.value && props.scrollStrategy)) return;
+    scope = effectScope();
+    await nextTick();
+    scope.active && scope.run(() => {
+      if (typeof props.scrollStrategy === 'function') {
+        props.scrollStrategy(data, props, scope);
+      } else {
+        scrollStrategies[props.scrollStrategy]?.(data, props, scope);
+      }
+    });
+  });
+  onScopeDispose(() => {
+    scope?.stop();
+  });
+}
+function closeScrollStrategy(data) {
+  function onScroll(e) {
+    data.active.value = false;
+  }
+  bindScroll(data.baseEl.value ?? data.contentEl.value, onScroll);
+}
+const BLOCKER_LAYER_CLASS = 'y-layer--scroll-blocked';
+const BLOCKER_CLASS = 'y-layer-scroll-blocked';
+const BLOCKER_SCROLL_X_VAR = '--y-body-scroll-x';
+const BLOCKER_SCROLL_Y_VAR = '--y-body-scroll-y';
+const BLOCKER_SCROLL_OFFSET_VAR = '--y-scrollbar-offset';
+function blockScrollStrategy(data, props) {
+  const offsetParent = data.root.value?.offsetParent;
+  const scrollElements = [...new Set([...getScrollParents(data.baseEl.value, props.contained ? offsetParent : undefined), ...getScrollParents(data.contentEl.value, props.contained ? offsetParent : undefined)])].filter(el => !el.classList.contains(BLOCKER_CLASS));
+  const scrollbarWidth = window.innerWidth - document.documentElement.offsetWidth;
+  const scrollableParent = (el => hasScrollbar(el) && el)(offsetParent || document.documentElement);
+  if (scrollableParent) {
+    data.root.value.classList.add(BLOCKER_LAYER_CLASS);
+  }
+  scrollElements.forEach((el, i) => {
+    el.style.setProperty(BLOCKER_SCROLL_X_VAR, toStyleSizeValue(-el.scrollLeft) ?? null);
+    el.style.setProperty(BLOCKER_SCROLL_Y_VAR, toStyleSizeValue(-el.scrollTop) ?? null);
+    el.style.setProperty(BLOCKER_SCROLL_OFFSET_VAR, toStyleSizeValue(scrollbarWidth) ?? null);
+    el.classList.add(BLOCKER_LAYER_CLASS);
+  });
+  onScopeDispose(() => {
+    scrollElements.forEach((el, i) => {
+      const x = parseFloat(el.style.getPropertyValue(BLOCKER_SCROLL_X_VAR));
+      const y = parseFloat(el.style.getPropertyValue(BLOCKER_SCROLL_Y_VAR));
+      el.style.removeProperty(BLOCKER_SCROLL_X_VAR);
+      el.style.removeProperty(BLOCKER_SCROLL_Y_VAR);
+      el.style.removeProperty(BLOCKER_SCROLL_OFFSET_VAR);
+      el.classList.remove(BLOCKER_CLASS);
+      el.scrollLeft = -x;
+      el.scrollTop = -y;
+    });
+    if (scrollableParent) {
+      data.root.value.classList.remove(BLOCKER_LAYER_CLASS);
+    }
+  });
+}
+function repositionScrollStrategy(data, props, scope) {
+  let slow = false;
+  let raf = -1;
+  let ric = -1;
+  function update(e) {
+    frameScheduler.requestNewFrame(() => {
+      const start = performance.now();
+      data.updateLevitation.value?.(e);
+      const time = performance.now() - start;
+      slow = time / (1000 / 60) > 2;
+    });
+  }
+  ric = (typeof requestIdleCallback === 'undefined' ? cb => cb() : requestIdleCallback)(() => {
+    scope.run(() => {
+      bindScroll(data.baseEl.value ?? data.contentEl.value, e => {
+        if (slow) {
+          // If the position calculation is slow,
+          // defer updates until scrolling is finished.
+          // Browsers usually fire one scroll event per frame so
+          // we just wait until we've got two frames without an event
+          cancelAnimationFrame(raf);
+          raf = requestAnimationFrame(() => {
+            raf = requestAnimationFrame(() => {
+              update(e);
+            });
+          });
+        } else {
+          update(e);
+        }
+      });
+    });
+  });
+  onScopeDispose(() => {
+    typeof cancelIdleCallback !== 'undefined' && cancelIdleCallback(ric);
+    cancelAnimationFrame(raf);
+  });
+}
+
+/** @private */
+function bindScroll(el, onScroll) {
+  const scrollElements = [document, ...getScrollParents(el)];
+  scrollElements.forEach(el => {
+    el.addEventListener('scroll', onScroll, {
+      passive: true
+    });
+  });
+  onScopeDispose(() => {
+    scrollElements.forEach(el => {
+      el.removeEventListener('scroll', onScroll);
+    });
+  });
+}
+//# sourceMappingURL=scroll-strategies.mjs.map

package/lib/components/layer/scroll-strategies.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-strategies.mjs","names":["effectScope","nextTick","onScopeDispose","watchEffect","FrameScheduler","getScrollParents","hasScrollbar","toStyleSizeValue","propsFactory","frameScheduler","scrollStrategies","none","close","closeScrollStrategy","block","blockScrollStrategy","reposition","repositionScrollStrategy","pressScrollStrategyProps","scrollStrategy","type","String","Function","default","validator","val","useScrollStrategies","props","data","scope","stop","active","value","run","onScroll","e","bindScroll","baseEl","contentEl","BLOCKER_LAYER_CLASS","BLOCKER_CLASS","BLOCKER_SCROLL_X_VAR","BLOCKER_SCROLL_Y_VAR","BLOCKER_SCROLL_OFFSET_VAR","offsetParent","root","scrollElements","Set","contained","undefined","filter","el","classList","contains","scrollbarWidth","window","innerWidth","document","documentElement","offsetWidth","scrollableParent","add","forEach","i","style","setProperty","scrollLeft","scrollTop","x","parseFloat","getPropertyValue","y","removeProperty","remove","slow","raf","ric","update","requestNewFrame","start","performance","now","updateLevitation","time","requestIdleCallback","cb","cancelAnimationFrame","requestAnimationFrame","cancelIdleCallback","addEventListener","passive","removeEventListener"],"sources":["../../../src/components/layer/scroll-strategies.ts"],"sourcesContent":["import type { EffectScope, PropType, Ref } from 'vue';\nimport { effectScope, nextTick, onScopeDispose, watchEffect } from 'vue';\n\nimport { FrameScheduler } from '../../util/FrameScheduler';\nimport { getScrollParents, hasScrollbar } from '../../util/scroll';\nimport { toStyleSizeValue } from '../../util/ui';\nimport { propsFactory } from '../../util/vue-component';\n\nconst frameScheduler = new FrameScheduler();\n\nexport interface ScrollStrategyData {\n  root: Ref<HTMLElement | undefined>;\n  contentEl: Ref<HTMLElement | undefined>;\n  baseEl: Ref<HTMLElement | undefined>;\n  active: Ref<boolean>;\n  updateLevitation: Ref<((e: Event) => void) | undefined>;\n}\n\ntype ScrollStrategyFn = (\n  data: ScrollStrategyData,\n  props: StrategyProps,\n  scope: EffectScope,\n) => void;\n\nconst scrollStrategies = {\n  none: null,\n  close: closeScrollStrategy,\n  block: blockScrollStrategy,\n  reposition: repositionScrollStrategy,\n};\n\nexport interface StrategyProps {\n  scrollStrategy: keyof typeof scrollStrategies | ScrollStrategyFn;\n  contained: boolean | undefined;\n}\n\nexport const pressScrollStrategyProps = propsFactory(\n  {\n    scrollStrategy: {\n      type: [String, Function] as PropType<StrategyProps['scrollStrategy']>,\n      default: 'block',\n      validator: (val: any) =>\n        typeof val === 'function' || val in scrollStrategies,\n    },\n  },\n  'YLayer__scroll-strategies',\n);\n\nexport function useScrollStrategies(\n  props: StrategyProps,\n  data: ScrollStrategyData,\n) {\n  let scope: EffectScope | undefined;\n  watchEffect(async () => {\n    scope?.stop();\n\n    if (!(data.active.value && props.scrollStrategy)) return;\n\n    scope = effectScope();\n    await nextTick();\n    scope.active &&\n      scope.run(() => {\n        if (typeof props.scrollStrategy === 'function') {\n          props.scrollStrategy(data, props, scope!);\n        } else {\n          scrollStrategies[props.scrollStrategy]?.(data, props, scope!);\n        }\n      });\n  });\n\n  onScopeDispose(() => {\n    scope?.stop();\n  });\n}\n\nfunction closeScrollStrategy(data: ScrollStrategyData) {\n  function onScroll(e: Event) {\n    data.active.value = false;\n  }\n\n  bindScroll(data.baseEl.value ?? data.contentEl.value, onScroll);\n}\n\nconst BLOCKER_LAYER_CLASS = 'y-layer--scroll-blocked';\nconst BLOCKER_CLASS = 'y-layer-scroll-blocked';\nconst BLOCKER_SCROLL_X_VAR = '--y-body-scroll-x';\nconst BLOCKER_SCROLL_Y_VAR = '--y-body-scroll-y';\nconst BLOCKER_SCROLL_OFFSET_VAR = '--y-scrollbar-offset';\n\nfunction blockScrollStrategy(data: ScrollStrategyData, props: StrategyProps) {\n  const offsetParent = data.root.value?.offsetParent;\n  const scrollElements = [\n    ...new Set([\n      ...getScrollParents(\n        data.baseEl.value,\n        props.contained ? offsetParent : undefined,\n      ),\n      ...getScrollParents(\n        data.contentEl.value,\n        props.contained ? offsetParent : undefined,\n      ),\n    ]),\n  ].filter((el) => !el.classList.contains(BLOCKER_CLASS));\n  const scrollbarWidth =\n    window.innerWidth - document.documentElement.offsetWidth;\n\n  const scrollableParent = ((el) => hasScrollbar(el) && el)(\n    offsetParent || document.documentElement,\n  );\n  if (scrollableParent) {\n    data.root.value!.classList.add(BLOCKER_LAYER_CLASS);\n  }\n\n  scrollElements.forEach((el, i) => {\n    el.style.setProperty(\n      BLOCKER_SCROLL_X_VAR,\n      toStyleSizeValue(-el.scrollLeft) ?? null,\n    );\n    el.style.setProperty(\n      BLOCKER_SCROLL_Y_VAR,\n      toStyleSizeValue(-el.scrollTop) ?? null,\n    );\n    el.style.setProperty(\n      BLOCKER_SCROLL_OFFSET_VAR,\n      toStyleSizeValue(scrollbarWidth) ?? null,\n    );\n    el.classList.add(BLOCKER_LAYER_CLASS);\n  });\n\n  onScopeDispose(() => {\n    scrollElements.forEach((el, i) => {\n      const x = parseFloat(el.style.getPropertyValue(BLOCKER_SCROLL_X_VAR));\n      const y = parseFloat(el.style.getPropertyValue(BLOCKER_SCROLL_Y_VAR));\n\n      el.style.removeProperty(BLOCKER_SCROLL_X_VAR);\n      el.style.removeProperty(BLOCKER_SCROLL_Y_VAR);\n      el.style.removeProperty(BLOCKER_SCROLL_OFFSET_VAR);\n      el.classList.remove(BLOCKER_CLASS);\n\n      el.scrollLeft = -x;\n      el.scrollTop = -y;\n    });\n    if (scrollableParent) {\n      data.root.value!.classList.remove(BLOCKER_LAYER_CLASS);\n    }\n  });\n}\n\nfunction repositionScrollStrategy(\n  data: ScrollStrategyData,\n  props: StrategyProps,\n  scope: EffectScope,\n) {\n  let slow = false;\n  let raf = -1;\n  let ric = -1;\n\n  function update(e: Event) {\n    frameScheduler.requestNewFrame(() => {\n      const start = performance.now();\n      data.updateLevitation.value?.(e);\n      const time = performance.now() - start;\n      slow = time / (1000 / 60) > 2;\n    });\n  }\n\n  ric = (\n    typeof requestIdleCallback === 'undefined'\n      ? (cb: Function) => cb()\n      : requestIdleCallback\n  )(() => {\n    scope.run(() => {\n      bindScroll(data.baseEl.value ?? data.contentEl.value, (e) => {\n        if (slow) {\n          // If the position calculation is slow,\n          // defer updates until scrolling is finished.\n          // Browsers usually fire one scroll event per frame so\n          // we just wait until we've got two frames without an event\n          cancelAnimationFrame(raf);\n          raf = requestAnimationFrame(() => {\n            raf = requestAnimationFrame(() => {\n              update(e);\n            });\n          });\n        } else {\n          update(e);\n        }\n      });\n    });\n  });\n\n  onScopeDispose(() => {\n    typeof cancelIdleCallback !== 'undefined' && cancelIdleCallback(ric);\n    cancelAnimationFrame(raf);\n  });\n}\n\n/** @private */\nfunction bindScroll(el: HTMLElement | undefined, onScroll: (e: Event) => void) {\n  const scrollElements = [document, ...getScrollParents(el)];\n  scrollElements.forEach((el) => {\n    el.addEventListener('scroll', onScroll, { passive: true });\n  });\n\n  onScopeDispose(() => {\n    scrollElements.forEach((el) => {\n      el.removeEventListener('scroll', onScroll);\n    });\n  });\n}\n"],"mappings":"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"}

package/lib/components/list/YList.mjs

@@ -0,0 +1,16 @@
+import { createVNode as _createVNode, Fragment as _Fragment } from "vue";
+import { defineComponent } from 'vue';
+import { useRender } from "../../composables/component.mjs";
+import "./YList.scss";
+export const YList = defineComponent({
+  name: 'YList',
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    useRender(() => _createVNode(_Fragment, null, [_createVNode("div", {
+      "class": 'y-list'
+    }, [slots.default?.()])]));
+  }
+});
+//# sourceMappingURL=YList.mjs.map

package/lib/components/list/YList.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"YList.mjs","names":["defineComponent","useRender","YList","name","setup","props","_ref","slots","_createVNode","_Fragment","default"],"sources":["../../../src/components/list/YList.tsx"],"sourcesContent":["import { defineComponent } from 'vue';\r\n\r\nimport { useRender } from '../../composables/component';\r\n\r\nimport './YList.scss';\r\n\r\nexport const YList = defineComponent({\r\n  name: 'YList',\r\n  setup(props, { slots }) {\r\n    useRender(() => (\r\n      <>\r\n        <div class={'y-list'}>{slots.default?.()}</div>\r\n      </>\r\n    ));\r\n  },\r\n});\r\n\r\nexport type YList = InstanceType<typeof YList>;\r\n"],"mappings":";AAAA,SAASA,eAAe,QAAQ,KAAK;AAAC,SAE7BC,SAAS;AAElB;AAEA,OAAO,MAAMC,KAAK,GAAGF,eAAe,CAAC;EACnCG,IAAI,EAAE,OAAO;EACbC,KAAKA,CAACC,KAAK,EAAAC,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACpBL,SAAS,CAAC,MAAAO,YAAA,CAAAC,SAAA,SAAAD,YAAA;MAAA,SAEM;IAAQ,IAAGD,KAAK,CAACG,OAAO,GAAG,CAAC,IAE3C,CAAC;EACJ;AACF,CAAC,CAAC"}

package/lib/components/list/YList.scss

@@ -0,0 +1,3 @@
+.y-list {
+  //
+}

package/lib/components/list/YListItem.mjs

@@ -0,0 +1,37 @@
+import { createVNode as _createVNode } from "vue";
+import { defineComponent } from 'vue';
+import { useRender } from "../../composables/component.mjs";
+import { propsFactory } from "../../util/vue-component.mjs";
+import "./YListItem.scss";
+export const pressYListItemProps = propsFactory({
+  tag: {
+    type: String,
+    default: 'div'
+  }
+}, 'y-list-item');
+export const YListItem = defineComponent({
+  name: 'YListItem',
+  props: {
+    ...pressYListItemProps()
+  },
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    useRender(() => {
+      const ElTag = props.tag;
+      return _createVNode(ElTag, {
+        "class": ['y-list-item']
+      }, {
+        default: () => [slots.prepend && _createVNode("div", {
+          "class": 'y-list-item__prepend'
+        }, [slots.prepend()]), _createVNode("div", {
+          "class": 'y-list-item__content'
+        }, [slots.default?.()]), slots.append && _createVNode("div", {
+          "class": 'y-list-item__append'
+        }, [slots.append()])]
+      });
+    });
+  }
+});
+//# sourceMappingURL=YListItem.mjs.map

package/lib/components/list/YListItem.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"YListItem.mjs","names":["defineComponent","useRender","propsFactory","pressYListItemProps","tag","type","String","default","YListItem","name","props","setup","_ref","slots","ElTag","_createVNode","prepend","append"],"sources":["../../../src/components/list/YListItem.tsx"],"sourcesContent":["import { defineComponent } from 'vue';\n\nimport { useRender } from '../../composables/component';\nimport { propsFactory } from '../../util/vue-component';\nimport './YListItem.scss';\n\nexport const pressYListItemProps = propsFactory({\n  tag: {\n    type: String,\n    default: 'div',\n  },\n}, 'y-list-item');\n\nexport const YListItem = defineComponent({\n  name: 'YListItem',\n  props: {\n    ...pressYListItemProps(),\n  },\n  setup(props, { slots }) {\n    useRender(() => {\n      const ElTag = props.tag as keyof HTMLElementTagNameMap;\n      return (\n        <ElTag class={['y-list-item']}>\n          {slots.prepend && (\n            <div class={'y-list-item__prepend'}>{slots.prepend()}</div>\n          )}\n          <div class={'y-list-item__content'}>{slots.default?.()}</div>\n          {slots.append && (\n            <div class={'y-list-item__append'}>{slots.append()}</div>\n          )}\n        </ElTag>\n      )\n    });\n  },\n});\n\nexport type YListItem = InstanceType<typeof YListItem>;\n"],"mappings":";AAAA,SAASA,eAAe,QAAQ,KAAK;AAAC,SAE7BC,SAAS;AAAA,SACTC,YAAY;AACrB;AAEA,OAAO,MAAMC,mBAAmB,GAAGD,YAAY,CAAC;EAC9CE,GAAG,EAAE;IACHC,IAAI,EAAEC,MAAM;IACZC,OAAO,EAAE;EACX;AACF,CAAC,EAAE,aAAa,CAAC;AAEjB,OAAO,MAAMC,SAAS,GAAGR,eAAe,CAAC;EACvCS,IAAI,EAAE,WAAW;EACjBC,KAAK,EAAE;IACL,GAAGP,mBAAmB,CAAC;EACzB,CAAC;EACDQ,KAAKA,CAACD,KAAK,EAAAE,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACpBX,SAAS,CAAC,MAAM;MACd,MAAMa,KAAK,GAAGJ,KAAK,CAACN,GAAkC;MACtD,OAAAW,YAAA,CAAAD,KAAA;QAAA,SACgB,CAAC,aAAa;MAAC;QAAAP,OAAA,EAAAA,CAAA,MAC1BM,KAAK,CAACG,OAAO,IAAAD,YAAA;UAAA,SACA;QAAsB,IAAGF,KAAK,CAACG,OAAO,CAAC,CAAC,EACrD,EAAAD,YAAA;UAAA,SACW;QAAsB,IAAGF,KAAK,CAACN,OAAO,GAAG,CAAC,IACrDM,KAAK,CAACI,MAAM,IAAAF,YAAA;UAAA,SACC;QAAqB,IAAGF,KAAK,CAACI,MAAM,CAAC,CAAC,EACnD;MAAA;IAGP,CAAC,CAAC;EACJ;AACF,CAAC,CAAC"}

package/lib/components/list/YListItem.scss

@@ -0,0 +1,59 @@
+.y-list-item {
+  position: relative;
+  list-style: none;
+  padding: 8px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  transition-duration: 0.24s;
+  transition-property: color;
+  transition-timing-function: cubic-bezier(0.17, 0.67, 0.16, 0.89);
+
+  > div {
+    position: relative;
+  }
+
+  &:before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    color: inherit;
+    background-color: currentColor;
+    opacity: 0;
+  }
+
+  &:hover:before {
+    opacity: 0.14;
+  }
+
+  &--active#{&} {
+    font-weight: bold;
+
+    &:before {
+      opacity: 0.03;
+    }
+  }
+
+  &--link {
+    text-decoration: none;
+    cursor: pointer;
+  }
+
+  &--category:hover:before {
+    opacity: 0;
+  }
+
+  &__prepend {
+  }
+
+  &__content {
+    align-self: center;
+  }
+
+  &-icon {
+    width: 24px;
+    height: 24px;
+    min-width: 24px;
+  }
+}

package/lib/components/list/index.mjs

@@ -0,0 +1,3 @@
+export * from "./YListItem.mjs";
+export * from "./YList.mjs";
+//# sourceMappingURL=index.mjs.map

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

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

package/lib/components/loading/YSpinnerRing.mjs

@@ -0,0 +1,25 @@
+import { createVNode as _createVNode } from "vue";
+import { defineComponent } from 'vue';
+import "./YSpinnerRing.scss";
+const NAME = 'YSpinnerRing';
+export const YSpinnerRing = defineComponent({
+  name: NAME,
+  render() {
+    return _createVNode("svg", {
+      "class": "y-spinner-ring",
+      "width": "48",
+      "height": "48",
+      "viewBox": "0 0 48 48",
+      "xmlns": "http://www.w3.org/2000/svg"
+    }, [_createVNode("circle", {
+      "class": "y-spinner-ring__circle",
+      "cx": "24",
+      "cy": "24",
+      "r": "18",
+      "stroke-width": "4",
+      "stroke-dasharray": "113.097",
+      "stroke-dashoffset": "113.097"
+    }, null)]);
+  }
+});
+//# sourceMappingURL=YSpinnerRing.mjs.map

package/lib/components/loading/YSpinnerRing.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"YSpinnerRing.mjs","names":["defineComponent","NAME","YSpinnerRing","name","render","_createVNode"],"sources":["../../../src/components/loading/YSpinnerRing.tsx"],"sourcesContent":["import { defineComponent } from 'vue';\n\nimport './YSpinnerRing.scss';\n\nconst NAME = 'YSpinnerRing';\n\nexport const YSpinnerRing = defineComponent({\n  name: NAME,\n  render() {\n    return (\n      <svg\n        class=\"y-spinner-ring\"\n        width=\"48\"\n        height=\"48\"\n        viewBox=\"0 0 48 48\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <circle\n          class=\"y-spinner-ring__circle\"\n          cx=\"24\"\n          cy=\"24\"\n          r=\"18\"\n          stroke-width=\"4\"\n          stroke-dasharray=\"113.097\"\n          stroke-dashoffset=\"113.097\"\n        />\n      </svg>\n    );\n  },\n});\n"],"mappings":";AAAA,SAASA,eAAe,QAAQ,KAAK;AAErC;AAEA,MAAMC,IAAI,GAAG,cAAc;AAE3B,OAAO,MAAMC,YAAY,GAAGF,eAAe,CAAC;EAC1CG,IAAI,EAAEF,IAAI;EACVG,MAAMA,CAAA,EAAG;IACP,OAAAC,YAAA;MAAA,SAEU,gBAAgB;MAAA,SAChB,IAAI;MAAA,UACH,IAAI;MAAA,WACH,WAAW;MAAA,SACb;IAA4B,IAAAA,YAAA;MAAA,SAG1B,wBAAwB;MAAA,MAC3B,IAAI;MAAA,MACJ,IAAI;MAAA,KACL,IAAI;MAAA,gBACO,GAAG;MAAA,oBACC,SAAS;MAAA,qBACR;IAAS;EAInC;AACF,CAAC,CAAC"}

package/{src/components/ring-spinner/y-ring-spinner.scss → lib/components/loading/YSpinnerRing.scss}

@@ -1,15 +1,15 @@
-.y-ring-spinner {
+.y-spinner-ring {
   transform-origin: center;
   animation: rotate 2s linear infinite;
 
   &__circle {
     fill: none;
     stroke: currentColor;
-    animation: ring-spinner-dash 1.4s cubic-bezier(0.27, 0.03, 0.5, 1.22)
+    animation: spinner-ring-dash 1.4s cubic-bezier(0.27, 0.03, 0.5, 1.22)
       infinite;
   }
 }
-@keyframes ring-spinner-dash {
+@keyframes spinner-ring-dash {
   0% {
     stroke-dasharray: 1, 200;
     stroke-dashoffset: 0;

package/lib/components/loading/index.mjs

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

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

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

package/lib/components/menu/YMenu.mjs

@@ -0,0 +1,239 @@
+import { createVNode as _createVNode, Fragment as _Fragment } from "vue";
+import { computed, defineComponent, mergeProps, nextTick, ref, toRef, watch, watchEffect } from 'vue';
+import { useModelDuplex } from "../../composables/communication.mjs";
+import { useRender } from "../../composables/component.mjs";
+import { polyTransitionPropOptions } from "../../composables/transition.mjs";
+import { toKebabCase } from "../../util/string.mjs";
+import { bindClasses } from "../../util/vue-component.mjs";
+import { YLayer } from "../layer/index.mjs";
+import "./YMenu.scss";
+import { toStyleSizeValue } from "../../util/ui.mjs";
+const NAME = 'YMenu';
+const CLASS_NAME = toKebabCase(NAME);
+export const YMenuPropOptions = {
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  menuClasses: {
+    type: [Array, String, Object]
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  position: {
+    type: String,
+    default: 'default'
+  },
+  align: {
+    type: String,
+    default: 'start'
+  },
+  openOnHover: {
+    type: Boolean,
+    default: false
+  },
+  closeOnClick: {
+    type: Boolean
+  },
+  preventClip: {
+    type: Boolean,
+    default: true
+  },
+  offsetY: {
+    type: [Number, String]
+  }
+};
+
+/**
+ * #  Component
+ */
+export const YMenu = defineComponent({
+  name: NAME,
+  props: {
+    ...YMenuPropOptions,
+    transition: {
+      ...polyTransitionPropOptions.transition,
+      default: 'fade'
+    }
+  },
+  emits: ['update:modelValue'],
+  setup(props, _ref) {
+    let {
+      slots,
+      emit,
+      expose
+    } = _ref;
+    const el$ = ref();
+    const base$ = ref();
+    const baseSlot = ref();
+    const baseEl = ref();
+    const contentEl = ref();
+    const classes = computed(() => {
+      const boundClasses = bindClasses(props.menuClasses);
+      return {
+        ...boundClasses,
+        'y-menu': true
+      };
+    });
+    const model = useModelDuplex(props);
+    const active = computed({
+      get: () => {
+        return !!model.value;
+      },
+      set: v => {
+        if (!(v && props.disabled)) model.value = v;
+      }
+    });
+    const position = toRef(props, 'position');
+    const align = toRef(props, 'align');
+    const coordinate = ref();
+    const coordinateStyles = computed(() => {
+      return coordinate.value ?? {};
+    });
+    function computeCoordinates() {
+      const $base = baseEl.value;
+      const actived = active.value;
+      if ($base && actived) {
+        const $content = contentEl.value;
+        const rect = $base.getBoundingClientRect();
+        let top = rect.top;
+        let left = rect.left + rect.width / 2;
+        if ($content) {
+          if (position.value === 'top' || position.value === 'bottom') {
+            if (position.value === 'top') {
+              top -= $content.clientHeight;
+              top -= 8; // Offset
+            }
+
+            if (position.value === 'bottom') {
+              top += rect.height;
+              top += 8; // Offset
+            }
+          }
+
+          if (align.value === 'center') {
+            left -= $content.clientWidth / 2;
+          } else if (align.value === 'start') {
+            left = rect.left;
+          } else if (align.value === 'end') {
+            left = rect.right;
+            left -= $content.clientWidth;
+          }
+        }
+        if (props.offsetY) {
+          top += +props.offsetY;
+        }
+        return {
+          top: `${top}px`,
+          left: `${left}px`,
+          minWidth: toStyleSizeValue(rect.width)
+        };
+      }
+      return {};
+    }
+    const baseFromSlotEl = computed(() => {
+      return baseSlot.value?.[0]?.el;
+    });
+    watchEffect(() => {
+      if (!base$.value) {
+        baseEl.value = baseFromSlotEl.value;
+        return;
+      }
+      const base = base$.value;
+      baseEl.value = base$.value?.$el ? base$.value?.$el : base;
+    });
+    watch(active, neo => {
+      if (neo) {
+        nextTick(() => {
+          const $content = el$.value?.content$;
+          contentEl.value = $content;
+          coordinate.value = computeCoordinates();
+        });
+      }
+    });
+    function onMouseenter(e) {
+      if (props.openOnHover) {
+        active.value = true;
+      }
+    }
+    function onMouseleave(e) {
+      if (props.openOnHover) {
+        active.value = false;
+      }
+    }
+    function onClick(e) {
+      const currentActive = active.value;
+      if (!props.disabled) {
+        active.value = !currentActive;
+      }
+    }
+    function onComplementClick(e) {
+      if (active.value) {
+        active.value = false;
+      }
+    }
+    function bindHover(el) {
+      el.addEventListener('mouseenter', onMouseenter);
+      el.addEventListener('mouseleave', onMouseleave);
+    }
+    function unbindHover(el) {
+      el.removeEventListener('mouseenter', onMouseenter);
+      el.removeEventListener('mouseleave', onMouseleave);
+    }
+    watch(baseEl, (neo, old) => {
+      if (neo) {
+        bindHover(neo);
+        neo.addEventListener('click', onClick);
+      } else if (old) {
+        unbindHover(old);
+        old.removeEventListener('click', onClick);
+      }
+    });
+    useRender(() => {
+      const slotBase = slots.base?.({
+        active: active.value,
+        props: mergeProps({
+          ref: base$,
+          class: {
+            'y-menu-base': true,
+            'y-menu-base--active': active.value
+          }
+        })
+      });
+      baseSlot.value = slotBase;
+      return _createVNode(_Fragment, null, [slotBase, _createVNode(YLayer, {
+        "modelValue": active.value,
+        "onUpdate:modelValue": $event => active.value = $event,
+        "ref": el$,
+        "classes": classes.value,
+        "scrim": false,
+        "disabled": props.disabled,
+        "content-styles": {
+          ...coordinateStyles.value
+        },
+        "content-classes": ['y-menu__content'],
+        "transition": props.transition,
+        "onClick:complement": onComplementClick
+      }, {
+        default: function () {
+          for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+            args[_key] = arguments[_key];
+          }
+          return _createVNode(_Fragment, null, [slots.default?.(...args) ?? '']);
+        }
+      })]);
+    });
+    if (import.meta.env.DEV) {
+      return {
+        base$,
+        el$,
+        baseEl,
+        coordinatesStyles: coordinateStyles,
+        baseSlot
+      };
+    }
+  }
+});
+//# sourceMappingURL=YMenu.mjs.map

package/lib/components/menu/YMenu.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"YMenu.mjs","names":["computed","defineComponent","mergeProps","nextTick","ref","toRef","watch","watchEffect","useModelDuplex","useRender","polyTransitionPropOptions","toKebabCase","bindClasses","YLayer","toStyleSizeValue","NAME","CLASS_NAME","YMenuPropOptions","modelValue","type","Boolean","default","menuClasses","Array","String","Object","disabled","position","align","openOnHover","closeOnClick","preventClip","offsetY","Number","YMenu","name","props","transition","emits","setup","_ref","slots","emit","expose","el$","base$","baseSlot","baseEl","contentEl","classes","boundClasses","model","active","get","value","set","v","coordinate","coordinateStyles","computeCoordinates","$base","actived","$content","rect","getBoundingClientRect","top","left","width","clientHeight","height","clientWidth","right","minWidth","baseFromSlotEl","el","base","$el","neo","content$","onMouseenter","e","onMouseleave","onClick","currentActive","onComplementClick","bindHover","addEventListener","unbindHover","removeEventListener","old","slotBase","class","_createVNode","_Fragment","$event","_len","arguments","length","args","_key","import","meta","env","DEV","coordinatesStyles"],"sources":["../../../src/components/menu/YMenu.tsx"],"sourcesContent":["import type { CSSProperties, PropType } from 'vue';\nimport {\n  computed,\n  defineComponent,\n  mergeProps,\n  nextTick,\n  ref,\n  toRef,\n  watch,\n  watchEffect,\n} from 'vue';\n\nimport { useModelDuplex } from '../../composables/communication';\nimport { useRender } from '../../composables/component';\nimport { polyTransitionPropOptions } from '../../composables/transition';\nimport { toKebabCase } from '../../util/string';\nimport { bindClasses } from '../../util/vue-component';\nimport { YLayer } from '../layer';\nimport './YMenu.scss';\nimport { toStyleSizeValue } from \"../../util/ui\";\n\nconst NAME = 'YMenu';\nconst CLASS_NAME = toKebabCase(NAME);\n\nexport const YMenuPropOptions = {\n  modelValue: {\n    type: Boolean as PropType<boolean>,\n    default: false,\n  },\n  menuClasses: {\n    type: [Array, String, Object] as PropType<\n      string[] | string | Record<string, any>\n    >,\n  },\n  disabled: {\n    type: Boolean as PropType<boolean>,\n    default: false,\n  },\n  position: {\n    type: String as PropType<'default' | 'top' | 'bottom' | 'left' | 'right'>,\n    default: 'default',\n  },\n  align: {\n    type: String as PropType<'center' | 'start' | 'end'>,\n    default: 'start',\n  },\n  openOnHover: {\n    type: Boolean as PropType<boolean>,\n    default: false,\n  },\n  closeOnClick: {\n    type: Boolean,\n  },\n  preventClip: {\n    type: Boolean as PropType<boolean>,\n    default: true,\n  },\n  offsetY: {\n    type: [Number, String],\n  }\n};\n\n/**\n * #  Component\n */\nexport const YMenu = defineComponent({\n  name: NAME,\n  props: {\n    ...YMenuPropOptions,\n    transition: {\n      ...polyTransitionPropOptions.transition,\n      default: 'fade',\n    },\n  },\n  emits: ['update:modelValue'],\n  setup(props, { slots, emit, expose }) {\n    const el$ = ref<typeof YLayer>();\n    const base$ = ref();\n    const baseSlot = ref();\n    const baseEl = ref<HTMLElement>();\n    const contentEl = ref<HTMLElement>();\n\n    const classes = computed(() => {\n      const boundClasses = bindClasses(props.menuClasses);\n      return {\n        ...boundClasses,\n        'y-menu': true,\n      };\n    });\n\n    const model = useModelDuplex(props);\n\n    const active = computed({\n      get: (): boolean => {\n        return !!model.value;\n      },\n      set: (v: boolean) => {\n        if (!(v && props.disabled)) model.value = v;\n      },\n    });\n\n    const position = toRef(props, 'position');\n    const align = toRef(props, 'align');\n    const coordinate = ref<CSSProperties>();\n    const coordinateStyles = computed<CSSProperties>(() => {\n      return coordinate.value ?? {};\n    });\n\n    function computeCoordinates() {\n      const $base = baseEl.value;\n      const actived = active.value;\n      if ($base && actived) {\n        const $content = contentEl.value;\n        const rect = $base.getBoundingClientRect();\n\n        let top = rect.top;\n        let left = rect.left + rect.width / 2;\n        if ($content) {\n          if (position.value === 'top' || position.value === 'bottom') {\n            if (position.value === 'top') {\n              top -= $content.clientHeight;\n              top -= 8; // Offset\n            }\n            if (position.value === 'bottom') {\n              top += rect.height;\n              top += 8; // Offset\n            }\n          }\n\n          if (align.value === 'center') {\n            left -= $content.clientWidth / 2;\n          } else if (align.value === 'start') {\n            left = rect.left;\n          } else if (align.value === 'end') {\n            left = rect.right;\n            left -= $content.clientWidth;\n          }\n        }\n\n        if (props.offsetY) {\n          top += +(props.offsetY);\n        }\n\n        return {\n          top: `${top}px`,\n          left: `${left}px`,\n          minWidth: toStyleSizeValue(rect.width),\n        };\n      }\n      return {};\n    }\n\n    const baseFromSlotEl = computed(() => {\n      return baseSlot.value?.[0]?.el;\n    });\n\n    watchEffect(() => {\n      if (!base$.value) {\n        baseEl.value = baseFromSlotEl.value;\n        return;\n      }\n      const base = base$.value;\n      baseEl.value = base$.value?.$el ? base$.value?.$el : base;\n    });\n\n    watch(active, (neo) => {\n      if (neo) {\n        nextTick(() => {\n          const $content = el$.value?.content$;\n          contentEl.value = $content;\n          coordinate.value = computeCoordinates();\n        });\n      }\n    });\n\n    function onMouseenter(e: MouseEvent) {\n      if (props.openOnHover) {\n        active.value = true;\n      }\n    }\n\n    function onMouseleave(e: MouseEvent) {\n      if (props.openOnHover) {\n        active.value = false;\n      }\n    }\n\n    function onClick(e: MouseEvent) {\n      const currentActive = active.value;\n      if (!props.disabled) {\n        active.value = !currentActive;\n      }\n    }\n\n    function onComplementClick(e: MouseEvent) {\n      if (active.value) {\n        active.value = false;\n      }\n    }\n\n    function bindHover(el: HTMLElement) {\n      el.addEventListener('mouseenter', onMouseenter);\n      el.addEventListener('mouseleave', onMouseleave);\n    }\n\n    function unbindHover(el: HTMLElement) {\n      el.removeEventListener('mouseenter', onMouseenter);\n      el.removeEventListener('mouseleave', onMouseleave);\n    }\n\n    watch(baseEl, (neo, old) => {\n      if (neo) {\n        bindHover(neo);\n        neo.addEventListener('click', onClick);\n      } else if (old) {\n        unbindHover(old);\n        old.removeEventListener('click', onClick);\n      }\n    });\n\n    useRender(() => {\n      const slotBase = slots.base?.({\n        active: active.value,\n        props: mergeProps({\n          ref: base$,\n          class: {\n            'y-menu-base': true,\n            'y-menu-base--active': active.value,\n          }\n        }),\n      });\n      baseSlot.value = slotBase;\n      return (\n        <>\n          {slotBase}\n          <YLayer\n            v-model={active.value}\n            ref={el$}\n            classes={classes.value}\n            scrim={false}\n            disabled={props.disabled}\n            content-styles={{ ...coordinateStyles.value }}\n            content-classes={['y-menu__content']}\n            transition={props.transition}\n            onClick:complement={onComplementClick}\n          >\n            {{\n              default: (...args: any) => {\n                return <>{slots.default?.(...args) ?? ''}</>;\n              },\n            }}\n          </YLayer>\n        </>\n      );\n    });\n\n    if (import.meta.env.DEV) {\n      return {\n        base$,\n        el$,\n        baseEl,\n        coordinatesStyles: coordinateStyles,\n        baseSlot,\n      };\n    }\n  },\n});\n\nexport type YMenu = InstanceType<typeof YMenu>;\n"],"mappings":"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"}

package/lib/components/menu/YMenu.scss

@@ -0,0 +1,7 @@
+.y-menu {
+  font-size: 0.875rem;
+
+  &__content {
+    //
+  }
+}

package/lib/components/menu/index.mjs

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

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

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