update

apps/nuxt/.gitignore

@@ -22,4 +22,7 @@ logs
 !.env.example
 
 # graphql codegen
-/queries/codegen.ts
+/queries/codegen.ts
+
+# docker db volumes
+.db-data

apps/nuxt/components/Bar.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+  import {useCom1} from '~/use/use-com1'
+
+  const props = defineProps({})
+  const emit = defineEmits([])
+
+  const com1 = useCom1()
+
+  onMounted(() => {
+    com1.bar = 'bar!'
+  })
+
+  onUnmounted(() => {
+    com1.bar = ''
+  })
+</script>

apps/nuxt/components/Foo.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+  import {useCom1} from '~/use/use-com1'
+
+  const props = defineProps({})
+  const emit = defineEmits([])
+
+  const com1 = useCom1()
+
+  onMounted(() => {
+    com1.foo = 'foo!'
+  })
+
+  onUnmounted(() => {
+    com1.foo = ''
+  })
+</script>

apps/nuxt/components/pin-code-input/BPinCodeInput.vue

@@ -7,7 +7,12 @@
       :type="type"
       :focused="focused && index === lengthRef"
     />
-    <b-pin-code-receiver @input="onInput" @remove="onRemove" @enter="onEnter" />
+    <b-pin-code-receiver
+      class="pin-code-receiver"
+      @input="onInput"
+      @remove="onRemove"
+      @enter="onEnter"
+    />
   </div>
 </template>
 
@@ -42,7 +47,16 @@
 
 <style>
   .pin-code-input {
-    background-color: red;
-    display: flex;
+    background-color: black;
+    overflow: hidden;
+    display: inline-flex;
+    position: relative;
+  }
+  .pin-code-receiver {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
   }
 </style>

apps/nuxt/local-compose.yml

@@ -0,0 +1,12 @@
+version: "3"
+services:
+  db:
+    image: postgres:latest
+    container_name: postgres
+    ports:
+      - "5432:5432"
+    environment:
+      POSTGRES_USER: "user"
+      POSTGRES_PASSWORD: "pa22w0rd"
+    volumes:
+      - ./.db_data/:/var/lib/postgresql/data

apps/nuxt/package.json

@@ -7,7 +7,8 @@
     "generate": "nuxt generate",
     "preview": "nuxt preview",
     "prepare": "nuxt prepare",
