@maple-design/ui-vue 0.0.0-stage → 1.1.0

package/es/progress-group/style/index.css

@@ -0,0 +1,289 @@
+:where([data-mp-theme]) {
+  color-scheme: var(--mp-color-scheme);
+}
+:root,
+:where([data-mp-theme]) {
+  --mp-progress-group-transition-duration: var(--mp-sys-motion-duration-standard);
+  --mp-progress-group-tooltip-duration: var(--mp-sys-motion-duration-fast);
+  --mp-progress-group-tooltip-max-width: 240px;
+  --mp-progress-group-tooltip-padding: 5px var(--mp-sys-space-4);
+  --mp-progress-group-tooltip-radius: var(--mp-sys-radius-md);
+  --mp-progress-group-tooltip-font-size: var(--mp-sys-font-size-xs);
+  --mp-progress-group-tooltip-line-height: 1.4;
+  --mp-progress-group-tooltip-offset: var(--mp-sys-space-4);
+  --mp-progress-group-text-font-weight: var(--mp-sys-font-weight-medium);
+  --mp-progress-group-size-xs-thickness: 2px;
+  --mp-progress-group-size-sm-thickness: 4px;
+  --mp-progress-group-size-md-thickness: 8px;
+  --mp-progress-group-size-lg-thickness: 12px;
+  --mp-progress-group-size-xl-thickness: 16px;
+  --mp-progress-group-gap: var(--mp-sys-space-3);
+  --mp-progress-group-item-gap: var(--mp-sys-space-2);
+  --mp-progress-group-dot-size: var(--mp-sys-space-4);
+  --mp-progress-group-radius: 9999px;
+  --mp-progress-group-track-color: var(--mp-sys-color-state-hover);
+  --mp-progress-group-text-color: var(--mp-sys-color-content-primary);
+  --mp-progress-group-muted-color: var(--mp-sys-color-content-secondary);
+  --mp-progress-group-font-size: var(--mp-sys-font-size-sm);
+  --mp-progress-group-tooltip-bg: var(--mp-sys-color-surface-tooltip);
+  --mp-progress-group-tooltip-color: var(--mp-sys-color-content-on-dark);
+}
+.mp-progress-group {
+  display: flex;
+  gap: var(--mp-progress-group-gap);
+  color: var(--mp-progress-group-text-color);
+  font-size: var(--mp-progress-group-font-size);
+}
+.mp-progress-group--horizontal {
+  width: 100%;
+  flex-direction: column;
+}
+.mp-progress-group--vertical {
+  height: 100%;
+  flex-direction: row;
+}
+.mp-progress-group__track-wrap {
+  position: relative;
+  z-index: 0;
+}
+.mp-progress-group--horizontal .mp-progress-group__track-wrap {
+  width: 100%;
+}
+.mp-progress-group--vertical .mp-progress-group__track-wrap {
+  height: 100%;
+}
+.mp-progress-group__track {
+  display: flex;
+  overflow: hidden;
+  isolation: isolate;
+  border-radius: var(--mp-progress-group-radius);
+  background: var(--mp-progress-group-track-color);
+  clip-path: inset(0 round var(--mp-progress-group-radius));
+}
+.mp-progress-group--horizontal .mp-progress-group__track {
+  width: 100%;
+  flex-direction: row;
+}
+.mp-progress-group--vertical .mp-progress-group__track {
+  height: 100%;
+  flex-direction: column;
+}
+.mp-progress-group__segment {
+  flex: none;
+  transition: width var(--mp-progress-group-transition-duration) ease-out, height var(--mp-progress-group-transition-duration) ease-out;
+}
+.mp-progress-group__active-segment {
+  position: absolute;
+  z-index: 1;
+  display: block;
+  pointer-events: none;
+  border-radius: var(--mp-progress-group-radius);
+  transition: transform var(--mp-progress-group-transition-duration) ease-out, opacity var(--mp-progress-group-transition-duration) ease-out;
+}
+.mp-progress-group--horizontal .mp-progress-group__active-segment {
+  top: 0;
+  height: 100%;
+  transform: scaleY(1.3);
+}
+.mp-progress-group--vertical .mp-progress-group__active-segment {
+  left: 0;
+  width: 100%;
+  transform: scaleX(1.3);
+}
+.mp-progress-group__tooltip {
+  position: absolute;
+  z-index: 2;
+  width: max-content;
+  max-width: var(--mp-progress-group-tooltip-max-width);
+  padding: var(--mp-progress-group-tooltip-padding);
+  border-radius: var(--mp-progress-group-tooltip-radius);
+  color: var(--mp-progress-group-tooltip-color);
+  background: var(--mp-progress-group-tooltip-bg);
+  font-size: var(--mp-progress-group-tooltip-font-size);
+  line-height: var(--mp-progress-group-tooltip-line-height);
+  pointer-events: auto;
+  animation: mp-progress-group-tooltip-in var(--mp-progress-group-tooltip-duration) ease-out;
+}
+.mp-progress-group--horizontal .mp-progress-group__track-wrap > .mp-progress-group__tooltip::before,
+.mp-progress-group__circle-tooltip::before {
+  content: '';
+  position: absolute;
+  inset-inline: 0;
+  top: 100%;
+  height: calc(var(--mp-progress-group-tooltip-offset) + 1px);
+}
+.mp-progress-group--vertical .mp-progress-group__track-wrap > .mp-progress-group__tooltip::before {
+  content: '';
+  position: absolute;
+  inset-block: 0;
+  inset-inline-end: 100%;
+  width: calc(var(--mp-progress-group-tooltip-offset) + 1px);
+}
+.mp-progress-group--horizontal .mp-progress-group__track-wrap > .mp-progress-group__tooltip {
+  bottom: calc(100% + var(--mp-progress-group-tooltip-offset));
+  transform: translateX(-50%);
+}
+.mp-progress-group--vertical .mp-progress-group__track-wrap > .mp-progress-group__tooltip {
+  inset-inline-start: calc(100% + var(--mp-progress-group-tooltip-offset));
+  transform: translateY(-50%);
+}
+.mp-progress-group__status {
+  display: flex;
+  justify-content: flex-end;
+  color: var(--mp-progress-group-muted-color);
+}
+.mp-progress-group--horizontal .mp-progress-group__status {
+  width: var(--mp-progress-group-percent);
+  min-width: max-content;
+}
+.mp-progress-group--vertical .mp-progress-group__status {
+  height: var(--mp-progress-group-percent);
+  min-height: max-content;
+  align-items: flex-end;
+}
+.mp-progress-group__legend {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mp-progress-group-item-gap);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.mp-progress-group__item {
+  display: flex;
+  align-items: center;
+  gap: var(--mp-progress-group-item-gap);
+  min-width: 0;
+}
+.mp-progress-group__dot {
+  width: var(--mp-progress-group-dot-size);
+  height: var(--mp-progress-group-dot-size);
+  flex: none;
+  border-radius: 50%;
+}
+.mp-progress-group__icon {
+  width: 1em;
+  height: 1em;
+  flex: none;
+}
+.mp-progress-group__label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.mp-progress-group__value {
+  margin-inline-start: auto;
+  color: var(--mp-progress-group-muted-color);
+}
+.mp-progress-group--circle {
+  align-items: center;
+  width: max-content;
+}
+.mp-progress-group--circle .mp-progress-group__legend {
+  width: 100%;
+}
+.mp-progress-group__circle {
+  position: relative;
+  flex: none;
+}
+.mp-progress-group__circle-svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.mp-progress-group__circle-track {
+  stroke: var(--mp-progress-group-track-color);
+}
+.mp-progress-group__circle-segment {
+  cursor: pointer;
+  pointer-events: stroke;
+  transition: stroke-dasharray var(--mp-progress-group-transition-duration) ease-out, stroke-dashoffset var(--mp-progress-group-transition-duration) ease-out;
+}
+.mp-progress-group__circle-active-segment {
+  pointer-events: none;
+  animation: mp-progress-group-circle-hover-in var(--mp-progress-group-transition-duration) ease-out;
+}
+.mp-progress-group__circle-status {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--mp-progress-group-text-color);
+  font-weight: var(--mp-progress-group-text-font-weight);
+  pointer-events: none;
+}
+.mp-progress-group__circle-tooltip {
+  bottom: calc(100% + var(--mp-progress-group-tooltip-offset));
+  left: 50%;
+  transform: translateX(-50%);
+}
+.mp-progress-group--horizontal.mp-progress-group--xs .mp-progress-group__track {
+  height: var(--mp-progress-group-size-xs-thickness);
+}
+.mp-progress-group--horizontal.mp-progress-group--sm .mp-progress-group__track {
+  height: var(--mp-progress-group-size-sm-thickness);
+}
+.mp-progress-group--horizontal.mp-progress-group--md .mp-progress-group__track {
+  height: var(--mp-progress-group-size-md-thickness);
+}
+.mp-progress-group--horizontal.mp-progress-group--lg .mp-progress-group__track {
+  height: var(--mp-progress-group-size-lg-thickness);
+}
+.mp-progress-group--horizontal.mp-progress-group--xl .mp-progress-group__track {
+  height: var(--mp-progress-group-size-xl-thickness);
+}
+.mp-progress-group--vertical.mp-progress-group--xs .mp-progress-group__track {
+  width: var(--mp-progress-group-size-xs-thickness);
+}
+.mp-progress-group--vertical.mp-progress-group--sm .mp-progress-group__track {
+  width: var(--mp-progress-group-size-sm-thickness);
+}
+.mp-progress-group--vertical.mp-progress-group--md .mp-progress-group__track {
+  width: var(--mp-progress-group-size-md-thickness);
+}
+.mp-progress-group--vertical.mp-progress-group--lg .mp-progress-group__track {
+  width: var(--mp-progress-group-size-lg-thickness);
+}
+.mp-progress-group--vertical.mp-progress-group--xl .mp-progress-group__track {
+  width: var(--mp-progress-group-size-xl-thickness);
+}
+@keyframes mp-progress-group-tooltip-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes mp-progress-group-circle-hover-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .mp-progress-group__segment,
+  .mp-progress-group__circle-segment {
+    transition: none;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .mp-progress-group__active-segment {
+    transition: none;
+  }
+  .mp-progress-group__tooltip,
+  .mp-progress-group__circle-active-segment {
+    animation: none;
+  }
+}
+.mp-progress-group__segment:focus-visible,
+.mp-progress-group__circle-segment:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+.mp-progress-group--horizontal:dir(rtl) > .mp-progress-group__track-wrap > .mp-progress-group__tooltip {
+  transform: translateX(50%);
+}

