ivue 1.5.2 → 1.5.3

package/docs/docs/.vitepress/theme/index.js

@@ -1,5 +0,0 @@
-// .vitepress/theme/index.js
-import DefaultTheme from 'vitepress/theme'
-import './main.css'
-
-export default DefaultTheme

package/docs/docs/.vitepress/theme/main.css

@@ -1,29 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap');
-
-.VPNavBarTitle {
-  font-family: 'Public Sans';
-}
-
-.VPNavBarTitle a span {
-  font-size: 22px !important;
-}
-
-body {
-  /* font-family: 'Public Sans';  */
-}
-
-.button { 
-  padding: 5px 10px; 
-  border-color: var(--vp-custom-block-details-border);
-  color: var(--vp-custom-block-details-text);
-  background-color: var(--vp-custom-block-details-bg);
-  border-radius: 5px;  
-  margin-bottom: 2px;
-  transition: 0.5s;
-}
-.button:hover { 
-  opacity: 0.8;
-}
-.button:active { 
-  opacity:0.9;
-}

package/docs/docs/components/Button.vue

@@ -1,13 +0,0 @@
-<script setup lang="ts">
-defineProps({
-  href: String,
-  label: String,
-  inline: {
-    type: Boolean,
-    default: true
-  }
-});
-</script>
-<template>
-<a :href="'/ivue' + href" :style="`inline: ${inline};`">{{ label }}</a>
-</template>

package/docs/docs/components/Component.vue

@@ -1,20 +0,0 @@
-<script setup lang="ts">
-import { ivue } from "../../../lib/ivue";
-import { VueDd } from "vue-dd";
-import { ref } from 'vue';
-
-class Test2 {
-  prop = ref(1);
-  prop2 = ref(2);
-}
-const test = ivue(Test2);
-const a = "Coming soon";
-</script>
-<template>
-  
-
-  
-  <ClientOnly>
-    <vue-dd get-all-properties :save-focus="false" :open-level="1" :inline="false" v-model="test" name="class Test" />
-  </ClientOnly>
-</template>

package/docs/docs/components/advanced-usage/ConvertLegacy.vue

@@ -1,58 +0,0 @@
-<script setup lang="ts">
-class Chair {
-    // Defaults that will be common for all the instances
-    static backSupport: boolean = true;
-    static armRests: boolean = true;
-
-    // Instance properties
-    color: string;
-    seatHeight: number;
-    recliningAngle: number;
-    headSupport: boolean;
-    padding: string;
-    seatSize: string;
-    isHeightAdjustable: boolean;
-    isMovable: boolean;
-    type: string;
-
-    constructor(
-        color: string,
-        seatHeight: number,
-        recliningAngle: number,
-        headSupport: boolean,
-        padding: string,
-        seatSize: string,
-        isHeightAdjustable: boolean,
-        isMovable: boolean
-    ) {
-        // Defaults which can be changed by the subclass class.
-        this.color = color;
-        this.seatHeight = seatHeight;
-        this.recliningAngle = recliningAngle;
-        this.headSupport = headSupport || false;
-        this.padding = padding || "3 inch";
-        this.seatSize = seatSize || "16 inch";
-        this.isHeightAdjustable = isHeightAdjustable || false;
-        this.isMovable = isMovable || false;
-        this.type = "Chair";
-        console.log(Chair.printDefaultProps()); // Usage of static method inside constructor
-    } 
-
-    static logObjectProps(): void {
-        console.dir(this);
-    }
-
-    // Static within static usage
-    static printDefaultProps(): void {
-        console.log(`Chair Back Support = ${this.backSupport}`);
-        console.log(`Arm rests support = ${this.armRests}`);
-    }
-
-    adjustableHeight(): void {};
-    adjustAngle(): void {};
-    moveChair(): void {};    
-}
-</script>
-<template>
-  <div>Hello</div>
-</template>

package/docs/docs/components/guidelines/CounterExternalRefsDetailed.vue

