fix(enhanced-readabilities): use plain CSS styles to prevent outline …

…class overrides (#315) (#320) Signed-off-by: Neko Ayaka <neko@ayaka.moe>
nolebase · Oct 11, 2024 · a3057fc · a3057fc
1 parent 6beb3a2
commit a3057fc
Show file tree

Hide file tree

Showing 12 changed files with 92 additions and 99 deletions.
diff --git a/docs/pages/en/index.md b/docs/pages/en/index.md
@@ -159,7 +159,7 @@ Nólëbase Integrations project provides a variety of integrations, plugins, com
     💕 Thanks to all the contributors!
   </h2>
 
-  <a href="https://github.com/nolebase/integrations/graphs/contributors">
+  <a href="https://github.com/nolebase/integrations/graphs/contributors" flex justify-center>
     <img src="https://contrib.rocks/image?repo=nolebase/integrations" />
   </a>
 </div>

diff --git a/docs/pages/en/ui/input-horizontal-radio-group/index.md b/docs/pages/en/ui/input-horizontal-radio-group/index.md
@@ -119,8 +119,6 @@ This package is still in the Alpha test stage and is not recommended for use in
   v-model="value1"
   bg="zinc-200/50 dark:zinc-800/50"
   text="sm zinc-100"
-  outline="transparent 2px offset-4px dashed"
-  transition="outline duration-200 ease"
   :options="fieldOptions1"
 />
 
@@ -130,8 +128,6 @@ This package is still in the Alpha test stage and is not recommended for use in
   v-model="value2"
   bg="zinc-200/50 dark:zinc-800/50"
   text="sm zinc-100"
-  outline="transparent 2px offset-4px dashed"
-  transition="outline duration-200 ease"
   :options="fieldOptions2"
 />
 
@@ -141,8 +137,6 @@ This package is still in the Alpha test stage and is not recommended for use in
   v-model="value3"
   bg="zinc-200/50 dark:zinc-800/50"
   text="sm zinc-100"
-  outline="transparent 2px offset-4px dashed"
-  transition="outline duration-200 ease"
   :options="fieldOptions3"
 />
 
@@ -153,8 +147,6 @@ This package is still in the Alpha test stage and is not recommended for use in
 <NuInputHorizontalRadioGroup
   bg="zinc-200/50 dark:zinc-800/50"
   text="sm zinc-100"
-  outline="transparent 2px offset-4px dashed"
-  transition="outline duration-200 ease"
   :options="fieldOptions1"
   :disabled="true"
 />
@@ -164,8 +156,6 @@ This package is still in the Alpha test stage and is not recommended for use in
 <NuInputHorizontalRadioGroup
   bg="zinc-200/50 dark:zinc-800/50"
   text="sm zinc-100"
-  outline="transparent 2px offset-4px dashed"
-  transition="outline duration-200 ease"
   :options="fieldOptions2"
   :disabled="true"
 />
@@ -175,8 +165,6 @@ This package is still in the Alpha test stage and is not recommended for use in
 <NuInputHorizontalRadioGroup
   bg="zinc-200/50 dark:zinc-800/50"
   text="sm zinc-100"
-  outline="transparent 2px offset-4px dashed"
-  transition="outline duration-200 ease"
   :options="fieldOptions3"
   :disabled="true"
 />
diff --git a/docs/pages/zh-CN/index.md b/docs/pages/zh-CN/index.md
@@ -159,7 +159,7 @@ Nólëbase 集成项目提供多种不同的集成、插件、组件和库来方
     💕 感谢所有贡献者！
   </h2>
 
-  <a href="https://github.com/nolebase/integrations/graphs/contributors">
+  <a href="https://github.com/nolebase/integrations/graphs/contributors" flex justify-center>
     <img src="https://contrib.rocks/image?repo=nolebase/integrations" />
   </a>
 </div>

diff --git a/docs/pages/zh-CN/ui/input-horizontal-radio-group/index.md b/docs/pages/zh-CN/ui/input-horizontal-radio-group/index.md
@@ -119,8 +119,6 @@ const fieldOptions3 = [
   v-model="value1"
   bg="zinc-200/50 dark:zinc-800/50"
   text="sm zinc-100"
-  outline="transparent 2px offset-4px dashed"
-  transition="outline duration-200 ease"
   :options="fieldOptions1"
 />
 
@@ -130,8 +128,6 @@ const fieldOptions3 = [
   v-model="value2"
   bg="zinc-200/50 dark:zinc-800/50"
   text="sm zinc-100"
-  outline="transparent 2px offset-4px dashed"
-  transition="outline duration-200 ease"
   :options="fieldOptions2"
 />
 
@@ -141,8 +137,6 @@ const fieldOptions3 = [
   v-model="value3"
   bg="zinc-200/50 dark:zinc-800/50"
   text="sm zinc-100"
-  outline="transparent 2px offset-4px dashed"
-  transition="outline duration-200 ease"
   :options="fieldOptions3"
 />
 
@@ -153,8 +147,6 @@ const fieldOptions3 = [
 <NuInputHorizontalRadioGroup
   bg="zinc-200/50 dark:zinc-800/50"
   text="sm zinc-100"
-  outline="transparent 2px offset-4px dashed"
-  transition="outline duration-200 ease"
   :options="fieldOptions1"
   :disabled="true"
 />
@@ -164,8 +156,6 @@ const fieldOptions3 = [
 <NuInputHorizontalRadioGroup
   bg="zinc-200/50 dark:zinc-800/50"
   text="sm zinc-100"
-  outline="transparent 2px offset-4px dashed"
-  transition="outline duration-200 ease"
   :options="fieldOptions2"
   :disabled="true"
 />
@@ -175,8 +165,6 @@ const fieldOptions3 = [
 <NuInputHorizontalRadioGroup
   bg="zinc-200/50 dark:zinc-800/50"
   text="sm zinc-100"
-  outline="transparent 2px offset-4px dashed"
-  transition="outline duration-200 ease"
   :options="fieldOptions3"
   :disabled="true"
 />
diff --git a/packages/ui/src/components/NuInputHighlight.vue b/packages/ui/src/components/NuInputHighlight.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+defineProps<{
+  active: boolean
+}>()
+</script>
+
+<template>
+  <div
+    class="input-highlight"
+    transition="outline duration-200 ease"
+    :class="{
+      active: Boolean(active),
+    }"
+  >
+    <slot />
+  </div>
+</template>
+
+<style lang="css" scoped>
+.input-highlight {
+  outline-width: 2px;
+  outline-color: transparent;
+  outline-offset: 4px;
+  outline-style: dashed;
+}
+
+.input-highlight.active {
+  outline-color: var(--vp-c-brand-1);
+}
+</style>
diff --git a/packages/ui/src/components/NuInputSlider.vue b/packages/ui/src/components/NuInputSlider.vue
@@ -123,8 +123,6 @@ watch(inputValue, () => {
     bg="zinc-200/50 dark:zinc-800/50"
     w-full appearance-none rounded-lg border-none p-1 space-x-2
     text="sm zinc-300"
-    outline="transparent 2px offset-4px dashed"
-    transition="outline duration-200 ease"
   >
     <label
       class="nolebase-ui-slider nolebase-ui-slider"

diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
@@ -1,4 +1,5 @@
 import NuButton from './components/NuButton.vue'
+import NuInputHighlight from './components/NuInputHighlight.vue'
 import NuInputHorizontalRadioGroup from './components/NuInputHorizontalRadioGroup/index.vue'
 import NuInputSlider from './components/NuInputSlider.vue'
 import NuTag from './components/NuTag/index.vue'
@@ -9,6 +10,7 @@ import { createI18n } from './composables/i18n'
 export {
   createI18n,
   NuButton,
+  NuInputHighlight,
   NuInputHorizontalRadioGroup,
   NuInputSlider,
   NuTag,

diff --git a/packages/vitepress-plugin-enhanced-readabilities/src/client/components/LayoutSwitch.vue b/packages/vitepress-plugin-enhanced-readabilities/src/client/components/LayoutSwitch.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { NuInputHorizontalRadioGroup } from '@nolebase/ui'
+import { NuInputHighlight, NuInputHorizontalRadioGroup } from '@nolebase/ui'
 import { useLocalStorage, useMediaQuery, useMounted } from '@vueuse/core'
 import { useRoute } from 'vitepress'
 import { computed, inject, onMounted, ref, watch } from 'vue'
@@ -165,18 +165,15 @@ onMounted(() => {
         </div>
       </MenuHelp>
     </div>
-    <NuInputHorizontalRadioGroup
-      v-model="layoutMode"
-      bg="$vp-nolebase-enhanced-readabilities-menu-background-color"
-      text="sm $vp-nolebase-enhanced-readabilities-menu-text-color"
-      outline="transparent 2px offset-4px dashed"
-      transition="outline duration-200 ease"
-      :class="{
-        'outline-$vp-c-brand-1!': isMenuHelpPoppedUp,
-      }"
-      :options="fieldOptions"
-      :disabled="disabled"
-    />
+    <NuInputHighlight :active="isMenuHelpPoppedUp" class="rounded-md">
+      <NuInputHorizontalRadioGroup
+        v-model="layoutMode"
+        bg="$vp-nolebase-enhanced-readabilities-menu-background-color"
+        text="sm $vp-nolebase-enhanced-readabilities-menu-text-color"
+        :options="fieldOptions"
+        :disabled="disabled"
+      />
+    </NuInputHighlight>
   </div>
 </template>
 

diff --git a/...-enhanced-readabilities/src/client/components/LayoutSwitchContentLayoutMaxWidthSlider.vue b/...-enhanced-readabilities/src/client/components/LayoutSwitchContentLayoutMaxWidthSlider.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { NuInputSlider, NuVerticalTransition } from '@nolebase/ui'
+import { NuInputHighlight, NuInputSlider, NuVerticalTransition } from '@nolebase/ui'
 import { useDebounceFn, useLocalStorage, useMediaQuery, useMounted, useStorage } from '@vueuse/core'
 import { computed, inject, onMounted, ref, watch } from 'vue'
 
@@ -141,21 +141,19 @@ watch(maxWidthValue, (val) => {
           </div>
         </MenuHelp>
       </div>
-      <NuInputSlider
-        v-model="maxWidthValue"
-        bg="$vp-nolebase-enhanced-readabilities-menu-background-color"
-        text="sm $vp-nolebase-enhanced-readabilities-menu-text-color"
-        name="VitePress Nolebase Enhanced Readabilities content layout max width range slider"
-        :class="{
-          'outline-$vp-c-brand-1!': isMenuHelpPoppedUp,
-          'rounded-md': isMenuHelpPoppedUp,
-        }"
-        :aria-label="t('layoutSwitch.contentLayoutMaxWidth.optionFullWidthAriaLabel')"
-        :disabled="disabled"
-        :min="minScaled"
-        :max="maxScaled"
-        :formatter="(val) => `${Math.ceil(val / 100)}%`"
-      />
+      <NuInputHighlight :active="isMenuHelpPoppedUp" class="rounded-md">
+        <NuInputSlider
+          v-model="maxWidthValue"
+          bg="$vp-nolebase-enhanced-readabilities-menu-background-color"
+          text="sm $vp-nolebase-enhanced-readabilities-menu-text-color"
+          name="VitePress Nolebase Enhanced Readabilities content layout max width range slider"
+          :aria-label="t('layoutSwitch.contentLayoutMaxWidth.optionFullWidthAriaLabel')"
+          :disabled="disabled"
+          :min="minScaled"
+          :max="maxScaled"
+          :formatter="(val) => `${Math.ceil(val / 100)}%`"
+        />
+      </NuInputHighlight>
     </div>
   </NuVerticalTransition>
 </template>
diff --git a/...gin-enhanced-readabilities/src/client/components/LayoutSwitchPageLayoutMaxWidthSlider.vue b/...gin-enhanced-readabilities/src/client/components/LayoutSwitchPageLayoutMaxWidthSlider.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { NuInputSlider, NuVerticalTransition } from '@nolebase/ui'
+import { NuInputHighlight, NuInputSlider, NuVerticalTransition } from '@nolebase/ui'
 import { useDebounceFn, useLocalStorage, useMediaQuery, useMounted, useStorage } from '@vueuse/core'
 import { computed, inject, onMounted, ref, watch } from 'vue'
 
@@ -138,21 +138,19 @@ watch(maxWidthValue, (val) => {
           </div>
         </MenuHelp>
       </div>
-      <NuInputSlider
-        v-model="maxWidthValue"
-        bg="$vp-nolebase-enhanced-readabilities-menu-background-color"
-        text="sm $vp-nolebase-enhanced-readabilities-menu-text-color"
-        name="VitePress Nolebase Enhanced Readabilities page layout max width range slider"
-        :class="{
-          'outline-$vp-c-brand-1!': isMenuHelpPoppedUp,
-          'rounded-md': isMenuHelpPoppedUp,
-        }"
-        :aria-label="t('layoutSwitch.pageLayoutMaxWidth.sliderAriaLabel')"
-        :disabled="disabled"
-        :min="minScaled"
-        :max="maxScaled"
-        :formatter="(val) => `${Math.ceil(val / 100)}%`"
-      />
+      <NuInputHighlight :active="isMenuHelpPoppedUp" class="rounded-md">
+        <NuInputSlider
+          v-model="maxWidthValue"
+          bg="$vp-nolebase-enhanced-readabilities-menu-background-color"
+          text="sm $vp-nolebase-enhanced-readabilities-menu-text-color"
+          name="VitePress Nolebase Enhanced Readabilities page layout max width range slider"
+          :aria-label="t('layoutSwitch.pageLayoutMaxWidth.sliderAriaLabel')"
+          :disabled="disabled"
+          :min="minScaled"
+          :max="maxScaled"
+          :formatter="(val) => `${Math.ceil(val / 100)}%`"
+        />
+      </NuInputHighlight>
     </div>
   </NuVerticalTransition>
 </template>
diff --git a/packages/vitepress-plugin-enhanced-readabilities/src/client/components/Spotlight.vue b/packages/vitepress-plugin-enhanced-readabilities/src/client/components/Spotlight.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { NuInputHorizontalRadioGroup } from '@nolebase/ui'
+import { NuInputHighlight, NuInputHorizontalRadioGroup } from '@nolebase/ui'
 import { useMediaQuery, useMounted, useStorage } from '@vueuse/core'
 import { computed, inject, onMounted, ref, watch } from 'vue'
 
@@ -93,17 +93,14 @@ watch(isTouchScreen, () => {
         </div>
       </MenuHelp>
     </div>
-    <NuInputHorizontalRadioGroup
-      v-model="spotlightToggledOn"
-      bg="$vp-nolebase-enhanced-readabilities-menu-background-color"
-      text="sm $vp-nolebase-enhanced-readabilities-menu-text-color"
-      outline="transparent 2px offset-4px dashed"
-      transition="outline duration-200 ease"
-      :class="{
-        'outline-$vp-c-brand-1!': isMenuHelpPoppedUp,
-      }"
-      :options="fieldOptions"
-      :disabled="disabled"
-    />
+    <NuInputHighlight :active="isMenuHelpPoppedUp" class="rounded-md">
+      <NuInputHorizontalRadioGroup
+        v-model="spotlightToggledOn"
+        bg="$vp-nolebase-enhanced-readabilities-menu-background-color"
+        text="sm $vp-nolebase-enhanced-readabilities-menu-text-color"
+        :options="fieldOptions"
+        :disabled="disabled"
+      />
+    </NuInputHighlight>
   </div>
 </template>
diff --git a/packages/vitepress-plugin-enhanced-readabilities/src/client/components/SpotlightStyles.vue b/packages/vitepress-plugin-enhanced-readabilities/src/client/components/SpotlightStyles.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { NuInputHorizontalRadioGroup } from '@nolebase/ui'
+import { NuInputHighlight, NuInputHorizontalRadioGroup } from '@nolebase/ui'
 import { useMediaQuery, useStorage } from '@vueuse/core'
 import { computed, inject, onMounted, ref, watch } from 'vue'
 
@@ -95,18 +95,15 @@ watch(isTouchScreen, () => {
           </div>
         </MenuHelp>
       </div>
-      <NuInputHorizontalRadioGroup
-        v-model="spotlightStyle"
-        bg="$vp-nolebase-enhanced-readabilities-menu-background-color"
-        text="sm $vp-nolebase-enhanced-readabilities-menu-text-color"
-        outline="transparent 2px offset-4px dashed"
-        transition="outline duration-200 ease"
-        :class="{
-          'outline-$vp-c-brand-1!': isMenuHelpPoppedUp,
-        }"
-        :options="fieldOptions"
-        :disabled="disabled"
-      />
+      <NuInputHighlight :active="isMenuHelpPoppedUp" class="rounded-md">
+        <NuInputHorizontalRadioGroup
+          v-model="spotlightStyle"
+          bg="$vp-nolebase-enhanced-readabilities-menu-background-color"
+          text="sm $vp-nolebase-enhanced-readabilities-menu-text-color"
+          :options="fieldOptions"
+          :disabled="disabled"
+        />
+      </NuInputHighlight>
     </div>
   </Transition>
 </template>