refactor: TSX to SFC

.editorconfig

@@ -23,7 +23,7 @@ indent_size = 4
 indent_style = tab
 
 # Indentation override for all JS under lib directory
-[.*{js,ts,tsx,jsx}]
+[.*{js,ts,tsx,jsx,vue}]
 indent_style = space
 indent_size = 2
 

.eslintrc.js

@@ -56,6 +56,12 @@ module.exports = {
       ],
     }],
 
+    // Vue
+    'vue/require-default-prop': 'off',
+    'vue/no-restricted-class': ['error', '/^(p|m)(l|r)-/'],
+    'vue/no-required-prop-with-default': 'error',
+    'vue/v-on-event-hyphenation': ['error', 'never'],
+
     // 'vue/require-prop-comment': ['error', {
     //   type: 'JSDoc',
     // }],
@@ -81,35 +87,35 @@ module.exports = {
     '@typescript-eslint/consistent-type-imports': 'error',
 
     // JSX rules
-    'react/jsx-boolean-value': ['error', 'never'],
-    'react/jsx-child-element-spacing': 'error',
-    'react/jsx-closing-bracket-location': 'error',
+    // 'react/jsx-boolean-value': ['error', 'never'],
+    // 'react/jsx-child-element-spacing': 'error',
+    // 'react/jsx-closing-bracket-location': 'error',
 
-    // 'react/jsx-closing-tag-location': 'error',
-    'react/jsx-curly-brace-presence': 'error',
-    'react/jsx-curly-newline': 'error',
-    'react/jsx-curly-spacing': 'error',
-    'react/jsx-equals-spacing': 'error',
-    'react/jsx-filename-extension': ['error', { extensions: ['.tsx', '.jsx'] }],
-    'react/jsx-first-prop-new-line': 'error',
-    'react/jsx-indent-props': [2, 2],
-    'react/jsx-indent': [2, 2],
-    'react/jsx-max-props-per-line': 'error',
-    'react/jsx-no-comment-textnodes': 'error',
-    'react/jsx-no-duplicate-props': 'error',
-    'react/jsx-no-leaked-render': 'error',
-    'react/jsx-no-target-blank': 'error',
-    'react/jsx-no-useless-fragment': 'error',
-    'react/jsx-one-expression-per-line': 'error',
-    'react/jsx-pascal-case': 'error',
-    'react/jsx-props-no-multi-spaces': 'error',
-    'react/jsx-sort-props': 'error',
-    'react/jsx-tag-spacing': 'error',
-    'react/self-closing-comp': 'error',
+    // // 'react/jsx-closing-tag-location': 'error',
+    // 'react/jsx-curly-brace-presence': 'error',
+    // 'react/jsx-curly-newline': 'error',
+    // 'react/jsx-curly-spacing': 'error',
+    // 'react/jsx-equals-spacing': 'error',
+    // 'react/jsx-filename-extension': ['error', { extensions: ['.tsx', '.jsx'] }],
+    // 'react/jsx-first-prop-new-line': 'error',
+    // 'react/jsx-indent-props': [2, 2],
+    // 'react/jsx-indent': [2, 2],
+    // 'react/jsx-max-props-per-line': 'error',
+    // 'react/jsx-no-comment-textnodes': 'error',
+    // 'react/jsx-no-duplicate-props': 'error',
+    // 'react/jsx-no-leaked-render': 'error',
+    // 'react/jsx-no-target-blank': 'error',
+    // 'react/jsx-no-useless-fragment': 'error',
+    // 'react/jsx-one-expression-per-line': 'error',
+    // 'react/jsx-pascal-case': 'error',
+    // 'react/jsx-props-no-multi-spaces': 'error',
+    // 'react/jsx-sort-props': 'error',
+    // 'react/jsx-tag-spacing': 'error',
+    // 'react/self-closing-comp': 'error',
 
-    // 'react/no-unknown-property': ['error', { ignore: ['class', 'v-show', 'v-model', 'v-slots', 'for', 'tabindex'] }],
-    'react/no-unescaped-entities': 'error',
-    'react/no-invalid-html-attribute': 'error',
+    // // 'react/no-unknown-property': ['error', { ignore: ['class', 'v-show', 'v-model', 'v-slots', 'for', 'tabindex'] }],
+    // 'react/no-unescaped-entities': 'error',
+    // 'react/no-invalid-html-attribute': 'error',
   },
   settings: {
     'import/parsers': {

.npmrc

@@ -1,2 +1 @@
 ignore-workspace-root-check=true
-shamefully-hoist=true

.vscode/comment-anchors.code-snippets

@@ -19,5 +19,14 @@
             "❗"
         ],
         "description": "Add warning emoji"
+    },
+    "Create comment anchor SECTION": {
+        "prefix": "ca-html-section",
+        "body": [
+            "<!-- SECTION ${1:name} -->",
+            "  ${2}",
+            "<!-- !SECTION -->"
+        ],
+        "description": "Create comment anchor SECTION"
     }
-}
+}

.vscode/settings.json

@@ -50,7 +50,10 @@
         "vue"
     ],
     // Extension: Comment Anchors
+    "commentAnchors.tags.displayLineNumber": false,
+    "commentAnchors.workspace.enabled": false,
     "commentAnchors.showCursor": true,
