naver / egjs-grid Goto Github PK

Description

TypeError when run 'type check' command

error TS2322: Type '{ gap: number; defaultDirection: string; columnRange: number[]; rowRange: number; sizeRange: number[]; isCroppedSize: boolean; displayedRow: number; autoResize: true; class: string; }' is not assignable to type 'ComponentProps<VueGridInterface<typeof JustifiedGrid>>'.
  Type '{ gap: number; defaultDirection: string; columnRange: number[]; rowRange: number; sizeRange: number[]; isCroppedSize: boolean; displayedRow: number; autoResize: true; class: string; }' is missing the following properties from type 'VueGridInterface<typeof JustifiedGrid>': $el, $_grid, $props, syncElements, and 6 more.

76     <JustifiedGrid

Steps to check or reproduce

"@egjs/vue-grid": "^1.11.2",
"vue": "^3.2.45"
"typescript": "^4.9.4",
"vite": "^4.0.4",
"vue-tsc": "^1.0.24"

Description

I want to keep the size even if the ratio is broken.

Steps to check or reproduce

Description

Trying to work this out through playing with it.

https://naver.github.io/egjs-grid/storybook/?path=/story/examples-framegrid--frame-grid-template

• default says 1,1,2,2,3,3,2,2,4,4,4,5 but when i put that in, there's a storybook form validation error (the input field is red) and nothing is rendered
• when i change it to [[1,1,2,2,3,3],[2,2,4,4,4,5]] then it renders

Looking at the resulting output

edit it just dawned on my that you're using frame to define named grid slots:

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template

Steps to check or reproduce

Description

naver/egjs-infinitegrid#464 (comment)

Steps to check or reproduce

Description

const grid = new FrameGrid();

grid.renderItems({
    outline: [100, 100],
});

Steps to check or reproduce

Description

Does not work with Sveltekit (via Vite).

Steps to check or reproduce

Install it on a fresh Sveltekit starter.

I tried adding as a devDep and an dep to no avail. I also tried adding the package to the vite's optimizeDeps in the sveltekit config, to no avail.

The priority that determines the weight of the item.

• weightPriority: "custom"
  • sizeWeight: 1,
  • ratioWeight: 1,
• weightPriority: "size"
  • sizeWeight: 100
  • ratioWeight: 1
• weightPriority: "ratio"
  • sizeWeight: 1
  • ratioWeight: 100

Description

item.style.height = "100px"; (render)
=> item.style.height = "0px"; (render)
=> item.style.height = "100px"; (not rendered)

Steps to check or reproduce

Description

I want to detect resize by applying ResizeObserver to items(children).

Steps to check or reproduce

Description

Steps to check or reproduce

Description

1. Calculates the size of unmounted items.
2. add gridData to status

Steps to check or reproduce

Description

No event occurs in react.

<MasonryGrid onRenderComplete={e => {
    console.log(e);
}} />

Steps to check or reproduce

Description

<!--item1 has the same size.-->
<div class="item item1" data-grid-size-group="1"></div>
<div class="item item1" data-grid-size-group="1"></div>
<!--item2 has the same size.-->
<div class="item item2" data-grid-size-group="2"></div>
<div class="item item2" data-grid-size-group="2"></div>

Steps to check or reproduce

Description

safari 15.3. Below, borderBoxSize and contentBoxSize do not exist.

Steps to check or reproduce

Description

naver/egjs-infinitegrid#494 (comment)

Steps to check or reproduce

Description

Steps to check or reproduce

Description

<div class="container" style="border: 3px solid black; box-sizing: border-box">
    <div></div>
    <div></div>
    <div></div>
</div>

Steps to check or reproduce

Description

gridRef.current!.getContainerElement();

<JustifiedGrid tag="ul" ref={gridRef}>
    <li class="item"></li>
</JustifiedGrid>

and I want to know the container element of the corresponding Grid.

Steps to check or reproduce

Description

<div class="container" style="overflow: hidden;">
<!-- row 1 -->
    <div class="item"></div>
    <div class="item"></div>
<!-- row 2 -->
    <div class="item"></div>
<!-- row 3 -->
    <div class="item"></div>
</div>

I want to display only row 2 on the screen.

Steps to check or reproduce

Description

Running a toy example of egjs-grid for svelte, and I'm getting the error in the title.

