feat: update API/SFC preference using shortcuts #1449

edimitchel · 2022-01-20T21:47:43Z

Description of Problem

Easy the switch without using mouse and keep focus on content

Proposed Solution

Add keyup event listener for API and SFC preference.

Ctrl+(Alt/Option)+A: toggle Options/Composition API
~~Ctrl+(Alt/Option)+T: toggle template (SFC or HTML)~~

Additional Information

Externalize logic into a composable

netlify · 2022-01-20T21:47:49Z

✔️ Deploy Preview for vue-docs-preview ready!

🔨 Explore the source changes: 9113684

🔍 Inspect the deploy log: https://app.netlify.com/sites/vue-docs-preview/deploys/61f1291fc3d6000007ca34a6

😎 Browse the preview: https://deploy-preview-1449--vue-docs-preview.netlify.app

edimitchel · 2022-01-20T22:10:53Z

@skirtles-code, this one!

yyx990803 · 2022-01-21T08:19:32Z

Can we get rid of the dotted underline? It looks a bit out of place. We can mention the shortcut at the end of the "Introduction - API Styles" section .

edimitchel · 2022-01-21T09:39:55Z

Can we get rid of the dotted underline? It looks a bit out of place. We can mention the shortcut at the end of the "Introduction - API Styles" section .

Yes, I'll do that

Postpone preference changes when it's closed to the change in action

.vitepress/theme/components/preferences.ts

edimitchel · 2022-01-26T10:46:34Z

I just tried on OSX, and shortcut doesn't work for an unknown reason..

edimitchel · 2022-01-26T12:44:02Z

I just tried on OSX, and shortcut doesn't work for an unknown reason..

Fixed!

dammy001 · 2022-01-26T13:04:48Z

@edimitchel Great 👍

src/guide/introduction.md

create usePlateform

netlify · 2022-02-08T11:29:48Z

✅ Deploy Preview for vuejs ready!

Name	Link
🔨 Latest commit	`8ff55a7`
🔍 Latest deploy log	https://app.netlify.com/sites/vuejs/deploys/6317e09f41ec890008030dc7
😎 Deploy Preview	https://deploy-preview-1449--vuejs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

…nce-from-keyboard

edimitchel · 2022-06-08T12:20:17Z

Preview URL: https://deploy-preview-1449--vuejs.netlify.app/
Netlify url in the comment above is not good

skirtles-code

Here are a few small suggestions from me based on an initial read through.

I'd also note that I'm on Ubuntu, which uses Ctrl+Alt+T to launch a terminal window, so I can't actually use that shortcut to toggle the API. But I'm not sure whether that's worth addressing for the relatively small number of people affected.

.vitepress/theme/composables/usePreferences.ts

src/guide/introduction.md

skirtles-code

GitHub seems to be having a lot of problems today. For some reason this review comment didn't get included with my review, so here it is separately:

skirtles-code · 2022-06-10T10:30:14Z

.vitepress/theme/composables/usePreferences.ts

+    ? JSON.parse(localStorage.getItem(key) || String(defaultValue))
+    : defaultValue
+
+export const preferCompositionKey = 'vue-docs-prefer-composition'


Could some of these uses of export const be switched to const? It looks like some of them aren't need outside this file.

…nce-from-keyboard

edimitchel · 2022-09-07T00:11:02Z

I'd also note that I'm on Ubuntu, which uses Ctrl+Alt+T to launch a terminal window, so I can't actually use that shortcut to toggle the API. But I'm not sure whether that's worth addressing for the relatively smaller number of people affected.

Decided to remove the SFC Preference shortcut which don't making sense, unlink the API Preference shortcut

skirtles-code · 2022-10-30T21:27:01Z

.vitepress/theme/components/PreferenceSwitch.vue

+  isOpen,
+  shortcutInfo,
+  showPreference,
+  showSFC,


It seems that showSFC is no longer being returned, so the second switch is currently missing on the Tutorial and Examples pages.

skirtles-code · 2022-10-30T21:31:11Z

.vitepress/theme/composables/usePlatform.ts

