yuyeon 0.0.0

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "yuyeon",
+  "version": "0.0.0",
+  "description": "Vue UI Library ",
+  "repository": "git@github.com:yuyeonUI/yuyeon.git",
+  "author": "yeonyu <yeonyu@yeonyu.dev>",
+  "license": "Apache-2.0",
+  "keywords": [
+    "components",
+    "component library",
+    "UI library",
+    "vue components"
+  ],
+  "engines": {
+    "node": ">=14.13"
+  },
+  "main": "src/index.ts",
+  "module": "src/index.mjs",
+  "files": ["src/"],
+  "exports": {
+    "./*": "./src/*"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^4.0.0",
+    "prettier": "^2.8.3",
+    "vite": "^4.0.4",
+    "vue-tsc": "^1.0.24"
+  },
+  "peerDependencies": {
+    "vue": "^3.2.0",
+    "vue-i18n": "^9.0.0"
+  },
+  "peerDependenciesMeta": {
+    "vue-i18n": {
+      "optional": true
+    }
+  }
+}

package/src/components/button/index.ts

@@ -0,0 +1,3 @@
+import YBtn from './y-btn';
+
+export { YBtn };

package/src/components/button/y-btn.scss

@@ -0,0 +1,79 @@
+@use '../../styles/variables';
+@use '../../styles/palette';
+
+$button-border-radius: variables.$border-radius-root !default;
+$button-before-opacity: 0.06 !default;
+$button-disabled-background: #b3b3b3;
+
+.y-btn {
+  --y-btn__color: var(--y-palette--primary);
+
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  border-radius: $button-border-radius;
+  font-weight: 500;
+  transition: all 240ms cubic-bezier(0.42, 0.5, 0.51, 1.02);
+
+  &__content {
+    display: flex;
+    align-items: center;
+    padding: 4px 8px;
+  }
+
+  &:not(&--disabled):not(&--outlined):not(&--loading):not(&--filled):not(
+      &--text
+    ) {
+    box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.14);
+  }
+
+  &--filled {
+    background-color: var(--y-btn__color);
+    color: #ffffff;
+  }
+
+  &:not(&--outlined):disabled,
+  &--disabled:not(&--outlined) {
+    background-color: $button-disabled-background;
+    opacity: 0.4;
+    cursor: default;
+  }
+
+  &:before {
+    background-color: currentColor;
+    border-radius: inherit;
+    bottom: 0;
+    color: inherit;
+    content: '';
+    left: 0;
+    opacity: 0;
+    pointer-events: none;
+    position: absolute;
+    right: 0;
+    top: 0;
+    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.6, 1);
+  }
+
+  &:hover:before {
+    opacity: 0.06;
+  }
+
+  &--rounded {
+    border-radius: 10vh;
+  }
+
+  &--outlined {
+    color: var(--y-btn__color);
+    border: 1px solid var(--y-btn__color);
+  }
+
+  &--loading {
+    cursor: wait;
+  }
+
+  &:active:not(&--loading) {
+    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.14);
+  }
+}

package/src/components/button/y-btn.ts

@@ -0,0 +1,104 @@
+import { defineComponent, h, VNodeArrayChildren, withDirectives } from 'vue';
+import { getSlot } from "../../util/vue-component";
+import { PlateWave } from "../../directives/plate-wave";
+
+/**
+ * Style
+ */
+import './y-btn.scss';
+import YRingSpinner from '../ring-spinner/y-ring-spinner.vue';
+import { isColorValue } from '../../util/ui';
+
+const NAME = 'y-btn';
+
+export default defineComponent({
+  name: NAME,
+  directives: {
+    PlateWave,
+  },
+  props: {
+    loading: Boolean,
+    outlined: {
+      type: Boolean,
+      default: false,
+    },
+    rounded: {
+      type: Boolean,
+      default: false,
+    },
+    filled: {
+      type: Boolean,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+    },
+    text: {
+      type: Boolean,
+    },
+    color: {
+      type: String,
+    },
+  },
+  computed: {
+    classes() {
+      return {
+        [`${NAME}--outlined`]: this.outlined,
+        [`${NAME}--loading`]: this.loading,
+        [`${NAME}--rounded`]: this.rounded,
+        [`${NAME}--filled`]: this.filled,
+        [`${NAME}--disabled`]: this.disabled,
+        [`${NAME}--text`]: this.text,
+      };
+    },
+    styles(): Record<string, any> {
+      let { color } = this;
+      if (color && !isColorValue(color)) {
+        color = `var(--y-palette--${color})`;
+      }
+      return {
+        [`--y-btn__color`]: color,
+      };
+    },
+  },
+  methods: {
+    createContent() {
+      const defaultSlot = getSlot(this, 'default');
+      const children: VNodeArrayChildren = [];
+      if (this.loading) {
+        children.push(h(YRingSpinner));
+      }
+      children.push(defaultSlot);
+      return h('span', { class: 'y-btn__content' }, children);
+    },
+    getClasses() {
+      return this.classes;
+    },
+    /// Events
+    onClick(e: MouseEvent) {
+      e.preventDefault();
+      if (this.loading) {
+        return;
+      }
+    },
+  },
+  render() {
+    const { onClick, styles } = this;
+    return withDirectives(
+      h(
+        'button',
+        {
+          class: {
+            ...this.getClasses(),
+            [`${NAME}`]: true,
+          },
+          style: styles,
+          onClick,
+          '^disabled': this.disabled ? true : undefined,
+        },
+        this.createContent(),
+      ),
+      [[PlateWave, true]],
+    );
+  },
+});

package/src/components/card/index.ts

@@ -0,0 +1,6 @@
+import YCard from './y-card';
+import YCardHeader from './y-card-header';
+import YCardBody from './y-card-body';
+import YCardFooter from './y-card-footer';
+
+export { YCard, YCardHeader, YCardBody, YCardFooter };

