yuyeon 0.0.0 → 0.0.2

package/src/components/checkbox/IconCheckbox.vue

@@ -1,24 +0,0 @@
-<template>
-  <svg
-    class="icon-checkbox"
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-  >
-    <path
-      class="icon-checkbox__border-path"
-      d="M 15.525 21.825 H 8.325 C 4.851 21.825 2.025 18.999 2.025 15.525 V 8.325 C 2.025 4.851 4.851 2.025 8.325 2.025 H 15.525 C 18.999 2.025 21.825 4.851 21.825 8.325 V 15.525 C 21.825 18.999 18.999 21.825 15.525 21.825 Z"
-    />
-    <path
-      class="icon-checkbox__checkmark-path"
-      fill="none"
-      d="M5.73,11.91 11.1,16.28 17.79,7.59"
-    ></path>
-  </svg>
-</template>
-
-<script>
-export default {
-  name: 'IconCheckbox',
-};
-</script>

package/src/components/checkbox/YCheckbox.vue

@@ -1,113 +0,0 @@
-<!--
-  - Created by yeonyu at 2021-09-23
-  -->
-
-<template>
-  <div class="y-checkbox" :class="classes">
-    <slot name="prepend"></slot>
-    <div class="y-checkbox__slot">
-      <y-input-checkbox
-        @click.stop="onClick"
-        :id="counterId"
-        :value="innerValue"
-        :icon="computedIcon"
-        @focus="onFocus"
-        @blur="onBlur"
-        :color="color"
-        :disabled="disabled"
-        :readonly="readonly"
-      >
-        <template v-if="$slots.icon" #icon="{ checked }">
-          <slot name="icon" :checked="checked"></slot>
-        </template>
-      </y-input-checkbox>
-      <label @click.stop="" class="y-checkbox__label" :for="inputId">
-        <slot name="label">{{ label }}</slot>
-      </label>
-    </div>
-    <slot name="append"></slot>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
-import YInputCheckbox from './YInputCheckbox.vue';
-
-import './y-checkbox.scss';
-
-export default defineComponent({
-  name: 'y-checkbox',
-  components: { YInputCheckbox },
-  created() {
-    this.counterId = this.$yeonyui.getComponentCounter().toString();
-    this.innerValue = this.inputValue;
-  },
-  model: {
-    prop: 'inputValue',
-    event: 'change',
-  },
-  props: {
-    label: String as PropType<string>,
-    reverse: Boolean as PropType<boolean>,
-    icon: {
-      type: [Object, String] as PropType<
-        { checked?: string; unchecked?: string } | string
-      >,
-    },
-    color: {
-      type: String as PropType<string>,
-      default: () => 'primary',
-    },
-    disabled: Boolean as PropType<boolean>,
-    readonly: Boolean as PropType<boolean>,
-  },
-  data() {
-    return {
-      innerValue: false,
-      focused: false,
-      counterId: '',
-    };
-  },
-  computed: {
-    classes(): Record<string, boolean> {
-      const { reverse, focused, disabled, readonly } = this;
-      return {
-        'y-checkbox--reverse': reverse,
-        'y-checkbox--focused': focused,
-        'y-checkbox--disabled': disabled,
-        'y-checkbox--readonly': readonly,
-      };
-    },
-    computedIcon(): string | undefined {
-      if (typeof this.icon === 'string') {
-        return this.icon;
-      }
-      return undefined;
-    },
-    inputId() {
-      const id = this.counterId;
-      return `input-${id}`;
-    },
-  },
-  methods: {
-    onFocus(e: FocusEvent) {
-      this.focused = true;
-      this.$emit('focus', e);
-    },
-    onBlur(e: FocusEvent) {
-      this.focused = false;
-      this.$emit('blur', e);
-    },
-    onClick(e: MouseEvent) {
-      if (this.disabled || this.readonly) return;
-      this.innerValue = !this.innerValue;
-      this.$emit('change', this.innerValue, e);
-    },
-  },
-  watch: {
-    inputValue(neo: boolean) {
-      this.innerValue = neo;
-    },
-  },
-});
-</script>

package/src/components/checkbox/YInputCheckbox.vue

