v-nuxt-ui 0.1.36 → 0.2.1

package/dist/runtime/components/flow/FlowToolbar.vue

@@ -1,16 +1,75 @@
 <script setup>
-import ButtonTheme from "#v/components/button/Theme.vue";
+import { ref } from "vue";
+import {
+  FLOW_COLORS,
+  FLOW_WIDTH_ITEMS,
+  FLOW_STROKE_TYPE_ITEMS,
+  FLOW_PATH_TYPE_ITEMS,
+  FLOW_ARROW_TYPE_ITEMS,
+  FLOW_BORDER_RADIUS_ITEMS,
+  FLOW_FONT_SIZE_ITEMS,
+  FLOW_HANDLE_SIZE_ITEMS,
+  FLOW_PATH_PREVIEW,
+  FLOW_ARROW_PREVIEW_START,
+  FLOW_ARROW_PREVIEW_END
+} from "#v/constants";
+import FlowToolbarItemWrapper from "./FlowToolbarItemWrapper.vue";
+import CircleColor from "#v/components/button/CircleColor.vue";
+const settingsOpen = ref(false);
 defineProps({
   onAddNode: { type: Function, required: false },
+  loading: { type: Boolean, required: false },
   edgeStrokeWidth: { type: Number, required: false },
-  edgeMarkerStart: { type: Boolean, required: false },
-  edgeMarkerEnd: { type: Boolean, required: false },
+  edgeStrokeType: { type: String, required: false },
+  edgePathType: { type: String, required: false },
+  edgeMarkerStart: { type: String, required: false },
+  edgeMarkerEnd: { type: String, required: false },
+  edgeAnimated: { type: Boolean, required: false },
+  edgeColor: { type: String, required: false },
+  edgeLabelColor: { type: String, required: false },
   nodeBorderWidth: { type: Number, required: false },
-  onEdgeStrokeWidthChange: { type: Function, required: false },
-  onToggleEdgeMarkerStart: { type: Function, required: false },
-  onToggleEdgeMarkerEnd: { type: Function, required: false },
-  onNodeBorderWidthChange: { type: Function, required: false }
+  nodeBorderRadius: { type: Number, required: false },
+  nodeBorderColor: { type: String, required: false },
+  nodeBgColor: { type: String, required: false },
+  nodeFontColor: { type: String, required: false },
+  nodeFontSize: { type: Number, required: false },
+  nodeHandleSize: { type: Number, required: false },
+  nodeHandleColor: { type: String, required: false },
+  colorMode: { type: String, required: false },
+  unifiedColor: { type: String, required: false },
+  isUnifiedMode: { type: Boolean, required: false },
+  onEdgeStrokeWidthChange: { type: Function, required: true },
+  onEdgeStrokeTypeChange: { type: Function, required: false },
+  onEdgePathTypeChange: { type: Function, required: false },
+  onEdgeMarkerStartChange: { type: Function, required: false },
+  onEdgeMarkerEndChange: { type: Function, required: false },
+  onToggleEdgeAnimated: { type: Function, required: false },
+  onEdgeColorChange: { type: Function, required: false },
+  onEdgeLabelColorChange: { type: Function, required: false },
+  onNodeBorderWidthChange: { type: Function, required: false },
+  onNodeBorderRadiusChange: { type: Function, required: false },
+  onNodeBorderColorChange: { type: Function, required: false },
+  onNodeBgColorChange: { type: Function, required: false },
+  onNodeFontColorChange: { type: Function, required: false },
+  onNodeFontSizeChange: { type: Function, required: false },
+  onNodeHandleSizeChange: { type: Function, required: false },
+  onNodeHandleColorChange: { type: Function, required: false },
+  onColorModeChange: { type: Function, required: false },
+  onUnifiedColorChange: { type: Function, required: false }
 });
