@youcan/celeste 0.6.29 → 0.6.30

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

@@ -0,0 +1,28 @@
+import { defineComponent, openBlock, createElementBlock, mergeProps, unref, renderSlot } from "vue";
+import { useDelegatedProps } from "./use-delegated-props.js";
+import { c as clsx } from "./chunks/clsx.js";
+/* empty css                                                                        */
+import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "text-input-affix",
+  props: {
+    class: {},
+    inline: { type: Boolean },
+    asKbd: { type: Boolean }
+  },
+  setup(__props) {
+    const props = __props;
+    const delegatedProps = useDelegatedProps(props, "class");
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("span", mergeProps(unref(delegatedProps), {
+        class: unref(clsx)("celeste-text-input-affix", props.class)
+      }), [
+        renderSlot(_ctx.$slots, "default", {}, void 0, true)
+      ], 16);
+    };
+  }
+});
+const textInputAffix = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-2d8a1dbc"]]);
+export {
+  textInputAffix as default
+};

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

@@ -0,0 +1,32 @@
+import { defineComponent, openBlock, createBlock, mergeProps, unref, withCtx, renderSlot } from "vue";
+import Button from "./button.js";
+import { useDelegatedProps } from "./use-delegated-props.js";
+import { c as clsx } from "./chunks/clsx.js";
+import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "text-input-button",
+  props: {
+    inline: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    const props = __props;
+    const delegatedProps = useDelegatedProps(props, "class");
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(Button, mergeProps(unref(delegatedProps), {
+        size: "sm",
+        intent: "neutral",
+        variant: "stroke",
+        class: unref(clsx)("celeste-text-input-button", props.class)
+      }), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default", {}, void 0, true)
+        ]),
+        _: 3
+      }, 16, ["class"]);
+    };
+  }
+});
+const TextInputButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-7d21364e"]]);
+export {
+  TextInputButton as default
+};

package/dist/es/text-input.js

@@ -0,0 +1,120 @@
+import { defineComponent, mergeModels, computed, useModel, openBlock, createElementBlock, normalizeClass, unref, createVNode, withCtx, renderSlot, withDirectives, createElementVNode, mergeProps, vModelDynamic, createBlock } from "vue";
+import { uid } from "./crypto.js";
+import { c as clsx } from "./chunks/clsx.js";
+import { f as O } from "./chunks/index.js";
+import TextInputButton from "./text-input-button.js";
+import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
+const _hoisted_1 = ["for", "size", "has-error"];
+const _hoisted_2 = ["id", "type"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "text-input",
+  props: /* @__PURE__ */ mergeModels({
+    type: { default: "text" },
+    size: { default: "md" },
+    hasError: { type: Boolean, default: false }
+  }, {
+    "modelValue": {},
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const props = __props;
+    const id = computed(() => props.id || uid());
+    const modelValue = useModel(__props, "modelValue");
+    const showClearButton = computed(() => {
+      return props.type === "search" && modelValue.value && String(modelValue.value).length > 0;
+    });
+    function clearInput() {
+      modelValue.value = "";
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("label", {
+        for: id.value,
+        size: _ctx.size,
+        role: "presentation",
+        "has-error": _ctx.hasError,
+        class: normalizeClass(unref(clsx)("celeste-text-input-wrapper", props.class))
+      }, [
+        createVNode(unref(O), {
+          "as-child": "",
+          class: "celeste-text-input-icon celeste-text-input-leading-icon"
+        }, {
+          default: withCtx(() => [
+            renderSlot(_ctx.$slots, "leadingIcon", {}, void 0, true)
+          ]),
+          _: 3
+        }),
+        createVNode(unref(O), {
+          "as-child": "",
+          class: "celeste-text-input-node celeste-text-input-leading-node"
+        }, {
+          default: withCtx(() => [
+            renderSlot(_ctx.$slots, "leadingNode", {}, void 0, true)
+          ]),
+          _: 3
+        }),
+        createVNode(unref(O), {
+          inline: "",
+          "as-child": "",
+          class: "celeste-text-input-inline-node celeste-text-input-leading-inline-node"
+        }, {
+          default: withCtx(() => [
+            renderSlot(_ctx.$slots, "leadingInlineNode", {}, void 0, true)
+          ]),
+          _: 3
+        }),
+        withDirectives(createElementVNode("input", mergeProps({
+          id: id.value,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event)
+        }, _ctx.$attrs, {
+          type: _ctx.type,
+          class: "celeste-text-input"
+        }), null, 16, _hoisted_2), [
+          [vModelDynamic, modelValue.value]
+        ]),
+        createVNode(unref(O), {
+          "as-child": "",
+          class: "celeste-text-input-icon celeste-text-input-trailing-icon"
+        }, {
+          default: withCtx(() => [
+            renderSlot(_ctx.$slots, "trailingIcon", {}, void 0, true)
+          ]),
+          _: 3
+        }),
+        createVNode(unref(O), {
+          "as-child": "",
+          class: "celeste-text-input-node celeste-text-input-trailing-node"
+        }, {
+          default: withCtx(() => [
+            renderSlot(_ctx.$slots, "trailingNode", {}, void 0, true)
+          ]),
+          _: 3
+        }),
+        createVNode(unref(O), {
+          inline: "",
+          "as-child": "",
+          class: "celeste-text-input-inline-node celeste-text-input-trailing-inline-node"
+        }, {
+          default: withCtx(() => [
+            showClearButton.value ? (openBlock(), createBlock(TextInputButton, {
+              key: 0,
+              type: "button",
+              "aria-label": "Clear search",
+              onClick: clearInput
+            }, {
+              default: withCtx(() => _cache[1] || (_cache[1] = [
+                createElementVNode("i", { class: "i-celeste-close-line" }, null, -1)
+              ])),
+              _: 1
+            })) : renderSlot(_ctx.$slots, "trailingInlineNode", { key: 1 }, void 0, true)
+          ]),
+          _: 3
+        })
+      ], 10, _hoisted_1);
+    };
+  }
+});
+const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a368a0c2"]]);
+export {
+  TextInput as default
+};

