yuyeon 0.0.0

package/src/components/switch/y-switch.scss

@@ -0,0 +1,206 @@
+/*!
+ * Created by yeonyu 2022.
+ */
+@use '../../styles/palette';
+@use '../../styles/variables';
+
+.y-switch {
+  $primary: palette.$basic-violet-400;
+  font-size: 1rem;
+
+  &__slot {
+    display: flex;
+    cursor: pointer;
+    align-items: center;
+    color: inherit;
+    min-height: inherit;
+    position: relative;
+  }
+
+  &__input {
+    width: 3em;
+    height: 1.5em;
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    color: inherit;
+    flex: 0 0 auto;
+
+    input[role='switch'] {
+      position: absolute;
+      opacity: 0;
+      width: 100%;
+      height: 100%;
+      cursor: pointer;
+      user-select: none;
+    }
+  }
+  &:not(&--loading) &__input:active &__thumb {
+    width: 1em;
+  }
+
+  &__track {
+    width: 100%;
+    height: 100%;
+    border-radius: 2em;
+    background-color: #a0a0a0;
+    position: absolute;
+    left: 0;
+    top: 0;
+    transition: 300ms;
+  }
+
+  &__thumb {
+    width: 1.1em;
+    height: 1.1em;
+    top: calc(50% - 0.56em);
+    left: 0.2em;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #fff;
+    pointer-events: none;
+    position: relative;
+    transition: 180ms cubic-bezier(0.78, 0.04, 0.9, 0.18);
+  }
+
+  &__spinner {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    animation: rotate 2s linear infinite;
+    contain: paint;
+
+    @keyframes spinner-blur {
+      0% {
+        filter: blur(4px);
+      }
+      50% {
+        filter: blur(1px);
+      }
+      100% {
+        filter: blur(4px);
+      }
+    }
+
+    &:before {
+      content: '';
+      position: absolute;
+      top: 2px;
+      left: 2px;
+      right: 2px;
+      bottom: 2px;
+      border-radius: 50%;
+      border-width: 2px 2px 0 0;
+      border-style: solid;
+      border-color: $primary transparent;
+    }
+
+    &:after {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      background: linear-gradient(0deg, transparent 60%, rgba($primary, 0.4));
+      filter: blur(4px);
+      animation: spinner-blur 3s infinite;
+    }
+  }
+
+  &:hover:not(&--disabled) {
+    .y-switch__thumb {
+      //background: map-get($light-theme, 'hover-bg');
+    }
+  }
+
+  &--active {
+    .y-switch__track {
+      background-color: $primary;
+    }
+
+    .y-switch__thumb {
+      left: 1.7em;
+      //transform: translateX(1.6em);
+    }
+  }
+  &--active:not(&--loading):active &__thumb {
+    //left: 0.2em;
+    left: 1.8em;
+  }
+
+  &--focused {
+    .y-switch__thumb:before {
+      content: '';
+      position: absolute;
+      top: 2px;
+      bottom: 2px;
+      left: 2px;
+      right: 2px;
+      border-radius: 50%;
+      background-color: rgba($primary, 0.4);
+    }
+  }
+
+  &--stick-out {
+    .y-switch__thumb {
+      box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.32);
+    }
+
+    .y-switch__track {
+      width: 90%;
+      height: 80%;
+      left: 5%;
+      top: 12%;
+      box-shadow: inset 0 0 4px 0 rgba(0, 0, 0, 0.4);
+    }
+  }
+
+  &--disabled {
+    opacity: 0.8;
+    filter: brightness(0.88);
+
+    .y-switch__thumb {
+      opacity: 0.4;
+    }
+  }
+  &--disabled &__slot,
+  &--disabled &__input input {
+    cursor: default;
+  }
+
+  &__state {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    contain: content;
+  }
+
+  &__state-label {
+    font-size: 12px;
+    color: #ffffff;
+    position: absolute;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    transition: transform 180ms cubic-bezier(0.16, 0.85, 0.36, 0.96);
+
+    &--on {
+      left: -40px;
+    }
+    &--off {
+      right: 10px;
+    }
+  }
+
+  &--active &__state-label {
+    transform: translateX(50px);
+  }
+
+  &--stick-out &__state-label--off {
+    right: 7px;
+  }
+}

package/src/components/text-highlighter/index.scss

@@ -0,0 +1,5 @@
+/*!
+ * Created by yeonyu 2022.
+ */
+
+@import 'packages/yuyeon/src/components/text-highlighter/y-text-highlighter';

package/src/components/text-highlighter/index.ts

@@ -0,0 +1,3 @@
+import YTextHighlighter from './y-text-highlighter';
+
+export { YTextHighlighter };

package/src/components/text-highlighter/y-text-highlighter.scss

