yuyeon 0.0.0

package/src/file-extension.d.ts

@@ -0,0 +1,14 @@
+declare module '*.svg' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.png' {
+  const value: string;
+  export default value;
+}
+
+declare module '*.json' {
+  const value: any;
+  export default value;
+}

package/src/index.ts

@@ -0,0 +1,21 @@
+import { App } from 'vue';
+import * as components from '@/components';
+import { bindTheme } from '@/composables/theme';
+
+export function init(options: any) {
+  const themeModule = bindTheme(options?.theme);
+
+  const install = (app: App) => {
+    themeModule.install(app);
+
+    Object.keys(components).forEach((componentName) => {
+      const comp = components[componentName as keyof typeof components];
+      app.component(componentName, comp);
+    });
+  };
+
+  return {
+    install,
+    theme: themeModule,
+  };
+}

package/src/mixins/di.ts

@@ -0,0 +1,23 @@
+/*
+ * Created by yuyeon-ui 2022.
+ */
+
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'DiMixin',
+  inject: {
+    theme: {
+      from: 'theme',
+    },
+    form$: {
+      default: null,
+    },
+  },
+  mounted() {
+    ((this as any).form$ as any)?.register(this);
+  },
+  beforeUnmount() {
+    ((this as any).form$ as any)?.unregister(this);
+  },
+});

package/src/mixins/rebind-attrs.ts

@@ -0,0 +1,36 @@
+/*
+ * Created by yuyeon-ui 2022.
+ */
+
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  data: () => ({
+    attrs_$: {} as any,
+    listeners_$: {} as any,
+  }),
+  watch: {
+    // Work around unwanted re-renders: https://github.com/vuejs/vue/issues/10115
+    // Make sure to use `v-bind="$data.$_attrs"` instead of `v-bind="$attrs"`
+    $attrs: {
+      handler(val) {
+        // eslint-disable-next-line guard-for-in,no-restricted-syntax
+        for (const attr in val) {
+          this.$data.attrs_$[attr] = val[attr];
+          // this.$set(this.$data.$_attrs, attr, val[attr]);
+        }
+      },
+      immediate: true,
+    },
+    $listeners: {
+      handler(val) {
+        // eslint-disable-next-line guard-for-in,no-restricted-syntax
+        for (const listener in val) {
+          this.$data.listeners_$[listener] = val[listener];
+          // this.$set(this.$data.$_listeners, listener, val[listener]);
+        }
+      },
+      immediate: true,
+    },
+  },
+});

package/src/styles/base.scss

@@ -0,0 +1,28 @@
+:root {
+  box-sizing: border-box;
+}
+
+.fade {
+  &-enter-active, &-leave-cative {
+    transition: opacity 240ms cubic-bezier(.2,.28,.21,1);
+  }
+
+  &-fade-enter-from, &-leave-to {
+    opacity: 0;
+  }
+}
+
+.slide-fade-enter-active, .slide-fade-leave-active {
+  transition: transform 240ms cubic-bezier(.23,.3,.07,.97), opacity 240ms linear;
+}
+
+.slide-fade-enter-from,
+.slide-fade-leave-to {
+  transform: translateY(20px) rotate3d(1, 0, 0, -30deg);
+  opacity: 0;
+}
+
+.title {
+  font-size: 20px;
+  font-weight: bold;
+}

package/src/styles/palette.scss

