@keyfunc/keybricks-ds 1.0.2 → 1.0.3

package/components/pipeline/PalettePanel.jsx

@@ -2,6 +2,7 @@ import React from "react";
 import { Icon } from "../icons/Icon.jsx";
 import { IconTile } from "../display/Badge.jsx";
 import { ViewToggle } from "../tabs/ViewToggle.jsx";
+import { PIPELINE_CATALOG } from "./pipeline-catalog.js";
 
 /** Palette grid tile — 40px tinted icon + 10px two-line label. */
 export function PaletteItem({ icon, hue, label, onClick, style }) {
@@ -27,14 +28,7 @@ export function PaletteListItem({ icon, hue, label, onClick, style }) {
   );
 }
 
-/** The full component set of the pipeline editor, verbatim from the file. */
-export const PIPELINE_CATALOG = [
-  { label: "Data Source", icon: "table", hue: "source", items: [{ label: "Detail Sheet", icon: "table" }, { label: "Model", icon: "layers" }, { label: "Dimension", icon: "grid-3x3" }] },
-  { label: "Data Join", icon: "text-search", hue: "join", items: [{ label: "Lookup Data", icon: "text-search" }, { label: "Association Match", icon: "shuffle" }] },
-  { label: "Data Transformation", icon: "sliders-horizontal", hue: "transform", items: [{ label: "Field Value Calculation", icon: "sliders-horizontal" }, { label: "Field Split", icon: "split" }, { label: "Row to Column", icon: "arrow-right-left" }, { label: "Column to Row", icon: "menu" }, { label: "Multi-Condition Judge", icon: "funnel" }, { label: "Regional Calculation", icon: "chart-no-axes-column" }, { label: "Advanced Transformation", icon: "trending-up" }, { label: "JS Enhanced Processing", icon: "code" }] },
-  { label: "Data Merge", icon: "database", hue: "merge", items: [{ label: "Group Calculation", icon: "database" }, { label: "Concat Merge", icon: "merge" }] },
-  { label: "Data Output", icon: "table", hue: "output", items: [{ label: "Detail Sheet", icon: "table" }, { label: "Model", icon: "layers" }, { label: "Dimension", icon: "grid-3x3" }] },
-];
+export { PIPELINE_CATALOG };
 
 /** 240px "Components" palette panel with list/grid toggle and collapsible hued categories. */
 export function PalettePanel({ catalog = PIPELINE_CATALOG, height = "100%", onPick, style }) {

package/components/pipeline/PalettePanel.vue

@@ -1,18 +1,11 @@
 <script setup>
 import { ref } from 'vue'
 import Icon from '../icons/Icon.vue'
-import { IconTile } from '../display/Badge.vue'
+import { PIPELINE_CATALOG } from './pipeline-catalog.js'
 import ViewToggle from '../tabs/ViewToggle.vue'
 import PaletteItem from './PaletteItem.vue'
 import PaletteListItem from './PaletteListItem.vue'
 
-export const PIPELINE_CATALOG = [
-  { label: 'Data Source', icon: 'table', hue: 'source', items: [{ label: 'Detail Sheet', icon: 'table' }, { label: 'Model', icon: 'layers' }, { label: 'Dimension', icon: 'grid-3x3' }] },
-  { label: 'Data Join', icon: 'text-search', hue: 'join', items: [{ label: 'Lookup Data', icon: 'text-search' }, { label: 'Association Match', icon: 'shuffle' }] },
-  { label: 'Data Transformation', icon: 'sliders-horizontal', hue: 'transform', items: [{ label: 'Field Value Calculation', icon: 'sliders-horizontal' }, { label: 'Field Split', icon: 'split' }, { label: 'Row to Column', icon: 'arrow-right-left' }, { label: 'Column to Row', icon: 'menu' }, { label: 'Multi-Condition Judge', icon: 'funnel' }, { label: 'Regional Calculation', icon: 'chart-no-axes-column' }, { label: 'Advanced Transformation', icon: 'trending-up' }, { label: 'JS Enhanced Processing', icon: 'code' }] },
-  { label: 'Data Merge', icon: 'database', hue: 'merge', items: [{ label: 'Group Calculation', icon: 'database' }, { label: 'Concat Merge', icon: 'merge' }] },
-  { label: 'Data Output', icon: 'table', hue: 'output', items: [{ label: 'Detail Sheet', icon: 'table' }, { label: 'Model', icon: 'layers' }, { label: 'Dimension', icon: 'grid-3x3' }] },
-]
 // 240px "Components" palette panel with list/grid toggle and collapsible hued categories.
 const props = defineProps({ catalog: { type: Array, default: () => PIPELINE_CATALOG }, height: { type: [String, Number], default: '100%' }, style: Object })
 const emit = defineEmits(['pick'])

package/components/pipeline/pipeline-catalog.js

@@ -0,0 +1,8 @@
+// The full component set of the pipeline editor, verbatim from the file. Shared by PalettePanel.vue; also re-exported by PalettePanel.jsx.
+export const PIPELINE_CATALOG = [
+  { label: 'Data Source', icon: 'table', hue: 'source', items: [{ label: 'Detail Sheet', icon: 'table' }, { label: 'Model', icon: 'layers' }, { label: 'Dimension', icon: 'grid-3x3' }] },
+  { label: 'Data Join', icon: 'text-search', hue: 'join', items: [{ label: 'Lookup Data', icon: 'text-search' }, { label: 'Association Match', icon: 'shuffle' }] },
+  { label: 'Data Transformation', icon: 'sliders-horizontal', hue: 'transform', items: [{ label: 'Field Value Calculation', icon: 'sliders-horizontal' }, { label: 'Field Split', icon: 'split' }, { label: 'Row to Column', icon: 'arrow-right-left' }, { label: 'Column to Row', icon: 'menu' }, { label: 'Multi-Condition Judge', icon: 'funnel' }, { label: 'Regional Calculation', icon: 'chart-no-axes-column' }, { label: 'Advanced Transformation', icon: 'trending-up' }, { label: 'JS Enhanced Processing', icon: 'code' }] },
+  { label: 'Data Merge', icon: 'database', hue: 'merge', items: [{ label: 'Group Calculation', icon: 'database' }, { label: 'Concat Merge', icon: 'merge' }] },
+  { label: 'Data Output', icon: 'table', hue: 'output', items: [{ label: 'Detail Sheet', icon: 'table' }, { label: 'Model', icon: 'layers' }, { label: 'Dimension', icon: 'grid-3x3' }] },
+]

package/components/tabs/PanelTabs.vue

@@ -0,0 +1,10 @@
+<script setup>
+defineProps({ tabs: { type: Array, default: () => [] }, active: String, style: Object })
+const emit = defineEmits(['change'])
+</script>
+<template>
+  <div :style="{ display: 'flex', borderBottom: '1px solid var(--border-subtle)', ...style }">
+    <button v-for="t in tabs" :key="t" type="button" @click="emit('change', t)"
+      :style="{ background: 'transparent', border: 'none', cursor: 'pointer', padding: '8px 12px', marginBottom: -1, borderBottom: t === active ? '2px solid var(--action-primary)' : '2px solid transparent', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-sm)', lineHeight: 'var(--leading-sm)', color: t === active ? 'var(--action-primary)' : 'var(--text-secondary)' }">{{ t }}</button>
+  </div>
+</template>

package/components/tabs/PillTabs.vue

@@ -0,0 +1,10 @@
+<script setup>
+defineProps({ tabs: { type: Array, default: () => [] }, active: String, style: Object })
+const emit = defineEmits(['change'])
+</script>
+<template>
+  <div :style="{ display: 'flex', gap: 8, ...style }">
+    <button v-for="t in tabs" :key="t" type="button" @click="emit('change', t)"
+      :style="{ background: t === active ? 'var(--bg-active)' : 'transparent', border: 'none', cursor: 'pointer', height: 28, padding: '0 11px', borderRadius: 'var(--radius-md)', fontFamily: 'var(--font-sans)', fontWeight: 'var(--weight-medium)', fontSize: 'var(--text-sm)', lineHeight: 'var(--leading-sm)', color: t === active ? 'var(--text-heading)' : 'var(--text-secondary)' }">{{ t }}</button>
+  </div>
+</template>

package/components/tabs/Tabs.vue

@@ -9,31 +9,3 @@ const emit = defineEmits(['change'])
       :style="{ background: 'transparent', border: 'none', cursor: 'pointer', padding: '9px 16px', marginBottom: -1, borderBottom: t === active ? '2px solid var(--action-primary)' : '2px solid transparent', fontFamily: 'var(--font-sans)', fontWeight: 'var(--weight-medium)', fontSize: 'var(--text-base)', lineHeight: 'var(--leading-base)', letterSpacing: 'var(--tracking-base)', color: t === active ? 'var(--action-primary)' : 'var(--text-body)' }">{{ t }}</button>
   </div>
 </template>
-
-<!-- PanelTabs — compact panel tabs (Node Info · Calc Rules · Output Fields · SQL Preview), 12px. -->
-<!--
-<script setup name="PanelTabs">
-defineProps({ tabs: { type: Array, default: () => [] }, active: String, style: Object })
-const emit = defineEmits(['change'])
-</script>
-<template>
-  <div :style="{ display: 'flex', borderBottom: '1px solid var(--border-subtle)', ...style }">
-    <button v-for="t in tabs" :key="t" type="button" @click="emit('change', t)"
-      :style="{ background: 'transparent', border: 'none', cursor: 'pointer', padding: '8px 12px', marginBottom: -1, borderBottom: t === active ? '2px solid var(--action-primary)' : '2px solid transparent', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-sm)', lineHeight: 'var(--leading-sm)', color: t === active ? 'var(--action-primary)' : 'var(--text-secondary)' }">{{ t }}</button>
-  </div>
-</template>
--->
-
-<!-- PillTabs — text pill filter tabs (For Review · To be Submitted · For Approval). Active = filled pill. -->
-<!--
-<script setup name="PillTabs">
-defineProps({ tabs: { type: Array, default: () => [] }, active: String, style: Object })
-const emit = defineEmits(['change'])
-</script>
-<template>
-  <div :style="{ display: 'flex', gap: 8, ...style }">
-    <button v-for="t in tabs" :key="t" type="button" @click="emit('change', t)"
-      :style="{ background: t === active ? 'var(--bg-active)' : 'transparent', border: 'none', cursor: 'pointer', height: 28, padding: '0 11px', borderRadius: 'var(--radius-md)', fontFamily: 'var(--font-sans)', fontWeight: 'var(--weight-medium)', fontSize: 'var(--text-sm)', lineHeight: 'var(--leading-sm)', color: t === active ? 'var(--text-heading)' : 'var(--text-secondary)' }">{{ t }}</button>
-  </div>
-</template>
--->

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keyfunc/keybricks-ds",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Keybricks design system — 334 design tokens and 118 UI components in React and Vue 3, source-only.",
   "license": "UNLICENSED",
   "type": "module",

package/readme.md

@@ -148,3 +148,4 @@ These extend the original inventory — each is a standard need this product cle
 - `ZoomControls` — 管道画布的缩放控件；源文件隐含平移/缩放交互，但未给出对应控件。
 - `StatCard`/`Donut`/`ProgressBar`/`AreaChart`/`MiniBars` 内置的图表小工具，免去引入图表库。
 - Token 补充：`tokens/motion.css`、层级（z-index）体系。
+cicd test

package/tokens/tokens.json

@@ -1,6 +1,6 @@
 {
   "name": "@keyfunc/keybricks-ds",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "source": "tokens/*.css",
   "note": "Generated by _scripts/build-tokens.mjs — CSS is the source of truth.",
   "tokens": {