@@ -1,108 +0,0 @@
-<!--
-  - Created by yeonyu at 2021-09-23
-  -->
-
-<template>
-  <div @click="onClick" class="y-input y-input--checkbox" :class="classes">
-    <input
-      :id="inputId"
-      :aria-checked="checked"
-      role="checkbox"
-      type="checkbox"
-      :checked="checked"
-      @focus="onFocus"
-      @blur="onBlur"
-      :disabled="disabled"
-      :readonly="readonly"
-    />
-    <slot name="icon" :checked="checked">
-      <component :is="iconComponent" v-if="iconComponent"></component>
-      <icon-checkbox v-else></icon-checkbox>
-    </slot>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
-import IconCheckbox from './IconCheckbox.vue';
-
-import './y-input-checkbox.scss';
-
-export default defineComponent({
-  name: 'y-input-checkbox',
-  components: { IconCheckbox },
-  props: {
-    id: String as PropType<string>,
-    value: Boolean as PropType<boolean>,
-    icon: String as PropType<string>,
-    color: {
-      type: String as PropType<string>,
-      default: () => 'primary',
-    },
-    disabled: Boolean as PropType<boolean>,
-    readonly: Boolean as PropType<boolean>,
-  },
-  data() {
-    return {
-      counterId: '',
-      checked: false,
-      focused: false,
-    };
-  },
-  computed: {
-    coloredClass() {
-      if (this.color.startsWith('#')) {
-        return undefined;
-      }
-      return `color--${this.color}`;
-    },
-    classes() {
-      const ret: Record<string, boolean> = {
-        'y-input--active': this.checked,
-        'y-input--focused': this.focused,
-      };
-      if (this.coloredClass) {
-        ret[this.coloredClass] = true;
-      }
-      return ret;
-    },
-    inputId() {
-      let id = this.counterId;
-      if (this.id) {
-        id = this.id;
-      }
-      return `input-${id}`;
-    },
-    iconComponent() {
-      if (this.icon) {
-        if (this.$yeonyui.icons[this.icon]) {
-          return this.$yeonyui.icons[this.icon];
-        }
-      }
-      return null;
-    },
-  },
-  methods: {
-    onFocus(e: FocusEvent) {
-      this.focused = true;
-      this.$emit('focus', e);
-    },
-    onBlur(e: FocusEvent) {
-      this.focused = false;
-      this.$emit('blur', e);
-    },
-    onClick(event: MouseEvent) {
-      this.$emit('click', event);
-    },
-  },
-  watch: {
-    value(neo: boolean) {
-      this.checked = neo;
-    },
-  },
-  created() {
-    this.checked = this.value;
-    this.counterId = this.$yeonyui.getComponentCounter().toString();
-  },
-});
-</script>

package/src/components/checkbox/index.ts

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

package/src/components/chip/index.ts

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

package/src/components/dialog/index.ts

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

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

@@ -1,46 +0,0 @@
-<template>
-  <y-layer v-model="active" content-tag-dialog scrim>
-    <slot name="activator"></slot>
-    <slot></slot>
-  </y-layer>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, PropType, provide } from 'vue';
-import { YLayer } from '../layer';
-import { YCard } from '../card';
-
-import './y-dialog.scss';
-
-export default defineComponent({
-  name: 'YDialog',
-  components: {
-    YLayer,
-    YCard,
-  },
-  props: {
-    modelValue: {
-      type: Boolean as PropType<boolean>,
-    },
-  },
-  emits: {
-    'update:modelValue': (value: boolean) => true,
-  },
-  setup(props: any, { emit }) {
-    const active = computed({
-      get: () => {
-        return props.modelValue;
-      },
-      set: (v: boolean) => {
-        emit('update:modelValue', v);
-      },
-    });
-
-    provide('poly', 'y-dialog');
-
-    return {
-      active,
-    };
-  },
-});
-</script>

package/src/components/field-input/index.scss

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

package/src/components/field-input/index.ts

@@ -1,11 +0,0 @@
-/*
- * Created by yeonyu 2022.
- */
-
-import YFieldInput from './y-field-input';
-
-export { YFieldInput };
-
-export default {
-  YFieldInput,
-};

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