@@ -0,0 +1,94 @@
+// red
+$basic-red-900: #a60000;
+$basic-red-800: #cc1f1f;
+$basic-red-700: #ff4040;
+$basic-red-600: #ff5959;
+$basic-red-500: #ff7272;
+$basic-red-400: #ff8d8d;
+$basic-red-300: #ffa2a2;
+$basic-red-200: #ffbfbf;
+$basic-red-100: #ffd9d9;
+$basic-red-50: #fff6f6;
+
+// orange
+$basic-orange-900: #f16a24;
+$basic-orange-800: #f17738;
+$basic-orange-700: #ff9639;
+$basic-orange-600: #ffa75a;
+$basic-orange-500: #f3ae71;
+$basic-orange-400: #f3bd71;
+$basic-orange-300: #ffd00f;
+$basic-orange-200: #ffe8ba;
+$basic-orange-100: #fff1c7;
+$basic-orange-50: #fffaec;
+
+// green
+$basic-green-900: #056653;
+$basic-green-800: #0d8069;
+$basic-green-700: #1f927c;
+$basic-green-600: #4ba694;
+$basic-green-500: #5bb2a1;
+$basic-green-400: #68ccb9;
+$basic-green-300: #77d9c6;
+$basic-green-200: #8ae6d4;
+$basic-green-100: #ace6da;
+$basic-green-50: #f2fffd;
+
+// blue
+$basic-blue-900: #003a9f;
+$basic-blue-800: #0c5db9;
+$basic-blue-700: #236dc1;
+$basic-blue-600: #407fc6;
+$basic-blue-500: #4091c6;
+$basic-blue-400: #79c2f2;
+$basic-blue-300: #a6dcff;
+$basic-blue-200: #ccebff;
+$basic-blue-100: #f2faff;
+$basic-blue-50: #f6fcff;
+
+// violet
+$basic-violet-900: #460d80;
+$basic-violet-800: #581799;
+$basic-violet-700: #6b24b3;
+$basic-violet-600: #7436b3;
+$basic-violet-500: #7d47b3;
+$basic-violet-400: #9857d9;
+$basic-violet-300: #c89df2;
+$basic-violet-250: #e9dfff;
+$basic-violet-200: #f2e6ff;
+$basic-violet-100: #f9f2ff;
+$basic-violet-50: #faf8ff;
+
+// gray
+$basic-gray-900: #323232;
+$basic-gray-800: #505050;
+$basic-gray-700: #707070;
+$basic-gray-600: #939194;
+$basic-gray-500: #b4b4b4;
+$basic-gray-400: #c8c8c8;
+$basic-gray-300: #dcdcdc;
+$basic-gray-200: #f0f0f0;
+$basic-gray-100: #f5f5f5;
+$basic-gray-50: #fafafa;
+
+//
+$basic-disable: #c8bab4;
+$basic-black: #141414;
+$content-gray: #666666;
+$background-color: #f5f5ff;
+
+// Text
+$text-black: $basic-black;
+$text-white: #ffffff;
+
+// Alert
+$alert-positive: #47b267;
+$alert-negative: #ff4d4d;
+$alert-warning: #ffc70e;
+$alert-link: #4781cc;
+
+$primary: #4f97dc !default;
+
+:root {
+  --y-palette--primary: #{$primary};
+}

package/src/styles/theme/dark.scss

@@ -0,0 +1,35 @@
+/*!
+ * Created by yeonyu 2022.
+ */
+@use 'sass:map';
+@use '../palette';
+@use '../util/helper';
+
+// yui/app theme
+$theme--dark: () !default;
+$theme--dark: map.deep-merge(
+  map.deep-merge(
+    (
+      'input': (
+        'fill': palette.$basic-gray-200,
+      ),
+      'fieldInput': (
+        'clear': palette.$basic-gray-400,
+      ),
+      'select': (
+        'selected': palette.$basic-black,
+        'selected-background': palette.$basic-gray-700,
+      ),
+    ),
+    //app
+    (
+        'simpleSearch': (
+          'placeholder': palette.$basic-gray-400,
+          'prepend': palette.$basic-gray-700,
+          'border': palette.$basic-gray-700,
+          'hasValueBorder': palette.$basic-gray-400,
+        ),
+      )
+  ),
+  $theme--dark
+);

package/src/styles/theme/index.scss

@@ -0,0 +1,8 @@
+/*!
+ * Created by yeonyu 2022.
+ */
+
+@forward 'light';
+@forward 'dark';
+
+$basic-themes: 'light', 'dark' !default;

package/src/styles/theme/light.scss

