Update components to <script setup>.

packages/renderer/src/components/CommandBar.vue

@@ -1,29 +1,29 @@
 <template>
   <div>
     <div
-      class="app-region-drag bg-system-background-nav-bar p-2 flex items-baseline space-x-2"
+      class="flex items-baseline p-2 space-x-2 app-region-drag bg-system-background-nav-bar"
       style="height: env(titlebar-area-height, 40px); width: env(titlebar-area-width, 0px);"
     >
       <ConnectionState size="small" />
 
       <span>obs-layout</span>
     </div>
-    <div class="bg-system-background-nav-bar flex items-center justify-end">
+    <div class="flex items-center justify-end bg-system-background-nav-bar">
       <Popover class="relative">
-        <PopoverButton class="flex items-center hover:bg-gray-300 p-3 space-x-1">
+        <PopoverButton class="flex items-center p-3 space-x-1 hover:bg-gray-300">
           <CloudUploadIcon class="w-6 h-6 text-gray-600" />
 
           <span>Sync</span>
         </PopoverButton>
 
-        <PopoverPanel class="absolute z-10 right-0">
+        <PopoverPanel class="absolute right-0 z-10">
           <sync-popover />
         </PopoverPanel>
       </Popover>
 
       <button
-        class="flex space-x-1 hover:bg-gray-300 p-3"
-        @click="openSettings"
+        class="flex p-3 space-x-1 hover:bg-gray-300"
+        @click="$emit('openSettings')"
       >
         <CogIcon class="w-6 h-6 text-gray-600" />
 
@@ -33,27 +33,13 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
 import { CloudUploadIcon, CogIcon } from '@heroicons/vue/outline';
 import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue';
 import ConnectionState from './ConnectionState.vue';
 import SyncPopover from './SyncPopover.vue';
-export default defineComponent({
-  components: {
-    CloudUploadIcon,
-    CogIcon,
-    ConnectionState,
-    SyncPopover,
-    Popover,
-    PopoverButton,
-    PopoverPanel,
-  },
-  emits: ['openSettings'],
-  setup(_, { emit }) {
-    return {
-      openSettings: () => emit('openSettings'),
-    };
-  },
-});
+
+defineEmits<{
+  (e: 'openSettings'): void
+}>();
 </script>

packages/renderer/src/components/ConnectionState.vue

@@ -6,32 +6,21 @@
 </template>
 
 <script lang="ts" setup>
-import type { PropType} from 'vue';
 import { computed } from 'vue';
 import { useStore } from '/@/store/app';
 import { OBSConnectionState } from '../../../shared/src/obs';
 