+    "commentAnchors.tags.displayTagName": false,
     "commentAnchors.tags.list": [
         {
             "tag": "ℹ️",
@@ -81,6 +84,7 @@
     "cSpell.words": [
         "composables",
         "defu",
+        "globby",
         "nuxt",
         "Vite",
         "vitepress",

.vscode/vue.code-snippets

@@ -0,0 +1,28 @@
+{
+    "Create SFC": {
+        "prefix": "sfc",
+        "body": [
+            "<script lang=\"ts\" setup>",
+            "defineOptions({",
+            "  name: 'A${1}',",
+            "})",
+            "</script>",
+            "",
+            "<template>",
+            "",
+            "</template>",
+            "",
+            "<style lang=\"scss\">",
+            "",
+            "</style>"
+        ],
+        "description": "Create SFC"
+    },
+    "Create template with v-if": {
+        "prefix": "tif",
+        "body": [
+            "<template v-if=\"${1}\"></template>"
+        ],
+        "description": "Create template with v-if"
+    }
+}

docs/.gitignore

@@ -0,0 +1 @@
+.vitepress/cache

docs/components/Api.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { ComponentApi } from '../../../../scripts/gen-component-meta'
+import type { ComponentApi } from '../../scripts/gen-component-meta'
 
 const props = defineProps<{ api: ComponentApi }>()
 const propsHeader = Object.keys(props.api.props[0])

docs/demos/badge/DemoBadgeContent.vue

@@ -1,24 +1,11 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const badgeContent = ref('9')
-</script>
-
 <template>
-  <AInput
-    v-model="badgeContent"
-    label="Badge content"
-    placeholder="Write your badge content"
-    class="sm:w-1/2"
-  />
-  <br>
   <div class="flex flex-wrap gap-8">
-    <ABadge :content="badgeContent">
+    <ABadge :content="9">
       <i class="i-bx-bell w-6 h-6" />
     </ABadge>
     <ABadge>
       <template #content>
-        {{ badgeContent }}
+        9
       </template>
       <i class="i-bx-bell w-6 h-6" />
     </ABadge>

docs/demos/checkbox/DemoCheckboxIndeterminate.vue

@@ -39,7 +39,7 @@ const value = computed({
       :key="item"
       v-model="fruits"
       :value="item"
-      class="ml-7"
+      class="ms-7"
     >
       {{ item }}
     </ACheckbox>

docs/demos/drawer/DemoDrawerWidth.vue

@@ -9,7 +9,7 @@ const isDrawerShown = ref(false)
     v-model="isDrawerShown"
     title="Drawer title"
     subtitle="Chocolate cake tiramisu donut"
-    class="w-[400px]"
+    class="!w-[400px]"
   />
 
   <ABtn @click="isDrawerShown = true">

docs/demos/list/DemoListBasic.vue

@@ -3,7 +3,7 @@ const items = [
   { text: 'Donut jujubes' },
   { text: 'Sesame snaps' },
   { text: 'I love jelly' },
-  { text: 'Cake gummi', disable: true },
+  { text: 'Cake gummi', disabled: true },
 ]
 </script>
 

docs/demos/list/DemoListVModelSupport.vue

@@ -5,7 +5,7 @@ const items = [
   { text: 'Donut jujubes' },
   { text: 'Sesame snaps' },
   { text: 'I love jelly' },
-  { text: 'Cake gummi', disable: true },
+  { text: 'Cake gummi', disabled: true },
 ]
 
 const itemsPropSelection = ref(0)

docs/demos/list/DemoListVariants.vue

@@ -5,7 +5,7 @@ const items = [
   { text: 'Donut jujubes' },
   { text: 'Sesame snaps' },
   { text: 'I love jelly' },
-  { text: 'Cake gummi', disable: true },
+  { text: 'Cake gummi', disabled: true },
 ]
 
 const selected = ref(0)

docs/demos/menu/DemoMenuPlacement.vue

@@ -50,7 +50,7 @@ const selectNext = () => {
     <ASelect
       v-model="menuPlacement"
       :options="placementOptions"
-      class="w-24 grow-0 ml-auto"
+      class="w-24 grow-0 ms-auto"
     />
     <ABtn
       variant="text"

docs/demos/table/DemoTableBasic.vue

@@ -1,31 +1,5 @@
 <script setup lang="ts">
-const rows = [
-  {
-    name: 'Leanne Graham',
-    username: 'Bret',
-    website: 'hildegard.org',
-  },
-  {
-    name: 'Ervin Howell',
-    username: 'Antonette',
-    website: 'anastasia.net',
-  },
-  {
-    name: 'Clementine Bauch',
-    username: 'Samantha',
-    website: 'ramiro.info',
-  },
-  {
-    name: 'Patricia Lebsack',
-    username: 'Karianne',
-    website: 'kale.biz',
-  },
-  {
-    name: 'Chelsey Dietrich',
-    username: 'Kamren',
-    website: 'demarco.info',
-  },
-]
+import { rows } from './data'
 </script>
 
 <template>

docs/demos/table/DemoTableColumnFormatter.vue

@@ -1,33 +1,7 @@
 <script setup lang="ts">
-const rows = [
-  {
-    name: 'Leanne Graham',
-    username: 'Bret',
-    website: 'hildegard.org',
-  },
-  {
-    name: 'Ervin Howell',
-    username: 'Antonette',
-    website: 'anastasia.net',
-  },
-  {
-    name: 'Clementine Bauch',
-    username: 'Samantha',
-    website: 'ramiro.info',
-  },
-  {
-    name: 'Patricia Lebsack',
-    username: 'Karianne',
-    website: 'kale.biz',
-  },
-  {
-    name: 'Chelsey Dietrich',
-    username: 'Kamren',
-    website: 'demarco.info',
-  },
-]
+import { rows } from './data'
 
-const columns = [
+const cols = [
   { name: 'name' },
   { name: 'username', formatter: row => `@${row.username}` },
   { name: 'website' },
@@ -38,7 +12,7 @@ const columns = [
   <div class="cards-demo-container">
     <ATable
       :rows="rows"
-      :columns="columns"
+      :cols="cols"
     />
   </div>
 </template>