-    "generator:graphql": "graphql-codegen"
+    "generator:graphql": "graphql-codegen",
+    "docker:up": "docker-compose -f local-compose.yml up -d"
   },
   "dependencies": {
     "nexus-prisma": "^1.0.17",
@@ -18,6 +19,7 @@
     "@byte-abc/lodash": "workspace:*",
     "@vueuse/core": "^9.13.0",
     "@quasar/extras": "^1.16.4",
+    "@byte-abc/use": "workspace:*",
     "nexus": "^1.3.0"
   },
   "devDependencies": {

apps/nuxt/pages/com1.vue

@@ -0,0 +1,43 @@
+<template>
+  <div>
+    com1
+    {{ foo }}
+    {{ bar }}
+    -----
+    <foo v-if="showFoo" />
+    <bar v-if="showBar" />
+    <button @click="onToggleFoo">toggle foo</button>
+    <button @click="onToggleBar">toggle bar</button>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import {ref} from 'vue'
+  import {provideCom1} from '~/use/use-com1'
+  import Bar from '~/components/Bar.vue'
+  import Foo from '~/components/Foo.vue'
+
+  const props = defineProps({})
+  const emit = defineEmits([])
+
+  const showFoo = ref(false)
+  const showBar = ref(false)
+
+  const com1 = provideCom1()
+
+  const foo = computed(() => {
+    return com1.foo
+  })
+
+  const bar = computed(() => {
+    return com1.bar
+  })
+
+  const onToggleFoo = () => {
+    showFoo.value = !showFoo.value
+  }
+
+  const onToggleBar = () => {
+    showBar.value = !showBar.value
+  }
+</script>

apps/nuxt/pages/index.vue

@@ -4,16 +4,19 @@
     <q-btn color="primary" label="Primary" />
     <div class="container text-red-700">container</div>
     <span>{{ JSON.stringify(data) }}</span>
+    <b-pin-code-input v-model="valueRef" />
   </q-page>
 </template>
 
 <script setup lang="ts">
-  import BPinCodeReceiver from '~/components/pin-code-input/BPinCodeReceiver.vue'
+  import {ref} from 'vue'
+  import BPinCodeInput from '~/components/pin-code-input/BPinCodeInput.vue'
   import {isNumber} from './is-number'
   import {GetHelloDocument} from '~/queries/codegen'
   import {isNil} from '@byte-abc/lodash'
   const props = defineProps({})
   const emit = defineEmits({})
+  const valueRef = ref()
   const onInput = (value: string) => {
     // console.log(value, isNil(null))
   }

apps/nuxt/use/use-com1.ts

@@ -0,0 +1,27 @@
+import {inject, InjectionKey, provide, reactive, ref} from 'vue'
+import {ReactiveOptions} from '@byte-abc/use'
+
+export interface Com1Context {
+  bar: string | undefined
+  foo: string | undefined
+}
+
+export const COM1_CONTEXT_KEY: InjectionKey<ReactiveOptions<Com1Context>> = Symbol('com1')
+
+export const createCom1 = (): ReactiveOptions<Com1Context> => {
+  return {
+    bar: ref<string | undefined>(),
+    foo: ref<string | undefined>(),
+  }
+}
+export const useCom1 = () => {
+  return reactive(inject(COM1_CONTEXT_KEY) ?? createCom1())
+}
+
+export const provideCom1 = () => {
+  const context = createCom1()
+
+  provide(COM1_CONTEXT_KEY, context)
+
+  return reactive(context)
+}

histoire.setup.ts

@@ -1,5 +1,6 @@
 import {defineSetupVue3} from '@histoire/plugin-vue'
 import {createPinia} from 'pinia'
+// import './tailwind.css'
 
 export const setupVue3 = defineSetupVue3(({app}) => {
   const pinia = createPinia()

packages/use/src/index.ts

@@ -0,0 +1,5 @@
+export * from './assign-ref'
+export * from './is-to-ref'
+export * from './is-writable-ref'
+export * from './resolve-ref'
+export * from './types'

packages/use/src/types/__tests__/reactive-options.spec.ts

@@ -0,0 +1,37 @@
+import {ReactiveOptions} from '../ref'
+import {reactive, ref, watch} from 'vue'
+import {flushPromises} from '@vue/test-utils'
+
+describe('reactive options', () => {
+  it('should be reactive options', async () => {
+    interface UseReactiveOptionsOptions {
+      foo?: string
+    }
+
+    const watchCallback = jest.fn()
+
+    const useReactiveOptions = (options: ReactiveOptions<UseReactiveOptionsOptions>) => {
+      const optionsObjectRef = reactive(options)
+
+      watch(
+        () => optionsObjectRef.foo,
+        (foo) => {
+          watchCallback(foo)
+        },
+        {immediate: true},
+      )
+    }
+
+    const foo = ref('foo')
+
+    useReactiveOptions({foo})
+
+    expect(watchCallback).toHaveBeenCalledWith('foo')
+
+    foo.value = 'bar'
+
+    await flushPromises()
+
+    expect(watchCallback).toHaveBeenCalledWith('bar')
+  })
+})

packages/use/src/types/component.ts

@@ -0,0 +1,6 @@
+import {ComponentPublicInstance, VNodeChild} from 'vue'
+
+export type Children = VNodeChild
+
+export type MaybeElement = ComponentPublicInstance | HTMLElement | null | undefined
+export type MaybeElementOrWindow = ComponentPublicInstance | HTMLElement | null | undefined | Window

packages/use/src/types/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

packages/use/src/types/index.ts

@@ -0,0 +1,3 @@
+export * from './component'
+export * from './props'
+export * from './ref'

packages/use/src/types/props.ts

@@ -0,0 +1,14 @@
+import {AllowedComponentProps, Component, VNodeProps} from 'vue'
+
+// using outside this package
+// noinspection JSUnusedGlobalSymbols
+export type ExtractComponentProps<C extends Component> = C extends new (...args: any) => any
+  ? Omit<InstanceType<C>['$props'], keyof VNodeProps | keyof AllowedComponentProps>
+  : never
+
+export type Data = Record<string, unknown>
+
+// noinspection JSUnusedGlobalSymbols
+export type FastPropObjectOptions<P = Data> = {
+  [K in keyof P]: null
+}

packages/use/src/types/ref.ts

@@ -0,0 +1,27 @@
+import {ComputedRef, Ref, ToRef, WatchSource, WritableComputedRef} from 'vue'
+
+/**
+ * 함수를 제외한 값들은 Ref 입니다 custom hook 만들때 리턴값으로 사용하면 좋습니다
+ */
+export type ToRefsValueOnly<T = any> = {
+  [K in keyof T]: T[K] extends (...args: any) => any ? T[K] : ToRef<T[K]>
+}
+
+/**
+ * 모든 종류의 Ref 입니다 또는 일반 변수 입니다
+ */
+export type MaybeRef<T> = Ref<T> | ComputedRef<T> | T | WritableComputedRef<T>
+
+/**
+ * 쓰기가능한 Ref 타입 입니다
+ */
+export type WritableRef<T> = WritableComputedRef<T> | Ref<T>
+
+/**
+ * 여러 WatchSource
+ */
+export type MultiWatchSources = (WatchSource<unknown> | object)[]
+
+export type ReactiveOptions<T> = {
+  [K in keyof T]: MaybeRef<T[K]>
+}