Currently the checkbox component does not work as expected. Normally the input element of type checkbox can work with arrays referenced in v-model by adding and removing its value from the array, gb-checkbox just coerces whatever is in the value property to a boolean by using the ! operator and following that, it overwrites the array.

Inspiration: https://polaris.shopify.com/components/images-and-icons/icon/source

Inspiration: https://polaris.shopify.com/components/actions/button

[Vue warn]: Invalid prop: type check failed for prop "fullWidth". Expected Boolean, got String with value "false".

As shown in the image below.

https://puu.sh/BUuaO/e3799d0f5d.png

Running Windows 10 on Chrome 70.

I already tried this code, nothing happend.
What should i do?

<gb-select v-model="id" :options="options" :searchable="true" />

<style scoped>
.gb-field-select {
  max-height: 400px !important;
}
</style>

Inspiration: https://polaris.shopify.com/components/actions/action-list

Inspiration: https://polaris.shopify.com/components/feedback-indicators/banner#navigation

Inspiration: https://polaris.shopify.com/components/actions/button

What problem does this feature solve?

This feature request is to add a new alert component kind of like this.

What is your proposed solution?

An alert component <dm-alert> with this props:

Note: I already have the code and I will make a PR to see if you approve it.

Console error-

Env -
Windows 10
VSCode
Nuxt 3.0.0-rc.9 with Nitro 0.5.3
Vue 3
Yarn

[nuxt] [request error] [unhandled] [500] Cannot read properties of undefined (reading '$gb')
at Object.install (C:\Users\Dharmang\Desktop\resonate-nuxt\node_modules@growthbunker\vuedarkmode\dist\vuedarkmode.ssr.js:3138:22)
at Object.use (C:\Users\Dharmang\Desktop\resonate-nuxt\node_modules@vue\runtime-core\dist\runtime-core.cjs.js:4329:28)
at C:/Users/Dharmang/Desktop/resonate-nuxt/plugins/vuedarkmode.ts:6:18
at fn (C:/Users/Dharmang/Desktop/resonate-nuxt/node_modules/nuxt/dist/app/nuxt.mjs:128:27)
at Object.callAsync (/C:/Users/Dharmang/Desktop/resonate-nuxt/node_modules/unctx/dist/index.mjs:49:19)
at callWithNuxt (C:/Users/Dharmang/Desktop/resonate-nuxt/node_modules/nuxt/dist/app/nuxt.mjs:130:23)
at applyPlugin (C:/Users/Dharmang/Desktop/resonate-nuxt/node_modules/nuxt/dist/app/nuxt.mjs:74:29)
at Module.applyPlugins (C:/Users/Dharmang/Desktop/resonate-nuxt/node_modules/nuxt/dist/app/nuxt.mjs:84:11)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async createNuxtAppServer (C:/Users/Dharmang/Desktop/resonate-nuxt/node_modules/nuxt/dist/app/entry.mjs:30:7)

Input, textarea and select have focus style.
Checkbox, radio and switch don't show which one I am toggling.

Not working

import Vue from "vue"
import VueDarkMode from "@growthbunker/vuedarkmode"

Vue.use(VueDarkMode)

Actual main.js includes only

import { createApp } from 'vue'

import App from './App.vue'
createApp( App ).mount( '#app' )

i've tried

import { createApp, Vue } from 'vue'

import App from './App.vue'
createApp( App ).mount( '#app' )

import VueDarkMode from "@growthbunker/vuedarkmode"
Vue.use(VueDarkMode)

but with no luck.. getting just white screen

Uncaught TypeError: Cannot read properties of undefined (reading '$gb')
    at Object.e2 [as install] (vuedarkmode.esm.js:1:230169)
    at Object.use (runtime-core.esm-bundler.js:3808:28)
    at main.js:8:4

https://github.com/monterail/vuelidate

Edit text explaining purpose of CHANGELOG.md to be more concise for readers.

I'm not sure if i did anything wrong or not but nothing changes with switch button.

Code

app.js

require('./bootstrap');
window.Vue = require('vue');
import VueDarkMode from "@growthbunker/vuedarkmode";
Vue.use(VueDarkMode);

import VueAxios from 'vue-axios';
import axios from 'axios';
Vue.use(VueAxios, axios);

import App from "./components/App";
import router from './router.js';

const app = new Vue({
    el: '#app',
    router,
    render: (h) => h(App)
});

App.vue My main component(all routes open in here)

<template>
    <div class="container">
        <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <router-link to="/" class="nav-link">Home</router-link>
            </li>
            <li class="nav-item">
                <router-link :to="{name: 'about'}" class="nav-link">About</router-link>
            </li>
        </ul>
        <ul class="navbar-nav">
            <li class="nav-item">
                <gb-toggle theme="dark" />
            </li>
        </ul>
        </nav><br />
        <div>
            <transition name="fade">
                <router-view></router-view>
            </transition>
        </div>
    </div>
</template>

<style>
    .fade-enter-active, .fade-leave-active {
      transition: opacity .5s
    }
    .fade-enter, .fade-leave-active {
      opacity: 0
    }
</style>

<script>
    export default {
        mounted() {
            // console.log('Component mounted.')
        }
    }
</script>

Any idea?

Inspiration: https://polaris.shopify.com/components/feedback-indicators/spinner#navigation

Inspiration: https://polaris.shopify.com/components/actions/button-group#navigation

Inspiration: https://polaris.shopify.com/components/feedback-indicators/progress-bar#navigation

What problem does this feature solve?

I did a few days ago the progress bar indeterminate for PSone.css. If you think this is a good addition I can do it here aswell.

What is your proposed solution?

A new prop (indeterminate) that would be a boolean (default: false) that when is true the progress add's an indeterminate animation that will ultimately ignore the progress prop.

What problem does this feature solve?

Basically I think it would be nice to click an icon and have the icon name copied to clipboard inside the docs #baseIcon.

What is your proposed solution?

The only way I know how to do with plain JS it's to add an @click that calls a method inside the GuideBaseIcons.vue, create a temporarily textarea element, copy the icon's name to that textarea, exec the copy command and remove the textarea.

Note: If you want this feature request I the code for this, and I can make a PR for you to see.

If the user clicks on the arrow in a select box, the select box won't respond to the user click. A simple solution might be to add pointer-events: none; on the arrow.

Inspiration: https://polaris.shopify.com/components/actions/button

Inspiration: https://polaris.shopify.com/components/feedback-indicators/toast#navigation

Basically, you can't insert zeros using the input field in <gb-input-numeric/> making it so you can't really input any number that contains a 0. The issue is reproducible the number inputs at vuedarkmode website. Try to input 100, for instance.

Users can technically get around it by for example inputting 9 and then click the plus to make it 10. Although that is kind of a bad example if the value starts from 0, because you can insert caret in front of the 0 and input 1.

If I had to throw in a wild guess, I'd say this was perhaps done on purpose to avoid leading zeros but it ended up doing more than that.

P.S. I'm also not super happy with how text selection has no background color in number inputs. Easily overridable, but still...

P.P.S. I tried to link directly to the number inputs in the docs: https://www.growthbunker.dev/vuedarkmode/#fieldInputNumeric but I guess since there's an "auto focus" on the newsletter input, it's not possible because it jumps to the top. This was happening in Chrome (v.91.0.4472.77) but interestingly not in Firefox (v.89.0).

If I am using this - this does not provide things like sections or rows or a responsive full screen hero section like bootstrap or bulma.

Is the expectation that the dev will hand implement it themselves? Or they will pull in something else as well?

How can I make switch button for dark and light mode?