dxd-style-code 0.1.7 → 0.1.8

package/src/components/typography/DXBlockquote/DXBlockquote.vue

@@ -0,0 +1,44 @@
+<template>
+  <blockquote
+    :class="blockquoteClasses"
+    data-component="DXBlockquote"
+    :data-variant="variant"
+  >
+    <slot />
+    <footer v-if="cite || $slots.cite" class="mt-2 text-sm text-slate-500">
+      — <cite><slot name="cite">{{ cite }}</slot></cite>
+    </footer>
+  </blockquote>
+</template>
+
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+  /** Вариант: default | bordered | highlighted */
+  variant: { type: String, default: "bordered" },
+  /** Размер: sm | md | lg */
+  size: { type: String, default: "md" },
+  /** Источник цитаты */
+  cite: { type: String, default: "" },
+});
+
+const sizeClasses = {
+  sm: "text-sm",
+  md: "text-base",
+  lg: "text-lg",
+};
+
+const variantClasses = {
+  default: "text-slate-600 italic",
+  bordered: "border-l-4 border-slate-300 pl-4 text-slate-600 italic",
+  highlighted: "bg-slate-50 border-l-4 border-slate-400 pl-4 pr-4 py-3 rounded-r-lg text-slate-700",
+};
+
+const blockquoteClasses = computed(() => [
+  sizeClasses[props.size] || sizeClasses.md,
+  variantClasses[props.variant] || variantClasses.bordered,
+  "leading-relaxed",
+]);
+</script>
+

package/src/components/typography/DXBlockquote/index.js

@@ -0,0 +1,2 @@
+export { default } from './DXBlockquote.vue';
+

package/src/components/typography/DXCode/DXCode.stories.js

@@ -0,0 +1,29 @@
+import DXCode from './DXCode.vue';
+
+export default {
+  title: 'Typography/DXCode',
+  component: DXCode,
+  tags: ['autodocs'],
+};
+
+export const Inline = {
+  render: () => ({
+    components: { DXCode },
+    template: '<p>Используйте <DXCode>npm install</DXCode> для установки.</p>',
+  }),
+};
+
+export const Block = {
+  args: { block: true },
+  render: (args) => ({
+    components: { DXCode },
+    setup() { return { args }; },
+    template: `<DXCode v-bind="args">const greeting = "Hello World";
+console.log(greeting);
+
+function add(a, b) {
+  return a + b;
+}</DXCode>`,
+  }),
+};
+

package/src/components/typography/DXCode/DXCode.vue

@@ -0,0 +1,46 @@
+<template>
+  <component
+    :is="block ? 'pre' : 'code'"
+    :class="codeClasses"
+    data-component="DXCode"
+    :data-block="block"
+  >
+    <code v-if="block"><slot /></code>
+    <slot v-else />
+  </component>
+</template>
+
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+  /** Блочный код (pre) или inline */
+  block: { type: Boolean, default: false },
+  /** Размер: xs | sm | md */
+  size: { type: String, default: "sm" },
+  /** Показывать номера строк (только для block) */
+  lineNumbers: { type: Boolean, default: false },
+});
+
+const sizeClasses = {
+  xs: "text-xs",
+  sm: "text-sm",
+  md: "text-base",
+};
+
+const codeClasses = computed(() => {
+  if (props.block) {
+    return [
+      "block w-full overflow-x-auto rounded-xl bg-slate-900 text-slate-100 p-4",
+      sizeClasses[props.size] || sizeClasses.sm,
+      "font-mono leading-relaxed",
+    ];
+  }
+  return [
+    "inline-block px-1.5 py-0.5 rounded bg-slate-100 text-slate-800",
+    sizeClasses[props.size] || sizeClasses.sm,
+    "font-mono",
+  ];
+});
+</script>
+

package/src/components/typography/DXCode/index.js

@@ -0,0 +1,2 @@
+export { default } from './DXCode.vue';
+

package/src/components/typography/DXHeading/DXHeading.stories.js

