@code-coaching/vuetiful 0.0.0

package/src/components/atoms/index.ts

@@ -0,0 +1,3 @@
+import VButton from "./VButton.vue";
+
+export { VButton };

package/src/components/index.ts

@@ -0,0 +1,3 @@
+import { VButton } from "./atoms";
+
+export { VButton };

package/src/constants/MyConstants.ts

@@ -0,0 +1 @@
+export const MAGIC_NUM = 100

package/src/constants/index.ts

@@ -0,0 +1,5 @@
+import * as MyConstants from './MyConstants'
+
+export {
+  MyConstants
+}

package/src/env.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

package/src/index.ts

@@ -0,0 +1,29 @@
+import * as components from "./components";
+
+function install(app: any) {
+  for (const key in components) {
+    // @ts-expect-error
+    app.component(key, components[key]);
+  }
+}
+
+import "./assets/main.css";
+import "./styles/tailwind.css";
+
+import "./themes/theme-vuetiful.css";
+// import "./themes/theme-modern.css";
+// import "./themes/theme-rocket.css";
+// import "./themes/theme-sahara.css";
+// import "./themes/theme-seafoam.css";
+// import "./themes/theme-seasonal.css";
+// import "./themes/theme-test.css";
+// import "./themes/theme-vintage.css";
+
+export default { install };
+
+export * from "./components";
+export * from "./constants";
+export * from "./utils";
+
+// This type alias is to identify CSS classes within component props, which enables Tailwind IntelliSense
+export type CssClasses = string;

package/src/styles/all.css

@@ -0,0 +1,21 @@
+/* Stylesheet: all.css */
+/* Import AFTER your theme, but BEFORE your global stylesheet. */
+/* NOTE: The order shown below is required */
+
+/* Tailwind Directives */
+@import 'tailwind.css';
+
+/* Global Styles */
+@import 'core.css';
+
+/* Typographical Settings */
+@import 'typography.css';
+
+/* Imports all Tailwind Elements */
+@import 'elements.css';
+
+/* Imports all Variant Styles */
+@import 'variants.css';
+
+/* Imports all Component Styles */
+@import '../../dist/style.css'

package/src/styles/core.css

@@ -0,0 +1,65 @@
+/* Stylesheet: core.css */
+
+@layer base {
+	/* === Body Styles === */
+
+	body {
+		@apply bg-surface-50-900-token;
+	}
+
+	/* === Selection === */
+
+	::selection {
+		@apply bg-primary-500/30;
+	}
+
+	/* === Focus === */
+
+	/* Outline (do not change) */
+	/* http://www.outlinenone.com/ */
+
+	/* Mobile tap highlight */
+	/* https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color */
+	html {
+		-webkit-tap-highlight-color: rgba(128, 128, 128, 0.5);
+	}
+
+	/* === Scrollbars === */
+
+	::-webkit-scrollbar {
+		@apply w-2;
+	}
+	::-webkit-scrollbar-track {
+		@apply !bg-surface-50-900-token px-[1px];
+	}
+	::-webkit-scrollbar-thumb {
+		@apply rounded-token bg-surface-400-500-token;
+	}
+
+	/* Firefox */
+	/* https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color#browser_compatibility */
+	html {
+		scrollbar-color: rgba(0, 0, 0, 0.2) rgba(255, 255, 255, 0.05);
+	}
+	html.dark {
+		scrollbar-color: rgba(255, 255, 255, 0.1) rgba(0, 0, 0, 0.05);
+	}
+
+	/* Hide Scrollbars */
+	.hide-scrollbar::-webkit-scrollbar {
+		display: none;
+	}
+	.hide-scrollbar {
+		-ms-overflow-style: none; /* IE/Edge */
+		scrollbar-width: none; /* Firefox */
+	}
+
+	/* === Horizontal Rules === */
+
+	hr:not(.divider) {
+		@apply block border-t border-solid border-surface-300-600-token;
+	}
+	.divider-vertical {
+		@apply inline-block border-l border-solid border-surface-300-600-token min-h-[10px] mx-auto;
+	}
+}

