cynx-lib 1.3.83 → 1.3.85

package/vue/components/Toggle.vue

@@ -1,115 +1,115 @@
-<script setup lang="ts">
-import { computed } from "vue";
-
-const SIZES: Record<string, { w: number; h: number; r: number; dot: number; off: number; on: number }> = {
-  sm: { w: 28, h: 16, r: 8, dot: 12, off: 2, on: 14 },
-  md: { w: 34, h: 18, r: 9, dot: 14, off: 2, on: 18 },
-  lg: { w: 44, h: 24, r: 12, dot: 18, off: 3, on: 23 },
-};
-
-const COLORS: Record<string, string> = {
-  primary: "var(--accent, #12675D)",
-  success: "var(--success, var(--s, #27ae60))",
-  warning: "var(--warning, var(--w, #f59e0b))",
-  danger: "var(--danger, var(--d, #f64747))",
-};
-
-const OFF_COLOR = "var(--border, var(--bd, #d7d8e0))";
-
-const props = withDefaults(
-  defineProps<{
-    modelValue?: boolean;
-    checked?: boolean;
-    disabled?: boolean;
-    size?: "sm" | "md" | "lg";
-    color?: "primary" | "success" | "warning" | "danger";
-    label?: string;
-    labelStyle?: Record<string, any>;
-    className?: string;
-    style?: Record<string, any>;
-  }>(),
-  {
-    modelValue: false,
-    checked: false,
-    disabled: false,
-    size: "md",
-    color: "primary",
-    label: "",
-    labelStyle: () => ({}),
-    className: "",
-    style: () => ({}),
-  }
-);
-
-const emit = defineEmits<{
-  (e: "update:modelValue", value: boolean): void;
-  (e: "change", value: boolean): void;
-}>();
-
-const isChecked = computed(() => (props.modelValue !== undefined ? props.modelValue : props.checked));
-const s = computed(() => SIZES[props.size] || SIZES.md);
-const trackBg = computed(() => (isChecked.value ? (COLORS[props.color] || COLORS.primary) : OFF_COLOR));
-
-const toggle = () => {
-  if (props.disabled) return;
-  const next = !isChecked.value;
-  emit("update:modelValue", next);
-  emit("change", next);
-};
-</script>
-
-<template>
-  <label
-    :class="['cynx-toggle-label', className]"
-    :style="{
-      display: 'inline-flex',
-      alignItems: 'center',
-      gap: '8px',
-      cursor: disabled ? 'not-allowed' : 'pointer',
-      userSelect: 'none',
-      opacity: disabled ? 0.4 : 1,
-      ...style,
-    }"
-    @click.prevent="toggle"
-  >
-    <input
-      type="checkbox"
-      :checked="isChecked"
-      :disabled="disabled"
-      style="position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;"
-    />
-    <span
-      class="cynx-toggle-track"
-      :style="{
-        position: 'relative',
-        width: `${s.w}px`,
-        height: `${s.h}px`,
-        borderRadius: `${s.r}px`,
-        background: trackBg,
-        flexShrink: 0,
-        transition: 'background .25s ease',
-        boxShadow: 'var(--shadow-sm, 0 1px 3px rgba(20,22,41,.1))',
-      }"
-    >
-      <span
-        class="cynx-toggle-dot"
-        :style="{
-          position: 'absolute',
-          top: '50%',
-          transform: 'translateY(-50%)',
-          left: `${isChecked ? s.on : s.off}px`,
-          width: `${s.dot}px`,
-          height: `${s.dot}px`,
-          background: 'var(--surface, #ffffff)',
-          borderRadius: '50%',
-          boxShadow: '0 1px 3px rgba(0,0,0,.25)',
-          transition: 'left .3s cubic-bezier(.34,1.56,.64,1), transform .2s ease',
-          willChange: 'left',
-        }"
-      />
-    </span>
-    <span v-if="label || $slots.default" :style="labelStyle" class="cynx-toggle-text">
-      <slot>{{ label }}</slot>
-    </span>
-  </label>
-</template>
+<script setup lang="ts">
+import { computed } from "vue";
+
+const SIZES: Record<string, { w: number; h: number; r: number; dot: number; off: number; on: number }> = {
+  sm: { w: 28, h: 16, r: 8, dot: 12, off: 2, on: 14 },
+  md: { w: 34, h: 18, r: 9, dot: 14, off: 2, on: 18 },
+  lg: { w: 44, h: 24, r: 12, dot: 18, off: 3, on: 23 },
+};
+
+const COLORS: Record<string, string> = {
+  primary: "var(--accent, #12675D)",
+  success: "var(--success, var(--s, #27ae60))",
+  warning: "var(--warning, var(--w, #f59e0b))",
+  danger: "var(--danger, var(--d, #f64747))",
+};
+
+const OFF_COLOR = "var(--border, var(--bd, #d7d8e0))";
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: boolean;
+    checked?: boolean;
+    disabled?: boolean;
+    size?: "sm" | "md" | "lg";
+    color?: "primary" | "success" | "warning" | "danger";
+    label?: string;
+    labelStyle?: Record<string, any>;
+    className?: string;
+    style?: Record<string, any>;
+  }>(),
+  {
+    modelValue: false,
+    checked: false,
+    disabled: false,
+    size: "md",
+    color: "primary",
+    label: "",
+    labelStyle: () => ({}),
+    className: "",
+    style: () => ({}),
+  }
+);
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: boolean): void;
+  (e: "change", value: boolean): void;
+}>();
+
+const isChecked = computed(() => (props.modelValue !== undefined ? props.modelValue : props.checked));
+const s = computed(() => SIZES[props.size] || SIZES.md);
+const trackBg = computed(() => (isChecked.value ? (COLORS[props.color] || COLORS.primary) : OFF_COLOR));
+
+const toggle = () => {
+  if (props.disabled) return;
+  const next = !isChecked.value;
+  emit("update:modelValue", next);
+  emit("change", next);
+};
+</script>
+
+<template>
+  <label
+    :class="['cynx-toggle-label', className]"
+    :style="{
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: '8px',
+      cursor: disabled ? 'not-allowed' : 'pointer',
+      userSelect: 'none',
+      opacity: disabled ? 0.4 : 1,
+      ...style,
+    }"
+    @click.prevent="toggle"
+  >
+    <input
+      type="checkbox"
+      :checked="isChecked"
+      :disabled="disabled"
+      style="position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;"
+    />
+    <span
+      class="cynx-toggle-track"
+      :style="{
+        position: 'relative',
+        width: `${s.w}px`,
+        height: `${s.h}px`,
+        borderRadius: `${s.r}px`,
+        background: trackBg,
+        flexShrink: 0,
+        transition: 'background .25s ease',
+        boxShadow: 'var(--shadow-sm, 0 1px 3px rgba(20,22,41,.1))',
+      }"
+    >
+      <span
+        class="cynx-toggle-dot"
+        :style="{
+          position: 'absolute',
+          top: '50%',
+          transform: 'translateY(-50%)',
+          left: `${isChecked ? s.on : s.off}px`,
+          width: `${s.dot}px`,
+          height: `${s.dot}px`,
+          background: 'var(--surface, #ffffff)',
+          borderRadius: '50%',
+          boxShadow: '0 1px 3px rgba(0,0,0,.25)',
+          transition: 'left .3s cubic-bezier(.34,1.56,.64,1), transform .2s ease',
+          willChange: 'left',
+        }"
+      />
+    </span>
+    <span v-if="label || $slots.default" :style="labelStyle" class="cynx-toggle-text">
+      <slot>{{ label }}</slot>
+    </span>
+  </label>
+</template>

