yuyeon 0.0.0 → 0.0.2

package/src/components/input/y-input.ts

@@ -1,368 +0,0 @@
-/*
- * Created by yeonyu 2022.
- */
-import { getSlot } from '../../util/vue-component';
-
-import './index.scss';
-import {
-  defineComponent,
-  Directive,
-  h,
-  PropType,
-  resolveDirective,
-  VNode,
-  withDirectives,
-} from 'vue';
-import RebindAttrs from '../../mixins/rebind-attrs';
-import DiMixin from '../../mixins/di';
-
-const NAME = 'y-input';
-let uidCounter = 0;
-
-export default defineComponent({
-  name: NAME,
-  inheritAttrs: false,
-  mixins: [RebindAttrs, DiMixin],
-  props: {
-    name: String,
-    width: {
-      type: [String, Number] as PropType<string | number>,
-    },
-    height: [Number, String],
-    displayTag: {
-      type: String as PropType<string>,
-      default: 'div',
-    },
-    outlined: Boolean as PropType<boolean>,
-    filled: {
-      type: Boolean as PropType<boolean>,
-    },
-    ceramic: Boolean as PropType<boolean>,
-    label: String as PropType<string>,
-    modelValue: { type: [String, Number] as PropType<string | number> },
-    autoSelect: {
-      type: Boolean as PropType<boolean>,
-      default: true,
-    },
-    floated: { type: Boolean as PropType<boolean>, default: () => false },
-    placeholder: String as PropType<string>,
-    loading: Boolean as PropType<boolean>,
-    // validate
-    readonly: Boolean as PropType<boolean>,
-    disabled: Boolean as PropType<boolean>,
-    error: Boolean as PropType<boolean>,
-    validators: Array as PropType<((v: any) => boolean | string)[] | string[]>,
-  },
-  data() {
-    const iid = uidCounter.toString();
-    uidCounter += 1;
-    return {
-      isFocused: false,
-      iid,
-      lazyValue: undefined as string | undefined,
-      inValue: '' as string | number | undefined,
-      hasMouseDown: false,
-      errorResult: undefined as string | undefined,
-      inError: false,
-    };
-  },
-  computed: {
-    classes(): Record<string, boolean> {
-      return {
-        'y-input--outlined': !this.ceramic && !!this.outlined,
-        'y-input--filled': !!this.filled,
-        'y-input--focused': this.isFocused,
-        'y-input--ceramic': !!this.ceramic,
-        'y-input--readonly': !!this.readonly,
-        'y-input--has-value': !!this.inValue,
-        'y-input--disabled': !!this.disabled,
-        'y-input--error': this.isError,
-      };
-    },
-    displayStyles(): Record<string, any> {
-      let { width } = this;
-      if (!Number.isNaN(Number(width))) {
-        width = `${width}px`;
-      }
-      return {
-        width,
-        height: this.getDisplayHeight(),
-      };
-    },
-    attrId(): string {
-      return (this.$attrs.id as string) ?? `y-input--${this.iid}`;
-    },
-    isFloatedLabel(): boolean {
-      return (
-        this.floated ||
-        !!this.placeholder ||
-        (!this.placeholder && this.isFocused) ||
-        !!this.inValue
-      );
-    },
-    formLoading(): boolean {
-      const form$ = (this as any).form$ as any;
-      if (form$) {
-        return form$.loading;
-      }
-      return false;
-    },
-    isError(): boolean {
-      return !!this.error || this.inError;
-    },
-  },
-  methods: {
-    createPrependOuter(): VNode | undefined {
-      const slot = getSlot(this, 'prepend-outer');
-      return slot
-        ? h('div', { class: `${NAME}__prepend-outer` }, slot)
-        : undefined;
-    },
-    createAppendOuter(): VNode | undefined {
-      const slot = getSlot(this, 'append-outer');
-      return slot
-        ? h('div', { class: `${NAME}__append-outer` }, slot)
-        : undefined;
-    },
-    createLabelSlot(): (VNode | string | VNode[])[] {
-      const slot: VNode[] | undefined = getSlot(this, 'label');
-      if (!slot) {
-        if (this.label) {
-          return [this.label];
-        }
-        if (this.placeholder && !this.inValue) {
-          return [this.placeholder];
-        }
-      }
-
-      return slot ? [slot] : [];
-    },
-    createLabel(): VNode | undefined {
-      const show = !!this.label || !!getSlot(this, 'label');
-      if (!show) {
-        return undefined;
-      }
-      return h(
-        'label',
-        {
-          class: {
-            [`${NAME}__label`]: true,
-            'y-input__label--floated': this.isFloatedLabel,
-          },
-          '.for': this.attrId,
-        },
-        this.createLabelSlot(),
-      );
-    },
-    createDefaultSlot(): VNode[] | string | undefined {
-      const { modelValue } = this;
-      const slotContent = getSlot(this, 'default', { modelValue });
-      return slotContent ?? modelValue?.toString();
-    },
-    createDefaultChildren(): (VNode | undefined | VNode[] | string)[] {
-      return [this.createLabel(), this.createDefaultSlot()];
-    },
-    createDefault(): VNode {
-      return h(
-        'div',
-        {
-          [`.${NAME}__value`]: true,
-          '.data-id': this.attrId,
-          '.tabindex': 0,
-          onFocus: this.onFocus,
-          onBlur: this.onBlur,
-        },
-        this.createDefaultChildren(),
-      );
-    },
-    createPrepend(): VNode | undefined {
-      const slot = getSlot(this, 'prepend', { error: this.isError });
-      return slot
-        ? h(
-            'div',
-            {
-              class: 'y-input__prepend',
-              onClick: this.onClickPrepend,
-            },
-            slot,
-          )
-        : undefined;
-    },
-    createAppend(): VNode | undefined {
-      const slot = getSlot(this, 'append');
-      return slot ? h('div', { class: 'y-input__append' }, slot) : undefined;
-    },
-    getDisplayHeight() {
-      const { height } = this;
-      if (!isNaN(Number(height))) {
-        return `${height}px`;
-      }
-      return height;
-    },
-    createDisplay(): VNode {
-      return h(
-        'div',
-        {
-          class: {
-            [`${NAME}__display`]: true,
-          },
-          onClick: this.onClick,
-          onMousedown: this.onMousedown,
-          onMouseup: this.onMouseup,
-          ref: 'display',
-          style: {
-            ...this.displayStyles,
-          },
-        },
-        [
-          h('div', { class: `${NAME}__plate` }),
-          this.createPrepend(),
-          this.createDefault(),
-          this.createAppend(),
-        ],
-      );
-    },
-    createHelperText(): VNode {
-      const helperTextSlot = getSlot(this, 'helper-text', {
-        error: !!this.error || this.inError,
-        errorResult: this.errorResult,
-      });
-      const children = [];
-      if (helperTextSlot) {
-        children.push(helperTextSlot);
-      } else {
-        children.push(this.errorResult);
-      }
-      return h('div', { class: `${NAME}__helper-text` }, children);
-    },
-    createStackChildren(): VNode[] {
-      return [this.createDisplay(), this.createHelperText()];
-    },
-    createStack(): VNode {
-      return h(
-        'div',
-        {
-          class: `${NAME}__stack`,
-          ref: 'stack',
-        },
-        this.createStackChildren(),
-      );
-    },
-    createContent(): (VNode | undefined)[] {
-      return [
-        this.createPrependOuter(),
-        this.createStack(),
-        this.createAppendOuter(),
-      ];
-    },
-    //
-    onClick(event: MouseEvent) {
-      if (this.autoSelect) {
-        if (event.target) {
-          window.getSelection()?.selectAllChildren(event.target as HTMLElement);
-        }
-      }
-      this.$emit('click', event);
-    },
-    onMousedown(e: Event) {
-      this.hasMouseDown = true;
-      this.$emit('mousedown', e);
-    },
-    onMouseup(e: Event) {
-      this.hasMouseDown = false;
-      this.$emit('mouseup', e);
-    },
-    onFocus(event: FocusEvent) {
-      this.isFocused = true;
-      this.$emit('focus', event);
-    },
-    onBlur(event: FocusEvent) {
-      this.isFocused = false;
-      this.invokeValidators();
-      this.$emit('blur', event);
-    },
-    onClickPrepend(event: MouseEvent) {
-      this.$emit('click:prepend', event);
-    },
-    onChange(event?: Event) {
-      this.invokeValidators();
-    },
-    //
-    invokeValidators(): boolean {
-      const { validators, inValue, $attrs } = this;
-      const { required } = $attrs;
-      this.resetError();
-      let flag = true;
-      if (Array.isArray(validators)) {
-        validators.some((validator: any) => {
-          const result = validator(inValue);
-          if (typeof result === 'string') {
-            this.inError = true;
-            this.errorResult = result;
-            flag = false;
-            return true;
-          }
-          if (result === false) {
-            this.inError = true;
-            this.errorResult = '';
-            flag = false;
-            return true;
-          }
-          return false;
-        });
-      }
-      if (flag && required && !inValue) {
-        this.inError = true;
-        return false;
-      }
-      return flag;
-    },
-    resetError() {
-      this.inError = false;
-      this.errorResult = undefined;
-    },
-    getClasses() {
-      return this.classes;
-    },
-  },
-  watch: {
-    modelValue(neo: string) {
-      if (!this.readonly) {
-        this.inValue = neo;
-      }
-    },
-    readonly(neo: boolean) {
-      if (!neo) {
-        this.inValue = this.modelValue;
-      }
-    },
-    inValue(neo: string) {
-      if (!this.readonly) {
-        this.$emit('update:modelValue', neo);
-      }
-    },
-    isError(neo: boolean) {
-      this.$emit('error', neo);
-    },
-  },
-  created() {
-    this.inValue = this.modelValue;
-  },
-  render(): VNode {
-    return withDirectives(
-      h(
-        'div',
-        {
-          class: { ...this.getClasses(), [`${NAME}`]: true },
-        },
-        this.createContent(),
-      ),
-      [
-        // [
-        //   resolveDirective('theme') as Directive,
-        //   (this as any).theme.dark ? 'dark' : 'light',
-        // ],
-      ],
-    );
-  },
-});

