vue-spear-tip 0.1.1 → 0.1.2

package/.github/workflows/publish.yml

@@ -1,25 +1,25 @@
-name: Publish Package
-on:
-  push:
-    branches: [ main ]
-  release:
-    types: [published]
-
-permissions:
-  contents: read
-
-jobs:
-  publish:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v5
-      - uses: actions/setup-node@v4
-        with:
-          node-version: '22'
-          registry-url: 'https://registry.npmjs.org'
-          token: ${{ secrets.NPM_TOKEN }}
-      - run: npm install -g npm@latest
-      - run: echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > ~/.npmrc
-      - run: npm publish
-        env:
+name: Publish Package
+on:
+  push:
+    branches: [ main ]
+  release:
+    types: [published]
+
+permissions:
+  contents: read
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v5
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+          registry-url: 'https://registry.npmjs.org'
+          token: ${{ secrets.NPM_TOKEN }}
+      - run: npm install -g npm@latest
+      - run: echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > ~/.npmrc
+      - run: npm publish
+        env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/README.md

@@ -1,13 +1,13 @@
-# Vue TypeScript Class Components 
-## (reactive OOP frontend programming)
-
-Vue 3 simple class components with @Watch, @Computed, @Prop decorators. 
-And UI KIT on them.
-
-#### Install
-```
-npm install vue-spear-tip
-```
-
-Use with vite + html/pug + typescript classes + sass/scss
-
+# Vue TypeScript Class Components 
+## (reactive OOP frontend programming)
+
+Vue 3 simple class components with @Watch, @Computed, @Prop decorators. 
+And UI KIT on them.
+
+#### Install
+```
+npm install vue-spear-tip
+```
+
+Use with vite + html/pug + typescript classes + sass/scss
+

package/index.cjs

