feat: improve playground layout

shuriken-ui · Dec 18, 2023 · 95a82b5 · 95a82b5
1 parent d52ab4b
commit 95a82b5
Show file tree

Hide file tree

Showing 21 changed files with 835 additions and 381 deletions.
diff --git a/.playground/components/NuiLogo.vue b/.playground/components/NuiLogo.vue
@@ -0,0 +1,26 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    viewBox="0 0 169.82 169.82"
+  >
+    <defs>
+      <clipPath id="clippath-sm">
+        <path
+          d="m114.63,11.9l-12.29-7.1c-11.08-6.4-23.76-6.4-34.84,0l-21.62,12.48-21.62,12.48c-11.09,6.41-17.43,17.39-17.43,30.19v49.93c0,12.79,6.34,23.78,17.42,30.17l21.62,12.48,21.62,12.49c11.08,6.4,23.76,6.4,34.84,0l21.62-12.49,9.33-5.39,12.29-7.1c11.08-6.4,17.42-17.38,17.42-30.17v-49.93c0-12.79-6.34-23.78-17.42-30.17l-21.62-12.48-9.33-5.39h.01Zm-29.71,52.38c11.39,0,20.63,9.24,20.63,20.63s-9.24,20.63-20.63,20.63-20.63-9.24-20.63-20.63,9.24-20.63,20.63-20.63Zm-48.37,48.56l-29.72-17.15,29.71-.36v-10.79c.13-17.42,9.47-32.65,23.39-41.06l24.98-14.42,29.71-17.15-14.54,25.91,9.82,5.67c14.02,8.47,23.39,23.86,23.39,41.43v62.24l-15.17-25.55-9.87,5.7c-6.92,3.82-14.87,5.99-23.33,5.99s-16.4-2.17-23.31-5.98l-25.06-14.47h0Z"
+          fill="none"
+          stroke-width="0"
+        />
+      </clipPath>
+    </defs>
+    <g clip-path="url(#clippath-sm)" class="fill-current">
+      <rect
+        x="6.83"
+        y="-1.59"
+        width="156.17"
+        height="173.01"
+        stroke-width="0"
+      />
+    </g>
+  </svg>
+</template>
diff --git a/.playground/components/NuiLogoText.vue b/.playground/components/NuiLogoText.vue
@@ -0,0 +1,51 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    viewBox="0 0 807.1 169.81"
+  >
+    <defs>
+      <clipPath id="clippath">
+        <path
+          d="m107.8,11.89l-12.29-7.1c-11.08-6.4-23.76-6.4-34.84,0l-21.62,12.48-21.62,12.48C6.34,36.16,0,47.14,0,59.94v49.93c0,12.79,6.34,23.78,17.42,30.17l21.62,12.48,21.62,12.49c11.08,6.4,23.76,6.4,34.84,0l21.62-12.49,9.33-5.39,12.29-7.1c11.08-6.4,17.42-17.38,17.42-30.17v-49.93c0-12.79-6.34-23.78-17.42-30.17l-21.62-12.48-9.33-5.39Zm-29.71,52.38c11.39,0,20.63,9.24,20.63,20.63s-9.24,20.63-20.63,20.63-20.63-9.24-20.63-20.63,9.24-20.63,20.63-20.63Zm-48.37,48.56L0,95.68l29.71-.36v-10.79c.13-17.42,9.47-32.65,23.39-41.06l24.98-14.42,29.71-17.15-14.54,25.91,9.82,5.67c14.02,8.47,23.39,23.86,23.39,41.43v62.24s-15.17-25.55-15.17-25.55l-9.87,5.7c-6.92,3.82-14.87,5.99-23.33,5.99s-16.4-2.17-23.31-5.98l-25.06-14.47Z"
+          clip-rule="evenodd"
+          fill="none"
+          stroke-width="0"
+        />
+      </clipPath>
+    </defs>
+    <path
+      d="m657.1,129.17v-55.01c0-8.53,4.26-12.79,12.79-12.79h27.63c8.36,0,14.88,1.98,19.57,5.95,4.69,3.96,7.04,10.13,7.04,18.48v43.37h-19.96v-38.25c0-5.2-1.09-8.98-3.26-11.32-2.17-2.34-5.78-3.52-10.81-3.52h-8.57c-1.62,0-2.77.34-3.45,1.02-.68.68-1.02,1.83-1.02,3.45v48.61h-19.96Zm-57.69-41.06h24.82c2.47,0,3.71-1.37,3.71-4.09,0-3.16-1.43-5.46-4.28-6.91-2.86-1.45-6.16-2.17-9.91-2.17-4.95,0-8.57.98-10.87,2.94-2.3,1.96-3.45,5.37-3.45,10.23Zm46.56,41.06h-40.94c-10.49,0-17.42-2.43-20.79-7.29-3.37-4.86-5.05-13.82-5.05-26.86,0-7.33.51-13.18,1.53-17.53,1.02-4.35,2.94-7.82,5.76-10.43,2.81-2.6,6.29-4.33,10.43-5.18,4.14-.85,9.74-1.28,16.82-1.28,6.14,0,11.13.32,14.97.96,3.84.64,7.35,1.9,10.55,3.77,3.2,1.88,5.5,4.65,6.91,8.31,1.41,3.67,2.11,8.4,2.11,14.2,0,9.38-3.54,14.07-10.62,14.07h-38.25c0,4.43.96,7.7,2.88,9.79,1.92,2.09,5.48,3.13,10.68,3.13h33v14.33Zm-118.33,0h-19.96V39.62h19.96v89.54Zm52.45,0h-23.41l-20.6-24.3c-2.9-3.5-4.35-7.08-4.35-10.75,0-3.41,1.45-6.91,4.35-10.49l18.04-22.26h22.39l-23.03,27.25c-1.36,1.71-2.05,3.33-2.05,4.86,0,1.71.98,3.71,2.94,6.01l25.71,29.68Zm-83.15-74.96h-19.96v-14.58h19.96v14.58Zm-19.96,74.96V61.37h19.96v67.8h-19.96Zm-49.63,0v-40.93c0-9.72,2.47-16.63,7.42-20.72,4.95-4.09,12.58-6.14,22.9-6.14h13.43v14.71h-7.93c-5.72,0-9.79,1.47-12.22,4.41-2.43,2.94-3.65,7.48-3.65,13.62v35.05h-19.96Zm-10.75-67.8v55c0,8.53-4.26,12.79-12.79,12.79h-28.65c-8.36,0-14.88-1.96-19.57-5.88-4.69-3.92-7.04-10.06-7.04-18.42v-43.49h19.96v38.38c0,5.2,1.11,8.98,3.32,11.32,2.22,2.34,5.84,3.52,10.87,3.52h9.34c1.62,0,2.77-.34,3.45-1.02.68-.68,1.02-1.83,1.02-3.45v-48.74h20.08Zm-145.83,67.8V39.62h19.96v21.75h19.83c8.44,0,15.09,2,19.96,6.01,4.86,4.01,7.29,10.15,7.29,18.42v43.37h-19.96v-38.25c0-5.2-1.09-8.98-3.26-11.32-2.17-2.34-5.78-3.52-10.81-3.52h-13.05v53.09h-19.96Zm-88.78,0v-17.91h49.63c1.88,0,3.33-.4,4.35-1.22,1.02-.81,1.62-1.58,1.79-2.3.17-.72.25-1.6.25-2.62,0-3.41-2.3-5.84-6.91-7.29l-35.05-10.49c-5.54-1.62-9.44-4.52-11.7-8.7-2.26-4.18-3.39-9.64-3.39-16.37,0-15.1,6.91-22.64,20.72-22.64h55.26v17.91h-46.31c-4.18,0-6.27,1.96-6.27,5.88,0,3.58,2.39,6.1,7.16,7.55l31.47,9.21c6.74,1.96,11.51,4.82,14.33,8.57,2.81,3.75,4.22,9.29,4.22,16.63,0,15.86-6.82,23.79-20.47,23.79h-59.1Z"
+      fill="currentColor"
+      fill-rule="evenodd"
+      stroke-width="0"
+    />
+    <g clip-path="url(#clippath)">
+      <rect
+        y="-1.6"
+        width="156.17"
+        height="173.01"
+        fill="currentColor"
+        stroke-width="0"
+      />
+    </g>
+    <rect
+      x="750.24"
+      y="44.27"
+      width="55.37"
+      height="55.37"
+      rx="16.19"
+      ry="16.19"
+      fill="none"
+      stroke="currentColor"
+      stroke-miterlimit="10"
+      stroke-width="3"
+    />
+    <path
+      d="m791.42,83.71h-3.16v-23.78h3.16v23.78Zm-22.35-3.67c1,.91,2.68,1.36,5.06,1.36s4.06-.45,5.06-1.36c1-.91,1.49-2.46,1.49-4.65v-15.46h3.16v15.76c0,2.99-.83,5.12-2.48,6.39-1.65,1.27-4.06,1.9-7.24,1.9s-5.58-.63-7.24-1.9c-1.65-1.27-2.48-3.4-2.48-6.39v-15.76h3.16v15.46c0,2.2.5,3.75,1.49,4.65Z"
+      fill="currentColor"
+      fill-rule="evenodd"
+      stroke-width="0"
+    />
+  </svg>
+</template>
diff --git a/.playground/layouts/default.vue b/.playground/layouts/default.vue
@@ -26,30 +26,30 @@ const routes = computed(() =>
     <div class="flex min-h-screen">
       <div class="w-2/12">
         <nav class="fixed w-2/12 max-h-screen overflow-y-scroll nui-slimscroll">
-          <NuxtLink to="/" class="inline-block px-2 py-4">
-            <img alt="Shuriken UI logo" class="h-8" :src="logo" />
+          <NuxtLink to="/" class="inline-block px-6 py-4">
+            <NuiLogoText class="h-8 w-auto text-muted-600" />
           </NuxtLink>
 
-          <ul class="flex flex-col gap-6">
+          <ul class="flex flex-col gap-10 pt-6">
             <div v-for="(routeGroup, id) in Object.entries(routes)" :key="id">
               <h3
-                class="capitalize text-sm text-muted-400 font-medium border-b border-muted-300 mx-4 pb-2 mb-4"
+                class="uppercase text-xs tracking-wider text-muted-400 font-semibold mx-4 px-3 pb-2"
               >
                 {{ routeGroup[0] }}
               </h3>
-              <ul>
+              <ul class="px-3">
                 <li
                   v-for="route in routeGroup[1]"
                   :key="(route as RouteRecordNormalized).path"
                 >
                   <NuxtLink
                     active-class="text-primary-500"
-                    class="py-2 px-4 hover:bg-muted-50 dark:hover:bg-muted-900 flex flex-col"
+                    class="py-2 px-4 hover:bg-muted-100 dark:hover:bg-muted-900 rounded-lg flex flex-col"
                     :to="(route as RouteRecordNormalized).path"
                   >
-                    <span class="flex gap-1 items-center">
+                    <span class="flex gap-4 items-center">
                       <Icon
-                        class="text-muted-600"
+                        class="text-sm text-muted-400 w-6 h-6"
                         v-if="
                           typeof (route as RouteRecordNormalized).meta?.icon ===
                             'string' &&
@@ -59,16 +59,24 @@ const routes = computed(() =>
                           (route as RouteRecordNormalized).meta?.icon as string
                         "
                       />
-                      <span class="inline-bloc">
-                        {{ (route as RouteRecordNormalized).meta?.title }}
+                      <span class="block">
+                        <span
+                          class="block text-sm font-sans text-muted-800 dark:text-muted-100"
+                        >
+                          {{ (route as RouteRecordNormalized).meta?.title }}
+                        </span>
+                        <span
+                          class="block text-xs text-muted-500"
+                          v-if="
+                            (route as RouteRecordNormalized).meta?.description
+                          "
+                        >
+                          {{
+                            (route as RouteRecordNormalized).meta?.description
+                          }}
+                        </span>
                       </span>
                     </span>
-                    <span
-                      class="italic text-xs text-muted-500"
-                      v-if="(route as RouteRecordNormalized).meta?.description"
-                    >
-                      {{ (route as RouteRecordNormalized).meta?.description }}
-                    </span>
                   </NuxtLink>
                 </li>
               </ul>

diff --git a/.playground/pages/tests/base/colors.vue → .playground/pages/tests/authority/colors.vue b/.playground/pages/tests/base/colors.vue → .playground/pages/tests/authority/colors.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 definePageMeta({
   title: 'Colors',
-  icon: 'lucide:pen-tool',
-  description: 'Basic colors',
-  section: 'base',
+  icon: 'system-uicons:venn',
+  description: 'Color system',
+  section: 'authority',
 })
 </script>
 

diff --git a/.playground/pages/tests/authority/icons.vue b/.playground/pages/tests/authority/icons.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import IconIndeterminate from '~~/../components/icon/IconIndeterminate.vue'
+
+definePageMeta({
+  title: 'Icons',
+  icon: 'system-uicons:diamond',
+  description: 'SVG icons',
+  section: 'authority',
+})
+</script>
+
+<template>
+  <div>
+    <NuiPreviewContainer title="Icons">
+      <NuiPreview title="Nui Icons" description="Svg icons used in Nui">
+        <div class="flex flex-wrap items-end gap-4">
+          <IconCheck class="w-8 h-8" />
+          <IconIndeterminate class="w-8 h-8" />
+          <IconCheckCircle class="w-8 h-8" />
+          <IconChevronDown class="w-8 h-8" />
+          <IconClose class="w-8 h-8" />
+          <IconMoon class="w-8 h-8" />
+          <IconPlus class="w-8 h-8" />
+          <IconMinus class="w-8 h-8" />
+          <IconSun class="w-8 h-8" />
+        </div>
+      </NuiPreview>
+    </NuiPreviewContainer>
+  </div>
+</template>
diff --git a/.playground/pages/tests/base/typography.vue → ...ound/pages/tests/authority/typography.vue b/.playground/pages/tests/base/typography.vue → ...ound/pages/tests/authority/typography.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 definePageMeta({
   title: 'Typography',
-  icon: 'lucide:text-cursor',
+  icon: 'system-uicons:paragraph-left',
   description: 'Tailwind typography plugin',
-  section: 'base',
+  section: 'authority',
 })
 </script>
 

diff --git a/.playground/pages/tests/base/accordion.vue b/.playground/pages/tests/base/accordion.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 definePageMeta({
   title: 'BaseAccordion',
-  icon: 'mingcute:align-horizontal-center-fill',
+  icon: 'system-uicons:flip-view',
   description: 'Accordion component',
   section: 'base',
 })

diff --git a/.playground/pages/tests/base/avatar-group.vue b/.playground/pages/tests/base/avatar-group.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 definePageMeta({
   title: 'BaseAvatarGroup',
-  icon: 'mingcute:look-up-fill',
+  icon: 'system-uicons:users',
   description: 'Avatar group component',
   section: 'base',
 })

diff --git a/.playground/pages/tests/base/avatar.vue b/.playground/pages/tests/base/avatar.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 definePageMeta({
   title: 'BaseAvatar',
-  icon: 'mingcute:look-up-fill',
+  icon: 'system-uicons:user-male',
   description: 'Avatar component',
   section: 'base',
 })

diff --git a/.playground/pages/tests/base/breadcrumb.vue b/.playground/pages/tests/base/breadcrumb.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 definePageMeta({
   title: 'BaseBreadcrumb',
-  icon: 'mingcute:more-1-fill',
+  icon: 'system-uicons:chain',
   description: 'Breadcrumb component',
   section: 'base',
 })

diff --git a/.playground/pages/tests/base/button-action.vue b/.playground/pages/tests/base/button-action.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 definePageMeta({
   title: 'BaseButtonAction',
-  icon: 'mingcute:cursor-fill',
+  icon: 'system-uicons:duplicate-alt',
   description: 'Button action component',
   section: 'base',
 })

diff --git a/.playground/pages/tests/base/button-close.vue b/.playground/pages/tests/base/button-close.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 definePageMeta({
   title: 'BaseButtonClose',
-  icon: 'mingcute:cursor-fill',
+  icon: 'system-uicons:cross-circle',
   description: 'Button close component',
   section: 'base',
 })

diff --git a/.playground/pages/tests/base/button-icon.vue b/.playground/pages/tests/base/button-icon.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 definePageMeta({
   title: 'BaseButtonIcon',
-  icon: 'mingcute:cursor-fill',
+  icon: 'system-uicons:plus-circle',
   description: 'Button icon component',
   section: 'base',
 })

diff --git a/.playground/pages/tests/base/button.vue b/.playground/pages/tests/base/button.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 definePageMeta({
   title: 'BaseButton',
-  icon: 'mingcute:cursor-fill',
+  icon: 'system-uicons:duplicate-alt',
   description: 'Button component',
   section: 'base',
 })

diff --git a/.playground/pages/tests/base/card.vue b/.playground/pages/tests/base/card.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 definePageMeta({
   title: 'BaseCard',
-  icon: 'mingcute:display-fill',
+  icon: 'system-uicons:panel-top',
   description: 'Card component',
   section: 'base',
 })

diff --git a/.playground/pages/tests/base/dropdown.vue b/.playground/pages/tests/base/dropdown.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 definePageMeta({
   title: 'BaseDropdown',
-  icon: 'mingcute:classify-2-fill',
+  icon: 'system-uicons:maximise',
   description: 'Dropdown component',
   section: 'base',
 })

diff --git a/.playground/pages/tests/base/focus-loop.vue b/.playground/pages/tests/base/focus-loop.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 definePageMeta({
   title: 'BaseFocusLoop',
-  icon: 'mingcute:back-fill',
+  icon: 'system-uicons:marquee',
   description: 'Focus Loop component',
   section: 'base',
 })