package/src/components/layer/index.ts

@@ -1,3 +0,0 @@
-import YLayer from './y-layer.vue';
-
-export { YLayer };

package/src/components/layer/y-layer.vue

@@ -1,146 +0,0 @@
-<template>
-  <Teleport :to="layerGroup" :disabled="!layerGroup">
-    <template v-if="rendered">
-      <div class="y-layer" :class="computedClass" :style="computedStyle">
-        <Transition name="fade" appear>
-          <div
-            v-if="active && scrim"
-            class="y-layer__scrim"
-            @click="onClickScrim"
-            ref="scrimElement"
-          ></div>
-        </Transition>
-        <Transition name="slide-fade" @after-leave="onAfterLeave" appear>
-          <div
-            v-show="active"
-            v-complement-click="complementClickOption"
-            class="y-layer__content"
-          >
-            <slot :active="active"></slot>
-          </div>
-        </Transition>
-      </div>
-    </template>
-  </Teleport>
-</template>
-
-<script lang="ts">
-import {
-  computed,
-  defineComponent,
-  PropType,
-  inject,
-  reactive,
-  ref
-} from "vue";
-import { useLayerGroup } from '../../composables/layer-group';
-
-import './y-layer.scss';
-import { useLazy } from '../../composables/lazy';
-import {
-  ComplementClick,
-  ComplementClickBindingOptions,
-} from '../../directives/complement-click';
-
-export default defineComponent({
-  name: 'YLayer',
-  inheritAttrs: false,
-  directives: {
-    ComplementClick,
-  },
-  props: {
-    modelValue: {
-      type: Boolean as PropType<boolean>,
-    },
-    scrim: {
-      type: Boolean as PropType<boolean>,
-    },
-    contentTagDialog: {
-      type: Boolean as PropType<boolean>,
-    },
-    eager: {
-      type: Boolean as PropType<boolean>,
-    },
-    class: {
-      type: [Array, String, Object] as PropType<
-        string[] | string | Record<string, boolean>
-      >,
-    },
-    closeClickScrim: {
-      type: Boolean as PropType<boolean>,
-    },
-    persistent: Boolean as PropType<boolean>,
-  },
-  emits: {
-    'update:modelValue': (value: boolean) => true,
-    'click:complement': (mouseEvent: MouseEvent) => true,
-  },
-  setup(props: any, { emit }) {
-    const { layerGroup } = useLayerGroup();
-    const active = computed({
-      get: () => {
-        return props.modelValue;
-      },
-      set: (v: boolean) => {
-        emit('update:modelValue', v);
-      },
-    });
-    const { lazyValue, onAfterUpdate } = useLazy(props.eager, active);
-    const rendered = computed(() => lazyValue.value || active.value);
-    const poly = inject('poly');
-    const scrimElement = ref<HTMLElement | null>(null);
-    function onClickComplementLayer(mouseEvent: MouseEvent) {
-      emit('click:complement', mouseEvent);
-      if (!props.persistent) {
-        if (scrimElement.value !== null && scrimElement.value === mouseEvent.target && props.closeClickScrim) {
-          active.value = false;
-        }
-      } else {
-        // TODO: shrug ani
-      }
-    }
-    function closeConditional(): boolean {
-      return active.value; // TODO: && groupTopLevel.value;
-    }
-    const complementClickOption = reactive<ComplementClickBindingOptions>({
-      handler: onClickComplementLayer,
-      determine: closeConditional,
-      include: () => [
-        // activatorEl.value
-      ],
-    });
-    return {
-      complementClickOption,
-      layerGroup,
-      active,
-      rendered,
-      onAfterUpdate,
-      poly,
-      scrimElement,
-    };
-  },
-  methods: {
-    onAfterLeave() {
-      this.onAfterUpdate();
-    },
-    onClickScrim() {
-      if (this.closeClickScrim) {
-        this.active = false;
-      }
-    },
-  },
-  computed: {
-    computedStyle(): any {
-      return {
-        zIndex: '2000',
-      };
-    },
-    computedClass(): any {
-      return {
-        'y-layer--active': this.active,
-        'y-dialog': this.poly === 'y-dialog',
-      };
-    },
-  },
-});
-</script>

