neko-ui 2.9.2 → 2.9.4

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

@@ -1 +1 @@
-{"version":3,"sources":["../../components/capture-screen/index.tsx"],"sourcesContent":["import {\n  createEffect,\n  createMemo,\n  createSignal,\n  mergeProps,\n  onCleanup,\n  Show,\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';\n\nimport type { CustomElement } from '..';\nimport { clearAttribute } from '../basic-config';\nimport theme, { inline } from '../theme';\n\nimport { style } from './style';\n\nimport '../button';\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) => {\n        track.stop();\n      });\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) => {\n        track.stop();\n      });\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 textContent={baseStyle()} />\n      <style textContent={style} />\n      <Show when={local.css}>\n        <style textContent={css(local.css)} />\n      </Show>\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              classList={{\n                recording: recordState() === 'recording',\n                paused: recordState() === '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    createEffect(() => {\n      clearAttribute(el, ['css', 'options']);\n    });\n    return (\n      <>\n        <style textContent={inline} />\n        <CaptureScreen {...props} />\n      </>\n    );\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","Show","css","cx","class","recorder","controls","customElement","opt","el","element","dispatchEvent","CustomEvent","detail","clearAttribute","inline"],"mappings":"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"}
+{"version":3,"sources":["components/capture-screen/index.tsx"],"sourcesContent":["import {\n  createEffect,\n  createMemo,\n  createSignal,\n  mergeProps,\n  onCleanup,\n  Show,\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';\n\nimport type { CustomElement } from '..';\nimport { clearAttribute } from '../basic-config';\nimport theme, { inline } from '../theme';\n\nimport { style } from './style';\n\nimport '../button';\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) => {\n        track.stop();\n      });\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) => {\n        track.stop();\n      });\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 textContent={baseStyle()} />\n      <style textContent={style} />\n      <Show when={local.css}>\n        <style textContent={css(local.css)} />\n      </Show>\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              classList={{\n                recording: recordState() === 'recording',\n                paused: recordState() === '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    createEffect(() => {\n      clearAttribute(el, ['css', 'options']);\n    });\n    return (\n      <>\n        <style textContent={inline} />\n        <CaptureScreen {...props} />\n      </>\n    );\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","Show","css","cx","class","recorder","controls","customElement","opt","el","element","dispatchEvent","CustomEvent","detail","clearAttribute","inline"],"mappings":"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"}

package/lib/capture-screen/style.js

@@ -69,5 +69,4 @@
       opacity: 0;
     }
   }
-`;
-//# sourceMappingURL=style.js.map
+`;

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"],"mappings":"kGAEaA,6CAAAA,qBAFO,eAEPA,EAAQC,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuEzB,CAAC"}

package/lib/carousel/index.js

@@ -1,2 +1 @@
-"use strict";var e;Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return m}});const t=require("solid-js/web"),n=require("solid-js"),r=(e=require("@moneko/common/lib/isFunction"))&&e.__esModule?e:{default:e},l=require("@moneko/css"),i=require("solid-element"),a=require("../basic-config"),o=function(e,t){if(e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var n=s(void 0);if(n&&n.has(e))return n.get(e);var r={__proto__:null},l=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var i in e)if("default"!==i&&Object.prototype.hasOwnProperty.call(e,i)){var a=l?Object.getOwnPropertyDescriptor(e,i):null;a&&(a.get||a.set)?Object.defineProperty(r,i,a):r[i]=e[i]}return r.default=e,n&&n.set(e,r),r}(require("../theme")),c=require("./style");function s(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,n=new WeakMap;return(s=function(e){return e?n:t})(e)}const d=(0,t.template)("<style> "),u=(0,t.template)("<style>"),f=(0,t.template)('<section class="header">'),v=(0,t.template)('<div class="dots">'),p=(0,t.template)('<section><section class="list"><div class="item"></div><div class="item"></div><div class="item"></div></section><slot name="header"></slot><div class="prev"></div><div class="next">'),h=(0,t.template)('<i class="dot">');function g(e){let i;let{baseStyle:a}=o.default,s=(0,n.mergeProps)({autoplay:-1,children:[]},e),[g,m]=(0,n.createSignal)(0),[b,y]=(0,n.createSignal)(1),[C,_]=(0,n.createSignal)(0),[w,x]=(0,n.createSignal)(0);function E(){let e=w();-1===e?_(g()):1===e&&_(b()),x(0),(0,r.default)(s.onChange)&&s.onChange(C())}function S(){x(-1)}function O(){x(1)}function j(e,t){t.stopPropagation();let n=C(),r=20*Math.floor(n/20)+e;r>n?(x(1),y(r)):r<n&&(x(-1),m(r))}let k=(0,n.createMemo)(()=>[...s.children]),M=(0,n.createMemo)(()=>Array(k().length>20?20:k().length).fill(null));(0,n.createEffect)(()=>{void 0!==s.offset&&_(Number(s.offset))}),(0,n.createEffect)(()=>{var e,t;let n,r;let[l,i]=(e=C(),t=k(),n=e-1,r=e+1,n<0&&(n=t.length-1),r>t.length-1&&(r=0),[n,r]);m(l),y(i)}),(0,n.createEffect)(()=>{clearInterval(i);let e=Number(s.autoplay);e>0&&(i=setInterval(()=>{e<1&&clearInterval(i),O()},e))}),(0,n.onCleanup)(()=>{clearInterval(i)});let P=(0,n.createMemo)(()=>(0,r.default)(s.header)?s.header(C()):s.header);return[(()=>{let e=d(),n=e.firstChild;return(0,t.effect)(()=>n.data=a()),e})(),(()=>{let e=u();return e.textContent=c.style,e})(),(0,t.createComponent)(n.Show,{get when(){return s.css},get children(){let e=d(),n=e.firstChild;return(0,t.effect)(()=>n.data=(0,l.css)(s.css)),e}}),(()=>{let e=p(),r=e.firstChild,i=r.firstChild,a=i.nextSibling,o=a.nextSibling,c=r.nextSibling,d=c.nextSibling,u=d.nextSibling;return(0,t.insert)(i,()=>k()[g()]),(0,t.addEventListener)(a,"animationend",E),(0,t.insert)(a,()=>k()[C()]),(0,t.insert)(o,()=>k()[b()]),c._$owner=(0,t.getOwner)(),(0,t.insert)(e,(0,t.createComponent)(n.Show,{get when(){return P()},get children(){let e=f();return(0,t.insert)(e,P),e}}),d),(0,t.addEventListener)(d,"click",S,!0),(0,t.addEventListener)(u,"click",O,!0),(0,t.insert)(e,(0,t.createComponent)(n.Show,{get when(){return s.dots},get children(){let e=v();return(0,t.insert)(e,(0,t.createComponent)(n.Index,{get each(){return M()},children:(e,n)=>(()=>{let e=h();return(0,t.addEventListener)(e,"click",j.bind(null,n),!0),(0,t.effect)(()=>e.classList.toggle("active",!(n!==C()%20+w()))),e})()})),e}}),null),(0,t.effect)(n=>{let i=(0,l.cx)("carousel",s.class),a=w();return i!==n._v$&&(0,t.className)(e,n._v$=i),a!==n._v$2&&(0,t.setAttribute)(r,"data-dir",n._v$2=a),n},{_v$:void 0,_v$2:void 0}),e})()]}(0,i.customElement)("n-carousel",{children:void 0,autoplay:void 0,class:void 0,css:void 0,offset:void 0,dots:void 0,header:void 0,onChange:void 0},(e,r)=>{let l=r.element,i=(0,n.mergeProps)({onChange(e){l.offset=e,l.dispatchEvent(new CustomEvent("change",{detail:e}))}},e);return(0,n.createEffect)(()=>{(0,a.clearAttribute)(l,["css"]),l.replaceChildren()}),[(()=>{let e=u();return e.textContent=o.block,e})(),(0,t.createComponent)(g,i)]});const m=g;(0,t.delegateEvents)(["click"]);
-//# sourceMappingURL=index.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return b}});const e=require("solid-js/web"),t=require("solid-js"),n=c(require("@moneko/common/lib/isFunction")),r=require("@moneko/css"),l=require("solid-element"),i=require("../basic-config"),a=d(require("../theme")),o=require("./style");function c(e){return e&&e.__esModule?e:{default:e}}function s(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,n=new WeakMap;return(s=function(e){return e?n:t})(e)}function d(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var n=s(t);if(n&&n.has(e))return n.get(e);var r={__proto__:null},l=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var i in e)if("default"!==i&&Object.prototype.hasOwnProperty.call(e,i)){var a=l?Object.getOwnPropertyDescriptor(e,i):null;a&&(a.get||a.set)?Object.defineProperty(r,i,a):r[i]=e[i]}return r.default=e,n&&n.set(e,r),r}const u=(0,e.template)("<style> "),f=(0,e.template)("<style>"),v=(0,e.template)('<section class="header">'),p=(0,e.template)('<div class="dots">'),h=(0,e.template)('<section><section class="list"><div class="item"></div><div class="item"></div><div class="item"></div></section><slot name="header"></slot><div class="prev"></div><div class="next">'),g=(0,e.template)('<i class="dot">');function m(l){let i;let{baseStyle:c}=a.default,s=(0,t.mergeProps)({autoplay:-1,children:[]},l),[d,m]=(0,t.createSignal)(0),[b,y]=(0,t.createSignal)(1),[C,_]=(0,t.createSignal)(0),[w,x]=(0,t.createSignal)(0);function E(){let e=w();-1===e?_(d()):1===e&&_(b()),x(0),(0,n.default)(s.onChange)&&s.onChange(C())}function S(){x(-1)}function O(){x(1)}function j(e,t){t.stopPropagation();let n=C(),r=20*Math.floor(n/20)+e;r>n?(x(1),y(r)):r<n&&(x(-1),m(r))}let k=(0,t.createMemo)(()=>[...s.children]),M=(0,t.createMemo)(()=>Array(k().length>20?20:k().length).fill(null));(0,t.createEffect)(()=>{void 0!==s.offset&&_(Number(s.offset))}),(0,t.createEffect)(()=>{var e,t;let n,r;let[l,i]=(e=C(),t=k(),n=e-1,r=e+1,n<0&&(n=t.length-1),r>t.length-1&&(r=0),[n,r]);m(l),y(i)}),(0,t.createEffect)(()=>{clearInterval(i);let e=Number(s.autoplay);e>0&&(i=setInterval(()=>{e<1&&clearInterval(i),O()},e))}),(0,t.onCleanup)(()=>{clearInterval(i)});let P=(0,t.createMemo)(()=>(0,n.default)(s.header)?s.header(C()):s.header);return[(()=>{let t=u(),n=t.firstChild;return(0,e.effect)(()=>n.data=c()),t})(),(()=>{let e=f();return e.textContent=o.style,e})(),(0,e.createComponent)(t.Show,{get when(){return s.css},get children(){let t=u(),n=t.firstChild;return(0,e.effect)(()=>n.data=(0,r.css)(s.css)),t}}),(()=>{let n=h(),l=n.firstChild,i=l.firstChild,a=i.nextSibling,o=a.nextSibling,c=l.nextSibling,u=c.nextSibling,f=u.nextSibling;return(0,e.insert)(i,()=>k()[d()]),(0,e.addEventListener)(a,"animationend",E),(0,e.insert)(a,()=>k()[C()]),(0,e.insert)(o,()=>k()[b()]),c._$owner=(0,e.getOwner)(),(0,e.insert)(n,(0,e.createComponent)(t.Show,{get when(){return P()},get children(){let t=v();return(0,e.insert)(t,P),t}}),u),(0,e.addEventListener)(u,"click",S,!0),(0,e.addEventListener)(f,"click",O,!0),(0,e.insert)(n,(0,e.createComponent)(t.Show,{get when(){return s.dots},get children(){let n=p();return(0,e.insert)(n,(0,e.createComponent)(t.Index,{get each(){return M()},children:(t,n)=>(()=>{let t=g();return(0,e.addEventListener)(t,"click",j.bind(null,n),!0),(0,e.effect)(()=>t.classList.toggle("active",!(n!==C()%20+w()))),t})()})),n}}),null),(0,e.effect)(t=>{let i=(0,r.cx)("carousel",s.class),a=w();return i!==t._v$&&(0,e.className)(n,t._v$=i),a!==t._v$2&&(0,e.setAttribute)(l,"data-dir",t._v$2=a),t},{_v$:void 0,_v$2:void 0}),n})()]}(0,l.customElement)("n-carousel",{children:void 0,autoplay:void 0,class:void 0,css:void 0,offset:void 0,dots:void 0,header:void 0,onChange:void 0},(n,r)=>{let l=r.element,o=(0,t.mergeProps)({onChange(e){l.offset=e,l.dispatchEvent(new CustomEvent("change",{detail:e}))}},n);return(0,t.createEffect)(()=>{(0,i.clearAttribute)(l,["css"]),l.replaceChildren()}),[(()=>{let e=f();return e.textContent=a.block,e})(),(0,e.createComponent)(m,o)]});const b=m;(0,e.delegateEvents)(["click"]);

