yuyeon 0.0.14 → 0.0.16

package/lib/components/menu/YMenu.scss

@@ -1,7 +1,22 @@
-.y-menu {
-  font-size: 0.875rem;
-
-  &__content {
-    //
-  }
-}
+.y-menu {
+  font-size: 0.875rem;
+  $elevation-fallback: 1px 1px 8px -1px rgba(0, 0, 0, 0.14), 4px 4px 24px -4px rgba(0, 0, 0, 0.28), -2px -2px 8px -2px rgba(0, 0, 0, 0.14);
+
+  --y-menu__border-radius: 8px;
+  --y-menu__elevation: var(--y-elevation--level2);
+
+  &__content {
+    box-shadow: var(--y-menu__elevation, #{$elevation-fallback});
+    border-radius: var(--y-menu__border-radius);
+    background: rgba(var(--y-theme-surface), 1);
+    display: flex;
+    flex-direction: column;
+
+    > .y-card {
+      background: rgb(var(--y-theme-surface));
+      border-radius: inherit;
+      overflow: auto;
+      height: 100%;
+    }
+  }
+}

package/lib/components/pagination/YPagination.mjs

@@ -33,7 +33,7 @@ export const pressYPaginationProps = propsFactory({
   },
   color: String,
   activeColor: String,
-  buttonVariations: [String],
+  buttonVariation: [String],
   align: {
     type: String,
     default: 'center'
@@ -42,7 +42,7 @@ export const pressYPaginationProps = propsFactory({
   // lastIcon: [String],
   // prevIcon: [String],
   // nextIcon: [String],
-}, 'y-pagination');
+}, 'YPagination');
 export const YPagination = defineComponent({
   name: 'YPagination',
   components: {
@@ -52,7 +52,7 @@ export const YPagination = defineComponent({
     ...pressYPaginationProps()
   },
   emits: {
-    'update:model-value': value => true,
+    'update:modelValue': value => true,
     change: (value, control) => true
   },
   setup(props, _ref) {
@@ -96,7 +96,7 @@ export const YPagination = defineComponent({
       return {
         first: {
           disabled: prevDisabled,
-          variation: props.buttonVariations,
+          variation: props.buttonVariation,
           onClick: e => {
             e.preventDefault();
             page.value = 1;
@@ -105,7 +105,7 @@ export const YPagination = defineComponent({
         },
         prev: {
           disabled: prevDisabled,
-          variation: props.buttonVariations,
+          variation: props.buttonVariation,
           onClick: e => {
             e.preventDefault();
             const to = Math.max(1, page.value - 1);
@@ -115,7 +115,7 @@ export const YPagination = defineComponent({
         },
         next: {
           disabled: nextDisabled,
-          variation: props.buttonVariations,
+          variation: props.buttonVariation,
           onClick: e => {
             e.preventDefault();
             const to = Math.min(+length.value, page.value + 1);
@@ -125,7 +125,7 @@ export const YPagination = defineComponent({
         },
         last: {
           disabled: nextDisabled,
-          variation: props.buttonVariations,
+          variation: props.buttonVariation,
           onClick: e => {
             e.preventDefault();
             const to = +length.value;
@@ -196,7 +196,7 @@ export const YPagination = defineComponent({
               ellipsis: false,
               disabled: !!props.disabled || +props.length < 2,
               color: active ? props.activeColor : props.color,
-              variation: props.buttonVariations,
+              variation: props.buttonVariation,
               onClick: e => changePage(e, item)
             }
           };

package/lib/components/pagination/YPagination.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YPagination.mjs","names":["computed","defineComponent","shallowRef","useModelDuplex","useRender","useRefs","useResizeObserver","getRangeArr","toStyleSizeValue","propsFactory","YButton","YIconPageControl","pressYPaginationProps","start","type","Number","String","default","modelValue","props","disabled","Boolean","length","validator","val","totalVisible","showEndButton","gap","color","activeColor","buttonVariations","align","YPagination","name","components","emits","value","change","control","setup","_ref","slots","emit","page","parseInt","itemCount","resizeObservedRef","entries","target","contentRect","firstItem","querySelector","listWidth","width","itemWidth","offsetWidth","parseFloat","getComputedStyle","marginRight","calcItemCount","fixedCount","fixedWidth","count","Math","max","floor","toFixed","innerWidth","controls","prevDisabled","nextDisabled","first","variation","onClick","e","preventDefault","prev","to","next","min","last","range","isNaN","MAX_SAFE_INTEGER","even","middle","left","right","rangeLength","rangeStart","ceil","refs","updateRef","changePage","event","arguments","undefined","items","map","item","index","ref","active","key","ellipsis","styles","_createVNode"],"sources":["../../../src/components/pagination/YPagination.tsx"],"sourcesContent":["import {\n  ComponentPublicInstance,\n  PropType,\n  computed,\n  defineComponent,\n  shallowRef,\n} from 'vue';\n\nimport { useModelDuplex } from '../../composables/communication';\nimport { useRender } from '../../composables/component';\nimport { useRefs } from '../../composables/ref';\nimport { useResizeObserver } from '../../composables/resize-observer';\nimport { getRangeArr } from '../../util/common';\nimport { toStyleSizeValue } from '../../util/ui';\nimport { propsFactory } from '../../util/vue-component';\nimport { YButton } from '../button';\nimport { YIconPageControl } from '../icons/YIconPageControl';\n\nimport './YPagination.scss';\n\nexport const pressYPaginationProps = propsFactory(\n  {\n    start: {\n      type: [Number, String],\n      default: 1,\n    },\n    modelValue: {\n      type: Number,\n      default: (props: any) => props.start as number,\n    },\n    disabled: Boolean,\n    length: {\n      type: [Number, String],\n      default: 1,\n      validator: (val: number) => val % 1 === 0,\n    },\n    totalVisible: [Number, String],\n    showEndButton: Boolean,\n    gap: {\n      type: [String, Number],\n      default: 4,\n    },\n    color: String,\n    activeColor: String,\n    buttonVariations: [String],\n    align: {\n      type: String as PropType<'start' | 'center' | 'end'>,\n      default: 'center',\n    },\n    // firstIcon: [String],\n    // lastIcon: [String],\n    // prevIcon: [String],\n    // nextIcon: [String],\n  },\n  'y-pagination',\n);\n\nexport const YPagination = defineComponent({\n  name: 'YPagination',\n  components: {\n    YButton,\n  },\n  props: {\n    ...pressYPaginationProps(),\n  },\n  emits: {\n    'update:model-value': (value: number) => true,\n    change: (value: number, control?: string) => true,\n  },\n  setup(props, { slots, emit }) {\n    const page = useModelDuplex(props);\n\n    const length = computed(() => parseInt(props.length as string, 10));\n    const start = computed(() => parseInt(props.start as string, 10));\n\n    const itemCount = shallowRef(-1);\n\n    const { resizeObservedRef } = useResizeObserver((entries) => {\n      if (1 > entries.length) return;\n      const { target, contentRect } = entries[0];\n\n      const firstItem = target.querySelector(\n        '.y-pagination__list > *',\n      ) as HTMLElement;\n      if (firstItem) {\n        const listWidth = contentRect.width;\n        const itemWidth =\n          firstItem.offsetWidth +\n          parseFloat(getComputedStyle(firstItem).marginRight) * 2;\n        itemCount.value = calcItemCount(listWidth, itemWidth);\n      }\n    });\n\n    function calcItemCount(listWidth: number, itemWidth: number) {\n      const fixedCount = props.showEndButton ? 5 : 3;\n      const gap = +(props.gap ?? 4);\n      const fixedWidth = (itemWidth + gap) * fixedCount - gap;\n      const count = Math.max(\n        0,\n        Math.floor(+((listWidth - fixedWidth) / (itemWidth + gap)).toFixed(2)),\n      );\n      return count;\n    }\n\n    const totalVisible = computed(() => {\n      if (props.totalVisible) return parseInt(props.totalVisible as string, 10);\n      else if (itemCount.value >= 0) return itemCount.value;\n      return calcItemCount(innerWidth, 58);\n    });\n\n    const controls = computed(() => {\n      const prevDisabled = !!props.disabled || page.value <= start.value;\n      const nextDisabled =\n        !!props.disabled || page.value >= start.value + length.value - 1;\n      return {\n        first: {\n          disabled: prevDisabled,\n          variation: props.buttonVariations,\n          onClick: (e: MouseEvent) => {\n            e.preventDefault();\n            page.value = 1;\n            emit('change', 1, 'first');\n          },\n        },\n        prev: {\n          disabled: prevDisabled,\n          variation: props.buttonVariations,\n          onClick: (e: MouseEvent) => {\n            e.preventDefault();\n            const to = Math.max(1, page.value - 1);\n            page.value = to;\n            emit('change', to, 'prev');\n          },\n        },\n        next: {\n          disabled: nextDisabled,\n          variation: props.buttonVariations,\n          onClick: (e: MouseEvent) => {\n            e.preventDefault();\n            const to = Math.min(+length.value, page.value + 1);\n            page.value = to;\n            emit('change', to, 'next');\n          },\n        },\n        last: {\n          disabled: nextDisabled,\n          variation: props.buttonVariations,\n          onClick: (e: MouseEvent) => {\n            e.preventDefault();\n            const to = +length.value;\n            page.value = +length.value;\n            emit('change', to, 'last');\n          },\n        },\n      };\n    });\n\n    const range = computed(() => {\n      if (\n        length.value <= 0 ||\n        isNaN(length.value) ||\n        length.value > Number.MAX_SAFE_INTEGER\n      ) {\n        return [];\n      }\n      if (totalVisible.value <= 1) {\n        return [page.value];\n      }\n      if (length.value <= totalVisible.value) {\n        return getRangeArr(length.value, start.value);\n      }\n      const even = totalVisible.value % 2 === 0;\n      const middle = even\n        ? totalVisible.value / 2\n        : Math.floor(totalVisible.value / 2);\n      const left = even ? middle : middle + 1;\n      const right = length.value - middle;\n\n      if (left - page.value >= 0) {\n        return [\n          ...getRangeArr(Math.max(1, totalVisible.value - 1), start.value),\n          'ellipsis',\n          length.value,\n        ];\n      } else if (page.value - right >= (even ? 1 : 0)) {\n        const rangeLength = totalVisible.value - 1;\n        const rangeStart = length.value - rangeLength + start.value;\n        return [\n          start.value,\n          'ellipsis',\n          ...getRangeArr(rangeLength, rangeStart),\n        ];\n      } else {\n        const rangeLength = Math.max(1, totalVisible.value - 3);\n        const rangeStart =\n          rangeLength === 1\n            ? page.value\n            : page.value - Math.ceil(rangeLength / 2) + start.value;\n        return [\n          start.value,\n          'ellipsis',\n          ...getRangeArr(rangeLength, rangeStart),\n          'ellipsis',\n          length.value,\n        ];\n      }\n    });\n\n    const { refs, updateRef } = useRefs<ComponentPublicInstance>();\n\n    function changePage(event: Event, to = 1) {\n      event.preventDefault();\n      page.value = to;\n      emit('change', to);\n    }\n\n    const items = computed(() => {\n      return range.value.map((item, index) => {\n        const ref = (e: any) => updateRef(e, index);\n\n        if (item === 'ellipsis') {\n          return {\n            active: false,\n            key: `ellipsis-${index}`,\n            page: item,\n            props: {\n              ref,\n              ellipsis: true,\n              disabled: true, // TODO: skipper\n            },\n          };\n        } else {\n          const active = item === page.value;\n          return {\n            active,\n            key: `item-${item}`,\n            page: item,\n            props: {\n              ref,\n              ellipsis: false,\n              disabled: !!props.disabled || +props.length < 2,\n              color: active ? props.activeColor : props.color,\n              variation: props.buttonVariations,\n              onClick: (e: MouseEvent) => changePage(e, item),\n            },\n          };\n        }\n      });\n    });\n\n    const styles = computed(() => {\n      let gap = undefined;\n      if (props.gap) {\n        const value = +props.gap;\n        if (!isNaN(value)) {\n          gap = toStyleSizeValue(value);\n        } else if (typeof props.gap === 'string') {\n          gap = props.gap;\n        }\n      }\n      return {\n        '--y-pagination__gap': gap,\n      };\n    });\n\n    useRender(() => {\n      return (\n        <div\n          class={[\n            'y-pagination',\n            { [`y-pagination--align-${props.align}`]: props.align !== 'start' },\n          ]}\n          role={'navigation'}\n          style={styles.value}\n          ref={resizeObservedRef}\n        >\n          <ul class={['y-pagination__list']}>\n            {props.showEndButton && (\n              <li key=\"first\" class=\"y-pagination__first\">\n                {slots.first ? (\n                  slots.first(controls.value.first)\n                ) : (\n                  <YButton {...controls.value.first}>\n                    {slots['first-icon'] ? (\n                      slots['first-icon']()\n                    ) : (\n                      <YIconPageControl type={'first'}></YIconPageControl>\n                    )}\n                  </YButton>\n                )}\n              </li>\n            )}\n            <li key=\"prev\" class=\"y-pagination__prev\">\n              {slots.prev ? (\n                slots.prev(controls.value.prev)\n              ) : (\n                <YButton {...controls.value.prev}>\n                  {slots['prev-icon'] ? (\n                    slots['prev-icon']()\n                  ) : (\n                    <YIconPageControl type={'prev'}></YIconPageControl>\n                  )}\n                </YButton>\n              )}\n            </li>\n            {items.value.map((item, index) => {\n              return (\n                <li\n                  key={item.key}\n                  class={[\n                    'y-pagination__item',\n                    { 'y-pagination__item--active': item.active },\n                  ]}\n                >\n                  <YButton {...item.props}>\n                    {item.props.ellipsis\n                      ? slots.ellipsis\n                        ? slots.ellipsis()\n                        : '...'\n                      : item.page}\n                  </YButton>\n                </li>\n              );\n            })}\n            <li key=\"next\" class=\"y-pagination__next\">\n              {slots.next ? (\n                slots.next(controls.value.next)\n              ) : (\n                <YButton {...controls.value.next}>\n                  {slots['next-icon'] ? (\n                    slots['next-icon']()\n                  ) : (\n                    <YIconPageControl type={'next'}></YIconPageControl>\n                  )}\n                </YButton>\n              )}\n            </li>\n            {props.showEndButton && (\n              <li key=\"last\" class=\"y-pagination__last\">\n                {slots.last ? (\n                  slots.last(controls.value.last)\n                ) : (\n                  <YButton {...controls.value.last}>\n                    {slots['last-icon'] ? (\n                      slots['last-icon']()\n                    ) : (\n                      <YIconPageControl type={'last'}></YIconPageControl>\n                    )}\n                  </YButton>\n                )}\n              </li>\n            )}\n          </ul>\n        </div>\n      );\n    });\n\n    return {\n      itemCount,\n      page,\n      refs,\n    };\n  },\n});\n"],"mappings":"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"}
+{"version":3,"file":"YPagination.mjs","names":["computed","defineComponent","shallowRef","useModelDuplex","useRender","useRefs","useResizeObserver","getRangeArr","toStyleSizeValue","propsFactory","YButton","YIconPageControl","pressYPaginationProps","start","type","Number","String","default","modelValue","props","disabled","Boolean","length","validator","val","totalVisible","showEndButton","gap","color","activeColor","buttonVariation","align","YPagination","name","components","emits","value","change","control","setup","_ref","slots","emit","page","parseInt","itemCount","resizeObservedRef","entries","target","contentRect","firstItem","querySelector","listWidth","width","itemWidth","offsetWidth","parseFloat","getComputedStyle","marginRight","calcItemCount","fixedCount","fixedWidth","count","Math","max","floor","toFixed","innerWidth","controls","prevDisabled","nextDisabled","first","variation","onClick","e","preventDefault","prev","to","next","min","last","range","isNaN","MAX_SAFE_INTEGER","even","middle","left","right","rangeLength","rangeStart","ceil","refs","updateRef","changePage","event","arguments","undefined","items","map","item","index","ref","active","key","ellipsis","styles","_createVNode"],"sources":["../../../src/components/pagination/YPagination.tsx"],"sourcesContent":["import {\n  ComponentPublicInstance,\n  PropType,\n  computed,\n  defineComponent,\n  shallowRef,\n} from 'vue';\n\nimport { useModelDuplex } from '../../composables/communication';\nimport { useRender } from '../../composables/component';\nimport { useRefs } from '../../composables/ref';\nimport { useResizeObserver } from '../../composables/resize-observer';\nimport { getRangeArr } from '../../util/common';\nimport { toStyleSizeValue } from '../../util/ui';\nimport { propsFactory } from '../../util/vue-component';\nimport { YButton } from '../button';\nimport { YIconPageControl } from '../icons/YIconPageControl';\n\nimport './YPagination.scss';\n\nexport const pressYPaginationProps = propsFactory(\n  {\n    start: {\n      type: [Number, String],\n      default: 1,\n    },\n    modelValue: {\n      type: Number,\n      default: (props: any) => props.start as number,\n    },\n    disabled: Boolean,\n    length: {\n      type: [Number, String],\n      default: 1,\n      validator: (val: number) => val % 1 === 0,\n    },\n    totalVisible: [Number, String],\n    showEndButton: Boolean,\n    gap: {\n      type: [String, Number],\n      default: 4,\n    },\n    color: String,\n    activeColor: String,\n    buttonVariation: [String],\n    align: {\n      type: String as PropType<'start' | 'center' | 'end'>,\n      default: 'center',\n    },\n    // firstIcon: [String],\n    // lastIcon: [String],\n    // prevIcon: [String],\n    // nextIcon: [String],\n  },\n  'YPagination',\n);\n\nexport const YPagination = defineComponent({\n  name: 'YPagination',\n  components: {\n    YButton,\n  },\n  props: {\n    ...pressYPaginationProps(),\n  },\n  emits: {\n    'update:modelValue': (value: number) => true,\n    change: (value: number, control?: string) => true,\n  },\n  setup(props, { slots, emit }) {\n    const page = useModelDuplex(props);\n\n    const length = computed(() => parseInt(props.length as string, 10));\n    const start = computed(() => parseInt(props.start as string, 10));\n\n    const itemCount = shallowRef(-1);\n\n    const { resizeObservedRef } = useResizeObserver((entries) => {\n      if (1 > entries.length) return;\n      const { target, contentRect } = entries[0];\n\n      const firstItem = target.querySelector(\n        '.y-pagination__list > *',\n      ) as HTMLElement;\n      if (firstItem) {\n        const listWidth = contentRect.width;\n        const itemWidth =\n          firstItem.offsetWidth +\n          parseFloat(getComputedStyle(firstItem).marginRight) * 2;\n        itemCount.value = calcItemCount(listWidth, itemWidth);\n      }\n    });\n\n    function calcItemCount(listWidth: number, itemWidth: number) {\n      const fixedCount = props.showEndButton ? 5 : 3;\n      const gap = +(props.gap ?? 4);\n      const fixedWidth = (itemWidth + gap) * fixedCount - gap;\n      const count = Math.max(\n        0,\n        Math.floor(+((listWidth - fixedWidth) / (itemWidth + gap)).toFixed(2)),\n      );\n      return count;\n    }\n\n    const totalVisible = computed(() => {\n      if (props.totalVisible) return parseInt(props.totalVisible as string, 10);\n      else if (itemCount.value >= 0) return itemCount.value;\n      return calcItemCount(innerWidth, 58);\n    });\n\n    const controls = computed(() => {\n      const prevDisabled = !!props.disabled || page.value <= start.value;\n      const nextDisabled =\n        !!props.disabled || page.value >= start.value + length.value - 1;\n      return {\n        first: {\n          disabled: prevDisabled,\n          variation: props.buttonVariation,\n          onClick: (e: MouseEvent) => {\n            e.preventDefault();\n            page.value = 1;\n            emit('change', 1, 'first');\n          },\n        },\n        prev: {\n          disabled: prevDisabled,\n          variation: props.buttonVariation,\n          onClick: (e: MouseEvent) => {\n            e.preventDefault();\n            const to = Math.max(1, page.value - 1);\n            page.value = to;\n            emit('change', to, 'prev');\n          },\n        },\n        next: {\n          disabled: nextDisabled,\n          variation: props.buttonVariation,\n          onClick: (e: MouseEvent) => {\n            e.preventDefault();\n            const to = Math.min(+length.value, page.value + 1);\n            page.value = to;\n            emit('change', to, 'next');\n          },\n        },\n        last: {\n          disabled: nextDisabled,\n          variation: props.buttonVariation,\n          onClick: (e: MouseEvent) => {\n            e.preventDefault();\n            const to = +length.value;\n            page.value = +length.value;\n            emit('change', to, 'last');\n          },\n        },\n      };\n    });\n\n    const range = computed(() => {\n      if (\n        length.value <= 0 ||\n        isNaN(length.value) ||\n        length.value > Number.MAX_SAFE_INTEGER\n      ) {\n        return [];\n      }\n      if (totalVisible.value <= 1) {\n        return [page.value];\n      }\n      if (length.value <= totalVisible.value) {\n        return getRangeArr(length.value, start.value);\n      }\n      const even = totalVisible.value % 2 === 0;\n      const middle = even\n        ? totalVisible.value / 2\n        : Math.floor(totalVisible.value / 2);\n      const left = even ? middle : middle + 1;\n      const right = length.value - middle;\n\n      if (left - page.value >= 0) {\n        return [\n          ...getRangeArr(Math.max(1, totalVisible.value - 1), start.value),\n          'ellipsis',\n          length.value,\n        ];\n      } else if (page.value - right >= (even ? 1 : 0)) {\n        const rangeLength = totalVisible.value - 1;\n        const rangeStart = length.value - rangeLength + start.value;\n        return [\n          start.value,\n          'ellipsis',\n          ...getRangeArr(rangeLength, rangeStart),\n        ];\n      } else {\n        const rangeLength = Math.max(1, totalVisible.value - 3);\n        const rangeStart =\n          rangeLength === 1\n            ? page.value\n            : page.value - Math.ceil(rangeLength / 2) + start.value;\n        return [\n          start.value,\n          'ellipsis',\n          ...getRangeArr(rangeLength, rangeStart),\n          'ellipsis',\n          length.value,\n        ];\n      }\n    });\n\n    const { refs, updateRef } = useRefs<ComponentPublicInstance>();\n\n    function changePage(event: Event, to = 1) {\n      event.preventDefault();\n      page.value = to;\n      emit('change', to);\n    }\n\n    const items = computed(() => {\n      return range.value.map((item, index) => {\n        const ref = (e: any) => updateRef(e, index);\n\n        if (item === 'ellipsis') {\n          return {\n            active: false,\n            key: `ellipsis-${index}`,\n            page: item,\n            props: {\n              ref,\n              ellipsis: true,\n              disabled: true, // TODO: skipper\n            },\n          };\n        } else {\n          const active = item === page.value;\n          return {\n            active,\n            key: `item-${item}`,\n            page: item,\n            props: {\n              ref,\n              ellipsis: false,\n              disabled: !!props.disabled || +props.length < 2,\n              color: active ? props.activeColor : props.color,\n              variation: props.buttonVariation,\n              onClick: (e: MouseEvent) => changePage(e, item),\n            },\n          };\n        }\n      });\n    });\n\n    const styles = computed(() => {\n      let gap = undefined;\n      if (props.gap) {\n        const value = +props.gap;\n        if (!isNaN(value)) {\n          gap = toStyleSizeValue(value);\n        } else if (typeof props.gap === 'string') {\n          gap = props.gap;\n        }\n      }\n      return {\n        '--y-pagination__gap': gap,\n      };\n    });\n\n    useRender(() => {\n      return (\n        <div\n          class={[\n            'y-pagination',\n            { [`y-pagination--align-${props.align}`]: props.align !== 'start' },\n          ]}\n          role={'navigation'}\n          style={styles.value}\n          ref={resizeObservedRef}\n        >\n          <ul class={['y-pagination__list']}>\n            {props.showEndButton && (\n              <li key=\"first\" class=\"y-pagination__first\">\n                {slots.first ? (\n                  slots.first(controls.value.first)\n                ) : (\n                  <YButton {...controls.value.first}>\n                    {slots['first-icon'] ? (\n                      slots['first-icon']()\n                    ) : (\n                      <YIconPageControl type={'first'}></YIconPageControl>\n                    )}\n                  </YButton>\n                )}\n              </li>\n            )}\n            <li key=\"prev\" class=\"y-pagination__prev\">\n              {slots.prev ? (\n                slots.prev(controls.value.prev)\n              ) : (\n                <YButton {...controls.value.prev}>\n                  {slots['prev-icon'] ? (\n                    slots['prev-icon']()\n                  ) : (\n                    <YIconPageControl type={'prev'}></YIconPageControl>\n                  )}\n                </YButton>\n              )}\n            </li>\n            {items.value.map((item, index) => {\n              return (\n                <li\n                  key={item.key}\n                  class={[\n                    'y-pagination__item',\n                    { 'y-pagination__item--active': item.active },\n                  ]}\n                >\n                  <YButton {...item.props}>\n                    {item.props.ellipsis\n                      ? slots.ellipsis\n                        ? slots.ellipsis()\n                        : '...'\n                      : item.page}\n                  </YButton>\n                </li>\n              );\n            })}\n            <li key=\"next\" class=\"y-pagination__next\">\n              {slots.next ? (\n                slots.next(controls.value.next)\n              ) : (\n                <YButton {...controls.value.next}>\n                  {slots['next-icon'] ? (\n                    slots['next-icon']()\n                  ) : (\n                    <YIconPageControl type={'next'}></YIconPageControl>\n                  )}\n                </YButton>\n              )}\n            </li>\n            {props.showEndButton && (\n              <li key=\"last\" class=\"y-pagination__last\">\n                {slots.last ? (\n                  slots.last(controls.value.last)\n                ) : (\n                  <YButton {...controls.value.last}>\n                    {slots['last-icon'] ? (\n                      slots['last-icon']()\n                    ) : (\n                      <YIconPageControl type={'last'}></YIconPageControl>\n                    )}\n                  </YButton>\n                )}\n              </li>\n            )}\n          </ul>\n        </div>\n      );\n    });\n\n    return {\n      itemCount,\n      page,\n      refs,\n    };\n  },\n});\n"],"mappings":"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"}

package/lib/components/panel/YDividePanel.scss

@@ -26,18 +26,18 @@ $side-padding: 16px !default;
     }
 
     &:hover {
-      background: rgba(var(--y-theme--primary), 0.12);
+      background: rgba(var(--y-theme-primary), 0.12);
     }
 
     &:hover &-line {
-      background: rgba(var(--y-theme--primary), 1);
+      background: rgba(var(--y-theme-primary), 1);
     }
   }
 
   &--resizing &__divider {
-    background: rgba(var(--y-theme--primary), 0.12);
+    background: rgba(var(--y-theme-primary), 0.12);
     &-line {
-      background: rgba(var(--y-theme--primary), 1);
+      background: rgba(var(--y-theme-primary), 1);
     }
   }
 }

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

@@ -2,6 +2,7 @@ import { createTextVNode as _createTextVNode, createVNode as _createVNode } from
 import { defineComponent } from 'vue';
 import { useProgress } from "../../composables/progress.mjs";
 import "./YProgressBar.scss";
+import { isColorValue } from "../../util/color/index.mjs";
 export const YProgressBar = defineComponent({
   name: 'YProgressBar',
   props: {
@@ -23,12 +24,18 @@ export const YProgressBar = defineComponent({
     innerText: {
       type: Boolean
     },
+    color: {
+      type: String,
+      default: 'primary'
+    },
     textColor: {
       type: String
     },
     outlineColor: {
       type: String
-    }
+    },
+    indeterminate: Boolean,
+    reverse: Boolean
   },
   setup(props) {
     const {
@@ -52,9 +59,18 @@ export const YProgressBar = defineComponent({
       return {
         'y-progress--no-trans': noTransition,
         'y-progress--outlined': !!this.outlined,
-        'y-progress-bar--rounded': !!this.rounded
+        'y-progress--indeterminate': !!this.indeterminate,
+        'y-progress-bar--rounded': !!this.rounded,
+        'y-progress-bar--reverse': !!this.reverse
       };
     },
+    leadColor() {
+      let color = this.color ?? '';
+      if (!isColorValue(color)) {
+        color = `rgba(var(--y-theme-${color}), 1)`;
+      }
+      return color;
+    },
     styles() {
       let minWidth;
       if (this.innerText && this.numValue < 5 && this.numValue > 0) {
@@ -88,7 +104,8 @@ export const YProgressBar = defineComponent({
       "aria-valuenow": numValue,
       "style": {
         '--y-progress-bar__height': height !== undefined ? `${height}px` : undefined,
-        '--y-progress-bar__outline-color': outlineColor !== undefined ? outlineColor : undefined
+        '--y-progress-bar__outline-color': outlineColor !== undefined ? outlineColor : undefined,
+        '--y-progress-bar__color': this.leadColor
       }
     }, [_createVNode("div", {
       "class": "y-progress__track"

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

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

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

@@ -1,40 +1,109 @@
-.y-progress {
-  --y-progress-bar__height: 4px;
-
-  display: flex;
-  position: relative;
-  height: var(--y-progress-bar__height, 4px);
-
-  &-bar--rounded {
-    border-radius: calc(var(--y-progress-bar__height) / 2);
-  }
-
-  &--outlined {
-    --y-progress-bar__outline-color: var(--y-palette--primary);
-    border: 1px solid var(--y-progress-bar__outline-color);
-  }
-
-  &__tube {
-    border-radius: inherit;
-    overflow: clip;
-    min-width: 0;
-    flex: 1 1;
-  }
-
-  &__track {
-    background-color: #f0f0f0;
-    position: absolute;
-    inset: 0;
-    border-radius: inherit;
-    overflow: clip;
-  }
-
-  &__lead {
-    width: 100%;
-    height: 100%;
-    background-color: var(--y-palette--primary);
-    position: relative;
-    transform-origin: left;
-    transition: all 250ms cubic-bezier(0.42, 0.5, 0.51, 1.02);
-  }
-}
+@use '../../styles/settings/variables';
+
+.y-progress {
+  --y-progress-bar__height: 4px;
+  --y-progress-bar__color: var(--y-theme-primary);
+
+  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 {
+      transform-origin: right;
+    }
+  }
+
+  &__tube {
+    border-radius: inherit;
+    overflow: clip;
+    min-width: 0;
+    flex: 1 1;
+  }
+
+  &__track {
+    background-color: #f0f0f0;
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    overflow: clip;
+    color: inherit;
+  }
+
+  &__lead {
+    width: 100%;
+    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(.5,.65,.62,.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;
+    }
+  }
+
+}