@windwalker-io/unicorn-next 0.1.0

package/scss/field/file-drag.scss

@@ -0,0 +1,102 @@
+.c-file-drag {
+  --bs-card-border-color: var(--bs-gray-400);
+  --fd-delete-color: var(--bs-danger);
+
+  overflow: hidden;
+  border: 1px solid var(--bs-card-border-color, #ddd);
+
+  label {
+    border: none;
+  }
+}
+
+.c-file-drag-input {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  min-height: 100px;
+  cursor: pointer;
+
+  input {
+    position: relative;
+    z-index: 2;
+    width: 100%;
+    margin: 0;
+    overflow: hidden;
+    opacity: 0;
+    height: 100%;
+    cursor: pointer;
+
+    &.hover + label {
+      background-color: #efefef;
+    }
+
+    &.is-invalid ~ .c-file-drag-input__label {
+      border-color: var(--bs-danger);
+    }
+
+    &:disabled {
+      opacity: 0;
+      cursor: no-drop;
+
+      + label {
+        background-color: #eee;
+        color: #999;
+      }
+
+      + label button {
+        display: none;
+      }
+    }
+  }
+
+  &__label {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 1;
+    padding: .375rem .75rem;
+    color: #495057;
+    background-color: #fff;
+    border: 1px solid var(--bs-gray-400);
+    border-radius: .25rem;
+    height: 100%;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: .5rem;
+    transition: all .3s;
+    cursor: pointer;
+
+    > span {
+      display: inline-block;
+      width: 100%;
+    }
+  }
+
+  label::after {
+    content: none !important;
+  }
+
+  &__button {
+    //font-size: .85rem;
+    //padding: .25rem .5rem;
+
+    //--bs-btn-border-color: var(--bs-secondary);
+    //--bs-btn-color: var(--bs-secondary);
+  }
+}
+
+.c-file-drag-preview {
+  .c-file-drag-preview__delete {
+    --bs-link-color-rgb: var(--bs-dark-rgb);
+
+    &.active {
+      --bs-link-color-rgb: var(--bs-primary-rgb);
+    }
+  }
+}

package/scss/field/single-image-drag.scss

@@ -0,0 +1,88 @@
+// Part of starter file.
+
+.c-sid-default {
+  &__left-col {
+    width: 30%;
+    margin-right: 15px;
+    justify-content: center;
+  }
+
+  &__left-col img {
+    max-height: 250px;
+  }
+
+  &__right-col {
+    overflow: hidden;
+  }
+
+  &__dragarea {
+    font-weight: bold;
+    text-align: center;
+    padding: 9% 0;
+    color: #ccc;
+    border: 2px dashed #ccc;
+    border-radius: 7px;
+    cursor: default;
+
+    &.hover {
+      color: #333;
+      border-color: #333;
+      background-color: #f9f9f9;
+    }
+  }
+
+  &__img-loader {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 180px;
+  }
+
+  &__size-info {
+    margin-top: 5px;
+    font-size: 13px;
+  }
+
+  &__remove {
+    margin-left: 5px;
+  }
+
+  &__modal .btn {
+    position: relative;
+  }
+}
+
+.c-sid-modal {
+  .modal-body {
+    position: relative;
+  }
+
+  &__content {
+    position: relative;
+    z-index: 3;
+  }
+
+  &__loading {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1;
+  }
+
+  &__img-container {
+
+  }
+}
+
+// A workaround for form validation
+.is-invalid[uni-field-validate] {
+  > uni-sid ~ [data-field-error] {
+    display: block;
+  }
+}

package/scss/field/vue-drag-uploader.scss

@@ -0,0 +1,160 @@
+// Part of ke file.
+
+$img-width: 155px !default;
+$img-height: 155px !default;
+
+.vue-drag-uploader {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 15px 5px 5px 15px;
+  border: 1px dotted #999;
+  border-radius: 4px;
+  cursor: pointer;
+  color: #999;
+  min-height: 250px;
+
+  &--readonly {
+    border: 1px solid #999;
+  }
+
+  &--ondrag {
+    border: 1px dotted #666;
+    background-color: rgba(0, 0, 0, .05);
+    color: #666;
+  }
+
+  &__draggable-wrapper,
+  &__transition-wrapper {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  &__item {
+    width: $img-width;
+    height: $img-height;
+    border: 1px solid rgba(0, 0, 0, .25);
+    border-radius: 3px;
+    cursor: pointer;
+    margin-right: 15px;
+    margin-bottom: 15px;
+  }
+
+  .add-button {
+    display: flex;
+    align-items: center;
+    text-align: center;
+    transition: background-color .5s;
+
+    &:hover {
+      background-color: rgba(0, 0, 0, .05);
+    }
+
+    &__body {
+      margin: 0 auto;
+    }
+
+    &__icon {
+      margin-bottom: 10px;
+    }
+
+    &__text {
+      font-size: 14px;
+    }
+  }
+
+  .preview-img {
+    position: relative;
+    cursor: pointer;
+    padding: 1px;
+
+    > * {
+      position: absolute;
+    }
+
+    &:hover {
+      .error-message {
+        &__message {
+          display: block;
+          padding: 10px;
+        }
+      }
+    }
+
+    &__body {
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      background: transparent no-repeat center center;
+      background-size: cover;
+    }
+
+    &__title {
+      margin: 0 auto;
+    }
+
+    &__overlay {
+      display: flex;
+      align-items: center;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      right: 0;
+      background-color: rgba(0, 0, 0, .35);
+      opacity: 0;
+      transition: opacity .5s;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+
+    &__remove-icon {
+      position: absolute;
+      top: 5px;
+      right: 5px;
+      color: white;
+      opacity: .75;
+      transition: opacity .5s;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+
+    &__progress {
+      height: 5px;
+      background-color: rgba(255, 255, 255, .8);
+      width: 100%;
+      bottom: 0;
+      left: 0;
+    }
+
+    &__progress-bar {
+      background-color: var(--bs-primary, #007bff);
+      width: 0;
+      height: 100%;
+    }
+  }
+
+  .error-message {
+    width: 100%;
+    background-color: #dc3545;
+    color: white;
+    font-size: 14px;
+    word-break: break-all;
+    top: calc(100% - 26px);
+    min-height: 26px;
+
+    &__notice {
+      display: inline-block;
+      padding: 3px;
+      text-align: center;
+      width: 100%;
+    }
+
+    &__message {
+      display: none;
+    }
+  }
+}

package/scss/switcher.scss

@@ -0,0 +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;
+}

package/src/app.ts

@@ -0,0 +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;
+  }
+}