yuyeon 0.0.24 → 0.0.26

package/lib/styles/base.scss

@@ -1,119 +1,122 @@
-@use 'sass:list';
-@use 'settings/provided';
-@use 'settings/variables';
-@use 'palette';
-
-@use 'elevation';
-
-:root {
-  box-sizing: border-box;
-}
-
-:root {
-  --default-shadow: 0, 0, 0;
-  --y-elevation-color: var(--y-theme-shadow, var(--default-shadow));
-
-  @include elevation.styles();
-}
-
-.y-root {
-  background: var(--y-theme-background);
-  color: var(--y-theme-on-background);
-}
-
-.fade-enter-active,
-.fade-leave-cative {
-  transition: opacity 240ms cubic-bezier(0.2, 0.28, 0.21, 1);
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
-
-.slide-fade-enter-active,
-.slide-fade-leave-active {
-  transition: transform 240ms variables.$basic-transition-timing-function,
-    opacity 240ms linear;
-}
-
-.slide-fade-enter-from,
-.slide-fade-leave-to {
-  transform: translateY(-20px) rotate3d(1, 0, 0, 10deg);
-  opacity: 0;
-}
-
-.expand-v-transition {
-  &-enter-active {
-    transition-duration: 240ms;
-    transition-timing-function: variables.$basic-transition-timing-function;
-    transition-property: height;
-  }
-  &-leave-active {
-    transition-duration: 240ms;
-    transition-timing-function: variables.$basic-transition-timing-function;
-    transition-property: height;
-  }
-}
-
-.expand-h-transition {
-  &-enter-active {
-    transition-duration: 240ms;
-    transition-timing-function: variables.$basic-transition-timing-function;
-    transition-property: width;
-  }
-  &-leave-active {
-    transition-duration: 240ms;
-    transition-timing-function: variables.$basic-transition-timing-function;
-    transition-property: width;
-  }
-}
-
-.title {
-  font-size: 20px;
-  font-weight: bold;
-}
-
-.contain-paint {
-  contain: paint;
-}
-
-@each $space-type-prefix, $space-type in provided.$space-types {
-  @each $side-prefix, $sides-properties in provided.$box-side-combinations {
-    @each $space-index, $space-size in variables.$space-list {
-      .#{$space-type-prefix}#{$side-prefix}-#{$space-index} {
-        @if (list.length($sides-properties) == 0) {
-          #{$space-type}: #{$space-size};
-        } @else {
-          @each $prop in $sides-properties {
-            #{$space-type}: {
-              #{$prop}: #{$space-size};
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-@each $align in provided.$text-aligns {
-  .text-#{$align} {
-    text-align: #{$align};
-  }
-}
-
-@each $weight in provided.$font-weights {
-  .font-weight-#{$weight} {
-    font-weight: $weight;
-  }
-}
-
-@keyframes rotate {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.text-color--error {
-  color: var(--y-theme-error);
-}
+@use 'sass:list';
+@use 'settings/provided';
+@use 'settings/variables';
+@use 'palette';
+@use 'elevation';
+
+:root {
+  box-sizing: border-box;
+}
+
+:root {
+  --default-shadow: 0, 0, 0;
+  --y-elevation-color: var(--y-theme-shadow, var(--default-shadow));
+
+  @include elevation.styles();
+}
+
+.y-root {
+  background: var(--y-theme-background);
+  color: var(--y-theme-on-background);
+}
+
+.fade-enter-active,
+.fade-leave-cative {
+  transition: opacity 240ms cubic-bezier(0.2, 0.28, 0.21, 1);
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.slide-fade-enter-active,
+.slide-fade-leave-active {
+  transition: transform 240ms variables.$basic-transition-timing-function,
+    opacity 240ms linear;
+}
+
+.slide-fade-enter-from,
+.slide-fade-leave-to {
+  transform: translateY(-20px) rotate3d(1, 0, 0, 10deg);
+  opacity: 0;
+}
+
+.expand-v-transition {
+  &-enter-active {
+    transition-duration: 240ms;
+    transition-timing-function: variables.$basic-transition-timing-function;
+    transition-property: height;
+  }
+  &-leave-active {
+    transition-duration: 240ms;
+    transition-timing-function: variables.$basic-transition-timing-function;
+    transition-property: height;
+  }
+}
+
+.expand-h-transition {
+  &-enter-active {
+    transition-duration: 240ms;
+    transition-timing-function: variables.$basic-transition-timing-function;
+    transition-property: width;
+  }
+  &-leave-active {
+    transition-duration: 240ms;
+    transition-timing-function: variables.$basic-transition-timing-function;
+    transition-property: width;
+  }
+}
+
+.title {
+  font-size: 20px;
+  font-weight: bold;
+}
+
+.contain-paint {
+  contain: paint;
+}
+
+@each $space-type-prefix, $space-type in provided.$space-types {
+  @each $side-prefix, $sides-properties in provided.$box-side-combinations {
+    @each $space-index, $space-size in variables.$space-list {
+      .#{$space-type-prefix}#{$side-prefix}-#{$space-index} {
+        @if (list.length($sides-properties) == 0) {
+          #{$space-type}: #{$space-size};
+        } @else {
+          @each $prop in $sides-properties {
+            #{$space-type}: {
+              #{$prop}: #{$space-size};
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@each $align in provided.$text-aligns {
+  .text-#{$align} {
+    text-align: #{$align};
+  }
+}
+
+@each $weight in provided.$font-weights {
+  .font-weight-#{$weight} {
+    font-weight: $weight;
+  }
+}
+
+@keyframes rotate {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.text-color--error {
+  color: var(--y-theme-error);
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}

package/lib/styles/theme/dark.scss

@@ -1,21 +1,11 @@
 @use 'sass:map';
-@use '../../styles/palette';
+
 @use '../util/helper';
 
 // yui/app theme
 $theme--dark: () !default;
 $theme--dark: 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,
-    ),
   ),
   $theme--dark
 );

package/lib/styles/theme/light.scss

@@ -1,21 +1,11 @@
 @use 'sass:map';
-@use '../../styles/palette';
+
 @use '../util/helper';
 
 // yui theme
 $theme--light: () !default;
 $theme--light: 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,
-    )
   ),
   $theme--light
 );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yuyeon",
-  "version": "0.0.24",
+  "version": "0.0.26",
   "keywords": [
     "UI Library",
     "Vue"

package/types/components/alert/YAlert.d.ts

@@ -0,0 +1,18 @@
+import { PropType } from 'vue';
+/**
+ * #  Component
+ */
+export declare const YAlert: import("vue").DefineComponent<{
+    semantic: PropType<string>;
+    variation: PropType<string>;
+    color: PropType<string>;
+    textColor: PropType<string>;
+    outlineColor: PropType<string>;
+}, void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    semantic: PropType<string>;
+    variation: PropType<string>;
+    color: PropType<string>;
+    textColor: PropType<string>;
+    outlineColor: PropType<string>;
+}>>, {}, {}>;
+export type YAlert = InstanceType<typeof YAlert>;

package/types/components/alert/index.d.ts

@@ -0,0 +1 @@
+export * from './YAlert';

package/types/components/index.d.ts

@@ -23,3 +23,4 @@ export * from './pagination';
 export * from './loading';
 export * from './dropdown';
 export * from './select';
+export * from './alert';

package/types/composables/timing.d.ts

@@ -1,5 +1,5 @@
 import { Ref } from 'vue';
-export declare function useLazy(eager: boolean, updated: Ref<any>): {
+export declare function useLazy(eager: Ref<boolean | undefined>, updated: Ref<any>): {
     entered: Ref<boolean>;
     lazyValue: import("vue").ComputedRef<any>;
     onAfterUpdate: () => void;

package/types/shims.d.ts

@@ -1,75 +1,77 @@
-import * as vue from 'vue';
-import {
-  YApp,
-  YButton,
-  YCard,
-  YCardBody,
-  YCardFooter,
-  YCardHeader,
-  YCheckbox,
-  YChip,
-  YDataTable,
-  YDataTableServer,
-  YDialog,
-  YDividePanel,
-  YDropdown,
-  YExpandHTransition,
-  YExpandVTransition,
-  YFieldInput,
-  YForm,
-  YInput,
-  YInputCheckbox,
-  YLayer,
-  YList,
-  YListItem,
-  YMenu,
-  YPagination,
-  YProgressBar,
-  YSnackbar,
-  YSpinnerRing,
-  YSwitch,
-  YTable,
-  YTooltip,
-  YTreeView,
-  YTreeViewNode,
-  YSelect,
-} from 'yuyeon/types/components';
-
-declare module '@vue/runtime-core' {
-  export interface GlobalComponents {
-    // @define-components
-    YApp: typeof YApp;
-    YButton: typeof YButton;
-    YChip: typeof YChip;
-    YInput: typeof YInput;
-    YFieldInput: typeof YFieldInput;
-    YForm: typeof YForm;
-    YCard: typeof YCard;
-    YCardBody: typeof YCardBody;
-    YCardHeader: typeof YCardHeader;
-    YCardFooter: typeof YCardFooter;
-    YDialog: typeof YDialog;
-    YLayer: typeof YLayer;
-    YSnackbar: typeof YSnackbar;
-    YProgressBar: typeof YProgressBar;
-    YSpinnerRing: typeof YSpinnerRing;
-    YTooltip: typeof YTooltip;
-    YExpandVTransition: typeof YExpandVTransition;
-    YExpandHTransition: typeof YExpandHTransition;
-    YDividePanel: typeof YDividePanel;
-    YList: typeof YList;
-    YListItem: typeof YListItem;
-    YTreeView: typeof YTreeView;
-    YTreeViewNode: typeof YTreeViewNode;
-    YDataTable: typeof YDataTable;
-    YTable: typeof YTable;
-    YDataTableServer: typeof YDataTableServer;
-    YMenu: typeof YMenu;
-    YPagination: typeof YPagination;
-    YInputCheckbox: typeof YInputCheckbox;
-    YCheckbox: typeof YCheckbox;
-    YSwitch: typeof YSwitch;
-    YDropdown: typeof YDropdown;
-    YSelect: typeof YSelect;
-  }
-}
+import * as vue from 'vue';
+import {
+  YApp,
+  YButton,
+  YCard,
+  YCardBody,
+  YCardFooter,
+  YCardHeader,
+  YCheckbox,
+  YChip,
+  YDataTable,
+  YDataTableServer,
+  YDialog,
+  YDividePanel,
+  YDropdown,
+  YExpandHTransition,
+  YExpandVTransition,
+  YFieldInput,
+  YForm,
+  YInput,
+  YInputCheckbox,
+  YLayer,
+  YList,
+  YListItem,
+  YMenu,
+  YPagination,
+  YProgressBar,
+  YSnackbar,
+  YSpinnerRing,
+  YSwitch,
+  YTable,
+  YTooltip,
+  YTreeView,
+  YTreeViewNode,
+  YSelect,
+  YAlert,
+} from 'yuyeon/types/components';
+
+declare module '@vue/runtime-core' {
+  export interface GlobalComponents {
+    // @define-components
+    YApp: typeof YApp;
+    YButton: typeof YButton;
+    YChip: typeof YChip;
+    YInput: typeof YInput;
+    YFieldInput: typeof YFieldInput;
+    YForm: typeof YForm;
+    YCard: typeof YCard;
+    YCardBody: typeof YCardBody;
+    YCardHeader: typeof YCardHeader;
+    YCardFooter: typeof YCardFooter;
+    YDialog: typeof YDialog;
+    YLayer: typeof YLayer;
+    YSnackbar: typeof YSnackbar;
+    YProgressBar: typeof YProgressBar;
+    YSpinnerRing: typeof YSpinnerRing;
+    YTooltip: typeof YTooltip;
+    YExpandVTransition: typeof YExpandVTransition;
+    YExpandHTransition: typeof YExpandHTransition;
+    YDividePanel: typeof YDividePanel;
+    YList: typeof YList;
+    YListItem: typeof YListItem;
+    YTreeView: typeof YTreeView;
+    YTreeViewNode: typeof YTreeViewNode;
+    YDataTable: typeof YDataTable;
+    YTable: typeof YTable;
+    YDataTableServer: typeof YDataTableServer;
+    YMenu: typeof YMenu;
+    YPagination: typeof YPagination;
+    YInputCheckbox: typeof YInputCheckbox;
+    YCheckbox: typeof YCheckbox;
+    YSwitch: typeof YSwitch;
+    YDropdown: typeof YDropdown;
+    YSelect: typeof YSelect;
+    YAlert: typeof YAlert;
+  }
+}