-enum Size {
-  Small = 'small',
-  Medium = 'medium'
-}
-
-const props = defineProps({
-  size: {
-    type: String as PropType<Size>,
-    required: true
-  }
-});
-
-
+const props = defineProps<{
+  size: 'small' | 'medium'
+}>();
 
 const store = useStore();
 
 const sizeClasses = computed(() => {
   switch (props.size) {
-    case Size.Small:
+    case 'small':
       return 'w-2 h-2';
-    case Size.Medium:
+    case 'medium':
       return 'w-4 h-4';
     default:
       return '';

packages/renderer/src/components/Controls.vue

@@ -14,35 +14,52 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import { Component } from '/@/layout';
 import { useStore } from '/@/store/app';
-import { computed, defineComponent } from 'vue';
+import { computed } from 'vue';
 import ControlComponents from './Controls/Registry';
-export default defineComponent({
-  name: 'Controls',
-  components: {
-    ...ControlComponents.components,
-  },
-  setup() {
-    const store = useStore();
-    const component = computed(() => store.state.selectedComponent);
-    const controls = computed(() => {
-      let controlComponent = Object.getPrototypeOf(component.value);
-      let controlsComponents = [];
-      do {
-        let control: any = ControlComponents.registry.get(controlComponent.constructor);
-        if (control) {
-          controlsComponents.push(control);
-        }
-        controlComponent = Object.getPrototypeOf(controlComponent);
-      } while (controlComponent instanceof Component);
-      return controlsComponents.reverse();
-    });
-    return {
-      controls,
-      component,
-    };
-  },
+
+const store = useStore();
+const component = computed(() => store.state.selectedComponent);
+
+const controls = computed(() => {
+  let controlComponent = Object.getPrototypeOf(component.value);
+  let controlsComponents = [];
+  do {
+    let control = ControlComponents.registry.get(controlComponent.constructor);
+    if (control) {
+      controlsComponents.push(control);
+    }
+    controlComponent = Object.getPrototypeOf(controlComponent);
+  } while (controlComponent instanceof Component);
+  return controlsComponents.reverse();
 });
+
+// export default defineComponent({
+//   name: 'Controls',
+//   components: {
+//     ...ControlComponents.components,
+//   },
+//   setup() {
+//     const store = useStore();
+//     const component = computed(() => store.state.selectedComponent);
+//     const controls = computed(() => {
+//       let controlComponent = Object.getPrototypeOf(component.value);
+//       let controlsComponents = [];
+//       do {
+//         let control: any = ControlComponents.registry.get(controlComponent.constructor);
+//         if (control) {
+//           controlsComponents.push(control);
+//         }
+//         controlComponent = Object.getPrototypeOf(controlComponent);
+//       } while (controlComponent instanceof Component);
+//       return controlsComponents.reverse();
+//     });
+//     return {
+//       controls,
+//       component,
+//     };
+//   },
+// });
 </script>

packages/renderer/src/components/Controls/Controls.vue

@@ -10,10 +10,7 @@
 </template>
 
 <script lang="ts" setup>
-defineProps({
-  title: {
-    type: String,
-    required: true,
-  },
-});
+defineProps<{
+  title: string
+}>();
 </script>

packages/renderer/src/components/Controls/FlexComponentControls.vue

@@ -33,49 +33,34 @@
   </Controls>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import type { FlexComponent } from '/@/layout';
 import { useStore } from '/@/store/app';
 import { FLEX_SET_DIRECTION, FLEX_SET_DISTRIBUTION, FLEX_SET_SPACING } from '/@/store/mutation-types';
 import { useIsWindows } from '/@/integration/platform';
-import type { PropType} from 'vue';
-import { computed, defineComponent, toRefs } from 'vue';
+import { computed } from 'vue';
+
 import FormSelect from '/@/components/Form/FormSelect.vue';
 import FormNumberInput from '/@/components/Form/FormNumberInput.vue';
 import Controls from './Controls.vue';
-export default defineComponent({
-  name: 'FlexComponentControls',
-  props: {
-    component: {
-      type: Object as PropType<FlexComponent>,
-      required: true,
-    },
-  },
-  components: {
-    FormSelect,
-    FormNumberInput,
-    Controls,
-  },
-  setup(props) {
-    const store = useStore();
-    const { component } = toRefs(props);
-    const isWindows = useIsWindows();
 
-    return {
-      direction: computed({
-        get() { return component.value.direction; },
-        set(direction) { store.commit(FLEX_SET_DIRECTION, direction); },
-      }),
-      distribution: computed({
-        get() { return component.value.distribution; },
-        set(distribution) { store.commit(FLEX_SET_DISTRIBUTION, distribution); },
-      }),
-      spacing: computed({
-        get() { return component.value.spacing; },
-        set(spacing: number) { store.commit(FLEX_SET_SPACING, spacing); },
-      }),
-      isWindows,
-    };
-  },
+const props = defineProps<{
+  component: FlexComponent
+}>();
+
+const store = useStore();
+const isWindows = useIsWindows();
+
+const direction = computed({
+  get(): 'horizontal' | 'vertical' { return props.component.direction; },
+  set(direction: 'horizontal' | 'vertical') { store.commit(FLEX_SET_DIRECTION, direction); },
+});
+const distribution = computed({
+  get(): 'leading' | 'center' | 'trailing' { return props.component.distribution; },
+  set(distribution: 'leading' | 'center' | 'trailing') { store.commit(FLEX_SET_DISTRIBUTION, distribution); },
+});
+const spacing = computed({
+  get() { return props.component.spacing; },
+  set(spacing: number) { store.commit(FLEX_SET_SPACING, spacing); },
 });
 </script>

packages/renderer/src/components/Controls/InsetComponentControls.vue

@@ -20,63 +20,53 @@
   </Controls>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import type InsetComponent from '/@/layout/InsetComponent';
 import { useStore } from '/@/store/app';
 import { INSET_SET_INSETS } from '/@/store/mutation-types';
-import type { PropType} from 'vue';
-import { computed, defineComponent, toRefs } from 'vue';
+import { computed } from 'vue';
 import FormNumberInput from '/@/components/Form/FormNumberInput.vue';
 import Controls from './Controls.vue';
-export default defineComponent({
-  name: 'InsetComponentControls',
-  props: {
-    component: {
-      type: Object as PropType<InsetComponent>,
-      required: true,
-    },
+
+const props = defineProps<{
+  component: InsetComponent
+}>();
+
+const store = useStore();
+
+const top = computed({
+  get() { return props.component.insets.top; },
+  set(newValue: number) {
+    const insets = props.component.insets;
+    insets.top = newValue;
+    store.commit(INSET_SET_INSETS, insets);
+  },
+});
+
+const left = computed({
+  get() { return props.component.insets.left; },
+  set(newValue: number) {
+    const insets = props.component.insets;
+    insets.left = newValue;
+    store.commit(INSET_SET_INSETS, insets);
   },
-  components: {
-    FormNumberInput,
-    Controls,
+});
+
+const bottom = computed({
+  get() { return props.component.insets.bottom; },
+  set(newValue: number) {
+    const insets = props.component.insets;
+    insets.bottom = newValue;
+    store.commit(INSET_SET_INSETS, insets);
   },
-  setup(props) {
-    const { component } = toRefs(props);
-    const store = useStore();
-    return {
-      top: computed({
-        get() { return component.value.insets.top; },
-        set(newValue: number) {
-          const insets = component.value.insets;
-          insets.top = newValue;
-          store.commit(INSET_SET_INSETS, insets);
-        },
-      }),
-      left: computed({
-        get() { return component.value.insets.left; },
-        set(newValue: number) {
-          const insets = component.value.insets;
-          insets.left = newValue;
-          store.commit(INSET_SET_INSETS, insets);
-        },
-      }),
-      bottom: computed({
-        get() { return component.value.insets.bottom; },
-        set(newValue: number) {
-          const insets = component.value.insets;
-          insets.bottom = newValue;
-          store.commit(INSET_SET_INSETS, insets);
-        },
-      }),
-      right: computed({
-        get() { return component.value.insets.right; },
-        set(newValue: number) {
-          const insets = component.value.insets;
-          insets.right = newValue;
-          store.commit(INSET_SET_INSETS, insets);
-        },
-      }),
-    };
+});
+
+const right = computed({
+  get() { return props.component.insets.right; },
+  set(newValue: number) {
+    const insets = props.component.insets;
+    insets.right = newValue;
+    store.commit(INSET_SET_INSETS, insets);
   },
 });
 </script>