@@ -1,214 +0,0 @@
-/*
- * Created by yeonyu 2022.
- */
-
-import { YInput } from '../input';
-import { VNode, defineComponent, h } from 'vue';
-
-import './index.scss';
-import { getSlot } from '../../util/vue-component';
-import IconClearable from '../icons/icon-clearable';
-
-const NAME = 'y-field-input';
-
-export default defineComponent({
-  extends: YInput,
-  name: NAME,
-  inheritAttrs: false,
-  props: {
-    clearable: Boolean,
-    inputAlign: String,
-    displayText: [String, Function],
-    whenInputValid: [Boolean, Number],
-    tabindex: {
-      type: String,
-      default: '0',
-    },
-  },
-  mounted() {
-    this.displayValue = this.inValue as string;
-  },
-  data() {
-    return {
-      displayValue: '' as string,
-    };
-  },
-  computed: {
-    fieldInputClasses(): Record<string, any> {
-      return {
-        ...this.classes,
-        [NAME]: true,
-      };
-    },
-    inputType(): string {
-      const attr = (this.$attrs.type as string) || 'text';
-      return attr;
-    },
-  },
-  methods: {
-    getClasses() {
-      return {
-        ...YInput.methods?.getClasses(),
-        ...this.fieldInputClasses,
-      };
-    },
-    createInput(): VNode {
-      const { readonly, placeholder, disabled } = this;
-      return h('input', {
-        '.value': this.displayValue,
-        '.id': this.attrId,
-        '.type': this.inputType,
-        readonly: readonly || this.loading || this.formLoading,
-        '.placeholder': placeholder,
-        '.disabled': disabled,
-        '^tabindex': this.tabindex || '0',
-        autocomplete: this.$attrs.autocomplete,
-        maxlength: this.$attrs.maxlength,
-        onInput: this.onInput,
-        onFocus: this.onFocus,
-        onBlur: this.onBlur,
-        onChange: this.onChange,
-        onKeydown: this.onKeydown,
-        onKeyup: this.onKeyup,
-        style: {
-          textAlign: this.inputAlign,
-        },
-        ref: 'input',
-      });
-    },
-    createDefaultChildren(): (VNode | undefined)[] {
-      return [
-        YInput.methods!.createLabel.call(this),
-        this.createInput.call(this),
-      ];
-    },
-    createDefault(): VNode {
-      return h(
-        'div',
-        {
-          class: `${NAME}__field`,
-          'data-id': this.attrId,
-          ref: 'field',
-        },
-        this.createDefaultChildren(),
-      );
-    },
-    createClearAppend(): VNode {
-      return h('div', { class: 'y-input__append y-input__append--clear' }, [
-        h(
-          'button',
-          {
-            class: `${NAME}__clear`,
-            onClick: this.onClickClear,
-            onKeydown: this.onKeydownClear,
-            '^tabindex': '2',
-          },
-          [h(IconClearable)],
-        ),
-      ]);
-    },
-    createAppend(): VNode[] {
-      const appends = [];
-      if (this.clearable && this.inValue) {
-        appends.push(this.createClearAppend());
-      }
-      const slot = getSlot(this, 'append');
-      if (slot) {
-        appends.push(h('div', { class: 'y-input__append' }, slot));
-      }
-      return appends;
-    },
-    //
-    onClick(event: MouseEvent) {
-      (this.$refs.input as HTMLElement).focus();
-      this.$emit('click', event);
-    },
-    onFocus(event: FocusEvent) {
-      if (this) {
-        this.isFocused = true;
-        this.displayValue = this.inValue as string;
-        this.$emit('focus', event);
-      }
-    },
-    onBlur(event: FocusEvent) {
-      this.isFocused = false;
-      this.invokeValidators();
-      this.$emit('blur', event);
-      this.changeDisplay();
-    },
-    onInput(event: InputEvent) {
-      const target = event.target as HTMLInputElement | null;
-      this.inValue = target?.value;
-      this.displayValue = target?.value as string;
-      if (this.whenInputValid) {
-        this.invokeValidators();
-      }
-      this.$emit('update:modelValue', this.inValue);
-    },
-    onChange(event: Event) {
-      YInput.methods?.onChange.call(this, event);
-      this.$emit('change', this.inValue);
-    },
-    onKeydown(event: KeyboardEvent) {
-      this.$emit('keydown', event);
-    },
-    onKeyup(event: KeyboardEvent) {
-      this.$emit('keyup', event);
-    },
-    //
-    clear() {
-      this.inValue = '';
-      this.$emit('update:modelValue', this.inValue);
-    },
-    onClickClear(event: MouseEvent) {
-      this.clear();
-    },
-    onKeydownClear(event: KeyboardEvent) {
-      if (event.code === 'Space' || event.code === 'Enter') {
-        this.clear();
-      }
-    },
-    //
-    /**
-     * @public
-     */
-    focus() {
-      (this.$refs.input as HTMLInputElement).focus();
-    },
-    /**
-     * @public
-     */
-    select() {
-      (this.$refs.input as HTMLInputElement).select();
-    },
-    //
-    changeDisplay() {
-      const { displayText } = this;
-      if (displayText !== undefined) {
-        let text = this.inValue;
-        if (typeof displayText === 'string') {
-          text = displayText;
-        }
-        if (displayText && typeof displayText === 'function') {
-          text = (displayText as any).call(this, text);
-        }
-        this.$nextTick(() => {
-          this.displayValue = text as string;
-        });
-      }
-    },
-  },
-  watch: {
-    modelValue(neo: any) {
-      this.inValue = neo;
-      this.displayValue = neo;
-    },
-    inValue(neo: string) {
-      if (!this.isFocused) {
-        this.changeDisplay();
-      } else {
-        this.displayValue = neo;
-      }
-    },
-  },
-});

