@hobui/viui-cli 0.0.5 → 0.0.7

package/dist/assets/prompt-data/components.json

@@ -0,0 +1,106 @@
+[
+  {
+    "vi": "ViButton",
+    "vuetify": "v-btn"
+  },
+  {
+    "vi": "ViButtonToggle",
+    "vuetify": "v-btn-toggle"
+  },
+  {
+    "vi": "ViInput",
+    "vuetify": "v-text-field"
+  },
+  {
+    "vi": "ViColorInput",
+    "vuetify": "v-color-input"
+  },
+  {
+    "vi": "ViTextarea",
+    "vuetify": "v-textarea"
+  },
+  {
+    "vi": "ViSelect",
+    "vuetify": "v-select"
+  },
+  {
+    "vi": "ViAutocomplete",
+    "vuetify": "v-autocomplete"
+  },
+  {
+    "vi": "ViCheckbox",
+    "vuetify": "v-checkbox"
+  },
+  {
+    "vi": "ViRadioGroup",
+    "vuetify": "v-radio-group"
+  },
+  {
+    "vi": "ViSwitch",
+    "vuetify": "v-switch"
+  },
+  {
+    "vi": "ViCard",
+    "vuetify": "v-card"
+  },
+  {
+    "vi": "ViList",
+    "vuetify": "v-list"
+  },
+  {
+    "vi": "ViChip",
+    "vuetify": "v-chip"
+  },
+  {
+    "vi": "ViAvatar",
+    "vuetify": "v-avatar"
+  },
+  {
+    "vi": "ViMenu",
+    "vuetify": "v-menu"
+  },
+  {
+    "vi": "ViAppBar",
+    "vuetify": "v-app-bar"
+  },
+  {
+    "vi": "ViNavigationDrawer",
+    "vuetify": "v-navigation-drawer"
+  },
+  {
+    "vi": "ViMain",
+    "vuetify": "v-main"
+  },
+  {
+    "vi": "ViAlert",
+    "vuetify": "v-alert"
+  },
+  {
+    "vi": "ViDialog",
+    "vuetify": "v-dialog"
+  },
+  {
+    "vi": "ViToast",
+    "vuetify": "v-snackbar"
+  },
+  {
+    "vi": "ViLoading",
+    "vuetify": "v-skeleton-loader"
+  },
+  {
+    "vi": "ViDataTable",
+    "vuetify": "v-data-table"
+  },
+  {
+    "vi": "ViPagination",
+    "vuetify": "v-pagination"
+  },
+  {
+    "vi": "ViSparkline",
+    "vuetify": "v-sparkline"
+  },
+  {
+    "vi": "ViChart",
+    "vuetify": "apexchart"
+  }
+]

package/dist/assets/prompt-data/tokens.json

@@ -0,0 +1,83 @@
+{
+  "colors": {
+    "brand": {
+      "inet-primary": {
+        "css": "--inet-primary",
+        "value": "#1565C0"
+      },
+      "inet-secondary": {
+        "css": "--inet-secondary",
+        "value": "#00897B"
+      },
+      "inet-accent": {
+        "css": "--inet-accent",
+        "value": "#FF6F00"
+      },
+      "inet-info": {
+        "css": "--inet-info",
+        "value": "#0288D1"
+      },
+      "inet-success": {
+        "css": "--inet-success",
+        "value": "#2E7D32"
+      },
+      "inet-warning": {
+        "css": "--inet-warning",
+        "value": "#F9A825"
+      },
+      "inet-error": {
+        "css": "--inet-error",
+        "value": "#C62828"
+      }
+    },
+    "semantic": {
+      "surface": {
+        "css": "--inet-surface",
+        "value": "#FFFFFF"
+      },
+      "background": {
+        "css": "--inet-background",
+        "value": "#FAFAFA"
+      },
+      "on-surface": {
+        "css": "--inet-on-surface",
+        "value": "#212121"
+      },
+      "on-primary": {
+        "css": "--inet-on-primary",
+        "value": "#FFFFFF"
+      }
+    }
+  },
+  "spacing": {
+    "system": "8pt grid",
+    "values": {
+      "xs": "4px",
+      "sm": "8px",
+      "md": "16px",
+      "lg": "24px",
+      "xl": "32px",
+      "2xl": "48px"
+    }
+  },
+  "shape": {
+    "borderRadius": {
+      "sm": "4px",
+      "md": "8px",
+      "lg": "16px",
+      "xl": "24px",
+      "pill": "9999px"
+    }
+  },
+  "typography": {
+    "fontFamily": "'Inter', 'Roboto', sans-serif",
+    "scale": {
+      "caption": "12px",
+      "body2": "14px",
+      "body1": "16px",
+      "h6": "20px",
+      "h5": "24px",
+      "h4": "34px"
+    }
+  }
+}