package/lib/carousel/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/carousel/index.tsx"],"sourcesContent":["import {\n  createEffect,\n  createMemo,\n  createSignal,\n  Index,\n  mergeProps,\n  onCleanup,\n  Show,\n} from 'solid-js';\nimport { isFunction } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport type { CustomElement } from '..';\nimport { clearAttribute } from '../basic-config';\nimport theme, { block } from '../theme';\n\nimport { style } from './style';\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 textContent={baseStyle()} />\n      <style textContent={style} />\n      <Show when={props.css}>\n        <style textContent={css(props.css)} />\n      </Show>\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=\"dot\"\n                    classList={{\n                      active: idx === (offset() % 20) + direction(),\n                    }}\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      clearAttribute(el, ['css']);\n      el.replaceChildren();\n    });\n    return (\n      <>\n        <style textContent={block} />\n        <Carousel {...props} />\n      </>\n    );\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","Show","css","dots","Index","_","bind","cx","class","customElement","opt","el","element","key","dispatchEvent","CustomEvent","detail","clearAttribute","replaceChildren","block"],"mappings":"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"}
+{"version":3,"sources":["components/carousel/index.tsx"],"sourcesContent":["import {\n  createEffect,\n  createMemo,\n  createSignal,\n  Index,\n  mergeProps,\n  onCleanup,\n  Show,\n} from 'solid-js';\nimport { isFunction } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport type { CustomElement } from '..';\nimport { clearAttribute } from '../basic-config';\nimport theme, { block } from '../theme';\n\nimport { style } from './style';\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 textContent={baseStyle()} />\n      <style textContent={style} />\n      <Show when={props.css}>\n        <style textContent={css(props.css)} />\n      </Show>\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=\"dot\"\n                    classList={{\n                      active: idx === (offset() % 20) + direction(),\n                    }}\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      clearAttribute(el, ['css']);\n      el.replaceChildren();\n    });\n    return (\n      <>\n        <style textContent={block} />\n        <Carousel {...props} />\n      </>\n    );\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","Show","css","dots","Index","_","bind","cx","class","customElement","opt","el","element","key","dispatchEvent","CustomEvent","detail","clearAttribute","replaceChildren","block"],"mappings":"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"}

package/lib/carousel/style.js

@@ -163,5 +163,4 @@
       transform: translate3d(-200%, 0, 0);
     }
   }
-`;
-//# sourceMappingURL=style.js.map
+`;

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\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;\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;\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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqKzB,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\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;\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;\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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqKzB,CAAC"}

package/lib/checkbox/index.js

