@youcan/celeste 0.6.30 → 0.6.32

package/dist/es/index.js

@@ -1,10 +1,10 @@
-import alert from "./alert.js";
+import Alert from "./alert.js";
 import Badge from "./badge.js";
 import statusBadge from "./status-badge.js";
 import Button from "./button.js";
 import CompactButton from "./compact-button.js";
 import fancyButton from "./fancy-button.js";
-import linkButton from "./link-button.js";
+import LinkButton from "./link-button.js";
 import socialButton from "./social-button.js";
 import checkboxLabel from "./checkbox-label.js";
 import { _ as _sfc_main } from "./chunks/checkbox.vue_vue_type_style_index_0_lang.js";
@@ -33,7 +33,7 @@ import { _ as _sfc_main$4 } from "./chunks/dropdown-menu-sub.js";
 import dropdownMenuTrigger from "./dropdown-menu-trigger.js";
 import dropdownMenu from "./dropdown-menu.js";
 import hintText from "./hint-text.js";
-import label from "./label.js";
+import Label from "./label.js";
 import modalBody from "./modal-body.js";
 import { _ as _sfc_main$8 } from "./chunks/modal-close.js";
 import modalContent from "./modal-content.js";
@@ -44,12 +44,13 @@ import { _ as _sfc_main$7 } from "./chunks/modal.js";
 import PopoverContent from "./popover-content.js";
 import PopoverTrigger from "./popover-trigger.js";
 import { _ as _sfc_main$a } from "./chunks/popover.js";
+import richEditor from "./rich-editor.js";
 import { _ as _sfc_main$b } from "./chunks/scroll-area.js";
 import segmentedControlItem from "./segmented-control-item.js";
 import segmentedControl from "./segmented-control.js";
 import SelectContent from "./select-content.js";
 import { _ as _sfc_main$d } from "./chunks/select-group.js";
-import selectIcon from "./select-icon.js";
+import SelectIcon from "./select-icon.js";
 import SelectItem from "./select-item.js";
 import selectLabel from "./select-label.js";
 import selectSeparator from "./select-separator.js";
@@ -57,19 +58,24 @@ import SelectTrigger from "./select-trigger.js";
 import SelectValue from "./select-value.js";
 import { _ as _sfc_main$c } from "./chunks/select.js";
 import { _ as _sfc_main$e } from "./chunks/slider.vue_vue_type_style_index_0_lang.js";
-import { _ as _sfc_main$f } from "./chunks/switch.vue_vue_type_style_index_0_lang.js";
+import SonnerAlert from "./sonner-alert.js";
+import { _ as _sfc_main$f, t as toast$1 } from "./chunks/sonner.js";
+import { _ as _sfc_main$g } from "./chunks/switch.vue_vue_type_style_index_0_lang.js";
 import tabMenuContent from "./tab-menu-content.js";
 import tabMenuItem from "./tab-menu-item.js";
 import tabMenuList from "./tab-menu-list.js";
 import tabMenu from "./tab-menu.js";
-import textInputAffix from "./text-input-affix.js";
+import TextInputAffix from "./text-input-affix.js";
 import TextInputButton from "./text-input-button.js";
 import TextInput from "./text-input.js";
 import textarea from "./textarea.js";
 import Tooltip from "./tooltip.js";
+import { COLOR_NUMBER_VALIDATION_PATTERN, DEFAULT_SWATCH, HEX_VALIDATION_PATTERN, bumpColorValue, clamp, getAbsolutePosition, getColorConstraints, getFractionDigit, getPageXYFromEvent, getScrollXY, resolveArrowDirection, truncColorValue } from "./color.js";
+import { uid } from "./crypto.js";
+import { markRaw } from "vue";
 const components = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  Alert: alert,
+  Alert,
   Badge,
   Button,
   Checkbox: _sfc_main,
@@ -101,8 +107,8 @@ const components = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePr
   DropdownMenuTrigger: dropdownMenuTrigger,
   FancyButton: fancyButton,
   HintText: hintText,
