@mekari/pixel3-airene-chat-input 0.0.1-dev.0

package/dist/airene-chat-input.d.mts

@@ -0,0 +1,99 @@
+import * as vue_jsx_runtime from 'vue/jsx-runtime';
+import * as vue from 'vue';
+
+declare const MpAireneChatInput: vue.DefineComponent<vue.ExtractPropTypes<{
+    id: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    modelValue: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    placeholder: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    maxlength: {
+        type: vue.PropType<string>;
+    };
+    ariaLabel: {
+        type: vue.PropType<string>;
+    };
+    ariaLabelledBy: {
+        type: vue.PropType<string>;
+    };
+    isReadOnly: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isDisabled: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isInvalid: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isRequired: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isForceFocus: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+}>, () => vue_jsx_runtime.JSX.Element, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    id: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    modelValue: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    placeholder: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    maxlength: {
+        type: vue.PropType<string>;
+    };
+    ariaLabel: {
+        type: vue.PropType<string>;
+    };
+    ariaLabelledBy: {
+        type: vue.PropType<string>;
+    };
+    isReadOnly: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isDisabled: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isInvalid: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isRequired: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isForceFocus: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    id: string;
+    modelValue: string;
+    placeholder: string;
+    isReadOnly: boolean;
+    isDisabled: boolean;
+    isInvalid: boolean;
+    isRequired: boolean;
+    isForceFocus: boolean;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+export { MpAireneChatInput };

package/dist/airene-chat-input.d.ts

@@ -0,0 +1,99 @@
+import * as vue_jsx_runtime from 'vue/jsx-runtime';
+import * as vue from 'vue';
+
+declare const MpAireneChatInput: vue.DefineComponent<vue.ExtractPropTypes<{
+    id: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    modelValue: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    placeholder: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    maxlength: {
+        type: vue.PropType<string>;
+    };
+    ariaLabel: {
+        type: vue.PropType<string>;
+    };
+    ariaLabelledBy: {
+        type: vue.PropType<string>;
+    };
+    isReadOnly: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isDisabled: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isInvalid: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isRequired: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isForceFocus: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+}>, () => vue_jsx_runtime.JSX.Element, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    id: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    modelValue: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    placeholder: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    maxlength: {
+        type: vue.PropType<string>;
+    };
+    ariaLabel: {
+        type: vue.PropType<string>;
+    };
+    ariaLabelledBy: {
+        type: vue.PropType<string>;
+    };
+    isReadOnly: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isDisabled: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isInvalid: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isRequired: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isForceFocus: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    id: string;
+    modelValue: string;
+    placeholder: string;
+    isReadOnly: boolean;
+    isDisabled: boolean;
+    isInvalid: boolean;
+    isRequired: boolean;
+    isForceFocus: boolean;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+export { MpAireneChatInput };

package/dist/airene-chat-input.js

