cynx-lib 1.3.83 → 1.3.85

package/vue/components/Spinner.vue

@@ -1,263 +1,263 @@
-<script setup lang="ts">
-import { computed } from "vue";
-
-const STYLES = `.spin{animation:cx-spin .7s linear infinite}@keyframes cx-spin{to{transform:rotate(360deg)}}.v-progress-circular--indeterminate>svg{animation:progress-circular-rotate .8s linear infinite;transform-origin:center center;transition:all .2s ease-in-out}.v-progress-circular>svg{width:100%;height:100%;margin:auto;position:absolute;inset:0;z-index:0}@keyframes progress-circular-rotate{100%{transform:rotate(270deg)}}@keyframes progress-circular-dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}100%{stroke-dasharray:89,200;stroke-dashoffset:-124px}}.v-progress-circular--indeterminate .v-progress-circular__overlay{animation:progress-circular-dash 1.4s ease-in-out infinite;stroke-linecap:round}`;
-
-const _id = "cynx-spinner-styles";
-function ensureStyles() {
-  if (typeof document === "undefined") return;
-  if (document.getElementById(_id)) return;
-  const tag = document.createElement("style");
-  tag.id = _id;
-  tag.textContent = STYLES;
-  document.head.appendChild(tag);
-}
-
-if (typeof document !== "undefined") ensureStyles();
-
-const props = withDefaults(
-  defineProps<{
-    size?: number;
-    inline?: boolean;
-    color?: string;
-    fullPage?: boolean;
-    variant?: "default" | "classic";
-  }>(),
-  {
-    size: undefined,
-    inline: false,
-    color: "currentColor",
-    fullPage: false,
-    variant: "default",
-  }
-);
-
-ensureStyles();
-
-const s = computed(() => {
-  if (props.size !== undefined && props.size !== null) {
-    return props.size;
-  }
-  return props.inline ? 14 : 20;
-});
-</script>
-
-<template>
-  <!-- Classic Variant -->
-  <template v-if="variant === 'classic'">
-    <div
-      v-if="fullPage"
-      :style="{
-        position: 'fixed',
-        inset: 0,
-        background: 'var(--bg, #f8fafc)',
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        justifyContent: 'center',
-        gap: '16px',
-        zIndex: 9999,
-      }"
-    >
-      <svg
-        class="spin"
-        :width="s"
-        :height="s"
-        viewBox="0 0 24 24"
-        fill="none"
-        :stroke="color"
-        stroke-width="2.5"
-        stroke-linecap="round"
-      >
-        <path
-          d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"
-        />
-      </svg>
-      <div
-        :style="{
-          fontSize: '.75rem',
-          fontFamily: 'var(--mono, ui-monospace, monospace)',
-          color: 'var(--muted, #797b8d)',
-        }"
-      >
-        Loading...
-      </div>
-    </div>
-
-    <svg
-      v-else-if="inline"
-      class="spin"
-      :width="s"
-      :height="s"
-      viewBox="0 0 24 24"
-      fill="none"
-      :stroke="color"
-      stroke-width="2.5"
-      stroke-linecap="round"
-    >
-      <path
-        d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"
-      />
-    </svg>
-
-    <div
-      v-else
-      :style="{
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        padding: '48px 0',
-      }"
-    >
-      <svg
-        class="spin"
-        :width="s"
-        :height="s"
-        viewBox="0 0 24 24"
-        fill="none"
-        :stroke="color"
-        stroke-width="2.5"
-        stroke-linecap="round"
-      >
-        <path
-          d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"
-        />
-      </svg>
-    </div>
-  </template>
-
-  <!-- Circular Variant (Default) -->
-  <template v-else>
-    <!-- FullPage Mode -->
-    <div
-      v-if="fullPage"
-      :style="{
-        position: 'fixed',
-        inset: 0,
-        background: 'var(--bg, #f8fafc)',
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        justifyContent: 'center',
-        gap: '16px',
-        zIndex: 9999,
-      }"
-    >
-      <div
-        class="v-progress-circular v-progress-circular--indeterminate"
-        :style="{ width: `${s}px`, height: `${s}px` }"
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 42.42 42.42"
-          :style="{ width: `${s}px`, height: `${s}px`, transform: 'rotate(-90deg)' }"
-        >
-          <circle
-            fill="transparent"
-            cx="50%"
-            cy="50%"
-            r="20"
-            stroke="var(--grey-2, #e0e0e0)"
-            stroke-width="2.42"
-            stroke-dasharray="125.66"
-            stroke-dashoffset="0"
-          />
-          <circle
-            class="v-progress-circular__overlay"
-            fill="transparent"
-            cx="50%"
-            cy="50%"
-            r="20"
-            :stroke="color"
-            stroke-width="2.42"
-            stroke-dasharray="125.66"
-            stroke-dashoffset="125.66"
-          />
-        </svg>
-      </div>
-      <div
-        :style="{
-          fontSize: '.75rem',
-          fontFamily: 'var(--mono, ui-monospace, monospace)',
-          color: 'var(--muted, #797b8d)',
-        }"
-      >
-        Loading...
-      </div>
-    </div>
-
-    <!-- Inline Mode -->
-    <div
-      v-else-if="inline"
-      class="v-progress-circular v-progress-circular--indeterminate"
-      :style="{
-        width: `${s}px`,
-        height: `${s}px`,
-        position: 'relative',
-        display: 'inline-flex',
-        flexShrink: 0,
-      }"
-    >
-      <svg
-        viewBox="0 0 42.42 42.42"
-        :style="{ width: '100%', height: '100%', transform: 'rotate(-90deg)' }"
-      >
-        <circle
-          class="v-progress-circular__overlay"
-          fill="transparent"
-          cx="50%"
-          cy="50%"
-          r="20"
-          :stroke="color"
-          stroke-width="2.42"
-          stroke-dasharray="125.66"
-          stroke-dashoffset="125.66"
-        />
-      </svg>
-    </div>
-
-    <!-- Normal Centered Mode -->
-    <div
-      v-else
-      :style="{
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        padding: '48px 0',
-      }"
-    >
-      <div
-        class="v-progress-circular v-progress-circular--indeterminate"
-        :style="{ width: `${s}px`, height: `${s}px` }"
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 42.42 42.42"
-          :style="{ width: `${s}px`, height: `${s}px`, transform: 'rotate(-90deg)' }"
-        >
-          <circle
-            fill="transparent"
-            cx="50%"
-            cy="50%"
-            r="20"
-            stroke="var(--grey-2, #e0e0e0)"
-            stroke-width="2.42"
-            stroke-dasharray="125.66"
-            stroke-dashoffset="0"
-          />
-          <circle
-            class="v-progress-circular__overlay"
-            fill="transparent"
-            cx="50%"
-            cy="50%"
-            r="20"
-            :stroke="color"
-            stroke-width="2.42"
-            stroke-dasharray="125.66"
-            stroke-dashoffset="125.66"
-          />
-        </svg>
-      </div>
-    </div>
-  </template>
-</template>
+<script setup lang="ts">
+import { computed } from "vue";
+
+const STYLES = `.spin{animation:cx-spin .7s linear infinite}@keyframes cx-spin{to{transform:rotate(360deg)}}.v-progress-circular--indeterminate>svg{animation:progress-circular-rotate .8s linear infinite;transform-origin:center center;transition:all .2s ease-in-out}.v-progress-circular>svg{width:100%;height:100%;margin:auto;position:absolute;inset:0;z-index:0}@keyframes progress-circular-rotate{100%{transform:rotate(270deg)}}@keyframes progress-circular-dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}100%{stroke-dasharray:89,200;stroke-dashoffset:-124px}}.v-progress-circular--indeterminate .v-progress-circular__overlay{animation:progress-circular-dash 1.4s ease-in-out infinite;stroke-linecap:round}`;
+
+const _id = "cynx-spinner-styles";
+function ensureStyles() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(_id)) return;
+  const tag = document.createElement("style");
+  tag.id = _id;
+  tag.textContent = STYLES;
+  document.head.appendChild(tag);
+}
+
+if (typeof document !== "undefined") ensureStyles();
+
+const props = withDefaults(
+  defineProps<{
+    size?: number;
+    inline?: boolean;
+    color?: string;
+    fullPage?: boolean;
+    variant?: "default" | "classic";
+  }>(),
+  {
+    size: undefined,
+    inline: false,
+    color: "currentColor",
+    fullPage: false,
+    variant: "default",
+  }
+);
+
+ensureStyles();
+
+const s = computed(() => {
+  if (props.size !== undefined && props.size !== null) {
+    return props.size;
+  }
+  return props.inline ? 14 : 20;
+});
+</script>
+
+<template>
+  <!-- Classic Variant -->
+  <template v-if="variant === 'classic'">
+    <div
+      v-if="fullPage"
+      :style="{
+        position: 'fixed',
+        inset: 0,
+        background: 'var(--bg, #f8fafc)',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: '16px',
+        zIndex: 9999,
+      }"
+    >
+      <svg
+        class="spin"
+        :width="s"
+        :height="s"
+        viewBox="0 0 24 24"
+        fill="none"
+        :stroke="color"
+        stroke-width="2.5"
+        stroke-linecap="round"
+      >
+        <path
+          d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"
+        />
+      </svg>
+      <div
+        :style="{
+          fontSize: '.75rem',
+          fontFamily: 'var(--mono, ui-monospace, monospace)',
+          color: 'var(--muted, #797b8d)',
+        }"
+      >
+        Loading...
+      </div>
+    </div>
+
+    <svg
+      v-else-if="inline"
+      class="spin"
+      :width="s"
+      :height="s"
+      viewBox="0 0 24 24"
+      fill="none"
+      :stroke="color"
+      stroke-width="2.5"
+      stroke-linecap="round"
+    >
+      <path
+        d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"
+      />
+    </svg>
+
+    <div
+      v-else
+      :style="{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: '48px 0',
+      }"
+    >
+      <svg
+        class="spin"
+        :width="s"
+        :height="s"
+        viewBox="0 0 24 24"
+        fill="none"
+        :stroke="color"
+        stroke-width="2.5"
+        stroke-linecap="round"
+      >
+        <path
+          d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"
+        />
+      </svg>
+    </div>
+  </template>
+
+  <!-- Circular Variant (Default) -->
+  <template v-else>
+    <!-- FullPage Mode -->
+    <div
+      v-if="fullPage"
+      :style="{
+        position: 'fixed',
+        inset: 0,
+        background: 'var(--bg, #f8fafc)',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: '16px',
+        zIndex: 9999,
+      }"
+    >
+      <div
+        class="v-progress-circular v-progress-circular--indeterminate"
+        :style="{ width: `${s}px`, height: `${s}px` }"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 42.42 42.42"
+          :style="{ width: `${s}px`, height: `${s}px`, transform: 'rotate(-90deg)' }"
+        >
+          <circle
+            fill="transparent"
+            cx="50%"
+            cy="50%"
+            r="20"
+            stroke="var(--grey-2, #e0e0e0)"
+            stroke-width="2.42"
+            stroke-dasharray="125.66"
+            stroke-dashoffset="0"
+          />
+          <circle
+            class="v-progress-circular__overlay"
+            fill="transparent"
+            cx="50%"
+            cy="50%"
+            r="20"
+            :stroke="color"
+            stroke-width="2.42"
+            stroke-dasharray="125.66"
+            stroke-dashoffset="125.66"
+          />
+        </svg>
+      </div>
+      <div
+        :style="{
+          fontSize: '.75rem',
+          fontFamily: 'var(--mono, ui-monospace, monospace)',
+          color: 'var(--muted, #797b8d)',
+        }"
+      >
+        Loading...
+      </div>
+    </div>
+
+    <!-- Inline Mode -->
+    <div
+      v-else-if="inline"
+      class="v-progress-circular v-progress-circular--indeterminate"
+      :style="{
+        width: `${s}px`,
+        height: `${s}px`,
+        position: 'relative',
+        display: 'inline-flex',
+        flexShrink: 0,
+      }"
+    >
+      <svg
+        viewBox="0 0 42.42 42.42"
+        :style="{ width: '100%', height: '100%', transform: 'rotate(-90deg)' }"
+      >
+        <circle
+          class="v-progress-circular__overlay"
+          fill="transparent"
+          cx="50%"
+          cy="50%"
+          r="20"
+          :stroke="color"
+          stroke-width="2.42"
+          stroke-dasharray="125.66"
+          stroke-dashoffset="125.66"
+        />
+      </svg>
+    </div>
+
+    <!-- Normal Centered Mode -->
+    <div
+      v-else
+      :style="{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: '48px 0',
+      }"
+    >
+      <div
+        class="v-progress-circular v-progress-circular--indeterminate"
+        :style="{ width: `${s}px`, height: `${s}px` }"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 42.42 42.42"
+          :style="{ width: `${s}px`, height: `${s}px`, transform: 'rotate(-90deg)' }"
+        >
+          <circle
+            fill="transparent"
+            cx="50%"
+            cy="50%"
+            r="20"
+            stroke="var(--grey-2, #e0e0e0)"
+            stroke-width="2.42"
+            stroke-dasharray="125.66"
+            stroke-dashoffset="0"
+          />
+          <circle
+            class="v-progress-circular__overlay"
+            fill="transparent"
+            cx="50%"
+            cy="50%"
+            r="20"
+            :stroke="color"
+            stroke-width="2.42"
+            stroke-dasharray="125.66"
+            stroke-dashoffset="125.66"
+          />
+        </svg>
+      </div>
+    </div>
+  </template>
+</template>