cynx-lib 1.3.83 → 1.3.85

package/vue/components/Input.vue

@@ -1,341 +1,341 @@
-<script setup lang="ts">
-import { ref, computed, useSlots } from "vue";
-
-const SIZES: Record<string, { height: number; fontSize: number; paddingH: number }> = {
-  xs: { height: 24, fontSize: 11, paddingH: 6 },
-  sm: { height: 28, fontSize: 11.5, paddingH: 8 },
-  md: { height: 32, fontSize: 13, paddingH: 11 },
-  lg: { height: 36, fontSize: 14, paddingH: 14 },
-};
-
-const props = withDefaults(
-  defineProps<{
-    modelValue?: string | number;
-    label?: string;
-    required?: boolean;
-    hint?: string;
-    error?: string;
-    size?: "xs" | "sm" | "md" | "lg";
-    type?: string;
-    icon?: any;
-    iconRight?: any;
-    clearable?: boolean;
-    suffix?: string;
-    multiline?: boolean;
-    disabled?: boolean;
-    placeholder?: string;
-    className?: string;
-    style?: Record<string, any>;
-  }>(),
-  {
-    modelValue: "",
-    required: false,
-    size: "md",
-    type: "text",
-    clearable: false,
-    multiline: false,
-    disabled: false,
-    placeholder: "",
-    className: "",
-    style: () => ({}),
-  }
-);
-
-const emit = defineEmits<{
-  (e: "update:modelValue", value: string): void;
-  (e: "clear"): void;
-  (e: "focus", event: FocusEvent): void;
-  (e: "blur", event: FocusEvent): void;
-}>();
-
-const slots = useSlots();
-const inputRef = ref<HTMLInputElement | HTMLTextAreaElement | null>(null);
-const focused = ref(false);
-const hovered = ref(false);
-const s = computed(() => SIZES[props.size] || SIZES.md);
-
-const isPasswd = computed(() => props.type === "passwd");
-const resolvedType = computed(() => (isPasswd.value ? "text" : props.type));
-const hasValue = computed(
-  () => props.modelValue !== undefined && props.modelValue !== null && props.modelValue !== ""
-);
-
-const passwdStyle = computed(() =>
-  isPasswd.value
-    ? {
-        WebkitTextSecurity: "disc",
-        textSecurity: "disc",
-        fontFamily: hasValue.value ? "monospace" : "var(--f, var(--sans, inherit))",
-        fontWeight: hasValue.value ? 700 : "normal",
-        letterSpacing: hasValue.value ? "0.15em" : "normal",
-      }
-    : {}
-);
-
-const hasIconLeft = computed(() => Boolean(props.icon) || Boolean(slots.icon));
-const hasIconRight = computed(() => Boolean(props.iconRight) || Boolean(slots.iconRight));
-const showClear = computed(
-  () => props.clearable && Boolean(props.modelValue) && !props.disabled && !props.multiline
-);
-const hasSuffix = computed(() => Boolean(props.suffix) && !props.multiline);
-const showRightSlot = computed(() => showClear.value || hasSuffix.value);
-
-const handleInput = (e: Event) => {
-  emit("update:modelValue", (e.target as HTMLInputElement).value);
-};
-
-const handleClear = () => {
-  emit("update:modelValue", "");
-  emit("clear");
-  inputRef.value?.focus();
-};
-</script>
-
-<template>
-  <div
-    class="cynx-input-wrapper"
-    style="display: flex; flex-direction: column; gap: 5px; width: 100%;"
-  >
-    <label
-      v-if="label"
-      :style="{
-        fontSize: size === 'xs' ? '9px' : '11px',
-        fontWeight: 600,
-        color: 'var(--t2, #797b8d)',
-        textTransform: 'uppercase',
-        letterSpacing: '.08em',
-        userSelect: 'none',
-      }"
-    >
-      {{ label }}
-      <span v-if="required" style="color: var(--danger, #f64747); margin-left: 2px;">*</span>
-    </label>
-
-    <div style="position: relative; display: flex; align-items: center; width: 100%;">
-      <!-- Left Icon / Text Prefix -->
-      <span
-        v-if="hasIconLeft"
-        style="
-          position: absolute;
-          left: 10px;
-          top: 50%;
-          transform: translateY(-50%);
-          color: var(--t3, #9b9daa);
-          pointer-events: none;
-          line-height: 0;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          z-index: 2;
-        "
-      >
-        <slot name="icon">
-          <span
-            v-if="typeof icon === 'string'"
-            style="font-size: 11px; font-weight: 600; color: var(--t3, #9b9daa); user-select: none;"
-          >
-            {{ icon }}
-          </span>
-          <component
-            :is="icon"
-            v-else
-            style="width: 15px; height: 15px; color: var(--t3, #9b9daa);"
-          />
-        </slot>
-      </span>
-
-      <!-- Right Icon Slot -->
-      <span
-        v-if="hasIconRight"
-        style="
-          position: absolute;
-          right: 10px;
-          top: 50%;
-          transform: translateY(-50%);
-          color: var(--t3, #9b9daa);
-          pointer-events: none;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          z-index: 2;
-        "
-      >
-        <slot name="iconRight">
-          <component :is="iconRight" style="width: 15px; height: 15px; color: var(--t3, #9b9daa);" />
-        </slot>
-      </span>
-
-      <!-- Textarea Multiline -->
-      <textarea
-        v-if="multiline"
-        ref="inputRef"
-        :value="modelValue"
-        :placeholder="placeholder"
-        :disabled="disabled"
-        :class="['cynx-input-control', className]"
-        :style="{
-          display: 'block',
-          width: '100%',
-          minHeight: '70px',
-          resize: 'vertical',
-          whiteSpace: 'pre-wrap',
-          overflowWrap: 'break-word',
-          background: disabled ? 'var(--grey-1, #f5f5f8)' : 'var(--input-bg, #fff)',
-          border: `1px solid ${error ? 'var(--danger, #f64747)' : focused ? 'var(--accent, #12675D)' : hovered ? 'var(--accent, #12675D)' : 'var(--bd, #d7d8e0)'}`,
-          borderRadius: 'var(--rads, 8px)',
-          color: 'var(--t1, #1a1a2e)',
-          fontFamily: 'var(--f, var(--sans, inherit))',
-          fontSize: `${s.fontSize}px`,
-          paddingTop: '8px',
-          paddingBottom: '8px',
-          paddingLeft: hasIconLeft ? '34px' : '12px',
-          paddingRight: (hasIconRight || showRightSlot) ? '34px' : '12px',
-          outline: 'none',
-          transition: 'border-color .14s, box-shadow .14s',
-          boxShadow: error
-            ? 'var(--dd, rgba(246,71,71,.12)), var(--shadow, 0 1px 3px rgba(20,22,41,.1))'
-            : focused
-            ? 'var(--pd, rgba(18,103,93,.12)), var(--shadow, 0 1px 3px rgba(20,22,41,.1))'
-            : 'var(--shadow, 0 1px 3px rgba(20,22,41,.1))',
-          opacity: disabled ? 0.5 : 1,
-          cursor: disabled ? 'not-allowed' : undefined,
-          ...style,
-        }"
-        @input="handleInput"
-        @focus="focused = true; emit('focus', $event)"
-        @blur="focused = false; hovered = false; emit('blur', $event)"
-      />
-
-      <!-- Standard Input Control -->
-      <input
-        v-else
-        ref="inputRef"
-        :type="resolvedType"
-        :value="modelValue"
-        :placeholder="placeholder"
-        :disabled="disabled"
-        :class="['cynx-input-control', className]"
-        :style="{
-          display: 'block',
-          width: '100%',
-          background: disabled ? 'var(--grey-1, #f5f5f8)' : 'var(--input-bg, #fff)',
-          border: `1px solid ${error ? 'var(--danger, #f64747)' : focused ? 'var(--accent, #12675D)' : hovered ? 'var(--accent, #12675D)' : 'var(--bd, #d7d8e0)'}`,
-          borderRadius: 'var(--rads, 8px)',
-          color: 'var(--t1, #1a1a2e)',
-          fontFamily: 'var(--f, var(--sans, inherit))',
-          fontSize: `${s.fontSize}px`,
-          height: `${s.height}px`,
-          padding: `0 ${s.paddingH}px`,
-          paddingLeft: hasIconLeft ? '34px' : `${s.paddingH}px`,
-          paddingRight: (hasIconRight || showRightSlot) ? '34px' : `${s.paddingH}px`,
-          outline: 'none',
-          transition: 'border-color .14s, box-shadow .14s',
-          boxShadow: error
-            ? 'var(--dd, rgba(246,71,71,.12)), var(--shadow, 0 1px 3px rgba(20,22,41,.1))'
-            : focused
-            ? 'var(--pd, rgba(18,103,93,.12)), var(--shadow, 0 1px 3px rgba(20,22,41,.1))'
-            : 'var(--shadow, 0 1px 3px rgba(20,22,41,.1))',
-          opacity: disabled ? 0.5 : 1,
-          cursor: disabled ? 'not-allowed' : undefined,
-          ...passwdStyle,
-          ...style,
-        }"
-        @input="handleInput"
-        @focus="focused = true; emit('focus', $event)"
-        @blur="focused = false; hovered = false; emit('blur', $event)"
-      />
-
-      <!-- Clear Button (1-to-1 matching Input.jsx) -->
-      <button
-        v-if="showClear"
-        type="button"
-        tabindex="-1"
-        style="
-          position: absolute;
-          right: 8px;
-          top: 50%;
-          transform: translateY(-50%);
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          width: 18px;
-          height: 18px;
-          border-radius: 50%;
-          background: transparent;
-          border: none;
-          cursor: pointer;
-          color: var(--t3, #9b9daa);
-          padding: 0;
-          line-height: 0;
-          z-index: 2;
-        "
-        title="Clear"
-        @click="handleClear"
-      >
-        <svg
-          width="10"
-          height="10"
-          viewBox="0 0 10 10"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="1.8"
-          stroke-linecap="round"
-        >
-          <line x1="1" y1="1" x2="9" y2="9" />
-          <line x1="9" y1="1" x2="1" y2="9" />
-        </svg>
-      </button>
-
-      <!-- Suffix Text / Element -->
-      <span
-        v-if="hasSuffix && !showClear"
-        style="
-          position: absolute;
-          right: 8px;
-          top: 50%;
-          transform: translateY(-50%);
-          display: flex;
-          align-items: center;
-          gap: 4px;
-          pointer-events: none;
-          z-index: 2;
-        "
-      >
-        {{ suffix }}
-      </span>
-    </div>
-
-    <!-- Hint / Error Messages -->
-    <span
-      v-if="hint && !error"
-      style="font-size: 11px; color: var(--t3, #9b9daa);"
-    >
-      {{ hint }}
-    </span>
-    <span
-      v-if="error"
-      style="font-size: 11px; color: var(--danger, #f64747);"
-    >
-      {{ error }}
-    </span>
-  </div>
-</template>
-
-<style scoped>
-.cynx-input-control::placeholder {
-  color: var(--t3, #9b9daa);
-  opacity: 1;
-}
-
-:root.dark .cynx-input-control,
-:root.dark2 .cynx-input-control {
-  --input-bg: #141629;
-  --t1: #ffffff;
-  --bd: #334155;
-}
-
-:root.dark .cynx-input-control::placeholder,
-:root.dark2 .cynx-input-control::placeholder {
-  color: #64748b;
-}
-</style>
+<script setup lang="ts">
+import { ref, computed, useSlots } from "vue";
+
+const SIZES: Record<string, { height: number; fontSize: number; paddingH: number }> = {
+  xs: { height: 24, fontSize: 11, paddingH: 6 },
+  sm: { height: 28, fontSize: 11.5, paddingH: 8 },
+  md: { height: 32, fontSize: 13, paddingH: 11 },
+  lg: { height: 36, fontSize: 14, paddingH: 14 },
+};
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string | number;
+    label?: string;
+    required?: boolean;
+    hint?: string;
+    error?: string;
+    size?: "xs" | "sm" | "md" | "lg";
+    type?: string;
+    icon?: any;
+    iconRight?: any;
+    clearable?: boolean;
+    suffix?: string;
+    multiline?: boolean;
+    disabled?: boolean;
+    placeholder?: string;
+    className?: string;
+    style?: Record<string, any>;
+  }>(),
+  {
+    modelValue: "",
+    required: false,
+    size: "md",
+    type: "text",
+    clearable: false,
+    multiline: false,
+    disabled: false,
+    placeholder: "",
+    className: "",
+    style: () => ({}),
+  }
+);
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: string): void;
+  (e: "clear"): void;
+  (e: "focus", event: FocusEvent): void;
+  (e: "blur", event: FocusEvent): void;
+}>();
+
+const slots = useSlots();
+const inputRef = ref<HTMLInputElement | HTMLTextAreaElement | null>(null);
+const focused = ref(false);
+const hovered = ref(false);
+const s = computed(() => SIZES[props.size] || SIZES.md);
+
+const isPasswd = computed(() => props.type === "passwd");
+const resolvedType = computed(() => (isPasswd.value ? "text" : props.type));
+const hasValue = computed(
+  () => props.modelValue !== undefined && props.modelValue !== null && props.modelValue !== ""
+);
+
+const passwdStyle = computed(() =>
+  isPasswd.value
+    ? {
+        WebkitTextSecurity: "disc",
+        textSecurity: "disc",
+        fontFamily: hasValue.value ? "monospace" : "var(--f, var(--sans, inherit))",
+        fontWeight: hasValue.value ? 700 : "normal",
+        letterSpacing: hasValue.value ? "0.15em" : "normal",
+      }
+    : {}
+);
+
+const hasIconLeft = computed(() => Boolean(props.icon) || Boolean(slots.icon));
+const hasIconRight = computed(() => Boolean(props.iconRight) || Boolean(slots.iconRight));
+const showClear = computed(
+  () => props.clearable && Boolean(props.modelValue) && !props.disabled && !props.multiline
+);
+const hasSuffix = computed(() => Boolean(props.suffix) && !props.multiline);
+const showRightSlot = computed(() => showClear.value || hasSuffix.value);
+
+const handleInput = (e: Event) => {
+  emit("update:modelValue", (e.target as HTMLInputElement).value);
+};
+
+const handleClear = () => {
+  emit("update:modelValue", "");
+  emit("clear");
+  inputRef.value?.focus();
+};
+</script>
+
+<template>
+  <div
+    class="cynx-input-wrapper"
+    style="display: flex; flex-direction: column; gap: 5px; width: 100%;"
+  >
+    <label
+      v-if="label"
+      :style="{
+        fontSize: size === 'xs' ? '9px' : '11px',
+        fontWeight: 600,
+        color: 'var(--t2, #797b8d)',
+        textTransform: 'uppercase',
+        letterSpacing: '.08em',
+        userSelect: 'none',
+      }"
+    >
+      {{ label }}
+      <span v-if="required" style="color: var(--danger, #f64747); margin-left: 2px;">*</span>
+    </label>
+
+    <div style="position: relative; display: flex; align-items: center; width: 100%;">
+      <!-- Left Icon / Text Prefix -->
+      <span
+        v-if="hasIconLeft"
+        style="
+          position: absolute;
+          left: 10px;
+          top: 50%;
+          transform: translateY(-50%);
+          color: var(--t3, #9b9daa);
+          pointer-events: none;
+          line-height: 0;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          z-index: 2;
+        "
+      >
+        <slot name="icon">
+          <span
+            v-if="typeof icon === 'string'"
+            style="font-size: 11px; font-weight: 600; color: var(--t3, #9b9daa); user-select: none;"
+          >
+            {{ icon }}
+          </span>
+          <component
+            :is="icon"
+            v-else
+            style="width: 15px; height: 15px; color: var(--t3, #9b9daa);"
+          />
+        </slot>
+      </span>
+
+      <!-- Right Icon Slot -->
+      <span
+        v-if="hasIconRight"
+        style="
+          position: absolute;
+          right: 10px;
+          top: 50%;
+          transform: translateY(-50%);
+          color: var(--t3, #9b9daa);
+          pointer-events: none;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          z-index: 2;
+        "
+      >
+        <slot name="iconRight">
+          <component :is="iconRight" style="width: 15px; height: 15px; color: var(--t3, #9b9daa);" />
+        </slot>
+      </span>
+
+      <!-- Textarea Multiline -->
+      <textarea
+        v-if="multiline"
+        ref="inputRef"
+        :value="modelValue"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :class="['cynx-input-control', className]"
+        :style="{
+          display: 'block',
+          width: '100%',
+          minHeight: '70px',
+          resize: 'vertical',
+          whiteSpace: 'pre-wrap',
+          overflowWrap: 'break-word',
+          background: disabled ? 'var(--grey-1, #f5f5f8)' : 'var(--input-bg, #fff)',
+          border: `1px solid ${error ? 'var(--danger, #f64747)' : focused ? 'var(--accent, #12675D)' : hovered ? 'var(--accent, #12675D)' : 'var(--bd, #d7d8e0)'}`,
+          borderRadius: 'var(--rads, 8px)',
+          color: 'var(--t1, #1a1a2e)',
+          fontFamily: 'var(--f, var(--sans, inherit))',
+          fontSize: `${s.fontSize}px`,
+          paddingTop: '8px',
+          paddingBottom: '8px',
+          paddingLeft: hasIconLeft ? '34px' : '12px',
+          paddingRight: (hasIconRight || showRightSlot) ? '34px' : '12px',
+          outline: 'none',
+          transition: 'border-color .14s, box-shadow .14s',
+          boxShadow: error
+            ? 'var(--dd, rgba(246,71,71,.12)), var(--shadow, 0 1px 3px rgba(20,22,41,.1))'
+            : focused
+            ? 'var(--pd, rgba(18,103,93,.12)), var(--shadow, 0 1px 3px rgba(20,22,41,.1))'
+            : 'var(--shadow, 0 1px 3px rgba(20,22,41,.1))',
+          opacity: disabled ? 0.5 : 1,
+          cursor: disabled ? 'not-allowed' : undefined,
+          ...style,
+        }"
+        @input="handleInput"
+        @focus="focused = true; emit('focus', $event)"
+        @blur="focused = false; hovered = false; emit('blur', $event)"
+      />
+
+      <!-- Standard Input Control -->
+      <input
+        v-else
+        ref="inputRef"
+        :type="resolvedType"
+        :value="modelValue"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :class="['cynx-input-control', className]"
+        :style="{
+          display: 'block',
+          width: '100%',
+          background: disabled ? 'var(--grey-1, #f5f5f8)' : 'var(--input-bg, #fff)',
+          border: `1px solid ${error ? 'var(--danger, #f64747)' : focused ? 'var(--accent, #12675D)' : hovered ? 'var(--accent, #12675D)' : 'var(--bd, #d7d8e0)'}`,
+          borderRadius: 'var(--rads, 8px)',
+          color: 'var(--t1, #1a1a2e)',
+          fontFamily: 'var(--f, var(--sans, inherit))',
+          fontSize: `${s.fontSize}px`,
+          height: `${s.height}px`,
+          padding: `0 ${s.paddingH}px`,
+          paddingLeft: hasIconLeft ? '34px' : `${s.paddingH}px`,
+          paddingRight: (hasIconRight || showRightSlot) ? '34px' : `${s.paddingH}px`,
+          outline: 'none',
+          transition: 'border-color .14s, box-shadow .14s',
+          boxShadow: error
+            ? 'var(--dd, rgba(246,71,71,.12)), var(--shadow, 0 1px 3px rgba(20,22,41,.1))'
+            : focused
+            ? 'var(--pd, rgba(18,103,93,.12)), var(--shadow, 0 1px 3px rgba(20,22,41,.1))'
+            : 'var(--shadow, 0 1px 3px rgba(20,22,41,.1))',
+          opacity: disabled ? 0.5 : 1,
+          cursor: disabled ? 'not-allowed' : undefined,
+          ...passwdStyle,
+          ...style,
+        }"
+        @input="handleInput"
+        @focus="focused = true; emit('focus', $event)"
+        @blur="focused = false; hovered = false; emit('blur', $event)"
+      />
+
+      <!-- Clear Button (1-to-1 matching Input.jsx) -->
+      <button
+        v-if="showClear"
+        type="button"
+        tabindex="-1"
+        style="
+          position: absolute;
+          right: 8px;
+          top: 50%;
+          transform: translateY(-50%);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 18px;
+          height: 18px;
+          border-radius: 50%;
+          background: transparent;
+          border: none;
+          cursor: pointer;
+          color: var(--t3, #9b9daa);
+          padding: 0;
+          line-height: 0;
+          z-index: 2;
+        "
+        title="Clear"
+        @click="handleClear"
+      >
+        <svg
+          width="10"
+          height="10"
+          viewBox="0 0 10 10"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.8"
+          stroke-linecap="round"
+        >
+          <line x1="1" y1="1" x2="9" y2="9" />
+          <line x1="9" y1="1" x2="1" y2="9" />
+        </svg>
+      </button>
+
+      <!-- Suffix Text / Element -->
+      <span
+        v-if="hasSuffix && !showClear"
+        style="
+          position: absolute;
+          right: 8px;
+          top: 50%;
+          transform: translateY(-50%);
+          display: flex;
+          align-items: center;
+          gap: 4px;
+          pointer-events: none;
+          z-index: 2;
+        "
+      >
+        {{ suffix }}
+      </span>
+    </div>
+
+    <!-- Hint / Error Messages -->
+    <span
+      v-if="hint && !error"
+      style="font-size: 11px; color: var(--t3, #9b9daa);"
+    >
+      {{ hint }}
+    </span>
+    <span
+      v-if="error"
+      style="font-size: 11px; color: var(--danger, #f64747);"
+    >
+      {{ error }}
+    </span>
+  </div>
+</template>
+
+<style scoped>
+.cynx-input-control::placeholder {
+  color: var(--t3, #9b9daa);
+  opacity: 1;
+}
+
+:root.dark .cynx-input-control,
+:root.dark2 .cynx-input-control {
+  --input-bg: #141629;
+  --t1: #ffffff;
+  --bd: #334155;
+}
+
+:root.dark .cynx-input-control::placeholder,
+:root.dark2 .cynx-input-control::placeholder {
+  color: #64748b;
+}
+</style>