Hi,

i have tried to install inkline with your new installation guide but its not working. At the end you talk about editing files in src folder which is not existing. It looks like you just copied over the guide from vue?!?!

This would probably increase adoption.

I wrote the project styles in Stylus simply because it's what I expected the SASS Indented syntax to be.

SASS ended up being the most used and appreciated option in State of CSS, while Stylus is the last. https://2019.stateofcss.com/technologies/pre-post-processors/

Everything written in Stylus would probably require minor changes to be turned into SASS (indented syntax).

Should we switch to SASS?

• What is the expected and current behavior? Current Behavior: Linking and Routing when using to or :to does not work, but using href still works. When Clicking on the component, one is not send to the other page. The Link preview on hover in the browser does not work. There is no error thrown.

• Steps to reproduce Use a component like IButton, INavItem, INavBrand, etc. and use to="" or :to="{}" to link to another page.

• Please tell us about your environment:

  • Version: >=4.0.0-beta.9
  • Browser: all
  • Language: TypeScript

• Other information There is no error message ._.

• I'm submitting a:

  • [x] Bug Report

• What is the current behavior? The navbar nav placement does not work

• What is the expected behavior? The should be positionned on the right of the navbar It seems that some classes are missing

<i-navbar-brand to="/">FLOWOLF</i-navbar-brand>
  <i-navbar-items class="_justify-content-end">
    <i-nav>
      <i-nav-item :to="{ name: 'index' }">Home</i-nav-item>
      <i-nav-item :to="{ name: 'about' }">About</i-nav-item>
      <i-nav-item :to="{ name: 'contact' }">Contact</i-nav-item>
    </i-nav>
</i-navbar-items>

The result is that the is still on the left of the navbar.

• Please tell us about your environment:

  • Version: 1.0.0
  • Browser: [Chrome Version 73.0.3683.103 (Build officiel) (64 bits) ]
  • Language: [VueJS]

• Other information I simply execute npm install @inkline/inkline

• I'm submitting a:

  • [x] Bug Report

• Steps to reproduce Here is a minimal repository (and ordered commits) showing the steps that I took.

https://github.com/agarbutt/vue-cli-ts-inkline

1. follow the "Vue CLI Getting started instructions"
2. npm run serve

• What is the expected behavior? I believe we expect to have a running Vue app.

• What is the current behavior? Multiple compiler failures from webpack. It seems to fail when loading / parsing the components provided in the package @inkline/inkline

• Please tell us about your environment:

  • Version: 3.0.6
  • Browser: [n/a]
  • Language: [TypeScript ~4.1.5 | ES6/7 ]
  • Vue CLI: @vue/cli 4.5.15
  • Vue: [email protected]

• Other information Detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc.

This is an example of the errors dumped to the console. ` error in ./node_modules/@inkline/inkline/components/IDropdown/components/IDropdownItem/script.mjs?vue&type=script&lang=js

Module parse failed: Unexpected token (88:38) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | methods: { | onClick(event) {

        this.dropdown.onItemClick?.(this, event);

| } | }

@ ./node_modules/@inkline/inkline/components/IDropdown/components/IDropdownItem/script.mjs?vue&type=script&lang=js 1:0-65 1:0-65 1:66-120 1:66-120 @ ./node_modules/@inkline/inkline/components/IDropdown/components/IDropdownItem/index.vue @ ./node_modules/@inkline/inkline/components/IDropdown/components/index.mjs @ ./node_modules/@inkline/inkline/components/index.mjs @ ./node_modules/@inkline/inkline/inkline.mjs @ ./src/main.ts @ multi (webpack)-dev-server/client?http://192.168.1.10:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts `

Here you can track the progress on Inkline 3, the Vue 3 rewrite that will keep all of the awesome features of version 2, but has some huge improvements under the hood.

Changelog:

• Development workflow using Vite
• Build workflow using Vue CLI
• Hybrid SASS and CSS Variables with fine-grained design control
• Overall component UI, UX and DX improvements

• I'm submitting a:

  • [ ] Bug Report
  • [X] Feature Request

• What is the current behavior? I would like to be able to control collapsing the items when an item is clicked. Right now it remains collapsed even after you clicked 1 item.

