feat: 🎸 update more components

.changeset/six-cooks-teach.md

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

packages/uikit/src/components/FSegmentControl/FSegmentControl.scss

@@ -0,0 +1,17 @@
+.f-segment-control.v-btn-group {
+  height: 36px;
+
+  &.f-segment-control--grow {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+  }
+
+  .f-button {
+    font-weight: 500;
+    font-size: 13px;
+    line-height: 16px;
+    background: transparent;
+    border-radius: 8px;
+    transition: none;
+  }
+}

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

@@ -0,0 +1,31 @@
+import { ref } from "vue";
+import { FSegmentControl } from "./FSegmentControl";
+import { FButton } from "../FButton";
+import { StoryFn, Meta } from "@storybook/vue3";
+
+export default {
+  name: "FSegmentControl",
+  component: FSegmentControl,
+} as Meta<typeof FSegmentControl>;
+
+const Template: StoryFn<typeof FSegmentControl> = (args) => ({
+  components: { FSegmentControl, FButton },
+  setup() {
+    const items = [
+      { value: "week", text: "Week" },
+      { value: "month", text: "Month" },
+      { value: "year", text: "Year" },
+    ];
+    const current = ref("month");
+
+    return { args, items, current };
+  },
+  template: `
+    <FSegmentControl v-model="current" :items="items" v-bind="args">
+    </FSegmentControl>
+    <div>{{current}}</div>
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = { grow: false };

packages/uikit/src/components/FSegmentControl/FSegmentControl.tsx

@@ -0,0 +1,45 @@
+import { computed, defineComponent, PropType, unref } from "vue";
+import { VBtnToggle } from "vuetify/components";
+import { useColor } from "vuetify/lib/composables/color.mjs";
+import { FButton } from "../FButton";
+
+import "./FSegmentControl.scss";
+
+export const FSegmentControl = defineComponent({
+  name: "FSegmentControl",
+
+  props: {
+    grow: Boolean,
+    bgColor: {
+      type: String,
+      default: "greyscale_6",
+    },
+    items: {
+      type: Array as PropType<{ value: string; text: string }[]>,
+      default: () => [],
+    },
+  },
+
+  setup(props) {
+    const { colorClasses, colorStyles } = useColor(
+      computed(() => ({ background: unref(props.bgColor) }))
+    );
+    const presets = { color: "greyscale_1", mandatory: true };
+
+    return () => (
+      <VBtnToggle
+        class={[
+          "f-segment-control",
+          colorClasses.value,
+          { "f-segment-control--grow": props.grow },
+        ]}
+        style={[colorStyles.value]}
+        {...presets}
+      >
+        {props.items.map((item) => (
+          <FButton value={item.value}>{item.text}</FButton>
+        ))}
+      </VBtnToggle>
+    );
+  },
+});

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

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

packages/uikit/src/components/FSlider/FSlider.scss

@@ -0,0 +1,46 @@
+.f-slider {
+  &.v-slider.v-input--horizontal {
+    .v-slider-track {
+      height: var(--v-slider-track-size);
+    }
+
+    .v-slider-track__tick {
+      margin-top: calc(calc(var(--v-slider-track-size)) / 2);
+    }
+  }
+
+  &--hide-thumb {
+    .v-slider-thumb {
+      display: none;
+    }
+  }
+
+  .v-slider-track__tick {
+    border-radius: 0;
+    background-color: white;
+
+    .v-slider-track__tick-label {
+      font-weight: 500;
+      font-size: 12px;
+      line-height: 15px;
+      color: rgb(var(--v-theme-greyscale_4))
+    }
+  }
+
+  .v-slider-thumb__ripple {
+    display: none;
+  }
+
+  .v-slider-thumb__surface {
+    &::before {
+      display: none;
+    }
+
+    &::after {
+      width: 16px;
+      height: 16px;
+      background-color: rgb(var(--v-theme-greyscale_7));
+      border-radius: 50%;
+    }
+  }
+}

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

@@ -0,0 +1,29 @@
+import { FSlider } from "./FSlider";
+import { Meta, StoryFn } from "@storybook/vue3";
+
+export default {
+  name: "FSlider",
+  component: { FSlider },
+} as Meta<typeof FSlider>;
+
+const Template: StoryFn<typeof FSlider> = (args) => ({
+  components: {
+    FSlider,
+  },
+  setup() {
+    return { args };
+  },
+  template: `<FSlider v-bind="args" />`,
+});
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const Process = Template.bind({});
+Process.args = {
+  isProcess: true,
+  min: 0,
+  max: 3,
+  ticks: { 0: "0%", 1: "33.3%", 2: "66.6%", 3: "100%" },
+  modelValue: 1.5,
+};

packages/uikit/src/components/FSlider/FSlider.tsx

@@ -0,0 +1,38 @@
+import { computed, defineComponent } from "vue";
+import { VSlider } from "vuetify/components";
+
+import "./FSlider.scss";
+
+export const FSlider = defineComponent({
+  name: "FSlider",
+
+  props: {
+    isProcess: Boolean,
+  },
+
+  setup(props) {
+    const classes = computed(() => {
+      return { "f-slider--hide-thumb": props.isProcess };
+    });
+
+    const presets = !props.isProcess
+      ? {
+          trackSize: 8,
+          thumbSize: 24,
+          elevation: 0,
+          color: "greyscale_1",
+          trackColor: "greyscale_5",
+        }
+      : {
+          trackSize: 4,
+          tickSize: 4,
+          color: "success",
+          trackColor: "greyscale_6",
+          rounded: 0,
+          showTicks: "always" as const,
+          readonly: true,
+        };
+
+    return () => <VSlider class={["f-slider", classes.value]} {...presets} />;
+  },
+});

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

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

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

@@ -0,0 +1,18 @@
+import { FSwitch } from "./FSwitch";
+import { Meta, StoryFn } from "@storybook/vue3";
+
+export default {
+  name: "FSwitch",
+  component: FSwitch,
+} as Meta<typeof FSwitch>;
+
+const Template: StoryFn<typeof FSwitch> = (args) => ({
+  components: { FSwitch },
+  setup() {
+    return { args };
+  },
+  template: `<FSwitch />`,
+});
+
+export const Default = Template.bind({});
+Default.bind({});

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

@@ -0,0 +1,12 @@
+import { defineComponent } from "vue";
+import { VSwitch } from "vuetify/components";
+
+import "./FSwitch.scss";
+
+export const FSwitch = defineComponent({
+  name: "FSwitch",
+
+  setup() {
+    return () => <VSwitch class="f-switch" />;
+  },
+});

packages/uikit/src/components/index.ts

@@ -17,3 +17,5 @@ export * from "./FModal";
 export * from "./FPhoneInput";
 export * from "./FQRCode";
 export * from "./FSearchInput";
+export * from "./FSegmentControl";
+export * from "./FSlider";