@@ -0,0 +1,54 @@
+import DXHeading from './DXHeading.vue';
+
+export default {
+  title: 'Typography/DXHeading',
+  component: DXHeading,
+  tags: ['autodocs'],
+  argTypes: {
+    level: { control: { type: 'select' }, options: [1, 2, 3, 4, 5, 6] },
+    size: { control: { type: 'select' }, options: ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl'] },
+    weight: { control: { type: 'select' }, options: ['normal', 'medium', 'semibold', 'bold'] },
+    color: { control: { type: 'select' }, options: ['default', 'muted', 'primary', 'success', 'warning', 'danger'] },
+  },
+};
+
+export const Default = {
+  args: { level: 1 },
+  render: (args) => ({
+    components: { DXHeading },
+    setup() { return { args }; },
+    template: '<DXHeading v-bind="args">Заголовок страницы</DXHeading>',
+  }),
+};
+
+export const AllLevels = {
+  render: () => ({
+    components: { DXHeading },
+    template: `
+      <div class="space-y-4">
+        <DXHeading :level="1">Heading 1</DXHeading>
+        <DXHeading :level="2">Heading 2</DXHeading>
+        <DXHeading :level="3">Heading 3</DXHeading>
+        <DXHeading :level="4">Heading 4</DXHeading>
+        <DXHeading :level="5">Heading 5</DXHeading>
+        <DXHeading :level="6">Heading 6</DXHeading>
+      </div>
+    `,
+  }),
+};
+
+export const Colors = {
+  render: () => ({
+    components: { DXHeading },
+    template: `
+      <div class="space-y-2">
+        <DXHeading :level="3" color="default">Default Color</DXHeading>
+        <DXHeading :level="3" color="muted">Muted Color</DXHeading>
+        <DXHeading :level="3" color="success">Success Color</DXHeading>
+        <DXHeading :level="3" color="warning">Warning Color</DXHeading>
+        <DXHeading :level="3" color="danger">Danger Color</DXHeading>
+      </div>
+    `,
+  }),
+};
+

package/src/components/typography/DXHeading/DXHeading.vue

@@ -0,0 +1,68 @@
+<template>
+  <component
+    :is="tag"
+    :class="headingClasses"
+    data-component="DXHeading"
+    :data-level="level"
+    :data-weight="weight"
+    :data-color="color"
+  >
+    <slot />
+  </component>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { useVariantText } from "@/composables/useVariant";
+
+const props = defineProps({
+  /** Уровень заголовка: 1-6 */
+  level: { type: [Number, String], default: 1 },
+  /** Размер (переопределяет level): xs | sm | md | lg | xl | 2xl | 3xl | 4xl */
+  size: { type: String, default: "" },
+  /** Вес шрифта: normal | medium | semibold | bold */
+  weight: { type: String, default: "semibold" },
+  /** Цвет: default | muted | primary | success | warning | danger */
+  color: { type: String, default: "default" },
+  /** Обрезать текст с ... */
+  truncate: { type: Boolean, default: false },
+});
+
+const tag = computed(() => `h${props.level}`);
+
+const sizeClasses = {
+  xs: "text-xs",
+  sm: "text-sm",
+  md: "text-base",
+  lg: "text-lg",
+  xl: "text-xl",
+  "2xl": "text-2xl",
+  "3xl": "text-3xl",
+  "4xl": "text-4xl",
+};
+
+const levelSizes = {
+  1: "text-4xl",
+  2: "text-3xl",
+  3: "text-2xl",
+  4: "text-xl",
+  5: "text-lg",
+  6: "text-base",
+};
+
+const weightClasses = {
+  normal: "font-normal",
+  medium: "font-medium",
+  semibold: "font-semibold",
+  bold: "font-bold",
+};
+
+const headingClasses = computed(() => [
+  props.size ? sizeClasses[props.size] : levelSizes[props.level],
+  weightClasses[props.weight] || weightClasses.semibold,
+  useVariantText(props.color),
+  "tracking-tight",
+  props.truncate && "truncate",
+]);
+</script>
+

package/src/components/typography/DXHeading/index.js

@@ -0,0 +1,2 @@
+export { default } from './DXHeading.vue';
+

package/src/components/typography/DXLabel/DXLabel.stories.js

@@ -0,0 +1,40 @@
+import DXLabel from './DXLabel.vue';
+
+export default {
+  title: 'Typography/DXLabel',
+  component: DXLabel,
+  tags: ['autodocs'],
+};
+
+export const Default = {
+  args: {},
+  render: (args) => ({
+    components: { DXLabel },
+    setup() { return { args }; },
+    template: '<DXLabel v-bind="args">Email адрес</DXLabel>',
+  }),
+};
+
+export const Required = {
+  args: { required: true },
+  render: (args) => ({
+    components: { DXLabel },
+    setup() { return { args }; },
+    template: '<DXLabel v-bind="args">Обязательное поле</DXLabel>',
+  }),
+};
+
+export const Sizes = {
+  render: () => ({
+    components: { DXLabel },
+    template: `
+      <div class="space-y-2">
+        <DXLabel size="xs">Extra Small Label</DXLabel>
+        <DXLabel size="sm">Small Label (default)</DXLabel>
+        <DXLabel size="md">Medium Label</DXLabel>
+        <DXLabel size="lg">Large Label</DXLabel>
+      </div>
+    `,
+  }),
+};
+

package/src/components/typography/DXLabel/DXLabel.vue

@@ -0,0 +1,49 @@
+<template>
+  <label
+    :class="labelClasses"
+    :for="htmlFor"
+    data-component="DXLabel"
+  >
+    <slot />
+    <span v-if="required" class="text-rose-500 ml-0.5">*</span>
+  </label>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { useVariantText } from "@/composables/useVariant";
+
+const props = defineProps({
+  /** ID связанного input */
+  htmlFor: { type: String, default: "" },
+  /** Размер: xs | sm | md | lg */
+  size: { type: String, default: "sm" },
+  /** Вес шрифта: normal | medium | semibold */
+  weight: { type: String, default: "medium" },
+  /** Цвет: default | muted | primary */
+  color: { type: String, default: "default" },
+  /** Обязательное поле */
+  required: { type: Boolean, default: false },
+});
+
+const sizeClasses = {
+  xs: "text-xs",
+  sm: "text-sm",
+  md: "text-base",
+  lg: "text-lg",
+};
+
+const weightClasses = {
+  normal: "font-normal",
+  medium: "font-medium",
+  semibold: "font-semibold",
+};
+
+const labelClasses = computed(() => [
+  "block",
+  sizeClasses[props.size] || sizeClasses.sm,
+  weightClasses[props.weight] || weightClasses.medium,
+  useVariantText(props.color),
+]);
+</script>
+

package/src/components/typography/DXLabel/index.js

@@ -0,0 +1,2 @@
+export { default } from './DXLabel.vue';
+

package/src/components/typography/DXList/DXList.stories.js

@@ -0,0 +1,50 @@
+import DXList from './DXList.vue';
+
+export default {
+  title: 'Typography/DXList',
+  component: DXList,
+  tags: ['autodocs'],
+};
+
+export const Unordered = {
+  render: () => ({
+    components: { DXList },
+    template: `
+      <DXList>
+        <li>Первый элемент</li>
+        <li>Второй элемент</li>
+        <li>Третий элемент</li>
+      </DXList>
+    `,
+  }),
+};
+
+export const Ordered = {
+  args: { ordered: true },
+  render: (args) => ({
+    components: { DXList },
+    setup() { return { args }; },
+    template: `
+      <DXList v-bind="args">
+        <li>Шаг первый</li>
+        <li>Шаг второй</li>
+        <li>Шаг третий</li>
+      </DXList>
+    `,
+  }),
+};
+
+export const NoMarker = {
+  args: { marker: 'none' },
+  render: (args) => ({
+    components: { DXList },
+    setup() { return { args }; },
+    template: `
+      <DXList v-bind="args">
+        <li>Элемент без маркера</li>
+        <li>Ещё один элемент</li>
+      </DXList>
+    `,
+  }),
+};
+

package/src/components/typography/DXList/DXList.vue

@@ -0,0 +1,55 @@
+<template>
+  <component
+    :is="ordered ? 'ol' : 'ul'"
+    :class="listClasses"
+    data-component="DXList"
+  >
+    <slot />
+  </component>
+</template>
+
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+  /** Нумерованный список */
+  ordered: { type: Boolean, default: false },
+  /** Стиль маркеров: disc | circle | square | decimal | none */
+  marker: { type: String, default: "" },
+  /** Размер: sm | md | lg */
+  size: { type: String, default: "md" },
+  /** Отступ между элементами: none | sm | md | lg */
+  spacing: { type: String, default: "sm" },
+});
+
+const sizeClasses = {
+  sm: "text-sm",
+  md: "text-base",
+  lg: "text-lg",
+};
+
+const spacingClasses = {
+  none: "space-y-0",
+  sm: "space-y-1",
+  md: "space-y-2",
+  lg: "space-y-3",
+};
+
+const markerClasses = {
+  disc: "list-disc",
+  circle: "list-circle",
+  square: "list-square",
+  decimal: "list-decimal",
+  none: "list-none",
+};
+
+const listClasses = computed(() => [
+  sizeClasses[props.size] || sizeClasses.md,
+  spacingClasses[props.spacing] || spacingClasses.sm,
+  props.marker 
+    ? markerClasses[props.marker] 
+    : (props.ordered ? "list-decimal" : "list-disc"),
+  "pl-5 text-slate-700",
+]);
+</script>
+