• What is the expected behavior? (If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem** viahttps://plnkr.co or similar.)

• Please tell us about your environment:

  • Version: 1.0.0
  • Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  • Language: [all | TypeScript X.X | ES6/7 | ES5 | Dart]

• Other information (Detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc.)

• I'm submitting a:

  • [ ] Bug Report
  • [x] Feature Request

[email protected] has been released and can be found under @popperjs/core. Update the PopupProviderMixin.vue file.

• I'm submitting a:

  • [*] Bug Report
  • [ ] Feature Request

• What is the current behavior?

Treeshaking compiling produces error as below:

Module parse failed: Unexpected token (5:14) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | | export class PopupManager {

instances = {};

| modalStack = []; | zIndex = 1000;

@ ./node_modules/@inkline/inkline/src/helpers/index.js 21:0-57 21:0-57 @ ./node_modules/@inkline/inkline/src/components/Select/script.js?vue&type=script&lang=js& @ ./node_modules/@inkline/inkline/src/components/Select/script.js?vue&type=script&lang=js& @ ./node_modules/@inkline/inkline/src/components/Select/index.vue @ ./node_modules/@inkline/inkline/src/components/index.js @ ./node_modules/@inkline/inkline/src/index.js

• Please tell us about your environment:

  • Version: 1.0.0
  • Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

• package.json file

{ "name": "inkline.test", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { "@inkline/inkline": "^1.16.12", "core-js": "^2.6.5", "vue": "^2.6.10", "vue-router": "^3.0.3", "vuex": "^3.0.1" }, "devDependencies": { "@vue/cli-plugin-babel": "^3.11.0", "@vue/cli-plugin-eslint": "^3.11.0", "@vue/cli-service": "^3.11.0", "babel-eslint": "^10.0.1", "eslint": "^5.16.0", "eslint-plugin-vue": "^5.0.0", "node-sass": "^4.12.0", "sass-loader": "^8.0.0", "sass-resources-loader": "^2.0.1", "resolve-url-loader": "^3.1.0", "vue-template-compiler": "^2.6.10" }, "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/essential", "eslint:recommended" ], "rules": {}, "parserOptions": { "parser": "babel-eslint" } }, "postcss": { "plugins": { "autoprefixer": {} } }, "browserslist": [ "> 1%", "last 2 versions" ] }

main.js

import Vue from 'vue'

import Inkline from '@/plugins/inkline.js'

import App from '@/layout/App.vue' import router from '@/router' import store from '@/store'

Vue.config.productionTip = false

new Vue({ router, store, render: h => h(App) }).$mount('#app')

@/plugin/inkline.js

import Vue from 'vue'; import '@inkline/inkline/src/index.scss'; import { Inkline, IButton, IForm, IInput } from '@inkline/inkline/src/index';

Vue.use(Inkline, { components: [ IButton, IForm, IInput ] });

• Other information (Detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc.)

• I'm submitting a:

  • [x] Bug Report
  • [ ] Feature Request

• What is the current behavior? When changing the filters for the i-select-option during runtime, this error is produced: The current behavior of the select is that the value selected is not correct. See this JS fiddle for the difference between normal select and i-select. https://jsfiddle.net/816d9skh/

• What is the expected behavior? (If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem** viahttps://plnkr.co or similar.) The select should be able to update based on filters that are dynamic (computed filters as well).

• Please tell us about your environment:

  • Version: CDN
  • Browser: Chrome 74.0.3729.169 | Mobile Chrome XX
  • Language: ES6/7

• Other information (Detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc.)

• What is the expected and current behavior? Validation is completely broken.

• Steps to reproduce Reproduction

• Please tell us about your environment:

  • Version: 3.1.4
  • Browser: all
  • Language: TypeScript

• Other information I have tried both options and composition api, and multiple difrent apporaches but all result in the same errors.

• What is the expected and current behavior? Whenever I add an inkline element to my project I get the following errors below, and nothing shows up on screen. To Uncaught TypeError: Cannot read properties of null (reading 'isCE') at renderSlot (runtime-core.esm-bundler.js?v=543014ca:2984:34) at Proxy.render (index.vue:24:9) at renderComponentRoot (runtime-core.esm-bundler.js:898:44) at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5631:57) at ReactiveEffect.run (reactivity.esm-bundler.js:187:25) at instance.update (runtime-core.esm-bundler.js:5745:56) at setupRenderEffect (runtime-core.esm-bundler.js:5759:9) at mountComponent (runtime-core.esm-bundler.js:5541:9) at processComponent (runtime-core.esm-bundler.js:5499:17) at patch (runtime-core.esm-bundler.js:5101:21)

