feat(ui-kit): add NSelectTab component

nuxt · Aug 10, 2023 · 509a1ec · 509a1ec
1 parent 7dbc3d1
commit 509a1ec
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 1 deletion.
diff --git a/packages/devtools-ui-kit/playground/pages/index.vue b/packages/devtools-ui-kit/playground/pages/index.vue
@@ -259,6 +259,44 @@ const radio = ref('a')
         </div>
         <ShowSource src="/playground/pages/index.vue#L246" />
       </NCard>
+
+      <NCard class="p4">
+        <div class="n-header-upper">
+          Select
+        </div>
+        <div class="flex flex-col gap-2">
+          <NSelect n="lime6 dark:lime5" model-value="apple">
+            <option value="apple">
+              Apple
+            </option>
+            <option value="banana">
+              Banana
+            </option>
+            <option value="orange">
+              Orange
+            </option>
+          </NSelect>
+        </div>
+        <ShowSource src="/playground/pages/index.vue#L263" />
+      </NCard>
+
+      <NCard class="p4">
+        <div class="n-header-upper">
+          Select Tabs
+        </div>
+        <div class="flex gap-2">
+          <NSelectTabs
+            n="amber6 dark:amber5 sm"
+            model-value="apple"
+            :options="[
+              { value: 'apple', label: 'Apple' },
+              { value: 'banana', label: 'Banana' },
+              { value: 'orange', label: 'Orange' },
+            ]"
+          />
+        </div>
+        <ShowSource src="/playground/pages/index.vue#L263" />
+      </NCard>
     </div>
   </div>
 </template>
diff --git a/packages/devtools-ui-kit/src/components/NSelect.vue b/packages/devtools-ui-kit/src/components/NSelect.vue
@@ -21,7 +21,7 @@ const input = useVModel(props, 'modelValue', emit, { passive: true })
 
 <template>
   <div
-    class="n-text-input flex flex items-center border n-border-base rounded px-2 py-1 focus-within:n-focus-base focus-within:border-context n-bg-base"
+    class="n-select flex flex items-center border n-border-base rounded px-2 py-1 focus-within:n-focus-base focus-within:border-context n-bg-base"
   >
     <slot name="icon">
       <NIcon v-if="icon" :icon="icon" class="mr-0.4em text-1.1em op50" />

diff --git a/packages/devtools-ui-kit/src/components/NSelectTabs.vue b/packages/devtools-ui-kit/src/components/NSelectTabs.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: any
+    disabled?: boolean
+    options: { value: any; label: string }[]
+  }>(),
+  {
+    modelValue: undefined,
+    disabled: false,
+  },
+)
+const emit = defineEmits<{ (...args: any): void }>()
+const input = useVModel(props, 'modelValue', emit, { passive: true })
+</script>
+
+<template>
+  <fieldset
+    class="n-select-tabs flex flex-inline flex-wrap items-center border n-border-base rounded focus-within:n-focus-base focus-within:border-context n-bg-base"
+  >
+    <label
+      v-for="i, idx of options"
+      :key="i.label"
+      :disabled="disabled"
+      class="relative n-border-base hover:n-bg-active px-0.5em py-0.1em"
+      :class="[
+        idx ? 'border-l n-border-base ml--1px' : '',
+        i.value === input ? 'n-bg-active' : '',
+      ]"
+      :title="i.label"
+    >
+      <div
+        :class="[
+          i.value === input ? '' : 'op35',
+        ]"
+      >{{ i.label }}</div>
+      <input
+        v-model="input"
+        type="radio"
+        :disabled="disabled"
+        :value="i.value"
+        :title="i.label"
+        class="absolute inset-0 op-0.1"
+      >
+    </label>
+  </fieldset>
+</template>