feat(ui-kit): expose NSectionBlock and NIconTitle, introduce `NSe…

…lect` (#102)
nuxt · Feb 27, 2023 · cebe031 · cebe031
1 parent 7b914a9
commit cebe031
Show file tree

Hide file tree

Showing 12 changed files with 89 additions and 53 deletions.
diff --git a/.../devtools/client/components/IconTitle.vue → ...ools-ui-kit/src/components/NIconTitle.vue b/.../devtools/client/components/IconTitle.vue → ...ools-ui-kit/src/components/NIconTitle.vue
@@ -6,7 +6,7 @@ defineProps<{
 </script>
 
 <template>
-  <div flex="~ gap2" items-center>
+  <div class="items-center flex flex-gap2">
     <div v-if="icon" :class="icon" />
     <slot>
       <div>{{ text }}</div>

diff --git a/...vtools/client/components/SectionBlock.vue → ...s-ui-kit/src/components/NSectionBlock.vue b/...vtools/client/components/SectionBlock.vue → ...s-ui-kit/src/components/NSectionBlock.vue
@@ -19,31 +19,31 @@ withDefaults(
 
 <template>
   <details :open="open">
-    <summary select-none cursor-pointer p4 hover:bg-active :class="collapse ? '' : 'pointer-events-none'">
-      <IconTitle :icon="icon" :text="text" text-xl op75>
+    <summary class="select-none cursor-pointer p4 hover:bg-active" :class="collapse ? '' : 'pointer-events-none'">
+      <NIconTitle :icon="icon" :text="text" class="text-xl op75">
         <div>
           {{ text }}
-          <div v-if="description" op50 text-sm>
+          <div v-if="description" class="op50 text-sm">
             {{ description }}
           </div>
         </div>
-        <div flex-auto />
+        <div class="flex-auto" />
         <NIcon
           v-if="collapse"
-          icon="carbon-chevron-down" text-base op50 cursor-pointer transition duration-500 place-self-start
-          class="chevron"
+          icon="carbon-chevron-down"
+          class="text-base op50 cursor-pointer transition duration-500 place-self-start chevron"
         />
-      </IconTitle>
+      </NIconTitle>
     </summary>
-    <div flex="~ col gap2" pt2 pb6 :class="typeof padding === 'string' ? padding : padding ? 'px8' : ''">
+    <div class="pt2 pb6 flex flex-col flex-gap2" :class="typeof padding === 'string' ? padding : padding ? 'px8' : ''">
       <slot name="details" />
-      <div :class="containerClass" mt1>
+      <div :class="containerClass" class="mt1">
         <slot />
       </div>
       <slot name="footer" />
     </div>
   </details>
-  <div x-divider />
+  <div class="x-divider" />
 </template>
 
 <style scoped>

diff --git a/packages/devtools-ui-kit/src/components/NSelect.vue b/packages/devtools-ui-kit/src/components/NSelect.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+const props = withDefaults(
+  defineProps<{
+    modelValue?: any
+    placeholder?: string
+    icon?: string
+    disabled?: boolean
+  }>(),
+  {
+    modelValue: undefined,
+    placeholder: '',
+    disabled: false,
+    icon: '',
+  },
+)
+const emit = defineEmits<{ (...args: any): void }>()
+const input = useVModel(props, 'modelValue', emit, { passive: true })
+</script>
+
+<template>
+  <div
+    class="n-bg-base rounded py-1 border n-border-base flex items-center flex n-text-input focus-within:n-focus-base focus-within:border-context px-2"
+  >
+    <slot name="icon">
+      <NIcon v-if="icon" :icon="icon" class="op50 mr-0.4em text-1.1em" />
+    </slot>
+    <select v-model="input" :disabled="disabled" class="flex-auto n-bg-base w-full !outline-none">
+      <option v-if="placeholder" value="" disabled hidden>
+        {{ placeholder }}
+      </option>
+      <slot />
+    </select>
+  </div>
+</template>
diff --git a/packages/devtools-ui-kit/src/components/NTextInput.vue b/packages/devtools-ui-kit/src/components/NTextInput.vue
@@ -3,7 +3,7 @@ import { useVModel } from '@vueuse/core'
 
 const props = withDefaults(
   defineProps<{
-    modelValue?: string
+    modelValue?: string | number
     placeholder?: string
     icon?: string
     disabled?: boolean
@@ -28,6 +28,7 @@ const input = useVModel(props, 'modelValue', emit, { passive: true })
       v-model="input"
       class="flex-auto n-bg-base w-full !outline-none"
       :type="type"
+      :disabled="disabled"
       :placeholder="placeholder"
     >
   </div>

diff --git a/packages/devtools/client/components/ComponentsList.vue b/packages/devtools/client/components/ComponentsList.vue
@@ -73,42 +73,42 @@ const filtered = computed(() => {
 </script>
 
 <template>
-  <SectionBlock
+  <NSectionBlock
     v-if="filtered.user.length"
     icon="carbon-nominal"
     text="User components"
     :description="`Total components: ${filtered.count.user}`"
   >
     <ComponentItem v-for="c of filtered.user" :key="c.filePath" ml--5 :component="c" />
-  </SectionBlock>
-  <SectionBlock
+  </NSectionBlock>
+  <NSectionBlock
     v-if="filtered.runtime.length"
     icon="carbon-load-balancer-global"
 
     text="Runtime components"
     :description="`Total components: ${filtered.count.runtime}`"
   >
     <ComponentItem v-for="c of filtered.runtime" :key="c.filePath" ml--5 :component="c" />
-  </SectionBlock>
-  <SectionBlock
+  </NSectionBlock>
+  <NSectionBlock
     v-if="filtered.builtin.length"
     icon="simple-icons-nuxtdotjs"
     text="Built-in components"
     :description="`Total components: ${filtered.count.builtin}`"
   >
     <ComponentItem v-for="c of filtered.builtin" :key="c.filePath" ml--5 :component="c" />
-  </SectionBlock>
-  <SectionBlock
+  </NSectionBlock>
+  <NSectionBlock
     v-if="filtered.lib.size"
     icon="carbon-3d-mpr-toggle"
     text="Components from libraries"
     :description="`${filtered.count.lib} components from ${filtered.lib.size} packages`"
   >
     <div v-for="[key, value] of filtered.lib.entries()" :key="key">
-      <IconTitle :text="`${key} (${value.length})`" op50 py1 />
+      <NIconTitle :text="`${key} (${value.length})`" op50 py1 />
       <div pl4>
         <ComponentItem v-for="c of value" :key="c.filePath" :component="c" />
       </div>
     </div>
-  </SectionBlock>
+  </NSectionBlock>
 </template>
diff --git a/packages/devtools/client/pages/modules/hooks.vue b/packages/devtools/client/pages/modules/hooks.vue
@@ -11,22 +11,22 @@ const clientHooks = computed(() => client.value?.getClientHooksMetrics())
 
 <template>
   <div>
-    <SectionBlock
+    <NSectionBlock
       v-if="clientHooks?.length"
       icon="carbon-ibm-cloud-direct-link-1-dedicated-hosting"
       text="Client Hooks"
       :description="`Total hooks: ${clientHooks.length}`"
       padding="pl4 pr6"
     >
       <HooksTable :hooks="clientHooks" />
-    </SectionBlock>
-    <SectionBlock
+    </NSectionBlock>
+    <NSectionBlock
       icon="carbon-ibm-cloud-direct-link-2-dedicated"
       text="Server Hooks"
       :description="`Total hooks: ${serverHooks.length}`"
       padding="pl4 pr6"
     >
       <HooksTable :hooks="serverHooks" />
-    </SectionBlock>
+    </NSectionBlock>
   </div>
 </template>
diff --git a/packages/devtools/client/pages/modules/imports.vue b/packages/devtools/client/pages/modules/imports.vue
@@ -86,29 +86,29 @@ const filtered = computed(() => {
         </NSwitch>
       </div>
     </div>
-    <SectionBlock
+    <NSectionBlock
       v-if="filtered.user.size"
       icon="carbon-function"
       text="User composables"
       :description="`${filtered.count.user} composables from ${filtered.user.size} modules`"
     >
       <ComposableTree :map="filtered.user" :root="config.rootDir" :metadata="importsMetadata" />
-    </SectionBlock>
-    <SectionBlock
+    </NSectionBlock>
+    <NSectionBlock
       v-if="filtered.builtin.size"
       icon="simple-icons-nuxtdotjs"
       text="Built-in composables"
       :description="`${filtered.count.builtin} composables`"
     >
       <ComposableTree :map="filtered.builtin" :root="config.rootDir" :metadata="importsMetadata" />
-    </SectionBlock>
-    <SectionBlock
+    </NSectionBlock>
+    <NSectionBlock
       v-if="filtered.lib.size"
       icon="carbon-3d-mpr-toggle"
       text="Composables from libraries"
       :description="`${filtered.count.lib} composables from ${filtered.lib.size} packages`"
     >
       <ComposableTree :map="filtered.lib" :root="config.rootDir" :metadata="importsMetadata" />
-    </SectionBlock>
+    </NSectionBlock>
   </div>
 </template>
diff --git a/packages/devtools/client/pages/modules/modules.vue b/packages/devtools/client/pages/modules/modules.vue
@@ -36,7 +36,7 @@ watchEffect(() => {
 
 <template>
   <div>
-    <SectionBlock
+    <NSectionBlock
       icon="carbon-3d-mpr-toggle"
       text="Installed Modules"
       container-class="grid grid-cols-minmax-400px gap2"
@@ -52,8 +52,8 @@ watchEffect(() => {
         :key="m.meta?.name || m.entryPath"
         :mod="m"
       />
-    </SectionBlock>
-    <SectionBlock
+    </NSectionBlock>
+    <NSectionBlock
       v-if="userModules.length"
       icon="carbon-3d-mpr-toggle"
       text="User Modules"
@@ -65,6 +65,6 @@ watchEffect(() => {
         :key="m.meta?.name || m.entryPath"
         :mod="m"
       />
-    </SectionBlock>
+    </NSectionBlock>
   </div>
 </template>
diff --git a/packages/devtools/client/pages/modules/pages.vue b/packages/devtools/client/pages/modules/pages.vue
@@ -88,7 +88,7 @@ function navigateToRoute(path: string) {
         </template>
       </div>
     </div>
-    <SectionBlock
+    <NSectionBlock
       v-if="routeInputMatched.length"
       icon="carbon-tree-view"
       text="Matched Routes"
@@ -101,8 +101,8 @@ function navigateToRoute(path: string) {
         :matched-pending="routeInputMatched"
         @navigate="navigateToRoute"
       />
-    </SectionBlock>
-    <SectionBlock
+    </NSectionBlock>
+    <NSectionBlock
       icon="carbon-tree-view-alt"
       text="All Routes"
       :description="`${routes.length} routes registered in your application`"
@@ -115,7 +115,7 @@ function navigateToRoute(path: string) {
         :matched-pending="routeInputMatched"
         @navigate="navigateToRoute"
       />
-    </SectionBlock>
+    </NSectionBlock>
   </div>
   <LaunchPage
     v-else

diff --git a/packages/devtools/client/pages/modules/payload.vue b/packages/devtools/client/pages/modules/payload.vue
@@ -12,7 +12,7 @@ const payload = computed(() => client.value?.nuxt.payload)
 
 <template>
   <div v-if="client">
-    <SectionBlock
+    <NSectionBlock
       icon="carbon-data-set"
       text="State"
       description="Keyed state from `useState`"
@@ -21,8 +21,8 @@ const payload = computed(() => client.value?.nuxt.payload)
       <StateGroup
         :state="payload.state" prefix="$s"
       />
-    </SectionBlock>
-    <SectionBlock
+    </NSectionBlock>
+    <NSectionBlock
       icon="carbon-data-blob"
       text="Data"
       description="Keyed state from `useAsyncData`"
@@ -31,8 +31,8 @@ const payload = computed(() => client.value?.nuxt.payload)
       <StateGroup
         :state="payload.data"
       />
-    </SectionBlock>
-    <SectionBlock
+    </NSectionBlock>
+    <NSectionBlock
       v-if="payload.functions && Object.keys(payload.functions).length"
       icon="carbon-function"
       text="Functions"
@@ -42,6 +42,6 @@ const payload = computed(() => client.value?.nuxt.payload)
         ml--6
         :state="payload.functions"
       />
-    </SectionBlock>
+    </NSectionBlock>
   </div>
 </template>
diff --git a/packages/devtools/client/pages/modules/plugins.vue b/packages/devtools/client/pages/modules/plugins.vue
@@ -10,7 +10,7 @@ const config = useServerConfig()
 
 <template>
   <div v-if="config">
-    <SectionBlock
+    <NSectionBlock
       icon="carbon-plug"
       text="Plugins"
       :description="`Total plugins: ${config.plugins.length}`"
@@ -22,6 +22,6 @@ const config = useServerConfig()
         :index="idx + 1"
         py2 ml--4 border="b base"
       />
-    </SectionBlock>
+    </NSectionBlock>
   </div>
 </template>
diff --git a/packages/devtools/client/pages/modules/runtime-configs.vue b/packages/devtools/client/pages/modules/runtime-configs.vue
@@ -22,27 +22,27 @@ const privateConfig = computed(() => {
 
 <template>
   <div v-if="client">
-    <SectionBlock
+    <NSectionBlock
       icon="carbon-settings-services"
       text="App Config"
     >
       <StateEditor
         ml--6
         :state="client.appConfig"
       />
-    </SectionBlock>
+    </NSectionBlock>
 
-    <SectionBlock
+    <NSectionBlock
       icon="carbon-settings"
       text="Public Runtime Config"
     >
       <StateEditor
         ml--6
         :state="payload.config?.public"
       />
-    </SectionBlock>
+    </NSectionBlock>
 
-    <SectionBlock
+    <NSectionBlock
       icon="carbon-locked"
       :open="false"
       text="Private Runtime Config"
@@ -53,6 +53,6 @@ const privateConfig = computed(() => {
         :state="privateConfig"
         readonly
       />
-    </SectionBlock>
+    </NSectionBlock>
   </div>
 </template>