neko-ui 2.7.0 → 2.7.2

package/lib/capture-screen/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/capture-screen/index.tsx"],"sourcesContent":["import {\n  Show,\n  createComponent,\n  createEffect,\n  createMemo,\n  createSignal,\n  mergeProps,\n  onCleanup,\n  splitProps,\n  untrack,\n} from 'solid-js';\nimport { downloadBlob, isFunction } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { style } from './style';\nimport '../button';\nimport theme from '../theme';\nimport type { CustomElement } from '..';\n\ndeclare interface MediaRecorderDataAvailableEvent extends Event {\n  /** MediaRecorderDataAvailableEvent */\n  data: Any;\n}\n\nexport interface CaptureScreenProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** MediaStreamConstraints */\n  options?: MediaStreamConstraints;\n  /** 是否预览 */\n  preview?: boolean;\n  /** 预览时是否显示控制器 */\n  controls?: boolean;\n  /** 录制时配置项 */\n  recorder?: boolean;\n  /** 录制文件名称 */\n  filename?: string;\n  /** 捕获屏幕按钮文字 */\n  captureScreenText?: string;\n  /** 停止捕获按钮文字 */\n  stopCaptureText?: string;\n  /** 开始录制按钮文字 */\n  startRecorderText?: string;\n  /** 停止录制按钮文字 */\n  stopRecorderText?: string;\n  /** 暂停录制按钮文字 */\n  pausedRecorderText?: string;\n  /** 录制中按钮文字 */\n  recorderingText?: string;\n  /** 录制错误回调方法 */\n  onErrorRecorder?: (e: Event) => void;\n  /** 停止录制回调方法 */\n  onStopRecorder?: () => void;\n  /** 开始录制回调方法 */\n  onStartRecorder?: (state: MediaRecorder['state']) => void;\n  /** 记录媒体时触发 */\n  onRecorderDataAvailable?: (e: MediaRecorderDataAvailableEvent) => void;\n  /** 捕获屏幕错误回调方法 */\n  onErrorCapture?: (err: unknown) => void;\n  /** 停止捕获屏幕回调方法 */\n  onStopCapture?: () => void;\n  /** 开始捕获屏幕回调方法 */\n  onStartCapture?: (stream?: MediaStream) => void;\n  /** 自定义保存录制文件方法 */\n  onSaveRecorder?: (blob: Blob, fileName: string) => void;\n}\nexport type CaptureScreenElement = CustomElement<\n  CaptureScreenProps,\n  | 'onErrorRecorder'\n  | 'onStopRecorder'\n  | 'onStartRecorder'\n  | 'onRecorderDataAvailable'\n  | 'onErrorCapture'\n  | 'onStopCapture'\n  | 'onStartCapture'\n  | 'onSaveRecorder'\n>;\n\nconst displayMediaOptions: MediaStreamConstraints = {\n  video: true,\n  audio: {\n    echoCancellation: true,\n    noiseSuppression: true,\n    sampleRate: 44100,\n  },\n};\n\nconst btnStatusDic: Record<MediaRecorder['state'], 'primary' | 'warning' | 'success'> = {\n  inactive: 'primary',\n  paused: 'warning',\n  recording: 'success',\n};\n\nfunction CaptureScreen(_: CaptureScreenProps) {\n  const { baseStyle } = theme;\n  const _props = mergeProps(\n    {\n      options: displayMediaOptions,\n      captureScreenText: '捕获屏幕',\n      stopCaptureText: '停止捕获',\n      startRecorderText: '开始录制',\n      stopRecorderText: '停止录制',\n      pausedRecorderText: '暂停录制',\n      recorderingText: '录制中',\n      onErrorRecorder: null,\n    },\n    _,\n  );\n  const [local, props] = splitProps(_props, [\n    'options',\n    'preview',\n    'controls',\n    'recorder',\n    'filename',\n    'captureScreenText',\n    'stopCaptureText',\n    'startRecorderText',\n    'stopRecorderText',\n    'pausedRecorderText',\n    'recorderingText',\n    'onErrorRecorder',\n    'onStopRecorder',\n    'onStartRecorder',\n    'onStopCapture',\n    'onStartCapture',\n    'onRecorderDataAvailable',\n    'onErrorCapture',\n    'onSaveRecorder',\n    'class',\n    'css',\n  ]);\n  let videoElem: HTMLVideoElement | undefined;\n  const chunks: Blob[] = [];\n  const [mediaRecorder, setMediaRecorder] = createSignal<MediaRecorder | null>(null);\n  const [mediaStream, setMediaStream] = createSignal<MediaStream | null>(null);\n  const [recordState, setRecordState] = createSignal<MediaRecorder['state']>('inactive');\n\n  // 开始录制\n  function handleStartRecorder() {\n    const mr = untrack(mediaRecorder);\n\n    if (mr) {\n      if (isFunction(local.onStartRecorder)) {\n        local.onStartRecorder(mr.state);\n      }\n      switch (mr.state) {\n        case 'inactive': // 不活跃\n          mr.start();\n          break;\n        case 'paused': // 暂停\n          mr.resume();\n          break;\n        // case 'recording': // 录制中\n        default:\n          mr.pause();\n          break;\n      }\n      setRecordState(mr.state);\n    }\n  }\n  function handleRecorderDataAvailable(e: MediaRecorderDataAvailableEvent) {\n    chunks?.push(e.data as Blob);\n    local.onRecorderDataAvailable?.(e);\n  }\n  // 停止录制\n  function stopRecorder() {\n    const mr = untrack(mediaRecorder);\n\n    // 未录制时不需要停止\n    if (mr) {\n      if (mr.state !== 'inactive') {\n        mr.stop();\n      }\n      setRecordState(mr.state);\n    }\n    local.onStopRecorder?.();\n  }\n  function handleSaveRecorder() {\n    if (!chunks?.length) return;\n    // 将录制内容保存到本地\n    const blob: Blob = new Blob(chunks, {\n      type: 'video/webm',\n    });\n    const name = local.filename || new Date().toISOString();\n    const fileName = `${name}.webm`;\n\n    chunks?.splice(0);\n    if (local.onSaveRecorder) {\n      local.onSaveRecorder(blob, fileName);\n    }\n    // 保存文件\n    downloadBlob(blob, fileName);\n  }\n\n  // 停止捕获屏幕\n  function stopCapture() {\n    // 如果在录制则先停止\n    stopRecorder();\n    const ms = untrack(mediaStream);\n\n    if (ms) {\n      const tracks = ms.getTracks();\n\n      tracks?.forEach((track: MediaStreamTrack) => track.stop());\n      setMediaStream(null);\n    }\n    local.onStopCapture?.();\n  }\n\n  // 开始捕获屏幕\n  async function startCapture() {\n    stopCapture();\n    try {\n      const stream = await navigator.mediaDevices.getDisplayMedia({\n        ...displayMediaOptions,\n        ...local.options,\n      });\n\n      if (stream) {\n        // 监听停止捕获屏幕\n        stream.addEventListener('inactive', stopCapture, false);\n        setMediaStream(stream);\n      }\n      local.onStartCapture?.(stream);\n    } catch (err) {\n      local.onErrorCapture?.(err);\n    }\n  }\n\n  createEffect(() => {\n    const ms = mediaStream();\n\n    if (local.preview && videoElem && ms) {\n      videoElem.srcObject = ms;\n    }\n  });\n\n  createEffect(() => {\n    const ms = mediaStream();\n\n    if (ms?.active) {\n      const recorderInstance = new MediaRecorder(ms);\n\n      recorderInstance.onstop = handleSaveRecorder;\n      recorderInstance.onerror = local.onErrorRecorder;\n      // 每次timeslice记录毫秒级媒体时（或未记录整个媒体时，如果timeslice未指定）定期触发\n      recorderInstance.ondataavailable = handleRecorderDataAvailable;\n      setMediaRecorder(recorderInstance);\n    } else {\n      setMediaRecorder(null);\n    }\n  });\n\n  onCleanup(() => {\n    const mr = untrack(mediaRecorder);\n\n    // 未录制时不需要停止\n    if (mr && mr?.state !== 'inactive') {\n      mr.stop();\n    }\n    const ms = untrack(mediaStream);\n\n    if (ms) {\n      const tracks = ms.getTracks();\n\n      tracks.forEach((track: MediaStreamTrack) => track.stop());\n    }\n  });\n  const recorderText = createMemo(() => {\n    return {\n      paused: local.pausedRecorderText,\n      recording: local.recorderingText,\n      inactive: local.startRecorderText,\n    }[recordState()];\n  });\n\n  return (\n    <>\n      <style>\n        {baseStyle()}\n        {style}\n        {css(local.css)}\n      </style>\n      <div class={cx('capture-screen', local.class)} {...props}>\n        <div class=\"controller\">\n          <n-button onClick={startCapture} class=\"btn\">\n            {local.captureScreenText}\n          </n-button>\n          <Show when={mediaStream()}>\n            <>\n              <n-button danger={true} onClick={stopCapture} class=\"btn\">\n                {local.stopCaptureText}\n              </n-button>\n              <Show when={local.recorder}>\n                <div class=\"record\">\n                  <n-button\n                    type={btnStatusDic[recordState()]}\n                    onClick={handleStartRecorder}\n                    class=\"btn\"\n                  >\n                    <span>{recorderText()}</span>\n                  </n-button>\n                  <Show when={recordState() !== 'inactive'}>\n                    <n-button type=\"error\" onClick={stopRecorder} class=\"btn\">\n                      {local.stopRecorderText}\n                    </n-button>\n                  </Show>\n                </div>\n              </Show>\n            </>\n          </Show>\n        </div>\n        <Show when={local.preview && mediaStream()}>\n          <div class=\"view\">\n            <span\n              class={cx(\n                recordState() === 'recording' && 'recording',\n                recordState() === 'paused' && 'paused',\n              )}\n            />\n            <video ref={videoElem} autoplay controls={local.controls && mediaStream() !== null} />\n          </div>\n        </Show>\n      </div>\n    </>\n  );\n}\n\ncustomElement<CaptureScreenProps>(\n  'n-capture-screen',\n  {\n    class: void 0,\n    css: void 0,\n    options: void 0,\n    preview: void 0,\n    controls: void 0,\n    recorder: void 0,\n    filename: void 0,\n    captureScreenText: void 0,\n    stopCaptureText: void 0,\n    startRecorderText: void 0,\n    stopRecorderText: void 0,\n    pausedRecorderText: void 0,\n    recorderingText: void 0,\n    onErrorRecorder: void 0,\n    onStopRecorder: void 0,\n    onStartRecorder: void 0,\n    onRecorderDataAvailable: void 0,\n    onErrorCapture: void 0,\n    onStopCapture: void 0,\n    onStartCapture: void 0,\n    onSaveRecorder: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        onErrorRecorder(e: Event) {\n          el.dispatchEvent(\n            new CustomEvent('errorrecorder', {\n              detail: e,\n            }),\n          );\n        },\n        onStopRecorder() {\n          el.dispatchEvent(\n            new CustomEvent('stoprecorder', {\n              detail: void 0,\n            }),\n          );\n        },\n        onStartRecorder(state: MediaRecorder['state']) {\n          el.dispatchEvent(\n            new CustomEvent('startrecorder', {\n              detail: state,\n            }),\n          );\n        },\n        onRecorderDataAvailable(e: MediaRecorderDataAvailableEvent) {\n          el.dispatchEvent(\n            new CustomEvent('recorderdataavailable', {\n              detail: e,\n            }),\n          );\n        },\n        onErrorCapture(e: unknown) {\n          el.dispatchEvent(\n            new CustomEvent('errorcapture', {\n              detail: e,\n            }),\n          );\n        },\n        onStopCapture() {\n          el.dispatchEvent(\n            new CustomEvent('stopcapture', {\n              detail: void 0,\n            }),\n          );\n        },\n        onStartCapture(stream?: MediaStream) {\n          el.dispatchEvent(\n            new CustomEvent('startcapture', {\n              detail: stream,\n            }),\n          );\n        },\n        onSaveRecorder(blob: Blob, fileName: string) {\n          el.dispatchEvent(\n            new CustomEvent('saverecorder', {\n              detail: [blob, fileName],\n            }),\n          );\n        },\n      },\n      _,\n    );\n\n    return createComponent(CaptureScreen, props);\n  },\n);\n\nexport default CaptureScreen;\n"],"names":["displayMediaOptions","video","audio","echoCancellation","noiseSuppression","sampleRate","btnStatusDic","inactive","paused","recording","CaptureScreen","_","videoElem","baseStyle","theme","_props","mergeProps","options","captureScreenText","stopCaptureText","startRecorderText","stopRecorderText","pausedRecorderText","recorderingText","onErrorRecorder","local","props","splitProps","chunks","mediaRecorder","setMediaRecorder","createSignal","mediaStream","setMediaStream","recordState","setRecordState","handleStartRecorder","mr","untrack","isFunction","onStartRecorder","state","start","resume","pause","handleRecorderDataAvailable","e","push","data","onRecorderDataAvailable","stopRecorder","stop","onStopRecorder","handleSaveRecorder","length","blob","Blob","type","name","filename","Date","toISOString","fileName","splice","onSaveRecorder","downloadBlob","stopCapture","ms","tracks","getTracks","forEach","track","onStopCapture","startCapture","stream","navigator","mediaDevices","getDisplayMedia","addEventListener","onStartCapture","err","onErrorCapture","createEffect","preview","srcObject","active","recorderInstance","MediaRecorder","onstop","onerror","ondataavailable","onCleanup","recorderText","createMemo","style","css","cx","class","Show","recorder","controls","customElement","opt","el","element","dispatchEvent","CustomEvent","detail","createComponent"],"mappings":"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"}
+{"version":3,"sources":["../../components/capture-screen/index.tsx"],"sourcesContent":["import {\n  Show,\n  createComponent,\n  createEffect,\n  createMemo,\n  createSignal,\n  mergeProps,\n  onCleanup,\n  splitProps,\n  untrack,\n} from 'solid-js';\nimport { downloadBlob, isFunction } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { style } from './style';\nimport '../button';\nimport theme from '../theme';\nimport type { CustomElement } from '..';\n\ndeclare interface MediaRecorderDataAvailableEvent extends Event {\n  /** MediaRecorderDataAvailableEvent */\n  data: Any;\n}\n\nexport interface CaptureScreenProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** MediaStreamConstraints */\n  options?: MediaStreamConstraints;\n  /** 是否预览 */\n  preview?: boolean;\n  /** 预览时是否显示控制器 */\n  controls?: boolean;\n  /** 录制时配置项 */\n  recorder?: boolean;\n  /** 录制文件名称 */\n  filename?: string;\n  /** 捕获屏幕按钮文字 */\n  captureScreenText?: string;\n  /** 停止捕获按钮文字 */\n  stopCaptureText?: string;\n  /** 开始录制按钮文字 */\n  startRecorderText?: string;\n  /** 停止录制按钮文字 */\n  stopRecorderText?: string;\n  /** 暂停录制按钮文字 */\n  pausedRecorderText?: string;\n  /** 录制中按钮文字 */\n  recorderingText?: string;\n  /** 录制错误回调方法 */\n  onErrorRecorder?: (e: Event) => void;\n  /** 停止录制回调方法 */\n  onStopRecorder?: () => void;\n  /** 开始录制回调方法 */\n  onStartRecorder?: (state: MediaRecorder['state']) => void;\n  /** 记录媒体时触发 */\n  onRecorderDataAvailable?: (e: MediaRecorderDataAvailableEvent) => void;\n  /** 捕获屏幕错误回调方法 */\n  onErrorCapture?: (err: unknown) => void;\n  /** 停止捕获屏幕回调方法 */\n  onStopCapture?: () => void;\n  /** 开始捕获屏幕回调方法 */\n  onStartCapture?: (stream?: MediaStream) => void;\n  /** 自定义保存录制文件方法 */\n  onSaveRecorder?: (blob: Blob, fileName: string) => void;\n}\nexport type CaptureScreenElement = CustomElement<\n  CaptureScreenProps,\n  | 'onErrorRecorder'\n  | 'onStopRecorder'\n  | 'onStartRecorder'\n  | 'onRecorderDataAvailable'\n  | 'onErrorCapture'\n  | 'onStopCapture'\n  | 'onStartCapture'\n  | 'onSaveRecorder'\n>;\n\nconst displayMediaOptions: MediaStreamConstraints = {\n  video: true,\n  audio: {\n    echoCancellation: true,\n    noiseSuppression: true,\n    sampleRate: 44100,\n  },\n};\n\nconst btnStatusDic: Record<MediaRecorder['state'], 'primary' | 'warning' | 'success'> = {\n  inactive: 'primary',\n  paused: 'warning',\n  recording: 'success',\n};\n\nfunction CaptureScreen(_: CaptureScreenProps) {\n  const { baseStyle } = theme;\n  const _props = mergeProps(\n    {\n      options: displayMediaOptions,\n      captureScreenText: '捕获屏幕',\n      stopCaptureText: '停止捕获',\n      startRecorderText: '开始录制',\n      stopRecorderText: '停止录制',\n      pausedRecorderText: '暂停录制',\n      recorderingText: '录制中',\n      onErrorRecorder: null,\n    },\n    _,\n  );\n  const [local, props] = splitProps(_props, [\n    'options',\n    'preview',\n    'controls',\n    'recorder',\n    'filename',\n    'captureScreenText',\n    'stopCaptureText',\n    'startRecorderText',\n    'stopRecorderText',\n    'pausedRecorderText',\n    'recorderingText',\n    'onErrorRecorder',\n    'onStopRecorder',\n    'onStartRecorder',\n    'onStopCapture',\n    'onStartCapture',\n    'onRecorderDataAvailable',\n    'onErrorCapture',\n    'onSaveRecorder',\n    'class',\n    'css',\n  ]);\n  let videoElem: HTMLVideoElement | undefined;\n  const chunks: Blob[] = [];\n  const [mediaRecorder, setMediaRecorder] = createSignal<MediaRecorder | null>(null);\n  const [mediaStream, setMediaStream] = createSignal<MediaStream | null>(null);\n  const [recordState, setRecordState] = createSignal<MediaRecorder['state']>('inactive');\n\n  // 开始录制\n  function handleStartRecorder() {\n    const mr = untrack(mediaRecorder);\n\n    if (mr) {\n      if (isFunction(local.onStartRecorder)) {\n        local.onStartRecorder(mr.state);\n      }\n      switch (mr.state) {\n        case 'inactive': // 不活跃\n          mr.start();\n          break;\n        case 'paused': // 暂停\n          mr.resume();\n          break;\n        // case 'recording': // 录制中\n        default:\n          mr.pause();\n          break;\n      }\n      setRecordState(mr.state);\n    }\n  }\n  function handleRecorderDataAvailable(e: MediaRecorderDataAvailableEvent) {\n    chunks?.push(e.data as Blob);\n    local.onRecorderDataAvailable?.(e);\n  }\n  // 停止录制\n  function stopRecorder() {\n    const mr = untrack(mediaRecorder);\n\n    // 未录制时不需要停止\n    if (mr) {\n      if (mr.state !== 'inactive') {\n        mr.stop();\n      }\n      setRecordState(mr.state);\n    }\n    local.onStopRecorder?.();\n  }\n  function handleSaveRecorder() {\n    if (!chunks?.length) return;\n    // 将录制内容保存到本地\n    const blob: Blob = new Blob(chunks, {\n      type: 'video/webm',\n    });\n    const name = local.filename || new Date().toISOString();\n    const fileName = `${name}.webm`;\n\n    chunks?.splice(0);\n    if (local.onSaveRecorder) {\n      local.onSaveRecorder(blob, fileName);\n    }\n    // 保存文件\n    downloadBlob(blob, fileName);\n  }\n\n  // 停止捕获屏幕\n  function stopCapture() {\n    // 如果在录制则先停止\n    stopRecorder();\n    const ms = untrack(mediaStream);\n\n    if (ms) {\n      const tracks = ms.getTracks();\n\n      tracks?.forEach((track: MediaStreamTrack) => track.stop());\n      setMediaStream(null);\n    }\n    local.onStopCapture?.();\n  }\n\n  // 开始捕获屏幕\n  async function startCapture() {\n    stopCapture();\n    try {\n      const stream = await navigator.mediaDevices.getDisplayMedia({\n        ...displayMediaOptions,\n        ...local.options,\n      });\n\n      if (stream) {\n        // 监听停止捕获屏幕\n        stream.addEventListener('inactive', stopCapture, false);\n        setMediaStream(stream);\n      }\n      local.onStartCapture?.(stream);\n    } catch (err) {\n      local.onErrorCapture?.(err);\n    }\n  }\n\n  createEffect(() => {\n    const ms = mediaStream();\n\n    if (local.preview && videoElem && ms) {\n      videoElem.srcObject = ms;\n    }\n  });\n\n  createEffect(() => {\n    const ms = mediaStream();\n\n    if (ms?.active) {\n      const recorderInstance = new MediaRecorder(ms);\n\n      recorderInstance.onstop = handleSaveRecorder;\n      recorderInstance.onerror = local.onErrorRecorder;\n      // 每次timeslice记录毫秒级媒体时（或未记录整个媒体时，如果timeslice未指定）定期触发\n      recorderInstance.ondataavailable = handleRecorderDataAvailable;\n      setMediaRecorder(recorderInstance);\n    } else {\n      setMediaRecorder(null);\n    }\n  });\n\n  onCleanup(() => {\n    const mr = untrack(mediaRecorder);\n\n    // 未录制时不需要停止\n    if (mr && mr?.state !== 'inactive') {\n      mr.stop();\n    }\n    const ms = untrack(mediaStream);\n\n    if (ms) {\n      const tracks = ms.getTracks();\n\n      tracks.forEach((track: MediaStreamTrack) => track.stop());\n    }\n  });\n  const recorderText = createMemo(() => {\n    return {\n      paused: local.pausedRecorderText,\n      recording: local.recorderingText,\n      inactive: local.startRecorderText,\n    }[recordState()];\n  });\n\n  return (\n    <>\n      <style>\n        {baseStyle()}\n        {style}\n        {css(local.css)}\n      </style>\n      <div class={cx('capture-screen', local.class)} {...props}>\n        <div class=\"controller\">\n          <n-button onClick={startCapture} class=\"btn\">\n            {local.captureScreenText}\n          </n-button>\n          <Show when={mediaStream()}>\n            <>\n              <n-button danger={true} onClick={stopCapture} class=\"btn\">\n                {local.stopCaptureText}\n              </n-button>\n              <Show when={local.recorder}>\n                <div class=\"record\">\n                  <n-button\n                    type={btnStatusDic[recordState()]}\n                    onClick={handleStartRecorder}\n                    class=\"btn\"\n                  >\n                    <span>{recorderText()}</span>\n                  </n-button>\n                  <Show when={recordState() !== 'inactive'}>\n                    <n-button type=\"error\" onClick={stopRecorder} class=\"btn\">\n                      {local.stopRecorderText}\n                    </n-button>\n                  </Show>\n                </div>\n              </Show>\n            </>\n          </Show>\n        </div>\n        <Show when={local.preview && mediaStream()}>\n          <div class=\"view\">\n            <span\n              class={cx(\n                recordState() === 'recording' && 'recording',\n                recordState() === 'paused' && 'paused',\n              )}\n            />\n            <video ref={videoElem} autoplay controls={local.controls && mediaStream() !== null} />\n          </div>\n        </Show>\n      </div>\n    </>\n  );\n}\n\ncustomElement<CaptureScreenProps>(\n  'n-capture-screen',\n  {\n    class: void 0,\n    css: void 0,\n    options: void 0,\n    preview: void 0,\n    controls: void 0,\n    recorder: void 0,\n    filename: void 0,\n    captureScreenText: void 0,\n    stopCaptureText: void 0,\n    startRecorderText: void 0,\n    stopRecorderText: void 0,\n    pausedRecorderText: void 0,\n    recorderingText: void 0,\n    onErrorRecorder: void 0,\n    onStopRecorder: void 0,\n    onStartRecorder: void 0,\n    onRecorderDataAvailable: void 0,\n    onErrorCapture: void 0,\n    onStopCapture: void 0,\n    onStartCapture: void 0,\n    onSaveRecorder: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        onErrorRecorder(e: Event) {\n          el.dispatchEvent(\n            new CustomEvent('errorrecorder', {\n              detail: e,\n            }),\n          );\n        },\n        onStopRecorder() {\n          el.dispatchEvent(\n            new CustomEvent('stoprecorder', {\n              detail: void 0,\n            }),\n          );\n        },\n        onStartRecorder(state: MediaRecorder['state']) {\n          el.dispatchEvent(\n            new CustomEvent('startrecorder', {\n              detail: state,\n            }),\n          );\n        },\n        onRecorderDataAvailable(e: MediaRecorderDataAvailableEvent) {\n          el.dispatchEvent(\n            new CustomEvent('recorderdataavailable', {\n              detail: e,\n            }),\n          );\n        },\n        onErrorCapture(e: unknown) {\n          el.dispatchEvent(\n            new CustomEvent('errorcapture', {\n              detail: e,\n            }),\n          );\n        },\n        onStopCapture() {\n          el.dispatchEvent(\n            new CustomEvent('stopcapture', {\n              detail: void 0,\n            }),\n          );\n        },\n        onStartCapture(stream?: MediaStream) {\n          el.dispatchEvent(\n            new CustomEvent('startcapture', {\n              detail: stream,\n            }),\n          );\n        },\n        onSaveRecorder(blob: Blob, fileName: string) {\n          el.dispatchEvent(\n            new CustomEvent('saverecorder', {\n              detail: [blob, fileName],\n            }),\n          );\n        },\n      },\n      _,\n    );\n\n    return createComponent(CaptureScreen, props);\n  },\n);\n\nexport default CaptureScreen;\n"],"names":["displayMediaOptions","video","audio","echoCancellation","noiseSuppression","sampleRate","btnStatusDic","inactive","paused","recording","CaptureScreen","_","videoElem","baseStyle","theme","_props","mergeProps","options","captureScreenText","stopCaptureText","startRecorderText","stopRecorderText","pausedRecorderText","recorderingText","onErrorRecorder","local","props","splitProps","chunks","mediaRecorder","setMediaRecorder","createSignal","mediaStream","setMediaStream","recordState","setRecordState","handleStartRecorder","mr","untrack","isFunction","onStartRecorder","state","start","resume","pause","handleRecorderDataAvailable","e","push","data","onRecorderDataAvailable","stopRecorder","stop","onStopRecorder","handleSaveRecorder","length","blob","Blob","type","name","filename","Date","toISOString","fileName","splice","onSaveRecorder","downloadBlob","stopCapture","ms","tracks","getTracks","forEach","track","onStopCapture","startCapture","stream","navigator","mediaDevices","getDisplayMedia","addEventListener","onStartCapture","err","onErrorCapture","createEffect","preview","srcObject","active","recorderInstance","MediaRecorder","onstop","onerror","ondataavailable","onCleanup","recorderText","createMemo","style","css","cx","class","Show","recorder","controls","customElement","opt","el","element","dispatchEvent","CustomEvent","detail","createComponent"],"rangeMappings":"","mappings":"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"}

package/lib/capture-screen/style.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/capture-screen/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n  .capture-screen {\n    display: block;\n  }\n\n  .view {\n    position: relative;\n  }\n\n  .view video {\n    border: var(--border-base);\n    border-radius: var(--border-radius);\n    inline-size: 100%;\n    transition: border-color var(--transition-duration) var(--transition-timing-function);\n  }\n\n  .recording,\n  .paused {\n    position: absolute;\n    inset-block-start: 5px;\n    inset-inline-end: 5px;\n    border-radius: 50%;\n    inline-size: 10px;\n    block-size: 10px;\n  }\n\n  .recording {\n    background-color: var(--success-color, #52c41a);\n    animation: record-fade-loop-effect 2s infinite;\n  }\n\n  .paused {\n    background-color: var(--warning-color, #faad14);\n  }\n\n  .controller {\n    display: flex;\n    margin: 16px 0;\n  }\n\n  .btn {\n    margin-inline-end: 16px;\n  }\n\n  .record {\n    display: flex;\n    margin-inline-start: 16px;\n\n    &::before {\n      display: block;\n      border-inline-start: 1px solid var(--border-color);\n      block-size: 100%;\n      transition: border-color var(--transition-duration) var(--transition-timing-function);\n      transform: translateX(-16px);\n      content: '';\n    }\n  }\n\n  @keyframes record-fade-loop-effect {\n    0% {\n      opacity: 0;\n    }\n\n    50% {\n      opacity: 1;\n    }\n\n    100% {\n      opacity: 0;\n    }\n  }\n`;\n"],"names":["style","css"],"mappings":"kGAEaA,6CAAAA,qBAFO,eAEPA,EAAQC,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuEzB,CAAC"}
+{"version":3,"sources":["../../components/capture-screen/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n  .capture-screen {\n    display: block;\n  }\n\n  .view {\n    position: relative;\n  }\n\n  .view video {\n    border: var(--border-base);\n    border-radius: var(--border-radius);\n    inline-size: 100%;\n    transition: border-color var(--transition-duration) var(--transition-timing-function);\n  }\n\n  .recording,\n  .paused {\n    position: absolute;\n    inset-block-start: 5px;\n    inset-inline-end: 5px;\n    border-radius: 50%;\n    inline-size: 10px;\n    block-size: 10px;\n  }\n\n  .recording {\n    background-color: var(--success-color, #52c41a);\n    animation: record-fade-loop-effect 2s infinite;\n  }\n\n  .paused {\n    background-color: var(--warning-color, #faad14);\n  }\n\n  .controller {\n    display: flex;\n    margin: 16px 0;\n  }\n\n  .btn {\n    margin-inline-end: 16px;\n  }\n\n  .record {\n    display: flex;\n    margin-inline-start: 16px;\n\n    &::before {\n      display: block;\n      border-inline-start: 1px solid var(--border-color);\n      block-size: 100%;\n      transition: border-color var(--transition-duration) var(--transition-timing-function);\n      transform: translateX(-16px);\n      content: '';\n    }\n  }\n\n  @keyframes record-fade-loop-effect {\n    0% {\n      opacity: 0;\n    }\n\n    50% {\n      opacity: 1;\n    }\n\n    100% {\n      opacity: 0;\n    }\n  }\n`;\n"],"names":["style","css"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"kGAEaA,6CAAAA,qBAFO,eAEPA,EAAQC,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuEzB,CAAC"}

package/lib/carousel/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/carousel/index.tsx"],"sourcesContent":["import {\n  Index,\n  Show,\n  createComponent,\n  createEffect,\n  createMemo,\n  createSignal,\n  mergeProps,\n  onCleanup,\n} from 'solid-js';\nimport { isFunction } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { style } from './style';\nimport theme from '../theme';\nimport type { CustomElement } from '..';\n\nexport interface CarouselProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** 轮播的内容 */\n  children?: JSX.Element[];\n  /** 当前内容的位置\n   * @default 0\n   */\n  offset?: number;\n  /** 开启指示器 */\n  dots?: boolean;\n  /** 设置自动播放时长, 不设置时不自动播放 */\n  autoplay?: number;\n  /** 自定义头部 */\n  header?: (current: number) => JSX.Element | ((current: number) => JSX.Element);\n  /** 切换显示的位置时的回调方法 */\n  onChange?: (e: number) => void;\n}\nexport type CarouselElement = CustomElement<CarouselProps>;\n\nfunction Carousel(_props: CarouselProps) {\n  const { baseStyle } = theme;\n  const props = mergeProps({ autoplay: -1, children: [] }, _props);\n  const [left, setLeft] = createSignal(0);\n  const [right, setRight] = createSignal(1);\n  const [offset, setOffset] = createSignal(0);\n  const [direction, setDirection] = createSignal<1 | -1 | 0>(0);\n  let playTimer: NodeJS.Timeout | undefined;\n\n  function onOffsetChange() {\n    const _dir = direction();\n\n    if (_dir === -1) {\n      setOffset(left());\n    } else if (_dir === 1) {\n      setOffset(right());\n    }\n    setDirection(0);\n    if (isFunction(props.onChange)) {\n      props.onChange(offset());\n    }\n  }\n  function handlePrev() {\n    setDirection(-1);\n  }\n  function handleNext() {\n    setDirection(1);\n  }\n  function handleDot(idx: number, e: Event) {\n    e.stopPropagation();\n    const _offset = offset();\n    const _current = Math.floor(_offset / 20) * 20 + idx;\n\n    if (_current > _offset) {\n      setDirection(1);\n      setRight(_current);\n    } else if (_current < _offset) {\n      setDirection(-1);\n      setLeft(_current);\n    }\n  }\n  function getPrevNext(idx: number, arr: JSX.Element[]) {\n    let _prev = idx - 1,\n      _next = idx + 1;\n\n    if (_prev < 0) {\n      _prev = arr.length - 1;\n    }\n    if (_next > arr.length - 1) {\n      _next = 0;\n    }\n    return [_prev, _next];\n  }\n  const list = createMemo(() => [...props.children]);\n  const dotLen = createMemo(() => Array(list().length > 20 ? 20 : list().length).fill(null));\n\n  createEffect(() => {\n    if (props.offset !== void 0) {\n      setOffset(Number(props.offset));\n    }\n  });\n  createEffect(() => {\n    const [_prev, _next] = getPrevNext(offset(), list());\n\n    setLeft(_prev);\n    setRight(_next);\n  });\n  createEffect(() => {\n    clearInterval(playTimer);\n    const autoplay = Number(props.autoplay);\n\n    if (autoplay > 0) {\n      playTimer = setInterval(() => {\n        if (autoplay < 1) {\n          clearInterval(playTimer);\n        }\n        handleNext();\n      }, autoplay);\n    }\n  });\n\n  onCleanup(() => {\n    clearInterval(playTimer);\n  });\n  const header = createMemo(() =>\n    isFunction(props.header) ? props.header(offset()) : props.header,\n  );\n\n  return (\n    <>\n      <style>\n        {baseStyle()}\n        {style}\n        {css(props.css)}\n      </style>\n      <section class={cx('carousel', props.class)}>\n        <section class=\"list\" data-dir={direction()}>\n          <div class=\"item\">{list()[left()]}</div>\n          <div class=\"item\" onAnimationEnd={onOffsetChange}>\n            {list()[offset()]}\n          </div>\n          <div class=\"item\">{list()[right()]}</div>\n        </section>\n        <slot name=\"header\" />\n        <Show when={header()}>\n          <section class=\"header\">{header()}</section>\n        </Show>\n        <div class=\"prev\" onClick={handlePrev} />\n        <div class=\"next\" onClick={handleNext} />\n        <Show when={props.dots}>\n          <div class=\"dots\">\n            <Index each={dotLen()}>\n              {(_, idx) => {\n                return (\n                  <i\n                    class={cx('dot', idx === (offset() % 20) + direction() && 'active')}\n                    onClick={handleDot.bind(null, idx)}\n                  />\n                );\n              }}\n            </Index>\n          </div>\n        </Show>\n      </section>\n    </>\n  );\n}\n\ncustomElement<CarouselProps>(\n  'n-carousel',\n  {\n    children: void 0,\n    autoplay: void 0,\n    class: void 0,\n    css: void 0,\n    offset: void 0,\n    dots: void 0,\n    header: void 0,\n    onChange: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        onChange(key: number) {\n          el.offset = key;\n          el.dispatchEvent(\n            new CustomEvent('change', {\n              detail: key,\n            }),\n          );\n        },\n      },\n      _,\n    );\n\n    createEffect(() => {\n      el.replaceChildren();\n    });\n    return createComponent(Carousel, props);\n  },\n);\nexport default Carousel;\n"],"names":["Carousel","_props","playTimer","baseStyle","theme","props","mergeProps","autoplay","children","left","setLeft","createSignal","right","setRight","offset","setOffset","direction","setDirection","onOffsetChange","_dir","isFunction","onChange","handlePrev","handleNext","handleDot","idx","e","stopPropagation","_offset","_current","Math","floor","list","createMemo","dotLen","Array","length","fill","createEffect","Number","arr","_prev","_next","clearInterval","setInterval","onCleanup","header","style","css","Show","dots","Index","_","bind","cx","class","customElement","opt","el","element","key","dispatchEvent","CustomEvent","detail","replaceChildren","createComponent"],"mappings":"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"}
+{"version":3,"sources":["../../components/carousel/index.tsx"],"sourcesContent":["import {\n  Index,\n  Show,\n  createComponent,\n  createEffect,\n  createMemo,\n  createSignal,\n  mergeProps,\n  onCleanup,\n} from 'solid-js';\nimport { isFunction } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { style } from './style';\nimport theme from '../theme';\nimport type { CustomElement } from '..';\n\nexport interface CarouselProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** 轮播的内容 */\n  children?: JSX.Element[];\n  /** 当前内容的位置\n   * @default 0\n   */\n  offset?: number;\n  /** 开启指示器 */\n  dots?: boolean;\n  /** 设置自动播放时长, 不设置时不自动播放 */\n  autoplay?: number;\n  /** 自定义头部 */\n  header?: (current: number) => JSX.Element | ((current: number) => JSX.Element);\n  /** 切换显示的位置时的回调方法 */\n  onChange?: (e: number) => void;\n}\nexport type CarouselElement = CustomElement<CarouselProps>;\n\nfunction Carousel(_props: CarouselProps) {\n  const { baseStyle } = theme;\n  const props = mergeProps({ autoplay: -1, children: [] }, _props);\n  const [left, setLeft] = createSignal(0);\n  const [right, setRight] = createSignal(1);\n  const [offset, setOffset] = createSignal(0);\n  const [direction, setDirection] = createSignal<1 | -1 | 0>(0);\n  let playTimer: NodeJS.Timeout | undefined;\n\n  function onOffsetChange() {\n    const _dir = direction();\n\n    if (_dir === -1) {\n      setOffset(left());\n    } else if (_dir === 1) {\n      setOffset(right());\n    }\n    setDirection(0);\n    if (isFunction(props.onChange)) {\n      props.onChange(offset());\n    }\n  }\n  function handlePrev() {\n    setDirection(-1);\n  }\n  function handleNext() {\n    setDirection(1);\n  }\n  function handleDot(idx: number, e: Event) {\n    e.stopPropagation();\n    const _offset = offset();\n    const _current = Math.floor(_offset / 20) * 20 + idx;\n\n    if (_current > _offset) {\n      setDirection(1);\n      setRight(_current);\n    } else if (_current < _offset) {\n      setDirection(-1);\n      setLeft(_current);\n    }\n  }\n  function getPrevNext(idx: number, arr: JSX.Element[]) {\n    let _prev = idx - 1,\n      _next = idx + 1;\n\n    if (_prev < 0) {\n      _prev = arr.length - 1;\n    }\n    if (_next > arr.length - 1) {\n      _next = 0;\n    }\n    return [_prev, _next];\n  }\n  const list = createMemo(() => [...props.children]);\n  const dotLen = createMemo(() => Array(list().length > 20 ? 20 : list().length).fill(null));\n\n  createEffect(() => {\n    if (props.offset !== void 0) {\n      setOffset(Number(props.offset));\n    }\n  });\n  createEffect(() => {\n    const [_prev, _next] = getPrevNext(offset(), list());\n\n    setLeft(_prev);\n    setRight(_next);\n  });\n  createEffect(() => {\n    clearInterval(playTimer);\n    const autoplay = Number(props.autoplay);\n\n    if (autoplay > 0) {\n      playTimer = setInterval(() => {\n        if (autoplay < 1) {\n          clearInterval(playTimer);\n        }\n        handleNext();\n      }, autoplay);\n    }\n  });\n\n  onCleanup(() => {\n    clearInterval(playTimer);\n  });\n  const header = createMemo(() =>\n    isFunction(props.header) ? props.header(offset()) : props.header,\n  );\n\n  return (\n    <>\n      <style>\n        {baseStyle()}\n        {style}\n        {css(props.css)}\n      </style>\n      <section class={cx('carousel', props.class)}>\n        <section class=\"list\" data-dir={direction()}>\n          <div class=\"item\">{list()[left()]}</div>\n          <div class=\"item\" onAnimationEnd={onOffsetChange}>\n            {list()[offset()]}\n          </div>\n          <div class=\"item\">{list()[right()]}</div>\n        </section>\n        <slot name=\"header\" />\n        <Show when={header()}>\n          <section class=\"header\">{header()}</section>\n        </Show>\n        <div class=\"prev\" onClick={handlePrev} />\n        <div class=\"next\" onClick={handleNext} />\n        <Show when={props.dots}>\n          <div class=\"dots\">\n            <Index each={dotLen()}>\n              {(_, idx) => {\n                return (\n                  <i\n                    class={cx('dot', idx === (offset() % 20) + direction() && 'active')}\n                    onClick={handleDot.bind(null, idx)}\n                  />\n                );\n              }}\n            </Index>\n          </div>\n        </Show>\n      </section>\n    </>\n  );\n}\n\ncustomElement<CarouselProps>(\n  'n-carousel',\n  {\n    children: void 0,\n    autoplay: void 0,\n    class: void 0,\n    css: void 0,\n    offset: void 0,\n    dots: void 0,\n    header: void 0,\n    onChange: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        onChange(key: number) {\n          el.offset = key;\n          el.dispatchEvent(\n            new CustomEvent('change', {\n              detail: key,\n            }),\n          );\n        },\n      },\n      _,\n    );\n\n    createEffect(() => {\n      el.replaceChildren();\n    });\n    return createComponent(Carousel, props);\n  },\n);\nexport default Carousel;\n"],"names":["Carousel","_props","playTimer","baseStyle","theme","props","mergeProps","autoplay","children","left","setLeft","createSignal","right","setRight","offset","setOffset","direction","setDirection","onOffsetChange","_dir","isFunction","onChange","handlePrev","handleNext","handleDot","idx","e","stopPropagation","_offset","_current","Math","floor","list","createMemo","dotLen","Array","length","fill","createEffect","Number","arr","_prev","_next","clearInterval","setInterval","onCleanup","header","style","css","Show","dots","Index","_","bind","cx","class","customElement","opt","el","element","key","dispatchEvent","CustomEvent","detail","replaceChildren","createComponent"],"rangeMappings":"","mappings":"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"}

package/lib/carousel/style.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/carousel/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n  :host {\n    inline-size: 100%;\n  }\n\n  .carousel {\n    position: relative;\n    display: block;\n    overflow: hidden;\n    border-radius: var(--border-radius);\n    inline-size: 100%;\n    block-size: 200px;\n    color: #fff;\n    user-select: none;\n    line-height: normal;\n    background-color: rgb(0 0 0 / 20%);\n\n    & ::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  .item {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    inline-size: 100%;\n    min-inline-size: 100%;\n    block-size: 100%;\n    min-block-size: 100%;\n    content-visibility: auto;\n    transform: translate3d(-100%, 0, 0);\n  }\n\n  .list {\n    display: flex;\n    border-radius: inherit;\n    inline-size: 100%;\n    block-size: 100%;\n    transform: translate3d(0, 0, 0);\n\n    &[data-dir='-1'] .item {\n      animation: carousel-prev 500ms forwards;\n    }\n\n    &[data-dir='1'] .item {\n      animation: carousel-next 500ms forwards;\n    }\n  }\n\n  .prev,\n  .next {\n    position: absolute;\n    z-index: 1;\n    margin: auto;\n    border-radius: var(--border-radius);\n    font-size: 16px;\n    font-weight: bold;\n    transition: transform var(--transition-duration);\n    inset-block: 0 0;\n    inline-size: fit-content;\n    block-size: fit-content;\n    line-height: 1;\n    cursor: pointer;\n\n    &::before {\n      display: inline-block;\n      transform: rotate(90deg);\n    }\n  }\n\n  .prev {\n    inset-inline-start: 4px;\n    transform: translateX(-32px) scaleY(0);\n\n    &::before {\n      content: '﹀';\n    }\n  }\n\n  .next {\n    inset-inline-end: 4px;\n    transform: translateX(32px) scaleY(0);\n\n    &::before {\n      content: '︿';\n    }\n  }\n\n  .dots {\n    position: absolute;\n    inset-inline: 0 0;\n    inset-block-end: 16px;\n    z-index: 1;\n    display: flex;\n    overflow: hidden;\n    margin: 0 auto;\n    inline-size: fit-content;\n    max-inline-size: calc(100% - 42px);\n    transition:\n      transform var(--transition-duration) linear,\n      opacity var(--transition-duration) linear;\n    gap: 4px;\n  }\n\n  .dot {\n    --offset: 0;\n\n    border-radius: 2px;\n    inline-size: 16px;\n    min-inline-size: 8px;\n    block-size: 3px;\n    background-color: rgb(255 255 255 / 80%);\n    transition: background-color var(--transition-duration) linear;\n    cursor: pointer;\n\n    &:hover,\n    &.active {\n      background-color: var(--primary-color);\n    }\n  }\n\n  .header {\n    position: absolute;\n    inset-block-start: 0;\n    z-index: 1;\n    display: flex;\n    inline-size: 100%;\n    transition: transform var(--transition-duration);\n    transform: translate3d(0, -100%, 0);\n  }\n\n  .carousel:hover {\n    .prev,\n    .next {\n      &:not([data-show='false']) {\n        transform: translateX(0) scaleY(1.5);\n      }\n    }\n\n    .header {\n      transform: translate3d(0, 0, 0);\n    }\n  }\n\n  @keyframes carousel-prev {\n    0% {\n      transform: translate3d(-100%, 0, 0);\n    }\n\n    100% {\n      transform: translate3d(0, 0, 0);\n    }\n  }\n\n  @keyframes carousel-next {\n    0% {\n      transform: translate3d(-100%, 0, 0);\n    }\n\n    100% {\n      transform: translate3d(-200%, 0, 0);\n    }\n  }\n`;\n"],"names":["style","css"],"mappings":"kGAEaA,6CAAAA,qBAFO,eAEPA,EAAQC,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoKzB,CAAC"}
+{"version":3,"sources":["../../components/carousel/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n  :host {\n    inline-size: 100%;\n  }\n\n  .carousel {\n    position: relative;\n    display: block;\n    overflow: hidden;\n    border-radius: var(--border-radius);\n    inline-size: 100%;\n    block-size: 200px;\n    color: #fff;\n    user-select: none;\n    line-height: normal;\n    background-color: rgb(0 0 0 / 20%);\n\n    & ::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  .item {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    inline-size: 100%;\n    min-inline-size: 100%;\n    block-size: 100%;\n    min-block-size: 100%;\n    content-visibility: auto;\n    transform: translate3d(-100%, 0, 0);\n  }\n\n  .list {\n    display: flex;\n    border-radius: inherit;\n    inline-size: 100%;\n    block-size: 100%;\n    transform: translate3d(0, 0, 0);\n\n    &[data-dir='-1'] .item {\n      animation: carousel-prev 500ms forwards;\n    }\n\n    &[data-dir='1'] .item {\n      animation: carousel-next 500ms forwards;\n    }\n  }\n\n  .prev,\n  .next {\n    position: absolute;\n    z-index: 1;\n    margin: auto;\n    border-radius: var(--border-radius);\n    font-size: 16px;\n    font-weight: bold;\n    transition: transform var(--transition-duration);\n    inset-block: 0 0;\n    inline-size: fit-content;\n    block-size: fit-content;\n    line-height: 1;\n    cursor: pointer;\n\n    &::before {\n      display: inline-block;\n      transform: rotate(90deg);\n    }\n  }\n\n  .prev {\n    inset-inline-start: 4px;\n    transform: translateX(-32px) scaleY(0);\n\n    &::before {\n      content: '﹀';\n    }\n  }\n\n  .next {\n    inset-inline-end: 4px;\n    transform: translateX(32px) scaleY(0);\n\n    &::before {\n      content: '︿';\n    }\n  }\n\n  .dots {\n    position: absolute;\n    inset-inline: 0 0;\n    inset-block-end: 16px;\n    z-index: 1;\n    display: flex;\n    overflow: hidden;\n    margin: 0 auto;\n    inline-size: fit-content;\n    max-inline-size: calc(100% - 42px);\n    transition:\n      transform var(--transition-duration) linear,\n      opacity var(--transition-duration) linear;\n    gap: 4px;\n  }\n\n  .dot {\n    --offset: 0;\n\n    border-radius: 2px;\n    inline-size: 16px;\n    min-inline-size: 8px;\n    block-size: 3px;\n    background-color: rgb(255 255 255 / 80%);\n    transition: background-color var(--transition-duration) linear;\n    cursor: pointer;\n\n    &:hover,\n    &.active {\n      background-color: var(--primary-color);\n    }\n  }\n\n  .header {\n    position: absolute;\n    inset-block-start: 0;\n    z-index: 1;\n    display: flex;\n    inline-size: 100%;\n    transition: transform var(--transition-duration);\n    transform: translate3d(0, -100%, 0);\n  }\n\n  .carousel:hover {\n    .prev,\n    .next {\n      &:not([data-show='false']) {\n        transform: translateX(0) scaleY(1.5);\n      }\n    }\n\n    .header {\n      transform: translate3d(0, 0, 0);\n    }\n  }\n\n  @keyframes carousel-prev {\n    0% {\n      transform: translate3d(-100%, 0, 0);\n    }\n\n    100% {\n      transform: translate3d(0, 0, 0);\n    }\n  }\n\n  @keyframes carousel-next {\n    0% {\n      transform: translate3d(-100%, 0, 0);\n    }\n\n    100% {\n      transform: translate3d(-200%, 0, 0);\n    }\n  }\n`;\n"],"names":["style","css"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"kGAEaA,6CAAAA,qBAFO,eAEPA,EAAQC,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoKzB,CAAC"}

package/lib/checkbox/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/checkbox/index.tsx"],"sourcesContent":["import { For, createComponent, createEffect, createMemo, createSignal, mergeProps } from 'solid-js';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { style } from './style';\nimport { FieldName } from '../basic-config';\nimport getOptions from '../get-options';\nimport theme from '../theme';\nimport type { BaseOption, BasicConfig, CustomElement } from '..';\n\n/** 通用API\n * @since 1.0.0\n */\nexport interface CheckboxBaseProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** input[type=\"checkbox\"] 的 name 属性 */\n  name?: string;\n  /** 只读 */\n  disabled?: boolean;\n  /** 选项排列方式\n   * @default 'horizontal'\n   */\n  layout?: 'vertical' | 'horizontal';\n  /** 自定义节点 'label'、'value'、'options' 的字段 */\n  fieldNames?: BasicConfig['fieldName'];\n}\n/** 复选框API */\nexport interface CheckboxBoolProps extends CheckboxBaseProps {\n  /** 一个 bool 值; */\n  value?: boolean;\n  /** 默认值 */\n  defaultValue?: boolean;\n  /** 值修改时的回调方法 */\n  onChange?: (val: boolean) => void;\n  checkAll?: never;\n  options?: never;\n}\n/** 通过数据渲染一组复选框按钮的API */\nexport interface CheckboxGroupProps extends CheckboxBaseProps {\n  /** 全选 */\n  checkAll?: boolean;\n  /** 值;\n   * 当设置了value时, 将是受控模式;\n   * 受控模式可通过 onChange 事件更新 value\n   **/\n  value?: (string | number)[];\n  /** 默认值 */\n  defaultValue?: (string | number)[];\n  /** 渲染选项所使用的数据,\n   * 当没有设置该值时, 将渲染一个切换 bool 值的按钮\n   * */\n  options?: (CheckboxOption | string)[];\n  /** 值修改时的回调方法 */\n  onChange?: (val: (string | number)[]) => void;\n}\n/** 复选框选项\n * @since 1.0.0\n */\nexport interface CheckboxOption extends BaseOption {\n  /** 不确定状态 */\n  indeterminate?: boolean;\n}\n\nfunction Checkbox(props: CheckboxBoolProps | CheckboxGroupProps) {\n  const { baseStyle } = theme;\n  const [value, setValue] = createSignal<(string | number)[]>([]);\n  const fieldNames = createMemo(() => Object.assign({}, FieldName, props.fieldNames));\n\n  createEffect(() => {\n    const _val = typeof props.value === 'undefined' ? props.defaultValue : props.value;\n    let val: (string | number)[] = [];\n\n    if (Array.isArray(_val)) {\n      val = _val;\n    } else if (typeof _val !== 'undefined') {\n      val = [_val as unknown as string];\n    }\n\n    setValue(val);\n  });\n  const options = createMemo(() => {\n    const fieldName = fieldNames();\n\n    if (typeof props.options === 'undefined') {\n      return getOptions([{ value: 1 } as CheckboxOption], fieldName);\n    }\n    const checkAll: CheckboxOption[] = [\n      { [fieldName.value]: 'all', [fieldName.label]: '全选', indeterminate: false },\n    ];\n    const arr = props.checkAll ? checkAll : [];\n\n    return arr.concat(getOptions(props.options || [], fieldName));\n  });\n\n  const all = createMemo(() => {\n    const allVal: (string | number)[] = [];\n    const fieldName = fieldNames();\n\n    options().forEach((item) => {\n      if (!('indeterminate' in item) && typeof item[fieldName.value] !== 'undefined') {\n        allVal.push(item[fieldName.value]!);\n      }\n    });\n\n    return allVal;\n  });\n\n  function getIndeterminate() {\n    let _indeterminate = false;\n\n    all().forEach((v) => {\n      if (value().length && !value().includes(v)) {\n        _indeterminate = true;\n      }\n    });\n    return _indeterminate;\n  }\n  const checkedAll = createMemo(() => {\n    let checked = true;\n    const alls = all();\n\n    for (let i = 0, len = alls.length; i < len; i++) {\n      if (!value().includes(alls[i])) {\n        checked = false;\n        break;\n      }\n    }\n    return checked;\n  });\n\n  function onChange(item: CheckboxOption) {\n    if (!props.disabled && !item.disabled) {\n      const isIndeterminate = 'indeterminate' in item;\n      let newVal = isIndeterminate ? [] : [...value()];\n      const val = item[fieldNames().value]!;\n\n      if (isIndeterminate) {\n        if (!checkedAll()) {\n          newVal = all();\n        }\n      } else {\n        const idx = newVal.indexOf(val);\n\n        if (idx !== -1) {\n          newVal.splice(idx, 1);\n        } else {\n          newVal.push(val);\n        }\n      }\n      if (typeof props.value === 'undefined') {\n        setValue(newVal);\n      }\n      props.onChange?.((typeof props.options === 'undefined' ? !!newVal[0] : newVal) as never);\n    }\n  }\n  function onKeyUp(item: CheckboxOption, e: KeyboardEvent) {\n    e.preventDefault();\n    if (e.key === 'Enter') {\n      onChange(item);\n    }\n  }\n\n  return (\n    <>\n      <style>\n        {baseStyle()}\n        {style}\n        {css(props.css)}\n      </style>\n      <section class={cx('box', props.layout, props.class)}>\n        <For each={options()}>\n          {(item) => {\n            const readOnly = props.disabled || item.disabled;\n            const fieldName = fieldNames();\n            const realVal = item[fieldName.value]!;\n\n            if ('indeterminate' in item) {\n              createEffect(() => {\n                item.ref.indeterminate = getIndeterminate();\n              });\n            }\n            return (\n              <span\n                class={cx('item', item.class, item.status)}\n                aria-disabled={readOnly}\n                tabindex={readOnly ? -1 : 0}\n                onKeyUp={onKeyUp.bind(null, item)}\n                onClick={onChange.bind(null, item)}\n              >\n                <input\n                  ref={item.ref}\n                  class=\"checkbox\"\n                  type=\"checkbox\"\n                  name={props.name}\n                  value={realVal as string}\n                  disabled={readOnly}\n                  checked={'indeterminate' in item ? checkedAll() : value().includes(realVal)}\n                  onChange={onChange.bind(null, item)}\n                />\n                <label>{item[fieldName.label]}</label>\n              </span>\n            );\n          }}\n        </For>\n      </section>\n    </>\n  );\n}\n\nexport type CheckboxGroupElement = CustomElement<CheckboxGroupProps>;\nexport type CheckboxBoolElement = CustomElement<CheckboxBoolProps>;\n\ncustomElement<CheckboxBoolProps | CheckboxGroupProps>(\n  'n-checkbox',\n  {\n    class: void 0,\n    css: void 0,\n    name: void 0,\n    disabled: void 0,\n    value: void 0,\n    defaultValue: void 0,\n    options: void 0,\n    onChange: void 0,\n    fieldNames: void 0,\n    checkAll: void 0,\n    layout: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        layout: el.layout || 'horizontal',\n        onChange(next: (string | number)[] | boolean) {\n          el.dispatchEvent(\n            new CustomEvent('change', {\n              detail: next,\n            }),\n          );\n        },\n      },\n      _,\n    );\n\n    createEffect(() => {\n      el.removeAttribute('options');\n      el.removeAttribute('field-names');\n      el.removeAttribute('css');\n    });\n    return createComponent(Checkbox, props);\n  },\n);\nexport default Checkbox;\n"],"names":["Checkbox","props","baseStyle","theme","value","setValue","createSignal","fieldNames","createMemo","Object","assign","FieldName","createEffect","_val","defaultValue","val","Array","isArray","options","fieldName","getOptions","checkAll","label","indeterminate","arr","concat","all","allVal","forEach","item","push","checkedAll","checked","alls","i","len","length","includes","onChange","disabled","isIndeterminate","newVal","idx","indexOf","splice","onKeyUp","e","preventDefault","key","style","css","For","readOnly","realVal","_indeterminate","ref","v","bind","cx","class","status","name","layout","customElement","_","opt","el","element","mergeProps","next","dispatchEvent","CustomEvent","detail","removeAttribute","createComponent"],"mappings":"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"}
+{"version":3,"sources":["../../components/checkbox/index.tsx"],"sourcesContent":["import { For, createComponent, createEffect, createMemo, createSignal, mergeProps } from 'solid-js';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { style } from './style';\nimport { FieldName } from '../basic-config';\nimport getOptions from '../get-options';\nimport theme from '../theme';\nimport type { BaseOption, BasicConfig, CustomElement } from '..';\n\n/** 通用API\n * @since 1.0.0\n */\nexport interface CheckboxBaseProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** input[type=\"checkbox\"] 的 name 属性 */\n  name?: string;\n  /** 只读 */\n  disabled?: boolean;\n  /** 选项排列方式\n   * @default 'horizontal'\n   */\n  layout?: 'vertical' | 'horizontal';\n  /** 自定义节点 'label'、'value'、'options' 的字段 */\n  fieldNames?: BasicConfig['fieldName'];\n}\n/** 复选框API */\nexport interface CheckboxBoolProps extends CheckboxBaseProps {\n  /** 一个 bool 值; */\n  value?: boolean;\n  /** 默认值 */\n  defaultValue?: boolean;\n  /** 值修改时的回调方法 */\n  onChange?: (val: boolean) => void;\n  checkAll?: never;\n  options?: never;\n}\n/** 通过数据渲染一组复选框按钮的API */\nexport interface CheckboxGroupProps extends CheckboxBaseProps {\n  /** 全选 */\n  checkAll?: boolean;\n  /** 值;\n   * 当设置了value时, 将是受控模式;\n   * 受控模式可通过 onChange 事件更新 value\n   **/\n  value?: (string | number)[];\n  /** 默认值 */\n  defaultValue?: (string | number)[];\n  /** 渲染选项所使用的数据,\n   * 当没有设置该值时, 将渲染一个切换 bool 值的按钮\n   * */\n  options?: (CheckboxOption | string)[];\n  /** 值修改时的回调方法 */\n  onChange?: (val: (string | number)[]) => void;\n}\n/** 复选框选项\n * @since 1.0.0\n */\nexport interface CheckboxOption extends BaseOption {\n  /** 不确定状态 */\n  indeterminate?: boolean;\n}\n\nfunction Checkbox(props: CheckboxBoolProps | CheckboxGroupProps) {\n  const { baseStyle } = theme;\n  const [value, setValue] = createSignal<(string | number)[]>([]);\n  const fieldNames = createMemo(() => Object.assign({}, FieldName, props.fieldNames));\n\n  createEffect(() => {\n    const _val = typeof props.value === 'undefined' ? props.defaultValue : props.value;\n    let val: (string | number)[] = [];\n\n    if (Array.isArray(_val)) {\n      val = _val;\n    } else if (typeof _val !== 'undefined') {\n      val = [_val as unknown as string];\n    }\n\n    setValue(val);\n  });\n  const options = createMemo(() => {\n    const fieldName = fieldNames();\n\n    if (typeof props.options === 'undefined') {\n      return getOptions([{ value: 1 } as CheckboxOption], fieldName);\n    }\n    const checkAll: CheckboxOption[] = [\n      { [fieldName.value]: 'all', [fieldName.label]: '全选', indeterminate: false },\n    ];\n    const arr = props.checkAll ? checkAll : [];\n\n    return arr.concat(getOptions(props.options || [], fieldName));\n  });\n\n  const all = createMemo(() => {\n    const allVal: (string | number)[] = [];\n    const fieldName = fieldNames();\n\n    options().forEach((item) => {\n      if (!('indeterminate' in item) && typeof item[fieldName.value] !== 'undefined') {\n        allVal.push(item[fieldName.value]!);\n      }\n    });\n\n    return allVal;\n  });\n\n  function getIndeterminate() {\n    let _indeterminate = false;\n\n    all().forEach((v) => {\n      if (value().length && !value().includes(v)) {\n        _indeterminate = true;\n      }\n    });\n    return _indeterminate;\n  }\n  const checkedAll = createMemo(() => {\n    let checked = true;\n    const alls = all();\n\n    for (let i = 0, len = alls.length; i < len; i++) {\n      if (!value().includes(alls[i])) {\n        checked = false;\n        break;\n      }\n    }\n    return checked;\n  });\n\n  function onChange(item: CheckboxOption) {\n    if (!props.disabled && !item.disabled) {\n      const isIndeterminate = 'indeterminate' in item;\n      let newVal = isIndeterminate ? [] : [...value()];\n      const val = item[fieldNames().value]!;\n\n      if (isIndeterminate) {\n        if (!checkedAll()) {\n          newVal = all();\n        }\n      } else {\n        const idx = newVal.indexOf(val);\n\n        if (idx !== -1) {\n          newVal.splice(idx, 1);\n        } else {\n          newVal.push(val);\n        }\n      }\n      if (typeof props.value === 'undefined') {\n        setValue(newVal);\n      }\n      props.onChange?.((typeof props.options === 'undefined' ? !!newVal[0] : newVal) as never);\n    }\n  }\n  function onKeyUp(item: CheckboxOption, e: KeyboardEvent) {\n    e.preventDefault();\n    if (e.key === 'Enter') {\n      onChange(item);\n    }\n  }\n\n  return (\n    <>\n      <style>\n        {baseStyle()}\n        {style}\n        {css(props.css)}\n      </style>\n      <section class={cx('box', props.layout, props.class)}>\n        <For each={options()}>\n          {(item) => {\n            const readOnly = props.disabled || item.disabled;\n            const fieldName = fieldNames();\n            const realVal = item[fieldName.value]!;\n\n            if ('indeterminate' in item) {\n              createEffect(() => {\n                item.ref.indeterminate = getIndeterminate();\n              });\n            }\n            return (\n              <span\n                class={cx('item', item.class, item.status)}\n                aria-disabled={readOnly}\n                tabindex={readOnly ? -1 : 0}\n                onKeyUp={onKeyUp.bind(null, item)}\n                onClick={onChange.bind(null, item)}\n              >\n                <input\n                  ref={item.ref}\n                  class=\"checkbox\"\n                  type=\"checkbox\"\n                  name={props.name}\n                  value={realVal as string}\n                  disabled={readOnly}\n                  checked={'indeterminate' in item ? checkedAll() : value().includes(realVal)}\n                  onChange={onChange.bind(null, item)}\n                />\n                <label>{item[fieldName.label]}</label>\n              </span>\n            );\n          }}\n        </For>\n      </section>\n    </>\n  );\n}\n\nexport type CheckboxGroupElement = CustomElement<CheckboxGroupProps>;\nexport type CheckboxBoolElement = CustomElement<CheckboxBoolProps>;\n\ncustomElement<CheckboxBoolProps | CheckboxGroupProps>(\n  'n-checkbox',\n  {\n    class: void 0,\n    css: void 0,\n    name: void 0,\n    disabled: void 0,\n    value: void 0,\n    defaultValue: void 0,\n    options: void 0,\n    onChange: void 0,\n    fieldNames: void 0,\n    checkAll: void 0,\n    layout: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        layout: el.layout || 'horizontal',\n        onChange(next: (string | number)[] | boolean) {\n          el.dispatchEvent(\n            new CustomEvent('change', {\n              detail: next,\n            }),\n          );\n        },\n      },\n      _,\n    );\n\n    createEffect(() => {\n      el.removeAttribute('options');\n      el.removeAttribute('field-names');\n      el.removeAttribute('css');\n    });\n    return createComponent(Checkbox, props);\n  },\n);\nexport default Checkbox;\n"],"names":["Checkbox","props","baseStyle","theme","value","setValue","createSignal","fieldNames","createMemo","Object","assign","FieldName","createEffect","_val","defaultValue","val","Array","isArray","options","fieldName","getOptions","checkAll","label","indeterminate","arr","concat","all","allVal","forEach","item","push","checkedAll","checked","alls","i","len","length","includes","onChange","disabled","isIndeterminate","newVal","idx","indexOf","splice","onKeyUp","e","preventDefault","key","style","css","For","readOnly","realVal","_indeterminate","ref","v","bind","cx","class","status","name","layout","customElement","_","opt","el","element","mergeProps","next","dispatchEvent","CustomEvent","detail","removeAttribute","createComponent"],"rangeMappings":"","mappings":"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"}

package/lib/checkbox/style.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/checkbox/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n  .box {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px 16px;\n  }\n\n  .horizontal {\n    flex-direction: row;\n  }\n\n  .vertical {\n    flex-direction: column;\n  }\n\n  .item {\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    cursor: pointer;\n    box-sizing: border-box;\n    gap: 6px;\n    outline: 0;\n\n    label {\n      color: var(--text-color);\n      cursor: pointer;\n    }\n\n    .checkbox {\n      position: relative;\n      display: inline-block;\n      margin: 0;\n      border: 1px solid var(--border-color);\n      border-radius: 4px;\n      background-color: var(--component-bg);\n      outline: 0 solid transparent;\n      box-shadow: inset 0 0 0 var(--shadow-w, 0) var(--primary-color);\n      transition:\n        0.3s border-color var(--transition-timing-function),\n        0.3s box-shadow var(--transition-timing-function),\n        0.3s outline var(--transition-timing-function);\n      appearance: none;\n      inline-size: 16px;\n      block-size: 16px;\n      pointer-events: none;\n      user-select: none;\n\n      &:active {\n        --primary-color: var(--primary-active);\n        --border-color: var(--primary-active);\n      }\n\n      &:disabled {\n        --border-color: var(--disable-border);\n        --primary-color: var(--disable-border);\n      }\n\n      &::before {\n        position: absolute;\n        display: block;\n        margin: auto;\n        border-style: solid;\n        border-width: 0 0 2px 2px;\n        border-color: transparent;\n        transition-duration: 0.3s;\n        transition-timing-function: var(--transition-timing-function);\n        transition-property: background-color, transform, border-color, height;\n        box-sizing: border-box;\n        inset-block: 0 0;\n        inset-inline: 0 0;\n        content: '';\n        inline-size: 10px;\n        block-size: 10px;\n        transform: scale(0);\n      }\n\n      &:checked {\n        --shadow-w: 16px;\n        --border-color: var(--primary-color);\n\n        &::before {\n          block-size: 5px;\n          border-color: var(--primary-outline);\n          transform: rotate(-55deg) translateY(-10%) translateX(5%) scale(1);\n        }\n\n        & + label {\n          --text-color: var(--primary-color);\n        }\n      }\n\n      &:indeterminate:not(:checked) {\n        &::before {\n          border-radius: 2px;\n          background-color: var(--primary-color);\n          transform: scale(1);\n        }\n      }\n\n      &:not(:disabled, :checked):hover {\n        --primary-color: var(--primary-hover);\n        --border-color: var(--primary-hover);\n      }\n    }\n\n    &:not([aria-disabled]:not([aria-disabled='false'])):focus .checkbox {\n      outline: 3px solid var(--primary-outline);\n\n      &:not(:checked) {\n        border-color: var(--primary-hover);\n      }\n    }\n\n    &[aria-disabled]:not([aria-disabled='false']) {\n      cursor: not-allowed;\n\n      & > label {\n        --text-color: var(--disable-color);\n\n        cursor: not-allowed;\n      }\n    }\n\n    &:last-child {\n      margin-inline-end: 16px;\n    }\n  }\n\n  ${['success', 'error', 'warning']\n    .map(\n      (s) =>\n        `.${s} {--border-color: var(--${s}-border);--primary-hover: var(--${s}-hover);--primary-outline: var(--${s}-outline);--primary-color: var(--${s}-color);--primary-active: var(--${s}-active);--component-bg: var(--${s}-bg);}`,\n    )\n    .join('')}\n`;\n"],"names":["style","css","map","s","join"],"mappings":"kGAEaA,6CAAAA,qBAFO,eAEPA,EAAQC,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiIvB,EAAE,CAAC,UAAW,QAAS,UAAU,CAC9BC,GAAG,CACF,AAACC,GACC,CAAC,CAAC,EAAEA,EAAE,wBAAwB,EAAEA,EAAE,gCAAgC,EAAEA,EAAE,iCAAiC,EAAEA,EAAE,iCAAiC,EAAEA,EAAE,gCAAgC,EAAEA,EAAE,+BAA+B,EAAEA,EAAE,MAAM,CAAC,EAEjOC,IAAI,CAAC,IAAI;AACd,CAAC"}
+{"version":3,"sources":["../../components/checkbox/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n  .box {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px 16px;\n  }\n\n  .horizontal {\n    flex-direction: row;\n  }\n\n  .vertical {\n    flex-direction: column;\n  }\n\n  .item {\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    cursor: pointer;\n    box-sizing: border-box;\n    gap: 6px;\n    outline: 0;\n\n    label {\n      color: var(--text-color);\n      cursor: pointer;\n    }\n\n    .checkbox {\n      position: relative;\n      display: inline-block;\n      margin: 0;\n      border: 1px solid var(--border-color);\n      border-radius: 4px;\n      background-color: var(--component-bg);\n      outline: 0 solid transparent;\n      box-shadow: inset 0 0 0 var(--shadow-w, 0) var(--primary-color);\n      transition:\n        0.3s border-color var(--transition-timing-function),\n        0.3s box-shadow var(--transition-timing-function),\n        0.3s outline var(--transition-timing-function);\n      appearance: none;\n      inline-size: 16px;\n      block-size: 16px;\n      pointer-events: none;\n      user-select: none;\n\n      &:active {\n        --primary-color: var(--primary-active);\n        --border-color: var(--primary-active);\n      }\n\n      &:disabled {\n        --border-color: var(--disable-border);\n        --primary-color: var(--disable-border);\n      }\n\n      &::before {\n        position: absolute;\n        display: block;\n        margin: auto;\n        border-style: solid;\n        border-width: 0 0 2px 2px;\n        border-color: transparent;\n        transition-duration: 0.3s;\n        transition-timing-function: var(--transition-timing-function);\n        transition-property: background-color, transform, border-color, height;\n        box-sizing: border-box;\n        inset-block: 0 0;\n        inset-inline: 0 0;\n        content: '';\n        inline-size: 10px;\n        block-size: 10px;\n        transform: scale(0);\n      }\n\n      &:checked {\n        --shadow-w: 16px;\n        --border-color: var(--primary-color);\n\n        &::before {\n          block-size: 5px;\n          border-color: var(--primary-outline);\n          transform: rotate(-55deg) translateY(-10%) translateX(5%) scale(1);\n        }\n\n        & + label {\n          --text-color: var(--primary-color);\n        }\n      }\n\n      &:indeterminate:not(:checked) {\n        &::before {\n          border-radius: 2px;\n          background-color: var(--primary-color);\n          transform: scale(1);\n        }\n      }\n\n      &:not(:disabled, :checked):hover {\n        --primary-color: var(--primary-hover);\n        --border-color: var(--primary-hover);\n      }\n    }\n\n    &:not([aria-disabled]:not([aria-disabled='false'])):focus .checkbox {\n      outline: 3px solid var(--primary-outline);\n\n      &:not(:checked) {\n        border-color: var(--primary-hover);\n      }\n    }\n\n    &[aria-disabled]:not([aria-disabled='false']) {\n      cursor: not-allowed;\n\n      & > label {\n        --text-color: var(--disable-color);\n\n        cursor: not-allowed;\n      }\n    }\n\n    &:last-child {\n      margin-inline-end: 16px;\n    }\n  }\n\n  ${['success', 'error', 'warning']\n    .map(\n      (s) =>\n        `.${s} {--border-color: var(--${s}-border);--primary-hover: var(--${s}-hover);--primary-outline: var(--${s}-outline);--primary-color: var(--${s}-color);--primary-active: var(--${s}-active);--component-bg: var(--${s}-bg);}`,\n    )\n    .join('')}\n`;\n"],"names":["style","css","map","s","join"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"kGAEaA,6CAAAA,qBAFO,eAEPA,EAAQC,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiIvB,EAAE,CAAC,UAAW,QAAS,UAAU,CAC9BC,GAAG,CACF,AAACC,GACC,CAAC,CAAC,EAAEA,EAAE,wBAAwB,EAAEA,EAAE,gCAAgC,EAAEA,EAAE,iCAAiC,EAAEA,EAAE,iCAAiC,EAAEA,EAAE,gCAAgC,EAAEA,EAAE,+BAA+B,EAAEA,EAAE,MAAM,CAAC,EAEjOC,IAAI,CAAC,IAAI;AACd,CAAC"}

package/lib/code/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return g}});const e=require("solid-js/web"),t=require("solid-js"),n=c(require("@moneko/common/lib/isFunction")),r=c(require("@moneko/common/lib/setClipboard")),l=require("@moneko/css"),o=require("solid-element"),i=require("./style"),a=c(require("../prism/css"));require("../prism/prism.js");const s=c(require("../theme"));function c(e){return e&&e.__esModule?e:{default:e}}const u=(0,e.template)('<div class="toolbar"><button class="toolbar-copy">'),d=(0,e.template)("<pre><code>"),v=(0,e.template)("<style>"),m=(0,e.template)("<div><textarea>");function f(o){let c;let{baseStyle:f}=s.default,[g,p]=(0,t.createSignal)(""),[h,b]=(0,t.createSignal)(20);function $(){(0,r.default)((0,t.untrack)(g),c)}function _(){return(()=>{let n=d(),r=n.firstChild,i=c;return(0,e.insert)(n,(0,e.createComponent)(t.Show,{get when(){return o.toolbar},get children(){let t=u(),n=t.firstChild;return(0,e.addEventListener)(n,"click",$,!0),(0,e.effect)(()=>(0,e.setAttribute)(t,"data-lang",o.lang?.split(" ")[0])),t}}),r),"function"==typeof i?(0,e.use)(i,r):c=r,(0,e.effect)(t=>{let i=(0,l.cx)(`language-${o.lang}`,o.lineNumber&&"line-numbers",!o.toolbar&&"not-toolbar",!o.edit&&o.class),a=`language-${o.lang}`;return i!==t._v$&&(0,e.className)(n,t._v$=i),a!==t._v$2&&(0,e.className)(r,t._v$2=a),t},{_v$:void 0,_v$2:void 0}),n})()}function C({target:e}){let t=`${e.value}${/\n$/.test(e.value)?"​":""}`;p(t),(0,n.default)(o.onChange)&&o.onChange(t)}return(0,t.createEffect)(()=>{if(o.code){let e=o.code.replace(/^\n/,"");try{p(decodeURIComponent(e))}catch(t){p(e)}}else p("")}),(0,t.createEffect)(()=>{!function(e){var t;if(!e.code)return;let n=e.lang||"markup";/^diff-([\w-]+)/i.test(n)&&(window.Prism.languages[n]=window.Prism.languages.diff),t={data:window.Prism.highlight(e.code,window.Prism.languages[n],n)},c.innerHTML=t.data,b(c.getBoundingClientRect().height-(o.toolbar?40:16))}({lang:o.lang,code:g()})}),[(()=>{let t=v();return(0,e.insert)(t,f,null),(0,e.insert)(t,a.default,null),(0,e.insert)(t,i.style,null),(0,e.insert)(t,()=>(0,l.css)(o.css),null),t})(),(0,e.createComponent)(t.Show,{get when(){return o.edit},get fallback(){return _()},get children(){let t=m(),n=t.firstChild;return(0,e.addEventListener)(n,"input",C,!0),(0,e.insert)(t,_,null),(0,e.effect)(r=>{let i=(0,l.cx)("n-editor",o.class),a=(0,l.cx)(o.lineNumber&&"line-numbers",!o.toolbar&&"not-toolbar"),s=`${h()}px`;return i!==r._v$3&&(0,e.className)(t,r._v$3=i),a!==r._v$4&&(0,e.className)(n,r._v$4=a),s!==r._v$5&&(null!=(r._v$5=s)?n.style.setProperty("height",s):n.style.removeProperty("height")),r},{_v$3:void 0,_v$4:void 0,_v$5:void 0}),(0,e.effect)(()=>n.value=g()),t}})]}(0,o.customElement)("n-code",{class:void 0,code:void 0,lang:void 0,children:void 0,edit:void 0,toolbar:void 0,css:void 0,lineNumber:void 0,onChange:void 0},(e,n)=>{let r=n.element,l=(0,t.mergeProps)({code:r.textContent,css:r.css,onChange(e){r.dispatchEvent(new CustomEvent("change",{detail:e}))}},e);return(0,t.createEffect)(()=>{r.replaceChildren(),r.removeAttribute("css")}),(0,t.createComponent)(f,l)});const g=f;(0,e.delegateEvents)(["click","input"]);
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return f}});const e=require("solid-js/web"),t=require("solid-js"),n=c(require("@moneko/common/lib/isFunction")),r=c(require("@moneko/common/lib/setClipboard")),l=require("@moneko/css"),i=require("solid-element"),o=require("./style"),a=c(require("../prism/css"));require("../prism/prism.js");const s=c(require("../theme"));function c(e){return e&&e.__esModule?e:{default:e}}const u=(0,e.template)('<div class="toolbar"><button class="toolbar-copy">'),d=(0,e.template)("<pre><code>"),m=(0,e.template)("<style>"),v=(0,e.template)("<div><textarea>");function g(i){let c;let{baseStyle:g}=s.default,[f,p]=(0,t.createSignal)(""),[h,b]=(0,t.createSignal)(20);function $(){(0,r.default)((0,t.untrack)(f),c)}function _(){return(()=>{let n=d(),r=n.firstChild,o=c;return(0,e.insert)(n,(0,e.createComponent)(t.Show,{get when(){return i.toolbar},get children(){let t=u(),n=t.firstChild;return(0,e.addEventListener)(n,"click",$,!0),(0,e.effect)(()=>(0,e.setAttribute)(t,"data-lang",i.lang?.split(" ")[0])),t}}),r),"function"==typeof o?(0,e.use)(o,r):c=r,(0,e.effect)(t=>{let o=(0,l.cx)(`language-${i.lang}`,i.lineNumber&&"line-numbers",!i.toolbar&&"not-toolbar",!i.edit&&i.class),a=`language-${i.lang}`;return o!==t._v$&&(0,e.className)(n,t._v$=o),a!==t._v$2&&(0,e.className)(r,t._v$2=a),t},{_v$:void 0,_v$2:void 0}),n})()}function w({target:e}){let t=`${e.value}${/\n$/.test(e.value)?"​":""}`;p(t),(0,n.default)(i.onChange)&&i.onChange(t)}return(0,t.createEffect)(()=>{if(i.code){let e=i.code.replace(/^\n/,"");try{p(decodeURIComponent(e))}catch(t){p(e)}}else p("")}),(0,t.createEffect)(()=>{!function(e){var t;if(!e.code)return;let n=e.lang||"markup";/^diff-([\w-]+)/i.test(n)&&(window.Prism.languages[n]=window.Prism.languages.diff);let r=window.Prism.languages[n]||window.Prism.languages.markup;t={data:window.Prism.highlight(e.code,r,n)},c.innerHTML=t.data,b(c.getBoundingClientRect().height-(i.toolbar?40:16))}({lang:i.lang,code:f()})}),[(()=>{let t=m();return(0,e.insert)(t,g,null),(0,e.insert)(t,a.default,null),(0,e.insert)(t,o.style,null),(0,e.insert)(t,()=>(0,l.css)(i.css),null),t})(),(0,e.createComponent)(t.Show,{get when(){return i.edit},get fallback(){return _()},get children(){let t=v(),n=t.firstChild;return(0,e.addEventListener)(n,"input",w,!0),(0,e.insert)(t,_,null),(0,e.effect)(r=>{let o=(0,l.cx)("n-editor",i.class),a=(0,l.cx)(i.lineNumber&&"line-numbers",!i.toolbar&&"not-toolbar"),s=`${h()}px`;return o!==r._v$3&&(0,e.className)(t,r._v$3=o),a!==r._v$4&&(0,e.className)(n,r._v$4=a),s!==r._v$5&&(null!=(r._v$5=s)?n.style.setProperty("height",s):n.style.removeProperty("height")),r},{_v$3:void 0,_v$4:void 0,_v$5:void 0}),(0,e.effect)(()=>n.value=f()),t}})]}(0,i.customElement)("n-code",{class:void 0,code:void 0,lang:void 0,children:void 0,edit:void 0,toolbar:void 0,css:void 0,lineNumber:void 0,onChange:void 0},(e,n)=>{let r=n.element,l=(0,t.mergeProps)({code:r.textContent,css:r.css,onChange(e){r.dispatchEvent(new CustomEvent("change",{detail:e}))}},e);return(0,t.createEffect)(()=>{r.replaceChildren(),r.removeAttribute("css")}),(0,t.createComponent)(g,l)});const f=g;(0,e.delegateEvents)(["click","input"]);
 //# sourceMappingURL=index.js.map

