@code-coaching/vuetiful 0.23.0 → 0.23.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@code-coaching/vuetiful",
-  "version": "0.23.0",
+  "version": "0.23.1",
   "license": "MIT",
   "scripts": {
     "dev": "onchange 'src/**/*.vue' 'src/**/*.ts' 'src/**/*.css' -- npm run build",

package/src/utils/theme/theme-switcher.vue

@@ -1,150 +1,80 @@
 <template>
-  <div class="cc-theme-switcher">
-    <VButton :class="`cc-theme-switcher__button ${buttonClasses}`" @click="showPopup = !showPopup">
+  <div class="vuetiful-theme-switcher">
+    <v-button
+      :class="`vuetiful-theme-switcher__button ${classButton}`"
+      @click="showPopup = !showPopup"
+    >
       Theme
-    </VButton>
+    </v-button>
 
     <div
       v-if="showPopup"
-      class="cc-theme-switcher__popup absolute z-10 mt-1 p-4 shadow-xl"
-      :class="classes"
+      class="vuetiful-theme-switcher__popup absolute z-10 mt-1 space-y-4 p-4 shadow-xl rounded-container-token"
+      :class="`${background} ${text} ${widthPopup} ${classList}`"
     >
-      <div class="space-y-4">
-        <section class="flex items-center justify-between">
-          <h6>Mode</h6>
-          <v-light-switch />
-        </section>
-        <nav class="list-nav -m-4 overflow-y-auto p-4" :class="listClasses">
-          <ul class="flex flex-col gap-4">
-            <li
-              class="h-full w-full p-2 text-center capitalize hover:cursor-pointer hover:bg-primary-100 hover:text-primary-900"
-              :class="`${listItemClasses} ${
-                chosenTheme === theme.name
-                  ? 'bg-primary-50 text-primary-900'
-                  : 'bg-surface-200 text-surface-900'
-              }`"
-              v-for="(theme, index) in themes"
-              :key="index"
-              @click="loadTheme(theme.name)"
-            >
-              {{ theme.name }}
-            </li>
-          </ul>
-        </nav>
-      </div>
+      <section class="flex items-center justify-between">
+        <div class="text-lg">Mode</div>
+        <v-light-switch />
+      </section>
+      <nav
+        class="vuetiful-theme-switcher__popup-list -m-4 flex flex-col gap-4 overflow-y-auto p-4"
+        :class="`${heightList} ${classList}`"
+      >
+        <v-button
+          class="vuetiful-theme-switcher__popup-list-item h-full w-full p-2 text-center capitalize hover:cursor-pointer"
+          v-for="(theme, index) in themes"
+          :class="`${classListItem} ${chosenTheme === theme.name ? 'variant-filled-surface' : ''}`"
+          :key="index"
+          @click="loadTheme(theme.name)"
+        >
+          {{ theme.name }}
+        </v-button>
+      </nav>
     </div>
   </div>
 </template>
 
-<script lang="ts">
-import { CssClasses, useDarkMode, useTheme, VButton, VLightSwitch } from "@/index";
-import { computed, defineComponent, onMounted, ref } from "vue";
+<script setup lang="ts">
+import { CssClasses, useTheme, VButton, VLightSwitch } from "@/index";
+import { onMounted, ref } from "vue";
 
-export default defineComponent({
-  components: {
-    VLightSwitch,
-    VButton,
+defineProps({
+  background: {
+    type: String as () => CssClasses,
+    default: "bg-surface-50-900-token",
   },
-  props: {
-    bgLight: {
-      type: String as () => CssClasses,
-      default: "bg-surface-50",
-    },
-    bgDark: {
-      type: String as () => CssClasses,
-      default: "bg-surface-900",
-    },
-    textOnLight: {
-      type: String as () => CssClasses,
-      default: "text-surface-900",
-    },
-    textOnDark: {
-      type: String as () => CssClasses,
-      default: "text-surface-50",
-    },
-    width: {
-      type: String as () => CssClasses,
-      default: "w-60",
-    },
-    height: {
-      type: String as () => CssClasses,
-      default: "max-h-64 lg:max-h-[500px]",
-    },
-    ring: {
-      type: String as () => CssClasses,
-      default: "ring-[1px] ring-surface-500/30",
-    },
-    rounded: {
-      type: String as () => CssClasses,
-      default: "rounded-token",
-    },
-    roundedContainer: {
-      type: String as () => CssClasses,
-      default: "rounded-container-token",
-    },
-    buttonClasses: {
-      type: String as () => CssClasses,
-      default: "w-24",
-    },
+  text: {
+    type: String as () => CssClasses,
+    default: "text-surface-900-50-token",
   },
-  setup(props) {
-    const { initializeTheme, loadTheme, themes, chosenTheme } = useTheme();
-    const { currentMode, MODE } = useDarkMode();
-
-    const showPopup = ref(false);
-    onMounted(() => {
-      initializeTheme();
-    });
-
-    const cTransition = `transition-all duration-[200ms]`;
-
-    type OnKeyDownEvent = KeyboardEvent & { currentTarget: EventTarget & HTMLDivElement };
-    function onKeyDown(event: KeyboardEvent): void {
-      if (["Enter", "Space"].includes(event.code)) {
-        event.preventDefault();
-        (event as OnKeyDownEvent).currentTarget.click();
-      }
-    }
 
-    const background = computed(() => {
-      return currentMode.value === MODE.LIGHT ? props.bgLight : props.bgDark;
-    });
-
-    const text = computed(() => {
-      return currentMode.value === MODE.LIGHT ? props.textOnLight : props.textOnDark;
-    });
-
-    const classes = computed(() => {
-      return `${cTransition} 
-      ${background.value} 
-      ${text.value} 
-      ${props.width} 
-      ${props.ring}
-      ${props.roundedContainer}`;
-    });
+  widthPopup: {
+    type: String as () => CssClasses,
+    default: "w-60",
+  },
+  heightList: {
+    type: String as () => CssClasses,
+    default: "max-h-64 lg:max-h-[500px]",
+  },
 
-    const listClasses = computed(() => {
-      return `${cTransition} 
-      ${props.height}`;
-    });
+  classButton: {
+    type: String as () => CssClasses,
+    default: "",
+  },
+  classList: {
+    type: String as () => CssClasses,
+    default: "",
+  },
+  classListItem: {
+    type: String as () => CssClasses,
+    default: "",
+  },
+});
 
-    const listItemClasses = computed(() => {
-      return `${cTransition} 
-      ${props.ring} 
-      ${props.rounded}`;
-    });
+const { initializeTheme, loadTheme, themes, chosenTheme } = useTheme();
 
-    return {
-      onKeyDown,
-      loadTheme,
-      currentMode,
-      classes,
-      chosenTheme,
-      themes,
-      showPopup,
-      listClasses,
-      listItemClasses,
-    };
-  },
+const showPopup = ref(false);
+onMounted(() => {
+  initializeTheme();
 });
 </script>