@youcan/celeste 0.6.3

package/dist/es/chunks/alpha-slider.js

@@ -0,0 +1,128 @@
+import { defineComponent, useTemplateRef, computed, onUnmounted, openBlock, createElementBlock, createElementVNode, normalizeStyle } from "vue";
+import { useUserPageSelection } from "../use-user-select.js";
+import { getAbsolutePosition, getPageXYFromEvent, resolveArrowDirection } from "../color.js";
+import { d as defineColorModel } from "./use-color-model.js";
+const _hoisted_1 = { class: "celeste-color-slider" };
+const _hoisted_2 = ["aria-valuenow"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "alpha-slider",
+  props: {
+    modelValue: {}
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const tinyColorRef = defineColorModel(props, emit);
+    const { preventPageUserSelect, allowPageUserSelect } = useUserPageSelection();
+    const containerRef = useTemplateRef("slider-track");
+    const alpha = computed(() => tinyColorRef.value.getAlpha());
+    const alphaSliderBg = computed(() => {
+      const { r, g, b } = tinyColorRef.value.toRgb();
+      return `
+    linear-gradient(to right, rgba(${r}, ${g}, ${b}, 0), rgba(${r}, ${g}, ${b}, 1)),
+      repeating-conic-gradient(
+        #ffffff 0deg,
+        #ffffff 90deg,
+        rgba(0, 0, 0, 0.3) 90deg,
+        rgba(0, 0, 0, 0.3) 180deg
+      ) 0% -25% / 6px 6px
+  `;
+    });
+    const trackThumbBg = computed(() => {
+      const { r, g, b, a } = tinyColorRef.value.toRgb();
+      const rgbaString = [r, g, b, a].join(",");
+      return `rgba(${rgbaString})`;
+    });
+    function handleChange(e, skip = false) {
+      if (!skip) {
+        e.preventDefault();
+      }
+      const container = containerRef.value;
+      if (!container) {
+        return;
+      }
+      const containerWidth = container.clientWidth;
+      const { x: xOffset } = getAbsolutePosition(container);
+      const { x: pageX } = getPageXYFromEvent(e);
+      const left = pageX - xOffset;
+      let a;
+      if (left < 0) {
+        a = 0;
+      } else if (left > containerWidth) {
+        a = 1;
+      } else {
+        a = Math.round(left * 100 / containerWidth) / 100;
+      }
+      if (alpha.value !== a) {
+        tinyColorRef.value = tinyColorRef.value.setAlpha(a).clone();
+      }
+    }
+    function handleMouseDown(e) {
+      handleChange(e, true);
+      preventPageUserSelect();
+      window.addEventListener("mousemove", handleChange);
+      window.addEventListener("mouseup", handleMouseUp);
+    }
+    function handleMouseUp() {
+      allowPageUserSelect();
+      unbindEventListeners();
+    }
+    function unbindEventListeners() {
+      window.removeEventListener("mousemove", handleChange);
+      window.removeEventListener("mouseup", handleMouseUp);
+    }
+    function handleKeydown(e) {
+      const direction = resolveArrowDirection(e);
+      if (!direction) {
+        return;
+      }
+      e.preventDefault();
+      const currentValue = alpha.value;
+      let newValue;
+      switch (direction) {
+        case "left": {
+          newValue = currentValue - 0.1 < 0 ? 0 : currentValue - 0.1;
+          break;
+        }
+        case "right": {
+          newValue = currentValue + 0.1 > 1 ? 1 : currentValue + 0.1;
+          break;
+        }
+      }
+      if (typeof newValue !== "undefined") {
+        tinyColorRef.value = tinyColorRef.value.setAlpha(newValue).clone();
+      }
+    }
+    onUnmounted(() => {
+      unbindEventListeners();
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", {
+          ref: "slider-track",
+          class: "slider-track",
+          style: normalizeStyle({ background: alphaSliderBg.value }),
+          role: "slider",
+          "aria-label": "Transparency",
+          "aria-valuemax": "1",
+          "aria-valuemin": "0",
+          "aria-valuenow": alpha.value.toFixed(1),
+          tabindex: "0",
+          onMousedown: handleMouseDown,
+          onTouchmovePassive: handleChange,
+          onTouchstartPassive: handleChange,
+          onKeydown: handleKeydown
+        }, [
+          createElementVNode("div", {
+            class: "celeste-color-thumb",
+            style: normalizeStyle({ left: `${alpha.value * 100}%`, background: trackThumbBg.value })
+          }, null, 4)
+        ], 44, _hoisted_2)
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/es/chunks/checkbox.vue_vue_type_style_index_0_lang.js

@@ -0,0 +1,39 @@
+import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, createVNode } from "vue";
+import { useDelegatedProps } from "../use-delegated-props.js";
+import { c as clsx } from "./clsx.js";
+import { x as xe, z as zv, K as Kv } from "./index.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "checkbox",
+  props: {
+    defaultChecked: { type: Boolean },
+    checked: { type: [Boolean, String] },
+    disabled: { type: Boolean },
+    required: { type: Boolean },
+    name: {},
+    value: {},
+    id: {},
+    asChild: { type: Boolean },
+    as: {},
+    class: {}
+  },
+  emits: ["update:checked"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const delegatedProps = useDelegatedProps(props, "class");
+    const forwarded = xe(delegatedProps, emits);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(zv), mergeProps(unref(forwarded), {
+        class: unref(clsx)("celeste-checkbox", props.class)
+      }), {
+        default: withCtx(() => [
+          createVNode(unref(Kv), { class: "celeste-checkbox-indicator" })
+        ]),
+        _: 1
+      }, 16, ["class"]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/es/chunks/clsx.js

@@ -0,0 +1,16 @@
+function r(e) {
+  var t, f, n = "";
+  if ("string" == typeof e || "number" == typeof e) n += e;
+  else if ("object" == typeof e) if (Array.isArray(e)) {
+    var o = e.length;
+    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+  } else for (f in e) e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+export {
+  clsx as c
+};

package/dist/es/chunks/content-divider.vue_vue_type_style_index_0_lang.js

@@ -0,0 +1,53 @@
+import { defineComponent, openBlock, createBlock, unref, normalizeClass, withCtx, createElementBlock, createCommentVNode, toDisplayString, createElementVNode, createTextVNode } from "vue";
+import { c as clsx } from "./clsx.js";
+import { Q as Qf } from "./index.js";
+const _hoisted_1 = {
+  key: 0,
+  class: "celecte-content-divider-type-line"
+};
+const _hoisted_2 = {
+  key: 1,
+  class: "celecte-content-divider-type-text"
+};
+const _hoisted_3 = {
+  key: 2,
+  class: "celecte-content-divider-type-text-line"
+};
+const _hoisted_4 = {
+  key: 3,
+  class: "celecte-content-divider-type-solid-text"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "content-divider",
+  props: {
+    class: {},
+    type: { default: "line" },
+    text: {}
+  },
+  setup(__props) {
+    const props = __props;
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Qf), {
+        "aria-label": "divider",
+        class: normalizeClass([unref(clsx)("celeste-celecte-content-divider", props.class), "celecte-content-divider"])
+      }, {
+        default: withCtx(() => [
+          _ctx.type === "line" ? (openBlock(), createElementBlock("div", _hoisted_1)) : createCommentVNode("", true),
+          _ctx.type === "text" && _ctx.text ? (openBlock(), createElementBlock("div", _hoisted_2, toDisplayString(_ctx.text), 1)) : createCommentVNode("", true),
+          _ctx.type === "text-line" && _ctx.text ? (openBlock(), createElementBlock("div", _hoisted_3, [
+            _cache[0] || (_cache[0] = createElementVNode("hr", null, null, -1)),
+            _cache[1] || (_cache[1] = createTextVNode()),
+            createElementVNode("span", null, toDisplayString(_ctx.text), 1),
+            _cache[2] || (_cache[2] = createTextVNode()),
+            _cache[3] || (_cache[3] = createElementVNode("hr", null, null, -1))
+          ])) : createCommentVNode("", true),
+          _ctx.type === "solid-text" && _ctx.text ? (openBlock(), createElementBlock("div", _hoisted_4, toDisplayString(_ctx.text), 1)) : createCommentVNode("", true)
+        ]),
+        _: 1
+      }, 8, ["class"]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/es/chunks/dropdown-menu-content.vue_vue_type_style_index_0_lang.js

@@ -0,0 +1,52 @@
+import { defineComponent, openBlock, createBlock, unref, withCtx, createVNode, mergeProps, renderSlot } from "vue";
+import { useDelegatedProps } from "../use-delegated-props.js";
+import { c as clsx } from "./clsx.js";
+import { x as xe, i as ih, u as uh } from "./index.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "dropdown-menu-content",
+  props: {
+    forceMount: { type: Boolean },
+    loop: { type: Boolean },
+    side: {},
+    sideOffset: { default: 4 },
+    align: {},
+    alignOffset: {},
+    avoidCollisions: { type: Boolean },
+    collisionBoundary: {},
+    collisionPadding: {},
+    arrowPadding: {},
+    sticky: {},
+    hideWhenDetached: { type: Boolean },
+    updatePositionStrategy: {},
+    prioritizePosition: { type: Boolean },
+    asChild: { type: Boolean },
+    as: {},
+    class: {}
+  },
+  emits: ["escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "closeAutoFocus"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const delegatedProps = useDelegatedProps(props, "class");
+    const forwarded = xe(delegatedProps, emits);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(ih), null, {
+        default: withCtx(() => [
+          createVNode(unref(uh), mergeProps(unref(forwarded), {
+            "force-mount": "",
+            class: unref(clsx)("celeste-dropdown-menu-content", props.class)
+          }), {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "default")
+            ]),
+            _: 3
+          }, 16, ["class"])
+        ]),
+        _: 3
+      });
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/es/chunks/dropdown-menu-sub-content.vue_vue_type_style_index_0_lang.js

@@ -0,0 +1,50 @@
+import { defineComponent, openBlock, createBlock, unref, withCtx, createVNode, mergeProps, renderSlot } from "vue";
+import { useDelegatedProps } from "../use-delegated-props.js";
+import { c as clsx } from "./clsx.js";
+import { x as xe, i as ih, C as Ch } from "./index.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "dropdown-menu-sub-content",
+  props: {
+    forceMount: { type: Boolean },
+    loop: { type: Boolean },
+    sideOffset: {},
+    alignOffset: {},
+    avoidCollisions: { type: Boolean },
+    collisionBoundary: {},
+    collisionPadding: {},
+    arrowPadding: {},
+    sticky: {},
+    hideWhenDetached: { type: Boolean },
+    updatePositionStrategy: {},
+    prioritizePosition: { type: Boolean },
+    asChild: { type: Boolean },
+    as: {},
+    class: {}
+  },
+  emits: ["escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "entryFocus", "openAutoFocus", "closeAutoFocus"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const delegatedProps = useDelegatedProps(props, "class");
+    const forwarded = xe(delegatedProps, emits);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(ih), null, {
+        default: withCtx(() => [
+          createVNode(unref(Ch), mergeProps(unref(forwarded), {
+            "force-mount": "",
+            class: unref(clsx)(props.class, "celeste-dropdown-menu-sub-content")
+          }), {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "default")
+            ]),
+            _: 3
+          }, 16, ["class"])
+        ]),
+        _: 3
+      });
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/es/chunks/dropdown-menu-sub-trigger.vue_vue_type_style_index_0_lang.js