+const tabItems = [
+  { label: "\u989C\u8272\u8BBE\u7F6E", value: "color", slot: "color" },
+  { label: "\u8282\u70B9\u8BBE\u7F6E", value: "node", slot: "node" },
+  { label: "\u8FDE\u63A5\u7EBF\u8BBE\u7F6E", value: "edge", slot: "edge" }
+];
+const colorModeTabItems = [
+  { label: "\u7EDF\u4E00", value: "unified" },
+  { label: "\u81EA\u5B9A\u4E49", value: "custom" }
+];
+const itemSize = "sm";
+function getStrokeDasharray(value) {
+  return FLOW_STROKE_TYPE_ITEMS.find((i) => i.value === value)?.dasharray || "none";
+}
 </script>
 
 <template>
@@ -21,93 +80,500 @@ defineProps({
       icon="i-lucide-circle-plus"
       size="sm"
       variant="subtle"
+      :disabled="loading"
+      :loading="loading"
       @click="onAddNode?.()"
     />
 
     <!-- 样式设置 -->
-    <UPopover :content="{ side: 'top' }" :ui="{ content: 'px-6 py-4 flex flex-col gap-4' }">
-      <UButton
-        label="设置"
-        icon="i-lucide-settings"
-        size="sm"
-        variant="subtle"
-      />
-      <template #content>
-        <fieldset>
-          <legend class="text-[11px] leading-none font-semibold mb-2">
-            连接线粗细
-          </legend>
-
-          <div class="grid grid-cols-5 gap-2 -mx-2">
-            <ButtonTheme
-              v-for="width in [1, 2, 3, 4, 5]"
-              :key="width"
-              :label="width.toString()"
-              :selected="edgeStrokeWidth === width"
-              class="justify-center min-w-10"
-              @click="onEdgeStrokeWidthChange?.(width)"
-            >
-              <template #leading>
-                <div class="flex flex-col gap-px">
-                  <div
-                    v-for="i in width"
-                    :key="i"
-                    class="w-4 h-0.5 bg-current rounded-full"
-                  />
-                </div>
-              </template>
-            </ButtonTheme>
-          </div>
-        </fieldset>
-
-        <fieldset>
-          <legend class="text-[11px] leading-none font-semibold mb-2">
-            连接线箭头
-          </legend>
-
-          <div class="grid grid-cols-2 gap-2 -mx-2">
-            <ButtonTheme
-              label="起点"
-              :icon="edgeMarkerStart ? 'i-lucide-arrow-left' : 'i-lucide-minus'"
-              :selected="edgeMarkerStart"
-              @click="onToggleEdgeMarkerStart?.()"
-            />
-            <ButtonTheme
-              label="终点"
-              :icon="edgeMarkerEnd ? 'i-lucide-arrow-right' : 'i-lucide-minus'"
-              :selected="edgeMarkerEnd"
-              @click="onToggleEdgeMarkerEnd?.()"
-            />
-          </div>
-        </fieldset>
-
-        <fieldset>
-          <legend class="text-[11px] leading-none font-semibold mb-2">
-            节点边框粗细
-          </legend>
-
-          <div class="grid grid-cols-5 gap-2 -mx-2">
-            <ButtonTheme
-              v-for="width in [1, 2, 3, 4, 5]"
-              :key="width"
-              :label="width.toString()"
-              :selected="nodeBorderWidth === width"
-              class="justify-center"
-              @click="onNodeBorderWidthChange?.(width)"
-            >
-              <template #leading>
-                <div class="flex flex-col gap-px">
-                  <div
-                    v-for="i in width"
-                    :key="i"
-                    class="w-4 h-0.5 bg-current rounded-full"
+    <UButton
+      icon="i-lucide-settings"
+      size="sm"
+      variant="subtle"
+      @click="settingsOpen = true"
+    />
+
+    <USlideover
+      v-model:open="settingsOpen"
+      title="样式设置"
+      side="right"
+      inset
+      :overlay="false"
+      :ui="{
+  content: 'w-fit'
+}"
+    >
+      <template #body>
+        <UTabs
+          :items="tabItems"
+          size="xs"
+          color="neutral"
+          default-value="node"
+          :unmount-on-hide="false"
+          :ui="{
+  content: 'pt-3'
+}"
+        >
+          <template #color>
+            <div class="flex flex-col gap-4">
+              <!-- 模式切换 -->
+              <FlowToolbarItemWrapper label="颜色模式">
+                <UTabs
+                  :model-value="colorMode"
+                  :items="colorModeTabItems"
+                  :content="false"
+                  size="xs"
+                  @update:model-value="(newColorMode) => onColorModeChange?.(newColorMode)"
+                />
+              </FlowToolbarItemWrapper>
+
+              <!-- 统一颜色选择 -->
+              <div :class="{ 'opacity-40 pointer-events-none': !isUnifiedMode }">
+                <FlowToolbarItemWrapper label="统一颜色">
+                  <div class="grid grid-cols-9 gap-2">
+                    <CircleColor
+                      v-for="opt in FLOW_COLORS"
+                      :key="opt.color"
+                      :chip="opt.chip"
+                      :shade="500"
+                      :selected="unifiedColor === opt.color"
+                      :title="opt.chip || 'default'"
+                      @click="onUnifiedColorChange?.(opt.color)"
+                    />
+                  </div>
+                </FlowToolbarItemWrapper>
+              </div>
+            </div>
+          </template>
+
+          <template #node>
+            <div class="flex flex-col gap-4">
+              <!-- 边框粗细 -->
+              <FlowToolbarItemWrapper label="边框粗细">
+                <USelect
+                  :model-value="nodeBorderWidth"
+                  :items="FLOW_WIDTH_ITEMS"
+                  :size="itemSize"
+                  trailing-icon=""
+                  @update:model-value="(v) => onNodeBorderWidthChange?.(v)"
+                >
+                  <template #item-leading="{ item }">
+                    <div
+                      class="w-4 bg-current rounded-full"
+                      :style="{
+  height: `${item.value}px`
+}"
+                    />
+                  </template>
+                  <template #leading="{ modelValue }">
+                    <div
+                      class="w-4 bg-current rounded-full"
+                      :style="{
+  height: `${modelValue}px`
+}"
+                    />
+                  </template>
+                </USelect>
+              </FlowToolbarItemWrapper>
+
+              <!-- 边框颜色 -->
+              <div :class="{ 'opacity-40 pointer-events-none': isUnifiedMode }">
+                <FlowToolbarItemWrapper label="边框颜色">
+                  <div class="grid grid-cols-9 gap-2">
+                    <CircleColor
+                      v-for="opt in FLOW_COLORS"
+                      :key="opt.color"
+                      :chip="opt.chip"
+                      :shade="500"
+                      :selected="nodeBorderColor === opt.color"
+                      :title="opt.chip || 'default'"
+                      @click="onNodeBorderColorChange?.(opt.color)"
+                    />
+                  </div>
+                </FlowToolbarItemWrapper>
+              </div>
+
+              <USeparator class="py-2" />
+
+              <!-- 背景色 -->
+              <div :class="{ 'opacity-40 pointer-events-none': isUnifiedMode }">
+                <FlowToolbarItemWrapper label="背景色">
+                  <div class="grid grid-cols-9 gap-2">
+                    <CircleColor
+                      v-for="opt in FLOW_COLORS"
+                      :key="opt.color"
+                      :chip="opt.chip"
+                      :shade="50"
+                      :selected="nodeBgColor === opt.color"
+                      :title="opt.chip || 'default'"
+                      @click="onNodeBgColorChange?.(opt.color)"
+                    />
+                  </div>
+                </FlowToolbarItemWrapper>
+              </div>
+
+              <USeparator class="py-2" />
+
+              <!-- 字号 -->
+              <FlowToolbarItemWrapper label="字号">
+                <USelect
+                  :model-value="nodeFontSize"
+                  :items="FLOW_FONT_SIZE_ITEMS"
+                  :size="itemSize"
+                  trailing-icon=""
+                  @update:model-value="(v) => onNodeFontSizeChange?.(v)"
+                >
+                  <template #item-leading="{ item }">
+                    <span :class="item.twClass">A</span>
+                  </template>
+                </USelect>
+              </FlowToolbarItemWrapper>
+
+              <!-- 字体颜色 -->
+              <div :class="{ 'opacity-40 pointer-events-none': isUnifiedMode }">
+                <FlowToolbarItemWrapper label="字体颜色">
+                  <div class="grid grid-cols-9 gap-2">
+                    <CircleColor
+                      v-for="opt in FLOW_COLORS"
+                      :key="opt.color"
+                      :chip="opt.chip"
+                      :shade="600"
+                      :selected="nodeFontColor === opt.color"
+                      :title="opt.chip || 'default'"
+                      @click="onNodeFontColorChange?.(opt.color)"
+                    />
+                  </div>
+                </FlowToolbarItemWrapper>
+              </div>
+
+              <USeparator class="py-2" />
+
+              <!-- 连接点大小 -->
+              <FlowToolbarItemWrapper label="连接点大小">
+                <USelect
+                  :model-value="nodeHandleSize"
+                  :items="FLOW_HANDLE_SIZE_ITEMS"
+                  :size="itemSize"
+                  trailing-icon=""
+                  class="min-h-7"
+                  @update:model-value="(v) => onNodeHandleSizeChange?.(v)"
+                >
+                  <template #default="{ modelValue }">
+                    <div
+                      v-if="modelValue"
+                      class="rounded-full bg-current"
+                      :style="{ width: `${modelValue}px`, height: `${modelValue}px` }"
+                    />
+                  </template>
+                  <template #item-leading="{ item }">
+                    <div
+                      class="rounded-full bg-current"
+                      :style="{ width: `${item.value}px`, height: `${item.value}px` }"
+                    />
+                  </template>
+                </USelect>
+              </FlowToolbarItemWrapper>
+
+              <!-- 连接点颜色 -->
+              <div :class="{ 'opacity-40 pointer-events-none': isUnifiedMode }">
+                <FlowToolbarItemWrapper label="连接点颜色">
+                  <div class="grid grid-cols-9 gap-2">
+                    <CircleColor
+                      v-for="opt in FLOW_COLORS"
+                      :key="opt.color"
+                      :chip="opt.chip"
+                      :shade="500"
+                      :selected="nodeHandleColor === opt.color"
+                      :title="opt.chip || 'default'"
+                      @click="onNodeHandleColorChange?.(opt.color)"
+                    />
+                  </div>
+                </FlowToolbarItemWrapper>
+              </div>
+
+              <USeparator class="py-2" />
+
+              <!-- 圆角 -->
+              <FlowToolbarItemWrapper label="圆角">
+                <USelect
+                  :model-value="nodeBorderRadius"
+                  :items="FLOW_BORDER_RADIUS_ITEMS"
+                  :size="itemSize"
+                  trailing-icon=""
+                  @update:model-value="(v) => onNodeBorderRadiusChange?.(v)"
+                >
+                  <template #leading="{ modelValue }">
+                    <div
+                      v-if="modelValue != null"
+                      class="w-4 h-3 border-[1.5px] border-current"
+                      :style="{ borderRadius: `${modelValue}px` }"
+                    />
+                  </template>
+                  <template #item-leading="{ item }">
+                    <div
+                      class="w-4 h-3 border-[1.5px] border-current"
+                      :style="{ borderRadius: `${item.value}px` }"
+                    />
+                  </template>
+                </USelect>
+              </FlowToolbarItemWrapper>
+            </div>
+          </template>
+
+          <template #edge>
+            <div class="flex flex-col gap-4">
+              <!-- 起点箭头 -->
+              <FlowToolbarItemWrapper label="起点箭头">
+                <USelect
+                  :model-value="edgeMarkerStart"
+                  :items="FLOW_ARROW_TYPE_ITEMS"
+                  :size="itemSize"
+                  trailing-icon=""
+                  @update:model-value="(v) => onEdgeMarkerStartChange?.(v)"
+                >
+                  <template #leading="{ modelValue }">
+                    <svg
+                      v-if="modelValue"
+                      width="20"
+                      height="10"
+                      class="shrink-0"
+                    >
+                      <component
+                        :is="el.tag"
+                        v-for="(el, idx) in FLOW_ARROW_PREVIEW_START[modelValue]"
+                        :key="idx"
+                        v-bind="el.attrs"
+                      />
+                    </svg>
+                  </template>
+                  <template #item-leading="{ item }">
+                    <svg width="20" height="10" class="shrink-0">
+                      <component
+                        :is="el.tag"
+                        v-for="(el, idx) in FLOW_ARROW_PREVIEW_START[item.value]"
+                        :key="idx"
+                        v-bind="el.attrs"
+                      />
+                    </svg>
+                  </template>
+                </USelect>
+              </FlowToolbarItemWrapper>
+
+              <!-- 终点箭头 -->
+              <FlowToolbarItemWrapper label="终点箭头">
+                <USelect
+                  :model-value="edgeMarkerEnd"
+                  :items="FLOW_ARROW_TYPE_ITEMS"
+                  :size="itemSize"
+                  trailing-icon=""
+                  @update:model-value="(v) => onEdgeMarkerEndChange?.(v)"
+                >
+                  <template #leading="{ modelValue }">
+                    <svg
+                      v-if="modelValue"
+                      width="20"
+                      height="10"
+                      class="shrink-0"
+                    >
+                      <component
+                        :is="el.tag"
+                        v-for="(el, idx) in FLOW_ARROW_PREVIEW_END[modelValue]"
+                        :key="idx"
+                        v-bind="el.attrs"
+                      />
+                    </svg>
+                  </template>
+                  <template #item-leading="{ item }">
+                    <svg width="20" height="10" class="shrink-0">
+                      <component
+                        :is="el.tag"
+                        v-for="(el, idx) in FLOW_ARROW_PREVIEW_END[item.value]"
+                        :key="idx"
+                        v-bind="el.attrs"
+                      />
+                    </svg>
+                  </template>
+                </USelect>
+              </FlowToolbarItemWrapper>
+
+              <USeparator class="py-2" />
+
+              <!-- 粗细 -->
+              <FlowToolbarItemWrapper label="粗细">
+                <USelect
+                  :model-value="edgeStrokeWidth"
+                  :items="FLOW_WIDTH_ITEMS"
+                  :size="itemSize"
+                  trailing-icon=""
+                  @update:model-value="(v) => onEdgeStrokeWidthChange?.(v)"
+                >
+                  <template #leading="{ modelValue }">
+                    <div
+                      class="w-4 bg-current rounded-full"
+                      :style="{
+  height: `${modelValue}px`
+}"
+                    />
+                  </template>
+                  <template #item-leading="{ item }">
+                    <div
+                      class="w-4 bg-current rounded-full"
+                      :style="{
+  height: `${item.value}px`
+}"
+                    />
+                  </template>
+                </USelect>
+              </FlowToolbarItemWrapper>
+
+              <!-- 线型 -->
+              <FlowToolbarItemWrapper label="线型">
+                <USelect
+                  :model-value="edgeStrokeType"
+                  :items="FLOW_STROKE_TYPE_ITEMS"
+                  :size="itemSize"
+                  trailing-icon=""
+                  @update:model-value="(v) => onEdgeStrokeTypeChange?.(v)"
+                >
+                  <template #leading="{ modelValue }">
+                    <svg
+                      v-if="modelValue"
+                      width="20"
+                      height="10"
+                      class="shrink-0"
+                    >
+                      <line
+                        x1="0"
+                        y1="5"
+                        x2="20"
+                        y2="5"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        :stroke-dasharray="getStrokeDasharray(modelValue)"
+                      />
+                    </svg>
+                  </template>
+                  <template #item-leading="{ item }">
+                    <svg width="20" height="10" class="shrink-0">
+                      <line
+                        x1="0"
+                        y1="5"
+                        x2="20"
+                        y2="5"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        :stroke-dasharray="item.dasharray || 'none'"
+                      />
+                    </svg>
+                  </template>
+                </USelect>
+              </FlowToolbarItemWrapper>
+
+              <!-- 路径 -->
+              <FlowToolbarItemWrapper label="路径">
+                <USelect
+                  :model-value="edgePathType"
+                  :items="FLOW_PATH_TYPE_ITEMS"
+                  :size="itemSize"
+                  trailing-icon=""
+                  @update:model-value="(v) => onEdgePathTypeChange?.(v)"
+                >
+                  <template #leading="{ modelValue }">
+                    <svg
+                      v-if="modelValue"
+                      width="20"
+                      height="14"
+                      class="shrink-0"
+                    >
+                      <template v-if="FLOW_PATH_PREVIEW[modelValue]?.shape === 'path'">
+                        <path
+                          :d="FLOW_PATH_PREVIEW[modelValue].d"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-width="2"
+                        />
+                      </template>
+                      <template v-else>
+                        <line
+                          v-bind="{ x1: FLOW_PATH_PREVIEW[modelValue].x1, y1: FLOW_PATH_PREVIEW[modelValue].y1, x2: FLOW_PATH_PREVIEW[modelValue].x2, y2: FLOW_PATH_PREVIEW[modelValue].y2 }"
+                          stroke="currentColor"
+                          stroke-width="2"
+                        />
+                      </template>
+                    </svg>
+                  </template>
+                  <template #item-leading="{ item }">
+                    <svg width="20" height="14" class="shrink-0">
+                      <template v-if="FLOW_PATH_PREVIEW[item.value]?.shape === 'path'">
+                        <path
+                          :d="FLOW_PATH_PREVIEW[item.value].d"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-width="2"
+                        />
+                      </template>
+                      <template v-else>
+                        <line
+                          v-bind="{ x1: FLOW_PATH_PREVIEW[item.value].x1, y1: FLOW_PATH_PREVIEW[item.value].y1, x2: FLOW_PATH_PREVIEW[item.value].x2, y2: FLOW_PATH_PREVIEW[item.value].y2 }"
+                          stroke="currentColor"
+                          stroke-width="2"
+                        />
+                      </template>
+                    </svg>
+                  </template>
+                </USelect>
+              </FlowToolbarItemWrapper>
+
+              <!-- 动画 -->
+              <FlowToolbarItemWrapper label="流动动画">
+                <div class="flex items-center h-7">
+                  <USwitch
+                    :model-value="edgeAnimated"
+                    size="lg"
+                    @update:model-value="onToggleEdgeAnimated?.()"
                   />
                 </div>
