feat: add grid

packages/css/src/index.ts

@@ -8,15 +8,16 @@ import "./Chip/index.css";
 import "./Circle/index.css";
 import "./Drawer/index.css";
 import "./FloatBox/index.css";
-import "./RectGizmo/index.css";
-import "./RectGizmo/horizontal-cursor.css";
+import "./Grid/index.css";
 import "./IconButton/index.css";
 import "./ListItem/index.css";
 import "./Loading/index.css";
 import "./MenuBarButton/index.css";
 import "./MenuList/index.css";
 import "./Modal/index.css";
 import "./Radio/index.css";
+import "./RectGizmo/horizontal-cursor.css";
+import "./RectGizmo/index.css";
 import "./Select/index.css";
 import "./Skelton/index.css";
 import "./SVPicker/index.css";

packages/react/src/components/Grid/index.tsx

@@ -2,8 +2,6 @@ import { useLayoutEffect, useRef } from "react";
 
 import { classNames } from "../../utils/classNames";
 
-import "./index.css";
-
 export type GridProps = {
   offsetX?: number;
   offsetY?: number;

packages/vue/src/components/CFloatBox/CFloatBox.stories.ts

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import CFloatBox from "./CFloatBox.vue";
+
+const meta = {
+  title: "parts/CFloatBox",
+  component: CFloatBox,
+} satisfies Meta<typeof CFloatBox>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    default: "Hello, World!",
+  },
+};

packages/vue/src/components/CGrid/CGrid.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    offsetX?: number;
+    offsetY?: number;
+    sizeX?: number;
+    sizeY?: number;
+    color?: string;
+  }>(),
+  {
+    offsetX: 0,
+    offsetY: 0,
+    sizeX: 50,
+    sizeY: 50,
+    color: undefined,
+  },
+);
+</script>
+
+<template>
+  <div
+    class="cmpui_grid__root"
+    :style="{
+      '--cmpui-offset-x': `${offsetX}px`,
+      '--cmpui-offset-y': `${offsetY}px`,
+      '--cmpui-size-x': `${sizeX}px`,
+      '--cmpui-size-y': `${sizeY}px`,
+      '--cmpui-color': color,
+    }"
+  />
+</template>

packages/vue/src/components/CGrid/CIconButton.stories.ts

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import CGrid from "./CGrid.vue";
+
+const meta = {
+  title: "parts/CGrid",
+  component: CGrid,
+  args: {
+    offsetX: 0,
+    offsetY: 0,
+    sizeX: 50,
+    sizeY: 50,
+  },
+} satisfies Meta<typeof CGrid>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithColor: Story = {
+  args: {
+    color: "red",
+  },
+};
+
+export const Size: Story = {
+  args: {
+    sizeX: 100,
+    sizeY: 25,
+  },
+};
+
+export const Offset: Story = {
+  args: {
+    offsetX: 10,
+    offsetY: 25,
+  },
+};

packages/vue/src/index.ts

@@ -4,6 +4,8 @@ import CCheckbox from "./components/CCheckbox/CCheckbox.vue";
 import CCheckboxInput from "./components/CCheckbox/CCheckboxInput.vue";
 import CChip from "./components/CChip/CChip.vue";
 import CDrawer from "./components/CDrawer/CDrawer.vue";
+import CCircle from "./components/CCircle/CCircle.vue";
+import CFloatBox from "./components/CFloatBox/CFloatBox.vue";
 import CIconButton from "./components/CIconButton/CIconButton.vue";
 import CListItem from "./components/CListItem/CListItem.vue";
 import CLoading from "./components/CLoading/CLoading.vue";
@@ -24,6 +26,8 @@ import CTreeViewItem from "./components/CTreeView/CTreeViewItem.vue";
 export {
   CButton,
   CCanvasView,
+  CCircle,
+  CFloatBox,
   CCheckbox,
   CCheckboxInput,
   CChip,