-  Label: label,
-  LinkButton: linkButton,
+  Label,
+  LinkButton,
   Modal: _sfc_main$7,
   ModalBody: modalBody,
   ModalClose: _sfc_main$8,
@@ -113,13 +119,14 @@ const components = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePr
   Popover: _sfc_main$a,
   PopoverContent,
   PopoverTrigger,
+  RichEditor: richEditor,
   ScrollArea: _sfc_main$b,
   SegmentedControl: segmentedControl,
   SegmentedControlItem: segmentedControlItem,
   Select: _sfc_main$c,
   SelectContent,
   SelectGroup: _sfc_main$d,
-  SelectIcon: selectIcon,
+  SelectIcon,
   SelectItem,
   SelectLabel: selectLabel,
   SelectSeparator: selectSeparator,
@@ -127,18 +134,69 @@ const components = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePr
   SelectValue,
   Slider: _sfc_main$e,
   SocialButton: socialButton,
+  Sonner: _sfc_main$f,
+  SonnerAlert,
   StatusBadge: statusBadge,
-  Switch: _sfc_main$f,
+  Switch: _sfc_main$g,
   TabMenu: tabMenu,
   TabMenuContent: tabMenuContent,
   TabMenuItem: tabMenuItem,
   TabMenuList: tabMenuList,
   TextInput,
-  TextInputAffix: textInputAffix,
+  TextInputAffix,
   TextInputButton,
   Textarea: textarea,
   Tooltip
 }, Symbol.toStringTag, { value: "Module" }));