package/src/styles/elements/alerts.css

@@ -0,0 +1,17 @@
+/* Tailwind Elements: alerts.css */
+
+@layer components {
+	.alert {
+		@apply flex flex-col items-start lg:items-center lg:flex-row p-4 space-y-4 lg:space-y-0 lg:space-x-4;
+		/* Text */
+		@apply text-surface-900-50-token;
+		/* Rounded */
+		@apply rounded-container-token;
+	}
+	.alert-message {
+		@apply flex-auto space-y-2;
+	}
+	.alert-actions {
+		@apply flex items-center space-x-2;
+	}
+}

package/src/styles/elements/badges.css

@@ -0,0 +1,31 @@
+/* Tailwind Elements: badges.css */
+
+@layer components {
+	.badge {
+		/* Core */
+		@apply inline-flex justify-center items-center space-x-2 whitespace-nowrap;
+		/* Text */
+		@apply font-semibold text-xs;
+		/* Padding */
+		@apply px-2 py-1;
+		/* Theme: Rounded */
+		@apply rounded-token;
+	}
+
+	.badge-icon {
+		/* Core */
+		@apply w-5 h-5 flex justify-center items-center rounded-full;
+		/* Text */
+		@apply font-semibold text-xs;
+		/* Shadow */
+		@apply shadow;
+	}
+
+	/* === Variants === */
+
+	/* Glass */
+	.badge-glass {
+		@apply bg-surface-500/20 dark:bg-surface-500/20 backdrop-blur-lg;
+		@apply ring-[1px] ring-neutral-900/5 dark:ring-neutral-50/5 ring-inset;
+	}
+}

package/src/styles/elements/breadcrumbs.css

@@ -0,0 +1,26 @@
+/* Tailwind Elements: breadcrumbs.css */
+
+@layer components {
+	.breadcrumb,
+	.breadcrumb-nonresponsive {
+		@apply flex items-center space-x-4 w-full hide-scrollbar overflow-x-auto;
+	}
+
+	.crumb {
+		@apply flex justify-center items-center space-x-2;
+	}
+	.crumb-separator {
+		@apply flex text-surface-700-200-token opacity-50;
+	}
+
+	/* === Auto-Responsive === */
+
+	.breadcrumb li {
+		@apply hidden md:block;
+	}
+	.breadcrumb li:nth-last-child(3),
+	.breadcrumb li:nth-last-child(2),
+	.breadcrumb li:nth-last-child(1) {
+		@apply block;
+	}
+}

package/src/styles/elements/buttons.css