package/dist/es/textarea.js

@@ -0,0 +1,57 @@
+import { defineComponent, mergeModels, useModel, openBlock, createElementBlock, normalizeClass, unref, withDirectives, createElementVNode, mergeProps, vModelText, toDisplayString, createCommentVNode } from "vue";
+import { c as clsx } from "./chunks/clsx.js";
+import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
+const _hoisted_1 = ["aria-disabled"];
+const _hoisted_2 = ["placeholder", "maxlength", "disabled"];
+const _hoisted_3 = {
+  key: 0,
+  class: "celeste-textarea-count"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "textarea",
+  props: /* @__PURE__ */ mergeModels({
+    class: {},
+    placeholder: { default: "Placeholder" },
+    showCount: { type: Boolean, default: true },
+    disabled: { type: Boolean, default: false },
+    maxLength: {}
+  }, {
+    "modelValue": {},
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const props = __props;
+    const modelValue = useModel(__props, "modelValue");
+    return (_ctx, _cache) => {
+      var _a;
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(unref(clsx)(
+          "celeste-textarea-wrapper",
+          props.class
+        )),
+        "aria-disabled": _ctx.disabled,
+        onClick: _cache[1] || (_cache[1] = ($event) => {
+          var _a2;
+          return (_a2 = _ctx.$el.querySelector("textarea")) == null ? void 0 : _a2.focus();
+        })
+      }, [
+        withDirectives(createElementVNode("textarea", mergeProps({
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event)
+        }, _ctx.$attrs, {
+          placeholder: _ctx.placeholder,
+          maxlength: _ctx.maxLength,
+          disabled: _ctx.disabled,
+          class: "celeste-textarea"
+        }), null, 16, _hoisted_2), [
+          [vModelText, modelValue.value]
+        ]),
+        _ctx.showCount && Number(_ctx.maxLength) ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(`${((_a = modelValue.value) == null ? void 0 : _a.length) || 0}/${_ctx.maxLength}`), 1)) : createCommentVNode("", true)
+      ], 10, _hoisted_1);
+    };
+  }
+});
+const textarea = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-76864cee"]]);
+export {
+  textarea as default
+};