package/src/components/card/y-card-body.ts

@@ -0,0 +1,8 @@
+import { defineComponent, h } from 'vue';
+
+export default defineComponent({
+  name: 'y-card-body',
+  render() {
+    return h('div', { class: 'y-card__body' }, this.$slots.default?.());
+  },
+});

package/src/components/card/y-card-footer.ts

@@ -0,0 +1,8 @@
+import { defineComponent, h } from 'vue';
+
+export default defineComponent({
+  name: 'y-card-footer',
+  render() {
+    return h('div', { class: 'y-card__footer' }, this.$slots.default?.());
+  },
+});

package/src/components/card/y-card-header.ts

@@ -0,0 +1,8 @@
+import { defineComponent, h } from 'vue';
+
+export default defineComponent({
+  name: 'y-card-header',
+  render() {
+    return h('div', { class: 'y-card__header' }, this.$slots.default?.());
+  },
+});

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

@@ -0,0 +1,30 @@
+@use '../../styles/palette';
+@use '../../styles/variables';
+
+$card__border-radius: variables.$border-radius-root !default;
+$card__padding: 24px;
+
+.y-card {
+  --y-card__border-radius: #{$card__border-radius};
+  --y-card__background: #fff;
+
+  background-color: var(--y-card__background);
+  border-radius: var(--y-card__border-radius, $card__border-radius);
+
+  &__header {
+    padding: $card__padding $card__padding 0;
+    display: flex;
+  }
+
+  &__body {
+    padding: 0 $card__padding;
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__footer {
+    padding: 12px 24px;
+    display: flex;
+    justify-content: space-between;
+  }
+}

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

@@ -0,0 +1,16 @@
+import { defineComponent, h, VNode } from 'vue';
+
+import './y-card.scss';
+
+export default defineComponent({
+  name: 'y-card',
+  render(): VNode {
+    return h(
+      'div',
+      {
+        class: ['y-card'],
+      },
+      this.$slots.default?.call(this),
+    );
+  },
+});

package/src/components/checkbox/IconCheckbox.vue

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

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

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

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

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

@@ -0,0 +1,48 @@
+@use '../../styles/palette';
+
+$checkbox__label-color: #585858 !default;
+
+.y-checkbox {
+  display: flex;
+  align-items: center;
+
+  &__slot {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .y-checkbox__label {
+    cursor: pointer;
+    font-weight: 400;
+    color: $checkbox__label-color;
+    font-size: 14px;
+  }
+
+  &--reverse .y-checkbox__slot {
+    flex-direction: row-reverse;
+  }
+
+  &:not(&--reverse) .y-input--checkbox {
+    margin-right: 8px;
+  }
+
+  &--reverse .y-input--checkbox {
+    margin-left: 8px;
+  }
+
+  &--readonly,
+  &--disabled {
+    .y-checkbox__label,
+    .y-input--checkbox {
+      cursor: default;
+    }
+  }
+
+  &--disabled {
+    .y-checkbox__slot {
+      filter: grayscale(1);
+      opacity: 0.4;
+    }
+  }
+}

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

@@ -0,0 +1,86 @@
+@use '../../styles/palette';
+
+$checkbox__color: palette.$primary;
+$checkbox__border-color: #a4a4a4;
+
+.y-input--checkbox {
+  --y-checkbox__color: var(--y-palette--primary);
+
+  position: relative;
+  width: 24px;
+  height: 24px;
+  display: inline-flex;
+  flex: 0 0 auto;
+  box-sizing: border-box;
+
+  input[role='checkbox'] {
+    position: absolute;
+    opacity: 0;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .icon-checkbox__checkmark-path {
+    fill: none;
+    stroke: #ffffff;
+    stroke-width: 2px;
+    stroke-dashoffset: 29.7833385;
+    stroke-dasharray: 29.7833385;
+    transition: stroke-dashoffset 120ms cubic-bezier(0.4, 0, 0.6, 1);
+  }
+
+  .icon-checkbox__border-path {
+    fill: rgba($checkbox__color, 0);
+    stroke: rgba($checkbox__border-color, 0.8);
+    stroke-width: 2;
+    transition: fill 200ms 180ms ease-in;
+  }
+
+  input:checked ~ .icon-checkbox,
+  &.y-input--active .icon-checkbox {
+    .icon-checkbox__checkmark-path {
+      stroke-dashoffset: 0;
+      transition: stroke-dashoffset 120ms 140ms cubic-bezier(0.4, 0, 0.6, 1);
+    }
+
+    .icon-checkbox__border-path {
+      fill: $checkbox__color;
+      stroke: rgba($checkbox__color, 0.8);
+      transition: fill 200ms ease-in;
+    }
+  }
+
+  input:focus ~ .icon-checkbox {
+    .icon-checkbox__border-path {
+      outline: rgba($checkbox__color, 0.5) solid 4px;
+      outline-offset: -6px;
+    }
+  }
+
+  &:hover {
+    .icon-checkbox__border-path {
+      stroke: rgba($checkbox__color, 0.5);
+    }
+  }
+
+  &.y-input--active:hover {
+    .icon-checkbox__border-path {
+      fill: lighten($checkbox__color, 10);
+    }
+  }
+
+  &.y-input--indeterminate .icon-checkbox {
+    .icon-checkbox__checkmark-path {
+      stroke-dashoffset: 0;
+      d: path('M5.73,11.91 11.1,11.91 17.79,11.91');
+      transition: stroke-dashoffset 400ms ease;
+    }
+
+    .icon-checkbox__border-path {
+      fill: rgba($checkbox__border-color, 0.8);
+      stroke: rgba($checkbox__border-color, 0.8);
+    }
+  }
+}