@@ -0,0 +1,9 @@
+export default function usePlatform() {
+  const isMac = /(Mac OS X)/i.test(globalThis.navigator?.userAgent)
+  const altKey = isMac ? 'Option' : 'Alt';


Suggested change

const altKey = isMac ? 'Option' : 'Alt';

const altKey = isMac ? 'Option' : 'Alt'

skirtles-code · 2023-03-11T19:54:52Z

@edimitchel I'd like to get this over the line. Could you take a look at my latest comments above? There are also merge conflicts with the current main branch. Thanks.

edimitchel · 2023-07-06T08:49:46Z

Closing this PR as it's not adding as much functionality as I thought

edimitchel added 4 commits December 22, 2021 12:44

fix typo on composition api faq

5f9500a

Merge branch 'vuejs:main' into next

da692e2

feat: update API/SFC from keyboard shortcuts

d214beb

fix: update condition

dc19a96

edimitchel mentioned this pull request Jan 20, 2022

feat: update API/SFC preference using shortcuts #1447

Closed

edimitchel added 3 commits January 20, 2022 22:53

fix: navigator from window

3758364

fix: globalThis instead of window

dc38995

fix: hide after using shortcut when preference was closed

a613c3e

skirtles-code added the new version label Jan 21, 2022

edimitchel added 2 commits January 21, 2022 11:08

fix: add shortcut in docs

8b80e24

Postpone preference changes when it's closed to the change in action

fix: avoid unnecessary toRefs and remove return type

ccee93d

dammy001 reviewed Jan 26, 2022

View reviewed changes

.vitepress/theme/components/preferences.ts Outdated Show resolved Hide resolved

fix: use keycode instead of key

9113684

edimitchel changed the title ~~feat: update API/SFC preference using shortcuts #1447~~ feat: update API/SFC preference using shortcuts Jan 26, 2022

yyx990803 requested changes Feb 8, 2022

View reviewed changes

src/guide/introduction.md Outdated Show resolved Hide resolved

feat: separate into composables files

3c38b7c

create usePlateform

edimitchel added 6 commits February 9, 2022 21:54

fix: use not deprecated api

b8bc156

fix: export as default composable

df537b2

fix: use keyCode

1b60c85

Merge remote-tracking branch 'upstream/main' into feat/update-prefere…

d8389f7

…nce-from-keyboard

fix: bad import default

358626e

fix: conflict

0908ce8

bencodezen added the state: review PR issued and under review label Jun 9, 2022

skirtles-code suggested changes Jun 10, 2022

View reviewed changes

skirtles-code mentioned this pull request Jun 14, 2022

Add HotKey "Ctrl + Space" for switching between Options and Compostion API (issue: #1409) #1551

Closed

edimitchel added 4 commits September 7, 2022 01:50

Merge remote-tracking branch 'upstream/main' into feat/update-prefere…

c26cbc8

…nce-from-keyboard

fix: reuse AugmentedHeader

47c7f9e

fix: apply comment

7e22d00

fix: remove SFC toggle shortcut

8ff55a7

edimitchel requested review from skirtles-code and yyx990803 and removed request for NataliaTepluhina, skirtles-code and yyx990803 September 7, 2022 00:08

edimitchel requested review from skirtles-code and yyx990803 and removed request for skirtles-code and yyx990803 September 7, 2022 00:11

edimitchel requested review from skirtles-code and yyx990803 and removed request for skirtles-code and yyx990803 October 24, 2022 07:10

skirtles-code reviewed Oct 30, 2022

View reviewed changes

edimitchel closed this Jul 6, 2023

edimitchel deleted the feat/update-preference-from-keyboard branch January 2, 2024 10:59

edimitchel restored the feat/update-preference-from-keyboard branch January 2, 2024 10:59

	const altKey = isMac ? 'Option' : 'Alt';
	const altKey = isMac ? 'Option' : 'Alt'

feat: update API/SFC preference using shortcuts #1449

feat: update API/SFC preference using shortcuts #1449

Uh oh!

Conversation

edimitchel commented Jan 20, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description of Problem

Proposed Solution

Additional Information

Uh oh!

netlify bot commented Jan 20, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

edimitchel commented Jan 20, 2022

Uh oh!

yyx990803 commented Jan 21, 2022

Uh oh!

edimitchel commented Jan 21, 2022

Uh oh!

Uh oh!

edimitchel commented Jan 26, 2022

Uh oh!

edimitchel commented Jan 26, 2022

Uh oh!

dammy001 commented Jan 26, 2022

Uh oh!

Uh oh!

netlify bot commented Feb 8, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for vuejs ready!

Uh oh!

edimitchel commented Jun 8, 2022

Uh oh!

skirtles-code left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

skirtles-code left a comment

Choose a reason for hiding this comment

Uh oh!

skirtles-code Jun 10, 2022

Choose a reason for hiding this comment

Uh oh!

edimitchel commented Sep 7, 2022

Uh oh!

skirtles-code Oct 30, 2022

Choose a reason for hiding this comment

Uh oh!

skirtles-code Oct 30, 2022

Choose a reason for hiding this comment

Uh oh!

skirtles-code commented Mar 11, 2023

Uh oh!

edimitchel commented Jul 6, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

edimitchel commented Jan 20, 2022 •

edited

Loading

netlify bot commented Jan 20, 2022 •

edited

Loading

netlify bot commented Feb 8, 2022 •

edited

Loading

skirtles-code left a comment •

edited

Loading