Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/stagas/x-spacer

custom element horizontal/vertical resizable spacer of arbitrary number of children
https://github.com/stagas/x-spacer
Last synced: 14 days ago
JSON representation
custom element horizontal/vertical resizable spacer of arbitrary number of children
Host: GitHub
URL: https://github.com/stagas/x-spacer
Owner: stagas
License: mit
Created: 2021-12-26T11:09:24.000Z (almost 3 years ago)
Default Branch: main
Last Pushed: 2022-08-01T14:46:25.000Z (over 2 years ago)
Last Synced: 2024-10-23T09:11:28.965Z (22 days ago)
Language: TypeScript
Size: 45.9 KB
Stars: 0
Watchers: 2
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project

README

        


x-spacer    





custom element horizontal/vertical resizable spacer of arbitrary number of children





npm i x-spacer 

pnpm add x-spacer 

yarn add x-spacer

## Examples

#  web  
    #  view source  example/web.tsx  

```tsx

/** @jsxImportSource sigl */

import $ from 'sigl'

import { SpacerElement } from 'x-spacer'

const horiz = ['#040', '#004', '#505', '#770']

const vert = ['#040', '#004', '#505', '#770']

import { Rect } from 'sigl'

import { SurfaceElement, SurfaceItemElement, SurfaceMoveElement, SurfaceResizeElement } from 'x-surface'

interface ItemElement extends $.Element {}

@$.element()

class ItemElement extends $(SurfaceItemElement) {

  SurfaceMove = $.element(SurfaceMoveElement)

  SurfaceResize = $.element(SurfaceResizeElement)

  Spacer = $.element(SpacerElement)

  mounted($: ItemElement['$']) {

    $.render(({ host, surface, Spacer, SurfaceMove, SurfaceResize }) => (

      <>

        

          {/*css*/ `

          :host {

            box-sizing: border-box;

            border: 2px solid pink;

            display: block;

            position: absolute;

          }

          ${SurfaceMove} {

            background: #067;

            width: 100%;

            height: 20px;

            position: absolute;

          }

          ${SurfaceResize} {

            background: #ba2;

            position: absolute;

            right: 0;

            bottom: 0;

            width: 20px;

            height: 20px;

          }

          ${Spacer}::part(handle) {

            background: #0003;

          }

          div {

            display: flex;

            width: 100%;

            height: 100%;

          }

          `}

        

        

        

        

          


            

              {horiz.map(x => )}

            

          

          {vert.map(x => )}

        

      >

    ))

  }

}

interface SceneElement extends $.Element {}

@$.element()

class SceneElement extends HTMLElement {

  Surface = $.element(SurfaceElement)

  Item = $.element(ItemElement)

  items = new $.RefSet([

    { rect: new Rect(0, 0, 500, 500) },

    { rect: new Rect(700, 0, 500, 500) },

  ])

  mounted($: SceneElement['$']) {

    $.render(({ Surface, Item, items }) => (

      

        {items.map(item => )}

      

    ))

  }

}

const Scene = $.element(SceneElement)

$.render(

  <>

    

      {/*css*/ `

      ${Scene} {

        display: block;

        width: 100%;

        height: 100%;

        position: fixed;

      }

    `}

    

    

  >,

  document.body

)

```





## API

  #  SpacerElement      src/x-spacer.tsx#L72  
          #  constructor(args)        
      #  new SpacerElement()        


SpacerElement
        #  args        


any  []
        
  
    
#  $      src/sigl/dist/types/sigl.d.ts#L25  

Context<SpacerElement & JsxContext<SpacerElement> & Omit<{

    #  ctor        


Class<T>
        
  

<T>(ctor)   =>  



CleanClass<T>

  #  ctx        

T | Class<T>
        
  <T>(ctx)   =>  



Wrapper<T>

} & __module & {  #  Boolean      src/sigl/dist/types/index.d.ts#L9  


undefined | boolean
        
#  Number      src/sigl/dist/types/index.d.ts#L8  

undefined | number
        
#  String      src/sigl/dist/types/index.d.ts#L7  

undefined | string
        
}, "transition">>        #  __#2@#offsetHeight      src/sigl/dist/types/mixins/observed.d.ts#L6  

number
        
#  __#2@#offsetLeft      src/sigl/dist/types/mixins/observed.d.ts#L3  

number
        
#  __#2@#offsetTop      src/sigl/dist/types/mixins/observed.d.ts#L4  

number
        
#  __#2@#offsetWidth      src/sigl/dist/types/mixins/observed.d.ts#L5  

number
        
#  context      src/sigl/dist/types/sigl.d.ts#L26  

ContextClass<SpacerElement & JsxContext<SpacerElement> & Omit<{

    #  ctor        


Class<T>
        
  

<T>(ctor)   =>  



CleanClass<T>
  #  ctx        

T | Class<T>
        
  <T>(ctx)   =>  



Wrapper<T>
} & __module & {  #  Boolean      src/sigl/dist/types/index.d.ts#L9  


undefined | boolean
        
#  Number      src/sigl/dist/types/index.d.ts#L8  

undefined | number
        
#  String      src/sigl/dist/types/index.d.ts#L7  

undefined | string
        
}, "transition">>        
#  dim   =   ...    src/x-spacer.tsx#L87  