package/vue/components/XTable.vue

@@ -1,119 +1,119 @@
-<script lang="ts">
-import { defineComponent, h } from "vue";
-
-export const XTable = defineComponent({
-  name: "XTable",
-  props: {
-    style: { type: Object, default: () => ({}) },
-  },
-  setup(props, { slots }) {
-    return () =>
-      h(
-        "table",
-        {
-          style: {
-            width: "100%",
-            borderCollapse: "collapse",
-            tableLayout: "fixed",
-            fontSize: ".8rem",
-            ...props.style,
-          },
-        },
-        slots.default?.()
-      );
-  },
-});
-
-export const XThead = defineComponent({
-  name: "XThead",
-  setup(_, { slots }) {
-    return () => h("thead", null, slots.default?.());
-  },
-});
-
-export const XTbody = defineComponent({
-  name: "XTbody",
-  setup(_, { slots }) {
-    return () => h("tbody", null, slots.default?.());
-  },
-});
-
-export const XTr = defineComponent({
-  name: "XTr",
-  props: {
-    style: { type: Object, default: () => ({}) },
-    onClick: { type: Function, default: undefined },
-  },
-  setup(props, { slots }) {
-    return () =>
-      h(
-        "tr",
-        {
-          onClick: props.onClick,
-          style: {
-            borderBottom: "1px solid var(--border-light, #ebebf0)",
-            transition: "background .12s",
-            cursor: props.onClick ? "pointer" : undefined,
-            ...props.style,
-          },
-        },
-        slots.default?.()
-      );
-  },
-});
-
-export const XTh = defineComponent({
-  name: "XTh",
-  props: {
-    style: { type: Object, default: () => ({}) },
-  },
-  setup(props, { slots }) {
-    return () =>
-      h(
-        "th",
-        {
-          style: {
-            textAlign: "left",
-            padding: "8px 12px",
-            fontSize: ".68rem",
-            fontWeight: 600,
-            textTransform: "uppercase",
-            letterSpacing: ".06em",
-            color: "var(--muted, #9b9daa)",
-            borderBottom: "1px solid var(--border-light, #ebebf0)",
-            ...props.style,
-          },
-        },
-        slots.default?.()
-      );
-  },
-});
-
-export const XTd = defineComponent({
-  name: "XTd",
-  props: {
-    style: { type: Object, default: () => ({}) },
-    colSpan: { type: Number, default: undefined },
-    className: { type: String, default: "" },
-  },
-  setup(props, { slots }) {
-    return () =>
-      h(
-        "td",
-        {
-          colSpan: props.colSpan,
-          class: props.className,
-          style: {
-            padding: "9px 12px",
-            verticalAlign: "middle",
-            color: "var(--primary-text, #0f111c)",
-            ...props.style,
-          },
-        },
-        slots.default?.()
-      );
-  },
-});
-
-export default XTable;
-</script>
+<script lang="ts">
+import { defineComponent, h } from "vue";
+
+export const XTable = defineComponent({
+  name: "XTable",
+  props: {
+    style: { type: Object, default: () => ({}) },
+  },
+  setup(props, { slots }) {
+    return () =>
+      h(
+        "table",
+        {
+          style: {
+            width: "100%",
+            borderCollapse: "collapse",
+            tableLayout: "fixed",
+            fontSize: ".8rem",
+            ...props.style,
+          },
+        },
+        slots.default?.()
+      );
+  },
+});
+
+export const XThead = defineComponent({
+  name: "XThead",
+  setup(_, { slots }) {
+    return () => h("thead", null, slots.default?.());
+  },
+});
+
+export const XTbody = defineComponent({
+  name: "XTbody",
+  setup(_, { slots }) {
+    return () => h("tbody", null, slots.default?.());
+  },
+});
+
+export const XTr = defineComponent({
+  name: "XTr",
+  props: {
+    style: { type: Object, default: () => ({}) },
+    onClick: { type: Function, default: undefined },
+  },
+  setup(props, { slots }) {
+    return () =>
+      h(
+        "tr",
+        {
+          onClick: props.onClick,
+          style: {
+            borderBottom: "1px solid var(--border-light, #ebebf0)",
+            transition: "background .12s",
+            cursor: props.onClick ? "pointer" : undefined,
+            ...props.style,
+          },
+        },
+        slots.default?.()
+      );
+  },
+});
+
+export const XTh = defineComponent({
+  name: "XTh",
+  props: {
+    style: { type: Object, default: () => ({}) },
+  },
+  setup(props, { slots }) {
+    return () =>
+      h(
+        "th",
+        {
+          style: {
+            textAlign: "left",
+            padding: "8px 12px",
+            fontSize: ".68rem",
+            fontWeight: 600,
+            textTransform: "uppercase",
+            letterSpacing: ".06em",
+            color: "var(--muted, #9b9daa)",
+            borderBottom: "1px solid var(--border-light, #ebebf0)",
+            ...props.style,
+          },
+        },
+        slots.default?.()
+      );
+  },
+});
+
+export const XTd = defineComponent({
+  name: "XTd",
+  props: {
+    style: { type: Object, default: () => ({}) },
+    colSpan: { type: Number, default: undefined },
+    className: { type: String, default: "" },
+  },
+  setup(props, { slots }) {
+    return () =>
+      h(
+        "td",
+        {
+          colSpan: props.colSpan,
+          class: props.className,
+          style: {
+            padding: "9px 12px",
+            verticalAlign: "middle",
+            color: "var(--primary-text, #0f111c)",
+            ...props.style,
+          },
+        },
+        slots.default?.()
+      );
+  },
+});
+
+export default XTable;
+</script>