@@ -0,0 +1,103 @@
+/* Tailwind Elements: button.css */
+
+@layer components {
+	/* === States === */
+
+	button:disabled {
+		@apply !opacity-50 !cursor-not-allowed active:scale-100 hover:brightness-100;
+	}
+
+	.button-base-styles {
+		/* Size (match base)  */
+		@apply text-base px-5 py-[9px];
+		/* Core */
+		@apply text-center whitespace-nowrap;
+		/* Flex Columns */
+		@apply inline-flex justify-center items-center space-x-2;
+		/* States */
+		@apply hover:brightness-[1.15];
+		/* Transitions */
+		@apply transition-all;
+	}
+
+	/* === Button === */
+	/* Standard button/anchor tag elements. */
+
+	.btn {
+		@apply button-base-styles rounded-token active:scale-[95%] active:brightness-90;
+	}
+
+	/* Button: Sizes */
+	/* Note: Default values are built into `.btn` */
+	.btn-sm {
+		@apply text-sm px-3 py-1.5;
+	}
+	.btn-lg {
+		@apply text-lg px-7 py-3;
+	}
+	.btn-xl {
+		@apply text-xl px-9 py-4;
+	}
+
+	/* === Icon Button === */
+	/* A circular button meant for housing icons. */
+
+	.btn-icon {
+		/* Extend Base Button Clases */
+		@apply btn;
+		/* Size (match base) */
+		@apply text-base aspect-square w-[43px];
+		/* Rounded */
+		@apply rounded-full;
+	}
+
+	/* Icon Button: Size */
+	.btn-icon-sm {
+		@apply text-sm aspect-square w-[33px];
+	}
+	.btn-icon-base {
+		@apply text-base aspect-square w-[43px];
+	}
+	.btn-icon-lg {
+		@apply text-lg aspect-square w-[53px];
+	}
+	.btn-icon-xl {
+		@apply text-xl aspect-square w-[63px];
+	}
+
+	/* File Input Button */
+	input[type='file']:not(.file-dropzone-input)::file-selector-button {
+		@apply border-0 btn variant-filled btn-sm mr-2;
+	}
+
+	/* === Button Groups === */
+
+	.btn-group {
+		@apply inline-flex flex-row space-x-0 overflow-hidden rounded-token;
+		/* Safari: hover overflow fix for border radius */
+		isolation: isolate;
+	}
+	.btn-group-vertical {
+		@apply btn-group flex-col space-y-0 rounded-container-token;
+		/* Safari: hover overflow fix for border radius */
+		isolation: isolate;
+	}
+
+	/* Button / Anchors */
+	.btn-group button,
+	.btn-group a,
+	.btn-group-vertical button,
+	.btn-group-vertical a {
+		@apply button-base-styles hover:bg-surface-50/[3%] active:bg-surface-900/[3%];
+		/* Reset Anchor Styles */
+		@apply !no-underline !text-inherit;
+	}
+
+	/* Set Neutral Divider */
+	.btn-group * + * {
+		@apply border-t-0 border-l border-surface-500/20;
+	}
+	.btn-group-vertical * + * {
+		@apply border-t border-l-0 border-surface-500/20;
+	}
+}

package/src/styles/elements/cards.css

@@ -0,0 +1,32 @@
+/* Tailwind Elements: cards.css */
+
+@layer components {
+	.card {
+		/* background */
+		@apply bg-surface-100-800-token;
+		/* Ring */
+		@apply ring-outline-token;
+		/* Theme: Rounded */
+		@apply rounded-container-token;
+	}
+
+	/* === Regions === */
+
+	.card-header {
+		@apply p-4 pb-0;
+	}
+
+	.card-footer {
+		@apply p-4 pt-0;
+	}
+
+	/* === States === */
+
+	a.card {
+		@apply transition-all hover:brightness-105;
+	}
+
+	.card-hover {
+		@apply transition-all hover:scale-[101%] hover:shadow-xl;
+	}
+}

package/src/styles/elements/chips.css

@@ -0,0 +1,22 @@
+/* Tailwind Elements: chips.css */
+
+@layer components {
+	.chip {
+		@apply px-3 py-1.5 whitespace-nowrap cursor-pointer;
+		/* Text */
+		@apply text-xs text-center;
+		/* Rounded */
+		@apply rounded;
+		/* Flex Columns */
+		@apply inline-flex justify-center items-center space-x-2;
+		/* States */
+		@apply hover:brightness-[1.15];
+		/* Transitions */
+		@apply transition-all;
+	}
+
+	.chip-disabled,
+	.chip:disabled {
+		@apply !opacity-50 !cursor-not-allowed active:scale-100;
+	}
+}

package/src/styles/elements/forms.css