@@ -0,0 +1,33 @@
+import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot, createElementVNode } from "vue";
+import { useDelegatedProps } from "../use-delegated-props.js";
+import { c as clsx } from "./clsx.js";
+import { A as At, w as wh } from "./index.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "dropdown-menu-sub-trigger",
+  props: {
+    disabled: { type: Boolean },
+    textValue: {},
+    asChild: { type: Boolean },
+    as: {},
+    class: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const delegatedProps = useDelegatedProps(props, "class");
+    const forwardedProps = At(delegatedProps);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(wh), mergeProps(unref(forwardedProps), {
+        class: unref(clsx)(props.class, "celeste-dropdown-menu-sub-trigger")
+      }), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default"),
+          _cache[0] || (_cache[0] = createElementVNode("i", { class: "i-celeste-arrow-right-s-line" }, null, -1))
+        ]),
+        _: 3
+      }, 16, ["class"]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/es/chunks/dropdown-menu-sub.js

@@ -0,0 +1,26 @@
+import { defineComponent, openBlock, createBlock, unref, normalizeProps, guardReactiveProps, withCtx, renderSlot } from "vue";
+import { x as xe, b as bh } from "./index.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "dropdown-menu-sub",
+  props: {
+    defaultOpen: { type: Boolean },
+    open: { type: Boolean }
+  },
+  emits: ["update:open"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const forwarded = xe(props, emits);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(bh), normalizeProps(guardReactiveProps(unref(forwarded))), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 16);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};