@@ -1,41 +0,0 @@
-<script setup lang="ts">
-import { onMounted, ref } from 'vue';
-import { ivue, iref, iuse } from 'ivue';
-
-type SpanRef = HTMLElement | null;
-
-class Counter {
-  constructor(public span?: SpanRef) {
-    // Do not do this in the constructor() because this.span 
-    // still refers to this.span.value here:
-    // onMounted(() => { 
-    //   (this.span as HTMLElement /*❌*/).innerHTML = 'Initial span text!';
-    // });
-  }
-  init() {
-    // Do this inside init() because this.span (.value) is now
-    // flattened & (this) is now reactive():
-    onMounted(() => {
-      (this.span as HTMLElement/*✅*/).innerHTML = 'Initial span text!';
-    });
-  }
-  count = iref(0);
-  increment() {
-    this.count++;
-    (this.span as HTMLElement).innerHTML = String(this.count + 1);
-  }
-}
-
-const span = ref<SpanRef>(null);
-const counter = ivue(
-  Counter,
-  iuse(span)
-);
-
-defineExpose<Counter>(counter);
-</script>
-<template>
-  <a href="javascript:void(0)" @click="() => counter.increment()">Increment</a>
-  Count: {{ counter.count }} <br />
-  <span ref="span"></span>
-</template>

package/docs/docs/components/usage/CounterBasic.vue

@@ -1,18 +0,0 @@
-<script setup lang="ts">
-import { ivue, iref } from 'ivue';
-
-class Counter {
-  count = iref(0);
-  increment() {
-    this.count++;
-  }
-}
-
-const counter = ivue(Counter);
-</script>
-<template>
-  <a href="javascript:void(0)" @click="() => counter.increment()">
-    Increment
-  </a>
-  Count: {{ counter.count }}
-</template>

package/docs/docs/components/usage/CounterComposables.vue

@@ -1,29 +0,0 @@
-<script setup lang="ts">
-import { useMouse, usePointer } from '@vueuse/core';
-import { ivue, iref, iuse } from 'ivue';
-
-class Counter {
-  count = iref(0);
-  increment() {
-    this.count++;
-  }
-  mouse = iuse(useMouse);
-  pointer = iuse(usePointer);
-}
-
-const counter = ivue(Counter);
-</script>
-<template>
-  <a href="javascript:void(0)" @click="() => counter.increment()">
-    Increment
-  </a>
-  Count: {{ counter.count }} <br />
-  <br />
-  Mouse: <br />
-  X: {{ counter.mouse.x }} <br />
-  Y: {{ counter.mouse.y }} <br />
-  <br />
-  Pointer: <br />
-  X: {{ counter.pointer.x }} <br />
-  Y: {{ counter.pointer.y }} <br />
-</template>

package/docs/docs/components/usage/CounterComposablesDestructuring.vue

@@ -1,55 +0,0 @@
-<script setup lang="ts">
-import { useCustomMouse } from './functions/useCustomMouse';
-
-import { ivue, iuse, iref, type Use } from 'ivue';
-
-/**
- * Use the ivue Utility Type: Use<typeof YourComposableFunctionName>
- * to get he resulting unwrapped composable properties and functions.
- */
-type UseCustomMouse = Use<typeof useCustomMouse>;
-
-class Counter {
-  count = iref(0);
-
-  increment() {
-    this.count++;
-  }
-
-  /**
-   * 'x', 'y', 'sum', 'total' are Refs that will be unwrapped to their bare raw types and destructured into the class.
-   * Even though unwrapped (de-Refed), they will maintain their behavior as Refs and thus will maintain reactivity
-   * and at the same time get destructured into this class root level scope because
-   * Vue 3's `reactive()` Proxy will be able to resolve those Refs internally.
-   */
-  x: UseCustomMouse['x']; // Unwrapped Ref<number> becomes -> number
-  y: UseCustomMouse['y']; // Unwrapped Ref<number> becomes -> number
-
-  sum: UseCustomMouse['sum']; // 'sum' method that will be destructured into this class on construct()
-  total: UseCustomMouse['total']; // 'total' computed Ref that will also be destructured into this class on construct()
-
-  constructor() {
-    ({
-      x: this.x,
-      y: this.y,
-      sum: this.sum,
-      total: this.total,
-    } = iuse(useCustomMouse, 5));
-  }
-}
-
-const counter = ivue(Counter);
-</script>
-<template>
-  <a href="javascript:void(0)" @click="() => counter.increment()">
-    Increment
-  </a>
-  Count: {{ counter.count }} <br />
-  Mouse X: {{ counter.x }}, Y: {{ counter.y }}
-  <br />
-  Total (computed): {{ counter.total }}
-  <br />
-  <button class="button" @click="() => counter.sum()">
-    Click This Big Sum Button To Total X + Y
-  </button>
-</template>