package/src/components/form/index.ts

@@ -1,9 +0,0 @@
-/*
- * Created by yeonyu 2022.
- */
-
-import YForm from './y-form';
-
-export { YForm };
-
-export default YForm;

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

@@ -1,93 +0,0 @@
-/*
- * Created by yeonyu 2022.
- */
-
-import {
-  defineComponent,
-  PropType,
-  VNode,
-  h,
-  ComponentPublicInstance,
-  withKeys,
-} from 'vue';
-//
-import RebindAttrs from '../../mixins/rebind-attrs';
-
-const NAME = 'y-form';
-const rootTags = ['form', 'div', 'section', 'article'];
-
-export default defineComponent({
-  name: NAME,
-  inheritAttrs: false,
-  mixins: [RebindAttrs],
-  provide() {
-    return {
-      form$: this,
-    };
-  },
-  props: {
-    tag: {
-      type: String as PropType<string>,
-      default: 'form',
-      validator(value: string) {
-        return rootTags.includes(value);
-      },
-    },
-    loading: Boolean,
-  },
-  data() {
-    return {
-      inputs: {} as Record<string, ComponentPublicInstance>,
-      formData: {} as any,
-    };
-  },
-  methods: {
-    register(component: any) {
-      const { iid, name } = component;
-      // TODO: vue3 에서 $on 제거됨에 따라 트리거 따로 만들어야 함
-      this.inputs[iid] = component;
-    },
-    unregister(component: any) {
-      delete this.inputs[component.iid];
-    },
-    validate(): boolean {
-      let flag = true;
-      Object.values(this.inputs).forEach((input: any) => {
-        const valid = input?.invokeValidators.call(input);
-        flag = flag && valid;
-      });
-      return flag;
-    },
-  },
-  computed: {
-    attrs() {
-      return {
-        ...this.attrs_$,
-      };
-    },
-  },
-  render(): VNode {
-    const { tag }: any = this;
-    // this.attrs_$
-    return h(
-      tag,
-      {
-        class: NAME,
-        '.novalidate': true,
-        onSubmit: (e: Event) => {
-          e.preventDefault();
-          this.$emit('submit', e, this.formData);
-        },
-        onKeydown: withKeys(
-          (e: Event) => {
-            e.preventDefault();
-            e.stopImmediatePropagation();
-            this.$emit('keydown.enter', e);
-          },
-          ['enter'],
-        ),
-      },
-      this.$slots.default?.(),
-    );
-  },
-});

package/src/components/icons/icon-clearable.ts

@@ -1,6 +0,0 @@
-import { defineComponent, h, VNode } from 'vue';
-
-export default defineComponent({
-  name: 'icon-clearable',
-  template: `<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="m8 1.5c-3.5839 0-6.5 2.9161-6.5 6.5 0 3.5839 2.9161 6.5 6.5 6.5 3.5839 0 6.5-2.9161 6.5-6.5 0-3.5839-2.9161-6.5-6.5-6.5zm-2 4a.5.5 0 01.35352.14648l1.6465 1.6465 1.6465-1.6465a.5.5 0 01.35352-.14648.5.5 0 01.35352.14648.5.5 0 010 .70703l-1.6465 1.6465 1.6465 1.6465a.5.5 0 010 .70703.5.5 0 01-.70703 0l-1.6465-1.6465-1.6465 1.6465a.5.5 0 01-.70703 0 .5.5 0 010-.70703l1.6465-1.6465-1.6465-1.6465a.5.5 0 010-.70703.5.5 0 01.35352-.14648z" fill="currentColor" stroke-miterlimit="10" /></svg>`,
-});

package/src/components/index.ts

@@ -1,17 +0,0 @@
-export * from './button';
-export * from './input';
-export * from './field-input';
-export * from './form';
-export * from './progress-bar';
-export * from './card';
-export * from './chip';
-export * from './layer';
-export * from './dialog';
-
-import YLottiePlayer from './lottie-player';
-import YRingSpinner from './ring-spinner/y-ring-spinner.vue';
-
-export {
-  YRingSpinner,
-  YLottiePlayer,
-};

package/src/components/input/index.scss

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

package/src/components/input/index.ts

@@ -1,9 +0,0 @@
-/*
- * Created by yeonyu 2022.
- */
-
-import YInput from './y-input';
-
-export { YInput };
-
-export default YInput;