@varlet/ui 2.20.1 → 2.20.2

package/es/time-picker/clock.mjs

@@ -0,0 +1,335 @@
+import dayjs from "dayjs/esm";
+import { computed, defineComponent, ref, watch } from "vue";
+import { hoursAmpm, hours24, minSec } from "./props.mjs";
+import { notConvert, convertHour, getIsDisableMinute, getIsDisableSecond, getNumberTime } from "./utils.mjs";
+import { toNumber, getRect } from "@varlet/shared";
+import { createNamespace } from "../utils/components.mjs";
+import { padStart } from "../utils/shared.mjs";
+const { n, classes } = createNamespace("time-picker");
+import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, toDisplayString as _toDisplayString, createCommentVNode as _createCommentVNode } from "vue";
+function __render__(_ctx, _cache) {
+  return _openBlock(), _createElementBlock(
+    "div",
+    {
+      class: _normalizeClass(_ctx.n("clock"))
+    },
+    [
+      _createElementVNode(
+        "div",
+        {
+          class: _normalizeClass(_ctx.n("clock-hand")),
+          style: _normalizeStyle(_ctx.handStyle)
+        },
+        null,
+        6
+        /* CLASS, STYLE */
+      ),
+      (_openBlock(true), _createElementBlock(
+        _Fragment,
+        null,
+        _renderList(_ctx.timeScales, (timeScale, index) => {
+          return _openBlock(), _createElementBlock(
+            "div",
+            {
+              class: _normalizeClass(
+                _ctx.classes(
+                  _ctx.n("clock-item"),
+                  [_ctx.isActive(index, false), _ctx.n("clock-item--active")],
+                  [_ctx.isDisable(timeScale), _ctx.n("clock-item--disable")]
+                )
+              ),
+              key: timeScale,
+              style: _normalizeStyle(_ctx.getStyle(index, timeScale, false))
+            },
+            _toDisplayString(timeScale),
+            7
+            /* TEXT, CLASS, STYLE */
+          );
+        }),
+        128
+        /* KEYED_FRAGMENT */
+      )),
+      _ctx.format === "24hr" && _ctx.type === "hour" ? (_openBlock(), _createElementBlock(
+        "div",
+        {
+          key: 0,
+          class: _normalizeClass(_ctx.n("clock-inner")),
+          ref: "inner"
+        },
+        [
+          (_openBlock(true), _createElementBlock(
+            _Fragment,
+            null,
+            _renderList(_ctx.hours24, (hour, index) => {
+              return _openBlock(), _createElementBlock(
+                "div",
+                {
+                  class: _normalizeClass(
+                    _ctx.classes(
+                      _ctx.n("clock-item"),
+                      [_ctx.isActive(index, true), _ctx.n("clock-item--active")],
+                      [_ctx.isDisable(hour), _ctx.n("clock-item--disable")]
+                    )
+                  ),
+                  key: hour,
+                  style: _normalizeStyle(_ctx.getStyle(index, hour, true))
+                },
+                _toDisplayString(hour),
+                7
+                /* TEXT, CLASS, STYLE */
+              );
+            }),
+            128
+            /* KEYED_FRAGMENT */
+          ))
+        ],
+        2
+        /* CLASS */
+      )) : _createCommentVNode("v-if", true)
+    ],
+    2
+    /* CLASS */
+  );
+}
+const __sfc__ = defineComponent({
+  name: "Clock",
+  props: {
+    isInner: {
+      type: Boolean,
+      required: true
+    },
+    rad: {
+      type: Number
+    },
+    format: {
+      type: String,
+      default: "ampm"
+    },
+    allowedTime: {
+      type: Object
+    },
+    time: {
+      type: Object,
+      required: true
+    },
+    useSeconds: {
+      type: Boolean,
+      default: false
+    },
+    preventNextUpdate: {
+      type: Boolean,
+      default: false
+    },
+    type: {
+      type: String,
+      default: "hour"
+    },
+    ampm: {
+      type: String,
+      default: "am"
+    },
+    color: {
+      type: String
+    },
+    min: {
+      type: String
+    },
+    max: {
+      type: String
+    }
+  },
+  emits: ["update", "change-prevent-update"],
+  setup(props, { emit }) {
+    const inner = ref(null);
+    const disableHour = ref([]);
+    const disable24HourIndex = ref([]);
+    const handStyle = computed(() => ({
+      transform: `rotate(${toNumber(props.rad)}deg)`,
+      height: props.isInner && props.type === "hour" ? "calc(50% - 40px)" : "calc(50% - 4px)",
+      backgroundColor: getHandleColor(),
+      borderColor: getHandleColor()
+    }));
+    const activeItemIndex = computed(() => {
+      if (props.rad === void 0)
+        return;
+      const value = props.rad / 30;
+      return value >= 0 ? value : value + 12;
+    });
+    const timeScales = computed(() => {
+      if (props.type === "hour")
+        return hoursAmpm;
+      return minSec;
+    });
+    const isDisableMinSec = (time, isDisable2) => {
+      time = time != null ? time : props.type === "minute" ? props.time.minute : props.time.second;
+      const disableMethod = props.type === "minute" ? getIsDisableMinute : getIsDisableSecond;
+      const values = {
+        time: toNumber(time),
+        format: props.format,
+        ampm: props.ampm,
+        hour: props.time.hour,
+        minute: toNumber(props.time.minute),
+        max: props.max,
+        min: props.min,
+        allowedTime: props.allowedTime,
+        disableHour: disableHour.value
+      };
+      if (isDisable2 && props.type === "minute")
+        Reflect.deleteProperty(values, "minute");
+      return disableMethod(values);
+    };
+    const getHandleColor = () => {
+      if (activeItemIndex.value === void 0)
+        return props.color;
+      const hour = props.isInner ? hours24[activeItemIndex.value] : timeScales.value[activeItemIndex.value];
+      if (timeScales.value === minSec) {
+        return isDisableMinSec() ? "#bdbdbd" : props.color;
+      }
+      return isDisable(hour) ? "#bdbdbd" : props.color;
+    };
+    const isActive = (index, inner2) => {
+      if (inner2)
+        return activeItemIndex.value === index && props.isInner;
+      return activeItemIndex.value === index && (!props.isInner || props.type !== "hour");
+    };
+    const isDisable = (time) => {
+      if (props.type === "hour") {
+        if (notConvert(props.format, props.ampm))
+          return disableHour.value.includes(time);
+        const timeIndex = hoursAmpm.findIndex((hour) => hour === time);
+        return disable24HourIndex.value.includes(timeIndex);
+      }
+      return isDisableMinSec(time, true);
+    };
+    const getStyle = (index, hour, inner2) => {
+      const rad = 2 * Math.PI / 12 * index - Math.PI / 2;
+      const left = 50 * (1 + Math.cos(rad));
+      const top = 50 * (1 + Math.sin(rad));
+      const computedColor = () => {
+        if (!isActive(index, inner2)) {
+          return {
+            backgroundColor: void 0,
+            color: void 0
+          };
+        }
+        if (isDisable(hour)) {
+          return {
+            backgroundColor: "#bdbdbd",
+            color: "#fff"
+          };
+        }
+        return {
+          backgroundColor: props.color,
+          color: void 0
+        };
+      };
+      const { backgroundColor, color } = computedColor();
+      return {
+        left: `${left}%`,
+        top: `${top}%`,
+        backgroundColor,
+        color
+      };
+    };
+    const getSize = () => {
+      const { width, height } = getRect(inner.value);
+      return {
+        width,
+        height
+      };
+    };
+    const getHour = () => {
+      if (activeItemIndex.value === void 0)
+        return void 0;
+      const hours = props.ampm === "am" ? hoursAmpm : hours24;
+      return padStart(hours[activeItemIndex.value], 2, "0");
+    };
+    watch([activeItemIndex, () => props.isInner], ([index, inner2], [oldIndex, oldInner]) => {
+      const isSame = index === oldIndex && inner2 === oldInner;
+      if (isSame || props.type !== "hour" || activeItemIndex.value === void 0)
+        return;
+      const newHour = inner2 ? hours24[activeItemIndex.value] : getHour();
+      const second = props.useSeconds ? `:${props.time.second}` : "";
+      const newTime = `${newHour}:${props.time.minute}${second}`;
+      if (!props.preventNextUpdate)
+        emit("update", newTime);
+      emit("change-prevent-update");
+    });
+    watch(
+      () => props.rad,
+      (rad, oldRad) => {
+        if (props.type === "hour" || rad === void 0 || oldRad === void 0)
+          return;
+        const radToMinSec = rad / 6 >= 0 ? rad / 6 : rad / 6 + 60;
+        const oldRadToMinSec = oldRad / 6 >= 0 ? oldRad / 6 : oldRad / 6 + 60;
+        if (radToMinSec === oldRadToMinSec)
+          return;
+        let newTime;
+        const { hourStr } = convertHour(props.format, props.ampm, props.time.hour);
+        if (props.type === "minute") {
+          const newMinute = dayjs().minute(radToMinSec).format("mm");
+          const second = props.useSeconds ? `:${props.time.second}` : "";
+          newTime = `${hourStr}:${newMinute}${second}`;
+        }
+        if (props.type === "second") {
+          const newSecond = dayjs().second(radToMinSec).format("ss");
+          const second = props.useSeconds ? `:${newSecond}` : "";
+          newTime = `${hourStr}:${props.time.minute}${second}`;
+        }
+        emit("update", newTime);
+      }
+    );
+    watch(
+      [() => props.max, () => props.min, () => props.allowedTime],
+      ([max, min, allowedTime]) => {
+        disableHour.value = [];
+        if (max && !min) {
+          const { hour: maxHour } = getNumberTime(max);
+          const disableAmpmHours = hoursAmpm.filter((hour) => toNumber(hour) > maxHour);
+          const disable24Hours = hours24.filter((hour) => toNumber(hour) > maxHour);
+          disableHour.value = [...disableAmpmHours, ...disable24Hours];
+        }
+        if (!max && min) {
+          const { hour: minHour } = getNumberTime(min);
+          const disableAmpmHours = hoursAmpm.filter((hour) => toNumber(hour) < minHour);
+          const disable24Hours = hours24.filter((hour) => toNumber(hour) < minHour);
+          disableHour.value = [...disableAmpmHours, ...disable24Hours];
+        }
+        if (max && min) {
+          const { hour: maxHour } = getNumberTime(max);
+          const { hour: minHour } = getNumberTime(min);
+          const disableAmpmHours = hoursAmpm.filter((hour) => toNumber(hour) < minHour || toNumber(hour) > maxHour);
+          const disable24Hours = hours24.filter((hour) => toNumber(hour) < minHour || toNumber(hour) > maxHour);
+          disableHour.value = [...disableAmpmHours, ...disable24Hours];
+        }
+        if (allowedTime == null ? void 0 : allowedTime.hours) {
+          const { hours } = allowedTime;
+          const disableAmpmHours = hoursAmpm.filter((hour) => !hours(toNumber(hour)));
+          const disable24Hours = hours24.filter((hour) => !hours(toNumber(hour)));
+          disableHour.value = [.../* @__PURE__ */ new Set([...disableHour.value, ...disableAmpmHours, ...disable24Hours])];
+        }
+        disable24HourIndex.value = disableHour.value.map((hour) => hours24.findIndex((hour24) => hour === hour24)).filter((hour) => hour >= 0);
+      },
+      { immediate: true }
+    );
+    return {
+      n,
+      classes,
+      hours24,
+      timeScales,
+      inner,
+      handStyle,
+      disableHour,
+      isActive,
+      isDisable,
+      getSize,
+      getStyle,
+      activeItemIndex
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/time-picker/index.mjs

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

package/es/time-picker/props.mjs

@@ -0,0 +1,33 @@
+import { defineListenerProp } from "../utils/components.mjs";
+const hoursAmpm = ["12", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11"];
+const hours24 = ["00", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"];
+const minSec = ["00", "05", "10", "15", "20", "25", "30", "35", "40", "45", "50", "55"];
+const props = {
+  modelValue: String,
+  elevation: {
+    type: [Boolean, Number, String],
+    default: false
+  },
+  hint: String,
+  color: String,
+  /** @deprecated Use titleColor to instead. */
+  headerColor: String,
+  titleColor: String,
+  format: {
+    type: String,
+    default: "ampm"
+  },
+  allowedTime: Object,
+  min: String,
+  max: String,
+  useSeconds: Boolean,
+  readonly: Boolean,
+  "onUpdate:modelValue": defineListenerProp(),
+  onChange: defineListenerProp()
+};
+export {
+  hours24,
+  hoursAmpm,
+  minSec,
+  props
+};

package/es/time-picker/style/index.mjs

@@ -0,0 +1,4 @@
+import '../../styles/common.css'
+import '../../styles/elevation.css'
+import '../timePicker.css'
+import '../TimePickerSfc.css'

package/es/time-picker/timePicker.css

@@ -0,0 +1 @@
+:root { --time-picker-border-radius: 4px; --time-picker-font-size: var(--font-size-md); --time-picker-min-width: 290px; --time-picker-height: 385px; --time-picker-title-height: 105px; --time-picker-title-padding: 16px; --time-picker-title-margin-bottom: 8px; --time-picker-title-color: #fff; --time-picker-title-background: var(--color-primary); --time-picker-title-hint-font-size: 14px; --time-picker-title-time-font-size: 50px; --time-picker-title-time-margin: 0 5px; --time-picker-title-ampm-margin-left: 5px; --time-picker-clock-left: 27px; --time-picker-clock-right: 27px; --time-picker-clock-top: 27px; --time-picker-clock-bottom: 27px; --time-picker-clock-container-width: 256px; --time-picker-clock-container-height: 256px; --time-picker-clock-container-background: #e0e0e0; --time-picker-clock-hand-height: calc(50% - 4px); --time-picker-clock-hand-width: 2px; --time-picker-clock-hand-bottom: 50%; --time-picker-clock-hand-left: calc(50% - 1px); --time-picker-clock-hand-background: var(--color-primary); --time-picker-clock-hand-border-color: var(--color-primary); --time-picker-clock-hand-before-width: 10px; --time-picker-clock-hand-before-height: 10px; --time-picker-clock-hand-before-border-width: 2px; --time-picker-clock-hand-after-width: 4px; --time-picker-clock-hand-after-height: 4px; --time-picker-clock-item-height: 32px; --time-picker-clock-item-width: 32px; --time-picker-clock-item-active-background: var(--color-primary); --time-picker-clock-item-active-color: #fff; --time-picker-clock-item-disable-color: rgba(0, 0, 0, 0.26); --time-picker-clock-item-text-color: #555; --time-picker-inner-left: 36px; --time-picker-inner-right: 36px; --time-picker-inner-top: 36px; --time-picker-inner-bottom: 36px; --time-picker-body-background: #fff;}.after-before-basic { content: ''; position: absolute; border-radius: 100%; left: 50%; transform: translate(-50%, -50%);}.var-time-picker { border-radius: var(--time-picker-border-radius); contain: layout style; display: flex; width: 100%; flex-direction: column; font-size: var(--time-picker-font-size); position: relative; min-width: var(--time-picker-min-width); height: var(--time-picker-height); overflow: hidden; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-time-picker__title { min-height: var(--time-picker-title-height); padding: var(--time-picker-title-padding); color: var(--time-picker-title-color); background: var(--time-picker-title-background); display: block;}.var-time-picker__title-hint { font-size: var(--time-picker-title-hint-font-size); margin-bottom: var(--time-picker-title-margin-bottom);}.var-time-picker__title-time-container { display: flex; align-items: flex-end; justify-content: flex-end;}.var-time-picker__title-btn { opacity: 0.6; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier); white-space: nowrap;}.var-time-picker__title-btn--active { opacity: 1;}.var-time-picker__title-time { display: flex; justify-content: flex-end; font-size: var(--time-picker-title-time-font-size);}.var-time-picker__title-time .var-time-picker__title-btn { align-items: center; margin: var(--time-picker-title-time-margin);}.var-time-picker__title-ampm { margin-left: var(--time-picker-title-ampm-margin-left);}.var-time-picker__body { flex: 1; display: flex; align-items: center; justify-content: center; background-color: var(--time-picker-body-background);}.var-time-picker__clock { position: absolute; bottom: var(--time-picker-clock-bottom); left: var(--time-picker-clock-left); right: var(--time-picker-clock-right); top: var(--time-picker-clock-top);}.var-time-picker__clock-container { width: var(--time-picker-clock-container-width); height: var(--time-picker-clock-container-height); background: var(--time-picker-clock-container-background); border-radius: 50%; position: relative;}.var-time-picker__clock-hand { height: var(--time-picker-clock-hand-height); width: var(--time-picker-clock-hand-width); bottom: var(--time-picker-clock-hand-bottom); left: var(--time-picker-clock-hand-left); transform-origin: center bottom; position: absolute; will-change: transform; z-index: 1; background-color: var(--time-picker-clock-hand-background); border-color: var(--time-picker-clock-hand-border-color);}.var-time-picker__clock-hand::before { content: ''; position: absolute; border-radius: 100%; left: 50%; transform: translate(-50%, -50%); background: transparent; border: var(--time-picker-clock-hand-before-border-width) solid; width: var(--time-picker-clock-hand-before-width); height: var(--time-picker-clock-hand-before-height); top: -5px; border-color: inherit;}.var-time-picker__clock-hand::after { content: ''; position: absolute; border-radius: 100%; left: 50%; transform: translate(-50%, -50%); border-color: inherit; height: var(--time-picker-clock-hand-after-height); width: var(--time-picker-clock-hand-after-width); top: 100%; border-style: solid; background-color: inherit;}.var-time-picker__clock-item { align-items: center; border-radius: 100%; display: flex; justify-content: center; height: var(--time-picker-clock-item-height); position: absolute; width: var(--time-picker-clock-item-width); user-select: none; transform: translate(-50%, -50%); color: var(--time-picker-clock-item-text-color);}.var-time-picker__clock-item--active { background: var(--time-picker-clock-item-active-background); z-index: 2; color: var(--time-picker-clock-item-active-color);}.var-time-picker__clock-item--disable { color: var(--time-picker-clock-item-disable-color);}.var-time-picker__clock-inner { position: absolute; bottom: var(--time-picker-inner-bottom); left: var(--time-picker-inner-left); right: var(--time-picker-inner-right); top: var(--time-picker-inner-top);}.var-time-picker-panel-fade-enter-from,.var-time-picker-panel-fade-leave-to { transition: 0.3s var(--cubic-bezier); opacity: 0;}.var-time-picker-panel-fade-leave-active { position: absolute;}

package/es/time-picker/utils.mjs

@@ -0,0 +1,76 @@
+import { hours24, hoursAmpm } from "./props.mjs";
+import { toNumber } from "@varlet/shared";
+const notConvert = (format, ampm) => format === "24hr" || ampm === "am";
+const convertHour = (format, ampm, hour) => {
+  const index = hoursAmpm.findIndex((hourAmpm) => toNumber(hourAmpm) === toNumber(hour));
+  const getHour = notConvert(format, ampm) ? hour : hours24[index];
+  return {
+    hourStr: getHour,
+    hourNum: toNumber(getHour)
+  };
+};
+const getNumberTime = (time) => {
+  const [hour, minute, second] = time.split(":");
+  return {
+    hour: toNumber(hour),
+    minute: toNumber(minute),
+    second: toNumber(second)
+  };
+};
+const getIsDisableMinute = (values) => {
+  var _a, _b;
+  const { time, format, ampm, hour, max, min, disableHour } = values;
+  const { hourStr, hourNum } = convertHour(format, ampm, hour);
+  let isBetweenMinMax = false;
+  let isAllow = false;
+  if (disableHour.includes(hourStr))
+    return true;
+  if (max && !min) {
+    const { hour: maxHour, minute: maxMinute } = getNumberTime(max);
+    isBetweenMinMax = maxHour === hourNum && time > maxMinute;
+  }
+  if (!max && min) {
+    const { hour: minHour, minute: minMinute } = getNumberTime(min);
+    isBetweenMinMax = minHour === hourNum && time < minMinute;
+  }
+  if (max && min) {
+    const { hour: maxHour, minute: maxMinute } = getNumberTime(max);
+    const { hour: minHour, minute: minMinute } = getNumberTime(min);
+    isBetweenMinMax = minHour === hourNum && time < minMinute || maxHour === hourNum && time > maxMinute;
+  }
+  if ((_a = values.allowedTime) == null ? void 0 : _a.minutes)
+    isAllow = (_b = values.allowedTime) == null ? void 0 : _b.minutes(time);
+  return isBetweenMinMax || isAllow;
+};
+const getIsDisableSecond = (values) => {
+  var _a, _b;
+  const { time, format, ampm, hour, minute, max, min, disableHour } = values;
+  const { hourStr, hourNum } = convertHour(format, ampm, hour);
+  let isBetweenMinMax = false;
+  let isAllow = false;
+  if (disableHour.includes(hourStr))
+    return true;
+  if (max && !min) {
+    const { hour: maxHour, minute: maxMinute, second: maxSecond } = getNumberTime(max);
+    isBetweenMinMax = maxHour === hourNum && maxMinute < minute || maxMinute === minute && time > maxSecond;
+  }
+  if (!max && min) {
+    const { hour: minHour, minute: minMinute, second: minSecond } = getNumberTime(min);
+    isBetweenMinMax = minHour === hourNum && minMinute > minute || minMinute === minute && time > minSecond;
+  }
+  if (max && min) {
+    const { hour: maxHour, minute: maxMinute, second: maxSecond } = getNumberTime(max);
+    const { hour: minHour, minute: minMinute, second: minSecond } = getNumberTime(min);
+    isBetweenMinMax = maxHour === hourNum && maxMinute < minute || minHour === hourNum && minMinute > minute || maxHour === hourNum && maxMinute === minute && time > maxSecond || minHour === hourNum && minMinute === minute && time < minSecond;
+  }
+  if ((_a = values.allowedTime) == null ? void 0 : _a.seconds)
+    isAllow = (_b = values.allowedTime) == null ? void 0 : _b.seconds(time);
+  return isBetweenMinMax || isAllow;
+};
+export {
+  convertHour,
+  getIsDisableMinute,
+  getIsDisableSecond,
+  getNumberTime,
+  notConvert
+};

package/es/tooltip/Tooltip.mjs

@@ -0,0 +1,129 @@
+import { createNamespace, useTeleport } from "../utils/components.mjs";
+import { defineComponent } from "vue";
+import { toSizeUnit } from "../utils/elements.mjs";
+import { usePopover } from "../menu/usePopover.mjs";
+import { props } from "./props.mjs";
+const { name, n, classes } = createNamespace("tooltip");
+import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, vShow as _vShow, withModifiers as _withModifiers, withDirectives as _withDirectives, Transition as _Transition, withCtx as _withCtx, createVNode as _createVNode, Teleport as _Teleport, openBlock as _openBlock, createBlock as _createBlock, createElementBlock as _createElementBlock } from "vue";
+function __render__(_ctx, _cache) {
+  return _openBlock(), _createElementBlock(
+    "div",
+    {
+      ref: "host",
+      class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box"))),
+      onClick: _cache[3] || (_cache[3] = (...args) => _ctx.handleHostClick && _ctx.handleHostClick(...args)),
+      onMouseenter: _cache[4] || (_cache[4] = (...args) => _ctx.handleHostMouseenter && _ctx.handleHostMouseenter(...args)),
+      onMouseleave: _cache[5] || (_cache[5] = (...args) => _ctx.handleHostMouseleave && _ctx.handleHostMouseleave(...args))
+    },
+    [
+      _renderSlot(_ctx.$slots, "default"),
+      (_openBlock(), _createBlock(_Teleport, {
+        to: _ctx.teleport === false ? void 0 : _ctx.teleport,
+        disabled: _ctx.teleportDisabled || _ctx.teleport === false
+      }, [
+        _createVNode(_Transition, {
+          name: _ctx.n(),
+          onAfterEnter: _ctx.onOpened,
+          onAfterLeave: _ctx.handleClosed,
+          persisted: ""
+        }, {
+          default: _withCtx(() => [
+            _withDirectives(_createElementVNode(
+              "div",
+              {
+                ref: "popover",
+                class: _normalizeClass(_ctx.classes(_ctx.n("tooltip"), _ctx.n("$--box"))),
+                style: _normalizeStyle({ zIndex: _ctx.zIndex }),
+                onClick: _cache[0] || (_cache[0] = _withModifiers(() => {
+                }, ["stop"])),
+                onMouseenter: _cache[1] || (_cache[1] = (...args) => _ctx.handlePopoverMouseenter && _ctx.handlePopoverMouseenter(...args)),
+                onMouseleave: _cache[2] || (_cache[2] = (...args) => _ctx.handlePopoverMouseleave && _ctx.handlePopoverMouseleave(...args))
+              },
+              [
+                _createElementVNode(
+                  "div",
+                  {
+                    style: _normalizeStyle({ background: _ctx.color, width: _ctx.sameWidth ? _ctx.toSizeUnit(Math.ceil(_ctx.hostSize.width)) : void 0 }),
+                    class: _normalizeClass(_ctx.classes(_ctx.n("content-container"), _ctx.n(`--${_ctx.type}`)))
+                  },
+                  [
+                    _renderSlot(_ctx.$slots, "content", {}, () => [
+                      _createTextVNode(
+                        _toDisplayString(_ctx.content),
+                        1
+                        /* TEXT */
+                      )
+                    ])
+                  ],
+                  6
+                  /* CLASS, STYLE */
+                )
+              ],
+              38
+              /* CLASS, STYLE, HYDRATE_EVENTS */
+            ), [
+              [_vShow, _ctx.show]
+            ])
+          ]),
+          _: 3
+          /* FORWARDED */
+        }, 8, ["name", "onAfterEnter", "onAfterLeave"])
+      ], 8, ["to", "disabled"]))
+    ],
+    34
+    /* CLASS, HYDRATE_EVENTS */
+  );
+}
+const __sfc__ = defineComponent({
+  name,
+  props,
+  setup(props2) {
+    const { disabled: teleportDisabled } = useTeleport();
+    const {
+      popover,
+      host,
+      hostSize,
+      show,
+      zIndex,
+      handleHostClick,
+      handleHostMouseenter,
+      handleHostMouseleave,
+      handlePopoverMouseenter,
+      handlePopoverMouseleave,
+      handlePopoverClose,
+      handleClosed,
+      // expose
+      open,
+      // expose
+      close,
+      // expose
+      resize
+    } = usePopover(props2);
+    return {
+      popover,
+      host,
+      hostSize,
+      show,
+      zIndex,
+      teleportDisabled,
+      toSizeUnit,
+      n,
+      classes,
+      handleHostClick,
+      handlePopoverClose,
+      handleHostMouseenter,
+      handleHostMouseleave,
+      handlePopoverMouseenter,
+      handlePopoverMouseleave,
+      handleClosed,
+      resize,
+      open,
+      close
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/tooltip/index.mjs

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

package/es/tooltip/props.mjs

@@ -0,0 +1,47 @@
+import { defineListenerProp } from "../utils/components.mjs";
+const props = {
+  type: {
+    type: String,
+    default: "default"
+  },
+  color: String,
+  content: String,
+  show: Boolean,
+  disabled: Boolean,
+  trigger: {
+    type: String,
+    default: "hover"
+  },
+  reference: String,
+  placement: {
+    type: String,
+    default: "bottom"
+  },
+  strategy: {
+    type: String,
+    default: "absolute"
+  },
+  offsetX: {
+    type: [Number, String],
+    default: 0
+  },
+  offsetY: {
+    type: [Number, String],
+    default: 0
+  },
+  teleport: {
+    type: [String, Object, Boolean],
+    default: "body"
+  },
+  sameWidth: Boolean,
+  closeOnClickReference: Boolean,
+  onOpen: defineListenerProp(),
+  onOpened: defineListenerProp(),
+  onClose: defineListenerProp(),
+  onClosed: defineListenerProp(),
+  onClickOutside: defineListenerProp(),
+  "onUpdate:show": defineListenerProp()
+};
+export {
+  props
+};

package/es/tooltip/style/index.mjs

@@ -0,0 +1,3 @@
+import '../../styles/common.css'
+import '../tooltip.css'
+import '../TooltipSfc.css'

package/es/tooltip/tooltip.css

@@ -0,0 +1 @@
+:root { --tooltip-opacity: 0.9; --tooltip-border-radius: 4px; --tooltip-font-size: 14px; --tooltip-padding: 8px 16px; --tooltip-default-color: #616161; --tooltip-offset: 10px; --tooltip-primary-color: var(--color-primary); --tooltip-info-color: var(--color-info); --tooltip-success-color: var(--color-success); --tooltip-warning-color: var(--color-warning); --tooltip-danger-color: var(--color-danger);}.var-tooltip { display: inline-block;}.var-tooltip-enter-from,.var-tooltip-leave-to { opacity: 0; transform: scale(0.8);}.var-tooltip-enter-active,.var-tooltip-leave-active { transition-property: opacity, transform; transition-duration: 0.2s;}.var-tooltip__content-container { display: inline-block; text-align: center; border-radius: var(--tooltip-border-radius); font-size: var(--tooltip-font-size); padding: var(--tooltip-padding); opacity: var(--tooltip-opacity); transition: opacity 0.25s, background-color 0.25s;}.var-tooltip--default { color: #fff; background: var(--tooltip-default-color);}.var-tooltip--primary { color: #fff; background-color: var(--tooltip-primary-color);}.var-tooltip--info { color: #fff; background-color: var(--tooltip-info-color);}.var-tooltip--success { color: #fff; background-color: var(--tooltip-success-color);}.var-tooltip--warning { color: #fff; background-color: var(--tooltip-warning-color);}.var-tooltip--danger { color: #fff; background-color: var(--tooltip-danger-color);}.var-tooltip__tooltip[data-popper-placement='top'] .var-tooltip__content-container,.var-tooltip__tooltip[data-popper-placement='top-start'] .var-tooltip__content-container,.var-tooltip__tooltip[data-popper-placement='top-end'] .var-tooltip__content-container { transform: translateY(calc(-1 * var(--tooltip-offset)));}.var-tooltip__tooltip[data-popper-placement='bottom'] .var-tooltip__content-container,.var-tooltip__tooltip[data-popper-placement='bottom-start'] .var-tooltip__content-container,.var-tooltip__tooltip[data-popper-placement='bottom-end'] .var-tooltip__content-container { transform: translateY(var(--tooltip-offset));}.var-tooltip__tooltip[data-popper-placement='right'] .var-tooltip__content-container,.var-tooltip__tooltip[data-popper-placement='right-start'] .var-tooltip__content-container,.var-tooltip__tooltip[data-popper-placement='right-end'] .var-tooltip__content-container { transform: translateX(var(--tooltip-offset));}.var-tooltip__tooltip[data-popper-placement='left'] .var-tooltip__content-container,.var-tooltip__tooltip[data-popper-placement='left-start'] .var-tooltip__content-container,.var-tooltip__tooltip[data-popper-placement='left-end'] .var-tooltip__content-container { transform: translateX(calc(-1 * var(--tooltip-offset)));}