package/docs/docs/components/usage/CounterComposablesIvue.vue

@@ -1,30 +0,0 @@
-<script setup lang="ts">
-import { CustomMouse } from './classes/CustomMouse';
-
-import { ivue, iref } from 'ivue';
-
-class Counter {
-  count = iref(0);
-
-  increment() {
-    this.count++;
-  }
-
-  mouse = ivue(CustomMouse, 5);
-}
-
-const counter = ivue(Counter);
-</script>
-<template>
-  <a href="javascript:void(0)" @click="() => counter.increment()">
-    Increment
-  </a>
-  Count: {{ counter.count }} <br />
-  Mouse X: {{ counter.mouse.x }}, Y: {{ counter.mouse.y }}
-  <br />
-  Total (computed): {{ counter.mouse.total }}
-  <br />
-  <button class="button" @click="() => counter.mouse.sum()">
-    Click This Big Sum Button To Total X + Y
-  </button>
-</template>

package/docs/docs/components/usage/CounterComposablesIvueDestructuring.vue

@@ -1,48 +0,0 @@
-<script setup lang="ts">
-import { CustomMouse } from './classes/CustomMouse';
-
-import { ivue, iref } from 'ivue';
-
-class Counter {
-  count = iref(0);
-
-  increment() {
-    this.count++;
-  }
-
-  /**
-   * 'x', 'y', 'total' are Refs that will be unwrapped to their bare raw types and destructured into the class.
-   * Even though unwrapped (de-Refed), they will maintain their behavior as Refs and thus will maintain reactivity
-   * and at the same time get destructured into this class root level scope because
-   * Vue 3's `reactive()` Proxy will be able to resolve those Refs internally.
-   */
-  x: CustomMouse['x']; // Unwrapped Ref<number> becomes -> number
-  y: CustomMouse['y']; // Unwrapped Ref<number> becomes -> number
-  total: CustomMouse['total']; // Unwrapped ComputedRef<number> becomes -> number
-  sum: CustomMouse['sum']; // Function remains a function
-
-  constructor() {
-    ({
-      x: this.x,
-      y: this.y,
-      sum: this.sum,
-      total: this.total,
-    } = ivue(CustomMouse, 5).toRefs(true));
-  }
-}
-
-const counter = ivue(Counter);
-</script>
-<template>
-  <a href="javascript:void(0)" @click="() => counter.increment()">
-    Increment
-  </a>
-  Count: {{ counter.count }} <br />
-  Mouse X: {{ counter.x }}, Y: {{ counter.y }}
-  <br />
-  Total (computed): {{ counter.total }}
-  <br />
-  <button class="button" @click="() => counter.sum()">
-    Click This Big Sum Button To Total X + Y
-  </button>
-</template>

package/docs/docs/components/usage/CounterComputeds.vue

@@ -1,26 +0,0 @@
-<script setup lang="ts">
-import { ivue, iref } from 'ivue';
-
-class Counter {
-  count = iref(0);
-  increment() {
-    this.count++;
-  }
-  get doubleCount() {
-    return this.count * 2;
-  }
-  get quadCount() {
-    return this.doubleCount * 2;
-  }
-}
-
-const counter = ivue(Counter);
-</script>
-<template>
-  <a href="javascript:void(0)" @click="() => counter.increment()">
-    Increment
-  </a>
-  Count: {{ counter.count }} <br />
-  Double Count: {{ counter.doubleCount }} <br />
-  Quad Count: {{ counter.quadCount }} <br />
-</template>