@@ -1,2 +1 @@
-"use strict";var e;Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return b}});const t=require("solid-js/web"),n=require("solid-js"),r=require("@moneko/css"),i=require("solid-element"),l=require("../basic-config"),a=(e=require("../get-options"))&&e.__esModule?e:{default:e},o=function(e,t){if(e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var n=s(void 0);if(n&&n.has(e))return n.get(e);var r={__proto__:null},i=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var l in e)if("default"!==l&&Object.prototype.hasOwnProperty.call(e,l)){var a=i?Object.getOwnPropertyDescriptor(e,l):null;a&&(a.get||a.set)?Object.defineProperty(r,l,a):r[l]=e[l]}return r.default=e,n&&n.set(e,r),r}(require("../theme")),u=require("./style");function s(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,n=new WeakMap;return(s=function(e){return e?n:t})(e)}const c=(0,t.template)("<style> "),d=(0,t.template)("<style>"),f=(0,t.template)("<section>"),v=(0,t.template)('<span><input class="checkbox" type="checkbox"><label>');function p(e){let{baseStyle:i}=o.default,[s,p]=(0,n.createSignal)([]),b=(0,n.createMemo)(()=>Object.assign({},l.FieldName,e.fieldNames));(0,n.createEffect)(()=>{let t=void 0===e.value?e.defaultValue:e.value,n=[];Array.isArray(t)?n=t:void 0!==t&&(n=[t]),p(n)});let m=(0,n.createMemo)(()=>{let t=b();if(void 0===e.options)return(0,a.default)([{value:1}],t);let n=[{[t.value]:"all",[t.label]:"全选",indeterminate:!1}];return(e.checkAll?n:[]).concat((0,a.default)(e.options||[],t))}),h=(0,n.createMemo)(()=>{let e=[],t=b();return m().forEach(n=>{"indeterminate"in n||void 0===n[t.value]||e.push(n[t.value])}),e}),y=(0,n.createMemo)(()=>{let e=!0,t=h();for(let n=0,r=t.length;n<r;n++)if(!s().includes(t[n])){e=!1;break}return e});function g(t){if(!e.disabled&&!t.disabled){let n="indeterminate"in t,r=n?[]:[...s()],i=t[b().value];if(n)y()||(r=h());else{let e=r.indexOf(i);-1!==e?r.splice(e,1):r.push(i)}void 0===e.value&&p(r),e.onChange?.(void 0===e.options?!!r[0]:r)}}function k(e,t){t.preventDefault(),"Enter"===t.key&&g(e)}return[(()=>{let e=c(),n=e.firstChild;return(0,t.effect)(()=>n.data=i()),e})(),(()=>{let e=d();return e.textContent=u.style,e})(),(0,t.createComponent)(n.Show,{get when(){return e.css},get children(){let n=c(),i=n.firstChild;return(0,t.effect)(()=>i.data=(0,r.css)(e.css)),n}}),(()=>{let i=f();return(0,t.insert)(i,(0,t.createComponent)(n.For,{get each(){return m()},children:i=>{let l=e.disabled||i.disabled,a=b(),o=i[a.value];return"indeterminate"in i&&(0,n.createEffect)(()=>{let e;i.ref.indeterminate=(e=!1,h().forEach(t=>{s().length&&!s().includes(t)&&(e=!0)}),e)}),(()=>{let n=v(),u=n.firstChild,c=i.ref,d=u.nextSibling;return(0,t.addEventListener)(n,"click",g.bind(null,i),!0),(0,t.addEventListener)(n,"keyup",k.bind(null,i),!0),(0,t.setAttribute)(n,"aria-disabled",l),(0,t.setAttribute)(n,"tabindex",l?-1:0),(0,t.addEventListener)(u,"change",g.bind(null,i)),"function"==typeof c?(0,t.use)(c,u):i.ref=u,u.value=o,u.disabled=l,(0,t.insert)(d,()=>i[a.label]),(0,t.effect)(l=>{let a=(0,r.cx)("item",i.class,i.status),o=e.name;return a!==l._v$&&(0,t.className)(n,l._v$=a),o!==l._v$2&&(0,t.setAttribute)(u,"name",l._v$2=o),l},{_v$:void 0,_v$2:void 0}),(0,t.effect)(()=>u.checked="indeterminate"in i?y():s().includes(o)),n})()}})),(0,t.effect)(()=>(0,t.className)(i,(0,r.cx)("box",e.layout,e.class))),i})()]}(0,i.customElement)("n-checkbox",{class:void 0,css:void 0,name:void 0,disabled:void 0,value:void 0,defaultValue:void 0,options:void 0,onChange:void 0,fieldNames:void 0,checkAll:void 0,layout:void 0},(e,r)=>{let i=r.element,a=(0,n.mergeProps)({layout:i.layout||"horizontal",onChange(e){i.dispatchEvent(new CustomEvent("change",{detail:e}))}},e);return(0,n.createEffect)(()=>{(0,l.clearAttribute)(i,["options","fieldNames","css"])}),[(()=>{let e=d();return e.textContent=o.inline,e})(),(0,t.createComponent)(p,a)]});const b=p;(0,t.delegateEvents)(["click","keyup"]);
-//# sourceMappingURL=index.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return m}});const e=require("solid-js/web"),t=require("solid-js"),n=require("@moneko/css"),r=require("solid-element"),i=require("../basic-config"),l=u(require("../get-options")),a=c(require("../theme")),o=require("./style");function u(e){return e&&e.__esModule?e:{default:e}}function s(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,n=new WeakMap;return(s=function(e){return e?n:t})(e)}function c(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var n=s(t);if(n&&n.has(e))return n.get(e);var r={__proto__:null},i=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var l in e)if("default"!==l&&Object.prototype.hasOwnProperty.call(e,l)){var a=i?Object.getOwnPropertyDescriptor(e,l):null;a&&(a.get||a.set)?Object.defineProperty(r,l,a):r[l]=e[l]}return r.default=e,n&&n.set(e,r),r}const d=(0,e.template)("<style> "),f=(0,e.template)("<style>"),v=(0,e.template)("<section>"),p=(0,e.template)('<span><input class="checkbox" type="checkbox"><label>');function b(r){let{baseStyle:u}=a.default,[s,c]=(0,t.createSignal)([]),b=(0,t.createMemo)(()=>Object.assign({},i.FieldName,r.fieldNames));(0,t.createEffect)(()=>{let e=void 0===r.value?r.defaultValue:r.value,t=[];Array.isArray(e)?t=e:void 0!==e&&(t=[e]),c(t)});let m=(0,t.createMemo)(()=>{let e=b();if(void 0===r.options)return(0,l.default)([{value:1}],e);let t=[{[e.value]:"all",[e.label]:"全选",indeterminate:!1}];return(r.checkAll?t:[]).concat((0,l.default)(r.options||[],e))}),h=(0,t.createMemo)(()=>{let e=[],t=b();return m().forEach(n=>{"indeterminate"in n||void 0===n[t.value]||e.push(n[t.value])}),e}),y=(0,t.createMemo)(()=>{let e=!0,t=h();for(let n=0,r=t.length;n<r;n++)if(!s().includes(t[n])){e=!1;break}return e});function g(e){if(!r.disabled&&!e.disabled){let t="indeterminate"in e,n=t?[]:[...s()],i=e[b().value];if(t)y()||(n=h());else{let e=n.indexOf(i);-1!==e?n.splice(e,1):n.push(i)}void 0===r.value&&c(n),r.onChange?.(void 0===r.options?!!n[0]:n)}}function k(e,t){t.preventDefault(),"Enter"===t.key&&g(e)}return[(()=>{let t=d(),n=t.firstChild;return(0,e.effect)(()=>n.data=u()),t})(),(()=>{let e=f();return e.textContent=o.style,e})(),(0,e.createComponent)(t.Show,{get when(){return r.css},get children(){let t=d(),i=t.firstChild;return(0,e.effect)(()=>i.data=(0,n.css)(r.css)),t}}),(()=>{let i=v();return(0,e.insert)(i,(0,e.createComponent)(t.For,{get each(){return m()},children:i=>{let l=r.disabled||i.disabled,a=b(),o=i[a.value];return"indeterminate"in i&&(0,t.createEffect)(()=>{let e;i.ref.indeterminate=(e=!1,h().forEach(t=>{s().length&&!s().includes(t)&&(e=!0)}),e)}),(()=>{let t=p(),u=t.firstChild,c=i.ref,d=u.nextSibling;return(0,e.addEventListener)(t,"click",g.bind(null,i),!0),(0,e.addEventListener)(t,"keyup",k.bind(null,i),!0),(0,e.setAttribute)(t,"aria-disabled",l),(0,e.setAttribute)(t,"tabindex",l?-1:0),(0,e.addEventListener)(u,"change",g.bind(null,i)),"function"==typeof c?(0,e.use)(c,u):i.ref=u,u.value=o,u.disabled=l,(0,e.insert)(d,()=>i[a.label]),(0,e.effect)(l=>{let a=(0,n.cx)("item",i.class,i.status),o=r.name;return a!==l._v$&&(0,e.className)(t,l._v$=a),o!==l._v$2&&(0,e.setAttribute)(u,"name",l._v$2=o),l},{_v$:void 0,_v$2:void 0}),(0,e.effect)(()=>u.checked="indeterminate"in i?y():s().includes(o)),t})()}})),(0,e.effect)(()=>(0,e.className)(i,(0,n.cx)("box",r.layout,r.class))),i})()]}(0,r.customElement)("n-checkbox",{class:void 0,css:void 0,name:void 0,disabled:void 0,value:void 0,defaultValue:void 0,options:void 0,onChange:void 0,fieldNames:void 0,checkAll:void 0,layout:void 0},(n,r)=>{let l=r.element,o=(0,t.mergeProps)({layout:l.layout||"horizontal",onChange(e){l.dispatchEvent(new CustomEvent("change",{detail:e}))}},n);return(0,t.createEffect)(()=>{(0,i.clearAttribute)(l,["options","fieldNames","css"])}),[(()=>{let e=f();return e.textContent=a.inline,e})(),(0,e.createComponent)(b,o)]});const m=b;(0,e.delegateEvents)(["click","keyup"]);

package/lib/checkbox/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/checkbox/index.tsx"],"sourcesContent":["import { createEffect, createMemo, createSignal, For, mergeProps, Show } from 'solid-js';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport type { BaseOption, BasicConfig, CustomElement } from '..';\nimport { clearAttribute, FieldName } from '../basic-config';\nimport getOptions from '../get-options';\nimport theme, { inline } from '../theme';\n\nimport { style } from './style';\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 textContent={baseStyle()} />\n      <style textContent={style} />\n      <Show when={props.css}>\n        <style textContent={css(props.css)} />\n      </Show>\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      clearAttribute(el, ['options', 'fieldNames', 'css']);\n    });\n    return (\n      <>\n        <style textContent={inline} />\n        <Checkbox {...props} />\n      </>\n    );\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","Show","css","For","readOnly","realVal","_indeterminate","ref","v","bind","cx","class","status","name","layout","customElement","_","opt","el","element","mergeProps","next","dispatchEvent","CustomEvent","detail","clearAttribute","inline"],"mappings":"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"}
+{"version":3,"sources":["components/checkbox/index.tsx"],"sourcesContent":["import { createEffect, createMemo, createSignal, For, mergeProps, Show } from 'solid-js';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport type { BaseOption, BasicConfig, CustomElement } from '..';\nimport { clearAttribute, FieldName } from '../basic-config';\nimport getOptions from '../get-options';\nimport theme, { inline } from '../theme';\n\nimport { style } from './style';\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 textContent={baseStyle()} />\n      <style textContent={style} />\n      <Show when={props.css}>\n        <style textContent={css(props.css)} />\n      </Show>\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      clearAttribute(el, ['options', 'fieldNames', 'css']);\n    });\n    return (\n      <>\n        <style textContent={inline} />\n        <Checkbox {...props} />\n      </>\n    );\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","Show","css","For","readOnly","realVal","_indeterminate","ref","v","bind","cx","class","status","name","layout","customElement","_","opt","el","element","mergeProps","next","dispatchEvent","CustomEvent","detail","clearAttribute","inline"],"mappings":"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"}

package/lib/checkbox/style.js

@@ -128,5 +128,4 @@
   }
 
   ${["success","error","warning"].map(r=>`.${r} {--border-color: var(--${r}-border);--primary-hover: var(--${r}-hover);--primary-outline: var(--${r}-outline);--primary-color: var(--${r}-color);--primary-active: var(--${r}-active);--component-bg: var(--${r}-bg);}`).join("")}
-`;
-//# sourceMappingURL=style.js.map
+`;

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;\n        inset-inline: 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;\n        inset-inline: 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"}

package/lib/code/index.d.ts

@@ -1,6 +1,10 @@
 import { type JSX } from 'solid-js';
 import type { CustomElement } from '..';
