vue3 port

.eslintrc.js → .eslintrc.cjs

@@ -18,6 +18,17 @@ module.exports = {
     'no-use-before-define': ['error', { functions: false }],
     'no-param-reassign': ['error', { props: false }],
     'arrow-parens': ['error', 'as-needed'],
+    'no-underscore-dangle': 'off',
+    'import/extensions': [
+      'error',
+      'ignorePackages',
+      {
+        'js': 'never',
+        'jsx': 'never',
+        'ts': 'never',
+        'tsx': 'never'
+      }
+    ]
   },
 
   parserOptions: {
@@ -42,4 +53,13 @@ module.exports = {
       },
     },
   ],
+
+  settings: {
+    'import/resolver': {
+      alias: {
+        map: [['@', './src/']],
+        extensions: ['.js', '.vue', '.ts'],
+      },
+    }
+  }
 };

dev/App.vue

@@ -111,8 +111,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
+<script lang="ts" setup>
+import { computed, markRaw, ref, reactive } from 'vue';
 
 import QueryBuilder from '@/QueryBuilder.vue';
 import { RuleSet, QueryBuilderConfig } from '@/types';
@@ -122,150 +122,142 @@ import NumberSelection from './Number.vue';
 import GroupCtrlSlot from './GroupCtrlSlot.vue';
 import RuleSlot from './RuleSlot.vue';
 