package/dist/assets/themes/_bento-grid.scss

@@ -0,0 +1,8 @@
+/**
+ * Bento Grid design style — một file duy nhất: scoped + body. Entry: bento-grid.scss; *-global alias.
+ * TODO: grid layout, card tiles, spacing tokens.
+ */
+.components-overview-wrapper.design-style-bento-grid,
+body.design-style-bento-grid {
+  /* Bento Grid styles — use design tokens */
+}

package/dist/assets/themes/_glassmorphism.scss

@@ -0,0 +1,8 @@
+/**
+ * Glassmorphism design style — một file duy nhất: scoped + body. Entry: glassmorphism.scss; *-global alias.
+ * TODO: backdrop-filter, semi-transparent surfaces, blur.
+ */
+.components-overview-wrapper.design-style-glassmorphism,
+body.design-style-glassmorphism {
+  /* Glassmorphism styles — use design tokens */
+}

package/dist/assets/themes/_material.scss

@@ -0,0 +1,8 @@
+/**
+ * Material design style — một file duy nhất: scoped + body. Entry: material.scss; *-global alias.
+ * TODO: Material 3 / M3-like elevation, shapes, motion.
+ */
+.components-overview-wrapper.design-style-material,
+body.design-style-material {
+  /* Material styles — use design tokens */
+}

package/dist/assets/themes/_minimalist-2.scss

