vue#toRaw TypeScript Examples

The following examples show how to use vue#toRaw. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: useRaw.ts    From formkit with MIT License 6 votes vote down vote up 
/**
 * Gets the raw underlying target object from a Vue Ref or Reactive object.
 * @param obj - Get the underlying target object, or no-op.
 * @returns
 */
// eslint-disable-next-line @typescript-eslint/ban-types
export default function useRaw<T extends unknown>(obj: T): T {
  if (obj === null || typeof obj !== 'object') return obj
  if (isReactive(obj)) {
    obj = toRaw(obj)
  } else if (isRef(obj)) {
    obj = (isReactive(obj.value) ? useRaw(obj.value as T) : obj.value) as T
  }
  return obj
}
Example #2
Source File: useSpreadSheet.ts    From S2 with MIT License 5 votes vote down vote up 
export function useSpreadSheet(
  props: BaseSheetProps,
  emit: EmitFn<BaseSheetInitEmits>,
) {
  const {
    dataCfg,
    options,
    themeCfg,
    loading: loadingProps,
    sheetType,
    onSpreadsheet,
    onGetSpreadSheet,
  } = props;
  const wrapperRef = ref<HTMLDivElement>();
  const containerRef = ref<HTMLDivElement>();

  const s2Ref = shallowRef<SpreadSheet>();

  const { loading, setLoading } = useLoading(s2Ref, loadingProps);
  const pagination = usePagination(s2Ref, props);

  // TODO: 如果onSpreadsheet属性变更了怎么办？？？
  const renderSpreadSheet = (container: HTMLDivElement) => {
    const rawDataCfg = toRaw(dataCfg!);
    const rawOptions = toRaw(options);

    const s2Options = getSheetComponentOptions(rawOptions as S2Options);
    const s2Constructor: S2Constructor = [container, rawDataCfg, s2Options];
    if (onSpreadsheet) {
      return onSpreadsheet(...s2Constructor);
    }
    if (sheetType === 'table') {
      return new TableSheet(container, rawDataCfg, s2Options);
    }
    return new PivotSheet(container, rawDataCfg, s2Options);
  };

  const buildSpreadSheet = () => {
    setLoading(true);
    s2Ref.value = renderSpreadSheet(containerRef.value!);
    s2Ref.value.setThemeCfg(toRaw(themeCfg));
    s2Ref.value.render();
    setLoading(false);
    onGetSpreadSheet?.(s2Ref.value);
  };

  onMounted(buildSpreadSheet);
  useEvents(s2Ref, emit);
  useSheetUpdate(s2Ref, props);
  useResize(s2Ref, props, { wrapperRef, containerRef });

  onBeforeUnmount(() => {
    s2Ref.value?.destroy();
  });

  return {
    wrapperRef,
    containerRef,
    s2Ref,
    loading,
    setLoading,
    pagination,
  };
}
Example #3
Source File: document-storage.ts    From quantum-sheet with GNU General Public License v3.0 5 votes vote down vote up 
export function useDocumentStorage() {
  /** Adds a file-handle to the storage and returns its ID */
  async function addFile(file: FileWithHandle): Promise<string> {
    await initPromise

    // Deduplicate file handles
    if (file.handle) {
      for (const existingFile of files.values()) {
        if (existingFile.fileHandle.handle && file.handle.isSameEntry(existingFile.fileHandle.handle)) {
          return existingFile.id
        }
      }
    }

    const id = uuidv4()
    const databaseFile: DatabaseFile = {
      id,
      fileHandle: file,
    }
    files.set(id, databaseFile)

    await set('documents', toRaw(files))

    return id
  }

  async function removeFile(id: string) {
    if (files.delete(id)) {
      await set('documents', toRaw(files))
    }
  }

  /** Gets the actual content of a file */
  async function getFileContent(id: string): Promise<string | undefined> {
    await initPromise

    const databaseFile = files.get(id)
    if (!databaseFile) return
    const fileContent = await databaseFile.fileHandle.text()
    return fileContent
  }

  /** Saves a file back to the harddisk */
  async function saveFile(opts: { id?: string; name?: string; content: string }) {
    const databaseFile = opts.id ? files.get(opts.id) : undefined
    const name = opts.name ?? databaseFile?.fileHandle.name ?? 'document'
    const hasExtension = /\.qd/.test(name)

    await fileSave(
      new Blob([opts.content], {
        type: 'text/plain',
      }),
      {
        fileName: hasExtension ? name : name + '.qd',
        extensions: ['.qd'],
      },
      databaseFile?.fileHandle?.handle
    )
  }

  return {
    isLoaded,
    addFile,
    removeFile,
    getFileContent,
    saveFile,
    files: computed(() =>
      Array.from(files.values()).map((v) => {
        return {
          id: v.id,
          name: v.fileHandle.name,
        }
      })
    ),
  }
}