yuyeon 0.0.0 → 0.0.3

package/src/components/ring-spinner/y-ring-spinner.vue

@@ -1,31 +0,0 @@
-<template>
-  <svg
-    class="y-ring-spinner"
-    width="48"
-    height="48"
-    viewBox="0 0 48 48"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <circle
-      class="y-ring-spinner__circle"
-      cx="24"
-      cy="24"
-      r="18"
-      stroke-width="4"
-      stroke-dasharray="113.097"
-      stroke-dashoffset="113.097"
-    />
-  </svg>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-import './y-ring-spinner.scss';
-
-const NAME = 'y-ring-spinner';
-
-export default defineComponent({
-  name: NAME,
-});
-</script>

package/src/components/switch/YSwitch.vue

@@ -1,217 +0,0 @@
-<!--
-  - Created by yeonyu at 2021-09-23
-  -->
-
-<template>
-  <div class="y-switch" :class="classes">
-    <div class="y-switch__slot">
-      <div
-        class="y-switch__input"
-        @click.capture="onClick"
-        @keydown="onKeydown"
-      >
-        <input
-          :id="inputId"
-          :aria-checked="innerValue"
-          type="checkbox"
-          role="switch"
-          @focus="onFocus"
-          @blur="onBlur"
-          @change="onChange"
-          :disabled="disabled"
-          :checked="innerValue"
-          ref="checkbox"
-        />
-        <div class="y-switch__track" :style="trackStyles">
-          <div v-if="stateLabel" class="y-switch__state">
-            <span class="y-switch__state-label y-switch__state-label--on">
-              {{ labelOn }}
-            </span>
-            <span class="y-switch__state-label y-switch__state-label--off">
-              {{ labelOff }}
-            </span>
-          </div>
-        </div>
-        <div class="y-switch__thumb">
-          <div v-if="loading" class="y-switch__spinner"></div>
-        </div>
-      </div>
-      <label :for="inputId" class="y-switch__label">
-        <slot name="label"></slot>
-        <input hidden />
-      </label>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
-
-let uidCounter = 0;
-
-export default defineComponent({
-  name: 'YSwitch',
-  model: {
-    prop: 'input',
-    event: 'change',
-  },
-  props: {
-    input: {
-      type: [Boolean, Array] as PropType<boolean | any[]>,
-      default: false,
-    },
-    value: {
-      type: [String, Number, Object] as PropType<any>,
-    },
-    max: {
-      type: Number,
-    },
-    loading: {
-      type: Boolean,
-    },
-    disabled: {
-      type: Boolean,
-    },
-    stickOut: {
-      type: Boolean,
-    },
-    stateLabel: {
-      type: Boolean,
-    },
-    color: {
-      type: String,
-    },
-    labelOn: {
-      type: String,
-      default: 'ON',
-    },
-    labelOff: {
-      type: String,
-      default: 'OFF',
-    },
-  },
-  data() {
-    return {
-      innerValue: false,
-      counterId: '',
-      focused: false,
-    };
-  },
-  created() {
-    const iid = uidCounter.toString();
-    uidCounter += 1;
-    this.counterId = iid;
-    if (Array.isArray(this.input)) {
-      this.inputByValue();
-    } else {
-      this.innerValue = this.input;
-    }
-  },
-  computed: {
-    isMultipleInput() {
-      return Array.isArray(this.input);
-    },
-    multipleInputIndex() {
-      if (!Array.isArray(this.input)) {
-        return -1;
-      }
-      return this.input.findIndex((inp) => {
-        return inp === this.value;
-      });
-    },
-    inputId() {
-      const id = this.counterId;
-      return `y-switch--${id}`;
-    },
-    trackStyles() {
-      return {
-        backgroundColor: this.color,
-      };
-    },
-    classes() {
-      return {
-        'y-switch--disabled': this.disabled,
-        'y-switch--loading': this.loading,
-        'y-switch--active': this.innerValue,
-        'y-switch--stick-out': this.stickOut,
-        'y-switch--focused': this.focused,
-      };
-    },
-  },
-  methods: {
-    inputByValue() {
-      if (Array.isArray(this.input)) {
-        const found = this.input.find((inp: any) => {
-          return inp === this.value;
-        });
-
-        if (found !== undefined) {
-          this.innerValue = true;
-        } else {
-          this.innerValue = false;
-        }
-      }
-    },
-    changeMultipleInput(checked: boolean) {
-      if (Array.isArray(this.input)) {
-        const multipleInput = this.input.slice();
-        if (
-          checked &&
-          this.max !== undefined &&
-          multipleInput.length >= this.max
-        ) {
-          this.$emit('overmax');
-          this.nextChange(false, multipleInput);
-          return;
-        }
-        if (checked && this.multipleInputIndex < 0) {
-          multipleInput.push(this.value);
-        } else if (this.multipleInputIndex > -1) {
-          multipleInput.splice(this.multipleInputIndex, 1);
-        }
-        this.$emit('change', multipleInput);
-      }
-    },
-    nextChange(checked: boolean, value: any) {
-      this.$nextTick(() => {
-        this.innerValue = checked;
-      });
-    },
-    onClick($event: Event) {
-      if (this.disabled || this.loading) return;
-      this.changeInput(!this.innerValue, $event);
-    },
-    onFocus() {
-      this.focused = true;
-    },
-    onBlur() {
-      this.focused = false;
-    },
-    onKeydown($event: KeyboardEvent) {
-      // nothing
-    },
-    onChange($event: Event) {
-      const $checkbox = $event.target as HTMLInputElement;
-      const { checked } = $checkbox;
-      this.changeInput(checked, $event);
-    },
-    changeInput(checked: boolean, event?: Event) {
-      this.innerValue = checked;
-      if (this.isMultipleInput) {
-        this.changeMultipleInput(checked);
-      } else {
-        this.$emit('change', checked);
-      }
-    },
-  },
-  watch: {
-    input() {
-      this.inputByValue();
-    },
-  },
-});
-</script>
-
-<style lang="scss">
-@import 'index';
-</style>