@@ -0,0 +1,375 @@
+/**
+ * Minimalist 2.0 — scoped `.design-style-minimalist-2` + `body.design-style-minimalist-2` (teleport).
+ * Glassmorphism surfaces, soft elevation shadows, technical typography.
+ * Màu theo props Vi* / Vuetify.
+ */
+$min2-border-width: 1px;
+$min2-radius: var(--radius-base);
+
+// ── Glass Surface Mixin ──
+// Apply to cards, dialogs, menus, app-bar, navigation-drawer
+@mixin glass-surface($elevation: 3) {
+  background: var(--min2-glass-bg);
+  backdrop-filter: blur(var(--min2-glass-blur));
+  -webkit-backdrop-filter: blur(var(--min2-glass-blur));
+  border: var(--min2-glass-border);
+  box-shadow: var(--min2-shadow-el-#{$elevation}), var(--min2-glass-glow);
+  transition: background var(--min2-transition-base),
+              box-shadow var(--min2-transition-base);
+
+  @supports not (backdrop-filter: blur(1px)) {
+    background: var(--color-surface-card);
+    border: $min2-border-width solid var(--color-border-default);
+  }
+}
+
+/** Dialog / toast / nút trong dialog — dùng chung trong canvas và trên body (teleport). */
+@mixin min2-overlay-chrome {
+  .vi-dialog-card {
+    @include glass-surface(4);
+    border-radius: $min2-radius;
+  }
+
+  .vi-dialog-title {
+    font-weight: var(--font-weight-medium);
+    border-bottom-width: $min2-border-width;
+  }
+
+  .vi-dialog-actions {
+    border-top-width: $min2-border-width;
+  }
+
+  .vi-toast.v-snackbar .v-snackbar__wrapper {
+    @include glass-surface(3);
+    border-radius: $min2-radius;
+    font-weight: var(--font-weight-regular);
+  }
+
+  /* Menu overlay — glass surface */
+  .v-overlay__content > .v-list {
+    @include glass-surface(3);
+    border-radius: $min2-radius;
+  }
+}
+
+.design-style-minimalist-2 {
+  --min2-border-width: #{$min2-border-width};
+  --min2-radius: #{$min2-radius};
+  --min2-spacing-section: var(--space-8pt-2);
+
+  /* iNET DNA — scoped override, không ảnh hưởng global tokens */
+  --color-brand-primary: #024799;
+  --color-brand-accent: #cc0e0e;
+
+  /* Derived tokens — dual-tone Blue + Red, không blend */
+  --min2-gradient-subtle: linear-gradient(135deg, #fff 0%, #F4F7FA 100%);
+  --min2-hover-overlay: color-mix(in srgb, var(--color-brand-primary) 6%, transparent);
+  --min2-accent-border: var(--color-brand-accent);
+
+  /* Motion tokens */
+  --min2-transition-fast: 150ms ease-out;
+  --min2-transition-base: 200ms ease-out;
+
+  /* Glass surface tokens — medium glassmorphism */
+  --min2-glass-bg: rgba(255, 255, 255, 0.78);
+  --min2-glass-bg-hover: rgba(255, 255, 255, 0.85);
+  --min2-glass-blur: 16px;
+  --min2-glass-border: 1px solid rgba(0, 0, 0, 0.06);
+  --min2-glass-glow: 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
+
+  /* Elevation shadow aliases — auto-switch light/dark */
+  --min2-shadow-el-0: var(--shadow-elevation-0);
+  --min2-shadow-el-1: var(--shadow-elevation-1);
+  --min2-shadow-el-2: var(--shadow-elevation-2);
+  --min2-shadow-el-3: var(--shadow-elevation-3);
+  --min2-shadow-el-4: var(--shadow-elevation-4);
+  --min2-shadow-el-5: var(--shadow-elevation-5);
+
+  /* Dark mode overrides */
+  .v-theme--dark & {
+    --min2-glass-bg: rgba(42, 42, 42, 0.72);
+    --min2-glass-bg-hover: rgba(42, 42, 42, 0.80);
+    --min2-glass-border: 1px solid rgba(255, 255, 255, 0.06);
+    --min2-glass-glow: 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
+
+    --min2-shadow-el-1: var(--shadow-elevation-dark-1);
+    --min2-shadow-el-2: var(--shadow-elevation-dark-2);
+    --min2-shadow-el-3: var(--shadow-elevation-dark-3);
+    --min2-shadow-el-4: var(--shadow-elevation-dark-4);
+    --min2-shadow-el-5: var(--shadow-elevation-dark-5);
+  }
+
+  // ── AppBar — glass + accent red bottom-line (iNET DNA) ──
+  .vi-app-bar.v-toolbar {
+    @include glass-surface(2);
+    position: relative;
+
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: 2px;
+      background: var(--min2-accent-border);
+    }
+  }
+
+  // ── Button Toggle ──
+  .vi-button-toggle.v-btn-toggle {
+    border: $min2-border-width solid var(--color-border-default);
+    border-radius: $min2-radius;
+    box-shadow: none;
+  }
+
+  // ── Cards — glass surfaces ──
+  .vi-card {
+    @include glass-surface(3);
+    text-align: left;
+
+    /* Outlined variant — no glass, solid border */
+    &.outlined {
+      background: transparent;
+      backdrop-filter: none;
+      -webkit-backdrop-filter: none;
+      border: $min2-border-width solid var(--color-border-default);
+      border-radius: $min2-radius;
+      box-shadow: none;
+    }
+
+    .v-card-title {
+      font-weight: var(--font-weight-semibold);
+      font-size: var(--font-size-base);
+      letter-spacing: var(--letter-spacing-tight);
+    }
+
+    .v-card-text {
+      font-size: var(--font-size-sm);
+      line-height: var(--line-height-normal);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--color-brand-primary);
+      outline-offset: 2px;
+    }
+  }
+
+  /* Interactive card — enhanced hover */
+  .vi-card--interactive {
+    cursor: pointer;
+    transition: box-shadow var(--min2-transition-base),
+                transform var(--min2-transition-base),
+                background var(--min2-transition-base);
+
+    &:hover {
+      background: var(--min2-glass-bg-hover);
+      box-shadow: var(--min2-shadow-el-4), var(--min2-glass-glow);
+      transform: translateY(-2px);
+    }
+
+    &:active {
+      transform: translateY(0);
+      box-shadow: var(--min2-shadow-el-2);
+    }
+  }
+
+  /* Stripe-like semantic cards: subtle surface bg + left accent border */
+  .themes-minimalist-2__card {
+    &--primary {
+      border-left: 3px solid var(--color-primary) !important;
+      background-color: var(--color-info-surface, #EFF6FF) !important;
+
+      .v-card-title { color: var(--color-info-text, #1E40AF); }
+    }
+
+    &--success {
+      border-left: 3px solid var(--color-success-default, #0E9F6E) !important;
+      background-color: var(--color-success-surface, #ECFDF5) !important;
+
+      .v-card-title { color: var(--color-success-text, #065F46); }
+    }
+
+    &--warning {
+      border-left: 3px solid var(--color-warning-default, #D47B0A) !important;
+      background-color: var(--color-warning-surface, #FFFBEB) !important;
+
+      .v-card-title { color: var(--color-warning-text, #92400E); }
+    }
+
+    &--error {
+      border-left: 3px solid var(--color-error-default, #B91C1C) !important;
+      background-color: var(--color-error-surface, #FEF2F2) !important;
+
+      .v-card-title { color: var(--color-error-text, #991B1B); }
+    }
+
+    &--info {
+      border-left: 3px solid var(--color-info-default, #8abdef) !important;
+      background-color: var(--color-info-surface, #EFF6FF) !important;
+
+      .v-card-title { color: var(--color-info-text, #1E40AF); }
+    }
+
+    /* iNET DNA accent card — red left-border */
+    &--accent {
+      border-left: 3px solid var(--min2-accent-border) !important;
+    }
+  }
+
+  // ── Navigation Drawer — glass ──
+  .vi-navigation-drawer .v-navigation-drawer__content {
+    @include glass-surface(2);
+  }
+
+  // ── Sections ──
+  .vi-section__title {
+    font-weight: var(--font-weight-medium);
+    text-align: left;
+    border-bottom: $min2-border-width solid var(--color-brand-primary);
+    padding-bottom: var(--min2-spacing-section);
+  }
+
+  .vi-section__content {
+    text-align: left;
+  }
+
+  .themes-minimalist-2__area {
+    background: var(--color-surface-background);
+  }
+
+  // ── Form fields ──
+  .vi-input .v-field,
+  .vi-select .v-field,
+  .vi-autocomplete .v-field,
+  .v-field {
+    --v-field-border-width: #{$min2-border-width};
+    --v-field-border-opacity: 1;
+    border-radius: $min2-radius !important;
+    box-shadow: none !important;
+
+    .v-field__outline {
+      color: var(--color-border-default) !important;
+    }
+
+    &.v-field--focused {
+      .v-field__outline {
+        --v-field-border-width: #{$min2-border-width};
+        color: var(--color-border-focus) !important;
+      }
+    }
+
+    &.v-field--error .v-field__outline {
+      color: rgb(var(--v-theme-error)) !important;
+    }
+  }
+
+  .vi-checkbox .v-selection-control .v-checkbox-btn {
+    border-width: $min2-border-width;
+    border-style: solid;
+    border-color: var(--color-border-default);
+    border-radius: var(--radius-sm);
+  }
+
+  .vi-alert {
+    border: $min2-border-width solid currentColor;
+    border-radius: $min2-radius;
+  }
+
+  @include min2-overlay-chrome;
+
+  .themes-minimalist-2__progress.v-progress-linear {
+    border: none;
+    border-radius: $min2-radius;
+  }
+
+  // ── Data Table ──
+  .vi-data-table .v-table {
+    border: $min2-border-width solid var(--color-border-default);
+    border-radius: $min2-radius;
+    overflow: hidden;
+
+    th {
+      border: none;
+      border-bottom: $min2-border-width solid var(--color-border-default);
+      font-size: var(--font-size-xs);
+      font-weight: var(--font-weight-semibold);
+      text-transform: uppercase;
+      letter-spacing: var(--letter-spacing-wider);
+      color: var(--color-text-secondary);
+      background: var(--color-neutral-50, #F4F7FA);
+      font-feature-settings: var(--font-feature-tabular);
+    }
+
+    td {
+      border: none;
+      border-bottom: $min2-border-width solid var(--color-border-subtle);
+      font-size: var(--font-size-sm);
+      font-feature-settings: var(--font-feature-tabular);
+    }
+
+    .v-data-table__tr:hover td {
+      background: var(--color-neutral-50, #F4F7FA);
+    }
+
+    .v-data-table__tr:last-child td {
+      border-bottom: none;
+    }
+
+    .v-data-table-footer {
+      border-top: $min2-border-width solid var(--color-border-default);
+      font-size: var(--font-size-sm);
+    }
+  }
+
+  // ── Pagination ──
+  .vi-pagination .v-pagination__list {
+    gap: var(--space-8pt-1);
+  }
+
+  // ── Technical Typography (Minimalist 2.0) ──
+
+  /* Heading hierarchy — tighter spacing for headings */
+  h1, .text-h1 {
+    letter-spacing: var(--letter-spacing-tighter);
+    font-weight: var(--font-weight-bold);
+    line-height: var(--line-height-tight);
+  }
+
+  h2, .text-h2 {
+    letter-spacing: var(--letter-spacing-tight);
+    font-weight: var(--font-weight-semibold);
+    line-height: var(--line-height-tight);
+  }
+
+  h3, h4, .text-h3, .text-h4 {
+    letter-spacing: var(--letter-spacing-tight);
+    font-weight: var(--font-weight-semibold);
+    line-height: var(--line-height-snug);
+  }
+
+  /* Labels & badges — wider spacing for readability at small sizes */
+  .vi-chip .v-chip__content {
+    letter-spacing: var(--letter-spacing-wide);
+  }
+
+  /* Monospace zones — strategic monospace placement */
+  pre, code {
+    font-family: var(--font-family-mono);
+    font-feature-settings: var(--font-feature-tabular);
+    line-height: var(--line-height-relaxed);
+  }
+
+  /* Stats/metrics — large tabular numbers */
+  [class*="stat-value"],
+  [class*="metric-value"],
+  [class*="kpi-value"] {
+    font-family: var(--font-family-primary);
+    font-feature-settings: var(--font-feature-tabular);
+    font-weight: var(--font-weight-bold);
+    letter-spacing: var(--letter-spacing-tight);
+  }
+}
+
+body.design-style-minimalist-2 {
+  @include min2-overlay-chrome;
+}

package/dist/assets/themes/_minimalist.scss

@@ -0,0 +1,9 @@
+/**
+ * Minimalist design style — scoped + global (body).
+ * Một file duy nhất: wrapper + body (teleport + toàn app). Entry: minimalist.scss; *-global alias tới đó.
+ * TODO: clean lines, reduced chrome, generous whitespace.
+ */
+.components-overview-wrapper.design-style-minimalist,
+body.design-style-minimalist {
+  /* Minimalist styles — use design tokens */
+}