-export type Language = 'bash' | 'shell' | 'sh' | 'clike' | 'css' | 'docker' | 'dockerfile' | 'git' | 'diff' | 'javascript' | 'js' | 'json' | 'webmanifest' | 'jsx' | 'tsx' | 'less' | 'html' | 'mathml' | 'svg' | 'xml' | 'ssml' | 'atom' | 'rss' | 'regex' | 'rust' | 'sql' | 'swift' | 'toml' | 'typescript' | 'ts' | 'yaml' | 'yml' | 'matlab';
+export type LanguageBase = 'bash' | 'shell' | 'sh' | 'clike' | 'css' | 'docker' | 'dockerfile' | 'git' | 'javascript' | 'js' | 'json' | 'webmanifest' | 'jsx' | 'tsx' | 'less' | 'html' | 'mathml' | 'svg' | 'xml' | 'ssml' | 'atom' | 'rss' | 'regex' | 'rust' | 'sql' | 'swift' | 'toml' | 'typescript' | 'ts' | 'yaml' | 'yml' | 'matlab';
+type ExcludeLanguage<T extends LanguageBase, U extends LanguageBase> = T extends U ? never : T;
+export type Language = LanguageBase | {
+    [T in LanguageBase]: `${T} ${ExcludeLanguage<LanguageBase, T>}`;
+}[LanguageBase];
 export interface CodeProps {
     /** 自定义类名 */
     class?: string;
@@ -8,7 +12,7 @@ export interface CodeProps {
     css?: string;
     /** 内容 */
     code?: string;
-    /** 语言
+    /** 语言（支持多种语言配置：如 `html css javascript`）
      * @default 'markup'
      */
     language?: Language;

package/lib/code/index.js

@@ -1,2 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return C}});const e=require("solid-js/web"),t=require("solid-js"),r=c(require("@moneko/common/lib/isFunction")),n=c(require("@moneko/common/lib/setClipboard")),i=require("@moneko/css"),o=require("solid-element"),l=require("../basic-config"),a=c(require("../theme")),s=require("./style");function c(e){return e&&e.__esModule?e:{default:e}}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 f=(0,e.template)("<style> "),d=(0,e.template)("<style>"),g=(0,e.template)('<div class="toolbar"><button class="toolbar-copy" aria-label="copy">'),h=(0,e.template)("<pre><code>");function p(o){let l,c;let{isDark:p}=a.default,C=/^diff-([\w-]+)/i,m=/%[0-9A-Fa-f]{2}/,v=(0,t.createUniqueId)(),[b,y]=(0,t.createSignal)(""),[S,w]=(0,t.createSignal)();async function k(){return window.Prism?window.Prism:(await Promise.resolve().then(()=>(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},i=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var o in e)if("default"!==o&&Object.prototype.hasOwnProperty.call(e,o)){var l=i?Object.getOwnPropertyDescriptor(e,o):null;l&&(l.get||l.set)?Object.defineProperty(n,o,l):n[o]=e[o]}return n.default=e,r&&r.set(e,n),n})(require("../prism")))).default}let[_]=(0,t.createResource)("prism",k);function j(){(0,n.default)((0,t.untrack)(b),l)}(0,t.createEffect)(()=>{let e=o.code||"";m.test(e)&&(e=decodeURIComponent(e)),l.normalize(),e!==l.textContent&&y(e)});let E=function(e){e.target.normalize();let t=e.target.textContent;q(o.language,t),(0,r.default)(o.onChange)&&o.onChange(t)};function q(e="markup",t){c&&(clearTimeout(c),c=void 0);let r=_();t&&r&&(c=setTimeout(()=>{if(clearTimeout(c),CSS.highlights){CSS.highlights.forEach((e,t)=>{t.startsWith(v)&&e.clear()});let n=r.languages[C.test(e)?"diff":e]||r.languages.markup;!function e(t,r,n=0){let i=n;if(Array.isArray(r)){for(let n=0,o=r.length;n<o;n++){let o=r[n];if("object"!=typeof o){i+=o.length;continue}i=e(t,o,i)}return i}if("object"==typeof r&&r.type&&t.firstChild){let n=v+(r.alias??r.type),o=new Range;o.setStart(t.firstChild,i),Array.isArray(r.content)?i=e(t,r.content,i):"string"==typeof r.content&&(i+=r.content.length),o.setEnd(t.firstChild,i);let l=CSS.highlights.get(n);l?l.add(o):CSS.highlights.set(n,new Highlight().add(o))}return i}(l,r.tokenize(t,n)),w(()=>{let e=v.length,t="";for(let r of CSS.highlights.keys())r.startsWith(v)&&(t+=`::highlight(${r}){color:var(--${r.substring(e)});}`);return t})}else throw Error("不支持 CSS Highlights");c=void 0},0))}return(0,t.createEffect)(()=>{q(o.language,b())}),(0,t.onCleanup)(()=>{if(CSS.highlights)for(let e of CSS.highlights.keys())e.startsWith(v)&&CSS.highlights.delete(e)}),[(()=>{let t=f(),r=t.firstChild;return(0,e.effect)(()=>r.data=p()?s.darkCss:s.lightCss),t})(),(()=>{let t=f(),r=t.firstChild;return(0,e.effect)(()=>r.data=S()),t})(),(()=>{let e=d();return e.textContent=s.style,e})(),(0,e.createComponent)(t.Show,{get when(){return o.css},get children(){let t=f(),r=t.firstChild;return(0,e.effect)(()=>r.data=(0,i.css)(o.css)),t}}),(()=>{let r=h(),n=r.firstChild,i=l;return(0,e.insert)(r,(0,e.createComponent)(t.Show,{get when(){return o.toolbar},get children(){let t=g(),r=t.firstChild;return(0,e.addEventListener)(r,"click",j,!0),(0,e.effect)(()=>(0,e.setAttribute)(t,"data-language",o.language?.split(" ")[0])),t}}),n),(0,e.addEventListener)(n,"input",E,!0),"function"==typeof i?(0,e.use)(i,n):l=n,(0,e.setAttribute)(n,"spellcheck",!1),(0,e.insert)(n,b),(0,e.effect)(t=>{let i={[`language-${o.language}`]:!!o.language,"not-toolbar":!o.toolbar,[o.class]:!o.edit},l=o.edit;return t._v$=(0,e.classList)(r,i,t._v$),l!==t._v$2&&(0,e.setAttribute)(n,"contenteditable",t._v$2=l),t},{_v$:void 0,_v$2:void 0}),r})()]}(0,o.customElement)("n-code",{class:void 0,code:void 0,language:void 0,children:void 0,edit:void 0,toolbar:void 0,css:void 0,onChange:void 0},(r,n)=>{let{baseStyle:i}=a.default,o=n.element,s=(0,t.mergeProps)({code:o.textContent,css:o.css,onChange(e){o.dispatchEvent(new CustomEvent("change",{detail:e}))}},r);return(0,t.createEffect)(()=>{(0,l.clearAttribute)(o,["css","code"]),o.replaceChildren()}),[(()=>{let t=f(),r=t.firstChild;return(0,e.effect)(()=>r.data=i()),t})(),(0,e.createComponent)(p,s)]});const C=p;(0,e.delegateEvents)(["click","input"]);
-//# sourceMappingURL=index.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return v}});const e=require("solid-js/web"),t=require("solid-js"),r=c(require("@moneko/common/lib/isFunction")),n=c(require("@moneko/common/lib/setClipboard")),i=require("@moneko/css"),o=require("solid-element"),l=require("../basic-config"),a=c(require("../theme")),s=require("./style");function c(e){return e&&e.__esModule?e:{default:e}}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)}function d(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},i=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var o in e)if("default"!==o&&Object.prototype.hasOwnProperty.call(e,o)){var l=i?Object.getOwnPropertyDescriptor(e,o):null;l&&(l.get||l.set)?Object.defineProperty(n,o,l):n[o]=e[o]}return n.default=e,r&&r.set(e,n),n}const f=(0,e.template)("<style> "),g=(0,e.template)("<style>"),h=(0,e.template)('<div class="toolbar"><button class="toolbar-copy" aria-label="copy">'),p=(0,e.template)("<pre><code>");function m(o){let l,c;let{isDark:u}=a.default,m=/%[0-9A-Fa-f]{2}/,v=(0,t.createUniqueId)(),[C,b]=(0,t.createSignal)(""),[w,y]=(0,t.createSignal)();async function S(){return window.Prism?(window.Prism.disableWorkerMessageHandler=!0,window.Prism.manual=!0,window.Prism):(await Promise.resolve().then(()=>d(require("../prism")))).default}let[k]=(0,t.createResource)("prism",S),_=(0,t.createMemo)(()=>o.language?.split(" ").pop());function j(){(0,n.default)((0,t.untrack)(C),l)}(0,t.createEffect)(()=>{let e=o.code||"";m.test(e)&&(e=decodeURIComponent(e)),l.normalize(),e!==l.textContent&&b(e)});let P=function(e){e.target.normalize();let t=e.target.textContent;$(o.language,t,!0),(0,r.default)(o.onChange)&&o.onChange(t)};function $(e="markup",t,r,n={}){c&&(clearTimeout(c),c=void 0);let i=k();t&&i&&(c=setTimeout(()=>{if(clearTimeout(c),CSS.highlights){r&&CSS.highlights.forEach((e,t)=>{t.startsWith(v)&&e.clear()});let o=e.split(" "),a=i.languages[o[0]];a&&function e(t,r,n,i=0){let o=i;if(Array.isArray(r)){for(let i=0,l=r.length;i<l;i++){let l=r[i];if("object"!=typeof l){o+=l.length;continue}o=e(t,l,n,o)}return o}if("object"==typeof r&&r.type&&t.firstChild){let i=(r.alias??r.type).toString(),l=v+i,a=new Range;["deleted","inserted"].includes(i)?a.setStart(t.firstChild,o+2):a.setStart(t.firstChild,o),Array.isArray(r.content)?o=e(t,r.content,n,o):"string"==typeof r.content&&(o+=r.content.length),a.setEnd(t.firstChild,o),function(e,t,r,n){let i=CSS.highlights.get(e);i?i.add(r):CSS.highlights.set(e,new Highlight().add(r)),void 0===n[e]&&(n[e]=`::highlight(${e}){color:var(--${t});background-color:var(--${t}-bg);text-decoration:var(--${t}-text-decoration);text-shadow:var(--${t}-text-shadow);-webkit-text-stroke-width:var(--${t}-stroke-width);-webkit-text-stroke-color:var(--${t}-stroke-color);}`)}(l,i,a,n)}return o}(l,i.tokenize(t,a),n),o.length>1||"git"===o[0]?$(o[1],t,!1,n):y(Object.values(n).join(""))}else throw Error("不支持 CSS Highlights");c=void 0},0))}return(0,t.createEffect)(()=>{$(o.language,C(),!0)}),(0,t.onCleanup)(()=>{if(CSS.highlights)for(let e of CSS.highlights.keys())e.startsWith(v)&&CSS.highlights.delete(e)}),[(()=>{let t=f(),r=t.firstChild;return(0,e.effect)(()=>r.data=u()?s.darkCss:s.lightCss),t})(),(()=>{let t=f(),r=t.firstChild;return(0,e.effect)(()=>r.data=w()),t})(),(()=>{let e=g();return e.textContent=s.style,e})(),(0,e.createComponent)(t.Show,{get when(){return o.css},get children(){let t=f(),r=t.firstChild;return(0,e.effect)(()=>r.data=(0,i.css)(o.css)),t}}),(()=>{let r=p(),n=r.firstChild,i=l;return(0,e.insert)(r,(0,e.createComponent)(t.Show,{get when(){return o.toolbar},get children(){let t=h(),r=t.firstChild;return(0,e.addEventListener)(r,"click",j,!0),(0,e.effect)(()=>(0,e.setAttribute)(t,"data-language",_())),t}}),n),(0,e.addEventListener)(n,"input",P,!0),"function"==typeof i?(0,e.use)(i,n):l=n,(0,e.setAttribute)(n,"spellcheck",!1),(0,e.insert)(n,C),(0,e.effect)(t=>{let i={[`language-${o.language}`]:!!o.language,"not-toolbar":!o.toolbar,[o.class]:!o.edit},l=o.edit;return t._v$=(0,e.classList)(r,i,t._v$),l!==t._v$2&&(0,e.setAttribute)(n,"contenteditable",t._v$2=l),t},{_v$:void 0,_v$2:void 0}),r})()]}(0,o.customElement)("n-code",{class:void 0,code:void 0,language:void 0,children:void 0,edit:void 0,toolbar:void 0,css:void 0,onChange:void 0},(r,n)=>{let{baseStyle:i}=a.default,o=n.element,s=(0,t.mergeProps)({code:o.textContent,css:o.css,onChange(e){o.dispatchEvent(new CustomEvent("change",{detail:e}))}},r);return(0,t.createEffect)(()=>{(0,l.clearAttribute)(o,["css","code"]),o.replaceChildren()}),[(()=>{let t=f(),r=t.firstChild;return(0,e.effect)(()=>r.data=i()),t})(),(0,e.createComponent)(m,(0,e.mergeProps)({language:"atom"},s))]});const v=m;(0,e.delegateEvents)(["click","input"]);