package/lib/code/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/code/index.tsx"],"sourcesContent":["import { Show, createComponent, createEffect, createSignal, mergeProps, untrack } from 'solid-js';\nimport { isFunction, setClipboard } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { style } from './style';\nimport prismCss from '../prism/css';\nimport '../prism/prism.js';\nimport theme from '../theme';\nimport type { CustomElement } from '..';\n\nexport interface CodeProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** 内容 */\n  code?: string;\n  /** 语言 */\n  lang?: string;\n  /** 显示代码行号 */\n  lineNumber?: boolean;\n  /** 支持编辑 */\n  edit?: boolean;\n  /** 开启代码块工具条 */\n  toolbar?: boolean;\n  /** 编辑修改时的回调 */\n  onChange?: (code: string) => void;\n  children?: JSX.Element;\n}\n\nexport type CodeElement = CustomElement<CodeProps>;\n\nfunction Code(props: CodeProps) {\n  const { baseStyle } = theme;\n  let codeEl: HTMLPreElement;\n  const [code, setCode] = createSignal<string>('');\n  const [hei, setHei] = createSignal(20);\n\n  function copy() {\n    setClipboard(untrack(code), codeEl);\n  }\n  function pre() {\n    return (\n      <pre\n        class={cx(\n          `language-${props.lang}`,\n          props.lineNumber && 'line-numbers',\n          !props.toolbar && 'not-toolbar',\n          !props.edit && props.class,\n        )}\n      >\n        <Show when={props.toolbar}>\n          <div class=\"toolbar\" data-lang={props.lang?.split(' ')[0]}>\n            <button class=\"toolbar-copy\" onClick={copy} />\n          </div>\n        </Show>\n        <code ref={codeEl} class={`language-${props.lang}`} />\n      </pre>\n    );\n  }\n  function change({ target }: { target: HTMLTextAreaElement }) {\n    const c = `${target.value}${/\\n$/.test(target.value) ? '\\u200b' : ''}`;\n\n    setCode(c);\n    if (isFunction(props.onChange)) {\n      props.onChange(c);\n    }\n  }\n  function update(e: { data: string }) {\n    codeEl.innerHTML = e.data;\n    setHei(codeEl.getBoundingClientRect().height - (props.toolbar ? 40 : 16));\n  }\n  function postMessage(opt: { lang?: string; code?: string }) {\n    if (!opt.code) return;\n    const _lang = opt.lang || 'markup';\n\n    if (/^diff-([\\w-]+)/i.test(_lang)) {\n      window.Prism.languages[_lang] = window.Prism.languages.diff;\n    }\n    update({\n      data: window.Prism.highlight(opt.code, window.Prism.languages[_lang], _lang),\n    });\n  }\n\n  // const work = new Worker(new URL(\"./worker.ts\", import.meta.url), {\n  //   name: \"wastedTime\",\n  //   /* webpackEntryOptions: { filename: \"workers/[name].js\" } */\n  // });\n  // work.addEventListener('message', update);\n\n  // work.postMessage({\n  //   lang: props.lang,\n  //   code: code(),\n  // });\n  // onCleanup(() => {\n  //   work.terminate();\n  // });\n  createEffect(() => {\n    if (props.code) {\n      const _code = props.code.replace(/^\\n/, '');\n\n      try {\n        setCode(decodeURIComponent(_code));\n      } catch (error) {\n        setCode(_code);\n      }\n    } else {\n      setCode('');\n    }\n  });\n  createEffect(() => {\n    postMessage({\n      lang: props.lang,\n      code: code(),\n    });\n  });\n\n  return (\n    <>\n      <style>\n        {baseStyle()}\n        {prismCss()}\n        {style}\n        {css(props.css)}\n      </style>\n      <Show when={props.edit} fallback={pre()}>\n        <div class={cx('n-editor', props.class)}>\n          <textarea\n            value={code()}\n            class={cx(props.lineNumber && 'line-numbers', !props.toolbar && 'not-toolbar')}\n            style={{ height: `${hei()}px` }}\n            onInput={change}\n          />\n          {pre()}\n        </div>\n      </Show>\n    </>\n  );\n}\n\ncustomElement<CodeProps>(\n  'n-code',\n  {\n    class: void 0,\n    code: void 0,\n    lang: void 0,\n    children: void 0,\n    edit: void 0,\n    toolbar: void 0,\n    css: void 0,\n    lineNumber: void 0,\n    onChange: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        code: el.textContent,\n        css: el.css,\n        onChange(val: string) {\n          el.dispatchEvent(\n            new CustomEvent('change', {\n              detail: val,\n            }),\n          );\n        },\n      },\n      _,\n    );\n\n    createEffect(() => {\n      el.replaceChildren();\n      el.removeAttribute('css');\n    });\n\n    return createComponent(Code, props);\n  },\n);\nexport default Code;\n"],"names":["Code","props","codeEl","baseStyle","theme","code","setCode","createSignal","hei","setHei","copy","setClipboard","untrack","pre","Show","toolbar","lang","split","cx","lineNumber","edit","class","change","target","c","value","test","isFunction","onChange","createEffect","_code","replace","decodeURIComponent","error","postMessage","opt","e","_lang","window","Prism","languages","diff","data","highlight","innerHTML","getBoundingClientRect","height","prismCss","style","css","customElement","children","_","el","element","mergeProps","textContent","val","dispatchEvent","CustomEvent","detail","replaceChildren","removeAttribute","createComponent"],"mappings":"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"}
+{"version":3,"sources":["../../components/code/index.tsx"],"sourcesContent":["import { Show, createComponent, createEffect, createSignal, mergeProps, untrack } from 'solid-js';\nimport { isFunction, setClipboard } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { style } from './style';\nimport prismCss from '../prism/css';\nimport '../prism/prism.js';\nimport theme from '../theme';\nimport type { CustomElement } from '..';\n\nexport interface CodeProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** 内容 */\n  code?: string;\n  /** 语言 */\n  lang?: string;\n  /** 显示代码行号 */\n  lineNumber?: boolean;\n  /** 支持编辑 */\n  edit?: boolean;\n  /** 开启代码块工具条 */\n  toolbar?: boolean;\n  /** 编辑修改时的回调 */\n  onChange?: (code: string) => void;\n  children?: JSX.Element;\n}\n\nexport type CodeElement = CustomElement<CodeProps>;\n\nfunction Code(props: CodeProps) {\n  const { baseStyle } = theme;\n  let codeEl: HTMLPreElement;\n  const [code, setCode] = createSignal<string>('');\n  const [hei, setHei] = createSignal(20);\n\n  function copy() {\n    setClipboard(untrack(code), codeEl);\n  }\n  function pre() {\n    return (\n      <pre\n        class={cx(\n          `language-${props.lang}`,\n          props.lineNumber && 'line-numbers',\n          !props.toolbar && 'not-toolbar',\n          !props.edit && props.class,\n        )}\n      >\n        <Show when={props.toolbar}>\n          <div class=\"toolbar\" data-lang={props.lang?.split(' ')[0]}>\n            <button class=\"toolbar-copy\" onClick={copy} />\n          </div>\n        </Show>\n        <code ref={codeEl} class={`language-${props.lang}`} />\n      </pre>\n    );\n  }\n  function change({ target }: { target: HTMLTextAreaElement }) {\n    const c = `${target.value}${/\\n$/.test(target.value) ? '\\u200b' : ''}`;\n\n    setCode(c);\n    if (isFunction(props.onChange)) {\n      props.onChange(c);\n    }\n  }\n  function update(e: { data: string }) {\n    codeEl.innerHTML = e.data;\n    setHei(codeEl.getBoundingClientRect().height - (props.toolbar ? 40 : 16));\n  }\n  function postMessage(opt: { lang?: string; code?: string }) {\n    if (!opt.code) return;\n    const _lang = opt.lang || 'markup';\n\n    if (/^diff-([\\w-]+)/i.test(_lang)) {\n      window.Prism.languages[_lang] = window.Prism.languages.diff;\n    }\n    const language = window.Prism.languages[_lang] || window.Prism.languages.markup;\n\n    update({\n      data: window.Prism.highlight(opt.code, language, _lang),\n    });\n  }\n\n  // const work = new Worker(new URL(\"./worker.ts\", import.meta.url), {\n  //   name: \"wastedTime\",\n  //   /* webpackEntryOptions: { filename: \"workers/[name].js\" } */\n  // });\n  // work.addEventListener('message', update);\n\n  // work.postMessage({\n  //   lang: props.lang,\n  //   code: code(),\n  // });\n  // onCleanup(() => {\n  //   work.terminate();\n  // });\n  createEffect(() => {\n    if (props.code) {\n      const _code = props.code.replace(/^\\n/, '');\n\n      try {\n        setCode(decodeURIComponent(_code));\n      } catch (error) {\n        setCode(_code);\n      }\n    } else {\n      setCode('');\n    }\n  });\n  createEffect(() => {\n    postMessage({\n      lang: props.lang,\n      code: code(),\n    });\n  });\n\n  return (\n    <>\n      <style>\n        {baseStyle()}\n        {prismCss()}\n        {style}\n        {css(props.css)}\n      </style>\n      <Show when={props.edit} fallback={pre()}>\n        <div class={cx('n-editor', props.class)}>\n          <textarea\n            value={code()}\n            class={cx(props.lineNumber && 'line-numbers', !props.toolbar && 'not-toolbar')}\n            style={{ height: `${hei()}px` }}\n            onInput={change}\n          />\n          {pre()}\n        </div>\n      </Show>\n    </>\n  );\n}\n\ncustomElement<CodeProps>(\n  'n-code',\n  {\n    class: void 0,\n    code: void 0,\n    lang: void 0,\n    children: void 0,\n    edit: void 0,\n    toolbar: void 0,\n    css: void 0,\n    lineNumber: void 0,\n    onChange: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        code: el.textContent,\n        css: el.css,\n        onChange(val: string) {\n          el.dispatchEvent(\n            new CustomEvent('change', {\n              detail: val,\n            }),\n          );\n        },\n      },\n      _,\n    );\n\n    createEffect(() => {\n      el.replaceChildren();\n      el.removeAttribute('css');\n    });\n\n    return createComponent(Code, props);\n  },\n);\nexport default Code;\n"],"names":["Code","props","codeEl","baseStyle","theme","code","setCode","createSignal","hei","setHei","copy","setClipboard","untrack","pre","Show","toolbar","lang","split","cx","lineNumber","edit","class","change","target","c","value","test","isFunction","onChange","createEffect","_code","replace","decodeURIComponent","error","postMessage","opt","e","_lang","window","Prism","languages","diff","language","markup","data","highlight","innerHTML","getBoundingClientRect","height","prismCss","style","css","customElement","children","_","el","element","mergeProps","textContent","val","dispatchEvent","CustomEvent","detail","replaceChildren","removeAttribute","createComponent"],"rangeMappings":"","mappings":"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"}

package/lib/code/style.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/code/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n  .not-toolbar code {\n    padding-block-start: 8px !important;\n\n    .line-numbers-rows {\n      padding-block-start: 8px !important;\n    }\n  }\n\n  .n-editor {\n    --font-size: 13px;\n\n    margin-block-start: 0;\n    position: relative;\n\n    textarea {\n      position: absolute;\n      z-index: 1;\n      margin: 0;\n      border: none;\n      padding: 0;\n      font-size: var(--font-size);\n      white-space: inherit;\n      color: transparent;\n      background-color: transparent;\n      outline: none;\n      resize: none;\n      box-sizing: border-box;\n      inset-block: 32px 8px;\n      inset-inline: 16px 16px;\n      min-block-size: 64px;\n      caret-color: var(--text-color);\n      block-size: fit-content;\n      line-height: inherit !important;\n\n      &.line-numbers {\n        inset-inline: 54px 10px;\n      }\n\n      &.not-toolbar {\n        inset-block-start: 8px;\n        min-block-size: 20px;\n      }\n    }\n\n    pre {\n      margin-block-start: 0 !important;\n      pointer-events: none;\n      inline-size: 100%;\n      block-size: 100%;\n      min-block-size: 65px;\n      line-height: inherit !important;\n\n      &.not-toolbar {\n        min-block-size: 36px;\n      }\n\n      .toolbar {\n        pointer-events: all;\n      }\n\n      code {\n        line-height: inherit !important;\n      }\n    }\n  }\n`;\n"],"names":["style","css"],"mappings":"kGAEaA,6CAAAA,qBAFO,eAEPA,EAAQC,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkEzB,CAAC"}
+{"version":3,"sources":["../../components/code/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n  .not-toolbar code {\n    padding-block-start: 8px !important;\n\n    .line-numbers-rows {\n      padding-block-start: 8px !important;\n    }\n  }\n\n  .n-editor {\n    --font-size: 13px;\n\n    margin-block-start: 0;\n    position: relative;\n\n    textarea {\n      position: absolute;\n      z-index: 1;\n      margin: 0;\n      border: none;\n      padding: 0;\n      font-size: var(--font-size);\n      white-space: inherit;\n      color: transparent;\n      background-color: transparent;\n      outline: none;\n      resize: none;\n      box-sizing: border-box;\n      inset-block: 32px 8px;\n      inset-inline: 16px 16px;\n      min-block-size: 64px;\n      caret-color: var(--text-color);\n      block-size: fit-content;\n      line-height: inherit !important;\n\n      &.line-numbers {\n        inset-inline: 54px 10px;\n      }\n\n      &.not-toolbar {\n        inset-block-start: 8px;\n        min-block-size: 20px;\n      }\n    }\n\n    pre {\n      margin-block-start: 0 !important;\n      pointer-events: none;\n      inline-size: 100%;\n      block-size: 100%;\n      min-block-size: 65px;\n      line-height: inherit !important;\n\n      &.not-toolbar {\n        min-block-size: 36px;\n      }\n\n      .toolbar {\n        pointer-events: all;\n      }\n\n      code {\n        line-height: inherit !important;\n      }\n    }\n  }\n`;\n"],"names":["style","css"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"kGAEaA,6CAAAA,qBAFO,eAEPA,EAAQC,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkEzB,CAAC"}

package/lib/code/worker.js

@@ -1,2 +1,2 @@
-"use strict";self.Prism={disableWorkerMessageHandler:!0,languages:{},highlight:e=>e},self.importScripts(new URL("../prism/prism.js",require("url").pathToFileURL(__filename).toString()).toString()),self.addEventListener("message",function(e){let s;try{let{code:i,lang:l}=e.data;s=self.Prism.highlight&&self.Prism.languages?self.Prism.highlight(i,self.Prism.languages[l],l):i}catch(e){s=e}self.postMessage(s)},!1);
+"use strict";self.Prism={disableWorkerMessageHandler:!0,languages:{},highlight:e=>e},self.importScripts(new URL("../prism/prism.js",require("url").pathToFileURL(__filename).toString()).toString()),self.addEventListener("message",function(e){let s;try{let{code:i,lang:l}=e.data;self.Prism.highlight&&self.Prism.languages?s=self.Prism.highlight(i,self.Prism.languages[l],l):s=i}catch(e){s=e}self.postMessage(s)},!1);
 //# sourceMappingURL=worker.js.map

package/lib/code/worker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/code/worker.ts"],"sourcesContent":["self.Prism = {\n  disableWorkerMessageHandler: true,\n  languages: {},\n  highlight(code) {\n    return code;\n  },\n};\nself.importScripts(new URL('../prism/prism.js', import.meta.url).toString());\nself.addEventListener(\n  'message',\n  function (e) {\n    let result;\n\n    try {\n      const { code, lang } = e.data;\n\n      if (self.Prism.highlight && self.Prism.languages) {\n        result = self.Prism.highlight(code, self.Prism.languages[lang], lang);\n      } else {\n        result = code;\n      }\n    } catch (error) {\n      result = error;\n    }\n    self.postMessage(result); // 向主线程发送消息\n  },\n  false,\n);\n"],"names":["self","Prism","disableWorkerMessageHandler","languages","highlight","code","importScripts","URL","toString","addEventListener","e","result","lang","data","error","postMessage"],"mappings":"YAAAA,CAAAA,KAAKC,KAAK,CAAG,CACXC,4BAA6B,CAAA,EAC7BC,UAAW,CAAC,EACZC,UAAAA,AAAUC,GACDA,CAEX,EACAL,KAAKM,aAAa,CAAC,IAAIC,IAAI,oBAAqB,qDAAiBC,QAAQ,IACzER,KAAKS,gBAAgB,CACnB,UACA,SAAUC,CAAC,EACT,IAAIC,EAEJ,GAAI,CACF,GAAM,CAAEN,KAAAA,CAAI,CAAEO,KAAAA,CAAI,CAAE,CAAGF,EAAEG,IAAI,CAG3BF,EADEX,KAAKC,KAAK,CAACG,SAAS,EAAIJ,KAAKC,KAAK,CAACE,SAAS,CACrCH,KAAKC,KAAK,CAACG,SAAS,CAACC,EAAML,KAAKC,KAAK,CAACE,SAAS,CAACS,EAAK,CAAEA,GAEvDP,CAEb,CAAE,MAAOS,EAAO,CACdH,EAASG,CACX,CACAd,KAAKe,WAAW,CAACJ,EACnB,EACA,CAAA"}
+{"version":3,"sources":["../../components/code/worker.ts"],"sourcesContent":["self.Prism = {\n  disableWorkerMessageHandler: true,\n  languages: {},\n  highlight(code) {\n    return code;\n  },\n};\nself.importScripts(new URL('../prism/prism.js', import.meta.url).toString());\nself.addEventListener(\n  'message',\n  function (e) {\n    let result;\n\n    try {\n      const { code, lang } = e.data;\n\n      if (self.Prism.highlight && self.Prism.languages) {\n        result = self.Prism.highlight(code, self.Prism.languages[lang], lang);\n      } else {\n        result = code;\n      }\n    } catch (error) {\n      result = error;\n    }\n    self.postMessage(result); // 向主线程发送消息\n  },\n  false,\n);\n"],"names":["self","Prism","disableWorkerMessageHandler","languages","highlight","code","importScripts","URL","toString","addEventListener","e","result","lang","data","error","postMessage"],"rangeMappings":"","mappings":"YAAAA,CAAAA,KAAKC,KAAK,CAAG,CACXC,4BAA6B,CAAA,EAC7BC,UAAW,CAAC,EACZC,UAAAA,AAAUC,GACDA,CAEX,EACAL,KAAKM,aAAa,CAAC,IAAIC,IAAI,oBAAqB,qDAAiBC,QAAQ,IACzER,KAAKS,gBAAgB,CACnB,UACA,SAAUC,CAAC,EACT,IAAIC,EAEJ,GAAI,CACF,GAAM,CAAEN,KAAAA,CAAI,CAAEO,KAAAA,CAAI,CAAE,CAAGF,EAAEG,IAAI,AAEzBb,CAAAA,KAAKC,KAAK,CAACG,SAAS,EAAIJ,KAAKC,KAAK,CAACE,SAAS,CAC9CQ,EAASX,KAAKC,KAAK,CAACG,SAAS,CAACC,EAAML,KAAKC,KAAK,CAACE,SAAS,CAACS,EAAK,CAAEA,GAEhED,EAASN,CAEb,CAAE,MAAOS,EAAO,CACdH,EAASG,CACX,CACAd,KAAKe,WAAW,CAACJ,EACnB,EACA,CAAA"}

package/lib/color-palette/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/color-palette/index.tsx"],"sourcesContent":["import {\n  For,\n  Index,\n  Show,\n  createComponent,\n  createEffect,\n  createMemo,\n  createSignal,\n  mergeProps,\n  onCleanup,\n  onMount,\n  untrack,\n} from 'solid-js';\nimport {\n  type ColorParse,\n  type ColorType,\n  type HSVA,\n  colorParse,\n  isFunction,\n  passiveSupported,\n  setClipboard,\n  throttle,\n} from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { style, switchCss } from './style';\nimport '../dropdown';\nimport '../input';\nimport '../input-number';\nimport theme from '../theme';\nimport type { CustomElement, InputNumberProps } from '..';\n\nexport interface ColorPaletteProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** 颜色值 */\n  value?: string;\n  /** 默认值\n   * @default '#5794ff'\n   */\n  defaultValue?: string;\n  /** 变更时触发的方法 */\n  onChange?: (color: string) => void;\n}\nexport type ColorPaletteElement = CustomElement<ColorPaletteProps>;\n\nfunction ColorPalette(_: ColorPaletteProps) {\n  const { baseStyle } = theme;\n  const props = mergeProps({ defaultValue: '#5794ff' }, _);\n  let picker: HTMLDivElement | undefined;\n  const types = [\n    { label: 'RGBA', value: 'rgba', handleClosed: false },\n    { label: 'HSLA', value: 'hsla', handleClosed: false },\n    { label: 'HEXA', value: 'hexa', handleClosed: false },\n  ];\n  const material = [\n    '#f44336',\n    '#E91E63',\n    '#9C27B0',\n    '#673AB7',\n    '#3F51B5',\n    '#2196F3',\n    '#00BCD4',\n    '#009688',\n    '#4CAF50',\n    '#CDDC39',\n    '#FF9800',\n    '#795548',\n    '#607D8B',\n  ];\n  const inputProps: InputNumberProps = {\n    class: 'input',\n    size: 'small',\n    css: '.input{text-align:center;font-size:12px;}',\n  };\n  const [hsva, setHsva] = createSignal<ColorParse<HSVA>>(\n    // eslint-disable-next-line solid/reactivity\n    colorParse(props.value || props.defaultValue),\n  );\n  const [drag, setDrag] = createSignal(false);\n\n  type HsvaToColorVoid = 'toHexa' | 'toRgba' | 'toHsla' | 'toCmyk' | 'toHsva';\n\n  function formatterOpacity(v?: number | string) {\n    return v ? Number(((v as number) * 100).toFixed()) : v;\n  }\n  function parseOpacity(v?: string | number) {\n    let _val = v;\n\n    if (typeof v === 'string') {\n      _val = v.replace(/[^\\d]/g, '');\n    }\n    return (_val as number) / 100;\n  }\n  function capFirst(str: string) {\n    return `to${str[0].toUpperCase() + str.slice(1)}` as HsvaToColorVoid;\n  }\n  const color = createMemo(() => {\n    const s = hsva();\n    const c = s[capFirst(s.type)]();\n\n    if (isFunction(props.onChange) && c.toString() !== props.value) {\n      props.onChange(c.toString());\n    }\n    return c;\n  });\n\n  function setColor(c = props.defaultValue) {\n    if (untrack(color).toString() !== c) {\n      setHsva(colorParse(c as string));\n    }\n  }\n  function handleHexa(e: CustomEvent) {\n    if (e.target) {\n      (e.target as HTMLInputElement).value = e.detail;\n    }\n  }\n  function handleHexaBlur(e: FocusEvent & { target: { value: string } }) {\n    if (e.target?.value) {\n      setColor(e.target.value);\n    }\n  }\n  function handleHexaEnter(e: KeyboardEvent & { target: { value: string } }) {\n    if (e.key === 'Enter' && typeof e.target?.value === 'string') {\n      setColor(e.target.value);\n    }\n  }\n  function changeColor(ev: MouseEvent) {\n    if (picker) {\n      const { x, y, width, height } = picker.getBoundingClientRect();\n      const prev = untrack(hsva);\n      const next = prev.value;\n\n      next[1] = Math.floor(Math.min(Math.max(0, ((ev.clientX - x) / width) * 100), 100));\n      next[2] = Math.floor(100 - Math.min(Math.max(0, ((ev.clientY - y) / height) * 100), 100));\n\n      setHsva({ ...prev, value: next });\n    }\n  }\n\n  function handleChange(i: number, v?: number, t?: ColorType) {\n    if (typeof v === 'number') {\n      const prev = untrack(hsva);\n      const changeHsv = i === 3 || t === 'hsva';\n      const next = changeHsv ? prev.value : (untrack(color) as HSVA);\n\n      next[i] = v || 0;\n      if (changeHsv) {\n        setHsva({\n          ...prev,\n          value: next,\n        });\n      } else {\n        setHsva(colorParse(next.toString()));\n      }\n    }\n  }\n  function mouseDown(e: MouseEvent) {\n    setDrag(true);\n    changeColor(e);\n  }\n  function mouseUp() {\n    setDrag(false);\n  }\n  function handleSwitch(e: CustomEvent) {\n    setHsva((prev) => ({\n      ...prev,\n      type: e.detail[0],\n    }));\n  }\n\n  function copy(e: MouseEvent) {\n    setClipboard(untrack(color).toString(), e.target as HTMLElement);\n  }\n  async function eyeDropper() {\n    if (window.EyeDropper) {\n      const res = await new window.EyeDropper().open();\n\n      if (res.sRGBHex) {\n        setColor(res.sRGBHex);\n      }\n      return;\n    }\n  }\n  const colorVar = createMemo(() => {\n    const h = hsva(),\n      value = h.value;\n\n    return `.palette {--c:${h.toRgbaString()};--h:${value[0]};--s:${value[1]};--v:${value[2]};--a:${\n      value[3]\n    };}`;\n  });\n\n  createEffect(() => {\n    throttle(setColor, 8)(props.value);\n  });\n\n  createEffect(() => {\n    if (drag()) {\n      document.body.addEventListener('mousemove', changeColor, {\n        passive: passiveSupported,\n      });\n    }\n    onCleanup(() => {\n      document.body.removeEventListener('mousemove', changeColor, false);\n    });\n  });\n  onMount(() => {\n    document.body.addEventListener('mouseup', mouseUp, {\n      passive: passiveSupported,\n    });\n  });\n  onCleanup(() => {\n    document.body.removeEventListener('mouseup', mouseUp, false);\n  });\n\n  return (\n    <>\n      <style>\n        {baseStyle()}\n        {style}\n        {colorVar()}\n        {css(props.css)}\n      </style>\n      <div class={cx('palette', props.class)}>\n        <div ref={picker} class=\"picker\" onMouseDown={mouseDown} />\n        <div class=\"chooser\">\n          <div class=\"range\">\n            <input\n              class=\"slider hue\"\n              min=\"0\"\n              max=\"360\"\n              type=\"range\"\n              value={hsva().value[0]}\n              onInput={(e) => handleChange(0, Number(e.target.value), 'hsva')}\n            />\n            <input\n              class=\"slider opacity\"\n              min=\"0\"\n              max=\"1\"\n              step=\"0.01\"\n              type=\"range\"\n              value={hsva().value[3]}\n              onInput={(e) => handleChange(3, Number(e.target.value))}\n            />\n          </div>\n          <div class=\"preview\" onClick={copy} />\n        </div>\n        <div class=\"form\">\n          <Show\n            when={hsva().type === 'hexa'}\n            fallback={\n              <>\n                <Index each={color()}>\n                  {(n, i) => {\n                    const inp = Object.assign(\n                      {},\n                      inputProps,\n                      i === 3 && {\n                        step: 0.01,\n                        formatter: formatterOpacity,\n                        parse: parseOpacity,\n                      },\n                    );\n\n                    return (\n                      <n-input-number\n                        {...inp}\n                        value={n() as number}\n                        max={\n                          (\n                            untrack(color) as HSVA & {\n                              max: [360, 100, 100, 1];\n                            }\n                          ).max[i]\n                        }\n                        min={0}\n                        onChange={(e) => {\n                          handleChange(i, e.detail);\n                        }}\n                      />\n                    );\n                  }}\n                </Index>\n              </>\n            }\n          >\n            <n-input\n              {...inputProps}\n              value={hsva().toHexaString()}\n              onChange={handleHexa}\n              onBlur={handleHexaBlur}\n              onKeyUp={handleHexaEnter}\n            />\n          </Show>\n          <n-dropdown\n            css={switchCss}\n            value={hsva().type}\n            items={types}\n            placement=\"right\"\n            trigger=\"click\"\n            onChange={handleSwitch}\n          >\n            <span class=\"switch\">{hsva().type}</span>\n          </n-dropdown>\n        </div>\n        <div class=\"color\">\n          <Show\n            when={window.EyeDropper}\n            fallback={\n              <i\n                style={{ '--c': 'rgba(168,16,16,0.15)' }}\n                onClick={setColor.bind(null, 'rgba(168,16,16,0.15)')}\n              />\n            }\n          >\n            <i class=\"eye-dropper\" style={{ '--c': 'transparent' }} onClick={eyeDropper} />\n          </Show>\n          <For each={material}>\n            {(c) => <i style={{ '--c': c }} onClick={setColor.bind(null, c)} />}\n          </For>\n        </div>\n      </div>\n    </>\n  );\n}\n\nexport const defaultColorPaletteProps = {\n  class: void 0,\n  style: void 0,\n  css: void 0,\n  value: void 0,\n  defaultValue: void 0,\n  onChange: void 0,\n};\n\ncustomElement<ColorPaletteProps>('n-color-palette', defaultColorPaletteProps, (_, opts) => {\n  const el = opts.element;\n  const props = mergeProps(\n    {\n      onChange(val?: string) {\n        el.dispatchEvent(\n          new CustomEvent('change', {\n            detail: val,\n          }),\n        );\n      },\n    },\n    _,\n  );\n\n  return createComponent(ColorPalette, props);\n});\n\nexport default ColorPalette;\n"],"names":["defaultColorPaletteProps","ColorPalette","_","picker","baseStyle","theme","props","mergeProps","defaultValue","types","label","value","handleClosed","material","inputProps","class","size","css","hsva","setHsva","createSignal","colorParse","drag","setDrag","formatterOpacity","v","Number","toFixed","parseOpacity","_val","replace","color","createMemo","str","s","c","type","toUpperCase","slice","isFunction","onChange","toString","setColor","untrack","handleHexa","e","target","detail","handleHexaBlur","handleHexaEnter","key","changeColor","ev","x","y","width","height","getBoundingClientRect","prev","next","Math","floor","min","max","clientX","clientY","handleChange","i","t","changeHsv","mouseDown","mouseUp","handleSwitch","copy","setClipboard","eyeDropper","window","EyeDropper","res","open","sRGBHex","colorVar","h","toRgbaString","createEffect","throttle","document","body","addEventListener","passive","passiveSupported","onCleanup","removeEventListener","onMount","style","Show","Index","n","inp","Object","assign","step","formatter","parse","toHexaString","switchCss","bind","For","cx","customElement","opts","el","element","val","dispatchEvent","CustomEvent","createComponent"],"mappings":"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"}
+{"version":3,"sources":["../../components/color-palette/index.tsx"],"sourcesContent":["import {\n  For,\n  Index,\n  Show,\n  createComponent,\n  createEffect,\n  createMemo,\n  createSignal,\n  mergeProps,\n  onCleanup,\n  onMount,\n  untrack,\n} from 'solid-js';\nimport {\n  type ColorParse,\n  type ColorType,\n  type HSVA,\n  colorParse,\n  isFunction,\n  passiveSupported,\n  setClipboard,\n  throttle,\n} from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { style, switchCss } from './style';\nimport '../dropdown';\nimport '../input';\nimport '../input-number';\nimport theme from '../theme';\nimport type { CustomElement, InputNumberProps } from '..';\n\nexport interface ColorPaletteProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** 颜色值 */\n  value?: string;\n  /** 默认值\n   * @default '#5794ff'\n   */\n  defaultValue?: string;\n  /** 变更时触发的方法 */\n  onChange?: (color: string) => void;\n}\nexport type ColorPaletteElement = CustomElement<ColorPaletteProps>;\n\nfunction ColorPalette(_: ColorPaletteProps) {\n  const { baseStyle } = theme;\n  const props = mergeProps({ defaultValue: '#5794ff' }, _);\n  let picker: HTMLDivElement | undefined;\n  const types = [\n    { label: 'RGBA', value: 'rgba', handleClosed: false },\n    { label: 'HSLA', value: 'hsla', handleClosed: false },\n    { label: 'HEXA', value: 'hexa', handleClosed: false },\n  ];\n  const material = [\n    '#f44336',\n    '#E91E63',\n    '#9C27B0',\n    '#673AB7',\n    '#3F51B5',\n    '#2196F3',\n    '#00BCD4',\n    '#009688',\n    '#4CAF50',\n    '#CDDC39',\n    '#FF9800',\n    '#795548',\n    '#607D8B',\n  ];\n  const inputProps: InputNumberProps = {\n    class: 'input',\n    size: 'small',\n    css: '.input{text-align:center;font-size:12px;}',\n  };\n  const [hsva, setHsva] = createSignal<ColorParse<HSVA>>(\n    // eslint-disable-next-line solid/reactivity\n    colorParse(props.value || props.defaultValue),\n  );\n  const [drag, setDrag] = createSignal(false);\n\n  type HsvaToColorVoid = 'toHexa' | 'toRgba' | 'toHsla' | 'toCmyk' | 'toHsva';\n\n  function formatterOpacity(v?: number | string) {\n    return v ? Number(((v as number) * 100).toFixed()) : v;\n  }\n  function parseOpacity(v?: string | number) {\n    let _val = v;\n\n    if (typeof v === 'string') {\n      _val = v.replace(/[^\\d]/g, '');\n    }\n    return (_val as number) / 100;\n  }\n  function capFirst(str: string) {\n    return `to${str[0].toUpperCase() + str.slice(1)}` as HsvaToColorVoid;\n  }\n  const color = createMemo(() => {\n    const s = hsva();\n    const c = s[capFirst(s.type)]();\n\n    if (isFunction(props.onChange) && c.toString() !== props.value) {\n      props.onChange(c.toString());\n    }\n    return c;\n  });\n\n  function setColor(c = props.defaultValue) {\n    if (untrack(color).toString() !== c) {\n      setHsva(colorParse(c as string));\n    }\n  }\n  function handleHexa(e: CustomEvent) {\n    if (e.target) {\n      (e.target as HTMLInputElement).value = e.detail;\n    }\n  }\n  function handleHexaBlur(e: FocusEvent & { target: { value: string } }) {\n    if (e.target?.value) {\n      setColor(e.target.value);\n    }\n  }\n  function handleHexaEnter(e: KeyboardEvent & { target: { value: string } }) {\n    if (e.key === 'Enter' && typeof e.target?.value === 'string') {\n      setColor(e.target.value);\n    }\n  }\n  function changeColor(ev: MouseEvent) {\n    if (picker) {\n      const { x, y, width, height } = picker.getBoundingClientRect();\n      const prev = untrack(hsva);\n      const next = prev.value;\n\n      next[1] = Math.floor(Math.min(Math.max(0, ((ev.clientX - x) / width) * 100), 100));\n      next[2] = Math.floor(100 - Math.min(Math.max(0, ((ev.clientY - y) / height) * 100), 100));\n\n      setHsva({ ...prev, value: next });\n    }\n  }\n\n  function handleChange(i: number, v?: number, t?: ColorType) {\n    if (typeof v === 'number') {\n      const prev = untrack(hsva);\n      const changeHsv = i === 3 || t === 'hsva';\n      const next = changeHsv ? prev.value : (untrack(color) as HSVA);\n\n      next[i] = v || 0;\n      if (changeHsv) {\n        setHsva({\n          ...prev,\n          value: next,\n        });\n      } else {\n        setHsva(colorParse(next.toString()));\n      }\n    }\n  }\n  function mouseDown(e: MouseEvent) {\n    setDrag(true);\n    changeColor(e);\n  }\n  function mouseUp() {\n    setDrag(false);\n  }\n  function handleSwitch(e: CustomEvent) {\n    setHsva((prev) => ({\n      ...prev,\n      type: e.detail[0],\n    }));\n  }\n\n  function copy(e: MouseEvent) {\n    setClipboard(untrack(color).toString(), e.target as HTMLElement);\n  }\n  async function eyeDropper() {\n    if (window.EyeDropper) {\n      const res = await new window.EyeDropper().open();\n\n      if (res.sRGBHex) {\n        setColor(res.sRGBHex);\n      }\n      return;\n    }\n  }\n  const colorVar = createMemo(() => {\n    const h = hsva(),\n      value = h.value;\n\n    return `.palette {--c:${h.toRgbaString()};--h:${value[0]};--s:${value[1]};--v:${value[2]};--a:${\n      value[3]\n    };}`;\n  });\n\n  createEffect(() => {\n    throttle(setColor, 8)(props.value);\n  });\n\n  createEffect(() => {\n    if (drag()) {\n      document.body.addEventListener('mousemove', changeColor, {\n        passive: passiveSupported,\n      });\n    }\n    onCleanup(() => {\n      document.body.removeEventListener('mousemove', changeColor, false);\n    });\n  });\n  onMount(() => {\n    document.body.addEventListener('mouseup', mouseUp, {\n      passive: passiveSupported,\n    });\n  });\n  onCleanup(() => {\n    document.body.removeEventListener('mouseup', mouseUp, false);\n  });\n\n  return (\n    <>\n      <style>\n        {baseStyle()}\n        {style}\n        {colorVar()}\n        {css(props.css)}\n      </style>\n      <div class={cx('palette', props.class)}>\n        <div ref={picker} class=\"picker\" onMouseDown={mouseDown} />\n        <div class=\"chooser\">\n          <div class=\"range\">\n            <input\n              class=\"slider hue\"\n              min=\"0\"\n              max=\"360\"\n              type=\"range\"\n              value={hsva().value[0]}\n              onInput={(e) => handleChange(0, Number(e.target.value), 'hsva')}\n            />\n            <input\n              class=\"slider opacity\"\n              min=\"0\"\n              max=\"1\"\n              step=\"0.01\"\n              type=\"range\"\n              value={hsva().value[3]}\n              onInput={(e) => handleChange(3, Number(e.target.value))}\n            />\n          </div>\n          <div class=\"preview\" onClick={copy} />\n        </div>\n        <div class=\"form\">\n          <Show\n            when={hsva().type === 'hexa'}\n            fallback={\n              <>\n                <Index each={color()}>\n                  {(n, i) => {\n                    const inp = Object.assign(\n                      {},\n                      inputProps,\n                      i === 3 && {\n                        step: 0.01,\n                        formatter: formatterOpacity,\n                        parse: parseOpacity,\n                      },\n                    );\n\n                    return (\n                      <n-input-number\n                        {...inp}\n                        value={n() as number}\n                        max={\n                          (\n                            untrack(color) as HSVA & {\n                              max: [360, 100, 100, 1];\n                            }\n                          ).max[i]\n                        }\n                        min={0}\n                        onChange={(e) => {\n                          handleChange(i, e.detail);\n                        }}\n                      />\n                    );\n                  }}\n                </Index>\n              </>\n            }\n          >\n            <n-input\n              {...inputProps}\n              value={hsva().toHexaString()}\n              onChange={handleHexa}\n              onBlur={handleHexaBlur}\n              onKeyUp={handleHexaEnter}\n            />\n          </Show>\n          <n-dropdown\n            css={switchCss}\n            value={hsva().type}\n            items={types}\n            placement=\"right\"\n            trigger=\"click\"\n            onChange={handleSwitch}\n          >\n            <span class=\"switch\">{hsva().type}</span>\n          </n-dropdown>\n        </div>\n        <div class=\"color\">\n          <Show\n            when={window.EyeDropper}\n            fallback={\n              <i\n                style={{ '--c': 'rgba(168,16,16,0.15)' }}\n                onClick={setColor.bind(null, 'rgba(168,16,16,0.15)')}\n              />\n            }\n          >\n            <i class=\"eye-dropper\" style={{ '--c': 'transparent' }} onClick={eyeDropper} />\n          </Show>\n          <For each={material}>\n            {(c) => <i style={{ '--c': c }} onClick={setColor.bind(null, c)} />}\n          </For>\n        </div>\n      </div>\n    </>\n  );\n}\n\nexport const defaultColorPaletteProps = {\n  class: void 0,\n  style: void 0,\n  css: void 0,\n  value: void 0,\n  defaultValue: void 0,\n  onChange: void 0,\n};\n\ncustomElement<ColorPaletteProps>('n-color-palette', defaultColorPaletteProps, (_, opts) => {\n  const el = opts.element;\n  const props = mergeProps(\n    {\n      onChange(val?: string) {\n        el.dispatchEvent(\n          new CustomEvent('change', {\n            detail: val,\n          }),\n        );\n      },\n    },\n    _,\n  );\n\n  return createComponent(ColorPalette, props);\n});\n\nexport default ColorPalette;\n"],"names":["defaultColorPaletteProps","ColorPalette","_","picker","baseStyle","theme","props","mergeProps","defaultValue","types","label","value","handleClosed","material","inputProps","class","size","css","hsva","setHsva","createSignal","colorParse","drag","setDrag","formatterOpacity","v","Number","toFixed","parseOpacity","_val","replace","color","createMemo","str","s","c","type","toUpperCase","slice","isFunction","onChange","toString","setColor","untrack","handleHexa","e","target","detail","handleHexaBlur","handleHexaEnter","key","changeColor","ev","x","y","width","height","getBoundingClientRect","prev","next","Math","floor","min","max","clientX","clientY","handleChange","i","t","changeHsv","mouseDown","mouseUp","handleSwitch","copy","setClipboard","eyeDropper","window","EyeDropper","res","open","sRGBHex","colorVar","h","toRgbaString","createEffect","throttle","document","body","addEventListener","passive","passiveSupported","onCleanup","removeEventListener","onMount","style","Show","Index","n","inp","Object","assign","step","formatter","parse","toHexaString","switchCss","bind","For","cx","customElement","opts","el","element","val","dispatchEvent","CustomEvent","createComponent"],"rangeMappings":"","mappings":"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"}

package/lib/color-palette/style.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/color-palette/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n  .palette {\n    --alpha-gradient: repeating-conic-gradient(#eee 0 25%, transparent 0 50%) 0 / 10px 10px;\n\n    inline-size: 100%;\n    box-sizing: border-box;\n    user-select: none;\n  }\n\n  .preview,\n  .preview::after,\n  .color i,\n  .color i::before {\n    border-radius: var(--border-radius);\n  }\n\n  .preview {\n    margin-inline-start: 6px;\n    inline-size: 46px;\n    min-block-size: 26px;\n    line-height: 1;\n    font-family: sans-serif;\n    text-align: center;\n    color: #fff;\n    cursor: pointer;\n    background: var(--alpha-gradient);\n\n    &::after {\n      display: block;\n      inline-size: 100%;\n      block-size: 100%;\n      background-color: var(--c);\n      box-shadow:\n        rgb(0 0 0 / 10%) 0 0 0 1px inset,\n        rgb(0 0 0 / 10%) 0 0 4px inset;\n      text-shadow: var(--text-shadow);\n      content: '';\n    }\n\n    &:hover::after {\n      font-size: 24px;\n      content: '⎘';\n    }\n\n    &[data-copy='success']::after {\n      font-size: 16px;\n      line-height: 26px;\n      content: '✓';\n    }\n  }\n\n  .form {\n    display: flex;\n    gap: 6px;\n  }\n\n  .input {\n    flex: 1;\n  }\n\n  .picker {\n    position: relative;\n    border-radius: 4px;\n    block-size: 150px;\n    background:\n      linear-gradient(to top, hsl(0deg 0% 0% / calc(var(--a))), transparent) 0 / 100%,\n      linear-gradient(\n          to left,\n          hsl(calc(var(--h)) 100% 50% / calc(var(--a))),\n          hsl(0deg 0% 100% / calc(var(--a)))\n        )\n        0 / 100%,\n      var(--alpha-gradient);\n    opacity: 1;\n    transition: opacity var(--transition-duration);\n    user-select: none;\n    cursor: crosshair;\n\n    &:active {\n      opacity: 0.99;\n    }\n\n    &::after {\n      position: absolute;\n      inset-block-start: calc((100 - var(--v)) * 1%);\n      inset-inline-start: calc(var(--s) * 1%);\n      border-radius: 3px;\n      inline-size: 6px;\n      block-size: 6px;\n      pointer-events: none;\n      content: '';\n      transform: translate(-50%, -50%);\n      box-shadow:\n        inset 0 0 0 1px #fff,\n        0 0 1px rgb(0 0 0 / 20%),\n        inset 0 0 2.5px 0 rgb(0 0 0 / 20%);\n    }\n  }\n\n  .chooser {\n    display: flex;\n    padding: 8px 0;\n  }\n\n  .range {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n    flex: 1;\n  }\n\n  .hue {\n    background-image: linear-gradient(to right, red, yellow, lime, cyan, blue, magenta, red);\n  }\n\n  .opacity {\n    background: linear-gradient(\n        to right,\n        hsl(calc(var(--h)) 100% 50% / 0%),\n        hsl(calc(var(--h)) 100% 50% / 100%)\n      ),\n      var(--alpha-gradient);\n  }\n\n  .slider {\n    flex: 1;\n    display: block;\n    margin: 0;\n    border-radius: 5px;\n    inline-size: 100%;\n    block-size: 10px;\n    outline: 0;\n    cursor: pointer;\n    pointer-events: all;\n    appearance: none;\n\n    &::-webkit-slider-runnable-track {\n      position: relative;\n      display: flex;\n      align-items: center;\n    }\n\n    &::-webkit-slider-thumb {\n      appearance: none;\n      position: relative;\n      border-radius: 50%;\n      inline-size: 10px;\n      block-size: 10px;\n      background: #fff;\n      box-shadow: 0 0 10px rgb(0 0 0 / 10%);\n      transition: 0.3s cubic-bezier(0.12, 0.4, 0.29, 1.46);\n      transform: scale(1.2);\n    }\n\n    &::-moz-range-thumb {\n      position: relative;\n      border: 0;\n      border-radius: 50%;\n      background: #fff;\n      box-shadow: 0 0 10px rgb(0 0 0 / 10%);\n      transition: 0.3s cubic-bezier(0.12, 0.4, 0.29, 1.46);\n      inline-size: 10px;\n      block-size: 10px;\n      transform: scale(1.2);\n      box-sizing: border-box;\n      pointer-events: none;\n    }\n\n    &::-webkit-slider-thumb:active,\n    &:focus::-webkit-slider-thumb {\n      transform: scale(1.5);\n    }\n\n    &::-moz-range-thumb:active,\n    &:focus::-moz-range-thumb {\n      transform: scale(1.5);\n    }\n  }\n\n  .color {\n    display: flex;\n    padding-block-start: 8px;\n    gap: 5px 9px;\n    flex-wrap: wrap;\n\n    i {\n      position: relative;\n      border: 0;\n      font-size: 28px;\n      text-align: center;\n      background-color: var(--c, transparent);\n      outline: 0;\n      cursor: pointer;\n      inline-size: 20px;\n      block-size: 20px;\n      font-style: normal;\n      line-height: 17px;\n\n      &::before,\n      &::after {\n        position: absolute;\n        inset-block-start: 0;\n        inset-inline-start: 0;\n        inline-size: 100%;\n        block-size: 100%;\n        content: '';\n      }\n\n      &::before {\n        z-index: -1;\n        background: var(--alpha-gradient);\n      }\n\n      &.eye-dropper::before {\n        content: '⍝';\n      }\n\n      &::after {\n        border-radius: inherit;\n        background-color: var(--c, transparent);\n        opacity: 0;\n        transition:\n          var(--transition-duration) transform var(--transition-timing-function),\n          var(--transition-duration) opacity var(--transition-timing-function);\n      }\n\n      &:hover::after {\n        transform: translate3d(2px, 2px, 0);\n        opacity: 0.3;\n      }\n    }\n  }\n`;\n\nexport const switchCss = css`\n  .switch {\n    block-size: 25px;\n    line-height: 25px;\n    float: inline-start;\n    border-radius: var(--border-radius);\n    cursor: pointer;\n    inline-size: 46px;\n    font-size: 12px;\n    text-align: center;\n    color: var(--on-primary-selection);\n    background-color: var(--primary-selection);\n    text-transform: uppercase;\n    outline-color: var(--primary-outline);\n    transition-property: background-color, color, outline-color, border-radius, transform;\n    transition-timing-function: var(--transition-timing-function);\n    transition-duration: var(--transition-duration);\n\n    &:hover {\n      color: var(--primary-hover);\n    }\n\n    &:active {\n      color: var(--primary-active);\n      transform: scale(0.98);\n    }\n  }\n`;\n"],"names":["style","switchCss","css"],"mappings":"+JAEaA,KAAK,mBAALA,GA0OAC,SAAS,mBAATA,qBA5OO,eAEPD,EAAQE,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwOzB,CAAC,CAEYD,EAAYC,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2B7B,CAAC"}
+{"version":3,"sources":["../../components/color-palette/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n  .palette {\n    --alpha-gradient: repeating-conic-gradient(#eee 0 25%, transparent 0 50%) 0 / 10px 10px;\n\n    inline-size: 100%;\n    box-sizing: border-box;\n    user-select: none;\n  }\n\n  .preview,\n  .preview::after,\n  .color i,\n  .color i::before {\n    border-radius: var(--border-radius);\n  }\n\n  .preview {\n    margin-inline-start: 6px;\n    inline-size: 46px;\n    min-block-size: 26px;\n    line-height: 1;\n    font-family: sans-serif;\n    text-align: center;\n    color: #fff;\n    cursor: pointer;\n    background: var(--alpha-gradient);\n\n    &::after {\n      display: block;\n      inline-size: 100%;\n      block-size: 100%;\n      background-color: var(--c);\n      box-shadow:\n        rgb(0 0 0 / 10%) 0 0 0 1px inset,\n        rgb(0 0 0 / 10%) 0 0 4px inset;\n      text-shadow: var(--text-shadow);\n      content: '';\n    }\n\n    &:hover::after {\n      font-size: 24px;\n      content: '⎘';\n    }\n\n    &[data-copy='success']::after {\n      font-size: 16px;\n      line-height: 26px;\n      content: '✓';\n    }\n  }\n\n  .form {\n    display: flex;\n    gap: 6px;\n  }\n\n  .input {\n    flex: 1;\n  }\n\n  .picker {\n    position: relative;\n    border-radius: 4px;\n    block-size: 150px;\n    background:\n      linear-gradient(to top, hsl(0deg 0% 0% / calc(var(--a))), transparent) 0 / 100%,\n      linear-gradient(\n          to left,\n          hsl(calc(var(--h)) 100% 50% / calc(var(--a))),\n          hsl(0deg 0% 100% / calc(var(--a)))\n        )\n        0 / 100%,\n      var(--alpha-gradient);\n    opacity: 1;\n    transition: opacity var(--transition-duration);\n    user-select: none;\n    cursor: crosshair;\n\n    &:active {\n      opacity: 0.99;\n    }\n\n    &::after {\n      position: absolute;\n      inset-block-start: calc((100 - var(--v)) * 1%);\n      inset-inline-start: calc(var(--s) * 1%);\n      border-radius: 3px;\n      inline-size: 6px;\n      block-size: 6px;\n      pointer-events: none;\n      content: '';\n      transform: translate(-50%, -50%);\n      box-shadow:\n        inset 0 0 0 1px #fff,\n        0 0 1px rgb(0 0 0 / 20%),\n        inset 0 0 2.5px 0 rgb(0 0 0 / 20%);\n    }\n  }\n\n  .chooser {\n    display: flex;\n    padding: 8px 0;\n  }\n\n  .range {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n    flex: 1;\n  }\n\n  .hue {\n    background-image: linear-gradient(to right, red, yellow, lime, cyan, blue, magenta, red);\n  }\n\n  .opacity {\n    background: linear-gradient(\n        to right,\n        hsl(calc(var(--h)) 100% 50% / 0%),\n        hsl(calc(var(--h)) 100% 50% / 100%)\n      ),\n      var(--alpha-gradient);\n  }\n\n  .slider {\n    flex: 1;\n    display: block;\n    margin: 0;\n    border-radius: 5px;\n    inline-size: 100%;\n    block-size: 10px;\n    outline: 0;\n    cursor: pointer;\n    pointer-events: all;\n    appearance: none;\n\n    &::-webkit-slider-runnable-track {\n      position: relative;\n      display: flex;\n      align-items: center;\n    }\n\n    &::-webkit-slider-thumb {\n      appearance: none;\n      position: relative;\n      border-radius: 50%;\n      inline-size: 10px;\n      block-size: 10px;\n      background: #fff;\n      box-shadow: 0 0 10px rgb(0 0 0 / 10%);\n      transition: 0.3s cubic-bezier(0.12, 0.4, 0.29, 1.46);\n      transform: scale(1.2);\n    }\n\n    &::-moz-range-thumb {\n      position: relative;\n      border: 0;\n      border-radius: 50%;\n      background: #fff;\n      box-shadow: 0 0 10px rgb(0 0 0 / 10%);\n      transition: 0.3s cubic-bezier(0.12, 0.4, 0.29, 1.46);\n      inline-size: 10px;\n      block-size: 10px;\n      transform: scale(1.2);\n      box-sizing: border-box;\n      pointer-events: none;\n    }\n\n    &::-webkit-slider-thumb:active,\n    &:focus::-webkit-slider-thumb {\n      transform: scale(1.5);\n    }\n\n    &::-moz-range-thumb:active,\n    &:focus::-moz-range-thumb {\n      transform: scale(1.5);\n    }\n  }\n\n  .color {\n    display: flex;\n    padding-block-start: 8px;\n    gap: 5px 9px;\n    flex-wrap: wrap;\n\n    i {\n      position: relative;\n      border: 0;\n      font-size: 28px;\n      text-align: center;\n      background-color: var(--c, transparent);\n      outline: 0;\n      cursor: pointer;\n      inline-size: 20px;\n      block-size: 20px;\n      font-style: normal;\n      line-height: 17px;\n\n      &::before,\n      &::after {\n        position: absolute;\n        inset-block-start: 0;\n        inset-inline-start: 0;\n        inline-size: 100%;\n        block-size: 100%;\n        content: '';\n      }\n\n      &::before {\n        z-index: -1;\n        background: var(--alpha-gradient);\n      }\n\n      &.eye-dropper::before {\n        content: '⍝';\n      }\n\n      &::after {\n        border-radius: inherit;\n        background-color: var(--c, transparent);\n        opacity: 0;\n        transition:\n          var(--transition-duration) transform var(--transition-timing-function),\n          var(--transition-duration) opacity var(--transition-timing-function);\n      }\n\n      &:hover::after {\n        transform: translate3d(2px, 2px, 0);\n        opacity: 0.3;\n      }\n    }\n  }\n`;\n\nexport const switchCss = css`\n  .switch {\n    block-size: 25px;\n    line-height: 25px;\n    float: inline-start;\n    border-radius: var(--border-radius);\n    cursor: pointer;\n    inline-size: 46px;\n    font-size: 12px;\n    text-align: center;\n    color: var(--on-primary-selection);\n    background-color: var(--primary-selection);\n    text-transform: uppercase;\n    outline-color: var(--primary-outline);\n    transition-property: background-color, color, outline-color, border-radius, transform;\n    transition-timing-function: var(--transition-timing-function);\n    transition-duration: var(--transition-duration);\n\n    &:hover {\n      color: var(--primary-hover);\n    }\n\n    &:active {\n      color: var(--primary-active);\n      transform: scale(0.98);\n    }\n  }\n`;\n"],"names":["style","switchCss","css"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"+JAEaA,KAAK,mBAALA,GA0OAC,SAAS,mBAATA,qBA5OO,eAEPD,EAAQE,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwOzB,CAAC,CAEYD,EAAYC,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2B7B,CAAC"}

package/lib/color-picker/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return p}});const e=require("solid-js/web"),t=require("solid-js"),r=require("@moneko/css"),n=require("solid-element"),o=require("./style");require("../color-palette");const l=function(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var r=u(t);if(r&&r.has(e))return r.get(e);var n={__proto__:null},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var l in e)if("default"!==l&&Object.prototype.hasOwnProperty.call(e,l)){var a=o?Object.getOwnPropertyDescriptor(e,l):null;a&&(a.get||a.set)?Object.defineProperty(n,l,a):n[l]=e[l]}return n.default=e,r&&r.set(e,n),n}(require("../popover"));function u(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,r=new WeakMap;return(u=function(e){return e?r:t})(e)}const a=(0,e.template)("<span>"),i=(0,e.template)("<n-color-palette>",!0,!1);function c(n){let[u,c]=(0,t.splitProps)(n,["css","value","defaultValue","onChange","popupClass","popupCss","size"]),[p,s]=(0,t.createSignal)(u.defaultValue);function d(e){void 0===u.value&&s(e.detail),u.onChange?.(e.detail)}(0,t.onMount)(()=>{void 0===u.value&&u.defaultValue&&s(u.defaultValue)}),(0,t.createEffect)(()=>{void 0!==u.value&&u.value!==(0,t.untrack)(p)&&s(u.value)});let f=(0,t.createMemo)(()=>`.color-picker {padding: 10px;inline-size: 216px;}${u.popupCss||""}`),g=(0,t.createMemo)(()=>`${o.style+(u.css||"")}.trigger {--c: ${p()};}`);return(0,e.createComponent)(l.default,(0,e.mergeProps)(c,{arrow:!0,trigger:"click",get content(){return(()=>{let t=i();return(0,e.addEventListener)(t,"change",d),t._$owner=(0,e.getOwner)(),(0,e.effect)(()=>t.value=p()),t})()},get popupClass(){return(0,r.cx)("color-picker",u.popupClass)},get popupCss(){return f()},get css(){return g()},get children(){let t=a();return(0,e.effect)(()=>(0,e.className)(t,(0,r.cx)("trigger",u.size))),t}}))}(0,n.customElement)("n-color-picker",{...l.defaultProps,value:void 0,defaultValue:void 0,onChange:void 0,size:void 0},(e,r)=>{let n=r.element,o=(0,t.mergeProps)({onChange(e){n.dispatchEvent(new CustomEvent("change",{detail:e}))},children:n.children},e);return(0,t.createComponent)(c,o)});const p=c;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return p}});const e=require("solid-js/web"),t=require("solid-js"),r=require("@moneko/css"),n=require("solid-element"),o=require("./style");require("../color-palette");const l=function(e,t){if(e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var r=u(void 0);if(r&&r.has(e))return r.get(e);var n={__proto__:null},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var l in e)if("default"!==l&&Object.prototype.hasOwnProperty.call(e,l)){var a=o?Object.getOwnPropertyDescriptor(e,l):null;a&&(a.get||a.set)?Object.defineProperty(n,l,a):n[l]=e[l]}return n.default=e,r&&r.set(e,n),n}(require("../popover"));function u(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,r=new WeakMap;return(u=function(e){return e?r:t})(e)}const a=(0,e.template)("<span>"),i=(0,e.template)("<n-color-palette>",!0,!1);function c(n){let[u,c]=(0,t.splitProps)(n,["css","value","defaultValue","onChange","popupClass","popupCss","size"]),[p,s]=(0,t.createSignal)(u.defaultValue);function d(e){void 0===u.value&&s(e.detail),u.onChange?.(e.detail)}(0,t.onMount)(()=>{void 0===u.value&&u.defaultValue&&s(u.defaultValue)}),(0,t.createEffect)(()=>{void 0!==u.value&&u.value!==(0,t.untrack)(p)&&s(u.value)});let f=(0,t.createMemo)(()=>`.color-picker {padding: 10px;inline-size: 216px;}${u.popupCss||""}`),g=(0,t.createMemo)(()=>`${o.style+(u.css||"")}.trigger {--c: ${p()};}`);return(0,e.createComponent)(l.default,(0,e.mergeProps)(c,{arrow:!0,trigger:"click",get content(){return(()=>{let t=i();return(0,e.addEventListener)(t,"change",d),t._$owner=(0,e.getOwner)(),(0,e.effect)(()=>t.value=p()),t})()},get popupClass(){return(0,r.cx)("color-picker",u.popupClass)},get popupCss(){return f()},get css(){return g()},get children(){let t=a();return(0,e.effect)(()=>(0,e.className)(t,(0,r.cx)("trigger",u.size))),t}}))}(0,n.customElement)("n-color-picker",{...l.defaultProps,value:void 0,defaultValue:void 0,onChange:void 0,size:void 0},(e,r)=>{let n=r.element,o=(0,t.mergeProps)({onChange(e){n.dispatchEvent(new CustomEvent("change",{detail:e}))},children:n.children},e);return(0,t.createComponent)(c,o)});const p=c;
 //# sourceMappingURL=index.js.map

