djm-ui 0.0.0-stage → 0.67.2

package/src/components/status/index.js

@@ -0,0 +1,31 @@
+/**
+ * 状态徽标：统一「圆点 + 文案」的状态展示
+ * tone：ok | off | warn | danger（带不带 djm- 前缀都可以）
+ * type：success | warning | danger | info，与 Tag / Result 的语义值保持一致
+ * 用法：<DjmStatus type="success" label="启用" />
+ */
+const TONE_ALIAS = {
+  success: 'ok',
+  warning: 'warn',
+  error: 'danger',
+  info: 'brand',
+  default: 'off'
+}
+
+export default {
+  name: 'DjmStatus',
+  props: {
+    tone: { type: String, default: '' },
+    type: { type: String, default: '' },
+    label: { type: String, default: '' }
+  },
+  computed: {
+    classes () {
+      const raw = (this.tone || this.type || 'off').replace(/^djm-/, '')
+      return ['djm-status', 'djm-' + (TONE_ALIAS[raw] || raw)]
+    }
+  },
+  template: `
+    <span :class="classes"><i></i><slot>{{ label }}</slot></span>
+  `
+}

package/src/components/steps/index.js

@@ -0,0 +1,49 @@
+/**
+ * 步骤条：展示流程进度，支持横向与纵向
+ * 用法：<DjmSteps :items="[{ title: '填写', description: '…' }]" :current="1" />
+ */
+import Icon from '../icon/index.js'
+import { t } from '../../locale/index.js'
+
+export default {
+  name: 'DjmSteps',
+  components: { DjmIcon: Icon },
+  props: {
+    items: { type: Array, default: () => [] },
+    // 当前进行到第几步，从 0 开始
+    current: { type: Number, default: 0 },
+    direction: { type: String, default: 'horizontal' }, // horizontal / vertical
+    // 当前步骤状态：'' 正常 / error 失败
+    status: { type: String, default: '' }
+  },
+  methods: {
+    stepState (index) {
+      if (index < this.current) return 'finish'
+      if (index === this.current) return this.status === 'error' ? 'error' : 'process'
+      return 'wait'
+    },
+    t
+  },
+  template: `
+    <div class="djm-steps" :class="'djm-steps-' + direction">
+      <div
+        v-for="(item, index) in items"
+        :key="item.key || index"
+        class="djm-step"
+        :class="'djm-is-' + stepState(index)"
+        :aria-current="index === current ? 'step' : undefined"
+      >
+        <div class="djm-step-head">
+          <span class="djm-step-icon" aria-hidden="true">
+            <DjmIcon v-if="index < current" name="check" :size="12" />
+            <template v-else>{{ index + 1 }}</template>
+          </span>
+          <span class="djm-sr-only">{{ t('steps.order', { index: index + 1 }) }}</span>
+          <span class="djm-step-title">{{ item.title }}</span>
+          <span v-if="index < items.length - 1" class="djm-step-line" aria-hidden="true"></span>
+        </div>
+        <div v-if="item.description" class="djm-step-desc">{{ item.description }}</div>
+      </div>
+    </div>
+  `
+}

package/src/components/switch/index.js

@@ -0,0 +1,40 @@
+/**
+ * 开关：复用 djm-switch 样式，右侧可显示状态文案
+ * 用法：<DjmSwitch v-model="enabled" label="启用状态" />
+ * 表格等无可见文案的场景用 aria-label 补齐无障碍名称
+ */
+export default {
+  name: 'DjmSwitch',
+  props: {
+    modelValue: { type: Boolean, default: false },
+    label: { type: String, default: '' },
+    // 无可见文案时的无障碍名称
+    ariaLabel: { type: String, default: '' },
+    disabled: { type: Boolean, default: false }
+  },
+  emits: ['update:modelValue', 'change'],
+  methods: {
+    onChange (event) {
+      this.$emit('update:modelValue', event.target.checked)
+      this.$emit('change', event)
+    }
+  },
+  computed: {
+    hasLabel () {
+      return Boolean(this.label) || Boolean(this.$slots.default)
+    }
+  },
+  template: `
+    <label class="djm-switch" :class="{ 'djm-is-disabled': disabled }">
+      <input
+        type="checkbox"
+        :checked="modelValue"
+        :disabled="disabled"
+        :aria-label="hasLabel ? undefined : (ariaLabel || undefined)"
+        @change="onChange"
+      />
+      <span class="djm-switch-track"><i></i></span>
+      <em v-if="hasLabel"><slot>{{ label }}</slot></em>
+    </label>
+  `
+}