@@ -0,0 +1,7 @@
+.y-text-highlighter {
+  &__item {
+    &--highlight {
+      background-color: #ffff00;
+    }
+  }
+}

package/src/components/text-highlighter/y-text-highlighter.ts

@@ -0,0 +1,89 @@
+import { VNode, defineComponent, h } from 'vue';
+// style
+import './index.scss';
+
+export default defineComponent({
+  name: 'y-text-highlighter',
+  props: {
+    text: {
+      type: String,
+    },
+    keyword: {
+      type: String,
+    },
+    color: {
+      type: String,
+    },
+    sensitive: {
+      type: Boolean,
+    },
+  },
+  computed: {
+    splitText(): { text: string; isKeyword: boolean }[] {
+      const { keyword, text } = this;
+      if (keyword && text) {
+        const split: { text: string; isKeyword: boolean }[] = [];
+        let stack = text;
+        const keyExp = new RegExp(keyword, this.sensitive ? '' : 'i');
+        while (stack.length > 0) {
+          const index = stack.search(keyExp);
+          if (index < 0) {
+            split.push({ text: stack, isKeyword: false });
+            stack = '';
+          } else if (index < 1) {
+            split.push({
+              text: stack.substring(0, keyword.length),
+              isKeyword: true,
+            });
+            stack = stack.substring(keyword.length, stack.length);
+          } else {
+            split.push({ text: stack.substring(0, index), isKeyword: false });
+            split.push({
+              text: stack.substring(index, index + keyword.length),
+              isKeyword: true,
+            });
+            stack = stack.substring(index + keyword.length, stack.length);
+          }
+        }
+        return split;
+      }
+      return [{ text: this.text || '', isKeyword: false }];
+    },
+  },
+  methods: {
+    createItem(text: string): VNode {
+      return h(
+        'span',
+        {
+          staticClass: 'y-text-highlighter__item',
+        },
+        [text],
+      );
+    },
+    createHighlightKeywordItem(text: string): VNode {
+      return h(
+        'span',
+        {
+          staticClass: 'y-text-highlighter__item',
+          class: 'y-text-highlighter__item--highlight',
+          style: {
+            backgroundColor: this.color,
+          },
+        },
+        [text],
+      );
+    },
+    createSplitTexts(): VNode[] {
+      return this.splitText.map((splitItem) => {
+        if (splitItem.isKeyword) {
+          return this.createHighlightKeywordItem(splitItem.text);
+        }
+        return this.createItem(splitItem.text);
+      });
+    },
+  },
+  render(): VNode {
+    const children = this.createSplitTexts();
+    return h('span', { staticClass: 'y-text-highlighter' }, children);
+  },
+});

package/src/composables/layer-group.ts

@@ -0,0 +1,31 @@
+import { computed } from 'vue';
+
+import type { Ref } from 'vue';
+
+export const Y_LAYER_GROUP_CLASS_NAME = 'y-layer-group';
+
+export function useLayerGroup(target?: Ref<string | Element>) {
+  const layerGroup = computed(() => {
+    const refTarget = target?.value;
+    let targetEl: Element = document.body;
+    if (typeof refTarget === 'string') {
+      const el = document.querySelector(refTarget);
+      if (el) {
+        targetEl = el;
+      }
+    }
+    if (refTarget && (refTarget as Element).nodeType === 1) {
+      targetEl = refTarget as Element;
+    }
+    //
+    let layerEl = targetEl.querySelector(`.${Y_LAYER_GROUP_CLASS_NAME}`);
+    if (!layerEl) {
+      layerEl = document.createElement('div');
+      layerEl.className = Y_LAYER_GROUP_CLASS_NAME;
+      targetEl.appendChild(layerEl);
+    }
+    return layerEl;
+  });
+
+  return { layerGroup };
+}

package/src/composables/lazy.ts

@@ -0,0 +1,30 @@
+import { computed, Ref, ref, watch } from "vue";
+
+export function useLazy(eager: boolean, updated: Ref<any>) {
+  const tick = ref(false);
+  const tack = ref();
+  tack.value = updated.value;
+  const lazyValue = computed(() => {
+    if (eager) return updated.value;
+    return tack.value;
+  });
+  watch(updated, () => {
+    if (!tick.value) {
+      tack.value = updated.value;
+    }
+    if (!eager) {
+      tick.value = true
+    }
+  });
+  function onAfterUpdate() {
+    tack.value = updated.value;
+    if (!eager) {
+      tick.value = false;
+    }
+  }
+  return {
+    entered: tick,
+    lazyValue,
+    onAfterUpdate,
+  }
+}

package/src/composables/progress.ts

