General Bugfixes

[DreamlandOwO]

Is Tailwind preflight issue again.. When integate to app that use UI framework like element-plus, primary <button> just shows empty background when it suppose be blue. I did some search found out we can add prefix to preflight styles, so I did that.

It does generate some invalid funny styles but I don't see that gonna be a much issue, I just leave there.

style.css after formatted like:

.vuefinder *, :before, :after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb
}

.vuefinder :before, :after {
    --tw-content: ""
}

/* Dream comment: lmao */
.vuefinder html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji";
    font-feature-settings: normal;
    font-variation-settings: normal;
    -webkit-tap-highlight-color: transparent
}

/* Dream comment: buddy there's no such body for you */
.vuefinder body {
    margin: 0;
    line-height: inherit
}

.vuefinder hr {
    height: 0;
    color: inherit;
    border-top-width: 1px
}

.vuefinder abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
}

.vuefinder h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit
}

.vuefinder a {
    color: inherit;
    text-decoration: inherit
}

.vuefinder b, strong {
    font-weight: bolder
}

.vuefinder code, kbd, samp, pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
    font-feature-settings: normal;
    font-variation-settings: normal;
    font-size: 1em
}

.vuefinder small {
    font-size: 80%
}

.vuefinder sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

.vuefinder sub {
    bottom: -.25em
}

.vuefinder sup {
    top: -.5em
}

.vuefinder table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse
}

.vuefinder button, input, optgroup, select, textarea {
    font-family: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    margin: 0;
    padding: 0
}

.vuefinder button, select {
    text-transform: none
}

.vuefinder button, [type=button], [type=reset], [type=submit] {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none
}

/* ... */

Another one is related to ContextMenu, if parent component have style like this, it just breaks.

(replace .wrapper section in App.vue 's <style> to see yourself)

.wrapper {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 800px;
  margin: 100px auto;
}

I right click right side blank space, annnnd.. :

[n1crack]

Since we include the file, we can just copy it somewhere else and remove the unwanted styles.

[DreamlandOwO]

That we go, should be good now.

[n1crack]

made some changes, some strings should be added to lang files

[DreamlandOwO]

lgtm

[n1crack]

demo at vuefinder.ozdemir.be updated.

the next steps, when I have free time:

• the language selector can be in the settings.
• cleaning and refactoring the code.

thanks.