package/lib/code/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/code/index.tsx"],"sourcesContent":["import {\n  createEffect,\n  createResource,\n  createSignal,\n  createUniqueId,\n  type JSX,\n  mergeProps,\n  onCleanup,\n  Show,\n  untrack,\n} from 'solid-js';\nimport { isFunction, setClipboard } from '@moneko/common';\nimport { css } from '@moneko/css';\nimport type { TokenStream } from 'prismjs';\nimport { customElement } from 'solid-element';\n\nimport type { CustomElement } from '..';\nimport { clearAttribute } from '../basic-config';\nimport theme from '../theme';\n\nimport { darkCss, lightCss, style } from './style';\n\nexport type Language =\n  | 'bash'\n  | 'shell'\n  | 'sh'\n  | 'clike'\n  | 'css'\n  | 'docker'\n  | 'dockerfile'\n  | 'git'\n  | 'diff'\n  | 'javascript'\n  | 'js'\n  | 'json'\n  | 'webmanifest'\n  | 'jsx'\n  | 'tsx'\n  | 'less'\n  | 'html'\n  | 'mathml'\n  | 'svg'\n  | 'xml'\n  | 'ssml'\n  | 'atom'\n  | 'rss'\n  | 'regex'\n  | 'rust'\n  | 'sql'\n  | 'swift'\n  | 'toml'\n  | 'typescript'\n  | 'ts'\n  | 'yaml'\n  | 'yml'\n  | 'matlab';\n\nexport interface CodeProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** 内容 */\n  code?: string;\n  /** 语言\n   * @default 'markup'\n   */\n  language?: Language;\n  /** 支持编辑 */\n  edit?: boolean;\n  /** 开启代码块工具条 */\n  toolbar?: boolean;\n  /** 编辑修改时的回调 */\n  onChange?(code: string): void;\n  children?: JSX.Element;\n}\nexport type CodeElement = CustomElement<CodeProps>;\n\nfunction Code(props: CodeProps) {\n  const { isDark } = theme;\n  let codeEl: HTMLPreElement;\n  let timer: NodeJS.Timeout | undefined;\n  const diffLang = /^diff-([\\w-]+)/i;\n  const decoded = /%[0-9A-Fa-f]{2}/;\n  const id = createUniqueId();\n  const [code, setCode] = createSignal<string>('');\n  const [highlightCss, setHighlightCss] = createSignal<string>();\n\n  async function fetchPrism() {\n    if (!window.Prism) {\n      return (await import('../prism')).default;\n    }\n    return window.Prism;\n  }\n  const [prismJS] = createResource('prism', fetchPrism);\n\n  createEffect(() => {\n    let _next = props.code || '';\n\n    if (decoded.test(_next)) {\n      _next = decodeURIComponent(_next);\n    }\n    codeEl.normalize();\n    if (_next !== codeEl.textContent) {\n      setCode(_next);\n    }\n  });\n\n  function copy() {\n    setClipboard(untrack(code), codeEl);\n  }\n  const change: JSX.InputEventHandlerUnion<HTMLElement, InputEvent> = function (e) {\n    e.target.normalize();\n    const next = e.target.textContent;\n\n    syntax(props.language, next);\n    if (isFunction(props.onChange)) {\n      props.onChange(next);\n    }\n  };\n\n  function highlighter(el: HTMLPreElement, tokenize: TokenStream, start = 0) {\n    let pos = start;\n\n    if (Array.isArray(tokenize)) {\n      for (let i = 0, len = tokenize.length; i < len; i++) {\n        const token = tokenize[i];\n\n        if (typeof token !== 'object') {\n          pos += token.length;\n          continue;\n        }\n        pos = highlighter(el, token, pos);\n      }\n      return pos;\n    }\n    if (typeof tokenize === 'object' && tokenize.type) {\n      if (el.firstChild) {\n        const key = id + (tokenize.alias ?? tokenize.type);\n        const range = new Range();\n\n        range.setStart(el.firstChild, pos);\n        if (Array.isArray(tokenize.content)) {\n          pos = highlighter(el, tokenize.content, pos);\n        } else if (typeof tokenize.content === 'string') {\n          pos += tokenize.content.length;\n        }\n        range.setEnd(el.firstChild, pos);\n        const highlight = CSS.highlights.get(key);\n\n        if (highlight) {\n          highlight.add(range);\n        } else {\n          CSS.highlights.set(key, new Highlight().add(range));\n        }\n      }\n    }\n\n    return pos;\n  }\n  function syntax(language = 'markup', value: string | null) {\n    if (timer) {\n      clearTimeout(timer);\n      timer = void 0;\n    }\n    const Prism = prismJS();\n\n    if (!value || !Prism) return;\n    timer = setTimeout(() => {\n      clearTimeout(timer);\n\n      if (CSS.highlights) {\n        CSS.highlights.forEach((highlight, key) => {\n          if (key.startsWith(id)) {\n            highlight.clear();\n          }\n        });\n        const grammar =\n          Prism.languages[diffLang.test(language) ? 'diff' : language] || Prism.languages.markup;\n\n        highlighter(codeEl, Prism.tokenize(value, grammar));\n        setHighlightCss(() => {\n          const len = id.length;\n          let style = '';\n\n          for (const key of CSS.highlights.keys()) {\n            if (key.startsWith(id)) {\n              style += `::highlight(${key}){color:var(--${key.substring(len)});}`;\n            }\n          }\n          return style;\n        });\n      } else {\n        throw Error('不支持 CSS Highlights');\n      }\n      timer = void 0;\n    }, 0);\n  }\n  createEffect(() => {\n    syntax(props.language, code());\n  });\n  onCleanup(() => {\n    if (CSS.highlights) {\n      for (const key of CSS.highlights.keys()) {\n        if (key.startsWith(id)) {\n          CSS.highlights.delete(key);\n        }\n      }\n    }\n  });\n\n  return (\n    <>\n      <style textContent={isDark() ? darkCss : lightCss} />\n      <style textContent={highlightCss()} />\n      <style textContent={style} />\n      <Show when={props.css}>\n        <style textContent={css(props.css)} />\n      </Show>\n      <pre\n        classList={{\n          [`language-${props.language}`]: !!props.language,\n          'not-toolbar': !props.toolbar,\n          [props.class!]: !props.edit,\n        }}\n      >\n        <Show when={props.toolbar}>\n          <div class=\"toolbar\" data-language={props.language?.split(' ')[0]}>\n            <button class=\"toolbar-copy\" aria-label=\"copy\" onClick={copy} />\n          </div>\n        </Show>\n        <code ref={codeEl!} contenteditable={props.edit} spellcheck={false} onInput={change}>\n          {code()}\n        </code>\n      </pre>\n    </>\n  );\n}\n\ncustomElement<CodeProps>(\n  'n-code',\n  {\n    class: void 0,\n    code: void 0,\n    language: void 0,\n    children: void 0,\n    edit: void 0,\n    toolbar: void 0,\n    css: void 0,\n    onChange: void 0,\n  },\n  (_, opt) => {\n    const { baseStyle } = theme;\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      clearAttribute(el, ['css', 'code']);\n      el.replaceChildren();\n    });\n    return (\n      <>\n        <style textContent={baseStyle()} />\n        <Code {...props} />\n      </>\n    );\n  },\n);\nexport default Code;\n"],"names":["Code","props","codeEl","timer","isDark","theme","diffLang","decoded","id","createUniqueId","code","setCode","createSignal","highlightCss","setHighlightCss","fetchPrism","window","Prism","default","prismJS","createResource","copy","setClipboard","untrack","createEffect","_next","test","decodeURIComponent","normalize","textContent","change","e","target","next","syntax","language","isFunction","onChange","value","clearTimeout","setTimeout","CSS","highlights","forEach","highlight","key","startsWith","clear","grammar","languages","markup","highlighter","el","tokenize","start","pos","Array","isArray","i","len","length","token","type","firstChild","alias","range","Range","setStart","content","setEnd","get","add","set","Highlight","style","keys","substring","Error","onCleanup","delete","darkCss","lightCss","Show","css","toolbar","split","class","edit","customElement","children","_","opt","baseStyle","element","mergeProps","val","dispatchEvent","CustomEvent","detail","clearAttribute","replaceChildren"],"mappings":"kGAyRA,+CAAA,+CA/QO,wBACkC,8CAAA,8CACrB,yBAEU,2BAGC,+BACb,uBAEuB,qXA0DzC,SAASA,EAAKC,CAAgB,MAExBC,EACAC,EAFJ,GAAM,CAAEC,OAAAA,CAAM,CAAE,CAAGC,SAAK,CAGlBC,EAAW,kBACXC,EAAU,kBACVC,EAAKC,GAAAA,gBAAc,IACnB,CAACC,EAAMC,EAAQ,CAAGC,GAAAA,cAAY,EAAS,IACvC,CAACC,EAAcC,EAAgB,CAAGF,GAAAA,cAAY,IAEpD,eAAeG,WACb,AAAKC,OAAOC,KAAK,CAGVD,OAAOC,KAAK,CAFV,AAAC,CAAA,MAAM,yeAAA,QAAO,aAAU,EAAGC,OAAO,AAG7C,CACA,GAAM,CAACC,EAAQ,CAAGC,GAAAA,gBAAc,EAAC,QAASL,GAc1C,SAASM,IACPC,GAAAA,SAAY,EAACC,GAAAA,SAAO,EAACb,GAAOR,EAC9B,CAdAsB,GAAAA,cAAY,EAAC,KACX,IAAIC,EAAQxB,EAAMS,IAAI,EAAI,GAEtBH,EAAQmB,IAAI,CAACD,IACfA,CAAAA,EAAQE,mBAAmBF,EAAK,EAElCvB,EAAO0B,SAAS,GACZH,IAAUvB,EAAO2B,WAAW,EAC9BlB,EAAQc,EAEZ,GAKA,IAAMK,EAA8D,SAAUC,CAAC,EAC7EA,EAAEC,MAAM,CAACJ,SAAS,GAClB,IAAMK,EAAOF,EAAEC,MAAM,CAACH,WAAW,CAEjCK,EAAOjC,EAAMkC,QAAQ,CAAEF,GACnBG,GAAAA,SAAU,EAACnC,EAAMoC,QAAQ,GAC3BpC,EAAMoC,QAAQ,CAACJ,EAEnB,EAyCA,SAASC,EAAOC,EAAW,QAAQ,CAAEG,CAAoB,EACnDnC,IACFoC,aAAapC,GACbA,EAAQ,KAAK,GAEf,IAAMc,EAAQE,IAETmB,GAAUrB,GACfd,CAAAA,EAAQqC,WAAW,KAGjB,GAFAD,aAAapC,GAETsC,IAAIC,UAAU,CAAE,CAClBD,IAAIC,UAAU,CAACC,OAAO,CAAC,CAACC,EAAWC,KAC7BA,EAAIC,UAAU,CAACtC,IACjBoC,EAAUG,KAAK,EAEnB,GACA,IAAMC,EACJ/B,EAAMgC,SAAS,CAAC3C,EAASoB,IAAI,CAACS,GAAY,OAASA,EAAS,EAAIlB,EAAMgC,SAAS,CAACC,MAAM,EAExFC,AA3DN,SAASA,EAAYC,CAAkB,CAAEC,CAAqB,CAAEC,EAAQ,CAAC,EACvE,IAAIC,EAAMD,EAEV,GAAIE,MAAMC,OAAO,CAACJ,GAAW,CAC3B,IAAK,IAAIK,EAAI,EAAGC,EAAMN,EAASO,MAAM,CAAEF,EAAIC,EAAKD,IAAK,CACnD,IAAMG,EAAQR,CAAQ,CAACK,EAAE,CAEzB,GAAI,AAAiB,UAAjB,OAAOG,EAAoB,CAC7BN,GAAOM,EAAMD,MAAM,CACnB,QACF,CACAL,EAAMJ,EAAYC,EAAIS,EAAON,EAC/B,CACA,OAAOA,CACT,CACA,GAAI,AAAoB,UAApB,OAAOF,GAAyBA,EAASS,IAAI,EAC3CV,EAAGW,UAAU,CAAE,CACjB,IAAMlB,EAAMrC,EAAM6C,CAAAA,EAASW,KAAK,EAAIX,EAASS,IAAI,AAAD,EAC1CG,EAAQ,IAAIC,MAElBD,EAAME,QAAQ,CAACf,EAAGW,UAAU,CAAER,GAC1BC,MAAMC,OAAO,CAACJ,EAASe,OAAO,EAChCb,EAAMJ,EAAYC,EAAIC,EAASe,OAAO,CAAEb,GACH,UAA5B,OAAOF,EAASe,OAAO,EAChCb,CAAAA,GAAOF,EAASe,OAAO,CAACR,MAAM,AAAD,EAE/BK,EAAMI,MAAM,CAACjB,EAAGW,UAAU,CAAER,GAC5B,IAAMX,EAAYH,IAAIC,UAAU,CAAC4B,GAAG,CAACzB,GAEjCD,EACFA,EAAU2B,GAAG,CAACN,GAEdxB,IAAIC,UAAU,CAAC8B,GAAG,CAAC3B,EAAK,IAAI4B,YAAYF,GAAG,CAACN,GAEhD,CAGF,OAAOV,CACT,EAqBkBrD,EAAQe,EAAMoC,QAAQ,CAACf,EAAOU,IAC1ClC,EAAgB,KACd,IAAM6C,EAAMnD,EAAGoD,MAAM,CACjBc,EAAQ,GAEZ,IAAK,IAAM7B,KAAOJ,IAAIC,UAAU,CAACiC,IAAI,GAC/B9B,EAAIC,UAAU,CAACtC,IACjBkE,CAAAA,GAAS,CAAC,YAAY,EAAE7B,EAAI,cAAc,EAAEA,EAAI+B,SAAS,CAACjB,GAAK,GAAG,CAAC,AAAD,EAGtE,OAAOe,CACT,EACF,MACE,MAAMG,MAAM,sBAEd1E,EAAQ,KAAK,CACf,EAAG,EAAC,CACN,CAcA,MAbAqB,GAAAA,cAAY,EAAC,KACXU,EAAOjC,EAAMkC,QAAQ,CAAEzB,IACzB,GACAoE,GAAAA,WAAS,EAAC,KACR,GAAIrC,IAAIC,UAAU,CAChB,IAAK,IAAMG,KAAOJ,IAAIC,UAAU,CAACiC,IAAI,GAC/B9B,EAAIC,UAAU,CAACtC,IACjBiC,IAAIC,UAAU,CAACqC,MAAM,CAAClC,EAI9B,iEAIwBzC,IAAW4E,SAAO,CAAGC,UAAQ,qEAC7BpE,gDACA6D,OAAK,6BACxBQ,MAAI,oBAAOjF,EAAMkF,GAAG,wEACCA,GAAAA,KAAG,EAAClF,EAAMkF,GAAG,yCActBjF,6CALVgF,MAAI,oBAAOjF,EAAMmF,OAAO,iFAEmC/D,4DADtBpB,EAAMkC,QAAQ,EAAEkD,MAAM,IAAI,CAAC,EAAE,4CAIUvD,0CAAlE5B,sCAAkD,CAAA,kBAC1DQ,0BAZQ,CACT,CAAC,CAAC,SAAS,EAAET,EAAMkC,QAAQ,CAAC,CAAC,CAAC,CAAE,CAAC,CAAClC,EAAMkC,QAAQ,CAChD,cAAe,CAAClC,EAAMmF,OAAO,CAC7B,CAACnF,EAAMqF,KAAK,CAAE,CAAE,CAACrF,EAAMsF,IAAI,AAC7B,IAOqCtF,EAAMsF,IAAI,yIAMvD,CAEAC,GAAAA,eAAa,EACX,SACA,CACEF,MAAO,KAAK,EACZ5E,KAAM,KAAK,EACXyB,SAAU,KAAK,EACfsD,SAAU,KAAK,EACfF,KAAM,KAAK,EACXH,QAAS,KAAK,EACdD,IAAK,KAAK,EACV9C,SAAU,KAAK,CACjB,EACA,CAACqD,EAAGC,KACF,GAAM,CAAEC,UAAAA,CAAS,CAAE,CAAGvF,SAAK,CACrB+C,EAAKuC,EAAIE,OAAO,CAChB5F,EAAQ6F,GAAAA,YAAU,EACtB,CACEpF,KAAM0C,EAAGvB,WAAW,CACpBsD,IAAK/B,EAAG+B,GAAG,CACX9C,SAAS0D,CAAW,EAClB3C,EAAG4C,aAAa,CACd,IAAIC,YAAY,SAAU,CACxBC,OAAQH,CACV,GAEJ,CACF,EACAL,GAOF,MAJAlE,GAAAA,cAAY,EAAC,KACX2E,GAAAA,gBAAc,EAAC/C,EAAI,CAAC,MAAO,OAAO,EAClCA,EAAGgD,eAAe,EACpB,iEAGwBR,iCACnB5F,EAASC,GAGhB,SAEF,EAAeD"}
+{"version":3,"sources":["components/code/index.tsx"],"sourcesContent":["import {\n  createEffect,\n  createMemo,\n  createResource,\n  createSignal,\n  createUniqueId,\n  type JSX,\n  mergeProps,\n  onCleanup,\n  Show,\n  untrack,\n} from 'solid-js';\nimport { isFunction, setClipboard } from '@moneko/common';\nimport { css } from '@moneko/css';\nimport type { TokenStream } from 'prismjs';\nimport { customElement } from 'solid-element';\n\nimport type { CustomElement } from '..';\nimport { clearAttribute } from '../basic-config';\nimport theme from '../theme';\n\nimport { darkCss, lightCss, style } from './style';\n\nexport type LanguageBase =\n  | 'bash'\n  | 'shell'\n  | 'sh'\n  | 'clike'\n  | 'css'\n  | 'docker'\n  | 'dockerfile'\n  | 'git'\n  | 'javascript'\n  | 'js'\n  | 'json'\n  | 'webmanifest'\n  | 'jsx'\n  | 'tsx'\n  | 'less'\n  | 'html'\n  | 'mathml'\n  | 'svg'\n  | 'xml'\n  | 'ssml'\n  | 'atom'\n  | 'rss'\n  | 'regex'\n  | 'rust'\n  | 'sql'\n  | 'swift'\n  | 'toml'\n  | 'typescript'\n  | 'ts'\n  | 'yaml'\n  | 'yml'\n  | 'matlab';\n\ntype ExcludeLanguage<T extends LanguageBase, U extends LanguageBase> = T extends U ? never : T;\n\nexport type Language =\n  | LanguageBase\n  | {\n      [T in LanguageBase]: `${T} ${ExcludeLanguage<LanguageBase, T>}`;\n    }[LanguageBase];\nexport interface CodeProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** 内容 */\n  code?: string;\n  /** 语言（支持多种语言配置：如 `html css javascript`）\n   * @default 'markup'\n   */\n  language?: Language;\n  /** 支持编辑 */\n  edit?: boolean;\n  /** 开启代码块工具条 */\n  toolbar?: boolean;\n  /** 编辑修改时的回调 */\n  onChange?(code: string): void;\n  children?: JSX.Element;\n}\nexport type CodeElement = CustomElement<CodeProps>;\n\nfunction Code(props: CodeProps) {\n  const { isDark } = theme;\n  let codeEl: HTMLPreElement;\n  let timer: NodeJS.Timeout | undefined;\n  const decoded = /%[0-9A-Fa-f]{2}/;\n  const id = createUniqueId();\n  const [code, setCode] = createSignal<string>('');\n  const [highlightCss, setHighlightCss] = createSignal<string>();\n\n  async function fetchPrism() {\n    if (!window.Prism) {\n      return (await import('../prism')).default;\n    }\n    window.Prism.disableWorkerMessageHandler = true;\n    window.Prism.manual = true;\n    return window.Prism;\n  }\n  const [prismJS] = createResource('prism', fetchPrism);\n  const title = createMemo(() => props.language?.split(' ').pop());\n\n  createEffect(() => {\n    let _next = props.code || '';\n\n    if (decoded.test(_next)) {\n      _next = decodeURIComponent(_next);\n    }\n    codeEl.normalize();\n    if (_next !== codeEl.textContent) {\n      setCode(_next);\n    }\n  });\n\n  function copy() {\n    setClipboard(untrack(code), codeEl);\n  }\n  const change: JSX.InputEventHandlerUnion<HTMLElement, InputEvent> = function (e) {\n    e.target.normalize();\n    const next = e.target.textContent;\n\n    syntax(props.language, next, true);\n    if (isFunction(props.onChange)) {\n      props.onChange(next);\n    }\n  };\n\n  function updateRang(\n    key: string,\n    token: string,\n    range: AbstractRange,\n    selection: Record<string, string>,\n  ) {\n    const highlight = CSS.highlights.get(key);\n\n    if (highlight) {\n      highlight.add(range);\n    } else {\n      CSS.highlights.set(key, new Highlight().add(range));\n    }\n    if (selection[key] === void 0) {\n      selection[key] =\n        `::highlight(${key}){color:var(--${token});background-color:var(--${token}-bg);text-decoration:var(--${token}-text-decoration);text-shadow:var(--${token}-text-shadow);-webkit-text-stroke-width:var(--${token}-stroke-width);-webkit-text-stroke-color:var(--${token}-stroke-color);}`;\n    }\n  }\n  function highlighter(\n    el: HTMLPreElement,\n    tokenize: TokenStream,\n    selection: Record<string, string>,\n    start = 0,\n  ) {\n    let pos = start;\n\n    if (Array.isArray(tokenize)) {\n      for (let i = 0, len = tokenize.length; i < len; i++) {\n        const token = tokenize[i];\n\n        if (typeof token !== 'object') {\n          pos += token.length;\n          continue;\n        }\n        pos = highlighter(el, token, selection, pos);\n      }\n      return pos;\n    }\n    if (typeof tokenize === 'object' && tokenize.type) {\n      if (el.firstChild) {\n        const token = (tokenize.alias ?? tokenize.type).toString();\n        const key = id + token;\n        const range = new Range();\n\n        if (['deleted', 'inserted'].includes(token)) {\n          // diff\n          range.setStart(el.firstChild, pos + 2);\n        } else {\n          range.setStart(el.firstChild, pos);\n        }\n        if (Array.isArray(tokenize.content)) {\n          pos = highlighter(el, tokenize.content, selection, pos);\n        } else if (typeof tokenize.content === 'string') {\n          pos += tokenize.content.length;\n        }\n        range.setEnd(el.firstChild, pos);\n        updateRang(key, token, range, selection);\n      }\n    }\n\n    return pos;\n  }\n  function syntax(\n    language: Language = 'markup' as Language,\n    value: string | null,\n    clear?: boolean,\n    prevCss = {},\n  ) {\n    if (timer) {\n      clearTimeout(timer);\n      timer = void 0;\n    }\n    const Prism = prismJS();\n\n    if (!value || !Prism) return;\n    timer = setTimeout(() => {\n      clearTimeout(timer);\n      if (CSS.highlights) {\n        if (clear) {\n          CSS.highlights.forEach((highlight, key) => {\n            if (key.startsWith(id)) {\n              highlight.clear();\n            }\n          });\n        }\n        const grammars = language.split(' ') as Language[],\n          grammar = Prism.languages[grammars[0]];\n\n        if (grammar) {\n          highlighter(codeEl, Prism.tokenize(value, grammar), prevCss);\n        }\n        if (grammars.length > 1 || grammars[0] === 'git') {\n          syntax(grammars[1], value, false, prevCss);\n        } else {\n          setHighlightCss(Object.values(prevCss).join(''));\n        }\n      } else {\n        throw Error('不支持 CSS Highlights');\n      }\n      timer = void 0;\n    }, 0);\n  }\n  createEffect(() => {\n    syntax(props.language, code(), true);\n  });\n  onCleanup(() => {\n    if (CSS.highlights) {\n      for (const key of CSS.highlights.keys()) {\n        if (key.startsWith(id)) {\n          CSS.highlights.delete(key);\n        }\n      }\n    }\n  });\n\n  return (\n    <>\n      <style textContent={isDark() ? darkCss : lightCss} />\n      <style textContent={highlightCss()} />\n      <style textContent={style} />\n      <Show when={props.css}>\n        <style textContent={css(props.css)} />\n      </Show>\n      <pre\n        classList={{\n          [`language-${props.language}`]: !!props.language,\n          'not-toolbar': !props.toolbar,\n          [props.class!]: !props.edit,\n        }}\n      >\n        <Show when={props.toolbar}>\n          <div class=\"toolbar\" data-language={title()}>\n            <button class=\"toolbar-copy\" aria-label=\"copy\" onClick={copy} />\n          </div>\n        </Show>\n        <code ref={codeEl!} contenteditable={props.edit} spellcheck={false} onInput={change}>\n          {code()}\n        </code>\n      </pre>\n    </>\n  );\n}\n\ncustomElement<CodeProps>(\n  'n-code',\n  {\n    class: void 0,\n    code: void 0,\n    language: void 0,\n    children: void 0,\n    edit: void 0,\n    toolbar: void 0,\n    css: void 0,\n    onChange: void 0,\n  },\n  (_, opt) => {\n    const { baseStyle } = theme;\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      clearAttribute(el, ['css', 'code']);\n      el.replaceChildren();\n    });\n    return (\n      <>\n        <style textContent={baseStyle()} />\n        <Code language={'atom'} {...props} />\n      </>\n    );\n  },\n);\nexport default Code;\n"],"names":["Code","props","codeEl","timer","isDark","theme","decoded","id","createUniqueId","code","setCode","createSignal","highlightCss","setHighlightCss","fetchPrism","window","Prism","disableWorkerMessageHandler","manual","default","prismJS","createResource","title","createMemo","language","split","pop","copy","setClipboard","untrack","createEffect","_next","test","decodeURIComponent","normalize","textContent","change","e","target","next","syntax","isFunction","onChange","value","clear","prevCss","clearTimeout","setTimeout","CSS","highlights","forEach","highlight","key","startsWith","grammars","grammar","languages","highlighter","el","tokenize","selection","start","pos","Array","isArray","i","len","length","token","type","firstChild","alias","toString","range","Range","includes","setStart","content","setEnd","updateRang","get","add","set","Highlight","Object","values","join","Error","onCleanup","keys","delete","darkCss","lightCss","style","Show","css","toolbar","class","edit","customElement","children","_","opt","baseStyle","element","mergeProps","val","dispatchEvent","CustomEvent","detail","clearAttribute","replaceChildren"],"mappings":"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"}

