@windwalker-io/unicorn-next 0.1.0 → 0.1.1

package/scss/switcher.scss

@@ -1,156 +1,156 @@
-/* The switch - the box around the slider */
-// @see https://www.w3schools.com/howto/howto_css_switch.asp
-
-$colors: 'primary', 'secondary', 'success', 'info', 'danger', 'warning', 'dark', 'light';
-
-.unicorn-switch {
-  position: relative;
-  display: inline-block;
-  width: 60px;
-  height: 34px;
-  margin-bottom: 0;
-
-  /* Hide default HTML checkbox */
-  input {
-    width: 0;
-    height: 0;
-    position: relative;
-    left: 30px;
-
-    &:focus {
-      box-shadow: none !important;
-    }
-  }
-
-  /* The slider */
-  .switch-slider {
-    position: absolute;
-    cursor: pointer;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    -webkit-transition: .4s;
-    transition: .4s;
-
-    // BS variables
-    background-color: var(--bs-btn-bg);
-
-    &:hover {
-      background-color: var(--bs-btn-hover-bg);
-    }
-
-    @each $color in $colors {
-      &.btn-#{$color} {
-        // BS variables
-        background-color: var(--bs-btn-bg, var(--bs-#{$color}, var(--#{$color})));
-
-        &:hover {
-          background-color: var(--bs-btn-hover-bg, var(--bs-#{$color}, var(--#{$color})));
-        }
-      }
-    }
-  }
-
-  input:focus + .switch-slider {
-    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
-  }
-
-  .switch-slider.bg-default {
-    background-color: #ccc;
-  }
-
-  .switch-slider:before {
-    position: absolute;
-    content: "";
-    height: 26px;
-    width: 26px;
-    left: 4px;
-    bottom: 4px;
-    background-color: white;
-    -webkit-transition: .4s;
-    transition: .25s;
-  }
-
-  input:checked + .switch-slider:before {
-    transform: translateX(26px);
-  }
-
-  input:not(:checked) + .switch-slider {
-    background-color: #ccc !important;
-
-    &:hover {
-      background-color: #aaa !important;
-    }
-  }
-
-  input[disabled] + .switch-slider,
-  input[readonly] + .switch-slider {
-    opacity: .65;
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-
-  /* Rounded sliders */
-  .switch-slider.slider-round {
-    border-radius: .25rem;
-  }
-
-  .switch-slider.slider-round:before {
-    border-radius: .18rem;
-  }
-
-  // Circle sliders
-  .switch-slider.slider-circle {
-    border-radius: 50px;
-  }
-
-  .switch-slider.slider-circle:before {
-    border-radius: 100px;
-  }
-
-  // Size
-  &.switch-sm {
-    width: 46px;
-    height: 24px;
-
-    .switch-slider:before {
-      height: 18px;
-      width: 18px;
-      left: 3px;
-      bottom: 3px;
-    }
-
-    input:checked + .switch-slider:before {
-      transform: translateX(22px);
-    }
-
-    //.switch-slider.slider-round {
-    //  border-radius: .2rem;
-    //}
-    //
-    //.switch-slider.slider-round:before {
-    //  border-radius: .15rem;
-    //}
-  }
-
-  &.switch-lg {
-    width: 100px;
-    height: 34px;
-
-    .switch-slider:before {
-      height: 26px;
-      width: 45px;
-      left: 4px;
-      bottom: 4px;
-    }
-
-    input:checked + .switch-slider:before {
-      transform: translateX(47px);
-    }
-  }
-}
-
-.has-invalid .unicorn-switch .switch-slider {
-  border: 1px solid #dc3545;
-}
+/* The switch - the box around the slider */
+// @see https://www.w3schools.com/howto/howto_css_switch.asp
+
+$colors: 'primary', 'secondary', 'success', 'info', 'danger', 'warning', 'dark', 'light';
+
+.unicorn-switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+  margin-bottom: 0;
+
+  /* Hide default HTML checkbox */
+  input {
+    width: 0;
+    height: 0;
+    position: relative;
+    left: 30px;
+
+    &:focus {
+      box-shadow: none !important;
+    }
+  }
+
+  /* The slider */
+  .switch-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    -webkit-transition: .4s;
+    transition: .4s;
+
+    // BS variables
+    background-color: var(--bs-btn-bg);
+
+    &:hover {
+      background-color: var(--bs-btn-hover-bg);
+    }
+
+    @each $color in $colors {
+      &.btn-#{$color} {
+        // BS variables
+        background-color: var(--bs-btn-bg, var(--bs-#{$color}, var(--#{$color})));
+
+        &:hover {
+          background-color: var(--bs-btn-hover-bg, var(--bs-#{$color}, var(--#{$color})));
+        }
+      }
+    }
+  }
+
+  input:focus + .switch-slider {
+    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+  }
+
+  .switch-slider.bg-default {
+    background-color: #ccc;
+  }
+
+  .switch-slider:before {
+    position: absolute;
+    content: "";
+    height: 26px;
+    width: 26px;
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
+    -webkit-transition: .4s;
+    transition: .25s;
+  }
+
+  input:checked + .switch-slider:before {
+    transform: translateX(26px);
+  }
+
+  input:not(:checked) + .switch-slider {
+    background-color: #ccc !important;
+
+    &:hover {
+      background-color: #aaa !important;
+    }
+  }
+
+  input[disabled] + .switch-slider,
+  input[readonly] + .switch-slider {
+    opacity: .65;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  /* Rounded sliders */
+  .switch-slider.slider-round {
+    border-radius: .25rem;
+  }
+
+  .switch-slider.slider-round:before {
+    border-radius: .18rem;
+  }
+
+  // Circle sliders
+  .switch-slider.slider-circle {
+    border-radius: 50px;
+  }
+
+  .switch-slider.slider-circle:before {
+    border-radius: 100px;
+  }
+
+  // Size
+  &.switch-sm {
+    width: 46px;
+    height: 24px;
+
+    .switch-slider:before {
+      height: 18px;
+      width: 18px;
+      left: 3px;
+      bottom: 3px;
+    }
+
+    input:checked + .switch-slider:before {
+      transform: translateX(22px);
+    }
+
+    //.switch-slider.slider-round {
+    //  border-radius: .2rem;
+    //}
+    //
+    //.switch-slider.slider-round:before {
+    //  border-radius: .15rem;
+    //}
+  }
+
+  &.switch-lg {
+    width: 100px;
+    height: 34px;
+
+    .switch-slider:before {
+      height: 26px;
+      width: 45px;
+      left: 4px;
+      bottom: 4px;
+    }
+
+    input:checked + .switch-slider:before {
+      transform: translateX(47px);
+    }
+  }
+}
+
+.has-invalid .unicorn-switch .switch-slider {
+  border: 1px solid #dc3545;
+}

package/src/app.ts

@@ -1,128 +1,128 @@
-
-import { Mixin } from 'ts-mixer';
-import { data } from './data';
-import { EventAwareInterface, EventMixin } from './events';
-import { domready } from './service';
-import { Constructor, UnicornPlugin } from './types';
-
-export type InjectionKey<T = any> = string | symbol | Constructor<T>;
-
-export interface UnicornApp extends EventAwareInterface {}
-
-export class UnicornApp extends Mixin(EventMixin) implements EventAwareInterface {
-  registry = new Map();
-  plugins = new Map();
-  // _listeners = {};
-  waits: Promise<any>[] = [];
-  options: Record<string, any>;
-  defaultOptions: Record<string, any> = {};
-  domready = domready;
-  data = data;
-
-  constructor(options = {}) {
-    super();
-    this.options = Object.assign({}, this.defaultOptions, options);
-
-    // Wait dom ready
-    if (typeof document !== 'undefined') {
-      this.wait((resolve: Function) => {
-        document.addEventListener('DOMContentLoaded', () => resolve());
-      });
-
-      // Ready
-      document.addEventListener('DOMContentLoaded', () => {
-        this.completed().then(() => this.trigger('loaded'));
-      });
-    }
-  }
-
-  use(plugin: UnicornPlugin, options: Record<string, any> = {}) {
-    if (Array.isArray(plugin)) {
-      plugin.forEach(p => this.use(p));
-      return this;
-    }
-
-    // if (plugin.is === undefined) {
-    //   throw new Error(`Plugin: ${plugin.name} must instance of : ${Plugin.name}`);
-    // }
-
-    plugin?.install?.(this, options);
-
-    this.trigger('plugin.installed', plugin);
-
-    this.plugins.set(plugin, plugin);
-
-    return this;
-  }
-
-  detach(plugin: any) {
-    if (plugin.uninstall) {
-      plugin.uninstall(this);
-    }
-
-    this.trigger('plugin.uninstalled', plugin);
-
-    return this;
-  }
-
-  inject<T>(id: InjectionKey<T>): T;
-  inject<T>(id: InjectionKey<T>, def: T): T;
-  inject<T>(id: InjectionKey<T>, def?: T): T;
-  inject<T>(id: InjectionKey<T>, def?: T): T | undefined {
-    if (!typeof this.registry.has(id)) {
-      if (def !== undefined) {
-        return def;
-      }
-
-      throw new Error(`Injectable: ${(id as any).name} not found.`);
-    }
-
-    return this.registry.get(id);
-  }
-
-  provide<T>(id: InjectionKey<T>, value: any) {
-    this.registry.set(id, value);
-
-    return this;
-  }
-
-  // trigger(event, ...args) {
-  //   return this.tap(super.trigger(event, ...args), () => {
-  //     if (this.data('windwalker.debug')) {
-  //       console.debug(`[Unicorn Event] ${event}`, args, this.listeners(event));
-  //     }
-  //   });
-  // }
-
-  wait(callback: Function): Promise<any> {
-    const p = new Promise((resolve, reject) => {
-      const promise = callback(resolve, reject);
-
-      if (promise && 'then' in promise) {
-        promise.then(resolve).catch(reject);
-      }
-    });
-
-    this.waits.push(p);
-
-    return p;
-  }
-
-  completed(): Promise<any[]> {
-    const promise = Promise.all(this.waits);
-
-    this.waits = [];
-
-    return promise;
-  }
-
-  macro(name: string, callback: Function) {
-    if ((this as any)[name]) {
-      throw new Error(`Macro: ${name} already exists.`);
-    }
-
-    (this as any)[name] = callback;
-
-    return this;
-  }
-}
+
+import { Mixin } from 'ts-mixer';
+import { data } from './data';
+import { EventAwareInterface, EventMixin } from './events';
+import { domready } from './service';
+import { Constructor, UnicornPlugin } from './types';
+
+export type InjectionKey<T = any> = string | symbol | Constructor<T>;
+
+export interface UnicornApp extends EventAwareInterface {}
+
+export class UnicornApp extends Mixin(EventMixin) implements EventAwareInterface {
+  registry = new Map();
+  plugins = new Map();
+  // _listeners = {};
+  waits: Promise<any>[] = [];
+  options: Record<string, any>;
+  defaultOptions: Record<string, any> = {};
+  domready = domready;
+  data = data;
+
+  constructor(options = {}) {
+    super();
+    this.options = Object.assign({}, this.defaultOptions, options);
+
+    // Wait dom ready
+    if (typeof document !== 'undefined') {
+      this.wait((resolve: Function) => {
+        document.addEventListener('DOMContentLoaded', () => resolve());
+      });
+
+      // Ready
+      document.addEventListener('DOMContentLoaded', () => {
+        this.completed().then(() => this.trigger('loaded'));
+      });
+    }
+  }
+
+  use(plugin: UnicornPlugin, options: Record<string, any> = {}) {
+    if (Array.isArray(plugin)) {
+      plugin.forEach(p => this.use(p));
+      return this;
+    }
+
+    // if (plugin.is === undefined) {
+    //   throw new Error(`Plugin: ${plugin.name} must instance of : ${Plugin.name}`);
+    // }
+
+    plugin?.install?.(this, options);
+
+    this.trigger('plugin.installed', plugin);
+
+    this.plugins.set(plugin, plugin);
+
+    return this;
+  }
+
+  detach(plugin: any) {
+    if (plugin.uninstall) {
+      plugin.uninstall(this);
+    }
+
+    this.trigger('plugin.uninstalled', plugin);
+
+    return this;
+  }
+
+  inject<T>(id: InjectionKey<T>): T;
+  inject<T>(id: InjectionKey<T>, def: T): T;
+  inject<T>(id: InjectionKey<T>, def?: T): T;
+  inject<T>(id: InjectionKey<T>, def?: T): T | undefined {
+    if (!typeof this.registry.has(id)) {
+      if (def !== undefined) {
+        return def;
+      }
+
+      throw new Error(`Injectable: ${(id as any).name} not found.`);
+    }
+
+    return this.registry.get(id);
+  }
+
+  provide<T>(id: InjectionKey<T>, value: any) {
+    this.registry.set(id, value);
+
+    return this;
+  }
+
+  // trigger(event, ...args) {
+  //   return this.tap(super.trigger(event, ...args), () => {
+  //     if (this.data('windwalker.debug')) {
+  //       console.debug(`[Unicorn Event] ${event}`, args, this.listeners(event));
+  //     }
+  //   });
+  // }
+
+  wait(callback: Function): Promise<any> {
+    const p = new Promise((resolve, reject) => {
+      const promise = callback(resolve, reject);
+
+      if (promise && 'then' in promise) {
+        promise.then(resolve).catch(reject);
+      }
+    });
+
+    this.waits.push(p);
+
+    return p;
+  }
+
+  completed(): Promise<any[]> {
+    const promise = Promise.all(this.waits);
+
+    this.waits = [];
+
+    return promise;
+  }
+
+  macro(name: string, prop: any) {
+    if ((this as any)[name]) {
+      throw new Error(`Macro: ${name} already exists.`);
+    }
+
+    (this as any)[name] = prop;
+
+    return this;
+  }
+}