@@ -0,0 +1,32 @@
+@use 'sass:map';
+@use '../palette';
+@use '../util/helper';
+
+// yui theme
+$theme--light: () !default;
+$theme--light: map.deep-merge(
+  map.deep-merge(
+    (
+      'input': (
+        'fill': palette.$basic-gray-200,
+      ),
+      'fieldInput': (
+        'clear': palette.$basic-gray-400,
+      ),
+      'select': (
+        'selected': palette.$basic-black,
+        'selected-background': palette.$basic-gray-700,
+      ),
+    ),
+    //app
+    (
+        'simpleSearch': (
+          'placeholder': palette.$basic-gray-400,
+          'prepend': palette.$basic-gray-700,
+          'border': palette.$basic-gray-700,
+          'hasValueBorder': palette.$basic-gray-400,
+        ),
+      )
+  ),
+  $theme--light
+);

package/src/styles/util/helper.scss

@@ -0,0 +1,6 @@
+@function deepGet($map, $keys...) {
+  @each $key in $keys {
+    $map: map-get($map, $key);
+  }
+  @return $map;
+}

package/src/styles/util/theme.scss

@@ -0,0 +1,16 @@
+@use 'sass:meta';
+@use 'sass:map';
+//
+@use '../theme';
+
+@mixin basicTheme($component) {
+  @each $theme in theme.$basic-themes {
+    $class: 'theme--#{$theme}';
+    @if map.has-key(meta.module-variables('theme'), $class) {
+      .theme--#{$theme}.#{$component} {
+        $themeMap: map.get(meta.module-variables('theme'), $class);
+        @content ($themeMap, $class);
+      }
+    }
+  }
+}

package/src/styles/variables.scss

@@ -0,0 +1 @@
+$border-radius-root: 10px !default;

package/src/util/common.ts

@@ -0,0 +1,59 @@
+export function hasOwnProperty(object: any, property: string) {
+  if (object) {
+    return Object.prototype.hasOwnProperty.call(object, property);
+  }
+  return false;
+}
+
+export function getNestedValue(
+  obj: any,
+  path: (string | number)[],
+  fallback?: any,
+): any {
+  const last = path.length - 1;
+  let traversObj = obj;
+
+  if (last < 0) return traversObj === undefined ? fallback : traversObj;
+
+  for (let i = 0; i < last; i += 1) {
+    if (traversObj == null) {
+      return fallback;
+    }
+    traversObj = traversObj[path[i]];
+  }
+
+  if (traversObj == null) return fallback;
+
+  return traversObj[path[last]] === undefined
+    ? fallback
+    : traversObj[path[last]];
+}
+
+export function getObjectValueByPath(
+  obj: any,
+  path: string,
+  fallback?: any,
+): any {
+  // credit: http://stackoverflow.com/questions/6491463/accessing-nested-javascript-objects-with-string-key#comment55278413_6491621
+  let traversPath = path;
+  if (obj == null || !traversPath || typeof traversPath !== 'string') {
+    return fallback;
+  }
+  if (obj[traversPath] !== undefined) return obj[traversPath];
+  traversPath = traversPath.replace(/\[(\w+)\]/g, '.$1'); // convert indexes to properties
+  traversPath = traversPath.replace(/^\./, ''); // strip a leading dot
+  return getNestedValue(obj, traversPath.split('.'), fallback);
+}
+
+export function randomCharOne(str: string) {
+  if (str) {
+    return str.charAt(Math.floor(Math.random() * str.length));
+  }
+  return '';
+}
+
+export default {
+  hasOwnProperty,
+  getNestedValue,
+  getObjectValueByPath,
+};

package/src/util/date-time.ts

