cynx-lib 1.3.80 → 1.3.82

package/vue/components/Checkbox.vue

@@ -1,103 +1,103 @@
-<script setup lang="ts">
-import { computed } from "vue";
-
-const props = withDefaults(
-  defineProps<{
-    modelValue?: boolean;
-    checked?: boolean;
-    indeterminate?: boolean;
-    disabled?: boolean;
-    size?: "sm" | "md";
-    label?: string;
-  }>(),
-  {
-    modelValue: false,
-    checked: false,
-    indeterminate: false,
-    disabled: false,
-    size: "md",
-    label: "",
-  }
-);
-
-const emit = defineEmits<{
-  (e: "update:modelValue", value: boolean): void;
-  (e: "change", value: boolean): void;
-}>();
-
-const isChecked = computed(() => props.modelValue || props.checked);
-const dims = computed(() =>
-  props.size === "sm" ? { w: 14, h: 14, icon: 8 } : { w: 16, h: 16, icon: 10 }
-);
-
-const toggle = () => {
-  if (props.disabled) return;
-  const next = !isChecked.value;
-  emit("update:modelValue", next);
-  emit("change", next);
-};
-</script>
-
-<template>
-  <label
-    class="inline-flex items-center gap-1.5 cursor-pointer select-none m-0 p-0 leading-none transition"
-    :style="{
-      opacity: disabled ? 0.45 : 1,
-      cursor: disabled ? 'not-allowed' : 'pointer',
-      verticalAlign: 'middle',
-      boxSizing: 'border-box',
-    }"
-    @click.prevent="toggle"
-  >
-    <span
-      class="relative flex-shrink-0 transition-all duration-150 flex items-center justify-center overflow-hidden"
-      :style="{
-        width: `${dims.w}px`,
-        height: `${dims.h}px`,
-        boxSizing: 'border-box',
-        verticalAlign: 'middle',
-        border: `1.5px solid ${isChecked || indeterminate ? 'var(--accent, #12675D)' : 'var(--border, #e2e8f0)'}`,
-        borderRadius: size === 'sm' ? '3px' : '4px',
-        background: isChecked || indeterminate ? 'var(--accent, #12675D)' : 'var(--input-bg, #ffffff)',
-      }"
-    >
-      <!-- Indeterminate dash -->
-      <svg
-        v-if="indeterminate"
-        :width="dims.icon"
-        :height="dims.icon"
-        viewBox="0 0 10 10"
-        fill="none"
-        style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; pointer-events: none;"
-      >
-        <line x1="2" y1="5" x2="8" y2="5" stroke="white" stroke-width="1.6" stroke-linecap="round" />
-      </svg>
-
-      <!-- Checked checkmark -->
-      <svg
-        v-else-if="isChecked"
-        :width="dims.icon"
-        :height="dims.icon"
-        viewBox="0 0 10 10"
-        fill="none"
-        style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; pointer-events: none;"
-      >
-        <polyline
-          points="1.5,5 4,7.5 8.5,2.5"
-          stroke="white"
-          stroke-width="1.6"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-      </svg>
-    </span>
-
-    <span
-      v-if="label || $slots.default"
-      :style="{ fontSize: size === 'sm' ? '.72rem' : '.78rem', lineHeight: '1.2' }"
-      class="text-[var(--primary-text,#0f172a)] font-semibold select-none"
-    >
-      <slot>{{ label }}</slot>
-    </span>
-  </label>
-</template>
+<script setup lang="ts">
+import { computed } from "vue";
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: boolean;
+    checked?: boolean;
+    indeterminate?: boolean;
+    disabled?: boolean;
+    size?: "sm" | "md";
+    label?: string;
+  }>(),
+  {
+    modelValue: false,
+    checked: false,
+    indeterminate: false,
+    disabled: false,
+    size: "md",
+    label: "",
+  }
+);
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: boolean): void;
+  (e: "change", value: boolean): void;
+}>();
+
+const isChecked = computed(() => props.modelValue || props.checked);
+const dims = computed(() =>
+  props.size === "sm" ? { w: 14, h: 14, icon: 8 } : { w: 16, h: 16, icon: 10 }
+);
+
+const toggle = () => {
+  if (props.disabled) return;
+  const next = !isChecked.value;
+  emit("update:modelValue", next);
+  emit("change", next);
+};
+</script>
+
+<template>
+  <label
+    class="inline-flex items-center gap-1.5 cursor-pointer select-none m-0 p-0 leading-none transition"
+    :style="{
+      opacity: disabled ? 0.45 : 1,
+      cursor: disabled ? 'not-allowed' : 'pointer',
+      verticalAlign: 'middle',
+      boxSizing: 'border-box',
+    }"
+    @click.prevent="toggle"
+  >
+    <span
+      class="relative flex-shrink-0 transition-all duration-150 flex items-center justify-center overflow-hidden"
+      :style="{
+        width: `${dims.w}px`,
+        height: `${dims.h}px`,
+        boxSizing: 'border-box',
+        verticalAlign: 'middle',
+        border: `1.5px solid ${isChecked || indeterminate ? 'var(--accent, #12675D)' : 'var(--border, #e2e8f0)'}`,
+        borderRadius: size === 'sm' ? '3px' : '4px',
+        background: isChecked || indeterminate ? 'var(--accent, #12675D)' : 'var(--input-bg, #ffffff)',
+      }"
+    >
+      <!-- Indeterminate dash -->
+      <svg
+        v-if="indeterminate"
+        :width="dims.icon"
+        :height="dims.icon"
+        viewBox="0 0 10 10"
+        fill="none"
+        style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; pointer-events: none;"
+      >
+        <line x1="2" y1="5" x2="8" y2="5" stroke="white" stroke-width="1.6" stroke-linecap="round" />
+      </svg>
+
+      <!-- Checked checkmark -->
+      <svg
+        v-else-if="isChecked"
+        :width="dims.icon"
+        :height="dims.icon"
+        viewBox="0 0 10 10"
+        fill="none"
+        style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; pointer-events: none;"
+      >
+        <polyline
+          points="1.5,5 4,7.5 8.5,2.5"
+          stroke="white"
+          stroke-width="1.6"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    </span>
+
+    <span
+      v-if="label || $slots.default"
+      :style="{ fontSize: size === 'sm' ? '.72rem' : '.78rem', lineHeight: '1.2' }"
+      class="text-[var(--primary-text,#0f172a)] font-semibold select-none"
+    >
+      <slot>{{ label }}</slot>
+    </span>
+  </label>
+</template>