"height" | "width"
        
#  dispatch      src/sigl/dist/types/events.d.ts#L4  

Dispatch<#  (name, detail, init)        
        #  name        


Event | Narrow<K, string>
        
#  detail        

E
        
#  init        

CustomEventInit<any>
        
  

<K, E>(name, detail, init)   =>  

any

    
>        #  handleDown   =   ...    src/x-spacer.tsx#L192  

#  (e, index)        
        #  e        


PointerEvent
        
#  index        

number
        
  

(e, index)   =>  

void

    
        #  host      src/sigl/dist/types/sigl.d.ts#L24  

SpacerElement
        
#  items   =   ...    src/x-spacer.tsx#L83  

HTMLElement  []
        
#  maxDim   =   ...    src/x-spacer.tsx#L88  

"maxHeight" | "maxWidth"
        
#  onmounted        

EventHandler<SpacerElement, CustomEvent<any>>
        
#  onunmounted        

EventHandler<SpacerElement, CustomEvent<any>>
        
#  ownRect      src/sigl/dist/types/mixins/observed.d.ts#L15  

Rect
        
#  pcts   =   []    src/x-spacer.tsx#L81  

number  []
        
#  pos      src/sigl/dist/types/mixins/observed.d.ts#L13  

Point
        
#  position   =   ...    src/x-spacer.tsx#L86  

"top" | "left"
        
#  rect      src/sigl/dist/types/mixins/observed.d.ts#L12  

Rect
        
#  resizeItems   =   ...    src/x-spacer.tsx#L90  

Fn<[  named-tuple-member, named-tuple-member, named-tuple-member  ], void>
        
#  resizeTo   =   ...    src/x-spacer.tsx#L169  

#  (index, size)        
        #  index        


number
        
#  size        

number
        
  

(index, size)   =>  

true

    
        #  reverseOnOrientationChange   =   false    src/x-spacer.tsx#L78  

boolean
        
#  root   =   ...    src/x-spacer.tsx#L73  

ShadowRoot
        
#  size      src/sigl/dist/types/mixins/observed.d.ts#L14  

Point
        
#  sizes   =   []    src/x-spacer.tsx#L80  

number  []
        
#  state   =   ...    src/x-spacer.tsx#L75  

State<SpacerElement, {

  #  Idle   =   'spaceridle'      


string
        
#  Resizing   =   'spacerresizing'      

string
        
}, string> & EventMethods<SpacerElement, {}> & InlineEventMap<SpacerElement, {}>        
#  surface      src/x-spacer.tsx#L84  

SurfaceElement
        
#  vertical   =   false    src/x-spacer.tsx#L76  

boolean
        
#  __#2@#updateOffsets()                  

__#2@#updateOffsets()   =>  

void
    
#  created(ctx)                #  ctx        


Context<SpacerElement & JsxContext<SpacerElement> & Omit<{

    #  ctor        


Class<T>
        
  

<T>(ctor)   =>  



CleanClass<T>

  #  ctx        

T | Class<T>
        
  <T>(ctx)   =>  



Wrapper<T>
} & __module & {  #  Boolean      src/sigl/dist/types/index.d.ts#L9  


undefined | boolean
        
#  Number      src/sigl/dist/types/index.d.ts#L8  

undefined | number
        
#  String      src/sigl/dist/types/index.d.ts#L7  

undefined | string
        
}, "transition">>        
  created(ctx)   =>  
void
    #  mounted($)      src/x-spacer.tsx#L241          #  $        


Context<SpacerElement & JsxContext<SpacerElement> & Omit<{

    #  ctor        


Class<T>
        
  

<T>(ctor)   =>  



CleanClass<T>

  #  ctx        

T | Class<T>
        
  <T>(ctx)   =>  



Wrapper<T>
} & __module & {  #  Boolean      src/sigl/dist/types/index.d.ts#L9  


undefined | boolean
        
#  Number      src/sigl/dist/types/index.d.ts#L8  

undefined | number
        
#  String      src/sigl/dist/types/index.d.ts#L7  

undefined | string
        
}, "transition">>        
  mounted($)   =>  
void
    #  on(name)                #  name        


K
        
  

on<K>(name)   =>  



On<Fn<[  EventHandler<SpacerElement, LifecycleEvents & object  [K]>  ], Off>>
    
#  toJSON()                  

toJSON()   =>  



Pick<SpacerElement, keyof     SpacerElement>
    
#  SpacerState   =   ...    src/x-spacer.tsx#L52  

{

  #  Idle   =   'spaceridle'      


string
        
#  Resizing   =   'spacerresizing'      

string
        
}        


## Credits

- [sigl](https://npmjs.org/package/sigl) by [stagas](https://github.com/stagas) – Web framework

- [x-surface](https://npmjs.org/package/x-surface) by [stagas](https://github.com/stagas) – Infinitely pannable and zoomable HTML surface as a Web Component.

## Contributing

[Fork](https://github.com/stagas/x-spacer/fork) or [edit](https://github.dev/stagas/x-spacer) and submit a PR.

All contributions are welcome!

## License

MIT © 2022 [stagas](https://github.com/stagas)