yuyeon 0.0.0

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

@@ -0,0 +1,209 @@
+/*!
+ * Created by yeonyu 2022.
+ */
+
+@use '../../styles/palette';
+@use '../../styles/variables';
+
+$input-border-radius: variables.$border-radius-root !default;
+
+.y-input {
+  font-size: 14px;
+  flex: 1 1 auto;
+  display: flex;
+  align-items: flex-start;
+  letter-spacing: normal;
+  text-align: left;
+
+  &__prepend-outer,
+  &__append-outer {
+    height: 100%;
+  }
+
+  &__stack {
+    display: flex;
+    flex-direction: column;
+    height: 100%; // auto
+    flex: 1;
+    flex-wrap: wrap;
+    min-width: 0;
+    width: 100%;
+  }
+
+  &__display {
+    display: flex;
+    position: relative;
+    cursor: text;
+    flex: 1 1 auto;
+    border-radius: $input-border-radius;
+  }
+
+  &__plate {
+    position: absolute;
+    inset: 0;
+    border-top: 1px solid transparent;
+    contain: paint;
+    border-radius: $input-border-radius;
+    outline: 0 solid rgba(0, 0, 0, 0);
+  }
+
+  &__value {
+    position: relative;
+    flex: 1 0 auto;
+    padding: 0.5rem 0.875rem;
+    display: flex;
+    align-items: center;
+    line-height: 1em;
+  }
+
+  &__helper-text {
+    font-size: 14px;
+    font-weight: 320;
+    color: #444;
+  }
+
+  @keyframes label-float {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(-26px) scale(0.74);
+    }
+  }
+
+  @keyframes label-sink {
+    0% {
+      opacity: 1;
+      transform: translateY(-26px) scale(0.74);
+    }
+    30% {
+      opacity: 0;
+    }
+    80% {
+      opacity: 0;
+      transform: translateY(-8px) scale(1);
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+  }
+
+  &__label {
+    position: absolute;
+    color: #5e5e5e;
+    max-width: 90%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    pointer-events: none;
+    left: 0;
+    top: 6px;
+    transform-origin: left center;
+
+    &--floated {
+      animation: label-float 200ms ease-in-out forwards;
+    }
+
+    &:not(&--floated) {
+      animation: label-sink 200ms linear;
+    }
+  }
+
+  &__prepend {
+    position: relative;
+    display: inline-flex;
+    margin-top: 10px;
+    padding-right: 8px;
+    align-self: flex-start;
+
+    > * {
+      width: 24px;
+      height: 24px;
+      user-select: none;
+    }
+  }
+
+  &__append {
+    position: relative;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  &--labeled {
+    padding-top: 12px;
+    margin-top: 4px;
+  }
+
+  &--filled {
+    .y-input__plate {
+      background: #f2f2f2;
+    }
+
+    .y-input__prepend {
+      padding-left: 12px;
+    }
+  }
+
+  &--outlined {
+    .y-input__plate {
+      border: 1px solid #a4a4a4;
+      box-sizing: border-box;
+      inset: 0;
+    }
+    .y-input__plate:before {
+      top: 0;
+      height: 100%;
+      background: transparent;
+      border-radius: inherit;
+    }
+  }
+
+  &--ceramic {
+    .y-input__plate {
+      border: 1px solid #e4e4e4;
+      box-sizing: border-box;
+      inset: 0;
+      border-top-color: transparent;
+      border-left-width: 0;
+      border-right-width: 0;
+      box-shadow: 1px 2px 8px -1px rgb(0 0 0 / 11%),
+        inset 1px 1px 8px -4px rgb(0 0 0 / 11%);
+      outline: 0 solid rgba(0, 0, 0, 0);
+    }
+
+    .y-input__plate:before {
+      inset: -1px;
+      height: 100%;
+      background: transparent;
+      border-radius: inherit;
+    }
+  }
+
+  &--focused {
+    .y-input__value {
+      outline: none;
+    }
+
+    .y-input__plate {
+      outline: 1px solid rgba(var(--y-palette--primary, #4f97dc), 0.1);
+    }
+
+    .y-input__prepend {
+      color: currentColor;
+    }
+  }
+
+  &--error {
+    &.y-input--outlined {
+      .y-input__plate {
+        border-color: palette.$alert-negative !important;
+      }
+    }
+    .y-input__helper-text {
+      color: palette.$alert-negative;
+    }
+  }
+}

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

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

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

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

@@ -0,0 +1,32 @@
+.y-layer-group {
+  contain: layout;
+  left: 0;
+  top: 0;
+  pointer-events: none;
+  position: absolute;
+  display: contents;
+}
+
+.y-layer {
+  border-radius: inherit;
+  display: flex;
+  inset: 0;
+  position: fixed;
+
+  &__scrim {
+    pointer-events: auto;
+    background: rgb(var(--y-layer-scrim, 0, 0, 0));
+    border-radius: inherit;
+    inset: 0;
+    opacity: 0.4;
+    position: fixed;
+  }
+
+  &__content {
+    outline: none;
+    position: absolute;
+    pointer-events: auto;
+    contain: layout;
+    transform-style: preserve-3d;
+  }
+}