sit-onyx 1.1.0-dev-20250929075001 → 1.1.0-dev-20250929145347

package/dist/components/OnyxInput/OnyxInput.d.vue.ts

@@ -35,15 +35,18 @@ declare const __VLS_component: import('vue').DefineComponent<OnyxInputProps, {
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     validityChange: (validity: ValidityState) => any;
     "update:modelValue": (value: string) => any;
+    "update:showPassword": (showPassword: boolean) => any;
 }, string, import('vue').PublicProps, Readonly<OnyxInputProps> & Readonly<{
     onValidityChange?: ((validity: ValidityState) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    "onUpdate:showPassword"?: ((showPassword: boolean) => any) | undefined;
 }>, {
     skeleton: import('../../composables/useSkeletonState.js', { with: { "resolution-mode": "import" } }).SkeletonInjected;
     required: boolean;
     disabled: import('../OnyxForm/OnyxForm.core.js', { with: { "resolution-mode": "import" } }).FormInjected<boolean>;
     showError: import('../OnyxForm/OnyxForm.core.js', { with: { "resolution-mode": "import" } }).FormInjected<import('../../composables/useErrorClass.js', { with: { "resolution-mode": "import" } }).ShowErrorMode>;
     requiredMarker: import('../OnyxForm/OnyxForm.core.js', { with: { "resolution-mode": "import" } }).FormInjected<import('../../composables/required.js', { with: { "resolution-mode": "import" } }).RequiredMarkerType>;
+    showPassword: boolean;
     readonly: boolean;
     loading: boolean;
     autocapitalize: import('../../composables/useLenientMaxLengthValidation.js', { with: { "resolution-mode": "import" } }).Autocapitalize;

package/dist/components/OnyxInput/types.d.ts

@@ -19,6 +19,11 @@ export type OnyxInputProps = SharedFormElementProps & SharedTextInputProps & {
      * Whether to hide the clear icon when the input is filled and focused.
      */
     hideClearIcon?: boolean;
+    /**
+     * Show or hide the password value for input with `type="password"`.
+     * If unset, the state will be managed internally.
+     */
+    showPassword?: boolean;
 };
 export declare const INPUT_TYPES: readonly ["email", "password", "search", "tel", "text", "url"];
 export type InputType = (typeof INPUT_TYPES)[number];

package/dist/index.esm-bundler.js

@@ -4393,24 +4393,26 @@ const _sfc_main$10 = /* @__PURE__ */ defineComponent({
       () => props.alignment === "auto" ? openAlignment.value : props.alignment
     );
     const positionAndAlignment = computed(() => {
-      let returnPosition = toolTipPosition.value;
-      if ((toolTipPosition.value === "top" || toolTipPosition.value === "bottom") && alignsWithEdge.value) {
+      if ((toolTipPosition.value === "top" || toolTipPosition.value === "bottom") && props.alignsWithEdge) {
         if (alignment.value === "left") {
-          returnPosition = toolTipPosition.value + " x-start";
+          return `${toolTipPosition.value} x-start`;
         }
         if (alignment.value === "right") {
-          returnPosition = toolTipPosition.value + " x-end";
+          return `${toolTipPosition.value} x-end`;
         }
       }
-      return returnPosition;
+      if (toolTipPosition.value.includes(" ")) {
+        return toolTipPosition.value;
+      }
+      return `${toolTipPosition.value} center`;
     });
     const createPattern = () => triggerType.value === "hover" ? createTooltip(tooltipOptions.value) : createToggletip(toggletipOptions.value);
     const ariaPattern = shallowRef(createPattern());
     watch(triggerType, () => ariaPattern.value = createPattern());
     const tooltip2 = computed(() => ariaPattern.value?.elements.tooltip);
     const triggerElementProps = computed(() => toValue(ariaPattern.value?.elements.trigger));
-    const alignsWithEdge = computed(() => props.alignsWithEdge);
-    const fitParent = computed(() => props.fitParent);
+    const alignsWithEdge = toRef(() => props.alignsWithEdge);
+    const fitParent = toRef(() => props.fitParent);
     const tooltipWrapperRef = useTemplateRef("tooltipWrapperRefEl");
     const tooltipRef = useTemplateRef("tooltipRefEl");
     const { openDirection, updateOpenDirection } = useOpenDirection(tooltipWrapperRef, "top");
@@ -4458,27 +4460,31 @@ const _sfc_main$10 = /* @__PURE__ */ defineComponent({
     onMounted(() => {
       handleOpening(isVisible.value);
       updateDirections();
-      if (!useragentSupportsAnchorApi.value) updateAnchorPositionPolyfill();
-    });
-    watch(isVisible, async (newVal) => {
-      await nextTick();
-      handleOpening(newVal);
-      updateDirections();
-      if (!useragentSupportsAnchorApi.value) updateAnchorPositionPolyfill();
     });
-    watch([tooltipWidth, toolTipPosition, alignment, alignsWithEdge], async () => {
-      if (!useragentSupportsAnchorApi.value) {
-        await nextTick();
-        updateAnchorPositionPolyfill();
+    onMounted(() => {
+      if (useragentSupportsAnchorApi.value) {
+        return;
       }
+      watch(
+        [tooltipWidth, toolTipPosition, alignment, alignsWithEdge, isVisible],
+        () => updateAnchorPositionPolyfill(),
+        { flush: "post", immediate: true }
+      );
     });
-    const id = useId();
-    const anchorName = computed(() => `--anchor-${id}`);
+    watch(
+      isVisible,
+      async (newVal) => {
+        handleOpening(newVal);
+        updateDirections();
+      },
+      { flush: "post" }
+    );
+    const anchorName = `--anchor-${useId()}`;
     const tooltipStyles = computed(() => {
       if (useragentSupportsAnchorApi.value) {
         return {
           width: tooltipWidth.value,
-          "position-anchor": anchorName.value,
+          "position-anchor": anchorName,
           "position-area": positionAndAlignment.value
         };
       }
@@ -4488,7 +4494,7 @@ const _sfc_main$10 = /* @__PURE__ */ defineComponent({
         top: topPosition.value
       };
     });
-    const __returned__ = { props, emit, densityClass, t, isVisible, tooltipOptions, toggletipOptions, triggerType, toolTipPosition, alignment, positionAndAlignment, createPattern, ariaPattern, tooltip: tooltip2, triggerElementProps, alignsWithEdge, fitParent, tooltipWrapperRef, tooltipRef, openDirection, updateOpenDirection, openAlignment, updateOpenAlignment, leftPosition, topPosition, updateAnchorPositionPolyfill, useragentSupportsAnchorApi, updateDirections, handleOpening, tooltipClasses, width, tooltipWidth, id, anchorName, tooltipStyles, OnyxIcon };
+    const __returned__ = { props, emit, densityClass, t, isVisible, tooltipOptions, toggletipOptions, triggerType, toolTipPosition, alignment, positionAndAlignment, createPattern, ariaPattern, tooltip: tooltip2, triggerElementProps, alignsWithEdge, fitParent, tooltipWrapperRef, tooltipRef, openDirection, updateOpenDirection, openAlignment, updateOpenAlignment, leftPosition, topPosition, updateAnchorPositionPolyfill, useragentSupportsAnchorApi, updateDirections, handleOpening, tooltipClasses, width, tooltipWidth, anchorName, tooltipStyles, OnyxIcon };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }
@@ -8148,6 +8154,7 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
     success: { type: [String, Object], required: false },
     hideSuccessIcon: { type: Boolean, required: false },
     hideClearIcon: { type: Boolean, required: false },
+    showPassword: { type: Boolean, required: false },
     modelValue: { type: null, required: false },
     type: { type: String, required: false, default: "date" },
     min: { type: null, required: false },
@@ -8654,9 +8661,10 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
     type: { type: null, required: false, default: "text" },
     pattern: { type: null, required: false },
     hideSuccessIcon: { type: Boolean, required: false, default: false },
-    hideClearIcon: { type: Boolean, required: false, default: false }
+    hideClearIcon: { type: Boolean, required: false, default: false },
+    showPassword: { type: Boolean, required: false, default: void 0 }
   },
-  emits: ["validityChange", "update:modelValue"],
+  emits: ["validityChange", "update:modelValue", "update:showPassword"],
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emit = __emit;
@@ -8685,7 +8693,12 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
     const skeleton = useSkeletonContext(props);
     const errorClass = useErrorClass(showError);
     useAutofocus(input2, props);
-    const showPassword = ref(false);
+    const showPassword = useVModel({
+      props,
+      emit,
+      key: "showPassword",
+      default: false
+    });
     const displayType = computed(() => {
       if (props.type === "password" && showPassword.value) {
         return "text";
@@ -12763,6 +12776,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     minlength: { type: Number, required: false },
     autocapitalize: { type: null, required: false, default: "sentences" },
     modelValue: { type: null, required: false },
+    showPassword: { type: Boolean, required: false },
     autosize: { type: Object, required: false },
     disableManualResize: { type: Boolean, required: false, default: false }
   },