-@Component({
-  components: {
-    QueryBuilder,
-    GroupCtrlSlot,
-    RuleSlot,
-  },
-})
-export default class App extends Vue {
-ctrlEnableDragNDrop: boolean = true;
-
-  ctrlEnableMaxDepth: boolean = false;
+const ctrlEnableDragNDrop = ref<boolean>(true);
 
-  ctrlMaxDepth: number = 3;
+const ctrlEnableMaxDepth = ref<boolean>(false);
 
-  ctrlEnableGroupOperatorSlot: boolean = true;
+const ctrlMaxDepth = ref<number>(3);
 
-  ctrlEnableGroupControlSlot: boolean = true;
+const ctrlEnableGroupOperatorSlot = ref<boolean>(true);
 
-  ctrlEnableRuleSlot: boolean = true;
+const ctrlEnableGroupControlSlot = ref<boolean>(true);
 
-  query: RuleSet | null = {
-    operatorIdentifier: 'OR',
-    children: [
-      {
-        identifier: 'txt',
-        value: 'A',
-      },
-      {
-        operatorIdentifier: 'AND',
-        children: [
-          {
-            identifier: 'txt',
-            value: 'A',
-          },
-          {
-            identifier: 'txt',
-            value: 'B',
-          },
-          {
-            identifier: 'txt',
-            value: 'C',
-          },
-          {
-            operatorIdentifier: 'AND',
-            children: [
-              {
-                identifier: 'txt',
-                value: 'c',
-              },
-              {
-                identifier: 'txt',
-                value: 'd',
-              },
-              {
-                operatorIdentifier: 'AND',
-                children: [
-                  {
-                    identifier: 'txt',
-                    value: 'a',
-                  },
-                  {
-                    identifier: 'txt',
-                    value: 'b',
-                  },
-                ],
-              },
-            ],
-          },
-        ],
-      },
-      {
-        operatorIdentifier: 'AND',
-        children: [
-          {
-            identifier: 'txt',
-            value: 'X',
-          },
-          {
-            identifier: 'txt',
-            value: 'Y',
-          },
-          {
-            identifier: 'txt',
-            value: 'Z',
-          },
-        ],
-      },
-    ],
-  };
+const ctrlEnableRuleSlot = ref<boolean>(true);
 
-  config: QueryBuilderConfig = {
-    operators: [
-      {
-        name: 'AND',
-        identifier: 'AND',
-      },
-      {
-        name: 'OR',
-        identifier: 'OR',
-      },
-    ],
-    rules: [
-      {
-        identifier: 'txt',
-        name: 'Text Selection',
-        component: InputSelection,
-        initialValue: '',
-      },
-      {
-        identifier: 'num',
-        name: 'Number Selection',
-        component: NumberSelection,
-        initialValue: 10,
-      },
-    ],
-    maxDepth: undefined,
-    colors: [
-      'hsl(88, 50%, 55%)',
-      'hsl(187, 100%, 45%)',
-      'hsl(15, 100%, 55%)',
-    ],
-    dragging: {
-      animation: 300,
-      disabled: false,
-      ghostClass: 'ghost',
+const query = ref<RuleSet>({
+  operatorIdentifier: 'OR',
+  children: [
+    {
+      identifier: 'txt',
+      value: 'A',
     },
-  }
+    {
+      operatorIdentifier: 'AND',
+      children: [
+        {
+          identifier: 'txt',
+          value: 'A',
+        },
+        {
+          identifier: 'txt',
+          value: 'B',
+        },
+        {
+          identifier: 'txt',
+          value: 'C',
+        },
+        {
+          operatorIdentifier: 'AND',
+          children: [
+            {
+              identifier: 'txt',
+              value: 'c',
+            },
+            {
+              identifier: 'txt',
+              value: 'd',
+            },
+            {
+              operatorIdentifier: 'AND',
+              children: [
+                {
+                  identifier: 'txt',
+                  value: 'a',
+                },
+                {
+                  identifier: 'txt',
+                  value: 'b',
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+    {
+      operatorIdentifier: 'AND',
+      children: [
+        {
+          identifier: 'txt',
+          value: 'X',
+        },
+        {
+          identifier: 'txt',
+          value: 'Y',
+        },
+        {
+          identifier: 'txt',
+          value: 'Z',
+        },
+      ],
+    },
+  ],
+});
 
-  get getConfig(): QueryBuilderConfig {
-    const config: QueryBuilderConfig = { ...this.config };
+const config: QueryBuilderConfig = reactive<QueryBuilderConfig>({
+  operators: [
+    {
+      name: 'AND',
+      identifier: 'AND',
+    },
+    {
+      name: 'OR',
+      identifier: 'OR',
+    },
+  ],
+  rules: [
+    {
+      identifier: 'txt',
+      name: 'Text Selection',
+      component: markRaw(InputSelection),
+      initialValue: '',
+    },
+    {
+      identifier: 'num',
+      name: 'Number Selection',
+      component: markRaw(NumberSelection),
+      initialValue: 10,
+    },
+  ],
+  maxDepth: undefined,
+  colors: [
+    'hsl(88, 50%, 55%)',
+    'hsl(187, 100%, 45%)',
+    'hsl(15, 100%, 55%)',
+  ],
+  dragging: {
+    animation: 300,
+    disabled: false,
+    ghostClass: 'ghost',
+  },
+});
 
-    if (!config.dragging) {
-      config.dragging = {};
-    }
-    config.dragging.disabled = !this.ctrlEnableDragNDrop;
+const getConfig = computed<QueryBuilderConfig>(() => {
+  const configResult: QueryBuilderConfig = { ...config };
 
-    config.maxDepth = Math.abs(this.ctrlMaxDepth || 0);
-    if (!this.ctrlEnableMaxDepth) {
-      config.maxDepth = undefined;
-    }
+  if (!configResult.dragging) {
+    configResult.dragging = {};
+  }
+  configResult.dragging.disabled = !ctrlEnableDragNDrop.value;
 
-    return config;
+  configResult.maxDepth = Math.abs(ctrlMaxDepth.value || 0);
+  if (!ctrlEnableMaxDepth.value) {
+    configResult.maxDepth = undefined;
   }
-}
+
+  return configResult;
+});
+
 </script>
 
 <style lang="scss">
@@ -307,7 +299,7 @@ body {
 
 .query-builder-group-slot__group-selection {
   padding: 16px;
-  background-color: hsl(0, 0, 95%);
+  background-color: hsl(0, 0%, 95%);
 }
 .query-builder-group-slot__group-operator {
   margin-right: 8px;

dev/GroupCtrlSlot.vue

@@ -1,13 +1,16 @@
-<script lang="ts">
-import { Vue, Component, Prop } from 'vue-property-decorator';
+<script lang="ts" setup>
+import { defineProps, PropType, ref } from 'vue';
 import { GroupCtrlSlotProps } from '@/types';
 
-@Component
-export default class GroupCtrlSlot extends Vue {
-  @Prop({ required: true }) readonly groupCtrl!: GroupCtrlSlotProps
+defineProps({
+  groupCtrl: {
+    type: Object as PropType<GroupCtrlSlotProps>,
+    required:true
+  }
+});
+
+const selectedRule = ref<string>('');
 
-  selectedRule: string = ''
-}
 </script>
 
 <template>

dev/Input.vue

@@ -1,26 +1,24 @@
-<script lang="ts">
-import { Vue, Component, Prop } from 'vue-property-decorator';
+<script lang="ts" setup>
+import { computed, defineProps, defineEmits, WritableComputedRef } from 'vue';
 
-@Component({
-  model: {
-    event: 'input',
-    prop: 'value',
-  },
-})
-export default class Input extends Vue {
-  @Prop({
+const props = defineProps({
+  modelValue: {
     type: String,
-    default: '',
-  }) readonly value!: string;
-
-  get model() {
-    return this.value;
+    default: 0
   }
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const model: WritableComputedRef<string> = computed<string>({
+  get: () => {
+    return props.modelValue;
+  },
 
-  set model(value: string) {
-    this.$emit('input', value);
+  set: (value: string) => {
+    emit('update:modelValue', value);
   }
-}
+});
 </script>
 
 <template>