Restructure omni services and add Chatwoot research snapshot

2026-02-21 11:11:27 +07:00
parent edea7a0034
commit b73babbbf6
7732 changed files with 978203 additions and 32 deletions
--- a/research/chatwoot/app/javascript/v3/components/Form/Input.vue
+++ b/research/chatwoot/app/javascript/v3/components/Form/Input.vue
@@ -0,0 +1,104 @@
+<script setup>
+import { defineProps, defineModel, computed } from 'vue';
+import { useToggle } from '@vueuse/core';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import WithLabel from './WithLabel.vue';
+
+const props = defineProps({
+  label: {
+    type: String,
+    required: true,
+  },
+  type: {
+    type: String,
+    default: 'text',
+  },
+  icon: {
+    type: String,
+    default: '',
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  hasError: Boolean,
+  errorMessage: {
+    type: String,
+    default: '',
+  },
+  spacing: {
+    type: String,
+    default: 'base',
+    validator: value => ['base', 'compact'].includes(value),
+  },
+});
+
+const FIELDS = {
+  TEXT: 'text',
+  PASSWORD: 'password',
+};
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const model = defineModel({
+  type: [String, Number],
+  required: true,
+});
+
+const [isPasswordVisible, togglePasswordVisibility] = useToggle();
+
+const isPasswordField = computed(() => props.type === FIELDS.PASSWORD);
+
+const currentInputType = computed(() => {
+  if (isPasswordField.value) {
+    return isPasswordVisible.value ? FIELDS.TEXT : FIELDS.PASSWORD;
+  }
+  return props.type;
+});
+</script>
+
+<template>
+  <WithLabel
+    :label="label"
+    :icon="icon"
+    :name="name"
+    :has-error="hasError"
+    :error-message="errorMessage"
+  >
+    <template #rightOfLabel>
+      <slot />
+    </template>
+    <input
+      v-bind="$attrs"
+      v-model="model"
+      :name="name"
+      :type="currentInputType"
+      class="block w-full border-none rounded-md shadow-sm bg-n-alpha-black2 appearance-none outline outline-1 focus:outline focus:outline-1 text-n-slate-12 placeholder:text-n-slate-10 sm:text-sm sm:leading-6 px-3 py-3"
+      :class="{
+        'error outline-n-ruby-8 dark:outline-n-ruby-8 hover:outline-n-ruby-9 dark:hover:outline-n-ruby-9 disabled:outline-n-ruby-8 dark:disabled:outline-n-ruby-8':
+          hasError,
+        'outline-n-weak dark:outline-n-weak hover:outline-n-slate-6 dark:hover:outline-n-slate-6 focus:outline-n-brand dark:focus:outline-n-brand':
+          !hasError,
+        'px-3 py-3': spacing === 'base',
+        'px-3 py-2 mb-0': spacing === 'compact',
+        'pl-9': icon,
+        'pr-10': isPasswordField,
+      }"
+    />
+    <Button
+      v-if="isPasswordField"
+      type="button"
+      slate
+      sm
+      link
+      :icon="isPasswordVisible ? 'i-lucide-eye-off' : 'i-lucide-eye'"
+      class="absolute inset-y-0 right-0 pr-3"
+      :aria-label="isPasswordVisible ? 'Hide password' : 'Show password'"
+      :aria-pressed="isPasswordVisible"
+      @click="togglePasswordVisibility()"
+    />
+  </WithLabel>
+</template>