@@ -0,0 +1,268 @@
+/* Stylesheet: forms.css */
+
+@layer base {
+	/* === Resets === */
+
+	fieldset,
+	legend,
+	label {
+		@apply block;
+	}
+
+	/* Placeholders */
+	::-moz-placeholder {
+		@apply text-surface-500-400-token;
+	}
+	:-ms-input-placeholder {
+		@apply text-surface-500-400-token;
+	}
+	::placeholder {
+		@apply text-surface-500-400-token;
+	}
+
+	/* Date Calendar Picker (Webkit) */
+	::-webkit-calendar-picker-indicator {
+		@apply dark:invert;
+	}
+
+	/* Progress Bar */
+	progress {
+		webkit-appearance: none;
+		-moz-appearance: none;
+		appearance: none;
+		@apply w-full h-2 overflow-hidden rounded-token;
+		@apply bg-surface-400-500-token;
+	}
+	progress::-webkit-progress-bar {
+		@apply bg-surface-400-500-token;
+	}
+	progress::-webkit-progress-value {
+		@apply bg-surface-900-50-token;
+	}
+	::-moz-progress-bar {
+		@apply bg-surface-900-50-token;
+	}
+	:indeterminate::-moz-progress-bar {
+		width: 0;
+	}
+
+	/* Range Input */
+	/* https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color */
+	[type='range'] {
+		@apply w-full accent-surface-900 dark:accent-surface-50;
+	}
+
+	/* === Text Labeling === */
+
+	.legend {
+		@apply font-heading-token text-xl md:text-2xl;
+	}
+
+	.label {
+		@apply space-y-1;
+	}
+
+	/* === Core Styles === */
+
+	.input,
+	.textarea,
+	.select,
+	.input-group {
+		@apply w-full transition duration-200;
+		/* Background */
+		@apply bg-surface-200-700-token focus:brightness-105 hover:brightness-105;
+		/* Ring */
+		@apply !ring-0;
+		/* Border */
+		@apply border-token border-surface-400-500-token focus-within:border-primary-500;
+	}
+
+	/* Base Inputs */
+	.input,
+	.input-group {
+		@apply rounded-token;
+	}
+
+	/* Container Inputs */
+	.textarea,
+	.select {
+		@apply rounded-container-token;
+	}
+
+	/* Select (size/multiple) */
+	.select {
+		@apply p-2 pr-8 space-y-1;
+	}
+	.select[size] {
+		@apply bg-none;
+	}
+	.select optgroup {
+		@apply space-y-1 font-bold;
+	}
+	.select optgroup option {
+		@apply ml-0 pl-0;
+	}
+	.select optgroup option:first-of-type {
+		@apply mt-3;
+	}
+	.select optgroup option:last-child {
+		@apply !mb-3;
+	}
+	.select option {
+		@apply bg-surface-200-700-token px-4 py-2 rounded-token cursor-pointer;
+	}
+	.select option:checked {
+		/* https://stackoverflow.com/questions/50618602/change-color-of-selected-option-in-select-multiple */
+		background: rgb(var(--color-primary-500)) linear-gradient(0deg, rgb(var(--color-primary-500)) 0%, rgb(var(--color-primary-500)) 100%);
+		@apply text-on-primary-token;
+	}
+
+	/* Checkbox & Radio */
+	.checkbox,
+	.radio {
+		@apply w-5 h-5 !ring-0 rounded cursor-pointer;
+		/* Background */
+		@apply bg-surface-200-700-token focus:brightness-105 hover:brightness-105;
+		/* Border */
+		@apply border-token border-surface-400-500-token focus:border-primary-500;
+	}
+	.checkbox:checked,
+	.radio:checked {
+		@apply bg-primary-500 hover:bg-primary-500 focus:bg-primary-500 focus:ring-0;
+	}
+	.radio {
+		@apply rounded-token;
+	}
+
+	/* === Specialized === */
+
+	/* File Inputs */
+	.input[type='file'] {
+		@apply p-1;
+	}
+
+	/* Color Picker */
+	/* https://stackoverflow.com/questions/11167281/webkit-css-to-control-the-box-around-the-color-in-an-inputtype-color */
+	.input[type='color'] {
+		@apply border-none w-10 h-10 overflow-hidden rounded-token cursor-pointer;
+		-webkit-appearance: none; /* WebKit Only */
+	}
+	.input[type='color']::-webkit-color-swatch-wrapper {
+		@apply p-0;
+	}
+	.input[type='color']::-webkit-color-swatch {
+		@apply border-none hover:brightness-110;
+	}
+	.input[type='color']::-moz-color-swatch {
+		@apply border-none;
+	}
+
+	/* === States === */
+
+	.input:disabled,
+	.textarea:disabled,
+	.select:disabled {
+		@apply !opacity-50 !cursor-not-allowed hover:!brightness-100;
+	}
+
+	.input[readonly],
+	.textarea[readonly],
+	.select[readonly] {
+		@apply !border-0 !cursor-not-allowed hover:!brightness-100;
+	}
+
+	/* === Input Groups === */
+
+	.input-group {
+		@apply grid overflow-hidden;
+	}
+	.input-group input,
+	.input-group select {
+		@apply border-0 ring-0 bg-transparent;
+	}
+	.input-group select option {
+		@apply bg-surface-200-700-token;
+	}
+	.input-group div,
+	.input-group a,
+	.input-group button {
+		@apply px-4 flex justify-between items-center;
+	}
+	.input-group-divider input,
+	.input-group-divider select,
+	.input-group-divider div,
+	.input-group-divider a {
+		@apply border-l border-surface-400-500-token focus:border-surface-400-500-token;
+		/* Disable Ring */
+		@apply !ring-0;
+		/* Prevent buttons from being squished */
+		@apply !min-w-fit;
+	}
+	.input-group-divider *:first-child {
+		@apply !border-l-0;
+	}
+	.input-group-shim {
+		@apply bg-surface-400/10 text-surface-600-300-token;
+	}
+
+	/* === Variants === */
+
+	/* success */
+	.input-success {
+		@apply !bg-success-200 !border-success-500 !text-success-700;
+	}
+	.input-success::-moz-placeholder {
+		@apply text-success-700;
+	}
+	.input-success:-ms-input-placeholder {
+		@apply text-success-700;
+	}
+	.input-success::placeholder {
+		@apply text-success-700;
+	}
+
+	/* warning */
+	.input-warning {
+		@apply !bg-warning-200 !border-warning-500 !text-warning-700;
+	}
+	.input-warning::-moz-placeholder {
+		@apply text-warning-700;
+	}
+	.input-warning:-ms-input-placeholder {
+		@apply text-warning-700;
+	}
+	.input-warning::placeholder {
+		@apply text-warning-700;
+	}
+
+	/* error */
+	.input-error {
+		@apply !bg-error-200 !border-error-500 !text-error-500;
+	}
+	.input-error::-moz-placeholder {
+		@apply text-error-500;
+	}
+	.input-error:-ms-input-placeholder {
+		@apply text-error-500;
+	}
+	.input-error::placeholder {
+		@apply text-error-500;
+	}
+
+	/* === Variants === */
+
+	/* Material */
+	.variant-form-material {
+		/* Border Radius */
+		@apply !rounded-tl !rounded-tr !rounded-bl-none !rounded-br-none;
+		/* Background */
+		@apply bg-surface-500/10 dark:bg-surface-500/20;
+		/* Border */
+		@apply border-0 border-b-2;
+		/* Blur */
+		@apply backdrop-blur;
+	}
+	.variant-form-material[type='file'] {
+		@apply !py-1.5;
+	}
+}

