Components renaming

.eslintrc.js

@@ -1,25 +1,29 @@
+require('@rushstack/eslint-patch/modern-module-resolution')
+
 module.exports = {
   env: {
     browser: true,
     es2021: true,
     node: true,
   },
-  parser: 'vue-eslint-parser',
-  extends: ['eslint:recommended', 'plugin:vue/essential', 'plugin:@typescript-eslint/recommended'],
+  extends: [
+    'eslint:recommended',
+    'standard',
+    'plugin:vue/vue3-recommended',
+    'plugin:vue-scoped-css/vue3-recommended',
+    '@vue/eslint-config-typescript/recommended',
+  ],
   parserOptions: {
     ecmaVersion: 12,
-    parser: '@typescript-eslint/parser',
     sourceType: 'module',
   },
-  plugins: ['vue', '@typescript-eslint'],
   rules: {
-    'linebreak-style': ['error', 'unix'],
-    quotes: ['error', 'single'],
-    semi: ['error', 'never'],
-    'vue/multi-word-component-names': 'off',
     'comma-dangle': ['error', 'always-multiline'],
+    'linebreak-style': ['error', 'unix'],
     'no-multiple-empty-lines': 'error',
     'object-curly-spacing': ['error', 'always'],
-    'vue/no-v-model-argument': 'off',
+    'sort-imports': ['error', { ignoreCase: true, ignoreDeclarationSort: true }],
+    'vue/block-order': ['error', { order: ['template', 'script', 'style'] }],
+    'vue/component-name-in-template-casing': ['error', 'kebab-case'],
   },
 }

docs/.vitepress/config.mts

@@ -38,20 +38,20 @@ function getComponents() {
     { text: 'Accordion', link: '/components/accordion' },
     { text: 'Alert', link: '/components/alert' },
     { text: 'Avatar', link: '/components/avatar' },
+    { text: 'Badge', link: '/components/badge' },
     { text: 'Breadcrumb', link: '/components/breadcrumb' },
     { text: 'Button', link: '/components/button' },
-    { text: 'Badge', link: '/components/badge' },
     { text: 'Button Group', link: '/components/button-group' },
     { text: 'Card', link: '/components/card.md' },
     { text: 'Carousel', link: '/components/carousel' },
     { text: 'Dropdown', link: '/components/dropdown' },
+    { text: 'ListGroup', link: '/components/list-group' },
     { text: 'Pagination', link: '/components/pagination' },
     { text: 'Progress', link: '/components/progress' },
     { text: 'Rating', link: '/components/rating' },
     { text: 'Spinner', link: '/components/spinner' },
     { text: 'Table', link: '/components/table' },
     { text: 'Tabs', link: '/components/tabs' },
-    { text: 'ListGroup', link: '/components/list-group' },
     { text: 'Timeline', link: '/components/timeline' },
     { text: 'Toast', link: '/components/toast' },
     { text: 'Tooltip', link: '/components/tooltip' },
@@ -65,13 +65,13 @@ function getComponents() {
 function getFormComponents() {
   return [
     { text: 'Input', link: '/components/input' },
-    { text: 'FileInput', link: '/components/fileInput' },
-    { text: 'Checkbox', link: '/components/checkbox' },
+    { text: 'File Input', link: '/components/fileInput' },
     { text: 'Select', link: '/components/select' },
-    { text: 'Toggle', link: '/components/toggle' },
     { text: 'Textarea', link: '/components/textarea' },
-    { text: 'Range', link: '/components/range' },
+    { text: 'Checkbox', link: '/components/checkbox' },
     { text: 'Radio', link: '/components/radio' },
+    { text: 'Toggle', link: '/components/toggle' },
+    { text: 'Range', link: '/components/range' },
   ]
 }
 

docs/components/PLAYGROUND/examples/SlotListenerExample.vue

@@ -1,10 +1,15 @@
 <template>
-  <slot-listener @click="onClick" @mouseleave="onMouseleave" @mouseenter="onMouseenter">
-    <Button>HELLO</Button>
-  </slot-listener>
+  <fwb-slot-listener
+    @click="onClick"
+    @mouseleave="onMouseleave"
+    @mouseenter="onMouseenter"
+  >
+    <fwb-button>HELLO</fwb-button>
+  </fwb-slot-listener>
 </template>
+
 <script lang="ts" setup>
-import { SlotListener, Button } from '../../../../src/index'
+import { FwbButton, FwbSlotListener } from '../../../../src/index'
 const onClick = () => {
   console.log('onClick from slot-listener')
 }

docs/components/accordion/examples/FwbAccordionExample.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="vp-raw">
+    <fwb-accordion>
+      <fwb-accordion-panel>
+        <fwb-accordion-header>header</fwb-accordion-header>
+        <fwb-accordion-content>
+          <div>
+            <p class="mb-2 text-gray-500 dark:text-gray-400">
+              Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.
+            </p>
+            <p class="text-gray-500 dark:text-gray-400">
+              Check out this guide to learn how to <a
+                class="text-blue-600 dark:text-blue-500 hover:underline"
+                href="/docs/getting-started/introduction/"
+              >get started</a> and start developing websites
+              even faster with components on top of Tailwind CSS.
+            </p>
+          </div>
+        </fwb-accordion-content>
+      </fwb-accordion-panel>
+      <fwb-accordion-panel>
+        <fwb-accordion-header>another header</fwb-accordion-header>
+        <fwb-accordion-content>
+          <div>
+            <p class="mb-2 text-gray-500 dark:text-gray-400">
+              Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.
+            </p>
+            <p class="text-gray-500 dark:text-gray-400">
+              Check out the <a
+                class="text-blue-600 dark:text-blue-500 hover:underline"
+                href="https://flowbite.com/figma/"
+              >Figma design system</a> based on the utility classes from Tailwind CSS and
+              components from Flowbite.
+            </p>
+          </div>
+        </fwb-accordion-content>
+      </fwb-accordion-panel>
+      <fwb-accordion-panel>
+        <fwb-accordion-header>and one more header</fwb-accordion-header>
+        <fwb-accordion-content>
+          <div>
+            <p class="mb-2 text-gray-500 dark:text-gray-400">
+              Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.
+            </p>
+            <p class="text-gray-500 dark:text-gray-400">
+              Check out the <a
+                class="text-blue-600 dark:text-blue-500 hover:underline"
+                href="https://flowbite.com/figma/"
+              >Figma design system</a> based on the utility classes from Tailwind CSS and
+              components from Flowbite.
+            </p>
+          </div>
+        </fwb-accordion-content>
+      </fwb-accordion-panel>
+    </fwb-accordion>
+  </div>
+</template>
+
+<script setup>
+import { FwbAccordion, FwbAccordionContent, FwbAccordionHeader, FwbAccordionPanel } from '../../../../src/index'
+</script>