@code-coaching/vuetiful 0.0.3 → 0.1.0

package/dist/styles/all.css

@@ -611,9 +611,9 @@ h5:not(.unstyled):is(:not(.prose *)) {
 }
 
 h6:not(.unstyled):is(:not(.prose *)) {
-  font-size: 0.875rem;
-  line-height: 1.25rem;
   font-family: var(--theme-font-family-heading);
+  font-size:.875rem;
+  line-height:1.25rem;
 }
 
 @media (min-width: 768px) {
@@ -666,16 +666,24 @@ blockquote:not(.unstyled):is(:not(.prose *)) {
 }
 
 .dark blockquote:not(.unstyled):is(:not(.prose *)) {
-  color:rgba(var(--theme-font-color-dark));
+  color: rgba(var(--theme-font-color-dark));
+}
+
+blockquote:not(.unstyled):is(:not(.prose *)){
+  padding-left:1rem
+}
+
+.dark blockquote:not(.unstyled):is(:not(.prose *)){
+  color:rgba(var(--theme-font-color-dark))
 }
 
 /* Keyboard */
 
 kbd:not(.unstyled):is(:not(.prose *)) {
   font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  font-size: 0.875rem;
-  line-height: 1.25rem;
   font-weight: 700;
+  font-size:.875rem;
+  line-height:1.25rem;
   border-radius: 0.25rem;
   padding-left: 0.375rem;
   padding-right: 0.375rem;
@@ -715,24 +723,25 @@ kbd:not(.unstyled):is(:not(.prose *)) {
 
 pre:not(.unstyled):not(.code-block pre):is(:not(.prose *)) {
   overflow-x: auto;
-  white-space: pre-wrap;
   background-color: rgb(23 23 23 / 0.9);
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   font-size: 1rem;
   line-height: 1.5rem;
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
+  white-space:pre-wrap;
+  background-color:#171717e6;
   padding:1rem;
+  --tw-text-opacity: 1;
+  color:rgb(255 255 255 / var(--tw-text-opacity));
   border-radius:var(--theme-rounded-container);
 }
 
 code:not(.unstyled):is(:not(.prose *)):is(:not(pre *)) {
   white-space: nowrap;
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-  font-size: 0.75rem;
-  line-height: 1rem;
   --tw-text-opacity: 1;
   color: rgb(var(--color-primary-700) / var(--tw-text-opacity));
+  font-size:.75rem;
+  line-height:1rem;
 }
 
 .dark code:not(.unstyled):is(:not(.prose *)):is(:not(pre *)) {
@@ -805,10 +814,10 @@ del:not(.unstyled):is(:not(.prose *)) {
 /* Useful for displaying timestamps */
 
 time:not(.unstyled):is(:not(.prose *)) {
-  font-size: 0.875rem;
-  line-height: 1.25rem;
   --tw-text-opacity: 1;
   color: rgb(var(--color-surface-500) / var(--tw-text-opacity));
+  font-size:.875rem;
+  line-height:1.25rem;
 }
 
 .dark time:not(.unstyled):is(:not(.prose *)) {
@@ -865,8 +874,8 @@ progress {
   -webkit-appearance: none;
           appearance: none;
   height: 0.5rem;
-  overflow: hidden;
   width:100%;
+  overflow:hidden;
   border-radius:var(--theme-rounded-base);
   background-color: rgb(var(--color-surface-400));
 }
@@ -1130,6 +1139,15 @@ button:disabled:active {
 
 /* Note: Default values are built into `.btn` */
 
+.btn-sm {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+  font-size:.875rem;
+  line-height:1.25rem;
+}
+
 /* === Icon Button === */
 
 /* A circular button meant for housing icons. */
@@ -1195,8 +1213,8 @@ input[type='file']:not(.file-dropzone-input)::file-selector-button {
   padding-right: 0.75rem;
   padding-top: 0.375rem;
   padding-bottom: 0.375rem;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
+  font-size:.875rem;
+  line-height:1.25rem;
   background-color: rgb(var(--color-surface-900));
 }
 
@@ -1347,6 +1365,21 @@ input[type='file']:not(.file-dropzone-input)::file-selector-button {
 
 /* Soft */
 
+.variant-soft,
+	.variant-soft-surface {
+  background-color: rgb(var(--color-surface-400) / 0.2);
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
+  color: rgb(var(--color-surface-700));
+}
+
+.dark .variant-soft,.dark 
+	.variant-soft-surface {
+  color:rgb(var(--color-surface-200));
+  background-color: rgb(var(--color-surface-500) / 0.2);
+}
+
 /* Glass */
 
 .absolute {
@@ -1448,14 +1481,30 @@ input[type='file']:not(.file-dropzone-input)::file-selector-button {
   margin-bottom: calc(1rem * var(--tw-space-y-reverse));
 }
 
+.overflow-hidden {
+  overflow: hidden;
+}
+
 .overflow-y-auto {
   overflow-y: auto;
 }
 
+.whitespace-pre-wrap {
+  white-space: pre-wrap;
+}
+
+.break-all {
+  word-break: break-all;
+}
+
 .rounded {
   border-radius: 0.25rem;
 }
 
+.bg-neutral-900\/90 {
+  background-color: rgb(23 23 23 / 0.9);
+}
+
 .bg-primary-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--color-primary-50) / var(--tw-bg-opacity));
@@ -1489,10 +1538,36 @@ input[type='file']:not(.file-dropzone-input)::file-selector-button {
   padding: 1rem;
 }
 
+.pb-0 {
+  padding-bottom: 0px;
+}
+
+.pl-4 {
+  padding-left: 1rem;
+}
+
+.pt-1 {
+  padding-top: 0.25rem;
+}
+
 .text-center {
   text-align: center;
 }
 
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.text-xs {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+.uppercase {
+  text-transform: uppercase;
+}
+
 .capitalize {
   text-transform: capitalize;
 }
@@ -1517,6 +1592,21 @@ input[type='file']:not(.file-dropzone-input)::file-selector-button {
   color: rgb(var(--color-surface-900) / var(--tw-text-opacity));
 }
 
+.text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.text-white\/50 {
+  color: rgb(255 255 255 / 0.5);
+}
+
+.shadow {
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .shadow-xl {
   --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
@@ -1543,6 +1633,11 @@ input[type='file']:not(.file-dropzone-input)::file-selector-button {
   --tw-ring-color: rgb(var(--color-surface-500) / 0.3);
 }
 
+.blur {
+  --tw-blur: blur(8px);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
 .transition-all {
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -3244,14 +3339,30 @@ img,video{
   margin-bottom:calc(1rem * var(--tw-space-y-reverse))
 }
 
+.overflow-hidden{
+  overflow:hidden
+}
+
 .overflow-y-auto{
   overflow-y:auto
 }
 
+.whitespace-pre-wrap{
+  white-space:pre-wrap
+}
+
+.break-all{
+  word-break:break-all
+}
+
 .rounded{
   border-radius:.25rem
 }
 
+.bg-neutral-900\/90{
+  background-color:#171717e6
+}
+
 .bg-primary-50{
   --tw-bg-opacity: 1;
   background-color:rgb(var(--color-primary-50) / var(--tw-bg-opacity))
@@ -3285,10 +3396,36 @@ img,video{
   padding:1rem
 }
 
+.pb-0{
+  padding-bottom:0
+}
+
+.pl-4{
+  padding-left:1rem
+}
+
+.pt-1{
+  padding-top:.25rem
+}
+
 .text-center{
   text-align:center
 }
 
+.text-sm{
+  font-size:.875rem;
+  line-height:1.25rem
+}
+
+.text-xs{
+  font-size:.75rem;
+  line-height:1rem
+}
+
+.uppercase{
+  text-transform:uppercase
+}
+
 .capitalize{
   text-transform:capitalize
 }
@@ -3313,6 +3450,21 @@ img,video{
   color:rgb(var(--color-surface-900) / var(--tw-text-opacity))
 }
 
+.text-white{
+  --tw-text-opacity: 1;
+  color:rgb(255 255 255 / var(--tw-text-opacity))
+}
+
+.text-white\/50{
+  color:#ffffff80
+}
+
+.shadow{
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+  box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)
+}
+
 .shadow-xl{
   --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
   --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
@@ -3339,6 +3491,11 @@ img,video{
   --tw-ring-color: rgb(var(--color-surface-500) / .3)
 }
 
+.blur{
+  --tw-blur: blur(8px);
+  filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
+}
+
 .transition-all{
   transition-property:all;
   transition-timing-function:cubic-bezier(.4,0,.2,1);
@@ -4545,4 +4702,91 @@ img,video{
   position:absolute;
   z-index:1;
   margin-top:.25rem
+}
+
+pre code.hljs{
+  display:block;
+  overflow-x:auto;
+  padding:1em
+}
+
+code.hljs{
+  padding:3px 5px
+}
+
+/*!
+  Theme: GitHub Dark
+  Description: Dark theme as seen on github.com
+  Author: github.com
+  Maintainer: @Hirse
+  Updated: 2021-05-15
+
+  Outdated base version: https://github.com/primer/github-syntax-dark
+  Current colors taken from GitHub's CSS
+*/
+
+.hljs{
+  color:#c9d1d9;
+  background:#0d1117
+}
+
+.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{
+  color:#ff7b72
+}
+
+.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{
+  color:#d2a8ff
+}
+
+.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{
+  color:#79c0ff
+}
+
+.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{
+  color:#a5d6ff
+}
+
+.hljs-built_in,.hljs-symbol{
+  color:#ffa657
+}
+
+.hljs-code,.hljs-comment,.hljs-formula{
+  color:#8b949e
+}
+
+.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{
+  color:#7ee787
+}
+
+.hljs-subst{
+  color:#c9d1d9
+}
+
+.hljs-section{
+  color:#1f6feb;
+  font-weight:700
+}
+
+.hljs-bullet{
+  color:#f2cc60
+}
+
+.hljs-emphasis{
+  color:#c9d1d9;
+  font-style:italic
+}
+
+.hljs-strong{
+  color:#c9d1d9;
+  font-weight:700
+}
+
+.hljs-addition{
+  color:#aff5b4;
+  background-color:#033a16
+}
+
+.hljs-deletion{
+  color:#ffdcd7;
+  background-color:#67060c
 }

package/dist/types/directives/clipboard.d.ts

@@ -0,0 +1,3 @@
+import { DirectiveBinding } from "vue";
+declare const clipboard: (el: HTMLElement, binding: DirectiveBinding) => void;
+export default clipboard;

package/dist/types/directives/index.d.ts

@@ -0,0 +1,2 @@
+import vClipboard from './clipboard';
+export { vClipboard };

package/dist/types/index.d.ts

@@ -8,4 +8,5 @@ export default _default;
 export * from "./components";
 export * from "./constants";
 export * from "./utils";
+export * from "./directives";
 export declare type CssClasses = string;

package/dist/types/utils/code-block/code-block.vue.d.ts

@@ -0,0 +1,110 @@
+import { CssClasses } from "@/index";
+import "highlight.js/styles/github-dark.css";
+declare const _default: import("vue").DefineComponent<{
+    language: {
+        type: StringConstructor;
+        default: string;
+    };
+    code: {
+        type: StringConstructor;
+        default: string;
+    };
+    background: {
+        type: () => CssClasses;
+        default: string;
+    };
+    blur: {
+        type: () => CssClasses;
+        default: string;
+    };
+    text: {
+        type: () => CssClasses;
+        default: string;
+    };
+    color: {
+        type: () => CssClasses;
+        default: string;
+    };
+    rounded: {
+        type: () => CssClasses;
+        default: string;
+    };
+    shadow: {
+        type: () => CssClasses;
+        default: string;
+    };
+    button: {
+        type: () => CssClasses;
+        default: string;
+    };
+    buttonLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    buttonCopied: {
+        type: StringConstructor;
+        default: string;
+    };
+}, () => void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    copy: () => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    language: {
+        type: StringConstructor;
+        default: string;
+    };
+    code: {
+        type: StringConstructor;
+        default: string;
+    };
+    background: {
+        type: () => CssClasses;
+        default: string;
+    };
+    blur: {
+        type: () => CssClasses;
+        default: string;
+    };
+    text: {
+        type: () => CssClasses;
+        default: string;
+    };
+    color: {
+        type: () => CssClasses;
+        default: string;
+    };
+    rounded: {
+        type: () => CssClasses;
+        default: string;
+    };
+    shadow: {
+        type: () => CssClasses;
+        default: string;
+    };
+    button: {
+        type: () => CssClasses;
+        default: string;
+    };
+    buttonLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    buttonCopied: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & {
+    onCopy?: (() => any) | undefined;
+}, {
+    rounded: string;
+    button: string;
+    code: string;
+    language: string;
+    background: string;
+    blur: string;
+    text: string;
+    color: string;
+    shadow: string;
+    buttonLabel: string;
+    buttonCopied: string;
+}>;
+export default _default;

package/dist/types/utils/code-block/highlight.d.ts

@@ -0,0 +1,4 @@
+declare const useHighlight: () => {
+    highlight: (code: string, lang: string) => string;
+};
+export { useHighlight };

package/dist/types/utils/index.d.ts

@@ -1,6 +1,6 @@
 import { useDarkMode } from "./dark-mode/dark-mode";
 import DarkModeSwitch from "./dark-mode/dark-mode.vue";
-import MyUtil from "./MyUtil";
 import { useTheme } from "./theme/theme";
 import ThemeSwitcher from "./theme/theme-switcher.vue";
-export { MyUtil, DarkModeSwitch, ThemeSwitcher, useDarkMode, useTheme };
+import CodeBlock from "./code-block/code-block.vue";
+export { DarkModeSwitch, ThemeSwitcher, useDarkMode, useTheme, CodeBlock };