catsjuice / dockbar

A macOS-like dock component made with WebComponents

dockbar's Issues

feat proposal: a divider between the dock-items

expected

a divider like Mac OS dock bar divider as following

implementation discussion

• Should it be a component like dock-divider?
• Or a prop on the dock-item?
• other choices

Formatting HTML Breaks This Package

Issue: Formatting HTML Breaks This Package

Description
When formatting the HTML(usually done by VS Code's auto formatting), the component does not behave as expected. The issue occurs when the HTML is formatted with indents and newline characters. The non-formatted version of the HTML works fine, but after formatting, the functionality breaks.

Steps to reproduce

1. In packages/dockbar/index.html, add a new hardcoded dock-item in the dock wrapper

   <dock-wrapper class="glass" id="dock">
   	<dock-item><div class="my-item full flex-center">T</div></dock-item>
   </dock-wrapper>
   

   this went well as expected

2. Format the code above as

   <dock-wrapper class="glass" id="dock">
     <dock-item>
       <div class="my-item full flex-center">T</div>
     </dock-item>
   </dock-wrapper>
   

   then the dock became static with wrong styles.
   

Environment

• OS: macOS Ventura & Ubuntu 22 LTS
• Node Version: 20.4.0
• pnpm version: 8.6.6
• Browser: Chrome
• Package Version: 0.1.0

Additional context
I initially encountered this issue when using VS Code, which automatically formats HTML on save. This issue could be a major inconvenience for developers who have auto-formatting enabled in their IDEs.

Is it a better way to add framework-oriented dts files for better typescript support?

I tried this fantastic dockbar in React and it's my first time to use Web Component in React.

issue

I need to add the following type definitions for better use and I still can't get the right props.

declare namespace JSX {
  interface IntrinsicElements {
    "dock-wrapper": any
    "dock-item": any
  }
}

expectation

Is it a better way that the repo offers dts files?
Or it is just my turn to add them to my repo?

optimize publish related settings

Situation

In #9, it fixes the playground import in a hacked way which adds the ./dist field of the exports in the package.json.

Alternative solution

I think adding a files field in the package.json is a better solution.

• remove the ./dist of the publish() in the .build.mjs
• add files in the package.json

  {
    "files": ["dist"]
  }

• update related fields in the package.json such as exports, main, module, and types
• pnpm build and can also run npm pack --dry-run to see the tarball contents if need
• change the import statements in the playground

After doing the above, I think the imports and exports are unified.

the dockbar doesn't display in the playground

issue

When I open the playground, the dockbar doesn't display. The error is following

try

It seems related to this commit 6a700ea.

So what's wrong with the export definition including dist ?

Mouse move over gap will still trigger blur event when direction is vertical

This issue is related to #1 , it's not working with direction: "vertical"

Mouse move over gap will trigger `blur` event

CleanShot.2023-07-14.at.23.29.58.mp4