feat(ui): added c-select in the ui lib (#550)

* feat(ui): added c-select in the ui lib * refactor(ui): switched n-select to c-select
CorentinTh · Aug 7, 2023 · dfa1ba8 · dfa1ba8 · vercel · Aug 7, 2023
1 parent 6498c9b
commit dfa1ba8
Show file tree

Hide file tree

Showing 29 changed files with 666 additions and 199 deletions.
diff --git a/.eslintrc-auto-import.json b/.eslintrc-auto-import.json
@@ -285,6 +285,7 @@
     "watchThrottled": true,
     "watchTriggerable": true,
     "watchWithFilter": true,
-    "whenever": true
+    "whenever": true,
+    "toValue": true
   }
-}
+}
diff --git a/components.d.ts b/components.d.ts
@@ -31,6 +31,7 @@ declare module '@vue/runtime-core' {
     Chronometer: typeof import('./src/tools/chronometer/chronometer.vue')['default']
     CInputText: typeof import('./src/ui/c-input-text/c-input-text.vue')['default']
     'CInputText.demo': typeof import('./src/ui/c-input-text/c-input-text.demo.vue')['default']
+    CLabel: typeof import('./src/ui/c-label/c-label.vue')['default']
     CLink: typeof import('./src/ui/c-link/c-link.vue')['default']
     'CLink.demo': typeof import('./src/ui/c-link/c-link.demo.vue')['default']
     CModal: typeof import('./src/ui/c-modal/c-modal.vue')['default']
@@ -41,7 +42,11 @@ declare module '@vue/runtime-core' {
     CommandPalette: typeof import('./src/modules/command-palette/command-palette.vue')['default']
     CommandPaletteOption: typeof import('./src/modules/command-palette/components/command-palette-option.vue')['default']
     CrontabGenerator: typeof import('./src/tools/crontab-generator/crontab-generator.vue')['default']
+    CSelect: typeof import('./src/ui/c-select/c-select.vue')['default']
+    'CSelect.demo': typeof import('./src/ui/c-select/c-select.demo.vue')['default']
     DateTimeConverter: typeof import('./src/tools/date-time-converter/date-time-converter.vue')['default']
+    'Demo.routes': typeof import('./src/ui/demo/demo.routes.vue')['default']
+    'DemoHome.page': typeof import('./src/ui/demo/demo-home.page.vue')['default']
     DemoWrapper: typeof import('./src/ui/demo/demo-wrapper.vue')['default']
     DeviceInformation: typeof import('./src/tools/device-information/device-information.vue')['default']
     DiffViewer: typeof import('./src/tools/json-diff/diff-viewer/diff-viewer.vue')['default']
@@ -60,9 +65,13 @@ declare module '@vue/runtime-core' {
     HtmlEntities: typeof import('./src/tools/html-entities/html-entities.vue')['default']
     HtmlWysiwygEditor: typeof import('./src/tools/html-wysiwyg-editor/html-wysiwyg-editor.vue')['default']
     HttpStatusCodes: typeof import('./src/tools/http-status-codes/http-status-codes.vue')['default']
+    'IconMdi:brushVariant': typeof import('~icons/mdi/brush-variant')['default']
     'IconMdi:kettleSteamOutline': typeof import('~icons/mdi/kettle-steam-outline')['default']
     IconMdiArrowRightBottom: typeof import('~icons/mdi/arrow-right-bottom')['default']
     IconMdiCamera: typeof import('~icons/mdi/camera')['default']
+    IconMdiCameraOutline: typeof import('~icons/mdi/camera-outline')['default']
+    IconMdiCameraVideoOff: typeof import('~icons/mdi/camera-video-off')['default']
+    IconMdiChevronDown: typeof import('~icons/mdi/chevron-down')['default']
     IconMdiChevronRight: typeof import('~icons/mdi/chevron-right')['default']
     IconMdiClose: typeof import('~icons/mdi/close')['default']
     IconMdiContentCopy: typeof import('~icons/mdi/content-copy')['default']

diff --git a/package.json b/package.json
@@ -118,6 +118,7 @@
     "prettier": "^2.8.7",
     "typescript": "~4.9.0",
     "unocss": "^0.53.0",
+    "unocss-preset-scrollbar": "^0.2.1",
     "unplugin-icons": "^0.16.1",
     "unplugin-vue-components": "^0.25.0",
     "vite": "^4.0.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/composable/fuzzySearch.ts b/src/composable/fuzzySearch.ts
@@ -11,12 +11,19 @@ function useFuzzySearch<Data>({
 }: {
   search: MaybeRef<string>
   data: Data[]
-  options?: Fuse.IFuseOptions<Data>
+  options?: Fuse.IFuseOptions<Data> & { filterEmpty?: boolean }
 }) {
   const fuse = new Fuse(data, options);
+  const filterEmpty = options.filterEmpty ?? true;
 
-  const searchResult = computed(() => {
-    return fuse.search(get(search)).map(({ item }) => item);
+  const searchResult = computed<Data[]>(() => {
+    const query = get(search);
+
+    if (!filterEmpty && query === '') {
+      return data;
+    }
+
+    return fuse.search(query).map(({ item }) => item);
   });
 
   return { searchResult };

diff --git a/src/layouts/base.layout.vue b/src/layouts/base.layout.vue
@@ -103,6 +103,10 @@ const tools = computed<ToolCategory[]>(() => [
           Home
         </n-tooltip>
 
+        <c-button to="/c-lib" circle variant="text" aria-label="UI Lib">
+          <icon-mdi:brush-variant text-20px />
+        </c-button>
+
         <command-palette />
 
         <div>

diff --git a/src/modules/shared/number.models.ts b/src/modules/shared/number.models.ts
@@ -0,0 +1,5 @@
+function clamp({ value, min = 0, max = 100 }: { value: number; min?: number; max?: number }) {
+  return Math.min(Math.max(value, min), max);
+}
+
+export { clamp };
diff --git a/src/tools/bip39-generator/bip39-generator.vue b/src/tools/bip39-generator/bip39-generator.vue
@@ -84,12 +84,12 @@ const { copy: copyPassphrase } = useCopy({ source: passphrase, text: 'Passphrase
   <div>
     <n-grid cols="3" x-gap="12">
       <n-gi span="1">
-        <n-form-item label="Language:">
-          <n-select
-            v-model:value="language"
-            :options="Object.keys(languages).map((label) => ({ label, value: label }))"
-          />
-        </n-form-item>
+        <c-select
+          v-model:value="language"
+          searchable
+          label="Language:"
+          :options="Object.keys(languages)"
+        />
       </n-gi>
       <n-gi span="2">
         <n-form-item

diff --git a/src/tools/camera-recorder/camera-recorder.vue b/src/tools/camera-recorder/camera-recorder.vue
@@ -122,23 +122,24 @@ function downloadMedia({ type, value, createdAt }: Media) {
     </c-card>
 
     <c-card v-else>
-      <div flex gap-2>
-        <div flex-1>
-          <div>Video</div>
-          <n-select
-            v-model:value="currentCamera"
-            :options="cameras.map(({ deviceId, label }) => ({ value: deviceId, label }))"
-            placeholder="Select camera"
-          />
-        </div>
-        <div v-if="currentMicrophone && microphones.length > 0" flex-1>
-          <div>Audio</div>
-          <n-select
-            v-model:value="currentMicrophone"
-            :options="microphones.map(({ deviceId, label }) => ({ value: deviceId, label }))"
-            placeholder="Select microphone"
-          />
-        </div>
+      <div flex flex-col gap-2>
+        <c-select
+          v-model:value="currentCamera"
+          label-position="left"
+          label-width="60px"
+          label="Video:"
+          :options="cameras.map(({ deviceId, label }) => ({ value: deviceId, label }))"
+          placeholder="Select camera"
+        />
+        <c-select
+          v-if="currentMicrophone && microphones.length > 0"
+          v-model:value="currentMicrophone"
+          label="Audio:"
+          label-position="left"
+          label-width="60px"
+          :options="microphones.map(({ deviceId, label }) => ({ value: deviceId, label }))"
+          placeholder="Select microphone"
+        />
       </div>
 
       <div v-if="!isMediaStreamAvailable" mt-3 flex justify-center>

diff --git a/src/tools/date-time-converter/date-time-converter.vue b/src/tools/date-time-converter/date-time-converter.vue
@@ -142,7 +142,7 @@ function formatDateUsingFormatter(formatter: (date: Date) => string, date?: Date
 
 <template>
   <div>
-    <n-input-group>
+    <div flex gap-2>
       <c-input-text
         v-model:value="inputDate"
         autofocus
@@ -153,13 +153,13 @@ function formatDateUsingFormatter(formatter: (date: Date) => string, date?: Date
         @update:value="onDateInputChanged"
       />
 
-      <n-select
+      <c-select
         v-model:value="formatIndex"
         style="flex: 0 0 170px"
         :options="formats.map(({ name }, i) => ({ label: name, value: i }))"
         data-test-id="date-time-converter-format-select"
       />
-    </n-input-group>
+    </div>
 
     <n-divider />
 

diff --git a/src/tools/encryption/encryption.vue b/src/tools/encryption/encryption.vue
@@ -29,12 +29,11 @@ const decryptOutput = computed(() =>
       <div flex flex-1 flex-col gap-2>
         <c-input-text v-model:value="cypherSecret" label="Your secret key:" clearable raw-text />
 
-        <n-form-item label="Encryption algorithm:" :show-feedback="false">
-          <n-select
-            v-model:value="cypherAlgo"
-            :options="Object.keys(algos).map((label) => ({ label, value: label }))"
-          />
-        </n-form-item>
+        <c-select
+          v-model:value="cypherAlgo"
+          label="Encryption algorithm:"
+          :options="Object.keys(algos).map((label) => ({ label, value: label }))"
+        />
       </div>
     </div>
     <c-input-text
@@ -57,12 +56,11 @@ const decryptOutput = computed(() =>
       <div flex flex-1 flex-col gap-2>
         <c-input-text v-model:value="decryptSecret" label="Your secret key:" clearable raw-text />
 
-        <n-form-item label="Encryption algorithm:" :show-feedback="false">
-          <n-select
-            v-model:value="decryptAlgo"
-            :options="Object.keys(algos).map((label) => ({ label, value: label }))"
-          />
-        </n-form-item>
+        <c-select
+          v-model:value="decryptAlgo"
+          label="Encryption algorithm:"
+          :options="Object.keys(algos).map((label) => ({ label, value: label }))"
+        />
       </div>
     </div>
     <c-input-text

diff --git a/src/tools/eta-calculator/eta-calculator.vue b/src/tools/eta-calculator/eta-calculator.vue
@@ -39,13 +39,15 @@ const endAt = computed(() =>
       </n-form-item>
     </div>
 
-    <n-form-item label="Amount of unit consumed by time span" :show-feedback="false">
+    <p>Amount of unit consumed by time span</p>
+    <div flex flex-col items-baseline gap-y-2 md:flex-row>
       <n-input-number v-model:value="unitPerTimeSpan" :min="1" />
-      <span mx-3>in</span>
-      <n-input-group>
-        <n-input-number v-model:value="timeSpan" :min="1" />
-        <n-select
+      <div flex items-baseline gap-2>
+        <span ml-2>in</span>
+        <n-input-number v-model:value="timeSpan" min-w-130px :min="1" />
+        <c-select
           v-model:value="timeSpanUnitMultiplier"
+          min-w-130px
           :options="[
             { label: 'milliseconds', value: 1 },
             { label: 'seconds', value: 1000 },
@@ -54,8 +56,8 @@ const endAt = computed(() =>
             { label: 'days', value: 1000 * 60 * 60 * 24 },
           ]"
         />
-      </n-input-group>
-    </n-form-item>
+      </div>
+    </div>
 
     <n-divider />
     <c-card mb-2>