@varlet/ui 3.5.1 → 3.5.2

package/es/space/style/index.mjs

@@ -0,0 +1,2 @@
+import '../../styles/common.css'
+import '../space.css'

package/es/step/Step.mjs

@@ -0,0 +1,123 @@
+import VarIcon from "../icon/index.mjs";
+import { computed, defineComponent } from "vue";
+import { props } from "./props.mjs";
+import { useSteps } from "./provide.mjs";
+import { toNumber } from "@varlet/shared";
+import { createNamespace } from "../utils/components.mjs";
+const { name, n, classes } = createNamespace("step");
+import { resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, createElementBlock as _createElementBlock, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, renderSlot as _renderSlot } from "vue";
+const _hoisted_1 = { key: 3 };
+function __render__(_ctx, _cache) {
+  const _component_var_icon = _resolveComponent("var-icon");
+  return _openBlock(), _createElementBlock(
+    "div",
+    {
+      class: _normalizeClass(_ctx.n())
+    },
+    [
+      _createElementVNode(
+        "div",
+        {
+          class: _normalizeClass(_ctx.n(_ctx.direction))
+        },
+        [
+          _createElementVNode(
+            "div",
+            {
+              class: _normalizeClass(_ctx.classes(_ctx.n(`${_ctx.direction}-tag`), [_ctx.isActive || _ctx.isCurrent, _ctx.n(`${_ctx.direction}-tag--active`)])),
+              style: _normalizeStyle({ backgroundColor: _ctx.isActive || _ctx.isCurrent ? _ctx.activeColor : _ctx.inactiveColor }),
+              onClick: _cache[0] || (_cache[0] = (...args) => _ctx.click && _ctx.click(...args))
+            },
+            [
+              _ctx.isActive ? (_openBlock(), _createBlock(_component_var_icon, {
+                key: 0,
+                class: _normalizeClass(_ctx.n("icon")),
+                "var-step-cover": "",
+                name: _ctx.activeIcon,
+                namespace: _ctx.activeIconNamespace
+              }, null, 8, ["class", "name", "namespace"])) : _ctx.isCurrent && _ctx.currentIcon ? (_openBlock(), _createBlock(_component_var_icon, {
+                key: 1,
+                class: _normalizeClass(_ctx.n("icon")),
+                "var-step-cover": "",
+                name: _ctx.currentIcon,
+                namespace: _ctx.currentIconNamespace
+              }, null, 8, ["class", "name", "namespace"])) : _ctx.inactiveIcon ? (_openBlock(), _createBlock(_component_var_icon, {
+                key: 2,
+                class: _normalizeClass(_ctx.n("icon")),
+                "var-step-cover": "",
+                name: _ctx.inactiveIcon,
+                namespace: _ctx.inactiveIconNamespace
+              }, null, 8, ["class", "name", "namespace"])) : (_openBlock(), _createElementBlock(
+                "span",
+                _hoisted_1,
+                _toDisplayString(_ctx.index + 1),
+                1
+                /* TEXT */
+              ))
+            ],
+            6
+            /* CLASS, STYLE */
+          ),
+          _ctx.$slots.default ? (_openBlock(), _createElementBlock(
+            "div",
+            {
+              key: 0,
+              class: _normalizeClass(_ctx.classes(_ctx.n(`${_ctx.direction}-content`), [_ctx.isActive || _ctx.isCurrent, _ctx.n(`${_ctx.direction}-content--active`)])),
+              onClick: _cache[1] || (_cache[1] = (...args) => _ctx.click && _ctx.click(...args))
+            },
+            [
+              _renderSlot(_ctx.$slots, "default")
+            ],
+            2
+            /* CLASS */
+          )) : _createCommentVNode("v-if", true),
+          _createElementVNode(
+            "div",
+            {
+              class: _normalizeClass(_ctx.n(`${_ctx.direction}-line`))
+            },
+            null,
+            2
+            /* CLASS */
+          )
+        ],
+        2
+        /* CLASS */
+      )
+    ],
+    2
+    /* CLASS */
+  );
+}
+const __sfc__ = defineComponent({
+  name,
+  components: { VarIcon },
+  props,
+  setup() {
+    const { index, steps, bindSteps } = useSteps();
+    const { active, activeColor, inactiveColor, direction, clickStep } = steps;
+    const isCurrent = computed(() => active.value === index.value);
+    const isActive = computed(() => index.value !== -1 && toNumber(active.value) > index.value);
+    const stepProvider = { index };
+    bindSteps(stepProvider);
+    function click() {
+      return clickStep(index.value);
+    }
+    return {
+      index,
+      isActive,
+      isCurrent,
+      direction,
+      activeColor,
+      inactiveColor,
+      n,
+      classes,
+      click
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/step/index.mjs

@@ -0,0 +1,12 @@
+import Step from "./Step.mjs";
+import { withInstall, withPropsDefaultsSetter } from "../utils/components.mjs";
+import { props as stepProps } from "./props.mjs";
+withInstall(Step);
+withPropsDefaultsSetter(Step, stepProps);
+const _StepComponent = Step;
+var stdin_default = Step;
+export {
+  _StepComponent,
+  stdin_default as default,
+  stepProps
+};

package/es/step/props.mjs

@@ -0,0 +1,16 @@
+import { iconProps } from "../icon/index.mjs";
+import { pickProps } from "../utils/components.mjs";
+const props = {
+  activeIcon: {
+    type: String,
+    default: "check"
+  },
+  currentIcon: pickProps(iconProps, "name"),
+  inactiveIcon: pickProps(iconProps, "name"),
+  activeIconNamespace: pickProps(iconProps, "namespace"),
+  currentIconNamespace: pickProps(iconProps, "namespace"),
+  inactiveIconNamespace: pickProps(iconProps, "namespace")
+};
+export {
+  props
+};

package/es/step/provide.mjs

@@ -0,0 +1,17 @@
+import { useParent } from "@varlet/use";
+import { error } from "../utils/logger.mjs";
+import { STEPS_BIND_STEP_KEY } from "../steps/provide.mjs";
+function useSteps() {
+  const { parentProvider, index, bindParent } = useParent(STEPS_BIND_STEP_KEY);
+  if (!bindParent) {
+    error("Steps", "<step/> must in <steps>");
+  }
+  return {
+    index,
+    steps: parentProvider,
+    bindSteps: bindParent
+  };
+}
+export {
+  useSteps
+};

package/es/step/step.css

@@ -0,0 +1 @@
+:root { --step-tag-size: 20px; --step-tag-background: #9e9e9e; --step-tag-font-size: var(--font-size-md); --step-tag-color: var(--color-on-primary); --step-tag-active-color: var(--color-primary); --step-tag-margin: 4px 0; --step-tag-icon-size: var(--font-size-lg); --step-content-font-size: var(--font-size-md); --step-content-color: rgba(0, 0, 0, 0.38); --step-content-active-color: #000; --step-line-background: #000; --step-line-gap: 8px; --step-vertical-tag-margin: 0 4px; --step-vertical-min-height: 50px;}.var-step-tag { width: var(--step-tag-size); height: var(--step-tag-size); background: var(--step-tag-background); display: flex; font-size: var(--step-tag-font-size); align-items: center; justify-content: center; border-radius: 50%; color: var(--step-tag-color); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: 0.3s var(--cubic-bezier);}.var-step-content { font-size: var(--step-content-font-size); color: var(--step-content-color); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: 0.3s var(--cubic-bezier);}.var-step { position: relative; flex: 1; -webkit-tap-highlight-color: transparent;}.var-step:last-child .var-step__horizontal-line { width: 0;}.var-step:last-child .var-step__vertical-line { height: 0;}.var-step__horizontal { display: flex; flex-direction: column; align-items: center;}.var-step__horizontal-tag { margin: var(--step-tag-margin); width: var(--step-tag-size); height: var(--step-tag-size); background: var(--step-tag-background); display: flex; font-size: var(--step-tag-font-size); align-items: center; justify-content: center; border-radius: 50%; color: var(--step-tag-color); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: 0.3s var(--cubic-bezier);}.var-step__horizontal-tag--active { background: var(--step-tag-active-color);}.var-step__horizontal-content { font-size: var(--step-content-font-size); color: var(--step-content-color); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: 0.3s var(--cubic-bezier);}.var-step__horizontal-content--active { color: var(--step-content-active-color);}.var-step__horizontal-line { position: absolute; top: calc(calc(var(--step-tag-size) + var(--step-line-gap)) / 2); left: calc(50% + calc(var(--step-tag-size) + var(--step-line-gap)) / 2); width: calc(100% - calc(var(--step-tag-size) + var(--step-line-gap))); height: 1px; transform: scaleY(0.5); background: var(--step-line-background);}.var-step__vertical { display: flex; height: 100%; min-height: var(--step-vertical-min-height);}.var-step__vertical-tag { flex-shrink: 0; margin: var(--step-vertical-tag-margin); width: var(--step-tag-size); height: var(--step-tag-size); background: var(--step-tag-background); display: flex; font-size: var(--step-tag-font-size); align-items: center; justify-content: center; border-radius: 50%; color: var(--step-tag-color); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: 0.3s var(--cubic-bezier);}.var-step__vertical-tag--active { background: var(--step-tag-active-color);}.var-step__vertical-content { font-size: var(--step-content-font-size); color: var(--step-content-color); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: 0.3s var(--cubic-bezier);}.var-step__vertical-content--active { color: var(--step-content-active-color);}.var-step__vertical-line { position: absolute; height: calc(100% - calc(var(--step-tag-size) + var(--step-line-gap))); left: calc(calc(var(--step-tag-size) + var(--step-line-gap)) / 2); top: calc(calc(var(--step-tag-size) + var(--step-line-gap)) - var(--step-line-gap) / 2); width: 1px; transform: scaleX(0.5); background: var(--step-line-background);}.var-step__icon[var-step-cover] { font-size: var(--step-tag-icon-size);}

package/es/step/style/index.mjs

@@ -0,0 +1,4 @@
+import '../../styles/common.css'
+import '../../icon/icon.css'
+import '../step.css'
+import '../StepSfc.css'

package/es/steps/Steps.mjs

@@ -0,0 +1,49 @@
+import { computed, defineComponent } from "vue";
+import { useStep } from "./provide.mjs";
+import { props } from "./props.mjs";
+import { createNamespace } from "../utils/components.mjs";
+import { call } from "@varlet/shared";
+const { name, n } = createNamespace("steps");
+import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+function __render__(_ctx, _cache) {
+  return _openBlock(), _createElementBlock(
+    "div",
+    {
+      class: _normalizeClass(_ctx.n()),
+      style: _normalizeStyle({ flexDirection: _ctx.direction === "horizontal" ? "row" : "column" })
+    },
+    [
+      _renderSlot(_ctx.$slots, "default")
+    ],
+    6
+    /* CLASS, STYLE */
+  );
+}
+const __sfc__ = defineComponent({
+  name,
+  props,
+  setup(props2) {
+    const active = computed(() => props2.active);
+    const activeColor = computed(() => props2.activeColor);
+    const inactiveColor = computed(() => props2.inactiveColor);
+    const direction = computed(() => props2.direction);
+    const { bindStep } = useStep();
+    const stepsProvider = {
+      active,
+      direction,
+      activeColor,
+      inactiveColor,
+      clickStep
+    };
+    bindStep(stepsProvider);
+    function clickStep(index) {
+      call(props2.onClickStep, index);
+    }
+    return { n };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/steps/StepsSfc.css

@@ -0,0 +1 @@
+.var-steps { width: 100%; display: flex; justify-content: space-between; overflow: hidden;}

package/es/steps/index.mjs

@@ -0,0 +1,12 @@
+import Steps from "./Steps.mjs";
+import { withInstall, withPropsDefaultsSetter } from "../utils/components.mjs";
+import { props as stepsProps } from "./props.mjs";
+withInstall(Steps);
+withPropsDefaultsSetter(Steps, stepsProps);
+const _StepsComponent = Steps;
+var stdin_default = Steps;
+export {
+  _StepsComponent,
+  stdin_default as default,
+  stepsProps
+};

package/es/steps/props.mjs

@@ -0,0 +1,17 @@
+import { defineListenerProp } from "../utils/components.mjs";
+const props = {
+  active: {
+    type: [String, Number],
+    default: 0
+  },
+  direction: {
+    type: String,
+    default: "horizontal"
+  },
+  activeColor: String,
+  inactiveColor: String,
+  onClickStep: defineListenerProp()
+};
+export {
+  props
+};

package/es/steps/provide.mjs

@@ -0,0 +1,13 @@
+import { useChildren } from "@varlet/use";
+const STEPS_BIND_STEP_KEY = Symbol("STEPS_BIND_STEP_KEY");
+function useStep() {
+  const { bindChildren, childProviders } = useChildren(STEPS_BIND_STEP_KEY);
+  return {
+    step: childProviders,
+    bindStep: bindChildren
+  };
+}
+export {
+  STEPS_BIND_STEP_KEY,
+  useStep
+};

package/es/steps/style/index.mjs

@@ -0,0 +1,2 @@
+import '../../styles/common.css'
+import '../StepsSfc.css'

package/es/sticky/Sticky.mjs

@@ -0,0 +1,178 @@
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+import { defineComponent, ref, computed, watch } from "vue";
+import { props } from "./props.mjs";
+import { getParentScroller, toPxNum } from "../utils/elements.mjs";
+import { toNumber, raf, doubleRaf, getRect, call } from "@varlet/shared";
+import { createNamespace } from "../utils/components.mjs";
+import { useEventListener, onSmartMounted, onWindowResize, onSmartUnmounted } from "@varlet/use";
+const { name, n, classes } = createNamespace("sticky");
+import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+function __render__(_ctx, _cache) {
+  return _openBlock(), _createElementBlock(
+    "div",
+    {
+      class: _normalizeClass(_ctx.classes(_ctx.n(), [_ctx.enableCSSMode, _ctx.n("--css-mode")])),
+      ref: "stickyEl",
+      style: _normalizeStyle({
+        zIndex: _ctx.toNumber(_ctx.zIndex),
+        top: _ctx.enableCSSMode ? `${_ctx.offsetTop}px` : void 0,
+        width: _ctx.enableFixedMode ? _ctx.fixedWidth : void 0,
+        height: _ctx.enableFixedMode ? _ctx.fixedHeight : void 0
+      })
+    },
+    [
+      _createElementVNode(
+        "div",
+        {
+          class: _normalizeClass(_ctx.n("wrapper")),
+          ref: "wrapperEl",
+          style: _normalizeStyle({
+            zIndex: _ctx.toNumber(_ctx.zIndex),
+            position: _ctx.enableFixedMode ? "fixed" : void 0,
+            width: _ctx.enableFixedMode ? _ctx.fixedWrapperWidth : void 0,
+            height: _ctx.enableFixedMode ? _ctx.fixedWrapperHeight : void 0,
+            left: _ctx.enableFixedMode ? _ctx.fixedLeft : void 0,
+            top: _ctx.enableFixedMode ? _ctx.fixedTop : void 0
+          })
+        },
+        [
+          _renderSlot(_ctx.$slots, "default")
+        ],
+        6
+        /* CLASS, STYLE */
+      )
+    ],
+    6
+    /* CLASS, STYLE */
+  );
+}
+const __sfc__ = defineComponent({
+  name,
+  props,
+  setup(props2) {
+    const stickyEl = ref(null);
+    const wrapperEl = ref(null);
+    const isFixed = ref(false);
+    const fixedTop = ref("0px");
+    const fixedLeft = ref("0px");
+    const fixedWidth = ref("auto");
+    const fixedHeight = ref("auto");
+    const fixedWrapperWidth = ref("auto");
+    const fixedWrapperHeight = ref("auto");
+    const enableCSSMode = computed(() => !props2.disabled && props2.cssMode);
+    const enableFixedMode = computed(() => !props2.disabled && !props2.cssMode && isFixed.value);
+    const offsetTop = computed(() => toPxNum(props2.offsetTop));
+    let scroller;
+    watch(() => props2.disabled, resize);
+    onSmartMounted(() => __async(this, null, function* () {
+      yield doubleRaf();
+      setupScroller();
+      handleScroll();
+    }));
+    onSmartUnmounted(removeScrollListener);
+    onWindowResize(resize);
+    useEventListener(() => window, "scroll", handleScroll);
+    function computeFixedParams() {
+      const { cssMode, disabled } = props2;
+      if (disabled) {
+        return;
+      }
+      let scrollerTop = 0;
+      if (scroller && scroller !== window) {
+        const { top } = getRect(scroller);
+        scrollerTop = top;
+      }
+      const wrapper = wrapperEl.value;
+      const sticky = stickyEl.value;
+      const { top: stickyTop, left: stickyLeft } = getRect(sticky);
+      const currentOffsetTop = stickyTop - scrollerTop;
+      if (currentOffsetTop <= offsetTop.value) {
+        if (!cssMode) {
+          fixedWidth.value = `${sticky.offsetWidth}px`;
+          fixedHeight.value = `${sticky.offsetHeight}px`;
+          fixedTop.value = `${scrollerTop + offsetTop.value}px`;
+          fixedLeft.value = `${stickyLeft}px`;
+          fixedWrapperWidth.value = `${wrapper.offsetWidth}px`;
+          fixedWrapperHeight.value = `${wrapper.offsetHeight}px`;
+          isFixed.value = true;
+        }
+        return {
+          offsetTop: offsetTop.value,
+          isFixed: true
+        };
+      }
+      isFixed.value = false;
+      return {
+        offsetTop: currentOffsetTop,
+        isFixed: false
+      };
+    }
+    function setupScroller() {
+      scroller = getParentScroller(stickyEl.value);
+      if (scroller !== window) {
+        scroller.addEventListener("scroll", handleScroll);
+      }
+    }
+    function handleScroll() {
+      const fixedParams = computeFixedParams();
+      if (fixedParams) {
+        call(props2.onScroll, fixedParams.offsetTop, fixedParams.isFixed);
+      }
+    }
+    function removeScrollListener() {
+      if (!scroller || scroller === window) {
+        return;
+      }
+      scroller.removeEventListener("scroll", handleScroll);
+    }
+    function resize() {
+      return __async(this, null, function* () {
+        isFixed.value = false;
+        yield raf();
+        computeFixedParams();
+      });
+    }
+    return {
+      stickyEl,
+      wrapperEl,
+      isFixed,
+      offsetTop,
+      fixedTop,
+      fixedLeft,
+      fixedWidth,
+      fixedHeight,
+      fixedWrapperWidth,
+      fixedWrapperHeight,
+      enableCSSMode,
+      enableFixedMode,
+      n,
+      classes,
+      resize,
+      toNumber
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/sticky/index.mjs

@@ -0,0 +1,12 @@
+import Sticky from "./Sticky.mjs";
+import { withInstall, withPropsDefaultsSetter } from "../utils/components.mjs";
+import { props as stickyProps } from "./props.mjs";
+withInstall(Sticky);
+withPropsDefaultsSetter(Sticky, stickyProps);
+const _StickyComponent = Sticky;
+var stdin_default = Sticky;
+export {
+  _StickyComponent,
+  stdin_default as default,
+  stickyProps
+};

package/es/sticky/props.mjs

@@ -0,0 +1,17 @@
+import { defineListenerProp } from "../utils/components.mjs";
+const props = {
+  offsetTop: {
+    type: [String, Number],
+    default: 0
+  },
+  zIndex: {
+    type: [String, Number],
+    default: 10
+  },
+  cssMode: Boolean,
+  disabled: Boolean,
+  onScroll: defineListenerProp()
+};
+export {
+  props
+};

package/es/sticky/sticky.css

@@ -0,0 +1 @@
+.var-sticky { position: relative;}.var-sticky--css-mode { position: sticky; position: -webkit-sticky;}

package/es/sticky/style/index.mjs

@@ -0,0 +1,3 @@
+import '../../styles/common.css'
+import '../sticky.css'
+import '../StickySfc.css'

package/es/style-provider/StyleProvider.mjs

@@ -0,0 +1,24 @@
+import { defineComponent, h } from "vue";
+import { formatStyleVars } from "../utils/elements.mjs";
+import { createNamespace } from "../utils/components.mjs";
+import { props } from "./props.mjs";
+import { call } from "@varlet/shared";
+const { name, n } = createNamespace("style-provider");
+const __sfc__ = defineComponent({
+  name,
+  props,
+  setup(props2, { slots }) {
+    return () => h(
+      props2.tag,
+      {
+        class: n(),
+        style: formatStyleVars(props2.styleVars)
+      },
+      call(slots.default)
+    );
+  }
+});
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/style-provider/index.mjs

@@ -0,0 +1,43 @@
+import VarStyleProvider from "./StyleProvider.mjs";
+import { formatStyleVars } from "../utils/elements.mjs";
+import { withInstall, withPropsDefaultsSetter } from "../utils/components.mjs";
+import { props as styleProviderProps } from "./props.mjs";
+const styleId = "varlet-style-vars";
+function removeStyle() {
+  const style = document.head.querySelector(`#${styleId}`);
+  if (style) {
+    document.head.removeChild(style);
+  }
+}
+function insertStyle(content) {
+  const style = document.createElement("style");
+  style.id = styleId;
+  style.innerHTML = content;
+  document.head.appendChild(style);
+}
+function StyleProvider(styleVars) {
+  if (styleVars == null) {
+    removeStyle();
+    return;
+  }
+  const styles = formatStyleVars(styleVars != null ? styleVars : {});
+  const content = Object.entries(styles).reduce((content2, [key, value]) => {
+    content2 += `${key}:${value};`;
+    return content2;
+  }, `:root:root {
+`);
+  removeStyle();
+  insertStyle(`${content}
+}`);
+}
+StyleProvider.Component = VarStyleProvider;
+withInstall(VarStyleProvider);
+withInstall(VarStyleProvider, StyleProvider);
+withPropsDefaultsSetter(StyleProvider, styleProviderProps);
+const _StyleProviderComponent = VarStyleProvider;
+var stdin_default = StyleProvider;
+export {
+  _StyleProviderComponent,
+  stdin_default as default,
+  styleProviderProps
+};

package/es/style-provider/props.mjs

@@ -0,0 +1,13 @@
+const props = {
+  styleVars: {
+    type: Object,
+    default: () => ({})
+  },
+  tag: {
+    type: String,
+    default: "div"
+  }
+};
+export {
+  props
+};

package/es/style-provider/style/index.mjs

@@ -0,0 +1,2 @@
+import '../../styles/common.css'
+import '../StyleProviderSfc.css'