@code-coaching/vuetiful 0.22.0 → 0.23.0

package/src/components/molecules/VTabs/VTab.vue

@@ -1,12 +1,15 @@
 <script setup lang="ts">
+import { unstyledProp } from "@/props";
+import { useSettings } from "@/services";
 import { Tab } from "@headlessui/vue";
 import { computed, inject } from "vue";
 
-defineProps({
+const props = defineProps({
   disabled: {
     type: Boolean,
     default: false,
   },
+  unstyled: unstyledProp,
 });
 
 const activeClass = inject("active") as string;
@@ -14,26 +17,38 @@ const hoverClass = inject("hover") as string;
 const vertical = inject("vertical") as boolean;
 const classTab = inject("classTab") as string;
 const hideSeparator = inject("hideSeparator") as boolean;
+const classTabSeparator = inject("classTabSeparator") as string;
 
 const tabClass = computed(() => {
   return classTab ? classTab : "w-full px-4 py-2";
 });
+
+const { settings } = useSettings();
+const isUnstyled = settings.global.unstyled || settings.components.tab.unstyled || props.unstyled;
 </script>
 
 <template>
   <Tab
     :disabled="disabled"
     v-slot="{ selected }"
+    class="vuetiful-tab"
     :class="`flex ${vertical ? 'flex-row justify-between' : 'flex-col'}`"
   >
-    <div data-test="slot-container" :class="`text-base rounded-token ${selected ? activeClass : hoverClass} ${tabClass}`">
+    <div
+      data-test="slot-container"
+      class="vuetiful-tab-content"
+      :class="`text-base ${isUnstyled ? '' : 'rounded-token'} ${
+        selected ? activeClass : hoverClass
+      } ${tabClass}`"
+    >
       <slot />
     </div>
     <div
       v-show="selected && !hideSeparator"
-      :class="`z-10 border-surface-900-50-token ${
-        vertical ? 'mr-[-2px] h-full border-r-2' : 'mb-[-2px] border-b-2'
-      }`"
+      class="vuetiful-tab-separator"
+      :class="`z-10 ${
+        vertical ? 'mr-[-2px] h-full border-r-2' : 'mb-[-2px] w-full border-b-2'
+      } ${classTabSeparator}`"
     ></div>
   </Tab>
 </template>

package/src/components/molecules/VTabs/VTabPanel.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { TabPanel } from '@headlessui/vue';
+import { TabPanel } from "@headlessui/vue";
 </script>
 
 <template>
-  <TabPanel>
+  <TabPanel class="vuetiful-tab-panel">
     <slot />
   </TabPanel>
 </template>

package/src/components/molecules/VTabs/VTabs.test.ts

@@ -21,7 +21,7 @@ describe("VTabs", () => {
     const wrapper = mount({
       template: /*html*/ `
           <v-tabs>
-            <template v-slot="tabs">
+            <template v-slot:tabs>
               <v-tab>John Duck</v-tab>
             </template>
             <v-tab-panel>John Duck Panel</v-tab-panel>
@@ -47,6 +47,7 @@ describe("VTabs", () => {
     const tabPanels = wrapper.find("[data-test='vuetiful-tab-panels']");
     expect(tabPanels.classes()).toEqual([
       "vuetiful-tab-panels",
+      "p-4",
       "!rounded-tl-none",
       "!rounded-tr-none",
       "rounded-container-token",
@@ -57,7 +58,7 @@ describe("VTabs", () => {
     const wrapper = mount({
       template: /*html*/ `
           <v-tabs vertical>
-            <template v-slot="tabs">
+            <template v-slot:tabs>
               <v-tab>Tab 1</v-tab>
             </template>
             <v-tab-panel>Panel 1</v-tab-panel>
@@ -82,6 +83,7 @@ describe("VTabs", () => {
     const tabPanels = wrapper.find("[data-test='vuetiful-tab-panels']");
     expect(tabPanels.classes()).toEqual([
       "vuetiful-tab-panels",
+      "p-4",
       "!rounded-bl-none",
       "!rounded-tl-none",
       "rounded-container-token",

package/src/components/molecules/VTabs/VTabs.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { unstyledProp } from "@/props";
+import { useSettings } from "@/services";
 import { TabGroup, TabList, TabPanels } from "@headlessui/vue";
 import { provide } from "vue";
 
@@ -36,13 +38,19 @@ const props = defineProps({
   },
   classSeparator: {
     type: String,
-    default: "border border-surface-400-500-token",
+    default: "border-surface-400-500-token",
+  },
+  classTabSeparator: {
+    type: String,
+    default: "border-surface-900-50-token",
   },
 
   defaultIndex: {
     type: Number,
     default: 0,
   },
+
+  unstyled: unstyledProp,
 });
 
 provide("active", props.active);
@@ -50,6 +58,10 @@ provide("hover", props.hover);
 provide("vertical", props.vertical);
 provide("classTab", props.classTab);
 provide("hideSeparator", props.hideSeparator);
+provide("classTabSeparator", props.classTabSeparator);
+
+const { settings } = useSettings();
+const isUnstyled = settings.global.unstyled || settings.components.tabs.unstyled || props.unstyled;
 </script>
 
 <template>
@@ -57,26 +69,38 @@ provide("hideSeparator", props.hideSeparator);
     as="div"
     :vertical="vertical"
     :defaultIndex="defaultIndex"
+    class="vuetiful-tab-group"
     :class="`${vertical ? 'flex' : ''}`"
   >
     <TabList
       data-test="vuetiful-tab-list"
-      :class="`vuetiful-tab-list flex ${vertical ? 'flex-col' : ''} ${
-        vertical ? '!rounded-br-none !rounded-tr-none' : '!rounded-bl-none !rounded-br-none'
-      } rounded-container-token ${classTabs}`"
+      :class="`vuetiful-tab-list flex ${vertical ? 'flex-col' : ''}
+      ${
+        isUnstyled
+          ? ''
+          : `${
+              vertical ? '!rounded-br-none !rounded-tr-none' : '!rounded-bl-none !rounded-br-none'
+            } rounded-container-token `
+      } 
+      ${classTabs}`"
     >
       <slot name="tabs" />
     </TabList>
     <div
       data-test="vuetiful-tab-separator"
       v-if="!hideSeparator"
-      :class="`${classSeparator}`"
+      :class="`border ${classSeparator}`"
     ></div>
     <TabPanels
       data-test="vuetiful-tab-panels"
-      :class="`vuetiful-tab-panels ${
-        vertical ? '!rounded-bl-none !rounded-tl-none' : '!rounded-tl-none !rounded-tr-none'
-      } rounded-container-token ${classPanels}`"
+      :class="`vuetiful-tab-panels
+      ${
+        isUnstyled
+          ? ''
+          : `p-4 ${
+              vertical ? '!rounded-bl-none !rounded-tl-none' : '!rounded-tl-none !rounded-tr-none'
+            } rounded-container-token`
+      } ${classPanels}`"
     >
       <slot />
     </TabPanels>

package/src/components/molecules/index.ts

@@ -1,7 +1,7 @@
 import VDrawer from "./VDrawer.vue";
 import VPreview from "./VPreview.vue";
-import VRail from "./VRail.vue";
-import VRailTile from "./VRailTile.vue";
+import VRail from "./VRail/VRail.vue";
+import VRailTile from "./VRail/VRailTile.vue";
 import VShell from "./VShell.vue";
 
 import VListbox from "./VListbox/VListbox.vue";
@@ -24,6 +24,8 @@ import VCardBody from "./VCard/VCardBody.vue";
 import VCardFooter from "./VCard/VCardFooter.vue";
 import VCardHeader from "./VCard/VCardHeader.vue";
 
+import VCodeBlock from "./VCodeBlock.vue";
+
 export {
   VAccordion,
   VAccordionItem,
@@ -32,6 +34,7 @@ export {
   VCardBody,
   VCardFooter,
   VCardHeader,
+  VCodeBlock,
   VDrawer,
   VListbox,
   VListboxButton,

package/src/props/index.ts

@@ -0,0 +1 @@
+export * from './props';

package/src/props/props.ts

@@ -0,0 +1,62 @@
+import { Size, Variant } from "@/types";
+import { PropType } from "vue";
+
+const sizeProp = {
+  type: String as PropType<"xs" | "sm" | "md" | "lg" | "xl">,
+  default: Size.MD,
+};
+
+const unstyledProp = {
+  type: Boolean,
+  default: false,
+};
+
+const variantProp = {
+  // explicit string union because TypeScript type won't throw error if invalid value is passed
+  type: String as PropType<
+    | ""
+    | "filled"
+    | "filled-primary"
+    | "filled-secondary"
+    | "filled-tertiary"
+    | "filled-success"
+    | "filled-warning"
+    | "filled-error"
+    | "filled-surface"
+    | "ringed"
+    | "ringed-primary"
+    | "ringed-secondary"
+    | "ringed-tertiary"
+    | "ringed-success"
+    | "ringed-warning"
+    | "ringed-error"
+    | "ringed-surface"
+    | "ghost"
+    | "ghost-primary"
+    | "ghost-secondary"
+    | "ghost-tertiary"
+    | "ghost-success"
+    | "ghost-warning"
+    | "ghost-error"
+    | "ghost-surface"
+    | "soft"
+    | "soft-primary"
+    | "soft-secondary"
+    | "soft-tertiary"
+    | "soft-success"
+    | "soft-warning"
+    | "soft-error"
+    | "soft-surface"
+    | "glass"
+    | "glass-primary"
+    | "glass-secondary"
+    | "glass-tertiary"
+    | "glass-success"
+    | "glass-warning"
+    | "glass-error"
+    | "glass-surface"
+  >,
+  default: Variant.Filled,
+};
+
+export { sizeProp, unstyledProp, variantProp };

package/src/services/index.ts

@@ -1,6 +1,8 @@
-import { useRail } from "./rail.service";
+import { useDarkMode } from "./dark-mode.service";
 import { useDrawer } from "./drawer.service";
 import { useHighlight } from "./highlight.service";
-import { useDarkMode } from "./dark-mode.service";
+import { useRail } from "./rail.service";
+import { useSettings, VuetifulSettings } from "./settings.service";
 
-export { useRail, useDrawer, useHighlight, useDarkMode };
+export { useDarkMode, useDrawer, useHighlight, useRail, useSettings };
+export type { VuetifulSettings };

package/src/services/settings.service.test.ts

@@ -0,0 +1,17 @@
+import { afterEach, describe, expect, test, vi } from "vitest";
+
+describe("useSettings", () => {
+  afterEach(() => {
+    vi.resetModules();
+  });
+  describe("updateSettings", () => {
+    test("should update settings", async () => {
+      const { useSettings } = await import("./settings.service");
+      const { updateSettings, settings } = useSettings();
+
+      expect(settings.global.unstyled).toBe(false);
+      updateSettings({ global: { unstyled: true } });
+      expect(settings.global.unstyled).toBe(true);
+    });
+  });
+});

package/src/services/settings.service.ts

@@ -0,0 +1,136 @@
+import { reactive } from "vue";
+
+interface UnstyledSettings {
+  unstyled: boolean;
+}
+
+interface GlobalSettings extends UnstyledSettings {}
+interface RadioGroupSettings extends UnstyledSettings {}
+interface RadioItemSettings extends UnstyledSettings {}
+interface AccordionSettings extends UnstyledSettings {}
+interface AccordionItemSettings extends UnstyledSettings {}
+interface AlertSettings extends UnstyledSettings {}
+interface AvatarSettings extends UnstyledSettings {}
+interface BadgeSettings extends UnstyledSettings {}
+interface ButtonSettings extends UnstyledSettings {}
+interface ListboxSettings extends UnstyledSettings {}
+interface ListboxItemSettings extends UnstyledSettings {}
+interface CodeBlockSettings extends UnstyledSettings {}
+interface SwitchSettings extends UnstyledSettings {}
+interface CardSettings extends UnstyledSettings {}
+interface CardHeaderSettings extends UnstyledSettings {}
+interface CardBodySettings extends UnstyledSettings {}
+interface CardFooterSettings extends UnstyledSettings {}
+interface TabsSettings extends UnstyledSettings {}
+interface TabSettings extends UnstyledSettings {}
+
+export interface VuetifulSettings {
+  global: GlobalSettings;
+  components: Partial<{
+    avatar: AvatarSettings;
+    alert: AlertSettings;
+    badge: BadgeSettings;
+    button: ButtonSettings;
+    codeBlock: CodeBlockSettings;
+    switch: SwitchSettings;
+
+    accordion: AccordionSettings;
+    accordionItem: AccordionItemSettings;
+
+    listbox: ListboxSettings;
+    listboxItem: ListboxItemSettings;
+
+    radioGroup: RadioGroupSettings;
+    radioItem: RadioItemSettings;
+
+    card: CardSettings;
+    cardHeader: CardHeaderSettings;
+    cardBody: CardBodySettings;
+    cardFooter: CardFooterSettings;
+
+    tabs: TabsSettings;
+    tab: TabSettings;
+  }>;
+}
+
+const settings = reactive({
+  global: {
+    unstyled: false,
+  },
+  components: {
+    radioGroup: {
+      unstyled: false,
+    },
+    radioItem: {
+      unstyled: false,
+    },
+    switch: {
+      unstyled: false,
+    },
+    avatar: {
+      unstyled: false,
+    },
+    badge: {
+      unstyled: false,
+    },
+    button: {
+      unstyled: false,
+    },
+    chip: {
+      unstyled: false,
+    },
+    codeBlock: {
+      unstyled: false,
+    },
+    listbox: {
+      unstyled: false,
+    },
+    listboxItem: {
+      unstyled: false,
+    },
+    accordion: {
+      unstyled: false,
+    },
+    accordionItem: {
+      unstyled: false,
+    },
+    alert: {
+      unstyled: false,
+    },
+    card: {
+      unstyled: false,
+    },
+    cardHeader: {
+      unstyled: false,
+    },
+    cardBody: {
+      unstyled: false,
+    },
+    cardFooter: {
+      unstyled: false,
+    },
+    tabs: {
+      unstyled: false,
+    },
+    tab: {
+      unstyled: false,
+    },
+  },
+});
+
+const useSettings = () => {
+  const updateSettings = (partialSettings: Partial<VuetifulSettings>) => {
+    for (const key in partialSettings) {
+      if (key in settings) {
+        Object.assign((settings as any)[key], (partialSettings as any)[key]);
+      }
+    }
+  };
+
+  return {
+    updateSettings,
+    settings,
+  };
+};
+
+export { useSettings };

package/src/types/index.ts

@@ -1 +1,59 @@
 export * from "./tailwind";
+
+/**
+ * The commented string unions are to use in PropType<> for Vue components,
+ * TypeScript types or enums do not give errors when using a string that is not in the union.
+ **/
+
+export const Variant = {
+  Filled: "filled",
+  FilledPrimary: "filled-primary",
+  FilledSecondary: "filled-secondary",
+  FilledTertiary: "filled-tertiary",
+  FilledSuccess: "filled-success",
+  FilledWarning: "filled-warning",
+  FilledError: "filled-error",
+  FilledSurface: "filled-surface",
+  Ringed: "ringed",
+  RingedPrimary: "ringed-primary",
+  RingedSecondary: "ringed-secondary",
+  RingedTertiary: "ringed-tertiary",
+  RingedSuccess: "ringed-success",
+  RingedWarning: "ringed-warning",
+  RingedError: "ringed-error",
+  RingedSurface: "ringed-surface",
+  Ghost: "ghost",
+  GhostPrimary: "ghost-primary",
+  GhostSecondary: "ghost-secondary",
+  GhostTertiary: "ghost-tertiary",
+  GhostSuccess: "ghost-success",
+  GhostWarning: "ghost-warning",
+  GhostError: "ghost-error",
+  GhostSurface: "ghost-surface",
+  Soft: "soft",
+  SoftPrimary: "soft-primary",
+  SoftSecondary: "soft-secondary",
+  SoftTertiary: "soft-tertiary",
+  SoftSuccess: "soft-success",
+  SoftWarning: "soft-warning",
+  SoftError: "soft-error",
+  SoftSurface: "soft-surface",
+  Glass: "glass",
+  GlassPrimary: "glass-primary",
+  GlassSecondary: "glass-secondary",
+  GlassTertiary: "glass-tertiary",
+  GlassSuccess: "glass-success",
+  GlassWarning: "glass-warning",
+  GlassError: "glass-error",
+  GlassSurface: "glass-surface",
+};
+// "filled" | "filled-primary" | "filled-secondary" | "filled-tertiary" | "filled-success" | "filled-warning" | "filled-error" | "filled-surface" | "ringed" | "ringed-primary" | "ringed-secondary" | "ringed-tertiary" | "ringed-success" | "ringed-warning" | "ringed-error" | "ringed-surface" | "ghost" | "ghost-primary" | "ghost-secondary" | "ghost-tertiary" | "ghost-success" | "ghost-warning" | "ghost-error" | "ghost-surface" | "soft" | "soft-primary" | "soft-secondary" | "soft-tertiary" | "soft-success" | "soft-warning" | "soft-error" | "soft-surface" | "glass" | "glass-primary" | "glass-secondary" | "glass-tertiary" | "glass-success" | "glass-warning" | "glass-error" | "glass-surface" |
+
+export const Size = {
+  XS: "xs",
+  SM: "sm",
+  MD: "md",
+  LG: "lg",
+  XL: "xl",
+};
+// "xs" | "sm" | "md" | "lg" | "xl"

package/src/components/atoms/VCodeBlock.test.ts

@@ -1,14 +0,0 @@
-import { mount } from "@vue/test-utils";
-import { expect, test } from "vitest";
-import { VCodeBlock } from ".";
-
-test("VCodeBlock", () => {
-  expect(VCodeBlock).toBeTruthy();
-});
-
-// TODO: add tests
-test("VCodeBlock using slot", () => {
-  const wrapper = mount(VCodeBlock);
-
-  expect(wrapper).toBeTruthy();
-});

package/src/components/atoms/VCodeBlock.vue

@@ -1,92 +0,0 @@
-<script setup lang="ts">
-import { CssClasses, VButton, vClipboard } from "@/index";
-import { useHighlight } from "@/services/highlight.service";
-import "highlight.js/styles/github-dark.css";
-import { ref } from "vue";
-
-const { highlight } = useHighlight();
-
-const props = defineProps({
-  language: {
-    type: String,
-    default: "plaintext",
-  },
-  code: {
-    type: String,
-    default: "",
-  },
-
-  preventOverflow: {
-    type: Boolean,
-    default: false,
-  },
-
-  headerClass: {
-    type: String as () => CssClasses,
-    default: "",
-  },
-  preClass: {
-    type: String as () => CssClasses,
-    default: "",
-  },
-
-  buttonClass: {
-    type: String as () => CssClasses,
-    default: "btn-sm",
-  },
-  buttonText: {
-    type: String,
-    default: "Copy",
-  },
-  buttonCopiedText: {
-    type: String,
-    default: "👍",
-  },
-});
-
-const emit = defineEmits<{
-  (event: "copy"): void;
-}>();
-
-const copyState = ref(false);
-
-// Allow shorthand alias, but show full text in UI
-function languageFormatter(lang: string): string {
-  if (lang === "js") return "javascript";
-  if (lang === "ts") return "typescript";
-  if (["sh", "bash", "zsh", "shell"].includes(lang)) return "console";
-  return lang;
-}
-
-function onCopyClick() {
-  copyState.value = true;
-  setTimeout(() => {
-    copyState.value = false;
-  }, 2000);
-  emit("copy");
-}
-</script>
-
-<template v-if="language && code">
-  <div
-    class="code-block max-w-full bg-neutral-900/90 text-sm text-white shadow rounded-container-token"
-  >
-    <header
-      :class="`code-block-header flex items-center justify-between p-2 pb-0 pl-4 text-xs uppercase text-white/50 ${headerClass}`"
-    >
-      <span :class="`code-block-language`">{{ languageFormatter(language) }}</span>
-      <v-button
-        :class="`code-block-btn ${buttonClass}`"
-        @click="onCopyClick()"
-        v-clipboard="props.code"
-      >
-        {{ !copyState ? buttonText : buttonCopiedText }}
-      </v-button>
-    </header>
-    <pre
-      :class="`code-block-pre ${
-        preventOverflow ? 'whitespace-pre-wrap break-all' : 'overflow-auto'
-      } p-4 pt-1 ${preClass}`"
-    ><code :class="`code-block-code language-${language}`" v-html="highlight(props.code, props.language)"></code></pre>
-  </div>
-</template>

package/src/components/molecules/VRailTile.test.ts

@@ -1,14 +0,0 @@
-import { mount } from "@vue/test-utils";
-import { expect, test } from "vitest";
-import { VRailTile } from ".";
-
-test("VRailTile", () => {
-  expect(VRailTile).toBeTruthy();
-});
-
-// TODO: add tests
-test("VRailTile using slot", () => {
-  const wrapper = mount(VRailTile);
-
-  expect(wrapper).toBeTruthy();
-});