diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/MenuLayout.vue | 33 | ||||
| -rw-r--r-- | src/components/SearchBar.vue | 37 | ||||
| -rw-r--r-- | src/components/ToolCard.vue | 31 |
3 files changed, 67 insertions, 34 deletions
diff --git a/src/components/MenuLayout.vue b/src/components/MenuLayout.vue index 48150c1..3031615 100644 --- a/src/components/MenuLayout.vue +++ b/src/components/MenuLayout.vue @@ -1,15 +1,28 @@ <template> - <n-layout has-sider> - <n-layout-sider bordered collapse-mode="width" :collapsed-width="0" :width="240" :collapsed="isMenuCollapsed" - @collapse="isMenuCollapsed = true" @expand="isMenuCollapsed = false" :show-trigger="false" - :native-scrollbar="false" :position="siderPosition"> - <slot name="sider" /> - </n-layout-sider> - <n-layout class="content"> - <slot name="content" /> - <div class="overlay" v-show="isSmallScreen && !isMenuCollapsed" @click="isMenuCollapsed = true" /> - </n-layout> + <n-layout has-sider> + <n-layout-sider + bordered + collapse-mode="width" + :collapsed-width="0" + :width="240" + :collapsed="isMenuCollapsed" + :show-trigger="false" + :native-scrollbar="false" + :position="siderPosition" + @collapse="isMenuCollapsed = true" + @expand="isMenuCollapsed = false" + > + <slot name="sider" /> + </n-layout-sider> + <n-layout class="content"> + <slot name="content" /> + <div + v-show="isSmallScreen && !isMenuCollapsed" + class="overlay" + @click="isMenuCollapsed = true" + /> </n-layout> + </n-layout> </template> <script setup lang="ts"> diff --git a/src/components/SearchBar.vue b/src/components/SearchBar.vue index fe23e03..e6d2b30 100644 --- a/src/components/SearchBar.vue +++ b/src/components/SearchBar.vue @@ -32,19 +32,30 @@ function onSelect(path: string) { </script> <template> - <div class="search-bar"> - <n-auto-complete :options="options" v-model:value="queryString" :input-props="{ autocomplete: 'disabled' }" - :on-select="onSelect"> - <template #default="{ handleInput, handleBlur, handleFocus, value: slotValue }"> - <n-input round clearable placeholder="Search a tool..." :value="slotValue" @input="handleInput" - @focus="handleFocus" @blur="handleBlur"> - <template #prefix> - <n-icon :component="SearchRound" /> - </template> - </n-input> - </template> - </n-auto-complete> - </div> + <div class="search-bar"> + <n-auto-complete + v-model:value="queryString" + :options="options" + :input-props="{ autocomplete: 'disabled' }" + :on-select="onSelect" + > + <template #default="{ handleInput, handleBlur, handleFocus, value: slotValue }"> + <n-input + round + clearable + placeholder="Search a tool..." + :value="slotValue" + @input="handleInput" + @focus="handleFocus" + @blur="handleBlur" + > + <template #prefix> + <n-icon :component="SearchRound" /> + </template> + </n-input> + </template> + </n-auto-complete> + </div> </template> diff --git a/src/components/ToolCard.vue b/src/components/ToolCard.vue index a5ef7b9..9575221 100644 --- a/src/components/ToolCard.vue +++ b/src/components/ToolCard.vue @@ -1,15 +1,24 @@ <template> - <router-link :to="tool.path"> - <n-card class="tool-card"> - <n-icon class="icon" size="40" :component="tool.icon" /> - <n-h3 class="title"> - <n-ellipsis>{{ tool.name }}</n-ellipsis> - </n-h3> - <div class="description"> - <n-ellipsis :line-clamp="2" :tooltip="false">{{ tool.description }}</n-ellipsis> - </div> - </n-card> - </router-link> + <router-link :to="tool.path"> + <n-card class="tool-card"> + <n-icon + class="icon" + size="40" + :component="tool.icon" + /> + <n-h3 class="title"> + <n-ellipsis>{{ tool.name }}</n-ellipsis> + </n-h3> + <div class="description"> + <n-ellipsis + :line-clamp="2" + :tooltip="false" + > + {{ tool.description }} + </n-ellipsis> + </div> + </n-card> + </router-link> </template> <script setup lang="ts"> |