package/src/components/lottie-player.ts

@@ -1,41 +0,0 @@
-import { defineComponent, h, PropType } from 'vue';
-import lottie, {
-  AnimationConfigWithData,
-  AnimationConfigWithPath,
-} from 'lottie-web';
-
-export default defineComponent({
-  name: 'lottie-player',
-  props: {
-    src: {
-      type: [String, Object] as PropType<string | Record<string, any>>,
-    },
-    loop: {
-      type: Boolean as PropType<boolean>,
-      default: false,
-    },
-    autoplay: {
-      type: Boolean as PropType<boolean>,
-      default: true,
-    },
-  },
-  mounted() {
-    const params: AnimationConfigWithPath | AnimationConfigWithData = {
-      container: this.$el,
-      renderer: 'svg',
-      loop: this.loop,
-      autoplay: this.autoplay,
-    };
-    if (this.src) {
-      if (typeof this.src === 'string') {
-        (params as AnimationConfigWithPath).path = this.src;
-      } else {
-        (params as AnimationConfigWithData).animationData = this.src;
-      }
-      lottie.loadAnimation(params);
-    }
-  },
-  render() {
-    return h('div', { class: 'lottie-player' });
-  },
-});

package/src/components/progress-bar/index.ts

@@ -1,3 +0,0 @@
-import YProgressBar from './y-progress-bar.vue';
-
-export { YProgressBar };