+function createToast(title, data) {
+  const {
+    state = "success",
+    variant = "stroke",
+    size = "lg",
+    dismissable = true,
+    ...externalToastProps
+  } = data || {};
+  let toastId;
+  const dismissToast = () => {
+    toast$1.dismiss(toastId);
+  };
+  toastId = toast$1.custom(markRaw(SonnerAlert), {
+    ...externalToastProps,
+    componentProps: {
+      title,
+      description: data == null ? void 0 : data.description,
+      state,
+      variant,
+      size,
+      dismissable,
+      onDismiss: dismissToast
+    }
+  });
+  return toastId;
+}
+const toast = Object.assign(createToast, {
+  success: (title, data) => {
+    return createToast(title, { ...data, state: "success" });
+  },
+  error: (title, data) => {
+    return createToast(title, { ...data, state: "error" });
+  },
+  warning: (title, data) => {
+    return createToast(title, { ...data, state: "warning" });
+  },
+  info: (title, data) => {
+    return createToast(title, { ...data, state: "information" });
+  },
+  feature: (title, data) => {
+    return createToast(title, { ...data, state: "feature" });
+  },
+  dismiss: (id) => {
+    toast$1.dismiss(id);
+  },
+  loading: (title, data) => {
+    return toast$1.loading(title, data);
+  }
+});
 const Celeste = {
   install(vue) {
     Object.entries(components).forEach(([name, component]) => {
@@ -147,9 +205,10 @@ const Celeste = {
   }
 };
 export {
-  alert as Alert,
+  Alert,
   Badge,
   Button,
+  COLOR_NUMBER_VALIDATION_PATTERN,
   Celeste,
   _sfc_main as Checkbox,
   checkboxLabel as CheckboxLabel,
@@ -166,6 +225,7 @@ export {
   CompactButton,
   _sfc_main$2 as ContentDivider,
   contextMenuItem as ContextMenuItem,
+  DEFAULT_SWATCH,
   dropdown as Dropdown,
   DropdownItem,
   dropdownMenu as DropdownMenu,
@@ -179,9 +239,10 @@ export {
   _sfc_main$6 as DropdownMenuSubTrigger,
   dropdownMenuTrigger as DropdownMenuTrigger,
   fancyButton as FancyButton,
+  HEX_VALIDATION_PATTERN,
   hintText as HintText,
-  label as Label,
-  linkButton as LinkButton,
+  Label,
+  LinkButton,
   _sfc_main$7 as Modal,
   modalBody as ModalBody,
   _sfc_main$8 as ModalClose,
@@ -192,13 +253,14 @@ export {
   _sfc_main$a as Popover,
   PopoverContent,
   PopoverTrigger,
+  richEditor as RichEditor,
   _sfc_main$b as ScrollArea,
   segmentedControl as SegmentedControl,
   segmentedControlItem as SegmentedControlItem,
   _sfc_main$c as Select,
   SelectContent,
   _sfc_main$d as SelectGroup,
-  selectIcon as SelectIcon,
+  SelectIcon,
   SelectItem,
   selectLabel as SelectLabel,
   selectSeparator as SelectSeparator,
@@ -206,15 +268,28 @@ export {
   SelectValue,
   _sfc_main$e as Slider,
   socialButton as SocialButton,
+  _sfc_main$f as Sonner,
+  SonnerAlert,
   statusBadge as StatusBadge,
-  _sfc_main$f as Switch,
+  _sfc_main$g as Switch,
   tabMenu as TabMenu,
   tabMenuContent as TabMenuContent,
   tabMenuItem as TabMenuItem,
   tabMenuList as TabMenuList,
   TextInput,
-  textInputAffix as TextInputAffix,
+  TextInputAffix,
   TextInputButton,
   textarea as Textarea,
-  Tooltip
+  Tooltip,
+  bumpColorValue,
+  clamp,
+  getAbsolutePosition,
+  getColorConstraints,
+  getFractionDigit,
+  getPageXYFromEvent,
+  getScrollXY,
+  resolveArrowDirection,
+  toast,
+  truncColorValue,
+  uid
 };

package/dist/es/label.js

@@ -2,7 +2,7 @@ import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, re
 import Tooltip from "./tooltip.js";
 import { useDelegatedProps } from "./use-delegated-props.js";
 import { c as clsx } from "./chunks/clsx.js";
-import { B as Oh } from "./chunks/index.js";
+import { S as Oh } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _hoisted_1 = {
   key: 0,
@@ -50,7 +50,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const label = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-4768213c"]]);
+const Label = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-4768213c"]]);
 export {
-  label as default
+  Label as default
 };

package/dist/es/link-bubble.js

@@ -0,0 +1,229 @@
+import { defineComponent, defineAsyncComponent, ref, computed, onMounted, onUnmounted, openBlock, createBlock, unref, withCtx, createElementBlock, createElementVNode, createVNode, withKeys, createTextVNode, toDisplayString, createCommentVNode } from "vue";
+import Button from "./button.js";
+import CompactButton from "./compact-button.js";
+import LinkButton from "./link-button.js";
+import Label from "./label.js";
+import { _ as _sfc_main$1 } from "./chunks/switch.vue_vue_type_style_index_0_lang.js";
+import TextInputAffix from "./text-input-affix.js";
+import TextInput from "./text-input.js";
+import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
+const _hoisted_1 = {
+  key: 0,
+  class: "set-mode"
+};
+const _hoisted_2 = { class: "set-link" };
+const _hoisted_3 = { class: "switch-button-box" };
+const _hoisted_4 = {
+  key: 1,
+  class: "edit-mode"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "link-bubble",
+  props: {
+    editor: {},
+    showSetLinkFromToolbar: { type: Boolean }
+  },
+  emits: ["set-link-closed"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const BubbleMenu = defineAsyncComponent(
+      () => import("./chunks/index2.js").then((m) => m.BubbleMenu)
+    );
+    const href = ref("");
+    const openInNewTab = ref(false);
+    const editing = ref(false);
+    const isTextSelected = () => props.editor.state.selection.from !== props.editor.state.selection.to;
+    const showBubble = computed(() => {
+      return editing.value || props.editor.isActive("link") || props.showSetLinkFromToolbar && isTextSelected();
+    });
+    function startEdit() {
+      editing.value = true;
+      const attrs = props.editor.getAttributes("link");
+      href.value = attrs.href || "";
+      openInNewTab.value = attrs.target === "_blank";
+    }
+    function removeLink() {
+      props.editor.chain().focus().unsetLink().run();
+      reset();
+    }
+    function reset() {
+      editing.value = false;
+      href.value = "";
+      openInNewTab.value = false;
+      emit("set-link-closed");
+    }
+    function truncateMiddleUrl(str) {
+      const maxLength = 40;
+      if (str.length <= maxLength) {
+        return str;
+      }
+      const startChars = Math.ceil((maxLength - 3) / 2);
+      const endChars = Math.floor((maxLength - 3) / 2);
+      return `${str.slice(0, startChars)}...${str.slice(-endChars)}`;
+    }
+    function isAllowedUri() {
+      const url = href.value.trim();
+      if (!url || url.includes(" ")) {
+        return false;
+      }
+      if (url.startsWith("/")) {
+        return true;
+      }
+      if (url.startsWith("./") || url.startsWith("../")) {
+        return false;
+      }
+      const allowedProtocols = /^(?:https?:|mailto:)/i;
+      const disallowedProtocols = /^(?:javascript:|data:)/i;
+      if (disallowedProtocols.test(url)) {
+        return false;
+      }
+      if (allowedProtocols.test(url)) {
+        return true;
+      }
+      return false;
+    }
+    const isValidUrl = computed(() => isAllowedUri());
+    function applyLink() {
+      if (!href.value || !isValidUrl.value) {
+        return;
+      }
+      props.editor.chain().focus().extendMarkRange("link").setLink({
+        href: href.value,
+        target: openInNewTab.value ? "_blank" : null
+      }).run();
+      reset();
+    }
+    const bubbleRef = ref(null);
+    function handleClickOutside(event) {
+      const target = event.target;
+      if (!bubbleRef.value) {
+        return;
+      }
+      if (bubbleRef.value && bubbleRef.value.contains(target)) {
+        return;
+      }
+      if (target.closest(".i-celeste-link")) {
+        return;
+      }
+      emit("set-link-closed");
+    }
+    onMounted(() => {
+      props.editor.on("selectionUpdate", () => {
+        if (props.editor.isActive("link") || props.showSetLinkFromToolbar) {
+          const attrs = props.editor.getAttributes("link");
+          href.value = attrs.href || "";
+          openInNewTab.value = attrs.target === "_blank";
+        } else {
+          reset();
+        }
+      });
+      document.addEventListener("click", handleClickOutside);
+    });
+    onUnmounted(() => {
+      document.removeEventListener("click", handleClickOutside);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(BubbleMenu), {
+        "should-show": () => true,
+        editor: _ctx.editor,
+        options: {
+          placement: "bottom",
+          offset: {
+            mainAxis: 0,
+            crossAxis: 12
+          }
+        }
+      }, {
+        default: withCtx(() => [
+          showBubble.value ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            ref_key: "bubbleRef",
+            ref: bubbleRef,
+            class: "link-bubble"
+          }, [
+            editing.value || props.showSetLinkFromToolbar && isTextSelected() ? (openBlock(), createElementBlock("div", _hoisted_1, [
+              createElementVNode("div", _hoisted_2, [
+                createVNode(TextInput, {
+                  modelValue: href.value,
+                  "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => href.value = $event),
+                  type: "url",
+                  size: "xs",
+                  placeholder: "Paste or type a link",
+                  class: "link-input",
+                  onKeydown: [
+                    withKeys(applyLink, ["enter"]),
+                    withKeys(reset, ["esc"])
+                  ]
+                }, {
+                  leadingNode: withCtx(() => [
+                    createVNode(TextInputAffix, null, {
+                      default: withCtx(() => _cache[2] || (_cache[2] = [
+                        createElementVNode("i", { class: "i-celeste-link" }, null, -1)
+                      ])),
+                      _: 1
+                    })
+                  ]),
+                  _: 1
+                }, 8, ["modelValue"]),
+                createVNode(Button, {
+                  intent: "neutral",
+                  size: "xs",
+                  variant: "stroke",
+                  disabled: !isValidUrl.value,
+                  onClick: applyLink
+                }, {
+                  default: withCtx(() => _cache[3] || (_cache[3] = [
+                    createTextVNode(" Set link ")
+                  ])),
+                  _: 1
+                }, 8, ["disabled"])
+              ]),
+              createElementVNode("div", _hoisted_3, [
+                createVNode(Label, { for: "open-in-new-tab" }, {
+                  default: withCtx(() => _cache[4] || (_cache[4] = [
+                    createTextVNode(" Open in new tab ")
+                  ])),
+                  _: 1
+                }),
+                createVNode(_sfc_main$1, {
+                  id: "open-in-new-tab",
+                  checked: openInNewTab.value,
+                  "onUpdate:checked": _cache[1] || (_cache[1] = ($event) => openInNewTab.value = $event)
+                }, null, 8, ["checked"])
+              ])
+            ])) : props.editor.isActive("link") ? (openBlock(), createElementBlock("div", _hoisted_4, [
+              createVNode(LinkButton, {
+                href: _ctx.editor.getAttributes("link").href,
+                target: _ctx.editor.getAttributes("link").target
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(truncateMiddleUrl(_ctx.editor.getAttributes("link").href)), 1)
+                ]),
+                _: 1
+              }, 8, ["href", "target"]),
+              _cache[5] || (_cache[5] = createElementVNode("div", { class: "divider" }, null, -1)),
+              createVNode(CompactButton, {
+                icon: "i-celeste-edit-line",
+                size: "lg",
+                variant: "ghost",
+                onClick: startEdit
+              }),
+              createVNode(CompactButton, {
+                icon: "i-celeste-delete-bin-line",
+                size: "lg",
+                variant: "ghost",
+                onClick: removeLink
+              })
+            ])) : createCommentVNode("", true)
+          ], 512)) : createCommentVNode("", true)
+        ]),
+        _: 1
+      }, 8, ["editor"]);
+    };
+  }
+});
+const LinkBubble = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c63c1d92"]]);
+export {
+  LinkBubble as default
+};

package/dist/es/link-button.js

@@ -39,7 +39,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const linkButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-82b3b1ab"]]);
+const LinkButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-82b3b1ab"]]);
 export {
-  linkButton as default
+  LinkButton as default
 };

package/dist/es/modal-content.js

@@ -1,7 +1,7 @@
 import { defineComponent, openBlock, createBlock, unref, withCtx, createVNode, Transition, mergeProps, renderSlot } from "vue";
 import { useDelegatedProps } from "./use-delegated-props.js";
 import { c as clsx } from "./chunks/clsx.js";
-import { x as xe, a1 as Dv, a2 as Eu, a3 as xu } from "./chunks/index.js";
+import { x as xe, aa as Dv, ab as Eu, ac as xu } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "modal-content",

package/dist/es/modal-header.js

@@ -1,7 +1,7 @@
 import { defineComponent, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, createCommentVNode, createBlock, withCtx, toDisplayString, createVNode } from "vue";
 import CompactButton from "./compact-button.js";
 import { c as clsx } from "./chunks/clsx.js";
-import { a4 as Pu, a5 as Du, a as Gl } from "./chunks/index.js";
+import { ad as Pu, ae as Du, a as Gl } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _hoisted_1 = ["data-dismissible", "data-alignment", "data-type"];
 const _hoisted_2 = {

package/dist/es/popover-content.js

@@ -2,7 +2,7 @@ import { defineComponent, openBlock, createBlock, unref, withCtx, createVNode, m
 import CompactButton from "./compact-button.js";
 import { useDelegatedProps } from "./use-delegated-props.js";
 import { c as clsx } from "./chunks/clsx.js";
-import { x as xe, a6 as bs, a7 as ws, a8 as _s, a9 as xs } from "./chunks/index.js";
+import { x as xe, af as bs, ag as ws, ah as _s, ai as xs } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _hoisted_1 = ["data-icon-size"];
 const _hoisted_2 = { class: "celeste-popover-title" };

package/dist/es/popover-trigger.js

@@ -1,5 +1,5 @@
 import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from "vue";
-import { aa as gs } from "./chunks/index.js";
+import { aj as gs } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "popover-trigger",