package/vue/composables/useAutoSkeletonRows.ts

@@ -1,71 +1,71 @@
-import { ref, onMounted, onUnmounted, nextTick, type Ref } from "vue";
-
-export interface UseAutoSkeletonRowsOptions {
-  rowHeight?: number;
-  initialOffset?: number;
-  bottomBuffer?: number;
-  minRows?: number;
-  maxRows?: number;
-}
-
-export function useAutoSkeletonRows(
-  containerRef: Ref<HTMLElement | null | undefined>,
-  options: UseAutoSkeletonRowsOptions = {}
-) {
-  const {
-    rowHeight = 51,
-    initialOffset = 240,
-    bottomBuffer = 72,
-    minRows = 4,
-    maxRows = 30,
-  } = options;
-
-  const rows = ref<number>(
-    typeof window !== "undefined"
-      ? Math.max(minRows, Math.floor((window.innerHeight - initialOffset) / rowHeight))
-      : 10
-  );
-
-  const calculate = () => {
-    if (typeof window === "undefined") return;
-    const el = containerRef.value;
-    if (!el) {
-      const calculated = Math.floor((window.innerHeight - initialOffset) / rowHeight);
-      rows.value = Math.max(minRows, Math.min(maxRows, calculated));
-      return;
-    }
-
-    const rect = el.getBoundingClientRect();
-    const thead = el.querySelector("thead");
-    const theadHeight = thead ? thead.offsetHeight : 40;
-
-    const containerHeight = el.clientHeight;
-    let availableHeight = 0;
-
-    if (containerHeight && containerHeight > theadHeight + 100) {
-      availableHeight = containerHeight - theadHeight - 12;
-    } else {
-      availableHeight = window.innerHeight - rect.top - theadHeight - bottomBuffer;
-    }
-
-    if (availableHeight > 0) {
-      const calculated = Math.floor(availableHeight / rowHeight);
-      rows.value = Math.max(minRows, Math.min(maxRows, calculated));
-    }
-  };
-
-  onMounted(() => {
-    calculate();
-    nextTick(calculate);
-    window.addEventListener("resize", calculate);
-  });
-
-  onUnmounted(() => {
-    window.removeEventListener("resize", calculate);
-  });
-
-  return {
-    rows,
-    calculate,
-  };
-}
+import { ref, onMounted, onUnmounted, nextTick, type Ref } from "vue";
+
+export interface UseAutoSkeletonRowsOptions {
+  rowHeight?: number;
+  initialOffset?: number;
+  bottomBuffer?: number;
+  minRows?: number;
+  maxRows?: number;
+}
+
+export function useAutoSkeletonRows(
+  containerRef: Ref<HTMLElement | null | undefined>,
+  options: UseAutoSkeletonRowsOptions = {}
+) {
+  const {
+    rowHeight = 51,
+    initialOffset = 240,
+    bottomBuffer = 72,
+    minRows = 4,
+    maxRows = 30,
+  } = options;
+
+  const rows = ref<number>(
+    typeof window !== "undefined"
+      ? Math.max(minRows, Math.floor((window.innerHeight - initialOffset) / rowHeight))
+      : 10
+  );
+
+  const calculate = () => {
+    if (typeof window === "undefined") return;
+    const el = containerRef.value;
+    if (!el) {
+      const calculated = Math.floor((window.innerHeight - initialOffset) / rowHeight);
+      rows.value = Math.max(minRows, Math.min(maxRows, calculated));
+      return;
+    }
+
+    const rect = el.getBoundingClientRect();
+    const thead = el.querySelector("thead");
+    const theadHeight = thead ? thead.offsetHeight : 40;
+
+    const containerHeight = el.clientHeight;
+    let availableHeight = 0;
+
+    if (containerHeight && containerHeight > theadHeight + 100) {
+      availableHeight = containerHeight - theadHeight - 12;
+    } else {
+      availableHeight = window.innerHeight - rect.top - theadHeight - bottomBuffer;
+    }
+
+    if (availableHeight > 0) {
+      const calculated = Math.floor(availableHeight / rowHeight);
+      rows.value = Math.max(minRows, Math.min(maxRows, calculated));
+    }
+  };
+
+  onMounted(() => {
+    calculate();
+    nextTick(calculate);
+    window.addEventListener("resize", calculate);
+  });
+
+  onUnmounted(() => {
+    window.removeEventListener("resize", calculate);
+  });
+
+  return {
+    rows,
+    calculate,
+  };
+}