yuyeon 0.3.1-rc.4 → 0.3.1-rc.6

package/lib/components/pagination/YPagination.scss

@@ -1,52 +1,52 @@
-.y-pagination {
-  &__list {
-    display: inline-flex;
-    width: 100%;
-    gap: var(--y-pagination__gap);
-  }
-
-  &--align-end &__list {
-    justify-content: flex-end;
-  }
-
-  &--align-center &__list {
-    justify-content: center;
-  }
-
-  li {
-    list-style: none;
-
-    .y-button {
-      min-width: 2.429em;
-      min-height: 0;
-      padding: 4px;
-
-      &__content {
-        padding: 2px;
-      }
-
-      svg {
-        width: 1.25rem;
-        height: 1.25rem;
-      }
-    }
-
-    .y-button.y-button--disabled {
-      background: rgba(0, 0, 0, 0.02);
-    }
-  }
-
-  &__item {
-    &--active {
-      .y-button:before {
-        opacity: 0.1;
-      }
-    }
-  }
-
-  &__first,
-  &__last,
-  &__prev,
-  &__next {
-  }
-}
+.y-pagination {
+  &__list {
+    display: inline-flex;
+    width: 100%;
+    gap: var(--y-pagination__gap);
+  }
+
+  &--align-end &__list {
+    justify-content: flex-end;
+  }
+
+  &--align-center &__list {
+    justify-content: center;
+  }
+
+  li {
+    list-style: none;
+
+    .y-button {
+      min-width: 2.429em;
+      min-height: 0;
+      padding: 4px;
+
+      &__content {
+        padding: 2px;
+      }
+
+      svg {
+        width: 1.25rem;
+        height: 1.25rem;
+      }
+    }
+
+    .y-button.y-button--disabled {
+      background: rgba(0, 0, 0, 0.02);
+    }
+  }
+
+  &__item {
+    &--active {
+      .y-button:before {
+        opacity: 0.1;
+      }
+    }
+  }
+
+  &__first,
+  &__last,
+  &__prev,
+  &__next {
+  }
+}