package/src/components/progress-bar/y-progress-bar.vue

@@ -1,144 +0,0 @@
-<template>
-  <div
-    class="y-progress y-progress-bar"
-    :class="classes"
-    role="progressbar"
-    aria-valuemin="0"
-    aria-valuemax="100"
-    :aria-valuenow="numValue"
-    :style="{
-      '--y-progress-bar__height':
-        height !== undefined ? `${height}px` : undefined,
-      '--y-progress-bar__outline-color':
-        outlineColor !== undefined ? outlineColor : undefined,
-    }"
-  >
-    <div class="y-progress__track"></div>
-    <div class="y-progress__tube">
-      <div class="y-progress__lead" :style="styles">
-        <slot name="lead-inner">
-          <div
-            v-if="innerText"
-            class="y-progress__lead-inner"
-            :class="{ 'y-progress__lead-inner--fixed': numValue < 3 }"
-            :style="{ color: textColor }"
-          >
-            <span>{{ numValue }} %</span>
-          </div>
-        </slot>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, PropType, StyleValue } from 'vue';
-import { useProgress } from '../../composables/progress';
-
-export default defineComponent({
-  name: 'y-progress-bar',
-  props: {
-    value: {
-      type: Number as PropType<number>,
-    },
-    rounded: {
-      type: Boolean as PropType<boolean>,
-    },
-    height: {
-      type: Number as PropType<number>,
-    },
-    noRewindTransition: {
-      type: Boolean as PropType<boolean>,
-    },
-    outlined: {
-      type: Boolean as PropType<boolean>,
-    },
-    innerText: {
-      type: Boolean as PropType<boolean>,
-    },
-    textColor: {
-      type: String as PropType<string>,
-    },
-    outlineColor: {
-      type: String as PropType<string>,
-    },
-  },
-  setup(props) {
-    const { numValue } = useProgress(props);
-
-    return {
-      numValue,
-    };
-  },
-  data() {
-    return {
-      delta: 0,
-    };
-  },
-  computed: {
-    classes(): Record<string, boolean> {
-      let noTransition = false;
-      if (this.noRewindTransition && this.delta < 0) {
-        noTransition = true;
-      }
-      return {
-        'y-progress--no-trans': noTransition,
-        'y-progress--outlined': this.outlined,
-        'y-progress-bar--rounded': this.rounded,
-      };
-    },
-    styles(): StyleValue {
-      let minWidth;
-      if (this.innerText && this.numValue < 5 && this.numValue > 0) {
-        minWidth = '2rem';
-      }
-      return {
-        transform: `scaleX(${this.numValue / 100})`,
-        minWidth,
-      };
-    },
-  },
-});
-</script>
-
-<style lang="scss">
-.y-progress {
-  --y-progress-bar__height: 4px;
-  display: flex;
-  position: relative;
-  height: var(--y-progress-bar__height, 4px);
-
-  &-bar--rounded {
-    border-radius: calc(var(--y-progress-bar__height) / 2);
-  }
-
-  &--outlined {
-    --y-progress-bar__outline-color: var(--y-palette--primary);
-    border: 1px solid var(--y-progress-bar__outline-color);
-  }
-
-  &__tube {
-    border-radius: inherit;
-    overflow: clip;
-    min-width: 0;
-    flex: 1 1;
-  }
-
-  &__track {
-    background-color: #f0f0f0;
-    position: absolute;
-    inset: 0;
-    border-radius: inherit;
-    overflow: clip;
-  }
-
-  &__lead {
-    width: 100%;
-    height: 100%;
-    background-color: var(--y-palette--primary);
-    position: relative;
-    transform-origin: left;
-    transition: all 250ms cubic-bezier(0.42, 0.5, 0.51, 1.02);
-  }
-}
-</style>