Skip to content

Latest commit

 

History

History
68 lines (63 loc) · 6.61 KB

README.md

File metadata and controls

68 lines (63 loc) · 6.61 KB
Raw

Svelte-Toy-2

Current Svelte-Toy Repo is not working so cannot create a pull request, seems to be packaging issue for side-menu. This represents a pretty extensive rewrite of svelte-toy trying to stay true to the original with detailed documentation of Fixes, Changes, and New functionality. As requested, it is updated to use Angus just set - https://www.npmjs.com/package/just-safe-set/v/2.2.0?activeTab=readme instead of much larger lodash.set. Hopefully this can be merged.

Open in StackBlitz

Changes

  • CHANGE: brought side-menu into this package as temporary fix. Tried not to change the side-menu package as it is expected that it will return to an import. noted changes: FIX: changed scale for sideMenu.active from 1.05 to 1 to prevents cascasding overflow issues. NEW: added no-select CSS for nub
  • FIX: previously empty stores (store = writable()) would crash the app
  • FIX: custom var (--ease-in-out=quint) was never defined, as such no animation of section chevron click, just hardcoded transition
  • CHANGE: in Row changed value display to include {:else} as fallthrough to handle more types (string, function, etc).
  • CHANGE: renamed isOpen to isSectionOpen to be more clear
  • CHANGE: Extracted out new Component Key. It was used many times/redundant
  • CHANGE: Extracted out Input
  • CHANGE: replaced input with contenteditable div, allowing for expansion focus, ellipsis on overflow-y, handles HTML, limits to numbers when type number
  • CHANGE: Within Row combined similar code of display of Arrays and Objects for code simplification
  • CHANGE: updateStore function is now a custom store method (toyStore.updateExternalStores) imported rather than prop drilling. It's as used in both Input and Key. Can send value="null" to delete
  • CHANGE: removed simple prop and required prop drilling, now determined in where needed by typeof store === 'object'

MAJOR NEW FUNCTIONALITY

  • NEW: Now uses Angus just-safe-set as well as get. Major difference, arrays handled like a.1 instead of a[1]
  • NEW: optional Toy component param openOnLoad allowing for inital store to be one based on order of register param <Toy register={{ store, simple, empty }} openOnLoad={[0,1]}> would open store and simple on load.
  • NEW: Added support to optional Advanced Editing: CRUD - add/delete store items and reorder store arrays
  • NEW: Filter stores by key and/or value with optional auto-expand/collapse store sections, and clear button for filter
  • NEW: Can collapse objects and arrays to single line
  • NEW: Optional: <Toy openOnLoad={[0, 1]} /> prop to open sections on load based upon index
  • NEW: Optional: Key label temporarily highlighted when store items are updated with optional auto-expand section containing updated item
  • NEW: Optional: Hotkey access to toggle Sidemenu (ctrl-s)
  • NEW: Optional: HotKey access to toggle expand/collapse all stores (ctrl-e)
  • New: Optional: HotKey access to open Toy if closed, and focus within search (ctrl-f)
  • NEW: Added $toyStore store for settings and it syncs with localStorage for persistence (SSR capable). Hover over settinhgs keys gives tooltip explanation. Up/Down chevrons adjust global font size. $toyStore.flashUpdates: Store keys are highlighted when values update and when keys/values match filter. $toyStore.autoExpand: Filtered, or updated store values cause their store section containing the store to be auto-expanded. $toySrore.advancedEdit: Enables advanced editing of store values. Supports add/remove items, as well as reordering arrays. $toyStore.hotKeys: Enables hotkeys for common actions. Ctrl-S: show/hide Svelte-Toy, Ctrl-E: expand/collapse all stores, Ctrl-F: go to filter. $toySTore.pxFontSize: Sets the font size in pixels for the store data. $toyStore.updateExternalStore method. allows to update and delteing external store keys. %toyStore.sortByKey allows optional alphabetic sort of a stores keys.

MINOR NEW FUNCTIONALITY

  • NEW: more transitions and animations
  • NEW: Added decorative [] for arrays and {} for objects
  • NEW: Added decorative commas
  • NEW: Added decorating quotes for strings, calls attention to their type
  • NEW: Custom Toggle component replacing native checkboxes, checkboxes were visually jarring as unthemed
  • NEW: added CSS custom vars --toy-nested-indent, --toy-key-flash-color, --toy-key-flash-bg
  • NEW: Within store header, Hover over 'i' shows whole store, and Doubleclick on 'i' will copy entire store's value to clipboard
  • NEW: Within store header, Hover over 'fx' in header shows store methods
  • NEW: Hover over a store's individual value and it displays the entire value without focusing (useful for long strings which have been overflow hidden)
  • NEW: Hover over a key a shows values type, informs of double click option to copy that item's value to clipboard
  • NEW: Applied no-select CSS to all keys, values, and store headers, preventing accidental selection when trying to double click, etc

*** STILL TODO

  • TODO: CSS: in serious need CSS cleanup, renaming css vars, currently using state-mang/toy/sidebar, and get confusing.
  • TODO: CSS: ToyGroup:147 more selectivity for chevron to avoid !important, I think problem stems from being within :global(), failed :global(h4 span.chevron.isSectionOpen)
  • TODO: CSS: custom/themed vertical srollbar would be nice. smaller size beneficial too.
  • TODO: CSS: size of toggle doesn't adjust to $toyStore.pxFontSize, implementation a little bit of a CSS nightmare.
  • TODO: CSS: Clear button on filter on vertically aligned with changing font-sizes
  • TODO: CSS: in Key the +/- button seen while hovering at root of objects/arrays, changes sizes depending on + or -, force width = height so basing off var(--state-tool-font-size) to fix?
  • TODO: needs support for Sets, current shows empty object, breaks on additions, will need iteration for display and custom handling add(), delete()
  • TODO: Input:30 contenteditable div uses on:blur to update store, but this is not ideal, on:input would be better but loses focus after 1st keystroke. Maybe some other way of binding?
  • TODO: Row:45 flip animation for array move/reorder works for some but not all arrays, not sure why (compArr move 2 up animates, but move 8 up does not.)
  • TODO: animations have some jank, see opening "Store" store and collpasing of complexObj
  • TODO: flashing implementation still has some quirks false/positives
  • TODO: chevron font sizing causes settings to open ToyGroup: 91 and 92
  • TODO: EmptyObj set to {} should not be expandable