[Vue warn]: Unhandled error during execution of render function at <IToggle modelValue=true onUpdate:modelValue=fn > at <App>

• Steps to reproduce I started getting this error on an existing project, so I created a brand new project using vite, and the error persists.

  • Create a new project using the vite CLI.
  • Add inkline.
  • Run "npm run dev" and the error will show up on the browser console.

• Please tell us about your environment:

  • Version: >=3.0.0
  • Browser: [all ]
  • Language: [ES] (I have not tried with TS)

package.json:

{
  "name": "test",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@inkline/inkline": "^3.1.9",
    "vue": "^3.2.45"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.0.0",
    "sass": "^1.56.2",
    "vite": "^4.0.0"
  }
}

• Other information Detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc.

• Please check if the PR fulfills these requirements

  • [x] The commit message follows our guidelines
  • [x] Tests for the changes have been added (for bug fixes / features)
  • [x] Docs have been added/updated (for bug fixes / features)

• What kind of change does this PR introduce? That PR fixes issue #330

• What is the expected and current behavior?

• Steps to reproduce https://stackblitz.com/edit/inkline-rhjbx8?file=src/App.vue

• Please tell us about your environment:

  • Version: 3.1.8
  • Browser: Firefox 107
  • Language: TypeScript

• What is the expected and current behavior? If an empty form with validation is submitted, error messages are not displayed, and the submit event is not triggered.

When an empty form is submitted, all validations should run and proper error messages should be displayed

• Steps to reproduce

Component

<script setup lang="ts">
import { useForm } from "@inkline/inkline/composition-api";

const email = ref<string>();
const password = ref<string>();
const isLoading = ref<boolean>(false);

const validationSchema = {
  email: {
    validators: [{ name: "email" }],
  },
  password: {
    validators: [{ name: "required" }, { name: "minLength", value: 8 }],
  },
};
const form = useForm(validationSchema);

function handleSubmit() {
  isLoading.value = true;
  console.log(email.value, password.value);
  setTimeout(() => {
    isLoading.value = false;
  }, 2000);
}
</script>

<template>
  <i-form v-model="form" @submit="handleSubmit">
    <i-form-group required>
      <i-form-label>Email</i-form-label>
      <i-input v-model="email" name="email" placeholder="email address" />
      <i-form-error for="email" />
    </i-form-group>
    <i-form-group required>
      <i-form-label>Password</i-form-label>
      <i-input v-model="password" name="password" placeholder="password" />
      <i-form-error for="password" />
    </i-form-group>
    <i-form-group>
      <i-button type="submit" :loading="isLoading">
        Sign Up
        <template #loading>
          <i-loader color="dark" class="_margin-right:1/2" />
          Please wait..
        </template>
      </i-button>
    </i-form-group>
  </i-form>
</template>

• Please tell us about your environment:
  • Version: 3.1.8
  • Browser: Brave
  • Language: TypeScript
  • Environment - Nuxt 3

• What is the expected and current behavior? If there are several components on the page and the state is reset for all of them at the same time - all components expand at the same time.

• Steps to reproduce

  • Open this pen: https://stackblitz.com/edit/inkline-ryavqd?file=src%2FApp.vue
  • Select value of first <i-select>
  • Select value of second <i-select>
  • Hit "Reset State" button

• Please tell us about your environment:

  • Version: >=3.0.5
  • Browser: all
  • Language: all (verified with TS, JS, OptionsAPI, Composition API)

• Other information It makes sense to reset state of the component but keep it closed or add a prop that manages the behaviour. Maybe I am missing something in the documentation, I mean how we can reset state without re-opening a dropdown?

• What is the expected and current behavior? Voice control should be able to "click" a button (IButton)

• Steps to reproduce

1. Install "Handsfree for web" voice control Chrome extension and enable plugin
2. Go to https://storybook.inkline.io/iframe.html?args=&id=components-button--basic&viewMode=story
3. Say "click" and notice the button numbered control does not appear. An accessible voice-controllable button should normally appear as show:

• Please tell us about your environment:

  • Version: =3.1.8
  • Browser: Chrome 106.0.5249.119
  • Language: TypeScript

• Other information Detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc.

  Removing aria-disabled="false" from the IButton source seems to allow the button to be voice controlled, although removing it might have other implications.