package/dist/es/tooltip.js

@@ -0,0 +1,116 @@
+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 { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
+const _hoisted_1 = { class: "celeste-tooltip-content-box" };
+const _hoisted_2 = {
+  key: 0,
+  class: "celeste-tooltip-content-title"
+};
+const _hoisted_3 = {
+  key: 1,
+  class: "celeste-tooltip-content-description"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "tooltip",
+  props: {
+    class: {},
+    size: { default: "sm" },
+    variant: { default: "light" },
+    icon: {},
+    title: {},
+    description: {},
+    dismissible: { type: Boolean },
+    defaultOpen: { type: Boolean },
+    open: { type: Boolean },
+    delayDuration: { default: 0 },
+    disableHoverableContent: { type: Boolean },
+    disableClosingTrigger: { type: Boolean },
+    disabled: { type: Boolean },
+    ignoreNonKeyboardFocus: { type: Boolean },
+    forceMount: { type: Boolean },
+    ariaLabel: {},
+    asChild: { type: Boolean },
+    as: {},
+    side: {},
+    sideOffset: { default: 12 },
+    align: {},
+    alignOffset: {},
+    avoidCollisions: { type: Boolean },
+    collisionBoundary: {},
+    collisionPadding: {},
+    arrowPadding: {},
+    sticky: {},
+    hideWhenDetached: { type: Boolean }
+  },
+  emits: ["update:open"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const forwarded = xe(props, emits);
+    const isOpen = ref(props.defaultOpen);
+    function close() {
+      isOpen.value = false;
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Lg), null, {
+        default: withCtx(() => [
+          createVNode(unref(zg), mergeProps(unref(forwarded), {
+            open: props.open || isOpen.value,
+            "onUpdate:open": _cache[0] || (_cache[0] = (state) => isOpen.value = state)
+          }), {
+            default: withCtx(() => [
+              createVNode(unref(Kg), { "as-child": "" }, {
+                default: withCtx(() => [
+                  renderSlot(_ctx.$slots, "default", {}, void 0, true)
+                ]),
+                _: 3
+              }),
+              createVNode(unref(jg), { class: "celeste-tooltip-portal" }, {
+                default: withCtx(() => [
+                  createVNode(unref(Hg), mergeProps({ ...unref(forwarded), ..._ctx.$attrs }, {
+                    size: _ctx.size,
+                    variant: _ctx.variant,
+                    class: unref(clsx)("celeste-tooltip-content", props.class)
+                  }), {
+                    default: withCtx(() => [
+                      _ctx.icon ? (openBlock(), createElementBlock("i", {
+                        key: 0,
+                        class: normalizeClass(`celeste-tooltip-content-icon ${_ctx.icon}`)
+                      }, null, 2)) : createCommentVNode("", true),
+                      createElementVNode("div", _hoisted_1, [
+                        _ctx.title ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(_ctx.title), 1)) : createCommentVNode("", true),
+                        _ctx.description ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(_ctx.description), 1)) : createCommentVNode("", true)
+                      ]),
+                      _ctx.dismissible ? (openBlock(), createBlock(CompactButton, {
+                        key: 1,
+                        variant: "ghost",
+                        icon: "i-celeste-close-line",
+                        onClick: close
+                      })) : createCommentVNode("", true),
+                      createVNode(unref(Wg), { "as-child": "" }, {
+                        default: withCtx(() => _cache[1] || (_cache[1] = [
+                          createElementVNode("span", { class: "celeste-tooltip-content-arrow" }, null, -1)
+                        ])),
+                        _: 1
+                      })
+                    ]),
+                    _: 1
+                  }, 16, ["size", "variant", "class"])
+                ]),
+                _: 1
+              })
+            ]),
+            _: 3
+          }, 16, ["open"])
+        ]),
+        _: 3
+      });
+    };
+  }
+});
+const Tooltip = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-0dc4a40e"]]);
+export {
+  Tooltip as default
+};

package/dist/es/use-color-model.js

@@ -0,0 +1,6 @@
+import { C, d } from "./chunks/use-color-model.js";
+import "vue";
+export {
+  C as ColorPickerEmits,
+  d as defineColorModel
+};

