chore: commit fix

shinokada · shinokada · commit 45e24eb77a39 · 2024-09-19T18:18:54.000+02:00
diff --git a/.changeset/blue-cats-sparkle.md b/.changeset/blue-cats-sparkle.md
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.9.11
+
+### Patch Changes
+
+- feat: SidebarBrand, SidebarButton, SidebarCta components ([`b340a330f29ea787ff3928d95689c45196d5130a`](https://github.com/shinokada/svelte-5-ui-lib/commit/b340a330f29ea787ff3928d95689c45196d5130a))
+
 ## 0.9.10
 
 ### Patch Changes
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "svelte-5-ui-lib",
-  "version": "0.9.10",
+  "version": "0.9.11",
   "description": "A UI library for Svelte 5.",
   "license": "MIT",
   "main": "dist/index.js",
@@ -419,10 +419,18 @@
       "types": "./dist/sidebar/Sidebar.svelte.d.ts",
       "svelte": "./dist/sidebar/Sidebar.svelte"
     },
+    "./SidebarBrand.svelte": {
+      "types": "./dist/sidebar/SidebarBrand.svelte.d.ts",
+      "svelte": "./dist/sidebar/SidebarBrand.svelte"
+    },
     "./SidebarButton.svelte": {
       "types": "./dist/sidebar/SidebarButton.svelte.d.ts",
       "svelte": "./dist/sidebar/SidebarButton.svelte"
     },
+    "./SidebarCta.svelte": {
+      "types": "./dist/sidebar/SidebarCta.svelte.d.ts",
+      "svelte": "./dist/sidebar/SidebarCta.svelte"
+    },
     "./SidebarDropdownWrapper.svelte": {
       "types": "./dist/sidebar/SidebarDropdownWrapper.svelte.d.ts",
       "svelte": "./dist/sidebar/SidebarDropdownWrapper.svelte"
diff --git a/src/generatedFileList.ts b/src/generatedFileList.ts
@@ -77,7 +77,9 @@ export const fileList = [
   "src/lib/rating/Star.svelte",
   "src/lib/rating/Thumbup.svelte",
   "src/lib/sidebar/Sidebar.svelte",
+  "src/lib/sidebar/SidebarBrand.svelte",
   "src/lib/sidebar/SidebarButton.svelte",
+  "src/lib/sidebar/SidebarCta.svelte",
   "src/lib/sidebar/SidebarDropdownWrapper.svelte",
   "src/lib/sidebar/SidebarGroup.svelte",
   "src/lib/sidebar/SidebarItem.svelte",
diff --git a/src/lib/sidebar/Sidebar.svelte b/src/lib/sidebar/Sidebar.svelte
@@ -78,7 +78,6 @@
 @prop transition = fly
 @prop params
 @prop divClass
-@prop asideClass
 @prop ariaLabel
 @prop nonActiveClass
 @prop activeClass
diff --git a/src/lib/sidebar/SidebarBrand.svelte b/src/lib/sidebar/SidebarBrand.svelte
@@ -9,4 +9,15 @@
 <a {...restProps} href={site.href} class={base({ className })}>
   <img src={site.img} class={img({ class: imgClass })} alt={site.name} />
   <span class={span({ class: spanClass })}>{site.name}</span>
-</a>
+</a>
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@prop site
+@prop imgClass
+@prop spanClass
+@prop class: className
+@prop ...restProps
+-->
diff --git a/src/lib/sidebar/SidebarCta.svelte b/src/lib/sidebar/SidebarCta.svelte
@@ -12,4 +12,17 @@
     {/if}
   </div>
   {@render children()}
-</div>
+</div>
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@prop children
+@prop icon
+@prop divClass
+@prop spanClass
+@prop label
+@prop class: className
+@prop ...restProps
+-->
diff --git a/src/lib/sidebar/theme.ts b/src/lib/sidebar/theme.ts
@@ -47,14 +47,14 @@ export const sidebarcta = tv({
   slots: {
     base: 'p-4 mt-6 bg-primary-50 rounded-lg dark:bg-primary-900',
     div: 'flex items-center mb-3',
-    span: 'bg-primary-100 text-primary-800 text-sm font-semibold me-2 px-2.5 py-0.5 rounded dark:bg-primary-200 dark:text-primary-900',
+    span: 'bg-primary-100 text-primary-800 text-sm font-semibold me-2 px-2.5 py-0.5 rounded dark:bg-primary-200 dark:text-primary-900'
   }
-})
+});
 
 export const sitebarbrand = tv({
   slots: {
     base: 'flex items-center ps-2.5 mb-5',
     img: 'h-6 me-3 sm:h-7',
     span: 'self-center text-xl font-semibold whitespace-nowrap dark:text-white'
   }
-})
+});
diff --git a/src/routes/component-data/Sidebar.json b/src/routes/component-data/Sidebar.json
@@ -1 +1 @@
-{"name":"Sidebar","props":[["children",""],["isOpen","false"],["closeSidebar",""],["breakpoint","md"],["position","fixed"],["activateClickOutside","true"],["backdrop","true"],["backdropClass",""],["transition","fly"],["params",""],["divClass",""],["asideClass",""],["ariaLabel",""],["nonActiveClass",""],["activeClass",""],["class: className",""],["...restProps",""]]}
+{"name":"Sidebar","props":[["children",""],["isOpen","false"],["closeSidebar",""],["breakpoint","md"],["position","fixed"],["activateClickOutside","true"],["backdrop","true"],["backdropClass",""],["transition","fly"],["params",""],["divClass",""],["ariaLabel",""],["nonActiveClass",""],["activeClass",""],["class: className",""],["...restProps",""]]}
diff --git a/src/routes/component-data/SidebarBrand.json b/src/routes/component-data/SidebarBrand.json
@@ -0,0 +1 @@
+{"name":"SidebarBrand","props":[["site",""],["imgClass",""],["spanClass",""],["class: className",""],["...restProps",""]]}
diff --git a/src/routes/component-data/SidebarCta.json b/src/routes/component-data/SidebarCta.json
@@ -0,0 +1 @@
+{"name":"SidebarCta","props":[["children",""],["icon",""],["divClass",""],["spanClass",""],["label",""],["class: className",""],["...restProps",""]]}
diff --git a/src/routes/components/popover/examples/CompanyProfile.svelte b/src/routes/components/popover/examples/CompanyProfile.svelte
@@ -8,7 +8,7 @@
   <Popover triggeredBy="#demo" class="w-80 text-sm">
     <div class="flex p-3">
       <div class="me-3 shrink-0">