@@ -1,5 +1,5 @@
-
-
-export default {
-
+
+
+export default {
+
 }

package/index.js

@@ -1,5 +1,5 @@
-
-
-export default {
-
+
+
+export default {
+
 }

package/package.json

@@ -1,17 +1,17 @@
-{
-  "name": "vue-spear-tip",
-  "version": "0.1.1",
-  "type": "module",
-  "main": "./index.cjs",
-  "module": "./index.js",
-  "exports": {
-    ".": {
-      "import": "./index.js",
-      "require": "./index.cjs",
-      "types": {
-        "require": "./index.d.cts",
-        "default": "./index.d.ts"
-      }
-    }
-  }
+{
+  "name": "vue-spear-tip",
+  "version": "0.1.2",
+  "type": "module",
+  "main": "./index.cjs",
+  "module": "./index.js",
+  "exports": {
+    ".": {
+      "import": "./index.js",
+      "require": "./index.cjs",
+      "types": {
+        "require": "./index.d.cts",
+        "default": "./index.d.ts"
+      }
+    }
+  }
 }

package/src/Interfaces/IBaseVueComponent.ts

@@ -1,7 +1,7 @@
-import IVueClass from './IVueClass'
-
-export default interface IBaseVueComponent extends IVueClass {
-  readonly $root: {
-    [key:string]:any
-  }
-}
+import IVueClass from './IVueClass'
+
+export default interface IBaseVueComponent extends IVueClass {
+  readonly $root: {
+    [key:string]:any
+  }
+}

package/src/Interfaces/IVueClass.ts

@@ -1,226 +1,226 @@
-import {VNode} from '@vue/runtime-core'
-
-/**
- * Наследуемый интерфейс компонента vue
- * @interface IVueClass
- * @typedef {Function} mounted Mount
- */
-export default interface IVueClass {
-  readonly mixins: Array<any>
-  readonly components: {[key:string|symbol|number]:any}
-  readonly emits: Array<string>
-  readonly emitsParent: Array<string>
-  readonly inject: Array<string>
-  readonly injectParent: Array<string>
-  readonly provide: {[key:string]:any}
-  readonly provideParent: {[key:string]:(...args: any) => any}
-  
-  /**
-   * Название компонента. Определяется автоматически по названию класса если наследовать от View.
-   */
-  readonly name: string
-  
-  /**
-   * Экземпляр класса. Учтите, что контекст this не будет содержать vue элементов.
-   */
-  readonly instance?: this
-  
-  /**
-   * Содержит привязки атрибутов и события в родительском компоненте,
-   * которые не были распознаны (и исключены) как
-   * [входные параметры](https://v3.ru.vuejs.org/ru/api/options-data.html#props)
-   * компонента или пользовательские события.
-   * Если компонент не объявляет входные параметры или
-   * [пользовательские события](https://v3.ru.vuejs.org/ru/api/options-data.html#emits),
-   * тут будут все привязки из родительского компонента,
-   * которые можно передать через v-bind="$attrs" внутреннему компоненту —
-   * удобно при создании компонентов высшего порядка (HOC, High Order Components).
-   *
-   * **См. также**
-   *
-   * [$attrs](https://v3.ru.vuejs.org/ru/api/instance-properties.html#attrs)
-   *
-   * [Передача обычных атрибутов](https://v3.ru.vuejs.org/ru/guide/component-attrs.html)
-   *
-   * [Options API / Разное — inheritAttrs](https://v3.ru.vuejs.org/ru/api/options-misc.html#inheritattrs)
-   */
-  readonly $attrs: Object
-  
-  /**
-   * Объект с данными, за которыми осуществляет наблюдение экземпляр компонента.
-   * Экземпляр компонента проксирует доступ к свойствам объекта данных.
-   *
-   * **См. также**
-   *
-   * [$data](https://v3.ru.vuejs.org/ru/api/instance-properties.html#data)
-   *
-   * [Options API / Локальное состояние — data](https://v3.ru.vuejs.org/ru/api/options-data.html#data)
-   */
-  readonly $data: Object
-  
-  /**
-   * Корневой элемент DOM, которым управляет экземпляр компонента.
-   *
-   * Для компонентов использующих [фрагменты](https://v3.ru.vuejs.org/ru/guide/migration/fragments.html),
-   * `$el` будет узлом DOM, с помощью которого Vue будет отслеживать место компонента в DOM.
-   * Рекомендуется использовать ссылки на элементы шаблона для доступа к элементам DOM напрямую,
-   * а не полагаться на `$el`
-   *
-   * **См. также**
-   *
-   * [$el](https://v3.ru.vuejs.org/ru/api/instance-properties.html#el)
-   */
-  readonly $el: HTMLElement
-  
-  /**
-   * Опции инициализации, используемые для текущего экземпляра компонента.
-   * Полезно, если потребуется добавить пользовательские свойства в опции:
-   *
-   * **См. также**
-   *
-   * [$options](https://v3.ru.vuejs.org/ru/api/instance-properties.html#options)
-   */
-  readonly $options: {
-    __scopeId: string
-    __file: string
-  }
-  
-  /**
-   * Родительский экземпляр, если таковой имеется
-   *
-   * **См. также**
-   *
-   * [$parent](https://v3.ru.vuejs.org/ru/api/instance-properties.html#parent)
-   */
-  readonly $parent: IVueClass|null
-  
-  /**
-   * Объект, содержащий текущие входные параметры, которые получил компонент.
-   * Экземпляр компонента проксирует доступ к свойствам объекта входных параметров.
-   *
-   * **См. также**
-   *
-   * [$props](https://v3.ru.vuejs.org/ru/api/instance-properties.html#props)
-   */
-  readonly $props: {[key:string]:any}
-  
-  /**
-   * Объект из DOM-элементов и экземпляров компонентов, зарегистрированных с помощью
-   * [атрибутов ref](https://v3.ru.vuejs.org/ru/guide/component-template-refs.html).
-   *
-   * **См. также**
-   *
-   * [Ссылки на элементы шаблона](https://v3.ru.vuejs.org/ru/guide/component-template-refs.html)
-   * [Специальные атрибуты — ref](https://v3.ru.vuejs.org/ru/api/special-attributes.html#ref)
-   */
-  readonly $refs: {
-    [key:string]:HTMLElement|HTMLInputElement|undefined|
-    HTMLElement[]|HTMLInputElement[]
-  }
-  
-  /**
-   * Экземпляр корневого компонента текущего дерева компонентов.
-   * Если у текущего экземпляра нет родителя, то значением будет он сам.
-   */
-  readonly $root: {
-    // [key:string]:any
-    readonly APP?: any
-  }|this|any
-  
-  /**
-   * Используется для программного доступа к содержимому, распределяемому с помощью слотов.
-   * Каждый именованный слот имеет соответствующее свойство
-   * (например, содержимое v-slot:foo будет доступно через this.$slots.foo()).
-   */
-  readonly $slots: {
-    default: () => VNode[]
-  } & {
-    [key: string]: (() => VNode[]) | undefined
-  }
-  
-  /**
-   * Генерирует событие на текущем экземпляре.
-   * Любые дополнительные аргументы будут переданы в callback функции прослушивания события.
-   * @param {String} eventName Название события
-   * @param {*} args Аргументы передаваемые в него
-   */
-  $emit(eventName: string, ...args: any[]): void
-  
-  /**
-   * Откладывает вызов коллбэка до следующего цикла обновления DOM.
-   * @param {Function} callback
-   */
-  $forceUpdate(callback?: Function): void
-  
-  /**
-   * Отслеживание изменений реактивного свойства или функции вычисляемого свойства.
-   * @param {String} source
-   * @param {Function} callback
-   * @param {VueWatchOptions} options
-   */
-  $watch(source?: string | Function, callback?: Function | object, options?: VueWatchOptions): void
-  
-  /**
-   * Откладывает вызов коллбэка до следующего цикла обновления DOM.
-   * @param {Function} callback
-   */
-  $nextTick(callback?: Function): void
-  
-  /** Параметры vue компонента */
-  readonly $: {
-    [key: string]: any,
-    uid: number,
-    app: {
-      [key: string]: any,
-      appContext: {
-        [key: string]: any,
-        version: string
-      }
-    },
-    vnode: {
-      [key: string]: any,
-      scopeId: string,
-    }
-  }
-  
-  
-  // Хуки жизненного цикла
-  beforeCreate(): void
-  created(): void
-  beforeMount(): void
-  mounted(): void
-  beforeUpdate(): void
-  updated(): void
-  beforeUnmount(): void
-  unmounted(): void
-  
-  // Родительские хуки
-  beforeCreateParent(): void
-  createdParent(): void
-  beforeMountParent(): void
-  mountedParent(): void
-  beforeUpdateParent(): void
-  updatedParent(): void
-  beforeUnmountParent(): void
-  unmountedParent(): void
-  
-  /**
-   * Рекурсивный пропуск шагов
-   * @param {Function} callback
-   * @param {Number} steps Количество шагов (тиков, смен сцен), которые нужно пропустить
-   */
-  nextTick(callback: () => void, steps?: number): void
-  
-  /**
-   * Проверка наличия внешнего обработчика события
-   * @param name
-   */
-  hasExternalHandlerEvent(name: string): boolean
-}
-
-export interface VueWatchOptions {
-  deep?: boolean,
-  immediate?: boolean,
-  once?: boolean,
-  flush?: string,
-}
+import {VNode} from '@vue/runtime-core'
+
+/**
+ * Наследуемый интерфейс компонента vue
+ * @interface IVueClass
+ * @typedef {Function} mounted Mount
+ */
+export default interface IVueClass {
+  readonly mixins: Array<any>
+  readonly components: {[key:string|symbol|number]:any}
+  readonly emits: Array<string>
+  readonly emitsParent: Array<string>
+  readonly inject: Array<string>
+  readonly injectParent: Array<string>
+  readonly provide: {[key:string]:any}
+  readonly provideParent: {[key:string]:(...args: any) => any}
+  
+  /**
+   * Название компонента. Определяется автоматически по названию класса если наследовать от View.
+   */
+  readonly name: string
+  
+  /**
+   * Экземпляр класса. Учтите, что контекст this не будет содержать vue элементов.
+   */
+  readonly instance?: this
+  
+  /**
+   * Содержит привязки атрибутов и события в родительском компоненте,
+   * которые не были распознаны (и исключены) как
+   * [входные параметры](https://v3.ru.vuejs.org/ru/api/options-data.html#props)
+   * компонента или пользовательские события.
+   * Если компонент не объявляет входные параметры или
+   * [пользовательские события](https://v3.ru.vuejs.org/ru/api/options-data.html#emits),
+   * тут будут все привязки из родительского компонента,
+   * которые можно передать через v-bind="$attrs" внутреннему компоненту —
+   * удобно при создании компонентов высшего порядка (HOC, High Order Components).
+   *
+   * **См. также**
+   *
+   * [$attrs](https://v3.ru.vuejs.org/ru/api/instance-properties.html#attrs)
+   *
+   * [Передача обычных атрибутов](https://v3.ru.vuejs.org/ru/guide/component-attrs.html)
+   *
+   * [Options API / Разное — inheritAttrs](https://v3.ru.vuejs.org/ru/api/options-misc.html#inheritattrs)
+   */
+  readonly $attrs: Object
+  
+  /**
+   * Объект с данными, за которыми осуществляет наблюдение экземпляр компонента.
+   * Экземпляр компонента проксирует доступ к свойствам объекта данных.
+   *
+   * **См. также**
+   *
+   * [$data](https://v3.ru.vuejs.org/ru/api/instance-properties.html#data)
+   *
+   * [Options API / Локальное состояние — data](https://v3.ru.vuejs.org/ru/api/options-data.html#data)
+   */
+  readonly $data: Object
+  
+  /**
+   * Корневой элемент DOM, которым управляет экземпляр компонента.
+   *
+   * Для компонентов использующих [фрагменты](https://v3.ru.vuejs.org/ru/guide/migration/fragments.html),
+   * `$el` будет узлом DOM, с помощью которого Vue будет отслеживать место компонента в DOM.
+   * Рекомендуется использовать ссылки на элементы шаблона для доступа к элементам DOM напрямую,
+   * а не полагаться на `$el`
+   *
+   * **См. также**
+   *
+   * [$el](https://v3.ru.vuejs.org/ru/api/instance-properties.html#el)
+   */
+  readonly $el: HTMLElement
+  
+  /**
+   * Опции инициализации, используемые для текущего экземпляра компонента.
+   * Полезно, если потребуется добавить пользовательские свойства в опции:
+   *
+   * **См. также**
+   *
+   * [$options](https://v3.ru.vuejs.org/ru/api/instance-properties.html#options)
+   */
+  readonly $options: {
+    __scopeId: string
+    __file: string
+  }
+  
+  /**
+   * Родительский экземпляр, если таковой имеется
+   *
+   * **См. также**
+   *
+   * [$parent](https://v3.ru.vuejs.org/ru/api/instance-properties.html#parent)
+   */
+  readonly $parent: IVueClass|null
+  
+  /**
+   * Объект, содержащий текущие входные параметры, которые получил компонент.
+   * Экземпляр компонента проксирует доступ к свойствам объекта входных параметров.
+   *
+   * **См. также**
+   *
+   * [$props](https://v3.ru.vuejs.org/ru/api/instance-properties.html#props)
+   */
+  readonly $props: {[key:string]:any}
+  
+  /**
+   * Объект из DOM-элементов и экземпляров компонентов, зарегистрированных с помощью
+   * [атрибутов ref](https://v3.ru.vuejs.org/ru/guide/component-template-refs.html).
+   *
+   * **См. также**
+   *
+   * [Ссылки на элементы шаблона](https://v3.ru.vuejs.org/ru/guide/component-template-refs.html)
+   * [Специальные атрибуты — ref](https://v3.ru.vuejs.org/ru/api/special-attributes.html#ref)
+   */
+  readonly $refs: {
+    [key:string]:HTMLElement|HTMLInputElement|undefined|
+    HTMLElement[]|HTMLInputElement[]
+  }
+  
+  /**
+   * Экземпляр корневого компонента текущего дерева компонентов.
+   * Если у текущего экземпляра нет родителя, то значением будет он сам.
+   */
+  readonly $root: {
+    // [key:string]:any
+    readonly APP?: any
+  }|this|any
+  
+  /**
+   * Используется для программного доступа к содержимому, распределяемому с помощью слотов.
+   * Каждый именованный слот имеет соответствующее свойство
+   * (например, содержимое v-slot:foo будет доступно через this.$slots.foo()).
+   */
+  readonly $slots: {
+    default: () => VNode[]
+  } & {
+    [key: string]: (() => VNode[]) | undefined
+  }
+  
+  /**
+   * Генерирует событие на текущем экземпляре.
+   * Любые дополнительные аргументы будут переданы в callback функции прослушивания события.
+   * @param {String} eventName Название события
+   * @param {*} args Аргументы передаваемые в него
+   */
+  $emit(eventName: string, ...args: any[]): void
+  
+  /**
+   * Откладывает вызов коллбэка до следующего цикла обновления DOM.
+   * @param {Function} callback
+   */
+  $forceUpdate(callback?: Function): void
+  
+  /**
+   * Отслеживание изменений реактивного свойства или функции вычисляемого свойства.
+   * @param {String} source
+   * @param {Function} callback
+   * @param {VueWatchOptions} options
+   */
+  $watch(source?: string | Function, callback?: Function | object, options?: VueWatchOptions): void
+  
+  /**
+   * Откладывает вызов коллбэка до следующего цикла обновления DOM.
+   * @param {Function} callback
+   */
+  $nextTick(callback?: Function): void
+  
+  /** Параметры vue компонента */
+  readonly $: {
+    [key: string]: any,
+    uid: number,
+    app: {
+      [key: string]: any,
+      appContext: {
+        [key: string]: any,
+        version: string
+      }
+    },
+    vnode: {
+      [key: string]: any,
+      scopeId: string,
+    }
+  }
+  
+  
+  // Хуки жизненного цикла
+  beforeCreate(): void
+  created(): void
+  beforeMount(): void
+  mounted(): void
+  beforeUpdate(): void
+  updated(): void
+  beforeUnmount(): void
+  unmounted(): void
+  
+  // Родительские хуки
+  beforeCreateParent(): void
+  createdParent(): void
+  beforeMountParent(): void
+  mountedParent(): void
+  beforeUpdateParent(): void
+  updatedParent(): void
+  beforeUnmountParent(): void
+  unmountedParent(): void
+  
+  /**
+   * Рекурсивный пропуск шагов
+   * @param {Function} callback
+   * @param {Number} steps Количество шагов (тиков, смен сцен), которые нужно пропустить
+   */
+  nextTick(callback: () => void, steps?: number): void
+  
+  /**
+   * Проверка наличия внешнего обработчика события
+   * @param name
+   */
+  hasExternalHandlerEvent(name: string): boolean
+}
+
+export interface VueWatchOptions {
+  deep?: boolean,
+  immediate?: boolean,
+  once?: boolean,
+  flush?: string,
+}

package/src/components/BaseComponent.vue

@@ -1,22 +1,22 @@
-<script lang="ts">
-import IBaseVueComponent from '../Interfaces/IBaseVueComponent'
-import VueClass from '../Vue/VueClass'
-
-/**
- * Базовый компонент.
- * В дальнейшем планируется в него внедрять полезные методы и реактивные свойства (размеры окна, тип и т.д.).
- * От него можно наследовать любой компонент.
- */
-export default abstract class BaseComponent extends VueClass implements IBaseVueComponent {
-  emitsParent = ['update:modelValue']
-  declare readonly $root: {
-    [key: string]: any
-  }
-  constructor() {
-    super()
-  }
-  mountedParent() {
-
-  }
-}
-</script>
+<script lang="ts">
+import IBaseVueComponent from '../Interfaces/IBaseVueComponent'
+import VueClass from '../Vue/VueClass'
+
+/**
+ * Базовый компонент.
+ * В дальнейшем планируется в него внедрять полезные методы и реактивные свойства (размеры окна, тип и т.д.).
+ * От него можно наследовать любой компонент.
+ */
+export default abstract class BaseComponent extends VueClass implements IBaseVueComponent {
+  emitsParent = ['update:modelValue']
+  declare readonly $root: {
+    [key: string]: any
+  }
+  constructor() {
+    super()
+  }
+  mountedParent() {
+
+  }
+}
+</script>