@indielayer/ui 1.4.0 → 1.5.1

package/docs/components/common/CodePreview.vue

@@ -40,7 +40,7 @@ function copy(text?: string) {
 
 <template>
   <div>
-    <h2 :id="title?.toLowerCase()" class="flex border-b pb-1 items-center">
+    <h2 :id="title?.toLowerCase()" class="flex border-b pb-2 items-center">
       <a class="anchor" :href="`#${title?.toLowerCase()}`">#</a>
       <div class="mr-2 cursor-pointer" @click="toggleCode">{{ title }}</div>
       <x-spacer/>

package/docs/components/common/CodeSnippet.vue

@@ -1,14 +1,11 @@
-<script lang="ts">
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
 import { getHighlighter } from 'shiki'
+import indielayerTheme from './Indielayer-theme.json'
 
 const highlighter = getHighlighter({
-  themes: ['github-dark'],
   langs: ['js', 'ts', 'vue-html', 'bash', 'vue'],
 })
-</script>
-
-<script setup lang="ts">
-import { onMounted, ref } from 'vue'
 
 const props = defineProps({
   code: String,
@@ -25,7 +22,8 @@ const props = defineProps({
 const highlighted = ref('')
 
 onMounted(async () => {
-  highlighted.value = (await highlighter).codeToHtml(props.code, { lang: props.lang, theme: 'github-dark' })
+  await (await highlighter).loadTheme(indielayerTheme as any)
+  highlighted.value = (await highlighter).codeToHtml(props.code, { lang: props.lang, theme: 'Indielayer' })
 })
 </script>
 

package/docs/components/common/DocumentPage.vue

@@ -137,84 +137,82 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div>
-    <section class="p-4 lg:p-8 max-w-4xl xl:max-w-7xl mx-auto">
-      <div class="w-full flex document-page">
-        <div class="min-w-0 flex-auto">
-          <div class="text-4xl font-semibold">
-            {{ title }}
-            <x-tooltip>
-              <x-link :href="`${github}/index.vue`" target="blank" color="#94a3b8">
-                <x-icon icon="edit" size="sm" />
-              </x-link>
-              <template #tooltip>
-                Edit on <span class="text-gray-300">GitHub</span>
-              </template>
-            </x-tooltip>
-          </div>
-          <div class="text-lg my-2 text-gray-500">{{ description }}</div>
-          <div class="mt-4">
-            <slot></slot>
+  <div class="w-full flex document-page">
+    <div class="min-w-0 flex-auto">
+      <div class="text-4xl font-semibold">
+        {{ title }}
+        <x-tooltip>
+          <x-link :href="`${github}/index.vue`" target="blank" color="#94a3b8">
+            <x-icon icon="edit" size="sm" />
+          </x-link>
+          <template #tooltip>
+            Edit on <span class="text-gray-300">GitHub</span>
+          </template>
+        </x-tooltip>
+      </div>
+      <div class="text-lg my-2 text-gray-500">{{ description }}</div>
+      <div class="mt-4">
+        <slot></slot>
 
-            <div v-for="demo in demos" :key="demo.name">
-              <code-preview
-                :title="demo.name"
-                :description="demo.description"
-                :code="demo.code"
-                :github="github"
-              >
-                <component :is="demo.component" />
-              </code-preview>
-            </div>
+        <div v-for="demo in demos" :key="demo.name">
+          <code-preview
+            :title="demo.name"
+            :description="demo.description"
+            :code="demo.code"
+            :github="github"
+          >
+            <component :is="demo.component" />
+          </code-preview>
+        </div>
 
-            <div v-if="componentsProperties">
-              <h2 id="api" class="!text-2xl !mt-20"><a class="anchor" href="#api">#</a>API</h2>
+        <div v-if="componentsProperties">
+          <h2 id="api" class="!text-2xl !mt-20"><a class="anchor" href="#api">#</a>API</h2>
 
-              <section
-                v-for="(component, componentName) in componentsProperties"
-                :key="componentName"
-              >
-                <h3 class="mt-10 dark:text-gray-300 text-gray-800 text-2xl border-b-2 dark:border-gray-600 pb-2">
-                  {{ componentName }}
-                </h3>
-                <div
-                  v-for="(properties, propertyName) in component"
-                  :key="propertyName"
-                >
-                  <div>
-                    <h4 class="mt-6 mb-2 text-gray-800 dark:text-gray-300 text-xl capitalize">
-                      {{ propertyName }}
-                    </h4>
+          <section
+            v-for="(component, componentName) in componentsProperties"
+            :key="componentName"
+          >
+            <h3 class="mt-10 dark:text-gray-300 text-gray-800 text-2xl border-b-2 dark:border-gray-600 pb-2">
+              {{ componentName }}
+            </h3>
+            <div
+              v-for="(properties, propertyName) in component"
+              :key="propertyName"
+            >
+              <div>
+                <h4 class="mt-6 mb-2 text-gray-800 dark:text-gray-300 text-xl capitalize">
+                  {{ propertyName }}
+                </h4>
 
-                    <div class="text-sm font-light">
-                      <x-table
-                        :headers="propertyName === 'props' ? headers : headersSimple"
-                        :items="properties"
-                      >
-                        <template #item-name="{ item }">
-                          <div class="text-primary-500">{{ item.name }}</div>
-                        </template>
-                        <template #item-type="{ item }">
-                          <div v-for="t in item.type" :key="t">{{ t }}</div>
-                        </template>
-                        <template #item-required="{ item }">
-                          <div>{{ item.required ? 'true' : '' }}</div>
-                        </template>
-                        <template #item-validator="{ item }">
-                          <div class="space-x-2">
-                            <span v-for="validator in item.validator" :key="validator">{{ validator }}</span>
-                          </div>
-                        </template>
-                      </x-table>
-                    </div>
-                  </div>
+                <div class="text-sm font-light">
+                  <x-table
+                    :headers="propertyName === 'props' ? headers : headersSimple"
+                    :items="properties"
+                  >
+                    <template #item-name="{ item }">
+                      <div class="text-primary-500">{{ item.name }}</div>
+                    </template>
+                    <template #item-type="{ item }">
+                      <div v-for="t in item.type" :key="t">{{ t }}</div>
+                    </template>
+                    <template #item-required="{ item }">
+                      <div>{{ item.required ? 'true' : '' }}</div>
+                    </template>
+                    <template #item-validator="{ item }">
+                      <div class="space-x-2">
+                        <span v-for="validator in item.validator" :key="validator">{{ validator }}</span>
+                      </div>
+                    </template>
+                  </x-table>
                 </div>
-
-              </section>
+              </div>
             </div>
-          </div>
 
-          <div class="flex my-10">
+          </section>
+        </div>
+      </div>
+
+      <!-- <div class="flex my-10">
             <x-button
               v-if="back"
               :to="back"
@@ -230,31 +228,29 @@ onUnmounted(() => {
               class="capitalize"
               icon-right="arrow-right"
             >{{ next }}</x-button>
-          </div>
-        </div>
+          </div> -->
+    </div>
 
-        <div v-if="anchors.length > 0" class="hidden xl:text-sm xl:block flex-none w-64 pl-8 mr-8">
-          <div class="flex flex-col justify-between overflow-y-auto sticky max-h-(screen-18) pt-10 pb-6 top-0">
-            <div class="mb-8">
-              <h5 class="text-gray-900 dark:text-gray-100 uppercase tracking-wide font-semibold mb-3 text-sm lg:text-xs">On this page</h5>
-              <ul class="overflow-x-hidden text-gray-500 dark:text-gray-400 font-medium">
-                <li v-for="(anchor, index) in anchors" :key="index">
-                  <a
-                    :href="`#${anchor.id}`"
-                    class="block transform transition-colors duration-200 py-2 hover:text-gray-900"
-                    :class="{
-                      'text-gray-900 dark:text-gray-200': anchor.id === currentAnchor,
-                    }"
-                  >
-                    {{ anchor.name }}
-                  </a>
-                </li>
-              </ul>
-            </div>
-          </div>
+    <div v-if="anchors.length > 0" class="hidden xl:text-sm xl:block flex-none w-64 pl-8 mr-8">
+      <div class="flex flex-col justify-between overflow-y-auto sticky max-h-(screen-18) pt-10 pb-6 top-0">
+        <div class="mb-8">
+          <h5 class="text-gray-900 dark:text-gray-100 uppercase tracking-wide font-semibold mb-3 text-sm lg:text-xs">On this page</h5>
+          <ul class="overflow-x-hidden text-gray-500 dark:text-gray-400 font-medium">
+            <li v-for="(anchor, index) in anchors" :key="index">
+              <a
+                :href="`#${anchor.id}`"
+                class="block transform transition-colors duration-200 py-2 hover:text-gray-900"
+                :class="{
+                  'text-gray-900 dark:text-gray-200': anchor.id === currentAnchor,
+                }"
+              >
+                {{ anchor.name }}
+              </a>
+            </li>
+          </ul>
         </div>
       </div>
-    </section>
+    </div>
   </div>
 </template>
 

package/docs/components/menu/DocsMenu.vue

@@ -1,90 +1,86 @@
-<script>
-export default {
-  setup() {
-    return {
-      docsMenu: [
-        { to: '/getting-started', label: 'Getting Started', icon: 'book' },
-        { to: '/typography', label: 'Typography', icon: 'type' },
-        { to: '/colors', label: 'Colors', icon: 'palette' },
-        { to: '/icons', label: 'Icons', icon: 'star' },
-      ],
-      components: [
-        {
-          label: 'Form',
-          icon: 'edit',
-          collapseIcon: 'chevron-down',
-          expanded: true,
-          items: [
-            { to: '/component/button', label: 'Button' },
-            { to: '/component/checkbox', label: 'Checkbox' },
-            { to: '/component/form', label: 'Form' },
-            { to: '/component/formGroup', label: 'Form Group' },
-            { to: '/component/input', label: 'Input' },
-            { to: '/component/radio', label: 'Radio' },
-            { to: '/component/select', label: 'Select' },
-            { to: '/component/slider', label: 'Slider' },
-            { to: '/component/textarea', label: 'Textarea' },
-            { to: '/component/toggle', label: 'Toggle' },
-          ],
-        },
-        {
-          label: 'UI',
-          icon: 'cube',
-          collapseIcon: 'chevron-down',
-          expanded: true,
-          items: [
-            { to: '/component/accordion', label: 'Accordion' },
-            { to: '/component/alert', label: 'Alert' },
-            { to: '/component/avatar', label: 'Avatar' },
-            { to: '/component/badge', label: 'Badge' },
-            { to: '/component/breadcrumbs', label: 'Breadcrumbs' },
-            { to: '/component/card', label: 'Card' },
-            { to: '/component/carousel', label: 'Carousel' },
-            { to: '/component/container', label: 'Container' },
-            { to: '/component/divider', label: 'Divider' },
-            { to: '/component/drawer', label: 'Drawer' },
-            { to: '/component/icon', label: 'Icon' },
-            { to: '/component/image', label: 'Image' },
-            { to: '/component/loader', label: 'Loader' },
-            { to: '/component/link', label: 'Link' },
-            { to: '/component/menu', label: 'Menu' },
-            { to: '/component/modal', label: 'Modal' },
-            { to: '/component/notifications', label: 'Notifications' },
-            { to: '/component/pagination', label: 'Pagination' },
-            { to: '/component/popover', label: 'Popover' },
-            { to: '/component/progress', label: 'Progress' },
-            { to: '/component/skeleton', label: 'Skeleton' },
-            { to: '/component/spinner', label: 'Spinner' },
-            { to: '/component/stepper', label: 'Stepper' },
-            { to: '/component/table', label: 'Table' },
-            { to: '/component/tabs', label: 'Tabs' },
-            { to: '/component/tag', label: 'Tag' },
-            { to: '/component/tooltip', label: 'Tooltip' },
-          ],
-        },
-        {
-          label: 'Helpers',
-          icon: 'wrench',
-          collapseIcon: 'chevron-down',
-          expanded: true,
-          items: [
-            { to: '/component/scroll', label: 'Scroll' },
-            { to: '/component/spacer', label: 'Spacer' },
-          ],
-        },
-      ],
-    }
+<script setup lang="ts">
+const docsMenu = [
+  { to: '/getting-started', label: 'Getting Started', icon: 'book' },
+  { to: '/typography', label: 'Typography', icon: 'type' },
+  { to: '/colors', label: 'Colors', icon: 'palette' },
+  { to: '/icons', label: 'Icons', icon: 'star' },
+]
+
+const components = [
+  {
+    label: 'Form',
+    icon: 'edit',
+    collapseIcon: 'chevron-down',
+    expanded: true,
+    items: [
+      { to: '/component/button', label: 'Button' },
+      { to: '/component/checkbox', label: 'Checkbox' },
+      { to: '/component/form', label: 'Form' },
+      { to: '/component/formGroup', label: 'Form Group' },
+      { to: '/component/input', label: 'Input' },
+      { to: '/component/radio', label: 'Radio' },
+      { to: '/component/select', label: 'Select' },
+      { to: '/component/slider', label: 'Slider' },
+      { to: '/component/textarea', label: 'Textarea' },
+      { to: '/component/toggle', label: 'Toggle' },
+    ],
+  },
+  {
+    label: 'UI',
+    icon: 'cube',
+    collapseIcon: 'chevron-down',
+    expanded: true,
+    items: [
+      { to: '/component/accordion', label: 'Accordion' },
+      { to: '/component/alert', label: 'Alert' },
+      { to: '/component/avatar', label: 'Avatar' },
+      { to: '/component/badge', label: 'Badge' },
+      { to: '/component/breadcrumbs', label: 'Breadcrumbs' },
+      { to: '/component/card', label: 'Card' },
+      { to: '/component/carousel', label: 'Carousel' },
+      { to: '/component/container', label: 'Container' },
+      { to: '/component/divider', label: 'Divider' },
+      { to: '/component/drawer', label: 'Drawer' },
+      { to: '/component/icon', label: 'Icon' },
+      { to: '/component/image', label: 'Image' },
+      { to: '/component/loader', label: 'Loader' },
+      { to: '/component/link', label: 'Link' },
+      { to: '/component/menu', label: 'Menu' },
+      { to: '/component/modal', label: 'Modal' },
+      { to: '/component/notifications', label: 'Notifications' },
+      { to: '/component/pagination', label: 'Pagination' },
+      { to: '/component/popover', label: 'Popover' },
+      { to: '/component/progress', label: 'Progress' },
+      { to: '/component/skeleton', label: 'Skeleton' },
+      { to: '/component/spinner', label: 'Spinner' },
+      { to: '/component/stepper', label: 'Stepper' },
+      { to: '/component/table', label: 'Table' },
+      { to: '/component/tabs', label: 'Tabs' },
+      { to: '/component/tag', label: 'Tag' },
+      { to: '/component/tooltip', label: 'Tooltip' },
+    ],
+  },
+  {
+    label: 'Helpers',
+    icon: 'wrench',
+    collapseIcon: 'chevron-down',
+    expanded: true,
+    items: [
+      { to: '/component/scroll', label: 'Scroll' },
+      { to: '/component/spacer', label: 'Spacer' },
+    ],
   },
-}
+]
+
+defineEmits(['close'])
 </script>
 
 <template>
-  <div style="min-width: 240px;" class="pb-4">
+  <div class="pb-4">
     <div class="title text-overline text-xs font-light ml-6 mt-6 mb-4">Documentation</div>
     <x-menu
       :items="docsMenu"
       class="m-4"
-      color="primary"
       filled
       @item-click="$emit('close')"
     />
@@ -93,51 +89,8 @@ export default {
     <x-menu
       :items="components"
       class="m-4"
-      color="primary"
       filled
       @item-click="$emit('close')"
     />
   </div>
 </template>
-
-<style lang="postcss" scoped>
-ul {
-  a {
-    display: flex;
-    align-items: center;
-    padding: 6px 21px;
-
-    &:hover {
-      @apply bg-secondary-200;
-    }
-
-    &.router-link-exact-active {
-      @apply bg-secondary-300;
-    }
-  }
-
-  &.inner {
-    a {
-      padding: 8px 32px;
-    }
-  }
-}
-
-.menu :deep(a) {
-  padding: 8px 32px !important;
-}
-
-.dark {
-  ul {
-    a {
-      &:hover {
-        @apply bg-secondary-600;
-      }
-
-      &.router-link-exact-active {
-        @apply bg-secondary-500;
-      }
-    }
-  }
-}
-</style>

package/docs/components/toolbar/PreToolbar.vue

@@ -3,16 +3,14 @@ import ToolbarColorToggle from './ToolbarColorToggle.vue'
 </script>
 
 <template>
-  <div class="bg-gray-900 dark border-b">
-    <x-container fluid>
-      <div class="flex justify-items-center items-center py-2 text-slate-500 dark:text-slate-300 h-10 text-sm">
-        <toolbar-color-toggle />
-        <p class="text-secondary-300 font-semibold ml-2 truncate">
-          Indielayer UI - Vue.js 3 / Nuxt.js 3 UI Library with Tailwind CSS 3. ⚡️ &nbsp;Build and prototype fast web applications.
-        </p>
-        <x-spacer/>
-        <a target="_blank" href="https://github.com/indielayer"><x-icon size="sm" icon="github"/></a>
-      </div>
-    </x-container>
-  </div>
+  <x-container fluid class="bg-gray-900 dark">
+    <div class="flex justify-items-center items-center py-2 text-slate-500 dark:text-slate-300 h-10 text-sm">
+      <toolbar-color-toggle class="shrink-0" />
+      <p class="text-secondary-300 font-semibold mx-2 truncate">
+        Indielayer UI - Vue.js 3 / Nuxt.js 3 UI Library with Tailwind CSS 3. ⚡️ &nbsp;Build and prototype fast web applications.
+      </p>
+      <x-spacer/>
+      <a target="_blank" class="shrink-0" href="https://github.com/indielayer"><x-icon size="sm" icon="github"/></a>
+    </div>
+  </x-container>
 </template>

package/docs/components/toolbar/Toolbar.vue

@@ -19,14 +19,16 @@ watch(selected, (val) => {
     selectTheme.setTheme(val)
   }
 })
+
+const isDev = import.meta.env.DEV
 </script>
 
 <template>
-  <div class="bg-white dark:bg-gray-800 border-b px-4">
-    <div class="flex justify-items-center items-center h-[70px]">
-      <a href="/" class="flex items-center md:ml-4">
+  <x-container fluid class="bg-white dark:bg-secondary-800">
+    <div class="flex justify-items-center items-center py-2">
+      <a href="/" class="flex items-center">
         <img src="@/assets/images/logo_mini.svg" width="26" alt="Indielayer"/>
-        <x-divider vertical class="h-[40px] mx-3"/>
+        <x-divider vertical class="!h-[24px] mx-3"/>
         <img class="logo-dark" src="@/assets/images/logo_word.svg" width="120" alt="Indielayer UI"/>
         <img class="logo-white" src="@/assets/images/logo_word_dark.svg" width="120" alt="Indielayer UI"/>
 
@@ -38,14 +40,25 @@ watch(selected, (val) => {
       <x-spacer/>
 
       <div class="flex items-center font-semibold text-sm">
-        <x-select v-model="selected" :options="options" hide-footer size="sm"/>
-        <x-divider vertical style="height: 10px;" class="px-2"/>
+        <x-select
+          v-if="isDev"
+          v-model="selected"
+          :options="options"
+          hide-footer
+          size="sm"
+        />
+        <x-divider v-if="isDev" vertical style="height: 10px;" class="px-2"/>
         <div class="tracking-wide text-xs">v{{ version }}</div>
         <x-divider vertical style="height: 10px;" class="px-2 hidden sm:block"/>
-        <x-link href="https://github.com/indielayer/ui" target="_blank" external class="hidden sm:block">Github</x-link>
+        <x-link
+          href="https://github.com/indielayer/ui"
+          target="_blank"
+          external
+          class="hidden sm:block"
+        >Github</x-link>
       </div>
     </div>
-  </div>
+  </x-container>
 </template>
 
 <style lang="postcss">

package/docs/layouts/default.vue

@@ -9,7 +9,7 @@ const drawer = ref(false)
 
 <template>
   <pre-toolbar />
-  <toolbar class="border-y z-10" @open-drawer="drawer = true" />
+  <toolbar class="shadow z-10" @open-drawer="drawer = true" />
   <div class="lg:hidden border-b p-2">
     <x-button
       icon-left="menu"
@@ -19,11 +19,15 @@ const drawer = ref(false)
     >Menu</x-button>
   </div>
   <div class="flex-1 flex overflow-hidden">
-    <x-drawer v-model="drawer" breakpoint="lg" width="260" class="border-r flex">
+    <x-drawer v-model="drawer" breakpoint="lg" width="220" class="border-r flex">
       <docs-menu class="flex-1" @close="drawer = false" />
     </x-drawer>
     <x-notifications inject-key="notifica">
-      <router-view class="flex-1 overflow-y-scroll" />
+      <div class="flex-1 overflow-y-scroll bg-secondary-50 dark:bg-gray-900">
+        <x-container class="py-4 lg:py-8" tag="section">
+          <router-view />
+        </x-container>
+      </div>
     </x-notifications>
   </div>
 </template>