-        <a href="/" aria-label='popover-example' class="block rounded-lg bg-gray-100 p-2 dark:bg-gray-700">
+        <a href="/" aria-label="popover-example" class="block rounded-lg bg-gray-100 p-2 dark:bg-gray-700">
           <img class="h-8 w-8 rounded-full" src="/images/flowbite-svelte-icon-logo.svg" alt="Flowbite logo" />
         </a>
       </div>
diff --git a/src/routes/components/sidebar/examples/ContentSeparator.svelte b/src/routes/components/sidebar/examples/ContentSeparator.svelte
@@ -13,7 +13,7 @@
 
 <SidebarButton onclick={demoSidebarUi.toggle} />
 <div class="relative">
-  <Sidebar backdrop={false} isOpen={isDemoOpen} closeSidebar={closeDemoSidebar} params={{ x: -50, duration: 50 }} class="z-20 h-full" position="absolute" activeClass='p-2' nonActiveClass='p-2'>
+  <Sidebar backdrop={false} isOpen={isDemoOpen} closeSidebar={closeDemoSidebar} params={{ x: -50, duration: 50 }} class="z-20 h-full" position="absolute" activeClass="p-2" nonActiveClass="p-2">
     <SidebarGroup>
       <SidebarItem label="Dashboard" href="/">
         {#snippet iconSlot()}
diff --git a/src/routes/components/sidebar/examples/Cta.svelte b/src/routes/components/sidebar/examples/Cta.svelte
@@ -13,7 +13,7 @@
 
 <SidebarButton onclick={demoSidebarUi.toggle} />
 <div class="relative">
-  <Sidebar backdrop={false} isOpen={isDemoOpen} closeSidebar={closeDemoSidebar} params={{ x: -50, duration: 50 }} class="z-20 h-full" position="absolute" activeClass='p-2' nonActiveClass='p-2' >
+  <Sidebar backdrop={false} isOpen={isDemoOpen} closeSidebar={closeDemoSidebar} params={{ x: -50, duration: 50 }} class="z-20 h-full" position="absolute" activeClass="p-2" nonActiveClass="p-2">
     <SidebarGroup>
       <SidebarItem label="Dashboard" href="/">
         {#snippet iconSlot()}
@@ -43,13 +43,13 @@
       </SidebarItem>
       <SidebarCta label="Beta">
         {#snippet icon()}
-          <button type="button" class="ms-auto -mx-1.5 -my-1.5 bg-primary-50 text-primary-900 rounded-lg focus:ring-2 focus:ring-primary-400 p-1 hover:bg-primary-200 inline-flex h-6 w-6 dark:bg-primary-900 dark:text-primary-400 dark:hover:bg-primary-800" data-collapse-toggle="dropdown-cta" aria-label="Close">
+          <button type="button" class="-mx-1.5 -my-1.5 ms-auto inline-flex h-6 w-6 rounded-lg bg-primary-50 p-1 text-primary-900 hover:bg-primary-200 focus:ring-2 focus:ring-primary-400 dark:bg-primary-900 dark:text-primary-400 dark:hover:bg-primary-800" data-collapse-toggle="dropdown-cta" aria-label="Close">
             <span class="sr-only">Close</span>
-            <CloseOutline class="w-4 h-4" />
+            <CloseOutline class="h-4 w-4" />
           </button>
         {/snippet}
         <p class="mb-3 text-sm text-primary-900 dark:text-primary-400">Preview the new Flowbite dashboard navigation! You can turn the new navigation off for a limited time in your profile.</p>
-        <a class="text-sm text-primary-900 underline hover:text-primary-800 dark:text-primary-400 dark:hover:text-primary-300" href="/"> Turn new navigation off </a>
+        <a class="text-sm text-primary-900 underline hover:text-primary-800 dark:text-primary-400 dark:hover:text-primary-300" href="/">Turn new navigation off</a>
       </SidebarCta>
     </SidebarGroup>
   </Sidebar>
diff --git a/src/routes/components/sidebar/examples/Default.svelte b/src/routes/components/sidebar/examples/Default.svelte
@@ -13,7 +13,7 @@
 
 <SidebarButton onclick={demoSidebarUi.toggle} />
 <div class="relative">
-  <Sidebar backdrop={false} isOpen={isDemoOpen} closeSidebar={closeDemoSidebar} params={{ x: -50, duration: 50 }} class="z-20 h-full" position="absolute" activeClass='p-2' nonActiveClass='p-2' >
+  <Sidebar backdrop={false} isOpen={isDemoOpen} closeSidebar={closeDemoSidebar} params={{ x: -50, duration: 50 }} class="z-20 h-full" position="absolute" activeClass="p-2" nonActiveClass="p-2">
     <SidebarGroup>
       <SidebarItem label="Dashboard" href="/">
         {#snippet iconSlot()}
diff --git a/src/routes/components/sidebar/examples/DropdownTransition.svelte b/src/routes/components/sidebar/examples/DropdownTransition.svelte
@@ -19,7 +19,7 @@
 
 <SidebarButton onclick={demoSidebarUi.toggle} />
 <div class="relative">
-  <Sidebar backdrop={false} isOpen={isDemoOpen} closeSidebar={closeDemoSidebar} params={{ x: -50, duration: 50 }} position="absolute" activeClass='p-2' nonActiveClass='p-2' class="z-20 h-full">
+  <Sidebar backdrop={false} isOpen={isDemoOpen} closeSidebar={closeDemoSidebar} params={{ x: -50, duration: 50 }} position="absolute" activeClass="p-2" nonActiveClass="p-2" class="z-20 h-full">
     <SidebarGroup>
       <SidebarItem label="Dashboard">
         {#snippet iconSlot()}
diff --git a/src/routes/components/sidebar/examples/Icon.svelte b/src/routes/components/sidebar/examples/Icon.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { Sidebar, SidebarGroup, SidebarItem, SidebarDropdownWrapper, SidebarButton, uiHelpers } from '$lib';
-  import { ChartOutline, ChevronDoubleUpOutline, ChevronDoubleDownOutline,  ShoppingBagSolid } from 'flowbite-svelte-icons';
+  import { ChartOutline, ChevronDoubleUpOutline, ChevronDoubleDownOutline, ShoppingBagSolid } from 'flowbite-svelte-icons';
   import PlusPlaceholder from '../../../utils/PlusPlaceholder.svelte';
   const spanClass = 'flex-1 ms-3 whitespace-nowrap';
   const demoSidebarUi = uiHelpers();
@@ -13,7 +13,7 @@
 
 <SidebarButton onclick={demoSidebarUi.toggle} />
 <div class="relative">
-  <Sidebar backdrop={false} isOpen={isDemoOpen} closeSidebar={closeDemoSidebar} params={{ x: -50, duration: 50 }} position="absolute" class="z-20 h-full" activeClass='p-2' nonActiveClass='p-2'>
+  <Sidebar backdrop={false} isOpen={isDemoOpen} closeSidebar={closeDemoSidebar} params={{ x: -50, duration: 50 }} position="absolute" class="z-20 h-full" activeClass="p-2" nonActiveClass="p-2">
     <SidebarGroup>
       <SidebarItem label="Dashboard">
         {#snippet iconSlot()}
@@ -25,10 +25,10 @@
           <ShoppingBagSolid class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
         {/snippet}
         {#snippet arrowup()}
-          <ChevronDoubleUpOutline class="w-6 h-6" />
+          <ChevronDoubleUpOutline class="h-6 w-6" />
         {/snippet}
         {#snippet arrowdown()}
-          <ChevronDoubleDownOutline class="w-6 h-6" />
+          <ChevronDoubleDownOutline class="h-6 w-6" />
         {/snippet}
         <SidebarItem label="Sidebar" href="/components/sidebar" />
         <SidebarItem label="Billing" />
diff --git a/src/routes/components/sidebar/examples/LogoBranding.svelte b/src/routes/components/sidebar/examples/LogoBranding.svelte
@@ -18,7 +18,7 @@
 
 <SidebarButton onclick={demoSidebarUi.toggle} />
 <div class="relative">
-  <Sidebar backdrop={false} isOpen={isDemoOpen} closeSidebar={closeDemoSidebar} params={{ x: -50, duration: 50 }} class="z-20 h-full" position="absolute" activeClass='p-2' nonActiveClass='p-2' >
+  <Sidebar backdrop={false} isOpen={isDemoOpen} closeSidebar={closeDemoSidebar} params={{ x: -50, duration: 50 }} class="z-20 h-full" position="absolute" activeClass="p-2" nonActiveClass="p-2">
     <SidebarGroup>
       <SidebarBrand {site} />
       <SidebarItem label="Dashboard" href="/">
diff --git a/src/routes/components/sidebar/examples/Multilevel.svelte b/src/routes/components/sidebar/examples/Multilevel.svelte
@@ -13,7 +13,7 @@
 
 <SidebarButton onclick={demoSidebarUi.toggle} />
 <div class="relative">
-  <Sidebar backdrop={false} isOpen={isDemoOpen} closeSidebar={closeDemoSidebar} params={{ x: -50, duration: 50 }} position="absolute" activeClass='p-2' nonActiveClass='p-2' class="z-20 h-full">
+  <Sidebar backdrop={false} isOpen={isDemoOpen} closeSidebar={closeDemoSidebar} params={{ x: -50, duration: 50 }} position="absolute" activeClass="p-2" nonActiveClass="p-2" class="z-20 h-full">
     <SidebarGroup>
       <SidebarItem label="Dashboard">
         {#snippet iconSlot()}
diff --git a/src/routes/components/sidebar/examples/index.ts b/src/routes/components/sidebar/examples/index.ts
@@ -5,6 +5,6 @@ export { default as OverridingActiveElement } from './OverridingActiveElement.sv
 export { default as Multilevel } from './Multilevel.svelte';
 export { default as ContentSeparator } from './ContentSeparator.svelte';
 export { default as Icon } from './Icon.svelte';
-export { default as Cta } from './Cta.svelte'
-export { default as LogoBranding } from './LogoBranding.svelte'
-export { default as DropdownTransition } from './DropdownTransition.svelte'
+export { default as Cta } from './Cta.svelte';
+export { default as LogoBranding } from './LogoBranding.svelte';
+export { default as DropdownTransition } from './DropdownTransition.svelte';
diff --git a/src/routes/pages/coverage/+page.svelte b/src/routes/pages/coverage/+page.svelte
@@ -138,7 +138,7 @@
       checked: true
     },
     sidebar: {
-      checked: true,
+      checked: true
       // problems: ''
     },
     skeleton: {
@@ -171,8 +171,8 @@
       // notes: 'Variants, reactive examples'
     },
     tooltip: {
-      checked: true
-      // problems: 'Avatar tooltip'
+      checked: true,
+      problems: 'apply floating-ui'
     },
     video: {
       checked: true

Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-{"name":"Sidebar","props":[["children",""],["isOpen","false"],["closeSidebar",""],["breakpoint","md"],["position","fixed"],["activateClickOutside","true"],["backdrop","true"],["backdropClass",""],["transition","fly"],["params",""],["divClass",""],["asideClass",""],["ariaLabel",""],["nonActiveClass",""],["activeClass",""],["class: className",""],["...restProps",""]]}`
	`1`	`+{"name":"Sidebar","props":[["children",""],["isOpen","false"],["closeSidebar",""],["breakpoint","md"],["position","fixed"],["activateClickOutside","true"],["backdrop","true"],["backdropClass",""],["transition","fly"],["params",""],["divClass",""],["ariaLabel",""],["nonActiveClass",""],["activeClass",""],["class: className",""],["...restProps",""]]}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+{"name":"SidebarBrand","props":[["site",""],["imgClass",""],["spanClass",""],["class: className",""],["...restProps",""]]}`