package/src/components/typography/DXList/index.js

@@ -0,0 +1,2 @@
+export { default } from './DXList.vue';
+

package/src/components/typography/DXText/DXText.stories.js

@@ -0,0 +1,47 @@
+import DXText from './DXText.vue';
+
+export default {
+  title: 'Typography/DXText',
+  component: DXText,
+  tags: ['autodocs'],
+  argTypes: {
+    size: { control: { type: 'select' }, options: ['xs', 'sm', 'md', 'lg', 'xl'] },
+    weight: { control: { type: 'select' }, options: ['normal', 'medium', 'semibold', 'bold'] },
+    color: { control: { type: 'select' }, options: ['default', 'muted', 'primary', 'success', 'warning', 'danger'] },
+    align: { control: { type: 'select' }, options: ['left', 'center', 'right', 'justify'] },
+  },
+};
+
+export const Default = {
+  args: {},
+  render: (args) => ({
+    components: { DXText },
+    setup() { return { args }; },
+    template: '<DXText v-bind="args">Это обычный текстовый параграф с настройками по умолчанию.</DXText>',
+  }),
+};
+
+export const Sizes = {
+  render: () => ({
+    components: { DXText },
+    template: `
+      <div class="space-y-2">
+        <DXText size="xs">Extra Small Text</DXText>
+        <DXText size="sm">Small Text</DXText>
+        <DXText size="md">Medium Text (default)</DXText>
+        <DXText size="lg">Large Text</DXText>
+        <DXText size="xl">Extra Large Text</DXText>
+      </div>
+    `,
+  }),
+};
+
+export const Truncated = {
+  args: { truncate: true },
+  render: (args) => ({
+    components: { DXText },
+    setup() { return { args }; },
+    template: '<div class="w-48"><DXText v-bind="args">Это очень длинный текст который будет обрезан с многоточием</DXText></div>',
+  }),
+};
+