package/dist/es/use-delegated-props.js

@@ -0,0 +1,14 @@
+import { computed } from "vue";
+function useDelegatedProps(props, excludeKeys = ["class"]) {
+  return computed(() => {
+    const keysToExclude = Array.isArray(excludeKeys) ? excludeKeys : [excludeKeys];
+    const delegated = { ...props };
+    keysToExclude.forEach((key) => {
+      delete delegated[key];
+    });
+    return delegated;
+  });
+}
+export {
+  useDelegatedProps
+};

package/dist/es/use-user-select.js

@@ -0,0 +1,39 @@
+import { ref, onUnmounted, readonly } from "vue";
+function useUserPageSelection() {
+  const isDisabled = ref(false);
+  let styleElement = null;
+  const preventPageUserSelect = () => {
+    if (!styleElement) {
+      styleElement = document.createElement("style");
+      styleElement.textContent = "body > * { user-select: none; }";
+      document.head.appendChild(styleElement);
+      isDisabled.value = true;
+    }
+  };
+  const allowPageUserSelect = () => {
+    if (styleElement) {
+      styleElement.remove();
+      styleElement = null;
+      isDisabled.value = false;
+    }
+  };
+  const togglePageUserSelect = () => {
+    if (styleElement) {
+      allowPageUserSelect();
+      return;
+    }
+    preventPageUserSelect();
+  };
+  onUnmounted(() => {
+    allowPageUserSelect();
+  });
+  return {
+    isDisabled: readonly(isDisabled),
+    togglePageUserSelect,
+    preventPageUserSelect,
+    allowPageUserSelect
+  };
+}
+export {
+  useUserPageSelection
+};

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+import { App } from 'vue';
+export declare const Celeste: {
+    install(vue: App): void;
+};
+export * from './components';

package/dist/utils/color.d.ts

@@ -0,0 +1,26 @@
+export type ArrowDirection = 'up' | 'down' | 'left' | 'right';
+export type RGBKey = 'r' | 'g' | 'b';
+export type HSLKey = 'h' | 's' | 'l';
+export type HSBKey = 'h' | 's' | 'v';
+export type AlphaKey = 'a';
+export type ColorKey = RGBKey | HSLKey | HSBKey | AlphaKey;
+export interface Coordinates {
+    x: number;
+    y: number;
+}
+export declare const COLOR_NUMBER_VALIDATION_PATTERN: RegExp;
+export declare const HEX_VALIDATION_PATTERN: RegExp;
+export declare const DEFAULT_SWATCH: string[];
+export declare function getFractionDigit(data: number | string): number;
+export declare function clamp(value: number, min: number, max: number): number;
+export declare function truncColorValue(value: string): number;
+export declare function getColorConstraints(key: ColorKey): {
+    min: number;
+    max: number;
+};
+export declare function bumpColorValue(value: number, direction: Omit<ArrowDirection, 'left' | 'right'> | null): number;
+export declare function getPageXYFromEvent(e: MouseEvent | TouchEvent): Coordinates;
+export declare function getScrollXY(): Coordinates;
+/** get the position of the container relative to the document’s edge, regardless of any scrolling that has occurred */
+export declare function getAbsolutePosition(container: HTMLElement): Coordinates;
+export declare function resolveArrowDirection(e: KeyboardEvent): ArrowDirection;

package/dist/utils/crypto.d.ts

@@ -0,0 +1 @@
+export declare function uid(prefix?: string, random?: boolean): string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@youcan/celeste",
   "type": "module",
-  "version": "0.6.29",
+  "version": "0.6.30",
   "author": "YouCan <tech@youcan.shop>",
   "keywords": [
     "youcan",
@@ -32,8 +32,8 @@
     "clsx": "^2.1.1",
     "radix-vue": "^1.9.12",
     "tinycolor2": "^1.6.0",
-    "@youcan/celeste-icons": "0.6.29",
-    "@youcan/celeste-tokens": "0.6.29"
+    "@youcan/celeste-icons": "0.6.30",
+    "@youcan/celeste-tokens": "0.6.30"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.0.0",