package/lib/code/style.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),function(o,r){for(var e in r)Object.defineProperty(o,e,{enumerable:!0,get:r[e]})}(exports,{darkCss:function(){return e},lightCss:function(){return a},style:function(){return r}});const o=require("@moneko/css"),r=(0,o.css)`
+"use strict";function o(o,r){for(var e in r)Object.defineProperty(o,e,{enumerable:!0,get:r[e]})}Object.defineProperty(exports,"__esModule",{value:!0}),o(exports,{darkCss:function(){return a},lightCss:function(){return t},style:function(){return e}});const r=require("@moneko/css"),e=(0,r.css)`
   :host {
     --code-font-stack: 'Liberation Mono', monaco, menlo, consolas, 'Source Code Pro', 'Ubuntu Mono',
       'Microsoft Yahei', '微软雅黑', courier, 'Helvetica Neue', 'Lantinghei SC', stxihei, wenquanyi,
@@ -58,30 +58,6 @@
     animation: copy-slide-out var(--transition-duration) forwards var(--transition-timing-function);
   }
 
-  @keyframes copy-slide-in {
-    from {
-      opacity: 0;
-      transform: translate3d(0, -100%, 0) scale(0);
-    }
-
-    to {
-      opacity: 1;
-      transform: translate3d(0, 0, 0) scale(1);
-    }
-  }
-
-  @keyframes copy-slide-out {
-    from {
-      opacity: 1;
-      transform: translate3d(0, 0, 0) scale(1);
-    }
-
-    to {
-      opacity: 0;
-      transform: translate3d(0, -100%, 0) scale(0);
-    }
-  }
-
   pre,
   code {
     display: block;
@@ -203,5 +179,28 @@
     block-size: 5px;
     inline-size: 5px;
   }