package/src/styles/elements/lists.css

@@ -0,0 +1,48 @@
+/* Tailwind Elements: button.css */
+
+@layer components {
+	/* === Lists (Parents) === */
+
+	.list,
+	.list-dl,
+	.list-nav ul {
+		/* List Style */
+		@apply list-none;
+		/* Spacing */
+		@apply space-y-1;
+	}
+
+	/* === List Items (Children) === */
+
+	.list li {
+		/* @apply bg-red-500; */
+		@apply flex items-center space-x-4 whitespace-nowrap;
+		/* Padding */
+		@apply p-2;
+		/* Theme: Rounded */
+		@apply rounded-token;
+	}
+
+	.list-dl div {
+		/* @apply bg-blue-500; */
+		@apply flex items-center space-x-4 whitespace-nowrap;
+		/* Padding */
+		@apply p-2;
+		/* Theme: Rounded */
+		@apply rounded-token;
+	}
+
+	.list-nav a,
+	.list-nav button,
+	.list-option {
+		@apply flex items-center space-x-4 whitespace-nowrap;
+		/* Padding */
+		@apply px-4 py-2;
+		/* Hover */
+		@apply bg-primary-hover-token;
+		/* Cursor */
+		@apply cursor-pointer;
+		/* Theme: Rounded */
+		@apply rounded-token;
+	}
+}