@@ -0,0 +1,19 @@
+import { computed } from 'vue';
+
+export function useProgress(props: any) {
+  const numValue = computed(() => {
+    const { value } = props;
+    const numValue = Number(value);
+    if (Number.isNaN(numValue) || numValue < 0) {
+      return 0;
+    }
+    if (numValue > 100) {
+      return 100;
+    }
+    return numValue;
+  });
+
+  return {
+    numValue,
+  };
+}

package/src/composables/theme.ts

@@ -0,0 +1,25 @@
+import { App } from 'vue';
+
+export const Y_THEME_PREFIX = 'y-theme';
+
+const defaultThemeTemplates: any = {
+  light: {
+    dark: false,
+    palette: {
+      background: '#ffffff',
+      'font-color': '#323232',
+    },
+    variables: {
+      //
+    },
+  },
+};
+
+export function bindTheme(options: any) {
+  function install(app: App) {
+    //
+  }
+  return {
+    install,
+  };
+}

package/src/directives/complement-click/index.ts

@@ -0,0 +1,123 @@
+import { DirectiveBinding } from 'vue';
+import { documentRoot } from '../../util/dom';
+
+interface ComplementClickDirectiveElementImplanted {
+  onClick: EventListener;
+  onMousedown: EventListener;
+}
+
+declare global {
+  interface Element {
+    _complementClick?: Record<
+      number,
+      ComplementClickDirectiveElementImplanted | undefined
+    > & { lastMousedownWasOutside: boolean };
+  }
+}
+
+export interface ComplementClickBindingOptions {
+  handler: (mouseEvent: MouseEvent) => void;
+  determine?: (event: Event) => boolean;
+  include?: () => HTMLElement[];
+}
+
+export interface ComplementClickBinding extends DirectiveBinding {
+  value: ((mouseEvent: MouseEvent) => void) | ComplementClickBindingOptions;
+}
+
+function defaultDetermine() {
+  return true;
+}
+
+function directive(
+  mouseEvent: MouseEvent,
+  element: HTMLElement,
+  binding: ComplementClickBinding,
+) {
+  const { value } = binding;
+  const handler = typeof value === 'function' ? value : value.handler;
+  element._complementClick!.lastMousedownWasOutside &&
+    checkEvent(mouseEvent, element, binding) &&
+    setTimeout(() => {
+      determine(mouseEvent, binding) && handler && handler(mouseEvent);
+    }, 0);
+}
+
+function checkEvent(
+  mouseEvent: MouseEvent,
+  element: HTMLElement,
+  binding: ComplementClickBinding,
+): boolean {
+  if (!mouseEvent || determine(mouseEvent, binding) === false) {
+    return false;
+  }
+  const root = documentRoot(element);
+  if (typeof ShadowRoot !== 'undefined' && root instanceof ShadowRoot && root.host === mouseEvent.target) {
+    return false;
+  }
+  const elements = ((typeof binding.value === 'object' && binding.value.include) || (() => []))();
+  elements.push(element);
+  return !elements.some((el) => el?.contains(mouseEvent.target as Node));
+}
+
+function determine(
+  event: MouseEvent,
+  binding: ComplementClickBinding,
+): boolean {
+  const { value } = binding;
+  const determineFn =
+    (typeof value === 'object' && value.determine) || defaultDetermine;
+  return determineFn && determineFn?.(event);
+}
+
+function implant(
+  element: HTMLElement,
+  callback: (app: HTMLDocument | ShadowRoot | null) => void,
+) {
+  const root = documentRoot(element);
+  callback(document);
+  if (typeof ShadowRoot !== 'undefined' && root instanceof ShadowRoot) {
+    callback(root);
+  }
+}
+
+export const ComplementClick = {
+  mounted(element: HTMLElement, binding: ComplementClickBinding) {
+    const onClick = (event: Event) =>
+      directive(event as MouseEvent, element, binding);
+    const onMousedown = (event: Event) => {
+      element._complementClick!.lastMousedownWasOutside = checkEvent(
+        event as MouseEvent,
+        element,
+        binding,
+      );
+    };
+    implant(element, (app) => {
+      app?.addEventListener('click', onClick, true);
+      app?.addEventListener('mousedown', onMousedown, true);
+    });
+    if (!element._complementClick) {
+      element._complementClick = {
+        lastMousedownWasOutside: true,
+      };
+    }
+    const _uid = binding.instance!.$.uid;
+    element._complementClick[_uid] = {
+      onClick,
+      onMousedown,
+    };
+  },
+  unmounted(element: HTMLElement, binding: ComplementClickBinding) {
+    if (!element._complementClick) return;
+    const _uid = binding.instance!.$.uid;
+    implant(element, (app) => {
+      const old = element._complementClick?.[_uid];
+      if (old) {
+        const { onClick, onMousedown } = old;
+        app?.removeEventListener('click', onClick, true);
+        app?.removeEventListener('mousedown', onMousedown, true);
+      }
+    });
+    delete element._complementClick[_uid];
+  },
+};

