@youcan/celeste 0.6.30 → 0.6.31

package/dist/es/scroll-bar.js

@@ -1,6 +1,6 @@
 import { defineComponent, computed, openBlock, createBlock, unref, mergeProps, withCtx, createVNode } from "vue";
 import { c as clsx } from "./chunks/clsx.js";
-import { M as My, V as Vy } from "./chunks/index.js";
+import { R as My, V as Vy } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "scroll-bar",

package/dist/es/segmented-control-item.js

@@ -1,7 +1,7 @@
 import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from "vue";
 import { useDelegatedProps } from "./use-delegated-props.js";
 import { c as clsx } from "./chunks/clsx.js";
-import { v as sv } from "./chunks/index.js";
+import { P as sv } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "segmented-control-item",

package/dist/es/segmented-control.js

@@ -1,7 +1,7 @@
 import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from "vue";
 import { useDelegatedProps } from "./use-delegated-props.js";
 import { c as clsx } from "./chunks/clsx.js";
-import { x as xe, s as lv } from "./chunks/index.js";
+import { x as xe, M as lv } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "segmented-control",

package/dist/es/select-content.js

@@ -1,7 +1,7 @@
 import { defineComponent, openBlock, createBlock, unref, withCtx, createVNode, mergeProps, renderSlot } from "vue";
 import { useDelegatedProps } from "./use-delegated-props.js";
 import { c as clsx } from "./chunks/clsx.js";
-import { x as xe, ab as zy, ac as Ky, ad as Xy } from "./chunks/index.js";
+import { x as xe, ak as zy, al as Ky, am as Xy } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "select-content",

package/dist/es/select-icon.js

@@ -20,7 +20,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const selectIcon = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5c4a7fcf"]]);
+const SelectIcon = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5c4a7fcf"]]);
 export {
-  selectIcon as default
+  SelectIcon as default
 };

package/dist/es/select-item.js

@@ -1,7 +1,7 @@
 import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, createVNode, renderSlot, createElementVNode } from "vue";
 import { useDelegatedProps } from "./use-delegated-props.js";
 import { c as clsx } from "./chunks/clsx.js";
-import { ae as jy, af as Yy, ag as Uy } from "./chunks/index.js";
+import { an as jy, ao as Yy, ap as Uy } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "select-item",

package/dist/es/select-trigger.js

@@ -1,7 +1,7 @@
 import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot, createVNode, createElementVNode } from "vue";
 import { useDelegatedProps } from "./use-delegated-props.js";
 import { c as clsx } from "./chunks/clsx.js";
-import { ah as Ly, ai as eg } from "./chunks/index.js";
+import { aq as Ly, ar as eg } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "select-trigger",

package/dist/es/select-value.js

@@ -1,7 +1,7 @@
 import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from "vue";
 import { useDelegatedProps } from "./use-delegated-props.js";
 import { c as clsx } from "./chunks/clsx.js";
-import { aj as Qy } from "./chunks/index.js";
+import { as as Qy } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "select-value",

package/dist/es/sonner-alert.js

@@ -0,0 +1,42 @@
+import { defineComponent, openBlock, createBlock, unref, mergeProps, createSlots, withCtx, createTextVNode, toDisplayString } from "vue";
+import Alert from "./alert.js";
+import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "sonner-alert",
+  props: {
+    title: {},
+    description: {},
+    onDismiss: {}
+  },
+  setup(__props) {
+    const props = __props;
+    function handleDismiss() {
+      if (props.onDismiss) {
+        props.onDismiss();
+      }
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Alert), mergeProps(props, {
+        class: "sonner-alert",
+        onDismiss: handleDismiss
+      }), createSlots({
+        title: withCtx(() => [
+          createTextVNode(toDisplayString(props.title), 1)
+        ]),
+        _: 2
+      }, [
+        props.description ? {
+          name: "description",
+          fn: withCtx(() => [
+            createTextVNode(toDisplayString(props.description), 1)
+          ]),
+          key: "0"
+        } : void 0
+      ]), 1040);
+    };
+  }
+});
+const sonnerAlert = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c8bb23e0"]]);
+export {
+  sonnerAlert as default
+};

package/dist/es/sonner.js

