@likable-hair/svelte 3.3.21 → 3.3.22

package/dist/components/simple/charts/GanymedeLineChart.svelte

@@ -1,133 +1,175 @@
-<script>import { Line } from "svelte-chartjs";
-import {
-  Chart as ChartJS,
-  Title,
-  Tooltip,
-  Legend,
-  LineElement,
-  LinearScale,
-  PointElement,
-  CategoryScale
-} from "chart.js";
-import { onMount } from "svelte";
-ChartJS.register(
-  Title,
-  Tooltip,
-  Legend,
-  LineElement,
-  LinearScale,
-  PointElement,
-  CategoryScale
-);
-let background = void 0, mounted = false, zoomMounted = false;
-onMount(async () => {
-  let style = getComputedStyle(document.body);
-  background = style.getPropertyValue("--global-color-background-200");
-  mounted = true;
-});
-export let data = {
-  labels: [],
-  datasets: []
-}, horizontal = false, responsive = true, maintainAspectRatio = true, showLegend = true, showYTicks = false, showXTicks = false, displayYGrid = true, displayXGrid = true, gridLineWidth = 1, lineWidth = 3, enableZoom = false, resetZoom = false, xTickStepSize = void 0, yTickStepSize = void 0, xMax = void 0, yMax = void 0, xMin = void 0, yMin = void 0, pointRadius = void 0, hitRadius = void 0, hoverRadius = void 0, tooltipsDisabled = false;
-$:
-  gridColor = "rgb(" + (background || "200, 200, 200") + ", .3)";
-let chart;
-$:
-  if (!!chart && !!enableZoom && !!resetZoom) {
-    chart.resetZoom();
-    resetZoom = false;
+<script lang="ts">
+  import { Line } from 'svelte-chartjs';
+  import {
+    Chart as ChartJS,
+    Title,
+    Tooltip,
+    Legend,
+    LineElement,
+    LinearScale,
+    PointElement,
+    CategoryScale,
+  } from 'chart.js';
+  import { onMount, type ComponentProps } from 'svelte';
+
+  ChartJS.register(
+    Title,
+    Tooltip,
+    Legend,
+    LineElement,
+    LinearScale,
+    PointElement,
+    CategoryScale
+  );
+
+  let background: string | undefined = undefined,
+    mounted: boolean = false,
+    zoomMounted: boolean = false
+
+  onMount(async () => {
+    let style = getComputedStyle(document.body);
+    background = style.getPropertyValue('--global-color-background-200');
+    mounted = true
+  })
+
+
+  export let data: {
+      labels: string[],
+      datasets: {
+        label: string,
+        data: (number | null)[],
+        backgroundColor?: string,
+        borderColor?: string,
+        hoverBackgroundColor?: string[]
+        tension?: number,
+        spanGaps?: boolean | number | undefined
+      }[]
+    } = {
+      labels: [],
+      datasets: []
+    },
+    horizontal: boolean = false,
+    responsive: boolean = true,
+    maintainAspectRatio: boolean = true,
+    showLegend: boolean = true,
+    showYTicks: boolean = false,
+    showXTicks: boolean = false,
+    displayYGrid: boolean = true,
+    displayXGrid: boolean = true,
+    gridLineWidth: number = 1,
+    lineWidth: number = 3,
+    enableZoom: boolean = false,
+    resetZoom: boolean = false,
+    xTickStepSize: number | undefined = undefined,
+    yTickStepSize: number | undefined = undefined,
+    xMax: number | undefined = undefined,
+    yMax: number | undefined = undefined,
+    xMin: number | undefined = undefined,
+    yMin: number | undefined = undefined,
+    pointRadius: number | undefined = undefined,
+    hitRadius: number | undefined = undefined,
+    hoverRadius: number | undefined = undefined,
+    tooltipsDisabled: boolean = false
+
+  $: gridColor = 'rgb(' + (background || '200, 200, 200') + ', .3)'
+
+  let chart: ComponentProps<Line>['chart']
+  $: if(!!chart && !!enableZoom && !!resetZoom) {
+    chart.resetZoom()
+    resetZoom = false
   }
-$:
-  if (mounted) {
-    import("chartjs-plugin-zoom").then(({ default: zoomPlugin }) => {
-      ChartJS.register(zoomPlugin);
-      zoomMounted = true;
+
+  $: if(mounted) {
+    import('chartjs-plugin-zoom').then(({ default: zoomPlugin }) => {
+      ChartJS.register(zoomPlugin)
+      zoomMounted = true
       setTimeout(() => {
-        chart?.resetZoom();
+        chart?.resetZoom()
       }, 20);
-    });
+    })
   }
-let chartOptions;
-$:
-  chartOptions = {
-    indexAxis: horizontal ? "y" : "x",
-    responsive,
-    maintainAspectRatio,
-    elements: {
-      line: {
-        borderWidth: lineWidth
-      },
-      point: {
-        radius: pointRadius,
-        hitRadius,
-        hoverRadius
-      }
-    },
-    plugins: {
-      legend: {
-        display: showLegend
-      },
-      zoom: {
-        pan: {
-          enabled: enableZoom,
-          mode: "x",
-          modifierKey: "ctrl"
+
+  let chartOptions: ComponentProps<Line>['options']
+  $: chartOptions = {
+      indexAxis: horizontal ? 'y' : 'x',
+      responsive: responsive,
+      maintainAspectRatio: maintainAspectRatio,
+      elements: {
+        line: {
+          borderWidth: lineWidth
         },
-        zoom: {
-          drag: {
-            enabled: enableZoom
-          },
-          mode: "x"
+        point: {
+          radius: pointRadius,
+          hitRadius: hitRadius,
+          hoverRadius: hoverRadius
         }
       },
-      tooltip: {
-        enabled: !tooltipsDisabled
-      }
-    },
-    interaction: {
-      intersect: false
-    },
-    scales: {
-      x: {
-        max: xMax,
-        min: xMin,
-        display: displayXGrid,
-        title: {
-          display: true
-        },
-        grid: {
-          display: false
+      plugins: {
+        legend: {
+          display: showLegend
         },
-        border: {
-          display: false
+        zoom: {
+          pan: {
+            enabled: enableZoom,
+            mode: 'x',
+            modifierKey: 'ctrl',
+          },
+          zoom: {
+            drag: {
+              enabled: enableZoom
+            },
+            mode: 'x',
+          },
         },
-        ticks: {
-          display: showYTicks,
-          stepSize: yTickStepSize
+        tooltip: {
+          enabled: !tooltipsDisabled
         }
       },
-      y: {
-        max: yMax,
-        min: yMin,
-        display: displayYGrid,
-        title: {},
-        grid: {
-          lineWidth: gridLineWidth,
-          color: gridColor
-        },
-        border: {
-          dash: [10, 10],
-          display: false
+      interaction: {
+        intersect: false,
+      },
+      scales: {
+        x: {
+          max: xMax,
+          min: xMin,
+          display: displayXGrid,
+          title: {
+            display: true
+          },
+          grid: {
+            display: false
+          },
+          border: {
+            display: false
+          },
+          ticks: {
+            display: showYTicks,
+            stepSize: yTickStepSize
+          }
         },
-        ticks: {
-          display: showXTicks,
-          stepSize: xTickStepSize
+        y: {
+          max: yMax,
+          min: yMin,
+          display: displayYGrid,
+          title: {
+          },
+          grid: {
+            lineWidth: gridLineWidth,
+            color: gridColor
+          },
+          border: {
+            dash: [10,10],
+            display: false
+          },
+          ticks: {
+            display: showXTicks,
+            stepSize: xTickStepSize
+          }
         }
       }
     }
-  };
-$:
-  realData = data;
+
+  $: realData = data as ComponentProps<Line>['data']
 </script>
 
 {#if zoomMounted || !enableZoom}

package/dist/components/simple/charts/GanymedeLineChart.svelte.d.ts

@@ -1,49 +1,53 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        data?: {
-            labels: string[];
-            datasets: {
-                label: string;
-                data: (number | null)[];
-                backgroundColor?: string | undefined;
-                borderColor?: string | undefined;
-                hoverBackgroundColor?: string[] | undefined;
-                tension?: number | undefined;
-                spanGaps?: boolean | number | undefined;
-            }[];
-        } | undefined;
-        horizontal?: boolean | undefined;
-        responsive?: boolean | undefined;
-        maintainAspectRatio?: boolean | undefined;
-        showLegend?: boolean | undefined;
-        showYTicks?: boolean | undefined;
-        showXTicks?: boolean | undefined;
-        displayYGrid?: boolean | undefined;
-        displayXGrid?: boolean | undefined;
-        gridLineWidth?: number | undefined;
-        lineWidth?: number | undefined;
-        enableZoom?: boolean | undefined;
-        resetZoom?: boolean | undefined;
-        xTickStepSize?: number | undefined;
-        yTickStepSize?: number | undefined;
-        xMax?: number | undefined;
-        yMax?: number | undefined;
-        xMin?: number | undefined;
-        yMin?: number | undefined;
-        pointRadius?: number | undefined;
-        hitRadius?: number | undefined;
-        hoverRadius?: number | undefined;
-        tooltipsDisabled?: boolean | undefined;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type GanymedeLineChartProps = typeof __propDef.props;
-export type GanymedeLineChartEvents = typeof __propDef.events;
-export type GanymedeLineChartSlots = typeof __propDef.slots;
-export default class GanymedeLineChart extends SvelteComponent<GanymedeLineChartProps, GanymedeLineChartEvents, GanymedeLineChartSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const GanymedeLineChart: $$__sveltets_2_IsomorphicComponent<{
+    data?: {
+        labels: string[];
+        datasets: {
+            label: string;
+            data: (number | null)[];
+            backgroundColor?: string;
+            borderColor?: string;
+            hoverBackgroundColor?: string[];
+            tension?: number;
+            spanGaps?: boolean | number | undefined;
+        }[];
+    };
+    horizontal?: boolean;
+    responsive?: boolean;
+    maintainAspectRatio?: boolean;
+    showLegend?: boolean;
+    showYTicks?: boolean;
+    showXTicks?: boolean;
+    displayYGrid?: boolean;
+    displayXGrid?: boolean;
+    gridLineWidth?: number;
+    lineWidth?: number;
+    enableZoom?: boolean;
+    resetZoom?: boolean;
+    xTickStepSize?: number | undefined;
+    yTickStepSize?: number | undefined;
+    xMax?: number | undefined;
+    yMax?: number | undefined;
+    xMin?: number | undefined;
+    yMin?: number | undefined;
+    pointRadius?: number | undefined;
+    hitRadius?: number | undefined;
+    hoverRadius?: number | undefined;
+    tooltipsDisabled?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type GanymedeLineChart = InstanceType<typeof GanymedeLineChart>;
+export default GanymedeLineChart;

package/dist/components/simple/charts/GanymedePieChart.svelte

@@ -1,44 +1,67 @@
-<script>import { Pie } from "svelte-chartjs";
-import {
-  Chart as ChartJS,
-  Title,
-  Tooltip,
-  Legend,
-  LinearScale,
-  PointElement,
-  CategoryScale,
-  ArcElement
-} from "chart.js";
-ChartJS.register(
-  Title,
-  Tooltip,
-  Legend,
-  ArcElement,
-  LinearScale,
-  PointElement,
-  CategoryScale
-);
-export let data = {
-  labels: [],
-  datasets: [],
-  options: {
-    title: {
-      display: false,
-      text: ""
-    }
-  }
-}, showLegend = true, responsive = true, maintainAspectRatio = false;
-let chartOptions;
-$:
-  chartOptions = {
-    responsive,
-    maintainAspectRatio,
-    plugins: {
-      legend: {
-        display: showLegend
+<script lang="ts">
+  import { Pie } from "svelte-chartjs";
+  import {
+    Chart as ChartJS,
+    Title,
+    Tooltip,
+    Legend,
+    LinearScale,
+    PointElement,
+    CategoryScale,
+    ArcElement,
+  } from "chart.js";
+  import type { ComponentProps } from "svelte";
+
+  ChartJS.register(
+    Title,
+    Tooltip,
+    Legend,
+    ArcElement,
+    LinearScale,
+    PointElement,
+    CategoryScale
+  );
+
+  export let data: {
+    labels: string[];
+    datasets: {
+      label: string;
+      data: number[];
+      backgroundColor?: string[];
+      borderColor?: string;
+      hoverBackgroundColor?: string[];
+      hoverOffset?: number;
+    }[];
+    options?: {
+      title: {
+        display: boolean;
+        text: string;
+      };
+    };
+  } = {
+    labels: [],
+    datasets: [],
+    options: {
+      title: {
+        display: false,
+        text: "",
+      },
+    },
+  },
+  showLegend: boolean = true,
+  responsive: boolean = true,
+  maintainAspectRatio: boolean = false;
+
+  let chartOptions: ComponentProps<Pie>['options']
+  $: chartOptions = {
+    responsive: responsive,
+    maintainAspectRatio: maintainAspectRatio,
+      plugins: {
+        legend: {
+          display: showLegend
+        }
       }
     }
-  };
 </script>
 
 <Pie bind:data options={chartOptions}/>

package/dist/components/simple/charts/GanymedePieChart.svelte.d.ts

@@ -1,35 +1,39 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        data?: {
-            labels: string[];
-            datasets: {
-                label: string;
-                data: number[];
-                backgroundColor?: string[] | undefined;
-                borderColor?: string | undefined;
-                hoverBackgroundColor?: string[] | undefined;
-                hoverOffset?: number | undefined;
-            }[];
-            options?: {
-                title: {
-                    display: boolean;
-                    text: string;
-                };
-            } | undefined;
-        } | undefined;
-        showLegend?: boolean | undefined;
-        responsive?: boolean | undefined;
-        maintainAspectRatio?: boolean | undefined;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type GanymedePieChartProps = typeof __propDef.props;
-export type GanymedePieChartEvents = typeof __propDef.events;
-export type GanymedePieChartSlots = typeof __propDef.slots;
-export default class GanymedePieChart extends SvelteComponent<GanymedePieChartProps, GanymedePieChartEvents, GanymedePieChartSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const GanymedePieChart: $$__sveltets_2_IsomorphicComponent<{
+    data?: {
+        labels: string[];
+        datasets: {
+            label: string;
+            data: number[];
+            backgroundColor?: string[];
+            borderColor?: string;
+            hoverBackgroundColor?: string[];
+            hoverOffset?: number;
+        }[];
+        options?: {
+            title: {
+                display: boolean;
+                text: string;
+            };
+        };
+    };
+    showLegend?: boolean;
+    responsive?: boolean;
+    maintainAspectRatio?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type GanymedePieChart = InstanceType<typeof GanymedePieChart>;
+export default GanymedePieChart;

package/dist/components/simple/common/Card.svelte

@@ -1,4 +1,23 @@
-<script>export let outlined = false, maxWidth = void 0, maxHeight = void 0, minWidth = void 0, minHeight = void 0, width = "fit-content", height = void 0, padding = "5px", borderRadius = "5px", backgroundColor = "rgb(var(--global-color-background-200))", color = void 0, borderColor = void 0, borderWidth = void 0, marginBottom = void 0, marginTop = void 0, marginLeft = void 0, marginRight = void 0, boxShadow = "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
+<script lang="ts">
+  export let outlined = false,
+    maxWidth: string | undefined = undefined,
+    maxHeight: string | undefined = undefined,
+    minWidth: string | undefined = undefined,
+    minHeight: string | undefined = undefined,
+    width = "fit-content",
+    height: string | undefined = undefined,
+    padding = "5px",
+    borderRadius = "5px",
+    backgroundColor = "rgb(var(--global-color-background-200))",
+    color: string | undefined = undefined,
+    borderColor: string | undefined = undefined,
+    borderWidth: string | undefined = undefined,
+    marginBottom: string | undefined = undefined,
+    marginTop: string | undefined = undefined,
+    marginLeft: string | undefined = undefined,
+    marginRight: string | undefined = undefined,
+    boxShadow =
+      "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
 </script>
 
 <div