feat: wrapped fieldset of options as standalone component (#27)

Signed-off-by: Neko Ayaka <[email protected]>
nolebase · Dec 11, 2023 · 9ab5f0e · 9ab5f0e
1 parent 601f15f
commit 9ab5f0e
Show file tree

Hide file tree

Showing 4 changed files with 115 additions and 77 deletions.
diff --git a/packages/vitepress-plugin-enhanced-readabilities/src/components/LayoutSwitch.vue b/packages/vitepress-plugin-enhanced-readabilities/src/components/LayoutSwitch.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { inject, onMounted, ref, watch } from 'vue'
+import { computed, inject, onMounted, ref, watch } from 'vue'
 import { useLocalStorage, useMediaQuery, useMounted } from '@vueuse/core'
 
 import { InjectionKey, LayoutMode, LayoutSwitchModeStorageKey, supportedLayoutModes } from '../constants'
 import { useLayoutAppearanceChangeAnimation } from '../composables/animation'
 import { useI18n } from '../composables/i18n'
 
-import MenuOption from './MenuOption.vue'
+import MenuOptions from './MenuOptions.vue'
 import MenuTitle from './MenuTitle.vue'
 import MenuHelp from './MenuHelp.vue'
 
@@ -22,6 +22,37 @@ const layoutMode = useLocalStorage(LayoutSwitchModeStorageKey, options.layoutSwi
 const { t } = useI18n()
 const { trigger: triggerAnimation } = useLayoutAppearanceChangeAnimation()
 
+const fieldOptions = computed(() => [
+  {
+    value: LayoutMode.FullWidth,
+    title: t('layoutSwitch.optionFullWidth'),
+    ariaLabel: t('layoutSwitch.optionFullWidthAriaLabel'),
+    icon: 'i-icon-park-outline:full-screen-one',
+    name: 'VitePress Nolebase Enhanced Readabilities Layout Mode Checkbox',
+  },
+  {
+    value: LayoutMode.SidebarWidthAdjustableOnly,
+    title: t('layoutSwitch.optionSidebarWidthAdjustableOnly'),
+    ariaLabel: t('layoutSwitch.optionSidebarWidthAdjustableOnlyAriaLabel'),
+    icon: 'i-icon-park-outline:full-screen-two',
+    name: 'VitePress Nolebase Enhanced Readabilities Layout Mode Checkbox',
+  },
+  {
+    value: LayoutMode.BothWidthAdjustable,
+    title: t('layoutSwitch.optionBothWidthAdjustable'),
+    ariaLabel: t('layoutSwitch.optionBothWidthAdjustableAriaLabel'),
+    icon: 'i-icon-park-outline:full-screen',
+    name: 'VitePress Nolebase Enhanced Readabilities Layout Mode Checkbox',
+  },
+  {
+    value: LayoutMode.Original,
+    title: t('layoutSwitch.optionOriginalWidth'),
+    ariaLabel: t('layoutSwitch.optionOriginalWidthAriaLabel'),
+    icon: 'i-icon-park-outline:off-screen',
+    name: 'VitePress Nolebase Enhanced Readabilities Layout Mode Checkbox',
+  },
+])
+
 function setClasses(val: LayoutMode, animated: boolean) {
   switch (val) {
     case LayoutMode.FullWidth:
@@ -134,56 +165,16 @@ onMounted(() => {
         </div>
       </MenuHelp>
     </div>
-    <fieldset
-      flex="~ row"
-
-      bg="$vp-nolebase-enhanced-readabilities-menu-background-color"
-      w-full appearance-none rounded-lg border-none p-1 space-x-2
-      text="sm $vp-nolebase-enhanced-readabilities-menu-text-color"
+    <MenuOptions
+      v-model="layoutMode"
       outline="transparent 2px offset-4px dashed"
       transition="outline duration-200 ease"
       :class="{
         'outline-$vp-c-brand-1!': isMenuHelpPoppedUp,
-        'rounded-md': isMenuHelpPoppedUp,
       }"
-    >
-      <MenuOption
-        v-model="layoutMode"
-        :value="LayoutMode.FullWidth"
-        :title="t('layoutSwitch.optionFullWidth')"
-        :aria-label="t('layoutSwitch.optionFullWidthAriaLabel')"
-        :disabled="disabled"
-        icon="i-icon-park-outline:full-screen-one"
-        name="VitePress Nolebase Enhanced Readabilities Layout Mode Checkbox"
-      />
-      <MenuOption
-        v-model="layoutMode"
-        :value="LayoutMode.SidebarWidthAdjustableOnly"
-        :title="t('layoutSwitch.optionSidebarWidthAdjustableOnly')"
-        :aria-label="t('layoutSwitch.optionSidebarWidthAdjustableOnlyAriaLabel')"
-        :disabled="disabled"
-        icon="i-icon-park-outline:full-screen-two"
-        name="VitePress Nolebase Enhanced Readabilities Layout Mode Checkbox"
-      />
-      <MenuOption
-        v-model="layoutMode"
-        :value="LayoutMode.BothWidthAdjustable"
-        :title="t('layoutSwitch.optionBothWidthAdjustable')"
-        :aria-label="t('layoutSwitch.optionBothWidthAdjustableAriaLabel')"
-        :disabled="disabled"
-        icon="i-icon-park-outline:full-screen"
-        name="VitePress Nolebase Enhanced Readabilities Layout Mode Checkbox"
-      />
-      <MenuOption
-        v-model="layoutMode"
-        :value="LayoutMode.Original"
-        :title="t('layoutSwitch.optionOriginalWidth')"
-        :aria-label="t('layoutSwitch.optionOriginalWidthAriaLabel')"
-        :disabled="disabled"
-        icon="i-icon-park-outline:off-screen"
-        name="VitePress Nolebase Enhanced Readabilities Layout Mode Checkbox"
-      />
-    </fieldset>
+      :options="fieldOptions"
+      :disabled="disabled"
+    />
   </div>
 </template>
 

diff --git a/packages/vitepress-plugin-enhanced-readabilities/src/components/MenuOption.vue b/packages/vitepress-plugin-enhanced-readabilities/src/components/MenuOption.vue
@@ -27,7 +27,6 @@ const model = computed({
     class="VPNolebaseEnhancedReadabilitiesMenuOption"
     :class="{ active: model === props.value, disabled: props.disabled }"
     :disabled="props.disabled"
-
     text="[14px]"
     w-full inline-flex cursor-pointer select-none items-center justify-center rounded-md px-3 py-2 font-medium
   >

diff --git a/packages/vitepress-plugin-enhanced-readabilities/src/components/MenuOptions.vue b/packages/vitepress-plugin-enhanced-readabilities/src/components/MenuOptions.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import MenuOption from './MenuOption.vue'
+
+interface Option {
+  name: string
+  icon?: string
+  text?: string
+  title: string
+  ariaLabel: string
+  value?: any
+}
+
+interface Props {
+  disabled?: boolean
+  modelValue?: any
+  options: Option[]
+}
+
+const props = defineProps<Props>()
+
+const emits = defineEmits<{
+  (event: 'update:modelValue', value: any): void
+}>()
+
+const model = computed({
+  get: () => props.modelValue,
+  set: val => emits('update:modelValue', val),
+})
+</script>
+
+<template>
+  <fieldset
+    flex="~ row"
+    bg="$vp-nolebase-enhanced-readabilities-menu-background-color"
+    text="sm $vp-nolebase-enhanced-readabilities-menu-text-color"
+    w-full appearance-none rounded-lg rounded-md border-none p-1 space-x-2
+  >
+    <MenuOption
+      v-for="option in props.options"
+      :key="option.name"
+      v-model="model"
+      :name="option.name"
+      :icon="option.icon"
+      :title="option.title"
+      :text="option.text"
+      :aria-label="option.ariaLabel"
+      :disabled="props.disabled"
+      :value="option.value"
+    />
+  </fieldset>
+</template>
diff --git a/packages/vitepress-plugin-enhanced-readabilities/src/components/Spotlight.vue b/packages/vitepress-plugin-enhanced-readabilities/src/components/Spotlight.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { inject, onMounted, ref, watch } from 'vue'
+import { computed, inject, onMounted, ref, watch } from 'vue'
 import { useMediaQuery, useMounted, useStorage } from '@vueuse/core'
 import { useI18n } from '../composables/i18n'
 import { InjectionKey, SpotlightToggledStorageKey } from '../constants'
 import SpotlightHoverBlock from './SpotlightHoverBlock.vue'
 import MenuTitle from './MenuTitle.vue'
-import MenuOption from './MenuOption.vue'
+import MenuOptions from './MenuOptions.vue'
 import MenuHelp from './MenuHelp.vue'
 
 const options = inject(InjectionKey, {})
@@ -19,6 +19,23 @@ const isTouchScreen = useMediaQuery('(pointer: coarse)')
 const spotlightToggledOn = useStorage(SpotlightToggledStorageKey, options.spotlight?.defaultToggle || false)
 const { t } = useI18n()
 
+const fieldOptions = computed(() => [
+  {
+    title: t('spotlight.optionOn'),
+    ariaLabel: t('spotlight.optionOnAriaLabel'),
+    value: true,
+    text: 'ON',
+    name: 'VitePress Nolebase Enhanced Readabilities Spotlight Toggle Switch',
+  },
+  {
+    title: t('spotlight.optionOff'),
+    ariaLabel: t('spotlight.optionOffAriaLabel'),
+    value: false,
+    text: 'OFF',
+    name: 'VitePress Nolebase Enhanced Readabilities Spotlight Toggle Switch',
+  },
+])
+
 onMounted(() => {
   disabled.value = isTouchScreen.value
 })
@@ -72,37 +89,15 @@ watch(isTouchScreen, () => {
         </div>
       </MenuHelp>
     </div>
-    <fieldset
-      flex="~ row"
-
-      bg="$vp-nolebase-enhanced-readabilities-menu-background-color"
-      w-full appearance-none rounded-lg border-none p-1 space-x-2
-      text="sm $vp-nolebase-enhanced-readabilities-menu-text-color"
+    <MenuOptions
+      v-model="spotlightToggledOn"
       outline="transparent 2px offset-4px dashed"
       transition="outline duration-200 ease"
       :class="{
         'outline-$vp-c-brand-1!': isMenuHelpPoppedUp,
-        'rounded-md': isMenuHelpPoppedUp,
       }"
-    >
-      <MenuOption
-        v-model="spotlightToggledOn"
-        :title="t('spotlight.optionOn')"
-        :aria-label="t('spotlight.optionOnAriaLabel')"
-        :value="true"
-        :disabled="disabled"
-        text="ON"
-        name="VitePress Nolebase Enhanced Readabilities Spotlight Toggle Switch"
-      />
-      <MenuOption
-        v-model="spotlightToggledOn"
-        :title="t('spotlight.optionOff')"
-        :aria-label="t('spotlight.optionOffAriaLabel')"
-        :value="false"
-        :disabled="disabled"
-        text="OFF"
-        name="VitePress Nolebase Enhanced Readabilities Spotlight Toggle Switch"
-      />
-    </fieldset>
+      :options="fieldOptions"
+      :disabled="disabled"
+    />
   </div>
 </template>