@graphenedata/cli 0.0.13 → 0.0.14

package/dist/ui/components/QueryLoad.svelte

@@ -1,22 +1,27 @@
 <script lang="ts">
+  import {onDestroy, onMount, type Snippet} from 'svelte'
   import ErrorChart from './ErrorChart.svelte'
-  import {onDestroy, onMount} from 'svelte'
 
-  export let data: string | {rows?: any[]}
-  export let height = 200
-  export let fields: Record<string, string | string[]> = {}
+  interface Props {
+    data: string | {rows?: any[]}
+    height?: number
+    fields?: Record<string, string | string[]>
+    children?: Snippet<[any[]]>
+  }
+
+  let {data, height = 200, fields = {}, children}: Props = $props()
 
-  let errors: Error[] | null = null
-  let loaded: any[] | null = null
+  let errors: Error[] | null = $state(null)
+  let loaded: any[] | null = $state(null)
 
-  let handleResults = (result) => {
+  let handleResults = (result: any) => {
     errors = result.errors || null
     loaded = result.rows
   }
 
   onMount(() => {
     if (typeof data !== 'string') {
-      loaded = data.rows
+      loaded = data.rows ?? null
     } else {
       let usedFields = Object.fromEntries(Object.entries(fields).filter(e => !!e[1]))
       window.$GRAPHENE.query(data, usedFields, handleResults)
@@ -32,12 +37,12 @@
   <ErrorChart title="Error" error={errors[0]} />
 {:else if !loaded}
   <div class='ql-skeleton' style={`height:${height}px`} role="status" aria-live="polite">
-    <span class="ql-skeleton__pulse" />
+    <span class="ql-skeleton__pulse"></span>
   </div>
 {:else if loaded.length == 0}
   <div class="empty-chart" role="note">Dataset is empty - query ran successfully, but no data was returned from the database</div>
 {:else}
-  <slot loaded={loaded} />
+  {@render children?.(loaded)}
 {/if}
 
 <style>

package/dist/ui/components/SortIcon.svelte

@@ -1,5 +1,9 @@
 <script lang="ts">
-  export let ascending: boolean | undefined = undefined
+  interface Props {
+    ascending?: boolean
+  }
+
+  let {ascending = undefined}: Props = $props()
 </script>
 
 <svg

package/dist/ui/components/Table.svelte

@@ -1,19 +1,25 @@
 <script lang="ts">
+  import type {Snippet} from 'svelte'
   import QueryLoad from './QueryLoad.svelte'
   import TableInner from './_Table.svelte'
 
-  export let data: string
+  interface Props {
+    data: string
+    children?: Snippet
+    [key: string]: unknown
+  }
 
-  const restProps: Record<string, unknown> = $$restProps
-  $: spreadProps = Object.fromEntries(Object.entries(restProps).filter(([, value]) => value !== undefined))
+  let {data, children, ...restProps}: Props = $props()
+
+  let spreadProps = $derived(Object.fromEntries(Object.entries(restProps).filter(([, value]) => value !== undefined)))
 </script>
 
-<QueryLoad {data} let:loaded>
-  {#if $$slots.default}
-    <TableInner {...spreadProps} data={loaded}>
-      <slot />
-    </TableInner>
+{#snippet tableContent(loaded: any[])}
+  {#if children}
+    <TableInner {...spreadProps} data={loaded} {children} />
   {:else}
     <TableInner {...spreadProps} data={loaded} />
   {/if}
-</QueryLoad>
+{/snippet}
+
+<QueryLoad {data} children={tableContent} />

package/dist/ui/components/TableCell.svelte

@@ -1,26 +1,39 @@
 <script lang="ts">
-  export let dataType: string | undefined = undefined
-  export let align: string | undefined = undefined
-  export let height: string | number | undefined = undefined
-  export let width: string | number | undefined = undefined
-  export let wrap: boolean | undefined = undefined
-  export let verticalAlign: 'top' | 'middle' | 'bottom' | string = 'middle'
-  export let rowSpan = 1
-  export let colSpan = 1
-  export let show = true
-  export let cellColor: string | undefined = undefined
-  export let fontColor: string | undefined = undefined
-  export let topBorder: string | undefined = undefined
-  export let paddingLeft: string | undefined = undefined
-  export let borderBottom: string | undefined = undefined
-  export let compact = false
+  import type {Snippet} from 'svelte'
+
+  interface Props {
+    dataType?: string
+    align?: string
+    height?: string | number
+    width?: string | number
+    wrap?: boolean
+    verticalAlign?: 'top' | 'middle' | 'bottom' | string
+    rowSpan?: number
+    colSpan?: number
+    show?: boolean
+    cellColor?: string
+    fontColor?: string
+    topBorder?: string
+    paddingLeft?: string
+    borderBottom?: string
+    compact?: boolean
+    class?: string
+    children?: Snippet
+  }
+
+  let {
+    dataType = undefined, align = undefined, height = undefined, width = undefined, wrap = undefined,
+    verticalAlign = 'middle', rowSpan = 1, colSpan = 1, show = true, cellColor = undefined,
+    fontColor = undefined, topBorder = undefined, paddingLeft = undefined, borderBottom = undefined,
+    compact = false, class: className = undefined, children,
+  }: Props = $props()
 </script>
 
 <td
   role="cell"
   rowspan={rowSpan}
   colspan={colSpan}
-  class={`table-cell ${dataType ?? ''} ${compact ? 'table-cell--compact' : ''} ${topBorder ?? ''} ${$$restProps.class ?? ''}`.trim()}
+  class={`table-cell ${dataType ?? ''} ${compact ? 'table-cell--compact' : ''} ${topBorder ?? ''} ${className ?? ''}`.trim()}
   style:text-align={align}
   style:height={height}
   style:width={width}
@@ -33,7 +46,7 @@
   style:border-top={topBorder}
   style:border-bottom={borderBottom}
 >
-  <slot />
+  {@render children?.()}
 </td>
 
 <style>

package/dist/ui/components/TableGroupRow.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import {createEventDispatcher} from 'svelte'
   import TableCell from './TableCell.svelte'
   import TableGroupToggle from './TableGroupToggle.svelte'
   import InlineDelta from './InlineDelta.svelte'
@@ -7,22 +6,30 @@
   import {formatValue, getFormatObjectFromString} from '../component-utilities/formatting.js'
   import {toBoolean} from '../component-utilities/convert'
 
-  export let groupName: string
-  export let currentGroupData: any[] = []
-  export let toggled = true
-  export let columnSummary: any[] = []
-  export let rowNumbers: boolean | string | undefined = undefined
-  export let rowColor: string | undefined = undefined
-  export let subtotals: boolean | string | undefined = true
-  export let orderedColumns: any[] = []
-  export let compact: boolean | string | undefined = undefined
+  interface Props {
+    groupName: string
+    currentGroupData?: any[]
+    toggled?: boolean
+    columnSummary?: any[]
+    rowNumbers?: boolean | string
+    rowColor?: string
+    subtotals?: boolean | string
+    orderedColumns?: any[]
+    compact?: boolean | string
+    onToggle?: (detail: {groupName: string}) => void
+  }
+
+  let {
+    groupName, currentGroupData = [], toggled = true, columnSummary = [],
+    rowNumbers: rowNumbersProp = undefined, rowColor = undefined, subtotals: subtotalsProp = true,
+    orderedColumns = [], compact: compactProp = undefined, onToggle,
+  }: Props = $props()
 
-  rowNumbers = toBoolean(rowNumbers) ?? false
-  subtotals = toBoolean(subtotals) ?? true
-  compact = toBoolean(compact)
+  let rowNumbers = $derived(toBoolean(rowNumbersProp) ?? false)
+  let subtotals = $derived(toBoolean(subtotalsProp) ?? true)
+  let compact = $derived(toBoolean(compactProp))
 
-  const dispatch = createEventDispatcher<{toggle: {groupName: string}}>()
-  const toggleGroup = () => dispatch('toggle', {groupName})
+  const toggleGroup = () => onToggle?.({groupName})
 
   const handleKeydown = (event: KeyboardEvent) => {
     if (event.key === 'Enter' || event.key === ' ') {
@@ -31,7 +38,7 @@
     }
   }
 
-  const resolveFormat = (column, summary) => {
+  const resolveFormat = (column: any, summary: any) => {
     if (column.subtotalFmt) return getFormatObjectFromString(column.subtotalFmt)
     if (column.totalFmt) return getFormatObjectFromString(column.totalFmt)
     if (column.fmt) return getFormatObjectFromString(column.fmt, summary.format?.valueType)
@@ -42,8 +49,8 @@
 <tr
   class="group-row"
   tabindex="0"
-  on:click={toggleGroup}
-  on:keydown={handleKeydown}
+  onclick={toggleGroup}
+  onkeydown={handleKeydown}
   style:background-color={rowColor}
 >
   {#if rowNumbers}
@@ -97,7 +104,7 @@
         {/if}
       </TableCell>
     {:else}
-      <TableCell />
+      <TableCell></TableCell>
     {/if}
   {/each}
 </tr>

package/dist/ui/components/TableGroupToggle.svelte

@@ -1,15 +1,18 @@
 <script lang="ts">
   import {getThemeStores} from '../component-utilities/themeStores'
 
-  export let toggled = false
-  export let color: string | undefined = undefined
-  export let size = 10
+  interface Props {
+    toggled?: boolean
+    color?: string
+    size?: number
+  }
+
+  let {toggled = false, color = undefined, size = 10}: Props = $props()
 
   const {theme, resolveColor} = getThemeStores()
-  let colorStore = resolveColor(color)
 
-  $: colorStore = resolveColor(color)
-  $: fill = $colorStore ?? $theme.colors['base-content']
+  let colorStore = $derived(resolveColor(color))
+  let fill = $derived($colorStore ?? $theme.colors['base-content'])
 </script>
 
 <span aria-expanded={toggled} class="group-toggle">

package/dist/ui/components/TableHeader.svelte

@@ -3,24 +3,33 @@
   import {safeExtractColumn} from '../component-utilities/tableUtils'
   import {toBoolean} from '../component-utilities/convert'
 
-  export let rowNumbers: boolean | string | undefined = false
-  export let headerColor: string | undefined = undefined
-  export let headerFontColor: string | undefined = undefined
-  export let orderedColumns: any[] = []
-  export let columnSummary: any[] = []
-  export let sortable: boolean | string | undefined = true
-  export let sortClick: (columnId: string) => () => void = () => () => {}
-  export let formatColumnTitles: boolean | string | undefined = true
-  export let sortObj: {col: string | null; ascending: boolean | null} = {col: null, ascending: null}
-  export let wrapTitles: boolean | string | undefined = false
-  export let compact: boolean | string | undefined = false
-  export let link: string | undefined = undefined
-
-  rowNumbers = toBoolean(rowNumbers) ?? false
-  sortable = toBoolean(sortable) ?? true
-  formatColumnTitles = toBoolean(formatColumnTitles) ?? true
-  wrapTitles = toBoolean(wrapTitles) ?? false
-  compact = toBoolean(compact) ?? false
+  interface Props {
+    rowNumbers?: boolean | string
+    headerColor?: string
+    headerFontColor?: string
+    orderedColumns?: any[]
+    columnSummary?: any[]
+    sortable?: boolean | string
+    sortClick?: (columnId: string) => () => void
+    formatColumnTitles?: boolean | string
+    sortObj?: {col: string | null; ascending: boolean | null}
+    wrapTitles?: boolean | string
+    compact?: boolean | string
+    link?: string
+  }
+
+  let {
+    rowNumbers: rowNumbersProp = false, headerColor = undefined, headerFontColor = undefined,
+    orderedColumns = [], columnSummary = [], sortable: sortableProp = true, sortClick = () => () => {},
+    formatColumnTitles: formatColumnTitlesProp = true, sortObj = {col: null, ascending: null},
+    wrapTitles: wrapTitlesProp = false, compact: compactProp = false, link = undefined,
+  }: Props = $props()
+
+  let rowNumbers = $derived(toBoolean(rowNumbersProp) ?? false)
+  let sortable = $derived(toBoolean(sortableProp) ?? true)
+  let formatColumnTitles = $derived(toBoolean(formatColumnTitlesProp) ?? true)
+  let wrapTitles = $derived(toBoolean(wrapTitlesProp) ?? false)
+  let compact = $derived(toBoolean(compactProp) ?? false)
 
   const getWrapTitleAlignment = (column: any) => {
     if (column.align === 'right') return 'header-title--align-end'
@@ -30,8 +39,8 @@
     return 'header-title--align-start'
   }
 
-  const computeGroupSpans = () => {
-    return orderedColumns.map((column, index, array) => {
+  const computeGroupSpans = (columns: any[]) => {
+    return columns.map((column, index, array) => {
       let isNewGroup = index === 0 || column.colGroup !== array[index - 1].colGroup
       let span = 1
       if (column.colGroup) {
@@ -52,14 +61,15 @@
     return summary.id
   }
 
-  $: columnsWithGroupSpan = computeGroupSpans()
+  let columnsWithGroupSpan = $derived(computeGroupSpans(orderedColumns))
+  let hasColumnGroups = $derived(orderedColumns.some((col) => col.colGroup))
 </script>
 
 <thead>
-  {#if columnsWithGroupSpan.length}
+  {#if hasColumnGroups}
     <tr class="header-group-row" style:background-color={headerColor}>
       {#if rowNumbers}
-        <th class={`header-index ${compact ? 'header-index--compact' : ''}`} style:background-color={headerColor} />
+        <th class={`header-index ${compact ? 'header-index--compact' : ''}`} style:background-color={headerColor}></th>
       {/if}
       {#each columnsWithGroupSpan as column (column.id)}
         {#if column.colGroup && column.isNewGroup}
@@ -67,11 +77,11 @@
             <div class="header-group__label">{column.colGroup}</div>
           </th>
         {:else}
-          <th class="header-group--spacer" />
+          <th class="header-group--spacer"></th>
         {/if}
       {/each}
       {#if link}
-        <th class="header-group--spacer" />
+        <th class="header-group--spacer"></th>
       {/if}
     </tr>
   {/if}
@@ -83,7 +93,7 @@
         class={`header-index ${compact ? 'header-index--compact' : ''}`}
         style:background-color={headerColor}
         style:color={headerFontColor}
-      />
+      ></th>
     {/if}
     {#each orderedColumns as column (column.id)}
       {@const summary = safeExtractColumn(column, columnSummary)}
@@ -94,7 +104,7 @@
         style:background={headerColor}
         style:text-align={column.align ?? (['sparkline', 'sparkbar', 'sparkarea', 'bar'].includes(column.contentType) ? 'center' : undefined)}
         style:cursor={sortable ? 'pointer' : 'auto'}
-        on:click={sortable ? sortClick(column.id) : undefined}
+        onclick={sortable ? sortClick(column.id) : undefined}
         aria-sort={getAriaSortValue(column.id)}
       >
         <div class={`header-title ${wrapTitles || column.wrapTitle ? 'header-title--wrap' : ''} ${wrapTitles || column.wrapTitle ? getWrapTitleAlignment(column) : ''}`.trim()}>

package/dist/ui/components/TableRow.svelte

@@ -6,20 +6,29 @@
   import {formatValue, getFormatObjectFromString} from '../component-utilities/formatting.js'
   import {getThemeStores} from '../component-utilities/themeStores'
 
-  export let displayedData: any[] = []
-  export let rowShading: boolean | string | undefined = undefined
-  export let link: string | undefined = undefined
-  export let rowNumbers: boolean | string | undefined = undefined
-  export let rowLines: boolean | string | undefined = undefined
-  export let index = 0
-  export let columnSummary: any[] = []
-  export let grouped = false
-  export let groupType: 'accordion' | 'section' | undefined = undefined
-  export let groupColumn: string | undefined = undefined
-  export let rowSpan = 1
-  export let groupNamePosition: 'top' | 'middle' | 'bottom' = 'middle'
-  export let orderedColumns: any[] = []
-  export let compact: boolean | string | undefined = undefined
+  interface Props {
+    displayedData?: any[]
+    rowShading?: boolean | string
+    link?: string
+    rowNumbers?: boolean | string
+    rowLines?: boolean | string
+    index?: number
+    columnSummary?: any[]
+    grouped?: boolean
+    groupType?: 'accordion' | 'section'
+    groupColumn?: string
+    rowSpan?: number
+    groupNamePosition?: 'top' | 'middle' | 'bottom'
+    orderedColumns?: any[]
+    compact?: boolean | string
+  }
+
+  let {
+    displayedData = [], rowShading: rowShadingProp = undefined, link = undefined,
+    rowNumbers: rowNumbersProp = undefined, rowLines: rowLinesProp = undefined, index = 0,
+    columnSummary = [], grouped = false, groupType = undefined, groupColumn = undefined,
+    rowSpan = 1, groupNamePosition = 'middle', orderedColumns = [], compact: compactProp = undefined,
+  }: Props = $props()
 
   const {theme} = getThemeStores()
 
@@ -29,7 +38,8 @@
     columnMax: number | undefined,
   ) => {
     if (!column?.colorScale || !column?.colorScale.length) return undefined
-    if (!hasFiniteNumber(columnMin) || !hasFiniteNumber(columnMax) || columnMin === columnMax) return undefined
+    let hasBreakpoints = Array.isArray(column.colorBreakpoints) && column.colorBreakpoints.length >= 2
+    if (!hasBreakpoints && (!hasFiniteNumber(columnMin) || !hasFiniteNumber(columnMax) || columnMin === columnMax)) return undefined
 
     let rawDomain
     if (Array.isArray(column.colorBreakpoints) && column.colorBreakpoints.length) {
@@ -66,10 +76,10 @@
     return Boolean(val)
   }
 
-  rowShading = toBool(rowShading)
-  rowNumbers = toBool(rowNumbers)
-  rowLines = toBool(rowLines ?? true)
-  compact = toBool(compact)
+  let rowShading = $derived(toBool(rowShadingProp))
+  let rowNumbers = $derived(toBool(rowNumbersProp))
+  let rowLines = $derived(toBool(rowLinesProp ?? true))
+  let compact = $derived(toBool(compactProp))
 
   const isExternalUrl = (url: string) => {
     try {
@@ -105,7 +115,7 @@
     class:table-row--shaded={shaded}
     class:table-row--lined={rowLines}
     class:table-row--clickable={clickable}
-    on:click={(event) => clickable && navigateToLink(row, event)}
+    onclick={(event) => clickable && navigateToLink(row, event)}
   >
     {#if rowNumbers && groupType !== 'section'}
       <TableCell class="index" {compact}>

package/dist/ui/components/TableSubtotalRow.svelte

@@ -4,15 +4,22 @@
   import {formatValue, getFormatObjectFromString} from '../component-utilities/formatting.js'
   import TableCell from './TableCell.svelte'
 
-  export let groupName: string | undefined = undefined
-  export let currentGroupData: any[] = []
-  export let columnSummary: any[] = []
-  export let rowColor: string | undefined = undefined
-  export let groupBy: string | undefined = undefined
-  export let groupType: 'accordion' | 'section' | undefined = undefined
-  export let fontColor: string | undefined = undefined
-  export let orderedColumns: any[] = []
-  export let compact: boolean | string | undefined = undefined
+  interface Props {
+    groupName?: string
+    currentGroupData?: any[]
+    columnSummary?: any[]
+    rowColor?: string
+    groupBy?: string
+    groupType?: 'accordion' | 'section'
+    fontColor?: string
+    orderedColumns?: any[]
+    compact?: boolean | string
+  }
+
+  let {
+    groupName = undefined, currentGroupData = [], columnSummary = [], rowColor = undefined,
+    groupBy = undefined, groupType = undefined, fontColor = undefined, orderedColumns = [], compact = undefined,
+  }: Props = $props()
 </script>
 
 <tr class="subtotal-row" style:background-color={rowColor} style:color={fontColor}>

package/dist/ui/components/TableTotalRow.svelte

@@ -4,14 +4,21 @@
   import {safeExtractColumn, weightedMean} from '../component-utilities/tableUtils'
   import {formatValue, getFormatObjectFromString} from '../component-utilities/formatting.js'
 
-  export let data: any[] = []
-  export let rowNumbers: boolean | string | undefined = undefined
-  export let columnSummary: any[] = []
-  export let rowColor: string | undefined = undefined
-  export let fontColor: string | undefined = undefined
-  export let groupType: 'accordion' | 'section' | undefined = undefined
-  export let orderedColumns: any[] = []
-  export let compact: boolean | string | undefined = undefined
+  interface Props {
+    data?: any[]
+    rowNumbers?: boolean | string
+    columnSummary?: any[]
+    rowColor?: string
+    fontColor?: string
+    groupType?: 'accordion' | 'section'
+    orderedColumns?: any[]
+    compact?: boolean | string
+  }
+
+  let {
+    data = [], rowNumbers: rowNumbersProp = undefined, columnSummary = [], rowColor = undefined,
+    fontColor = undefined, groupType = undefined, orderedColumns = [], compact: compactProp = undefined,
+  }: Props = $props()
 
   const toBool = (value: boolean | string | undefined) => {
     if (value === undefined) return false
@@ -23,13 +30,13 @@
     return Boolean(value)
   }
 
-  rowNumbers = toBool(rowNumbers)
-  compact = toBool(compact)
+  let rowNumbers = $derived(toBool(rowNumbersProp))
+  let compact = $derived(toBool(compactProp))
 </script>
 
 <tr class="total-row" style:background-color={rowColor} style:color={fontColor}>
   {#if rowNumbers && groupType !== 'section'}
-    <TableCell class="index" {compact} topBorder="1px solid rgba(107, 114, 128, 0.5)" />
+    <TableCell class="index" {compact} topBorder="1px solid rgba(107, 114, 128, 0.5)"></TableCell>
   {/if}
 
   {#each orderedColumns as column (column.id)}

package/dist/ui/components/TextInput.svelte

@@ -1,30 +1,33 @@
 <script lang="ts">
-  import {onMount} from 'svelte'
   import {toBoolean} from '../component-utilities/inputUtils'
 
-  export let name: string
-  export let title: string | undefined = undefined
-  export let label: string | undefined = undefined
-  export let description: string | undefined = undefined
-  export let placeholder: string = 'Type to search'
-  export let defaultValue: string | undefined = undefined
-  export let hideDuringPrint: boolean | string = true
-  export let unsafe: boolean | string = false
+  interface Props {
+    name: string
+    title?: string
+    label?: string
+    description?: string
+    placeholder?: string
+    defaultValue?: string
+    hideDuringPrint?: boolean | string
+    unsafe?: boolean | string
+  }
 
-  let value = defaultValue || ''
+  let {
+    name, title = undefined, label = undefined, description = undefined,
+    placeholder = 'Type to search', defaultValue = undefined, hideDuringPrint = true, unsafe = false,
+  }: Props = $props()
 
-  $: hidePrint = toBoolean(hideDuringPrint)
-  $: allowUnsafe = toBoolean(unsafe)
-  $: displayLabel = title || label
+  // svelte-ignore state_referenced_locally - intentionally capturing initial value only
+  let value = $state(defaultValue ?? '')
 
-  onMount(() => {
-    pushValue(value)
-  })
+  let hidePrint = $derived(toBoolean(hideDuringPrint))
+  let allowUnsafe = $derived(toBoolean(unsafe))
+  let displayLabel = $derived(title || label)
 
-  $: if (defaultValue !== undefined && defaultValue !== value && !value) {
-    value = defaultValue
+  // Push value changes to parent
+  $effect(() => {
     pushValue(value)
-  }
+  })
 
   function sanitize (input: string): string {
     if (allowUnsafe) return input
@@ -57,7 +60,7 @@
     type="text"
     value={value}
     placeholder={placeholder}
-    on:input={onInput}
+    oninput={onInput}
   />
 </div>