Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
  • Loading branch information
webfansplz committed Dec 20, 2023
2 parents 8902e89 + 06885cc commit 67c004c
Show file tree
Hide file tree
Showing 16 changed files with 149 additions and 77 deletions.
2 changes: 1 addition & 1 deletion packages/client/src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const sidebarExpanded = computed(() => clientState.value.expandSidebar)
watchEffect(() => {
const scale = devtoolsClientState.value.scale
document.body.style.fontSize = `${scale * 15}px`
document.documentElement.style.fontSize = `${scale * 15}px`
})
watch(connected, (v) => {
Expand Down
60 changes: 34 additions & 26 deletions packages/client/src/pages/assets.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script setup lang="ts">
import type { AssetInfo } from '@vue-devtools-next/core'
import { VueCheckbox, VueDrawer, VueDropdown, VueIcon } from '@vue-devtools-next/ui'
import { VueCheckbox, VueDrawer, VueIcon, VueSelect } from '@vue-devtools-next/ui'
import { useDevToolsBridgeRpc } from '@vue-devtools-next/core'
import Fuse from 'fuse.js'
Expand All @@ -11,15 +11,20 @@ const navbar = ref<HTMLElement>()
const view = ref('grid')
const assets = ref<AssetInfo[]>([])
const bridgeRpc = useDevToolsBridgeRpc()
const extensions = reactiveComputed(() => {
const results: { name: string, value: boolean }[] = []
const uniqAssetsTypes = computed(() => {
const results: { label: string, value: string }[] = []
for (const asset of assets.value || []) {
const ext = asset.path.split('.').pop()
if (ext && !results.find(e => e.name === ext))
results.push({ name: ext, value: true })
if (ext && !results.find(e => e.value === ext))
results.push({ label: ext, value: ext })
}
return results
})
const filteredExtensions = ref<string[]>([])
// first time, selected all
watchOnce(() => uniqAssetsTypes.value, (v) => {
filteredExtensions.value = v.map(i => i.value)
})
const selected = ref<AssetInfo>()
const fuse = computed(() => new Fuse(assets.value || [], {
keys: [
Expand All @@ -32,7 +37,7 @@ const filtered = computed(() => {
: (assets.value || [])
return result.filter((asset) => {
const ext = asset.path.split('.').pop()
return !ext || extensions.some(e => e.name === ext && e.value)
return !ext || filteredExtensions.value.includes(ext)
})
})
Expand Down Expand Up @@ -94,29 +99,32 @@ function toggleView() {
title="File Upload" :border="false" flex="~ gap-0!" action
@click="dropzone = !dropzone"
/> -->
<VueDropdown direction="end" n="sm primary">
<IconTitle
v-tooltip.bottom-end="'Filter'"
icon="i-carbon-filter hover:op50" :border="false"
title="Filter" relative cursor-pointer p2 text-lg
@click="() => { }"
<VueSelect v-model="filteredExtensions" :multiple="true" :options="uniqAssetsTypes">
<template #button>
<IconTitle
v-tooltip.bottom-end="'Filter'"
icon="i-carbon-filter hover:op50" :border="false"
title="Filter" relative cursor-pointer p2 text-lg
@click="() => { }"
>
<span flex="~ items-center justify-center" absolute bottom-0 right-2px h-4 w-4 rounded-full bg-primary-800 text-8px text-white>
{{ filteredExtensions.length }}
</span>
</IconTitle>
</template>
<template
#item="{
item, active,
}"
>
<span flex="~ items-center justify-center" absolute bottom-0 right-2px h-4 w-4 rounded-full bg-primary-800 text-8px text-white>
{{ extensions.length }}
</span>
</IconTitle>
<template #popper>
<div flex="~ col" w-30 of-auto>
<div
v-for="item of extensions" :key="item.name"
w-full flex="~ gap-2 items-center" rounded px2 py2
>
<VueCheckbox v-model="item.value" />
<span text-xs op75>{{ item.name }}</span>
</div>
<div
w-full flex="~ gap-2 items-center" rounded px2 py2
>
<VueCheckbox :model-value="active" />
<span text-xs op75>{{ item.label }}</span>
</div>
</template>
</VueDropdown>
</VueSelect>
<VueIcon
v-tooltip.bottom-end="'Toggle View'"
:border="false"
Expand Down
9 changes: 5 additions & 4 deletions packages/client/src/pages/settings.vue
Original file line number Diff line number Diff line change
Expand Up @@ -166,12 +166,13 @@ const minimizePanelInteractiveLabel = computed(() => {
Switch to Overlay Mode
</VueButton>
</div>
<!-- TODO: need rewrite client/(UI package) to rem based -->
<!-- <div mx--2 my1 h-1px border="b base" op75 />
<div mx--2 my1 h-1px border="b base" op75 />
<p>UI Scale</p>
<div>
<VueSelect v-model="scale" :options="scaleOptions.map(([label, value]) => ({ label, value }))" />
</div> -->
<VueSelect
v-model="scale" :options="scaleOptions.map(([label, value]) => ({ label, value }))" :button-props="{ outlined: true }"
/>
</div>
<div mx--2 my1 h-1px border="b base" op75 />
<div class="flex items-center gap2 text-sm">
<VueCheckbox v-model="expandSidebar" />
Expand Down
4 changes: 3 additions & 1 deletion packages/client/vite.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,9 @@ export default defineConfig(mergeConfig(baseConfig, {
// Removed `browser-extension` and `electron` on `build:lib`
// Remove `vite/dist/client` on building
;['../vite/dist/client'].forEach((dir) => {
fse.rmSync(resolve(__dirname, dir), { recursive: true, force: true })
const absoluteDir = resolve(__dirname, dir)
if (fse.existsSync(absoluteDir))
fse.removeSync(absoluteDir)
})

;['../browser-extension/client', '../electron/client', '../vite/dist/client'].forEach((dir) => {
Expand Down
6 changes: 4 additions & 2 deletions packages/client/vite.lib.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -45,8 +45,10 @@ export default defineConfig(mergeConfig(baseConfig, {
;['../browser-extension/client', '../electron/client'].forEach((dir) => {
// NOTE: remember the order of `build:lib` and `build`,
// if change the order, rmSync must set in `build` stage
fse.rmSync(resolve(__dirname, dir), { recursive: true, force: true })
fse.copySync(clientFile, resolve(__dirname, dir))
const absoluteDir = resolve(__dirname, dir)
if (fse.existsSync(absoluteDir))
fse.removeSync(absoluteDir)
fse.copySync(clientFile, absoluteDir)
})
},
},
Expand Down
8 changes: 4 additions & 4 deletions packages/ui/src/components/Button.vue
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ const variantClasses = computed(() => {
<component
:is="component" v-bind="$attrs"
role="button" :aria-disabled="disabled"
class="$ui-base $ui-inline-fcc inline-flex cursor-pointer select-none gap5px py-0 no-underline $ui-transition"
class="$ui-base $ui-inline-fcc inline-flex cursor-pointer select-none gap1.25 py-0 no-underline $ui-transition"
:class="[
[styles.common[props.type]],
{
Expand All @@ -119,14 +119,14 @@ const variantClasses = computed(() => {
},
[
outlined ? 'b-1 $ui-border-base active:ring-3 shadow-sm' : 'border-none',
size === 'mini' ? 'px4px text-12px h22px' : 'px-14px text-14px h32px',
size === 'mini' ? 'px1 text-3 h5.5' : 'px3.5 text-3.5 h8',
variantClasses,
],
]"
@click.capture="handleClick"
>
<LoadingIndicator v-if="loading" class="mt2px h-full w-12px" />
<slot v-else name="icon" class="h-full w-12px $ui-inline-fcc" />
<LoadingIndicator v-if="loading" class="mt0.5 h-full w3" />
<slot v-else name="icon" class="h-full w3 $ui-inline-fcc" />
<div v-if="slots.default">
<slot />
</div>
Expand Down
4 changes: 2 additions & 2 deletions packages/ui/src/components/Checkbox.vue
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const value = useVModel(props, 'modelValue', emit)

<template>
<div
class="relative $ui-base h20px w20px $ui-inline-fcc cursor-pointer border-2px rounded-5px transition-colors duration-200 ease-in-out"
class="relative $ui-base h5 w5 $ui-inline-fcc cursor-pointer border-0.125rem rounded-1.25 transition-colors duration-200 ease-in-out"
:class="[
value
? variant === 'normal'
Expand All @@ -31,7 +31,7 @@ const value = useVModel(props, 'modelValue', emit)
:class="[
value ? 'opacity-100' : 'opacity-0',
]"
class="h-60% w-35% transform-translate-y--1px transform-rotate-45 border-width-[0_2px_2px_0] border-white border-solid transition-opacity duration-200 ease-in-out"
class="h-60% w-35% transform-translate-y--0.25 transform-rotate-45 border-width-[0_0.125rem_0.125rem_0] border-white border-solid transition-opacity duration-200 ease-in-out"
/>
</div>
</template>
4 changes: 2 additions & 2 deletions packages/ui/src/components/Confirm.vue
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const props = withDefaults(defineProps<{
cancelText: 'Cancel',
confirmText: 'Confirm',
width: '20%',
height: '150px',
height: '9rem',
title: 'Warning',
loading: false,
autoClose: true,
Expand Down Expand Up @@ -50,7 +50,7 @@ function close(close = false) {
{{ content }}
</slot>
<template #footer>
<div class="$ui-fec gap10px">
<div class="$ui-fec gap2.5">
<VueButton
@click="() => {
emit('cancel')
Expand Down
14 changes: 7 additions & 7 deletions packages/ui/src/components/Dialog.vue
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@ const props = withDefaults(
title: 'Dialog',
modelValue: false,
autoClose: true,
width: '500px',
height: '300px',
width: '32rem',
height: '18rem',
closable: true,
mountTo: 'body',
},
Expand Down Expand Up @@ -58,21 +58,21 @@ onMounted(() => isMount.value = true)
<template>
<Teleport v-if="isMount || mountTo === 'body'" :to="mountTo">
<Transition
enter-from-class="opacity-0 [&_.modal]:scale-95 [&_.content,&_.footer]:translate-y--10px [&_.content,&_.footer]:opacity-0"
enter-from-class="opacity-0 [&_.modal]:scale-95 [&_.content,&_.footer]:translate-y--2.5 [&_.content,&_.footer]:opacity-0"
enter-to-class="opacity-100 [&_.modal]:scale-100"
leave-from-class="opacity-100 [&_.modal]:scale-100"
leave-to-class="opacity-0 [&_.modal]:scale-95"
>
<Overlay v-if="show" :dim="dim" :blur="blur">
<div
class="modal relative grid grid-rows-[30px_1fr_40px] $ui-base max-h-[calc(100vh-100x)] max-w-[calc(100vw-100px)] min-h-100px min-w-200px gap-10px rounded-md bg-white px24px py18px color-gray-800 shadow-2xl transition-transform transition-duration-300 dark:bg-gray-900 dark:color-gray-200"
class="modal relative grid grid-rows-[1.875rem_1fr_2.5rem] $ui-base max-h-[calc(100vh-6.25rem)] max-w-[calc(100vw-6.25rem)] min-h-6.25rem min-w-12.5rem gap-2.5 rounded-md bg-white px6 py4.5 color-gray-800 shadow-2xl transition-transform transition-duration-300 dark:bg-gray-900 dark:color-gray-200"
:style="{
width: props.width,
height: props.height,
}"
>
<div class="h-30px w-full $ui-fbc">
<div class="text-18px">
<div class="h7.5 w-full $ui-fbc">
<div class="text-4.5">
<slot name="title">
{{ props.title }}
</slot>
Expand All @@ -84,7 +84,7 @@ onMounted(() => isMount.value = true)
<div class="content transition-all transition-duration-300">
<slot />
</div>
<div class="footer h32px w-full transition-all transition-duration-300 delay-250">
<div class="footer h8 w-full transition-all transition-duration-300 delay-250">
<slot name="footer">
<slot name="footer">
<div class="$ui-fcc">
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/src/components/Drawer.vue
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ onMounted(() => isMount.value = true)
top: placement === 'bottom' ? 'auto' : `${height}px`,
height: ['top', 'bottom'].includes(placement) ? 'auto' : `calc(100% - ${height}px)`,
}"
class="drawer pointer-events-auto absolute min-w-100px of-auto $ui-border-base transition-transform transition-duration-300"
class="drawer pointer-events-auto absolute min-w-25 of-auto $ui-border-base transition-transform transition-duration-300"
@click.stop
>
<div v-if="closable" class="i-carbon-close absolute right-1.5 top-1.5 $ui-z-max cursor-pointer p1 text-lg $ui-text" @click="show = false" />
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/src/components/FormField.vue
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ const iconMapping = {
<div class="$ui-base">
<VueInput v-model="value" :placeholder="placeholder" @update-focused="f => focused = f" />
<div
class="mt2 $ui-base text-14px" :class="[
class="mt2 $ui-base text-3.5" :class="[
statusMapping[status],
{ 'opacity-65': !focused },
]"
Expand Down
4 changes: 2 additions & 2 deletions packages/ui/src/components/Input.vue
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ watchEffect(() => {

<template>
<div
class="group relative w-200px w-auto flex items-center justify-between gap-2px overflow-hidden b-1 rounded-1 px12px py-3px color-gray-800 dark:color-gray-100"
class="group relative w-50 w-auto flex items-center justify-between gap-0.5 overflow-hidden b-1 rounded-1 px3 py-0.75 color-gray-800 dark:color-gray-100"
:class="[
{
'border-none bg-transparent group': variant === 'flat',
Expand Down Expand Up @@ -111,7 +111,7 @@ watchEffect(() => {
</div>
<!-- Focus animation -->
<div
v-if="!noFocusAnimation" class="pointer-events-none absolute bottom--1px left-50% right-50% z-9999 h-3px bg-primary-500 opacity-0 transition-all duration-240 group-[&.focused]:(left-0 right-0 opacity-100) group-[&.accent.focused]:bg-accent-500"
v-if="!noFocusAnimation" class="pointer-events-none absolute bottom--0.25 left-50% right-50% z-9999 h-0.75 bg-primary-500 opacity-0 transition-all duration-240 group-[&.focused]:(left-0 right-0 opacity-100) group-[&.accent.focused]:bg-accent-500"
/>
</div>
</template>
2 changes: 1 addition & 1 deletion packages/ui/src/components/LoadingIndicator.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div class="h-12px w-12px $ui-inline-fcc">
<div class="h-3 w-3 $ui-inline-fcc">
<svg class="animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
Expand Down
Loading

0 comments on commit 67c004c

Please sign in to comment.