-`,e=(0,o.css)({":host":{"--code-color":"#eee","--code-lang-style-color":"#fd9170","--code-toolbar-bg":"rgb(63, 63, 63, 0.7)","--atrule":"#c792ea","--attr-name":"#9cdcfe","--attr-value":"#ce9178","--attr-equals":"#ccc","--attribute":"#a5e844","--boolean":"#c792ea","--builtin":"#ffcb6b","--cdata":"#80cbc4","--char":"#80cbc4","--class":"#ffcb6b","--class-name":"#f2ff00","--comment":"#616161","--constant":"#c792ea","--deleted":"#f66","--doctype":"#616161","--entity":"#f66","--function":"#dcdcaa","--hexcode":"#f2ff00","--id":"#c792ea","--important":"#c792ea","--inserted":"#80cbc4","--keyword":"#c792ea","--number":"#fd9170","--operator":"#89ddff","--prolog":"#616161","--property":"#80cbc4","--pseudo-class":"#a5e844","--pseudo-element":"#a5e844","--punctuation":"#89ddff","--regex":"#f2ff00","--selector":"#f66","--string":"#a5e844","--symbol":"#c792ea","--tag":"#569cd6","--unit":"#fd9170","--url":"#f66","--variable":"#f66"}}),a=(0,o.css)({":host":{"--code-color":"#90a4ae","--code-lang-style-color":"#f76d47","--namespace":"rgba(56, 64, 68, 0.7)","--tag":"#e53935","--atrule":"#7c4dff","--attr-name":"#39adb5","--attr-value":"#f6a434","--attr-equals":"#90a4ae","--attribute":"#f6a434","--boolean":"#7c4dff","--builtin":"#39adb5","--cdata":"#39adb5","--char":"#39adb5","--class":"#39adb5","--class-name":"#6182b8","--comment":"#aabfc9","--constant":"#7c4dff","--doctype":"#aabfc9","--entity":"#e53935","--hexcode":"#f76d47","--id":"#7c4dff","--important":"#7c4dff","--keyword":"#7c4dff","--number":"#f76d47","--operator":"#39adb5","--prolog":"#aabfc9","--property":"#39adb5","--pseudo-class":"#f6a434","--pseudo-element":"#f6a434","--punctuation":"#39adb5","--regex":"#6182b8","--selector":"#e53935","--string":"#f6a434","--symbol":"#7c4dff","--unit":"#f76d47","--url":"#e53935","--variable":"#e53935","--function":"#4078f2","--inserted":"#39adb5","--deleted":"#e53935","--name":"#39adb5"}});
-//# sourceMappingURL=style.js.map
+
+  @keyframes copy-slide-in {
+    from {
+      opacity: 0;
+      transform: translate3d(0, -100%, 0) scale(0);
+    }
+
+    to {
+      opacity: 1;
+      transform: translate3d(0, 0, 0) scale(1);
+    }
+  }
+
+  @keyframes copy-slide-out {
+    from {
+      opacity: 1;
+      transform: translate3d(0, 0, 0) scale(1);
+    }
+
+    to {
+      opacity: 0;
+      transform: translate3d(0, -100%, 0) scale(0);
+    }
+  }
+`,a=(0,r.css)({":host":{"--code-color":"#eee","--code-lang-style-color":"#fd9170","--code-toolbar-bg":"rgb(63, 63, 63, 0.7)","--atrule":"#c792ea","--attr-name":"#9cdcfe","--attr-value":"#ce9178","--attr-equals":"#ccc","--attribute":"#a5e844","--boolean":"#c792ea","--builtin":"#ffcb6b","--cdata":"#80cbc4","--char":"#80cbc4","--class":"#ffcb6b","--class-name":"#f2ff00","--comment":"#616161","--constant":"#c792ea","--doctype":"#616161","--entity":"#f66","--function":"#dcdcaa","--hexcode":"#f2ff00","--id":"#c792ea","--important":"#c792ea","--keyword":"#c792ea","--number":"#fd9170","--operator":"#569cd6","--prolog":"#616161","--property":"#80cbc4","--pseudo-class":"#a5e844","--pseudo-element":"#a5e844","--punctuation":"#89ddff","--regex":"#f2ff00","--selector":"#f66","--string":"#a5e844","--symbol":"#c792ea","--tag":"#569cd6","--unit":"#fd9170","--url":"#f66","--variable":"#f66","--inserted-bg":"rgba(0, 255, 128, .15)","--deleted-bg":"rgba(255, 0, 0, .15)"}}),t=(0,r.css)({":host":{"--code-color":"#90a4ae","--code-lang-style-color":"#f76d47","--namespace":"rgba(56, 64, 68, 0.7)","--tag":"#4b69c6","--atrule":"#7c4dff","--attr-name":"#39adb5","--attr-value":"#f6a434","--attr-equals":"#90a4ae","--attribute":"#f6a434","--boolean":"#7c4dff","--builtin":"#39adb5","--cdata":"#39adb5","--char":"#39adb5","--class":"#39adb5","--class-name":"#6182b8","--comment":"#aabfc9","--constant":"#7c4dff","--doctype":"#aabfc9","--entity":"#e53935","--hexcode":"#f76d47","--id":"#7c4dff","--important":"#7c4dff","--keyword":"#7c4dff","--number":"#f76d47","--operator":"#91b3e0","--prolog":"#aabfc9","--property":"#39adb5","--pseudo-class":"#f6a434","--pseudo-element":"#f6a434","--punctuation":"#39adb5","--regex":"#6182b8","--selector":"#e53935","--string":"#f6a434","--symbol":"#7c4dff","--unit":"#f76d47","--url":"#e53935","--variable":"#e53935","--function":"#4078f2","--name":"#39adb5","--prefix-inserted":"green","--prefix-deleted":"red","--inserted-bg":"rgba(0, 255, 128, .1)","--deleted-bg":"rgba(255, 0, 0, .1)"}});