yuyeon 0.0.0

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

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

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

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

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

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

package/src/components/ring-spinner/y-ring-spinner.scss

@@ -0,0 +1,25 @@
+.y-ring-spinner {
+  transform-origin: center;
+  animation: rotate 2s linear infinite;
+
+  &__circle {
+    fill: none;
+    stroke: currentColor;
+    animation: ring-spinner-dash 1.4s cubic-bezier(0.27, 0.03, 0.5, 1.22)
+      infinite;
+  }
+}
+@keyframes ring-spinner-dash {
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 100, 200;
+    stroke-dashoffset: -15px;
+  }
+  100% {
+    stroke-dasharray: 100, 200;
+    stroke-dashoffset: -104px;
+  }
+}

package/src/components/ring-spinner/y-ring-spinner.vue

@@ -0,0 +1,31 @@
+<template>
+  <svg
+    class="y-ring-spinner"
+    width="48"
+    height="48"
+    viewBox="0 0 48 48"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle
+      class="y-ring-spinner__circle"
+      cx="24"
+      cy="24"
+      r="18"
+      stroke-width="4"
+      stroke-dasharray="113.097"
+      stroke-dashoffset="113.097"
+    />
+  </svg>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+import './y-ring-spinner.scss';
+
+const NAME = 'y-ring-spinner';
+
+export default defineComponent({
+  name: NAME,
+});
+</script>

package/src/components/switch/YSwitch.vue

@@ -0,0 +1,217 @@
+<!--
+  - Created by yeonyu at 2021-09-23
+  -->
+
+<template>
+  <div class="y-switch" :class="classes">
+    <div class="y-switch__slot">
+      <div
+        class="y-switch__input"
+        @click.capture="onClick"
+        @keydown="onKeydown"
+      >
+        <input
+          :id="inputId"
+          :aria-checked="innerValue"
+          type="checkbox"
+          role="switch"
+          @focus="onFocus"
+          @blur="onBlur"
+          @change="onChange"
+          :disabled="disabled"
+          :checked="innerValue"
+          ref="checkbox"
+        />
+        <div class="y-switch__track" :style="trackStyles">
+          <div v-if="stateLabel" class="y-switch__state">
+            <span class="y-switch__state-label y-switch__state-label--on">
+              {{ labelOn }}
+            </span>
+            <span class="y-switch__state-label y-switch__state-label--off">
+              {{ labelOff }}
+            </span>
+          </div>
+        </div>
+        <div class="y-switch__thumb">
+          <div v-if="loading" class="y-switch__spinner"></div>
+        </div>
+      </div>
+      <label :for="inputId" class="y-switch__label">
+        <slot name="label"></slot>
+        <input hidden />
+      </label>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+
+let uidCounter = 0;
+
+export default defineComponent({
+  name: 'YSwitch',
+  model: {
+    prop: 'input',
+    event: 'change',
+  },
+  props: {
+    input: {
+      type: [Boolean, Array] as PropType<boolean | any[]>,
+      default: false,
+    },
+    value: {
+      type: [String, Number, Object] as PropType<any>,
+    },
+    max: {
+      type: Number,
+    },
+    loading: {
+      type: Boolean,
+    },
+    disabled: {
+      type: Boolean,
+    },
+    stickOut: {
+      type: Boolean,
+    },
+    stateLabel: {
+      type: Boolean,
+    },
+    color: {
+      type: String,
+    },
+    labelOn: {
+      type: String,
+      default: 'ON',
+    },
+    labelOff: {
+      type: String,
+      default: 'OFF',
+    },
+  },
+  data() {
+    return {
+      innerValue: false,
+      counterId: '',
+      focused: false,
+    };
+  },
+  created() {
+    const iid = uidCounter.toString();
+    uidCounter += 1;
+    this.counterId = iid;
+    if (Array.isArray(this.input)) {
+      this.inputByValue();
+    } else {
+      this.innerValue = this.input;
+    }
+  },
+  computed: {
+    isMultipleInput() {
+      return Array.isArray(this.input);
+    },
+    multipleInputIndex() {
+      if (!Array.isArray(this.input)) {
+        return -1;
+      }
+      return this.input.findIndex((inp) => {
+        return inp === this.value;
+      });
+    },
+    inputId() {
+      const id = this.counterId;
+      return `y-switch--${id}`;
+    },
+    trackStyles() {
+      return {
+        backgroundColor: this.color,
+      };
+    },
+    classes() {
+      return {
+        'y-switch--disabled': this.disabled,
+        'y-switch--loading': this.loading,
+        'y-switch--active': this.innerValue,
+        'y-switch--stick-out': this.stickOut,
+        'y-switch--focused': this.focused,
+      };
+    },
+  },
+  methods: {
+    inputByValue() {
+      if (Array.isArray(this.input)) {
+        const found = this.input.find((inp: any) => {
+          return inp === this.value;
+        });
+
+        if (found !== undefined) {
+          this.innerValue = true;
+        } else {
+          this.innerValue = false;
+        }
+      }
+    },
+    changeMultipleInput(checked: boolean) {
+      if (Array.isArray(this.input)) {
+        const multipleInput = this.input.slice();
+        if (
+          checked &&
+          this.max !== undefined &&
+          multipleInput.length >= this.max
+        ) {
+          this.$emit('overmax');
+          this.nextChange(false, multipleInput);
+          return;
+        }
+        if (checked && this.multipleInputIndex < 0) {
+          multipleInput.push(this.value);
+        } else if (this.multipleInputIndex > -1) {
+          multipleInput.splice(this.multipleInputIndex, 1);
+        }
+        this.$emit('change', multipleInput);
+      }
+    },
+    nextChange(checked: boolean, value: any) {
+      this.$nextTick(() => {
+        this.innerValue = checked;
+      });
+    },
+    onClick($event: Event) {
+      if (this.disabled || this.loading) return;
+      this.changeInput(!this.innerValue, $event);
+    },
+    onFocus() {
+      this.focused = true;
+    },
+    onBlur() {
+      this.focused = false;
+    },
+    onKeydown($event: KeyboardEvent) {
+      // nothing
+    },
+    onChange($event: Event) {
+      const $checkbox = $event.target as HTMLInputElement;
+      const { checked } = $checkbox;
+      this.changeInput(checked, $event);
+    },
+    changeInput(checked: boolean, event?: Event) {
+      this.innerValue = checked;
+      if (this.isMultipleInput) {
+        this.changeMultipleInput(checked);
+      } else {
+        this.$emit('change', checked);
+      }
+    },
+  },
+  watch: {
+    input() {
+      this.inputByValue();
+    },
+  },
+});
+</script>
+
+<style lang="scss">
+@import 'index';
+</style>

package/src/components/switch/index.scss

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

package/src/components/switch/index.ts

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