@@ -0,0 +1,254 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/airene-chat-input.tsx
+var airene_chat_input_exports = {};
+__export(airene_chat_input_exports, {
+  MpAireneChatInput: () => MpAireneChatInput
+});
+module.exports = __toCommonJS(airene_chat_input_exports);
+var import_vue2 = require("vue");
+var import_vue3 = require("vue");
+var import_pixel3_icon = require("@mekari/pixel3-icon");
+
+// src/modules/airene-chat-input.hooks.ts
+var import_vue = require("vue");
+var import_pixel3_utils = require("@mekari/pixel3-utils");
+var import_recipes = require("@mekari/pixel3-styled-system/recipes");
+var import_tokens = require("@mekari/pixel3-styled-system/tokens");
+function useAireneChatInput(props, emit, slots) {
+  const {
+    id,
+    modelValue,
+    placeholder,
+    maxlength,
+    ariaLabel,
+    ariaLabelledBy,
+    isReadOnly,
+    isDisabled,
+    isInvalid,
+    isRequired,
+    isForceFocus
+  } = (0, import_vue.toRefs)(props);
+  const getId = id.value || (0, import_pixel3_utils.getUniqueId)("", "airene-chat-input").value;
+  const input = (0, import_vue.ref)();
+  const inputHeight = (0, import_vue.ref)("20px");
+  const rounded = (0, import_vue.ref)("full");
+  const rootAttrs = (0, import_vue.computed)(() => {
+    return {
+      "data-pixel-component": "MpAireneChatInput",
+      id: getId,
+      class: (0, import_recipes.aireneInputSlotRecipe)().root,
+      disabled: isDisabled.value || void 0,
+      "data-invalid": isInvalid.value || void 0,
+      style: {
+        borderRadius: import_tokens.token.var(`radii.${rounded.value}`)
+      }
+    };
+  });
+  const wrapperAttrs = (0, import_vue.computed)(() => {
+    return {
+      class: (0, import_recipes.aireneInputSlotRecipe)().wrapper
+    };
+  });
+  const inputAttrs = (0, import_vue.computed)(() => {
+    return {
+      ref: input,
+      id: `${getId}--input`,
+      class: (0, import_recipes.aireneInputSlotRecipe)().input,
+      value: modelValue.value,
+      placeholder: placeholder.value,
+      rows: "1",
+      autocomplete: "off",
+      spellcheck: "false",
+      maxlength: maxlength == null ? void 0 : maxlength.value,
+      disabled: isDisabled.value,
+      readonly: isReadOnly.value,
+      required: isRequired.value,
+      "aria-label": ariaLabel == null ? void 0 : ariaLabel.value,
+      "aria-labelledby": ariaLabelledBy == null ? void 0 : ariaLabelledBy.value,
+      "aria-readonly": (isReadOnly == null ? void 0 : isReadOnly.value) || void 0,
+      "aria-required": (isRequired == null ? void 0 : isRequired.value) || void 0,
+      "aria-invalid": isInvalid.value || void 0,
+      style: {
+        height: inputHeight.value
+      },
+      onInput: handleInput,
+      onChange: handleChange,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      onKeydown: handleKeydown,
+      onClick: handleSelectAllText
+    };
+  });
+  const buttonAttrs = (0, import_vue.computed)(() => {
+    return {
+      name: "sent",
+      variant: isActive.value ? "fill" : "outline",
+      color: isActive.value ? "icon.brand" : "icon.default",
+      onClick: handleClick
+    };
+  });
+  const isActive = (0, import_vue.computed)(() => {
+    return modelValue.value.length > 0;
+  });
+  const hasChildren = (0, import_vue.computed)(() => {
+    return slots.default && slots.default().length > 0;
+  });
+  function handleInput(e) {
+    const target = e.target;
+    emit("input", target.value, e);
+    emit("update:modelValue", target.value);
+    handleAdjustInputHeight();
+  }
+  __name(handleInput, "handleInput");
+  function handleChange(e) {
+    const target = e.target;
+    emit("change", target.value, e);
+  }
+  __name(handleChange, "handleChange");
+  function handleAdjustInputHeight() {
+    inputHeight.value = "auto";
+    (0, import_vue.nextTick)(() => {
+      const height = input.value.scrollHeight;
+      inputHeight.value = `${height}px`;
+      rounded.value = height >= 40 || hasChildren.value ? "xl" : "full";
+    });
+  }
+  __name(handleAdjustInputHeight, "handleAdjustInputHeight");
+  function handleSelectAllText(e) {
+    const target = e.target;
+    const textLabel = target.value;
+    if (textLabel) {
+      target.setSelectionRange(0, textLabel.length);
+    }
+  }
+  __name(handleSelectAllText, "handleSelectAllText");
+  function handleFocus(e) {
+    emit("focus", e);
+  }
+  __name(handleFocus, "handleFocus");
+  function handleBlur(e) {
+    emit("blur", e);
+  }
+  __name(handleBlur, "handleBlur");
+  function handleKeydown(e) {
+    emit("keydown", e);
+  }
+  __name(handleKeydown, "handleKeydown");
+  function handleClick(e) {
+    if (isDisabled.value)
+      return;
+    emit("click", e);
+  }
+  __name(handleClick, "handleClick");
+  (0, import_vue.watch)(() => modelValue.value, (newValue) => {
+    if (newValue) {
+      handleAdjustInputHeight();
+    }
+  });
+  (0, import_vue.watchEffect)(() => {
+    var _a;
+    if (isForceFocus.value) {
+      (_a = input.value) == null ? void 0 : _a.focus();
+    }
+    if (hasChildren.value) {
+      rounded.value = "xl";
+    }
+  });
+  return {
+    rootAttrs,
+    inputAttrs,
+    buttonAttrs,
+    wrapperAttrs,
+    isActive
+  };
+}
+__name(useAireneChatInput, "useAireneChatInput");
+
+// src/modules/airene-chat-input.props.ts
+var aireneChatInputProps = {
+  id: {
+    type: String,
+    default: ""
+  },
+  modelValue: {
+    type: String,
+    default: ""
+  },
+  placeholder: {
+    type: String,
+    default: "Ask something..."
+  },
+  maxlength: {
+    type: String
+  },
+  ariaLabel: {
+    type: String
+  },
+  ariaLabelledBy: {
+    type: String
+  },
+  isReadOnly: {
+    type: Boolean,
+    default: false
+  },
+  isDisabled: {
+    type: Boolean,
+    default: false
+  },
+  isInvalid: {
+    type: Boolean,
+    default: false
+  },
+  isRequired: {
+    type: Boolean,
+    default: false
+  },
+  isForceFocus: {
+    type: Boolean,
+    default: false
+  }
+};
+
+// src/airene-chat-input.tsx
+var MpAireneChatInput = (0, import_vue3.defineComponent)({
+  name: "MpSkeleton",
+  props: aireneChatInputProps,
+  setup(props, {
+    slots,
+    emit
+  }) {
+    const {
+      rootAttrs,
+      wrapperAttrs,
+      inputAttrs,
+      buttonAttrs
+    } = useAireneChatInput(props, emit, slots);
+    return () => {
+      const children = slots.default && slots.default();
+      return (0, import_vue2.createVNode)("div", rootAttrs.value, [(0, import_vue2.createVNode)("div", wrapperAttrs.value, [(0, import_vue2.createVNode)("textarea", inputAttrs.value, null), children]), (0, import_vue2.createVNode)(import_pixel3_icon.MpIcon, buttonAttrs.value, null)]);
+    };
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MpAireneChatInput
+});

package/dist/airene-chat-input.mjs

@@ -0,0 +1,9 @@
+import {
+  MpAireneChatInput
+} from "./chunk-2K4QROIN.mjs";
+import "./chunk-KPLBIBRE.mjs";
+import "./chunk-4PYKLJPU.mjs";
+import "./chunk-QZ7VFGWC.mjs";
+export {
+  MpAireneChatInput
+};

package/dist/chunk-2K4QROIN.mjs

@@ -0,0 +1,34 @@
+import {
+  useAireneChatInput
+} from "./chunk-KPLBIBRE.mjs";
+import {
+  aireneChatInputProps
+} from "./chunk-4PYKLJPU.mjs";
+
+// src/airene-chat-input.tsx
+import { createVNode as _createVNode } from "vue";
+import { defineComponent } from "vue";
+import { MpIcon } from "@mekari/pixel3-icon";
+var MpAireneChatInput = defineComponent({
+  name: "MpSkeleton",
+  props: aireneChatInputProps,
+  setup(props, {
+    slots,
+    emit
+  }) {
+    const {
+      rootAttrs,
+      wrapperAttrs,
+      inputAttrs,
+      buttonAttrs
+    } = useAireneChatInput(props, emit, slots);
+    return () => {
+      const children = slots.default && slots.default();
+      return _createVNode("div", rootAttrs.value, [_createVNode("div", wrapperAttrs.value, [_createVNode("textarea", inputAttrs.value, null), children]), _createVNode(MpIcon, buttonAttrs.value, null)]);
+    };
+  }
+});
+
+export {
+  MpAireneChatInput
+};

package/dist/chunk-4PYKLJPU.mjs

@@ -0,0 +1,50 @@
+// src/modules/airene-chat-input.props.ts
+var aireneChatInputProps = {
+  id: {
+    type: String,
+    default: ""
+  },
+  modelValue: {
+    type: String,
+    default: ""
+  },
+  placeholder: {
+    type: String,
+    default: "Ask something..."
+  },
+  maxlength: {
+    type: String
+  },
+  ariaLabel: {
+    type: String
+  },
+  ariaLabelledBy: {
+    type: String
+  },
+  isReadOnly: {
+    type: Boolean,
+    default: false
+  },
+  isDisabled: {
+    type: Boolean,
+    default: false
+  },
+  isInvalid: {
+    type: Boolean,
+    default: false
+  },
+  isRequired: {
+    type: Boolean,
+    default: false
+  },
+  isForceFocus: {
+    type: Boolean,
+    default: false
+  }
+};
+var aireneChatInputEmit = ["change", "input", "keydown", "focus", "blur", "click", "update:modelValue"];
+
+export {
+  aireneChatInputProps,
+  aireneChatInputEmit
+};

package/dist/chunk-KPLBIBRE.mjs

@@ -0,0 +1,162 @@
+import {
+  __name
+} from "./chunk-QZ7VFGWC.mjs";
+
+// src/modules/airene-chat-input.hooks.ts
+import { toRefs, computed, ref, nextTick, watch, watchEffect } from "vue";
+import { getUniqueId } from "@mekari/pixel3-utils";
+import { aireneInputSlotRecipe } from "@mekari/pixel3-styled-system/recipes";
+import { token } from "@mekari/pixel3-styled-system/tokens";
+function useAireneChatInput(props, emit, slots) {
+  const {
+    id,
+    modelValue,
+    placeholder,
+    maxlength,
+    ariaLabel,
+    ariaLabelledBy,
+    isReadOnly,
+    isDisabled,
+    isInvalid,
+    isRequired,
+    isForceFocus
+  } = toRefs(props);
+  const getId = id.value || getUniqueId("", "airene-chat-input").value;
+  const input = ref();
+  const inputHeight = ref("20px");
+  const rounded = ref("full");
+  const rootAttrs = computed(() => {
+    return {
+      "data-pixel-component": "MpAireneChatInput",
+      id: getId,
+      class: aireneInputSlotRecipe().root,
+      disabled: isDisabled.value || void 0,
+      "data-invalid": isInvalid.value || void 0,
+      style: {
+        borderRadius: token.var(`radii.${rounded.value}`)
+      }
+    };
+  });
+  const wrapperAttrs = computed(() => {
+    return {
+      class: aireneInputSlotRecipe().wrapper
+    };
+  });
+  const inputAttrs = computed(() => {
+    return {
+      ref: input,
+      id: `${getId}--input`,
+      class: aireneInputSlotRecipe().input,
+      value: modelValue.value,
+      placeholder: placeholder.value,
+      rows: "1",
+      autocomplete: "off",
+      spellcheck: "false",
+      maxlength: maxlength == null ? void 0 : maxlength.value,
+      disabled: isDisabled.value,
+      readonly: isReadOnly.value,
+      required: isRequired.value,
+      "aria-label": ariaLabel == null ? void 0 : ariaLabel.value,
+      "aria-labelledby": ariaLabelledBy == null ? void 0 : ariaLabelledBy.value,
+      "aria-readonly": (isReadOnly == null ? void 0 : isReadOnly.value) || void 0,
+      "aria-required": (isRequired == null ? void 0 : isRequired.value) || void 0,
+      "aria-invalid": isInvalid.value || void 0,
+      style: {
+        height: inputHeight.value
+      },
+      onInput: handleInput,
+      onChange: handleChange,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      onKeydown: handleKeydown,
+      onClick: handleSelectAllText
+    };
+  });
+  const buttonAttrs = computed(() => {
+    return {
+      name: "sent",
+      variant: isActive.value ? "fill" : "outline",
+      color: isActive.value ? "icon.brand" : "icon.default",
+      onClick: handleClick
+    };
+  });
+  const isActive = computed(() => {
+    return modelValue.value.length > 0;
+  });
+  const hasChildren = computed(() => {
+    return slots.default && slots.default().length > 0;
+  });
+  function handleInput(e) {
+    const target = e.target;
+    emit("input", target.value, e);
+    emit("update:modelValue", target.value);
+    handleAdjustInputHeight();
+  }
+  __name(handleInput, "handleInput");
+  function handleChange(e) {
+    const target = e.target;
+    emit("change", target.value, e);
+  }
+  __name(handleChange, "handleChange");
+  function handleAdjustInputHeight() {
+    inputHeight.value = "auto";
+    nextTick(() => {
+      const height = input.value.scrollHeight;
+      inputHeight.value = `${height}px`;
+      rounded.value = height >= 40 || hasChildren.value ? "xl" : "full";
+    });
+  }
+  __name(handleAdjustInputHeight, "handleAdjustInputHeight");
+  function handleSelectAllText(e) {
+    const target = e.target;
+    const textLabel = target.value;
+    if (textLabel) {
+      target.setSelectionRange(0, textLabel.length);
+    }
+  }
+  __name(handleSelectAllText, "handleSelectAllText");
+  function handleFocus(e) {
+    emit("focus", e);
+  }
+  __name(handleFocus, "handleFocus");
+  function handleBlur(e) {
+    emit("blur", e);
+  }
+  __name(handleBlur, "handleBlur");
+  function handleKeydown(e) {
+    emit("keydown", e);
+  }
+  __name(handleKeydown, "handleKeydown");
+  function handleClick(e) {
+    if (isDisabled.value)
+      return;
+    emit("click", e);
+  }
+  __name(handleClick, "handleClick");
+  watch(() => modelValue.value, (newValue) => {
+    if (newValue) {
+      handleAdjustInputHeight();
+    }
+  });
+  watchEffect(() => {
+    var _a;
+    if (isForceFocus.value) {
+      (_a = input.value) == null ? void 0 : _a.focus();
+    }
+    if (hasChildren.value) {
+      rounded.value = "xl";
+    }
+  });
+  return {
+    rootAttrs,
+    inputAttrs,
+    buttonAttrs,
+    wrapperAttrs,
+    isActive
+  };
+}
+__name(useAireneChatInput, "useAireneChatInput");
+
+export {
+  useAireneChatInput
+};