-              </template>
-            </ButtonTheme>
-          </div>
-        </fieldset>
+              </FlowToolbarItemWrapper>
+
+              <!-- 连接线颜色 -->
+              <div :class="{ 'opacity-40 pointer-events-none': isUnifiedMode }">
+                <FlowToolbarItemWrapper label="连接线颜色">
+                  <div class="grid grid-cols-9 gap-2">
+                    <CircleColor
+                      v-for="opt in FLOW_COLORS"
+                      :key="opt.color"
+                      :chip="opt.chip"
+                      :shade="500"
+                      :selected="edgeColor === opt.color"
+                      :title="opt.chip || 'default'"
+                      @click="onEdgeColorChange?.(opt.color)"
+                    />
+                  </div>
+                </FlowToolbarItemWrapper>
+              </div>
+
+              <USeparator class="py-2" />
+
+              <!-- 标签颜色 -->
+              <div :class="{ 'opacity-40 pointer-events-none': isUnifiedMode }">
+                <FlowToolbarItemWrapper label="标签颜色">
+                  <div class="grid grid-cols-9 gap-2">
+                    <CircleColor
+                      v-for="opt in FLOW_COLORS"
+                      :key="opt.color"
+                      :chip="opt.chip"
+                      :shade="600"
+                      :selected="edgeLabelColor === opt.color"
+                      :title="opt.chip || 'default'"
+                      @click="onEdgeLabelColorChange?.(opt.color)"
+                    />
+                  </div>
+                </FlowToolbarItemWrapper>
+              </div>
+            </div>
+          </template>
+        </UTabs>
       </template>
-    </UPopover>
+    </USlideover>
   </div>
 </template>