@pisell/materials 6.11.17 → 6.11.19

package/lowcode/pisell-time-navigator/meta.ts

@@ -0,0 +1,298 @@
+import snippets from './snippets';
+
+const PisellTimeNavigatorMeta = {
+  componentName: 'PisellTimeNavigator',
+  title: '时间导航轴',
+  category: '数据录入',
+  docUrl: '',
+  screenshot: '',
+  devMode: 'proCode',
+  npm: {
+    package: '@pisell/materials',
+    version: '1.0.1',
+    exportName: 'PisellTimeNavigator',
+    main: 'src/index.tsx',
+    destructuring: true,
+    subName: '',
+  },
+  configure: {
+    props: [
+      {
+        title: { label: '数据与状态', tip: '当前时间、受控/非受控、实时模式' },
+        display: 'block',
+        type: 'group',
+        items: [
+          {
+            name: 'value',
+            title: {
+              label: '当前时间',
+              tip: '受控时的选中时间，支持 HH:mm 或 dayjs 可解析字符串',
+            },
+            propType: 'string',
+            setter: ['StringSetter', 'VariableSetter'],
+          },
+          {
+            name: 'defaultValue',
+            title: { label: '默认时间', tip: '非受控时的初始选中时间' },
+            propType: 'string',
+            setter: ['StringSetter', 'VariableSetter'],
+          },
+          {
+            name: 'referenceDate',
+            title: {
+              label: '锚定日历日',
+              tip: '刻度相对于该日 0 点；可传可解析日期字符串，不传默认当天',
+            },
+            propType: 'string',
+            setter: ['StringSetter', 'VariableSetter'],
+          },
+          {
+            name: 'realtime',
+            title: { label: '实时模式', tip: 'value 自动跟随系统当前时间更新' },
+            propType: 'bool',
+            setter: ['BoolSetter', 'VariableSetter'],
+            defaultValue: false,
+          },
+        ],
+      },
+      {
+        title: {
+          label: '时间范围与刻度',
+          tip: '单日范围、步长、营业时间、禁用区间',
+        },
+        display: 'block',
+        type: 'group',
+        items: [
+          {
+            name: 'range',
+            title: {
+              label: '时间范围',
+              tip: '单日内范围，如 { start: "00:00", end: "24:00" }，不传默认全天',
+            },
+            propType: 'object',
+            setter: 'JsonSetter',
+          },
+          {
+            name: 'stepMinutes',
+            title: { label: '吸附步长(分钟)', tip: '如 15、30、60' },
+            propType: 'number',
+            setter: ['NumberSetter', 'VariableSetter'],
+            defaultValue: 15,
+          },
+          {
+            name: 'majorStepMinutes',
+            title: { label: '大刻度间隔(分钟)', tip: '整点刻度间隔，默认 60' },
+            propType: 'number',
+            setter: ['NumberSetter', 'VariableSetter'],
+            defaultValue: 60,
+          },
+          {
+            name: 'businessHours',
+            title: {
+              label: '营业时间',
+              tip: '视觉高亮区间，如 { start: "10:00", end: "23:00" }',
+            },
+            propType: 'object',
+            setter: 'JsonSetter',
+          },
+          {
+            name: 'disabledRanges',
+            title: {
+              label: '禁用时间段',
+              tip: '禁止选中的区间数组，如 [{ start: "00:00", end: "08:00" }]',
+            },
+            propType: 'array',
+            setter: 'JsonSetter',
+          },
+        ],
+      },
+      {
+        title: { label: '模式与方向', tip: '指示器/轴移动模式、横向/竖向' },
+        display: 'block',
+        type: 'group',
+        items: [
+          {
+            name: 'cursorMode',
+            title: {
+              label: '指示器模式',
+              tip: 'axis-moves=指示器固定视口中央刻度动，cursor-moves=刻度固定指示器动',
+            },
+            propType: {
+              type: 'oneOf',
+              value: ['axis-moves', 'cursor-moves'],
+            },
+            setter: [
+              {
+                componentName: 'RadioGroupSetter',
+                props: {
+                  options: [
+                    { title: '轴动(指示器固定)', value: 'axis-moves' },
+                    { title: '指针动', value: 'cursor-moves' },
+                  ],
+                },
+              },
+              'VariableSetter',
+            ],
+            defaultValue: 'axis-moves',
+          },
+          {
+            name: 'orientation',
+            title: { label: '方向', tip: '横向或竖向展示' },
+            propType: {
+              type: 'oneOf',
+              value: ['horizontal', 'vertical'],
+            },
+            setter: [
+              {
+                componentName: 'RadioGroupSetter',
+                props: {
+                  options: [
+                    { title: '横向', value: 'horizontal' },
+                    { title: '竖向', value: 'vertical' },
+                  ],
+                },
+              },
+              'VariableSetter',
+            ],
+            defaultValue: 'horizontal',
+          },
+        ],
+      },
+      {
+        title: { label: '交互开关', tip: 'Now 按钮、吸附、惯性滚动' },
+        display: 'block',
+        type: 'group',
+        items: [
+          {
+            name: 'showNowButton',
+            title: { label: '显示 Now 按钮', tip: '是否显示「现在」固定入口' },
+            propType: 'bool',
+            setter: ['BoolSetter', 'VariableSetter'],
+            defaultValue: true,
+          },
+          {
+            name: 'snapToStep',
+            title: { label: '吸附到刻度', tip: '是否吸附到 step 刻度' },
+            propType: 'bool',
+            setter: ['BoolSetter', 'VariableSetter'],
+            defaultValue: false,
+          },
+          {
+            name: 'inertia',
+            title: { label: '惯性滚动', tip: '拖动松手后减速滚动' },
+            propType: 'bool',
+            setter: ['BoolSetter', 'VariableSetter'],
+            defaultValue: false,
+          },
+        ],
+      },
+      {
+        title: { label: '样式', tip: '过去时间淡化、容器/刻度/气泡/Now 样式' },
+        display: 'block',
+        type: 'group',
+        items: [
+          {
+            name: 'pastTimeFade',
+            title: { label: '过去时间淡化色', tip: 'CSS 颜色值' },
+            propType: 'string',
+            setter: ['StringSetter', 'VariableSetter'],
+          },
+          {
+            name: 'containerStyle',
+            title: { label: '容器样式', tip: '容器样式覆盖' },
+            propType: 'object',
+            setter: 'JsonSetter',
+          },
+          {
+            name: 'scaleStyle',
+            title: { label: '刻度层样式', tip: '刻度层样式覆盖' },
+            propType: 'object',
+            setter: 'JsonSetter',
+          },
+          {
+            name: 'cursorStyle',
+            title: { label: '指示器样式', tip: '时间气泡/竖线样式覆盖' },
+            propType: 'object',
+            setter: 'JsonSetter',
+          },
+          {
+            name: 'nowButtonStyle',
+            title: { label: 'Now 按钮样式', tip: 'Now 按钮样式覆盖' },
+            propType: 'object',
+            setter: 'JsonSetter',
+          },
+          {
+            name: 'className',
+            title: { label: '样式类名', tip: '自定义类名' },
+            propType: 'string',
+            setter: ['StringSetter', 'VariableSetter'],
+          },
+          {
+            name: 'style',
+            title: { label: '根节点样式', tip: '根节点自定义样式' },
+            propType: 'object',
+            setter: 'JsonSetter',
+          },
+        ],
+      },
+      {
+        title: { label: '国际化与格式', tip: 'locale、时间气泡格式' },
+        display: 'block',
+        type: 'group',
+        items: [
+          {
+            name: 'locale',
+            title: { label: '语言', tip: 'dayjs locale，如 zh-cn、en' },
+            propType: 'string',
+            setter: [
+              {
+                componentName: 'SelectSetter',
+                props: {
+                  options: [
+                    { title: '中文', value: 'zh-cn' },
+                    { title: 'English', value: 'en' },
+                    { title: '繁中', value: 'zh-hk' },
+                  ],
+                },
+              },
+              'StringSetter',
+              'VariableSetter',
+            ],
+          },
+          {
+            name: 'timeFormat',
+            title: {
+              label: '时间格式',
+              tip: '气泡时间展示格式，dayjs format，默认 HH:mm',
+            },
+            propType: 'string',
+            setter: ['StringSetter', 'VariableSetter'],
+            defaultValue: 'HH:mm',
+          },
+          {
+            name: 'renderNowButton',
+            title: { label: '自定义 Now 按钮', tip: '覆盖默认 Now 按钮内容' },
+            propType: { type: 'oneOfType', value: ['node', 'function'] },
+            setter: 'SlotSetter',
+          },
+        ],
+      },
+    ],
+    supports: {
+      style: true,
+      events: [
+        {
+          name: 'onChange',
+          template:
+            "onChange(value,${extParams}){\n// 时间变更回调，value 为 dayjs 实例\nconsole.log('onChange', value);}",
+        },
+      ],
+    },
+    component: {},
+  },
+};
+
+export default {
+  ...PisellTimeNavigatorMeta,
+  snippets,
+};

package/lowcode/pisell-time-navigator/snippets.ts

@@ -0,0 +1 @@
+export default [];