@cfasim-ui/components 0.1.0 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cfasim-ui/components",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "type": "module",
   "description": "Vue 3 UI components for cfasim-ui",
   "license": "Apache-2.0",

package/src/Expander/Expander.vue

@@ -8,7 +8,7 @@ import {
 const open = defineModel<boolean>("open", { default: false });
 
 defineProps<{
-  label: string;
+  label?: string;
 }>();
 </script>
 
@@ -16,7 +16,7 @@ defineProps<{
   <CollapsibleRoot v-model:open="open" class="expander">
     <CollapsibleTrigger class="expander-trigger">
       <span class="expander-caret" :class="{ open }" />
-      {{ label }}
+      <slot name="label">{{ label }}</slot>
     </CollapsibleTrigger>
     <CollapsibleContent class="expander-content">
       <slot />

package/src/LightDarkToggle/LightDarkToggle.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import Icon from "../Icon/Icon.vue";
+
+const isDark = ref(window.matchMedia("(prefers-color-scheme: dark)").matches);
+
+function apply(dark: boolean) {
+  document.documentElement.classList.toggle("dark", dark);
+  document.documentElement.classList.toggle("light", !dark);
+}
+
+apply(isDark.value);
+
+watch(isDark, apply);
+</script>
+
+<template>
+  <button
+    class="light-dark-toggle"
+    type="button"
+    :aria-label="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
+    @click="isDark = !isDark"
+  >
+    <Icon :icon="isDark ? 'dark_mode' : 'light_mode'" size="sm" />
+  </button>
+</template>
+
+<style scoped>
+.light-dark-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: 1px solid var(--color-border);
+  border-radius: 0.25em;
+  background: var(--color-bg-0);
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  transition:
+    color var(--transition-fast),
+    background-color var(--transition-fast);
+}
+
+.light-dark-toggle:hover {
+  color: var(--color-text);
+  background: var(--color-bg-1);
+}
+</style>

package/src/SidebarLayout/SidebarLayout.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted } from "vue";
 import Icon from "../Icon/Icon.vue";
+import LightDarkToggle from "../LightDarkToggle/LightDarkToggle.vue";
 
 const mql = window.matchMedia("(max-width: 767px)");
 const isMobile = ref(mql.matches);
@@ -65,6 +66,11 @@ function toggle() {
       </aside>
     </div>
     <main class="Main">
+      <div class="Topbar">
+        <slot name="topbar">
+          <LightDarkToggle />
+        </slot>
+      </div>
       <div class="MainScroll">
         <div class="MainContent">
           <slot />
@@ -187,6 +193,20 @@ function toggle() {
   font-size: var(--font-size-md);
 }
 
+.Topbar {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: var(--space-2) var(--space-4);
+  flex-shrink: 0;
+}
+
+@media (min-width: 768px) {
+  .Topbar {
+    padding: var(--space-2) var(--space-4) var(--space-2) var(--space-20);
+  }
+}
+
 .MainScroll {
   flex: 1;
   min-height: 0;
@@ -212,7 +232,7 @@ function toggle() {
 
 @media (min-width: 768px) {
   .MainContent {
-    padding: 0 var(--space-20);
+    padding: 0 var(--space-4) 0 var(--space-20);
   }
 }
 

package/src/index.ts

@@ -4,6 +4,7 @@ export { default as Button } from "./Button/Button.vue";
 export { default as Expander } from "./Expander/Expander.vue";
 export { default as Hint } from "./Hint/Hint.vue";
 export { default as Icon } from "./Icon/Icon.vue";
+export { default as LightDarkToggle } from "./LightDarkToggle/LightDarkToggle.vue";
 export { default as NumberInput } from "./NumberInput/NumberInput.vue";
 export { default as SelectBox } from "./SelectBox/SelectBox.vue";
 export type { SelectOption } from "./SelectBox/SelectBox.vue";