@aziontech/webkit 1.2.0 → 1.3.0

package/src/core/form/field-text-privacy/field-text-privacy.vue

@@ -2,7 +2,8 @@
   import { computed, ref, toRef, useAttrs, useSlots } from 'vue'
   import { useField } from 'vee-validate'
   import InputText from 'primevue/inputtext'
-  import LabelBlock from '../label'
+  import Label from '../label'
+  import InputSlot from '../slots/input-slot'
 
   const emit = defineEmits(['blur', 'input', 'update:isPublic'])
 
@@ -131,149 +132,151 @@
 </script>
 
 <template>
-  <LabelBlock
-    v-if="props.label"
-    :for="props.name"
-    :data-testid="customTestId.label"
-    :label="props.label"
-    :isRequired="attrs.required"
-  />
-
-  <div
-    class="p-inputgroup rounded transition-shadow duration-150"
-    :class="[groupShadowClass, disabled ? 'opacity-50 pointer-events-none' : '']"
-    @focusin="onGroupFocusIn"
-    @focusout="onGroupFocusOut"
-    @mouseenter="onGroupMouseEnter"
-    @mouseleave="onGroupMouseLeave"
-  >
-    <InputText
-      v-bind="sensitive ? { 'data-sentry-mask': '' } : {}"
-      v-model="inputValue"
-      ref="inputRef"
-      type="text"
-      :data-testid="customTestId.input"
-      :id="name"
-      :name="name"
-      :readonly="readonly"
-      :disabled="disabled"
-      :placeholder="props.placeholder"
-      :class="[
-        '!border-r-0 !outline-none !shadow-none transition-colors duration-150',
-        groupBorderClass,
-        { 'p-invalid': aditionalError || veeValidateErrorMessage },
-        props.class
-      ]"
-      @input="onChange"
-      @keypress.enter.prevent
-      @blur="onBlur"
+  <InputSlot>
+    <Label
+      v-if="props.label"
+      :for="props.name"
+      :data-testid="customTestId.label"
+      :label="props.label"
+      :isRequired="attrs.required"
     />
 
-    <span
-      :data-testid="customTestId.privacySwitch"
-      :title="isPublic ? 'Public – click to make private' : 'Private – click to make public'"
-      :aria-label="
-        isPublic
-          ? 'Field is public. Click to make private.'
-          : 'Field is private. Click to make public.'
-      "
-      :aria-pressed="isPublic"
-      role="switch"
-      tabindex="0"
-      class="p-inputgroup-addon !bg-[var(--input-bg,var(--surface-0))] !border-l-0 cursor-pointer outline-none transition-colors duration-150 select-none"
-      :class="[
-        groupBorderClass,
-        { 'opacity-50 cursor-not-allowed pointer-events-none': disabled || readonly }
-      ]"
-      @click="togglePrivacy"
-      @keydown.enter.prevent="togglePrivacy"
-      @keydown.space.prevent="togglePrivacy"
+    <div
+      class="p-inputgroup rounded transition-shadow duration-150"
+      :class="[groupShadowClass, disabled ? 'opacity-50 pointer-events-none' : '']"
+      @focusin="onGroupFocusIn"
+      @focusout="onGroupFocusOut"
+      @mouseenter="onGroupMouseEnter"
+      @mouseleave="onGroupMouseLeave"
     >
+      <InputText
+        v-bind="sensitive ? { 'data-sentry-mask': '' } : {}"
+        v-model="inputValue"
+        ref="inputRef"
+        type="text"
+        :data-testid="customTestId.input"
+        :id="name"
+        :name="name"
+        :readonly="readonly"
+        :disabled="disabled"
+        :placeholder="props.placeholder"
+        :class="[
+          '!border-r-0 !outline-none !shadow-none transition-colors duration-150',
+          groupBorderClass,
+          { 'p-invalid': aditionalError || veeValidateErrorMessage },
+          props.class
+        ]"
+        @input="onChange"
+        @keypress.enter.prevent
+        @blur="onBlur"
+      />
+
       <span
-        class="relative w-9 h-5 rounded-full transition-colors duration-200"
-        :class="
+        :data-testid="customTestId.privacySwitch"
+        :title="isPublic ? 'Public – click to make private' : 'Private – click to make public'"
+        :aria-label="
           isPublic
-            ? 'bg-[#f3652b] hover:bg-[#d95522]'
-            : 'bg-[var(--input-switch-slider-off-bg)] hover:bg-[var(--input-switch-slider-off-hover-bg)]'
+            ? 'Field is public. Click to make private.'
+            : 'Field is private. Click to make public.'
         "
+        :aria-pressed="isPublic"
+        role="switch"
+        tabindex="0"
+        class="p-inputgroup-addon !bg-[var(--input-bg,var(--surface-0))] !border-l-0 cursor-pointer outline-none transition-colors duration-150 select-none"
+        :class="[
+          groupBorderClass,
+          { 'opacity-50 cursor-not-allowed pointer-events-none': disabled || readonly }
+        ]"
+        @click="togglePrivacy"
+        @keydown.enter.prevent="togglePrivacy"
+        @keydown.space.prevent="togglePrivacy"
       >
         <span
-          class="absolute top-0.5 left-0.5 w-4 h-4 rounded-full bg-white flex items-center justify-center shadow-sm transition-transform duration-200"
-          :class="isPublic ? 'translate-x-4' : 'translate-x-0'"
+          class="relative w-9 h-5 rounded-full transition-colors duration-200"
+          :class="
+            isPublic
+              ? 'bg-[#f3652b] hover:bg-[#d95522]'
+              : 'bg-[var(--input-switch-slider-off-bg)] hover:bg-[var(--input-switch-slider-off-hover-bg)]'
+          "
         >