package/src/directives/plate-wave/index.ts

@@ -0,0 +1,114 @@
+import './plate-wave.scss';
+
+import type { DirectiveBinding } from 'vue';
+
+export interface PlateWaveBinding
+  extends Omit<DirectiveBinding, 'modifiers' | 'value'> {
+  value?: boolean;
+  modifiers: { stop?: boolean };
+}
+
+const CLASS_NAME = 'y-plate-wave__animation';
+
+function showAnimation(el: HTMLElement | null) {
+  if (!el) return;
+  const animation = document.createElement('span');
+  animation.className = CLASS_NAME;
+  el.appendChild(animation);
+  animation.dataset.activated = String(performance.now());
+}
+
+function hideAnimation(el: HTMLElement | null) {
+  if (!el) {
+    return;
+  }
+  const animations = el.getElementsByClassName(CLASS_NAME);
+  if (animations.length === 0) return;
+  const animation = animations[animations.length - 1] as HTMLElement;
+  if (animation.dataset.isHiding) return;
+  animation.dataset.isHiding = 'true';
+  const diff = performance.now() - Number(animation.dataset.activated);
+  const delay = Math.max(250 - diff, 0);
+  setTimeout(() => {
+    if (animation) {
+      el.removeChild(animation);
+    }
+  }, delay + 300);
+}
+
+/*
+ * Event
+ * */
+
+let keyboardEventFlag = false;
+
+function spawn(event: Event) {
+  showAnimation(event.currentTarget as HTMLElement);
+}
+
+function clean(event: Event) {
+  hideAnimation(event.currentTarget as HTMLElement);
+}
+
+function stop(event: Event) {
+  //
+}
+
+function keyboardSpawn(event: KeyboardEvent) {
+  if (!keyboardEventFlag && (event.key === 'Enter' || event.key === 'Space')) {
+    keyboardEventFlag = true;
+    showAnimation(event.currentTarget as HTMLElement);
+  }
+}
+
+function keyboardClean(event: KeyboardEvent) {
+  keyboardEventFlag = false;
+  hideAnimation(event.currentTarget as HTMLElement);
+}
+
+function destroyListeners(el: HTMLElement) {
+  el.removeEventListener('mousedown', spawn);
+  el.removeEventListener('mouseup', clean);
+  el.removeEventListener('mouseleave', clean);
+  el.removeEventListener('keydown', keyboardSpawn);
+  el.removeEventListener('keyup', keyboardClean);
+}
+
+function attachWave(el: HTMLElement, binding: PlateWaveBinding, init = false) {
+  const { value, modifiers } = binding;
+  const enabled = !!value;
+  if (!enabled) hideAnimation(el);
+
+  if (enabled && init) {
+    if (modifiers.stop) {
+      el.addEventListener('mousedown', stop);
+      return;
+    }
+
+    el.addEventListener('mousedown', spawn);
+    el.addEventListener('mouseup', clean);
+    el.addEventListener('mouseleave', clean);
+    el.addEventListener('keydown', keyboardSpawn);
+    el.addEventListener('keyup', keyboardClean);
+    el.addEventListener('blur', clean);
+  } else if (!enabled && !init) {
+    destroyListeners(el);
+  }
+}
+
+export const PlateWave = {
+  mounted(el: HTMLElement, binding: PlateWaveBinding) {
+    attachWave(el, binding, true);
+  },
+  updated(el: HTMLElement, binding: PlateWaveBinding) {
+    if (binding.value === binding.oldValue) {
+      return;
+    }
+    attachWave(el, binding);
+  },
+  unmount(el: HTMLElement) {
+    destroyListeners(el);
+  },
+};
+
+export default PlateWave;

package/src/directives/plate-wave/plate-wave.scss

@@ -0,0 +1,33 @@
+.y-plate-wave {
+  &__animation {
+    color: inherit;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    pointer-events: none;
+    overflow: hidden;
+    border: 1px solid currentColor;
+    border-radius: inherit;
+    will-change: transform, opacity;
+    animation: plate-wave 250ms ease;
+  }
+}
+
+@keyframes plate-wave {
+  0% {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  80% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 0;
+    transform: scale(1);
+  }
+}

package/src/directives/theme-class.ts

@@ -0,0 +1,14 @@
+import { FunctionDirective } from 'vue';
+
+const bindThemeClass: FunctionDirective = (el, binding) => {
+  const themeName = binding.value;
+  const themeClass = `theme--${themeName}`;
+  el.classList.forEach((classToken: string) => {
+    if (classToken.startsWith('theme--') && classToken !== themeClass) {
+      el.classList.remove(classToken);
+    }
+  });
+  el.classList.add(themeClass);
+};
+
+export default bindThemeClass;