package/docs/docs/components/usage/CounterComputedsDisabled.vue

@@ -1,33 +0,0 @@
-<script setup lang="ts">
-import { ivue, iref } from 'ivue';
-
-class Counter {
-  /**
-   * Use static ivue property to disable computed
-   * behavior for certain getters.
-   */
-  static ivue = {
-    doubleCount: false, // doubleCount is a regular getter now
-  };
-  count = iref(0);
-  increment() {
-    this.count++;
-  }
-  get doubleCount() {
-    return this.count * 2;
-  }
-  get quadCount() {
-    return this.doubleCount * 2;
-  }
-}
-
-const counter = ivue(Counter);
-</script>
-<template>
-  <a href="javascript:void(0)" @click="() => counter.increment()">
-    Increment
-  </a>
-  Count: {{ counter.count }} <br />
-  Double Count: {{ counter.doubleCount }} <br />
-  Quad Count: {{ counter.quadCount }} <br />
-</template>

package/docs/docs/components/usage/CounterDefineExpose.vue

@@ -1,12 +0,0 @@
-<script setup lang="ts">
-import { ivue } from 'ivue';
-
-import Counter from './CounterDefineExposeClass'
-
-const counter = ivue(Counter);
-
-defineExpose<Counter>(counter);
-</script>
-<template>
-  Count: {{ counter.count }}
-</template>

package/docs/docs/components/usage/CounterDefineExposeAdvanced.vue

@@ -1,24 +0,0 @@
-<script setup lang="ts">
-import { ivue, iref } from 'ivue';
-
-/** 
- * See that only 'count', 'increment' properties are picked 
- * for the define expose interface. 
- */
-export type CounterExposed = Pick<Counter, 'count' | 'increment'>;
-
-class Counter {
-  count = iref(0);
-  increment() {
-    this.count++;
-  }
-  decrement() {
-    this.count--;
-  }
-}
-
-const counter = ivue(Counter);
-
-defineExpose<CounterExposed>(counter);
-</script>
-<template>Count: {{ counter.count }}</template>

package/docs/docs/components/usage/CounterDefineExposeClass.ts

@@ -1,11 +0,0 @@
-import { iref } from 'ivue';
-
-export default class Counter {
-  count = iref(0);
-  increment() {
-    this.count++;
-  }
-  decrement() {
-    this.count--;
-  }
-}

package/docs/docs/components/usage/CounterExternalRefs.vue

@@ -1,27 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue';
-import { ivue, iref, iuse } from 'ivue';
-
-type SpanRef = HTMLElement | null;
-
-class Counter {
-  constructor(public span: SpanRef) {}
-  count = iref(0);
-  increment() {
-    this.count++;
-    (this.span as HTMLElement).innerHTML = String(this.count + 1);
-  }
-}
-
-const span = ref<SpanRef>(null);
-const counter = ivue(Counter, iuse(span));
-
-defineExpose<Counter>(counter);
-</script>
-<template>
-  <a href="javascript:void(0)" @click="() => counter.increment()">
-    Increment
-  </a>
-  Count: {{ counter.count }}
-  <span ref="span"></span>
-</template>

package/docs/docs/components/usage/CounterInsideComposables.vue

@@ -1,28 +0,0 @@
-<script setup lang="ts">
-import { ivue, iref } from 'ivue';
-
-class Counter {
-  count = iref(0);
-  increment() {
-    this.count++;
-  }
-}
-
-function useCounter() {
-  /** Convert ivue Counter to a composable with .toRefs() */
-  const { count, increment } = ivue(Counter).toRefs();
-
-  return {
-    count,
-    increment,
-  };
-}
-
-const { count, increment } = useCounter();
-</script>
-<template>
-  <a href="javascript:void(0)" @click="increment">
-    Increment
-  </a>
-  Count: {{ count }} <br />
-</template>

package/docs/docs/components/usage/CounterInternalRefs.vue