package/src/components/switch/index.scss

@@ -1,5 +0,0 @@
-/*!
- * Created by yeonyu 2022.
- */
-
-@import 'y-switch';

package/src/components/switch/index.ts

@@ -1,11 +0,0 @@
-/*
- * Created by yeonyu at 2021-09-30
- */
-
-import YSwitch from './YSwitch.vue';
-
-export { YSwitch };
-
-export default {
-  YSwitch,
-};

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

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

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

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

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

@@ -1,89 +0,0 @@
-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/lazy.ts

@@ -1,30 +0,0 @@
-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/theme.ts

@@ -1,25 +0,0 @@
-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

@@ -1,123 +0,0 @@
-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/theme-class.ts

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

package/src/file-extension.d.ts

@@ -1,14 +0,0 @@
-declare module '*.svg' {
-  const content: string;
-  export default content;
-}
-
-declare module '*.png' {
-  const value: string;
-  export default value;
-}
-
-declare module '*.json' {
-  const value: any;
-  export default value;
-}

package/src/index.ts

@@ -1,21 +0,0 @@
-import { App } from 'vue';
-import * as components from '@/components';
-import { bindTheme } from '@/composables/theme';
-
-export function init(options: any) {
-  const themeModule = bindTheme(options?.theme);
-
-  const install = (app: App) => {
-    themeModule.install(app);
-
-    Object.keys(components).forEach((componentName) => {
-      const comp = components[componentName as keyof typeof components];
-      app.component(componentName, comp);
-    });
-  };
-
-  return {
-    install,
-    theme: themeModule,
-  };
-}

package/src/styles/base.scss

@@ -1,28 +0,0 @@
-:root {
-  box-sizing: border-box;
-}
-
-.fade {
-  &-enter-active, &-leave-cative {
-    transition: opacity 240ms cubic-bezier(.2,.28,.21,1);
-  }
-
-  &-fade-enter-from, &-leave-to {
-    opacity: 0;
-  }
-}
-
-.slide-fade-enter-active, .slide-fade-leave-active {
-  transition: transform 240ms cubic-bezier(.23,.3,.07,.97), opacity 240ms linear;
-}
-
-.slide-fade-enter-from,
-.slide-fade-leave-to {
-  transform: translateY(20px) rotate3d(1, 0, 0, -30deg);
-  opacity: 0;
-}
-
-.title {
-  font-size: 20px;
-  font-weight: bold;
-}

package/src/styles/theme/dark.scss

@@ -1,35 +0,0 @@
-/*!
- * Created by yeonyu 2022.
- */
-@use 'sass:map';
-@use '../palette';
-@use '../util/helper';
-
-// yui/app theme
-$theme--dark: () !default;
-$theme--dark: map.deep-merge(
-  map.deep-merge(
-    (
-      'input': (
-        'fill': palette.$basic-gray-200,
-      ),
-      'fieldInput': (
-        'clear': palette.$basic-gray-400,
-      ),
-      'select': (
-        'selected': palette.$basic-black,
-        'selected-background': palette.$basic-gray-700,
-      ),
-    ),
-    //app
-    (
-        'simpleSearch': (
-          'placeholder': palette.$basic-gray-400,
-          'prepend': palette.$basic-gray-700,
-          'border': palette.$basic-gray-700,
-          'hasValueBorder': palette.$basic-gray-400,
-        ),
-      )
-  ),
-  $theme--dark
-);

package/src/styles/theme/light.scss

@@ -1,32 +0,0 @@
-@use 'sass:map';
-@use '../palette';
-@use '../util/helper';
-
-// yui theme
-$theme--light: () !default;
-$theme--light: map.deep-merge(
-  map.deep-merge(
-    (
-      'input': (
-        'fill': palette.$basic-gray-200,
-      ),
-      'fieldInput': (
-        'clear': palette.$basic-gray-400,
-      ),
-      'select': (
-        'selected': palette.$basic-black,
-        'selected-background': palette.$basic-gray-700,
-      ),
-    ),
-    //app
-    (
-        'simpleSearch': (
-          'placeholder': palette.$basic-gray-400,
-          'prepend': palette.$basic-gray-700,
-          'border': palette.$basic-gray-700,
-          'hasValueBorder': palette.$basic-gray-400,
-        ),
-      )
-  ),
-  $theme--light
-);