package/lib/color-picker/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/color-picker/index.tsx"],"sourcesContent":["import {\n  createComponent,\n  createEffect,\n  createMemo,\n  createSignal,\n  mergeProps,\n  onMount,\n  splitProps,\n  untrack,\n} from 'solid-js';\nimport { cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { style } from './style';\nimport '../color-palette';\nimport Popover, { defaultProps } from '../popover';\nimport type { BasicConfig, ColorPaletteProps, CustomElement, PopoverProps } from '..';\n\n/** 颜色选择器\n * @since 2.0.0\n */\nexport interface ColorPickerProps\n  extends ColorPaletteProps,\n    Omit<PopoverProps, 'children' | 'content'> {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** 关闭后是否销毁  */\n  destroyInactive?: boolean;\n  /** 尺寸\n   * @default 'normal'\n   */\n  size?: BasicConfig['size'];\n  /** 默认值  */\n  defaultValue?: string;\n}\nexport type ColorPickerElement = CustomElement<ColorPickerProps>;\n\nfunction ColorPicker(props: ColorPickerProps) {\n  const [local, others] = splitProps(props, [\n    'css',\n    'value',\n    'defaultValue',\n    'onChange',\n    'popupClass',\n    'popupCss',\n    'size',\n  ]);\n  const [color, setColor] = createSignal<string | undefined>(local.defaultValue);\n\n  function handleChange(e: CustomEvent<string>) {\n    if (local.value === void 0) {\n      setColor(e.detail);\n    }\n    local.onChange?.(e.detail);\n  }\n\n  onMount(() => {\n    if (local.value === void 0 && local.defaultValue) {\n      setColor(local.defaultValue);\n    }\n  });\n  createEffect(() => {\n    if (local.value !== void 0 && local.value !== untrack(color)) {\n      setColor(local.value);\n    }\n  });\n  const popupCss = createMemo(\n    () => `.color-picker {padding: 10px;inline-size: 216px;}${local.popupCss || ''}`,\n  );\n  const css = createMemo(() => `${style + (local.css || '')}.trigger {--c: ${color()};}`);\n\n  return (\n    <Popover\n      {...others}\n      arrow={true}\n      trigger=\"click\"\n      content={<n-color-palette value={color()} onChange={handleChange} />}\n      popupClass={cx('color-picker', local.popupClass)}\n      popupCss={popupCss()}\n      css={css()}\n    >\n      <span class={cx('trigger', local.size)} />\n    </Popover>\n  );\n}\n\ncustomElement<ColorPickerProps>(\n  'n-color-picker',\n  {\n    ...defaultProps,\n    value: void 0,\n    defaultValue: void 0,\n    onChange: void 0,\n    size: void 0,\n  },\n  (_, opts) => {\n    const el = opts.element;\n    const props = mergeProps(\n      {\n        onChange(val?: string) {\n          el.dispatchEvent(\n            new CustomEvent('change', {\n              detail: val,\n            }),\n          );\n        },\n        children: el.children,\n      },\n      _,\n    );\n\n    return createComponent(ColorPicker, props);\n  },\n);\n\nexport default ColorPicker;\n"],"names":["ColorPicker","props","local","others","splitProps","color","setColor","createSignal","defaultValue","handleChange","e","value","detail","onChange","onMount","createEffect","untrack","popupCss","createMemo","css","style","Popover","cx","popupClass","size","customElement","defaultProps","_","opts","el","element","mergeProps","val","dispatchEvent","CustomEvent","children","createComponent"],"mappings":"kGAoHA,+CAAA,+CA3GO,sBACY,yBACW,2BACR,mBACf,+eAC+B,2NAwBtC,SAASA,EAAYC,CAAuB,EAC1C,GAAM,CAACC,EAAOC,EAAO,CAAGC,GAAAA,YAAU,EAACH,EAAO,CACxC,MACA,QACA,eACA,WACA,aACA,WACA,OACD,EACK,CAACI,EAAOC,EAAS,CAAGC,GAAAA,cAAY,EAAqBL,EAAMM,YAAY,EAE7E,SAASC,EAAaC,CAAsB,EACtB,KAAK,IAArBR,EAAMS,KAAK,EACbL,EAASI,EAAEE,MAAM,EAEnBV,EAAMW,QAAQ,GAAGH,EAAEE,MAAM,CAC3B,CAEAE,GAAAA,SAAO,EAAC,KACc,KAAK,IAArBZ,EAAMS,KAAK,EAAeT,EAAMM,YAAY,EAC9CF,EAASJ,EAAMM,YAAY,CAE/B,GACAO,GAAAA,cAAY,EAAC,KACS,KAAK,IAArBb,EAAMS,KAAK,EAAeT,EAAMS,KAAK,GAAKK,GAAAA,SAAO,EAACX,IACpDC,EAASJ,EAAMS,KAAK,CAExB,GACA,IAAMM,EAAWC,GAAAA,YAAU,EACzB,IAAM,CAAC,iDAAiD,EAAEhB,EAAMe,QAAQ,EAAI,GAAG,CAAC,EAE5EE,EAAMD,GAAAA,YAAU,EAAC,IAAM,CAAC,EAAEE,OAAK,CAAIlB,CAAAA,EAAMiB,GAAG,EAAI,EAAC,EAAG,eAAe,EAAEd,IAAQ,EAAE,CAAC,EAEtF,4BACGgB,SAAO,kBACFlB,SACG,CAAA,8FAE6CM,uDAAnBJ,mCACrBiB,GAAAA,IAAE,EAAC,eAAgBpB,EAAMqB,UAAU,yBACrCN,sBACLE,uEAEQG,GAAAA,IAAE,EAAC,UAAWpB,EAAMsB,IAAI,SAG3C,CAEAC,GAAAA,eAAa,EACX,iBACA,CACE,GAAGC,cAAY,CACff,MAAO,KAAK,EACZH,aAAc,KAAK,EACnBK,SAAU,KAAK,EACfW,KAAM,KAAK,CACb,EACA,CAACG,EAAGC,KACF,IAAMC,EAAKD,EAAKE,OAAO,CACjB7B,EAAQ8B,GAAAA,YAAU,EACtB,CACElB,SAASmB,CAAY,EACnBH,EAAGI,aAAa,CACd,IAAIC,YAAY,SAAU,CACxBtB,OAAQoB,CACV,GAEJ,EACAG,SAAUN,EAAGM,QAAQ,AACvB,EACAR,GAGF,MAAOS,GAAAA,iBAAe,EAACpC,EAAaC,EACtC,SAGF,EAAeD"}
+{"version":3,"sources":["../../components/color-picker/index.tsx"],"sourcesContent":["import {\n  createComponent,\n  createEffect,\n  createMemo,\n  createSignal,\n  mergeProps,\n  onMount,\n  splitProps,\n  untrack,\n} from 'solid-js';\nimport { cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { style } from './style';\nimport '../color-palette';\nimport Popover, { defaultProps } from '../popover';\nimport type { BasicConfig, ColorPaletteProps, CustomElement, PopoverProps } from '..';\n\n/** 颜色选择器\n * @since 2.0.0\n */\nexport interface ColorPickerProps\n  extends ColorPaletteProps,\n    Omit<PopoverProps, 'children' | 'content'> {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** 关闭后是否销毁  */\n  destroyInactive?: boolean;\n  /** 尺寸\n   * @default 'normal'\n   */\n  size?: BasicConfig['size'];\n  /** 默认值  */\n  defaultValue?: string;\n}\nexport type ColorPickerElement = CustomElement<ColorPickerProps>;\n\nfunction ColorPicker(props: ColorPickerProps) {\n  const [local, others] = splitProps(props, [\n    'css',\n    'value',\n    'defaultValue',\n    'onChange',\n    'popupClass',\n    'popupCss',\n    'size',\n  ]);\n  const [color, setColor] = createSignal<string | undefined>(local.defaultValue);\n\n  function handleChange(e: CustomEvent<string>) {\n    if (local.value === void 0) {\n      setColor(e.detail);\n    }\n    local.onChange?.(e.detail);\n  }\n\n  onMount(() => {\n    if (local.value === void 0 && local.defaultValue) {\n      setColor(local.defaultValue);\n    }\n  });\n  createEffect(() => {\n    if (local.value !== void 0 && local.value !== untrack(color)) {\n      setColor(local.value);\n    }\n  });\n  const popupCss = createMemo(\n    () => `.color-picker {padding: 10px;inline-size: 216px;}${local.popupCss || ''}`,\n  );\n  const css = createMemo(() => `${style + (local.css || '')}.trigger {--c: ${color()};}`);\n\n  return (\n    <Popover\n      {...others}\n      arrow={true}\n      trigger=\"click\"\n      content={<n-color-palette value={color()} onChange={handleChange} />}\n      popupClass={cx('color-picker', local.popupClass)}\n      popupCss={popupCss()}\n      css={css()}\n    >\n      <span class={cx('trigger', local.size)} />\n    </Popover>\n  );\n}\n\ncustomElement<ColorPickerProps>(\n  'n-color-picker',\n  {\n    ...defaultProps,\n    value: void 0,\n    defaultValue: void 0,\n    onChange: void 0,\n    size: void 0,\n  },\n  (_, opts) => {\n    const el = opts.element;\n    const props = mergeProps(\n      {\n        onChange(val?: string) {\n          el.dispatchEvent(\n            new CustomEvent('change', {\n              detail: val,\n            }),\n          );\n        },\n        children: el.children,\n      },\n      _,\n    );\n\n    return createComponent(ColorPicker, props);\n  },\n);\n\nexport default ColorPicker;\n"],"names":["ColorPicker","props","local","others","splitProps","color","setColor","createSignal","defaultValue","handleChange","e","value","detail","onChange","onMount","createEffect","untrack","popupCss","createMemo","css","style","Popover","cx","popupClass","size","customElement","defaultProps","_","opts","el","element","mergeProps","val","dispatchEvent","CustomEvent","children","createComponent"],"rangeMappings":"","mappings":"kGAoHA,+CAAA,+CA3GO,sBACY,yBACW,2BACR,mBACf,gfAC+B,2NAwBtC,SAASA,EAAYC,CAAuB,EAC1C,GAAM,CAACC,EAAOC,EAAO,CAAGC,GAAAA,YAAU,EAACH,EAAO,CACxC,MACA,QACA,eACA,WACA,aACA,WACA,OACD,EACK,CAACI,EAAOC,EAAS,CAAGC,GAAAA,cAAY,EAAqBL,EAAMM,YAAY,EAE7E,SAASC,EAAaC,CAAsB,EACtB,KAAK,IAArBR,EAAMS,KAAK,EACbL,EAASI,EAAEE,MAAM,EAEnBV,EAAMW,QAAQ,GAAGH,EAAEE,MAAM,CAC3B,CAEAE,GAAAA,SAAO,EAAC,KACc,KAAK,IAArBZ,EAAMS,KAAK,EAAeT,EAAMM,YAAY,EAC9CF,EAASJ,EAAMM,YAAY,CAE/B,GACAO,GAAAA,cAAY,EAAC,KACS,KAAK,IAArBb,EAAMS,KAAK,EAAeT,EAAMS,KAAK,GAAKK,GAAAA,SAAO,EAACX,IACpDC,EAASJ,EAAMS,KAAK,CAExB,GACA,IAAMM,EAAWC,GAAAA,YAAU,EACzB,IAAM,CAAC,iDAAiD,EAAEhB,EAAMe,QAAQ,EAAI,GAAG,CAAC,EAE5EE,EAAMD,GAAAA,YAAU,EAAC,IAAM,CAAC,EAAEE,OAAK,CAAIlB,CAAAA,EAAMiB,GAAG,EAAI,EAAC,EAAG,eAAe,EAAEd,IAAQ,EAAE,CAAC,EAEtF,4BACGgB,SAAO,kBACFlB,SACG,CAAA,8FAE6CM,uDAAnBJ,mCACrBiB,GAAAA,IAAE,EAAC,eAAgBpB,EAAMqB,UAAU,yBACrCN,sBACLE,uEAEQG,GAAAA,IAAE,EAAC,UAAWpB,EAAMsB,IAAI,SAG3C,CAEAC,GAAAA,eAAa,EACX,iBACA,CACE,GAAGC,cAAY,CACff,MAAO,KAAK,EACZH,aAAc,KAAK,EACnBK,SAAU,KAAK,EACfW,KAAM,KAAK,CACb,EACA,CAACG,EAAGC,KACF,IAAMC,EAAKD,EAAKE,OAAO,CACjB7B,EAAQ8B,GAAAA,YAAU,EACtB,CACElB,SAASmB,CAAY,EACnBH,EAAGI,aAAa,CACd,IAAIC,YAAY,SAAU,CACxBtB,OAAQoB,CACV,GAEJ,EACAG,SAAUN,EAAGM,QAAQ,AACvB,EACAR,GAGF,MAAOS,GAAAA,iBAAe,EAACpC,EAAaC,EACtC,SAGF,EAAeD"}

package/lib/color-picker/style.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/color-picker/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n  .trigger {\n    --alpha-gradient: repeating-conic-gradient(#eee 0 25%, transparent 0 50%) 0 / 10px 10px;\n\n    display: inline-block;\n    border-radius: var(--border-radius);\n    inline-size: 25px;\n    block-size: 25px;\n    background: var(--alpha-gradient);\n\n    &::after {\n      display: block;\n      border-radius: var(--border-radius);\n      inline-size: 100%;\n      block-size: 100%;\n      background: var(--c, #fff);\n      opacity: var(--a, 1);\n      box-shadow:\n        rgb(0 0 0 / 10%) 0 0 0 1px inset,\n        rgb(0 0 0 / 10%) 0 0 4px inset;\n      content: '';\n      cursor: pointer;\n    }\n  }\n\n  .trigger.large {\n    inline-size: 45px;\n    block-size: 25px;\n  }\n\n  .trigger.small {\n    inline-size: 15px;\n    block-size: 15px;\n  }\n\n  .trigger.normal {\n    inline-size: 25px;\n    block-size: 25px;\n  }\n`;\n"],"names":["style","css"],"mappings":"kGAEaA,6CAAAA,qBAFO,eAEPA,EAAQC,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCzB,CAAC"}
+{"version":3,"sources":["../../components/color-picker/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n  .trigger {\n    --alpha-gradient: repeating-conic-gradient(#eee 0 25%, transparent 0 50%) 0 / 10px 10px;\n\n    display: inline-block;\n    border-radius: var(--border-radius);\n    inline-size: 25px;\n    block-size: 25px;\n    background: var(--alpha-gradient);\n\n    &::after {\n      display: block;\n      border-radius: var(--border-radius);\n      inline-size: 100%;\n      block-size: 100%;\n      background: var(--c, #fff);\n      opacity: var(--a, 1);\n      box-shadow:\n        rgb(0 0 0 / 10%) 0 0 0 1px inset,\n        rgb(0 0 0 / 10%) 0 0 4px inset;\n      content: '';\n      cursor: pointer;\n    }\n  }\n\n  .trigger.large {\n    inline-size: 45px;\n    block-size: 25px;\n  }\n\n  .trigger.small {\n    inline-size: 15px;\n    block-size: 15px;\n  }\n\n  .trigger.normal {\n    inline-size: 25px;\n    block-size: 25px;\n  }\n`;\n"],"names":["style","css"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"kGAEaA,6CAAAA,qBAFO,eAEPA,EAAQC,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCzB,CAAC"}

package/lib/cron/begin-interval.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/cron/begin-interval.tsx"],"sourcesContent":["import { selectCss, selectPortalCss } from './style';\nimport type { CronData } from '.';\nimport type { BaseOption } from 'neko-ui';\n\ntype BeginIntervalProps = {\n  begin: CronData['begin'];\n  beginEvery: CronData['beginEvery'];\n  label: [JSX.Element, JSX.Element, JSX.Element];\n  beginOption: (string | number | BaseOption)[];\n  beginEveryOption: (string | number | BaseOption)[];\n  onChange(type: 'begin' | 'beginEvery', value: number): void;\n  validate(type: 'begin' | 'beginEvery', value: number): boolean;\n  disabled: boolean;\n};\n\nfunction BeginInterval(props: BeginIntervalProps) {\n  function onChange(\n    type: 'begin' | 'beginEvery',\n    e: CustomEvent<[val: number | string, item: BaseOption]>,\n  ) {\n    const [value] = e.detail;\n    const v = Number(value);\n\n    if (props.validate(type, v)) {\n      props.onChange(type, v);\n    }\n  }\n  return (\n    <>\n      {props.label[0]}\n      <n-select\n        value={props.begin}\n        onChange={onChange.bind(null, 'begin')}\n        options={props.beginOption}\n        disabled={props.disabled}\n        css={selectCss}\n        popup-css={selectPortalCss}\n        dropdown-match-select-width={false}\n        arrow={true}\n      />\n      {props.label[1]}\n      <n-select\n        value={props.beginEvery}\n        onChange={onChange.bind(null, 'beginEvery')}\n        options={props.beginEveryOption}\n        disabled={props.disabled}\n        css={selectCss}\n        popup-css={selectPortalCss}\n        dropdown-match-select-width={false}\n        arrow={true}\n      />\n      {props.label[2]}\n    </>\n  );\n}\n\nexport default BeginInterval;\n"],"names":["props","onChange","type","e","value","detail","v","Number","validate","label","bind","selectCss","selectPortalCss","beginOption","disabled","begin","beginEveryOption","beginEvery"],"mappings":"kGAwDA,+CAAA,+CAxD2C,gDAwD3C,EAzCA,SAAuBA,CAAyB,EAC9C,SAASC,EACPC,CAA4B,CAC5BC,CAAwD,EAExD,GAAM,CAACC,EAAM,CAAGD,EAAEE,MAAM,CAClBC,EAAIC,OAAOH,GAEbJ,EAAMQ,QAAQ,CAACN,EAAMI,IACvBN,EAAMC,QAAQ,CAACC,EAAMI,EAEzB,CACA,sBAEKN,EAAMS,KAAK,CAAC,EAAE,0DAGHR,EAASS,IAAI,CAAC,KAAM,gBAGzBC,WAAS,YACHC,iBAAe,4BACG,CAAA,UACtB,CAAA,oDALEZ,EAAMa,WAAW,GAChBb,EAAMc,QAAQ,+HAHjBd,EAAMe,KAAK,uBASnBf,EAAMS,KAAK,CAAC,EAAE,0DAGHR,EAASS,IAAI,CAAC,KAAM,qBAGzBC,WAAS,YACHC,iBAAe,4BACG,CAAA,UACtB,CAAA,oDALEZ,EAAMgB,gBAAgB,GACrBhB,EAAMc,QAAQ,kIAHjBd,EAAMiB,UAAU,uBASxBjB,EAAMS,KAAK,CAAC,EAAE,EAGrB"}
+{"version":3,"sources":["../../components/cron/begin-interval.tsx"],"sourcesContent":["import { selectCss, selectPortalCss } from './style';\nimport type { CronData } from '.';\nimport type { BaseOption } from 'neko-ui';\n\ntype BeginIntervalProps = {\n  begin: CronData['begin'];\n  beginEvery: CronData['beginEvery'];\n  label: [JSX.Element, JSX.Element, JSX.Element];\n  beginOption: (string | number | BaseOption)[];\n  beginEveryOption: (string | number | BaseOption)[];\n  onChange(type: 'begin' | 'beginEvery', value: number): void;\n  validate(type: 'begin' | 'beginEvery', value: number): boolean;\n  disabled: boolean;\n};\n\nfunction BeginInterval(props: BeginIntervalProps) {\n  function onChange(\n    type: 'begin' | 'beginEvery',\n    e: CustomEvent<[val: number | string, item: BaseOption]>,\n  ) {\n    const [value] = e.detail;\n    const v = Number(value);\n\n    if (props.validate(type, v)) {\n      props.onChange(type, v);\n    }\n  }\n  return (\n    <>\n      {props.label[0]}\n      <n-select\n        value={props.begin}\n        onChange={onChange.bind(null, 'begin')}\n        options={props.beginOption}\n        disabled={props.disabled}\n        css={selectCss}\n        popup-css={selectPortalCss}\n        dropdown-match-select-width={false}\n        arrow={true}\n      />\n      {props.label[1]}\n      <n-select\n        value={props.beginEvery}\n        onChange={onChange.bind(null, 'beginEvery')}\n        options={props.beginEveryOption}\n        disabled={props.disabled}\n        css={selectCss}\n        popup-css={selectPortalCss}\n        dropdown-match-select-width={false}\n        arrow={true}\n      />\n      {props.label[2]}\n    </>\n  );\n}\n\nexport default BeginInterval;\n"],"names":["props","onChange","type","e","value","detail","v","Number","validate","label","bind","selectCss","selectPortalCss","beginOption","disabled","begin","beginEveryOption","beginEvery"],"rangeMappings":"","mappings":"kGAwDA,+CAAA,+CAxD2C,gDAwD3C,EAzCA,SAAuBA,CAAyB,EAC9C,SAASC,EACPC,CAA4B,CAC5BC,CAAwD,EAExD,GAAM,CAACC,EAAM,CAAGD,EAAEE,MAAM,CAClBC,EAAIC,OAAOH,GAEbJ,EAAMQ,QAAQ,CAACN,EAAMI,IACvBN,EAAMC,QAAQ,CAACC,EAAMI,EAEzB,CACA,sBAEKN,EAAMS,KAAK,CAAC,EAAE,0DAGHR,EAASS,IAAI,CAAC,KAAM,gBAGzBC,WAAS,YACHC,iBAAe,4BACG,CAAA,UACtB,CAAA,oDALEZ,EAAMa,WAAW,GAChBb,EAAMc,QAAQ,+HAHjBd,EAAMe,KAAK,uBASnBf,EAAMS,KAAK,CAAC,EAAE,0DAGHR,EAASS,IAAI,CAAC,KAAM,qBAGzBC,WAAS,YACHC,iBAAe,4BACG,CAAA,UACtB,CAAA,oDALEZ,EAAMgB,gBAAgB,GACrBhB,EAAMc,QAAQ,kIAHjBd,EAAMiB,UAAU,uBASxBjB,EAAMS,KAAK,CAAC,EAAE,EAGrB"}