@@ -1,27 +0,0 @@
-<script setup lang="ts">
-import { ivue, iref } from 'ivue';
-
-class Counter {
-  count = iref(0);
-  span = iref<HTMLElement | null>(null);
-  increment() {
-    this.count++;
-    (this.span as HTMLElement).innerHTML = String(this.count + 1);
-  }
-}
-
-const counter = ivue(Counter);
-const { span } = counter.toRefs(['span']);
-/**
- * Or you can use `const { span } = counter.toRefs();`
- * but `const { span } = counter.toRefs(['span']);` is more performant
- * because we are only looping through 1 property instead of all of them.
- */
-</script>
-<template>
-  <a href="javascript:void(0)" @click="() => counter.increment()">
-    Increment
-  </a>
-  Count: {{ counter.count }}
-  <span ref="span"></span>
-</template>

package/docs/docs/components/usage/CounterLifecycleHooks.vue

@@ -1,24 +0,0 @@
-<script setup lang="ts">
-import { onMounted } from 'vue';
-import { ivue, iref } from 'ivue';
-
-class Counter {
-  init() {
-    onMounted(() => {
-      this.count = 100;
-    });
-  }
-  count = iref(0);
-  increment() {
-    this.count++;
-  }
-}
-
-const counter = ivue(Counter);
-</script>
-<template>
-  <a href="javascript:void(0)" @click="() => counter.increment()">
-    Increment
-  </a>
-  Count: {{ counter.count }} (onMounted we set it to 100)
-</template>

package/docs/docs/components/usage/CounterWatch.vue

@@ -1,30 +0,0 @@
-<script setup lang="ts">
-import { watch } from 'vue';
-import { ivue, iref } from 'ivue';
-
-class Counter {
-  init() {
-    /** Note that we use this.count as a reactive prop in the watch() function */
-    watch(
-      () => this.count,
-      (newCount) => {
-        if (newCount === 5) {
-          alert('You already clicked 5 times!');
-        }
-      }
-    );
-  }
-  count = iref(0);
-  increment() {
-    this.count++;
-  }
-}
-
-const counter = ivue(Counter);
-</script>
-<template>
-  <a href="javascript:void(0)" @click="() => counter.increment()">
-    Increment
-  </a>
-  Count: {{ counter.count }} (Click 5 times to get an alert)
-</template>

package/docs/docs/components/usage/CounterWithProps.vue

@@ -1,30 +0,0 @@
-<script setup lang="ts">
-import { ivue, iref } from 'ivue';
-
-interface CounterProps {
-  initialCount: number;
-}
-const props = defineProps<CounterProps>();
-
-class Counter {
-  constructor(public props: CounterProps) {
-    this.count = this.props.initialCount;
-  }
-  count = iref(0);
-  increment() {
-    this.count++;
-  }
-}
-
-/**
- * NOTICE that: ivue(ClassName, ...args) uses TypeScript to infer
- * the correct argument types that you need to pass to the constructor.
- */
-const counter = ivue(Counter, props);
-</script>
-<template>
-  <a href="javascript:void(0)" @click="() => counter.increment()">
-    Increment
-  </a>
-  Count: {{ counter.count }}
-</template>

package/docs/docs/components/usage/CounterWithPropsAndEmits.vue

@@ -1,37 +0,0 @@
-<script setup lang="ts">
-import { ivue, iref } from 'ivue';
-
-interface CounterProps {
-  initialCount: number;
-}
-
-interface CounterEmits {
-  (e: 'increment', count: number): void;
-}
-
-const props = defineProps<CounterProps>();
-const emit = defineEmits<CounterEmits>();
-
-class Counter {
-  constructor(public props: CounterProps, public emit: CounterEmits) {
-    this.count = this.props.initialCount;
-  }
-  count = iref(0);
-  increment() {
-    this.count++;
-    this.emit('increment', this.count);
-  }
-}
-
-/**
- * NOTICE that: ivue(ClassName, ...args) uses TypeScript to infer
- * the correct argument types that you need to pass to the constructor.
- */
-const counter = ivue(Counter, props, emit);
-</script>
-<template>
-  <a href="javascript:void(0)" @click="() => counter.increment()">
-    Increment
-  </a>
-  Count: {{ counter.count }}
-</template>