feat: 🎸 update components

.changeset/nine-pillows-melt.md

@@ -0,0 +1,5 @@
+---
+"@foxone/uikit": patch
+---
+
+more components

packages/uikit/.storybook/preview.js

@@ -1,15 +1,15 @@
 import { app } from "@storybook/vue3";
-import { defineComponent } from "vue";
-import { createVuetify } from "vuetify";
+import { defineComponent, watchEffect } from "vue";
+import { createVuetify, useTheme } from "vuetify";
 import * as components from "vuetify/components";
 import * as directives from "vuetify/directives";
 import { themes } from "@storybook/theming";
 import ficons from "./ficons";
 
 import "vuetify/styles";
-import "../src/styles/index.scss";
 
 import { usePresets } from "../src/presets";
+import UIKit from "../src/index";
 
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
@@ -47,6 +47,7 @@ const options = usePresets({
 const vuetify = createVuetify(options);
 
 app.use(vuetify);
+app.use(UIKit);
 
 export const decorators = [
   (story, context) => {
@@ -56,7 +57,7 @@ export const decorators = [
       name: "StoryBookWrap",
       components: { WrappedComponent },
       template: `
-        <v-app :theme="theme">
+        <v-app>
           <v-main>
             <v-container fluid>
               <wrapped-component />
@@ -65,9 +66,13 @@ export const decorators = [
         </v-app>
       `,
       setup() {
-        const theme = context.globals.theme;
+        watchEffect(() => {
+          const theme = useTheme();
 
-        return { theme, context };
+          theme.global.name.value = context.globals.theme;
+        });
+
+        return { context };
       },
     });
   },

packages/uikit/src/components/FDivider/FDivider.stories.ts

@@ -21,4 +21,4 @@ const Template: StoryFn<typeof FDivider> = (args) => ({
 });
 
 export const Default = Template.bind({});
-Default.args = { size: 8, color: "greyscale_6" };
+Default.args = { thickness: 8, color: "greyscale_6" };

packages/uikit/src/components/FDivider/FDivider.tsx

@@ -1,29 +1,12 @@
-import { computed, defineComponent } from "vue";
+import { defineComponent } from "vue";
 import { VDivider } from "vuetify/components";
-import { convertToUnit } from "vuetify/lib/util/helpers.mjs";
 
 export const FDivider = defineComponent({
   name: "FDivider",
 
-  props: {
-    color: {
-      type: String,
-      default: "greyscale_6",
-    },
-    size: {
-      type: [String, Number],
-      default: 1,
-    },
-  },
-
-  setup(props) {
-    const styles = computed(() => {
-      return {
-        borderWidth: `${convertToUnit(props.size)} 0 0 0`,
-        borderColor: `rgb(var(--v-theme-${props.color}))`,
-      };
-    });
+  setup() {
+    const preset = { color: "greyscale_6", thickness: 1 };
 
-    return () => <VDivider style={styles.value} />;
+    return () => <VDivider {...preset} />;
   },
 });

packages/uikit/src/components/FSwitch/FSwitch.scss

@@ -0,0 +1,24 @@
+.f-switch.v-switch {
+  &.f-switch--outlined {
+    .v-selection-control--dirty {
+      .v-switch__track {
+        background: rgb(var(--v-theme-greyscale_1));
+        border: none;
+      }
+
+      .v-switch__thumb {
+        color: rgb(var(--v-theme-greyscale_7)) !important;
+      }
+    }
+
+    .v-switch__thumb {
+      color: rgb(var(--v-theme-greyscale_1));
+    }
+
+    .v-switch__track {
+      background: transparent;
+      border: 2px solid currentColor;
+      opacity: 1;
+    }
+  }
+}

packages/uikit/src/components/FSwitch/FSwitch.stories.ts

@@ -1,3 +1,4 @@
+import { ref } from "vue";
 import { FSwitch } from "./FSwitch";
 import { Meta, StoryFn } from "@storybook/vue3";
 
@@ -9,10 +10,17 @@ export default {
 const Template: StoryFn<typeof FSwitch> = (args) => ({
   components: { FSwitch },
   setup() {
-    return { args };
+    const switch1 = ref(false);
+
+    return { args, switch1 };
   },
-  template: `<FSwitch />`,
+  template: `
+    <div>
+      <FSwitch v-model="switch1" v-bind="args" />
+      {{switch1}}
+    </div>
+  `,
 });
 
 export const Default = Template.bind({});
-Default.bind({});
+Default.args = { outlined: true };

packages/uikit/src/components/FSwitch/FSwitch.tsx

@@ -1,12 +1,24 @@
-import { defineComponent } from "vue";
+import { defineComponent, computed } from "vue";
 import { VSwitch } from "vuetify/components";
 
 import "./FSwitch.scss";
 
 export const FSwitch = defineComponent({
   name: "FSwitch",
 
-  setup() {
-    return () => <VSwitch class="f-switch" />;
+  props: {
+    outlined: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  setup(props) {
+    const preset = { inset: true, ripple: false, hideDetails: true };
+    const classes = computed(() => {
+      return ["f-switch", { "f-switch--outlined": props.outlined }];
+    });
+
+    return () => <VSwitch {...preset} class={classes.value} />;
   },
 });

packages/uikit/src/components/FSwitch/index.ts

@@ -0,0 +1 @@
+export { FSwitch } from "./FSwitch";

packages/uikit/src/components/FTabs/FTabs.scss

@@ -0,0 +1,26 @@
+.f-tabs.v-tabs {
+  &.f-tabs--narrow {
+    .v-slide-group__content {
+      gap: 16px;
+
+      .v-tab {
+        padding: 0;
+        min-width: auto;
+      }
+    }
+  }
+
+  .v-tab {
+    font-weight: 500;
+    font-size: 1rem;
+    line-height: 1.1875rem;
+
+    .v-btn__overlay {
+      display: none;
+    }
+  }
+
+  .v-tab__slider {
+    border-radius: 2px;
+  }
+}

packages/uikit/src/components/FTabs/FTabs.stories.ts

@@ -0,0 +1,28 @@
+import { FTabs } from "./FTabs";
+import { VTab } from "vuetify/components";
+import { Meta, StoryFn } from "@storybook/vue3";
+
+export default {
+  name: "FTabs",
+  component: FTabs,
+} as Meta<typeof FTabs>;
+
+const Template: StoryFn<typeof FTabs> = (args) => ({
+  components: { FTabs, VTab },
+  setup() {
+    return { args };
+  },
+  template: `
+    <FTabs v-bind="args">
+      <VTab>
+        <span>Supply</span>
+      </VTab>
+      <VTab>
+        <span>Borrow</span>
+      </VTab>
+    </FTabs>
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = { grow: false, narrow: false };

packages/uikit/src/components/FTabs/FTabs.tsx

@@ -0,0 +1,28 @@
+import { computed, defineComponent } from "vue";
+import { VTabs } from "vuetify/components";
+import { provideDefaults } from "vuetify/lib/composables/defaults.mjs";
+
+import "./FTabs.scss";
+
+export const FTabs = defineComponent({
+  name: "FTabs",
+
+  props: {
+    narrow: Boolean,
+  },
+
+  setup(props, { slots }) {
+    provideDefaults({
+      VTab: {
+        ripple: false,
+      },
+    });
+
+    const presets = { height: 52 };
+    const classes = computed(() => {
+      return ["f-tabs", { "f-tabs--narrow": props.narrow }];
+    });
+
+    return () => <VTabs {...presets} class={classes.value} v-slots={slots} />;
+  },
+});

packages/uikit/src/components/FTabs/index.ts

@@ -0,0 +1 @@
+export { FTabs } from "./FTabs";

packages/uikit/src/components/FToast/FToast.scss

@@ -0,0 +1,47 @@
+.v-snackbar.f-toast {
+  --v-theme-surface-variant: var(--v-theme-greyscale_7);
+  --v-theme-on-surface-variant: var(--v-theme-greyscale_1);
+
+  .v-snackbar__content {
+    font-weight: 500;
+    font-size: 0.875rem;
+    line-height: 1.0625rem;
+    padding: 16px;
+  }
+
+  .v-snackbar__actions {
+    font-weight: 500;
+    font-size: 0.875rem;
+    align-self: stretch;
+    display: flex;
+    align-items: stretch;
+  }
+
+  .f-toast__action {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+  }
+}
+
+.v-theme--dark.f-toast {
+  &.f-toast--success {
+    --v-theme-surface-variant: var(--v-theme-success_bg);
+  }
+
+  &.f-toast--error {
+    --v-theme-surface-variant: var(--v-theme-error_bg);
+  }
+
+  &.f-toast--warning {
+    --v-theme-surface-variant: var(--v-theme-warning_bg);
+  }
+}
+
+
+.v-theme--light.f-toast  {
+  .v-snackbar__wrapper {
+    box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.1); 
+  }
+}

packages/uikit/src/components/FToast/FToast.stories.ts

@@ -0,0 +1,51 @@
+import { ref } from "vue";
+import { FToast } from "./FToast";
+import { FButton } from "../FButton";
+import { Meta, StoryFn } from "@storybook/vue3";
+import { useToast } from "../../plugins/toast";
+
+export default {
+  name: "FToast",
+  component: FToast,
+} as Meta<typeof FToast>;
+
+const Template: StoryFn<typeof FToast> = (args) => ({
+  components: { FToast, FButton },
+  setup() {
+    const toast = ref(false);
+    const open = () => (toast.value = true);
+
+    return { args, toast, open };
+  },
+  template: `
+    <div>
+      <FButton color="primary" @click="open">Open</FButton>
+      <FToast v-model="toast" v-bind="args">This is a toast</FToast>
+    </div>
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = { type: "success", action: { text: "Detail" } };
+
+const Template2: StoryFn<typeof FToast> = (args) => ({
+  setup() {
+    const toast = useToast();
+    const show = () =>
+      toast.show({
+        message: "This is a toast",
+        type: ["success", "error", "warning"][
+          Math.floor(Math.random() * 3)
+        ] as any,
+        ...args,
+      });
+
+    return { show, args };
+  },
+  template: `
+    <FButton color="primary" @click="show">Show</FButton>
+  `,
+});
+
+export const Functional = Template2.bind({});
+Functional.args = {};