package/lib/components/panel/YDividePanel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YDividePanel.mjs","names":["computed","defineComponent","ref","watch","useRender","YDividePanel","name","setup","props","_ref","slots","contentRate","isResizing","secondarySlot","activeSecondary","rootRef","neo","value","topStyles","inset","position","classes","moveListener","event","mouseEvent","containerRect","getBoundingClientRect","requestAnimationFrame","Math","min","max","clientY","y","height","cancelEvent","removeEventListener","upListener","leaveListener","onMousedown","preventDefault","addEventListener","_createVNode","_Fragment","default","secondary"],"sources":["../../../src/components/panel/YDividePanel.tsx"],"sourcesContent":["import { type CSSProperties, computed, defineComponent, ref, watch } from 'vue';\n\nimport { useRender } from '@/composables/component';\n\nimport './YDividePanel.scss';\n\nexport const YDividePanel = defineComponent({\n  name: 'YDividePanel',\n  setup(props, { slots }) {\n    const contentRate = ref(50);\n    const isResizing = ref(false);\n    const secondarySlot = ref();\n    const activeSecondary = ref(false);\n    const rootRef = ref();\n\n    watch(secondarySlot, (neo) => {\n      activeSecondary.value = !!neo;\n    });\n\n    const topStyles = computed<CSSProperties>(() => {\n      let inset = '0 0';\n      if (activeSecondary.value) {\n        inset = `0 0 ${100 - contentRate.value}% 0`;\n      }\n      return {\n        position: 'absolute',\n        inset,\n      };\n    });\n\n    const classes = computed(() => {\n      return {\n        'y-divide-panel': true,\n        'y-divide-panel--resizing': isResizing.value,\n      };\n    });\n\n    function moveListener(event: Event) {\n      const mouseEvent = event as MouseEvent;\n      const containerRect = rootRef.value.getBoundingClientRect();\n      requestAnimationFrame(() => {\n        contentRate.value = Math.min(\n          Math.max(\n            10,\n            ((mouseEvent.clientY - containerRect.y) / containerRect.height) *\n              100,\n          ),\n          90,\n        );\n      });\n    }\n\n    function cancelEvent() {\n      isResizing.value = false;\n      rootRef.value.removeEventListener('mousemove', moveListener);\n      rootRef.value.removeEventListener('mouseup', upListener);\n      rootRef.value.removeEventListener('mouseleave', leaveListener);\n    }\n\n    function upListener(event: Event) {\n      cancelEvent();\n    }\n\n    function leaveListener(event: Event) {\n      cancelEvent();\n    }\n\n    function onMousedown(event: MouseEvent) {\n      event.preventDefault();\n      isResizing.value = true;\n      rootRef.value.addEventListener('mousemove', moveListener);\n      rootRef.value.addEventListener('mouseup', upListener);\n      rootRef.value.addEventListener('mouseleave', leaveListener);\n    }\n\n    useRender(() => {\n      return (\n        <>\n          <div class={classes.value} ref={rootRef}>\n            <div\n              class={'y-divide-panel__top-container'}\n              style={topStyles.value}\n            >\n              {slots.default?.()}\n            </div>\n            {\n              (secondarySlot.value = slots.secondary && (\n                <>\n                  <div\n                    class=\"y-divide-panel__divider\"\n                    style={{\n                      position: 'absolute',\n                      inset: `${contentRate.value}% 0 0 0`,\n                    }}\n                    onMousedown={onMousedown}\n                  >\n                    <div class=\"y-divide-panel__divider-line\"></div>\n                  </div>\n                  <div\n                    class={'y-divide-panel__secondary-container'}\n                    style={{\n                      position: 'absolute',\n                      inset: `${contentRate.value}% 0 0 0`,\n                    }}\n                  >\n                    {slots.secondary?.()}\n                  </div>\n                </>\n              ))\n            }\n          </div>\n        </>\n      );\n    });\n\n    return {\n      activeSecondary,\n    };\n  },\n});\n\nexport type YDividePanel = InstanceType<typeof YDividePanel>;\n"],"mappings":"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"}
+{"version":3,"file":"YDividePanel.mjs","names":["computed","defineComponent","ref","watch","useRender","YDividePanel","name","setup","props","_ref","slots","contentRate","isResizing","secondarySlot","activeSecondary","rootRef","neo","value","topStyles","inset","position","classes","moveListener","event","mouseEvent","containerRect","getBoundingClientRect","requestAnimationFrame","Math","min","max","clientY","y","height","cancelEvent","removeEventListener","upListener","leaveListener","onMousedown","preventDefault","addEventListener","_createVNode","_Fragment","default","secondary"],"sources":["../../../src/components/panel/YDividePanel.tsx"],"sourcesContent":["import { type CSSProperties, computed, defineComponent, ref, watch } from 'vue';\r\n\r\nimport { useRender } from '@/composables/component';\r\n\r\nimport './YDividePanel.scss';\r\n\r\nexport const YDividePanel = defineComponent({\r\n  name: 'YDividePanel',\r\n  setup(props, { slots }) {\r\n    const contentRate = ref(50);\r\n    const isResizing = ref(false);\r\n    const secondarySlot = ref();\r\n    const activeSecondary = ref(false);\r\n    const rootRef = ref();\r\n\r\n    watch(secondarySlot, (neo) => {\r\n      activeSecondary.value = !!neo;\r\n    });\r\n\r\n    const topStyles = computed<CSSProperties>(() => {\r\n      let inset = '0 0';\r\n      if (activeSecondary.value) {\r\n        inset = `0 0 ${100 - contentRate.value}% 0`;\r\n      }\r\n      return {\r\n        position: 'absolute',\r\n        inset,\r\n      };\r\n    });\r\n\r\n    const classes = computed(() => {\r\n      return {\r\n        'y-divide-panel': true,\r\n        'y-divide-panel--resizing': isResizing.value,\r\n      };\r\n    });\r\n\r\n    function moveListener(event: Event) {\r\n      const mouseEvent = event as MouseEvent;\r\n      const containerRect = rootRef.value.getBoundingClientRect();\r\n      requestAnimationFrame(() => {\r\n        contentRate.value = Math.min(\r\n          Math.max(\r\n            10,\r\n            ((mouseEvent.clientY - containerRect.y) / containerRect.height) *\r\n              100,\r\n          ),\r\n          90,\r\n        );\r\n      });\r\n    }\r\n\r\n    function cancelEvent() {\r\n      isResizing.value = false;\r\n      rootRef.value.removeEventListener('mousemove', moveListener);\r\n      rootRef.value.removeEventListener('mouseup', upListener);\r\n      rootRef.value.removeEventListener('mouseleave', leaveListener);\r\n    }\r\n\r\n    function upListener(event: Event) {\r\n      cancelEvent();\r\n    }\r\n\r\n    function leaveListener(event: Event) {\r\n      cancelEvent();\r\n    }\r\n\r\n    function onMousedown(event: MouseEvent) {\r\n      event.preventDefault();\r\n      isResizing.value = true;\r\n      rootRef.value.addEventListener('mousemove', moveListener);\r\n      rootRef.value.addEventListener('mouseup', upListener);\r\n      rootRef.value.addEventListener('mouseleave', leaveListener);\r\n    }\r\n\r\n    useRender(() => {\r\n      return (\r\n        <>\r\n          <div class={classes.value} ref={rootRef}>\r\n            <div\r\n              class={'y-divide-panel__top-container'}\r\n              style={topStyles.value}\r\n            >\r\n              {slots.default?.()}\r\n            </div>\r\n            {\r\n              (secondarySlot.value = slots.secondary && (\r\n                <>\r\n                  <div\r\n                    class=\"y-divide-panel__divider\"\r\n                    style={{\r\n                      position: 'absolute',\r\n                      inset: `${contentRate.value}% 0 0 0`,\r\n                    }}\r\n                    onMousedown={onMousedown}\r\n                  >\r\n                    <div class=\"y-divide-panel__divider-line\"></div>\r\n                  </div>\r\n                  <div\r\n                    class={'y-divide-panel__secondary-container'}\r\n                    style={{\r\n                      position: 'absolute',\r\n                      inset: `${contentRate.value}% 0 0 0`,\r\n                    }}\r\n                  >\r\n                    {slots.secondary?.()}\r\n                  </div>\r\n                </>\r\n              ))\r\n            }\r\n          </div>\r\n        </>\r\n      );\r\n    });\r\n\r\n    return {\r\n      activeSecondary,\r\n    };\r\n  },\r\n});\r\n\r\nexport type YDividePanel = InstanceType<typeof YDividePanel>;\r\n"],"mappings":"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"}

package/lib/components/plate/YPlate.mjs

@@ -4,8 +4,8 @@ import { useRender } from "../../composables/component.mjs";
 import { defineComponent } from "../../util/component/index.mjs";
 import "./YPlate.scss";
 
-/**
- * # Base Component
+/**
+ * # Base Component
  */
 export const YPlate = defineComponent({
   name: 'YPlate',

package/lib/components/plate/YPlate.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YPlate.mjs","names":["computed","useRender","defineComponent","YPlate","name","props","variation","Object","setup","classes","_createVNode","value"],"sources":["../../../src/components/plate/YPlate.tsx"],"sourcesContent":["import { type PropType, computed } from 'vue';\n\nimport { useRender } from '@/composables/component';\nimport { defineComponent } from '@/util/component';\n\nimport './YPlate.scss';\n\n/**\n * # Base Component\n */\nexport const YPlate = defineComponent({\n  name: 'YPlate',\n  props: {\n    variation: Object as PropType<Record<string, any>>,\n  },\n  setup() {\n    const classes = computed<Record<string, boolean>>(() => {\n      return {\n        'y-plate': true,\n      };\n    });\n\n    useRender(() => {\n      return <div class={classes.value}></div>;\n    });\n  },\n});\n\nexport type YPlate = InstanceType<typeof YPlate>;\n"],"mappings":";AAAA,SAAwBA,QAAQ,QAAQ,KAAK;AAAC,SAErCC,SAAS;AAAA,SACTC,eAAe;AAExB;;AAEA;AACA;AACA;AACA,OAAO,MAAMC,MAAM,GAAGD,eAAe,CAAC;EACpCE,IAAI,EAAE,QAAQ;EACdC,KAAK,EAAE;IACLC,SAAS,EAAEC;EACb,CAAC;EACDC,KAAKA,CAAA,EAAG;IACN,MAAMC,OAAO,GAAGT,QAAQ,CAA0B,MAAM;MACtD,OAAO;QACL,SAAS,EAAE;MACb,CAAC;IACH,CAAC,CAAC;IAEFC,SAAS,CAAC,MAAM;MACd,OAAAS,YAAA;QAAA,SAAmBD,OAAO,CAACE;MAAK;IAClC,CAAC,CAAC;EACJ;AACF,CAAC,CAAC"}
+{"version":3,"file":"YPlate.mjs","names":["computed","useRender","defineComponent","YPlate","name","props","variation","Object","setup","classes","_createVNode","value"],"sources":["../../../src/components/plate/YPlate.tsx"],"sourcesContent":["import { type PropType, computed } from 'vue';\r\n\r\nimport { useRender } from '@/composables/component';\r\nimport { defineComponent } from '@/util/component';\r\n\r\nimport './YPlate.scss';\r\n\r\n/**\r\n * # Base Component\r\n */\r\nexport const YPlate = defineComponent({\r\n  name: 'YPlate',\r\n  props: {\r\n    variation: Object as PropType<Record<string, any>>,\r\n  },\r\n  setup() {\r\n    const classes = computed<Record<string, boolean>>(() => {\r\n      return {\r\n        'y-plate': true,\r\n      };\r\n    });\r\n\r\n    useRender(() => {\r\n      return <div class={classes.value}></div>;\r\n    });\r\n  },\r\n});\r\n\r\nexport type YPlate = InstanceType<typeof YPlate>;\r\n"],"mappings":";AAAA,SAAwBA,QAAQ,QAAQ,KAAK;AAAC,SAErCC,SAAS;AAAA,SACTC,eAAe;AAExB;;AAEA;AACA;AACA;AACA,OAAO,MAAMC,MAAM,GAAGD,eAAe,CAAC;EACpCE,IAAI,EAAE,QAAQ;EACdC,KAAK,EAAE;IACLC,SAAS,EAAEC;EACb,CAAC;EACDC,KAAKA,CAAA,EAAG;IACN,MAAMC,OAAO,GAAGT,QAAQ,CAA0B,MAAM;MACtD,OAAO;QACL,SAAS,EAAE;MACb,CAAC;IACH,CAAC,CAAC;IAEFC,SAAS,CAAC,MAAM;MACd,OAAAS,YAAA;QAAA,SAAmBD,OAAO,CAACE;MAAK;IAClC,CAAC,CAAC;EACJ;AACF,CAAC,CAAC"}

package/lib/components/progress-bar/YProgressBar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YProgressBar.mjs","names":["computed","useRender","useProgress","isColorValue","defineComponent","YProgressBar","name","props","modelValue","type","Number","rounded","Boolean","height","noRewindTransition","outlined","innerText","color","String","default","textColor","outlineColor","indeterminate","reverse","setup","_ref","slots","numValue","delta","classes","noTransition","value","leadColor","styles","minWidth","width","_createVNode","undefined","_createTextVNode"],"sources":["../../../src/components/progress-bar/YProgressBar.tsx"],"sourcesContent":["import { type PropType, computed, shallowRef } from 'vue';\n\nimport { useRender } from '@/composables';\nimport { useProgress } from '@/composables/progress';\nimport { isColorValue } from '@/util/color';\nimport { defineComponent } from '@/util/component';\n\nimport './YProgressBar.scss';\n\nexport const YProgressBar = defineComponent({\n  name: 'YProgressBar',\n  props: {\n    modelValue: {\n      type: Number as PropType<number>,\n    },\n    rounded: {\n      type: Boolean as PropType<boolean>,\n    },\n    height: {\n      type: Number as PropType<number>,\n    },\n    noRewindTransition: {\n      type: Boolean as PropType<boolean>,\n    },\n    outlined: {\n      type: Boolean as PropType<boolean>,\n    },\n    innerText: {\n      type: Boolean as PropType<boolean>,\n    },\n    color: {\n      type: String as PropType<string>,\n      default: 'primary',\n    },\n    textColor: {\n      type: String as PropType<string>,\n    },\n    outlineColor: {\n      type: String as PropType<string>,\n    },\n    indeterminate: Boolean,\n    reverse: Boolean,\n  },\n  setup(props, { slots }) {\n    const { numValue, delta } = useProgress(props);\n\n    const classes = computed(() => {\n      let noTransition = false;\n      if (props.noRewindTransition && delta.value < 0) {\n        noTransition = true;\n      }\n\n      return {\n        'y-progress--no-trans': noTransition,\n        'y-progress--outlined': props.outlined,\n        'y-progress--indeterminate': props.indeterminate,\n        'y-progress-bar--rounded': props.rounded,\n        'y-progress-bar--reverse': props.reverse,\n      };\n    });\n\n    const leadColor = computed(() => {\n      let color = props.color ?? '';\n      if (!isColorValue(color)) {\n        color = `var(--y-theme-${color})`;\n      }\n      return color;\n    });\n\n    const styles = computed(() => {\n      let minWidth;\n      if (props.innerText && numValue.value < 5 && numValue.value > 0) {\n        minWidth = '2rem';\n      }\n      return {\n        width: `${numValue.value}%`,\n        minWidth,\n      };\n    });\n\n    useRender(() => (\n      <div\n        class={{ 'y-progress y-progress-bar': true, ...classes.value }}\n        role=\"progressbar\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        aria-valuenow={numValue.value}\n        style={{\n          '--y-progress-bar__height':\n            props.height !== undefined ? `${props.height}px` : undefined,\n          '--y-progress-bar__outline-color':\n            props.outlineColor !== undefined ? props.outlineColor : undefined,\n          '--y-progress-bar__color': leadColor.value,\n          '--y-progress-bar__value': numValue.value,\n        }}\n      >\n        <div class=\"y-progress__track\"></div>\n        <div class=\"y-progress__tube\">\n          <div class=\"y-progress__lead\" style={styles.value}>\n            {slots['lead-inner']\n              ? slots['lead-inner']()\n              : props.innerText && (\n                  <div\n                    class={{\n                      'y-progress__lead-inner': true,\n                      'y-progress__lead-inner--fixed': numValue.value < 3,\n                    }}\n                    style={{ color: props.textColor }}\n                  >\n                    <span>{numValue} %</span>\n                  </div>\n                )}\n          </div>\n        </div>\n      </div>\n    ));\n\n    return {\n      numValue,\n      delta,\n    };\n  },\n});\n\nexport type YProgressBar = InstanceType<typeof YProgressBar>;\n"],"mappings":"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"}
+{"version":3,"file":"YProgressBar.mjs","names":["computed","useRender","useProgress","isColorValue","defineComponent","YProgressBar","name","props","modelValue","type","Number","rounded","Boolean","height","noRewindTransition","outlined","innerText","color","String","default","textColor","outlineColor","indeterminate","reverse","setup","_ref","slots","numValue","delta","classes","noTransition","value","leadColor","styles","minWidth","width","_createVNode","undefined","_createTextVNode"],"sources":["../../../src/components/progress-bar/YProgressBar.tsx"],"sourcesContent":["import { type PropType, computed, shallowRef } from 'vue';\r\n\r\nimport { useRender } from '@/composables';\r\nimport { useProgress } from '@/composables/progress';\r\nimport { isColorValue } from '@/util/color';\r\nimport { defineComponent } from '@/util/component';\r\n\r\nimport './YProgressBar.scss';\r\n\r\nexport const YProgressBar = defineComponent({\r\n  name: 'YProgressBar',\r\n  props: {\r\n    modelValue: {\r\n      type: Number as PropType<number>,\r\n    },\r\n    rounded: {\r\n      type: Boolean as PropType<boolean>,\r\n    },\r\n    height: {\r\n      type: Number as PropType<number>,\r\n    },\r\n    noRewindTransition: {\r\n      type: Boolean as PropType<boolean>,\r\n    },\r\n    outlined: {\r\n      type: Boolean as PropType<boolean>,\r\n    },\r\n    innerText: {\r\n      type: Boolean as PropType<boolean>,\r\n    },\r\n    color: {\r\n      type: String as PropType<string>,\r\n      default: 'primary',\r\n    },\r\n    textColor: {\r\n      type: String as PropType<string>,\r\n    },\r\n    outlineColor: {\r\n      type: String as PropType<string>,\r\n    },\r\n    indeterminate: Boolean,\r\n    reverse: Boolean,\r\n  },\r\n  setup(props, { slots }) {\r\n    const { numValue, delta } = useProgress(props);\r\n\r\n    const classes = computed(() => {\r\n      let noTransition = false;\r\n      if (props.noRewindTransition && delta.value < 0) {\r\n        noTransition = true;\r\n      }\r\n\r\n      return {\r\n        'y-progress--no-trans': noTransition,\r\n        'y-progress--outlined': props.outlined,\r\n        'y-progress--indeterminate': props.indeterminate,\r\n        'y-progress-bar--rounded': props.rounded,\r\n        'y-progress-bar--reverse': props.reverse,\r\n      };\r\n    });\r\n\r\n    const leadColor = computed(() => {\r\n      let color = props.color ?? '';\r\n      if (!isColorValue(color)) {\r\n        color = `var(--y-theme-${color})`;\r\n      }\r\n      return color;\r\n    });\r\n\r\n    const styles = computed(() => {\r\n      let minWidth;\r\n      if (props.innerText && numValue.value < 5 && numValue.value > 0) {\r\n        minWidth = '2rem';\r\n      }\r\n      return {\r\n        width: `${numValue.value}%`,\r\n        minWidth,\r\n      };\r\n    });\r\n\r\n    useRender(() => (\r\n      <div\r\n        class={{ 'y-progress y-progress-bar': true, ...classes.value }}\r\n        role=\"progressbar\"\r\n        aria-valuemin=\"0\"\r\n        aria-valuemax=\"100\"\r\n        aria-valuenow={numValue.value}\r\n        style={{\r\n          '--y-progress-bar__height':\r\n            props.height !== undefined ? `${props.height}px` : undefined,\r\n          '--y-progress-bar__outline-color':\r\n            props.outlineColor !== undefined ? props.outlineColor : undefined,\r\n          '--y-progress-bar__color': leadColor.value,\r\n          '--y-progress-bar__value': numValue.value,\r\n        }}\r\n      >\r\n        <div class=\"y-progress__track\"></div>\r\n        <div class=\"y-progress__tube\">\r\n          <div class=\"y-progress__lead\" style={styles.value}>\r\n            {slots['lead-inner']\r\n              ? slots['lead-inner']()\r\n              : props.innerText && (\r\n                  <div\r\n                    class={{\r\n                      'y-progress__lead-inner': true,\r\n                      'y-progress__lead-inner--fixed': numValue.value < 3,\r\n                    }}\r\n                    style={{ color: props.textColor }}\r\n                  >\r\n                    <span>{numValue} %</span>\r\n                  </div>\r\n                )}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    ));\r\n\r\n    return {\r\n      numValue,\r\n      delta,\r\n    };\r\n  },\r\n});\r\n\r\nexport type YProgressBar = InstanceType<typeof YProgressBar>;\r\n"],"mappings":"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"}

package/lib/components/progress-bar/YProgressBar.scss

@@ -1,120 +1,120 @@
-@use '../../styles/settings/variables';
-
-.y-progress {
-  --y-progress-bar__height: 4px;
-  --y-progress-bar__color: var(--y-theme-primary);
-  --y-progress-bar__track-color: rgba(var(--y-theme-surface-variant), 0.74);
-
-  display: flex;
-  position: relative;
-  height: var(--y-progress-bar__height, 4px);
-  color: var(--y-progress-bar__color);
-
-  &-bar--rounded {
-    border-radius: calc(var(--y-progress-bar__height) / 2);
-  }
-
-  &--outlined {
-    --y-progress-bar__outline-color: var(--y-theme-primary);
-    border: 1px solid var(--y-progress-bar__outline-color);
-  }
-
-  &-bar--reverse & {
-    &__track {
-      transform-origin: 0 100%;
-      transform: translateX(100%) scale3d(-1, 1, 1);
-    }
-
-    &__lead {
-      right: 0;
-      position: absolute;
-    }
-  }
-
-  &__tube {
-    border-radius: inherit;
-    overflow: clip;
-    min-width: 0;
-    flex: 1 1;
-    position: relative;
-  }
-
-  &__track {
-    background-color: var(--y-progress-bar__track-color);
-    position: absolute;
-    inset: 0;
-    border-radius: inherit;
-    overflow: clip;
-    color: inherit;
-  }
-
-  &__lead {
-    height: 100%;
-    background-color: var(--y-progress-bar__color);
-    position: relative;
-    transform-origin: left;
-    transition: all 250ms cubic-bezier(0.42, 0.5, 0.51, 1.02);
-  }
-
-  &--indeterminate &__track {
-    &:before {
-      animation: y-progress-bar--indeterminate 2.1s
-        cubic-bezier(0.5, 0.65, 0.62, 0.25) infinite;
-
-      @keyframes y-progress-bar--indeterminate {
-        0% {
-          transform: translate3d(-35%, 0, 0) scale3d(0.35, 1, 1);
-        }
-
-        60% {
-          transform: translate3d(100%, 0, 0) scale3d(0.9, 1, 1);
-        }
-
-        to {
-          transform: translate3d(100%, 0, 0) scale3d(0.9, 1, 1);
-        }
-      }
-    }
-
-    &:after {
-      animation: y-progress-bar--indeterminate-trail 2.1s
-        variables.$basic-transition-timing-function infinite;
-      animation-delay: 1.15s;
-      transform: translate3d(-101%, 0, 0) scaleZ(1);
-
-      @keyframes y-progress-bar--indeterminate-trail {
-        0% {
-          transform: translate3d(-101%, 0, 0) scaleZ(1);
-        }
-
-        60% {
-          transform: translate3d(107%, 0, 0) scale3d(0.01, 1, 1);
-        }
-
-        to {
-          transform: translate3d(107%, 0, 0) scale3d(0.01, 1, 1);
-        }
-      }
-    }
-
-    &:before,
-    &:after {
-      content: '';
-      position: absolute;
-      background: currentColor;
-      transform-origin: 0 0;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-    }
-  }
-
-  &--indeterminate &__lead {
-    visibility: hidden;
-  }
-
-  &--no-trans &__lead {
-    transition: none;
-  }
-}
+@use '../../styles/settings/variables';
+
+.y-progress {
+  --y-progress-bar__height: 4px;
+  --y-progress-bar__color: var(--y-theme-primary);
+  --y-progress-bar__track-color: rgba(var(--y-theme-surface-variant), 0.74);
+
+  display: flex;
+  position: relative;
+  height: var(--y-progress-bar__height, 4px);
+  color: var(--y-progress-bar__color);
+
+  &-bar--rounded {
+    border-radius: calc(var(--y-progress-bar__height) / 2);
+  }
+
+  &--outlined {
+    --y-progress-bar__outline-color: var(--y-theme-primary);
+    border: 1px solid var(--y-progress-bar__outline-color);
+  }
+
+  &-bar--reverse & {
+    &__track {
+      transform-origin: 0 100%;
+      transform: translateX(100%) scale3d(-1, 1, 1);
+    }
+
+    &__lead {
+      right: 0;
+      position: absolute;
+    }
+  }
+
+  &__tube {
+    border-radius: inherit;
+    overflow: clip;
+    min-width: 0;
+    flex: 1 1;
+    position: relative;
+  }
+
+  &__track {
+    background-color: var(--y-progress-bar__track-color);
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    overflow: clip;
+    color: inherit;
+  }
+
+  &__lead {
+    height: 100%;
+    background-color: var(--y-progress-bar__color);
+    position: relative;
+    transform-origin: left;
+    transition: all 250ms cubic-bezier(0.42, 0.5, 0.51, 1.02);
+  }
+
+  &--indeterminate &__track {
+    &:before {
+      animation: y-progress-bar--indeterminate 2.1s
+        cubic-bezier(0.5, 0.65, 0.62, 0.25) infinite;
+
+      @keyframes y-progress-bar--indeterminate {
+        0% {
+          transform: translate3d(-35%, 0, 0) scale3d(0.35, 1, 1);
+        }
+
+        60% {
+          transform: translate3d(100%, 0, 0) scale3d(0.9, 1, 1);
+        }
+
+        to {
+          transform: translate3d(100%, 0, 0) scale3d(0.9, 1, 1);
+        }
+      }
+    }
+
+    &:after {
+      animation: y-progress-bar--indeterminate-trail 2.1s
+        variables.$basic-transition-timing-function infinite;
+      animation-delay: 1.15s;
+      transform: translate3d(-101%, 0, 0) scaleZ(1);
+
+      @keyframes y-progress-bar--indeterminate-trail {
+        0% {
+          transform: translate3d(-101%, 0, 0) scaleZ(1);
+        }
+
+        60% {
+          transform: translate3d(107%, 0, 0) scale3d(0.01, 1, 1);
+        }
+
+        to {
+          transform: translate3d(107%, 0, 0) scale3d(0.01, 1, 1);
+        }
+      }
+    }
+
+    &:before,
+    &:after {
+      content: '';
+      position: absolute;
+      background: currentColor;
+      transform-origin: 0 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+    }
+  }
+
+  &--indeterminate &__lead {
+    visibility: hidden;
+  }
+
+  &--no-trans &__lead {
+    transition: none;
+  }
+}

package/lib/components/progress-ring/YProgressRing.mjs

@@ -30,8 +30,8 @@ export const YProgressRing = defineComponent({
     indeterminate: Boolean,
     // TODO: Like SpinnerRing
     reverse: Boolean,
-    /**
-     * Percent value 0~100
+    /**
+     * Percent value 0~100
      */
     width: {
       type: Number,

package/lib/components/progress-ring/YProgressRing.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YProgressRing.mjs","names":["computed","useRender","useProgress","clamp","isColorValue","defineComponent","toStyleSizeValue","YProgressRing","name","props","modelValue","type","Number","rounded","Boolean","size","default","noRewindTransition","color","String","indeterminate","reverse","width","setup","_ref","slots","circumference","Math","PI","numValue","delta","leadColor","holePath","widthPercent","boxSize","precision","radius","vertices","Array","map","_","i","a","x","cos","y","sin","join","dashOffset","value","classes","noTransition","_createVNode"],"sources":["../../../src/components/progress-ring/YProgressRing.tsx"],"sourcesContent":["import { type PropType, computed } from 'vue';\n\nimport { useRender } from '@/composables/component';\nimport { useProgress } from '@/composables/progress';\nimport { clamp } from '@/util';\nimport { isColorValue } from '@/util/color';\nimport { defineComponent } from '@/util/component';\nimport { toStyleSizeValue } from '@/util/ui';\n\nimport './YProgressRing.scss';\n\nexport const YProgressRing = defineComponent({\n  name: 'YProgressRing',\n  props: {\n    modelValue: {\n      type: Number as PropType<number>,\n    },\n    rounded: {\n      type: Boolean as PropType<boolean>,\n    },\n    size: {\n      type: Number as PropType<number>,\n      default: 32,\n    },\n    noRewindTransition: {\n      type: Boolean as PropType<boolean>,\n    },\n    color: {\n      type: String as PropType<string>,\n      default: 'primary',\n    },\n    indeterminate: Boolean, // TODO: Like SpinnerRing\n    reverse: Boolean,\n    /**\n     * Percent value 0~100\n     */\n    width: {\n      type: Number,\n      default: 20,\n    },\n  },\n  setup(props, { slots }) {\n    const circumference = 2 * Math.PI * 24;\n\n    const { numValue, delta } = useProgress(props);\n\n    const leadColor = computed(() => {\n      let color = props.color ?? '';\n      if (!isColorValue(color)) {\n        color = `var(--y-theme-${color})`;\n      }\n      return color;\n    });\n\n    const holePath = computed(() => {\n      const widthPercent = clamp(props.width, 1, 100);\n      if (widthPercent === 100) {\n        return '';\n      }\n      const boxSize = 48;\n      const precision = 64;\n      const radius = ((100 - widthPercent) / 100) * (boxSize / 2);\n      const vertices = [...Array(precision)].map((_, i) => {\n        const a = (-i / (precision - 1)) * Math.PI * 2;\n        const x = Math.cos(a) * radius + boxSize / 2;\n        const y = Math.sin(a) * radius + boxSize / 2;\n        return `${x}px ${y}px`;\n      });\n      return `polygon(100% 50%, 100% 100%, 0 100%, 0 0, 100% 0, 100% 50%, ${vertices.join(',')})`;\n    });\n\n    const dashOffset = computed(() => {\n      return circumference - (circumference * numValue.value) / 100;\n    });\n\n    const classes = computed(() => {\n      let noTransition = false;\n      if (props.noRewindTransition && delta.value < 0) {\n        noTransition = true;\n      }\n\n      return {\n        'y-progress--no-trans': noTransition,\n        'y-progress--indeterminate': props.indeterminate,\n        'y-progress-ring--hole': !!holePath.value,\n      };\n    });\n\n    useRender(() => (\n      <div\n        class={{ 'y-progress y-progress-ring': true, ...classes.value }}\n        role=\"progressbar\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        aria-valuenow={numValue.value}\n        style={{\n          '--y-progress-ring__size': toStyleSizeValue(props.size),\n          '--y-progress-ring__color': leadColor.value,\n          '--y-progress-ring__value': numValue.value,\n          '--y-progress-ring__hole-path': holePath.value,\n        }}\n      >\n        <svg\n          class=\"y-progress-ring__tube\"\n          width=\"48\"\n          height=\"48\"\n          viewBox=\"0 0 48 48\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <circle class=\"y-progress-ring__track\" cx=\"24\" cy=\"24\" r=\"24\" />\n          <circle\n            class=\"y-progress-ring__lead\"\n            cx=\"24\"\n            cy=\"24\"\n            r=\"12\"\n            stroke-width=\"24\"\n            stroke-dasharray={circumference / 2}\n            stroke-dashoffset={dashOffset.value / 2}\n          />\n        </svg>\n      </div>\n    ));\n\n    return {\n      numValue,\n      delta,\n    };\n  },\n});\n\nexport type YProgressRing = InstanceType<typeof YProgressRing>;\n"],"mappings":"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"}
+{"version":3,"file":"YProgressRing.mjs","names":["computed","useRender","useProgress","clamp","isColorValue","defineComponent","toStyleSizeValue","YProgressRing","name","props","modelValue","type","Number","rounded","Boolean","size","default","noRewindTransition","color","String","indeterminate","reverse","width","setup","_ref","slots","circumference","Math","PI","numValue","delta","leadColor","holePath","widthPercent","boxSize","precision","radius","vertices","Array","map","_","i","a","x","cos","y","sin","join","dashOffset","value","classes","noTransition","_createVNode"],"sources":["../../../src/components/progress-ring/YProgressRing.tsx"],"sourcesContent":["import { type PropType, computed } from 'vue';\r\n\r\nimport { useRender } from '@/composables/component';\r\nimport { useProgress } from '@/composables/progress';\r\nimport { clamp } from '@/util';\r\nimport { isColorValue } from '@/util/color';\r\nimport { defineComponent } from '@/util/component';\r\nimport { toStyleSizeValue } from '@/util/ui';\r\n\r\nimport './YProgressRing.scss';\r\n\r\nexport const YProgressRing = defineComponent({\r\n  name: 'YProgressRing',\r\n  props: {\r\n    modelValue: {\r\n      type: Number as PropType<number>,\r\n    },\r\n    rounded: {\r\n      type: Boolean as PropType<boolean>,\r\n    },\r\n    size: {\r\n      type: Number as PropType<number>,\r\n      default: 32,\r\n    },\r\n    noRewindTransition: {\r\n      type: Boolean as PropType<boolean>,\r\n    },\r\n    color: {\r\n      type: String as PropType<string>,\r\n      default: 'primary',\r\n    },\r\n    indeterminate: Boolean, // TODO: Like SpinnerRing\r\n    reverse: Boolean,\r\n    /**\r\n     * Percent value 0~100\r\n     */\r\n    width: {\r\n      type: Number,\r\n      default: 20,\r\n    },\r\n  },\r\n  setup(props, { slots }) {\r\n    const circumference = 2 * Math.PI * 24;\r\n\r\n    const { numValue, delta } = useProgress(props);\r\n\r\n    const leadColor = computed(() => {\r\n      let color = props.color ?? '';\r\n      if (!isColorValue(color)) {\r\n        color = `var(--y-theme-${color})`;\r\n      }\r\n      return color;\r\n    });\r\n\r\n    const holePath = computed(() => {\r\n      const widthPercent = clamp(props.width, 1, 100);\r\n      if (widthPercent === 100) {\r\n        return '';\r\n      }\r\n      const boxSize = 48;\r\n      const precision = 64;\r\n      const radius = ((100 - widthPercent) / 100) * (boxSize / 2);\r\n      const vertices = [...Array(precision)].map((_, i) => {\r\n        const a = (-i / (precision - 1)) * Math.PI * 2;\r\n        const x = Math.cos(a) * radius + boxSize / 2;\r\n        const y = Math.sin(a) * radius + boxSize / 2;\r\n        return `${x}px ${y}px`;\r\n      });\r\n      return `polygon(100% 50%, 100% 100%, 0 100%, 0 0, 100% 0, 100% 50%, ${vertices.join(',')})`;\r\n    });\r\n\r\n    const dashOffset = computed(() => {\r\n      return circumference - (circumference * numValue.value) / 100;\r\n    });\r\n\r\n    const classes = computed(() => {\r\n      let noTransition = false;\r\n      if (props.noRewindTransition && delta.value < 0) {\r\n        noTransition = true;\r\n      }\r\n\r\n      return {\r\n        'y-progress--no-trans': noTransition,\r\n        'y-progress--indeterminate': props.indeterminate,\r\n        'y-progress-ring--hole': !!holePath.value,\r\n      };\r\n    });\r\n\r\n    useRender(() => (\r\n      <div\r\n        class={{ 'y-progress y-progress-ring': true, ...classes.value }}\r\n        role=\"progressbar\"\r\n        aria-valuemin=\"0\"\r\n        aria-valuemax=\"100\"\r\n        aria-valuenow={numValue.value}\r\n        style={{\r\n          '--y-progress-ring__size': toStyleSizeValue(props.size),\r\n          '--y-progress-ring__color': leadColor.value,\r\n          '--y-progress-ring__value': numValue.value,\r\n          '--y-progress-ring__hole-path': holePath.value,\r\n        }}\r\n      >\r\n        <svg\r\n          class=\"y-progress-ring__tube\"\r\n          width=\"48\"\r\n          height=\"48\"\r\n          viewBox=\"0 0 48 48\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n        >\r\n          <circle class=\"y-progress-ring__track\" cx=\"24\" cy=\"24\" r=\"24\" />\r\n          <circle\r\n            class=\"y-progress-ring__lead\"\r\n            cx=\"24\"\r\n            cy=\"24\"\r\n            r=\"12\"\r\n            stroke-width=\"24\"\r\n            stroke-dasharray={circumference / 2}\r\n            stroke-dashoffset={dashOffset.value / 2}\r\n          />\r\n        </svg>\r\n      </div>\r\n    ));\r\n\r\n    return {\r\n      numValue,\r\n      delta,\r\n    };\r\n  },\r\n});\r\n\r\nexport type YProgressRing = InstanceType<typeof YProgressRing>;\r\n"],"mappings":"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"}

package/lib/components/progress-ring/YProgressRing.scss

@@ -1,38 +1,38 @@
-.y-progress-ring {
-  --y-progress-ring__size: 32px;
-  --y-progress-ring__color: var(--y-theme-primary);
-  --y-progress-ring__track-color: rgba(
-    var(--y-theme-surface-variant-rgb),
-    0.74
-  );
-
-  width: var(--y-progress-ring__size, 32px);
-  height: var(--y-progress-ring__size, 32px);
-
-  &__tube {
-    width: 100%;
-    height: 100%;
-    transform: rotate(-90deg);
-  }
-
-  &__lead {
-    fill: none;
-    stroke: var(--y-progress-ring__color, var(--y-theme-primary));
-    transform-origin: left;
-    transition: all 250ms cubic-bezier(0.42, 0.5, 0.51, 1.02);
-  }
-
-  &__track {
-    fill: var(--y-progress-ring__track-color);
-    stroke: none;
-  }
-
-  &--hole &__lead,
-  &--hole &__track {
-    clip-path: var(--y-progress-ring__hole-path);
-  }
-
-  &--no-trans &__lead {
-    transition: none;
-  }
-}
+.y-progress-ring {
+  --y-progress-ring__size: 32px;
+  --y-progress-ring__color: var(--y-theme-primary);
+  --y-progress-ring__track-color: rgba(
+    var(--y-theme-surface-variant-rgb),
+    0.74
+  );
+
+  width: var(--y-progress-ring__size, 32px);
+  height: var(--y-progress-ring__size, 32px);
+
+  &__tube {
+    width: 100%;
+    height: 100%;
+    transform: rotate(-90deg);
+  }
+
+  &__lead {
+    fill: none;
+    stroke: var(--y-progress-ring__color, var(--y-theme-primary));
+    transform-origin: left;
+    transition: all 250ms cubic-bezier(0.42, 0.5, 0.51, 1.02);
+  }
+
+  &__track {
+    fill: var(--y-progress-ring__track-color);
+    stroke: none;
+  }
+
+  &--hole &__lead,
+  &--hole &__track {
+    clip-path: var(--y-progress-ring__hole-path);
+  }
+
+  &--no-trans &__lead {
+    transition: none;
+  }
+}

package/lib/components/progress-ring/index.mjs.map

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

package/lib/components/select/YSelect.mjs

@@ -262,7 +262,7 @@ export const YSelect = defineComponent({
             "modelValue": opened.value,
             "onUpdate:modelValue": $event => opened.value = $event
           }), {
-            default: slots.menu ? () => slots.menu() : () => _createVNode(YCard, {
+            default: slots.menu ? () => slots.menu?.() : () => _createVNode(YCard, {
               "ref": cardRef
             }, {
               default: () => [slots['menu-prepend']?.(), items.value.length > 0 ? _createVNode(YList, {