cynx-lib 1.3.83 → 1.3.85

package/vue/components/InfoBadge.vue

@@ -1,223 +1,223 @@
-<script setup lang="ts">
-import { computed, useSlots } from "vue";
-
-export interface InfoBadgeItem {
-  id?: string | number;
-  key?: string | number;
-  icon?: any;
-  label?: string | number;
-  value?: string | number;
-  color?: string;
-  title?: string;
-  dot?: boolean;
-  onClick?: (e: MouseEvent) => void;
-}
-
-const SIZES: Record<string, any> = {
-  xs: {
-    height: "24px",
-    padding: "0 8px",
-    fontSize: "10px",
-    iconSize: 12,
-    dotSize: ".65rem",
-    sepHeight: "10px",
-    gap: "6px",
-    borderRadius: "var(--radxs, 6px)",
-  },
-  sm: {
-    height: "28px",
-    padding: "0 10px",
-    fontSize: "11px",
-    iconSize: 13,
-    dotSize: ".7rem",
-    sepHeight: "12px",
-    gap: "8px",
-    borderRadius: "var(--rads, 8px)",
-  },
-  md: {
-    height: "32px",
-    padding: "0 12px",
-    fontSize: "12px",
-    iconSize: 14,
-    dotSize: ".75rem",
-    sepHeight: "14px",
-    gap: "10px",
-    borderRadius: "var(--rad, 10px)",
-  },
-  lg: {
-    height: "36px",
-    padding: "0 14px",
-    fontSize: "13px",
-    iconSize: 16,
-    dotSize: ".8rem",
-    sepHeight: "16px",
-    gap: "12px",
-    borderRadius: "var(--rad, 10px)",
-  },
-};
-
-const VARIANTS: Record<string, any> = {
-  default: {
-    background: "var(--surface, #ffffff)",
-    border: "1px solid var(--border, #d7d8e0)",
-    boxShadow: "var(--shadow, 0 1px 2px rgba(0, 0, 0, 0.05))",
-  },
-  surface: {
-    background: "var(--surface, #ffffff)",
-    border: "1px solid var(--border, #d7d8e0)",
-    boxShadow: "var(--shadow, 0 1px 2px rgba(0, 0, 0, 0.05))",
-  },
-  flat: {
-    background: "var(--grey-1, #f5f5f8)",
-    border: "1px solid var(--border, #d7d8e0)",
-    boxShadow: "none",
-  },
-  ghost: {
-    background: "transparent",
-    border: "1px solid var(--border, #d7d8e0)",
-    boxShadow: "none",
-  },
-};
-
-const props = withDefaults(
-  defineProps<{
-    items?: InfoBadgeItem[];
-    icon?: any;
-    label?: string | number;
-    value?: string | number;
-    color?: string;
-    title?: string;
-    dot?: boolean;
-    size?: "xs" | "sm" | "md" | "lg";
-    variant?: "default" | "surface" | "flat" | "ghost";
-  }>(),
-  {
-    items: undefined,
-    icon: undefined,
-    label: undefined,
-    value: undefined,
-    color: undefined,
-    title: undefined,
-    dot: true,
-    size: "sm",
-    variant: "default",
-  }
-);
-
-const emit = defineEmits<{
-  (e: "click", event: MouseEvent): void;
-}>();
-
-const slots = useSlots();
-const sz = computed(() => SIZES[props.size] || SIZES.sm);
-const vr = computed(() => VARIANTS[props.variant] || VARIANTS.default);
-
-const resolvedItems = computed<InfoBadgeItem[]>(() => {
-  if (Array.isArray(props.items) && props.items.length > 0) {
-    return props.items;
-  }
-  if (props.icon != null || props.value != null || props.label != null) {
-    return [
-      {
-        icon: props.icon,
-        label: props.label,
-        value: props.value,
-        color: props.color,
-        title: props.title,
-      },
-    ];
-  }
-  return [];
-});
-</script>
-
-<template>
-  <div
-    class="inline-flex items-center box-border select-none"
-    :style="{
-      height: sz.height,
-      padding: sz.padding,
-      borderRadius: sz.borderRadius,
-      background: vr.background,
-      border: vr.border,
-      boxShadow: vr.boxShadow,
-      gap: sz.gap,
-    }"
-    :title="title"
-    @click="(e) => emit('click', e)"
-  >
-    <slot v-if="slots.default" />
-    <template v-else>
-      <template v-for="(it, idx) in resolvedItems" :key="it.id || it.key || idx">
-        <div
-          v-if="idx > 0"
-          :style="{
-            width: '1px',
-            height: sz.sepHeight,
-            background: 'var(--border, #d7d8e0)',
-            flexShrink: 0,
-          }"
-        />
-        <div
-          class="inline-flex items-center"
-          :style="{
-            gap: '5px',
-            cursor: it.onClick ? 'pointer' : 'inherit',
-          }"
-          :title="it.title"
-          @click="it.onClick"
-        >
-          <span
-            v-if="it.icon"
-            class="inline-flex items-center justify-center flex-shrink-0"
-            :style="{
-              color: it.color || 'inherit',
-            }"
-          >
-            <component
-              :is="it.icon"
-              v-if="typeof it.icon === 'object' || typeof it.icon === 'function'"
-              :size="sz.iconSize"
-            />
-            <template v-else>{{ it.icon }}</template>
-          </span>
-
-          <span
-            v-if="it.label !== undefined && it.label !== null"
-            :style="{
-              fontSize: sz.fontSize,
-              fontWeight: 600,
-              color: (it.color && it.color !== 'inherit') ? it.color : 'var(--primary-text, #0f111c)',
-            }"
-          >
-            {{ it.label }}
-          </span>
-
-          <span
-            v-if="(it.dot !== undefined ? it.dot : dot) && (it.icon || it.label) && it.value !== undefined && it.value !== null"
-            :style="{
-              fontSize: sz.dotSize,
-              color: 'var(--muted, #9b9daa)',
-              lineHeight: 1,
-            }"
-          >
-            •
-          </span>
-
-          <span
-            v-if="it.value !== undefined && it.value !== null"
-            :style="{
-              fontSize: sz.fontSize,
-              fontWeight: 600,
-              color: 'var(--primary-text, #0f111c)',
-              fontVariantNumeric: 'tabular-nums',
-              lineHeight: 1,
-            }"
-          >
-            {{ it.value }}
-          </span>
-        </div>
-      </template>
-    </template>
-  </div>
-</template>
+<script setup lang="ts">
+import { computed, useSlots } from "vue";
+
+export interface InfoBadgeItem {
+  id?: string | number;
+  key?: string | number;
+  icon?: any;
+  label?: string | number;
+  value?: string | number;
+  color?: string;
+  title?: string;
+  dot?: boolean;
+  onClick?: (e: MouseEvent) => void;
+}
+
+const SIZES: Record<string, any> = {
+  xs: {
+    height: "24px",
+    padding: "0 8px",
+    fontSize: "10px",
+    iconSize: 12,
+    dotSize: ".65rem",
+    sepHeight: "10px",
+    gap: "6px",
+    borderRadius: "var(--radxs, 6px)",
+  },
+  sm: {
+    height: "28px",
+    padding: "0 10px",
+    fontSize: "11px",
+    iconSize: 13,
+    dotSize: ".7rem",
+    sepHeight: "12px",
+    gap: "8px",
+    borderRadius: "var(--rads, 8px)",
+  },
+  md: {
+    height: "32px",
+    padding: "0 12px",
+    fontSize: "12px",
+    iconSize: 14,
+    dotSize: ".75rem",
+    sepHeight: "14px",
+    gap: "10px",
+    borderRadius: "var(--rad, 10px)",
+  },
+  lg: {
+    height: "36px",
+    padding: "0 14px",
+    fontSize: "13px",
+    iconSize: 16,
+    dotSize: ".8rem",
+    sepHeight: "16px",
+    gap: "12px",
+    borderRadius: "var(--rad, 10px)",
+  },
+};
+
+const VARIANTS: Record<string, any> = {
+  default: {
+    background: "var(--surface, #ffffff)",
+    border: "1px solid var(--border, #d7d8e0)",
+    boxShadow: "var(--shadow, 0 1px 2px rgba(0, 0, 0, 0.05))",
+  },
+  surface: {
+    background: "var(--surface, #ffffff)",
+    border: "1px solid var(--border, #d7d8e0)",
+    boxShadow: "var(--shadow, 0 1px 2px rgba(0, 0, 0, 0.05))",
+  },
+  flat: {
+    background: "var(--grey-1, #f5f5f8)",
+    border: "1px solid var(--border, #d7d8e0)",
+    boxShadow: "none",
+  },
+  ghost: {
+    background: "transparent",
+    border: "1px solid var(--border, #d7d8e0)",
+    boxShadow: "none",
+  },
+};
+
+const props = withDefaults(
+  defineProps<{
+    items?: InfoBadgeItem[];
+    icon?: any;
+    label?: string | number;
+    value?: string | number;
+    color?: string;
+    title?: string;
+    dot?: boolean;
+    size?: "xs" | "sm" | "md" | "lg";
+    variant?: "default" | "surface" | "flat" | "ghost";
+  }>(),
+  {
+    items: undefined,
+    icon: undefined,
+    label: undefined,
+    value: undefined,
+    color: undefined,
+    title: undefined,
+    dot: true,
+    size: "sm",
+    variant: "default",
+  }
+);
+
+const emit = defineEmits<{
+  (e: "click", event: MouseEvent): void;
+}>();
+
+const slots = useSlots();
+const sz = computed(() => SIZES[props.size] || SIZES.sm);
+const vr = computed(() => VARIANTS[props.variant] || VARIANTS.default);
+
+const resolvedItems = computed<InfoBadgeItem[]>(() => {
+  if (Array.isArray(props.items) && props.items.length > 0) {
+    return props.items;
+  }
+  if (props.icon != null || props.value != null || props.label != null) {
+    return [
+      {
+        icon: props.icon,
+        label: props.label,
+        value: props.value,
+        color: props.color,
+        title: props.title,
+      },
+    ];
+  }
+  return [];
+});
+</script>
+
+<template>
+  <div
+    class="inline-flex items-center box-border select-none"
+    :style="{
+      height: sz.height,
+      padding: sz.padding,
+      borderRadius: sz.borderRadius,
+      background: vr.background,
+      border: vr.border,
+      boxShadow: vr.boxShadow,
+      gap: sz.gap,
+    }"
+    :title="title"
+    @click="(e) => emit('click', e)"
+  >
+    <slot v-if="slots.default" />
+    <template v-else>
+      <template v-for="(it, idx) in resolvedItems" :key="it.id || it.key || idx">
+        <div
+          v-if="idx > 0"
+          :style="{
+            width: '1px',
+            height: sz.sepHeight,
+            background: 'var(--border, #d7d8e0)',
+            flexShrink: 0,
+          }"
+        />
+        <div
+          class="inline-flex items-center"
+          :style="{
+            gap: '5px',
+            cursor: it.onClick ? 'pointer' : 'inherit',
+          }"
+          :title="it.title"
+          @click="it.onClick"
+        >
+          <span
+            v-if="it.icon"
+            class="inline-flex items-center justify-center flex-shrink-0"
+            :style="{
+              color: it.color || 'inherit',
+            }"
+          >
+            <component
+              :is="it.icon"
+              v-if="typeof it.icon === 'object' || typeof it.icon === 'function'"
+              :size="sz.iconSize"
+            />
+            <template v-else>{{ it.icon }}</template>
+          </span>
+
+          <span
+            v-if="it.label !== undefined && it.label !== null"
+            :style="{
+              fontSize: sz.fontSize,
+              fontWeight: 600,
+              color: (it.color && it.color !== 'inherit') ? it.color : 'var(--primary-text, #0f111c)',
+            }"
+          >
+            {{ it.label }}
+          </span>
+
+          <span
+            v-if="(it.dot !== undefined ? it.dot : dot) && (it.icon || it.label) && it.value !== undefined && it.value !== null"
+            :style="{
+              fontSize: sz.dotSize,
+              color: 'var(--muted, #9b9daa)',
+              lineHeight: 1,
+            }"
+          >
+            •
+          </span>
+
+          <span
+            v-if="it.value !== undefined && it.value !== null"
+            :style="{
+              fontSize: sz.fontSize,
+              fontWeight: 600,
+              color: 'var(--primary-text, #0f111c)',
+              fontVariantNumeric: 'tabular-nums',
+              lineHeight: 1,
+            }"
+          >
+            {{ it.value }}
+          </span>
+        </div>
+      </template>
+    </template>
+  </div>
+</template>