yuyeon 0.0.0

package/src/components/chip/index.ts

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

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

@@ -0,0 +1,28 @@
+/*!
+ * Created by yeonyu 2022.
+ */
+
+@use '../../styles/variables';
+
+$chip-border-radius: variables.$border-radius-root;
+
+.y-chip {
+  display: inline-flex;
+  position: relative;
+  padding: 4px 16px;
+  background: rgba(0, 0, 0, 0.14);
+  border-radius: $chip-border-radius;
+  align-items: center;
+
+  &--clickable {
+    cursor: pointer;
+  }
+
+  &__content {
+    color: inherit;
+  }
+
+  &--clickable &__content {
+    user-select: none;
+  }
+}

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

@@ -0,0 +1,69 @@
+<!--
+  - Created by yeonyu 2022.
+  -->
+
+<template>
+  <span class="y-chip" :class="classes" :style="styles">
+    <span class="y-chip__content">
+      <slot></slot>
+    </span>
+  </span>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { hasOwnProperty } from '../../util/common';
+import { colorHexToRgb } from '../../util/ui';
+
+import './y-chip.scss';
+
+export default defineComponent({
+  name: 'y-chip',
+  props: {
+    color: String,
+    background: String,
+    small: Boolean,
+    bgOpacity: {
+      type: Number,
+      default: 0.14,
+    },
+  },
+  computed: {
+    clickable() {
+      return hasOwnProperty(this.$attrs, 'onClick');
+    },
+    classes() {
+      return {
+        'y-chip--clickable': this.clickable,
+      };
+    },
+    backgroundColor() {
+      const color = (this.background as string) ?? this.color;
+      return this.colorRgb(color);
+    },
+    styles() {
+      return {
+        color: this.color,
+        background: `rgba(${this.backgroundColor}, ${this.bgOpacity})`,
+      };
+    },
+  },
+  methods: {
+    colorRgb(color: string): string {
+      if (color?.startsWith('#')) {
+        return colorHexToRgb(color)?.join(',') || '';
+      }
+      const RGBA_REGEX = /rgb(a?)\((?<v>.*)\)/;
+      if (RGBA_REGEX.test(color)) {
+        const value = RGBA_REGEX.exec(color)?.[2] || '';
+        if (value) {
+          const valueArray = value.trim().split(',');
+          valueArray.splice(3, 1);
+          return valueArray.join(',');
+        }
+      }
+      return '';
+    },
+  },
+});
+</script>

package/src/components/dialog/index.ts

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

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

@@ -0,0 +1,5 @@
+.y-dialog {
+  justify-content: center;
+  align-items: center;
+  backdrop-filter: blur(0.8px) saturate(0.4);
+}

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

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

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

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

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

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

@@ -0,0 +1,65 @@
+/*!
+ * Created by yeonyu 2022.
+ */
+@use '../../styles/util/theme';
+@use '../../styles/util/helper';
+@use '../../styles/variables';
+
+.y-field-input {
+  .y-input {
+    &__display {
+      padding: 0 2px;
+    }
+
+    &__plate {
+      pointer-events: none;
+    }
+  }
+
+  &__field {
+    position: relative;
+    flex: 1 1 auto;
+    min-height: 36px;
+    padding: 1px 0;
+    border-radius: inherit;
+
+    > input {
+      position: relative;
+      outline: none;
+      padding: 8px 10px;
+      width: 100%;
+      height: 100%;
+      line-height: 1.2;
+      font-size: 0.875rem;
+      color: inherit;
+      border-radius: inherit;
+    }
+  }
+
+  .y-input__prepend + &__field {
+    > input {
+      padding-left: 0;
+    }
+  }
+
+  .y-input__append:last-child {
+    &.y-input__append--clear {
+      margin-right: 8px;
+    }
+  }
+
+  &__clear {
+    width: 16px;
+    height: 16px;
+    padding: 0;
+    cursor: pointer;
+  }
+}
+
+@include theme.basicTheme('y-field-input') using ($themeMap, $class) {
+  .y-field-input {
+    &__clear {
+      color: helper.deepGet($themeMap, 'fieldInput', 'clear');
+    }
+  }
+}

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

@@ -0,0 +1,214 @@
+/*
+ * 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

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

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

@@ -0,0 +1,93 @@
+/*
+ * 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

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

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

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

package/src/components/input/index.ts

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