package/es/progress-group/style/index.mjs

@@ -0,0 +1,2 @@
+import '../../style/index.css'
+import './index.css'

package/es/pull-refresh/PullRefresh.vue.mjs

@@ -0,0 +1,34 @@
+import _sfc_main from "./PullRefresh2.vue.mjs";
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, createVNode, withCtx, createBlock, renderSlot } from "vue";
+import _export_sfc from "../_virtual/_plugin-vue_export-helper.mjs";
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_MIconCheckboxMarkedCircleFill = resolveComponent("MIconCheckboxMarkedCircleFill");
+  const _component_MIconRefresh = resolveComponent("MIconRefresh");
+  const _component_MIconArrowDown = resolveComponent("MIconArrowDown");
+  const _component_mp_icon = resolveComponent("mp-icon");
+  return openBlock(), createElementBlock("div", {
+    ref: "freshNode",
+    class: normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box")))
+  }, [
+    createElementVNode("div", {
+      ref: "controlNode",
+      class: normalizeClass(_ctx.classes(_ctx.n("control"), _ctx.n("$-elevation--2"), [_ctx.isSuccess, _ctx.n("control--success")])),
+      style: normalizeStyle(_ctx.controlStyle)
+    }, [
+      createVNode(_component_mp_icon, {
+        transition: _ctx.ICON_TRANSITION,
+        class: normalizeClass(_ctx.classes(_ctx.n("icon"), [_ctx.refreshStatus === "loading", _ctx.n("icon--spin")]))
+      }, {
+        default: withCtx(() => [
+          _ctx.iconName === "checkbox-marked-circle-fill" ? (openBlock(), createBlock(_component_MIconCheckboxMarkedCircleFill, { key: 0 })) : _ctx.iconName === "refresh" ? (openBlock(), createBlock(_component_MIconRefresh, { key: 1 })) : (openBlock(), createBlock(_component_MIconArrowDown, { key: 2 }))
+        ]),
+        _: 1
+      }, 8, ["transition", "class"])
+    ], 6),
+    renderSlot(_ctx.$slots, "default")
+  ], 2);
+}
+const PullRefresh = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  PullRefresh as default
+};