Steps to check or reproduce

    import { JustifiedGrid } from "@egjs/svelte-grid";
  
    const gap = 5;
    const defaultDirection = "end";
    const rowRange = 0;
    const columnRange = [1,8];
    const sizeRange = [200,1000];
    const isCroppedSize = false;
    const displayedRow = -1;
  </script>
  
  <JustifiedGrid
    class="container"
    {defaultDirection}
    {gap}
    {rowRange}
    {columnRange}
    {sizeRange}
    {isCroppedSize}
    {displayedRow}
  >
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
  </JustifiedGrid>```

Description

When using egjs/react-grid, the container of MasonryGrid is set to div by default. Can I change this to ul?

Description

naver/egjs-flicking#555

Steps to check or reproduce

Description

If it is unmounted and then mounted, it does not appear properly.

Steps to check or reproduce

Description

Hey y'all. The issue I'm experiencing is that on first render MasonryGrid comes through undefined causing my app to crash. I've fixed the issue by adding a {Boolean(MasonryGrid) && ...(<MasonryGrid>.... where I'm using the library but that seems odd. I'm putting this here to see if anyone else is experiencing the issue or if this is a known problem.

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Steps to check or reproduce

I'm just importing MasonryGrid into my react component and using it with "gap" and "column" props.

When using native lazy loading, the width and height are rendered abnormally.

<img src="..." loading="lazy" />

Description

grid.on("renderComplete", e => {
    console.log(e.direction);
});

Steps to check or reproduce

Description

1. InfiniteGrid's element is placed at left: -9999, top: -9999 with transition
2. Set InfiniteGrid's element to Grid's poses.
3. It is expressed as if the item is flying through the transition.

Steps to check or reproduce

Description

Steps to check or reproduce

Description

Steps to check or reproduce

Description

The mountState of an item that is not actually inserted is incorrect.

Steps to check or reproduce

Description

<div class="item" style="width: 50%"></div>
<div class="item" style="width: 50%"></div>

Steps to check or reproduce

Description

Steps to check or reproduce

Description

I am trying to implement a masonry layout using the svelte package but it doesn't align anything, it doesn't even modify the children

Steps to check or reproduce

<MasonryGrid column={4} columnSize={200} align={'end'}>
      {#each category.posters as card}
        <Card {card} />
      {/each}
    </MasonryGrid>

Description

Images are rendered but as a list instead of a grid. Also, console gives some errors:

[HMR][Svelte] Unrecoverable HMR error in <App>: next update will trigger a full reload proxy.js:15:11
    logError http://localhost:5173/node_modules/svelte-hmr/runtime/proxy.js?v=1b726137:15
    Proxy<App> http://localhost:5173/node_modules/svelte-hmr/runtime/proxy.js?v=1b726137:380
    <anonymous> http://localhost:5173/src/main.js:4

Uncaught TypeError: options.props is undefined
    JustifiedGrid JustifiedGrid.js:11
    instance Grid.svelte:51
    run index.mjs:20
    mount_component index.mjs:1953
    flush index.mjs:1191
    init index.mjs:2048
    App App.svelte:426
    createProxiedComponent svelte-hooks.js:341
    ProxyComponent proxy.js:242
    Proxy<App> proxy.js:349
    <anonymous> main.js:4

Uncaught (in promise) TypeError: grid is undefined

Steps to check or reproduce

Using a clean svelte + vite project (no sveltekit)

1.- Create new svelte project with vite

npm create vite@latest

select vanilla svelte and javascript

2.- Replace App.svelte contents file with storybook example

Versions

Node: v18.12.1
Svelte: 3.54.0
egjs-grid: 1.11.2

Description

Steps to check or reproduce

Description

The ratio of invisible items in InfiniteGrid is strange.

Steps to check or reproduce

Description

Some of the APIs are Vue3.

function render(_ctx, _cache, $props, $setup, $data, $options) {
  return vue.openBlock(), vue.createBlock("div", _hoisted_1, [vue.renderSlot(_ctx.$slots, "default")], 512
  /* NEED_PATCH */
  );
}

Steps to check or reproduce

Description

I want to keep the ratio as an element rather than an offset in JustifiedGrid

• before

<div class="item" data-grid-content-offset="40">
    <img />
</div>

• after

<div class="item">
    <img data-grid-maintained-target=""/>
</div>

Steps to check or reproduce

Description

grid.renderItems({
    outline: [100]
});
// prevent moving to the top 0

Steps to check or reproduce

Description

this is a bug?
desc: the gap now work when loading,only work when loaded completely

Steps to check or reproduce

use @egjs/react-grid package will show this problem

Description

ColumnSize of MasonryGrid changes css style.
naver/egjs-infinitegrid#458

Steps to check or reproduce

Description

It seems to be similar with naver/egjs-infinitegrid#505 (comment)

this is error log

/* empty css                                                    */import { MasonryGrid as MasonryGrid$1 } from "@egjs/grid";
                                                                           ^^^^^^^^^^^
SyntaxError: Named export 'MasonryGrid' not found. The requested module '@egjs/grid' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@egjs/grid';
const { MasonryGrid: MasonryGrid$1 } = pkg;

Steps to check or reproduce

update to svelte-kit latest version
and npm run build

Description

0 is recognized as false and sizeGroup does not operate.

Steps to check or reproduce

Description

Steps to check or reproduce

HI? when i upload my component it has height: 34px;

How to updated, and were i have get found the doxs for vue 3 ?

Description

Support re-render for align stretch

Steps to check or reproduce

Description

naver/egjs-infinitegrid#494

Steps to check or reproduce

Description

naver/egjs-infinitegrid#482

ig.on("contentError", e => {
    console.log(e.item.element, e.target);
});

Steps to check or reproduce

Description

Justified grid doesn't re-render items if their sizes change.

Steps to check or reproduce

I fetch multiple images but the initial grid stays, how do I re-render the grid to dynamically resize every item if they change?

My code:

...
const [images, setImages] = useState<any[]>([])

...

<JustifiedGrid
  gap={5}
  defaultDirection={"end"}
  align={'justify'}
  columnRange={[1,4]}
  rowRange={0}
  sizeRange={[100,500]}
  isCroppedSize={false}
  displayedRow={-1}
  useResizeObserver={true}
  observeChildren={true}
  autoResize={true}
>
  {images.map((x: any, index: number) => (
    <div key={index} className='w-full overflow-hidden'>
      <Image src={x?.url} alt='' className='' />
    </div>
  ))}
</JustifiedGrid>

Here's the result:

Description

<div class="item">
    <img />
    <div class="title">Item 1</div>
</div>

I want to calculate ratio excluding the title area.

Steps to check or reproduce