package/src/components/typography/DXText/DXText.vue

@@ -0,0 +1,67 @@
+<template>
+  <component
+    :is="tag"
+    :class="textClasses"
+    data-component="DXText"
+    :data-size="size"
+    :data-weight="weight"
+    :data-color="color"
+  >
+    <slot />
+  </component>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { useVariantText } from "@/composables/useVariant";
+
+const props = defineProps({
+  /** Тег: p | span | div */
+  tag: { type: String, default: "p" },
+  /** Размер: xs | sm | md | lg | xl */
+  size: { type: String, default: "md" },
+  /** Вес шрифта: normal | medium | semibold | bold */
+  weight: { type: String, default: "normal" },
+  /** Цвет: default | muted | primary | success | warning | danger */
+  color: { type: String, default: "default" },
+  /** Выравнивание: left | center | right | justify */
+  align: { type: String, default: "left" },
+  /** Обрезать текст с ... */
+  truncate: { type: Boolean, default: false },
+  /** Максимум строк (line-clamp) */
+  lines: { type: Number, default: 0 },
+});
+
+const sizeClasses = {
+  xs: "text-xs",
+  sm: "text-sm",
+  md: "text-base",
+  lg: "text-lg",
+  xl: "text-xl",
+};
+
+const weightClasses = {
+  normal: "font-normal",
+  medium: "font-medium",
+  semibold: "font-semibold",
+  bold: "font-bold",
+};
+
+const alignClasses = {
+  left: "text-left",
+  center: "text-center",
+  right: "text-right",
+  justify: "text-justify",
+};
+
+const textClasses = computed(() => [
+  sizeClasses[props.size] || sizeClasses.md,
+  weightClasses[props.weight] || weightClasses.normal,
+  useVariantText(props.color),
+  alignClasses[props.align] || alignClasses.left,
+  "leading-relaxed",
+  props.truncate && "truncate",
+  props.lines > 0 && `line-clamp-${props.lines}`,
+]);
+</script>
+

package/src/components/typography/DXText/index.js

@@ -0,0 +1,2 @@
+export { default } from './DXText.vue';
+

package/src/components/typography/index.js

@@ -0,0 +1,8 @@
+// Typography components
+export { default as DXHeading } from './DXHeading';
+export { default as DXText } from './DXText';
+export { default as DXLabel } from './DXLabel';
+export { default as DXCode } from './DXCode';
+export { default as DXBlockquote } from './DXBlockquote';
+export { default as DXList } from './DXList';
+