@@ -0,0 +1,41 @@
+import { DateTime } from 'luxon';
+import yeonyuUtils from 'yeonyu-utils';
+
+const { dateFromObjectId } = yeonyuUtils.parser;
+
+export const MILLISECOND_OF_DAY = 86400000;
+export const MILLISECOND_OF_HOUR = 3600000;
+export const MILLISECOND_OF_MINUTE = 60000;
+
+export function getDate(timestamp: number): string {
+  return DateTime.fromMillis(timestamp).toFormat('yyyy-MM-dd');
+}
+
+export function getTime(timestamp: number): string {
+  return DateTime.fromMillis(timestamp).toFormat('HH:mm:ss');
+}
+
+export function getTimeWithNoon(timestamp: number): string {
+  return DateTime.fromMillis(timestamp).toFormat('h:mm a');
+}
+
+export function getDateTime(timestamp: number): string {
+  return DateTime.fromMillis(timestamp).toFormat('yyyy-MM-dd HH:mm:ss');
+}
+
+export function getTimezone(): number {
+  return new Date().getTimezoneOffset() / -60;
+}
+
+export function convertObjectIdToTimestamp(objectId: string): number {
+  return dateFromObjectId(objectId).getTime();
+}
+
+export function getStartTime(date: string): number {
+  return DateTime.fromISO(`${date}T00:00:00`).toMillis();
+}
+
+export default {
+  getDate,
+  getTime,
+};

package/src/util/dom.ts

@@ -0,0 +1,6 @@
+export function documentRoot(domNode: Node): null | HTMLDocument | ShadowRoot {
+  const root = domNode.getRootNode();
+  if (root !== document && root.getRootNode({ composed: true }) !== document)
+    return null;
+  return root as HTMLDocument | ShadowRoot;
+}

package/src/util/string.ts

@@ -0,0 +1,9 @@
+/*
+ * Created by yeonyu 2022.
+ */
+
+export function camelToPascal(str: string) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
+
+export default {};

package/src/util/ui.ts

@@ -0,0 +1,39 @@
+/*
+ * Created by yeonyu 2022.
+ */
+
+export function isOverflow(e: HTMLElement): boolean {
+  return e.offsetWidth < e.scrollWidth;
+}
+
+export function colorHexToRgb(color: string): number[] | undefined {
+  if (color && color[0] === '#') {
+    const hexCodeStr = color.substring(1, color.length);
+    const hexCodeLength = hexCodeStr.length;
+    const rgbValues = [];
+    if (hexCodeLength === 3 || hexCodeLength === 6) {
+      const multiple = hexCodeLength === 6 ? 2 : 1;
+      for (let i = 0; i < 3; i += 1) {
+        const hexCode = hexCodeStr.substring(
+          i * multiple,
+          i * multiple + multiple,
+        );
+        rgbValues.push(Number.parseInt(hexCode, 16));
+      }
+      return rgbValues;
+    }
+  }
+  return undefined;
+}
+
+export function textColorIsLight(r: number, g: number, b: number): boolean {
+  const luminance = 1 - (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+  return luminance < 0.5;
+}
+
+export const RGBA_REGEX = /rgb(a?)\((?<v>.*)\)/;
+export const HEX_COLOR_REGEX = /#([0-9a-fA-F]{3,6,8})/;
+
+export function isColorValue(value: string): boolean {
+  return RGBA_REGEX.test(value) || HEX_COLOR_REGEX.test(value);
+}

package/src/util/validation.ts

@@ -0,0 +1,9 @@
+/*
+ * Created by yeonyu 2022.
+ */
+
+export function REQUIRE_RULE(value: any): boolean {
+  return !!value;
+}
+
+export default {};

package/src/util/vue-component.ts

@@ -0,0 +1,18 @@
+/*
+ * Created by yeonyu 2022.
+ */
+
+import { VNode, ComponentPublicInstance } from 'vue';
+
+export function getSlot(
+  vm: ComponentPublicInstance | any,
+  // eslint-disable-next-line default-param-last
+  name = 'default',
+  data?: any | (() => any),
+  optional = false,
+): VNode[] | undefined {
+  if (vm.$slots?.[name]) {
+    return vm.$slots[name]!(data instanceof Function ? data() : data);
+  }
+  return undefined;
+}