-          <span class="relative w-3 h-3">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="12"
-              height="12"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2.5"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              aria-hidden="true"
-              class="absolute inset-0 transition-all duration-200 text-gray-500"
-              :class="isPublic ? 'opacity-0 scale-75' : 'opacity-100 scale-100'"
-            >
-              <rect
-                x="3"
-                y="11"
-                width="18"
-                height="11"
-                rx="2"
-                ry="2"
-              />
-              <path d="M7 11V7a5 5 0 0 1 10 0v4" />
-            </svg>
+          <span
+            class="absolute top-0.5 left-0.5 w-4 h-4 rounded-full bg-white flex items-center justify-center shadow-sm transition-transform duration-200"
+            :class="isPublic ? 'translate-x-4' : 'translate-x-0'"
+          >
+            <span class="relative w-3 h-3">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="12"
+                height="12"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                aria-hidden="true"
+                class="absolute inset-0 transition-all duration-200 text-gray-500"
+                :class="isPublic ? 'opacity-0 scale-75' : 'opacity-100 scale-100'"
+              >
+                <rect
+                  x="3"
+                  y="11"
+                  width="18"
+                  height="11"
+                  rx="2"
+                  ry="2"
+                />
+                <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+              </svg>
 
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="12"
-              height="12"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2.5"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              aria-hidden="true"
-              class="absolute inset-0 transition-all duration-200 text-orange-700"
-              :class="isPublic ? 'opacity-100 scale-100' : 'opacity-0 scale-75'"
-            >
-              <rect
-                x="3"
-                y="11"
-                width="18"
-                height="11"
-                rx="2"
-                ry="2"
-              />
-              <path d="M7 11V7a5 5 0 0 1 9.9-1" />
-            </svg>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="12"
+                height="12"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                aria-hidden="true"
+                class="absolute inset-0 transition-all duration-200 text-orange-700"
+                :class="isPublic ? 'opacity-100 scale-100' : 'opacity-0 scale-75'"
+              >
+                <rect
+                  x="3"
+                  y="11"
+                  width="18"
+                  height="11"
+                  rx="2"
+                  ry="2"
+                />
+                <path d="M7 11V7a5 5 0 0 1 9.9-1" />
+              </svg>
+            </span>
           </span>
         </span>
       </span>
-    </span>
-  </div>
+    </div>
 
-  <small
-    v-if="aditionalError || veeValidateErrorMessage"
-    class="p-error text-xs font-normal leading-tight"
-    :data-testid="customTestId.error"
-  >
-    {{ aditionalError || veeValidateErrorMessage }}
-  </small>
+    <small
+      v-if="aditionalError || veeValidateErrorMessage"
+      class="p-error text-xs font-normal leading-tight"
+      :data-testid="customTestId.error"
+    >
+      {{ aditionalError || veeValidateErrorMessage }}
+    </small>
 
-  <small
-    v-if="props.description || hasDescriptionSlot"
-    class="text-xs text-color-secondary font-normal leading-5"
-    :data-testid="customTestId.description"
-  >
-    <slot name="description">
-      {{ props.description }}
-    </slot>
-  </small>
+    <small
+      v-if="props.description || hasDescriptionSlot"
+      class="text-xs text-color-secondary font-normal leading-5"
+      :data-testid="customTestId.description"
+    >
+      <slot name="description">
+        {{ props.description }}
+      </slot>
+    </small>
+  </InputSlot>
 </template>
 
 <style scoped>

package/src/core/form/field-text-privacy/field-text-privacy.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"field-text-privacy.vue.d.ts","sourceRoot":"","sources":["field-text-privacy.vue"],"names":[],"mappings":"wBAuvBqB,OAAO,YAAY;;AADxC,4BAA2B,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;qBAEtD,CAAC,EAAE,CAAC;;;AAnDzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6EAgDG"}
+{"version":3,"file":"field-text-privacy.vue.d.ts","sourceRoot":"","sources":["field-text-privacy.vue"],"names":[],"mappings":"wBA2wBqB,OAAO,YAAY;;AADxC,4BAA2B,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;qBAEtD,CAAC,EAAE,CAAC;;;AAnDzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6EAgDG"}

package/src/core/form/slots/input-slot/input-slot.vue

@@ -0,0 +1,8 @@
+<script setup>
+defineOptions({ name: 'InputSlot' })
+</script>
+<template>
+    <div class="flex flex-col sm:max-w-lg w-full gap-2">
+        <slot />
+    </div>
+</template>

package/src/core/form/slots/input-slot/input-slot.vue.d.ts

@@ -0,0 +1,11 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    default?: ((props: {}) => any) | undefined;
+};
+//# sourceMappingURL=input-slot.vue.d.ts.map

package/src/core/form/slots/input-slot/input-slot.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-slot.vue.d.ts","sourceRoot":"","sources":["input-slot.vue"],"names":[],"mappings":"wBAuCqB,OAAO,YAAY;;AADxC,4BAA2B,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;qBAEtD,CAAC,EAAE,CAAC;;;AAJzB,wSACG"}

package/src/core/form/slots/input-slot/package.json

@@ -0,0 +1,11 @@
+{
+  "main": "./input-slot.vue",
+  "module": "./input-slot.vue",
+  "types": "./input-slot.vue.d.ts",
+  "browser": {
+    "./sfc": "./input-slot.vue"
+  },
+  "sideEffects": [
+    "*.vue"
+  ]
+}