@webilio-xyz/webilio-vue 1.0.21 → 1.0.22

package/eslint.config.js

@@ -0,0 +1,12 @@
+import globals from "globals";
+import pluginJs from "@eslint/js";
+import pluginVue from "eslint-plugin-vue";
+
+
+/** @type {import('eslint').Linter.Config[]} */
+export default [
+  {files: ["**/*.{js,mjs,cjs,vue}"]},
+  {languageOptions: { globals: globals.browser }},
+  pluginJs.configs.recommended,
+  ...pluginVue.configs["flat/essential"],
+];

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@webilio-xyz/webilio-vue",
-  "version": "1.0.21",
+  "version": "1.0.22",
   "type": "module",
   "scripts": {
     "dev": "vite --host 0.0.0.0",
     "build": "vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "lint": "eslint \"src/**/*.{js,vue}\" --fix"
   },
   "private": false,
   "homepage": "https://webilio-xyz.github.io/webilio-vue/",
@@ -35,8 +36,12 @@
     "vue-select": "^4.0.0-beta.6"
   },
   "devDependencies": {
+    "@eslint/js": "^9.18.0",
     "autoprefixer": "^10.4.20",
+    "eslint": "^9.18.0",
+    "eslint-plugin-vue": "^9.32.0",
     "flat": "^6.0.1",
+    "globals": "^15.14.0",
     "postcss": "^8.4.41",
     "tailwindcss": "^3.4.10",
     "vite": "^5.4.1",

package/src/Components/Component/AlertComponent.vue

@@ -1,7 +1,7 @@
 <script setup>
 import {ref} from "vue";
 
-const props = defineProps({
+defineProps({
   alertMessage: {
     type: String,
     default: 'Alert'

package/src/Components/Component/ButtonComponent.vue

@@ -1,5 +1,4 @@
 <script setup>
-import {computed, useSlots} from "vue";
 </script>
 
 <template>

package/src/Components/Input/DateComponent.vue

@@ -27,7 +27,7 @@ const locale = computed(() => {
   return getActiveLanguage();
 })
 
-const props = defineProps({
+defineProps({
   modelValue: String,
   min: String,
   max: String,

package/src/Components/Input/ErrorComponent.vue

@@ -1,8 +1,7 @@
-<script lang="ts">
+<script>
 import {defineComponent} from "vue";
 export default defineComponent({
   name: "ErrorComponent",
-  components: {Error},
   props: {
     message: String
   }

package/src/Components/Input/InputComponent.vue

@@ -45,10 +45,14 @@ const props = defineProps({
   searchable: {
     type: Boolean,
     default: true
+  },
+  taggable: {
+    type: Boolean,
+    default: false
   }
 });
 
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits(['update:modelValue', 'tag']);
 
 const formGroupUniqueId = ref(null);
 
@@ -99,7 +103,9 @@ const maska = computed(() => {
       :disabled="disabled"
       :multiple="multiple"
       :searchable="searchable"
+      :taggable="taggable"
       @update:model-value="emit('update:modelValue', $event)"
+      @tag="emit('tag', $event)"
   />
   <Textarea
       v-else-if="type === 'textarea'"

package/src/Components/Input/InputGroupComponent.vue

@@ -50,12 +50,14 @@ const props = defineProps({
     required: {
         type: Boolean,
         default: false
+    },
+    taggable: {
+        type: Boolean,
+        default: false
     }
 });
 
-const emit = defineEmits(['update:modelValue']);
-
-const input = ref(null);
+const emit = defineEmits(['update:modelValue', 'tag']);
 
 const formGroupUniqueId = ref(null);
 
@@ -96,7 +98,9 @@ const maska = computed(() => {
             :mask="maska"
             :searchable="searchable"
             :placeholder="placeholder"
+            :taggable="taggable"
             @update:model-value="emit('update:modelValue', $event)"
+            @tag="emit('tag', $event)"
         />
 
         <ErrorComponent

package/src/Components/Input/SelectComponent.vue

@@ -3,7 +3,7 @@ import {computed} from 'vue';
 import Multiselect from 'vue-multiselect';
 import {map} from "lodash-es";
 
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits(['update:modelValue', 'tag'])
 
 const props = defineProps({
   modelValue: {},
@@ -50,6 +50,10 @@ const props = defineProps({
   groupLabel: {
     type: String,
     default: 'label'
+  },
+  taggable: {
+    type: Boolean,
+    default: false
   }
 });
 
@@ -96,7 +100,10 @@ const remove = (option) => {
     });
     emit('update:modelValue', newValue);
   }
+}
 
+const addTag = (newTag) => {
+  emit('tag', newTag);
 }
 
 </script>
@@ -117,6 +124,8 @@ const remove = (option) => {
       :group-select="groupSelect"
       :group-values="groupValues"
       :group-label="groupLabel"
+      :taggable="taggable"
+      @tag="addTag"
       @remove="remove"
   >
     <template #maxElements>

package/src/Components/Layout/SidebarComponent.vue

@@ -1,6 +1,5 @@
 <script setup>
-
-const props = defineProps({
+defineProps({
   options: {
     type: Array,
     required: true

package/src/Components/Layout/SidebarOptionComponent.vue

@@ -1,6 +1,5 @@
 <script setup>
-
-const props = defineProps({
+defineProps({
   option: {
     type: Object,
     required: true

package/src/Components/Modal/ConfirmModalComponent.vue

@@ -3,7 +3,7 @@ import ModalComponent from "./ModalComponent.vue";
 import CardTitleComponent from "../Layout/CardTitleComponent.vue";
 import ButtonComponent from "../Component/ButtonComponent.vue";
 
-const props = defineProps({
+defineProps({
   show: {
     type: Boolean,
     default: false,

package/src/Components/Table/InertiaTableComponent.vue

@@ -1,6 +1,6 @@
 <script setup>
 import {router} from "@inertiajs/vue3";
-import {computed, ref, watch, toRaw} from "vue";
+import {computed, ref, watch} from "vue";
 import { usePage } from '@inertiajs/vue3';
 import {debounce, findIndex, get, forEach} from "lodash-es";
 import Columns from "../../Models/Columns";
@@ -48,7 +48,7 @@ const props = defineProps({
   },
   sorting: {
     type: Array,
-    default: []
+    default: () =>[]
   }
 })
 

package/src/Components/Table/TableComponent.vue

@@ -3,7 +3,7 @@ import Columns from "../../Models/Columns.ts";
 import TableRowComponent from "./TableRowComponent.vue";
 import TableHeaderComponent from "./TableHeaderComponent.vue";
 
-const props = defineProps({
+defineProps({
   columns: {
     type: Columns,
     default: () => new Columns()
@@ -26,7 +26,7 @@ const props = defineProps({
   },
   sorting: {
     type: Array,
-    default: []
+    default: () => []
   }
 });
 

package/src/Components/Table/TableHeaderComponent.vue

@@ -1,12 +1,12 @@
 <script setup>
 import {computed} from "vue";
 import Columns from "../../Models/Columns.ts";
-import {find, get} from "lodash-es";
+import {find} from "lodash-es";
 
 const props = defineProps({
   columns: {
     type: Columns,
-    default: []
+    default: () => []
   },
   trClass: {
     type: String,
@@ -18,7 +18,7 @@ const props = defineProps({
   },
   sorting: {
     type: Array,
-    default: []
+    default: () =>[]
   }
 })
 
@@ -44,7 +44,6 @@ const getColumnSortingDirection = (column) => {
         default:
             return false;
     }
-    return false;
 }
 
 const sort = (column, $event) => {

package/src/Components/Table/TablePaginationComponent.vue

@@ -94,7 +94,7 @@ const changePage = (page) => {
     <template v-else-if="currentPage === lastPage">
         <slot name="previous">
             <template v-if="lastPage < 5">
-                <ButtonComponent
+                <button
                     :class="pageClassButtons"
                     class="wv-pagination-button wv-pagination-previous"
                     v-for="pageId in range(1, lastPage)"
@@ -102,27 +102,28 @@ const changePage = (page) => {
                     @click="changePage(pageId)"
                 >
                     {{ pageId }}
-                </ButtonComponent>
+                </button>
             </template>
             <template v-else>
-                <ButtonComponent :class="pageClassButtons" class="wv-pagination-button wv-pagination-previous" @click="changePage(1)">
+                <button :class="pageClassButtons" class="wv-pagination-button wv-pagination-previous" @click="changePage(1)">
                     1
-                </ButtonComponent>
+                </button>
                 <span class="wv-pagination-dot py-2">...</span>
-                <ButtonComponent
+                <button
                     :class="pageClassButtons"
+                    class="wv-pagination-button wv-pagination-previous"
                     v-for="pageId in range(currentPage - 2, currentPage)"
                     :key="pageId"
                     @click="changePage(pageId)"
                 >
                     {{ pageId }}
-                </ButtonComponent>
+                </button>
             </template>
         </slot>
         <slot name="current">
-            <ButtonComponent :class="pageClassButtons" disabled>
+            <button :class="pageClassButtons" class="wv-pagination-button wv-pagination-current" disabled>
                 {{ currentPage }}
-            </ButtonComponent>
+            </button>
         </slot>
     </template>
     <template v-else>

package/src/Components/Table/TableRowComponent.vue

@@ -2,7 +2,7 @@
 import Columns from "../../Models/Columns";
 import TableCell from "./TableCellComponent.vue";
 
-const props = defineProps({
+defineProps({
     columns: {
         type: Columns,
         default: () => new Columns()

package/src/Demo/Input/index.js

@@ -1,13 +1,3 @@
-import {
-    ErrorComponent,
-    InputComponent,
-    InputGroupComponent,
-    LabelComponent,
-    SelectComponent,
-    TextareaComponent,
-    TextInputComponent,
-    ToggleComponent
-} from "../../Components/Input/index.js";
 import DateComponentDemo from "./DateComponentDemo.js";
 import CheckboxComponentDemo from "./CheckboxComponentDemo.js";
 import ErrorComponentDemo from "./ErrorComponentDemo.js";

package/src/Demo/Modal/ConfirmModalComponentDemo.js

@@ -1,4 +1,3 @@
-import ModalComponent from "../../Components/Modal/ModalComponent.vue";
 import {ref} from "vue";
 import ConfirmModalComponent from "../../Components/Modal/ConfirmModalComponent.vue";
 

package/src/Demo/Table/TableHeaderComponentDemo.js

@@ -1,7 +1,6 @@
 
 import Columns from "../../Models/Columns.ts";
 import ColumnDefinition from "../../Models/ColumnDefinition.js";
-import TableComponent from "../../Components/Table/TableComponent.vue";
 import TableHeaderComponent from "../../Components/Table/TableHeaderComponent.vue";
 
 export default {

package/src/Demo/Table/TablePaginationComponentDemo.js

@@ -1,6 +1,4 @@
 
-import Columns from "../../Models/Columns.ts";
-import ColumnDefinition from "../../Models/ColumnDefinition.js";
 import TablePaginationComponent from "../../Components/Table/TablePaginationComponent.vue";
 
 export default {

package/src/Doxen/DoxenSidebar.vue

@@ -1,13 +1,11 @@
 <script setup>
-
-import {isArray} from "lodash-es";
 import logo from "../Assets/Logo_webilio.png";
 import {RouterLink} from "vue-router";
 import router from "../router/index.js";
 const props = defineProps({
   demos: {
     type: Array,
-    default: []
+    default: () => []
   },
   modelValue: {
     type: String,
@@ -33,7 +31,7 @@ const isActive = function(key) {
       <div data-applied-style-tokens="sidebarLogo" data-style-tokens="sidebarLogo">
         <img :src="logo" />
       </div>
-      <template v-for="(demo, index) in props.demos">
+      <template v-for="(demo, index) in props.demos" :key="index">
         <template v-if="!isComponent(demo)">
           <div data-applied-style-tokens="sidebarSection" data-style-tokens="sidebarSection">
             <div data-applied-style-tokens="sidebarSectionTitle" data-style-tokens="sidebarSectionTitle">
@@ -42,7 +40,6 @@ const isActive = function(key) {
             <a
                 v-for="(subDemo, subIndex) in demo"
                 :href="`#${index}.${subIndex}`"
-
                 :key="'sidebar-link-' + subIndex"
                 data-style-tokens="sidebarButton"
                 :data-applied-style-tokens="isActive(`${index}.${subIndex}`) ? 'sidebarButtonSelected sidebarButton' : 'sidebarButton'"

package/src/Models/ColumnDefinition.js

@@ -65,5 +65,9 @@ export default class ColumnDefinition {
         if (typeof tdClassName === "string") {
             this.tdClassName = tdClassName;
         }
+
+        if (typeof trClassName === "string") {
+            this.trClassName = trClassName;
+        }
     }
 }

package/src/router/index.js

@@ -1,20 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router';
-import Components from "../Demo/index.js";
-import {flatten} from "flat";
-import {forEach} from "lodash-es";
 import VueDoxen from "../Doxen/VueDoxen.vue";
 
-
-const demos =  {
-    'Inputs' : Components.Inputs,
-    'Tables' : Components.Tables,
-    'Layouts': Components.Layouts,
-    'Modals': Components.Modals,
-    'Components': Components.Components
-};
-
-const doxenFormattedDemos = flatten(demos, { maxDepth: 2 });
-
 const routes = [
     // ...other routes,
     {