@@ -0,0 +1,4 @@
+import { _ as _sfc_main } from "./chunks/sonner.js";
+export {
+  _sfc_main as default
+};

package/dist/es/tab-menu-content.js

@@ -1,7 +1,7 @@
 import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from "vue";
 import { useDelegatedProps } from "./use-delegated-props.js";
 import { c as clsx } from "./chunks/clsx.js";
-import { r as bg } from "./chunks/index.js";
+import { L as bg } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "tab-menu-content",

package/dist/es/tab-menu-item.js

@@ -1,7 +1,7 @@
 import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot, createElementBlock, createCommentVNode } from "vue";
 import { useDelegatedProps } from "./use-delegated-props.js";
 import { c as clsx } from "./chunks/clsx.js";
-import { A as At, p as Cg } from "./chunks/index.js";
+import { A as At, J as Cg } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _hoisted_1 = {
   key: 0,

package/dist/es/tab-menu-list.js

@@ -1,7 +1,7 @@
 import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from "vue";
 import { useDelegatedProps } from "./use-delegated-props.js";
 import { c as clsx } from "./chunks/clsx.js";
-import { l as gg } from "./chunks/index.js";
+import { I as gg } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "tab-menu-list",

package/dist/es/tab-menu.js

@@ -1,5 +1,5 @@
 import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from "vue";
-import { x as xe, g as yg } from "./chunks/index.js";
+import { x as xe, H as yg } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "tab-menu",

package/dist/es/text-input-affix.js

@@ -22,7 +22,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const textInputAffix = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-2d8a1dbc"]]);
+const TextInputAffix = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-2d8a1dbc"]]);
 export {
-  textInputAffix as default
+  TextInputAffix as default
 };

package/dist/es/tooltip.js

@@ -1,7 +1,7 @@
 import { defineComponent, ref, openBlock, createBlock, unref, withCtx, createVNode, mergeProps, renderSlot, createElementBlock, normalizeClass, createCommentVNode, createElementVNode, toDisplayString } from "vue";
 import CompactButton from "./compact-button.js";
 import { c as clsx } from "./chunks/clsx.js";
-import { x as xe, ak as Lg, al as zg, am as Kg, an as jg, ao as Hg, ap as Wg } from "./chunks/index.js";
+import { x as xe, at as Lg, au as zg, av as Kg, aw as jg, ax as Hg, ay as Wg } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _hoisted_1 = { class: "celeste-tooltip-content-box" };
 const _hoisted_2 = {

package/dist/es/types.js

@@ -0,0 +1 @@
+

package/dist/utils/index.d.ts

@@ -0,0 +1,3 @@
+export * from './color';
+export * from './crypto';
+export * from './sonner';

package/dist/utils/sonner.d.ts

@@ -0,0 +1,19 @@
+import { SonnerAlertProps } from '../components/sonner/sonner-alert';
+import { ExternalToast } from 'vue-sonner';
+export interface ToastOptions extends ExternalToast {
+    state?: SonnerAlertProps['state'];
+    variant?: SonnerAlertProps['variant'];
+    size?: SonnerAlertProps['size'];
+    dismissable?: SonnerAlertProps['dismissable'];
+}
+declare function createToast(title: string, data?: ToastOptions): string | number;
+export declare const toast: typeof createToast & {
+    success: (title: string, data?: Omit<ToastOptions, "state">) => string | number;
+    error: (title: string, data?: Omit<ToastOptions, "state">) => string | number;
+    warning: (title: string, data?: Omit<ToastOptions, "state">) => string | number;
+    info: (title: string, data?: Omit<ToastOptions, "state">) => string | number;
+    feature: (title: string, data?: Omit<ToastOptions, "state">) => string | number;
+    dismiss: (id?: string | number) => void;
+    loading: (title: string, data?: ExternalToast) => string | number;
+};
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@youcan/celeste",
   "type": "module",
-  "version": "0.6.30",
+  "version": "0.6.31",
   "author": "YouCan <tech@youcan.shop>",
   "keywords": [
     "youcan",
@@ -29,11 +29,22 @@
     "vue": "^3.5.13"
   },
   "dependencies": {
+    "@tiptap/core": "^3.0.7",
+    "@tiptap/extension-bubble-menu": "^3.0.7",
+    "@tiptap/extension-color": "^3.0.7",
+    "@tiptap/extension-link": "^3.0.7",
+    "@tiptap/extension-text-align": "^3.0.7",
+    "@tiptap/extension-text-style": "^3.0.7",
+    "@tiptap/extensions": "^3.0.7",
+    "@tiptap/pm": "^3.0.7",
+    "@tiptap/starter-kit": "^3.0.7",
+    "@tiptap/vue-3": "^3.0.7",
     "clsx": "^2.1.1",
     "radix-vue": "^1.9.12",
     "tinycolor2": "^1.6.0",
-    "@youcan/celeste-icons": "0.6.30",
-    "@youcan/celeste-tokens": "0.6.30"
+    "vue-sonner": "^2.0.2",
+    "@youcan/celeste-icons": "0.6.31",
+    "@youcan/celeste-tokens": "0.6.31"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.0.0",
@@ -59,7 +70,7 @@
     "rimraf": "^6.0.1",
     "sass": "^1.83.1",
     "storybook": "^9.0.17",
-    "unocss": "^0.65.4",
+    "unocss": "^66.3.3",
     "vite": "^6.0.7",
     "vite-plugin-dts": "^4.4.0",
     "vitest": "^2.1.8",

package/src/components/index.ts

@@ -10,10 +10,12 @@ export * from './hint-text';
 export * from './label';
 export * from './modal';
 export * from './popover';
+export * from './rich-editor';
 export * from './scroll-area';
 export * from './segmented-control';
 export * from './select';
 export * from './slider';
+export * from './sonner';
 export * from './switch';
 export * from './tab-menu';
 export * from './text-input';

package/src/components/rich-editor/config.ts

@@ -0,0 +1,150 @@
+import type { Editor } from '@tiptap/vue-3';
+import type { ToolbarChildOption, ToolbarItem } from './types';
+import { ref } from 'vue';
+// @unocss-include
+
+export const fullToolbar = ref<ToolbarItem[]>([
+  {
+    slug: 'heading',
+    name: 'Text styles',
+    children: [
+      { option: 'p', name: 'Normal text', active: 'paragraph' },
+      { option: '1', name: 'Heading 1', active: { level: 1 } },
+      { option: '2', name: 'Heading 2', active: { level: 2 } },
+      { option: '3', name: 'Heading 3', active: { level: 3 } },
+      { option: '4', name: 'Heading 4', active: { level: 4 } },
+      { option: '5', name: 'Heading 5', active: { level: 5 } },
+      { option: '6', name: 'Heading 6', active: { level: 6 } },
+    ],
+  },
+  { type: 'divider' },
+  {
+    slug: 'fontSize',
+    name: 'Font size',
+    children: [
+      { option: '8px', name: '8', active: { fontSize: '8px' } },
+      { option: '10px', name: '10', active: { fontSize: '10px' } },
+      { option: '12px', name: '12', active: { fontSize: '12px' } },
+      { option: '14px', name: '14', active: { fontSize: '14px' } },
+      { option: '16px', name: '16', active: { fontSize: '16px' } },
+      { option: '18px', name: '18', active: { fontSize: '18px' } },
+      { option: '24px', name: '24', active: { fontSize: '24px' } },
+      { option: '30px', name: '30', active: { fontSize: '30px' } },
+      { option: '36px', name: '36', active: { fontSize: '36px' } },
+      { option: '48px', name: '48', active: { fontSize: '48px' } },
+      { option: '60px', name: '60', active: { fontSize: '60px' } },
+      { option: '72px', name: '72', active: { fontSize: '72px' } },
+      { option: '96px', name: '96', active: { fontSize: '96px' } },
+    ],
+  },
+  { type: 'divider' },
+  {
+    slug: 'color',
+    name: 'Text color',
+    children: [
+      { option: '#000000', name: 'Black', icon: 'i-celeste-circle-fill', active: { color: '#000000' } },
+      { option: '#7B7B7B', name: 'Gray', icon: 'i-celeste-circle-fill', active: { color: '#7B7B7B' } },
+      { option: '#335CFF', name: 'Blue', icon: 'i-celeste-circle-fill', active: { color: '#335CFF' } },
+      { option: '#FA7319', name: 'Orange', icon: 'i-celeste-circle-fill', active: { color: '#FA7319' } },
+      { option: '#7D52F4', name: 'Purple', icon: 'i-celeste-circle-fill', active: { color: '#7D52F4' } },
+      { option: '#47C2FF', name: 'Sky', icon: 'i-celeste-circle-fill', active: { color: '#47C2FF' } },
+    ],
+  },
+  { type: 'divider' },
+  { slug: 'bold', name: 'Bold', icon: 'i-celeste-bold', active: 'bold' },
+  { slug: 'italic', name: 'Italic', icon: 'i-celeste-italic', active: 'italic' },
+  { slug: 'underline', name: 'Underline', icon: 'i-celeste-underline', active: 'underline' },
+  { slug: 'strike', name: 'Strike', icon: 'i-celeste-strikethrough', active: 'strike' },
+  { type: 'divider' },
+  { slug: 'bulletList', name: 'Bulleted list', icon: 'i-celeste-list-unordered', active: 'bulletList' },
+  { slug: 'orderedList', name: 'Numbered list', icon: 'i-celeste-list-ordered', active: 'orderedList' },
+  { type: 'divider' },
+  {
+    slug: 'align',
+    name: 'Text alignment',
+    children: [
+      { option: 'left', name: 'Left align', icon: 'i-celeste-align-left', active: { textAlign: 'left' } },
+      { option: 'center', name: 'Center align', icon: 'i-celeste-align-center', active: { textAlign: 'center' } },
+      { option: 'right', name: 'Right align', icon: 'i-celeste-align-right', active: { textAlign: 'right' } },
+      { option: 'justify', name: 'Justify', icon: 'i-celeste-align-justify', active: { textAlign: 'justify' } },
+    ],
+  },
+  { type: 'divider' },
+  { slug: 'link', name: 'Insert Link', icon: 'i-celeste-link', active: 'link' },
+  { type: 'divider' },
+  { slug: 'undo', name: 'Undo', icon: 'i-celeste-arrow-go-back-line', active: 'undo' },
+  { slug: 'redo', name: 'Redo', icon: 'i-celeste-arrow-go-forward-line', active: 'redo' },
+  { slug: 'clear', name: 'Clear style', icon: 'i-celeste-format-clear', active: 'clear' },
+]);
+
+export function onActionClick(
+  editor: Editor,
+  slug: string,
+  option: string | null = null,
+  showLinkBubble?: () => void,
+): void {
+  const chain = editor.chain().focus();
+
+  if (!chain) {
+    return;
+  }
+
+  const actionTriggers: Record<string, () => void> = {
+    heading: () => {
+      if (!option) {
+        return;
+      }
+
+      if (option === 'p') {
+        chain.setParagraph().run();
+      }
+      else {
+        const headingLevel = Number(option);
+        chain.toggleHeading({ level: headingLevel as 1 | 2 | 3 | 4 | 5 | 6 }).run();
+      }
+    },
+    fontSize: () => {
+      editor.chain().focus().setFontSize(option ?? '16px').run();
+    },
+    color: () => {
+      editor.chain().focus().setColor(option ?? '#000000').run();
+    },
+    bold: () => chain.toggleBold().run(),
+    italic: () => chain.toggleItalic().run(),
+    underline: () => chain.toggleUnderline().run(),
+    strike: () => chain.toggleStrike().run(),
+    bulletList: () => chain.toggleBulletList().run(),
+    orderedList: () => chain.toggleOrderedList().run(),
+    align: () => chain.setTextAlign(option ?? 'left').run(),
+    link: () => {
+      if (showLinkBubble) {
+        showLinkBubble();
+      }
+    },
+    undo: () => chain.undo().run(),
+    redo: () => chain.redo().run(),
+    clear: () => chain.clearNodes().unsetAllMarks().run(),
+  };
+
+  actionTriggers[slug]?.();
+}
+
+export function selectedOption(editor: Editor, children: ToolbarChildOption[]): string {
+  if (!Array.isArray(children)) {
+    return '';
+  }
+
+  for (const child of children) {
+    if (Object.prototype.hasOwnProperty.call(child.active, 'fontSize')) {
+      const currentFontSize = editor.getAttributes('textStyle').fontSize || '16px';
+
+      return currentFontSize;
+    }
+
+    if (editor.isActive(child.active)) {
+      return child.option;
+    }
+  }
+
+  return children[0].option;
+}

package/src/components/rich-editor/extra-settings.vue

@@ -0,0 +1,151 @@
+<script setup lang="ts">
+import type { Editor } from '@tiptap/vue-3';
+import CompactButton from '@/components/button/compact-button.vue';
+import SelectContent from '@/components/select/select-content.vue';
+import SelectIcon from '@/components/select/select-icon.vue';
+import SelectItem from '@/components/select/select-item.vue';
+import SelectTrigger from '@/components/select/select-trigger.vue';
+import Select from '@/components/select/select.vue';
+import Tooltip from '@/components/tooltip/tooltip.vue';
+import { ref } from 'vue';
+
+const props = defineProps<{
+  editor: Editor;
+}>();
+
+const defaultValue = ref('');
+const extraSettings = [
+  {
+    name: 'Copy',
+    icon: 'i-celeste-file-copy-line',
+  },
+  {
+    name: 'Cut',
+    icon: 'i-celeste-scissors-line',
+  },
+  {
+    name: 'Delete',
+    icon: 'i-celeste-delete-bin-4-line',
+  },
+  {
+    name: 'Duplicate',
+    icon: 'i-celeste-add-circle-line',
+  },
+];
+
+function selectedText(editor: Editor) {
+  const { from, to } = editor.state.selection;
+  const text = editor.state.doc.textBetween(from, to, '\n');
+
+  return text || null;
+}
+
+async function copySelectionToClipboard(editor: Editor) {
+  const text = selectedText(editor);
+
+  if (!text) {
+    return;
+  }
+
+  try {
+    if (!window.isSecureContext) {
+      throw new Error('Clipboard API is not available in insecure contexts');
+    }
+
+    const copyText = await navigator.clipboard.writeText(text);
+
+    return copyText;
+  }
+  catch (error) {
+    console.error(error);
+  }
+}
+
+async function cutSelection(editor: Editor) {
+  await copySelectionToClipboard(editor);
+  deleteSelection(editor);
+}
+
+function deleteSelection(editor: Editor) {
+  return editor.commands.deleteSelection();
+}
+
+function duplicateSelection(editor: Editor) {
+  const { to } = editor.state.selection;
+  const text = selectedText(editor);
+
+  if (!text) {
+    return;
+  }
+
+  return editor.commands.insertContentAt(to, text);
+}
+
+function clearSelectedValue() {
+  defaultValue.value = '';
+}
+
+function onActionClick(name: string, editor: Editor) {
+  switch (name) {
+    case 'Copy':
+      copySelectionToClipboard(editor);
+      break;
+    case 'Cut':
+      cutSelection(editor);
+      break;
+    case 'Delete':
+      deleteSelection(editor);
+      break;
+    case 'Duplicate':
+      duplicateSelection(editor);
+      break;
+    default:
+      break;
+  }
+}
+</script>
+
+<template>
+  <div class="show-more-wrapper">
+    <Select
+      v-model="defaultValue"
+      @update:model-value="onActionClick($event, props.editor)"
+      @update:open="clearSelectedValue"
+    >
+      <SelectTrigger variant="inline">
+        <Tooltip title="Extra settings" variant="dark">
+          <CompactButton
+            icon="i-celeste-more-2-line"
+            variant="ghost"
+          />
+        </Tooltip>
+      </SelectTrigger>
+      <SelectContent align="end" width="fit">
+        <SelectItem
+          v-for="(item, index) in extraSettings"
+          :key="index"
+          :value="item.name"
+        >
+          <SelectIcon>
+            <i :class="item.icon" />
+          </SelectIcon>
+          <span>{{ item.name }}</span>
+        </SelectItem>
+      </SelectContent>
+    </Select>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.show-more-wrapper {
+  :deep(.i-celeste-arrow-down-s-line) {
+    display: none;
+  }
+}
+
+.celeste-select-item[data-state='checked'] {
+  &:deep(.i-celeste-check-line) {
+    display: none;
+  }
+}
+</style>

package/src/components/rich-editor/index.ts

@@ -0,0 +1,2 @@
+export * from './rich-editor.vue';
+export { default as RichEditor } from './rich-editor.vue';